Twig

Dans le Getting Started, nous avons créé une simple page utilisant un template Twig assez basique.

Le but de cette partie est d’utiliser un template trouvé sur Internet dans notre projet Symfony. Vous pouvez le visualiser ici

Le template se trouve dans ce dossier et contient différentes pages. Téléchargez-le et observez les différents fichiers.

Dans le cadre de ce TP, nous allons utiliser les fichiers index.html et post.html ainsi que les fichiers CSS, JavaScript et les images.

Installer Twig

Commençons par installer Twig avec la commande

composer require twig

Fichiers statiques

Commençons par inclure les fichiers statiques (CSS, JS, images).

Depuis les fichiers du template, copiez les dossiers css, img, js et vendor dans le dossier public de notre projet Symfony.

Symfony possède un composant nommé Webpack Encore et c’est LA méthode à privilégier pour un projet. Cependant, elle nécessite plus de temps à comprendre et mettre en place.

Nous nous en tiendrons donc dans un premier temps à des fichiers statiques dans le dossier public.

Pour plus détails : Guide Frontend Symfony

Création d’un nouveau controller

Afin de tester nos nouvelles pages, nous allons créer un nouveau controllerque nous appellerons HomeController.

Pour rappel, il faut utiliser la console Symfony bin/console make:controller HomeController.

Dans ce controller, modifiez l’annotation de route pour que la page soit accessible sur / et non /home.

/**
* @Route("/", name="home")
*/

Accédez à localhost:8080/ pour constater que ça fonctionne comme attendu.

Adaptation du template

Rappel

Chaque template doit hériter d’un template générique souvent nommé base.html.twig.

Ce fichier contient le code que l’on doit répéter sur toutes les pages. Il s’agit généralement du HTML générique (<html>, <head>, <body>, <meta>, etc) ainsi que des éléments HTML que l’on retrouve sur toutes les pages (navbar, menu, footer, etc).

La bonne pratique veut que l’on sépare dans des fichiers différents, les composants de notre page. Cela veut par exemple dire un fichier pour la navbar et un fichier pour le footer, que l’on va inclure dans le template de base.

Passons à la pratique

Les fichiers du template téléchargé précédemment sont relativemment bien organisés. Chaque section de la page est désignée dans le code HTML par un commentaire comme . Cela va faciliter le découpage des pages.

Pour commencer, dans le dossier templates, créez un dossier layout qui contiendra nos composants tels que le footer ou la navbar.

Dans ce dossier créez les fichiers navbar.html.twig et footer.html.twig.

Prendre le fichier index.html du thème téléchargé et répartir le code HTML dans les différents fichiers du dossier templates :

Le code commun dans base.html.twig
Le code de la navbar et du footer dans les fichiers dédiés
Le code spécifique à la page d’accueil dans le fichier home/index.html.twig

Le fichier home/index.html.twig doit étendre du template base.html.twig et le code spécifique à la page dans le bloc body.

Pour plus de détails sur la logique d’héritage et de blocs, consultez cette page de la documentation Twig.

Les template de la navbar et du footer ne doivent pas étendre de base.html.twig. Ils doivent être inclus dans le template base.html.twig car ils font partie du code commun à toutes les pages. Cela se fait avec le mot clé include.

Testons tout ça

Pour tester notre nouvelle page, on peut actualiser la page d’accueil.

Vous devriez avoir un rendu identique à la page d’origine.

Remarques

Si vous êtes un peu curieux, vous l’avez peut-être déjà remarqué.

Les liens dans le menu et sur les extraits d’articles ne sont pas fonctionnels et renvoient une erreur 404 - Not Found.

De plus, les articles présents sur la page ne sont pas dynamiques mais affichés directement dans le HTML. De plus, pour afficher 3 articles, nous avons utilisé 3 fois le même code HTML avec juste du texte différent.

Nous allons remédier à tout ça dans la suite du TP !

Générations des URLs

