【Railsで作ったmemoアプリをAWSにデプロイするまで(3)】
Railsで作成したmemoアプリをAWSにデプロイするまでのチュートリアルを初心者レベルで書いていきます。著者自身も学んだことのアウトプットを目的としているので、できるだけわかりやさ重視の投稿です。
今回はメモの編集機能を追加していきます。
=======================================================
まずは編集機能のルート設定から始めましょう。
▼ルート設定
[route.rb]
Rails.application.routes.draw do
#ホーム画面
get:"/", to:"memos#index"
#新規投稿
get:"/new", to:"memos#new"
post:"/create", to:"memos#create"
+#編集機能
+get:"/memos/:id/edit", to:"memos#edit"
+patch:"/memos/:id/", to:"memos#update"
end
"/edit" をもつgetリクエストが送られてきたらmemosコントローラーのeditアクションで編集ページに移動。
そして、編集ページのformからpatchリクエストが送られてきたらmemosコントローラーのupdateアクションで更新処理を行います。
次にedit,updateコントローラーを定義していきます。editアクションから書いていきましょう。
▼コントローラー editアクション
[memos_controller.rb]
class MemosController < ApplicationController
#ホーム画面
def index
@memos = Text.all
end
#新規投稿画面
def new
end
#新規投稿処理
def create
Text.create(
title:params["memos"]["title"],
body:params["memos"]["body"]
)
redirect_to "/"
end
#編集処理
+def edit
+ @memos = Text.find(params["id"])
+end
+def update
+end
end
findメソッド:データベースから指定したデータを検索する機能
paramsメソッドで取得されたidを頼りに、特定データを持って編集ページに遷移。memosインスタンスに代入することでview側で処理できるようにします。
▼view edit.html.erb / index.html.erb
[edit.html.erb]
<h3>編集ページ</h3>
<div>
<%= form_tag("/memos/" + @memos.id.to_s, :method => :patch ) do %>
<div>
<%= label_tag "form_title", "タイトル" %>
<%= text_field :memos, :title, id:"form_title", placeholder:"タイトル" %>
</div>
<div>
<%= label_tag "form_body", "内容" %>
<%= text_field :memos, :body, id:"form_body", placeholder:"内容を入力してください" %>
</div>
<%= submit_tag "追加" %>
<% end %>
</div>
[index.html.erb]
<a href="/new">投稿サイトへ</a>
<p><% @memos.each do |memo| %></p>
<div><%= memo.title %>:<%= memo.body %></div>
+ <div><a href="/memos/<%= memo.id %>/edit">編集</a></div>
<% end %>
[index.html.erb]
このようにホーム画面が変更していると思います。編集リンクが作成されました。
[edit.html.erb]
編集を押すと編集画面に遷移して元のデータが入力された状態であることが確認できます。
続いて更新処理を書いていきましょう。
▼コントローラー updateアクション
class MemosController < ApplicationController
#ホーム画面
def index
@memos = Text.all
end
#新規投稿画面
def new
end
#新規投稿処理
def create
Text.create(
title:params["memos"]["title"],
body:params["memos"]["body"]
)
redirect_to "/"
end
#編集画面遷移
def edit
@memos = Text.find(params["id"])
end
#更新処理
def update
+ memo = Text.find(params["id"])
+ memo.title = params["memos"]["title"]
+ memo.body = params["memos"]["body"]
+ memo.save
+ redirect_to "/"
end
end
変数memoに特定のメモ情報を代入。そして入力された値をtitleカラム/bodyカラムに保存。完了したらホームにリダイレクトさせます。
[edit.html.erb]
更新処理ができたので試しに「test更新」として追加ボタンを押して更新できるか確認しましょう。
[index.html.erb]
ホームにリダイレクトされてデータが更新されています。
今回で投稿、編集まで完成しました。
次回は削除機能を付け加えたいと思います。
ありがとうございました。
この記事が気に入ったらサポートをしてみませんか?