Capítulo 5.1: Plantillas Blade en Laravel

Tiempo de estudio: 40 minutos

1. ¿Qué es Blade? Tu diseño "inteligente"

Hasta ahora hemos trabajado con dos extremos: un index.html puro y una respuesta JSON pura de una API. Pero, ¿cómo crear páginas web completas que muestren dinámicamente los datos de nuestro backend?

Blade es el motor de plantillas integrado en Laravel. Nos permite escribir HTML normal, pero con "superpoderes":

Insertar variables y ejecutar código PHP con una sintaxis elegante.
Crear "diseños" de página reutilizables (cabeceras, pies de página).
Usar bucles y condiciones directamente en el código HTML.
Proteger automáticamente contra ataques XSS.

💡 Analogía espacial:

Imagina que HTML es un plano simple de una nave espacial. Blade es un sistema CAD avanzado. No solo dibujas líneas, sino que añades objetos "inteligentes". Dices: "Aquí irá la lista de la tripulación", y Blade automáticamente solicita los datos y los rellena. "Aquí irá la pantalla principal", y Blade inserta la interfaz estándar.

Todos los archivos Blade tienen la extensión .blade.php y se almacenan en la carpeta resources/views/.

2. Fundamentos de la sintaxis: Mostrar datos

Lo más simple que hace Blade es mostrar datos.

Sintaxis {{ }}

Estas dobles llaves son el comando para Blade de "tomar una variable y mostrar su contenido de forma segura".

Ejemplo:

Ruta en routes/web.php:
```
<?php
Route::get('/mission-briefing', function () {
    $mission = 'Explorar el sistema Kepler-186';
    return view('briefing', ['mission_name' => $mission]);
});
```
- view('briefing', ...) le dice a Laravel que busque el archivo resources/views/briefing.blade.php.
- ['mission_name' => $mission] es un array de datos que "pasamos" a nuestra vista.

Vista en resources/views/briefing.blade.php:

<h1>Misión Centro de Control</h1>
<p>Tarea actual: {{ $mission_name }}</p>

Resultado en el navegador en la dirección /mission-briefing:

<h1>Misión Centro de Control</h1>
<p>Tarea actual: Explorar el sistema Kepler-186</p>

🛡️ Importante saber: Blade escapa automáticamente todos los datos dentro de {{ }}. Esto significa que si una variable contiene etiquetas HTML o un script malicioso, se mostrarán como texto normal y no se ejecutarán. Esta es una protección incorporada contra ataques XSS.

Para mostrar HTML sin escapar (¡haga esto con precaución!) se utiliza la sintaxis {!! $variable !!}.

3. Directivas: Añadir lógica en HTML

Las directivas Blade comienzan con el símbolo @. Permiten usar bucles, condiciones y mucho más.

Condiciones (@if, @else):

@if($planet->is_habitable)
    <p style="color: green;">¡Planeta habitable!</p>
@else
    <p style="color: red;">Se requiere traje espacial. La atmósfera es hostil.</p>
@endif

Bucles (@foreach, @forelse):

@forelse es una directiva muy conveniente que combina un bucle y una comprobación de vacío.

<h2>Lista de planetas en el sistema:</h2>
<ul>
    @forelse($planets as $planet)
        <li>
            {{ $loop->iteration }}. {{ $planet->name }}
            <!-- $loop - variable especial disponible en el bucle -->
        </li>
    @empty
        <li>No se han detectado planetas en este sistema.</li>
    @endforelse
</ul>

4. Diseños y secciones: No te repitas (DRY)

La capacidad más potente de Blade es la creación de diseños (layouts) reutilizables. No necesitas copiar la cabecera y el pie de página del sitio en cada página.

Paso 1: Creamos el diseño maestro (layout)

Crea el archivo resources/views/layouts/app.blade.php:

<?php
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Centro de Control - @yield('title')</title>
    <link rel="stylesheet" href="{{ asset('css/style.css') }}">
</head>
<body>
    <header>
        <h1>Centro de Mando de la Flota Galáctica</h1>
    </header>

    <main>
        @yield('content') <!-- Aquí irá el contenido único de la página -->
    </main>

    <footer>
        <p>&copy; {{ date('Y') }} Space Command. Todos los derechos reservados.</p>
    </footer>
</body>
</html>

- @yield('title') y @yield('content') son "slots" o "marcadores de posición".

Paso 2: Creamos una vista hija que utiliza el diseño

Crea el archivo resources/views/planets/index.blade.php:

<?php
@extends('layouts.app') {{-- Heredamos nuestro diseño maestro --}}

@section('title', 'Lista de planetas') {{-- Rellenamos la sección 'title' --}}

@section('content') {{-- Rellenamos la sección principal 'content' --}}
    <h2>Planetas registrados</h2>
    <p>Esta es una lista de todos los mundos que conocemos.</p>
    {{-- Aquí puede ir tu bucle @forelse para mostrar los planetas --}}
@endsection

Ahora, cuando Laravel renderice planets.index, primero tomará layouts.app y luego insertará en él el contenido de las secciones @section.

Cuestionario para afianzar conocimientos

🚀 Resumen del capítulo:

Has aprendido los fundamentos de Blade, una potente herramienta para crear páginas web dinámicas. Ahora sabes:

Mostrar datos con protección automática contra XSS.
Usar directivas para añadir lógica (@if, @forelse).
Crear diseños reutilizables con @extends y @yield. Hemos diseñado los "planos" para los paneles de control de nuestra nave. En el siguiente capítulo crearemos "paneles" (vistas) concretos para nuestra API y mostraremos datos reales en ellos.