Membuat pagination merupakan proses mengurutkan data dengan nomor urut tertentu ke dalam beberapa page (halaman).

Hal ini penting untuk dilakukan mengingat data yang cukup banyak pada suatu halaman website.

Jika anda browsing di google, maka Anda akan melihat pada bagian bawah hasil penelusuran seperti gambar berikut:

Ya, google menggunakan pagination untuk menampilkan hasil dari pencarian yang dilakukan user.

Hal ini efektif untuk mempercepat penelusuran dan dapat memberikan pengalaman yang luar biasa bagi user (User Experience).

Jadi, sangatlah penting untuk membuat pagination untuk mempercepat load page dan meningkatkan pengalaman user (User Experience).

Framework PHP Codeigniter memberikan kemudahan dalam membuat pagination. Hal ini dikarenakan codeigniter telah menyediakan library pagination yang siap digunakan.

Akan tetapi, codeigniter tidak menyediakan style untuk pagination. Hanya berupa link biasa yang berbentuk nomor urut.

Hal ini merupakan hal yang baik, karena codeigniter memberikan kebebasan kepada developer untuk berkreasi atas style dari pagination tersebut.

Itulah kenapa kita membutuhkan BOOTSTRAP untuk mempercantik tampilan dari pagination.

Bootstrap merupakan framework yang berisi file CSS dan Javascript yang berfungsi untuk mempermudah developer untuk merancang UI (User Interface) suatu halaman website.

Bootstrap sendiri bersifat responsive yang membuat halaman web merender dengan baik pada berbagai perangkat dan ukuran jendela atau layar.

Nah, dengan mengkombinasikan Codeigniter dengan Bootstrap, maka akan didapatkan pagination yang cantik sekaligus responsive.

Mari kita mulai!

 

Step 1. Persiapan

Sebelum proses pembuatan, ada tahap yang tidak boleh anda lewatkan begitu saja. Yaitu tahap persiapan.

Apa saja yang perlu Anda persiapkan?

Berikut listnya:

#1. Codeiginter, jika anda belum memilikinya silahkan download di situs resminya www.codeigniter.com

#2. Bootstrap, bootstrap ini berfungsi untuk mempercantik tampilan. Jika anda belum memilikinya, silahkan download di situs resminya www.getbootstrap.com

Bootstrap yang digunakan adalah Bootstrap v4.0+.

 

Step 2. Buat Struktur database dan table

Berikutnya, yang perlu Anda lakukan adalah membuat database dan struktur table.

#1. Database, buat database dengan mengeksekusi query berikut:

CREATE DATABASE db_akademik;

Pada query diatas, anda akan mendapatkan sebuah database dengan nama db_akademik.

#2. Table, buat Tabel mahasiswa dengan mengeksekusi query berikut:

CREATE TABLE mahasiswa(
nim VARCHAR(15) PRIMARY KEY,
nama VARCHAR(50),
prodi VARCHAR(40)
)ENGINE=INNODB;

Query diatas akan menghasil sebuah tabel mahasiswa dengan field nim dengan type data varchar(15), nama dengan type data varchar(50), dan prodi dengan type data varchar(40).

 

Step 3. Insert data kedalam table mahasiswa.

Agar pagination yang kita dibuat dapat dilihat hasilnya, inputkan beberapa data kedalam table mahasiswa.

Semakin banyak data yang diinputkan, semakin bagus.

Untuk percobaan silahkan eksekusi query berikut untuk menginput data kedalam table mahasiswa:

INSERT INTO mahasiswa (nim, nama, prodi) VALUES 
('1210158', 'M Fikri', 'Sistem Informasi'),
('1210381', 'Amber Heard', 'Akuntansi'),
('1219482', 'Mario', 'Psikologi'),
('1139744', 'Muller', 'Sistem Komputer'),
('1210382', 'Joko', 'Teknik Sipil'),
('1324387', 'Daniell Champbell', 'Multimedia');

Query diatas akan menghasilkan data sebanyak 6 record. Sangat disarankan bagi anda untuk menginputkan data lebih dari 6 record.

 

Step 4. Instalasi Codeigniter

