Compteurs d'accès Web

L'installation d'un compteur d'accès sur votre site web vous permet d'avoir un retour d'informations sur le nombre de personnes qui consultent effectivement votre site. La présence d'un compteur permet également aux lecteurs d'en connaître la popularité...

Il existe deux méthodes pour compter les accès:

  • Examiner le fichier de log de votre serveur http.
  • Intégrer un appel à un programme CGI depuis l'une de vos pages.

Simple et efficace

Nous allons ici nous intéresser uniquement à la deuxième méthode, qui consiste à appeler un programme CGI "compteur" depuis une page HTML. Le principe en est le suivant: à chaque fois qu'un client charge la page HTML en question, il y trouve une image intégrée à l'aide du marqueur <IMG>. Il demande donc le chargement de cette image. Or il se trouve que cette image fait en fait référence à un programme CGI. Ledit programme CGI consulte son fichier compteur, l'incrémente de 1 puis produit en temps réel une petite image représentant les chiffres d'un compteur...

Certains compteurs permettent aussi de ne pas afficher de compteur et se contentent alors d'enregistrer les accès dans un fichier. Pour ne pas afficher le compteur, le programme va en fait afficher une image GIF transparente de 1 pixel sur 1 pixel!

Inconvénients

Un tel compteur d'accès présente néanmoins quelques limitations:

  • A chaque fois qu'une même personne se reconnecte sur un site, le compteur est incrémenté. Le compteur ne compte donc pas les personnes mais les accès à la page.
  • Le compteur est également incrémenté si un lecteur appuye sur le bouton reload de son browser.
  • Le compteur n'est pas toujours incrémenté si la page est dans le cache local du client.
  • Le compteur n'est jamais incrémenté si un lecteur référence directement une page précise d'un site Web, sans passer par la page de garde (en admettant que seule la page de garde comporte un compteur!) Le compteur ne compte donc pas les accès au service mais à la page de garde su service.

Un certain nombre de ces inconvénients pourraient être contournés avec un compteur s'appuyant sur les fichiers de log du serveur httpd, mais cela se fait au prix d'une plus grande complexité. Nous ne relèverons pas ce défi là ici.


Odometer

Odometer est un compteur très simple écrit en C sous UNIX.

Il est peut être appelé très simplement de la manière suivante:

<IMG SRC="http://www.planete.net/cgi-bin/odometer?test>

Voici le code source en C pour UNIX: odometer.c.

Common Gateway Interface (CGI)

Introduction

La Common Gateway Interface (CGI) est une norme définissant l'interfaçage d'applications externes avec des serveurs d'information (dans le cas qui nous intéresse: des serveurs HTTP).

La motivation qui vous conduira à utiliser CGI pour faire appel à des programmes externes est la suivante: lorsqu'un document HTML est envoyé sur le Web, il s'agit d'un document statique, un fichier texte dont l'information ne change pas tant que vous n'avez pas édité ledit fichier. Il existe néanmoins un grand nombre de cas où vous aimeriez envoyer de l'information dynamique, voire changeante d'un instant à l'autre. Un programme externe appelé par CGI ("programme CGI") permet d'arriver à ce résultat dans la mesure où ce programme est exécuté en temps réel, au moment où le client fait une requête au serveur HTTP.

Imaginez par exemple que vous vouliez connecter votre base de données sous UNIX au World Wide Web de manière à ce que les gens du monde entier puissent l'interroger en temps réel. Pour ce faire, vous pouvez créer un programme CGI que le serveur HTTP invoquera pour transmettre des critères de recherche au moteur de votre base de données et recevoir les résultats de la recherche qu'il transmettra alors au client pour affichage. Ceci est un exemple typique de passerelle - gateway en anglais - d'où le nom de Common Gateway Interface.

Cet exemple de base de données est une idée relativement simple mais néanmoins assez délicate à implémenter dans les faits. Il existe en fait un grand nombre d'applications beaucoup plus simples de CGI, par exemple: inclure l'heure courante dans un document HTML. Mais il n'y a pratiquement aucune limite à ce que vous pouvez faire avec un programme CGI. Rappellez vous simplement que votre programme est exécuté en direct et ce que vous y faites ne doit donc pas prendre trop de temps, faute de quoi l'utilisateur ne ferait rien d'autre que d'attendre devant un écran vide que votre programme veuille bien envoyer de l'information.

 


