Create a list or table view in CodeIgniter 4 styled in Bootstrap 4 or 5
Content Index
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.
We will use the records we created earlier through a file upload form to display them in a list.
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
Define filters or search fields in CodeIgniter 4
Filters are a very useful tool in web development as they allow users to search, sort and filter information efficiently. Filters can be used to sort and classify data in a table or list and access the desired information without having to search through large amounts of data. Let's see how to implement a simple filter in CodeIgniter 4.
In CodeIgniter 4, as in many frameworks, it's very easy to create filter-like functions; in this case it is through a text type field; so for this, we are going to create a field like the following:
<input type="text" name="search" placeholder="search" value="<?= $search ?>">Which is part of our complete formulary:
<form method="get" id="formFilter">
<select name="type">
<option value="">Tipos</option>
<option <?= ($typeId == "exit") ? "selected" : "" ?> value="exit">Salida</option>
<option <?= ($typeId == "entry") ? "selected" : "" ?> value="entry">Entrada</option>
</select>
<select name="user_id">
<option value="">Usuarios</option>
<?php foreach ($users as $u) : ?>
<option <?= ($u->id == $userId) ? "selected" : "" ?> value="<?= $u->id ?>"><?= $u->username ?></option>
<?php endforeach ?>
</select>
<br>
<h4>Búsqueda</h4>
<input value="<?= $search ?>" type="text" name="search" placeholder="Buscar">
<h3>Cantidades</h3>
<label for="check_cant">
Activar
<input type="checkbox" name="check_cant" id="check_cant" checked>
</label>
<br>
<label for="min_cant">
Minimo <span><?= $minCant ? $minCant : 0 ?></span>:
<input type="range" name="min_cant" value="<?= $minCant ? $minCant : 0 ?>" min="0" max="90" step="1">
</label>
<br>
<label for="max_cant">
Maximo <span><?= $maxCant ? $maxCant : 100 ?></span>:
<input type="range" name="max_cant" value="<?= $maxCant ? $maxCant : 100 ?>" min="10" max="100" step="1">
</label>
<br>
<button type="submit">Enviar</button>
<a href="<?= route_to('product.trace',$product->id) ?>">Limpiar</a>
</form>In which you can place other fields of any type for your filters; which we do in the full CodeIgniter 4 course; these fields at the end are nothing more than those used in the forms to perform any other saving or editing operation, we have the SELECT and text fields but you can use others such as CHECKBOX or RADIUS if you consider them necessary.
But that is another story; note that the action of the form is not defined, which means that when sending the request it will be processed by the same page that paints the search form; in the case of the course, it is a list of product details.
Whose filter, as you can see in the previous form, is processed by the same controller that processes the previous table; In our controller, to know if we are going to process any search data, we ask from the filter:
$searchs = explode(" ", trim($this->request->getGet('search')));
if ($this->request->getGet('search')) {
//->orGroupStart()
$query->groupStart();
foreach ($searchs as $s) {
$query->orLike('u.username', $s)
->orLike('u.email', $s)
->orLike('puc.description', $s);
}
$query->groupEnd();Here are several aspects that you have to take into account:
- We use the explode function to search for tokens.
- We iterate the tokens and search for partial matches with the like on the columns we want to search for; in our case, a username, email and description that make sure they belong to different tables.
Since we are using OR operations, it is possible that they interfere with other where or similar filters in the rest of the query; therefore, we group them (in SQL we put them in parentheses) so that they only affect the section of the search with the groupStart and groupEnd
In essence all of the above steps are optional and depending on your needs you may want to search for exact matches; if that's the case, you just need to define it as:
$query->where('u.username', $this->request->getGet('search'))To find an exact match on the username column.
You can see the complete code in case you have doubts
https://github.com/libredesarrollo/codeigniter4-inventario/blob/main/app/Controllers/Dashboard/Product.php
The important thing here is to note that we are building the query to tokens or pieces, in which we ask through a conditional if we have data received by the user and with this we build the query; as in our example is a lookup field that we want to build
The next step is to complete the CRUD process and implement the option to delete records in CodeIgniter 4.
I agree to receive announcements of interest about this Blog.
We are going to know how we can create the list of records in a table using CodeIgniter 4, this list will be paginated and it is a fundamental element for our CRUD.