6.2 Iteration A2: Making Prettier Listings

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

Copy some images and a stylesheet

cp -v /home/rubys/git/awdwr/edition4/data/images/* public/images/

`/home/rubys/git/awdwr/edition4/data/images/cs.jpg' -> `public/images/cs.jpg'

`/home/rubys/git/awdwr/edition4/data/images/debug.jpg' -> `public/images/debug.jpg'

`/home/rubys/git/awdwr/edition4/data/images/logo.png' -> `public/images/logo.png'

`/home/rubys/git/awdwr/edition4/data/images/rails.png' -> `public/images/rails.png'

`/home/rubys/git/awdwr/edition4/data/images/rtp.jpg' -> `public/images/rtp.jpg'

`/home/rubys/git/awdwr/edition4/data/images/ruby.jpg' -> `public/images/ruby.jpg'

`/home/rubys/git/awdwr/edition4/data/images/wd4d.jpg' -> `public/images/wd4d.jpg'

cp -v /home/rubys/git/awdwr/edition4/data/depot.css public/stylesheets

`/home/rubys/git/awdwr/edition4/data/depot.css' -> `public/stylesheets/depot.css'

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 => '/images/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 :all %>

  <%= javascript_include_tag :defaults %>

  <%= csrf_meta_tag %>

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

<div id="product_list">

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

</div>

<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