Unidad 5: Paginación en el patrón MVC

5.1 Introducción a la paginación en MVC

5.1.1 ¿Qué es la paginación?

La paginación es una técnica utilizada en aplicaciones web para dividir grandes conjuntos de datos en partes más pequeñas y manejables, conocidas como "páginas". Esto permite a los usuarios navegar a través de los datos sin tener que cargar toda la información de una sola vez, lo que mejora la experiencia del usuario y reduce el tiempo de carga.

Cuando se trabaja con grandes cantidades de datos, como una lista de empleados, es importante presentar la información de manera clara y organizada. Los tiempos de carga prolongados y la sobrecarga de información pueden frustrar a los usuarios y hacer que abandonen la aplicación. La paginación ayuda a mitigar estos problemas al dividir los datos en partes más pequeñas y manejables.

Ejemplo: Si tienes una lista de 1000 empleados y solo deseas mostrar 10 empleados por página, la paginación dividiría esa lista en 100 páginas. El usuario podrá navegar entre las páginas para ver los empleados de manera más eficiente.

En términos de bases de datos, la paginación se logra utilizando cláusulas LIMIT y OFFSET en las consultas SQL. Estas cláusulas controlan cuántos resultados devolverá la consulta y a partir de qué punto (es decir, qué página).

5.1.2 Ventajas de la paginación en una aplicación web

• Mejora el rendimiento: Al cargar solo una parte de los datos a la vez, se reduce la cantidad de información que el servidor y el cliente deben procesar, lo que mejora el rendimiento general de la aplicación.
• Mejor experiencia de usuario (UX): La paginación permite a los usuarios navegar fácilmente a través de grandes conjuntos de datos sin sentirse abrumados. Los controles de paginación, como botones de "siguiente" y "anterior", facilitan la navegación.
• Menor consumo de recursos: Al reducir la cantidad de datos que se cargan y procesan al mismo tiempo, se disminuye el consumo de recursos del servidor y del cliente, lo que puede resultar en un mejor rendimiento y menor carga en la infraestructura.
• Facilita la búsqueda y filtrado: La paginación permite a los usuarios buscar y filtrar datos de manera más eficiente, ya que pueden centrarse en un subconjunto específico de información en lugar de tener que revisar una lista completa.
• Mejora la escalabilidad: A medida que la cantidad de datos crece, la paginación ayuda a mantener un rendimiento aceptable y una buena experiencia de usuario, lo que facilita la escalabilidad de la aplicación.
• Facilita la implementación de características adicionales: La paginación puede ser combinada con otras características, como la búsqueda y el filtrado, para mejorar aún más la experiencia del usuario y la eficiencia de la aplicación.
• Mejora la accesibilidad: La paginación puede ayudar a que la información sea más accesible para los usuarios con discapacidades, ya que les permite navegar a través de los datos de manera más sencilla y organizada.
• Facilita la implementación de controles de navegación: La paginación permite a los desarrolladores implementar controles de navegación intuitivos y fáciles de usar, lo que mejora la usabilidad de la aplicación.
• Mejora la legibilidad: Al dividir los datos en partes más pequeñas, la paginación mejora la legibilidad de la información, lo que facilita su comprensión y análisis por parte de los usuarios.
• Facilita la implementación de características de ordenación: La paginación puede ser combinada con características de ordenación para permitir a los usuarios organizar los datos de acuerdo a sus preferencias, lo que mejora aún más la experiencia del usuario.

Conclusión del punto 5.1:

La paginación es una herramienta esencial para mejorar el rendimiento, la experiencia de usuario (UX) y la gestión de datos en aplicaciones web que manejan grandes volúmenes de información. Al implementarla correctamente en el patrón MVC, podemos lograr un sistema más escalable, rápido y fácil de usar.

5.2 Implementación de la paginación en MVC

5.2.1 Modificación del modelo

Para implementar la paginación en el modelo de empleados, debemos modificar la consulta SQL para que devuelva solo un número limitado de registros por página. Esto se logra utilizando las cláusulas LIMIT y OFFSET.

La cláusula LIMIT especifica el número máximo de registros que se devolverán, mientras que la cláusula OFFSET indica desde qué registro comenzar a devolver los resultados. Por ejemplo, si queremos mostrar 10 empleados por página y estamos en la página 2, la consulta SQL sería algo así:

SELECT * FROM empleados
LIMIT 10 OFFSET 10;

En este caso, LIMIT 10 indica que queremos 10 registros y OFFSET 10 indica que comenzamos desde el registro 11 (es decir, la segunda página de resultados).

El Modelo es responsable de interactuar con la base de datos y de obtener los datos que vamos a mostrar. Para implementar la paginación, necesitaremos modificar la consulta SQL para que devuelva solo un número limitado de registros por página, y también debemos manejar la lógica para obtener el número total de registros, lo cual es necesario para mostrar los controles de paginación (como las páginas siguientes y anteriores).

