• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Catalog display
 

Catalog display

on

  • 2,254 views

 

Statistics

Views

Total Views
2,254
Views on SlideShare
2,254
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
    • 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
    • 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