PHP

Laravel Blade: Templates, Componentes e Layouts: Do Básico ao Avançado

10 min de leitura

Laravel Blade: Templates, Componentes e Layouts: Do Básico ao Avançado

Introdução ao Laravel Blade O Laravel Blade é o motor de templates padrão do framework Laravel, projetado para tornar a criação de views mais expressiva e menos verbosa. Diferentemente de trabalhar diretamente com PHP puro, o Blade oferece uma sintaxe limpa baseada em diretivas que se compilam para código PHP otimizado. Desde sua criação, tornou-se a escolha padrão para renderizar HTML dinâmico em aplicações Laravel, permitindo que desenvolvedores escribam código mais legível e manutenível. A principal característica do Blade é sua simplicidade: você escreve templates com extensão usando diretivas intuitivas como , e , que são automaticamente convertidas para PHP válido antes da execução. Além disso, o Blade oferece proteção contra XSS por padrão e integra-se perfeitamente com os componentes e layouts do Laravel, formando um ecossistema completo para gerenciar a camada de view da sua aplicação. Sintaxe Fundamental e Diretivas Essenciais Exibindo Dados e Escape de Output A forma mais básica de exibir dados em Blade é através das

<h2>Introdução ao Laravel Blade</h2>

<p>O Laravel Blade é o motor de templates padrão do framework Laravel, projetado para tornar a criação de views mais expressiva e menos verbosa. Diferentemente de trabalhar diretamente com PHP puro, o Blade oferece uma sintaxe limpa baseada em diretivas que se compilam para código PHP otimizado. Desde sua criação, tornou-se a escolha padrão para renderizar HTML dinâmico em aplicações Laravel, permitindo que desenvolvedores escribam código mais legível e manutenível.</p>

<p>A principal característica do Blade é sua simplicidade: você escreve templates com extensão <code>.blade.php</code> usando diretivas intuitivas como <code>@if</code>, <code>@foreach</code> e <code>@include</code>, que são automaticamente convertidas para PHP válido antes da execução. Além disso, o Blade oferece proteção contra XSS por padrão e integra-se perfeitamente com os componentes e layouts do Laravel, formando um ecossistema completo para gerenciar a camada de view da sua aplicação.</p>

<h2>Sintaxe Fundamental e Diretivas Essenciais</h2>

<h3>Exibindo Dados e Escape de Output</h3>

<p>A forma mais básica de exibir dados em Blade é através das chaves duplas <code>{{ }}</code>, que automaticamente escapam o conteúdo para prevenir vulnerabilidades XSS:</p>

<pre><code class="language-blade">&lt;!-- resources/views/product.blade.php --&gt;

&lt;h1&gt;{{ $product-&gt;name }}&lt;/h1&gt;

&lt;p&gt;{{ $product-&gt;description }}&lt;/p&gt;</code></pre>

<p>Se você precisa exibir HTML sem escape, use três chaves <code>{!! !!}</code>, mas tenha cuidado com dados não confiáveis:</p>

<pre><code class="language-blade">&lt;!-- Exibe HTML puro --&gt;

{!! $product-&gt;formatted_html !!}

&lt;!-- Verificar se variável existe --&gt;

