Formulaire de Saisie et validation : Gestion de Produit
Objectif :
L’objectif du TP est de créer un formulaire de saisie des produits.
Partie I : Création de formulaire de saisie
1. Créer une page XHTML formProduit.html qui utilisera le moteur de template
thymeleaf contenant un formulaire HTML pour saisir les données d’un produit. La méthode enregistrerProduit du contrôleur ProduitController traitera les données saisies.
<!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="utf-8" /> <title>Ajouter un produit</title> <link rel="stylesheet" type="text/css" href="../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}" /> <link rel="stylesheet" type="text/css" href="../static/css/myStyle.css" th:href="@{/css/myStyle.css}" /> </head> <body> <div class="container spacer"> <div class="panel panel-default"> <div class="panel-heading">Ajouter un produit</div> <div class="panel-body"> <form th:action="@{enregistrerProduit}" method="post" th:object="${produit}"> <div class="form-group"> <label class="control-label">Nom:</label> <input type="text" th:field="*{nom}" class="form-control" /> </div> <div class="form-group"> <label class="control-label">Prix:</label> <input type="text" th:field="${produit.prix}" class="form-control" /> </div> <div class="form-group"> <label class="control-label">Photo:</label> <input type="file" name="picture" class="form-control" /> </div> <div> <button type="submit" class="btn btn-primary"> Enregister </button> </div> </form> </div> </div> </div> </body> </html> 2. Ajoutez une méthode formProduit dans le contrôleur ProduitController qui se contente de retourner la page XHTML formProduit.html. Cette Méthode sera accessible par le mapping /Form.
public class ProduitController {
... @RequestMapping(value="/Form", method=RequestMethod.GET) public String formProduit(Model model) { model.addAttribute("produit", new Produit("exemple", 0.0, "exemple.jpg")); return "formProduit"; } }
3. Ajoutez au début de la page XHTML produits.html un lien vers la méthode formProduit
du contrôleur ProduitController.
... <body> <div class="container spacer"> <a class="primary" th:href="@{Form}" >Ajouter un produit</a> </div> ... 4. Redémarrez l’application et appelez le formulaire de saisie de produits à partir du lien crée dans (I-3).
5. Ajoutez la méthode enregistrerProduit du contrôleur ProduitController permettant
de persister l’objet Produit issue du formulaire de saisie. Notez que la saisie des données n’est pas contrôlée (Pas de validation) et la page se redirige vers la méthode Index() du contrôleur ProduitController pour afficher la liste des produits mis-à-jour.
Partie II : Validation des données saisies du formulaire
Dans cette partie, nous allons utiliser les annotations pour spécifier les règles de validation de la saisie.
1. Ajoutez dans la classe Produit les annotations de validation sur les attributs.
@Entity public class Produit implements Serializable { ... @Column(name="NOM", length=30) @NotEmpty @Size(min=5, max=50) private String nom; private double prix; ... 2. Dans le contrôleur ProduitController, ajoutez l’annotation @Valid au paramètre Produit pd de la méthode enregistrerProduit. Cette annotation permet de valider un objet Produit avant sa persistance. Un objet BindingResult permet d’enregistrer les erreurs en cas de message d’erreurs.
5. Pour télécharger la photo vers le serveur (upload), modifier le formulaire pour qu’il support l’envoie des données binaires à travers l’attribut enctype de la balise form.
th:object="${produit}" enctype="multipart/form-data"> 6. Pour récupérer la photo, modifier le contrôleur en ajoutant un paramètre de type MultipartFile à la méthode enregisterProduit.
