Ternaire

Dans certains cas, on peut vouloir afficher une variable qui n’existe pas forcément.

Pour éviter que PHP renvoie une erreur, on peut utiliser un opérateur ternaire afin de lui attribuer une valeur par défaut.

Nous appliquons ce principe dans le fichier head.php, ainsi qu’une boucle pour inclure toutes les feuilles de style listées dans le tableau $page_styles.

Méthodehead.php

Nous modifions le fichier head.php .

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 ?? 'Accueil' ?></title>
8
    <link rel="stylesheet" href="css/style.css">
9
    <!-- Feuilles de styles spécifiques à la page -->
10
    <?php
11
    foreach (($page_styles ?? []) as $style) {
12
        echo "    <link rel='stylesheet' href='css/{$style}.css'>\n";
13
    }
14
    ?>
15
</head>

Les variables $page_title et $page_styles peuvent être supprimer du fichier de la page d'accueil index.php.

La variable tableau spage_styles peut contenir plusieurs valeurs, ce qui permet d’ajouter plusieurs feuilles de style. Si elle n’est pas définie, on lui attribue un tableau vide par défaut.

Nous modifions la variable $page_styles dans le fichier utilisateur/index.php :

1
$page_styles = ['utilisateur', 'card'];

Méthodecss/utilisateur.css

1
/* ===============================
2
   Liste de figures (utilisateurs)
3
   =============================== */
4
5
.utilisateur-list {
6
    list-style: none;
7
    display: grid;
8
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
9
    gap: 1.5rem;
10
    padding: 0;
11
    margin: 0;
12
}
Méthodecss/card.css
1
/* ===============================
2
   Figures cartes .card
3
   =============================== */
4
5
.card {
6
    display: grid;
7
    grid-template-rows: auto 1fr;
8
9
    background: #fff;
10
    border: 1px solid #ddd;
11
    border-radius: 8px;
12
    overflow: hidden;
13
14
    transition: transform 0.2s, box-shadow 0.2s;
15
}
16
17
.card:hover {
18
    transform: translateY(-5px);
19
    box-shadow: 0 4px 10px rgb(0 0 0 / 10%);
20
}
21
22
.card img {
23
    width: 100%;
24
    display: block;
25
}
26
27
.card figcaption {
28
    align-items: center;
29
    justify-content: center;
30
31
    padding: 0.6rem;
32
    font-size: 0.9rem;
33
    text-align: center;
34
35
    background: #f5f5f5;
36
    border-top: 1px solid #ddd;
37
}