Templates Twig en PHP

L’installation de Twig se fait grâce à l’outil composer

composer

Si composer n’est pas présent dans votre environnement, il faut procéder à son installation. Composer servira à beaucoup de tâches courantes dans un projet PHP. On va d’abord créer un répertoire bin à la racine de notre HOME, placez-y l’exécutable composer.phar et renommez le en composer (ou faites un lien symbolique).

cd
mkdir bin
cd bin
curl -s https://getcomposer.org/installer | php
mv composer.phar composer

Si vous êtes derrière un proxy, vérifiez la définition de vos variables d’environnement http_proxy et https_proxy dans votre .bashrc Ajoutez la ligne suivante à votre .bashrc pour adapter votre PATH :

export PATH=$PATH:~/bin

de manière à ce que tous les programmes installés dans le répertoire bin de votre HOME soient accessibles de n’importe où.

Installation

Installons Twig:

composer require twig/twig

ou simplement :

composer require twig

Ceci créera dans le répertoire courant un dossier vendor contenant les librairies demandées et les dépendances.

On définit d’abord un template de base, BaseTemplate.html:

<!DOCTYPE html>
<html lang="fr">
<head>
    {% block head %}
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css" />
    <title>{% block title %}{% endblock %}</title>
    {% endblock %}
</head>
<body>
<section id="content">
{% block content %}{% endblock %}
</section>
<footer id="footer">
    {% block footer %}
    &copy; Copyright 2020 <a href="http://monsite.com">
    Mon super Site</a>.
    {% endblock %}
</footer>
</body>
</html>

Puis un template plus spécialisé qui en hérite, menu.html :

