0% ont trouvé ce document utile (0 vote)
113 vues159 pages

Dev Appli Web Fi

Transféré par

Nizzy io
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
0% ont trouvé ce document utile (0 vote)
113 vues159 pages

Dev Appli Web Fi

Transféré par

Nizzy io
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd

Le développement

d’application web (FI)


Alain Berro
[Link]@[Link]
Bureau MF 213

Université Toulouse 1 Capitole


Institut de Recherche en Informatique de Toulouse

1
Le développement d’application web

Présentation

◼ Prérequis
 Langage Java, POO
 BD : conception, SQL…
 UML
 HTML, CSS

 Vous avez
 Des notions d’application web (projet php M1)

◼ Volume horaire
 9 h de cours et 33 h de TP

2
Le développement d’application web

Plan du cours (1)

◼ Un peu d’histoire… et des définitions


 De l’architecture 1-tiers au n-tiers
 Client lourd, léger et riche

◼ Pages dynamiques et fonctionnement d'une requête HTTP

◼ Les technologies Java pour le développement web


 Les technologies côté serveur : les servlets, JSP
 L’ API JDBC

◼ MVC pour le développement web

3
Le développement d’application web

Plan du cours (2)

◼ Technologie côté client : AJAX


 CSS et XHTML
 Document Object Model (DOM)
 XML
 XMLHttpRequest
 JavaScript

◼ Mapping Objet-Relationnel
 Mise en œuvre de la persistance de données
 JPA – Hibernate

4
De l’architecture 1-tiers au n-tiers

5
Le développement d’application web

De l’architecture 1-tiers au n-tiers

◼ Les niveaux d'abstraction


 La couche de présentation
 Présentation des informations
 Interaction avec l’utilisateur

 La couche de traitements (métier)


 Regroupe l’ensemble des travaux à réaliser par l’application
– Traitements locaux (contrôle du dialogue)
– Traitements globaux : le métier (application)

 La couche de données
 Regroupe l’ensemble des mécanismes permettant la gestion et le stockage
des informations

6
Le développement d’application web

L’architecture 1-tiers

◼ Les trois couches s’exécutent sur un même serveur


◼ Informatique centralisée, maître/esclave

◼ Les plus
 Simplicité d’administration
Système central
 Centralisation des données
Présentation Postes
passifs
◼ Les moins Traitements
 Interface Données
 Montée en charge

 Alléger le serveur
7
Le développement d’application web

L’architecture 2-tiers

◼ Par exemple, le client-serveur de données


 Client (présentation et traitements)
 Serveur (gestion des données)
 Le plus répandu

Client Serveur
dialogue
Utilisateur
Présentation SGBD
requête
Traitements Données
réponse

8
Le développement d’application web

L’architecture 2-tiers

◼ Les plus
 Interface plus riche
 Application(s) sur le poste client

◼ Les moins
 Client très sollicité (lourd)
 Le dialogue avec le serveur reste important
 Clients et protocoles non standards  maintenance difficile
 Relation étroite entre programme client et organisation des données côté
serveur  difficulté d’évolution

 Alléger le client
 Rendre le système plus souple
9
Le développement d’application web

Le schéma du Gartner Group

Présentation Présentation Gestion Traitements Bases de Données et


distribuée distante distante des distribués données traitements
données distribuées distribués

Données Données Données Données Données Données

Serveur
Traitements Traitements Traitements Traitements

Présentation

Client
Données Données

Traitements Traitements Traitements Traitements

Présentation Présentation Présentation Présentation Présentation Présentation

10
Le développement d’application web

L’arrivée des premiers standards Internet

◼ HTML (Hypertext Markup Language - 1991)


 Description des pages web
 Texte + balise de mise en forme

◼ HTTP (Hypertext Transfer Protocol - 1991)


 Protocole d'échange d'informations sur le web sans établissement de
connexion entre le client et le serveur
 Permet de
 Charger (GET) des documents textes (html) ou binaires (jpg, gif, mpeg)
 Envoyer (POST) des informations vers le serveur
 Déposer (PUT) des documents sur le serveur
 Effacer (DELETE) des documents
 Tracer (TRACE) les requêtes reçues par le serveur

11
Le développement d’application web

L’arrivée des premiers standards Internet

◼ TCP/IP (Transmission Control Protocol/Internet Protocol - 1989)


 Protocole de communication réseau
 IP se charge du routage des informations (couche réseau)
 TCP se charge du contrôle des données transmises (couche transport)

◼ CGI (Common Gateway Interface - 1993)


 Langage de script
 Interface entre un programme exécutable et un serveur HTTP
 Langage quelconque (Perl, C, …)

12
Le développement d’application web

L’architecture 3-tiers

◼ Principes
 Le client gère la présentation et les traitements locaux (moins lourd,
moins évolué, moins coûteux)
 Le serveur d’application gère les traitements
 Le serveur de données accueille un SGBD

◼ Caractéristiques
 Les trois niveaux sont indépendants
 Implantation sur différentes machines
 Évolutions plus faciles

 Répartition des tâches plus homogène


 Montée en charge plus facile à prendre en compte

13
Le développement d’application web

L’architecture 3-tiers
Client Serveur d’application Serveur de données

Présentation requête HTTP requête SQL SGBD


Traitements
Traitements réponse réponse
locaux Données

Windows HTTP Apache, IIS JDBC Oracle


Unix - Linux Tomcat, Glassfish MySql
Mac
CGI
Navigateur Servlet - JSP - JSTL
PHP
HTML, XML ASP
Applet SQL
Javascript

14
Le développement d’application web

L’architecture n-tiers

◼ Exemples
 Plusieurs serveurs
 Serveur html + moteur de servlets
 Répartition de la logique d’application dans des objets métiers
 Base de données distribuées

◼ Les plus
 Évolution facile
 Montée en charge

◼ Les moins
 Complexité du système
 Coûts de mise en œuvre
15
Le développement d’application web

Client lourd et client léger

◼ Client lourd (Application de « bureau »)


 Installation de l’application sur le poste client
 Mise à jour et maintenance à la charge de l’utilisateur
 Dépendance du système d’exploitation
 Utilisation des ressources de la machine hôte
 Interfaces et interactions riches
 Mode « déconnecté »

◼ Client léger (Application « internet »)


 … à l’opposé du client lourd

16
Le développement d’application web

Client riche

◼ Client riche (Client léger enrichi)


 Interface et interactions plus riches
 Travail en mode connecté et/ou déconnecté

◼ 2 types de clients riches


 RIA Rich Internet Application
 S’exécute dans le navigateur (mode connecté)
 Exemples : Flash, Flex, JavaFX, Silverlight

 RDA Rich Desktop Application


 S’exécute à l’extérieur du navigateur (possède un mode déconnecté)
 Exemple : JNLP de Java, XUL de Mozilla, Adobe AIR

17
Pages dynamiques
et
fonctionnement
d'une requête HTTP

18
Le développement d’application web

Principe

◼ Deux types de dynamique


 Dynamique prise en charge côté client
 Page animée
 Programme exécuté par le client prenant en charge la dynamique

 Dynamique prise en charge côté serveur


 Page créée dynamiquement par un programme exécuté sur le serveur
 Page statique envoyée puis affichée sur le client

19
Le développement d’application web

Dynamique côté client

◼ Plug-in, composant ActiveX


 Programme tiers invocable depuis le navigateur

 Assistance à la prise en charge de ressources spécifiques


 Documents bureautiques (fichier PDF, ...)
 Documents multimédia (audio, vidéo, ...)
 Application (programme JAVA, ...)

 Navigateur simple et fonctionnement par extension

20
Le développement d’application web

Dynamique côté client

