CodeIgniter 4 Pagination Tutorial

Submitted by oretnom23 on Friday, June 17, 2022 - 14:01.

Introduction

In this tutorial, you will learn how to Use the Pagination Library of CodeIgniter 4. Here, i will be providing instructions and source code for creatiing a simple web application in PHP using CodeIgniter 4 Framework which loads and a multiple data and has a pagination feature. This feature is commonly used in developing a web application for optimizing the page load. This will split your large datasets into pages which helps to improve your application page load.

What is CodeIgniter?

CodeIgniter is an open-source software for web development framework. This can help the web developers that developing a websites or web applications using PHP Langauage. CodeIgniter helps the developer to develop projects much faster.

Getting Started

Before we start, please download and install the following:

On this tutorial, we will be using XAMPP for our database server and to run our PHP commands and scripts. You can dowload it at https://apachefriends.org
Download and Install composer: https://getcomposer.org/download/
Download CodeIgniter 4 @ https://codeigniter.com/download

Next, extract the codeIgniter 4 zip file in your XAMPP's htdocs directory. Open your terminal or command prompt and change your current directory to your project directory path. Locate the env file in your project root directory and rename it as .env.

Uncomment the CI_ENVIRONMENT by removing the # before the said variable. Change the CI_ENVIRONMENT value into developement so you will see the error if any occurred on your end. Then, configure the your database credential on the same .

(.env) File Example

#--------------------------------------------------------------------
# Example Environment Configuration file
#
# This file can be used as a starting point for your own
# custom .env files, and contains most of the possible settings
# available in a default install.
#
# By default, all of the settings are commented out. If you want
# to override the setting, you must un-comment it by removing the '#'
# at the beginning of the line.
#--------------------------------------------------------------------
 
#--------------------------------------------------------------------
# ENVIRONMENT
#--------------------------------------------------------------------
 
CI_ENVIRONMENT = development
 
#--------------------------------------------------------------------
# APP
#--------------------------------------------------------------------
 
# app.baseURL = ''
# If you have trouble with `.`, you could also use `_`.
# app_baseURL = ''
# app.forceGlobalSecureRequests = false
 
# app.sessionDriver = 'CodeIgniter\Session\Handlers\FileHandler'
# app.sessionCookieName = 'ci_session'
# app.sessionExpiration = 7200
# app.sessionSavePath = null
# app.sessionMatchIP = false
# app.sessionTimeToUpdate = 300
# app.sessionRegenerateDestroy = false
 
# app.CSPEnabled = false
 
#--------------------------------------------------------------------
# DATABASE
#--------------------------------------------------------------------
 
database.default.hostname = localhost
database.default.database = dummy_db
database.default.username = root
database.default.password = 
database.default.DBDriver = MySQLi
database.default.DBPrefix =
 
# database.tests.hostname = localhost
# database.tests.database = ci4
# database.tests.username = root
# database.tests.password = root
# database.tests.DBDriver = MySQLi
# database.tests.DBPrefix =
 
#--------------------------------------------------------------------
# CONTENT SECURITY POLICY
#--------------------------------------------------------------------
 
# contentsecuritypolicy.reportOnly = false
# contentsecuritypolicy.defaultSrc = 'none'
# contentsecuritypolicy.scriptSrc = 'self'
# contentsecuritypolicy.styleSrc = 'self'
# contentsecuritypolicy.imageSrc = 'self'
# contentsecuritypolicy.baseURI = null
# contentsecuritypolicy.childSrc = null
# contentsecuritypolicy.connectSrc = 'self'
# contentsecuritypolicy.fontSrc = null
# contentsecuritypolicy.formAction = null
# contentsecuritypolicy.frameAncestors = null
# contentsecuritypolicy.frameSrc = null
# contentsecuritypolicy.mediaSrc = null
# contentsecuritypolicy.objectSrc = null
# contentsecuritypolicy.pluginTypes = null
# contentsecuritypolicy.reportURI = null
# contentsecuritypolicy.sandbox = false
# contentsecuritypolicy.upgradeInsecureRequests = false
# contentsecuritypolicy.styleNonceTag = '{csp-style-nonce}'
# contentsecuritypolicy.scriptNonceTag = '{csp-script-nonce}'
# contentsecuritypolicy.autoNonce = true
 
#--------------------------------------------------------------------
# COOKIE
#--------------------------------------------------------------------
 
# cookie.prefix = ''
# cookie.expires = 0
# cookie.path = '/'
# cookie.domain = ''
# cookie.secure = false
# cookie.httponly = false
# cookie.samesite = 'Lax'
# cookie.raw = false
 
#--------------------------------------------------------------------
# ENCRYPTION
#--------------------------------------------------------------------
 
