Utilisation des formulaires symfony

Mise en Route

• Créer un deuxième contrôleur ProduitV3Controller

• faire une copie du contrôleur précédent ProduitV1Controller
  • renommer la classe en ProduitV3Controller
  • remplacer le début des URN /produit par /produitv3 dans ce contrôleur (pour les URN dans les routes)
  • remplacer "produit_ par "produitv3_ dans ce contrôleur (pour les routes dans les annotations)
  • remplacer admin_produit_ par admin_produitv3_ dans ce contrôleur (pour les redirections)
  • copier le dossier templates/admin/produit dans le dossier templates/admin/produitv3 (utiliser le gestionnaire de fichiers pour éviter les erreurs de refactoring)
  • pour les vues, essayer de faire la modification en 1 seul "Rechercher/Remplacer" [Menu : Edit/Find/Replace In Path] sur le dossier templates/admin/produitv3 et remplacer admin_produit_ par admin_produitv3_
  • ajouter une route dans la vue du menu pour appeler la route produitv3_show
  • supprimer la route / de la méthode index de ce deuxième contrôleur
  • ajouter dans les vues V3 : essai form dans le texte affiché par la vue (chaque vue y compris _formProduit.html.twig)

ATTENTION à l'instruction include dans les vues pour ajouter et éditer un produit (phpStorm renomme mal les chemins)

Ajouter un lien la vue du menu templates/admin/_nav.html.twig

<a class="dropdown-item" href="{{ path('admin_produitv3_show') }}">Gestion des produits (v3)</a>

formulaire sur cette entité

"SYMFONY" prévoit dans les bonnes pratiques de programmation de sortir le code de l'objet du formulaire dans un autre fichier.

• générer un formulaire de nom ProduitType qui s'applique sur l'entité Produit (par convention une classe qui génère un formulaire possède un nom qui finit par Type)

symfony console make:Form ProduitType --help
symfony console make:Form ProduitType Produit

• le composant Form dispose d'un constructeur de formulaires (le form builder) capable de générer tout type de formulaire à partir de champs qu'il connaît déjà (champs de type texte, de type date...) ;

• en passant la classe au résolveur d'options du formulaire, le constructeur de formulaires est capable - à partir de la classe - de deviner quel type de champ il doit utiliser. Par exemple, si une classe a une propriété de type DateTime, alors le champ utilisé sera de type datetime en HTML.

ceci crée une classe ProduitType

mise en place

Vider le contenu des 2 méthodes addProduit et editProduit dans ce nouveau contrôleur

    /**
     * @Route("/produitv3/add", name="produitv3_add", methods={"GET","POST"})
     */
    public function addProduit(Request $request, ValidatorInterface $validator)
    {

    }


    /**
     * @Route("/produitv3/edit/{id}", name="produitv3_edit",  requirements={"<\d+>?1"}, methods={"GET","PUT"})
     */
    public function editProduit(Request $request, $id=null)
    {

    }

• supprimer le contenu du fichier templates/admin/produitv3/_formProduit.html.twig
• remplacer le contenu des 2 vues templates/admin/produitv3/addProduit.html.twig et templates/admin/produitv3/editProduit.html.twig par le contenu ci-dessous ; Dans la vue editProduit.html.twig pour modifier un produit, remplacer le mot "Créer" par "Modifier"

{% extends "admin/layout.html.twig" %}
{% block body %}
    <div class="container">
            <legend>Créer un produit (V3 : essai form)</legend>
            {{ include('admin/produitv3/_formProduit.html.twig', {action: 'Créer'}) }}
    </div>
{% endblock %}

utilisation du formulaire

Pour la suite, ce tp s'inspire de 2 tutoriaux ( ou tutoriels on devrait dire didacticiels ;-) )

• https://openclassrooms.com/fr/courses/5489656-construisez-un-site-web-a-l-aide-du-framework-symfony-4/5517026-interagissez-avec-vos-utilisateurs
• https://jobeet-tutorial.readthedocs.io/en/latest/days/day-8/

Après avoir ajouter l'espace de nom use App\Form\ProduitType; pour pouvoir utiliser le formulaire :

• compléter la méthode addProduit du contrôleur avec le code ci-dessous

$produit = new Produit();
$form = $this->createForm(ProduitType::class, $produit);

