41. Validar disponibilidad de la habitación - parte 2-pintar con js

Validación de Disponibilidad de Habitaciones con JavaScript y FullCalendar

En este post, vamos a profundizar en cómo validar la disponibilidad de habitaciones utilizando JavaScript y FullCalendar, complementando lo que ya hemos hecho con PHP. Este tutorial está diseñado para estudiantes que están aprendiendo desarrollo web, así que iré paso a paso con explicaciones detalladas.

Parte 1: Desactivando la marca del día actual en FullCalendar

Antes de comenzar con la validación dinámica, necesitamos hacer un ajuste visual en nuestro calendario. FullCalendar marca automáticamente el día actual con un estilo diferente, pero en nuestro caso queremos desactivar este resaltado.

html
<style>
.fc-today {
   background: rgba(255,255,255,0) !important;
}
</style>

Explicación:

  • .fc-today es la clase que FullCalendar aplica al día actual en el calendario

  • background: rgba(255,255,255,0) establece un fondo blanco completamente transparente

  • !important asegura que esta regla tenga prioridad sobre cualquier otro estilo que pueda estar aplicándose

Parte 2: Capturando los datos de reserva desde PHP a JavaScript

Necesitamos pasar la información de la reserva desde nuestro backend PHP a nuestro frontend JavaScript. Para esto, utilizaremos atributos de datos en un elemento HTML:

php
<div class="infoReservas container-fluid bg-white p-0 pb-5"
 idHabitacion="<?php echo $_POST['id-habitacion']; ?>" 
 fechaIngreso="<?php echo $_POST['fecha-ingreso']; ?>" 
 fechaSalida="<?php echo $_POST['fecha-salida']; ?>">
</div>

Explicación:

  • Creamos un div con la clase infoReservas que actuará como contenedor

  • Usamos atributos personalizados (idHabitacion, fechaIngreso, fechaSalida) para almacenar los valores del POST

  • Estos valores serán accesibles desde JavaScript

Parte 3: Obteniendo los datos en JavaScript

Ahora, desde JavaScript, podemos capturar estos valores:

javascript
if($(".infoReservas").html() != undefined) {
    var idHabitacion = $(".infoReservas").attr("idHabitacion");
    console.log("idHabitacion", idHabitacion);
    
    var fechaIngreso = $(".infoReservas").attr("fechaIngreso");
    console.log("fechaIngreso", fechaIngreso);
    
    var fechaSalida = $(".infoReservas").attr("fechaSalida");
    console.log("fechaSalida", fechaSalida);
}

Explicación:

  • Verificamos primero si el elemento .infoReservas existe para evitar errores

  • Usamos jQuery .attr() para obtener los valores de los atributos personalizados

  • Mostramos los valores en consola para verificación

Parte 4: Consultando disponibilidad con AJAX

Ahora vamos a consultar al servidor para verificar si hay reservas existentes para esa habitación:

javascript
var datos = new FormData();
datos.append("idHabitacion", idHabitacion);

$.ajax({
    url: urlPrincipal + "ajax/reservas.ajax.php",
    method: "POST",
    data: datos,
    cache: false,
    contentType: false,
    processData: false,
    dataType: "json",
    success: function(respuesta) {
        console.log("respuesta", respuesta);
        
        if(respuesta.length == 0) {
            // No hay reservas - habitación disponible
            $('#calendar').fullCalendar({
                header: {
                    left: 'prev',
                    center: 'title',
                    right: 'next'
                },
                events: [{
                    start: fechaIngreso,
                    end: fechaSalida,
                    rendering: 'background',
                    color: '#847059'
                }]
            });
        }
    }
});

Explicación del AJAX:

  1. Creamos un objeto FormData para enviar los datos

  2. Añadimos el idHabitacion que queremos verificar

  3. Hacemos la petición AJAX al endpoint reservas.ajax.php

  4. Configuramos la petición como POST y esperamos una respuesta JSON

  5. En el success, verificamos si la respuesta está vacía (length == 0)

  6. Si está vacía, mostramos el calendario con las fechas seleccionadas marcadas

Parte 5: Backend PHP para la consulta

El archivo reservas.ajax.php maneja la consulta a la base de datos:

php
require_once "../modelos/reservas.modelo.php";

class AjaxReservas {
    public $idHabitacion;

    public function ajaxTraerReserva() {
        $valor = $this->idHabitacion;
        $respuesta = ControladorReservas::ctrMostrarReservas($valor);
        echo json_encode($respuesta);
    }
}

if (isset($_POST["idHabitacion"])) {
    $traerReserva = new AjaxReservas();
    $traerReserva->idHabitacion = $_POST["idHabitacion"];
    $traerReserva->ajaxTraerReserva();
}

Explicación:

  • Creamos una clase AjaxReservas para manejar las peticiones AJAX

  • El método ajaxTraerReserva() llama al controlador para obtener las reservas

  • Convertimos la respuesta a JSON con json_encode

  • Verificamos si se recibió el idHabitacion por POST antes de ejecutar

