896 回閲覧されました

公開日 : 2022年11月14日
最終更新日 : 2023年4月2日

みなさんこんにちは、WEB制作のエンジニアのjonioです。

今回はタスクの編集と削除の解説です。

今回で解説は最後ですが1回目の記事をまだ読んでない方は↓から記事を読む事ができます。

 

タスクが空の状態で登録できないようにする

今の状態でタスクを登録するとエラーになります。

そうならない様にタスクが空っぽで登録した場合にタスクを追加するページに警告文を表示させます。

その為にフォームリクエストを使います。

 

フォームリクエスト

入力した時に文字が入ってなかったり文字数が多すぎる場合に警告文を表示させますがそれをバリデーションと言いバリデーションチェックをフォームリクエストで行います。

コマンドは「php artisan make:request 名称Request」です。

今は名称を「Tasks」とします。

ターミナルで↓のコマンドを入力します。

すると「プロジェクト名 > app > Http > Requests > TasksRequest.php」ができます。

それではTasksRequestを編集します。

 

TasksRequest.phpの編集

TasksRequest.phpを編集します。

16行目の「false」を「true」に変えないとフォームリクエストが使えないので変えます。

そしてコードを追加しますがバリデーションの内容は以下になります。

• タスクのタイトルと内容の入力は必須
• タイトルは30文字以内

24行目のrulesメソッドはバリデーションのルールを定義するメソッドで連想配列の形で書きます。

30行目の「name」と31行目の「content」はテーブルのカラム名（↓の赤枠）です。

30行目の「required|max:30」の「required」は必須という意味で「max:30」は「使うことができる最大の文字数」という意味です。

 

エラーメッセージの設定

バリデーションを満たしていない時に表示するエラーメッセージの設定をします。

TasksRequest.phpを編集します。

34行目のmessagesメソッドはエラーメッセージを定義するメソッドで連想配列の形で書きます。

rulesメソッドの連想配列を使って「赤枠.青枠」の形で書きます。

設定したリクエストフォームをTasksController.phpに適応します。

7行目でリクエストフォームを使えるようにしています。

バリデーションも含んだフォームの内容を受ける事ができるようにする為に28行目の「(Request $request)」が「(TaskRequest $request)」に変更になっています。

これでフォームに値を入力してバリデーションに通ったらコントローラーが動きます。

それではタスクを登録するページにバリデーションにひっかかった場合のエラーメッセージが表示されるようにします。

 

add.blade.php

add.blade.phpのコードを↓にします。

42行目〜44行目でエラーメッセージが表示されるようになります。

この書き方でエラーメッセージが表示されると覚えていいです。

タスクを入力するページでわざと何も入力していない状態で登録しようとすると↓の表示になり登録ができなくなります。

 

入力した内容がフォームに残った状態にする

バリデーションに引っかかった今のフォームの状態ですがフォームに入力した内容が残りません。

タスクのタイトルがない状態でタスクを追加します。

するとタスクの内容が消えます。

バリデーションに引っかかった場合もフォームに入力した内容が残る様にします。

add.blade.phpを↓にします。

41行目に「value=”{{ old(‘name’) }}”」・45行目に「{{ old(‘content’) }}」を追加していますが「{{old(‘name属性名’)}}」でフォームに入力した値を残す事ができます。

属性名は↓の赤枠と青枠を見てください、name=”〜”の〜です。

次はタスクのタイトルの並び順を変えます。

 

タスクのタイトルの並び順の変更

タスクを表示するページ（index.blade.php）を見るとタスクが古い順に並んでいます。

↑は「デモタイトル」を後で追加しています。

タスクは上から新しい順に並んだ方が自然なので並び順を変えます。

コントローラーのindexアクションでタスクを取得していますがそこの記述を修正します。

13行目の「Task::get()」を「Task::orderBy(‘updated_at’, ‘desc’)->get()」に変更しました。

「get()」に当たるのが「->get()」です。

orderBy(‘テーブルのカラム名’,desc)で新しい順に並べますが日付で並び順を変えるのでカラムに「updated_at」を使っています。

descを使うと新しい順に並べる事ができてascを使うと古い順に並べる事ができます。

これでタスクの並び順を変える事ができました。

次はタスクを編集できるようにします。

タスクを編集できるページをtasksフォルダの下に作成しますが「edit.blade.php」とします、すぐに編集するので中身は適当に何かを書いてください。

