COURS : PROGRAMMATION WEB

I. OBJECTIFS

 Objectif général :

Ce cours permet à l’étudiant de programmer des applications web.

 Objectifs spécifiques :
- Initier des apprenants à s’accoutumer avec des technologies web
(protocoles, architectures, serveurs, navigateurs).
- Initier aux apprenants comment concevoir des sites web statique et
dynamique.
- Donner la possibilité ou l’occasion aux apprenants d’avoir l’idée
générale sur le webmastering et webdesign.
- Exposer comment passer de l’analyse à la conception dans la
programmation Web avec l’utilisation de MySQL comme SGBD.
- Faire la programmation classique ou orientée objet avec des
langages web.
- Etre capable de développer des applications web en fusionnant
html, JavaScript, Css, PHP, Xml et autres.
- Initier les apprenants à travailler en équipe pour des projets.
- Comment faire communiquer des applications via les services web et
ses différents protocoles, ainsi l’utilisation des API DOM.

II. CONTENU DU COURS.

Chapitre 1 : Concepts fondamentaux du web.

Chapitre 2 : Notions sur les langages des balises.
Chapitre 3 : Aperçu sur le langage JavaScript.
Chapitre 4 : La base de données avec MySQL+ PHP.

Page 1 sur 161

Par CT. KANYINDA KAYEMBE Programmation Web
[2022 - 2023]
CHAPITRE I : CONCEPTS FONDAMENTAUX DU WEB
I.1. Introduction

On appelle web (toile en français), contraction de « World Wide

Web », une possibilité offerte par le réseau Internet de naviguer entre
les documents reliés par de liens hypertexte. Le concept du web a été
mis au point au CERN (Centre Européen de Recherche Nucléaire) en
1991 par une équipe de chercheur à laquelle appartenaient Tim Berner
LEE, le créateur du concept d’hyperlien, considéré aujourd’hui comme
père fondateur du Web (Dallaire, 2004)

Le principe du web repose sur l’utilisation d’hyperliens pour

naviguer entre les documents (pages Web) grâce à un logiciel appelé
navigateur (browser en anglais). Une page Web est un fichier
informatique unique écrit en HTML et peut contenir de nombreux
éléments multimédias tels que texte, des images, des sons, des
animations, etc. et pour être à d’autres pages Web à l’aide de balises.

En dehors de liens reliant les pages Web, le Web prend tout son
sens avec le protocole http permettant de lier des documents
hébergés par des ordinateurs distants (appelés serveurs Web par
opposition du client que représente le navigateur). Sur Internet les
documents sont ainsi repérés par une adresse appelée URL, permettant
de localiser une ressource sur n’importe quel serveur du réseau Internet.

Le web est sans doute une technologie majeure du 21ème

siècle. Et si sa nature, sa structure et son utilisation ont évolué au cours
du temps, force est de constater que cette évolution a également
profondément modifié nos pratiques dans tout le plan.

L’activité des entreprises et administrations repose de plus en

plus sur les technologies et applications Web. Les nouvelles applications
sont aujourd’hui presque systématiquement développées avec des
technologies Web, et les anciennes applications sont souvent adaptées
pour être accédées via un navigateur Web

Page 2 sur 161

Par CT. KANYINDA KAYEMBE Programmation Web
[2022 - 2023]
I.2. Applications Web.
I.2.1. Définition.

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).

I.2.2. Protocoles web et notion de port.

A. Protocoles web
 Protocole IP (Internet Protocol)
Une adresse IP permet d'identifier de façon unique une machine sur un
réseau. Cette adresse est sous la forme de quatre octets séparés
chacun par un point. Chacun de ces octets appartient à une classe
selon l'étendue du réseau.
Pour faciliter la compréhension humaine, un serveur particulier appelé
DNS (Domaine Name Service) est capable d'associer un nom à une
adresse IP.

 Protocole TCP
TCP est un protocole orienté connexion qui assure le contrôle des
erreurs. Lors d'une communication à travers ce protocole, les deux
processus (client et serveur qui peuvent être distants ou locaux) doivent
établir une connexion permanente entre eux ; cette connexion ne
pourra être fermée que si l’un d’entre eux la ferme ou si un problème
provoquant la fermeture de cette connexion surgi.
Ce protocole offre des performances moins bonnes (c'est le prix à
payer pour la fiabilité) et utilise la notion de port pour permettre à
plusieurs applications d'exploiter ce même protocole.

 Le protocole UDP

UDP est un protocole non orienté connexion n’assurant pas le

contrôle des erreurs (il ne garantit pas que les données arrivent dans
l'ordre d'émission). Lors d’une communication à travers le protocole
UDP, un processus X qui contacte un processus Y initie la
communication mais la connexion établie entre les deux ne dure que
Page 3 sur 161
Par CT. KANYINDA KAYEMBE Programmation Web
[2022 - 2023]
le temps de la transmission des données (de X vers Y), elle est
automatiquement fermée une fois le transfert terminé. Lorsque X aura
besoin une seconde fois de contacter Y il devra donc établir une
nouvelle connexion (La connexion est établie chaque fois que les deux
processus souhaitent communiquer). Ce protocole offre de bonnes
performances car il est très rapide.

Pour assurer les échanges, UDP utilise la notion de port, ce qui

permet à plusieurs applications d'utiliser UDP sans que les échanges
interfèrent les uns avec les autres. Cette notion est similaire à la notion
de port utilisée par TCP.

 Protocole HTTP.
Le protocole de transfert hypertexte (HyperText Transfer Protocol) est le
principal canal de diffusion de données sur Internet, principalement des
fichiers HTML (mais également de tous les types de fichiers).Il dispose de
nombreuses méthodes lui permettrant théoriquement d’accomplir de
nombreuses actions sur le serveur. En pratique, tous les serveurs ne les
implémentent pas, ce qui limite l’usage de http à quelques méthodes
clefs.

 Protocole FTP
Protocole de transfert de fichier (File Transfer Protocol), il a créé un flux
de données entre le serveur et le client qui peut être beaucoup plus
long que via http (celui-ci ferme la connexion des que le document est
envoyé). Il comprend bien plus des méthodes d’accès aux données
que http, ce qui le rend bien plus utile pour le transfert de grand
nombre de fichiers (vers ou depuis le serveur). A la différence de la
plupart des protocoles, FTP utilise deux connexions au lieu d’une seule :
L’une pour envoyer les commandes vers le serveur tout en recevant
des informations, l’autre pour le transfert des données.

Protocole SMTP
Les protocoles de transports de courriers électroniques. SMTP en lui-
même ne fait que transporter un message d’un point à un autre, en
aucun cas il ne prend en charge la structure de ce message. Il ne
permet pas non d’accéder à une messagerie.

Page 4 sur 161

Par CT. KANYINDA KAYEMBE Programmation Web
[2022 - 2023]
Protocole POP/ IMAP

Les protocoles POP et IMAP s'en chargent. POP et IMAP permettent

d'accéder à un compte de messagerie et d'en tirer les messages. Là où
POP récupère l'intégralité des messages vers le logiciel client, IMAP peut
les laisser sur le serveur, les marquer comme lus, les classer... POP est
donc utilisé pour la gestion de la boîte mail, tandis qu'IMAP permet une
gestion complète et à distance

Protocole MIME.
Les paquets acheminent les données, mais rien ne permet vraiment de
déterminer ce qu'ils contiennent. C'est le rôle de MIME (Multipurpose
Internet Mail Extensions). Tout ce qui concerne l'encodage, le type de
données ou le jeu de caractères est décrit dans l'en-tête MIME du
message non textuel. À l'origine utilisé pour les mails, le protocole HTTP a
récupéré sa syntaxe.

B. Notions de port.

De nombreuses applications réseaux pouvant être exécutées

simultanément sur une même machine, il est nécessaire que celle-ci
sache toutes les identifier. Pour ce faire, chacune de ces applications
se voit attribuer une adresse unique codée sur 16 bits appelée port.
Ainsi, l’utilisation de l’adresse IP associée à un port donne une
identification unique à une application s’exécutant sur une machine se
trouvant dans un réseau (ou pas). Un port peut être vu comme un point
d’entrée à un service d’un processus se trouvant sur une machine
connectée à un réseau (ou pas).

Il existe des milliers de ports, raison pour laquelle une

assignation standard a été mise au point afin d’aider à la configuration
des réseaux. Les ports 0 à 1023 sont les ports reconnus ou réservés. Ils
sont assignés par l’IANA (Internet Assigned Number Authority) et sont,
sur beaucoup de systèmes, uniquement utilisables par les processus
systèmes ou par des programmes exécutés par des utilisateurs
privilégiés. Les ports 1024 à 49151 sont appelés ports enregistrés et les
ports 49152 à 65535 sont les ports dynamiques ou privés.

Page 5 sur 161

Par CT. KANYINDA KAYEMBE Programmation Web
[2022 - 2023]
I.2.3. Serveurs Web.

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 [Link] 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.

On appelle serveur web tout logiciel permettant à des clients

d’accéder à des pages web à partir du navigateur installé sur leur
ordinateur distant. Il peut également être défini comme un "simple"
logiciel capable d'interpréter les requêtes HTTP (HyperText Tranfer
Protocole) arrivant sur le port associé au protocole HTTP, et de fournir
une réponse avec ce même protocole.

Voici quelques serveurs web les plus utilisés :

 Microsoft IIS (Internet Information Server);
 Apache ;
 Varnish.
 Apache Tomcat Coyote.
 BIG-IP.
 Rack Cache.
 Nginx.
 Phusion Passenger
 Microsoft PWS ( Personal Web Server ) ;
 Xitami.
 Microsoft [Link]
 GlassFish serveur d'application Open Source de Oracle
 Etc

a. 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
Icones des quelques navigateurs les plus utilisés:

Page 6 sur 161

Par CT. KANYINDA KAYEMBE Programmation Web
[2022 - 2023]
Microsoft Edge Internet Explorer Google Chrome Mozilla Firefox Opera

b. 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.

Exemple : [Link]

• http : Le protocole de communication (Ici HTTP)

• [Link] : 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
&.

I.2.4. Architecture Web.

a. Document Web

Les documents échangés sur le Web peuvent être de types très divers.
Le principal est le document hypertexte, un texte dans lequel certains
mots, ou groupes de mots, sont des liens, ou ancres, donnant accès à
d’autres documents.

b. Client Web

Le Web est donc un ensemble des serveurs connectés à l’Internet et

proposant des ressources. L’utilisateur qui accède à des ressources
utilise en général un type particulier de programme client, le
navigateur. Les deux principales tâches d’un navigateur consistent à :

Page 7 sur 161

Par CT. KANYINDA KAYEMBE Programmation Web
[2022 - 2023]
- Dialoguer avec un serveur ;
- Afficher à l’écran des documents transmis par un serveur.

Les navigateurs offrent des fonctionnalités bien plus étendues que les
deux tâches citées ci-dessus. Netscape offre par exemple des modules
permettant de composer des documents HTML. Généralement un
document web est créé grâce à un langage de balisage (html, xhtml,
…).
De ce fait, nous distinguons 2(deux) types des clients :

 Client léger.
Le poste client accède à une application située sur un ordinateur dit
« serveur » via une interface et un navigateur Web. L'application
fonctionne entièrement sur le serveur, le poste client reçoit la réponse
« toute faite » à la demande (requête) qu'il a formulée.

 Client lourd.
Le poste client doit comporter un système d'exploitation capable
d'exécuter en local une partie des traitements. Le traitement de la
réponse à la requête du client utilisateur va mettre en œuvre un travail
combine entre l'ordinateur serveur et le poste client.
Page 8 sur 161
Par CT. KANYINDA KAYEMBE Programmation Web
[2022 - 2023]
I.5. Notion de site web

I.5.1. Définition

Un site web (aussi appelé site internet) est un ensemble de fichiers

HTML, liés par des liens hypertextes, stockés sur un serveur web, c'est-à-
dire un ordinateur connecté en permanence à internet, hébergeant les
pages web. Cette connexion est nécessaire enfin de les rendre
accessibles par tous.

I.5.2. Catégories de site web.

En fonction des buts poursuivis, les sites web peuvent être regroupés en
catégories suivantes :

 Les sites personnels : ce sont des sites réalisés par des particuliers. Ce
genre des sites n’a souvent pas d’objectif visé. Ils juste à titre de loisir,
par passion d’une discipline, d’un domaine, d’une star, etc.
 Les sites communautaires : ce sont des sites réunissant les utilisateurs
autour d’un intérêt commun.
 Les sites intranet : ce sont des sites mis au point au sein d’une
entreprise ou organisation en vue de permettre la communication
entre différents services de l’entreprise pour l’échange des
informations.
 Les sites d’information : leur but est de fournir des informations
particulières à un type précis d’internautes et dans des domaines
bien précis.
 Les sites catalogues : leur unique but est de présenter l’offre de
l’entreprise ou de l’organisation.
 Les sites vitrines : ce sont des sites qui ont pour objectif la
présentation de l’image de l’entreprise. Attendez par là la
présentation des services offerts et les produits vendus par cette
dernière. Ils sont également appelés sites plaquettes ou sites identités.
 Les sites marchands : ce sont des sites permettant la vente des