# encryption.key =
# encryption.driver = OpenSSL
# encryption.blockSize = 16
# encryption.digest = SHA512
 
#--------------------------------------------------------------------
# HONEYPOT
#--------------------------------------------------------------------
 
# honeypot.hidden = 'true'
# honeypot.label = 'Fill This Field'
# honeypot.name = 'honeypot'
# honeypot.template = '<label>{label}</label><input type="text" name="{name}" value=""/>'
# honeypot.container = '<div style="display:none">{template}</div>'
 
#--------------------------------------------------------------------
# SECURITY
#--------------------------------------------------------------------
 
# security.csrfProtection = 'cookie'
# security.tokenRandomize = false
# security.tokenName = 'csrf_token_name'
# security.headerName = 'X-CSRF-TOKEN'
# security.cookieName = 'csrf_cookie_name'
# security.expires = 7200
# security.regenerate = true
# security.redirect = true
# security.samesite = 'Lax'
 
#--------------------------------------------------------------------
# LOGGER
#--------------------------------------------------------------------
 
# logger.threshold = 4
 
#--------------------------------------------------------------------
# CURLRequest
#--------------------------------------------------------------------
 
# curlrequest.shareOptions = true

Creating the Migration

Create a new Migration File in your project by executing php spark make:migration DummyTable in you terminal. Or, you can create a new file named as DummyTable.php inside your app >> Database >> Migrations directory. This file contains the script for creating a "dummy_table" in your database. Then write the following PHP Script.

<?php
 
namespace App\Database\Migrations;
 
use CodeIgniter\Database\Migration;
use CodeIgniter\Database\RawSql;
 
class DummyTable extends Migration
{
    public function up()
    {
        $this->forge->addField([
            'id' => [
                'type'           => 'INT',
                'constraint'     => 1,
                'unsigned'       => true,
                'auto_increment' => true,
            ],
            'name' => [
                'type'       => 'VARCHAR',
                'constraint' => '250',
            ],
            'contact' => [
                'type' => 'VARCHAR',
                'constraint' => '100',
            ],
            'email' => [
                'type' => 'TEXT',
                'null' => true,
            ],
            'address' => [
                'type' => 'TEXT',
                'null' => true,
            ],
            'created_at datetime default current_timestamp',
            'updated_at datetime default current_timestamp on update current_timestamp'
        ]);
        $this->forge->addKey('id', true);
        $this->forge->createTable('dummy_table');
    }
 
    public function down()
    {
        $this->forge->dropTable('dummy_table');
    }
}

Creating the Model

Create a new Model in your project by executing php spark make:model DummyTableModel in you terminal. Or, you can create a new file named as DummyTableModel.php inside your app >> Models directory. This will create your model for your dummy_table in the database. Then Write the following PHP Script.

<?php
 
namespace App\Models;
 
use CodeIgniter\Model;
 
class DummyTableModel extends Model
{
    protected $DBGroup          = 'default';
    protected $table            = 'dummy_table';
    protected $primaryKey       = 'id';
    protected $useAutoIncrement = true;
    protected $insertID         = 0;
    protected $returnType       = 'array';
    protected $useSoftDeletes   = false;
    protected $protectFields    = true;
    protected $allowedFields    = ['name','contact','email', 'address'];
 
    // Dates
    protected $useTimestamps = false;
    protected $dateFormat    = 'datetime';
    protected $createdField  = 'created_at';
    protected $updatedField  = 'updated_at';
    protected $deletedField  = 'deleted_at';
 
    // Validation
    protected $validationRules      = [];
    protected $validationMessages   = [];
    protected $skipValidation       = false;
    protected $cleanValidationRules = true;
 
    // Callbacks
    protected $allowCallbacks = true;
    protected $beforeInsert   = [];
    protected $afterInsert    = [];
    protected $beforeUpdate   = [];
    protected $afterUpdate    = [];
    protected $beforeFind     = [];
    protected $afterFind      = [];
    protected $beforeDelete   = [];
    protected $afterDelete    = [];
 
}

Creating the Seeder

Create a new Seeder File in your project by executing php spark make:seeder DummyTableModelSeeder in you terminal. Or, you can create a new file named as DummyTableModelSeeder.php inside your app >> Database >> Seeds directory. This file contains a PHP script for generating and inserting test data into your dummy_table. Then Write the following PHP Script.

<?php
 
namespace App\Database\Seeds;
 
use CodeIgniter\Database\Seeder;
use App\Models\DummyTableModel;
 
class DummyTableModelSeeder extends Seeder
{
    public function run()
    {
        $dt_model = new DummyTableModel;
        for($i=0; $i < 100; $i++){
            $faker = \Faker\Factory::create();
            $data = [
                'name'=>$faker->name,
                'contact'=>$faker->phoneNumber,
                'email'=>$faker->email,
                'address'=>$faker->address
            ];
            $dt_model->save($data);
        }
    }
}

