Dominando o Blade: Uma Excursão Pelo Template do Laravel

5 min readJun 22, 2024

O Blade é o mecanismo de template para a criação de páginas no framework Laravel. Ele simplifica o desenvolvimento de páginas de forma concisa. Cada arquivo de template Blade possui a extensão .blade.php e é armazenado na pasta resources/views. Neste artigo, exploraremos alguns dos recursos oferecidos por esse mecanismo.

Sintaxe

Uma das principais vantagens do blade é a sua sintaxe, que facilita a criação de layouts de página e a exibição de dados de forma simplificada. A seguir veremos alguns exemplos em que a utilizaremos:

1 — Imprimir variáveis

Para imprimir variáveis na view pode ser usado chaves duplas

{{ $nome }}

2 — Diretivas blade

As diretivas são instruções especiais utilizadas para incorporar lógicas e funcionalidades diretamente página. Essas diretivas são reconhecidas pelo uso do símbolo @ seguido de uma palavra-chave que indica o que precisa ser feito. As diretivas mais comuns são:

Estruturas condicionais

Usadas para construir estruturas condicionais em suas views. Você pode condicionar a exibição de conteúdo com base em valores booleanos ou variáveis.

@if (count($users) === 1)
   //Há 1 usuário cadastrado
@elseif (count($users) === 0)
   // Não existe usuário cadastrado
@else
   // Foram encontrados {{ count($users) }} usuários cadastrados
@endif

rotações

Um loop dentro do contexto blade, se refere a uma interação ou ciclo que é criado usando uma diretiva. Como por exemplo:

@for — Nesa diretiva, você pode especificar uma condição de término e um incremento, semelhante ao PHP puro. Por exemplo:

@ for ( $i = 0 ; $i < 5 ; $i ++) 
    {{ $i }} 
@ endfor

@foreach — Essa diretiva é usada para iterar sobre uma coleção, como uma array ou uma coleção de modelos Eloquent. Ela permite que você execute um bloco de código para cada item na coleção. Por exemplo:

@ foreach ( $usuários  as  $usuário ) 
    {{ $usuário }} 
@ endforeach

@forelse — É um foreach que também permite programar um fallback se o objeto pelo qual esivermos interando estiver vazio.

@forelse ($users as $user)
  {{ $user->name }}
@empty
  // Não existe usuário cadastrado
@endforelse

@while — Essa diretiva permite que você continue iterando até que uma condição específica seja atendida. Por exemplo:

@while ($item = array_pop($items))
   {{ $item }}
@endwhile

3 — Diretivas Blade avançadas

Diretivas blade avançadas se referem a recursos e funcionalidades disponibilizadas no blade que permite maior flexibilidade e manipulação dos dados na construção de uma página. Algumas dessas diretivas incluem:

@inject: A diretiva @inject permite injetar uma classe ou serviço em uma view para que você possa acessá-la diretamente na view, sem a necessidade de passá-la explicitamente a partir do controlador.
@each: A diretiva @each é usada para iterar sobre uma coleção (por exemplo, uma coleção de modelos Eloquent) e renderizar um bloco de conteúdo para cada item na coleção.
@can e @cannot: Essas diretivas são usadas para verificar as permissões do usuário. Você pode usá-las para controlar o acesso a partes específicas da sua view com base nas permissões do usuário.
@includeWhen e @includeIf: Essas diretivas permitem incluir views parciais condicionalmente, dependendo de uma condição especificada. Isso é útil para evitar a inclusão de views desnecessárias.
@verbatim: A diretiva @verbatim permite renderizar texto bruto sem interpretar outras diretivas Blade. Isso é útil quando você deseja exibir código Blade como texto em uma página.

Componentes — Incluindo subvisualizações

Os componetes blade são um subconjuto de modelo blade que permite criar novos recursos personalizados, reutilizáveis e encapsulados. Eles são uma maneira de definir e organizar partes comuns da interface do usuário, como botões, formulários, modais, ou qualquer elemento que você deseje reutilizar em várias partes de seu aplicativo Laravel.

Os componentes blade consistem em dois principais elementos:

1 — Componentes

