0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

アプリ開発実践入門3 Controllerとview 発展

Posted at

今日の教科書

##ページ作成を発展させる

###リダイレクトとパラメータ送付
リダイレクト:別のアクションへの処理の転送
redirect_to action: :アクション名 , params:[ハッシュ]:
action:リダイレクト先のアクションを指定するオプション
他のコントローラのアクションに帰る際はcontroller: コントローラ名
params:で必要なパラメータを渡すことができる。
リダイレクトで新しいアクションを作ったら、ルーティングを忘れない。

###フォームの送信
####フォーム用にHTMLテンプレートを編集する。主に入力フィールドと送信ボタンを作る。
…… 入力・送信フォームを作る

1<form method="POST" action="送信先">
2  <input type="text" class="form-control"
3    name="input1" value="<%= @value %>">
4  <input type="submit" class="btn btn-primary">
5</form>

1で送信先に本文を送信する。2で入力のテキストボックスを作る。
3のnameでフォームの名前を作る。値をインスタンスに格納。。
4で送信ボタンを作成。
form-controlとbtn btn-primaryはBootstrapのクラス。フォームをデザインしてくれる。

####コントローラを修正する
フォームをそのまま対象のアクションにPOSTで送信している。
普通にそのアクションにアクセスした場合はGET。GETかPOSTかで処理を変える仕組みが必要。
if request.post? then:requestはブラウザからサーバーに送られた情報をまとめたオブジェクト。post?はポスト送信をしたか否かを判別するメソッド。つまりif文でPOSTか否かで処理を分けられる。

####ルーティングの追加設定
POSTによるアクセスを許可する。
post コントローラ名, to: コントローラ#アクション `post `コントローラ/アクション

####InvalidAuthenticityTokenエラーとCSRF対策

railsのフォーム送信のセキュリティに引っかかる。
クラス下にprotect_from_forgeryで通過。

###フォームの送信2「フォームヘルパーを使おう」
ヘルパー:ビューで利用できるrailsの機能の一つ。
フォームヘルパーだとフォーム関係のタグを生成してくれる。

####フォームヘルパーをHTMLテンプレートに記述&CSRF対策の削除
<%= form_tag(controller: "コントローラ名", action: "アクション") do %>
フォームの

タグを生成するためのメソッド。
<%= text_field_tag("input1") %>:テキストで入力フィールドのタグを作成する
<%=submit_tag("Click") %>:フォームを送信するボタンを生成する。引数はボタンに表示するテキスト。
<% end %>:中に=を入れないタグで終わる。

####フォームヘルパーで属性の指定
<%= text_field_tag( id , デフォルト値 , 属性の設定)%>:属性を指定する基本の形。

<%= form_tag(controller: "hello", action: "index") do %>
  <%= text_field_tag("input1","", {class:"form-control"}) %>
  <%= submit_tag("Click", {class:"btn-primary"}) %>
<% end %>

###様々なフォームヘルパーメソッド

####チェックボックス

<%= check_box_tag("check1") %>
<%= label_tag("check1", "check box") %>

check_box_tag(ID)でチェックボックスを出力し、label_tag(ID, 表示テキスト)でラベルを設定する。

対応アクションの修正をしておく。

####ラジオボタン
radio_button_tag(name値, value値):ラジオボタンを作成する、IDはnameとvalueが使われる。

<%= radio_button_tag("r1", "radio 1") %>
<%= label_tag("r1_radio]_1", "Radio Button 1") %><br>
<%= radio_button_tag("r1", "radio 2") %>
<%= label_tag("r1_radio]_2", "Radio Button 2") %><br>

半角スペースはアンダーバーになっている。対応アクションの修正をしておく。

は改行の意味。

####選択リストを使う

select_tag(ID値, 表示する項目):選択リストを表示する。
options_for_select(配列):selectタグの中に記述するオプションタグを作る。
select_tag(ID, options_for_select(配列)):上二つの組み合わせ
配列を項目にもつ選択リストを作ることができる。

<%= select_tag('s1',
  options_for_select(["Windows", "macOS", "Linux"])) %>

対応アクションの設定しておく。

####複数選択可能なリスト

<%= select_tag('s1',
  options_for_select(["Windows", "macOS", "Linux"]),
  {size:5, multiple:true, class:"form-control"}) %>

{size:5, multiple:true, class: "form-control"}
multipleで複数選択が可能に、sizeで表示する項目数を変更できる、2つ以上だとプルダウンからリスト方式に。classはBootstrapのクラス。

要コントローラの修正。
複数項目選択の場合は、「選択した項目の配列」が値になる。配列なのでfor inを使って順に取り出して処理しなければいけない。

####他にもヘルパーは色々あるよ

  • テキストエリア
  • パスワード入力
  • 非表示フィールド
  • 検索フィールド
  • 電話番号入力
  • 日時の入力
  • URLの入力
  • メールアドレスの入力
  • 色の選択
  • 指定範囲の数値の入力

##気になった、わからなかったこと

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?