×

Créer et gérer un formulaire de connexion et d’inscription avec Symfony Framework

Programmation

Créer et gérer un formulaire de connexion et d’inscription avec Symfony Framework

Dans ce tutoriel, on va créer et gérer un formulaire de connexion et d’inscription en HTML/CSS avec Symfony. On utilisera le Framework Symfony pour la gestion des formulaires, de la validation et de la logique côté serveur.

Étape 1 : Installation de Symfony

Si vous n’avez pas encore Symfony installé, vous pouvez le faire en suivant les instructions sur le site officiel de Symfony : https://symfony.com/download

Étape 2 : Création d’un nouveau projet Symfony

Utilisez la commande Symfony pour créer un nouveau projet :

symfony new nom_de_votre_projet

Étape 3 : Création d’une entité User

Dans Symfony, les utilisateurs sont généralement gérés en utilisant la sécurité et le composant FOSUserBundle. Vous pouvez créer une entité User avec la commande suivante :

php bin/console make:user

Suivez les instructions pour configurer votre entité User. Assurez-vous d’inclure un champ password pour stocker le mot de passe de l’utilisateur.

Étape 4 : Création d’un formulaire Symfony

Utilisez la commande Symfony pour créer un formulaire de connexion et d’inscription :

php bin/console make:form

Suivez les instructions pour créer un formulaire de connexion et un formulaire d’inscription. Vous devrez également créer un modèle (Entity) associé à ces formulaires. Par exemple, LoginForm et RegistrationForm avec leurs modèles respectifs.

Étape 5 : Personnalisation des formulaires

Ouvrez les fichiers générés dans src/Form et personnalisez-les en ajoutant les champs nécessaires tels que email, password, nom, prenom, etc. Définissez les contraintes de validation selon vos besoins.

// src/Form/LoginFormType.php
// src/Form/RegistrationFormType.php
use Symfony\Component\Validator\Constraints as Assert;

// ...

class LoginFormType extends AbstractType
{
    public function buildForm(FormBuilderInterface $builder, array $options)
    {
        $builder
            ->add('email', EmailType::class, [
                'constraints' => [
                    new Assert\NotBlank(),
                    new Assert\Email(),
                ],
            ])
            ->add('password', PasswordType::class, [
                'constraints' => [
                    new Assert\NotBlank(),
                ],
            ]);
    }
}

class RegistrationFormType extends AbstractType
{
    public function buildForm(FormBuilderInterface $builder, array $options)
    {
        $builder
            ->add('email', EmailType::class, [
                'constraints' => [
                    new Assert\NotBlank(),
                    new Assert\Email(),
                ],
            ])
            ->add('plainPassword', PasswordType::class, [
                'constraints' => [
                    new Assert\NotBlank(),
                ],
            ])
            ->add('nom')
            ->add('prenom');
    }
}

Étape 6 : Création des vues Twig

Créez des vues Twig pour afficher les formulaires de connexion et d’inscription. Ces vues seront généralement situées dans templates/security.

login.html.twig

{% extends 'base.html.twig' %}

{% block body %}
    <h2>Connexion</h2>
    {{ form_start(form) }}
    {{ form_widget(form) }}
    <button type="submit" class="btn btn-primary">Se connecter</button>
    {{ form_end(form) }}
{% endblock %}

registration.html.twig

{% extends 'base.html.twig' %}

{% block body %}
    <h2>Inscription</h2>
    {{ form_start(form) }}
    {{ form_widget(form) }}
    <button type="submit" class="btn btn-primary">S'inscrire</button>
    {{ form_end(form) }}
{% endblock %}

Étape 7 : Configuration de la sécurité

Dans config/packages/security.yaml, configurez la sécurité pour utiliser le formulaire de connexion :

security:
    providers:
        app_user_provider:
            entity:
                class: App\Entity\User
                property: email

    firewalls:
        main:
            pattern: ^/
            form_login:
                login_path: app_login
                check_path: app_login
                default_target_path: app_home
            logout:
                path: app_logout
                target: app_login
            anonymous: true

Étape 8 : Création des routes

Définissez les routes pour les pages de connexion et d’inscription dans config/routes.yaml :

app_login:
    path: /login
    controller: App\Controller\SecurityController::login

app_logout:
    path: /logout

app_register:
    path: /register
    controller: App\Controller\SecurityController::register

Étape 9 : Création des contrôleurs

Créez les contrôleurs SecurityController.php pour gérer les actions de connexion et d’inscription.

SecurityController.php

// src/Controller/SecurityController.php
use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
use Symfony\Component\HttpFoundation\Request;
use Symfony\Component\Routing\Annotation\Route;
use Symfony\Component\Security\Http\Authentication\AuthenticationUtils;
use Symfony\Component\Security\Core\Encoder\UserPasswordEncoderInterface;

class SecurityController extends AbstractController
{
    /**
     * @Route("/login", name="app_login")
     */
    public function login(AuthenticationUtils $authenticationUtils)
    {
        $error = $authenticationUtils->getLastAuthenticationError();
        $lastUsername = $authenticationUtils->getLastUsername();

        return $this->render('security/login.html.twig', [
            'last_username' => $lastUsername,
            'error' => $error,
        ]);
    }

    /**
     * @Route("/register", name="app_register")
     */
    public function register(Request $request, UserPasswordEncoderInterface $passwordEncoder)
    {
        $user = new User();
        $form = $this->createForm(RegistrationFormType::class, $user);
        $form->handleRequest($request);

        if ($form->isSubmitted() && $form->isValid()) {
            // Encode the plain password
            $password = $passwordEncoder->encodePassword($user, $user->getPlainPassword());
            $user->setPassword($password);

            // Save the user
            $entityManager = $this->getDoctrine()->getManager();
            $entityManager->persist($user);
            $entityManager->flush();

            // Redirect to login page
            return $this->redirectToRoute('app_login');
        }

        return $this->render('security/registration.html.twig', [
            'form' => $form->createView(),
        ]);
    }
}

Étape 10 : Création d’une page d’accueil

Créez une page d’accueil (templates/home.html.twig) où les utilisateurs peuvent être redirigés après la connexion.

home.html.twig

{% extends 'base.html.twig' %}

{% block body %}
    <h2>Bienvenue

 sur notre site !</h2>
    {# Ajoutez ici le contenu de la page d'accueil après la connexion #}
{% endblock %}

Étape 11 : Création de la base de données et de la table User

Exécutez les migrations pour créer la base de données et la table User en utilisant la commande Symfony:

php bin/console doctrine:migrations:migrate

Étape 12 : Exécution de l’application

Exécutez votre application Symfony en utilisant le serveur de développement interne :

symfony server:start

Vous pouvez maintenant accéder à votre application dans votre navigateur à l’adresse http://localhost:8000.

Voilà, vous avez créé un formulaire de connexion et d’inscription en utilisant Symfony. N’oubliez pas de personnaliser davantage l’interface utilisateur et d’ajouter des fonctionnalités supplémentaires selon vos besoins spécifiques.

Related Posts

109 commentaires