Catalog display

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.rbdef 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/Hel

pers/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 ul li.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.wide div.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/Hel

pers/NumberHelper.html• Write some functional tests for the products

controller (test/functional/product_controller_test.rb)

• Commit your work in Git