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/7apps.jpg’ -> ‘app/assets/images/7apps.jpg’

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

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

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

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

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

‘/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: 'Seven Mobile Apps in Seven Weeks',

  description:

    %{<p>

      <em>Native Apps, Multiple Platforms</em>

      Answer the question “Can we build this for ALL the devices?” with a

      resounding YES. This book will help you get there with a real-world

      introduction to seven platforms, whether you’re new to mobile or an

      experienced developer needing to expand your options. Plus, you’ll find

      out which cross-platform solution makes the most sense for your needs.

      </p>},

  image_url: '7apps.jpg',

  price: 26.00)

# . . .

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

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

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

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

Products

	Rails, Angular, Postgres, and Bootstrap Powerful, Effective, and Efficient Full-Stack Web Development As...	Show Edit Destroy
	Seven Mobile Apps in Seven Weeks Native Apps, Multiple Platforms Answer the question “Can we buil...	Show Edit Destroy
	Ruby Performance Optimization Why Ruby Is Slow, and How to Fix It You don’t have to accept sl...	Show Edit Destroy

New product