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/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:
.products {
  margin: 0;
  padding: 0.5em;
  a {
    padding: 0.354em 0.5em;
    border-radius: 0.354em;
  table {
    border-collapse: collapse;
  td {
    padding: 0.5em;
    margin: 0;
  tr.list_line_odd {
    background-color: #effeef;
  td.image {
    // Hide this on mobile devices
    display: none;
    // Assume anything bigger than 30em
    // is a non-mobile device and can 
    // fit the image.
    @media (min-width: 30em) {
      display: block;
      img {
        height: 11.3em;
  td.description {
    h1 {
      font-size: 1.4em;
  td.actions {
    ul {
      padding: 0;
      list-style: none;
      li {
        padding: 0.5em 0.5em;
  tfoot {
    td {
      padding: 0.5em 0;

Load some "seed" data

edit db/seeds.rb
# . . .
Product.create!(title: 'Seven Mobile Apps in Seven Weeks',
      <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.
  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>
    <%= csrf_meta_tags %>
    <%= stylesheet_link_tag    'application', media: 'all',
    'data-turbolinks-track': 'reload' %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
    <main class='<%= controller.controller_name %>'>
      <%= yield %>

Replace the scaffold generated view with some custom HTML

edit app/views/products/index.html.erb
<% if notice %>
  <aside id="notice"><%= notice %></aside>
<% end %>
      <td colspan="3">
        <%= link_to 'New product', new_product_path %>
    <% @products.each do |product| %>
      <tr class="<%= cycle('list_line_odd', 'list_line_even') %>">
        <td class="image">
          <%= image_tag(product.image_url, class: 'list_image') %>
        <td class="description">
          <h1><%= product.title %></h1>
            <%= truncate(strip_tags(product.description),
                         length: 80) %>
        <td class="actions">
            <li><%= link_to 'Show', product %></li>
            <li><%= link_to 'Edit', edit_product_path(product) %></li>
              <%= link_to 'Destroy',
                          method: :delete,
                          data: { confirm: 'Are you sure?' } %>
    <% end %>

See the finished result

get /products


New product

Rails, Angular, Postgres, and Bootstrap

Powerful, Effective, and Efficient Full-Stack Web Development As...

Seven Mobile Apps in Seven Weeks

Native Apps, Multiple Platforms Answer the question “Can we buil...

Ruby Performance Optimization

Why Ruby Is Slow, and How to Fix It You don’t have to accept sl...

6.3 Playtime 6.1 Iteration A1: Creating the Products Maintenance Application