Days
Hours
Minutes
Seconds

Promo Grand Opening

15% OFF

Khusus Pelanggan Baru

Tutorial CodeIgniter #13 : Membuat Pagination CodeIgniter

 

Pagination adalah salah satu fitur penting yang sering digunakan pada website, terutama saat menampilkan daftar data dalam jumlah besar. Tujuannya adalah untuk memecah data menjadi beberapa halaman, sehingga website tidak perlu memuat semua data sekaligus dan performanya tetap optimal. Pada tutorial ini, kita akan mempelajari cara membuat pagination di CodeIgniter dengan mudah.


 

Persiapan Awal

 

Pastikan Anda sudah memiliki:

  1. Proyek CodeIgniter: Proyek CodeIgniter sudah berjalan dengan baik.
  2. Koneksi Database: Database sudah terhubung.
  3. Tabel dengan Banyak Data: Anda memiliki tabel database dengan banyak data. Jika Anda mengikuti seri tutorial ini, tabel mahasiswa kita sudah cukup. Pastikan ada lebih dari 10-20 data agar pagination terlihat jelas.

 

Langkah 1: Konfigurasi Library Pagination

 

CodeIgniter menyediakan sebuah library khusus untuk pagination. Kita perlu mengaktifkan dan mengkonfigurasinya.

Buka file autoload.php di folder application/config. Cari baris berikut dan tambahkan pagination di array $autoload['libraries']:

PHP

$autoload['libraries'] = array('database', 'pagination');

Dengan begini, library pagination akan otomatis dimuat di setiap controller yang Anda gunakan.


 

Langkah 2: Membuat Controller

 

Kita akan membuat sebuah controller baru untuk mengelola halaman dengan pagination. Buat file Mahasiswa.php di dalam folder application/controllers.

application/controllers/Mahasiswa.php

PHP

<?php
defined('BASEPATH') OR exit('No direct script access allowed');

class Mahasiswa extends CI_Controller {

    function __construct(){
        parent::__construct();
        $this->load->model('m_mahasiswa');
        $this->load->helper('url');
    }

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

        // 1. Mengambil total data dari database
        $config['total_rows'] = $this->m_mahasiswa->jumlah_data();
        $config['per_page'] = 5; // Jumlah data per halaman

        // 2. Mengatur URL dasar untuk pagination
        $config['base_url'] = base_url().'mahasiswa/index/';
        $config['uri_segment'] = 3;

        // 3. Konfigurasi tampilan pagination (opsional)
        $config['full_tag_open'] = '<ul class="pagination">';
        $config['full_tag_close'] = '</ul>';
        $config['first_tag_open'] = '<li>';
        $config['first_tag_close'] = '</li>';
        $config['last_tag_open'] = '<li>';
        $config['last_tag_close'] = '</li>';
        $config['next_link'] = '&gt;';
        $config['next_tag_open'] = '<li>';
        $config['next_tag_close'] = '</li>';
        $config['prev_link'] = '&lt;';
        $config['prev_tag_open'] = '<li>';
        $config['prev_tag_close'] = '</li>';
        $config['cur_tag_open'] = '<li class="active"><span>';
        $config['cur_tag_close'] = '</span></li>';
        $config['num_tag_open'] = '<li>';
        $config['num_tag_close'] = '</li>';

        // 4. Inisialisasi library pagination
        $this->pagination->initialize($config);

        // 5. Mengambil data dengan limit dan offset
        $data['halaman'] = $this->uri->segment(3);
        $data['mahasiswa'] = $this->m_mahasiswa->data_mahasiswa($config['per_page'], $data['halaman']);

        // 6. Membuat link pagination
        $data['pagination'] = $this->pagination->create_links();

        $this->load->view('v_mahasiswa', $data);
    }
}
  • $config['total_rows']: Total data yang ada di tabel, diambil dari model.
  • $config['per_page']: Jumlah data yang akan ditampilkan per halaman.
  • $config['base_url']: URL dasar untuk link pagination.
  • $config['uri_segment']: Segmen URI yang berisi nomor halaman.
  • $data['mahasiswa']: Mengambil data dari model, dengan limit (jumlah data per halaman) dan offset (nomor halaman) yang ditentukan.
  • $data['pagination']: Menghasilkan HTML untuk link-link pagination yang bisa kita tampilkan di view.

 

Langkah 3: Membuat Model

 

Kita memerlukan model untuk berinteraksi dengan database. Buat file m_mahasiswa.php di dalam folder application/models.

application/models/m_mahasiswa.php

PHP

<?php
defined('BASEPATH') OR exit('No direct script access allowed');

class M_mahasiswa extends CI_Model{

    function jumlah_data(){
        return $this->db->get('mahasiswa')->num_rows();
    }

    function data_mahasiswa($number, $offset){
        return $this->db->get('mahasiswa', $number, $offset)->result();
    }
}
  • jumlah_data(): Fungsi ini menghitung total baris data di tabel mahasiswa.
  • data_mahasiswa($number, $offset): Fungsi ini mengambil data dari tabel dengan parameter limit ($number) dan offset ($offset) yang dikirim dari controller.

 

Langkah 4: Membuat View

 

Sekarang, kita buat view untuk menampilkan data dan link pagination. Buat file v_mahasiswa.php di folder application/views.

application/views/v_mahasiswa.php

PHP

<!DOCTYPE html>
<html>
<head>
    <title>Data Mahasiswa</title>
    <style type="text/css">
        .pagination li{
            display: inline-block;
            margin: 0 5px;
            list-style: none;
        }
        .pagination li a, .pagination li span {
            padding: 8px 12px;
            text-decoration: none;
            background-color: #f2f2f2;
            color: #333;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
        .pagination li.active a, .pagination li.active span {
            background-color: #4CAF50;
            color: white;
            border: 1px solid #4CAF50;
        }
    </style>
</head>
<body>
    <center>
        <h3>Data Mahasiswa</h3>
    </center>
    <table style="margin:20px auto;" border="1">
        <thead>
            <tr>
                <th>No</th>
                <th>Nama</th>
                <th>NIM</th>
                <th>Jurusan</th>
            </tr>
        </thead>
        <tbody>
            <?php
            // $no = $halaman+1; // Jika Anda menggunakan $uri->segment(3) sebagai offset
            $no = 1;
            foreach($mahasiswa as $m){
            ?>
            <tr>
                <td><?php echo $no++; ?></td>
                <td><?php echo $m->nama; ?></td>
                <td><?php echo $m->nim; ?></td>
                <td><?php echo $m->jurusan; ?></td>
            </tr>
            <?php
            }
            ?>
        </tbody>
    </table>
    <br/>
    <center>
        <?php echo $pagination; ?>
    </center>
</body>
</html>
  • <?php echo $pagination; ?>: Kode ini akan menampilkan link-link pagination yang sudah kita buat di controller. Anda juga bisa menambahkan CSS untuk mempercantik tampilannya.

 

Kesimpulan

 

Membuat pagination di CodeIgniter sangatlah mudah. Dengan memanfaatkan library pagination yang sudah ada, kita hanya perlu melakukan tiga hal:

  1. Konfigurasi: Menentukan total data, jumlah data per halaman, dan URL dasar.
  2. Mengambil Data: Menggunakan model untuk mengambil data dengan limit dan offset.
  3. Menampilkan: Meneruskan data dan link pagination ke view.

Dengan menerapkan pagination, aplikasi web Anda akan lebih efisien dan ramah pengguna, terutama saat berhadapan dengan data dalam jumlah besar.

Wawasan Terbaru

Gemini_Generated_Image_wfw5uwwfw5uwwfw5
Mengenal Dunia Grafis: Dari Piksel Hingga Vektor, Kekuatan Visual di Era Digital
Gemini_Generated_Image_b6dimfb6dimfb6di
Mengenal Foundation: Kerangka Kerja Front-End Profesional untuk Web Responsif
Gemini_Generated_Image_sx3ztpsx3ztpsx3z
CSS
Mempercantik Website dengan CSS: Seniman di Balik Tampilan Web 🎨
Gemini_Generated_Image_e013qke013qke013
Mengenal HTML: Fondasi dari Setiap Halaman Website 🌐
Gemini_Generated_Image_ldki4nldki4nldki
Menyelami Dunia Coding: Seni Berbicara dengan Komputer
Gemini_Generated_Image_dpvliydpvliydpvl
Menguasai GIT: Fondasi Penting dalam Dunia Pengembangan Perangkat Lunak
Gemini_Generated_Image_sqcib9sqcib9sqci
Tutorial Python #12: Mengenal Jenis-jenis Operator dalam Python
Gemini_Generated_Image_o1bw3do1bw3do1bw
Memahami Tipe Data Dictionary dalam Python
Gemini_Generated_Image_ko4ixfko4ixfko4i
Mengenal Tipe Data Set dalam Python
Gemini_Generated_Image_1xop7m1xop7m1xop
Tuple dalam Python: Pengenalan dan Tutorial

Wawasan Serupa

Gemini_Generated_Image_4mxd334mxd334mxd
Gemini_Generated_Image_ursc84ursc84ursc
ef5c8286-b6c4-4e25-b155-697374d570dc
Gemini_Generated_Image_m1hsycm1hsycm1hs

Ceritakan Detail Proyekmu

Mulai dari 30K aja, solusi IT kamu langsung jalan tanpa drama.

Kata Mereka Tentang Solusi Coding

Dipercaya oleh lebih dari 200++ client untuk menyelesaikan proyeknya dengan total 250++ proyek dari berbagai jenis proyek