STEP 3: レコードの一覧

2010/01/29

タスク管理の機能を 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 %>

3-6行目の先頭には半角スペース2個、コロンの後には半角スペース1個が挿入されている点に注意してください。

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

$ 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>

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

画面キャプチャ1

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

画面キャプチャ2