【Rails】新規投稿機能、編集機能、削除機能の実装

新規投稿機能、編集機能、削除機能の実装

本記事でのモデルケース：
・Photoモデル
・photosコントローラー
・カラム名：image,title,memo
なので、記事をご覧の皆さんのモデル名やコラム名などに応じて書き換えていってもらえれば実装できると思います！

新規投稿機能の実装

ルーティングの設定

ここではnewアクションとcreateアクションを定義する

routes.rb

Rails.application.routes.draw do
  #　ここから
  resources :photos, only: %i(new create)
　#　ここを追加
end

この記述によって

以上のルーティングが生成される

コントローラーの設定

photos_controller.rb

class PhotosController < ApplicationController
    # ここから
    def new
        @photo = Photo.new
    end
    
    def create
        @photo = Photo.new(photo_params)
        if @photo.save
          redirect_to action: :index
        else
          redirect_to action: :new
        end
    end

    private
      def photo_params
        params.require(:photo).permit(:image,:title,:memo)
      end
    # ここまでを追加
end

投稿ページの設計

まず、viewsファイルの中でedit.html.erbを作成してください！

new.html.erb

<%= form_for(@photo, :url => { controller:'photos', action:'create'})do |f| %>
 <div class="field">
   <%= f.label :image %>
   <br>
   <%= f.file_field :image %>
   <br>
   <%= f.label :title %>
      <br>
   <%= f.text_field :title %>
   <br>
   <%= f.label :memo %>
   <br>
   <%= f.text_field :memo %>
 </div>
 <div class="action">
   <%= f.submit %>
 </div>
<% end %>

投稿一覧ページの実装

まず、viewの中でindex.html.erbファイルを作成ください！

photos_controller.rb

class PhotosController < ApplicationController
    #ここから
    def index
        @photos = Photo.all
    end
    #ここまでを追加

    def new
        @photo = Photo.new
    end

    def create
        @photo = Photo.new(photo_params)
        if @photo.save
          redirect_to action: :index
        else
          redirect_to action: :new
        end
    end

    private
      def photo_params
        params.require(:photo).permit(:image,:title,:memo)
      end
end

index.html.erb

<% @photos.each do |photo| %>
 <div>
   <%= image_tag photo.image_url %>
   <p><%= photo.title %></p>
   <p><%= photo.memo %></p>
 </div>
<% end %>

投稿編集機能の実装

ルーティングの実装

routes.rb

Rails.application.routes.draw do
  # edit,updateをroutes.rbに追加
  resources :photos, only: %i(new create edit update)
end

コントローラーの設定

photos_controller.rb

class PhotosController < ApplicationController
    def new
        @photo = Photo.new
    end
    
    def create
        @photo = Photo.new(photo_params)
    if @photo.save
          redirect_to action: :index
        else
          redirect_to action: :new
        end
    end

    def edit
      @photo = Photo.find_by(id: params[:id])
    end

    def update
      @photo = Photo.find_by(id: params[:id])
      if @photo.update_attributes(photo_params)
        redirect_to "/"
      else
        render action: :edit
      end
    end

    private
      def photo_params
        params.require(:photo).permit(:image,:title,:memo)
      end
end

編集ページの設計

edit.html.erb

<%= form_with model: @photo, url: { action: :update }, html: { class: 'listForm' }, local: true do |f| %>
  <%= f.label :title %>
  <%= f.text_field :title, class: "form-control listName", placeholder: "タイトル" %>
  <%= f.label :memo %>
  <%= f.text_field :memo, class: "form-control listName", placeholder: "詳細" %>
  <div class="text-center"><%= f.submit "編集する", class: "submitBtn" %></div>
<% end %>

一覧ページから投稿ページへの遷移のリンク実装

index.html.erb

<% @photos.each do |photo| %>
 <div>
   <%= image_tag photo.image_url %>
   <p><%= photo.title %></p>
   <p><%= photo.memo %></p>
   <%= link_to "編集", edit_photo_path(photo) %>　#　この1行を追加
 </div>
<% end %>

投稿削除機能の実装

ルーティングの設定

routes.rb

Rails.application.routes.draw do
  #　destroyを追加
  resources :photos, only: %i(new create edit update destroy)
end

コントローラーの設定

photos_controller.rb

class PhotosController < ApplicationController
    def new
        @photo = Photo.new
    end
    
    def create
        @photo = Photo.new(photo_params)
    if @photo.save
          redirect_to action: :index
        else
          redirect_to action: :new
        end
    end

    def edit
      @photo = Photo.find_by(id: params[:id])
    end

    def update
      @photo = Photo.find_by(id: params[:id])
      if @photo.update_attributes(photo_params)
        redirect_to "/"
      else
        render action: :edit
      end
    end

    # ここから
    def destroy
      @photo = Photo.find_by(id: params[:id])
      @photo.destroy
      redirect_to :root
    end
    # ここまで追加する

    private
      def photo_params
        params.require(:photo).permit(:image,:title,:memo)
      end
end

index.html.erb

<% @photos.each do |photo| %>
 <div>
   <%= image_tag photo.image_url %>
   <p><%= photo.title %></p>
   <p><%= photo.memo %></p>
   <%= link_to "編集", edit_photo_path(photo) %>
   <%= link_to ”削除”, photo, method: :delete, data: { confirm: "#{photo.title}を削除して大丈夫ですか？" } %>
   # 上の1行を追加
 </div>
<% end %>