produits en ligne. Le payement s’effectuant également de la même
manière (c'est-à-dire en ligne).

Page 9 sur 161

Par CT. KANYINDA KAYEMBE Programmation Web
[2022 - 2023]
 Les sites institutionnels : ce sont des sites qui présentent une
organisation. On y décrit toutes les activités et on fournit toutes les
organisations se rapportant à ladite entreprise.

I.5.3. Notion d’ergonomie.

A. Les couleurs dans une page web.

Il est conseillé de ne pas utiliser plus de trois couleurs

différentes dans un site web afin de respecter le critère de sobriété. Le
choix des couleurs devra correspondre, le cas échéant, aux couleurs
de l'organisation (notamment aux couleurs du logo) et exprimer une
ambiance particulière.

Quel que soit le choix des couleurs, il est recommandé

d'établir une couleur prédominante, représentant la majeure partie de
la page web, et une ou plusieurs couleurs secondaires plus dynamiques
(plus vives), en moindres proportions, afin de mettre des éléments en
exergue.

Les couleurs possèdent une symbolique implicite. Il est donc

important de les choisir en connaissance de cause. En effet, les
couleurs influent sur le comportement des individus :

 physiquement : appétit, sommeil, température du corps, etc.

 émotionnellement : sentiment de peur, de sécurité, de joie, etc.
 Psychologiquement : dynamisme, concentration, etc.

Voici un tableau récapitulant la signification classiquement associée

aux couleurs :

Couleur Symbolique méliorative Symbolique Domaine

péjorative
Bleu Calme, confiance, Froid, sommeil Voile, nouvelles
autorisation, apaisement, technologies,
sérénité, protection, informatique,
sérieux, mystique, bonté, médecine
eau, espace, paix
Violet Délicatesse, passion, Mélancolie, Culture,
Page 10 sur 161
Par CT. KANYINDA KAYEMBE Programmation Web
[2022 - 2023]
 discrétion, modestie, tristesse, deuil, politique
religion. insatisfaction
Rose Charme, intimité, femme, Naïveté Journal
beauté personnel,
femmes
Rouge Chaleur, force, courage, Violence, Luxe, mode,
dynamisme, triomphe, colère, danger, sport,
amour, enthousiasme. urgence, marketing,
interdit, sang, médias
enfer.
Orange Tiédeur, confort, gloire, Feu, alerte Divertissement,
bonheur, richesse, sport, voyage
honneur, plaisir, fruit,
odeur, tonus, vitalité.
Jaune Lumière, gaieté, soleil, Tromperie, Tourisme
vie, pouvoir, dignité, or, égoïsme,
richesse, immortalité. jalousie, orgueil,
alerte
Vert Nature, vie végétale, Découverte,
secours, équilibre, foi, nature, voyage,
apaisement, repos, éducation
confiance, tolérance,
espoir, orgueil, jeunesse,
charité.
Brun Calme, philosophie, Saleté Environnement
terroir.
Blanc Pureté, innocence, Mode,
neige, propreté, actualités
fraîcheur, richesse.
Gris Neutralité, respect. Design,
associations,
organisations à
but non lucratif
Noir Sobriété, luxe, nuit. Mort, obscurité, Cinéma, art,
tristesse, photographie
monotonie. et interdit

Page 11 sur 161

Par CT. KANYINDA KAYEMBE Programmation Web
[2022 - 2023]
 Il s’avère important de signaler que le choix de la couleur
d'arrière-plan (en anglais background) est primordial, car un arrière-
plan mal choisi peut gêner la lisibilité. Un bon contraste entre la couleur
d'avant-plan et la couleur dominante de l'arrière-plan est nécessaire. A
ce titre, il est fortement déconseillé d'opter pour un arrière-plan
graphique car il peut gêner la lecture et dégage généralement un
sentiment d'amateurisme. L'arrière-plan devra ainsi généralement être
choisi très pâle.

B. Choix de la police dans un site web.

Il est fortement contre-indiqué d'utiliser plus de deux polices

sur un site web. Les polices stylisées doivent être utilisées avec
parcimonie (pour le titre par exemple) et l'essentiel de la page web
devra être réalisée avec une police classique (Arial, Verdana,
Helvetica, etc.).

Pour une utilisation imprimée traditionnelle, les polices à

empattement (serf) facilitent généralement la lecture car les
empattements permettent d'accompagner le regard du lecteur.

Sur le web, l'utilisation de telles polices est déconseillée car

selon la définition de l'écran du visiteur, les empattements peuvent très
vite devenir des pattes de mouche gênantes pour la lecture. Ainsi, il est
souhaitable d'opter pour des polices sans empattement (sans serif), plus
rondes.

Enfin, sachez que les textes utilisant des polices non standard
risquent de ne pas apparaître correctement sur les écrans des
internautes. Pour créer des titres avec de telles polices, il est néanmoins
possible de contourner cette limitation en créant des images
transparentes comportant le texte.

Page 12 sur 161

Par CT. KANYINDA KAYEMBE Programmation Web
[2022 - 2023]
I.5.4. Hébergement et référencement.
A. L’hébergement.

Pour rendre un site Internet accessible à tout instant, il faut l’amener sur
serveur relié en permanence à l’Internet. La société offrant ce genre
de service est appelé hébergeur ; et le service qu’elle fournit s’appelle
l’hébergement. Les hébergeurs sont situés dans des salles
d’hébergements spécialisés appelés Data Center (Centre des
données).
Il existe deux sortes d’hébergement :

 Les hébergeurs gratuits ;

 Les hébergeurs professionnels.

Les hébergeurs gratuits prêtent gratuitement de l’espace sur un serveur.

En revanche, l’hébergeur gagne de l’argent par la publicité effectuée
sur le site ou par le trafic sur le site. Le service fournit par ce genre
d’hébergeurs n’est pas de très bonne qualité.

Par contre les hébergeurs professionnels sont obtenus moyennant

quelques frais. Ils offrent un service de qualité supérieure (bande
passante) et assure la sécurité des données. Si le site a un trafic un
important et l’on désire obtenir un nom de domaine ; alors on est obligé
d’avoir un hébergeur professionnelle. Pour ce genre de service,
l’espace réservée à l’accueil des machines a une importance capitale.
Il existe trois sortes d’hébergement professionnel :

 L’hébergement mutualisé : quand le serveur héberge un grand

nombre des sites ;

 L’hébergement dédié : quand un serveur est complètement loué

par un entreprise ou une organisation.

 La colocation : quand une baie d’hébergement est louée en vue

les serveurs du client. Une baie est armoire se trouvant dans de

Page 13 sur 161

Par CT. KANYINDA KAYEMBE Programmation Web
[2022 - 2023]
 Data Center, pouvant recevoir des éléments dans des
emplacements ayant une largeur de dix-neuf pouces.

B. Le référencement

Le référencement désigne l'ensemble des techniques permettant

d'améliorer la visibilité d'un site web. Parmi ces techniques nous
pouvons citer :
 indexation : c’est l’opération qui consiste à faire connaître le site
auprès des outils de recherche grâce aux formulaires qu’ils
possèdent ;
 positionnement : c’est l’opération qui consiste à placer le site ou
certaines pages de ce dernier en première page de résultat pour
certains mots-clés ;
 classement : c’est une opération qui a un but identique au
positionnement mais lui concerne des expressions plus élaborées.

Si l’on veut donner plus de référencement aux pages du site ; il faudra

avoir un contenu attrayant, bien choisir le titre, avoir une adresse
adaptée, un corps de texte lisible par les moteurs, les balises Meta (ce
sont des balises insérées au début des documents HTML, mais qui ne
s’affichent pas sur la page. Elles décrivent exactement le contenu de la
page), des liens biens pensés et des attributs ALT pour déterminer le
contenu des images.

C. Les différents noms des domaines.

Le nom de domaine d’un site est l’adresse ou l’url de celui-ci. Il est

conseillé de choisir des noms de domaines simples car ce genre des
noms de domaines peut facilement se transmettre de bouche à oreille.
Il faudra donc éviter des noms de domaines longs ou compliqués.
Les noms de domaines sont repartis selon les activités des sites. Nous
pouvons citer les noms suivants :

 .sarpa : pour les machines issues du réseau originel ;

 .com : attribué aux entreprises à vocation commerciale ;
 .edu : attribué aux organismes éducatifs ;
 .gov : attribué aux organismes gouvernementaux ;
 .mil : attribué aux organismes militaires ;
Page 14 sur 161
Par CT. KANYINDA KAYEMBE Programmation Web
[2022 - 2023]
  .net : pour les organismes ayant trait aux réseaux ;
 .org : pour les entreprises à but non lucratif ;
 .fr : site situé dans la région française;
 .ca : site situé dans la région canadienne ;
 .cd : site situé dans la région congolaise ;
 .sh : site situé dans la région française.

I.5.5. Présentation générale d’une page web

Il convient de noter que la taille de la page web dépend

essentiellement de la définition de l’affichage. En vue d’obtenir des
pages plus attractives, il est nécessaire de respecter une certaine
ergonomie. Le terme Ergonomie désigne l'utilisation de connaissances
scientifiques dans le but d'améliorer son environnement de travail. Elle
est caractérisée par l’efficacité (c’est-à-dire l’adoption des solutions
appropriés d’utilisation d’un produit) ; la sécurité (le choix des solutions
adéquats pour protéger l’utilisateur) et le confort d’utilisation (c'est-à-
dire faire en sorte que l’utilisateur se fatigue le moins possible en lisant la
page).
Puisque les utilisateurs sont de profils différents il faudra alors
tenir compte des leurs attentes (tous les utilisateurs n’ont pas les mêmes
attentes) ; leurs habitudes ; leurs âge ; les équipements (l’affichage du
site dépend du navigateur et de la résolution d’affichage) et leurs
niveaux de connaissances (tenir compte du fait que tous les utilisateurs
du site ne sont des experts en informatiques. L’ergonomie devra alors
est conçu en fonction de l’utilisateur le moins expérimenté).

Aussi faut-il savoir que la position des informations d’une page web est
d’une importance capitale. Ainsi les informations les plus importantes
doivent être situées au début de la page.
Généralement les pages web contiennent les éléments ci-après :
 Un en-tête : il contient le nom du site, un bandeau de
navigation et une zone réservée à la publicité ;
 Un logo : il est situé généralement au coin supérieur gauche de
la page. Un clic sur ce logo nous amène à la page d’accueil. ;

Page 15 sur 161

Par CT. KANYINDA KAYEMBE Programmation Web
[2022 - 2023]
  Une zone de navigation (également appelés menu) : elle située
à gauche ou à droite de la page ;
 Le corps de la page : il contient tous les informations utiles.
 Un pied de page : il contient un lien vers un formulaire de
contact, un plan d’accès, la date de la mise à jour et autres
Ainsi voici comment peut se présenter un site web :

I.5.6. Les éléments de la navigation

Les éléments de navigation sont des outils présents sur une page web,
permettant à l’utilisateur de se situer par rapport à l’ensemble du site et
de parcourir toutes les rubriques du site. On peut mettre en œuvre les
éléments de navigation par les moyens suivants :

 Le fil d’Ariane : c’est un outil de navigation comprenant une suite des

liens ayant une hiérarchie. Il est caractérisé par des liens séparés par
le caractère ‘>’(Accueil > Webmastering > Navigation). Le caractère
‘>’ symbolise la hiérarchie. Le lien Navigation est non cliquable et
représente la page sur laquelle se trouve l’internaute.

 La navigation par onglets : les onglets permettent de distinguer les

rubriques et de les parcourir facilement. Elle se présente de la
manière suivante :

Page 16 sur 161

Par CT. KANYINDA KAYEMBE Programmation Web
[2022 - 2023]
 La carte du site (ou plan du site) : permet à l’utilisateur d’avoir un
aperçu sur tout le contenu du site en un seul coup d’œil.

I.6. Le webmastering

L'ensemble des tâches utiles à la création d'un site web est

désigné par le terme webmastering. Un webmaster est donc la
personne se chargeant des tâches mentionnées ci-dessous. La création
d’un site web est un projet à part entière qui nécessite un certain
nombre des taches préalables à savoir :

 La conception : elle consiste à la détermination des objectifs du

site, des personnes ciblées et de la structure du site. En vue
d’obtenir une satisfaction générale, il est nécessaire d’associer
quelques représentants de l’entreprise bénéficiaire du site.
L’objectif principal de cette phase est d’analyser tous les besoins
et d’imaginer les différents concepts d’utilisation du site.

 La réalisation : elle consiste à l’écriture des fichiers HTML en vue de

la création des pages web. Ces fichiers HTML peuvent être
introduits à la main (c’est-à-dire en saisissant le code dans un
simple éditeur des textes) ou grâce un éditeur spécial (WYSIWYG :
What You See Is What You Get). Le WYSIWYG est un logiciel
permettant la création des pages web visuellement, juste en
plaçant des objets et des contrôles. Le code HTML est
automatiquement généré par Le logiciel. L’inconvénient de cette
méthode est le fait qu’elle est très ennuyeuse si l'éditeur ne
permet pas de réaliser exactement ce que souhaite l’utilisateur.

 L’hébergement : il consiste à amener son site web sur un serveur

web, en vue de le rendre disponible sur Internet à tout moment
qu’un utilisateur voudra y accéder.

Page 17 sur 161

Par CT. KANYINDA KAYEMBE Programmation Web
[2022 - 2023]
  La promotion et référencement : la promotion est l’ensemble des
activités qui permet que le site soit connu par une quantité
suffisante des personnes. Par contre le référencement est
l'ensemble des techniques qui permettent d'améliorer la visibilité
d'un site web.
 La maintenance et la mise à jour : elles consistent à l’entretien du
site et l’actualisation des informations contenues dans ce dernier.

I.7. Le webdesign.

Le terme « webdesign » désigne la discipline consistant à

structurer les éléments graphiques d'un site web afin de traduire, à
travers une dimension esthétique, l'identité visuelle de la société ou de
l'organisation. Il s'agit ainsi d'une étape de conception visuelle, par
opposition à la conception fonctionnelle (ergonomie, navigation).

L'objet du webdesign est de valoriser l'image de l'entreprise

ou de l'organisation par le biais d'éléments graphiques afin de renforcer
son identité visuelle et de procurer un sentiment de confiance à
l'utilisateur. Néanmoins, en vertu des critères d'ergonomie, un site web
doit avant tout répondre aux attentes des utilisateurs et lui permettre de
trouver facilement l'information qu'il cherche.

Par extension le terme webdesigner désigne le métier

consistant à concevoir le design d'un site web.

I.8. Le web service.

I.8.1. Définition.

A. Selon W3C :

Un service Web est un composant logiciel identifié par une URI, dont les
interfaces publiques sont définies et appelées en XML. Sa définition
peut être découverte par d'autres systèmes logiciels. Les services Web
peuvent interagir entre eux d'une manière prescrite par leurs définitions,
en utilisant des messages XML portés par les protocoles Internet.

B. Selon Dico du Net :

Page 18 sur 161
Par CT. KANYINDA KAYEMBE Programmation Web
[2022 - 2023]
Une technologie permettant à des applications de dialoguer à
distance via Internet indépendamment des plates-formes et des
langages sur lesquels elles reposent.

C. Selon Wikipédia :

Un service Web est un programme informatique permettant la

communication et l'échange de données entre applications et
systèmes hétérogènes dans des environnements distribués. Il s'agit donc
d'un ensemble de fonctionnalités exposées sur internet ou sur un
intranet, par et pour des applications ou machines, sans intervention
humaine, et en temps réel

I.8.2. Intérêts et caractéristiques d’un service web.

A. Intérêts.
Les services Web (en anglais Web services) représentent un
mécanisme de communication entre applications distantes à travers le
réseau internet indépendant de tout langage de programmation et de
toute plate-forme d'exécution :

• utilisant le protocole HTTP comme moyen de transport. Ainsi, les

communications s'effectuent sur un support universel, maîtrisé et
généralement non filtré par les pare-feu ;
• Employant une syntaxe basée sur la notation XML pour décrire les
appels de fonctions distantes et les données échangées ;
• Organisant les mécanismes d'appel et de réponse.

Grâce aux services Web, les applications peuvent être vues

comme un ensemble de services métiers, structurés et correctement
décrits, dialoguant selon un standard international plutôt qu'un
ensemble d'objets et de méthodes entremêlés. Le premier bénéfice de
ce découpage est la facilité de maintenance de l'application, ainsi
que l'interopérabilité permettant de modifier facilement un composant
(un service) pour le remplacer par un autre, éventuellement développé
par un tiers. Qui plus est, les services Web permettent de réduire la
complexité d'une application car le développeur peut se focaliser sur
un service, indépendamment du reste de l'application.
Page 19 sur 161
Par CT. KANYINDA KAYEMBE Programmation Web
[2022 - 2023]
B. Caractéristiques.

Un service Web possède les caractéristiques suivantes :

o Il est accessible via le réseau ;
o Il dispose d'une interface publique (ensemble d'opérations) décrite
en XML ;
o Ses descriptions (fonctionnalités, comment l'invoquer et où le trouver
?) sont stockées dans un annuaire ;
o Il communique en utilisant des messages XML, ces messages sont
transportés par des protocoles Internet (généralement HTTP, mais rien
n'empêche d'utiliser d'autres protocoles de transfert tels : SMTP, FTP,
BEEP...) ;
o L’intégration d'application en implémentant des services Web
produit des systèmes faiblement couplés, le demandeur du service
ne connaît pas forcément le fournisseur.
o Ce dernier peut disparaître sans perturber l'application cliente qui
trouvera un autre fournisseur en cherchant dans l'annuaire.

