Cara Membuat Fitur Pencarian dengan Laravel

Juli 2, 2025

Halo, Sobat Jagoan! Untuk membantu pengguna menemukan informasi dengan lebih cepat dan efisien, kamu bisa menambahkan fitur pencarian pada website. Artikel ini melanjutkan pembahasan dari Cara Membuat Pagination dengan Laravel, dan masih menggunakan studi kasus yang sama, yaitu data buku.

Karena pada artikel sebelumnya, sudah membuat model Buku dan mengisinya dengan data dummy, sekarang tinggal menambahkan beberapa langkah sederhana untuk mengaktifkan fitur pencariannya. Yuk, langsung mulai!

Step 1: Memodifikasi Controller BukuController.php

Edit file BukuController.php yang berada pada folder app/Http/Controllers/ dengan menambahkan logika kode fitur pencarian buku berdasarkan judul dan penulis.

				
					public function index(Request $request)
    {
        // Tangkap kata kunci pencarian
        $keyword = $request->input('cari');

        // Query dengan filter pencarian (judul atau penulis)
        $buku = DB::table('buku')
            ->when($keyword, function ($query, $keyword) {
                return $query->where('judul', 'like', '%' . $keyword . '%')
                             ->orWhere('penulis', 'like', '%' . $keyword . '%');
            })
            ->paginate(10);

        // Kirim ke view
        return view('buku.index', compact('buku', 'keyword'));
    }

Catatan: Karena pada artikel Cara Membuat Pagination dengan Laravel telah mendemokan fitur paginate menggunakan controller PaginateController.php, kali ini cukup menggunakan controller BukuController.php saja untuk menambahkan fitur paginate dan pencariannya, Sob. Jadi, kode di atas adalah bentuk modifikasi dengan menggabungkan kedua fitur tersebut. Dan kamu bisa menghapus PaginateController.php karena sudah tidak digunakan lagi untuk menghemat penyimpanan.

Step 2: Menyesuaikan Route

Selanjutnya, modifikasi route yang menampilkan daftar buku pada routes/web.php

				
					use App\Http\Controllers\BukuController;

Route::get('/buku', [BukuController::class, 'index']);

Step 3: Modifikasi View /buku/index.blade.php

Ganti file index.blade.php di dalam folder resources/views/buku/ sehingga fitur paginate dan pencarian ada di dalamnya.

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Data Buku</title>
<link href=”https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css” rel=”stylesheet”>
<style>
table {
border-collapse: collapse;
width: 80%;
margin: 20px auto;
}

th, td {
border: 1px solid #ddd;
padding: 8px;
}

th {
background: #007BFF;
color: white;
}

a {
text-decoration: none;
color: #007BFF;
}

h2 {
text-align: center;
margin-top: 20px;
}

.search-form {
text-align: center;
margin: 20px auto;
}

.pagination-wrapper {
display: flex;
justify-content: center;
margin-top: 20px;
}
</style>
</head>
<body>

<h2>Daftar Buku</h2>

<!– Tombol Tambah Buku –>
<p style=”text-align:center;”><a href=”/buku/tambah”>+ Tambah Buku Baru</a></p>

<!– Form Pencarian –>
<div class=”search-form”>
<form action=”/buku” method=”GET” class=”d-flex justify-content-center”>
<input type=”text” name=”cari” placeholder=”Cari judul atau penulis…” value=”{{ request(‘cari’) }}” class=”form-control w-25 me-2″>
<button type=”submit” class=”btn btn-primary”>Cari</button>
</form>
</div>

<!– Tabel Data Buku –>
<table>
<thead>
<tr>
<th>No</th>
<th>Judul</th>
<th>Penulis</th>
<th>Tahun Terbit</th>
<th>Penerbit</th>
<th>Action</th>
</tr>
</thead>
<tbody>
@forelse($buku as $b)
<tr>
<td>{{ $loop->iteration + ($buku->currentPage() – 1) * $buku->perPage() }}</td>
<td>{{ $b->judul }}</td>
<td>{{ $b->penulis }}</td>
<td>{{ $b->tahun_terbit }}</td>
<td>{{ $b->penerbit }}</td>
<td>
<a href=”/buku/edit/{{ $b->id }}”>Edit</a> |
<a href=”/buku/hapus/{{ $b->id }}” onclick=”return confirm(‘Yakin ingin menghapus?’)”>Hapus</a>
</td>
</tr>
@empty
<tr>
<td colspan=”6″ style=”text-align:center;”>Data tidak ditemukan.</td>
</tr>
@endforelse
</tbody>
</table>

<!– Pagination –>
<div class=”pagination-wrapper”>
{{ $buku->appends([‘cari’ => request(‘cari’)])->links(‘pagination::bootstrap-5’) }}
</div>

</body>
</html>

Step 4: Uji Website

Jalankan server Laravel dengan menjalankan perintah berikut di terminal:

				
					php artisan serve

Buka http://127.0.0.1:8000/buku melalui browser dan lihat tampilannya setelah ditambahkan fitur pencarian. Kamu coba untuk melakukan pencarian buku berdasarkan judul atau penulis untuk memastikan fiturnya dapat berfungsi dengan baik.

Selamat mencoba, Sob! Kalau ada yang masih bikin bingung, jangan ragu hubungi Tim Support Jagoan Hosting via Live Chat atau Open Ticket. Simak terus tips-tips seputar domain dan hosting dari Jagoan Hosting di laman Pusat Tutorial Hosting & Domain.