Technologies Web

Fabrice.Huet@sophia.inria.fr

Licence Miage 2005-2006

Objectifs du cours• Donner une vue d’ensemble du web et de ses technologies

• Aborder l’architecture d’un point de vue logique

• Différencier les technologies client et serveur

• Présenter un large spectre de technologies

• Parler brièvement des web services

Plan• Bref présentation d’Internet et du www

– Histoire d’Internet– Le W3C

• Architecture et logiciels pour le web– Clients web– Serveurs web– Proxy Cache– CDN– HTTP

• Technologies côté clients– HTML– CSS– JavaScript– Applets

• Technologies côté serveur– Cookies– CGI– PHP– ASP/ASP.NET– Servlets et JSP

• Moteurs de recherche et Web Services

Brève présentation d’Internet et du www

Histoire d’Internet• 1962: étude pour la création d’un réseau pour commander

l’infrastructure nucléaire américaine capable de résister a une attaque nucléaire Choix d’un réseau par commutation de paquets

• 1969: construction du premier réseau physique (4 machines, 50 kbps)

• 1972: envoie du premier email (23 machines, 50kpbs)• 1973: création de TCP/IP• 1974: première utilisation du terme Internet• 1979: création d’Usenet• 1982: TCP/IP devient le standard d’Internet• 1983: Création du Domain Name System

Histoire d’Internet - 2• 1986: création de l’IETF• 1990: création d’un système hypertext par Tim Berners-Lee• 1992: le CERN présente le World Wide Web• 1993: création de Mosaic, premier client pour le web• 1994: création du w3c• 1995: IE 1.0 • 1997: IE 4.0 sort, Netscape a 72%, IE 18%• 1998: Netscape jette l’éponge et se fait racheter par AOL• 1998: Netscape rend le code source de son navigateur

disponible sous licence open source• 2002: Mozilla 1.0• 2004: début de la deuxième guerre des browsers

W3C• World Wide Web Consortium• Crée en 1994 • 3 buts

– Accès universel au web à travers des technologies tenant compte des différentes cultures, langues, handicapes…

– Web sémantique– Web of trust: guider le développement du web en tenant compte des

aspects légaux, commerciaux et sociaux liés aux nouvelles technologies.

• Rôle du w3c– Interopérabilité: les spécifications des protocoles et langages du web

doivent pouvoir fonctionner ensembles.– Évolution: s’assurer que de nouvelles technologies peuvent être

ajoutées au web.– Standardisation: donner des Recommandations décrivant les

technologies du web.

W3C - Organisation• Le w3c est accueilli par 3 organisations:

– MIT (USA)– KEIO (Japon)– ERCIM (France)

• 3 principes– Neutralité: appel aux commentaires publics– Coordination: travaux avec d’autres organismes (IETF, Unicode

Consortium…)– Consensus: si possible, décision à l’unanimité sinon à la majorité.

• Membres du w3c:– Financent le w3c– Participent au choix des technologies futures– Who’s who de l’informatique: Microsoft, Cisco, Oracle, Apple…– Des membres institutionnels (universités)

W3C – Domaines d’activité• Architecture

• XML, Web Services, Internationalization, URI (Uniform Resource Identifier), DOM

• Interaction– Compound Documents, Device independence, Graphics, HTML, CSS,

MathML, Synchronized Multimedia, Voice Browser, XForms

• Technologie et société – Semantic Web, Platform for Privacy Preference, XML signature, XML

encryption, XML key management, Patent Policy and Standards

• WAI: Web Accessibility Initiative– Politique et techniques pour l’accés à l’information des personnes

handicapées

Architecture et logiciels pour le web

Fonctionnement du web

Serveur Web

Client

Client

Client

ProxyCache

Nom de domaine• Il est plus facile de se rappeler d’un mot/phrase que d’une

série de chiffres…• Les noms de domaine sont des suites alphanumériques de

caractères séparées par des points• Chaque segment a une taille/valeur arbitraire (mais limitée)• Le segment le plus significatif (le plus à droite) est normalisé

– com, edu, gov, info, org, net, biz…

• La transformation du nom de domaine en adresse IP se fait en contactant un serveur de domaine (DNS)

• Les serveurs DNS sont organisés hiérarchiquement• Au sommet se trouvent les serveurs racine • Chaque organisation peut mettre en place son serveur

Nom de domaine - 2

Client

ServeursDNS

Serveur Web

http://www.google.com

IP?

XXX.XXX.X

XX.XXX

•Pour communiquer, un client doit connaître l’IP d’un serveur et un numéro de port

•Cette adresse s’obtient auprès d’un serveur DNS (lookup)

http get

Serveurs DNS

com

.

org gov biz fr

unice free inria

• Une requête DNS est envoyée au serveur du domaine dont dépend la machine

• Si le serveur n’a pas autorité il demande à son parent…• Les réponses parcourent le chemin inverse et sont mises en

cache

amazon

Les clients web

• Variété des plateformes– Windows, Unix, PDA…

• Variété des logiciels– IE, Firefox, Mozilla, Opera, Lynx…

• Caractéristiques– Gestion d’HTML/XHTML– Gestion de CSS– Gestion de JavaScript– Gestion de plugins

Répartition des clients web

