Cara Mudah Membuat Load More atau Infinite Scroll di Laravel 8 dengan VueJS

Cara Mudah Membuat Load More atau Infinite Scroll di Laravel 8 dengan VueJS

Admin
Admin・ 7 Juni 2021
11 min read ・ 485 views
Series: Laravel VueJS

Infinite Scroll Laravel VueJS - Jika pada artikel sebelumnya saya sudah membagikan artikel tentang bagaimana cara membuat load more on scroll atau infinite scroll dengan laravel 8 dan livewire, maka pada artikel kali ini saya akan membagikan artikel dengan topik bagaimana cara membuat load more atau infinite scroll di laravel 8 dengan vuejs. Memang sama-sama fitur infinite scroll, namun berbeda teknologi yang digunakan.

Baca: Tutorial Membuat Load More on Scroll atau Infinite Scroll dengan Laravel Livewire

Sekilas tentang fitur load more atau infinite scroll atau bisa juga dibilang gulir tak terbatas, biasa dipakai atau digunakan web-web besar type media sosial seperti twitter, facebook atau instagram. fitur tersebut merupakan fitur yang memungkinkan user terus scroll ke bawah seperti tanpa batas. Jadi ketika kita scroll ke bawah terus, konten-konten akan terus bermunculan. Cara kerjanya sebenarnya mirip dengan pagination, bedanya dengan infinite scroll tidak perlu klik nav button untuk berpindah halaman.

Mulai Koding Membuat Infinite Scroll Laravel VueJS

Baiklah, mari kita mulai latihan membuat infinite scroll menggunakan laravel versi 8 dan Vue JS.

Install Laravel

composer create-project laravel/laravel infinite-scroll-laravel-vuejs

Kita awali percobaan membuat infinite scroll dengan install laravel versi terbaru via composer. Buka terminal, kemudian jalankan perintah seperti di atas. Disini kita akan install laravel project dengan nama infinite-scroll-laravel-vuejs

Buat Database

Setelah selesai proses installasi laravel project, silahkan lanjutkan dengan membuat database baru. Karena saya memakai XAMPP sebagai local server, maka saya akan membuat database baru di phpMyAdmin dengan nama infinite-scroll-laravel-vuejs.

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=infinite-scroll-laravel-vuejs
DB_USERNAME=root
DB_PASSWORD=

Jika sudah membuat database baru, jangan lupa untuk menyesuaikan DB configuration pada file .env (sesuaikan dengan database kamu).

Buat File Model & Migration

php artisan make:model Post -m

Kita lanjutkan dengan membuat file post model dan migration dengan perintah artisan seperti di atas. Dengan perintah tersebut, secara otomatis akan membuat file model yang terletak di App/Models/Post dan migration yang terletak di database/migration/ [timestamp] _create_posts_table.php.

<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

class CreatePostsTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('posts', function (Blueprint $table) {
            $table->id();
            $table->string('title');
            $table->text('desc');
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('posts');
    }
} 

Kemudian di file migration kita perlu menambahkan field baru yaitu title dan desc. Sehingga secara keseluruhan, kode di file create_posts_table.php akan seperti di atas. Jika sudah, sekarang jalankan php artisan migrate.

Membuat Dummy Data dengan Factory

php artisan make:factory PostFactory --model=Post

Jalankan perintah artisan seperti di atas untuk membuat file PostFactory dengan model Post.

<?php

namespace Database\Factories;

use App\Models\Post;
use Illuminate\Database\Eloquent\Factories\Factory;

class PostFactory extends Factory
{
    /**
     * The name of the factory's corresponding model.
     *
     * @var string
     */
    protected $model = Post::class;

    /**
     * Define the model's default state.
     *
     * @return array
     */
    public function definition()
    {
        return [
            'title' => $this->faker->sentence(),
            'desc' => $this->faker->sentence(),
        ];
    }
} 

Buka file PostFactory.php yang terletak di dalam folder database/factories, kemudian sesuaikan kode yang ada dengan kode seperti di atas. Dengan kode tersebut kita akan membuat data dummy untuk field title dan desc di tabel posts.

php artisan tinker
Post::factory()->count(100)->create()

Kemudian jika sudah, sekarang buka terminal kembali dan jalankan perintah seperti di atas secara berurutan. Jadi dengan perintah di atas, kita akan menggunakan tinker untuk menjalankan factory. Disini saya mencontohkan untuk membuat data dummy table posts sebanyak 100 data.

Tambah Route

Route::get('posts', function (Request $request) {
    $data = Post::latest()->paginate(12);
    return response()->json($data);
}); 

Kita perlu membuat route baru untuk memanggil data-data posts. Copy kode di atas lalu paste di file routes/web.php, jangan lupa untuk menambahkan use Illuminate\Http\Request; dan  use App\Models\Post;. Dengan kode di atas, kita akan menampilkan card yang berisikan data post sebanyak 12 data saat pertama kali kita membuka website atau laravel project kita. Baru kemudian, card atau konten akan terus bertambah saat kita scroll ke bawah.

<?php

use Illuminate\Support\Facades\Route;
use Illuminate\Http\Request;
use App\Models\Post;
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/

Route::get('/', function () {
    return view('welcome');
});

Route::get('posts', function (Request $request) {
    $data = Post::latest()->paginate(12);
    return response()->json($data);
}); 

