En Laravel, las plantillas constituyen
la capa de presentación de la aplicación
.
Son la parte encargada de generar
el HTML que finalmente recibe el navegador del usuario
. Sin embargo, no se trata de HTML estático aislado: las plantillas están directamente relacionadas con el código del backend, ya que:
reciben datos desde los controladores,
muestran información dinámica
permiten integrar lógica mínima de presentación.
Dentro de la arquitectura MVC, las plantillas forman parte de la Vista (View). El controlador prepara los datos y los envía a la vista, que se encarga de representarlos en formato HTML (o en otros formatos como JSON, si se trata de una API). De esta forma, se mantiene la separación entre lógica de negocio y presentación.
Las plantillas las escribiremos en la carpeta
./resources
.
Laravel ofrece distintas formas de gestionar esta capa de presentación, dependiendo del enfoque arquitectónico que se quiera adoptar.
Blade
Blade es el motor de plantillas nativo de Laravel. Permite escribir HTML enriquecido con directivas especiales (@if, @foreach, @extends, etc.) que facilitan la inserción de datos dinámicos y la reutilización de estructuras.
Blade no es un framework frontend, sino un sistema de renderizado del lado del servidor. El HTML se genera completamente en el backend antes de enviarse al navegador. Es ideal para aplicaciones clásicas basadas en renderizado server-side y para proyectos donde no se necesita una SPA (Single Page Application).
En este caso Las plantillas se escriben en la carpeta ./resources/views.
Laravel no las sirve directamente al navegador. Cuando una vista se renderiza, el motor Blade la compila internamente a código PHP y la almacena en storage/framework/views.
Ese código PHP compilado se ejecuta en el servidor y genera el HTML final que se envía al cliente.
Vue, React u otros frameworks frontend
Laravel puede integrarse con frameworks modernos de frontend como Vue o React. En este caso, la generación del HTML dinámico se traslada principalmente al cliente (navegador), mientras que Laravel actúa como backend o como proveedor de API.
Esta integración puede realizarse de distintas formas:
Como backend API puro (Laravel devuelve JSON).
Mediante Inertia.js, que permite usar Vue o React sin necesidad de construir una API REST tradicional.
En combinación con Vite, que gestiona el empaquetado de los recursos frontend.
Este enfoque es adecuado cuando se desea construir interfaces más dinámicas y reactivas.
En este caso, los ficheros (componentes), se escriben en la carpeta resources/js.
Mediante herramientas como
Vite
, el código es procesado, transpìlado (por ejemplo, JSX o sintaxis moderna de JavaScript a JavaScript compatible con el navegador), y empaquetado en archivos optimizados que se generan en el directorio public/build.
Estos archivos son los que finalmente se sirven al navegador.
Livewire
Livewire es una solución intermedia que permite crear interfaces dinámicas sin abandonar completamente el renderizado del lado del servidor. Funciona integrando componentes PHP que se comunican con el frontend mediante peticiones AJAX automáticas.
El desarrollador escribe principalmente código PHP y Blade, y Livewire se encarga de sincronizar los cambios con el navegador sin necesidad de escribir JavaScript complejo. Es una alternativa interesante cuando se quiere interactividad avanzada manteniendo una arquitectura centrada en Laravel.
En resumen, Laravel permite múltiples estrategias para la capa de presentación:
Blade → Renderizado clásico del lado del servidor.
Vue / React → Renderizado dinámico del lado del cliente.
Livewire → Interactividad avanzada con lógica principalmente en PHP.
La elección depende del nivel de dinamismo requerido, la complejidad de la interfaz y la arquitectura general del proyecto.
1 - Plantillas en laravel
Plantillas con Blade
Una herramienta poderosa y flexible incluida en Laravel, que nos va a permitir
escribir html e incluir php y visualizar datos del servidor
balde.php
de una forma elegante y descriptiva. (Esto facilita visualizar datos
Los ficheros blade, tienen extensión
blade.php
y estarán ubicados en la carpeta
./resources/view
.
Cuando hagamos referencia a los ficheros blade, esta información no hay que especificar, ni su ubicación, ni su extensión, como podemos ver en el siguiente ejemplo
1
2
return view('welcome');
//Va a retornar el fichero ./resources/view/welcome.blade.php
Contenido de un fichero blade
Dentro de un fichero blade
(.blade.php)
En él podemos encontrar el siguiente tipo de código o instrucciones:
Código html y js
(como cualquier página html)
{{}} Doble braquets
Para mostrar el contenido de variables PHP o lo que retornara una expresión o función
{{date(d-m-Y}} => Mostrará el resultado de la función
{{ $variable }} => Se mostrará el valor de la varialbe
No se puede incluir código php
{{$a = 5}} => Esto no se puede hacer
Blade automáticamente escapa el HTML en las variables para evitar ataques XSS.
También para comentar, en lugar de <!- - Comentario html - ->, podemos usar {{- - Comentario html - -}}
@
para utilizar directivas/estructuras de control propias de laravel, como como condicionales y bucles.
Por ejemplo,
@if, @foreach, @switch
, @auth – @endauth, @guest - @endguest entre otras.
Otro ejemplo es incluir código php con la diretiva @php
@php
$a = 5//Aquí creamos la variable $a y la podremos usar
@endphp
Herencia: Creando un layout
Concepto
En el desarrollo web con Laravel,
la herencia en las plantillas Blade
proporciona una forma eficiente de garantizar
una estructura consistente en todas las páginas
, fomentando un diseño corporativo uniforme.
Idea de su uso/funcionamiento
Herencia mediante Componentes Blade
Concepto
En el desarrollo web con Laravel, la reutilización de estructuras comunes se realiza actualmente mediante componentes Blade, que permiten definir una estructura base reutilizable para todas las páginas.
En lugar de utilizar las directivas @extends y @yield, se crea un componente de layout (por ejemplo <x-layout>) que encapsula la estructura general de la interfaz: cabecera, navegación, pie de página, estilos y scripts.
Este componente actúa como contenedor común sobre el que se insertan los contenidos específicos de cada vista.
Idea de uso y funcionamiento
Con este enfoque se define un componente principal que representa el diseño corporativo general de la aplicación.
Cada página no hereda formalmente mediante directivas, sino que compone su contenido dentro del componente.
El funcionamiento es el siguiente:
El layout define la estructura global.
Las páginas insertan su contenido en el {{ $slot }}.
Opcionalmente pueden definirse slots nombrados como title, header, description, etc.
De este modo:
Se mantiene coherencia visual en toda la aplicación.
Se separa claramente la estructura global del contenido específico.
Se adopta un enfoque basado en composición, más cercano al modelo de trabajo de frameworks como React o Vue.
Ventajas frente al enfoque clásico con @extends
Arquitectura más moderna y alineada con componentes.
Mejor encapsulación del diseño.
Mayor reutilización.
Modelo mental más coherente para estudiantes que trabajan también con frontend basado en componentes.
Conclusión
El uso de componentes Blade para estructurar layouts permite mantener la coherencia visual de la aplicación y facilita el mantenimiento.
Cualquier modificación en el componente principal se reflejará automáticamente en todas las vistas que lo utilicen, garantizando consistencia, modularidad y escalabilidad en el diseño.
Comentarios blade
Insertando comentarios en fichero .blade.php
Dentro de un fichero
Blade
, podemos comentar de dos maneras
Comentarios HTML (<!-- Comentarios -->)
Comentarios Blade ({{-- Comentarios --}})
Hay diferencias significativas entre comentar con <!-- Comentarios --> y {{-- Comentarios --}} en un fichero Blade de Laravel.
Estas diferencias se relacionan principalmente con cómo se manejan y se muestran estos comentarios en el HTML generado y enviado al navegador.
Comentarios HTML (<!-- Comentarios -->):
Son comentarios estándar de HTML.
Serán visibles en el código fuente del HTML generado y enviado al navegador.
Cualquiera que inspeccione el código fuente de la página en el navegador podrá ver estos comentarios.
Son útiles para anotaciones que no afectan la presentación de la página pero podrían ser de ayuda durante el desarrollo o para otros desarrolladores.
Comentarios Blade ({{-- Comentarios --}}):
Son específicos del motor de plantillas Blade de Laravel.
No serán incluidos en el HTML final generado. Esto significa que no aparecerán en el código fuente de la página cuando se vea en un navegador.
Son útiles para dejar notas o comentarios en el código que solo deben ser visibles durante el desarrollo y no deben ser expuestos a los usuarios finales o en el ambiente de producción.
Proporcionan una manera de hacer anotaciones en las plantillas Blade sin afectar lo que ve el usuario.
2 - Diseñando el layout
Creando un diseño
Proceso de diseño
Diseñar es un aspecto fundamentan antes de crear las páginas
Para crear un proyecto debemos crear previaemnte los mockups o Prototipados de pantallas
Posteriormente hemos de crear las páginas usando los estilos adecuados para conseguir los diseños previamente prototipados, esto implicará usar html y css
Para crear los diseños se usan herramientas gráficas de prototipado, y para el css normalmente usaremos algún fremework tipo Bootstrap o tailwindcss
Herramientas para el diseño
Vamos a usar Balsamiq porque disponemos de licencia estudiante en el centro
Existen varias herramientas alternativas:
Pencil Project es una herramienta de prototipado de código abierto que te permite crear mockups de manera sencilla. Es fácil de usar y ofrece una variedad de elementos predefinidos.
MockFlow es una plataforma en línea que ofrece una herramienta de diseño de wireframes y mockups. La versión gratuita tiene algunas limitaciones, pero aún así proporciona funcionalidades útiles.
Balsamiq, conocido por su aplicación de escritorio, también ofrece una versión en línea gratuita llamada Balsamiq Cloud que permite crear mockups y wireframes.
Figma es una herramienta de diseño colaborativo en línea que permite crear mockups, wireframes y prototipos. Tiene una versión gratuita con muchas funcionalidades.
Wireframe.cc es una herramienta simple y fácil de usar para crear wireframes rápidos y sencillos. Puedes comenzar a usarla directamente en el navegador.
Laravel como fullstack
Laravel es un poderoso framework de backend.
Con Laravel, es posible realizar
desarrollos web full-stack
. Esto significa que este framework nos habilita para gestionar tanto el backend como el frontend de una aplicación web.
Así, Laravel se convierte en una solución integral que permite implementar todas las facetas del desarrollo web, desde la lógica del servidor hasta la interfaz de usuario.
Recuerda
Laravel
Permite integrar de
forma agnóstica
cualquier herramienta para el front.
En el proceso de instalación, se instala
tailwindcss
como framework del css, pero lo podemos cambiar
Tailwind CSS
es un poderoso framework de estilos de CSS que se puede utilizar de manera efectiva con Laravel.
La simplicidad y flexibilidad de
Tailwind
permiten una integración fluida con proyectos Laravel, y es común ver su uso en conjunción con este framework de PHP.
Muchos paquetes y recursos integrados en el ecosistema de Laravel incorporan Tailwind CSS como herramienta preferida para la estilización de componentes y diseños, por ese motivo lo vamos a utilizar en este curso.
Instalación
Para la instalación necesitamos herramientas para gestionar paquetes del cliente node y npm, y vamos a usar vite como herramienta de compilación (traspilación) de ficheros en el frontend
Antes de integrar Tailwind CSS en tu proyecto Laravel, necesitarás tener Node.js instalado.
node
y
npm
son Gestores de paquetes para el front
Van a crear un fichero llamado
pakage.json (vs composer.json)
npm install
Al ejecutar
npm install
, se creará en el proyecto una carpeta llamada
node_modules
, donde se instalarán los paquetes especificados en el fichero json.
Este directorio
node_modules
tampoco hay que subir a git, ya que lo podremos generar a partir del fichero
pakage.json
.
Su instalación es sencilla. Una vez instalado cerramos el terminal y al volverlo a abrir, ya lo podemos utilizar.
Vite
en un proyecto Laravel es un moderno entorno de
construcción frontend
que proporciona una compilación (transpilación)rápida y eficiente de los recursos del front para ponerlos disponibles en ejecución.
Vite
, por ejemplo,
transpila archivos SCSS o LESS a CSS
,
procesa las directivas de Tailwind CSS para generar clases CSS utilizables
.
Además,
compila componentes de Vue o React a JavaScript
, facilitando su ejecución en el navegador.
En este caso vamos a escribir el contenido de una página
landing page
Para ello usaremos de la librería
Daisy
, el componente
Hero
Escribimos el siguiente código
home.blade.php
Establece una página de hereda de otra (un layout)
Para establecer una sección dónde se aportará contenido en la página que herede de ella
<!-- raw HTML omitted -->
Diseño footer
Diseño de la sección de pie de página :
footer
En este caso vamos a escribir el contenido de una página
landing page
En este caso vamos a seleccionar un
footer
3 - Componentes
Introducción a los Componentes de Blade en Laravel
¿Qué son los Componentes de Blade?
Los componentes de Blade
en Laravel son una poderosa herramienta para reutilizar código HTML y PHP en tus vistas.
Estos componentes son archivos .blade.php que residen en la carpeta resources/views/components. Si la carpeta no existe, puedes crearla manualmente. El hecho de que cada componente sea un archivo .blade.php independiente, facilita su reutilización y mantenimiento.
Idea de usar componentes
Descomponer un diseño complejo (layout) en elementos más pequeños y manejables conocidos como componentes.
Al crear un layout, este se convierte en una composición de estos ficheros individuales. Cada componente representa
una parte del layout
, como: una cabecera, pie de página, sección principal o barra de navegación como podemos ver en la siguiente imagen:
Creación y Uso de Componentes
Tenemos dos formas de crear un componente:
Componente anónimo
. Crear el fichero directamente en la carpeta correspondiente
Componentes basados en clases
. A través de
una clase usando Artisan****
Creando el componentes directamente
Simplemente creamos el fichero desde nuestro EDI.
En nuestro caso creamos los ficheros
header.blade,php, main.blade.php, nav.blade.php
y
footer.blade.php
.
Como son parte del layout, podríamos crearlo dentro de una carpeta llamada layout, por cuestiones organizativas:
Creando el componente con Artisan
Podemos crearlo a partir de una clase. El funcionamiento es igual. La forma de crearlo sería con artisan:
Vamos a hacerlo para nuestro ejemplo:
1
php artisan make:Component nombre_componente
Crear componente directo Vs con Artisan
Artisan
Usar
Artisan para crear componentes
tiene ventajas:
Estructura Consistente
: Artisan genera automáticamente la estructura de archivos necesaria, asegurando consistencia en todo el proyecto.
Rapidez
y
Conveniencia
: Es rápido y evita la posibilidad de errores al crear los archivos manualmente.
Comandos Claros
: Los comandos de Artisan son claros y documentados, lo que facilita su uso y aprendizaje.
1
php artisan make:component NombreDelComponente
Si queremos crear el componente en una carpeta concreta lo podemos hacer especificandolo
Los componentes de Blade
ofrecen acceso a varias variables y objetos especiales
que facilitan la construcción de interfaces dinámicas y reutilizables. Los más usados
$slot
$attributes
$errors
$slot
Contiene el contenido que se pasa al componente desde donde se llama.
Fichero layout
<x-layout.main>
<h1> Este es un contendio para el componente, lo recibirá como $slot</h1>
</x-layout.main>
Permite acceder a atributos adicionales pasados al componente.
La variable
$attributes
en los componentes de Blade de Laravel
es una instancia de Illuminate\View\ComponentAttributeBag
Proporciona varios métodos útiles para manipular los atributos que se pasan a un componente
Uno de los métodos más útiles es merge()
:
merge()
Fusiona los atributos predeterminados del componente con los atributos adicionales proporcionados en la vista.
El método merge()
se usa comúnmente para combinar clases CSS y otros atributos. Esto es especialmente útil cuando deseas que tu componente tenga algunas clases CSS por defecto, pero también quieres permitir que se añadan clases adicionales desde fuera del componente.
Supongamos el siguiente ejemplo donde tenemos un componente boton.blade.php:
Aquí, btn btn-default son las clases predeterminadas para todos los botones.
Cuando usas el componente y pasas clases adicionales:
Laravel fusionará las clases, resultando en un botón que tiene class=“btn btn-default btn-large”.
1
<x-boton class="btn-large">Click Aquí</x-boton>
Laravel fusionará las clases, resultando en un botón que tiene class=“btn btn-default btn-large”.
Otros Métodos de $attributes
only(): Devuelve solo un subconjunto de los atributos.
except(): Devuelve todos los atributos excepto los especificados.
class(): Devuelve una instancia de Illuminate\View\ComponentAttributeBag solo con las clases.
first(): Devuelve el primer valor de los atributos especificados.
Pasando atributos a un componentes
Para pasar atributos a un componente, usamos una sintaxis similar a la de las etiquetas HTML:
<x-miComponente atributo="valor" />
Posteriormente en el componete podemos utilzar dicho valor.
Si lo establecemos, Laravel proporciona una conversión automática entre la notación kebab-case en la invocación del componente y camelCase dentro del componente.
Notación Kebab-Case y CamelCase
Kebab-Case: Usada al pasar atributos al componente. Ejemplo: mi-atributo.
CamelCase: Usada dentro del componente para referenciar estos atributos. Ejemplo: miAtributo.
Cuando invocas un componente y pasas un atributo, usas kebab-case:
<x-miComponente mi-atributo="valor" />
Dentro del archivo del componente, Laravel convierte automáticamente mi-atributo a miAtributo:
<!-- miComponente.blade.php -->
<div>
{{ $miAtributo }} <!-- Accede al valor de 'mi-atributo' -->
</div>
```
4 - Ejemplo de nuestro proyecto
Landing autenticada en Laravel con Tailwind (Sin JavaScript)
Objetivos
Crear un grid reutilizable (máximo 3 columnas).
Crear un componente card reutilizable.
Implementar un menú principal con botón hamburguesa.
peer-checked:rotate-180 → rota la flecha al abrir.
Importante:
Cada menú (burger y logout) debe tener un id distinto y su propio peer, ya que cada checkbox controla únicamente a sus hermanos posteriores.
