Pgmation Internet ISP

I.
OBJECTIFS
1. Donner la possibilité ou l’occasion aux étudiants d’avoir
l’idée générale sur le webmastering et webdesign.
2. Exposer comment passer de l’analyse à la conception dans
la programmation Web.
3. Faire la programmation orientée objet avec les langages
web.
4. Etre capable de développer des programmes en fusionnant
plusieurs langages web et en utilisant de bonnes pratiques.
5. Initier les étudiants à travailler en équipe.
II. PREREQUIS
Pour bien assimiler le cours l’étudiant est censé déjà programmé
au moins dans un langage classique et d’avoir une connaissance
sur les cours de Méthode d’analyse Informatique et Base de
données.
III. CONTENU DU COURS :

 Chapitre I : Notion sur les langages des balises.
 Chapitre II : Aperçu sur le langage JavaScript.
 Chapitre III : La base de données avec MySQL+ PHP.
 Chapitre IV : Les applications Web avec JAVA.
Page 1 sur 230

Par Ir kam‟s KANYINDA Cours de programmation Internet en L2 Informatique et
Math-Info / ISP Mbanza Ngungu
[2020 - 2021]
CHAPITRE I : GENERALITES SUR LES LANGAGES DES BALISES.
I.1. EXTENSIBLE HYPER TEXT MARKUP LANGUAGE (XHTML).
a) L‟éditeur.
Une question que vous devez certainement vous être déjà posée,
c'est : "De quel logiciel je vais avoir besoin pour créer un
programme sous l’environnement web ?" En fait, des logiciels qui
permettent de programmer sous l’environnement web, il y en a
des tonnes. Mais pourquoi aller chercher un logiciel payant et
compliqué, alors que vous avez déjà tout ce qu'il faut chez vous ?
Eh oui, accrochez-vous bien parce qu’il s'agit d’Adobe

Dreamweaver CS5 ou encore de Macromedia!
Dans l’image ci-haute, on a la rubrique « Créer » avec comme

sous menu les langages que nous allons décortiquer dans la suite.
Mais pour l’instant, on est dans le premier sous menu nommé HTML
qui veut dire HyperText Markup Language et pour aller plus loin,
nous optons sa nouvelle version qui est XHTML avec comme
abréviation eXtensible HyperText Markup Language.
Page 2 sur 230

[2020 - 2021]
b) Le navigateur/serveur.
Voici le chemin pour la visualisation de la page Html créée à partir

du Dreamweaver au navigateur (Firefox, internet explorer, opéra,
Google chrome, safari, etc…). Icones des quelques
navigateurs les plus utilisés:
Microsoft Edge Internet Explorer Google Chrome Mozilla Firefox Opera
Pour cela, nous devons d’abord créer un nouveau dossier

dans le disque système (disque C par défaut) dans le dossier
wamp plus précisément dans le dossier www (world wide web) qui
s’y trouve. Tous nos pages (html, css, JavaScript, PHP,…) doivent
être enregistrés dans ce dossier créé dans le disque système, et
pour voir la page à partir du navigateur nous devons ouvrir le
wampserver dans lequel son icône dans la barre de démarrage
sous forme d’un demi-cercle ou
Lorsque vous installez WampServer, un répertoire "www"

est automatiquement créé (typiquement c:\wamp\www). Créez
un sous répertoire pour votre projet et mettez vos fichiers dedans.
Cliquez sur le lien "Localhost" du menu de WampServer ou ouvrez
votre navigateur préféré, allez à l'adresse http://localhost.
Nous allons avoir l’affichage ci-dessous:
Page 3 sur 230

[2020 - 2021]
I.1.1. STRUCTURE D‟UNE PAGE XHTML.
Une page HTML ou XHTML s’écrit de la façon suivante :
• Sur la première ligne, la balise <!DOCTYPE ...> indique la version

de (X) HTML utilisée.
• Le reste de la page est encadré par des balises <html> et
</html> qui signifient début et fin de HTML.
• Entre ces deux balises se trouvent deux parties : l’en-tête de la
page entre <head> et </head> et le contenu (le corps) de la
page entre <body> et </body>.
Page 4 sur 230

[2020 - 2021]
1) Structure générale d‟une page XHTML
<!DOCTYPE ... >

<html>
<head>
<Title>Titre affiché dans la barre du navigateur </title>
...
</head>
<body>...Contenu de la page... </body>
</html>
La balise <!DOCTYPE ...> étant longue et un peu barbare, elle n’est

pas écrite ici en entier. Ne vous inquiétez pas pour autant : un
simple copier-coller nous fournira le bon DOCTYPE et nous y
reviendrons plus loin. Notez que cette balise est la seule à s’écrire
en majuscules, toutes les autres sont en minuscules.
Délimité par les balises <head> et </head>, l’en-tête

donne des informations qui ne seront pas visibles dans la page
web, sauf la balise <title> qui fournit le titre de la page affiché
dans la barre de titre, tout en haut de la fenêtre du navigateur.
Les autres balises de l’en-tête indiquent la langue et le codage
utilisés, les styles (feuilles de style CSS), etc. Nous les détaillerons
plus loin également.
Tout le contenu visible dans le navigateur, le texte comme

les liens vers les images, se trouve dans le corps de la page entre
les balises <body> et </body>.
1.1.2. LES BALISES.
Les balises sont des éléments de base du HTML. Ils permettent la

structuration des documents avec insertion des titres et des
images, le réglage de la taille de la police, etc. Ces balises sont
toujours exprimées sous la forme d'un mot clé, encadré par les
caractères "<" et ">". Exemple : <BALISE>. Pour la plupart des
balises, il existe une balise de fermeture associée, reprenant le
Page 5 sur 230
[2020 - 2021]
même nom, mais précédé du caractère "/". Exemple : </BALISE>.
La commande spécifiée s'applique donc uniquement au texte
situé entre le couple de balises ainsi formé.
Exemple:
<HTML>
...
</HTML>
Notons qu’une balise peut indifféremment être indiquée en
minuscules ou en majuscules et le formatage "manuel" du
document (espaces, sauts de lignes,...) est toujours ignoré.
I.1.3. LES ATTRIBUTS
Un attribut est un élément, présent au sein de la balise ouvrante,

permettant de définir des propriétés supplémentaires. Les attributs
se présentent la plupart du temps comme une paire clé=valeur,
mais certains attributs ne sont parfois définis que par la clé.
Voici un exemple d'attribut pour la balise <p> (balise définissant un

paragraphe), permettant de spécifier que le texte doit être aligné
sur la droite : <p align="right">Exemple de paragraphe</p>
Chaque balise peut comporter un ou plusieurs attributs, chacun
pouvant avoir aucune, une ou plusieurs valeurs.
I.1.4. TYPES DE BALISES
Il existe deux sortes des balises :
 Les balises de structure ;

 Les balises de style.
I.1.4.1. LES BALISES DE STRUCTURE.

Comme le nom l’indique, les balises de structure permettent de
structurer le document c'est-à-dire la sélection de la police, la
présentation des paragraphes, le réglage de la taille de la
police,…
Page 6 sur 230

[2020 - 2021]
Parmi les balises de structures nous pouvons citer :
 <Hn> pour le réglage de la taille des caractères ; où n=
1,2 ,3….6 ;
 <P> pour le passage à la ligne suivante ;
 <BR> ou <BR/> pour passer à la ligne suivante ;
 <PRE> pour conserver le formatage du texte encadré ;
Les attributs suivants peuvent être appliqués aux balises :
 Align : pour l’alignement du texte. Il peut avoir la valeur right,
left ou center ;
 Width : pour régler la largeur. Ses valeurs sont soit des entiers
soit des pourcentages ;
 Size : pour régler la taille. Il a pour valeurs des chiffres (ou
nombres).
N.B : Il est possible d’insérer des éléments qui ne seront pas affichés
sur la page, en utilisant des balises de commentaires. Ces
éléments servent juste de référence au concepteur.
Exemple : .
I.1.4.2. LES BALISES DE STYLE
Les balises de style modifient la typographie du texte. Elles

peuvent être imbriquées dans d'autres balises de style de la même
façon qu'on le ferait avec un traitement de texte. Voici une liste
de balises de style reconnues par la plupart des navigateurs :
 Les styles logiques sont les suivantes :

<EM> texte </EM> met le texte généralement en italique.
<STRONG> texte </STRONG> met le texte généralement en gras.
<CODE> texte </CODE> pour l'utilisation d'une police à chasse fixe
(encombrement des Caractères constant).
<SAMP> caractères </SAMP> séquence de caractères littéraux.
<KBD> saisie </KBD> pour mettre en évidence une saisie
d'utilisateur.
<VAR> variable </VAR> pour indiquer le nom d'une variable.
Page 7 sur 230
[2020 - 2021]
<DFN> définition </DFN> pour mettre en évidence la 1ère
utilisation d'un terme.
<CITE> citation </CITE> pour mettre en évidence une citation
(généralement en italique).
<ADDRESS> adresse </ADDRESS> cette commande n'est pas
utilisée pour une adresse postale. Cette commande est
généralement utilisée pour indiquer l'auteur d'un document ainsi
que le moyen de le contacter ou bien elle donne l'adresse du
document. Elle est souvent placée en fin de document.
<BLOCKQUOTE> texte </BLOCKQUOTE> cette commande
constitue avec le texte un texte avec retrait à gauche et à droite.
<BLINK> texte </BLINK> pour faire clignoter le texte.
<STRIKE> texte barré </STRIKE> cette commande permet de barrer
du texte.
<LISTING> code informatique </LISTING> cette commande permet
d'afficher du code informatique
<BIG> texte </BIG> cette commande permet d'écrire un texte en
plus gros caractères que les caractères en cours.
<SMALL> texte </SMALL> cette commande permet d'écrire un
texte en plus petits caractères que les caractères en cours.
<SUP> texte </SUP> cette commande permet d'écrire un texte en
exposant.
<SUB> texte </SUB> cette commande permet d'écrire un texte en
indice.
 Les styles physiques sont les suivantes :

<I> texte </I> met le texte en italique.
<B> texte </B> met le texte en gras.
<TT> texte </TT> pour l'utilisation d'une police à chasse fixe
(encombrement des caractères constant).
<U> texte </U> souligne le texte.
<S> texte </S> barre le texte.
<SUB> texte </SUB> indice.
<SUP> texte </SUP> exposant.
Page 8 sur 230
[2020 - 2021]
I.1.5. STRUCTURE D‟UNE PAGE HTML
Un document HTML commence par la balise <HTML> et finit par la

balise </HTML>. Il contient également un en-tête décrivant le titre
de la page, puis un corps dans lequel se trouve le contenu de la
page. L'en-tête est délimité par les balises <HEAD> et </HEAD>. Le
corps est délimité par les balises <BODY> et </BODY>.
Dans l'en-tête, on ne met généralement qu'une seule information,

le titre du document qui sera affiché en haut de la fenêtre du
navigateur et qui apparaît dans les bookmarks (listes d'URL gérées
par un navigateur, une sorte d'annuaire). Ce titre est indiqué entre
les balises <TITLE> et </TITLE>.
Il est conseillé d’indiquer juste au début de la page, la version du

HTML utilisée. Ceci permet de spécifier le standard utilisé pour le
codage de la page en HTML. Cette indication se fait de la
manière suivante : <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
4.0//EN">. Cette dernière n’est pas obligatoire car elle est la seule
possible. Son absence ne préjudiciera pas la page.
En résumé, la structure générale d'une page HTML est la suivante.
<HTML>
<HEAD>
<TITLE>Titre de la page</TITLE>
</HEAD>
<BODY>
Contenu de la page
</BODY>
</HTML>
Page 9 sur 230

[2020 - 2021]
I.1.6. LISTE D‟ELEMENTS
Une liste est un paragraphe structuré contenant une suite

d'articles. Le langage HTML définit trois types de listes :
 La liste ordonnée ;
 La liste non ordonnée ;
 La liste de définition.
I.1.6.1. LES LISTES ORDONNEES
Elles se présentent sous la forme suivante :

<ol>
<li> Elément 1 </li>
</ol>
A l’affichage on aura :
Élément 1
Élément 2
Élément 3
 La liste ordonnée est encadrée par les balises <ol> et </ol> ;
 Les éléments de la liste sont encadrés les balises<li> et </li> ;
 La balise <li> peut avoir un attribut nommé« type » ;
 L’attribut ‘type’ peut avoir pour valeurs :
o 1 : numérotation chiffrée (par défaut) ;
o A : numérotation en lettres majuscules ;
o a : numérotation en lettres minuscules ;
o I : numérotation en chiffres romains majuscules (I, II, III, IV ...) ;
o i : numérotation en chiffres romains minuscules.
Page 10 sur 230

[2020 - 2021]
I.1.6.2. LES LISTES NON ORDONNEES

<ul>
</ul>
Elément 1
Elément 2
Elément 3
 La liste non ordonnée est encadrée par les balises <ul> et </ul> ;
 Les éléments de la liste sont encadrés les balises<li> et </li> ;
 La balise <li> peut avoir un attribut nommé« type » ;
 L’attribut type peut avoir pour valeurs :
o Circle : puce circulaire ;
o Square : puce carrée ;
o Disc : puce en disque.
I.1.6.3. LES LISTES DE DEFINITION

<dl>
<dt> Terme1 </dt>
<dd> Définition du Terme1 </dd>
<dt> Terme2 </dt>
<dt> Terme3 </dt>
</dl>
Terme1
Page 11 sur 230
[2020 - 2021]
Définition du Terme1 ;
Terme2
Définition du Terme2 ;
Terme3
Définition du Terme3.
 La liste de définition est encadrée par les balises <dl> et </dl> ;

 Les éléments de la liste sont encadrés les balises <dt> et </dt> ;
 Les définitions des éléments de la liste sont encadrés les balises
<dd> et </dd>
Hormis l’attribut TYPE, les listes peuvent aussi avoir les attributs
suivants :
o COMPACT : pour resserrer l'interligne ;
o PLAIN : pour supprimer les puces ;
o SEQNUM : pour définir le premier numéro ;
o START : pour déterminer le premier numéro.
o CONTINUE : repart du numéro où il s'était arrêté à la liste
précédente.
I.1.7. LES TABLEAUX
Les tableaux sont des suites de lignes permettant de présenter des

informations d’une manière mieux structurée qu’avec les listes.
Une cellule d’un tableau peut contenir un texte, des listes, des
images, des liens hypertextes ou encore des éléments de
formulaire.
Généralement, les tableaux se présentent sous la forme suivante :
<TABLE >
<CAPTION> Titre du tableau </CAPTION>
<TR>
<TH> Titre 1 </TH>
<TH> Titre 2 </TH>
Page 12 sur 230
[2020 - 2021]
<TH> Titre 3 </TH>
<TH> Titre 4 </TH>
</TR>
<TR>
<TH> Titre 5 </TH>
<TD> Donnée 1 </TD>
</TR>
</TABLE>
On aura le résultat suivant:
Titre du tableau
Titre 1 Titre 2 Titre 3 Titre 4
Titre5 Donnée 1 Donnée 2 Donnée 3
 Le tableau est encadré par les balises <TABLE> et </TABLE>.

 La balise <TABLE> peut avoir les attributs suivants :
o BORDER : pour régler la taille de la bordure. La valeur qui lui est
attribuée est un entier positif.
o BGCOLOR : permet de spécifier la couleur de fond d’un
tableau ;
o WIDTH : permet de définir la largeur qu’occupera le tableau
dans la fenêtre du browser. Il est exprimé en pourcentage ;
o CELLPADDING : permet de définir l’espacement entre le
contenu
Des cellules et son encadrement. Sa valeur est un entier positif.
o CELLSPACING : permet de régler l’épaisseur de la grille intérieure
du tableau. Sa valeur est aussi un entier positif.
o FLOAT : Spécifie la position du texte qui suivra la balise </TABLE>.
On peut lui attribuer la valeur right ou left ;
o COLS : pour spécifier le nombre de colonnes. Sa valeur est aussi
un entier positif ;
Page 13 sur 230

[2020 - 2021]
o FRAME : pour le contrôle les éléments individuels d'encadrement
du tableau. Ses valeurs possibles sont NONE (aucun), TOP (au-
dessus), BOTTOM (en bas), TOPBOT (tout en haut), SIDES (sur les
côtés) et ALL (tous) ;
o RULES : permet le contrôle les éléments de la grille des cellules.
Ses valeurs sont NONE (aucun), BASIC (basique), ROWS (ligne),
COLS (colonne), ALL (tous) ;
 Le titre du tableau est compris entre les balises <CAPTION> et

</CAPTION> ;
 La balise <CAPTION> peut avoir l’attribut ALIGN. Ce dernier
permet de définir la position du titre du tableau. Ses valeurs sont
TOP (au-dessus) et BOTTOM (en dessous) ;
 Chaque ligne du tableau est encadré par les balises <TR> et
</TR> (Table Row = ligne du tableau) ;
 La balise <TR> peut avoir les attributs suivants :
o VALIGN : pour obtenir un alignement du texte dans le sens
vertical de la cellule. Sa valeur sont soit TOP (au-dessus) ;
MIDDLE (au milieu) ; BOTTOM (en dessous) ;
o ALIGN : pour obtenir un alignement du texte dans le sens
horizontal de la cellule. Sa valeur est soit CENTER (centre) ; LEFT
(gauche) ; RIGHT (droite) ; JUSTIFY (justifié) ;
o BGCOLOR : permet de spécifier la couleur de fond d’une
ligne du tableau.
 Les cellules d’en-tête d’un tableau sont encadrées par les

balises<TH> et </TH> (Table Header = En-tête du tableau) ;
 La balise <TH> peut avoir les attributs suivants :
o COLSPAN : permet de définir une cellule dont la largeur est un

multiple de la colonne de base ;
o ROWSPAN : permet de définir une cellule dont la hauteur est un
multiple de la ligne de base ;
Page 14 sur 230

[2020 - 2021]
o NOWRAP : pour interdire au le retour à la ligne. Tout le texte sera
alors inscrit sur une ligne ;
o VALIGN : idem que la balise <TR> ;
o ALIGN : idem que la balise < TR>.
 Chaque cellule du tableau est encadrée par les balises <TD> et

</TD> (Table Data = Donnée du tableau) ;
 La balise <TD> peut avoir les attributs suivants :
o COLSPAN : idem que la balise <TH>;
o ROWSPAN : idem que la balise <TH>;
o NOWRAP : idem que la balise <TH>;
o VALIGN : idem que la balise <TR> ;
o ALIGN : idem que la balise <TR> ;
o BGCOLOR : permet de spécifier la couleur de fond d’une
cellule du tableau.
 Quand un attribut d’alignement est appliqué à la balise <TR>, il

s’applique sur toutes pour toutes les cellules de cette ligne ; à
moins de définir un autre type d’alignement pour une balise <TD>
de la ligne.
I.1.8. LES IMAGES
L’utilisation des images dans un site web est importante car elle
permet de rendre celui-ci plus attractif. Il faut cependant éviter
l’usage excessif des images, au risque d’augmenter le temps de
chargement du site et de nuire à sa lisibilité.
En HTML, les images sont insérées par la balise <IMG>. Les attributs
de cette balise sont suivants :
 SRC : permet déterminer l’url de l’image. Cet attribut est
obligatoire ;
 ALT : permet de définir un texte alternatif qui s’affichera au cas
où l'image spécifiée ne s'afficherait pas. Sa valeur un est une
chaîne des caractères;
Page 15 sur 230

[2020 - 2021]
 TITLE : pour définir un texte qui s’affichera quand on survole
l’image. Sa valeur un est une chaîne des caractères ;
 ALIGN : pour définir l’alignement de l'image. Il peut avoir la
valeur bottom (au-dessous), center (centre), left (gauche), middle
(milieu), top (au-dessus), ou right (droite) ;
 HEIGHT : pour spécifier la hauteur de l'image. Il est exprimé en
pixels ou en pourcentage ;
 WIDTH : pour spécifier la largeur de l'image. Il est exprimé en
pixels ou en pourcentage ;
 LOWSRC : permet de définir une image alternative
(généralement plus petite), affichée le temps que la vraie image
soit chargée par le navigateur. Sa valeur est un url ;
 NAME : Permet de définir un nom pour l'image. Cet attribut sert
à la gestion des images en JavaScript ;
 LONGDESC : renvoie à un url donnant la description de
l'image ;
 HSPACE : pour régler l'ajustement entre l'image et le texte
adjacent. Sa valeur est un entier positif ;
 VSPACE : défini l'ajustement entre l'image et le texte. Il est
exprimé en pixels ;
 BORDER : pour définir la taille de la bordure de l’image. Il est
exprimé en pixels.
Dans l’insertion des images il faut également spécifier l’extension

de cette image. Cette extension est spécifié juste après le nom de
l’image dans la l’attribut SRC.
Une image peut avoir les extensions suivantes :
 JPEG (.JPG) : avec cette extension, les images ayant un grand

nombre de couleurs seront bien compressées, ce qui permettra
donc d’avoir un temps de chargement moindre ;
Page 16 sur 230

[2020 - 2021]
 PNG : elle permet d'avoir des images qui s'affichent
progressivement avec une profondeur de couleurs de 24 bits et
des images dont on définit une couleur comme transparente.
 GIF : les images ayant cette extension ont presque les mêmes
caractéristiques que les images PNG, sauf que l’extension GIF
n’est limitée qu’à 256 couleurs maximum et que ce format n'est
pas totalement libre.
I.1.9. LES LIENS HYPERTEXTES
Les liens hypertextes sont également appelés ANCRAGE.

Ce sont des éléments de la page web permettant de basculer
vers un autre endroit juste en cliquant dessus.
En cliquant sur un ancrage on peut aller vers un autre endroit du
document ou vers un fichier HTML situé à un emplacement
différent sur la machine qui héberge la page ou encore vers une
autre machine.
Une ancre de départ est une zone active sur laquelle,

l’utilisateur va cliquer pour faire apparaître une nouvelle page ;
tandis qu’une ancre d’arrivée est une zone inactive spécifiant le
point d’arrivée d’un lien.
On parle de lien externe quand le clic dessus amène vers une
autre page tandis le lien local est celui rendant vers fichier situé sur
le même ordinateur.
Pour créer des liens on se sert uniquement de la paire <A> et </A>.
La balise <A> peut avoir les attributs suivants :
o HREF : pour spécifier l’endroit où l’on veut se rendre ;

o TARGET : pour préciser si l’on veut ouvrir un nouvelle fenêtre ou
rester sur la même fenêtre en cliquant sur le lien. Ses valeurs sont
respectivement _BLANK et _TOP ;
o ALINK : pour spécifier la couleur du lien actif ;
o VLINK : pour spécifier la couleur du lien déjà utilisé.
Page 17 sur 230
[2020 - 2021]
I.1.10. LES FORMULAIRES
Les formulaires sont des moyens permettant aux auteurs des

pages web de naviguer avec les différents lecteurs. Dans les
formulaires on réserve des zones dans lesquels l’utilisateur va
introduire ses données. Chacune de ces zones est identifiée par
un nom spécifique. Les données transmises dans ce formulaire sont
envoyées à l’adresse spécifiée l’utilisateur appui sur le bouton
d’envoi. Il convient de noter que le formulaire utilise les tableaux
pour sa présentation.
 Le formulaire est encadré par les balises <FORM> et </FORM>

 La balise <FORM> peut contenir les attributs suivants :
o METHOD : indique la forme sous laquelle seront envoyées les

réponses. Ses valeurs sont POST (envoi de données stockées
dans le corps de la requête) ou GET (envoi des données codées
dans l'URL, et séparées de l'adresse du script par un point
d'interrogation) ;
o ACTION : c’est ici qu’est précisé l’adresse où seront envoyées les
données du formulaire (script CGI ou adresse email
(mailto:adresse.email@machine));
o ENCTYPE : permet de spécifier le codage des données transmis.
Cet attribut est facultatif ;
o NAME : permet de spécifier le formulaire transmis lorsqu’il y a
plus d’un formulaire dans le même site.
o TARGET : permet d’indiquer le cadre ou la fenêtre où s’affiche la
nouvelle page à l’exécution du script CGI.
I.1.10.1. LA BALISE INPUT
La balise <INPUT> est d’une importance capitale dans le

formulaire. En effet, elle permet la création des éléments
interactifs. Sa syntaxe est la suivante :
Page 18 sur 230

[2020 - 2021]
<INPUT TYPE="Nom du champ" VALUE="Valeur par défaut"
NAME="Nom de l'élément">
o L’attribut TYPE peut avoir les valeurs suivantes :
 TEXT : un champ permettant la saisie des textes. On peut définir
sa taille en lui ajoutant l’attribut Size, tandis que l’attribut
Maxlength permet de fixer un maximum des caractères à saisir ;
 CHECKBOX : c’est une case à cocher. Ses valeurs sont Checked
(coché) et Unchecked (non coché) ;
 HIDDEN : c’est un champ caché. Il est non visible sur le formulaire.
Il permet de préciser un paramètre fixe qui sera envoyé au CGI ;
 FILE : champ permettant à l'utilisateur de préciser l'emplacement
d'un fichier qui sera envoyé avec le formulaire. Il faudra alors
préciser le type de données pouvant être envoyées grâce à
l'attribut ACCEPT de la balise <FORM> ;
 SUBMIT : il permet l'envoi du formulaire. Il est appelé ‘bouton de
soumission’. Le texte du bouton est précisé par l'attribut VALUE ;
 IMAGE : c’est un bouton de soumission dont l'apparence est
l'image située à l'emplacement précisé par son attribut SRC ;
 RADIO : il permet de faire un choix parmi plusieurs éléments
proposés (l'ensemble des boutons radios doivent pour se faire
porter le même attribut NAME. L’attribut CHECKED permet de
préciser le bouton sélectionné par défaut ;
 RESET : c’est un bouton permettant de rétablir l'ensemble des
éléments du formulaire à leurs valeurs par défaut.
 PASSWORD : c’est un champ de saisie, dans lequel les caractères
saisis apparaissent sous forme d'astérisques.
o L’attribut NAME : permet de reconnaître la donnée et la
valeur qui a été saisie ;
o L’attribut VALUE : permet d’affecter un texte par défaut dans
le champ d’entrée des caractères.
Page 19 sur 230

[2020 - 2021]
I.1.10.2. LA BALISE TEXTAREA
Cette balise permet de définir une zone de saisie plus vaste de la

balise INPUT. Elle possède les attributs suivants:
o COLS : pour fixer le nombre de colonnes c'est-à-dire le nombre
des caractères que peut contenir une ligne ;
o ROWS : pour fixer le nombre de lignes,
o READONLY : permet de rendre un champ en lecture seule ;
o NAME : permet d’associer un nom spécifique au champ ;
o VALUE : représente la valeur qui sera envoyée par défaut au
script si le champ de saisie n'est pas modifié par l'utilisateur ;
I.1.10.3. LA BALISE SELECT
Elle permet de créer une liste déroulante d'éléments. Ces

éléments sont précisés par des balises OPTION se trouvant à
l’intérieur de la balise SELECT. La balise SELECT peut avoir les
attributs suivants :
o NAME : c’est le nom associé au champ, il permet d'identifier le
champ dans la paire nom/valeur ;
o SIZE : il représente le nombre de lignes de la liste. Il peut avoir
une valeur supérieure au nombre d'éléments présents dans la
liste ;
o DISABLE : permet de créer une liste désactivée c'est-à-dire une
liste inaccessible. Elle est affichée en gris ;
o MULTIPLE : permet à l'utilisateur de choisir plusieurs éléments au
même moment de la liste.
I.1.11. LISTE DES NOUVELLES BALSES HTML5.
Les balises La description

<area> Définit une zone à l’intérieur d’une image
<article> (Nouvelle) Définit un article
<aside> (Nouvelle) Définit une partie latérale au contenu
<audio> (Nouvelle) Définit un fichier audio
<bdo> Définit la direction du texte
Page 20 sur 230
[2020 - 2021]
<button>(Nouvelle) Définit un bouton cliquable
<canvas>(Nouvelle) Définit un graphique
<col> Définit une colonne d’un tableau
<colgroup> Définit un groupe de colonne pour un
tableau
<command> Définit un bouton de commande
(Nouvelle)
<del> Définit un texte supprimé
<details>(Nouvelle) Définit les détails d’un élément
<embed>(Nouvelle) Définit un contenu extérieur (audio, vidéo …)
<figcaption>(Nouvelle) Légende d’un groupe d’élément multimédia
<figure>(Nouvelle) Définit un groupe d’élément multimédia
<footer>(Nouvelle) Définit le bas d’un section ou d’une page
<header>(Nouvelle) Définit le haut d’une section ou d’une page
<hgroup>(Nouvelle) Regroupe les informations du haut d’une
page ou section
<ins> Définit un texte insérer
<keygen>(Nouvelle) Générateur de clé pour un formulaire
<main>(Nouvelle) Représente le contenu principal d’une page
ou application.
<map> Définit une carte
<mark>(Nouvelle) Mise en valeur d’un mot ou d’un texte –
Texte marqué
<math>(Nouvelle) Définit une formule mathématique
<menu> Définit un menu en liste
<meter>(Nouvelle) Définit une unité de mesure
<nav>(Nouvelle) Définit un groupe de liens de navigation
<noscript> Définit une alternative au script non supporté
<optgroup> Regroupe d’une liste d »option dans un
formulaire
<output>(Nouvelle) Définit un type de sortie
<progress>(Nouvelle) Définit une progression
<rp>(Nouvelle) Annotation ruby si le script n’est pas supporté
<rt>(Nouvelle) Annotation ruby d’explication
<section>(Nouvelle) Définit une section
<source>(Nouvelle) Définit la source d’un contenu multimédia
<span> Définit une section de type inline
Page 21 sur 230

[2020 - 2021]
<summary>(Nouvelle) Définit l’en-tête des détails d’un document
ou section
<svg>(Nouvelle) Définit une image vectorielle
<time>(Nouvelle) Définit une unité de temps
<track>(Nouvelle) Définit une unité de temps pour les éléments
<audio> et <video>.
<video>(Nouvelle) Définit une vidéo
<wbr>(Nouvelle) Définit un possible retour à la ligne
I.2. CASCADING STYLE SHEET (CSS).

I.2.1. INTRODUCTION.
On peut écrire du code CSS à trois endroits différents qui sont :
1) Méthode A : Dans un fichier.css (le moyen le plus recommandé)
2) Méthode B : Dans l’en-tête du fichier Xhtml
3) Méthode C: Dans les balises
Voici la description de chacune de cas techniques. Si vous ne
devez en retenir qu’une, retenez la première :
I.2.1.1. Dans un fichier. Css (méthode A)
Comme je viens de vous dire, le plus souvent on écrit du code css

