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,023

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,023
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

×