TP d’applications web : servlets

Dans ce TP, nous allons traiter un formulaire un peu plus sophistiqué et voir comment utiliser un servlet pour renvoyer du contenu binaire comme une image plutôt qu’une page web.

Ajout d’un formulaire d’inscription

  1. Ajoutez à votre projet une nouvelle page register.html reproduisant le formulaire ci-dessous (modulo la mise en page CSS) : où les textes en gras correspondent à des éléments <label>, le choix du sexe à des <input> de type radio, le choix de l’inscription à des <input> de type checkbox et le choix de la ville à un élément <select>. Ce formulaire devra renvoyer ses données en POST vers l’URL relative add_customer.
  2. Ajoutez à la page d’accueil un lien vers cette page.
  3. Créez maintenant le servlet addCustomer répondant à l’URL add_customer. Ce servlet devra renvoyer une page résumant les données entrées et ressemblant à ceci : Remarquez que le paramètre représentant le type d’inscription peut avoir plusieurs valeurs (on peut cocher à la fois bibliothèque et discothèque). Pour gérer cela, il faut utiliser getParameterValues() plutôt que getParameter().

Servlet de génération d’image

  1. Créez une page statistics.html avec le contenu suivant et créez un lien vers cette page depuis la page d’accueil : <h1>Statistiques sur les villes de résidence</h1> Répartition des villes de résidence des adhérents de la bibliothèque : <img src="stat_img?GRE=3&SMH=4&GIE=1&OTH=2" alt="Grenoble : 3, Saint-Martin d’Hères : 4, Gières : 1, Autres : 2"/> <p>Retour vers <a href="index.html">l’accueil</a></p> Le but de cette page est d’afficher les données dans un camembert comme ceci : L’image est obtenue par l’élément <img>, qui renvoie sur l’URL stat_img en précisant certaines valeurs de paramètres. Tant que cette URL ne répond pas, vous pouvez constater que le navigateur affiche le texte alternatif (attribut alt).
  2. Créez un servlet StatImg qui répondra à l’URL stat_img. Comme ce servlet devra générer une image et non du texte, on utilisera : response.setContentType("image/png"); De plus, le flux de sortie ne devra pas être récupéré avec response.getWriter() mais avec response.getOutputStream().
  3. Pour générer l’image, on utilisera l’API JFreeChart. Ajoutez la dépendance vers cette API dans votre projet, soit en cliquant à droite sur Dependencies puis en choisissant « add dependency », soit en éditant directement le pom.xml : <dependency> <groupId>org.jfree</groupId> <artifactId>jfreechart</artifactId> <version>1.0.19</version> <type>jar</type> </dependency> puis téléchargez-la (« Download declared dependencies »).
  4. Vous pouvez maintenant générer l’image. Pour cela, nous vous proposons de vous inspirer du code suivant (la documentation complète de l’API, pour référence, est ici) : import org.jfree.chart.*; import org.jfree.data.general.DefaultPieDataset; [...] DefaultPieDataset dataset = new DefaultPieDataset(); String title = "le titre"; dataset.setValue("douze", 12); dataset.setValue("huit", 8); JFreeChart chart = ChartFactory.createPieChart(title, dataset); /* Envoi de la réponse */ response.setContentType("image/png"); try (OutputStream out = response.getOutputStream()) { ChartUtilities.writeChartAsPNG(out, chart, 500, 300); }