見出し画像

【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]
このようにホーム画面が変更していると思います。編集リンクが作成されました。

スクリーンショット 2019-12-05 16.47.31

[edit.html.erb]
編集を押すと編集画面に遷移して元のデータが入力された状態であることが確認できます。

スクリーンショット 2019-12-05 16.45.42

続いて更新処理を書いていきましょう。
▼コントローラー 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更新」として追加ボタンを押して更新できるか確認しましょう。

スクリーンショット 2019-12-05 16.45.42

[index.html.erb]
ホームにリダイレクトされてデータが更新されています。

スクリーンショット 2019-12-05 16.45.55

今回で投稿、編集まで完成しました。
次回は削除機能を付け加えたいと思います。

ありがとうございました。

この記事が気に入ったらサポートをしてみませんか?