🔍 Belajar Laravel dari Nol – Part 5 (Lanjutan): Pagination & Pencarian Data Produk

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.