Cours de Programmation Web

Cours de Programmation
web
L1 Info 2018 - 2019
Par J.D. BATUBENGA

Doctorant en Informatique
PLAN DU COURS
0.Les bases de la programmation web
0.1.L’internet
0.2.Le web et le site web
0.3.Le site web statique et le site web dynamique
0.4.Les différents types de sites
0.5.Les outils de développement web
0.6.Les composantes d’une application web
0.7.Les échanges de données dans une application web avec
formulaire
1.Les bases de HTML et CSS
1.1. Introduction à HTML
1.2. Structure d’un programme HTML 5
1.3. Eléments et attributs de HMTL 5
1.4. Les feuilles de style
1.5. Le formulaire
1.6. Exercices
BATUBENGA M. J.D. 2
PLAN DU COURS (Suite)
2. Créer un site web
2.1. Généralités
2.2. Structure d’une page web
2.3. Recommandations
2.4. Organisation du site et mise en ligne
3.Introduction au Javascript
3.1.Les scripts côté navigateur
3.2.Javascript dans les pages HTML
3.3.Les instructions de base
3.4.Exercices
4.Le langage PHP
4.1.Les bases du langage PHP
4.2.Configuration du PHP
4.3.Récupérer les paramètres envoyés par un client web
4.4.Gérer les bases de données MySQL
BATUBENGA M. J.D. 3
PLAN DU COURS (Suite)
5. Système de publication de contenu
5.1.Introduction
5.2.Avantages des logiciels de gestion de contenu
5.3.Fonctionnalités attendues pour les logiciels de gestion de
contenu
5.4.Quelques solutions existantes
6.Etude de cas
BATUBENGA M. J.D. 4
0. Les bases de la programmation web
0.1.L’Internet
L’Internet (Interconnected Network) comme réseau international de
communication entre ordinateurs est fait de nombreux réseaux
distincts et interconnectés appartenant à des organisations
commerciales, académiques et gouvernementales, ainsi que de
fournisseurs de services Internet (FSI).
Les services proposés sur Internet sont notamment le web qui en
est le mode le plus privilège d’accès, le courrier électronique
(courriel ou e-mail), les forums et salles de discussion, la vidéo
conférence, la faculté d’accéder à des ordinateurs distants et
d’envoyer ou recevoir des fichiers…
Le terme que les médias, en particulier, ont adopté, est celui
« d’autoroutes de l’information », pour désigner un réseau de
télécommunication numérique haut débit permettant de transmettre
beaucoup d’informations à la fois.
Par définition, l’Internet est une collection à l’échelle mondiale de
réseaux informatiques interconnectés pour échanger les données,
utilisant le protocole TCP/IP.
BATUBENGA M. J.D. 5
0.2.Le web et le site web
Le web ou « World Wide Web », d’où l’acronyme www, en français
« toile mondiale » est un système d’information multimédia utilisé
sur internet et basé sur la technologie de l’hypertexte (ou
hyperlien).
Un document Hypermédia est un document hypertexte avec la
différence que les liens peuvent référencer également des fichiers
son, images ou images animées (vidéo).
Inventé par Tim Berners-Lee, son principe repose sur l'utilisation
d'hyperliens pour naviguer entre des documents (appelés «pages
web») grâce à un navigateur.
Une page web est un document électronique contenant du texte, du
son, des images fixes ou animés, ainsi que des liens hypertextes
vers d’autres pages web.
Un site web (aussi appelé site internet ) est un ensemble de pages
web reliées par des hyperliens, stockées ou hébergées sur un
ordinateur connecté en permanence à Internet (serveur web).
Il est architecturé autour d'une page centrale, «page d'accueil»
BATUBENGA M. J.D. 6
Le dialogue entre un programme serveur et un programme client
s’effectue selon des règles précises constituant un protocole. Le
protocole du Web est HTTP, et le FTP d’échanger des fichiers.
La création d'un site web est un projet à part entière à 3 phases :
• La conception qui représente la formalisation de l'idée ;
• La réalisation qui correspond au développement du site web ;
• L’hébergement qui se rapporte à la mise en ligne du site, de
manière permanente.
0.3. Le site web statique et le site web dynamique
Une page web statique est représenté par un fichier texte ne
contenant que des codes HTML et CSS, avec éventuellement des
images animées, des éléments défilants et des liens vers d'autres
documents.
Un site web statique est constitué de pages web statiques.
Ce site fonctionne très bien, mais son contenu ne peut pas être
mis à jour automatiquement ; il faut que le webmaster modifie
manuellement le code source pour y ajouter des nouveautés.
BATUBENGA M. J.D. 7
Ce site est par ailleurs dans l’impossibilité de renvoyer une page
personnalisée selon le visiteur et de créer une page dynamiquement
selon les entrées d'une base de données etc.
Un site dynamique est alors constitué des pages dynamiques, c-à-d
des pages qui sont générées à la volée par des programmes. Et
leurs contenus peuvent changer sans l'intervention du webmaster.
Un site Internet est une entreprise coûteuse en termes de temps.
Les mises à jour régulières sont parfois difficiles à réaliser. Or, un
site qui n’évolue pas est condamné à disparaitre ou à voir sa
fréquentation diminuer. L’internaute aime le changement, et non un
site statique qui n’évolue guère. Les langages dynamiques facilitent
les opérations de mise à jour, permettent plus d’interactivité sur les
pages…
Par convention l'extension donnée à une page HTML est .htm ou
.html, mais une page web peut porter une autre extension :
.asp pour une page générée dynamiquement en ASP ;
.php, pour une page générée dynamiquement en PHP ;
etc.
BATUBENGA M. J.D. 8
0.4. Les différents types de Sites
a) Le site « carte de visite » : C’est un site qui ne regroupe que les
informations nécessaires pour entrer en contact avec vous et votre
entreprise.
b) Le site vitrine : C’est un site avec plusieurs pages pour exposer
votre entreprise sur le web : vos produits, vos services, vos
coordonnées et éventuellement un formulaire de prise de contact
ou de demande de devis.
c) Le site de e-commerce : Pour vendre des produits ou des
services en ligne, vous devez alors opter pour un site e-
commerce
d) Le site mobile : De plus en plus de connexions au web se font
depuis un téléphone mobile ou un smartphone. Il est important de
disposer d’un site web adapté aux petits écrans de ces appareils
mobiles.
Autres : application web, le site communautaire, le blog, …
BATUBENGA M. J.D. 9
0.5. Les outils de développement web
Certains outils pour faire du développement web sont :
• Serveur web : programme le plus important, chargé de délivrer des
pages web aux visiteurs. Ex : apache, Internet Information Server (IIS)
• Navigateur web : programme chargé d’afficher le contenu du fichier
enregistré sur le serveur après l’avoir interprété. Ex : Internet
Explorer, Firefox
• Les feuilles de style (CSS - Cascading StyleSheets) : ce sont des
documents avec des définitions des styles de chaque balise d'une
page web ou d'un site tout entier. HTML structure le contenu du
document, tandis que CSS formate un contenu structuré.
• Langages de scripts côté serveur : PHP, Perl, Java, …
• Langages de scripts côté navigateur : Javascript, VBScript, …
Dans le cadre de ce cours, nous allons aborder le langage de
structuration HTML, le langage de formatage CSS, le langage de
scripts côté navigateur Javascript et le langage de scripts côté serveur
PHP, associé à la base de données MySQL. (Logiciel = Wampserver).
BATUBENGA M. J.D. 10
0.6. Les composantes d’une application web
Le fonctionnement d’un site nécessite : Ordinateur serveur,
programme serveur en attente des requêtes, programme client qui
envoie les requêtes et attend les réponses.
Un autre type important d’interaction où le programme client
demande au programme serveur d’exécuter un programme, en
fonction de paramètres, et de lui transmettre le résultat.
0.7. Les échanges de données dans une application web avec
formulaire
I. Les Bases de HTML et CSS
I.1. Introduction à HTML
1.1.1. Définitions
Le HTML (HyperText Markup Language, en français langage de
balisage hypertexte) constitue le langage de base du Web. C’est un
langage de balisage (marquage ou de structuration) qui permet de
décrire la page Web élément par élément en se servant de balises
de description. Le code HTML est déchiffré par le navigateur du
client.
Les balises permettent d'indiquer la façon dont doit être présenté
le document et les liens qu'il établit avec d'autres documents.
HTML 5 que nous présentons ici est une recommandation du W3C
(www Consortium). Il s’agit d’une version de HTML respectant les
améliorations apportées par les nouvelles technologies permettant
de définir de nouvelles balises et desquelles sont exclues toutes
les imprécisions que l’on rencontre souvent dans les pages web.
J.D. BATUBENGA 14
1.1.2. Règles d’écriture de documents HTML5
Pour créer des documents en HTML 5, on commence par une
déclaration DOCTYPE HTML simplifié par rapport au XHTML :
Le doctype : <!DOCTYPE html>
Les autres règles à respecter sont :
La balise d’ouverture <html> doit se trouver avant tout autre
élément (mais après la déclaration doctype) ;
Les balises HTML 5 fonctionnent également par paire afin
d’agir sur les éléments qu’elles encadrent. La première est
appelée « balise d’ouverture » (ou ouvrante), et la seconde
précédée du caractère /, est la « balise de fermeture » (ou
fermante). La casse des balises n'est pas stricte.
<marqueur> votre texte formaté</marqueur>
Exemple : <b>Bonjour</b> et <B>Bonjour</b> ; permettent
de mettre « Bonjour » en gras ;
J.D. BATUBENGA 15
N.B. : L'omission de la balise fermante est possible lorsqu'il n'y
a pas de doutes sur sa position.
Toutes les balises impaires doivent se terminer par le
caractère /. Exemple <br/> ;
Il est possible d’ajouter des commentaires dans une page web
avec la balise : < !--commentaire-->.
Un attribut doit avoir un nom et une valeur (nom=valeur) et
présent dans une balise ouvrante pour définir des propriétés
supplémentaires de la balise. Les valeurs des attributs peuvent
ne pas être entre guillemets.
Ex : <font size=6>
1.1.3. Editeurs HTML
Un éditeur HTML (ou éditeur Web) est un logiciel conçu pour
faciliter la préparation et la modification de documents écrits
en HTML. Il existe deux catégories d'éditeurs :
J.D. BATUBENGA 16
• Les éditeurs de texte (Bloc-Notes, Notepad++, PSPad,
UltraEdit, jEdit, …) éditent directement en langage HTML : le
code y apparaît et y est traité comme du texte. Ils requièrent
une compétence dans ce langage et garantissent la qualité
du document produit.
• Les éditeurs WYSIWYG, What You See Is What You Get (Adobe
GoLive, Dreamweaver, Netlor, Mozilla Composer, …)
permettent d'éditer une page Web à peu près telle qu'elle
apparaît dans les navigateurs courants (mode création).
L'édition des images, des animations ou du son sont effectuées
avec les logiciels appropriés.
Les pages offrant des services en plus de simples informations
sont généralement générées à la demande par des logiciels
propres au site Web.
J.D. BATUBENGA 17
1.2. Structure d’un programme HTML 5
Au-delà de la déclaration du document, typiquement, un document HTML5 se
présente avec la structure minimale suivante :
<!DOCTYPE html>
<html>
<head>
<title>Titre de la page</title>
<meta charset="utf-8" />
</head>
<body>
Contenu de la page
</body>
</html>
La balise <head> contient aussi : les styles, les scripts, les métas. La
balise <body> contient le contenu de la page (textes, images, logos,
vidéos, hyperliens …) qui sera affiché dans l’espace de travail du
navigateur.
J.D. BATUBENGA 18
I.3. ELEMENTS ET ATTRIBUTS DE HTML5
1.3.1. Exemple (utilisation de la structure)

