1-Banner Dinámico

 Creando el Banner Dinámico para un Sitio Web de Hotel

En este post, voy a compartir cómo implementé la sección de banner para el sitio web de un hotel, haciendo que las imágenes sean completamente dinámicas y administrables desde una base de datos.

Estructura de la Base de Datos

Comencé creando una tabla simple en MySQL para almacenar las imágenes del banner:

sql

Copy

Download

CREATE TABLE `banner` (
  `id` int(11) NOT NULL,
  `img` text NOT NULL,
  `fecha` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

Esta tabla contiene:

• Un ID autoincremental

• La ruta de la imagen

• La fecha de creación/actualización

Arquitectura MVC

Implementé el patrón Modelo-Vista-Controlador (MVC) para organizar el código:

1. Modelo (ModeloBanner.php)

php

Copy

Download

class ModeloBanner{
    static public function mdlMostrarBanner($tabla){
        $stmt = Conexion::conectar()->prepare("SELECT * FROM $tabla");
        $stmt->execute();
        return $stmt->fetchAll();
        $stmt->close();
        $stmt = null;
    }
}

2. Controlador (ControladorBanner.php)

php

Copy

Download

class ControladorBanner{
    static public function ctrMostrarBanner(){
        $tabla = "banner";
        $respuesta = ModeloBanner::mdlMostrarBanner($tabla);
        return $respuesta;
    }
}

3. Vista (HTML con Bootstrap)

html

Copy

Download

Run

<div id="carouselBanner" class="carousel slide" data-bs-ride="carousel">
    <div class="carousel-inner">
        <?php foreach ($banner as $key => $value): ?>
            <div class="carousel-item <?= $key == 0 ? 'active' : '' ?>">
                <img src="<?= $servidor.$value["img"] ?>" class="d-block w-100" alt="Banner">
            </div>
        <?php endforeach; ?>
    </div>
    
    <!-- Controles e indicadores -->
    <button class="carousel-control-prev" type="button" data-bs-target="#carouselBanner" data-bs-slide="prev">
        <span class="carousel-control-prev-icon"></span>
    </button>
    <button class="carousel-control-next" type="button" data-bs-target="#carouselBanner" data-bs-slide="next">
        <span class="carousel-control-next-icon"></span>
    </button>
    
    <div class="carousel-indicators">
        <?php foreach ($banner as $index => $value): ?>
            <button type="button" data-bs-target="#carouselBanner" data-bs-slide-to="<?= $index ?>" 
                class="<?= $index == 0 ? 'active' : '' ?>"></button>
        <?php endforeach; ?>
    </div>
</div>

Lecciones Aprendidas

1. Configuración de rutas: Es crucial configurar correctamente las rutas en el controlador de rutas para que todos los recursos se carguen adecuadamente.

2. Estructura MVC: Separar la lógica en modelo, vista y controlador hace el código más mantenible y escalable.

3. Bootstrap Carousel: Utilicé el componente Carousel de Bootstrap 5 para crear un slider responsive con controles e indicadores.

4. Conexión a BD: Implementé una clase de conexión reutilizable que maneja caracteres UTF-8 para soportar contenido internacional.

5. Dinamismo: Ahora las imágenes del banner pueden cambiarse simplemente actualizando la base de datos, sin necesidad de modificar el código.