Université Paris 1 Panthéon Sorbonne 1 / 13

Ecole de Management de la Sorbonne

Enseignement : Informatique

Fiche de TD – Sites Web Dynamiques avec PHP

Démarrage
Afin de pouvoir pratiquer le PHP, il vous faut un serveur Web. On peut transformer n’importe quel
ordinateur en serveur Web à condition d’avoir installé les bons logiciels. Des multiples alternatives existent,
autant pour la plateforme Windows (UwAmp,
Wamp, Mov’Amp, EasyPHP), que pour la
plateforme Mac (Mamp). Ces logiciels installent sur
les machine non seulement un serveur Web, mais
également PHP et même MySQL. Dans les salles
machines, nous avons installé UwAmp. Il faut donc
le démarrer avant de commencer cette fiche de TD.

Une fois démarré, UwAmp ouvrira une fênetre de contrôle (image en haut à droite) et se mettra en
exécution en arrière plan (indiqué par l’icône à côté de l’horloge).

A partir de la fênetre de contrôle, nous allons pouvoir accèder au dossier « www », où doivent se trouver
les pages pour notre site. En cliquant sur le bouton « www Dossier », UwAmp nous ouvrira le dossier
c:\UwAmp\www, qui est le dossier utilisé par défaut dans nos salles de TDs. C’est dans ce dossier qu’on
enregistrera les pages qu’on réalisera tout au long de cette fiche.
 Université Paris 1 Panthéon Sorbonne 2 / 13
Ecole de Management de la Sorbonne
Enseignement : Informatique

Pour éditer nos pages Web (HTML, CSS et PHP), nous allons utiliser « Notepad++ », que nous avons déjà
utilisé pour les fiches d’exercices sur HTML et CSS. Les pages PHP doivent ainsi être enregistrées dans le
dossier www (indiqué ci-dessus) pour que le serveur Web UwAmp puisse les interpréter. A titre d’exemple,
nous allons donc d’abord créer une première page PHP (voir image ci-dessous) que nous allons enregistrer
dans ce dossier « c:\UwAmp\www » sous le nom « premier.php ». Attention à bien enregistrer la page au
format PHP (et non TXT).

Une fois enregistrée sur notre serveur local, notre page est accessible par le Web :
http://localhost/premier.php
 Université Paris 1 Panthéon Sorbonne 3 / 13
Ecole de Management de la Sorbonne
Enseignement : Informatique

Exercices :
1) Dans une boutique de vêtements, on souhaite appliquer une remise de prix en fonction de la
valeur total des achats. Pour plus de 50€ en achat, on souhaite offrir aux clients une remise de
10%. Pour plus de 100€ d’achat, on lui offrira une remise de 20%, alors que pour plus de 150€
d’achats, on offrira 25%. Construire une page Web permettant à un client d’indiquer le montant
de ses achats et de savoir ainsi le montant qu’il aura en remise.

Dans cet exercice, nous allons implémenter un des algorithmes que nous avons réalisé lors de la Fiche n° 3.
Pour le réaliser, nous avons besoin d’une valeur en entrée correspondant au montant total d’achats. On va
donc devoir demander à l’utilisateur de nous fournir cette valeur. Pour interagir avec notre utilisateur, nous
allons lui proposer un formulaire très simple, où il pourra renseigner ce montant. Nous allons donc
démarrer l’exercice par la création d’un formulaire en HTML comme celui-ci.

Pour faire notre formulaire, nous allons donc

créer un document .html que nous allons
enregistrer dans notre serveur Web (sur le
fameux dossier « c:\UwAmp\www »).

Cette page Web devra contenir, en

plus des balises traditionnelles (html,
head, body…), une balise spécial, la
balise form, qui sert à construire un
formulaire.

Deux informations sont essentielles à

un formulaire : la méthode et l’action.
L’action (action=…) indique à qui les
données récoltées dans le formulaire
seront transmises, alors que la
méthode (method=…) indique au
navigateur comment il doit transférer
ces données. L’action va donc indiquer la page PHP qui devra traiter ces données (donc, celle qui
implémentera notre algorithme). Pour la méthode, deux méthodes sont possibles, le GET et le POST. Nous
allons utiliser la méthode POST.