Créer une page web qui va afficher à l’écran « Mon
cours de programmation web;
Le langage HTML 5 » et dans la barre de titre « Ma
première page HTML5».
Procédé :
Ouvrir le bloc-notes ou note pad, taper le code et
enregistrer le document avec l’extension html (ou
htm). Par exemple Exemple1.html.
J.D. BATUBENGA 19
<!DOCTYPE html>
<html>
<head>
<title>Ma première page HTML 5</title>
<meta charset="utf-8" />
</head>
<body>
Mon cours de programmation web;
Le langage HTML 5
</body>
</html>
 Enregistrer le document avec l’extension html (ou htm). Par exemple
Exemple1.html
 Ouvrir le fichier enregistré par partir d’un navigateur web.
N.B. : Nous observons à l’affichage dans le navigateur, qu’il n’y a pas
de saut de ligne, car il faut la balise spéciale à cet effet.
J.D. BATUBENGA 20
1.3. 2. Styles de caractères et saut de ligne
Styles de caractère
Le tableau ci-dessous reprend des balises spécifiquement utilisées
pour définir les styles de caractères dans la présentation de ses
pages web :
Balise Description
<b> ou <strong> Mettre le texte en gras
<i> ou <em> Mettre le texte en italique
<u> Souligner le texte
<s> Définir un texte barré
<marquee> Définir un texte défilant
<sup> Définir un texte en exposant
<sub> Définir un texte en indice
<font> Définir les attributs des caractères d’un
texte
J.D. BATUBENGA 21
Saut de ligne
Pour obtenir un saut de ligne, ajouter à la fin la balise <br/>.
Exercice 1: Créons une pages web : page1 dont :
- Le contenu de la barre de titre : Cours de programmation
- Le contenu de la page :
Orientations :
Programmation procédurale
Programmation orientée objet
Programmation web
Exercice 2: Créons ensuite une pages web : page2 dont :
- Le contenu de la barre de titre : Programmation web
- Le contenu de la page :
Plan du cours :
Technologies web
XHTML : un vocabulaire XML pour le web
Créer un site
Utilisation d’un outil de conception.
Page d’accueil
J.D. BATUBENGA 22
Balise <hr>
Insère une ligne horizontale après un élément
Balise <marquee>
Elle peut être définie avec l’attribut direction qui détermine le sens
de défilement d’un texte. Ce sens est par défaut est left (gauche).
Cet attribut reçoit les valeurs : right (droite), down (bas), up (haut)
…
Exemple : Faire défiler le titre Orientations de l’exercice précédent
vers la droite : <marquee direction=“right”>
Autres attributs :
- behavior qui détermine le comportement de l’élément. Il reçoit
les valeurs : alternate, slide et scroll.
- loop qui détermine le nombre de défilements qui par défaut est
infini.
- Width qui fixe la largeur de l’élément (zone réservée au
défilement)
- Height qui fixe la hauteur de l’élément.
J.D. BATUBENGA 23
1.3. 3. Hyperliens
L’internaute explore un document web en cliquant sur des
zones actives (caractère, mot, groupe de mots, image) faisant
ainsi apparaitre de nouveaux documents.
Les liens permettent de naviguer (faire la liaison) entre les
pages web. On réalise des hypermots ou des hyperimages.
Il y a 3 types de liens :
Les liens internes à un site.
Les liens internes à une page (ou ancre).
Les liens externes.
La structure d’un lien est définie comme suit :
<a href="xxx"> Lien</a>
Cette balise peut disposer les attributs suivants : Target (cadre
de destination, valeurs : _self, _blank , _parent, _top et cadre) ;
Title qui affiche dans une info bulle le titre qui survolera le lien
avec le pointeur de la souris.
J.D. BATUBENGA 24
Liens internes à un site
On suppose que la page vers laquelle est faite le lien se trouve
dans le même répertoire que la page web en cours :
<a href="page2.html">Lien vers la page 2</a>
Sinon, on précise le chemin d’accès:
<a href="sous_repertoire/page2.html">Lien vers une
page2</a>; sous répertoire
<a href="../repertoire/page2.html">Lien vers une page2</a>;
autre répertoire.
N.B. : Il est également possible d’utiliser une image à la place
du texte.
Ex : dans les pages de l’exercice précédent, insérer des liens
hypertextes sur les textes : « programmation web » qui pointe
vers page2 et « page d’accueil » qui pointe vers page1.
J.D. BATUBENGA 25
Liens internes à une page
1. On marque d'abord la cible avec une ancre en utilisant la
balise <a> et l'attribut name. Syntaxe :
<a name="Ancre1"> Texte qui sera ciblé</a>
Le conteneur <a name="Ancre1">Texte qui sera ciblé</a> est
placé à l'endroit que l'on veut atteindre.
2. On réalise le lien vers cette cible en marquant un texte ou
une image avec la balise <a> et l'attribut href. Syntaxe :
<a href="#Ancre1"> Texte de l'hyper lien vers une ancre</a>
N.B. : L’attribut name est associé à l’ancre d’arrivée du lien
interne et href à l’ancre de départ vers un lien interne.
J.D. BATUBENGA 26
Les liens externes :
<a href="http ://url">Lien vers un site externe</a>
Ex : <a href="http://www.ascitech.cd/index.html">Ascitech</a>
N.B. :
- Le lien peut pointer vers d’autres services : FTP et MAILTO.
- Pour créer un lien pour faire télécharger un fichier, il suffit de
faire un lien simple tout en utilisant l’extension du fichier à
télécharger. Par exemple, télécharger le fichier projet.zip :
<a href="projet.zip">Télécharger</a>
Adresser un message électronique
Ecrire un mail à un correspondant:
<a href="MAILTO:adresse_correspondant? Subject=Objet_du_
message">ancre </a>
Ecrire un mail à plusieurs correspondants :
<a href="MAILTO:adresse1?cc=adresse2 &bcc=adresse3
&Subject=Info"> ancre </a>
J.D. BATUBENGA 27
1.3. 4. La gestion des images, sons et vidéos
La balise <img …/> permet d'insérer une image dans une page
HTML. Les seuls formats d'images acceptés par W3C sont : jpeg
(.jpg), png et gif. Ces images peuvent être animées.
Les principaux attributs :
src : Indique l'emplacement de l'image
align : Spécifie l'alignement de l'image par rapport au texte
adjacent (left, right, top, middle et bottom)
alt : Affiche un texte alternatif lorsque l'image ne s'affiche pas.
title : Affiche une infobulle au survol de l'image par le curseur.
border : Largeur de la bordure de l’image (exprimée en pixels).
width : Permet de spécifier la largeur de l'image.
height : Permet de spécifier la hauteur de l'image.
Exemple : <img src="junior.jpg" alt="Photo junior" title="Junior
à 2 ans"/>
J.D. BATUBENGA 28
La basile embed définit un conteneur pour l'affichage de
contenus interactifs (animations flash, fichier audio ou vidéo,
documents pdf, ...). Certains formats ne sont pas pris en charge.
Ses principaux attributs sont :
src : (obligatoire) Indique l'emplacement du fichier.
Width : Largeur de l'élément affiché.
Height : Hauteur de l'élément affiché.
autostart : Spécifie si l’élément va se lancer automatiquement à
l’affichage de la page web ou pas.
Exemple : Placer les fichiers « carl.mp3 » et « Dan.3gp » dans le
même dossier que la page, puis insérer ces balises dans le code
HTML.
<embed src="carl.mp3" autostart=false>
<embed src= "Dan.3gp" autostart=True>
J.D. BATUBENGA 29
Les balises audio et video permettent d’intégrer respectivement
un fichier son ou un flux audio (mp3, ogg) et un fichier ou un
flux vidéo dans la page web en proposant un lecteur intégré
avec des contrôles génériques (lecture, pause et contrôle du
volume).
Leurs principaux attributs sont :
src : Indique l'emplacement du fichier qui sera lu (obligatoire).
autoplay : Indique que le fichier doit être lu automatiquement
lorsqu'il est chargé.
Controls : Affiche le lecteur et ses contrôles visuels.
Loop : Indique au lecteur de lire l’élément en boucle.
Exemple : <audio src="carlito.mp3"></audio>
N.B. : Certains navigateurs ne supportent pas la balise <audio>.
Il est souvent nécessaire que ceux-ci soient munis de plug-ins
spécialisés que le visiteur du site doit avoir installés au
préalable, faute de quoi ils ne seront pas visibles ou audibles.
J.D. BATUBENGA 30
1.3. 5. La mise en page
Alignement du texte
La balise <p> …</p> permet de définir un paragraphe. Sa
balise ouvrante fait passer à la ligne et en sauter une. Son
attribut align détermine l’alignement du texte : left pour texte
aligné à gauche (valeur par défaut), center pour texte centré,
right pour texte aligné à droite et justify pour texte justifié.
Exemple : Saisir un long texte, ensuite l’arranger en terme de
paragraphes.
Pour centrer un texte, on peut également utiliser :
<center>Texte à centrer</center>
Ceci est valablement remplacé par les feuilles de style CSS, de
même que les balises <font> et <basefont> qui permettaient de
définir les attributs des caractères d’un texte ou de la page
entière.
J.D. BATUBENGA 31
La balise <blockquote>… </blockquote> permet de mettre en
retrait à droite un paragraphe (bloc de citation). Son attribut cite
fait référence à l’adresse de cette source.
Exemple :
<p> Le Psalmiste a dit : </p>
<blockquote cite = "Psaume 23 : 1">
<p lang="fr" > L’Eternel est mon berger, je ne manquerai de
rien</p>
</blockquote>
Le fonds d’écran
Pour définir une couleur de fond de la fenêtre d’une page
HTML5, on utilise l’attribut bgcolor :
<body bgcolor="nom_de_la_couleur" ou "code_RVB">
J.D. BATUBENGA 32
Avec le codage RVB, les couleurs sont définies par 3 nombres
hexadécimaux représentant les tons de Rouge, de Vert et de
Bleu de la couleur choisie. Ainsi, la syntaxe de codage d'une
couleur est "#RRVVBB". Et la couleur peut prendre une des
valeurs suivant le tableau ci-après :
Couleur Code RVB Couleur Code RVB Couleur Code RVB
Black violet #EE82EE orange
#000000 #FFA500
blue #0000FF gray #808080 beige #F5F5DC
green #008000 navy #000080 Cyan ou #00FFFF
aqua
red #FF0000 purple #800080 maroon #800000
yellow #9ACD32 white #FFFFFF Magenta ou #FF00FF

