Cara Membuat Fitur Pencarian dengan Laravel

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.

cara-buat-fitur-search-pada-laravel

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.

Related Posts
Tutorial Upload Aplikasi Laravel ke Hosting Melalui cPanel

Pengantar Hai, Sob! Buat kamu semua para developer yang lagi kepo gimana sih cara Upload Aplikasi Laravel ke Hosting? Nah, Read more

Tutorial Install Laravel di cPanel Jagoan Hosting

Hai Sob! Buat kamu semua para developer yang lagi kepo gimana sih cara Upload Aplikasi Laravel ke Hosting? Nah, tutorial Read more

Cara Install Laravel Dari Clone Git di cPanel

Halo Sob! Bagi developer handal seperti kamu, mendengar istilah laravel dan clone git adalah sesuatu yang familiar bukan? Nah, kali Read more

Cara Membuat Storage Link pada Laravel

Hai Sob! Sebagai seorang developer yang menggunakan laravel, kamu pasti tahu dong bahwa salah satu keuntungan menggunakan framework laravel adalah Read more