More than 1 year has passed since last update.

[有料級]　Rails7(Turbo), Docker, Bootstrap5を使ったtodoリストの作り方第1章-4(Todoリスト編集編)

Last updated at 2023-04-18Posted at 2023-04-15

前回のあらすじ

ここまでみていただきありがとうございます！
前回はTodoリスト一覧表示編でTodoリストの一覧表示ができるようになりました。
[有料級]　Rails7(Turbo), Docker, Bootstrap5を使ったtodoリストの作り方第1章-3(Todoリスト新規作成編)

今回は作成したtodoリストを編集できるようにします。

事前準備

Dockerを一度止めている方はこちらのコマンドでDockerを起動し、コンテナに入りましょう。

docker-compose up -d
docker-compose exec app bash

ビューの編集

まずはindexページにtodoを編集するボタンを設置します。

app/views/todos/index.html.slim

h1 Todo一覧

= link_to  "Todo追加", new_todo_path, class: "btn btn-primary"

table.table
  thead
    tr
      th scope="col" 題名
      th scope="col" 詳細
+　　　th scope="col"
  tbody
    - @todos.each do |todo|
      tr
        td = todo.title
        td = todo.description
+       td = link_to "編集", edit_todo_path(todo), class: "btn btn-sm btn-success"

コードの説明をします
= link_to "編集", edit_todo_path(todo)：editページに遷移することができます。
edit_todo_path(todo)：editに遷移できるのですがparamsにtodoのidを渡すことができます。

これでtodoリストの横に編集ボタンが加わりました。

コントローラーの編集

ボタンを押したら編集画面に遷移しないといけないので編集画面に遷移できるようにコントローラーを編集します。

app/controllers/todos_controller.rb

class TodosController < ApplicationController
  def index
    @todos = Todo.all
  end

  def new
    @todo = Todo.new
  end

  def create
    @todo = Todo.create(todo_params)
    redirect_to todos_path
  end

+ def edit
+   @todo = Todo.find(params[:id])
+ end

  private
    def todo_params
      params.require(:todo).permit(:title, :description)
    end
end

コードの説明をします。
Todo.find(params[:id])：paramsのidを頼りにTodoデータベースから特定をします。

編集画面の作成

まずはファイルを作成しましょう

touch app/views/todos/edit.html.slim

新規追加画面を作成します。

app/views/todos/edit.html.slim

 h1.text-center.mt-5 編集

.row
  .col-3
  .col-6
    = form_for(@todo) do |form|
      .form-group
        = form.label :タイトル
        = form.text_field :title, class: 'form-control'
      .form-group
        = form.label :内容
        = form.text_area :description, class: 'form-control'
      = form.submit '更新', class: 'btn btn-success mt-3'
      = link_to "戻る", todos_path, class: 'btn btn-secondary mt-3'

こちらで編集画面が完成しました。
イメージは以下の画像のようになっています。

データベースの編集機能追加

画面が出来上がったら実際にTodoをデータベースに変更した内容を反映させるコードを書いていきます。

コントローラーでcreateメソッドを作成します

app/controllers/todos_controller.rb

class TodosController < ApplicationController
  def index
    @todos = Todo.all
  end

  def new
    @todo = Todo.new
  end

  def create
    @todo = Todo.create(todo_params)
    redirect_to todos_path
  end

  def edit
    @todo = Todo.find(params[:id])
  end

+ def update
+   @todo = Todo.find(params[:id])
+   @todo.update(todo_params)
+   redirect_to todos_path
+ end

  private
    def todo_params
      params.require(:todo).permit(:title, :description)
    end
end