Views Dinâmicas com Blade

Views Dinâmicas com Blade

Dê Vida ao Frontend do Seu Projeto

O Que São Views?

Views são uma parte fundamental do padrão MVC (Model-View-Controller) usado no Laravel. Elas são responsáveis por apresentar a interface de usuário e exibir os dados de maneira visualmente atraente.

No Laravel, as views são geralmente escritas usando o Blade, o motor de templates do framework.

Introdução ao Blade

Blade é o motor de templates do Laravel que permite usar uma sintaxe simples e limpa para criar views dinâmicas. Ele oferece diversos recursos como herança de templates, inclusão de sub-views, loops, condicionais, entre outros.

Criando uma View Simples

As views são armazenadas no diretório resources/views. Vamos criar uma view simples chamada home.blade.php:

<!-- resources/views/home.blade.php -->

<!DOCTYPE html>
<html>
<head>
    <title>Minha Aplicação Laravel</title>
</head>
<body>
    <h1>Bem-vindo ao Laravel!</h1>
</body>
</html>

Para retornar essa view de um controlador, você pode usar o método view:

public function index()
{ 
   return view('home');
}

Passando Dados para as Views

Você pode passar dados para as views como um array associativo ou usando o método with:

public function index()
{
   $cliente = 'áreadev';
   return view('home', ['cliente' => $cliente]);
}

Ou, usando o método with:

public function index()
{
    $cliente = 'áreadev';
    return view('home')->with('cliente', $cliente);
}

Na view home.blade.php, você pode acessar os dados:

<!-- resources/views/home.blade.php -->

<!DOCTYPE html>
<html>
<head>
    <title>Minha Aplicação Laravel</title>
</head>
<body>
    <h1>Olá {{ $cliente }}. Bem-vindo ao Laravel!</h1>
</body>
</html>

Incluindo Sub-Views

Você pode incluir sub-views em suas views principais usando a diretiva @include:

<!-- resources/views/home.blade.php -->

<!DOCTYPE html>
<html>
<head>
    <title>Página Principal</title>
</head>
<body>
    @include('header')

    @include('footer')
</body>
</html>

E então criar os arquivos de sub-view header.blade.php e footer.blade.php:

<!-- resources/views/header.blade.php -->

<header>
    <h1>Cabeçalho do Site</h1>
</header>
<!-- resources/views/footer.blade.php -->

<footer>
    <p>Rodapé do Site</p>
</footer>

Diretivas do Blade

Blade oferece várias diretivas para tornar o trabalho com templates mais fácil e intuitivo. Algumas das mais comuns incluem:

  •         // Diretivas: @if, @elseif, @else, @endif:
           @if ($user->email == 'bruno@gmail.com')
              <p>Bem-vindo, {{$user->name}}!</p>
           @else
              <p>Bem-vindo, Usuário!</p>
           @endif
    
          // controller: NomeDoController
          use Illuminate\Support\Facades\Auth;
    
           public function index()
           {
              $user = Auth::user();
              return view('home', compact('user'));
           }
    
  •         // Diretivas: @foreach
            @foreach ($users as $user)
                <p>{{ $user->name }}</p>
            @endforeach
    
  •         // Diretivas: @for, @while
            @for ($i = 0; $i < 10; $i++)
                <p>Item {{ $i }}</p>
            @endfor
    
  •         // Diretivas: @switch, @case, @break, @default
            @switch($i)
                @case(1)
                    Primeiro caso
                    @break
    
                @case(2)
                    Segundo caso
                    @break
    
                @default
                    Caso padrão
            @endswitch
    

Saiba mais:

Conclusão

O Blade é uma ferramenta poderosa que facilita a criação e a gestão de views no Laravel. Com inclusão de sub-views, diretivas intuitivas e componentes reutilizáveis, você pode criar interfaces de usuário eficientes e bem estruturadas. Nos próximos tópicos, exploraremos o Eloquent ORM e como trabalhar com banco de dados no Laravel, proporcionando uma aplicação completa e funcional.

Did you find this article valuable?

Support Áreadev by becoming a sponsor. Any amount is appreciated!