Pour l’entrée des données, nous allons proposer à l’utilisateur un champ texte à remplir et un bouton. Tous
les deux sont représentés par une balise « input » : <input type="text" … » pour le champ de texte et
<input type="submit" … » pour le bouton. Très important : notre champs texte devra aussi avoir un nom
(<input type="text" name="montant" />) qui va nous permettre après de récupérer les données que
l’utilisateur aurait rempli à l’intérieur
 Université Paris 1 Panthéon Sorbonne 4 / 13
Ecole de Management de la Sorbonne
Enseignement : Informatique

Une fois terminé notre formulaire, on va pouvoir se concentrer sur notre page PHP. Pour commencer, nous
allons créer une nouvelle page et l’enregistrer sur le dossier dossier « c:\UwAmp\www. Attention à
l’enregistrer avec le même nom que nous avons indiqué dans « form action="…" » de notre formulaire.

Comme on peut voit dans l’image ci-contre, une

page PHP est une page Web où on introduit des
morceaux de code PHP. Ceux-ci sont délimités
par la balise spécial « < ?php …. > ».

Dans un premier moment, nous allons

simplement récupérer les informations de notre
champ de texte « montant ». Puisque, dans
notre formulaire, nous avons indiqué la méthode
POST (method="post"), les données seront
disponibles pour nous dans le tableau associatif
$_POST. On récupérer les informations et les
stocker dans une variable (« $mont ») :

$mont = $_POST["montant"] ;

Puis on va afficher ce montant à l’aide de

l’instruction « echo » :

echo "<p> Montant = $mont </p> ";

Ce qui va nous donner une sortie comme celle à côté, si on

met la valeur « 5 » dans notre formulaire et qu’on clique
sur « calculer ».

if ($mont >= 150) {

Il nous reste qu’à terminer notre code, suivant l’algorithme
$remise = $mont * 0.25 ;
que nous avons défini dans la fiche n° 3. Celui-ci était composé
}
elseif ($mont >= 100) { par une séquence de tests « Si … Sinon Si… Sinon » qu’on va
$remise = $mont * 0.20 ; reproduire en PHP à l’aide de l’instruction « if … elseif … else
} … », suivant ce que nous avons vu en cours.
elseif ($mont >= 50) {
$remise = $mont * 0.10 ; Puis, nous allons conclure en affichant, à l’aide de l’instruction
} « echo », la valeur de remise que nous venons de calculer.
else {
$remise = 0;
}
echo "<p> remise = $remise </p>";
 Université Paris 1 Panthéon Sorbonne 5 / 13
Ecole de Management de la Sorbonne
Enseignement : Informatique

2) Rédiger un formulaire HTML qui demande à l’utilisateur son salaire mensuel. Rédiger une page
PHP qui, à partir des informations fournies par l’utilisateur dans le formulaire, indiquer à
l’utilisateur quelle la tranche d’imposition qui convient à ses revenus. Les barèmes d’imposition
sont indiqués dans la table ci-dessous.

Tranches de revenus et taux applicables aux revenus 2011 (impôt 2012)

jusqu’à 5 963 € 0%

de 5 963 € à 11 896 € 5,5 %

de 11 896 € à 26 420 € 14 %

de 26 420 € à 70 830 € 30 %

plus de 70 830 € 41 %

<form action="fichePHP-1.php" method="post">

