6.2 Iteration A2: Making Prettier Listings

Show the relationship between various artifacts: seed data, stylesheets, html, and images.

Copy some images

cp -vp /home/rubys/git/awdwr/edition4/data/assets/* app/assets/images/

‘/home/rubys/git/awdwr/edition4/data/assets/cs.jpg’ -> ‘app/assets/images/cs.jpg’

‘/home/rubys/git/awdwr/edition4/data/assets/logo.png’ -> ‘app/assets/images/logo.png’

‘/home/rubys/git/awdwr/edition4/data/assets/rails.png’ -> ‘app/assets/images/rails.png’

‘/home/rubys/git/awdwr/edition4/data/assets/rtp.jpg’ -> ‘app/assets/images/rtp.jpg’

‘/home/rubys/git/awdwr/edition4/data/assets/ruby.jpg’ -> ‘app/assets/images/ruby.jpg’

Add some style

edit app/assets/stylesheets/products.scss

// Place all the styles related to the Products controller here.

// They will automatically be included in application.css.

// You can use Sass (SCSS) here: http://sass-lang.com/

.products {

  table {

    border-collapse: collapse;

  table tr td {

    padding: 5px;

    vertical-align: top;

  .list_image {

    width:  60px;

    height: 70px;

  .list_description {

    width: 60%;

    dl {

      margin: 0;

    dt {

      color:        #244;

      font-weight:  bold;

      font-size:    larger;

    dd {

      margin: 0;

  .list_actions {

    font-size:    x-small;

    text-align:   right;

    padding-left: 1em;

  .list_line_even {

    background:   #e0f8f8;

  .list_line_odd {

    background:   #f8b0f8;

Load some "seed" data

edit db/seeds.rb

Product.delete_all

# . . .

Product.create(title: 'Programming Ruby 1.9 & 2.0',

  description:

    %{<p>

        Ruby is the fastest growing and most exciting dynamic language

        out there. If you need to get working programs delivered fast,

        you should add Ruby to your toolbox.

      </p>},

  image_url: 'ruby.jpg',

  price: 49.95)

# . . .

rails db:seed

Link to the stylesheet in the layout

edit app/views/layouts/application.html.erb

<!DOCTYPE html>

<html>

  <head>

    <title>Depot</title>

    <%= csrf_meta_tags %>

    <%= action_cable_meta_tag %>

    <%= stylesheet_link_tag    'application', media: 'all',

    'data-turbolinks-track' => 'reload' %>

    <%= javascript_include_tag 'application', 'data-turbolinks-track' => 'reload' %>

  </head>

  <body class='<%= controller.controller_name %>'>

    <%= yield %>

  </body>

</html>

Replace the scaffold generated view with some custom HTML

edit app/views/products/index.html.erb

<h1>Listing products</h1>

<table>

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

  <tr class="<%= cycle('list_line_odd', 'list_line_even') %>">

    <td>

      <%= image_tag(product.image_url, class: 'list_image') %>

    </td>

    <td class="list_description">

      <dl>

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

        <dd><%= truncate(strip_tags(product.description),

               length: 80) %></dd>

      </dl>

    </td>

    <td class="list_actions">

      <%= link_to 'Show', product %><br/>

      <%= link_to 'Edit', edit_product_path(product) %><br/>

      <%= link_to 'Destroy', product, method: :delete,

                  data: { confirm: 'Are you sure?' } %>

    </td>

  </tr>

<% end %>

</table>

<br />

<%= link_to 'New product', new_product_path %>

See the finished result

get /products

Listing products

	CoffeeScript CoffeeScript is JavaScript done right. It provides all of JavaScript...	Show Edit Destroy
	Programming Ruby 1.9 & 2.0 Ruby is the fastest growing and most exciting dynamic language ...	Show Edit Destroy
	Rails Test Prescriptions Rails Test Prescriptions is a comprehensive guide to testing ...	Show Edit Destroy

New product