◼ Par programmation (Javascript)


 Fonctions de manipulation de la page
 Les instructions sont dans le source HTML
 Intérêts
 Augmenter l'interactivité (rafraichissement de portions de pages) - AJAX
 Faire des contrôles sur des éléments d’un formulaire pour diminuer les
dialogues entre le client et le serveur
 Par exemple : une image réactive
<script language="javascript">
function reagir() {
alert("Passage de la souris");
}
</script>

<img src= "[Link]" onmouveover="reagir()"/>


21
Le développement d’application web

Dynamique côté serveur

◼ Dynamique prise en charge par le serveur


 Récupération et gestion des informations transmises par un client
 A des fins de calcul, stockage dans une base de données, …

 Génération dynamique de pages


 Génération d’un fichier source HTML
 Affichage d’un résultat issu d’une interrogation d’une base de données

22
Le développement d’application web

Fonctionnement d'une requête HTTP

Client Serveur d’application Serveur de données

Présentation requête HTTP requête SQL SGBD


Traitements
Traitements réponse réponse
locaux Données

1. Saisie des données de l'utilisateur (formulaire html)


2. Contrôles locaux (javascript)
3. Envoi de la requête HTTP
4. Interprétation de la requête  exécution d'un script ou d’un
programme (cgi, servlet, jsp, php, asp, ...)
5. Requête éventuelle vers une BD
6. Construction et envoi de la réponse
23
Le développement d’application web

Saisie des informations

◼ Les solutions les plus utilisées sont


 Formulaire HTML
 Saisie des données dans des objets identifiés par leur nom
 Envoi de la requête HTTP à l’aide d’un bouton (submit)

 Contrôles de saisie à l'aide de Javascript

 Applets Java (obsolète)


 Mise en forme enrichie
 Interface dynamique
 Ouverture de connexion possible

24
Le développement d’application web

Envoi de la requête

◼ Une requête est composée


 De l'adresse (URL) de la ressource distante
 protocole://adresse_machine[:port]/fichier[#ancre|?paramètre=valeur]
 D'éventuelles informations préalablement saisies par l'utilisateur et
transmises sous la forme de couples (paramètre, valeur)

◼ Types de requêtes
 La requête GET
 Demande d'une page
 Ajoute les données après l'URL
– [Link]
 La requête POST
 Envoi de données vers le serveur
 Les données ne sont pas visibles
25
Le développement d’application web

Interprétation de la requête et réponse

◼ Le serveur web
 Analyse la requête en fonction
 De l'extension du fichier : .html, .jsp, .cgi, .php, .asp
 Du répertoire : servlet/, cgi-bin/
 Du nom d'une application : projet_igsi/

 Charge l'environnement d'exécution nécessaire ou redirige le fichier


 Programmes CGI
 Module PHP
 JVM pour les servlets et les JSP

◼ Le script ou le programme exécuté


 Précise le type du contenu de la réponse (HTML, image, ...)
 Construit la réponse dans un flot de sortie
26
Le développement d’application web

Exemple

◼ Formulaire (HTML)
<html>
<head>
<title>Addition effectuée par une JSP</title>
</head>
<body>
<form id="formAddition"
method="get"
action="[Link]">
Premier nombre : <input type="text" name="nombre1"><br/>
Second nombre : <input type="text" name="nombre2"><br/>
<input type="submit" value = "Additionner">
</form>
</body>
</html>
27
Le développement d’application web

Exemple

.../[Link]?nombre1=4&nombre2=7

28
Le développement d’application web

Exemple

◼ Résultat de l’addition ([Link])


<html>
<body>
<h1>Résultat</h1>
La somme de ${param.nombre1} et ${param.nombre2} est égale à
${param.nombre1 + param.nombre2}
</body>
</html>

29
Les servlets

30
Le développement d’application web

Les différentes techniques côté serveur

◼ CGI (Common Gateway Interface)

◼ ASP (Active Server Page)

◼ PHP (Php Hypertext Preprocessor)

◼ Servlet Java et JSP (JavaServer Pages)

◼ [Link] (JavaScript)

31
Le développement d’application web

CGI (obsolète)

◼ Principe de fonctionnement
 Interpréteur embarqué dans le serveur web
 Un processus est lancé à chaque requête
◼ Avantages
 Standard pris en charge par tous les serveurs web actuels
 Gratuit
 Programmation variée (Perl, C, ...)
◼ Inconvénients
 Pas de persistance
 Beaucoup de processus  serveur très sollicité
 Amélioration : FastCGI
 Lent

32
Le développement d’application web

Les servlets

◼ Programmes Java côté serveur (fichier .class) permettant de


construire des pages web dynamiques

◼ Servlet = Applet côté serveur, mais


 Elle n'a pas d'interface graphique
 Elle n'est pas soumise aux mêmes règles de sécurité
 Elle peut lire sur le disque du serveur (chargement des drivers JDBC)
 Elle peut ouvrir des connexions

33
Le développement d’application web

Avantages

◼ Portabilité et évolutivité
 Langage Java
 Langage objet
 Compilé
 Association possible avec de nombreux serveurs web
 Interne (Serveur web écrit en Java)
 Module embarqué
 Serveur externe

◼ Rapidité
 Persistance des servlets en mémoire (objet) après leur instanciation
 Multithreading

34
Le développement d’application web

Avantages

◼ Utilité
 Gestion facile des cookies, formulaires, sessions, …

◼ Mécanismes puissants
 Partage de données entre servlets
 Chaînage
 Filtrage
 Pool de servlets (instances de la même servlet)

35
Le développement d’application web

Principe de fonctionnement

Client Serveur d’application

JVM
requête HTTP  Moteur
Serveur 
de
web [Link]
réponse
 servlet

1. Le serveur web transmet le nom de l’application, du service


demandé (servlet) et les paramètres éventuels :
./app/Bonjour?nom=igsi
2. Exécution de la servlet
3. Retour du flot de sortie contenant le code de la page HTML
4. Transmission du flot au serveur web

36
Le développement d’application web

Le cycle de vie

◼ Le chargement peut être effectué


 Au démarrage du moteur de servlet
 Au moment de l'expression du besoin de la servlet
◼ L'initialisation (init)
 Permet d'initialiser les variables d'instance
◼ Le rechargement
 Fonctionnalité utile en phase de développement et gérée par le moteur
de servlet
◼ L'exécution
 Lorsque le moteur reçoit une requête, il examine son type pour appeler
la méthode correspondante de la servlet (GET, POST,...)
◼ La destruction (destroy)
 Processus géré par le moteur de servlet
37
Le développement d’application web

Développement d'une servlet HTTP

◼ La classe HttpServlet implémente l'interface Servlet

◼ Elle définit les méthodes


 doGet() pour répondre aux requêtes GET
 doPost() pour répondre aux requêtes POST

◼ Votre servlet doit obligatoirement redéfinir l'une des deux


méthodes en fonction du type d'envoi de la requête

38
Le développement d’application web

Servlet GET
import [Link].*;
import [Link].*;

public class VotreServlet extends HttpServlet


{
public void init(HttpServletConfig c)
throws ServletException {…}

public void doGet(HttpServletRequest request,


HttpServletResponse response)
throws ServletException, IOException {…}

public void destroy() {…}


}

39
Le développement d’application web

Classes d'entrée/sortie
◼ HttpServletRequest
 Contient les informations transmises par le client
 Formulaire HTML
– Récupération par la méthode String getParameter(String nom)
ou String[] getParameterValues(String nom)
 Session
 Lecture de cookies
 Variables d’environnement
– [Link]() : retourne la méthode HTTP (GET, POST, ...)
– [Link]() : retourne la chaine après le ‘?’
– [Link]() : retourne le chemin de la servlet appélée
– [Link]() : retourne l’ID de session
– [Link]("User-Agent") : retourne le nom du navigateur
– [Link]() : retourne le nom de la machine cliente
– [Link]() : retourne le nom du serveur