Creating the Database and Seed Data

Execute the following command in your terminal:

composer install
- This command will install all the dependencies you need for developing a project using the CodeIgniter Framework.
php spark db:create dummy_db
- This command will create a new database called dummy_db.
php spark migrate
- This command is to migrate your database dummy table.
php spark db:seed DummyTableModelSeeder
- This command will generate and create a dummy data in your db table.

Creating the Page Layout

Create a new folder inside the app >> views naming layouts. Then create a new PHP File naming main.php. This file contains the HTML Script for the main layout or template of your project interface. Write the following code on the file and save it.

<!DOCTYPE html>
<html lang="en">
<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>CodeIgniter 4 Pagination</title>
 
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
    <style>
        html, body{
            height:100%;
            width:100%;
        }
    </style>
</head>
<body class="bg-dark bg-gradient bg-opacity-25">
    <nav class="navbar navbar-expand-md navbar-dark bg-primary bg-gradient">
    <div class="container">
        <a class="navbar-brand" href="https://sourcecodester.com">SourceCodester</a>
        <div class="fw-bolder text-light">CI4 Pagination</div>
    </div>
    </nav>
    <div class="container py-4">
        <?= $this->renderSection('content') ?>
    </div>
</body>
<?= $this->renderSection('custom_js') ?>
</html>

Creating the Page Content

Create a new folder inside the app >> views naming pages. Then create a new PHP File naming home.php. This file contains the page content of your page. This file extends the main template. Write the following code on the file and save it.

<?= $this->extend('layouts/main') ?>
 
<?= $this->section('content') ?>
<h1 class="fw-bold">CodeIgniter 4 Pagination</h1>
<hr>
<div class="card rounded-0">
    <div class="card-body">
        <div class="container-fluid">
            <table class="table table-stripped table-bordered">
                <thead>
                    <tr class="bg-gradient bg-primary text-light">
                        <th class="p-1 text-center">#</th>
                        <th class="p-1 text-center">Name</th>
                        <th class="p-1 text-center">Contact #</th>
                        <th class="p-1 text-center">Email</th>
                        <th class="p-1 text-center">Address</th>
                    </tr>
                </thead>
                <tbody>
                    <?php foreach($data as $row): ?>
                        <tr>
                            <td class="px-2 py-1 text-center align-middle"><?= $row['id'] ?></td>
                            <td class="px-2 py-1 align-middle"><?= $row['name'] ?></td>
                            <td class="px-2 py-1 align-middle"><?= $row['contact'] ?></td>
                            <td class="px-2 py-1 align-middle"><?= $row['email'] ?></td>
                            <td class="px-2 py-1 align-middle"><?= $row['address'] ?></td>
                        </tr>
                    <?php endforeach; ?>
                </tbody>
            </table>
            <?= $pager->makeLinks($page,$perPage, $total, 'custom_view') ?>
            
        </div>
    </div>
</div>
<?= $this->endSection() ?>

Creating the Controller

Create a new Controller by executing the php spark make:controller Main in your terminal. Or, you can create new file naming Main.php inside the app >> Controllers directory. This file contains a PHP script using the CI Controller to render the page and data. Write the following and save the file.

<?php
 
namespace App\Controllers;
 
use App\Models\DummyTableModel;
class Main extends BaseController
{
    public function index()
    {
        $data=[];
        $model = new DummyTableModel;
        $data['page'] = isset($_GET['page']) ? $_GET['page'] : 1;
        $data['perPage'] = 15;
        $data['total'] = $model->countAll();
        $data['data'] = $model->paginate($data['perPage']);
        $data['pager'] = $model->pager;
        
 
        return view('pages/home', $data);
    }
}

Configuring your Default Route

In your app >> Config directory, locate the file named as Routes.php and open it in your preferred text editor. Next, configure yor default controller using the Main Controller. Configure the file like it shown below.

<?php
 
namespace Config;
 
// Create a new instance of our RouteCollection class.
$routes = Services::routes();
 
// Load the system's routing file first, so that the app and ENVIRONMENT
// can override as needed.
if (is_file(SYSTEMPATH . 'Config/Routes.php')) {
    require SYSTEMPATH . 'Config/Routes.php';
}
 
/*
 * --------------------------------------------------------------------
 * Router Setup
 * --------------------------------------------------------------------
 */
