Affichage : Statistiques sur un tableau de bord Laravel

Création d’un Tableau de Bord pour une Boutique E-commerce avec Laravel

Voici une version améliorée et détaillée pour afficher des statistiques (nombre d’utilisateurs, liste des articles, liste des produits/livres) sur un tableau de bord Laravel.

1. Création du Contrôleur pour le Tableau de Bord

Pour commencer, créez un contrôleur nommé DashboardController qui gérera les données nécessaires pour le tableau de bord.

Commande artisan :

bash

php artisan make:controller DashboardController

Cela génère un fichier dans app/Http/Controllers/DashboardController.php.

Code du Contrôleur :

Ajoutez la logique pour récupérer les statistiques dans la méthode index() :

php

namespace App\Http\Controllers; use App\Models\User; use App\Models\Article; use App\Models\Product; // Exemple pour les produits use Illuminate\Http\Request; class DashboardController extends Controller { public function index() { // Récupérer le nombre d'utilisateurs $userCount = User::count(); // Récupérer la liste des articles $articles = Article::latest()->get(); // Triés par date de création // Récupérer la liste des produits $products = Product::all(); // Passer les données à la vue return view('dashboard.index', compact('userCount', 'articles', 'products')); } }

2. Configuration des Routes

Ajoutez une route pour le tableau de bord dans routes/web.php :

php

use App\Http\Controllers\DashboardController; // Tableau de bord accessible uniquement aux utilisateurs authentifiés Route::get('/dashboard', [DashboardController::class, 'index']) ->middleware('auth') // Protège la route ->name('dashboard');

3. Création de la Vue du Tableau de Bord

Créez un fichier Blade pour afficher les données dans resources/views/dashboard/index.blade.php.

Exemple de Vue Blade :

blade

@extends('layouts.app') @section('content') <div class="container mx-auto py-6"> <h1 class="text-3xl font-bold mb-4">Tableau de Bord</h1> <!-- Statistiques des Utilisateurs --> <div class="bg-gray-100 p-4 rounded shadow mb-6"> <h2 class="text-xl font-semibold mb-2">Statistiques</h2> <p>Nombre d’utilisateurs : <strong>{{ $userCount }}</strong></p> </div> <!-- Liste des Articles --> <div class="bg-gray-100 p-4 rounded shadow mb-6"> <h2 class="text-xl font-semibold mb-2">Liste des Articles</h2> @if($articles->isEmpty()) <p>Aucun article disponible.</p> @else <ul class="list-disc pl-6"> @foreach($articles as $article) <li>{{ $article->title }} – Publié le {{ $article->created_at->format('d/m/Y') }}</li> @endforeach </ul> @endif </div> <!-- Liste des Produits --> <div class="bg-gray-100 p-4 rounded shadow"> <h2 class="text-xl font-semibold mb-2">Liste des Produits</h2> @if($products->isEmpty()) <p>Aucun produit disponible.</p> @else <ul class="list-disc pl-6"> @foreach($products as $product) <li>{{ $product->name }} – {{ $product->price }} €</li> @endforeach </ul> @endif </div> </div> @endsection

Points clés :

1. Statistiques :
   • Le nombre total d’utilisateurs est affiché avec la variable $userCount.
2. Liste des Articles :
   • Les articles sont récupérés via le modèle Article.
   • Format de date appliqué avec ->format('d/m/Y').
3. Liste des Produits :
   • Les produits sont récupérés via le modèle Product et affichés avec leur nom et prix.

4. Tester dans le Navigateur

1. Démarrez le serveur Laravel :bashphp artisan serve
2. Connectez-vous :
   • Assurez-vous qu’un utilisateur est connecté pour accéder au tableau de bord.
   • Si le système d’authentification n’est pas configuré, installez Laravel Breeze :bashcomposer require laravel/breeze --dev php artisan breeze:install npm install && npm run dev php artisan migrate
3. Accédez au tableau de bord : Visitez l’URL /dashboard pour voir les statistiques.

5. Exemple de Modèles pour Articles et Produits

Modèle Article :

php

namespace App\Models; use Illuminate\Database\Eloquent\Factories\HasFactory; use Illuminate\Database\Eloquent\Model; class Article extends Model { use HasFactory; protected $fillable = ['title', 'content']; }

Modèle Product :

php

namespace App\Models; use Illuminate\Database\Eloquent\Factories\HasFactory; use Illuminate\Database\Eloquent\Model; class Product extends Model { use HasFactory; protected $fillable = ['name', 'price', 'description']; }

6. Exemple de Résultat dans le Navigateur

• Statistiques :
  • Nombre total d’utilisateurs : 10.
• Articles :
  • Liste des titres et dates de publication.
• Produits :
  • Liste des noms et prix.

Capture d’écran :

markdown

Tableau de Bord --------------------------------- Statistiques : Nombre d’utilisateurs : 10 Liste des Articles : - Article 1 – Publié le 10/12/2024 - Article 2 – Publié le 12/12/2024 Liste des Produits : - Produit 1 – 20 € - Produit 2 – 50 €

7. Améliorations et Personnalisation

1. Pagination : Si la liste des articles ou des produits est longue, ajoutez une pagination :php

   $articles = Article::latest()->paginate(10);

   Dans la vue :

   blade

   {{ $articles->links() }}

2. Recherche : Ajoutez une barre de recherche pour filtrer les articles ou produits :php

   $articles = Article::where('title', 'like', '%'.$searchQuery.'%')->get();

3. Composants Blade : Déplacez les sections récurrentes (ex. : liste des produits) dans des composants Blade pour les réutiliser.
4. AJAX : Chargez dynamiquement les statistiques ou listes avec AJAX pour une meilleure expérience utilisateur.

Conclusion

En suivant ce guide, vous pouvez afficher des statistiques utiles comme le nombre d’utilisateurs, la liste des articles, et les produits sur un tableau de bord Laravel. Cette implémentation peut être enrichie avec des fonctionnalités avancées comme la pagination, la recherche ou le tri.