Laravelでインスタグラムのようなモノを作ってみる-3

I wrote: 2017/09/24

Laravelで作るインスタグラムのようなモノ3回目です。今回はコメントできるように実装します。

1.こんな感じのコメントフォームを作成する
 48

 

show.blade.php
フォームを使う場合は{{ csrf_field() }}は必須なので忘れずに。

@extends ('layouts.master')
@section ('content')
<div class="row">
<!-- 写真とキャプションを表示 -->
<div class="card">
   <img src="/image/image-{{ $post->id }}.png" alt="Card image cap">
   <p class="card-text">{{ $post->caption }}</p>
</div>
</div>
 
<!-- コメントフォーム -->
  <form method="POST" action="/{{ $post->id }}/comment">
  {{ csrf_field() }}
<div class="form-group">
   <input type="text" class="form-control" id="comment" name="comment" placeholder="コメント">
</div>
<div class="form-group">
  <button type="submit" class="btn btn-primary">コメントする</button>
</div>
</form>
 
<!-- コメントを表示 -->
<div class="comments">
<ul class="list-group">
@foreach ($post->comments as $comment)
<li class="list-group-item">{{ $comment->comment }}</li>
@endforeach
</ul>
</div>
@endsection

web.php
コメントするボタンがクリックされると、例えば /1/commentにPOSTが行われるので、次を加える。
 Route::post('/{post}/comment', 'CommentsController@store');

2.コメントロジックを実装する
Post.php
createメソッドを使って入力したコメントをインサートします。

<?php
namespace App;
use Illuminate\Database\Eloquent\Model;
 
class Post extends Model
{
    public function comments()
    {
    // ポストに紐づくコメントを取得
    return $this->hasMany(Comment::class);
    }
 
    public function addComment($comment)
    {
        // 新しいレコードを作成 
    Comment::create([
    'comment' => $comment,
    'post_id' => $this->id
    ]);
    }
}

Comment.php
createメソッドを使う場合は、モデルに$fillableか$guardedを設定する必要があります。
$guardedはブラックリスト機能です。

<?php
namespace App;
use Illuminate\Database\Eloquent\Model;
 
class Comment extends Model
{
// この場合はpost_idとcommentのみ挿入OK。 ホワイトリスト機能。
    protected $fillable = ['post_id','comment'];
}

CommentsController.php
入力されたコメントをバリデート処理して、commentsテーブルへコメントを保存。

<?php
namespace App\Http\Controllers;
use App\Post;

class CommentsController extends Controller
{
    public function store(Post $post)
    {
    // バリデーションチェック
        // この場合、コメントは「入力必須、最大100」という入力値チェックになる 
$this->validate(request(), [
    'comment' => 'required | max:100'
]);
 
    $post->addComment(request('comment'));

// createメソッドを使わない場合はこういう書き方も可能
// $comment = new Comment;
// $comment->comment = request('comment');

// $comment->save(); 

    return back();
    }
}

これでロジック実装が完了!
実際にコメントしてみるとこうなる。
54
これでインスタグラムのようなモノの完成です。クオリティは低いですが(´・ω・`)
Laravelは慣れると便利ですね!