CodeIgniter 3 Pagination with Bootstrap - From Scratch

Contents

Introduction:
Step 1: Download CodeIgniter 3
Step 2: Set Database Configuration
Step 3: Update Config.php
Step 4: Register Route
Step 5: Create Controller
Step 6: Create Model
Step 7: Create View File
Screenshot:

Introduction:

Pagination is the process of splitting the content or data that makes navigation easier. Pagination is very important in any website or web app that display a great amount of data or content. Having a pagination feature makes the page load faster and have a better user experience.

CodeIgniter is a open-source web framework that is used for rapid web development. CodeIgniter follows the MVC (Model-View-Controller) architectural pattern. It is noted for its speed compared to other PHP web frameworks.

Before proceeding on this tutorial, you must have an environment already setup to run and install CodeIgniter 3. If you haven’t, please do read my blog –How to Install CodeIgniter 3 in XAMPP Easy Tutorial.

Step 1: Download CodeIgniter 3

First you must download the CodeIgniter 3 on this link.

After downloading, extract the file and rename the folder as “ci-pagination” or anything you prefer.

Step 2: Set Database Configuration

Before configuring the database, we must first create a database named project_manager and create a table named projects:

Run this SQL query to create the projects table:

CREATE TABLE `projects` (
  `id` int(10) UNSIGNED NOT NULL,
  `name` varchar(255) COLLATE utf8mb4_unicode_ci NOT NULL,
  `description` text COLLATE utf8mb4_unicode_ci NOT NULL,
  `created_at` timestamp NULL DEFAULT NULL,
  `updated_at` timestamp NULL DEFAULT NULL
) E

Run this SQL query to insert sample data on the projects table:

