Arief HidayatullahPada seri belajar Laravel bagian 11, kita telah belajar bagaimana cara membuat Pagination di Laravel. Dalam belajar laravel bagian 12 ini, kita akan belajar cara membuat fitur pencarian di Laravel, untuk memudahkan pengunjung website anda menemukan informasi yang mereka cari secara lebih cepat.
Dalam tutorial ini, kita akan belajar cara membuat fitur pencarian di Laravel dengan menggabungkan query builder, model Eloquent, dan formulir HTML untuk membuat fitur pencarian yang dinamis dan mudah diterapkan.
Tutorial ini kami buat untuk pemula maupun developer yang ingin menambahkan fungsi pencarian ke aplikasi Laravel secara mudah. Yuk, langsung mulai langkah-langkahnya!
Membuat Fitur Pencarian di Laravel
Berikut langkah-langkah membuat fitur pencarian di Laravel yang dapat Anda ikuti.
Step 1. Membuat Model dan Migration
Langkah pertama, buat model dan migration untuk entitas yang akan digunakan dalam fitur pencarian. Misalnya di sini kita akan membuat model dengan entitas Berita. Jalankan perintah berikut di ssh atau terminal:
php artisan make:model Berita -mSetelah perintah tersebut dijalankan, file migration akan otomatis dibuat di folder database/migrations/ dengan nama seperti tanggal_pembuatan_create_beritas_table.php.
Selanjutnya, buka file tersebut dan tambahkan kolom yang diperlukan. Sebagai contoh:
Selanjutnya, tambahkan mass assignment di dalam model yang terletak pada file app/Models/Berita.php menggunakan properti protected $fillable untuk field yang telah dibuat pada migration sebelumnya.
Setelah selesai mengisi kebutuhan migration dan juga model, kemudian kita jalankan perintah php artisan migrate untuk memasukan data kita ke database.
Step 2. Membuat Factory untuk data faker kita
Factory dan Faker adalah dua fitur di Laravel yang sangat berguna untuk membuat data dummy dengan cepat dan efisien. Biasanya, fitur ini digunakan dalam beberapa kasus seperti membuat aplikasi baru dan membutuhkan data pengguna atau produk untuk keperluan pengujian. Untuk membuat factory kita dapat menjalankan perintah berikut:
php artisan make:factory PostFactory --model=BeritaSelanjutnya, buka file yang berada pada folder database/factories/PostFactory.php, lalu definisikan struktur data yang sudah dibuat dengan faker. Berikut adalah contoh struktur data yang sudah dibuat sebelumnya.
Step 3. Mengisi database dengan menggunakan data Faker
Untuk mengisi data faker ke dalam database, kita perlu membuat dahulu seeder datanya dengan menjalankan perintah berikut:
php artisan make:seeder PostSeederSetelah menjalankan perintah tersebut, silahkan dapat membuka filenya di path database/seeders/PostSeeder.php dan isikan seperti berikut.
Setelah menambahkan isi pada seeder, langkah selanjutnya kita dapat menjalankan perintah berikut untuk mengirimkan data faker ke database:
php artisan db:seed --class=PostSeederJika data berhasil dikirimkan, maka ada muncul seperti berikut:
Step 4. Membuat controller untuk menampilkan data berita
Selanjutnya, kita akan membuat controller untuk mengambil data dan menampilkannya disertai dengan fitur pencarian. Silahkan dapat menjalankan perintah berikut:
php artisan make:controller PostControllerSetelah menjalankan perintah tersebut kita dapat melihat filenya pada app/Http/Controller/PostController. Di dalam controller ini, kita akan mengambil data semua yang ada pada tabel berita dan dilengkapi dengan fitur pencarian yang akan mencari berdasarkan judul dan juga isi.
Step 5. Membuat Route untuk menampilkan data tersebut
Kita dapat menentukan route ketika kita mengakses data contoh seperti kita ingin diakses di /berita. Dengan mengisikan script seperti berikut di dalam path /routes/web.php.
Step 6. Membuat View untuk menampilkan data berita dan fitur pencarian
Silahkan dapat membuat file di resource/view dengan menambahkan folder berita kemudian menambahkan file index.blade.php dan isikan code seperti berikut :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contoh Pagination Berita</title>
<style>
table {
width: 100%;
border-collapse: collapse;
}
table, th, td {
border: 1px solid black;
}
th, td {
padding: 8px;
text-align: left;
}
th {
background-color: #f2f2f2;
}
.pagination {
margin-top: 10px;
}
</style>
</head>
<body>
<h1>Berita</h1>
<!-- Tabel Berita -->
<form action="{{ route('beritas.index') }}" method="GET" class= 'mb-5'>
<input type="text" name="search" value="{{ $search ?? '' }}" placeholder="Cari berita...">
<button type="submit">Cari</button>
</form>
<table>
<thead>
<tr>
<th>Judul</th>
<th>Isi</th>
<th>Tanggal Berita</th>
</tr>
</thead>
<tbody>
@foreach($beritas as $berita)
<tr>
<td>{{ $berita->judul }}</td>
<td>{{ $berita->isi }}</td>
<td>{{ $berita->tanggal_berita }}</td>
</tr>
@endforeach
</tbody>
</table>
<!-- Pagination Links -->
<div>
{{ $beritas->withQueryString()->links() }}
</div>
</body>
</html>Pengujian
Setelah semua step kita buat, langkah terakhir dalam sesi belajar laravel ini adalah melakukan pengujian. Untuk menjalankan websitenya, gunakan perintah: php artisan serve dan jika benar maka hasilnya akan sebagai berikut:
Penutup
Fitur pencarian pada website berfungsi untuk memudahkan pengguna dalam menemukan data tertentu dari sekumpulan data yang tersedia, seperti berita dalam aplikasi Laravel ini.
Dengan adanya fitur pencarian, pengunjung website Anda dapat menghemat waktu penelusuran, serta lebih fleksible dalam menyaring data atau informasi di project laravel Anda.
Demikian tutorial belajar laravel bagian ke 12 ini tentang bagaimana cara membuat fitur pencarian di laravel, semoga bermanfaat.