fuchsia
lime #00FF00 olive #808000 sylver #C0C0C0
J.D. BATUBENGA 33
Exemples : <body bgcolor="#FFFFFF"> et <body
bgcolor=« yellow"> permettent d’obtenir une page HTML sur un
fond respectivement blanc et jaune, alors que par défaut, le fond
est gris.
L’attribut background permet pour sa part de spécifier une
image résidant sur le serveur. Ceci augmente généralement le
temps de chargement de la page vers le navigateur.
<body background ="nom_de_l’image">
Exemple : <body background="Toucan.jpg">
N.B. : Il est possible de contrôler la couleur du texte standard
(sauf lien) à l’aide de l’attribut text de la balise <body>. Le
codage se faisant de la même manière que pour l’attribut color.
Exemple : <body text="#0000FF">, le texte sera de couleur
bleue.
J.D. BATUBENGA 34
1.3. 6. Les listes et titres
Listes
Pour présenter une certaine arborescence dans un sommaire par
exemple, il est souvent pratique d'utiliser une liste. Ces listes
seront numérotées automatiquement ou pas.
La balise <ul>…</ul> avec l’attribut "type" prenant les valeurs
(disc, circle, square) permet de créer une liste à puces (non
ordonnée). Chaque élément de la liste est placé dans <li>…
</li>.
Et la balise <ol>…</ol> avec l’attribut "type" prenant les
valeurs (1, 2, … ou a, b, …ou A, B, … ou i, ii, … ou I, II, …)
permet de créer une liste numérotée (ordonnée avec des chiffres
ou des lettres). Chaque élément de la liste est placé dans <li>…
</li>. Et l’attribut start détermine la valeur du début de la liste.
J.D. BATUBENGA 35
N.B. : Par défaut, la balise <ul>…</ul> donne le disque plein et
la balise <ol>…</ol> la numérotation avec les chiffres.
Exemples :
a. soit le module :
<body>
<b>Plan du cours :</b>
<ul type="disc">
<li> Technologies web</li>
<li> HTML5 : un vocabulaire XML pour le web </li>
<li> Créer un site</li>
<li> Utilisation d’un outil de conception</li>
</ul>
</body>
b. Refaire le même exercice, en utilisant une liste ordonnée avec
les chiffres romains en minuscules.
J.D. BATUBENGA 36
N.B. : On peut construire des listes imbriquées. Cfr l’exemple
suivant :
<body>
<b><u>Horaire</u></b>
<ol type="I">
<li>Lundi à Vendredi</li>
<ol type="a">
<li>Avant-midi</li>
<ul> <li>8h à 10h</li> <li>10h à 12h</li> </ul>
<li>Après-midi</li>
<ul> <li>13h à 15h</li> </ul>
</ol>
<li>Samedi</li>
<ul> <li>8h à 10h</li> <li>10h à 12h</li> </ul>
</ol>
</body>
J.D. BATUBENGA 37
Nota : Il est possible de remplacer la balise li d'une liste non
ordonnée par une image afin de personnaliser la liste et de lui
donner un style plus coloré (puces personnalisés). Il ne faut pas
oublier d'ajouter une balise de saut de ligne br.
Exercice : Refaire l’exemple a. en personnalisant la liste avec des
images en lieu et place des disques.
Titres
Les titres permettent d’organiser le contenu en rubriques et en
sous-rubriques, à votre convenance.
Le navigateur affiche le titre en gras et en grand, suivant chaque
niveau : h1, h2, …, h6.
Exercice : Proposer un code qui affiche les six premiers mois de
l’année comme des titres de niveau : h1, h2, …, h6.
<h1>Janvier</h1> …
J.D. BATUBENGA 38
1.3. 7. Page d’accueil
Après création des plusieurs pages web qui constituent votre
site, il faut définir la page d’accueil, celle qui s’affichera
automatiquement quand le visiteur tape sur l’url de votre site.
Pour que cela fonctionne, vous devez indiquer au serveur quelle
est la page d’accueil en donnant à celle-ci un nom spécifique. La
plupart du temps, elle devra s’appeler index.html. Consultez la
documentation fournie par votre hébergeur pour savoir si le
nom est différent dans votre cas.
J.D. BATUBENGA 39
1.3. 8. Les tableaux
Les tableaux permettent de dresser des listes de données en
lignes et en colonnes. Ils sont définis comme étant des suites de
lignes et sont parfois utilisés pour faire de la mise en page, que
l’on effectue plus efficacement avec le CSS.
Un tableau doit respecter les quelques règles suivantes :
• Le tableau est encadré par les balises <table> et </table>.
• Son titre par <caption> </caption>
• Chaque ligne par <tr> </tr> (Table Row : ligne du tableau).
• Les cellules d'en-tête par <th> </th> (pour Table Header :
En-tête de tableau)
• Les cellules des valeurs par <td> </td> (Table Data: Donnée
de tableau).
Les cellules peuvent contenir du texte, des listes, des images,
des liens hypertextes, des formulaires ou leurs éléments.
J.D. BATUBENGA 40
Les attributs nécessaires sont :
Pour la balise <table>, les attributs : border (taille de la
bordure), cellpadding (marge entre le contenu des cellules et la
bordure), cellspacing (espacement entre les cellules), float (right
et left, position du texte qui suivra </table>), cols (nombre de
colonnes), width (largeur du tableau), bgcolor (couleur de fond
de toutes les cellules du tableau) et background (image de fond).
Pour la balise <caption>, l’attribut align détermine la position
du titre (top, middle, et bottom).
Pour les balises <th>, <tr> et <td> attributs : align (center, left,
right et justify), valign (top, middle et bottom : pour l’alignement
vertical des données), bgcolor (couleur de fond d’une cellule) et
background (image de fond).
Colspan pour définir une cellule dont la largeur est un multiple
de la colonne de base et rowspan pour définir une cellule dont la
hauteur est un multiple de la ligne de base.
J.D. BATUBENGA 41
Voici un exemple de tableau HTML5 :
<table border="1">
<caption>Horaire des cours</caption>
<tr>
<th> </th>
<th> Lundi </th>
<th> Mardi </th>
<th> Mercredi </th>
<th> Jeudi </th>
<th> Vendredi </th>
<th> Samedi </th>
</tr>
<tr>
<th> 8h à 10h </th>
<td> Math1 </td>
<td> Info1 </td>
<td> Basic </td>
<td> Stat1 </td>
<td> (X)HTML </td>
<td> Info1 </td>
</tr>
J.D. BATUBENGA 42
<tr>
<th> 10h à 12h </th>
<td> Math1 </td>
<td> Info1 </td>
<td> Basic </td>
<td> Stat1 </td>
<td> (X)HTML </td>
<td> Info1 </td>
</tr>
<tr>
<th> 13h à 15h </th>
<td> Math1 </td>
<td> Info1 </td>
<td> Basic </td>
<td> Stat1 </td>
<td> (X)HTML </td>
<td> Info1 </td>
</tr>
</table>
J.D. BATUBENGA 43
Exercice d’application
Proposez le code HTML5 qui permet d’obtenir une page web
avec le tableau suivant :
Statistiques des quelques animaux en RDC