Spécification

Etant donné qu'un programme CGI est un exécutable, son utilisation correspond quasiment à laisser n'importe qui dans le monde e xécuter un programme sur votre ordinateur... ce qui n'est pas précisément la chose la plus sûre à faire (piratage, malveillance, virus...). Cela induit la nécessité de prendre quelques précautions au niveau de la sécurité.

L'une des précautions qui affectera le plus la plupart des utilisateurs est le fait que tous les programmes CGI devront généralement être placés dans un repértoire spécifique de l'arborescence, généralement nommé cgi-bin. Lorsque le serveur reçoit alors une requête sur une URL du type http://www.dom.org/cgi-bin/prog.html il saura qu'il doit exécuter le programme nomméprog.html plutôt que de l'envoyer tel quel vers le client comme on aurait pu s'y attendre à la vue de l'extension .html. En effet, tout fichier se trouvant dans le répertoire cgi-bin sera considéré par le serveur HTTP comme étant un exécutable.

D'autre part, le répertoire cgi-bin est généralement contrôlé par l'administrateur du serveur. Cela a deux conséquences:

  • N'importe qui ne peut pas créer un programme CGI et l'administrateur du serveur peut vérifier leur sécurité avant de les rendre accessible au public.
  • Le serveur HTTP n'exécutera que les programmes se trouvant dans ledit répertoire ou l'un de ses sous-répertoires et n'exécutera jamais un programme placé ailleurs sur vos disques. Cela empêchera un individu malveillant d'éxécuter n'importe lequel des programmes figurant sur votre ordinateur depuis l'autre bout de la planète. Cela empêchera également n'importe quel utilisateur (par exemple vous!) autorisé à placer des pages HTML sur un serveur d'y placer également des programmes CGI sans visa de l'administrateur.

Il existe d'autres moyens de faire éxécuter un programme CGI par votre serveur HTTP, mais seul l'administrateur du serveur peut les mettre en place. Un administrateur particulièrement laxiste laissera par exemple son serveur exécuter n'importe quel fichier possèdant l'extension .cgi.

En pratique, les utilisateurs peuvent souvent placer librement des documents statiques (pages HTML, images, etc.) sur le serveur Web de leur organisation en les copiant dans un répertoire spécial. Par contre, ils ne peuvent généralement pas rendre leurs programmes accessibles par le Web en utilisant CGI parce qu'ils n'ont pas la permission de les copier dans le répertoire cgi-bin.

Dans la majorité des cas, vous devrez donc vous adresser à l'administrateur de votre serveur WWW pour installer un programme CGI... à moins que vous ne soyez administrateur de serveur vous même!

Un programme CGI peut être écrit dans la plupart des langages disponibles sur vot re système. Les seules conditions sont que le langage en question vous donne accès aux variables d'environnement et qu'il permette d'écrire sur la sortie standard. Parmi les langages que vous pouvez utiliser vous trouverez:

  • C et C++
  • Fortran
  • Perl
  • TCL
  • sh, csh, ksh ou n'importe quel autre shell UNIX
  • Visual Basic (sous Windows)
  • AppleScript (sur Macintosh)

Si vous utilisez un langage de programmation tel que C, C++ ou Fortran, vous savez que vous devez compiler vos programmes avant de pouvoir les exécuter. Par contre, si vous utilisez un langage de script tel que Perl, TCL ou un shell UNIX, vous pouvez directement exécuter le fichier source (pour être précis, on doit dire que le fichier source sera interprété).

Attention: Dans tous les cas, vérifiez que le fichier à exécuter possède bien une permission d'exécution, en particulier si vous êtes sous UNIX.

Beaucoup de personnes préfèrent écrire leurs programmes CGI sous forme de scripts plutôt que sous forme de programmes compilés. En effet, sous forme de scripts, ils sont plus faciles à débugguer, à modifier et à maintenir. Un autre avantage du script est que l'administrateur du serveur peut vérifier facilement que ledit script n'ouvre pas de brèche dans la sécurité du système. Un script interprété induit néanmoins une sérieuse dégradation de performances par rapport à un programme compilé. 