40
Le développement d’application web

Classes d'entrée/sortie
◼ HttpServletResponse
 Permet construire le flot de sortie de la servlet
 Page HTML
 Redirection
– [Link]("[Link]

 Dépôt de cookies

41
Le développement d’application web

Exemple de méthode doGet()


public void doGet (HttpServletRequest request, HttpServletResponse
response) throws ServletException, IOException
{
[Link]("text/html"); // Format de sortie
PrintWriter out = [Link](); // Flot de sortie

[Link]("<html>");
[Link]("<body>");
[Link]("<h2>Bonjour</h2>") ;
[Link]("</body>");
[Link]("</html>");
}

42
Le développement d’application web

Exemple de méthode doPost()


public void doPost (HttpServletRequest request, HttpServletResponse
response) throws ServletException, IOException
{
[Link]("text/html"); // Format de sortie
PrintWriter out = [Link](); // Flot de sortie

String nom = [Link]("nom");


String prenom = [Link]("prenom");

[Link]("<html>");
[Link]("<body>");
[Link]("<h2>Bonjour " + nom + " " + prenom + "</h2>") ;
[Link]("</body>");
[Link]("</html>");
}

43
Le développement d’application web

Modèles de fonctionnement

◼ Plusieurs personnes demandent le même service en même


temps
 Mode multithread
 Un thread est créé par requête utilisateur
 Une seule instance de servlet est chargée en mémoire
 Occupation mémoire faible
 Bonne vitesse d'exécution
 Problème éventuel de synchronisation
– Implémentation de SingleThreadModel
– Bloc synchronized

 Cadre d'utilisation
– Peu de requêtes simultanées
– Gestion centralisée des ressources

44
Le développement d’application web

Modèles de fonctionnement
 Mode monothread
 Le pool de servlets : plusieurs instances sont créées
 Occupation mémoire plus élevée
 Meilleur temps de réponse
 Thread safe

 Cadre d'utilisation
– Association avec des systèmes gérant déjà le multithread (SGBD)
– Beaucoup de requêtes simultanées

45
Les JavaServer Pages
(JSP)

46
Le développement d’application web

JavaServer Pages

◼ Technologie côté serveur


◼ Code java inclus dans des pages HTML, cela facilite ainsi la
prise en charge des aspects statiques

◼ Balises (tags)
 De script <% %>
 De directive <%@ %>
 D’action <jsp: />

◼ Extension du fichier .jsp


◼ Les fichiers peuvent être stockés n'importe où sous la racine du
serveur web (dépend de la configuration du serveur)
47
Le développement d’application web

Principe de fonctionnement
Client Serveur d’application

JVM
requête HTTP  Moteur
Serveur 
de servlet
web
réponse
  

1. Le serveur web transmet la page .jsp au moteur de servlet


2. Le moteur de servlets transforme la page .jsp en page .java puis
il compile cette dernière pour obtenir une servlet (.class)
3. Chargement du .class et exécution
4. Retour du flot de sortie de la servlet
5. Transmission du flot au serveur web

48
Le développement d’application web

Les variables prédéfinies

◼ Pour chaque JSP les objets suivants sont accessibles

 request : HttpServletRequest
 response : HttpServletResponse
 session : HttpSession
 out : PrintWriter
 application : ServletContext
 config : ServletConfig

49
Le développement d’application web

Les tags de script

◼ Pour l’insertion de code java dans la page

◼ <%= expression %>


 Permet d'intégrer des valeurs dans le code HTML
<%= [Link]() %> // Machine cliente
<%= cpt %> // Affichage de la valeur d'une variable

◼ <%! déclaration %>


 Permet de définir des variables et des méthodes d'instance
 Persiste entre deux invocations de la page
<%!
int nb = 10;
int carre() { nb = nb*nb; }
%> 50
Le développement d’application web

Les tags de script

◼ <% bloc de code java %> (Scriptlet)


 Accès aux variables et aux méthodes déclarées
 Accès aux objets implicites

<HTML><BODY>
<H1>Table de multiplication du nombre 7</H1>
<%
int i; // variable locale
int mult;
for (i=0 ; i<9 ; i++)
{
mult = i*7;
[Link]( "7*" + i + " = " + mult + "<BR>" );
}
%>
</BODY></HTML>
51
Le développement d’application web

Les tags de directive

◼ Pour la structuration de la page JSP

◼ La directive page
<%@page import="[Link], [Link].*" %>
<%@page errorPage="chemin_de_la_page" %>
 Pour définir les options de la page
◼ La directive taglib
<%@taglib uri="[Link] prefix="c" %>
 Pour déclarer l'utilisation d'une bibliothèque de tags personnalisés
◼ La directive include
<%@include file="chemin_de_la_page" %>
 Pour insérer un fichier (avant la compilation de la page JSP)

52
Le développement d’application web

Les tags d’actions

◼ Pour effectuer des traitements spécifiques

◼ Pour instancier un bean (JavaBean) dans une page JSP


<jsp:useBean id="beanName" class="[Link]" scope="page" />
 id : nom de l’objet
 class : nom de la classe
 scope : portée du bean (page, request, session, application)
◼ Retourne la propriété d'un bean
<jsp:getProperty name="beanName" property="propName" />
◼ Mise à jour de la propriété d'un bean
<jsp:setProperty name="beanName"
property="propName"
value="val" />
53
Le développement d’application web

Les tags d’actions

◼ Pour inclure une page


<jsp:include page="url" flush="true" />
 Similaire à l’appel d’un sous programme

◼ Pour rediriger une page


<jsp:forward page="url" />

◼ Pour transmettre des paramètres aux pages incluses ou


déléguées
<jsp:param name="nom" value="dupont" />

54
Le développement d’application web

Les EL (Expression Language)

◼ Permettent de manipuler les données au sein d'une JSP plus


facilement qu'avec les scriptlets Java.
${expression} : ${3+7}, ${[Link]}
◼ Les objets implicites
 pageScope, requestScope, sessionScope, applicationScope
 Pour accéder aux différents attributs (Object)
${[Link]}
<%= [Link]("etudiant").getNom() %>
 param, paramValues
 Pour accéder aux paramètres (String) de la requête HTTP
${[Link]}
<%= [Link]("prenom") %>
 Cookie
 Pour accéder aux différents cookies
55
MVC pour
le développement web

Modèle - Vue - Contrôleur


Model - View - Controller

56
Le développement d’application web

MVC

◼ Architecture logicielle dédiée au découpage logique d'une


application
◼ Objectif
 Répartir et séparer les traitements, la présentation et l'interaction avec
l'utilisateur
 Possibilité d’avoir des vues multiples sur les mêmes données
 Maintenance et test plus faciles

◼ Trois « acteurs »
 Le modèle : coté « métier »
 La vue : côté « présentation »
 Le contrôleur : coté « interaction »

57
Le développement d’application web

MVC

◼ Le modèle
 Partie fonctionnelle
 Traitement des données
 Partie persistance (État)
 Stockage sur un support permanent (i.e. des tables)
 Restauration de données physiques (i.e. des n-uplets) sous la forme d'objets

 Les deux parties doivent être séparées dans la conception de


l'application

58
Le développement d’application web

MVC

◼ La vue
 Présente l’état du modèle
 Obtention des données du modèle
 Mise en forme des données
 Synchronisation possible avec le modèle
 Si les données du modèle changent, la vue change
 Propagation des données saisies par l’utilisateur vers le contrôleur
◼ Le contrôleur
 Gère les interactions avec l’utilisateur
 Affichage d’une vue demandée par l’utilisateur
 Assure le comportement de l’application
 Affichage d’une vue suite à une mise à jour dans le modèle

59
Le développement d’application web

MVC

[Link]

60
Le développement d’application web

MVC pour le développement web

◼ Servlet (Contrôleur)
 Réception des requêtes HTTP
 Extraction des données utilisateur et affectation à des objets métiers
 Gestion de la session (ajout et suppression d’objets...)
 Délégation à une page JSP pour affichage

◼ JSP (Vue)
 Accès aux objets métiers et affichage de leur état
 Interaction utilisateur

◼ JavaBean (Modèle)

61
Le développement d’application web

Délégation Servlet / JSP

◼ Délégation
 d’affichage (Servlet / JSP)
 de traitement (Servlet / Servlet)

◼ Implémentation
 Chaînage
RequestDispatcher rd = [Link]("url");
[Link](request,response);
 Délégation côté serveur (non vue par l’utilisateur)
 Passage de paramètre : [Link]()
 Redirection
[Link]("url");
 Délégation côté client (vue par l’utilisateur)
 Passage de paramètre : url?nom=valeur
62
Le développement d’application web

Exemples de chaînage

◼ Faire suivre sous condition


public void doGet(HttpServletRequest request,
HttpServletResponse response)
throws ServletException, IOException
{
String nom, url;
RequestDispatcher rd;
nom = [Link]("nom");

if (nom == null)
url = "[Link]";
else
url = "[Link]";

rd = [Link](url);
[Link](request,response);
}
63
Le développement d’application web

Exemples de chaînage

◼ Transmettre des données


public void doGet(HttpServletRequest request,
HttpServletResponse response)
throws ServletException, IOException
{
String nom, prenom;
Personne nvPers;
RequestDispatcher rd;
nom = [Link]("nom");
prenom = [Link]("prenom");
nvPers = new Personne(nom,prenom);

[Link]("nvPersonne",nvPers);

rd = [Link]("[Link]");
[Link](requete,reponse);
}
64
Le développement d’application web

Exemples de chaînage

◼ Transmettre des données via une session


public void doGet(HttpServletRequest request,
HttpServletResponse response)
throws ServletException, IOException
{
String nom, prenom;
Personne nvPers;
RequestDispatcher rd;
nom = [Link]("nom");
prenom = [Link]("prenom");
nvPers = new Personne(nom,prenom);
HttpSession session = [Link]();
[Link]("nvPersonne",nvPers);

rd = [Link]("[Link]");
[Link](requete,reponse);
}
65
Java DataBase Connectivity
(JDBC)

66
Le développement d’application web

JDBC

◼ API permettant d’interagir avec n’importe quelle base de


données relationnelle par l’intermédiaire du langage SQL

◼ Ensemble d’interfaces décrivant le comportement des pilotes


pour interagir avec une BD (package [Link])

Application Java

JDBC

Oracle MySql Access

67
Le développement d’application web

Les étapes de fonctionnement

 
 DriverManager
création
Connection
création
Statement ResultSet 
SQL  Données

lien avec le SGBD


Pilote du SGBD

Base de données

68
Le développement d’application web

Les étapes de fonctionnement

1. Chargement du driver par la JVM


try {
[Link]("nom_driver");
} catch (ClassNotFoundException e) { }
 Oracle : [Link]
 MySql : [Link]
 Access : [Link]

2. Ouverture de la connexion avec la BD


Connection cx;
try {
cx = [Link](url, user, passwd);
} catch (SQLException e) { }
 Url : jdbc:protocole:serveur:port/nom_bd
69
Le développement d’application web

Les étapes de fonctionnement

3. Création de l'espace d’exécution de la requête


Statement st = [Link](); ***
 Il existe trois types de Statement :
 Statement : requête statique (Danger !)
 PreparedStatement : requête dynamique, précompilée
 CallableStatement : requête dynamique stockée dans la BD

4. Envoi d’une requête


 Pour les requêtes qui retournent un résultat (select) : executeQuery
ResultSet rs = [Link](); ***
 Pour les autres (insert, update, ...) : executeUpdate
int nb = [Link](); ***
executeUpdate retourne le nombre de lignes modifiées
70
Le développement d’application web

Les étapes de fonctionnement

5. Récupération et lecture du résultat


 Les données renvoyées par la requête sont récupérées sous forme de
tableau dans un objet ResultSet

 La méthode next()*** permet de parcourir le tableau de ligne en ligne

 Les méthodes getXXX("nom_du_champ")*** permettent de récupérer la


valeur d'un champ en fonction de son nom

 Les méthodes getXXX(index_du_champ)*** permettent de récupérer la


valeur d'un champ en fonction de sa position dans le résultat
(1 pour la première colonne, 2 pour la deuxième, …)

71
Le développement d’application web

Les étapes de fonctionnement


while ([Link]())
{
String n = [Link]("nom");
int i = [Link]("taille");
...
}

 Remarque : un objet ResultSet est automatiquement fermé si l'utilisateur


fait une autre requête sur le même Statement

72
Le développement d’application web

Les étapes de fonctionnement

6. Fermeture
[Link](); ***
[Link](); ***
[Link](); ***

*** nécessite la récupération de l'SQLException

73
Le développement d’application web

Gestion des transactions

◼ Transaction : groupe de requêtes indivisibles


 Par défaut le JDBC est en mode auto commit

◼ Exemple
[Link](false); *** définit le mode de la connexion

Statement st = [Link]();
[Link]("req1");
[Link]("req2");
[Link]();

74
Le développement d’application web

Autres services

◼ Accès aux meta-données


 De la base de données
DataBaseMetaData dbmd = [Link](); ***
 D'un résultat
ResultSetMetaData rsmd = [Link](); ***
[Link](); ***
String name = [Link](int index), ***

◼ Traitement par lots


[Link]("req1"); ***
[Link]("req2");
[Link](); ***

75
Les cookies

76
Le développement d’application web

Les cookies

◼ Qu'est-ce ?
 Informations sous forme de texte envoyées par le serveur et stockées
sur le poste client (forme de persistance)
 Limite de 4 Ko pour un cookie et durée de vie réglable
 300 cookies par navigateur et 20 par site
◼ Utilité
 Gestion des paramètres des utilisateurs
 Saisie automatique (login, password, adresse, ...)
 État de visite (date de dernière visite, fréquence, ...)
◼ Sécurité
 Pas de transmission de virus possible
 Danger : pas d'encodage des informations écrites

77
Le développement d’application web

Gestion à l'aide de servlet

◼ Création d'un cookie


Cookie leCookie = new Cookie(nom, valeur);
 String nom : nom du cookie
 String valeur : valeur du cookie
◼ Dépôt du cookie sur le poste client
[Link](leCookie);
◼ Lecture des cookies
 Cookie [] cookies = [Link]();
◼ Méthodes de la classe Cookie
 getName / setName : nom du cookie
 getValue / setValue : valeur du cookie
 getMaxAge / setMaxAge : âge maximum du cookie en secondes

78
Le suivi de session

79
Le développement d’application web

Problématique

◼ Le protocole HTTP est déconnecté


 Pas de persistance de connexion
 Les requêtes ne sont pas liées entre elles
 Le serveur n'a aucun moyen de reconnaître qu'une séquence de
requêtes provient du même client

◼ Les applications de type caddie ont besoin d'enregistrer un


certain nombre d'informations (nom, numéro, choix, ...)

 Il est nécessaire de mettre en place un mécanisme de suivi de session

80
Le développement d’application web

Solutions

◼ Solutions
 Cookie
 URL + paramètres
 Champ de formulaire caché
 HttpSession

◼ Cookie
 Voir paragraphe précédent
 Gestion assez lourde

81
Le développement d’application web

Solutions

◼ URL + paramètres
 Principe : on ajoute à l'URL les différentes informations de suivi
◼ Champ de formulaire caché
 Principe : on ajoute un formulaire contenant un ou plusieurs champs
caché(s) dans la page html
 <input type="hidden" name="login" value="monlogin">

◼ Avantages
 Client anonyme
 Supporté par tous les navigateurs
◼ Inconvénients
 Informations visibles (identifiant, password, ...)
 Données de plus en plus volumineuses
 La séquence ne doit pas être interrompue 82
Le développement d’application web

Servlets de session

◼ Principe
 Un objet HttpSession va servir de conteneur pour les informations de
suivi. Il peut stocker n’importe quel type de variables
 Types primitifs encapsulés
 Tout objet (par exemple : connexions à une base de données)

 Les requêtes d'un même utilisateur vont être associées à une même
session
 Il n'est pas nécessaire que de spécifier que toutes les pages participent
à la session

83
Le développement d’application web

Servlets de session

◼ Méthodes
 Pour obtenir la session courante de l'utilisateur
HttpSession session = [Link](true);
 getSession(true) : crée une session si elle n'existe pas

 getSession(false) : retourne null si la session n'existe pas

 Pour ajouter une information à la session


void setAttribute(String nom, Object valeur);

 Pour consulter une information


Object getAttribute(String nom);

84
Les exceptions en Java

85
Le développement d’application web

Les exceptions

◼ Définition
 Événement qui survient pendant l'exécution d'un programme et qui
interrompt le fil d'exécution normal
 Les causes peuvent être multiples
 Division par zéro
 Ouverture de connexion impossible (SQLException)
 Chargement de classe impossible (ClassNotFoundException)
 Dépassement mémoire
 Si l'exception n'est pas traitée
 Terminaison anormale du programme
 Ressources non libérées

 Mise en place d'un mécanisme de récupération des exceptions

86
Le développement d’application web

Mécanisme de récupération d'exception

◼ Permet de capturer l'exception


 Évite une terminaison anormale
 Va permettre de traiter l'erreur

◼ Avantages
 Séparation entre le code normal et le code de gestion des erreurs
 Propagation de l'erreur à la méthode appelante
 Regroupement en type d'erreurs
 RuntimeException
 SQLException

87
Le développement d’application web

Attraper et traiter une exception ?

◼ Clause try
 Encapsule la partie de code susceptible de générer une exception
 Cette partie sera suivie par au moins une clause catch ou finally
try {
code
}

◼ Clause catch
 Encapsule le traitement associé à l'exception
 Plusieurs clauses catch peuvent être associées à la clause try
catch (Exception nom) {
traitement associé
}

88
Le développement d’application web

Libérer les ressources

◼ Clause finally
 Permet de fermer un fichier ou de libérer des ressources systèmes
 S'exécute indépendamment des événements survenus dans le try

◼ Exemple
try {
code
} catch (Exception1 nom) {
traitement1
} catch (Exception2 nom) {
traitement2
} finally {
libération des ressources
}
89
Le développement d’application web

Libérer les ressources (depuis java 7)

◼ Clause try-with-ressources
 Permet de définir une (ou plusieurs) ressource (fichier, connexion...) qui
sera automatiquement libérée à la fin du bloc
 Gestion plus simple qu’avec le finally

◼ Exemple
try (BufferedReader fichier = new BufferedReader(new
FileReader(path)))
{
Code
}

90
Le développement d’application web

Comment jeter une exception ?

◼ Déclaration d'une méthode pouvant jeter une exception


public type_retour nom_fonction() throws nom_exception
 Tout appel à cette méthode devra être englobé dans une bloc try-
catch sinon une erreur de compilation sera générée (unreported
exception)

◼ Instruction pour jeter une exception


throw new nom_exception(paramètres);

91
Le développement d’application web

92
Asynchronous Javascript and XML
(AJAX)

93
Le développement d’application web

Introduction

◼ AJAX n'est pas une technologie, c’est une intégration de


différentes technologies

 Présentation : CSS et XHTML


 Affichage dynamique : Document Object Model (DOM)
 Échange et manipulation de données : XML (XSLT) ou JSON
 Recherche asynchrone d'informations : XMLHttpRequest
 Langage d'intégration : JavaScript

94
Le développement d’application web

Introduction CLIENT

◼ Modèle classique d’application web Navigateur


 Demande d’une page par un client
 Envoi de la page par le serveur
Requête HTTP XHTML
 Bien adapté à la navigation hypertexte + CSS
 Moins adapté au monde des applications
logicielles
Web / Tomcat
◼ Problématiques
 A chaque interaction, il y a un temps
d’attente pour l’utilisateur
SGBD
 Pourquoi faire attendre l’utilisateur ?
SERVEURS
95
Le développement d’application web

Introduction

◼ Objectifs
 Éliminer l’aspect « start – stop » des interactions web
 Augmenter la réactivité des applications web

◼ Principes
 Remplacer le chargement de pages par le chargement du moteur AJAX
 Rôle du moteur AJAX (Javascript)
– Affichage des données
– Obtention de manière asynchrone de données
 Remplacer les interactions générant des requêtes HTTP par des appels
au moteur AJAX
 Prise en charge complète par le moteur si aucune interaction avec le serveur
n'est nécessaire (Contrôle de données)
 Interaction asynchrone avec le serveur (Échange en XML, JSON, …)
96
Le développement d’application web

Introduction

◼ AJAX aujourd'hui
 Mis en œuvre sur de nombreux sites (Google Maps, Gmail, etc.)
 Défi principal
 Revoir la conception des applications
 Remise en cause d'années d'expérience
◼ Critiques
 Positives
 Réactivité, les requêtes envoyées au serveur ne sont pas bloquantes
 Possibilité d’interagir avec le serveur à partir de n’importe quelle action de
l’utilisateur (beaucoup plus restreint dans le modèle classique)
 Négatives
 Nouveau principe de navigation, que veut dire revenir à la page précédente ?
 Échange presque systématique avec le serveur
 Le JavaScript est assez verbeux
97
Le développement d’application web

Modèle d’application AJAX

2. Flot XML / JSON


CLIENT
Web / Tomcat
Interface

Appel 3. HTML
JavaScript CSS
SGBD
Moteur AJAX

SERVEURS
1. Requête HTTP

98
Le développement d’application web

Fonctionnement d’AJAX

◼ Etapes

1. Comment le moteur AJAX sollicite le serveur ?

2. Comment le moteur AJAX réceptionne des données


de manière asynchrone ?

3. Comment le moteur rafraîchit une ou plusieurs portions de la page en


fonction des données reçues ?

99
Le développement d’application web

Fonctionnement 1)

◼ Comment le moteur AJAX sollicite le serveur ?


 Fonctions Javascript
 Traitement des événements « client » : OnClick, OnFocus, OnBlur,
OnChange, OnSubmit, OnMouseUp, ...
 Composant XMLHttpRequest
 Objet JavaScript permettant les échanges de données entre le serveur et le
client
◼ Illustration
 Suggérer au fur et à mesure de la saisie, des noms commençant par les
caractères saisis dans une zone de texte
Dans le fichier HTML
<input id="nom" type="text" name="nom" />

Dans le fichier JS
[Link]("nom")
.addEventListener("keyup",completerListe);
100
Le développement d’application web

Fonctionnement 1)

◼ Illustration
 Création de la fonction dans le fichier JS

// Fonction déclenchée à chaque caractère saisi


function completerListe() {
var xhr = new XMLHttpRequest();

// Paramétrage du composant XMLHttpRequest


// puis envoi de la requête au serveur
...
}

101
Le développement d’application web

Fonctionnement 1)

◼ Illustration
 Paramétrage du composant : définir le traitement en réponse au serveur
 A faire dans la fonction initiale completerListe()
 Le flot de retour est donné par l’attribut responseText si flot texte et par
l’attribut responseXML si flot XML

// La réponse du serveur a été reçue.


