Membuat Blog dengan Laravel & VueJS - #10 | Menampilkan Data

Setelah kita menyelesaikan proses dalam pembuatan pos baru, selanjutnya kita akan menampilkan datanya yang ada di dabatase.

Kita akan tampilkan semua postingan pada halaman admin dengan membuat halaman baru.

Membuat Komponen Baru

Kita akan membuat komponen baru yang digunakan untuk menampikan semua pos.

Silahkan buat komponen baru di resources/js/components dengan nama AllPosts.vue.

Setelah komponen dibuat, silahkan copas template dibawah ini:

//AllPosts.vue
<template>
<div>
  <div class="_container">
    <div class="admin-page-title">All Posts</div> 
      <div class="h_wrap">
        <table class="table table-bordered">
          <thead class="thead-dark">
            <tr>
              <th>Title</th>
              <th>Image</th>
              <th>Categories</th>
              <th>Actions</th>
            </tr>
          </thead>
          <tbody>
            <tr >
              <td style="width:500px"><h5>Title</h5></td>
              <td style="width:100px">Image</td>
              <td>Kategori</td>
              <td> 
              <button type="button" class="btn btn-primary">Edit</button>
              <button type="button" class="btn btn-danger">Delete</button>
             </td>
            </tr>
          </tbody>
        </table>   
      </div>
    </div>
  </div>
</div> 
</template>

<script>
  export default {

  
  };
</script>

<style scoped>
  tbody img{
    width: 200px;
    height: 200px;
  }
  .table-bordered{
    background-color: #ffffff;
  }
</style>

Kita tampilkan postingan dalam bentuk table. Selain semua data ditampilkan pada table, kita tambahkan juga 2 action button yaitu edit dan delete.

Selanjutnya kita buat route untuk komponen AllPosts.vue di resources/app.js.

//app.js
...
{
   path: '/admin/allposts',
   name: 'allposts',
   component: AllPosts,
   props: true,
},
...

Setelah itu kita tambahkan menu pada komponen MenuAdmin.vue dengan membuat router-link.

//MenuAdmin.vue
<li>
   <router-link :to="{ name: 'createpost', params: {userId}  }"><i class="fa fa-pencil-square-o"/> 
    <span class="text"> NEW POST </span></router-link>
</li>

Kemudian kita akan tampilkan datanya.

Silahkan buka PostContoller.php dan kita buat fungsi pada method index untuk mengambil data pos.

//PostController.php
public function index()
{
  $posts = Post::orderBy('id','asc')->with('category')->latest()->get();
  return response()->json($posts);
}

Kita tambahkan atribut pivot 'category' untuk mengambil data kategori.

Kemudian menuju komponen AllPosts.vue dan kita buat list rendering. Kita gunakan direktif v-for untuk merender data pos dalam array.

//AllPosts.vue
...
<tbody v-for="post in posts">
   <tr >
      <td style="width:500px"><h5>{{ post.title }}</h5></td>
      <td style="width:100px"><img :src="'/images/' + post.image"/></td>
      <td>{{ post.category.name }}</td>
      <td> 
      <button type="button" class="btn btn-primary">Edit</button>
      <button type="button" class="btn btn-danger">Delete</button>
      </td> 
   </tr>
</tbody>
...

<script>
export default {
  data:function() {
    return {
      posts: [],
    }
  },
  created: function () {
    this.getPosts();
  },
  methods: {
    getPosts() {
      axios.get('/api/posts')
        .then(response => {
            console.log(response.data);
            this.posts = response.data; 
        })
     }
  }
};
</script>

Jika dilihat hasilnya seperti gambar dibawah:


Sampai disni data pos telah berhasil ditampilkan, kita akan lanjutkan di part berikutnya.