Exercice : Gestion d'utilisateurs

Introduction#

Ce tutoriel vous guidera dans la création d'une application de gestion d'utilisateurs avec Laravel 12. Vous apprendrez à :

• Installer Laravel et configurer l'environnement de développement (Laragon pour Windows, Laravel Herd pour Mac).
• Utiliser Laravel Breeze pour l'authentification et Tailwind CSS pour le style.
• Créer, modifier, supprimer et consulter des utilisateurs.
• Gérer la base de données SQLite et générer des données fictives avec des seeders.

Les sujets couverts incluent :

• Routes, contrôleurs, vues, et gestion de base de données.
• Pagination et recherche des utilisateurs.

Des exercices pratiques vous permettront d'appliquer les concepts expliqués : création d'une vue de détail, édition, suppression et ajout de filtres par rôle.

L'objectif est de comprendre le fonctionnement de Laravel tout en acquérant de l'autonomie pour développer des applications web bien structurées.

Pré-requis et Installation#

Pour suivre ce tutoriel, il est nécessaire de disposer d'un environnement de développement configuré correctement. Voici les étapes à suivre :

Pré-requis#

• PHP 8.2+ installé sur votre machine.
• Composer (gestionnaire de dépendances PHP).
• Un éditeur de code (comme Visual Studio Code).

Environnement de Développement#

• Windows : Utilisez Laragon pour simplifier l'installation et la configuration des services nécessaires (PHP, SQLite, etc.).
• Mac : Utilisez Laravel Herd, une solution facile pour gérer votre environnement Laravel.

Installation de Laravel 12#

1. Ouvrez votre terminal.

2. Exécutez la commande suivante pour créer un nouveau projet Laravel :

   composer create-project laravel/laravel nom-du-projet
   

Installation de Laravel Breeze#

Laravel Breeze permet d'ajouter rapidement l'authentification à votre application.

1. Installez Laravel Breeze via Composer :

   composer require laravel/breeze --dev
   

2. Exécutez la commande pour installer les fichiers de Breeze :

   php artisan breeze:install
   

   Attention ! N’installez pas le dark mode ! Si vous l’installez, vous devrez écrire le code Tailwind pour le mode clair ET le mode sombre. C’est 2 fois plus de travail pour un exercice dont ce n’est pas l’objectif.

Votre environnement de développement est maintenant prêt pour commencer à travailler sur la gestion des utilisateurs.

Génération des Données de Démonstration (Seeders)#

Dans cette section, nous allons générer des données fictives pour peupler notre application avec une liste d'utilisateurs. Cela nous permettra de tester facilement les fonctionnalités de notre application. Pour cela, nous utiliserons des seeders Laravel.

Modification du DatabaseSeeder#

1. Modifier le DatabaseSeeder : Nous devons modifier le fichier DatabaseSeeder.php pour générer 200 utilisateurs aléatoires et notre compte utilisateur de test.

   • Ouvrez le fichier DatabaseSeeder.php situé dans le dossier database/seeders.

   • Modifiez la méthode run() comme suit :

     public function run()
     {
         \App\Models\User::factory(200)->create();
     
         User::factory()->create([
             'name' => 'Test User',
             'email' => 'test@example.com',
         ]);
     }
     

2. Exécuter le Seeder : Enfin, exécutez le seeder pour remplir la base de données avec les utilisateurs générés.

   • Dans le terminal, lancez la commande :

     php artisan db:seed
     

   • Cette commande créera 201 utilisateurs fictifs dans votre base de données.

Vérification des Données Générées#

• Une fois le seeder exécuté, vous pouvez vérifier les données générées dans votre base de données avec un outil comme phpMyAdmin ou HeidiSQL.

Ces données fictives nous permettront de tester et de valider les fonctionnalités de notre application de manière simple et efficace. Passons maintenant à la création des contrôleurs et des routes nécessaires pour gérer ces utilisateurs.

Ajout d'une Colonne "Rôle" aux Utilisateurs#

Pour permettre une gestion plus flexible des utilisateurs, nous allons ajouter une colonne "rôle" à notre table users. Cela nous permettra de distinguer les utilisateurs "admin" des utilisateurs classiques "user".

Création d'une Nouvelle Migration#

