Twig – A Super engine template para PHP

Olá pessoal tudo certo?!

Quem nunca se deparou com um projeto no qual teria que trabalhar com renderização HTML? Praticamente todos em algum momento certo? Pois é inevitável a construção de um sistema web PHP sem a interação com o usuário, e com isso surge o grande problema: Como vamos trabalhar as páginas HTML e como podemos utilizar o conceito de template para que nosso sistema fique robusto e com um super visual.

O PHP dispõe de grandes ferramentas para solucionar esse problema, e auxiliar na construção de templates e views para nossos sistemas, e hoje veremos o Twig onde de acordo com a home do site diz:

– “The flexible, fast, and secure template engine for PHP” (Tradução: O flexível, rápido e seguro motor de template para PHP)

Twig é uma ferramenta mantida pela Sensiolabs, empresa por de traz de nada menos que o Symfony. um  dos frameworks mais fantásticos para PHP.

Para que possamos utilizar o componente, primeiros vamos definir nosso projeto, onde ele terá a seguinte estrutura:

  • tutorial_twig
    • view
      • layout.html
      • index.html
    • bootstrap.php
    • index.php

Após temos criado nossa estrutura básica para darmos início ao projeto, devemos acessar pelo terminal a raiz do nosso projeto. Caso você não tenha familiaridade em utilizar o terminal, incentivo que aprenda a utilizar, pois é uma das ferramentas que mais utilizamos em nosso dia a dia, e que facilita e muito nosso trabalho. Ao acessarmos o diretório raiz do projeto devemos instalar o Twig, e para isso iremos utilizar o Composer e caso você não faça a menor ideia do que seja, por favor, pare e estude esta ferramenta, pois ela é a 8ª maravilha do mundo PHP, com o Composer podemos gerenciar as dependências do nosso projeto com uma facilidade descomunal!

Devemos executar o seguinte comando:

Todo o processo de instalação dos pacotes serão realizados de forma automática em nosso projeto.

Após a finalização da instalação nossa estrutura de projeto ficará assim:

  • tutorial_twig
    • vendor
    •  view
      • layout.html
      • index.html
    • composer.json
    • composer.lock
    • bootstrap.php
    • index.php

Agora vamos acessar nosso arquivo bootstrap.php, ele será utilizado para podermos concentrar as estrutura básicas que será compartilhada com nossas páginas.

Com nossa implementação básicas do Twig, agora podemos construir nossa view, vamos acessar nosso arquivo index.php.

Virão como é extremamente fácil, após criarmos nossa configuração básica podemos acessar nosso objeto e chamar o método render, responsável por realizar todo o processo de renderização, e tivemos apenas o trabalho de informa dois valores, sendo eles:

  • index.html
    • Informamos qual arquivo HTML desejamos utilizar.
  • Array
    • Criamos um array chave/valor, onde a chave usaremos em nosso arquivo HTML para indicar qual conteúdo estamos querendo utilizar e onde em nosso arquivo index.html e o valor do array é a informação que será inserida no HTML.

Bom, tendo nossos arquivos php implementados daremos início agora a construção do nosso layout, abra o arquivo layout.html.

Basicamente sua estrutura é HTML puro, sem muitos segredos e o que temos de novo e fora do habitual são as duas linhas de código “{% block content %}” e “{% endblock %}”. O Twig dispõe de um leque de ferramentas para manipular o conteúdo HTML fantásticos, e com essas duas instruções definimos um bloco, e tudo que for inserido dentro desse bloco nas outras páginas como, por exemplo, na index irá ser renderizado dentro deste bloco no layout, isso não é fantástico pois com um único arquivo podemos controlar todo nosso layout da nossa aplicação.

Podemos agora abrir nosso arquivo index.html e implementar o seguinte código:

Como podemos visualizar, não utilizamos uma linha de HTML se quer, apenas instruções Twig. Pois definimos o template, o bloco de conteúdo e o conteúdo em si.

Agora podemos executar nosso teste, basta executar o comando abaixo e em um navegador inserir a URL localhost:8080

E como resultado temos nosso Hello World 🙂

Twig Result

Viram como é simples, com poucos códigos temos uma camada para tratar nossa view!

Bom vocês podem estar pensando “mas isso é muito básico”, bem vamos imaginar que agora queremos uma view de estoque para renderizar uma lista de produtos no grid.

