1

UNIVERSITE DES GRANDS LACS

FACULTE D’INFORMATIQUE DE GESTION
BAC III

COURS DE PROGRAMMATION WEB

Prof : NDAYIZIGIYE Olive

 2

PLAN DU COURS

1. INTRODUCTION
2. LES BALISES HTML
3. LE CSS
4. LES FORMULAIRES
5. PHP :

 VARIABLES ET INSTRUCTIONS
 CONNECTION A UN SGBD
 PHP ET LA POO
6. QUELQUES NOTIONS SUR L’ERGONOMIE D’UN
SITE
 3

CHAP.I. INTRODUCTION

La programmation web peut prendre différentes formes : de la

simple page statique à la page dynamique avec connexion à une base de données.
Un site web, ou simplement site, est un ensemble de pages web et
de ressources reliées par des hyperliens, défini et accessible par une adresse web.
Un site est hébergé sur un serveur web accessible via le réseau mondial internet ou
un intranet local. L'ensemble des sites web constituent le World Wide Web.
Quelques définitions
1. Le WWW
Le World Wide Web (WWW) a été créé en 1989 par l’ingénieur anglais
du CERN Tim Berners-Lee. Le web a été essentiellement conçu pour partager
automatiquement des informations entre les scientifiques, universités et instituts
du monde entier.
Avant l’introduction de HTML et HTTP, d’autres protocoles tels
que FTP et Gopher étaient utilisés pour obtenir des fichiers depuis un serveur.
Aujourd’hui, le Web est accessible via le protocole HTTP (HyperText Transfer
Protocol) et les URL (Uniform Resource Locator). Les fichiers hébergés sur le
site web reposent sur du HTML (HyperText Markup Language) et d'autres
langages complémentaires. Le protocole HTTP permet au client (généralement
via un navigateur web) d'accéder à des ressources par un URL. HTML et de
structurer les données ou lier les ressources entre elles, notamment avec des
liens hypertextes.
On parle parfois de « site internet » au lieu de site web. On devrait parler de site
web à destination d'internet, mais par abus de langage, l'expression site internet
reste souvent utilisée. Les sites web ne sont pas forcément accessibles sur internet.
Par exemple, les intranet peuvent contenir un ou plusieurs sites web non
accessibles via internet.
Un site web est un ensemble de pages qui peuvent être consultées en suivant
des hyperliens à l'intérieur du site. L'adresse web d'un site correspond en fait à
l'URL d'une page web, prévue pour être la première consultée : la page d'accueil.
 4

On distingue deux types de sites : les sites statiques et les sites dynamiques.

 Sites statiques
Ces sites ont le mécanisme de fonctionnement le plus simple : les URL
correspondent à un fichier renvoyé par le serveur web. Le contenu des pages d'un
site statique ne dépend donc pas de variables telles que la date ou de bases de
données. Pour changer le contenu d'une page, il est nécessaire de changer le
contenu du fichier.
En outre, les visiteurs peuvent seulement voir le contenu du site mais pas y
participer. Pour les réaliser, seuls les langages dits de d'interface utilisateur
(frontend) sont nécessaires, c'est-à-dire HTML, CSS et JavaScript (en théorie, il est
toutefois possible d'utiliser uniquement le HTML).

 Le HTML permet d'écrire le contenu de sa page ;

 Le CSS permet de mettre en page le contenu (emplacement des éléments), et