1. Générer la Migration : Utilisez Artisan pour créer une nouvelle migration qui ajoutera la colonne role à la table users. Exécutez la commande suivante dans le terminal :

   php artisan make:migration add_role_to_users_table --table=users
   

   Cette commande créera un nouveau fichier de migration dans le dossier database/migrations.

2. Modifier la Migration : Ouvrez le fichier de migration nouvellement créé et ajoutez le code nécessaire pour ajouter la colonne role :

   public function up()
   {
       Schema::table('users', function (Blueprint $table) {
           $table->string('role')->default('user');
       });
   }
   
   public function down()
   {
       Schema::table('users', function (Blueprint $table) {
           $table->dropColumn('role');
       });
   }
   

   • La colonne role sera ajoutée avec une valeur par défaut de "user".

3. Exécuter la Migration : Pour appliquer cette modification à la base de données, lancez la commande suivante :

   php artisan migrate
   

Mise à Jour de la Factory#

Pour attribuer des rôles aux utilisateurs, nous allons maintenant mettre à jour la factory UserFactory.php :

1. Modifier la Factory : Ouvrez le fichier UserFactory.php situé dans le dossier database/factories.

   • Ajoutez un champ role et utilisez Faker pour que seulement 1 utilisateur sur 10 soit administrateur :

     'role' => $this->faker->boolean(10) ? 'admin' : 'user',
     

   • Cette ligne attribuera le rôle "admin" à environ 1 utilisateur sur 10, les autres ayant le rôle "user".

Vérification des Modifications#

• Exécuter les Migrations et les Seeders : Pour appliquer toutes les modifications et regénérer les utilisateurs, utilisez la commande suivante :

  php artisan migrate:fresh --seed
  

  • Cette commande va recréer la base de données et exécuter le seeder pour générer de nouveaux utilisateurs avec les rôles mis à jour.

• Vérifier les Données : Vérifiez dans votre base de données que les utilisateurs ont bien des rôles assignés ("user" ou "admin") et que la distribution respecte bien la règle de 1 administrateur pour 10 utilisateurs.

Avec cette mise à jour, nous sommes maintenant prêts à utiliser ces rôles pour gérer les permissions et personnaliser les fonctionnalités en fonction des types d'utilisateurs.

Création du UserController et des Routes#

Maintenant que nous avons une base de données peuplée d'utilisateurs avec des rôles distincts, nous allons créer un contrôleur pour gérer ces utilisateurs et définir les routes nécessaires pour accéder aux différentes actions.

Création du UserController#

1. Générer le Contrôleur : Utilisez Artisan pour générer un contrôleur de type ressource qui inclura toutes les actions nécessaires à la gestion des utilisateurs. Dans votre terminal, exécutez la commande suivante :

   php artisan make:controller UserController --resource
   

   Cette commande créera un fichier UserController.php dans le dossier app/Http/Controllers.

2. Comprendre les Méthodes Générées : Le contrôleur ressource généré contient les méthodes suivantes :

   • index() : Afficher la liste des utilisateurs.
   • create() : Afficher le formulaire de création d'un utilisateur.
   • store() : Sauvegarder un nouvel utilisateur dans la base de données.
   • show($id) : Afficher les détails d'un utilisateur spécifique.
   • edit($id) : Afficher le formulaire de modification d'un utilisateur.
   • update($id) : Mettre à jour les informations d'un utilisateur.
   • destroy($id) : Supprimer un utilisateur.

Ces méthodes vont nous permettre de gérer toutes les opérations CRUD (Créer, Lire, Mettre à jour, Supprimer) sur les utilisateurs.

Définition des Routes#

1. Ajouter les Routes Ressources : Pour permettre l'accès aux différentes actions du UserController, nous devons définir des routes. Ouvrez le fichier routes/web.php et ajoutez la ligne suivante :

   Route::resource('users', UserController::class)->middleware('auth');
   

   • Cette ligne crée automatiquement toutes les routes nécessaires pour les opérations CRUD sur les utilisateurs.
   • Le middleware auth s'assure que seules les personnes connectées peuvent accéder à ces routes.

2. Vérifier les Routes : Pour vérifier que les routes ont été correctement ajoutées, vous pouvez exécuter la commande suivante dans le terminal :

   php artisan route:list
   

   • Cette commande affichera toutes les routes disponibles dans votre application, y compris celles associées au UserController.

Mise en Place des Permissions de Base#

1. Restreindre l'Accès : Pour l'instant, nous allons simplement restreindre l'accès aux routes des utilisateurs aux personnes connectées grâce au middleware auth. Plus tard, nous pourrons affiner ces permissions en utilisant les rôles "admin" et "user".

Avec ces routes et ce contrôleur en place, nous avons les fondations nécessaires pour gérer la liste des utilisateurs. La prochaine étape consistera à créer les vues associées pour permettre l'interaction avec notre application via une interface utilisateur conviviale.

Création de la Vue de la liste des utilisateurs#

Nous allons maintenant créer une interface pour gérer la liste des utilisateurs, en commençant par l'affichage de cette liste. Nous allons implémenter la méthode du contrôleur, créer la vue correspondante, et configurer la route pour que cette fonctionnalité soit opérationnelle.

Affichage de la Liste des Utilisateurs#

1. Lancez le serveur de développement PHP et JavaScript.

   1. Lancez votre serveur Laragon et pour le front-end, lancez la commande de dev dans un deuxième terminal :

      npm run dev
      

1. Méthode Index dans le UserController

   • Ouvrez le fichier UserController.php dans le dossier app/Http/Controllers.

   • Ajoutez la méthode index() pour récupérer tous les utilisateurs et les passer à la vue :

     public function index()
     {
         $users = User::paginate(10);
         return view('users.index', ['users' => $users]);
     }
     

     • Cette méthode récupère tous les utilisateurs en utilisant une pagination de 10 utilisateurs par page et les transmet à la vue index.

2. Créer la Vue Index

• Pour afficher la liste des utilisateurs, créez une vue index.blade.php dans le dossier resources/views/users.

• Créez d'abord le dossier users dans resources/views.

• Ensuite, créez le fichier index.blade.php dans le dossier resources/views/users.

1. Ajouter la Structure HTML

   • Ouvrez le fichier index.blade.php et ajoutez la structure de base de la page pour afficher la liste des utilisateurs :

     <x-app-layout>
         <div class="container mx-auto py-8">
             <h1 class="text-2xl font-bold mb-6">Liste des Utilisateurs</h1>
     
     
     

