Créer un Template en HTML/CSS PHP et intégrer plusieurs pages -

on juillet 21, 2023

Apprendre à créer un Template HTML/CSS PHP de page web pour centraliser la structure des pages à un seul endroit !

Voici la vidéo :

Pourquoi créer un Template HTML/CSS PHP

La création d’un Template sur un site web permet de regrouper le code correspondant à la structure des pages dans un seul fichier.

Ainsi, lorsque le développeur voudra apporter une modification sur le code, il n’aura à l’effectuer qu’à un seul endroit.

De plus, lorsqu’une nouvelle page est créée, le template est réutilisé directement. Il n’est pas nécessaire de réécrire toute la structure.

Utilisation du PHP

Le langage HTML ne permet pas, seul, de créer de Template. Le HTML permet d’écrire la structure d’une page, mais pour être inclus dans des pages web, il est nécessaire d’ajouter un langage serveur.

Le PHP, langage serveur prépondérant sur le web, propose des lignes de codes permettant d’inclure un Template sur les pages. Il sera cependant nécessaire d’utiliser un serveur (local en phase de développement) pour que le site fonctionne.

Je vous recommande l’utilisation de Xampp, qui fonctionne sur toutes les systèmes d’exploitation !

Les lignes à écrire pour créer le Template HTML PHP

Rien de très compliqué, le fichier Template.php contiendra la structure globale du site (balises HTML, head, body, header, footer), et utilisera une variable PHP pour afficher le contenu de chacune des pages. Voici un exemple :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="main.css" />
</head>
<body>
    <header>
        <nav>
            <a href="index.html">
                <img src="images/H2Prog-logo JPG-70-70.jpg" alt="logo"/>
            </a>
            <ul>
                <li><a href="index.php">Home</a></li>
                <li><a href="page2.php">Page 2</a></li>
                <li><a href="page3.php">Page 3</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <?= $content; ?>
    </main>
    <footer>&#169; H2PROG</footer>
    
</body>
</html>

Les lignes présentes dans chacune des pages

Hormis l’utilisation du système de buffer, rien de très compliqué, voici un exemple :

<?php ob_start(); ?>

<h1>Page d'accueil</h1>

<?php 
$content=ob_get_clean(); 
require_once "template.php";
?>

Pour apprendre à créer une structure de site professionnelle, vous pouvez suivre le cours dédié : « créer une structure de base professionnelle d’un site web«