Parte 6: Validación de fechas en el formulario

Para mejorar la experiencia de usuario, validamos las fechas directamente en el formulario:

javascript
$('.datepicker.entrada').datepicker({
    startDate: '0d',
    datesDisabled: '0d',
    format: 'yyyy-mm-dd',
    todayHighlight: true
});

$('.datepicker.entrada').change(function(){
    $('.datepicker.salida').attr("readonly", false);
    var fechaEntrada = $(this).val();
    
    $('.datepicker.salida').datepicker({
        startDate: fechaEntrada,
        datesDisabled: fechaEntrada,
        format: 'yyyy-mm-dd'
    });
});

Explicación:

  • Configuramos el datepicker de entrada para:

    • Empezar desde hoy (startDate: '0d')

    • Deshabilitar la selección de hoy (datesDisabled: '0d')

    • Formato de fecha YYYY-MM-DD

    • Resaltar el día actual

  • Cuando cambia la fecha de entrada:

    • Habilitamos el campo de salida

    • Configuramos el datepicker de salida para:

      • Empezar desde la fecha de entrada

      • Deshabilitar la fecha de entrada (no se puede entrar y salir el mismo día)

Conclusión

Con este sistema hemos implementado:

  1. Una verificación visual de disponibilidad mediante FullCalendar

  2. Una consulta dinámica con AJAX al servidor

  3. Validación de fechas en el cliente para mejor UX

  4. Comunicación efectiva entre PHP y JavaScript

Este enfoque proporciona una experiencia de usuario fluida mientras mantiene la integridad de los datos mediante verificaciones tanto en el cliente como en el servidor.



Vamos a hacer eso vamos a crear variable datos donde vamos a enviar como variable post el idHabitacion y el resultado  el valor de esa variable va a ser lo que capturemos en esta variable de idHabitacion:


var datos = new FormData();

datos.append("idHabitacion", idHabitacion);



 vamos a hacer una solicitud a ajax


$.ajax({

    url: urlPrincipal + "ajax/reservas.ajax.php",

    method: "POST",

    data: datos,

    cache: false,

    contentType: false,

    processData: false,

    dataType: "json",

    success: function(respuesta) {

        console.log("respuesta", respuesta);

    }

});


La cual lleva al archivo reservas.ajax.php:

require_once "../modelos/reservas.modelo.php";


class AjaxReservas {


    public $idHabitacion;


    public function ajaxTraerReserva() {

        $valor = $this->idHabitacion;

        $respuesta = ControladorReservas::ctrMostrarReservas($valor);

        echo json_encode($respuesta);

    }


}


if (isset($_POST["idHabitacion"])) {

    $traerReserva = new AjaxReservas();

    $traerReserva->idHabitacion = $_POST["idHabitacion"];

    $traerReserva->ajaxTraerReserva();

}








Ok entonces hagamos el ejercicio cuando no encuentra coincidencias en la tabla


respuesta viene vacío entonces vamos a colocar acá que si respuesta en su longitud viene vacía porque


esto es una Ray punto Length es igual a cero significa que está disponible la habitación


entonces acá vamos a traer el calendario.


Mover esto de acá lo vamos a meter aquí dentro de Streiff


qué le vamos a decir.


Un solo evento.


if(respuesta.length == 0){

    $('#calendar').fullCalendar({

        header: {

            left: 'prev',

            center: 'title',

            right: 'next'

        },

        events: [

            {

                start: fechaIngreso,

                end: fechaSalida,

                rendering: 'background',

                color: '#847059'

            }

        ]

    });

}






codigo de reservas.ajax.php

require_once "../modelos/reservas.modelo.php";


class AjaxReservas {


    public $idHabitacion;


    public function ajaxTraerReserva() {

        $valor = $this->idHabitacion;

        $respuesta = ControladorReservas::ctrMostrarReservas($valor);

        echo json_encode($respuesta);

    }


}


if (isset($_POST["idHabitacion"])) {

    $traerReserva = new AjaxReservas();

    $traerReserva->idHabitacion = $_POST["idHabitacion"];

    $traerReserva->ajaxTraerReserva();

}


respuesta viene vacío entonces vamos a colocar acá que si respuesta en su longitud viene vacía porque


esto es una Ray punto Length es igual a cero significa que está disponible la habitación





$.ajax({

    url: urlPrincipal + "ajax/reservas.ajax.php",

    method: "POST",

    data: datos,

    cache: false,

    contentType: false,

    processData: false,

    dataType: "json",

    success: function(respuesta) {

   success: function(respuesta) {

    if (respuesta.length == 0) {

     esta disponible la habitacion

}


    }

});


Mostramos los resultados:

if(respuesta.length == 0){

    $('#calendar').fullCalendar({

        header: {

            left: 'prev',

            center: 'title',

            right: 'next'

        },

        events: [

            {

                start: fechaIngreso,

                end: fechaSalida,

                rendering: 'background',

                color: '#847059'

            }

        ]

    });

}


Comentarios

Publicar un comentario