Ce document présente un cours sur le développement web utilisant des technologies JEE, avec un accent sur l'historique du web et les modèles client-serveur. Les étudiants apprendront à utiliser des frameworks de développement web à travers des projets pratiques, et la structure MVC est également abordée pour organiser le code d'application. En fin de cours, les étudiants seront capables de gérer des requêtes HTTP et de relier des serveurs web à des bases de données.

1. Technologie de développement
JEE 2
AU : 2022/2023
Institut Supérieur
d’Informatique et
Multimédia de Sfax
Mounir KETATA
Mounir.isims@gmail.com

2. Objectifs du module
Ce cours vise à sensibiliser les étudiants aux technologies
récentes de développement web
◼ Historique du développement web
◼ Les tendances du développement web
Il vise aussi à introduire et présenter les frameworks de
développement les plus connus et les plus utilisés sur le
marché.
→ Au terme de ce cours, les étudiants seront en mesure de
PRATIQUER certains frameworks de développement web en
réalisant un mini-projet.
2

3. CHAPITRE 1
Le WEB et tendances technologiques
3

4. 1. Historique du web
Histoire du web
◼ Un système mondial de réseaux connectés
◼ Un réseau est une inteconnection d’ensemble d’ordinateurs
◼ Dans sa première version, le réseau ne permettait que le
partage de documents textes (une seule police, une seule
taille, une seule couleur)
◼ Tim Berners-Lee, Chercheur au sein du CERN, invente les
hyper-liens (HyperLinks) → Naissance du WWW (World
Wide Web)
◼ Il devient facile de naviguer le web. Un clic de souris suffit
4

5. 1. Historique du web
Histoire du web
Internet ne connait un succès qu’en 1994 avec la création du
W3C (World Wide Web Consortium) et la fondation de la
compagne NetScape
La première version de PHP est rendue publique en 1994
Le premier site de e-commerce Amazon.com voit le jour en
1995
Première version du langage Java en 1995
Le CSS (Cascading Style Sheets) est introduit en 1996
Google.com est fondée en 1998
5

6. 1. Historique du web
Histoire du web
La fin des années 1990 et le début des années 2000 connait
une croissance considérable dans le monde du web
De plus en plus, les utilisateurs peuvent contribuer au
contenu du web. On parle alors du web 2.0
Les sites comme YouTube, Facebook, MySpace, .. voient le
jour
En 2006, Amazon.com lance le service Elastic Compute
Cloud (Service d’hébergement On-Demand).
6

7. 1. Historique du web
Histoire du web
En 2007, avec l’introduction de l’iPhone, les téléphones
intélligents changent radicalement la
utilisateurs accèdent à Internet.
Vu les limitations du format HTML,
manière dont les
le W3C essaye de
standardiser le format d’échange des informations sur le web
(Norme RDF) → On parle alors du web 3.0 ou Web
Sémantique.
7

8. Les termes « Clients » et « Serveur » ne sont pas
anodins.
Le fonctionnement (concept) Client-Serveur est similaire au
rapport existant entre les clients et le serveur d’un
restaurant.
2- Internet et le Modèle Client Serveur
2-1 Présentation du Client et du Serveur (1/4)

9. Restaurant
2- Internet et le Modèle Client Serveur
2-1 Présentation du Client et du Serveur (2/4)
Lorsque vous allez au restaurant
:
Vous êtes le client et vous
souhaiter commander un menu:
Un serveur gère plusieurs clients
Vous appelez le serveur
(Requête).
Requête
Le serveur doit gérer
plusieurs tables (Clients).
Le serveur répond au fur et
à mesure à la demande de
chaque client en fonction
des ressources disponible
en cuisine.

10. Le Serveur répond au
Client 1 en apportant la
commande (Réponse)
Les Client 2 et 3 passent
une commande au
serveur (Requête).
2- Internet et le Modèle Client Serveur
2-1 Présentation du Client et du Serveur (3/4)

11. Transposé dans le monde informatique :
Le Client est une application qui s’exécute sur un ordinateur
personnel.
Le Serveur est une autre application :
qui gère des ressources partagées ( Les plats, les tables ),
et qui s’exécute le plus souvent, sur un ordinateur distant (
établit une relation entre les Clients de la salle et les
ressources disponibles en cuisine).
Lorsque nous accédons à un site Internet, nous utilisons la
technologie Client-Serveur.
2- Internet et le Modèle Client Serveur
2-1 Présentation du Client et du Serveur (4/4)

12. L’accès à un site Internet nécessite les éléments
suivants :
Une application cliente (navigateur Web : Mozilla Firefox,
Netscape Navigator, Internet Explorer) auquel nous
fournissons l’adresse du site recherché du type
http://www.unsite.net.
Une application serveur (serveur Web : Nestcape
Entreprise Server, AppacheHTTP Server,IIS-Internet
Information Server, Tomcat),
Un protocole HTTP.
2- Internet et le Modèle Client Serveur
2-2 Serveur Web et accès à Internet (1/4)

13. L’application Cliente envoie une requête au serveur
Web désigné par l’URL (Uniform Resource Locator) .
2- Internet et le Modèle Client Serveur
En tapant l’URL www.unsite.net,
l’internaute émet une requête au
serveur Web via le navigateur
2-2 Serveur Web et accès à Internet (2/4)
Client
Serveur

14. Le serveur Web Contacté répond au client en
affichant l’ensemble des informations stockées et
organisées sur son disque dur à l’URL donnée.
2- Internet et le Modèle Client Serveur
2-2 Serveur Web et accès à Internet (3/4)
Client
Serveur

15. Aretenir :
Un Client est une application qui se connecte à un autre
ordinateur pour obtenir ou modifier des informations à
l’aide de requêtes.
Un Serveur est une application située sur un ordinateur
très puissant, capable de gérer un grand nombre de
requêtes simultanément.
Un Serveur est toujours en attente de requête.
2- Internet et le Modèle Client Serveur
2-2 Serveur Web et accès à Internet (4/4)

16. Le serveur d’un restaurant communique avec
différentes types de personnes :
Clients,
Cuisiniers,
Magasiniers,
Fournisseurs,
L’ordinateur serveur communique avec différentes
applications.
Il existe donc différentes règles de communications que
l’on appelle protocoles de communications.
2- Internet et le Modèle Client Serveur
2-3 Communication Client-Serveur (1/3)

17. Protocoles de communications ?
Des normes d’organisation et de transmission des données
numériques lors d’un échange entre le client et le serveur.
Toute application orientée sur un service doit être donc
capable de comprendre un message provenant d’une
autre application orientée sur le même service.
Un message électronique doit être traité par une application orientée
services de messageries, alors qu’un message issu d’une page Web doit être
examiné par une application orientée services Web.
Comment peut-on distingué une information binaire 0 ou 1
arrivant sur le serveur provenant d’un message électronique
d’une autre provenant d’une page Web ?
2- Internet et le Modèle Client Serveur
2-3 Communication Client-Serveur (2/3)

18. Notion de port :
Les ports permettent au serveur de différencier une trame
(suite binaire, paquet) issue d’un message électronique d’une
trame issue d’un navigateur Web.
Ils sont des valeurs qui correspondent à des numéros
d’identifications fixes sur le serveur attribués par
convention et qui sont connus du client.
Le client sait envoyer la requête sur le port concerné par
l’information transmise.
Par convention le port 80 a été attribué par défaut à la réception des trames
de type Web.
http://www.unsite.net:8080 : demande d’accès au serveur via le port 8080..
2- Internet et le Modèle Client Serveur
2-3 Communication Client-Serveur (3/3)

19. Il existe un grand nombre de protocoles :
Protocoles de messagerie,
Protocoles de transfert de fichier,
Protocoles HTTP (HyperText Transfer Protocol).
Le protocole HTTP décrit les mécanismes d’organisation et
de transmission des données numériques lors d’un échange
entre un client (le navigateur) et le serveur Web.
2- Internet et le Modèle Client Serveur
2-4 Le protocole HTTP (1/3)

20. 2- Internet et le Modèle Client Serveur
2-4 Le protocole HTTP (2/3)
Client Serveur
Réception et
interprétation
des données par
le navigateur
Recherche des
éléments à
afficher
4
Réponse HTTP :
-État de la réponse OK
-Données au format HTML
5
Connexion fermée
Connexion établie sur le port 80
2
3
Envoi d’une requête ( GET/POST)
1

21. 2- Internet et le Modèle Client Serveur
2-5 La notion de session
Lorsque le serveur a traité une requête et envoyé sa réponse
au client, la connexion entre le serveur et le client est clôturée.
Le serveur perd la trace du client ce qui a des conséquences
importantes sur le développement des sites commerciaux :
Lorsque l’internaute achète sur Internet, il sélectionne
chaque objet qu’il souhaite acheter l’un après l’autre. A
chaque objet sélectionné correspond une requête distincte
de la précédente.
Pour que le serveur puisse se souvenir du client et regrouper
toutes les requêtes d’achat il faut mettre au point un suivie de
session qui permet d’enregistrer toutes les requêtes d’un même
client sous un numéro d’identification.

22. 2- Internet et le Modèle Client Serveur
2-6 Les méthodes GET() et POST()
Elles déterminent la façon dont est envoyée la requête au
serveur :
GET( ) : requête avec des valeurs (paramètres).
Lorsque les paramètres sont visibles dans l’URL, cela signifie que la
méthode utilise pour envoyer la requête est la méthode GET.
L’URL http://www.unsite.net/rechercher?nom=T.&prenom=Nicolas.
Inconvénients :
Rendre visible des données sensibles telles qu’un mot de passe ou un code de carte
bancaire.
La longueur de la chaîne transférée est limitée.
POST( ) : envoie les paramètres dans le corps de la requête et
non via l’URL.
Aucune valeur n’apparaît dans l’URL.

23. La mise en place d’un serveur Web en amont du serveur de BD
est une des meilleurs réponses au besoin de présentation du
contenu d’une BD en fonction du profil utilisateur.
Les données sont présentées en fonction de critères
propres à l’entreprise (données pour les employés, pour les
partenaires extérieurs, pour les clients, etc.).
Un serveur Web, est un outils de présentation (HTML)
d’informations envoyées par un serveur d’applications
chargé de la recherche des données sur un serveur de
BD.
Un tel mode de communication est appelé:
3 - Relier un serveur Web avec une BD
architecture 3-
tiers

24. Couche
présentation
Couche
stockage
des
données
Couche Traitement
3 - Relier un serveur Web avec une BD
Internaute
Partenaire
Administrateur
Serveur
Web
Serveur
App
Serveur
BD
INTERNET
3.1 - Architecture 3-Tiers (1/4)

25. 3 - Relier un serveur Web avec une BD
3.1 - Architecture 3-Tiers (1/4)

26. 3- Relier un serveur Web avec une BD
3.1 - Architecture 3-Tiers (3/4)
La couche de traitement donne l’ordre au serveur Web
pour afficher les différentes présentations :
Elle traite une requête en examinant par exemple quel
internaute demande l’affichage, un client, un administrateur
ou un partenaire (y a-t-il eu authentification par exemple).
Pour identifier un internaute, le serveur d’applications se
connecte à la base de données afin de vérifier si
l’internaute est bien enregistré.
Une fois l’internaute identifié, le serveur d’applications
construit la réponse en consultant de nouveau la base de
données pour envoyer les informations demandées par
l’internaute sous la forme d’une page HTML via le serveur
Web.

27. 3 - Relier un serveur Web avec une BD
3.1 - Architecture 3-Tiers (2/4)
La couche de présentation permet de construire à la
volée des pages de présentations différentes :
On peut imaginer par exemples :
Une première présentation accessible depuis l’extérieure
dédiée aux internautes qui propose l’ensemble des articles
disponibles à la vente dans une entreprise.
Une deuxième présentation intranet dédiée à
l’administrateur qui nécessite la saisie de mot de passe
permettant d’ajouter, de modifier ou de supprimer un
article.
Une troisième présentation accessible depuis l’extérieure après
authentification dédiée aux partenaires permettant de connaître
à tout moment l’état du stock ainsi de proposer des nouveaux
produits.

28. 3 - Relier un serveur Web avec une BD
3.1 - Architecture 3-Tiers (4/4)
La couche de stockage des données garantit :
des données centralisées,
la cohérence des données,
l’accès fiabilisé aux bases de données,
pas de problèmes de redondance de données ni de
contradiction.
l’accès continu aux bases de données,
Possibilité de supprimer ou de rajouter des clients sans
perturber le fonctionnement du réseau et sans
modifications majeures

29. 3 - Relier un serveur Web avec une BD
3.2 – Les serveurs d’applications (1/2)
Le serveur d’application génére la partie dynamique des
applications à l’aide de modèle de composante Web
(Servlet, JSP) et de composante métier (JavaBean) :
Servlet : Une classe Java qui permet la gestion des flux HTTP en
entrée/sortie.
JSP : Une page HTML contenant des morceaux de code Java
et/ou des balises JSP spécifiques permettant d’effectuer des
traitements et d’intégrer des données dynamiquement dans des
pages HTML.
JavaBean : Un composant (une logique métier) sous forme d’une classe
java contenant des propriétés (données) et des méthodes (validation
des champs d’un formulaire, calculs, connexion…) nécessaire pour la
création des applications distribuées.

30. 3 - Relier un serveur Web avec une BD
Il existe au moins autant de serveurs d’applications qu’il
existe de langages de programmation :
Des serveurs propriétaires et coûtent très chers :
IIS : Internet Information Server de MicroSoft,
Apache HTTP capable de comprendre le PHP,
Websphere de IBM,
BEA de Weblogic,
Serveurs Open-Source, robuste et gratuit fonctionnant en mode
« Stand alone »
Tomcat développé par la Fondation Apache,
3.2 – Les serveurs d’applications (2/2)

31. Une application Web est composée :
De composants serveurs dynamiques : Servlets, JSPs,
Des librairies de classes Java utilitaires,
D’éléments Web statiques : pages HTML, images, sons,
D’un descripteur de déploiement et de configuration de
l’application web sous la forme d’un fichier au format XML
(web.xml).
Une application Web correspond alors à une
arborescence de fichiers sur le disque dur du votre
ordinateur.
Cette arborescence possède une structure établie par les
développeurs du serveur Tomcat.
4- Qu’est ce qu’une Webapp ?

32. Le développement serveur en java consiste à écrire des
composants Web (Servlet, JSP) et des composant métier
(JavaBean).
SUN a proposé une architecture MVC dans laquelle
chaque composant a un rôle bien délimité, ce qui permet
de séparer la partie logique (métier) de la partie
présentation dans l’application.
le Web Développer et le Web Designer peuvent travailler
séparément, chacun sur ces fichiers ou composant, au sein
d’un projet.
5- Développement serveur en Java et
architecture MVC (1/2)

33. Servlet
(Contrôleur)
JavaBean
(Modèle)
Jsp
(Vue)
BD
Requête
HTTP
Réponse
HTTP
1
2
3
4
5
6
1. Le client envoie une requête HTTP à
destination d’une Servlet
2. La Servlet récupère les données
transmises dans la requête HTTP et
délègue les traitements avec/sur ces
données à des composante JavaBean.
3. Selon les traitements demandés, les
composants JavaBean peuvent accéder à
une BD.
4. La Servlet transmet la suite du
traitement de la requête vers un JSP.
5. La JSP récupère les données stockées
par la Servlet et génère la réponse HTTP.
6. La réponse HTTP est renvoyée au
client.
MVC
Partie
métier
Partie
présentation
5- Développement serveur en Java et
architecture MVC (2/2)

34. La brique de base de la plate-forme Java EE est la servlet.
Tout passe par elle, et même nos pages JSP sont
transformées en servlets derrière les rideaux.
Un framework MVC n'est rien d'autre qu'une surcouche à
cette technologie de base.
En masquant ces rouages les plus basiques, une telle
solution facilite le découpage et la gestion du code d'une
application.
Voilà pourquoi on qualifie souvent les frameworks MVC
de frameworks d'inversion de contrôle, IoC.
6-Architecture MVC → Framework MVC

35. Essentiellement deux grandes catégories :
Framework MVC basé sur les requêtes
Framework MVC basé sur les composants
7- Principales catégories
de Framework MVC (1/5)

36. Framework MVC basé sur les requêtes (sur les
actions)
Il s'agit d'un framework web qui prend en entrée une
requête issue d'un client, qui détermine ce que le serveur
doit en faire et qui renvoie enfin au client une réponse en
conséquence. Ainsi, le développeur doit penser en termes
d'actions, et associe naturellement ce que demande
l'utilisateur (sa requête) à ce que l'utilisateur reçoit (la
réponse).
Ex: Le développeur écrit des classes qui représentent des
actions effectuées par l'utilisateur, comme par exemple
"Passer une commande" ou "Voir les détails du client". Ces
classes sont chargées de récupérer les données transmises
via la requête HTTP, et de travailler dessus.
7- Principales catégories
de Framework MVC (2/5)

37. Example de Framework MVC basé sur les requêtes
Spring, solution très répandue dont le spectre s'étend de la
simple gestion des requêtes à l'ensemble du cycle de vie de
l'application, bien souvent couplée à Hibernate pour la
persistance des données ;
Struts, solution éditée par Apache dont la gloire appartient
au passé. Le framework a changé du tout au tout avec la
sortie d'une seconde mouture qui se nomme Struts 2, mais
qui à part son titre n'a rien de similaire à Struts, premier
du nom. Par ailleurs, la communauté maintenant le projet
semble moins active que les concurrentes ;
Stripes, un challenger intéressant et montant, très léger et
réputé pour être facile à prendre en main.
7- Principales catégories
de Framework MVC (3/5)

38. Framework MVC basé sur les composants
À l'origine, de telles solutions ont été développées pour
faciliter aux développeurs Java, peu familiers avec le
développement web et plus proches du développement
d'applications de bureau traditionnelles, la création
d'applications web, sans devoir connaître les rouages de
l'API Servlet.
De telles solutions ont pour objectif secondaire de rendre
la maîtrise des technologies de présentation web
habituellement requises superflues, notamment HTML, CSS
et JS.
7- Principales catégories
de Framework MVC (4/5)

39. Example de Framework MVC basé sur les
composants
JSF, ou "Java Server Faces" : il s'agit de la solution
standard intégrée à Java EE 6;
Wicket : solution éditée par Apache, elle est très en vogue
grâce à sa relative simplicité. La communauté en charge de
sa maintenance est très active ;
Tapestry : solution éditée par Apache, ayant connu une
évolution assez chaotique. A priori la dernière version est
construite pour être évolutive.
7- Principales catégories
de Framework MVC (5/5)

40. Frameworks web
Les avantages
Un Framework pourquoi faire ?
◼ Gain du temps de développement : un Framework
garantie la rapidité de développement du projet. Il sera
inutile de re-développer tout un tas de fonctions, servez-
vous tout est là ! (ou presque )
◼ Gain de qualité : un Framework offre un cadre de travail
déjà testé et bien expérimenté = une architecture de
bonne qualité sans risque pour la conception. Il évite de
les erreurs de conception (couplage faible et cohésion
O
fu
ot
i
l
rs
td
ee).
développement web 40 40

41. Frameworks web
Les avantages
un Framework facilite et simplifie le travail en
groupe, par exemple les designers s'occupent
des vues et les développeurs s'occupent de la
partie métier, le tout en même temps et sur des
fichiers différents.
un Framework permet l’intégration de
nombreuses fonctionnalités prêtes à l’emploi
et dont les implémentations sont bien rodées
Le coté open sources des solutions 41

42. Frameworks web
Les inconvénients
Maitriser un Framework prend du temps, cela
peut-être quelques heures pour réaliser un
travail simple à plusieurs semaines pour
l'utilisation avancé d'un Framework complexe
ou pour une bonne configuration.
Il faut comprendre son fonctionnement interne,
connaître les bonnes pratiques, savoir comment
débuger, lire la documentation etc ...
42

43. Frameworks web
Les inconvénients
Utiliser un Framework oblige d’optimiser sa réutilisation : c'est
comme acheter le dernier smartphone avec toutes les applications
alors que l'on souhaite juste utiliser la fonction "téléphoner".
→ Il faut poser le problème autrement : Est-ce que l'utilisation de ce
Framework va nous faire gagner du temps ?
◼ Si le projet est simple et rapide à réaliser sans Framework alors passez votre
chemin et créer le tout "from scratch".
◼ Si le projet est complexe et/ou long à réaliser sans Framework, alors
commencez à y réfléchir très sérieusement et à choisir le Framework qui
convient.
43