Las Vistas (Views) en Laravel son una parte fundamental de la arquitectura Modelo-Vista-Controlador (MVC). Su objetivo principal es separar la lógica de la aplicación/controlador de la lógica de presentación. Contienen el HTML que se sirve al usuario y normalmente se escriben utilizando el potente motor de plantillas de Laravel, Blade.
1. Mostrar Datos (Echoing)
La característica más fundamental de Blade es mostrar los datos pasados a la vista.
A. Datos Escapados {{ $variable }}
Esta es la forma estándar de hacer eco del contenido. Blade ejecuta automáticamente la función htmlspecialchars de PHP en todos los datos pasados de esta manera, previniendo ataques de Cross-Site Scripting (XSS) al convertir caracteres como < y > en sus entidades HTML (< y >).
| Sintaxis | Descripción | Ejemplo de Salida |
| {{ $title }} | Muestra de forma segura el valor de la variable. | <h1>Título de Mi Página</h1> |
| {{ $user->name }} | Funciona con propiedades de objetos. | Juan Pérez |
B. Datos Sin Escapar {!! $variable !!}
A veces, necesitas renderizar HTML sin procesar que sabes que es seguro (por ejemplo, desde un analizador de markdown). Puedes usar la sintaxis {!! !!}, pero úsala con precaución, ya que no proporciona protección XSS.
// Si $html_content contiene: <h1>¡Peligro!</h1>
// Salida Escapada (Segura):
{{ $html_content }}
// Salida en el código fuente del navegador: <h1>¡Peligro!</h1>
// Salida Sin Escapar (Potencialmente Insegura):
{!! $html_content !!}
// Salida en el código fuente del navegador: <h1>¡Peligro!</h1> (renderizado como un encabezado)
2. Estructuras de Control (Directivas) 🚦
Blade te permite usar estructuras de control de PHP como if y foreach utilizando directivas simples y limpias que comienzan con un símbolo @.
A. Condicionales (@if, @else, @elseif, @unless)
Blade proporciona una sintaxis limpia para la lógica condicional, reemplazando las etiquetas PHP prolijas.
@if (count($users) > 0)
<p>¡Tenemos usuarios!</p>
@elseif (is_array($users))
<p>La variable de usuarios es un array vacío.</p>
@else
<p>No se encontraron usuarios.</p>
@endif
Blade también ofrece la directiva @unless, que actúa como lo opuesto a @if (solo ejecuta el bloque si la condición es falsa):
@unless (Auth::check())
<a href="/login">No has iniciado sesión. Inicia sesión ahora.</a>
@endunless
B. Bucles (@foreach, @for, @while)
Puedes iterar sobre los datos utilizando estructuras de bucle PHP estándar. El más común es @foreach.
<ul>
@foreach ($products as $product)
<li>Nombre del Producto: {{ $product->name }}</li>
@endforeach
</ul>
Para los casos en los que necesites el índice del bucle, puedes usar la variable $loop dentro de cualquier bucle @foreach:
@foreach ($products as $product)
@if ($loop->first)
<p>Este es el primer producto de la lista.</p>
@endif
{{ $product->name }}
@if ($loop->last)
<p>Este es el último producto de la lista.</p>
@endif
@endforeach
3. Herencia de Plantillas (Diseños) 🧱
El concepto más crucial para el diseño web básico es evitar el HTML redundante (como las etiquetas <head>, <body> y las barras de navegación). Blade resuelve esto utilizando la Herencia de Plantillas, que involucra tres directivas principales: @extends, @section y @yield.
A. Definir el Diseño Maestro Primero, crea un archivo de diseño maestro (p. ej., resources/views/layouts/app.blade.php). Este archivo contiene toda la estructura HTML común
<!DOCTYPE html>
<html>
<head>
<title>Nombre de la App - @yield('title')</title>
</head>
<body>
@include('partials.nav') <div class="container">
@yield('content')
</div>
<footer>
<p>© 2024 Mi Aplicación</p>
</footer>
</body>
</html>
@yield(‘title’): Define un “agujero” o marcador de posición. Cualquier vista que extienda este diseño puede llenar este agujero con contenido bajo el nombre title.
@yield(‘content’): Define el marcador de posición del área de contenido principal.
B. Crear una Vista Hija
Luego, crea una vista hija que herede la estructura y llene los marcadores de posición.
@extends('layouts.app')
@section('title', 'Página de Inicio')
@section('content')
<h1>Bienvenido a Casa</h1>
<p>Este contenido es único para la página de inicio.</p>
@endsection
- @extends(‘layouts.app’): Le dice a Blade que envuelva este contenido dentro del archivo layouts/app.blade.php.
- @section(‘title’, ‘Página de Inicio’): Proporciona un valor corto de una sola línea para el marcador de posición title.
- @section(‘content’) … @endsection: Proporciona un bloque de contenido para el marcador de posición content.
4. Incluir Sub-Vistas (@include) 🧩
La directiva @include te permite traer contenido de otra vista a la vista actual. Esto es perfecto para secciones pequeñas y reutilizables como barras de navegación, mensajes de error o un pie de página.
Por ejemplo, si tienes un archivo en resources/views/partials/errors.blade.php
<div class="alert alert-danger">
Por favor, corrige los siguientes errores:
<ul>
@foreach ($errors->all() as $error)
<li>{{ $error }}</li>
@endforeach
</ul>
</div>
Puedes reutilizar este fragmento en cualquier parte de tu aplicación:
<h1>Crear Nueva Publicación</h1>
@include('partials.errors')
<form>...</form>- Nota: La directiva @include automáticamente pone todas las variables disponibles en la vista incluida. También puedes pasar un array de datos explícitamente como segundo argumento si es necesario.
5. Comentarios de Blade 💬
Blade te permite definir comentarios que no se incluirán en el HTML final enviado al navegador. Esto es útil para dejar notas de desarrollador sin saturar el código del lado del cliente.
{{-- Este es un Comentario de Blade.
Se eliminará cuando la vista se compile a HTML. --}}
<p>El comentario anterior no aparecerá en el código fuente del navegador.</p>