Crear una vista de listado o tabla en CodeIgniter 4 con estilo en Bootstrap 4 o 5

Bootstrap 5 es la última versión del popular framework web basado en componentes conocido como Bootstrap. Bootstrap es un conjunto de herramientas de diseño web que permite a los desarrolladores crear sitios web y aplicaciones web de manera rápida y eficiente y personalizar la experiencia con relativa facilidad. Bootstrap 5 es la versión más reciente de la biblioteca, y cuenta con nuevas funcionalidades y mejoras en comparación con las versiones anteriores.

Creando un listado en CodeIgniter 4

En esta entrada vamos a ver una de las operaciones CRUD fundamentales, la que centraliza el resto de las operaciones CRUD que sería la de listado; puedes emplear cualquier tipo de componente HTML en conjunto con CSS y JavaScript para darle el diseño que tu quieras; pero en nuestro caso de interés nos importa es la parte de atrás, nuestro backend para obtener toda la data que queramos manipular.

En esta entrada vamos a crear una sencilla tabla paginada para ejemplificar cómo podemos crear un listado paginado en CodeIgniter 4; pero puede ser cualquier cosa, aunque el elemento empleado por excelencia para la paginación es una tabla.

En nuestro controlador de Movie que creamos anteriormente para procesar un formulario, podemos crear otra función que por convención siguiendo nuestra ruta de tipo recurso sería la de index, la primera función que devuelve el primer recurso CRUD de nuestra app, la que permite mostrar todos nuestros registros.

Construyendo el listado desde el controlador

Así que aquí podríamos obtener de una todos los registros con la función de all:

$people->asObject()->get()

Pero en CodeIgniter 4 tenemos una función que ya lleva mucho tiempo en otros frameworks como Laravel, Flask o Django y es la función llamada pagination que nos permite obtener los datos de manera paginada; internamente emplea un parámetro que viaja vía gestión llamada pago para saber qué bloque de registros paginados deseas trabajar:

    public function index()
    {
 
        $people = new PersonModel();
 
        $data = [
            'people' => $people->asObject()->paginate(10),
            'pager' => $people->pager
        ];
 
        return view('person/index',$data);
    }

Y con esto, perfectamente podemos crear una vista; desde nuestra función de index:

Y con esto la vista:

<!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>

Que como puedes ver, simplemente tiene un foreach de php para iterar la data que le estamos pasando.

Enlaces de paginación

Para los enlaces de paginación podemos emplear la función llamada links:

<?= $pager->links() ?>

Si quieres ver como adaptar CodeIgniter 4 con Bootstrap 5

03-11-2020 - Andrés Cruz

In english

Lista

Bootstrap

CRUD

MySQL

Base de Datos

PHP

CodeIgniter

Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter

Andrés Cruz En Udemy