ページ内にリンクを追加して、もう少しアプリっぽくしていきます。
##詳細ページへのリンク
一覧ページの商品名をリンクにして、クリックすると商品詳細ページが表示されるようにします。
<td><%= menu.name %></td>
を書き換えます。
<td><%= link_to menu.name, menu %></td>
http://localhost:3000/menus にアクセスしてみてください。商品名がリンクになっていると思います。また、クリックするとその商品の詳細(show)ページに遷移します。
##リンクの仕組み
リンクの書式は下記のとおりです。
link_to 表示される文字, リンク先
「表示される文字」には文字を書いても構いませんが、データベースに登録されたデータがたくさんある場合、いちいち手入力するのは現実的ではありません。そのため「menu.name」でデータベースから商品名を読み込んでいます。
なお、前のPartで作成したindexビューでは、繰り返し処理を利用しています。下記に注目してください。
<% @menus.each do |menu| %>
<tr>
<td><%= link_to menu.name, menu %></td>
<td><%= menu.price %></td>
<td><%= menu.description %></td>
</tr>
<% end %>
<% @menus.each do |menu| %>
と<%end>
で囲まれた部分が、繰り返し処理されます。この処理のおかげで、データが10件あっても100件あっても少ないコード量ですべてのデータを表示させることが出来ます。
また、リンク先についてですが、ここでルーティングについて思い出してください。
Prefix Verb URI Pattern Controller#Action
menus GET /menus(.:format) menus#index
POST /menus(.:format) menus#create
new_menu GET /menus/new(.:format) menus#new
edit_menu GET /menus/:id/edit(.:format) menus#edit
menu GET /menus/:id(.:format) menus#show
PATCH /menus/:id(.:format) menus#update
PUT /menus/:id(.:format) menus#update
DELETE /menus/:id(.:format) menus#destroy
リンク先の指定には、Prefixのキーワードが指定出来ます。先述のリンク設定では「menu」を指定しているので、商品IDが「1」の商品であれば、「menus/1」へのリンクになります。おかげで商品名をクリックするとその商品の詳細ページに遷移することが出来ます。わざわざIDを調べる必要もありません。めちゃくちゃ簡単ですね。
##編集ページへのリンク
詳細ページに編集ボタンを作成します。こちらもルーティングのPrefixで指定しますが「_path」をつけるのを忘れないように注意してください。
<%= link_to "編集", edit_menu_path %>
詳細ページに追加されたリンクをクリックすると編集ページに遷移します。内容を変更して更新ボタンを押すと、ふたたび詳細ページに遷移します。変更した内容で表示されます。
ちなみに、編集ページの更新ボタンを押した際は、ルーティングの「PATCH」が呼び出されます。
##新規作成ページへのリンク
一覧ページに新規登録ページへのリンクを作成します。やはりこちらもルーティングのPrefixで指定します。
<%= link_to "新規作成", new_menu_path %>
これでブラウザからデータベースにデータを新規登録出来るようになりました。
##削除ボタン(リンク)
詳細ページに削除用のリンクを作成します。こちらは書き方が少し特殊です。
「method: :delete」と書くことで、ルーティングの「DELETE」を呼び出すことが出来ます。
<%= link_to "削除", @menu, method: :delete, data: { confirm: "本当に削除しますか?" } %>
これでブラウザからデータベースのデータを新規削除出来るようになりました。
ここまでの設定でページ間のつながりが出来て、アプリっぽくなったのではないでしょうか。