dans un fichier spécial ayant l’extension.css (contrairement au
fichier xhtml ou html qui ont l’extension. html)
 Ouvrir une page css et enregistre cette page avec l’extension.
css
Ex : page : style. Css
 Enregistre cette page style css , et mettre dans l'en-
tête<head>< /head>
Code HTML
< Link href = “nom de fichier. css “ rel =“stylesheet“ type =“text /css“>
La balise < link/> comporte plusieurs attributs. Vous pouvez en

modifier d’entre eux pour le moment :
Page 22 sur 230

[2020 - 2021]
 title : c’est le nom que vous donnez à votre feuille de style
(mettez ce que vous voulez)
 href : c’est l’emplacement votre ou se trouve votre feuille de
style sous forme de lien relatif ;
I.2.1.2. Directement dans le header du fichier xhtml (méthode B)
Il est aussi possible de taper du css directement à l’intérieur même

du fichier XHTML, entre les balises<head>< /head>.Vous devez y
mettre une balise <style>< /style> à l’intérieur, comme ceci :
Code HTML
<Html>
< Head>
<Title>……………………< /title>
<style type=”text/css”>………………< /style>
< /head>
I.2.1.3. La méthode “à l‟arrache” dans les balises (méthode C)
Ça c’est la troisième (et la moins recommandée) des méthodes.

Elle consiste à ajouter un attribut style sur les balises pour leur
appliquer un style particulier. Cet attribut fonctionne sur toutes les
balises.
Ex : Code HTML
< h1 style=”propriété”> Texte </h1>
NB : Voici le commentaire en CSS : /* commentaire */
A) Appliquer en style a des balises
 Dans un css, on trouve trois éléments différents :

1) Des noms de balises : on écrit les noms des balises dont on veut
modifier l’apparence.
2) Des propriétés css : les effets de style de la page sont rangés
dans des propriétés.
3) Les valeurs : à chaque propriété CSS on doit indiquer une valeur.
Page 23 sur 230
[2020 - 2021]
Schématiquement, une feuille de style CSS ressemble à ça :
Code CSS
1. Balise1
2. {
3. Propriété : valeur ;
6. }
7. Balise2
8. {
12. }
13. Balise3
14. {
16. }
Exemple 1: Code CSS :

1. .P
2. {
3. Color : blue ;
4. Font-size : 18px ;
5. }
Interprétation : Cela signifie que : « je veux que tous mes
paragraphes soient écrits en bleu avec une taille de 18pixels. »
Exemple 2 : code CSS
1. h1
2. {
3. Color :red ;
4. }
5. H2
Page 24 sur 230

[2020 - 2021]
6. {
7. Color :red ;
8. }
Interprétation : Nos balises h1 doivent être en rouge, ainsi que nos
balises h2.
 Si les styles de 2 balises doivent avoir la même présentation. Il

suffit de séparer les noms des balises par des virgules, comme
ceci :
Ex : code CSS :
1. h1, h2
2. {
3. Color :red ;
4. }
Interprétation : « Je veux que le texte de mes titres < h1> et < h2>
soient écrits en rouge »
I.2.2. VOICI QUELQUES PROPRIETES UTILISEES.
Une application Web est un logiciel applicatif manipulable à

l’aide d’un navigateur Web. Les applications Web
analogiquement aux sites Web sont généralement placées sur un
ordinateur jouant le rôle de serveur (Twitter, Facebook, etc. sont
des exemples d’applications Web).
Propriétés Interprétation Valeurs Exemples

Font-family Choix d’une police arial,
de caractères verdana
Font-size Taille de police des h1 {font-size :
caractères 15% OU
15px ;}
Color pour la couleur du body {color :
texte #0000ff ;}
Font-weight préciser l’épaisseur Normal : principale
d’écriture c.à.d. le (valeur par {font –
Page 25 sur 230
[2020 - 2021]
degré de graissage défaut) weight :
de la police bold : gras bold ;}
Lighter : moins
gras que le
style en cours
Bolder : plus
gras que le
style en cours
Font-style mettre le texte en Normale : remarque
italique écriture droite {font-
(valeur par style :italic ; }
défaut),
italic ; italique
Oblique :
police de type
oblique
Text- soulignement et None: h1 {text-
decoration autres « décoration » suppression du decoration:
soulignement underline
de liens au overline ;})
passage du
souris
Underline
overline : titres
de niveau 1
soulignement
et surligne
Line-through :
barré
Blink :
clignotement
du texte
Text- mettre des Capitalize : #pays {text-
transform caractères en première lettre transform :
majuscule ou de chaque uppercase ;}
minuscules mot en
majuscule
Lowercase :
Page 26 sur 230
[2020 - 2021]
tout en
minuscules
Uppercase :
tout en
majuscules
None : écriture
standard
(valeur par
défaut)
Font – mettre l’écriture en Normal : texte ville {font-
variant petite majuscules normal (valeur variant :
c.à.d. à peu près la par défaut) small –
taille des minuscules Small –caps : caps ;}
tout en petites
majuscules
Background Attribuer un fond de Transparent Strong {
– color couleur à certaines (valeur par blackground-
lettres ou à certains défaut) : la color }
mots, à la manière couleur
du surligneur sur blanche.
papier. Cette
propriété permettra
et servira aussi à
choisir la couleur de
font d’un
paragraphe ou d’un
bloc.
Verticale- décalage vertical de baseline : sur -exposant,
align lettres ou de mots, la base de la vertical-
applicable aux ligne (valeur align : super}
cellules d’un tableau par défaut)
sub : indice
super :
exposant
middle : au
milieu de la
ligne
(centrage
Page 27 sur 230
[2020 - 2021]
vertical sur la
ligne)
text-top ou
text-bottom :
alignement
avec le haut
ou le bas de la
boite parent
valeur ou
pourcentage :
valeur positive
pour
décalage vers
le haut,
négative pour
un décalage
vers les bas
Font le raccourci font-style, h3 {font :
permettant font-variant, bold1.2em
d’indiquer en une font-weight, verdana,
seule propriété, les font –size, line- sans-serif ;}
mises en forme qui height :
concernent (hauteur de
l’italique, les petites ligne, voir plus
majuscules, le loin) et font –
graissage, la taille et family.
la police de
caractères
Text-align Aligner le texte Left : Aligner à auteur {text-
gauche (par align : right ;}
défaut)
Right : Aligner
à droite
Center :
centrer
Justify : justifié
Page 28 sur 230

[2020 - 2021]
I.2.3. UTILISATION DES CLASS ET ID.
Question:
Comment faire pour que seulement certains paragraphes (titres,
citations) soient écrits d’une manière différente ?
Réponse:
On a la possibilité pour faire cela d’utiliser des attributs spéciaux
qui fonctionnent sur toutes les balises :
- L’attribut class.
- L’attribut id.
Nous allons voir les classes suivantes dans l’ordre :
1. Ce que sont-les class et id.
2. Les balises dites « Univers ».
3. Les imbrications de balises.
NB : Les attributs class et id sont quasiment identiques. Il y a

seulement une petite différence que nous dévoilerons dans la
suite.
a) Class
 C’est un attribut que l’on peut mettre sur n’importe quelle balise,
aussi bien que paragraphe, image, titre, etc…
- <h1 class= « »>………..</h1>
- <p class= « »>………..</p>
- < img class= « » />
 Les class permettent de définir un style personnalisé.

Ex : Supposons que vous vouliez définir un style appelé
« important » qui écrive le texte en rouge/18 pixels. Vous ajouterez
l’attribut class= « important» à chacune des balises que vous
voulez modifier.
Code CSS
1. Important
2{
3 color: red;
Page 29 sur 230
[2020 - 2021]
4 font-size: 18 px ;
5}
b) Id
 L’attribut id fonctionne exactement de la même manière que
class, à un détail près : Il ne peut être utilisé qu’une fois.
 Un nom d’id doit commencer par une lettre et peut être suivi de
lettres et de chiffres.
Avantage :
- il y en a assez peu pour tout vous dire, cela vous sera utile si vous
faites du JavaScript plus tard pour reconnaitre certaines
balises.
- En pratique, nous ne mettrons des id que sur des éléments qui
sont uniques sur votre page, comme par exemple le logo : <img
src = « images/ logo.jpg » >
 Dans le css, ce n’est pas un point que vous devez mettre le nom
de l’id mais un dièse (#).
Code : CSS
1. #logo
2. {
3. /* Mettez les propriétés css ici */
4. }
Exercice
Code (X)HTML
<html>
<head>
<title> Titre de la page</title>
<link rel=’’stylesheet’’ type=’’text/css’’ href=’’design.css’’>
</head>
<body>
<ul id="menu">
<li><a href="#accueil">Accueil</a></li>
Page 30 sur 230

[2020 - 2021]
<li><a href="#r1">Historique</a></li>
<li><a href="#r2">Galerie</a></li>
<li><a href="#r3">Contact</a></li>
<li><a href="#r4">Infos</a></li>
</ul>
</body>
</html>
Code CSS complet avec définition des pseudo-classes (page nommée

:design.css)
ul#menu
{
margin : 0; /* Marge extérieur nulle */
padding : 1px 1px 0; /* Marge intérieur à 1px sauf pour le bas */
width : 300px; /* Largeur de notre liste */
font-size : 1.2em; /* Taille de notre police */
border : 1px solid #39C; /* Application d'une bordure */
}
ul#menu li
{
list-style-type : none; /* Aucunes puces associées */
margin-bottom : 1px; /* Ajout d'une marge en bas */
}
ul#menu li a
{
width : auto !important; /* Largeur interprétée par tous les navigateurs
excepté IE6 et inférieur */
width : 100%; /* largeur interprétée par IE6 et inférieur */
padding : 4px; /* Définition des marges intérieures */
text-decoration : none; /* Suppression du soulignement */
display : block; /* Définition sous forme de block */
}
ul#menu li a:link
{
color : #39C; /* Couleur de la police */
background-color : #F5FBFF; /* Définition de la couleur de fond */
border : 1px solid #3399CC; /* Ajout d'une bordure */
border-left-width : 4px; /* Modification de la bordure gauche */
}
ul#menu li a:visited
{
Page 31 sur 230
[2020 - 2021]
color : #FFA407; /*Changement de la couleur de la police initiale */
background-color : #FFF9AA; /* Changement de la couleur de fond
initiale */
border : 1px solid #FFA407; /* Ajout d'une bordure */
}
ul#menu li a:hover
{
color : #993; /* Changement de la couleur de la police initiale */
background-color : #f4fbdc; /* Changement de la couleur de fond
initiale */
border : 1px solid #993; /* Ajout d'une bordure */
}
ul#menu li a:active
{
color : #FFC300; /*Changement de la couleur de la police initiale */
background-color : #FDFFA5; /* Changement de la couleur de fond
initiale */
border : 1px solid #FFC300; /* Ajout d'une bordure */
}
Résultat final
Accueil
Historique
Galerie
Contact
Infos
Page 32 sur 230

[2020 - 2021]
CHAPITRE II : APERCU SUR LE LANGAGE JAVASCRIPT
II.1. JavaScript
JavaScript est un langage de scripts incorporé aux
balises Html, permettant d'améliorer la présentation et
l'interactivité des pages Web.
JavaScript est donc une extension du code Html des
pages Web. Les scripts, qui s'ajoutent ici aux balises Html,
peuvent en quelque sorte être comparés aux macros d'un
traitement de texte. Ces scripts vont être gérés et exécutés par
le browser lui-même sans devoir faire appel aux ressources du
serveur. Ces instructions seront donc traitées en direct et surtout
sans retard par le navigateur.
II.2. JavaScript n'est pas Java
Il importe de savoir que JavaScript est totalement différent de
Java. Bien que les deux soient utilisés pour créer des pages Web
évoluées, bien que les deux reprennent le terme Java (café en
américain), nous avons là deux outils informatiques bien différents.
JavaScript Java
Code intégré dans la page Module (applet) distinct de la page
Html Html
Code interprété par le Code source compilé avant son
browser au moment de exécution
l'exécution
Codes de programmation Langage de programmation
simples mais pour des beaucoup
applications limitées plus complexe mais plus performant
Permet d'accéder aux N'accède pas aux objets du navigateur
objets du navigateur Sécurité (code source compilé)
Confidentialité des codes
nulle (code source visible)
Page 33 sur 230

[2020 - 2021]
II.3. Le JavaScript minimum
a) La balise <SCRIPT>
De ce qui précède, vous savez déjà que votre script vient s'ajouter
à votre page Web. Le langage Html utilise des tags ou balises pour
"dire" au browser d'afficher une portion de texte en gras, en
italique, etc. Dans la logique du langage Html, il faut donc
signaler au browser par une balise, que ce qui suit est un script
et que c'est du JavaScript (et non du VB Script). C'est la balise :
<SCRIPT LANGUAGE="JavaScript">………………. </SCRIPT>. Ou
encore
<SCRIPT TYPE="text/JavaScript">………………. </SCRIPT>
b) Les commentaires.
Il vous sera peut-être utile d'inclure des commentaires
personnels dans vos codes JavaScript. C'est même vivement
recommandé comme pour tous les langages de
programmation (mais qui le fait vraiment ?). JavaScript utilise les
conventions utilisées en C et C++ : soit //ceci est un commentaire
ou soit /* ceci est un commentaire */.
c) Où inclure le code en JavaScript ?
Le principe est simple. Il suffit de respecter les deux principes
suivants :
 n'importe où.
 mais là où il le faut.
Le browser traite votre page Html de haut en bas (y
compris vos ajoutes en JavaScript). Par conséquent, toute
instruction ne pourra être exécutée que si le browser possède à ce
moment précis tous les éléments nécessaires à son exécution.
Ceux-ci doivent donc être déclarés avant ou au plus tard lors de
l'instruction. Pour s'assurer que le programme script est chargé
dans la page et prêt à fonctionner à toute intervention de votre
visiteur (il y a des impatients) on prendra l'habitude de déclarer
systématiquement (lorsque cela sera possible) un maximum
Page 34 sur 230

[2020 - 2021]
d'éléments dans les balises d'entête soit entre <HEAD> et </HEAD>
et avant la balise <BODY>. Ce sera le cas par exemple pour les
fonctions.
Rien n'interdit de mettre plusieurs scripts dans une même
page Html. Il faut noter que l'usage de la balise script n'est pas
toujours obligatoire. Ce sera le cas des événements
JavaScript (par exemple onClick) où il faut simplement insérer le
code à l'intérieur de la commande Html comme un attribut de
celle-ci. L'événement fera appel à la fonction JavaScript lorsque
la commande Html sera activée.
JavaScript fonctionne alors en quelque sorte comme une
extension du langage Html.
d) Une première instruction JavaScript.
Sans vraiment entrer dans les détails, voyons une première
instruction JavaScript (en fait une méthode de l'objet Windows)
soit l'instruction alert ().
Syntaxe : alert ("votre texte");
Cette instruction affiche un message (dans le cas présent votre
texte entre les guillemets) dans une boite de dialogue pourvue
d'un bouton OK. Pour continuer dans la page, le lecteur devra
cliquer ce bouton.
II.4. LES EVENEMENTS

II.4.1. Généralités
Avec les événements et surtout leur gestion, nous abordons le
côté "magique" de JavaScript. En Html classique, il y a un
événement que vous connaissez bien. C'est le clic de la souris sur
un lien pour vous transporter sur une autre page Web. Hélas, c'est
à peu près le seul. Heureusement, JavaScript va en ajouter une
bonne dizaine, pour votre plus grand plaisir. Les événements
JavaScript, associés aux fonctions, aux méthodes et aux
formulaires, ouvrent grand la porte pour une réelle interactivité de
vos pages.
Page 35 sur 230

[2020 - 2021]
II.4.2. Le évènements
Evénement Description
Click Lorsque l'utilisateur clique sur un bouton, un lien ou tout
autre élément.
Load Lorsque la page est chargée par le browser ou le
navigateur.
Unload Lorsque l'utilisateur quitte la page
MouseOver Lorsque l'utilisateur place le pointeur de la souris sur un
lien ou tout autre élément
MouseOut Lorsque le pointeur de la souris quitte un lien ou tout
autre élément.
Focus Lorsqu’un élément de formulaire a le focus c.-à-d.
devient la zone d'entrée active.
Blur Lorsqu‘un élément de formulaire perd le focus c.-à-d.
que l'utilisateur clique hors du champ et que la zone
d'entrée n'est plus active.
Change Lorsque la valeur d'un champ de formulaire est
modifiée.
Select Lorsque l'utilisateur sélectionne un champ dans un
élément de formulaire
Submit Lorsque l'utilisateur clique sur le bouton Submit pour
envoyer un formulaire
II.4.3. Les gestionnaires d'évènements

Pour être efficace, il faut qu'à ces événements soient associées les
actions prévues par vous. C'est le rôle des gestionnaires
d'événements.
La syntaxe est : on_ événement="fonction()"
Par exemple, onClick="alert('Vous avez cliqué sur cet élément')".
De façon littéraire, au clic de l'utilisateur, ouvrir une boite d'alerte
avec le message indiqué.
II.4.3.1 OnClick.
Evénement classique en informatique, le clic de la souris. Le code
de ceci est :
Page 36 sur 230
[2020 - 2021]
Nous reviendrons en détail sur les formulaires dans le chapitre
suivant.
II.4.3.2. OnLoad et OnUnload.
L'événement Load survient lorsque la page a fini de se charger. A
l'inverse, Unload survient lorsque l'utilisateur quitte la page.
Les événements onLoad et onUnload sont utilisés sous forme
d'attributs de la balise <BODY> ou <FRAMESET>. On peut ainsi
écrire un script pour souhaiter la bienvenue à l'ouverture d'une
page et un petit mot d'au revoir au moment de quitter celle-ci.
Page 37 sur 230

[2020 - 2021]
II.4.3.4. OnmouseOver et OnmouseOut
L'événement onmouseOver se produit lorsque le pointeur de la
souris passe au-dessus (sans cliquer) d'un lien ou d'une image.
Cet événement est fort pratique pour, par exemple, afficher
des explications soit dans la barre de statut soit avec une petite
fenêtre genre infobulle.
L'événement onmouseOut, généralement associé à un
onmouseOver, se produit lorsque le pointeur quitte la zone sensible
(lien ou image).
Notons qui si onmouseOver est du JavaScript 1.0,
onmouseOut est du JavaScript 1.1. En clair, onmouseOut ne
fonctionne pas avec Netscape 2.0 et Explorer 3.0.
II.4.3.5. OnFocus
L'événement onFocus survient lorsqu'un champ de saisie a le focus
c.-à-d. quand son emplacement est prêt à recevoir ce que
l'utilisateur à l'intention de taper au clavier. C'est souvent la
conséquence d'un clic de souris ou de l'usage de la touche "Tab".
II.4.3.6. OnBlur
L'événement onBlur a lieu lorsqu'un champ de formulaire perd
le focus. Cela se produit quand l'utilisateur ayant terminé la
saisie qu'il effectuait dans une case, clique en dehors du champ
ou utilise la touche "Tab" pour passer à un champ. Cet événement
sera souvent utilisé pour vérifier la saisie d'un formulaire.
Exemple :
I.4.3.7. OnChange
Cet événement s'apparente à l'événement onBlur mais avec une
petite différence. Non seulement la case du formulaire doit
avoir perdu le focus mais aussi son contenu doit avoir été
modifié par l'utilisateur.
Page 38 sur 230
[2020 - 2021]
II.4.3.8. OnSelect.
Cet événement se produit lorsque l'utilisateur a sélectionné (mis en
surbrillance ou en vidéo inverse) tout ou partie d'une zone de
texte dans une zone de type text ou textarea.
II.4 .4. Gestionnaires d'événement disponibles en JavaScript.
Il nous semble utile dans cette partie "avancée" de présenter
la liste des objets auxquels correspondent des gestionnaires
d'événement bien déterminés.
Objets Gestionnaires d'événement disponibles :
Objet Evénement
Fenêtre onLoad, onUnload
Lien hypertexte onClick, onmouseOver, onmouseOut
Elément de texte onBlur, onChange, onFocus, onSelect
Elément de zone de onBlur, onChange, onFocus, onSelect
texte
Elément bouton OnClick
Case à cocher OnClick
Bouton Radio OnClick
Liste de sélection onBlur, onChange, onFocus
Bouton Submit OnClick
Button Reset OnClick
II.4.5. La syntaxe d„OnmouseOver.

