Symfony2 : introduction à Twig
Maintenant que nous savons créer une page statique, nous allons voir comment mettre en page notre site afin d’obtenir un design un minimum mis en forme. Pour ce faire, nous allons jeter un oeil au moteur de templates par défaut de Symfony2, à savoir Twig.
Examinons tout d’abord le fichier app/Resources/views/base.html.twig, qui est le layout général de notre application. Celui-ci devrait ressembler à ce qui suit.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
{% block stylesheets %}{% endblock %}
<link rel="shortcut icon" href="{{ asset('favicon.ico') }}" />
</head>
<body>
{% block body %}{% endblock %}
{% block javascripts %}{% endblock %}
</body>
</html>
On remarque à l’intérieur la syntaxe suivante :
{% block … %}{% endblock %}
Il s’agit d’un concept propre à Twig. Un bloc est une portion de code qui pourra être surchargé par la suite. Ainsi, ici, on dispose d’un bloc body vide par défaut. Il nous incombe de le surcharger.
En reprenant l’exemple de notre module de pages statiques, cela consiste à modifier le fichier src/JonathanPetitcolas/StaticBundle/Resources/Pages/mentions-legales.html.twig de la manière suivante :
{% block body %}
<h1>Mentions légales</h1>
<p>Bla bla bla</p>
{% endblock %}
Ainsi, notre bloc body contiendra le dernier contenu qui lui a été assigné.
Si vous rechargez votre page et que vous examinez la source, vous vous apercevrez bien vite que notre layout n’est pas pris en compte. Et pour cause : il faut indiquer à Twig que nous nous en servons. Comment ? Grâce à l’héritage ! Tout comme la programmation orientée objet, l’héritage de templates permet de surcharger certains blocs par d’autres.
Ajoutez donc la ligne suivante au début de votre vue :
{% extends '::base.html.twig' %}
A présent, si vous rechargez votre page, vous aurez le layout complet de votre application.
Une autre fonctionnalité utile de Twig est l’inclusion d’autres templates Twig. Cela permet, outre de simplifier et d’ordonner de manière plus simple votre code, de réutiliser certains blocs qui se répètent d’une page à l’autre d’une manière centralisée. Par exemple, pour gérer l’affichage d’un bloc Auteur sur toutes vos pages.
L’inclusion se réalise grâce à l’ordre Twig include. Voici à titre de support un exemple de layout possible pour ce blog :
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>{% block title %}Jonathan Petitcolas - Développeur Symfony2, JQuery, HbbTV{% endblock %}</title>
<meta name="keywords" content="{% block keywords %}Jonathan Petitcolas Symfony Symfony2 JQuery MooTools HbbTV développeur développement paris formation formateur SUPINFO{% endblock %}" />
<meta name="description" content="{% block description %}Blog personnel de Jonathan Petitcolas, développeur Symfony, JQuery et HbbTV. Retrouvez toute l'actualité du développement Web.{% endblock %}" />
<link href="/css/style.css" rel="stylesheet" type="text/css" />
{% block stylesheets %}{% endblock %}
<link rel="shortcut icon" href="{{ asset('favicon.ico') }}" />
</head>
<body>
<div class="page">
{% include "::base.header.html.twig" %}
<div class="middle">
<div class="content">{% block body %}Le contenu demandé est introuvable.{% endblock %}</div>
{% include "::base.sidebar.html.twig" %}
</div>
{% include "::base.footer.html.twig" %}
</div>
{% block javascripts %}{% endblock %}
</body>
</html>
On remarque que l’on spécifie une valeur par défaut pour chacun des blocs, au cas où l’un d’eux ne soit pas surchargé.
A noter également la présence d’un bloc stylesheets, qui nous permettra d’inclure une feuille de style spécifique à une vue en particulier, uniquement en le surchargeant.
Enfin viennent les inclusions des différentes parties de notre layout. On découpe le layout principal en plusieurs sous fichiers uniquement afin de ne pas alourdir la lecture du fichier. Mais aucune obligation de ce point de vue là.
On inclue tout d’abord le template ::base.header.html.twig. Les templates Twig fonctionnent toujours sur la même syntaxe : Bundle:Controller:View. Ici, je ne suis dans aucun bundle ni aucun contrôleur (et pour cause : nous sommes dans le layout général de notre application). D’où le :: au début.
Il ne vous reste plus alors qu’à créer les fichiers correspondant dans app/Resources/views pour que votre layout soit fonctionnel.
<!-- app/Resources/views/base.header.html.twig -->
<div class="header">
<p class="logo"><a href="{{ path('_home') }}">Twanx</a></p>
</div>
Dans ce fichier, on remarque l’appel à une fonction Twig, la fonction path. Celle-ci prend en argument le nom de la route vers laquelle rediriger, ici vers la page d’accueil. En effet, on aura préalablement ajouté dans le fichier de routing app/config/routing_dev.yml (que nous reverrons dans un billet ultérieur) les lignes suivantes :
_home:
pattern: /
defaults: { _controller: JonathanPetitcolasStaticBundle:Default:index, page: "home" }
Ainsi, Symfony se chargera tout seul de mettre le lien / (le pattern) en lui indiquant d’appeler l’action index du contrôlleur Default du bundle JonathanPetitcolasStaticBundle. On lui passe également un argument page valant home. N’hésitez pas à revoir le tuto sur la création de pages statiques pour mieux visualiser le but de ces lignes.
Vos feuilles de styles et autres fichiers de scripts doivent être bien entendu placés dans le dossier web pour être accessibles.
<!-- app/Resources/views/base.sidebar.html.twig -->
<div class="sidebar">
<h6>Menu</h6>
<ul>
<li><a href="{{ path('_home') }}">Home</a></li>
</ul>
</div>
Rien de très intéressant ici. En revanche, découvrons le footer :
<!-- app/Resources/views/base.footer.html.twig -->
<div class="footer">
<p class="center">
Jonathan Petitcolas - © 2010-{{ "now" | date("Y") }} -
<a href="{{ path('jonathanpetitcolas_static_default_index', {'page': 'terms-conditions'}) }}">Terms and conditions</a>
</p>
</div>
Ici, nous avons une fonction Twig qui nous permet d’afficher la date actuelle sous un format particulier. Cela se fait en affichant la date actuelle (« now ») à laquelle sera appliqué un filtre correspondant au format de la date. On affichera uniquement l’année.
Quant au lien, il est un peu plus complexe en apparence. Nous lui indiquons en effet le nom du bundle (jonathanpetitcolas_static), le contrôleur à prendre en compte (default) et l’action vers laquelle rediriger (index). Nous n’oublions pas également de lui passer l’argument page dont le contrôleur a besoin.
Il ne vous reste plus qu’à mettre en place votre charte graphique. N’hésitez pas à consulter l’excellente documentation de Twig pour toute information complémentaire. Elle est remplie d’astuces fort pratiques montrant la puissance de ce moteur. :)
Nous verrons dans le prochain chapitre la mise en place d’un premier modèle pour gérer un article de blog par exemple. Nous nous baserons bien évidemment sur Doctrine2 et sur les générateurs interactifs Symfony2.
Comments
Trackbacks
There are no trackbacks on this entry.
Bonjour,
Merci pour cette super série de tuto qui permet de comprendre comment développer avec Symfony 2. Même si tes explications sont très claires, je ne comprends pas le lien dans le footer :
Que signifie ‘twanx_static_default_index’ ?
Merci en tout cas.
Salut Cayoul,
Effectivement, une erreur de ma part. Je n’ai pas publié la bonne version du billet et il en manque un petit morceau. Je corrige cela dès ce soir. Tu verras, tout sera bien plus clair.
Et en plus, je fais du teasing sans le vouloir avec le projet Twanx, dont nous reparlerons au plus tard en décembre. ^^