Membuat Pagination dengan Codeigniter 4

Tutorial Membuat Pagination dengan codeigniter 4 - Pagination merupakan sebuah fitur yang digunakan untuk membagi suatu resource/data menjadi beberapa bagian kecil yang terpisah. Dalam dunia web pagination digunakan untuk memecah resource/data yang besar (yang ada didalam database) agar mudah ditangani oleh user.

Pada dasarnya jika kita menggunakan pagination pada website kita sama dengan kita membatasi data yang kita tampilkan kemudian kita pecah menjadi beberapa halaman yang saling terhubung. Mengapa kita perlu menggunakan pagination dalam website ?  karena jika kita tidak menggunakan pagination dalam aplikasi website kita yang sudah mempunyai ratusan ribu data maka yang terjadi pada website kita adalah load yang sangat lama dan server akan bekerja ekstra untuk menampilkan data yang kita minta.  

Mungkin pada diri kita bertanya mengapa kita harus membuat pagination tidak menggunakan datatable saja , karena dalam datatable sistimnya adalah datatable akan meload hampir semua data terlebih dahulu kemudian baru ditampilkan perpage, jadi jika kita mempunyai ratusan ribu data dan menggunakan datatable maka yang terjadi adalah seperti diatas load data yang lama dan sangat mempengaruhi performa website kita.

Pagination yang akan kita buat kali ini dengan menggunakan framework codeigniter 4, framework codeigmiter atau sering disingkat dengan CI merupakan sebuah kerangka kerja PHP yang cukup populer dikalangan web development Indonesia karena penggunaannya yang cukup mudah dan performa yang lumayan.

Pada pembuatan pagination di codeigniter 4 ini tidak serumit dengan codeigniter versi sebelumnya yang sedikit agak rumit dan memakan lumayan banyak waktu, Ok langsung saja kita ke tutorialnya.

Installasi Codeigniter 4

Seperti biasa saat kita memulai sebuah aplikasi jika kita belum mempunyai aplikasi tersebut maka yang kita lakukan adalah installasi aplikasi, Jika kalian belum paham tentang cara installasi Codeigniter 4 saya sudah membahasnya di artikel sebelumnya yaitu Cara Installasi Codeigniter 4

Membuat Database

Sebelum melaju kelangkah selanjutnya kita buat dulu database yang digunakan untuk menyimpan data kita. Disini saya membuat database dengan nama Sekolah dan juga tabel siswa seperti dibawah ini .

mysql> create database sekolah;
Query OK, 1 row affected (0.00 sec)
mysql> create table siswa (ID int(5) not null AUTO_INCREMENT, NamaLengkap varchar(50), Kelas varchar(20), PRIMARY KEY(ID));
Query OK, 0 rows affected (0.53 sec)

Jika tabel sudah berhasil dibuat maka silahkan input minimal 50 data ke dalam tabel tersebut.

Membuat Koneksi Database

Setelah berhasil install codeigniter 4 dan berhasil membuat database maka kita bisa melanjutkan ke langkah selanjutnya yaitu membuat koneksi database.

Dalam membuat koneksi database di codeigniter 4 ada dua cara yaitu cara yang pertama dengan mengubah file env menjadi .env (tambah titik di depan) kemudian edit beberapa kode koneksinya  yang kedua yaitu dengan file Database.php yang ada di foolder app/config untuk yang kedua ini sama dengan versi codeigniter yang sebelumnya, dan kali ini kita akan membuat koneksi database dengan file .env silahkan buka file env yang ada di folder root CI 4 kalian save as menjadi .env kemudian cari kode koneksi seperti dibawah ini 

 database.default.hostname = localhost
 database.default.database = sekolah
 database.default.username = root
 database.default.password = 
 database.default.DBDriver = MySQLi

Setelah kode daiatas ketemu silahkan hilangkan tanda pagar dan juga sesuaikan dengan host, database, username, dan password kalian, dan satu lagi jangan lupa untuk mengubah ke mode development karena aplikasi masih dalam tahap pengembangan caranya silahkan cari  #CI_ENVIRONMENT = production kemudian ubah menjadi CI_ENVIRONMENT = development

Membuat File Model

Tahap selanjutnya adalah membuat struktur data model di codeigniter 4 silahkan buat file baru dengan nama ModelsSiswa.php kemudian simpan di folder app/Models masukan kode berikut ini 

<?php namespace App\Models;
use CodeIgniter\Model;
 
class ModelsSiswa extends Model
{
    protected $table = 'siswa';
} 

