82 Cargar Horario en la página principal en Sistema con LARAVEL(PHP-MySql) FullStack

Duración: 16 min
Módulo: 🔑 Seguridad, Roles y Permisos Lección 12 de 15

Descripción

🌐 Carga de Horarios en la Página Principal: Implementación de AJAX (Lección 82)

Esta lección resuelve el problema de cargar y mostrar los horarios de atención en la página web pública utilizando AJAX (Asynchronous JavaScript and XML). Esto permite actualizar una parte de la página (el calendario) sin recargar la página completa cada vez que el usuario selecciona un consultorio.

1. Preparación del Entorno 🛠️

Se identifican y corrigen dos errores cruciales para que la funcionalidad AJAX trabaje correctamente:

  • Inclusión de jQuery: La vista principal (index.blade.php) no incluía la biblioteca jQuery, la cual es esencial para que las llamadas AJAX funcionen. Se copia y pega la referencia a jQuery desde el layout de administración [01:16].
  • Creación de Ruta Pública para AJAX: La ruta que el script AJAX intentaba contactar (/admin/horarios/cargar-consulta/{id}) estaba protegida por el middleware de autenticación y permisos (auth y can). Se crea una nueva ruta pública en web.php que no requiere login, permitiendo a cualquier visitante consultar los datos [03:36].
    • Nueva Ruta: /cargar-datos-consultorio/{id} (o similar).

2. Implementación del AJAX y la Lógica del Servidor 💻

El flujo de datos se implementa mediante una función de JavaScript que se activa cuando el usuario selecciona un consultorio:

  • Función JavaScript/AJAX: El script captura el ID del consultorio seleccionado y realiza una llamada asíncrona a la nueva ruta pública [04:50].
  • Función en WebController: Se crea el método cargarDatosConsultorio en el WebController para manejar esta solicitud [05:34]:
    1. Recibe el ID del consultorio.
    2. Utiliza el ID para buscar los horarios de atención relacionados en la base de datos.
    3. Busca el nombre del consultorio (Consultorio::find($id)) para usarlo en el título [12:53].
    4. Retorna una vista de Blade (cargar_datos_consultorio.blade.php) con la tabla de horarios y el nombre del consultorio [06:40].
  • Renderizado de la Vista: La vista de Blade retornada se inyecta en el contenedor principal de la página (dentro del div o sección deseada) para mostrar la tabla de horarios de forma dinámica [09:44].

3. Resultado Final (Vista Pública) 👀

Ahora, cuando un visitante ingresa al sitio, puede:

  • Seleccionar un consultorio (ej. Pediatría, Odontología) en el menú desplegable.
  • Ver inmediatamente el título "Horario de atención del consultorio de [Nombre del Consultorio]" junto con la tabla de los días y horarios asignados a los doctores de esa especialidad [14:15].

Próxima Lección: Se comenzará a trabajar en la funcionalidad de reserva de citas en la vista pública, un proceso que requerirá la autenticación del paciente [15:05].