Os componentes são arquivos blade que contém a marcação HTML e a lógica necessária para renderizar os elementos de interface de usuário. Geralmente são armazenados na pasta resources/views/components e também contam com a extensão .blade.php .

Existem duas abordagens para escrever componentes: componentes baseados em classe e componentes anônimos.

Para criar um componente baseado em classe, você pode usar o make:componentcomando Artisan.

php artisan make:component Alert

Se você quiser criar um componente anônimo (um componente com apenas um modelo Blade e nenhuma classe), você pode usar o --viewsinalizador ao invocar o make:componentcomando:

php artisan make:component forms.input --view

2 — Tags de componente

Você pode incluir um componente em suas views usando uma tag de componente. A tag de componente é semelhante à diretiva @include, mas em vez de incluir uma view completa, você inclui um componente. A tag de componente é formatada assim: <x-component-name />, onde component-name é o nome do componente.

<!-- resources/views/components/button.blade.php -->
<button {{ $attributes->merge(['class' => 'bg-blue-500 text-white font-bold py-2 px-4 rounded']) }}>
    {{ $slot }}
</button>

<!-- Uma view que usa o componente button -->
<x-button>Texto do Botão</x-button>

No exemplo acima, <x-button> é a tag do componente que chama o componente button.blade.php. Você pode personalizar a classe ou adicionar outros atributos passando-os na tag do componente.

Quer saber mais sobre componentes? Acesse: https://laravel.com/docs/10.x/blade#components.

Slots

Um Slot é uma característica que permite que você defina seções de conteúdo em uma view que podem ser preenchidas a partir de outras views. Isso é especialmente útil quando você tem um layout de página base (como um template) e deseja permitir que as views filhas forneçam conteúdo específico para preencher áreas dentro desse layout. Isso torna suas views mais flexíveis e reutilizáveis.

Para usar um slot é bem simples:

1 — Defina o slot

Para definir um slot utilize a diretiva @yield , no seu layout de página base que geralmente fica em resources/views/layouts .

<!DOCTYPE html>
<html>
<head>
    <title>Minha Página - @yield('titulo')</title>
</head>
<body>
    <header>
        @yield('cabecalho')
    </header>

    <main>
        @yield('conteudo')
    </main>

    <footer>
        @yield('rodape')
    </footer>
</body>
</html>

@extends('layouts.meulayout')

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

@section('cabecalho')
    <h1>Bem-vindo ao Meu Site</h1>
@endsection

@section('conteudo')
    <p>Este é o conteúdo principal da página.</p>
@endsection

@section('rodape')
    <p>Rodapé do site.</p>
@endsection

Quer potencializar ainda mais os recursos disponilizados pelo blade?

Conheça algumas integrações que podem ser realizadas dentro do framework como oLivewire e o Tailwind CSS .

1 - `Livewire`

O Livewire não é um recurso nativo do Blade no Laravel, mas é uma biblioteca frequentemente usada em conjunto com o Blade para criar componentes dinâmicos e interativos nas views do Laravel.

Essa biblioteca lida com a parte lógica e dinâmica do desenvolvimento da interface do usuário, permitindo a criação de componentes interativos e dinâmicos com ações controladas pelo lado do servidor, sem a necessidade de escrever JavaScript. Ele é uma extensão do Laravel e se integra bem com os recursos e o ecossistema do Laravel. Pode ser usado em conjunto com outros frameworks JavaScript, se necessário.

Quer saber mais sobre o Livewire? Acesse: https://livewire.laravel.com/docs/quickstart.

2 – Tailwind CSS

É um framework de estilo (CSS) que oferece uma coleção de classes utilitárias para estilização de elementos HTML, permitindo criar layouts e estilos de forma eficiente. Ele já vem integrado no laravel 10 e é uma biblioteca de estilos puros que não lida com lógica ou comportamento interativo. Ele se concentra exclusivamente na criação de estilos e layouts.

Quer saber mais sobre o Tailwind? Acesse: https://flowbite.com/docs/getting-started/laravel/.

Quais são as funcionalidades específicas do Blade que mais chamaram sua atenção e tornaram sua experiência de desenvolvimento mais agradável? Como você acha que essas tecnologias podem continuar a evoluir para atender às demandas futuras? Compartilhe conosco nos comentários.

Até a próxima =)