Pada kode diatas kita sudah menset tabel siswa (protected $table = 'siswa';) yang akan kita proses 

Membuat File Controllers

Setelah model sudah terbuat kita buat file controllers yang jembatan antara models dan juga views silahkan buat file baru dengan nama Siswa.php simpan di folder app/models kemudian masukan kode berikut ini : 

<?php namespace App\Controllers;
 
use CodeIgniter\Controller;
use App\Models\ModelsSiswa;
 
class Siswa extends BaseController
{
    public function index()
    {
    	$pager = \Config\Services::pager();
        $model = new ModelsSiswa();
        $data['siswa'] = $model->paginate(10);
        $data['pager'] = $model->pager;
        $data['page'] = $this->request->getVar('page') ? $this->request->getVar('page') : 1;
        echo view('list_siswa',$data);
    }
} 

Di dalam controller ini terdapat kode $pager = \Config\Services::pager(); yang berfungsi untuk menload pagination ada juga kode paginate(10) ($data['siswa'] = $model->paginate(10);)digunakan untuk menentukan banyaknya data yang tampil perhalaman pada contoh diatas kita menset angka 10 maka nantinya yang akan tampil perhalaman berjumlah 10 data ( kita juga bisa mengubah data sesuai dengan keinginan kita dengan cara mengganti angka 10 dengan angka yang kita kehendaki ) dan kode pager ($data['pager'] = $model->pager;)sebagai method yang digunakan untuk menampilkan link pagination, jika tidak ada kode tersebut maka pagination tidak jalan.

Fungsi kode $model = new ModelsSiswa(); digunakan untuk memanggil class model yang sudah kita buat di file model tadi.

Membuat file View

File view inilah yang akan mempersentasikan tampilan ke layar/user silahkan buat file baru dengan nama list_siswa.php kemudian simpan di folder app/views lalu masukan kode berikut ini 

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>PAGINATION DENGAN CODEIGNITER 4</title>
	<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.css" rel="stylesheet"> 
</head>
<body style="width: 70%; margin: 0 auto; padding-top: 30px;">
	<div class="row">
        <div class="col-lg-12 margin-tb">
            <div class="pull-left">
                <h2>PAGINATION DENGAN CODEIGNITER 4 </h2>
            </div>
        </div>
    </div>
    <hr>
    <div class="row">
        <div class="col-lg-12 margin-tb">
			<table class="table table-bordered">
		        <tr>
		            <th>No</th>
		            <th>Nama Siswa</th>
		            <th>Kelas</th>
		        </tr>
		        	<?php $no=1+(10*($page-1)); 
		        	foreach($siswa as $row):?>
		        <tr>
		        	<td><?=$no;?></td>
		            <td><?=$row['NamaLengkap'];?></td>
		            <td><?=$row['Kelas'];?></td>
		        </tr>
		        <?php $no++; endforeach;?>
		    </table>
		    <?= $pager->Links() ?>
		</div>
	</div>
</body>
</html>

Pada kode diatas terdapat kode <?= $pager->Links() ?> yang berfungsi untuk mencetak link pagination.

 

Jika sudah silahkan save kemudian jalankan programnya dengan cara masuk kedalam folder root melalui terminal/CMD ketikan php spark serve lalu buka web browser ketikan http://localhost:8080/siswa jika berhasil maka tampilannya seperti dibawah ini 

Bisa dilihat pada gambar diatas pagination di CI 4 sudah muncul dan berhasil dibuat.

Kesimpulan

Dari pemaparan tutorial diatas dapat kita simpulkan bahwa penggunaan pagination itu sangat penting dalam pembuatan sebuah aplikasi yang memuat banyak data.

Penggunaan datatables kurang efisien jika kita menampilkan banyak data karena datatable akan menload semua data sehingga performa web menjadi menurun.

Pada tutorial diatas kita sudah berhasil membuat pagination dengan codeigniter 4 hasilnya bisa kita lihat seperti pada gambar diatas, pembuatan pagination di codeigniter 4 ini lebih mudah dibandingan dengan codeigniter versi sebelumnya.

Disini saya menggunakan codeigniter 4.0.2 jadi tampilan pagination secara otomatis seperti dengan pagination bootstrap karena sudah dimodifikasi dengan class bootstrap di file paginationnya, untuk codeigniter versi 4.0.0 kita harus mengubah maupun menambahkan beberapa file agar bisa menyesuiakan dengan tampilan pagination bootstrap.