...
Comme pour l’exercice précédent, pour faire cet
<label>Votre salaire mensuel : </label>
exercice, il faudra construire à la fois une page HTML <input type="number" name="salaire" />
contenant un formulaire comme celui illustré par la <br/>
figure ci-dessus, et une page PHP qui réalisera les ...
<input type="submit" value="Calculer" />
« calculs » (en occurrence, analyser la valeur indiquée
<input type="reset" value="Restaurer"/>
pour le salaire). On a donc deux fichiers à faire, un </form>
.html (disons « fichePHP-1.html ») et un .php
(appelons-le « fichePHP-1.php »). < ?php
...
Pour réaliser le formulaire dans la page HTML, on utilisera à $salaire = $_POST["salaire"] ;
nouveau la balise « form », laquelle contiendra au moins un ...
if ( $salaireAnnuel < 5963 )
champ d’entrée (balise « input ») pour que l’utilisateur indique { $tranche = 0; }
son salaire. Cette information sera reprise par la page PHP. Le lien elseif ( $salaireAnnuel < 11896 )
entre la page HTML contenant le formulaire et la page PHP se fait { $tranche = 5.5; }
...
dans la balise « form » à travers son attribut « action ».
else
{ $tranche = 41; }
Dans la page PHP, nous allons récupérer les données remplies par
. . . ?>
l’utilisateur dans le formulaire. Pour cela, on utilisera à nouveau le
tableau « $_POST » (puisqu’on a indiqué la méthode « post » dans la balise « form »). La valeur de chaque
champ du formulaire est accessible à travers ce tableau associatif par son nom (par exemple, pour un
 Université Paris 1 Panthéon Sorbonne 6 / 13
Ecole de Management de la Sorbonne
Enseignement : Informatique

champ nommé « salaire », on fera $_POST["salaire"] ). Une fois qu’on aura récupéré le contenu du champ
« salaire », on pourra alors calculer la valeur du salaire annuel ($salaire * 12), puis le tester à l’aide de
l’instruction « if » afin de connaître dans quelle catégorie de salaire notre salarié se trouve.

3) Réaliser une calculette simple (avec les quatre opérations de base : +, -, * et / ) à l’aide des
langages HTML/CSS et PHP.

Comme pour l’exercice précédent, nous allons faire deux

<form action="fichePHP-2.php" method="post">
fichiers, un .html (« fichePHP-2.html », par exemple) et ...
un .php (« fichePHP-2.php »). Une calculette peut être <input type="number" name="op1" />
réalisée à l’aide d’un formulaire très simple, avec les deux <input type="radio" name="operateur"
value="+" checked /> +
champs pour les opérants (balise « input » de type <input type="radio" name="operateur"
« number ») et des boutons de type « radio » (balise value="-"/> -
« input » de type « radio ») pour chacune des opérations. ...
<input type="submit" value="Calculer" />
Dans notre page PHP (« fichiePHP-2.php »), nous allons </form>
devoir récupérer ces informations à partir du tableau
associatif « $_POST », comme pour l’exercice précédent. Nous allons faire, par exemple,
« $_POST["op1"] » pour récupérer le contenu du champ « op1 », et « $_POST["operateur"] pour connaître
l’opérateur choisi par l’utilisateur.

Une fois en possession de ces informations (les opérants et $operateur = $_POST["operateur"];

l’opérateur choisi), il nous suffit de tester, à l’aide des $op1 = $_POST["op1"];
instructions « if … elseif … else », quel a été l’opérateur choisi ...
if ( $operateur == '+' )
et donc réaliser l’opération correspondante. { $res = $op1 + $op2; }
elseif ($operateur == '-' )
...
echo "<p>$op1 $operateur $op2 = $res </p>";
 Université Paris 1 Panthéon Sorbonne 7 / 13
Ecole de Management de la Sorbonne
Enseignement : Informatique

4) Une banque en ligne offre un nouvel investissement de type épargne, le Livret Alpha+, lequel
offre pendant les 3 premières années un taux de 2% à l’an et de 1,5% pour les années suivantes.
Construire un formulaire et une page PHP qui, à partir d’un montant initial renseigné par le
client, montrent au client une prévision de ses gains pour les 8 prochaines années.

Comme pour les exercices précédents, dans

celui-ci, nous allons construire une page HTML
(comme celle illustrée ci-dessus à gauche) et
une page PHP. La page HTML contiendra le
formulaire dans lequel le client renseignera le montant initial. La procédure est la même que pour les
exercices 1 et 2 : on créera un formulaire à l’aide de la balise « form », dans lequel on ajoutera au moins un
champ (balise « input ») pour le montant. Ce formulaire fera appelle à la page PHP que nous allons créer
(« fichePHP-3.php ») à travers l’attribut « action » de la balise « form ».

