Ruby on Rails ステップ・バイ・ステップ
STEP 11: 確認画面(1)
今回からしばらく「確認画面」をテーマにして話を続けます。
タスクの新規作成フォームに入力して「次へ」をクリックすると、入力内容をユーザーに確認させる画面が表示されて「保存」ボタンをクリックすると実際にタスクがデータベースに保存され、「戻る」ボタンをクリックすると新規作成フォームに戻る、という流れを実装します。
例によって、ルーティングの変更から。
$ edit config/routes.rb
ActionController::Routing::Routes.draw do |map|
map.root :controller => 'top', :action => 'index'
map.resources :tasks,
:member => { :simple => :get, :finish => :put },
:collection => { :unfinished => :get, :confirm => :post }
end
この変更により /tasks/confirm という URL にデータを POST できるようになります。
次に、confirm アクションを実装します。
$ edit app/controllers/tasks_controller.rb
class TasksController < ApplicationController
(省略)
def confirm
@task = Task.new(params[:task])
if @task.valid?
render :action => 'confirm'
else
render :action => 'new'
end
end
def update
(省略)
end
今回は、とりあえず確認画面を表示させるところまで作ります(「完了」ボタンや「戻る」ボタンの実装は後回し)。
$ edit app/views/tasks/confirm.html.erb
<h1>確認画面</h1> <%= render :partial => 'record' %>
show.html.erb の一部を部分テンプレート _record.html.erb として抜き出します。
$ edit app/views/tasks/_record.html.erb
<table class="attributes">
<tr>
<th>件名</th>
<td><%= h @task.subject %></td>
</tr>
<tr>
<th>期日</th>
<td><%= @task.due_date.strftime('%Y/%m/%d') %></td>
</tr>
<tr>
<th>完了</th>
<td><%= @task.done? ? 'Yes' : '' %></td>
</tr>
<tr>
<th>注記</th>
<td><%= simple_format @task.note %></td>
</tr>
</table>
$ edit app/views/tasks/show.html.erb
<h1>タスク詳細</h1> <%= render :partial => 'record' %>
次にフォームのテンプレートを修正します。
$ edit app/views/tasks/new.html.erb
<h1>新規タスクの追加</h1>
<% form_for [ :confirm, @task ] do |f| %>
<%= render :partial => 'form', :locals => { :f => f } %>
<% end %>
confirm アクションのリンク先を配列で表記すると [ :confirm, @task ] となります。
$ edit app/views/tasks/edit.html.erb
<h1>タスクの編集</h1>
<% form_for @task do |f| %>
<%= render :partial => 'form', :locals => { :f => f } %>
<% end %>
$ edit app/views/tasks/_form.html.erb
<%= f.error_messages %>
<table class="attributes">
<tr>
<th>件名</th>
<td><%= f.text_field :subject %></td>
</tr>
<tr>
<th>期日</th>
<td><%= f.date_select :due_date %></td>
</tr>
<tr>
<th>完了</th>
<td>
<%= f.radio_button :done, true %> Yes
<%= f.radio_button :done, false %> No
</td>
</tr>
<tr>
<th>注記</th>
<td><%= f.text_area :note, :size => '40x5' %></td>
</tr>
</table>
<div class="submit">
<%= f.submit f.object.new_record? ? '次へ' : '保存' %>
</div>
ブラウザで動作を確認します。


本日はここまで。
(2010/02/14)
記事に関するご質問は、 hermes@oiax.jp までメールでお送りください。
ウェブサイト構築の発注先を検討されているお客様は、ご相談フォームをご利用ください。
- はじめに
- STEP 1: アプリケーションの作成からトップページの表示まで (2010/01/26)
- STEP 2: レイアウト (2010/01/27)
- STEP 3: レコードの一覧 (2010/01/29)
- STEP 4: レコードの詳細表示と削除 (2010/01/30)
- STEP 5: レコードの新規追加 (2010/02/01)
- STEP 6: レコードの編集 (2010/02/02)
- STEP 7: 基本7アクション (2010/02/02)
- STEP 8: 未完了タスクの一覧 (2010/02/03)
- STEP 9: タスクの簡易表示 (2010/02/12)
- STEP 10: finishアクションの実装 (2010/02/13)
- STEP 11: 確認画面(1) (2010/02/14)
- STEP 12: 確認画面(2) (2010/02/25)
- STEP 13: 確認画面(3) (2010/02/25)
- STEP 14: 確認画面(4) (2010/02/26)

