Live Search Dengan Laravel dan Vue.js
Live Search Dengan Laravel dan Vue.js

Membuat Live Search Dengan Laravel dan Vue.js

profil
Febri Hidayan
14 December 2020 ยท Baca 7 menit

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:

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.

Baca juga: Membuat Login dan Register Laravel

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.

Baca juga: Cara Kirim Email Di Laravel

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.

Baca juga: Cara Menginstall Laravel di Windows

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

Baca juga: Tutorial PHP Untuk Pemula

Tips: Agar tabel users terisi dengan data palsu sebagai uji coba bisa memanfaatkan laravel tinker, ikuti cara berikut:

php artisan tinker

Kemudian tempelkan perintah berikut untuk menambah pengguna sebanyak 10 atau bisa disesuaikan berapa banyak jumlah pengguna yang akan dibuat.

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

Silanjutnya tinggal menjalankan laravel serve di terminal Anda dengan host http://127.0.0.1:8000 yang dijalankan di browser Anda.

php artisan serve

Setelah ini akan melihat betapa mengasikan live search yang baru saja di buat. Anda bisa mendapatkan kode sumber di akun github saya.

https://github.com/febrihidayan/live-search-laravel-dan-vue.js


profil

DITULIS OLEH

Febri Hidayan

Belajar dari sekarang untuk meningkatkan ilmu dan karirmu. Amati Tiru Modifikasi