Cours - Symfony - Chapitre 03 - Création d'un formulaire


Introduction


Nous limiterons ce chapitre à l’envoi d’un email lorsque l’utilisateur soumettra son formulaire. Dans le prochain chapitre, nous conserverons la prise de contact dans une base de données.


Création du formulaire


Symfony fournit un outil qui vous aidera à construire votre formulaire plus rapidement.


Installation du package


composer require symfony/form


Création du formulaire


php bin/console make:form


Nommez-le « Contact ».


Ne répondez rien lorsqu’il vous demandera le nom de l’entité. Une fois terminé, le fichier « ContactType.php » se trouvera dans le répertoire « src/Form ». Si vous ne le voyez pas, rafraichissez la colonne de gauche de VSCODE en cliquant sur


Voici son contenu :


<?php
namespace App\Form;

use Symfony\Component\Form\AbstractType;
use Symfony\Component\Form\FormBuilderInterface;
use Symfony\Component\OptionsResolver\OptionsResolver;

class ContactType extends AbstractType
{
    public function buildForm(FormBuilderInterface $builder, array $options): void
    {
        $builder
            ->add('field_name')
        ;
    }

    public function configureOptions(OptionsResolver $resolver): void
    {
        $resolver->setDefaults([
            // Configure your form options here
        ]);
    }
}


Commentaires :


La nouvelle classe permettant de créer un formulaire hérite de « AbstractType ».

La méthode « buildForm » va nous permettre d’ajouter tous les composants nécessaires à la création du formulaire.

$builder ->add('field_name'); La variable $builder contient le formulaire. On y ajoute des composants avec la méthode « add ». Par défaut, une zone de saisie est ajoutée et se nomme « field_name ».

La méthode « configureOptions » permet de configurer les options du formulaire. Nous verrons cela dans un prochain chapitre.


Intégration du formulaire dans le contrôleur


Dans le fichier « src/Controller/BaseController.php », réalisez les étapes suivantes :


  • Importation de notre nouvelle classe « ContactType » dans les « use » tout en haut du fichier.


    <?php
    
    namespace App\Controller;
    
    use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
    use Symfony\Component\HttpFoundation\Response;
    use Symfony\Component\Routing\Annotation\Route;
    use App\Form\ContactType;
    
    class BaseController extends AbstractController


  • Dans la fonction « contact », demandez au contrôleur (en passant par sa méthode « createForm ») de créer le formulaire en lui donnant la nouvelle classe créée. Le formulaire sera stocké dans la variable « $form ».

     $form = $this->createForm(ContactType::class);


  • Donnez le formulaire à la vue lorsque vous appelez le fichier TWIG. Par la même occasion, vous demandez au formulaire de générer le code HTML avec la méthode « createView ».

     'form' => $form->createView()


    Voici le code complet de la fonction « contact »:


    #[Route('/contact', name: 'contact')]
        public function contact(): Response
        {
            $form = $this->createForm(ContactType::class);
            return $this->render('base/contact.html.twig', [
                'form' => $form->createView()
            ]);
        }


    Intégration du formulaire dans la vue 


    Dans le fichier « templates/base/contact.html.twig », appelez le formulaire avec la fonction « form » de TWIG. Le formulaire se trouve dans la variable « form ». Voici le code complet de ce fichier :


    {% extends 'base.html.twig' %}
    
    {% block title %}{{parent()}}Contact{% endblock %}
    
    {% block body %}
        <h1 class="text-center text-primary mt-4 pt-4 display-1 fw-bold"> CONTACT</h1>
        {{form(form)}}
    {% endblock %}



    Voici le rendu de la page « contact » :




    Nous voyons notre formulaire s’afficher. Il nous reste à le modifier pour répondre à nos besoins.


    Personnalisation du formulaire


    Notre formulaire de contact contiendra 4 composants :


    Variable

    Commentaire

    Composant à utiliser

    nom

    Nom de la personne qui saisit le formulaire

    Zone de saisie pour du texte

    sujet

    Sujet du message qui sera envoyé

    Zone de saisie pour du texte

    email

    Email de la personne qui envoie le formulaire

    Zone de saisie pour un email

    message

    Contenu du message

    Zone de saisie sur plusieurs lignes


    Une fois que nous avons analysé le type de composant nécessaire pour chaque élément du formulaire, nous allons chercher leur nom dans la documentation de Symfony.


    Voici l’adresse :

    https://symfony.com/doc/current/reference/forms/types.html


    Conseil : Lorsque vous consultez la documentation, vérifiez que vous êtes dans la bonne version de Symfony en regardant la liste déroulante située en haut à droite de l’écran.



    Voici la correspondance :


    Variable

    Nom du composant Symfony

    nom

    TextType

    sujet

    TextType

    email

    EmailType

    message

    TextareaType


    Pour chaque type de composants, vous devez importer la classe qui correspond. Vous la trouverez dans la documentation on en tapant la commande suivante :


    php bin/console debug:form TextType


    Commentaire : remplacez TextType par le nom d’un autre composant.


    Exemple de ligne à copier pour déclarer une classe :


    Symfony\Component\Form\Extension\Core\Type\TextType


    Puis complétez/modifiez le fichier src/Form/ContactType.php :


    <?php
    
    namespace App\Form;
    
    use Symfony\Component\Form\AbstractType;
    use Symfony\Component\Form\FormBuilderInterface;
    use Symfony\Component\OptionsResolver\OptionsResolver;
    use Symfony\Component\Form\Extension\Core\Type\TextType;
    use Symfony\Component\Form\Extension\Core\Type\EmailType;
    use Symfony\Component\Form\Extension\Core\Type\TextareaType;
    
    class ContactType extends AbstractType
    {
        public function buildForm(FormBuilderInterface $builder, array $options): void
        {
            $builder
                ->add('nom', TextType::class)
                ->add('sujet', TextType::class)
                ->add('email', EmailType::class)
                ->add('message', TextareaType::class)
            ;
        }
    
        public function configureOptions(OptionsResolver $resolver): void
        {
            $resolver->setDefaults([
                // Configure your form options here
            ]);
        }
    }



    Voici le rendu de la page « contact » :




    Il nous faut un bouton de type « Submit » afin de pouvoir soumettre le formulaire. Ajoutez-le dans votre formulaire comme ceci :


    <?php
    
    namespace App\Form;
    
    use Symfony\Component\Form\AbstractType;
    use Symfony\Component\Form\FormBuilderInterface;
    use Symfony\Component\OptionsResolver\OptionsResolver;
    use Symfony\Component\Form\Extension\Core\Type\TextType;
    use Symfony\Component\Form\Extension\Core\Type\EmailType;
    use Symfony\Component\Form\Extension\Core\Type\TextareaType;
    use Symfony\Component\Form\Extension\Core\Type\SubmitType;
    
    class ContactType extends AbstractType
    {
        public function buildForm(FormBuilderInterface $builder, array $options): void
        {
            $builder
                ->add('nom', TextType::class)
                ->add('sujet', TextType::class)
                ->add('email', EmailType::class)
                ->add('message', TextareaType::class)
                ->add('envoyer', SubmitType::class)
            ;
        }


    Interface de la page « Contact » :




    Mise en forme de la page « contact » 


    Il existe plusieurs méthodes pour mettre en forme une page avec Symfony. Pour « Bootstrap », il existe une ligne pour l’appliquer sur les formulaires. Cependant, je vous propose de travailler un peu plus afin que vous puissiez mettre en forme votre formulaire à partir du créateur de formulaires. Dans « src\Form\ContactType », ajoutez les instructions surlignées.


    public function buildForm(FormBuilderInterface $builder, array $options): void
        {
            $builder
                ->add('nom', TextType::class, ['attr' => ['class'=> 'form-control'], 'label_attr' => ['class'=> 'fw-bold']])
                ->add('sujet', TextType::class, ['attr' => ['class'=> 'form-control'], 'label_attr' => ['class'=> 'fw-bold']])
                ->add('email', EmailType::class, ['attr' => ['class'=> 'form-control'], 'label_attr' => ['class'=> 'fw-bold']])
                ->add('message', TextareaType::class, ['attr' => ['class'=> 'form-control', 'rows'=>'7', 'cols' => '7'], 'label_attr' => ['class'=> 'fw-bold']])
                ->add('envoyer', SubmitType::class, ['attr' => ['class'=> 'btn bg-primary text-white m-4' ], 'row_attr' => ['class' => 'text-center'],])
            ;
        }


    Commentaires :


    • 'attr' => ['class'=> 'form-control'] // permet d’attribuer la class css « form-control » de « Bootstrap » à une zone de saisie.

    • 'label_attr' => ['class'=> 'fw-bold'] // permet d’attribuer la classe « fw-bold » au label qui s’affiche au-dessus d’une zone de saisie. Le texte sera en gros.

    • 'rows'=>'7', 'cols' => '7'] // permet de préciser le nombre de lignes et le nombre de colonnes dans un « Textarea ».

    • 'row_attr' => ['class' => 'text-center'] // permet d’attribuer une classe à la ligne qui contient le composant, ici je l’utilise pour demander à la ligne de me centrer le bouton « envoyer ».




    Modification de l’affichage dans « contact.html.twig » 


    {% extends 'base.html.twig' %}
    
    {% block title %}
    	{{parent()}}Contact
    {% endblock %}
    
    {% block body %}
    	<div class="container-fluid">
    	    <div class="row justify-content-center">
    			
                        <div class="col-10 text-primary">
                            <h1 class="text-center text-primary mt-4 pt-4 display-1 fw-bold">CONTACT</h1>
                            {{form(form)}}
                        </div>    
    	    </div>
    	</div>
    {% endblock %}


    Commentaires :


    • <div class="container-fluid"> // permet au bloc de prendre toute la largeur de la page.

    • <div class="row justify-content-center"> // création d’une ligne dont le contenu sera centré sur la page.

    • <div class="col-10 text-primary"> // création d’une colonne qui prendra 10 colonnes de la page. Pour « Bootstrap », la largeur d’une page est de 12 colonnes.


    Nous avons terminé l’interface de notre page « contact », dans le prochain chapitre, nous allons voir comment récupérer les données afin d’envoyer un email.



    Voir le Chapitre 4