Vistas y Blade Lección 11 de 45 10 min de lectura

Introducción a Blade

Blade es el motor de plantillas de Laravel. Te permite escribir HTML dinámico con una sintaxis limpia y expresiva, separando la lógica de la presentación.

¿Qué es Blade?

Blade es el motor de plantillas incluido en Laravel. Te permite mezclar HTML con código PHP de forma limpia, sin los típicos <?php ?> por todas partes.

Los archivos Blade usan la extensión .blade.php y se guardan en resources/views/.

Tu primera vista Blade

Crea el archivo resources/views/welcome.blade.php:

blade 
<!DOCTYPE html>
<html>
<head>
    <title>Mi App</title>
</head>
<body>
    <h1>Hola, {{ $name }}</h1>
</body>
</html>

La sintaxis {{ }} imprime el valor de una variable y escapa HTML automáticamente para prevenir ataques XSS.

Devolver una vista desde una ruta

Usa la función view() para devolver una vista:

php 
Route::get('/', function () {
    return view('welcome', ['name' => 'Carlos']);
});

El primer argumento es el nombre de la vista (sin .blade.php). El segundo es un array con los datos a pasar.

Pasar datos a las vistas

Hay varias formas de pasar datos:

php 
// Con array
return view('profile', ['name' => 'Ana', 'age' => 25]);

// Con with()
return view('profile')
    ->with('name', 'Ana')
    ->with('age', 25);

// Con compact() - si las variables ya existen
$name = 'Ana';
$age = 25;
return view('profile', compact('name', 'age'));

Vistas en subcarpetas

Puedes organizar las vistas en carpetas. Usa punto (.) para separar:

php 
// Archivo: resources/views/users/profile.blade.php
return view('users.profile', ['name' => 'Ana']);

// Archivo: resources/views/admin/dashboard.blade.php
return view('admin.dashboard');

Mostrar datos en Blade

La sintaxis {{ }} escapa el HTML. Si necesitas mostrar HTML sin escapar (¡con cuidado!), usa {!! !!}:

blade 
<!-- Escapado (seguro) -->
<p>{{ $content }}</p>

<!-- Sin escapar (solo si confías en el contenido) -->
<div>{!! $htmlContent !!}</div>

<!-- Valor por defecto si la variable no existe -->
<p>{{ $name ?? 'Invitado' }}</p>
Seguridad XSS

Usa siempre {{ }} para datos del usuario. Solo usa {!! !!} con contenido que tú controlas.

Comentarios en Blade

Los comentarios de Blade no aparecen en el HTML final:

blade 
{{-- Este comentario no aparece en el HTML --}}

<!-- Este comentario SÍ aparece en el HTML -->

Ejercicios

Ejercicio 1: Crear una vista de saludo

Crea una vista greeting.blade.php que muestre "Hola, [nombre]! Tienes [edad] años." Crea una ruta que pase ambos datos.

Ver solución 
<!-- resources/views/greeting.blade.php -->
<!DOCTYPE html>
<html>
<head>
    <title>Saludo</title>
</head>
<body>
    <p>Hola, {{ $name }}! Tienes {{ $age }} años.</p>
</body>
</html>
// routes/web.php
Route::get('/greeting', function () {
    return view('greeting', [
        'name' => 'María',
        'age' => 30
    ]);
});

Ejercicio 2: Vista en subcarpeta

Crea la carpeta resources/views/pages/ y dentro un archivo about.blade.php. Devuelve esta vista desde una ruta /about.

Ver solución 
<!-- resources/views/pages/about.blade.php -->
<!DOCTYPE html>
<html>
<head>
    <title>Sobre nosotros</title>
</head>
<body>
    <h1>Sobre nosotros</h1>
    <p>Somos una empresa dedicada a...</p>
</body>
</html>
// routes/web.php
Route::get('/about', function () {
    return view('pages.about');
});

Ejercicio 3: Usar compact()

Crea una ruta que defina variables $title y $content, y pásalas a una vista usando compact().

Ver solución 
// routes/web.php
Route::get('/post', function () {
    $title = 'Mi primer post';
    $content = 'Este es el contenido del post.';

    return view('post', compact('title', 'content'));
});
<!-- resources/views/post.blade.php -->
<!DOCTYPE html>
<html>
<head>
    <title>{{ $title }}</title>
</head>
<body>
    <h1>{{ $title }}</h1>
    <p>{{ $content }}</p>
</body>
</html>

Resumen

  • Blade es el motor de plantillas de Laravel
  • Los archivos usan extensión .blade.php en resources/views/
  • view('nombre', ['var' => 'valor']) devuelve una vista
  • {{ $var }} imprime escapando HTML (seguro)
  • {!! $var !!} imprime sin escapar (usar con cuidado)
  • Usa punto para subcarpetas: view('users.profile')
  • {{-- comentario --}} no aparece en el HTML

¿Te está gustando el curso?

Tenemos cursos premium con proyectos reales, soporte personalizado y certificado.

Descubrir cursos premium