07 💻 Formulario Avanzado: Previsualización de Imágenes con JS, Blade Multi-Language, Old validation
Duración: 23 minDescripción
🔍 Lección 07: Formulario Avanzado, Maquetación del CRUD y Directivas de Validación en Blade 💻📋
En este séptimo capítulo entramos de lleno en la maquetación de la interfaz gráfica para el módulo de mascotas. Resolvemos inconsistencias menores en las rutas base, integramos componentes visuales avanzados de Bootstrap desde la plantilla, y construimos un formulario robusto implementando atributos nativos de validación web y directivas dinámicas de Blade para el control y despliegue de errores en tiempo real.
🎯 Lo realizado en este capítulo
- 🧭 Ajuste de Enrutamiento y Navegación: Corregimos la ruta interna del menú lateral hacia un estándar limpio en inglés (admin/pets), eliminando conflictos de renderizado [01:54]. Añadimos un acceso directo denominado "Inicio" apuntando al dashboard principal utilizando el ícono nativo fa-home [03:00].
- 📊 Maquetación del Listado General (Cards & Tables): Diseñamos la estructura base para la vista admin/pets/index.blade.php. Implementamos un sistema de cuadrícula responsiva (row y col-12) extrayendo un contenedor profesional (Card) de la plantilla y le incrustamos un botón estilizado con el símbolo de suma (+ Agregar) que redirige a la creación de registros [05:21, 06:40]. Finalmente, agregamos una tabla base para preparar el despliegue dinámico de información [08:29].
- 🔌 Rutas de Creación y el Atributo enctype: Declaramos en el archivo web las rutas HTTP correspondientes para el método create [09:54]. En la nueva vista admin/pets/create.blade.php, abrimos la etiqueta HTML <form> con el método POST y añadimos obligatoriamente el atributo enctype="multipart/form-data" para asegurar la subida correcta de la fotografía de la mascota [13:56].
- 🎨 Maquetación Estética del Input Group: Diseñamos el primer campo para el nombre de la mascota (name) organizando la fila en columnas de tamaño tres (col-md-3) [15:13]. Sustituimos los inputs tradicionales por un grupo estilizado (Input Group), acoplando un icono temático de huella (fa-paw) al lado del campo de texto [16:29, 17:31].
- 🛡️ Validación Visual y Control Dinámico de Errores con Blade: Agregamos una marca visual estética de color rojo (text-danger) para indicar de forma explícita que el campo es requerido, reforzado con el atributo nativo required del navegador [18:43, 19:06]. Para el backend, encapsulamos el campo dentro de la directiva @error('name'), inyectando una etiqueta pequeña (<small>) que imprimirá de forma dinámica la variable $message únicamente cuando la validación del framework falle [22:17, 22:33].
🗄️ Próximo paso
Con la vista del listado maquetada y la estructura del campo del nombre configurada con sus directivas de error, la base del formulario está consolidada. En la siguiente lección completaremos de forma masiva los campos restantes (como los selectores Enum y los textareas multi-idioma) y utilizaremos JavaScript para lograr la previsualización interactiva de la imagen seleccionada antes de guardarla. ¡Nos vemos en el próximo video! 🐾
