{"id":354,"date":"2014-02-25T23:05:25","date_gmt":"2014-02-25T22:05:25","guid":{"rendered":"http:\/\/louis.hatier.me\/blog\/?p=354"},"modified":"2015-08-12T17:35:13","modified_gmt":"2015-08-12T16:35:13","slug":"twig-introduction-au-systeme-template-symfony","status":"publish","type":"post","link":"https:\/\/louis.hatier.me\/blog\/twig-introduction-au-systeme-template-symfony\/","title":{"rendered":"Twig : introduction au syst\u00e8me de template de Symfony2"},"content":{"rendered":"

\"Logo<\/a>Twig est un syst\u00e8me de template pour PHP cr\u00e9\u00e9 par Fabien Potencier<\/a>.
\nIl est par d\u00e9faut int\u00e9gr\u00e9 au Framework MVC Symfony2, mais il est possible de l\u2019utiliser \u00e0 part, avec un autre framework, ou avec une simple page PHP.<\/p>\n

Vous pouvez l\u2019installer avec Composer<\/a> ou le t\u00e9l\u00e9charger directement depuis le repository sur GitHub<\/a>.<\/p>\n

On va faire ici un exemple simple d\u2019utilisation avec un fichier PHP vide.<\/p>\n

<\/p>\n

Si vous n\u2019utilisez pas Composer, d\u00e9poser la librairie o\u00f9 vous voulez, et chargez la comme ceci :<\/p>\n

require_once '\/usr\/share\/php\/Twig\/Autoloader.php';\r\nTwig_Autoloader::register();\r\n<\/code><\/pre>\n
Les classes sont maintenant charg\u00e9es et utilisables, on va commencer par pr\u00e9ciser un dossier de templates dans lequel seront stock\u00e9s nos fichiers HTML, et un tableau d\u2019options indiquant de ne pas \u00e9chapper automatiquement les variables \u00e0 l\u2019affichage.<\/p>\n
$loader = new Twig_Loader_Filesystem('\/var\/www\/lab\/twig\/templates');\r\n$twig = new Twig_Environment(\r\n    $loader,\r\n    array(\r\n        'autoescape' => false\r\n    )\r\n);\r\n<\/code><\/pre>\n
Voici un exemple des quelques fonctionnalit\u00e9s de Twig illustr\u00e9es avec ces 3 fichiers :<\/p>\n
index.php<\/strong><\/p>\n
require_once '\/usr\/share\/php\/Twig\/Autoloader.php';\r\nTwig_Autoloader::register();\r\n\r\n$loader = new Twig_Loader_Filesystem('\/var\/www\/lab\/twig\/templates');\r\n$twig = new Twig_Environment(\r\n    $loader,\r\n    array(\r\n        'autoescape' => false\r\n    )\r\n);\r\n\r\n$users = array(\r\n    array(\r\n        'name' => 'Statler',\r\n        'age'  => 65\r\n    ),\r\n    array(\r\n        'name' => 'Waldorf',\r\n        'age'  => 68\r\n    )\r\n);\r\n\r\n$comment = new stdClass();\r\n$comment->content = 'Lorem ipsum';\r\n$comment->date = '25\/02\/2014';\r\n\r\n$template = $twig->loadTemplate('layout.html');\r\n$data = array(\r\n    'message' => 'Hello <strong>World<\/strong>!',\r\n    'users'   => $users,\r\n    'version' => 3.2,\r\n    'comment' => $comment\r\n);\r\n\r\necho $template->render($data);\r\n<\/code><\/pre>\n
On envoie au template layout.html<\/em> diff\u00e9rent types de variables et on affiche le rendu.<\/p>\n
templates\/layout.html<\/strong><\/p>\n
<h1>Home<\/h1>\r\nMessage : {{ message }}\r\nMessage : {{ message|e }}\r\n\r\n{% for user in users %}\r\n<div>\r\n    <span class=\"name\">{{ user.name }}<\/span>\r\n    <span class=\"age\">{{ user.age }}<\/span>\r\n<\/div>\r\n{% else %}\r\n<div>No result<\/div>\r\n{% endfor %}\r\n\r\n<h2>Comment<\/h2>\r\n{{ comment.content }}\r\n\r\n{{ include('footer.html') }}\r\n<\/code><\/pre>\n
On affiche 2 fois la variable message, la deuxi\u00e8me est \u00e9chapp\u00e9e tr\u00e8s simplement avec la syntaxe |e<\/code> et n\u2019affichera donc pas \u00ab\u00a0World\u00a0\u00bb en gras.<\/p>\n
Ensuite on boucle sur les utilisateurs pour afficher le nom et l\u2019age de l\u2019utilisateur.
\nLe else<\/code> du for<\/code> sert dans le cas d\u2019un tableau vide, ce qui est tr\u00e8s utile et \u00e9vite d\u2019englober le for<\/code> d\u2019un if\/else<\/em> qui teste le total du tableau.<\/p>\n
Puis on affiche le contenu du commentaire. Notez ici que la syntaxe est la m\u00eame avec un tableau ou un objet, on utilise le point pour acc\u00e9der \u00e0 une propri\u00e9t\u00e9 ou \u00e0 un index.<\/p>\n
Pour finir on inclue le fichier footer.html<\/em><\/p>\n
templates\/footer.html<\/strong><\/p>\n
<footer>MySite v.{{ version }}<\/footer>\r\n<\/code><\/pre>\n
Ici on affiche simplement la version du site, le fichier footer.html<\/em> h\u00e9rite bien des variables envoy\u00e9es au template layout.html<\/em>.<\/p>\n
Plus d\u2019informations sur le site officiel<\/a>.<\/p>\n
\"Share<\/a>