Skip to content

Unidad 6: Ordenación en el patrón MVC

6.1 Introducción a la paginación en MVC

El objetivo es permitir que el usuario pueda ordenar la lista de empleados por ID, nombre o apellido, y que los botones de ordenación estén ubicados dentro de la tabla, junto a los títulos de las columnas.

Pasos a seguir:

  1. Modificar la consulta SQL en el modelo para aceptar parámetros dinámicos para la ordenación.
  2. Modificar el controlador para gestionar las solicitudes de ordenación.
  3. Modificar la vista para mostrar los botones de ordenación en los títulos de las columnas, utilizando los signos + (ascendente) y - (descendente).

6.1.1. Modificación de la Consulta SQL en el Modelo

Para poder ordenar los empleados por diferentes campos, vamos a modificar el modelo para que acepte parámetros dinámicos que indiquen por qué columna queremos ordenar (por ejemplo, ID, nombre, apellido) y si el orden es ascendente o descendente.

Código actualizado en Empleado.php para soportar la ordenación:

Modificación del modelo

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<?php
class Empleado {
    ...
    // Obtener empleados con paginación y ordenación
    public function obtenerEmpleados(
        $pagina = 1, 
        $empleadosPorPagina = 10,
        $ordnarPor = 'emp_no',
        $orden = 'ASC') {
        $offset = ($pagina - 1) * $empleadosPorPagina;
        $query = "SELECT * 
                    FROM employees 
                    ORDER BY $ordnarPor $orden
                    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);
    }
   ...
}
?>

Explicación:

  • obtenerEmpleados:
    • Ahora acepta dos nuevos parámetros: $ordenarPor y $orden.
    • $ordenarPor es la columna por la que se va a ordenar (por ejemplo, emp_no, first_name, last_name).
    • $orden es la dirección del orden (ASC para ascendente, DESC para descendente).
    • La consulta SQL se modifica para incluir ORDER BY $ordenarPor $orden, lo que permite ordenar dinámicamente por la columna y dirección seleccionada.

6.1.2. Modificación del Controlador

El Controlador es el encargado de recibir los parámetros de ordenación desde la vista y pasarlos al Modelo para que se pueda ordenar la lista de empleados correctamente.

Código actualizado en EmpleadoControlador.php para gestionar la ordenación:

Modificación del controlador

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<?php
// Incluir el modelo
include '../modelo/Empleado.php';

class EmpleadoControlador {
    private $modelo;

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

