Membuat Fitur Pagination di Laravel 7 dan Vue Js

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:

1. Cara menginstall vue pagination di laravel
2. Penerapan vue pagination pada project yang kita buat
3. … 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:

1. Infinite Scrolling
2. Templating
3. 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.

New Commit – Add Pagination

Semoga tutorial ini bermanfaat dan selamat belajar …

Related posts:

Tutorial Lengkap Membuat Component di Laravel Livewire

Pengenalan dan Cara Install Laravel Livewire SPA

Membuat Fitur Loadmore di Laravel 7 dan Vue Js