Formulaires

Codes répétitifs, validation difficile, HTML illisible, beaucoup d’erreurs possibles…

Le paquet Form permet d’automatiser la mise en place d’un formulaire et d’en faciliter la validation (les données soumises et validées sont insérées en base de données automatiquement). L’affichage est automatisé.

Ce paquet est couplé avec le paquet Validator qui permet de personnaliser les règles de validation.

📌

Pour aller plus loin : http://www.cril.univ-artois.fr/~hemery/enseignement/An18-19/php_symfony/td-tp/td_tp_3.html

Créer un formulaire

installer les deux paquets : composer require form

créer un formulaire : symfony console make:form > MonFormType >MonEntiteLiee

Un dossier Form est créé dans src. Le formulaire est une classe PHP qui hérite de Form.

Son nom correspond à celui de l’entité concernée, on peut y ajouter le mot-clé “Form” et ilse termine toujours par “Type”.

Il contient la méthode buildForm() avec une variable $builder qui liste les champs du formulaire ou input. Il devine un type par défaut.

// MovieFormType
<?php

namespace App\Form;

use App\Entity\Movie;
use Symfony\Component\Form\AbstractType;
use Symfony\Component\Form\FormBuilderInterface;
use Symfony\Component\OptionsResolver\OptionsResolver;

class MovieFormType extends AbstractType
{
    public function buildForm(FormBuilderInterface $builder, array $options): void
    {
        $builder
            ->add('title')
            ->add('releaseYear')
            ->add('country')
            ->add('wasSeen')
        ;
    }

    public function configureOptions(OptionsResolver $resolver): void
    {
        $resolver->setDefaults([
            'data_class' => Movie::class,
        ]);
    }
}

Tout est personnalisable.

Les types de champs sont nombreux, dont Text, TextArea, Email, Password, Integer, Search, Tel, Choice, Entity, Date, File. On les modifie en indiquant le type suivi de ::class (on fait appel à la classe en général, sans passer par une instance).

Des options peuvent être ajoutées dans un tableau, comme label, attr et required.

class MovieFormType extends AbstractType
{
    public function buildForm(FormBuilderInterface $builder, array $options): void
    {
        $builder
            ->add('title', TextType::class, [
                "label" => "Titre ",
                "required" => true
            ])
            ->add('releaseYear', IntegerType::class, ["label" => "Année de sortie "])
            ->add('country', TextType::class, ["label" => "Pays "])
            ->add('wasSeen', CheckboxType::class, ["label" => "Déjà vu ?"])
        ;
    }

ℹ️

C’est ici qu’on définit les contraintes par rapport à l’utilisateur, comme les champs obligatoires qui se transforme en required dans le fichier HTML.

⚠️

Ce ne sont en aucun cas des contraintes de validation des données, simplement des indications pour aider l’utilisateur à remplir correctement le formulaire.

Afficher un formulaire

Dans la classe du formulaire (-Type), on définit les champs.

Dans le contrôleur correspondant,

on crée une instance de l’entité associée

on crée une instance du formulaire

on envoie le formulaire vers le twig

#[Route('/create', name: '_create')]
    public function create(): Response
    {
        $movie = new Movie();
        $movieForm = $this->createForm(MovieFormType::class, $movie);
        return $this->render('movie/create.html.twig',
            compact('movieForm')
        );
    }

Dans le twig, il est possible d’afficher le formulaire de façon plus ou moins décomposée

en une ligne

{{ form(movieForm) }}

en indiquant le début, le milieu, la fin (BP)

{{ form_start(movieForm) }}
{{ form_widget(movieForm) }}
<button>OK</button>
{{ form_end(movieForm) }}

en détaillant chaque champ

{{ form_start(movieForm) }}
{{ form_widget(movieForm.champ1) }}
{{ form_widget(movieForm.champ2) }}
{{ form_widget(movieForm.champ3) }}
<button>OK</button>
{{ form_end(movieForm) }}

en détaillant encore plus chaque champ

{{ form_start(movieForm) }}
<div class="champ">
	{{ form_label(movieForm.champ1) }}
	{{ form_widget(movieForm.champ1) }}
	{{ form_errors(movieForm.champ1) }}
</div>
(...)
<button>OK</button>
{{ form_end(movieForm) }}

en détaillant autant qu’en HTML

{{ form_start(movieForm) }}
<div class="champ">
<label for="{{ field_name(movieForm.champ1) }}">Champs 1</label>
	<input type="text"
			id="{{ field_name(movieForm.champ1) }}"
			name="{{ field_name(movieForm.champ1) }}"
			value="{{ field_value(movieForm.champ1) }}"
			placeholder="{{ field_label(movieForm.champ1) }}"
			class="form-control"
	>
	