    // Ver empleados con paginación y ordenación
    public function verEmpleados($pagina = 1, $ordenarPor = 'emp_no', $orden = 'ASC') {
        $empleadosPorPagina = 10;  // Definir cuántos empleados mostrar por página

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

        // 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:

  • El Controlador recibe dos nuevos parámetros: $ordenarPor (columna por la que ordenar) y $orden (dirección de la ordenación).
  • Estos parámetros son pasados al Modelo para que la consulta SQL se ejecute correctamente con la ordenación seleccionada.

6.1.3. Modificación de la Vista para Mostrar los Botones de Ordenación

Ahora, vamos a modificar la Vista para que los usuarios puedan ordenar la lista de empleados por ID, nombre o apellido, y alternar entre orden ascendente y descendente.

Código de la Vista empleados.php con botones para ordenar:

Modificación de la vista

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
<?php
// Iniciar la sesión
session_start();

// Verificar si el usuario está autenticado
if (!isset($_SESSION['usuario'])) {
    header('Location: login.php');  // Redirigir al login si no está autenticado
    exit;
}
?>

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Empleados</title>
    <style>
        /* Estilos para los botones de ordenación */
        .ordenar {
            cursor: pointer;
            margin-left: 5px;
            font-size: 16px;
        }
    </style>
</head>
<body>

    <!-- Menú de navegación -->
    <nav>
        <ul>
            <li><a href="index.php">Inicio</a></li>
            <li><a href="empleados.php">Empleados</a></li>
            <li><a href="departamentos.php">Departamentos</a></li>
            <li><a href="contacto.php">Contacto</a></li>
            <li><a href="logout.php">Cerrar sesión</a></li>
        </ul>
    </nav>

    <!-- Contenido de la página de empleados -->
    <section id="empleados">
        <h1>Lista de Empleados</h1>

        <!-- Tabla de empleados -->
        <table>
            <thead>
                <tr>
                    <th><a href="index.php?accion=ver_empleados&ordenarPor=emp_no&orden=ASC" class="ordenar">ID +</a> | 
                        <a href="index.php?accion=ver_empleados&ordenarPor=emp_no&orden=DESC" class="ordenar">ID -</a></th>
                    <th><a href="index.php?accion=ver_empleados&ordenarPor=first_name&orden=ASC" class="ordenar">Nombre +</a> | 
                        <a href="index.php?accion=ver_empleados&ordenarPor=first_name&orden=DESC" class="ordenar">Nombre -</a></th>
                    <th><a href="index.php?accion=ver_empleados&ordenarPor=last_name&orden=ASC" class="ordenar">Apellido +</a> | 
                        <a href="index.php?accion=ver_empleados&ordenarPor=last_name&orden=DESC" class="ordenar">Apellido -</a></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>
                        <a href="index.php?accion=eliminar_empleado&id=<?= $empleado['emp_no'] ?>" onclick="return confirm('¿Estás seguro de eliminar este empleado?')">Eliminar</a>
                    </td>
                </tr>
                <?php endforeach; ?>
            </tbody>
        </table>

        <!-- Paginación -->
        <div id="paginacion">
            <!-- Ir a la primera página -->
            <a href="index.php?accion=ver_empleados&pagina=1">Primera</a>

            <!-- Ir a la página anterior (si no estamos en la primera) -->
            <?php if ($pagina > 1): ?>
                <a href="index.php?accion=ver_empleados&pagina=<?= $pagina - 1 ?>">Anterior</a>
            <?php endif; ?>

            <!-- Mostrar el número de página actual y total -->
            Página <?= $pagina ?> de <?= $totalPaginas ?>

            <!-- Ir a la página siguiente (si no estamos en la última) -->
            <?php if ($pagina < $totalPaginas): ?>
                <a href="index.php?accion=ver_empleados&pagina=<?= $pagina + 1 ?>">Siguiente</a>
            <?php endif; ?>

            <!-- Ir a la última página -->
            <a href="index.php?accion=ver_empleados&pagina=<?= $totalPaginas ?>">Última</a>
        </div>
    </section>

</body>
</html>

Explicación:

  • Botones de ordenación:
    • Los botones de ordenación (ascendente y descendente) están ubicados junto a cada título de columna (ID, Nombre, Apellido).
    • Cuando se hace clic en uno de estos botones, se pasa el parámetro ordenarPor y orden a la URL, que son gestionados por el controlador para aplicar la ordenación correspondiente.
    • Los signos + y - indican si el orden es ascendente (ASC) o descendente (DESC).

6.1.4. Modificación del controlador frontal

El controlador frontal es el encargado de recibir las solicitudes y dirigirlas al controlador correspondiente. En este caso, se debe modificar para que acepte los nuevos parámetros de ordenación. Necesitamos asegurarnos de que los parámetros ordenarPor y orden se pasen correctamente al controlador de empleados.

Código actualizado en index.php para gestionar la ordenación:

Modificación del controlador frontal

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
<?php
    // Obtener la acción de la URL (puede ser: ver_empleados, editar_empleado, etc.)
    $accion = isset($_GET['accion']) ? $_GET['accion'] : 'inicio';

    // Obtener los parámetros de paginación y ordenación
    $pagina = isset($_GET['pagina']) ? (int)$_GET['pagina'] : 1;  // Página por defecto: 1
    $ordenarPor = isset($_GET['ordenarPor']) ? $_GET['ordenarPor'] : 'emp_no';  // Ordenar por ID por defecto
    $orden = isset($_GET['orden']) ? $_GET['orden'] : 'ASC';  // Orden ascendente por defecto

    // Llamar al método que maneja la solicitud según la acción
    $controladorPrincipal->manejarSolicitud($accion, $pagina, $ordenarPor, $orden);
?>

Explicación:

  • Parámetros de ordenación:
    • Se obtienen los parámetros ordenarPor y orden de la URL.
    • Si no se especifican, se asignan valores por defecto (emp_no para ID y ASC para orden ascendente).
    • Estos parámetros se pasan al controlador correspondiente para que la lista de empleados se ordene según lo solicitado.
  • Controlador: El controlador de empleados ahora recibe los parámetros de ordenación y los utiliza para obtener la lista de empleados ordenada.

Modificación del controlador frontal

Modificación del controlador frontal

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
...
// Maneja las solicitudes
public function manejarSolicitud($accion, $pagina = 1, $ordenarPor = 'emp_no', $orden = 'ASC') ...
    ...
    case 'ver_empleados':
            // Mostrar empleados
            $controlador = new EmpleadoControlador();
            $pagina = isset($_GET['pagina']) ? $_GET['pagina'] : 1;
            $controlador->verEmpleados($pagina, $ordenarPor, $orden);
            die();
            break;
    ...

Resumen de las modificaciones para la ordenación:

  1. Modelo: Modificamos la consulta SQL para aceptar parámetros de ordenación dinámica (por ID, nombre, apellido) y la dirección (ascendente o descendente).
  2. Controlador: El controlador maneja los parámetros de ordenación y los pasa al modelo para obtener los empleados ordenados correctamente.
  3. Vista: Los enlaces de ordenación se añaden a los títulos de las columnas, permitiendo al usuario ordenar los empleados de acuerdo con el criterio deseado.
  4. Controlador frontal: Se modificó para recibir y pasar los parámetros de ordenación al controlador correspondiente.