Apprendre à créer un Template de page web avec Bootstrap et PHP pour centraliser la structure des pages à un seul endroit !
Voici la vidéo :
Pourquoi créer un Template Bootstrap et PHP
La création d’un Template sur un site web permet de centraliser le code correspondant à la structure des pages dans un seul fichier.
De plus, Bootstrap 5 permet de gérer le design du site en proposant des classes CSS.
Une fois la structure et le design global du site est réalisée, il suffira d’inclure le template sur tous les fichiers correspondant aux pages web.
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«
Les lignes à écrire pour créer le Template Bootstrap et 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 href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
<link rel="stylesheet" href="main.css" />
</head>
<body>
<header>
<!-- menu -->
</nav>
</header>
<main>
<?php echo $content; ?>
</main>
<footer class="p_bgBlue text-white text-center p-3">
© H2PROG
</footer>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.min.js" integrity="sha384-fbbOQedDUMZZ5KreZpsbe1LCZPVmfTnH7ois6mU1QK+m14rQ1l2bGBq41eYeM/fS" crossorigin="anonymous"></script>
</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";
?>
Les commentaires sont fermés