Ilmu Coding Ilmucoding.com - Merupakan situs yang membantu Anda belajar coding lebih mudah, nyaman, interaktif dan profesional. Belajar sekarang di ilmu coding. GRATIS

Tutorial Custom Pagination dengan Codeigniter 4 dan Bootstrap

12 min read

Tutorial Custom Pagination di Codeigniter 4

Tutorial Custom Pagination Codeigniter 4 dan Bootstrap. Sebelumnya ilmucoding sudah membahas tutorial CRUD menggunakan Codeigniter 4. Ternyata banyak dari pembaca menanti tutorial selanjutnya yang membahas Codeigniter 4 ini. Akhirnya kami memutuskan untuk menulis tutorial custom pagination dengan Codeigniter 4 dan Bootstrap.

Banyak yang beranggapan bahwa Codeigniter versi 3 dan versi 4 tidak jauh berbeda. Namun saya tidak ingin memperbincangkan hal itu. Sebab dengan mengikuti tutorial kali ini, Anda akan tahu sejauh mana perbedaan keduanya.

Tentang Pagination

Pagination merupakan salah satu cara yang bisa mempercepat proses menampilkan data. Di pagination, data yang tampil bisa dibatasi. Sehingga hal ini akan membuat performa website semakin meningkat yang tidak membutuhkan load data yang begitu banyaki

Bayangkan jika menggunakan datatable yang meload hampir semua data. Bila data mencapai ratusan ribu, tak terbayang seberapa besar pengaruh terhadap performa website Anda.

Untungnya di tutorial kali ini kami akan membahasnya dengan Codeigniter versi ke 4. Sekedar mengingatkan kalau di versi sebelumnya untuk membuat pagination amatlah rumit. Bahkan untuk menampilkan pagination dengan tambahan bootstrap cukup memakan waktu.

Kini hal itu tidak terjadi lagi di Codeigniter 4. Mari kita mulai ngoding…

Lets go!

Cara Membuat Fitur Pagination di Codeigniter 4

Codeigniter 4 memiliki default bawaan dan secara tampilan sangat membosankan. Namun tidak ada salahnya kita coba membuat pagination dengan default bawaan terlebih dahulu. Kemudian nanti kita juga akan membuat custom pagination dengan Codeigniter 4 dan bootstrap.

Step #1 – Download Codeigniter 4

Download Codeigniter 4 di situs resminya di sini. Anda juga bisa mempelajari cara install dan menjalankan Codeigniter 4 di tutorial kami sebelumnya.

Step #2 – Menggunakan jQuery dan Bootstrap

Untuk penggunaan jQuery dan Bootstrap kami menggunakannya secara online dan Anda bisa mengikuti langkah-langkah tersebut di situs resminya.

Step #3 – Membuat Database dan Konfigurasinya

Aktifkan Apache dan MySql pada software XAMPP (Anda bisa menyesuaikan dengan software lainnya). Kemudian buka browser dan ketik:

localhost/phpmyadmin

Buat database baru bernama ci4_pagination

Selanjutnya buka Database.php yang berada di direktori app/Config/Database.php.

Ubah bagian ini:

public $default = [
    'DSN'      => '',
    'hostname' => 'localhost',
    'username' => '',
    'password' => '',
    'database' => '',
    'DBDriver' => 'MySQLi',
    'DBPrefix' => '',
    'pConnect' => false,
    'DBDebug'  => (ENVIRONMENT !== 'production'),
    'cacheOn'  => false,
    'cacheDir' => '',
    'charset'  => 'utf8',
    'DBCollat' => 'utf8_general_ci',
    'swapPre'  => '',
    'encrypt'  => false,
    'compress' => false,
    'strictOn' => false,
    'failover' => [],
    'port'     => 3306,
]; 

Menjadi:

