Capítulo 5.1: Modelos Blade no Laravel

Tempo de estudo: 40 minutos

1. O que é Blade? Seu "projeto" inteligente

Até agora, trabalhamos com dois extremos: um index.html puro e uma resposta JSON pura de uma API. Mas como criar páginas web completas que exibem dados dinamicamente do nosso backend?

Blade — é o motor de templates integrado do Laravel. Ele nos permite escrever HTML comum, mas com "superpoderes":

Inserir variáveis e executar código PHP com uma sintaxe elegante.
Criar "layouts" de páginas reutilizáveis (cabeçalhos, rodapés).
Usar loops e condições diretamente no código HTML.
Proteger automaticamente contra ataques XSS.

💡 Analogia espacial:

Imagine que HTML é um projeto simples de uma nave espacial. Blade é um sistema CAD avançado. Você não apenas desenha linhas, você adiciona objetos "inteligentes". Você diz: "Aqui estará a lista da tripulação", e Blade automaticamente solicita os dados e os preenche. "Aqui estará a tela principal", e Blade insere a interface padrão.

Todos os arquivos Blade têm a extensão .blade.php e são armazenados na pasta resources/views/.

2. Fundamentos da Sintaxe: Exibição de Dados

A coisa mais simples que o Blade faz é exibir dados.

Sintaxe {{ }}

Estas chaves duplas são o comando para o Blade "pegar uma variável e exibir seu conteúdo de forma segura".

Exemplo:

Rota em routes/web.php:
```
<?php
Route::get('/mission-briefing', function () {
    $mission = 'Explorar o sistema Kepler-186';
    return view('briefing', ['mission_name' => $mission]);
});
```
- view('briefing', ...) diz ao Laravel para encontrar o arquivo resources/views/briefing.blade.php.
- ['mission_name' => $mission] — é um array de dados que "passamos" para nossa view.

View em resources/views/briefing.blade.php:

<h1>Missão Centro de Comando</h1>
<p>Tarefa atual: {{ $mission_name }}</p>

Resultado no navegador em /mission-briefing:

<h1>Missão Centro de Comando</h1>
<p>Tarefa atual: Explorar o sistema Kepler-186</p>

🛡️ Importante saber: Blade escapa automaticamente todos os dados dentro de {{ }}. Isso significa que, se uma variável contiver tags HTML ou um script malicioso, eles serão exibidos como texto comum, e não executados. Esta é uma proteção integrada contra ataques XSS.

Para exibir HTML não escapado (faça isso com cautela!) usa-se a sintaxe {!! $variable !!}.

3. Diretivas: Adicionando Lógica ao HTML

As diretivas Blade começam com o símbolo @. Elas permitem usar loops, condições e muito mais.

Condições (@if, @else):

@if($planet->is_habitable)
    <p style="color: green;">Planeta habitável!</p>
@else
    <p style="color: red;">Requer traje espacial. Atmosfera hostil.</p>
@endif

Loops (@foreach, @forelse):

@forelse — é uma diretiva muito conveniente que combina um loop e uma verificação de vazio.

<h2>Lista de planetas no sistema:</h2>
<ul>
    @forelse($planets as $planet)
        <li>
            {{ $loop->iteration }}. {{ $planet->name }}
            <!-- $loop - variável especial disponível no loop -->
        </li>
    @empty
        <li>Nenhum planeta foi detectado neste sistema.</li>
    @endforelse
</ul>

4. Layouts e Seções: Não Se Repita (DRY)

A funcionalidade mais poderosa do Blade é a criação de layouts reutilizáveis. Você não precisa copiar o cabeçalho e o rodapé do site para cada página.

Passo 1: Criar um layout mestre (layout)

Crie o arquivo resources/views/layouts/app.blade.php:

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

    <main>
        @yield('content') <!-- O conteúdo exclusivo da página virá aqui -->
    </main>

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

- @yield('title') e @yield('content') — são "slots" ou "marcadores de posição".

Passo 2: Criar uma view filha que usa o layout

Crie o arquivo resources/views/planets/index.blade.php:

<?php
@extends('layouts.app') {{-- Herdamos nosso layout mestre --}}

@section('title', 'Lista de planetas') {{-- Preenchemos a seção 'title' --}}

@section('content') {{-- Preenchemos a seção principal 'content' --}}
    <h2>Planetas Registrados</h2>
    <p>Esta é uma lista de todos os mundos conhecidos por nós.</p>
    {{-- Seu loop @forelse para exibir planetas pode vir aqui --}}
@endsection

Agora, quando o Laravel renderizar planets.index, ele primeiro pegará layouts.app e então inserirá o conteúdo das seções @section nele.

Quiz para Fixação

🚀 Resumo do Capítulo:

Você aprendeu os fundamentos do Blade — uma ferramenta poderosa para criar páginas web dinâmicas. Agora você sabe:

Exibir dados com proteção automática contra XSS.
Usar diretivas para adicionar lógica (@if, @forelse).
Criar layouts reutilizáveis usando @extends e @yield. Nós preparamos "projetos" para os painéis de controle da nossa nave. No próximo capítulo, nós criaremos "painéis" (visões) específicos para a nossa API e exibiremos dados reais neles.