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

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

  resources :products

  # For details on the DSL available within this file, see

  # http://guides.rubyonrails.org/routing.html

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 %>

  <aside id="notice"><%= notice %></aside>

<% end %>

<h1>Your Pragmatic Catalog</h1>

<ul class="catalog">

  <% @products.each do |product| %>

    <li>

      <%= image_tag(product.image_url) %>

      <h2><%= product.title %></h2>

      <p>

        <%= sanitize(product.description) %>

      </p>

      <div class="price">

        <%= product.price %>

      </div>

    </li>

  <% end %>

</ul>

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: http://sass-lang.com/

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

8.2 Iteration C2: Add a Page Layout 7.3 Playtime