• 20 heures
  • Moyenne

Ce cours est visible gratuitement en ligne.

Vous pouvez obtenir un certificat de réussite à l'issue de ce cours.

Vous pouvez être accompagné et mentoré par un professeur particulier par visioconférence sur ce cours.

J'ai tout compris !

Itération 5 : intégration du moteur de templates Twig

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

Le but de cette itération est d'améliorer la technologie d'affichage de notre application.

Critique de l'application existante

La partie Présentation de notre application actuelle correspond au répertoireviews, dans lequel on définit un fichier PHP/HTML par vue affichée. Voici pour mémoire le contenu du fichierview.php  affichant la liste des articles.

<!doctype html>

<html>
    <head>
        <meta charset="utf-8" />
        <link href="microcms.css" rel="stylesheet" />
        <title>MicroCMS - Home</title>
    </head>
    <body>
        <header>
            <h1>MicroCMS</h1>
        </header>
        <?php foreach ($articles as $article): ?>
        <article>
            <h2><?php echo $article->getTitle() ?></h2>
            <p><?php echo $article->getContent() ?></p>
        </article>
        <?php endforeach ?>
        <footer class="footer">
            <a href="https://github.com/bpesquet/OC-MicroCMS">https://github.com/bpesquet/OC-MicroCMS</a> is a minimalistic CMS built as a showcase for modern PHP development.
    </footer>
</body>

</html>

L'évolution de l'application va impliquer l'écriture de nouvelles vues (détails sur un article, formulaire de connexion, etc.). Toutes les vues auront cependant des éléments communs (partie<head>, pied de page, etc.). On aimerait pouvoir définir un squelette de vue commun et ne définir dans chaque vue que ses éléments spécifiques.

Un autre problème de notre application concerne la sécurité. Actuellement, notre vue n'est pas protégée contre les injections de code sur la page HTML générée. Ici, si l'instruction$article->getTitle()retourne un code malicieux (par exemple du JavaScript), la page HTML générée par cette vue exécutera ce code JavaScript non désiré.

Le mécanisme standard de défense contre les injections de code dans du HTML consiste à échapper (escape) toutes les données dynamiques incluses dans le code HTML. Avec PHP, la technique classique est de faire appel à la fonction htmlspecialchars qui transforme certains caractères tels que<  ou> , ce qui désactive l'interprétation des balises comme<script>. Silex fournit ce mécanisme sous la forme de la méthode escape. Cependant, il est fastidieux d'échapper systématiquement toutes les variables PHP dans toutes nos vues.

Afin de remédier à toutes ces limitations, nous allons utiliser une solution plus moderne en intégrant à notre application un moteur de templates.

Choix du moteur de templates

Un moteur de templates est un logiciel spécialisé dans la générations de vues. Un template (que l'on peut traduire par "gabarit") est un fichier texte contenant des instructions spécifiques (variables, structures de contrôle, etc.). Lorsqu'un template est généré, les instructions spécifiques qu'il contient sont exécutées par le moteur pour aboutir au résultat désiré.

Quelque part, PHP est en lui-même un moteur de templates. Cependant, un moteur de templates dédié comme celui que nous allons utiliser fournit une syntaxe plus claire et des services plus avancés.

Il existe plusieurs moteurs de templates PHP, comme par exemple Smarty. Notre choix va se porter sur le moteur standard de Silex et de Symfony : Twig.

La prise en main de Twig n'est pas très difficile. Si vous souhaitez des informations détaillées, consultez sa documentation ou encore ce cours OpenClassrooms.

Intégration de Twig

L'intégration de Twig est facilitée par l'existence d'un fournisseur de services pour Silex. Nous allons donc employer la même technique que pour DBAL à l'itération précédente.

Commençons par ajouter une dépendance de notre projet envers Twig dans le fichiercomposer.json.

{
    "require": {
        "silex/silex": "~2.0",
        "doctrine/dbal": "~2.5",
        "twig/twig": "~1.28"
    },
    "autoload": {
        ...
    }
}

Mettez ensuite à jour les dépendances en tapant la ligne ci-dessous dans un terminal.‌

composer update

Ensuite, éditez le fichierapp/app.php pour y ajouter l'enregistrement de Twig auprès de Silex.

<?php

use Symfony\Component\Debug\ErrorHandler;
use Symfony\Component\Debug\ExceptionHandler;

// Register global error and exception handlers
ErrorHandler::register();
ExceptionHandler::register();

// Register service providers.
$app->register(new Silex\Provider\DoctrineServiceProvider());
$app->register(new Silex\Provider\TwigServiceProvider(), array(
    'twig.path' => __DIR__.'/../views',
));

// Register services.
$app['dao.article'] = function ($app) {
    return new MicroCMS\DAO\ArticleDAO($app['db']);
};

Ici, Twig est configuré pour que le répertoire dans lequel nous stockerons nos templates soit le répertoireviews du projet.‌

À présent, remplaçons la vueviews/view.php par un template Twig pour afficher la liste des articles. Dans le répertoireviews, créez le fichierindex.html.twig avec le contenu ci-dessous.

<!doctype html>
<html>
<head>
    <meta charset="utf-8" />
    <link href="microcms.css" rel="stylesheet" />
    <title>MicroCMS - Home</title>
</head>
<body>
    <header>
        <h1>MicroCMS</h1>
    </header>
    {% for article in articles %}
    <article>
        <h2>{{ article.title }}</h2>
        <p>{{ article.content }}</p>
    </article>
    {% endfor %}
    <footer class="footer">
        <a href="https://github.com/bpesquet/OC-MicroCMS">MicroCMS</a> is a minimalistic CMS built as a showcase for modern PHP development.
    </footer>
</body>
</html>

Comme vous le constatez, la syntaxe de Twig est assez proche de celle du PHP :

  • la bouclefor permet de parcourir le tableau$articles ;

  • l'instructionarticle.title fait appel à la méthodegetTitle de l'objet$article (plus de précisions) ;

Vous pouvez maintenant supprimer l'ancien fichierviews/view.php devenu inutile.

Enfin, on modifie la route Silex dans le fichierapp/routes.php pour générer la nouvelle vue.

<?php

// Home page
$app->get('/', function () use ($app) {
    $articles = $app['dao.article']->findAll();
    return $app['twig']->render('index.html.twig', array('articles' => $articles));
});

Ici, on demande au service Twig ($app['twig'] ) de générer le templateindex.html.twig en lui passant ses données dynamiques en paramètre. Ici, la seule donnée dynamique est une variable nomméearticles qui contient le tableau d'objets de la classeArticle renvoyé par la partie Modèle.

Il est temps de vérifier l'intégration de Twig en accédant à http://microcms. Même si la technologie utilisée a changé, la liste des articles s'affiche exactement comme précédemment.

Le code source associé à cette itération est disponible sur une branche du dépôt GitHub

Bilan

La partie Présentation de notre application web est maintenant gérée par le moteur de templates Twig. Cependant, le rendu utilisateur n'a pas évolué depuis l'initialisation de l'application et il reste sommaire. La prochaine itération va améliorer cela.

Exemple de certificat de réussite
Exemple de certificat de réussite