• 20 heures
  • Moyenne

Ce cours est visible gratuitement en ligne.

Vous pouvez obtenir un certificat de réussite à l'issue de ce cours.

Vous pouvez être accompagné et mentoré par un professeur particulier par visioconférence sur ce cours.

J'ai tout compris !

Iteration 14 : Bootstrap Twitter, Twig, les formulaires et la validation...

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

Dans cette itération, nous allons utiliser une fonctionnalité de "Bootstrap Twitter" bien pratique, nous allons générer facilement des formulaires qui utilisent les style CSS de Bootstrap.

Nous allons aussi nous assurer que les internautes ne tentent pas de remplir le formulaire avec des données invalides.

Dans un second temps nous allons valider les formulaires pour nous assurer que les internautes postent les bonnes informations.

Modification d'un formulaire

Nous allons modifier le fichier views/article_form.html.twig  comme ceci :

{% extends 'layout.html.twig' %}
{% form_theme articleForm 'bootstrap_3_horizontal_layout.html.twig' %}
{% set adminMenu = true %}

{% block title %}{{ title }}{% endblock %}

{% block content %}
    <h2 class="text-center">{{ block('title') }}</h2>
    {% for flashMessage in app.session.flashbag.get('success') %}
        <div class="alert alert-success">
            {{ flashMessage }}
        </div>
    {% endfor %}

    <div class="well">
        {{ form_start(articleForm) }}
        
        {{ form_row(articleForm.title) }}                   
        {{ form_widget(articleForm.title) }}

        {{ form_row(articleForm.content) }}
        {{ form_widget(articleForm.content) }}

        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-3">
                <input type="submit" class="btn btn-primary" value="Save" />
            </div>
        </div>
        {{ form_end(articleForm) }}
    </div>
{% endblock %}

En ligne 2, il faut commencer par faire appel au template'bootstrap_3_horizontal_layout.html.twig',  on va lui préciser pour quel formulaire on veut appliquer le style Bootstrap et si on veut qu'il soit horizontal ou vertical.

On va aussi préciser le nom du formulaire que l'on veux styler : articleForm.

On va aussi nettoyer le mélange de code HTML et de balises Twig pour les remplacer par ceci :

{{ form_row(articleForm.title) }}                   
{{ form_widget(articleForm.title) }}

{{ form_row(articleForm.content) }}
{{ form_widget(articleForm.content) }}

On a besoin de  deux fonctions, form_row()et form_widget(), Twig se charge de générer les balises HTML dont les labels tous seul... En paramètre, on passe le champ désiré.

A partir de ce moment, votre formulaire est généré automatiquement avec le style Bootstrap Twitter.

Mise en place des contraintes

Il faut vérifier que vous avez bien ajouté le service ValidatorServiceProviderdans votre fichierapp.php.

Si ce n'est pas le cas, il faut ajouter la ligne :

<?php
$app->register(new Silex\Provider\ValidatorServiceProvider());

Modification de articleType.php

Le fichier à modifier est src/Form/Type/ArticleType.php. Nous allons préciser les types de valeurs que nous acceptons.

On commence par ajouter le namespace  Symfony\Component\Validator\Constraints avec l'alias Assert, ce qui donne : use Symfony\Component\Validator\Constraints as Assert;

Je me rends dans la méthode ->add()  du champ "title" et après TextType::class  on ajoute un array()  qui contiendra plusieurs arguments :

