はじめに
今回は以前の記事の続きになります。
よろしければ、以前の記事も御覧ください。
Ruby on rails を初心者向けに解説② ~リンクの作成~
Ruby on rails を初心者向けに解説③ ~データベースの作成~
Ruby on rails を初心者向けに解説④ ~命名規則とform_Tagの使い方について~
データベースのデータ一覧の表示
以下のコードでusersテーブルのデータを取得して表示しましょう。
<% @users.each do |user| %>
<p>name</p>
<div class="ruby-name"><%= user.name %></div>
<% end %>
インスタンス変数@usersを使用するために、コントローラ内で渡しています。
def index
@users = User.all
end
以下のような画面が表示されます。
また、以下のようにcssを指定しています。
.ruby-name {
color: purple;
display: inline-block;
font-weight: bold;
}
データベースの削除
それではデータベースの削除を実装してみましょう。
以下のようにコードを書き換えてください。
<% @users.each do |user| %>
<p>name</p>
<div class="ruby-name">
<%= user.name %>
<%= link_to("削除", "/users/#{user.id}/destroy", {method: "post"})%>
</div>
<% end %>
削除ボタンをクリックすると、要素を削除することができました。
具体的な処理を見ていきましょう。index.html.erbに、以下のコードが追記されています。
<%= link_to("削除", "/users/#{user.id}/destroy", {method: "post"})%>
これにより、削除をクリックすると、第二引数の処理が実行されます。
第二引数の"/users/#{user.id}/destroy"は、usersコントローラーのdestroyアクションへのルーティングに、データベースのidを含めたものになっています。このようにURLを指定することで、コントローラーは削除したいデータベースのidを受け取ることができます。
第三引数は、これがgetリクエストではなく、postリクエストであることを指定しています。
以下のようにルーティングしてください。
post "users/:id/destroy" => "users#destroy"
:id の部分は、任意の数字を受け取ることができます。受け取った数字は、usersコントローラーにおいて、params[:id]の中に格納されます。
以下のようにコントローラーをコーディングしてください。
def destroy
user = User.find_by(id: params[:id])
user.destroy
redirect_to("/users/index")
end
user = User.find_by(id: params[:id])の部分で、データベースからモデルを使ってデータを抜き出します。index.html.erbから送られてきたidと同じidのデータをデータベースから抜き出し、userに格納します。
user.destroyの部分でそのデータを削除しています。
redirect_to("/users/index")の部分で、index.html.erbにリダイレクトしています。今回は、index.html.erbから削除リンクをクリックしたときの動作であるので、リロードになります。
ここまでで、データベースからデータを削除することができました。
データベースの編集
次はデータベースの編集を行っていきましょう。
次のようにindex.html.erbを編集してください。
<% @users.each do |user| %>
<p>name</p>
<div class="ruby-name">
<%= user.name %>
<%= link_to("削除", "/users/#{user.id}/destroy", {method: "post"})%>
<%= link_to("編集", "/users/#{user.id}/edit") %>
</div>
<% end %>
今回新たに追加されたのは<%= link_to("編集", "/users/#{user.id}/edit") %>の部分です。
これにより、新たにusers/editというviewファイルへ移動します。
そのときに、そのviewファイルに編集したいデータベースのidを渡すことになります。
次のようにルーティングしてください。
get "users/:id/edit" => "users#edit"
次のパスに以下のviewファイルを準備してください。
<%= form_tag("/users/#{@user.id}/update") do %>
<input type="text" value="<%=@user.name%>" name="new_name">
<input type="submit" value="送信">
<% end %>
試しに以下のindex.html.erbファイルの編集と書いてある部分をクリックしましょう。
以下のようになります。
ここで、edit.html.erbファイルについての解説です。
form_tag("/users/#{@user.id}/update")の部分で、どのコントローラーのどのアクションを使うかを指定しています。
今回は、usersコントローラーのupdateアクションを使用します。また、データベースの編集を行うため、編集したいデータベースのidも送ります。form_tagはpostリクエストになるのでしたね。
<input type="text" value="<%=@user.name%>" name="new_name">の部分で、inputタグの初期値と名前を設定しています。@userはusersコントローラーのeditアクションから送られてきたものです。
def edit
@user = User.find_by(id: params[:id])
end
@userには、データベースからidに応じて探してきた値が格納されています。
それでは、下のように値を変更して送信してみましょう。
そうすると、以下のルーティングにより、usersコントローラーのupdateアクションが実行されます。
post "users/:id/update" => "users#update"
def update
user = User.find_by(id: params[:id])
user.name = params[:new_name]
user.save
redirect_to("/users/index")
end
updateアクション内では、送られてきたidに応じてデータベースからデータを探索し、ローカル変数userに格納した後、nameカラムのデータを送られてきた新しい名前に書き換えて、user.saveでセーブした後に、/users/indexにリダイレクトしています。
そのため、以下のように変化します。
終わりに
ここまでで今回の記事は終了です。
お付き合い頂きありがとうございました。
よろしければ以下の記事も御覧ください。