$routes->setDefaultNamespace('App\Controllers');
$routes->setDefaultController('Main');
$routes->setDefaultMethod('index');
$routes->setTranslateURIDashes(false);
$routes->set404Override();
// The Auto Routing (Legacy) is very dangerous. It is easy to create vulnerable apps
// where controller filters or CSRF protection are bypassed.
// If you don't want to define all routes, please use the Auto Routing (Improved).
// Set `$autoRoutesImproved` to true in `app/Config/Feature.php` and set the following to true.
//$routes->setAutoRoute(false);
 
/*
 * --------------------------------------------------------------------
 * Route Definitions
 * --------------------------------------------------------------------
 */
 
// We get a performance increase by specifying the default
// route since we don't have to scan directories.
$routes->get('/', 'Main::index');
 
/*
 * --------------------------------------------------------------------
 * Additional Routing
 * --------------------------------------------------------------------
 *
 * There will often be times that you need additional routing and you
 * need it to be able to override any defaults in this file. Environment
 * based routes is one such time. require() additional route files here
 * to make that happen.
 *
 * You will have access to the $routes object within that file without
 * needing to reload it.
 */
if (is_file(APPPATH . 'Config/' . ENVIRONMENT . '/Routes.php')) {
    require APPPATH . 'Config/' . ENVIRONMENT . '/Routes.php';
}

Creating a Custome Template of the Pagination

In the app >> Config directory, open the file named as Pager.php and open it with your text-editor. Then add a new template by adding the new data in the $templates array. Follow the following script.

<?php
 
namespace Config;
 
use CodeIgniter\Config\BaseConfig;
 
class Pager extends BaseConfig
{
    /**
     * --------------------------------------------------------------------------
     * Templates
     * --------------------------------------------------------------------------
     *
     * Pagination links are rendered out using views to configure their
     * appearance. This array contains aliases and the view names to
     * use when rendering the links.
     *
     * Within each view, the Pager object will be available as $pager,
     * and the desired group as $pagerGroup;
     *
     * @var array<string, string>
     */
    public $templates = [
        'default_full'   => 'CodeIgniter\Pager\Views\default_full',
        'default_simple' => 'CodeIgniter\Pager\Views\default_simple',
        'default_head'   => 'CodeIgniter\Pager\Views\default_head',
        'custom_view'   => 'App\Views\layouts\custom_pagination',
    ];
 
    /**
     * --------------------------------------------------------------------------
     * Items Per Page
     * --------------------------------------------------------------------------
     *
     * The default number of results shown in a single page.
     *
     * @var int
     */
    public $perPage = 20;
}

Next, create a new file inside the app >> Views >> layouts naming custom_pagination.php. Then, write the following code and save the file.

<!-- Limit to 3 Links each side of the current page -->
<?php $pager->setSurroundCount(3)  ?>
<!-- END-->
 
<div class="row">
    <!-- Pagination -->
 
    <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
     <ul class="pagination">
            <!-- Previous and First Links if available -->
            <?php if($pager->hasPrevious()): ?>
                <li class="page-item">
                    <a href="<?= $pager->getFirst() ?>" class="page-link">First</a>
                </li>
                <li class="page-item">
                    <a href="<?= $pager->getPrevious() ?>" class="page-link">Previous</a>
                </li>
            <?php endif; ?>
            <!-- End of Previous and First -->
 
            <!-- Page Links -->
            <?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; ?>
            <!-- End of Page Links -->
 
            <!-- Next and Last Page -->
            <?php if($pager->hasNext()): ?>
                <li class="page-item">
                    <a href="<?= $pager->getNext() ?>" class="page-link">Next</a>
                </li>
                <li class="page-item">
                    <a href="<?= $pager->getLast() ?>" class="page-link">Last</a>
                </li>
            <?php endif; ?>
            <!-- End of Next and Last Page -->
        </ul>
    </div>
    <!-- End of Pagination -->
    
    <!-- Pagination Details -->
    <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
        <div class="fw-light fs-italic text-muted text-end">Showing <?= (($page * $perPage) - $perPage +1) ."-". (($page * $perPage) - $perPage + count($data))  ?> Result out of <?= number_format($total) ?></div>
    </div>
    <!-- End of Pagination Details -->
</div>

The code above is the custom template of the pagination of the data.

That's it! You can now test the source code if it runs perfectly as we wanted and see if it meets our goal for this tutorial. To run the simple application, execute php spark serve in your terminal and browse the provided link i.e. http://localhost:8080. Browse the application in your preferred browser such as the Chrome Browser.

DEMO VIDEO

That's the end of this tutorial. I hope this CodeIginter 4 Pagination Tutorial will help you with what you are looking for and you'll find this useful for your current or future PHP Project using the CodeIgniter 4 Framework. You can also download the source code I created for this tutorial. The download button is located below this article.

Explore more on this website for more Tutorials and Free Source Codes.

Enjoy :)

Add new comment

4209 views