Membuat Live Search Dengan Laravel dan Vue.js

Kali ini saya akan membagikan bagaimana cara membuat live search di Laravel dengan menggunakan Vue.js. Awalnya ketika saya coba menggunakan Vue.js itu memang sedikit sulit, akan tetapi setelah belajar lewat dokumentasi Vue.js ternyata itu sangat mudah digunakan dan dipelajari. Hal hasil live search yang saya buat sudah bisa digunakan dengan benar.

Daftar isi:

Menginstal Laravel
Membuat dan mempersiapkan skrip
Membuat rute Laravel
Konfigurasi basis data dan selesai

Hal yang perlu dipersiapkan untuk mengikuti tutorial ini, yaitu Laravel 7, Vue.js, Axios, dan Bulma. Pada tutorial kali ini saya menggunakan CDN untuk memanggil library vue.js, axios, dan bulma, agar lebih mudah dan cepat. Silakan ikuti tutorial dibawah ini.

Menginstal Laravel

Pertama kali yang harus di lakukan ialah menginstall Laravel dengan menggunakan perintah laravel secara global atau composer.

composer global require laravel/installer
laravel new laravel-search-vue.js

atau

composer create-project --prefer-dist laravel/laravel laravel-search-vue.js

Membuat dan mempersiapkan skrip

Berkas welcome.blade.php

Buka berkas welcome.blade.php pada direktori resources/views kemudian tempelkan skrip dibawah ini.

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Live Search Vue.js - Laravel</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.9.0/css/bulma.min.css">
</head>
<body>
    <div id="app">
        // skrip-1
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.2/axios.min.js"></script>
    <script>
        // skrip-2
    </script>
</body>
</html>

Skrip 1

Bagian ini untuk menampilkan semua pengguna dan kolom pencarian dengan desain yang sangat sederhana sebagai cara awal. Silakan tempelkan di bagian skrip-1.

<section class="section">
    <div class="container">
        <div class="field">
            <input v-model="search" type="search" class="input" placeholder="Cari user">
        </div>
        <div class="content mt-6">
            <div class="columns is-centered is-multiline">
                <div v-for="(user, index) in users" v-bind:key="index" class="column is-3">
                    <div class="card">
                        <div class="card-content has-text-centered">
                            <h1 class="title is-4">@{{ user.name }}</h1>
                            <h2 class="title is-6 is-subtitle">@{{ user.email }}</h2>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

Penjelasan: seperti biasanya ketika Anda ingin mengeluarkan semua data pengguna dengan foreach. Akan tetapi di Vue.js cukup menggunakan for yang bisa dilihat di skrip diatas. Menggunakan @{{}} jika Anda ingin memasukan variabel Javascript. Anda bisa menemukan di dokumentasi Laravel pada list Frontend - blade templates.

Skrip 2

Pada bagian ini dimana semua proses akan dilakukan di skrip Vue.js dan beberapa pendukung seperti axios dan underscore.js. Tempelkan skrip dibawah ini pada skrip-2.

new Vue({
    el: '#app',
    data: {
        search: '',
        users: []
    },
    mounted() {
        this.fetchUsers()
    },
    methods: {
        fetchUsers() {
            let param = _.isEmpty(this.search) ? 'all' : this.search
            axios.get('users/' + param).then(({ data }) => {
                this.users = data
            })
        }
    },
    watch: {
        search: _.debounce( function() {
            this.fetchUsers()
        }, 500)
    }
})

Penjelasan: fetchUsers() bertindak sebagai fungsi yang akan di panggil pertama kali pada mounted, semua itu akan mengeluarkan semua data pengguna. Pada saat melakukan pencarian fetchUsers() akan di proses pada watch. Hal ini terjadi jika Anda berhenti mengetik di kolom pencarian selama 0.5 detik.

Membuat rute Laravel

Selanjutnya membuat rute di berkas web.php pada direktori routes, silakan menambahkan baris baru untuk memasukan skrip dibawah ini:

use App\User;
...
Route::get('users/{search}', function($search) {
    if ($search == 'all') {
        return User::all();
    } else {
        return User::where('name', 'like', "%{$search}%")->get();
    }
});

Konfigurasi basis data dan selesai

Silakan buat basis data dengan nama yang bisa di sesuaikan, edit berkas .env untuk konfirgurasinya.

DB_DATABASE=laravel
DB_USERNAME=root
DB_PASSWORD=

Kemudian jalankan perintah artisan di terminal Anda. Hal ini akan membuat tabel bawaan dari laravel yang bisa di lihat pada direktori database/migrations.

php artisan migrate