CodeIgniter 4 Pagination Example Tutorial

In this CodeIgniter 4 pagination with bootstrap 4 example tutorial. Here you will learn how to use pagination with bootstrap 4 tables in codeigniter 4 framework

In this CodeIgniter 4 pagination with Bootstrap 4 table example, we will create a table and display list of users with pagination in codeigniter 4 projects.

CodeIgniter 4 Pagination Example Tutorial

Follow the below steps, create a list with bootstrap 4 table using codeigniter 4 pagination:

  • Download Codeigniter Latest
  • Basic Configurations
  • Create Database With Table
  • Setup Database Credentials
  • Create Model and Controller
  • Create Views
  • Start Development server

Step 1: Download Codeigniter Project

In this step, we will download the latest version of Codeigniter 4, Go to this link https://codeigniter.com/download Download Codeigniter 4 fresh new setup and unzip the setup in your local system xampp/htdocs/ . And change the download folder name “demo”

Step 2: Basic Configurations

Next, we will set some basic configuration on the app/config/app.php file, so let’s go to application/config/config.php and open this file on text editor.

Set Base URL like this

public $baseURL = 'http://localhost:8080';
To
public $baseURL = 'http://localhost/demo/';

Step 3: Create Database With Table

In this step, we need to create a database name demo, so let’s open your PHPMyAdmin and create the database with the name demo. After successfully create a database, you can use the below SQL query for creating a table in your database.

CREATE TABLE users ( id int(11) NOT NULL AUTO_INCREMENT COMMENT 'Primary Key', name varchar(100) NOT NULL COMMENT 'Name', email varchar(255) NOT NULL COMMENT 'Email Address', contact_no varchar(50) NOT NULL COMMENT 'Contact No', created_at varchar(20) NOT NULL COMMENT 'Created date', PRIMARY KEY (id) ) ENGINE=InnoDB DEFAULT CHARSET=latin1 COMMENT='datatable demo table' AUTO_INCREMENT=1; INSERT INTO users(id, name, email, mobile_number, created_at) VALUES (1, 'Team', '[email protected]', '9000000001', '2019-01-01'), (2, 'Admin', '[email protected]', '9000000002', '2019-01-02'), (3, 'User', '[email protected]', '9000000003', '2019-01-03'), (4, 'Editor', '[email protected]', '9000000004', '2019-01-04'), (5, 'Writer', '[email protected]', '9000000005', '2019-01-05'), (6, 'Contact', '[email protected]', '9000000006', '2019-01-06'), (7, 'Manager', '[email protected]', '9000000007', '2019-01-07'), (8, 'John', '[email protected]', '9000000055', '2019-01-08'), (9, 'Merry', '[email protected]', '9000000088', '2019-01-09'), (10, 'Keliv', '[email protected]', '9000550088', '2019-01-10'), (11, 'Herry', '[email protected]', '9050550088', '2019-01-11'), (12, 'Mark', '[email protected]', '9050550998', '2019-01-12');

Step 4: Setup Database Credentials

In this step, we need to connect our project to the database. we need to go app/Config/Database.php and open database.php file in text editor. After opening the file in a text editor, We need to set up database credentials in this file like below.

	public $default = [ 'DSN' => '', 'hostname' => 'localhost', 'username' => 'root', 'password' => '', 'database' => 'demo', 'DBDriver' => 'MySQLi', 'DBPrefix' => '', 'pConnect' => false, 'DBDebug' => (ENVIRONMENT !== 'production'), 'cacheOn' => false, 'cacheDir' => '', 'charset' => 'utf8', 'DBCollat' => 'utf8_general_ci', 'swapPre' => '', 'encrypt' => false, 'compress' => false, 'strictOn' => false, 'failover' => [], 'port' => 3306, ];

Step 5: Create Model and Controller

So go to app/Models/ and create here one model. And you need to create one model name contactModel.php and update the following code into your contactModel.php file:

<?php namespace App\Models;
use CodeIgniter\Database\ConnectionInterface;
use CodeIgniter\Model; class UserModel extends Model
{ protected $table = 'contacts'; protected $allowedFields = ['name', 'email'];
}

Create Controller

Now Go to app/Controllers and create a controller name Users.php. In this controller, we will create some method/function. We will build some of the methods like :

  • Index() – This is used to display users list with pagination.
<?php namespace App\Controllers; use CodeIgniter\Controller;
use App\Models\UserModel; class Users extends Controller
{ public function index() { $model = new UserModel(); $data = [ 'users' => $model->paginate(10), 'pager' => $model->pager ]; return view('users', $data); }
}

Step 6: Create Views

Now we need to create users.php, go to application/views/ folder and create users.php file. and update the following HTML into your files:.

<!doctype html>
<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>Codeigniter 4 Pagination Example - Tutsmake.com</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
<div class="container"> <div class="container"> <div class="row mt-5"> <table class="table table-bordered"> <thead> <tr> <th>Id</th> <th>Name</th> <th>Email</th> </tr> </thead> <tbody> <?php if($users): ?> <?php foreach($users as $user): ?> <tr> <td><?php echo $user['id']; ?></td> <td><?php echo $user['name']; ?></td> <td><?php echo $user['email']; ?></td> </tr> <?php endforeach; ?> <?php endif; ?> </tbody> </table> <div class="row"> <div class="col-md-12"> <div class="row"> <?php if ($pager) :?> <?php $pagi_path='demo/public/index.php/users'; ?> <?php $pager->setPath($pagi_path); ?> <?= $pager->links() ?> <?php endif ?> </div> </div> </div> </div> </div>
</div> </body>
</html>

Step 7: Start Development server

For start development server, Go to the browser and hit below the URL.

http://localhost/demo/public/index.php/users

Conclusion

In this Codeigniter 4 pagination with Bootstrap 4 table example tutorial, We have successfully create table using boostrap 4 and show data with pagination in codeigniter 4 projects.

If you have any questions or thoughts to share, use the comment form below to reach us.

Related Posts