Okapi Rhinocéros Zèbre Hippopotame Total
2008 15745 5645 25642 2654 49686
2009 15634 5612 25712 2421 49379
2010 14475 5475 25755 2122 47827
Total général 146892
J.D. BATUBENGA 44
I.4. LES FEUILLES DE STYLE
1.4.1. Principe et types de style
Une feuille de style ou CSS (Cascading Style Sheet) est un
document au format texte qui définit comment une page HTML
doit être affichée.
Le principe des feuilles de style consiste à regrouper dans un
même document des caractéristiques de mise en forme
associées à des groupes d'éléments que vous allez appeler pour
les appliquer.
En fait, le navigateur web parcourt le document HTML, lorsqu’il
rencontre une balise, il demande à la CSS de quelle manière il
doit l’afficher.
Les feuilles de style permettent notamment :
• d'obtenir une présentation homogène sur tout un site en
faisant appel sur toutes les pages à une même définition de
style ;
• de permettre le changement de l'aspect d'un site complet
entier par la seule modification de quelques lignes ;
J.D. BATUBENGA 45
• une plus grande lisibilité du code, car les styles sont définis à
part ;
• des chargements de page plus rapides, pour les mêmes
raisons que précédemment ;
• un positionnement plus rigoureux des éléments.
Les styles peuvent être incorporés au sein du document HTML
suivant ces trois manières :
• Style en ligne, c'est-à-dire en tant qu'attribut des balises
• Style du document : déclaré dans l'en-tête, c'est-à-dire au
sein des balises <head> et </head>
• Style externe, déclaré dans un fichier à part dont l'extension
est .css
J.D. BATUBENGA 46
Style en ligne
Il est défini au sein même d'une balise d'un document
(déclaration en ligne).
Il suffit de renseigner l'attribut style de la balise HTML à laquelle
on souhaite appliquer un style particulier :
<balise style="propriété:valeur;"> ... </balise>
Exemple :
<h1 style="font-family: Verdana; font-weight:bold; color: red;">
Génie Informatique</h1>.
Qui définit que le texte « Génie Informatique » est un titre de
niveau 1 avec une police de caractères Verdana, en gras et de
couleur rouge.
J.D. BATUBENGA 47
Style du document
Les styles d'une page web sont déclarées grâce à la balise style,
au sein des balises <head> et </head>:
<style type="text/css">
Définition des styles;
</style>
L'attribut type="text/css" permet de spécifier le type de feuille
de style utilisée.
La définition a pour syntaxe :
sélecteur {propriété : valeur ; propriété : valeur ; …}
La définition des styles peut se faire de manières suivantes :
• Appliquer un style à toutes les balises.
• Appliquer un style à une balise.
• Appliquer un style à plusieurs balises.
• Appliquer un style à certaines balises.
J.D. BATUBENGA 48
Appliquer un style à toutes les balises.
On utilise le sélecteur universel « * ». Le code CSS qui se trouve
entre accolades sera appliqué à toutes les balises.
Exemple (centrer le texte de toute la page) :
*{
text-align: center;
}
Appliquer un style à une balise.
Dans ce cas, le sélecteur est le nom de la balise.
Exemple (on veut centrer les titres <h1>) :
h1 {
text-align: center;
}
Appliquer un style à plusieurs balises.
Dans ce cas, on sépare les noms des balises par des virgules.
J.D. BATUBENGA 49
Exemple : Définissons un style à appliquer aux liens hypertextes
et aux paragraphes :
a, p {
font-family : verdana, arial, sans-serif ;
font-size: 18px;
font-style: bold;
color: yellow;
}
</style>
N.B. : Le style de police à appliquer est soit le verdana ou soit
l’arial. Si le système ne trouve aucune de deux, il utilise une
police sans-serif (générique) disponible sur l’ordinateur.
- Plusieurs propriétés de styles peuvent être utilisées suivant
le besoin (Cfr. Syllabus).
J.D. BATUBENGA 50
Appliquer un style à certaines balises.
id : un identifiant unique
Pour changer l’apparence d’un seul paragraphe en particulier,
c'est-à-dire identifier un paragraphe précis en CSS, il faut
donner un nom à la balise qui nous intéresse en utilisant
l’attribut id que l’on peut appliquer à presque toutes les balises.
Exemple :
<p id="texte">L’université est un lieu d’excellence.</p>
Le paragraphe suivant est identifié, sous le nom « texte ». Le
fichier CSS peut alors avoir le code suivant :
#texte {
text-align: center;
}
Le symbole dièse (#) permet d’indiquer que l’on parle d’une
balise ayant un nom précis.
J.D. BATUBENGA 51
class : un identifiant réutilisable
Cet attribut est utilisable sur la plupart de balises. Son
fonctionnement est pratiquement le même que celui d’id, à la
différence près qu’on peut donner le même nom à autant de
balises que l’on veut.
Exemple (donnons un même nom au titre <h1> et au premier
paragraphe) :
<h1 class="maclasse">L’intellectualisation !</h1>
<h2>Présentation</h2>
<p class="maclasse"> L’université est un lieu d’excellence.</p>
Cette fois, on utilise un point à la place du dièse :
.maclasse
{
text-align : center;
color :red ;
}
J.D. BATUBENGA 52
N.B. : Il est possible de donner deux classes (ou plus) à une
même balise. Il suffit pour cela de séparer les noms des classes
par un espace dans le code HTML5 :
<p class="maclasse autreclasse">
Exemple :
Voici un exemple de document complet avec style du document.
<html>
<head> <title>Exemple d'utilisation de la balise style</title>
.texte-en-forme{
font-family:verdana, arial, sans-serif ;
font-size:12px;
color:blue; }
#paragraphe-id{
font-weight:bold;
color:green; }
</style>
</head>
J.D. BATUBENGA 53
<body>
<p class="texte-en-forme">Texte du paragraphe utilisant
l'attribut "class"</p>
<p id="paragraphe-id">Texte du paragraphe utilisant l'attribut
"id" : paragraphe-id</p>
</body>
</html>
N.B. : Il est possible de donner deux classes (ou plus) à une
même balise. Il suffit pour cela de séparer les noms des classes
par un espace dans le code HTML5 :
<p class="maclasse autreclasse">
Style externe
Intérêt : limiter le travail, au lieu de copier le code CSS dans
chaque page, vous le copiez dans un fichier à part et, dans
chaque page HTML, qui doit l’utiliser, vous faites un lien vers ce
fichier.
J.D. BATUBENGA 54
Il s'agit dans un premier temps de créer un fichier texte
contenant les feuilles de style et dont l'extension est .css :

Et dans un second temps de créer dans chaque page HTML, dans
head, le raccourci vers cette page de définition de style :
<link rel="stylesheet" media="screen" type="text/css"
href="style.css">
J.D. BATUBENGA 55
Avec :
L'attribut rel="stylesheet" précise que le document en question
est une feuille de style externe.
L’attribut screen précise le type d’affichage prévu. Si c’est
l’écran comme bien souvent, il reçoit la valeur screen.
L'attribut type="text/css" précise le type de feuille de style.
L'attribut href=" URL " donne l'URL de la feuille de style., c'est-à-
dire son emplacement sur le serveur ou sur Internet.
La notion d’héritage en CSS
L’héritage signifie que tout élément HTML enfant va hériter des
styles de ses parents (si un élément A est inclus dans un
élément B, l’élément A s’appellera enfant de l’élément parent B).
C’est cet héritage qui renvoie au cascading.
Par exemple, les éléments tr et td sont enfants de l’élément
table. Ainsi, lorsqu’on applique un style à l’élément table, les
éléments tr et td héritent automatiquement de ce style.
J.D. BATUBENGA 56
Lorsque l’on applique deux styles différents à un élément parent
et à son enfant en CSS, c’est le style appliqué à l’élément enfant
est celui qui lui sera affecté.
La liste des propriétés de style est donnée dans le syllabus du
cours.
1.4.2. Les balises div et span
Les éléments div et span servent de containers (comme cadres).
On s’en sert (quand on n’a pas d’autre choix) pour entourer des
blocs de code et ainsi pouvoir attribuer des styles particuliers à
ces blocs.
La balise <div> qui est vouée à regrouper les éléments ayant
des propriétés communes, peut inclure toutes les balises html
(telles que les paragraphes, les tableaux, les listes, les
images ..., et également d'autres divisions).
Exemple : Liste des provinces de la R.D.C avec une barre de
défilement en utilisant la balise div de hauteur fixe.
J.D. BATUBENGA 57
<div style="width:300px; height:120px; overflow:auto;
border:solid 1px black;">
<ul>
<li>Bandundu</li>
<li>Bas-congo</li>
<li>Equateur</li>
<li>Kasai Occindental</li>
<li>Kasai Oriental</li>
<li>Katanga</li>
<li>Kinshasa</li>
<li>Maniema</li>
<li>Nord-Kivu</li>
<li>Province Orientale
<li>Sud-Kivu</li>
</ul>
</div>
J.D. BATUBENGA 58
La balise span (élément de type inline) est une balise
structurante au même titre que la balise div. Elle affiche son
contenu sans appliquer de modification (affichage "inline")
contrairement à la balise div (élément de type block) qui occupe
toute la largeur disponible et effectue un retour à la ligne avant
et après son contenu (affichage "block").
La balise span s'emploie fréquemment au sein de phrases pour
encadrer et mettre en valeurs des lettres, mots ou groupes de
mots.
En HTML, tout élément est soit de type block, soit de type inline.
Les éléments de type block : p, table, ol, ul, dl, h1, …, h6 et les
éléments de type inline : a, img, i, b, mark.
Exemple d’utilisation de span.
J.D. BATUBENGA 59
Contenu précédent la balise span.
<span style="color:red;">Texte inclus dans la balise
span</span>
Contenu suivant la balise span.
<p></p>
Contenu précédent la balise span.
<span style="color:red; display:block;">Texte inclus dans la
balise span avec retour à la ligne avant et après</span>
Contenu suivant la balise span.
<span style="display:block; text-align:center; border:solid 1px
black; padding:10px; background-color:lightsteelblue; font-
weight:bold; letter-spacing:4px; font-size:16px;">
Texte encadré
</span>
J.D. BATUBENGA 60
1.4.3. Les éléments structurants
Les balises <header>, <nav>, <footer>, <section>, <article>
et <aside> redéfinissent les mises en forme historiques des
pages web avec des éléments <div> suivant une nouvelle
approche sémantique :
La balise <header> est utilisée pour décrire l'en tête d'un document ou
d'une section et est censée contenir les titres (<h1> à <h6>), groupes
de titres (balise <hgroup>) ou encore les tables des matières.
La balise <nav> détermine une section où sont regroupés des liens de
navigation vers d'autres pages. Elle correspond idéalement au menu
principal d'un site.
J.D. BATUBENGA 61
La balise <footer> est utilisée pour décrire le pied de page d'un
document ou d'une section et est censée contenir des
informations relatives au contenu qui le précède.
La balise <section> définit une section générique regroupant les
éléments d'un même thème au sein d'un document.
La balise <article> définit une section de la page indépendante
relative au traitement d'un sujet spécifique comme un nouveau
billet dans un blog. Cette balise peut s'accompagner d'une
section d'en-tête, d'un pied de page, de différentes sections et
peut être associée à la balise <aside> permettant de délivrer des
informations annexes ou de la publicité.
Exemple 1 du cours (à essayer)
J.D. BATUBENGA 62
I.5. LES FORMULAIRES
Les formulaires permettent aux auteurs de pages Web de doter
leur page web d'éléments interactifs permettant un dialogue
avec leurs visiteurs.
Tout échange entre visiteur et serveur passe par un formulaire,
dans lequel l’utilisateur peut saisir textes ou mots de passe,
opérer des choix grâce à des boutons radio, des cases à cocher
ou des listes de sélection, voire envoyer ses propres fichiers
depuis le poste client.
L’internaute saisit des informations en remplissant des champs
ou en cliquant sur des boutons, puis appuie sur un bouton de
soumission (submit) pour les envoyer.
La balise <form> … </form> délimite le formulaire et permet
de regrouper plusieurs éléments (boutons, zones de saisie,...) de
celui-ci. Elle possède les attributs obligatoires suivants :
method (post ou get) qui indique sous quelle forme seront
envoyées les réponses.
action qui indique l'adresse d'envoi (script ou email).
J.D. BATUBENGA 63
Ex: <form method=post action="mailto:mbukanga@yahoo.fr">
La balise input permet de créer des boutons radio, des cases à
cocher, … sa syntaxe est :
<input type="valeur" value="valeur par défaut" name="nom_élt">
Attribut Valeur Résultat Effet visuel
type effectue l'action prévue dans la
submit
balise <form>
text Une ligne de texte dont la longueur
est donnée par l'attribut size
reset Initialise le formulaire
radio bouton radio
checkbox case à cocher
name Nom
size Taille du texte
Autres valeurs : password, date, file, image (bouton personnalisé), …
J.D. BATUBENGA 64
La balise textarea permet de définir une zone de saisie plus
vaste et la balise select permet de créer une liste déroulante
d'éléments :
Balise Attribut Résultat Effet visuel
<textarea>
name
…
rows Zone de saisie
</textarea>
cols
<select> name Choix 1
<option> ...
</option> multiple plusieurs choix
Choix 1
</select> possibles
N.B. : On peut grouper les options des listes déroulantes sous un

dénominateur commun grâce à la balise optgroup et son attribut label.
J.D. BATUBENGA 65
La balise label permet d’afficher un libellé qui permet d’indiquer
au visiteur ce que contient ou doit contenir une zone de texte,
une case à cocher, une liste déroulante, …). Sa syntaxe est :
<label for="identifiant">libellé</label>
L’attribut for doit avoir pour valeur l’id du champ auquel il doit
être lié.
Exemple :
<form method="post" action="traitement.php">
<p>
<label for="pseudo">Entrez votre pseudonyme :</label>
<input type="text" name="pseudo" id="pseudo"
value="Défaut" /></p>
</form>
La balise fieldset sert à organiser le formulaire en différentes
rubriques. Cela peut être utile si celui-ci devient long. Vous
pouvez ensuite donner une légende à chaque rubrique grâce à la
balise legend.
J.D. BATUBENGA 66
Un exemple d’un formulaire
Avec mise en page un formulaire à l'aide de la balise fieldset :
<form method="get" action="tkafunda@yahoo.fr">
<center>Enregistrement d'un utilisateur</center>
<fieldset>
<legend>Identité</legend>
<label for="nom">Nom</label>
<input type=text name="nom" id="nom"/>
<label for="prenom">Prénom</label>
<input type=text name="prenom" id="prenom"/>
<p>Sexe : <input type=radio name="sexe" value="M"
id="homme"/>
<label for="homme">Homme</label>
<input type=radio name="sexe" value="F" id="femme"/>
<label for="femme">Femme</label>
</p>
</fieldset>
J.D. BATUBENGA 67
<fieldset><legend>Autres informations</legend><p>
<label for="fonctiom">Fonction:</label>
<select name="fonction" id="fonction">
<option value="enseignant">Enseignant</option>
<option value="etudiant">Etudiant</option>
<option value="ingenieur">Ingénieur</option>
<option value="retraite">Retraité</option>
<option value="autre">Autre</option>
</select></p><p>
<label for="comment">Commentaires :</label>
<textarea name="commentaires" id="comment">Tapez ici vos
commentaires</textarea></p>
<input type="submit" value="Envoyer">
<input type="reset" value="Annuler">
</fieldset>
</form>
Travail dirigé : page 67
J.D. BATUBENGA 68
II. Créer un site
II.1. Généralités
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 l’entreprise ou de
l'organisation et de procurer un sentiment de confiance à l'utilisateur.
(compromis : graphisme admirable et navigation modérée)
Comme un architecte, le webmaster construit le site en fonction de
l’usage auquel il le destine.
Pistes à méditer pour mettre en place le site :
• Qu’est-ce qui est le plus important ? Est-ce visible et facile
d’accès ?
• Comment le rendre encore plus facile d’accès ?
• La navigation est-elle intuitive ? Les noms de liens sont-ils
explicites et faciles à trouver ?
• Quelle taille de texte et couleur utilisés, pour que la lecture soit
facile ?
• Quelle taille donner aux images ?
J.D. BATUBENGA 69
II. Créer un site
II.2. Structure d’une page
La structure traditionnelle d'une page web est la suivante :
Il est essentiel de distinguer dans la structure ce qui relève

