Your SlideShare is downloading. ×
0
Catalog display
Catalog display
Catalog display
Catalog display
Catalog display
Catalog display
Catalog display
Catalog display
Catalog display
Catalog display
Catalog display
Catalog display
Catalog display
Catalog display
Catalog display
Catalog display
Catalog display
Catalog display
Catalog display
Catalog display
Catalog display
Catalog display
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Catalog display

2,031

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,031
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
13
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Catalog Display<br />
  • 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. 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. 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 =&gt; ‘store#index’, :as =&gt; ‘store’<br />:as allows us to use store_path later<br />
  • 5. Try it out<br />http://localhost:3000/<br />Still the default page, why?<br />
  • 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. 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 =&gt; ‘title’<br />
  • 8. Update our view<br />app/views/store/index.html.erb<br />
  • 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 &lt;img&gt; tags<br />
  • 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. 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. New concepts in Layout<br />&lt;%= stylesheet_link_tag “depot”, :media =&gt; “all” %&gt;<br />Generates a HTML &lt;link&gt; tag for our stylesheet<br />&lt;link href=&quot;/stylesheets/depot.css?1289056297&quot; media=&quot;all&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot; /&gt;<br />&lt;%= csrf_meta_tag %&gt;<br />Helps prevent cross site request forgery attacks<br />Covered in detail in chapter 12<br />&lt;%= @page_title || “Pragmatic Bookshelf” %&gt;<br />If @page_title is defined, print it, otherwise “Pragmatic Bookshelf”<br />&lt;%= yield %&gt;<br />Rails puts the stuff from the app/views/* files in at this point<br />
  • 13. Update stylesheet<br />http://media.pragprog.com/titles/rails4/code/depot_e/public/stylesheets/depot.css<br />
  • 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. Keep code out of your views<br />&lt;%= sprintf(“$%0.02f”, product.price) %&gt;<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. number_to_currency<br />app/views/store/index.html.erb<br />&lt;%= product.price %&gt;<br />becomes<br />&lt;%= number_to_currency(product.price) %&gt;<br />Rails provides number_to_currency for you<br />http://api.rubyonrails.org/classes/ActionView/Helpers/NumberHelper.html<br />
  • 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. Functional Tests (cont.)<br />
  • 19. assert_select selectors<br /># matches on id attributes<br />&lt;div id=“mydiv”&gt; =&gt; ‘#mydiv’<br />. matches on class attributes<br />&lt;div class=“myclass”&gt; =&gt; ‘.myclass’<br />No prefix match on element names<br />&lt;a&gt; =&gt; ‘a’<br />
  • 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. 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. 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 />

×