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.

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 => '/images/ruby.jpg',

  :price => 49.50)

  # . . .

rake db:seed

(in /home/rubys/svn/rails4/Book/util/work-193/depot)

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>

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,

                    :confirm => 'Are you sure?',

                    :method => :delete %>

      </td>

    </tr>

  <% end %>

  </table>

</div>

<br />

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

Copy some images and a stylesheet

cp -v /home/rubys/svn/rails4/Book/util/data/images/* public/images/

`/home/rubys/svn/rails4/Book/util/data/images/debug.jpg' -> `public/images/debug.jpg'

`/home/rubys/svn/rails4/Book/util/data/images/logo.png' -> `public/images/logo.png'

`/home/rubys/svn/rails4/Book/util/data/images/rails.png' -> `public/images/rails.png'

`/home/rubys/svn/rails4/Book/util/data/images/rtp.jpg' -> `public/images/rtp.jpg'

`/home/rubys/svn/rails4/Book/util/data/images/ruby.jpg' -> `public/images/ruby.jpg'

`/home/rubys/svn/rails4/Book/util/data/images/wd4d.jpg' -> `public/images/wd4d.jpg'

cp -v /home/rubys/svn/rails4/Book/util/data/depot.css public/stylesheets

`/home/rubys/svn/rails4/Book/util/data/depot.css' -> `public/stylesheets/depot.css'

See the finished result

get /products

Listing products

	Web Design for Developers Web Design for Developers will show you how to make your web-b...	Show Edit Destroy
	Programming Ruby 1.9 Ruby is the fastest growing and most exciting dynamic language out ...	Show Edit Destroy
	Debug It! Professional programmers develop a knack of unerringly zeroing in on...	Show Edit Destroy

New product