More than 1 year has passed since last update.

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

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

前回のあらすじ

ここまでみていただきありがとうございます！
前回はTodoリスト一覧表示編でTodoリストの一覧表示ができるようになりました。
[有料級]　Rails7(Turbo), Docker, Bootstrap5を使ったtodoリストの作り方第1章-2(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" 詳細
  tbody
    - @todos.each do |todo|
      tr
        td = todo.title
        td = todo.description

ボタンがあるか確かめてみましょう
http://127.0.0.1:3050

上の画像のようにボタンが設置されていれば成功です。

コントローラーの編集

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

app/controllers/todos_controller.rb

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

Todo.new：新しいTodoデータを作成していることになります。

こちらで新規追加画面に移動できるようになりました。

新規追加画面の作成

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

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

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

new.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-primary 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
+
+ private
+   def todo_params
+     params.require(:todo).permit(:title, :description)
+   end
end

コードの説明をします。
Todo.create：新しいTodoデータを作成し、データベースに保存させています。
redirect_to todos_path：todos_path今回のメイン画面に遷移します。
todo_params：データを作成する際にtitleとdescriptionのみを追加させるようにしています。

以上でtodoの新規追加機能を作ることができました。
実際に検証してみましょう。