Membuat Blog dengan Laravel & VueJS - #18 | Membaca Postingan

Sebelumnya kita telah menyelesaikan pembuatan halaman homepage atau index dari blog serta membuat komponen untuk menampilkan data postingan.

Selanjutnya kita akan lanjutkan untuk membuat fungsi membaca postingan atau konten pos dengan mereturn ke halaman lain sesuai id pos.

Langsung saja mari kita kerjakan.

PostController.php

Pertama kita buka file PostController.php dan buat fungsi pada method show untuk mereturn data pos sesuai id yang direquest untuk tampilkan datanya.

//PostController.php
public function show($id)
{
  return Post::with('category','user')->findOrFail($id);  
}

Selain data pos, kita juga tampilkan data relasi yang terhubung dengan data pos yaitu kategori dan user.

//Post.php
<?php

namespace App;
use Illuminate\Database\Eloquent\Model;

class Post extends Model
{
    public function category()
    {
      return $this->belongsTo(Category::class);
    }
    public function user()
    {
      return $this->belongsTo(User::class);
    }
}

Membuat Komponen

Karena konten pos ditampilkan di halaman lain ketika dibaca dengan parameternya, maka kita perlu membuat komponen baru.

Mari kita buat komponen baru di direktori components dengan nama  komponen ReadPost.vue.

Pada komponen ReadPost.vue ini kita akan tampilkan data object dari setiap pos yang dipilih untuk dibuka / dibaca.

Setelah komponen dibuat, silahkan copas template dibawah ini.

//ReadPost.vue
<template>
  <div>
    <div class="row" style="margin-bottom: 4rem;">
      <div class="col-8">
        <ol class="breadcrumb">
          <li class="breadcrumb-item"> 
            <router-link :to="{name: 'homepageposts'}">
              <span>Home</span> 
            </router-link>
          </li> 
          <li class="breadcrumb-item active">{{title}}</li>
        </ol>
    <div class="show-content">
      <h1>{{title}}</h1>  
        <div class="user-cat"> 
          <p><i class="fa fa-user"/> {{user}} | <span class="badge badge-dark">#{{category}}</span></p>
        </div>
      <div class="show-img">
        <img :src="'/images/' + image" style="width:100%" />
      </div><br>

      <p>{{body}}</p>
      
      <br><br>       
      <div class="comment-wrap">
        <p><i class="fa fa-comments"></i> Comment:</p>
          <form action="/action_page.php">
            <div class="form-group"> 
              <input type="" class="form-control" id="">
            </div> 
            <button type="submit" class="btn btn-secondary">Submit</button>
          </form>
        </div>
      </div>
    </div>
      <div class="col-4">
        <ul class="list-group">
          <li class="list-group-item list-group-item-success">Success item</li>
          <li class="list-group-item list-group-item-secondary">Secondary item</li>
          <li class="list-group-item list-group-item-info">Info item</li>
          <li class="list-group-item list-group-item-warning">Warning item</li>
          <li class="list-group-item list-group-item-danger">Danger item</li>
          <li class="list-group-item list-group-item-primary">Primary item</li>
          <li class="list-group-item list-group-item-dark">Dark item</li>
          <li class="list-group-item list-group-item-light">Light item</li>
        </ul>
      </div>
    </div> 
  </div>
</template>

<script>
  export default{
    data: function(){
      return {
        title: '',
        body: '',
        image: '',
        category: '',
        user: '',
      }
    },
    mounted (){
      let id = this.$route.params.id;
      axios.get("/api/posts/" + id)
      .then(response => {
        console.log(response.data)
        this.title = response.data.title;
        this.body = response.data.body;
        this.image = response.data.image;
        this.category = response.data.category.name;
        this.user = response.data.user.name;
      })
    }
  }
</script>

Kita mengambil dan menampilkan data object dari pos, dimana diantaranya ada title, body, gambar pos, kategori pos, dan user yang membuat postingan.

Ketika membaca pos akan menampilkan data sesuai id dari postingan. Id ini berasal dari komponen lain yang sebagai parent nya.

Import Komponen

Setelah komponen dibuat, selanjutnya buka file app.js untuk kita import dan dibuat routenya.

//app.js
import ReadPost from './components/ReadPost'
...
{
   path: '/read/:id',
   name: 'readpost',
   component: ReadPost,
   props: true,
},

Lanngkah selanjutnya mari kita buka komponen HomepagePosts.vue dan kita buat router link pada button 'read more' dengan parameter yang mengambil id pos.

//HomepagePosts.vue
<router-link :to="{ name: 'readpost', params: { id : post.id } }">
   <button type="button" class="btn btn-secondary btn-sm float-right">
      Read More..
   </button>
</router-link>  

Sampai disini jika tidak ada kesalahan hasilnya akan seperti gambar dibawah ini.

Sebagai contoh saya membuka salah satu postingan dengan malakukan klik pada button read more.