初心者向け。Laravel製のTODOアプリ②タスクの詳細の表示と追加
228 回閲覧されました
みなさんこんにちは、WEB 制作のエンジニアのjonioです。
今回はタスクの詳細の表示とタスクの追加のアウトプットです。
それでは解説しますが1回目の記事をまだ読んでない方は↓から記事を読む事ができます。
目次
詳細ページを表示するファイルの作成
詳細ページを表示するファイル（detail.blade.php）をtasksフォルダの下に作成します。
すぐに編集するのでファイルの中には適当に書いてください。
このページですが表示するためにルーティングとコントローラーの設定をしないといけないので設定します。
詳細を表示するページ（ルーティングの設定）
「プロジェクト名 > routes > web.php」の編集をします。
20行目の「/{id}」のidですがidカラムの事です。
次はコントローラーですがidをコントローラーに渡す時はidの前に$を付けて「$id」をアクションの引数にします。
詳細を表示するページ（コントローラーの設定）
「プロジェクト名 > app > Http > Controllers > TasksController.php」を編集します。
18行目ですがルーティングのidをコントローラーに渡すためにshowアクションの引数に$idを使っています。
今回はタスクの詳細を見ますが1つ1つのタスクの詳細は違ってそれを見るためにはデータベースから特定のタスク（特定のid）の詳細を持ってこないといけません。
そんな場合は20行目の「find($id)」を使いますがこれはEloquentモデルのfindメソッドです。
findメソッドはこの記事に解説があります。
idに対応したタスクの詳細を表示するためにdetail.blade.phpの編集をします。
詳細を表示するページ（detail.blade.php）
コードを↓にします。
何度も「$task」が出てきていますがTasksController.phpの20行目の$taskです。
46行目に「created_at->format(‘Y年m月d日 H:i‘) 」があって50行目に「$task->updated_at->format(‘Y年m月d日 H:i‘)」がありますがformat(‘Y年m月d日 H:i‘) で日付の表示ができこの書き方はデータベースの内容を表示する時にコントローラーでEloquentモデルを使っている場合に使えます。
データベースの内容を表示する時にクエリビルダを使っているとエラーになるので注意してください。
これでタスクの詳細までできましたがタスクを表示しているページ（index.blade.php）でタスクの詳細を見るための設定をしていないので設定します。
index.blade.phpは↓です。
index.blade.php
コードを↓にします。
47行目を修正しています。
「route()」ですがrouteへルパと言いリンクに使い書き方は↓です。
今はid（パラメーターと言います）を指定していますがパラメーターを含む場合は↓になります。
これでタスクが表示されているページ（index.blade.php）の詳細をクリックすると詳細が表示されます。
3つ縦に並んだ詳細の内一番上をクリックすると↓になります。
最後はタスクの追加を説明します。
タスクを追加するページに移動するのとデータベースに登録する2つの作業をしないといけないのですがまずはタスクを追加するページに移動するのから説明します。
タスクを追加するページ（ルーティングの設定）
「プロジェクト名 > routes > web.php」の編集をしますがタスクを追加するページを「add.blade.php」としてtasksフォルダの下に作成してください。
1つだけ注意しないといけない事があります。
「/tasks/add」ですが「/tasks」や「/add」でもいい気がしませんか？（tasksやaddの名前は自分で決めています）
「/tasks」や「/add」にした場合20行目の「/{id}」とパス（url）の構造が同じになるため「/tasks」や「/add」にアクセスした時に20行目のshowアクションが作動します。
そうならないようにするために「/tasks/add」にしています。
これはLaravelの性質なので覚えましょう。
次はコントローラーの設定です。
タスクを追加するページ（コントローラーの設定）
「プロジェクト名 > app > Http > Controllers > TasksController.php」を編集します。
次はビューです。
タスクを追加するページ（add.blade.php）
27行目に「@csrf」がありますがLaravelでフォームを作る時はこれがないとエラーになるので絶対に書きましょう。
csrfはクロスサイトリクエストフォージェリというハッキングみたいな物です。
今の状態はタスクを追加するページに移動するリンクがないのでindex.blade.phpに作成します。
index.blade.php
48行目ですがrouteへルパはパラメーターの受け渡しがないのでこの書き方になっています。
これでindex.blade.phpは↓の表示になります。
「+タスクを追加する」をクリックすると↓になります。
それではタスクに追加した内容をデータベースに登録してそれをタスク一覧のページ（index.blade.php）と詳細のページ（detail.blade.php）で表示させます。
同じ工程が2回出てきていますがルーティング→コントローラー→ビューの順にコードを書くと書きやすいと思います。
タスクの追加（ルーティングの設定）
「プロジェクト名 > routes > web.php」の編集をします。
26行目の「->name(‘tasks.store’)」ですがタスクをデータベースに追加する時にページは必要ないのでリンク先を「tasks.store」にしていますが何でもいいです。（ネットで調べたのですが情報を見つけることができなかったので仕様なのかもしれません）
次はコントローラーの設定です。
タスクの追加（コントローラーの設定）
「プロジェクト名 > app > Http > Controllers > TasksController.php」を編集します。
29行目のstore(Request $request)の「Request」ですが「use Illuminate\Http\Request」を省略したものでこれでフォームに入力した（タスクの）内容を受け取ります。
そして受け取った内容を「$request」として使う事ができます。
31行目の「Task::create」はEloquentモデルのcreateメソッドです。
createメソッドでは引数を配列の形で使います。
32行目・33行目とフォームに入力する値とデータベースのテーブルを色で対応させます。
上の図と下の図の赤枠と青枠が対応しています。
上の図と下のテーブルの黄色枠と緑枠が対応しています。
データベースにタスクと内容の追加が終わったらタスクを表示するページにリダイレクトさせますがそれが36行目です。
データベースにタスクと内容を登録しますがデータベースとのやりとりはモデルが行うのでTaskモデルの編集をします。
モデルの編集
Task.phpを編集します。
14行目に「protected $table」がありますがこれでEloquentモデルを使ってデータベースに接続する時にどのテーブルかの指定ができます。
16行目ですが今はtasksテーブルしかないのですが場合によっては複数のテーブルを使う場合があるので記載します。
idを主キーと言いますが主キーはどのテーブルかを判断することができる目印みたいな物です。
18行目の「protected $fillable」ですがtasksテーブルに追加するのを可能にするカラムを指定しますがここに何も書かないとカラムに値を追加することができません。
追加したい内容があるカラムに対して「protected $fillable」を設定せずにフォームから追加しようとすると↓の表示となりエラーが出ます。
次はタスクを追加するフォームがあるページ（add.blade.php）の設定をします。
タスクの追加（add.blade.php）
add.blade.phpのコードを↓にします。
26行目を編集します。
26行目の「tasks.store」ですがフォームからデータベースに追加する時のリンク先です。
web.phpの26行目の「Route::post(‘/tasks/add’, [TasksController::class, ‘store’])->name(‘tasks.store’); 」の「tasks.store」です。
これでフォームに入力するとタスクが追加されます。
試しに追加しました、↓です。
今回はここまでですが今のままではフォームに何も入力せずにタスクの追加をしようとすると↓のエラーになります。
次回はその部分の修正とタスクを追加できないのとタスクの編集と削除の解説をしますが↓です。