[Link] = function()
{
// Si la requête http s'est bien passée.
if([Link] == 200)
{
chargerSuggestions([Link]);
}
}
102
Le développement d’application web

Fonctionnement 1)

◼ Illustration
 Paramétrage et envoi de la requête au serveur
[Link]("GET", url, true);
 Type de requête HTTP : GET ou POST
 Adresse de la ressource sur le serveur (Java, Php, …)
 Mode asynchrone (true) ou synchrone
 Les données sont transmises sous forme de couple : nom=valeur
– En GET
[Link]("GET", url + "?params", true);
[Link]();
– En POST
[Link]("POST", url, true);
[Link](params);

103
Le développement d’application web

Fonctionnement 1)

◼ Problématiques liées à l’échange d’URL


 Le format de caractères
 Client/serveur ou serveur/serveur doivent échanger des URLs et des
données dans le même format de caractères (UTF-8 fortement conseillé)
 Les caractères interdits
 ; / ? : @ & = + $ ,
 L’espace et caractères accentués

 Faire de l’encodage d’URL !


[Link]("Content-Type",
"application/x-www-form-urlencoded");

 Ajax vers Servlet


params = "nom1=" + encodeURIcomponent(val1) + "&"
+ "nom2=" + encodeURIcomponent(val2);
104
Le développement d’application web

