Belajar CodeIgniter #14: Cara Membuat Fitur Pagination yang Keren dan Simpel

Belajar CodeIgniter #14 - Halo bro, lagi asyik menjelajahi dunia coding? Nah, kali ini kita akan membahas sesuatu yang bisa membuat hidupmu sebagai developer lebih rapi dan keren: pagination. Bayangkan, jika kamu memiliki website dengan ribuan konten, apakah semuanya akan ditampilkan di satu halaman? Tentu saja tidak, karena itu akan membuat pengunjung pusing! Oleh karena itu, dalam artikel ini kita akan belajar bersama cara membuat fitur ini menggunakan framework favorit kita, CodeIgniter. Yuk, kita mulai!

Apa Itu Pagination?

Sebelum masuk ke kode, mari kita kenalan dulu dengan pagination. Pagination adalah teknik untuk mengatur data panjang menjadi beberapa bagian atau halaman. Misalnya, jika kamu memiliki 1000 artikel di database, tentu tidak mungkin menampilkan semuanya di satu halaman. Solusinya? Pagination! Dengan fitur ini, konten akan dibagi menjadi beberapa halaman, misalnya 10 artikel per halaman. Praktis, bukan? Di CodeIgniter, fitur ini sudah disediakan melalui library khusus. Tinggal kita manfaatkan saja!

Langkah Praktis Membuat Pagination di CodeIgniter

Untuk membuat fitur ini, ada empat langkah sederhana yang perlu kamu lakukan:

1. Memuat library pagination.
2. Membuat konfigurasi sesuai kebutuhan.
3. Menginisialisasi pagination.
4. Menampilkan link pagination di view.

Mudah, kan? Yuk, kita langsung praktikkan bersama menggunakan proyek contoh bernama beritacoding. Siapkan laptopmu, ya!

Baca Juga: Belajar CodeIgniter #12: Cara Menggunakan Quilljs Untuk Editor Artikel

Pagination untuk List Artikel Publik

Pertama, kita akan membuat pagination di halaman list artikel yang dapat dilihat oleh semua orang. Berikut langkah-langkahnya:

1. Edit Model untuk Mendukung Pagination

Buka file models/Article_model.php. Kita membutuhkan dua hal: menghitung jumlah artikel yang sudah dipublikasikan dan mengambil data artikel dengan batasan tertentu. Tambahkan method berikut:

public function get_published_count() {
    $query = $this->db->get_where($this->_table, ['draft' => 'FALSE']);
    return $query->num_rows();
}

Method ini digunakan untuk menghitung jumlah artikel yang sudah live. Selanjutnya, pastikan method get_published() memiliki parameter $limit dan $offset untuk mengambil data per segmen:

public function get_published($limit = null, $offset = null) {
    if (!$limit && $offset) {
        $query = $this->db->get_where($this->_table, ['draft' => 'FALSE']);
    } else {
        $query = $this->db->get_where($this->_table, ['draft' => 'FALSE'], $limit, $offset);
    }
    return $query->result();
}

2. Set Up Controller

Buka file controllers/Article.php, lalu ubah method index() menjadi seperti ini:

public function index() {
    $this->load->library('pagination');
    
    $config['base_url'] = site_url('/article');
    $config['page_query_string'] = TRUE;
    $config['total_rows'] = $this->article_model->get_published_count();
    $config['per_page'] = 2;

    $this->pagination->initialize($config);
    $limit = $config['per_page'];
    $offset = html_escape($this->input->get('per_page'));

    $data['articles'] = $this->article_model->get_published($limit, $offset);

    if (count($data['articles']) > 0) {
        $this->load->view('articles/list_article.php', $data);
    } else {
        $this->load->view('articles/empty_article.php');
    }
}

Di sini, $config['per_page'] = 2 berarti setiap halaman hanya menampilkan dua artikel. Kamu bisa mengubahnya sesuai kebutuhan.

3. Tampilkan di View*

Edit file views/list_article.php menjadi seperti ini:

