Lección: 58 De MySQL a JSON para cargar en FULLCALENDAR en el SISTEMA VETERINARIO (PHP y MySql) FullStack

58 De MySQL a JSON para cargar en FULLCALENDAR en el SISTEMA VETERINARIO (PHP y MySql) FullStack

Duración: 10 min

Módulo: 📅 Desarrollo del Módulo de Reservas con FullCalendar Lección 4 de 9

Descripción

🎬 Lección 58: De MySQL a JSON para Cargar en FullCalendar 🔄

El objetivo principal de esta lección es crear un controlador PHP que actúe como una API simple, extrayendo los datos de la tabla reservas y transformándolos en el formato JSON requerido por FullCalendar.

1. Creación del Controlador de Carga

Se crea un nuevo controlador dedicado a la obtención de los datos de reserva:

Ruta: Se crea el archivo cargar_reservas.php dentro del nuevo directorio app/controllers/reservas/. [01:13]
Conexión: Se incluye el archivo de conexión a la base de datos (config.php). [01:35]

2. Consulta y Obtención de Datos

Se utiliza PHP con PDO para consultar la base de datos:

Consulta SQL: Se realiza una consulta SELECT que selecciona exclusivamente los campos necesarios para FullCalendar: color, title, start y end de la tabla reservas. [02:32]
Ejecución: La consulta se prepara y ejecuta.
Recuperación de Resultados: Se utiliza fetchAll(PDO::FETCH_ASSOC) para obtener todos los resultados en un array asociativo de PHP. [04:21]

3. Conversión de Array a JSON

Este es el paso crucial para la integración con JavaScript:

Función Clave: Se utiliza la función nativa de PHP json_encode($resultado). Esta función transforma el array asociativo de PHP en una cadena de texto JSON con la estructura de corchetes y llaves esperada por FullCalendar. [06:05]
Salida: Se utiliza echo para imprimir la cadena JSON resultante, lo que permite que el archivo PHP actúe como un endpoint de datos. [05:59]

4. Vinculación del Calendario

Finalmente, se enlaza la vista del calendario al nuevo controlador dinámico:

FullCalendar Script: En el archivo reservar.php, la propiedad events del script de inicialización de FullCalendar es modificada.
Reemplazo del Evento Estático: El código estático de eventos se reemplaza por la URL del nuevo controlador:
JavaScript
events: 'app/controllers/reservas/cargar_reservas.php'
Resultado: El calendario ahora hace una petición al controlador PHP, recibe la cadena JSON y muestra dinámicamente todas las citas registradas en la base de datos, con sus respectivos colores y fechas. [09:09]

El sistema queda listo, con la información fluyendo de MySQL, a través de PHP (como JSON), hasta la interfaz gráfica del calendario.

Hilari Web