Ruby on Railsでフォームを作成する#2(画面フロー作成)

211月2007 Filed under: Web技術, rails Author: ueblog

前回までで、プロジェクトの作成と環境の作成が終わった。さていよいよ画面フローを作成していきます。

今回の仕様を確認すると、

フォーム画面(form)　→　確認画面(confirm)　→　完了画面(end)
　　　　　　　　↑　　　　　　　　　　　↑
　　　　(フォームチェック)　　(DB格納＆メール送信)

こんな感じで、３つのactionと3つのviewでできあがっている。画面は上記のようにform→confirm→endとします。
今回は勉強のためにscaffoldという便利な仕組みは利用せずにいこうと思う。

まずはcontrollerをいじります。

PLAIN TEXT

RUBY:

# 今回のプロジェクトへ移動
cd rails_project/sample
vi app/controllers/contact_controller.rb
class ContactController <ApplicationController
model :contact
def form
@contact = Contact.new()
end
def confirm
@contact = Contact.new(@params[:contact])
end
def end
@contact = Contact.new(@params[:contact])
end
end

このようにactionに対応する名前をつけた、メソッドを用意するだけです。
そしてmodelを利用することを宣言しています。これはあとでDBに値を保存したり、値の検証(validate)するのに利用します。

そしてviewを用意する。名前は各actionに対応する名前+.rhtmlとするようです。
vi app/views/contact/form.rhtml

PLAIN TEXT

HTML:

<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>お問い合わせサンプル</title>
</head>
<body>
<h1>お問い合わせ</h1>
<%= start_form_tag :action => 'confirm' %>
<%= error_messages_for 'contact' %>
お名前<br />
<%= text_field("contact", "personal") %>
<br /><br />
E-Mail<br />
<%= text_field("contact", "email", "size" => 50) %>
<br /><br />
お問合せ内容<br />
<%= text_area("contact", "message", "cols" => 50, "rows" => 10) %>
<br />
<%= submit_tag("確認画面へ") %>
<br /><br />
<input name="reset" class="sbutton" value="リセット" type="reset" /> <%= end_form_tag %>
</body>
</html>

Rails特有のタグで作成しています。詳しくはRailsのapiをご参照ください。
また、nameにはDBのテーブルと同じ名前で割り当てています。

確認画面
vi app/views/contact/confirm.rhtml

PLAIN TEXT

HTML:

<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>お問い合わせサンプル</title>
</head>
<body>
<h1>お問い合わせ確認画面</h1>
<red>下記の入力内容でよろしいでしょうか。</red>
<%= start_form_tag :action => 'end' %>
<%= hidden_field("contact", "personal", "value" => @contact.send("personal")) %>
<%= hidden_field("contact", "email", "value" => @contact.send("email")) %>
<%= hidden_field("contact", "message", "value" => @contact.send("message")) %>
お名前：<%=h @contact.send("personal") %>
<br /><br />
E-Mail：<%=h @contact.send("email") %>
<br /><br />
お問合せ内容：<%=h @contact.send("message") %>
<br /><br />
<%= submit_tag("上記の内容で送信する", :disable_with=>'送信処理中...') %>
<input class="sbutton" value="戻る" onclick="history.back()" type="button" /> <%= end_form_tag %>
</body>
</html>

sessionで引継ぎが普通かもしれないですが、今回はhiddenにてフォームの引継ぎをします。特徴はsubmit_tagにてdisable_withパラメータを利用すると、いわゆるフォームの2度押しができないようにjavascriptにてボタンを無効化してくれます。こういうのが、フレームワークの機能としてあるのは便利ですね。
あと戻るボタンは手抜きでhistory.backで・・・

完了画面。これはただのhtmlです。
vi app/views/contact/end.rhtml

PLAIN TEXT

HTML: