Ip 3
Ip 3
Ip 3
Marc Tommasi
Octobre 2000
The idea of networking is probably as old as telecommunications itself. Consider people
living in the stone age, where drums may have been used to transmit messages between
individuals. Suppose caveman A wants to invite caveman B for a game of hurling rocks
at each other, but they live too far apart for B to hear A banging his drum. So what are
A’s options ? He could 1)-walk over to B’s place, 2)-get a bigger drum, or 3)-ask C,
who lives halfway between them, to forward the message. The last is called networking.
The Network Administrators’ Guide. Olaf Kirch
i
Table des matières
1 Réseaux locaux 2
1.1 Un réseau local (LAN) : pour quoi faire ? . . . . . . . . . . . . . . . . . . . . . . . 2
1.2 Le matériel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
1.3 Se connecter au réseau local . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
1.4 À partir de chez soi . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
1.5 Le logiciel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
1.6 Système Client/Serveur ou réseau poste à poste . . . . . . . . . . . . . . . . . . . . 5
2 Internet 7
2.1 Services Internet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
2.2 Technologie Internet — Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . 8
2.3 Les adresses . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
2.4 Internet et le Client-Serveur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
2.5 TCP/IP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
2.5.1 Principes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
2.5.2 Remarques et extensions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
2.5.3 Configuration dans un réseau local . . . . . . . . . . . . . . . . . . . . . . . 13
2.5.4 Configuration depuis chez soi . . . . . . . . . . . . . . . . . . . . . . . . . . 14
2.6 Moteurs de recherche . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
2.6.1 Constitution de l’annuaire . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
2.6.2 Formuler une question . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
2.6.3 Rechercher dans l’annuaire . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
2.6.4 Procédés techniques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
2.6.5 Comment se faire connaı̂tre ? . . . . . . . . . . . . . . . . . . . . . . . . . . 16
2.7 Autres cookies, cache, proxy et firewall . . . . . . . . . . . . . . . . . . . . . . . . . 16
2.7.1 Le cache du navigateur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
2.7.2 Les cookies . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
2.7.3 Les pare-feu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
2.7.4 Le serveur mandataire . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
3 La messagerie électronique 18
3.1 Adresses électroniques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
3.2 Clients et serveurs de messagerie . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
3.3 Logiciels . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
3.4 Un message électronique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
3.5 Configurer sa messagerie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
3.6 Attachements MIME . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
3.6.1 MIME . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
3.6.2 Attachements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
3.7 Icq, Irc, etc . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
3.7.1 Irc . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
3.7.2 Icq . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
ii
4 Le langage HTML 26
4.1 Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26
4.2 Principes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26
4.3 Images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
4.4 Formulaires . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
4.5 Feuilles de style . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
6 PHP et Javascript 37
6.1 PHP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37
6.1.1 Échappement, constructions . . . . . . . . . . . . . . . . . . . . . . . . . . . 37
6.1.2 Variables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37
6.1.3 Opérateurs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38
6.1.4 Structures de contrôle . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38
6.1.5 Fonctions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38
6.1.6 Tableaux . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39
6.1.7 Traitement de formulaires . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40
6.1.8 Accès aux bases de données . . . . . . . . . . . . . . . . . . . . . . . . . . . 41
6.1.9 Fonctions usuelles, exemples et exercices . . . . . . . . . . . . . . . . . . . . 42
iii
Avertissement
Une version de ce document est disponible en téléchargement sur
http ://www.grappa.univ-lille3.fr/polys
avec bien d’autres polys d’ailleurs. Des versions au format LaTeX sont bien entendu disponibles à
l’adresse
http ://www.grappa.univ-lille3.fr/polys/IP3/ip3.tgz
sous forme d’archive compressée avec les programmes gzip et tar. Enfin, une version pdf est aussi
disponible : http ://www.grappa.univ-lille3.fr/polys/IP3/ip3.pdf .
Marc Tommasi
iv
Une petite histoire
Les premiers réseaux ne sont pas informatiques mais liés aux télécommunications. Les réseaux
du télégraphe (à partir de 1850) puis du téléphone, puis du télétype sont les ancêtres des réseaux
informatiques d’aujourd’hui et beaucoup de principes encore en cours leur sont dûs. Par exemple,
le système de codage Morse préfigure bien des techniques de numérisation1 actuelles. Le symbole A,
est codé en Morse par « trait court, trait long » pour être par exemple transmis par le télégraphe.
Aujourd’hui on peut dire que le principe reste le même mais c’est le code qui a changé : ce sera peut
être son code ASCII (01000001) qui sera transmis sur les câbles électriques. Au niveau physique,
les réseaux fonctionnent alors selon des règles similaires, un échange d’impulsions électriques sur
un fil, plus ou moins longues pour le Morse, ou alternées pour les réseaux modernes. Lorsque sur
le support de communication les informations à transmettre sont codées de la sorte, on parle de
réseau numérique.
Le réseau téléphonique est régi par un principe différent. La voix est convertie par le microphone
(une membrane qui bouge en fonction du mouvement d’air que forme le son) en signal électrique
qui varie en hauteur et fréquence (c’est une modulation) selon le volume et la hauteur du son à
transmettre. De l’autre côté, le signal électrique est transformé par le haut parleur (une nouvelle
membrane qui fait l’opération inverse). C’est le principe du fameux téléphone des enfants construit
avec une cordelette et deux pots de yaourt. On parle alors de réseau analogique en opposition aux
réseaux numériques.
Mais dès les années 60, les ingénieurs ont voulu connecter des ordinateurs aux réseaux téléphoniques.
Ils ont inventé pour cela un appareil capable de transformer un signal analogique (modulé) en un
signal numérique (démodulé) et vice versa. C’est le modem ou modulateur/démodulateur, au-
jourd’hui bon marché et présent dans de nombreux foyers sous forme de minitel, ou encore en
association avec des ordinateurs personnels.
Les premiers réseaux informatiques ont été constitués d’un ensemble de terminaux simples
autour d’ordinateurs centraux puissants. Par terminaux simples, on entend des machines ayant
un clavier et un écran mais aucune unité de calcul. Ils étaient incapables d’effectuer quoi que
ce soit de façon autonome. Tout était dirigé par l’ordinateur central. On parle alors de relation
maı̂tre/esclave. Cette organisation existe encore et retrouve même un certain succès après avoir
été décriée dans les années 80/90. La plupart des terminaux avaient alors une liaison directe à
l’ordinateur central, mais ce dernier restait accessible à plus grande distance à l’aide de modems.
Le minitel fonctionne de cette manière encore de nos jours.
Un degré de difficulté a été franchi lorsqu’on a voulu faire coopérer les ordinateurs et non
seulement relier un poste à un site central. Motivées par des raisons économiques mais aussi par le
désir de mieux communiquer, les entreprises se sont équipées de réseaux locaux. Pour y parvenir,
un effort de normalisation était nécessaire, aussi bien au niveau des câbles et des connecteurs que
du codage des informations qui empruntent le réseau. Les réalisations des constructeurs des années
60/70 différaient trop pour envisager une coopération simple des ordinateurs. Les organisations
comme IBM, Xerox ou le Département de Défense américaine (DoD) vont initier un mouvement
de normes.
Aujourd’hui la plupart des ordinateurs (largement plus d’un sur deux) sont connectés à des
réseaux locaux (LAN), eux-mêmes reliés à des réseaux urbains (MAN), puis des réseaux mondiaux
(WAN).
1
Chapitre 1
Réseaux locaux
Pour mieux comprendre comment Internet par exemple fonctionne, il est nécessaire de détailler
dans un premier temps ce qu’est un réseau local. Un réseau local est limité à une partie de bâtiment,
un étage.
1.2 Le matériel
Conceptuellement, un réseau est un ensemble d’ordinateurs et d’équipements informatiques,
appelés noeuds et reliés entre-eux. Logiquement cette liaison suit une topologie, c’est-à-dire, une
forme géométrique. Il existe différentes topologies possibles :
Le bus. C’est la topologie la plus simple, mais elle a des inconvénients. Il est nécessaire d’avoir
des répéteurs lorsque le nombre d’ordinateurs augmente. Un problème sur le câble entraı̂ne
une panne du réseau.
L’anneau. C’est, en fait, un bus refermé sur lui-même.
L’étoile. Tous les ordinateurs sont reliés à un dispositif matériel central appelé hub. Chaque
noeud est indépendant des autres.
Dans un réseau, chaque noeud est identifié par une adresse.
Physiquement, il existe beaucoup de moyens de relier des ordinateurs. Les fils coaxiaux, des
paires de cuivre torsadées, blindées ou non, et même des ondes.
Ethernet est une norme (IEEE 802.3) qui définit les types de câble à employer, la façon de les
relier et la méthode utilisée pour transmettre les données. D’autres normes existent (ATM, token
ring, arcnet, par exemple), qui sont parfois complémentaires ou concurrentes. Nous ne parlerons,
pour illustrer notre propos, que de la norme Ethernet car c’est la norme la plus répandue.
2
Fig. 1.1 – Topologie en bus, étoile et anneau
Les adresses sont fournies par le constructeur de l’équipement réseau. C’est donc un numéro «
en dur », qui ne peut être modifié, unique au niveau mondial et donné dès la fabrication.
Les types de câble. Les trois types de câble sont : le coaxial épais, le coaxial fin et la paire
torsadée. Le coaxial épais est utilisé pour relier des réseaux entre des bâtiments différents.
Le coaxial fin est utilisé pour des petits réseaux (à partir d’une certaine taille, il faut utiliser
des répéteurs). Le câblage en paire torsadée est actuellement le plus utilisé pour câbler les
immeubles et bâtiments car moins cher et pouvant être utilisé pour le réseau téléphonique.
Les connexions. La topologie est en étoile ou en bus. Il faut aussi connecter le câble aux ordi-
nateurs. L’ordinateur doit être muni d’une carte réseau compatible avec la norme ethernet,
l’ordinateur et le câble. Les raccords entre la carte et le coaxial fin se font à l’aide de prises
BNC, entre la carte et la paire torsadée à l’aide de prises RJ-45.
Les transmissions. La vitesse de transmission est de 10Mbps (1.2 million de caractères par se-
conde) ou 100 Mbps ; la méthode utilisée pour contrôler le flot d’informations est la méthode
CSMA/CD (Carrier Sense Multiple Access / Collision Detection).
La vitesse de transmission est une vitesse théorique maximale et n’est pas souvent atteinte
pour une raison qui s’explique en étudiant la méthode CSMA/CD. En effet, les ordinateurs pour-
ront, après avoir testé s’ils sont bien connectés et que le support de transmission est actif (CS
carrier sense), commencer à dialoguer et ceci à n’importe quel instant. Il n’y a pas de contrôle a
priori et toutes les machines peuvent émettre en même temps. C’est la signification du MA pour
multiple access. Le contrôle est effectué a posteriori. Si les éléments du réseau (cartes, hubs, ...)
ont constaté une collision (CD), c’est-à-dire deux machines qui utilisent le support exactement en
même temps, le signal est perturbé et l’information perdue. Une nouvelle émission est nécessaire.
Lorsque le nombre d’ordinateurs reliés est faible, il y a peu de collisions et la vitesse de transfert
des informations est proche de sa limite maximale. Par contre, lorsque le nombre d’ordinateurs
3
est grand, le réseau est très vite encombré et les performances chutent. Le réseau doit rester local
pour rester utilisable.
Les autres protocoles, concurrents d’Ethernet fonctionnent différement mais des limitations de
taille comparables sont toujours présentes. Pour constituer de grands réseaux, il faut absolument
agglomérer des réseaux plus petits.
1.5 Le logiciel
Il existe toute une gamme de logiciels nécessaires au bon fonctionnement d’un réseau. Il est hors
de propos dans cet exposé de présenter toute la complexité (due à la diversité des protocoles et aux
différents niveaux) de tous ces logiciels. On parle de Middleware pour désigner l’ensemble des
logiciels qui font croire à l’utilisateur (le client) que tous les serveurs locaux (et du monde) forment
un système unique. Nous ne nous intéressons ici qu’au Middleware NOS (Netware Operating
System), i.e. aux systèmes d’exploitation réseau. C’est, en effet, la partie visible (en partie) pour
l’utilisateur situé sur un poste client.
La connexion à un réseau local s’assimile à l’adjonction d’un nouveau périphérique. Ce périphérique
est plus complexe que les périphériques locaux habituels et le système d’exploitation n’a pas tou-
jours été conçu pour le prendre en compte. Il faut alors ajouter une couche au système d’exploita-
tion pour prendre en compte le réseau ou utiliser un système d’exploitation de réseau. On peut, à
l’aide de ce système, accéder à toutes les ressources disponibles sur le réseau (fichiers, programmes,
4
périphériques, ...). Par exemple, lancer une impression sur une imprimante distante se fait en choi-
sissant l’imprimante puis en lançant une impression. L’utilisateur ne se préoccupe pas de la façon
dont les données sont envoyées, ni comment elles transitent sur le réseau, ni comment l’imprimante
les récupère, ni où se trouve l’imprimante (sauf pour aller récupérer le résultat de l’impression !).
L’une des fonctions du NOS est de rendre la localisation physique des ressources transparente
aux applications. Dans les systèmes d’exploitation de réseau sont fournies des applications utili-
taires : gestion des files d’attente d’impression, optimisation des accès pour les serveurs de fichiers,
passerelles vers l’extérieur, progiciels de messagerie, systèmes de sauvegarde de fichiers à distance,
procédures de sécurité, services de communication entre machines hétérogènes. La qualité de ces
utilitaires conditionne souvent le choix du système d’exploitation. Les principaux systèmes d’ex-
ploitation intègrent des fonctions pour la prise en charge du réseau. Par contre, certains sont
orientés pour équiper les serveurs :
UNIX/Linux issu du milieu informatique universitaire, UNIX est le creuset de l’industrie in-
formatique. UNIX est disponible sur postes clients et sur serveurs. Il existe de nombreuses
versions d’UNIX, ce qui nuit à son développement. UNIX est certainement le meilleur système
généraliste. Mais, il est dépassé par des systèmes spécialisés dans certains domaines d’appli-
cation. Les grands noms autour d’Unix sont SUN, HP, IBM, Digital. Linux est à l’origine
la version d’Unix pour machines Intel. Il est maintenant disponible pour la plupart des
plate-formes.
NT (Microsoft) plate-forme serveur développée par Microsoft et compatible avec Windows (et
pour cause). Ce système est facile d’utilisation pour les programmeurs d’outils Microsoft. Ce
système n’est pas le plus performant.
NETWARE (Novell) la plus importante base de serveurs dans les réseaux locaux a longtemps
appartenu à Netware. Ce système permet d’avoir des serveurs de fichiers rapides et de bons
serveurs de bases de données.
OS/2 (IBM) excellente plate forme serveur, une version existe pour les postes clients. OS/2 est
une des plate-formes client-serveur les mieux gérées de l’industrie.
Les logiciels utilisés doivent être adaptés au réseau (logiciels spécialisés ou ajout de logiciels
prenant en charge l’interface avec le réseau).
5
Dans cette architecture, la sécurité et le contrôle sont quasi inexistants. Aujourd’hui, La
version poste à poste (peer to peer) est remise au goût du jour sur Internet. C’est selon ce
principe que fonctionnent les désormais célèbres Gnutella et napster dédiés à la diffusion de
données musicales.
Système d’exploitation réseau. Ce sont souvent des machines dont l’usage est partagé par
plusieurs utilisateurs. Les machines sont banalisées.
Le système prend en charge le réseau et les applications utilisent le système pour commu-
niquer. Cette organisation a beaucoup d’avantages pour l’utilisateur et les responsables du
réseau.
– Les fonctionnalités de gestion des utilisateurs, des fichiers, de la sécurité sont globalisées
sur le réseau et ne dépendent pas de la machine.
– Il est nécessaire de se connecter via une procédure appelée login, qui authentifie l’utilisa-
teur.
– L’environnement de travail des utilisateurs est personnalisé, mais ne dépend pas de la
machine utilisée : les machines sont banalisées.
Reprenons le cas où la ressource partagée est un fichier. Un utilisateur peut, sans donner
d’instruction spéciale de partage, accéder à ce fichier quelle que soit la machine qu’il utilise.
Cela est possible car l’utilisateur (et pas la machine) possède le fichier. Il peut, s’il le désire,
l’offrir en partage à plusieurs utilisateurs. On peut retrouver une situation comme celle-ci : A
peut modifier certains fichiers, que B ne peut que lire, et auxquels C ne peut pas accéder. Le
système d’exploitation offre souvent la possibilité de définir des groupes d’utilisateurs ayant
les mêmes droits sur les mêmes ressources.
Dans les deux cas, vous aurez, en général, à votre disposition des logiciels spécifiques tels que la
messagerie et des accès vers l’extérieur (Internet par exemple).
6
Chapitre 2
Internet
Les grands réseaux (WAN = Wide Area Networks) ont été construits petit à petit par l’in-
terconnexion de réseaux locaux. Le très médiatique Internet donne une bonne idée de ce que
interconnexion et grand réseau signifient.
7
ouvre par exemple des possibilités pour le travail à domicile, puisqu’il devient possible d’uti-
liser les machines sur son lieu de travail depuis chez soi.
Le Web – WWW Le service le plus connu, le plus récent et maintenant le plus utilisé de consul-
tation d’hyperdocuments. Nous reviendrons dans la section suivante sur l’explication de ce
qu’est un hyperdocument. C’est LE service d’internet. C’est ce service qui l’a rendu attrayant,
et « commercialement utile ».
8
2.3 Les adresses
Dans les années 90, un nouveau service de l’internet est apparu : le World Wide Web, la
toile d’araignée mondiale encore désignée par l’acronyme WWW ou le diminutif Web. C’est ce
service qui assure un certain succès à l’internet. L’idée est de lire des hyperdocuments à l’aide d’un
navigateur.
Un hyperdocument est un document électronique contenant des images, du son, du texte,
parfois des petits morceaux de programme, mais surtout des liens vers d’autres hyperdocuments :
des liens hypertexte. Ces liens apparaissent dans un style qui les distingue, et une simple action
de la souris sur un lien suffit à télécharger et présenter le document lié. Les documents peuvent se
trouver sur n’importe quelle machine (serveur) de l’internet à des endroits parfois très éloignés et
c’est ce qui donne l’impression à l’utilisateur de naviguer sur le réseau.
Le navigateur est l’outil qui permet de lire les hyperdocuments. On l’appelle aussi browser
ou par le nom poétique de butineur et les deux plus connus aujourd’hui sont MicroSoft Internet
Explorer (MSIE) et Netscape. Au début conçu pour ne lire que les hyperdocuments, le naviga-
teur intègre aujourd’hui tous les services de l’internet (e-mail, ftp,...) et se substitue même au
gestionnaire de fichier du système d’exploitation.
Le navigateur désigne par une adresse URL (Uniform Resource Locator), les adresses complètes
de l’internet. C’est une adresse qui contient à la fois le nom d’une machine mais aussi le nom du
service demandé, le nom d’un document, . . .Voici des exemples de format d’adresse URL par type
de service.
http
http ://machine/dossier/.../dossier/document
C’est l’adresse d’un document hypertexte (dans l’arborescence) sur une machine dont le nom
est donné par une adresse domainisée. Exemples :
- http ://www.univ-lille3.fr. Aucun document précis n’est demandé : le document
par défaut est désigné. C’est ce qu’on appelle la page d’accueil.
- http ://www.lifl.fr/LIFL/lifl.html. Le document hypertexte lifl.html dans le
dossier LIFL sur la machine www.lifl.fr est désigné.
- http ://www.lifl.fr/LIFL/lifl.html#equipe. Le même document est demandé mais
avec la précision d’un endroit particulier dans le document, repéré par un nom, ici
equipe. Le mot equipe ne sera pas visible et reste une information interne cachée.
C’est comme un signet dans un livre.
ftp
ftp ://utilisateur :motdepasse/machine/dossier/.../dossier/fichier
On désigne le fichier ainsi que sa localisation dans l’arborescence de la machine. La machine
est donnée par son adresse domainisée. Dans le cas où l’utilisateur n’est pas précisé, l’échange
de fichier sera anonyme (anonymous ftp dans le jargon anglo-saxon) et les droits et les
autorisations relatifs à la copie ou la lecture des fichiers seront limités. Dans le cas où
l’utilisateur est précisé, on hérite des droits et des autorisations de l’utilisateur. Bien sûr, ce
nom doit être présent dans l’annuaire de la machine (c’est quelqu’un de connu).
Exemples :
- ftp ://ftp.netscape.com/pub/communicator. Cette connexion est anonyme.
- ftp ://tommasi :*/messina.lifl.fr/home/infoto/tommasi/toto.doc Je suis connu
sur cette machine, mais je ne vous donnerais pas mon mot de passe ! J’ai plus de droits
qu’un utilisateur anonyme, souvent celui de télécharger des documents sur le serveur
(upload ).
news
news :nom.de.la.news
Les groupes de discussions sont aussi hiérarchisés pour mieux s’y retrouver. Par exemple
news :comp.theory, est un groupe qui parle de théorie dans la catégorie des groupes qui
9
parlent d’informatique (comp = computer science). Autre exemple news :nord-pdc.annonces
est le groupe des petites annonces des gens du Nord-Pas-de-Calais.
mailto
mailto :utilisateur@domaine.domaine. ... .topdomaine
Le @ se prononce souvent « at » pour dire « chez ». Par exemple je vais envoyer un mail à
William qui travaille chez minimou, l’adresse est mailto :William@minimou.fr.
telnet
telnet :utilisateur :motdepasse@machine
Sous réserve que l’utilisateur soit connu de la machine, il ouvre une connexion à distance lui
permettant de travailler comme si il se trouvait en face.
Enfin, la norme des URL a maintenant dépassé le cadre d’Internet. Dans les systèmes mo-
dernes on désigne aussi à l’aide d’une URL des ressources locales à la machine, sans que le
réseau soit concerné. Par exemple : file :/home/tommasi/mondocument.txt désigne le docu-
ment mondocument.txt qui se trouve sur ma machine dans le dossier home/tommasi.
10
Fig. 2.1 – Dialogue standard entre un client et un serveur Web
<IMG SRC="http://www.grappa.univ-lille3.fr/icons/penguin.gif">
Dans cet exemple, l’image en question est contenue dans un fichier à part nommé penguin.gif.
L’image est alors acheminée entre le client et le serveur indépendamment du reste de la page.
C’est aussi cette méthode qu’on utilise pour le transfert de petits programmes, les applets (voir la
section 5). Chaque inclusion de la sorte (image, applet,...) va déclencher autant de requêtes entre
le client et le serveur.
Dans ce type d’utilisation, l’internet est vu comme un grand service de fichiers décentralisé.
Mais nous verrons dans les sections programmation et tendances de l’internet les aspects liés à
d’autres services.
2.5 TCP/IP
Cette section est un peu plus technique. Elle présente succinctement les principes techniques
sous-jacents d’Internet. Ceci devrait contribuer à une meilleure compréhension du réseau et de sa
configuration. Vous pouvez allègrement la passer si ce genre de chose ne vous concerne pas.
TCP/IP est le protocole de communication sur Internet. Son utilisation nécessite de dispo-
ser d’une première « couche logicielle et matérielle » de prise en charge du réseau plus basique
comme Ethernet ou ATM ou Token Ring. La norme TCP/IP fournit des outils pour mettre en
oeuvre de nouveaux protocoles pour cette fois faire fonctionner des applications comme le courrier
électronique, l’échange de pages Web...
2.5.1 Principes
Transférer un document contenant du son et des images depuis une machine en Californie vers
un ordinateur portable dans un taxi au milieu des embouteillages de Tokyo semble aujourd’hui
11
quelque chose de presque naturel pour beaucoup. Pourtant, je trouve cela toujours aussi surpre-
nant. C’est qu’en fait, il y a de nombreuses étapes à comprendre et expliquer entre ce click de
souris qui provoque une certaine agitation d’électrons et la transmission des informations. La prise
en charge d’un réseau par un ordinateur passe par de nombreuses étapes qui vont de
1. l’utilisation d’une application réseau comme le navigateur, reposant sur
2. un protocole applicatif comme celui d’échange de documents hypertexte comme HTTP re-
posant sur
3. la résolution d’adresses domainisées Internet en numéros Internet puis sur
4. la fonction de routage sachant acheminer des informations à travers une interconnexion de
réseaux vers le bon réseau local connaissant le numéro du destinataire puis sur
5. un adressage logique au sein du réseau local qui repose lui aussi sur
6. un adressage physique, transformation d’un numéro logique comme le numéro IP en une
adresse physique comme le numéro Ethernet par exemple,
7. un protocole comme ethernet d’utilisation des supports physiques,
8. une transformation de valeurs numériques en impulsions électriques par exemple pour utiliser
les câbles côté serveur ou encore en ondes hertziennes pour atteindre un portable.
Cette présentation est une tentative d’explication de l’expression modèle en couches que l’on
rencontre dans de nombreux livres traitant de la question des réseaux. TCP/IP prend en charge
une partie de ces étapes ou couches : les items 3 à 6 de cette liste soit les items 2 et 3 dans la
dénomination officielle suivante :
1. Couche accès réseau
2. Couche internet (IP)
3. Couche transport (TCP/UDP)
4. Couche application (HTTP, SMTP, NNTP,...)
La couche application n’est pas concernée par TCP/IP. Elle l’utilise uniquement pour mener
à bien ses tâches. La couche application est réalisée dans les logiciels à disposition des utilisateurs
d’une machine comme un navigateur, un serveur Web ou un logiciel de lecture des news.
Prenons le cas de la transmission d’informations suivant le protocole HTTP dédié aux pages
hypertexte. Nous avons vu que le client exprime sa requête sous la forme d’URL et que le serveur
retourne le document demandé. HTTP décrit certes plus précisemment ce dialogue mais en aucune
façon les détails de la transmission elle-même des données n’est évoquée. Ce « détail » au niveau
de HTTP sera réglé en demandant l’« intervention » de la couche transport.
L’application qui veut envoyer des données va communiquer avec la couche transport (UDP
ou TCP) via un port1 . Elle choisira UDP (rapide mais pas très fiable) dans certains cas ou alors
TCP (plus fiable et plus lent) dans d’autres. Les données sont transmises par paquets (assez petits
dans le cas de TCP). La couche transport est chargée de l’établissement d’une connexion et du
contrôle du flux de transmission.
Pour mener à bien ce contrôle, les données seront enrichies : des entêtes sont ajoutées aux
paquets. Ensuite, c’est la couche Internet (IP) qui se charge de l’adressage, le routage à tra-
vers l’interconnexion des réseaux. Grâce aux adresses logiques (les adresses IP) accompagnant les
données, IP détermine si l’adressage est local ou distant (en comparant avec sa propre adresse,
mais surtout le masque du réseau). Dans le cas d’un adressage local, il fait appel à la couche sui-
vante (accès réseau) ou alors transmet les données au réseau voisin via la passerelle ou gateway
en anglais.
Encore une fois, les données sont enrichies pour assurer le routage : un nouvel entête est ajouté.
La couche accès réseau ne fait pas partie du protocole TCP/IP. C’est par exemple la norme
Ethernet très répandue dans les réseaux locaux ou FDDI pour les fibres optiques, ATM pour
les supports de réseaux métropolitains. La couche doit se charger de l’interface avec la carte
1 Le port est un numéro généralement associé, réservé à un service. Il peut même apparaı̂tre dans les URLs. Par
exemple, le port associé au service HTTP est souvent 80. Essayez donc www.grappa.univ-lille3.fr:80.
12
réseau, suivre les règles du transport physique, composer les paquets, contrôler les erreurs de
transmission. Le contrôle est réalisé en ajoutant un nouvel entête aux paquets contenant des
informations spécifiques et en envoyant des accusés de réception.
La nature des informations spécifiques au contrôle est variable selon le protocole. Vous pouvez
imaginer que la taille des trames, ou la parité de la somme des valeurs transmises ou tout autre
description (partielle) des données pourrait être utilisée.
norme dans les années 60/70 même si ce n’est pas tout à fait vrai !
13
Parfois les numéros IP ne sont pas attribués de façon définitive à une machine, mais plutôt
dynamiquement, à la demande, c’est-à-dire quand une machine en a besoin. C’est quasiment
toujours le cas lorsque on utilise les services d’un fournisseur d’accès.
La DNS Elle est nécessaire pour beaucoup de protocoles applicatifs. Le service de DNS est assuré
par une machine qui peut être sur un autre réseau que le réseau local. Elle est aussi désignée
par son numéro IP.
Le masque de sous-réseau Il indique la classe du réseau qui sert à déterminer si une adresse
sera locale ou distante. Par exemple si le masque est 255.255.255.0 alors l’adresse est dite
de classe C et ce sont les trois premiers nombres qui désignent le numéro du réseau. Une
adresse IP 194.254.132.192 avec le masque 255.255.255.0 désigne la machine 192 du réseau
194.254.132. Il y a au plus 255 possibilités pour les numéros IP de ce réseau donc au plus 255
machines sur ce réseau (en fait on réserve le numéro 0 pour désigner le réseau tout entier et
254 pour la passerelle). L’adresse 194.254.132.45 fait donc partie du même réseau. À l’inverse
de l’adresse 194.254.131.131 n’en fait pas partie.
Il existe des réseaux de classe A (255.0.0.0), B (255.255.0.0) ou C.
La passerelle permet le routage vers les autres réseaux. C’est donc elle qui permet de faire sortir
les informations. Elle est désignée encore par son numéro IP.
14
2.6.1 Constitution de l’annuaire
Il existe deux façons de créer un annuaire Internet pour un moteur de recherche. Pour de
nombreux moteurs, les deux techniques sont utilisées.
À la main C’est la façon la plus évidente. L’annuaire appartient à une société qui emploie
des internautes professionnels qui se chargeront de parcourir le Web, de relever les pages
intéressantes et de les mémoriser dans l’annuaire. Ils sont chargés aussi de vérifier si les
pages déjà référencées existent encore et donc d’assurer une certaine maintenance.
Mémoriser les pages dans l’annuaire signifie aussi les classer, les ordonner, les ranger... Une
partie de ce travail peut être automatisée, mais la tâche de classer un document reste encore
difficile à automatiser, c’est un sujet de recherche en informatique très actuel.
Des milliers de pages sont créées chaque jour. Dans ce genre d’annuaire, on imagine très bien
que les pages seront assez bien catégorisées, mais souvent les catégories seront incomplètes,
ou désuètes.
Automatiquement Un logiciel que l’on appelle un robot est chargé de « parcourir Internet4 »
pour collecter le plus possible de pages. Elles sont toutes rassemblées dans l’annuaire.
Il est clair qu’avec cette méthode, énormément de pages seront ajoutées à l’annuaire, mais le
plus difficile sera de les ranger puisque les procédures automatiques ne fonctionnent pas très
bien. Tout reposera donc sur la procédure de recherche et la façon de formuler sa question.
Les moteurs de recherche comme http ://www.google.org et http ://www.altavista.com
sont des moteurs version automatique. À l’inverse, http ://www.yahoo.com construit ses bases
plutôt à la main. Ces indications sont assez grossières puisque comme indiqué précédemment, les
deux techniques sont souvent utilisées en même temps.
vous pourriez faire à la main : suivre tous les liens que vous pouvez
15
simple, car il faut deviner comment le lecteur va s’en servir. Quels sont les mots à placer dans
l’index ? Doit-il y avoir plusieurs index ? etc...
D’un point de vue informatique, la problématique est identique et les solutions sont diverses.
La qualité d’un moteur de recherche dépend plus de la méthode d’indexation que du contenu de
l’annuaire. C’est bien pour cela qu’existent des moteurs où le plus de choses possibles sont faites
manuellement.
Vous pouvez en savoir plus sur ces méthodes en suivant les indications que les moteurs de
recherche veulent bien vous donner pour assurer leur promotion.
</body>
</html>
16
Votre navigateur utilise un cache, c’est-à-dire un tampon. Tous les documents déjà téléchargés
sont enregistrés quelque part sur votre disque dur dans ce fameux tampon qui n’est qu’un simple
dossier.
Le navigateur vérifie la présence d’un document d’abord dans ce tampon avant de le télécharger
sur le WEB. Il peut contrôler aussi les dates des documents sur Internet et dans le tampon avant
de se lancer dans un téléchargement.
Le tampon peut prendre beaucoup de place et il peut être utile de le vider parfois...
5 ahrefurlhttp ://www.wirednews.com/news/politics/0,1283,37233,00.html
17
Chapitre 3
La messagerie électronique
L’échange de courriers électroniques est certainement l’un des plus vieux et des plus utilisés
de tous les services sur Internet. Aujourd’hui de nouvelles techniques semblent concurrencer cet
incontournable et différents moyens vous sont proposés pour en bénéficier.
Nous vous renvoyons à la section 2.1 pour une introduction à ce service. Nous détaillons main-
tenant son utilisation.
18
Fig. 3.1 – Dialogue client/serveur pour la messagerie
3.3 Logiciels
Il existe beaucoup, mais vraiment beaucoup d’outils de gestion des messages électroniques (on
dit aussi client de messagerie électronique). Ceux-ci permettent de
19
Composer (Compose) des messages. C’est-à-dire, écrire un message en demandant les champs
requis.
Envoyer (Send) des messages. Cette action est dissociée de la composition pour permettre aux
utilisateurs qui ne bénéficient pas d’une liaison permanente à Internet de décaler dans le
temps leurs envois. La fonction d’envoi de message met en relation le client de messagerie
avec son serveur. Voir la section 3.2.
Lire et vérifier (Get/Read et Check) des messages. Le client doit être capable d’interroger un
ou éventuellement plusieurs serveurs de messagerie pour vérifier la présence de messages et
ensuite les télécharger.
Le serveur de messagerie marque ou supprime les messages téléchargés. Ces derniers ne seront
donc plus accessibles, le plus souvent à la prochaine demande de lecture. Une fois téléchargés
ils se trouvent sur le disque dur de la machine utilisant le client de messagerie.
Répondre (Reply) à un message. Les fonctions disponibles à ce sujet permettent de répondre à
l’auteur en citant ou pas son texte original.
Transmettre (Forward) un message.
Ranger son courrier. C’est une action importante. Avec le temps de nombreux messages s’accu-
mulent et il est souvent nécessaire de les retrouver facilement. On rencontre alors les mêmes
solutions que pour l’organisation des documents sur un disque : dossiers, sous dossiers, etc...
avec les procédures de suppression, déplacement, copie, édition habituelles.
Lorsque le courrier est toujours lu sur le même ordinateur, le gérer et le retrouver est une
opération simple : tous les messages sont sur le même disque dur. Si l’utilisateur est «
itinérant » et consulte sa messagerie sur de nombreux ordinateurs, sur des réseaux distincts
comme par exemple chez lui, sur son téléphone ou à son travail, la gestion est plus difficile.
Il existe plusieurs solutions pour cela.
20
Bien d’autres champs apparaissent dans l’enveloppe, surtout quand le message est enfin arrivé
à son destinataire. Ils sont ajoutés automatiquement. Certains d’entre eux sont donnés en exemple
ci-dessous. Les noms des champs sont indiqués en tête de ligne et terminés par :.
From Jean-Luc.Dupont@lifl.fr Tue Oct 31 15:40:18 2000
Return-Path: <Jean-Luc.Dupont@lifl.fr>
Received: from l3av03.univ-lille3.fr (l3av03.univ-lille3.fr [194.254.131.200])
by l3ux02.univ-lille3.fr (8.9.3/8.8.7) with ESMTP id PAA27201
for <TOMMASI@L3UX02.UNIV-LILLE3.FR>; Tue, 31 Oct 2000 15:40:18 +0100
Received: from malonne.lifl.fr (134.206.10.29) by l3av03.univ-lille3.fr (MX
V5.1-X AnDp) with ESMTP for <tommasi@univ-lille3.fr>;
Tue, 31 Oct 2000 15:39:43 +0100
Received: from lifl.fr (velize.lifl.fr [134.206.10.235]) by malonne.lifl.fr
(8.9.3/jtpda-5.3.3) with ESMTP id PAA23618 for
<tommasi@univ-lille3.fr>; Tue, 31 Oct 2000 15:39:53 +0100 (MET)
Message-ID: <39FEDAB7.9994DE2A@lifl.fr>
X-Mailer: Mozilla 4.61 [en] (X11; I; Linux 2.2.12-20 i686)
X-Accept-Language: fr, en
MIME-Version: 1.0
References: <200010311257.NAA12266@l3mr193.univ-lille3.fr>
Content-Type: text/plain; charset=iso-8859-1
X-MIME-Autoconverted: from 8bit to quoted-printable by malonne.lifl.fr id
PAA23618
Content-Transfer-Encoding: 8bit
X-MIME-Autoconverted: from quoted-printable to 8bit by l3ux02.univ-lille3.fr id PAA27201
Resent-Message-Id: <200010311440.PAA27201@l3ux02.univ-lille3.fr>
Resent-Date: Tue, 31 Oct 2000 15:39:44 +0100
Resent-From: tommasi@univ-lille3.fr
Resent-To: <TOMMASI@L3UX02.UNIV-LILLE3.FR>
From: Jean-Luc Dupont <Jean-Luc.Dupont@lifl.fr>
Sender: Jean-Luc.Dupont@lifl.fr
To: Marc Tommasi <tommasi@univ-lille3.fr>
Subject: Re: Encadrement
Date: Tue, 31 Oct 2000 15:44:07 +0100
Il est intéressant de noter que cette enveloppe montre que le message est passé par plusieurs
serveurs de messagerie avant d’arriver à destination. Ce sont les champs Received qui mentionnent
ce trajet.
21
Vous indiquerez aussi si les messages téléchargés sur votre machine doivent être détruits sur
le serveur. C’est souvent le cas mais le contraire peut se révéler intéressant lorsque vous
voyagez entre plusieurs réseaux (chez vous, au travail...)
Vous pouvez demander au client de vérifier périodiquement et pour vous la présence de
nouveaux messages.
Enfin, pour les actifs des messageries, vous pouvez même demander à votre logiciel de ranger
vos messages pour vous, automatiquement, en fonction de l’émetteur, du sujet, ou même de
la présence de mots dans le corps.
Sur le serveur Après quelques changements de fournisseur d’accès, d’universités ou même d’em-
ploi, vous avez 4 ou 5 adresses électroniques que vous avez allègrement distribuées à vos
connaissances. Lire vos messages devient une épreuve de force car il faut vérifier toutes ces
boı̂tes. Vous avec pu anticiper un peu en positionnant le champ Reply-to, mais ce n’est pas
satisfaisant. Vous avez la possibilité de paramétrer votre serveur de messages pour que tout
ce qui vous est adressé soit désormais transmis à une autre adresse, comme avec la poste lors
d’un déménagement. Sous Unix/Linux c’est un simple document .forward qui indiquera la
nouvelle adresse.
Vous partez en vacances pendant 6 mois dans les ı̂les pacifiques. Vous voulez avertir vos
correspondants que vous ne lirez pas vos messages avant longtemps. Un document .vacation
permet de contenir le texte d’une réponse automatique.
3.6.1 MIME
La solution envisagée a été de définir des normes d’encapsulation de documents : MIME pour
Multipurpose Internet Mail Extensions. Un message peut donc être ajouté dans un document à
condition d’être codé au format MIME. Vous avez le choix du codage entre Base64 et quoted-
printable. Le tableau suivant montre un exemple de codage :
Vous remarquerez que dans les deux cas, tous les caractères accentués ont été remplacés. Le
résultat d’un codage base64 n’est plus du tout lisible pour l’homme, mais peu importe. Ce sont
les outils de messagerie qui se chargeront d’effectuer le codage et le décodage. L’utilisateur devrait
ne jamais se rendre compte de ces manipulations. Malheureusement, ce n’est pas toujours le cas...
Il existe bien d’autres méthodes pour convertir des documents et les faire ainsi passer sur
Internet. Aujourd’hui la norme MIME est largement diffusée et utilisée.
3.6.2 Attachements
Un attachement est une ou plusieurs pièces jointes à un message. L’intérêt de l’attachement
est d’éviter à l’utilisateur de se trouver face à des messages dont les textes apparaissent comme
22
dans le tableau précédent. Un exemple d’attachement et de son rendu sont présentés en figures
3.2 et 3.3.
L’attachement est composé automatiquement par la plupart des clients de messagerie. Contrai-
rement à ce que beaucoup peuvent penser, un attachement n’est pas acheminé indépendamment
d’un message. Il est compris dans le message. Le reste n’est que présentation.
Vous remarquerez dans le texte réel du message plusieurs indications : Content-Type : Multipart/Mixed ;
et boundary qui indiquent dans l’enveloppe que le message est en fait composé de plusieurs parties.
Puis, MIME-Version qui indique qu’il est au format MIME. Enfin que les documents ont subi un
encodage quoted-printable pour le premier et Base64 pour le second.
3.7.1 Irc
Irc signifie Internet Relay Chat (d’où son diminutif plus connu). C’est en fait un « vieux »
service qui date 88, successeur du service talk un peu désuet. Les utilisateurs de Irc se connectent
sur des serveurs, dialoguent entre eux sur des canaux (Channel ), peuvent s’envoyer des fichiers,
etc.
La difficulté de l’Irc lorsqu’on débute est triple : trouver un serveur et un canal intéressant,
comprendre les commandes pour envisager les possibilités offertes par ce service, comprendre les
nombreuses abréviations employées par leurs usagers.
Malgré ces inconvénients qui peuvent vous effrayer, Irc reste un outil convivial pour la discussion
de groupes, à bâton rompu, le tout au niveau planétaire.
23
From: Marc Tommasi <tommasi@free.fr>
Reply-To: tommasi@univ-lille3.fr
To: tommasi
Date: Mon, 30 Jul 2001 22:22:12 +0200
X-Mailer: KMail [version 1.0.29]
Content-Type: Multipart/Mixed;
boundary="Boundary-=_nWlrBbmQBhCDarzOwKkYHIDdqSCD"
MIME-Version: 1.0
Message-Id: <01073022232700.15251@localhost.localdomain>
Status: RO
X-Status: Q
--Boundary-=_nWlrBbmQBhCDarzOwKkYHIDdqSCD
Content-Type: text/plain
Content-Transfer-Encoding: 8bit
--
Marc Tommasi
http://www.grappa.univ-lille3.fr/~tommasi
--Boundary-=_nWlrBbmQBhCDarzOwKkYHIDdqSCD
Content-Type: application/octet-stream;
name="doc1"
Content-Transfer-Encoding: quoted-printable
Content-Description: ceci est un premier document
Content-Disposition: attachment; filename="doc1"
--Boundary-=_nWlrBbmQBhCDarzOwKkYHIDdqSCD
Content-Type: text/plain;
name="doc2"
Content-Transfer-Encoding: base64
Content-Description: En voici un second
Content-Disposition: attachment; filename="doc2"
SidhaW1lIGxlcyBjaG91eCBjb21tZSB1biBmb3UK
--Boundary-=_nWlrBbmQBhCDarzOwKkYHIDdqSCD--
24
3.7.2 Icq
Icq (I seek you) est un outil dédié à un envoi de messages entre deux personnes à l’image du
service mail. La différence est qu’il repose sur deux nouveaux principes : un annuaire et un état
de connexion des usagers.
Les annuaires sont mémorisés sur des serveurs comme mirabilis. Les utilisateurs y sont répertoriés
avec un nom, un pseudo. Ils peuvent ajouter plusieurs informations les concernant (adresse email
ou web, adresse, pays, âge, sexe). La fonction de ces annuaires est d’offrir la possibilité de rechercher
un utilisateur, de contrôler l’état de sa connexion et donc de le contacter.
L’état de connexion d’un utilisateur signale sa présence sur le réseau et assure donc que les
messages pourront être lus immédiatement. Les états possibles sont : connecté ou déconnecté, ainsi
que quelques variations (absent pour un instant, occupé, ...)
25
Chapitre 4
Le langage HTML
4.1 Introduction
HTML (Hypertext Markup Language) est langage de description de documents. C’est un lan-
gage particulier issu de la norme SGML (Standardized Generalized Markup Language) qui définit
des langages de balisage. C’est le langage qui a été construit pour décrire les documents hypertexte
sur Internet. HTML est normalisé par le W3C (consortium qui regroupe de nombreuses entreprises
et organisations). Être normalisé signifie que les acteurs d’Internet se sont mis d’accord pour suivre
tous les mêmes règles pour écrire et traiter des documents hypertexte sur le WEB.
Les origines de HTML sont diverses. La notion d’hypertexte date d’au moins les années 60. La
norme SGML est elle aussi antérieure à Internet. La naissance d’HTML date de la fin des années
80 quand des ingénieurs du CERN et particulièrement Tim Berner Lee, ont développé le premier
réseau d’échange de documents et le premier navigateur.
Les avantages du langage HTML sont nombreux. Il est simple à utiliser, sa conception lui
permet de rester indépendant vis à vis des plate-formes et de pouvoir être échangé sur les réseaux.
En effet, tout document HTML n’est écrit qu’avec les caractères alphabétiques standards. Ceci lui
donne deux avantages. Premièrement, il peut être composé sur n’importe quel système avec un
simple éditeur de textes. Aucun logiciel spécialisé n’est nécessaire pour composer des pages HTML.
Deuxièmement, en évitant d’utiliser des codes différents des caractères alphabétiques standards,
on écarte les problèmes de conflits avec les codes servant au transport des informations sur le
réseau (codes de contrôle, d’encapsulation...).
Les principes d’HTML sont de donner dans le document des informations de structure du texte
(titre, niveau de titre...), de présentation (mettre en gras, centrer,...) et ensuite les données elles-
même (le texte). La présentation (ou composition) du texte est donc à la charge du navigateur.
Les inconvénients du HTML se découvrent au fur et à mesure que les techniques d’Internet
évoluent. Mais les évolutions du langage à travers ses normes successives (nous en sommes à la
version 4 (datant de 97) du langage HTML) pallient peu à peu ses défauts. Le reproche le plus
évident maintenant était justement de mélanger dans le document les aspects mise en forme,
structure et données.
Le HTML 4 avec ses feuilles de style permet de dissocier données/structure et présentation.
Le langage XML dont nous ne parlons pas ici permet d’identifier clairement les données.
4.2 Principes
HTML est un langage de balisage. Une balise (Tag en anglais) est une suite de mots sans
distinction entre majuscules et minuscules entre < et > (balise de début) ou < / et > (balise de
fin). La balise donne des informations de structure ou de présentation à un texte qu’elle encadre par
la balise de début et la balise de fin. Par exemple, le paragraphe, comme élément de structuration
du texte est compris entre la balise de début <P> et de celle de fin </P>.
26
Une balise peut avoir des attributs (attribute en anglais). Exemple pour un paragraphe centré :
<P ALIGN="center">tarata</P>.
La forme générale d’un document HTML est la suivante :
<html>
<head>
<title>...</title>
</head>
<body>
...
</body>
</html>
La balise head définit l’entête du document où l’on peut indiquer le titre qui sera utilisé dans
la barre de titre du navigateur ou encore dans les signets. La balise body encadre le corps du
document. Voyons quelques balises à travers un exemple. Le code se trouve en figure 4.1 et le
rendu dans la figure 4.2.
<html>
<head>
<title>Ma page Web</title>
</head>
<body bgcolor="#FFFFFF">
<h1>Bonjour !</h1>
<p>je me présente : <b>Eugène Poudrier</b>,
spécialiste en </p>
<ol>
<li> html
<li> internet et <li> intranet
</ol>
Voici ma photo : <img src="eugene.gif">. Si vous voulez mieux me
conna^ıtre, cliquez <a href="http://www.eugene.org>ici</a>.
<hr>
<address>
<table>
<tr><td colspan="2">
<a href="mailto:poudrier@eugene.org">Eugene Poudrier</a><BR>
</td>
</tr>
<tr><td>
Sté Pourdier and sons
</td>
<td>
Paris, Washington, Singapour
</td>
</tr>
</table>
</address>
</body>
</html>
27
Fig. 4.2 – Rendu dans un navigateur
Le mot Bonjour ! apparaı̂t comme un titre de niveau 1. Quatre niveaux sont disponibles en
HTML. La balise <b> permet de passer en gras (boldface en anglais), mais ce qu’il est important
de noter ici, c’est que les espaces ou retours à la ligne présents dans le document HTML ne sont
pas reproduits dans le navigateur, ils n’ont qu’une seule signification : séparateur de mots. En
d’autres termes, un espace, n espaces, un retour à la ligne, n retours à la ligne signifient toujours
la même chose : changement de mot.
Certaines balises de fin ne sont pas nécessaires (par exemple </li>). Il est tout de même
préférable de les mettre dans un souci de clarté. Pour les listes numérotées (OL, ordered list), les
numéros devant les éléments de liste (LI list item) sont calculés par le navigateur. Encore une fois,
l’absence ou la présence de retours à la ligne est sans incidence sur le résultat.
Une image n’est jamais présente dans un document HTML. C’est seulement une référence
(IMG) à un fichier contenant l’image qui apparaı̂t. C’est à la charge du navigateur de demander ce
fichier au serveur mentionné dans l’attribut SRC pour l’afficher au sein du texte. Le document et
l’image peuvent donc être sur deux serveurs distincts.
Les liens hypertextes sont codés avec la balise A et l’attribut href. Sur le navigateur, le texte
entre début et fin de A est souligné pour indiquer qu’il représente un lien vers un autre document.
L’attribut href est n’importe quelle URL.
Enfin, la balise body a un attribut qui définit la couleur de fond de la page. Les couleurs sont
notées au format RGB, c’est-à-dire avec une combinaison de rouge, de vert et de bleu. Ces trois
couleurs prennent une valeur entre 0 (absence) et 255 (forte présence) pour que leur combinai-
son donne la couleur désirée. Les valeurs sont données ici en base 16 (en hexadécimal) dont la
représentation utilise les chiffres de 0 à 9 et les lettres de A à F. Ici le code ”#FFFFFF” signifie :
le rouge, le bleu et le vert au maximum, ce qui donne du blanc.
28
4.3 Images
Tous les formats d’image ne sont pas affichables par votre navigateur. Le plus souvent, sans
configuration particulière, il manipule sans difficultés les images au format GIF de compuserve
(extension .gif) ou JPEG (extension .jpg) ou Portable Network Graphics du M.I.T. (extension
.png).
Le format d’enregistrement le plus simple des images, le bitmap, est aussi le plus coûteux
en mémoire. Sur le réseau où les temps de transfert sont critiques, ce format est inutilisable.
Les formats cités précédemment, réalisent une compression de l’information qui permet de réduire
énormément la taille des fichiers (et donc les temps de transfert) sans porter ou trop porter atteinte
à la qualité de l’image.
Le format gif n’utilise que 256 couleurs, alors que le jpg ou le png en autorise beaucoup plus. Le
format jpg réalise une compression avec perte d’information, c’est-à-dire une baisse de la qualité
de l’image, mais cette dégradation n’est pas ou peu visible.
4.4 Formulaires
Un formulaire est un écran de saisie dans la fenêtre du navigateur. Pour construire un formu-
laire, seul le langage HTML suffit. Par contre, le traiter nécessite l’intervention d’un programme
résidant sur un serveur Web. Une fois constitué, le formulaire permet à l’utilisateur de saisir des
données, qui seront envoyées au serveur et traitées par le programme associé. Nous vous reportons
à la section 5 pour étudier la façon de traiter les données sur le serveur, et le moyen d’écrire
ces programmes. Cette partie n’est dédiée qu’à l’étude des balises mises à votre disposition pour
construire le masque de saisie.
Commençons par un exemple simple :
<html>
<head>
<title></title>
</head>
<body>
<form action="http://serveur/programme" method="get">
Quel est votre nom ? <input type="text" name="nom"><BR>
<input type="submit" value="Envoyer">
</form>
</body>
</html>
et le rendu dans le navigateur :
Dans la zone face au message Quel est votre nom ?, l’utilisateur a la possibilité de saisir un
texte et l’appui du bouton Envoyer enverra ce texte au programme dont l’URL apparaı̂t comme
valeur de l’attribut action de la balise form.
Voici un exemple plus complet des possibilités des formulaires :
<html>
<head>
<title></title>
29
</head>
<body bgcolor="white">
<form action="http://serveur/programme" method="get">
<b>Quel est votre nom ?</b>
<div align="center">
<input type="text" name="nom">
</div>
<b>Quel est votre sexe ?</b>
<div align="center">
Fille : <input type="radio" name="sexe" value="G">
Garçon : <input type="radio" name="sexe" value="F">
</div>
<b>Quels sont vos loisirs préférés :</b>
<div align="center">
<select name="loisirs">
<option>l’informatique
<option>le bateau
<option>le sport
<option>le cinéma
</select>
<select multiple name="autrefacon">
<option> l’informatique
<option>le bateau<option>le sport
<option>le cinéma
</select>
</div>
<b>Avez-vous</b>
<div align="center">
un vélo ? <input type="checkbox" name="velo">,
une voiture ? <input type="checkbox" name="voiture">
</div>
<b>Voulez-vous ajouter quelques commentaires ?</b>
<div align="center">
<textarea name="comment">
Placez vos commentaires ici
</textarea>
</div>
</form>
</body>
</html>
30
4.5 Feuilles de style
Les feuilles de style (CSS ou Cascading Style Sheets) sont un moyen original pour
contourner un premier déficit de la première norme HTML, à savoir l’imbrication d’éléments de
présentation avec le reste du texte. Grâce aux CSS, il est possible de décrire, soit en entête d’un
document, soit dans un autre document ce qu’est la mise en forme d’un élément structurel.
Par exemple, si nous voulons que tous les titres de niveau 1 soient centrés et en couleur rouge,
nous sommes obligés d’écrire
<H1 ALIGN="center"><FONT color="red">Voici un titre</FONT></H1>
et ceci pour chaque titre de niveau 1. Si le document est grand ou si le site est composé de
nombreux documents qui doivent être de présentation uniforme, c’est très pénalisant.
31
Utiliser les CSS permet de décrire un style et donc d’exprimer que tous les titres de niveau 1
par exemple sont centrés et en couleur rouge à l’aide d’une seule commande :
h1 {
color: red;
text-align: center
}
Depuis l’apparition des feuilles de style, presque tous les attributs de mise en forme des balises
HTML sont désuettes (deprecated en anglais), mais elle fournissent plus d’éléments de présentation
que le HTML de base n’en fournissait. Par exemple, des tailles de marge droite et gauche.
p {margin-left: 5cm;
margin-right: 5cm;
color: blue
}
Cet exemple définit un style qui met tous mes paragraphes en bleu et avec des marges droite et
gauche de 5cm. Mais alors, comment faire si j’ai deux (ou plus) types de paragraphes dans mon
document ? Je voudrais des paragraphes pour y mettre des citations en exergue et d’autres pour
y mettre des informations normales. Voici un exemple plus complet.
<html>
<head>
<title>ess</title>
<style TYPE="text/css" MEDIA=screen>
<!--
h1 { color: red; text-align: center }
P{ color: black; background: transparent}
.citation{margin-left: 5cm; margin-right: 5cm;
background: yellow; color: blue }
.auteur{ align: right; color: green}
-->
</style>
</head>
<body bgcolor="white">
<h1> Des titres, citations et auteurs </h1>
<div class=citation> Il vaut mieux qu’il pleuve un jour comme aujourd’hui,
qu’un jour ou il fait beau!
</div>
<div class=auteur>Pierre Dac</div>
<p>Est-ce convaincant ? </p>
</body>
</html>
Les balises de commentaires <!-- et --> sont juste là pour faire en sorte que les navigateurs
qui ne prennent pas en charge (on dit aussi ne supportent pas) les feuilles de style ne tiennent pas
compte de ces instructions.
32
Chapitre 5
5.1.1 Pourquoi ?
La motivation principale est d’avoir des pages Internet dont le contenu soit dynamique. Un
problème important pour les administrateurs de sites WEB est la façon dont doit évoluer le
site. Trop souvent, les sites contiennent des informations anciennes, dépassées. Comment opérer
pour être sûr de fournir toujours des informations cohérentes, une présentation homogène ? La
réponse est classique : utiliser des procédures automatiques et une source de données unique. La
programmation et les bases de données sont une réponse informatique traditionnelle.
Nous devons donc définir un modèle de fonctionnement qui permette de varier le contenu
d’une page en fonction des interactions avec l’utilisateur, du contenu d’une base de données. De
nombreuses solutions existent déjà. Examinons les maintenant.
5.1.2 Solutions
CGI
La première solution imaginée par les concepteurs du WEB est la passerelle CGI. Le fonction-
nement est simple : une URL désigne non plus un document mais un programme sur le serveur. La
passerelle CGI est une norme qui dit comment l’URL doit être construite, en particulier comment
passer des données en entrée du programme, et comment le programme doit fonctionner.
Dans la norme CGI, une URL est de la forme :
http://serveur/dossier/programme?argument1=valeur1&argument2=valeur2
Cet exemple signifie que le client qui envoie cette requête au serveur demande l’exécution de pro-
gramme dans le dossier dossier avec en entrée deux données identifiées par les noms argument1
et argument2 et qui prennent pour valeurs respectivement valeur1 et valeur2.
La réponse envoyée par le serveur est le résultat d’exécution du programme en question. Il est
donc impératif que ce programme retourne un document HTML ou encore un type MIME.
Un inconvénient de la passerelle CGI est sa difficulté de mise en oeuvre pour les utilisateurs
novices. Beaucoup de choses assez compliquées doivent être prises en charge par le programme à
33
commencer par la lecture des arguments en entrée, qui n’est pas simple. C’est souvent du ressort
d’un informaticien de se charger de la création de tels programmes. Par contre, un avantage certain
est la souplesse. Les programmes peuvent être écrits dans tout langage interprété ou compilé. Les
performances peuvent donc être de qualité.
La plupart des moteurs de recherche fonctionnent à l’aide de passerelles CGI. Le langage le
plus utilisé est certainement le langage perl, très efficace pour la manipulation de textes.
D’un point de vue technique, l’exécution du code CGI n’est pas réalisé par le serveur Web, mais
dans une tâche (ou processus) indépendant. La norme CGI exprime les conditions dans lesquelles
les deux tâches que sont le serveur Web et l’exécution du code CGI dialoguent. C’est la grande
différence avec la technique que nous présentons dans la section suivante. On peut présenter le
dialogue qui s’établit entre client et serveur comme dans la figure 5.1.
34
Les avantages de PHP sont sa facilité d’utilisation, sa très grande richesse fonctionnelle no-
tamment vis à vis de la connexion à des bases de données. PHP est disponible pour énormément
de plate-formes, compatible avec beaucoup de serveurs WEB. Son utilisation se généralise très
rapidement. On peut parier que PHP est en train de devenir un incontournable du WEB. Enfin,
PHP est un produit à code source ouvert 1 , ce qui lui offre beaucoup de garanties de sécurité, de
mise à jour rapide, et aussi la gratuité.
Un inconvénient pourrait être sa lenteur en comparaison avec des programmes compilés écrits
en C accessibles via la passerelle CGI, mais en général, PHP se révèle comme un langage fournissant
des exécutions assez rapides.
Un premier exemple de page écrite avec PHP est celle donnée dans le manuel officiel :
<html>
<head>
<title>Exemple</title>
</head>
<body>
<?php echo "Salut, je suis un script PHP!"; ?>
</body>
</html>
Le serveur WEB qui contient cette page va procéder de la façon suivante pour délivrer ce
document.
1. Identifier que le document indiqué est bien du PHP (en général grâce à l’extension du fichier
(.php3).
2. Rechercher à l’intérieur toutes les parties comprises entre < ?php et ?>. D’autres balises
peuvent toutefois être utilisées.
3. Interpréter les parties identifiées à l’étape précédente. Cette étape fournit un résultat qui
remplacera les parties entre < ?php et ?>.
4. Retourner enfin au client la page ainsi construite.
35
Une URL désigne un document sur le WEB. Lorsque le navigateur doit l’afficher, il analyse
son type, recherche dans sa configuration l’association qui lie l’application à ce type de document.
Il effectue ensuite la tâche appropriée.
5.2.1 Plugins
Les plugins sont des extensions des navigateurs. Ce sont des logiciels. Ils sont disponibles le
plus souvent gratuitement sur Internet. Ils permettent de
– afficher des animations simples : Macromedia Flash, Shockwave sont les plus connus.
– afficher des films video/audio : RealPlayer par exemple.
– afficher des documents particuliers : acrobatreader pour les fichier PDF,
– et bien d’autres.
Un plugin est particulier à un navigateur et à une architecture matérielle ou un système d’ex-
ploitation. Cette technique va à l’encontre du principe de l’universalité du client.
Dans le cas d’un plugin, l’exécution aura lieu dans la fenêtre du navigateur.
5.2.3 Applets
Les applets sont des programmes écrits pour la machine virtuelle Java. Lorsqu’un document
contient la référence à une applet, elle est téléchargée en mémoire, et exécutée sur la machine Java
qui est le plus souvent intégrée dans votre navigateur.
Cette solution est à privilégier dans une solution intranet qui supporte mieux de gros transferts.
En effet, une applet est souvent volumineuse et donc longue à télécharger. De plus, les machines
virtuelles Java sont parfois différentes d’une machine à l’autre, d’un navigateur à un autre. Il en
résulte des conflits et des incompatibilités. Finalement, les applets ne sont pas toujours aussi sûres
qu’attendu.
36
Chapitre 6
PHP et Javascript
Nous donnons ici un rapide survol des langages PHP et Javascript. Plus d’éléments sont donnés
sous forme d’exercices voir http ://www.grappa.univ-lille3.fr/~tommasi/php
6.1 PHP
6.1.1 Échappement, constructions
Le code PHP est inséré dans du code HTML entre les deux balises <?php et ?> ou <? et ?> ou
encore <SCRIPT LANGUAGE="php"> et </SCRIPT>.
Il est possible de mêler le code PHP et le code HTML de façon assez surprenante comme dans
l’exemple suivant affiche 10 lignes de Toto s’en va.
<html>
<head>
<title></title>
</head>
<body>
<? for($i=1;$i<=10;$i++) { ?>
Toto s’en va<BR>
<? } ?>
</body>
</html>
La syntaxe du langage est similaire à celle du C ou du Java. Les instructions sont terminées
par des ;. Les blocs d’instructions sont entourés par des { et }.
Les commentaires sont précédés de // ou entourés de /* et */.
6.1.2 Variables
PHP est aussi un langage orienté objet. On peut utiliser les types de base simples comme les
entiers (integer), les réels (double), les chaı̂ne de caractères (string), mais aussi des types plus
évolués comme les tableaux associatifs (array) et les objets (object).
La déclaration de type n’est pas requise et l’interprète se charge de gérer les types seul. C’est
suffisant dans bien des cas.
Une variable est syntaxiquement identifiée par le préfixe $ et son nom ne peut pas comporter
d’espaces. Les majuscules et minuscules sont importantes (exemple : $mavariable, $maVariable
sont deux variables différentes.)
Les chaı̂nes de caractère sont entourées de " ou de ’. La deuxième construction demande
de considérer tous les caractères dans la chaı̂ne tels qu’ils sont. Dans une chaı̂ne de caractères
37
entourée de ", les variables sont remplacées par leur valeur et d’autres séquences de caractères ont
une signification spéciale. Par exemple, la séquence \n signifie retour à la ligne.
$bag=’coucou’;
$nom1=’big$bag\n’;
$nom2="big$bag\n";
La variable $nom1 contient exactement les caractères big$bag\n. La variable $nom2 contient
bigcoucou et se termine par un retour à la ligne (invisible ici, mais qui peut avoir un effet quand
on l’imprime à l’écran ou la sauve dans un fichier).
Les expressions dont la valeur est nulle sont interprétées dans une condition comme la valeur
Faux. Les autres sont considérées comme vraies.
6.1.3 Opérateurs
Ils sont identiques à ceux permis dans le langage C et ses dérivés syntaxiques (C++, java,
perl,...). Voici les plus utilisés.
Les opérateurs arthmétiques usuels + - = / *.
Les opérateurs booléens et de comparaison ! (non), && (et), || (ou), < (inférieur), > (supérieur),
== (égal), >= (supérieur ou égal), <= (inférieur ou égal).
Notez comme d’habitude la différence entre le signe d’affectation = et le signe de comparaison
==. Un opérateur oublié et pourtant très utile dans bien des cas est cond?exproui:exprnon qui
permet de se passer d’une construction if ... else ... avantageusement. Par exemple :
$reponse=$abbrev==’O’?’Oui’:’Non’;
// identique à :
if ($abbrev==’O’) {
$reponse = ’Oui’;
} else {
$reponse = ’Non’;
}
Enfin, l’opérateur . met bout à bout (concatène) deux chaı̂nes de caractères.
6.1.5 Fonctions
L’emploi de fonctions facilite la maintenance et la lisibilité du code. De nombreuses fonctions
sont disponibles dans la distribution de PHP et aussi sur Internet. Voyons un exemple de définition
de fonction, puis son utilisation.
function pied($compteur,$nom_auteur=’tommasi’,$email=’tommasi@univ-lille3.fr’) {
global $lbl_deb_compteur, $lbl_fin_compteur;
38
echo "\n".$lbl_deb_compteur.$compteur.$lbl_fin_compteur;
}
echo ’</address>’;
echo "<br>Dernière modification".date( "F d Y H:i:s.",getlastmod() );
echo ’</html>’."\n";
}
L’exemple définit une fonction dont le nom est pied qui affiche le bas d’une page HTML
en tenant compte de quelques paramètres. L’objet d’une telle fonction serait d’uniformiser la
présentation d’un ensemble de pages. Elle accepte de 1 à 3 paramètres. Le premier est un argument
obligatoire. Les deux autres sont optionnels et ont une valeur par défaut indiquée après le signe =.
Voici trois appels possibles et leurs correspondance.
<? pied(’comp1’); // pied(’comp1’,’tommasi’,’tommasi@univ-lille3.fr’) ?>
<? pied(’comp1’,’Marc’); // pied(’comp1’,’Marc’,’tommasi@univ-lille3.fr’) ?>
<? pied(’comp1’,’Jules’,’jules@coucou.org’); ?>
Toute variable déclarée ou utilisée dans le corps d’une fonction est considéré comme locale à
la fonction. Cela signifie qu’elle est inconnue à l’extérieur de celle-ci. Inversement, une fonction
ne connaı̂t les variables globales (déclarées ou utilisées ailleurs que dans une fonction) que si elles
apparaissent dans une déclaration spécifique. C’est l’objet de la deuxième ligne de cet exemple.
Les valeurs des variables globales pourraient être :
$lbl_deb_compteur=’<BR><img align=right src="/cgi-bin/Count.cgi?df=’;
$lbl_fin_compteur=’&dd=B&comma=T&cache=T&expires=3600">’;
La ligne
echo "<br>Dernière modification".date( "F d Y H:i:s.",getlastmod() );
illustre la façon selon laquelle les fonction s’imbriquent et s’utilisent. La fonction date met en forme
une date et la fonction getlastmod obtient la date de dernière modification d’un document. Cette
ligne a pour objet d’afficher, sous forme lisible, la date de la dernière modification du document
consulté.
La fonction getlastmod est remplacée par le résultat de son exécution, illisible en général,
dans l’appel à date. Ensuite, date le met en forme lisible. Ce résultat est mis au bout de la chaı̂ne
<br>Dernière modification et le tout est affiché par la fonction echo.
6.1.6 Tableaux
Les tableaux en PHP sont indicés soit par des entiers soit par des chaı̂nes de caractères. Les
indices apparaissent entre crochets. Pour ajouter un élément à un tableau indicé par des entiers,
il est inutile de préciser l’indice (voir le troisième exemple ci-dessous).
$tab[0]=’Hello’;
$tab[1]=’Salut’;
$tab[]=’Olé’;
$assoc["blanc"]="#FFFFFF";
$assoc["noir"]="#000000";
Pour parcourir un tableau, on utilise souvent la structure suivante :
while (list($indice,$valeur) = each($tab) ) {
...
}
La fonction each parcourt le tableau $tab et retourne deux valeurs, l’indice et la valeur du
tableau à cet indice. Ces deux valeurs peuvent être rangées dans deux variables avec une seule
construction utilisant la fonction list.
39
6.1.7 Traitement de formulaires
PHP est très adapté au traitement des formulaires HTML. Les formulaires sont des masques
de saisie apparaissant dans la fenêtre du navigateur et invitant les utilisateurs (donc sur le client)
à saisir des informations. Nous avons vu en section 4.4 comment construire de tels écrans. Les
opérations de traitement des données saisies dans ces formulaires sont des programmes exécutés
sur le serveur Web. Traditionnellement ce sont des programmes CGI, mais Ils peuvent être aussi
écrits en PHP3. C’est très simple. Voici un exemple. Le formulaire est stocké dans un document
html nommé formdoc.html
<html>
<head>
<title></title>
</head>
<body>
<form action="pgm.php3" method="get">
Quel est votre Nom ? <input type="text" name="zone1">
Quel est votre prénom ? <input type="text" name="zone2">
</form>
</body>
</html>
<html>
<head>
<title></title>
</head>
<body>
<?
function affiche_form (){
?>
<form action="invite.php3" method="get">
Quel est votre prénom ? <input type="text" name="prenom">
<input type="submit"></form>
<? }
if (isset ($prenom) ) {
echo "Bonjour $prenom";
} else {
affiche_form();
40
}
?>
</body>
</html>
<html>
<head>
<title></title>
</head>
<body>
<?
$connection=pg_connect("dbname=clients user=tom password=coucou");
$requete="SELECT nom from clients";
$result=pg_Exec ($connection,$requete);
for($i=0; $i<= pg_numrows($result);$i++) {
$arr = pg_fetch_array ($result, $i);
echo $arr["nom"]."<BR>";
}
?>
</body>
</html>
Nous laissons aux exercices l’examen plus poussé des possibilités d’interaction entre PHP et les
bases de données.
41
6.1.9 Fonctions usuelles, exemples et exercices
Premiers exercices avec des formulaires
1. Écrire un formulaire avec deux zones de saisie pour permettre à un utilisateur de saisir son
nom et son prénom. En retour, le programme doit lui dire bonjour.
2. Écrire un formulaire avec une zone de texte de 5 lignes sur 80 caractères. Votre programme
devra mettre le texte saisi en majuscules et l’écrire en rouge. Vous pouvez utiliser la fonction
strtoupper et la fonction nl2br.
3. Écrire un formulaire qui pose une question et propose dans une zone de liste déroulante
3 réponses possibles. Le programme devra récompenser l’utilisateur qui trouve la bonne
réponse.
4. Écrire un formulaire avec un deux cases d’option donc non exclusives pour demander à
l’utilisateur s’il aime le sucre ou le sel. Remarquez que les deux cases doivent avoir des noms
différents.
5. Écrire un formulaire avec un deux cases à cocher exclusives pour demander à l’utilisateur si
l’est un garçon ou une fille. Remarquez que les deux cases doivent avoir le même pour nom
pour être exclusives et une valeur différente pour les distinguer.
6. Écrire un formulaire avec deux zones de saisie. Votre programme devra afficher le résultat de
la multiplication de ces deux nombres. Utilisez le même document pour demander les deux
nombres et afficher le résultat.
7. Écrire un formulaire avec deux zones de saisie. Votre programme devra afficher le résultat de
la multiplication de ces deux nombres. Utilisez le même document pour demander les deux
nombres et afficher le résultat. Utilisez la fonction isset pour rendre l’affichage plus joli.
8. Écrire un formulaire avec deux zones de saisie. Votre programme devra afficher le plus petit
de ces deux nombres.
9. Écrire un formulaire avec deux zones de saisie. Votre programme devra compter de 1 en 1
entre ces deux nombres. NB : Vous pouvez d’abord chercher le plus petit.
10. Écrire un formulaire avec une zone de saisie. Votre programme doit trier une liste de mots
séparés par des virgules. Vous utiliserez les fonctions split et count.
La fonction isset
Détermine si une variable est définie, (c’est-à-dire si elle existe). Par exemple, isset($a) prend
la valeur vrai si $a est une variable définie. La fonction isset est très souvent utilisée lorsque l’on
traite les formulaires
Exemple :
Le code suivant contenu dans un document quest.php3 affiche un formulaire ou un message
bonjour selon le cas. Le formulaire est affiché à la première ¡¡ utilisation ¿¿ du fichier, c’est-à-dire
lorsqu’un utilisateur demande pour la première fois le document quest.php3. Le message bonjour
est affiché lorsque l’utilisateur valide le formulaire.
<html><head></head><body>
<? if (isset($nom)) {
echo "Bonjour $nom";
} else {
<FORM action="quest.php3" method="get">Votre nom ?
<input type="text" name="nom"><input type="submit">
</form>
</body></html>
42
Exercice :
Traiter un formulaire dans un seul document php, qui demande son nom, son prénom, son
adresse email. Le prénom est optionnel les autres champs ne le sont pas. Le programme doit tester
si tous les champs obligatoires ont été saisis, re-proposer le formulaire avec les valeurs déjà saisies
le cas échéant et envoie un message de félicitations quand tout est bon.
La fonction mail
Envoie un message électronique. La fonction accepte trois paramètres, l’adresse, le sujet et le
corps du message.
Exemple :
mail("tommasi@univ-lille3.fr",
"Le sujet du message",
"le message en question...");
Exercice :
Écrire un petit client mail HTTP, à la façon des caramail, hotmail et consors. Vous mettez à
disposition des utilisateurs une page avec une zone de saisie pour le nom des destinataires, une
autre pour le sujet, une dernière pour le texte. Vous ajoutez un bouton pour l’envoi du message.
La fonction require
Insère un fichier dans un document php. Cette fonction est très utile pour plusieurs tâches :
uniformiser la présentation de documents HTML en définissant les entêtes, les pieds de page... ; in-
clure des fonctions définies par l’utilisateur et souvent utilisées ; inclure des définitions de variables
ou constantes globales.
Exemple :
La fonction pied() qui apparaı̂t dans le poly.
Exercice :
Faire une fonction de conversion de francs en euro et une autre d’euros vers les francs. Le taux
de change est à 6,5F pour 1 euro.
Faire une page web qui propose une zone de saisie et deux boutons d’option qui offrent une
interface utilisateurs à ces deux fonctions.
Faire une fonction qui affiche un entête de document avec des paramètres qui sont : la couleur
de fond, le titre du document.
La fonction die
Arrêter un script en envoyant un message d’erreur. Cette fonction est utile lorsqu’une erreur
importante survient.
Exemple :
Tout arrêter si le client est MSIE (on regarde la variable prédéfinie $HTTP_USER_AGENT ou on
demande l’exécution de la fonction get_browser pour obtenir le type de navigateur).
La fonction array
Construit un tableau, la structure de données qui permet de stocker des valeurs, ensuite ac-
cessibles via une clé ou un indice.
Exemple :
43
$loisirs = ( "Sport" => "Natation", "metier" => "informaticien" ).
On peut aussi faire $loisirs["Sports"] = "Natation";
$loisirs["metier"] = "informaticien";
La manipulation des tableaux est assez agréable en PHP. Par exemple, on peut utiliser une
expression comme $a[]=10 pour ajouter la valeur 10 au tableau (indicé par des entiers) $a.
Exercice :
Afficher un formulaires qui demande une valeur, et mémorise les 10 premiers nombres impairs
suivants dans un tableau. Afficher ensuite le contenu du tableau dans une liste non ordonnée.
Créer un formulaire avec une zone de liste à choix multiple qui contient 10 espèces d’oiseaux (à
vous de trouver). Le programme associé doit afficher cette liste. Dans le code HTML du formulaire,
vous avez la possibilité de mettre dans l’attribut name de la zone de liste SELECT un nom de variable
terminé par des crochets. L’action pourra récupérer un tableau des éléments sélectionnés.
La fonction count
Compte le nombre d’éléments dans un tableau. Retourne 0 si la variable n’est pas définie, et 1
si la variable est scalaire (n’est pas un tableau).
Exercice :
Améliorer l’exercice précédent pour afficher aussi le nombre d’éléments sélectionnés.
La fonction sort
Trie un tableau. L’ordre choisi est alphabétique. voir asort, ksort, rsort
Exercice :
Améliorer l’exercice précédent pour afficher les oiseaux dans l’ordre alphabétique.
produit le résultat :
Sport = > Natation metier => informaticien
Exercice :
Écrire une fonction menu qui affiche un menu en passant en paramètre un tableau indicé par des
entiers contenant des tableaux indicés par les champs intitulé et —url— qui désignent l’intitulé
du menu et l’URL correspondante.
Écrire une application qui propose deux listes, l’une avec des animaux (buse, aigle, pigeon,
moineau, corbeau, vautour, goeland...) l’autre avec des habitudes alimentaires (gaines, viande, os,
herbe, poissons,...). Le but est d’associer les animaux aux régimes. À chaque tour, l’utilisateur
sélectionne un ou plusieurs animaux, un régime. Le programme retire les animaux de la liste,
cumule les erreurs. Quand la liste des animaux est vide, le programme affiche le score.
44
Les fonctions file – readdir – opendir
Ces trois fonctions sont souvent utilisées ensembles. La première permet de lire un fichier
complet et de le ranger dans un tableau. Les indices du tableau sont les numéros de lignes. Les
valeurs sont le contenu de chaque ligne.
Les fonction opendir et readdir servent à obtenir la liste des fichiers se trouvant dans un
répertoire.
Exemple :
$rep=opendir(’.’);
while ($file = readdir($rep)) {
echo "Le fichier $file est ici !";
}
Exercice :
On considère que tous les exercices de cette feuille sont contenus dans un dossier appelé Exos.
Construire une page Web qui affiche la liste des exercices disponibles avec un lien hypertexte pour
chacun d’entre eux.
Ajouter une jolie présentation consistant en un tableau à deux colonnes et une seule ligne.
Un exercice apparaı̂t dans la colonne de droite. La liste des exercices sera placée dans la co-
lonne de gauche. Chaque élément de cette liste est précédé d’une boule de couleur jaune (fichier
http :/icons/yellowball.gif), ou rouge (fichier http :/icons/yellowball.gif) pour celui
actuellement affiché.
La fonction split
Pour ¡¡ éclater ¿¿ une chaı̂ne dans un tableau.
Exemple :
if (strtolower($reponse) == ’oui’ ) {
echo "vous avez donc répondu oui ou Oui ou OUI ou oUI...";
}
45
CREATE TABLE themes (numtheme SERIAL PRIMARY KEY,
libelle varchar(20) NOT NULL,
logo varchar(100));
CREATE TABLE auteurs (numauteur SERIAL PRIMARY KEY,
nom varchar(30) NOT NULL, prenom varchar(30),
email varchar(50));
CREATE TABLE nouvelles (numnouvelle SERIAL PRIMARY KEY,
texte text, reftheme INT4,
refauteur int4,
FOREIGN KEY (reftheme) REFERENCES themes (numtheme),
FOREIGN KEY (refauteur) REFERENCES auteurs (numauteur))
La fonction pg connect
Permet de se connecter à un serveur de bases de donnés posgresql. On doit donner en argument
à cette fonction, une chaı̂ne de connexion qui désigne le serveur posgresql, le nom d’utilisateur, son
mot de passe et la base de données. En retour, il faut mémoriser l’identificateur de cette connexion
qui permettra ensuite d’exécuter des requêtes.
Exemple :
Dans cet exemple, le serveur de base de données est aussi le serveur HTTP et nous supposons
que l’utilisateur n’a pas de mot de passe. Si l’identificateur de connexion est nul, alors la connexion
n’est pas réussie.
$conn_ident = pg_connect("dbname=nouvelles user=tommasi");
if ($conn_ident)
echo "connexion réussie";
else
echo "echec de la connexion";
La fonction pg exec
Permet de lancer une requête SQL au serveur identifié par une connexion. La fonction retourne
une référence du résultat.
Exemple :
Nous recherchons les enregistrements de la table thèmes. L’affichage du résultat n’est pas encore
effectué.
$conn_ident = pg_connect("dbname=nouvelles user=tommasi");
if ($conn_ident)
echo "connexion réussie";
else
echo "echec de la connexion";
$req_resu= pg_exec("SELECT * FROM themes");
46
du résultat. Cette instruction retourne un tableau avec une entrée par colonne, accessible par son
indice de position ou un indice textuel.
$conn_ident = pg_connect("dbname=nouvelles user=tommasi");
if ($conn_ident)
echo "connexion réussie";
else
echo "echec de la connexion";
$req_resu= pg_exec("SELECT * FROM themes");
$nombre_enreg = pg_numrows(req_resu);
for($i=0; $i<$nombre_enreg;$i++) {
$une_ligne= pg_fetch_array($req_resu, $i);
echo "Numtheme = ".$une_ligne[0];
echo "libelle= ".$une_ligne[1];
echo "logo = ".$une_ligne[2];
}
On peut accéder au champ libellé par $une_ligne[1] ou une_ligne["libelle"].
La fonction pg freeresult
Permet de libérer l’espace mémoire occupé par le résultat d’une requête :
Exemple :
47
Bibliographie
48
Index
A PPP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
attachement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22 proxy . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
B Q
Base64. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .22 quoted-printable . . . . . . . . . . . . . . . . . . . . . . . . . 22
C S
cache . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17 serveur mandataire . . . . . . . . . . . . . . . . . . . . . . 17
Cascading Style Sheets . . . . . . . . . . . . . . . . . . . 31 serveurs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
CGI . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33 SMTP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
CHAP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
chat . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23 T
client de messagerie électronique . . . . . . . . . 19 talk . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
clients . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2 TCP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
cookies . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31 U
UDP. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .12
F
feuilles de style . . . . . . . . . . . . . . . . . . . . . . . . . . 31
firewall . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
G
gateway . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
I
icq . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
IMAP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
indexation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
instant messenger . . . . . . . . . . . . . . . . . . . . . . . . 23
IP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
IP masquerade . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
IPV6 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
Irc . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
M
masque . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
MIME . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13, 22
modèle en couches . . . . . . . . . . . . . . . . . . . . . . . 12
moteur de recherche . . . . . . . . . . . . . . . . . . . . . 14
P
PAP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
pare-feu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
passerelle . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
POP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
port . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
49