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

<Your Pragmatic Catalog> expected but was
<Store#index>.
<0> expected to be
>=
<1>.

Traceback:
  /home/rubys/git/awdwr/edition4/checkdepot.rb:110:in `block in <class:DepotTest>'

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.coffee
      invoke    scss
      create      app/assets/stylesheets/store.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 /

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

Sprockets::Rails::Helper::AssetNotPrecompiled in Store#index

Showing /home/rubys/git/awdwr/edition4/work-42/depot/app/views/store/index.html.erb where line #9 raised:

Asset was not declared to be precompiled in production.
Add `Rails.application.config.assets.precompile += %w( cs.jpg )` to `config/initializers/assets.rb` and restart your server
Extracted source (around line #9):
7
8
9
10
11
12
              
<% @products.each do |product| %>
<div class="entry">
<%= image_tag(product.image_url) %>
<h3><%= product.title %></h3>
<%= sanitize(product.description) %>
<div class="price_line">

Rails.root: /home/rubys/git/awdwr/edition4/work-42/depot

Application Trace | Framework Trace | Full Trace

Request

Parameters:

None

Response

Headers:

None

8.2 Iteration C2: Add a Page Layout 7.3 Playtime