Pagina per la modifica del profilo

Una delle attività più complesse durante lo sviluppo di un'applicazione Web è l'interazione con l'utente, in particolare quando c'è la necessità di immettere dati attraverso un form. In questo caso infatti sono tante le variabili in gioco e gli aspetti a cui prestare attenzione:

• la creazione del markup;
• la gestione dei dati immessi dall'utente;
• la validazione dei dati immessi;
• garantire un livello di sicurezza adeguato per evitare utilizzi impropri.

Fortunatamente, Symfony ci consente di gestire in maniera molto semplice tutti i punti appena descritti, consentendoci di concentrarci principalmente sul codice della nostra applicazione invece che sull'interazione con l'utente.

Nel corso di questa e della prossima lezione vedremo insieme come creare un form per la modifica del profilo di utente con cui cui aggiornare i valori di alcuni dei campi tra cui il nome dell'utente, la bio e l'avatar ad esso associato.

Nota bene: in una prima fase, per non introdurre troppa complessità durante l'introduzione di nuovi concetti, tratteremo il campo avatar come un campo di input in cui inserire la URL di un'immagine. Lo trasformeremo più avanti in un campo di upload.

Il campo bio

Nella precedente lezione abbiamo omesso la creazione del campo bio che utilizzeremo successivamente nella pagina pubblica dell'utente. Come fatto per gli altri campi dell'entità User, creiamo quindi il nuovo campo prima di procedere.

In breve, i comandi necessari saranno i seguenti:

$ php bin/console make:entity
$ php bin/console make:migration
$ php bin/console doctrine:migrations:migrate

Con il primo dei tre comandi indichiamo l'entity User creando un campo di nome bio e di tipo text che può essere anche nullo.

La pagina di modifica profilo

Procediamo ora con il creare la rotta, la action e il template che ospiteranno la pagina di modifica del profilo.

Per prima cosa creiamo il controller app/src/Controller/UserController.php:

<?php
namespace App\Controller;
use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
use Symfony\Component\HttpFoundation\Response;
use Symfony\Component\Routing\Annotation\Route;
class UserController extends AbstractController
{
    /**
     * @Route("/profile/edit", name="app_edit_profile")
     */
    public function editProfile(): Response
    {
        return $this->render('user/edit_profile.html.twig');
    }
}

Ora lasciamo temporaneamente vuota la action e limitiamoci a stampare il template edit_profile.html.twig. Creiamo quindi il template app/templates/user/edit_profile.html.twig copiando il contenuto della home. Ci servirà come semplice base di partenza

Fatto questo, aprendo la pagina:

http://kvak.local/profile/edit

tramite il browser Web dovremmo visualizzare una pagina del tutto simile alla home page. A questo punto possiamo "ripulire" il template rimuovendo tutta la parte relativa alla timeline e personalizzare il title della pagina creando un nuovo blocco sul modello del seguente:

{% block title %}Edit your profile{% endblock %}

Siamo ora pronti per implementare il form di invio dei dati che analizzeremo nel corso della prossima lezione.