Diterbitkan pada

Codeigniter 4 : Bootstrap 4 template paginasi

Penulis
  • author image
    Author
    Toto

Begitu lama telah menggunakan CodeIgniter 4, baru kali ini merasakan enak dan nyaman dalam mengatur sesuatunya dibandingkan pada versi CodeIgniter 3. CodeIgniter 4, dengan arsitektur yang lebih modern, penggunaan namespace, dan struktur yang terinspirasi dari praktik-praktik terbaik pengembangan modern, memang memberikan pengalaman yang jauh lebih baik. Konsep-konsep seperti Service Locator dan Autoloading yang lebih canggih membuat pengelolaan komponen menjadi lebih terstruktur dan mudah dipelihara. Namun, pada tulisan ini yang jadi pokok bahasan utama adalah tentang template paginasi.

Paginasi adalah fitur esensial dalam aplikasi web manapun, terutama yang berurusan dengan data dalam jumlah besar. Tujuannya adalah untuk memecah daftar data panjang menjadi halaman-halaman yang lebih kecil, membuat antarmuka lebih cepat dimuat dan lebih mudah dinavigasi oleh pengguna. Meskipun CodeIgniter 4 sudah menyediakan mekanisme paginasi bawaan yang powerful melalui Library Pager, tampilan defaultnya seringkali sederhana dan tidak langsung sesuai dengan framework CSS populer seperti Bootstrap. Untuk menciptakan pengalaman pengguna yang mulus dan konsisten secara visual, kita perlu menyesuaikan template paginasi agar sesuai dengan kelas-kelas CSS Bootstrap 4.

banner-pagination

💡 Mengapa Kustomisasi Pager Penting di CodeIgniter 4? ​

Secara default, CodeIgniter 4 menyediakan template paginasi dasar yang fungsional, namun umumnya hanya menggunakan elemen HTML standar tanpa kelas styling khusus. Dalam ekosistem pengembangan web modern, konsistensi antarmuka pengguna (UI) adalah kunci. Jika keseluruhan aplikasi Anda sudah menggunakan Bootstrap 4 — dengan tombol, form, dan tata letak yang khas — maka elemen paginasi juga harus mengadopsi gaya yang sama agar terlihat profesional dan terintegrasi.

Kustomisasi Pager di CodeIgniter 4 adalah salah satu kemudahan yang ditawarkan kerangka kerja ini. Anda tidak perlu memodifikasi core sistem; Anda hanya perlu membuat view file baru yang berisi struktur HTML/PHP sesuai kebutuhan Anda (dalam hal ini, struktur Bootstrap 4), dan kemudian menginstruksikan Library Pager untuk menggunakan template baru tersebut.

Langkah-langkah yang umumnya terlibat dalam proses ini adalah:

  1. Membuat Template Paginasi Kustom: Menciptakan file view di direktori app/Views/Pagers/ (atau subdirektori serupa) yang berisi markup HTML Bootstrap 4.
  2. Menyesuaikan Konfigurasi: Mengubah konfigurasi paginasi, baik melalui file $pager->links() di Controller/Model atau melalui file konfigurasi Config/Pager.php untuk mengatur nama template yang akan digunakan.
  3. Implementasi di View: Memanggil Pager dengan nama template kustom di view tempat data ditampilkan.

Dengan mengadopsi template kustom Bootstrap 4, kita bisa memanfaatkan fitur-fitur Bootstrap seperti:

  • pagination: Kelas dasar untuk container paginasi.
  • page-item: Kelas untuk setiap elemen halaman (<li>).
  • page-link: Kelas untuk link halaman (<a>).
  • active: Kelas untuk menandai halaman yang sedang aktif.
  • disabled: Kelas untuk menonaktifkan tombol navigasi (misalnya tombol "Previous" di halaman pertama).
  • justify-content-center: Utility class untuk menengahkan tampilan paginasi.

Template yang disediakan di bawah ini telah mengintegrasikan kelas-kelas tersebut secara sempurna, termasuk penggunaan ikon SVG untuk tombol navigasi "First," "Previous," "Next," dan "Last," yang memberikan sentuhan estetika tambahan dan kepastian visual bagi pengguna.

🛠️ Bagaimana Cara Implementasi Template Paginasi Bootstrap 4 ​

Cara gampangnya, Anda hanya perlu copy-paste contoh kode PHP di bawah ini ke dalam sebuah file baru di direktori app/Views/Pagers/ di instalasi CodeIgniter 4 Anda. Anda dapat menamainya, misalnya, bootstrap_pagination.php atau nama lain yang deskriptif.