Le code du gestionnaire d'événement onmouseOver s'ajoute aux
balises de lien : <a href="" onmouseOver="action ()">lien</a>
Ainsi, lorsque l'utilisateur passe avec sa souris sur le lien, la fonction
action () est appelée. L'attribut HREF est indispensable. Il peut
contenir l'adresse d'une page Web si vous souhaitez que le lien soit
actif ou simplement des guillemets si aucun lien actif n'est
prévu. Nous reviendrons ci-après sur certains désagréments du
codage href="".
Voici un exemple. Par le survol du lien "Compliment", une fenêtre
d'alerte s'ouvre.
Page 39 sur 230
[2020 - 2021]
Le code est :
On peut aussi utiliser ceci dans la balise <head>
II.4.6. La syntaxe d„OnmouseOut.

Tout à fait similaire à onmouseOver, sauf que l'événement se
produit lorsque le pointeur de la souris quitte le lien ou la zone
sensible.
Au risque de nous répéter, si onmouseOver est du JavaScript 1.0 et
sera donc reconnu par tous les browsers,
On peut imaginer le code suivant :
Page 40 sur 230

[2020 - 2021]
Les puristes devront donc prévoir une version différente selon les
versions JavaScript.
II.4.7. Problème! Et si on clique quand même...
Vous avez codé votre instruction OnmouseOver avec le lien fictif
<a href=""... >, vous avez même prévu un petit texte, demandant
gentiment à l'utilisateur de ne pas cliquer sur le lien et comme de
bien entendu celui-ci clique quand même.
Horreur, le browser affiche alors l'entièreté des répertoires de sa
machine ou de votre site). Ce qui est un résultat non désiré et pour
le moins imprévu. Pour éviter cela, prenez l'habitude de mettre
l'adresse de la page encours ou plus simplement le signe # (pour
un ancrage) entre les guillemets de HREF. Ainsi, si le lecteur clique
quand même sur le lien, au pire, la page encours sera simplement
rechargée et sans perte de temps car elle est déjà dans le cache
du navigateur.
Prenez donc l'habitude de mettre le code suivant :
II.5. Les opérateurs

a. Les opérateurs arithmétiques :
Addition (+), Soustraction (-), Multiplication (*), Division (/).
b. Les opérateurs de comparaison
Les opérateurs de comparaison servent à exprimer des conditions.
Opérateur Symbole utilisé
Egal à ==
Différent de !=
Supérieur à >
Supérieur ou égal à >=
Inférieur à <
Inférieur ou égal à <=
Page 41 sur 230

[2020 - 2021]
c. Les opérateurs logiques
ET logique &&
OU logique ||
NON logique !
d. Les opérateurs d‟incrémentation et de décrémentation

++ : Incrémentation ;
-- : Décrémentions.
II.6. Fonction et procédure

La fonction est un sous-programme qui permet
d’effectuer un ensemble d’instruction par simple appel de son
nom dans le corps du programme principal. Les fonctions et les
procédures permettent d’exécuter dans plusieurs parties du
programme une série d’instructions, cela permet une simplicité du
code et donc une taille de programme minimale. Dans JavaScript
les fonctions et les procédures sont définies par le mot function.
la différence entre une fonction et une procédure est que
la fonction retourne une valeur (numéric, booléenne, etc…) ce
qui n’est pas la cas pour une procédure. Ce retour de valeur se
fait par le mot clé return.
Avant d’être utilisée, une fonction doit être définie pour que le
navigateur puisse la connaitre. La définition d’une fonction
s’appelle « déclaration ».
La syntaxe pour déclarer une fonction :
Page 42 sur 230

[2020 - 2021]
Notez que les paramètres (arguments) sont optionnels. Cela
dépend de ce que l’on veut faire.
Exemple :
II.7. Méthodes
Une méthode est une fonction associée à un objet, c’est-à-dire
une action que l’on peut faire exécuter à un objet. Les méthodes
des objets des navigateurs sont des fonctions définies à l’avance
par les normes HTML, on ne peut donc pas les modifier.
Page 43 sur 230

[2020 - 2021]
Par exemple une page HTML, est composée d’un objet appelé
document. L’objet document a par exemple une méthode write()
qui lui est associée et qui permet de modifier le contenu de la
page HTML en affichant du texte. Une méthode s’appelle un peu
comme une propriété, c’est-à-dire de la manière suivante :
window.objet.methode ()
Exemple :
Cet exemple affiche le texte « Bonjour le monde » sur la page du

navigateur. Un autre exemple d’impression d’une page web :
Page 44 sur 230

[2020 - 2021]
II.8. Les structures de contrôle
Les structures de contrôle permettent de contrôle la séquence
d’exécution d’un programme.
II.8.1. Les structures alternatives
Les structures alternatives test une certaine condition avant
d’exécution ou non une série d’instruction.
II.8.1.1. Si (if)
La structure if (si) pour syntaxe suivante :
Page 45 sur 230

[2020 - 2021]
Exemple :
Avec la structure if on peut l’écrire sous différentes versions :

a. If tout court
On recourt à la syntaxe précédente.
b. If…esle :
Voici la syntaxe à utiliser :
Page 46 sur 230

[2020 - 2021]
Exemple :
c. if…elseif…else
Page 47 sur 230

[2020 - 2021]
Exemple :
Des toutes ces différentes manières de (if), si après le bloc de

condition il y a une seule instruction à exécuter les accolades ne
sont pas nécessaires.
L’exemple précédent peut alors s’écrire comme ceci :
Page 48 sur 230

[2020 - 2021]
Grâce aux opérateurs logiques, on peut teste plus d’une condition
avant d’exécuter une série d’instructions.
Page 49 sur 230

[2020 - 2021]
Exemple :
d. le choix avec conditions imbriquées

On peut faire des tests imbriqués avant d’exécuter une série
d’instructions. Voici la formulation des conditions imbriquées :
Page 50 sur 230

[2020 - 2021]
Exemple :
II.8.1.2. Switch
Cette structure permet de faire des tests sur une expression
équivalent à la structure if…else if…else à la seule différence près
que cette dernière pointe directement là où la condition est
Page 51 sur 230

[2020 - 2021]
satisfaisante, contrairement à la structure précédente qui parcours
l’ensemble de cas testé.
Le switch a comme syntaxe :
Avec la structure switch, on peut écrire l’exemple précédent

comme ceci :
Page 52 sur 230

[2020 - 2021]
On peut également utiliser plus d’une condition avant d’exécuter
une série d’instructions.
Page 53 sur 230

[2020 - 2021]
Exemple :
II.8.2. Les structures itératives (boucles)

Les boucles permettent d’effectuer de manière répétitive une
série d’opérations.
a. La boucle while
La boucle while permet d’exécuter les instructions tant que la
condition est vraie.
Syntaxe :
Page 54 sur 230

[2020 - 2021]
Si la condition est fausse au début, aucune instruction n’est
exécutée.
Exemple : la somme de i allant de 1 à 10 :
Page 55 sur 230

[2020 - 2021]
b. La boucle do…while
Cette boucle fait la même chose que la boucle while. La seule
différence est même si la condition est fausse au début, les
instructions seront quand même exécutées une seule fois.
Syntaxe :
L’exemple peut s’écrire en utilisant la boucle do…while comme

ceci :
Page 56 sur 230

[2020 - 2021]
c. La boucle for
Cette structure est utilisée si le nombre d’itération est connu
d’avance. Elle contient un indice de la boucle qui est une valeur
entière.
Syntaxe :
Notre exemple peut alors être écrit en utilisant la boucle for de la

manière suivante :
Remarquez qu’un même exemple est écrit de trois manières

différentes en utilisant le trois sortes de boucles.
Remarquez aussi qu’avec les deux premières boucles, l’indice

d’itération est initialisé au départ par une valeur entière avant
Page 57 sur 230

[2020 - 2021]
d’être utilisé dans la boucle, contraire à la dernière où l’indice est
initialisé dans la formulation de la boucle.
II.9. L‟instruction break

L'instruction break permet d'interrompre prématurément une
boucle for ou while.
Exemple : Affichage de chiffre allant de 1 à 10 :
 Sans utilisation de l’instruction break :
 Avec l’utilisation de l’instruction break
Page 58 sur 230

[2020 - 2021]
II.10. L‟instruction continue
L'instruction continue permet de sauter une instruction dans une
boucle for ou while et de continuer ensuite le bouclage (sans sortir
de celui-ci comme le fait break).
Exemple :
Remarquez bien que dans l’affichage on ne voit pas le chiffre 5

parmi les chiffres affichés.
II.10. JavaScript et le formulaire
II.10.1. Généralités
Bien que nous ayons essayé d’anticiper un peu plus, avec

JavaScript, les formulaires HTML prennent une toute autre
dimension. En JavaScript, il est possible d’accéder à chaque
élément d’un formulaire pour, par exemple, y aller lire son contenu
ou écrire une valeur, noter un choix auquel on pourra associer un
gestionnaire d’événement. Tous ces éléments renforcent
grandement les capacités interactives des pages web.
Mettons au point le vocabulaire que nous utiliserons. Un

formulaire est l’élément Html déclaré par les balises <form></form>
Page 59 sur 230
[2020 - 2021]
(vu précédemment), contenant un ou plusieurs éléments que
nous appellerons des contrôles (widget). Ces contrôles sont notés
par exemple par la balise <input type…>.
II.10.2. Déclaration d‟un formulaire
Ceci étant détaillé plus haut, il faudra noter qu’en JavaScript,

pour désigner le chemin complet des éléments d’un formulaire on
devra alors ajouter un autre attribut (name) au formulaire qui aura
comme valeur le nom du formulaire. Sachant que, les attributs
action et method sont facultatifs pour autant que jusqu’ici on ne
fait pas appel au serveur.
Une erreur classique en JavaScript est, emporté par son élan,

d’oublier de déclarer la fin du formulaire : </form> après avoir
incorporé un contrôle.
II.10.3. Le contrôle ligne de texte
La zone de texte est l'élément d'entrée/sortie par excellence

de JavaScript. La syntaxe Html est <INPUT TYPE="text"
NAME="nom" SIZE=x MAXLENGTH=y> pour un champ de saisie
d'une seule ligne, de longueur x et de longueur maximale de y.
L'objet text possède trois propriétés :
Propriété Description
Name indique le nom du contrôle par lequel on pourra
accéder.
Default indique la valeur par défaut qui sera affichée dans
value la zone de texte.
Value indique la valeur en cours de la zone de texte. Soit
celle tapée par l'utilisateur ou si celui-ci n'a rien
tapé, la valeur par défaut.
Page 60 sur 230

[2020 - 2021]
II.10.3.1. Lire une valeur dans une zone de texte
Voici un exemple que nous détaillerons :
Voici une zone de texte. Entrez une valeur et appuyer sur le

bouton pour contrôler celle-ci.
Le code associé est :
Page 61 sur 230

[2020 - 2021]
Lorsqu'on clique le bouton "contrôler", JavaScript appelle la
fonction controleText() à laquelle on passe le formulaire dont le
nom est form1 comme argument.
Cette fonction controleText() définie dans les balises <head>

prend sous la variable test, la valeur de la zone de texte. Pour
accéder à cette valeur, on note le chemin complet de celle-ci.
Soit dans le document présent, il y a l'objet formulaire appelé
form1 qui contient le contrôle de texte nommé entree et qui a
comme propriété l'élément de valeur value.
Ce qui donne document.form1.entree.value.
I.10.3.2. Ecrire une valeur dans une zone de texte

Entrez une valeur quelconque dans la zone de texte d'entrée.
Appuyer sur le bouton pour afficher cette valeur dans la zone de
texte de sortie.
Code associé :
Page 62 sur 230

[2020 - 2021]
Lorsqu'on clique le bouton "Afficher", JavaScript appelle la
fonction afficherText() à laquelle on passe le formulaire dont le
nom est cette fois form2 comme argument.
Cette fonction afficherText() définie dans les balises <head> prend
sous la variable lire, la valeur de la zone de texte d'entrée. A
l'instruction suivante, on dit à JavaScript que la valeur de la zone
de texte sortie comprise dans le formulaire nommé form2 est celle
de la variable lire. A nouveau, on a utilisé le chemin complet pour
arriver à la propriété valeur de l'objet souhaité soit en JavaScript
Page 63 sur 230
[2020 - 2021]
document.form2.sortie.value.
II.10.4. Les boutons radio
Les boutons radio sont utilisés pour noter un choix, et seulement un
seul, parmi un ensemble de propositions.
Name indique le nom du contrôle. Tous les boutons
portent le même nom
Checked Indique l’état en cours de l’élément radio
Defaultchecked indique l'état du bouton sélectionné par
défaut.
Value indique la valeur de l'élément radio.
Exemple : choix du repas préféré :
Page 64 sur 230

[2020 - 2021]
Code associé :
Page 65 sur 230

[2020 - 2021]
II.10.5. Les boutons case à cocher (checkbox)
Les boutons case à cocher sont utilisés pour noter un ou
plusieurs choix (pour rappel avec les boutons radio un seul
choix) parmi un ensemble de propositions. A part cela, sa syntaxe
et son usage est tout à fait semblable aux boutons radio sauf en
ce qui concerne l'attribut name.
Name indique le nom du contrôle. Toutes les cases à
cocher portent un nom différent
Checked Indique l’état en cours de l’élément case à
cocher
Defaultchecked indique l'état du bouton sélectionné par
défaut.
Value indique la valeur de l'élément case à cocher.
Exemple :
Page 66 sur 230

[2020 - 2021]
Code associée :
Page 67 sur 230

[2020 - 2021]
Dans le formulaire nommé form4, on déclare quatre cases
à cocher. Notez que l'on utilise un nom différent pour les quatre
boutons. Vient ensuite un bouton qui déclenche la fonction
réponse ().
Cette fonction teste quelles cases à cocher sont

sélectionnées. Pour avoir la bonne réponse, il faut que les cases 1,
2 et 4 soient cochées. On accède aux cases en utilisant chaque
fois leur nom. On teste la propriété checked du bouton par
(form4.nom_de_la_case.checked). Dans l'affirmative (&& pour et
logique), une boite d'alerte s'affiche pour la bonne réponse.
Dans la négative, une autre boite d'alerte vous invite à
recommencer.
II.10. 6. Liste de sélections (déroulante)
Le contrôle liste de sélection vous permet de proposer

diverses options sous la forme d'une liste déroulante dans
laquelle l'utilisateur peut cliquer pour faire son choix. Ce choix
reste alors affiché. La boite de la liste est créée par la balise
<select> et les éléments de la liste par un ou plusieurs tags
<option>. La balise </select> termine la liste.
Name indique le nom de la liste déroulante
Length Indique le nombre d’éléments de la liste. S’il est
indiqué dans le tag <select>, tous les éléments
de la liste seront affichés. S’il n’est pas indiqué, un
seul apparaitra dans la boite de la liste
déroulante.
SelecteIndex Indique le rand à partir de 0 de l’élément qui a
été sélectionné par l’utilisateur
Defaultselected indique l'élément de la liste sélectionné par
défaut. C'est lui qui apparaît alors dans la petite
boite.
Page 68 sur 230

[2020 - 2021]
Exemple :
Code associé :
Page 69 sur 230

[2020 - 2021]
Dans le formulaire nommé form5, on déclare une liste de
sélection par la balise <SELECT></SELECT>. Entre ses deux balises,
on déclare les différents éléments de la liste par autant de tags
<OPTION>. Vient ensuite un bouton qui déclenche la fonction liste
().
Cette fonction teste quelle option a été sélectionnée. Le chemin

complet de l'élément sélectionné est
form5.nomdelaliste.selectedIndex. Comme l'index commence à 0,
il ne faut pas oublier d'ajouter 1 pour retrouver le juste rang de
l'élément.
II.10.7. Le contrôle textarea (pour les bavards).
L'objet textarea est une zone de texte de plusieurs lignes.
La syntaxe Html est :
Où rows="x" représente le nombre de lignes et cols="y" représente

le nombre de colonnes.
L'objet textarea possède plusieurs propriétés :
Name indique le nom du contrôle par lequel on pourra
accéder
DefaultValue indique la valeur par défaut qui sera affichée dans
la zone de texte.
Value indique la valeur en cours de la zone de
texte. Soit celle tapée par
l'utilisateur ou si celui-ci n'a rien tapé, la valeur par
défaut.
Page 70 sur 230
[2020 - 2021]
A ces propriétés, il faut ajouter onFocus(), onBlur(), onSelect() et
onChange().
En JavaScript, on utilisera \r\n pour passer à la ligne.
Comme par exemple dans l'expression document.Form.Text.value
= 'Check\r\nthis\r\nout'.
I.10.8. Le contrôle Reset.
Le contrôle Reset permet d'annuler les modifications apportées
aux contrôles d'un formulaire et de restaurer les valeurs par défaut.
Où value donne le texte du bouton.
Une seule méthode est associée au contrôle Reset, c'est la
méthode onClick(). Ce qui peut servir, par exemple, pour faire
afficher une autre valeur que celle par défaut.
II.10.9. Le contrôle Submit
Le contrôle à la tâche spécifique de transmettre toutes les
informations contenues dans le formulaire à l'URL désignée dans
l'attribut ACTION du tag <FORM>.
Où value donne le texte du bouton.
Une seule méthode est associée au contrôle Submit, c'est la
méthode onClick()
I.10.10. Le contrôle Hidden (caché)
Le contrôle Hidden permet d'entrer dans le script des éléments
(généralement des données) qui n'apparaîtront pas à l'écran. Ces
éléments sont donc cachés. D'où son nom.
Page 71 sur 230

[2020 - 2021]
II.10.11. L'envoi d'un formulaire par email.
A force de jouer avec des formulaires, il peut vous prendre
l'envie de garder cette source d'information. Mais comment
faire? JavaScript, et à fortiori le Html, ne permet pas d'écrire dans
un fichier. Ensuite, le contrôle Submit est surtout destiné à des CGI
ce qui entraîne (encore) un codage spécial à maîtriser. D'autant
que pour nous simples et présumés incompétents internautes, la
plupart des providers ne permettra pas d'héberger une CGI faite
par un amateur pour des raisons (tout à fait compréhensibles) de
sécurité. Il ne reste plus que l'unique solution de l'envoi d'un
formulaire via le courrier électronique.
Exemple :
Page 72 sur 230

[2020 - 2021]
Code associé :
Attention ! Ceci ne marche que sous Netscape et pas sous

Microsoft Explorer 3.0 ... Avec Explorer, le mailto ouvre le
programme de Mail mais n'envoie rien du tout.
Page 73 sur 230

[2020 - 2021]
II.11. Un peu de tout
II.11.1. Les boites de dialogue ou de message
JavaScript met à votre disposition 3 boites de message :
 alert ()
 prompt ()
 confirm ()
Ce sont toutes trois des méthodes de l'objet Windows.
II.11.1.1. La méthode alert ().
La méthode alert () doit, à ce stade de votre étude, vous être
familière car nous l'avons déjà souvent utilisée.
La méthode alert() affiche une boite de dialogue dans
laquelle est reproduite la valeur (variable et/ou chaîne de
caractères) de l'argument qui lui a été fourni. Cette boite bloque
le programme en cours tant que l'utilisateur n'aura pas cliqué sur
"OK". alert() sera aussi très utile pour vous aider à déboguer les
scripts.
Sa syntaxe est :
NB. : L’expression peut être une variable, une chaine de
caractères ou la concaténation de deux.
Si vous souhaitez écrire sur plusieurs lignes, il faudra utiliser le signe
\n.
II.11.1.2. La méthode prompt ().
Dans le même style que la méthode alert (), JavaScript vous
propose une autre boite de dialogue, dans le cas présent
appelée boite d'invite, qui est composée d'un champ comportant
une entrée à compléter par l'utilisateur. Cette entrée possède
aussi une valeur par défaut.
La syntaxe est :
Page 74 sur 230

[2020 - 2021]
En cliquant sur OK, la méthode renvoie la valeur tapée par
l'utilisateur ou la réponse proposée par défaut. Si l'utilisateur clique
sur Annuler ou Cancel, la valeur nulle est alors renvoyée.
Exemple :
Ce qui donne, par exemple si on saisit le nom « Kanyinda »
En cliquant sur le bouton « OK » on a ceci
Page 75 sur 230

[2020 - 2021]
Prompt () est parfois utilisé pour saisir des données fournies par
l'utilisateur. Selon certaines sources, le texte ne doit cependant
pas dépasser 45 caractères sous Netscape et 38 sous Explorer 3.0.
II.11.1.3. La méthode Confirm ()
Cette méthode affiche 2 boutons "OK" et "Annuler". En cliquant sur
OK, continue () renvoie la valeur true et bien entendu false si on a
cliqué sur Annuler. Ce qui peut permettre, par exemple, de choisir
une option dans un programme.
La syntaxe est :
L’express ici peut est une variable de test de confirmation.
Exemple :
Page 76 sur 230

[2020 - 2021]
Résultat :
Si vous cliquez sur le bouton « OK » le message suivant va apparait
Page 77 sur 230

[2020 - 2021]
En cliquant de nouveau sur ce bouton le navigateur va s’arrêter.
II.11.5. Une minuterie
JavaScript met à votre disposition une minuterie (ou plus

précisément un compteur à rebours) qui permettra de déclencher
une fonction après un laps de temps déterminé.
La syntaxe de mise en route du temporisateur est :
1)
Ainsi , va lancer la fonction

démarrer () après 5 secondes.
2) Pour arrêter le temporisateur avant l'expiration du délai fixé, il

ya:
II.11.6. L'emploi de this.
Pour désigner l'objet en cours, JavaScript met à votre

disposition le mot-clé this. Cette écriture raccourcie est
souvent utilisée (sans risque de confusion) en remplacement
du chemin complet de l'objet dans un formulaire.
Un exemple vous éclairera mieux qu'un long discours.
Page 78 sur 230

[2020 - 2021]
Soit un script avec un formulaire :
Au lieu d'employer choixprop(form3), on aurait pu utiliser

