Développement avec le moteur de rendu Thymeleaf

Introduction

L'application à développer est un outil simple de gestion d'extrait de code appelé "Snippery" ("snippet" = "extrait").

Il devra permettre d'effectuer les opérations CRUD qui seront à implémenter en utilisant Spring et le moteur de rendu Thymeleaf.

Architecture logicielle

Note

Aucune base de données n'est, pour le moment, à intégrer dans l'application. Nous utiliserons un stockage des données en mémoire (package "data").

Le diagramme ci-dessous présente l'organisation générale du projet à développer :

Travail à effectuer

Vous allez devoir implémenter le fonctionnalités suivantes :

1. affichage de la liste utilisateurs de l'application -> chemin /users;
2. affichage de la liste des extraits de codes -> chemin /.
3. création d'extrait de code via un formulaire -> chemin /create.

Note

Faites fonctionner l'application sans intégrer la connexion utilisateur. Lors de la création des extraits vous pouvez systématiquement utilisé le même utilisateur de votre choix. Ceci sera fait lors d'une autre activité.

Il vous est conseillé de procéder dans l'ordre indiqué afin de bien appréhender le fonctionnement de Thymeleaf.

Important

Une série de TODO vous donne des indications sur ce qu'il faut implémenter. De plus, une série de tests unitaires est à corriger.

Développement de la page "users"

Ci-dessous une proposition de rendu minimaliste de la page de consultation de la liste des utilisateurs (il vous est possible de développer une page plus détaillée) :

Étapes de développement :

1. travailler sur votre HTML + CSS avec des valeurs en dur
2. cibler le code répété
3. utiliser des expressions Thymeleaf pour dynamiser le contenu de la page

Développement de la page de consultation des extraits

Ci-dessous une proposition de rendu de la page de consultation de la liste des extraits :

Une ébauche de vue vous est fournie (snippets/list.html).

Étapes de développement :

1. modifier la vue snippets/list.html pour obtenir le rendu souhaité. Il est conseillé de travailler avec des valeurs en dur
2. cibler le code répété
3. utiliser des expressions Thymeleaf pour dynamiser le contenu de la page

Pour mettre en forme les extraits de code, il est possible d'utilser la bibliothèque PrismJS déjà intégrée à l'ébauche de page fournie.

Voici un exemple de code permettant d'afficher du code en utilisant Prism :

<pre><code class="line-numbers language-java">public static void main(String args[]) {}</code></pre>

Ajout de la suppression