Dans la page PHP, nous allons à nouveau implémenter un

$montant = $_POST["montant"] ;
algorithme que nous avons proposé dans la fiche n° 3. Plusieurs
...
solutions existent, mais elles auront toutes d’abord besoin de $taux = 0.02;
récupérer les informations renseignées par le client, et for ($i=1 ; $i <= 3 ; $i++) {
notamment le montant initial, à l’aide du tableau associatif $rend = $montant * $taux;
$montant = $montant + $rend;
« $_POST », exactement comme nous l’avons fait dans ...
l’exercice 1 (« $_POST["montant"] »). }

Ensuite, on devrait utiliser au moins une boucle pour pouvoir incrémenter ce montant initial d’un
rendement selon un taux fixe 2% pendant 3 ans, puis de 1,5% pendant les 5 années suivantes. Par exemple,
on peut faire une première boucle (une boucle « for », par exemple), qui va nous permettre de répéter une
même opération (le fait d’incrémenter le montant), pour les 3 premières années. Puis, on peut faire
exactement la même chose pour les 5 années suivantes, ce qui implique une nouvelle boucle, mais cette
fois-ci, de l’année 4 à l’année 8 (« for ($i=4; $i<=8; $i++) ») avec une valeur de taux de 1,5% (« $taux =
0.015; »). Il s’agit d’une solution possible. A vous d’expérimenter d’autres solutions… J
 Université Paris 1 Panthéon Sorbonne 8 / 13
Ecole de Management de la Sorbonne
Enseignement : Informatique

5) A l’aide de l’outil phpMyAdmin (accessible à partir de la fenêtre de contrôle UwAmp), créer une
base « Produits » contenant une table « Produit » avec les données indiquées ci-dessous.

Produit (code , nom , description, prix )

code nom description prix
(Int PRIMARY KEY (Varchar 25) (Varchar 50 NULL) (Float)
Auto-Incrément)
1 Autocollant Autocollant au symbole du club 15,00
2 T-shirt Official T-shirt official du club 35,00
3 T-shirt baby-look T-shirt au symbole du club, modèle féminin 25,00

Pour faire cet exercice, nous allons devoir créer une

nouvelle base de données dans notre serveur local. Pour
cela, nous allons utiliser l’outil « phpMyAdmin » qui est
disponible à partir de la fenêtre de contrôle UwAmp (voir
figure ci-contre).

L’outil phpMyAdmin nous permet de créer des nouvelles bases de données et d’y ajouter de nouvelles
tables et des nouvelles données. Pour créer une nouvelle base, il faut cliquer sur « Bases de données »,
puis renseigner le nom de la nouvelle base (« Produits » dans notre cas).

Une fois la base créé, nous allons pouvoir y

ajouter la table « Produit », et avec elle, chacun
de ses champs.
 Université Paris 1 Panthéon Sorbonne 9 / 13
Ecole de Management de la Sorbonne
Enseignement : Informatique

A_I : Auto-Incrément

Puis, en cliquant sur « insérer », nous allons pouvoir y insérer les données demandées. En cliquant sur
« afficher », nous allons pouvoir vérifier après si nos données ont bien été insérées.
 Université Paris 1 Panthéon Sorbonne 10 / 13
Ecole de Management de la Sorbonne
Enseignement : Informatique

6) Toujours à l’aide de l’outil phpMyAdmin, modifier les privilèges de la base de données

« Produits » afin de lui ajouter un nouvel utilisateur nommé « php » avec, pour mot de passe
« php ».

La création d’un utilisateur est possible à partir du lien « privilèges » qui apparaît une fois qu’on clique sur
la base de données. A partir de là, nous allons pouvoir ajouter un nouvel utilisateur.

Lors de la création de notre utilisateur

