Aula 05 - Views com Blade 🎨

🎯 Objetivo da Aula

Aprender a criar interfaces dinâmicas utilizando o Blade, o poderoso motor de templating do Laravel. Vamos explorar layouts, componentes e diretivas que facilitam a criação de páginas reutilizáveis.

🖌️ O que é o Blade?

O Blade é um motor de templates simples, mas poderoso. Ao contrário de outros motores PHP, o Blade não impede que você use código PHP puro nas suas views, mas fornece atalhos elegantes para tarefas comuns.

Extensão de Arquivo

Todos os arquivos Blade devem ter a extensão .blade.php e são armazenados em resources/views.

🏗️ Layouts e Herança

Em vez de repetir o cabeçalho e o rodapé em toda página, criamos um layout base.

Layout Base (`app.blade.php`)

<html>
    <head>
        <title>Meu Site - @yield('title')</title>
    </head>
    <body>
        <nav>Menu Principal</nav>
        <div class="content">
            @yield('content')
        </div>
    </body>
</html>

Usando o Layout (`home.blade.php`)

@extends('layouts.app')

@section('title', 'Página Inicial')

@section('content')
    <h1>Bem-vindo à Home!</h1>
@endsection

📊 Fluxo de Renderização do Blade

graph LR
    A[Controller] --> B[Passa Dados]
    B --> C{Blade Engine}
    C --> D[Layouts/Seções]
    D --> E[Componentes]
    E --> F[HTML Final]

📜 Diretivas do Blade

As diretivas são atalhos que começam com @.

Diretiva	Descrição
`@if`, `@else`	Condicionais simples.
`@foreach`	Loops para arrays e coleções.
`@auth`, `@guest`	Verificação de autenticação.
`@include`	Inclui outra view parcial.

🧩 Componentes Blade

Componentes são pedaços de UI reutilizáveis (como um botão ou um card).

$ php artisan make:component Alerta

Uso na view:

<x-alerta tipo="sucesso">
    Operação realizada com sucesso!
</x-alerta>

🧠 Blocos de Destaque

Dica de Design

O Laravel se integra perfeitamente com Tailwind CSS ou Bootstrap. Você pode usar as classes desses frameworks diretamente dentro dos seus arquivos Blade.

🛠️ Exercícios Progressivos

Básico: Crie uma view que exiba uma lista de nomes usando @foreach.
Intermediário: Crie um layout base com uma seção lateral (sidebar) e uma home que o herde.
Desafio: Crie um componente Card que receba um título e um conteúdo via slot.

🚀 Mini-Projeto da Aula

Dashboard de Perfil: Crie um layout mestre e uma página de perfil que exiba informações de um usuário (nome, bio, skills). As skills devem ser iteradas a partir de um array passado pelo Controller e o design deve usar um componente Blade para os cards.

Próxima Aula: Banco de Dados e Migrations