【備忘録】【Laravel8】ファン交流サイトを作ってみよう②

※この記事は、[【備忘録】【Laravel8】ファン交流サイトを作ってみよう①](URL "https://qiita.com/asami___t/items/3ec542367795927d870e")の続きです。

# 投稿一覧ページに、新規登録、詳細、編集、削除ボタンをつける

データの一覧という意味では前回のコードだけでもいいのですが、新規登録、詳細、編集、削除ボタンが一覧ページについていたほうが便利なので、用意しておきましょう。

post/index.blade.phpを更に編集し、下記のようにします。

#### ポイント
- idはvalue等ではなくurlに含んで送る（POSTの場合も）。
- 削除(destroy)は、リンク（GET）ではなくPOSTで処理する。idはurlで送る。
- 削除ボタンにbtn-destroyというクラスを追加。

また、restfulとかならhref="/users/{{$user->id}}/edit"とする方が適切ですが、わかりやすさ重視でいきます。

```php: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
```

一度見てみましょう。

![スクリーンショット 2021-12-05 15.19.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/985164/3055ea0c-c8b8-c14d-c9b4-3401a759b659.png)

こんな感じになっています。
各ボタンにマウスオーバーし、id等がちゃんとリンク先に渡されるようにURLが生成されているか確認してください。

これで、一覧表示機能は完成です。

# postに編集、詳細、削除機能を追加

今の状態だとまだ一覧ページで編集、詳細、削除を押しても404エラーとなります。まだルーティング、コントローラーを設定していないからです。

# まずはルーティングから

一気に追加してしまいましょう。

```php: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に返します。

```php:PostController.php
　　　　　　　　　　//idを受け取る
public function show($id)
    {
        //受け取ったidを元にpostテーブルからレコードを検索
        $post = Post::find($id);
        //検索結果をビューに渡す
        return view('post.show')->with('post',$post);
    }
```

## ビュー

post/show.blade.phpを作成し、編集していきます。

```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
```

難しいところは何もありません。見た目は、こんな感じ。

![スクリーンショット 2021-12-05 15.42.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/985164/b2743741-6ccc-3881-0a67-6bb33d3753a6.png)

# 編集

次に、各レコードの編集機能を作ります。基本は、新規作成の応用です。

## コントローラー

```php: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を元にレコードを検索、更新し、一覧へリダイレクトさせています。

```php: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です。

```php: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 }}」などといれることでユーザの編集前の値を入れておくことができます。

▼参考記事

https://snome.jp/framework/laravel-user-edit/

# 削除

削除は全く難しくありません。強いて言うなら、一覧のところでformで削除処理を書くところくらいです。

## コントローラー

```php:PostController.php
　　　　　　　　　//idを受け取る
public function destroy($id)
    {
        ////受け取ったidを元に削除対象レコードを検索
        $post = Post::find($id);
        //削除
        $post->delete();
        //リダイレクト
        return redirect()->to('/post/index');
    }
```

## ビュ一

削除にはビューはありません。

これでPostのCRUD処理が完成しました！

次回の記事では、Userの処理を実装していきます。