作業の流れは「ルーティング→コントローラー→ビュー」なのでまずはルーティングの設定をします。

 

タスクを編集するページへ移動（ルーティングの設定）

web.phpのコードを↓にします。

29行目を追加していますが「/tasks/edit/{id}」が「/tasks/{id}」や「/edit/{id}」にならない理由は分かりますか？

前に同じ考え方が出てきていますが「/tasks/{id}」や「/edit/{id}」にすると26行目のstoreアクションが作動するからです。

次はコントローラーの設定をします。

 

タスクを編集するページへ移動（コントローラーの設定）

TasksController.phpのコードを↓にします。

次はビューの設定です。

 

タスクを編集するページへ移動（edit.blade.php）

edit.blade.phpのコードを↓にします。

タスクを追加するページ（add.blade.php）にタスクを追加する時にバリデーションに引っかかった場合にフォームの中に入力した内容を残す為の記述の「{{old(‘name属性名’)}}」を書いていました。

しかし今はフォームに入力するのではなく既にデータベースに存在する情報をフォームに表示したいです。

その場合は「{{old(‘name属性’, データベースの値)}}」と書けばいいです。

「データベースの値」は41行目の「$task->name」や45行目の「$task->content」でnameやcontentはテーブルのカラム名です。

これでタスクのタイトルと内容を編集するページを表示することができますがタスクを表示しているページ（index.blade.php）とタスクの内容を見るページ（detail.blade.php）からタスクの内容を編集するページに移動できるようにします。

 

index.blade.phpとdetail.blade.php

index.blade.phpのコードを↓にします。

detail.blade.phpのコードを↓にします。

これでタスクを表示するページかタスクの内容を表示するページから編集するページに移動するとタスクを編集するページが表示されます。

↓は編集ページです。

これでタスクを編集するページに移動できましたがタスクのタイトルと内容を編集できるようにします。

タスクを追加したりタスクを編集する場合ですがデータベースが絡んできます。

データベースが絡む場合はそのページに飛ぶ処理とそのページでデータベースとやり取りをする処理をする為に「ルーティング→コントローラー→ビュー」の設定を2回します。

 

タスクを編集（ルーティングの設定）

web.phpのコードを↓にします。

次はコントローラーです。

 

タスクを編集（コントローラーの設定）

TasksController.phpのコードを↓にします。

49行目〜52行目でタスクのタイトルと内容を更新して53行目で保存します。

50行目・51行目はタスクを追加した時と考え方が同じです。

「->fill」と「->save」はこの記事に解説があります。

最後はビューの設定です。

 

タスクを編集（edit.blade.phpの編集）

edit.blade.phpのコードを↓にします。

これで編集ができるようになります。

最後はタスクの削除です。

 

タスクの削除

タスクの追加・編集はページに移動して追加・編集をするので「ルーティング→コントローラー→ビュー」の操作を2回しますが今回はページに移動するのではなく削除だけするので操作は1回になります。

タスクが表示されるページ（index.blade.php）とタスクの中身が表示されるページ（detail.blade.php）でタスクの削除ができるようにします。

 

index.blade.phpとdetail.blade.php

index.blade.phpのコードを↓にします。

タスクの中身を見る事ができるページへの移動とタスクを編集するページへの移動はaタグですが削除ボタンはformタグ

（67行目〜70行目）になっていますがなぜformタグを使うかの説明をします。

ルーティング→コントローラー→ビューの流れが分かってないといけないですが例としてある人が見たいページに接続してルーターがコントローラーに指示を出してコントローラーがモデルに指示を出してデータベースからデータを持ってきて貰ってそれを受け取ってビューに渡して見たいページを表示します。

削除ボタンを押した時にどこかのページに移動するのではなく削除するページの情報をコントローラーに渡さないといけないからformを使っています。

formについてはこの記事に解説があります。

detail.blade.phpのコードを↓にします。

 

タスクの削除（ルーティングの設定）

web.phpを↓にします。

29行目を追加していますが「tasks.delete」はそのページに移動しなくていいので何でもいいです。

次はコントローラーです。

 

タスクの削除（コントローラーの設定）

TasksController.phpを↓にします。

いつもなら次はビューですが削除をするためのページはないです。

これでLaravelを使ったTODOアプリの完成です。