• Source: http://www.w3schools.com/browsers/browsers_stats.asp

Décembre 2004

Octobre 2005

IE6 65.5% 68.9%

IE5 9.9% 5.6%

Mozilla et Firefox

17% 21.3%

Opéra 7/8 1.8% 1.3%

Netscape 1.6% 1.6%

Répartition des clients web - 2

• Statistiques servent a cibler ses utilisateurs

• Information globale, pas locale. Un site web attire un certain type d’utilisateur

• La détection n’est pas forcément exacte– Utilisation du User-Agent

• La répartition évolue en fonction du temps– Utiliser des technologies spécifiques à un navigateur est un pari sur l’avenir

• Ne pas utiliser ces infos pour discriminer mais pour ajouter du contenu

« Un homme s’est noyé en traversant une rivière profonde de 2 mètres en moyenne » W. I. E. Gates

Étapes pour la visualisation d’une page web

• L’utilisateur entre une URL• Le client web effectue une résolution DNS pour avoir l’adresse

du serveur• Il effectue la requête http et reçoit un document • Il analyse le document pour

– Préparer l’affichage– Trouver les liens vers les images

• Une requête est effectuée pour downloader les images• Cela peut se faire en parallèle ou séquentiellement

Serveurs Web• Programmes répondant aux requêtes des clients web

• Souvent appelé serveur http ou httpd

• Écoute sur le port 80 (convention) d’une machine

• 2 types de ressources– Statiques: ne nécessitent pas de traitement côté serveur– Dynamiques: chaque demande de page nécessite des opérations

spécifiques du serveur

• Nombreux logiciels disponibles:– Apache– Internet Information Service– Sun Java System Web Server

Parts de marcher des serveurs(74 572 794 sites)

• Apache: 70.98%• Microsoft IIS : 20.24%

• Sun : 2.52%• Zeus : 0.78%

Source: http://www.netcraft.com/

Le serveur Apache• Serveur HTTP/1.1

• Versions pour Windows, OS/2, Linux…

• Utilise du pré-fork

• Configuration du serveur en plaçant des directives dans un fichier texte. – httpd.conf (lu au démarrage)– .htaccess (accès au répertoire)

• Syntaxe: Directive Valeur

• Les directives s’appliquent à l’ensemble du serveur

• Leur portée peut-être limitée avec des sections– <Directory>, <DirectoryMatch>, <Files>, <FilesMatch>, <Location>,

<LocationMatch>, <VirtualHost>

Apache – Restriction d’accés• Directives Allow,Deny

– from all– from www.xxx.yyy.zzz– from unice.fr

• Peut spécifier un ordre pour les directives d’accés– order deny, allow : les deny sont évalués avant les allow– order allow, deny : les allow sont évalués avant les deny

• Exemple order deny,allow

deny from all

allow from .ncsa.uiuc.edu

Apache – Restriction d’accès par mot de passe

• Directives AllowOverride et AuthConfig doivent avoir été fixées

• Les directives d’accès doivent être placées dans le fichier .htaccess– AuthTypeAuthentication: type d’authentification (Basic)– AuthName: Nom de la zone d’authentification – AuthUserFile: localisation du fichier des passwords (générés avec httpasswd)– AuthGroupFile: localisation du fichier de groupes (optionnel)– Require: Contraintes à satisfaire pour autoriser l’accès.

• Exemple: AuthType Basic

AuthName "By Invitation Only"

AuthUserFile /usr/local/apache/passwd/passwords

Require user rbowen sungo

• http://httpd.apache.org/docs/howto/auth.html

Apache – Virtual Host

• Permet d’avoir plusieurs serveurs sur une même machine• Virtual Host basé sur IP

– Utilise l’IP de la connexion pour déterminer le bon serveur

• Virtual Host basé sur le nom– Utilise le nom de domaine fourni par le client pour déterminer le serveur

• Exemple NameVirtualHost * <VirtualHost *> ServerName www.domain.tld DocumentRoot /www/domain </VirtualHost> <VirtualHost *> ServerName www.otherdomain.tld DocumentRoot /www/otherdomain </VirtualHost>

• http://httpd.apache.org/docs/vhosts/name-based.html

Le proxy cache• Pourquoi demander plusieurs fois la même chose à un

serveur?

• Certains clients web ont un cache personnel à l’utilisateur. Le proxy travaille au niveau d’un domaine (ensemble de clients).

• Les clients demandent au proxy, le proxy demande au serveur– Améliore la réactivité– Diminue la charge d’un serveur– Diminue l’utilisation de la bande passante

• Rôle du proxy cache:– Maintenir un cache des objets récemment demandés– Recharger ceux qui ont expiré quand ils sont demandés– Possibilité de forcer le chargement d’une nouvelle copie si Pragma: no-

cache

Le proxy cache

• Fonctionnalités avancées– Interdire l’accès au web a certaines heures/personnes– Limiter l’accès à certains sites– Changer le contenu (supprimer les images, ajouter des informations…)

• Qu’est-ce qui est mis en cache?– Tout HTML– Certains résultats de scripts CGI (si Expires header présent)– Pas ce qui nécessite une authentification

Au final, cela dépend de la configuration, du logiciel et de http

CDN• Content Delivery Network

• Un (très) gros serveur peut supporter plusieurs centaines de milliers de connexions par secondes

• MAIS:– Rien pour la latence– Le réseau peut être un goulot d’étranglement (cf. 9/11)

• Solutions: – Diriger un client vers un serveur « proche » – Approcher physiquement le contenu du client

• Problèmes:– Diriger le client– Assurer la synchronisations des miroirs

Routage de contenu• Donner au client le contenu disponible à l’endroit le plus approprié• Plusieurs métriques

– Proximité au sens réseau– Proximité géographique– Temps de réponse– Type d’utilisateur (payant…)

• Routage global par redirection DNS– Sous un même nom sont regroupés plusieurs serveurs– Le serveur DNS retourne au client la « bonne » IP– Mais

• Risque de latence élevée pour le lookup• La requête DNS ne contient pas d’information sur le contenu demandé

• Routage par port TCP– La requête est redirigée par un serveur vers d’autres serveurs suivant le numéro de

port• Routage de niveau 7

– Analyse du contenu de la requête– Une requête peut générer plusieurs sous requêtes transparentes

• Web Cache Communication Protocol– Un routeur intercepte les demandes des clients et les envoient à des caches– Les caches indiquent aux routeurs (avec WCPP) quels protocoles ils servent

HTTP• HyperText Transfer Protocol (RFC 2616 pour http/1.1)

• Permet le transfert de fichiers localisés grâce à une Universal Resource Locator (URL)

• Utilise TCP et port 80 par défaut

• Protocole sans état

• Historiquement très simple

• Permet maintenant des dialogues complexes– Plusieurs requêtes avec unique connexion– Connexions "keepalive" de HTTP 1.1

Transaction HTTP

Client Serveur

2 – Envoie de la requête

1 – Ouverture de connexion

3 – Réponse du serveur (html)

4 – Fermeture de connexion

Requête HTTP• Une requête http est un ensemble de lignes envoyées au

serveur par un client

• Elle comprend:– Une ligne de requête comprenant 3 éléments

• Méthode à appliquer• L’URL• La version du protocole (par exemple HTTP/1.0)

– Les champs d’entête de la requête • Liste optionnelle de champ:valeur

– Le corps de la requête• Liste optionnelle commençant par une ligne vide• Permet l’envoie de données

Requête HTTP• Format général d’une requête HTTP

METHODE URL VERSION<crlf>

EN-TETE : Valeur<crlf>

…

EN-TETE : Valeur<crlf>

Ligne vide<crlf>

CORPS DE LA REQUETE

• Exemple

GET http://www.commentcamarche.net HTTP/1.0

Accept : text/html

If-Modified-Since : Saturday, 15-January-2000 14:37:11 GMT

User-Agent : Mozilla/4.0 (compatible; MSIE 5.0; Windows 95)

Requête HTTP• Commandes:

– GET: requête de la ressource située à l’URL– HEAD: requête de l’entête de la ressource– POST: envoie de données au programme spécifié par URL– PUT: envoie de données à l’URL– DELETE: supression de la ressource située à l’URL

• Entêtes– AcceptType: de contenu accepté par le browser (par exemple text/html). – Accept-Charset: Jeu de caractères attendu par le browser– Accept-Encoding: Codage de données accepté par le browser– Accept-Language: Langage attendu par le browser (anglais par défaut)– Authorization: Identification du browser auprès du serveur– Content-Encoding: Type de codage du corps de la requête– Content-Language: Type de langage du corps de la requête– Content-Length: Longueur du corps de la requête– Content-Type: Type de contenu du corps de la requête (par exemple text/html)– Date: Date de début de transfert des données– Forwarded: Utilisé par les machines intermédiaires entre le browser et le serveur– From: Permet de spécifier l'adresse e-mail du client– If-Modified-Since: le document doit être envoyé si il a été modifié depuis une certaine date– Link: relation entre deux URL– Orig-URL: URL d'origine de la requête– Referer: URL du lien à partir duquel la requête a été effectuée– User-Agent: Chaîne donnant des informations sur le client, comme le nom et la version du navigateur,

du système d'exploitation

Réponse HTTP• Une réponse http est un ensemble de lignes envoyées au

client par le serveur

• Elle comprend:– Une ligne de statut

• Version du protocole utilisé• Code de statut• La signification du code

– Les champs d’entête de la requête • Liste optionnelle de champ:valeur

– Le corps de la réponse• Liste optionnelle commençant par une ligne vide• Permet l’envoie de données

Réponses HTTP/1.1• 1xx: requête reçue, traitement en cours• 2xx: succés, la demande a été recue, comprise et acceptée

– 200: OK– 201: Created– 202: Accepted …

• 3xx: redirection, une action est nécessaire pour poursuivre le traitement– 300: Multiple Choices– 301: Moved permanently …

• 4xx: Erreur client, impossible a traiter ou mauvaise syntaxe– 403: Forbidden– 404: Not Found …

• 5xx: Erreur serveur– 500: Internal Server Error– 501: Not Implemented …

Réponse HTTP• Entêtes

– Content-Encoding: Type de codage du corps de la réponse– Content-Language: Type de langage du corps de la réponse– Content-Length: Longueur du corps de la réponse– Content-Type: Type de contenu du corps de la réponse (par exemple

text/html). – Date: Date de début de transfert des données– Expires: Date limite de consommation des données– Forwarded: Utilisé par les machines intermédiaires entre le browser et le

serveur– Location: Redirection vers une nouvelle URL associée au document– Server: Caractéristiques du serveur ayant envoyé la réponse

Types MIME• Multipurpose Internet Mail Extension

– Originellement pour le mail, maintenant utilisé par http

• Permet d’indiquer ce que des données (des paquets de 8 bits) représentent afin de faciliter leur utilisation

• 2 informations sont nécessaires– Content-Transfer-Encoding: type d’encodage utilisé – Content-Type: champs type/soustype

• Types MIME communs– image/jpeg – text/plain – video/mpeg

Architecture Client-Serveur pour le Web

Client Serveur

HTML XHTML

CSS

Applets Java

ActiveX Servlet Java

CGI

ASP

PHP

JSP

Serveur BD

JDBC/ ODBC

Technologies coté client

HTML • HyperText Markup Language• Langage utilisé pour les documents portables• Dérivé de SGML qui était plus complexe• Mélange structure et présentation• Utilise des balises

<balise> … </balise>• Actuellement disponible dans la version 4.0

– Amélioration de l’accessibilité– Meilleur séparation de la structure et de la présentation– Support des frames– Tables avancées

• Successeur: XHTML

• Exemple de document HTML

HTML

<!DOCTYPE HTML PUBLIC  " -//W3C/DTD HTML 4.01 Transitional//EN"  "http://www/w3.org/TR/html4/strict.dtd" >

<HTML>

<HEAD>

<TITLE> Document HTML </TITLE>

</HEAD>

<BODY>

<P> Test

</BODY>

</HTML>

• Un document HTML commence par un entête

<!DOCTYPE HTML PUBLIC  " -//W3C/DTD HTML 4.01 Transitional//EN" 

"http://www/w3.org/TR/html4/strict.dtd"  >

• Il indique quelle version d’HTML est utilisée (ici 4.01 transitional).

• Il est possible de préciser des sous-versions– HTML 4.01 strict– HTML 4.01 transitional– HTML 4.01 framset

• Le reste du document se trouve encadré par les balises <HTML> </HTML>

HTML

• Les balises <HEAD> </HEAD> permettent de mettre des informations qui ne sont pas du contenu– Titre (title)– Mots Clefs– Autres informations

• Les informations ne sont donc souvent pas affichées à l’écran

• Un document doit avoir un <TITLE> dans la section <HEAD>

• Des Meta-Data sont optionnelles <META name="Auteur" content="Fabrice Huet">

• Certaines Meta-Data servent aux moteurs de recherche <META name="keywords" lang="fr" content="Argent Rapide Viagra">

HTML (HEAD)

• Le corps du document se trouve entre <BODY> </BODY>

• Autrefois possible de spécifier des informations de rendu visuel– background (image de fond)– text (couleur du texte)– link (couleur d’un lien)– vlink (couleur d’un lien visité)– alink (couleur d’un lien sélectionné)

• Maintenant deprecated, utiliser des feuilles de style

HTML (BODY)

• Headings– Décrit brièvement le contenu ou le sujet d’une section– Dans un browser, change la taille de la police– 6 niveaux, de H1 (plus important) à H6 (moins important)– <H1> Elephant </H1> <H6> Souris </H6>

• Paragraphes– Permet d’indiquer un paragraphe– <P> sans balise fermente

• Retour à la ligne– <br>

HTML (BODY)

• Listes– Doivent contenir au moins un élement– 3 possibilités: libres, ordonnées, descriptives– On peut mélanger/imbriquer différentes listes

• Listes libres<UL> <LI> Première information <LI> Deuxième information</UL>

• Listes ordonnées<OL> <LI> Première information <LI> Deuxième information</OL>

• Listes descriptives<DL> <DT> Première <DD> information <DT> Deuxième <DD> information</DL>

HTML (BODY)

• Tables:– Permet de ranger des informations en lignes et colonnes– Peut avoir une CAPTION (son nom)– Peut avoir un SUMMARY– Possibilité de grouper des lignes ou des colonnes– Le nombre de lignes et colonnes est déduit du code HTML

• Lignes– Élément <TR> sans fermeture

• Cellule– Élément <TH> pour l’entête d’une cellule– Élément <TD> pour le contenu

HTML (BODY)

• Liens et ancres:– Permet de relier une ressources à une autre– Chaque lien a 2 ancres et une direction– Il part de l’ancre source et va à l’ancre destination

• Création de lien– Balise <A> … </A>– Attribut href pour indiquer une source– Attribut name pour indiquer une destination– Attribut title pour donner des informations (tooltip, son…)

<A href="http://www-sop.inria.fr/"> INRIA Sophia Antipolis</A>

<A name="ancre"> Voici une ancre accessible avec #</A><A href="….#ancre"> On va a l’ancre</A>

• On peut mettre href et name ensembles

• Les ancres doivent être uniques dans un document!

HTML (BODY)

• Objets, Images, Applets:– Avant, utilisation de <IMG> et <APPLET>

• Limités à l’existant (comment gérer les nouveaux média)• Applet était seulement pour les applets Java• Problème de l’accessibilité

– Tout est remplacé par <OBJECT> mais <IMG> est toujours valide

• Inclusion d’image par <IMG>– On indique la localisation de l’image– Une description courte alt– Une description longue longdesc (optionnel)<IMG src="toto.png" alt="la photo de toto">

• Inclusion d’image par <OBJECT><OBJECT data="toto.png" type="img/png"> la photo de toto</OBJECT>

• Pour les applets, plus tard…

HTML (BODY)

HTML (FRAME) • Frames

– Offre plusieurs vues de documents– Permet de maintenir des informations fixes et d’autres temporaires– On remplace <BODY> par <FRAMESET>– On spécifie le nombre de lignes (rows) et de colonnes (column) <FRAMESET rows="30%, 70%" cols="50%, 50%"> ….. </FRAMESET>

– Les frames peuvent être imbriquées– Elles peuvent être nommées pour devenir la cible de liens– Un contenu alternatif peut être donné avec <NOFRAMES>

• Problèmes:– Les frames définissent un rendu visuel, pas une structure– Les frames n’ont pas d’URI– La vue d’une page avec frames est déterminé par une séquence de

navigation et non plus une unique action

HTML (FORMS) • Les forms permettent d’ajouter de l’interactivité

• L’interaction se fait à travers des objets control:– buttons– checkboxes– radio buttons– menus– text input– file select– hidden controls– objects controls

• Utilisation d’une balise <FORM> … </FORM>

• 2 méthodes, POST et GET

<FORM action="http://somesite.com/prog/adduser" method="post">

<P>

First name:

<INPUT type="text" name="firstname"><BR>

Last name:

<INPUT type="text" name="lastname"><BR>

email: <INPUT type="text" name="email"><BR>

<INPUT type="radio" name="sex" value="Male"> Male<BR>

<INPUT type="radio" name="sex" value="Female"> Female<BR> <INPUT type="submit" value="Send"> <INPUT type="reset">

</P>

</FORM>

HTML (FORMS)

HTML (FORMS) • 2 méthodes, POST et GET

• La différence concerne la façon dont les données sont encodées

• GET est utilisé dans le cas de demandes pures (pas de modifications des données sur le serveur).

• POST est utilisé dans le cas de stockage/maj de données

• Côté client: avec GET les données sont encodées sous forme d’une URL. Avec POST elles sont encodées dans le corps de la méthode

• Côté serveur: un traitement différent est nécessaire suivant POST/GET

