Twig: genera tus plantillas en php

A raíz de los experimentos con Symfony toca continuar y hablar de Twig. ¿Qué es Twig? Se trata de un motor de plantillas libre para el lenguaje PHP. Si has trabajado alguna vez con JSP o con ASP no te resultará raro.

Synfony incluye dentro del framework este motor (también te lo puedes bajar aparte) , que nos ofrece ciertas comodidades respecto a hacer la plantilla en php  pelo. La primera consiste en poder pasar variables las plantillas, con objeto de que estas sean mostradas en pantalla. Las variables pueden tener atributos o elementos en ellas a los cuales puedes acceder también, utilizando el punto (.) o el subíndice ([]) para el caso de un array. También permite realizar iteraciones si la varible es una colección (como un array) o utilizar el condicional if. Con un ejemplo ser verá más claro:

/*PHP tradicional*/
<h1><?php echo strtoupper($title) ?></h1>
<ul>
<?php foreach($collection as $item){ ?>
<li>Nombre:<a href="<?php echo $item->getUrl();?>"> <?php $item->getName();?></a></li>
<?php }  ?>
</ul> 

/*TWIG*/
<h1>{{ title|upper }}</h1>
<ul>
{% for item in collection %}
<li>
Nombre: <a href="{{item.url}}">{{item.nombre}}</a>
</li>
{% endfor %}
</ul>

¿Cómodo? Desde luego, una vez te has acostumbrado. Pero no es lo único que permite Twig, porque su verdadera potencia se encuentra en la herencia entre plantillas. Esto nos permite crear un modelo de plantilla base que contenga todos los elementos comunes del sitio y definir los bloques que las plantillas descendientes pueden sustituir. Imaginemos esta plantilla base:

<!DOCTYPE html>
<html>
    <head>
        {% block head %}
            <link rel="stylesheet" href="stilos.css" />            
        {% endblock %}
    </head>
    <body>
        <div id="content">
          {% block content %}{% endblock %}
        </div>
    </body>
</html>

Muy bien, ahora en las plantillas hija nos basta usar las etiquetas block para insertar el código que será distinto:

{% extends "base.html" %}

{% block head %}
    {{ parent() }}
    <script type="text/javascript" src="jquery.min.191.js"></script>
{% endblock %}

{% block content %}
    <h1>Índice</h1>
    <p>
        Hola mundo!
    </p>
{% endblock %}

Productivo ¿no? Pues no es todo, Twig incluye autoescape de html en las variables para prevenir ataques XSS. En el primer ejemplo ves como al lado de la variable usé upper, eso es un filtro. Existen múltiples filtros que puedes consultar en la documentación oficial de TWIG, al igual que también varias funciones y las etiquetas propias de Twig con varias funcionalidades.

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s