2-Planes

 Implementando la Sección de Planes Dinámicos para un Hotel

En este nuevo post del blog, comparto cómo desarrollé la sección de planes para el sitio web del hotel, permitiendo mostrar diferentes opciones de hospedaje con precios variables según temporada.

Estructura de la Base de Datos

Creé una tabla planes con los siguientes campos:

sql

Copy

Download

CREATE TABLE `planes` (
  `id` int(11) NOT NULL,
  `tipo` text NOT NULL,
  `img` text NOT NULL,
  `descripcion` text NOT NULL,
  `precio_alta` float NOT NULL,
  `precio_baja` float NOT NULL,
  `fecha` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

Esta estructura permite:

• Identificador único para cada plan

• Tipo de plan (Romántico, Luna de Miel, Aventura, Spa)

• Imagen representativa

• Descripción detallada

• Precios diferenciados por temporada

• Fecha de creación/actualización

Arquitectura MVC para los Planes

1. Modelo (ModeloPlanes.php)

php

Copy

Download

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

2. Controlador (ControladorPlanes.php)

php

Copy

Download

class ControladorPlanes {
    static public function ctrMostrarPlanes() {
        $tabla = "planes";
        return ModeloPlanes::mdlMostrarPlanes($tabla);
    }
}

3. Vista (HTML con Bootstrap 5)

Implementé una cuadrícula responsive con efectos hover y modales para mostrar detalles:

html

Copy

Download

Run

<div class="container text-center py-5">
    <h1 class="text-uppercase">Descubre Nuestros Planes</h1>
    <p class="text-muted">Elige el plan que más se adapte a tu experiencia.</p>

    <div class="row g-4">
        <?php foreach ($planes as $value): ?>
            <div class="col-md-6 col-lg-3">
                <div class="plan-container" data-bs-toggle="modal" data-bs-target="#modalPlan<?php echo $value['id']; ?>">
                    <img src="<?php echo $servidor . $value['img']; ?>" alt="Plan <?php echo $value['tipo']; ?>" class="img-fluid">
                    <div class="overlay">
                        PLAN <?php echo $value['tipo']; ?>
                    </div>
                </div>
            </div>

            <!-- Modal para cada plan -->
            <div class="modal fade" id="modalPlan<?php echo $value['id']; ?>" tabindex="-1">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title text-uppercase">Plan <?php echo $value['tipo']; ?></h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            <img src="<?php echo $servidor . $value['img']; ?>" class="img-fluid mb-3">
                            <p><?php echo $value['descripcion']; ?></p>
                            <div class="d-flex justify-content-between mt-4">
                                <span class="badge bg-warning text-dark">Temporada Alta: $<?php echo number_format($value['precio_alta'], 0, ',', '.'); ?></span>
                                <span class="badge bg-info text-dark">Temporada Baja: $<?php echo number_format($value['precio_baja'], 0, ',', '.'); ?></span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        <?php endforeach; ?>
    </div>
</div>

Características Destacadas

1. Diseño Responsivo: Uso de la cuadrícula de Bootstrap para adaptarse a todos los dispositivos

2. Efectos Visuales:

   • Zoom suave al hacer hover sobre las imágenes

   • Overlay con el nombre del plan

3. Modales Interactivos: Cada plan abre un modal con información detallada y precios

4. Diferenciación de Precios: Muestra claramente la variación entre temporada alta y baja

5. Dinamismo Total: Todo el contenido se carga desde la base de datos

Estilos Personalizados

Añadí CSS personalizado para mejorar la experiencia visual:

css

Copy

Download

.plan-container {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
}

.plan-container:hover {
    box-shadow: 0 8px 16px rgba(0,0,0,0.2);
}

.plan-container img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    transition: transform 0.3s ease-in-out;
}

.plan-container:hover img {
    transform: scale(1.1);
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 24px;
    font-weight: bold;
    text-transform: uppercase;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.plan-container:hover .overlay {
    opacity: 1;
}

Consideraciones sobre Precios y MercadoPago

En el desarrollo, tuve en cuenta:

1. Moneda Local: MercadoPago requiere trabajar con la moneda del país donde se implementa

2. Países Soportados: Argentina, Brasil, Chile, Colombia, México, Perú y Uruguay

3. Estructura de Precios: Los planes mostrados son complementos que se suman al precio base de la habitación

Próximas Mejoras

1. Integración con Pasarela de Pagos: Conectar con MercadoPago para reservas directas

2. Filtros por Temporada: Mostrar automáticamente los precios según fecha seleccionada

3. Sistema de Ofertas: Destacar planes con descuentos especiales

4. Galería Ampliada: Más imágenes por plan en el modal