Membuat Fitur Loadmore di Laravel 7 dan Vue Js

Hari ini, saya akan sharing tentang fitur loadmore menggunakan Laravel 7 dan Vue Js. So, Sebenernya loadmore ini adalah pengembangan dari pagination. Jadi, loadmore ini konsepnya tidak jauh berbeda dengan pagination.

Agar cara membuat fitur loadmore di Laravel 7 dan Vue Js berjalan dengan lancar, mari ikuti step by step di bawah ini:

Step 1 – Siapkan Komponen Installasi

Ada beberapa tools yang saya gunakan, yaitu:

Webserver (Laragon), Optional XAMPP, WAMP, Nginx dan lain-lain.
Composer
Node Js

Silahkan install komponennya jika belum memiliki salah satu dari komponen di atas.

Step 2 – Install Laravel 7 dengan Composer

Pada saat tutorial ini ditulis, versi terbaru dari Laravel itu sendiri adalah versi ke 7. Jadi, cukup mudah menginstallnya tanpa harus menyertakan versionnya.

Oke, langsung saja ketik perintah ini melalui composer:

composer create-project --prefer-dist laravel/laravel laravel7_loadmore_vuejs

Setelah itu masuk ke direktori project dengan mengetik:

cd laravel7_loadmore_vuejs

Step 3 – Install Node Js dan Package Pendukung

Setelah masuk ke dalam direktori project, silahkan ketik perintah berikut ini untuk menginstall package laravel ui:

composer require laravel/ui

Mulai versi ke 6 dan sekarang ke 7, Laravel telah memisahkan antara backend dengan UI. So, kita bisa memilih menggunakan bootstrap, react js atau vue js. Mantap.

Kemudian, silahkan ketik perintah berikut untuk menginstall komponen Vue Js di project kita:

php artisan ui vue

Setelah melakukan perintah di atas, kita akan diminta untuk mengetik npm install && npm run dev. Namun kali ini, kita akan melakukan npm install terlebih dahulu.

Ketik:

npm install

Selanjutnya kita akan menginstall Vue Axios untuk menghandle HTTP Request sebagai penghubung antara Backend dan Frondend.

Ketik perintah berikut ini:

npm install vue-axios

Kemudian kita membutuhkan Vue Router untuk menghandle perubahan page per page. Silahkan ketik perintah berikut:

npm install vue-router

Saya pun membutuhkan momentjs karena di field yang akan tampil (contohnya created at), akan di custom tampilannya. Untuk menghandlenya, ketik perintah berikut ini:

npm install moment --save

Oke, sampai di sini persiapannya sudah hampil selesai. Now, kita akan masuk ke bagian Laravelnya.

Step 4 – Tambahkan Route Web dan Api

First, silahkan buka file web.php yang ada di dalam direktori routes/web.php. For example, saya akan menambahkan script di bawah ini:

Route::get('/{any}', function () {
    return view('app');
})->where('any', '.*');

Second, kita akan menambahkan beberapa script di bawah ini pada api.php yang ada di direktori routes/api.php. So, ketik kode berikut ini:

Route::get('/user', 'Api\UserController@index');

Oke, selesailah tahapan ini.

Step 5 – Buat View Utama

Walaupun kita menggunakan Vue Js, tetap saja di Laravel 7 kita membutuhkan vie utama yang berfungsi sebagai template. For example, saya akan membuat file baru bernama app.blade.php dan simpan di resources/views. Silahkan ketik kode berikut:

<!DOCTYPE html>

<html lang="{{ app()->getLocale() }}">

<head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- CSRF Token -->

    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>Laravel 7 Loadmore with Vue Js</title>

    <!-- Styles -->

    <link href="{{ asset('css/app.css') }}" rel="stylesheet">

</head>

<body>

    <div id="app"></div>

    <script src="{{ asset('js/app.js') }}"></script>

</body>

</html>

Step 6 – Buat API Controller User

