Creación de Campos Virtuales en Componentes con Tailwind CSS

Contenido del curso

Introducción

Proyecto con Laravel 8

Conclusión

Bonus

21
Consejos para Dominio de Laravel y Desarrollo Profesional
03:00 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:0012:05

Creación de Campos Virtuales en Componentes con Tailwind CSS

Curso de Introducción a Laravel 8

Clase 12 de 21

Clase 12 / 21

Recursos

Diseñar un componente visual en Laravel que combine consultas a la base de datos con campos virtuales y estilos de Tailwind CSS es una técnica poderosa para construir interfaces modulares y reutilizables. Aquí se explica cómo crear tarjetas de cursos con extractos generados dinámicamente, avatares desde Gravatar y un diseño limpio basado en utilidades CSS.

¿Cómo se estructura el diseño visual del componente?

El componente visual reside dentro de la carpeta Views del proyecto, organizado por el nombre del componente instalado. La base del diseño arranca con una cuadrícula de tres columnas usando clases de Tailwind [0:35]:

Espacio entre columnas de nivel cuatro (gap-4).
Margen superior de nivel ocho (mt-8).

Cada iteración del bucle genera una tarjeta con las siguientes características [1:00]:

Fondo blanco mediante la clase bg-white.
Sombra y bordes redondeados con nivel lg.
Padding horizontal de nivel cuatro (px-4) y vertical de nivel seis (py-6).
Texto alineado al centro.

La tarjeta completa funciona como un enlace, aunque de momento no apunta a ninguna ruta específica. Dentro se coloca una imagen cuya fuente proviene del campo image de la variable del curso, con bordes redondeados nivel md y un margen inferior de nivel dos [1:30].

¿Qué elementos componen cada tarjeta?

Debajo de la imagen se muestra un H2 con el nombre del curso y un H3 con el extracto, que es precisamente un campo virtual que aún no existe en la tabla [2:05]. También se incluye una imagen circular para el avatar del creador del curso, accediendo a la relación curso → usuario → avatar [2:30].

Para el avatar, el redondeado es full, lo que genera una imagen completamente circular, a diferencia de otros elementos donde se usa md o lg. Se definen altura y anchura específicas para mantener la proporción.

¿Cómo se aplican las clases de Tailwind para la jerarquía visual?

Los títulos de los cursos reciben la clase text-lg con un gris de nivel 600 [3:30]. Para evitar que un título ocupe dos líneas se usa una clase de truncado que agrega automáticamente tres puntos suspensivos cuando el texto excede el espacio disponible. El extracto utiliza un tamaño de texto mediano con un gris de intensidad inferior, creando así una jerarquía visual clara entre título y descripción.

¿Qué son los campos virtuales y cómo se crean?

Un campo virtual es un atributo que no existe físicamente en la tabla de la base de datos, pero se construye mediante lógica dentro del modelo para usarlo como si fuera un campo real [4:15].

Para crear uno en Laravel, se define un método público dentro del modelo correspondiente. La convención es que el nombre del método comience con get y termine con Attribute. Entre ambas palabras se coloca el nombre del campo virtual deseado.

El extracto se genera dentro del modelo Course [4:35]:

Se retorna la descripción del curso recortada.
Se utiliza una función que extrae los primeros 80 caracteres del string original.
Se concatenan tres puntos al final para indicar que el texto continúa.

De esta forma, aunque la tabla solo tiene un campo description extenso (800 o más caracteres), el componente accede a extracto como si fuera un campo nativo.

¿Cómo se genera el avatar con Gravatar?

El avatar también es un campo virtual, definido esta vez dentro del modelo User [5:15]. La lógica consiste en:

Tomar el email del usuario.
Convertirlo a formato MD5.
Concatenarlo con la URL de Gravatar: https://s.gravatar.com/avatar/ seguido del hash generado.

Gravatar es un producto de WordPress que asocia una imagen de perfil a cada dirección de correo electrónico registrada en su plataforma. Si el email existe en Gravatar, el avatar se muestra correctamente. Con datos falsos de prueba, la imagen generada será genérica [5:50].

Al inspeccionar el elemento en el navegador se puede verificar que la URL contiene el hash MD5 del email, confirmando que el campo virtual funciona según lo esperado.

¿Por qué los componentes son la forma ideal de organizar proyectos complejos?

Cada componente agrupa su propia lógica y diseño de forma independiente [7:00]. No depende de rutas, controladores ni modelos externos. Dentro de una misma vista se pueden colocar múltiples componentes, cada uno con su consulta y configuración.

En el enfoque tradicional, si una vista necesitaba mostrar últimos cursos, cursos más votados y usuarios activos, todas esas consultas vivían en el método del controlador. Con componentes, el controlador simplemente retorna la vista y cada componente se encarga de obtener sus propios datos. Esto reduce la complejidad del controlador y mejora la mantenibilidad del proyecto.