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

Laravel PHP

I wrote: 2017/09/23

Laravelで作るインスタグラムのようなモノ２回目です。
今回は写真をクリックした後の実装になります。写真のリストからある写真をクリックしたらその写真のページに遷移させます。写真にはコメント機能を付けます。今回はコメントを取得して表示するだけにします。分からないトコは検索してね。

１．commentsテーブルを作る
次のコマンドでマイグレーションとコントローラーの雛形を作成
  $ php artisan make:model Comment -mc

作成されたマイグレーションのup()を次のように変更

    public function up()
    {
        Schema::create('comments', function (Blueprint $table) {
            $table->increments('id');
            $table->integer('post_id');
            $table->string('comment');
            $table->timestamps();
        });
    }

 


次のコマンドでcommentsテーブルを作成
作成されたテーブルにコメントデータを追加しておく。
  $ php artisan migrate
07
２．写真をクリックしてページ遷移させる機能を実装
web.phpに次を加える
　Route::get('/{post}', 'PostsController@show');
 
PostsController.phpはこうする。

<?php
namespace App\Http\Controllers;
use App\Post;
 
class PostsController extends Controller
{
    public function index()
    {
// ポスト(写真)を全取得
    $posts = Post::all();
// index.blade.phpへ$postsを渡しつつ遷移する
    return view('index', compact('posts'));
    }
 
    public function show(Post $post)
    {
// show.blade.phpへ$postを渡しつつ遷移する 
    return view('show', compact('post'));
    }
}

Post.phpはこうする。

<?php
namespace App;
use Illuminate\Database\Eloquent\Model;
 
class Post extends Model
{
    public function comments()
    {
    // ポストに紐づくコメントを取得
    return $this->hasMany(Comment::class);
    }
}

index.blade.phpはこうする。ただリンクを加えただけ。

@extends ('layouts.master')
@section ('content')
  <div class="row">
 
    @foreach ($posts as $post)
      <div class="card">
        <a href="/{{ $post->id }}">
          <img src="/image/image-{{ $post->id }}.png" alt="Card image cap">
        </a>
      </div>
    @endforeach
 
  </div>
@endsection

show.blade.phpはこうする。
$post->commentsはPost.phpのcomments()を呼び出してる。

@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>
    <!-- コメントを表示 -->
<div class="comments">
<ul class="list-group">
@foreach ($post->comments as $comment)
<li class="list-group-item">{{ $comment->comment }}</li>
@endforeach
</ul>
</div>
@endsection

これで実装が完了しました。
実際に写真リストから特定の写真をクリックするとこうなる。
06
おお、コメントが表示できるようになってます！
次回はコメントできるようにフォームを作成します。