{{ $user-&gt;email ?? &#039;Email não disponível&#039; }}</code></pre>

<h3>Estruturas de Controle</h3>

<p>As estruturas condicionais e de loops em Blade simplificam bastante o código PHP tradicional. Veja como ficam mais legíveis:</p>

<pre><code class="language-blade">@if ($user-&gt;isAdmin())

&lt;div class=&quot;admin-panel&quot;&gt;Painel Administrativo&lt;/div&gt;

@elseif ($user-&gt;isEditor())

&lt;div class=&quot;editor-panel&quot;&gt;Painel do Editor&lt;/div&gt;

@else

&lt;div class=&quot;user-panel&quot;&gt;Painel do Usuário&lt;/div&gt;

@endif

&lt;!-- Loops --&gt;

@forelse ($products as $product)

&lt;div class=&quot;product-card&quot;&gt;

&lt;h3&gt;{{ $product-&gt;name }}&lt;/h3&gt;

&lt;p&gt;Preço: R$ {{ number_format($product-&gt;price, 2, &#039;,&#039;, &#039;.&#039;) }}&lt;/p&gt;

&lt;/div&gt;

@empty

&lt;p&gt;Nenhum produto disponível.&lt;/p&gt;

@endforelse</code></pre>

<p>A diretiva <code>@forelse</code> é particularmente útil pois oferece tratamento para listas vazias em uma única estrutura, eliminando a necessidade de <code>@if</code> adicional.</p>

<h2>Layouts, Includes e Componentes</h2>

<h3>Estrutura de Layouts</h3>

<p>Um layout em Blade funciona como template mestre que define a estrutura HTML comum a várias páginas. Use a diretiva <code>@yield</code> para definir seções que serão preenchidas por views filhas:</p>

<pre><code class="language-blade">&lt;!-- resources/views/layouts/app.blade.php --&gt;

&lt;!DOCTYPE html&gt;

&lt;html&gt;

&lt;head&gt;

&lt;title&gt;@yield(&#039;title&#039;, &#039;Minha Aplicação&#039;)&lt;/title&gt;

&lt;link rel=&quot;stylesheet&quot; href=&quot;/css/app.css&quot;&gt;

&lt;/head&gt;

&lt;body&gt;

&lt;nav&gt;

&lt;a href=&quot;/&quot;&gt;Home&lt;/a&gt;

&lt;/nav&gt;

&lt;main&gt;

@yield(&#039;content&#039;)

&lt;/main&gt;

&lt;footer&gt;

&lt;p&gt;&amp;copy; 2024&lt;/p&gt;

&lt;/footer&gt;

&lt;/body&gt;

&lt;/html&gt;</code></pre>

<p>Uma view filha herda deste layout usando <code>@extends</code>:</p>

<pre><code class="language-blade">&lt;!-- resources/views/products/index.blade.php --&gt;

@extends(&#039;layouts.app&#039;)

@section(&#039;title&#039;, &#039;Produtos&#039;)

@section(&#039;content&#039;)

&lt;h1&gt;Lista de Produtos&lt;/h1&gt;

@foreach ($products as $product)

&lt;div&gt;{{ $product-&gt;name }}&lt;/div&gt;

@endforeach

@endsection</code></pre>

<h3>Includes para Reutilização</h3>

<p>Use <code>@include</code> para inserir templates parciais dentro de outras views, permitindo reutilização sem herança:</p>

<pre><code class="language-blade">&lt;!-- resources/views/partials/header.blade.php --&gt;

&lt;header&gt;

&lt;h1&gt;{{ $title ?? &#039;Bem-vindo&#039; }}&lt;/h1&gt;

&lt;/header&gt;

&lt;!-- Usando em outra view --&gt;

@include(&#039;partials.header&#039;, [&#039;title&#039; =&gt; &#039;Produtos&#039;])

&lt;!-- Incluir múltiplos arquivos --&gt;

@each(&#039;partials.product-card&#039;, $products, &#039;product&#039;)</code></pre>

<p>A diretiva <code>@each</code> é ideal quando você precisa iterar e incluir um partial para cada item, sendo mais concisa que <code>@foreach</code> com <code>@include</code>.</p>

<h3>Componentes Blade Modernos</h3>

<p>A partir do Laravel 7.x, componentes Blade oferecem uma forma mais poderosa e reutilizável de estruturar a UI. São classes PHP que representam uma view com lógica específica:</p>

<pre><code class="language-php">// app/View/Components/Alert.php

namespace App\View\Components;

use Illuminate\View\Component;

class Alert extends Component

{

public function __construct(

public string $type = &#039;info&#039;,

public string $message = &#039;&#039;

) {}

public function render()

{

return view(&#039;components.alert&#039;);

}

}</code></pre>

<pre><code class="language-blade">&lt;!-- resources/views/components/alert.blade.php --&gt;

&lt;div class=&quot;alert alert-{{ $type }}&quot;&gt;

{{ $message }}

&lt;/div&gt;</code></pre>

<p>Usar o componente em suas views é extremamente simples com a sintaxe de tag customizada:</p>

<pre><code class="language-blade">&lt;!-- Usar o componente --&gt;

&lt;x-alert type=&quot;success&quot; message=&quot;Operação realizada com sucesso!&quot; /&gt;

&lt;!-- Componentes com slots (conteúdo) --&gt;

&lt;x-card title=&quot;Meu Card&quot;&gt;

&lt;p&gt;Conteúdo do card aqui&lt;/p&gt;

&lt;/x-card&gt;</code></pre>

<p>Para componentes com conteúdo dinâmico, defina slots na view do componente:</p>

<pre><code class="language-blade">&lt;!-- resources/views/components/card.blade.php --&gt;

&lt;div class=&quot;card&quot;&gt;

&lt;h2&gt;{{ $title }}&lt;/h2&gt;

&lt;div class=&quot;card-body&quot;&gt;

{{ $slot }}

&lt;/div&gt;

&lt;/div&gt;</code></pre>

<h2>Boas Práticas e Otimizações</h2>

<p>Organize seus layouts em diretórios clara: mantenha layouts mestres em <code>resources/views/layouts/</code>, partials em <code>resources/views/partials/</code> e componentes em <code>resources/views/components/</code>. Essa estrutura facilita a navegação e manutenção conforme seu projeto cresce.</p>

<p>Sempre escape dados do usuário por padrão usando <code>{{ }}</code> e use <code>{!! !!}</code> apenas quando tiver certeza que o conteúdo é seguro. Aproveite o caching automático do Blade em produção — as views compiladas são cacheadas, então não há overhead de compilação a cada request. Para desenvolvimento, execute <code>php artisan view:clear</code> quando precisar limpar o cache manualmente. Use <code>@auth</code> e <code>@guest</code> para verificações de autenticação diretamente nos templates, evitando verificações desnecessárias no controller.</p>

<pre><code class="language-blade">&lt;!-- Verificar autenticação --&gt;

@auth

&lt;p&gt;Bem-vindo, {{ Auth::user()-&gt;name }}&lt;/p&gt;

@endauth

@guest

&lt;a href=&quot;/login&quot;&gt;Faça login&lt;/a&gt;

@endguest

&lt;!-- Componentes parametrizados com atributos mesclados --&gt;

&lt;x-button :disabled=&quot;$isLoading&quot; class=&quot;btn-large&quot;&gt;

{{ $isLoading ? &#039;Carregando...&#039; : &#039;Enviar&#039; }}

&lt;/x-button&gt;</code></pre>

<h2>Conclusão</h2>

<p>O Laravel Blade revoluciona a forma como escrevemos views em PHP ao combinar uma sintaxe expressiva e amigável com recursos poderosos como layouts, includes e componentes. O domínio dessas três técnicas — templates base com <code>@extends</code>/<code>@yield</code>, reutilização com <code>@include</code>, e componentes reutilizáveis — forma a base de uma arquitetura view profissional e escalável. Pratique criando layouts aninhados, componentes parametrizados e mantendo sua estrutura de diretórios organizada para colher todos os benefícios dessa ferramenta extraordinária.</p>

<h2>Referências</h2>

<ul>

<li><a href="https://laravel.com/docs/blade" target="_blank" rel="noopener noreferrer">Documentação oficial do Laravel Blade</a></li>

<li><a href="https://laravel.com/docs/components" target="_blank" rel="noopener noreferrer">Laravel Components - Documentação</a></li>

<li><a href="https://laravel-news.com" target="_blank" rel="noopener noreferrer">Article: Building Reusable Components with Laravel Blade</a></li>

<li><a href="https://laracasts.com" target="_blank" rel="noopener noreferrer">Laracasts - Blade Masterclass</a></li>

<li><a href="https://spatie.be/guidelines/laravel-php" target="_blank" rel="noopener noreferrer">Laravel Best Practices by Spatie</a></li>

</ul>

Comentários

Mais em PHP

Boas Práticas de Logging Profissional com Monolog em PHP para Times Ágeis
Boas Práticas de Logging Profissional com Monolog em PHP para Times Ágeis

Por que Logging Profissional Importa Logging é frequentemente negligenciado p...

Consumindo APIs Externas com Guzzle em PHP na Prática
Consumindo APIs Externas com Guzzle em PHP na Prática

Introdução ao Guzzle: O Cliente HTTP Essencial Guzzle é a biblioteca HTTP mai...

Camada Controller: Recebendo Requisições e Orquestrando Respostas na Prática
Camada Controller: Recebendo Requisições e Orquestrando Respostas na Prática

O Papel do Controller na Arquitetura MVC O controller é o intermediário funda...