Sie sind auf Seite 1von 71

Systèmes Répartis INTERNET Langage HTML

LANGAGE HTML
ELEMENTS DYNAMIQUES

AVERTISSEMENT :

Ce document est destiné aux concepteurs de pages Web qui veulent insérer des
éléments d’interactivité dans les pages : formulaires permettant de dialoguer avec
l’internaute, scripts permettant d’animer ou de contrôler l’action du navigateur ou
de l’internaute, applications téléchargées et s’exécutant côté clients.
Enfin, ce document présente mais de manière sommaire l’ensemble des techniques
utilisées pour créer une application Web.

Il ne prétend pas apprendre au lecteur à écrire des scripts, à développer des


applications qui s’exécutent soit côté serveur, soit côté navigateur. Il permet
néanmoins au lecteur, concepteur de site web, d’insérer des scripts ou des
applications existantes dans les pages Web.

Un troisième volume sera consacré à la conception d’un site Web vu non sous
l’angle technique , mais plutôt vu sous l’angle fonctionnel : projet de site,
organisation d’un site, charte graphique, référencement de site.

j October OOOO 23242214.doc Page 1 sur 71


Systèmes Répartis INTERNET Langage HTML

SOMMAIRE

Chapitre 1 : Les Formulaires................................................................................................................3


1.Le recueil de données...........................................................................................................................................3
2.Les formulaires....................................................................................................................................................3
3.Présentation des éléments de formulaire..............................................................................................................5
4.Méthodes d’envoi des données............................................................................................................................6
5.Liste des éléments de formulaire.........................................................................................................................6
Conclusion............................................................................................................................................................13
Chapitre 2 : Les Scripts côté clients....................................................................................................14
6.Caractéristiques Communes...............................................................................................................................14
7.Les Langages.....................................................................................................................................................16
8.Les Objets..........................................................................................................................................................18
9.VBSCRIPT........................................................................................................................................................21
10.JAVASCRIPT..................................................................................................................................................26
11.Insertion d'un Script.........................................................................................................................................29
Conclusion............................................................................................................................................................31
Chapitre 3 : Applets Java - Contrôles ActiveX .................................................................................32
1.Principe de fonctionnement...............................................................................................................................32
2.Applets Java.......................................................................................................................................................33
3.Contrôles Active X............................................................................................................................................39
Conclusion............................................................................................................................................................49
Chapitre 4 : Applications Web............................................................................................................50
1.Les Applications................................................................................................................................................50
Environnement d'exécution.................................................................................................................59
Processus d'exécution..........................................................................................................................59
Modèle de composants.........................................................................................................................59
Exemple de fichier PHP.......................................................................................................................59
Fichier HTML généré...........................................................................................................................................60
Processus d'exécution..........................................................................................................................60
Modèle objet.........................................................................................................................................61
Modèle de composants.........................................................................................................................61
2.Exemples d'Applications....................................................................................................................................64
3.Exemple pratique : compteur de visites.............................................................................................................66

Conclusion............................................................................................................................................................70

j October OOOO 23242214.doc Page 2 sur 71


Systèmes Répartis INTERNET Langage HTML

Chapitre 1 : Les Formulaires


1. Le recueil de données
Lorsque l’utilisateur doit fournir des informations, afin par exemple d’adapter le traitement
réalisé par notre serveur Web et/ou de fournir une information adéquate, nous pouvons utiliser
des requêtes simples sous forme de dialogue.

Par exemple, en utilisant le JavaScript, nous pourrions demander des confirmations à une action
grâce à la fonction confirm. Pour d’autres besoins, nous utilisons prompt qui permet la saisie
d’une valeur (numérique ou chaîne).

Cependant, de telles fonctions ne sont pas utilisables si nous souhaitons obtenir plusieurs
informations : l’affichage de plusieurs fenêtres de dialogues (chacune avec une question) ne
serait pas satisfaisant esthétiquement et fonctionnellement. Il ne permettrait pas à l’utilisateur,
entre autres, de revenir sur une question où la réponse fournie est erronée (sauf de tout
recommencer).

Pour construire des requêtes plus générales nous utilisons les formulaires. Ce terme de
formulaire vient de leur première vocation : définir un masque de saisie où l’utilisateur fournit
des renseignements plus ou moins personnels afin, par exemple, de s’inscrire dans une liste de
diffusion électronique.

2. Les formulaires
2.1 But d'un formulaire
Les formulaires sont devenus un moyen efficace pour obtenir des renseignements fournis par
l’utilisateur pour :
• solliciter un avis sur l'appréciation d'un site, d'un article d'une page Web, etc...;
• interfacer une base de données (interroger, lister ou modifier le contenu d'une table de cette
base);
• solliciter le traitement d ’une application qui renverra en réponse le résultat sous forme
d'une page Web dynamique.

Ces renseignements peuvent être une réaction, un commentaire, une adresse de courrier
électronique, un nom, etc...

2.2 Envoi des données


Ces données ou renseignements saisis par l ’internaute peuvent être envoyés aussi bien vers un
serveur Web, que vers une boite aux lettres de serveur de courrier électronique.
Dans le cas d'un serveur Web, ce dernier, une fois la réception des données de la requête de
l'internaute, va exécuter une application (CGI par exemple), ou solliciter d'autres interfaces
(ISAPI via une DLL, page ASP ou JSP, ou PHP, etc...) qui vont se connecter sur une base de
données.

j October OOOO 23242214.doc Page 3 sur 71


Systèmes Répartis INTERNET Langage HTML

2.3 La balise "form"

Enveloppe de Formulaire

Eléments de Formulaire :
• champ de texte
• fenêtre déroulante nom
• boutons

Les éditeurs avancés dessinent Envoyer Annuler


dans la zone de travail cette
enveloppe en pointillé (Frontpage
ou Dreamweaver) ou délimitent le Chaque champ de saisie de données s'intitule un
début et la fin de cette dernière élément de formulaire. L'ensemble de ces éléments
par deux lignes continues est inséré dans un bloc intitulé enveloppe de
(Word). formulaire.

Note d’attention :
Toutes les balises concernant les formulaires vont être passées en revue dans le chapitre. Une
restriction existe au niveau des attributs dans la mesure où les attributs relatifs aux feuilles de
style (class, id, style) ainsi que ceux relatifs aux évènements susceptibles de déclencher des
scripts seront respectivement ignorés ou juste évoqués. Leur étude doit être prise en compte au
niveau d’un chapitre relatif aux feuilles de style ou aux langages de script.

Cette enveloppe se traduit par la balise <form> qui bénéficie des attributs suivants :

action =URL Adresse URL de destination.


Encodage Préciser text/plain si vous voulez que les données soient envoyées
enctype =
(Netscape) comme du texte brut.
method =get ou post Indique comment les données saisies seront envoyées au serveur.
name =texte Nom du formulaire.
évènement(s) =script Evènements disponibles : onreset, onsubmit.
Fenêtre ou cadre où seront affichées les données après être
target =destination
envoyées.

L’attribut action spécifie l'adresse URL (de type: http, ftp, gopher, file, mailto, news, nntp,
telnet) qui va recevoir les informations entrées dans le formulaire. Cela peut être un script CGI,

j October OOOO 23242214.doc Page 4 sur 71


Systèmes Répartis INTERNET Langage HTML

une bibliothèque DLL, une page ASP (ou JSP, ou PHP, etc...) qui traitera les données saisies ou
une adresse e-mail où seront envoyées ces données.
Si l'attribut action est absent, l'adresse URL sera celle du document courant.

L’attribut enctype décrit la méthode de codage utilisée pour transmettre les données saisies.
Cette méthode correspond à un type MIME, la valeur par défaut étant “application/x-www-
form-urlencoded”.
Cet attribut peut prendre la valeur text/html pour transmettre les données saisies sous forme de
page Web.
Il existe bien d'autres valeurs possibles. Dans ce chapitre ne seront évoquées que les types les
plus usuellement rencontrées dans les formulaires.

L’attribut target prend les même valeurs que celles définies dans le chapitre des liens ou des
cadres et reste peu souvent utilisée.

L'attribut name a son importance dans la mesure où il permet de différencier les différents
formulaires d'une page ou d'un site Web.

L’attribut method accepte les valeurs :


• get (valeur par défaut) pour soumettre une requête à un serveur par exemple
• post pour envoyer généralement les données par courrier électronique.

Ces deux méthodes sont exposées de manière plus détaillée dans le paragraphe suivant.

3. Présentation des éléments de formulaire


Les champs de saisies d'un formulaire sont classés en trois types : éléments de saisie ou de choix
ou boutons d'action, boites de sélection, zone de texte multiligne. Ces trois types utilisent
respectivement les balises <input>, <select> et <textarea> et sont insérées entre les balises
<form> et </form>.

Ces éléments de formulaire, quel que soit leur type, ont les attributs suivant en commun :
name =texte Nom du champ (généralement obligatoire).
value =nombre ou texte Valeur initiale ou saisie par l'internaute.

D'une manière générale, les attributs name et value sont non obligatoires mais indispensables
pour pouvoir envoyer et traiter des données.

Avant de détailler les différents éléments de formulaire et contrôles disponibles associés, il est
nécessaire de comprendre le principe de fonctionnement d’un formulaire.
Les données recueillies grâce à un formulaire font généralement l’objet d’un traitement par le
serveur Web. Celui-ci s’attend donc à recevoir la valeurs de données saisies.
Afin de rendre possible l’interprétation de ces données, ces dernières sont transmises par
doublets comprenant la valeur de l'attribut name et celle de value.

Ainsi, si nous définissons un formulaire comprenant un élément de formulaire du type "champ


de saisie texte" nommé “Nom” comme dans le graphique du paragraphe précédent, si nous
validons ce formulaire après avoir saisi la valeur “Casimir”, le serveur recevra le doublet
“Nom=Casimir”.

j October OOOO 23242214.doc Page 5 sur 71


Systèmes Répartis INTERNET Langage HTML

Cette compréhension du mécanisme interne met en valeur le caractère obligatoire de l'attribut


name, dont la valeur doit être différente d'une information renvoyée à l'autre.

4. Méthodes d’envoi des données


4.1 Méthode GET
Si au niveau de la balise <form>, la méthode GET est choisie, alors les doublets de paramètres
sont transmis avec l’adresse URL comme valeur de l'attribut action :
action=“http://www.mon-serveur.com?Nom=Casimir”.

Les doublets sont séparés de l'adresse URL classique par le caractère "?".
Les autres doublets sont séparés du premier par le caractère "&" :
action=“http://www.mon-serveur.com?Nom=Casimir&Prenom=Marcel”.

Les données saisies sont en pratique insérées dans l'en-tête de la requête HTTP.
Le serveur extrait ces données grâce à la variable d’environnement QUERY_STRING.

La longueur de l'adresse complète y compris les doublets est limitée à 255 caractères.

Cette méthode est destinée aux petits formulaires ou moteurs de recherche.

4.2 Méthode POST


Si la méthode post est choisie pour envoyer les données, les données transmises forment le
contenu d’un courrier électronique construit à la volée par le navigateur utilisé qui exploite en
plus de ces informations la variable CONTENT_LENGTH pour déterminer la taille des
informations à transmettre.
Les données saisies sont en pratique insérées dans le corps de la requête HTTP.

La méthode post permet en général d’envoyer les données collectées à une adresse de courrier
électronique. L'envoi des données d'un formulaire à un compte de messagerie induit l'emploi de
cette méthode.
Cette méthode impose de passer l'adresse de courrier comme valeur à l'attribut action.

<form method=post action="mailto:jean.dupont@wanadoo.fr?subject=appreciation de mon


site ...>

Il est possible d'accoler derrière l'adresse de courrier électronique les autres éléments de l'en-tête
d'un message : le sujet, les destinataires autres (Cc et Cci).

5. Liste des éléments de formulaire


Dans ce paragraphe sont exposés les attributs principaux ainsi que les fonctions évènementielles
les plus couramment utilisées.

5.1. La balise “input”


La syntaxe générale de cette balise est :

j October OOOO 23242214.doc Page 6 sur 71


Systèmes Répartis INTERNET Langage HTML

align =alignement Alignement d’une image par rapport au texte (type=image).


Spécifié pour une boite à cocher (checkbox) ou un bouton radio.
checked
Cet attribut indique que ce contrôle est initialement actif (coché).
Pour un champ de saisie de type texte, cet attribut indique le nombre
maxlength =nombre
maximum de caractères pouvant être saisis.
name =texte Nom du champ (généralement obligatoire).
Pour un champ de saisie texte, cet attribut indique la taille (en nombre
size =nombre de caractères) réservée pour un contrôle.
Si plus de caractères sont saisis, le contenu défilera.
src =URL Source de l’image utilisée par un contrôle de type image.
type =type Voir ci-dessous les valeurs possibles.
nombre ou
value = Valeur initiale.
texte

5.2. L’élément de type “bouton”

name = Nom du bouton.


Script - Evènements disponibles : onclick, onblur, ondblclick, onfocus,
évènement(s) =
onmousedown, onmouseup.
value = Chaîne libellé du bouton.

Cet élément permet d’insérer un bouton et de lui associer une action, généralement une fonction
JavaScript ou une fonction interne du navigateur.

<form>
<input type=button value="Cliquez moi" onClick="alert ('Aie!!')">
</form>

5.3. L’élément de type “checkbox”

checked Indique que le contrôle est initialement coché.


name = Nom du contrôle obligatoire.
évènement(s) {onclick, onblur, ondblclick, onfocus, onmousedown, onmouseup}= script
value = Chaîne valeur à retourner au serveur si coché (“ON” par défaut).

Cet élément définit un contrôle de type boite à cocher. L'attribut name est unique pour chaque
contrôle afin que le serveur exploite bien tous les items cochés.

<form>S&eacute;lectionnez les langages utilis&eacute;s (plusieurs choix possibles):


j October OOOO 23242214.doc Page 7 sur 71
Systèmes Répartis INTERNET Langage HTML

<br><input type=checkbox name="cppl"> C&nbsp;/&nbsp;C++


<br><input type=checkbox name="html" checked> H.T.M.L.
<br><input type=checkbox name="java"> Java
<br><input type=checkbox name="pasc" checked> Pascal
</form>
5.4. L’élément de type “file”

name = Nom du contrôle obligatoire.


accept = Liste de types MIME (spécifie le fichier en attache).
évènement(s) {onclick, onblur, ondblclick, onfocus, onmousedown, onmouseup}= script
value = Chaîne valeur initiale.

L’élément suivant créé une zone de sélection de fichier vous permettant d’inclure un fichier dans
les données transmises au serveur, celui-ci recevra le contenu de votre fichier; le protocole de
transfert “enctype” doit préciser “multipart/form-data”.

<form>
<b>Fichier à soumettre:</b><br>
Nom : <input type=file name="fichier" size=50>
...
</form>

5.5. L’élément de type “hidden”

name =Nom du contrôle obligatoire.


value =Chaîne valeur à transmettre.

Cet élément invisible par l’utilisateur sera transmis au serveur, il sert donc à communiquer des
informations à des fins uniques de traitement.

<form>
Pr&eacute;nom:
<input type=text name="prenom" value="" size=20 maxlength=30>
<input type=hidden name="defaut" value="Casimir">
</form>

Dans cet exemple, seul le premier champ est visible.

j October OOOO 23242214.doc Page 8 sur 71


Systèmes Répartis INTERNET Langage HTML

5.6. L’élément de type “image”


align = Alignement Cf. ci-dessous.
name = Nom du champ.
événement(s) {onabort, onclick, onerror, onload} = script.
src = URL nom du fichier image.

Cet élément affiche une image. Un clic sur celle-ci provoque la validation du formulaire (l’envoi
des données).
L’attribut align peut prendre les valeurs présentées précédemment à savoir : left, right, top et
bottom, valeurs auxquelles la version 3 du langage HTML rajoute les possibilités suivantes :
absmiddle, absbottom, texttop, middle et baseline.

<form action="http://search.yahoo.fr/search/fr">
Mots &agrave; rechercher <input type=text size=30 name="p">
sur <input type=image src="yahoo.gif" align=absmiddle>
</form>

5.7. L’élément de type “password”


name = Nom du champ.
Nombre maximal de caractères pouvant être inscrit dans l’espace prévu de l’
maxlength =
élément.
size = Spécifie la taille visible à l’écran de l’élément en nombre de caractères.
{onblur, onchange, onfocus, onkeydown, onkeypress, onkeyup,
événement(s)
onselect}=script.
value = Chaîne de valeur initiale.

Cet élément permet de saisir des informations confidentielles (même si la transmission ne l’est
guère...). Les caractères saisis sont remplacés par un caractère unique (signe multiplié ou autre).

<form><pre>
<b>Utilisateur:</b> <input type=text name="prenom" value="" size=20><br>
<b>Mot de passe:</b> <input type=password name="passe" value="" size=20>
</pre></form>

j October OOOO 23242214.doc Page 9 sur 71


Systèmes Répartis INTERNET Langage HTML

5.8. L’élément de type “radio”

checked Indique que le contrôle est initialement sélectionné.


name = Nom du contrôle obligatoire.
événement(s) {onclick, onblur, ondblclick, onfocus, onmousedown, onmouseup}=script.
value = Chaîne de valeur à retourner au serveur si coché (“ON” par défaut).

Cet élément définit un contrôle de type bouton radio.


Tous les boutons d’un même groupe sont identifiés grâce à une valeur commune pour l'attribut
name.

<form>
S&eacute;lectionnez votre langage pr&eacute;f&eacute;r&eacute; (un choix possible):
<br><input type=radio name="langage"> C&nbsp;/&nbsp;C++
<br><input type=radio name="langage" checked> H.T.M.L.
<br><input type=radio name="langage"> Java
<br><input type=radio name="langage"> Pascal
</form>

5.9. L’élément de type “reset”

name = Nom du contrôle obligatoire.


événement(s) {onclick, onblur, ondblclick, onfocus, onmousedown, onmouseup}=script.
value = Chaîne libellé du bouton.