mettre en forme le texte (police d'écriture, couleur, taille).
 JavaScript permet d'ajouter du dynamisme, mais uniquement du côté du
navigateur (par exemple des animations graphiques).

 Sites dynamiques
Ces sites offrent un contenu qui peut évoluer dans le temps. Des programmes
tournent du côté des serveurs, à l'arrière-plan, (backend) pour générer les pages
du site. Ces programmes peuvent se servir de bases de données ou autres sources
de données pour composer les pages qui seront affichées dans le navigateur.
Ce dynamisme apporte des fonctionnalités que ne peuvent pas offrir les sites dits
statiques. Par exemple les visiteurs peuvent y participer (commentaires sur un
blog, changement du contenu des pages …).
Pour les réaliser, on a également besoin de HTML, de CSS et de JavaScript, mais
les programmes qui tournent du côté serveur utilisent d'autres langages qui
peuvent créer dynamiquement les pages, en analysant les requêtes des visiteurs
pour ensuite fabriquer une réponse adaptée.
Il existe plusieurs langages pour créer ces
pages : PHP, Java(J2EE), C#([Link]), Ruby, voire d'autres
comme C++, Python et Visual Basic via l'interface CGI.

On peut aussi classer les sites internet en 7 grandes catégories selon l’objectif visé:
1. Site Institutionnel : Pour véhiculer des valeurs
2. Blogs : Pour informer et fidéliser jour après jour
 5

3. Médias sociaux : Des communautés d'internautes regroupés par affinités ou

relations amicales
4. Mini-site évènementiel : Pour animer et soutenir un évènement
5. Site vitrine : Pour s'assurer une présence en ligne
6. Site catalogue : Présenter les produits
7. Site e-commerce : Une boutique virtuelle pour des ventes bien réelles
2. Les SGC
Les systèmes de gestion de contenu (SGC ou CMS en anglais) permettent de
fabriquer des sites web en utilisant des modèles pré établis faits par
des programmeurs ou des communautés de programmeurs. Ces logiciels sont
disponibles pour les débutants et simplifient certaines étapes comme
la programmation informatique ou l'architecture du site.
Il s’agit d’une famille de logiciels destinés à la conception et à la mise à jour
dynamique de sites Web ou d'applications multimédia.
La majorité des SGC offrent la possibilité de catégoriser l’information, de
l’indexer ou d’utiliser des taxinomies pour améliorer les méthodes de recherche
et l'affichage des contenus. On peut donc créer des catégories de contenus, des
sections (ou rubriques), voire des mots clés favorisant l’indexation.
La multiplication des vues, des mécanismes de choix, diminue la profondeur de
l’information par rapport à la page d’entrée en multipliant les chemins, et la rend
donc plus accessible.
Liste des principaux systèmes de gestion de contenu :

 MediaWiki est un moteur de wiki

 Textpattern est un SGC Open Source en PHP
 eZ Publish est un SGC Open Source en PHP
 eXo Platform est un SGC Open Source en Java
 WordPress est un moteur de blog
 Dotclear est un moteur de blog
 Magento est un moteur de boutique en ligne
 Magnolia est un SGC OpenSource Java
 Joomla! est un moteur de portails
 Drupal est un moteur de portails
 Concrete5 est un moteur de portails
 Xoops est un moteur de portails
 SPIP est un SGC à templates
 fluxBB est un moteur de forum
 phpBB est un moteur de forum
 SMF est un moteur de forum
 PrestaShop est un moteur de boutique en ligne
 DotNetNuke / DNN est un SGC libre de droits sur la plateforme Microsoft .Net
 6

 Finwe est un moteur de blog

 Rubedo est un SGC open source multi-sites français
 TYPO3 est un SGC Open Source en PHP
 E-majine est un SGC professionnel en PHP
 Saytup est un SGC professionnel en PHP
 Izi-media est un SGC professionnel en PHP

3. L’URL(Uniform Ressources Locator)

Chaque page a son adresse. Cette adresse est appelée URL.
Syntaxe: scheme://domain:port/path?query_string#fragment_id ·
- Scheme : se réfère au protocole (http, https...) ·
- Domain : nom ou adresse IP. Il donne l’adresse du serveur(
- Port : Le port est un nombre optionnel ; utilisé pour accéder au serveur
- Path : Chemin relatif du fichier sur le serveur·
- Query string : Paramètre utilisé pour générer le fichier html.
eg : ?first_name=John&last_name=Doe.
Path et query string sont interprétés par le serveur. ·
- Fragment identifiant : Cette partie est optionnelle. Elle est utilisée pour
focaliser une partie de la page. Le fragment identifier est interprété par le
navigateur.
Ex. http:/www. ugl .bi / index . html

Client Serveur Base de données

 7

CHAP. II. Le langage HTML

Le HTML, qui signifie HyperText Markup Language (langage de balisage

d’hypertexte), est donc un langage à balise contenant des liens, dits hypertextes,
vers d’autres documents.

Le fichier HTML contient la structure de la page et son contenu ; en plus du

texte brut, il donne du sens au texte en indiquant ce qui relève d’un paragraphe,
d’un titre, etc, à l’aide de balises (exemple <p>, <title>,…);
On n’a pas besoin du serveur pour tester le html. Le fichier HTML peut être
directement ouvert dans le navigateur.

Structure d’un fichier html

< !DOCTYPE HTML>
<html>
<head>
</head>
<body>
</body>
</html>
La balise < !DOCTYPE HTML> sert à déclarer que le document est écrit en
HTML5.
La balise <head> contient des informations pratiques utilisées par le navigateur
comme le titre, le codage de caractère,…. Cette partie n’est pas visible dans le
navigateur.
La balise <body> spécifie la partie valide de votre page qui sera affichée par le
navigateur.
Structure d’un head
‹head›
<title> titre du document </title>
<link rel= ″stylesheet ″type =″text/css ″ href=″[Link]″/>
<meta name =″keywords″ content =″HTML, css, XML″/>
</head>
 8

La balise principale <html> contient tout le contenu.

La balise <meta> est souvent utilisée pour les moteurs de recherche.
L’attribut name de la balise <meta> peut avoir comme valeur :
- keywords : mot clé pour décrire la page ;
- description : page de description ;
- author : page auteur ;
- expires →date d’expiration

La balise <link> permet de lier un autre objet web.

Exemple d’une page

‹! DOCTYPE html›
<html>
<head>
<meta charset =”utf-8”/>
<title> première page </title>
</head>
<body>
<h1>...</h1>
<p>…</p>
<img src = “ images / [Link] “/>
</body>
</html >
Les commentaires en html : <!--…-->

Les attributs des balises

Chef / valeur nom de l’attribut
Ex <div Class = ″ ″› valeur de l’attribut
My class
 9

Les balises couramment utilisées

1. ‹h1›…….‹/h1› : donne les titres à six niveaux
(h1 , h2, h3 , h4, h5, h6 )
2. ‹p› …….‹/p› : pour les paragraphes
3. ‹br/ › ou ‹br ›…‹/ br› : aller à la ligne.
4. ‹em›… ‹ /em› ou ‹strong › … ‹/strong ›: pour mettre en grand les textes.
N.B : Ces 2 balises peuvent être analysées par le moteur de recherche
Chaque balise doit être fermée même si il s’agit d’une balise orphelin (ex ‹br /› )
5. ‹img src= ″image .jpg ″ / › :
Chaque valeur de l’attribut doit être entre guillemets
N.B : les attributs couramment utilisés sur la balise img sont :
src: défini le chemin d’accès de l’image comme pour l’attribut href de la
balise <link> ;
src peut être un autre site ou le chemin d’accès du même site.
alt : donne le texte qui s’affichera si l’image n’a pas été trouvée.

Il est conseillé de mettre la balise img à l’intérieur d’une balise<p>.

Il faut aussi faire attention sur la taille de l’image pour éviter les pages web très
lourdes.
6. <a href=″ ″ >…</ a> : crée un lien vers un autre objet web.
href peut prendre différentes valeurs :
 L’url d’un autre site ;
 L’url d’une autre page du site courant ;
 La référence à une autre partie de la page courante ;
 La référence à un fichier à télécharger ;
 boite de message pour envoyer un mail
Si on ajoute la propriété target =″- blank ″, la nouvelle page s’ouvre dans
une nouvelle fenêtre.

7. ‹ol› ‹li› …‹ / li›

‹li› …‹ / li›
‹/ol› → pour les listes ordonnées
8. ‹ul› ‹li›…‹ / li›
 10

‹li› …‹ / li›
‹/ul› → pour les listes non ordonnées
Exemple
‹! [Link]›
‹html›
‹head›
‹titre› exemple d’un site ‹/titre›
‹/nead›
‹body›
‹h1› voici les grandes activités du jour ‹/h1›
‹p› se procurer d’abord ces fruits
‹ul›
‹li› pommes ‹/ li›
‹li› orange ‹/ li›
‹li› poivres ‹/ li›
‹li› raisins ‹/li›
‹/ul›
‹/p›
‹p› N’oubliez pas que les trois choses suivantes sont importantes dans la vie
‹ol›
‹li› manger ‹/ li›
‹li› boire ‹/ li›
‹li› se reposer ‹/ li›
‹/ol›
‹/p›
‹p› si vous avez des questions
‹a href =″www. google. fr ″› cliquez ici ‹/a›
 11

‹/p›
‹/body›
‹/ html›
9. ‹div› et ‹span›→ balises génériques sans propriété particulières
Elles servent à organiser la page.
La différence entre les deux est que :
‹div› est une balise de block tandis que ‹span› est une balise linéaire
Les balises sont subdivisées en 2 types :
- balises en block (exemples : p,div,h1,h2,...) : ajoutent un retour à la ligne
avant et après.
- balises linéaires (exemples : ‹a›,em,strong,img,span) : elles sont incluses
dans des balises en block

Les tableaux
Un tableau a comme balise principale ‹table›. La balise ‹caption› sert de titrer le
tableau.
<tr> : une ligne
<td> : cellule (ou ‹th› pour l’entête du tableau)
Le html5 ajoute les balises thead, tbody et tfooter pour les parties du tableau.
Ces parties peuvent être utilisées pour organiser le tableau. Elles sont
optionnelles.
‹td› et ‹th› doivent être incluses dans la balise ‹tr›.
Pour fusionner les cellules on ajoute la propriété sur la cellule à fusionner :
. colspan : pour fusionner les colonnes
.rowspan : pour fusionner les lignes
Exemple1:
 12

Exemple2 :

Exercice
Faire une page html qui affiche
Voici ma première page
Il contient un tableau
Nom Prix quantité
Riz 2000 50
Haricot 1600 20
Pomme de terre 700 50
A cette liste s’ajoutent les fruits :
 13

 Mangues
 Orages
 Bananes
 Ananas
Il y a 4 choses importantes dans la vie :
1. Se nourrir
2. Se vêtir
3. Travailler
4. Se reposer
html5 inclut de nouvelles structures de balises. Ces balises, comme la balise div
ne donnent pas une information particulière aux navigateurs ni aucune
information à propos de l’emplacement.
Il s’agit de :
- ‹header›,‹nav›,‹section›,‹article ›,‹aside ›et ‹footer ›
14
 15

[Link]. Le langage css (Cascading Style Sheets )

Cascading Style Sheets (CSS) est un mécanisme simple pour ajouter du style
(exemple fonte, couleurs, espace) à un document web. Le CSS est responsable
du rendu du site sur votre écran.
Comme le html, le css est interprété du côté du navigateur.
Il existe trois façons pour ajouter le style à une page html :
 En utilisant la propriété du style directement dans la balise ;
Ex.<a href="[Link] style="color:red">Un lien</a>
 En déclarant le style dans chaque page html (balise ‹head›) ;
Ex. <html> <head>
<title>...</title>
<style> a { color: red; } </style>
</head>
<body> <a href="...">Lien 1</a>
<a href="...">Lien 2</a>
</body> </html>

 En déclarant le style dans un fichier css indépendant.

La meilleur façon est la troisième parce qu’elle est plus flexible et permet de
déclarer un style pour plusieurs pages html.
Comment inclure un fichier css dans une page html (balise ‹head›) :

<link rel = ″stylesheet″ href = ″path_to_css_file″/›

Structure du contenu d’un fichier css :

/*commentaires*/

Sélecteur {

Propriété1 : valeur 1 ; /* commentaire */

Propriété2 : valeur 2 ; /* commentaires */

}
Le style défini pour une balise est applicable à toutes les balises incluses dans
cette balise (balises enfants).
 16

La définition d’un sélecteur dans un fichier css permet de définir à quelle base il
faut appliquer le style.
Ex : p {color : blue ;}
Le selecteur est p, cela signifie que tous les paragraphes (balises ‹p›) seront bleu
(color : blue signifie que le font sera bleu)
Il existe plusieurs façons de définir un sélecteur css :
Façon de Définition du Exemple Code css Les balises html
faire la sélecteur concernés
sélection
Par le nom nom de la Paragraphe p {………..} ‹p› ….‹/p›
de la balise balise
Par le nom .nom de la toutes les . important {...} ‹p class=” important
de la classe classe balises avec la “….‹/p›
propriété
class=important ‹a class =″
important” ›….‹/a›

Par #identifiant- La balise #Article1 {…} ‹P id

l’identifiant balise identifiée par =article1>…</p>
de la balise id=″ article1 ″
Par le [nom de Toutes les [super]{…} <p super = « … »>
facteur que l’attribut] balises avec
la balise attribut
possède « super »
une
propriété
particulière
Par le fait [nom_attribut Toutes les [super=’true’]{…} <p
qu’une = valeur] balises avec super=’true’>…</p>
balise a une attribut super
propriété =true
avec une
valeur
quelconque

Il est possible de combiner plusieurs sélecteurs css pour préciser sur quelle
balise le style sera appliqué :
- td1, td2 : le style sera appliqué à la fois à td1 et à td2 ;
-td1 td2 : le style sera appliqué à toutes les balises td2 incluses dans une balise td1 ;
 17

-td1+td2 : le style sera appliqué à la première balise td2 qui vient directement
après une balise td1 ;
-td [attrib] : le style sera appliqué à la balise td qui a l’attribut attrib.
Les sélecteurs css dynamiques
Un style spécifique peut être appliqué aux balises : cliquées, qui ont le curseur,
dont le curseur passe dessus, ou qui sont visités (pour les balises link)
sélecteur css+″ : ″+″ hover|active |focus|visited″
a : focus {color :green}
1. Formatage du texte
- Taille
 Propriété font-size : les unités de mesures peuvent être en px ou en
medium (em) ;
- Couleur
 Propriété color : La propriété color peut avoir comme valeur une
couleur standard, un code hexadecimal(#000000 est noir, #FFFFFF est
blanc, #FF00FF est rose) ou une fonction rgb(rouge vert blue)

Les couleurs peuvent s’utiliser sur plusieurs attributs d’un élément HTML :

 la couleur du texte : color:red;

 la couleur du fond : background-color:blue;
 la couleur de la bordure : border-color:yellow; …

Les 16 mots clés suivants peuvent être utilisés pour définir une couleur
: aqua, gray, navy, silver, black, green, olive, teal, blue, lime, purple, white, fuch
sia, maroon, red, yellow. Ils ont été choisis pour désigner 16 couleurs

- Alignement :
 Propriété text-align : cette propriété a comme valeur left/center/ right
ou justify
- Fond :
 propriété fond-style : (italic/ oblique, normal)
Fond –weight : bold / normal
Text-decoration
Underline /line thought /over line brink / none
 Proriété display: incline / block / incline – block /none;
 Propriété vertical- align : baseline /top / middle/ button valeur en %.
 18

POSITIONNEMENT
Une balise html est comme une boite.
Une boite c’est :
 du contenu ;
 une bordure (border) ;
 un espacement entre le contenu et la bordure (padding)
 un espacement entre la bordure et les autres boites (margin)

Le positionnement peut aussi être déterminé par les propriétés :

-position ;
-float ;
-le fait de définir une balise en block
La propriété position peut avoir comme valeurs p {position :
 19

- absolute : cette valeur permet au composant de ne pas dépendre de

l’ordre dans lequel les éléments html sont déclarés ;
- fixed : c’est comme absolute mais position par rapport à la fenêtre ;
- relative : permet de décaler un élément par rapport à une position de
référence ;
- static : valeur par défaut d’un élément du flux.

La propriété floatting peut avoir comme valeur left, right, none ;

La propriété overfloat : il peut avoir comme valeur visible / hidden / croll/auto
La propriété word-wrap :break-word (la valeur)
La propriété background –color
La propriété background –image
La propriété background-position
La propriété background- attachement : fixed / scroll
LES BORDURES
border :none /solid/dotted/ dashed ;
les bordures peuvent aussi être représentés par les propriétés border-widht,
border –top ; border botom , boder-left ; border-radium
Les dimensions des blocks peuvent être déterminées par les propriétés : heigh et
width
Ces valeurs de ces propriétés sont en pourcentage ou en px.
On peut aussi avoir les propriétés min-width, max-width, min-heigh, max-
height.

Réf. [Link]
html5-et-css3
 20

[Link]. LES FORMULAIRES

Le coeur du formulaire est constitué par deux types de balises: <form> et <input>.

La balise <form> délimite le contenu du formulaire et renseigne plusieurs attributs

nécessaires au fonctionnement du formulaire:

 method: nom de la méthode HTTP utilisée pour envoyer les données. Peut
prendre pour valeur post ou get :
o get envoie les données comme composantes de l’URL du serveur et
requiert par conséquent que :
1. les données soient encodées pour être compatibles avec les
spécifications URL,
2. l’ensemble des données du formulaire plus l’URL du serveur
forment une chaîne de caractères de moins de 2000 caractères
(limite imposée par certains navigateurs).
o post envoie les données dans le corps de la requête HTTP et ne
présente pas la limitation de taille, elle est donc à privilégier.
 action : URL du serveur où les données du formulaire doivent être
envoyées.

1. La balise <input> permet de définir différents champs dans lesquels

l’utilisateur peut entrer des données. Ces champs offrent plus ou moins de liberté
d’expression selon le type utilisé. La balise <input> peut avoir comme attributs:

 type : text /password /submit / textarea / checkbox /radio/

définit l’apparence visuelle du champ et la nature des données qui peuvent

y être renseignées.

 value : la valeur envoyée au serveur. Si elle est déjà renseignée lors de la

création du formulaire, elle fait office de valeur par défaut.
 name : le nom que prendra la donnée envoyée au serveur. Si l’input a
pour name “firstname” et pour valeur “Éric”, dans le cas d’une
method get l’URL lors la soumission du formulaire contiendra
‘firstname=Éric’ et si la méthode est post ces valeurs seront transmises via
les champs Form Data de la requête HTTP.
 id : identificateur utilisé en css ou en java script,…
 Size : taille en nombre de caractère
 maxlength : maximum de nombre de caractère
 Value : valeur du contenu
 placeholder: valeur informationnelle si le contenu est vide.
 21

Pour la valeur du type textarea, il est possible d’ajouter les propriétés rows
pour le nombre de ligne et cols pour le nombre de colonnes.
Le html5 ajoute les types : email, url, tel, range, color, date,password et
search.
Ces types, comme le type text, permettent une présentation spécifique.
2. Balise ‹select› : cette balise est utilisée avec la balise option. Les balises
option peuvent être incluses dans une balise optgroup (avec la propriété
label)
Il est possible d’ajouter la propriété selected (sans valeur) dans la balise
option pour signifier que cet élément est sélectionné par défaut.
La propriété required (obligatoirement) spécifie que la saisie dans l’input est
obligatoire
La propriété Fieldset avec la balise legend

Afin de pouvoir être envoyé, votre formulaire doit obligatoirement contenir une
balise <input> avec l’attribut type fixé à “submit”. Cette balise définit le bouton
qui déclenchera l’envoi des données au serveur lorsque l’on cliquera dessus.

NB. il existe d’autres méthodes dans le protocole http (head , put ,delete ….)
Pour la méthode GET, le passage de paramètre est en claire dans url tandis que pour la méthode
POST le passage des paramètres est caché. Post est utilisé pour envoyer de grands volumes de
données au serveur.
 22

CHAP.V. Le langage PHP (Personnal Home Page ou Hypertext Preprocessor)

Le langage PHP est interprété au niveau du serveur. Il peut générer un fichier
html. Le mélange entre le code html et le code PHP est possible à l’aide de la
balise <? PHP>
Ex : ‹html›…
‹body ›
‹ ? php
echo ″bonjour″ ;
?>
‹ /body ›
‹/html›
N.B : Les balises < ? ?> et < % %> peuvent être utilisées mais elles sont
déconseillées.
Commentaires sur une même ligne : // comments
/ *les commentaires */ : pour plusieurs lignes
Pour inclure d’autres fichiers dans un fichier php, on fait : include (″php-file-
path″)
N.B. la fermeture de la balise n’est pas obligatoire si vous n’avez que du php
dans votre fichier .
1. Les variables
Les variables sont préfixées par $ (ex : $nom)
Pas de déclaration de type,
Pas d’initialisation nécessaire
Assignation d’une valeur à une variable
Ex : $nom= ″valeur″ ;
La valeur à assigner peut être une chaine de caractère (dans ce cas elle est
entourée de double guillemets (″) ou (simple guillemets) , un entier , un réel (en
utilisant un point comme virgule), un booléen (true or false) ou null. Comme en
C, on peut faire la conversation de type
‹ ? php
 23

$monstring =″0″;
$unint = (int) $monstring;
?›
Bien qu’on ne précise pas le type, les types sont implicites.
Gettype (nom-variable) retourne le type de nom-variable, istype (nom-
variable) retourne true si nom-variable est du type type.
Concaténation de chaines
Il existe trois manières de concaténer les chaines
Ex1 : ″fist part $var second part″
$nom= « olive » ;
Echo ″mon nom est $nom″ ;
Ex2 : 'first part'.$var.'second part' or ''first part'. $var.'second part''
Echo,′mon nom est′ . $nom ;
Echo″mon nom est′. $nom.’ blabla″ ;
Les opérateurs mathématiques
+,-, *, /, % (modulo) sont les opérateurs mathématiques.
Affichage d’une variable
- Echo
- Var- dump ($var)

eg : $i=2;
echo $i.'<br />'; 2
var_dump($i) ; int(2)
echo('<pre>') ;
var_dump($i) ; int(2)
 24

[Link] schemas conditionnels

Syntaxe:
if (condition){
Instruction (s)}
elseif (condition ){
instruction (s)}
else {Instruction(s)}
Opérateur ternaire
Ex. Max= a>b?a:b;
Opérateur switch
switch ($var){
Case v1: Instruction1; break;
Case v2: Instruction2; break;
default: instr n; break}
[Link] boucles
1. while(condition) { Instruction (1)}
2. do { instruction (s) } while(condition)
3. for (init; condition ; incrementation) { condition(s)}

4. Les tableaux et les chaines de caractères

Tableaux simples : $var =array (val1, val2, ….valn)

Ex : $tab-colors=array(″red″ ;″yellow″,″ blue ″,″ while″)

$tab= array (″footbar″, 2002, 205, $name);
Ex : $var []= val ; // val sera ajouté à la fin
Ex : $var[2] = 50 ; // 50 sera ajouté à l’indice 2
Le premier indice est 0.
Parcours d’un tableau
EX : $i =0
while ($i<=count ($tab) {
 25

echo $tab [i].’\n’;

$i++;
}
foreach($tab as $elem){
echo $elem.’\n’ ;
Quelques méthodes (fonctions) utiles sur variables
 Empty ($var) : renvoi vrai si la variable est vide ;
 isset($var) : renvoi vrai si la variable existe ;
 unset ($var) : détruit une variable ;
 gettype ($var) : retourne le type de la variable
 settype ($var) :convertit la variable en type
 is- long, is-double, is string , is- integer, is- bool,

Les tableaux associatifs

Init: $ var = array ( key1=>val1 ,key2=> val2,,…keyn =>valn)
Ajout élément : $var [key]= val ;
Récupérer l’élément: $var [key] ;
Ex : $list=array (nom=>′Keza′ ,age =>23, classe=>′bacc1′)
$anne=$list[age] ;
On peut utiliser la boucle foreach sur les tableaux associatifs.
foreach ($array as [$key=>] value) {instruction(s)}
Quelques fonctions sur les tableaux
Count ($var), sizeof: retourne le nombre d’éléments du tableau.
In-array($var, $tab) : vérifie si la valeur $var existe dans ce tableau $tab.
Les chaines de caractères
Elles sont toujours délimitées par des simples ou doubles guillemets.
Les doubles guillemets permettent aussi d’évaluer les variables.
Ex : $nom= ″ UGL″
Echo ″nom : $ nom″ // affiche nom : UGL
 26

Echo ‘nom : $ nom’// affiche nom : $nom

Quelques fonctions utiles sur les chaines

strlen($str) : retourne le nombre de caractères qui composent une chaine ;
strtolower($str) : convertit la chaine en minuscule ;
strtoupper($str) : convertit la chaine en majuscule ;
trim($str) : suppression des espaces de début et de fin de la chaine ;
substr( $str, $i, $j) : retourne une sous chaine de $str, de taille $j, débutant à la
position $i ;
strnatcmp ($str1, $str2) : comparaison de 2 chaines ;
addslashes($str): despécialise les caractères spéciaux ;
ord($char) : retourne le code ascii du caractère $char ;
echo( ); print( ) : écriture dans le navigateur ;
printf( [$ format, $org 1, $org 2]) : écriture formatée ;

5. PHP, un langage orienté objet

PHP à partir de la version 5 intègre l’aspect orienté Object. Chaque partie du

programme peut être vue comme un objet avec ses propres propriétés et
fonctionnalités.
Comment définir une classe php?
class classname {}
Définition attribut : class classname { ‹ visibility› $var ;}
Héritage : class classname extends superclassname {…}
Déclaration de constructeurs
public function _construct ([args]) {…}
Cette méthode est appelée lors de l’installation
$var = new classname ([args]) ;
Exemple : class personne {
 27

public _construct ($ nom, $ prénom) {

self:: nom = $nom ;
self:: prénom= $prénom ;
}
}
Pour creér l’objet de cette classe
$P= new personne (”TOYI “, “ Eric “);
6. Récupération des données du formulaire
Deux tableaux sont utilisés pour gérer ou récupérer les valeurs d’un
formulaire :
$_post [ ] si on a utilisé la méthode post et $_GET [ ] si on a utilisé la méthode
GET.
User
Password valider annuler

‹form method=″ post ″ section = ″[Link]″›

User ‹input type =″ text ″ name = ″user ″/›
Password ‹input type =″ Password ″ name = ″motpass ″/›
‹input type =″submit ″ value = “valider” name= ″valider ″/›
‹input type =″ submit ″ value = “annuler” name= ″annuler ″/›
‹/ form›
Si on veut utiliser post
$user = $_post [″user″]
$pass= $_post [″motpass ″]
 28

7. Connexion à une base de données

Il existe plusieurs systèmes de gestion de base de données (MYSQL (free),

postgreSQL (free), SQLite (free), oracle, Microsoft SQL Server,…
Ces SGBD sont relationnelles. Ils stockent les données dans des tables. Chaque
table à différentes colonnes. Le serveur de base de données n’est pas forcément
sur la même machine que le serveur Web. SQL est un standard peu importe le
serveur de base de données qu’on appelle, la requête reste la même pour se
connecter à un serveur de base de données à partir d’un fichier PHP, il faut
d’abord activer php-pdo-MYSQL (WAMP/PHP/ extension PHP)

Les 2 autres extensions MySQL-extension et MySQLI-extension et tendent à

devenir obsolète, (dépassé)
Si vous n’avez pas cette extension dans la liste des extensions PHP, il faudra
modifier le fichier php. ini en faisant :
Add extension :
· php_pdo_mysql.dll
· [Link]
· dbo_mysql.so
Pour se connecter, il faut spécifier le nom du serveur, le login et le mot de
passe :
$bdd = new PDO('mysql:host=<HOST>;dbname=<DBNAM E>', '<USER>',
'<PASSWORD>') ;
NB: 'mysql:host=<sHOST>;dbname=<DBNAM E>’s’appelle le DNS
Tous les connections ouvertes doivent être fermées avec mysql-close ().
Pour interroger une base de données, on exécute query().
$reponse = $bdd->query('<query>');·
Pour obtenir une ligne de résultants :
$resultats = $response->fetch() ; // return false si pas de données à lire
$nom=$resultats['nom′] // permet de récupérer le champ nom du résultat
Pour fermer le curseur, on a $ response->closecursor ( );
 29

On peut utiliser une requête avec des paramètres :

$response =$bdd->prepare(‘ query ‘) ;
Vous pouvez mettre une requête avec point d’interrogation. Cette instruction
permet de préparer la requête pour l’exécuter. On a : $ req->execute (array (‹
value›)) ; l’ordre des valeurs est important.
Cfr memento
8. Les sessions utilisateurs et les cookies
Les sessions utilisateurs permettent de mémoriser les valeurs entre les
navigations. On a une session par utilisateur une session est délimitée dans le
temps (par défaut une heure, fermeture d’un navigateur)
Ils peuvent être utiles pour passer des valeurs d’une page à une autre.
On utilise session_start() pour démarrer la session.
Cette instruction doit être la première instruction d’un fichier php ou html.
Le tableau $_SESSION est utilisé pour accéder aux variables d’une session
Exemple de définition d’une variable d’une session :
$SESSION [′name′]=$nom ;
Suppression d’une variable
Exemple : inset ($-SESSION [′name′]) ;
Détruire la session
Exemple : Session –unset ( ) ou
Session-destroy ( )
Ces 2instructions détruisent toutes les variables de la session. Elles sont utiles
par exemple pour le log-out.
Les cookies
Les cookies mémorisent les données à travers la navigation. Pour placer des
valeurs dans un cookie, on fait :
setcookie(<cookie_name>, <cookie_value>, <end_time>)
Cette cookie doit être évoquée avant la balise html pour récupérer les valeurs, on
utilise le tableau $-cookie
 30

9. Quelques notions sur le javascript

Javascript est un langage de script(non compilé). Il est totalement différent du
langage java bien que beaucoup de personnes tendent à les confondre.
Il a un aspect orienté objet, à typage faible et il est interprété côté client. Il est
souvent utilisé pour rendre la page plus dynamique.
Il sert à améliorer aussi l’ergonomie en manipulant le DOM (Document Object
Model)

HTML

HEAD BODY

DIV DIV

Javascript permet d’afficher les messages d’alerte, afficher ou cacher une ˂div˃,
chargée dynamiquement du contenu.
Par contre JS ne permet pas d’accéder à une base de données, de lire et d’écrire
des fichiers sur le post client.
Il faut éviter d’implémenter des comportements métiers en Javascript.
Comment intégrer du JS dans nos pages ?
Il existe 3 façons :
 Utilisation des attributs prévus dans le html : onclick, onmouseover,…
 Utilisation de la balise html script pour insérer du Javascript dans la page html.
 Utilisation de la balise html script pour importer un [Link] dans la pag

Ex1.<input type= « submit » value= « clickme » Onclick= «alert(‘test’) ; »/˃

Cette méthode est déconseillée, elle rend le code html pénible à lire et difficile à
maintenir.
Ex2.
˂head˃
˂script type= « text/javascript »˃
Function myfunction ( ){
 31

Document. getElementById (“demo “). innerHtml= “Helloworld “ ;}

˂/script˃
˂/head˃
Ex3.
˂head˃
˂script type= «text/javascript » src= « [Link] »/˃
˂/head˃
Cette méthode permet une bonne séparation de la structure de la page (code html)
et du comportement et facilite par conséquent la maintenance.
Mieux dix fichiers de 100 lignes qu’un seul de 1000 lignes.
Actuellement, il existe plusieurs frameworks pour faciliter la tâche. Ces
frameworks simplifient l’écriture du javascript et permettent d’arriver à un
résultat plus rapidement.
Ex :
- JQuery
- Mootools
- PhoneJS
- AugularJS
- Google Web Toolkit

Le framework JQuery est le plus répandu en entreprises. Il utilise les sélecteurs

des éléments du DOM (Syntaxe semblable au CSS).
Il se présente sous forme d’un [Link] à inclure dans votre page.
Quelques sélecteurs utilisés par JQuery
Sélecteur d’ID  $ (« #monId »)
Sélecteur de type $ («span»)
Sélecteur de classe  $ («. maclass »)
Sélecteur d’attributs  $ («[name=’toto’]»)
$ : ce symbole signifie qu’on fait appel au framework JQuery
#monId : c’est le sélecteur
ex : <input type= « text» value= « toto » id= « monchampcache »/˃
 32

$(« #monchampcache »).val ( ) ; retourne le string toto.

Cet exemple montre que JQuery peut nous aider à connaître les valeurs des
éléments du DOM sélectionnés. On peut aussi leur attribuer une valeur.
$(« monchampcashe »). Val(« titi ») ;
On peut aussi connaître le contenu d’une balise
$(«.Champtext »). text() ;
En javascript, les variables ne sont pas typées. Pour déclarer une variable, on
a var mavariabl ;
Le mot var est optionnel mais utile pour une variable locale.
Il existe plusieurs fonctions Javascripts :
Show ( ), hide( ), attr ( ), addclass ( ), removeclass ( ), html ( ), each ( ),…
En Js, chaque événement correspond à une fonction.
Ex : change ( ) ;
Click ( ), dblclick ( ), focus ( ), focusin ( ), focusout ( ), hover( ), keydown (
), keypress ( ), keyup, live( ), load( ), select( ), submit( ).
Pour capter un événement, on sélectionne l’élement émetteur et on lui
associe un récepteur.
ex :$ (« # monbotton »). Click (faire une action) ;
$ («monbutton »). Click (fonction ( ){alert (« Handler for click ( )
called ») ;} );
$ (« # monbutton »). Bind(« Click », (fonction ( ){….} );
On peut aussi associer à handler sur un élément ajouté dynamiquement
$ (document). On (« click », « «#my button », function( ) {….} );

Les fonctions show ( ), hide ( ),toggle ( )modifient l’élément du DOM (la

balise) en ajoutant ou en retirant la propriété css display.
Les fonctions slideup( ), slidedown ( ), slidetoggle ( ) affichent ou cachent
un div avec un effet de slide.
La fonction animate ( ) utilise la propriété css pour créer des animations sur
mesure.
 33

on peut enchainer les actions function init( ) {

 Show (« slow »)
 Animate ({left »+= »}, 2000)
 Slide toggle (1000)
 ….
 }

Quelques notions sur l’ergonomie d’un site

Penser à l’ergonomie d’un site revient à penser aux trois objectifs qui sont :
1°) Efficacité : c’est-à-dire pouvoir atteindre le but plus facilement ;
2°) efficience : pouvoir atteindre le but plus rapidement et avec le moins
d’erreurs possibles.
3°) Satisfaction : Il faut que l’utilisateur apprécie son expérience.
Toute information doit être accessible en moins de 3 clicks. Il faut toujours
se poser la question. Est-ce que l’utilisateur quitte toujours l’interface en
moins de 3 clicks ?
Profondeur d’un site : nombre de click pour accéder à l’information recherchée.
Certains utilisateurs n’aiment pas scroller. Le contenu d’un site doit être
adapté aux besoins de l’utilisateur (contenu=information + fonctionnalité).
 34

ANNEXE
4. Requête http( cfr annexe)
Quand vous entrez l’adresse(URL) dans votre barre d’adresse, la première tâche
du navigateur est de parser la requête, c’est à dire la lire et l’analyser pour savoir
ce que vous avez voulu dire. Donc déjà il va lire le protocole. Si vous ne l’avez
pas indiqué, il va rajouter le protocole par défaut soit [Link]
Ensuite il va continuer de lire l’adresse en la découpant en deux parties :
1 – l’hôte : On l’appelle hôte car c’est le serveur qui héberge les données.
2 – la page demandée.
Le navigateur sait quel serveur contacter mais il ne sait pas où ce serveur se trouve.
Sur Internet, toutes les machines communiquent via le protocole IP (Internet
Protocol). Dans ce protocole, chaque machine possède (au minimum) une adresse
IP.
Il va falloir trouver l’adresse IP correspondant au nom d’hôte. Pour ça on utilise
le protocole DNS (Domain Name System). Le DNS est assez simple dans son
utilisation puisqu’il fonctionne comme un annuaire.
“Quelle est l’IP correspondant à [Link] ?
Donc la première connexion n’est pas au serveur web consulté mais une
connexion au serveur DNS.

- Connexion au serveur WEB

Maintenant votre navigateur connait l’hôte, la page demandée et l’adresse IP à
contacter. Il a tout ce qu’il lui faut pour établir la connexion au niveau TCP.
transmission Control Protocol est un protocole dit « de connexion » au-dessus
d’IP. Là ça devient un peu technique mais en gros ça permet d’être sûr que tout
ce qu’envoie le client est bien reçu par serveur sans erreur, et vice versa. Le
protocole IP utilise des adresses (IP), le protocole TCP utilise lui des ports. HTTP
utilise par défaut le port 80 donc si on ne le spécifie pas au navigateur, celui-ci
utilisera de lui-même le port 80 (443 pour l’HTTPS).

- Interprétation de la page web

Le navigateur va donc recevoir du texte formaté en HTML. Il s’agit d’un langage

de description assez simple fonctionnant avec des balises. Donc le navigateur va
lire tout le texte et transformer ce texte en une vraie page web. Il va donc analyser
les balises pour afficher non pas uniquement du texte mais également afficher des
liens, des images, des vidéos…
 35

- Affichage de la page – Exécution des scripts

Il y a de fortes chances que la page web demandée fasse appel à ce qu’on appelle
une feuille de style CSS. Le Cascading Style Sheet est le découplage du fond et
de la forme ! Le fond c’est le texte qui est dans le HTML et le CSS c’est donc la
forme. Le CSS est un fichier texte qui indique comment le navigateur doit dessiner
la page web. Quel couleur a le texte, le fond, où placer le menu, quelle décoration
appliquer au lien, quelle police d’écriture pour tel ou tel élément… tout un tas de
règle qui vont définir le rendu de votre page web. C’est aussi là-dedans qu’on fait
en sorte que la page web s’adapte à l’affichage sur divers type d’appareils
(ordinateur, téléphone, tablette, télévision, montre,…).

Maintenant il va devoir exécuter le javascript. C’est un langage de

programmation exécuté du côté navigateur Javascript permet d’ajouter des actions
à la page.

4. Les IP et les noms de domaine

Internet est un grand réseau composé de très nombreux ordinateurs. Pour qu'ils
puissent communiquer entre eux, ils doivent pouvoir s'identifier. Sans nom, il
serait impossible de différencier chacun des ordinateurs !

Pour résoudre ce problème, on a décidé d'attribuer un numéro d'identification

unique à chaque ordinateur : c'est l'adresse IP.

Les adresses IP
Adresses IPv4(Il existe maintenant ipv6 de 128 bits soit 16 octets)
 36

La nouvelle forme d'IP, que l'on va rencontrer de plus en plus, a la forme suivante :

[Link]

Pour un humain, retenir une IP n'est pas facile on a décidé qu'il serait possible
d'associer un nom d'hôte à chaque machine, qui serait équivalent à écrire l'adresse
IP. Ce nom d'hôte peut-être n'importe quel texte (comme monordinateur) mais il
a le plus souvent la forme [Link]. Chaque ordinateur est
identifiable soit par l'IP soit par le nom d'hôte :

La traduction nom d'hôte => IP est appelé résolution d'hôte.

L'opération inverse est aussi possible : IP => nom d'hôte. On parle de résolution
inverse.

Mais cette résolution ne fonctionne pas par magie. Pour traduire un nom d'hôte
comme [Link] en une IP comme [Link], l'ordinateur a besoin
d'une "table" qui contient toutes les équivalences.

Associer les IP et les noms d'hôtes

Devant la multiplication des ordinateurs sur le réseau, et donc des noms d'hôtes,
Paul Mockapetris a inventé en 1983 les noms de domaine (Domain Name System,
ou DNS).

Il s'agit d'un système hiérarchique qui permet de "découper" le réseau en un

ensemble de domaines, eux-mêmes composés de sous-domaines, éventuellement
composés de sous-sous-domaines, etc. Il y a donc plusieurs niveaux de domaines
possibles.
 37

[Link]

Il est composé de 3 niveaux de domaines, que l'on lit de droite à gauche :

1. com : c'est le domaine de premier niveau. On parle de "Top level domain",

ou TLD.
2. siteduzero : en-dessous, il existe de très nombreux domaines de second
niveau : [Link], [Link], [Link], [Link]...
3. www : chacun de ces domaines peut avoir des sous-domaines, le plus
couramment utilisé sur le web étant "www". On a donc
[Link], [Link]... Cela étant, ce n'est pas une
obligation, et on peut imbriquer plusieurs sous-domaines. Ainsi sur le site
de Dell, on tombe souvent sur une adresse comme [Link].

Les domaines sont organisés hiérarchiquement entre eux comme ceci :

Le nom de domaine complet, appelé "Fully Qualified Domain Name" (FQDN) est
constitué de tous les sous-domaines et inclut le point final représentant le serveur
racine ([Link].). Il peut comprendre jusqu'à 253 caractères.

Les serveurs DNS

Pour gérer ces très nombreux noms de domaines, et leurs sous-domaines, on a

inventé un système de serveurs capables de gérer chacun un ou plusieurs niveaux
de domaine. Ce sont les serveurs DNS.
 38

Il existe plusieurs niveaux de serveurs :

 Les serveurs racine : au nombre de 13, nommés de [Link] à

[Link], ils contiennent l'adresse des serveurs DNS de chaque
domaine de premier niveau (com, net, org, fr...).
 Les serveurs DNS de premier niveau : il y en a plusieurs par domaine
("com", "net", "fr"...). Ils connaissent l'adresse des serveurs DNS de chacun
des sous-niveaux. Ainsi, les serveurs DNS du domaine "com" connaissent
l'adresse des serveurs DNS qui gèrent [Link], [Link],
[Link]...
 Les serveurs DNS de second niveau : très nombreux, ce sont eux le plus
souvent qui contiennent les équivalences nom de domaine / IP. Ainsi, le
serveur DNS de [Link] connaît tous les sous-domaines
([Link], [Link], [Link], etc.)
et connaît l'adresse IP de la machine qui gère chacun de ces domaines.

En plus de ces serveurs, chaque fournisseur d'accès à Internet (FAI) propose un

serveur DNS qui fait office d'intermédiaire entre les internautes et les "vrais"
serveurs DNS.

Voici comment ça fonctionne, lorsqu'un visiteur demande à visiter un site

web :
 39

Le cache DNS

Les fournisseurs d'accès à internet (FAI) des internautes fournissent des serveurs
DNS. Lorsque votre ordinateur doit résoudre un nom de domaine comme
[Link], c'est donc le serveur DNS du FAI qui est contacté.

Le serveur DNS du FAI n'est pas un vrai serveur DNS qui connaît les
correspondances "nom d'hôte / IP". C'est un intermédiaire. Il garde
temporairement en mémoire les dernières résolutions de noms de domaine pour
ne pas contacter systématiquement tous les serveurs derrière.
Ainsi, si deux utilisateurs du même FAI demandent à aller sur
[Link], le serveur DNS ne fera pas toutes ces opérations deux fois.
Il donnera immédiatement la réponse qu'il a conservée en cache.

La mise en cache sur un serveur DNS peut durer de quelques secondes à plusieurs
jours.
C'est pour cela que, lorsqu'on change l'adresse IP associée à un nom de domaine,
tous les internautes ne voient pas le changement immédiatement. Il faut qu'ils
attendent que les serveurs DNS de leur FAI aient mis à jour leur cache pour
prendre en compte la nouvelle adresse IP associée au domaine.

Obtenir un nom de domaine

Alors, comment fait-on pour avoir son propre nom de domaine ?

Tout d'abord, il faut savoir que les noms de domaines ne sont pas gratuits : il faut
les acheter auprès d'un opérateur spécialisé et autorisé appelé registrar. De plus,
ces noms ne peuvent pas être achetés à vie, seulement loués pendant une période
donnée (pouvant aller jusqu'à 10 ans).

Il existe quelques rares exceptions : ainsi les noms de domaine de second niveau
en ".tk" sont fournis gratuitement. Quant aux noms de domaine de troisième
niveau, de nombreux hébergeurs les proposent gratuitement, sous la forme
[Link]. En effet, la création de sous-domaines est gratuite et
illimitée.

C'est un organisme américain, l'ICANN(Internet Corporation for Assigned Names

and Numbers= autorité de régulation de l’internet), qui gère les noms de domaine
de premier niveau(TLD : Top Level Domain) comme .com, .net, .fr...
Il délègue la gestion technique de ces TLD à différents opérateurs
appelés registry : c'est l'AFNIC qui gère les domaines .fr et .re par exemple.
 40

Enfin chaque registry délègue à plusieurs registrar la vente des noms de domaine.
Ceux-ci sont très nombreux. En France, citons Gandi, OVH, 1&1, Nerim...

Vous devez donc prendre contact avec un registrar pour acheter votre nom de
domaine. Le registrar se chargera d'inscrire votre nom de domaine sur les serveurs
DNS du registry (l'AFNIC en France) qui aura donc connaissance de votre nom
de domaine.

Une fois votre nom de domaine acheté chez un registrar, vous devez lui indiquer
les adresses IP de vos serveurs DNS primaires et secondaires.

Il y a deux cas de figure :

 Soit vous voulez gérer vos serveurs DNS vous-même : dans ce cas vous
donnez au registrar l'adresse IP de vos serveurs DNS qui gèrent le domaine
que vous avez acheté.
 Soit vous laissez le registrar gérer votre DNS sur ses serveurs (ce que la
plupart d'entre eux proposent). Dans ce cas vous utilisez en général une
interface web simplifiée fournie par le registrar.

BIBLIOGRAPHIE

[Link]