Fitru pencarian merupakan fitur yang sangat penting di dalam membangun sebuah aplikasi web yang menyajikan data yang terlalu banyak. Fitur ini akan menyaring informasi sesuai dengan kebutuhan dari user atau pengguna aplikasi. Dalam materi komprehensif kali ini kita akan membuat fitur pencarian otomatis dengan laravel 11.
Langkah membuat fitur pencarian otomatis
1. Install Laravel
Buka terminal dan ketikkan perintah berikut
composer create-project laravel/laravel laravel-autocomplete
Perintah di atas berguna untuk mendownload laravel versi terbaru. Projek kita kali ini kita beri nama laravel-autocomplete.
Setelah proses download selesai, buka file .env di projek kita tadi dan settinglah datanya seperti berikut:
DB_CONNECTION=mysqlDB_HOST=127.0.0.1DB_PORT=3306DB_DATABASE=db_auto_completeDB_USERNAME=rootB_PASSWORD=
Simpan perubahan yang telah kita buat pada .env
Masuk kembali ke terminal dan lakukan migrate untuk membuat database dengan mengetikkan perintah berikut:
php artisan migrate
Secara otomatis kita dibuatkan sebuah database dengan nama db_auto_complete. Sekarang anda buka database "db_auto_complete" tersebut dan tambahkan data user ke dalam tabel "users". Berikut contoh data yang ditambahkan,
name => admin, user, superadmin
NB: Untuk field yang lain terserah anda dalam menambahkan data.
Sekarang kita memiliki 3 data di dalam tabel users. Kita akan melakukan pencarian otomatis berdasarkan name pada tabel users.
2. Buat User Interface
Buatlah sebuah file baru di dalam folder view dan beri nama file tersebut dengan nama "autocomplete.blade.php". Tambahkan script berikut untuk membuat UI pencarian otomatis di Laravel 11. Desain UI disini kita manfaatkan boostrap.
<!doctype html><html lang="en"><head><!-- Bootstrap CSS --><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css"><title>Auto Complek Laravel</title></head><body class="pt-5"><div class="container"><div class="row"><div class="text-center"><h1>Autocomplete Search with Laravel 11</h1></div></div><div class="row pt-3"><div class="input-group mb-3"><input type="text" id="search" name="search" class="form-control" placeholder="Input Nama"></div></div></div></body></html>
Perhatikan ID pada tag Input. ID dari tag input kita beri nama "search". ID ini nanti akan kita kirim ke javascript.
Selanjutnya kita tambahkan library JQuery untuk pencarian. Tambahkan Script berikut di bawah tag </body> di halaman autocomplate.blade.php tadi.
</body><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.2/bootstrap3-typeahead.min.js"></script></html>
Jadi di materi ini kita memanfaatkan JQuery sebagai libary untuk melakukan pencarian otomatis. Tambahkan script Javascript, sehingga terlihat seperti berikut:
</body><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.2/bootstrap3-typeahead.min.js"></script><script type="text/javascript">var route = "{{ url('search_automatis') }}";$('#search').typeahead({source: function(query, process) {return $.get(route, {query: query}, function(data) {return process(data);});}});</script></html>
Script di atas bertujuan untuk membuak Route secara otomatis. Route yang dibuka kita beri nama "search_automatis.
3. Atur Route
Buka folder Resource dan buka file web.php. Buatlah route baru:
Route::get('search_automatis', function (Request $request) {$query = $request->get('query');$filterResult = User::where('name', 'LIKE', '%' . $query . '%')->get();return response()->json($filterResult);});
Jangan lupa untuk memanggil library di bagian atas web.php. Berikut perintahnya:
use App\Http\Controllers\USerController;use Illuminate\Support\Facades\Route;use Illuminate\Http\Request;use App\Models\User;
4. Jalankan
Terakhir jalankan program anda
