Fitur pencarian dan pagination sangat dibutuhkan saat data sudah banyak, seperti dalam sistem produk, pelanggan, transaksi, dll. Dengan Laravel, implementasi fitur ini sangat efisien menggunakan query builder atau Eloquent.
🎯 Tujuan Part Ini
- Menerapkan pagination pada halaman data produk
- Menambahkan fitur pencarian produk berdasarkan nama
- Menjaga performa dan UX saat data bertambah
🧱 Struktur Awal: Model Produk
Sudah dibuat pada part sebelumnya:
protected $fillable = ['nama', 'harga', 'foto'];
🧭 1. Routing
Tidak perlu tambahan route baru. Gunakan route produk.index:
Route::resource('produk', ProdukController::class);
🛠️ 2. Tambahkan Fitur Pencarian di Controller
Edit ProdukController.php, method index():
public function index(Request $request)
{
$keyword = $request->get('cari');
$produk = Produk::when($keyword, function ($query) use ($keyword) {
$query->where('nama', 'like', "%$keyword%");
})->orderBy('id', 'desc')->paginate(5);
return view('produk.index', compact('produk', 'keyword'));
}
🖥️ 3. Tambahkan Form Pencarian & Pagination di View
a. Form Pencarian
Tambahkan di bagian atas index.blade.php:
<form action="{{ route('produk.index') }}" method="GET">
<input type="text" name="cari" value="{{ request('cari') }}" placeholder="Cari produk...">
<button type="submit">Cari</button>
</form>
b. Tampilkan Data + Pagination
@foreach($produk as $p)
<tr>
<td>{{ $p->nama }}</td>
<td>{{ $p->harga }}</td>
<td>
@if($p->foto)
<img src="{{ asset('uploads/produk/' . $p->foto) }}" width="60">
@else
<small>-</small>
@endif
</td>
</tr>
@endforeach
c. Link Pagination
<div>
{{ $produk->appends(['cari' => request('cari')])->links() }}
</div>
⚙️ 4. Hasil: UX Lebih Rapi & Performant
- Data hanya ditampilkan per 5 entri (paginate)
- User bisa mencari produk berdasarkan nama
- Halaman tetap ringan & cepat meski data banyak
🔐 Tips SEO & UX
| Aspek | Rekomendasi |
|---|---|
| URL ramah mesin | Gunakan query string seperti ?cari=produkA&page=2 |
| Pagination UX | Gunakan Tailwind/Bootstrap untuk tampilan yang rapi |
| Search Realtime | Gunakan AJAX atau Livewire (lanjutan fitur) |
🧰 Elektra Network Vision – Solusi Laravel CRUD, Filter & Search
Kami bantu Anda:
- Membangun panel admin Laravel lengkap
- Optimasi fitur search + filter dinamis
- Integrasi frontend modern (Livewire, Vue, AJAX)
🌐 elektranetworkvision.com — Spesialis Laravel & sistem manajemen data profesional untuk bisnis Anda.
Categories:
