Form per la modifica del profilo

Contrariamente a quello che potremmo pensare, il prossimo step non sarà quello di creare il markup necessario alla creazione del form. Symfony, attraverso un FormBuilder, ci consente di costruire il nostro form definendo i campi che conterrà, il loro tipo, eventuali validazioni e messaggi di errore.

Abbiamo già visto un form nel nostro progetto quando ci siamo dedicati alla registrazione dell'utente. Quello che andremo a creare adesso si basa sullo stesso principio, le uniche differenze saranno i campi ed il fatto che lo creeremo manualmente senza affidarci ad un comando del framework.

Creiamo quindi il file app/src/Form/EditProfileType.php in cui andremo ad inserire i campi del nostro form:

• fullName;
• bio;
• avatar.

Nessuno di questi campi è obbligatorio ma ciò non vuol dire però che accetteremo qualsiasi tipo di valore. Anzi, inseriremo delle regole di validazione per limitare le possibilità di inserimento di dati errati da parte dell'utente.

Prima versione del form

La prima versione del nostro form sarà la seguente:

<?php
namespace App\Form;
use App\Entity\User;
use Symfony\Component\Form\AbstractType;
use Symfony\Component\Form\Extension\Core\Type\SubmitType;
use Symfony\Component\Form\Extension\Core\Type\TextType;
use Symfony\Component\Form\Extension\Core\Type\UrlType;
use Symfony\Component\Form\FormBuilderInterface;
use Symfony\Component\OptionsResolver\OptionsResolver;
class EditProfileType extends AbstractType
{
    public function buildForm(FormBuilderInterface $builder, array $options)
    {
        $builder
            ->add('fullName', TextType::class)
            ->add('bio', TextareaType::class)
            ->add('avatar', UrlType::class)
            ->add('submit', SubmitType::class);
    }
    public function configureOptions(OptionsResolver $resolver)
    {
        $resolver->setDefaults(
            [
                'data_class' => User::class,
            ]
        );
    }
}

Analizziamo per un momento quanto fatto finora.

Analisi delle componenti del form

All'interno del metodo buildForm abbiamo aggiunto i campi di cui abbiamo bisogno indicandone il tipo. Il tipo è un parametro opzionale quando il form è mappato su un'entità, in quanto Symfony è abbastanza smart da recuperare il tipo più adatto a quello definito nell'entità. Come nel caso dei campi bio e avatar, però, può essere utile definire in maniera più precisa la tipologia di campo da usare.

Abbiamo aggiunto infine un pulsante di submit che ci servirà per inviare i dati del form.

L'altro metodo, non meno importante, che abbiamo definito è il configureOptions tramite il quale abbiamo indicato qual è l'entità collegata al form, ovvero il tipo di oggetto che verrà costruito con i dati del form.

Per verificare se finora abbiamo fatto tutto correttamente possiamo stampare una prima bozza del form nel nostro template. Innanzitutto, creiamo il form nel controller:

public function editProfile(): Response
    {
        $form = $this->createForm(EditProfileType::class, $this->getUser());
        return $this->render('user/edit_profile.html.twig', [
            'form' => $form->createView()
        ]);
    }

Il metodo createForm si occupa di istanziare il FormType che abbiamo definito e di associargli l'entità relativa. In questo modo, se l'entità non è vuota ed ha già dei valori compilati, essi verranno trasferiti sul form. Nel nostro caso abbiamo passato l'entità relativa all'utente corrente in sessione.

Abbiamo poi reso disponibile una variabile form nel template che si occupa di costruire quanto necessario alla renderizzazione del form nella vista.

Apriamo il nostro template e aggiungiamo la seguente riga di codice nel punto in cui vogliamo visualizzare il form:

{{ form(form) }}

Approfondiremo nella prossima lezione il significato. Per adesso limitiamoci a caricare la pagina nel browser e verificare che tutto abbia funzionato correttamente. Dovremmo infatti visualizzare i campi definiti nel FormType già compilati con i valori dell'utente.

Il codice è disponibile nel repository con il tag edit-profile-page.