I.8.3. Architecture et fonctionnement d'un service Web

Les services Web reprennent la plupart des idées et des

principes du Web (HTTP, XML), et les appliquent à des interactions entre
machines. Comme pour le World Wide Web, les services Web
communiquent via un ensemble de technologies fondamentales qui
partagent une architecture commune. Ils ont été conçus pour être
réalisés sur de nombreux systèmes développés et déployés de façon
indépendante.

Les technologies utilisées par les services Web sont HTTP, WSDL,
REST, XML-RPC, SOAP et UDDI.

Le fonctionnement des services Web s'articule autour de trois acteurs

principaux illustrés par le schéma suivant :

Page 20 sur 161

Par CT. KANYINDA KAYEMBE Programmation Web
[2022 - 2023]
a. Service provider service.

Le fournisseur de service met en application le service Web et le rend

disponible sur Internet (ou en général sur le réseau).

b. Service requester programme client.

C'est n'importe quel consommateur du service Web. Le demandeur

utilise un service Web existant en ouvrant une connexion réseau et en
envoyant une demande en XML (REST, XML-RPC, SOAP).

c. Annuaire service registry.

Le registre de service est un annuaire de services. Le registre fournit un

endroit central où les programmeurs peuvent publier de nouveaux
services ou en trouver. Les interactions entre ces trois acteurs suivent
plusieurs étapes :
• La publication du service : le fournisseur diffuse les descriptions de ses
services Web dans l'annuaire.
• La recherche du service : le client cherche un service particulier, il
s'adresse à un annuaire qui va lui fournir les descriptions et les URL des
services demandés afin de lui permettre de les invoquer.
• L'invocation du service : une fois que le client récupère l'URL et la
description du service, il les utilise pour l'invoquer auprès du fournisseur
de services.
Page 21 sur 161
Par CT. KANYINDA KAYEMBE Programmation Web
[2022 - 2023]
CHAPITRE II : NOTIONS SUR LES LANGAGES DES BALISES
II.1. Extensible Hyper Text Markup Language « HTML ».
II.1.1. Structure d’une page html.

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>.

