• 15 heures
  • Moyenne

Ce cours est visible gratuitement en ligne.

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

J'ai tout compris !

Mis à jour le 31/01/2019

Créer un template de page

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

Essayons maintenant d'améliorer nos vues. Il y a du code qui se répète, et comme vous le savez, le code qui se répète... on n'aime pas ça !

Inclure des blocs de page

La première approche, que vous connaissez sûrement, consiste à créer des blocs de page dans des fichiers PHP différents. Par exemple :

  • header.php

  • footer.php

Avec ça, nos vues n'auraient plus qu'à inclure (avec un include ou un require ) le header et le footer :

<?php require('header.php'); ?>

<h1>Mon super blog !</h1>

<p>Contenu de la page</p>
        
<?php require('footer.php'); ?>

Alors oui, ça marche, mais il y a moyen de faire mieux et plus flexible. En effet, imaginez que le menu change un peu en fonction des pages par exemple. Comment vous faites, si ce menu se trouve dans header.php ?

Ou le titre de la page dans la balise <title> ? Vous n'y avez pas accès pour le personnaliser en fonction des pages ! A priori, tout ça est dans header.php... que vous ne pouvez pas changer d'ici.

Pour être plus flexible, il faut... inverser complètement notre approche. 🙃

Créer un template

On va créer un template (aussi appelé gabarit) de page. On va y retrouver toute la structure de la page, avec des "trous" à remplir.

Voici notre fichier template.php :

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title><?= $title ?></title>
        <link href="style.css" rel="stylesheet" /> 
    </head>
        
    <body>
        <?= $content ?>
    </body>
</html>

Il y a 2 "trous" à remplir dans ce template : le <title> et le contenu de la page.

Evidemment, on pourrait faire plus compliqué si on voulait (par exemple, on pourrait réserver un espace pour personnaliser le menu). Mais vous voyez l'idée : vous créez la structure de votre page, et vous remplissez les trous par des variables.

Il faut maintenant définir ce qu'on met dans ces variables. Voici comment on peut le faire dans la vue indexView.php qui affiche la liste des derniers billets :

<?php $title = 'Mon blog'; ?>

<?php ob_start(); ?>
<h1>Mon super blog !</h1>
<p>Derniers billets du blog :</p>


<?php
while ($data = $posts->fetch())
{
?>
    <div class="news">
        <h3>
            <?= htmlspecialchars($data['title']) ?>
            <em>le <?= $data['creation_date_fr'] ?></em>
        </h3>
        
        <p>
            <?= nl2br(htmlspecialchars($data['content'])) ?>
            <br />
            <em><a href="post.php?id=<?= $data['id'] ?>">Commentaires</a></em>
        </p>
    </div>
<?php
}
$posts->closeCursor();
?>
<?php $content = ob_get_clean(); ?>

<?php require('template.php'); ?>

Ce code fait 3 choses :

  1. Il définit le titre de la page dans $title. Celui-ci sera intégré dans la balise <title> dans le template.

  2. Il définit le contenu de la page dans $content. Il sera intégré dans la balise <body> du template.
    Comme ce contenu est un peu gros, on utilise une astuce pour le mettre dans une variable. On appelle la fonction ob_start() (ligne 3) qui "mémorise" toute la sortie HTML qui suit, puis, à la fin, on récupère le contenu généré avec ob_get_clean()  (ligne 28) et on met le tout dans $content .

  3. Enfin, il appelle le template avec un require. Celui-ci va récupérer les variables $title et $content qu'on vient de créer... pour afficher la page !

Le second point vous paraît sûrement un peu délicat. Laissez-moi vous proposer une explication en image (j'adore les schémas !) :

On
On "absorbe" le code HTML généré et on le stocke dans $content grâce à ces 2 fonctions qui délimitent le début et la fin

A part l'astuce du ob_start() et ob_get_clean() (qui nous sert juste à mettre facilement beaucoup de code HTML dans une variable), le principe est simple. En inversant l'approche, on a un code bien plus flexible pour définir des "morceaux" de page dans des variables.

Essayez !

Regardez un peu le résultat et amusez-vous à le modifier si vous voulez :

https://www.codevolve.com/api/v1/publishable_key/2A9CAA3419124E3E8C3F5AFCE5306292?content_id=6472de81-059a-4d84-aa37-bbe81abe7d73

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