TD2 - PHP : Introduction
Objectifs
L’objectif de ce TD est de faire les premiers pas avec le langage de script PHP (Hypertext Preprocessor). Le nom du préproceseur vient du fait que, avant que vos pages web soient lus par le navigateur, une étape de préprocès va exécuter les instructions PHP et générer des pages web (en HTML5).
Sur le ordinateurs du CREMI, tout est déjà installé. Si vous voulez travailler sur vos propres ordinateurs (sous Windows ou MacOS), installez le logiciel MAMP (un environnement de développement du serveur web local). Vous avez des liens profonds pour MAMP sur le site du cours. Notez que nous utilisons MAMP qui est gratuit, et non pas MAMP pro. (Alternativement, vous pouvez aussi utiliser Xammp ou Wampserver64, mais je vous conseille pour l’instant MAMP).
Vous devrez maintenant identifier le dossier pour mettre vos fichiers :
Sur les postes informatiques des salles au CREMI, c’est votre dossier
espaces/www/
.Sous Windows avec MAMP, c’est
C:\htdocs
, et avec WAMPserver, c’estC:\wampserver64\www
.
- Sous MacOS avec MAMP, par défaut, c’est
/Applications/MAMP/htdocs
Préparation
Si vous ne l’avez pas encore fait, dans ce dossier identifié, créez un dossier cswd
, et copiez vos dossiers td1
du TD précédent dans ce dossier.
Si vous travaillez sur les postes informatiques des salles
Repérez votre dossier espaces/www
dans votre arborescence. Si vous ne l’avez pas encore fait, créez un dossier td2
à cet endroit (c’est votre lecteur réseau avec vos documents).
Voici votre arborescence :
espaces/
└── www/
└── cswd/
└── td1/
└── ...
└── td2/
Si vous travaillez sur vos propres ordinateurs :
Créez un dossier td2
dans votre dossier cswd
.
Voici votre arborescence résultante (Windows) :
C:\
└── MAMP/
└── cswd/
└── td1/
└── ...
└── td2/
Voici votre arborescence résultante (MacOS) :
/Applications/
└── MAMP/
└── cswd/
└── td1/
└── ...
└── td2/
Pour la suite de ce TD, pour que le préprocesseur puisse marcher, respectez les consignes suivants :
- Les extensions des fichiers doivent être toujours .php
- Dans le navigateur, l’URL commence toujours par
http://
et non pas parfile://
- Si vous travaillez sur vos propres ordinateurs avec un environnement de développement du serveur web local, comme par exemple MAMP, vérifiez que votre serveur Apache (donc MAMP) est bien démarré.
PHP : Introduction au langage PHP
Exercice 2.1 “Hello World” en PHP : Instruction echo
Dans cet exercice, vous allez établir votre premier document PHP dynamique.
- Ouvrir votre éditeur de texte (p.ex. VSCode), et dans Open Folder, vous sélectionnez votre dossier
cswd
. Dans votre dossiertd2
, créez un nouveau fichier que vous appelezhelloworld.php
. Tapez le code suivant et enregistrez-le.
Fichier PHP (helloworld.php
):
<?php
echo "Hello World";
?>
- le nom du fichier a une extension .php !
- le code PHP se trouve toujours entre les balises
<?php
et?>
Ouvrir votre page en allant sur votre page web personnel. Vous pouvez la connaître en vous connectant sur https://services.emi.u-bordeaux.fr/intranet/mesinfos/ :
https://prenom-nom.emi.u-bordeaux.fr/cswd/td2/helloworld.php
Si vous travaillez sur votre propre ordinateur, c’est
http://localhost/cswd/td2/helloworld.php
ou alors, selon, la configuration
http://localhost:8888/cswd/td2/helloworld.php
Avec MAMP, vous pouvez aussi aller sur “Ouvrir la page Webstart”, puis en haut, “mon site web”, et ajoutez le chemin relatif au dossier. Dans les nouvelles versions de MAMP, pour faire apparaître ce lien dans la page Webstart, dans les réglages, il faut mettre
/cswd
dans “My favorite link”.Faites afficher le code source de votre page dans votre navigateur (pour Firefox c’est Affichage− >Code source de la page ou bien
CTRL-U
et comparez-le au contenu de votre fichierhelloworld.php
de votre éditeur de texte. Qu’observez vous ?
- Notez que dans la syntaxe PHP, chaque instruction termine par un point-virgule (sauf s’il y a un bloc d’instruction en suivant, comme on le verra plus tard).
- Notez que l’instruction
echo
est couramment utilisé au lieu de l’instructionprint
qui existe aussi en PHP. - Pour l’instant, il manque les balises HTML5 (
<DOCTYPE html>
,<html>
,<body>
….). Nous les insérerons dans le prochain td3 (et dans les exercices optionelles de ce td2). Dans ce td2, il s’agit surtout d’apprendre d’abord le langage PHP seul.
Exercice 2.2 Manuel PHP
Pour apprendre et approfondir le langage PHP, il existe une ressource officielle extrêmement utile à l’URL suivant (qui est d’ailleurs lui-même un site web dynamique communautaire créé en PHP) : https://www.php.net/manual/fr/index.php
- Ouvrez le manuel PHP votre navigateur, et dans la barre de recherche en haut à droite, cherchez l’instruction echo. Regardez les exemples sur cette page de echo.
Exercice 2.3 PHP dynamique : Variables chaines (string)
- Créer un nouveau fichier
variables-chaines.php
dans votre dossiertd2
avec votre éditeur de texte, et tapez le code suivant qui affecte une variable à une chaîne de caractères, et affiche son contenu :
Fichier PHP (variables-chaines.php
):
<?php
$nom = "Sarah";
echo "Bonjour ".$nom;
/* Ceci est un commentaire
sur plusieurs lignes */
// Un commentaire sur une ligne
?>
Ouvrir la page à l’adresse suivant : https://prenom-nom.emi.u-bordeaux.fr/cswd/td2/variables-chaines.php (ou bien http://localhost/cswd/td2/variables-chaines.php sur vos propres ordinateurs).
Faites afficher le code source de votre page dans votre navigateur et comparez-le au contenu de votre fichier
variables-chaines.php
dans votre éditeur de texte.
- Notez que la concatenation de chaîne de caractères se fait avec le signe point (’.’).
- Notez qu’en PHP, les variables sont systématiquement précédés par le signe dollar (’$’). Cela permet d’utiliser des variables directement dans des chaines de caractères, sans passer par la concatenation. Exemple :
echo "Bonjour $nom;";
- Notez qu’il y a deux façons d’insérer des commentaires dans vos scripts PHP. Les commentaires sont ignorées par l’interpréteur PHP, mais servent pour ajouter des informations pour le développeur, notamment pour la compréhension.
Exercice 2.4 PHP dynamique : Variables pour des nombres
- Créez un nouveau fichier
variables-nombres.php
dans votre éditeur de texte et tapez le code suivant qui qui affecte des variables à des nombres, effectue une opération de calcul, et affiche le contenu des variables.
Fichier PHP (variables-nombres.php
):
<?php
$a=2;
$b=3;
$c=$a+$b;
echo $a."+".$b."=".$c;
?>
- Faites afficher le code source de votre page dans votre navigateur.
Exercice 2.5 PHP dynamique : Conditions avec if
Créer un nouveau fichier condition.php
dans votre éditeur de texte et tapez le code suivant :
Fichier PHP (condition.php
):
<?php
$n=4;
if ($n<10)
{echo "plus petit que 10";
}?>
Ouvrir la page sur votre navigateur.
Faites afficher le code source de votre page dans votre navigateur et comparez-le au contenu de votre fichier
condition.php
dans votre éditeur de texte. Affectez la variablen
à une valeur supérieur à 10 (au lieu de 4), et testez de nouveau.
- Notez qu’un bloc d’instruction est délimité par des accolades (’{’ et ’}’). L’utilisation d’un bloc d’instruction est obligatoire s’il y a plusieurs instructions exécutées conditionellement.
- Notez aussi que l’indentation n’est pas obligatoire, mais conseillé pour améliorer la lisibilité.
Affichez conditionnellement les textes “plus petit que 10” et “non, pas plus petit que 10” en utilisant l’instruction else que vous pouvez recherchez dans la barre de recherche dans le manuel PHP (https://www.php.net/manual/fr/index.php).
Affichez conditionnellement les textes “plus petit que 10”, “exactement 10”, et “plus grand que 10” en utilisant l’instruction
elseif
que vous pouvez recherchez dans la barre de recherche dans le manuel PHP.Affectez la variable
n
à une variable aléatoire entre comprise entre 3 et 20 inclus. Pour cela, utilisez la fonctionrand
de PHP. Pour comprendre le fonctionnement de cette fonction, utilisez le manuel PHP : https://www.php.net/manual/fr/index.php, et plus particulièrement la page dédiée à la fonctionrand
: https://www.php.net/manual/fr/function.rand.php
Exercice 2.6 PHP dynamique : Boucles avec while
- Créer un nouveau fichier
boucle.php
dans votre éditeur de texte et tapez le code suivant :
Fichier PHP (boucle.php
):
<?php
$n=5;
$i=1;
while ($i <= $n)
{echo "La valeur de la variable i est ".$i;
$i = $i + 1;
}?>
Ouvrir la page à l’adresse suivant: https://prenom-nom.emi.u-bordeaux.fr/cswd/td2/boucle.php (ou bien <http: //localhost/cswd/td2/boucle.php> sur vos propres ordinateurs).
Faites afficher le code source de votre page dans votre navigateur et comparez-le au contenu de votre fichier
boucle.php
dans votre éditeur de texte.Si vous souhaitez introduire un saut de ligne, vous pouvez afficher la constante PHP_EOL dans une instruction echo (soit dans une nouvelle instruction, soit en la concatenant (avec le signe point ’.’) après l’affichage de la variable
$i
).Faites afficher de nouveau le code source de votre page.
- Notez que le saut de ligne est appliqué dans le code source de la page, mais non pas dans le navigateur. C’est normal et important à noter ! Comprenez-vous pourquoi ?
PHP : Structure de données : tableaux indexés
Exercice 2.7 PHP dynamique : Structure de données tableaux indexés avec array
Dans cet exercice, nous allons créer une structure de données tableau (anglais : array
) indexé, et parcourir ce tableau pour afficher ses éléments.
Toujours dans votre dossier td2, créez un nouveau fichier tableau.php
dans votre éditeur de texte et tapez le code suivant :
Fichier PHP (tableau.php
):
<?php
$tournois = array("Melbourne", "Paris", "Londres", "New York");
?>
Notez que vous pouvez également définir ce même tableau de la façon suivante. Remarque : Choissisez bien-sûr uniquement une façon !
<?php
$tournois = array();
$tournois[0] = "Melbourne";
$tournois[1] = "Paris";
$tournois[2] = "Londres";
$tournois[3] = "New York";
?>
Testez.
- Toujours dans votre contexte PHP (à la fin mais entre
<?php
et?>
), affichez le tournoi avec index 0 comme suit :
<?php
echo $tournois[0];
?>
Testez.
Toujours dans votre contexte PHP (à la fin mais entre
<?php
et?>
), affectez une variable$i
avec une valeur entre 0 et 3 de votre choix, et affichez le$i
-ème tournoi de l’année avec l’instructionecho
. Testez.Afin d’afficher le contenu intégral du tableau, vous pouvez utiliser une boucle
while
, et bien sûr aussi une bouclefor
. Complétez le code PHP suivant :
<?php
for ($i = 0; $i < count($tournois); $i++)
{// complétez pour afficher le i-ème tournoi
}?>
- Notez que la fonction
count
permet de récupérer le nombre d’éléments d’un tableau.
- Faites afficher de nouveau le code source de votre page avec votre navigateur, et comparez avec votre fichier PHP dans votre éditeur de texte. Est-ce que cela correspond à ce que vous attendiez ?
PHP : Récupération des paramètres
Exercice 2.8 Récupération des paramètres avec la méthode $_GET
Dans cet exercice, nous allons apprendre comment injecter des paramètres dans vos pages web dynamiques. 1. Créer un nouveau fichier get.php
dans votre éditeur de texte et tapez le code suivant qui récupère une variable par le paramètre n
via l’URL en utilisant la méthode $_GET
.
Fichier PHP (get.php
):
<?php
$n = $_GET['n'];
echo "Le paramètre n est ".$n;
?>
Ouvrir la page à l’adresse suivant : https://prenom-nom.emi.u-bordeaux.fr/cswd/td2/get.php?n=5 (ou bien http://localhost/cswd/td2/get.php?n=5 sur vos propres ordinateurs).
Ouvrir votre page sans spécifier un paramètre : https://prenom-nom.emi.u-bordeaux.fr/cswd/td2/get.php (ou bien http://localhost/cswd/td2/get.php sur vos propres ordinateurs). Essayez de comprendre le message d’erreur. • Notez qu’afin d’éviter des messages d’erreur si un paramètre n’est pas spécifié, utilisez la fonction
isset
dans une condition si comme suit :Corrigez donc votre code PHP et mettez :
<?php
$n=1; // valeur pour n par défaut
if (isset($_GET['n']))
{$n = $_GET['n'];
}echo "Le paramètre n est ".$n;
?>
Ouvrir la page aux adresses suivant : https://prenom-nom.emi.u-bordeaux.fr/cswd/td2/get.php?n=5, https://prenom-nom.emi.u-bordeaux.fr/cswd/td2/get.php?n=10, et https://prenom-nom.emi.u-bordeaux.fr/cswd/td2/get.php. Avez-vous compris ? (sur vos propres ordinateurs, utiliser évidemment l’URL http://localhost/cswd/td2/get.php suivi du paramètre.).
Dans votre contexte
<?php
et?>
, à la fin, ajoutez le code suivant qui représente une condition si … sinon :
<?php
if ($n >= 10)
{echo "Vous avez au moins 10.";
}else
{echo "Vous avez moins que 10.";
}
- Faites afficher le code source de votre page dans votre navigateur.
- Notez le nom du paramètre dans l’URL après le ’?’ (ici
n
) n’a pas besoin de correspondre au nom de la variable que vous utilisez dans votre code PHP (ici$n
), mais cela peut s’avérer à être un bonne pratique.
Exercice 2.9 Boucle et méthode GET
Créer un nouveau fichier
boucle_get.php
dans votre éditeur de texte.Affichez autant de fois le mot “bonjour” que vous spécifiez dans l’URL avec le paramètre
n
. Remarque : récupérez d’abord le paramètre comme dans l’exercice précédent en utilisant la méthodeGET
, protégé par la fonctionisset
, et ensuite utilisez une boucle.Testez votre fichier en vous rendant à l’adresse https://prenom-nom.emi.u-bordeaux.fr/cswd/td2/boucle_get.php?n=3. Changez les valeurs pour
n
, et omettez la définition d’un paramètre pourn
avec l’URL https://prenom-nom.emi.u-bordeaux.fr/cswd/td2/boucle_get.phpFaites afficher le code source de votre page dans votre navigateur.
Exercice 2.10 Plusieurs paramètres avec la méthode $_GET
Notez que vous pouvez spécifier plusieurs paramètres dans une URL en les séparant par un “et commercial” (le signe &
).
- Créez un programme en PHP s’appelant
plusgrand.php
qui récupère les valeur des trois paramètresa
,b
, etc
qui sont spécifiés dans l’URL comme suit : https://prenom-nom.emi.u-bordeaux.fr/cswd/td2/plusgrand.php?a=4&b=5&c=2 - Affichez les valeurs des trois variables.
- Déterminez la plus grande valeur des trois variables et affichez-la.
PHP : Structure de données : tableaux associatifs
Exercice 2.11 Structure de données tableaux associatifs en PHP
Dans cet exercice, nous travaillons avec une nouvelle structure de données : les tableaux associatifs (ou dictionnaires). Avec votre éditeur de texte, créez un nouveau fichier tableau_associatif.php
.
- En tout début de fichier, tapez le code PHP suivant :
Fichier PHP (tableau_associatif.php
):
<?php
$personne['nom'] = "Lafarge";
$personne['prenom'] = "Patxi";
$personne['codepostal'] = "33100";
?>
Notez que vous pouvez également définir ce même tableau de la façon suivante. Remarque : Choissisez bien-sûr uniquement une façon !
<?php
$personne = [
'nom' => "Lafarge",
'prenom' => "Patxi",
'codepostal' => "33100"
;
]?>
- Ajoutez des instructions pour afficher les trois éléments du tableaux.
Les tableaux asscociatifs sont définis par des clés (keys) et des valeurs (values). Ici, les clés sont nom
, prenom
et codepostal
, et les valeurs sont Lafarge
, Patxi
et 33100
Exercice 2.12 Structure de données de tableau indexé d’un tableau associatif
- Maintenant, nous allons créer un tableau indexé sur un tableau associatif. Remplacez le code PHP du début de votre page avec le code suivant :
<?php
$personnes = array();
$personnes[0]['nom'] = "Lafarge";
$personnes[0]['prenom'] = "Patxi";
$personnes[0]['codepostal'] = "33100";
$personnes[1]['nom'] = "Errecaret";
$personnes[1]['prenom'] = "Amaia";
$personnes[1]['codepostal'] = "64100";
// vous pouvez définir d'autres personnes.
?>
Afficher maintenant les trois éléments du tableau associatif pour toutes les personnes du tableau indexé. Utilisez une boucle en PHP !
Vous allez maintenant appelez votre page en fournissant un paramètre id en complétant l’URL par, par exemple,
?id=1
. Récupérez ce paramètre id de l’URL avec la méthodeGET
.A la suite de votre fichier, affichez maintenant le texte “Vous avez séléctionné personne avec l’identifiant …” suivi de votre paramètre
id
.Affichez les informations relatives à la personne choisie.
Exercices optionnels
Exercice 2.13 Utiliser le préprocesseur PHP pour créer des pages HTML5 : Listes
- Créez une page
personnes.php
et affectez de nouveau le tableau associatif indexé. Dans cette page, créez les balises HTML5 pour une page vierge - sans être dans un contexte PHP - comme suit :
Fichier PHP (personnes.php
):
<?php
$personnes = array();
$personnes[0]['nom'] = "Lafarge";
$personnes[0]['prenom'] = "Patxi";
$personnes[0]['codepostal'] = "33100";
$personnes[1]['nom'] = "Errecaret";
$personnes[1]['prenom'] = "Amaia";
$personnes[1]['codepostal'] = "64100";
// vous pouvez définir d'autres personnes.
?>
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Page web dynamique. </title>
</head>
<body>
</body>
</html>
- Dans la partie body, pour afficher une liste non-ordonné en HTML5 avec les noms de familles, ajoutez le code suivant :
<?php
<ul>
<li>Lafarge</li>
<li>Errecaret</li>
</ul>
?>
Modifiez ce code HTML et intégrez une boucle en PHP qui affichent les noms de familles à partir du tableau associatif indexé. Testez.
- Affichez le code source de votre page web dans le navigateur, et validez ce code source dans le validateur W3C.
Exercice 2.14 Utiliser le préprocesseur PHP pour créer des pages HTML5 : Tables
Dans cette même page web, affichez un tableau HTML5 (avec table
, tr
, td
… ) avec toutes les informations de toutes les personnes (une ligne de votre tableau correspondra à une personne).