Catalog display

  • 1,985 views
Uploaded on

 

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
1,985
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
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