choixprop(this.form) et éviter ainsi toute confusion avec les
autres noms de formulaires. Dans cet exemple, this.form
désigne le formulaire form3 complet. Par contre, choix
prop(this) n'aurait désigné que l'élément de type bouton du
formulaire form3.
Pour être complet, this est utilisé aussi pour créer une ou plusieurs
propriétés d'un objet. Ainsi, pour créer un objet livre avec les
propriétés auteur, éditeur et prix cette opération peut être
effectuée à l'aide de la fonction :
Page 79 sur 230

[2020 - 2021]
II.12. Introduction au JQuery
A l’heure actuelle où on parle du Web 2.0, les bibliothèques et

Framework JavaScript jaillissent pour combler la complexité et le
manque de souplesse du langage. L’une des plus célèbres te
répandues se dénomme jQuery.
jQuery est une bibliothèque destinée à simplifier l’écriture de

codes JavaScript. Grâce à cette bibliothèque, on peut dynamiser
facilement les pages web. En effet, la bibliothèque est légère,
simplifie l’adaptation à tous les navigateurs, elle possède une
syntaxe élégante et homogène qui s’apprend rapidement que
JavaScript pur.
Il est donc préférable d’avoir des connaissances dans les

langages HTML & CSS ainsi que JavaScript pour mieux et
facilement faire asseoir le jQuery.
II.12.1. Premier pas avec jQuery
La bibliothèque jQuery permet au développeur web de code plus

simplement et plus rapidement car il n’aura pas se soucier des
différentes interprétations du JavaScript selon les navigateurs.
jQuery est très simple à comprendre et à utiliser mais nécessite
néanmoins quelques petites précisions, notamment sur
l’optimisation de son import sur les pages web.
1. Les limites de productivité de JavaScript

Il existe aujourd’hui de plus en plus de navigateurs que les visiteurs
ne mettent pas forcément à jour. Le tout vous donne une
panoplie de navigateurs ayant chacun une déclinaison de
versions. Internet Explorer 6 à la dernière version, Firefox 3 à sa
dernière version, Opera, Chrome, pour ne citer que les plus
répandus. Rien qu’avec ceux-là, il vous faudra faire une série de
tests de vos codes pour vérifier leur fonctionnement sur chacun
d’eux. On obtient alors une syntaxe barbante et on soucie
Page 80 sur 230
[2020 - 2021]
perpétuellement de la compatibilité inter-navigateur plutôt que
d’optimiser le site.
2. jQuery, une bibliothèque

JQuery n’est pas un langage, mais bien une bibliothèque
JavaScript. C’est-à-dire qu’on a tout un tas de code qui nous
mâche le travail pour qu’on puisse développer plus rapidement
ce qu’on souhaite. Cela implique évidemment que le JavaScript
soit activé au sein du navigateur du visiteur pour les scripts
fonctionnent bien. Il est bon de savoir que l’expression
« développer en jQuery » est fausse, on dit plutôt « développer en
JavaScript en utilisant la bibliothèque jQuery ».
Comme toute bibliothèque, jQuery doit être inclus dans les pages
tels un script JavaScript écrit par vos soins.
3. Ajout de jQuery aux pages web

La première étape est de télécharger jQuery sur le site officiel,
pour être certain d’avoir la dernière version. Pour se faire, rendez-
vous à l’adresse : http://jquery.com/ . mettez le fichier (.js) de
jQuery dans un des répertoire de votre projet.
Une fois cela fait, on suppose que le fichier jQuery est prêt à être
exploiter dans les pages web (html ou php), il ne reste plus qu’à
l’importer.
La manière la plus classique et sûre pour que l’import soit effectué

sans souci est certainement l’utilisation de la balise script vers le
fichier téléchargé préalablement. Pour rappel la balise script se
présente ainsi :
Notez que la précision de l’attribut type de la balise n’est pas

nécessaire si vous développez en HTML5, car celui-ci considère la
Page 81 sur 230
[2020 - 2021]
balise comme contenant du JavaScript par défaut. Mais si vous
développez votre site dans une version antérieur à HTML5, la
bonne syntaxe sera :
Il est à noter que les fichiers JS se chargent de manière synchrone :

tant que le premier fichier JS n’est pas chargé, le navigateur ne
continue pas l’affichage de la page, il attend d’avoir la totalité du
fichier pour continuer à avancer. Ainsi pour la fluidité du
chargement, on préfère place les fichiers JS après tout le contenu
pour que celui-ci soit chargé qu’une fois que le visiteur ait de quoi
à se servir. La balise script est donc à placer juste avant la
fermeture du body, après tout le contenu. Si toutefois, votre fichier
JS est primordial dans le fonctionnement de votre page, il faudra
le mettre dans le head, auquel cas il sera chargé avant le
contenu et s’exécutera immédiatement.
On obtient ainsi le code suivant :
Page 82 sur 230

[2020 - 2021]
Pour s’assurer qu’on réussit à importer jQuery convenablement,
voici un exemple de test utilisant jQuery :
En exécutant votre page (comme celle-ci), si elle affiche « Bonjour

le monde » à la place de « Contenu de la page » c’est que vos
pages sont prêtes à être dynamisées en utilisant jQuery.
II.12.2. jQuery ou $() ?
Dans l’exemple précédent dans le texte « Bonjour le monde »

apparait la fonction $(), c’est court comme nom et il vaut mieux.
En effet, elle va nous servir un peu partout.
L’heure est au choix, si vous êtes prudents vous préférerez prévenir

les conflits, si vous êtes certains que vous n’utiliserez que jQuery,
alors ne vous souciez pas d’éventuels conflits.
Protéger l’alias $()
$() est un alias (synonyme) de jQuery() qui n’est autre la fonction

principale de jQuery, dès que vous aurez besoin de jQuery, il
Page 83 sur 230
[2020 - 2021]
faudra y faire appel. Le souci c’est que jQuery n’est pas la seule
bibliothèque JavaScript à avoir choisi cet alias, si vous utilisez
plusieurs librairies, vous allez avoir des conflits si vous ne protégez
pas les différentes parties de code.
Voici comme le faire :
Le jQuery(document).ready va attendre que la page

(HTML+CSS+JS) soit chargée pour exécuter le code qui est dans la
fonction. Le mieux de coder proprement et d’importer jQuery tout
en bas du body puis d’importer les scripts qui l’utilisent.
La version encore plus courte de jQuery qui suppose que la page

soit chargée :
Page 84 sur 230

[2020 - 2021]
Utiliser $() directement
Si vous êtes certains que vous ne coderez qu’avec jQuery sur

votre projet de site web, et jamais rien d’autre, vous pouvez tout à
fait utiliser directement $() en veillant toujours à avoir importé
jQuery plus haut dans la page (en général, juste avant votre
script). Si vous procédez ainsi, vous pourrez directement taper
votre code comme nous allons voir dans les points qui suivent.
Prototype :
II.12.3. Les sélecteurs
Pour agir sur la page, il va falloir sélectionner les divers éléments la

composant. L’une des grandes forces de jQuery réside tout
justement sa simplicité de sélection des éléments des pages. La
bibliothèque réutilise le potentiel des sélecteurs CSS en les
complétant des sélecteurs additionnels.
1. Les sélecteurs CSS

Les sélecteurs que vous connaissez certainement et utilisent en
CSS sont pratiques et permettent de cibler précisément n’importe
quel élément d’une page bien construite. Si nous pouvions les
utiliser en JavaScript, cela serait quand même bien plus pratique
que les getElementById().
2. Comment utiliser les sélecteurs ?

Les sélecteurs que nous allons voir par la suite sont à utiliser très
simplement de la façon suivante :
Page 85 sur 230

[2020 - 2021]
Un sélecteur $("<selecteur">) ; va retourner un objet jQuery qui
contient tous les éléments qui ont satisfait le sélecteur, et s’il n’y en
aucun cela vaudra null.
3. Les sélecteurs CSS compatibles avec jQuery

La grande majorité des sélecteurs CSS ont été directement
implémentés jQuery, certains autres ne sont pas compatibles.
jQuery est très à jour et est déjà prêt à supporter CSS3 et ses
nouveaux sélecteurs.
Parmi ces sélecteurs, nous allons utiliser ceux-ci :
a. Le nom de la balise HTML

Expression : elem
Exemple : p, div, span,section
On récupère alors tous les éléments qui sont de ce type
d’élement.
Exemple :
Il est également possible de chainer les éléments : elem1 elem2

qui ira chercher tous les éléments elem2 dans elem1.
Page 86 sur 230

[2020 - 2021]
Exemple :
b. L’id
Expression : #id
Exemple : #nom
Sélectionne l’élément ayant l’id id. normalement, ce sélecteur ne

renvoie qu’un élément puis qu’un id est censé être unique.
Exemple :
c. La classe
Expression : .classe
Exemple : .nom
A la manière d’une sélection par le nom de la balise, on a alors

tous les éléments qui ont la classe indiquée.
Exemple :
Ici la chainabilité des sélecteurs de classe ont bien un sens. En

effet, une classe est faite pour être utilisée à plusieurs endroits, on
pour donc trouver des choses comme : .contenu .entete ou
encore #detail h4.
Page 87 sur 230

[2020 - 2021]
Exemple :
4. Les formulaires
jQuery va nous être utile lorsque l’on voudra traiter les informations
coté client pour les valides avant de les envoyer sur le serveur par
exemple. Ou encore, envoyer les données en asynchrone (AJAX).
Pour pouvoir envoyer ces informations, ces valeurs, il va nous falloir
les récupérer dans la page.
Ce point nous est vraiment utile quand nous allons envoyer les
informations dans la base de données grâce à AJAX.
a. Boutons
En HTML5, tout comme dans les précédentes versions, il y a 4 sortes
de boutons :
jQuery propose une pseudo-classe associée respectivement à

chacun de ces boutons :
Page 88 sur 230

[2020 - 2021]
b. Les champs
Le plus imposant des champs est certainement textarea, mais
ayant une balise rien qu’à lui, pas besoin de pseudo-classe. En
revanche pour les champs de texte et mot de passe, cela devient
intéressant :
Auxquels on trouvera les pseudo-classes associées suivante :
II.12.4. Les méthodes
Sélectionner les éléments c’est bien, les manipuler c’est mieux. Les
méthodes sont là pour ça, et jQuery en intègre beaucoup.
Nous avons vu dans le point précédent les sélecteurs que nous

utilisons ainsi : $(‘#selecteur ‘) par exemple. Ceci permet de
récupérer un objet jQuery sur lequel on va pouvoir appliquer des
actions, modification, ou tout simplement de simples lectures
d’attributs ou de propriétés ; c’est cela que permettent les
méthodes. Pour être claire, une méthode permet une action sur
un objet jQuery récupéré préalablement.
A partir d’ici, il va nous être possible de stocker des objets jQuery

dans des variables pour pouvoir leur appliquer des méthodes
différentes sans devoir sélectionner l’élément à chaque fois. La
convention sera celle-ci :
Page 89 sur 230

[2020 - 2021]
Une variable contenant un objet jQuery sera précédée d’un
dollar, exemple :
1. Utilisation
Pour appliquer ces modifications, on utilise bien souvent des
méthodes jQuery. Celles-ci se présentent et s’appliquent à l’objet
de cette façon :
La méthode peut prendre un ou plusieurs paramètres comme par

exemple :
Et ces paramètres peuvent prendre de multiples formes.
2. Les méthodes simples proposées par jQuery

Comme toute bonne bibliothèque, jQuery propose tout une liste
de méthodes qui permettent de gérer de plusieurs façons le
contenu de pages web. Voici les méthodes les plus simples qui
existent ; c’est-à-dire celles qui ne prennent pas de paramètres :
a. Affichage et masquage
Il est très courant de devoir afficher ou masquer des éléments de
pages web, et pour cela on n’a que l’embarras du choix puisque
on peut faire cela avec ou sans animation. En ce qui concerne les
méthodes sans animées elles ont au nombre de deux :
- .hide() qui permet de masquer l’objet concerné ;
Page 90 sur 230

[2020 - 2021]
- .show() qui affiche l’objet.
Elles vous seront utiles assez notamment lors de vos tests rapides
pendant le développement. Celles-ci n’ont pour effet que de
jouer avec la propriété display en la passant block pour show() et
à none pour hide().
Exemple : code jQuery :
Page 91 sur 230

[2020 - 2021]
Pour afficher et/ou masquer avec un peu d’animation, voici
comment il faut faire :
Les méthodes hide() et show() ont cette fois-là des paramètres :
 Durée en millisecondes
 Une fonction qui va définir l’animation. (linear, easing).
II.12.5. Envoie des informations dans la base de données grâce à
jQuery(AJAX)
Dans le chapitre précédent nous avons vu comment il était

possible de communiquer avec le serveur de base de données en
PHP. En faisant cela, nous étions obligés de recharger la page lors
de soumission du formulaire. Il arrive parfois qu’on souhaite
envoyer de données dans le serveur sans pourtant actualiser ou
recharge toute la page. C’est à ce point que jQuery devient très
intéressant. Les notions sur la communication avec le serveur étant
détaillées de long en large dans le point précédent nous allons ici
l’appliquer avec jQuery.
A ce niveau nos pages web auront pour extension .php.
Page 92 sur 230

[2020 - 2021]
L’idée ici avec jQuery, c’est de faire en sorte que même si on
envoi des informations dans la base de données que la page
entière ne soit rechargée.
Exemple :
Créons une base de données nommée bdAjax ayant une table

nommée etudiant qui la structure suivante :
Champ Type Taille Contraite

Matricule Varchar 10 Primary
key
Nom Varchar 15 Not null
Prenom Varchar 15
Age Int
Après de la base de données ainsi que la table créez un projet

php dans NetBeans nommé PHP_AJAX :
Dans ce projet, créez deux répertoires : config et pages. Et dans le

répertoire config créez de nouveau un sous répertoire js.
Vous allez mettre le fichier jQuery.js dans le répertoire js. Jusqu’à

ce niveau l’arborescence de notre projet sera comme ceci :
Page 93 sur 230

[2020 - 2021]
Créez :
- Un fichier index.php dans la racine du projet ;

- Trois fichier : connexionDB.php, liste.php, new.php dans le
répertoire pages.
Ce qui donne comme arborescence :
Le fichier connexionDB.php contient les instructions de la

connexion à la base de données, le fichier liste.php sert seulement
à afficher la liste des étudiants, le fichier new.php permet
d’enregistrer un nouvel étudiant et enfin le fichier index.php
constitue la page d’accueil du projet.
Code source de chaque fichier :
Page 94 sur 230

[2020 - 2021]
connexionDB.php
Page 95 sur 230

[2020 - 2021]
liste.php
Page 96 sur 230

[2020 - 2021]
new.php
Page 97 sur 230

[2020 - 2021]
Page 98 sur 230
[2020 - 2021]
Résultat :
Page 99 sur 230

[2020 - 2021]
Quand on clique sur le bouton « Nouveau » on a ceci :
Page 100 sur 230

[2020 - 2021]
Exercice :
A partir de l’exemple précédent, ajouter d’autres fonctionnalités

de base de langage SQL (Modification, suppression).
Après tout la page va ressembler à ceci :
Page 101 sur 230

[2020 - 2021]
CHAPITRE III : BASE DE DONNEES AVEC MYSQL + PHP
III.1. PHP
III.1.1. Introduction
PHP (HyperText Préprocesseur) est un langage de script qui est

principalement utilisé pour être exécuté par un serveur http. Il est
beaucoup plus utilisé pour créer des sites web dynamiques. Une
page HTML qui est directement décodée par un navigateur
(Internet Explorer, Google Chrome,… par exemple). Par contre, le
PHP est décodé par le serveur qui transfert le résultat vers les
navigateurs au format HTML. Pour l’utilisateur cette fonctionnalité
est complètement transparente.
Le PHP est généralement installé sur un serveur Web et couplé à

une base de données MySQL. Ce n’est pas obligatoire, mais
permet des applications étendues comme la création de forum,
site de vente en ligne…
On désigne parfois PHP comme une plate-forme plus qu’un simple

langage.
Sa syntaxe et sa construction ressemblent à celles des langages

C++ et Perl, à la différence que le PHP peut être directement
intégré dans du code HTML.
Créer des pages PHP n’oblige pas à créer tout le site dans ce
langage. Les pages peuvent être mélangées avec d’autres sur le
même site. La seule manière de vérifier le type de page est de
vérifier l’extension de la page internet, et encore puisse que des
pages en HTML peuvent être simplement renommée en PHP pour
des développements futurs.
Pour vérifier quelle version utilise votre hébergeur, tapez

simplement les lignes suivantes dans un éditeur puis exécuter les :
Page 102 sur 230

[2020 - 2021]
Nous venons finalement de programmer notre première
commande en PHP. Analysons les lignes de ce fichier :
<php> : Cette ligne explique que nous avons démarré une liste de
commande PHP.
phpinfo() ; : est une commande du langage de programmation

PHP qui affiche la configuration du serveur
?> : Ici termine une liste d’instruction PHP.
On peut alors utiliser plusieurs séries d’instructions (chaque fois

avec les mêmes délimiteurs) dans une page, entrecoupée des
parties en html. L’extension du fichier sera alors obligatoirement
.php.
III.1.2. Utilitaires
Développer en PHP nécessite quelques programmes et utilitaires

un peu spéciaux pour bien débuter.
Contrairement à html qui ne demande qu’un simple éditeur et un

navigateur, le PHP demande donc en plus d’un éditeur :
Un Serveur personnel : Une page en PHP est décodée par un

serveur, et… votre ordinateur sous Windows par exemple ne
fonctionne pas comme serveur php. Pour tester nos programmes
écrits en PHP, nous allons utiliser pour notre cas WampServer, il
fonctionne sous Windows et permet non seulement de tester les
pages ne local, mais aussi de créer de base de données local
MySQL.
Page 103 sur 230

[2020 - 2021]
Nous allons utiliser comme éditeur pour notre cas le NetBeans pour
la simple raison, beaucoup de facilité qu’il offre dont nous
détaillerons plus loin.
Ces deux utilitaires nous permettent finalement d’utiliser notre PC

sous Windows pour créer et tester des pages programmées en
PHP, pour les transférer plus tard sur le serveur distant.
III.1.3. Fonctionnalités du langage
Pour débuter, nous allons nous inspirer d’un programme en HTML

pour le modifier en PHP. Nous en profiterons pour voir quelques
instructions simples comme l’affichage de texte et les formats de
dates.
Ce fichier html est relativement simple, il ne fait que mettre un titre

dans l’en-tête et affiche un texte dans un paragraphe. Modifions
la programmation pour le créer en PHP. Remplaçons simplement
le <p> par :
Page 104 sur 230

[2020 - 2021]
L’instruction print() est insérée entre deux balises qui délimite le
PHP. Elle permet d’afficher un texte sur l’écran. Les autres parties
en HTML ne sont pas modifiées.
Noter que chaque ligne d’instruction doit terminer par un point-

virgule (;). Sauf quoi, vous aurez une erreur de type :
Ceci arrive souvent quand on ne met le point-virgule à la fin d’une

instruction avant de passer à une autre.
Nous aurions pu utiliser l’instruction print() similaire à echo. Les

lignes d’instructions précédentes deviennent alors :
Pour afficher du texte, nous utilisons les guillemets (simples ‘ ou

double " au choix). Mais pour insérer d’autres caractères spéciaux
comme par exemple l’apostrophe (‘), il faut alors précéder ce
dernier par le caractère anti slash (\).
Par exemple :
Les caractères de contrôle html <br />, <hr />…

Page 105 sur 230
[2020 - 2021]
L’instruction permet de faire un saut de ligne.
Les commentaires en PHP peuvent se présenter sous deux formes :
III.1.4. Les variables
Le langage PHP permet de manipuler des variables et constantes.

Voici les types les plus manipulés en PHP :
1. booléen : true ou false (vraie ou faux) ;

2. entier : acceptant un nombre entier (sans virgule)
3. chiffre à virgule flottante : (c’est automatiquement un
nombre décimale de type double), nombre avec chiffre
derrière la virgule comme par exemple : 0.82, 11.407.
remarquez le point comme séparateur. (considéré ici
comme virgule)
4. chaine de caractères : du texte encadré par " ou ‘. Exemple
"Ceci est un texte".
5. Tableau : exemple array(2,3) ;
6. Objets : (images, lien texte…).
A noter que le PHP ne demande pas de spécifications de type de
variable préalable, ni même de les déclarer (sauf les tableaux).
Ceci dit : PHP n’est pas un langage typé.
III.1.4.1. Déclaration d‟une variable
Quelques consignes pour la déclaration des variables :
Page 106 sur 230

[2020 - 2021]
a. Les noms de variables doivent :
- commencer par le symbole dollar ($) ;
- inclure des lettes, des chiffres et le caractère (_) commencer
par une lettre ou (_) après le symbole ($).
b. Les noms de variables ne doivent pas :

- inclure les caractères réservés : - @ , . ; : / <\>
- inclure des espaces.
En plus de tout ça, le nom de variable doit quand même
significatif. Il peut inclure des caractères accentués mais ce n’est
pas souhaitable. Le PHP est un langage est sensible à la casse
(c’est-à-dire, il sait faire la différence entre le MAJUSCULE et le
minuscule).
Pour déclarer une variable rien de plus simple :
Exemple :
Mais quelque problème se pose si on veut vraiment si la variable

existe. Essayons d’anticiper quelque chose du genre méthode ici
(isset) qui permet de vérifier l’existence d’une variable en PHP.
La variable ainsi déclarée, si on vérifie son existence de la

manière :
Page 107 sur 230

[2020 - 2021]
Ce qui donne comme résultat dans le navigateur :
Pourtant, la variable $nom a été bien déclarée au départ.
Tout ça, parce que bien qu’elle a été déclarée, mais elle n’a pas
été encore initialisée, le serveur ne reconnait pas encore. Voilà le
pourquoi de son inexistence. Si on tente de faire comme ceci :
Cette fois ci, le résultat est bien celui entendu :
Donc, il est surtout recommandé d’initialiser la variable pendant sa

déclaration. Mais surtout encore par une valeur différente de
nulle (null). C’est très important.
Exemple :
Page 108 sur 230

[2020 - 2021]
Résultat dans le navigateur :
On peut afficher la variable (son contenu) de nouveau entre les

guillemets comme une chaine de caractères si on veut la
concaténer avec une chaine.
Exemple :
Ce qui donne ça dans le navigateur :
Mais il y a un symbole spécial pour la concaténation. C’est le

signe point (.).
D’où l’exemple précédent peut s’écrire comme ceci :
Le résultat sera toujours le même.
Page 109 sur 230

[2020 - 2021]
III.1.5. Les constantes
Une constante est un identifiant (un nom) qui représente une

valeur simple. Comme son nom le suggère, cette valeur ne
peut jamais être modifiée durant l'exécution du script (les
constantes magiques __FILE__ et __LINE__ sont les seules
exceptions). Le nom d'une constante est sensible à la casse, par
défaut. Par convention, les constantes sont toujours en majuscules.
Les noms de constantes suivent les mêmes règles que n'importe

quel nom en PHP. Tous comme les superglobals, les constantes
sont accessibles de manière globale. Vous pouvez la définir
n'importe où, et y accéder depuis n'importe quelle fonction.
Avec PHP, les constantes sont définies grâce à la fonction define().
La syntaxe de la fonction define () est la suivante :
Exemple :
Seuls les types de données scalaires peuvent être placés dans une
constante : c'est à dire les types booléens, entier, double et
chaîne de caractères (soit bool, integer, double et string).
Pour utiliser ou afficher une constante, on indique seulement son

nom dans l’expression :
Page 110 sur 230

[2020 - 2021]
Dans le navigateur, on a comme résultat :
III.1.6. Les opérateurs
III.1.6.1. Opérateurs Arithmétiques
Les opérations arithmétiques sont : l'addition, la multiplication, la

soustraction et la division (entière et réelle).

Addition +
Soustraction -
Multiplication *
Division /
Modulo %
III.1.6.2. Opérateurs Logiques

NON !
ET && ou and
OU inclusif ||ou or
OU exclusif Xor
Explications :
Soit deux variables : $a et $b;
$a || $b ou $a or $b renvoie true si l'un au moins des termes à la

valeur true
$a && $b ou $a and $b renvoie true si les termes sont tous à la

valeur true
!$a renvoie le contraire (négation) de la valeur de $a
Page 111 sur 230

[2020 - 2021]
$a xor $b renvoie true si et seulement si l'un des termes à la valeur
true
En règle générale, les opérateurs logiques && et || sont

beaucoup plus utilisés que leur équivalent respectif and et or.
III.1.6.3. Opérateurs Relationnels
Les opérateurs relationnels permettent d'effectuer des

comparaisons dans des conditionnelles par exemple, le résultat
ainsi retourné est un booléen.

Strictement inférieur <
à
Strictement supérieur >
Inférieur ou égal à <=
Supérieur ou égal à >=
Égal à ==
Différent de !=
Identique (lorsque les types des variables comparées sont

identiques et les valeurs égales)
Attention : Ne confondez en aucun cas l'affectation (=) avec

l'opérateur qui renvoie un booléen sur la comparaison d'égalité
de deux variables : égal à (==).
III.1.6.4. Opérateurs d„incrémentation et décrémentation.
A. L'incrémentation.
L'incrémentation est équivalente à ces expressions : $i = $i + 1 ou

encore $i+= 1
L'expression suivante : ++$i, a pour effet d'incrémenter de 1 la

valeur de i, et sa valeur de est celle de i après incrémentation.
Page 112 sur 230

[2020 - 2021]
En revanche, lorsque cet opérateur est placé après son unique
opérande, la valeur de l'expression correspondante est celle de la
variable avant incrémentation.
On dit que ++ : est un opérateur de pré incrémentation lorsqu'il est

placé à gauche de son opérande un opérateur de post
incrémentation lorsqu'il est placé à droite de son opérande
B. La décrémentation.
La décrémentation est équivalente à ces expressions : $i = $i - 1 ou

encore $i -= 1
L'expression suivante : --$i, a pour effet de décrémenter de 1 la

valeur de i, et sa valeur de est celle de i après décrémentation.
En revanche, lorsque cet opérateur est placé après son unique

opérande, la valeur de l'expression correspondante est celle de la
variable avant décrémentation.
On dit que -- est :
 un opérateur de pré décrémentation lorsqu'il est placé à

gauche de son opérande
 un opérateur de post décrémentation lorsqu'il est placé à
droite de son opérande.
III.1.6.5. Opérateurs d'affectation élargie
Lorsqu'on veut effectuer une opération dont le résultat

dépend de cette même variable, il est plus simple de recourir
aux opérateurs d'affectation élargie.
Exemple : Au lieu d'écrire ceci : $a = $a + $b;
On peut directement procéder ainsi : $a += $b;
Ce genre d'opérateur est valable pour tous les opérateurs

arithmétiques ainsi que pour l'opérateur de concaténation, par
Page 113 sur 230

[2020 - 2021]
exemple : $a.= " et bienvenue"; équivaut à $a = $a. " et
bienvenue";
III.1.7. Affichage du texte
Bien que nous ayons l’anticiper plus haut, PHP fournit 3 fonctions
permettant d'envoyer du texte au navigateur. Ces fonctions ont la
particularité de pouvoir insérer dans les données envoyées des
valeurs variables, pouvant être fonction d'une valeur récupérée
par exemple, c'est ce qui rend possible la création de pages
dynamiques.
Les 3 fonctions sont les suivantes :
 echo
 print
 printf
III.1.7.1. Echo
La fonction echo permet d'envoyer au navigateur la chaîne de

caractères (délimitée par des guillemets) qui la suit comme nous
l’avions vu et manipuler plusieurs fois plus haut.
La syntaxe de cette fonction est la suivante :
echo Expression;
L'expression peut être une chaîne de caractères ou une

expression que l'interpréteur évalue
III.1.7.2. Print
La fonction print est similaire à la fonction echo. La syntaxe de la

fonction print est la suivante :
print (expression);
Page 114 sur 230
[2020 - 2021]
L'expression peut, comme pour la fonction echo être une chaîne
de caractères ou une expression que l'interpréteur évalue :
Noter qu’avec echo et print on peut placer les expressions à

afficher entres les parenthèses comme vu dans les exemples plus
haut.
Exemple :
III.1.7.3. Printf
La fonction printf () (empruntée au langage C) est rarement

utilisée car sa syntaxe est plus lourde. Toutefois, contrairement aux
deux fonctions précédentes, elle permet un formatage des
données, cela signifie que l'on peut choisir le format dans lequel
une variable sera affichée à l'écran.
La syntaxe de printf () est la suivante : printf (chaîne formatée);
Une chaîne formatée est une chaîne contenant des codes

spéciaux permettant de repérer l'emplacement d'une valeur
à insérer et son format, c'est-à-dire sa représentation. A
chaque code rencontré doit être associé une valeur ou une
variable, que l'on retrouve en paramètre à la fin de la fonction
printf.
Page 115 sur 230
[2020 - 2021]
III.1.8. Les structures de contrôles
III.1.8.1. Les structures alternatives
a. si simple (if)
Cette forme de if simple permet l’exécution d’une série
d’instructions que si la condition est satisfaisante. Au cas contraire
rien ne va se produire.
Syntaxe :
Exemple :
b. if…else
Cette forme a généralement deux blocs des séries d’instruction, le
premier est exécuté si la condition est satisfaisante au cas
contraire le second.
Syntaxe :
Page 116 sur 230

[2020 - 2021]
Exemple :
c. if…else if…else
Cette forme permet d’exécuter plus d’un bloc d’instructions
chacun selon la condition associée.
Syntaxe :
Page 117 sur 230

[2020 - 2021]
Exemple :
La structure else if pouvant se répéter autant de fois que des

conditions prévues l’exigeront.
Noter que, si pour une condition il y a qu’une seule instruction à

exécuter les accolades ne sont pas nécessaires.
L’exemple précédent peut s’écrire autrement de la manière

suivante :
On utilise les opérateurs logiques quand il s’agit de vérifier plus

d’une condition au même moment avant d’exécuter une série
d’instruction.
Page 118 sur 230

[2020 - 2021]
Exemple :
Résultat :
d. La structure switch
La structure switch permet d’éviter la lourdeur de l’écriture de la
structure if…elseif…else. Elle permet en outre une meilleure
lisibilité.
La structure switch a comme syntaxe :
Page 119 sur 230

[2020 - 2021]
Exemple :
Page 120 sur 230

[2020 - 2021]
Résultat :
III.1.8.2. Les structures itératives (boucle)
a. Boucle while
Syntaxe :
Exemple : la table de multiplication par 12
Résultat :
Page 121 sur 230

[2020 - 2021]
b. Boucle do…while
La boucle do…while fait la même chose que while, à la seule
différence que cette dernière exécute au moins une fois
l’instruction avant de vérifier la condition. Syntaxe :
L’exemple précédent peut écrit en utilisant la boucle do…while

comme ceci :
Le résultat est le même avec l’utilisation de la boucle while.
Remarque : Quand on utilise les boucles while et do…while la

variable d’incrément doit être initialisé au départ.
c. Boucle for
Syntaxe :
Page 122 sur 230

[2020 - 2021]
L’exemple précédent peut encore s’écrire en utilisant la boucle
for comme ceci :
Résultat :
III.1.9. Les formats de date
Il existe plusieurs opérateurs pour la fonction date(). Mais nous

n’allons pas utiliser tous ici.
Format Description
J Jour du mois, sans les 0, soit de 1 à 31
D Jour du mois avec 2 chiffres, soit de 01 à 31
D Jour de la semaine sur 3 lettres, en anglais
L Jour de la semaine (en anglais)
M Mois, de 01 à 12
N Mois, sans les 0 initiaux (de 1 à 12)
M trois premières lettres du mois en anglais
Y année en 4 chiffres
Page 123 sur 230
[2020 - 2021]
Y année en 2 chiffres
Z jour de l'année (de 0 à 365)
H heure, de 0 à 12
H heure, de 0 à 24
S secondes avec les 0, de 00 à 59
S secondes, sans les zéros.
A am pour le matin, pm pour l'après-midi
A AM pour le matin, PM pour l'après-midi
Exemple :
Résultat :
III.1.10. Les fonctions
PHP propose une palette approximative de 2000 fonctions

prédéfinies. Toutefois il vous est possible de créer vos propres
bibliothèques de fonctions pour vos usages spécifiques, une
meilleure lisibilité du code et une réutilisation.
III.1.10.1. Définition des fonctions
Les fonctions peuvent se distinguer en deux sous-groupes :
 Celles qui effectuent un traitement (affichage par exemple)

 Celles qui effectuent un traitement et retournent un résultat.
La syntaxe pour définir une fonction est la suivante :
Page 124 sur 230

[2020 - 2021]
L’appel de la fonction se fait de la manière suivante :
Exemple :
Résultat :
Dans le cas suivant un traitement est effectué à l‘intérieur de la

fonction puis retourné par cette dernière. De ce fait la fonction
doit donc être affectée à une variable.
Page 125 sur 230

[2020 - 2021]
Exemple :
III.1.10.2. Librairies des fonctions
Idéalement toutes les fonctions créées devraient être regroupées

dans un même fichier créant ainsi une bibliothèque de fonctions.
Ce fichier sera appelé à l‘intérieur des autres fichiers par le biais de
la fonction include.
Exemple :
page1.php (fichier à inclure)
Page 126 sur 230

[2020 - 2021]
page2.php
Résultat :
Page 127 sur 230

[2020 - 2021]
III.1.11. Tableau
III.1.11.1. Tableau numérotés et tableaux associatifs
Il existe deux types de tableaux de variables sous PHP :
 Les tableaux à index numériques (tableaux numérotés) dans

lesquels l‘accès à la valeur de la variable passe par un index
numérique
Ex : $tableau[0], $tableau[1], $tableau[2], …
 Les tableaux à index associatifs (ou tableaux associatifs) dans

lesquels l‘accès à la valeur de la variable passe par un index
nominatif
Ex : $tableau[nom], $tableau[prénom], $tableau[adresse], …
Page 128 sur 230

[2020 - 2021]
Exemple :
Résultat :
III.1.11.2. Parcours des tableaux
PHP intègre une structure de langage qui permet de parcourir un

à un les éléments d‘un tableau :
foreach ().
Syntaxe :
Page 129 sur 230

[2020 - 2021]
Exemple :
Résultat :
Dans l‘exemple suivant et pour le cas des tableaux associatifs

nous pouvons grâce à la boucle
foreach() aussi bien énumérer le nom des variable que leur valeur.
Page 130 sur 230
[2020 - 2021]
Exemple :
Résultat :
III.1.11.3. Recherche dans un tableau.

 array_key_exists () permet de vérifier si dans un tableau
associatif une variable associative (clef) existe ou non. Elle
retourne donc une valeur booléenne (True ou False).
Syntaxe :
Exemple :
Page 131 sur 230

[2020 - 2021]
Résultat :
 in_array () permet de déterminer si une valeur existe dans le

tableau. Elle retourne donc une valeur booléenne (True ou
False).
Syntaxe :
Exemple :
Page 132 sur 230

[2020 - 2021]
 array_search fonctionne comme in_array : il travaille sur les
valeurs d'un tableau. Si il a trouvé la valeur, array_search
renvoit la clé correspondante (c'est-à-dire le numéro si c'est
un tableau numéroté, ou le nom de la variable si c'est un
tableau associatif). S‘il n'a pas trouvé la valeur, array_search
renvoit false (comme in_array).
Syntaxe :
Page 133 sur 230

[2020 - 2021]
Exemple :
Résultat :
III.1.13. Accès aux fichiers.
III.1.13.1. Ouverture et Fermeture du fichier.
Avant toute opération de lecture ou écriture sur un fichier il y a

nécessité de l‘ouvrir. Et à la fin de tout traitement d‘un fichier il y a
nécessité de le fermer.
Syntaxe :
Page 134 sur 230

[2020 - 2021]
fopen() prend en entrée :
 le nom du fichier (ou même une url)

 le mode d’ouverture du fichier.
Il retourne un handle.
fcloe() prend en entrée le handle envoyé par le fopen.
Les méthodes d’ouverture d’un fichier sont les suivantes :
Méthode Description
‘r’ Ouvre en lecture seule, et place le pointeur de fichier
au début du fichier.
‘r+’ Ouvre en lecture et écriture, et place le pointeur de
fichier au début du fichier.
‘w’ Ouvre en écriture seule ; place le pointeur de fichier au
début du fichier et réduit la taille du
fichier à 0. Si le fichier n'existe pas, on tente de le créer.
‘w+’ Ouvre en lecture et écriture ; place le pointeur de
fichier au début du fichier et réduit la taille du
fichier à 0. Si le fichier n'existe pas, on tente de le créer.
‘a’ Ouvre en écriture seule ; place le pointeur de fichier à
la fin du fichier. Si le fichier n'existe pas, on
tente de le créer.
‘a+’ Ouvre en lecture et écriture ; place le pointeur de
fichier à la fin du fichier. Si le fichier n'existe
pas, on tente de le créer.
Page 135 sur 230
[2020 - 2021]
Exemple :
III.1.13.2. Lecture de fichier.
a) Fgets()
string fgets ( resource handle ,int length )
fgets retourne la chaîne lue jusqu'à la longueur length-1 octet

