いよいよこの挑戦も終わりに近づいてきた。
今回はエディットボックスの入力値チェックと、データベース内のタスクの一覧／編集機能に進む。
入力値チェックはかんたんに
入力チェックは、ビューではなく、入力値を受け取る処理をする TaskController で実施する。
$rules = [
'task_name' => 'required|max:10',
];
$messages = ['required' => '必須項目です', 'max' => '100文字以下にして'];
Validator::make($request->all(),$rules,$messages)->validate();今回のチュートリアルブログでは、こんな感じの書き方をしている。
読めば意味はわかるけど、他にどんなルール記載ができるのだろうか。
掘り下げようとしたけど、奥が深そうなので一旦撤退する。。
記載したルールから逸脱すると、makeメソッドの第３引数で指定したメッセージを表示する。
デフォルトのままでよければ特に記載しないでもいいらしい。英語だけど。
また、makeメソッドで作成されたValidatorのvalidateメソッドは、以下のようなものだ。
POSTされた値のバリデーションに成功するとコードは通常通り続けて実行され、バリデーションに失敗すると自動的に例外が投げられユーザーへ適切なエラーメッセージが返されるメソッド
つまりは、失敗すると処理は先に進まない（データベースへは書き込まれない）。
index()でタスク一覧を表示する
次に、TaskControllerの indexメソッドにタスク一覧表示する処理を加える。
/**
* Display a listing of the resource.
*
* @return \Illuminate\Http\Response
*/
public function index()
{
//
$tasks = Task::all();
return view('tasks.index',compact('tasks'));
}compactは、変数名とその値から配列を作成するもので、[‘tasks’=>$tasks]と同じ意味らしい。
これでビューのindex処理に対してtasksが渡る。
index.blade.php では、以下のようにして tasks を受け取って、foreachで個数分の表示処理をする。
{{-- 追記 --}}
@if ($tasks->isNotEmpty())
<div class="max-w-7xl mx-auto mt-20">
<div class="inline-block min-w-full py-2 align-middle">
<div class="overflow-hidden shadow ring-1 ring-black ring-opacity-5 md:rounded-lg">
<table class="min-w-full divide-y divide-gray-300">
<thead class="bg-gray-50">
<tr>
<th scope="col"
class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900">
タスク</th>
<th scope="col" class="relative py-3.5 pl-3 pr-4 sm:pr-6">
<span class="sr-only">Actions</span>
</th>
</tr>
</thead>
<tbody class="divide-y divide-gray-200 bg-white">
@foreach ($tasks as $item)
<tr>
<td class="px-3 py-4 text-sm text-gray-500">
<div>
{{ $item->name }}
</div>
</td>
<td class="p-0 text-right text-sm font-medium">
<div class="flex justify-end">
<div>
<form action="/tasks/{{ $item->id }}"
method="post"
class="inline-block text-gray-500 font-medium"
role="menuitem" tabindex="-1">
@csrf
@method('PUT')
<button type="submit"
class="bg-emerald-700 py-4 w-20 text-white md:hover:bg-emerald-800 transition-colors">完了</button>
</form>
</div>
<div>
<a href="/tasks/{{ $item->id }}/edit/"
class="inline-block text-center py-4 w-20 underline underline-offset-2 text-sky-600 md:hover:bg-sky-100 transition-colors">編集</a>
</div>
<div>
<form action="/tasks/{{ $item->id }}" method="post"
class="inline-block text-gray-500 font-medium"
role="menuitem" tabindex="-1">
@csrf
@method('DELETE')
<button type="submit"
class="py-4 w-20 md:hover:bg-slate-200 transition-colors">削除</button>
</form>
</div>
</div>
</td>
</tr>
@endforeach
</tbody>
</table>
</div>
</div>
</div>
@endif
{{-- 追記ここまで --}}
ポイントは２つあって、
ひとつは、各formにはそれぞれセキュリティ対策の@csrfを必ず入れること。
もうひとつは、以下のように各ボタン（処理）によってmethod指定がことなること。
- [完了] ：既存のデータと同じデータが渡ってきたときにupdated_atを更新したいから updateメソッドを使いたい。そのためにPUTメソッドを明示的に指定(@method(‘PUT’))する。
- [削除] ：@method(‘DELETE’)を明示的に指定して destroyメソッドを使う。
- [編集] ：formタグではなく、Aタグで”/tasks/{{ $item->id }}/edit/”を指定。チュートリアルブログでは、「これは、リソースコントローラーのeditメソッドを呼び出し、editメソッド内で編集画面のビュー（この後作成します）を返すようにするためです。」とあるが、今は理解できない。
＊Aタグだと、GETメソッドになるのでTaskControllerのeditメソッドが呼ばれるからか？？
次回は、編集、完了、削除の処理でフィニッシュ！
コメント