26. Refactoring du Tableau de Bord de l’Administration

1. L’accueil Admin (admin.php)

Code complet PHP

<?php

declare(strict_types=1);

session_start();
require_once 'database/database.php';
require_once 'flash.php';
require_once 'app/Emuns/Role.php';
require_once 'app/helpers.php';

if (!isset($_SESSION['auth']) || !is_array($_SESSION['auth']) || $_SESSION['auth']['role'] !== Role::ADMIN->value) {
    flash_set('error', "Accès refusé ! Vous devez être administrateur.");
    redirect('index.php');
}

$pageTitle = 'Administration';
render('admin/admin', [
    'pageTitle' => $pageTitle
], 'admin-layout');

Explications pas à pas (PHP)

require_once 'app/Emuns/Role.php';
require_once 'app/helpers.php';

if (!isset($_SESSION['auth']) || $_SESSION['auth']['role'] !== Role::ADMIN->value) {
    redirect('index.php');
}

Explication : C’est notre bouclier de sécurité. Si la session n’existe pas, OU si le rôle n’est pas égal à ADMIN (récupéré depuis notre Enumération PHP Role), on expulse la personne vers l’accueil !

$userQuery = $pdo->query('SELECT COUNT(*) FROM users');
$userCount = $userQuery->fetchColumn();

Explication : On compte simplement le nombre d’utilisateurs. On répète cela pour les articles et les commentaires.

render('admin/admin', [
    'userCount' => $userCount,
    'articleCount' => $articleCount,
    'commentCount' => $commentCount,
], 'admin-layout');

Explication : On appelle le render(). Notez le 3e paramètre 'admin-layout' : la vue va être intégrée dans le design de l’administration, et non celui du blog !

---

Code complet HTML (resources/views/admin/admin_html.php)

<h1 class="title">Dashboard</h1>
<ul class="breadcrumbs">
    <li><a href="#">Home</a></li>
    <li class="divider">/</li>
    <li><a href="#" class="active">Dashboard</a></li>
</ul>
<div class="info-data">
    <div class="card">
        <div class="head">
            <div>
                <h2>1500</h2>
                <p>Traffic</p>
            </div>
            <i class="bx bx-trending-up icon"></i>
        </div>
        <span class="progress" data-value="40%"></span>
        <span class="label">40%</span>
    </div>
    <div class="card">
        <div class="head">
            <div>
                <h2>234</h2>
                <p>Sales</p>
            </div>
            <i class="bx bx-trending-down icon down"></i>
        </div>
        <span class="progress" data-value="60%"></span>
        <span class="label">60%</span>
    </div>
    <div class="card">
        <div class="head">
            <div>
                <h2>465</h2>
                <p>Pageviews</p>
            </div>
            <i class="bx bx-trending-up icon"></i>
        </div>
        <span class="progress" data-value="30%"></span>
        <span class="label">30%</span>
    </div>
    <div class="card">
        <div class="head">
            <div>
                <h2>235</h2>
                <p>Visitors</p>
            </div>
            <i class="bx bx-trending-up icon"></i>
        </div>
        <span class="progress" data-value="80%"></span>
        <span class="label">80%</span>
    </div>
</div>
<div class="data">
    <div class="content-data">
        <div class="head">
            <h3>Sales Report</h3>
            <div class="menu">
                <i class="bx bx-dots-horizontal-rounded icon"></i>
                <ul class="menu-link">
                    <li><a href="#">Edit</a></li>
                    <li><a href="#">Save</a></li>
                    <li><a href="#">Remove</a></li>
                </ul>
            </div>
        </div>
        <div class="chart">
            <div id="chart"></div>
        </div>
    </div>
    <div class="content-data">
        <div class="head">
            <h3>Chatbox</h3>
            <div class="menu">
                <i class="bx bx-dots-horizontal-rounded icon"></i>
                <ul class="menu-link">
                    <li><a href="#">Edit</a></li>
                    <li><a href="#">Save</a></li>
                    <li><a href="#">Remove</a></li>
                </ul>
            </div>
        </div>
        <div class="chat-box">
            <p class="day"><span>Today</span></p>
            <div class="msg">
                <img
                    src="https://images.unsplash.com/photo-1517841905240-472988babdf9?ixid=MnwxMjA3fDB8MHxzZWFyY2h8NHx8cGVvcGxlfGVufDB8fDB8fA%3D%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60"
                    alt=""
                />
                <div class="chat">
                    <div class="profile">
                        <span class="username">Alan</span>
                        <span class="time">18:30</span>
                    </div>
                    <p>Hello</p>
                </div>
            </div>
            <div class="msg me">
                <div class="chat">
                    <div class="profile">
                        <span class="time">18:30</span>
                    </div>
                    <p>
                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque voluptatum eos quam dolores eligendi exercitationem animi nobis
                        reprehenderit laborum! Nulla.
                    </p>
                </div>
            </div>
            <div class="msg me">
                <div class="chat">
                    <div class="profile">
                        <span class="time">18:30</span>
                    </div>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam, architecto!</p>
                </div>
            </div>
            <div class="msg me">
                <div class="chat">
                    <div class="profile">
                        <span class="time">18:30</span>
                    </div>
                    <p>Lorem ipsum, dolor sit amet.</p>
                </div>
            </div>
        </div>
        <form action="#">
            <div class="form-group">
                <input type="text" placeholder="Type..." />
                <button type="submit" class="btn-send"><i class="bx bxs-send"></i></button>
            </div>
        </form>
    </div>
</div>

Explications pas à pas (HTML)

<div class="card" style="...">
    <h3>Utilisateurs</h3>
    <p class="number"><?= $userCount ?></p>
    <a href="admin-index-users.php">Gérer les utilisateurs</a>
</div>

Explication : On affiche simplement la variable $userCount générée par la requête SQL COUNT(*). Pas besoin de protection XSS ici car un COUNT retourne toujours un nombre garanti.