depuis le pointeur de fichier handle, ou bien la fin du fichier, ou
une nouvelle ligne (qui inclue la valeur retournée), ou encore un
EOF (celui qui arrive en premier). Si aucune longueur n'est fournie,
la longueur par défaut est de 1 ko ou 1024 octets.
Syntaxe :
La fonction prend en paramètre :
 Le handle retourné par la fonction fopen()

 La taille en octet de lecture (optionnel).
Elle retourne en sortie une chaîne de caractères.
Exemple :
L‘exemple suivant va permettre de lire dans un fichier texte

(agent.txt) ligne par ligne puis d‘afficher le résultat à l‘écran en
mettant un numéro à chaque ligne.
Page 136 sur 230
[2020 - 2021]
agent.txt
Code source :
Résultat :
Page 137 sur 230

[2020 - 2021]
b) Fread()
string fread ( resource handle , int length )
Une autre manière de faire de la lecture dans un fichier est

d‘utiliser fread() fread lit jusqu'à length octets dans le fichier
référencé par handle. La lecture s'arrête lorsque length octets ont
été lus, ou que l'on a atteint la fin du fichier, ou qu'une erreur
survient (le premier des trois).
Syntaxe :
Exemple :
Résultat :
c) File()
array file (string filename)
Encore une autre manière de lire dans un fichier est d‘utiliser la

fonction file() Identique à readfile, hormis le fait que file retourne
le fichier dans un tableau. Chaque élément du tableau
correspondant à une ligne du fichier, et les retour−chariots sont
placés en fin de ligne.
Page 138 sur 230

[2020 - 2021]
Syntaxe :
Remarque : la fonction file() ne nécessite pas l’usage de open() et

close().
Exemple :
III.1.13.3. Ecriture dans fichier.
La fonction pour l‘écriture dans un fichier est fputs()
int fputs ( int handle , string string , int length )
fputs écrit le contenu de la chaîne string dans le fichier pointé par

handle. Si la longueur length est fournie, l'écriture s'arrêtera après
length octets, ou à la fin de la chaîne (le premier des deux). fwrite
retourne le nombre d'octets écrits ou FALSE en cas d'erreur.
Syntaxe :
Page 139 sur 230

[2020 - 2021]
Exemple : le contenu de notre fichier au départ :
Le script pour écrire dans le fichier « agent.txt »
Après l’exécution de ce script, on a comme résultat dans le fichier

:
Page 140 sur 230

[2020 - 2021]
III.1.13.4. Fonctions diverses de traitement de fichier.
 feof ($handle) fonction qui retourne un booléen pour indiquer

la fin du fichier parcouru.
Elle prend en entrée le handle retourné par la fonction fopen().
 filesize ($nom_du_fichier) fonction qui retourne la taille du

fichier en octets.
 file_exists ($nom_du_fichier ) fonction qui retourne un booleen
indiquant si le fichier existe ou non.
III.1.14. Passage et transmission de variables
III.1.14.1. Passage et transmission de variables par formulaire
Quand dans un site web un formulaire est rempli et envoyé,

le contenu des champs saisis est transféré à la page destination
sous forme de variables. Ce passage de variables ou de
paramètres peut se faire de deux manières : en GET ou en POST.
Soit le script ci-après :
Page 141 sur 230

[2020 - 2021]
 En GET les paramètres apparaissent associés à l‘url sous
formes de variables séparées par des &
(http://localhost/destination.php?nom=kanyinda&prenom=ka
ms).
 En POST le passage de paramètre se fait de manière invisible.

Selon que la méthode d‘envoi a été du GET ou du POST la
récupération du contenu des variables est faite selon une syntaxe
différente :
Exemple 1 :
Dans l‘exemple suivant le fichier formulaire.html contient le

script html permettant d‘afficher un formulaire et d‘envoyer les
résultats de la saisie à la page resultat.php qui elle les affichera.
formulaire.php
Page 142 sur 230

[2020 - 2021]
resultatl.php
En exécutant à travers le serveur web le fichier formulaire.html, en

remplissant le formulaire et en cliquant sur OK, nous sommes
emmenés vers la page resultat.php qui nous affiche une
phrase composée des champs saisis dans le formulaire. Les
champs saisis sont donc passé de formulaire.html vers resultat.php.
Exemple 2 :
L‘exemple précédent peut tenir dans un seul fichier qui s‘enverrait

à lui-même les paramètres
formulaire.php
Page 143 sur 230

[2020 - 2021]
Remarque :
La définition de la destination du formulaire

(action="formulaire.php") aurait pu ne pas être nominative mais
exploiter une variable serveur PHP_SELF puisque les paramètres
sont envoyées à la page elle-même. Ainsi $_SERVER['PHP_SELF']
retournera naturellement formulaire.php.
Cela donnera donc :
à la place de
III.1.14.2. Passage et transmission de variables par hyperlien.
Des paramètres ou variables peuvent passer d‘une page

source vers une page destination sans transiter par un
formulaire pour leur envoi. Les hyperliens peuvent être des
vecteurs de passage de paramètre.
Syntaxe : d’envoi
La récupération des paramètres dans la page destination se fait

par le tableau $_GET.
Page 144 sur 230

[2020 - 2021]
Exemple :
Dans l‘exemple suivant nous allons créer un fichier menu.php

contenant un menu fait d‘hyperliens. Chacun de ces hyperliens
enverra des paramètres différents. Ce menu sera appelé dans une
page qui réagira différemment selon le paramètre envoyé.
menu.php
page.php
Page 145 sur 230

[2020 - 2021]
En exécutant à travers le serveur web page.php, la sélection
de chacun des menus chargera à nouveau la page en
envoyant des paramètres différents qui seront traités par la page.
III.14.3. Redirection
La fonction essentielle de la redirection consiste à sitôt que

l‘instruction a été trouvée de l‘exécuter en redirigeant l‘utilisateur
vers la page spécifiée. Header ()
Int header (« Location : string destination).
Syntaxe :
Exemple :
Vous serez automatiquement redirectionné vers le site de Google.
Un autre exemple :
Vous serez automatiquement redirectionné vers la page

menu.php de votre répertoire web.
Page 146 sur 230
[2020 - 2021]
Remarque importante
La fonction header doit être appelée avant la première balise

HTML, et avant n'importe quel envoi de commande PHP. C'est
une erreur très courante que de lire du code avec la fonction
include et d'avoir des espaces ou des lignes vides dans ce code
qui produisent un début de sortie avant que header n'ait été
appelé.
III.1.15. Variables persistantes: cookies et session.
Les variables ont une durée de vie limitée : celle du script qui les
appelle. Ainsi que nous l‘avons vu dans les précédentes l‘unique
moyen de transmettre ces variables de pages en pages consiste à
effectuer un passage de paramètres (méthode GET ou POST)
ce qui d‘une manière générale est contraignant à plus d‘un
titre :
 Contraignant pour le développeur puisque il doit gérer par

code ces passages de paramètres,
 Contraignant pour la sécurité si l‘on ne désire pas que le client
accède à certaines informations.
PHP offre un mécanisme de stockage d‘informations de manière
persistante. Autrement dit tout au long de la navigation à
l‘intérieur d‘un site des variables seront accessibles sans avoir pour
autant à les passer en paramètres.
Deux types de variables persistantes existent :
 Les variables persistantes côté client : les cookies

 Les variables persistantes côté serveur : la session
III.1.15.1. Les Cookies.
Les cookies sont un mécanisme d'enregistrement d'informations

sur le client, et de lecture de ces informations. Ce système
Page 147 sur 230

[2020 - 2021]
permet d'authentifier et de suivre les visiteurs d‘un site. PHP
supporte les cookies de manière transparente.
a) setcookie() : Cette fonction permet de définir un cookie

qui sera envoyé avec le reste des en−têtes.
int setcookie(string nom_variableb ,[string valeur_variable ],[int
expiration ],[string chemin ],[string domaine ],[int securité ])
 nom_variable : nom de la variable a stocker

 valeur_variable : Valeur de la variable a stocker
 expiration : durée pour l'expiration du cookie
 chemin : le chemin du répertoire ou doit être lu le
cookie
 domaine : le nom domaine
 securité : le type d'entête (http, https)
Tous les arguments sauf nom_variable sont optionnels. A l‘instar de
la fonction header(), setcookie() doit impérativement être
appelée avant tout affichage de texte.
Syntaxe :
Exemple :
Page 148 sur 230

[2020 - 2021]
III.1.15.1.1. Lire un Cookie.
Syntaxe :
III.1.16. Les Sessions
La gestion des sessions avec PHP est un moyen de sauver des

informations entre deux accès. Cela permet notamment de
construire des applications personnalisées, et d'accroître l'attrait
de votre site.
Chaque visiteur qui accède à votre site se voit assigner un numéro

d'identifiant, appelé plus loin "identifiant de session". Celui−ci est
enregistré soit dans un cookie, chez le client, soit dans l'URL. Les
sessions vous permettront d'enregistrer des variables pour les
préserver et les réutiliser tout au long des visites de votre site.
Lorsqu'un visiteur accède à votre site, PHP vérifiera si une session a
déjà été ouverte. Si une telle session existe déjà,
l'environnement précédent sera recréé. L‘inconvénient
précédemment évoqué concernant les cookies est dépassé dans
la mesure où tout est stocké sur le serveur même.
a) session_start()
session_start() permet de démarrer une session pour le client.
Syntaxe :
Page 149 sur 230

[2020 - 2021]
Cette commande doit figurer dans toutes les pages elle perpétue
le transfert des variables de session au cours de la navigation dans
le site. Le compilateur PHP va alors créer alors dans le répertoire
de sauvegarde des sessions, un fichier dont le nom commence
par sess_ et se termine par un identifiant généré de manière
aléatoire.
L'identifiant de session peut être affiché par la commande

session_id(). Vous pouvez également gérer vous-même ce nom
de session en utilisant session_name() avant le démarrage de la
session. La durée de vie d‘une session est paramétrée par
session.cache_expire
La session est perdue définitivement pour l'utilisateur lorsque :
1. Il n'a exécuté aucune action (POST ou GET) au-delà de la

durée de vie définie.
2. Il ferme son navigateur.
3. La commande session_destroy est appelée.
b) Ajouter des variables dans la session

L‘ajout de variable dans l‘environnement de session se fait au
travers d‘une affectation classique. Toutefois la variable session
définie doit être appelée via le tableau $_SESSION[].
Syntaxe :
Page 150 sur 230

[2020 - 2021]
Exemple :
Dans cet exemple une variable du non de pays contenant la

valeur "RD Congo" a été enregistrée dans la session courante.
c) Lire une variable dans la session

Syntaxe :
Exemple :
Résultat :
Page 151 sur 230

[2020 - 2021]
d) Suppression d‟une variable de la session
Syntaxe :
Exemple :
Résultat :
e) Supprimer l„environnement de session

Dans l‘exemple précédent nous avons vu comment supprimer
une variable de l‘environnement de session. Il reste toutefois
possible de supprimer tout un environnement de session donné.
Pour cela il suffit de vider le tableau global de la session en le
réinitialisant.
Page 152 sur 230

[2020 - 2021]
Syntaxe :
III.2. Quelques notions sur MySQL
III.2.1. Introduction
MySQL dérive directement de SQL (Structured Query

Language) qui est un langage de requête vers les bases de
données exploitant le modèle relationnel. Il en reprend la
syntaxe mais n‘en conserve pas toute la puissance puisque
de nombreuses fonctionnalités de SQL n‘apparaissent pas
dans MySQL (sélections imbriquées, clés étrangères…)
Le serveur de base de données MySQL est très souvent utilisé avec

