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

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

rm public/index.html

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>

    <p><%= sanitize(product.description) %></p>

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