Langkah-Langkah Detail Implementasi: ​

  1. Buat File Template: Buat file baru di lokasi berikut: app/Views/Pagers/bootstrap_pagination.php.

  2. Salin Kode: Salin seluruh kode PHP yang disediakan di bawah ini ke dalam file bootstrap_pagination.php yang baru Anda buat.

  3. Konfigurasi Penggunaan di Controller/View: Di view tempat Anda menampilkan daftar data (misalnya app/Views/users/index.php), ganti panggilan fungsi Pager Anda agar menggunakan template kustom ini.

    Sebelum (Menggunakan Template Default):

    php
    <?= $pager->links() ?>

    Sesudah (Menggunakan Template Kustom):

    php
    <?= $pager->links('default', 'bootstrap_pagination') ?>

    Atau, jika Anda hanya menggunakan satu group paginasi:

    php
    <?= $pager->links('group_name', 'bootstrap_pagination') ?>

    Dimana 'bootstrap_pagination' adalah nama file view paginasi yang telah Anda buat tanpa ekstensi .php.

  4. Menyesuaikan Jumlah Tautan (Optional): Baris $pager->setSurroundCount(2); di awal kode sangat penting. Metode ini berfungsi untuk mengatur berapa banyak tautan halaman yang akan ditampilkan di sebelah kiri dan kanan tautan halaman aktif. Dalam contoh ini, 2 berarti jika Anda berada di halaman 5, maka tautan halaman 3, 4, 5 (aktif), 6, dan 7 akan ditampilkan, yang membantu menjaga tampilan paginasi tetap ringkas dan tidak terlalu panjang. Anda bisa menyesuaikan angka ini sesuai kebutuhan desain Anda.

📝 Analisis Kode Template Bootstrap 4 ​

Mari kita tinjau bagian-bagian penting dari kode template tersebut:

  1. Cek Kondisi Awal:

    PHP
    $pager->setSurroundCount(2);
if (count($pager->links()) > 1) {
// ... seluruh markup ada di sini
}

    Kode diawali dengan memeriksa apakah total tautan paginasi lebih dari satu (> 1). Jika hanya ada satu halaman, maka tidak perlu menampilkan kontrol paginasi sama sekali, yang merupakan praktik terbaik UX.

  2. Struktur Bootstrap 4:

    HTML
    <nav aria-label="Page navigation">
    <ul class="pagination justify-content-center">
</ul>
</nav>

    Ini adalah inti dari paginasi Bootstrap 4: elemen <ul> dengan kelas pagination dan justify-content-center untuk penempatan di tengah.

  3. Tombol Navigasi "First" dan "Previous":

    PHP
    <?php if ($pager->hasPrevious()) : ?>
    <li class="page-item">
        <a class="page-link" href="<?= $pager->getFirst() ?>" aria-label="First"> ... </a>
    </li>
<?php endif ?>

    Blok ini hanya ditampilkan jika ada halaman sebelumnya ($pager->hasPrevious() bernilai true). Jika Anda berada di halaman pertama, tombol-tombol ini tidak akan ditampilkan, secara efektif menggantikan kelas disabled yang sering digunakan pada implementasi Bootstrap murni, sehingga mengurangi markup yang tidak perlu.

  4. Perulangan Tautan Halaman:

    PHP
    <?php foreach ($pager->links() as $link) : ?>
    <?php if ($link['active']) { ?>
    <li class="page-item active" aria-current="page"> ... </li>
    <?php } else { ?>
    <li class="page-item">
        <a class="page-link" href="<?= $link['uri'] ?>">
            <?= $link['title'] ?>
        </a>
    </li>
    <?php } ?>
<?php endforeach ?>

    Ini adalah bagian utama yang menghasilkan nomor-nomor halaman. Perhatikan penggunaan variabel $link['active'] untuk menambahkan kelas active pada <li> yang menunjukkan halaman saat ini, dan penggunaan $link['uri'] untuk URL tujuan.

  5. Tombol Navigasi "Next" dan "Last":

    PHP
    <?php if ($pager->hasNext()) : ?>
<?php endif ?>

    Sama seperti navigasi sebelumnya, tombol "Next" dan "Last" hanya ditampilkan jika ada halaman berikutnya ($pager->hasNext() bernilai true).

🎨 Keunggulan Penggunaan Ikon SVG ​

Salah satu fitur menonjol dari template ini adalah penggunaan kode SVG inline untuk ikon panah pada tombol navigasi (First, Previous, Next, Last).

  • Kejelasan Visual: Ikon panah (fa-arrow-alt-to-left, fa-arrow-alt-left, dll., yang merupakan representasi dari Font Awesome) memberikan petunjuk visual yang jelas dibandingkan hanya menggunakan teks seperti << atau Prev.
  • Performa dan Kualitas: SVG adalah Scalable Vector Graphics. Ini berarti ikon akan terlihat tajam dan jernih di resolusi layar manapun (Retina/HDPI) tanpa tergantung pada font eksternal (seperti harus memuat seluruh library Font Awesome), yang dapat mempercepat waktu loading halaman Anda.

Jika masih bingung dengan implementasi ini atau memiliki pertanyaan lebih lanjut, jangan ragu untuk berdiskusi! Anda dapat menanyakan pada GitHub Diskusi yang telah disediakan. Interaksi dengan komunitas akan sangat membantu dalam memecahkan masalah spesifik atau mencari alternatif solusi.