CSS• Cascading Style Sheets (http://www.w3.org/TR/CSS21/)

• Famille des styles– Décrit comment un document est présenté à l’écran

• Permet d’ajouter un style (font, couleur…) à une page web

• CSS1 et CSS2 dispo, CSS3 en préparation

• Une feuille de style se place dans la balise <HEAD>

<HEAD>

<style type= "text/css">

….

</style>

</HEAD>

<HEAD>

<link rel="stylesheet" type="text/css" href="{fichier.css}"></HEAD>

CSS• Une feuille de style est constituée de règles

• Chacune a 3 parties– Le selector qui indique quelle partie du texte est affecté par la règle– La property qui spécifie l’aspect du rendu qui est modifié– La valeur qui indique la valeur de la property

• Les règles sont appliquées de la plus spécifique à la moins spécifique

• Exemple: appliquer un style a l’élément body (i.e. tout le document)

<HEAD>

<style type= "text/css">

body {

color: purple;

background-color: #d8da3d

}

</style>

</HEAD>

CSS (Selector)• Les selector peuvent être des patterns extrêmement

complexes– * n’importe quel élément– > relation père fils– E:link E est ancre source d’un lien non visité– E:visited E est ancre source d’un lien visité – E[foo="warning"] E dont l’attribut foo est warning– E#myID E dont l’ID est myID

• Selector de type– Match le nom d’un type d’élément du langage (H1, BODY…)

• Selector avec descendants– Match B si il est contenu dans A <A> blah <B> blih </B> </A>

A B {color: blue}

H1 {color: blue}

CSS (Selector)• 4 façons de matcher les attributs

– [att] attribut att– [att=val] attribut ayant la valeur val– [att~=val] liste de mots contenant le mot val– [att|=val] liste de mots commençant par val

• ExemplesA[href="www-sop.inria.fr"] {color: red}

p[class~=couleur] {color: red}

<P class="couleur">

blah blah

</P>

• On peut simplifier ~= par .p.couleur {color: red}

Javascript• Langage de script pour pages HTML

• Crée par Netscape corp. en 1995

• RIEN A VOIR AVEC JAVA

• Orienté Objet

• Langage interprété au chargement de la page par le client

• Peut être placé n’importe où dans la page– <script type="text/javascript"> xxxxxxx </script> – <script src="xxx.js"></script>

Javascript – Types, variables, fonctions• 5 types de base

– Chaînes de caractères– Nombres– Booléens– Objets– Fonctions

• Déclaration de variable var maVariable = valeur maVariable = valeur

• Déclaration de fonction function maFonction(argument1,argument2,etc) { xxxxxxx }

• Appel de fonction maFonction(1,2…)

• Accés à un champs– Notation pointée: toto.titi

• Ces objets sont crées par javascript automatiquement si les éléments correspondants existent dans la page

• Certains existent toujours– navigator– window– document– location– history

Javascript – Hiérarchie d’objets

• navigator– Contient le nom et la version du navigateur, les plugins installés…

• window– Propriétés qui s’appliquent à la fenêtre tout entière

• document– Propriétés sur le contenu du document (titre, couleur…)

• location– URL actuelle

• history– URLs visitées

Javascript – Objets par défaut

<html><head></head><body> <script type="text/javascript"> var name = "Hege" document.write(name) document.write("<h1>"+name+"</h1>") </script></body> </html>

Javascript – Exemples

<html><head></head><body><script type="text/javascript"> var browserName=navigator.appName; if (browserName=="Netscape") { alert("Hi Netscape User!");

} </script></body></html>

Affichage de la valeur d’une variable

Détection du nom du navigateur

Applets Java• Crée par Sun Microsystems

• Un plugin permet de faire tourner une machine virtuelle (JVM) dans un navigateur

• Un client download le code java compile (.class, .jar) et l’exécute localement

• L’applet s’exécute dans une "Sand Box", elle a des capacités très limitées, elle ne peut pas– Lire/Ecrire/Effacer de fichiers localement– Créer des connexions réseau vers d’autres machines que celle dont elle

est originaire– Crée un ClassLoader– …..

• On peut s’affranchir de ces limitations en signant les applets

Applets Java – Cycle de vie• Une applet passe par différentes phase

• Chargement par le browser– Méthode init()

• Exécution – Méthode start()

• Fin d’exécution temporaire– Méthode stop()

• Fin d’exécution définitive– Méthode destroy()

• Il est possible de surcharger ces méthodes pour changer les comportements par défaut

Applet - Exempleimport java.applet.Applet; import java.awt.Graphics; public class Simple extends Applet { StringBuffer buffer; public void init() { buffer = new StringBuffer(); addItem("initializing... "); } public void start() { addItem("starting... "); } public void stop() { addItem("stopping... "); } public void destroy() { addItem("preparing for unloading..."); } void addItem(String newWord) { System.out.println(newWord); buffer.append(newWord); repaint(); } public void paint(Graphics g) { //Draw a Rectangle around the applet's display area. g.drawRect(0, 0, size().width - 1, size().height - 1); //Draw the current string inside the rectangle. g.drawString(buffer.toString(), 5, 15);

} }

Technologies côté serveur

Les Cookies

• Chaîne de caractère générée par le serveur et stockée par le navigateur

• Utilisés pour maintenir des informations de navigations• Voyagent dans les headers http• Structure:

– Nom– Valeur– Date d’expiration– Chemin de validité– Domaine de validité– Attribut de sécurité (si secure, alors SSL)

CGI• Common Gateway Interface

• Permet l’exécution de programmes externes par un serveur http

• Le CGI permet de faire communiquer le serveur et des programmes pour générer des pages web

• Un programme CGI peut être écrit dans un langage qui– Peut lire des flux en entrée– Sait traiter des chaînes de caractères– Écrire des flux en sortie– Peut être exécuté sur un serveur

• Les plus utilisés sont Perl, C, C++, Java…

CGI• On indique dans la configuration du serveur un répertoire où

se trouvent les scripts CGI

• Quand un fichier est demandé dans ces répertoires, il est exécuté et le résultat retourné

#!/bin/sh echo Content-type: text/html echo echo echo "<HTML>" echo "<HEAD>" echo "</HEAD>" echo "<BODY>" echo "<H2>Bonjour</H2>" echo "</BODY>" echo "</HTML>"

• Variables d’environnement prédéfinies

• QUERY_STRING: Données passées au script

• REMOTE_ADDR: Adresse Internet de la machine faisant la requête

CGI• Les informations entrées dans les formulaires (méthode GET)

sont automatiquement passées dans QUERY_STRING

• On peut passer manuellement des valeurs

<A HREF="/cgi-bin/script?nom=toto&action=find"> Link </A>

• QUERY_STRING contiendra nom=toto&action=find

• Si méthode POST, les données sont envoyées sur l’entrée standard du script

PHP• PHP: Hypertext Processor

• Langage de script avec syntaxe perl/C

• Crée en 1994, actuellement en version 4– PHP3: totalement interpreté– PHP4: utilise un moteur de script (ZEND) pour améliorer les performances

• PHP vient avec une énorme librairie de fonctions10.38 Fonctions mathématiques 10.39 Fonctions MCAL 10.40 Cryptage 10.41 Hash 10.42 Fonctions diverses 10.43 fonctions mSQL 10.44 Fonctions Microsoft SQL Server 10.45 Fonctions MySQL 10.46 Réseau 10.47 Fonctions NIS 10.48 Oracle 8 functions 10.49 Fonctions Oracle 10.50 Entrées/sorties 10.51 Ovrimos SQL 10.52 Expressions régulières compatibles Perl 10.53 Fonctions PDF 10.54 Verisign Payflow Pro functions 10.55 Fonctions PostgreSQL 10.56 Fonctions POSIX 10.57 Pspell

10.58 GNU Readline 10.59 Fonction GNU Recode 10.60 Expressions régulières 10.61 Satellite CORBA client extension 10.62 Sémaphores et gestion de la mémoire partagée 10.63 Gestion des sessions 10.64 Mémoire partagée 10.65 SNMP functions 10.66 Socket 10.67 Fonctions de chaîne de caractères 10.68 Fonctions Shockwave Flash 10.69 Sybase 10.70 ODBC 10.71 Fonctions URL 10.72 Fonctions sur les variables 10.73 WDDX functions 10.74 Analyseur syntaxique XML 10.75 XSLT 10.76 YAZ 10.77 Zlib (Compression)

10.19 Fonction d'exécution de programmes 10.20 Forms Data Format 10.21 Fonctions filePro 10.22 Système de fichiers 10.23 FTP 10.24 Fonctions de fonctions 10.25 Fonctions GNU Gettext 10.26 GMP 10.27 Fonctions HTTP 10.28 Fonctions Hyperwave 10.29 Fonctions InterBase 10.30 Fonctions ICAP 10.31 Fonctions Informix 10.32 Images 10.33 Fonctions IMAP 10.34 Options PHP & informations 10.35 Fonctions Ingres II 10.36 Fonctions LDAP 10.37 Fonction mail

10.1 Apache 10.2 Tableaux 10.3 Fonctions Aspell 10.4 Fonctions mathématiques sur des nombres de taille arbitraire 10.5 Fonctions de calendrier 10.6 Fonctions CCVS API 10.7 Fonctions Objets 10.8 Support COM pour Windows 10.9 Fonctions ClibPDF 10.10 CURL 10.11 Fonctions de paiement Cybercash 10.12 Fonctions de dates et heures 10.13 Fonctions dba 10.14 Fonctions dBase 10.15 Fonctions dbm 10.16 Accès aux dossiers 10.17 Fonctions DOM XML 10.18 Gestion des erreurs

PHP• Le code PHP se trouve dans le fichier HTML côté serveur

• Le serveur interprète le code PHP et envoie la page modifiée au client

• Le serveur détecte les fichiers PHP grâce a leur extension

• Intégration dans un fichier:– <? code php ?>– <?php code php ?>– <?PHP code php ?>– <SCRIPT LANGUAGE="php"> code php </SCRIPT>

• Les instructions sont séparées par ‘;’

PHP<html> <head>  <title>PHP Test</title> </head> <body>  <?php echo '<p>Hello World</p>'; ?></body></html>

<html> <head> <title>PHP Test</title> </head> <body> <p>Hello World</p> </body> </html>

Exécution par le serveur

PHP• On peut interfacer facilement PHP et les forms HTML

<form action="action.php" method="post"> <p> Your name: <input type="text" name="name" /> </p> <p> Your age: <input type="text" name="age" /> </p> <p> <input type="submit" /> </p> </form>

Hi <?php echo $_POST['name']; ?>.You are <?php echo $_POST['age']; ?> years old.

Hi Joe. You are 22 years old.

Client

Client

Serveur

ASP/ASP.net• Active Server Pages crée par Microsoft

• Pages HTML contenant du code de script exécuté par le serveur

• Scripts supportés par défaut: VBScript, JScript, Perl, et REXX

• ASP.net ajoute tous les langages .net (VB.net, C#, Scheme, Smalltalk…)

Servlets et JSP• Réponse de Sun a CGI

• Servlets vs CGI:– Efficacité: la machine virtuelle tourne en permanence, les requêtes sont traitées

par des threads, non des process– Ergonomie: Java– Portabilité: Java– Lourdeur: Java

• Java Server Pages: ASP version Sun, langage de script Java

• Pages identifiées par l’extension .jsp

• Pour développer: Java Servlet Development Kit (JSDK)

• Nécessite l’ajout d’un module au serveur:– Tomcat pour Apache– Allaire JRun pour IIS

• Les servlets sont placées dans un répertoire du serveur et sont accédées à travers une URL.

Servlets et JSP - Fonctionnement

• JSP a un fonctionnement en 4 étapes– Requête reçue par le serveur– La page demandée est traduite en servlets– Les servlets sont compilées– Puis exécutés puis le résultat transmis au client

• Processus lourd, surtout à la première demande

• Les servlets évitent la traduction et la compilation

JSP – Cycle de vie

• Possibilité de surcharger jspInit() et jspDestroy() pour modifier l’initialisation et la destruction

JSP• Inclusion dans un fichier HTML avec 4 tags

– <%@ ... %> : Directives donnant des indications au moteur JSP <%@ page import="java.util.*" %> – <%! ... %> : Déclaration Java <%! int i=0; %>

<%! public void jspInit() { //some initialization code } %>

– <%= ... %> : Expression Java <%= fooBean.getName() %>

– <% ... %> : Fragment de code JSP

<% for (int i=1; i<=4; i++) { %> <H<%=i%>> Hello </H<%=i%>> <% } %>

• Variables pré définies– out (javax.servlet.jsp.JspWriter) pour générer du HTML– request (javax.servlet.http.HttpServletRequest) pour la transaction

entre le client et le serveur

JSP - Exemples<HTML>

<BODY>

Salut! La date est <%= new java.util.Date() %>

</BODY>

</HTML>

<HTML>

<BODY>

< %

out.println(« On cherche la date »);

java.util.Date date = new java.util.Date();

%>

Salut! La date est <%= date %>

</BODY>

</HTML>

Servlets

• Se programme comme un classe Java classique• Implémente javax.servlet.http ou sous-classe

javax.servlet.http.HttpServlet

import java.io.*; import javax.servlet.*; import javax.servlet.http.*; public class HelloWorld extends HttpServlet { public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { PrintWriter out = response.getWriter(); out.println("Hello World"); } }

Servlets – Cycle de vie• Servlets permanents ou temporaires suivant configuration du

serveur– Permanent: démarrée avec le serveur– Temporaire: démarrée à la requête d’un client

• Un serveur communique avec une servlet à l’aide de 3 méthodes principales:– init()

• Appelée quand la servlet est chargée • Permet d’ouvrir des fichiers, établir des connexions…• Garantie de se terminer avant tout autre méthode

– service() • Chaque appel de client génère un appel a service• Plusieurs appels concurrents possibles si plusieurs clients

– destroy()• Appelée par le serveur quand la servlet est déchargée• Permet le nettoyage de ressources

Servlets – Cycle de vie

• La méthode service() interprete la requête HTTP et décide quelle autre méthode appeler.

Servlets et HTTP

• Plusieurs méthode prédéfinies dans HttpServlet– doGet() – doHead() – doDelete() – doOptions() – doPost() – doTrace()

• doGet(HttpServletRequest req, HttpServletResponse resp) pour gérer les methodes GET

• doPut(HttpServletRequest req, HttpServletResponse resp) pour gérer les méthodes POST

• Les paramètres sont obtenus en faisant req.getParameter(…)

Moteurs de recherche et Web Services

Moteurs de recherches• Permettent de trouver de l’information sur le web

• Indexent régulièrement des sites pour construirent une base de données (possibilité de l’empêcher avec le fichier robots.txt)

• Une recherche se fait dans la base de données

important d’avoir une BD à jour

• Actuellement 2ème génération– 1ere génération: utilisation des mots clefs et des tags META– 2eme génération: analyse de la structure des pages (liens entrant,

sortant) et construction d’un indice de réputation– 3eme génération: utilisation des habitudes de recherche et meilleure

extraction d’informations contextuelles

Google et PageRank• Google est un moteur de 2eme génération

• Utilise l’algorithme PageRank pour déterminer l’adéquation d’une page à la demande

• PageRank est un indice de l’importance d’une page web – Chaque lien sortant est un « vote » pour une page– Plus une page a de votes, plus elle est importante

• Variation de l’algorithme– Élimination des liens venant de « link farms » – Diminution de l’importance d’un vote suivant la cible

Web services - Principes• Accés au web traditionnellement à travers des browsers

• Web Services: API permettant à des programmes de communiquer avec des technologies www

• Technologies clefs:– XML, HTTP, SOAP, WSDL, UDDI

• Idée: – Des services sont publiés sur Internet– Des applications cherchent ces services et y accèdent

• Questions– Quels services sont offerts?– Comment invoque-t-on ces services?– De quelles informations ont-il besoin?– Comment fournir ces informations?– Comment les réponses sont-elles envoyées?

WSDL• Web Service Description Language

• Fichier XML – <definitions> contient la description des services– <portType> groupe de méthode exposées– <operation> méthode exposée

• <input> paramètre• <output> valeur de retour

– <message> description du paramètre

<definitions name="MobilePhoneService" …… > <portType name="MobilePhoneService_port"> <operation name="getPrice"> <input message="PhoneModel"/> <output message="PhoneModelPrice"/> </operation> </portType> <message name="ListOfPhoneModels"> <part name="models" type="tns:Vector"> </message> <message name="PhoneModel"> <part name="model" type="xsd:String"> </message> <message name="PhoneModelPrice"> <part name="price" type="xsd:String"> </message> </definitions>

WSDL - Exemple

UDDI – SOAP• Universal Description, Discovery and Integration

• Annuaire d’informations (WSDL) sur les WS

• Ressemble à un DNS ou un broker Corba

• En général, les WS communiquent avec SOAP

• Simple Object Access Protocol

• XML sur http

SOAP - Exemple

HTTP/1.1 200 OK Content-Type: text/xml; charset="utf-8" Content-Length:nnnn

<SOAP-ENV:Envelope

xmlns:SOAP-ENV="http://schemas.xmlsoap.org/soap/envelope/"

SOAP-ENV:encodingStyle="http://schemas.xmlsoap.org/soap/encoding/"/>   

<SOAP-ENV:Body>

<m:GetLastTradePriceResponse xmlns:m="Some-URI">

<Price>14.5</Price>

</m:GetLastTradePriceResponse>

</SOAP-ENV:Body>

</SOAP-ENV:Envelope>

Références

• http://www.w3.org• http://www.commentcamarche.net/internet/http.php3• http://www.cookiecentral.com• http://www-mrim.imag.fr/ressources/docPHP4_v4c/manuel_toc.html

• http://www.apl.jhu.edu/~hall/java/Servlet-Tutorial/• Cours de Master STIC Programmation et sécurité du Web,

Philippe Poulard : http://disc.inria.fr/perso/philippe.poulard/cours/master