37-Proceso detallado de reserva de habitación

 

Proceso detallado de reserva de habitación

📌 1. Contexto del sistema

Ya tenemos creadas las siguientes partes del sitio:

  • Página de inicio.

  • Página de habitaciones.

  • Página de reservas.

La página de reservas incluye:

  • Un banner interior (imagen de fondo).

  • Un módulo llamado info-reservas, que contiene:

    • Calendario para seleccionar fechas.

    • Botones para volver a ver habitaciones o ir al perfil del usuario.

    • Información del lado derecho como: código de reserva, fechas de ingreso/salida, tipo de habitación, plan elegido, etc.

Además, esta página reutiliza módulos del home como:

  • Planes

  • Recorridos

  • Restaurante

  • Testimonios

🧭 2. Flujos posibles del usuario para hacer una reserva

🔹 Opción 1: Usuario que ya sabe qué habitación desea

  • Desde la página de inicio, el usuario puede llenar el formulario con:

    • Tipo y temática de habitación.

    • Fecha de ingreso y salida.

  • Al hacer clic en "Ver disponibilidad", el sistema lo envía directamente a la página de reservas con esa información.

🔹 Opción 2: Usuario que quiere explorar antes de reservar

  • El usuario accede a la página de habitaciones.

  • Navega entre categorías y temáticas.

  • Selecciona una habitación y visualiza su información.

  • En el bloque inferior de la habitación hay un formulario donde:

    • Selecciona la fecha de ingreso y salida.

    • Se envía esta información al hacer clic en "Ver disponibilidad".

    • Se redirige a la página de reservas con los datos necesarios.

🧾 3. Datos mínimos requeridos para la reserva

Para que el sistema funcione correctamente, la página de reservas necesita recibir al menos:

  • id_habitacion: ID único de la habitación.

  • fecha_ingreso: Fecha de entrada.

  • fecha_salida: Fecha de salida.

Estos datos se envían mediante un formulario con el método POST, utilizando campos ocultos (input type="hidden") cuando sea necesario.

🧱 4. Estructura técnica del formulario (en página de habitación)

🔸 Estructura del <form>

Se reemplaza el enlace <a href="reservas"> por un formulario real que hace submit hacia la página de reservas.

html
<form method="POST" action="reservas">
  <input type="date" name="fecha_ingreso" required>
  <input type="date" name="fecha_salida" required>
  <input type="hidden" name="id_habitacion" value="1"> <!-- valor dinámico -->
  <button type="submit">Ver disponibilidad</button>
</form>

🔧 Nota: El id_habitacion se actualiza dinámicamente con JavaScript al navegar entre habitaciones.

🧠 5. JavaScript dinámico para cambiar el ID de la habitación

Cuando el usuario cambia de habitación, se actualiza el campo oculto del formulario para reflejar el nuevo id_habitacion.

javascript
$('input[name="id_habitacion"]').val(nuevoId);

Esto se hace tomando el ID de la habitación actual mostrada y asignándolo como value del campo oculto.

🧼 6. Validación y protección en la página de reservas

En la página reservas, específicamente dentro del módulo info-reservas, se coloca un bloque PHP para validar que los datos llegaron correctamente.

php
<?php
if (!isset($_POST["id_habitacion"])) {
    echo '<script>window.location = "inicio";</script>';
    exit;
}
?>

Esto evita que un usuario llegue directamente a la página de reservas sin haber llenado el formulario.

✅ 7. Resultado esperado

Una vez que el usuario llena correctamente el formulario y envía los datos:

  • Se redirige a la página de reservas.

  • Se muestran los datos enviados:

    • ID de la habitación.

    • Fecha de ingreso.

    • Fecha de salida.

  • A partir de aquí, el usuario puede elegir el plan, número de personas, y continuar el proceso de pago.

🔜 8. Próximo paso

En la siguiente clase, se trabajará el segundo formulario (el de la página de inicio) para completar la lógica del segundo flujo del usuario (el que ya sabe qué habitación quiere).

Comentarios

Publicar un comentario