<!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.

Page 22 sur 161

Par CT. KANYINDA KAYEMBE Programmation Web
[2022 - 2023]
 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>.

II.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 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é.

II.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.

Page 23 sur 161

Par CT. KANYINDA KAYEMBE Programmation Web
[2022 - 2023]
II.1.4. Types de balises

Il existe deux sortes des balises :

 Les balises de structure ;

 Les balises de style.

II.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,…
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 : <!-- Commentaire -->.

II.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 :

Page 24 sur 161

Par CT. KANYINDA KAYEMBE Programmation Web
[2022 - 2023]
 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.
<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.
Page 25 sur 161
Par CT. KANYINDA KAYEMBE Programmation Web
[2022 - 2023]
<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.

II.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>.

II.1.6. Liste d’éléments

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.

II.1.6.1. Les listes ordonnées.

Elles se présentent sous la forme suivante :

<ol>
<li> Elément 1 </li>
<li> Elément 2 </li>
<li> Elément 3 </li>
</ol>

Page 26 sur 161

Par CT. KANYINDA KAYEMBE Programmation Web
[2022 - 2023]
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.

II.1.6.2. Les listes non ordonnées

Elles se présentent sous la forme suivante :

<ul>
<li> Elément 1 </li>
<li> Elément 2 </li>
<li> Elément 3 </li>
</ul>

A l’affichage on aura :
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.

Page 27 sur 161

Par CT. KANYINDA KAYEMBE Programmation Web
[2022 - 2023]
II.1.6.3. Les listes de définition

Elles se présentent sous la forme suivante :

<dl>
<dt> Terme1 </dt>
<dd> Définition du Terme1 </dd>
<dt> Terme2 </dt>
<dd> Définition du Terme2 </dd>
<dt> Terme3 </dt>
<dd> Définition du Terme3 </dd>
</dl>
A l’affichage on aura :

Terme1
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.

II.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

Page 28 sur 161

Par CT. KANYINDA KAYEMBE Programmation Web
[2022 - 2023]
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>
<TH> Titre 3 </TH>
<TH> Titre 4 </TH>
</TR>
<TR>
<TH> Titre 5 </TH>
<TD> Donnée 1 </TD>
<TD> Donnée 2 </TD>
<TD> Donnée 3 </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.

Page 29 sur 161

Par CT. KANYINDA KAYEMBE Programmation Web
[2022 - 2023]
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 ;
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 ;
Page 30 sur 161
Par CT. KANYINDA KAYEMBE Programmation Web
[2022 - 2023]
o ROWSPAN : permet de définir une cellule dont la hauteur est un
multiple de la ligne de base ;
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.

II.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;
 TITLE : pour définir un texte qui s’affichera quand on survole l’image.
Sa valeur un est une chaîne des caractères ;

Page 31 sur 161

Par CT. KANYINDA KAYEMBE Programmation Web
[2022 - 2023]
 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 ;
 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.

Page 32 sur 161

Par CT. KANYINDA KAYEMBE Programmation Web
[2022 - 2023]
II.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é.

II.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 :
Page 33 sur 161
Par CT. KANYINDA KAYEMBE Programmation Web
[2022 - 2023]
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
([Link]
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.

II.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 :

<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 ;

Page 34 sur 161

Par CT. KANYINDA KAYEMBE Programmation Web
[2022 - 2023]
 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.

II.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 ;

II.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 ;
Page 35 sur 161
Par CT. KANYINDA KAYEMBE Programmation Web
[2022 - 2023]
o MULTIPLE : permet à l'utilisateur de choisir plusieurs éléments au même
moment de la liste.

II.1.11. Liste des nouvelles balises 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
<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

Page 36 sur 161

Par CT. KANYINDA KAYEMBE Programmation Web
[2022 - 2023]
<source>(Nouvelle) Définit la source d’un contenu multimédia
<span> Définit une section de type inline
<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

II.2. Cascading Style Sheet (CSS).

II.2.1. Introduction.

On peut écrire du code CSS à trois endroits différents qui sont :

 Méthode A : Dans un [Link] (le moyen le plus recommandé)
 Méthode B : Dans l’en-tête du fichier Xhtml
 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 :

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’[Link] (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 :
 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 ;
Page 37 sur 161
Par CT. KANYINDA KAYEMBE Programmation Web
[2022 - 2023]
a2. 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>

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.
Schématiquement, une feuille de style CSS ressemble à ça :

Page 38 sur 161

Par CT. KANYINDA KAYEMBE Programmation Web
[2022 - 2023]
Code CSS

1. Balise1
2. {
3. Propriété : valeur ;
4. Propriété : valeur ;
5. Propriété : valeur ;
6. }
7. Balise2
8. {
9. Propriété : valeur ;
10. Propriété : valeur ;
11. Propriété : valeur ;
12. }
13. Balise3
14. {
15. Propriété : valeur ;
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
6. {
7. Color :red ;
Page 39 sur 161
Par CT. KANYINDA KAYEMBE Programmation Web
[2022 - 2023]
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 »

II.2.2. Voici quelques propriétés utilisées.

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, verdana
de caractères
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 : (valeur principale {font
d’écriture c.à.d. le par défaut) –weight :
degré de graissage bold : gras bold ;}
de la police Lighter : moins
gras que le style
en cours
Bolder : plus gras
que le style en
cours
Page 40 sur 161
Par CT. KANYINDA KAYEMBE Programmation Web
[2022 - 2023]
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 de underline
liens au passage overline ;})
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 mot uppercase ;}
minuscules en majuscule
Lowercase : 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 : small –
c.à.d. à peu près la par défaut) caps ;}
taille des minuscules Small –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 }
Page 41 sur 161
Par CT. KANYINDA KAYEMBE Programmation Web
[2022 - 2023]
 mots, à la manière couleur blanche.
