Agile Web Development with Rails, Edition 4

6.2 Iteration A2: Making Prettier Listings

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

Copy some images

cp -v /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.css.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',

  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)

# . . .

rake db:seed

Link to the stylesheet in the layout

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

<!DOCTYPE html>

<html>

<head>

  <title>Depot</title>

  <%= stylesheet_link_tag    "application" %>

  <%= javascript_include_tag "application" %>

  <%= csrf_meta_tags %>

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

                  confirm: 'Are you sure?',

                  method: :delete %>

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