<div class="container">
    <h1>List Artikel</h1>
    <ul>
        <?php foreach ($articles as $article) : ?>
            <li>
                <a href="<?= site_url('article/show/' . $article->slug) ?>">
                    <?= html_escape($article->title) ?: "No Title" ?>
                </a>
            </li>
        <?php endforeach ?>
    </ul>
    <?= $this->pagination->create_links(); ?>
</div>

Coba buka browser, dan kamu akan melihat link pagination muncul di bawah list artikel. Keren, kan?

Baca Juga: Belajar CodeIgniter #13: Cara Membuat Fitur Pencarian yang Keren dan Gampang Dipahami

Pagination untuk Halaman Admin

Sekarang, kita akan membuat pagination untuk halaman admin agar list artikelnya juga rapi. Caranya mirip, hanya berbeda di data dan URL-nya.

1. Update Model

Di Article_model.php, ubah method get() agar mendukung limit dan offset:

public function get($limit = null, $offset = null) {
    $query = $this->db->get($this->_table, $limit, $offset);
    return $query->result();
}

2. Edit Controller Admin

Buka file admin/controllers/Post.php, lalu ubah method index() menjadi:

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

    $config['base_url'] = site_url('/admin/post');
    $config['page_query_string'] = TRUE;
    $config['total_rows'] = $this->article_model->count();
    $config['per_page'] = 2;

    $this->pagination->initialize($config);
    $limit = $config['per_page'];
    $offset = html_escape($this->input->get('per_page'));

    $data['articles'] = $this->article_model->get($limit, $offset);

    $this->load->view('admin/post_list.php', $data);
}

3. Tambahkan di View Admin

Di views/admin/post_list.php, tambahkan kode berikut di bawah tabel:

<?= $this->pagination->create_links(); ?>

Cek hasilnya di browser, dan list artikel di admin akan terlihat lebih rapi dengan pagination!

Modifikasi Pagination agar Lebih Menarik

Pagination sudah berfungsi, tetapi tampilannya masih polos? Tenang, kita bisa menambahkan sentuhan CSS agar terlihat lebih menarik!

1. Tambahkan Config di Controller

Di kedua controller (Article.php dan Post.php), tambahkan konfigurasi berikut:

$config['full_tag_open'] = '<div class="pagination">';
$config['full_tag_close'] = '</div>';

2. Styling dengan CSS

Tambahkan kode berikut di assets/css/main.css dan assets/css/admin.css:

.pagination {
    display: flex;
    padding: 1em 0;
}
.pagination a, .pagination strong {
    border: 1px solid silver;
    border-radius: 8px;
    color: black;
    padding: 0.5em;
    margin-right: 0.5em;
    text-decoration: none;
}
.pagination a:hover, .pagination strong {
    border: 1px solid #008cba;
    background-color: #008cba;
    color: white;
}

Setelah itu, refresh browser, dan pagination akan terlihat lebih eye-catching!

Kenapa Harus Belajar CodeIgniter?

Framework ini memang sangat cocok untuk membuat aplikasi sederhana namun powerful. Fitur seperti pagination membuat hidupmu sebagai developer jauh lebih mudah. Ketika kita memiliki banyak konten, tentu tidak mungkin menampilkan semuanya sekaligus, bukan? Oleh karena itu, Belajar CodeIgniter adalah hal yang wajib bagi kamu yang ingin mahir dalam membuat web dinamis.

Jangan takut salah saat belajar CodeIgniter. Cobalah bereksperimen dengan jumlah artikel per halaman atau styling-nya. Misalnya, ubah $config['per_page'] menjadi 5 atau 10, lalu lihat efeknya. Semakin sering mencoba, semakin paham kamu dengan cara kerja framework ini.

Kesimpulan

Bagaimana, bro? Sudah berhasil membuat pagination? Sekarang kamu memiliki skill baru dari Belajar CodeIgniter yang bisa kamu pamerkan ke teman atau klien. Oh ya, jika kamu ingin berdiskusi lebih lanjut atau mencari inspirasi coding, kunjungi komunitas Codepolitan. Di sana, pemula hingga expert bisa bertanya, membaca, atau menulis apa pun yang ada di pikiranmu. Yuk, bagikan pengalamanmu di sana! Happy coding, bro! 🚀