TP5 programmation WEB côté serveur

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).