Site php/bootstrap : ajouter une page

Ajouter une page à la machinerie déjà en place est facile.

1) créer le fichier

Avec Brackets (ou tout autre logiciel de code), créez un fichier à la racine du dossier de travail. Retenez bien son nom, vous allez en avoir besoin tout de suite. Il doit se terminer par ".php", c’est important.
Le nom du fichier est libre, mais appliquez les consignes de sécurité : pas d’espace ni de caractères spéciaux, éventuellement des tirets et des underscores.
Je nommerai le mien "contact.php".

2) Placer les codes d’inclusion

Nous allons maintenant inclure le fichire inc-header.php et inc-footer.php, comme indiqué dans le tutoriel précédent.

<?php
// inclure le header
include("includes/inc-header.php");
?>

Ici vient le contenu de la page

<?php
// inclure le footer
include("includes/inc-footer.php");
?>

3) Placer un peu de contenu

Le contenu de cette page est du html standard, mais nous disposons du framework bootstrap pour gagner du temps en prototypage. Ici un simple exemple de header, suivie d’une grille de 3 colonnes ;

<?php
// inclure le header
include("includes/inc-header.php");
?>

<section id="main" class="container">
   <header class="text-center my-5">
       <h2>Un titre de page</h2>
       <div class="small">Un sous-titre</div>
   </header>

   <div class="row">
       <article class="col-12 col-sm-6 col-md-4">
           <h3>Une colonne</h3>
           <div class="small">
           Et du contenu
           </div>
       </article>
       
       <article class="col-12 col-sm-6 col-md-4">
           <h3>Une colonne</h3>
           <div class="small">
           Et du contenu
           </div>
       </article>
       
       <article class="col-12 col-sm-6 col-md-4>
           <h3>Une colonne</h3>
           <div class="small">
           Et du contenu
           </div>
       </article>
   </div>
</section>

<?php
// inclure le footer
include("includes/inc-footer.php");
?>

Ça donnera ça :

4) Updater le menu

Il est temps de lier le menu à cette page, en éditant le fichier inc-header.php qui se trouve dans le dossier "includes" :

Repérez dans le code l’élément ul dont la classe est "navbar-nav" et ajoutez un nouvel élément "li" comme ceci :

                   <ul class="navbar-nav mr-auto">
                       <li class="nav-item active">
                           <a class="nav-link" href="./">Home</a>
                       </li>
                       <li class="nav-item">
                           <a class="nav-link" href="contact.php">Contact</a>
                       </li>
                   </ul>

Enregistrez et sauvez, c’est fait. Comme le fichier est le même pour toute les pages, cette opération ne se fait qu’une fois.