Sekarang kita akan membuat sebuah controller yang kita tujukan khusus menangani API. Silahkan ketik perintah berikut:

php artisan make:controller Api/UserController

So, kita buka file yang baru saja kita buat dan modifikasi sebagai berikut:

<?php

namespace App\Http\Controllers\Api;

use App\Http\Controllers\Controller;

use Illuminate\Http\Request;

use Illuminate\Http\JsonResponse;

class UserController extends Controller

{

    public function index(Request $request): JsonResponse

    {

        $users = \App\User::orderBy('name')->simplePaginate((int) $request->get('limit', 10));

        return response()->json($users)->withCallback($request->callback);

    }

}

Konsep loadmore sendiri berbeda dari pagination. Jika di pagination kita menampilkan data yang lain dan menghilangkan data sebelumnya. But, di loadmore justru kita tidak menghilangkan tampilan sebelumnya. Justru malah menambahkan data berikutnya.

Karena itu, saya menggunakan Request $request setiap kali ada permintaan tampilan data dari client.

Kemudian pada method withCallback($name) berfungsi untuk merender output yang kita inginkan menjadi JSONP. JSONP memiliki fungsi untuk menghindari kesalahan cross domain dari AJAX request apabila frontend dan backend berada di domain yang berbeda. Output JSONP akan dieksekusi jika menerima request dengan nama callback, seperti query string ?callback=users misalnya. (Sumber: Medium Laravel Id)

Meski begitu, Anda juga dapat menulis method callback sebagai berikut:

return response()->jsonp($request->callback, $user);

Step 7 – Create Data Dummy

Kita membutuhkan minimal 100 data dummy untuk mendukung fitur loadmore ini. So, langsung saja ketik perintah berikut ini:

php artisan make:seeder UserSeeder

Kemudian buka file UserSeeder.php yang ada di direktori database/seeds. For example, saya akan memodifikasi filenya sebagai berikut:

<?php

use Illuminate\Database\Seeder;

class UserSeeder extends Seeder

{

    /**

     * Run the database seeds.

     *

     * @return void

     */

    public function run()

    {

        factory(App\User::class, 100)->create();

    }

}

Kode di atas berguna untuk menggenerate 100 data dummy for users.

Jadi, Anda perlu membuat database bernama laravel7_loadmore_vue.

Kemudian buka file .env dan modifikasi bagian konfigurasi databasenya. For example, ketik kode berikut:

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravel7_loadmore_vuejs
DB_USERNAME=root
DB_PASSWORD=

So, silahkan ketik perintah berikut untuk memigrasi database:

php artisan migrate

Setelah berhasil migrate table users. Sekarang kita akan migrate data dummy dengan perintah:

php artisan db:seed --class="UserSeeder"

Jika sukses, di database Anda akan terdapat 100 data user.

Step 8 – Cek API melalui Postman

Cobalah untuk mengecek apakah API yang sudah kita buat berjalan dengan lancar atau belum.

Silahkan ketik perintah berikut ini:

php artisan serve

Kemudian buka URL berikut ini dengan method GET di Postman:

localhost:8000/api/user

Jika berhasil dan tidak ada error, ini lah hasilnya:

Membuat Fitur Loadmore di Laravel 7 dan Vue Js - Cek API

Jika sudah tampil seperti di atas, kita sudah siap untuk masuk ke bagian Vue Js nya.

Step 9 – Menyiapkan dan Memodifikasi Component Vue Js

Pertama-tama, silahkan lihat structur project di bawah ini:

Membuat Fitur Loadmore di Laravel 7 dan Vue Js - Structure Project

Component yang kita tambahkan atau modifikasi adalah file app.js, file components/App.vue dan components/user/Index.vue.

So, mari kita mulai dari app.js, berikut isi kodenya:

/**

 * First we will load all of this project's JavaScript dependencies which

 * includes Vue and other libraries. It is a great starting point when

 * building robust, powerful web applications using Vue and Laravel.

 */

