Un sistema de reserva de hoteles permite a los usuarios reservar habitaciones en un hotel en línea de forma sencilla y rápida. Este sistema automatiza la gestión de las reservas, mostrando las habitaciones disponibles, el precio y los servicios incluidos. Un buen sistema de reserva facilita la experiencia del cliente, ayudando a los hoteles a reducir el trabajo manual y mejorar su organización.
En este artículo, vamos a desarrollar un sistema de reserva de hoteles básico usando HTML5, CSS3, JavaScript y jQuery, que puede integrarse en un CMS como WordPress. Al final, tendrás el código funcional que podrás adaptar a las necesidades específicas de tu hotel.
Características de un sistema de reserva de hoteles
Nuestro sistema básico incluirá las siguientes funcionalidades:
Selección de fechas de entrada y salida.
Selección de habitaciones disponibles.
Formulario de datos personales para completar la reserva.
Interfaz moderna que mejore la experiencia del usuario.
A continuación, te mostraré el código necesario para crear este sistema y una explicación detallada de cada línea para que puedas entender su funcionamiento.
Código HTML para el sistema de reserva de hoteles
Este código HTML5 crea la estructura del formulario de reservas y muestra los campos necesarios para la funcionalidad.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sistema de Reserva de Hoteles</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="reservation-form">
<h2>Reserva tu habitación</h2>
<label for="checkin">Fecha de entrada:</label>
<input type="date" id="checkin">
<label for="checkout">Fecha de salida:</label>
<input type="date" id="checkout">
<label for="room-type">Tipo de habitación:</label>
<select id="room-type">
<option value="single">Individual</option>
<option value="double">Doble</option>
<option value="suite">Suite</option>
</select>
<label for="name">Nombre completo:</label>
<input type="text" id="name" placeholder="Escribe tu nombre">
<label for="email">Correo electrónico:</label>
<input type="email" id="email" placeholder="Escribe tu email">
<button id="reserve">Reservar ahora</button>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="reservation.js"></script>
</body>
</html>Explicación del código HTML:
Estructura del formulario: Cada campo en el formulario permite a los usuarios ingresar los detalles necesarios, como las fechas de entrada y salida, el tipo de habitación y la información personal.
Campos de fecha (<input type="date">): Los usuarios pueden seleccionar las fechas de entrada y salida en un calendario.
Selección de tipo de habitación (<select>): Se muestra un menú desplegable con las opciones de habitaciones disponibles.
Campos de información fersonal: Los usuarios deben ingresar su nombre y correo electrónico para completar la reserva.
Botón de reserva: Este botón activa la reserva cuando el usuario ha completado todos los campos.
Estilos CSS para una interfaz moderna
Vamos a agregar estilos CSS3 para que el sistema de reserva de hoteles se vea moderno y atractivo.
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f5f5f5;
}
.reservation-form {
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
width: 300px;
}
.reservation-form h2 {
margin-top: 0;
font-size: 1.5em;
color: #333;
}
.reservation-form label {
font-size: 0.9em;
color: #555;
}
.reservation-form input,
.reservation-form select {
width: 100%;
padding: 10px;
margin: 8px 0 16px;
border: 1px solid #ddd;
border-radius: 4px;
}
.reservation-form button {
width: 100%;
padding: 12px;
background-color: #4CAF50;
border: none;
color: white;
font-size: 1em;
border-radius: 4px;
cursor: pointer;
}
.reservation-form button:hover {
background-color: #45a049;
}Explicación del Código CSS:
Estilos generales: Configuramos la fuente, centramos el formulario y aplicamos un fondo claro para dar un aspecto profesional.
Formulario de reservación: Se aplica un fondo blanco, sombras y un borde redondeado para destacar el formulario en la pantalla.
Botón de reserva: Coloreado en verde, con una transición de color cuando se pasa el ratón, lo que mejora la interacción del usuario.
Código JavaScript y jQuery para la lógica del sistema de reserva
El siguiente código en JavaScript valida los datos introducidos y procesa la reserva.
// reservation.js
$(document).ready(function() {
// Al hacer clic en el botón de reserva
$('#reserve').on('click', function() {
// Recogemos los valores introducidos
const checkin = $('#checkin').val();
const checkout = $('#checkout').val();
const roomType = $('#room-type').val();
const name = $('#name').val();
const email = $('#email').val();
// Validación de campos
if (!checkin || !checkout || !name || !email) {
alert('Por favor, completa todos los campos.');
return;
}
// Validación de fecha de salida después de la fecha de entrada
if (new Date(checkin) >= new Date(checkout)) {
alert('La fecha de salida debe ser posterior a la de entrada.');
return;
}
// Simulación de guardado de la reserva (aquí se puede enviar la información al servidor)
alert(`Reserva realizada:\nNombre: ${name}\nEmail: ${email}\nEntrada: ${checkin}\nSalida: ${checkout}\nTipo de habitación: ${roomType}`);
// Limpiar formulario
$('#checkin').val('');
$('#checkout').val('');
$('#room-type').val('single');
$('#name').val('');
$('#email').val('');
});
});Explicación del código JavaScript:
Captura del evento click: Cuando el usuario hace clic en el botón de «Reservar ahora», se inicia el proceso de reserva.
Obtención de valores: Utilizamos jQuery para obtener los valores de cada campo de entrada.
Validación de campos: Comprobamos que todos los campos necesarios están llenos.
Validación de fechas: Verificamos que la fecha de salida sea posterior a la de entrada para evitar errores.
Simulación de reserva: Muestra los datos en una alerta como confirmación. En una implementación real, estos datos se enviarían a un servidor para guardar la reserva.
Limpieza del formulario: Al finalizar, el formulario se limpia para nuevas reservas.
Con este sistema de reserva de hoteles, ahora tienes una base funcional para administrar reservas en línea para un hotel pequeño. Este sistema puede ampliarse y conectarse con una base de datos en un servidor, permitiendo una administración más avanzada y personalizada.