INSERT INTO `projects` (`id`, `name`, `description`, `created_at`, `updated_at`) VALUES
(1, 'CodeIgniter Project 1', 'This is a codeigniter project 1 description.', '2020-05-18 17:09:23', '2020-05-18 17:09:23'),
(2, 'CodeIgniter Project 2', 'This is a codeigniter project 2 description.', '2020-05-18 17:09:23', '2020-05-18 17:09:23'),
(3, 'CodeIgniter Project 3', 'This is a codeigniter project 3 description.', '2020-05-18 17:09:23', '2020-05-18 17:09:23'),
(4, 'CodeIgniter Project 4', 'This is a codeigniter project 4 description.', '2020-05-18 17:09:23', '2020-05-18 17:09:23'),
(5, 'CodeIgniter Project 5', 'This is a codeigniter project 5 description.', '2020-05-18 17:09:23', '2020-05-18 17:09:23'),
(6, 'CodeIgniter Project 6', 'This is a codeigniter project 6 description.', '2020-05-18 17:09:23', '2020-05-18 17:09:23'),
(7, 'CodeIgniter Project 7', 'This is a codeigniter project 7 description.', '2020-05-18 17:09:23', '2020-05-18 17:09:23'),
(8, 'CodeIgniter Project 8', 'This is a codeigniter project 8 description.', '2020-05-18 17:09:23', '2020-05-18 17:09:23'),
(9, 'CodeIgniter Project 9', 'This is a codeigniter project 9 description.', '2020-05-18 17:09:23', '2020-05-18 17:09:23'),
(10, 'CodeIgniter Project 10', 'This is a codeigniter project 10 description.', '2020-05-18 17:09:23', '2020-05-18 17:09:23'),
(11, 'CodeIgniter Project 11', 'This is a codeigniter project 11 description.', '2020-05-18 17:09:23', '2020-05-18 17:09:23'),
(12, 'CodeIgniter Project 12', 'This is a codeigniter project 12 description.', '2020-05-18 17:09:23', '2020-05-18 17:09:23'),
(13, 'CodeIgniter Project 13', 'This is a codeigniter project 13 description.', '2020-05-18 17:09:23', '2020-05-18 17:09:23'),
(14, 'CodeIgniter Project 14', 'This is a codeigniter project 14 description.', '2020-05-18 17:09:23', '2020-05-18 17:09:23'),
(15, 'CodeIgniter Project 15', 'This is a codeigniter project 15 description.', '2020-05-18 17:09:23', '2020-05-18 17:09:23'),
(16, 'CodeIgniter Project 16', 'This is a codeigniter project 16 description.', '2020-05-18 17:09:23', '2020-05-18 17:09:23'),
(17, 'CodeIgniter Project 17', 'This is a codeigniter project 17 description.', '2020-05-18 17:09:23', '2020-05-18 17:09:23'),
(18, 'CodeIgniter Project 18', 'This is a codeigniter project 18 description.', '2020-05-18 17:09:23', '2020-05-18 17:09:23'),
(19, 'CodeIgniter Project 19', 'This is a codeigniter project 19 description.', '2020-05-18 17:09:23', '2020-05-18 17:09:23'),
(20, 'CodeIgniter Project 20', 'This is a codeigniter project 20 description.', '2020-05-18 17:09:23', '2020-05-18 17:09:23'),
(21, 'CodeIgniter Project 21', 'This is a codeigniter project 21 description.', '2020-05-18 17:09:23', '2020-05-18 17:09:23'),
(22, 'CodeIgniter Project 22', 'This is a codeigniter project 22 description.', '2020-05-18 17:09:23', '2020-05-18 17:09:23'),
(23, 'CodeIgniter Project 23', 'This is a codeigniter project 23 description.', '2020-05-18 17:09:23', '2020-05-18 17:09:23'),
(24, 'CodeIgniter Project 24', 'This is a codeigniter project 24 description.', '2020-05-18 17:09:23', '2020-05-18 17:09:23'),
(25, 'CodeIgniter Project 25', 'This is a codeigniter project 25 description.', '2020-05-18 17:09:23', '2020-05-18 17:09:23'),
(26, 'CodeIgniter Project 26', 'This is a codeigniter project 26 description.', '2020-05-18 17:09:23', '2020-05-18 17:09:23'),
(27, 'CodeIgniter Project 27', 'This is a codeigniter project 27 description.', '2020-05-18 17:09:24', '2020-05-18 17:09:24'),
(28, 'CodeIgniter Project 28', 'This is a codeigniter project 28 description.', '2020-05-18 17:09:24', '2020-05-18 17:09:24'),
(29, 'CodeIgniter Project 29', 'This is a codeigniter project 29 description.', '2020-05-18 17:09:24', '2020-05-18 17:09:24'),
(30, 'CodeIgniter Project 30', 'This is a codeigniter project 30 description.', '2020-05-18 17:09:24', '2020-05-18 17:09:24'),
(31, 'CodeIgniter Project 31', 'This is a codeigniter project 31 description.', '2020-05-18 17:09:24', '2020-05-18 17:09:24'),
(32, 'CodeIgniter Project 32', 'This is a codeigniter project 32 description.', '2020-05-18 17:09:24', '2020-05-18 17:09:24'),
(33, 'CodeIgniter Project 33', 'This is a codeigniter project 33 description.', '2020-05-18 17:09:24', '2020-05-18 17:09:24'),
(34, 'CodeIgniter Project 34', 'This is a codeigniter project 34 description.', '2020-05-18 17:09:24', '2020-05-18 17:09:24'),
(35, 'CodeIgniter Project 35', 'This is a codeigniter project 35 description.', '2020-05-18 17:09:24', '2020-05-18 17:09:24'),
(36, 'CodeIgniter Project 36', 'This is a codeigniter project 36 description.', '2020-05-18 17:09:24', '2020-05-18 17:09:24'),
(37, 'CodeIgniter Project 37', 'This is a codeigniter project 37 description.', '2020-05-18 17:09:24', '2020-05-18 17:09:24'),
(38, 'CodeIgniter Project 38', 'This is a codeigniter project 38 description.', '2020-05-18 17:09:24', '2020-05-18 17:09:24'),
(39, 'CodeIgniter Project 39', 'This is a codeigniter project 39 description.', '2020-05-18 17:09:24', '2020-05-18 17:09:24'),
(40, 'CodeIgniter Project 40', 'This is a codeigniter project 40 description.', '2020-05-18 17:09:24', '2020-05-18 17:09:24'),
(41, 'CodeIgniter Project 41', 'This is a codeigniter project 41 description.', '2020-05-18 17:09:24', '2020-05-18 17:09:24'),
(42, 'CodeIgniter Project 42', 'This is a codeigniter project 42 description.', '2020-05-18 17:09:24', '2020-05-18 17:09:24'),
(43, 'CodeIgniter Project 43', 'This is a codeigniter project 43 description.', '2020-05-18 17:09:24', '2020-05-18 17:09:24'),
(44, 'CodeIgniter Project 44', 'This is a codeigniter project 44 description.', '2020-05-18 17:09:24', '2020-05-18 17:09:24'),
(45, 'CodeIgniter Project 45', 'This is a codeigniter project 45 description.', '2020-05-18 17:09:24', '2020-05-18 17:09:24'),
(46, 'CodeIgniter Project 46', 'This is a codeigniter project 46 description.', '2020-05-18 17:09:24', '2020-05-18 17:09:24'),
(47, 'CodeIgniter Project 47', 'This is a codeigniter project 47 description.', '2020-05-18 17:09:24', '2020-05-18 17:09:24'),
(48, 'CodeIgniter Project 48', 'This is a codeigniter project 48 description.', '2020-05-18 17:09:24', '2020-05-18 17:09:24'),
(49, 'CodeIgniter Project 49', 'This is a codeigniter project 49 description.', '2020-05-18 17:09:24', '2020-05-18 17:09:24'),
(50, 'CodeIgniter Project 50', 'This is a codeigniter project 50 description.', '2020-05-18 17:09:24', '2020-05-18 17:09:24'),
(51, 'CodeIgniter Project 51', 'This is a codeigniter project 51 description.', '2020-05-18 17:09:24', '2020-05-18 17:09:24');