Cet élément, qui apparaît sous forme de bouton poussoir, permet de réinitialiser le formulaire en
redonnant à chaque contrôle sa valeur initiale. Ceci permet à l’utilisateur de restaurer les valeurs
par défaut et de supprimer les informations erronées qu’il aurait saisies.

<form>
<input type=text name="pays" value="France">
<input type=reset value="Restaure">
</form>

j October OOOO 23242214.doc Page 10 sur 71


Systèmes Répartis INTERNET Langage HTML

5.10. L’élément de type “submit”


name = Nom du contrôle obligatoire.
événement(s) {onclick, onblur, ondblclick, onfocus, onmousedown, onmouseup}=script.
value = Chaîne libellé du bouton.

Cet élément, qui apparaît sous forme de bouton poussoir, permet de valider le formulaire en
envoyant les données collectées pour les soumettre au serveur.

<form>
<input type=text name="prenom">
<input type=submit value="OK">
</form>

5.11. L’élément de type “text”

maxlength = Nombre maximum de caractères pouvant être saisis.


name = Nom du contrôle obligatoire.
size Nombre égal à la taille de la boite de saisie en nombre de caractères.
{onblur, onchange, onfocus, onkeydown, onkeypress, onkeyup,
événement(s)
onselect}=script.
value = Chaîne valeur initiale.

L’élément suivant crée une zone de saisie à une seule ligne de 20 caractères de large, acceptant
30 caractères maximum, apparaissant à la suite du message “Prénom” écrit en gras, le champ est
vide au chargement du formulaire :

<form>
<b>Pr&eacute;nom:</b>
<input type=text name="prenom" value="" size=20 maxlength=30>
</form>

5.12. La balise “select”


La balise select définit une liste d’items où l’utilisateur peut sélectionner un ou plusieurs items.
La syntaxe de cette balise est :

name = nom
Nom du contrôle obligatoire.
Valeurs possibles : left, right, top, bottom, absmiddle, absbottom,
align = nom
texttop, middle et baseline.
multiple Autorise la sélection de plusieurs items dans la liste.
évènement(s) = fonction Evènements disponibles : onblur, onchange, onfocus.
size = nombre La valeur 1 provoque le déroulement de la liste.
Une valeur supérieure affiche une liste déjà déroulée proposant le
j October OOOO 23242214.doc Page 11 sur 71
Systèmes Répartis INTERNET Langage HTML

nombre spécifié d’items visibles.

La balise <option> permet d’insérer les différents items de la liste. Le paramètre supplémentaire
selected précise que cet item est sélectionné lors de l’initialisation. Il peut y avoir plusieurs
éléments présélectionnés si l’option multiple est précisée.

<form>
S&eacute;lectionnez les langages utilis&eacute;s (plusieurs choix possibles):<br>
<select multiple name="utilise" size=4>
<option>C&nbsp;/&nbsp;C++
<option selected> H.T.M.L.
<option> Java
<option selected> Pascal
</select>
</form>

La balise </option> est facultative.


La valeur retournée au serveur est le paramètre de l’attribut value quand ce paramètre est
présent, sinon le texte précisé après la balise <option>.

<form>
S&eacute;lectionnez votre langage pr&eacute;f&eacute;r&eacute; (un choix possible):<br>
<select name="prefere" size=1>
<option value="Cppl"> C&nbsp;/&nbsp;C++
<option value="HTML" selected> H.T.M.L.
<option value="Java" >Java
<option value="Pasc" >Pascal
</select>
</form>

5.13. La balise “textarea”


La balise <textarea> définit une zone de texte à plusieurs lignes où l’utilisateur peut saisir un
texte formaté par des retours à la ligne. La syntaxe de cette balise est :

name =nom Nom du champ obligatoire.


Valeurs possibles : left, right, top, bottom, absmiddle, absbottom,
align =nom
texttop, middle et baseline.
cols =nombre Largeur de la zone de saisie en nombre de caractères.
{onblur, onchange, onfocus, onkeydown, onkeypress, onkeyup,
événement(s) =fonction
onselect}=script.
j October OOOO 23242214.doc Page 12 sur 71
Systèmes Répartis INTERNET Langage HTML

rows =nombre Hauteur de la zone de texte en nombre de lignes de texte.


wrap =off Aucun retour à la ligne automatique n’est réalisé.
Le texte est automatiquement renvoyé à la ligne (sur “cols”
hard
caractères) et les retours à la ligne insérés sont transmis au serveur.
Le texte est automatiquement renvoyé à la ligne mais ces retours
soft
insérés ne sont pas transmis au serveur.

Voici un exemple.

<form>
Vos commentaires :<br>
<textarea cols=30 rows=6 name="texte" wrap=soft>
Donnez vos commentaires...</textarea>
</form>

Conclusion
Les formulaires sont importants car ils permettent de mettre en place une interactivité entre
l’internaute et le concepteur du site : l’internaute peut dialoguer, faire un choix et envoyer le fruit
de ses choix au concepteur via une boite aux lettres ou une application.
Ces formulaires deviennent indispensables pour créer les interfaces Web qui interrogent les
bases de données via une application Web.
En conséquence, ce chapitre est non seulement un préalable aux chapitres portant sur les scripts
et les applications Web, mais aussi un préalable à l’apprentissage du DHTML.

j October OOOO 23242214.doc Page 13 sur 71


Systèmes Répartis INTERNET Langage HTML

Chapitre 2 : Les Scripts côté clients


L'objet du chapitre est d'étudier les scripts que l'on peut insérer dans une page Web, et par voie
de conséquence les deux principaux langages de scripts utilisés actuellement : Vbscript et
Javascript.
Ces scripts ont pour but d'améliorer la présentation des pages Web et d'y injecter une dose
d'interactivité avec l'internaute.
Jusqu'à présent, l'étude du langage HTML nous invitait à concevoir des pages ou documents
Web dont le contenu est fixe, invariable quel que soit le comportement de l'internaute : ce sont
des pages statiques. Les balises présentées dans les chapitres précédents peuvent être regroupées
dans ce qu'on appelle le langage HTML statique.
L'étude des scripts ouvre la porte au HTML dynamique ou DHTML. En effet, ces scripts sont
les premiers éléments dynamiques que l'on peut insérer dans une page Web. Ils représentent une
des composantes du DHTML.

L'objet du chapitre n’est pas d'étudier chaque langage de script en profondeur, mais de survoler
non seulement les caractéristiques des langages mais aussi de survoler les traits principaux de
chacun d’entre eux. A la fin du chapitre, le concepteur de pages Web sera en mesure de lire sans
difficulté un script, de repérer dans la page Web les différentes dépendances du script avant de
l’insérer dans sa page et l’adapter au résultat qu’il veut obtenir.

6. Caractéristiques Communes
1.1 Généralités
Le code source des scripts est directement intégré à celui des pages Web.
En conséquence, leur confidentialité est nulle car le code source est visible.

Le code est interprété par le navigateur, d'où vérification avant l'exécution.


Si le navigateur rencontre un problème bloquant à l'exécution, il renvoie au moins un message
d'erreur, sinon lance le débogueur de script qui propose à l'internaute de réparer.
Le débogueur de script est une des fonctionnalités du navigateur que l’on active par
l’intermédiaire de ses options paramétrables (cette fonctionnalité n’est pas forcément activée par
défaut).

Les langages de script permettent d'accéder aux objets de la page et du navigateur.

Une fois que la page Web est affichée dans le navigateur, les scripts contenus dans cette page
peuvent être exécutées suite à une action de l'utilisateur : un clic de souris, un survol d'une
image, une sélection au sein d'un formulaire, etc... Au sein du code source de la page Web, ces
évènements sont associées aux balises de la page en tant qu'attributs optionnels. Chaque
évènement lance une procédure évènementielle (EventHandler) ou script.

