ARTIGOS

Twig: O template engine

Conheça um dos template engines mais queridos pela comunidade PHP

Twig é uma engine de templates PHP baseado no modelo MVC, os criadores do Twig também são responsáveis pelo Symfony framework. O objetivo do Twig é otimizar o código-fonte tornando-o visualmente mais elegante, em outras palavras o Twig procura separar o código-fonte do HTML. Seguindo o modelo MVC para criar separações claras entre Model, Controller da View.

## Instalação

Pré-requisitos:

* Composer
* PHP 7.0 ou superior

Para instalar o Twig basta executar esta linha do comando no diretório desejado:

```bash
$ composer require "twig/twig:^2.0"
```

O composer será responsável por criar toda a estrutura necessária para o Twig, quando o composer terminar de instalar os pacotes também termina a instalação.

## Uso básico

O uso mais simples do Twig é criar um vetor de de substituições e no momento da renderização substituir as variáveis por valores escolhidos, veja o exemplo:

```php
<?php

// Carrega o autoload do composer
require_once 'vendor/autoload.php';

// Cria o template
$loader = new Twig_Loader_Array(array(
    'index' => 'Hello {{ name }}!',
));

// Cria o ambiente
$twig = new Twig_Environment($loader);

// Renderiza e joga o conteúdo na tela
echo $twig->render('index', array('name' => 'Fabien'));
```

Embora essa não seja a utilização mais recomendada, podemos observar como funciona a substituição  de variáveis. Dentro do HTML precisamos ter marcadores de inicio e fim de uma substituição, no exemplo acima esses caracteres são: `{{` e `}}`.

Baseado nos marcadores é que o Twig é capaz de substituir e criar controles dentro dos templates. Um exemplo mais interessante pode ser visto ao carregar um arquivo separado com todo o HTML da página, e o Twig sendo responsável por substituir os valores.

No exemplo abaixo vemos um exemplo onde o arquivo PHP carrega um template html, sendo que, esse template já deve possuir os blocos de substituição.

**PHP**

```php
<?php

// Carregando o autoload do composer
require_once 'vendor/autoload.php';

// Carregando a pasta de templates
$loader = new Twig_Loader_Filesystem('templates');

// Carregando o ambiente
$twig   = new Twig_Environment($loader);

// Renderizando e realizando as substituições
// onde a.html é o template escolhido
// e o vetor contém as substituições
echo $twig->render(
	'a.html', array(
		'template' => 'Twig'
		)
	);
```

**HTML**

```html
<!DOCTYPE html>
<html>
<head>
	<title>Meu template</title>
</head>
<body>
	Estou usando o template {{ template }}.
</body>
</html>
```
Obviamente que o HTML final de uma aplicação será bem mais trabalhado e contendo estilos. O resultado deste exemplo será uma página em branco com a seguinte mensagem:

```
Estou usando o template Twig.
```

Este exemplo consegue demonstrar o objetivo do Twig que é, deixar o PHP se preocupando apenas com as regras de negócio buscando os dados do banco de dados e toda a interface deve estar nos templates.

