Your SlideShare is downloading. ×
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,005
views

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,005
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
  • 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