du surligneur sur
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 la -exposant,
align lettres ou de mots, base de la ligne vertical-align :
applicable aux (valeur par super}
cellules d’un tableau défaut)
sub : indice
super : exposant
middle : au milieu
de la ligne
(centrage
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, font- h3 {font :
permettant variant, font- bold1.2em
d’indiquer en une weight, font –size, verdana, sans-
seule propriété, les line-height : serif ;}
mises en forme qui (hauteur de
concernent ligne, voir plus
l’italique, les petites loin) et font –
majuscules, le family.
Page 42 sur 161
Par CT. KANYINDA KAYEMBE Programmation Web
[2022 - 2023]
 graissage, la taille et
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é

II.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é.

Page 43 sur 161

Par CT. KANYINDA KAYEMBE Programmation Web
[2022 - 2023]
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;
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/ [Link] » >

 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

Reproduisez des balises correspondantes pour des formulaires ci-

dessous :

Page 44 sur 161

Par CT. KANYINDA KAYEMBE Programmation Web
[2022 - 2023]
 Page 45 sur 161
Par CT. KANYINDA KAYEMBE Programmation Web
[2022 - 2023]
 CHAPITRE III : APERCU SUR LE LANGAGE JAVASCRIPT
III.1. Généralités
JavaScript est un langage de scripts qui incorporé aux
balises Html, permet 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.

III.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 objets N'accède pas aux objets du
du navigateur Confidentialité navigateur
des codes nulle (code Sécurité (code source compilé)
source visible)

III.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
Page 46 sur 161
Par CT. KANYINDA KAYEMBE Programmation Web
[2022 - 2023]
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 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.
Page 47 sur 161
Par CT. KANYINDA KAYEMBE Programmation Web
[2022 - 2023]
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.

III.4. Les événements

III.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.

III.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
Page 48 sur 161
Par CT. KANYINDA KAYEMBE Programmation Web
[2022 - 2023]
 un formulaire

III.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é.

III.4.3.1 OnClick.
Evénement classique en informatique, le clic de la souris. Le code de
ceci est :

Nous reviendrons en détail sur les formulaires dans le chapitre suivant.

III.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 49 sur 161

Par CT. KANYINDA KAYEMBE Programmation Web
[2022 - 2023]
III.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.
III.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".

Page 50 sur 161

Par CT. KANYINDA KAYEMBE Programmation Web
[2022 - 2023]
III.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 :

III.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.
III.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.
III.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 texte onBlur, onChange, onFocus, onSelect
Elément bouton OnClick
Case à cocher OnClick
Bouton Radio OnClick
Liste de sélection onBlur, onChange, onFocus
Bouton Submit OnClick
Page 51 sur 161
Par CT. KANYINDA KAYEMBE Programmation Web
[2022 - 2023]
Button Reset OnClick

III.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.

Le code est :

On peut aussi utiliser ceci dans la balise <head>

III.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.
Page 52 sur 161
Par CT. KANYINDA KAYEMBE Programmation Web
[2022 - 2023]
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 :

Les puristes devront donc prévoir une version différente selon les
versions JavaScript.
III.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 :

III.5. 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.

Page 53 sur 161

Par CT. KANYINDA KAYEMBE Programmation Web
[2022 - 2023]
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 :

Notez que les paramètres (arguments) sont optionnels. Cela dépend

de ce que l’on veut faire.

Exemple :

Page 54 sur 161

Par CT. KANYINDA KAYEMBE Programmation Web
[2022 - 2023]
III.6. 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.
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 : [Link]
()

Page 55 sur 161

Par CT. KANYINDA KAYEMBE Programmation Web
[2022 - 2023]
Exemple :

Cet exemple affiche le texte « Bonjour le monde » sur la page du navigateur.

Un autre exemple d’impression d’une page web :

Page 56 sur 161

Par CT. KANYINDA KAYEMBE Programmation Web
[2022 - 2023]
II.7. Les structures de contrôle
Les structures de contrôle permettent de contrôle la séquence
d’exécution d’un programme.

III.7.1. Les structures alternatives

Les structures alternatives test une certaine condition avant
d’exécution ou non une série d’instruction.

III.7.1.1. Si (if)
La structure if (si) pour syntaxe suivante :

Exemple :

Page 57 sur 161

Par CT. KANYINDA KAYEMBE Programmation Web
[2022 - 2023]
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 :

Exemple :

c. if…else if…else

Page 58 sur 161

Par CT. KANYINDA KAYEMBE Programmation Web
[2022 - 2023]
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 59 sur 161

Par CT. KANYINDA KAYEMBE Programmation Web
[2022 - 2023]
Grâce aux opérateurs logiques, on peut teste plus d’une condition
avant d’exécuter une série d’instructions.

Exemple :

Page 60 sur 161

Par CT. KANYINDA KAYEMBE Programmation Web
[2022 - 2023]
 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 61 sur 161

Par CT. KANYINDA KAYEMBE Programmation Web
[2022 - 2023]
Exemple :

III.7.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 satisfaisante,
contrairement à la structure précédente qui parcours l’ensemble de
cas testé.
Le switch a comme syntaxe :

Page 62 sur 161

Par CT. KANYINDA KAYEMBE Programmation Web
[2022 - 2023]
Avec la structure switch, on peut écrire l’exemple précédent comme ceci :

On peut également utiliser plus d’une condition avant d’exécuter une série
d’instructions.

Exemple :

Page 63 sur 161

Par CT. KANYINDA KAYEMBE Programmation Web
[2022 - 2023]
III.7.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 64 sur 161

Par CT. KANYINDA KAYEMBE Programmation Web
[2022 - 2023]
Si la condition est fausse au début, aucune instruction n’est exécutée.

Exemple : la somme de i allant de 1 à 10 :

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 65 sur 161

Par CT. KANYINDA KAYEMBE Programmation Web
[2022 - 2023]
 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 :

Page 66 sur 161

Par CT. KANYINDA KAYEMBE Programmation Web
[2022 - 2023]
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 d’être
utilisé dans la boucle, contraire à la dernière où l’indice est initialisé
dans la formulation de la boucle.

III.8. 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 67 sur 161

Par CT. KANYINDA KAYEMBE Programmation Web
[2022 - 2023]
III.9. 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.

Page 68 sur 161

Par CT. KANYINDA KAYEMBE Programmation Web
[2022 - 2023]
III.10. JavaScript et le formulaire

III.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> (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…>.

III.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.

III.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 :

Page 69 sur 161

Par CT. KANYINDA KAYEMBE Programmation Web
[2022 - 2023]
 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 la
value 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.

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 70 sur 161

Par CT. KANYINDA KAYEMBE Programmation Web
[2022 - 2023]
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 [Link].

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 71 sur 161

Par CT. KANYINDA KAYEMBE Programmation Web
[2022 - 2023]
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
[Link].

3. Les boutons radio

Les boutons radio sont utilisés pour noter un choix, et seulement un seul,
parmi un ensemble de propositions.

Propriété Description
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é :

Code associé :

Page 72 sur 161

Par CT. KANYINDA KAYEMBE Programmation Web
[2022 - 2023]
4. 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.
Page 73 sur 161
Par CT. KANYINDA KAYEMBE Programmation Web
[2022 - 2023]
 Propriété Description
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 :

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.

5. 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.

Propriété Description
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
Page 74 sur 161
Par CT. KANYINDA KAYEMBE Programmation Web
[2022 - 2023]
 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.

Exemple :

Code associé :

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

Page 75 sur 161

Par CT. KANYINDA KAYEMBE Programmation Web
[2022 - 2023]
fonction teste quelle option a été sélectionnée. Le chemin complet de
l'élément sélectionné est [Link].

Comme l'index commence à 0, il ne faut pas oublier d'ajouter 1 pour

retrouver le juste rang de l'élément.

6. 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 :

Propriété Description
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.

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 [Link] =
'Check\r\nthis\r\nout'.

Page 76 sur 161

Par CT. KANYINDA KAYEMBE Programmation Web
[2022 - 2023]
7. 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.

La syntaxe Html est :

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.
8. 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>.
La syntaxe Html est :

Où value donne le texte du bouton.

Une seule méthode est associée au contrôle Submit, c'est la méthode
onClick()

9. 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.

La syntaxe Html est :

10. L'envoi d'un formulaire par email.

Uniquement Netscape !!!

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
Page 77 sur 161
Par CT. KANYINDA KAYEMBE Programmation Web
[2022 - 2023]
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 :

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 78 sur 161

Par CT. KANYINDA KAYEMBE Programmation Web
[2022 - 2023]
 CHAPITRE IV : BASE DE DONNEES AVEC MySQL + PHP
IV.1. PHP

IV.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 79 sur 161

Par CT. KANYINDA KAYEMBE Programmation Web
[2022 - 2023]
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.

IV.1.2. 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 80 sur 161

Par CT. KANYINDA KAYEMBE Programmation Web
[2022 - 2023]
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 />…

L’instruction permet de faire un saut de ligne.

Les commentaires en PHP peuvent se présenter sous deux formes : /* */

ou //

Page 81 sur 161

Par CT. KANYINDA KAYEMBE Programmation Web
[2022 - 2023]
IV.1.3. 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é.

IV.1.3.1. Déclaration d’une variable

Quelques consignes pour la déclaration des variables :

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 :

Page 82 sur 161

Par CT. KANYINDA KAYEMBE Programmation Web
[2022 - 2023]
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 :

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.

Page 83 sur 161

Par CT. KANYINDA KAYEMBE Programmation Web
[2022 - 2023]
Exemple :

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.

IV.1.4. 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
Page 84 sur 161
Par CT. KANYINDA KAYEMBE Programmation Web
[2022 - 2023]
__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 :

Dans le navigateur, on a comme résultat :

Page 85 sur 161

Par CT. KANYINDA KAYEMBE Programmation Web
[2022 - 2023]
IV.1.5. Les opérateurs

IV.1.5.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).

Opérateur Symbole utilisé

Addition +
Soustraction -
Multiplication *
Division /
Modulo %

IV.1.5.2. Opérateurs Logiques

Opérateur Symbole utilisé

NON !
ET && ou and
OU inclusif ||ou or
OU exclusif Xor

IV.1.5.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.

Opérateur Symbole
utilisé
Strictement inférieur à <
Strictement supérieur >
Inférieur ou égal à <=
Supérieur ou égal à >=
Égal à ==
Différent de !=

Page 86 sur 161

Par CT. KANYINDA KAYEMBE Programmation Web
[2022 - 2023]
IV.1.5.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.

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.
IV.1.5.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.

Page 87 sur 161

Par CT. KANYINDA KAYEMBE Programmation Web
[2022 - 2023]
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
exemple : $a.= " et bienvenue"; équivaut à $a = $a. " et bienvenue";

IV.1.6. 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
IV.1.6.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

IV.1.6.2. Print

La fonction print est similaire à la fonction echo. La syntaxe de la

fonction print est la suivante :

Page 88 sur 161

Par CT. KANYINDA KAYEMBE Programmation Web
[2022 - 2023]
print (expression);

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 :

IV.1.6.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 89 sur 161

Par CT. KANYINDA KAYEMBE Programmation Web
[2022 - 2023]
IV.1.7. Les structures de contrôles

IV.1.7.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 :

Exemple :

Page 90 sur 161

Par CT. KANYINDA KAYEMBE Programmation Web
[2022 - 2023]
c. if…else if…else
Cette forme permet d’exécuter plus d’un bloc d’instructions chacun
selon la condition associée.

Syntaxe :

Exemple :

La structure else if pouvant se répéter autant de fois que des conditions

prévues l’exigeront.
Page 91 sur 161
Par CT. KANYINDA KAYEMBE Programmation Web
[2022 - 2023]
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.

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 92 sur 161

Par CT. KANYINDA KAYEMBE Programmation Web
[2022 - 2023]
IV.1.7.2. Les structures itératives (boucle)

a. Boucle while
Syntaxe :

Exemple : la table de multiplication par 12

Résultat : On aura la table de multiplication par 6

Page 93 sur 161

Par CT. KANYINDA KAYEMBE Programmation Web
[2022 - 2023]
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 :

L’exemple précédent peut encore s’écrire en utilisant la boucle for

comme ceci :

Page 94 sur 161

Par CT. KANYINDA KAYEMBE Programmation Web
[2022 - 2023]
Résultat : On aura la table de multiplication par 6

IV.1.8. 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
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 :

Page 95 sur 161

Par CT. KANYINDA KAYEMBE Programmation Web
[2022 - 2023]
IV.1.9. 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.

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 :

L’appel de la fonction se fait de la manière suivante :

Exemple :

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 96 sur 161
Par CT. KANYINDA KAYEMBE Programmation Web
[2022 - 2023]
Exemple :

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 :

[Link] (fichier à inclure)

Page 97 sur 161

Par CT. KANYINDA KAYEMBE Programmation Web
[2022 - 2023]
 [Link]

IV.1.10. Tableaux

1. Tableaux 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 98 sur 161

Par CT. KANYINDA KAYEMBE Programmation Web
[2022 - 2023]
Exemple :

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 99 sur 161

Par CT. KANYINDA KAYEMBE Programmation Web
[2022 - 2023]
Exemple :

foreach() aussi bien énumérer le nom des variable que leur valeur.

Exemple :

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 :
Page 100 sur 161
Par CT. KANYINDA KAYEMBE Programmation Web
[2022 - 2023]
Exemple :

 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 101 sur 161

Par CT. KANYINDA KAYEMBE Programmation Web
[2022 - 2023]
  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 :

Exemple :

Page 102 sur 161

Par CT. KANYINDA KAYEMBE Programmation Web
[2022 - 2023]
IV.1.11. Accès aux fichiers.

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 :

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

Page 103 sur 161

Par CT. KANYINDA KAYEMBE Programmation Web
[2022 - 2023]
 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.

Exemple :

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 :

Page 104 sur 161

Par CT. KANYINDA KAYEMBE Programmation Web
[2022 - 2023]
L‘exemple suivant va permettre de lire dans un fichier texte ([Link])
ligne par ligne puis d‘afficher le résultat à l‘écran en mettant un
numéro à chaque ligne.

[Link]

Code source :

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 :

Page 105 sur 161

Par CT. KANYINDA KAYEMBE Programmation Web
[2022 - 2023]
Exemple :

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.

Syntaxe :

Remarque : la fonction file() ne nécessite pas l’usage de open() et

close().

Exemple :

Page 106 sur 161

Par CT. KANYINDA KAYEMBE Programmation Web
[2022 - 2023]
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 :

Exemple : le contenu de notre fichier au départ :

Le script pour écrire dans le fichier « [Link] »

Après l’exécution de ce script, on a comme résultat dans le fichier :

4. Fonctions diverses de traitement de fichier.

Page 107 sur 161

Par CT. KANYINDA KAYEMBE Programmation Web
[2022 - 2023]
 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.
IV.1.12. Passage et transmission de variables

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 :

 En GET les paramètres apparaissent associés à l‘url sous formes

de variables séparées par des &
([Link]

 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 :
Page 108 sur 161
Par CT. KANYINDA KAYEMBE Programmation Web
[2022 - 2023]
Exemple 1 :

Dans l‘exemple suivant le fichier [Link] contient le script

html permettant d‘afficher un formulaire et d‘envoyer les résultats de
la saisie à la page [Link] qui elle les affichera.

[Link]

[Link]

En exécutant à travers le serveur web le fichier [Link], en

remplissant le formulaire et en cliquant sur OK, nous sommes
emmenés vers la page [Link] qui nous affiche une phrase

Page 109 sur 161

Par CT. KANYINDA KAYEMBE Programmation Web
[2022 - 2023]
composée des champs saisis dans le formulaire. Les champs saisis sont
donc passé de [Link] vers [Link].
Exemple 2 :

L‘exemple précédent peut tenir dans un seul fichier qui s‘enverrait à lui-
même les paramètres
[Link]

Remarque :

La définition de la destination du formulaire(action="[Link]")

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 [Link].
Cela donnera donc :

à la place de

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 110 sur 161
Par CT. KANYINDA KAYEMBE Programmation Web
[2022 - 2023]
Exemple :

Dans l‘exemple suivant nous allons créer un fichier [Link]

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é. [Link]

[Link]

Page 111 sur 161

Par CT. KANYINDA KAYEMBE Programmation Web
[2022 - 2023]
En exécutant à travers le serveur web [Link], 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.

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 :

Page 112 sur 161

Par CT. KANYINDA KAYEMBE Programmation Web
[2022 - 2023]
Vous serez automatiquement redirectionné vers le site de Google.

Un autre exemple :

Vous serez automatiquement redirectionné vers la page [Link] de

votre répertoire web.

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é.

5. 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.
Page 113 sur 161
Par CT. KANYINDA KAYEMBE Programmation Web
[2022 - 2023]
Deux types de variables persistantes existent :

 Les variables persistantes côté client : les cookies

 Les variables persistantes côté serveur : la session

A. Les Cookies.

Les cookies sont un mécanisme d'enregistrement d'informations sur

le client, et de lecture de ces informations. Ce système 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 114 sur 161

Par CT. KANYINDA KAYEMBE Programmation Web
[2022 - 2023]
Lire un Cookie.

Syntaxe :

B. 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 :

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.

Page 115 sur 161

Par CT. KANYINDA KAYEMBE Programmation Web
[2022 - 2023]
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 :

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 :

Page 116 sur 161

Par CT. KANYINDA KAYEMBE Programmation Web
[2022 - 2023]
Exemple :

Résultat :

d) Suppression d’une variable de la session

Syntaxe :

Exemple :

Page 117 sur 161

Par CT. KANYINDA KAYEMBE Programmation Web
[2022 - 2023]
 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.

Syntaxe :

IV.2. Quelques notions sur MySQL

IV.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.

IV.2.2. Syntaxe MySQL

IV.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 :

Page 118 sur 161

Par CT. KANYINDA KAYEMBE Programmation Web
[2022 - 2023]
nom_de_la_base désigne le nom attribué à notre base de données.

 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 119 sur 161

Par CT. KANYINDA KAYEMBE Programmation Web
[2022 - 2023]
  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:

 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
Page 120 sur 161
Par CT. KANYINDA KAYEMBE Programmation Web
[2022 - 2023]
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 ;
 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 à

Page 121 sur 161

Par CT. KANYINDA KAYEMBE Programmation Web
[2022 - 2023]
 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 :

 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

Page 122 sur 161

Par CT. KANYINDA KAYEMBE Programmation Web
[2022 - 2023]
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.
 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
Page 123 sur 161
Par CT. KANYINDA KAYEMBE Programmation Web
[2022 - 2023]
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)
 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.