le langage de création de pages web dynamiques : PHP.
III.2.2. Syntaxe MySQL
III.2.2.1. Définition de données
A. Les tables
Les tables sont les entités de base permettant de stocker les
informations au sein d‘une base de données. Cependant, avant
de créer une table il faudra d‘abord créer la base des données
qui la contiendra.
 Pour créer une base de données on utilise la syntaxe

suivante :
nom_de_la_base désigne le nom attribué à notre base de

données.
Page 153 sur 230

[2020 - 2021]
 Pour supprimer une base de données existante, on utilise
l‘instruction :
 Pour créer une table, on utilise la syntaxe:
 nom_de_la_table désigne le nom que l‘on attribue à la table

créée. Il doit commencer par une lettre et ne doit pas contenir
plus de 254 caractères.
Les caractères blanc et /,*,-, +, « »(,)[,],{,} ;$%^& !@#<;>…sont
également interdits ;
 nom_de_la_colonnei désigne le nom du champ i ;
 Type_de_donnée désigne le type des données que doit recevoir
le champ.
 Les types utilisés en MySQL sont :

 Int : entier ;
 SmallInt : entier signé de 16 bits (de -32768 à 32757) ;
 Float : nombre avec virgule flottante ;
 Decimal(x,y) ou Number(x,y) : décimal ayant x chiffres avant la
virgule et y chiffres après la virgule ;
 Real : réel flottant codé sur 24 bits ;
 Char (n) : Chaîne des caractères dont la longueur fixe
égale à n, avec n< 16383 ;
 Varchar(n) : chaîne des caractères de longueur variable, dont
la taille maximale est n, avec n<16383 ;
 Datetime ou Date : date sous la forme jours/ mois/année.
 Time : heure sous la forme heure: minutes: secondes: tierces ;
Page 154 sur 230

[2020 - 2021]
 Contrainte désigne la contrainte qu‘on attribue à la colonne
; elle n‘est pas obligatoire.
Elle peut être nommée ou non.
 Pour ajouter une colonne à une table on utilise la syntaxe :
 Si on réalise qu‘à la création de notre table, on a

déclaré une colonne qui n‘est plus nécessaire ; on peut la
supprimer en utilisant la syntaxe :
 Il possible que lors de la création de la table, on déclare une

colonne sous un type quelconque et que plus tard, en
travaillant, on se rende compte que le type déclaré est
inefficace ou qu‘il occupe inutilement trop d‘espace
mémoire.
Pour remédier à ce problème, il faudra changer le type
cette colonne. Ceci est possible grâce à l‘instruction:
Type_de_donnees est le nouveau type attribué à la colonne.
 Si une table de notre base des données ne sert plus a

rien et qu‘on souhaite la supprimer; il faudra utiliser
l‘instruction:
Page 155 sur 230

[2020 - 2021]
 Il est possible de ne supprimer que les donnes se
trouvant dans une table, sans supprimer cette dernière.
Pour y parvenir, il faudra utiliser l‘instruction :
B. Manipulations de données.
B.1. Interrogation de la base de données
L‘interrogation d‘une base de données est l‘opération la plus

fréquente, voire la plus intéressante effectuée sur celle-ci. Elle est
effectuée grâce à la syntaxe suivante :
 L'option DISTINCT permet de ne sélectionner que les

valeurs distinctes de la colonne (éliminer les doublons).
L‘option ALL permet le contraire ;
 Attributs désigne les colonnes à sélectionner. Pour sélectionner
toutes les colonnes, il faut saisir le caractère * ;
 relation désigne les tables sur lesquelles s‘effectue le traitement
;
 Condition est la condition de sélection;
 La clause GROUP BY permet de regrouper les lignes ayant les
valeurs identiques dans une ou plusieurs colonnes issues de
l‘instruction SELECT, en une ligne ;
 La clause HAVING permet de restreindre la sélection des
groupes figurant dans le résultat. Elle précise la condition à
laquelle chaque groupe doit répondre ;
Page 156 sur 230

[2020 - 2021]
 L‘instruction ORDER BY nom_de_la_colonne ASC/DESC permet
de classer les valeurs de la colonne spécifiée par ordre
Croissant/Décroissant.
 L‘instruction LIMIT Permet de limiter le nombre de lignes du
résultat.
B.2. Mise à jour des tables

 Pour ajouter des informations dans une table on utilise la
syntaxe suivant :
 Pour modifier un ou des enregistrement(s) d‘une relation,

il faut préciser un critère de sélection des enregistrements
à modifier (clause WHERE), il faut aussi dire quels sont les
attributs dont on va modifier la valeur et quelles sont ces
nouvelles valeurs (clause SET).
Sa syntaxe est :
Exemple :
Cet exemple modifie le numéro de téléphone de kanyinda kam‘s.

LOW_PRORITY est une option un peu spéciale qui permet de
n‘appliquer la ou les modification(s) qu‘une fois que plus
personne n‘est en train de lire dans la relation.
Il est possible de modifier les valeurs d‘autant d‘attributs que la
relation en contient.
Exemple pour modifier plusieurs attributs :
Page 157 sur 230

[2020 - 2021]
 Pour supprimer des informations dans une table on utilise la
syntaxe suivant :
Exemple :
Pour vider une table de tous ces éléments, ne pas mettre de

clause WHERE. Cela efface et recrée la table, au lieu de supprimer
un à un chacun des tuples de la table (ce qui serait très long).
Exemple :
C. Lire des données
Dans cette partie, nous retournons à nos pages PHP. A partir de

maintenant, nous allons apprendre à communiquer avec une
base de données via PHP.
C. 1. Se connecter à la base de données en PHP
En effet, PHP propose plusieurs moyens de se connecter à une

base de données MySQL.
 L’extension mysql_ : ce sont des fonctions qui permettent
d’accéder à une base de données MySQL et donc
communiquer avec MySQL. Leur nom commence toujours
par mysql_. Toutefois, ces fonctions sont vieilles et donc
recommandé de plus les utiliser jusqu’à l’heure actuelle.
 L’extension mysqli_ : ce sont des fonctions améliorées
d’accès à MySQL.
Page 158 sur 230

[2020 - 2021]
 L’extension PDO : c’est un outil complet qui permet
d’accéder à n’importe type de base de données. On peut
donc l’utiliser pour se connecter aussi bien à MySQL que SQL
Serveur, PostgreSQL ou Oracle.
Nous allons ici utiliser PDO car c’est cette méthode d’accès aux
bases de données qui est la plus utilisée dans les versions actuelles
de PHP. D’autre part, le gros avantage de PDO est qu’on peut
l’utiliser de la même manière pour se connecter à n’importe quel
autre type de base de données (PostgreSQ, Oracle…) comme
illustre la figure suivante :
Noter que PDO est normalement activé par défaut quand on

utiliser MySQL, surtout dans PhpMyAdmin. Pour vérifier, il suffit de se
rendre sur l’icône de Wamp dans la barre de tâche, faire un clic
gauche dessus, puis aller dans le menu PHP/Extensions PHP et
vérifier que php_pdo_mysql est bien coché. L‘utilisation de MySQL
avec PHP nécessite quatre renseignements :
 Le nom de l‟hôte : c’est l’adresse de l’ordinateur où MySQL
est installé (comme une adresse IP). Le plus souvent, MySQL
est installé sur le même ordinateur que PHP. Dans ce cas on
met la valeur localhost (signifiant sur le même ordinateur)
Page 159 sur 230

[2020 - 2021]
 La base : c’est le nom de la base de données à laquelle on
veut se connecter. Souvent créée dans le serveur MySQL
(phpMyAdmin)
 Le login : il permet d’identifier l’utilisateur qui veut se
connecter.
 Le mot de passe
Etant donné qu’on fait souvent des tests sur l’ordinateur chez soi,
on dit qu’on travaille en local. Par conséquent, le nom de l’hôte
sera localhost.
Quant au login et au mot de passe, par défaut le login est root et il

n’y a pas de mot de passe. Vous pouvez donc définir un autre
login et attribuer un mot de passe différent de vide.
Voici donc comment on doit faire pour se connecter à MySQL via
PDO :
Il faut reconnaitre qu’il contient quelques nouveautés. En effet,

PDO est ce qu’on appelle une extension orienté objet. C’est une
façon de programmer un peu différente des fonctions classiques.
La programmation Orienté Objet (POO) est prévue dans le
chapitre suivant.
Si on a renseigné les bonnes informations (nom de l’hôte, de la

base de données, le login et le mot de passe), rien ne devrait
s’afficher dans le navigateur. Toutefois, s’il y a une erreur, PHP
risque d’afficher toute la ligne qui pose le problème.
Il préférable de gérer les erreurs. En cas de ceci, PDO renvoie ce

qu’on appelle une exception qui permet de capturer l’erreur.
Voici comme faire pour gérer les erreurs qui peuvent survenir :
Page 160 sur 230
[2020 - 2021]
Là, PHP essaie d’exécuter les instructions à l’intérieur du bloc try.
S’il y a une erreur, il rentre dans le bloc catch et fait ce qu’on lui
demande.
Si au contraire tout se passe bien, PHP poursuit l’exécution du

code et ne lit pas ce qu’il y a dans le bloc catch et la page ne
devrait donc rien afficher pour le moment.
Noter que vous devrez remplacer nom_de_BDD par le vrai nom de

votre base de données. Ceci étant le fichier de connexion est
finalement :
Page 161 sur 230

[2020 - 2021]
C. 2. Récupérer les données
Dans un premier temps, on va apprendre d’abord à lire les
informations de la base de données. Ensuite viendrons les mises à
jour des tables de la base de données.
Pour travailler ici, il nous faut une base de données « toute prête »
qui va nous servir de support.
On se rend alors dans le phpMyAdmin pour créer la base de
données ainsi que ses objets.
Une fois le serveur lancé ainsi que tous les services, voici les étapes
à suivre pour la création de la base de données et ses suites :
- Aller sur l’icône de WampServer dans la barre de tâche ;
- Faire un clic gauche dessus ;
- Choisir le menu phpMyAdmin
Cette fenêtre devrait alors s’afficher dans le navigateur web
comme ceci :
Par souci d’espace, nous avons représenté partiellement cette

fenêtre.
Le menu qui nous intéresse pour le moment est « SQL » puisque
nous allons beaucoup plus utiliser les instructions pour la suite.
Page 162 sur 230

[2020 - 2021]
Nous allons créer une base de données nommée gstArticle et
seulement une table nommée article à titre d’exemple. Dans la
zone de requête SQL saisissez ce code :
Après vous pouvez cliquer sur le bouton « exécuter » en bas vers la

droite. S’il n’y a aucune erreur dans le script et que tout s’est bien
passé, après le clic du bouton « exécuter » vous devez voir
s’afficher la base de données récemment créée parmi les autres
dans l’onglet gauche du phpMyAdmin.
! Astuce : Le champ Code étant un INT, pour faire en sorte qu’il soit
auto incrément après que la table ait été créée, il suffit de taper le
code SQL suivant.
Page 163 sur 230

[2020 - 2021]
Sachant qu’on est sur la base de données qui contient la table
bien sûr. On pourrait bien évidemment le faire au moment de la
création de la table comme ceci :
Insérons quand même quelques lignes d’enregistrements dans la

table article pour nous s’en servir. Toujours à l’aide des scripts SQL.
Vous devez d’abord sélectionner la base de données et/ou
pointer la table concernée, puis cliquez à nouveau sur le menu
SQL.
Après la saisie de code, cliquer sur le bouton « exécuter », après

quelques secondes, afficher les informations de la table toujours à
l’aide de SQL :
Résultat :
Page 164 sur 230

[2020 - 2021]
Créons maintenant une page PHP qui va nous servir d’afficher les
informations contenant la table article.
Pour récupérer des informations de la base de données, on a
besoin de notre objet représentant la connexion à la base de
données. Pour notre cas ici $conex, et la requête de la sélection
sera comme ceci :
On demande ainsi à effectuer une requête sur la base de

données.
«query » en anglais signifie « requête ». On récupère ce que la
base de données nous renvoyé dans un autre objet que l’on a
appelé ici $req.
C. 2.1. Notre première requête SQL
Effectuons la requête avec la méthode que l’on vient de

découvrir :
Dans notre fichier (exemple index.php) que nous voulons afficher
les informations, nous pouvons inclure directement le fichier
contant les instructions de connexion à la base de données
supposé créé au préalable. Cette méthode permet de plus
réécrire à chaque fois les instructions de connexion à la base de
données dans chaque fichier .php.
Page 165 sur 230

[2020 - 2021]
Pour notre cas, le fichier s’appelle connexionDB.php. (Nota : le
nom de notre base de données d’exemple est gstarticle, à bien
vérifier dans le fichier de connexion).
D’où, nous aurons en premier lieu dans le fichier index.php :
Ensuite viendront les autres instructions (requête et autres).

La requête de sélection est donc :
L’objet $req contient quelque chose d’inexploitable. MySQL nous

renvoie beaucoup d’informations qu’il faut organiser.
Pour récupérer une entrée, on prend la réponse ($req) de MySQL
et on y exécute fetch(), ce qui nous renvoie la première ligne.
fetch en anglais signifie « va chercher ».

$ligne est un array (tableau) qui contient champ par champ les
valeurs de la première entrée.
Pour afficher les informations que contient la variable $ligne on
aura comme instruction :
Page 166 sur 230

[2020 - 2021]
Remarquez que nous avons qu’un article affiché, alors que nous
avions plusieurs articles dans la base de données.
Pour résoudre ce problème, on doit recourir à une boucle qui va
permettre de parcourir les entrées une à une jusqu’à la dernière.
Chaque fois qu’on va appeler $ligne=$req->fetch(), on passera à
l’entrée suivante. La boucle est donc répétée autant de fois qu’il y
a d’entrées dans la table.
De ce fait, nous résumons tout ce qu’il nous faut pour avoir le
résultat entendu comme ceci dans le fichier qui va afficher les
informations (index.php pour notre cas ici) :
Page 167 sur 230

[2020 - 2021]
Noter que l’instruction $req->closeCursor() « fermeture du curseur
d’analyse de résultat » signifie en d’autre termes qu’on doit
effectuer cet appel closeCursor() chaque fois qu’on a fini de
traiter le retour d’une requête, afin d’éviter d’avoir des problèmes
à la requête suivante.
C. 2.2. Le critère de la sélection avec la close WHERE
Grâce au mot-clé WHERE, on va pouvoir trier nos données.

Supposons que nous voulons afficher uniquement l’article ayant
comme libelle ‘Clavier’. La requête au début sera la même
qu’avant, mais on rajoutera à la fin WHERE Libelle=‟Clavier‟.
Cela nous donne la requête suivante :
Si on essaye de voir de nouveau notre fichier d’affichage on a :
Page 168 sur 230

[2020 - 2021]
Résultat :
Par ailleurs, il possible de combiner plusieurs conditions dans

WHERE. Par exemple, si on veut afficher tous les articles dont le
libelle termine par « r » et le prix soit supérieur à « 100 ». On
combinera les critères de sélection à l’aide du mot-clé AND
(signifiant : ET). Cela donne ceci :
Page 169 sur 230

[2020 - 2021]
Résultat :
Un petit rappel de requête SQL :

Like opérateur SQL (signifie comme)
% devant la valeur (r pour cet exemple) de critère voulant dire le
champ dont la valeur termine par (r).
% derrière la valeur de critère veut dire le champ dont la valeur
commence par…
like Comme ‘Souris’

„Souris‟
„% S‟ Terminé par ‘S’
„S%‟ Commence par ‘S’
C. 2.3. Construire des requêtes en fonction de variables

Les requêtes que nous avons étudiées jusqu’ici étant simple et
effectuant toujours la même opération. Or les choses deviennent
intéressantes quand on utilise des variables de PHP dans les
requêtes.
a. Concaténer une variable dans une requête : La mauvaise idée

Prenons cette requête qui récupère les articles dont le libelle égal
à « Ordinateur »
Au lieu de toujours afficher les articles dont le libelle égal à

« Ordinateur », on aimerait que cette requête soit capable de
s’adapter au libelle défini dans une variable, par exemple $_GET
[„libelle‟]. Ainsi la requête pourrait s’adapter en fonction de la
demande de l’utilisateur.
Page 170 sur 230

[2020 - 2021]
On pourrait être tenté de concaténer la variable dans la requête,
comme ceci :
Il est nécessaire d’entourer la chaine de caractères d’apostrophe

comme indiqué ci-dessus, d’où la présence d’antislash pour
insérer les apostrophes : \’.
Bien que ce code fonctionne, c’est l’illustration parfaite de ce qu‟il
ne faut pas faire et que pourtant beaucoup de gens le font
encore. En effet, si la variable $_GET[„libelle‟] a été modifiée par un
visiteur (et nous savons à quel point il ne faut pas faire confiance à
l’utilisateur), il y a un gros risque de faille de sécurité qu’on appelle
injection SQL. Un visiteur pourrait s’amuser à insérer une requête
SQL au milieu de la nôtre et potentiellement lire tout le contenu de
notre base de données.
Pour utiliser un autre moyen plus sûr d’adapter nos requêtes en
fonction de variable, nous utiliserons les requêtes préparées.
b. Les requêtes préparées

Le système de requêtes préparées a l’avantage d’être beaucoup
plus sûr mais aussi plus rapide pour la base de données si la
requête est exécutée plusieurs fois. C’est ce qui est préconisé
d’utiliser si on veut adapter une requête en fonction d’une ou
plusieurs variables.
 Avec des marqueurs « ? »

Dans un premier temps, on prépare la requête sans sa partie
variable, que l’on représentera avec un marqueur sous forme de
point d’interrogation :
Page 171 sur 230

[2020 - 2021]
Au lieu d’exécuter la requête avec query() comme la dernière
fois, remarquez qu’ici on a appelé la méthode preprare() qui a
comme paramètre notre requête SQL.
La requête est alors prête, sans sa partie variable. Maintenant,
nous allons exécuter la requête en appelant la méthode
execute() et en lui transmettant la liste de paramètres :
La requête est alors exécuter à l’aide de paramètre que l’on

indique sous forme d’array.
S’il y a plusieurs marqueurs, il faut indiquer les paramètres dans le
bon ordre.
Exemple :
Le premier point d’interrogation de la requête sera remplacé par

le contenu de la variable $_GET[„libele‟], et le second par le
contenu de $_GET[„prix‟]. Le contenu de ces variables aura été
automatiquement sécurisé pour prévenir les risques d’injection
SQL.
Notre exemple résumé précédent peut alors s’écrire à l’aide de la
requête prépare avec le marqueur « ? » comme ceci :
Page 172 sur 230

[2020 - 2021]
 Avec des marqueurs nominatifs
Si la requête contient beaucoup de parties variables, il peut être
plus pratique de nommer les marqueurs plutôt que d’utiliser des
marqueurs point d’interrogation.
Le principe est simple, pour comprendre la différence entre
marqueur point d’interrogation ( ?) et le marqueur nominatif, dans
nominatif on met après l’opérateur de tri deux point (:) suivi d’un
significatif désignant le champ de critère.
Bref ! Au lieu de faire par exemple :
Marqueur point d‟interrogation Marqueur nominatif
Champ = ? Champ = : champ
Page 173 sur 230

[2020 - 2021]
Finalement notre exemple résumé peut encore s’écrire à l’aide de
requête préparée avec le marqueur nominatif comme ceci :
Cette fois-ci, ces marqueurs sont remplacés par les variables à

l’aide d’un array (tableau) associatif. Quand il y a beaucoup de
paramètres, cela permet parfois d’avoir plus de clarté. De plus,
contrairement aux points d’interrogation, on n’est cette fois plus
obligé d’envoyer les variables dans le même ordre que la requête.
C.2.4. Traquer les erreurs
Lorsqu’une requête SQL « plante », bien souvent PHP vous dira qu’il
a eu une erreur à la ligne du fetch :
Page 174 sur 230

[2020 - 2021]
Exemple :
Et ce n’est pas précis voire même incompréhensible. A dire vrai,

ce n’est pas la ligne fetch qui est en cause. C’est souvent l’erreur
d’avoir mal écrit la requête SQL quelque part plus haut.
Pour éviter ce problème et surtout pour avoir un message

compréhensible en cas d’erreur, il faut rajouter le code or die
(print_r($conex->errorInfo())) sur la même ligne que la requête
pour afficher des détails sur l’erreur.
Cas d‟une requête simple.

Exemple
En essayant d’exécuter ces script, voici le résultat dans le

navigateur :
Du coup, on déjà le problème qui se passe. Pour cet exemple,

remarquez nous avons mal écrit le ‘Libelles‟, alors qu’il fallait écrit
‘Libelle‟.
Page 175 sur 230
[2020 - 2021]
Bien que cela soit de l’anglais, mais c’est déjà beaucoup plus
précis que l’erreur précédent. Si on essaye de traduire : cela
signifie : « La colonne Libelles est introuvable dans la liste des
champs » en effet, il n’y a aucun champ qui s’appelle Libelles
dans la liste de champs de table.
Cas d‟une requête préparée.

Si on utilise une requête préparée, on rajoute le code qui affiche
l’erreur sur la même ligne que le execute(). Mais cette fois-ci, on
appelle la méthode erroInfo() sur l’objet $req et non $conex.
Exemple :
C. 3. Mise à jour de tables
La récupération des informations de notre base de données étant

détaillée en long et large, il est maintenant temps de découvrir
comment on peut ajouter, supprimer et modifier des données
dans la base. Pour cela, nous allons nous servir des requêtes SQL
fondamentales qu’il faut connaitre : INSERT, UPDATE et DELETE.
C.3.1. Ajout des données (INSERT)

La requête permettant d’ajouter une entrée étant détaillée plus
haut.
En voici un exemple :
Page 176 sur 230

[2020 - 2021]
Les (25) ici n’a pas besoin d’être entouré d’apostrophe. Seules les
chaines de caractères les nécessitent.
Dans notre table le champ Code est de toute façon
automatiquement rempli par MySQL, il est donc inutile de le liste.
Application en PHP :
En utilisant cette requête SQL au sein d’un script PHP, cette fois-ci,
au lieu de faire appel à query() (que l’on a utilisé dans le point
précédent qui portait sur la récupération de données), on va
utiliser exec() qui est prévue exécuter des modifications sur la base
de données.
Créons un fichier nommé insertion.php pour pratique ceci et il faut
inclure le fichier de connexion à la base de données (rappelez-
vous : connexinDB.php).
Voici l’intégralité de code d’insertion :
Page 177 sur 230

[2020 - 2021]
Insertion de données variables grâce à une requête préparée.
 Avec des marqueurs « ? »
 Avec des marqueurs nominatifs
Comme pour récupération, nous avons utilisé le $_GET, nous

utilisons le $_POST pour les données (beaucoup plus issu d’un
formulaire) pour l’insertion une entrée.
Exemple :
Page 178 sur 230

[2020 - 2021]
C.3.2. Modification des données (UPDATE)
La requête « UPDATE » permet de modifier une entrée existante
déjà dans la base comme nous l’avons détaillé plus haut :
Exemple :
Application en PHP
On crée un fichier modification.php qui nous servira de
comprendre ceci :
Page 179 sur 230

[2020 - 2021]
Modification grâce aux requêtes préparées :
 Avec les marqueurs ?
 Avec les marqueurs nominatifs
C.3.3. Suppression des données (DELETE)

Voici une dernière requête entendue (Delete).
Exemple :
Page 180 sur 230
[2020 - 2021]
Application en PHP
Suppression avec les requêtes préparées :

 Avec les marqueurs ?
 Avec les marqueurs nominatifs
Page 181 sur 230

[2020 - 2021]
D.La programmation Orientée Objet (POO)
Il y a nombreuses façons de programmer en PHP. C’est ce qui fait

sa force. On peut en effet commencer à créer ses premières
pages basiques en PHP avec très peu de connaissance au
départ, mais il est possible de programmer avec des outils
avancés, plus complexes mais aussi plus solides et plus flexibles.
La programmation orientée objet est une technique de
programmation célèbre qui existe depuis des années maintenant.
PHP ne l’a pas inventée, d’autres langages comme le C++, C#,
Java, Python l’utilisaient bien évidemment.
La POO ne vas pas améliorer subitement la qualité de votre site
comme par magie. En revanche, elle va vous aider à mieux
organiser votre code, à le préparer à des futures évolutions et à
rendre certaines portions réutilisables pour gagner en temps et en
clarté.
D.1. Qu‟est-ce qu‟un objet ?
Un objet est une instance de la classe. C’est-à-dire une variable

