マシンスペック
・バージョン 10.15.3
・Ruby ruby 2.6.3p62
・Rails 6.0.3.2
まえがき
前記事では、データーベースのidを取得したデータベースの表示する方法を記録しました。こちらでは、フォームから投稿したデータベースの内容を、ビューに反映させる方法を忘却録として記録します。
ルーディングなどが複雑になっていて、難しい‥
フォームから投稿内容の反映
こちらでは、ビューでのフォーム制作から、進めます。
フォーム画面の作成
簡単なフォームをビューに制作します。
<div class="form">
<label>title: </label>
<input type="text">
<br>
<label>text: </label>
<textarea></textarea>
<input type="submit" value="投稿">
</div>
アクションの作成
先のフォーム作成↓で
submit を設定しました。
フォームで入力したデータを、データーベースに保存せさるには、submitをクリックするとアクション(コントローラー)を経由させる必要があります。
<input type="submit" value="投稿">
以下を、routesに記入しましょう
‥
post "コントローラー名/アクション名" => "コントローラー名#アクション名"
例↓
‥
post "posts/create" => "posts#create"
要素について
get "コントローラー名/アクション名" => "コントローラー名#アクション名"
post "コントローラー名/アクション名" => "コントローラー名#アクション名"
↑のroutesでは get・post があります。
ページのルーティング設定であれば get で問題ありません。
しかし、 フォームの値を取得 する場合は post にする必要があります。
submitからアクションへの送信
フォームへデータを送信する場合は form_tagメソッド を設定しなければいけません。
(form_tagメソッド) 設定前↓
<div class="form">
<label>title: </label>
<input type="text">
<br>
<label>text: </label>
<textarea></textarea>
<input type="submit" value="投稿">
</div>
(form_tagメソッド) 設定後↓
<%= form_tag("/コントローラー名/アクション名") do %>
<div class="form">
<label>title: </label>
<input type="text">
<br>
<label>text: </label>
<textarea></textarea>
<input type="submit" value="投稿">
</div>
<% end %>
私は <%= form_tag("/posts/create") do %> ‥ <% end %> で設定します。
また、form_tagメソッド は ↓になります。
<%= form_tag("/コントローラー名/アクション名") do %>
処理
<% end %>
リダイレクト設定
先までの作業で
・フォームの作成
・フォームからアクションへの送信
を行いました。
ここでは、送信したデータを表示させるため、該当(一覧)ページへリダイレクトするように設定します。
リダイレクトを設置するには redirect_toメソッド を使用します。
‥
def create
redirect_to("/コントローラー名/アクション名")
end
例↓
‥
def create
redirect_to("/posts/index")
end
入力データをデーターベースへ送信・保存させる
先に設定した、フォームを確認します。
<%= form_tag("/コントローラー名/アクション名") do %>
<div class="form">
<label>title: </label>
<input type="text">
<br>
<label>text: </label>
<textarea></textarea>
<input type="submit" value="投稿">
</div>
<% end %>
こちらで記述している↓の2つは、今のままだと入力データを送信することができません。
※2つ(input・textarea)
<%= form_tag("/コントローラー名/アクション名") do %>
<input type="text">
<textarea></textarea>
<% end %>
送信をできるようにするにはname属性 を設定します。
↓ name属性の設定
<%= form_tag("/コントローラー名/アクション名") do %>
<input name="title" type="text">
<textarea name="content"></textarea>
<% end %>
name属性の設定は、データーベース作成時のカラム名を設定してください。
私は "title と text" と設定しています。
name属性を設定して、送信することにより name属性の値をキーとしたハッシュ がアクションへ送信されます。
次では、"name属性"とアクションコントローラーを紐付けましょう。
name属性の設定と変数"params"
先のフォームに、name属性を設定しコントローラーのアクションへ送信をできるようにしました。
そして、フォームで送信されたデータを受け取るために、コントローラーに params を設定します。
params は、 フォームデータ や link_to などの値を受け取るパラメーターです。
上記のViewsでタグに"name"でデータを紐付けたので、params と合致します。
‥
def create
params[:content]
params[:title]
redirect_to("/コントローラー名/アクション名")
end
データーベースに投稿を保存する。
rails console でインスタンス化して制作したことを思い出しましょう。
先の params の箇所に Postインスタンス を作成するように入力します。
‥
def create
@post = Post.new(content: params[:content])
@post.save
@post = Post.new(title: params[:title])
@post.save
redirect_to("/posts/index")
end
@post.saveを忘れないようにしましょう。
ここまで、できたら投稿データが表示されるでしょう。
title と text が反映されています。
以上のファイルは、githubに公開しています。興味を持った方はダウンロードをしてみてください
→ Github
あとがき
以上が、フォームから投稿内容の反映でした。
なかなかアプリケーションらしい、仕組みが作れてテンションが上がります。
投稿機能ができたので、次からは"削除・編集"など仕組みを加えて行きたいです。
参考リンク
書籍: たのしいRuby 第6版
私のリンク
また、Twitter・ポートフォリオのリンクがありますので、気になった方は
ぜひ繋がってください。プログラミング学習を共有できるフレンドが出来るととても嬉しいです。