Exercice : Routing

Étape 0 : Les fichiers

Les fichiers sont les mêmes pour tout l'exercice.

Architecture des fichiers :

- assets
    - styles
        - style.css
- templates
    - partials
        - _header.phtml
        - _footer.phtml
        - _homepage.phtml
        - _about.phtml
        - _contact.phtml
    - layout.phtml
index.php

assets/styles/style.css

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

html {
    font-size: 18px;
}

body {
    display: grid;
    padding: 0;
    margin: 0;
    grid-template-rows: 20vh 70vh 10vh;
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}

body > header {
    display: grid;
    background-color: #4e148c;
    color: white;
    align-items: center;
    justify-content: center;
    grid-template-columns: 1fr;
    row-gap: 1rem;
}

body > header > h1 {
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
    font-size: 2rem;
    text-align: center;
}

body > header nav {
    display: grid;
}

body > header > nav > ul {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    align-items: center;
    justify-content: center;
    list-style: none;
    text-align: center;
}

body > header > nav > ul a{
    color: white;
    text-transform: uppercase;
    font-weight: 300;
    text-align: center;
    text-underline-offset: 0.4rem;
}

body > header > nav > ul a:hover{
    text-underline-offset: 0.5rem;
}

body > main {
    display: grid;
    grid-template-rows: 15vh 60vh;
    background-color: #D6EFFF;
    color:#0a090c;
    grid-template-columns: 10% 80% 10%;
}

body > main > h2 {
    display: grid;
    grid-column: 2 / 3;
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
    font-size: 1.5rem;
    align-self: center;
    justify-self: center;
    color: #4e148c;
}

body > main > form {
    grid-column: 2 / 3;
}

body > footer {
    display: grid;
    background-color: #4e148c;
    color: white;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 300;
}

templates/partials/_about.phtml

<main>
    <h2>
        Je suis la page à propos
    </h2>
</main>

templates/partials/_contact.phtml

<main>
    <h2>
        Je suis la page contact
    </h2>
</main>

templates/partials/_homepage.phtml

<main>
    <h2>
        Je suis la page d'accueil
    </h2>
</main>

templates/partials/_header.phtml

<header>
    <h1>Exercice routing</h1>
    <nav>
        <ul>
            <li>
                <a href="">Accueil</a>
            </li>
            <li>
                <a href="">À propos</a>
            </li>
            <li>
                <a href="">Contact</a>
            </li>
        </ul>
    </nav>
</header>

<footer>
    Exercice sur le routing
</footer>

templates/layout.phtml

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="UTF-8">
        <title>Exercices Formulaires</title>
        <link rel="stylesheet" href="assets/styles/style.css">
    </head>
    <body>
        <?php require "templates/partials/_header.phtml"; ?>
        <?php require "templates/partials/_homepage.phtml"; ?>
        <?php require "templates/partials/_footer.phtml"; ?>
    </body>
</html>

index.php

<?php

require "templates/layout.phtml";

?>

Étape 1 : la fonction de routing

Dans votre fichier index.php vous allez créer une fonction routing() : string. Cette fonction va vérifier si votre page a reçu un paramètre d'URL appellé route et renvoyer une string qui représente le nom du template à charger.

Si le paramètre route existe et vaut about, la fonction va retourner "about".
Si le paramètre route existe et vaut contact, la fonction va retourner "contact".
Dans tous les autres cas, la fonction retourne "homepage"

Étape 2 : Charger dynamiquement les templates

Dans votre fichier templates/layout.phtml vous allez créer une condition :

Si $template vaut about: faites un require de templates/partials/_about.phtml
Si $template vaut contact: faites un require de templates/partials/_contact.phtml
Dans tous les autres cas : faites un require de templates/partials/_homepage.phtml

Dans le fichier templates/partials/_header.phtml vous allez devoir rajouter des urls dans les href de vos liens.

Faites en sorte que le lien Accueil permette d'afficher la page d'accueil, À propos la page à propos et Contact la page Contact.

Correction

Correction Étapes 1 à 3

03 June 2025

Session BRE04 Help