Formulaire et validation
Dans cette partie, nous allons voir comment intéragir avec plusieurs page via des liens et des formulaires et voir comment valider nos données.
Partie I : Une nouvelle page
Préparation
Nous allons partir du code de la partie Première page qui contenait déjà un module et une première page d'exemple.
Nous allons créer une page A propos pour voir les un peu comment faire des liens entre la page d'accueil et cette page. Nous verrons aussi des urls avec une partie dynamique. Et enfin nous allons créer une page de création de compte utilisateur (on enregistrera pas les données en base pour le moment) pour tester les formulaires et leurs validation.
SI tout est bon alors c'est parti !
Création de la page "A propos"
Qui dit nouvelle page, dit nouvelle route, action et renderer. Donc c'est parti voici les fichiers PHP à faire :
<?php
namespace App\Basic;
use App\Basic\Actions\IndexAction;
use App\Basic\Actions\AboutAction;
use PHQ\Module;
use PHQ\Rendering\IRenderer;
use PHQ\Routing\Router;
use Psr\Container\ContainerInterface;
class BasicModule extends Module
{
// Constructor ...
/**
* @param Router $router
*/
private function initRouter(Router $router): void
{
$router->get('/', IndexAction::class, 'basic.index');
$router->get('/about', AboutAction::class, 'basic.about');
}
// initRender ...
}Et enfin notre vue twig pour la page :
On relis les pages
Maintenant sur notre vue index.twig, on va y ajouter un lien mais au lieu de mettre directement le lien en brute, nous allons demander de nous le générer pour nous. Cela permet en cas de changement de ce dernier de ne pas à avoir à changer toutes les URL qui y serait attaché.
Pour cela PHQ à une extension twig instancié et qui ajoute quelques fonctions utile comme la fonction path() qui permet à partir du nom et des paramètres, de générer une url.
Voici ce que cela donne en pratique pour les vue index et about de twig :
Et voilà le résultat :
Partie II : Valider un formulaire
Nous allons finir par un petit formulaire et un moyen de valider ce dernier.
Ajout du formulaire
Dans la vue d'index par exemple on va y ajouter le code du formulaire qui sera soumis en POST sur la même URL.
Ce code est à mettre en dessous du lien A propos de nous. On peut remarquer une fonction csrf() qui permet d'ajouter un champs hidden avec comme valeur le token CSRF de la page. On peut y passer le paramètre à false pour ne retourner que la valeur et non tout le champs hidden.
On va y ajouter notre route dans le module :
Ajout de l'action
Vous connaissez la chanson ^^ , On va ajouter dans le dossier Actions la classe ContactAction :
Je pense que ce code mérite une petite explication.
Tout d'abord on génère l'url par rapport au nom de la route (c'est comme dans la vue twig). On le stock dans une variable car dans tous les cas on va rediriger vers notre page d'accueil. On créé juste après une réponse de type RedirectResponse() avec notre URL.
Ensuite on créé un Validator et on y passe un tableau avec en clef le nom du champ à vérifié et en valeur le ou les type de validations à faire. Dans cette exemple il s'agit des 2 même mais vous pouvez en avoir d'autre comme max ou bien encore confirmed qui permet de tester qu'un champ et ça version _confirmed sont bien égaux.
La méthode validate attend soit un tableau des données à vérifier, soit un objet de type ServerRequestInterface qui va prendre automatique le parsedBody() de la request.
Si on a une erreur on les enregistre en session et sinon on affiche un message flash de succès.
Enfin on retourne notre réponse qui va permettre de rediriger l'utilisateur sur la page d'accueil.
Et voilà c'est aussi simple que ça de vérifier un formulaire. Chose importante : si on avait omis le token CSRF, le middleware CSRFMiddleware n'aurait pas autoriser de continuer.
Last updated