前回までで、プロジェクトの作成と環境の作成が終わった。さていよいよ画面フローを作成していきます。
今回の仕様を確認すると、
フォーム画面(form) → 確認画面(confirm) → 完了画面(end)
↑ ↑
(フォームチェック) (DB格納＆メール送信)
こんな感じで、３つのactionと3つのviewでできあがっている。画面は上記のようにform→confirm→endとします。
今回は勉強のためにscaffoldという便利な仕組みは利用せずにいこうと思う。
まずはcontrollerをいじります。
[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[/ruby]
このようにactionに対応する名前をつけた、メソッドを用意するだけです。
そしてmodelを利用することを宣言しています。これはあとでDBに値を保存したり、値の検証(validate)するのに利用します。
そしてviewを用意する。名前は各actionに対応する名前+.rhtmlとするようです。
vi app/views/contact/form.rhtml
[html]
お問い合わせ
<%= start_form_tag :action => ‘confirm’ %>
<%= error_messages_for 'contact' %>
お名前
<%= text_field("contact", "personal") %>
E-Mail
<%= text_field("contact", "email", "size" => 50) %>
お問合せ内容
<%= text_area("contact", "message", "cols" => 50, “rows” => 10) %>
<%= submit_tag("確認画面へ") %>
<%= end_form_tag %>
[/html]
Rails特有のタグで作成しています。詳しくはRailsのapiをご参照ください。
また、nameにはDBのテーブルと同じ名前で割り当てています。
確認画面
vi app/views/contact/confirm.rhtml
[html]
お問い合わせ 確認画面
<%= 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") %>
E-Mail：<%=h @contact.send("email") %>
お問合せ内容：<%=h @contact.send("message") %>
<%= submit_tag("上記の内容で送信する", :disable_with=>‘送信処理中…’) %>
<%= end_form_tag %>
[/html]
sessionで引継ぎが普通かもしれないですが、今回はhiddenにてフォームの引継ぎをします。特徴はsubmit_tagにてdisable_withパラメータを利用すると、いわゆるフォームの2度押しができないようにjavascriptにてボタンを無効化してくれます。こういうのが、フレームワークの機能としてあるのは便利ですね。
あと戻るボタンは手抜きでhistory.backで・・・
完了画面。これはただのhtmlです。
vi app/views/contact/end.rhtml
[html]
お問い合わせ ありがとうございました。
[/html]
これで
http://domain:3000/sample/contact/form
http://domain:3000/sample/contact/confirm
http://domain:3000/sample/contact/end
というURLにて画面遷移を確認できます。
これだけでは何もおきませんが、一通りの動きが完了しました。
URLのマッピングとcontroller、viewの関係はすごくわかりやすいですね。
さて次回は値の検証部分に手をつけます。
Check Tweet
