81 Reporte en circular con jQuery Knob del Sistema de Gestión Escolar(PHP y MySql)FullStack

Duración: 14 min
Módulo: 📤 Importación Masiva y Gráficos Lección 6 de 6
Anterior
80 Reportes de estudiantes inscritos por mes del Sistema de Gestión Escolar(PHP y MySql)FullStack
Siguiente
82 El Mejor chiste se lleva todo el código fuente y la base de datos del Sistema de Gestión Escolar

Descripción

LECCIÓN 81: Reporte en circular con jQuery Knob del Sistema de Gestión Escolar (PHP y MySql) ⭕

Esta lección finaliza el Módulo de Reportes incorporando un tipo de visualización circular más llamativa y compacta, utilizando la librería jQuery Knob (o adminLTE's Inline Charts) para mostrar métricas clave de forma resumida en el panel de control.

1. Integración de la Librería jQuery Knob

Para generar los gráficos circulares, se utiliza una librería que ya está disponible dentro del paquete de AdminLTE.

  • Inclusión del Script: Se incluye el archivo jquery.knob.min.js en la parte inferior de la vista de reportes (index.php) para activar la funcionalidad [02:10].
  • Implementación: Los gráficos circulares se definen mediante la etiqueta <input> con la clase knob y varios atributos para personalizar su apariencia y comportamiento [04:35].

2. Creación de Métricas Circulares Clave

Se crearon cuatro métricas clave en el panel de control, cada una mostrando información crucial del sistema en un formato circular. Se utiliza la variable de conteo PHP generada en lecciones anteriores para obtener los valores reales de la base de datos.

MétricaValor Obtenido de PHPMáximo (Tope)Atributos Clave
Estudiantes Inscritoscontador_estudiantes500 (Definido como capacidad máxima) [08:36]Muestra el progreso de llenado de cupos.
Personal Docentecontador_docentes30 (Definido como límite de planta) [09:07]Muestra la cantidad de profesores.
Usuarios Registradoscontador_usuarios(No se define tope, se muestra el valor total) [10:11]Muestra la cantidad total de usuarios en el sistema.
Personal Administrativocontador_administrativos10 (Definido como límite de planta) [11:05]Muestra la cantidad de personal de apoyo.
  • Atributos de Knob: El valor actual se inyecta en el atributo value del input. El tope máximo se define con el atributo data-max [05:06].
  • Estilización: Se asignaron diferentes colores de fondo (data-fgcolor) a cada reporte para diferenciarlos visualmente (verde, rojo, amarillo y azul) [11:27].

3. Ajustes Finales y Próximos Pasos

  • El panel de reportes queda finalizado con la visualización de datos en tiempo real a través de gráficos de línea (Estudiantes por Grado), barras (Inscritos por Mes) y circulares (Métricas Clave) [12:18].
  • Próxima Lección: Se analizará la funcionalidad de borrado (DELETE) en el sistema. Debido a la alta cantidad de relaciones en la base de datos (que tiene 18 tablas relacionadas, como se muestra en el diseño [13:39]), se debe decidir si mantener, modificar o eliminar los botones de borrado para evitar romper la integridad referencial de los datos.
$20.00
Iniciar sesión para inscribirse

Lecciones

📄 Introducción y Plataforma
Lección 1. 01 Login en el curso de Sistema de gestión escolar con (PHP y MySql) FullStack 110 min
🔑 Login, Roles y Usuarios
Lección 1. 02 Módulo ROLES en el curso de Sistema de gestión escolar con (PHP y MySql) FullStack 155 min
Lección 2. 03 Módulo ROLES en el curso de Sistema de gestión escolar con (PHP y MySql) FullStack PARTE 2 57 min
Lección 3. 04 Módulo USUARIOS en el curso de Sistema de gestión escolar con (PHP y MySql) FullStack 85 min
Lección 4. 05 Módulo USUARIOS en el curso de Sistema de gestión escolar con (PHP y MySql) FullStack parte 2 59 min
⚙️ Configuraciones Generales
Lección 1. 06 Módulo CONFIGURACIONES en el curso de Sistema de gestión escolar con (PHP y MySql) FullStack 28 min
Lección 2. 07 CREATE configuraciones en el curso de Sistema de gestión escolar con (PHP y MySql) FullStack 33 min
Lección 3. 08 CRUD completo de configuraciones curso de Sistema de gestión escolar con (PHP y MySql) FullStack 35 min
🗓️ Gestiones Educativas y Niveles
Lección 1. 09 Módulo de GESTIONES EDUCATIVAS curso de Sistema de gestión escolar con (PHP y MySql) FullStack 27 min
Lección 2. 10 CRUD completo de GESTIONES en el curso de Sistema de gestión escolar con (PHP y MySql) FullStack 23 min
Lección 3. 11 CRUD completo de NIVELES Y TURNO curso de Sistema de gestión escolar con (PHP y MySql) FullStack 60 min
📐 Grados y Materias
Lección 1. 12 CÓDIGO FUENTE gratis del CURSO de Sistema de gestión escolar con (PHP y MySql) FullStack 7 min
Lección 2. 13 MÓDULO GRADOS Y PARALELOS en el curso de Sistema de gestión escolar con (PHP y MySql) FullStack 30 min
Lección 3. 14 CRUD GRADOS Y PARALELOS en el curso de Sistema de gestión escolar con (PHP y MySql) FullStack 31 min
Lección 4. 15 MÓDULO MATERIAS en el curso de Sistema de gestión escolar con (PHP y MySql) FullStack 16 min
Lección 5. 16 Crud materias en el curso de Sistema de gestión escolar con (PHP y MySql) FullStack 31 min
🗄️ Diseño de la Base de Datos
Lección 1. 17 Modelo entidad en ADMINISTRATIVOS curso de Sistema de gestión escolar con (PHP y MySql) FullStack 15 min
Lección 2. 18 Normalización de la base de datos curso de Sistema de gestión escolar con (PHP y MySql) FullStack 21 min
Lección 3. 19 Código fuente más la base de datos del curso de Sistema de gestión escolar(PHP y MySql) FullStack 9 min
🏢 Módulo Personal Administrativo (CRUD Complejo)
Lección 1. 20 Create en 3 tablas relacionadas en el curso de Sistema de gestión escolar(PHP y MySql) FullStack 45 min
Lección 2. 21 Datos del personal administrativo en el curso de Sistema de gestión escolar(PHP y MySql)FullStack 28 min
Lección 3. 22 Update en 3 tablas relacionadas en el curso de Sistema de gestión escolar(PHP y MySql)FullStack 30 min
👨‍🏫 Módulo Docentes
Lección 1. 23 Módulo docentes en el curso de Sistema de gestión escolar(PHP y MySql)FullStack 22 min
Lección 2. 24 Create docentes en el curso de Sistema de gestión escolar(PHP y MySql)FullStack 11 min
Lección 3. 25 Cargar datos de los docentes en el curso de Sistema de gestión escolar(PHP y MySql)FullStack 16 min
Lección 4. 26 Editar datos de los docentes en el curso de Sistema de gestión escolar(PHP y MySql)FullStack 21 min
👨‍👩‍👧‍👦 Modelo Estudiantes y Padres
Lección 1. 27 Modelo estudiantes y padres de familia curso de Sistema de gestión escolar(PHP y MySql)FullStack 17 min
Lección 2. 28 Formulario de inscripción de estudiante curso de Sistema de gestión escolar(PHP y MySql)FullStack 28 min
Lección 3. 29 Registro de inscripción de estudiante curso de Sistema de gestión escolar(PHP y MySql)FullStack 18 min
✏️ CRUD de Estudiantes
Lección 1. 30 Listado de estudiante en el curso de Sistema de gestión escolar(PHP y MySql)FullStack 15 min
Lección 2. 31 Traer datos del estudiante en el curso de Sistema de gestión escolar(PHP y MySql)FullStack 17 min
Lección 3. 32 Update estudiantes en el curso de Sistema de gestión escolar(PHP y MySql)FullStack 39 min
💳 Pagos y Librería TCPDF
Lección 1. 33 Módulo pagos, cuotas o mensualidades - curso de Sistema de gestión escolar(PHP y MySql)FullStack 18 min
Lección 2. 34 Instalación de TCPDF para generar reportes curso Sistema de gestión escolar(PHP y MySql)FullStack 15 min
Lección 3. 35 Generando el CONTRATO del estudiante en el curso Sistema de gestión escolar(PHP y MySql)FullStack 38 min
📄 CRUD de Pagos y Documentación
Lección 1. 36 Registro de pagos del estudiante en el curso Sistema de gestión escolar(PHP y MySql)FullStack 35 min
Lección 2. 37 Editar pagos del estudiante en el curso Sistema de gestión escolar(PHP y MySql)FullStack 18 min
Lección 3. 38 Borrar pagos del estudiante en el curso Sistema de gestión escolar(PHP y MySql)FullStack 11 min
Lección 4. 39 Recibo de caja de pagos del estudiante curso Sistema de gestión escolarPHP y MySqlFullStack 19 min
🔗 Asignación de Materias
Lección 1. 40 Código fuente en REPOSITORIO DE GITHUB del curso Sistema de gestión escolar(PHP y MySql)FullStack 13 min
Lección 2. 41 Módulo asignación de materias de docentes curso Sistema de gestión escolar(PHP y MySql)FullStack 24 min
Lección 3. 42 Listado de asignaciones de materias en el curso Sistema de gestión escolarPHP y MySqlFullStack 32 min
Lección 4. 43 Editar asignaciones de materias en el curso Sistema de gestión escolar(PHP y MySql)FullStack 25 min
Lección 5. 44 Eliminar asignaciones de materias en el curso Sistema de gestión escolar(PHP y MySql)FullStack 8 min
🚀 Calificaciones (Lógica y Carga de Notas)
Lección 1. 45 Módulo de calificaciones en el curso Sistema de gestión escolar(PHP y MySql)FullStack 31 min
Lección 2. 46 Cargado de notas en el curso Sistema de gestión escolar(PHP y MySql)FullStack 25 min
Lección 3. 47 Lectura de notas con JQUERY en el curso Sistema de gestión escolar(PHP y MySql)FullStack 20 min
Lección 4. 48 Envio de datos con AJAX JQUERY en el curso Sistema de gestión escolar(PHP y MySql)FullStack 28 min
Lección 5. 49 Cargando notas con AJAX JQUERY en el curso Sistema de gestión escolar(PHP y MySql)FullStack 32 min
Lección 6. 50 Como cargar las notas con AJAX JQUERY curso Sistema de gestión escolar(PHP y MySql)FullStack 10 min
📋 Creación del Módulo Kardex
Lección 1. 51 Respondiendo comentarios 😭😭😭 en el curso Sistema de gestión escolar(PHP y MySql)FullStack 12 min
Lección 2. 52 Creando el Módulo de KARDEX en el curso Sistema de Gestión escolar(PHP y MySql)FullStack 14 min
Lección 3. 53 Formulario de registro de kardex en el curso Sistema de Gestión escolar(PHP y MySql)FullStack 20 min
✏️ CRUD de Kardex
Lección 1. 54 Registro y lectura de reportes kardex en curso Sistema de Gestión escolar(PHP y MySql)FullStack 33 min
Lección 2. 55 Formulario para Editar reportes de kardex curso Sistema de Gestión escolar(PHP y MySql)FullStack 37 min
Lección 3. 56 CRUD - UPDATE reportes de kardex curso Sistema de Gestión escolar(PHP y MySql)FullStack 10 min
Lección 4. 57 CRUD - DELETE reportes de kardex curso Sistema de Gestión escolar(PHP y MySql)FullStack 9 min
👁️ Vistas Específicas del Usuario
Lección 1. 58 Vista para el estudiante en el curso Sistema de Gestión escolar(PHP y MySql)FullStack 25 min
Lección 2. 59 Vista para el docente en el curso Sistema de Gestión escolar(PHP y MySql)FullStack 18 min
Lección 3. 60 Vista reporte de kardex del estudiante en curso Sistema de Gestión escolar(PHP y MySql)FullStack 19 min
Lección 4. 61 Vista reporte de calificaiones del estudiante Sistema de Gestión escolar(PHP y MySql)FullStack 17 min
🛡️ Módulo de Permisos (Base)
Lección 1. 62 Módulo PERMISOS de los roles en el curso de Sistema de Gestión escolar(PHP y MySql)FullStack 14 min
Lección 2. 63 CRUD - CREATE en permisos en el curso de Sistema de Gestión escolar(PHP y MySql)FullStack 15 min
🤝 Asignación de Permisos
Lección 1. 64 CRUD - UPDATE Y DELETE en permisos en curso de Sistema de Gestión escolar(PHP y MySql)FullStack 19 min
Lección 2. 65 Asignacion de permisos a los roles en el curso de Sistema de GestiónEscolar(PHP y MySql)FullStack 19 min
Lección 3. 66 Asignacion de permisos con AJAX en el curso de Sistema de GestiónEscolar(PHP y MySql)FullStack 13 min
Lección 4. 67 Listar asignaciones de permisos en el curso de Sistema de Gestión Escolar(PHP y MySql)FullStack 16 min
Lección 5. 68 Cargra asignnaciones de los roles en el curso de Sistema de Gestión Escolar(PHP y MySql)FullStack 18 min
Lección 6. 69 Borrar asignaciones de permisos en el curso de Sistema de Gestión Escolar(PHP y MySql)FullStack 14 min
🚦 Autorización de Vistas
Lección 1. 70 Comprobar las rutas con los roles en el curso de Sistema de Gestión Escolar(PHP y MySql)FullStack 29 min
Lección 2. 71 Cargar el menu segun el rol del usuario curso de Sistema de Gestión Escolar(PHP y MySql)FullStack 20 min
Lección 3. 72 Autorizar páginas segun los roles y permisos del Sistema de Gestión Escolar(PHP y MySql)FullStack 16 min
Lección 4. 73 Vista general para todos los usuarios del Sistema de Gestión Escolar(PHP y MySql)FullStack 11 min
Lección 5. 74 Autorizar cada vista o página del Sistema de Gestión Escolar(PHP y MySql)FullStack 17 min
Lección 6. 75 Commit en el repositorio de GITHUB del Sistema de Gestión Escolar(PHP y MySql)FullStack 17 min
📤 Importación Masiva y Gráficos
Lección 1. 76 Importar estudiantes por lote del Sistema de Gestión Escolar(PHP y MySql)FullStack 22 min
Lección 2. 77 Cargar datos masivos a la base de datos del Sistema de Gestión Escolar(PHP y MySql)FullStack 20 min
Lección 3. 78 Instalar y utilizar CHART.JS para reportes del Sistema de Gestión Escolar(PHP y MySql)FullStack 16 min
Lección 4. 79 Reporte de estudiantes por grados del Sistema de Gestión Escolar(PHP y MySql)FullStack 19 min
Lección 5. 80 Reportes de estudiantes inscritos por mes del Sistema de Gestión Escolar(PHP y MySql)FullStack 15 min
Lección 6. 81 Reporte en circular con jQuery Knob del Sistema de Gestión Escolar(PHP y MySql)FullStack 14 min
🏁 Ajustes Finales y Conclusión
Lección 1. 82 El Mejor chiste se lleva todo el código fuente y la base de datos del Sistema de Gestión Escolar 4 min
Lección 2. 83 Últimos ajustes de eliminar registros Sistema de Gestión Escolar(PHP y MySql)FullStack 31 min
Lección 3. 84 Últimos ajustes de eliminar registros Sistema de Gestión Escolar(PHP y MySql)FullStack parte 2 23 min
Lección 4. 85 Fin del curso de Sistema de Gestión Escolar con (PHP y MySql) FullStack 13 min
Lección 5. Ganadores del mejor chiste se llevan un SISTEMA DE GESTIÓN ESCOLAR COMPLETO 12 min

Apoya este proyecto

Si te gusta nuestro contenido, ¡apóyanos con una donación!

Donar por Airtm Donar por Binance

¡Gracias por tu apoyo! ❤️

Volver al curso