require('./bootstrap');

window.Vue = require('vue');

import VueRouter from 'vue-router';

import VueAxios from 'vue-axios';

import axios from 'axios';

import moment from 'moment';

import App from './components/App.vue';

import UserIndex from './components/user/Index.vue';

Vue.filter('formatDate', function(value) {

  if (value) {

    return moment(String(value)).format('DD/MM/YYYY');

  }

});

Vue.use(VueRouter);

Vue.use(VueAxios, axios);

const routes = [

  {

      name: 'home',

      path: '/',

      component: UserIndex

  }

];

const router = new VueRouter({ mode: 'history', routes: routes});

const app = new Vue(Vue.util.extend({ router }, App)).$mount('#app');

Kemudian pada file App.vue silahkan ketik kode berikut:

<template>

    <div class="page">

        <nav class='navbar navbar-dark bg-dark'>

            <div class='container'>

                <router-link :to="{ name: 'home' }" class="navbar-brand">Ilmu Coding</router-link>

            </div>

        </nav>

        <router-view></router-view>

    </div>

</template>

Kemudian pada file user/Index.vue silahkan ketik kode 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 User</div>

                <div class='card-body'>

                    <div class="table-responsive">

                        <table class="table table-bordered table-hover">

                            <thead>

                                <tr>

                                    <th width="50" class="text-center">No</th>

                                    <th>Name</th>

                                    <th>Email</th>

                                    <th>Created At</th>

                                </tr>

                            </thead>

                            <tbody>

                                <tr v-for="(user, index) in users.data" :key="user.id">

                                    <td width="50" class="text-center">{{ index + 1 }}</td>

                                    <td>{{ user.name }}</td>

                                    <td>{{ user.email }}</td>

                                    <td>{{ user.created_at | formatDate}}</td>

                                </tr>

                            </tbody>

                        </table>

                    </div>

                    <div v-if="users.next_page_url" class="card-footer">

                        <button @click.prevent="paginate(users.next_page_url)" type="button" class="btn btn-primary btn-block">Load More</button>

                    </div>

                </div>

            </div>

            </div>

        </div>

        </div>

</template>

<script>

export default {

    data() {

        return {

          users: {}

        }

    },

    created() {

            this.paginate();

    },

    methods: {

        paginate(url = ''){

            this.axios.get(url ? url : 'api/user')

            .then(response => {

                if(!this.users.data){

                    this.users = response.data;

                }

                else {

                    this.users.data.push(...response.data.data)

                    this.users.next_page_url = response.data.next_page_url

                }

            }).catch(error => console.log(error));

        }

    }

  }

</script>

Selesai. Setelah ini kita bisa melakukan testing.

Step 10 – Compiling dan Testing

Sebelum menjalankan project, pastikan Anda mengetik perintah berikut untuk penyesuaian Vue js di project kita:

npm run dev

Kemudian jika belum, lakukan perintah ini untuk menjalankan project:

php artisan serve

Jika berjalan dengan lancar, silahkan buka URL berikut:

localhost:8000

Maka hasilnya adalah:

Membuat Fitur Loadmore di Laravel 7 dan Vue Js - Final

Silahkan lakukan ujicoba dengan mengetik tombol loadmore.

Apa Selanjutnya?

Alhamdulillah tutorial membuat fitur loadmore menggunakan Laravel 7 dan Vue js sudah selesai. But, jangan puas dulu.

Sebab Anda juga bisa mempelajari tutorial lainnya mengenai Laravel di Ilmu Coding.

Oh iya, source code tutorial ini bisa Anda download melalui link Github di bawah ini:

Download Source Code

Oke, semoga tutorial kali ini bermanfaat dan selemat belajar.

This is default featured slide 1 title

This is default featured slide 2 title

This is default featured slide 3 title

This is default featured slide 4 title

This is default featured slide 5 title