Create a list or table view in CodeIgniter 4 styled in Bootstrap 4 or 5
Bootstrap 5 is the latest version of the popular component-based web framework known as Bootstrap. Bootstrap is a set of web design tools that allows developers to quickly and efficiently build websites and web applications and customize the experience with relative ease. Bootstrap 5 is the most recent version of the library, and it has new features and improvements compared to previous versions.
Creating a listing in CodeIgniter 4
In this entry we are going to see one of the fundamental CRUD operations, the one that centralizes the rest of the CRUD operations, which would be the listing; you can use any type of HTML component in conjunction with CSS and JavaScript to give it the design you want; but in our case of interest we are interested in the back part, our backend to obtain all the data that we want to manipulate.
In this entry we are going to create a simple paginated table to show how we can create a paginated list in CodeIgniter 4; but it can be anything, although the element used par excellence for pagination is a table.
In our Movie controller that we created earlier to process a form, we can create another function that by convention following our resource type path would be index, the first function that returns the first CRUD resource of our app, the one that allows us to display all our records.
Building the listing from the controller
So here we could get all the records with the all function:
$people->asObject()->get()But in CodeIgniter 4 we have a function that has been around for a long time in other frameworks such as Laravel, Flask or Django and it is the function called pagination that allows us to obtain the data in a paginated way; Internally, it uses a parameter that travels via management called payment to know which block of paginated records you want to work with:
public function index()
{
$people = new PersonModel();
$data = [
'people' => $people->asObject()->paginate(10),
'pager' => $people->pager
];
return view('person/index',$data);
}And with this, we can perfectly create a view; from our index function:
And with this the view:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Index</title>
</head>
<body>
<a href="/people/new" class="btn btn-success mb-4"><i class="fa fa-plus"></i> Crear</a>
<table>
<thead>
<tr>
<th>Id</th>
<th>Nombre</th>
<th>Apellido</th>
<th>Edad</th>
<th>Opciones</th>
</tr>
</thead>
<tbody>
<?php foreach ($people as $key => $p) : ?>
<tr>
<td><?= $p->id ?></td>
<td><?= $p->name ?></td>
<td><?= $p->surname ?></td>
<td><?= $p->age ?></td>
</tr>
<?php endforeach ?>
</tbody>
</table>
<?= $pager->links() ?>
</body>
</html>As you can see, it simply has a php foreach to iterate the data that we are passing to it.
Pagination links
For the pagination links we can use the function called links:
<?= $pager->links() ?>If you want to see how to adapt CodeIgniter 4 with Bootstrap 5
- Andrés Cruz
Develop with Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter