Agregar un paginador y un buscador al Frontend – Del proyecto “Crea un carrito de compras con PHP, MySQL y Bootstrap”

Publicado el 16 diciembre, 2024
por Mtro. Fernando Omar Arciniega Martínez

Para mejorar la funcionalidad del frontend, implementaremos dos características:

1. Un paginador que muestra 9 productos por página.
2. Un buscador que permite filtrar productos por nombre o descripción.

Aquí te detallo los cambios realizados al código original para agregar las funcionalidades de paginación (9 productos por página) y el buscador, manteniendo el encabezado y el pie de página.

---

Cambios realizados al código original

1. Incorporación de variables y lógica para la paginación

• Nuevas variables:
  • $productos_por_pagina: Define cuántos productos se mostrarán por página (9 en este caso).
  • $pagina_actual: Obtiene el número de página desde la URL (GET['pagina']).
  • $inicio: Calcula el índice inicial para la consulta SQL con LIMIT.
• Consulta para contar productos:
  • Se agregó una consulta para contar el total de productos y calcular cuántas páginas serán necesarias.
  • Si hay una búsqueda activa, el conteo se ajusta para filtrar solo los productos que coinciden con la búsqueda.

Código agregado:

$productos_por_pagina = 9;
$pagina_actual = isset($_GET['pagina']) ? (int)$_GET['pagina'] : 1;
if ($pagina_actual < 1) $pagina_actual = 1;
$inicio = ($pagina_actual - 1) * $productos_por_pagina;

// Consulta para contar productos
if (!empty($busqueda)) {
    $consulta_total = "SELECT COUNT(*) AS total FROM productos WHERE nombre LIKE '%$busqueda%' OR descripcion LIKE '%$busqueda%'";
} else {
    $consulta_total = "SELECT COUNT(*) AS total FROM productos";
}
$total_productos = $conexion->query($consulta_total)->fetch_assoc()['total'];
$total_paginas = ceil($total_productos / $productos_por_pagina);

---

2. Modificación de la consulta de productos

• Se añadió el uso de LIMIT para dividir los productos en páginas.
• Si hay una búsqueda activa, se agregó un filtro en la consulta con WHERE nombre LIKE o descripcion LIKE.

Código agregado/modificado:

if (!empty($busqueda)) {
    $consulta = "SELECT * FROM productos WHERE nombre LIKE '%$busqueda%' OR descripcion LIKE '%$busqueda%' LIMIT $inicio, $productos_por_pagina";
} else {
    $consulta = "SELECT * FROM productos LIMIT $inicio, $productos_por_pagina";
}
$resultado = $conexion->query($consulta);

---

3. Inclusión del formulario de búsqueda

• Se añadió un formulario HTML en la parte superior del listado de productos, con un campo de texto y un botón para buscar productos.
• El valor del campo de texto se conserva al recargar la página para mostrar el término de búsqueda.

Código agregado:

<div class="mb-4">
    <form action="index.php" method="GET" class="form-inline justify-content-center">
        <input type="text" name="busqueda" class="form-control mr-sm-2" placeholder="Buscar productos..." value="<?php echo isset($_GET['busqueda']) ? htmlspecialchars($_GET['busqueda']) : ''; ?>">
        <button type="submit" class="btn btn-primary">Buscar</button>
    </form>
</div>

---

4. Inclusión del paginador

• Se añadió un paginador al final de la página que muestra enlaces para navegar entre las páginas de productos.
• Si hay una búsqueda activa, el término de búsqueda se mantiene en los enlaces de paginación.

Código agregado:

<div class="mt-4">
    <nav aria-label="Paginador">
        <ul class="pagination justify-content-center">
            <?php if ($pagina_actual > 1): ?>
                <li class="page-item">
                    <a class="page-link" href="index.php?pagina=<?php echo $pagina_actual - 1; ?>&busqueda=<?php echo urlencode($busqueda); ?>">Anterior</a>
                </li>
            <?php endif; ?>
            <?php for ($i = 1; $i <= $total_paginas; $i++): ?>
                <li class="page-item <?php echo ($i == $pagina_actual) ? 'active' : ''; ?>">
                    <a class="page-link" href="index.php?pagina=<?php echo $i; ?>&busqueda=<?php echo urlencode($busqueda); ?>"><?php echo $i; ?></a>
                </li>
            <?php endfor; ?>
            <?php if ($pagina_actual < $total_paginas): ?>
                <li class="page-item">
                    <a class="page-link" href="index.php?pagina=<?php echo $pagina_actual + 1; ?>&busqueda=<?php echo urlencode($busqueda); ?>">Siguiente</a>
                </li>
            <?php endif; ?>
        </ul>
    </nav>
</div>

---

Resumen de los cambios

1. Paginador:
   • Divide los productos en páginas de 9 elementos.
   • Calcula dinámicamente cuántas páginas serán necesarias.
2. Buscador:
   • Filtra productos por nombre o descripción.
   • Mantiene el término de búsqueda al navegar entre páginas.
3. Consulta SQL dinámica:
   • Ajusta la consulta según la búsqueda o paginación.
4. Mantención del encabezado y pie de página:
   • Asegura que el diseño y las funcionalidades originales se conserven.

---

Exito!