8.2 Iteration C2: Add a Page Layout 7.3 Playtime

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/controllers/store_controller_test.rb

      invoke  helper

      create    app/helpers/store_helper.rb

      invoke    test_unit

      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

Rails.application.routes.draw do

  get 'store/index'

  resources :products

  # The priority is based upon order of creation:

  # first created -> highest priority.

  # See how all your routes lay out with "rake routes".

  # You can have the root of your site routed with "root"

  root 'store#index', as: 'store'

  # ...

end

Demonstrate that everything is wired together

get /

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

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

Programming Ruby 1.9 & 2.0

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

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