Access Code School (ACS), École du numérique pour tous en Bourgogne Franche-Comté, Auvergne Rhône-Alpes, Centre Val de Loire et Nouvelle-Aquitaine

Blog

Symfony 4 – connexion à un espace admin #loginform #bdd

Bonjour,
aujourd’hui je vous propose un petit tuto pour prendre en main Symfony 4 pour créer un login form et des identifiants utilisateurs stockés en bdd.

Avant de débuter est de assurez-vous que vous utilisez bien PHP 7.1 et que vous avez composer d’installé.

ÉTAPE 1 – INITIALISATION DU PROJET

Rendez-vous dans votre Terminal, placez-vous dans le dossier adéquat : /var/www/html/, choisissez un nom pour votre projet (ici my-project), et c’est parti :

Placez vous dans votre projet :

Faites votre premier commit :

Installez le bundle web server, puis lancez ce serveur :

RDV sur http://localhost:8000 pour voir si tout a bien fonctionné.

Nous allons ensuite installer les services et bundles dont nous aurons besoin pour la création de notre espace admin.

  • la debug toolbar, qui nous sera bien utile pour.. débuger comme son nom l’indique

  • doctrine, pour gérer la base de données

  • twig, toujours utile 😉

  • le security bundle, pour configurer les paramètres de sécurité de notre connexion

  • OPTIONNEL : les annotations, qui permettent de faire les routes directement dans le controller plutôt que dans le fichier « route »

ÉTAPE 2 – CRÉATION DE LA BASE DE DONNÉES

Rendez-vous dans le fichier .env de votre projet et modifiez la ligne suivante avec vos identifiants et le nom que vous souhaitez donner à votre bdd :

Crééz la bdd à l’aide de doctrine (allez vérifier qu’elle s’est bien créée, mais si vous n’avez pas de message d’erreur je dirais que c’est tout bon) :

Vous allez maintenant créer votre premier controller (je l’ai appelé UserController) :

Puis votre première entité (appelée User) :

Cette entité est un peu spéciale, elle contient des éléments indispensables, ne faites donc pas de demi copiés/collés adaptés à votre sauce tant que vous ne maîtrisez pas trop symfony (bibi a testé, ça marche pas).

Collez donc le contenu suivant dans votre Entity/User

Voilà, vous avez tous les getter et setters nécessaires à la création de votre utilisateur.

ÉTAPE 3 – CRÉATION D’UN UTILISATEUR/ADMIN

Dans le dossier « src » de votre projet, créez un dossier DataFixtures, puis un fichier AppFixtures.php

Que vous remplirez de la sorte :

A vous de modifier les données dans la fonction load (setEmail, setUsername, setPassword).

Installez le bundle qui permettra de gérer les fixtures :

Rendez-vous dans le fichier security.yaml et collez-y le contenu suivant (faites super attention à conserver l’indentation, sinon ça ne fonctionnera pas) :

la partie encoders: va permettre d’encoder le mot de passe.

Et maintenant, vous allez charger votre utilisateur dans la bdd, vous êtes prêts ?

ÉTAPE 4 – CRÉATION DU CONTROLLER ET DES TEMPLATES

Vous allez créer un nouveau controller pour gérer votre login, logout mais aussi votre admin (vous pouvez créer un autre controller pour cela si vous le souhaitez), j’ai appelé ce controller SecurityController :

Il contient les fonctions de connexion et de déconnexion ainsi que les routes (puisque j’ai installé annotations). Faites attention à bien nommer vos routes pour ma part c’est /connexion et /logout, mais vous pouvez faire comme vous le souhaitez).

Vous voyez aussi que ce controller contient les twigs vers les templates, nommez les comme vous le souhaitez également.

Ma route /connexion renvoie vers le template « security/connexion.html.twig » dont le contenu est le suivant :

Note : pour créer vos divers formulaires vous pouvez utiliser l’outil « form » de symfony 4 qui est très pratique !

Le fichier base.html.twig :

Le template admin (en cas de succès de l’identification) – admin/index.html.twig :

Modifiez également votre security.yaml :

(on ajoute les form_login et logout dans le main, le login_path correspond à l’action que vous indiquez dans le formulaire de connexion (<form action= »{{ path(‘connexion’) }} » method= »post »>).

Et voilà nous y sommes ! Rendez vous sur localhost:8000/connexion (ou ce que vous avez choisi pour votre login), entrez vos identifiants et c’est parti 🙂

 

About the Author

Ajouter un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *