Cara Membuat Pencarian, Filter, dan Paginasi di CodeIgniter 4 (Part 3)

Di Part 2, aplikasi katalog buku kita sudah bisa melakukan operasi CRUD lengkap. Namun ketika jumlah buku bertambah menjadi ratusan, dua masalah muncul: pengguna kesulitan menemukan buku tertentu, dan menampilkan semua data sekaligus membuat halaman berat. Solusinya adalah pencarian, filter, dan paginasi — tiga fitur yang akan kita bangun di Part 3 ini.

Apa yang Akan Kita Bangun

Kita akan menambahkan pada halaman daftar buku:

• Kotak pencarian untuk mencari buku berdasarkan judul atau penulis.
• Filter untuk menyaring buku berdasarkan ketersediaan stok.
• Paginasi yang memecah data menjadi beberapa halaman, misalnya 5 buku per halaman.

Yang menarik, ketiganya akan bekerja bersamaan — hasil pencarian dan filter tetap terjaga saat kita berpindah halaman.

Menambahkan Kotak Pencarian dan Filter

Pertama, tambahkan form pencarian di bagian atas view app/Views/buku/index.php. Kita pakai metode GET agar kata kunci tersimpan di URL dan mudah dibagikan:

<form method="get" action="/buku" class="form-cari">
    <input type="text" name="cari" value="<?= esc($cari) ?>"
           placeholder="Cari judul atau penulis...">

    <select name="status">
        <option value="">Semua Stok</option>
        <option value="tersedia" <?= $status === 'tersedia' ? 'selected' : '' ?>>Tersedia</option>
        <option value="habis"    <?= $status === 'habis' ? 'selected' : '' ?>>Stok Habis</option>
    </select>

    <button type="submit">Cari</button>
</form>

Nilai value="<?= esc($cari) ?>" membuat kata kunci tetap tampil di kotak setelah pencarian, dan atribut selected menjaga pilihan filter tetap aktif.

Membuat Logika Pencarian di Controller

Sekarang perbarui metode index() di controller Buku. Di sinilah kita membaca input, membangun query, lalu menerapkan paginasi:

public function index()
{
    $model = new BukuModel();

    $cari   = $this->request->getGet('cari');
    $status = $this->request->getGet('status');

    // Pencarian: judul ATAU penulis mengandung kata kunci
    if ($cari) {
        $model->groupStart()
              ->like('judul', $cari)
              ->orLike('penulis', $cari)
              ->groupEnd();
    }

    // Filter berdasarkan ketersediaan stok
    if ($status === 'tersedia') {
        $model->where('stok >', 0);
    } elseif ($status === 'habis') {
        $model->where('stok', 0);
    }

    $data = [
        'daftar' => $model->orderBy('judul', 'ASC')->paginate(5, 'buku'),
        'pager'  => $model->pager,
        'cari'   => $cari,
        'status' => $status,
    ];

    return view('buku/index', $data);
}

Beberapa poin penting:

• like('judul', $cari) menghasilkan klausa SQL WHERE judul LIKE '%kata%'. Digabung orLike() agar pencarian mencakup penulis juga.
• groupStart() dan groupEnd() membungkus kondisi OR dalam tanda kurung, sehingga tidak bentrok dengan filter stok. Tanpa ini, logika AND/OR bisa keliru.
• paginate(5, 'buku') mengambil 5 data per halaman. Argumen kedua 'buku' adalah nama grup pager (berguna bila ada lebih dari satu pager di satu halaman).

Menampilkan Link Paginasi

Setelah data dipecah, kita perlu menampilkan navigasi halaman. CodeIgniter menyediakan objek $pager yang otomatis membuat tautan. Tambahkan di bawah tabel pada view:

<table border="1" cellpadding="8" cellspacing="0">
    <!-- ... isi tabel buku seperti Part 2 ... -->
</table>

<div class="paginasi">
    <?= $pager->only(['cari', 'status'])->links('buku', 'default_full') ?>
