Catalog Display

Create a Store’s Controller, which contains index action:

rails generate controller Store index

In main, there must be 3 entry
Assert_select ‘H3’, ‘Programming Ruby 1.9’ #H3 should be the title of the book.
Assert_Select ‘.price’, / \ $h inscriptions, \d, \ case
end

end

‘css selector, #select ID, select class
Assert_select ‘#Main. Entry’,

Rails.application.routes.draw do
  get 'store/index'

  resources :products
  root to: 'store#index', as: 'store'
end

and then delete the public/index.html (if so).
Define a member variable Products in the App/Controller/Store_Controller.rb file:

class StoreController < ApplicationController
  def index
    @products = Product.order(:title)
  end
end

@products get all the product according to the letters.

Edit app/views/store/index.html.erb:

< % if notice %> 
 <p ID = "notice"> < %= notice %> </p> 
 < % End %> 

 <H1> Your Pragmatic Catalog </h1> 

 < % @Products.each Do | Product | %> #Use the PRODUCTS member variable defined in Store_Controller 
   <div class = "entry"> 
     < %= Image_tag (PRODUCT.IMAGE_URL) %> #Generate img tag 
     <h3> < %= product.tital %> </h3> 
     <p> < %= Sanitize (Product.Descript) %> </p> #turn the description into HTML form, which may have security vulnerabilities. 
     <div class = "price_line"> 
       <span class = "price"> < %= number_to_currency (product.price) %> </span> #Formulate output price 
     </div> 
   </div> 
 < % End %>

The following edit app/assets/styleSheets/Store.css.scss file, add format:

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

Next we modify the layout of the entire Application and add banner.

Modify the app/views/layouts/application.html.erb file:

<!DOCTYPE html>
<html>
<head>
  <title>MyApp</title>
  <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
  <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
  <%= csrf_meta_tags %>
</head>
<body class="<%= controller.controller_name %>">
  <div id="banner">
    <%= image_tag("logo.png") %>
    <%= @page_title || "Pragmatic Bookshelf" %> 
  </div>
  <div id="columns">
    <div id="side">
      <ul>
        <li><a href="http://www....">Home</a></li>
        <li><a href="http://www..../faq">Questions</a></li>
        <li><a href="http://www..../news">News</a></li>
        <li><a href="http://www..../contact">Contact</a></li>
      </ul>
    </div>
    <div id="main">
      <%= yield %>
    </div>
  </div>
</body>
</html>

and then define the corresponding CSS format to change the app/assets/styleEts/Application.css file name to the App/Assets/styleSheets/Application.CSSS file:

#banner {
  background: #9c9;
  padding: 10px;
  border-bottom: 2px solid;
  font: small-caps 40px/40px "Times New Roman", serif;
  color: #282;
  text-align: center;

  img {
    float: left;
  }
}

#notice {
  color: #000 !important;
  border: 2px solid red;
  padding: 1em;
  margin-bottom: 2em;
  background-color: #f0f0f0;
  font: bold smaller sans-serif;
}

#columns {
  background: #141;

  #main {
    margin-left: 17em;
    padding: 1em;
    background: white;
  }

  #side {
    float: left;
    padding: 1em 2em;
    width: 13em;
    background: #141;

    ul {
      padding: 0;
      li {
        list-style: none;
        a {
          color: #bfb;
          font-size: small;
        }
      }
    }
  }
}

Next we add the test of StoreController:

Modify test/controller/store_controller_test.rb file:

Require 'test_helper' 

 Class StoreControllerTest <ActionController :: testcase 
   Test "Should get index" do 
     get: index 
     assert_response: Success 
 assert_select '#columns #Side a', minimum:

Then run the functional test: