Factorisation

On remarque que les sections head, header et footer sont similaires dans les deux pages de notre site.

Pour améliorer 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, qui devront être définies dans le fichier appelant avant d’être utilisées.

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

Méthodehead.php

Réalisez un fichier head.php que vous ajoutez à la racine de votre site.

Recopiez la balise <head> d'un de nos fichiers et collez la dans ce nouveau fichier.

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

La balise title n'ayant pas le même contenu selon les fichiers, nous remplaçons son contenu par une variable.

Si la variable n'existe pas, on affiche tp.

<title><?= $page_title ?? 'tp'; ?></title>

Méthodeheader.php

Réalisez un fichier header.php que vous ajoutez à la racine de votre site.

Recopiez la balise <header> d'un de nos fichiers et collez la dans ce nouveau fichier.

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

Méthodefooter.php

Réalisez un fichier footer.php que vous ajoutez à la racine de votre site.

Recopiez la balise <footer> d'un de nos fichiers et collez la dans ce nouveau fichier.

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

Inclusion de nos fichier dans nos pages

Pour chaque fichier de votre site, vous devez inclure les fichiers nécessaires et initialiser les variables attendues avant de les utiliser.

Méthodeindex.php

1
<?php
2
$page_title = 'Accueil';
3
?>
4
<!DOCTYPE html>
5
<html lang='fr'>
6
7
<?php require 'head.php' ?>
8
9
<body>
10
    <?php require 'header.php' ?>
11
12
    <main>
13
        <h1>Accueil</h1>
14
    </main>
15
16
    <?php require 'footer.php' ?>
17
</body>
18
19
</html>
Méthodepersonnes.php
1
<?php
2
$page_title = 'Personnes';
3
?>
4
<!DOCTYPE html>
5
<html lang='fr'>
6
7
<?php require 'head.php' ?>
8
9
<body>
10
    <?php require 'header.php' ?>
11
12
    <main>
13
        <h1>Afficher</h1>
14
15
        <ul>
16
            <li>
17
                <img src='photos/1_aule.gif' alt='photo Aule' />
18
                Aule Lucie 45 ans
19
            </li>
20
            <li>
21
                <img src='photos/2_bon.gif' alt='photo Bon' />
22
                Bon Jean 65 ans
23
            </li>
24
            <li>
25
                <img src='photos/3_ball.gif' alt='photo Ball' />
26
                Ball Annie 24 ans
27
            </li>
28
            <li>
29
                <img src='photos/4_desbois.gif' alt='photo Desbois' />
30
                Desbois Robin 56 ans
31
            </li>
32
            <li>
33
                <img src='photos/5_celer.gif' alt='photo Céler' />
34
                Céler Jacques 17 ans
35
            </li>
36
            <li>
37
                <img src='photos/6_nade.gif' alt='photo Nade' />
38
                Nade Marie 72 ans
39
            </li>
40
            <li>
41
                <img src='photos/7_sapin.gif' alt='photo Sapin' />
42
                Sapin Noël 12 ans
43
            </li>
44
            <li>
45
                <img src='photos/8_heau.gif' alt='photo Heau' />
46
                Heau Charles 65 ans
47
            </li>
48
            <li>
49
                <img src='photos/9_tation.gif' alt='photo Tation' />
50
                Tation Félicie 34 ans
51
            </li>
52
            <li>
53
                <img src='photos/10_reneaux.gif' alt='photo Reneaux' />
54
                Reneaux Mégane 34 ans
55
            </li>
56
            <li>
57
                <img src='photos/11_kiroule.gif' alt='photo Kiroule' />
58
                Kiroule Pierre 63 ans
59
            </li>
60
            <li>
61
                <img src='photos/12_deschamps.gif' alt='photo Deschamps' />
62
                Deschamps Rose 23 ans
63
            </li>
64
        </ul>
65
    </main>
66
67
    <?php require 'footer.php' ?>
68
</body>
69
70
</html>