Agile Web Development with Rails, Edition 4

Agile Web Development with Rails, Edition 4

8.2 Iteration C2: Add a Page Layout 7.3 Playtime

8.1 Iteration C1: Create the Catalog Listing

Show the model, view, and controller working together.

Create a second controller with a single index action

rails generate controller Store index
      create  app/controllers/store_controller.rb
       route  get "store/index"
      invoke  erb
      create    app/views/store
      create    app/views/store/index.html.erb
      invoke  test_unit
      create    test/functional/store_controller_test.rb
      invoke  helper
      create    app/helpers/store_helper.rb
      invoke    test_unit
      create      test/unit/helpers/store_helper_test.rb
      invoke  assets
      invoke    coffee
      create      app/assets/javascripts/store.js.coffee
      invoke    scss
      create      app/assets/stylesheets/store.css.scss

Route the 'root' of the site to the store

edit config/routes.rb
Depot::Application.routes.draw do
  get "store/index"
 
  resources :products
 
  # ...
 
  # You can have the root of your site routed with "root"
  # just remember to delete public/index.html.
  # root :to => 'welcome#index'
  root to: 'store#index', as: 'store'
 
  # ...
end

Delete public/index.html, as instructed.

rm public/index.html

Demonstrate that everything is wired together

get /

Store#index

Find me in app/views/store/index.html.erb

In the controller, get a list of products from the model

edit app/controllers/store_controller.rb
class StoreController < ApplicationController
  def index
    @products = Product.order(:title)
  end
 
end

In the view, display a list of products

edit app/views/store/index.html.erb
<% if notice %>
<p id="notice"><%= notice %></p>
<% end %>
 
<h1>Your Pragmatic Catalog</h1>
 
<% @products.each do |product| %>
  <div class="entry">
    <%= image_tag(product.image_url) %>
    <h3><%= product.title %></h3>
    <%= sanitize(product.description) %>
    <div class="price_line">
      <span class="price"><%= product.price %></span>
    </div>
  </div>
<% end %>

Add some basic style

edit app/assets/stylesheets/store.css.scss
// Place all the styles related to the Store controller here.
// They will automatically be included in application.css.
// You can use Sass (SCSS) here: http://sass-lang.com/
 
.store {
  h1 {
    margin: 0;
    padding-bottom: 0.5em;
    font:  150% sans-serif;
    color: #226;
    border-bottom: 3px dotted #77d;
  }
 
  /* An entry in the store catalog */
  .entry {
    overflow: auto;
    margin-top: 1em;
    border-bottom: 1px dotted #77d;
    min-height: 100px;
 
    img {
      width: 80px;
      margin-right: 5px;
      margin-bottom: 5px;
      position: absolute;
    }
 
    h3 {
      font-size: 120%;
      font-family: sans-serif;
      margin-left: 100px;
      margin-top: 0;
      margin-bottom: 2px;
      color: #227;
    }
 
    p, div.price_line {
      margin-left: 100px;
      margin-top: 0.5em; 
      margin-bottom: 0.8em; 
    }
 
    .price {
      color: #44a;
      font-weight: bold;
      margin-right: 3em;
    }
  }
}

Show our first (ugly) catalog page

get /

Your Pragmatic Catalog

Cs

CoffeeScript

CoffeeScript is JavaScript done right. It provides all of JavaScript's functionality wrapped in a cleaner, more succinct syntax. In the first book on this exciting new language, CoffeeScript guru Trevor Burnham shows you how to hold onto all the power and flexibility of JavaScript while writing clearer, cleaner, and safer code.

36.0
Ruby

Programming Ruby 1.9

Ruby is the fastest growing and most exciting dynamic language out there. If you need to get working programs delivered fast, you should add Ruby to your toolbox.

49.95
Rtp

Rails Test Prescriptions

Rails Test Prescriptions is a comprehensive guide to testing Rails applications, covering Test-Driven Development from both a theoretical perspective (why to test) and from a practical perspective (how to test effectively). It covers the core Rails testing tools and procedures for Rails 2 and Rails 3, and introduces popular add-ons, including Cucumber, Shoulda, Machinist, Mocha, and Rcov.

34.95

8.2 Iteration C2: Add a Page Layout 7.3 Playtime