public $default = [
    'DSN'      => '',
    'hostname' => 'localhost',
    'username' => 'root',
    'password' => '',
    'database' => 'ci4_pagination',
    'DBDriver' => 'MySQLi',
    'DBPrefix' => '',
    'pConnect' => false,
    'DBDebug'  => (ENVIRONMENT !== 'production'),
    'cacheOn'  => false,
    'cacheDir' => '',
    'charset'  => 'utf8',
    'DBCollat' => 'utf8_general_ci',
    'swapPre'  => '',
    'encrypt'  => false,
    'compress' => false,
    'strictOn' => false,
    'failover' => [],
    'port'     => 3306,
]; 

Step #4 – Membuat Table Users

Pada umumnya sebuah tutorial mesti menggunakan studi kasus. Nah pada kesempatan kali ini kita akan membuat table users.

Ketik command berikut melalui terminal:

php spark migrate:create users

Kemudian pada function up() modifikasi menjadi:

public function up()
{
    $this->forge->addField([
        'id'            => [
            'type'           => 'INT',
            'constraint'     => 11,
            'unsigned'       => TRUE,
            'auto_increment' => TRUE
        ],
        'first_name'    => [
            'type'           => 'VARCHAR',
            'constraint'     => '100',
        ],
        'last_name'     => [
            'type'           => 'VARCHAR',
            'constraint'     => '100',
        ],
        'age'           => [
            'type'           => 'INT',
            'constraint'     => 11,
        ],
        'address' => [
            'type'           => 'TEXT',
            'null'           => TRUE,
        ],
    ]);
    $this->forge->addKey('id', TRUE);
    $this->forge->createTable('users');
} 

Setelah memodikasi function up(), kini saatnya melakukan migrate.

Ketik command di bawah ini:

php spark migrate

Hasilnya bisa Anda lihat telah terbentuk table baru dengan spesifikasi yang sudah kita tentukan.

tutorial custom pagination dengan codeigniter 4 dan bootstrap

Luar biasa!

***

Sampai di sini kita akan memasuki tahap membuat pagination dengan codeigniter 4. Ada 2 pilihan yang tersedia, yaitu:

  1. Default pagination Codeigniter 4
  2. Tutorial Custom pagination dengan Codeigniter 4 dan Bootstrap

Mari kita bahas satu per satu.

Tutorial Membuat Default Pagination dengan Codeigniter 4

Oke, langsung saja ikuti tutorial berikut ini.

Step #1 – Buat Controller User

Buat User.php dan simpan di direktori app/Controllers/User.php

Ketik kode berikut ini:

<?php namespace App\Controllers;

use CodeIgniter\Controller;

