※この記事は、【備忘録】【Laravel8】ファン交流サイトを作ってみよう①の続きです。
投稿一覧ページに、新規登録、詳細、編集、削除ボタンをつける
データの一覧という意味では前回のコードだけでもいいのですが、新規登録、詳細、編集、削除ボタンが一覧ページについていたほうが便利なので、用意しておきましょう。
post/index.blade.phpを更に編集し、下記のようにします。
ポイント
- idはvalue等ではなくurlに含んで送る（POSTの場合も）。
- 削除(destroy)は、リンク（GET）ではなくPOSTで処理する。idはurlで送る。
- 削除ボタンにbtn-destroyというクラスを追加。
また、restfulとかならhref="/users/{{$user->id}}/edit"とする方が適切ですが、わかりやすさ重視でいきます。
post/index.blade.php
@extends('layouts.app')
@section('content')
<h1>一覧表示</h1>
<!-- 新規投稿 -->
<div class="row">
<div class="col-sm-12">
<a href="/post/create" class="btn btn-primary" style="margin:20px;">新規投稿</a>
</div>
</div>
<!-- table -->
<table class="table table-striped">
<!-- loop -->
@foreach($posts as $post)
<tr>
<td>{{$post->id}}</td>
<td>{{$post->title}}</td>
<td>{{$post->body}}</td>
<td><a href="/post/show/{{$post->id}}" class="btn btn-primary btn-sm">詳細</a></td>
<td><a href="/post/edit/{{$post->id}}" class="btn btn-primary btn-sm">編集</a></td>
<td>
<form method="post" action="/post/destroy/{{$post->id}}">
<input type="hidden" name="_token" value="{{csrf_token()}}">
<input type="submit" value="削除" class="btn btn-danger btn-sm btn-destroy">
</form>
</td>
</tr>
@endforeach
</table>
<!-- page control -->
{!! $posts->render() !!}
@endsection
一度見てみましょう。
こんな感じになっています。
各ボタンにマウスオーバーし、id等がちゃんとリンク先に渡されるようにURLが生成されているか確認してください。
これで、一覧表示機能は完成です。
postに編集、詳細、削除機能を追加
今の状態だとまだ一覧ページで編集、詳細、削除を押しても404エラーとなります。まだルーティング、コントローラーを設定していないからです。
まずはルーティングから
一気に追加してしまいましょう。
web.php
Route::get('/post/show/{id}', [App\Http\Controllers\PostController::class, 'show'])->name('show');
Route::get('/post/edit/{id}', [App\Http\Controllers\PostController::class, 'edit'])->name('edit');
Route::post('/post/update/{id}', [App\Http\Controllers\PostController::class, 'update'])->name('update');
Route::post('/post/destroy/{id}', [App\Http\Controllers\PostController::class, 'destroy'])->name('destroy');
ここからは各機能ごとに追加していきます。
まずは詳細表示から。
詳細表示
コントローラー
show()メソッドを定義します。
idでレコードを検索し、その結果をそのままviewに返します。
PostController.php
//idを受け取る
public function show($id)
{
//受け取ったidを元にpostテーブルからレコードを検索
$post = Post::find($id);
//検索結果をビューに渡す
return view('post.show')->with('post',$post);
}
ビュー
post/show.blade.phpを作成し、編集していきます。
post/show.blade.php
@extends('layouts.app')
@section('content')
<h1>詳細表示</h1>
<div class="row">
<div class="col-sm-12">
<a href="/post/index" class="btn btn-primary" style="margin:20px;">一覧に戻る</a>
</div>
</div>
<!-- table -->
<table class="table table-striped">
<tr><td>ID</td><td>{{$post->id}}</tr>
<tr><td>タイトル</td><td>{{$post->title}}</tr>
<tr><td>本文</td><td>{{$post->body}}</tr>
</table>
@stop
難しいところは何もありません。見た目は、こんな感じ。
編集
次に、各レコードの編集機能を作ります。基本は、新規作成の応用です。
コントローラー
PostController.php
//idを受け取る
public function edit($id)
{
//受け取ったidを元にpostテーブルからレコードを検索
$post = Post::find($id);
//検索結果をビューに渡す
return view('post.edit')->with('post',$post);
}
editアクションでは、受け取ったidを元にレコードを検索し、その情報をviewに返します。つまり、該当の情報をビュ一に表示させるだけの単純作業。
そして、update。受け取ったidを元にレコードを検索、更新し、一覧へリダイレクトさせています。
PostController.php
//idを受け取る
public function update(Request $request, $id)
{
//受け取ったidを元にpostテーブルからレコードを検索
$post = Post::find($id);
//値を代入
$post->title = $request->title;
$post->body = $request->body;
//保存（更新）
$post->save();
//リダイレクト
return redirect()->to('/post/index');
}
ビュ一
基本的に構成はcreateと同じなので、コピーしてedit.blade.phpとし、必要な箇所を編集するだけでOKです。
post/edit
@extends('layouts.app')
@section('content')
<h1>投稿編集</h1>
<div class="row">
<div class="col-sm-12">
<a href="/post/index" class="btn btn-primary" style="margin:20px;">一覧に戻る</a>
</div>
</div>
<!-- form -->
<form method="post" action="/post/update">
<div class="form-group">
<label>タイトル</label>
<input type="string" name="title" value="{{ $post->title}}" class="form-control">
</div>
<div class="form-group">
<label>本文</label>
<input type="text" name="body" value="{{ $post->body}}" class="form-control">
</div>
<input type="hidden" name="_token" value="{{csrf_token()}}">
<input type="submit" value="更新" class="btn btn-primary">
</form>
@stop
- name=”～”の「～」の部分は基本的にはテーブルのカラムと同じにしておけば良いです。
- value=”～”はテキストボックスに最初から表示される文字列を指定します。
- 「～」の部分に「{{ $post->title }}」などといれることでユーザの編集前の値を入れておくことができます。
▼参考記事
削除
削除は全く難しくありません。強いて言うなら、一覧のところでformで削除処理を書くところくらいです。
コントローラー
PostController.php
//idを受け取る
public function destroy($id)
{
////受け取ったidを元に削除対象レコードを検索
$post = Post::find($id);
//削除
$post->delete();
//リダイレクト
return redirect()->to('/post/index');
}
ビュ一
削除にはビューはありません。
これでPostのCRUD処理が完成しました！
次回の記事では、Userの処理を実装していきます。