【Ruby】フォームの実装(ヘルパーメソッド/form_withメソッド/link_toメソッド)
まずはフォームを実装する前に、
そのフォームが実装されている新規投稿ページを作成する前に、
新規投稿ページに”アクセスする”部分から実装します。
少し前にルーティングの説明をした時に、
トップページ(indexアクション)へのルーティングを行いましたので、
同じような感じでやっていきます。
●ルーティングの設定
routes.rbに記載します。
get 'posts', to: 'posts#index' ←トップページのルーティング
get 'posts/new', to 'posts#new' ←こちら新規投稿ページ(newアクション)のルーティングです。
通訳すると、
get :表示して!
posts/new : 新規投稿ページのパスやで!ここへ行って!
posts/new : postsコントローラーのnewアクションの処理を実行して!
というております。
●アクションの定義
次は覚えてますか?
コントローラーのところで出てきました。
newアクションの定義をします。
つまりどんな処理を行うか記載します。
def new
end
え、終わり?
はい、newアクションは新規投稿ページを表示させるだけなので。
●ビューを作成
ようやく表示させる新規投稿ページを作成します。
new.html.erbというファイルを用意しましょう。
viewsディレクトリのコントローラー名ディレクトリの中に作ります。
これでnewアクションが定義されているので、
このnew.html.erbの中身が表示されます。
今はもちろん真っ白なページが表示されます。
そしてこれからフォームを作成していく中で、
Railsではヘルパーメソッドというものを使います。
これは主にビューでHTMLタグを出現させたり、
テキストを加工するためのものです。
Rubyとして扱われるので、<%= %>で囲んで使用します。
今回はその中でも、
form_withメソッドとlink_toメソッドを学びましょう。
■form_withメソッド
HTMLで使用したformタグの代わりに使用できます。
文法はこちら。
<%= form_with url : "/posts" , method : : post , local : true do | form | %>
<%= form. text_field : content %>
<%= form. submit '投稿する' %>
<% end %>
はい、通訳しましょう。
まずdoからendまでの間がフォームの記述です。
こんなフォームにしてねって指示します。
まず一行目。
<%= form_with url : "/posts" , method : : post , local : true do | form | %>
url : "/posts" → リクエストを送るパスを示してます。ここに行けえ!っていうてます。
method : : post → これは送信するHTTPメソッドを指定してます。
ルーティングの設定でで保存の処理はPOSTに設定するので、 : postを使ってます。
初期値でもあるので省略可能です。
local : true →
| form | → ブロック変数ですね。このブロック変数とヘルパーメソッドを組み合わせることで、フォームを追加できます
そして2−3行目
まずブロック変数がしっかり使われてますね。
このための変数ちゃんです。
<%= form. text_field : content %> :contentを入力する1行のフォームだよ!
<%= form. submit '投稿する' %> :投稿すると書かれた送信ボタンだよ!
って指示してます。
ちなみに他にもヘルパーメソッドには
password_field
check_box (複数選択可)
radio_button (一つしか選択できない)
などがあります。
さあ、これで新規投稿のフォームの完成です!
じゃあこのページへどうやっていくのか?
さすがにトップページからいきたいよね?
ということでトップページにこの新規投稿ページのリンクを用意してあげます。
そこで使うのがこちら。
■link_toメソッド
これもHTMLの<a>タグの代わりに使用します。
トップページにリンクを作りたいのでindex.html.erbに記載しましょう。
<%= link_to '新規投稿' , '/posts/new' %>
form_withの時と順序が逆やないかい。パスが後なんかい!
なんでかはわからないけど、このまま覚えました。
これは通訳せずともわかりますね!
こんな感じで新規投稿ページの作成と、
トップページにおけるリンクの作成が完了しました!
次回は実際にフォームに入力したものを保存・表示させましょう。