【第５章】オンライン教科書サービス作成【教科書の編集機能】

目的

第４章によって教科書の表示ページを作成し教科書を表示できるようになったため、本章で投稿したテキストの編集機能を実装する。

ルーティング設定

config/routes.rbを下記のように実装する。

Rails.application.routes.draw do
  root to: 'texts#index'
  resources :texts, only: [:new, :create, :show, :edit]
end

コントローラーの実装

上記にてeditアクションのルーティングを設定したので、コントローラーにeditアクションを実装していく。
app/controllers/texts_controller.rbを下記のように実装する。

class TextsController < ApplicationController

  def index
    @texts = Text.all
  end

  def new
    @text = Text.new
  end

  def create
    Text.create(text_params)
    redirect_to root_path
  end

  def show
    @text = Text.find(params[:id])
  end

  def edit
    @text = Text.find(params[:id])
  end

  private
  def text_params
    params.require(:text).permit(:title, :abstract, :body).merge(public_flag: "1")
  end

end

ビューファイル作成

editアクションをコントローラーに実装したので、対応するビューファイルを作成する。
app/views/texts/edit.html.erb

<div class="content__title">
  テキストの編集
</div>

<%= form_with model: @text, class: :form, local: true do |form| %>
  <%= form.text_field :title, placeholder: :テキストタイトル, class: :form__title %>
  <%= form.text_area  :abstract, placeholder: :テキスト概要, class: :form__abstract %>
  <%= form.text_area :body, placeholder: :テキスト本文, class: :form__body %>
  <%= form.submit '作成する', class: :form__btn %>
<% end %>

編集ページへ遷移するリンクを実装する。
app/views/texts/show.html.erb

<div class="textTitle">
  <%= @text.title %>
</div>
<div class="textDate">
  <%= @text.created_at %>
</div>
<div class="textAuthor">
</div>
<div class="textManage">
  <%= link_to "テキスト編集", edit_text_path(@text.id), class: "textManage__edit" %>
</div>
<div class="textText">
  <%= simple_format @text.body %>
</div>

個別の教科書ページからテキスト編集ボタンを押下し、 下図のように編集画面が表示されれば成功です。
ただし、作成するボタンを押下すると下図エラーが発生する。

ルーティング設定

config/routes.rbを下記のように実装する。

Rails.application.routes.draw do
  root to: 'texts#index'
  resources :texts, only: [:new, :create, :show, :edit, :update]
end

コントローラーの実装

上記にてupdateアクションのルーティングを設定したので、コントローラーにupdateアクションを実装していく。
app/controllers/texts_controller.rbを下記のように実装する。

class TextsController < ApplicationController

  def index
    @texts = Text.all
  end

  def new
    @text = Text.new
  end

  def create
    Text.create(text_params)
    redirect_to root_path
  end

  def show
    @text = Text.find(params[:id])
  end

  def edit
    @text = Text.find(params[:id])
  end

  def update
    text = Text.find(params[:id])
    text.update(text_params)
    redirect_to text_path(text.id)
  end

  private
  def text_params
    params.require(:text).permit(:title, :abstract, :body).merge(public_flag: "1")
  end

end

レコードの更新後、各教科書ページに直接リダイレクトするよう実装しています。
updateアクションに関しては、update.html.erbのようなビューは作成しない。
updateアクションを追加後、編集後、作成するボタンを押下してもエラーが発生せず、下図のように表示されていれば成功です。

編集機能が完了したため、次章では削除機能について説明する。
お疲れ様でした！！！