Halo artisan, pada kesempatan kali ini ilmu coding akan sharing tentang membuat fitur pagination di laravel 7 dan vue js. Pada tutorial ini akan disertai contoh program yang akan memudahkan Anda untuk mempraktikkannya. Sebab, dengan membaca artikel ini Anda akan belajar tentang:
- Cara menginstall vue pagination di laravel
- Penerapan vue pagination pada project yang kita buat
- … dan lain-lain.
Kenapa sih kita perlu menggunakan pagination? Sebab, pagination merupakan salah satu fitur yang berguna untuk mempercepat proses request data. Kita bisa menentukan jumlah data yang akan tampil sehingga hal ini dapat mempercepat loading website. Tidak hanya itu, masih banyak fungsi pagination yang cocok untuk diterapkan pada suatu website.
Yuk kita mulai saja tutorial ini.
Step 1 – Siapkan Project Laravel 7 dan Vue Js
Sejujurnya, saya ingin sekali memandu Anda dari awal pada tutorial ini. Namun, saya sudah memberikan tutorial yang sangat komplit. Yaitu tutorial crud menggunakan laravel 7 dan vue js. Jadi, saya akan menggunakan project ini saja sebagai bahan percobaan. Sebagai bonusnya, saya pun menjelaskan bagaimana membuat fitur CRUD yang bermanfaat untuk Anda.
Jika Anda belum membaca dan mempraktikkan tutorial crud menggunakan laravel 7 dan vue js, saya rasa Anda akan tertarik untuk membacanya terlebih dahulu.
Silahkan Praktikkan: Tutorial CRUD Menggunakan Laravel 7 dan Vue Js
Sudah berhasil mempraktikkan tutorial di atas?
Kalau sudah alhamdulillah. Sekarang kita akan masuk ke step berikutnya.
Step 2 – Modifikasi File Article Controller
Silahkan buka file ArticleController.php
dan cari baris kode berikut:
public function index() { $articles = \App\Article::all(); return $articles->toJson(); }
Ubah menjadi:
public function index() { $articles = \App\Article::paginate(2); return $articles->toJson(); }
Penjelasan:
Kita menggunakan pagination dengan jumlah data yang akan tampil sebanyak 2 data saja. Jika Anda ingin menambah jumlah data silahkan saja.
Step 3 – Install Package Laravel Vue Pagination
Silahkan masuk ke dalam direktori project Anda, kemudian install package laravel-vue-pagination
dengan perintah:
npm install laravel-vue-pagination
Perhatikan gambar di bawah ini:
Step 4 – Modifikasi File app.js
Buka kembali file app.js
. Tambahkan potongan kode di bawah ini untuk memasukan package laravel-vue-pagination
ke dalam project:
Vue.component('pagination', require('laravel-vue-pagination'));
Step 5 – Modifikasi File ArticleIndex.vue
Buka kembali file ArticleIndex.vue
yang terdapat pada direktori resources/js/components
. Kemudian modifikasi kodenya sebagai berikut:
<template> <div class='container py-4'> <div class='row justify-content-center'> <div class='col-md-8'> <div class='card'> <div class='card-header'>All Article</div> <div class='card-body'> <router-link :to="{ name: 'create' }" class="btn btn-primary">Create new article</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 width="200" class="text-center">Action</th> </tr> </thead> <tbody> <tr v-for="(article, index) in articles.data" :key="article.id"> <td width="50" class="text-center">{{ index + 1 }}</td> <td>{{ article.title }}</td> <td width="200" class="text-center"> <div class="btn-group"> <router-link :to="{name: 'show', params: { id: article.id }}" class="btn btn-primary">Detail</router-link> <router-link :to="{name: 'edit', params: { id: article.id }}" class="btn btn-success">Edit</router-link> <button class="btn btn-danger" @click = "deletePost(article.id)">Delete</button> </div> </td> </tr> </tbody> </table> </div> <pagination :data="articles" @pagination-change-page="getResult"></pagination> </div> </div> </div> </div> </div> </template> <script> export default { data() { return { articles: {} } }, created() { this.getResult(); }, methods: { getResult(page){ let uri = 'api/articles?page=' + page; this.axios.get(uri).then(response => { return response.data; }).then(data => { this.articles = data; }); }, deletePost(id) { this.$swal.fire({ title: 'Apakah kamu yakin?', text: "Jika kamu hapus, maka data tidak akan kembali lagi.", icon: 'warning', showCancelButton: true, confirmButtonColor: '#3085d6', cancelButtonColor: '#d33', confirmButtonText: 'Hapus Deh', cancelButtonText: 'Nggak Jadi' }).then((result) => { if (result.value) { this.$swal.fire({ title: 'Success!', text: 'Article deleted successfully', icon: 'success', timer: 1000 }); let uri = `api/article/delete/${id}`; this.axios.delete(uri).then(response => { this.articles.splice(this.articles.indexOf(id), 1); }); console.log("Deleted article with id ..." +id); } }) } } } </script>
Penjelasan:
Perubahan ke 1: pada baris 21 kita mengubah kode in articles
menjadi in articles.data
.
Script yang saya maksudkan yaitu bagian ini:
<tr v-for="(article, index) in articles.data" :key="article.id">
Perubahan ke 2: pada baris ke 35 kita menambahkan script di bawah ini untuk memunculkan pagination bootstrapnya.
<pagination :data="articles" @pagination-change-page="getResult"></pagination>
Perubahan ke 3: terjadi pada bagian created dan method pada baris ke 50 sd 62. Saya memodifikasi kedua bagian tersebut agar bisa memanfaatkan pagination di laravel 7 dan vue js.
... ... created() { this.getResults(); }, methods: { getResults(page){ let uri = 'api/articles?page=' + page; this.axios.get(uri).then(response => { return response.data; }).then(data => { this.articles = data; }); }, ... ... }
Step 6 – Lakukan Sinkronisasi File
Langkah terakhir, silahkan lakukan sinkronisasi file dengan mengetik perintah berikut ini:
npm run dev
Jika sudah, silahkan aktifkan web server Anda. Nyalakan apache dan mysqlnya. Kemudian ketik perintah berikut ini:
php artisan serve
Jika berjalan dengan lancar, maka hasilnya adalah:
Apa Selanjutnya?
Alhamdulillah tutorial membuat fitur pagination menggunakan laravel 7 dan vue js sudah selesai. Tapi jangan puas dulu, sebab masih banyak yang perlu kita pelajari.
Misalnya:
- Infinite Scrolling
- Templating
- dan masih banyak lagi
… dan saya sangat berharap, semoga dalam mempraktikkan tutorial ini tidak terjadi error. Pastikan sudah mengikuti arahan tutorial ini dengan baik.
Namun jika Anda benar-benar kesulitan, silahkan tanyakan dengan jelas pada kolom komentar.
Anda juga bisa mempelajari source code di bawah ini untuk melihat perubahan-perubahan apa saja yang saya lakukan.
Semoga tutorial ini bermanfaat dan selamat belajar …
Article nya sangat bermanfaat. buat saya yang awal belajar vue dan laravel.
Next, boleh share tutorial tentang upload image laravel dan vue mas.
Terimakasih
Unknown custom element: – did you register the component correctly? For recursive components, make sure to provide the “name” option.
found in
Kenapa ya mas?
sudah solve, makasih..
sorry my false