Open the app folder and configure your database on this file “database.php“.

application/config/database.php

$db['default'] = array(
    'dsn'   => '',
    'hostname' => 'localhost',
    'username' => 'Your Username',
    'password' => 'Your Password',
    'database' => 'Your Database Name',
    '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 3: Update Config.php

Open the file config.php and find and update the base_url value.

application/config/config.php

$config['base_url'] = 'http://localhost/project-manager/index.php';

Step 4: Register Route

Open the routes.php file and register this route:

application/config/routes.php

$route['project/(:num)'] = 'project';

Step 5: Create Controller

Go to this path “application/controllers/” and create a controller named Project.php. After creating the controller, insert the codes below:

<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class Project extends CI_Controller {

   public function __construct() {
      parent::__construct(); 
      $this->load->model('Project_model', 'project');
      $this->load->library("pagination");
   }

   /*
      Display all records in page
   */
  public function index()
  {
    $data['title'] = "CodeIgniter Project Manager";
    $config["base_url"] = base_url() . "project";
    $config["total_rows"] = $this->project->get_count_all();
    $config["per_page"] = 7;
    $config["uri_segment"] = 2;
    /*
      start 
      add boostrap class and styles
    */
    $config['full_tag_open'] = '<ul class="pagination">';        
    $config['full_tag_close'] = '</ul>';        
    $config['first_link'] = 'First';        
    $config['last_link'] = 'Last';        
    $config['first_tag_open'] = '<li class="page-item"><span class="page-link">';        
    $config['first_tag_close'] = '</span></li>';        
    $config['prev_link'] = '&laquo';        
    $config['prev_tag_open'] = '<li class="page-item"><span class="page-link">';        
    $config['prev_tag_close'] = '</span></li>';        
    $config['next_link'] = '&raquo';        
    $config['next_tag_open'] = '<li class="page-item"><span class="page-link">';        
    $config['next_tag_close'] = '</span></li>';        
    $config['last_tag_open'] = '<li class="page-item"><span class="page-link">';        
    $config['last_tag_close'] = '</span></li>';        
    $config['cur_tag_open'] = '<li class="page-item active"><a class="page-link" href="#">';        
    $config['cur_tag_close'] = '</a></li>';        
    $config['num_tag_open'] = '<li class="page-item"><span class="page-link">';        
    $config['num_tag_close'] = '</span></li>';
    /*
      end 
      add boostrap class and styles
    */
    $this->pagination->initialize($config);
    $page = ($this->uri->segment(2)) ? $this->uri->segment(2) : 0;
    $data["links"] = $this->pagination->create_links();
    $data['projects'] = $this->project->get_projects($config["per_page"], $page);     
    $this->load->view('projects',$data);
  }

 
}

Step 6: Create Model

Go to this path “application/models/” and create a model named Project_model.php. This will handle all our query to the database. After creating the model, insert the code below:

application/models/Project_model.php

<?php


class Project_model extends CI_Model {

    public function __construct()
    {
        $this->load->database();
        $this->load->helper('url');
    }

    /*
        return total number of projects
    */
    public function get_count_all() {
        return $this->db->count_all('projects');
    }


    /*
        return all the projects
    */
    public function get_projects($limit, $start) {
        $this->db->limit($limit, $start);
        $query = $this->db->get('projects');

        return $query->result();
    }
    
}
?>

Step 7: Create View File

We will use Bootstrap to make our CodeIgniter 3 Pagination App presentable. Bootstrap is a free and most popular open-source CSS framework for building responsive and mobile-first web projects.

Create a file “projects.php” inside this following path “resources/views/”. Then insert the code below:

<!DOCTYPE html>
<html>
	<head>
		<title>CodeIgniter Project Manager</title>
		<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
	</head>
	<body>
		<div class="container">
    		<h2 class="text-center mt-5 mb-3"><?php echo $title; ?></h2>
			<div class="card">
			    <div class="card-body">
			        <table class="table table-bordered">
			            <tr>
			                <th>Name</th>
			                <th>Description</th>
			            </tr>

			            <?php foreach ($projects as $project) { ?>      
			            <tr>
			                <td><?php echo $project->name; ?></td>
			                <td><?php echo $project->description; ?></td>
			            </tr>
			            <?php } ?>
			        </table>
			        <p><?php echo $links; ?></p>
			    </div>
			</div>

		</div>
	</body>
</html>

Finally all the components are done. Now we can test our CodeIgniter 3 Pagination App by browsing this URL:

http://localhost/ci-pagination/index.php/project

Screenshot:

CodeIgniter 3 Pagination App (index page):