Extract codeigniter yang sudah di download sebelumnya ke folder www (jika menggunakan wampserver) atau htdocs (jika menggunakan XAMPP).

Kemudian rename (ganti nama) project codeigniter Anda sesuai dengan project Anda. Disini saya memberi nama pagination.

Setelah di extract, buat folder assets sejajar dengan folder application dan system, kemudian sertakan file bootstrap didalam folder assets.

Sehingga terlihat struktur project kita seperti berikut:

Pada gambar diatas dapat dilihat, bahwa didalam folder assets terdapat folder css, dan js.

Didalam folder css, terdapat file bootstrap.css

Didalam folder js, terdapat file bootstrap.js.

 

Step 5. Konfigurasi Codeigniter

Lakukan konfigurasi pada beberapa file berikut:

Buka application/config/autoload.php atur menjadi seperti berikut:

$autoload['libraries'] = array('database');
$autoload['helper'] = array('url');

Buka application/config/config.php dan atur menjadi seperti berikut:

$config['base_url'] = 'http://localhost/pagination/';

Terakhir buka application/config/database.php

$active_group = 'default';
$query_builder = TRUE;

$db['default'] = array(
        'dsn'   => '',
        'hostname' => 'localhost',
        'username' => 'root',
        'password' => '',
        'database' => 'db_akademik', //sesuaikan dengan database anda!
        'dbdriver' => 'mysqli',
        'dbprefix' => '',
        'pconnect' => FALSE,
        'db_debug' => (ENVIRONMENT !== 'production'),
        'cache_on' => FALSE,
        'cachedir' => '',
        'char_set' => 'utf8',
        'dbcollat' => 'utf8_general_ci',
        'swap_pre' => '',
        'encrypt' => FALSE,
        'compress' => FALSE,
        'stricton' => FALSE,
        'failover' => array(),
        'save_queries' => TRUE
);

 

Step 6. Buat model dengan nama Mahasiswa_model.php kemudian copykan kode berikut:

<?php
class Mahasiswa_model extends CI_Model{
   
    //ambil data mahasiswa dari database
    function get_mahasiswa_list($limit, $start){
        $query = $this->db->get('mahasiswa', $limit, $start);
        return $query;
    }
} 

Pada model mahasiswa_model.php terdapat satu function yaitu function get_mahasiswa_list().

Function get_mahasiswa_list() ini berfungsi untuk mengambil data dari table mahasiswa yang ada di database kemudian dilimit sesuai dengan nilai pada variable $limit.

 

Step 7. Buat controller dengan nama Mahasiswa.php kemudian copykan kode berikut:

<?php
class Mahasiswa extends CI_Controller{

    function __construct(){
        parent::__construct();
        //load libary pagination
        $this->load->library('pagination');

        //load the department_model
        $this->load->model('mahasiswa_model');
    }

    function index(){

        //konfigurasi pagination
        $config['base_url'] = site_url('mahasiswa/index'); //site url
        $config['total_rows'] = $this->db->count_all('mahasiswa'); //total row
        $config['per_page'] = 5;  //show record per halaman
        $config["uri_segment"] = 3;  // uri parameter
        $choice = $config["total_rows"] / $config["per_page"];
        $config["num_links"] = floor($choice);

        // Membuat Style pagination untuk BootStrap v4
          $config['first_link']       = 'First';
        $config['last_link']        = 'Last';
        $config['next_link']        = 'Next';
        $config['prev_link']        = 'Prev';
        $config['full_tag_open']    = '<div class="pagging text-center"><nav><ul class="pagination justify-content-center">';
        $config['full_tag_close']   = '</ul></nav></div>';
        $config['num_tag_open']     = '<li class="page-item"><span class="page-link">';
        $config['num_tag_close']    = '</span></li>';
        $config['cur_tag_open']     = '<li class="page-item active"><span class="page-link">';
        $config['cur_tag_close']    = '<span class="sr-only">(current)</span></span></li>';
        $config['next_tag_open']    = '<li class="page-item"><span class="page-link">';
        $config['next_tagl_close']  = '<span aria-hidden="true">&raquo;</span></span></li>';
        $config['prev_tag_open']    = '<li class="page-item"><span class="page-link">';
        $config['prev_tagl_close']  = '</span>Next</li>';
        $config['first_tag_open']   = '<li class="page-item"><span class="page-link">';
        $config['first_tagl_close'] = '</span></li>';
        $config['last_tag_open']    = '<li class="page-item"><span class="page-link">';
        $config['last_tagl_close']  = '</span></li>';

        $this->pagination->initialize($config);
        $data['page'] = ($this->uri->segment(3)) ? $this->uri->segment(3) : 0;

        //panggil function get_mahasiswa_list yang ada pada mmodel mahasiswa_model. 
        $data['data'] = $this->mahasiswa_model->get_mahasiswa_list($config["per_page"], $data['page']);           

        $data['pagination'] = $this->pagination->create_links();

        //load view mahasiswa view
        $this->load->view('mahasiswa_view',$data);
    }
}

