Utilisateurs

page utilisateur/index.php

Il faut modifier notre fichier utilisateur/index.php pour qu’il récupère tous les utilisateurs depuis la base de données.

Méthodeutilisateur/index.php

Nous commençons par modifier la section responsable de la récupération des données des utilisateurs.

Nous ajoutons également un lien vers une page permettant d’ajouter de nouveaux utilisateurs.

Le composant est ensuite enrichi pour inclure deux liens d’action :

  • Lien de suppression : redirige vers la page qui supprime l’utilisateur correspondant à son identifiant.

  • Lien de modification : redirige vers la page qui permet de modifier les informations de l’utilisateur identifié.

1
<?php
2
// ==============================
3
// CONNEXION À LA BASE DE DONNÉES
4
// ==============================
5
$db = require '../bdd.php';
6
7
// ==============================
8
// INCLUSION HELPERS
9
// ==============================
10
require '../helpers.php';
11
12
// ==============================
13
// RÉCUPÉRATION DE LA LISTE
14
// ==============================
15
16
// Requête SQL pour récupérer tous les utilisateurs
17
$sql = 'SELECT * FROM utilisateurs';
18
19
// Préparation de la requête
20
$statement = $db->prepare($sql);
21
22
// Exécution de la requête
23
$statement->execute();
24
25
// Récupération de tous les résultats sous forme de tableau
26
$listeUtilisateurs = $statement->fetchAll();
27
28
// ==============================
29
// VARIABLES POUR LA VUE
30
// ==============================
31
32
// Chemin de base pour les inclusions
33
$page_base = '../';
34
// Titre dynamique de la page
35
$page_title = 'Afficher les utilisateurs';
36
// Feuilles de styles spécifiques à la page
37
$page_styles = ['utilisateur', 'card'];
38
?>
39
40
<!DOCTYPE html>
41
<html lang='fr'>
42
43
<?php require "$page_base/head.php"; ?>
44
45
<body>
46
    <?php require "$page_base/header.php"; ?>
47
    <main>
48
        <h1>Afficher</h1>
49
        <a href="utilisateur/create.php" class="btn-create">Ajouter</a>
50
51
        <ul class="utilisateur-list">
52
            <?php foreach ($listeUtilisateurs as $utilisateur): ?>
53
                <li>
54
                    <?php
55
                    $card = [
56
                        'src' => $utilisateur['photo'],
57
                        'alt' => "photo de {$utilisateur['nom']} {$utilisateur['prenom']}",
58
                        'figcaption' => "{$utilisateur['nom']} {$utilisateur['prenom']} - {$utilisateur['age']} ans",
59
                        'show' => "utilisateur/show.php?id={$utilisateur['id']}",
60
                        'delete' => "utilisateur/delete.php?id={$utilisateur['id']}",
61
                        'update' => "utilisateur/update.php?id={$utilisateur['id']}"
62
                    ];
63
                    require("$page_base/components/card.php");
64
                    ?>
65
                </li>
66
            <?php endforeach; ?>
67
        </ul>
68
    </main>
69
    <?php require "$page_base/footer.php"; ?>
70
</body>
71
72
</html>
Un bouton ajouter permet de faire un lien vers la page create.php.
1
<a href="utilisateur/create.php" class="btn-create">Ajouter</a>
Méthodecomposants/card.php
Nous modifions notre composant pour qu'il ajoute deux liens : un pour la suppression et un pour la modification.
1
<?php if (isset($card['show'])): ?>
2
    <a href="<?= $card['show'] ?>">
3
    <?php endif; ?>
4
5
    <figure class="card">
6
        <img src='<?= $card['src'] ?>' alt='<?= $card['alt'] ?>' />
7
        <figcaption>
8
            <?= $card['figcaption'] ?>
9
            <?php if (isset($card['delete']) || isset($card['update'])): ?>
10
                <p>
11
                    <?php if (isset($card['delete'])): ?>
12
                        <a class="btn-logo btn-delete" href="<?= $card['delete'] ?>">supprimer</a>
13
                    <?php endif; ?>
14
                    <?php if (isset($card['update'])): ?>
15
                        <a class="btn-logo btn-update" href="<?= $card['update'] ?>">modifier</a>
16
                    <?php endif; ?>
17
                </p>
18
            <?php endif; ?>
19
        </figcaption>
20
    </figure>
21
22
    <?php if (isset($card['show'])): ?>
23
    </a>
24
<?php endif; ?>
Si les clés $card['delete'] et $card['update'] ne sont pas définies, aucun lien n’est affiché.
Dans le cas contraire, deux liens sont générés :
  • Lien de suppression : affiché sous forme d’icône, il redirige vers la page permettant de supprimer l’utilisateur correspondant à son identifiant.
1
<a class="btn-logo btn-delete" href="<?= $card['delete'] ?>">supprimer</a>
  • Lien de modification : affiché sous forme d’icône, il redirige vers la page permettant de modifier les informations de l’utilisateur correspondant à son identifiant.
1
<a class="btn-logo btn-update" href="<?= $card['update'] ?>">modifier</a>
MéthodeDossier images
Dans le dossier public/css/images on ajoute les logos delete et update.
Logo de suppression
Logo de modification
Méthodecss/utilisateur.css
Modification du css utilisateur.
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
}
13
14
/* ===============================
15
   Bouton Ajouter
16
   =============================== */
17
18
.btn-create {
19
    display: inline-block;
20
    padding: 0.5rem 1.2rem;
21
    margin: 1rem 0;
22
    background-color: #0066cc;
23
    color: #fff;
24
    font-size: 1rem;
25
    font-weight: 500;
26
    border-radius: 6px;
27
    text-decoration: none;
28
    transition: background-color 0.2s, transform 0.2s;
29
}
30
31
.btn-create:hover {
32
    background-color: #004999;
33
    transform: translateY(-2px);
34
}