Layout et partials

Aujourd'hui, nous allons voir un aspect du MVC plus "léger" que les autres jours. En efet nous allons nous concentrer sur les Views (les templates) et la façon de les structurer et les organiser.

Le layout : un template pour les gouverner tous

Lorsqu'on travaille avec le MVC, on utilise un template principal qui va servir à assembler tous les autres, qui s'appelle la plupart du temps "layout". Dans certains moteurs de templates comme Twig, il peut s'appeler "base".

Pour les besoins du module, nous utiliserons layout.phtml.

Le but de ce template est de mettre en place la structure commune à toutes nos pages :

le DOCTYPE
les balises <html>, <head>, <body>, <title>, ...
les balises <meta> communes à toutes les pages comme le charset

Puis d'appeler selon les besoins les parties soit communes à plusieurs pages :

<header>
<footer>
<link>
...

Soit spécifiques à une page précise :

<main>
<meta> description
...

La structure minimale du layout

<!DOCTYPE html>
<html lang="">
    <head>
        <meta charset="utf-8" />
        <title></title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="" />
    </head>
    <body>
        <?php 
            require "templates/$template.phtml";
        ?>
    </body>
</html>

Vous aurez, à minima, un DOCTYPE et vos balises <html>, <head> et <body> et <title>. Vous aurez également la <meta> qui va gérer l'encodage de vos pages (charset) et celle qui va vous permettre de faire du responsive (viewport).

Vous aurez également le lien de votre fichier css principal et le require du template spécifique de votre page.

Vous allez ensuite, selon les besoins de votre projet, compléter ce layout avec différent partials (des morceaux de templates).

Partials

Les partials sont l'aspect qui va vous permettre de réduire votre charge de travail en réutilisant des blocs de code HTML / CSS. Il permet aussi de mieux organiser le travail de groupe en permettant à différentes personnes de travailler sur des fichiers séparés.

Par norme de code et habitude, le nom d'un fichier de partial commence par un _: _header.phtml, _footer.phtml, ...

Un exemple basique d'utilisation des partials

L'exemple de partials le plus classique est d'en utiliser pour votre <header> et votre <footer>:

_header.phtml

<header>
    <nav>
        <!-- votre navigation -->
    </nav>
</header>

_footer.phtml

<footer>
    <!-- copyright, mentions légales etc etc-->
</footer>

layout.phtml

<!DOCTYPE html>
<html lang="">
    <head>
        <meta charset="utf-8" />
        <title></title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="" />
    </head>
    <body>
        <?php require "templates/partials/_header.phtml"; ?>
        <?php require "templates/$template.phtml"; ?>
        <?php require "templates/partials/_footer.phtml"; ?>
    </body>
</html>

avec cette structure, les templates spécifiques de vos pages contiendront tout le contenu du <main>.

Pousser le découpage un peu plus loin

Il arrive souvent dans un site, particulièrement les sites d'information ou les sites e-commerce, que certains éléments d'interface aient besoin d'être utilisés sur plusieurs pages différentes.

Si vous avez créé un partial disons _campus.phtml, vous pouvez le réutiliser à l'envie sur n'importe quelle page, plutôt que de devoir copier le code.

L'idée va donc être pour vous lorsque vous vous retrouvez face à une maquette de déterminer ce qui est utilisé plusieurs fois ou pas et ce qui peut vous être utile à réutiliser dans un futur projet.

Réutiliser son travail dans plusieurs projets

Certains composants sont des "classiques" dont vous aurez régulièrement besoin dans vos projets :

une navigation responsive qui passe en menu burger
une table de présentation de contenu avec les boutons voir / modifier / supprimer
un formulaire de contact
...

Penser directement ces blocs de code comme des partials peut potentiellement vous faire gagner un temps considérable sur vos projets futurs :)

06 March 2026