Hilari Web

🔍 Lección 15: Formulario con Pestañas por Idiomas Traducible con Laravel (Escala a muchos más idiomas) 🚀🌍

En este decimoquinto capítulo culminamos el rediseño del frontend adaptando por completo el formulario modular para capturar información en múltiples lenguajes de manera simultánea. Duplicamos y sincronizamos la lógica de las rejillas de Bootstrap dentro de las pestañas (Tabs) de AdminLTE para estructurar las variantes en inglés y portugués, e implementamos un script reactivo en JavaScript que traduce dinámicamente los elementos globales fijos de la barra lateral al cambiar de idioma.

🎯 Lo realizado en este capítulo

• 🧼 Depuración del Layout e Inyección de Botones de Envío: Limpiamos etiquetas redundantes en el formulario base de español [01:05]. Extrajimos la botonera principal de confirmación (Guardar y Cancelar) y la reubicamos estratégicamente en una nueva fila (.row) dividida por un separador visual <hr>, logrando que el formulario quede limpio y perfectamente alineado en las 12 columnas de Bootstrap [01:33, 02:17].
• 🇬🇧 Construcción y Adaptación de la Pestaña en Inglés: Duplicamos la estructura del bloque de inputs en el segundo contenedor del Tab [04:14]. Adaptamos los campos de texto agregándoles el sufijo de idioma correspondiente para el mapeo JSON (ej. name_en, species_en, breed_en), traduciendo los marcadores de posición (placeholders) y los valores selectores de opciones para las variantes nativas en inglés (como dog, cat, male, female, etc.) [05:09, 06:45].
• 🇧🇷 Internacionalización de la Pestaña en Portugués: Replicamos exactamente la misma jerarquía lógica en la tercera pestaña dedicada a Brasil/Portugal [08:14]. Estructuramos los inputs mutables bajo los sufijos en portugués (ej. name_pt, species_pt) y ajustamos los desplegables de género y tamaño (macho, fêmea) con sus traducciones correspondientes, garantizando un flujo limpio para tres idiomas que puede escalar a cualquier cantidad de lenguajes [09:12, 10:46].
• 📜 Script Reactivo para la Barra Lateral Global: Diseñamos e inyectamos un script nativo en JavaScript al final del documento para manipular dinámicamente el DOM [11:31]. Este script detecta el evento de selección de cada pestaña de idioma e interactúa con los labels fijos ubicados en la columna lateral col-md-3 (los campos que se mantienen fuera del sistema de pestañas por ser genéricos, como la edad y la fotografía) [12:32, 13:05].
• 🛠️ Sincronización Dinámica de Labels vía selectores ID: Asignamos identificadores únicos (id="label-edad", id="label-foto") a las etiquetas globales de la barra lateral [12:00, 12:17]. Al pulsar sobre la pestaña de Estados Unidos, el script intercepta el DOM y muta instantáneamente los textos a "Age" y "Photo"; de igual manera, al hacer clic en la pestaña de Portugal, los cambia a sus variantes correspondientes, unificando la experiencia de usuario sin recargar la página [12:47].

🗄️ Próximo paso

Con la interfaz de usuario terminada y los formularios completamente adaptados con sus respectivos selectores mutables para español, inglés y portugués, el frontend está 100% optimizado. En la próxima lección regresaremos al backend en el controlador (PetController) para reajustar el método de almacenamiento, procesar las llaves compuestas de los requests y persistir finalmente las estructuras de datos dentro de los campos JSON remigrados en la base de datos. ¡Nos vemos en el próximo video! 🐾