TP5 Spring Boot 1

Département informatique
TP n°5
Matière : Spring Boot
Classe : GLSI 2
Enseignant : Mohamed Anouar DAHDEH
Un compte rendu est demandé à la fin de ce TP
Objectifs :
 Création de Template avec Thymeleaf
 Utilisation des formulaires
Introduction
Dans la première partie de ce TP, vous allez suivre un tutoriel sur l’utilisation des formulaires
avec Thymeleaf. Par la suite, dans la deuxième partie, vous allez compléter votre travail du TP4
en y ajoutant des autres fonctionnalités.
Partie 1 :
L’application que vous allez développer, consiste à créer des simples interfaces web pour gérer
une liste de personnes (Création et consultation).
1
Le workflow du traitement des requêtes POST :
Contrôleur Vue
 la requête HTTP du client arrive en [1] ;

 en [2], les informations contenues dans la requête vont être transformées en modèle d'action
[3], une classe souvent mais pas forcément, qui servira d'entrée à l'action [4] ;
 en [4], l'action, à partir de ce modèle, va générer une réponse. Celle-ci aura deux composantes
: une vue V [6] et le modèle M de cette vue [5] ;
 la vue V [6] va utiliser son modèle M [5] pour générer la réponse HTTP destinée au client.
Travail à faire :
1- Créer une nouvelle application Spring Boot
- Name: TutoTP5
- Group: com.fsb
- Artifact: TutoTP5App
- Description: Spring Boot and Thymeleaf Tuto
- Package: com.fsb.tutotp5
- Starters : web, thymeleaf et devTools
2- Créer 3 fichiers et les placer dans le répertoire src/main/resources/templates :
index.html
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8" />
<title>Welcome</title>
<link rel="stylesheet" type="text/css" th:href="@{/css/style.css}"/>
</head>
<body>
<h1>Welcome</h1>
<h2 th:text="${message}">..!..</h2>
<a th:href="@{/personList}">Person List</a>
</body>
</html>
2
personList.html
<!DOCTYPE HTML>
<head>
<title>Person List</title>
</head>
<body>
<h1>Person List</h1>
<a href="addPerson">Add Person</a>
<br/><br/>
<div>
<table border="1">
<tr>
<th>id</th>
<th>First Name</th>
<th>Last Name</th>
</tr>
<tr th:each ="person : ${persons}">
<td th:text="${person.id}">...</td>
<td th:text="${person.firstName}">...</td>
<td th:text="${person.lastName}">...</td>
</tr>
</table>
</div>
</body>
</html>
addPerson.html
<!DOCTYPE HTML>
<head>
<title>Add Person</title>
</head>
<body>
<h1>Create a Person:</h1>
<form th:action="@{/addPerson}"
th:object="${personForm}" method="POST">
First Name:
<input type="text" th:field="*{firstName}" />
<br/>
Last Name:
<input type="text" th:field="*{lastName}" />
<br/>
<input type="submit" value="Create" />
</form>
<br/>

