Agile Web Development with Rails, Edition 5

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/controllers/store_controller_test.rb
      invoke  helper
      create    app/helpers/store_helper.rb
      invoke    test_unit
      invoke  assets
      invoke    coffee
      create      app/assets/javascripts/
      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
  root 'store#index', as: 'store_index'
  resources :products
  # For details on the DSL available within this file, see

Demonstrate that everything is wired together

get /


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)

In the view, display a list of products

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

Add some basic style

edit app/assets/stylesheets/store.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:
.store {
  max-width: 80em;
  ul.catalog {
    border-top: solid 0.250em;
    list-style: none;
    padding: 0;
    margin: 0;
    li {
      padding: 1em;
      margin: 0;
      border-bottom: solid thin #ddd;
      // This makes sure our <li> has enough height
      // to hold the entire image, since it's floated
      &::after {
        clear: both;
        content: " ";
        display: block;
      img {
        float: left;
        padding: 1em;
        margin-right: 1em;
        margin-bottom: 1em;
        box-shadow: 0.176em 0.176em 0.354em 0px rgba(0,0,0,0.75);
      .price {
        font-size: 1.414em;

Show our first (ugly) catalog page

get /

Your Pragmatic Catalog

8.2 Iteration C2: Add a Page Layout 7.3 Playtime