Tweetの編集

Tweetの編集には、2つのアクション<edit & update>を使用

  1. ツイート編集画面のルーティングを設定する
  2. 編集ボタンをビューに追加する
  3. editアクションをコントローラーに定義する
  4. 編集画面のビューファイルを作成する
  5. ツイートの更新を行うためのルーティングを設定する
  6. updateアクションをコントローラーに定義する
  7. 更新後のビューファイルを追加する

<ツイート編集ページの実装>

editアクションのルーティングを設定

②config/routes.rb

Rails.application.routes.draw do
  # For details on the DSL available within this file, see https://guides.rubyonrails.org/routing.html
  root to: 'tweets#index'
  resources :tweets, only: [:index, :new, :create, :destroy, :edit]
end

 

<編集ボタンを投稿一覧に追加>

削除ボタンと同じように、link_toメソッドを使用。

編集画面へ遷移するパスには、tweetのidをパラメーターとして設定しましょう。
destroyメソッドの時と同様に遷移先がツイートごとに異なるためです。

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), method: :get %>
          </li>
          <li>
            <%= link_to '削除', tweet_path(tweet.id), method: :delete %>
          </li>
        </ul>
      </div>
      <p><%= tweet.text %></p>
      <span class="name">
        <%= tweet.name %>
      </span>
    </div>
  <% end %>
</div>
<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), method: :get %>
          </li>
          <li>
            <%= link_to '削除', tweet_path(tweet.id), method: :delete %>
          </li>
        </ul>
      </div>
      <p><%= tweet.text %></p>
      <span class="name">
        <%= tweet.name %>
      </span>
    </div>
  <% end %>
</div>

 

<editアクションをコントローラーに定義>

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)
  end

  def destroy
    tweet = Tweet.find(params[:id])
    tweet.destroy
  end

  def edit
    @tweet = Tweet.find(params[:id])
  end

  private
  def tweet_params
    params.require(:tweet).permit(:name, :image, :text)
  end
end

 

<編集画面のビューを作成>

入力情報の送信先/tweets/編集するツイートのidとなる。

PATCHメソッドを使用。

メソッド 役割
GET サーバーからブラウザに情報を返す。単にウェブサイトを閲覧する際など、情報を取得するために利用される。
POST ブラウザからサーバーに情報を送信し、サーバーに情報を保存する。情報を登録する際など、サーバーに情報を送信するために利用される。
DELETE ブラウザからサーバーに情報を送信し、サーバーの情報を削除する。アカウントを削除する際など、サーバー内のデータを削除するために利用される。
PATCH ブラウザからサーバーに情報を送信し、サーバー内の情報を置き換える。登録情報を更新する際など、サーバー内のデータを更新するために利用される。

 ①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>

 

 

<ツイート更新処理の実装>

ツイートを更新する際には、/tweets/《編集するツイートのid》PATCHメソッドでアクセスします。
このパスにアクセスした際、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)
  end

  def destroy
    tweet = Tweet.find(params[:id])
    tweet.destroy
  end

  def edit
    @tweet = Tweet.find(params[:id])
  end

  def update
    tweet = Tweet.find(params[:id])
    tweet.update(tweet_params)
  end

  private

  def tweet_params
    params.require(:tweet).permit(:name, :image, :text)
  end
end

 

<更新完了画面のビューを作成ー更新完了画面ー>

app/views/tweetsディレクトリの中にupdate.html.erbというビューファイルを作成

<div class="contents row">
  <div class="success">
    <h3>更新が完了しました。</h3>
    <a class="btn" href="/">投稿一覧へ戻る</a>
  </div>
</div>