Atualmente, a maior parte dos frameworks de desenvolvimento web conta com pelo menos um sistema de template para padronizar a camada de visão de suas aplicações. Esse tipo de recurso otimiza a construção do projeto, facilitando o reuso de código e mantendo em um único arquivo as partes fixas da interface.
Com esse intuito, o Laravel utiliza um sistema de template chamado Blade, que se diferencia de outras soluções PHP por não se restringir ao uso dessa linguagem em suas páginas. Além disso, no Blade, cada view é compilada e armazenada em cache até sofrer alguma alteração, deixando assim seus templates mais leves.
Neste artigo veremos como utilizar o Blade para criar páginas de template em projetos PHP que fazem uso do framework Laravel.
Relacionado: Tutorial de Laravel
Problema: Repetição de código
No desenvolvimento web é muito comum termos que repetir o mesmo conteúdo HTML em diversos lugares. Por exemplo, um site possui diversas páginas e todas elas possuem o mesmo cabeçalho e rodapé.
Nesses casos, caso não se utilize um sistema de templates, a solução natural é copiar todo o código que se repete e replicá-lo nas páginas em que ele for necessário. Além da pouca praticidade desse procedimento, o problema maior surge quando é solicitada alguma alteração na parte fixa do site, pois será preciso realizar essa mudança em todas as páginas já construídas. A probabilidade de ocorrerem erros nesse tipo de atividade é grande, e aumenta com o tamanho do projeto, principalmente por ser um procedimento manual e repetitivo.
Solução: Utilização de templates
Para evitar a repetição de código, podemos utilizar o recurso de templates oferecido pelo framework Laravel. Para isso, devemos criar um arquivo com o conteúdo que irá se repetir e salvá-lo com a extensão .blade.php dentro do subdiretório resources/views. Em seguida, devemos adicionar a marcação @yield com uma sessão informando o local onde deverá ser carregado o conteúdo dinâmico das páginas.
Na Listagem 1 temos o arquivo de template principal.blade.php contendo um cabeçalho e um menu fixo. Na linha 21 podemos observar a diretiva que será substituída pelo conteúdo das páginas dinâmicas. A string 'conteudo', neste caso, indica o nome da seção com a qual estamos trabalhando, podendo haver várias em uma página.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="site.css"/>
</head>
<body>
<header>
<h1>Meu blog</h1>
</header>
<section class="menu">
<ul>
<li><a href="#"/>Home</a></li>
<li><a href="#"/>Banco de Dados</a></li>
<li><a href="#"/>Programação</a></li>
</ul>
</section>
<section class="content">
@yield('conteudo')
</section>
<script src="jquery-3.0.0.min.js"></script>
<script src="site.js"></script>
</body>
</html>
Agora podemos alterar cada página que usa esse mesmo código HTML, mantendo nelas apenas as tags do Blade e o conteúdo que não se repete. Um exemplo disso é apresentado na Listagem 2.
@extends('principal')
@section('conteudo')
<h2>Título da postagem</h2>
<p> Lorem ipsum dolor sit amet (...) </p>
@stop
Linha 1: nessa linha informamos o nome do arquivo que contém o layout a ser utilizado pela view. No caso, trata-se do arquivo principal.blade.php, criado anteriormente;
Linhas 2 e 5: nessas linhas temos, respectivamente, a abertura e o fechamento da seção correspondente à marcação @yeld(‘conteúdo’), que foi adicionada no arquivo de template. Todo o conteúdo que for inserido nessa seção aparecerá exatamente no local equivalente à essa diretiva na página completa;
Linhas 3 e 4: nesse trecho temos o conteúdo da página propriamente dito, ou seja, aquele que varia em cada view, dependendo da sua função.
Após criar uma rota apontando para essa view, temos como resultado o que ilustra a Figura 1.
Observe que todo o conteúdo da parte branca da página, que neste caso simula uma postagem de um blog, foi carregado dinamicamente da view, enquanto o cabeçalho e o menu estão fixos no template.
Melhorando a solução: Criando mais de uma seção
Na etapa anterior vimos como criar apenas uma seção na nossa página, no entanto, podemos nos deparar com situações em que seja necessário a intercalação entre conteúdo estático e dinâmico em várias partes da página. Para isso será necessário criar mais de uma seção, o que pode ser feito seguindo o exemplo anterior e definindo mais uma seção tanto no arquivo principal do template, cuja versão atualizada pode ser vista na Listagem 3, quanto no arquivo que está herdando ele (Listagem 4).
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="site.css"/>
</head>
<body>
<header>
<h1>Meu blog</h1>
</header>
<section class="menu">
<ul>
<li><a href="#"/>Home</a></li>
<li><a href="#"/>Banco de Dados</a></li>
<li><a href="#"/>Programação</a></li>
</ul>
</section>
<section class="content">
@yield('conteudo')
</section>
<section class="author">
@yield('autor')
</section>
<script src="jquery-3.0.0.min.js"></script>
<script src="site.js"></script>
</body>
</html>Dessa vez, adicionamos mais uma seção na linha 24, onde será carregada a parte da view correspondente às informações do autor do post no blog.
@extends('principal')
@section('conteudo')
<h2>Título da postagem</h2>
<p> Lorem ipsum dolor sit amet (...) </p>
@stop
@section(autor')
<h3>Nome do autor</h3>
<p>Etiam euismod rhoncus egestas (...)</p>
@stop
Note que a sintaxe é a mesma, bastando adicionar as diretivas @section e @stop para demarcar o início e fim de cada seção. O resultado dessas mudanças é apresentado na Figura 2.
A partir desses recursos do framework você poderá criar diversos templates em seu projeto, simplificando o código das views e facilitando sua manutenção.