« php », nous allons pouvoir lui attribuer tous
les droits sur l’ensemble de la base de
données « Produit ». A ne pas oublier
d’indiquer que l’accès à cette base est
« local » (puisque le serveur qui héberge la
base de données et le même qui héberge les
pages PHP).
 Université Paris 1 Panthéon Sorbonne 11 / 13
Ecole de Management de la Sorbonne
Enseignement : Informatique

7) Une fois les exercices 4 et 5 réalisés, créer une page PHP capable de se connecter à la base de
données « Produits », utilisant l’utilisateur et le mot de passe que vous venez de créer, et de
lister l’ensemble de produits présents dans la base de données. Vous pouvez utiliser pour cela la
requête SQL « SELECT * FROM Produit ».

Dans cet exercice, nous allons créer une page

PHP capable se connecter à la base de
données « Produits » que nous venons de
créer afin d’y récupérer les informations de
la table « Produit ».

La première étape consiste donc à se

connecter à la base de données utilisant
l’utilisateur que nous venons de créer (user
« php », mot de passe « php »). Pour se
connecter, nous avons besoin de connaître
non seulement les informations de
l’utilisateur, mais également le nom du serveur (« localhost »
pour nous) et de la base de données (« Produits » dans notre //données pour la connexion à la BdD
$host = "localhost";
cas). Nous pouvons garder ces informations dans des variables.
$user="php";
$password="php";
Une fois en possession de ces informations, nous allons pouvoir $database = "Produits";
nous connecter à l’aide d’un objet de la classe « mysqli ». //connexion à la BdD
Puisque toute connexion n’est pas forcément réussie (le serveur $mysqli = new mysqli($host, $user,
$password, $database);
peut être éteint, ou on peut simplement oublier de démarrer
Uwamp J), il est de important de tester si la connexion s’est correctement effectuée. Pour cela, nous
allons utiliser un test « if » : le test « if ($mysqli->connect_errno) » nous permet de savoir s’il y a eu un
problème de connexion. Si c’est le cas, le mieux est d’arrêter l’exécution de la page PHP grâce à la fonction
« die ».
if ($mysqli->connect_errno) {
Maintenant que nous avons la connexion avec la base de die ("Echec lors de la connexion "
. $mysqli->connect_error);
données établie, nous allons pouvoir lui soumettre une requête
}
pour récupérer les informations sur les produits. La requête SQL
« select * from Produits » nous permet ceci. Pour la soumettre à
$sql = "SELECT * FROM Produit" ;
la base de données, nous allons utiliser l’opération « query » de
l’objet « mysqli » (« $mysqli->query »). $resultat = $mysqli->query($sql);

Une fois en possession des résultats de la requête, nous allons pouvoir les afficher dans un tableau (un
« echo " <table> " ; » nous aidera pour cela). Ces résultats incluent non seulement les données (nos
produits), mais aussi les noms des colonnes (attributs) de la table « Produit ». Nous allons donc pouvoir
récupérer les noms des colonnes pour les afficher dans notre
$titres = $resultat -> fetch_fields() ;
tableau. Ceci est possible à travers l’opération « fetch_fields » de foreach ($titres as $colonne) {
l’objet $resultat (« $resultat -> fetch_fields() ; »). Cette echo "<th> "
opération nous retournera un tableau associatif que nous allons . $colonne->name . " </th>" ;
}
parcourir à l’aide d’une boucle « foreach ».
 Université Paris 1 Panthéon Sorbonne 12 / 13
Ecole de Management de la Sorbonne
Enseignement : Informatique

Après avoir affiché les noms de colonnes, nous pouvons nous concentrer sur les données proprement
parlées. Nous allons récupérer ligne à ligne (c’est-à-dire, produit à produit), à l’aide de l’opération
« fetch_object » de l’objet $resultat dans une boucle (« while ( $ligne = $resultat->fetch_object() ) »).
Cette opération nous retournera un objet dont les
attributs correspondent aux colonnes de la table Produit. while ($ligne = $resultat->fetch_object()) {
echo "<tr>" ;
Nous pouvons ainsi utiliser une boucle « foreach » pour
//on récupère chaque attribut de la ligne
récupérer la valeur de chacun de ces attributs (« foreach foreach ($ligne as $colonne=>$val) {
($ligne as $colonne=>$val) »). echo "<td> " . $val . " </td>" ;
}
Une fois les données récupérées et affichées, nous echo "</tr>" ;
pouvons fermer la connexion que nous avions ouvert tout }