Fonctionnement 2)

◼ Comment le moteur réceptionne des données de manière


asynchrone ?
 Fonction de retour définie dans le composant XMLHttpRequest
 Analyse du flot XML si nécessaire
 Fonctions JavaScript d'analyse de documents XML (représentation DOM)
– Document Object Model
– Structure XML hiérarchisée
 Fonctions principales
– [Link](id) : retourne un élément en fonction de son id
– [Link](name) : retourne le(s) élément(s) en
fonction de son name
– [Link](champ) : retourne le tableau des éléments
correspondant à la balise champ situés sous l’arbre de l’élément spécifié elt
– getElementsByClassName
– querySelector (sélecteurs CSS) et querySelectorAll

105
Le développement d’application web

Fonctionnement 2)

◼ Illustration
 Pour les suggestions de noms

<?xml version="1.0" ?>


<donnees>
<nuplet id="s1">
<nom>Dupond</nom>
<pays>France</pays>
</nuplet>
<nuplet id="s2">
<nom>Dupont</nom>
<pays>France</pays>
</nuplet>
</donnees>
106
Le développement d’application web

Fonctionnement 2)

◼ Illustration
 Parcours des suggestions

function changerSuggestions(suggestionsXML) {
var i, suggestions;
suggestions = [Link]("nuplet");

for(i = 0; i < [Link]; i++) {


// Traitement du nuplet
}
}

107
Le développement d’application web

Fonctionnement 2)

◼ Illustration
 Traitement du nuplet

 Accès aux noeuds


noeudNom = suggestions[i].getElementsByTagName("nom")[0];
noeudPays = suggestions[i].getElementsByTagName("pays")[0];

 Accès aux valeurs


nom = [Link];
pays = [Link];

108
Le développement d’application web

Fonctionnement 3)

◼ Comment le moteur rafraîchit une ou plusieurs portions de la


page en fonction des données reçues ?

 Fonction JavaScript / DOM


 Page HTML représentée comme un objet DOM
[Link][0].checked
 Nom des balises : li, td, img
 Identifiant
 Paramètre id dans les balises

109
Le développement d’application web

Fonctionnement 3)

◼ Modification de l’affichage d’un élément de la page


 Remplacer le contenu HTML d’un élément
innerHTML
 Illustration
elt = [Link]("idElt");
[Link] = text;

 Insérer du contenu HTML


insertAdjacentHTML (position, text)
 Illustration
elt = [Link]("idElt");
[Link]('afterbegin',text)

110
Le développement d’application web

Fonctionnement 3)

◼ Modification de la structure de la page


 Création de nœuds
[Link]()
[Link]()
 Affectation des nœuds créés à des nœuds parents
[Link]()
[Link]()
...

 Illustration
txt = "nouveau txt du nouveau noeud";
liste = [Link]("liste");
li = [Link]("li");
[Link]([Link](txt));
[Link](li); 111
Le développement d’application web

AJAX et JAVA

◼ Java pour la génération du flot XML


 Modification du type MIME des données produites
 Écriture dans le flux de sortie

[Link]("application/xml");
PrintWriter out = [Link]();
[Link]("<?xml version=\"1.0\"?>");
[Link]("<donnees>");
...
[Link]("</donnees>");
[Link]();

112
Le développement d’application web

113
Mapping Objet-Relationnel
-
Hibernate

114
Le développement d’application web

Mise en œuvre de la persistance de données

◼ La persistance est une technique en charge de


l’enregistrement et de la restauration des données.

◼ Le pattern DAO (Data Access Object)


 La couche DAO effectue le lien entre la couche métier (les objets) et la
couche de données (les tables) :
 Une classe - Une table
 Un objet - Un tuple
 Une propriété - Un attribut
 Type Java - Type SQL

 Implémente les opérations CRUD


 Create, Read, Update et Delete

115
Le développement d’application web

Mise en œuvre de la persistance de données

◼ Java Persistence API (JPA) est la spécification Java pour le


mapping objet-relationnel
 Surcouche logicielle au JDBC
 Implementations
 Hibernate
 EclipseLink
 OpenJPA

 Avantages
 Productivité
 Génération de code
 Pas ou peu de manipulation de SQL

116
Le développement d’application web

Exemple de travail

117
Le développement d’application web

Mise en œuvre de la persistance de données

◼ Problématiques
 Comment traduire et gérer les références entre objets ?
 Les relations en BD sont bidirectionnelles.
 Les références entre objets sont unidirectionnelles.
 Quand dois-je charger les objets référencés ?

 Comment gérer un cache d’objets ?


 Un objet (représentant un tuple) doit être unique.

 Comment différencier un objet persistant ou pas ?


 L’utilisateur doit pouvoir manipuler un objet et le rendre persistant que si
nécessaire.

◼ Vous êtes capables de programmer cela… mais c’est long !


118
Le développement d’application web

Hibernate

◼ Hibernate est un framework de mapping Objet-Relationnel

 Très utilisé actuellement.

 Permet de manipuler les données d’une BD comme des objets donc de


s’éloigner des requêtes SQL.
 Gère les caches d’objets.
 Gère les transactions.
 …

 La correspondance entre objet et relationnel est décrite dans un fichier


de mapping ou à l’aide d’annotations dans les fichiers Java.

119
Le développement d’application web

Les classes persistances dans Hibernate

◼ Pour être rendues persistantes une classe doit être un POJO


(Plain Ordinary Java Object).
 Tous les attributs doivent posséder leur setter et getter.
 Implémenter le constructeur par défaut.
 Désigner une propriété comme identifiant (optionnel).
 Implémenter equals() et hashCode()

◼ Les collections (rappels)


 Set : interface pour un ensemble d’objets. Les doublons ne sont pas
autorisés. Pas d'accès direct aux éléments.
 List : interface pour un ensemble ordonné d’objets. Doublons autorisés
et accès direct à un élément.
 Map : interface qui gère un ensemble sous la forme clé/valeur.
120
Le développement d’application web

États d’un objet

Ephémère
new save
delete saveOrUpdate
persist
load
get Persistant

evict update
saveOrUpdate

Détaché

121
Le développement d’application web

États d’un objet

◼ Éphémère
 Un objet est éphémère s'il a juste été instancié avec new.
 Il n'a pas de représentation persistante en base de données et aucune
valeur d'identifiant n'a été assignée.

◼ Persistant
 Un objet persistant a une représentation dans la base de données et
une valeur d'identifiant. Il peut avoir été sauvegardé ou chargé.
 Il est dans la portée d’une session.
 Hibernate détectera tout changement effectué sur un objet dans l'état
persistant et synchronisera l'état avec la base de données lors de la fin
de l'unité de travail.

122
Le développement d’application web

États d’un objet

◼ Détaché
 Un objet détaché est un objet qui a été persistant dont la session a été
fermée. La référence à l'objet est encore valide et l’objet peut être
modifié.
 Un objet détaché pourra être rattaché à une nouvelle session, le rendant
de nouveau persistant.
 Cette fonctionnalité rend possible un modèle de programmation pour de
longues unités de travail qui requièrent un temps de réflexion de
l'utilisateur.

123
Le développement d’application web

Exemples

◼ Rendre un objet persistant


Employe e = new Employe("Dupond", "Pierre"); // e est éphémère

Session ses = [Link]().getCurrentSession();


Transaction tc = [Link]() ;
[Link](e); // e est persistant
[Link](); // Commit et flush automatique de la session

[Link]("Dupont"); // e est détaché

Session ses2 = [Link]().getCurrentSession();


[Link]() ;
[Link](e); // e est persistant
[Link]().commit();

124
Le développement d’application web

Exemples

◼ Chargement d’un objet (dans une transaction active)


 Par la méthode get ()
Employe e = (Employe)[Link]([Link], 1);
 Effectue une requête d’interrogation en BD lors du get().
 Retourne null si aucun tuple ne correspond à l’identifiant donné.

 Par la méthode load ()


Employe e = (Employe)[Link]([Link], 1);
 Crée un proxy d’Employé
– Objet avec son identifiant mais ses propriétés ne sont pas assignés.
 N’effectue pas de requête d’interrogation en BD lors du load().
 L’objet sera totalement assigné lors de sa première utilisation.
 Retourne l’erreur ObjectNotFound si aucun tuple ne correspond à
l’identifiant donné.

125
Le développement d’application web

Les requêtes

◼ En HQL (Hibernate Query Language)


 Langage d’interrogation orientée objet
Query q = [Link]("from Demande as dde where
[Link] between 2 and 4)
List<Demande> ld = (List<Demande>) [Link]();

◼ En SQL natif
List l = [Link]("Select *
From Demande").list();

 Retourne une liste d’Object[]

126
Le développement d’application web

Les requêtes

◼ Hibernate Query Named


 Les requêtes HQL les plus utilisées peuvent êtres déclarées dans le
fichier de mapping XML
<query name="GET_ALL_EMPLOYE">from Employe</query>
 Pour l’exécuter : [Link](”GET_ALL_EMPLOYE”)

◼ L’API Criteria
 Permet de définir les critères d’une requête d’un manière objet (par
appel de méthode) au lieu d’utiliser le HQL
List l_nb_dde = [Link]([Link])
.add([Link]("nomE", "%er%"))
.setProjection([Link]()
.add([Link]("nomE"))
.add([Link]("prenomE")))
.list(); 127
Le développement d’application web

Exemple de travail

128
Le développement d’application web

Association de type 1-n entre classes

◼ Association de type 1-n (one-to-many) ou n-1 (many-to-one)


 Association « Effectuer »

 Pour traduire l’association, nous devons ajouter :


 Une référence dans la classe coté many : « Demande » et
 <many-to-one> dans le mapping

 Une collection dans la classe coté one : « Employe » et


 <one-to-many> dans le mapping

129
Le développement d’application web

Fichier de mapping pour une association 1-n

◼ De la classe Employe à la table Employe


<hibernate-mapping>
<class catalog="berro" name="[Link]" table="Employe">
<id name="codeE" type="[Link]">
<column name="CodeE"/>
<generator class="identity"/>
</id>
<property name="nomE" type="string">
<column length="25" name="NomE" not-null="true"/>
</property>
<property name="prenomE" type="string">
<column length="25" name="PrenomE" not-null="true"/>
</property>
...
</class>
</hibernate-mapping> 130
Le développement d’application web

Annotations pour une association 1-n

◼ De la classe Employe à la table Employe


@Entity(name = "Employe")
public class Employe implements [Link]
{
@Id
@GeneratedValue(strategy = [Link])
@Column(name = "CodeE")
private Integer codeE;

private String nomE;


private String prenomE;
...
}

131
Le développement d’application web

Fichier de mapping pour une association 1-n

◼ Propriété Set<Demande> demandes de la classe Employe


<hibernate-mapping>
<class catalog="berro" name="[Link]" table="Employe">
...
<set cascade="all" inverse="true" name="demandes">
<!-- Clé étrangère de Demande vers Employe -->
<key column="CodeEmp"/>
<one-to-many class="[Link]"/>
</set>
...
</class>
</hibernate-mapping>

132
Le développement d’application web

Fichier de mapping pour une association 1-n

◼ Propriétés Employe employe de la classe Demande


<hibernate-mapping>
<class catalog="berro" name="[Link]" table="Demande">
...
<many-to-one name="employe"
class="[Link]"
not-null="true"
column="CodeEmp"
insert="false"
update="false"/>
...
</class>
</hibernate-mapping>

133
Le développement d’application web

Annotations pour une association 1-n

◼ Propriété Set<Demande> demandes de la classe Employe


@OneToMany(mappedBy = "employe", fetch = [Link])
private Set<Demande> demandes = new HashSet(0);

◼ Propriétés Employe employe de la classe Demande

@ManyToOne(fetch = [Link])
@JoinColumn(name = "CodeEmp")
private Employe employe;

134
Le développement d’application web

Association de type n-n entre classes

◼ Association de type n-n (many-to-many)


 Association « Travailler »
 Ne pas créer le POJO et le fichier de mapping pour « Travailler »

 Pour traduire l’association, nous devons ajouter :


 Une collection dans la classe « Service »
 <many-to-many> dans le mapping

 Une collection dans la classe « Employe »


 <many-to-many> dans le mapping

135
Le développement d’application web

Fichier de mapping pour une association n-n

◼ Propriété Set<Employe> employes de la classe Service


<hibernate-mapping>
<class catalog="berro" name="[Link]" table="Service">
...
<set name="employes" inverse="true" table="Travailler">
<!-- Clé étrangère de Travailler vers Service -->
<key column="CodeServ"/>
<!-- Clé étrangère de Travailler vers Employe -->
<many-to-many column="CodeEmp" class="[Link]"/>
</set>
...
</class>
</hibernate-mapping>

136
Le développement d’application web

Fichier de mapping pour une association n-n

◼ Propriété Set<Service> services de la classe Employe


<hibernate-mapping>
<class catalog="berro" name="[Link]" table="Employe">
...
<set name="services" inverse="false" table="Travailler">
<!-- Clé étrangère de Travailler vers Employe -->
<key column="CodeEmp"/>
<!-- Clé étrangère de Travailler vers Service -->
<many-to-many column="CodeServ" class="[Link]"/>
</set>
...
</class>
</hibernate-mapping>

137
Le développement d’application web

Annotations pour une association n-n

◼ Propriété Set<Employe> employes de la classe Service


@ManyToMany(mappedBy = "services")
private Set<Employe> employes = new HashSet(0);

◼ Propriété Set<Service> services de la classe Employe


@ManyToMany
@JoinTable(name = "Travailler",
joinColumns = @JoinColumn(name = "CodeEmp"),
inverseJoinColumns = @JoinColumn(name = "CodeServ"))
private Set<Service> services = new HashSet(0);

138
Le développement d’application web

Classe d’association

◼ Classe d’association « Valider »

◼ Création d'une clé composite (composée)

◼ La classe d’association se traduit comme 2 associations 1-n :


 Une association entre Service et Valider
 Propriété Map<Demande, Valider> validers dans la classe Service
 Propriété Service service dans la classe Valider

 Une association entre Demande et Valider


 Propriété Map<Service, Valider> validers dans la classe Demande
 Propriété Demande demande dans la classe Valider

139
Le développement d’application web

Fichier de mapping pour une classe


d'association
◼ Propriété Map<Demande, Valider> validers
de la classe Service
<map name="validers" table="Valider" cascade="all" inverse="false
lazy="true" fetch="select">
<!-- Clé étrangère de Valider vers Service -->
<key>
<column name="CodeServ" not-null="true" />
</key>
<map-key-many-to-many column="CodeDde" class="[Link]" />
<one-to-many class="[Link]" />
</map>

140
Le développement d’application web

Fichier de mapping pour une classe


d'association
◼ Propriété Service service de la classe Valider
<many-to-one name="service" class="[Link]"
update="false"
insert="false"
fetch="select">
<!-- Clé étrangère de Valider vers Service -->
<column name="CodeServ" not-null="true"/>
</many-to-one>

141
Le développement d’application web

Annotations pour une classe d'association

◼ Propriété Map<Demande, Valider> validers


de la classe Service
@OneToMany(mappedBy = "service", cascade = [Link])
@MapKeyJoinColumn(name = "CodeDde")
private Map<Demande,Valider> validers = new HashMap(0);

◼ Propriété Servive service de la classe Valider


@ManyToOne
@JoinColumn(name = "CodeServ", insertable = false, updatable = false)
private Service service;

142
Le développement d’application web

Héritage

◼ Il existe 3 stratégies de mapping pour l’héritage


 Une seule table (SINGLE_TABLE), stratégie par défaut
 Une colonne discriminante pour différencier les classes filles
 Stratégie la plus performante (en lecture/écriture)

 Une table pour chaque classe concréte (TABLE_PER_CLASS)


 Classe abstraite non traduite

 Une table et une jointure par classe (JOINED)


 Proche du modèle objet
 Stratégie la moins performante (en lecture/écriture)

143
Le développement d’application web

Héritage sur une seule table

◼ Fichier de mapping
<class … name="[Link]" ... discriminator-value="Employe">
<discriminator column="TypeE" length="25" type="string"/>

<subclass name="[Link]" discriminator-value="Technicien">
<property> … </property>
</subclass>
</class>

◼ Annotations
@Entity
@Inheritance(strategy=InheritanceType.SINGLE_TABLE)
@DiscriminatorColumn(name="TypeE",
discriminatorType=[Link])
@DiscriminatorValue("Employe")

144
Le développement d’application web

145
JSP Standard Tag Library
(JSTL)

[Link]
[Link]

146
Le développement d’application web

JSP Standard Tag Library

◼ Objectifs
 Simplifie la création de JSP
 Évite aux utilisateurs la connaissance du langage java

◼ Technologie côté serveur


◼ Page JSP utilisant une syntaxe XML personnalisée
 Tags structurels
 Tags SQL
 Tags XML

147
Le développement d’application web

JSTL - Tags structurels

◼ URI
<%@taglib uri="[Link] prefix="c"%>

◼ Initialisation d'une variable


<c:set var="nom" scope="page" value="igsi"/>
<c:set var="nom" value="${param.txt_nom}"/>

◼ Afficher une variable


<p>
Nom de la personne : ${nom}
</p>

148
Le développement d’application web

JSTL - Tags structurels

◼ Structure conditionnelle
<c:if test="condition">
Bloc d'instruction
</c:if>
 Il n'y a pas de else

◼ Structure itérative
<c:forEach var="element" items="listeElements">
Bloc d'instructions
</c:forEach>

149
Le développement d’application web

JSTL - Tags structurels

◼ Exemple
<select name="l_pays" size="2" multiple="multiple">
<option value="fr">France</option>
<option value="es">Espagne</option>
<option value="it">Italie</option>
</select>

<h1>Pays sélectionnés</h1>
<c:forEach var="pays" items="${paramValues.l_pays}">
Pays : ${pays} <br />
</c:forEach>

150
Le développement d’application web

JSTL - Tags structurels

◼ Structure itérative
<c:forEach var="cpt" begin="debut" end="fin" step="pas">
Bloc d'instructions
</c:forEach>

<c:forEach var="i" begin="1" end="10" step="1">


${i} : ${i*7} <br />
</c:forEach>

151
Le développement d’application web

JSTL - Tags SQL

◼ URI
<%@taglib uri="[Link] prefix="sql"%>

◼ Déclaration de la ressource
 Dans une page
<sql:setDataSource
var="maSource"
user="monLogin"
password="monMotDePasse"
driver="[Link]"
url="jdbc:mysql://siteBase/maBase" />

 Au niveau de l'application

152
Le développement d’application web

JSTL - Tags SQL

◼ Requête de mise à jour


 Insert, delete, update
<sql:update var="acquittement" dataSource="${maSource}">
Requête SQL
</sql:update>

◼ Exemple
 Soit la table Pilote (NumPilote, NomPilote, PaysPilote)

<form action="[Link]" method="get">


Pilote : <input type="text" name="txt_numPilote"/>
<input type="submit" value="Supprimer"/>
</form>

153
Le développement d’application web

JSTL - Tags SQL

◼ Page [Link]

<%@taglib uri="[Link] prefix="sql"%>


<%@page contentType="text/html" pageEncoding="utf-8"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Pilote</title>
</head>
<body>
<h1>Suppression d'un pilote</h1>
<sql:update var="acq" dataSource="${maSource}">
DELETE FROM Pilote WHERE NumPilote = ${param.txt_numPilote}
</sql:update>
Nombre de pilote supprimé : ${acq}
</body>
154
Le développement d’application web

JSTL - Tags SQL

◼ Interrogation
 Envoie de la requête
 Réponse sous la forme d'un curseur sur un ensemble de nuplets

<sql:query var="listeNuplets" dataSource="${maSource}">


SELECT ... FROM ...
</sql:query>

 La variable listeNuplets est le curseur permettant d'accéder aux


données

155
Le développement d’application web

JSTL - Tags SQL

◼ Parcours des données


 Boucle forEach sur les nuplets
<c:forEach var="nuplet" items="${[Link]}">
Traitement du nuplet
</c:forEach>

 Boucle forEach sur les noms des colonnes


<c:forEach var="nomCol" items="${[Link]}">
Traitement du nom de colonne
</c:forEach>

156
Le développement d’application web

JSTL - Tags SQL

◼ Parcours du nuplet courant


 Accès à un élément (noms des colonnes connus)
${[Link]}
 Accès à un élément (noms des colonnes inconnus)
${nuplet[i]}, i numéro de la colonne

 Accès à un élément par un parcours (noms des colonnes inconnus)


<c:forEach var="nuplet" items="${[Link]}">
<c:forEach var="colonne" items="${nuplet}">
${colonne}
</c:forEach>
</c:forEach>

157
Le développement d’application web

JSTL - Tags SQL

◼ Exemple : afficher la liste des pilotes

<sql:query var="l_pilotes" dataSource="${maSource}">


SELECT NumPilote, NomPilote FROM Pilote
</sql:query>

<table border="1">
<c:forEach var="pilote" items="${l_pilotes.rows}">
<tr>
<td>${[Link]}</td>
<td>${[Link]}</td>
</tr>
</c:forEach>
</table>
158
Le développement d’application web

159

Vous aimerez peut-être aussi