The document discusses setting up a basic online store application in Rails. It covers generating a Store controller, routing requests to the store index action, displaying a list of products from the database, adding styles with CSS, using Rails helpers like number_to_currency to format prices, and writing functional tests for the controller. Homework includes adding a date to the sidebar, experimenting with number formatting options, and writing tests for the products controller.

1. Catalog Display

2. What we’ll coverWriting our own viewsUsing layouts to decorate pagesIntegrating CSS / stylingUsing HelpersWriting functional tests

3. Generate a store controllerrails generate controller store indexThis sets up the scaffolding for /store/indexhttp://localhost:3000/store/index

4. Make / point to the storeRight now when you go to http://localhost:3000/ you get the “default” rails pageLet’s make / load the store we just createdconfig/routes.rbroot :to => ‘store#index’, :as => ‘store’:as allows us to use store_path later

5. Try it outhttp://localhost:3000/Still the default page, why?

6. Try it outhttp://localhost:3000/Still the default page, why?Remove public/index.htmlrm public/index.html

7. Display a list of products availableapp/controllers/store_controller.rbdef index@products = Product.allendapp/models/product.rbdefault_scope :order => ‘title’

8. Update our viewapp/views/store/index.html.erb

9. Sanitize your HTMLWe use the sanitize method to escape HTMLhttp://api.rubyonrails.org/classes/ActionView/Helpers/SanitizeHelper.htmlAlso use the image_tag helper to provide <img> tags

10. Adding a page layoutMost pages on a site have a similar lookHeaderSide barFooterapplication.html.erb is the “default” layoutUnless a controller specifies otherwise

11. Application Layoutapp/views/layouts/application.html.erbcurl -o app/views/layouts/application.html.erbhttp://media.pragprog.com/titles/rails4/code/depot_e/app/views/layouts/application.html.erb

12. New concepts in Layout<%= stylesheet_link_tag “depot”, :media => “all” %>Generates a HTML <link> tag for our stylesheet<link href="/stylesheets/depot.css?1289056297" media="all" rel="stylesheet" type="text/css" /><%= csrf_meta_tag %>Helps prevent cross site request forgery attacksCovered in detail in chapter 12<%= @page_title || “Pragmatic Bookshelf” %>If @page_title is defined, print it, otherwise “Pragmatic Bookshelf”<%= yield %>Rails puts the stuff from the app/views/* files in at this point

13. Update stylesheethttp://media.pragprog.com/titles/rails4/code/depot_e/public/stylesheets/depot.css

14. Reload the pagehttp://localhost:3000/What’s wrong with the pricesDisplaying 5.0 instead of $5.00We’ll fix that with a helper

15. Keep code out of your views<%= sprintf(“$%0.02f”, product.price) %>Embeds knowledge in your viewsMakes internationalization hardDon’t Repeat YourselfHelper methods help you display things in your views

16. number_to_currencyapp/views/store/index.html.erb<%= product.price %>becomes<%= number_to_currency(product.price) %>Rails provides number_to_currency for youhttp://api.rubyonrails.org/classes/ActionView/Helpers/NumberHelper.html

17. Write tests!Did we break anything?rake testNo failures, yay!Functional tests verify that a model, view and controller work together properly

18. Functional Tests (cont.)

19. assert_select selectors# matches on id attributes<div id=“mydiv”> => ‘#mydiv’. matches on class attributes<div class=“myclass”> => ‘.myclass’No prefix match on element names<a> => ‘a’

20. What do these match?assert_select ‘#main .entry img’An image tag in an element with a entry class inside an element with an id of mainassert_select ‘.sidebar ulli.odd’An li item with a class of odd inside of a ul item inside of an item with a class of sidebarassert_select ‘span.widediv.even a img’An image tag within an anchor (a) tag within a div with a class of even within a span with a class of wide

21. What we just didCreated a new store controllerMade the store controller our root pageMade Products be sorted by title by defaultImplement a view and an application layoutUse a Rails helper to format pricesMake use of a CSS stylesheetWrite functional tests for our controller

22. HomeworkAdd a date and time to the sidebarInvestigate the options to number_to_currency and play with a couplehttp://api.rubyonrails.org/classes/ActionView/Helpers/NumberHelper.htmlWrite some functional tests for the products controller (test/functional/product_controller_test.rb)Commit your work in Git