Exemples

Voici deux exemples relativement simples de scripts CGI.

  • Date courante est un script CGI extrêmement simple qui produit un document HTML contenant la date et l'heure courantes. 
    Le code source est écrit en sh
  • Interface finger est un script CGI un peu plus compliqué qui prend un paramètre en entrée. Si aucun paramètre n'est fourni, le script affiche un champ ISINDEX pour que l'utilisateur saisisse un nom. Une fois que ce nom est saisi, le script s'appelle lui même à nouveau, mais cette fois, le nom saisi est transmis en argument. Dans ce cas, c'est à dire lorsque le script est appelé avec un argument, il appelle la commande UNIX finger et intègre le résultat de cette commande dans la document HTML qu'il produit. 
    Le code source est écrit en sh.

Mettre en place un serveur HTTP

Introduction

Un serveur HTTP est un logiciel qui, lorsqu'il est lancé sur une machine reliée à Internet, permet à tout utilisateur d'Internet de se connecter sur cette machine avec un client HTTP tel que Netscape Navigatoir ou NCSA Mosaic et d'obtenir des informations, en particulier des documents HTML.

On parle de serveur HTTP parce que leur rôle est de répondre à des requêtes et d'envoyer des pages d'information en utilisante le protocole HTTP (HyperText Transfer Protocol). Néanmoins, ces serveurs font souvent beaucoup plus que celà... à tel point qu'on pourrait se demander si l'appellation "serveur HTTP" n'est pas un peu réductrice. On parlera également de "Serveur WWW" ou de "HTTPd", le 'd' signifiant ici daemon, terme utilisé dans la terminologie UNIX pour désigner un programme qui attend en permanence des évènements (ici des requêtes HTTP) pour entreprendre des actions (ici envoyer des documents par HTTP). 

Bénéfices

Les bénéfices que vous tirerez de la mise en oeuvre de votre propre serveur HTTP sont multipes. Tout d'abord, si votre organisation ne dispose encore d'aucun serveur web, vous devez choisir entre faire héberger votre service web chez un prestataire ou alors installer votre propre serveur web.

Par ailleurs, même si votre organisation dispose déjà d'u ou plusieurs webs, il peut quand même être intéressant de disposer de votre propre serveur, par exemple pour avoir un contrôle direct sur vos programmes CGI ou sur les statistiques de connexions.

Dans tous les cas, les possibilités offertes à l'administrateur d'un serveur WWW sont bien plus larges que celles de la personne qui se contente d'écrire quelques pages HTML et de les placer sur un serveur géré par quelqu'un d'autre. Aussi, si vous en avez le temps et les moyens, vous devriez probablement commencer à envisager la possibilité d'administrer votre propre serveur...

 

Quel serveur choisir?

A ce jour, vous avez le choix entre plus de 40 serveurs HTTP dont un certain nombre sont gratuits. En voici une liste non exhaustive (mais assez complète quand même). En sélectionnant un nom dans la liste vous accéderez au service WWW dédié à ce serveur.

