Exercice : Utilisation de require

É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
        - _main.phtml
    - layout.phtml
index.php

Contenu des fichiers

templates/layout.phtml

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="UTF-8">
        <title>Exercice Require</title>
        <link rel="stylesheet" href="assets/styles/style.css">
    </head>
    <body>

    </body>
</html>

templates/partials/_header.phtml

<header>
    <h1>

    </h1>
</header>

templates/partials/_main.phtml

<main>
    <h2>

    </h2>
    <p>

    </p>
</main>

<footer>
    <p>&copy; 2025 Garfield Lasagna Inc.</p>
</footer>

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: 15vh 75vh 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;
}

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

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

body > main > h2 {
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
    font-size: 1.1rem;
}

body > footer {
    display: grid;
    background-color: #4e148c;
    color: white;
    align-items: center;
    justify-content: center;
}

index.php

<?php

$siteTitle = "";
$pageTitle = "";
$pageContent = "";


?>

Étape 1 : Appeler le layout principal

Vous allez commencer par require le fichier de layout principal, templates/layout.phtml dans votre fichier index.php, faites en sorte que les variables contenues dans le fichier index.php soient disponibles dans templates/layout.phtml.

Lorsque vous allez run votre fichier index.php votre page apparaitra toujours blanche cependant vous devriez voir le titre de votre onglet changer.

Étape 2 : Composer le layout du site

Vous allez maintenant assembler le layout de l'exercice. Dans votre fichier templates/layout.phtml vous allez require les 3 fichiers qui composent votre layout :

celui qui contient le <header>
celui qui contient le <main>
celui qui contient le <footer>

Étape 3 : dynamiser les contenus

Dans votre fichier index.php, vous avez des variables vides, une pour le titre du site, une pour le titre de la page, une pour le contenu de la page.

Donnez-leur les valeurs suivantes :

titre du site : "J'aime pas les lundis"
titre de la page : "Qui est Garfield ?"
contenu de la page : "Un chat roux qui aime les lasagnes."

Vous allez ensuite afficher ces variables aux emplacements suivants :

titre du site : dans le <h1> du <header>
titre de la page : dans le <h2> du <main>
contenu de la page : dans le <p> du <main>

Correction

Correction Étape 0 à Étape 3

21 May 2025

Session BRE04 Help