Listing products
|
|
Show Edit Destroy |
|
|
Show Edit Destroy |
|
|
Show Edit Destroy |
New product
6.3 Playtime 6.1 Iteration A1: Creating the Products Maintenance Application
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 & 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 => 'ruby.jpg',
:price => 49.95)
# . . .
rake db:seed
[deprecated] I18n.enforce_available_locales will default to true in the future. If you really want to skip validation of your locale you can set I18n.enforce_available_locales = false to avoid this message.
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, :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
|
|
|
Show Edit Destroy |
|
|
|
Show Edit Destroy |
|
|
|
Show Edit Destroy |
6.3 Playtime 6.1 Iteration A1: Creating the Products Maintenance Application