Tutorial CRUD Laravel 7 & Vue JS #3 : Proses Menampilkan Data - Halo teman-teman semuanya, di artikel kali ini kta semua akan belajar bagaimana cara menampilkan data di Vue JS dari API yang sudah kita buat sebelumnya.
Di artikel sebelumnya kita juga sudah berhasil membuat component-component di Vue JS, diamana component ini akan kita gunakan salah satunya untuk menampilkan datanya.
Langkah 1 - Membuat Route di Vue JS
Pertama kita akan menambahkan sebuah route terlebih dahulu, silahkan teman-teman buka file resources/js/app.js dan silahkan ganti kodenya menjadi seperti berikut ini :
require('./bootstrap');
window.Vue = require('vue');
import VueRouter from 'vue-router';
Vue.use(VueRouter);
import VueAxios from 'vue-axios';
import axios from 'axios';
import App from './App.vue';
Vue.use(VueAxios, axios);
import IndexComponent from './components/posts/Index.vue';
import CreateComponent from './components/posts/Create.vue';
import EditComponent from './components/posts/Edit.vue';
const routes = [
{
name: 'posts',
path: '/',
component: IndexComponent
},
{
name: 'create',
path: '/create',
component: CreateComponent
},
{
name: 'edit',
path: '/edit/:id',
component: EditComponent
}
];
const router = new VueRouter({
mode: 'history',
routes: routes
});
const app = new Vue(Vue.util.extend({ router }, App)).$mount('#app');
Kode di atas, kita mengimport beberapa library dan component yang akan kita gunakan dalam proses pembuatan CRUD nanti.
Kita juga sudah menambahkan beberapa route untuk beberapa proses, yaitu seperti menampilkan data, menyimpan data dan juga mengedit data.
Sekarang, silahkan teman-teman buka file resources/js/App.vue dan silahkan masukkan kode berikut ini :
<template>
<router-view></router-view>
</template>
<script>
export default {
}
</script>
Kode di atas fungsinya akan menampilkan route-route kita di layar browser dimana route-route ini kita sudah definisikan di dalam file resources/js/app.js
Langkah 2 - Proses Menampilkan Data
Sekarang kita akan coba menampilkan data dari API yang sebelumnya kita sudah buat, silahkan teman-teman buka file resources/js/components/posts/Index.vue dan masukkan kode berikut ini :
<template>
<div class="container mt-3">
<div class="row justify-content-center">
<div class="col-md-12">
<div class="card card-default">
<div class="card-header">POSTS</div>
<div class="card-body">
<router-link :to="{ name: 'create' }" class="btn btn-md btn-success">TAMBAH POST</router-link>
<div class="table-responsive mt-2">
<table class="table table-hover table-bordered">
<thead>
<tr>
<th>TITLE</th>
<th>KONTEN</th>
<th>AKSI</th>
</tr>
</thead>
<tbody>
<tr v-for="(post, index) in posts" :key="post.id">
<td>{{ post.title }}</td>
<td>{{ post.content }}</td>
<td class="text-center">
<router-link :to="{name: 'edit', params: { id: post.id }}" class="btn btn-sm btn-primary">EDIT</router-link>
<button @click.prevent="PostDelete(post.id, index)" class="btn btn-sm btn-danger">HAPUS</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
posts: []
}
},
created() {
let uri = `http://localhost:8000/api/posts`;
this.axios.get(uri).then(response => {
this.posts = response.data.data;
});
}
}
</script>
Bisa teman-teman lihat, disini kita mengambil data API dari http://localhost:8000/api/posts kemudian data tersebut kita parsingkan ke data posts.
Kurang lebih di bagian ini :
export default {
data() {
return {
posts: [] // mendefisikan variabel posts
}
},
created() {
let uri = `http://localhost:8000/api/posts`;
this.axios.get(uri).then(response => {
this.posts = response.data.data; //hasil response akan di masukkan ke variabel posts
});
}
}
Setelah data berhasil terambil, di dalam template HTML kita tinggal melakukan perulangan menggunakan direktif v-for. Kurang lebih kodenya seperti ini :
<tr v-for="(post, index) in posts" :key="post.id">
<td>{{ post.title }}</td>
<td>{{ post.content }}</td>
<td class="text-center">
<router-link :to="{name: 'edit', params: { id: post.id }}" class="btn btn-sm btn-primary">EDIT</router-link>
<button @click.prevent="PostDelete(post.id)" class="btn btn-sm btn-danger">HAPUS</button>
</td>
</tr>
Langkah 3 - Compile JavaScript
Terakhir, sebelum kita meilihat project kita, kita harus melakukan proses compile atau bundle file-file Vue JS kita ke dalam file app.js dengan bantuan Laravel MIX.
Silahkan teman-teman jalankan perintah di bawah ini untuk melakukan compile atau bundle :
npm run watch
Silahkan tunggu proses sampai selesai, ini akan memakan waktu lebih lama karena akan mengcompile semua file-file Vue dan JavaScript kita.
Langkah 4 - Mencoba Menjalankan Aplikasi
Oke, setelah proses compile selesai, silahkan sekarang teman-teman bisa jalankan laravel built in servernya dengan cara :
php artisan serve
Maka jika berhasil, kurang lebih tampilannya seperti berikut ini :
KESIMPULAN
Pada artikel kali ini kita semua sudah berhasil menambahkan beberapa route untuk aplikasi kita dan kita juga sudah berhasil menampilkan data dari API ke aplikasi kita.
Di artikel selanjutnya kita akan mencoba memasukkan data ke database menggunakan API dan kita akan menggunakan component yang sudah kita buat dengan Vue JS.
Terima Kasih.