PHP
<?php 

$pager->setSurroundCount(2);
if (count($pager->links()) > 1) {
?>
<nav aria-label="Page navigation">
    <ul class="pagination justify-content-center">
    <?php if ($pager->hasPrevious()) : ?>
        <li class="page-item">
            <a class="page-link" href="<?= $pager->getFirst() ?>" aria-label="First">
                <span aria-hidden="true">
                    <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="arrow-alt-to-left" class="svg-inline--fa fa-arrow-alt-to-left fa-w-10" role="img" xmlns="[http://www.w3.org/2000/svg](http://www.w3.org/2000/svg)" viewBox="0 0 320 512"><path fill="currentColor" d="M304 400v-51.6h96c26.5 0 48-21.5 48-48v-88.6c0-26.5-21.5-48-48-48h-96v-51.6c0-42.6-51.7-64.2-81.9-33.9l-144 143.9c-18.7 18.7-18.7 49.1 0 67.9l144 144C252.2 464 304 442.7 304 400zM112 256l144-144v99.7h144v88.6H256V400L112 256zM36 448H12c-6.6 0-12-5.4-12-12V76c0-6.6 5.4-12 12-12h24c6.6 0 12 5.4 12 12v360c0 6.6-5.4 12-12 12z"></path></svg>
                </span>
            </a>
        </li>
        <li class="page-item">
            <a class="page-link" href="<?= $pager->getPrevious() ?>" aria-label="Previous">
                <span aria-hidden="true">
                    <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="arrow-alt-left" class="svg-inline--fa fa-arrow-alt-left fa-w-10" role="img" xmlns="[http://www.w3.org/2000/svg](http://www.w3.org/2000/svg)" viewBox="0 0 320 512"><path fill="currentColor" d="M272 431.952v-73.798h128c26.51 0 48-21.49 48-48V201.846c0-26.51-21.49-48-48-48H272V80.057c0-42.638-51.731-64.15-81.941-33.941l-176 175.943c-18.745 18.745-18.746 49.137 0 67.882l-176 175.952C220.208 496.042 272 474.675 272 431.952zM48 256L224 80v121.846h176v108.308H224V432L48 256z"></path></svg>
                </span>
            </a>
        </li>
    <?php endif ?>

    <?php foreach ($pager->links() as $link) : ?>
        <?php if ($link['active']) { ?>
        <li class="page-item active" aria-current="page">
            <span class="page-link">
            <?= $link['title'] ?>
            <span class="sr-only">(current)</span>
            </span>
        </li>
        <?php } else { ?>
        <li class="page-item">
            <a class="page-link" href="<?= $link['uri'] ?>">
                <?= $link['title'] ?>
            </a>
        </li>
        <?php } ?>
    <?php endforeach ?>

    <?php if ($pager->hasNext()) : ?>
        <li class="page-item">
            <a class="page-link" href="<?= $pager->getNext() ?>" aria-label="Previous">
                <span aria-hidden="true">
                    <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="arrow-alt-right" class="svg-inline--fa fa-arrow-alt-right fa-w-10" role="img" xmlns="[http://www.w3.org/2000/svg](http://www.w3.org/2000/svg)" viewBox="0 0 320 512"><path fill="currentColor" d="M176 80.048v73.798H48c-26.51 0-48 21.49-48 48v108.308c0 26.51 21.49 48 48 48h128v73.789c0 42.638 51.731 64.151 81.941 33.941l176-175.943c18.745-18.745 18.746-49.137 0-67.882l-176-175.952C227.792 15.958 176 37.325 176 80.048zM400 256L224 432V310.154H48V201.846h176V80l176 176z"></path></svg>
                </span>
            </a>
        </li>
        <li class="page-item">
            <a class="page-link" href="<?= $pager->getLast() ?>" aria-label="Last">
                <span aria-hidden="true">
                    <svg aria-hidden="true" focusable="false" data-prefix="far" data-icon="arrow-alt-to-right" class="svg-inline--fa fa-arrow-alt-to-right fa-w-10" role="img" xmlns="[http://www.w3.org/2000/svg](http://www.w3.org/2000/svg)" viewBox="0 0 320 512"><path fill="currentColor" d="M144 112v51.6H48c-26.5 0-48 21.5-48 48v88.6c0 26.5 21.5 48 48 48h96v51.6c0 42.6 51.7 64.2 81.9 33.9l144-143.9c18.7-18.7 18.7-49.1 0-67.9l-144-144C195.8 48 144 69.3 144 112zm192 144L192 400v-99.7H48v-88.6h144V112l144 144zm76-192h24c6.6 0 12 5.4 12 12v360c0 6.6-5.4 12-12 12h-24c-6.6 0-12-5.4-12-12V76c0-6.6 5.4-12 12-12z"></path></svg>
                </span>
            </a>
        </li>
    <?php endif ?>
    </ul>
</nav>
<?php } ?>