Factorisation

Nous constatons que les sections head, header et footer sont similaires dans nos deux pages.

Pour faciliter la maintenance et éviter la duplication de code, nous allons externaliser ces éléments dans des fichiers séparés.

Les parties variables seront remplacées par des variables, que nous définirons dans le fichier appelant avant de les utiliser.

Ces nouveaux fichiers seront placés à la racine de notre site.

Méthodehead.php

Nous allons comparer les balises <head> de la page index et de la page utilisateur/index afin d’en extraire les éléments communs. À partir de ces éléments, nous construirons un fichier <head> partagé, dans lequel les différences seront gérées au moyen de variables PHP.

index.php

1
<head>
2
    <meta charset='UTF-8'>
3
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
4
    <title>Accueil</title>
5
    <link rel="stylesheet" href="css/style.css">
6
</head>

utilisateur/index.php

1
<head>
2
    <base href="../">
3
    <meta charset='UTF-8'>
4
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
5
    <title>Afficher les utilisateurs</title>
6
    <link rel="stylesheet" href="css/style.css">
7
    <link rel="stylesheet" href="css/utilisateur.css">
8
</head>

<head> commun

Chaque page inclura le head commun, mais définira au préalable ses propres valeurs de variables afin d’y insérer un contenu spécifique.

1
<head>
2
    <!-- Définition de la base pour les liens relatifs -->
3
    <base href="<?= $page_base ?>">
4
    <meta charset='UTF-8'>
5
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
6
    <!-- Titre dynamique de la page -->
7
    <title><?= $page_title ?></title>
8
    <!-- Feuilles de styles spécifiques à la page -->
9
    <link rel="stylesheet" href="css/style.css">
10
    <link rel='stylesheet' href='css/<?= $page_styles[0] ?>.css'>
11
</head>

  • <?= $page_base ?> : affiche le chemin relatif vers la racine du site.

  • <?= $page_title ?> : affiche le titre de la page.

  • <?= $page_styles[0] ?> : affiche le premier style du tableau $page_styles.

Nous devrons, par exemple, ajouter dans la page utilsateur/index.php :

1
$page_base = '../';
2
$page_title = 'Afficher les utilisateurs';
3
$page_styles = ['utilisateur'];

Dans la page index.php :

1
$page_base = './';
2
$page_title = 'Accueil';
3
$page_styles = [''];

Méthodeheader.php

Nous réalisons un fichier header.php que nous ajoutons à la racine de notre site.

Nous copions la balise <header> depuis l’un de nos fichiers et la collons dans ce nouveau fichier.

1
<header>
2
    <nav>
3
        <ul>
4
            <li><a href='index.php'>Accueil</a></li>
5
            <li><a href='utilisateur/index.php'>Utilisateurs</a></li>
6
        </ul>
7
    </nav>
8
</header>

Méthodefooter.php

Nous réalisons un fichier footer.php que nous ajoutons à la racine de notre site.

Nous copions la balise <footer> depuis l’un de nos fichiers et la collons dans ce nouveau fichier.

1
<footer>
2
    <h2>TP PHP</h2>
3
</footer>

Inclusion de nos fichier dans nos pages

Pour chaque fichier de notre site, nous devons inclure les fichiers nécessaires et définir les variables attendues avant de les utiliser.

Méthodeindex.php

1
<?php
2
// Chemin de base pour les inclusions
3
$page_base = './';
4
// Titre dynamique de la page
5
$page_title = 'Accueil';
6
// Feuilles de styles spécifiques à la page
7
$page_styles = [''];
8
?>
9
<!DOCTYPE html>
10
<html lang='fr'>
11
12
<?php require "$page_base/head.php"; ?>
13
14
<body>
15
    <?php require "$page_base/header.php"; ?>
16
17
    <main>
18
        <h1>Accueil</h1>
19
    </main>
20
21
    <?php require "$page_base/footer.php"; ?>
22
</body>
23
24
</html>
Méthodeutilisateur/index.php
1
<?php
2
$page_title = "Afficher les utilisateurs";
3
$page_styles = ['utilisateur'];
4
$page_base = '../';
5
?>
6
<!DOCTYPE html>
7
<html lang='fr'>
8
9
<?php require $page_base . 'head.php'; ?>
10
11
<body>
12
    <?php require $page_base . 'header.php'; ?>
13
14
    <main>
15
        <h1>Afficher</h1>
16
17
        <ul class='utilisateur-list'>
18
            <li>
19
                <figure class="card">
20
                    <img src='images/photos/lucie-aule.gif' alt='photo Aule' />
21
                    <figcaption>Aule Lucie 45 ans</figcaption>
22
                </figure>
23
            </li>
24
            <li>
25
                <figure class="card">
26
                    <img src='images/photos/jean-bon.gif' alt='photo Bon' />
27
                    <figcaption>Bon Jean 65 ans</figcaption>
28
                </figure>
29
            </li>
30
            <li>
31
                <figure class="card">
32
                    <img src='images/photos/annie-ball.gif' alt='photo Ball' />
33
                    <figcaption>Ball Annie 24 ans</figcaption>
34
                </figure>
35
            </li>
36
            <li>
37
                <figure class="card">
38
                    <img src='images/photos/robin-desbois.gif' alt='photo Desbois' />
39
                    <figcaption>Desbois Robin 56 ans</figcaption>
40
                </figure>
41
            </li>
42
            <li>
43
                <figure class="card">
44
                    <img src='images/photos/jacques-celer.gif' alt='photo Céler' />
45
                    <figcaption>Céler Jacques 17 ans</figcaption>
46
                </figure>
47
            </li>
48
            <li>
49
                <figure class="card">
50
                    <img src='images/photos/marie-nade.gif' alt='photo Nade' />
51
                    <figcaption>Nade Marie 72 ans</figcaption>
52
                </figure>
53
            </li>
54
            <li>
55
                <figure class="card">
56
                    <img src='images/photos/noel-sapin.gif' alt='photo Sapin' />
57
                    <figcaption>Sapin Noël 12 ans</figcaption>
58
                </figure>
59
            </li>
60
            <li>
61
                <figure class="card">
62
                    <img src='images/photos/charles-heau.gif' alt='photo Heau' />
63
                    <figcaption>Heau Charles 65 ans</figcaption>
64
                </figure>
65
            </li>
66
            <li>
67
                <figure class="card">
68
                    <img src='images/photos/felicie-tation.gif' alt='photo Tation' />
69
                    <figcaption>Tation Félicie 34 ans</figcaption>
70
                </figure>
71
            </li>
72
            <li>
73
                <figure class="card">
74
                    <img src='images/photos/megane-reneaux.gif' alt='photo Reneaux' />
75
                    <figcaption>Reneaux Mégane 34 ans</figcaption>
76
                </figure>
77
            </li>
78
            <li>
79
                <figure class="card">
80
                    <img src='images/photos/pierre-kiroule.gif' alt='photo Kiroule' />
81
                    <figcaption>Kiroule Pierre 63 ans</figcaption>
82
                </figure>
83
            </li>
84
            <li>
85
                <figure class="card">
86
                    <img src='images/photos/rose-deschamps.gif' alt='photo Deschamps' />
87
                    <figcaption>Deschamps Rose 23 ans</figcaption>
88
                </figure>
89
            </li>
90
        </ul>
91
    </main>
92
93
    <?php require $page_base . 'footer.php'; ?>
94
</body>
95
96
</html>