Codeigniter 4 Cara Mudah Membuat Pagination dengan Bootstrap

24 Jan 2022 11:25
Dipost oleh Admin
1.086
0
Share:

Sobatcoding.com - Cara Mudah Membuat Pagination menggunakan Bootstrap

Artikel kali ini kita akan belajar membuat pagination menggunakan library CodeIgniter 4. Pada contoh kali ini admin membuat pagination data artikel.

Membuat Controller

Buatlah sebuah controller bernama ArtikelController.php dan masukkan kode berikut:

<?php

namespace App\Controllers;

use App\Controllers\BaseController;
use App\Models\Artikel;

class ArtikelController extends BaseController
{
    public function index()
    {
    
        $artikel = new Artikel();
        $data = [
            'artikel' => $artikel->paginate(10), //10 data per halaman
            'pager'   => $artikel->pager,
        ];

        return view('artikel', $data);
    }
}

Kode di atas digunakan untuk membuat pagination dengan tiap page atau halaman berisi 10 row data. Kalian bisa ubah sendiri sesuai dengan kebutuhan kalian.

Membuat View

Kita buat sebuah view bernama artikel.php, kemudian masukkan kode seperti berikut:

 <!DOCTYPE html>
 <html lang="id">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>List Artikel</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/6.0.0-beta2/css/all.min.css" integrity="sha512-YWzhKL2whUzgiheMoBFwW8CKV4qpHQAEuvilg9FAn5VJUDwKZZxkJNuGM4XkWuk94WCrrwslk8yWNGmY1EduTA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
        
        <style>
            body {
                margin: 0;
                padding: 0;
                height: 100%;
            }
            section {
                width:100%;
                height:100%;
                display: block;
            }
        </style>
    </head>
    <body>
        <section>
            <div class="container">
                <h1 class="mt-5">Data Artikel</h1>
                <hr />
                <table class="table table-hover table-bordered">
                    <thead>
                        <tr class="bg-primary">
                            <th class="text-white">No</th>
                            <th class="text-white">Judul</th>
                        </tr>
                    </thead>
                    <tbody>
                        <?php
                            foreach ($artikel as $index=>$row) {
                        ?>
                            <tr>
                                <td><?= $index+1; ?></td>
                                <td><?= $row['title']; ?></td>
                            </tr>
                        <?php
                            }
                        ?>
                    </tbody>
                </table>
                <?= $pager->links() ?>
                
            </div>
        </section>
    </body>
 </html>

Untuk melihat output tampilan kita bisa akses url http://localhost:8080/artikel. Output dari tampilan di atas kurang lebih seperti berikut ini:

sobatcoding.com

Menghilangkan index.php di Link Pagination

Jika kita klik Next otomatis akan mengarah ke link selanjutnya yaitu http://localhost:8080/index.php/artikel?page=2, kemudian kita akan hilangkan index.php dari url agar url terlihat lebih cantik. Bagaimana caranya?

Caranya gampang. Kita buka file app/Config/App.php. Hilangkan index.php pada line 39 seperti berikut.

	 * Index File
	 * --------------------------------------------------------------------------
	 *
	 * Typically this will be your index.php file, unless you've renamed it to
	 * something else. If you are using mod_rewrite to remove the page set this
	 * variable so that it is blank.
	 *
	 * @var string
	 */
	public $indexPage = '';

Custom Pagination Menggunakan Bootstrap Pagination

Buatlah sebuah template pagination bernama bootstrap_template.php dan simpan di folder app/Views/Pagers. Masukkan kode seperti berikut:

<?php $pager->setSurroundCount(2) ?>

<nav aria-label="Page navigation">
    <ul class="pagination">
    <?php if ($pager->hasPrevious()) : ?>
        <li class="page-item">
            <a class="page-link" href="<?= $pager->getFirst() ?>" aria-label="<?= lang('Pager.first') ?>">
                <span aria-hidden="true"><?= lang('Pager.first') ?></span>
            </a>
        </li>
        <li class="page-item">
            <a class="page-link" href="<?= $pager->getPrevious() ?>" aria-label="<?= lang('Pager.previous') ?>">
                <span aria-hidden="true"><?= lang('Pager.previous') ?></span>
            </a>
        </li>
    <?php endif ?>

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

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

Untuk dapat menggunakan template di atas kita registrasi dulu dengan cara mendaftarkan template di app/Config/Pager.php. Kemudian tambahkan kode di line berikut:

public $templates = [
		...
		'bootstrap_template' => 'App\Views\Pagers\bootstrap_template'

Buka kembali file ArtikelController.php, kemudian kita akan menambahkan group di pagination artikel. Ubah kode pada bagian ini:

'artikel' => $artikel->paginate(10),
//ubah menjadi
'artikel' => $artikel->paginate(10, 'artikel'),

Kode di atas artinya kita menambahkan group artikel pada pagination artikel.

Selanjutnya kita akan mengakses pagination group artikel di view menggunakan template bootstrap yang telah kita buat sebelumnya. Caranya buka kembali file view artikel.php dan ubah bagian ini :

<?= $pager->links() ?>
//ubah menjadi

<?= $pager->links('artikel', 'bootstrap_template') ?>

Hasil dari tampilan kode di atas adalah sebagai berikut:

sobatcoding.com

Membuat Custom Helper

Pada list artikel di atas nomor urut masih menunjukkan angka 1 sampai 10 meskipun kita klik ke halaman ke 2 dst. Kita akan mebuat sebuah helper yang digunakan untuk mengurutkan nomor pada halaman selanjutnya.

Pertama kita buat sebuah helper bernama global_helper.php, simpan di dalam folder app/Helpers dan masukkan kode berikut :

<?php

if(!function_exists('order_page_number'))
{
    function order_page_number($currentPage, $perPage)
    {
        if (is_null($currentPage)) {
            $nomor = 1;
        } else {
            $nomor = 1 + ($perPage * ($currentPage - 1));
        }
        return $nomor;
    }
}

Kita daftarkan dulu helper di atas agar bisa digunakan dengan cara menuliskan kode berikut di dalam file app/Controllers/BaseController.php didalam function initController.

public function initController(RequestInterface $request, ResponseInterface $response, LoggerInterface $logger)
	{
		//tambahkan kode berikut
		helper('global');
	}

Buka kembali file ArtikelController.php dan tambahkan kode berikut di dalam variable $data.

$data = [
           ..
            'nomor'   => order_page_number($this->request->getVar('page_artikel'), 10)
        ];

Didalam view artikel ubah line 41 menjadi berikut:

<td><?= $index+1; ?></td>

//ubah menjadi

<td><?= $nomor++; ?></td>

Sekian tutorial kali ini. Jika teman-teman memiliki pertanyaan atau saran mengenai artikel ini, jangan ragu untuk meninggalkan komentar pada form di bawah ini.

Semoga bermanfaat.