Dev Appli Web Fi
Dev Appli Web Fi
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
3
Le développement d’application web
◼ 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
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 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
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
Serveur
Traitements Traitements Traitements Traitements
Présentation
Client
Données Données
10
Le développement d’application web
11
Le développement d’application web
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
13
Le développement d’application web
L’architecture 3-tiers
Client Serveur d’application Serveur de données
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
16
Le développement d’application web
Client riche
17
Pages dynamiques
et
fonctionnement
d'une requête HTTP
18
Le développement d’application web
Principe
19
Le développement d’application web
20
Le développement d’application web
22
Le développement d’application web
24
Le développement d’application web
Envoi de la requête
◼ 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
◼ 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/
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
29
Les servlets
30
Le développement d’application web
◼ [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
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
JVM
requête HTTP Moteur
Serveur
de
web [Link]
réponse
servlet
36
Le développement d’application web
Le cycle de vie
38
Le développement d’application web
Servlet GET
import [Link].*;
import [Link].*;
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
[Link]("<html>");
[Link]("<body>");
[Link]("<h2>Bonjour</h2>") ;
[Link]("</body>");
[Link]("</html>");
}
42
Le développement d’application web
[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
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
◼ Balises (tags)
De script <% %>
De directive <%@ %>
D’action <jsp: />
Principe de fonctionnement
Client Serveur d’application
JVM
requête HTTP Moteur
Serveur
de servlet
web
réponse
48
Le développement d’application web
request : HttpServletRequest
response : HttpServletResponse
session : HttpSession
out : PrintWriter
application : ServletContext
config : ServletConfig
49
Le développement d’application web
<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
◼ 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
54
Le développement d’application web
56
Le développement d’application web
MVC
◼ 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
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
◼ 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
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
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
[Link]("nvPersonne",nvPers);
rd = [Link]("[Link]");
[Link](requete,reponse);
}
64
Le développement d’application web
Exemples de chaînage
rd = [Link]("[Link]");
[Link](requete,reponse);
}
65
Java DataBase Connectivity
(JDBC)
66
Le développement d’application web
JDBC
Application Java
JDBC
67
Le développement d’application web
DriverManager
création
Connection
création
Statement ResultSet
SQL Données
Base de données
68
Le développement d’application web
71
Le développement d’application web
72
Le développement d’application web
6. Fermeture
[Link](); ***
[Link](); ***
[Link](); ***
73
Le développement d’application web
◼ 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
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
78
Le suivi de session
79
Le développement d’application web
Problématique
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
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
86
Le développement d’application web
◼ 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
◼ 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
◼ 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
◼ 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
91
Le développement d’application web
92
Asynchronous Javascript and XML
(AJAX)
93
Le développement d’application web
Introduction
94
Le développement d’application web
Introduction CLIENT
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
Appel 3. HTML
JavaScript CSS
SGBD
Moteur AJAX
SERVEURS
1. Requête HTTP
98
Le développement d’application web
Fonctionnement d’AJAX
◼ Etapes
99
Le développement d’application web
Fonctionnement 1)
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
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
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)
Fonctionnement 2)
105
Le développement d’application web
Fonctionnement 2)
◼ Illustration
Pour les suggestions de noms
Fonctionnement 2)
◼ Illustration
Parcours des suggestions
function changerSuggestions(suggestionsXML) {
var i, suggestions;
suggestions = [Link]("nuplet");
107
Le développement d’application web
Fonctionnement 2)
◼ Illustration
Traitement du nuplet
108
Le développement d’application web
Fonctionnement 3)
109
Le développement d’application web
Fonctionnement 3)
110
Le développement d’application web
Fonctionnement 3)
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
[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
115
Le développement d’application web
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
◼ 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 ?
Hibernate
119
Le développement d’application web
Ephémère
new save
delete saveOrUpdate
persist
load
get Persistant
evict update
saveOrUpdate
Détaché
121
Le développement d’application web
◼ É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
◼ 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
124
Le développement d’application web
Exemples
125
Le développement d’application web
Les requêtes
◼ En SQL natif
List l = [Link]("Select *
From Demande").list();
126
Le développement d’application web
Les requêtes
◼ 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
129
Le développement d’application web
131
Le développement d’application web
132
Le développement d’application web
133
Le développement d’application web
@ManyToOne(fetch = [Link])
@JoinColumn(name = "CodeEmp")
private Employe employe;
134
Le développement d’application web
135
Le développement d’application web
136
Le développement d’application web
137
Le développement d’application web
138
Le développement d’application web
Classe d’association
139
Le développement d’application web
140
Le développement d’application web
141
Le développement d’application web
142
Le développement d’application web
Héritage
143
Le développement d’application web
◼ 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
◼ Objectifs
Simplifie la création de JSP
Évite aux utilisateurs la connaissance du langage java
147
Le développement d’application web
◼ URI
<%@taglib uri="[Link] prefix="c"%>
148
Le développement d’application web
◼ 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
◼ 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
◼ Structure itérative
<c:forEach var="cpt" begin="debut" end="fin" step="pas">
Bloc d'instructions
</c:forEach>
151
Le développement d’application web
◼ 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
◼ Exemple
Soit la table Pilote (NumPilote, NomPilote, PaysPilote)
153
Le développement d’application web
◼ Page [Link]
◼ Interrogation
Envoie de la requête
Réponse sous la forme d'un curseur sur un ensemble de nuplets
155
Le développement d’application web
156
Le développement d’application web
157
Le développement d’application web
<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