Membuat fitur pagination dengan Laravel dan VueJs. Halo artisan lovers, pada kesempatan kali ini JogjaTech.com akan sharing tentang membuat fitur pagination di Laravel dan VueJs. Secara default, saat menjalankan instalasi project dengan framework Laravel, modul jQuery dan VueJs sudah masuk dalam paket instalasinya. Hal ini bisa kita jumpai pada daftar modul NodeJs yang disertakan dan dapat kita lihat pada berkas boostrap.js dalam direktori “resources/views/js”. Dimana berkas ini dimasukkan ke dalam berkas app.js dalam direktori “resources/asset/js”, kemudian dikompilasi jadi satu menggunakan Laravel Mix (Webpack) menjadi berkas “public/js/app.js”. Dan bisa kita jumpai juga modul NodeJs lainnya yang dikompilasi, kita dapat melihatnnya pada berkas webpack.mix.js pada root direktori project.
Tutorial membuat paging dengan Laravel dan VueJs ini merupakan rangkaian dari pembahasan tutorial Step by Step Tutorial Laravel dan Vue Js Membuat CRUD SPA (Single Page Application). Dimana pada tutorial sebelumnya kita telah berhasil membuat CRUD SPA menggunakan Laravel mix VueJs, maka pada tutorial ini saya akan mencoba melanjutkan dengan menambahkan pagination pada data yang kita tampilkan ke dalam view.
Beberapa Alasan Mereka Memilih VueJs
Oke teman-teman, sebelum saya lanjutkan ke pembahasan pembuatan fitur pagination dengan Laravel dan VueJs. Disini akan saya uraikan beberapa alasan mereka yang memilih VueJs dibandingkan framework lainnya.
- Sederhana
Sederhana adalah alasan yang mendasari mengapa banyak memilih VueJs, simple dan tidak ribet, mulai dari vue components, sintax yang pendek dan tidak ribet dan alasan lainnya sampai integrasi yang mudah.
- Fleksibel
Membuat aplikasi dari skala kecil sampai ke skala yang besar bisa dilakukan dengan Vue. Untuk penulisan scriptnya juga sangat fleksibel. Bisa memakai ES5, ES6, bahkan TypeScript. Vue juga memberikan kebebasan bagi developer untuk mengembangkannya.
- Dukungan Dokumentasi
Setiap dukungan dokumentasi adalah satu yang penting dalam perubahan dan pengembangan. Vue.js memberikan dukungan yang sangat lengkap dan sangat detail, mudah dimengerti dan yang tak kalah penting adalah Vue memberikan contoh kode dan hasilnya.
- Modern
Vue hadir dengan dukungan teknologi, library, dan tools yang baru serta kekinian dan modern seperti ES6, Webpack, dan lainnya.
- Dukungan Komunitas
Komunitas di Vue sudah terbentuk, Vue.js berkembang dari tahun ke tahun, bahkan even di dalam maupun di luar negeri.
- Ekosistem Yang kuat
Vue yang berkembang dari tahun ke tahun membentuk sebuah ekosistem yang kuat, banyak dukungan seperti referensi, tutorial, libraries, maupun dokumentasi pekerjaan dari para developer yang bisa kita jumpai.
Membuat Fitur Pagination Dengan Laravel dan VueJs
Karena tutorial Laravel pagination Vus Js kali ini merupakan tutorial lanjutan dari sebelumnya, jadi kita tidak perlu repot-repot lagi melakukan instalasi project dari awal. Yang kita butuhkan adalah mengaktifkan fitur pagination, oke lakukan instalasi laravel-vue-pagination, seperti berikut.
Install Package laravel-vue-pagination
Untuk kebutuhan pagination dengan Laravel dan VueJs, pertama-tama adalah kita perlu menginstall dependensi yang dibutuhkan. Buka jendela Terminal/ Command Prompt lalu arahkan ke direktori project, kemudian jalankan perintah instalasi berikut:
npm install laravel-vue-paginationModifikasi File app.js
Langkah selanjutnya adalah kita perlu memodifikasi file app.js dan kita sisipkan potongan kode dibawah ini untuk menambahkan package laravel-vue-pagination ke dalam project.
Vue.component('pagination', require('laravel-vue-pagination')); Memodifikasi File Controller BukuController.php
Buka file controller BukuController.php pada folder “app\Http\Controllers”, lalu lakukan sedikit modifikasi pada method index() seperti berikut:
public function index()
{
$buku = Buku::all()->toArray();
return array_reverse($buku);
}Menjadi seperti berikut:
public function index()
{
$buku = Buku::paginate(5)->toArray();
return array_reverse($buku);
}Modifikasi file BukuAll.vue
Kemudian kita lakukan modifikasi file components BukuAll.vue pada direktori “resources/js/components/BukuAll.vue, lalu rubahlah kodenya sehingga menjadi seperti berikut.
Disini saya melakukan modifikasi pada kode berikut:
<tr v-for="(buku, all) in buku" :key="buku.id">Menjadi seperti berikut:
<tr v-for="(buku, all) in buku.data" :key="buku.id">Kemudian saya lakukan penambahan untuk paging seperti berikut
<pagination :data="buku" @pagination-change-page="getResult"></pagination>Lalu pada script saya lakukan modifikasi seperti berikut, sehingga secara lengkap akan atampak seperti berikut:
<template>
<div class='container py-2'>
<div class='row justify-content-center'>
<div class='col-md-12'>
<div class='card'>
<div class='card-header'>Daftar Nama Buku</div>
<div class='card-body'>
<router-link :to="{ name: 'create' }" class="btn btn-primary">Tambah</router-link>
<br/>
<br/>
<div class="table-responsive">
<table class="table table-bordered table-hover">
<thead>
<tr>
<th width="50" class="text-center">No</th>
<th>Title</th>
<th>Author</th>
<th width="200" class="text-center">Action</th>
</tr>
</thead>
<tbody>
<tr v-for="(buku, all) in buku.data" :key="buku.id">
<td width="50" class="text-center">{{ all + 1 }}</td>
<td>{{ buku.name }}</td>
<td>{{ buku.author }}</td>
<td width="200" class="text-center">
<div class="btn-group">
<router-link :to="{name: 'edit', params: { id: buku.id }}" class="btn btn-xs btn-success">Edit</router-link>
<button class="btn btn-xs btn-danger" @click = "hapusBuku(buku.id)">Hapus</button>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<pagination :data="buku" @pagination-change-page="getResult"></pagination>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
buku: {}
}
},
/*
created() {
let uri = 'api/buku';
this.axios.get(uri).then(response => {
this.buku = response.data;
});
},
*/
created() {
this.getResult();
},
methods: {
getResult(page){
let uri = 'api/buku?page=' + page;
this.axios.get(uri).then(response => {
return response.data;
}).then(data => {
this.buku = data;
});
},
hapusBuku(id)
{
this.$swal.fire({
title: 'Yakin menghapus data?',
icon: 'warning',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Ya Hapus',
cancelButtonText: 'Batal'
}).then((result) => {
if (result.value) {
this.$swal.fire({
title: 'Success!',
text: 'Data sukses dihapus',
icon: 'success',
timer: 1000
});
let uri = `api/buku/delete/${id}`;
this.axios.delete(uri).then(response => {
//this.buku.splice(this.buku.indexOf(id), 1);
let i = this.buku.map(buku => buku.id).indexOf(id); // find index of your object
this.buku.splice(i, 1)
});
}
})
}
}
}
</script>Compiling/ Sinkronisasi File
Langkah terakhir adalah melakukan sinkronisasi file dengan melakukan compiling dengan perintah berikut:
npm run devJika tahap diatas sudah kita lengkapi, langkah selanjutnya adalah melakukan testing pada aplikasi, buka kembali jendela Terminal/ Command Prompt lalu jalankan perintah berikut
php artisan serveJika berjalan dengan baik, maka akan ditampilkan hasil seperti berikut:
Before:
After:
Kesimpulan:
Dengan membaca tutorial ini dan mempraktikannya, maka kita telah berhasil membuat aplikasi CRUD SPA dengan Laravel dan VueJs beserta fitur pagination didalamnya.
Semoga tutorial kali ini bisa membantu dan memberi manfaat bagi yang membutuhkan. Jika terdapat kesalahan pada pengetikan kode atau terjadi error harap diskusikan dengan menyertakan pertanyaan yang jelas pada kolom komentar.
Terimakasih..
