![見出し画像](https://assets.st-note.com/production/uploads/images/142332694/rectangle_large_type_2_032a047d5254635029ece150b149e369.png?width=1200)
PicTweet ツイートを編集
CRUDのU(UPDATE)を体験す
HTTPメソッドのPATCHを体験
editアクションの処理を理解
updateアクションの処理を理解
ツイート編集機能の実装
ツイートの編集機能を実装します。ツイートの編集は、7つのアクションのうち以下の2つが該当します。
index一覧表示
show詳細表示
new生成
create保存
edit編集
update更新
destroy削除
編集を行う際には編集ページを用意して、そのページから編集を行うようにします。
ツイート編集画面のルーティングを設定する
編集ボタンをビューに追加する
editアクションをコントローラーに定義する
編集画面のビューファイルを作成する
ツイートの更新を行うためのルーティングを設定する
updateアクションをコントローラーに定義する
新規投稿とほぼ同じだね!
editアクションのルーティングを設定
config/routes.rb ファイルへ
Rails.application.routes.draw do
root to: 'tweets#index'
resources :tweets, only: [:index, :new, :create, :destroy, :edit] ←ここ
end
編集ボタンを投稿一覧に追加しよう
削除ボタンと同じように、link_toメソッドを使用
index.html.erbを編集
app/views/tweets/index.html.erb ファイルへ
<div class="contents row">
<% @tweets.each do |tweet| %>
<div class="content_post" style="background-image: url(<%= tweet.image %>);">
<div class="more">
<span><%= image_tag 'arrow_top.png' %></span>
<ul class="more_list">
<li> ←ここ
<%= link_to '編集', edit_tweet_path(tweet.id) %> ←ここ
</li> ←ここ
<li>
<%= link_to '削除', tweet_path(tweet.id), data: { turbo_method: :delete } %>
</li>
</ul>
</div>
<p><%= tweet.text %></p>
<span class="name">
<%= tweet.name %>
</span>
</div>
<% end %>
</div>
確認用URL
http://localhost:3000/tweets
editアクションをコントローラーに定義
tweetsコントローラーにeditアクションを定義
新規投稿時と異なる点は、編集→更新の場合はすでに存在しているレコードを選択して中身を書き換えるという点
そのため、editアクションでは編集したいレコードを@tweetに代入し、ビューに受け渡すことで編集画面で利用できるように
つまり、以下のようにform_withで使用する@tweetを中身が入った状態にしておくということ!
でた!インスタンス変数@
app/controllers/tweets_controller.rb ファイルへ
class TweetsController < ApplicationController
def index
@tweets = Tweet.all
end
def new
@tweet = Tweet.new
end
def create
Tweet.create(tweet_params)
redirect_to '/'
end
def destroy
tweet = Tweet.find(params[:id])
tweet.destroy
redirect_to root_path
end
def edit ←ここ
@tweet = Tweet.find(params[:id]) ←ここ
end ←ここ
private
def tweet_params
params.require(:tweet).permit(:name, :image, :text)
end
end
編集画面のビューを作成
HTTPメソッド
GET
サーバーからブラウザに情報を返す。単にウェブサイトを閲覧する際など、情報を取得するために利用される。
POST
ブラウザからサーバーに情報を送信し、サーバーに情報を保存する。情報を登録する際など、サーバーに情報を送信するために利用される。
DELETE
ブラウザからサーバーに情報を送信し、サーバーの情報を削除する。アカウントを削除する際など、サーバー内のデータを削除するために利用される。
PATCH
ブラウザからサーバーに情報を送信し、サーバー内の情報を置き換える。登録情報を更新する際など、サーバー内のデータを更新するために利用される。
※フォームの初期値として、「編集前のツイート情報」を表示
edit.html.erbを作成
app/views/tweets/edit.html.erb ファイルへ
<div class="contents row">
<div class="container">
<h3>編集する</h3>
<%= form_with(model: @tweet, local: true) do |form| %>
<%= form.text_field :name, placeholder: "Nickname" %>
<%= form.text_field :image, placeholder: "Image Url" %>
<%= form.text_area :text, placeholder: "text", rows: "10" %>
<%= form.submit "SEND" %>
<% end %>
</div>
</div>
確認用URL
http://localhost:3000/tweets/2/edit
編集してもまだ反映されないよ
ツイート更新処理の実装
いよいよ
編集作業の第二段階である、テーブルのデータを更新する処理
updateアクションのルーティングを設定
tweetsコントローラーのupdateアクションが実行
config/routes.rb ファイルへ
Rails.application.routes.draw do
root to: 'tweets#index'
resources :tweets, only: [:index, :new, :create, :destroy, :edit, :update] ←ここ
end
updateアクションをコントローラーに定義
app/controllers/tweets_controller.rb ファイルへ
class TweetsController < ApplicationController
def index
@tweets = Tweet.all
end
def new
@tweet = Tweet.new
end
def create
Tweet.create(tweet_params)
redirect_to '/'
end
def destroy
tweet = Tweet.find(params[:id])
tweet.destroy
redirect_to root_path
end
def edit
@tweet = Tweet.find(params[:id])
end
ここから
def update
tweet = Tweet.find(params[:id])
tweet.update(tweet_params)
redirect_to root_path
end
ここまで
private
def tweet_params
params.require(:tweet).permit(:name, :image, :text)
end
end
インスタンス変数は使用しない
ビューファイルへツイート情報を受け渡す必要がないため
確認用URL
http://localhost:3000/tweets
新規投稿 @tweet が空
new
つまり、
@tweet=tweet .newの時は
勝手に
create アクションを選択してくれる!
編集は @tweet に何か入ってる
つまり、
@tweet=tweet .find(・・・id)の時は
勝手に
update アクションを選択してくれる!
modelってすごいね。いちいちリンク貼らなくても振り分けしてくれる!
この記事が気に入ったらサポートをしてみませんか?