Vous êtes sur la page 1sur 4

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.

@RequestMapping(value="/enregistrerProduit", method=RequestMethod.POST)
public String enregistrerProduit(Produit pd) throws Exception {
produitRepository.save(pd);
return "redirect:Index";
}

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.

@RequestMapping(value="/enregistrerProduit", method=RequestMethod.POST)
public String enregistrerProduit(@Valid Produit pd,
BindingResult bindBindingResult) throws Exception {
if(bindBindingResult.hasErrors()) {
return "formProduit";
}
produitRepository.save(pd);
return "redirect:Index";
}

3. Modifier la vue (La page XHTML produits.html) pour afficher les erreurs de
validation de la saisie.

<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" />
<span class="text-danger" th:errors="*{nom}"></span>
</div>
<div class="form-group">
<label class="control-label">Prix:</label>
<input type="text" th:field="${produit.prix}" class="form-control" />
<span class="text-danger" th:errors="*{prix}"></span>
</div>
<div class="form-group">
<label class="control-label">Photo:</label>
<input type="file" name="picture" class="form-control" />
<span class="text-danger" th:errors="*{photo}"></span>
</div>
<div>
4. Tester la saisie

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.

<form th:action="@{enregistrerProduit}" method="post"


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.

@RequestMapping(value="/enregistrerProduit", method=RequestMethod.POST)
public String enregistrerProduit(
@Valid Produit pd,
BindingResult bindBindingResult,
@RequestParam(name="picture") MultipartFile file)
throws Exception {
if(bindBindingResult.hasErrors()) {
return "formProduit";
}
if(!file.isEmpty()) {
pd.setPhoto(file.getOriginalFilename());
file.transferTo(new File(System.getProperty("user.home")
+ "/stock/" + file.getOriginalFilename()));
}
produitRepository.save(pd);
return "redirect:Index";
}

Vous aimerez peut-être aussi