Faire un site internet statique en PHP

Vous débutez en PHP et êtes à la recherche d’un système simple pour créer des sites statiques mais solides de quelques pages ? Vous êtes au bon endroit.

Voici en gros ce que nous allons créer au cours de ce petit tutoriel. C’est basiquement un système de navigation entre plusieurs pages. Pour aborder cet exercice, vous aurez besoin de petites notions en PHP.

Nous garderons toutefois une architecture simple, vous n’avez pas besoin par exemple d’être à l’aise avec la programmation orientée objet.

Commençons !

Munissez vous de votre plus bel éditeur de texte et créez l’arborescence du projet comme indiqué ci-dessous :

  • pages
    • apropos.php
    • home.php
    • presentation.php
    • contact
  • .htaccess
  • footer.php
  • header.php
  • index.php
  • menu.php
  • not_found.php
  • router.php
  • style.css

header.php contient l’entête du site, jusqu’à l’ouverture de la balise body, à la manière d’un thème WordPress, mais en plus simple :

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple Router</title>
    <link href="https://fonts.googleapis.com/css?family=Lato&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>
<body>

Pour footer.php c’est encore plus simple :

</body>
</html>

Sachez simplement que c’est index.php qui va appeler ces fichiers ainsi que le router.

Le .htaccess

RewriteEngine on
Options +FollowSymLinks
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule .* /index.php [L]

Concrètement, le .htaccess est ce qui va permettre de faire fonctionner les liens du menu, dont je vais vous présenter le code de suite.

Le menu

<div id="Menu">
    <a href="/">Accueil</a>
    <a href="/presentation">Présentation</a>
    <a href="/apropos">À propos</a>
    <a href="/contact">Contact</a>
</div>

Notez bien que c’est l’attribut href qui est important. Vous vous souvenez du dossier pages ? Et bien dans ce dossier il y a… les différentes pages : home.php, presentation.php, apropos.php et contact.php.

Le fichier index.php

<?php require_once('header.php'); ?>
<main id="Main">
    <header id="Header">
        <div id="Brand">
            <img src="logo.png" alt="">
            <h1>Hello, this is a simple router !</h1>
        </div>
        <?php 
            require_once('menu.php');
        ?>
    </header>
    <div id="Content">
        <?php 
        require_once('router.php');
        ?>
    </div>
</main>
<?php require_once('footer.php'); ?>

Voici en gros le fichier index.php. Il utilise require_once, une fonction PHP permettant d’inclure obligatoirement d’autres fichiers comme header.php, menu.php, footer.php, mais surtout router.php qui est le cœur du système !

router.php

<?php 
    $request_uri = $_SERVER['REQUEST_URI'];
    if(
        $request_uri=="/home" 
        || $request_uri == "/"
    ){
        require_once("pages/home.php");
    }else{
        if(is_string($request_uri)){

            if(file_exists("pages/".$request_uri.".php")){
                require_once("pages/".$request_uri.".php");
            }else{
                require_once('not_found.php');
            }
        }else{
            require_once('not_found.php');
        }
    }
?>

Le fichier router.php qui est requis par index.php permet d’aller chercher et d’inclure les différentes pages.

$_SERVER['REQUEST_URI'] permet d’attraper ce qui passe par la barre de recherche lorsque vous cliquez sur un lien du menu.

« / » est ce que vaut $_SERVER['REQUEST_URI'] lorsque vous arrivez sur le site, c’est la racine du site.

Si $_SERVER['REQUEST_URI'] vaut autre chose que « home » ou « / » et si c’est une chaîne de caractères, le script va regarder dans le dossier pages si le fichier.php correspondant existe.

Si ces conditions sont réunies, il va inclure la page, sinon il va systématiquement afficher une erreur 404 (le fichier not_found.php). J’y viens.

Le fichier not_found.php

Assez basiquement, ce fichier (qui est situé à la racine), indique que la page n’existe pas et propose de revenir à l’accueil :

<div id="notFound">
    <p>La page que vous recherchez n'existe pas !</p>
    <p>
        <a href="/">
            Retour à l'accueil
        </a>
    </p>
</div>

Conclusion

Voilà maintenant vous savez tout. Ce système est bien entendu limité, mais il permet de construire de petits sites statiques très rapidement.

Vous pouvez l’utiliser et l’adapter à vos besoins librement. Le code un peu « pimpé » se trouve ici :

https://github.com/chriscarton/simple-router

Il ne me reste plus qu’à vous souhaiter une très bonne continuation !