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.
Pengantar Hai, Sob! Buat kamu semua para developer yang lagi kepo gimana sih cara Upload Aplikasi Laravel ke Hosting? Nah, Read more
Hai Sob! Buat kamu semua para developer yang lagi kepo gimana sih cara Upload Aplikasi Laravel ke Hosting? Nah, tutorial Read more
Halo Sob! Bagi developer handal seperti kamu, mendengar istilah laravel dan clone git adalah sesuatu yang familiar bukan? Nah, kali Read more
Hai Sob! Sebagai seorang developer yang menggunakan laravel, kamu pasti tahu dong bahwa salah satu keuntungan menggunakan framework laravel adalah Read more