Cara Membuat Pencarian dan Pagination di CodeIgniter 3 (Part 3)

Di Part 2, aplikasi inventaris barang kita sudah bisa CRUD penuh. Tapi ketika data barang mencapai ratusan, dua masalah muncul: sulit menemukan barang tertentu, dan menampilkan semua data sekaligus membuat halaman berat. Di Part 3 ini kita atasi dengan pencarian dan pagination.

Yang Akan Kita Bangun

Kita akan menambahkan pada halaman daftar barang:

• Kotak pencarian untuk mencari barang berdasarkan nama atau kode.
• Pagination yang memecah data menjadi beberapa halaman, misalnya 5 barang per halaman.

Keduanya akan bekerja bersamaan — kata kunci pencarian tetap aktif saat berpindah halaman.

Menambahkan Pencarian di Model

Tambahkan dua metode ke Barang_model.php: satu untuk mengambil data dengan batasan halaman, satu untuk menghitung total data (dibutuhkan pagination):

public function cari($keyword, $limit, $offset)
{
    if ($keyword) {
        $this->db->group_start();
        $this->db->like('nama', $keyword);
        $this->db->or_like('kode', $keyword);
        $this->db->group_end();
    }
    return $this->db->get('barang', $limit, $offset)->result_array();
}

public function hitung($keyword)
{
    if ($keyword) {
        $this->db->group_start();
        $this->db->like('nama', $keyword);
        $this->db->or_like('kode', $keyword);
        $this->db->group_end();
    }
    return $this->db->count_all_results('barang');
}

Metode like('nama', $keyword) menghasilkan WHERE nama LIKE '%kata%'. Digabung or_like() agar pencarian juga mencakup kode barang. group_start() dan group_end() membungkus kondisi OR dalam tanda kurung agar tidak bentrok dengan query lain.

Menambahkan Kotak Pencarian di View

Tambahkan form pencarian di atas tabel pada view daftar barang. Kita pakai metode GET agar kata kunci tersimpan di URL:

<form method="get" action="<?= base_url('barang') ?>" class="form-cari">
    <input type="text" name="cari" value="<?= $this->input->get('cari') ?>"
           placeholder="Cari nama atau kode barang...">
    <button type="submit">Cari</button>
</form>

Menyiapkan Pagination di Controller

Inilah inti Part 3. Perbarui metode index() pada controller Barang untuk menggabungkan pencarian dan pagination memakai library pagination bawaan CodeIgniter:

public function index()
{
    $this->load->library('pagination');

    $keyword = $this->input->get('cari');

    $config['base_url']          = base_url('barang/index');
    $config['total_rows']        = $this->Barang_model->hitung($keyword);
    $config['per_page']          = 5;
    $config['uri_segment']       = 3;
    $config['reuse_query_string'] = TRUE;

    $this->pagination->initialize($config);

    $offset = $this->uri->segment(3, 0);

    $data['barang']     = $this->Barang_model->cari($keyword, $config['per_page'], $offset);
    $data['pagination'] = $this->pagination->create_links();
    $data['keyword']    = $keyword;

    $this->load->view('templates/header');
    $this->load->view('barang/index', $data);
    $this->load->view('templates/footer');
}

Beberapa poin penting:

• per_page = 5 menampilkan 5 barang per halaman.
• uri_segment = 3 memberi tahu CodeIgniter bahwa nomor offset ada di segmen ketiga URL (misalnya barang/index/5).
• reuse_query_string = TRUE adalah kuncinya — membuat kata kunci pencarian tidak hilang saat berpindah halaman.

Menampilkan Link Pagination

Di view daftar barang, tampilkan tautan halaman yang dihasilkan pagination, biasanya diletakkan di bawah tabel:

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

<div class="paginasi">
    <?= $pagination ?>
</div>

Mempercantik Tampilan Pagination

Tautan bawaan cukup polos. Kita bisa membungkusnya dengan kelas CSS lewat konfigurasi tambahan di controller, sebelum initialize():

$config['full_tag_open']   = '<ul class="paginasi">';
$config['full_tag_close']  = '</ul>';
$config['num_tag_open']    = '<li>';
$config['num_tag_close']   = '</li>';
$config['cur_tag_open']    = '<li class="aktif"><span>';
$config['cur_tag_close']   = '</span></li>';
$config['prev_link']       = '«';
$config['next_link']       = '»';

Lalu tambahkan CSS-nya:

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

Menangani Hasil Pencarian Kosong

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

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

Contoh Kasus Nyata: Gudang dengan Ribuan Barang

Bayangkan gudang dengan 3.000 item. Tanpa pagination, satu query menarik seluruh data dan browser harus merender ribuan baris — lambat dan boros. Dengan per_page = 20, server hanya mengambil 20 baris per permintaan, dan petugas gudang bisa langsung menemukan barang lewat kotak pencarian. Kombinasi ini adalah standar wajib untuk aplikasi data yang serius.

Penutup

Aplikasi inventaris Anda kini dilengkapi pencarian dan pagination yang bekerja sama — fitur yang membuatnya terasa profesional dan siap menampung banyak data.

Namun ada satu celah penting: saat ini siapa saja bisa mengelola data barang. Di Part 4, kita akan menutupnya dengan membangun sistem autentikasi login, sehingga hanya petugas terdaftar yang boleh mengakses aplikasi. Sampai jumpa di bagian pamungkas!

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

Baca Juga

• Cara Membuat Login dan Autentikasi di CodeIgniter 3 (Part 4)
• Cara Membuat Aplikasi Inventaris Barang dengan CodeIgniter 3 (Part 1)