Un certain nombre de traitements peuvent être regroupés au sein de fonctions. Les évènements
d'une page peuvent lancer l'exécution de telle ou telle fonction (appel d'une fonction) au sein du
script. Ces fonctions peuvent tout simplement manipuler les objets de la page ou lancer des
boites de dialogue.

Les codes de programmation restent simples mais sont utilisés pour des applications limitées (si
l'on excepte les appels aux contrôles ActiveX à partir des Vbscripts).
j October OOOO 23242214.doc Page 14 sur 71
Systèmes Répartis INTERNET Langage HTML

1.2 Déclarations
Les scripts qui utilisent des fonctions voient ces dernières, en général, être déclarées dans l’en-
tête de la page Web.
Les scripts qui ne font pas appel à des fonctions sont directement insérés dans le corps de la
page.

Toute insertion de script, que ce soit la déclaration des fonctions dans l'en-tête, que ce soit le
script lui-même inséré dans le corps de la page, nécessite l'emploi de la balise <script>.
Cette balise terminée par la balise </script> doit être considéré comme un bloc, à l'intérieur
duquel il est possible de déclarer plusieurs fonctions ou codes de scripts. Ces codes ou fonctions
sont insérés dans des commentaires pour être invisibles des navigateurs “ anciens ” qui ne
comprennent pas les scripts.

<script language="Javascript">
<!--
CODE DE SCRIPT OU FONCTION
-->
</script>

Si le navigateur de l'internaute ne supporte pas les scripts, il est alors possible de renseigner
l'internaute sur la conduite à tenir en insérant une balise <noscript> .

Voici un exemple ou le code source de la page ne contient qu'un script :


<body>
<script language="Javascript">
...
</script>
<noscript>
Désolé, vous avez besoin d'un navigateur qui supporte le Javascript pour visionner le contenu de
cette page.
</noscript>
</body>

1.3 Balise script


La balise <script> qui possède les attributs suivants.
<script
language = texte Spécifie le langage de script utilisé, et quelquefois précise la version.
event = évènement Spécifie pour quel évènement le script est écrit.
for = élément Spécifie quel élément est délimité par l'exécution du script.
Spécifie à quel endroit placer le script dans le document. La fenêtre
in = texte
courante est l’endroit par défaut.
src = URL L'attribut est optionnel et indique l'URL qui va charger le code (script).
Spécifie si un ensemble de fonctions ne doivent pas être exécutées
library = texte
immédiatement.
><!-- insertion d'une balise commentaire au profit des navigateurs qui ne comprennent pas les
scripts
corps du script comprenant éventuellement des déclarations de variables, de fonctions, etc...
--></script>

j October OOOO 23242214.doc Page 15 sur 71


Systèmes Répartis INTERNET Langage HTML

De tous les attributs énumérés ci-dessus, seul l'attribut concernant le langage utilisé est
obligatoire pour le navigateur.
Le navigateur Netscape permet de spécifier la version du javascript :
"language="JavaScript1.2" par exemple. L'insertion de cette précision implique que le script
ne s’exécutera que si le navigateur supporte le JavaScript version 1.2.

Voici un premier exemple :


<html><head>
<title>exemple</title>
<script language="JavaScript">
<!-- Début du script
document.write("Bonjour, le monde.")
<!-- Fin du script
</script>
</head>
<body>
C'est tout!.
</body></html>

Ce code source donne le résultat suivant.

Bonjour, le monde. C'est tout!

1.4 Côté Serveurs


Les scripts peuvent s'exécuter aussi bien du côté du logiciel client (navigateur) que du côté des
serveurs Web. Dans ce deuxième cas, les scripts servent à élaborer des pages Web dynamiques.
Ces pages Web n'existent pas sur le serveur Web ; elles sont fabriquées à la volée suite à
l'exécution de ces scripts. Le dernier chapitre de ce document entame l'étude de cette technique.

Pour distinguer les scripts qui tournent sur le Serveur, l'attribut runat est ajouté à la balise
<script> ainsi :
<script langage="Vbscript" runat="Server" >

7. Les Langages
2.1 Langage VBscript
Le langage VBscript (Visual Basic Scripting Edition) est un langage propriétaire développé par
Microsoft. Il reprend la logique et la syntaxe de son langage Visual Basic (d'où VB). Bien que
quelques fonctions lui soient propres, on peut considérer VBscript comme un sous-ensemble de
Visual Basic :
Vb  Vb script  Vba (macros de word, excel,…)

VBscript ouvre la porte aux différents produits de Microsoft dédiés au Web et principalement
aux contrôles Active X, ce qui peut être particulièrement adapté dans le cas d'un réseau Intranet.

j October OOOO 23242214.doc Page 16 sur 71


Systèmes Répartis INTERNET Langage HTML

2.2 Langage Javascript


Netscape avait créé initialement un langage nommé LiveScript. Puis Netscape et Sun
Microsystem, créateur de Java, décidèrent vers 1995-96 de fusionner leurs deux langages :
LiveScript devient alors JavaScript.

Le langage JavaScript repose sur la syntaxe Java (langage ressemblant à C++), mais avec des
allégements et des simplifications. Le JavaScript est un langage compact, orienté objet.

Le langage JavaScript est accessible à des auteurs de pages HTML alors que Java est réservé à
un public plus professionnel.

Il est de loin le plus utilisé des deux langages. Certains éditeurs HTML, comme WebExpert,
proposent eux-mêmes des scripts et les insèrent automatiquement.

Le langage Javascript a été normalisé par l'organisme ECMA pour devenir le langage
ECMAScript.

2.3 Langage Jscript


L'énorme succès du langage JavaScript a incité Microsoft à créer un langage équivalent mais non
compatible avec le précédent : le langage Jscript.
Le langage Jscript est en fait une implémentation type Microsoft de ECMAScript (ECMA-262).

2.4 Normalisation
Le langage VBScript est un langage propriétaire non reconnu par le consortium du Web qu'est
W3C.
Les langages JavaScript et Jscript sont référencés non pas auprès de W3C, mais auprès de
ECMA (European Computer Manufacturers Association).
Cette organisme de normalisation plutôt dédié au monde de l'information et des systèmes de
communication préconise une évolution de ces deux langages vers ECMAScript.

2.5 Navigateurs
Les deux navigateurs les plus célèbres (Microsoft Internet Explorer et Netscape Communicator)
ont leurs propres caractéristiques.

Le navigateur Microsoft Internet Explorer interprète tous les langages.


Microsoft Internet Explorer 4.0 interprète le langage VBscript V3.0.

Les JavaScripts tournent sur la plupart des plates-formes, et sont lus par la plupart des
navigateurs, depuis Netscape Navigator 2.0 et Microsoft Internet Explorer 3.0.

Le navigateur Netscape ne reconnaît que le langage Javascript.

Les navigateurs interprétant les langages, ils possèdent en conséquence pour chaque langage un
débogueur intégré permettant de renvoyer des messages d'erreur en cas de problème
d'interprétation.

j October OOOO 23242214.doc Page 17 sur 71


Systèmes Répartis INTERNET Langage HTML

2.6 Exemples comparatifs

Vbscript Javascript

<HTML> <HTML>
<HEAD> <HEAD>
<SCRIPT language="VBscript"> <SCRIPT language="Javascript">
<!-- <!--
Sub ok_OnClick function clickbut(){
MsgBox "Le bouton est cliqué." alert("Le bouton est cliqué.")
End Sub }
--> //-->
</SCRIPT> </SCRIPT>
</HEAD> </HEAD>
<BODY> <BODY>
<FORM name="commande"> <FORM name="commande">
<INPUT name="ok" type="button" <INPUT name="ok" type="button"
value="Cliquez ici"> value="Cliquez ici" onClick="clickbut()">
</FORM> </FORM>
</BODY> </BODY>

Dans cet exemple, une procédure (Vbscript) ou fonction (Javascript) est déclaré dans l'en-tête de
la page.
L'appel à ce script est réalisé par le déclenchement d'un évènement associé à un élément de
formulaire de type "bouton", ceci de manière implicite (Vbscript) ou explicite (Javascript).

Editeurs avancés
Ces derniers permettent à l'internaute d'écrire manuellement ses propres scripts.

8. Les Objets
Les langages de script permettent d'accéder aux objets de la page et du navigateur, d'en retirer
des informations et de les manipuler.
Avant de présenter les objets utilisés par les scripts, il semble judicieux d'effectuer un léger
rappel sur la programmation objet.

3.1 Généralités
Tout objet possède des propriétés. Des méthodes (sorte de fonctions) sont associées à tout
objet.
Certains objets sont prédéfinis mais il est possible d'en créer de nouveaux avec leur propres
méthodes.

Si un objet se nomme Objet, une propriété de cet objet sera notée Objet.propriete.

Une méthode se définit comme une fonction : Object.nom = nomfonction

Le mot this comme dans tous les langages orientés objets permet de référencer l'objet courant.

j October OOOO 23242214.doc Page 18 sur 71


Systèmes Répartis INTERNET Langage HTML

3.2 Hiérarchie des objets


Voyons d'abord une illustration des différents objets qu'une page peut contenir.

Le navigateur affiche une page Web qui n'est rien d'autre qu'un document HTML. C'est l'objet
document.
Dans ce document, on trouve un formulaire au sens HTML du terme. C'est l'objet formulaire.
Autrement dit, la hiérarchie des objets fait que l'objet document contient un objet formulaire.

Dans ce document, on trouve deux objets : des boutons checkbox et une zone de texte. Ce sont
respectivement l'objet checkbox et l'objet texte. Autrement dit l'objet document contient
l'objet formulaire qui contient à son tour l'objet radio et l'objet document contient aussi l'objet
formulaire qui contient à son tour l'objet texte.

La hiérarchie des objets de cet exemple est donc :


checkbox
document formulaire
texte

Pour accéder à un objet, il faudra donner le chemin complet de l'objet (ou la généalogie complète
de l'objet) en allant du contenant le plus extérieur à l'objet référencé, par exemple :
• pour atteindre le bouton checkbox : document.formulaire.checkbox
• pour atteindre la zone de texte : document.formulaire.texte.

3.3 Objets de base


Les objets prédéfinis facilement accessibles sont :
• window : l'objet de plus haut niveau (fenêtre que vous voyez dans le navigateur).
• child windows : fenêtres filles de chacun des cadres.
• location : URL courante et propriétés
• history : URL précédemment visitées.
• document : propriétés du document courant, comme le titre, les couleurs de fonds, les
formulaires
j October OOOO 23242214.doc Page 19 sur 71
Systèmes Répartis INTERNET Langage HTML

• navigator : nom et version du navigateur ainsi que les types MIME et les PLUG-INS
supportés par le client.

window
|
+ --parent, frames, self, top
|
+ --location
|
+ --historique
|
+ --document
|
+ --formulaire (FORM)
| |
| éléments (text fields, textarea, checkbox, password
| radio, select, button, submit, reset)
+ --links
|
+ -- URL

Le schéma précédent illustre la hiérarchie des classes présentes dans le navigateur.

3.4 Exemple d'affichage de texte


Un des premiers exemples d'utilisation des objets du navigateur est d'afficher du texte.

La page HTML affichée est un objet de type document.


A l'objet document, VBscript a dédié la méthode "écrire dans le document", c'est la méthode
write.
Syntaxe : document.write "votre texte"

Voici un exemple de codage simple suivi du résultat obtenu dans le navigateur.


<H1>Ceci est du Html</H1>
<SCRIPT language="VBscript">
<!--
document.write "<H1>Et ceci du VBscript</H1>"
-->
</SCRIPT>

L'exemple ci-dessus montre qu'il est possible d'insérer des balises HTML (ici <H1>) afin
d'améliorer l'affichage.

Il est également possible d'afficher le contenu d'une variable :


document.write ''Le résultat est " & resultat

j October OOOO 23242214.doc Page 20 sur 71


Systèmes Répartis INTERNET Langage HTML

9. VBSCRIPT
4.1 Généralités
Déclaration du script
Pour s'assurer que le programme VBscript est bien chargé et prêt à fonctionner, on déclare
systématiquement un maximum d'éléments dans les balises d'en-tête, soit entre <HEAD> et
</HEAD> . Ce sera surtout le cas pour les procédures ou fonctions.

Dans certains cas, la balise de script est inutile. C'est le cas des ajouts de script dans les contrôles
de formulaire.

Description du langage

Les commentaires sont précédés des caractères <'> ou Rem.

Ce langage dispose d'un certain nombre de variables typées, ainsi que des opérateurs les plus
courants.
Ce langage permet de gérer des tableaux (objet Array).

4.2 Boites de message


En dehors des objets propres à la page, les deux langages mettent à la disposition des
concepteurs de pages Web des fenêtres de type "boites de messages".

Leur syntaxe d'emploi est très simple. Il suffit de préciser le type de boite désirée, message
d'information ou d'avertissement, suivi du contenu du message à afficher inséré entre des
guillemets :
• MsgBox "votre texte",
• Alert "votre texte".

Voici un exemple de chaque boite.


<SCRIPT language="VBscript">
<!--
MsgBox"Voyez-vous la page"
-->
</SCRIPT>

Le chargement de la page provoque l'affichage de la boite de message.

<SCRIPT language="VBscript">
<!--
Alert"Vous allez trop loin !"
-->
</SCRIPT>

j October OOOO 23242214.doc Page 21 sur 71


Systèmes Répartis INTERNET Langage HTML

Remarque : le chargement de la page ne se termine que si les deux scripts sont exécutés.

Boites de saisie
Les boites de saisie introduisent un début d'interactivité avec l'internaute. Ces boites permettent
de saisir une valeur (boite InputBox), mais aussi d'insérer des boutons d'actions déclenchant un
traitement donné (boite MsgBox évoluée).

La syntaxe d'emploi de la première boite est la suivante :


• InputBox "votre texte", "le titre de la boite", "la valeur par défaut"

La syntaxe d'emploi de la deuxième boite MsgBox - évoluée est la suivante :


• MsgBox "votre texte", attribut-bouton + attribut-icône, "titre de la fenêtre"

Les différentes valeurs des attributs sont respectivement :


- attribut-bouton = vbOk, vbOkCancel, vbAbortRetryIgnore,
vbYesNoCancel,
vbYesNo, vbRetryCancel
- attribut-icône = vbCritical, vbQuestion, vbExclamation, vbInformation

La boite MsgBox renvoie une valeur de retour indiquant quel bouton l'internaute a cliqué.
Le code de retour est utilisé pour lancer telle ou telle action :
• 1=OK, 2=Cancel, 3=Abort, 4=Retry, 5=Ignore, 6=Yes et 7= No.

Ce code de retour peut initialiser une variable (ici code). L'écriture du code prend la forme :
Dim code
code = MsgBox("texte" , attribut-bouton )

Voici un exemple de boite de message évoluée.


<H2>Essai de Message Evolué</H2>
<SCRIPT language="VBscript">
<!--
Dim rep
rep=MsgBox("Voulez-vous quitter ?",VbOkCancel+VbQuestion,"Quitter le site")
document.write "<H2>Vous avez répondu</H2>" & rep
-->
</SCRIPT>

Le chargement de la page provoque l'affichage de la boite de dialogue.

j October OOOO 23242214.doc Page 22 sur 71


Systèmes Répartis INTERNET Langage HTML

Une fois que la boite de dialogue a été cliquée, elle disparaît et un message apparaît dans la page.

4.3 Evènements
L'action de l'internaute sur un élément de la page Web (balise) est récupéré par un attribut
évènementiel associée à cet élément de la page Web. Cet attribut fait appel à un script à qui il
passe éventuellement des paramètres.

Passons en revue quelques événements implémentés en VBscript.


Description Evénement
Lorsque l'utilisateur clique sur un bouton, un lien ou tout autre élément. Clik

Lorsqu'un élément de formulaire devient la zone d'entrée active, il a le focus. Focus

Lorsque l'utilisateur clique hors du champ et que la zone d'entrée n'est plus Blur
active, l'élément de formulaire perd le focus.

Lorsque l'utilisateur sélectionne un champ dans un élément de formulaire. Select

Les procédures événementielles


Pour être efficace, il faut associer à ces événements des actions prévues par le concepteur. C'est
le rôle des procédures événementielles en VbScript.

La syntaxe de déclaration d'une procédure est :


nom-de-l'objet_On-Evénement()

Ainsi pour une action déclenchée par le clic de l'utilisateur sur un bouton nommé "test", la
procédure événementielle à créer sera :
test_OnClick()

Comme il s'agit d'une procédure, on utilisera Sub (Subroutine) pour débuter et End pour terminer
la déclaration :
Sub test_OnClick()
... action
j October OOOO 23242214.doc Page 23 sur 71
Systèmes Répartis INTERNET Langage HTML

...
End Sub

Ses procédures événementielles doivent être définies avant qu'elles soient appelées, donc
incorporés dans l'en-tête de la page.

Evénements et Formulaires
Il faut spécifier au navigateur à quel langage de script l'on fait référence. En effet, le langage
Javascript est assumé par défaut.

<INPUT type="button" name="test" value="Pour un test"


language="VBscript" OnClick="MsgBox 'Test réussi!'">

4.4 Procédures
En VBscript, il existe trois types de fonctions ou procédures :
• les fonctions propres à Javascript. On les appelle des "méthodes". Elles sont associées à
un objet bien particulier.
• les sous-programmes (Subroutine) qui ne retournent pas de valeur.
• les fonctions (Function) proprement dites qui peuvent retourner une valeur.

Déclaration d'un sous-programme


La syntaxe type a été donnée dans le paragraphe précédent concernant les procédures
événementielles.

L'appel d'un sous-programme


nom-du-sous-programme argument1, argument2

Déclaration d'une fonction


Pour déclarer ou définir une fonction, on utilise le mot clé Function. La syntaxe d'une déclaration
de fonction est la suivante :
Function nom-de-la-fonction(arguments)
... code des instructions ...
End Function

Retour de la valeur dans une fonction


Pour retourner une valeur, la fonction utilise un petit artifice. On affectera la valeur à une
variable dans une des lignes de code de la fonction et cette variable portera le même nom que la
fonction. Ainsi, la syntaxe serait :

Function nom-de-la-fonction(arguments)
... code des instructions ...
nom-de-la-fonction = expression
... code des instructions ...
End Function

Le langage VbScript sait alors automatiquement que c'est la valeur de la "variable" nom-de-la-
fonction qui doit être renvoyée au programme qui l'a appelé. Cette façon de faire remplace le mot
clé return d'autres langages de programmation ou de scripts.

Voici un exemple :
Dim cube
j October OOOO 23242214.doc Page 24 sur 71
Systèmes Répartis INTERNET Langage HTML

Function cube(nombre)
cube = nombre*nombre*nombre
End Function

La valeur retournée sera celle de "cube" soit nombre au cube.

Appel d'une fonction


Pour appeler une fonction, on fait apparaître le nom de la fonction à droite d'une affectation de
variable souvent appelée variable de retour. La syntaxe est :
variable-retour = nom-de-la-fonction(arguments)

Dans le cadre de notre exemple, cela pourrait être :


resultat = cube(nombre)

Les parenthèses sont optionnelles même si on transmet des arguments à la fonction.

4.5 Exemples
Dans le corps de la page, c'est la balise <object> qui est utilisée par le langage Vbscript. Cet
objet provient du monde Windows NT, et présente les caractéristiques d'un objet style langage
de programmation objet Delphi.

L'attribut CLASSID est initialisé avec un numéro d'identification, numéro issu de la base de
registre de Windows.

Le caractère & est un caractère de concaténation.

Prenons l'exemple d'un bouton cliqué qui renvoie un message sous forme de texte plus loin dans
la page.
<script LANGUAGE="VBScript">
<!--
Sub bouton_Click()
label.Caption = "coucou me revoilou"
end sub
-->
</script>

<object ID="bouton" WIDTH="148" HEIGHT="60"


CLASSID="CLSID:D7053240-CE69-11CD-A777-00DD01143C57">
<param name="Size" value="3911;1582">
<param name="FontCharSet" value="0">
<param name="FontPitchAndFamily" value="2">
<param name="ParagraphAlign" value="3">
</object>

</p>
<p>&nbsp;</p>
<p>

<object ID="label" WIDTH="159" HEIGHT="60"


CLASSID="CLSID:978C9E23-D4B0-11CE-BF2D-00AA003F40D0">
</object>
j October OOOO 23242214.doc Page 25 sur 71
Systèmes Répartis INTERNET Langage HTML

Un seul objet apparaît dans la page au chargement : l'objet "bouton". Implicitement, le script
déclaré au préalable est relié au bouton, premier objet décrit dans cette page. Le fait de cliquer
sur ce bouton déclenche l'exécution du script, et donc l'affichage du message à l'endroit ou est
positionné le deuxième objet de cette page, l'objet "label".

Pour terminer une étude sommaire, il conviendrait d'approfondir les notions suivantes :
• les types de variables et opérateurs,
• les contrôles de formulaires,
• les tableaux,
• les messages d'erreurs.

10. JAVASCRIPT
5.1 Généralités
Ce langage admet plusieurs types de variables : nombres, booléens, chaînes de caractères,
tableaux, tableaux associatifs.
Il existe aussi des types prédéfinis : string, math, date,…

Les noms des variables commencent par des lettres ou par le caractère souligné,…

Les expressions sont de trois ordres :


• arithmétiques,
• chaînes de caractères,
• booléennes.

Il existe des expressions conditionnelles, des opérateurs...

Les instructions de contrôle habituelles sont disponibles :


• for…,
• break et continue,
• if …else…,
• while

Pour insérer des commentaires, deux possibilités existent suivant que le commentaire s'étend sur
une ou plusieurs lignes :
• // pour une ligne,
j October OOOO 23242214.doc Page 26 sur 71
Systèmes Répartis INTERNET Langage HTML

• /* …*/ pour plusieurs lignes.

5.2 Fonctions
Il est possible de regrouper des instructions au sein d'une fonction.

La fonction est définie sous la forme :


nom ( param1, param2,...;) {
...
}

Par convention, toutes les fonctions sont déclarées à l'intérieur du couple de balises <HEAD>
</HEAD>, de façon à permettre au navigateur de préparer l'exécution de ce script dès le
chargement de la page (si la balise body contient l'attribut évènementiel onLoad par exemple).

La fonction sera donc insérée entre un couple de balises <SCRIPT> </SCRIPT> .


L'appel à cette fonction est effectuée dans le corps de la page, soit au niveau du corps lui-même
(balise body), soit au niveau d'un bloc de cette page (formulaire par exemple), ou autre, par un
appel du genre nom (param1, param2).

Une fonction peut appeler des arguments de tout type, ainsi que des fonctions (appels récursifs
des fonctions possibles).

Une fonction retourne une valeur quand elle rencontre le mot clé return suivie de la valeur
retournée qui peut être de tout type.

5.3 Evènements
Les événements sont les résultats d'une action de l'utilisateur, comme par exemple un clic sur l'un
des boutons de la souris.
La syntaxe de ces événements est : <balise eventHandler="code JavaScript">
où balise est le nom d'une balise et eventHandler est le nom d'un événement.

Par exemple, pour utiliser la fonction exemple quand un utilisateur appuie sur un bouton :

<input type=button value=Essai onClick="exemple(this.form)">

Une fonction ou bien du code JavaScript pur peut être ainsi inséré comme valeur de l'évènement.

Voici un exemple de code pur inséré comme argument d'un attribut évènementiel :
<input type=button value=Essai onClick="alert("Page en construction")">

Liste des événements disponibles :


• onBlur : 2ème clic à l'extérieur de la zone active
• onClick : clic sur une zone hypertexte
• onChange : suite à changement effectué
• onFocus : clic sur zone active
• onLoad : charge la page dans le navigateur
• onMouseOver : au passage de la souris sur la zone
• onSelect : sélection d'un élément de formulaire
• onSubmit : soumission d'un formulaire
j October OOOO 23242214.doc Page 27 sur 71
Systèmes Répartis INTERNET Langage HTML

• onUnload : fermeture de la page

Remarque :
Les attributs évènementiels des balises ne sont pas les seuls à pouvoir appeler les scripts. En
effet, l'attribut href de la balise ancre le permet en précisant au préalable le type de langage.

Voici deux exemples :


<a href="javascript:alert('Page en Construction')">
ou
<a herf="javascript:window.open('...')">

5.4 JavaScript et HTML


Le langage JavaScript peut être implanté dans une page HTML de trois façons :
• par la balise SCRIPT présente dans le corps de la page
• par l'intermédiaire des événements agissant sur des objets ou des scripts déclarés dans
l'en-tête
• en faisant référence au code écrit dans un fichier séparé (possible uniquement à partir de
la version 3 de Nestcape).

Balise SCRIPT
<SCRIPT LANGAGE="JavaScript">
code
</SCRIPT>

Le code placé à l'intérieur d'un couple de balises SCRIPT est évalué après le chargement de la
page.

La balise SCRIPT peut prendre plusieurs arguments dont celui précisant la version du langage
(à partir de la version 3.x et + de Netscape) :
LANGAGE="JavaScript1.1"

Notons que le couple de balises <NOSCRIPT> </NOSCRIPT> permet d'encadrer le texte qui
serait affiché si le langage JavaScript n'est pas compris par le navigateur.

Le premier exemple permet de lancer une nouvelle instance de navigateur.


<BODY> <SCRIPT LANGUAGE="JavaScript"><!--
window.open("imgalt.html","Nouvelle","toolbar=1,location=1,directories=1,menuBar=1,scro
llbars=1,resizable=1,width=500,height=300");
//--> </SCRIPT> </BODY>

Evènements
Le premier exemple est celui d'un script qui s'exécute au chargement de la page.
<HEAD> … # bannières
<SCRIPT LANGUAGE="JavaScript">
<!-- debut du script … // fin du script -->
</SCRIPT></HEAD>
<BODY onLoad="fonction1(xxx);fonction2(xxx) ;…" onUnload="clearTimeout(xx);….">
Le deuxième exemple s'applique à une boite de sélection d'un formulaire.
j October OOOO 23242214.doc Page 28 sur 71
Systèmes Répartis INTERNET Langage HTML

<BODY> <SELECT NAME="…" onChange ="if fonction(xxx)… </SELECT>

Le troisième exemple s'applique au survol d'un lien.

<BODY><A HREF="…" onMouseOver="if (fonction(xxx)… onMouseOut= "…>

Dans un fichier source *.js

Uniquement à partir de la version 3 de Netscape, il est possible de mettre le code des


programmes JavaScript dans un fichier annexe, en utilisant la balise SCRIPT comme suit :

<SCRIPT LANGAGE=JavaScript SRC=source.js> </SCRIPT>

Il existe une contrainte côté serveur HTTP. Ce dernier doit être configuré avec un type MIME
"application/x-javascript"(fichiers d'extension js).

11. Insertion d'un Script


Sans programmer et se lancer à corps perdu dans l'étude d'un des langages de script, il est
possible à un internaute curieux de fureter sur la Toile en vue de repérer des scripts produisant
des effets dynamiques attractifs sur une page Web, scripts qu'il va vouloir insérer dans son site
en cours d'élaboration.

La solution consiste pour lui à aller dans le code source de la page pour distinguer le script à
l'origine de cet effet dynamique des autres scripts insérés dans cette même page.
Dans un deuxième temps, il va copier l'intégralité du script dans sa page Web.
Dans un troisième temps, il va devoir adapter si besoin est les paramètres du script à ses propres
besoins.

Lors du copier-coller, il faut prendre bien soin de copier l'ensemble du script :


• la déclaration du script et de ses fonctions dans l’en-tête,
• ses appels dans le corps de la page,
• ainsi que les balises où les scripts s'exécutent.

Prenons l'exemple des fonctions "Date" et "Temps" que l'on veut insérer dans la page
"sommaire" du site. Dans l'exemple qui suit, les fonctions sont activées à travers des éléments de
formulaire de type "champ de texte".

Examinons de plus près le code source de la page :


<HTML><HEAD>
j October OOOO 23242214.doc Page 29 sur 71
Systèmes Répartis INTERNET Langage HTML

<SCRIPT LANGUAGE="JavaScript">
<!-- début du script
var ddt1, delai;
function debuteTemps1(delai1) {
var hhmmss = " ", min, sec;
delai = delai1;
adate = new Date()
hhmmss += adate.getHours();
min = adate.getMinutes();
if (min < 10) hhmmss += ":0" + min;
else hhmmss += ":" + min;
sec = adate.getSeconds();
if (sec < 10) hhmmss += ":0" + sec;
else hhmmss += ":" + sec;
hhmmss = " " + hhmmss;
document.Temps11.heure.value = hhmmss;
ddt1 = setTimeout("debuteTemps1(delai)",delai1);
}
// Fin du script -->
</SCRIPT>

<SCRIPT LANGUAGE="JavaScript">
<!-- debut du script
var dd1, delai;
function debuteDate1(delai1) {
var adate, date, amois;
delai = delai1;
adate = new Date();
date = adate.getDate();
amois = adate.getMonth()+1;

if (amois == 1) date += " janvier";


else if (amois == 2) date += " février";
else if (amois == 3) date += " mars";
else if (amois == 4) date += " avril";
else if (amois == 5) date += " mai";
else if (amois == 6) date += " juin";
else if (amois == 7) date += " juillet";
else if (amois == 8) date += " août";
else if (amois == 9) date += " septembre";
else if (amois == 10) date += " octobre";
else if (amois == 11) date += " novembre";
else if (amois == 12) date += " décembre";
if (adate.getYear() > "99")
date += " " + adate.getYear();
else date += " " + (1900 + adate.getYear());
date = " " + date;
document.Temps21.date.value = date;
dd1 = setTimeout("debuteDate1(delai)",delai1);
}
// fin du script -->
</SCRIPT>
</HEAD>

<BODY onLoad="debuteDate1(10000);debuteTemps1(1000)"
onUnload="clearTimeout(dd1);clearTimeout(ddt1)">

<FORM NAME="Temps21">
j October OOOO 23242214.doc Page 30 sur 71
Systèmes Répartis INTERNET Langage HTML

<INPUT TYPE="text" NAME="date" SIZE="18"><BR></FORM>

<FORM NAME="Temps11">
<INPUT TYPE="text" NAME="heure" SIZE="12"><BR></FORM>

</BODY></HTML>

Cet exemple permet de bien discerner les trois parties d'un script :
• l'endroit où le script va s'exécuter, ici un formulaire par script repéré par son nom, ainsi que
le nom de son élément
• à quel moment ce script va s'exécuter, ici au chargement de la page (attribut Onload de la
balise body); le concepteur n'oublie de désactiver le script au déchargement de la page.
• enfin, si le script utilise des fonctions, la zone de déclaration de ces fonctions.

Il manque une des composantes du script et ce dernier ne s'exécute pas.


Ce script ne nécessite aucune adaptation une fois l'insertion faite.

Conclusion
Si l'insertion d'un script oblige le concepteur à adapter en profondeur les variables et les
fonctions du script à sa page, si ce dernier éprouve quelque difficulté dans l'entreprise, il lui alors
est conseillé de consulter un livre ou un cours plus approfondi sur le sujet.

Bibliographie
Edition Année Titre Auteurs
O’Reilly 2000 Javascript précis & concis David Flanagan
Eyrolles 2000 Javascript professionnel N. MacFarlane
Eyrolles 2000 Javascript : Totale Initiation() Milan
OEM 2001 Javascript – Les références du J. Engels
programmeur
O’Reilly 2001 VBScript Pocket Reference P.Lomax M.Childs
Wrox Press 1999 VBScript Programmer's Reference S.Clark A.De Donatis
A.Kingsley-Hughes B.Matsik

j October OOOO 23242214.doc Page 31 sur 71


Systèmes Répartis INTERNET Langage HTML

Chapitre 3 : Applets Java - Contrôles ActiveX


L'objet du présent chapitre est d'effectuer dans le même module une première présentation
portant autant sur les Applets Java que sur les Contrôles Active X.

Ces deux catégories de programmes, hébergés par le serveur Web, sont mentionnés et appelés
par la page Web visitée par l'internaute. Ces programmes, une fois sollicités, sont téléchargés sur
la station de l'internaute et exécutés.

Ces techniques ont pour but d'améliorer la présentation des pages Web et d'y injecter, après
l'insertion de scripts clients (chapitre précédent), une deuxième dose d'interactivité avec le client
(ou l'internaute) en question.

A la fin du chapitre, l'internaute ne sera pas en mesure d'élaborer ce genre de programme, ce qui
nécessiterait plusieurs chapitres de cours ainsi qu'une plate-forme de développement non
accessible à tout internaute. Il sera néanmoins en mesure de copier intelligemment ces
programmes issus de la Toile et de les insérer dans son site.

1. Principe de fonctionnement
Le principe décrit ci-dessous correspond à celui d'une applet Java. Il est pour ainsi dire le même
pour un contrôle active X.

Serveur
WEB
Web
HTTP

Pages
HTML

Lorsque le terminal Web (navigateur) affiche la page Web, l’applet Java mentionnée dans cette
page est téléchargée puis exécutée par l’interpréteur de la machine cliente (machine virtuelle).
Cet interpréteur n'est autre que le navigateur la plupart du temps.

Le plan du chapitre consiste à étudier en premier lieu les Applets Java, puis en second lieu les
Contrôles Active X.
j October OOOO 23242214.doc Page 32 sur 71

Applets Java
Systèmes Répartis INTERNET Langage HTML

2. Applets Java
Une Applet Java est une application légère écrite en langage de programmation Java, application
qui s'exécute côté client, c'est-à-dire chez l'internaute visitant le site.
Si le terme anglophone est Applet, le français utilise deux termes que nous rencontrerons dans ce
chapitre : applette et appliquette (éditeur Dreamweaver).
Effectuons pour commencer une présentation de ce langage de programmation.

2.1 Présentation sommaire du langage JAVA

Le langage JAVA est un langage de programmation orienté objet, semblable au C++ :


utilisation d’objets et constitution de classes avec héritage, etc... C'est un langage compilé.

Le langage a été construit pour avoir une interaction directe et sécuritaire entre le serveur et
l'internaute.

Les développeurs JAVA peuvent écrire ces mini-applications ou APPLETS JAVA.


Une applette JAVA peut être téléchargée de n'importe quel serveur Web et peut fonctionner sur
toutes les plates-formes. Le langage Java est un langage client-serveur indépendant des plates-
formes matérielles.

2.2 Fonctionnement d'une applet

PROG
JAVA rubik.java source

COMPILATEUR JAVA
SERVEUR rubik.class P-code
WEB

INTERNET

M.V. INTEL M.V. ALPHA M.V. MOTOROLA

INTEL ALPHA MOTOROLA


j October OOOO 23242214.doc Page 33 sur 71
Systèmes Répartis INTERNET Langage HTML

Le schéma ci-dessus exprime le cycle de vie d'un applet Java (ou applette ou appliquette),
depuis son élaboration par le programmeur Java, en passant par sa publication par le concepteur
de site Web, jusqu'à son exécution par le navigateur de l'internaute.

Programmeur Java
I. Il dispose d'une plate-forme de développement comportant au minimum un compilateur ainsi
que les bibliothèques publiques. Il élabore un fichier source ayant pour extension *.java.
II. A l'aide du compilateur jdk, il transforme le fichier source en un fichier pseudo-compilé ou P-
code ayant pour extension *.class, et possédant la particularité d'être indépendant à ce moment là
des plates-formes matérielles.

Concepteur de Site Web


III. Il insère dans ses pages Web des appels aux applettes Java (balise applet). Ces applettes sont
intégrés au site et sont donc publiés avec les autres pages du site. Ces applettes restent distinctes
du code HTML, donc des pages Web où ils sont invoqués.

Internaute
IV. La station de l'internaute, via son navigateur, possède une machine virtuelle adaptée à sa
plate-forme matérielle. Cette machine est donc capable, une fois le fichier *.class téléchargé,
d'effectuer une deuxième compilation de ce fichier spécifique à cette plate-forme d'exécution,
avant d'exécuter ce dernier.
L'internaute n'a pas d’accès au code source depuis le navigateur.

Il existe des machines virtuelles java externe au navigateur : ce sont les JRE.

Dans le cas général, le navigateur compile et exécute l'applette JAVA une fois que la page Web
est affichée.
La fonctionnalité « just-in-time » autorise la machine virtuelle à compiler au fur et à mesure de la
réception de(s) (la) page(s).

2.3 Applettes côté programmation

Ce paragraphe ne prétend pas enseigner le langage Java de A à Z. il permet d'avoir une première
vue du langage, et de son environnement de développement.

Bibliothèques
Il est possible d'utiliser des codes JAVA déjà développés et présents dans des bibliothèques
publiques : les AWT (Abstract Windows Toolkit).
Il est possible de développer ses propres codes JAVA.

Sources Java
Voici un premier exemple de source JAVA :

Import java.applet.Applet ;
Public class x extends Applet
{
}

j October OOOO 23242214.doc Page 34 sur 71


Systèmes Répartis INTERNET Langage HTML

Ce programme a besoin d'être pseudo-compilé par un compilateur spécifique JAVA qui crée un
programme x.class (nom donné à la classe = x).
Si le programme est contenu dans le fichier x.java, la classe x est explicitement rendue publique.

Le canevas précédent est important car il est le programme minimal que nous devons écrire pour
faire fonctionner les APPLETS.

La première chose que fera une procédure JAVA est de s'initialiser, ce que nous pouvons faire
par la procédure suivante :

Import java.applet.Applet;
Public class nouveau extends Applet
{ public void init( )
{ resize(250, 300);
}
}

La fonction resize est une classe prédéfinie qui redéfinit la taille de la zone réservée à l'APPLET
par sa largeur et sa hauteur.

Nous sommes presque en mesure de faire le programme d'affichage de la chaîne de caractères


Hello World .

Import java.applet.Applet;
Import java.awt.Graphics ;
Public class Hello extends Applet
{ public void init( )
{ resize(250, 300);
}
public void paint(Graphics g)
{ g.drawString("Hello World", 10, 50);
}
}

Ce programme affiche le message Hello World aux coordonnées 10, 50.


Remarquons l'importation de la classe Graphics qui se trouve dans java\awt\Graphics et
l'utilisation de la fonction drawString qui prend en paramètres le mot à afficher et les
coordonnées de ce mot.

L'environnement de compilation
Il existe un environnement de compilation des programmes Java : compilateurs, débogueurs et
bibliothèques (3Mo de fichiers compressés sur le site de Javasoft www.javasoft.com ).

Sur le site de Sun, notons la présence du compilateur Java jdk1.2.

De façon commune aux environnements SUN et Windows 32 bits, le compilateur JAVA se


nomme javac.
Son appel se fait par la syntaxe suivante (sous l'interpréteur de commandes) : javac
fichier.java.
Il est important que l'extension du fichier soit java en quatre lettres.

j October OOOO 23242214.doc Page 35 sur 71


Systèmes Répartis INTERNET Langage HTML

Le résultat de la compilation sera un fichier avec extension .class ou pseudo-code ou P-code.


En conclusion, pour créer une Applet Java, il convient de se reférer à un cours sur le langage de
programmation Java permettant l'importation de la bibliothèque spécifique aux applettes Java :
java.applet.Applet.

2.4 Applettes côté client


Fonctions du navigateur

Une applette Java se repère par la présence de la balise <applet> dans une page Web. Au
moment où le navigateur rencontre la balise <applet>, le programme JAVA mentionné par cet
applette est stocké sur le serveur Web qui héberge le site.
Le navigateur, vis à vis de cet Applet, effectue trois opérations.
Dans un premier temps, il télécharge l'applette sous forme de p-code ou fichier *.class depuis le
serveur Web dans le répertoire cache de la machine cliente du navigateur.
Dans un deuxième temps, la machine virtuelle intégrée au navigateur effectue une deuxième
compilation de ce fichier *.class, compilation spécifique à la plate-forme matérielle d'exécution.
Dans un troisième temps, il exécute ce dernier.

Description HTML de l'Applette


D'une manière générale, la syntaxe de la balise <applet> est la suivante :
<applet
Valeurs possibles = {left|center|right |top|middle|bottom| texttop|
alignemen
align = absmiddle|baseline|absbottom}
t
Alignement de l'Applet par défaut à gauche.
Texte alternatif à l'image de l'Applet au cas où le navigateur ne
alt = texte
supporte pas les images et les Applets (optionnel).
code = texte Nom du fichier *.class sollicité.
Adresse de l'Applet ou du fichier *.class, relative si ce dernier est
codebase = URL
présent sur le site, ou adresse URL du site hébergeant l'Applet.
Spécifie le nom de l'Applet et permet la communication avec d'autres
name = texte
Applets situés sur la même page (optionnel).
width = nombre Donne la largeur initiale en pixel de la surface où l'Applet sera affichée.
Donne la hauteur initiale en pixel de la surface où l'Applet sera
height = nombre
affichée.
vspace = nombre Marge verticale de l'Applet (optionnel).
hspace = nombre Marge horizontale de l'Applet (optionnel).
> balise <param> répétée autant de fois que le permet le développeur de l'application (applet).
</applet>

L'attribut code est l'attribut obligatoire le plus important.


Les deux attributs de dimensionnement (width et height) sont tout aussi importants et
obligatoires.
L'attribut codebase est optionnel mais nécessaire si l'applette ne se situe pas sur le site Web au
même endroit que la page Web appelante. Si cet attribut n'est pas défini, l'URL du document
origine sera utilisée.

Remarque :
L'attribut code ne décrit que le nom de l'applette et non son adresse de stockage.

j October OOOO 23242214.doc Page 36 sur 71


Systèmes Répartis INTERNET Langage HTML

L'attribut codebase ne décrit que l'adresse de stockage (en général le répertoire "applet") et non
le nom de l'applette.

Deux cas de figure se présentent :


• Soit l'applette est livré comme une boite noire, sans aucune possibilité de modifier le
comportement de l'applette ;
• Soit l'applette est livré avec un certain nombre de points d'entrée permettant au concepteur de
pages Web de modifier certaines propriétés de l'applette.

A l'intérieur de la balise applet, le développeur de cette application peut permettre aux


internautes de modifier les propriétés de l'applette (paramètres d'affichage en général), grâce à la
présence de la balise <param> .
Cette balise est utilisée sans balise de fermeture non seulement avec la balise applet mais aussi
avec la balise object (Vbscript, Contrôles Active X). Elle sert à spécifier respectivement les
propriétés de l’application Java ou de l’objet.

<param
name = texte Spécifie un nom à la propriété.
Spécifie, pour les contrôles de type numérique ou textuel, la valeur par
value = valeur
défaut du contrôle.
>

Voici deux exemples.


Applette sans accès aux propriétés

<applet code=rubik.class codebase=applets width=120 height=120 align=middle>


</applet>

Illustration :

Applette avec accès aux propriétés


<applet code="Affiche.class" width=600 height=100>
<param name="cfr" value="0">
<param name="cfv" VALUE="0">
<param name="cfb" VALUE="255">
<param name="boucler" VALUE="oui">
<param name="URLDefaut" VALUE="http://www.iis.dmsi.esat.mil">
<param name="texte1" VALUE="Cliquez ici pour voir le site de l'ESAT">
<param name="style1" VALUE="italique">
<param name="taille1" VALUE="36">
<param name="caractere1" VALUE="Helvetica">
<param name="direction1" VALUE="3">
<param name="delai1" VALUE="30">
j October OOOO 23242214.doc Page 37 sur 71
Systèmes Répartis INTERNET Langage HTML

<param name="ctr1" VALUE="255">


<param name="ctv1" VALUE="255">
<param name="ctb1" VALUE="0">
<param name="url1" VALUE="http://www.esat.mil">
<param name="texte2" VALUE="Site de la DMSI">
<param name="taille2" VALUE="36">
<param name="caractere2" VALUE="Helvetica">
<param name="direction2" VALUE="1">
<param name="style2" VALUE="italique">
<param name="delai2" VALUE="4">
<param name="ctr2" VALUE="0">
<param name="ctv2" VALUE="255">
<param name="ctb2" VALUE="0">
<param name="url2" VALUE="http://www.iis.dmsi.esat.mil">
</applet>

Résultat :

2.5 Applettes côté serveur


Répertoire de publication
Si des pages Web d'un site font appel aux applettes Java, le concepteur de site peut :
• soit les ranger à l'endroit où la page Web est stockée,
• soit rassembler toutes les applettes dans un répertoire.

Ce répertoire, par convention, peut prendre tout simplement le nom "applet(s)".

Certaines applettes n'autorisent pas n'importe quelle localisation : l'éditeur Frontpage par
exemple oblige la présence des applettes dans un répertoire déterminé (_fpclass).

Permissions
Les applettes Java bénéficient au niveau de la publication des même droits que les pages Web
classiques.

2.6 Insertion d'une Applette

La première façon de rendre dynamique une page Web sans se lancer dans l'étude exhaustive du
langage Java est de repérer des applettes intéressantes sur des pages Web visitées, ou des sites
spécialisés.

L'insertion d'une applette Java se réalise en trois étapes :


• Récupération de l'applette
• Insérer l'applette dans son site
• Tester son comportement dans le navigateur

j October OOOO 23242214.doc Page 38 sur 71


Systèmes Répartis INTERNET Langage HTML

Récupération de l'Applette
Il existe deux méthodes :
a) récupérer une applette de la Toile,
b) utiliser une applette d'un éditeur avancé style FrontPage.

La première méhode plus classique consiste à visualiser une page Web et repérer une applette
intéressante, puis exécuter les instructions ci-dessous séquentiellement :
a.1) Depuis le navigateur, afficher le code source de la page Web pour repérer le nom du
fichier *.class sollicité par l’applette

a.2) Depuis l'explorateur sous Windows, au niveau du cache Internet de votre station
(dossier "Temporary Internet Files" du profil de connexion sous Windows NT), s'aider de
la date (ou de l'extension .class) pour récupérer :
 le(s) fichier(s) *.class à insérer dans votre site (copier-coller sous le dossier
applet(s) par exemple). Il se peut que le P-code sollicite pour son exécution
d'autres applettes que celle mentionnée dans la page Web.
 éventuellement selon les cas les images associées, les fichiers de données au
format .txt ou .dat, etc... En bref, tout l'environnement possible d'exécution de
cette applette !

a.3) Depuis le code source de la page Web, récupérer le contenu complet du source inséré
entre les deux balises <applet> et </applet>, y compris les propriétés paramétrables de
l’applette, et coller l'ensemble dans le code source de la page Web où l'on insère cette
applette.

a.4) Si des points d'entrée paramétrables existent, adapter les valeurs de ces paramètres
aux résultats désirés. Dans le cas d'un menu, ou d'une bannière, il est possible d'ajouter
(ou de supprimer) respectivement une rubrique de menu ou un message affiché. Si l'on
récupère cette applette sur un site consacré à Internet, le site (plus rarement l'auteur de
l'applette) peut proposer un texte explicatif (fichier .txt).

La deuxième méthode consiste à utiliser les bibliothèques d’Applets de l’Editeur avancé. Dans
ce cas, il ne faut pas hésiter à prendre le répertoire complet de l’applette java.

Spécificités Frontpage :
 Les applettes se trouvent sous "Microsoft Frontpage/_fpclass". Il est conseillé de
copier le répertoire de l’applette comme ci-dessus.

Conseil : NE PAS TOUCHER AU NOM DU FICHIER « *.CLASS ».

3. Contrôles Active X
3.1 Présentation
Définitions
Les contrôles ActiveX sont parmi les nombreux types de composants qui utilisent la technologie
COM pour fournir une interopérabilité avec les autres types de composants et services COM.
Les contrôles ActiveX représentent la troisième version des contrôles OLE (OCX) et fournissent
un nombre d'améliorations plus particulièrement destinées à faciliter la distribution des
j October OOOO 23242214.doc Page 39 sur 71
Systèmes Répartis INTERNET Langage HTML

composants sur des réseaux haut-débits et à assurer l'intégration des contrôles au sein des
navigateurs.
"ActiveX est une plate-forme d'intégration ouverte qui fournit aux développeurs, aux utilisateurs
et aux réalisateurs de Web le moyen le plus rapide et le plus facile de créer de nouvelles
applications et de nouveaux contenus pour Internet et pour les Intranets."
Microsoft présente donc son produit ActiveX comme un outil d'intégration de technologies
permettant de créer des pages interactives sur le Web.
L'idée de départ a été de profiter de l'expérience de Microsoft en matière de partage entre
diverses applications (la technologie des DLL, OLE et autres VBX) pour la transposer sur le
Web en recréant tout un environnement dédié (au départ) à Windows.

Rappel sur la technologie OLE


Tout utilisateur d'un PC sous Windows connaît la facilité d'utilisation des liens OLE permettant,
par exemple, d'afficher un tableau Excel dans un document Word. Avec la même facilité,
Microsoft permet d'afficher dans un document HTML un objet qui peut être un texte Word, ou
un document Excel.
Ceci est très séduisant lors de démonstrations, mais il n'est pas inutile de rappeler que :
• les liens OLE depuis un serveur HTTP vers un client demandent des ressources réseaux non
négligeables,
• les liens OLE ne sont utilisables que sur des PC dotés de Windows même si les architectures
DCOM permettant le partage d'objets OLE font leur apparition sur des machines UNIX
• les liens OLE nécessitent que le logiciel natif du lien OLE, soit présent sur la station cliente.
En d'autres termes, le document Excel ne s'ouvrira dans Internet Explorer que si Excel est
présent sur le disque de l'utilisateur.

Apparté sur la technologie COM


La technologie COM (Component Object Model ou Modèle objet de composant) permet le
partage d’objets génériques. Elle a été utilisée pour créer une spécification pour les composants
OCX.
Cette technologie COM permet de séparer l’implémentation d’un objet des fonctions que cet
objet effectue. Les fonctions qu’il effectue sont décrites dans ses interfaces. Une interface est une
méthode d’accès à un ensemble de fonctions logiquement apparentées, que peut implémenter un
objet. Chaque classe d’objet possède un identificateur (ID) de classe unique (CLSID) qui prend
en charge un ensemble arbitraire d’interfaces.
Elle permet à une application de demander à un objet s’il prend en charge les fonctions lui
permettant d’effectuer telle ou telle tâche. L’objet répond alors par oui ou par non. Ce modèle
objet est très puissant car il permet à une application de déterminer cela en phase d’exécution.

Un objet COM est implémenté par le biais de plusieurs méthodes. Il peut être compilé en une
DLL ou un OCX s’exécutant dans le même espace de processus que l’application qui l’appelle.
Il peut également être lancé dans son propre espace, sous forme d’exécutable compilé. Avec
COM distribué (DCOM), l’objet peut s’exécuter sur une machine différente, n’importe où dans
le monde. Les services système COM simplifient l’appel d’objets COM, même si le code
d’implémentation se trouve dans un processus ou sur une machine différente.

Fonctionnement d’un contrôle Active X


Le schéma ci-dessous explique le fonctionnement d'un contrôle Active X.

j October OOOO 23242214.doc Page 40 sur 71


Systèmes Répartis INTERNET Langage HTML

Lorsque le navigateur Internet Explorer rencontre un appel à un contrôle ActiveX, celui-ci est
situé initialement sur un serveur. Le navigateur commence par explorer la machine de
l'internaute pour voir si le contrôle n'est pas présent en local. Si le contrôle est absent ou d'une
version plus ancienne, tous les fichiers nécessaires seront téléchargés et copiés sur votre disque
dur.

Et à la différence des applettes Java, les composants ActiveX resteront sur le disque dur de
l'internaute et feront partie intégrante de son environnement Windows.

Contrôle ActiveX
ou applet
Java téléchargé
contenu HTML HTTP
(textes et images) HTTP server

Contrôle ActiveX
or Java applet
(D)COM
ActiveX Script COM objects
or ActiveX Controls

COM objects
or ActiveX Controls
Sécurité
Ce fonctionnement peut poser des problèmes de sécurité. Microsoft utilise un système de source
"sûre" ou "d'autorité certifiée" (Certificate Authority). Chaque composant est en quelque
manière "signé" de manière à garantir son origine. La signature de code (Authenticode) est
reconnue depuis la version 3.0 d'Internet Explorer. Ce procédé respecte les normes de
certification X509. Ceci représente un accord contractuel entre les différentes autorités de
certificats, ce qui permet aux administrateurs comme aux utilisateurs de mettre en place une
politique de confiance.
De toute façon, le navigateur Internet Explorer permet par l'intermédiaire des paramètres de
sécurité (options du navigateur) de fixer non seulement une politique d'acceptation, de rejet ou de
confirmation avant exécution des composants Active X mais aussi une politique à l'égard des
composants certifiés ou non.

3.2 Eléments de la plate-forme


Active X est un ensemble de protocoles que Microsoft s’engage à supporter et que nous pouvons
énumérer comme suit :
 Support des plates-formes PC Window 3, Windows 95-98, Windows NT
et Mac OS (PowerPC et 68xxx);

j October OOOO 23242214.doc Page 41 sur 71


Systèmes Répartis INTERNET Langage HTML

• Active X (ActiveX Controls, ActiveX Documents, ActiveX Scripting, ActriveX Server


Framework).

La technologie Active X propre à Microsoft se décompose en quatre éléments que nous allons
expliciter :
• Les Contrôles ActiveX (seul objet du chapitre) qui permettent de manipuler des
objets dans le navigateur. Ces objets peuvent être développés par des tierces parties.

• Les Documents ActiveX : c’est l’un des points forts actuels de l’architecture
Active X. Active X Document réalise le partage de documents Windows (Word, Excel,
lien OLE etc..) dans les pages HTML. Cette fonctionnalité permet ainsi d’afficher des
documents existants depuis la version 3 d'Internet Explorer, mais elle est très coûteuse en
temps d’exécution et en bande passante.

• ActiveX Scripting : autre appellation de VBScript et de JavaScript selon Internet


Explorer.
• ActiveX Server Framework : communication avec les applications externes.

Programmes de Scripts
Tout comme dans l'achitecture Netscape One qui garantissait que les Plug-Ins pouvait être
appelés par des procédures JavaScript, les contrôles ActiveX peuvent être manipulés par des
scripts qui prennent alors le nom de Active Scripts.

Navigateurs
Internet Explorer permet d'agir sur les contrôles ActiveX par simple clic sur le bouton droit de
votre souris : démarrer, arrêter, pause, etc.., ainsi qu'une ligne propriété permettant de paramétrer
le contrôle ActiveX (voir exemple d’insertion).

Les contrôles ActiveX peuvent être lus par Netscape par l'entremise d'un plug-in fourni par
Microsoft. Certains navigateurs Web n'affichent pas les contrôles ActiveX.

Langages
Les contrôles ActiveX peuvent être écrits dans différents langages de programmation comme C,
C++, Pascal (Delphi), Visual Basic 5 ou Microsoft Visual J++.

Dans le cadre actuel des cours de la DMSI, pour créer un contrôle Active X, il convient de se
reférer au cours Delphi Système ou Delphi avancé.
Avec Delphi, il est très simple de créer des composants ActiveX, même à partir d’un composant
visuel Delphi déjà existant. L’application hôte peut alors manipuler les propriétés et répondre
aux événements tout comme une application Delphi avec des composants visuels. Vous pouvez
également ajouter de nouveaux événements, propriétés et méthodes au composant ActiveX pour
lui donner des fonctionnalités supplémentaires.

Fichiers
Les contrôles ACTIVE X utilisent soit des objets COM instanciés de classes de composants
Active X, soit des bibliothèques compilées en fichiers externes aux extensions .ocx.
Certains sont fournis avec le système d'exploitation Windows mais d'autres plus spécifiques ne le
sont pas.
j October OOOO 23242214.doc Page 42 sur 71
Systèmes Répartis INTERNET Langage HTML

Utilité
Ces contrôles Active X peuvent être réutilisés comme composants de base des applications
situées sur un serveur : pages ASP, serveur de transaction, applications clients/serveurs multi-
niveaux.
Les contrôles sont non seulement acceptés sous l'environnement Windows mais aussi sur
MacIntosh et certains UNIX (Sun Solaris).

3.3 Les balises

L'appel aux composants ActiveX est inséré dans une page Web par une combinaison d'éléments
appartenant au langage HTML et au langage Vbscript : plus spécialement par la balise
<OBJECT> ... </OBJECT>.

Cependant, deux balises existent pour insérer des appels aux contrôles Active X au sein d'une
page Web : la balise <object> (Microsoft), et la balise <embed> (Netscape).

Balise <object>
Ce bloc permet d'inclure des objets dans un document HTML. Ces objets peuvent être associés à
une vidéo, une application multimédia ou un contrôle ActiveX.

<object
Spécifie un nom qui permet d'identifier l'objet ActiveX pour les
name = texte
scripts.
id = texte Utilisé pour transmettre des informations entre les contrôles ActiveX.
classid = texte Identifie le contrôle ActiveX pour le navigateur.
Adresse du fichier *.ocx, application appelée par la balise, suivie
codebase = URL
d'autres renseignements comme le numéro de version.
Identifie une adresse URL où l'objet pourra importer les données
data = URL
nécessaires à son initialisation.
Permet de déclarer l'objet sans l'exécuter (utile pour créer des liens
declare avec un autre objet plus bas dans le document ou pour spécifier les
paramètres d'un autre objet).
width = nombre Donne la largeur initiale en pixel de la surface où l'objet sera affichée.
height = nombre Donne la hauteur initiale en pixel de la surface où l'objet sera affichée.
border = nombre Spécifie la largeur de la bordure de l'objet.
vspace = nombre Marge verticale de l'objet (optionnel).
hspace = nombre Marge horizontale de l'objet (optionnel).
alignemen Valeurs possibles = {left|center|right |top|middle|bottom| texttop|
align =
t absmiddle|baseline|absbottom}, alignement par défaut à gauche.
shapes Spécifie l'affichage de l'objet utilisé comme lien hypertexte.
type = texte Spécifie le type de média sur Internet pour les données.
standby = texte Spécifie le message à afficher avant que l'objet soit chargé.
usemap = URL Spécifie l'image en coordonnées à utiliser avec l'objet.
accesskey = texte Permet d’ajouter un accélérateur à un élément.
datasrc = texte Spécifie la source des données s’y rattachant.
datafld = texte Spécifie le nom de la colonne de la source des données.
tabindex = nombre Détermine la tabulation pour l’objet sélectionné.
j October OOOO 23242214.doc Page 43 sur 71
Systèmes Répartis INTERNET Langage HTML

class = texte Spécifie le nom de la classe donnée à la feuille de style.


style = texte Spécifie une feuille de style intraligne.
disabled Utilisé pour désactiver un élément.
> balise <param> répétée autant de fois que le permet le développeur de l'application.
</object>

Voici un premier exemple.


<OBJECT ID="ActiveXobjet"
CLASSID="CLSID:519FD363-C071-11CF-B42E-0000C062E6A0">
<PARAM NAME="Fichier" VALUE="exemple.avi">
</OBJECT>

Le premier commentaire concerne l'attribut obligatoire CLASSID utilisé par le navigateur pour
localiser le contrôle ActiveX requis par l'objet ActiveX associé à la page. Si le navigateur ne peut
pas localiser le contrôle ActiveX spécifié, il essaie de le télécharger à partir de l'emplacement
spécifié dans le champ Base.
Ainsi, CLASSID sera l'identificateur unique du composant sur 128 bits sous forme d'un charabia
illisible.
Cette classification reprend le principe de référencement d’une classe OLE au sein de
l'architecture Microsoft par un UUID (Universally Uniq Identifier), identifiant spécifique à cet
univers.
Cet identifiant est soit lié au numéro de la carte réseau de l’équipement producteur (par un
programme GUIDGEN), soit attribué sur demande par Microsoft qui en assure l’unicité.
Ainsi le document Excel est répertorié par un nom UUID unique (celui d’Excel) et une
instenciation correspondant aux cellules du document sélectionné.
Lorsqu’un lien OLE est copié dans Word, le système explore la base des registres de Windows
qui lui donne les informations nécessaires sur l’emplacement des données Excel par un
mécanisme de class factory de l’architecture COM (Component Objet Model), qui indique la
ressource nécessaire sur le PC.
Microsoft a étendu ce mécanisme à l’accès réseau en élargissant ce modèle COM à un modèle
distribué (DCOM) qui permet d’aller rechercher les informations sur un serveur distant. Ainsi
dans une page HTML, les syntaxes suivantes permettent d’aller chercher une ressource sur le
réseau.

Le deuxième commentaire concerne l'attribut id qui désigne l'identificateur ou le nom de


l'élément. C'est le nom utilisé à chaque appel de l'ActiveX.

Il existe ensuite toute une série d'attributs optionnels (width, height, vspace, hspace, align) qui
ont trait à la taille qu'occupera l'objet sur la page Web et à la représentation visuelle de celui-ci.

Voici un deuxième exemple.


<object classid="clsid:64FB8C73-DB3D-11D1-AF6C-0060082A4692"
codebase="couleur.ocx#version=1,0,0,0" width="285" height="166" align="center"
hspace="0" vspace="0">
</object>

Illustration :

j October OOOO 23242214.doc Page 44 sur 71


Systèmes Répartis INTERNET Langage HTML

Balise <param>
La balise <OBJECT> importe dans votre page un petit programme qui doit maintenant
fonctionner selon les spécifications du concepteur du site Web.
Comme pour l'applette Java, le concepteur du contrôle peut laisser quelques points d'entrée
paramétrables aux bons soins de l'internaute averti.

Par exemple, ces balises <PARAM> autorisent l'internaute à modifier l'affichage :


<OBJECT>
<PARAM NAME="Caption" VALUE="Mon texte">
<PARAM NAME="Fontname" VALUE="Arial, Helvetia">
<PARAM NAME="Fontsize" VALUE="20">
<PARAM NAME="Angle" VALUE="90">
</OBJECT>

Ces différents paramètres sont généralement fournis avec la documentation accompagnant le


contrôle ActiveX.

Balise <embed>
Microsoft supporte la balise <embed> qui produit un résultat similaire à celui de la balise
<object>, si ce n'est qu'elle offre généralement moins de contrôles.

Cette balise permet d'insérer directement des applications dans un document HTML. Pour
certaines applications (video, VRML), l'internaute aura besoin d'avoir sur son système le
programme qui pourra faire jouer l'application (Plug-ins) en question.
La balise EMBED était partiellement supportée par Explorer 3.0 et plus et Netscape 2.0 et plus.

<embed
background Spécifie si la palette doit être en avant-plan ou en arrière-plan. Par
palette =
| foreground défaut en avant-plan.
src = URL Spécifie la source de l'application. e.g. musique1.mid ou son1.wav
> balise <param> répétée autant de fois que le permet le développeur de l'application.
</embed>

Les attributs accesskey, weight, height, border, id, style et align sont communs avec la balise
<object>.
Il est possible d'associer des procédures évènementielles aussi bien à la balise <object> qu'à la
balise <embed>.
j October OOOO 23242214.doc Page 45 sur 71
Systèmes Répartis INTERNET Langage HTML

3.4 Les objets

Outre les objets créés dans la page, les contrôles Active X permettent de manipuler les objets de
la page et du navigateur (DOM) suivants :
• Window : la fenêtre
• History : la pile historique
• Navigator : propriété du navigateur
• Frames[i], FramePrincipal : les fenêtres
• Location : les objets URL
• Scripts[i] : le programme de script
• document : le document
• links[] : les liens
• anchors : les ancres
• Forms[] : les formulaires
• elements [] : les elements d'un formulaire

Ils permettent aussi de lancer des boites de dialogue, les même que celles lancées par les scripts.
Les boîtes de dialogue sont au nombre de 3 : alert, confirm, prompt.

3.5 Insertion d'un contrôle Active X


Contrairement aux Applets Java, il est difficile de repérer une page Web faisant appel à un
composant Active X. Il est donc en conséquence difficile de récupérer un contrôle active X.
En revanche, d'autres possibilités sont offertes au concepteur de site :
 soit utiliser les bibliothèques des éditeurs avancés (FrontPage, Dreamweaver);
 soit aller sur des sites spécialisés dans les Vbscripts, composants Active X et autres.

Editeurs HTML avancés


Chaque éditeur possède sa propre bibliothèque de contrôles ActiveX.
Certains contrôles de la liste peuvent être des contrôles OCX qui n'ont pas été complètement
transformés en protocoles ActiveX.

Pour spécifier un contrôle ActiveX qui n'est pas encore installé sur l'ordinateur du concepteur de
pages Web, il faut taper son numéro d'identification de classe directement dans ce champ.

Si ce dernier est installé sur l'ordinateur et prend en charge l'édition locale des propriétés, un
éditeur de propriétés s'ouvre pour permettre de le configurer.

Si le contrôle ActiveX n'est pas chargé dans l'ordinateur ou si le contrôle ne prend pas en charge
l'édition locale des propriétés, une autre boîte de dialogue ("Paramètres d'objet" sous FrontPage)
s'ouvre. Pour l'utiliser, il faut connaître le nom de chaque propriété du contrôle ainsi que les
valeurs de données admises pour chaque propriété. Le mieux est de consulter la documentation
disponible sur le contrôle ActiveX.

Exemple : insérer un lecteur Windows Média dans sa page Web.

j October OOOO 23242214.doc Page 46 sur 71


Systèmes Répartis INTERNET Langage HTML

Les paramètres indiqués ci-dessous sont


après insertion tous désactivés (valeur = -1).
Le principal d'entre eux reste "FileName", le
nom de la séquence vidéo à projeter.
Le navigateur Internet Explorer permet de
contrôler le composant Active X, par menu
contextuel activé uniquement en survolant
ce dernier (exemple ci-contre).

j October OOOO 23242214.doc Page 47 sur 71


<object classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95" id="MediaPlayer1"
width="286" height="225">
<param name="AudioStream" value="1">
<param name="AutoSize" value="1">
<param name="AutoStart" value="10">
<param name="AnimationAtStart" value="1">
<param name="AllowScan" value="1">
<param name="AllowChangeDisplaySize" value="1">
<param name="AutoRewind" value="1">
<param name="Balance" value="1">
<param name="BaseURL" value>
<param name="BufferingTime" value="5">
<param name="CaptioningID" value>
<param name="ClickToPlay" value="1">
<param name="CursorType" value="0">
<param name="CurrentPosition" value="1">
<param name="CurrentMarker" value="0">
<param name="DefaultFrame" value>
<param name="DisplayBackColor" value="0">
<param name="DisplayForeColor" value="16777215">
<param name="DisplayMode" value="1">
<param name="DisplaySize" value="1">
<param name="Enabled" value="1">
<param name="EnableContextMenu" value="1">
<param name="EnablePositionControls" value="1">
<param name="EnableFullScreenControls" value="1">
<param name="EnableTracker" value="1">
<param name="Filename" value="">
<param name="InvokeURLs" value="1">
<param name="Language" value="1">
<param name="Mute" value="0">
<param name="PlayCount" value="1">
<param name="PreviewMode" value="0">
<param name="Rate" value="1">
<param name="SAMILang" value>
<param name="SAMIStyle" value>
<param name="SAMIFileName" value>
<param name="SelectionStart" value="1">
<param name="SelectionEnd" value="1">
<param name="SendOpenStateChangeEvents" value="1">
<param name="SendWarningEvents" value="1">
<param name="SendErrorEvents" value="1">
<param name="SendKeyboardEvents" value="0">
<param name="SendMouseClickEvents" value="1">
<param name="SendMouseMoveEvents" value="1">
<param name="SendPlayStateChangeEvents" value="1">
<param name="ShowCaptioning" value="0">
<param name="ShowControls" value="1">
<param name="ShowAudioControls" value="1">
<param name="ShowDisplay" value="0">
<param name="ShowGotoBar" value="0">
<param name="ShowPositionControls" value="1">
<param name="ShowStatusBar" value="0">
<param name="ShowTracker" value="1">
<param name="TransparentAtStart" value="0">
<param name="VideoBorderWidth" value="0">
<param name="VideoBorderColor" value="0">
<param name="VideoBorder3D" value="0">
<param name="Volume" value="10">
<param name="WindowlessVideo" value="0">
</object>

Sites Spécialisés
Il existe des bibliothèques de contrôles Active X, bibliothèques libres de droits d'auteur
disponibles sur le World Wide Web :
 http://www.microsoft.com/com/tech/activex.asp,
 http://www.creativnet.org/ocx.html,
 http://attilajc.free.fr/accueil.html, etc...

Comment enregistrer des OCXs ?


En effet pour qu'un tel fichier puisse être utilisé sous Windows par d'autres programmes, il faut
qu'il soit enregistré dans la base de registre de Windows.
Cet enregistrement est automatique lorsque les programmes possèdent une procédure
d'installation, mais si le programme est téléchargé via un fichier ZIP qui ne possède pas de
module d'installation, il faut enregistrer "manuellement" ce fichier.
Il faut dans ce cas utiliser la commande suivante: regsvr32 c:\chemin\fichier.ocx
où l'on remplace le nom c:\chemin\fichier.ocx par le chemin complet du fichier à enregistrer.
Pour éviter cette manipulation, il est possible de créer un raccourci vers le fichier regsvr32.exe
(lui donner un nom évocateur, par exemple: Enregistrer dll-ocx). Il suffit ensuite de placer ce
raccourci dans le dossier "SendTo" de Windows. Quand un fichier .ocx est à enregistrer, il
suffira de le sélectionner dans l'explorateur, de cliquer avec le bouton droit et de choisir
"Enregistrer dll-ocx" dans le menu "Envoyer vers". L'enregistrement se fera automatiquement et
sera suivi d'un message de confirmation.

Conclusion
A la fin de ce chapitre, le lecteur possède dorénavant un certain nombre d'éléments
susceptibles de l'aider non pas à concevoir une applette Java ou un contrôle Active X
(nécessité d'une plate-forme de développement), mais à insérer intelligemment ces petites
applications qui vont s'exécuter côté client et ainsi décharger le serveur Web hébergeur du
site.

Bibliographie :
 Understanding ActiveX® and OLE de Microsoft Press (auteur : David Chappell).

Il n'existe pas de bibliographie spécifique aux Applets Java puisque ces applettes ne sont en
réalité que des applications Java qui s'exécutent sur la station cliente de l'internaute.
Chapitre 4 : Applications Web
L'objet du présent chapitre est de vous présenter sommairement l'ensemble des applications
susceptibles de s'exécuter sur un serveur Web.

Ce chapitre fait suite à celui portant sur les pages Web contenant des formulaires. Après avoir
étudié l'IHM spécifique aux applications du Web, voyons maintenant de plus près le
fonctionnement de ces applications s'exécutant sur le serveur et traitant les données envoyées par
la page de formulaire.

1. Les Applications
1.1 Fonctionnement général
Ce programme est exécuté, par le serveur, en temps réel sur la machine distante, au moment où
le navigateur fait une requête vers ce programme (3 ème étape du schéma ci-dessous).
Quel que soit la nature du programme, le serveur retourne soit une page web statique (déjà
présente sur le site avant le traitement), soit une page Web dynamique (créée en fonction de la
requête) dans laquelle il insère la réponse à fournir à l'internaute.

1
HTML
Client
Serveur 2 Web
Web
3
Pages 7
HTML CGI
4 1 : Demande de formulaire
2 : Envoi du formulaire HTML
3 : Envoi des champs saisis
4 : Activation du programme via un
script CGI
6 Application 5 : Traitement de la requête
5 6 : Mise en forme de la réponse en
Pages HTML langage HTML
dynamiques 7 : Envoi des résultats au client

Le schéma ci-dessus explique phase par phase le déroulement complet de la transaction sollicitée
par le client Web ou l'internaute vis à vis de l'application. Il décrit en fait la consultation d'un
annuaire.
Conformément au schéma précédent, le serveur Web est devenu un acteur intermédiaire
indispensable pour :
• solliciter le traitement d ’une application qui renverra en réponse le résultat inséré dans une
page Web dynamique ;
• interfacer une base de données (interroger ou modifier le contenu d'une table de cette base)
via des scripts qui fabriqueront en retour une page Web dynamique contenant les réponses
aux requêtes ou les confirmations des opérations effectuées sur la base.

Interroger une base de données s'effectue par l'intermédiaire de requêtes SQL.


Ecrire de tels programmes suppose de connaître le langage de requêtes SQL (ou un jeu de
requêtes d'E/S si la base de données n'est pas relationnelle).

Différentes techniques sont utilisées pour réaliser soit une application de traitement pure, soit une
application ou des scripts interfaçant une base de données. Ces techniques sont passées en revue
dans les paragraphes qui suivent.

1.2 Architecture à Plusieurs Niveaux


Le fonctionnement classique des services Internet repose sur le binôme client-serveur ou une
architecture à deux niveaux (two-tiers) alors que le schéma fait intervenir un troisième acteur :
l'application réveillée par un script ou une requête.
Ces trois acteurs donnent naissance à une architecture applicative dénommée architecture à
trois niveaux (three-tiers).
Cette architecture devient plus complexe si l'application n'est pas directement publiée sur le
serveur Web, mais déportée sur une autre station du réseau local ou même plus loin (adresse
URL). Dans le cas d'un système d'information, les différentes applications constitutives de ce
système peuvent être regroupées sur un serveur d'applications.

A partir du moment où une base de données est sollicitée, ce dernier devient le quatrième acteur
d'une architecture dénommée à quatre niveaux (four-tiers). Il existe des architectures plus
complexes encore imposant l'emploi de la terminologie multi-niveaux.

1.3 Applications CGI


La technique CGI (Common Gateway Interface) est en fait un standard respecté de tous les
éditeurs de serveurs Web pour l'écriture de passerelles entre des serveurs d'informations (Web) et
des programmes externes.
Les applications ou scripts CGI sont historiquement les premiers types d'applications Web.
Son architecture est simple :
 Le serveur Web lance un processus à chaque requête.
 Il passe en paramètre les données saisies dans le navigateur du client.
 Le processus traite les données et accède aux bases de données via (le plus souvent) des
requêtes SQL.
 Le processus renvoie la page HTML créée dynamiquement à partir des résultats de la
requête SQL.

La simplicité de cette architecture a un prix : la quantité de processus lancés correspond à la


quantité des demandes utilisateurs. Chaque sollicitation de l'application CGI entraîne un nouveau
chargement de celui-ci dans une zone mémoire différente. Ceci s'explique par le fait que les
exécutables CGI ne sont pas réentrants. Cela coûte cher surtout si le traitement présente une
taille de plusieurs Mega et doit effectuer des connexions multiples. On a donc des performances
très limitées. Trop de sollicitations successives peuvent avoir pour conséquence une saturation de
la mémoire.
Par contre, cette architecture a l'avantage d'être multi-plate-forme et de supporter très bien les
problèmes de programmation. En effet, si un traitement déclenche une erreur, seul le processus
concerné se plantera et les autres continueront à fonctionner normalement.
Leur défaut principal est d'être gourmand en ressources système.
Tout lancement de programme entraîne le chargement de celui-ci en mémoire.

Ecrire des programmes CGI suppose de connaître un L3G (Visual Basic, Pascal, C/C++, etc…).

Langage PERL

Le langage le plus adapté pour mettre en place les procédures CGI est le langage PERL
(Practical Extraction and Report Language), écrit par Larry Wall. Ce dernier, travaillant
sous UNIX, voulait créer un langage lui permettant de mettre en forme les résultats de scripts
d'administrateurs.
Un certain nombre de facteurs donnent des avantages à ce langage :
• Microsoft Windows 2000 inclue Perl comme langage de script.
• Le support de Perl en mode noyau par les serveurs Apache et Netscape (dans un
environnement UNIX) permet une exécution des scripts en Perl sans lancer l'interpréteur Perl
chargé en mémoire simultanément avec le serveur HTTP.
• Le nombre de bibliothèques Perl s'accroit au fil du temps.

Il existe plusieurs versions de langage PERL. Depuis la version "Perl 5.004", il existe une
version pour les environnements UNIX, PC et Macintosh. Actuellement, les développeurs
utilisent la version Perl 5.6.
Contrairement aux autres langages, le langage Perl est un langage interprété.

En général, il est déjà installé sur les environnements UNIX / Linux.


Pour utiliser Perl en environnement Windows, il faut charger la bonne version (Windows 32bits),
puis doublecliquer sur le fichier chargé pour l'installer.

Pour écrire son premier programme, utilisons Notepad (ou Bloc-Notes).


# Programme "Bonjour Monde"
$mot1="Bonjour";
$mot2="Monde";
print "$mot1 $mot2";
exit;
Il est nécessaire d'enregistrer ce programme au format *.pl spécifique au langage Perl :
bonjour.pl par exemple.
Etant donné que l'interpréteur Perl est un programme non Windows, il faut pour exécuter ce
dernier, ouvrir une fenêtre MS-DOS et le lancer sous le dossier "C:\Perl\exemples" de la manière
suivante : perl bonjour.pl.

Publication
Au niveau du serveur Web, ces exécutables doivent être publiés sous un répertoire qui possède
les droits en exécution. Ainsi le serveur sait que ces fichiers se trouvant dans ce répertoire
(seulement) devront être exécutés et non pas envoyés directement au navigateur.

1.4 ISAPI - NSAPI


Pour pallier à la faiblesse des applications CGI, Netscape et Microsoft ont proposé des API
permettant un dialogue natif entre le serveur Web et l'application.
Contrairement aux exécutables CGI, les API ne sont pas des standards et chaque éditeur propose
sa propre version : NSAPI pour Netscape, ISAPI pour Microsoft.
Ces API sont naturellement incompatibles.

Le principe est quasiment aussi simple que celui proposé par CGI :
 Appel d'une bibliothèque (une DLL sous Windows).
 Passage de variables via un bloc mémoire.
 Traitement et accès aux bases de données.
 Renvoi de la page HTML créée dynamiquement.

Excepté l'aspect propriétaire, cette solution est plus performante que les CGI car les DLL sont
des programmes compilés et non interprétés.
Seul petit problème, la DLL doit être réentrante et capable de gérer plusieurs threads (unités
élémentaires de traitement) simultanément. Quel que soit le nombre d'utilisateurs, ils utilisent
toujours le même code chargé en mémoire.
Ce système est très sensible aux erreurs car les threads partagent le même espace mémoire, et
notamment celui du Serveur Web. Une seule erreur pourrait faire tomber le serveur et tout le
système.

Leur avantage principal est qu'ils se déchargent dès fin d'utilisation.

ISAPI
L'API Internet Server (ISAPI) a été spécifiquement développée pour le serveur Microsoft IIS, en
tant qu'alternative de l'environnement Windows NT aux scripts CGI.
Une extension ISAPI est une bibliothèque de liens dynamiques (DLL, Dynamic-Link
Library), généralement chargée dans l'espace d'adresses mémoire occupé par le serveur IIS.
Comme il s'agit d'une DLL, une seule instance à la fois doit être chargée. Bien entendu,
l'extension ISAPI doit être programmé afin que de multiples demandes de clients puissent être
reçues simultanément.
Bien que les extensions ISAPI soient plus complexes que les applications CGI, ISAPI recourt à
une API relativement simple. Pour chaque demande de client, le serveur web invoque l'appel
ISAPI HttpExtensionProc et passe un pointeur à un bloc de contrôle d'extension ISAPI (ECB),
qui renferme les informations de la demande. La DLL ISAPI peut employer les fonctions de
rappel du serveur pour accéder aux informations de type "variable de serveur". L'ECB ISAPI
fournit également au programmeur un accès à quelques fonctions, telles que la redirection
d'URL, la gestion de session et les en-têtes de réponse, qui ne sont pas accessibles aux
applications CGI.

En dépit de leurs avantages par rapport aux scripts CGI, les extensions ISAPI présentent
quelques problèmes de maintenance. Par exemple, si un changement mineur doit être effectué
dans le code source de la page HTML retournée dynamiquement par une extension ISAPI, il est
nécessaire de la recompiler et de refaire l'édition de liens. En outre, en dépit de sa rapidité et de
ses plus faibles exigences en mémoire, une DLL ISAPI peut entrainer la paralysie du serveur web
si elle n'est pas testée de manière exhaustive avant d'être déployée et exécutée dans le processus
du serveur web.

Heureusement, avec la version 4.0 du serveur IIS, il est possible de sélectionner les extensions
ISAPI qui se chargent en tant qu'éléments intraprocessus avec IIS, et celles qui se chargeront
dans un processus distinct. Les extensions ISAPI présentes dans un processus distinct peuvent
être arrêtées et remises en marche indépendamment du processus du serveur (on peut les
redémarrer automatiquement après une panne). Bien que les extensions hors processus soient
plus lentes que celles intraprocessus, la possibilité d'isoler et de recharger des applications en
développement offre une nette amélioration par rapport aux versions précédentes d'IIS.

La technologie ISAPI peut aussi servir à créer des filtres ISAPI. Ces filtres sont à même
d'intercepter des événements de serveur spécifiques avant que le serveur ne les gère lui-même.
La convention d'appellation de ces filtres rappelle de très près celle des extensions. Lorsqu'un
filtre est chargé (habituellement au moment ou démarre le service web), il fait état du type de
notifications d'événements qu'il va contrôler. Si ces événements surviennent, le filtre a la
possibilité de les traiter, de les passer à d'autres filtres ou de les envoyer au serveur. De la sorte,
vous pouvez utiliser des filtres ISAPI pour fournir des techniques d'authentification
personnalisées, ou pour rediriger automatiquement des requêtes en fonction des en-têtes HTTP
envoyés par le client, tel que Accept-Language.
Les filtres peuvent cependant exercer un effet négatif sur les performances, s'ils ne sont pas
soigneusement écrits. Avec IIS 4.0, on peut les charger sur le serveur web de manière globale, ou
à destination de sites web spécifiques. Ils ne peuvent cependant pas s'exécuter hors processus.

NSAPI
C'est un ensemble de fonctions permettant de se passer de scripts CGI sur un serveur Netscape
du style Enterprise.
L'emploi de la technologie NSAPI nécessite l'apprentissage préalable d'un certain nombre de
concepts : les Server Application Functions ( ou SAFs, fonctions que le serveur appelle lorsqu'il
traite une requête), les directives (ou identifieurs des différentes étapes des transactions HTTP),
et le fichier de configuration objet (obj.conf) du serveur Netscape.
La technologie NSAPI utilise les SAF qui fournissent les fonctionnalités basiques et étendues du
serveur Enterprise. Il permet aux traitements de requêtes du serveur d'être divisés en petites
étapes qui peuvent être ordonnés de multiples façons suivant la rapidité et la souplesse de la
configuration.
Le serveur fournit un ensemble de SAF prédéfinis. Il est possible d'étendre les fonctionnalités du
serveur en permettant à l'administrateur d'écrire ses propres SAF et de les ajouter aux SAF
prédéfinis.
Cette technologie fut destinée au départ aux développeurs du NCSA et aux administrateurs de
serveurs Web du CERN. Elle a été exposée aux développeurs de logiciels afin qu'ils puissent
tirer avantage de sa rapidité, de son intégration au serveur, et de sa souplesse. Cependant, ceci
nécessite une solide compréhension du fonctionnement du serveur. Si l'on convertit un script
CGI ou si l'on écrit une extension de serveur du style CGI, il n'est pas nécessaire d'utiliser la
technologie NSAPI. Il est possible d'employer alors l'Interface Web d'Application (ou WAI).
WAI a pour but de faciliter l'implémentation d'une nouvelle fonctionnalité du serveur. WAI
fournit des performances plus rapides que celles d'un script CGI. Il a aussi la capicité de
fonctionner dans un environnement distribué depuis qu'il repose sur l'emploi du protocole IIOP
(Internet Inter-ORB Protocol).
En conclusion, la technologie NSAPI est intéressante si l'on veut développer un système de
connexion et d'autorisation personnalisé, ou modifier le comportement existant du serveur.

1.5 Langages Interprétés


Les langages interprétés font un retour en force "grâce" à Internet. L'idée est simple : on place
dans les pages HTML statiques des tags supplémentaires qui seront interprétés par le serveur.
La technique peut se décomposer ainsi :
 Appel de la page HTML avec des balises supplémentaires (propres au langage interprété)
contenant du script, des requêtes SQL, …
 Interprétation par le serveur et récupération du code SQL.
 Récupération de données via une requête SQL.
 Envoi de la page HTML interprétée au navigateur.

Cette technologie est simple et rapide à déployer mais elle est liée à un serveur. Les langages
interprétés étant moins performants que ceux compilés, des problèmes de lenteur peuvent
survenir lors de la montée en charge du serveur.
La solution la plus populaire reposant sur cette architecture est celle développée par Microsoft :
Active Server Page (ASP).

Active Server Pages


Présentation
Le technologie ASP de Microsoft, issue d'un projet nommé DENALI, existe depuis 1996.

Cette technologie serveur, sans être la première sur le marché, a su s'imposer assez rapidement.
Elle a bénéficié de la gratuité de Internet Information Server (IIS), serveur web fourni avec
Windows NT. De plus, la programmation des pages ASP, via un langage de script (VBScript, ou
Javascript) est aisée, et accessible à de nombreux concepteurs de sites web. L'essor du commerce
électronique est aussi un facteur non négligeable du développement rapide des ASP.
En fait, la possibilité de créer rapidement un site web dynamique reposant sur l'accès à des bases
de données a aussi favorisé la conception de sites marchands.
De plus, elle ne se contente plus d'appartenir au monde Microsoft. En effet, grâce aux efforts de
sociétés comme HalcyonSoftware ou bien ChiliSoft, les ASP tournent sur plusieurs plate-
formes ( Unix, Linux, Mac…) et plusieurs serveurs web (Apache, Netscape FastTrack…).

Les fonctions principales

 Les scripts coté serveur, incorporés dans une page HTML, qui seront exécutés sur le
serveur et non pas par le navigateur. Rappelons que les langages de scripts manipulent les
objets de la page et du navigateur (DOM).

 La connectivité aux bases de données : les scripts coté serveur et les Active Data Object
(ADO) permettent de créer facilement de puissantes fonctions de gestion de base de
données à intégrer dans vos sites Web.

 La gestion d’applications : l'administrateur de serveur ou le concepteur d'applications


peut gérer et suivre l’état des applications au niveau utilisateur (session), application et
serveur à l’aide d’objets intégrés.
 Les Actives Server Components : le concepteur a le choix entre instancier des
composants programmables du type ASC ou objets intrinsèques à l’aide d’outils (Visual
Basic, C, Java...) ou les créer à l'aide des fonctions Javascript ou Vbscript.
Les composants objets sont des morceaux de code précompilés.
Au centre d'ASP se trouve une extension d'ISAPI (Asp.dll) qui compile et place en cache les
fichiers asp dans la mémoire au moment de l'exécution, par le biais d'un interpréteur de script. La
serveur IIS associe l'extension. asp à Asp.dll. Comme la technologie ASP doit interpréter et
compiler des scripts avant de les exécuter, ceux qui sont complexes risquent de mettre quatre fois
plus de temps que du code HTML ordinaire.
Les pages ASP introduisent un niveau supérieur d'interactivité en gérant l'état de l'application et
de la session sur le serveur, réduisant par là même la quantité d'informations incessamment
transmises entre le serveur et le client. L'écriture de pages ASP permet de travailler sans
difficulté avec les informations saisies dans les formulaires HTML. Il est également possible de
contrôler les caractéristiques HTTP avancées à partir du script, telles que les cookies côté client
et les certificats de sécurité des clients.

Qu'est-ce qu'une page ASP ?


Une page ASP (Active Server Pages) est un document HTML contenant une logique de script
côté serveur. La logique du script, VBScript ou JScript par exemple, est exécutée
dynamiquement sur le serveur Web et ensuite supprimée du document afin de n'envoyer que le
code HTML au navigateur. Le code ASP est donc invisible côté client, le code étant visible
uniquement côté serveur.
Une page ASP (fichier à l'extension *.asp) est un document HTML, toutes les balises HTML
sont autorisées dans le fichier ASP et peuvent être utilisées normalement. Les fichiers ASP
permettent de générer dynamiquement des balises HTML dans le code source de la page "Web
ASP" avant son envoi au navigateur. Il est aussi possible d'insérer un script côté serveur
librement dans le fichier ASP, au coeur du code HTML si besoin est.
Voici l'exemple classique "HelloWorld" en ASP. Il affiche en plus la date du serveur. Notez que
les scripts asp se trouvent entre les balises <% et %>.
<HTML>
<HEAD><TITLE> Un exemple ASP </TITLE></HEAD>
<BODY>
<P> Bonjour, le texte suivant est généré par ASP </P>
<P><% response.write("Hello World, nous sommes le "&date)%></P>
</BODY>
</HTML>
Notons que des balises HTML peuvent être incluses dans la chaine entre " ". Cela laisse entrevoir
les possibilités impressionnantes de la technologie ASP.

Versions
Deux versions coexistent : v2.0 et v3.0.
La version 5.0 du serveur IIS inclut la version ASP 3.0 existante.

La seule différence notable entre les deux versions est l'apport de nouveaux objets intrinsèques
style "ASPerror" permettant de mieux déboguer les applications en cours de développement.
En effet, la version ASP 2.0 met à notre disposition 5 objets intrinsèques : Application,
Session, Request, Response et Server. A travers leurs propriétés, leurs événements et leurs
méthodes, le concepteur peut construire ce que bon lui semble!

PHP
Présentation
Rasmus Lerdorf est à l'origine du langage PHP (Professional Home Page) conçu durant l'année
1994. La première version publique, réécrite durant la même année 1995, interprétait les données
issues des formulaires HTML. Il y ajouta le support du gestionnaire de base de données mSQL.
C'est comme cela que naquit la version PHP/FI.
Le langage PHP connut rapidement un succès grandissant. De nombreuses personnes
commencèrent à contribuer à son amélioration.
D'un projet personnel (celui de Ramsus), une communauté de développeurs se créa autour de ce
langage. L'analyseur fut de nouveau réécrit par Zeev Suraski et Andi Gutmans et ce nouvel
analyseur forma la base de la version 3 du PHP sortie le 06 Juin 1998.
En Janvier 1999 plus de 100 000 sites avait adopté le langage PHP.

La version 4 est sortie en Avril 2000.

Qu'est ce que le PHP ?


La technologie PHP repose sur l'utilisation d'un langage de script inclus dans le langage HTML
et traité par le serveur. La syntaxe du langage PHP provient du C, de Java et du Perl, avec un
petit nombre de fonctions inédites par rapport à ces langages. Il s'agit d'un langage interprété, fait
pour internet et les bases de données.
Le but du langage PHP est de permettre aux développeurs de site web d'écrire rapidement des
pages web dynamiques. PHP permet de construire dynamiquement des pages HTML contenant
des résultats de calculs ou des requêtes SQL adressées à un système de gestion de base de
données (SGBD). Pour fonctionner, il ne demande pas de connaissances importantes de la
machine sur laquelle on travaille, et permet d'exporter les scripts vers n'importe quel système
d'exploitation ( Unix, Mac, Windows).
Il est distribué librement et gratuitement sous la licence GNU GPL. Il peut être téléchargé depuis
fr.php.net.

Fonctionnalités
Le langage PHP possède les même fonctionnalités que les autres langages permettant d'écrire des
scripts CGI, comme collecter des données, générer dynamiquement des pages Web ou bien
envoyer et recevoir des cookies.
La plus grande qualité et le plus important avantage du langage PHP est qu'il peut interfacer avec
un grand nombre de bases de données par l'intermédiaire de formulaires : DBase, mSQL,
MySQL, Oracle, PostgreSQL....
Il offre une liste de fonctions impressionnantes dont :

 Gérer et construire des images,


 Communiquer avec bases de données usuelles
 Gérer l'authentification, les cookies et la sécurité,
 Implémenter les services utiles d'Internet : SMTP, IMAP, SMTP, POP3 et HTTP?
 Accéder au système de fichiers du serveur,
 Gérer le temps et les dates.

Sécurité et faiblesses
PHP est un langage puissant et l'interpréteur, qu'il soit inclus dans le serveur web ou bien
compilé en version CGI, est capable d'accéder aux fichiers, d'exécuter des commandes et d'ouvrir
des connexions réseaux. Toutes ces propriétés rendent fragile la sécurité d'un serveur Web. Le
langage PHP a été pensé afin d'être un langage beaucoup plus sécurisé que d'écrire des CGI. De
plus, une sélection rigoureuse des options de compilation et d'exécution permettent d'obtenir un
équilibre parfait entre liberté et sécurité.
Etant donné les nombreux moyens d'utilisation du langage PHP, il existe de nombreuses
directives de configuration afin d'en contrôler le comportement.
La flexibilité de configuration de PHP est épaulée par la flexibilité du code. Le script PHP peut
être compilé pour constituer une application serveur complète, avec toutes les fonctionnalités
d'un interpréteur de commande (ou shell sous UNIX), ou il peut encore être utilisé comme
simple SSI (Server Side Include) avec peu de risque, dans un environnement à sécurité renforcée.
La création d'un environnement sécurisé est à la charge du développeur PHP.

Environnement d'exécution
Un interpréteur PHP doit être installé. Les serveurs http les plus répandus supportent
l'installation de cet interpréteur.
On retrouve souvent le quatuor Linux-Apache-PHP-MySQL car tous les quatre sont gratuits.

Les fichiers de scripts ont pour extension *.php ou *.php3 ou *.php4 si l'on veut indiquer à
l'interpréteur la version du langage utilisé.

Processus d'exécution
Les fichiers PHP sont un mélange de code HTML, interprétable par un navigateur, et de code
PHP. Ce dernier est délimité par une balise de début <?php et une balise de fin ?>. Plusieurs
blocs peuvent exister dans un même fichier.
Lorsque le serveur HTTP reçoit une demande d'accès à une page PHP, il suit toujours la même
procédure :
1. il reconnaît le fichier grâce à son extension.
2. il démarre l'interpréteur associé.
3. il transmet le script et des variables d'environnement à l'interpréteur.
4. le script est exécuté.
5. le résultat éventuel est renvoyé au serveur http, sous forme de page HTML, qui transmet
au navigateur.
Modèle de composants
PHP n'est pas un langage orienté objet. Mais il permet tout de même de gérer des classes. Il est
possible de factoriser ainsi certains traitements. Leur usage rend un source beaucoup plus clair et
plus facilement maintenable. Mais surtout, elles permettent de réutiliser facilement votre code ou
même de partager les développements entre plusieurs équipes.

Exemple de fichier PHP


<html><body>
<?php echo "Salut à tous"; ?>
</body></html>

Fichier HTML généré


<html><body>
Salut à tous
</body></html>

Affichage à l'écran
Salut à tous

Conclusion
Les avantages de ce langage deviennent des inconvénients dans le monde professionnel. En effet,
sa forte orientation web et bases de données le ferme à de nombreuses technologies (CORBA,
cryptage...).
De plus, on rencontre toujours les mêmes problèmes de ressources dus aux langages interprétés.
Le serveur HTTP doit lancer l'interpréteur puis l'arrêter pour chaque accès à une page PHP.

Le langage PHP est issu du monde UNIX. De nouvelles versions sont maintenant disponibles
sous NT.

Java Server Pages


Présentation
La technologie JSP (ou Java Server Pages) est une extension de Java pour le Web. C'est un
concept offrant une librairie complémentaire, qui est spécifique à la gestion de pages internet.
Elles bénéficient donc de toutes les autres librairies Java et par conséquent de son mode
d'exécution pré-compilé (Machine Virtuelle).

Cette technologie fut inventée par la société Sun Microsystems.


Elle utilise le langage Java. Les fichiers ont pour extension *.jsp.
La technologie en est à la version 1.2.
Cette techonologie permet la création et la maintenance facile de pages HTML côté serveur. Elle
peut être utilisée comme un ensemble de pages dynamiques HTML se substituant aux scripts
CGI. Conceptuellement, les pages JSP sont similaires aux pages ASP, aux pages de balises Cold
Fusion, et aux scripts Perl.
Environnement d'exécution
Les applications Java s'exécutent dans une machine virtuelle, qui gère sa propre mémoire. Une
application JSP ne peut donc pas altérer d'autres zones mémoire que celles initialement allouées.
Un serveur spécifique doit être installé pour bénéficier des JSP. Les plus répandus sont JRun
d'Allaire et Jakarta Tomcat.
Ces deux serveurs ouvrent aux JSP près d'une dizaine de systèmes d'exploitation (Windows,
Linux, Unix...) et autant de serveurs HTTP (Apache, IIS, Netscape...).

Processus d'exécution
Les fichiers JSP sont un mélange de code HTML, interprétable par un navigateur, et de code
JSP. Ce dernier est délimité par une balise de début <% et une balise de fin %>; plusieurs blocs
peuvent exister dans un même fichier.
Lorsque le serveur HTTP reçoit une demande d'accès à une page JSP, il suit toujours la même
procédure:

1. il reconnaît le fichier grâce à son extension.


2. il le transmet au serveur JSP.
3. à la première demande, le fichier est compilé en un servlet.
4. le servlet est exécutée.
5. le résultat éventuel est renvoyé au serveur http, sous forme de page HTML, qui transmet
au navigateur.
Modèle objet
Les JSP sont basées sur des objets manipulés par le serveur JSP. Ils regroupent des attributs
(valeurs) et des méthodes (traitements) utilisés dans les scripts.
La technologie JSP est architecturée autour de 9 objets :
1. application : manipulation des variables et constantes du site.
2. session : stockage de données propres à un utilisateur.
3. response : informations à destination du navigateur du client.
4. request : manipulation des informations provenant du client.
5. page : manipulation des variables et constantes d'une page.
6. pageContext : environnement d'exécution.
7. out : permet d'écrire du HTML dans des scripts JSP.
8. exception : permet de gérer des exceptions avec le code JSP.
9. config : permet de gérer des paramètres d'initialisation.

Modèle de composants
JSP étant une spécification supplémentaire pour Java, vous disposez donc de l'environnement
Java standard: Classes, Servlets, JavaBean...
La société Sun Microsystems cherche à intégrer un maximum de fonctionnalités à Java :
cryptage, CORBA, XML, bases de données...
Le fait d'utiliser JSP permet donc de bénéficier de toutes ces librairies.
Pour ce faire, vous disposez de deux moyens:
1. les classes, qui correspondent au modèle orienté objet de Java.
2. les servlets*, qui peuvent être chargées automatiquement au démarrage du serveur et
proposer des services.
*Un servlet est un composant Java s'exécutant en continu et en attente de sollicitations
extérieures. On s'en sert souvent pour offrir des services annexes (traduction, compteur...) aux
pages JSP.

Exemple de fichier JSP


<HTML><BODY>
Le texte ci-dessous est généré par JSP:<BR>
<%out.println("<STRONG>Salut à Tous</STRONG>, nous sommes le " + new Date());
%>
</BODY></HTML>

Fichier HTML généré


<HTML><BODY>
Le texte ci-dessous est généré par JSP:<BR>
<STRONG>Salut à Tous</STRONG>, nous sommes le 18 juin 2001
</BODY></HTML>

Affichage à l'écran
Le texte ci-dessous est généré par JSP:
Salut à Tous, nous sommes le 18 juin 2001

Conclusion
"Java Server Page" est un concept basé sur le langage objet Java. Ceci fait toute sa puissance. Il
bénéficie d'un modèle objet complet et d'un modèle de composants de haut niveau.
De plus, il est indépendant des environnements. Une page JSP écrite avec Windows fonctionnera
sans problèmes avec Unix.
Quel que soit le nombre de requêtes reçues, la taille mémoire demandée ne changera que très peu
car le serveur JSP s'exécute en continu.
En contre-partie, une importante zone mémoire est réservée, qu'il y ait des requêtes ou pas.
Quant au développement des applications, il devient rapidement complexe si l'on ne maîtrise pas
le langage Java qui reste avant tout un véritable langage de programmation qui n'a pas été
spécialement conçu pour internet.

Comparatif
Classement
Domaine ASP CGI JSP PHP
Simplicité du développement 2 4 3 1
Portabilité 4 3 1 2
Richesse des fonctionnalités/extensions 2 4 1 3
Performances 3 4 1 2
Gestion mémoire 2 4 1 3
Consommation mémoire 3 2 4 1
Support 2 4 3 1
Sécurité 3 4 1 2
Disponibilité chez les hébergeurs 3 1 4 2

En dehors du script CGI qui commence à être dépassé, on peut constater que les trois autres
langages de script se tiennent. Chacun est adapté à un besoin particulier :

 ASP pour un environnement Windows,

 PHP pour un particulier,


 JSP pour le monde professionnel.
1.6 Autres Solutions
Les solutions à base de broker de requêtes

Oracle a été l'un des tous premiers à introduire la notion de Web Request Broker (Broker
"médiateur" de requêtes Web), un gestionnaire d'objets distribués sur le Web.

Cette technique maintenant éprouvé consiste à :


 La prise en charge des requêtes utilisateurs par un médiateur.
 L'orientation par un processus déjà lancé, mono-threadé, ayant sa propre mémoire.
 La gestion d'une file d'attente par chaque processus.
 L'exécution de la requête et le renvoi des résultats.

Le "broker" de requête peut gérer le nombre de processus tournant simultanément afin


d'optimiser la gestion de la mémoire et des files d'attente. Cette architecture permet de distribuer
les processus sur plusieurs machines (et donc de faire du traitement en parallèle) via la couche
réseau du protocole TCP/IP.
Cette solution est très robuste, elle supporte très bien de fortes montées en charge. Lorsqu'un
processus se plante, le broker de requête s'en rend compte et est capable de reprendre le
traitement de manière autonome.
Mais les solutions à base de broker de requêtes sont très complexes à mettre en œuvre et
demandent des temps de développement très longs. Ces solutions (propriétaires) sont donc
performantes mais coûteuses (en ressources humaines et financières).

Les architectures "court-circuit"


Les architectures "court-circuit" sont encore plus récentes que les quatre autres et elles sont
porteuses d'avenir.
Cette architecture court-circuite le serveur HTTP qui n'a plus qu'un rôle de relais :
 Le serveur HTTP initie des dialogues natifs entre objets clients et objets serveurs.
 Chaque requête client invoque une méthode dans l'annuaire des applications du serveur.

Il existe plusieurs solutions permettant de développer une telle architecture :


 dans le monde purement Java, on emploie RMI pour communiquer entre objets distants,
 Java/CORBA retient IIOP
 le monde Microsoft retient DCOM.

Cette solution est puissante d'un point de vue fonctionnel mais relativement complexe à mettre
en œuvre.

1.7 Avantages et Inconvénients des uns et des autres


L'idéal serait d'avoir une solution simple à mettre en œuvre, robuste, tolérante aux erreurs et
standards. Mais, comme on peut le voir, la solution miracle n'existe pas, soit on a une solution
simple mais sensible aux erreurs (CGI et API), soit on a des solutions complexes et propriétaires
(Broker de requêtes et court-circuit).
La solution à développer va donc dépendre (principalement) du type d'application que l'on veut
déployer.

Positif Négatif

CGI Standard client et serveur Peu performant et rudimentaire

API Rapidité d'exécution Complexe à développer, peu robuste

Interprété Uniquement sur les serveur NT et W95


Simple et facile à développer
(ASP) Exécution lente due à l'interprétation

Broker de Rapidité d'exécution Serveur propriétaire


requêtes Supporte bien la montée en charge Coûteux et long à déveloyer

Fonctionnalités évoluées grâce au Le client n'est plus standard (Active X


Court-circuit dialogue natif n'existe que sur IE)
Interface évoluée Le serveur n'est pas standard

2. Exemples d'Applications
2.1 Exemples de Services
Un certain nombre de services offerts par la Toile reposent sur des applications Web hébergés
par le serveur HTTP.

Les moteurs de recherche, à partir de mots clés saisis dans un formulaire, affichent l'ensemble
des pages au format HTML contenant ces mots clés. La recherche est en fait effectuée par un
programme externe, du type script ASP ou script IDC (ancêtre d'ASP chez Microsoft).

L'exemple assez puissant et le plus courant reste l'accès, via un formulaire HTML, à une base de
données d'annuaire. Par l'intermédiaire du formulaire, vous saisissez les nom et prénom d'une
personne. A l'aide d'un bouton 'valider' présent sur le formulaire, le serveur invoque alors un
programme qui, à partir des informations saisies dans le formulaire, va interroger le moteur de la
base de données et envoyer en réponse un page au format HTML, contenant les informations
concernant cette personne, que votre navigateur va alors afficher.
L'application est un programme du type script ASP ou PHP.

Les forums de discussion, les serveurs de discussion en direct (ou Chat) ainsi que les sites
marchands sont tous élaborés à partir de langages de scripts.

2.2 Exemples d'appels aux applications


Application CGI
Un première application rencontrée assez souvent sur le Net est celui du compteur de visites d'un
site Web.
Voici un exemple de code source :
<img src="/cgi/?link=compteur&style=beach&width=6">

Ce compteur est en fait un exécutable classique ayant comme extension *.exe (au lieu de *.cgi).
Comme il doit afficher l'image d'un compteur, il est appelé au sein d'une balise image.
Les paramètres qui suivent l'adresse de l'exécutable permettent de distinguer ce compteur parmi
d'autres, de fixer le style du compteur ainsi que le nombre de chiffres utilisés pour ce dernier.

Langage PHP
Il est possible d'attaquer une base de données de type "Annuaire" à l'aide de ce langage via une
page Web présentant un formulaire.
Voici un exemple de code source :
<FORM name=annuaire method=post OnSubmit=VerifieForm(this) action=annu_result.php3>

L'attribut action vise un exécutable ayant pour extension *.php3.

Technologie ASP
L'exemple choisi est celui d'un forum de discussion.

Extrait du code source de la page de définition de cadres :


<frame name="liste" target="main" src="default.asp" scrolling="auto">

Le cadres de gauche du forum affiche une page Web dynamique renseignant sur le nombre de
questions et réponses existants au sein de ce forum après avoir interrogé au préalable la base de
données contenant ces questions et réponses.

Extrait du code source du cadre de gauche :


<a href="ajout.asp?type=ajoute" target="contenu"> Ajouter</a>
<a href="affiche.asp?num=422" target="contenu"> Achat Automobile</a>
Le menu du cadre de gauche vise d'autres pages Web dynamiques permettant à l'internaute
d'ajouter de nouvelles questions, ou d'afficher le contenu des réponses aux questions, comme
dans la copie d'écran ci-dessus.

3. Exemple pratique : compteur de visites


Cette dernière partie du chapitre est consacrée à la mise en place d'un compteur de visites sur la
page d'accueil d'un site par exemple.

3.1 Description
Les fichiers relatifs au compteur se trouvent au départ compressés avec WINZIP : all.zip,
counter.zip.
Le fichier ‘counter.zip’ contient l'ensemble des fichiers nécessaires au fonctionnement d'un
modèle (style) de compteur, le fichier ‘all.zip’ contenant les autres modèles.

La décompression locale de ces deux fichiers crée deux répertoires contenant chacun : deux
fichiers (counter.exe, counter.cfg), et deux sous-répertoires (/digits, /doc).

Le fichier 'counter.exe' est l'application chargée de compter les visites.

Le fichier 'counter.cfg' permet sous Bloc-Notes (Notepad) de paramétrer l'incrémentation du


compteur :
a) sous le bloc [No-Increment for], ajouter les identifieurs réseau des (famille de) stations
qui n'incrémentent pas le compteur
b) sous le bloc [Allow-Access-to], spécifier les identifieurs réseau des (famille de)
stations qui incrémentent le compteur

Exemple de paramétrage pour faire fonctionner en local ce compteur :


(famille d') adresse(s) IP (127.0.0.1 pour test local)
alias DNS de station si Serveur DNS (localhost pour test local)
nom de domaine NT

Le paramétrage de ce fichier n’est pas obligatoire.

Le répertoire 'doc' renseigne sur le fonctionnement du compteur.


Le répertoire 'digits' contient les différents modèles de compteur.

Pour bénéficier de tous les modèles disponibles, il est conseillé de déplacer le sous-répertoire
« digits » de ‘all’ sous ‘counter’ et de supprimer le répertoire 'all' désormais inutile.

Afin d'intégrer ce compteur au site avant de le publier sur le serveur Web, il est conseillé de créer
un répertoire portant le nom explicite ‘cgi-bin’ à la racine du site.
3.2 Installation
Exemple d'installation de compteur :
<!-- page d'accueil du site par exemple -->
Vous êtes le <img src="/cgi/counter.exe?link=compteur&style=beach&width=10"> ième
visiteur de mon site.

Exemple de compteur de style "beach" à 10 chiffres :

Le chemin qui précède le nom de l'exécutable importe peu pour le moment. Le paragraphe relatif
à la publication du compteur traitera du sujet.
En effet, le chemin reflète plus la manière dont est publié le compteur et non l'organisation
physique du site qui sollicite le lancement de ce compteur.

Le paramètre link représente une étiquette spécifique à la page appelante, étiquette qui va
permettre de distinguer les différents appels à cet exécutable :
• Soit dans le cas de plusieurs compteurs sur un même site donné,
• Soit dans le cas d’un seul compteur publié au niveau du serveur pour l’ensemble des sites
hébergés par ce serveur.

Une fois que l'application est sollicitée, un fichier 'counter.dat' est créé indiquant en premier le
nom de l'étiquette suivi du nombre de visites de la page invoquée.

Le paramètre style permet de spécifier le modèle de compteur (voir sous-répertoire /digits).


Pour choisir le style du compteur, visualiser le fichier counter.htm situé sous /doc.

Le paramètre width règle le format de l'affichage (nombre sur X chiffres).

3.3 Publication
Quel que soit le serveur Web utilisé (Personal Web Server ou Internet Information Server de
Microsoft, ou Apache), il existe plusieurs façons de publier le compteur sur le Serveur.

 Il existe un préalable à la lecture de ce paragraphe : savoir publier un site sur les deux
types de serveurs.

Serveur Microsoft
Plusieurs possibilités de publication s'offrent.

• La première consiste à publier directement sous Inetpub\wwwroot\cgi-bin en ayant au


préalable copier sous ce dossier l’ensemble des fichiers du compteur (excepté le fichier
'counter.dat' qui crée des incidents).

 Le chemin devient alors obligatoirement src="/cgi-bin/counter.exe..." ou /cgi-bin représente


le chemin parcouru depuis la racine « / » (wwwroot) du serveur Web via son dossier « cgi-
bin »
 Correspondance entre la vision de l'explorateur Windows, l'arborescence du gestionnaire de
services Internet (MMC) et le chemin à indiquer dans la page dans le cas de la publication
directe :
Explorateur Arborescence MMC Chemin dans page Web
C:\Inetpub\wwwroot Site Web par défaut «/»
\cgi-bin (physique)  cgi-bin « cgi-bin »
 counter.exe  counter.exe « /counter.exe »

 Une variante à cette publication consiste au préalable à publier son site en ayant déporté
la racine du serveur vers le lieu du site, par exemple : D:\SiteWeb au lieu de
C:\Inetpub\wwwroot (onglet "Répertoire de Base" des propriétés du "Site Web par
défaut" sous MMC).

• La deuxième demande à créer depuis le gestionnaire de services Internet (ou Microsoft


Management Console = MMC) un répertoire virtuel pointant vers le répertoire « cgi-bin »
créé lors de l'installation du compteur au niveau du site.

 Exemple de configuration du répertoire virtuel au niveau de "Site Web par défaut"


:
alias = cgi par exemple,
chemin = D:\SiteWeb\cgi-bin
autorisation : cocher « accès exécuter »

 L’arborescence du gestionnaire de services (MMC) fait apparaître le répertoire


« cgi ».
 Il faut alors modifier le chemin dans le fichier faisant appel au compteur de la
manière suivante : /cgi/counter.exe

 Correspondance entre la vision de l'explorateur, l'arborescence MMC et le chemin


à indiquer dans la page dans le cas du répertoire virtuel :
Explorateur Arborescence MMC Chemin dans page Web
C:\Inetpub\wwwroot Site Web par défaut «/»
D:\SiteWeb\cgi-bin  cgi (répertoire virtuel) « cgi »
 counter.exe  counter.exe « /counter.exe »

• La troisième modifie le répertoire de base dans Propriétés du répertoire « cgi-bin » de


wwwroot en visant « D:\SiteWeb\cgi-bin ».

 Il faut en conséquence modifier le chemin dans le fichier faisant appel au compteur de


la manière suivante :
/cgi-bin/counter.exe…

 Correspondance entre la vision de l'explorateur, l'arborescence MMC et le chemin à


indiquer dans la page dans le cas de la modification de la racine du serveur (répertoire
de base) :
Explorateur Arborescence MMC Chemin dans page Web
C:\Inetpub\wwwroot Site Web par défaut «/»
D:\SiteWeb\cgi-bin  cgi-bin (répertoire virtuel) « cgi-bin »
 counter.exe  counter.exe « /counter.exe »

• La quatrième consiste à déclarer de manière spécifique, par l'intermédiaire du gestionnaire de


services Internet (l'onglet "Répertoire de Base" des propriétés du "Site Web par défaut"), les
applications qui s'exécutent sous le site en question.

 Pour cela, procédons comme suit :


• Cliquer sur le bouton "Configuration",
• "Ajouter" l'emplacement du compteur de visites et son type d'extension.

Serveur Apache (sous NT)


Dans le fichier de configuration srm.conf du serveur, la ligne qui configure la publication des
applications CGI est :
#ScriptAlias /cgi-bin/ « C:/Program Files/Apache Group/Apache/cgi-bin/ »

Le concepteur de pages qui veut tester son compteur en local doit modifier ce fichier de
configuration. Il est nécessaire, le temps de la modification, d'arrêter préalablement le serveur si
ce dernier était démarré.
A travers cette ligne, le hébergeur a le choix de l'emplacement de son compteur. Deux
possibilités sont offertes à l'hébergeur de site :
 la publication directe du compteur sous le répertoire indiqué ci-dessus,
 la publication depuis l'emplacement du compteur sur le site.
Dans les deux cas, il faut décommenter cette ligne en enlevant le caratère "#", puis redémarrer le
serveur.
Dans le deuxième cas, il faut indiquer au serveur Apache que le répertoire de publication du
compteur possède les droits en exécution. Pour cela, dans le fichier de configuration access.conf
du serveur, il faut rajouter le bloc :
<Directory C:/Données/SiteWeb/Scripts>
Options ExecCGI
</Directory>

Quel que soit le chemin choisi, il est important de laisser le « / » final dans le chemin, sans quoi
le compteur n'est pas publié.

3.4 Tester
Pour tester à l'aide de son serveur local n'importe quel type d'application dont il est question dans
le chapitre, il faut obligatoirement solliciter le serveur pour que l'application s'exécute.
Pour le solliciter, le concepteur de sites doit ouvrir son navigateur et taper l'adresse URL du site
en local : http://localhost/… ou http://127.0.0.1/...
Sinon le compteur n'apparaît pas.

Chaque fois qu'un incident se produit, le programme crée et écrit dans un fichier d'erreur
"counter.err".
Les lignes qui vont suivre décrivent quelques incidents rencontrés jusqu'à présent.
Pas de compteur publié. Un changement de répertoire de base au niveau du site visant
un répertoire de niveau inférieur au répertoire par défaut ne
permet plus à MMC de visualiser le répertoire « cgi-bin », et
donc de pointer le "compteur".

Message : Cette erreur intervient dans le cas ou l'adresse IP de la station


qui sollicite le compteur n'est pas déclaré dans le fichier de
configuration counter.cfg sous le bloc [Allow-Access To].

Message : "ERROR with link Erreur syntaxique au niveau des paramètres du compteur du
argument : check counter.err" code source HTML de la page Web appelante .
Message : "ERROR creating Il manque des fichiers d'environnement sous cgi-bin
final image : nécessaires à la création de l'image finale du compteur.
check counter.err"

Conclusion
A la fin de ce chapitre, le lecteur possède dorénavant un certain nombre d'éléments susceptibles
de l'aider non pas à concevoir une application Web (nécessité d'une plate-forme de
développement), mais de l'aider à effectuer intelligemment en fonction de l'architecture de son
système d'information, des performances de sa plate-forme matérielle et du but recherché par l'
(les) application(s) à développer, le bon choix technique.

Pour aller plus loin dans le sujet, voici quelques ouvrages qui peuvent intéresser le concepteur !

Bibliographie :
Editeur Année Titre Auteurs

Ingram 2000 High Performance Isapi/Nsapi Web T. Beveridge, P. McGlashan


Programming

O'Reilly 2001 Programmation CGI en Perl Guelich, Gundavaram et


Birznieks

1999 Servlets Java, guide du programmeur Hunter & Crawford

1998 Introduction à Perl Schwartz & Christiansen

Campus Press 2001 Perl 5 (Le tout en poche) Clinton Pierce

OEM 2001 Active Server Pages 3 Totale initiation A.Ricart S.Asbury

Campus Press 2001 PHP versions 3 et 4 C.Cosentino

OEM 2000 PHP 4 Totale initiation T.Converse J.Park


OEM 2001 Vos premiers pas avec PHP 4 J.Engels

Das könnte Ihnen auch gefallen