Catalog Display<br />
What we’ll cover<br />Writing our own views<br />Using layouts to decorate pages<br />Integrating CSS / styling<br />Using...
Generate a store controller<br />rails generate controller store index<br />This sets up the scaffolding for /store/index<...
Make / point to the store<br />Right now when you go to http://localhost:3000/ you get the “default” rails page<br />Let’s...
Try it out<br />http://localhost:3000/<br />Still the default page, why?<br />
Try it out<br />http://localhost:3000/<br />Still the default page, why?<br />Remove public/index.html<br />rm public/inde...
Display a list of products available<br />app/controllers/store_controller.rb<br />def index<br />@products = Product.all<...
Update our view<br />app/views/store/index.html.erb<br />
Sanitize your HTML<br />We use the sanitize method to escape HTML<br />http://api.rubyonrails.org/classes/ActionView/Helpe...
Adding a page layout<br />Most pages on a site have a similar look<br />Header<br />Side bar<br />Footer<br />application....
Application Layout<br />app/views/layouts/application.html.erb<br />curl -o app/views/layouts/application.html.erb<br />ht...
New concepts in Layout<br /><%= stylesheet_link_tag “depot”, :media => “all” %><br />Generates a HTML <link> tag for our s...
Update stylesheet<br />http://media.pragprog.com/titles/rails4/code/depot_e/public/stylesheets/depot.css<br />
Reload the page<br />http://localhost:3000/<br />What’s wrong with the prices<br />Displaying 5.0 instead of $5.00<br />We...
Keep code out of your views<br /><%= sprintf(“$%0.02f”, product.price) %><br />Embeds knowledge in your views<br />Makes i...
number_to_currency<br />app/views/store/index.html.erb<br /><%= product.price %><br />becomes<br /><%= number_to_currency(...
Write tests!<br />Did we break anything?<br />rake test<br />No failures, yay!<br />Functional tests verify that a model, ...
Functional Tests (cont.)<br />
assert_select selectors<br /># matches on id attributes<br /><div id=“mydiv”>  => ‘#mydiv’<br />. matches on class attribu...
What do these match?<br />assert_select ‘#main .entry img’<br />An image tag in an element with a entry class inside an el...
What we just did<br />Created a new store controller<br />Made the store controller our root page<br />Made Products be so...
Homework<br />Add a date and time to the sidebar<br />Investigate the options to number_to_currency and play with a couple...
Upcoming SlideShare
Loading in...5
×

Catalog display

2,051

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
2,051
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
13
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Catalog display"

  1. 1. Catalog Display<br />
  2. 2. What we’ll cover<br />Writing our own views<br />Using layouts to decorate pages<br />Integrating CSS / styling<br />Using Helpers<br />Writing functional tests<br />
  3. 3. Generate a store controller<br />rails generate controller store index<br />This sets up the scaffolding for /store/index<br />http://localhost:3000/store/index<br />
  4. 4. Make / point to the store<br />Right now when you go to http://localhost:3000/ you get the “default” rails page<br />Let’s make / load the store we just created<br />config/routes.rb<br />root :to => ‘store#index’, :as => ‘store’<br />:as allows us to use store_path later<br />
  5. 5. Try it out<br />http://localhost:3000/<br />Still the default page, why?<br />
  6. 6. Try it out<br />http://localhost:3000/<br />Still the default page, why?<br />Remove public/index.html<br />rm public/index.html<br />
  7. 7. Display a list of products available<br />app/controllers/store_controller.rb<br />def index<br />@products = Product.all<br />end<br />app/models/product.rb<br />default_scope :order => ‘title’<br />
  8. 8. Update our view<br />app/views/store/index.html.erb<br />
  9. 9. Sanitize your HTML<br />We use the sanitize method to escape HTML<br />http://api.rubyonrails.org/classes/ActionView/Helpers/SanitizeHelper.html<br />Also use the image_tag helper to provide <img> tags<br />
  10. 10. Adding a page layout<br />Most pages on a site have a similar look<br />Header<br />Side bar<br />Footer<br />application.html.erb is the “default” layout<br />Unless a controller specifies otherwise<br />
  11. 11. Application Layout<br />app/views/layouts/application.html.erb<br />curl -o app/views/layouts/application.html.erb<br />http://media.pragprog.com/titles/rails4/code/depot_e/app/views/layouts/application.html.erb<br />
  12. 12. New concepts in Layout<br /><%= stylesheet_link_tag “depot”, :media => “all” %><br />Generates a HTML <link> tag for our stylesheet<br /><link href="/stylesheets/depot.css?1289056297" media="all" rel="stylesheet" type="text/css" /><br /><%= csrf_meta_tag %><br />Helps prevent cross site request forgery attacks<br />Covered in detail in chapter 12<br /><%= @page_title || “Pragmatic Bookshelf” %><br />If @page_title is defined, print it, otherwise “Pragmatic Bookshelf”<br /><%= yield %><br />Rails puts the stuff from the app/views/* files in at this point<br />
  13. 13. Update stylesheet<br />http://media.pragprog.com/titles/rails4/code/depot_e/public/stylesheets/depot.css<br />
  14. 14. Reload the page<br />http://localhost:3000/<br />What’s wrong with the prices<br />Displaying 5.0 instead of $5.00<br />We’ll fix that with a helper<br />
  15. 15. Keep code out of your views<br /><%= sprintf(“$%0.02f”, product.price) %><br />Embeds knowledge in your views<br />Makes internationalization hard<br />Don’t Repeat Yourself<br />Helper methods help you display things in your views<br />
  16. 16. number_to_currency<br />app/views/store/index.html.erb<br /><%= product.price %><br />becomes<br /><%= number_to_currency(product.price) %><br />Rails provides number_to_currency for you<br />http://api.rubyonrails.org/classes/ActionView/Helpers/NumberHelper.html<br />
  17. 17. Write tests!<br />Did we break anything?<br />rake test<br />No failures, yay!<br />Functional tests verify that a model, view and controller work together properly<br />
  18. 18. Functional Tests (cont.)<br />
  19. 19. assert_select selectors<br /># matches on id attributes<br /><div id=“mydiv”> => ‘#mydiv’<br />. matches on class attributes<br /><div class=“myclass”> => ‘.myclass’<br />No prefix match on element names<br /><a> => ‘a’<br />
  20. 20. What do these match?<br />assert_select ‘#main .entry img’<br />An image tag in an element with a entry class inside an element with an id of main<br />assert_select ‘.sidebar ulli.odd’<br />An li item with a class of odd inside of a ul item inside of an item with a class of sidebar<br />assert_select ‘span.widediv.even a img’<br />An image tag within an anchor (a) tag within a div with a class of even within a span with a class of wide<br />
  21. 21. What we just did<br />Created a new store controller<br />Made the store controller our root page<br />Made Products be sorted by title by default<br />Implement a view and an application layout<br />Use a Rails helper to format prices<br />Make use of a CSS stylesheet<br />Write functional tests for our controller<br />
  22. 22. Homework<br />Add a date and time to the sidebar<br />Investigate the options to number_to_currency and play with a couple<br />http://api.rubyonrails.org/classes/ActionView/Helpers/NumberHelper.html<br />Write some functional tests for the products controller (test/functional/product_controller_test.rb)<br />Commit your work in Git<br />
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×