11 Diseño de tabla con BOOTSTRAP en la vista en el SISTEMA (PHP y MySql) FullStack
Duración: 12 min
Módulo: 👤 CRUD de Usuarios y UX Avanzada
Lección 3 de
17
Descripción
✨ Lección 11: Diseño de la Tabla de Usuarios con Bootstrap y AdminLTE
Título del Video: 11 Diseño de tabla con BOOTSTRAP en la vista en el SISTEMA (PHP y MySql) FullStack
Esta lección se enfoca en mejorar la presentación del listado de usuarios (visto en la Lección 10) aplicando estilos modernos de Bootstrap y la estructura de componentes de AdminLTE, incluyendo iconos y un contador correlativo.
💅 Estilización de la Tabla con Bootstrap
Se utiliza el framework Bootstrap para transformar la tabla HTML básica en una tabla profesional y funcional.
- Clases Aplicadas: Se agregan múltiples clases de Bootstrap a la etiqueta <table> para aplicar el diseño:
- class="table": Aplica el estilo base de Bootstrap a la tabla [01:27].
- table-striped: Alterna el color de fondo de las filas (blanco y gris) para mejorar la legibilidad de grandes listados [03:16].
- table-bordered: Añade bordes a todas las celdas [03:53].
- table-hover: Resalta la fila al pasar el ratón por encima (efecto hover) [04:24].
- table-sm: Reduce el padding (espaciado) de las celdas para un diseño más compacto [04:48].
- Encabezado de la Tabla: Se aplica un estilo personalizado con fondo gris al encabezado (<thead>) [06:24] y el texto se alinea al centro con etiquetas de negrita (<b>) [10:28].
🔢 Columna de Conteo Correlativo
Se resuelve un problema común al numerar los registros en una tabla.
- Problema del ID de la Base de Datos: Se explica que usar el campo ID de la base de datos para la numeración consecutiva es un error. Si se elimina un registro, el conteo se rompe (ej. pasa de 1 a 3) [07:41].
- Implementación de Contador: La solución es inicializar una variable de contador ($contador = 1) antes del ciclo @foreach y luego incrementarla ($contador++) dentro de cada iteración. Esto garantiza una numeración correlativa perfecta (1, 2, 3...) sin importar los ID reales de la base de datos [08:04].
🖼️ Estructura con Widget de AdminLTE y Acciones
Se integra la tabla dentro de un componente de AdminLTE y se definen las acciones del listado.
- Componente Card (Widget): Toda la tabla se envuelve dentro de la estructura de un componente Card (también conocido como Widget) de AdminLTE. Este componente da un título ("Usuarios Registrados") y un marco visual elegante a la tabla [08:59].
- Columnas Finales: Se añaden las siguientes columnas a la tabla:
- Registro: Muestra el número consecutivo del $contador [06:47].
- Acciones: Se prepara esta columna para contener los botones de funcionalidad del CRUD (Crear, Leer, Actualizar, Borrar), que serán Ver, Editar y Eliminar [11:19]. Los iconos y el diseño de estos botones se implementarán en videos posteriores.
Lecciones
⚙️ Inicio y Estructura Base
👤 CRUD de Usuarios y UX Avanzada
Lección 2. 10 Listado de usuarios del controllador a la vista en el SISTEMA (PHP y MySql)FullStack
9 min
Lección 3. 11 Diseño de tabla con BOOTSTRAP en la vista en el SISTEMA (PHP y MySql) FullStack
12 min
Lección 6. 14 Registro y validación de datos para USUARIOS en el SISTEMA (PHP y MySql)FullStack
16 min
👩💼 Módulo de Secretarias
🤒 Gestión de Pacientes
Lección 4. 38 Como llamar desde un seeder a un factory de pacientes en LARAVEL(PHP-MySql) FullStack
14 min
Lección 8. 42 Show Pacientes en el sistema de reservas de citas medicas LARAVEL(PHP-MySql) FullStack
12 min
Lección 9. 43 EDIT Pacientes en el sistema de reservas de citas medicas LARAVEL(PHP-MySql) FullStack
14 min
🏥 Infraestructura: Consultorios y Doctores
⏰ Horarios y Lógica de Disponibilidad
Lección 1. 60 Calendario de Atención de Doctores en el sistema con LARAVEL(PHP-MySql) FullStack
14 min
Lección 10. 69 Plantilla Web para el sistema de reserva de citas con LARAVEL(PHP-MySql) FullStack
13 min
🔑 Seguridad, Roles y Permisos
Lección 6. 76 Identificando el ROL de cada Usuario en el Sistema con LARAVEL(PHP-MySql) FullStack
11 min
Lección 8. 78 Mostrar el Menú según los Roles y Permisos en Sistema con LARAVEL(PHP-MySql) FullStack
7 min
Lección 9. 79 Acceso No Autorizado con Roles y Permisos en Sistema con LARAVEL(PHP-MySql) FullStack
14 min
Lección 12. 82 Cargar Horario en la página principal en Sistema con LARAVEL(PHP-MySql) FullStack
16 min
Lección 13. 83 Redirigir a ADMIN desde Login y Register en Sistema con LARAVEL(PHP-MySql) FullStack
12 min
🗓️ Reserva de Citas y FullCalendar
Lección 2. 87 Formulario para Registrar Citas Medicas del Sistema con LARAVEL(PHP-MySql) FullStack
18 min
Lección 3. 88 Guardar Cita Medica en la Base de Datos de Sistema con LARAVEL(PHP-MySql) FullStack
15 min
Lección 9. 94 Cargar Reservas de Citas Medicas con AJAX del Sistema con LARAVEL(PHP-MySql) FullStack
20 min
📝 Historial Clínico, Configuraciones y Reportes
Lección 17. 116 Modificación del Historial Clínico del Sistema con LARAVEL(PHP-MySql) FullStack
15 min
Lección 19. 118 Reporte Impreso del Historial Clínico del Sistema con LARAVEL(PHP-MySql) FullStack
17 min
Lección 20. 119 Buscar Pacientes del Historial Clínico del Sistema con LARAVEL(PHP-MySql) FullStack
17 min
Lección 21. 120 Buscar Pacientes del Historial Clínico del Sistema con LARAVEL(PHP-MySql) FullStack
12 min
💵 Pagos, Impresión y Cierre
Apoya este proyecto
Si te gusta nuestro contenido, ¡apóyanos con una donación!
Donar por Airtm Donar por Binance¡Gracias por tu apoyo! ❤️
