Laravel6×MAMPで掲示板を作ろう⑤

Commentできるようにする

投稿も1連の流れができましたのでコメントできるようにしていきましょう。

show.blade.php

@extends('layouts.app')

@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card-header">
                <h5>タイトル：{{ $post->title }}</h5>
            </div>
            <div class="card-body">
                <p class="card-text">内容：{{ $post->body }}</p>
                <p>投稿者：{{ $post->user->name }}</p>
                <p>投稿日時：{{ $post->created_at }}</p>
                <a href="{{ route('posts.edit', $post->id) }}" class="btn btn-primary">
                編集する</a>
                <form action='{{ route('posts.destroy', $post->id) }}' method='post'>
                    {{ csrf_field() }}
                    {{ method_field('DELETE') }}
                    <input type='submit' value='削除' class="btn btn-danger" 
                     onclick='return confirm("削除しますか？");'>
                </form>
            </div>
        </div>
    </div>
    <div class="row justify-content-center">
        <div class="col-md-8">
            <form action="{{ route('comments.store') }}" method="POST">
            {{csrf_field()}}
	    <input type="hidden" name="post_id" value="{{ $post->id }}">
                <div class="form-group">
                    <label>コメント</label>
                    <textarea class="form-control" 
                     placeholder="内容" rows="5" name="body"></textarea>
                </div>
                <button type="submit" class="btn btn-primary">コメントする</button>
            </form>
        </div>
    </div>
</div>
@endsection

投稿の詳細画面にコメント入力欄を作成しました。

ここで注目するべきは、

<input type=”hidden” name=”post_id” value=”{{ $post->id }}”>

です。

コメントはどのPost（投稿）に紐づいているのかを保存しなくてはなりません。よって、postのidをCommentControllerに送る処理を書いてあげます。

typeをhiddenとすることで、ユーザーには見えないようにしています。

次にcommentを保存するために、バリデーションを設定しましょう。

//bash

% php artisan make:request CommentRequest

作成したCommentRequest

<?php

namespace App\Http\Requests;

use Illuminate\Foundation\Http\FormRequest;

class CommentRequest extends FormRequest
{
    /**
     * Determine if the user is authorized to make this request.
     *
     * @return bool
     */
    public function authorize()
    {
        return true;
    }

    /**
     * Get the validation rules that apply to the request.
     *
     * @return array
     */
    public function rules()
    {
        return [
            'body'  => 'required',
        ];
    }

    public function messages()
    {
        return [
            'body.required'  => '内容は必須です。',
        ];
    }
}

に変更してあげましょう。

次に保存をする処理を書きます。

CommentController

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Http\Requests\CommentRequest;
use App\Comment;
use App\Post;
use Auth;

class CommentController extends Controller
{
	public function __construct()
    {
        $this->middleware('auth');
    }


---省略---

public function store(***CommentRequest*** $request)
    {
        $post = Post::find($request->post_id);  //まず該当の投稿を探す

        $comment = new Comment;              //commentのインスタンスを作成

        $comment -> body    = $request -> body;
        $comment -> user_id = Auth::id();
        $comment -> post_id = $request -> post_id;

        $comment -> save();

        return view('posts.show', compact('post'));  //リターン先は該当の投稿詳細ページ
    }

ここまでで、コメントをすると該当の投稿詳細画面に戻ることができました。

そしたら、投稿詳細画面にコメントの一覧を表示できるようにしましょう。

投稿の詳細画面に表示したいので……

PostController

public function show($id)
    {
        $post = Post::find($id);
        $post->load('user', 'comments'); → Eagerロード
        return view('posts.show', compact('post'));
    }

userに加えて、commentsもEagerロードしてあげましょう。

次は各投稿画面にコメント一覧を表示しましょう。

show.blade.php

<div class="row justify-content-center">
        <div class="col-md-8">
            <form action="{{ route('comments.store') }}" method="POST">
            {{csrf_field()}}
                <input type="hidden" name="post_id" value="{{ $post->id }}">
                <div class="form-group">
                    <label>コメント</label>
                    <textarea class="form-control" placeholder="内容" rows="5" name="body"></textarea>
                </div>
                <button type="submit" class="btn btn-primary">コメントする</button>
            </form>
        </div>
    </div>
    <div class="row justify-content-center">
        <div class="col-md-8">
            @foreach ($post->comments as $comment)
            <div class="card mt-3">
                <h5 class="card-header">投稿者：{{ $comment->user->name }}</h5>
                <div class="card-body">
                    <h5 class="card-title">投稿日時：{{ $comment->created_at }}</h5>
                    <p class="card-text">内容：{{ $comment->body }}</p>
                </div>
            </div>
            @endforeach
        </div>
    </div>
</div>
@endsection

ここで新しい書き方が出てきました。

        @foreach ($post->comments as $comment)

foreach文ではありますが、$post（特定の投稿）に紐づいた複数あるcommentsで回しています。

commentの投稿者もリレーションを用いて表示ができています！リレーションはかなり便利なのでぜひ動んどん使っていきましょう。

今回までで掲示板にPostをし、コメントができるところまで完成しました。

お疲れ様でした。

もしこの記事をいいねと思ったたり、ご参考になりましたら下記ボタンからサポートしていただけますと、とても励みになります！