131213_01：アジャイル開発本
6.2 イテレーションA2
dbディレクトリのseeds.rbを編集。
次にproductsテーブルにデータを読み込むためのコードを記述。
画像以下URLよりダウンロードし、対応する場所にコピー。
http://media.pragprog.com/titles/rails4/code/rails31/depot_a/app/assets/images/
productsテーブルにテストデータを流し込む
depot> rake db:seed
ここから商品リストの外観を整える。
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/
/* START_HIGHLIGHT */
.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;
}
}
/* END_HIGHLIGHT */
最後に、このスタイルシートで使われているproductsクラスを定義する。
app/views/layouts/application.html.erb
9行目を変更
<body class='<%= controller.controller_name %>'>
簡単な表ベースのテンプレートを使う。
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,
confirm: 'Are you sure?',
method: :delete %>
</td>
</tr>
<% end %>
</table>
<br />
<%= link_to 'New Product', new_product_path %>
ブラウザを起動して確認。
http://localhost:3000/products
6章でやったこと
- 開発用のデータベースを作成
- マイグレーションを使用し、開発用データベースにスキーマを作成して修正
- productsテーブルを作成し、scaffoldジェネレータを使って、このテーブルを管理するアプリケーションを作成
- 商品リストを表示するために、アプリケーション全体のレイアウトと、コントローラに対応するビューを更新