dont le type est la classe.
De ceci, nous disons qu’une classe permet de regrouper plus
objets ayant tous des propriétés et des structures communes. On
peut donc considérer une classe comme un plan, une description
de l’objet. On peut prendre l’exemple d’un plan de construction
d’une maison. On peut créer plusieurs maisons basées sur un plan
de construction. De même on peut créer plusieurs à partir d’une
classe.
Le schéma suivant essayer d’expliciter toute ces théories :
Page 182 sur 230

[2020 - 2021]
Classe
(Plan de construction)
Objet
(Instance d’une classe)
Objet
(Instance d’une classe)
Objet Objet
(Instance d’une classe) (Instance d’une classe)
Par conséquent, si l’in reprend le code précédent, vous aurez

deviné que :
 $conex est l’obejt ;

 PDO est le nom de la classe sur laquelle est basé l’objet
Un objet, est un mélange de fonction et de variables. Lorsqu’on
l’utilise, on fait appel à ses fonctions :
Exemple :
Cela signifie : exécuter la fonction query() de l’objet $conex, puis

la fonction prepare(), puis la fonction execute(), etc. la flèche ->
est propre aux objets. Comprenez donc que l’on exécute la
Page 183 sur 230
[2020 - 2021]
fonction query() de l’objet $conex qui représente la connexion à
la base de données.
Autre exemple, imaginaire cette fois pour la bonne
compréhension :
Ici, nous avons plusieurs objets représentant des ordinateurs

($ordinateur1 et $ordinateur2), mais si on appelle que la fonction
allumer() de l’ordinateur 1, c’est donc le seul qui sera démarré.
Un des avantages de la programmation orienté objet est sa
lisibilité. Ce code est facile à lire et à comprendre.
D.2. Création d‟une classe
Pour nos exemples, nous allons imaginer que nous créons une
classe Etudiant qui représente un étudiant de notre université.
Nous pouvons charger cet étudiant à partir des informations
enregistrées en base de données, lui demander son matricule, son
nom, son prenom, son age, sa date de naissance, mais lui
modifier, lui supprimer(en cas de renvoi). Bien évidemment n’est
qu’un exemple. Il est donc recommandé de créer un fichier PHP
qui contiendra uniquement la définition de la classe et que l’on
inclura à chaque fois qu’on en a besoin. Notre fichier sera donc
nommé Etudiant.class.php
Il est de bonne habitude de donner l’extension .class.php aux
fichiers contenant des classes pour bien les distinguer des autres
fichiers dans un projet.
Après la création du fichier Etudiant.class.php, voici comment on

peut définir notre classe :
Page 184 sur 230

[2020 - 2021]
A l’intérieur des accolades, nous allons définir des variables et des
fonctions membres de la classe.
NB. Certains développeurs utilisent d’autres mots pour désigner les
variables et fonctions membre des classes. Les voici :
 variables membres : aussi appelés attributs ou propriétés ;
 fonctions membres : aussi appelées méthodes
1. les variables membres.

Les variables permettent de définir un objet. Dans notre exemple
un étudiant a :
- un matricule ;
- un nom ;
- un prenom ;
- un âge ;
- une date de naissance.
Cela étant un exemple, toutefois on peut ajouter d’autres pour
l’exhaustivité.
Page 185 sur 230

[2020 - 2021]
Nous indiquons que notre classe Etudiant est compose de cinq
variables (propriétés ou attributs) : $matricule, $nom, $prenom,
$age, $datenais et pour l’instant, elles ne possèdent aucune
valeur.
2. Les fonctions membres

Les fonctions ont pour rôle :
- Soit de lire ou mettre à jour les variables. On parle de

fonction getters et setters ;
- Soit d’exécuter des actions plus complexes (comme pour
notre exemple de la classe Etudiant : modifier, supprimer…).
Ce sont des fonctions qui commencent par get (si l’on veut
récupérer le contenu d’une variable) ou par set (si l’on veut
modifier le contenu d’une variable).
Par exemple, le matricule : on va créer une fonction getMatricule

qui renvoie le matricule et setMatricule qui modifie ce dernier.
Ainsi notre classe Etudiant devient :
Page 186 sur 230

[2020 - 2021]
Page 187 sur 230
[2020 - 2021]
La variable est accessible dans les fonctions à l’aide de préfixe
$this->. Cela signifie : « La variable de cet objet ». Le préfixe $this->
permet d’indiquer que c’est la variable membre de la classe sur
laquelle on travaille que l’on veut récupérer. On fait de même
avec une fonction par exemple (setMatricule) qui prend en
paramètre le nouveau matricule de l’étudiant et qui le place dans
$this->matricule.
En fait, les getters et setters sont souvent des fonctions simples,

mais l’intérêt est qu’on peut faire des calculs ou des vérifications
sur les données. Par exemple, on pourrait améliorer la fonction
setNom comme ceci :
Ainsi, on autorise le changement de nom uniquement s’il

correspond à certains critères : nom non vide et longueur
supérieur à trois caractères.
Les autres fonctions
Nous pouvons introduire n’importe quel autre type de fonction

dans la classe Etudiant et pas seulement des fonctions qui se
contentent de modifier les variables. A nous de voir quelles actions
on veut pouvoir effectuer sur l’étudiant ; l’afficher, le modifier,
etc…
Exemple :
Page 188 sur 230

[2020 - 2021]
La fonction afficher() se charge de dire bonjour étudiant et
d’indiquer son âge. Remarquer qu’on doit placer là aussi le préfixe
$this-> devant le nom d’une fonction de la classe qu’on appelle.
Créer un objet à partir de la classe
Actuellement, nous devons avoir un fichier Etudiant.class.php qui

contient la définition de la classe, c’est-à-dire les de constructions
de nos futures objets comme ceci : par souci d’espace, on n’a
présenté que les fonctions. Les attributs étant déjà mis au
préalable.
Page 189 sur 230

[2020 - 2021]
Page 190 sur 230
[2020 - 2021]
Maintenant que la classe est prête (même si on peut encore
l’améliorer), on peut commencer à l’utiliser et donc à créer des
objets. De ce fait, on va créer un
fichier index.php dans lequel on va créer et utiliser un objet de

type Etudiant :
On commence par inclure la définition de la classe Etudiant qui

est située dans le Etudiant.class.php. On utilise donc pour cela la
function_oncle() qui assure que le fichier n’a pas déjà été inclus
ailleurs dans la page, ce qui aurait provoqué une erreur car il
interdit de définir deux fois une même classes avec cette fonction.
Ainsi, on peut appeler d’autres fonctions contenant la classe

exemple :
Page 191 sur 230

[2020 - 2021]
D.3. L‟héritage
L’héritage est probablement le concept le plus important de la
programmation orienté objet. C’est ce qui lui donne toute sa
puissance. Cela permet de réutiliser des classes pour en construire
de nouvelles.
Exemple entre la classe A et la classe B, il y a héritage quand on
peut dire :
« A est un B ».
Un exemple un héritage peut être fait :
 une voiture est un véhicule (Voiture hérite de Véhicule) ;
 un bus est un véhicule (Bus hérite de Véhicule) ;
 un moineau est un oiseau (Moineau hérite d'Oiseau) ;
 un corbeau est un oiseau (Corbeau hérite d'Oiseau) ;
 un chirurgien est un docteur (Chirurgien hérite de Docteur) ;
 etc…
En revanche, on ne peut pas dire « Un véhicule est une voiture »
ou « Un Docteur est un Chirurgien ».
Page 192 sur 230

[2020 - 2021]
Réaliser un héritage en PHP
On va créer une nouvelle classe Superviseur (chef de promotion)
qui sera basée sur la classe Etudiant. Elle aura toutes les variables
et fonction de la classe Etudiant, mais elle aura en plus de
nouvelles variables et fonctions.
On crée donc un fichier Superviseur.class.php en y insérant le
code suivant :
Le nouveau mot-clé ici est extends, qui signifie « étend ».

Traduction : la classe Superviseur étend [les possibilités] de la
classe Etudiant. C’est cela l’héritage. On a maintenant une classe
Superviseur qui possède toutes les variables et fonctions de la
classe Etudiant, et on va pouvoir en définir de nouvelles qui seront
propres aux superviseurs.
Pour que PHP connaisse la classe Etudiant afin de permettre
l’héritage, il est impératif d’inclure le fichier contenant cette
classe au préalable, pour nous ici la classe à inclure est
Etudiant.class.php voilà pourquoi on l’a fait.
Ainsi, on peut ajouter d’autres variables et fonctions propres à la
classe Superviseur comme ceci :
Page 193 sur 230

[2020 - 2021]
Nous avons donc maintenant deux classes : Etudiant et
Superviseur :
 Avec Etudiant : on peut manipuler un matricule, un nom, un

prenom, un âge et une date de naissance.
 Avec Superviseur : on peut manipuler les mêmes choses : un
matricule, un nom, un prenom, un âge et une date de
Page 194 sur 230

[2020 - 2021]
naissance, mais aussi de nouvelles propriétés, comme la
fonction et promotion
Un peu de vocabulaire : on dit que Etudiant est la classe mère

tandis que Superviseur est la classe fille, c’est la fille qui hérite de
la mère.
Dans notre fichier index.php on peut maintenant créer des
étudiants mais aussi des superviseurs :
Avec peu d’effort, on a créé une nouvelle classe qui réutilise une
classe existante. On peut donc appeler les fonctions setMatricule,
setNom comme pour les étudiants, et on peut en plus effectuer de
nouvelles opérations, comme définir une fonction ce matricule et
nom.
Page 195 sur 230
[2020 - 2021]
Les droits d‟accès et l‟encapsulation
L’un de gros avantages de la POO est que l’on masquer le code à

l’utilisateur (utilisateur est ici celui qui se servira de la classe, pas
celui qui chargera la page depuis son navigateur). D’où on parle
de la visibilité d’un attribut ou d’une méthode :
 Public : si un attribut ou une méthode est public, alors on

pourra y avoir accès depuis n’importe où, depuis l’intérieur
de l’objet, comme depuis l’extérieur. Quand on crée un
objet, c’est principalement pour pouvoir exploiter ses
attributs et méthodes.
 Private : impose quelques restrictions. On n’aura accès aux
attributs et méthodes seulement depuis l’intérieur de la
classe, c’est-à-dire que seul le code voulant accéder à un
attribut privé ou une méthode privée écrit(e) à l’intérieur de
la classe fonctionnera.
 Protected : identique à private, sauf qu’un élément ayant ce
droit d’accès dans une classe mère sera accessible aussi
dans les classes filles.
Il est généralement recommandé d’utiliser plutôt protected que
private, surtout si on pense hérite de la mère.
Bref, le but de l’encapsulation est de masquer à la personne qui

utilise la classe son fonctionnement interne.
E. Organisation du code selon l‟architecture MVC

Beaucoup de débutants en PHP disent avoir des difficultés à
organiser le code de leur site web (voire une application). Ils
savent créer des scripts, mais ne sentent pas capables de
concevoir leur site de manière globale. « Quels dossiers dois-je
créer ? », « Comment dois-je organiser mes fichiers ? », etc…
L’objectif de ce point est de faire découvrir l’architecture MVC

aux étudiants, une bonne pratique de programmation qui va les
aides à bien concevoir leurs futurs sites web.
Page 196 sur 230
[2020 - 2021]
E.1. Définition de l‟architecture MVC
On se pose certainement beaucoup de questions sur la bonne

façon de concevoir un site. En fait, il y a des problèmes en
programmation qui reviennent tellement souvent qu’on a créé
toute une série de bonnes pratiques que l’on a réunies sous le nom
de design patterns.
Un des plus grands patterns s’appelle le MVC, signifiant : Modèle –

Vue – Contrôleur. C’est celui que nous allons découvrir ici.
Le pattern MVC permet de bien organiser son code source. Il va

nous aider à savoir quels fichiers créer, mais surtout à définir leur
rôle. Le MVC a justement comme but de séparer la logique du
code en trois parties que l’on retrouve dans des fichiers distincts
comme l’explique la description suivante :
 Modèle : cette partie gère les données de votre site. Son rôle
est d’aller récupérer les informations « brutes » dans la base
de données, de les organiser, de les ressembler pour qu’elles
puissent ensuite être traitées par le contrôleur. On y trouve
donc des requêtes SQL. Parfois, les données ne pas stockées
dans une base de données. C’est plus rare, mais on peut
être amené à aller chercher des données dans des fichiers.
Dans ce cas, le rôle du modèle est faire les opérations
d’ouverture, de lecture et de l’écriture des fichiers (rappelez-
vous des fonctions fopen, fgets, etc…)
 Vue : cette partie se contente sur l’affichage. Elle ne fais
presque aucun calcul et se contente de récupérer des
variables pour savoir ce qu’elle doit afficher. On y trouve
essentiellement du HTML mais aussi quelques boucles et
conditions PHP très simples, pour afficher par exemple du
texte.
 Contrôleur : cette partie gère la logique du code qui prend
de décision. C’est en quelque sorte l’intermédiaire entre le
modèle et la vue. Le contrôleur va demander aux modèles
Page 197 sur 230

[2020 - 2021]
les données, les analyser, prendre des décisions et renvoyer
le texte à afficher à la vue. Il contient exclusivement du PHP
Il est important de bien comprendre comment ces éléments
s’agencent et communiquent entre eux. Regarder bien la figure
suivante :
Modèle
Contrôleur
Contrôleur
<html>
echo
Vue
Architecture du MVC
Retenez donc que c’est le contrôleur qui chapote : c’est lui qui
reçoit la requête du visiteur et qui contacte d’autres fichiers (le
modèle et la vue) pour échanger des informations avec eux.
Le fichier du contrôleur demande les données au modèle sans se

soucier de la façon dont celui-ci va les récupérer.
Une fois les données récupérées, le contrôleur les transferts à la

vue qui se chargera d’afficher les liste des messages.
Page 198 sur 230
[2020 - 2021]
On peut respecter l’architecture MVC de différentes manières ;
tout dépend de la façon dont on l’interprète. D’ailleurs, la théorie
« pure » de MVC est bien souvent inapplicable en pratique. On
prend les bonnes idées et on met de côté celles qui se révèlent
trop contraignantes.
De toutes ces manières, nous retenons ce qui suit :
Dans la racine de votre site, on crée trois répertoires :
 modele ;
 vue ;
 controleur.
Amélioration de l‟exemple précédent en respectant l‟architecture
MVC
Dans chacun de nos répertoires, on crée un sous-répertoire pour

chaque « module » de notre projet. Pour ce cas, créons un
répertoire etudiant dans de chacun de ces dossiers on aura ainsi
l’architecture suivante :
 modele/etudiant
 vue/etudiant
 controleur/etudiant
On peut commencer par travailler sur l’élément que l’on veut ; il
n’y a pas d’ordre particulier à suivre, on peut aussi travailler à trois
en parallèle sur chacun de ces éléments). On propose donc de
commencer par le modele, le contrôleur et enfin la vue.
 Modele
On crée un fichier get_etudiant.php dans modele/etudiant. Ce
fichier contiendra une fonction dont le rôle sera de retourner la
liste des étudiants. Ce fichier contient donc :
Page 199 sur 230

[2020 - 2021]
La connexion à la base de données aura été faite
précédemment. On ne fait qu’inclure dans ce fichier pour se servir
de l’objet $conex de la classe PDO vue plus haut. Cela nous évite
d’avoir recréer une connexion à la base de données dans
chaque fichier. Ce qui serait très mauvais pour la performance du
site.
Plutôt que de faire une boucle de fetch(), on appelle ici la

fonction fetchAll() qui assemble toutes les données dans un grand
tableau. La fonction retourne donc un tableau contenant tous les
étudiants.
 Le contrôleur
Le contrôleur étant le maitre de l’application. Il demande au
modèle les données, les traite et appelle la vue qui utilisera ces
données pour afficher la page.
Dans controleur/etudiant, on crée un fichier index.php qui

représente la page d’accueil de l’application :
Page 200 sur 230

[2020 - 2021]
Le rôle de la page d’accueil de l’application est d’afficher la liste
des étudiants. On appelle donc la fonction get_etudiant() du
modèle, on récupère la liste « brute » de ces étudiants que l’on
traite un foreach pour protéger l’affichage avec
htmlspecialchars().
Notez qu’on opère sur les clés du tableau plutôt que sur $valeur
directement. En effet, $valeur est une copie du tableau $etudiant
créée par le foreach. $valeur n’existe qu’à l’intérieur du foreach, il
est ensuite supprimé.
 La vue
Le fichier de la vue devra simplement afficher le contenu du
tableau $etudiant sans se soucier de la sécurité ou des requêtes
SQL.
On crée donc un fichier index.php dans vue/etudiant/ et y insère

le code suivant :
Page 201 sur 230

[2020 - 2021]
Ce code contient essentiellement du HTML et quelques morceaux
de PHP pour afficher le contenu des variables et effectuer la
boucle nécessaire.
L’intérêt est que ce fichier est débarrassé de toute « logique » du

code.
Page 202 sur 230

[2020 - 2021]
CHAPITRE IV : LES APPLICATIONS WEB AVEC JAVA
Une application Web est un logiciel applicatif manipulable à

l’aide d’un navigateur Web. Les applications Web
analogiquement aux sites Web sont généralement placées sur un
ordinateur jouant le rôle de serveur (Twitter, Facebook, etc. sont
des exemples d’applications Web).
IV.1. Fonctionnement d'une application Web.
IV.1.1. Le serveur d'application.
Un serveur d'applications est un logiciel d'infrastructure

offrant un contexte d'exécution pour des composants applicatifs.
Dans un sens strict les composants hébergés par le serveur
d'applications ne sont pas de simples procédures ou scripts mais
de réels composants logiciels conformes à un modèle de
composants (EJB, COM, Fractal, etc.).
De nos jours, les serveurs d’applications comportent en

leur sein un serveur Web (HTTP) qui est chargé d’écouter toutes les
requêtes HTTP généralement sur le port 80.La structuration en
couches des différents composants mis à disposition par le serveur
d'application permet une prise en compte des besoins métier, des
interactions avec les utilisateurs, des connexions avec les bases de
données, etc.
Les serveurs d'applications sont des logiciels occupant la

couche centrale dans une architecture multicouche, qu'elle soit
classique 3-tiers (postes clients, serveur d'applications, serveur de
données) ou étendue (n-tiers) lorsqu'elle intègre par exemple des
serveurs d'acquisition (données de terrain, données de process, de
back-office, etc.) et/ou des serveurs d'interface (gateways,
systèmes coopérants externes, etc.).
Voici une liste de quelques serveurs d’application :
• Caucho Resin
• JBoss
Page 203 sur 230
[2020 - 2021]
• JOnAS serveur d'application Open Source proposé par OW2
• GlassFish serveur d'application Open Source de Oracle
• Apache Geronimo de la Fondation Apache
• LTSP Cluster, une infrastructure libre pour le déploiement massif et
centralisé de terminaux
• Zope
• 2X ApplicationServer
• Oracle WebLogic Server
• Borland Application Server
• Citrix
• IBM Websphere Application Server
• Microsoft ASP.NET
• Novell exteNd Application Server
• Oracle Application Server
• Orion
• Sun Java System Application Server
• Sybase EAServer
• Systancia AppliDis Fusion 4
• WebDev PC SOFT
Dans le cadre de ce TP, nous utiliserons GlassFish comme serveur

d’application.
IV.1.2. Le client
Le client est généralement un navigateur Web à travers lequel des

requêtes sont envoyées au serveur d’application via le protocole
HTTP, HTTPS, FTP, etc. à l’aide d’une URL que l’on entre dans la
barre d’adresses.
IV.1.3. Les URL (Uniform Ressource Locator)
C’est un format de nommage universel représenté sous forme de

chaine de caractère ASCII pour désigner une ressource sur le
Web. Cette chaine de caractère combine les informations
nécessaires pour indiquer à un serveur d’application comment
accéder à une ressource. Ces informations comprennent
généralement: le protocole de communication, un nom de
domaine, un numéro de port et un chemin d’accès.
Page 204 sur 230

[2020 - 2021]
Exemple : http://www.exemple.com/chemin/ressource
• http : Le protocole de communication (Ici HTTP)

• www.exemple.com : Nom de domaine du service représentant
l’adresse IP et le port 80 par défaut de la machine sur laquelle
s’exécute ce service (on peut utiliser l’adresse IP à la place du
nom de domaine).
• chemin/ressource : nom complet de la ressource à demander
sur le service une fois
Connecté. On peut aussi ajouter des données supplémentaires
lors de la demande de la ressource. On appelle ces données des
paramètres, elles sont transmises à la suite du caractère « ? » et
séparées par le caractère &.
Exemple :
http://www.exemple.com/chemin/ressource?param1=param1&p
aram2=param2
IV.1.4. Le protocole HTTP
C’est à l’aide de ce protocole que le client communique

avec le serveur. C’est en quelque sorte un langage constitué de
quelques mots clés appelés méthodes HTTP (Les 3 principales
méthodes sont : GET, POST et HEAD). Un client comme les
navigateurs Web utilisent ces méthodes pour interroger le serveur.
Le client envoie donc une requête HTTP au serveur, cela lui permet
de savoir quel traitement il doit effectuer, ensuite le serveur envoie
une réponse au client en fonction du traitement qu’il a effectué.
La première ligne de réponse du serveur est constituée

d’une ligne d’état qui spécifie la version du protocole HTTP qu’il
utilise, un code d’état et une description de ce code d’état.
Exemple : HTTP/1.0 200 OK

Cette ligne d’état a un code d’état de 200, ce qui indique que la
requête le traitement de la requête a été un succès. Un code
d’état fréquent est 404 avec la description NOT FOUND pour
Page 205 sur 230
[2020 - 2021]
signifier que la ressource n’a pas été trouvée. La deuxième ligne
de réponse du serveur est constituée des en-têtes contenant des
informations telles que la date de la réponse, le nom du serveur
d’application, etc.
Exemple:
Date: Saturday, 23-May-98 03:25:12 GMT

Server: JavaWebServer/1.1.1
MIME-version: 1.0
Content-type: text/html
Content-length: 1029
Last-modified: Thursday, 7-May-98 12:15:35 GMT
La troisième ligne de réponse du serveur est une ligne vide pour

spécifier la fin des en-têtes. Si la requête a été exécutée avec
succès les ressources demandées sont envoyées en dernière ligne
; dans le cas contraire, la réponse peut contenir un texte lisible par
un être humain expliquant pourquoi le serveur n’a pas pu
accomplir la requête.
A. Méthode GET
C'est une méthode utilisée par le client pour récupérer

une ressource Web du serveur via une URL.
Par exemple, lorsqu’on entre l’URL www.facebook.com dans la
barre d'adresses d’un navigateur et que l’on valide, le navigateur
enverra alors une requête GET pour récupérer la page
correspondant à cette URL et le serveur la lui renverra. Il se passe
la même chose lorsqu’on clique sur un lien.
Il est possible de transmettre des données au serveur

lorsque l'on effectue une requête GET, au travers de paramètres
directement placés après l'URL (paramètres nommés query strings)
ou des cookies placés dans les en-têtes de la requête. La taille
d'une URL étant limitée, on ne peut pas utiliser cette méthode pour
envoyer des données volumineuses au serveur, comme un fichier
par exemple.
Page 206 sur 230

[2020 - 2021]
B. Méthode POST
La taille du corps du message d'une requête POST n'est

pas limitée, c'est donc cette méthode qu'il faut utiliser pour
soumettre au serveur des données de tailles variables, ou que l'on
sait volumineuses. C'est parfait pour envoyer des fichiers par
exemple.
Toujours selon les recommandations d'usage, cette
méthode doit être utilisée pour réaliser les opérations qui ont un
effet sur la ressource, et qui ne peuvent par conséquent pas être
répétées sans l'autorisation explicite de l'utilisateur.
C. Méthode HEAD
Cette méthode est identique à la méthode GET, à ceci

près que le serveur n'y répondra pas en renvoyant la ressource
accompagnée des informations la concernant, mais seulement
ses informations. En d'autres termes, il renvoie seulement les en-
têtes HTTP. Il est ainsi possible par exemple de vérifier la validité
d'une URL ou de vérifier si le contenu d'une page a changé ou
non sans avoir à récupérer la ressource elle-même : il suffit de
regarder ce que contiennent les différents champs des en-têtes.
IV.2. Création d'une application Web Java.
La création d’une application Web se fait suivant les étapes