d'éléments invariables, identiques (généralement le logo, la zone de
bannière et le pied de page) sur toutes les pages, ou bien variables
d'une page à l'autre.
J.D. BATUBENGA 70
II. Créer un site
II.3. Recommandations
Charte graphique (document synthétique récapitulant les règles de
présentation des éléments graphiques d'un site web, traduisant son
identité visuelle ) : le menu doit occupé la même position sur toutes
les pages, les liens, le logo dans le même ordre, pas de grand
changement dans les couleurs.
Dimension des pages : souhaitable de ne pas dépasser trois à cinq
hauteurs d'écran → fatigue, lenteur chargement, horizontal (garantir
un affichage optimal pour la majeure partie des visiteurs, en %)
Position des informations : l'information située en haut de page aura
plus de chances d'être lue.
Choix des couleurs : utiliser pas plus de 3 couleurs différentes afin de
respecter le critère de sobriété. Le choix devra correspondre, le cas
échéant, aux couleurs de l'organisation et exprimer une ambiance
particulière. Les couleurs possèdent une symbolique implicite (Cfr.
Tableau cours). Ainsi, Il est donc important de les choisir en
connaissance de cause.
J.D. BATUBENGA 71
II. Créer un site
Choix des images : Elles agrémentent le site, mais leur abus peut
gêner le confort visuel, ainsi que le chargement des pages.
Couleur d'arrière-plan (mal choisi il peut gêner la lisibilité et arrière-
plan graphique → amateurisme)
Typographie : contre-indiqué d'utiliser plus de deux polices sur un
site web et recommandé de police classique (Arial, Verdana, Helvetica,
etc.
Symboles graphiques : utiliser seulement les pictogrammes reconnus
internationalement : loupe, drapeau, …
Importance du contenu : contenu intéressant car les visiteurs
reviennent généralement sur un site pour son contenu
Qualification de l'information : donne aux visiteurs une idée sur le
contenu. Notamment, titre, nom de l’auteur, date de la dernière
modification, …
Validation et compatibilité entre navigateurs : tester votre code avec
différents navigateurs et différentes versions et vérifier la validité de
votre code. Ex : http://validator.w3.org
J.D. BATUBENGA 72
II. Créer un site
II.4. Organisation du site et mise en ligne
Dossier du travail
Un site se compose des plusieurs pages web, des fichiers à
télécharger, des photos, des images, etc qui nécessitent une bonne
organisation. Il est conseillé de placer les pages HTML à la racine du
site, les autres éléments dans des dossiers correspondants.
Donner au fichier un nom avec max 8 caractères qui ait un sens et
éventuellement sans espace, ou de caractères accentués pour éviter
tout désagrément.
Travailler localement
Faites vos essais sur votre ordinateur que sur le serveur, pour
travailler plus rapidement, le modifier, l’enregistrer sur l’ordinateur et
enfin en renvoyer une copie sur le serveur.
Mettre en ligne
Pour que vos pages web soient disponibles aux visiteurs, vous devez
télécharger (upload) sur un serveur relié en permanence à Internet
tous les éléments constitutifs de votre site (pages web, photos,
images, sons, vidéos, dossiers…).
J.D. BATUBENGA 73
II. Créer un site
Le FTP (File Transfert Protocole) ou protocole de transfert de fichier
permet justement de faire cela.
Votre hébergeur doit vous communiquer les coordonnées d’accès au
FTP :
• Une adresse du genre ftp.texte1_texte2
• Un mot de passe
• Et un identifiant
Techniquement il est possible d'héberger son site Internet soi-même à
condition de posséder un débit en sens montant suffisamment
important.
Afin de rendre un service de qualité aux visiteurs, il est conseillé de
recourir aux services d'un hébergeur (société proposant l'hébergement
du site internet sur des serveurs spécialisés connectés en permanence
à internet à très haut débit).
On distingue généralement deux types d'hébergement : gratuit et
professionnel.
J.D. BATUBENGA 74
II. Créer un site
Pour l’hébergement gratuit, les fournisseurs d'accès à internet
proposent généralement un espace de stockage assez limité et exigent
un coin pour leurs publicités. D'autre part la disponibilité du site web
n'est pas garantie.
Parmi ces hébergeurs nous trouvons : Mavehosting (très bonne qualité
et prix abordable), Planethoster, Ovh et tant d’autres.
Une fois que vous avez créé votre superbe site conforme à HTML5 et
CSS, il reste encore une phase des plus importantes à accomplir, à
savoir le faire connaître. Le moyen le plus simple, et généralement
gratuit, est de le référencer dans les annuaires et moteurs de
recherche les plus connus comme Google ou Yahoo afin qu’il soit bien
placé en réponse à la recherche d’un internaute.
J.D. BATUBENGA 75
III. Introduction au Javascript
III.1. Les scripts côté navigateur
Les simples pages HTML (avec ou sans objets) ne fournissent pas des
solutions aux besoins d'interactivité et de dynamisme des sites.
Au-delà du contenu HTML et des plug-ins, le serveur web renvoie
également la page au client, y compris le code côté client qui y est
inséré. C’est le navigateur web qui les interprète.
La programmation côté client est utilisée essentiellement dans le cas de
validation de formulaires (champs obligatoires, petits calculs,...) et dans
la création de petites animations (menus déroulants, ...).
Un script est une portion de code qui vient s'insérer dans une page
HTML.
Les langages de script côté client ne sont pas compilés, ils sont
interprétés par le navigateur web du visiteur, et leur syntaxe est moins
stricte que celle des langages de développeurs .
Quelques langages de script côté client : Javascript, Jscript, Vbscript,
Perlscript…
III.2. Javascript dans les pages HTML
Le langage JavaScript est un langage événementiel, car la plupart de
ses scripts sont associés à des événements qui peuvent se produire
sur le navigateur tel que le chargement de la page, le clic, la
sélection, la frappe au clavier… JavaScript est généralement utilisé
pour contrôler les formulaires avant envoi au lieu d’attribuer ce
travail à un langage coté serveur tel que le PHP.
Pour insérer le code javascript dans les pages HTML, on utilise la
balise script. Syntaxe :
<script language=”javascript”> // Début du script JavaScript
</script> // Fin du script JavaScript
Il y a plusieurs façons d'inclure du JavaScript dans une page HTML :
- Grâce à la balise <script>
- En mettant le code dans un fichier
- Grâce aux événements
III.2. Javascript dans les pages HTML (suite)
Grâce à la balise script
On insère le code javascript dans la page web là où on le désire. On
place généralement le maximum d'éléments du script dans la balise
d'en-tête (les balises <head> et </head>). Syntaxe :
<script language="Javascript">
Le code de votre script
</script>
Dans un fichier externe
Pour mettre les codes de JavaScript en annexe dans un fichier, on
insère le code suivant:
<script language=Javascript src="url/fichier.js"></script>
Où url/fichier.js correspond au chemin d'accès au fichier
III.2. Javascript dans les pages HTML (suite 2)
Grâce aux événements
Le code dans le cas du résultat d'un événement s'écrit:
<balise eventHandler="code Javascript à insérer">
où eventHandler représente le nom de l'événement.
Exemple : Soit le code suivant qui permet l’affichage de la date et
l’heure courantes du système.
<html>
<head><title>Date du jour</title></head>
<body>
<center>
<h1>Une page JavaScript générée dynamiquement</h1><hr/>
<h2><script language="JavaScript">
document.write("Bonjour, il est :<br/><br/>");
maintenant = new Date();
III.2. Javascript dans les pages HTML (suite 3)
document.write(maintenant);
mois=maintenant.getMonth()+1;
document.write("<p>"+mois+"e mois");
</script></h2>
<h3>A chaque fois que vous rechargez la page, l'heure
change</h3>
</body>
</html>
La fonction new Date retourne la date courante du système, tandis
que la fonction write permet d’obtenir l’affichage dans le document
ou page web.
III.3. Objets et leur hiérarchie
JavaScript repose sur les notions d’objets et de méthodes. Les objets
sont classés hiérarchiquement .
Considérons l’exemple en HTML suivant :
<html>
<head></head>
<body>
<form name=‘’mon_form’’>
<input type=‘’text’’ name=‘’mon_text’’>
</form>
</body>
</html>
Avec JavaScript, on ne peut pas accéder directement à la valeur du
champ texte nommé « mon_text », car comme on peut le voir, on a la
hiérarchie suivante : window.document.mon_form.mon_text
N.B. : L’objet « window » pouvant être omis.
III.4. Quelques instructions de base
Les fonctions d’entrée et de sortie
• La fonction alert est une méthode de l’objet window qui effectue
une sortie d’expression à travers une boîte de message. Syntaxe :
Alert (expression) ;
Où expression peut être un nombre, une chaîne de caractères ou
une variable.
• La fonction prompt est une autre méthode de l’objet window qui
affiche une boîte d’entrée de données avec un texte dessus.
Rep=Prompt ("texte de la boite d'entrée") ;
Où Rep est la variable qui reçoit la donnée saisie en entrée.
On peut également proposer une valeur d’entrée par défaut :
Rep=Prompt ("texte de la boite d'entrée", "valeur par défaut") ;
N.B. : Le texte de la boite d'entrée ne doit pas dépasser 45 caractères
sous Netscape et 38 sous Explorer 3.0.
III.4. Quelques instructions de base (suite)
Exemple 1: Soit ce code qui affiche la date courante du système à
travers une boîte de dialogue, et demande à l’utilisateur d’entrer son
nom avant de l’afficher.
<html>
<head><title>Exemple Boîtes de dialogue</title></head>
<body >
<h1>Utilisation des boîtes "alert et prompt" </h1><hr/>
date=new Date();
mois=date.getMonth()+1
alert("Nous sommes le "+ date.getDate()+" - "+ mois +" - "+
date.getYear());
rep=prompt('Tapez votre nom')
alert("Votre nom est : "+rep)
</script></body>
</html>
Nota : toute fois les boîtes de dialogues sont à éviter dans les pages
web, car elles les rendent lourdes.
Exemple 2: Gestionnaire d'évènement onclick.
<html><head>
<script language="javascript">
function afficher(form2) {
var testin =document. form2.input.value;
document.form2.output.value=testin
}
</script>
</head><body>
<form name="form2"> Zone de texte d'entrée :
<input type="text" name="input" value=""><br>
<input type="button" name="bouton" value="afficher"
onclick="afficher(form2)"><br> Zone de texte de sortie :
<input type="text" name="output" value="">
</form>
</body>
</html>
• La méthode confirm affiche une boite de dialogue de confirmation
qui donne la possibilité de choisir entre ‘OK’ ou ‘Annuler’. Syntaxe :
Rep=confirm ("texte de la boite d'entrée") ;
Javascript dispose d’une minuterie qui permet de déclencher une
fonction après un laps de temps déterminé. Syntaxe :
nom_du_compteur = setTimeout("fonction_appelée()", temps en
milliseconde)
Les Opérateurs
On distingue plusieurs types d'opérateurs :
- Opérateurs de calcul : +, -, *, / et = (affectation);
- Opérateurs d'assignation : - =, * = et / =;
- Opérateurs d'incrémentation : ++ et –
Ex : x++ au lieu de x=x+1 ou bien x+=1
- Opérateurs de comparaison : ==, <, <=, >, >= et =!;
- Opérateurs logiques: || (ou) , && (et) et ! (non).
I. Introduction au Javascript
1.4. Quelques instructions de base
Les structures conditionnelles
L'instruction if ... else
Sa syntaxe est:
if (condition) {
liste d'instructions si vrai
}
else {
liste d'instructions si faux
}
Sa version simplifiée est :
(condition) ? instruction si vrai : instruction si faux
On peut avoir également sa forme simple :
if (condition ) {
une ou plusieurs instructions;
}
Exemple 3 :
<html><head><title>Saisie d'age</title></head>
<body><h1>Utilisation de la structure if then </h1><hr/>
var age = prompt("Entrer votre age");
if ( age <= 0 || age > 150)
alert("Age non valide saisir à nouveau");
else
alert("vous avez saisi "+parseInt(age) + " votre age est valide");
</script></body>
</html>
L'instruction switch
Sa syntaxe est : switch(valtest)
{ case 1 : instruction; break;
case 2 : instruction; break;
…
};
Exemple 4 : Entrée par formulaire : choix dans un listbox
<html>
<head><title>Faire un choix</title>
<script language="JavaScript">
function Preferer(x)
{ switch(x)
{ case 1 : alert('Votre choix : '+'classique');break;
case 2 : alert('Votre choix : '+'jazz'); break;
case 3 : alert('Votre choix : '+'rock'); break;
case 4 : alert('Votre choix : '+'pop'); break;
};
};
</script>
</head>
<body>
<form name="musique">
choisissez : <select name="choix"
onChange="Preferer(document.musique.choix.selectedIndex)">
<option value = "choix">
<option value = "classique">classique
<option value = "jazz">jazz
<option value = "rock">rock
<option value = "pop ">pop
</select>
</form>
</body>
</html>
Les boucles
La boucle for
Sa syntaxe est :
for (val init du cpteur; condition; progression du cpteur) {
liste d'instructions
}
Exemple :
for (i=1; i<6; i++) {
Alert(i);
}
L'instruction while
Sa syntaxe est :
while (condition) {
}
Arrêt inconditionnel
L'instruction break permet d'interrompre prématurément une boucle
for ou while .
Exemple :
compt=1;
while (compt<15) {
if (compt == 4)
break;
document.write ("ligne : " + compt + "<br>");
compt++;
}
document.write("fin de la boucle");
Saut inconditionnel
L’instruction continue fait sauter à la boucle une ou plusieurs valeurs
sans pour autant mettre fin à celle-ci.
La fonction
C’est un sous-programme qui permet d'effectuer un ensemble
d'instructions par simple appel de celui-ci dans le corps du
programme principal.
La déclaration d'une fonction se fait grâce au mot-clé function selon
la syntaxe :
function Nom_De_La_Fonction(argument1, argument2, ...) {
}
Appel de fonction en vue de l’exécuter, il suffit d’écrire son nom (en
respectant la casse) suivi des parenthèses (éventuellement avec des
arguments) :
Nom_De_La_Fonction();
Remarque:
Les arguments définis dans la déclaration de la fonction doivent être
inclus lors de l'appel (même nombre d'arguments séparés par des
virgules). Toute fonction doit être déclarée avant d’être appelée.
Exemple 5 : Grâce au gestionnaire d'évènement onLoad (à placer
dans la balise body), il est possible d'exécuter une fonction au
chargement de la page.
<html>
<head>
function Chargement() {
alert('Bienvenue sur le site');
}
</script>
</head>
<body onLoad="Chargement();" >
Javascript qui ne sert absolument à rien si ce n'est déranger vos
visiteurs...
</body>
</html>
Les paramètres d’une fonction
Lorsque vous passez plusieurs paramètres à une fonction, on les
sépare par des virgules, dans la déclaration et dans l'appel.
Exemple 6: Une page web qui affiche une boîte de dialogue avec un
texte différent selon le lien sur lequel on appuie.
<html>
<head>
function Affiche1() {
alert('Clique sur Texte 1');
}
function Affiche2() {
alert('Clique sur Texte2');
}
</script>
</head>
<body onLoad="Chargement();" >
<a href="javascript:;" onClick="Affiche1();">Texte1</a><br/>
<a href="javascript:;" onClick="Affiche2();">Texte2</a>
</body>
</html>
Méthode plus "confortable" :
<html>
<head><script language="Javascript">
function Affiche(Texte) {
alert(Texte);
}
</script>
</head><body onLoad="Chargement();" >
<a href="javascript:;" onClick="Affiche('Clique sur
Texte1');">Texte1</a>
<a href="javascript:;" onClick="Affiche('Clique sur
Texte2');">Texte2</a>
</body>
</html>
L’emploi de this
Lorsque vous faîtes appel à une fonction à partir d'un objet, le mot-
clé this fait référence à l'objet en cours et vous évite d'avoir à définir
l'objet en tapant window.objet1.objet2... il suffit de taper
nom_de_la_fonction(this) pour pouvoir manipuler cet objet à partir de
la fonction, et this.propriété pour manipuler les propriétés de l'objet.
this est aussi utilisé pour créer une ou plusieurs propriétés d'un
objet.
Exemple : créer un objet livre avec les propriétés auteur, éditeur et
prix.
function livre(auteur, editeur, prix) {
this.auteur = auteur;
this.editeur = editeur;
this. prix = prix;
}
Exemple 7: Test de validité des données d’un formulaire avant leur
envoie.
<html>
<head><title>Formulaire web</title>
function effacer(){
document.frmpersonne.txtNom.value="";
document.frmpersonne.txtAge.value="";
}
function valeur(){
with (document.frmpersonne){
champs=/^\s*(\d+)\s*$/.exec(txtAge.value);
if (champs == null){
alert('Age incorrect');
txtAge.focus();
return;
}
txtAge.value=champs[1];
submit();
}
}
</script>
</head
<body><center>
<h1>Un formulaire Web</h1>
<h2>Récupération des valeurs des champs par un script Javascript côté
navigateur</h2>
<hr>
<form name="frmpersonne" method="post">
<br>
<table>
<tr><td>Nom</td>
<td><input type="text" value="" name="txtNom"></td>
</tr><tr><td>Age</td>
<td><input type="text" value="" name="txtAge"></td>
</tr><tr></tr>
<tr><td colspan=2><input type="submit" value="Envoyer" name="Envoyer"
onclick="valeur();"></td>
<td><input type="button" value="Effacer" name="Effacer"
onclick="effacer();"></td>
</tr>
</table></form>
</body>
</html>
1.5. Exercices
1. Proposer une page web avec comme texte phare « Formulaire
d’inscription » suivi d’un formulaire avec étiquettes et zones de
texte permettant de recevoir : le nom, sexe et âge ; ensuite deux
boutons, l’un d’envoi et l’autre d’initialisation. Prévoir un
programme exigeant que l’âge soit supérieur à 15 et le sexe « M
ou F » pour que l’envoi soit validé.
2. Proposer une page qui permet la lecture de quatre valeurs puis
calcule et affiche leur moyenne.
3. Concevoir une page web qui propose un questionnaire à choix
multiple (QCM), avec 5 questions dont chacune dispose de quatre
assertions, et d’un bouton « Voir le résultat obtenu » qui après un
click dessus renvoie la côte obtenue par l’internaute. (On a que
chaque question compte sur 4 points et le total est alors sur 20
points). Prévoir que l’internaute a un maximum de 10 min pour
répondre au questionnaire.
II. Programmation web en PHP
2.1. Introduction
PHP (officiellement: Hypertext Preprocessor, et au départ Personal
Home Page) est un langage de scripts généraliste, spécialement conçu
pour le développement d'applications web (pages dynamiques).
Comme particularités :
• Il s’intègre facilement au HTML.
• Il s'exécute sur le serveur et permet l'accès facile aux nombreuses
bases de données (dBase, Ingres, mSQL, Oracle, MySQL, …).
• Il est un produit "Open Source" (le code est accessible à tout
développeur) et est gratuit.
Le traitement côté serveur par PHP apporte comme intérêts :
• Réduction du temps de téléchargement car le client ne reçoit qu'une
simple page HTML ;
• Absence de problème de compatibilité des navigateurs ;
• Offre au client des données qui sont dans une base ;
• Et le code ne peut être vu par le client.
0
2.1. Introduction (Suite)
PHP permet de créer des sites Web à des coûts très réduits.
PHP est principalement conçu pour servir de langage de script coté
serveur peut collecter des données de formulaire, générer du contenu
dynamique, ou gérer des cookies; et il peut en plus :
• Ecrire des scripts PHP et l'exécuter en ligne de commande, sans
l'aide du serveur web et d'un navigateur. Il vous suffit de disposer de
l'exécutable PHP ;
• Ecrire des applications clientes graphiques.
Pour l’édition des codes en PHP, on utilise soit des éditeurs simples
comme Note pad ou Bloc notes, ou encore des outils spécialisés
comme PHPEdit et PHPEclipse, puis l’enregistrement se fait avec
l’extension php, php3, php4…
1
2.2. Installation et Configuration du PHP
L'installation d'un serveur de développement exige du matériel :
• Un serveur Apache ;
• Un certain nombre de bibliothèques PHP ;
• Une base de données MySQL …
Les kits d'installation EasyPHP et Wampserver contiennent l'ensemble
des outils nécessaires au développement de pages PHP. Ils s'installent
très facilement sur un ordinateur fonctionnant sous Windows.
(Faire en pratique l’installation d’EasyPHP ou du wampserver).
2
2.3. Les bases du langage PHP
PHP ressemble aux langages C, C++ et Javascript, à savoir :
• ; est obligatoire à la fin de chaque ligne d’instructions ;
• {…} pour encadrer un bloc d’instructions ;
• les opérateurs de comparaison et d’affectation sont les mêmes (&&,
||, ==, …) ;
• les symboles des commentaires sont // et /* … */
• il est sensible à la casse (ex. la variable $NBRE, $nbre et $Nbre ne
sont pas les mêmes).
Les entrées / sorties
Les entrées (saisies de données ) sont être réalisées à travers des
formulaires.
Les sorties (éditions) des résultats vont s'inscrire dans la page par les
fonctions suivantes : echo, print et printf.
3
echo est la fonction d’affichage la plus utilisée en PHP.
Exemple : echo ‘‘Bonjour’’ // Affiche Bonjour
Pour afficher un guillemet dans un texte, il faut le faire précéder par
un backslash (soit \’’).
print() qui est équivalent à echo.
Exemple : print(‘‘Bonjour \‘‘Bruna \’’’’) // Affiche Bonjour ‘‘Bruna’’
printf() qui donne un affichage formaté comme en C.
Exemple : printf(‘‘Junior %s’’, ‘‘Jude’’) // Affiche Junior Jude
Intégration des scripts PHP dans une page HTML
Les pages web dynamiques générées avec PHP sont au format php
(index.php par exemple). Le code source php est directement inséré
dans le fichier HTML grâce aux balises suivantes :
• <?php …?>(balise standard)
• <? …?> (balise concise)
4
• <script language=‘’PHP’’> … </script> (balise de script)
Exemple d’une page nommée index.php:
<!doctype>
<html>
<head>
<title>Notre première instruction : echo</title>
</head>
<body>
<h2>Affichage de texte avec PHP</h2>
<p> Cette ligne a été écrite entièrement en (x)HTML.<br />
<?php echo("Celle-ci a été écrite entièrement en PHP.<br>");
Printf("MUAMBA NZAMBI %s","Junior Jude");
?>
</p>
</body>
</html>
5
Les variables
Le typage des variables est implicite. Il est même possible d’affecter à
une variable des valeurs de types différents dans le même script.
Les identificateurs de variables sont précédées par le symbole « $ ».
Exemple:
$nom=‘‘MUJINGA’’; //la valeur est délimitée par des guillemets
//(simples ou doubles)
$c=$a+$b;
Les variables peuvent être de type entier (integer), réel (double),
chaîne de caractères (string), tableau (array), booléen (boolean).
settype($var, ’’type’’) : convertit la variable d’un type à un autre.
Exemple:
$str = ’’12’’; // $str vaut la chaîne ‘’12’’
$nbr = (int)$str; // $nbr vaut le nombre 12
6
Les constantes PHP ne sont pas préfixées et sont déclarées ainsi :
define(‘‘id_constante’’,‘‘valeur’’); ou define(id_constante, ‘‘valeur’’);
Exemple : define(‘‘nom’’, ‘‘UNIKIN’’); // la constante nom vaut la
valeur UNIKIN
N.B. : Les constantes ne sont définie qu’une seule fois dans le script
(leurs valeurs restent inchangées et leurs identificateurs ne sont pas
sensibles à la casse, contrairement aux variables).
Les opérateurs
Les opérateurs arithmétiques sont :+ (addition), - (soustraction), *
(multiplié), /(divisé), %(modulo), ++ (incrément) et --(décrément).
Les opérateurs d’assignement := (affectation), *= ($x*=$y équivalent
à $x=$x*$y), de même pour /=, +=, -=, %=
Les opérateurs logiques : and, && (et), or, || (ou), xor (ou exclusif) et !
(non)
7
Et les opérateurs de comparaison :== (égalité), < (inférieur strict), <=
(inférieur large), >, >= et != (différence)
La concaténation de chaînes
L’opérateur de concaténation de chaînes est « . », et se présente sous
2 formes :
Exemple 1 :
$var1 = ‘’Bonjour’’;
$var2 = ‘’ à tous’’;
echo $var1.$var2; // imprime Bonjour à tous
Exemple 2 :
$var = ‘Ca va bien’;
$var.= ‘’ monsieur’’
echo $var; // affiche Ca va bien monsieur
8
Les structures de contrôle
La syntaxe est la même que celle en langage C.
Structure conditionnelle si … alors … [sinon …]
if( condition1 )
{
traitement 1
}
elseif(condition 2-1)
{
traitement 2-1
}
else
{
traitement 2-2
}
9
Sélection de cas (branchement multiple)
switch( paramètre_index )
{
case valeur 1 : { traitement 1 } break;
case valeur 2 : { traitement 2 } break;
…
default : { traitement par défaut }
}
Structure de boucle en nombre défini
for($i=$n ; $i<$m ; $i++ )
{
traitement
}
Où le compteur $i reçoit sa valeur initiale $n, $i<$m est la condition
de sortie avec $m la limite à ne pas dépasser ; $i++ est l’expression
de progression du compteur.
0
Structure de boucle en nombre non défini
- Tant que … (la condition est testée à l’entrée de la boucle)
while( condition )
{
traitement
}
- Faire … Tant que … (la condition est testée à la sortie de la boucle)
do
{
traitement
}
while( condition )
N.B. : L’instruction break permet de quitter prématurément une
boucle. Et L’instruction continue permet de passer à l’occurrence
suivante d’une boucle.
1
Exemple 1 :
while($nbr < 10) {
echo $nbr.’’<br>’’;
if($nbr == 5)
break;
$nbr++;
}
Exemple 2 :
for($i=1; $i<=10; $i++) {
if($i==5)
continue;
echo $i;
}
La valeur 5 ne sera pas affichée.
2
Les tableaux
La fonction array() crée des tableaux dynamiques et temporaires qui ne
restent générés que le temps du déroulement du script.
Les tableaux array servent aussi à stoker les données provenant d’une
base de données en attendant le traitement.
Pour initialiser un tableau on utilise plusieurs méthodes:
Méthode 1: (classique)
$tableau= array($val1,$val2,$val3,…);
Exemple:
$tab=array(‘’URKim’’,2013,’Kinshasa’);
dans ce cas $tab[0]=‘’URKim’’, $tab[1]=2013 et $tab[2]=‘Kinshasa’
Méthode 2: (initialisation directe)
$tableau[0]=$val0;
$tableau[1]=$val1;
$tableau[10]=$val10; …
3
Parcours d’un tableau
On peut utiliser une boucle tant que :
$i=0;
while($i <= count($tab)) // la fonction count() retourne le nombre
d’éléments
{
echo $tab[$i].’’<br>’’;
$i++;
}
On peut aussi utiliser la boucle foreach :
foreach($tableau as $element)
{
traitement;
}
La variable $element prend pour valeurs successives tous les éléments
du tableau $tableau.
4
Quelques fonctions manipulant les tableaux
count(), sizeof() : retournent le nombre d’éléments du tableau ;
in_array($var,$tab) : dit si la valeur de $var existe dans le tableau $tab ;
sort($tab) : trie alphanumérique les éléments du tableau ;
reset($tab) : place le pointeur sur le premier élément ;
current($tab) : retourne la valeur de l’élément courant ;
next($tab) : place le pointeur sur l’élément suivant ;
prev($tab) : place le pointeur sur l’élément précédent ;
Exemple :
$colors = array(‘’red’’, ’’green’’, ’’blue’’);
$nbr = count($colors);
reset($colors);
for($i=1; $i<=$nbr; $i++) {
echo current($colors).’’<br>’’;
next($colors);
}
5
Les fonctions
Les fonctions sont des sous-programmes qui regroupent un ensemble
d'instructions réutilisables simplement et qui accomplissent un
ensemble d'opérations par appel dans les corps de programmes
principaux.
Une fonction renvoie principalement une (et une seule) valeur issue
d'un calcul à l’aide de l’instruction return, et spécialement en PHP, elle
peut être formulée comme une procédure.
La syntaxe est :
function ma_fonction($argument1, $argument2,…)
{
Liste des instructions;
Return ($valeur_de_retour);
}
N.B. : l’instruction return est omise en cas de sa formulation comme
procédure.
6
Ex 1 : Fonction qui calcule le prix total taxe comprise d’un produit.
Function PT_taxe_comprise ($Ptht) {
$Pttc=0.16 * $PTHT;
return $Pttc; // ou return ($Pttc);
}
Ex 2 : Fonction qui calcule le prix total hors taxe d'un produit.
Function PT_hors_taxe ($Pu, $Qte) {
$Ptht= $Pu*$Qte;
return $Ptht;
}
Ex 3 : Fonction définie comme procédure qui affiche des prix totaux.
function affichage_prix ($s_nom_article, $Ptht, $Pttc) {
echo ("<b><u> $s_nom_article </u></b><br/>");
echo (" Le prix total hors taxe est : " . $Ptht ." Fc <br/>");
echo ("Le prix total taxe comprise est : <font color=red> " . $Pttc .
"Fc</font>");
}
7
2.4. Récupérer les paramètres envoyés par un client web
Dans une page Html, l'interactivité entre l'internaute et le serveur se
fait par l'intermédiaire des formulaires.
Associé aux formulaires, Php facilite le remplissage des listes de choix
et la récupération des valeurs d’un formulaire dans la même ou dans
une autre page.
Exemple de remplissage d’une liste de choix
<html>
<head><title>Définition d’une liste de choix</title>
</head>
<body>
<table><tr><td valign="top">Liste de choix </td><td>
<select name="lst_valeur" size=4>
<?
// création d'un tableau à 2 dimensions (nom et value)
$nom = array( array("Brunette", "B"), array ("Redodine", "R"),
array ("Junior", "JJ"), array ("Espé", "E"));
8
$nb = count($nom); // compte le nombre d'éléments
// création des 4 options
sort ($nom);
for ($i = 0 ; $i < $nb ; $i++)
{ echo "<option value ='" .
$nom[$i][1] . "'>" . // affectation de la "value"
$nom[$i][0] . // affichage du nom dans la liste
"</option>";
}
?>
</select>
</td></tr>
</table>
</body>
</html>
9
Exemple de récupération des valeurs d’un formulaire dans la même
page
Pour récupérer un champ de formulaire HTML appelé par exemple
« nom », on utilise la variable $_POST["nom"] s'il est envoyé par la
méthode POST et la variable $_GET["champ"] s’il est envoyé par la
méthode GET.
Cas d’utilisation de la méthode Get :
<html>
<head><title>Formulaire web</title></head>
<body>
<center><h3>Un formulaire Web Méthode Get </h3>
<h4>Récupération des valeurs des champs d'un formulaire</h4><hr>
<form name="frmPersonne" method="get">
<table>
<tr><td>Nom</td><td>
0
<input type="text" value="<?php echo $nom ?>"
name="txtNom" size="20"></td><td>Age</td>
<td><input type="text" value="<?php echo $age ?>" name="txtAge"
size="3"></td></tr>
</table>
<input type="submit" name="cmdUtiliser" value="Envoyer">
</form>
</center><hr>
<h4>Valeurs récupérées</h4>
<table border="1"><tr>
<td width=30>Nom</td><td width=80><?php echo $_GET["txtNom"]
?></td></tr><tr>
<td width=30>Age</td><td width=80><?php echo $_GET["txtAge"] ?
></td></tr>
</table>
</body>
</html>
1
Exemple de récupération des valeurs d’un formulaire dans une autre
page
Considérons le code HTML suivant qui après envoi est traité par le
fichier reponse.php
<html>
<head><title>Centre Informatique Infonet</title></head>
<body><center>
<form name="Inscription" Method="post" Action="reponse.php">
Enregistrement d'un candidat
<table border=0><tr><td>Nom</td>
<td><input type="text" name="nom" size="20"
tabindex="1"></td></tr>
<tr><td>Sexe</td>
<td>Homme : <input type=“radio” name="sexe" value="M" checked>
<br/>Femme : <input type=“radio” name="sexe" value="F“>
</td></tr><tr><td>Cochez les Cours que vous comptez suivre :
</td></tr><tr><td></td>
2
<td><input type="checkbox" name="choix1" value="ok"> Word<br/>
<input type="checkbox" name="choix2" value="ok"> Excel<br/>
<input type="checkbox" name="choix3" value="ok"> Access</td>
</tr><tr></tr><tr><td>Niveau d'études :</td>
<td><select name="fonction">
<option value="primaire">Primaire</option>
<option value="D6">Diplome d'état</option>
<option value="G3">Graduat</option>
<option value="L2">Licence</option>
<option value="D">DEA ou Thèse</option>
</select></td></tr><tr><td>Joindre un fichier :</td><td>
<input type="file" name="mon_fichier"></td></tr><tr>
<td align=center><input type="submit" value="Envoyer« ></td>
<td align=center><input type="reset" value="Rétablir"></td>
</tr></table></form></center>
</body>
</html>
3
Le code correspondant au fichier reponse qui affiche simplement les
données envoyées est :
<html>
<head><title>Formulaire de saisie</title></head>
<body><p><b>Résultats du formulaire</b></p>
<?
echo "zone de texte nom : $nom <br>" ;
echo "bouton radio sexe : $sexe <br>" ;
echo "case à cocher word : $word <br>" ;
echo "case à cocher excel : $excel <br>" ;
echo "case à cocher access : $access <br>" ;
echo "liste de choix études : $etudes <br>" ;
echo "fichier : $mon_fichier <br>" ;
echo "bt_submit : $cmdenvoyer <br>" ;
echo "bt_reset : $cmdretablir <br>" ;
?>
</body>
</html>
4
2.5. Gérer les bases de données MySQL
PHPMyAdmin
PHPMyAdmin est une application PHP qui va vous permettre de gérer
vos bases de données. Vous allez pouvoir créer des bases, des tables,
etc... sans vous préoccuper du langage SQL qu'il faut écrire.
Dans cet environnement, vous allez maintenant pouvoir créer votre
base de données. Pour l'exemple, nous allons créer une base de
données intitulée actualites avec une table news, ayant les champs
suivants : id_news de type type numérique (Chaque news aura donc un
id différent), le titre de l'actualité, sa date de parution, l'auteur de la
news et son texte.
Maintenant, nous allons insérer des données dans cette table news.
Pour cela , cliquez sur l'onglet Insérer. Vous obtenez à l'écran une
représentation des différents champs avec des zones de texte pour
vous permettre de les remplir.
5
PHPMyAdmin
En ce qui concerne la date, faites dans un fichier PHP ceci :
<?php
echo time();
?>
Notez la valeur obtenue et renseignez-la dans le champ date.
Si vous souhaitez maintenant consulter les données présentes dans la
table, vous pouvez cliquer sur l'onglet Afficher.
PHP et les requêtes MySQL
Introduction
On ne fait pas directement une requête avec une fonction PHP. Il faut
d'abord passer par plusieurs étapes. Il faut tout d'abord s'identifier au
serveur MySQL que l'on souhaite utiliser. Une fois cette identification
faite, il faut sélectionner la base sur laquelle on souhaite travailler.
6
PHP et les requêtes MySQL
Connexion au serveur MySQL
La première étape consiste à se connecter au serveur MySQL. Pour cela,
on utilise la fonction mysql_connect() de PHP. Elle prend trois
arguments : L'adresse IP (ou l'alias pointant vers l'ip) du serveur MySQL,
le nom d'utilisateur et le mot de passe. Pour EasyPHP ou Wamp, les
paramètres à utiliser sont : localhost et root.
Le code pour un usage local :
<?php
$connexion = mysql_connect('localhost', 'root', '') OR die('Erreur de
connexion');
?>
7
Sélection de la base de données
Pour choisir la base de données sur laquelle vous souhaitez travailler.
On utilise pour cela la fonction mysql_select_db() en PHP qui prend
comme paramètre le nom de la base de données.
Voici comment dire à PHP que nous allons travailler sur notre base de
données actualites :
<?php
mysql_select_db('actualites') OR die('Sélection de la base impossible');
?>
La partie OR die('Sélection de la base impossible') n'est pas
indispensable mais conseillée.
8
Déconnexion du serveur MySQL
Il est conseillé de fermer la connexion après avoir effectué la dernière
requête, et avant tout traitement.
voici un schéma pour bénéficier d'une optimisation maximum :
<?php
$connexion = mysql_connect('localhost', 'root', '') OR die('Erreur de
connexion');
mysql_select_db('actualites') OR die('Erreur de sélection de la base');
$requete1 = mysql_query('....');
$requete2 = mysql_query('....'); //Suivi de vos autres requêtes
mysql_close(); //On ferme la connexion à MySQL
//Le code PHP qui va aller récupérer les données provenant des
//requêtes (fonction mysql_fetch_row() par exemple)
?>
On utilise la fonction mysql_close() pour fermer la connexion au
serveur MySQL.
9
Lire les données dans une table
Avant de lire les données, la table doit contenir des enregistrements.
Qu'il s'agisse d'une lecture, écriture ou modification de données ou de
paramètres, il faudra passer par la fonction mysql_query().
<?php
$requete = mysql_query('Ici votre requête SQL');
?>
Exemple : Récupérer les champs titre et texte de la table news.
<?php
$requete = mysql_query('SELECT titre, texte FROM news');
?>
Le résultat de la requête sera retourné dans la variable $requete de
type resource. Pour récupérer ce résultat sous forme textuelle, on
utilise l’une des fonctions : mysql_fetch_row(), mysql_fetch_array(),
mysql_fetch_assoc() et mysql_fetch_object().
0
Exemple : sélectionner tous les enregistrements de la table actualites,
et les afficher avec mysql_fetch_object :
<?php
mysql_connect('localhost', 'root', '') OR die('Erreur de connexion ');
mysql_select_db('actualites') OR die('Erreur de sélection de la base');
$requete = mysql_query('SELECT titre, texte FROM news') OR die('Err
eur de la requête MySQL');
mysql_close();
/**
* On récupère les données, tant qu'une ligne sera présente
*/
while($resultat = mysql_fetch_object($requete))
{
echo '<p>Titre : '.$resultat->titre.'. Texte : '.$resultat->texte.‘
</p>';
}
?>
1
Exemple : Considérons une base de données MySql « Annuaire »
constituée de la table « personne ». Nous présentons la procédure qui
permet d’afficher le contenu de cette base.
<?
$sql="select* from personne" // requête
// connexion au serveur
$maconnexion=mysql-connect("localhost", "root", "") ;
if ($maconnexion==FALSE)
{
die("la connexion a échouée") ;
}
//déclaration du nom de la base
$connectBase=mysql_select_db("Annuaire", $maconnexion);
if (=connectBase==FALSE) // si le base est inaccessibilité
{
die("base inaccessible") ;
}
2
//envoi au serveur le nom de la requête
$result=mysql_query($sql) ;
if ($result==FALSE) // si la requête est incorrecte
{
die("requête incorrecte : $sql") ;
}
//boucle sur les enregistrements retournés
while (($ligne=mysql_fetch_array($result))==TRUE)
{
// Affichage des champs nom et telephone
echo ("<h3>". $ligne["nom"]." ". $ligne["telephone"]."</h3>") ;
}
//libération de l’espace mémoire pris au serveur MySql
mysql_free_result ($result) ;
//libération de la connexion au serveur MySql
mysql_close ($maconnexion) ;
?>
3
III. Systèmes de gestion du contenu (SGC)
3.1. Introduction
4

Cours de Programmation Web

Hochgeladen von

Dokumentinformationen

Originaltitel

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Cours de Programmation Web

Hochgeladen von

Copyright:

Verfügbare Formate

Cours de Programmation

Par J.D. BATUBENGA

1.3.1. Exemple (utilisation de la structure)

yellow #9ACD32 white #FFFFFF Magenta ou #FF00FF

Statistiques des quelques animaux en RDC

Autres valeurs : password, date, file, image (bouton personnalisé), …

N.B. : On peut grouper les options des listes déroulantes sous un

Il est essentiel de distinguer dans la structure ce qui relève

Das könnte Ihnen auch gefallen