return $this->render('admin/produitv3/addProduit.html.twig', [
    'form' => $form->createView(),
]);

• remplacer la méthode editProduit du contrôleur avec le code ci-dessous

/**
* @Route("/produitv3/edit/{id}<\d+>", name="produitv3_edit",  methods={"GET","PUT"})
 */
public function editProduit(Request $request, $id=null)
{
    $produit = $this->getDoctrine()->getRepository(Produit::class)->find($id);
    if (!$produit)  throw $this->createNotFoundException('No produit found for id '.$id);
    $form = $this->createForm(ProduitType::class, $produit);

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

• commencer par modifier le contenu du fichier templates/admin/produitv3/_formProduit.html.twig

• commencer par tester

<h1>{{ action }} un produit</h1>
{{ form(form) }}

• Tester la méthode addProduit

• puis remplacer par

<h1>{{ action }} un produit</h1>
{{ form_start(form) }}
        {{ form_row(form.nom) }}
<label for="">le prix :</label>
        {{ form_widget(form.prix) }}
<button type="submit" class="btn btn-primary">{{ action|default('Valider') }}</button>
{{ form_end(form) }}

Pour information :

• form_widget(form.champ) : input
  
• form_row(form.champ) : form_label + form_widget + form_errors (avec form seul => tous les champs)
• form_start, form_end : affiche tous les champs non affichés
• form_rest (fin du formulaire) et csrf_token

traiter les données reçues

ajouter après la déclaration du formulaire, le code ci-dessous

    $form->handleRequest($request);

    if ($form->isSubmitted() && $form->isValid()) {
        $data = $form->getData();
        dump($data->getNom());
        dd($data);
    }

• Traiter le formulaire
  • une méthode de l'objet form permet de vérifier la soumission du formulaire : handleRequest($request), elle permet l'"hydratation" de l'objet form (mettre à jour le formulaire à l'aide des informations reçues de l'utilisateur)
  • $form->isSubmitted() && $form->isValid() vérifie si l'objet formulaire form a été soumis et si les données sont valides : pour fonctionner il faut avoir saisi les annotations dans l'entité (ce référer au tp précédent, mais pour faire un test vous pouvez faire un copier/coller du code ci-dessous dans l'entité src/Entity/Produit.php)

  /**
     * @ORM\Column(type="string", length=255)
     * @Assert\NotBlank(message="saisir un nom")
     * @Assert\Length(min=2, minMessage = "votre nom doit être composé de {{ limit }} caractères minimum")
     */
    private $nom;

    /**
     * @ORM\Column(name="prix", type="decimal", precision=8, scale=2, nullable=true)
     * @Assert\NotBlank(message = "Saisir un prix ")                                           //***
     * @Assert\Type(type="numeric",message =  "La valeur {{ value }} n'est pas valide, le type est {{ type }} ")
     * @Assert\Regex(
     *     pattern = "/^[0-9]{1,}\,{0,1}[0-9]{0,}$/",
     *     message = "Seulement un entier positif."
     *     )
     */
    private $prix;

• dans le formulaire templates/admin/produitv3/_formProduit.html.twig, remplacer l'instruction {{ form_start(form) }} par

{{ form_start(form, {'attr': {'novalidate': 'novalidate'}}) }}

Cette instruction désactive la validation html5 (plus de balise input de type date number ...., que des input type text)

Par défaut, un champ input généré par le formulaire a cette structure :

<input 
    type="text"
    id="produit_nom"
    name="produit[nom]"
    maxlength="30"
    pattern=".{3,}"
    class="form-control"
    value="pomme"
>

• Vérifier le contrôle des données et compléter les annotations de l'entité pour contrôler ces données.

persister les données

• persister les données en base de données, et faire une redirection sur l'affichage du tableau de produit

$this->addFlash('notice', 'Version 3 : Produit ' . $Produit->getNom() . ' ajouté');
return $this->redirectToRoute('admin_produitv3_showProduits');

• Lors de la modification d'un produit le verbe n'était pas bon ; solution possible :

      $form = $this->createForm(ProduitType::class, $produit, [
            'action' => $this->generateUrl('admin_produitv3_edit',['id'=>$id]),
            'method' => 'PUT',]);

Cependant, ça fonctionnait sans faire cette manipulation avant.

mise en forme avec bootstrap des objets "formulaire" de symfony

Pour mettre en forme avec bootstrap le formulaire : documentation sur la mise en forme

• Modifier dans la vue /templates/admin/produitv3/_formProduit.html.twig, le code de la balise {{ form_start}} par le code ci-dessous :

{# dans le fichier  /templates/admin/produitv3/_formProduit.html.twig #}
{% form_theme form 'bootstrap_4_layout.html.twig' %}

{{ form_start(form, {'attr': {'novalidate': 'novalidate', 'class': 'col-lg-5' }}) }}

Il est plus simple d'imposer pour tous les formulaires le style boostrap_4, modifier le fichier config/packages/twig.yaml avec le code ci-dessous et retirer la balise {% form_theme form 'bootstrap_4_layout.html.twig' %} de la vue ci-dessus (_formProduit.html.twig)

# config/packages/twig.yaml
twig:
    form_themes: ['bootstrap_4_layout.html.twig']

• rechercher le fichier de style (il est possible)

find . -name bootstrap_4_layout.html.twig
ls ./vendor/symfony/twig-bridge/Resources/views/Form/
subl ./vendor/symfony/twig-bridge/Resources/views/Form/bootstrap_4_layout.html.twig

• Tester

documentation symfony pour modifier le style d'un formulaire

Il existe tous les thèmes de formulaire en cherchant un peu, exemple de thème Materialize trouvé sur ce tuto

Modification de l'objet "Form"

• Modifier l'objet Form dans le fichier src/Form/ProduitType.php

        $builder
            ->add('nom', TextType::class, array(
                'constraints' => [
                    new Assert\NotBlank(['message' => 'Saisir le nom de l\'objet']),
                    new Assert\Length(['min' => 2, 'minMessage' => '2 caractères minimum pour le nom']),
                ],
                'required' => false
            ))
            ->add('stock', NumberType::class, array(
                'constraints' => [
                    new Assert\NotBlank(['message' => 'Saisir le stock de produit']),
                    new Assert\Type(['type' => 'numeric', 'message' => 'La valeur saisie n\'est pas un chiffre']),
                ],
                'required' => false
            ))
            ->add('dateLancement', DateType::class, array(
                'constraints' => [
                    new Assert\Date(['message' => 'La date doit avoir un format d/m/Y et ne peut pas être vide']),
                ],
                'widget' => 'single_text',
                'format' => 'dd/MM/yyyy',
                'required' => false,
                'placeholder' => 'jj/mm/aaaa',
                'html5' => false,
            ))
            ->add('disponible', TextType::class, array(
                'constraints' => [
                    new Assert\NotBlank(['message' => 'Saisir si le produit est disponible ou non']),
                ],
                'required' => false
            ))
            ->add('typeProduit', EntityType::class, array(
                'constraints' => [
                    new Assert\NotBlank(['message' => 'Choisir le type du produite']),
                ],
                'required' => false,
                'class' => TypeProduit::class,
                'choice_label' => 'libelle',
                'placeholder' => 'default'
            ))
            ->add('photo', TextType::class, [
                 'label' => 'photo',
                 'required' => false
               ])
            ->add('submit', SubmitType::class)

Pensez à ajouter les bons "namespace". Ci dessous, une liste des namespace à ajouter pour utiliser les objets type du formulaire

use Symfony\Component\Form\Extension\Core\Type\DateType;
use Symfony\Component\Form\Extension\Core\Type\NumberType;
use Symfony\Component\Form\Extension\Core\Type\SubmitType;
use Symfony\Component\Form\Extension\Core\Type\TextType;
use Symfony\Component\Form\Extension\Core\Type\TextareaType;
use Symfony\Component\Form\Extension\Core\Type\ChoiceType;
use Symfony\Component\Form\Extension\Core\Type\NumberType;
use Symfony\Component\Form\Extension\Core\Type\HiddenType;
use Symfony\Component\Form\Extension\Core\Type\CheckboxType;

• https://symfony.com/doc/current/reference/forms/types.html
• https://symfony.com/doc/current/reference/forms/types/choice.html#example-usage

ANNEXES

• Modifier un attribut dans la vue

        {{ form_row(form.submit, { 'label': 'Ajouter un produit' }) }}

• Voir la documentation sur les contraintes et choisir le type.