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.
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