Plusieurs critères sont à prendre en compte lors du choix de votre serveur:

  • Exigences marérielles et logicielles

    • Disponibilité sur votre plate-forme serveur
    • Disponibilité pour votre système d'exploitation
  • Niveau de support Technique
  • Prix
  • Capacité à offirir des services Web différents pour des adresses IP différentes
  • Enregistrement de journal (Logs)

    • Compatibilité avec syslog (UNIX) ou EventLog (Windows NT)
    • Utilisation du format commun CERN/NCSA
    • Archivage/cyclage automatique des fichiers jounral
    • Posssibilité de personnalisé les enregistrements de hits
    • Possibilité de logguer dans plusieurs fichiers différents
    • Possibilité de générer des enregistrements spéciaux dans les fichier de log(commentaires...)
    • Possibilité pour les scripts CGI de créer leurs propres entrées de log
    • Logs de mesure de performances
  • Richesse du protocole

    • Réponse automatique à "If-Modified-Since"
    • Selection de fichiers basé sur le header "Accept"
    • Changer d'action basé sur le header "User-Agent"
    • Répondre avec des documents différents basé sur des headers clients tels que "Accept", "User-Agent" et "URL"
    • Inclusions faites par le serveur
    • Inclusions faites d'après commentaires HTML (sans utilisation de CGI)
    • Inclusion automatique de headers HTTP pour les documents non HTML (sans utilisation de CGI)
    • Accès au variables d'état du serveur depuis CGI
    • Possibility d'envoyer des documents ou images dynamiques (Server Push)
  • Sécurité

    • Possibilité d'exiger un mot de passe
    • Support de SSL
    • Support de S-HTTP
    • Restriction à certains noms de domaines
    • Restrictions à certaines adresses IP
    • Accès à certaines hierarchies selon l'adresse IP
    • Groupes d'utilisateurs configurables
    • Possibilité de changer la liste de contrôles d'accès sans redémarrer le serveur
    • Restrictions d'accès à certains fichiers
    • Encryptage et authentification par clé publique
  • Autres fonctions

    • Outils de configuration graphiques
    • Outils de maintenance graphiques
    • Maintenance à distance pendant que le serveur tourne
    • Outils de mesure de performances temps-réel
    • Implmente d'autres protocoles (ftp, gopher...)
    • Arborescence automatique
    • Gestion des répertoires utilisateurs
    • Inclue un moteur de recherche
    • Peut servir de serveur proxy
    • Peut servir de serveur proxy avec cache

Comment créer un formulaire HTML

Les formulaires apportent la vraie interactivité, celle qui donne vie au Web! Aussi sophistiquées qu'elles soient, sans formulaires vos pages HTML sont en lecture seule. Les formulaires permettent à l'utilisateur de vous renvoyer un commentaire sur vos pages, de spécifier un critère de recherche dans une base de données ou encore d'effectuer un choix complexe parmi plusieurs alternatives.

Vous trouverez ci-dessous les différents types de champs que vous pouvez combiner dans un formulaire. Ces champs doivent être définis à l'intérieur d'une section formulaire délimitée par <FORM> et</FORM>.

Note: Ce document explique comment réaliser des pages HTML contenant un formulaire, mais pas comment vous pouvez récupérer et traiter les données que l'utilisateur a entrées dans ledit formulaire. Nous verrons comment effectuer ce traitement lorsque nous aborderons la Common Gateway Interface.

 


Début de formulaire.

Champs simples

Chaque champ est défini avec le marqueur <INPUT>. Le champ de saisie le plus simple est de la forme suivante:

Tapez votre nom: 

<INPUT NAME="Nom">

 

  • NAME permet de préciser le nom du champ pour traitement ultérieur.
  • VALUE permet de donner une valeur par défaut au champ.
  • SIZE permet de préciser la longueur visible du champ. Notez que si l'utilisateur dépasse la fin du champ, son contenu défilevers la gauche.

Tapez votre adresse e-mail: 

<INPUT NAME="e-mail" VALUE="Joe.Sixpack@supermarket.com" SIZE=40>
  • MAXLENGTH permet de limiter le nombre de caractères pouvant être tapés dans le champ.

Code Postal:  (Maximum 5 chiffres)

<INPUT NAME="CP" SIZE=5 MAXLENGTH=5>

 

Type password

Lorsque vous voulez que l'information tapée par l'utilisateur n'aparaisse pas à l'écran, vous devez utilisez l'attribut TYPE=PASSWORDATTENTION: L'utilisation de cet attribut ne grantit pas pour autant une confidentialité absolue des données tapées, celles-ci pouvant toujours être écoutées lors de leur transfert sur Internet.

Mot de passe: 

<INPUT TYPE=PASSWORD NAME="Pass">

Cases à cocher et boutons de sélection

Vous pouvez créer une case à cocher grâce à l'attribut TYPE=CHECKBOX. Pour pré-cocher une case, ajoutez l'attribut CHECKED.

 Je suis déjà client de votre société.
 Envoyez-moi une brochure.

<INPUT NAME="Client" TYPE=CHECKBOX>
<INPUT NAME="Brochure" TYPE=CHECKBOX CHECKED>

Le type RADIO vous permet de définir des boutons radio. La particularité de ces boutons est que vous ne pouvez sélectionner qu'un seul bouton radio portant un certain NAME à la fois. Ceci sera utilisé lorsque l'utilisateur doit faire un choix exclusif entre plusieurs options.

Vous êtes:
 Un Homme
 Une Femme

<INPUT NAME="Sexe" VALUE="H" TYPE=RADIO CHECKED>
<INPUT NAME="Sexe" VALUE="F" TYPE=RADIO>

Champ de texte

Lorsque vous voulez permettre à l'utilisateur de saisir un message de plusieurs lignes, utilisez le marqueur <TEXTAREA>:

<TEXTAREA NAME="Commentaire" ROWS=8 COLS=55>
Bonjour,
j'ai un problème et je vais vous l'expliquer:
</TEXTAREA>
  • L'attribut ROWS permet de préciser le nombre de lignes de la fenêtre de saisie.
  • L'attribut COLS permet de préciser le nombre de colonnes de la fenêtre de saisie.
  • Vous pouvez préciser un texte par défaut en l'insérant entre <TEXTAREA> et </TEXTAREA>.

Listes de sélection:

Les boutons radios conviennent pour effectuer un choix entre 2 ou 3 options concurrentes. Au delà, il est recommandé d'utiliser une liste de sélection. Ceci se fait en utilisant le marqueur <SELECT>. Chaque option étant ensuite définie au moyen du marqueur <OPTION>.

Vous voulez: 

<SELECT NAME="Action">
 <OPTION> Emettre un avis
 <OPTION> Réclamer
 <OPTION SELECTED> Raler
 <OPTION> Crier votre haine
</SELECT>

Vous pouvez utiliser l'attribut SIZE pour préciser le nombre de lignes visibles de la liste de sélection:

Vous voulez: 

 

<SELECT NAME="simple" SIZE=3>
 <OPTION> Emettre un avis
 <OPTION> Réclamer
 <OPTION SELECTED> Raler
 <OPTION> Crier votre haine
</SELECT>

Finalement, vous pouvez également définir une liste de sélection multiple en utilisant l'attribut MULTIPLE:

Garniture(s): 

<SELECT NAME="multi" MULTIPLE>
 <OPTION> Anchois
 <OPTION SELECTED> Trois Fromages
 <OPTION> Epices
 <OPTION SELECTED> Ananas
 <OPTION> Olives
</SELECT>

Champ caché

Vous ne le voyez pas, mais ce formulaire contient un champ caché. L'utilisateur ne peut pas en modifier son contenu. Même si l'intérêt de ce type de champ ne vous paraît pas évident à priori, il permet tout de même de passer des paramètres supplémentaires aux scripts qui traitent les données du formulaire. Voir Common Gateway Interface.

<INPUT TYPE=HIDDEN NAME="Cache" VALUE="Demo">

Boutons d'action

 Votre formulaire devra finalement comporter un bouton de validation qui déclenchera l'envoi des données saisies vers le serveur. Ce bouton est défini de la manière suivante:

<INPUT TYPE=SUBMIT VALUE="Envoyer">

 Vous pouvez également ajouter un bouton qui remet le formulaire dans son état initial (valeurs par défaut):

<INPUT TYPE=RESET VALUE="Effacer">

Fin de formulaire.

Transmission des données

Le marqueur FORM accèpte plusieurs attributs permettant de spécifier ce qui doit être fait lorsque l'utilisateur veut envoyer les données au serveur.

ACTION="url" permet d'indiquer l'URL de la page, ou plutôt du programme CGI à appeler lorsque l'on clique sur le bouton de validation. L'attribut METHOD permet d'indiquer la méthode de transmission des données saisies dans le formulaire. Il y en a deux:

  • La méthode GET est la méthode par défaut. Elle consiste à concatèner les données du formulaire à l'URL, après avoir inséré un point d'intérrogation. On obtient alors une URL du typehttp://www.dom.org/chemin/prog.html?données.
  • La méthode POST consiste à envoyer les données au serveur dans le corps de la requête plutôt qu'en tant que partie de l'URL.

Il est recommandé d'utiliser la méthode POST.

L'attribut ENCTYPE permet de spécifier la manière dont doivent être encodées les données envoyées par la méthode POST. Seule la méthode par défaut peut être utilisée pour l'instant: application/x-www-form-urlencoded.

Comment créer un tableau HTML

HTML 3.0 permet de mettre en forme des tableaux. Cette fonction est également supportée dans une version réduite par Netscape Navigator depuis la version 1.1 et d'autres browsers actuels.

Les marqueurs à utiliser sont les suivants:

  • <TABLE> et </TABLE> encadrent l'ensemble de la définition du tableau. Par defaut les cellules du tableau ne sont pas encadrées. En spécifiant l'attribut BORDER votre tableau aura un aspectquadrillé
    Pour définir le contenu du tableau vous utiliserez les marqueurs suivants:

    • <CAPTION> permet de définir le titre du tableau. Par défaut, ce titre apparaît au dessus du tableau. Si vous voulez le faire apparaitre en dessous, utilisez l'attribut ALIGN=BOTTOM.
    • <TR> permet de définir une ligne du tableau. Il doit y avoir autant de <TR> que de lignes dans le tableau. En théorie, chaque ligne doit se terminer par </TR> mais ceci est optionnel. 
      Pour définir le contenu de chaque ligne, vous utiliserez les marqueurs suivants:

      • <TD> permet de définir une cellule de données. Vous pouvez définir des cellules vides.
      • <TH> permet de définir une cellule de titre. Le contenu d'une telle cellule apparait généralement en gras par rapport à une cellule de données. Ce type de cellule est normalement utilisé pour donner un titre à chaque ligne et à chaque colonne.

Le texte à l'intérieur des cellules peut être aligné grâce aux attributs suivants de TD et TH: (Si ils sont utilises comme attributs de TR, ils s'appliquent à une ligne complète)

  • ALIGN= qui peut prendre les valeurs LEFT, CENTER ou RIGHT.
  • VALIGN= qui peut prendre les valeurs TOP, MIDDLE, BOTTOM ou BASELINE.

Vous trouverez ci-dessous un exemple de tableau contenant un titre, des cellules de titre, des cellules de données et des cellules absentes/vides.

 

Mélange de couleurs
CouleursRougeVertBleu
Rouge   Jaune Magenta
Vert Jaune   Cyan
Bleu Magenta Cyan  

Ceci a été obtenu grâce au code source suivant:

<TABLE BORDER>
<CAPTION ALIGN=BOTTOM> Melange de couleurs </CAPTION>
  <TR><TH> Couleurs </TH><TH> Rouge   </TH><TH> Vert  </TH><TH> Bleu    </TH></TR>
  <TR><TH> Rouge    </TH><TD>         </TD><TD> Jaune </TD><TD> Magenta </TD></TR>
  <TR><TH> Vert     </TH><TD> Jaune   </TD><TD>       </TD><TD> Cyan    </TD></TR>
  <TR><TH> Bleu     </TH><TD> Magenta </TD><TD> Cyan  </TD><TD>         </TD></TR>
</TABLE>

Il est également possible de fusionner plusieurs cellules, soit horizontalement, soit verticalement, grâce aux attributs suivants de TD:

  • COLSPAN=x ou x est le nombre de colonnes standard que doit couvrir cette cellule large.
  • ROWSPAN=y ou y est le nombre de lignes standard que doit couvrir cette cellule haute.

Voici un exemple:

 

On rigole
A 3
B 2
Coin! 1

Ceci a été obtenu grace au code source suivant:

<TABLE BORDER>
<caption> On rigole</caption>
  <tr> <td COLSPAN=3> A </td> <td ROWSPAN=3> 3 </td> </tr>
  <tr> <td COLSPAN=2> B </td> <td ROWSPAN=2> 2 </td> </tr>
  <tr> <th> Coin! </th> <td> 1 </td> </tr>
</TABLE>

Voici un dernier exemple sans bordure:

ArticlePrix
Papier 44.99
Encre 178.55
<TABLE>
<TR><TH>Article</TH><TH>Prix</TH>
<TR><TD ALIGN=RIGHT>Papier</TD><TD ALIGN=RIGHT>44.99</TD>
<TR><TD ALIGN=RIGHT>Encre</TD><TD ALIGN=RIGHT>178.55</TD>
</TABLE>