</div>

Perhatikan metode only(['cari', 'status']) — inilah kunci agar kata kunci pencarian dan filter tidak hilang saat pindah halaman. Tanpa itu, mengklik “halaman 2” akan mereset pencarian. Argumen 'buku' menyesuaikan dengan nama grup pager yang kita tentukan tadi.

Mempercantik Tampilan Paginasi

Tautan paginasi bawaan memakai struktur daftar. Tambahkan sedikit CSS agar tampil seperti tombol:

.paginasi ul {
    list-style: none;
    display: flex;
    gap: 6px;
    padding: 0;
}
.paginasi a, .paginasi strong {
    display: inline-block;
    padding: 8px 14px;
    border: 1px solid #ddd;
    border-radius: 6px;
    text-decoration: none;
    color: #dc2626;
}
.paginasi .active strong {
    background-color: #dc2626;
    color: #fff;
    border-color: #dc2626;
}

Menyesuaikan Jumlah Data Total

Kadang kita ingin menampilkan informasi seperti “Menampilkan 5 dari 23 buku”. Objek pager menyediakan datanya:

<p>Menampilkan <?= count($daftar) ?> dari <?= $pager->getTotal('buku') ?> buku.</p>

Menangani Hasil Kosong

Bila pencarian tidak menemukan apa pun, sebaiknya tampilkan pesan yang ramah alih-alih tabel kosong:

<?php if (empty($daftar)): ?>
    <p class="kosong">Tidak ada buku yang cocok dengan pencarian Anda.</p>
<?php else: ?>
    <!-- tampilkan tabel di sini -->
<?php endif ?>

Kode Controller index() Selengkapnya

Sebagai rangkuman, beginilah metode index() setelah menggabungkan pencarian, filter, dan paginasi — semuanya hanya dalam satu metode yang ringkas:

public function index()
{
    $model  = new BukuModel();
    $cari   = $this->request->getGet('cari');
    $status = $this->request->getGet('status');

    if ($cari) {
        $model->groupStart()->like('judul', $cari)->orLike('penulis', $cari)->groupEnd();
    }
    if ($status === 'tersedia') {
        $model->where('stok >', 0);
    } elseif ($status === 'habis') {
        $model->where('stok', 0);
    }

    return view('buku/index', [
        'daftar' => $model->orderBy('judul', 'ASC')->paginate(5, 'buku'),
        'pager'  => $model->pager,
        'cari'   => $cari,
        'status' => $status,
    ]);
}

Contoh Kasus Nyata: Katalog dengan Ribuan Buku

Bayangkan katalog perpustakaan dengan 5.000 judul buku. Tanpa paginasi, satu query menarik seluruh data dan browser harus merender ribuan baris — lambat dan boros memori. Dengan paginate(20), server hanya mengambil 20 baris per permintaan, dan pengguna bisa langsung menemukan buku lewat kotak pencarian dalam sekejap. Kombinasi ketiga fitur ini adalah standar wajib untuk aplikasi berbasis data yang serius.

Penutup

Kini aplikasi katalog buku Anda tidak hanya bisa CRUD, tetapi juga dilengkapi pencarian, filter, dan paginasi yang saling bekerja sama — fitur yang membuat aplikasi terasa profesional dan siap menampung banyak data.

Ada satu hal penting yang masih terbuka: saat ini siapa saja bisa menambah, mengubah, dan menghapus buku. Di Part 4, kita akan menutup celah ini dengan membangun sistem autentikasi login, sehingga hanya admin terdaftar yang boleh mengelola data. Sampai jumpa di bagian terakhir seri ini!

Referensi: untuk pendalaman lebih lanjut, kunjungi dokumentasi resmi CodeIgniter 4.

Baca Juga

• Cara Membuat CRUD CodeIgniter 4 (Part 2): Tambah, Edit, dan Hapus Data
• Cara Membuat Login Multi User di CodeIgniter 4