Vamos criar nosso arquivo products.php

Agora devemos criar nosso arquivo products.html

Após executar o projeto, teremos o seguinte resultado.

grid produtosExtremamente simples, com poucas linhas de código podemos montar nossa lista de produtos. Da mesma maneira que passamos um array, podemos fazer uma consulta no banco de dados e exibir com paginador os registros em nosso grid, logicamente o exemplo acima é simples apenas para demonstrar o uso do Twig.

O Twig não dispõe apenas de filtros, mas também com tags, functions, operadores e testes, recomendo fortemente que leia a documentação do Twig, pois ela é rica em exemplos deixando muito claro sua forma de uso.

Bom pessoal, espero que tenham gostado do post, o PHP dispõe de outras engines templates como por exemplo dwoo, Plates, smarty e Blade. Recomendo que caso você desconheça esses nomes de uma olhada, eu particularmente prefiro o Twig, porem é sempre excelente conhecermos outras ferramentas para podermos utilizar a melhor para cada problema encontrado.

Um grande abraço e até a próxima 🙂

 

12 thoughts on “Twig – A Super engine template para PHP”

  1. Cara bom artigo, eu sempre utilizava junto com o silex, nunca tinha implementado ela com o php puro, bom trabalho.
    Até esses dias que resolvi fazer sem o silex e hoje me deparei com o seu post, parabéns novamente.

    1. Olá, Alex Junior.

      Fico muito feliz que tenha apreciado, e de fato o meu foco foi demonstrar a facilidade do uso desse componente, mesmo para quem não esteja utilizando Silex ou Symfony.

      Pois o Twig é uma ótima ferramenta e cumpre com excelência o seu propósito.

      Obrigado pelo seu comentário, e continue acompanhando pois minha meta é sempre trazer novos conteúdos 🙂

  2. Se poderia fazer outros artigos referente ao twig, na forma que você escreveu me clareou bastante, pois estou usando na empresa e to apanhando um pouco com ele.

    1. Olá Junior,

      Fico feliz que o post lhe ajudou, e gostaria muito de poder lhe ajudar com isso gostaria de saber suas dificuldades e tendo essa base podemos analisar o conteúdo de um futuro post 🙂

      Caso se sinta mais a vontade enviando um e-mail, por favor envie para diegod2@msn.com e seguimos com a conversa.

      Agradeço pela atenção.

  3. Boa noite Diego,
    Cara to com um problema pra carregar um bootstrap local de um template que estou usando em um projeto com composer , twig e php.
    ele da error 404 not found e o arquivo está na raiz do projeto;

    Agradeço desde já

    1. Olá, Antonio.

      Preciso de maiores detalhes do seu projeto, pois sem saber por exemplo a estrutura de diretórios fica complicado.

      Porém, vou tentar lhe ajudar da melhor maneira possível maneira.

      Todo o conteúdo publico da sua app tem que estar contido em um diretório acessível publicamente, onde normalmente se chama public, porem em seu caso todos esses arquivos estão na raiz do seu projeto.

      Como seus arquivos de views estão na raiz do projeto, todo arquivo CSS, JS e imagens devem ser armazenados na raiz.

      Caso seus arquivo index.php encontre-se em um diretório como por exemplo “public”, todos seus arquivos CSS, JS ou imagens devem estar dentro desse diretório.

      Em resumo, todo conteúdo publico deve estar sempre juntos no mesmo diretório, sendo raiz ou não, para que você possa consumi-lo sem maiores problemas, e para consumi-los, você deve apontar o path a partir do diretório onde a view se encontra, pois é deste ponto que a sua app irá chama-lo.

      Espero que tenha lhe ajudado.

      Abraços 🙂

  4. Kra, se puder me responder ficarei enormemente grato! trabalho a muito tempo com PHP mas só agora decidir estruturar meus projetos no padrão mvc e escolhi o twig com engine de templates….minha dúvida é a seguinte, todo argumento de quero passar para a view deve ficar “dentro” de $this->renderTemplate(‘index.html’, $argumentos) ?

    Exemplo, se eu tenho : $titulo = ‘Bem vindos’; devo passar:
    $this->renderTemplate(‘index.html’, ‘frase’=>$titulo)?

    Se sim, essa é a única forma de passar os argumentos para a view??

    1. Olá, Weslley Dutra.

      Para retorna sua view, é utilizdo o método render(), onde passamos nossos dois parâmetros sendo o nome do arquivo de view e caso desejado o conteúdo a ser incluso em sua estrutura, como por exemplo:

      $twig->render(‘shop_car.html’, [‘titlePage’ => ‘Carrinho de compras’]);

      Como observado acima, passamos um array com nosso conteúdo, nada impede que no decorrer do seu código você vá mondanto esse array com informações diversas, porem, para que seja renderizado na view pelo Twig você deve informar ao motor de renderização, conforme demonstrado acima.

      Mas essa não é a única maneira de inserir conteúdo em sua view html.

      Você pode também acessar constantes e para isso não necessáriamente você deve passar como parâmetro, podemos consumir diretamente no arquivo .html, veja um exemplo abaixo:

      Suponhamos que em nosso arquivo boostrap.php seja definido a constante:
      define(‘SYSTEM_NAME’, ‘Nome do Sistema’);

      Acessando o arquivo index.html por exemplo, podemos acessar o valor definido na constante, veja abaixo como realizar esse procedimento.

      {{constant(‘SYSTEM_NAME’)}}

      Com isso você inseriu o valor em sua view, no qual não foi definido em seus arquivos de controller ou action, como fizemos no arquivo index.php.

      Vale salientar que valores assim devem ser usados aproveitando o máximo do seu propósito, como bem fizemos em definir o nome do sistema na constatne, pois é uma informação que será utilziada em todo header de todas as páginas do sistema.

      Claro que nada impede de utilziar em páginas exclusivas, porem, devemos utilziar com parcimônia para que assim não fique uma lsita infindável de constatens e com isso nos percamos nesse mar de informação.

      Há outras maneiras de incluir informação sem ter que passar diretamente pelo método render, onde podemos utilizar:

      O recurso ‘import’ (https://twig.symfony.com/doc/2.x/tags/import.html)
      O Recurso include (https://twig.symfony.com/doc/2.x/tags/include.html)

      Ambos tem como propósido distintiso de consumir arquivos HTML e inserí-los em nossa view desesjada, imagine um paginador, é um recurso comum em páginas de pequisa, podemos criar uma partial html que contenha sua estrutura e com isso inserir conforme desejado em nossas páginas de pesquisa.

      O twig é uma ferramenta muito versátil, por isso gosto bastante dela.

      Espero ter consesguido ajudar em sua dúvida, caso contrário, por favor deixe um novo comentário, explane com mais detalhes seus objetivos e com isso tentarei lhe ajudar conforme possível.

      Como última dica, recomendo que utilize a versão 2.0 do Twig que está sensacional.

      Grande abraço e sucesso nos projetos 🙂

      1. OBrigado pela ajuda! conseguir estruturar meu próprio framework (que abuso! haha).

        E gostaria de sua opinião…vou iniciar um projeto grande (grande mesmo) e gostaria de utilizar esse framework para produção.

        Vou deixar disponível no github e compartilhar aqui. 🙂

        1. Olá, Weslley!

          Fico muito feliz que o post lhe tenha sido útil!

          Sim o twig cabe em qualquer projeto de qualquer porte fique tranquilo, em relação ao seu comentário em ter criado seu framework acho muito legal como estudo, porém, para produção não acredito que seja a melhor opção, tendo em vista que outros frameworks e/ou micro frameworks atendem com excelência essa necessidade, tendo por de trás uma equipe enorme para mantê-lo (correção de bugs e novas implementações).

          Deixe sim o link aqui, será um prazer ver seu projeto 🙂

          Grande abraço e sucesso em seus projetos!

  5. Olá Diego,

    Qual procedimento devemos tomar com o twig para trabalhar com os dados do header .

    Exempo :

    titulo,
    author,
    metas

    etc.

    1. Olá, Ademir,

      Acredito que a melhor abordagem é utilizando partials, que nada mais são do que fragmentos de HTML que podem ser utilizadas em qualquer lugar do projeto.

      E para importar você pode utilizar o ‘inlcude’ (https://twig.symfony.com/doc/2.x/tags/include.html) para adicionar esses fragmentos HTML, o include permite passar parâmetros para as partials.

      Espero ter conseguido lhe auxiliar nessa sua dúvida.

      Sucesso em seus projetos.

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *