Catalog display
Upcoming SlideShare
Loading in...5
×
 

Catalog display

on

  • 2,381 views

 

Statistics

Views

Total Views
2,381
Views on SlideShare
2,381
Embed Views
0

Actions

Likes
0
Downloads
12
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Catalog display Catalog display Presentation Transcript

  • Catalog Display
  • What we’ll cover
    Writing our own views
    Using layouts to decorate pages
    Integrating CSS / styling
    Using Helpers
    Writing functional tests
  • Generate a store controller
    rails generate controller store index
    This sets up the scaffolding for /store/index
    http://localhost:3000/store/index
    View slide
  • 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
    View slide
  • Try it out
    http://localhost:3000/
    Still the default page, why?
  • Try it out
    http://localhost:3000/
    Still the default page, why?
    Remove public/index.html
    rm public/index.html
  • 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’
  • Update our view
    app/views/store/index.html.erb
  • 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
  • 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
  • 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
  • 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
  • Update stylesheet
    http://media.pragprog.com/titles/rails4/code/depot_e/public/stylesheets/depot.css
  • 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
  • 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
  • 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
  • Write tests!
    Did we break anything?
    rake test
    No failures, yay!
    Functional tests verify that a model, view and controller work together properly
  • Functional Tests (cont.)
  • 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’
  • 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
  • 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
  • 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