新規投稿機能、編集機能、削除機能の実装
本記事でのモデルケース：
・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 %>