au début (« $mysqli->close(); »).

8) Construire un formulaire HTML et une page PHP permettant à un utilisateur de insérer un

nouveau produit dans la base de données.

<form action="fichePHP-7.php" method="post">

Dans cet exercice, nous aurons besoin de construire <label>Code produit</label>
<input type="number" name="code" /> <br/>
une page HTML contenant un formulaire qui nous ...
permettra de renseigner les données du nouveau <input type="text" name="nom" maxlength="25" />
produit. Nous devons avoir ainsi un champs pour ...
chaque attribut de la table « Produit ». <input type="text" name="prix" maxlength="10" />
<br/>
<input type="submit" value="Calculer" />
Ces informations seront récupérées par la page
<input type="reset" value="Restaurer"/>
PHP, toujours à l’aide du tableau associatif </form>
« $_POST ». Puisque nous allons utiliser celles-ci
pour créer un nouveau produit, nous devrons vérifier si toutes les informations nécessaires (et notamment
le nom et le prix) ont bien été remplies. Ceci se fera à l’aide d’un test « if » et de la fonction « empty ».
Nous pouvons aussi tester si la valeur renseignée pour le prix est bel et bien un numéro (et pas un texte) à
l’aide de la fonction « is_numeric », ce qui nous donne le test suivant « if (empty($nom) OR empty($prix)
OR !is_numeric($prix) ) ».
 Université Paris 1 Panthéon Sorbonne 13 / 13
Ecole de Management de la Sorbonne
Enseignement : Informatique

Une fois en possession de toutes les informations $code = $_POST["code"];

nécessaires, nous allons pouvoir les insérer dans la base de $nom = $_POST["nom"];
données. Pour le faire, la procédure est très similaire à celle $descr = $_POST["descr"];
$prix = $_POST["prix"];
réalisée dans l’exercice précédent. Comme dans l’exercice
précédent, nous allons ouvrir une connexion à l’aide d’un //on vérifie qu'on a les données
objet « mysqli ». Puis, nous allons lui soumettre une if (empty($nom) OR empty($prix)
requête. Celle-ci sera une requête d’inclusion : OR !is_numeric($prix) ) {
echo "<p> Impossible de créer un nouveau
$sql = "INSERT INTO Produit (code, nom, description, prix) produit </p>";
}
VALUES ( $code, '$nom', '$descr', $prix); else {
// si on n'a pas une valeur pour le code,
Pour soumettre cette requête, nous allons utiliser, comme //on laisse l'auto-increment en choisir une.
dans l’exercice précédent, l’opération « query » de l’objet if ( empty($code) ) { $code = '\N'; }
$mysqli : « $resultat = $mysqli->query($sql); ». ... }

$mysqli = new mysqli($host, $user, $password, $database);

if ($mysqli->connect_errno) { Pour être sûr que notre requête a bien marché

die ("Echec lors de la connexion : " (et donc que le nouveau produit a été introduit
. $mysqli->connect_error); dans la base de données), nous allons tester
}
l’objet « $resultat ». Les requêtes « INSERT »
$sql = "INSERT INTO Produit ( code, nom, description, prix) retournent vrai (ou faux) selon si elles ont
VALUES ( $code, '$nom', '$descr', $prix );" ; réussit pas. Nous pouvons donc tester la valeur
de $resultat avec un « if » : « if (! $resultat ) ».
$resultat = $mysqli->query($sql);

if (! $resultat ) {
echo "<p>Impossible de créer le produit $nom. </p>" ;
}
else {
//on recupere le dernier id utilisé pour le code
$code = $mysqli->insert_id;
echo "<p> Nouveau produit : $code $nom
$descr $prix </p>" ;
}