Lección: 33 DATATABLES en ESPAÑOL MÁS REPORTES Y PAGINACIÓN en el SISTEMA VETERINARIO(PHP y MySql)FullStack

33 DATATABLES en ESPAÑOL MÁS REPORTES Y PAGINACIÓN en el SISTEMA VETERINARIO(PHP y MySql)FullStack

Duración: 16 min

Módulo: 👤 CRUD Completo de Usuarios (Gestión de Datos) Lección 8 de 12

Descripción

🎬 Lección 33: DataTables en Español, Paginación Personalizada y Mejoras Visuales ✨

Esta sesión se centra en perfeccionar la experiencia del usuario y la robustez del módulo de usuarios a través de la localización de DataTables, la validación de campos obligatorios y la incorporación de iconos.

1. Traducción y Configuración de DataTables 🌐

El instructor resuelve los pendientes del video anterior al modificar el script de DataTables:

Traducción a Español: Se reemplaza el script de inicialización con un código más completo que utiliza la propiedad language para traducir todos los elementos de la interfaz:
- Search cambia a Buscador. [02:50]
- Showing X to Y of Z entries cambia a Mostrando de 1 a 5 de 11 usuarios. [04:00]
- Previous y Next cambian a Anterior y Siguiente. [04:07]
- Los botones de exportación (Copy, Print, etc.) también se traducen. [02:57]
Paginación Personalizada: Se configura la propiedad lengthMenu para definir las opciones de paginación disponibles (ej. 5, 10, 25). El instructor establece el valor por defecto en 5 elementos por página, lo que mejora la visualización en la pantalla. [01:52]

2. Validación de Formulario (Campos Requeridos) 🛡️

Para evitar que se guarden datos incompletos o "basura" en el sistema:

HTML5 required: Se añade el atributo required directamente a los campos de entrada (<input>) del formulario de creación de usuario (create.php). [08:06]
Validación del Navegador: Esta validación nativa de HTML5 impide el envío del formulario si los campos obligatorios (nombre, correo electrónico, contraseña) están vacíos, mostrando un mensaje de advertencia al usuario. [08:33]
Marcadores Visuales: Para indicarle al usuario qué campos son obligatorios, se añade un asterisco (*) y un texto en negrita junto a la etiqueta del campo. [07:10]

3. Mejora Visual de Botones de Acción con Iconos 🎨

Se mejora la apariencia de la columna "Acciones" en el listado de usuarios:

Inclusión de Librería: Se agrega el enlace CDN para Bootstrap Icons en el proyecto. [12:45]
Iconos Añadidos: Se utilizan iconos de esta librería para reemplazar o acompañar el texto de cada botón:
- Ver: Se usa el icono del ojo (Eye). [11:58]
- Editar: Se usa el icono del lápiz (Pencil). [13:13]
- Borrar: Se usa el icono del bote de basura (Trash). [13:43]

El video concluye con la planificación para el próximo capítulo, que se centrará en la lógica de las acciones "Ver", "Editar" y "Borrar", incluyendo la actualización de la información y la eliminación de registros. [14:40]

Hilari Web