O Twig vai muito mais longe do que apenas realizar substituições de variáveis, ele pode realizar loops, operações matemáticas e lógicas, realizar filtros e muito mais. [Referência completa de funcionalidades](https://twig.symfony.com/doc/2.x/).

## Usando IFs com o Twig

O exemplo anterior demonstrou a funcionalidade mais simples do Twig, agora vamos ver como utilizar um IF dentro de um template. O uso é parecido com o da substituição de variáveis, no entanto o blocos lógicos usam a seguinte sintaxe  `{%` e `%}` dentro das tags de abertura e fechamento devemos colocar a nossa condição. Exemplo:
```html
...html

{% if variavel == valor %}
	<h1> Você entrou no if</h1>
{% endif %}

...html
```

E dentro do IF pode se usar operadores lógicos matemáticos, entre outros todos devidamente documentados. Melhorando um pouco a logica do nosso primeiro exemplo, adicionando um IF ele ficaria assim:

**PHP** continua o mesmo

```php
<?php

// Carregando o autoload do composer
require_once 'vendor/autoload.php';

// Carregando a pasta de templates
$loader = new Twig_Loader_Filesystem('templates');

// Carregando o ambiente
$twig   = new Twig_Environment($loader);

// Renderizando e realizando as substituições
// onde a.html é o template escolhido
// e o vetor contém as substituições
echo $twig->render(
	'a.html', array(
		'template' => 'Twig'
		)
	);
```
**HTML**

```html
<!DOCTYPE html>
<html>
<head>
	<title>Meu template</title>
</head>
<body>
	Estou usando o template {{ template }}.

{% if template == 'Twig' %}
	<h1> Você escolheu uma ótima ferramenta.</h1>
	{% endif %}

</body>
</html>	
```
A partir de agora quando a variável template for igual a Twig, a tag H1 será adicionada na tela da aplicação.

## Sintaxe do Twig

O Twig é rígido com sua sintaxe, ao substituir uma variável ou realizar um calculo matemático é necessário respeitar exatamente a quantidade de espaços esperados, você pode conferir a documentação dos [padrões de código do twig aqui](https://twig.symfony.com/doc/2.x/coding_standards.html).

Uma opção interessante é customizar os blocos de sintaxe do twig, isso é permitido pela clase `Twig_Lexer`, ela permite que o desenvolvedor defina seus próprios blocks. Veja o exemplo:

```php
<?php

// Carregando o autoload do composer
require_once 'vendor/autoload.php';

// Carregando a pasta de templates
$loader = new Twig_Loader_Filesystem('templates');

// Carregando o ambiente
$twig   = new Twig_Environment($loader);

// Definindo a sintaxe 
$lexer = new Twig_Lexer($twig, array(
	'tag_block' => array('@@@', '@@@'),
	'tag_variable' => array(':D', 'D:'),
	)
);

// Setando a sintaxe criada
$twig->setLexer($lexer);

// Renderizando e realizando as substituições
// onde a.html é o template escolhido
// e o vetor contém as substituições
echo $twig->render(
	'a.html', array(
		'template' => 'Twig'
		)
	);
```

Na classe `Twig_Lexer` pode-se definir as tags de bloco e variável, o vetor recebe dois valores o de abertura e o de fechamento das tags. Você pode observar que para os blocos a abertura e fechamento ficaram iguais, isso funciona normalmente. Veja como o HTML:

```html
<!DOCTYPE html>
<html>
<head>
	<title>Meu template</title>
</head>
<body>
	Estou usando o template :D template D:.

@@@ if template == 'Twig' @@@
	<h1> Você escolheu uma ótima ferramenta.</h1>
	@@@ endif @@@

</body>
</html>
```

## Usando loops com Twig

Da mesma maneira que usamos o IF podemos usar o FOR para percorrer um grupo de registros.

```php
<?php

// Carregando o autoload do composer
require_once 'vendor/autoload.php';

// Carregando a pasta de templates
$loader = new Twig_Loader_Filesystem('templates');

// Carregando o ambiente
$twig   = new Twig_Environment($loader);

// Renderizando e realizando as substituições
// onde a.html é o template escolhido
// e o vetor contém as substituições
echo $twig->render(
	'a.html', array(
		'membros' => array(
				array('nome' => 'Artour Babaev', 'posicao' => '1'),
				array('nome' => 'Sumail Hassan', 'posicao' => '2'),
				array('nome' => 'Gustav Magnusson', 'posicao' => '3'),
				array('nome' => 'Andreas Nielsen', 'posicao' => '4'),
				array('nome' => 'Tal Aizik', 'posicao' => '5'),
			)
		)
	);
```

Observe que no exemplo acima a posição `membros` foi definida vetor contendo nomes e posições. Esse vetor pode ser percorrido no HTML conforme pode ser visto abaixo:

```HTML
<!DOCTYPE html>
<html>
<head>
	<title>Meu template</title>
</head>
<body>

<h1> Os membros do meu time são:</h1>

{% for membro in membros %}
        <h3>{{ loop.index }} - {{ membro.nome }} posição: {{ membro.posicao }}</h3>
    {% endfor %}

</body>
</html>
```

A estrutura de loop do Twig oferece ainda algumas outras opções que podem ser usadas quando os registros são percorridos:

ARTIGOS

Twig: O template engine

Conheça um dos template engines mais queridos pela comunidade PHP

COMENTE SOBRE