Nom	Email	Rôle	Actions
{{ $user->name }}	{{ $user->email }}	{{ $user->role }}	[Voir]({{ route('users.show', $user->id) }}) [Modifier]({{ route('users.edit', $user->id) }})

         <div class="mt-6">
             {{ $users->links() }}
         </div>
     </div>
 </x-app-layout>
 ```

 - Ce code crée une table qui affiche les utilisateurs, leur email, leur rôle, et propose des actions pour chaque utilisateur (voir, modifier).

2. Ajouter la Route Index

   • Le UserController étant un contrôleur de type ressource, la route pour accéder à la méthode index est déjà incluse. Inutile d'ajouter une nouvelle route, car elle est générée automatiquement par la ligne suivante dans web.php :

     Route::resource('users', UserController::class)->middleware('auth');
     

3. Vérifier la Fonctionnalité

   • Vous pouvez maintenant accéder à la liste des utilisateurs via l'URL /users. Vérifiez que la pagination fonctionne bien et que les utilisateurs sont correctement affichés.

Avec cette fonctionnalité complète en place, les utilisateurs connectés peuvent visualiser la liste des utilisateurs avec une pagination de 10 utilisateurs par page.

Exercice : Création de la Vue Show#

Maintenant que la vue index est en place, le premier exercice consistera à créer une vue pour afficher les détails d'un utilisateur spécifique.

1. Méthode Show dans le UserController

   • Implémentez la méthode show($id) dans le UserController pour récupérer un utilisateur spécifique.
   • Transmettez cet utilisateur à la vue show.

2. Créer la Vue Show

   • Créez la vue show.blade.php dans le dossier resources/views/users.
   • Ajoutez-y les informations de l'utilisateur, comme son nom, son email, et son rôle.

L'objectif est de rendre la fonctionnalité de visualisation d'un utilisateur complet à partir de la vue index. La prochaine étape consistera à implémenter la fonctionnalité de création d'un utilisateur, en suivant la même approche pour rendre la fonctionnalité entièrement opérationnelle.

Création d'un Nouvel Utilisateur#

Dans cette section, nous allons implémenter la fonctionnalité permettant de créer un nouvel utilisateur. Nous allons développer la méthode create() et store() dans le contrôleur, créer la vue correspondante pour le formulaire de création, et nous assurer que la fonctionnalité est entièrement opérationnelle.

Méthode Create et Store dans le UserController#

1. Méthode Create

   • Ouvrez le fichier UserController.php dans le dossier app/Http/Controllers.

   • Ajoutez la méthode create() pour retourner la vue permettant de créer un utilisateur :

     public function create()
     {
         return view('users.create');
     }
     

     • Cette méthode renvoie la vue create qui contient le formulaire de création d'un utilisateur.

2. Méthode Store

   • Ajoutez la méthode store() pour enregistrer un nouvel utilisateur dans la base de données :

     public function store(Request $request)
     {
         $validatedData = $request->validate([
             'name' => 'required|string|max:255',
             'email' => 'required|email|unique:users,email',
             'password' => 'required|string|min:8',
             'role' => 'required|in:user,admin',
         ]);
     
         User::create([
             'name' => $validatedData['name'],
             'email' => $validatedData['email'],
             'password' => bcrypt($validatedData['password']),
             'role' => $validatedData['role'],
         ]);
     
         return redirect()->route('users.index')->with('success', 'Utilisateur créé avec succès.');
     }
     

     • Cette méthode valide les données entrantes, crée un nouvel utilisateur, et redirige vers la liste des utilisateurs avec un message de succès.

Création de la Vue Create#

1. Créer le Fichier de Vue Create

   • Créez manuellement une nouvelle vue create.blade.php dans le dossier resources/views/users ou avec cette commande :

     touch resources/views/users/create.blade.php
     

2. Ajouter le Formulaire de Création

   • Ouvrez create.blade.php et ajoutez le formulaire pour créer un utilisateur :

     <x-app-layout>
         <div class="container mx-auto py-8">
             <h1 class="text-2xl font-bold mb-6">Créer un Nouvel Utilisateur</h1>
     
             <form action="{{ route('users.store') }}" method="POST">
                 @csrf
                 <div class="mb-4">
                     <label class="block text-sm font-bold mb-2">Nom</label>
                     <input type="text" name="name" class="w-full border border-gray-300 px-3 py-2" value="{{ old('name') }}">
                     @error('name')
                         <div class="text-red-500 text-sm mt-1">{{ $message }}</div>
                     @enderror
                 </div>
                 <div class="mb-4">
                     <label class="block text-sm font-bold mb-2">Email</label>
                     <input type="email" name="email" class="w-full border border-gray-300 px-3 py-2" value="{{ old('email') }}">
                     @error('email')
                         <div class="text-red-500 text-sm mt-1">{{ $message }}</div>
                     @enderror
                 </div>
                 <div class="mb-4">
                     <label class="block text-sm font-bold mb-2">Mot de passe</label>
                     <input type="password" name="password" class="w-full border border-gray-300 px-3 py-2">
                     @error('password')
                         <div class="text-red-500 text-sm mt-1">{{ $message }}</div>
                     @enderror
                 </div>
                 <div class="mb-4">
                     <label class="block text-sm font-bold mb-2">Rôle</label>
                     <select name="role" class="w-full border border-gray-300 px-3 py-2">
                         <option value="user">Utilisateur</option>
                         <option value="admin">Administrateur</option>
                     </select>
                     @error('role')
                         <div class="text-red-500 text-sm mt-1">{{ $message }}</div>
                     @enderror
                 </div>
                 <button type="submit" class="bg-blue-500 text-white px-4 py-2">Créer</button>
             </form>
         </div>
     </x-app-layout>
     

   • Ce formulaire permet de créer un utilisateur avec les champs nom, email, mot de passe, et rôle. Les messages d'erreur s'affichent sous chaque champ si les validations échouent.

Vérifier la Fonctionnalité#

1. Accéder à la Vue de Création

   • D’abord, connectez-vous à l’application avec ces identifiants :
     • email : test@example.com
     • mdp : password
   • Pour retrouver les identifiants, cherchez dans les fichiers DatabaseSeeder et UserFactory.
   • Pour accéder au formulaire de création, utilisez l'URL /users/create. Cette route est déjà incluse dans le UserController grâce à la déclaration de route ressource.

2. Tester la Création

   • Remplissez le formulaire et créez un utilisateur. Vous devriez être redirigé vers la liste des utilisateurs avec un message de succès affiché.

Avec cette fonctionnalité complète, nous avons désormais la possibilité de créer de nouveaux utilisateurs à travers une interface conviviale. La prochaine étape consistera à implémenter la fonctionnalité de modification d'un utilisateur, en laissant une partie sous forme d'exercice pour renforcer la compréhension.

Exercice : Modification d'un Utilisateur#

Pour cet exercice, vous allez implémenter la fonctionnalité permettant de modifier un utilisateur existant. Cette fonctionnalité vous permettra de consolider vos compétences en implémentant des méthodes dans le contrôleur, en créant une vue, et en testant la mise à jour d'un enregistrement.

Objectifs de l'Exercice#

• Ajouter la méthode edit() dans le UserController pour retourner le formulaire de modification d'un utilisateur spécifique.
• Ajouter la méthode update() dans le UserController pour enregistrer les modifications dans la base de données.
• Créer une vue edit.blade.php pour permettre la modification des informations de l'utilisateur.

Étapes à Suivre#

1. Méthode Edit dans le UserController

   • Implémentez la méthode edit($id) pour récupérer l'utilisateur à modifier et le passer à la vue edit.
   • Utilisez la méthode findOrFail() pour vous assurer que l'utilisateur existe.

2. Créer la Vue Edit

   • Créez la vue edit.blade.php dans le dossier resources/views/users.

   • Ajoutez un formulaire similaire à celui de création (create.blade.php), mais pré-remplissez les champs avec les valeurs actuelles de l'utilisateur.

   • Le formulaire doit utiliser la méthode POST et la directive @method('PUT') en plus de la directive @csrf.

   • Utilisez la fonction old() combinée aux valeurs actuelles de l'utilisateur pour remplir les champs. Par exemple :

     • Pour le champ nom :

       <input type="text" name="name" value="{{ old('name', $user->name) }}" class="w-full border border-gray-300 px-3 py-2">
       

     • Cela permet de conserver la valeur entrée en cas d'erreur de validation.

3. Méthode Update dans le UserController

   • Implémentez la méthode update($id) pour valider les données et mettre à jour l'utilisateur dans la base de données.
   • Validez les champs comme pour la méthode store(), et assurez-vous de prendre en compte l'utilisateur existant pour éviter les doublons d'email.
   • Redirigez vers la liste des utilisateurs avec un message de succès après la mise à jour.

Vérification de la Fonctionnalité#

• Accéder à la Vue de Modification : Utilisez l'URL /users/{id}/edit pour accéder au formulaire de modification d'un utilisateur spécifique.
• Tester la Modification : Remplissez le formulaire avec les nouvelles informations et enregistrez les modifications. Vérifiez que l'utilisateur est mis à jour avec succès et que vous êtes redirigé vers la liste des utilisateurs avec un message de confirmation.

Points à Retenir#

• Utilisez la fonction old() pour maintenir les valeurs saisies par l'utilisateur en cas d'erreur de validation.
• La méthode update() est similaire à store(), mais elle prend en compte l'utilisateur existant et met à jour les champs nécessaires.

Cet exercice vous permettra de mieux comprendre comment gérer la mise à jour des ressources dans Laravel. Prenez le temps de tester et de vous assurer que toutes les validations fonctionnent correctement.

Exercice : Suppression d'un Utilisateur#

Dans cet exercice, vous allez implémenter la fonctionnalité permettant de supprimer un utilisateur existant.

Objectifs de l'Exercice#

• Ajouter un bouton de suppression à la vue index.blade.php pour chaque utilisateur.

• Ajouter la méthode destroy() dans le UserController pour supprimer un utilisateur.

• Assurer la protection de la route de suppression avec un formulaire utilisant la méthode POST et un token CSRF.

Étapes à Suivre#

1. Ajouter un Bouton de Suppression à la Vue Index

   • Ouvrez la vue index.blade.php et ajoutez un bouton de suppression pour chaque utilisateur.

   • Assurez-vous que le bouton est placé dans un formulaire avec la méthode POST et que la directive @method('DELETE') est utilisée.

   • Utilisez la directive @csrf pour inclure un token CSRF et protéger la requête contre les attaques CSRF.

2. Méthode Destroy dans le UserController

   • Implémentez la méthode destroy($id) dans le UserController pour supprimer l'utilisateur.

   • Utilisez la méthode findOrFail() pour récupérer l'utilisateur à supprimer et appelez la méthode delete() sur l'utilisateur.

   • Redirigez vers la liste des utilisateurs avec un message de succès après la suppression.

3. Vérifier la Fonctionnalité

   • Tester la Suppression : Accédez à la liste des utilisateurs, cliquez sur le bouton de suppression pour un utilisateur et vérifiez que celui-ci est bien supprimé.

   • Vérifier la Redirection : Assurez-vous que vous êtes redirigé vers la liste des utilisateurs avec un message confirmant la suppression.

Points à Retenir#

• Utilisez un formulaire avec une méthode POST et la directive @method('DELETE') pour effectuer la suppression d'un utilisateur.

• La directive @csrf est essentielle pour protéger votre application des attaques CSRF.

Cet exercice vous permettra de mieux comprendre comment gérer la suppression des ressources dans Laravel tout en assurant la sécurité des opérations.

Exercice : Ajout de la Recherche sur le Nom et l'Email#

Dans cette section, nous allons implémenter une fonctionnalité de recherche pour permettre aux utilisateurs de rechercher des noms ou des emails dans la liste des utilisateurs sur la page index. Cette recherche sera envoyée à l'aide d'un formulaire avec un paramètre GET.

Objectifs#

• Ajouter un formulaire de recherche sur la vue index.blade.php.
• Modifier la méthode index() dans le UserController pour inclure la logique de recherche.
• Gérer la recherche via un paramètre GET.

Étapes à Suivre#

1. Ajouter le Formulaire de Recherche à la Vue Index

   • Ouvrez la vue index.blade.php et ajoutez un formulaire de recherche en haut de la page.
   • Ce formulaire doit contenir un champ input pour la recherche, ainsi qu'un bouton pour soumettre le formulaire.
   • Utilisez la méthode GET dans le formulaire pour que les critères de recherche apparaissent dans l'URL.
   • Exemple : placez un champ de texte avec un bouton "Rechercher" à côté pour soumettre la recherche.

2. Méthode Index dans le UserController

   • Modifiez la méthode index() dans le UserController pour inclure la logique de recherche.
   • Récupérez le paramètre search à partir de la requête et utilisez-le pour filtrer les utilisateurs.
   • Utilisez la méthode where() sur le modèle User pour rechercher par nom ou par email en fonction de la valeur du paramètre search.
   • Assurez-vous de conserver la pagination, même lors de l'application du filtre de recherche.

3. Afficher les Critères de Recherche

   • Lorsque les résultats de recherche sont affichés, le champ de recherche doit préserver la valeur de la recherche en cours pour indiquer ce que l'utilisateur a recherché.
   • Utilisez la fonction old() ou request()->input() pour pré-remplir le champ de recherche avec la valeur précédemment saisie.

Conseils pour la Recherche#

• La recherche devrait être insensible à la casse pour rendre l'expérience utilisateur plus agréable.
• Vous pouvez utiliser la méthode orWhere() pour permettre de rechercher à la fois sur le nom et sur l'email.
• Pensez à ajouter un message indiquant à l'utilisateur s'il n'y a aucun résultat correspondant aux critères de recherche.

Vérification de la Fonctionnalité#

• Tester la Recherche : Accédez à la liste des utilisateurs et effectuez une recherche en entrant un nom ou un email dans le champ de recherche. Cliquez sur le bouton "Rechercher" et vérifiez que la liste des utilisateurs se met à jour correctement.
• Tester l'Absence de Résultats : Entrez une valeur qui ne correspond à aucun utilisateur et vérifiez que le message d'absence de résultats s'affiche correctement.

Points à Retenir#

• La recherche doit être intuitive pour l'utilisateur, avec une interface claire et un retour approprié lorsque aucun résultat n'est trouvé.
• Utiliser des paramètres GET permet de partager facilement les critères de recherche via l'URL.

Cette fonctionnalité de recherche vous permettra de rendre votre application plus pratique et plus efficace pour l'utilisateur final.