<?php
->add('title', TextType::class, array(
                    'required'    => true,
                    'constraints' => array(
                        new Assert\NotBlank(), 
                        new Assert\Length(array(
                        'min' => 5,'max' => 100,
                        ))),
  • "required", signifie que le champ est requis, si on valide le formulaire sans le remplir, le navigateur refusera de l'envoyer et une infobulle apparaitra pour nous le rappeler.

    Cette vérification n'est que du HTML, il est très facile de désactiver cette obligation dans votre navigateur avec la console.

  • "constraints", là c'est Silex qui effectue des vérifications et il est "tatillon" :-°.

    • En premier lieu, le champ ne doit pas être vide, Assert\NotBlank()mais ce n'est pas tout, je décide qu'il ne peut pas contenir moins de 5 caractères et pas plus de 100. Rappelez-vous, le champ dans notre base de données ne peut pas en contenir plus. Pour cela j'utilise Assert\Length(array('min' => 5,'max' => 100,). Min et  max sont là pour vérifier les tailles.

Résultat de la validation
Résultat de la validation

Voila ce qui se passe quand on  ne met pas de données valides.

Pour le champ "content", je procède de la même manière, ce qui nous donne pour ce fichier :

<?php

namespace MicroCMS\Form\Type;

use Symfony\Component\Form\AbstractType;
use Symfony\Component\Form\FormBuilderInterface;
use Symfony\Component\Form\Extension\Core\Type\TextType;
use Symfony\Component\Form\Extension\Core\Type\TextareaType;
use Symfony\Component\Validator\Constraints as Assert;

class ArticleType extends AbstractType
{

    public function buildForm(FormBuilderInterface $builder, array $options) {
        $builder
                ->add('title', TextType::class, array(
                    'required'    => true,
                    'constraints' => array(
                        new Assert\NotBlank(), 
                        new Assert\Length(array(
                        'min' => 5,'max' => 100,
                        ))),
                ))
                ->add('content', TextareaType::class, array(
                    'required'    => true,
                    'constraints' => new Assert\NotBlank(),
        ));
    }

    public function getName() {
        return 'article';
    }

}

 Silex est bien fait, je vous livre la totalité des contraintes que l'on peut appliquer à un champ de formulaire :

Les plus simples :

  • NotBlank

  • Blank

  • NotNull

  • IsNull

  • IsTrue

  • IsFalse

  • Type

  • ...

Voici un lien vers la liste complète.

Il existe de nombreux autres validateurs, dont certains sont très pratiques. L'exemple suivant sera le validateur d'email. Grâce à lui, vous n'avez pas besoin d'utiliser une expression régulière  compliquée et souvent fausse.

Voici son fonctionnement :

Prenons le fichierCommentForm.php  situé danssrc/Form/Type. Le champ email va avoir une nouvelle contrainte, on lui signifie qu’on veut qu'il soit de type email avec une vérification de l'entrée DNS de type MX. C'est pour s'assurer que l'internaute propose bien  un email avec un domaine qui existe et qu'il est bien configuré pour envoyer des emails. En gros il va refuser les emails avec un domaine inexistant.

Voila à quoi cela va ressembler :

<?php

namespace MicroCMS\Form\Type;

use Symfony\Component\Form\AbstractType;
use Symfony\Component\Form\FormBuilderInterface;
use Symfony\Component\Form\Extension\Core\Type\TextareaType;
use Symfony\Component\Form\Extension\Core\Type\EmailType;
use Symfony\Component\Form\Extension\Core\Type\UrlType;
use Symfony\Component\Validator\Constraints as Assert;

class CommentType extends AbstractType
{

    public function buildForm(FormBuilderInterface $builder, array $options) {
        $builder->add('email', EmailType::class, [
                    'label'           => 'Votre eMail ',
                    'attr'            => ['placeholder' => '(ne sera pas publié)'],
                    'required'        => true,
                    'invalid_message' => 'Cette eMail n\'est pas valide.',
                    'constraints'     => new Assert\Email(['checkMX' => true]),
                ])
                ->add('website', UrlType::class, [
                    'label'           => 'Your webSite',
                    'required'        => false,
                    'constraints'     => new Assert\Url(),
                ])
                ->add('content', TextareaType::class,[
                    'label'       => 'Your comment',
                    'required'    => true,
                    'constraints' => new Assert\NotBlank(),
        ]);
    }

    public function getName() {
        return 'comment';
    }

}

Noter que j'utilise pour cet l'exemple les tableaux entre crochets[], c'est juste pour l'exemple, vous pouvez aussi écrirearray();.

Vous devriez trouver votre bonheur, si toutefois il vous manque des cas, je vous renvoie à la documentation car il est possible de rajouter ses propres contraintes.

Toues ces modifications sont disponibles sur Github dans l'itération 14.

Exemple de certificat de réussite
Exemple de certificat de réussite