3- Categorías de Habitaciones para un Hotel

 

Implementando la Sección de Categorías de Habitaciones para un Hotel

En este nuevo post del blog, comparto cómo desarrollé la sección dinámica de categorías de habitaciones para el sitio web del hotel, permitiendo mostrar diferentes tipos de alojamiento con sus características y precios variables.

Estructura de la Base de Datos

La tabla categorias fue diseñada para almacenar toda la información relevante:

sql

Copy

Download

CREATE TABLE `categorias` (
  `id` int(11) NOT NULL,
  `ruta` text NOT NULL,
  `color` text NOT NULL,
  `tipo` text NOT NULL,
  `img` text NOT NULL,
  `descripcion` text NOT NULL,
  `incluye` text NOT NULL,
  `continental_alta` float NOT NULL,
  `continental_baja` float NOT NULL,
  `americano_alta` float NOT NULL,
  `americano_baja` float NOT NULL,
  `fecha` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

Arquitectura MVC para las Categorías

1. Modelo (ModeloCategorias.php)

php

Copy

Download

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

2. Controlador (ControladorCategorias.php)

php

Copy

Download

class ControladorCategorias {
    static public function ctrMostrarCategorias() {
        $tabla = "categorias";
        return ModeloCategorias::mdlMostrarCategorias($tabla);
    }
}

3. Vista (HTML con Bootstrap 5)

Implementé una cuadrícula de tarjetas con diseño moderno:

html

Copy

Download

Run

<div class="container text-center py-5">
    <h1 class="mb-4">HABITACIONES</h1>
    <div class="row">
        <?php foreach ($categorias as $categoria): ?>
            <div class="col-md-4 mb-4">
                <div class="card border-0 shadow">
                    <img src="<?php echo $servidor . $categoria["img"]; ?>" class="card-img-top" alt="<?php echo $categoria["tipo"]; ?>">
                    <div class="card-body p-0">
                        <div class="position-relative">
                            <a href="<?php echo $ruta . $categoria["ruta"]; ?>">
                                <h5 class="position-absolute top-50 start-50 translate-middle px-3 py-2 text-white fw-bold" style="background:<?php echo $categoria["color"]; ?>; border-radius: 5px;">
                                    <?php echo strtoupper($categoria["tipo"]); ?>
                                </h5>
                            </a>	
                        </div>
                        <div class="text-white bg-dark py-2">
                            <p class="mb-0"><?php echo $categoria["descripcion"]; ?></p>
                        </div>
                        <div class="bg-warning text-dark py-3">
                            <h5 class="mb-0">DESDE $<?php echo number_format($categoria["continental_baja"]); ?> COP</h5>
                        </div>
                        <div class="py-2">
                            <a href="<?php echo $ruta . $categoria["ruta"]; ?>" class="text-decoration-none text-dark fw-bold">Ver detalles <i class="fas fa-chevron-right"></i></a>
                        </div>
                    </div>
                </div>
            </div>
        <?php endforeach; ?>
    </div>
</div>

Características Destacadas

1. Diseño de Tarjetas Modernas: Cada categoría se muestra en una tarjeta con:

   • Imagen destacada

   • Nombre de categoría con color personalizado

   • Descripción breve

   • Precio mínimo destacado

   • Botón de "Ver detalles"

2. Estructura de Datos Completa:

   • Rutas personalizadas para cada categoría

   • Colores específicos para identificación visual

   • Almacenamiento de características en formato JSON

   • Precios diferenciados por plan (Continental/Americano) y temporada (Alta/Baja)

3. Responsive Design: Uso del sistema de grid de Bootstrap para adaptarse a todos los dispositivos

4. Efectos Visuales:

   • Sombras sutiles para profundidad

   • Posicionamiento absoluto para los títulos

   • Diseño limpio y profesional

Implementación de Características (JSON)

Las comodidades de cada categoría se almacenan en formato JSON, permitiendo una estructura flexible:

json

Copy

Download

[
    {"item":"cama 2x2", "icono":"fas fa-bed"},
    {"item":"TV de 42''", "icono":"fas fa-tv"},
    {"item":"Agua Caliente", "icono":"fas fa-tint"},
    {"item":"Jacuzzi", "icono":"fas fa-water"},
    {"item":"Baño privado", "icono":"fas fa-toilet"},
    {"item":"Sofá", "icono":"fas fa-couch"},
    {"item":"Balcón", "icono":"far fa-image"},
    {"item":"Servicio wifi", "icono":"fas fa-wifi"}
]

Consideraciones de Diseño

1. Paleta de Colores: Cada categoría tiene un color distintivo extraído directamente del diseño original

2. Jerarquía Visual: El precio más económico se destaca como punto de entrada

3. Navegación: Cada tarjeta es completamente clickable hacia la página de detalles

4. Optimización: Las imágenes se cargan desde rutas dinámicas pero podrían optimizarse con lazy loading

Próximas Mejoras

1. Sistema de Filtrado: Permitir filtrar por precio o características

2. Comparador: Implementar comparación entre categorías

3. Disponibilidad: Integrar con calendario de reservas

4. Galería: Mostrar más imágenes por categoría en hover

5. Sistema de Rating: Incorporar valoraciones de huéspedes