catalog display
DESCRIPTION
TRANSCRIPT
![Page 1: Catalog display](https://reader038.vdocument.in/reader038/viewer/2022102721/549a3a7bac795982318b4fce/html5/thumbnails/1.jpg)
Catalog Display
![Page 2: Catalog display](https://reader038.vdocument.in/reader038/viewer/2022102721/549a3a7bac795982318b4fce/html5/thumbnails/2.jpg)
What we’ll cover
• Writing our own views• Using layouts to decorate pages• Integrating CSS / styling• Using Helpers• Writing functional tests
![Page 3: Catalog display](https://reader038.vdocument.in/reader038/viewer/2022102721/549a3a7bac795982318b4fce/html5/thumbnails/3.jpg)
Generate a store controller
• rails generate controller store index– This sets up the scaffolding for /store/index
• http://localhost:3000/store/index
![Page 4: Catalog display](https://reader038.vdocument.in/reader038/viewer/2022102721/549a3a7bac795982318b4fce/html5/thumbnails/4.jpg)
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
![Page 6: Catalog display](https://reader038.vdocument.in/reader038/viewer/2022102721/549a3a7bac795982318b4fce/html5/thumbnails/6.jpg)
Try it out
• http://localhost:3000/– Still the default page, why?
– Remove public/index.html• rm public/index.html
![Page 7: Catalog display](https://reader038.vdocument.in/reader038/viewer/2022102721/549a3a7bac795982318b4fce/html5/thumbnails/7.jpg)
Display a list of products available
• app/controllers/store_controller.rbdef index
@products = Product.all
end• app/models/product.rb– default_scope :order => ‘title’
![Page 8: Catalog display](https://reader038.vdocument.in/reader038/viewer/2022102721/549a3a7bac795982318b4fce/html5/thumbnails/8.jpg)
Update our view
• app/views/store/index.html.erb
![Page 9: Catalog display](https://reader038.vdocument.in/reader038/viewer/2022102721/549a3a7bac795982318b4fce/html5/thumbnails/9.jpg)
Sanitize your HTML
• We use the sanitize method to escape HTML– http://api.rubyonrails.org/classes/ActionView/Hel
pers/SanitizeHelper.html• Also use the image_tag helper to provide
<img> tags
![Page 10: Catalog display](https://reader038.vdocument.in/reader038/viewer/2022102721/549a3a7bac795982318b4fce/html5/thumbnails/10.jpg)
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
![Page 11: Catalog display](https://reader038.vdocument.in/reader038/viewer/2022102721/549a3a7bac795982318b4fce/html5/thumbnails/11.jpg)
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
![Page 12: Catalog display](https://reader038.vdocument.in/reader038/viewer/2022102721/549a3a7bac795982318b4fce/html5/thumbnails/12.jpg)
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
![Page 13: Catalog display](https://reader038.vdocument.in/reader038/viewer/2022102721/549a3a7bac795982318b4fce/html5/thumbnails/13.jpg)
Update stylesheet
http://media.pragprog.com/titles/rails4/code/depot_e/public/stylesheets/depot.css
![Page 14: Catalog display](https://reader038.vdocument.in/reader038/viewer/2022102721/549a3a7bac795982318b4fce/html5/thumbnails/14.jpg)
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
![Page 15: Catalog display](https://reader038.vdocument.in/reader038/viewer/2022102721/549a3a7bac795982318b4fce/html5/thumbnails/15.jpg)
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
![Page 16: Catalog display](https://reader038.vdocument.in/reader038/viewer/2022102721/549a3a7bac795982318b4fce/html5/thumbnails/16.jpg)
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
![Page 17: Catalog display](https://reader038.vdocument.in/reader038/viewer/2022102721/549a3a7bac795982318b4fce/html5/thumbnails/17.jpg)
Write tests!
• Did we break anything?– rake test• No failures, yay!
• Functional tests verify that a model, view and controller work together properly
![Page 18: Catalog display](https://reader038.vdocument.in/reader038/viewer/2022102721/549a3a7bac795982318b4fce/html5/thumbnails/18.jpg)
Functional Tests (cont.)
![Page 19: Catalog display](https://reader038.vdocument.in/reader038/viewer/2022102721/549a3a7bac795982318b4fce/html5/thumbnails/19.jpg)
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’
![Page 20: Catalog display](https://reader038.vdocument.in/reader038/viewer/2022102721/549a3a7bac795982318b4fce/html5/thumbnails/20.jpg)
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 ul li.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.wide div.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
![Page 21: Catalog display](https://reader038.vdocument.in/reader038/viewer/2022102721/549a3a7bac795982318b4fce/html5/thumbnails/21.jpg)
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
![Page 22: Catalog display](https://reader038.vdocument.in/reader038/viewer/2022102721/549a3a7bac795982318b4fce/html5/thumbnails/22.jpg)
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/Hel
pers/NumberHelper.html• Write some functional tests for the products
controller (test/functional/product_controller_test.rb)
• Commit your work in Git