第7回: タスクの新規追加フォーム

前回 は、タスクの一覧を表形式で表示するところまで作りました。

今回は、タスクの登録フォームを追加しましょう

コントローラの修正

まず、コントローラを修正します。エディタで app/controllers/tasks_controller.rb を開いて、次のように修正します。

class TasksController < ApplicationController
  def index
    @task = Task.new
    @tasks = Task.all(:conditions => { :done => false }, :order => "due_date")
  end
end

登録フォームの追加

続いて、app/views/tasks/index.html.erb を次のように修正します。

<%= form_for @task do |form| %>
<ul>
  <li><%= form.label :name %><%= form.text_field :name %></li>
  <li><%= form.label :due_date %><%= form.date_select :due_date %></li>
  <li><%= form.submit %></li>
</ul>
<% end %>

<table class="tasks">
  <col class="name" />
  <col class="due_date" />
  <%= render @tasks %>
</table>

form_for の前に等号(=)が付いている点に注意してください。Rails 2.3 まではここに等号を書くとエラーになりましたが、Rails 3.0 ではここに等号を書かないとログに警告が出力されます。

また、Rails 2.3 までは

form_for :name, @resource do |form|

のように書くことができましたが、Rails 3.0 では次のように書かないとログに警告が出力されます。

form_for @resource, :as => :name do |form|

スタイルシートの追加

新規ファイル public/stylesheets/form.css を次のように作成します。

form {
  width: 540px;
  margin: 5px auto;
  background-color: #cff;
  padding: 9px;
  border: solid 1px #ccc;
}

form ul {
  list-style:none;
  margin:0;
  padding:0;
}

form li {
  margin:0;
  padding:0;
}

form label {
  display:block;
  width:100px;
  float:left;
  padding-top:.2em;
}

form input[type=submit] {
  display: block;
  margin: 5px 5px 5px auto;
}

ブラウザで表示確認

ブラウザで http://localhost:3000/tasks を開くと、次のような画面が現れます。

細かいことですが、送信ボタン上のラベルが「Create Task」となっているのは、Rails 3.0 での改善点です。Rails 2.3 までは、新規作成フォームでも編集フォームでも同じように「Save changes」というラベルがデフォルトで表示されていました。Rails 3.0 では、変数 @task の状態に合わせて「Create Task」か「Update Task」とラベルを切り替えてくれます。