STEP 3: レコードの一覧

タスク管理の機能を plaka アプリケーションに追加することにしましょう。

仕様はこんな感じです。

• トップページから「タスク一覧」リンクをクリックすると、タスクの一覧が表示される。
• 特定のタスクの「詳細」リンクをクリックすると、タスクの内容が表示される。
• 「タスク追加」をクリックすると、入力フォームが現れる。
• 入力フォームに表示されるのは以下の項目：
  • タスクの件名（subject）テキストフィールド
  • 期日（due date）日付フィールド
  • 注記（note）テキストエリア
  • 完了（done）チェックボックス
• 「追加」ボタンをクリックすると、タスクが追加される。
• ただし、件名が空の時はエラーメッセージと共に入力フォームが再表示される。
• 特定のタスクの「編集」リンクをクリックすると、編集フォームが現れる。
• 特定のタスクの「削除」リンクをクリックすると、確認のポップアップウィンドウが現れ、「OK」をクリックすると、タスクが削除される。

今回は、タスクの一覧を表示するところまで。

---

テーブル tasks を作ります。

$ ruby script/generate model Task subject:string due_date:date note:text done:boolean
      create  app/models/
      exists  test/unit/
      create  test/fixtures/
      create  app/models/task.rb
      create  test/unit/task_test.rb
      create  test/fixtures/tasks.yml
      exists  db/migrate
      create  db/migrate/20100128135901_create_tasks.rb

マイグレーションを実行します。

$ rake db:migrate
(in /home/kuroda/work/plaka)
==  CreateTasks: migrating ====================================================
-- create_table(:tasks)
   -> 0.1133s
==  CreateTasks: migrated (0.1134s) ===========================================

---

tasks テーブルに「テストデータ」を投入するため、フィクスチャを作成します。

$ edit test/fixtures/tasks.yml

<% 1.upto(10) do |n| %>
task<%= '%02d' % n %>:
  subject: 件名<%= '%02d' % n %>
  due_date: <%= n.days.since %>
  note: これはメモです。
  done: false
<% end %>

フィクスチャを投入します。

$ rake db:fixtures:load

---

Tasks コントローラを作成します。

$ ruby script/generate controller Tasks index

タスクの一覧を表示する index アクションを作ります。

$ edit app/controllers/tasks_controller.rb

class TasksController < ApplicationController
  def index
    @tasks = Task.all(:order => 'due_date')
  end
end

index アクション用のテンプレートを作ります。

$ edit app/views/tasks/index.html.erb

<h1>タスク一覧</h1>

<table class="list">
  <tr>
    <th>件名</th>
    <th>期日</th>
    <th>完了</th>
    <th>操作</th>
  </tr>
  <% @tasks.each_with_index do |task, i| %>
    <% content_tag(:tr, :class => i.even? ? 'even' : 'odd') do %>
      <%= content_tag :td, h(task.subject) %>
      <%= content_tag :td, task.due_date.strftime('%Y/%m/%d') %>
      <%= content_tag :td, task.done? ? 'Yes' : '' %>
      <%= content_tag :td, '' %>
    <% end %>
  <% end %>
</table>

---

ルーティングを修正します。

$ edit config/routes.rb

ActionController::Routing::Routes.draw do |map|
  map.root :controller => 'top', :action => 'index'

  map.resources :tasks
end

---

スタイルシートを修正します。

$ edit public/stylesheets/application.css

div#wrapper {
  width: 600px;
  margin: 10px auto;
  border: solid 1px #666;
  background-color: #066;
}

div#header, div#footer {
  background-color: #000;
  color: #ccc;
  margin: 5px;
  padding: 5px;
}

div#header a, div#footer a {
  color: #ccc;
}

div#contents {
  background-color: #fff;
  color: #000;
  margin: 5px;
  padding: 5px;
}

table.list {
  border-collapse: collapse;
  margin: 5px auto;
  width: 500px;
}

table.list tr.odd {
  background-color: #eee;
}

table.list td, table.list th {
  border: 1px solid #000;
  padding: 2px;
}

table.list th {
  text-align: left;
  background-color: #cc4;
}

---

トップページの HTML テンプレートを修正します。

$ edit app/views/top/index.html.erb

<h1>メニュー</h1>

<ul>
  <li><%= link_to 'タスク一覧', :tasks %></li>
</ul>

---

ブラウザを再読込すると、次のような画面になりますね。

「タスク一覧」をクリックすると、タスクの一覧が表示されます。