Les templates, layout et helpers dans Symfony

Dans ce chapitre, nous verrons la dernière partie du MVC Symfony: Les Vues.
Nous allons voir brièvement comment fonctionne les templates, qu'est-ce que le layout et comment utiliser des helpers dans nos vues.

• 

  • Plan du chapitre:

  • Les templates dans Symfony
  • Le layout de l'application
  • Les helpers dans les templates

Les templates dans Symfony

Symfony n'utilise pas de moteur de templates par défaut comme Smarty.
Les fichiers templates sont en fait des fichiers PHP où la présence de code PHP doit être limitée au maximum.
Les templates doivent contenir tous les bouts de code HTML de votre site. En gros, il est fortement déconseillé de générer du HTML dans vos classes modèles ou actions.
L'objectif étant de bien séparer le code HTML et PHP afin de pouvoir maintenir le site plus facilement.
Si vous avez par exemple un WebDesigner qui travaille sur le site, il sera plus facile pour lui de modifier le design en n'éditant que les fichiers templates qui contiennent le HTML et du PHP basique (boucles, tests, affichages ...).

Organisation des templates

Les templates sont organisés comme les modules. Ils sont situés dans les repertoires templates/ de chaque module.
Par exemple, le template par defaut du module main, indexSuccess.php, est situé dans le répertoire apps/frontend/modules/main/templates/

Nommage des templates

Les templates doivent être nommés suivant les conventions imposées par Symfony.
Il existe deux types de templates:

• Les templates associés à une action. Exemple indexSucces.php pour l'action index du module main.


• Les templates "partiels", précédés par un underscore '_'. Exemple _top5Bureau.php

Nous reviendrons sur les templates "partiels" plus tard.

Maintenant que vous connaissez ces conventions, passons au contenu des templates.
Le plus simple pour comprendre est de prendre un exemple: Le fameux Hello World !

Afficher un Hello World dans un template

Afin de vérifier que votre module main fonctionne bien, modifiez votre template indexSuccess.php en ajoutant le "Hello World" et rafraichissez.



Rien de compliqué. Maintenant notre objectif va être d'afficher dans le template une variable définie dans notre classe actions.

Pour passer une variable au template depuis un fichier actions.class.php, il suffit de déclarer la variable comme une propriété de la classe:

Code php:

public function executeIndex(sfWebRequest $request) { $this->helloWorld = "Hello World !!"; }

Puis la variable sera accessible dans le template de la façon suivante:

Code php:

<h2><?php echo $helloWorld; ?></h2>

Il suffit de supprimer le $this dans le template. Avec cette méthode, vous pouvez passer n'importe quel type de variable: Texte, entier, tableaux, objet, liste d'objets ...

Les composants et templates partiels

Les templates peuvent être utilisés séparément d'une action d'un module.
Effectivement, si vous souhaitez par exemple afficher une partie de design répétée plusieurs fois sur le site, vous pouvez créer un template uniquement pour cette petite partie et l'appeler comme template partiel où vous le souhaitez.

Pour appeler un template partiel, vous devrez utiliser la fonction suivante:

Code php:

<?php include_partial('module/nomtemplate') ?>

Si votre template partiel peut être classé dans un module, alors il est conseillé de le mettre dans le répertoire templates/ du module.

S'il ne correspond à aucun module, vous pouvez le mettre aux côtés du layout dans le répertoire apps/frontend/templates/ et appeler ce dernier ainsi:

Code php:

<?php include_partial('global/nomtemplate') ?>

Nous avons donc vu 2 types de templates:

• Les templates associés à des actions, nommés par convention de la sorte: nomactionSuccess.php


• Les templates partiels, indépendants, ils sont précédés par un underscore: _monpartiel.php

Il existe un autre type de templates, un mix entre les deux précédents: Les composants.
Il s'agit d'une portion de template couplée à un composant. (Similaire aux actions mais leur appel est provoqué par le site et non pas par l'appel d'une URL).

Ce type de template est utile pour répéter une partie dynamique du site que l'on va répeter à plusieurs endroits. Des widgets par exemple.
Dans notre projet, nous allons utiliser des composants pour les Top 5 des bureaux. (Je reviendrai sur les composants plus tard).

Le layout de l'application

Chaque application (frontend et backend) disposent d'un template général que l'on appelle layout.
Ce dernier est situé dans le répertoire templates/ du dossier de votre application.
Exemple: apps/frontend/templates/layout.php

Qu'est-ce que le layout ?

Dans un site web, vous aurez souvent des parties figées, quelque soit la page où vous trouvez:

• Header


• Menu


• Colonne ...

Le layout va permettre de créer toute la structure de vos pages web ainsi que les zones statiques qui se répètent dans toutes les pages.