Nous avons déjà vu que pour gérer nos URLs, nous utilisons l’annotation @Route dans nos controlleurs.

Dans cette annotation, nous avons deux parties :

path : c’est la partie après le nom de domaine que les utilisateurs devront saisir pour accéder à la page en question
name : cette partie sert aux développeurs, elle nous sert à référencer cette route pour pouvoir générer des URLs

C’est cet attribut qui va nous servir à générer les URLs dans notre template Twig.

Dans le template navbar.html.twig, changez la balise li contenant le lien vers la page d’accueil par

<li class="nav-item">
    <a class="nav-link" href="{{ url('home') }}">Home</a>
</li>

Ici, la fonction url() prend comme paramètre le nom de la route défini dans l’annotation de votre controlleur.

Si vous actualisez, vous devriez arriver sur la page d’accueil en cliquant sur Home dans le menu.

Changez également le lien vers la page d’accueil qui est sur le nom du blog (par défaut Start Boostrap) pour qu’il redirige aussi vers la page d’accueil.

C’est d’ailleur le moment de vous l’approprier. Choisissez un nom pour votre blog et changez-le dans la navbar, le footer (copyright) et le haut de page (où il est actuellement écrit Clean Blog).

Vous pouvez également changer l’image de fond si vous le souhaitez.

Supprimez aussi les liens inutiles du menu pour ne laisser que Home pour l’instant.

Dynamisation de la page d’accueil

Afin de représenter un article, nous allons créer une classe représentant un article.

Créez d’abord un dossier Entity dans le dossier src.

Puis créez dans ce dossier un fichier Article.php

Ajoutez dans ce fichier la classe Article avec les propiétés suivantes :

title (string, le titre de l’article)
subtitle (string, le sous-titre, servant aussi de résumé pour la liste)
createdAt (DateTime, la date de création) NB : DateTime est une classe PHP représentant une date (avec heure et timezone)
author (string, le nom de l’auteur)
body (string, le contenu de l’article)
image (string, le chemin vers l’image sur le serveur)

Respectez le principe d’encapsulation en mettant vos propriétés en private et en ajoutant des getters et des setters.

Lien de la documentation sur les classes en php https://www.php.net/manual/fr/language.oop5.php

Utilisez également le typage des paramètres et des types de retours (comme vous le feriez en Java).

Après cela, ajoutez dans votre controlleur le code suivant

$article1 = new Article();
$article1->setTitle('Title 1');
$article1->setSubtitle('SubTitle 1');
$article1->setCreatedAt(new DateTime());
$article1->setAuthor('John Doe');
$article1->setBody('Lorem ipsum dolor sit amet');
$article1->setImage('img/post-bg.jpg');

$article2 = new Article();
$article2->setTitle('Title 2');
$article2->setSubtitle('SubTitle 2');
$article2->setCreatedAt(new DateTime());
$article2->setAuthor('John Doe');
$article2->setBody('Lorem ipsum dolor sit amet');
$article2->setImage('img/post-bg.jpg');

Et passez ces articles à votre vue.

return $this->render('home/index.html.twig', [
    'articles' => [$article1, $article2]
]);

Vous avez maintenant accès à une variable articles dans home/index.html.twig.

A l’aide de la documentation Twig (variables et liste des fonctions), affichez vos articles en bouclant sur le tableau passé à la vue.

Vous devriez avoir un rendu similaire mais avec uniquement deux articles affichés.

Remarques

Cette logique est un commencent vers une logique de dynamisation de notre page.

Vous l’aurez sans doute remarqué mais créer des articles dans le controlleur de cette manière n’est pas très élégant. Et pas très dynamique non plus…

Il faudrait par exemple, stocker les informations de ces articles en base de données. Cela permettrait de faire des requêtes pour afficher, par exemple, les 4 derniers articles sur la page d’accueil.

Nous allons voir tout ça dans le prochain chapitre.

PS : nous allons aussi voir comment rendre le lien vers l’article cliquable, car il est toujours en 404.