1. Actualizar la consulta SQL para que utilice LIMIT y OFFSET.
2. Obtener el número total de registros para calcular cuántas páginas se necesitan.

Código de Empleado.php modificado para la paginación:

Modificación del modelo

<?php
// Incluir el archivo de conexión a la base de datos
include __DIR__ . '/../lib/bd.php';

class Empleado {
    private $conexion;

    public function __construct() {
        // Obtener la conexión a la base de datos
        $this->conexion = obtenerConexion();
    }

    // Obtener empleados con paginación
    public function obtenerEmpleados($pagina = 1, $empleadosPorPagina = 10) {
        // Calcular el offset para la consulta
        $offset = ($pagina - 1) * $empleadosPorPagina;

        // Consultar los empleados con LIMIT y OFFSET
        $query = "SELECT * FROM employees LIMIT :empleadosPorPagina OFFSET :offset";
        $stmt = $this->conexion->prepare($query);
        $stmt->bindValue(':empleadosPorPagina', $empleadosPorPagina, PDO::PARAM_INT);
        $stmt->bindValue(':offset', $offset, PDO::PARAM_INT);
        $stmt->execute();

        // Obtener los resultados
        return $stmt->fetchAll(PDO::FETCH_ASSOC);
    }

    // Obtener el número total de empleados
    public function obtenerTotalEmpleados() {
        $query = "SELECT COUNT(*) FROM employees";
        $stmt = $this->conexion->prepare($query);
        $stmt->execute();

        // Devolver el total de empleados
        return $stmt->fetchColumn();
    }
}
?>

Explicación:

1. obtenerEmpleados($pagina, $empleadosPorPagina):

   • Realizamos una consulta SQL que obtiene un número limitado de empleados por página usando LIMIT y OFFSET.
   • El LIMIT controla cuántos registros se devuelven, y el OFFSET determina desde qué registro empezar a mostrar.

2. obtenerTotalEmpleados():

   • Esta función obtiene el total de empleados de la base de datos, lo cual es necesario para calcular el número de páginas en la vista (paginación).

---

5.2.2 Modificación del Controlador

El Controlador es el encargado de manejar la lógica de negocio, y en este caso, necesitamos modificarlo para que gestione la paginación.

Código del EmpleadoControlador.php modificado para la paginación:

Modificación del controlador

<?php
// Incluir el modelo
include '../modelo/Empleado.php';

class EmpleadoControlador {
    private $modelo;

    public function __construct() {
        $this->modelo = new Empleado();
    }

    // Ver empleados con paginación
    public function verEmpleados($pagina = 1) {
        $empleadosPorPagina = 10;  // Definir cuántos empleados mostrar por página

        // Obtener empleados de la base de datos con paginación
        $empleados = $this->modelo->obtenerEmpleados($pagina, $empleadosPorPagina);

        // Obtener el total de empleados para la paginación
        $totalEmpleados = $this->modelo->obtenerTotalEmpleados();

        // Calcular el total de páginas
        $totalPaginas = ceil($totalEmpleados / $empleadosPorPagina);

        // Incluir la vista y pasar los datos
        include '../vista/empleados.php';
    }
}
?>

Explicación:

1. verEmpleados($pagina):

   • Recibe el número de página desde la URL.
   • Llama al Modelo para obtener los empleados correspondientes a esa página y calcula el número total de páginas disponibles.

2. $totalPaginas: Calculamos el total de páginas dividiendo el total de empleados por la cantidad de empleados por página. Usamos ceil() para redondear hacia arriba.

---

5.2.3 Modificación de la Vista

Ahora que el Controlador nos pasa los empleados de la página actual y el número total de páginas, debemos modificar la Vista para mostrar los empleados y los controles de paginación.

Código de la Vista (empleados.php) con paginación:

La vista mostrará los empleados obtenidos desde el Controlador y añadirá controles de paginación para navegar entre las páginas. Ya que las páginas pueden ser muchas, es importante que la paginación sea clara y fácil de usar. En este caso hemos creado enlaces:

• Primera: Enlace a la primera página.
• Anterior: Enlace a la página anterior (si no estamos en la primera).
• Página actual: Muestra el número de la página actual y el total de páginas.
• Siguiente: Enlace a la siguiente página (si no estamos en la última).
• Última: Enlace a la última página.

Modificación de la vista

<?php
// Comprobar si el usuario proviene de la página de inicio
include __DIR__ . '/../lib/access.php';
?>

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Empleados</title>
</head>
<body>

    <!-- Menú de navegación -->
    <nav>
        <ul>
            <li><a href="index.php?accion=inicio">Inicio</a></li>
            <?php if (isset($_SESSION['usuario'])): ?>
                <!-- Mostrar opciones de Empleados y Departamentos solo si el usuario está logueado -->
                <li><a href="index.php?accion=ver_empleados">Empleados</a></li>
                <li><a href="index.php?accion=ver_departamentos">Departamentos</a></li>
            <?php endif; ?>
            <li><a href="index.php?accion=contacto">Contacto</a></li>
            <!-- Si el usuario no está logueado, mostramos el enlace al login -->
            <?php if (!isset($_SESSION['usuario'])): ?>
                <li><a href="index.php?accion=login">Login</a></li>
            <?php else: ?>
                <li><a href="index.php?accion=logout">Cerrar sesión</a></li>
            <?php endif; ?>
        </ul>
    </nav>
    <!-- Contenido de la página de empleados -->
    <section id="empleados">
        <h1>Lista de Empleados</h1>
        <div id="Añadir empleados">
            <a href="index.php?accion=agregar_empleado">Agregar Nuevo Empleado</a>
        </div>
        <!-- Tabla de empleados -->
        <table>
            <thead>
                <tr>
                    <th>ID</th>
                    <th>Nombre</th>
                    <th>Apellido</th>
                    <th>Fecha de Nacimiento</th>
                    <th>Fecha de Contratación</th>
                    <th>Género</th>
                    <th>Acciones</th>
                </tr>
            </thead>
            <tbody>
                <?php foreach ($empleados as $empleado): ?>
                <tr>
                    <td><?= $empleado['emp_no'] ?></td>
                    <td><?= $empleado['first_name'] ?></td>
                    <td><?= $empleado['last_name'] ?></td>
                    <td><?= $empleado['birth_date'] ?></td>
                    <td><?= $empleado['hire_date'] ?></td>
                    <td><?= $empleado['gender'] ?></td>
                    <td>
                        <a href="index.php?accion=editar_empleado&id=<?= $empleado['emp_no'] ?>">Editar</a>
                        button onclick="eliminarEmpleado(<?= $empleado['emp_no']?>);" >Eliminar</button>
                    </td>
                </tr>
                <?php endforeach; ?>
            </tbody>
        </table>

        <!-- Paginación -->
        <div id="paginacion">
            <a href="index.php?accion=ver_empleados&pagina=1">Primera</a>
            <?php if ($pagina > 1): ?>
                <a href="index.php?accion=ver_empleados&pagina=<?= $pagina - 1 ?>">Anterior</a>
            <?php endif; ?>
            Página <?= $pagina ?> de <?= $totalPaginas ?>
            <?php if ($pagina < $totalPaginas): ?>
                <a href="index.php?accion=ver_empleados&pagina=<?= $pagina + 1 ?>">Siguiente</a>
            <?php endif; ?>
            <a href="index.php?accion=ver_empleados&pagina=<?= $totalPaginas ?>">Última</a>
        </div>
    </section>
    <script>
        function eliminarEmpleado(emp_no) {
            if (confirm('¿Estás seguro de que deseas eliminar este empleado?')) {
                window.location.href = `index.php?accion=eliminar_empleado&id=${emp_no}`;
            }
        }
    </script>

</body>
</html>

Modificación del front controller (controlador frontal)

En el controlador frontal, debemos asegurarnos de que la acción de ver empleados esté correctamente configurada para manejar la paginación. Esto implica pasar el número de página a la función del controlador. El número de página siempre debe ser un número entero positivo, y si no se proporciona, se asume que es la primera página.

    case 'ver_empleados':
            // Mostrar empleados
            $controlador = new EmpleadoControlador();
            $pagina = isset($_GET['pagina']) ? $_GET['pagina'] : 1;
            $controlador->verEmpleados($pagina);
            die();
            break;

Explicación:

1. Tabla de empleados: Muestra los empleados obtenidos desde el Controlador.
2. Controles de paginación:
   • Primer enlace: Redirige a la primera página.
   • Enlace anterior: Muestra el enlace a la página anterior si no estamos en la primera página.
   • Página actual: Muestra el número de la página actual y el total de páginas.
   • Enlace siguiente: Muestra el enlace a la siguiente página si no estamos en la última página.
   • Último enlace: Redirige a la última página de empleados.

---

Resumen del Punto 5.2:

1. Modelo:
2. Modificamos el modelo para manejar la paginación usando LIMIT y OFFSET.

3. Añadimos una función para obtener el total de empleados, necesario para calcular el número total de páginas.

4. Controlador:

5. El controlador ahora maneja la paginación de los empleados, pasando los empleados de la página actual y el número total de páginas a la vista.

6. Vista:

7. La vista muestra los empleados de la página actual y los controles de paginación para navegar entre las páginas de empleados.

---

Próximos pasos:

• Implementar validaciones y mejorar la experiencia de usuario con filtros adicionales.
• Mejorar la estética de la paginación y agregar más funcionalidades como búsquedas o ordenación de los empleados.