TP 1 - Pierre Jean

Tp1 Ema EMACS Développement Web
1/ Description de l’application :
Notre première application Web a pour objectif de gérer une liste de todo (truc à faire) :
Diagramme de classe simplifié :
Application
instance:Application
Todo
*
lesTodos
addTodo(texte,actif)
deleteTodo(texte)
getLesTodos()
updateTodo( texte , actif
)
texte: String
actif : boolean
Pour la gestion d’une seule et unique application, on va utiliser le Design Pattern Singleton:
public class Application {
private static Application instance = null;
public static Application getInstance() {
if (instance == null) {
instance = new Application ();
}
return instance;
}
private Application() {
}
}
2/ Création du projet et de la partie métier
File > New > Dynamic Web Project
Les codes de la partie métiers doivent être dans le dossier "Java Ressources :src" et dans un
package metier. Préparez aussi des packages controleur et test.
Codez les deux classes du diagramme UML ci-dessus et les méthodes nécessaires au
fonctionnement.
Génération des getters et setters :
3/ Tests unitaires
Dans le package test, faire clic droit New > Other > JUnit Test Case, puis remplir l’interface
comme la capture d’écran ci-dessous :
Voici un extrait en exemple de code pour le test unitaire de la classe Todo.
Essayez de coder quelques tests pertinents et exécutez les via clic droit sur le projet > Run As
> Junit Test
public class TodoTest {
@Test
public final void testTodo() {
Todo todo = new Todo("du lait" , false);
assertNotNull( todo );
}
@Test
public final void testGetTexte() {
Todo todo = new Todo("du lait" , false);
assertEquals ( todo.getTexte() , "du lait");
}
@Test
public final void testIsActif() {
Todo todo = new Todo("du lait" , false);
assertFalse( todo.isActif());
}
}
Faites de même pour la classe Application en codant les tests.
A chaque fois que vous développerez une méthode importante, pensez à coder le test unitaire
et à relancer la batterie de test pour vérifier la non régression de votre application.
Faite une JSP de test pour l’affichage de 4 todos :
Voici un exemple de code pour créer Application (noter que la construction de la liste est faite
dans le constructeur) :
private Application() {
lesTodos = new ArrayList<Todo>();
create4TestTodos();
}
private void create4TestTodos(){
addTodo( "Test1 " , false );
addTodo( "Test2 " , false );
addTodo( "Test1actif " , true );
addTodo( "Test2actif " , true );
}
Importation des classes métier dans la JSP, habituellement en tête de page
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ page import="fr.ema.lgi2p.emacs.metier.*" %>
Parcours de la liste des Todos de type « foreach » :
<%
for(Todo todo : Application.getInstance().getLesTodos() ){
%>
<p>
<%=todo.getTexte() %>
</p>
<%
}
%>
4/ Partie pur Web
Notre contrôleur va utiliser la technologie de Servet pour recevoir les données (Menu clic
droit > New > Servlet ). La servlet devra être dans un package controleur.
L’URL Mapping permet de faire la liaison entre l’URL http://127.0.0.1:8080/Controleur et la
servlet appelée (Nota : je en recommande pas de mapper *.jsp en développement mais
uniquement en production).
Développez votre contrôleur en vous inspirant de cet exemple :
protected void doGet(HttpServletRequest request,
HttpServletResponse response) throws ServletException,
IOException {
String vue = request.getParameter("vue");
if ("liste_todos".equals(vue)) {
String vueFinale = this.doAction(request);
request.getRequestDispatcher(vueFinale).forward(request,
response);
}
}
private String doAction(HttpServletRequest request) {
String vueAfficher = "erreur.jsp";
String action = request.getParameter("action");
if ("ajouterTodo".equals(action)) {
String texte = request.getParameter("todo_texte");
Application.getInstance().addTodo(texte, false);
vueAfficher = "liste_todos.jsp";
}
return vueAfficher;
}
Développez une JSP pour présenter cette vue :
Ajouter un formulaire pour mettre à jour là où les checkbox sélectionnées.
5/ Ajout de fonctionnalité
Ajouter une vue pour présenter les données au format xml appelé par un hyperlien pour
proposer un fil d’actualité
<?xml version="1.0" encoding="utf-8"?>
<todos>
<todo id="1" texte="a faire" actif="false" />
<todo id="2" texte="a ne pas faire" actif="true" />
<todo id="3" texte="surtout a faire" actif="false" />
</todos>
Modifiez la vue pour obtenir un flux d’actualité en RSS
<rss version="2.0">
<channel>
<title>Application todo</title>
<description>Application todo by EMA 3 GSI </description>
<link>http://localhost/todo/Controleur?action=rss</link>
<item>
<title>todo 1</title>
<link>http://localhost/todo/Controleur?action=rss&amp;id=1</link>
<description><![CDATA[penser au lait]]></description>
</item>
<item>
<title>todo 2</title>
<link>http://localhost/todo/Controleur?action=rss&amp;id=2</link>
<description><![CDATA[penser au pain]]></description>
</item>
</channel>
</rss>
Ajouter un bouton pour cocher toutes les checkbox en javascript en vous inspirant du code cidessous :
$(document).ready(function(){
$("input#checkAllButton").click(function(event){
$("input[type='checkbox']").each(
function() {
$(this).prop('checked', true);
}
);
});
}
);
L’insertion de jquery peut se faire via ce code :
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
</body>
Faites un bouton qui inverse la sélection de checkbox réalisée à la fois en javascript et en
Java.côté serveur.
Ajouter un bouton qui coche toutes les checkbox en soumettant le formulaire côté serveur.
Ajout d’un fichier de style css contenant le code Css suivant :
div#central{
position:absolute;
left: 50%;
top: 10%;
width: 800px;
height: 800px;
margin-top: -50px;
margin-left: -400px;
color: black;
background-color:rgb(200,220,200);
padding: 20px;
}
ul {
list-style: none;
margin: 0;
padding: 4px 4px 4px 4px;
}
ul > li{
display: inline;
}
div#menu{
position:relative;
left:10%;
width:80%;
background-color:rgb(200,240,220);
}
Ajouter deux div dans la partie Vue avec les id référencés dans le code Css sachant que l’un
doit être inclus dans l’autre. Faite un lien entre avec le fichier Css.
Créer un menu horizontal utilisant une liste d’éléments comme proposé par le site suivant :
http://www.alsacreations.com/tuto/lire/574-Creer-des-menus-simples-en-CSS.html
Modifier les noms des menus pour les faire correspondre aux actions javascript initialement
créées.
Ajouter un évènement javascript/jquery sur tous les liens du menu :
$(document).ready(function(){
$("a").click(function(event){
alert("Menu 1!");
event.preventDefault();
});
});
Comment pensez vous qu’il faut faire pour différencier les différents clics sur les menus ?