4-recorrido por el pueblo

 

Implementando la Sección de Recorrido por el Pueblo para un Hotel

En este nuevo post del blog, comparto cómo desarrollé la sección dinámica de "Recorrido por el Pueblo", una característica clave para hoteles que desean destacar los atractivos locales y experiencias turísticas cercanas.

Estructura de la Base de Datos

La tabla recorrido fue diseñada para mostrar puntos de interés turístico:

sql
Copy
Download
CREATE TABLE `recorrido` (
  `id` int(11) NOT NULL,
  `foto_peq` text NOT NULL,
  `foto_grande` text NOT NULL,
  `titulo` text NOT NULL,
  `descripcion` text NOT NULL,
  `fecha` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

Arquitectura MVC para el Recorrido

1. Modelo (ModeloRecorrido.php)

php
Copy
Download
class ModeloRecorrido {
    static public function mdlMostrarRecorrido($tabla) {
        $stmt = Conexion::conectar()->prepare("SELECT * FROM $tabla");
        $stmt->execute();
        return $stmt->fetchAll();
    }
}

2. Controlador (ControladorRecorrido.php)

php
Copy
Download
class ControladorRecorrido {
    static public function ctrMostrarRecorrido() {
        $tabla = "recorrido";
        return ModeloRecorrido::mdlMostrarRecorrido($tabla);
    }
}

3. Vista (Carrusel Interactivo)

Implementé un carrusel con diseño adaptativo que muestra:

html
Copy
Download
Run
<div class="container mt-5">
    <h1 class="text-center mb-4">RECORRIDO POR EL PUEBLO</h1>
    <div id="carouselRecorrido" class="carousel slide" data-bs-ride="carousel">
        <div class="carousel-inner">
            <?php foreach ($recorrido as $key => $value): ?>
            <div class="carousel-item <?php echo $key == 0 ? 'active' : ''; ?>">
                <div class="row align-items-center">
                    <div class="col-lg-4 text-center">
                        <img src="<?php echo $servidor.$value["foto_peq"]; ?>" class="img-fluid mb-3" alt="Miniatura">
                        <h3><?php echo $value["titulo"]; ?></h3>
                        <p><?php echo $value["descripcion"]; ?></p>
                    </div>
                    <div class="col-lg-8">
                        <img src="<?php echo $servidor.$value["foto_grande"]; ?>" class="img-fluid" alt="Vista completa">
                    </div>
                </div>
            </div>
            <?php endforeach; ?>
        </div>
        <!-- Controles de navegación -->
        <button class="carousel-control-prev" type="button" data-bs-target="#carouselRecorrido" data-bs-slide="prev">
            <span class="carousel-control-prev-icon"></span>
        </button>
        <button class="carousel-control-next" type="button" data-bs-target="#carouselRecorrido" data-bs-slide="next">
            <span class="carousel-control-next-icon"></span>
        </button>
    </div>
</div>

Características Destacadas

  1. Diseño Dual de Imágenes:

    • Foto pequeña (para vista rápida)

    • Foto grande (para visualización detallada)

    • Adaptación responsive para diferentes dispositivos

  2. Estructura de Datos:

    • Títulos descriptivos

    • Textos informativos sobre cada punto de interés

    • Fechas de actualización automáticas

  3. Carrusel Interactivo:

    • Navegación fluida entre puntos de interés

    • Diseño limpio y profesional

    • Integración perfecta con Bootstrap 5

  4. Optimización de Imágenes:

    • Rutas dinámicas desde la base de datos

    • Clases responsive de Bootstrap

    • Textos alternativos para accesibilidad

Implementación Paso a Paso

  1. Configuración de la Base de Datos:

    • Creé la tabla con campos para imágenes, título y descripción

    • Inserté al menos tres puntos de interés iniciales

  2. Estructura MVC:

    • Modelo para consultar datos

    • Controlador para gestionar la lógica

    • Vista para presentación al usuario

  3. Diseño del Carrusel:

    • Implementación con Bootstrap Carousel

    • Diseño en dos columnas (texto + imagen)

    • Efectos de transición suaves

  4. Integración Dinámica:

    • Conexión PHP con la base de datos

    • Bucles para mostrar todos los registros

    • Manejo de clases "active" para el primer elemento

Beneficios para el Hotel

Esta implementación permite:

  • Mostrar los atractivos locales de forma atractiva

  • Actualizar fácilmente los puntos de interés

  • Ofrecer una experiencia interactiva a los huéspedes

  • Destacar las experiencias únicas cerca del hotel

  • Mejorar el engagement con los visitantes del sitio web

Próximas Mejoras

  1. Integración con Mapas: Añadir ubicaciones en Google Maps

  2. Sistema de Rating: Permitir valoraciones de visitantes

  3. Filtrado por Categorías: Playas, restaurantes, históricos, etc.

  4. Tour Virtual: Incorporar imágenes 360°

  5. Recorridos Temáticos: Rutas gastronómicas, culturales, etc.

Comentarios

Publicar un comentario