Académique Documents
Professionnel Documents
Culture Documents
Polycopié Web Dynamique
Polycopié Web Dynamique
Ahmed ZINEDINE
2015
dd
Web Dynamique
Ahmed ZINEDINE
2015
Dernière mise à jour : 2019
Web Dynamique A. Zinedine
Présentation du polycopié
Le deuxième chapitre traite les feuilles de style en cascade (CSS). L’idée de base
est de séparer le contenu d’un document de son style. Le but est de faciliter la
maintenance des sites web et la modification de leurs styles. En plus, les
feuilles de style offrent plus de contrôle sur le style et permettent d’autres
possibilités non offertes par HTML.
Les besoins des sites actuels dépassent largement les possibilités offertes par
HTML (et CSS). En effet, ces deux langages sont destinés à présenter (afficher)
un document. Ils n’offrent aucune possibilité de traitement (comment faire par
exemple pour capturer le login et le mot de passe d’un utilisateur ?). Les scripts
viennent pour étendre les capacités de HTML. Ils sont de deux types : Les
scripts côté client (dont l’exécution se passe sur la machine de l’utilisateur) et
les scripts côté serveur (dont l’exécution se passe sur le serveur).
Ahmed Zinedine
3
Web Dynamique A. Zinedine
4
Web Dynamique A. Zinedine
5
Web Dynamique A. Zinedine
6
Web Dynamique A. Zinedine
7
Web Dynamique A. Zinedine
8
Web Dynamique A. Zinedine
Introduction
1) L’internet
a) Historique d’Internet
Internet est un réseau informatique très vaste. En fait, c’est un réseau de réseaux. Il est
constitué de plusieurs centaines de milliers de réseaux locaux (réseaux d’universités,
d’entreprises, d’organisations, d’individus…). Internet est si gigantesque qu’il s’étend à
l’heure actuelle sur tout le globe terrestre. Des millions et des millions d’ordinateurs son y
connectés.
Vers 1980, ARPA commença à faire évoluer les ordinateurs de ses réseaux vers les nouveaux
protocoles TCP/IP et elle se mit à subventionner l’université de Berkeley pour qu’elle
intègre TCP/IP dans son système d’exploitation UNIX (BSD). A cette époque, la quasi-
totalité des départements informatiques des universités américaines commencèrent à se
doter de réseaux locaux qui, en quelques années seront interconnectés entre eux sous
l’impulsion de la NSF (National Science Foundation).
En 1990, Le nom ARPANET cesse d’exister, le nom INTERNET (Inter Network) s’impose peu
à peu.
En 1992, la mise en place du Web (avec le multimédia) a donné une grande poussée au
développement de l’Internet.
En 1995, NSFNET disparaît à son tour. Composé de réseaux interconnectés, Internet devient
le réseau mondial que nous connaissons aujourd’hui.
9
Web Dynamique A. Zinedine
Ainsi, Internet s’est constitué progressivement par des centaines de milliers de réseaux
locaux mis en place par les universités, les entreprises, les administrations et organismes
divers, interconnectés entre eux.
Pour que deux ordinateur sur un réseau peuvent « communiquer entre eux », c'est-à-dire
échanger des informations, ils doivent utiliser tous les deux un même protocole : Un
protocole est un ensemble de règles de communication utilisés par deux ordinateurs qui
veulent communiquer sur le réseau pour pouvoir « se comprendre » c'est-à-dire c’est
comme une « langue commune » utilisée par les deux ordinateurs
Tous les ordinateurs sur Internet utilisent les protocoles de la suite TCP/IP (Transmission
Control Protocol/Internet Protocol) basée sur la commutation de paquets (datagrammes),
proposée par le pionnier d'ARPAnet Robert Kahn et le chercheur Vincent Cerf en 1974.. En
effet, les réseaux constituant Internet ne sont pas de même type (Ethernet, Token Ring,…),
et les ordinateurs sont de tout genre (PC, Macintosh,…) et utilisent différents systèmes
d’exploitation (Unix, Windows,…). La communication entre les différents nœuds est en fait
possible grâce à cette suite de protocoles ouverts utilisés pour la communication sur
Internet.
Internet offre plusieurs services. Chaque service utilise un protocole spécial de la suite de
protocoles TCP/IP. Voilà quelques exemples :
Ce service permet de se connecter et ouvrir une session sur une machine distante (si
on a les droits nécessaires) en utilisant un compte et un mot de passe.
Le courrier électronique
Il permet d’échanger des courriers avec des correspondants situés n’importe où sur
le réseau Internet. Il fonctionne en mode différé : les messages sont stockés dans une
boîte à lettres en attendant d’être lus par les destinataires. Ce service est parmi les
services d’Internet les plus utilisés.
Web en anglais signifie toile d'araignée et World, le monde. Il s’agit ici du service le
plus populaire d'Internet. En effet, le Web peut être vu comme une gigantesque
bibliothèque. Ce service permet de pouvoir consulter une quantité incroyable de
10
Web Dynamique A. Zinedine
documents à partir de son poste. Ces documents sont téléchargés (copiés sur votre
ordinateur) puis afficher sur votre écran.
Tous les services d’Internet suivent le modèle Client / Serveur. Les applications qui suivent
ce modèle se composent de deux parties (client et serveur) chacune s’exécutant sur un
ordinateur (qui peut être le même : i. e. le logiciel client et le logiciel serveur peuvent être
installés sur un même ordinateur). La communication se passe selon le modèle suivant :
Le serveur est toujours à l’écoute de tous les clients sur le réseau (généralement
plusieurs clients) ;
C’est le client qui doit prendre l’initiative pour demander le service ;
Le client émet une requête vers le serveur et attend la réponse ;
Si le serveur détecte une requête, il la traite et il envoie la réponse au client
concerné ;
Le client reçoit le résultat et il l’exploite.
11
Web Dynamique A. Zinedine
b) Le W3C
En 1994, Tim Bernes-Lee fonda le W3C (World Wide Web Consortium) afin de garder un
contrôle sur l'évolution du Web. Cette organisation, regroupant différentes sociétés actives
sur le Web, est chargée de contrôler l'évolution des technologies et des langages utilisés sur
le Web. Les principaux navigateurs utilisés par la plupart des internautes respectent plus ou
moins les recommandations du W3C.
Comme tous les autres services d’Internet, Le WWW suit le modèle Client / Serveur.
Parmi les logiciels Serveurs (serveurs Web, dits aussi serveurs HTTP) il y a Apache (très
populaire) et IIS (de Microsoft).
Les logiciels clients du Web s’appellent navigateurs. Parmi les plus connus il y a : Mozilla
Firefox, Google Chrome, Microsoft Internet Explorer,…
Supposons par exemple que vous voulez visiter le site www.fsdm.usmba.ac.ma. Quand vous
tapez cette adresse dans la barre d’adresses du navigateur (par exemple Firefox) et vous
validez, alors le client (qui est Firefox) envoie la requête au serveur se trouvant à cette
adresse. Ce serveur qui est à l’écoute des requêtes pareilles envoie la page HTML demandé.
Quand Firefox reçoit la page, il l’affiche sur votre écran.
Un navigateur Web est donc un logiciel informatique qui se charge de demander les pages
HTML (ordonnées par l’utilisateur) auprès du serveur Web. Quand il reçoit le fichier HTML
voulu, il interprète ses composants pour collecter, disposer et afficher les éléments d’une
page Web. Le fichier HTML est toujours bâti sur des commandes HTML, mais il peut aussi
contenir des éléments pour gérer le contenu dynamique tels que des sections de langage de
script, des applets Java, des contrôles ActiveX. Les navigateurs utilisent aussi des
programmes appelés Plug-ins pour interpréter diverses données telles que les données audio
et vidéo.
Il existe un autre langage appelé XML (eXtensible Markup Language). Alors que les pages
HTML utilisent des balises prédéfinies dans les normes du langage (par le W3C), le XML
permet l’utilisation de balises personnalisées. L’étude de XML est hors du cadre de ce cours.
12
Web Dynamique A. Zinedine
D’autres langages sont venus se greffer sur le HTML pour étendre ses possibilités, par
exemple JavaScript et CSS.
JavaScript est un langage de scripts (côté client) qui permet d’ajouter des blocs de code dans
un document HTML. Par exemple, il permet de contrôler la validité des informations saisies
dans un formulaire avant de l’envoyer au serveur. Il permet aussi de créer des effets visuels
dans une page HTML, par exemple animer un bouton, modifier la couleur d’un texte…
D’autres langages de scripts interviennent dans le côté du serveur (Par exemple, PHP,
ASP…) et ils permettent d’effectuer certains traitements pour engendrer des pages HTML
dynamiquement. Ils permettent, entre autres, l’interfaçage web/bases de données.
13
Web Dynamique A. Zinedine
14
Web Dynamique A. Zinedine
Partie 1
HTML et Feuilles de style
15
Web Dynamique A. Zinedine
16
Web Dynamique A. Zinedine
0) Introduction
a) Comment fonctionnent les pages Web ?
Les pages Web ressemblent à des pages imprimées. Le principe d’affichage d’une page Web
est très simple : vous demandez à votre navigateur d’afficher une page de votre choix et la
page apparaît sur votre écran. Si la page se trouve déjà sur votre disque dur, l’affichage est
instantané. Si la page est sur un autre ordinateur quelque part dans le monde, ça peut être
un peu plus lent.
La page Web possède des caractéristiques très importantes hors de portée d’une page
papier: vous pouvez par exemple cliquer sur un lien qui vous mène à une autre page. Vous
pouvez aussi cliquer sur le bouton Envoyer sous un formulaire pour l’envoyer tout de suite
à son destinataire. Les images animées, le son, la vidéo n’existent pas aussi dans les pages en
papier.
Mais, il faut aussi savoir qu’une page Web affichée sur votre écran peut être constituée en
réalité par des éléments provenant de plusieurs fichiers (et même parfois de plusieurs
ordinateurs). Par exemple, une page Web peut être constituée d’un fichier texte (HTML)
situé sur un serveur au Maroc, des fichiers images situés sur un ordinateur en France, et des
fichiers son ou vidéo sur un autre ordinateur au Canada.
C’est pourquoi la tâche d’un navigateur dépasse largement l’affichage d’un fichier. Elle
consiste également à assembler les composantes de la page et à les disposer conformément
aux commandes HTML insérées dans le texte par l’auteur de la page.
Pour récapituler, On peut dire qu’une page Web contient généralement plusieurs éléments :
Un fichier HTML : c’est un fichier texte simple qui contient le texte de la page ainsi
que les commandes HTML nécessaires pour la mise en forme du texte et à la
description de la disposition des autres éléments sur la page.
Des images, des sons, des vidéos, des Applets Java…ces éléments sont stockés dans
des fichiers séparés qui accompagnent le fichier HTML.
17
Web Dynamique A. Zinedine
Le HTML a très vite remporté un grand succès. Mais il a aussi rencontré certaines limites.
En particulier, il n'est pas extensible (l’auteur de la page ne peut pas définir ses propres
balises). C’est pour cela que le langage XML (eXtensible Markup Language) a été créé,
précisément fondé sur la notion d'extensibilité.
Le problème, c'est que le HTML n'était pas compatible avec le XML ; c'est pourquoi l'on a
conçu le langage XHTML (eXtensible HTML), qui prend en considération le caractère strict
de la syntaxe XML, mais conserve toute la simplicité et tous les principes fondamentaux du
HTML.
Dans un simple document texte. Tout éditeur de texte brut est convenable. Le bloc-notes de
Windows est parmi les plus utilisés. Une page HTML est donc un simple document texte à
la seule condition qu’il porte l’extension .html (ou .htm) pour qu’il soit reconnu par le
navigateur.
HTML est un langage de balisage (ou Markage). Il se base sur la notion de balise. Une balise
est une instruction HTML. Son rôle est de déclarer un élément de la page et d’indiquer au
navigateur comment l’afficher. Généralement, une balise s’ouvre par <balise> et se ferme
par </balise>.
Une balise peut parfois accepter plusieurs options que l’auteur de la page peut définir pour
cette balise. Ces options s’appellent attributs de la balise. La syntaxe générale est la
suivante :
18
Web Dynamique A. Zinedine
1 <!DOCTYPE html>
2 <html>
3 <head>
….
4 </head>
5 <body>
…
6 </body>
7 </html>
Remarques
1) Les navigateurs sont très tolérants en ce qui concerne la syntaxe HTML. Ils ne
signalent jamais d’erreurs, mais ils ignorent tout simplement les balises non
correctes. Le résultat peut être loin de ce que vous attendez. Mais, il est très
recommandé de respecter les bonnes habitudes de développement et le caractère
strict du XHTML et du HTML5.
2) La casse n’est pas importante en HTML. Par exemple, <HTML>, <HtMl> et <html>
signifie la même chose. En HTML 4, on recommandait l’écriture de toutes les balises
en Majuscule. Mais les normes XHTML et HTML5 exigent que toutes les balises et
tous les attributs soient en minuscule. Il faut donc respecter cette norme et écrire
toutes les balises en minuscule.
3) HTML n’accepte pas les chevauchements entre les balises. C'est-à-dire, la première
balise ouverte doit être la dernière fermée et ainsi de suite. Par exemple, la balise
<html> de la ligne 2 est ouverte avant la balise <head> (ligne 3), donc la balise
</head> (ligne 4) doit être insérer avant la balise </html> (ligne 7).
Les principales balises de cette section sont <title>, <meta> <link> et <base>. Nous allons
voir maintenant la balise <title> et nous reviendrons sur les autres balises plus tard.
19
Web Dynamique A. Zinedine
La balise <meta>
<meta charset="UTF-8">
La balise <title>…</title>
Cette balise définit un titre pour votre page. Ce titre sera affiché dans la barre de titre du
navigateur lors de l’affichage de la page.
<!DOCTYPE html>
<html>
<head>
<title> Ma première page web </title>
</head>
<body>
…
</body>
</html>
Cette partie est encadrée par les balises <body> et </body> et contient tout le texte de la
page ainsi que toutes les balises nécessaires pour formater ce texte et indiquer aux
navigateurs comment afficher tous les éléments de la page.
<!DOCTYPE html>
<html>
<head>
<title> Ma première page web </title>
</head>
<body>
Bienvenue sur ma page
</body>
</html>
Dans la suite, nous allons regrouper les balises HTML et les étudier une par une.
20
Web Dynamique A. Zinedine
La balise <body>
Nous avons dit que le corps du document HTML est délimité par les balises <body> et
</body>. Cette balise accepte plusieurs attributs qui vous permettent d’exprimer vos
préférences en ce qui concerne un certain nombre de propriétés globales qui concernent
toute la page. Par exemple, vous pouvez choisir :
Pour exprimer ces préférences, vous devez ajouter les attributs convenables dans la balise
<body> :
L’attribut text
Cet attribut permet de choisir une couleur pour le texte de la page. Si vous ne
définissez pas cet attribut, le texte sera par défaut en noir (sur un fond blanc).
L’attribut bgcolor
Cet attribut permet de choisir une couleur d’arrière-plan pour votre page. La
couleur par défaut (si vous n’aviez rien spécifié) est le blanc.
L’attribut background
L’attribut link
Cet attribut vous donne la possibilité de choisir une couleur pour les liens
hypertextes de votre page. La couleur par défaut est le bleu.
L’attribut vlink
Les liens déjà visités sont d’habitude rouges. Mais vous pouvez spécifier une
autre couleur à l’aide de cet attribut.
L’attribut alink
La couleur des liens actifs peut être définie à l’aide de cet attribut.
Exemple :
21
Web Dynamique A. Zinedine
<!DOCTYPE html>
<html>
<body text = "white" bgcolor = "#0000FF" link = "red" vlink = "yellow">
Le texte de cette page est en blanc (white) sur un fond bleu (le bleu c’est #0000FF en
hexadécimal). Les liens sont rouges (red) et les liens visités sont en jaune (yellow).
</body>
</html>
Pour définir une image comme arrière-plan, vous pouvez remplacer bgcolor = "couleur" par
background = "adresseImage".
HTML ignore tous les espaces et les retours à la ligne que vous insérez dans la page source.
Si vous voulez forcer un retour à la ligne dans un paragraphe, la balise <br> vous donne le
résultat. L’exemple suivant illustre ceci :
<!DOCTYPE html>
<html>
<body>
à la ligne ici. Mais après cette phrase, il y a un retour à la ligne. <br> C’est l’effet de la
balise break.
</body>
</html>
22
Web Dynamique A. Zinedine
b) La balise <hr>
La balise <hr> vous offre la possibilité de dessiner une barre horizontale dans votre page.
Cette balise accepte plusieurs options concernant la couleur de la barre horizontale (attribut
color), sa largeur (l’attribut width), sa taille (i.e. sa hauteur) (l’attribut size) et son
alignement (l’attribut align)
Remarques
En HTML, une couleur prend une valeur de la forme color = " #rrggbb". C’est un chiffre de
6 chiffres hexadécimaux (de 0,1…,8,9,A,B,…F). rr correspond au pourcentage du rouge dans
la couleur choisie, gg correspondre au pourcentage du vert (green) et bb correspond au
pourcentage du bleu. Par exemple, la couleur blanche contient 100% de chacune des trois
couleurs (100% c’est FF). Donc le blanc c’est #FFFFFF. Le noir correspond à 0% de chacune
des 3 couleurs i.e. #000000. Le vert par exemple est #00FF00.
Les attributs width et size acceptent des valeurs en pixel ou en pourcentage. Préférez le
pourcentage car il convient à toutes les tailles d’écrans et s’ajuste dynamiquement avec la
taille de la fenêtre.
L’attribut align accepte les valeurs align= "left" pour aligner la barre à gauche, align
= "center" pour la centrer (c’est la valeur par défaut), et align = "right" pour l’aligner à
droite.
<!DOCTYPE html>
<html>
<body>
Bienvenue sur ma page
<hr>
La barre suivante est de couleur bleue, sa taille et 60% de la taille de la fenêtre et elle est
centrée.
<hr color = "blue" width = "60%" align = "center">
</body>
</html>
23
Web Dynamique A. Zinedine
Remarque
Comme vous pouvez le remarquer, les deux balises précédentes <br> et <hr> ne possèdent
pas de balises fermentes. C’était acceptable dans la norme HTML 4. Mais la norme XHTML
exige que toute balise doive être fermée. Pour les balises qui n’ont pas de balise fermante, on
ajoute une barre oblique dans la balise elle-même avant le symbole >. La forme générale
d’une telle balise est la suivante :
<balise />
Par exemple la balise <br> devient <br /> et la balise <hr> devient <hr />. Comme ça, le
navigateur ouvre la balise et comprend qu’il ne doit pas attendre une balise fermente.
c) La balise <pre>…</pre>
Parfois vous aurez besoin à insérer dans une page web du texte pré-formaté et vous voulez
que les navigateurs l’affiche tel quel (en gardant tous les espaces, tous les retours à la
ligne…). La balise <pre> vous offre cette possibilité : tout texte inséré entre <pre> et </pre>
s’affiche dans sa forme originale. Cette mise en forme est convenable par exemple pour
afficher un morceau de code.
24
Web Dynamique A. Zinedine
<!DOCTYPE html>
<html><body>
Bienvenue sur ma page
<pre>
main( ) {
for (i =1; i != 100 ; i++) {
s = s +i ;
}
}
</pre>
</body>
</html>
Votre clavier vous permet de taper un certain nombre de caractères directement dans un
éditeur de texte tel que le Bloc-Notes. Mais malheureusement, tous ces caractères ne sont
pas affichables correctement dans tous les navigateurs. Par exemple, les caractères
accentués tels que (é, è, à, ù, ô, …) peuvent ne pas s’afficher correctement dans certains
navigateurs. La même chose pour certains symboles et lettres par exemples : &, ®, ©, $, ¥, £,
€, π, σ, θ, ÷,…
D’autre part, certains caractères sont utilisés par le codage de HTML, par exemple, les
symboles : <, > et ".
HTML prévoit une méthode pour pouvoir afficher tous ces caractères dans une page web. Il
donne à chaque caractère un code qui commence par « & » suivi de « # » puis d’un numéro
(qui dépend du caractère voulu) et on termine par « ; ». Par exemple, pour afficher le mot
« café » dans une page HTML, il suffit d’écrire : « café ; ». Donc on a utilisé le code
« é » pour afficher le caractère accentué « é ».
Vous pouvez aussi utiliser des mnémoniques mémorisables plus facilement que ces codes.
Par exemple, « é » est désigné par « &eaccute; », « è » est désigné par « è », « à »
est désigné par « à »…
Caractère mnémonique
à à
ù ù
è è
é é ;
ê ê
25
Web Dynamique A. Zinedine
î î
û û
ï ï
ü ü
ç ç
< <
> >
& &
" "
Pour afficher n’importe quel caractère qui n’appartient pas au jeu de caractère ASCII de
base, vous pouvez taper le symbole « & » suivi de « # » suivi du code Unicode du caractère
voulu et puis terminez par « ; ». Par exemple :
Caractère Code
α α
β β
γ γ
δ δ
Il existe d’autres balises de mise en valeur de texte. Par exemple, tout texte mis entre la
balise <em> et </em> est mis en valeur (ça dépend du navigateur, en général en italique). De
même tout texte entre <strong> et </strong> est affiché généralement en gras (ça dépend
aussi du navigateur utilisé).
Pour afficher du texte en indice, vous pouvez l’introduire entre les balises <sub> et </sub>
26
Web Dynamique A. Zinedine
Pour afficher du texte en exposant, vous pouvez l’introduire entre les balise <sup> et
</sup>.
On peut bien sûr combiner toutes ces balises. Mais, il faut faire attention à l’ordre : l’ordre
de fermeture des baise doit être inverse à l’ordre d’ouverture : la première balise qui s’ouvre
doit être la dernière à se fermer. L’écriture suivante est incorrecte:
HTML contient des balises qui sont utilisées pour la définition de style de certaines divisions
particulières de vos pages. Par exemple :
La balise <cite>…</cite>
Elle est utilisée pour insérer une citation dans le document. Le texte mis entre <cite> et
</cite> est affiché généralement en italique.
La balise <code>…</code>
Le texte délimité par ces balises est affiché en général avec des caractères de type
imprimerie. Elle sert généralement à introduire du code informatique dans la page web.
La balise <dfn>…</dfn>
Cette balise vous permet d’introduire une définition. Elle affiche les caractères en gras ou en
gras italique (selon le navigateur utilisé).
La balise <blockquote>…</blocquote>
Cette balise introduit un retrait dans le texte. La partie délimitée par ces deux balises
s’affiche en retrait par rapport au reste de la page.
27
Web Dynamique A. Zinedine
a) Les Titres
Exemple :
<!DOCTYPE html>
<html>
<body>
<h1> Ce titre est de niveau 1 </h1>
<h2> Ce titre est de niveau 2 </h2>
<h3> Ce titre est de niveau 3 </h3>
<h4> Ce titre est de niveau 4 </h4>
<h5> Ce titre est de niveau 5 </h5>
<h6> Ce titre est de niveau 6 </h6>
</body>
</html>
28
Web Dynamique A. Zinedine
La balise <p> accepte l’attribut align qui permet d’aligner un paragraphe à gauche (left), à
droite (right) ou centré (center).
<!DOCTYPE html>
<html>
<body>
</body>
</html>
Cette balise définit une division dans votre page. Cette division peut contenir du texte, des
images,… Vous pouvez par suite déterminer une mise en forme spéciale pour cette division.
Par exemple, vous pouvez demander aux navigateurs de l’aligner à droite, à gauche ou la
centrer sur l’écran grâce à l’attribut « align » de cette balise (avec les valeurs right, left ou
center).
<!DOCTYPE html>
<html>
<body>
<div align = "right"> Cette partie de la page est alignée à droite </div>
</body>
</html>
d) Les listes
Si vous avez besoin d’insérer des listes dans vos pages web, sachez que vous pouvez le faire
en HTML de trois manières :
1) Les listes ordonnées (Ordered Lists : ce genre convient si vous voulez insérer un numéro
pour chaque élément de la liste (List Item). On utilise la balise <ol> …</ol> pour entourer la
liste. Tout élément de la liste est introduit entre les balises <li> et </li>
29
Web Dynamique A. Zinedine
<!DOCTYPE html>
<html>
<body>
Voici une liste ordonnée :
<ol>
<li> premier élément </li>
<li> deuxième élément </li>
<li> troisième élément </li>
</ol>
</body>
</html>
Par défaut, le compteur commence à 1 dans les listes ordonnées. Vous pouvez imposer une
autre valeur de commencement en spécifiant l’attribut « start » de la balise <ol>. Par
exemple, si vous modifiez dans le code précédent la balise <ol> par <ol start ="7">, les
numéros des éléments de la liste seront respectivement 7, 8, et 9.
La balise <ol> admet aussi l’attribut « type » qui spécifie le type de la numérotation utilisée.
Les valeurs possibles pour cet attribut sont :
« 1 » pour utiliser les chiffres arabes (1, 2, 3,…). C’est la numérotation par défaut.
« a » pour utiliser les lettres minuscules (a, b, c,…)
« A » pour utiliser des lettres majuscules (A, B, C,…)
« i » pour les chiffres romains (i, ii, iii,…)
« I » pour les chiffres romains (I, II, III,…)
2) Les listes non ordonnées (Unordered Lists) : qui conviennent pour les listes dont l’ordre
des éléments n’est pas important (une puce devant chaque élément de la liste suffit).Cette
fois-ci, on utilise les balises <ul> et </ul> pour commencer et puis terminer une liste. Un
élément de la liste est introduit entre <li> et </li> :
30
Web Dynamique A. Zinedine
<!DOCTYPE html>
<html>
<body>
Voici une liste non ordonnée :
<ul>
<li> premier élément </li>
<li> deuxième élément </li>
<li> troisième élément </li>
</ul>
</body>
</html>
La balise <ul> accepte l’attribut « type » qui donne la possibilité de modifier la puce utilisée
devant chaque élément. Les valeurs possibles sont :
o circle
square
Dans l’exemple précédent, on pourrait afficher un petit carré noir devant chaque élément de
la liste en remplaçant la balise <ul> par <ul type = "square">.
On peut aussi modifier la puce d’un seul élément de la liste. L’attribut type sera introduit
dans ce cas dans la balise <li> de l’élément concerné.
3) Les listes descriptives (Descriptive Lists): elles utilisent une mise en forme spéciale.
Chaque élément de la liste est suivi par une description. On utilise les balises suivantes :
31
Web Dynamique A. Zinedine
<!DOCTYPE html>
<html>
<body>
Quelques filières de notre faculté:
<dl>
<dt>SMI</dt>
<dd> Sciences Mathématiques et Informatique</dd>
<dt>SMA</dt>
<dd> Sciences Mathématiques et Applications</dd>
<dt>STU</dt>
<dd> Sciences de la Terre et de l’Univers</dd>
</dl>
</body>
</html>
4) Les images
Les navigateurs actuels sont capables d’afficher différentes données multimédia dans une
page web. En particulier, les images sont parmi les éléments essentiels d’une page web.
Les images destinées pour le web portent le plus souvent l’extension .GIF, .JPG ou .PNG. Le
format GIF est convenable pour les graphiques qui n’utilisent pas beaucoup de couleurs,
tandis que les formats JPG ou PNG conviennent pour les images de haute qualité qui
utilisent des millions de couleurs (par exemple les photos).
32
Web Dynamique A. Zinedine
Cette balise vous permet d’insérer une image dans votre page web. Il possède un attribut src
(qui est obligatoire). Cet attribut spécifie l’adresse de l’image concernée. Rappelons que les
images d’une page web sont stockées séparément de la page HTML et que c’est le
navigateur qui se charge de chercher ces images dans leurs emplacements et puis les
afficher.
Exemple
<html>
<body>
<img src = "MesImages/MesPhotos/MaPhoto.jpg" />
</body>
</html>
Ce code demande au navigateur d’afficher l’image Maphoto.jpg qui se trouve dans le sous-
dossier MesPhotos du dossier MesImages. Ce dernier se trouve dans le même dossier que la
page HTML.
l’attribut alt
Cet attribut est très intéressant. Il vous permet de définir un texte comme
alternative de l’image : dans le cas où le navigateur ne peut pas afficher
l’image pour une raison ou l’autre, il affiche alors le texte contenu dans
l’attribut alt. Ce paramètre est utilisé aussi par certains navigateurs qui lisent
le texte pour les personnes non-voyants.
l’attribut align
Cet attribut vous permet de bien placer l’image sur la page et de l’aligner avec
le texte. Cet attribut accepte 2 valeurs pour l’alignement horizontal et 5
valeurs pour l’alignement vertical
33
Web Dynamique A. Zinedine
5 valeurs sont possibles pour aligner une image verticalement par rapport à la
ligne en cours :
Si vous ne mettez pas l’attribut align, c’est l’option align = "bottom" qui est retenue
par défaut.
5) Incorporer du multimédia
Le terme multimédia signifie tous ce qui est en relation avec les images animées, du son et
de la vidéo. Dans nos jours, on ne peut pas parler du web sans le multimédia. HTML5 utilise
la balise <embed /> pour incorporer les fichiers audio ou vidéo dans la même page web.
Autrement dit l’affichage du fichier audio ou vidéo se passe dans la fenêtre du navigateur
avec le texte et images de la page. Pour ceci, le navigateur crée une zone d’affichage dont
vous pouvez contrôler les dimensions (width, height) et l’alignement (align = (right, left)).
Ces attributs se comportent exactement comme dans le cas d’une image. Généralement, les
navigateurs utilisent des plug-ins pour lire le contenu multimédia. Un plug-in est un
programme qui est écrit spécialement pour étendre les capacités d’un autre programme. Par
exemple, dans notre cas, le navigateur web a besoin d’un plug-in capable de lire le son ou la
vidéo. D’habitude, plusieurs plug-ins sont installés avec les navigateurs pour leur permettre
de lire les fichiers multimédia.
6) Les liens
La technique des liens hypertextes était derrière le grand succès du web. Elle permet une
navigation facile et efficace entre les différentes pages du web. L’auteur d’une page peut
34
Web Dynamique A. Zinedine
définir certains éléments de sa page (du texte, des images,…) comme des liens hypertextes
pointant sur d’autres pages, les visiteurs de la page peuvent cliquer sur ces éléments pour
accéder aux pages de destinations.
a) La balise <a>…</a>
Pour créer un lien hypertexte dans vos pages, HTML vous offre la balise <a>…</a>. Pour
que le lien devienne cliquable, il faut utiliser l’attribut href de cette balise. Cet attribut
détermine la destination du lien, c'est-à-dire l’adresse de la page à laquelle mène ce lien. La
syntaxe est de ce genre :
Dans cet exemple, lors de l’affichage de la page l’utilisateur peut cliquer sur le texte (ou tout
autre élément) qui se trouve entre <a > et </a> (dans notre cas « Cliquez ici »). La page qui
se trouve à l’adresse « adresseURL » se charge dans la fenêtre du navigateur.
1. Lien vers un site externe : dans ce cas, vous donnez l’adresse URL (Uniforme
Ressource Locator) complète du site concerné. Une URL est de la forme :
« Protocole:Ordinateur/Dossier/SousDossier/SousSousDossier/…/fichier »
Le premier lien utilise le protocole http (protocole du web) et mène à une page qui s’appelle
index.htm sur un ordinateur qui se trouve à l’adresse (www.fsdm.usmba.ac.ma).
Le deuxième lien utilise le protocole FTP (protocole de transfère des fichiers). Il mène au site
ftp.microsoft.com.
2. Lien vers le même site : pour créer un lien vers une autre page dans votre site. Vous
utilisez toujours la balise <a > et l’attribut href. L’adresse à fournir cette fois-ci est le
chemin de la page à ouvrir. Par exemple si vous avez deux pages, page1.html et
page2.html, vous pouvez placer un lien dans la page page1.html <a href =
"page2.html"> Aller sur la page 2 </a>. Ce lien permet d’ouvrir la deuxième page.
3. Lien vers une section de la page courante (Ancres) : Vous pouvez créer un lien qui
pointe sur une section particulière de votre page. Par exemple, si vous avez une page
35
Web Dynamique A. Zinedine
très longue, vous pouvez créer un index en haut de la page avec des liens qui mènent
aux différentes sections de la page.
Pour créer un lien vers une section de la même page, on passe par deux étapes :
<!DOCTYPE html>
<html>
<body>
<h2> paragraphe 1 </h2>
<p> Ici commence le paragraphe 1. Cliquez sur <a href = "#Parag2"> le lien </a>
Pour passer directement au paragraphe 2.
…
…
…
Quand l’utilisateur clique sur le mot « le lien » du premier paragraphe, la partie de la page
qui commence par <a name = "Parag2"> s’affiche à l’écran.
4. Liens vers une section particulière d’une autre page : On le fait aussi en deux étapes :
o Créer une ancre nommé (étiquette) dans la partie cible de la deuxième page.
On le fait comme dans le cas précédent par une balise <a name "UnNom">
insérée au début de la section ciblée par le lien.
o Créer un lien hypertexte qui pointe vers cette étiquette dans la première page
de la forme <a href = "page2.html#UnNom">.
36
Web Dynamique A. Zinedine
<!DOCTYPE html>
<!-- page2.html -->
<html>
<body>
<h2> paragraphe 1 </h2>
<p> Ici commence le paragraphe 1.
…
…
…
<a name = "Parag2">
<h2> Paragraphe 2 </a>
<p> C’est le paragraphe 2 …
…
…
</body>
</html>
<!DOCTYPE html>
< !-- page1.html -->
<html>
<body>
Cliquez <a href = "page2.html#Parag2"> Ici </a > pour allez au paragraphe 2 de la page
page2.html
…
…
</body>
</html>
b) Images et liens
On peut utiliser une image comme lien hypertexte. Un simple clic sur l’image ouvre une
autre page HTML. C’est très simple. Il suffit d’insérer l’image concernée entre <a href = "">
et </a>.
Remarque : Quand vous faites une image en tant que lien, une bordure (généralement blue)
est créée autour de l’image. Si cette bordure ne vous plait pas, vous pouvez vous en
débarrasser en donnant la valeur 0 à l’attribut border de l’image :
7) Les tableaux
Parmi les éléments les plus intéressants dont l’auteur d’une page HTML aura besoin on
trouve les tableaux. En effet, on peut se servir des tableaux si on veut structurer les
informations à afficher dans des lignes et des colonnes. On peut aussi utiliser les tableaux
pour mieux contrôler la mise en page et la disposition des différents éléments sur la page
web.
37
Web Dynamique A. Zinedine
Un tableau est donc un ensemble de cellules disposées sur plusieurs lignes. HTML offre
plusieurs balises et attributs pour définir des tableaux :
La balise <table>…</table> : le début du tableau est déclaré par <table> et sa fin est
déclarée par </table>. Toutes les autres balises concernant ce tableau doivent être
entre ces deux balises.
La balise <tr> …</tr> : pour créer une ligne d’un tableau, on utilise ces balises. Une
ligne commence par <tr> et se termine par </tr>. Toutes les cellules de cette ligne
sont à l’intérieur de ces deux balises.
La balise <td>…</td> : Pour créer une nouvelle cellule dans une ligne, on
commence par la balise <td> et on termine la cellule par la balise </td>. Donc
l’information contenue dans la cellule est entourée par <td> et </td>.
La balise <th>…</th> : c’est un cas particulier de la balise <td> </td>. On l’utilise si
on veut créer des entêtes pour les colonnes. Dans ce cas, on peut utiliser pour les
cellules de la première ligne la balise <th> au lieu de <td>. Le navigateur se charge
ensuite de mettre en valeur le contenu de ces cellules d’entête pour les différentier
des autres cellules du tableau.
La balise <caption>…</caption> : elle permet de définir un titre pour le tableau.
<!DOCTYPE html>
<html>
<body>
<table>
<tr>
<th> Nom </th> <th > Prénom </th>
</tr>
<tr>
<td> Karimi </td> <td > Karim </td>
</tr>
<tr>
<td> Moussi </td> <td > Moussa </td>
</tr>
</table>
</body>
</html>
38
Web Dynamique A. Zinedine
Remarquez que le titre du tableau est mis en haut du tableau malgré que la balise <caption>
soit insérée à la fin du tableau. Remarquez aussi que les cellules de la première ligne du
tableau sont en gras. C’est parce que nous avons utilisé <th> au lieu de <td>.
Ces options sont exprimées à l’aide d’attributs de la balise <table>. Voilà les principales:
Par défaut, le tableau est créé sans bordures (largeur de bordure égale à 0).
Mais vous pouvez définir la largeur des bordures par l’attribut border. Par
exemple l’option <table border = 2> demande au navigateur de dessiner une
bordure de largeur 2 pixels autour de toutes les cellules.
Vous pouvez définir une couleur pour l’arrière-plan de votre tableau. Par
défaut, l’arrière-plan est blanc. Par exemple, la balise <table bgcolor =
"green"> demande un tableau sur un arrière-plan vert.
39
Web Dynamique A. Zinedine
Si vous préférez une image d’arrière-plan plutôt qu’une couleur, vous devez
utiliser l’attribut background au lieu de bgcolor en lui fournissant l’adresse
de l’image. Par exemple, l’option <table background = "image.gif"> crée un
tableau dont l’arrière-plan est l’image contenue dans le fichier « image.gif »
Vous pouvez contrôler les marges des cellules de votre tableau. L’attribut
cellpadding est utilisé pour ceci. Par exemple, pour fixer les marges
intérieures de toutes les cellules à 5 pixels, il vous suffit d’écrire <table
cellpadding = 5>.
40
Web Dynamique A. Zinedine
Dans le cas où le tableau possède des bordures, vous pouvez définir pour la
bordure d’une ligne particulière une couleur différente du reste du tableau.
Pour cela utilisez l’attribut bordercolor dans la balise <tr> concernée.
Vous pouvez aussi définir pour une ligne particulière une couleur d’arrière-
plan différente de la couleur utilisée pour le reste du tableau. Pour ce faire,
utilisez l’attribut bgcolor dans une balise <tr>. Par exemple, la balise <tr
bgcolor = "blue" bordercolor = "white"> définit un arrière-plan bleu et des
bordures blanches pour cette ligne même si l’arrière-plan du tableau et ses
bordures ont d’autres couleurs
De même, le même attribut bordercolor utilisé cette fois-ci dans une balise
<td> permet de spécifier une couleur de bordure valable pour cette unique
cellule et qui peut être différente des bordures de la ligne ou du tableau.
Comme pour la balise <tr>, les attributs align et valign utilisés dans une
balise <td> permettent de définir l’alignement horizontal et vertical de texte
dans la cellule concernée. Si on écrit pour une cellule <td bgcolor =
"maroon" bordercolor = "black" align = "center" valign ="bottom">, alors
on obtient une cellule sur un fond marron, avec des bordures en noir. Le texte
est aligné en bas des cellules mais centré horizontalement.
Parfois vous aurez besoin d’étendre une cellule sur plusieurs lignes ou
plusieurs colonnes.
Pour étendre une cellule sur plusieurs colonnes, utilisez l’attribut colspan
dans la balise <td>. L’écriture suivante <td colspan = 3> étend cette cellule
sur 3 colonnes.
On conclut donc que pour les attributs communs entre les balises <table>, <tr> et <td>, en
cas de conflit la priorité est pour <td>, puis <tr> et enfin <table>.
41
Web Dynamique A. Zinedine
Remarque : la balise <th> se comporte exactement comme la balise <td>. Elle possède donc
les mêmes attributs.
8) Les formulaires
Le web est actuellement parmi les moyens de communication les plus répondus. Une page
web vous permet de partager vos informations avec les autres et de communiquer vos
propres idées à tout le monde.
D’autre part, les informations peuvent passer dans le sens inverse : Vous pouvez collecter
des informations auprès des utilisateurs de vos pages. Pour cela vous pouvez proposer aux
visiteurs de vos pages des formulaires à remplir.
HTML propose un ensemble de balises qui créent des champs de saisie (des zones de texte,
des cases à cocher, des boutons radio, des listes de sélections, ….)
Dans ce paragraphe, nous allons apprendre comment créer le squelette d’un formulaire.
Toutefois, l’exploitation des données envoyées par l’utilisateur sera faite par des scripts côté
serveur (voir la partie de ce cours sur PHP).
Un formulaire est constitué par un ensemble de champs (pour chaque champ, il existe une
balise spéciale). La création de ces champs se fait entre les deux balises <form> et </form>.
Donc un formulaire commence par <form> et se termine par </form>, et tout contrôle créé
à l’extérieur de ces balises, ne fera pas partie du formulaire en cours.
42
Web Dynamique A. Zinedine
Les zones de texte (<input type = "text" />) : cette balise permet de créer une zone de
saisie du texte. Par exemple, si vous voulez savoir le nom de l’utilisateur vous pouvez
proposer une zone de texte créée pour ceci.
Avec le type text, la balise <input /> accepte les attributs suivants :
name : cet attribut permet d’attribuer un nom pour ce champ. Ce nom permet
d’identifier le champ pour pouvoir le référencier ultérieurement (par exemple, dans
les scripts traitant les données du formulaire).
value: la valeur de cet attribut est envoyée au script traitant le formulaire. Il s’agit ici
du texte saisi dans la zone.
size : cet attribut précise la taille de la zone du texte.
maxlength : c’est le nombre maximal de caractères que l’utilisateur peut saisir dans
ce champ.
Les mots de passe (<input type = "password">) cette balise crée une zone de texte
spéciale dans laquelle tout caractère saisi au clavier parait à l’écran sous la forme (*), la
copie du contenu de la zone est aussi impossible, ce qui est convenable pour saisir un mot de
passe. Voilà, les principaux attributs :
Les champs cachés (<input type = "hidden">) : Vous pouvez créer un champ invisible
dans un formulaire. Ce champ ne parait pas à l’écran, mais vous pouvez accéder à sa valeur.
Exemple d’utilisation : vous pouvez stocker dans un tel champ une valeur utilisable par les
autres champs (par exemple un e-mail, ou une variable…). Les principaux attributs :
Les cases à cocher (<input type = "checkbox">) : si vous voulez proposer à l’utilisateur
plusieurs choix, et que cet utilisateur peut choisir plusieurs options simultanément, vous
pouvez alors créer des cases à cocher. Ceci se fait par la balise <input type = "checkbox">
qui accepte les attributs suivants :
name : permet d’identifier chaque case à cocher. Chaque case à cocher a son propre
nom.
value : cette valeur sera utilisée par le script qui reçoit le formulaire
checked : cet attribut permet de cocher la case à cocher lors du chargement de la
page. Il permet aussi au script traitant le formulaire de savoir si cette case est cochée
ou non.
Les boutons radio (<input type = "radio">) : les boutons radio permettent de choisir un
seul choix parmi un groupe d’options. Par exemple, si vous voulez savoir si le visiteur de
43
Web Dynamique A. Zinedine
votre page est un homme ou bien une femme, un groupe de boutons radio (homme/femme)
convient. Voilà les attributs les plus intéressants :
name : C’est le nom du groupe. Les boutons de chaque groupe ont tous le même
nom.
value : cette valeur est utilisée par le script recevant le formulaire.
checked : cet attribut permet de cocher une option lors du chargement de la page ou
de lire cette valeur par les scripts traitant le formulaire.
Le bouton d’envoi (<input type = "submit">) : C’est un bouton cliquable. Le clic sur ce
bouton cause l’envoie du formulaire vers le script désigné dans l’attribut action de la balise
<form>.
Le bouton d’initialisation (<input type = "reset">) : c’est un bouton cliquable. Le clic sur
ce bouton cause l’initialisation du formulaire. Tous les champs du formulaire prennent leurs
valeurs par défaut. Comme pour le bouton submit, ce bouton accepte les attributs suivants
Les boutons image (<input type = "image">) : On peut créer un bouton d’envoi
personnalisé sous forme d’une image cliquable. Pour cela on utilise la balise <input type =
"image">. Voilà quelques attributs :
2) Les zones de texte multi lignes (<textarea>…</textarea>) : cette balise est utilisée
pour créer une zone de texte capable de recevoir un texte assez long (plusieurs lignes). Elle
est utile lorsque vous souhaitez permettre à vos visiteurs d’envoyer par exemple des
messages ou des commentaires sur votre site. Voilà les attributs les plus importants de cette
balise :
La balise <select> est utilisée pour créer des listes de sélection. La liste commence par la
balise <select> et se termine par la balise </select>. Chaque élément de la liste est introduit
entre les balises <option> et </option>
44
Web Dynamique A. Zinedine
<select>
<option> élément 1 </option>
<option> élément 2 </option>
<option> élément 3 </option>
<option> élément 4 </option>
</select>
Attribut de la balise <select> : Cette balise admet plusieurs attributs. Les plus utilisés
sont :
Attributs de la balise </option> : Cette balise qui permet de créer un élément de la liste
accepte quelques attributs. Voilà les plus utilisés :
45
Web Dynamique A. Zinedine
46
Web Dynamique A. Zinedine
0) Introduction
En entend par style tout ce qui est en relation avec la définition de l’apparence de la page
HTML (l’arrière-plan, la couleur du texte, le style du texte (gras, italique, souligné), nom de
la police, taille de la police, marges, interlignes, retraits des paragraphes, couleurs des liens,
…)
Bien qu’il est possible de définir quelques aspects du style de vos pages (par exemple :
gras :<b>, italique :<i>, <u> : souligné, la police (nom, couleur, taille) avec la balise
<font>,…) il est fortement recommandé de définir le style en utilisant les feuilles de style qui
sont largement adoptées et utilisées sur le Web.
Supposons que vous gérez un grand site web qui compte 1000 pages différentes. Chacune de
ces pages contient 10 titres de taille <H1>. Dans un premier temps, vous avez décidé
d’afficher tous les titres <H1> en rouge. Vous pouvez faire ça en HTML en utilisant des
balises de type : <font color = "red"><h1>Ici le titre </h1></font> (N.B. : cette balise est
obsolète et n’est pas pris en considération dans HTML5).
Supposons maintenant qu’après un certain temps, la couleur rouge des titres ne vous plait
pas et vous décidez de la changer en vert. Croyez-moi, ça va être vraiment dégouttant de
parcourir les 1000 pages pour chercher 10000 balises pour modifier <font color = "red"> en
<font color = "green">. La difficulté majeure vient du fait que la définition du style (avec la
balise <font>) est mélangée avec le code HTML définissant la structure et le contenu de la
page HTML.
Les feuilles de style fournissent un moyen très élégant pour faire ce type de changement
très rapidement et très efficacement. Leur idée de base est de dissocier la définition du style
de la page HTML proprement dite. On peut ainsi définir le style une seule fois et on
l’applique par la suite à toutes les pages du site.
Voilà quelques avantages qui peuvent vous convaincre de préférer la définition du style en
utilisant les feuilles de style (CSS) plutôt qu’on utilisant des balises HTML.
En utilisant les feuilles de style, vous pouvez appliquer le même style sur toutes les
pages et assurer ainsi une cohérence visuelle entre toutes les pages.
La maintenance du site est énormément simplifiée. Dans l’exemple ci-dessus vous
pouvez modifier la couleur des 10000 titres en un seul changement dans la feuille de
style, tous les titres se trouvent ensuite modifiés.
Le code HTML se trouve allégé quand on se débarrasse de toutes les balises de style
inclues dans la page. Le transfert des pages dans le réseau devient plus rapide.
Ce n’est pas seulement tout ce que vous pouvez faire avec les feuilles de style, mais aussi,
elles étendent les possibilités de HTML. Voilà des exemples de ce que vous pouvez faire avec
les feuilles de style mais pas avec HTML :
47
Web Dynamique A. Zinedine
En conclusion, on peut dire que HTML seul n’offre pratiquement pas de contrôle sur le
style. Les feuille de style permettent d’accéder aux aspects élémentaires du style, tels que les
polices (avec les problèmes qu’elles posent : nom de police, taille, corps, style et espacement
des lignes). Mais une feuille de style concerne aussi les aspects plus élaborés tels que les
marges, les retraits, les couleurs et les graphiques. En principes, les feuilles de style
permettent de contrôler l’aspect de tout ce que le HTML permet d’afficher.
Pour créer une feuille de style incorporée, on utilise une balise <style>…</style> placée
avant la balise <body>. Toutes les définitions de style sont placées à l’intérieur de cette
balise. Dans ce cas, la portée de cette feuille de style se limite à cette seule page. Vous ne
pouvez pas référer à cette feuille de style à partir d’une autre page HTML.
Exemple
48
Web Dynamique A. Zinedine
<html>
<style>
body {background-image : url(image.gif); margin : 2cm ; }
h1 {font-size : 18pt ; font-style : italic ; font-color : red ;}
h2 {font-size : 14pt ; font-color : green;}
p {text-indent : 1.5cm ; line-height : 14pt ;}
a {text-decoration : none ;}
a: link {text-color : blue ;}
a: visited {text-color : white ;}
a: actived {text-color : yellow ;}
</style>
<body>
Ici le corps de la page
</body>
</html>
Dans cet exemple, à l’intérieur de la balise <style>…</style> nous avons défini le style qui
sera appliqué à plusieurs éléments de la page HTML :
* tous les liens (<a >) sont non soulignés (text-decoration : none ;)
Les feuilles de style externes sont plus appropriées si on veut appliquer le même style à
plusieurs pages HTML. On crée alors un fichier séparé qui porte l’extension « .CSS ». Dans
ce fichier, on insère toutes les définitions de style ; on fait ensuite le lien entre la page
HTML et la feuille de style en insérant une balise <link> dans la page HTML.
49
Web Dynamique A. Zinedine
Exemple
MonStyle.CSS
MaPage.html
<html>
<head>
<link rel = "stylesheet" type = "text/CSS" href = "MonStyle.CSS" />
</head>
<body>
Ici le corps de la page
</body>
</html>
Dans cet exemple, quand l’utilisateur ouvre la page MaPage.html, le navigateur interprète
la balise <link />. Cette balise indique qu’il existe une relation entre cette page et une feuille
de style (rel = "stylesheet"). Cette feuille de style est de type (text/CSS) (il existe d’autres
types : par exemple les feuilles de style à base de JavaScript). L’adresse de la feuille de style
est fournie par l’attribut href.
Ainsi, le navigateur télécharge le fichier MonStyle.CSS et applique le style qui est défini
dans ce fichier à la page HTML.
La seule différence entre les feuilles de style incorporées et celles externes est que ces
dernières sont réutilisables dans plusieurs pages : il suffit d’ajouter une balise <link /> pour
lier la feuille de style à toute page concernée par ce style. Comme ça on peut créer une
certaine homogénéité entre les pages d’un même site.
50
Web Dynamique A. Zinedine
Exemple
<html>
<body>
<h1 style = "{font-size : 24pt ; color : yellow}"> Ce titre a son propre style </h1>
</body>
</html>
Remarques
1) Vous pouvez appliquer plusieurs types de feuilles de style dans une même page
HTML. Dans le cas d’une contradiction entre ces styles, les styles en ligne ont la
priorité maximale, puis viennent les feuilles de style incorporées ensuite les feuilles
de style externes sont appliquées. Pour les éléments dont aucun style n’est défini, le
style par défaut de HTML est appliqué.
2) La nomenclature « feuilles de style en cascade » vient du fait que les styles sont
appliqués aux éléments en progression : Si un style est défini en ligne pour un
élément, on l’applique tout de suite puis on regarde dans la feuille de style
incorporée ; si d’autres styles de plus (autres que ceux en ligne) sont définis pour cet
élément dans cette feuille alors ils sont appliqués ; puis on regarde dans la feuille de
style externe : si d’autres définitions de style (autres que ceux en ligne et incorporés)
elles sont alors appliqués. Pour les autres attributs de style de cet éléments qui ne
sont définis ni en ligne, ni dans les feuilles de style (incorporées ou externes), alors
les définitions de style par défaut de HTML sont appliquées.
Comme vous avez certainement remarqué, la définition d’un style respecte généralement la
syntaxe suivante :
Le Selecteur est généralement le nom d’une balise. Les attributs de style sont définis à
l’intérieur des accolades ({…}) en séparant l’attribut de sa valeur par ( : ) ; après la définition
de chaque attribut en met un point-virgule ( ; ).
Remarques
51
Web Dynamique A. Zinedine
1) Parfois, une même balise peut supporter plusieurs cas différents. Prenons par exemple le
cas de la balise <a>. Cette balise crée des liens hypertextes. On peut distinguer les cas
suivants
Tous les liens hypertextes (déjà visités ou pas encore…). On les désigne par a.
Seulement les liens non encore visités. On les désigne par le sélecteur a:link.
Seulement les liens visités. On les désigne par le sélecteur a:visisted.
Seulement les liens activés. On les désigne par le sélecteur a:actived.
<style>
a {text-decortion : none ; font-size : 14pt ; font-weight : bold}
a:link {color : red}
a:visited {color : green}
a:actived {color : black ;}
</style>
Dans cet exemple, le style de l’élément a sera appliqué à tous les liens (ils seront non
soulignés, de taille 14pt et en gras). Le style de l’élément a:link ne sera appliqué que pour
les liens non encore visités (la couleur de ces liens est rouge). Après la première visite de la
destination d’un lien, le style a:visited est alors appliqué (la couleur du lien devient verte).
Quand on active un lien (après un click et avant le chargement de la page pointée par ce
lien), c’est le style a:actived qui est appliqué, la couleur du lien devient alors noire.
2) Dans le cas où vous voulez appliquer un style à une petite portion de votre texte (par
exemple un seul mot) utilisez la balise <span>…</span>. Cette balise a le même rôle que la
balise <div> : elle sert seulement à délimiter une partie de la page. La seule différence est
que la balise <div> effectue des retours à la ligne (avant et après la balise) tandis que
<span> ne fait pas de retours à la ligne ce qui fait de cette balise un bon moyen pour définir
des styles pour une petite partie de la page ne dépassant pas une seule ligne.
Voilà les principaux attributs que vous pouvez définir pour une page web
Les attributs suivants définissent le style du texte et peuvent être insérés dans n’importe
quelle balise entourant du texte (par exemple : <body>, <p>, <div>, <span>, <a>, <h1>,…)
52
Web Dynamique A. Zinedine
h1 {font-weight : extra-bold}
h2 {font-weight : 700}
• color : définie la couleur du texte. La valeur d’une couleur peut être donnée en
hexadécimal (par exemple {color : #FF0000}, qui signifie le rouge), ou encore en
spécifiant un nom de couleur : {color : red} ou en utilisant une nouvelle notation
propre aux feuilles de style sous la forme rgb(n1,n2,n3) où n1, n2 et n3 sont 3
nombres entre 0 et 255 et qui donnent respectivement le pourcentage du rouge,
du vert et du bleu dans la couleur à définir. Par exemple, {color : rgb(255,0,0)}
définit le rouge comme couleur pour le texte.
• text-decoration : cet attribut vous permet, par exemple, de souligner le
texte…Les valeurs possibles sont : underline (pour souligner le texte), overline
(pour surligner le texte), line-through (pour barrer le texte) et none (pour
supprimer toute décoration et obtenir du texte normal. Cette valeur est utilisée,
par exemple, si vous voulez supprimer le soulignement des liens hypertextes.).
• text-indent : cet attribut spécifie le retrait de la première ligne (d’un document,
d’un paragraphe, d’une division,…) par rapport au reste du texte. Vous pouvez
utiliser toutes les unités de mesure citées plus haut. Internet Explorer accepte
des valeurs négatives pour le retrait.
• text-align : spécifie l’alignement du texte. Les valeurs possibles sont left,
center, right et justify (pour aligner le texte à droite et à gauche).
• ligne-height : cet attribut définit l’espacement entre les lignes du texte. Vous
pouvez utiliser les différentes unités de mesure vues plus haut. (Par exemple : p
{line-height : 14pt}).
Exemple
53
Web Dynamique A. Zinedine
1 <html>
2 <head> <title> Attributs de style concernant le texte </title> </head>
3
4 <style>
5 h1 {font-family : verdana, helvetica, arial, sans-serif ; font-size : 18pt ; font-style :
6 normal ; color : red ; text-align : left}
7 h2 {font-family : verdana, helvetica, arial, sans-serif ; font-size : 14pt ; font-style :
8 normal ; text-align : right}
9 p {font-family : garamond, goudy, times, serif ; font-size : 12pt ; font-style : normal ;
10 line-height : 14pt}
11 a {text-decoration : none; font-weight : bold}
12 </style>
13
14 <body>
15 <h1> Un titre de type H1 </h1>
16 <p style = "text-align : left ; text-indent : 2cm "> Ici commence le premier paragraphe.
17 Cliquez <a href ="page2.html"> ici </a> pour aller dans une autre page. Remarquez
18 que le lien n’est pas souligné et qu’il est en gras.
19 </p>
20 <h2> Un titre de type H2 </h2>
21
22 <p style = "text-align : right"> Voici un autre paragraphe. Cliquez <a href =
23 "page3.html"> ici </a> pour aller à la page 3. Remarquez que le style défini dans la
24 balise style est appliqué.
25 </p>
26
27 </body>
28 </html>
Dans cet exemple, la feuille de style est insérée entre les balises <style> et </style>. A la
ligne 5, le style des titres <h1> est défini. Plusieurs noms de police sont fournis pour
l’attribut font-family (remarquez la virgule qui sépare les différents noms). Si le navigateur
trouve la police verdana, il l’utilise, sinon il cherche la police helvetica, s’il ne la trouve
pas, il passe à arial et ainsi de suite. Pour la taille des caractères, la taille 18pt est utilisée, le
style est normal (pas d’italique), la couleur de tous les titres <h1> est le rouge (color : red)
et ils sont tous alignés à gauche (text-align : left). De même, les lignes 7 et 8 définissent le
style des titres <h2>. La taille cette fois-ci est 14pt et l’alignement est à droite.
Les lignes 9 et 10 définissent le style des paragraphes. D’autres noms de police sont utilisés
ici. La taille des caractères est 12pt et le style est normal. L’espacement entre les lignes d’un
paragraphe est fixé à 14pt (line-height : 14pt). Aucune information sur l’alignement du
texte dans les paragraphes n’est donnée dans cette feuille de style. Ceci est fait dans les
balises <p> (en ligne).
La ligne 11 ordonne que les liens hypertextes soient non soulignés (text-decoration : none)
et qu’ils soient en gras (font-weight : bold).
Remarquez que nous avons défini des styles en ligne. Par exemple, à la ligne 16 nous avons
ajouté l’attribut style dans la balise <p>. Cet attribut reçoit la valeur "text-align : left ; text-
54
Web Dynamique A. Zinedine
indent : 2cm ". Ceci a pour effet d’aligner le premier paragraphe à gauche (text-align :
left) et de marquer un retrait de la première ligne de ce paragraphe de 2cm (text-indent :
2cm). Pour le deuxième paragraphe, on a demandé (avec un style en ligne) de l’aligner à
droite (text-align : right) (voir ligne 22).
Marges
Les feuilles de style vous offrent un contrôle total sur les marges de vos pages. Ceci était
impossible avec HTML. Vous pouvez définir non seulement les marges de toute la page,
mais aussi les marges de tout élément dans la page (par exemple, les paragraphes, les
divisions,…). Voilà les principaux attributs définissant les marges :
• margin-left : cet attribut spécifie une valeur pour la marge gauche de la page
(ou d’un autre élément, par exemple un paragraphe, une division,…).
• margin-right : cet attribut spécifie la marge droite.
• margin-top : pour spécifier la marge haute.
<style>
body {margin-top : 3cm ; margin-left : 2cm ; margin-right : 1.5cm ;}
</style>
Remarque : Vous pouvez regrouper tous ces attributs en un seul attribut margin et vous
fournissez 3 valeurs qui seront attribuées respectivement aux marges supérieure, droite et
gauche. L’exemple précédent peut être réécrit comme suit :
55
Web Dynamique A. Zinedine
<style>
body {margin : 3cm 2cm 1.5cm ;}
<style>
Remarquez que les 3 valeurs sont séparées par un espacement, mais pas de virgules.
Bordures
Les attributs suivants vous permettent de personnaliser les bordures des éléments de vos
pages HTML :
Remplissage
Vous pouvez spécifier la distance entre les bordures d’une boîte et l’élément au sein de cette
boîte :
Exemple
Reprenons l’exemple donné plus haut en y ajoutant la définition des marges ainsi qu’une
bordure dans l’élément body (comparez le avec le résultat obtenu dans la page 55) :
56
Web Dynamique A. Zinedine
1 <html>
2 <head> <title> Attributs de style concernant le texte </title> </head>
3
4 <style>
5 body {margin-top : 3cm ; margin-left : 2cm ; margin-right : 1.5cm ; border-width :
6 4pt; border-color : red; border-style : outset; }
7 h1 {font-family : verdana, helvetica, arial, sans-serif ; font-size : 18pt ; font-style :
8 normal ; color : red ; text-align : left}
9 h2 {font-family : verdana, helvetica, arial, sans-serif ; font-size : 14pt ; font-style :
10 normal ; text-align : right}
11 p {font-family : garamond, goudy, times, serif ; font-size : 12pt ; font-style : normal ;
12 line-height : 14pt}
13 a {text-decoration : none; font-weight : bold}
14 </style>
15
16 <body>
17 <h1> Un titre de type H1 </h1>
18 <p style = "text-align : left ; text-indent : 2cm "> Ici commence le premier paragraphe.
19 Cliquez <a href ="page2.html"> ici </a> pour aller dans une autre page. Remarquez
20 que le lien n’est pas souligné et qu’il est en gras.
21 </p>
22 <h2> Un titre de type H2 </h2>
23
24 <p style = "text-align : right"> Voici un autre paragraphe. Cliquez <a href =
25 "page3.html"> ici </a> pour aller à la page 3. Remarquez que le style défini dans la
26 balise style est appliqué.
27 </p>
28
29 </body>
30 </html>
A la ligne 5 dans cet exemple, nous avons ajouté à la feuille de style les définitions des
marges qui seront appliqués à toute la page (car ils sont faites dans body). Une bordure
rouge de largeur 4pt avec le style 3D outset va entourer la page entière.
Remarque : vous pouvez aussi définir des marges pour les paragraphes (ou autres
éléments) mais dans ce cas leurs valeurs doivent être supérieures à ceux données pour les
marges de la page, sinon elles seront ignorées. Voilà le résultat de cet exemple dans le
navigateur :
57
Web Dynamique A. Zinedine
Vous pouvez définir une couleur ou une image d’arrière-plan pour tout élément de votre
page :
e) Le positionnement et la visibilité
Les feuilles de style offrent un nouveau moyen pour positionner un élément d’une page
HTML à l’emplacement exact où l’on veut. Ceci était impossible avec le langage HTML.
Voilà les principaux attributs concernant le positionnement :
58
Web Dynamique A. Zinedine
Les valeurs de ces quatre derniers attributs peuvent être données avec les différentes unités
de mesure supportées par le langage CSS.
Avec le positionnement absolu, vous pouvez placer plusieurs éléments dans le même
emplacement en créant ainsi plusieurs couches. Il serait alors important d’utiliser les
attributs suivants :
• z-index : cet attribut correspond à l’emplacement d’un élément sur l’axe Z (la
profondeur d’écran). Ainsi, si deux éléments sont placés à un même
emplacement sur l’écran, alors celui dont la valeur de z-index est plus grande
apparaît situé sur l’autre.
• visibility : cet attribut vous permet de rendre un élément invisible sur la
page. Les valeurs possibles sont visible et hidden. La valeur hidden cache
l’élément et la valeur visible le rend visible. Par exemple, vous pouvez créer
une animation en situant plusieurs images à un même emplacement et
alterner leur affichage avec javascipt.
<style>
</style>
Dans cet exemple, on a défini le style des titres de type h1, de type h2 et de type h3 dans 3
lignes différentes. On peut regrouper toutes ces lignes dans une seule :
59
Web Dynamique A. Zinedine
<style>
h1, h2, h3 {font-family: verdana, helvetica, arial, sans-serif; font-style: normal; color: red}
</style>
Jusqu’à maintenant nous avons vu comment appliquer un style à toutes les balises d’un
même type. Considérons par exemple le code suivant :
<style>
h1 {color : red ;}
</style>
Dans cet exemple, on a ordonné de mettre tous les titres de type h1 en rouge. Mais,
comment faire si, dans notre page HTML, nous voulons certains titres h1 en rouge et
d’autres titres h1 en vert ? Autrement dit, comment faire si nous avons plusieurs classes de
titre h1 ?
La norme CSS permet de créer plusieurs classes pour un même élément. Reprenons
l’exemple de la page 53. Dans cet exemple, l’alignement du texte des paragraphes est définit
avec un style « en ligne ». Dans l’exemple suivant, nous allons créer des classes pour définir
le style des paragraphes :
60
Web Dynamique A. Zinedine
1 <html>
2 <head> <title> Attributs de style concernant le texte </title> </head>
3
4 <style>
5 h1 {font-family : verdana, helvetica, arial, sans-serif ; font-size : 18pt ; font-style :
6 normal ; color : red ; text-align : left}
7 h2 {font-family : verdana, helvetica, arial, sans-serif ; font-size : 14pt ; font-style :
8 normal ; text-align : right}
9 p {font-family : garamond, goudy, times, serif ; font-size : 12pt ; font-style : normal ;
10 line- height : 14pt}
11 p.droite {text-align : right}
12 p.gauche {text-align : left ; text-indent : 2cm }
13 a {text-decoration : none; font-weight : bold}
14 </style>
15
16 <body>
17 <h1> Un titre de type H1 </h1>
18 <p class = "gauche"> Ici commence le premier paragraphe. Cliquez <a href
19 ="page2.html"> ici </a> pour aller dans une autre page. Remarquez que le lien n’est
20 pas souligné et qu’il est en gras.
21 </p>
22 <h2> Un titre de type H2 </h2>
23
24 <p class = "droite"> Voici un autre paragraphe. Cliquez <a href = "page3.html"> ici
25 </a> pour aller à la page 3. Remarquez que le style défini dans la balise style est
26 appliqué.
27 </p>
28
29 </body>
30 </html>
Voilà ce que nous intéresse dans cet exemple (comparez le avec l’exemple de la page 53) :
Dans les lignes 9 et 10, nous avons introduit une définition de style qui sera
appliquée à tous les paragraphes (<p>) sans exception.
Dans la ligne 11, nous avons défini le style qui sera appliqué à tous les paragraphes
d’une classe nommée « droite ». Dans la page HTML, les paragraphes de ce type
commencent par <p class = "droite">.
Dans la ligne 12, nous avons défini le style qui sera appliqué à tous les paragraphes
d’une classe nommée « gauche ». Dans la page HTML, les paragraphes de ce type
commencent par <p class = "gauche">.
61
Web Dynamique A. Zinedine
Balise: un nom de balise HTML concernée par le style à définir (par exemple : p, a, h1, …).
Dans l’exemple précédent, nous avons utilisé le nom de balise P pour appliquer le style aux
paragraphes (<p>).
NomClasse : C’est un nom que vous choisissez vous-même pour votre classe. Dans
l’exemple précédent, nous avons utilisé deux classes nommées « droite » et « gauche ».
Pour appliquer un style d’une classe à un élément d’une page HTML, il suffit d’ajouter dans
la balise de cet élément l’attribut class
62
Web Dynamique A. Zinedine
Partie 2
Scripts côté client
63
Web Dynamique A. Zinedine
64
Web Dynamique A. Zinedine
0) Introduction
Le HTML à lui seul, n’offre pas de grandes possibilités. Tout ce que vous pouvez faire avec
c’est de créer des pages web figées (statiques). C’est dans le but de lui ajouter des capacités
de programmation que le langage Javascript a été créé.
Javascript est un langage de script côté client. Il permet d’étendre les capacités du langage
HTML : En écrivant vos pages HTML, vous pouvez leur ajouter du code javascript qui fait
certains traitements dans ces pages.
Le code javascript est donc inclus dans le code HTML et il est interprété lui aussi par le
navigateur. De ce fait, il est complètement lié au navigateur. Il ne peut pas tourner
indépendamment. De plus cette interprétation peut être différente d’un navigateur à l’autre
et d’une version à l’autre.
Remarques :
2) Le terme côté client signifie que les traitements et les calculs se passent sur
l’ordinateur du client. Autrement dit, quand un utilisateur demande une page auprès
d’un serveur, alors le serveur envoie la page demandée avec le code javascript inclus.
Une fois le client reçoit la page, il l’affiche et interprète les programmes javascript de
la page et il les exécute.
3) D’autres langages de scripts côté client existaient autrefois. Mais, de nos jours,
javascript domine le marché.
4) Il existe des langages de scripts côté serveur (Par exemple, PHP, ASP,…). Ces scripts
s’exécutent sur le serveur et génèrent dynamiquement les pages à envoyer aux
clients.
65
Web Dynamique A. Zinedine
Dans cet exemple, nous avons inséré une balise <script> qui nécessite un attribut
language (qui spécifie que le langage utilisé est javascript). A la deuxième ligne nous
avons déclaré une variable nommée Nom et nous lui avons affecté la valeur
« Omar ». La deuxième ligne demande l’affichage du message « Bonjour »
concaténé avec le contenu de la variable Nom (le résultat affiché sera donc
« Bonjour Omar »).
<a href = "javascript:alert(‘tu as cliqué sur le lien !’)"> Cliquez ici </a>
Dans cet exemple, un clic sur le lien « Cliquez ici » provoque l’exécution de la
fonction « alert ». Cette fonction prédéfinie de javascript affiche dans une boite de
dialogue le message « tu as cliqué sur le lien ! »
Supposons par exemple que nous voulons exécuter une fonction javascript à chaque
fois que l’utilisateur passe le curseur de la souris sur une image donnée. Il suffit pour
cela d’ajouter dans la balise <img /> de cette image l’attribut onMouseOver comme
suit :
66
Web Dynamique A. Zinedine
Exemple :
1 <html>
2
3 <head>
4 <title>
5 Exemple de code javascript
6 </title>
7
8 <script language = "javascript">
9
10 function maFonction( ) {
11 document.write("Ce texte s’affiche à l’écran lors de l’appel de cette fonction") ;
12 }
13
14 </script>
15
16 </head>
17
18
19 <body>
20 Ce ci est du texte normal de la page HTML.
21
22 <script language = "javascript">
23 document.write ("Ce texte s’affiche à l’écran lors du chargement de la page <br>") ;
24 </script>
25
26
27 <a href = "javascript:maFonction( );">Cliquez ici pour exécuter la fonction
28 maFonction.</a>
29
30 <div onClick = "maFonction( ) ;"> Cliquez ici pour obtenir le même résultat </div>
31
32 </body>
33 </html>
67
Web Dynamique A. Zinedine
a) Les commentaires
Pour commenter votre code javascript, vous pouvez utiliser deux façons. Utilisez « // » si
vous voulez faire un commentaire qui tient sur une seule ligne. Tout ce qui vient après sur
la même ligne est ignoré par le navigateur. La deuxième méthode est utile si le commentaire
est étalé sur plusieurs lignes. Dans ce cas on le délimite par /* et */.
Pour déclarer une variable en javascript, on utilise le mot clé var. Pour le type de ces
variables, javascript reconnaît les types de base utilisés par tous les langages de
programmation (entier, réel, boolien, chaîne de caractères,…). Javascript utilise aussi des
notions de la programmation orientée objet (comme dans Java par exemple).
Commençons par la déclaration des variables de types simples. Dans ce cas, la déclaration
du type de la variable n’est pas nécessaire. Voilà un exemple :
Dans cet exemple nous avons déclaré quatre variables. Nous n’avons pas déclaré les types
de ces variables, mais le navigateur va reconnaître leurs types dès la première affectation de
chaque variable. L’interpréteur javascript va considérer la variable Nom comme une chaîne
de caractères, la variable Age comme entier, la variable Taille comme réel et la variable
Admis comme variable booléenne.
Remarques
1) Une chaîne en javascript est délimitée par les doubles quottes (") ou par des simple
quottes (' ). Les caractères utilisés en C (par exemple, ‘\n’, ‘\t’…) sont acceptés.
2) En javascript, la casse est importante. Javascipt fait la différence entre majuscules et
minuscules. Par exemple, Nom, nom et NOM sont trois variables différentes.
3) Javascript est très souple en ce qui concerne les types. Par exemple, bien que la
variable Nom est considérée en un premier temps comme une chaîne de caractères,
on peut lui affecté dans un deuxième temps un entier ou un réel et effectuer des
opérations. Voyons cet exemple :
68
Web Dynamique A. Zinedine
c) Les fonctions
Pour déclarer une fonction en javascript, utilisez le mot clé function suivi du nom de la
fonction. Le corps de la fonction est délimité par des accolades (exactement comme dans le
langage C) :
function MaFonction ( ) {
Comme en C, une fonction peut recevoir des paramètres et retourner une valeur. L’appel de
la fonction se passe en utilisant son nom :
// Appel de la function
var resultat = somme(3,5) ; //appelle la fonction somme( ) pour calculer la somme 3+5
document.write("La somme de 3 et 5 est " + resultat) ;
</script>
d) Structures de contrôle
Tout ce qui concerne cette partie est le même que dans le langage C. Nous donnons un
rappel rapide sous forme d’exemples.
La boucle for
L’exemple suivant utilise la fonction prédéfinie « prompt) pour inviter l’utilisateur à entrer
un entier. Une boucle for calcule ensuite la somme des N premiers entiers ; puis on affiche
le résultat à l’aide de document.write() :
69
Web Dynamique A. Zinedine
La boucle while
La boucle do…while
70
Web Dynamique A. Zinedine
</script>
Bref, tous ce que vous connaissez à ce propos en langage C est valable en javascript (par
exemple, les instructions switch, break, continue,…)
Un objet est une structure complexe. Dans cette structure, le programmeur définit des
variables qui s’appellent propriétés de l’objet. Il définit aussi les actions (qui s’appellent
méthodes) qu’on peut appliquer sur cet objet.
Javascript possède des objets prédéfinis qui sont prêts à utiliser par le programmeur. Celui-
ci peut aussi créer des nouveaux objets qui répondent à son propre besoin.
Vous pouvez créer vos propres objets aux seins de vos scripts en leur attribuant des
propriétés et des méthodes. Vous pouvez les exploiter ensuite.
Nous allons dans ce paragraphe vous montrer comment créer un objet nommé Personne qui
possède les propriétés nom, prenom, et age et une seule méthode nommée sePresenter ( )
qui a pour rôle d’afficher un message de présentation de l’objet. Voilà comment on procède :
1) Première étape
71
Web Dynamique A. Zinedine
Dans cette étape, on crée les méthodes qui seront associés à l’objet plus tard (dans la
deuxième étape). Une méthode est tout simplement une fonction. Créons donc la
fonction Presentation( ) :
function Presentation( ){
alert("Bonjour. Je suis " + this.nom + " " + this.prenom + " Agé de " + this.age);
}
Remarquez l’utilisation du mot clé this qui réfère à l’objet appelant (this sera reconnu après
association de cette fonction à l’objet dans l’étape suivante).
2) Deuxième étape
Une fois les méthodes créées, il nous reste de créer l’objet. Ce n’est qu’une autre
fonction dans laquelle on déclare des variables qui constituent les propriétés de
l’objet :
function Personne( ) {
this.nom ;
this.prenom ;
this.age ;
this.sePresenter = Presentation ;
}
Nous avons ainsi créer un objet nommé Personne avec 3 propriétés (nom, prenom,
et age). Remarquez aussi l’utilisation du mot clé this qui réfère à l’objet. Signalons
que ces propriétés sont, tout simplement, des variables déclarées de cette façon
particulière. On peut les initialiser lors de la création de l’objet comme on peut les
modifier plus tard (voir l’étape suivante). On a associé à l’objet Personne une
méthode nommée sePresenter à laquelle on a affecté le nom de la fonction créée
précédemment.
Utilisation de l’objet :
Maintenant on dispose d’un objet nommé Personne( ). On peut alors déclarer des variables
objets de ce type :
Les variables personne1, personne2 et personne3 sont désormais des objets qui possèdent
des noms, prénoms et âges et qui peuvent « se présenter ». Voyons par exemple comment
on peut personnaliser l’objet personne1 :
72
Web Dynamique A. Zinedine
Pour pouvoir voir ce résultat, regroupez ces portions de codes dans un seul fichier. Faites
attention au majuscules et minuscules. Le listing suivant donne l’ensemble des étapes
précédentes:
73
Web Dynamique A. Zinedine
<html>
<body>
function Personne( ) {
this.nom ;
this.prenom ;
this.age ;
this.sePresenter = Presentation ;
}
personne1.nom = "Omari";
personne1.prenom = "Omar";
personne1.age = 22;
personne2.nom = "Kaddouri";
personne2.prenom = "Kaddour";
personne2.age = 23;
personne3.nom = "Jallouli";
personne3.prenom = "Jalloul";
personne3.age = 24;
</script>
< !-- On ajoute des liens pour appeler les méthodes. -->
<a href = "javascript: personne1.sePresenter( )" >La première personne </a> <br />
<a href = "javascript: personne2.sePresenter( )" >La deuxième personne </a> <br />
<a href = "javascript: personne3.sePresenter( )" >La troisième personne </a>
</body>
</html>
74
Web Dynamique A. Zinedine
<html>
<body>
function Presentation( ){
alert("Bonjour. Je suis " + this.nom + " " + this.prenom + " Agé de " + this.age);
}
//création d’un objet nommé Personne (avec passage des valeurs des propriétés):
function Personne(n, p, a) {
this.nom = n ;
this.prenom = p;
this.age = a;
this.sePresenter = Presentation ;
}
</script>
< !-- On ajoute des liens pour appeler les méthodes. -->
<a href = "javascript: personne1.sePresenter( )" >La première personne </a> <br />
<a href = "javascript: personne2.sePresenter( )" >La deuxième personne </a> <br />
<a href = "javascript: personne3.sePresenter( )" >La troisième personne </a>
</body>
</html>
Nous donnons ici une liste des objets prédéfinis les plus utilisés de javascipt :
1. L’Objet Date( )
75
Web Dynamique A. Zinedine
Cet objet est très important. Il vous permet d’accéder à la date système de
l’utilisateur final.
Déclaration
On utilise ici les mots clés var et new. Nous avons donc déclaré d comme variable de
type Date( ). Il convient de rappeler ici que la casse est importante en javascript
Méthodes
L’exemple suivant montre comment on peut utiliser l’objet Date( ) et ses méthodes :
<html>
<body>
</script>
</body>
</html>
Dans cette exemple, nous avons déclaré une variable de type Date ( ) avec l’instruction var
maDate = new Date ( ). Cette instruction stocke aussi la date système dans la variable
maDate. On peut par la suite afficher le contenu de cette variable. Les méthodes offertes
permettent de manipuler ce contenu. On appelle une méthode en utilisant la notation
76
Web Dynamique A. Zinedine
Les méthodes de l’objet Date( ) citées plus haut et qui commencent avec « get » sont
utilisées pour lire à partir d’une date donnée. Pour « écrire » dans cette date (par exemple,
pour modifier l’année, le mois, les heures…) on utilise d’autres méthodes qui commencent
cette fois-ci par «set» : setDay( ), setDate( ), setMonth( ), setYear( ), setHours( ),
setMinutes( ), setSecondes( )...On peut aussi, lors de la déclaration d’une variable de type
Date, passer une date autre que la date système (par défaut, la date système est passée en
paramètre) :
1 <html>
2 <body>
3 <script language = "javascript">
4 var maDate = new Date (2001,8,11) ;
5 document.write("bonjour");
6
7 document.write ("La date passée en paramètre est " + maDate) ;
8 document.write("<br>Le numéro du mois est: " + maDate.getMonth( ) ) ;
9 document.write("<br>L’année est : " + maDate.getYear( ) ) ;
10
11 maDate.setMonth(9) ;
12 maDate.setYear (2004) ;
13
14 document.write ("La date passée en paramètre est " + maDate) ;
15 document.write("<br>Le numéro du mois est: " + maDate.getMonth( ) ) ;
16 document.write("<br>L’année est : " + maDate.getYear( ) ) ;
17
18 </script>
19 </body>
20 </html>
A la ligne 4 de cet exemple, nous avons passé en paramètre de Date( ) une date sous forme
de tableau (année, mois, jour, heures, minutes, secondes). Donc la variable maDate contient
77
Web Dynamique A. Zinedine
maintenant la date 11/9/2001. Ce qui est nouveau dans cet exemple sont les lignes 11 et 12
dans lesquelles nous avons utilisé les méthodes setMonth( ) et setYear( ) de l’objet maDate.
A la ligne 11 nous avons modifié le numéro du mois stocké dans l’objet maDate, la nouvelle
valeur est 9 (c’est octobre), la ligne 12 change l’année en 2004. La nouvelle date qui est alors
stockée dans maDate est 11/10/2004.
2. L’objet Array ( )
Déclaration
Pour déclarer une variable objet de type tableau (Array) on peut choisir entre ces trois
méthodes :
La première méthode est utilisée pour déclarer le tableau monTableau. C’est un tableau à 7
éléments (la taille est fixée dès le début).
La troisième méthode permet d’initialiser le tableau dès sa création. Par exemple, le tableau
monTableau3 est un tableau à 5 éléments qui sont respectivement "A", "B", "C", "D" et"E".
Pour accéder aux éléments d’un tableau on utilise la même notation du langage C :
78
Web Dynamique A. Zinedine
<html>
<body>
<script language = "javascript">
var i = 0;
for (i=0 ; i< monTableau.length ; i++) {
document.write (monTableau[i]);
document.write("<br>") ;
}
</script>
</body>
</html>
Propriétés
• length : Cette propriété donne la taille du tableau. Nous l’avons utilisé dans la boucle
for de l’exemple précédent. Nous avons accédé à cette propriété par
monTableau.length (qui est dans ce cas égale à 5).
Méthodes
79
Web Dynamique A. Zinedine
<html>
<body>
document.write(Tab1 + "<br>");
document.write(Tab2 + "<br>");
document.write(Tab2.reverse()); //donne : Z Y X
document.write("<br>"); //le résultat est stocké dans Tab2
document.write(Tab1.slice(1,3)); //donne : A D
document.write("<br>");
</script>
</body>
</html>
3. L’objet String( )
Javascipt offre deux façons pour traiter les chaînes de caractères : la première en les
considérant comme un type simple (le type string). La deuxième utilise le modèle objet : on
80
Web Dynamique A. Zinedine
dispose pour cela d’un objet nommée String( ) offrant des méthodes et des propriétés assez
nombreuses. Rappelons qu’une chaîne constante est délimitée soit par des doubles quottes ("
et "), soit par simples quottes (' et ').
Déclaration
Propriétés
Méthodes
Voilà une liste de méthodes spécialisées dans la manipulation de ces chaînes de caractères :
81
Web Dynamique A. Zinedine
<html>
<body>
</script>
</body>
</html>
D'autres méthodes sont aussi utilisables sur les chaînes de caractères et permettent de
retourner du code HTML dans le but de modifier dynamiquement un document HTML :
82
Web Dynamique A. Zinedine
• link(url_string) : cette méthode, qui s'applique à une chaîne, rend le code HTML
définissant un lien hypertexte, dont le texte est la chaîne et l'URL la chaîne
url_string.
• anchor(name_string) : cette méthode, qui s'applique à une chaîne, rend le code
HTML définissant une étiquette, dont le nom (ou label) est contenu dans la chaîne de
caractères passée en paramètre.
• strike( ) : retourne le code HTML permettant de rayer la chaîne de caractères.
• sub( ) : renvoie le code HTML réalisant la mise en indice de la chaîne.
• sup( ) : de même, renvoie le code HTML réalisant la mise en exposant de la chaîne.
<html>
<body>
</script>
</body>
</html>
<html>
<body>
</body>
</html>
83
Web Dynamique A. Zinedine
4. L’objet Math( )
Vous disposez d’un seul objet nommé Math pour faire des opérations mathématiques. Voilà
quelques méthodes applicables à cet objet :
Méthodes
84
Web Dynamique A. Zinedine
<html>
<body>
</script>
</body>
</html>
5. L’objet Image( )
Cet objet permet une gestion dynamique simple des graphiques insérés dans une page
HTML. Il permet de charger des images à travers le réseau pour pouvoir les afficher plus
tard. Ceci vous permet de modifier dynamiquement la source d’une image sans recharger la
page HTML (par exemple pour créer une animation).
Déclaration
Propriétés
L’objet Image possède plusieurs propriétés qui sont sémantiquement équivalentes aux
attributs de la balise <img /> de HTML :
85
Web Dynamique A. Zinedine
<html>
<body>
maPhoto.Src = "image.jpg" ;
maPhoto.height = 60 ;
maPhoto.width = 60 ;
</script>
</body>
</html>
Dans cet exemple, l’image « image.gif » (qui est la source de l’objet Image nommé
maPhoto) est téléchargée, mais vous ne la verrez pas affichée à l’écran, car nous n’avons
pas demandé l’affichage. Complétons cet exemple pour pouvoir exploiter l’image
téléchargée.
<html>
<body>
<script language = "javascript">
//déclarer l’objet et définir ses propriétés:
var maPhoto = new Image( ) ;
maPhoto.Src = "image.jpg" ;
maPhoto.height = 60 ;
maPhoto.width = 60 ;
86
Web Dynamique A. Zinedine
Regardez maintenons l’exemple suivant qui vous permet de cliquer sur un bouton pour
parcourir un tableau de 10 images. A la suite de chaque clique vous affichez une image
différente :
<html>
<body>
<img name = "photo" src = "0.gif" width = 60 height = 60 align = "right" />
function changePhoto() {
m=(m+1)%10;
photo.src = Photos[m].Src;
}
</script>
<form>
<input type = "button" value = "Changer la Photo" onClick = "changePhoto( )" />
</form>
</body>
</html>
Pour essayer cet exemple, placez 10 images nommées respectivement « 0.gif », « 1.gif »,
« 2.gif »…et « 9.gif » dans le même répertoire de votre page d’essai. Comme vous pouvez
remarquer, nous avons déclaré un tableau nommé Photos. Chaque élément de ce tableau est
un objet de type Image( ). Nous avons aussi défini une image source pour chaque objet (en
utilisant une boucle for) (par exemple, pour l’élément Photos[3], la source est « 3.gif »).
Nous avons aussi créé une fonction changePhoto( ) qui a pour rôle le changement de la
source de la balise <img /> insérée au début de la page. En fin, un bouton est créé dans un
formulaire pour permettre d’appeler la fonction changePhoto( ) lors d’un clic.
Vous pouvez automatiser le changement des images sans avoir besoin de cliquer. Nous
verrons ceci avec les Timers plus tard dans ce chapitre.
87
Web Dynamique A. Zinedine
Plugins
elements
navigator
mimeType (==button)
(==text)
images
(==password
)
window document forms (==hidden)
(==checkbox
links
)
(==radio)
history (==textarea)
1. L’objet window
L’objet window est dans le niveau le plus haut dans cette hiérarchie. Il représente la fenêtre
du navigateur. Cet objet possède des propriétés de type simple (par exemple status qui est
de type string) et d’autres de type objet (par exemple document). Il possède aussi des
méthodes fort utiles.
Propriétés
Méthodes
88
Web Dynamique A. Zinedine
Valeurs
Caractéristiques Description
possibles
Menubar Yes/NO Existence de la barre de menu
Toolbar Yes/NO Existence de la barre d’outils
Status Yes/NO Existence de la barre d’état
Location Yes/NO Existence de la barre de localisation
Directories Yes/NO Existence de la barre des liens
scrollbars Yes/NO Existence des barres de défilement
Resizable Yes/NO Possibilité de redimensionner la fenêtre
Height Nombre en pixels Hauteur initiale de la page
Width Nombre en pixels Largeur initiale de la page
Distance entre l’écran et la bordure supérieure
Top Nombre en pixels
de la page
Distance entre l’écran et la bordure gauche de la
Left Nombre en pixels
page
/* l’instruction suivante crée une nouvelle variable de type fenêtre appelée maFenetre qui
affiche la page page2.html. La fenêtre est sans barre de menu et sans barre d’outils et à 200
pixels du haut de l’écran */
L’objet window possède des méthodes interactives qui permettent le dialogue avec
l’utilisateur :
• alert("message") : affiche une boite de dialogue avec un seul bouton (OK). Cette
boite contient le message passé en paramètre.
• confirm("message") : affiche une boite de dialogue avec deux boutons (OK et
Annuler). Cette boite contient le message passé en paramètre. La fonction confirm
retourne une valeur booléenne qui permet de capturer la réponse de l’utilisateur (par
exemple : « x = confirm ("Voulez-vous vraiment quitter ?") ; ». affiche une boîte
de dialogue avec deux boutons. Si l’utilisateur clique sur Ok alors la variable x reçoit
la valeur « true ». S’il clique sur « Annuler », x reçoit « false ». En testant la valeur
de x vous pouvez décider ce qui se passe par la suite.
• prompt( ) : cette méthode affiche une boîte de dialogue invitant l’utilisateur à entrer
du texte. Elle retourne une chaîne de caractères contenant la saisie de l’utilisateur.
89
Web Dynamique A. Zinedine
2. L’objet navigator
Cet objet représente le navigateur utilisé pour afficher la page. On l’utilise généralement
pour savoir quelques informations sur le navigateur de l’utilisateur. Voici quelques
propriétés utiles :
3. L’objet history
Cet objet représente l’historique des pages visitées par l’utilisateur. Il possède des méthodes
qui vous permettent de naviguer dans cet historique (simuler ce qu’on peut faire avec les
boutons Précédent et Suivant du navigateur) :
4. L’objet document
Cet objet représente le document de la page Web. A partir de cet objet on peut accéder aux
différents éléments de la page. Par exemple, à partir de l’objet document on peut accéder
aux objets images[], links[] et forms[] que nous étudierons dans la suite.
• open( ) : elle permet d’ouvrir le document pour pouvoir écrire dynamiquement. Par
exemple, après la création dynamique d’une nouvelle fenêtre, vous pouvez créer son
contenu dynamiquement aussi, mais avant, vous devez ouvrir le document par la
méthode document.open( )
• close( ) : permet de fermer le document après la fin de l’écriture.
90
Web Dynamique A. Zinedine
L’exemple suivant reprend l’exemple de l’ouverture d’une nouvelle fenêtre (voir l’objet
window) pour vous montrer comment créer une nouvelle fenêtre et créer son contenu
dynamiquement.
<html>
<body>
<a href = "javascript:Ouvrir( ) ;"> Cliquez ici pour ouvrir une nouvelle fenêtre </a>
function Ouvrir( ) {
maFenetre = window.open( ) ;
maFenetre.document.open( ) ;
maFenetre.document.write("Vous avez créer une fenêtre et son contenu");
maFenetre.document.close( ) ;
}
</script>
</body>
</html>
5. L’objet images[]
C’est un tableau qui contient toutes les images dans la page HTML. La première image dans
la page est représentée par document.images[0], la deuxième image est
document.images[1]. Par exemple, pour changer la source de la quatrième image dans la
page, vous pouvez faire : document.images[3].Src = "MonImage.gif". Tous les attributs de
la balise <img /> sont accessibles de cette manière.
6. L’objet links[]
C’est un tableau qui contient tous les liens hypertextes dans la page HTML. Le premier lien
est links[0], le deuxième est links[1] et ainsi de suite. On peut accéder à tous les attributs
d’un lien. Par exemple, la destination du premier lien peut être récupérée par l’instruction :
document.links[0].href
7. L’objet forms[]
C’est un tableau qui permet l’accès à tous les formulaires d’une page HTML. Le premier
formulaire est document.forms[0], le deuxième est document.forms[1] et ainsi de suite.
8. L’objet elements
Etant donné un formulaire dans un document, le tableau elements vous permet d’accéder à
tous les éléments de ce formulaire (boutons, zones de texte, zones cachées, zones de mots
de passe, checkbox , boutons radio, bouton submit, bouton reset,…). Ces éléments sont
classés dans ce tableau suivant l’ordre d’apparition dans le document.
91
Web Dynamique A. Zinedine
Dans la section suivante, vous apprendrez comment accéder aux différents éléments d’un
formulaire, et comment modifier ou récupérer des informations de ces éléments. Vous
verrez aussi comment programmer les principaux événements de chaque contrôle.
a) L’objet form
Il correspond à la balise <form> en HTML. Cet objet possède les propriétés et les méthodes
suivantes :
Propriétés
Méthodes
• submit : cette méthode déclenche l’envoi du formulaire (simule le clic sur le bouton
d’envoi).
• reset : cette méthode réinitialise le formulaire (simule le clic sur le bouton de
réinitialisation).
Evénements supportés
• onSubmit : cet événement survient lors de l’envoi du formulaire (par un clic sur le
bouton d’envoi). Il permet de programmer des actions de contrôle du formulaire
avant de l’envoyer au serveur. Par exemple, si vous souhaiter que les utilisateurs
remplissent un champ obligatoire, vous pouvez programmer une fonction nommée
par exemple tester( ) et vous l’appelez lors de l’envoi.
• onReset : cet événement survient lors du clic sur le bouton de réinitialisation du
formulaire. Ainsi vous pouvez programmer ce bouton. Par exemple, si l’utilisateur
fait un clic sur ce bouton par erreur, vous pouvez afficher un message lui demandant
de confirmer ou annuler son action.
92
Web Dynamique A. Zinedine
<html>
</head>
<script language = "javascript">
function tester( ) {
function confirmer( ) {
// une boîte de dialogue s’affiche, x reçoit true si on clique sur Ok et false sinon :
</script>
</head>
<body>
<form name = "myForm" action = "page2.php" method = "post" onSubmit = "return tester(
)" onReset = "return confirmer( )>
</form>
</body>
</html>
Comme nous avons vu plus haut, tous les éléments du formulaire sont regroupés dans un
tableau nommé elements[]. Dans ce paragraphe nous étudierons les propriétés, méthodes et
événements supportés par chaque élément, et dans le paragraphe qui suit nous verrons
comment accéder à ces éléments pour les exploiter.
93
Web Dynamique A. Zinedine
Elles correspondent à l’élément HTML <input type = "text">. Elles supportent plusieurs
propriétés correspondantes aux attributs de cette balise HTML. Rappelons ici les plus
importantes :
Propriétés
Méthodes
• focus( ) : cette méthode donne le focus à l’objet qui l’appelle. Par exemple, si vous
écrivez « document.myForm.text1.focus( ) », alors la zone de texte « text1 » reçoit
le focus, c'est-à-dire, elle est activée. Vous trouverez le curseur clignotant dans cette
zone vous invitant à saisir du texte.
• blur( ) : cette méthode fait l’inverse de focus( ). C'est-à-dire, il enlève le focus de
l’objet appelant.
Evénements
Les zones de texte détectent plusieurs événements. Dans la pratique on se sert beaucoup des
événements suivants :
94
Web Dynamique A. Zinedine
Elles correspondent à l’élément HTML <input type = "hidden">. Ce champ qui permet
d’envoyer des informations sans que le visiteur s’en aperçoive (par exemple, un email,
l’heure, des cookies, des informations sur le browser…), n’apparaît pas à l’écran. Donc
toutes les méthodes et tous les événements concernant son affichage sont sans effet. Les
propriétés les plus utilisées sont name, value et defaultvalue.
Elles correspondent à l’élément HTML <textarea> qui est utilisé pour permettre à
l’utilisateur de saisir un texte assez long (plusieurs lignes). Voilà les propriétés les plus
utilisées :
Propriétés
Méthodes
Evénements
Propriétés
En plus des propriétés name, disabled, readOnly, class et style, les cases à cocher
acceptent la propriété importante suivante :
• checked : cette propriété permet de détecter si la case à cocher est cocher ou non. On
peut aussi modifier cette propriété dynamiquement.
Méthodes
95
Web Dynamique A. Zinedine
Evénements
Elles correspondent à l’élément HTML <input type = "radio">. Dans la pratique, on définit
un groupe de boutons radio. Les boutons d’un même groupe ont tous le même nom
(l’attribut name). Ainsi on permet à l’utilisateur un seul choix parmi plusieurs offerts.
Les boutons radio acceptent les mêmes propriétés, méthodes et événements que les cases à
cocher.
7. Les boutons
Ils correspondent à l’élément HTML <input type = "button"> qui crée un bouton cliquable
dans la page. Voilà les principales propriétés des boutons :
Propriétés
Les boutons acceptent toutes les propriétés des zones de texte sauf que la signification de
quelques-unes est un petit peu différente. Par exemple, value signifie ici la libellée qui
s’affiche sur le bouton, maxlength signifie la longueur maximale de cette libellée.
Méthodes
Evénements
Les boutons submit et reset sont des simples boutons mais un peu spéciaux car les
événements onClick de ces boutons sont préprogrammés (ils engendrent l’envoi (resp. la
réinitialisation) du formulaire).
96
Web Dynamique A. Zinedine
Elles correspondent à l’élément HTML <select>. Cette balise définit la zone de la liste.
Chaque ligne de la liste est créée à l’aide de la balise <option> insérée entre les balises
<select> et </select>.
Les listes d’options possèdent plusieurs propriétés. Nous citons ici les principales :
Propriétés
Méthodes
Evénements
97
Web Dynamique A. Zinedine
Vous trouverez ci-après le code qui donne ce résultat. Nous avons créé un formulaire
nommé myForm à l’aide de la balise <form>. Plusieurs éléments du formulaire sont aussi
créés. Tous ces éléments sont des objets javascript. Vous pouvez les manipuler à l’aide de
javascript.
98
Web Dynamique A. Zinedine
<html>
<body>
<pre>
< !-- les boutons radio d’un même groupe possèdent tous le même nom -->
Votre sexe :
<input type = "radio" name = "sexe" value = "H" /> Homme
<input type = "radio" name = "sexe" value = "F" /> Femme
Vos loisirs:
<input type = "checkbox" name = "choix1" value = "s" /> Sport
<input type = "checkbox" name = "choix2" value = "l" /> Lecture
<input type = "checkbox" name = "choix3" value = "m" /> Musique
</pre>
</form>
</body>
</html>
Exemple1 :
99
Web Dynamique A. Zinedine
Dans cet exemple vous apprendrez comment accéder à la zone du texte Nom pour afficher
le texte saisi. Pour cela, il faut accéder d’abord au formulaire myForm, puis à la zone du
texte Nom.
a) document.forms[0]
b) document.forms["myForm"]
c) document.myForm
Les deux premières façons utilisent le tableau forms qui regroupe tous les
formulaires du document. Notre formulaire étant le premier, son indice est alors 0.
La deuxième méthode utilise le nom du formulaire au lieu de l’indice. La troisième
méthode n’utilise pas le tableau forms. Il utilise le nom du formulaire pour accéder
directement à celui-ci.
2) Une fois accédé au formulaire, il nous reste d’accéder à l’élément du formulaire, dans
notre cas la zone de texte. Tous les éléments du formulaire sont regroupés dans le
tableau elements[] associé à ce formulaire. Notre zone de texte (celle du Nom) est
document.myForm.elements[0], la deuxième (celle du prénom) est
ème
document.myForm.elements[1] , la dernière case à cocher, qui est le 8 élément
du formulaire est document.myForm.elements[7], et ainsi de suite.
Il existe d’autres méthodes pour accéder aux éléments. Prenons l’exemple de la zone Nom :
a) document.myForm.elements[0]
b) document.myForm.elements["Nom"]
c) document.myForm.Nom
Nous avons utilisé ici seulement la troisième façon d’accès au formulaire. On pourrait faire
le suivant : document.forms[0].elements[0] ou document.forms[0].elements["Nom"].
3) Une fois accédé à l’élément voulu, on lit ou on modifie la propriété concernée. Dans
notre cas, nous voulons le texte saisi, c'est-à-dire la propriété value de la zone de
texte : elle correspond à document.forms[0].elements[0].value ou tout simplement
document.myForm.Nom.value.
alert(document.myForm.Nom.value).
Dans l’exemple suivant nous reprendrons l’exemple précédent, mais en ajoutant une
fonction javascript, appelée dans l’événement onSubmit du formulaire et dont le rôle est de
créer une nouvelle fenêtre qui affiche toutes les informations saisies.
100
Web Dynamique A. Zinedine
<html>
<body>
function Afficher( ) {
maFenetre = window.open( ) ;
maFenetre.document.open( ) ;
L = document.myForm.sexe.length ;
if (document.myForm.choix1.checked ==true) {
maFenetre.document.write(document.myForm.choix1.value + "<br />") ;
}
if (document.myForm.choix2.checked ==true) {
maFenetre.document.write(document.myForm.choix2.value + "<br />") ;
}
if (document.myForm.choix3.checked ==true) {
maFenetre.document.write(document.myForm.choix3.value + "<br />") ;
}
</script>
</body>
</html>
101
Web Dynamique A. Zinedine
Pour tester cet exemple, ajoutez ce bout de code javascript dans l’exemple précédent.
Modifiez la première ligne du formulaire pour programmer l’appel de la fonction lors de la
soumission du formulaire. Voilà la nouvelle ligne :
Exemple 2 :
102
Web Dynamique A. Zinedine
<html>
<head>
<script language = "javascript">
function Ajouter ( ) {
document.myForm.pays.add(document.myForm.text1.value)
}
function Supprimer( ) {
document.myForm.pays.remove(document.myForm.pays.selectedIndex) ;
}
function Afficher ( ) {
</script>
</head>
<body>
<form name = "myForm">
<pre>
<!-- on appelle la fonction supprimer pour supprimer l’élément sélectionné de la liste : -->
<input type = "button" value = "Supprimer l’option sélectionnée" onClick = "Supprimer( )" />
</pre>
</form>
</body>
</html>
103
Web Dynamique A. Zinedine
Comme vous l’avez certainement remarqué, on utilise un chemin très long pour accéder à
un élément du formulaire. On appelle d’abord l’objet document, puis on accède au
formulaire, puis enfin en appelle l’objet voulu. Il existe une méthode plus simple qui permet
de donner un chemin relatif (c'est-à-dire relativement à l’objet en cours). L’objet encours est
désigné par le mot clé this.
Toute cette deuxième longue ligne est pour accéder au texte de la ligne sélectionnée de la
liste pays. Remarquez que le chemin document.myForm.pays est parcouru deux fois.
Puisque on est en train d’utiliser l’événement onChange de cette liste (on est toujours dans
la même balise), la liste pays est désignée par le mot clé this. Dans ce cas, tout le chemin
document.myForm.pays sera simplifié. On le remplace tout simplement par this. On
pourrait donc obtenir le même résultat que précédemment on écrivant :
Supposons maintenant qu’à partir d’un élément du formulaire on veut accéder à un autre
élément dans le même formulaire. Dans ce cas, on part du premier élément, on monte au
niveau formulaire par appel de l’objet form, puis on accède au deuxième élément suivant la
forme suivante : this.form.element2.
Complétons l’exemple précédent. Supposons par exemple que nous voulons désactiver le
bouton «Ajouter» dans l’événement onFocus de la zone de texte texte1. On modifie la
balise créant cette zone de texte comme suit :
Quand la zone de texte reçoit le focus, le bouton Ajouter est désactivé. Dans notre cas, this
réfère à la zone de texte, this.form réfère au formulaire qui contient la zone, c'est-à-dire le
formulaire myForm. Le reste du chemin est habituel : on peut utiliser plusieurs méthodes
pour arriver au bouton, soit par son nom comme nous avons fait dans ce cas, soit par le
tableau elements (par exemple : this.form.elements["Ajouter"]). Nous avons affecté ici la
valeur true à la propriété disabled. Il faut donc prévoir de réactiver le bouton dans un autre
événement.
104
Web Dynamique A. Zinedine
5) Les timers
Les timers permettent de déclencher des actions au bout d’un certain laps de temps. On
peut les manipuler à l’aide des méthodes suivantes de l’objet window :
X = maFenetre.setInterval("ExpressionJS", msec) ;
X = maFenetre.setInterval("FonctionJS", msec, arg1, arg2,…) ;
maFenetre est une variable objet de type window pour laquelle le timer est
associée. On peut l’omettre ou utiliser le mot clé window s’il s’agit de la fenêtre en
cours. ExpressionJS est une expression Javascript dont l’exécution se répète au bout
d’un nombre de millisecondes spécifié par le nombre msec. Dans la deuxième
syntaxe, FunctionJS est une fonction javascript dont l’exécution se répète au bout
de mesc millisecondes. arg1, arg2,...sont les arguments de la fonction FunctionJS
(en cas de besoin).
maFenetre.clearInterval(X) ;
X = maFenetre.setTimeOut("ExpressionJS", msec) ;
X = maFenetre.setTimeOut("FonctionJS", msec, arg1, arg2,…) ;
maFenetre.clearTimeOut(X) ;
Exemple 1:
105
Web Dynamique A. Zinedine
<html>
<body>
<script language = "javascript">
// créer une nouvelle fenêtre :
fenetreA = window.open( ) ;
fenetreA.document.open( );
fenetreA.document.write("Dans 10 secondes, un message va s’afficher une seule fois:");
function message( ){
alert("Ce message s'affiche toutes les 2 secondes...");
}
</script>
<input type = "button" value = "Arrêter Messages" onClick="window.clearInterval (Y)" />
</body>
</html>
Exemple 2 :
L’exemple suivant crée une simple animation en alternant l’affichage de plusieurs images :
106
Web Dynamique A. Zinedine
<html>
<body>
<img name = "photo" src = "0.gif" width = 60 height = 60 align = "right" />
function changePhoto() {
m=(m+1)%3;
photo.src = Photos[m].Src;
}
//un timer pour alterner l’affichage des photo toutes les 1000 millisecondes:
X = setInterval("changePhoto( )", 1000) ;
</script>
</body>
</html>
107
Web Dynamique A. Zinedine
108
Web Dynamique A. Zinedine
Partie 3
Scripts côté serveur
109
Web Dynamique A. Zinedine
110
Web Dynamique A. Zinedine
PHP est un langage de script côté Serveur. Il permet d’écrire des scripts qui s’exécutent
sur le serveur web afin de générer des pages HTML qui seront envoyés par la suite vers le
navigateur. Ainsi, le navigateur ne reçoit que le résultat des scripts, le code source n’est pas
donc accessible aux utilisateurs.
PHP naît avec le site de Rasmus Lerdof. Il s’agit d’une page personnelle qui permet de
conserver une trace des utilisateurs. Pour répondre aux demandes des utilisateurs, Lerdof a
mis en ligne la version 1.0 du langage PHP (à l’époque Personal Home Page).
A la surprise de son auteur, PHP devient rapidement très populaire. Les utilisateurs de son
site commencèrent à envoyer leurs suggestions pour améliorer le langage et c’est ainsi que
Rasmus Lerdof a écrit la version 2 de PHP qui contient déjà des fonctionnalités puissantes.
PHP3 était un langage interprété. Mais depuis la version 4, PHP devient un langage compilé.
A partir de la version 5, PHP s’est orienté vers la programmation orienté objet. Le
développement et l’amélioration n’a jamais cessé. Actuellement, une très bonne partie du
marché est réservée à PHP. Des grandes sociétés de renommée (telles que Amazon,
Facebook,…) ont développé leurs sites autour du PHP. Pour toute documentation sur PHP,
visitez le site officiel : www.php.net
Il arrive souvent que le serveur web ait besoin d’une autre application (par exemple un
SGBD).
111
Web Dynamique A. Zinedine
Dans ce cours nous allons utiliser le serveur Web le plus répondu dans le monde : le serveur
Apache. C’est un serveur open source très performant. Il s’intègre parfaitement avec PHP et
le SGBD MySQL, un autre fameux logiciel open source.
Vous pouvez bien sûr télécharger et installer tous ces logiciels séparément. Mais, il est plus
facile de télécharger un package préconfiguré qui rassemble déjà le tout (par exemple Wamp
ou EasyPHP).
a) Installation de EasyPHP
EasyPHP est un package qui contient les logiciels les plus essentiels pour le fonctionnement
de vos applications web :
Dans la suite de ce cours, nous allons utiliser EasyPHP Devserver. Vous pouvez le
télécharger librement depuis son site officiel : www.easyphp.net.
Une fois installé, un nouveau dossier pour « EasyPHP Devserver» est créé dans le dossier
« Programmes ». Dans ce dossier, Vous trouverez un sous dossier appelé «eds-WWW » (le
nom peut changer légèrement d’une version à l’autre). Ce dossier s’appelle le dossier public.
C’est là où vous allez mettre toutes les pages web que vous voulez mettre à disposition des
navigateurs. Ainsi, quand le serveur web démarre, toute page web se trouvant dans le
dossier public sera accessible par tout ordinateur connecté au votre.
b) Configuration de PHP
Le PHP inclus dans easyPHP est préconfiguré et, Généralement, vous n’aurez pas besoin de
modifier cette configuration. Mais, si vous le désirez pour une raison ou l’autre, sachez que
toutes les options de configuration de PHP se trouvent dans un fichier nommé PHP.ini qui
se trouve dans le dossier d’installation. Ce fichier est bien commenté. Vous pouvez le lire
facilement. Un texte qui suit un « ; » est un commentaire (donc ignoré). les entêtes de
sections sont entre crochets comme ça :[section] (ils sont ignorés aussi). Le reste du fichier
est sous forme : directive = valeur. Il vous reste seulement de reconnaître la bonne
directive à modifier et la bonne valeur.
Si vous modifiez le fichier php.ini, les nouvelles valeurs ne prennent effet qu’après
redémarrage du serveur Web.
Il vous reste seulement de démarrer le serveur. Dans le menu Démarrer, lancez EasyPHP.
Sur la barre des tâches, cliquez sur l’icône d’EasyPHP pour accéder au tableau de bord qui
vous permettra de faire toutes les taches d’administration de votre environnement.
112
Web Dynamique A. Zinedine
A partir de ce tableau de bord, vous pouvez faire toutes les taches dont vous
aurez besoins : démarrer ou arrêter les serveurs web et les serveurs de bases de
données, gérer plusieurs installations de PHP et des différents serveurs et
choisir laquelle utiliser, accéder à tous les paramètres de configuration des
différents serveurs, installer et gérer d’autres modules complémentaire,
accéder à PhpMyAdmin pour administrateur la base de données, Créer des
alias pour les dossiers web et sauvegarder leurs adresses comme Répertoire de
travail ce qui permet d’accéder au fichiers de votre site en mode modification
ou en mode affichage. Bref, c’est super pratique !
113
Web Dynamique A. Zinedine
Si vous voulez mettre une page web à disposition des navigateurs, il vous suffit de la mettre
dans le dossier public. Ainsi, elle sera accessible par tout ordinateur qui peut effectuer une
connexion http au votre.
Vous pouvez faire les tests en accédant à vos pages via le même ordinateur. Pour cela,
lancez votre navigateur préféré et dans la barre d’adresse tapez : http://localhost:8080 ou
tout simplement localhost :8080. Ceci indique au navigateur de se connecter à un serveur
web qui se trouve sur le même ordinateur. Vous pouvez aussi taper, au lieu de localhost,
l’adresse IP de l’ordinateur local à savoir 127.0.0.1 :8080. Ceci donne le même résultat : le
navigateur essaye de chercher un serveur web sur la même machine.
Remarque : le nombre 8080 est le numéro du port utilisé par l’installation d’Apache de
EasyPHP Devserver. Vous pouvez changer ce port dans la configuration d’Apache à partir
du tableau de bord. Universellement, on utilise le port 80. Dans ce cas, il n’est pas nécessaire
d’ajouter le numéro de port dans l’adresse : il suffit de taper : http://localhost.
Pour se connecter depuis un autre ordinateur, il faut taper dans la barre d’adresse du
navigateur le nom de l’ordinateur qui contient le serveur web ou bien son adresse IP
(localhost et 127.0.0.1 ne marchent plus). Par exemple, si le nom de l’ordinateur est poste1,
vous devez taper dans la barre d’adresse : http://poste1, ou tout simplement //poste1. Si
vous connaissez l’adresse IP du poste1, vous pouvez l’utiliser aussi.
Remarque
Si une page portant le nom index.php (ou .html) se trouve dans le répertoire WWW, elle
s’affiche si vous ne précisiez pas le nom de la page demandée. Ainsi, vous pouvez par
exemple, nommer votre page d’accueil, index.php ou index.html.
114
Web Dynamique A. Zinedine
1) Ouvrez un nouveau fichier texte simple (dans le Bloc Note par exemple) et tapez le
code suivant :
<html>
<body>
<?php
echo "C’est mon premier script PHP" ;
?>
</body>
</html>
Listing 1 : script1.php
5) Toujours dans le navigateur web, visualisez le code source de la page Web affiché.
Voilà ce que vous obtenez :
<html>
<body>
C’est mon premier script PHP
</body>
</html>
115
Web Dynamique A. Zinedine
Explication
Comme vous pouvez le remarquer, le listing1 commence par les balises <html> et <body>
et se termine par </body> et </html>. Il s’agit en fait d’une page HTML normale. La seule
différence c’est qu’un script PHP est intégré dans cette page HTML (c’est le bout de code qui
commence par « <?php » et se termine par « ?> ». Remarquez aussi qu’on a utilisé
l’extension « .php » au lieu de « .html ».
Quand vous tapez l’adresse de la page à afficher, dans notre cas le fichier script1.php, le
navigateur web demande ce fichier auprès de serveur web. Ce dernier traite le fichier
script1.php et génère en mémoire un nouveau fichier qui va être envoyé vers le navigateur.
Tout texte qui ne fait pas parti d’un script PHP (i.e. : n’est pas encadré par <?php et
?>) est écrit tel quel.
Tout script php est traité. Seulement le résultat du traitement est écrit dans le
nouveau fichier à envoyer vers le navigateur.
Dans notre cas, tout le contenu de la page est envoyé tel quel, sauf ce qui est entre <?php
et ?>, à savoir la ligne : « echo "C’est mon premier script PHP" ; ». Cette instruction
demande au serveur d’écrire la phrase « C’est mon premier script PHP » dans le flux à
envoyer au navigateur.
<?php
echo "<html> \n" ;
echo " <body> \n" ;
echo "C’est mon premier script PHP \n" ;
echo " </body> \n" ;
echo "</html>" ;
?>
La seule différence c’est que tout le texte à envoyer est généré entièrement par la fonction
echo. (Le caractère \n, retour à la ligne, est ajouté pour mettre en forme le code source
généré).
116
Web Dynamique A. Zinedine
a) Les commentaires
Pour commenter votre code PHP, vous pouvez utiliser trois façons. Utilisez « // » si vous
voulez faire un commentaire qui tient sur une seule ligne. Tout ce qui vient après sur la
même ligne est ignoré par le navigateur. La deuxième méthode est utile si le commentaire
est étalé sur plusieurs lignes. Dans ce cas on le délimite par /* et */. Vous pouvez aussi
utiliser le caractère « # » pour créer un commentaire de fin de ligne comme en shell Unix :
<?php
// Commentaire sur une seule ligne.
/* Commentaire
sur
plusieurs lignes */
En PHP, les identificateurs des variables sont toujours précédés par le symbole « $ ».
Comme tout langage de programmation, PHP reconnaît les types de base pour les variables.
Cependant, le programmeur n’a pas à déclarer les variables et leurs types, car PHP reconnaît
le type de la variable dès la première affectation. De plus, une variable en PHP peut changer
de type dans un même script : il prend toujours le type de l’expression affectée à cette
variable. Voilà un exemple :
1 <html>
2 <body>
3 <?php
4 $V = "123" ;
5 echo "Le type de la variable V est ".gettype($V);
6 ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
7 $V = "123" * 1 ;
8 echo "<br/> Le type de la variable V est ".gettype($V);
9 ?>
10 </body>
11 </html>
117
Web Dynamique A. Zinedine
Signalons ici que nous avons utilisé la fonction prédéfinie getType() qui retourne le type de
la variable passée en paramètre. Nous avons aussi utilisé dans cet exemple l’opérateur de
concaténation de chaînes de caractères « . »
Remarques
4) Une chaîne en PHP est délimitée par des doubles quottes (") ou par des simples
quottes (' ). Les caractères utilisés en C (par exemple, « \n », « \t »…) sont acceptés.
5) En PHP, la casse est importante en ce qui concerne les identificateurs des variables.
Par exemple, $V, et $v sont deux variables différentes.
c) Les constantes
Vous pouvez définir des constantes pour lesquelles la valeur est fixée une fois pour toutes
(comme en C) en utilisant la fonction define() :
<?php
define (DIX, 10) ;
$note = 14 ; //pour essayer
if ($note >= DIX)
echo "Accepté !" ;
else
echo "Refusé !" ;
?>
118
Web Dynamique A. Zinedine
d) Les fonctions
Pour déclarer une fonction en PHP, utilisez le mot clé function suivi du nom de la fonction.
Le corps de la fonction est délimité par des accolades :
function MaFonction ( ) {
Comme en C, une fonction peut recevoir des paramètres et retourner une valeur. L’appel de
la fonction se passe en utilisant son nom :
<?php
// Déclaration d’une fonction nommée somme() qui calcule la somme de deux nombres
function somme($x,$y) {
$s = $x + $y ;
return $s ;
}
// Appel de la function
$resultat = SOMME(3,5) ; //appelle la fonction somme( ) pour calculer la somme 3+5
Echo "La somme de 3 et 5 est " . $resultat ;
?>
Remarquez que la casse n’est pas importante en ce qui concerne les identificateurs de
fonctions (Ainsi somme() et SOMME() désignent la même fonction).
Remarque
Comme tout langage de programmation, toute variable définie dans le corps d’une fonction
est dite variable locale. Sa portée est limitée à la fonction dans laquelle elle est définie. Une
variable définie hors de toute fonction est une variable globale.
1 <?php
2 $V1 = 0 ;
3 function MaFonction () {
4 $V1 = 1 ;
5 $V2 = 2 ;
6 echo "la valeur de V1 est $V1, et la valeur de V2 est $V2";
7 }
8 MaFonction() ;
9 echo "<br /> la valeur de la variable globale V1 est $V1" ;
11 ?>
119
Web Dynamique A. Zinedine
La raison est simple : la variable $V1 au sein de la fonction est tout à fait une nouvelle
variable différente de la variable globale $V1. Rappelez-vous que PHP crée des variables
sans aucun besoin de les déclarer : leur première utilisation suffit pour les créer.
A la ligne 2 donc, on a créé une variable globale $V1. Dans le corps de la fonction, à la ligne
4, nous avons créé une autre variable $V1, cette fois-ci locale, et une autre variable locale
$V2 à la ligne 5. Autrement dit, nous n’avons pas accédé dans notre fonction à la variable
globale $V1, mais à une toute nouvelle variable (locale) nommée aussi $V1.
Si votre intension est d’accéder à la variable globale $V1 dans la fonction, utilisez le mot clé
global comme suit :
1 <?php
2 $V1 = 0 ;
3 function MaFonction () {
4 global $V1 ;
5 $V1 = 1 ;
6 $V2 = 2 ;
7 echo "la valeur de V1 est $V1, et la valeur de V2 est $V2";
8 }
9 MaFonction() ;
11 echo "<br/> la valeur de la variable globale V1 est $V1" ;
12 ?>
Avec cette méthode, on peut créer au sein d’une fonction une nouvelle variable globale à
laquelle on peut accéder à l’extérieur de cette fonction.
120
Web Dynamique A. Zinedine
On peut aussi accéder à une variable globale via le tableau associatif $GLOBALS (qui
contient toutes les variables globales du script) de la manière suivante :
1 <?php
2 $V1 = 0 ;
3 function MaFonction () {
4 $GLOBALS["V1"] = 1 ;
5 $V2 = 2 ;
6 echo "la valeur de V1 est " . $GLOBALS["V1"] . ", et la valeur de V2 est $V2";
7 }
8 MaFonction() ;
9 echo "<br/> la valeur de la variable globale V1 est $V1" ;
11 ?>
A la ligne 4, nous avons utilisé le tableau associatif prédéfini ($GLOBALS). Dans ce tableau
sont stockées toutes les variables globales du script (Pour accéder à une variable précise on
utilise son nom (sans dollar). Dans notre cas, $GLOBALS["V1"] donne accès à $V1).
Pour en savoir plus sur les tableaux associatifs, voir la section sur les tableaux.
d) Structures de contrôle
Tout ce qui concerne cette partie est le même que dans le langage C. Nous donnons un
rappel rapide sous forme d’exemples.
La boucle for
<?php
?>
La boucle foreach
Cette instruction particulière permet de parcourir des tableaux. Nous la retrouvons dans la
section destinée aux tableaux.
121
Web Dynamique A. Zinedine
La boucle while
L’exemple suivant calcule la somme des 100 premiers entiers non nuls:
<?php
while ($i <= 100){
$s = $s + $i ;
$i++;
}
echo "La somme est " . $s; // on peut aussi écrire : echo "La somme est $s ";
?>
La boucle do…while
<?php
do {
$s = $s + $i ;
$i++;
} while ($i <= 100) ;
<?php
$jour = date("d") ; //date() est une fonction qui retourne la date système ;
// avec le format "d", il donne le numéro du jour de 01 à 31
// $jour contient le numéro du jour actuel
// (Voir la section sur les dates)
if ($jour = = 1){
echo "C’est le début du mois " ; //les accolades ne sont pas nécessaires
// quand il s’agit d’une seule instruction
// comme dans notre cas
}
else {
echo "Ce n’est pas le début du mois" ;
}
?>
Bref, tous ce que vous connaissez à ce propos en langage C est valable en PHP (par exemple,
les instructions switch, break, continue,…)
122
Web Dynamique A. Zinedine
Remarque
Dans les tests de la section précédente, nous avons utilisé des expressions booléennes. Ces
expressions prennent soit la valeur TRUE, soit la valeur FALSE.
Une valeur numérique nulle est automatiquement considérée comme FALSE. La même
chose pour une chaîne vide ou la chaîne « 0 »
123
Web Dynamique A. Zinedine
124
Web Dynamique A. Zinedine
Dans ce chapitre, nous présentons certaines fonctions de PHP qui vous seront utiles.
<?php
$nom = "Omar";
<?php
$V = "123"; // $V est une chaîne
echo "Le type de \$V est " . getType($V) ."<br/>" ; // affiche : Le type de $V est string
// on modifie le type de $V
setType($V, "integer") ; //$V devient de type integer: "123" est casté en l’entier 123
if (is_integer($V)) //teste si la variable est un entier ce qui est vrai dans notre cas
echo "\$V est entier" ;
else
echo "\$V n’est pas un entier" ;
?>
La fonction empty($V) permet de savoir si la variable $V contient une chaîne vide ou une
valeur numérique nulle ou rien du tout. Elle renvoie 1 dans ce cas.
La fonction isset($V) permet de tester si une variable $V existe (c'est-à-dire, a déjà reçu une
valeur dans le script et n’a pas été détruite par la fonction unset($V).
125
Web Dynamique A. Zinedine
<?php
$V = 0;
echo isset($V) ; // affiche 1 car la variable existe déjà
echo empty($V) ; // affiche 1 car la variable est considérée vide (0 ou chaîne vide )
$V= 1 ;
echo isset($V) ; // affiche 1 car la variable existe déjà
echo empty($V) ; // n’affiche rien car la variable n’est pas vide
3) Chaînes de caractères
Les chaînes de caractères en PHP sont délimitées soit par des simples quottes soit par des
doubles quottes.
Si vous utilisez les doubles quottes pour délimiter une chaîne, alors les variables et les
caractères spéciaux contenus dans cette chaîne sont évalués. Ce n’est pas le cas si vous
utilisez les simples quottes.
<?php
$Nom = "Omar";
echo "Bonjour $Nom" ; // affiche Bonjour Omar , la variable $Nom est évaluée
echo 'Bonjour $Nom' ; // affiche Bonjour $Nom , la variable $Nom n’est pas évaluée
?>
PHP fournit beaucoup de fonctions pour la manipulation des chaînes de caractères. En voici
quelques-unes :
126
Web Dynamique A. Zinedine
Si vous avez un texte assez long que vous voulez stocker dans une chaîne de caractères,
utilisez la syntaxe, dite here-Doc, comme suite :
<?php
$Text = <<<MonIdentificateur
Ici commence le texte. Les caractères spéciaux sont automatiquement déspécialisés.
Cette zone est identifier par un identificateur précédé de <<<. Dans notre cas c’est
"MonIdentificateur". Et pour terminer le texte, on doit clôturer par l’identificateur sur
une nouvelle ligne.
MonIdentificateur;
echo "$Text" ;
?>
4) Tableaux
Les tableaux en PHP sont de type array. Ils peuvent contenir des éléments de tout type.
Leurs éléments peuvent être de types différents.
Ou encore :
127
Web Dynamique A. Zinedine
<?php
//affichage du résultat
echo "Le nom de cet étudiant est $nom $prenom, il est âgé de $age ans." ;
?>
Pour parcourir un tableau vous pouvez utiliser une boucle d’une manière standard :
<?php
$jours = array("dimanche", "lundi","mardi","mercredi","jeudi","vendredi","samedi") ;
?>
<?php
$jours = array("dimanche", "lundi","mardi","mercredi","jeudi","vendredi","samedi") ;
Dans cet exemple, la variable $j reçoit successivement les différents éléments du tableau
$jours.
128
Web Dynamique A. Zinedine
<?php
$jours = array("dimanche", "lundi","mardi","mercredi","jeudi","vendredi","samedi") ;
echo "Les jours de la semaine sont : <br/>";
reset($jours);
for ($i=0 ; $i < count($jours) ; $i++){
echo current($jours) . "<br/>";
next($jours) ;
}
?>
Ici, nous avons utilisé des fonctions qui aident à parcourir un tableau :
Dans notre exemple, après avoir initialisé le tableau $jours et afficher le message de la ligne
3, le pointeur est placé au début du tableau $jours par la fonction reset() (i.e : il pointe sur
« dimanche »). Dans la boucle, la fonction curent() retourne la valeur de l’élément courant
(sur lequel point le pointeur. Au début c’est dimanche). Ensuite, le pointeur avance vers le
deuxième élément grâce à la fonction next(). Et on reboucle jusqu’à la fin du tableau ($i
=count($jour)).
Cette méthode est aussi valable avec les tableaux associatifs de la section suivante.
• count($t) et sizeof($t) : ces deux fonctions donnent la taille d’un tableau $t (i.e. :
le nombre de ses éléments).
• in_array($v ,$t) : vérifie si la valeur de $v existe dans le tableau $t.
• list($v1,$v2,$v3,…) : transforme une liste de variable en tableau.
• sort($t) : trie le tableau (ordre alphanumérique croissant).
• rsort($t) : trie le tableau (ordre alphanumérique décroissant).
• implode($s,$t)et join($s,$t) : ces deux fonctions retournent une chaîne de
caractères qui est le résultat de la jointure des éléments du tableau avec la chaîne
$s.
• array_merge($t1,$t2,$t3,…) : concatène les tableaux passés en arguments.
• array_rand($t) : renvoi un élément du tableau aléatoirement.
129
Web Dynamique A. Zinedine
e) Tableaux associatifs
Un tableau associatif est un tableau tel que, une chaîne de caractère, dite clé, est associée à
chacun de ses éléments. Ainsi, au lieu d’accéder à un élément par son indice, on accède par
sa clé : $tableau["clé"] au lieu de $tableau[i]. Voilà un exemple :
<?php
$n = $etudiant["Nom"] ;
$p = $etudiant["Prénom"] ;
$a = $etudiant["Age"] ;
//affichage du résultat
echo "Le nom de cet étudiant est $n $p. Il est âgé de $a ans.";
?>
<?php
$n = $etudiant ["Nom"];
$p = $etudiant ["Prénom"];
$a = $etudiant ["Age"];
//affichage du résultat
echo "Le nom de cet étudiant est $n $p. Il est âgé de $a ans.";
?>
130
Web Dynamique A. Zinedine
<?php
//création du tableau associatif avec la fonction array()
$etudiant = array("Nom" =>"Omari","Prénom" =>"Omar","Age" => 22) ;
?>
<html><body><table border = '1'>
<tr><td>Nom</td><td>Prénom</td><td>Age</td></tr>
<tr>
<?php
// $var parcours les différents éléments
foreach ($etudiant as $var){
echo "<td> $var </td>" ;
}
?>
</tr>
</table></body></html>
Nom Prénom Age
Omari Omar 22
<?php
//création du tableau associatif avec la fonction array()
$etudiant = array("Nom" =>"Omari","Prénom" =>"Omar","Age" => 22) ;
131
Web Dynamique A. Zinedine
5) Date et heure
Les fonctions de gestion des dates et heures sont très utiles. PHP en fournit plusieurs. En
voici les plus intéressantes :
Dans les exemples, on suppose que la date est dimanche 6 mai 2007 à 03h30mn15s
$t = getDate() ;
Clé Signification Exemple
seconds Secondes $t["seconds"] donne : 15
minutes Minutes $t ["minutes"] donne : 30
hours Heures $t ["hours"] donne : 3
mday Jour du mois de 1 à 31 $t ["mday"] donne : 6
wday Jour de la semaine de 0 à 6 $t ["wday"] donne : 0
mon Mois de l’année de 1 à 12 $t ["mon"] donne : 5
year Année sur 4 chiffres $t ["year"] donne : 2007
yday Jour de l’année de 0 à 365 $t ["yday"] donne : 125
weekday Jour de la semaine, textuel,anglais $t ["wekday"] donne : Sunday
month Mois, textuel, complet, en anglais $t ["month"] donne : May
Exemple :
<?php
$LaDate = getDate() ;
$jour = $LaDate["mday"];
$mois = $LaDate["mon"];
$annee = $LaDate["year"];
?>
132
Web Dynamique A. Zinedine
Dans les exemples, on suppose que la date est dimanche 6 mai 2007 à 03h45mn20s
Format Signification Exemple
d Jour du mois sur deux chiffres de 01 à 31 date("d") donne : 06
j Jour du mois de 1 à 31 (sans les 0 initiaux) date("j") donne : 6
Jour de la semaine, textuel, en version longue et en
l date("l") donne : Sunday
anglais
D Jour de la semaine textuel en trois lettres et en anglais date("D") donne : Sun
w Jour de la semaine numérique de 0 à 6 (0 pour dimanche) date("w") donne : 0
z Jour de l’année de 0 à 365 date("z") donne : 125
m Mois de l’année sur deux chiffres de 01 à 12 date("m") donne : 05
n Mois de l’année de 1 à 12 (sans les 0 initiaux) date("n") donne : 5
F Mois textuel en version longue et en anglais date("F") donne : May
M Mois textuel en trois lettres date("M") donne : May
Y Année sur 4 chiffres date("Y") donne : 2007
y Année sur 2 chiffres date("y") donne : 07
h Heure au format 12h de 01 à 12 date("h") donne : 03
g Heure au format 12h de 1 à 12 (sans les 0 initiaux) date("g") donne : 3
H Heure au format 24h de 00 à 23 date("H") donne : 03
G Heure au format 24h de 0 à 23 (sans les 0 initiaux) date("G") donne : 3
i Minutes de 00 à 59 date("i") donne : 45
s Secondes de 00 à 59 date("m") donne : 20
a am ou pm date("a") donne : am
A AM ou PM date("A") donne : AM
L Booléen pour savoir si l’année est bissextile date("L") donne : 0
t Nombre de jour dans le mois donné de 28 à 31 date("t") donne : 31
Vous pouvez combiner ces formats pour obtenir le format dans lequel vous voulez afficher
la date :
<?php
echo "Si on utilise le format : l j F Y , La date affichée serait : " . date("l j F Y") ;
echo "<br/> Et avec le format : j/n/Y , La date affichée serait : " . date("j/n/Y") ;
echo "<br/> Et avec le format : D Y-m-d , La date affichée serait : " . date("D Y-m-d ") ;
echo "<br/> Et avec le format : D d/m/y H:i:s on affiche : " . date("D d/m/y H:i:s") ;
?>
Le résultat obtenu dans le navigateur, sachant que la date système est dimanche 6 mai 2007
à 5h10min50s, est le suivant :
133
Web Dynamique A. Zinedine
6) Mathématiques
Fonctions
Constantes :
Nombres aléatoires
Vous pouvez générer des nombres aléatoires en se basant sur la fonction rand() ou la
fonction mt_rand() :
134
Web Dynamique A. Zinedine
Exemple
<?php
echo " pow (2,3) = " . pow(2,3);
echo " <br/> ceil(1,6) = " . ceil(1.6);
echo "<br/> floor (1,6) = " . floor (1.6);
echo "<br/> Max (2,3,20,-4,56,5) = " . Max (2,3,20,-4,56,5);
echo "<br/> La valeur de pi est " . M_PI;
echo "<br/> La valeur de e est " . M_E;
///////////////////////////////////////////////////////////////////////////////////////////
echo "<br/> Le nombre RAND_MAX généré par mt_rand est " . mt_getrandmax();
echo "<br/> Voilà un nombre aléatoire : " . mt_rand();
echo "<br/> Et voici un autre : " . mt_rand() ;
?>
Exemple : Considérons le script inclusion.php suivant qui fait appel à trois autres fichiers :
<?php
for ($i= 1; $i<=3; $i++){
include("$i.php");
}
?>
135
Web Dynamique A. Zinedine
<?php
//Ceci est le fichier 1.php. Dans les autres fichiers en remplace 1 par 2 ou 3
echo "Nous sommes dans le fichier 1<br/>";
?>
Exemple d’utilisation
Supposons par exemple que vos scripts utilisent des variables qui risquent de changer de
temps en temps. Vous pouvez créer alors un fichier externe variables.inc.php que tous les
scripts appellent avec la fonction include(). Ainsi, si vous avez à faire des modifications,
vous pouvez les faire à un seul emplacement : le fichier variable.inc.php.
Voyons par exemple le script suivant qui contient des informations nécessaires pour accéder
à une base de données :
<?php
$server = "MonServeur" ;
$BD = "MaBase" ;
$user = "Moi" ;
$password = "Laisser Passer" ;
?>
Si tous les scripts accédant à la base de données incluent se fichier, et si un jour je change de
serveur par exemple, il me suffit de modifier le nom du serveur dans cet unique script. Tous
les autres scripts continuent à fonctionner correctement.
Il existe une autre fonction qui sert pour l’inclusion des fichiers : c’est la fonction require().
8) Arrêt prématuré
Parfois, vous aurez besoin de stopper un script PHP, par exemple pour gérer une erreur
d’exécution. A ce stade, PHP offre deux fonctions :
136
Web Dynamique A. Zinedine
<?php
Ouvrir_connexion("$server","$user","$password") or die ("Connexion impossible au
serveur");
//ou bien
// Ouvrir_connexion ("$server","$user","$password") or exit();
?>
La dernière ligne (avec exit ()) fait la même chose sauf qu’aucun message n’est affiché pour
l’utilisateur.
<?php
?>
137
Web Dynamique A. Zinedine
• fopen($file,$mode) : ouvre le fichier dont le nom est $file avec le mode $mode.
Cette fonction retourne un identificateur $id de fichier si l’opération se passe
bien et False en cas d’erreur. Les modes possibles sont :
Dans cet exemple, nous voulons ouvrir le fichier « c:/essai.txt » avec le mode « w ». C'est-
à-dire pour écriture. Si le fichier existe, alors il sera ouvert, sinon il sera créé. C’est le rôle de
la fonction fopen () qui ouvre le fichier et retourne un identificateur que nous stockons dans
$id.
Si l’ouverture se passe sans problèmes, (i.e. $id != False), alors on écrit la chaîne $contenu
dans le fichier $id grâce à fputs(), et puis on ferme le fichier avec fclose(). Dans le cas
d’erreur, on stoppe le script en affichant un message d’erreur.
138
Web Dynamique A. Zinedine
<?php
$fichier = "c:/essai.txt" ;
$id = fopen($fichier,"w") ;
if($id) {
$contenu = "C’est un texte d’essai.\n\r On essaye d’accéder au fichier par PHP";
fputs($id,$contenu) ;
fclose($id) ;
echo "L’écriture dans le fichier $fichier s’est bien passée" ;
}
else die ("Erreur lors d’essai d’ouverture du fichier " . $fichier );
?>
<?php
$fichier = "c:/essai.txt" ;
$id = fopen($fichier,"r") ;
if($id) {
while( !feof($id)){
$contenu = $contenu . fgets($id) ;
}
fclose($id) ;
echo $contenu ;
}
else die ("Erreur lors de l’ouverture du fichier " . $fichier );
?>
Dans cet exemple, nous avons lu le contenu du fichier « c:/essai.txt ». Nous avons ouvert
le fichier par la fonction fopen() en utilisant le mode « r » (mode lecture). L’identificateur
retourné par fopen() est stocké dans la variable $id. (i.e. dans le script, le fichier ouvert est
reconnu par $id).
Si $id est différent de false, ce qui veut dire que l’ouverture s’est passée sans erreurs, on
boucle, tant que la fin du fichier n’est pas encore atteinte ( !feof($id)). A chaque passage
dans la boucle, on lit une ligne du fichier ouvert par la fonction fgets(). Cette ligne lue est
concaténée avec la chaîne $contenu. Quand la fin du fichier est atteinte, on sort de la
boucle, on ferme le fichier par fclose() et on affiche la chaîne $contenu qui contient
maintenant le contenu du fichier « c:/essai.txt »
139
Web Dynamique A. Zinedine
On peut aboutir au même résultat de l’exemple précédent quand il s’agit d’un fichier texte à
afficher à l’écran comme suit :
<?php
$fichier = "c:/essai.txt" ;
//readfile() lit le contenu d’un fichier texte et l’affiche à l’écran
readfile($fichier) ;
?>
<?php
$source = "c:/essai1.txt" ;
$destination = "c:/essai2.txt" ;
$id1 = fopen($source,"r") ;
$id2 = fopen($destination,"w") ;
?>
Dans cet exemple, nous voulons copier le fichier « c:/essai1.txt » dans le fichier
«c:/essai2.txt». Nous avons utilisé la fonction fopen() pour ouvrir le premier fichier en
mode lecture (« r ») et le deuxième en mode écriture (« w »). Ce mode, permet de créer le
fichier « c:/essai2.txt » s’il n’existe pas. Si l’ouverture des deux fichiers passe sans
problèmes alors on boucle jusqu’à ce qu’on atteint la fin du fichier source (identifié par
$id1). A chaque passage dans la boucle on lit un seul caractère du fichier source ($id1)
grâce à getc(), ce caractère est stocké dans la variable temporaire $c, puis on écrit $c dans le
fichier de destination ($id2) grâce à puts(). Comme ça on effectue une copie caractère par
caractère. N’oubliez pas de fermer les fichiers à la fin de l’opération.
140
Web Dynamique A. Zinedine
L’exemple suivant reprend le même exemple précédent, mais cette fois-ci, on utilise la
fonction copy() pour lire la source et écrire dans la destination au lieu de le faire à la main
comme dans l’exemple précédent.
<?php
$source = "c:/essai.txt" ;
$destination = "c:/essai2.txt" ;
$id1 = fopen($source,"r") ;
$id2 = fopen($destination,"w") ;
$bienpasser = copy($id1,$id2);
if($bienpasser)
echo "L'opération de copie s'est bien passée!" ;
else
die ("Erreur lors de l’ouverture de l’un des fichiers ");
fclose($id1) ;
fclose($id2) ;
?>
Dans l’exemple suivant, nous essayons de lire certaines propriétés du fichier « essai.txt ».
Ainsi la fonction filetype() nous donne le type du fichier (i.e. : fichier ou dossier). La
fonction filesize() donne la taille du fichier. Nous allons ensuite renommer le fichier. On
peut le faire à l’aide de la fonction rename(). Mais, il vaut mieux vérifier que le nouveau
nom n’est pas déjà utilisé (si c’est le cas, il serait impossible de terminer l’opération, et PHP
génère une erreur). Pour cela, nous allons tester l’existence d’un fichier portant le nom
« c:/essai2.txt » avec la fonction file_exists(). Le cas échéant, on le détruit avec la fonction
unlink().
141
Web Dynamique A. Zinedine
<?php
$fichier = "c:/essai1.txt" ;
if ( !file_exists("c:/essai2 .txt") {
unlik("c:/essai2 .txt") ; //si un fichier avec ce nom existe, on le supprime d’abord
rename($fichier, "c:/essai2 .txt ") ; //maintenant on renomme sans problème
}
//afficher le contenu du fichier "c:/essai2 .txt " :
readfile("c:/essai2 .txt ");
?>
Exemple
142
Web Dynamique A. Zinedine
<?php
$currentdir = getcwd();
$parentdir = "$currentdir/..";
Dans cet exemple, nous avons lu le nom du répertoire courant avec la fonction getcwd().
Nous avons stocké le résultat dans la variable $currentdir. Le nom du répertoire parent est
stocké dans la variable $parentdir. La fonction chdir nous a permis de changer le
répertoire de travail. Le résultat est le suivant :
143
Web Dynamique A. Zinedine
<?php
// ouvre le dossier courant. Le symbole @ permet d’échapper l’erreur en cas d’erreur
$dir = @opendir(".") ;
}
?>
144
Web Dynamique A. Zinedine
Les motifs peuvent êtres très complexes et permettent aux programmeurs d’exprimer toute
sorte d’expressions. Commençons par des exemples simples :
<?php
$adresse = "13, rue Al Majd, Fès";
if(preg_match("/Fès/",$adresse)) //la fonction preg_match teste l’existence de la chaîne
"Fès" dans $adresse
echo "Vous êtes de la ville de Fès" ;
else
echo "Votre adresse ne contient pas le mot Fès" ;
Dans cet exemple, le motif est une simple chaîne de caractères. La fonction preg_match()
teste l’existence de cette sous chaîne (« Fès ») dans la chaîne $adresse.
<?php
$adresse = "13, rue Al Majd; Fès";
//Modifier toutes les occurrences de la sous-chaîne "Fès" dans $adresse par "Mekhnès"
$newAdresse = preg_replace("/Fès/","Mekhnès" ,$adresse) ;
echo "La nouvelle adresse est $newAdresse" ; // affiche "13, rue Al Majd , Mekhnès"
?>
Dans les exemples précédents, les motifs utilisés étaient des sous-chaînes de caractères. On
peut utiliser des modèles dans nos recherches . Dans ce qui suit, nous présentons quelques
manières possibles pour définir un motif :
145
Web Dynamique A. Zinedine
<?php
$adresse = "13, rue Al Majd, Fès";
/*Découper l’adresse en morceaux, le séparateur utilisé est " ," . Le résultat est stocké dans
le tableau $t : */
$t = preg_split("/,/",$adresse) ;
echo "Votre ville est " . $t[2] ; // affiche Fès
echo "<br /> Votre rue est " . $t[1] ; // affiche rue Al Majd
echo "<br /> Votre numéro est " . $t[0] ; // affiche 13
?>
Pour tester si une chaîne de caractères $ch contient au moins un chiffre, on peut écrire if
(preg_match([0123456789],$ch))…ou encore : if (preg_match([0-9],$ch))…
Maintenant pour tester si cette chaîne contient un caractère qui n’est pas un chiffre, on écrit
if (preg_match([^0123456789],$ch))…ou if (preg_match([^0-9],$ch))…
• {i}: le motif existe exactement i fois dans la chaîne. Pour tester si la chaîne $ch
contient exactement deux chiffres, on écrit : if (preg_match([0-9]{2},$ch))…
• {i,}: le motif existe au minimum i fois dans la chaîne. Pour tester si la chaîne $ch
contient au minimum deux chiffres, on écrit : if (preg_match([0-9]{2,},$ch))…
• {i,j}: le motif existe au minimum i fois et au maximum j fois dans la chaîne. Pour
tester si la chaîne $ch contient au moins 2 chiffres et plus 4 chiffres (elle peut
contenir des lettres), on écrit : if (preg_match([0-9]{2,4},$ch))…
• ? : ce symbole signifie que le caractère précédent apparaît au plus une fois.
• + : le caractère qui précède ce symbole doit apparaître une fois au minimum.
• * : le caractère qui précède ce symbole apparaît 0 ou plusieurs fois.
• . : le point remplace un caractère.
Exemple :
146
Web Dynamique A. Zinedine
<?php
$email = "info@usmba.ac.ma" ;
if(!preg_match("/@/",$email))
echo "Cette adresse n'est pas valide. Il ne contient pas le caractère @" ;
else
echo "Cette adresse contient le caractère @" ;
if(preg_match("/\.ma$/",$email))
echo "<br />Cette adresse se termine par .ma" ;
else
echo "<br />Cette adresse ne se termine pas par .ma" ;
// remplacer le caractère (.) par (point) pour éviter les spams par exemple
$email2 = preg_replace("/\./","(point)",$email);
echo "<br />Cette adresse sera affichée comme ça : $email2" ;
?>
11) Mail
La fonction mail() de PHP permet d’envoyer des emails à des destinataires. Pour utiliser
cette fonction, vous devez installer tout d’abord un serveur de messagerie électronique.
Vous devez aussi configurer PHP pour utiliser ce serveur de messagerie (pour cela, ouvrez le
fichier php.ini et dans la section « mail function », tapez le nom du serveur devant la
directive SMTP. La valeur par défaut est localhost. Donc si le serveur de messagerie est
installé sur la même machine que le serveur web, cette étape n’est pas nécessaire).
La forme la plus simple de mail() est mail($destinataire, $sujet, $message) comme dans
l’exemple suivant :
<?php
$destinataire = "lui@usmba.ac.ma.ac.ma" ;
$sujet = "Réunion" ;
$message = "Bonjour. La date de la réunion prévue est fixé pour mardi prochain." ;
?>
147
Web Dynamique A. Zinedine
Vous pouvez ajouter des entêtes à la fonction mail ; par exemple, si vous voulez envoyer des
copies à d’autres destinataires ou si vous voulez spécifier l’expéditeur du message ou pour
spécifier un email au quel retourne les réponses ou tout simplement pour indiquer le type
du contenu du message. Les entêtes s’écrivent en général sous la forme "entete : valeur\n".
Dans l’exemple suivant, on reprend le même message précédent et on lui ajoute des
informations dans l’entête :
<?php
$destinataire = "lui@usmba.ac.ma" ;
$sujet = "Réunion" ;
$message = "Bonjour. La date de la réunion prévue est fixé pour mardi prochain." ;
?>
Toutes les entêtes de la requête envoyé par le client sont transformées en variables dites
variables d’environnement et sont mise à la disposition du programmeur. En voici quelques-
unes :
148
Web Dynamique A. Zinedine
Nous n’avons donné ici que quelques exemples, pour voir d’autres variables
d’environnement ainsi que d’autres informations sur la configuration de votre serveur,
utilisez la fonction prédéfinie phpinfo() qui est destinée pour ceci :
<?php
phpinfo() ; // affiche des infos sur la configuration de PHP et de Apache
?>
Dans vos scripts, vous pouvez utiliser aussi des constantes prédéfinies par PHP. Ces
constantes sont parfois indispensables. Voilà quelques-unes :
Exemple : Dans cet exemple, nous voulons modifier l’entête de la réponse http envoyé au
client suite à une requête :
<?php
header("content-type: image/jpeg") ;
header("Date: ") . date("d/M/Y") ;
header("Last-Modified: ") . strftime("%c",getlastmod());
header("Location: photo.jpg");
?>
Note Importante : Tout envoi des entêtes doit être avant l’envoie du moindre contenu au
navigateur. Ainsi l’utilisation de echo ou print avant d’une utilisation de header() générera
une erreur. Même un simple espace ou retour à la ligne avant la balise <?php est non
autorisé (car un tel espace est équivalent à echo " " ; et un tel retour à la ligne est équivalent
à echo "\n" ;)
149
Web Dynamique A. Zinedine
Vous pouvez utiliser la fonction header() pour décrire le contenu de vos fichier et ainsi aider
le système de l’utilisateur à choisir le programme convenable pour les traiter. Dans
l’exemple suivant, la fonction header() informe le navigateur que le contenu de la page
s’ouvre avec Excel :
<?php
header("content-type: application/x-msexcel");
echo "Nom \t Prénom \t Age \n " ; // \t : tabulation ; \n : retour à la ligne
echo "Moujtahid \t Moujidd \t 21 \n " ;
echo "Omari \t Omar \t 22 \n " ;
echo "Abbassi \t Abbass \t 23 \n " ;
echo "Kaddouri \t Kaddour \t 25 \n " ;
echo "Jallouli \t Jalloul \t 24 \n " ;
?>
Comparez avec le résultat suivant : c’est le même fichier mais sans la ligne 2 (sans utiliser
header()).
14) Cookies
Les cookies sont des petits fichiers texte envoyés par le serveur en vue de les stocker sur le
disque dur du client. Ces fichiers contiennent principalement le nom d’une variable et sa
150
Web Dynamique A. Zinedine
Supposons par exemple que vous voulez offrir aux utilisateurs de votre page web la
possibilité de choisir leur couleur préférée comme couleur d’arrière-plan de la page. Alors,
pour cela vous pouvez demander à l’utilisateur de choisir sa couleur préférée. Vous utilisez
ensuite un cookie pour stocker cette couleur sur son disque dur. Au début de chaque
connexion, le client envoie ce cookie au serveur. Et ainsi la page et envoyé avec la couleur
choisie :
<?php
if (!isset($_COOKIE["couleur"]))
setCookie("couleur","yellow",time() + 30);
?>
<html>
<body bgcolor = "<?= $_COOKIE["couleur"]?>">
Bonjour
</body>
</html>
Comme vous pouvez remarquer dans cet exemple, on crée un cookie avec la fonction
setcookie(). Cette fonction exige deux arguments : le nom d’une variable (dans notre
exemple : couleur) et sa valeur (dans notre cas : yellow). Le troisième argument est
optionnel et sert à déterminer la date d’expiration du cookie. Ainsi, dans notre cas, le
cookie est détruit après 30 secondes. Vous pouvez aussi utiliser le tableau associatif
prédéfini (super global) nommée : $_COOKIE. Dans ce tableau sont stockées toutes les
variables de cookies. Pour accéder à une de ces variables, utilisez son nom comme clé. Dans
la deuxième ligne du script, on teste si la variable de cookie $couleur existe ou non. Dans le
cas où elle n’existe pas, (c’est le cas de la première visite d’un utilisateur), on crée le cookie,
c’est à dire, créer la variable $couleur avec la valeur « yellow », et on stocke le couple dans
un fichier sur l’ordinateur du visiteur. Le navigateur du client se charge d’envoyer ce couple
variable/valeur lors de toute prochaine visite.
Si la variable existe, ce qui veut dire que ce n’est pas la première visite de cet utilisateur (la
variable est envoyée par son navigateur), alors on affecte son contenu à l’attribut bgcolor de
la balise body.
Pour modifier la valeur stockée dans un cookie, utilisez toujours la fonction setcookie avec
la nouvelle valeur de la variable. Dans l’exemple précédent, si on veut modifier la couleur
stockée dans le cookie en bleu, on écrit tout simplement setCookie("couleur","blue");
N.B. : Les cookies sont envoyés dans l’entête http. Donc, tout comme la fonction header(),
aucun contenu ne doit être envoyé au client avant la fonction setCookie().
151
Web Dynamique A. Zinedine
15) Sessions
PHP offre un mécanisme pour sauvegarder des variables lors de navigation d’un utilisateur
entre les différentes pages d’un site. Ainsi, elles seront disponibles dans toutes les pages de
ce site. Ces variables sont dites variables de session. Elles sont accessibles dans toutes les
pages visitées par l’utilisateur. Elles sont « hyper globales » !.
<?php
$nom = "Omari" ;
?>
<html>
<body>
<a href = "script2.php">Lien vers le script 2 </a>
</body>
</html>
<html><body>
<?php
echo "Bonjour $nom" ;
?>
</body></html>
Créez ces deux fichiers. Ouvrez le premier fichier puis cliquez sur le lien. Vous allez
remarquer que la variable $nom n’est pas reconnu dans le deuxième script.
L’idée des sessions et de pouvoir garder la trace d’une variable. Par exemple, une fois passer
par le script 1, PHP sauvegarde la variable $nom en tant que variable de session et ainsi on
la retrouve dans toutes les pages visitées dans une même session.
On modifie le scripte 1 :
<?php
session_start() ;
$_SESION["nom"] = "Omari" ;
$_SESION["prenom"] = "Omar" ;
$age = 22 ;
?>
<html><body> <a href = "script2.php">Lien vers le script 2 </a> </body></html>
On modifie le script 2 :
152
Web Dynamique A. Zinedine
<?php session_start();?>
<html><body>
Bonjour <?php echo $_SESION["nom"] . " " . $_SESION["prenom"] ; ?> <br />
<a href = 'script3.php'>Lien vers le script 3 </a>
</body></html>
On ajoute le script 3 :
<?php session_start();?>
<html><body>
Bonjour
<?php
// le prénom ne sera pas reconnu, car il n’est plus dans la session (unset)
echo $_SESION["nom"] . " " . $_SESION["prenom"] ;
?>
<br />
<a href = 'script4.php'>Lien vers le script 4 </a>
</body></html>
<html><body>
Bonjour
<?php
// aucune variable de session ne sera plus reconnue, car la session est détruite
echo $_SESION["nom"] . " " . $_SESION["prenom"] ;
?>
<br />
</body></html>
Dans ces 4 scripts, nous avons utilisé les fonctions de session les plus utilisées : au début de
chaque script utilisant les sessions, utilisez session_start(). Il faut noter que les
informations de session sont envoyées dans les headers, ce qui veut dire qu’il ne faut rien
afficher avant l’utilisation de session_start() (exactement comme header() et setCookie()).
Pour enregistrer une variable en tant que variable de session utilisez le tableau super global
prédéfini : $_SESSION. C’est un tableau associatif dont les clés sont les noms des variables
153
Web Dynamique A. Zinedine
de session. Pour lui ajouter une nouvelle variable, il suffit de faire une affectation du genre :
$_SESSION["nomVariable"] = valeur (le nom de la variable est entre simple ou double
quottes et sans $). Pour supprimer une variable de la session on utilise la fonction unset :
unset ($_SESSION["nomVariable"]). Pour fermer la session on utilise session_destroy().
Ceci détruit toutes les variables enregistrées dans la session.
Pour tester l’effet, ouvrez le script 1 puis cliquez sur le lien pour passer au script 2, puis
cliquez pour passer au script 3 puis 4.
Le script 1 commence par ouvrir une session. Les deux variables $nom et $prenom sont
enregistrées dans la session mais pas la variable $age. C’est pour quoi dans le script 2 on
peut afficher les deux premières variables mais si on essaye d’afficher $age, on trouve
qu’elle est vide.
Dans le script 2, nous avons utilisé la fonction unset() pour supprimer de la session la
variable $prenom. Cette variable comme vous allez remarquer n’est plus disponible dans le
script 3 contrairement à la variable $nom.
Dans le script 3, nous avons détruit la session avec session_destroy(). Ainsi la session est
supprimée et aucune de ses variables n’est disponible. C’est pour cela, dans le script 4 on ne
voit que le mot Bonjour, les autres variables sont considérées vides. La fonction
session_start() dans ce script ouvre une nouvelle session. En effet, session_start() donne
accès à une session qui est déjà ouverte, s’il n’y en a pas, il ouvre une nouvelle session.
154
Web Dynamique A. Zinedine
Toute application web qui se respecte a souvent besoin d’échanger les données avec les
utilisateurs. Elle collecte les informations d’auprès des utilisateurs, elle les traite, puis génère
de nouvelles pages qui présentent aux utilisateurs le résultat voulu.
Du côté client, les utilisateurs ne se contentent pas de demander des pages au serveur, ils
peuvent envoyer des données via les formulaires.
La mission principale de PHP est de faire tous les traitements nécessaires du côté serveur, y
compris la réception des données envoyées par les utilisateurs et leur manipulation. Cette
manipulation fait appelle le plus souvent aux bases de données.
Dans ce chapitre, nous allons voir comment on peut envoyer des données du côté client au
côté serveur. Ceci passe à travers le passage de paramètres d’un script à un autre. La
question ici est comment peut-on récupérer dans un script une variable définie dans un
autre. Ensuite, nous allons voir comment interfacer notre application web avec le serveur de
bases de données.
<html>
<body>
</form>
</body>
</html>
155
Web Dynamique A. Zinedine
1. L’action du formulaire : c’est le nom du script qui sera exécuter quand le formulaire
sera soumis. C’est le script qui va se charger de recevoir les données et de faire le
traitement nécessaire. C’est dans ce script que nous allons mettre l’essentiel du code.
Il est à noter que l’action par défaut et la page en cours.
2. la méthode du formulaire : La soumission du formulaire est en fait une nouvelle
requête qui demande l’exécution d’un autre script. Cette nouvelle requête est en
général, soit de type GET soit de Type POST. La méthode de la requête précise au
serveur comment les données sont envoyées. Dans les requêtes GET, les données
sont envoyées dans l’entête de la requête comme partie de l’URL. Dans les requêtes
POST, les données sont stockées dans le corps de la requête. Dans les deux cas, les
données sont envoyées sous forme de paires variable/valeur. Le script qui recevra les
données doit savoir au préalable quelle est la méthode utilisée car la réception des
données de l’autre côté en dépend. La méthode par défaut est GET.
3. Les noms des différents champs : Les champs du formulaire sont le moyen à travers
lequel l’utilisateur va envoyer les données. Les noms de ces champs vont être
transformés en noms de variables.
4. Les valeurs des différents champs : La valeur des champs (saisies par l’utilisateur, ou
valeurs par défaut) seront affectées aux variables correspondantes.
5. Le bouton de type submit : C’est ce bouton qui déclenche l’envoi. Dès le clic dessus,
une nouvelle requête est lancée avec la méthode spécifiée. Cette requête demande le
script spécifié dans l’action du formulaire. Il est à noter qu’il est possible d’envoyer
le formulaire sans cliquer sur le bouton (en simulant le clique avec javascript par
exemple, par la méthode submit() de l’objet form).
Une fois que l’utilisateur clique sur le bouton Envoyer, le navigateur crée une nouvelle
requête avec la méthode POST qui demande d’exécuter le script Welcome.php, tout en
mettant dans le corps de la requête les paires de variable/valeur : N=Zinedine , P=Ahmed.
Voici le résultat que recevra l’utilisateur après l’envoi :
156
Web Dynamique A. Zinedine
Voyons maintenant à quoi ressemble le script Welcome.php qui va recevoir les données :
<?php
$leNom= $_POST["N"];
$lePrenom= $_POST["P"];
?>
<html>
<body>
</body>
</html>
157
Web Dynamique A. Zinedine
<html>
<body>
</body>
</html>
Ce script accède au tableau associative prédéfini super global $_POST. PHP stocke dans ce
tableau toutes les variables envoyées par la méthode POST et les rendent ainsi accessibles
aux autres scripts. Il est maintenant facile à deviner qu’un autre tableau associative
prédéfini super global qui s’appelle $_GET est consacré au variables envoyées par la
méthode GET.
La méthode GET est la méthode par défaut des navigateurs. Les requêtes GET sont faciles à
établir car leur corps est toujours vide. Toute l’information à circuler est encodée dans
l’entête. Si une requête de ce type veut passer des paramètres au script demandé alors elle
l’encode comme partie de l’URL. Par exemple, pour obtenir un résultat similaire au
paragraphe précédent, en pourrait passer le nom est le prénom dans une URL comme suit :
http://loclhost/welcome.php?N=zinedine&P=Ahmed
La partie de l’URL qui suit le point d’interrogation « ? » contient les données sous forme de
paires variable=valeur concaténées par « & » (Remarquez qu’il n’y a pas d’espace blanc).
Dans la pratique, ce mécanisme est mis en œuvre en créant des liens hypertextes qui
pointent vers des URL comme la précédente. Examinez l’exemple suivant :
158
Web Dynamique A. Zinedine
<html>
<body>
<ol>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
</ol>
</body>
</html>
159
Web Dynamique A. Zinedine
Quand un utilisateur clique sur un étudiant particulier, alors le navigateur lance une
nouvelle requête GET pour demander l’exécution du script welcome2.php en lui passant
deux variable N et P avec les valeurs correspondante à cet étudiant particulier :
Voilà à quoi ressemble le code du script Welcome2.php. La seule différence avec le script
welcome.php est l’utilisation du tableau super global $_GET au lieu de $_POST :
<html>
<body>
</body>
</html>
160
Web Dynamique A. Zinedine
Dans la pratique on ne demande pas aux utilisateurs leurs informations, seulement pour
leur dire bonjour. Dans la pratique, toute application qui se respecte gère un ensemble de
données qu’elle stocke dans une base de données. Les utilisateurs de l’application accèdent
alors via l’interface web et peuvent insérer de nouvelles données ou modifier, supprimer des
données existantes ou tout simplement chercher et afficher les informations stockées.
Les bases de données sont gérer d’habitude par des logiciels tiers (les SGBD). PHP dispose
de toutes les APIs nécessaires pour interfacer votre application avec la plupart des SGBD
connus. Dans ce cours nous allons utiliser le SGBD MySQL le plus répondu dans le domaine
des applications PHP. L’utilisation de tout autre produit est presque immédiate.
Pour cela, nous allons utiliser l’outil PhpMyAdmin. Dans la section Module du tableau de
bord de EasyPHP Devserver, cliquez sur Open pour lancer PhpMyAdmin :
PhpMyAdmin est un outil très efficace. Son interface web est très intuitive :
161
Web Dynamique A. Zinedine
Pour créer une nouvelle base de données, il suffit de cliquer sur le lien « Nouvelle base de
données » et entrer un nom dans le champ consacré , puis cliquer sur Créer. Les bases de
données déjà disponibles apparaissent dans l’arborescence dans le panneau de gauche. Pour
supprimer une base de données, il suffit de cocher sa case à cocher puis cliquer sur le lien
« Supprimer ».
Pour entrer dans une base de données spécifique, cliquez sur son nom dans le panneau de
gauche. Ceci va vous donner l’accès à toutes les commandes que vous pouvez faire dans
cette base de données. Par exemple y créer des tables et manipuler les données.
162
Web Dynamique A. Zinedine
Comme vous pouvez le remarquez, sous l’arborescence de la base de données créée, figurent
toutes les tables déjà créée, et un bouton pour créer d’autres. Des commandes pour gérer les
tables existantes (manipuler les données, modifier la structure ou supprimer carrément la
table) sont disponibles. Pour créer une nouvelle table, donnez son nom et préciser le nombre
de champ, puis cliquez sur exécuter pour afficher l’étape suivante dans laquelle vous
préciser les caractéristiques de chaque champs.
Une fois la table est créée vous pouvez modifier sa structure à tout moment. Vous pouvez
aussi y insérer directement des enregistrements et les manipuler à votre guise. Mais, dans la
pratique, la manipulation des données et une tâche quotidienne destinée aux utilisateurs
163
Web Dynamique A. Zinedine
finaux et qui est gérée normalement à travers votre application PHP. L’objectif du reste du
cours est de vous monter comment vous pouvez le faire.
Nous allons travailler avec PDO. Pour cela , vérifiez que la bibliothèque php_pdo.dll est
installée (ce qui est le cas généralement dans les nouvelles versions). Dans le fichier de
configuration de PHP php.ini, Vous devez activer (dé-commenter) la ligne qui correspond à
l’SGBD que vous voulez utiliser (par exemple : php_pdo_mysql.dll pour MySQL) :
<?php
164
Web Dynamique A. Zinedine
$user = 'root';
$password = 'motDePasse';
$db = 'mysql:host=localhost:3307;dbname=SMI';
try {
?>
Dans cet exemple, le script utilisera le login « root » et le mot de passe « motDePasse » pour
se connecter à MySQL qui écoute sur le port 3307 sur le serveur localhost. La base de
données voulue est nommée SMI. Si tout se passe bien le message « Connexion bien
établie » est affiché. Sinon, une exception est levée et le message de l’exception est affiché.
<?php
///////////////////////////
////////////////////////
$user = 'root';
$password = '';
$db = 'mysql:host=localhost;dbname=SMI';
try {
165
Web Dynamique A. Zinedine
///////////////////////////
//Exécution de la requête
////////////////////////
$cn->exec($Rq);
?>
La première partie du script est déjà vue. Il s’agit de créer une connexion à la base de
données (on la stocke dans l’objet $cn). La deuxième partie appelle la méthode exec de
l’objet $cn. Cette méthode accepte en paramètre une chaine de caractère qui n’est rien
d’autre qu’une requête SQL. PHP va passer cette requête à MySQL qui connait parfaitement
comment la traiter.
Pour modifier ou supprimer un étudiant, rien à modifier dans le script à part la requête
SQL : on remplace l’instruction insert par un update ou delete.
Par exemple, le script suivant corrige le prénom de l’étudiant 'E1' , le nouveau prénom est
'Moujidd' :
<?php
166
Web Dynamique A. Zinedine
///////////////////////////
////////////////////////
$user = 'root';
$password = '';
$db = 'mysql:host=localhost;dbname=SMI';
try {
///////////////////////////
//Exécution de la requête
////////////////////////
$cn->exec($Rq);
?>
167
Web Dynamique A. Zinedine
<?php
///////////////////////////
////////////////////////
$user = 'root';
$password = '';
$db = 'mysql:host=localhost;dbname=SMI';
try {
///////////////////////////
//Exécution de la requête
////////////////////////
$cn->exec($Rq);
?>
168
Web Dynamique A. Zinedine
<html>
<body>
<h1>Ajouter un étudiant:</h1>
<pre>
169
Web Dynamique A. Zinedine
</select>
</pre>
</form>
</body>
</html>
Quand l’utilisateur clique sur le bouton Envoyer, le formulaire est soumis par la méthode
POST à un script nommé insert.php qui va se charger d’insérer les données dans la table
Etudiant :
<?php
///////////////////////////
$code= $_POST["C"] ;
$nom= $_POST["N"] ;
$prenom=$_POST["P"] ;
$filiere= $_POST["F"] ;
///////////////////////////
////////////////////////
170
Web Dynamique A. Zinedine
$user = 'root';
$password = '';
$db = 'mysql:host=localhost;dbname=SMI';
try {
///////////////////////////
//Exécution de la requête
////////////////////////
$cn->exec($Rq);
?>
Ce code marche parfaitement, mais pour des raisons de sécurité, il est recommandé de
préparer les requêtes SQL avant de les exécuter. Ceci consiste à changer notre code comme
suit :
///////////////////////////
171
Web Dynamique A. Zinedine
//Exécution de la requête
////////////////////////
$Rq->execute([$code,$nom,$prenom,$filiere]);
Dans ce code, en passe à la méthode prepare de l’objet $cn la requête SQL, mais sans les
valeurs réelles : juste des points d’interrogation qui jouent le rôle de « placeholder »
générique. PHP passe cette requête à MySQL pour la compiler. Les valeurs réelle vont être
passé séparément dans un tableau par la méthode execute de l’objet $Rq. Cette façon
d’exécution des requêtes augmente énormément la sécurité en éliminant les attaques par
injections SQL largement connues. Elle augmente aussi les performances du SGBD surtout
pour les requêtes répétitives : le SGBD compile une seule fois pour toutes et réutilise le
résultat tant que nécessaires.
Supposons que nous voulons afficher tous les étudiants de la filière 'SMI', sous forme d’un
tableau HTML comme le montre la capture d’écran suivante :
172
Web Dynamique A. Zinedine
<?php
///////////////////////////
////////////////////////
$user = 'root';
$password = '';
$db = 'mysql:host=localhost;dbname=SMI';
try {
173
Web Dynamique A. Zinedine
///////////////////////////
//Exécution de la requête
////////////////////////
$resultat= $cn->query($Rq);
///////////////////////////
//affichage du résultat
////////////////////////
?>
<html>
<body>
<tr><th>Code</th><th>Nom</th><th> Prénom</th><th>Filière</th></tr>
<tr>
174
Web Dynamique A. Zinedine
</tr>
<?php } ?>
</table>
</div>
</body>
</html>
Dans cet exemple, le résultat de la requête est stocké dans la variable $résultat. C’est un
tableau qui contient généralement plusieurs lignes (un étudiant par ligne). La boucle
foreach permet de parcourir ce tableau en prenant une ligne à la fois en la mettant dans la
variable temporaire $row. Cette variable est un tableau associatif qui contient l’étudiant en
cours. Les clés de ce tableau sont les noms des camps de la table Etudiant. Le reste n’est rien
que du HTML pour formater la sortie.
Nous allons améliorer cet exemple en ajoutant devant chaque étudiant des commandes pour
le manipuler. Le résultat attendu ressemble à ceci :
175
Web Dynamique A. Zinedine
Pour mettre ceci en œuvre, nous auront besoin de deux scripts Modifier.php et
Supprimer.php qui attendent le code d’un étudiant par la méthode GET et font l’action
indiquée. Par exemple, pour supprimer un étudiant, il suffit de cliquer sur le lien Supprimer
de la ligne correspondante. Ce lien va exécuter le script supprimer.php en lui passant le code
de l’étudiant à supprimer. Le lien à générer pour supprimer l’étudiant E5 doit être
finalement comme suit :
Ces liens doivent bien sûr se générer automatiquement lors de l’affichage de la liste. Le code
suivant montre les modifications apportées à l’affichage précédent pour afficher les liens
Modifier et Supprimer :
<tr>
176
Web Dynamique A. Zinedine
</tr>
<?php } ?>
….
….
<?php
///////////////////////////
////////////////////////
$user = 'root';
$password = '';
$db = 'mysql:host=localhost;dbname=SMI';
try {
///////////////////////////
177
Web Dynamique A. Zinedine
//Exécution de la requête
////////////////////////
$code= $_GET["Code"] ;
?>
//Exécution de la requête
////////////////////////
$code= $_GET["Code"] ;
$Rq->execute($code])
Pour récapituler, nous pouvons mettre toute la couche d’accès aux données de notre
application dans un seul fichier « model.php » sous forme de fonctions qui fournissent les
actions de base nécessaires pour toute application qui gère une base de données, à savoir :
se connecter à la base, ajouter un nouveau enregistrement, modifier, supprimer et chercher
un enregistrement particulier et enfin afficher la liste de tous les enregistrements :
178
Web Dynamique A. Zinedine
<?php
function ouvrirConnexion(){
$user = 'root';
$password = 'motDePasse';
$db = 'mysql:host=localhost;dbname=SMI';
try {
return $cn;
function AjouterEtudiant($t) {
$cn = ouvrirConnexion();
$Rq->execute([$t["C"],$t["N"],$t["P"]]);
function ModifierEtudiant($t) {
$cn = ouvrirConnexion();
where Code =?
179
Web Dynamique A. Zinedine
");
$Rq->execute([$t["C"],$t["N"],$t["P"],$t['oldC']]);
function SupprimerEtudiant($c) {
$cn = ouvrirConnexion();
$Rq->execute([$t["C"]]);
function AfficherEtudiant($c) {
$cn = ouvrirConnexion();
function listeEtudiants() {
180