{% extends "BaseTemplate.html" %}
{% block title %}Menu de la semaine{% endblock %}
{% block head %}
{{ parent() }}
<style>
    .important { color: #336699; }
</style>
{% endblock %}
{% block content %}
    <h1>Menu</h1>
    <p class="important">
        Voici votre menu de la semaine:
        <dl>
            <dt>Lundi</dt>
            <dd>{{Lundi}}</dd>
            <dt>Mardi</dt>
            <dd>{{Mardi}}</dd>
            <dt>Mercredi</dt>
            <dd>{{Mercredi}}</dd>
            <dt>Jeudi</dt>
            <dd>{{Jeudi}}</dd>
        </dl>
    </p>
{% endblock %}

Enfin, on utilise ce template dans un fichier menu.php en chargeant d’abord l”autoloader:

<?php
// menu.php
// inclure  l'autoloader
include 'vendor/autoload.php';

try {
    // le dossier ou on trouve les templates
    $loader = new Twig\Loader\FilesystemLoader('templates');

    // initialiser l'environement Twig
    $twig = new Twig\Environment($loader);

    // load template
    $template = $twig->load('Menu.html');

    // set template variables
    // render template
    echo $template->render(array(
        'lundi' => 'Steak Frites',
        'mardi' => 'Raviolis',
        'mercredi' => 'Pot au Feu',
        'jeudi' => 'Couscous',
        'vendredi' => 'Poisson',
    ));

} catch (Exception $e) {
    die ('ERROR: ' . $e->getMessage());
}

Affichage des personnes du Carnet

Affichons à présent les personnes du Carnet à l’aide d’un template Twig. On réutilise le fichier modele.php vu précédemment:

<?php
// modele.php

class Carnet {
    private static $connexion;
    function __construct(){
        $dsn="mysql:dbname=".BASE.";host=".SERVER;
        try{
                self::$connexion=new PDO($dsn,USER,PASSWD);
            }
        catch(PDOException $e){
            printf("Échec de la connexion : %s\n", $e->getMessage());
            $this->connexion = NULL;
        }
    }
    /** Récupére la liste des contacts sous forme d'un tableau */
    function get_all_friends(){
        $sql="SELECT * from CARNET";
        $data=self::$connexion->query($sql);
        return $data;
    }
    /** Ajoute un contact à la table CARNET */
    function add_friend($data){
        $sql = "INSERT INTO CARNET(NOM,PRENOM,NAISSANCE,VILLE) values (?,?,?,?)";
        $stmt = self::$connexion->prepare($sql);
        return $stmt->execute(array($data['nom'],
            $data['prenom'], $data['naissance'],$data['ville']));
    }
    /** Récupére un contact à partir de son ID */
    function get_friend_by_id($id)
    {
        $sql="SELECT * from CARNET where ID=:id";
        $stmt=self::$connexion->prepare($sql);
        $stmt->bindParam(':id', $id, PDO::PARAM_INT);
        $stmt->execute();
        return $stmt->fetch(PDO::FETCH_OBJ);
    }
<?php
// fichier carnet.php

include 'vendor/autoload.php';

// on inclus le modele
include 'modele.php';
// On instancie un Carnet
$car = new Carnet();
try {
    // le dossier ou on trouve les templates
    $loader = new Twig\Loader\FilesystemLoader('templates');

    // initialiser l'environement Twig
    $twig = new Twig\Environment($loader);

    // load template
    $template = $twig->load('carnet.html');

    // on va instancier le modele
    // et préparer les variables
    // qu'on va passer au template
    require_once("modele.php");
    $contacts = new Contacts();
    $amis = $contacts->get_all_friends();
    $titre = "Liste des contacts";

    // render template
    echo $template->render(array(
        'titre' => $titre,
        'amis' => $amis,
    ));

} catch (Exception $e) {
    die ('ERROR: ' . $e->getMessage());
}

et un template carnet.html :

{% extends "BaseTemplate.html" %}
{% block title %}Personnes du Carnet {% endblock %}
{% block head %}
{{ parent() }}
<style type="text/css">
    .important { color: #336699; }
</style>
{% endblock %}

{% block content %}

<p align="center" class="Style1">{{titre}}</p>
<table border="2" align="center" cellspacing="0" cellpadding="2" >
<tr bgcolor="#CA9999">
    <td width="50"><strong>numero</strong></td>
    <td width="50"><strong>Nom</strong></td>
    <td width="50"><strong>Prenom</strong></td>
    <td width="30"><strong>Age</strong></td>
    <td width="50"><strong>Ville</strong></td>
</tr>
{% set i=0 %}
{% for ami in amis %}
{% set i=i+1 %}
{% if i is odd %}
<tr bgcolor="#F0F0F0">
{% else %}
    <tr bgcolor="#A6A6A6">
{% endif %}
    <td>{{ami.ID}}</td>
    <td>{{ami.NOM}}</td>
    <td>{{ami.PRENOM}}</td>
    <td>{{ami.NAISSANCE}}</td>
    <td>{{ami.VILLE}}</td>
</tr>
{% endfor %}
</table>

{% endblock %}

Ce template est un bien maladroit mais il montre l’expressivité du langage de template Twig avec des boucles, des conditionnelles, des déclarations et calculs avec des variables, etc.

Nous pouvons bien sûr en proposer un plus simple avec le CSS adéquat.

Affichage des Personnes avec un template plus simple

(carnet2.html)

{% extends "BaseTemplate.html" %}
{% block title %}Personnes du Carnet{% endblock %}
{% block head %}
{{ parent() }}
<link rel="stylesheet" href="static/css/tabstyle.css" />
{% endblock %}

{% block content %}

<h2>{{titre}}</h2>
<table id="jolie" class="centre" >
<tr>
    <td>numero</td>
    <td>Nom</td>
    <td>Prenom</td>
    <td>Age</td>
    <td>Ville</td>
</tr>
{% for ami in amis %}
    <tr>
    <td>{{ami.ID}}</td>
    <td>{{ami.NOM}}</td>
    <td>{{ami.PRENOM}}</td>
    <td>{{ami.NAISSANCE}}</td>
    <td>{{ami.VILLE}}</td>
</tr>
{% endfor %}
</table>
{% endblock %}

avec le style CSS qui va bien sur les tableaux …

Nous pouvons ainsi compléter le développement MVC effectué précédemment en utilisant des templates Twig. Voir sur github/roza/php-basic-mvc pour un code plus complet. Mais le système de routage employé est encore très rudimentaire.

Nous pouvons ensuite utliser les outils de microframeworks Web comme Silex, Phalcon ou Slim ou directement ceux du Framework de référence : Symfony pour aller plus loin.

Table des matières

Sujet précédent

Architecture de type MVC avec PHP

Sujet suivant

Le microframework Silex