	{% for error in field_errors(movieForm.champ1) %}
		<div class="error">{{ error}}</div>
	{% endfor%}
</div>
(...)
<button>OK</button>
{{ form_end(movieForm) }}

Pour le bouton de soumission du formulaire, il existe deux possibilités :

soit l’ajouter dans la classe du formulaire : ->add('ok', ButtonType::class) ou ->add('ok', SubmitType::class)

soit l’ajouter dans le Twig qui affiche le formulaire, avec une balise <input type="submit"> ou une balise <button>

Pour pré-remplir une case, on utilise les setters dans le contrôleur : $movie->setCountry("France");.

Pour ajouter un thème, on l’indique dans le Twig (ex : bootstrap_5_layout.html.twig).

{% form_theme serieForm 'nomdutheme' %}

Les classes correspondantes sont ajoutées lors de la compilation en HTML. Il faut en plus rajouter bootstrap en CDN par exemple :

// dans le base.html.twig pour appliquer partout
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">

📌

Pour aller plus loin : https://symfony.com/doc/current/form/form_themes.html

Traiter un formulaire

Le traitement se fait sur la même page.

Dans le contrôleur,

on injecte Request

on utilise la méthode de l’instance de formulaire handleRequest pour gérer le traitement de la saisie

on vérifie si le formulaire est soumis avec isSubmitted

si oui, on effectue le traitement souhaité (insertion ou mise à jour données, redirection, affichage d’un message à l’utilisateur)

#[Route('/create', name: '_create')]
    public function create(
        Request $request,
        EntityManagerInterface $entityManager
    ): Response
    {
        $movie = new Movie();
        $movieForm = $this->createForm(MovieFormType::class, $movie);
        $movieForm->handleRequest($request);
        if ($movieForm->isSubmitted()) {
						// traitement, ici insertion en base
            $entityManager->persist($movie);
            $entityManager->flush();
            $this->addFlash('success', 'Film ajouté à la liste !');
            return $this->redirectToRoute('movie_list');
        }
        return $this->render('movie/create.html.twig',
            compact('movieForm')
        );
    }

ℹ️

Quand le formulaire est soumis, ça recharge la page (sauf si on indique une redirection avec $this->redirectToRoute('movie_list');).

Pour afficher un message sur la page suivante, on utilise des message flash qui sont stockés en session et détruits dès qu’ils sont affichés.

on en crée un dans le contrôleur, généralement après la soumission et la validation des données : $this->addFlash('success', 'Film ajouté à la liste !');

on indique comment afficher le message flash dans le Twig avec une boucle for, généralement dans le base.html.twig pour en simplifier la gestion

{% for label, messages in app.flashes%}
	{% for message in messages %}
		<div class="alert-{{ label }}">
			{{ message }}
		</div>
	{% endfor%}
{% endfor%}

ℹ️

Pour modifier l’affichage du message flash en CSS, on utilise le sélecteur de classe .alert-lelabel :

.alert-success {
    text-align: center;
    background-color: darkseagreen;
    color: white;
    padding: 1%;
}

Pour vider les champs après soumission,

on crée une nouvelle instante de l’entité ($serie = new Serie();) et un autre createForm() pour le lier après le flush,

ou on redirige (sur la même page, ou sur une page qui indique que le traitement a bien fonctionné)

BONUS

Un paquet permet de générer automatiquement les 4 formulaires du CRUD avec les contrôleurs et les Twigs. Il génère même les tests unitaires.

installer le paquet : composer require security-csrf

générer tout ça : symfony console make:crud > MonEntite > LeController > Yes (tests unitaires)

Valider les données

Les règles de validation sont des contraintes métier permettent de s’assurer que l’utilisateur envoie des données telles qu’attendues.

Sous Symfony, on valide l’entité avec une configuration faite avec XML, YAML, PHP, annotations ou attributs (BP).

Il existe plus de 40 validations prédéfinies et il est possible d’en créer d’autres.

Exemples : NotBlank, Type, Email, Length, Url, Regex, Range, EqualTo / NotEqualTo, LessThan / GreaterThan, Date, Choice, UniqueEntity, File, Image, Callback.

Pour appliquer une contrainte :

installer le paquet : composer require validator
Dans l’entité,

importer la classe Constraints et lui donner l’alias Assert : use Symfony\Component\Validator\Constraints as Assert;

ajouter des attributs à façon avec #[@Assert\UneContrainte(des options)]

BP : On met toujours une contrainte de longueur sur les string, pour qu’elles ne soient pas tronquées en base.

ℹ️

On a ainsi des contraintes “front” avec l’Assert et des contraintes “back” avec l’ORM, elles sont complémentaires.

Pour que les contraintes fonctionnent, on vérifie que le formulaire a été soumis (l’utilisateur a cliqué sur le bouton) ET qu’il est valide (tous les champs respectent les contraintes) :

if ($movieForm->isSubmitted() && $movieForm->isValid())

Il est possible de créer une contrainte, avec une classe qui hérite de Constraints (un peu long).

En vrac

⚙

Outils : Suite Burp, un outil dédié à l’audit de sécurité des plateformes web https://portswigger.net/burp https://www.vaadata.com/blog/fr/introduction-burp-outil-dedie-securite-plateformes-web/

Attaques CSRF (Cross Site Request Forgery) :
Dans la fonction createForm(), Symfony ajoute l’attribut CSRF token afin de pouvoir vérifier si c’est bien ce projet qui a généré le formulaire (soupe obscure interne de vérification).
En effet, il est facile de copier le code source d’un formulaire, l’enregistrer en HTML et lancer une copie = une faille de sécurité à citer.

Connaître au minimum le OWASP Top10 : https://owasp.org/www-project-top-ten/

Un paquet pour hasher un mot de passe : symfony console security:hash
Il donne accès à une méthode qui nous demande le mot de passe en clair et produit le hash correspondant, qu’on peut insérer en db.
Utile notamment si on veut changer un mot de passe qu’on a oublié, quand on est en dév…