Ce document présente une introduction à la technologie web, en expliquant la distinction entre Internet et le web, les protocoles de communication comme HTTP et les langages de base tels que HTML, CSS et JavaScript. Il couvre également les serveurs web, en particulier Apache et Tomcat, et aborde l'architecture des applications web ainsi que les concepts essentiels comme le modèle MVC. Enfin, le document détaille les différentes ressources web et les méthodes HTTP, tout en discutant du développement et de la sécurité des applications web.

1. Technologie Web
Le 5 Novembre 2010

2. Présentation
Benoît Simard
• Sorti de l'IMA en 2007 (IMA 9)
• Smile (SSII / SSLL)
• 3 ans
• Spécialisé dans :
• Le web
• Le logiciel libre
• Chef de projet technique

3. Plan
1. Internet c'est quoi ?
2. Et le web ?
3. Le protocole HTTP
4. HTML, CSS & Javascript
5. Le serveur Apache
6. Le serveur Tomcat
7. Les applications web en Java
8. Le modèle MVC
9. Exemple de framework

4. Plan
 1. Internet c'est quoi ?
2. Le web, c'est quoi alors ?
3. Le protocole HTTP
4. HTML, CSS & Javascript
5. Le serveur Apache
6. Le serveur Tomcat
7. Les applications web en Java
8. Le modèle MVC
9. Exemple de framework

5. Internet c'est quoi ?
Vos réponses ?

6. Internet c'est quoi ?
Ne pas confondre Internet et Web
Le web n'est qu'une des applications
d'Internet

7. Internet c'est quoi ?
Voici d'autres applications d'Internet :
• Les mails (IMAP / SMTP / POP)
• La messagerie Instantanée (XMPP)
• Transfert de fichier (FTP)
• Serveur de fichier (SAMBA/CIFS)
• VOIP

8. Pour la petite histoire
• Le terme internet existe depuis 1983
• Internet découle d'ARPANET (1969) :
• Reliait des ordinateurs d'université
• Sponsorisé par la DARPA (Defense Advanced
Reseach Projects Agency)
• Mythe : permettre au réseaux militaires de
continuer à fonctionner malgré une attaque
massive.
• 1969 : 4 ; 1971 : 15 ; 1972 : 37

9. Pour la petite histoire

10. Internet c'est quoi ?
Internet c'est du client / Serveur

11. Client
• Client : est une application qui envoie des
demandes à une application distante (serveur).
• thunderbird
• fileZila
• Firefox
• Gtalk

12. Serveur
• Serveur : est une application dont le rôle est de
répondre de manière automatique à des
demandes clients
• Postfix / imapd
• proFTPD
• Apache
• Jabber

13. Client léger
• Client
• Ne traite que la couche de présentation
• Ne fait aucun traitement (ou peu)
• Pas de logiciel spécifique
• Serveur
• Serveur puissant ! Il fait tout et pour tout le
monde
• Pour un upgrade de version, il n'y a que le
serveur à mettre à jour

14. Client léger

15. Client de rhabillage
• Client
• Ne traite que la couche de présentation
• Ne fait aucun traitement (ou peu)
• Pas de logiciel spécifique
• Serveur
• Serveur puissant ! Il fait tout et pour tout le monde
• Pour un upgrade de version, il n'y a que le serveur à
mettre à jour
• Possède aussi une IHM

16. Client de rhabillage

17. Client lourd
• Client
• Fait tout le traitement
• Logiciel spécifique
• Pour les upgrades de version, on doit mettre à jour
tous les clients installés !
• Serveur
• Serveur accède aux données
• Traite l'accès aux données
• Doit gérer les transactions

18. Client lourd

19. Client / Serveur
Beaucoup d'autres
architectures ...

20. Client / Serveur

21. Internet c'est quoi ?
« Internet est un réseau
informatique qui utilise le protocole
de communication (i.e. réseau) IP
(Internet Protocol) »
Internet est basé sur le TCP/IP

22. La pile réseau
1. Physique
2. Liaison
3. Réseau (IP) : construit une voie de communication
entres les machines (ce sont les routes)
4. Transport (TCP & UDP) : gère la transmission des
données.
5. Session : gère les transactions (absent dans le
monde IP, sauf SIP)
6. Présentation : converti les données applicatives en
données transmises
7. Application (HTTP) : est le point d'entrée aux
services réseaux.

23. Le protocole réseau IP
• permettant un service d'adressage unique pour
l'ensemble des terminaux connectés
• Ne se préoccupe pas du contenu des paquets
• Ipv4
• 127.0.0.1 (32bits)
• ~ 4 milliards d'adresses (4.10^9)
• Moins de 5% d'adresse Ipv4 depuis ce mois-ci
• Ipv6
• 2001:0db8:0000:85a3:0000:0000:ac1f:8001 (128bits)
• 4.10^38

24. Les protocoles de transport
TCP & UDP
TCP UDP
Mode connecté ?
Nécessite d'établir une
connexion avant
d'envoyer des paquets
Non
Protocole fiable ?
Garantie de livraison
Numéro de séquence
Contrôle des données
Aucune garantie de livraison
Aucune garantie de séquence
Contrôle des données
Résumé
Protocole très fiable. On
est sur de la
transmission des
données.
Transport lent et
consommateur de
ressources
Protocole non fiable, on est
pas sur de la transmission des
données, ni de leur ordre
d'arrivée
Transport rapide et consomme
peu de ressources.

25. Communication
client / serveur

26. Communication
client / serveur

27. Domain Name System
« service permettant d'établir une
correspondance entre une adresse
IP et son nom de domaine »
Les informations de DNS sont
redondantes sur Internet (beaucoup
de cache) !

28. Plan

1. Internet c'est quoi ?
2. Le web, c'est quoi alors ?
3. Le protocole HTTP
4. HTML, CSS & Javascript
5. Le serveur Apache
6. Le serveur Tomcat
7. Les applications web en Java
8. Le modèle MVC
9. Exemple de framework

29. Le web, c'est quoi ?
• C'est un système hypertexte qui permet de
consulter avec un navigateur des pages d'un
site
• le web quoi !
• Un système hypertexte contient des noeuds
liés entre eux par des hyperliens

30. La base du web
• Architecture Client (léger) / Serveur
• Basé sur le protocole Http

31. URL, URN & URI
• URL : Uniform Ressource Locator
• Spécification de la localisation d’une ressource de manière
unique
• URN : Uniform Ressource Name
• Mécanisme de nommage des ressources
• urn:<Namespace>:<SpecificString>
• Namespace : identificateur de nommage (ex : isbn)
• SpecificString : chaîne de caractères spécifique désignant la
ressource de manière unique
• URI : Uniform Resource Identifier
• URI = URL + URN
• En pratique, la forme d’URI la plus utilisée est l’URL

32. URL
• Format :
• <protocole>://<serveur>:<port>/<chemin>/<ressour
ce>
• Attention : les caractères spéciaux doivent être
encodés !
• # = %23 | = %20 | / = %2F
• Exemple :
• http://www.ima.uco.fr
• ftp://ftp.uco.fr
• mailto://contact@bsimard.com

33. Les ressources web
• Ressources Statiques
• HTML
• Images
• Son
• Vidéo
• Ressources dynamiques
• Coté client : applet, javascript, ActiveX,
• Coté serveur : CGI, J2EE, PHP, .Net, ...

34. Le web c'est quoi ?
Et le web 2.0, c'est quoi ?

35. Plan

1. Internet c'est quoi ?
2. Le web, c'est quoi alors ?
3. Le protocole HTTP
4. HTML, CSS & Javascript
5. Le serveur Apache
6. Le serveur Tomcat
7. Les applications web en Java
8. Le modèle MVC
9. Exemple de framework

36. Le protocole HTTP
• Http://www.w3.org
• Hyper transfer protocole
• Stateless
• Protocole orienté caractères :
• Les requêtes et réponses ne sont que des
caractères
• Exemple avec un telnet / netcat
• GET www.google.fr HTTP/1.1

37. Le protocole HTTP
• Stateless
• Le résultat d'une requête ne dépend pas de
l'état du serveur
• Si on exécute plusieurs fois une même
requête, on obtient la même réponse

38. Le protocole HTTP
Request : GET www.google.fr/ HTTP/1.1
Response :
HTTP/1.1 200 OK ← Version du protocole et code de retour
Date: Mon, 01 Nov 2010 17:25:58 GMT ← la date de la réponse
Expires: -1 ← la date d'expiration de la ressource
Cache-Control: private, max-age=0 ← politique de cache
Content-Type: text/html; charset=ISO-8859-1 ← le type et l'encodage de la
réponse
Set-Cookie:
PREF=ID=e02fe0bed019bbc4:FF=0:TM=1288632358:LM=1288632358:S=UUr
mM8ba6F1ynQNc; expires=Wed, 31-Oct-2012 17:25:58 GMT; path=/;
domain=.google.fr <- Création d'un cookie

39. Le protocole HTTP
Request line : METHODE URI Version HTTP

40. Les méthodes
• OPTIONS : demande les méthodes utilisables sur l'URI
• HEAD : demande uniquement les information de l'URI
• TRACE : Fait un echo de la requête envoyé
• GET : Demande d'info sur l'URI
• POST : Demande de données à traiter par l'URI
• PUT : Demande d'enregistrement de données à l'URI
• DELETE : Demande de suppression les données pointées
par l'URI

41. Les codes de retrour
• 5 Classes de retour (Status-Code)
• 1XX : Information
• 2XX : Succès
• 3XX : Redirection
• 4XX : Erreur client
• 5XX : Erreur serveur

42. Les éléments de la requête / de
la réponse
• Cache-Control : définit la politique de cache pour la ressource
• Connection : paramètre de gestion de la connexion (ex :
Connection: close)
• Date : date du message
• Pragma : utilisé pour spécifier des comportements aux serveurs
intermédiaires (proxy)
• Transfer-Encoding : types de transformations appliquées au corps
du message
• Upgrade : spécifie quels autres protocoles supporte le client
• Via : indique les intermédiaires par lesquels est passée la requête

43. Les éléments de la requête / de
la réponse
• Allow : liste les méthodes autorisées
• Content-Encoding : indique l’encodage utilisé pour la
ressource (complément au type de média du Content-Type)
• Content-Language : défini la langue utilisée
• Content-length : taille du corps du message
• Content-Location : donne la véritable URI de la ressource si
celle-ci a été trouvée grâce à une autre URI
• Content-Type : le type du média (ex : text/html ; charset=ISO-
8859-1)
• Expires : date d’expiration de la ressource
• Last-Modified : date de dernière modification

44. Les éléments de la requête
●
Accept : définit les types de médias acceptés
●
Accept-Charset : spécifie les jeux de caractères
acceptés
●
Accept-Encoding : spécifie les types de transformations
(compressions) du message acceptés
●
Accept-Language : spécifie les langues acceptées
●
Host : spécifie le serveur (et le port) pour la requête
●
Referer : spécifie l’URI à l’origine de la requête
●
User-Agent : contient l’identifiant du navigateur client

45. Les codes de retour
• 200 : OK
• 301 : Moved permanently
• 302 : Moved temporarily
• 400 : Bad Request
• 401 : Unauthorized
• 403 : Forbidden
• 404 : Not Found
• 500 : Internal Server Error
• 502 : Bad Gateway
• 504 : Gateway Time-out
• 503 : Service Unvailable

46. Les éléments de la réponse
• Etag : identifiant d'une ressource dans la cache
(un pour chaque version de la ressource)
• Location: redirige la requête vers une autre URI
(ex : Status-Code : 3XX)
• Server: indique le type du serveur web
répondant à la requête

47. Le protocole HTTP
Le client exprime ses capacités
Le serveur retourne la ressource la
plus adéquate
• Langue : fr, en
• Content Type (ou Type MIME) : text/css
• Charset : utf8, ISO-8859
• Encodage : gzip

48. Le protocole HTTP 1.1
• Ne gère pas les sessions !
• => On utilise les cookies
• Fichiers textes stockés sur le disque dur du
client
• Informations stockées en clair
• Date d'expiration fixé par le serveur

49. Le protocole HTTP 1.1
• N'est pas sécurisé !
• => protocole HTTPS
• Vérification de l'identité d'un site par un
certificat
• Les données sont scriptées

50. L'architecture REST
• C'est une manière de construire une
application web
• Ce n'est pas un protocole ou un
format
• C'est un style d'architecture
d'application
• Respecte le protocole HTPP

51. L'architecture REST
• L'URI est importante
• 1 URI = 1 ressource / action
• Stateless
• Chaque opération est auto-suffisante
• Respecte le protocole HTTP
• Respecte les méthodes
• GET = SELECT
• PUT = UPDATE
• POST = INSERT
• DELETE = DELETE