Mise en place
du moteur de tempate Twig.
A. Prendre en main Twig
Téléchargez le projet exemple utilisant Twig et
composer
Twig est un moteur de template, tout comme PHP mais
d’intégration plus simple, qui va vous permettre de décomposer
vos vues en plusieurs morceaux et permet d’éviter de mélanger
le code PHP au code HTML.
De plus vous aurez la possibilité de créer des blocs
réutilisables dans différentes vues, adieu la duplication de
code HTML. La documentation complète de Twig se trouve ici https://twig.symfony.com/doc/3.x/.
Cela vous permettra de prendre en main la syntaxe et de
comprendre comment fractionner vos vues.
- Commencez par « ouvrir » l’application web (exemple donné
en lien) depuis votre navigateur via l’url de serveur web
(le vôtre ou celui de l’IUT). Essayez de remplir le
formulaire correctement puis incorrectement. Constatez
l’affichage des messages d’erreur.
- Modifiez le formulaire pour ajouter un champ email
et modifiez le contrôleur ainsi que le template pour prendre
en compte ce nouveau champ.
- Le formulaire reste affiché même si les champs sont
correctement remplis. Corrigez ce comportement en utilisant
les conditions Twig pour ne plus afficher le formulaire s’il
n’y a pas d’erreur et que la propriété « data » existe dans
le template.
- Actuellement, les deux templates (erreur.html et
vuephp1.html) sont structurés de la même manière au niveau
HTML. On se retrouve donc avec du code HTML dupliqué pour
chacune de nos vues. En utilisant l’héritage de template et
les balises « block » de Twig (https://twig.symfony.com/doc/3.x/templates.html#template-inheritance),
créez un template principal qui reprendra la structure HTML
commune à toutes les vues et qui contiendra des blocs qui
pourront être surchargés dans les templates enfants.
- Adaptez erreur.html et vuephp1.html pour qu’ils héritent
de votre template principal et surchargez les blocs que vous
avez créés dans le template parent.
B. Appliquer Twig à votre projet
1. Installation de Composer et TWIG
Si cela n’est pas déjà fait, vous devez intégrer Composer à
votre projet (https://getcomposer.org/doc/00-intro.md#locally)
Version courte : En cmd, faites curl -sS
https://getcomposer.org/installer | php.
Le fichier obtenu est composer.phar. A vous de le
modifier en un fichier nommé composer pour vous
simplifier la vie?
Installez Twig via la commande composer appropriée composer require
"twig/twig:^3.0" (dans votre cas, cela peut-être
composer.phar ou bin/composer)
2. Utilisation de TWIG dans votre projet
Une fois Twig installé, vous devez l’importer dans votre
projet et indiquer comment seront chargés vos templates (https://twig.symfony.com/doc/3.x/api.html#basics).
Pour plus de simplicité, utilisez le loader par fichiers
(\Twig\Loader\FilesystemLoader). Il s’agit du loader utilisé
dans le projet exemple dans le fichier index.php). Indiquez le
chemin de vos templates ainsi qu’un dossier pour mettre vos
templates en cache.
- Commencez par créer un ou plusieurs templates principaux.
Ce ou ces templates contiendront la structure HTML de vos
pages et vos autres templates pourront en hériter et
surcharger les différents blocs. Si votre application
possède un système d’authentification, vous pouvez par
exemple avoir un template principal pour cette partie qui
sera hérité par un template permettant la connexion et un
autre permettant la demande de réinitialisation du mot de
passe, etc. Un autre template principal peut être créé pour
les autres vues auxquelles les utilisateurs auront accès
après l’authentification. Ce template contiendrait la
structure commune de votre application divisée en plusieurs
blocs qui seront surchargés dans les templates enfants.
- Transformez vos différentes vues en templates Twig et
faites appel à ces templates dans les différentes actions de
vos contrôleurs (cf. projet exemple).
- N’hésitez pas à utiliser les variables, filtres,
fonctions, macros, expressions, etc. proposés par Twig pour
vous faciliter la vie et évitez de vous répéter, DRY (https://twig.symfony.com/doc/3.x/templates.html).