Le layout va permettre de créer l'architecture HTML et les zones fixes de toutes les pages et afficher dans une zone définie la partie dynamique.

Code html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <?php include_http_metas() ?> <?php include_metas() ?> <?php include_title() ?> <link rel="shortcut icon" href="/favicon.ico" /> </head> <body> <?php echo $sf_content ?> </body> </html>

Par défaut, la structure du layout est très basique. Vous pouvez toutefois voir que des données sont chargées dynamiquement comme les Metas, le titre etc.
La variable $sf_content contient le résultat de la partie dynamique.

Une autre particularité du layout: Le chargement des CSS et Javascript se fait dynamiquement. Vous pouvez les inclure en dur dans le layout, mais mieux vaut utiliser le fichier de configuration view.yml ou les helpers pour charger Javascript et CSS.

Le fichier de configuration view.yml

Ouvrez le fichier apps/frontend/config/view.yml

Code:

default: http_metas: content-type: text/html metas: #title: symfony project #description: symfony project #keywords: symfony, project #language: en #robots: index, follow stylesheets: [main.css] javascripts: [] has_layout: on layout: layout

Voici ce que vous devriez avoir par défaut.
Vous pouvez spécifier un titre en dur par défaut, les metas description, keywords etc.
Pour inclure vos fichiers CSS sur toutes les pages, il faut rajouter le nom de votre CSS dans l'instruction stylesheets et les JS dans javascripts.
Exemple:

Code:

stylesheets: [main.css, styles.css]

Ou de manière plus avancée:

Code:

stylesheets: [main, styles.css, print.css: { media: print }]

Pratique pour spécifier quel type de CSS il s'agit (print, screen ...). Il est aussi possible d'omettre l'extension .css du fichier à inclure (Mais je ne conseille pas).

Pour le javascript, même chose:

Code:

javascripts: [monScript.js]

Vous l'aurez remarqué, nous ne spécifions pas de chemin. En effet, Symfony prévoit des répertoires pour inclure automatiquement les fichiers: web/css/ et web/js/
Uploadez tous vos fichiers CSS et JS dans leur répertoires respectifs.

Code:

default: http_metas: content-type: text/html metas: title: Watch My Desk description: Watch My Desk, Show off your geekstation ! keywords: watch my desk, desk, symfony, zend framework, tutorial, bureau, geek language: en robots: noindex, nofollow stylesheets: [main.css] javascripts: [] has_layout: on layout: layout

Voilà mon fichier de configuration une fois quelques modifs faites. Je n'ai pas encore de fichier Javascript, et j'utiliserai le fichier main.css pour le style.
J'ai défini le meta robots à noindex et nofollow pour ne pas que Google et autres moteurs de recherche ne me référence pour le moment étant en période de développement. Il faudra bien penser à remettre le index, follow ensuite !

Une fois un fichier de configuration modifié, supprimez le cache

symfony cc

Nous modifierons l'architecture du layout dans un prochain chapitre (intégration du design).

Les helpers dans les templates

Symfony fournit un grand nombre de fonctions permettant de faciliter le développement de nos applications web: Les helpers.

Ces helpers sont en fait des librairies (plus d'une vingtaine) de fonctions que l'on charge dans nos templates.

Comment utiliser un helper ?

Pour utiliser un helper, il faut charger sa librairie en haut du template où l'on souhaite l'utiliser:

Code php:

<?php use_helper('Text') ?>

Dans ce cas, nous allons charger la librairie des helpers de type Text.

Voir la liste des librairies d'helpers

Quelques helpers utiles

Le premier helper que vous devrez absolument utiliser est url_for qui permet de générer l'URL de chaque lien. Cette fonction permettra de choisir les bonnes routes que vous avez configuré dans le fichier routing.yml...
Dès que vous aurez un lien interne à mettre dans un template, utilisez url_for.

Exemple:

Code html:

<a href="<?php echo url_for('@homepage'); ?>">Accueil du site</a>

L'appel de @hompage permettra de générer le lien vers la page d'accueil du site.

Code html:

<a href="<?php echo url_for('bureau/list'); ?>">Liste des bureaux</a>

Vous l'aurez compris, l'helper va générer la route sous forme d'URL pour l'action list du module bureau.

Il existe aussi pas mal d'helpers pour les formulaires, pratiques pour recharger les données à partir d'un objet par exemple.
Pour les utiliser, il faut charger le helper Form ou Object.

Très utile aussi si le site a pour vocation d'être multi lingue, les helpers i18n.

N'hésitez pas à jeter un coup d'oeil à la documentation officielle de Symfony pour en savoir plus. Nous utiliserons des helpers lors du développement du site, donc patience :)