Blade Engine: Utilizando templates PHP no Laravel

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>

Listagem 1. Arquivo de template utilizando o Blade

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

Listagem 2. Arquivo da view apenas com conte�do din�mico

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.

Figura 1. Exemplo de p�gina usando o template

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>

Listagem 3. Arquivo principal de template utilizando mais de uma seç�o

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

Listagem 4. Arquivo da view com duas seç�es de conte�do din�mico

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.

Figura 2. Exemplo de p�gina usando o template com mais de uma seç�o

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.

Blade Engine: Utilizando templates no Laravel

Neste artigo conheceremos o Blade, engine de templates do framework Laravel que possibilita o reuso de código e simplifica a inserção de trechos PHP em páginas HTML com uma sintaxe mais limpa.

Problema: Repetiç�o de c�digo

Soluç�o: Utilizaç�o de templates

Melhorando a soluç�o: Criando mais de uma seç�o

Artigos relacionados