class User extends Controller
{
    public function index()
    {
        $pager = \Config\Services::pager();
        $model = new \App\Models\UserModel();

        $data = [
            'users' => $model->paginate(2),
            'pager' => $model->pager
        ];

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

Penjelasan:

$pager = \Config\Services::pager(); adalah library yang akan kita gunakan untuk memanggil pagination.

$model = new \App\Models\UserModel(); adalah variable yang menampung class Model UserModel.

$data = [
    'users' => $model->paginate(2),
    'pager' => $model->pager
]; 

Merupakan collection array yang berisi key users dengan value model dengan pagination per 2 data. Kemudian key pager akan menampung library pagination itu sendiri.

Terakhir, collection data akan kita kirimkan ke view dengan baris kode return view('users/index', $data);

Step #2 – Membuat Model User

Buat file bernama UserModel.php dan simpan di direktori app/Models/UserModel.php.

Kodenya seperti di bawah ini:

<?php namespace App\Models;

use CodeIgniter\Model;

class UserModel extends Model
{
    protected $table = 'users';
} 

Penjelasan:

Cukup mudah memahami model kali ini. Intinya pada protected $table = 'users'; yang bertujuan untuk menentukan table yang akan digunakan.

Step #3 – Membuat View User

Cobalah untuk membuat folder bernama user di direktori app/Views sehingga kita akan membuat file index.php di dalamnya.

App/Views/user/index.php

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Users</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css">
</head>
<body>

    <div class="container mt-5 mb-5 text-center">
        <h4>Tutorial Membuat Custom Pagination di Codeigniter 4 - Ilmu Coding</h4>
    </div>
    <div class="container">
        <div class="table-responsive">
            <table class="table table-bordered">
                <thead>
                    <th>No</th>
                    <th>Name</th>
                    <th>Age</th>
                    <th>Address</th>
                </thead>
                <tbody>
                    <?php 
                    foreach($users as $key => $data) { ?>
                    <tr>
                        <td><?php echo $key+1; ?></td>
                        <td><?php echo $data['first_name']." ".$data['last_name']; ?></td>
                        <td><?php echo $data['age']; ?></td>
                        <td><?php echo $data['address']; ?></td>
                    </tr>
                    <?php } ?>
                </tbody>
            </table>
        </div>
        <?= $pager->->links() ?>
    </div>
    
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html> 

Penjelasan:

Penjelasannya terletak pada bagian <?php echo $pager->links(); ?> yang berfungsi untuk menampilkan pagination di dalam view.

Step #4 – Menjalankan Default Pagination Codeigniter 4

Sekarang coba ketik command berikut di terminal:

php spark serve

Kemudian buka link berikut ini di browser Anda:

localhost:8080/user

Hasilnya:

tutorial custom pagination dengan codeigniter 4 dan bootstrap

***

Alhamdulillah tutorial membuat fitur default pagination dengan Codeigniter 4 telah selesai, sekarang saatnya membuat tutorial custom pagination dengan Codeigniter 4 dan bootstrap.

Tutorial Custom Pagination Dengan Codeigniter 4 dan Bootstrap

Step #1 – Modifikasi Controller User

Perhatikan pada baris kode di bawah ini:

'users' => $model->paginate(2), 

Ubah menjadi:

'users' => $model->paginate(2, 'bootstrap'), 

Step #2 – Buat View Pagination Bootstrap

Salah satu point penting dari custom pagination menggunakan bootstrap adalah membuat view yang mempresentasikan pagination bawaan bootstrap. Anda bisa membuat folder Pagers pada direktori app/Views kemudian buat file bernama bootstrap_pagination.php.

app/Views/Pagers/bootstrap_pagination.php

<?php
/**
 * @var \CodeIgniter\Pager\PagerRenderer $pager
 */

$pager->setSurroundCount(2);
?>
<nav aria-label="<?= lang('Pager.pageNavigation') ?>">
    <ul class="pagination">
        <?php if ($pager->hasPrevious()) : ?>
            <li class="page-item">
                <a href="<?= $pager->getPrevious() ?>" class="page-link" aria-label="<?= lang('Pager.previous') ?>">
                    <span>«</span>
                </a>
            </li>
        <?php endif ?>

        <?php foreach ($pager->links() as $link) : ?>
            <li <?= $link['active'] ? 'class="active page-item"' : 'class="page-item"' ?>>
                <a href="<?= $link['uri'] ?>" class="page-link">
                    <?= $link['title'] ?>
                </a>
            </li>
        <?php endforeach ?>

        <?php if ($pager->hasNext()) : ?>
            <li class="page-item">
                <a href="<?= $pager->getNext() ?>" aria-label="<?= lang('Pager.next') ?>" class="page-link">
                    <span aria-hidden="true">»</span>
                </a>
            </li>
        <?php endif ?>
    </ul>
</nav>

 

Step #3 – Daftarkan View Pagination Bootstrap Anda di Config

Sekarang buka file app/Config/Pagers.php

Cari baris kode berikut:

public $templates = [
    'default_full'   => 'CodeIgniter\Pager\Views\default_full',
    'default_simple' => 'CodeIgniter\Pager\Views\default_simple',
    'default_head'   => 'CodeIgniter\Pager\Views\default_head',
]; 

Kemudian tambahkan:

public $templates = [
    'default_full'   => 'CodeIgniter\Pager\Views\default_full',
    'default_simple' => 'CodeIgniter\Pager\Views\default_simple',
    'default_head'   => 'CodeIgniter\Pager\Views\default_head',
    'bootstrap_pagination'   => 'App\Views\Pagers\bootstrap_pagination',
]; 

Perhatikan yang dicetak tebal di atas.

Step #4 – Modifikasi Pemanggilan Pagination di View

Langkah berikutnya adalah memodifikasi pemanggilan pagination pada halaman view user/index.php

Semula:

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

Ubah menjadi:

<?php echo $pager->links('bootstrap', 'bootstrap_pagination') ?> 

Step #5 – Jalankan dan Uji Coba

Setelah semuanya selesai sekarang Anda bisa menjalankan localhost:8080/user dan lihat perbedaannya di bawah ini:

tutorial custom pagination dengan codeigniter 4 dan bootstrap

Sekarang tampilan paginationnya sudah lebih baik. Alhamdulillah.

***

Penutup

Alhamdulillah telah selesai artikel tutorial custom pagination dengan codeigniter 4 dan bootstrap. Sekarang Anda sudah bisa mempraktikkannya di dalam project. Silahkan coba buat dengan studi kasus lainnya agar Anda semakin terbiasa dengan Codeigniter 4 tutama dalah hal pagination.

Selamat belajar …

Semoga sukses. Aamiin.

Ilmu Coding Ilmucoding.com - Merupakan situs yang membantu Anda belajar coding lebih mudah, nyaman, interaktif dan profesional. Belajar sekarang di ilmu coding. GRATIS

19 Replies to “Tutorial Custom Pagination dengan Codeigniter 4 dan Bootstrap”

  1. Terimakaih sudah bikin tutorial lengkap dengan penjelasannya. Request templating bootstrap CI4 tutorial berikutnya.

    1. Terima kasih Mas Budiawan sudah berkunjung. InsyaAllah saya buatkan. Mohon dukungannya.

  2. Mas saya memiliki data hasil Query Where (100 data hasil where, saya memiliki 1000 data jika tanpa where)
    gimana saya membuat pagination perpage 10 dari hasil Query itu?

    1. Saran mending pakai 10 data aja mas untuk paginationnya. 100 kebanyakan.
      Bisa pakai $model->paginate(10). Kalau mau ditambahin, ganti angka 10nya.

      1. mas saya punya mdel barang dengan method getBarang dengan isi
        $barang = $this->builder->orderBy(‘barang_id’,’desc’)->get()->getResult();
        //Hasil ada 100 barang

        lalu saya memanggil di controller dengan
        $data[‘barang’] = $this->barangModel->sortBarang($sort);

        dimana saya harus menambahkan paginate(10) nya?

  3. kak, nanya saya kok link halaman 1 2 3 nya malah URL-ya ngaco ke localhost/barang?page=1 bukan ke localhost/ci4_penjualan/public/barang?page=1

  4. terimakasih kak tutorialnya sangat membantu,,,
    kak kalo pagination dengan pencarian gimana ya, saya kok lihat di dokumentasi ci4 yg code nya kurang lebih gini ya “echo $pager->only([‘search’, ‘order’])->links();” tapi kok bingung ya, itu maksudnya gimana?

  5. Supaya pagination bisa jadi urut berdasarkan id secara descending bagaimana ya?
    Saya coba hasil query orderby(‘id’, ‘desc’) tidak bisa terus.

  6. Haloo saya ingin tanya bagaimana kita menggunakan pagination tapi di query builder yang data nya saya dapatkan dengan join beberapa table

Leave a Reply

Your email address will not be published. Required fields are marked *

Jika terbantu dengan artikel ini, silahkan share, beri komentar dan "klik" 1 kali pada iklan ya.