Programmation Web 2 V2
Programmation Web 2 V2
Niveau : 2
Support de cours
Programmation web II
ENSEIGNANT
Courriel : [email protected]
Objectifs du cours
NB : Les travaux dirigés ou pratiques doivent être remis au début du cours ou envoyés par courrier électro-
nique.
CONTENU DE L’ENSEIGNEMENT
INTRODUCTION
L’accès à l’information, n’est pas du tout une chose facile, compte tenu de la distance séparant
les villes, les structures... L’élaboration de nouvelles technologies, facilite de plus en plus la
visualisation de l’information et surtout la rapidité d’accès à celle-ci qui est le Web. Le Web, ou
World Wide Web (toile d'araignée mondiale) en français, est un système d'information basé sur
l'internet qui permet d'accéder à une vaste quantité de ressources et de documents liés entre eux.
Il a été inventé par Sir Tim Berners-Lee en 1989. Il repose sur le protocole HTTP, les URL,
HTML, CSS et JavaScript. Le Web permet aux utilisateurs de naviguer entre les pages web,
d'accéder à des sites web, de partager des informations et de communiquer en ligne. Il offre une
multitude de services tels que le commerce électronique, les médias sociaux et les applications
web. Le Web est devenu une ressource essentielle pour l'accès à l'information et la communication
à l'échelle mondiale.
I. DEFINITIONS
Une page web est une ressource du WWW (World Wide Web) possédant une adresse et
des données et conçue pour être consultée ou téléchargée par des visiteurs à l’aide d’un navigateur
web. On distingue deux types de page web à savoir les pages web statiques et les pages web
dynamiques.
1. Pages web statiques
On entend par page web statique, non pas une page sans mouvements ou sans animations,
mais une page html visible telle qu’elle a été conçue c’est-à-dire que le contenu d’une page web
statique est à priori identique à chaque consultation. Ces pages peuvent présenter toute forme de
contenus, animations flash, images, musiques, vidéos etc... Mais elles sont toujours présentées de
la même façon. Elles ne changent pas et c’est en ce sens qu’elles sont statiques. En d’autres termes,
le fond (contenu) et la forme (présentation) ne sont pas dissociables.
Figure1: Mécanisme de mise à jour des données dans un site web dynamique.
Front-office : c’est la partie d’un site web accessible aux utilisateurs finaux.
Back-office : c’est la partie d’un site web accessible uniquement à l’administrateur de ce site.
Webmaster : gestionnaire d’un site web.
Une base de données qui sera chargée de stocker les données du site afin de permettre leur
réutilisation. Elle sera manipulée à l’aide du langage SQL ;
Un serveur de données chargé de gérer la base de données ; c’est ce serveur qui donnera la
possibilité d’accéder à la base de données et d’y récupérer les données pour créer
dynamiquement les pages web ;
Un serveur web qui sera chargé d’exécuter les codes PHP pour créer un fichier HTML ;
Le langage PHP qui est le langage de programmation des sites web dynamiques.
Un intranet est un réseau privé utilisé à l'intérieur d'une organisation, tel qu'une entreprise,
une institution ou une organisation gouvernementale.
Il est généralement accessible uniquement aux employés, aux membres ou aux personnes
autorisées de l'organisation.
L'intranet utilise des technologies similaires à celles d'Internet, telles que les protocoles
TCP/IP, les serveurs Web et les navigateurs, mais avec des mesures de sécurité
supplémentaires pour limiter l'accès aux ressources internes.
Il permet aux membres de l'organisation de partager des informations, de collaborer,
d'accéder à des bases de données internes, à des applications spécifiques à l'organisation, à
des documents partagés, à des calendriers, à des outils de communication, etc.
Les intranets peuvent également inclure des portails internes, des forums de discussion,
des outils de gestion des connaissances et d'autres fonctionnalités spécifiques à
l'organisation.
INTRODUCTION
Pour échanger des informations sur le net, un utilisateur a besoin d’effectuer des demandes
sur une machine serveur, et grâce aux protocoles qui régissent les règles de communication sur
internet, cela est possible. Mais avant tout échange, il faudrait au préalable avoir installé et
configuré un serveur web dans une machine. La configuration d'un serveur web est une étape
fondamentale pour héberger et diffuser des sites web et des applications en ligne. Un serveur web
permet de répondre aux requêtes des utilisateurs, de traiter les fichiers et de fournir le contenu
demandé via le protocole HTTP. Ce cours se concentre sur la configuration d'un serveur web en
utilisant WampServer, un logiciel tout-en-un largement utilisé pour héberger et développer des
sites web localement. Nous commençons par l'installation et la configuration de WampServer, en
mettant l'accent sur les composants essentiels tels qu'Apache, MySQL et PHP. La gestion des
bases de données est également abordée en détail, en utilisant l'interface conviviale de
phpMyAdmin pour créer, gérer et manipuler les bases de données MySQL. Nous apprenons à
exécuter des requêtes SQL et à importer/exporter des données. Enfin, nous explorons les
fonctionnalités avancées de WampServer, telles que la configuration de l'interpréteur PHP, l'accès
aux fichiers et répertoires du projet, et l'intégration d'autres technologies web. Ce cours offre aux
développeurs web, débutants ou expérimentés, les connaissances et les compétences nécessaires
pour configurer et utiliser efficacement WampServer comme environnement de
développement web intégré. En suivant les étapes et les bonnes pratiques présentées, les
étudiants seront en mesure de développer, tester et déployer des sites et applications web
localement avec succès.
I. LE SERVEUR WEB
1. Définition
Un serveur est un programme ou une machine qui offre un service à un client en répondant
à des demandes envoyées par ce dernier.
Un serveur web ou serveur HTTP est un logiciel permettant de rendre accessible les pages
web d’un site.
2. Rôle
Un serveur web ou serveur HTTP est un logiciel servant des requêtes respectant le protocole
de communication client/serveur HyperText Transfer Protocol (HTTP), qui a été développé pour
le World Wide Web. Un ordinateur sur lequel fonctionne un serveur HTTP est appelé serveur
Web. Le terme «serveur Web » peut aussi désigner le serveur HTTP (le logiciel) lui-même. Les
deux termes sont utilisés pour le logiciel car le protocole HTTP a été développé pour le Web et
les pages Web sont en pratique toujours servies avec ce protocole. D'autres ressources du Web
comme les fichiers à télécharger ou les flux audio ou vidéo sont en revanche fréquemment servies
avec d'autres protocoles
En tapant l’URL d’un document, l’internaute envoie (via le navigateur) une requête au
serveur;
Une connexion s’établit entre le client et le serveur sur le port 80 (port par défaut d’un
serveur Web);
Le navigateur envoie une requête demandant l’affichage d’un document ;
Le serveur web répond à la requête en envoyant une réponse HTTP (le document demandé
par le client);
Une fois la réponse reçue par le client, la connexion est fermée.
NB : Pour afficher une nouvelle page du site, une nouvelle connexion doit être établie.
serveur qui utilise le protocole TCP/IP pour le transport des données et la connexion entre le client
et le serveur. Un serveur HTTP utilise alors par défaut le port 80. Les clients HTTP les plus connus
sont les navigateurs Web permettant à un utilisateur d’accéder à un serveur contenant les
données.
Le principe de base est une connexion de type client/serveur : un client (le navigateur) se connecte
sur un serveur, émet une requête et le serveur traite la requête en effectuant les opérations
suivantes :
décodage de la requête ;
localisation du fichier web ;
construit la réponse ;
envoie de la réponse au client.
Le schéma suivant donne une illustration du fonctionnement du protocole http dans l’exécution
d’une requête
5. Configuration
La configuration d’un server se fait de manière simple et ce via un seul et unique fichier de
configuration. Le nom du fichier de configuration du serveur web termine le plus souvent par «
.conf » (un fichier texte qui pourra être édité) et est situé dans le répertoire de configuration le
plus souvent portant le nom « configuration » ou « conf ».
Ce fichier contient les principaux éléments pour faire en sorte que notre serveur web tourne sans
encombre en modifiant certains paramètres.
Si l’on ne souhaite pas utiliser le répertoire de base Par défaut (le répertoire racine) du
serveur pour vos documents web, il est possible de le modifier. Pour le faire, il suffit de repérer
le paramètre « DocumentRoot » dans le fichier de configuration ; puis modifier comme ceci :
Ainsi, toutes les pages qui se nomment index.html, index.html, index. php ou index.php5 seront
prises en compte par le serveur web comme page web par défaut d’un site web.
2. Rôle
En fait, le serveur de base de données fait partie d’un système de gestion de base de
données (SGBD). C’est le logiciel qui manipule une base de données et qui permet d’organiser,
de contrôler, de consulter et de modifier les bases de données. Nous en distinguons une
multitude de serveurs de Base de Données.
3. Caractéristiques
En plus des caractéristiques citées dans les SGBD, les serveurs de Base de Données ont pour
caractéristiques :
La rapidité d’accès aux données : c’est le temps mis par un serveur pour retrouver une
données dans une BD ;
La robustesse : elle définit la capacité d’un serveur à résister aux erreurs ;
Le nombre d’utilisateurs : certains serveurs de BD ont la possibilité de gérer
simultanément plusieurs utilisateurs tandis que d’autres n’en ont pas ;
La portabilité : ainsi, nous avons des serveurs qui peuvent être utilisés sur plusieurs
systèmes d’exploitation tandis que d’autres ne le sont que sur un seul système
d’exploitation.
4. Configuration
Comme tout serveur, un serveur de données doit être configuré pour assurer ses
fonctionnalités. La configuration d’un serveur de don- nées consiste à lui attribuer un nom
d’utilisateur ou adresse et un mot de passe qui vous permettra plus tard de vous connecter.
La configuration d’un serveur de données diffère d’un serveur à un autre.
REMARQUE : Une illustration de l’installation d’un serveur web et de données vous sera
présentée dans le cas pratique.
LAMP : est un acronyme qui représente "Linux, Apache, MySQL, PHP". C'est un
ensemble d'outils open source couramment utilisés pour créer un environnement de
développement web sur des systèmes Linux.
I. PRESENTATTION DE PHP
1. Définition
PHP (Personnal Home Page ou Hypertext Preprocessor) est un langage de script HTML, c’est-
à-dire qu’il fonctionne en relation avec le langage HTML (HyperText Markup Language). Il
fonctionne du côté du serveur, et non pas du côté du client, et permet de générer des pages web
Un script est défini comme suit par le jargon Linux France : “Une suite d’instructions simples,
peu structurées, permettant d’automatiser certaines tâches
2. Historique du PHP
Il a été créé, à l'origine, en 1995 par Rasmus Lerdorf, pour compter les passages sur son CV
en ligne. PHP était alors pour «Personnal Home Page Tools». Depuis, la petite bibliothèque de
scripts d'origine a fortement évolué et est devenue un module du serveur Apache, capable de
dialoguer avec de nombreuses bases de données. PHP signifie aujourd'hui «PHP: Hypertext
Preprocessor».
3. Intérêt de PHP
L’avantage par rapport à l’HTML est considérable, puisqu’il est ainsi possible de concevoir des
sites dits dynamiques. C’est-à-dire qu’une page peut changer de contenu sans qu’aucune
intervention humaine ne soit nécessaire. Prenons le cas d’un forum : il est souhaitable que, dès
qu’une personne soumet une question, celle-ci soit disponible sur le site. C’est un cas typique
d’utilisation d’un site Internet dynamique. Le langage PHP permettra alors de créer une page
HTML à partir de ce message (et des autres messages disponibles dans la base de don- nées).
PHP est un langage de script qui s’exécute coté serveur. Ainsi, PHP permet de créer des pages
Web dynamiques.
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Premier programme PHP !</title>
</head>
<body>
<?php
echo 'Hello World !';
?>
</body>
</html>
Le code ci-dessous aura pour effet d'écrire à l'écran : Hello World !
NB : le code PHP s’insère partout dans le code HTML et le fichier qui comporte du code PHP
porte l’extension « .PHP ».
<?php
/*
Ce programme a été écrit par Kouémo Joël
b. Les Variables
Toute variable doit être précédé du signe dollars $ et doit commencer obligatoirement de lettres
(en majuscules ou minuscules) ou d'un underscore (tiret souligné _ ).
<?php
$prenom = 'Hugo'; // Type string (chaine de caractères)
$nom = "Hamon"; // Type string (chaine de caractères)
$age = 19; // Type entier
$estEtudiant = true; // Type booléen
$cours = array('physique','chimie','informatique','philosophie'); // Type tableau
$unEtudiant = new Etudiant(); // Objet de type Etudiant
?>
Pour déclarer une variable de type :
string : on entoure la chaîne de caractères de guillemets ou d'apostrophes.
entier, réel ou flottant : on écrit la valeur telle qu'elle. Pour les flottants, la virgule est remplacée
par un point (écriture à l'américaine).
booléen : on écrit true ou false directement.
sans type : si l'on ne souhaite pas typer la variable, on lui affecte la valeur null.
NB : le type d'une variable n'est pas déclaré explicitement comme en Java, C ou encore C++ mais
implicitement au moment de l'affectation d'une valeur.
De plus, notez que le nom des variables est sensible à la casse en PHP. Cela signifie que l’usage
de majuscules ou de minuscules va créer des variables différentes. Par exemple, les variables
$texte, $TEXTE et $tEXTe vont être des variables différentes.
Enfin, sachez qu’il existe des noms « réservés » en PHP. Vous ne pouvez pas utiliser ces noms
comme noms pour vos variables, tout simplement car le langage PHP les utilise déjà pour
désigner différents objets intégrés au langage. Nous verrons ces différents noms au fil de ce
cours.
types d’opérateurs au fil de ce cours lorsque cela fera le plus de sens (c’est-à-dire lorsqu’on en
aura besoin).
+ Addition
– Soustraction
* Multiplication
/ Division
Exemple :
Nous connaissons déjà bien l’opérateur d’affectation le plus utilisé qui est le signe = .
Cependant, vous devez également savoir qu’il existe également des opérateurs combinés
notamment pour les opérateurs arithmétiques et l’opérateur de concaténation et qui sont les
suivants :
Exemple :
Ce qu’il faut bien comprendre dans l’exemple précédent est que les opérateurs d’affectation
combinés font deux choses à la fois : ils exécutent une opération puis ils affectent une valeur.
Lorsque des opérateurs ont des ordres de priorité égaux, c’est le sens d’association de ceux-ci qui
va décider du résultat. Pour les opérateurs arithmétiques, on a vu que l’association se faisait par
la gauche sauf pour l’élévation à la puissance. Pour les opérateurs d’affectation, l’association se
fait par la droite.
< Permet de tester si une valeur est strictement inférieure à une autre
> Permet de tester si une valeur est strictement supérieure à une autre
<= Permet de tester si une valeur est inférieure ou égale à une autre
>= Permet de tester si une valeur est supérieure ou égale à une autre
Opérateur Définition
La condition if (si) ;
La condition if… else (si… sinon) ;
La condition if… elseif… else (si… sinon si… sinon).
a. La condition if en PHP
La condition if est également la plus simple, puisqu’elle va nous permettre d’exécuter un bloc
de code si et seulement si le résultat d’un test vaut true.
La structure conditionnelle if…else (« si… sinon » en français) va être plus complète que la
condition if puisqu’elle va nous permettre d’exécuter un premier bloc de code si un test renvoie
true ou un autre bloc de code dans le cas contraire.
Les opérateurs logiques AND, &&, OR, || et XOR vont nous permettre de créer des conditions
avec plusieurs comparaisons.
Chaque case d’un switch doit se terminer par une instruction break. Cette instruction
indique au PHP qu’il doit sortir du switch. Sans break, le PHP continuerait à tester les différents
autres case du switch même si un case égal à la valeur de la variable a été trouvé, ce qui ralentirait
inutilement le code et pourrait produire des comportements non voulus.
Enfin, à la fin de chaque switch, il convient d’indiquer une instruction default. Il sert à gérer tous
les autres cas et son code ne sera exécuté que si aucun case ne correspond à la valeur de la variable.
La syntaxe d’une instruction switch va être différente de celle des conditions vues jusqu’ici.
Regardez plutôt l’exemple ci-dessous :
Incrémenter une valeur signifie ajouter 1 à cette valeur tandis que décrémenter signifie
enlever 1.
Les opérations d’incrémentation et de décrémentation vont principalement être utilisées avec les
boucles en PHP. Elles vont pouvoir être réalisées grâce aux opérateurs d’incrémentation ++ et de
décrémentation -- .
Retenez déjà qu’il y a deux façons d’incrémenter ou de décrémenter une variable :
pré-incrémentation et pré-décrémentation : Elles permettent d'augmenter ou de
diminuer la valeur d'une variable d'une unité avant son utilisation dans une expression.
post-incrémentation et de post-décrémentation : Elles permettent d'augmenter ou de
diminuer la valeur d'une variable d'une unité après son utilisation dans une expression.
Le tableau ci-dessous présente les différentes façons d’utiliser les opérateurs d’incrémentation et
de décrémentation ainsi que le résultat associé :
Exemple Résultat
++$x Pré-incrémentation : incrémente la valeur contenue dans la variable $x, puis retourne
la valeur incrémentée
$x++ Post-incrémentation : retourne la valeur contenue dans $x avant incrémentation, puis
incrémente la valeur de $x
--$x Pré-décrémentation : décrémente la valeur contenue dans la variable $x, puis
retourne la valeur décrémentée
$x-- Post-décrémentation : retourne la valeur contenue dans $x avant décrémentation,
puis décrémente la valeur de $x
Prenons immédiatement un exemple concret pour illustrer les différences entre pré et post
incrémentation ou décrémentation.
Les boucles vont nous permettre d’exécuter plusieurs fois un bloc de code, c’est-à-dire
d’exécuter un code « en boucle » tant qu’une condition donnée est vérifiée.
Lorsqu’on code, on va en effet souvent devoir exécuter plusieurs fois un même code. Utiliser
une boucle nous permet de n’écrire le code qu’on doit exécuter plusieurs fois qu’une seule fois.
Nous allons ainsi pouvoir utiliser les boucles pour parcourir et afficher plusieurs valeurs un
une seule instruction, comme par exemple récupérer la liste des produits achetés dans une
commande, afficher le prénom de tous les utilisateurs de notre site, récupérer des valeurs jusqu’à
un certain point donné dans une variable tableau, etc.
Nous disposons de quatre boucles différentes en PHP :
La boucle while (« tant que ») ;
La boucle do… while (« faire… tant que ») ;
La boucle for (« pour ») ;
La boucle foreach (« pour chaque ») ;
Le fonctionnement général des boucles sera toujours le même : on pose une condition qui sera
généralement liée à la valeur d’une variable et on exécute le code de la boucle « en boucle » tant
que la condition est vérifiée.
La boucle while (« tant que » en français) est la boucle PHP la plus simple à appréhender.
La boucle while va nous permettre d’exécuter un certain bloc de code « tant qu’une » condition
donnée est vérifiée.
Voyons immédiatement la syntaxe de cette boucle que je vais détailler par la suite :
La boucle PHP do… while (« faire… tant que » en français) ressemble à priori à la boucle
while mais va fonctionner « en sens inverse » par rapport à while.
En effet, la boucle PHP do… while va également nous permettre d’exécuter un code tant
qu’une condition donnée est vraie, mais cette fois-ci le code dans la condition sera exécuté avant
que la condition soit vérifiée.
Ainsi, même si une condition est fausse dès le départ, on effectuera toujours au moins un
passage au sein d’une boucle do…while, ce qui n’est pas le cas avec une boucle while.
La boucle PHP for (« pour » en français) est plus complexe à appréhender à priori que les
boucles précédentes.
Cependant, cette boucle est très puissante et c’est celle qui sera majoritairement utilisée dans
nos scripts PHP, faites donc l’effort de comprendre comment elle fonctionne.
Nous pouvons décomposer le fonctionnement d’une boucle for selon trois phases :
Une phase d’initialisation ;
Une phase de test ;
Une phase d’incrémentation.
Voyons immédiatement comment cette boucle va fonctionner en prenant un exemple concret :
La boucle PHP foreach est un peu particulière puisqu’elle a été créée pour fonctionner avec des
variables tableaux, qui sont des variables spéciales que nous n’avons pas encore étudiées.
Nous étudierons donc le fonctionnement de cette boucle en même temps que le type de valeur
PHP array (« tableau » en français).
Les tableaux en PHP sont des variables spéciales qui peuvent stocker plusieurs valeurs en
même temps.
Dans un tableau, chaque valeur va être associée à une clef unique. Cette clef va nous
permettre notamment de récupérer la valeur associée.
Les tableaux, aussi appellés arrays en anglais, sont des types de données structurés permettant
de grouper des informations ensemble.
Des tableaux numérotés ou indexés (les clefs vont être des nombres) ;
Des tableaux associatifs (nous allons définir la valeur que l’on souhaite pour chaque clef) ;
Des tableaux multidimensionnels (tableaux qui stockent d’autres tableaux en valeur).
Pour créer un tableau, on peut soit utiliser la structure de langage array(), soit le nouvelle
syntaxe plus courte [].
La première chose à comprendre ici est que toutes les données du formulaire vont être
envoyées et être accessibles dans le script PHP mentionné en valeur de l’attribut action, et
cela quelle que soit la méthode d’envoi choisie (POST ou GET).
En effet, le PHP possède dans son langage deux variables superglobales $_GET et
$_POST qui sont des variables tableaux et dont le rôle va justement être de stocker les données
envoyées via des formulaires.
Plus précisément, la superglobale $_GET va stocker les données envoyées via la méthode
GET et la variable $_POST va stocker les données envoyées via la méthode POST.
La seule et unique différence entre les instructions « include » et « require » va se situer dans
la réponse du PHP dans le cas où le fichier ne peut pas être inclus pour une quelconque raison.
Dans ce cas-là, si l’inclusion a été tentée avec « include », le PHP renverra un simple
avertissement et le reste du script s’exécutera quand même tandis que si la même chose se produit
avec « require », une erreur fatale sera retournée par PHP et l’exécution du script s’arrêtera
immédiatement.
Pour utiliser nos propres fonctions, nous allons déjà devoir les définir, c’est-à-dire préciser
une première fois la série d’instructions que chaque fonction devra exécuter lors de son appel.
Pour déclarer une fonction, il faut déjà commencer par préciser le mot clef function qui
indique au PHP qu’on va définir une fonction personnalisée. Ensuite, nous allons devoir préciser
le nom de notre fonction.
1. mysqli_connect( )
C’est une fonction MySQL qui permet d’établir une connexion au serveur de base de données
MySQL. Elle comporte 04 paramètres à savoir : le nom du serveur, le nom d’utilisateur de la
base de donnée, le mot de passe du serveur de donnée et enfin le nom de la base de donnée
Si la connexion est établie avec succès, elle renvoie un identificateur de ressource de
connexion à la base de données.
Si la connexion rencontre un échec, elle génère simplement une erreur.
2. mysqli_select_db( )
Fonction MySQL qui permet de sélectionner la base de données à utiliser ou de modifier la
base de données par défaut. Elle prend en paramètre la connexion et le nom de la BD
3. mysqli_query()
Cette fonction MySQLi exécute ou exécute la requête sur la base de données donnée. Elle
permet de créer une requête de sélection, d’ajout, de modification ou de suppression.
Elle a pour paramètre la connexion et la requête SQL
4. mysqli_close()
Cette fonction MySQLi permet de fermer une base de données précédemment connectée.
Cette fonction renverra TRUE en cas de fermeture réussie, sinon elle retournera FALSE.
5. mysqli_fetch_array()
La fonction MySQLi ci-dessus est utilisée pour récupérer une ligne sous forme de tableau
associatif, numérique ou les deux types de tableau à partir du jeu de résultats.
6. mysqli_fetch_row()
La fonction MySQLi ci-dessus est utilisée pour récupérer une ligne du jeu de résultats sous
la forme d’un tableau énuméré. Chaque appel à la fonction ci-dessus renverra la ligne suivante
du jeu de résultats. Si aucune ligne n’est récupérée, elle renvoie FALSE.
7. mysqli_num_rows() et mysqli_field_count()
La fonction mysqli_num_rows() est utilisée pour renvoyer le nombre de lignes du jeu de
résultats.