Sehingga sekarang secara keseluruhan, routes/web.php kita akan seperti kode di atas.

Install Laravel Vue UI

composer require laravel/ui
php artisan ui vue
npm install && npm run dev

Selanjutnya kita perlu install laravel ui package yang akan kita gunakan untuk membuat fitur load more atau infinite scroll. Jalankan perintah-perintah di atas secara berurutan.

Install Vue Infinite Loading Package

npm install vue-infinite-loading

Kemudian kita akan menjalankan npm install vue-infinite-loading. Sekilas tentang vue infinite loading package, package ini merupakan plugin infinite scroll yang berguna atau bisa digunakan untuk aplikasi yang dibuat menggunakan vuejs. Package ini merupakan solusi cepat jika ingin membuat fitur load more atau infinite scroll.

Beberapa poin kelebihan dari Vue Infinite Loading Package ini antara lain:

  • Out of the box. Clear API, internal spinners dan kompatibilitas yang lebih baik, siap untuk produksi.
  • Dukungan 2 arah, yang artinya untuk saat ini package ini dapat mendukung untuk arah atas dan arah bawah, dapat disesuaikan dengan skenario yang berbeda.
  • Tampilan hasil pemuatan yang dapat dikonfigurasi, misalnya tidak ada lagi data, tidak ada hasil dan lain-lain.

Sumber: peachscript.github.io/vue-infinite-loading

Setup Vue JS

<template>
    <div>
        <div class="card mb-3" v-for="post in Posts" :key="post.id">
            <div class="card-body">
                <p>{{post.title}}</p>
                <blockquote class="blockquote mb-0">
                    <p>{{post.title}}</p>
                    <footer class="blockquote-footer">{{post.desc}}</footer>
                </blockquote>
            </div>
        </div>
        <infinite-loading @distance="1" @infinite="handleLoadMore"></infinite-loading>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                Posts: [],
                page: 1,
            };
        },
        methods: {
            handleLoadMore($state) {
    
                this.$http.get('/posts?page=' + this.page)
                    .then(res => {
                        return res.json();
                    }).then(res => {
                        $.each(res.data, (key, value) => {
                            this.Posts.push(value);
                        });
                        $state.loaded();
                    });
    
                this.page = this.page + 1;
            },
        },
    }
</script>

Buat file component vuejs di resources/js/components dengan nama InfiniteScrollComponent.vue kemudian copy semua kode di atas dan paste di file component vuejs yang baru saja dibuat tersebut.

npm install vue-resource

Selanjutnya install vue-resource package untuk mengaktifkan vue single components.

/**
 * 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').default;
import VueResource from 'vue-resource';

Vue.use(VueResource);
/**
 * The following block of code may be used to automatically register your
 * Vue components. It will recursively scan this directory for the Vue
 * components and automatically register them with their "basename".
 *
 * Eg. ./components/ExampleComponent.vue -> <example-component></example-component>
 */

// const files = require.context('./', true, /\.vue$/i)
// files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default))

Vue.component('infinite-scroll-component', require('./components/InfiniteScrollComponent.vue').default);
Vue.component('InfiniteLoading', require('vue-infinite-loading'));


/**
 * Next, we will create a fresh Vue application instance and attach it to
 * the page. Then, you may begin adding components to this application
 * or customize the JavaScript scaffolding to fit your unique needs.
 */

const app = new Vue({
    el: '#app',
}); 

Kemudian buka file di resources/js/app.js, di file ini kita perlu mendaftarkan vue js component. Sesuaikan kode yang ada dengan kode di atas.

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" value="{{ csrf_token() }}" />
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">

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

    <title>Load More atau Infinite Scroll Laravel 8 Vuejs</title>
  </head>
  <body>
    <div class="container">
        <div class="row pt-5">
            <div class="text-center">
                <h1>Load More atau Infinite Scroll Laravel 8 Vuejs</h1>
            </div>
        </div>
        <div class="row pt-3" id="app">
            <infinite-scroll-component></infinite-scroll-component>
        </div>
    </div>
  </body>
</html>

Oke, sekarang silahkan buka file welcome.blade.php, copy semua kode di atas lalu paste atau replace di file welcome.blade.php. Disini saya memakai styling dari bootstrap dan memanggil infinite-scroll-component di dalam body.

Pengujian Load More atau Infinite Scroll Laravel Vuejs

Setelah melewati proses panjang mulai dari install laravel, membuat data dummy untuk data posts, install laravel vue ui, install vue infinite loading package sampai setup vuejs component, sekarang seharusnya kalau kita coba jalankan infinite scroll project di browser maka fitur load more atau infinite scroll sudah berfungsi dengan baik.

Kesimpulan

Dengan Vue Infinite Loading Package, kita dapat dengan mudah dan cepat untuk membuat fitur load more on scroll atau infinite scroll atau bisa juga dibilang gulir tak terbatas dengan laravel vuejs.

Kita akhiri artikel ini sampai disini, jika teman-teman punya kritik, saran atau apapun itu yang ingin didiskusikan, silahkan teman-teman tulis komentar tersebut pada form komentar yang tersedia di bawah ini. Selamat mencoba dan sampai jumpa di artikel berikutnya.

 

 

Web illustrations by Storyset

Tinggalkan Komentar
Loading Comments