suivantes :
Page 207 sur 230

[2020 - 2021]
Page 208 sur 230
[2020 - 2021]
1. Le serveur Java sur lequel sera déployée l’application Web
2. La version de Java EE à utiliser
3. En quelque sorte l’url à de l’application Web (c’est le nom que
l’application portera quand elle sera déployée dans le serveur
GlassFish)
4. Terminer la création du projet Web
A cette étape, NetBeans crée une application Web simple et

complète. Le nouveau projet contient une page JSP (ou une
page html) qui est automatiquement ouverte dans l’éditeur
NetBeans. Cette application étant une application Web
complète, on peut déjà la déployer sur le serveur GlassFish.
Le résultat donne :
Page 209 sur 230

[2020 - 2021]
IV.2.1. Structure de l'application
 Le dossier Web pages

Ce dossier est destiné aux pages Web (JSP) accessibles
directement par les utilisateurs via une URL. Ce dossier contient le
dossier WEB-INF qui lui contient à son tour le fichier glassfich-
Web.xml qui est un fichier de configuration. Ce fichier permet de
garder les diverses configurations sur les servlets, leurs URL patterns,
etc. depuis la version 6 de Java EE, la majorité des configurations
se fait directement dans les servlets.
Page 210 sur 230

[2020 - 2021]
 Le dossier Sources Packages
C’est dans ce dossier que le code source Java de l’application
seront rangées (Servlet, autres classes Java, etc.).
 Le dossier Web pages

Ce dossier est destiné aux pages Web (JSP) accessibles
directement par les utilisateurs via une URL. Ce dossier contient le
dossier WEB-INF qui lui contient à son tour le fichier glassfich-
Web.xml qui est un fichier de configuration. Ce fichier permet de
garder les diverses configurations sur les servlets, leurs URL patterns,
etc. depuis la version 6 de Java EE, la majorité des configurations
se fait directement dans les servlets.
 Le dossier Sources Packages

C’est dans ce dossier que le code source Java de l’application
seront rangées (Servlet, autres classes. Le dossier configurations
Files Il contient le même fichier se trouvant dans le dossier WEB-INF
IV.2.2. Les Servlets
A. Présentation
Une servlet est un programme qui s'exécute côté serveur en tant

qu'extension du serveur. Elle reçoit une requête du client, elle
effectue des traitements et renvoie le résultat (réponse). La liaison
entre la servlet et le client peut être directe ou passer par un
intermédiaire comme par exemple un serveur HTTP.
Ecrite en java, une servlet en retire ses avantages : la portabilité,
l'accès à toutes les API de java dont JDBC, JPA pour l'accès aux
bases de données, etc.
Les servlets sont contrôlées par un conteneur appelé conteneur
de servlet.
Page 211 sur 230

[2020 - 2021]
B. Fonctionnement
1. La requête HTTP part du client et arrive sur le serveur

d’application.
2. Le serveur HTTP contenu dans le serveur d’application se charge
de recevoir la requête HTTP (Son rôle est essentiellement d’écouter
les requêtes HTPP généralement sur le port 80)
3. Le serveur HTTP transmet la requête HTTP à la servlet
4. Si c’est la première sollicitation de la servlet, le serveur
l’instancie. La servlet restera alors en mémoire jusqu’à l’arrêt du
serveur et pourra être appelée par plusieurs threads lancés par le
serveur pour chaque requête.
La servlet reçoit la requête et construit un objet HTTPServletRequest

(cet objet contient la requête HTTP, et donne accès à toutes ses
informations) et un objet HTTPServletResponse (cet objet contient
la requête HTTP de réponse et permet de la personnaliser).
5. La servlet transmet la réponse au serveur Web
6. Le serveur Web transmet la réponse au client.
C. Création d'une servlet.
Une servlet est une classe Java héritant des classes GenericServlet
ou HTTPServlet. Comme il sera dans notre cas question de
traitement des requêtes HTTP, nous n’utiliserons que la classe
HTTPServlet.
Page 212 sur 230

[2020 - 2021]
Pour ajouter une servlet à l’application MonApplication que nous
avons créé précédemment, on procède comme suit :
Après avoir fait un clic droit sur le dossier Source Packages de
notre projet, sélectionner Servlet.
On se retrouve ainsi devant la fenêtre suivante :
1. Le nom que l’on donne à la Servlet

2. Le package dans lequel on mettra la servlet
3. Continuer
Page 213 sur 230

[2020 - 2021]
1. Le nom qui permettra d’atteindre la servlet à l’aide d’une URL
2. Terminer
En cliquant sur terminer la servlet est créée et directement ouverte
dans l’éditeur.
1. La classe PremiereServlet.
Cette classe hérite de la classe HttpServlet, elle est donc une
servlet pouvant gérer des requêtes HTTP.
(a) Informations de configuration
PremiereServlet : Informations de configuration

@WebServlet(name = "PremiereServlet", urlPatterns =
{
"/premiereservlet"
})
Page 214 sur 230
[2020 - 2021]
Cette annotation est utilisée depuis la version 6 de Java. Elle
permet de configurer certains paramètres de la servlet comme le
nom de la servlet et l’URL pattern d’exécution de la servlet. Ces
configurations étaient autrefois (dans les versions anciennes de
Java EE) indiquées dans le fichier Web.xml.
(b) La méthode processRequest()
PremiereServlet : la méthode processRequest()

public class PremiereServlet extends HttpServlet
{
protected void processRequest(HttpServletRequest request,
HttpServletResponse response)throws ServletException,
IOException
{
response.setContentType("text/html;charset=UTF-8");
PrintWriter out = response.getWriter();
try
{
out.println("<!DOCTYPE html>");
out.println("<html>");
out.println("<head>");
out.println("<title>Servlet PremiereServlet</title>");
out.println("</head>");
out.println("<body>");
out.println("<h1>Servlet PremiereServlet at " +
request.getContextPath() + "</h1>");
out.println("</body>");
out.println("</html>");
}
finally
{
out.close();
}
}
}
Page 215 sur 230

[2020 - 2021]
Cette méthode est générée automatiquement par
NetBeans lorsqu’on crée une servlet comme nous l’avons fait
précédemment. La raison d’être de cette méthode est que dans
la plupart des cas, on souhaite qu’une servlet exécute le même
traitement que ce soit lors de la réception d’une requête HTTP de
type GET ou POST. Ces deux requêtes sont respectivement reçues
via les méthodes doGet () et doPost () qui sont des méthodes de
la super classe javax.servlet.HttpServlet.
La première ligne dans la méthode configure le contenu

de la réponse qui sera envoyée au client (une page html) ; la
deuxième récupère le flux en sortie de la réponse afin d’y écrire
une page html.
Pour déployer l’application on fait un clic droit sur le projet
MonAppliWeb et on sélectionne l’option Deploy. L’application
sera ainsi déployée sur le serveur et donc accessible via un
navigateur Web. Une fois le navigateur ouvert, on saisit l’URL
suivante : http://localhost:8080/monappliweb/premiereservlet et
on valide.
Le résultat est le suivant :
(c) La méthode doGet ().
PremiereServlet : La méthode doGet()

{
@Override
protected void doGet(HttpServletRequest request,
HttpServletResponse
response)throws ServletException, IOException
{
Page 216 sur 230
[2020 - 2021]
processRequest(request, response);
}
}
C’est cette méthode qui est exécutée lorsqu’une requête HTTP de

type GET arrive sur le serveur.
(d) La méthode doPost().
PremiereServlet : La méthode doPost()

{
@Override
protected void doPost(HttpServletRequest request,
HttpServletResponse
response)throws ServletException, IOException
{
}
}
C’est cette méthode qui est exécutée lorsqu’une requête HTTP de

type POST arrive sur le serveur
2. Les classes HttpServletRequest et HttpServletResponse
La classe HttpServletRequest est celle qui nous permet de

manipuler la requête reçue par la servlet et HttpServletResponse la
réponse qui sera renvoyée au client. Ces deux classes possèdent à
cet effet un bon nombre de méthode leur permettant de faire
cela.
 Quelques méthodes de la classe HttpServletRequest
Méthode Rôle
Retrouver le corps d’une requête en
ServletInputStream
binaire.
getInputStream()
Retourne un objet de type
Page 217 sur 230
[2020 - 2021]
ServletInputStream
permettant de lire le corps d’une
requête.
Retrouver le corps d’une requête en
caractères.
BufferedReader Retourne un objet de type
getReader() BufferedReader
permettant de lire le corps d’une
requête.
Retrouver la portion d’URL
correspondant au
String getContextPath() contexte de l’application dans lequel
la servlet est
exécuté.
Obtenir le type de contenu du corps
String getContentType()
d’une requête
Object Obtenir la valeur de l’attribut portant
getAttribute(String le nom passé
nomAttribut) en paramètre.
Obtenir l’adresse IP de l’interface sur
String getLocalAddr() laquelle la
requête a été reçue
Obtenir le nom de l’hôte de l’interface
String getLocalName() sur laquelle
la requête a été reçue
Obtenir le port de l’interface sur
int getLocalPort() laquelle la requête
a été reçue
Obtenir de nom de la méthode HTTP
String getMethod() qui a été
utilisée pour envoyer la requête
Obtenir la valeur du paramètre
getParameter(String (portant le nom
nomParam) passé en paramètre de la méthode)
d’une requête
Obtenir une Enumeration de tous les
Enumeration <String>
noms des
getParameterNames()
paramètres de la requête
Page 218 sur 230
[2020 - 2021]
Obtenir sous forme de tableau de
String [] chaîne de
getParameterValues(Stri caractère toutes les valeurs du
ng paramètre (portant le nom passé en
nomParam) paramètre de la méthode) de la
requête.
Obtenir l’adresse IP du client ayant
String getRemoteAddr() envoyé la
requête.
Obtenir le port du client ayant envoyé
int getRemotePort()
la requête.
Obtenir le contexte de la servlet dans
ServletContext
lequel la
getServletContext()
requête a été envoyée
Obtenir la session courante associée à
HttpSession getSession() la requête. Si la requête n’a pas de
session une nouvelle session est créée
Obtenir un objet de type
RequestDispatcher qui
encapsule la ressource passée en
RequestDispatcher
paramètre. Cet objet
getRequestDispatcher(S
RequestDispactcher peut à son tour
tring
être
ressource)
utilisé pour expédier une requête à la
ressource ou inclure la ressource dans
la réponse.
 Quelques méthodes de la classe HttpServletResponse
Méthode Rôle
Obtenir un OutputStream pour écrire
ServletOutputStream
des données
getOutputStream()
binaires dans la réponse.
Obtenir un objet de type PrintWriter
PrintWriter getWriter() afin d’écrire des données sous forme
de caractères au client.
int getStatus() Obtenir le code d’état de la réponse
void Modifie le type de contenu de la
Page 219 sur 230
[2020 - 2021]
setContentType(String réponse si celle-ci n’a pas encore été
contentType) envoyée
3. Les sessions
Pour pouvoir identifier chaque client, le serveur utilise un système
de session permettant automatiquement d’attribuer un
identificateur unique à chaque utilisateur. Chaque client
possédera donc un objet HttpSession qui sera unique. Cet objet
permettra aussi de sauvegarder n’importe quel objet Java afin de
pouvoir les réutiliser dans une autre servlet par exemple.
Exemple 1 : Mise d‟un objet en session

HttpSession session = request.getSession ();
//Création d’un nouvel attribut nommé login et ayant comme
valeur gourou
session.setAttribute("login", "maestro");
Exemple 2 : Récupération d‟un objet mis en session

HttpSession session = request.getSession ();
//Récupération de la valeur de l’attribut login
String log = session.getAttribute("login");//log = maestro
IV.2.3. Les JSP (Java Server Page)
A. Introduction
Une JSP est un document texte composé de deux types de
contenu :
• Un contenu statique - Ce type de contenu peut être dans des
formats tels que HTML, XML, SVG et WML.
• Un contenu dynamique - Ce type de contenu est pour le plus
souvent du code Java
Concrètement, les JSP sont basées sur les servlets. Au premier
appel de la page JSP, le moteur de JSP génère et compile
automatiquement une servlet qui permet la génération de la
page Web. Le code HTML est repris intégralement dans la servlet.
Le code Java est inséré dans la servlet.
Page 220 sur 230

[2020 - 2021]
La servlet générée est compilée et sauvegardée puis elle est
exécutée. Les appels suivants de la JSP sont beaucoup plus
rapides car la servlet, conservée par le serveur, est directement
exécutée.
B. Présentation
La création d’une JSP s’effectue comme suit :
Après avoir fait un clic droit sur le dossier Web Pages de notre
projet, sélectionner Nouveau -> JSP. On se retrouve ainsi devant la
fenêtre suivante :
1. Le nom de la nouvelle JSP

2. Le type de JSP
3. Terminer
Ainsi la page suivante est générée par l’EDI :
Page 221 sur 230

[2020 - 2021]
1. Les balises de la technologie JSP
(a) Balises de commentaire : <%-- --%>
On peut les placer n’importe où dans le code source de la JSP
Exemple : Balises de commentaire

<%-- Ce que vous lisez est un commentaire --%>
(b) Balises de déclaration : <%! %>
Elle permet de déclarer une ou plusieurs variables, des méthodes,

etc. à l’intérieur d’une JSP.
Exemple : Balises de déclaration

<%! String nom = "Première déclaration";
String postNom = "Deuxième déclaration";
Public String obtenirString()
{
return "chaine à obtenir";
}
%>
Page 222 sur 230

[2020 - 2021]
(c) Balises de scriptlet : <% %>
Elles permettent d’écrire du code Java dans une JSP.
Exemple : Balises de scriptlet

<% for(int i=0 ; i < 10 ; i++)
{
out.println("chaine de caractère");
}
%>
(d) Balises d‟expression : <%= %>
Elle sert à retourner le contenu d’une chaîne de caractère
Exemple : Balises d‟expression

<%= "chaine de caractère" %>
2. Les directives
Les directives servent à contrôler comment le conteneur de servlet
va gérer les JSP. Elles permettent :
• D’importer un package
• D’inclure d’autres pages JSP
• D’inclure des bibliothèques de balises
• De définir des propriétés et informations relatives à une JSP
Les directives sont toujours placées dans les balises <%@ et %>.
(a) Directive taglib
Permet d’inclure une bibliothèque (comme la JSTL que nous

verrons dans suite)
Exemple : Directive taglib

<%@ taglib uri="maTagLib.tld" prefix="tagExemple" %>
(b) Directive page
Elle définit des informations relatives à la JSP
Exemple : Directive page

Page 223 sur 230
[2020 - 2021]
<%@ page
language="..."
extends="..."
import="java.util.List, java.util.Date"
session="true | false"
buffer="none | 8kb | sizekb"
autoFlush="true | false"
isThreadSafe="true | false"
isELIgnored ="true | false"
info="..."
errorPage="..."
contentType="..."
pageEncoding="..."
isErrorPage="true | false"
%>
(c) Directive include
Elle permet d’inclure le contenu d’un autre fichier dans la JSP

courante. Elle peut se placer n’importe où dans la JSP.
Exemple : Directive page

<%@ include file="uneAutreJSP.jsp" %>
3. Dialogue JSP – Servlet

Nous allons ici tenter de concevoir une petite application dans
laquelle on entrera des informations via un formulaire dans une
JSP. Une servlet se chargera de les récupérer et d’aiguiller la
requête vers une autre JSP pour y afficher les valeurs que nous
avons envoyées via le formulaire
La page index.jsp
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
Page 224 sur 230

[2020 - 2021]
charset=UTF-8">
<title>Informations</title>
<link type="text/css" rel="stylesheet"
href="ressources/css/global_css.css"/>
</head>
<body>
<div>
<span class="erreur">
<%= pageContext.findAttribute("msg").toString() %>
</span>
<form class="form" action="premiereservlet" method="POST">
<fieldset>
<legend>Informations sur vous!</legend>
<p>
<label for="nom">Nom <span
class="requis">*</span></label>
<input type="text" name="nom" id ="nom" size="20"
maxlength="20" value="" />
</p>
<p>
<label for="post_nom">Post nom:</label>
<input type="text" name="post_nom" id ="post_nom"
size="20" maxlength="20" value="" />
</p>
<p>
<label for="prenom">Prénom:</label>
<input type="text" name="prenom" id="prenom"
size="20" maxlength="20" value="" />
</p>
<p>
<label for="age">Age:</label>
<input type="number" name="age" id="age"/>
</p>
</fieldset>
<p>
<input type="submit" value="Envoyer" />
<input type="reset" value="Reinitialiser" />
</p>
Page 225 sur 230
[2020 - 2021]
</form>
</div>
</body>
</html>
1. Ligne 13 : récupération de l’attribut nommé msg et affichage

de son contenu. Si le contenu est vide rien n’est affiché.
2. Ligne 15-46 : Création d’un formulaire ayant comme action
premiereservlet (les données que ce formulaire soumettra seront
donc envoyées à la servlet PremiereServlet) et utilisant comme
méthode HTTP la méthode POST.
La servlet PremiereServlet.java
@WebServlet(name = "PremiereServlet", urlPatterns =
{
"/premiereservlet"
})
{
protected void processRequest(HttpServletRequest request,
HttpServletResponse response)
throws ServletException, IOException
{
response.setContentType("text/html;charset=UTF-8");
HttpSession session = request.getSession();
String msg;
String nom = request.getParameter("nom");
String postNom = request.getParameter("post_nom");
String prenom = request.getParameter("prenom");
int age = 0;
try
{
age = Integer.valueOf(request.getParameter("age"));
}
catch (NumberFormatException numberFormatException)
{
msg = "Erreur: Veuillez entrer une valeur exacte pour l'age";
session.setAttribute("msg", msg);
Page 226 sur 230
[2020 - 2021]
request.getServletContext().getRequestDispatcher("/index.jsp"
).forward(request, response);
}
Personne personne = new Personne(nom, postNom, prenom,
age);
session.setAttribute("personne", personne);
session.removeAttribute("msg");
request.getServletContext().getRequestDispatcher("/newjsp.jsp").
forward(request, response);
}
@Override
protected void doGet(HttpServletRequest request,
HttpServletResponse
response)
{
}
@Override
protected void doPost(HttpServletRequest request,
HttpServletResponse
response)
{
}
}
La classe Personne ou le bean Personne

public class Personne
{
private String nom, postNom, prenom;
private int age;
public Personne()
{
}
public Personne(String nom, String postNom, String prenom, int
age)
Page 227 sur 230
[2020 - 2021]
{
this.nom = nom;
this.postNom = postNom;
this.prenom = prenom;
this.age = age;
}
public String getNom()
{
return nom;
}
public void setNom(String nom)
{
this.nom = nom;
}
public String getPostNom()
{
return postNom;
}
public void setPostNom(String postNom)
{
this.postNom = postNom;
}
public String getPrenom()
{
return prenom;
public void setPrenom(String prenom)
{
this.prenom = prenom;
}
public int getAge()
{
return age;
}
public void setAge(int age)
{
this.age = age;
}
}
Page 228 sur 230
[2020 - 2021]
La page newjsp.jsp
<%@page import="com.controle.Personne"%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=UTF-
8">
<title>Sortie!</title>
</head>
<body>
<%
Personne p = (Personne)
pageContext.findAttribute("personne");
%>
<h1>
Vous vous nommez <%= p.getNom() %> <%= p.getPostNom()%>
<
%= p.getPrenom()%> et vous avez <%= p.getAge()%> ans
</h1>
</body>
</html>
Ligne 1 : Importation de la classe Personne

• Ligne 11: Récupération de la valeur de l’attribut portant comme
nom personne et affectation à une variable de type Personne.
• Ligne 15,16 : Affichage des informations du nom, post nom,
prénom et de l’âge de la personne récupérée à la ligne 11 dans
la page Web.
Page 229 sur 230

[2020 - 2021]
Bibliographie
[1] M. Nebra, Apprendre à créer votre site web avec HTML5 et CSS3, Licence
Creative Commons 6. 2.0, 2013.
[2] O. Fauvel –Jaeger, Introduction à l’animation en HTML5 et JavaScript
[3] Nod_, Bonnes pratiques JavaScript, Licence Creative Commons 7 2.0,

2012.
[4] M. Nebra, Concevez votre site web avec PHP et MySQL Creative
Commons 6. 2.0, 2012.
[5] V. Thuillier, Programmer en Orienté Objet en PHP, Creative Commons 6.

2.0, 2012.
[6] E. Daspet, C. Pierre de Geyer, PHP 5 Avancé 4ème Edit, EYROLLES
[7] C. Gribaumont, Administrez vos bases de données avec MySQL Creative

Commons 6. 2.0, 2012.
[8] S. Duchateau L’accessibilité Web Creative Commons 6. 2.0, 2013.
[9]. Java Servlet Programming - Edition O’Reilly
[10] Javier Fernández González - Java 7 Concurrency Cookbook
[11] Jean Michel Doudoux - Développons en Java (Version 1.90 du

25/02/2013)
[12] Jim Kurose, Keith Ross - Analyse structurée des réseaux, Edition Pearson
Education
[13] Sun Microsystems - The Java EE 5 Tutorial, Septembre 2007
Page 230 sur 230

[2020 - 2021]

Pgmation Internet ISP

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Pgmation Internet ISP

Transféré par

Droits d'auteur :

Formats disponibles

I.

III. CONTENU DU COURS :

Page 1 sur 230

Eh oui, accrochez-vous bien parce qu’il s'agit d’Adobe

Dans l’image ci-haute, on a la rubrique « Créer » avec comme

Page 2 sur 230

Voici le chemin pour la visualisation de la page Html créée à partir

Microsoft Edge Internet Explorer Google Chrome Mozilla Firefox Opera

Pour cela, nous devons d’abord créer un nouveau dossier

Lorsque vous installez WampServer, un répertoire "www"

Nous allons avoir l’affichage ci-dessous:

Page 3 sur 230

Une page HTML ou XHTML s’écrit de la façon suivante :

• Sur la première ligne, la balise <!DOCTYPE ...> indique la version

Page 4 sur 230

<!DOCTYPE ... >

La balise <!DOCTYPE ...> étant longue et un peu barbare, elle n’est

Délimité par les balises <head> et </head>, l’en-tête

Tout le contenu visible dans le navigateur, le texte comme

1.1.2. LES BALISES.

Les balises sont des éléments de base du HTML. Ils permettent la

I.1.3. LES ATTRIBUTS

Un attribut est un élément, présent au sein de la balise ouvrante,

Voici un exemple d'attribut pour la balise <p> (balise définissant un

I.1.4. TYPES DE BALISES

Il existe deux sortes des balises :

 Les balises de structure ;

I.1.4.1. LES BALISES DE STRUCTURE.

Page 6 sur 230

I.1.4.2. LES BALISES DE STYLE

Les balises de style modifient la typographie du texte. Elles

 Les styles logiques sont les suivantes :

 Les styles physiques sont les suivantes :

Un document HTML commence par la balise <HTML> et finit par la

Dans l'en-tête, on ne met généralement qu'une seule information,

Il est conseillé d’indiquer juste au début de la page, la version du

En résumé, la structure générale d'une page HTML est la suivante.

Page 9 sur 230

Une liste est un paragraphe structuré contenant une suite

I.1.6.1. LES LISTES ORDONNEES

Elles se présentent sous la forme suivante :

Page 10 sur 230

Elles se présentent sous la forme suivante :

I.1.6.3. LES LISTES DE DEFINITION

Elles se présentent sous la forme suivante :

 La liste de définition est encadrée par les balises <dl> et </dl> ;

I.1.7. LES TABLEAUX

Les tableaux sont des suites de lignes permettant de présenter des

Généralement, les tableaux se présentent sous la forme suivante :

 Le tableau est encadré par les balises <TABLE> et </TABLE>.

Page 13 sur 230

 Le titre du tableau est compris entre les balises <CAPTION> et

 Les cellules d’en-tête d’un tableau sont encadrées par les

o COLSPAN : permet de définir une cellule dont la largeur est un

Page 14 sur 230

 Chaque cellule du tableau est encadrée par les balises <TD> et

 Quand un attribut d’alignement est appliqué à la balise <TR>, il

I.1.8. LES IMAGES

Page 15 sur 230

Dans l’insertion des images il faut également spécifier l’extension

 JPEG (.JPG) : avec cette extension, les images ayant un grand

Page 16 sur 230

I.1.9. LES LIENS HYPERTEXTES