Aujourd’hui je vous propose de découvrir un moteur de templates du nom de Twig. Twig est un moteur de templates PHP. Je vous conseille donc d’avoir de bonnes bases en PHP et si possible en orienté objet (bien que ça ne soit pas indispensable).
Installation du projet
Pour installer Symfony 4, il y a 2 options principales:
- installer la version lourde en utilisant le website-skeleton (conçue pour des sites internets classiques). Ce squelette correspond en gros à ce qu’on avait lorsqu’on installait un symfony 3 auparavant.
- installer la version light, avec juste le coeur de Symfony. C’est l’option que nous allons retenir. Je l’aime beaucoup parce que cela rend le projet à la fois léger et modulable. En effet, grâce au nouveau composant Flex de Symfony, rajouter des dépendances est un vrai jeu d’enfant. Je vais vous montrer.
En ligne de commande:
composer create-project symfony/skeleton twig-fun-tuto
cd twig-fun-tuto
Installation des dépendances
Pour mener à bien ce projet, nous avons besoin de Twig évidemment, et des annotations pour configurer une route.
Pour faciliter le dev, nous allons ajouter le composant server qui est bien pratique à utiliser. Grâce à Flex, il suffit de faire:
composer require twig annotations
composer require server --dev
Dans ces quelques commandes réside la puissance de Flex, qui permet d’installer des dépendances très facilement.
bin/console server:start
Nous voilà prêt à attaquer le cœur de notre sujet: la création de fonctions Twig personnalisées.
Création de l’extension Twig
<?php
// src/Twig/AppExtension.php
namespace App\Twig;
use Twig\Extension\AbstractExtension;
use Twig\TwigFunction;
class AppExtension extends AbstractExtension
{
private $kernelProjectDir;
// le constructeur indique que nous avons ici besoin d'un paramètre, le kernelProjectDir.
// Nous allons passer ce paramètre en le déclarant dans notre fichier config/services.yaml.
// Il s'agit d'un paramètre par défaut introduit dans Symfony 4.
public function __construct(string $kernelProjectDir)
{
$this->kernelProjectDir = $kernelProjectDir;
}
public function getFunctions()
{
return array(
// on déclare notre fonction.
// Le 1er paramètre est le nom de la fonction utilisée dans notre template
// le 2ème est un tableau dont le 1er élément représente la classe où trouver la fonction associée (en l'occurence $this, c'est à dire cette classe puisque notre fonction est déclarée un peu plus bas). Et le 2ème élément du tableau est le nom de la fonction associée qui sera appelée lorsque nous l'utiliserons dans notre template.
new TwigFunction('assetExists', array($this, 'assetExistsFunction')),
);
}
// chemin relatif de notre fichier en paramètre
public function assetExistsFunction(string $fileRelativePath)
{
// si le fichier passé en paramètre de la fonction existe, on retourne true,
// sinon on retourne false.
return file_exists($this->kernelProjectDir."/public/".$fileRelativePath) ? true : false;
}
}
Déclaration du service
Avec le système d’autowiring de Symfony, les services sont automatiquement enregistrés. Nous n’avons plus besoin de les déclarer comme avant. Un gain de temps, génial! En revanche, nous passons un paramètre au constructeur de notre AppExtension.php
. Nous devons le renseigner, sinon Symfony va nous crier à la figure la prochaine fois que nous rechargerons notre page.
#config/services.yaml
services:
_defaults:
bind:
$kernelProjectDir: "%kernel.project_dir%"
Utilisation de notre fonction
On va finir cet article par tester notre fonction dans un template. Pour cela, nous allons créer une route pour commencer:
<?php
// src/Controller/AppController.php
namespace App\Controller;
use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
use Symfony\Component\Routing\Annotation\Route;
class AppController extends AbstractController
{
/**
* @Route("/", name="homepage")
*/
public function index()
{
return $this->render('index.html.twig');
}
}
Enfin le template:
{# templates/index.html.twig #}
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Création de fonction Twig personnalisée</title>
</head>
<body>
{# on passe le chemin relatif de notre ressource à la fonction #}
{% if assetExists('images/mon-image.png') %}
<img src="images/mon-image.png" alt="mon image">
{% else %}
<img src="images/image-par-defaut.png" alt="image par défaut">
{% endif %}
</body>
</html>
Pour finir, placer une image dans le dossier public/images/
et faites vos essais. Tout devrait fonctionner.
Cet Article est utile ? Votez