Page 124 sur 161
Par CT. KANYINDA KAYEMBE Programmation Web
[2022 - 2023]
Voici comme faire pour gérer les erreurs qui peuvent survenir :

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 :

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 ;
Page 125 sur 161
Par CT. KANYINDA KAYEMBE Programmation Web
[2022 - 2023]
 - Faire un clic gauche dessus ;
- Choisir le menu phpMyAdmin

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.

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.
Page 126 sur 161
Par CT. KANYINDA KAYEMBE Programmation Web
[2022 - 2023]
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 :

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.

Page 127 sur 161
Par CT. KANYINDA KAYEMBE Programmation Web
[2022 - 2023]
«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 [Link]) 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.
Pour notre cas, le fichier s’appelle [Link]. (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 [Link] :

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 128 sur 161

Par CT. KANYINDA KAYEMBE Programmation Web
[2022 - 2023]
Résultat dans le navigateur :

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
([Link] pour notre cas ici) :

Résultat dans le navigateur :

Page 129 sur 161

Par CT. KANYINDA KAYEMBE Programmation Web
[2022 - 2023]
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 :

Résultat :

Page 130 sur 161

Par CT. KANYINDA KAYEMBE Programmation Web
[2022 - 2023]
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 :

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

Page 131 sur 161

Par CT. KANYINDA KAYEMBE Programmation Web
[2022 - 2023]
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.
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

Page 132 sur 161

Par CT. KANYINDA KAYEMBE Programmation Web
[2022 - 2023]
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 :

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 133 sur 161

Par CT. KANYINDA KAYEMBE Programmation Web
[2022 - 2023]
  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
Finalement notre exemple résumé peut encore s’écrire à l’aide de
requête préparée avec le marqueur nominatif comme ceci :

Page 134 sur 161

Par CT. KANYINDA KAYEMBE Programmation Web
[2022 - 2023]
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 :
Exemple :

Page 135 sur 161

Par CT. KANYINDA KAYEMBE Programmation Web
[2022 - 2023]
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’.
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.

Page 136 sur 161

Par CT. KANYINDA KAYEMBE Programmation Web
[2022 - 2023]
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 :

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.

Page 137 sur 161

Par CT. KANYINDA KAYEMBE Programmation Web
[2022 - 2023]
Créons un fichier nommé [Link] pour pratique ceci et il faut
inclure le fichier de connexion à la base de données (rappelez-vous :
[Link]).
Voici l’intégralité de code d’insertion :

Insertion de données variables grâce à une requête préparée.

 Avec des marqueurs « ? »

 Avec des marqueurs nominatifs

Page 138 sur 161

Par CT. KANYINDA KAYEMBE Programmation Web
[2022 - 2023]
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 :

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 [Link] qui nous servira de comprendre
ceci :

Modification grâce aux requêtes préparées :

 Avec les marqueurs ?

Page 139 sur 161

Par CT. KANYINDA KAYEMBE Programmation Web
[2022 - 2023]
  Avec les marqueurs nominatifs

C.3.3. Suppression des données (DELETE)

Voici une dernière requête entendue (Delete).
Exemple :

Application en PHP

Page 140 sur 161

Par CT. KANYINDA KAYEMBE Programmation Web
[2022 - 2023]
Suppression avec les requêtes préparées :
 Avec les marqueurs ?

 Avec les marqueurs nominatifs

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é.
Page 141 sur 161
Par CT. KANYINDA KAYEMBE Programmation Web
[2022 - 2023]
 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 :

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 :
Page 142 sur 161
Par CT. KANYINDA KAYEMBE Programmation Web
[2022 - 2023]
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 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é [Link]
Il est de bonne habitude de donner l’extension .[Link] aux fichiers
contenant des classes pour bien les distinguer des autres fichiers dans
un projet. Après la création du fichier [Link], voici comment
on peut définir notre classe :

Page 143 sur 161

Par CT. KANYINDA KAYEMBE Programmation Web
[2022 - 2023]
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é.

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.
Page 144 sur 161
Par CT. KANYINDA KAYEMBE Programmation Web
[2022 - 2023]
 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 145 sur 161

Par CT. KANYINDA KAYEMBE Programmation Web
[2022 - 2023]
 Page 146 sur 161
Par CT. KANYINDA KAYEMBE Programmation Web
[2022 - 2023]
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 147 sur 161

Par CT. KANYINDA KAYEMBE Programmation Web
[2022 - 2023]
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 [Link] 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 148 sur 161

Par CT. KANYINDA KAYEMBE Programmation Web
[2022 - 2023]
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 [Link] dans lequel on va créer et utiliser un objet de type

Etudiant :

Page 149 sur 161

Par CT. KANYINDA KAYEMBE Programmation Web
[2022 - 2023]
On commence par inclure la définition de la classe Etudiant qui est
située dans le [Link]. 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 :

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 :
Page 150 sur 161
Par CT. KANYINDA KAYEMBE Programmation Web
[2022 - 2023]
  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 ».

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 [Link] 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 [Link] voilà pourquoi on
l’a fait.
Ainsi, on peut ajouter d’autres variables et fonctions propres à la classe
Superviseur comme ceci :

Page 151 sur 161

Par CT. KANYINDA KAYEMBE Programmation Web
[2022 - 2023]
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 naissance,
mais aussi de nouvelles propriétés, comme la fonction et
promotion
Page 152 sur 161
Par CT. KANYINDA KAYEMBE Programmation Web
[2022 - 2023]
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 [Link] 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 153 sur 161

Par CT. KANYINDA KAYEMBE Programmation Web
[2022 - 2023]
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.

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
Page 154 sur 161
Par CT. KANYINDA KAYEMBE Programmation Web
[2022 - 2023]
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 fonctionq 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 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 :

Page 155 sur 161

Par CT. KANYINDA KAYEMBE Programmation Web
[2022 - 2023]
 Modèle

Contrôleur
Contrôleur
<html>
echo
Architecture du MVC
Vue

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.

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 ;
Page 156 sur 161
Par CT. KANYINDA KAYEMBE Programmation Web
[2022 - 2023]
  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 :

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.

Page 157 sur 161

Par CT. KANYINDA KAYEMBE Programmation Web
[2022 - 2023]
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 [Link] qui représente la

page d’accueil de l’application :

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 [Link] dans vue/etudiant/ et y insère le

code suivant :

Page 158 sur 161

Par CT. KANYINDA KAYEMBE Programmation Web
[2022 - 2023]
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 159 sur 161

Par CT. KANYINDA KAYEMBE Programmation Web
[2022 - 2023]
 Page 160 sur 161
Par CT. KANYINDA KAYEMBE Programmation Web
[2022 - 2023]
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.

[5] S. Duchateau L’accessibilité Web Creative Commons 6. 2.0, 2013.

[6] D. Alex, jQuery, dynamisez vos page plus simplement Creative Commons
6. 2.0, 2013.

[7] Sainior, Découvrez la puissance de jQuery UI, Creative Commons 6. 2.0,

2013.

[8] Vincent1870, Adopter un style de programmation clair avec le modèle

MVC, Creative Commons 7. 2.0, 2011.

Page 161 sur 161

Par CT. KANYINDA KAYEMBE Programmation Web
[2022 - 2023]