1. Catalog Display

2. What we’ll cover Writing our own views Using layouts to decorate pages Integrating CSS / styling Using Helpers Writing functional tests

3. Generate a store controller rails generate controller store index This sets up the scaffolding for /store/index http://localhost:3000/store/index

4. Make / point to the store Right now when you go to http://localhost:3000/ you get the “default” rails page Let’s make / load the store we just created config/routes.rb root :to => ‘store#index’, :as => ‘store’ :as allows us to use store_path later

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

6. Try it out http://localhost:3000/ Still the default page, why? Remove public/index.html rm public/index.html

7. Display a list of products available app/controllers/store_controller.rb def index @products = Product.all end app/models/product.rb default_scope :order => ‘title’

8. Update our view app/views/store/index.html.erb

9. Sanitize your HTML We use the sanitize method to escape HTML http://api.rubyonrails.org/classes/ActionView/Helpers/SanitizeHelper.html Also use the image_tag helper to provide <img> tags

10. Adding a page layout Most pages on a site have a similar look Header Side bar Footer application.html.erb is the “default” layout Unless a controller specifies otherwise

11. Application Layout app/views/layouts/application.html.erb curl -o app/views/layouts/application.html.erb http://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 attacks Covered 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 stylesheet http://media.pragprog.com/titles/rails4/code/depot_e/public/stylesheets/depot.css

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

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

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

17. Write tests! Did we break anything? rake test No 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 main assert_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 sidebar assert_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 did Created a new store controller Made the store controller our root page Made Products be sorted by title by default Implement a view and an application layout Use a Rails helper to format prices Make use of a CSS stylesheet Write functional tests for our controller

22. Homework Add a date and time to the sidebar Investigate the options to number_to_currency and play with a couple http://api.rubyonrails.org/classes/ActionView/Helpers/NumberHelper.html Write some functional tests for the products controller (test/functional/product_controller_test.rb) Commit your work in Git