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

Check     このエントリーをはてなブックマークに追加

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

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

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

こんな感じで、3つの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     このエントリーをはてなブックマークに追加
タグ: