technologie web

Technologie Web

Le 5 Novembre 2010

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

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

Plan


2. Le web, c'est quoi alors ?






8. Le modèle MVC


Internet c'est quoi ?

Vos réponses ?


Ne pas confondre Internet et Web

Le web n'est qu'une des applications d'Internet


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

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

Pour la petite histoire


Internet c'est du client / Serveur

Client

• Client : est une application qui envoie des demandes à une application distante (serveur).

• thunderbird

• fileZila

• Firefox

• Gtalk

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

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

Client léger

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

Client de rhabillage

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

Client lourd

Client / Serveur

Beaucoup d'autres architectures ...

Client / Serveur


« 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

La pile réseau

1. Physique2. 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 transmises7. Application (HTTP) : est le point d'entrée aux

services réseaux.

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

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 livraisonNuméro de séquenceContrôle des données

Aucune garantie de livraisonAucune garantie de séquenceContrô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éeTransport rapide et consomme peu de ressources.

Communication client / serveur

Communication client / serveur

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) !

Plan








8. Le modèle MVC


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

La base du web

• Architecture Client (léger) / Serveur

• Basé sur le protocole Http

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

URL

• Format :

• <protocole>://<serveur>:<port>/<chemin>/<ressource>

• Attention : les caractères spéciaux doivent être encodés !

• # = %23 | = %20 | / = %2F

• Exemple :

• http://www.ima.uco.fr

• ftp://ftp.uco.fr

• mailto://[email protected]

http://www.ima.uco.fr/

ftp://ftp.uco.fr/

mailto://[email protected]

Les ressources web

• Ressources Statiques

• HTML

• Images

• Son

• Vidéo

• Ressources dynamiques

• Coté client : applet, javascript, ActiveX,

• Coté serveur : CGI, J2EE, PHP, .Net, ...

Le web c'est quoi ?

Et le web 2.0, c'est quoi ?

Plan








8. Le modèle MVC


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

http://www.w3.org/

http://www.google.fr/

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

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=UUrmM8ba6F1ynQNc; expires=Wed, 31-Oct-2012 17:25:58 GMT; path=/; domain=.google.fr <- Création d'un cookie

Le protocole HTTP

Request line : METHODE URI Version HTTP

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

Les codes de retrour

• 5 Classes de retour (Status-Code)

• 1XX : Information

• 2XX : Succès

• 3XX : Redirection

• 4XX : Erreur client

• 5XX : Erreur serveur

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

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

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

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

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

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

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

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

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

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

Education

technologie web