Agile Web Development with Rails, Edition 5

6.3 Playtime 6.1 Iteration A1: Creating the Products Maintenance Application

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/rails.png’ -> ‘app/assets/images/rails.png’

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

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

New product

6.3 Playtime 6.1 Iteration A1: Creating the Products Maintenance Application