Pada controller Mahasiswa.php terdapat dua function, yaitu function __construct() dan function index().

Function __construct(), berfungsi sebagai constructor yang memanggil library pagination dan model mahasiswa_model.

Sedangkan function index(),  merupakn function yang dipanggil ketika controller Mahasiswa.php dipanggil.

Function index() ini, memanggil sebuah view dengan nama mahasiswa_view sekaligus membawa data mahasiswa dari database.

Untuk lebih jelasnya, perhatikan setiap baris kode yang saya beri komentar!.

 

Step 8. Buat view dengan nama mahasiswa_view.php kemudian copykan kode berikut:

<html lang="id">
<head>
        <meta charset="utf-8">
        <title>Data Mahasiswa</title>
        <!--Load file bootstrap.css-->
        <link rel="stylesheet" type="text/css" href="<?php echo base_url().'assets/css/bootstrap.css'?>">
</head>
<body>

<div class="container">
        <h1>Data <strong>Mahasiswa</strong></h1>

        <table class="table table-striped">
                <thead>
                        <tr>
                                <th>NIM</th>
                                <th>NAMA</th>
                                <th>PRODI</th>
                        </tr>
                </thead>
                <tbody>
                        <!--Fetch data dari database-->
            <?php foreach ($data->result() as $row) :?>
                <tr>
                    <td><?php echo $row->nim; ?></td>
                    <td><?php echo $row->nama; ?></td>
                    <td><?php echo $row->prodi; ?></td>
                </tr>
            <?php endforeach; ?>
        </tbody>
        </table>
    <div class="row">
        <div class="col">
                <!--Tampilkan pagination-->
                <?php echo $pagination; ?>
        </div>
    </div>
     

</div>
<!--Load file bootstrap.js-->
<script type="text/javascript" src="<?php echo base_url().'assets/js/bootstrap.js'?>"></script>
</body>
</html>

View mahasiswa_view.php ini berfungsi untuk menampilkan data yang ada di database melalui controller Mahasiswa.php.

 

Step 9. Selesai.

Selamat anda telah selesai membuat pagination dengan codeigniter sekaligus memberikan style bootstrap v4.

Untuk menguji apakah pagination yang dibuat berjalan dengan baik silahkan kunjungi url:

http://localhost/pagination/index.php/mahasiswa/

jika tidak ada error, maka akan tampil seperti gambar berikut:

 

Kesimpulan

Pembahasan kali ini adalah tentang penggunaan library pagination di CodeIgniter.

Pagination merupakan proses mengurutkan data dengan nomor urut tertentu ke dalam beberapa page (halaman).

Hal ini efektif untuk mempercepat load data dan dapat memberikan pengalaman yang luar biasa bagi user (User Experience).

Codeigniter merupakan framework PHP yang memberikan kemudahan dalam membuat pagination.

Hal ini dikarenakan codeigniter telah menyediakan library pagination yang siap digunakan.

Bootstrap merupakan framework untuk mempercantik user interface (UI).

Dengan mengkombinasikan Codeigniter dengan Bootstrap, maka akan didapatkan pagination yang cantik sekaligus responsive.

Download Source