<div th:if="${errorMessage}" th:text="${errorMessage}"
style="color:red;font-style:italic;">
...
</div>
</body>
</html>
3
Remarques :
Avec l’attribut th:object on peut utiliser le java bean personForm en tant qu’objet courant du
formulaire. Cet objet est créé dans le formulaire et sera envoyer au contrôleur après clique sur le bouton
submit.
th:field permet de lier la valeur d’un élément html à une propriété d’un java bean. La ligne suivante :
<input type="text" th:field="*{firstName}" />
est equivalente à
<input type="text" th:id ="firstName" th:name ="firstName" th:value="*{firstName}" />
3- Static Resource & Properties File :
Pour les ressources statiques (Static Resource), par exemple : des fichiers css, javascript,
image,... vous devez les placer dans le dossier src/main/resources/static ou dans ses sous-
dossiers.
style.css
@charset "ISO-8859-1";
h1 {
color:#0000FF;
}
h2 {
color:#FF0000;
}
table {
border-collapse: collapse;
}
table th, table td {
padding: 5px;
}
application.properties
spring.thymeleaf.cache=false
welcome.message=Hello Thymeleaf
error.message=First Name & Last Name is required!
4
4- Model, Form, Controller classes
Person.java
public class Person {

private Long id;
private String firstName;
private String lastName;
public Person() {
public Person(Long id, String firstName, String lastName) {

super();
this.id = id;
this.firstName = firstName;
this.lastName = lastName;
}
//getters && setters
}
PersonForm.java
La classe PersonForm représentent des données du formulaire lorsque vous créez une
nouvelle Personne sur la page addPerson.
public class PersonForm {

private String firstName;
private String lastName;
// getters & setters

}
PersonController.java
PersonController est une classe Contrôleur. Elle traite les demandes d'un utilisateur et contrôle le
flux de l'application.
5
@Controller
public class PersonController {
private static List<Person> persons = new ArrayList<Person>();
private static Long idCount =0L;
static {
persons.add(new Person(++idCount,"Bill", "Gates"));
persons.add(new Person(++idCount,"Steve", "Jobs"));
}
// Injectez via application.properties.
@Value("${welcome.message}")
private String message;
@Value("${error.message}")
private String errorMessage;
@RequestMapping(value = { "/", "/index" }, method = RequestMethod.GET)

public String index(Model model) {
model.addAttribute("message", message);
return "index";
}
@RequestMapping(value = { "/personList" }, method = RequestMethod.GET)
public String personList(Model model) {
model.addAttribute("persons", persons);
return "personList";
}
@RequestMapping(value = { "/addPerson" }, method = RequestMethod.GET)
public String showAddPersonPage(Model model) {
PersonForm personForm = new PersonForm();

model.addAttribute("personForm", personForm);
return "addPerson";
}
@RequestMapping(value = { "/addPerson" }, method = RequestMethod.POST)
public String savePerson(Model model, //
@ModelAttribute("personForm") PersonForm personForm) {
String firstName = personForm.getFirstName();

String lastName = personForm.getLastName();
if (firstName != null && firstName.length() > 0 //
&& lastName != null && lastName.length() > 0) {
Person newPerson = new Person(++idCount,firstName, lastName);
persons.add(newPerson);
return "redirect:/personList";
}
model.addAttribute("errorMessage", errorMessage);
return "addPerson";
}
}
6
Consignes :
1. Architecture conseillée pour le contrôleur

 Une méthode GET et une méthode POST pour la même URL
 GET : affichage de la page
 POST : traitement du formulaire
2. Instanciation de PersonForm à l’aide de @ModelAttribute :
 PersonForm est construit avec le constructeur par défaut ensuite les attributs du
modèle sont initialisés avec les paramètres du POST. Le résultat final fera partie
du modèle produit par l'action.
Partie 2 :
1- En se basant sur le tutoriel de la partie 1, vous allez compléter votre travail du tp4 par des
interfaces d’ajout, de modification et de suppression d’un produit.
2- Ajouter la validation des formulaires.
3- Améliorer les interfaces de votre application web avec un Framework CSS comme Bootstrap,
vous pouvez utiliser Bootswatch (un générateur de Template Bootstap)
Bon Travail

TP5 Spring Boot 1

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

TP5 Spring Boot 1

Transféré par

Droits d'auteur :

Formats disponibles

Département informatique

Un compte rendu est demandé à la fin de ce TP

 la requête HTTP du client arrive en [1] ;

<input type="text" th:field="*{firstName}" />

<input type="text" th:id ="firstName" th:name ="firstName" th:value="*{firstName}" />

3- Static Resource & Properties File :

public class Person {

public Person(Long id, String firstName, String lastName) {

public class PersonForm {

// getters & setters

@RequestMapping(value = { "/", "/index" }, method = RequestMethod.GET)

PersonForm personForm = new PersonForm();

String firstName = personForm.getFirstName();

1. Architecture conseillée pour le contrôleur

Vous aimerez peut-être aussi