Cours Terminale TI
Programmation web,
orientée serveur
Sources
• phpdebutant.net
• www.php.net (documentation du langage PHP)
Plan du cours 4 – Programmation web, orientée serveur
• Concept de la programmation web, orientée serveur
• Comment coder en PHP en pratique ?
• Syntaxe PHP
Plan du cours 4 – Programmation web, orientée serveur
• Concept de la programmation web, orientée serveur
• Comment coder en PHP en pratique ?
• Syntaxe PHP
Concept de la programmation web orientée serveur
Source des visuels :
http://www.flaticon.com/free-icon/notebook-computer_65732
http://www.freepik.com/free-psd/simple-browser-with-icons-psd_715210.htm
http://www.freepik.com/free-icon/three-servers_767466.htm
http://www.freepik.com/free-icon/server_811738.htm
Concept de la programmation web orientée serveur
client
Concept de la programmation web orientée serveur
http://monique.pantel.free.fr/Avis.php?id=49319
client
Concept de la programmation web orientée serveur
http://monique.pantel.free.fr/Avis.php?id=49319
client
serveur
Concept de la programmation web orientée serveur
http://monique.pantel.free.fr/Avis.php?id=49319
envoi de
client l’URL
1 serveur
http://monique.pantel.free.fr/Avis.php?id=49319
Concept de la programmation web orientée serveur
http://monique.pantel.free.fr/Avis.php?id=49319
envoi de
client l’URL
1 serveur
http://monique.pantel.free.fr/Avis.php?id=49319
Concept de la programmation web orientée serveur
http://monique.pantel.free.fr/Avis.php?id=49319
envoi de
client l’URL
1 serveur
http://monique.pantel.free.fr/Avis.php?id=49319
Concept de la programmation web orientée serveur
http://monique.pantel.free.fr/Avis.php?id=49319
client
serveur
http://monique.pantel.free.fr/Avis.php?id=49319
Concept de la programmation web orientée serveur
http://monique.pantel.free.fr/Avis.php?id=49319
client
serveur
http://monique.pantel.free.fr/Avis.php?id=49319
récupération
du fichier
PHP
2
Avis.php
Concept de la programmation web orientée serveur
http://monique.pantel.free.fr/Avis.php?id=49319
client
serveur
http://monique.pantel.free.fr/Avis.php?id=49319
id=49319
3
envoi de la
requête SQL
Avis.php
Concept de la programmation web orientée serveur
http://monique.pantel.free.fr/Avis.php?id=49319
client
serveur
http://monique.pantel.free.fr/Avis.php?id=49319
id=49319
3
envoi de la
requête SQL
SELECT * FROM films
WHERE id=49319
Avis.php
Concept de la programmation web orientée serveur
http://monique.pantel.free.fr/Avis.php?id=49319
client
serveur
http://monique.pantel.free.fr/Avis.php?id=49319
base de id=49319
données 3
envoi de la
requête SQL
SELECT * FROM films
WHERE id=49319
Avis.php
Concept de la programmation web orientée serveur
http://monique.pantel.free.fr/Avis.php?id=49319
client
serveur
http://monique.pantel.free.fr/Avis.php?id=49319
note, titre,
base de sortie, avis
données 4
réception du
résultat de la
requête SQL
Avis.php
Concept de la programmation web orientée serveur
http://monique.pantel.free.fr/Avis.php?id=49319
client
serveur
http://monique.pantel.free.fr/Avis.php?id=49319
note, titre,
base de sortie, avis
données 4
réception du
résultat de la
requête SQL
Avis.php
Concept de la programmation web orientée serveur
http://monique.pantel.free.fr/Avis.php?id=49319
client
serveur
http://monique.pantel.free.fr/Avis.php?id=49319
note, titre,
base de sortie, avis
données 4
réception du
résultat de la
requête SQL
Avis.php
Concept de la programmation web orientée serveur
http://monique.pantel.free.fr/Avis.php?id=49319
client
serveur
http://monique.pantel.free.fr/Avis.php?id=49319
note, titre,
base de sortie, avis
données 4
réception du
résultat de la
requête SQL
Avis.php
Concept de la programmation web orientée serveur
http://monique.pantel.free.fr/Avis.php?id=49319
client
serveur
http://monique.pantel.free.fr/Avis.php?id=49319
note, titre,
base de sortie, avis
données 4
réception du
résultat de la
requête SQL
Avis.php
Concept de la programmation web orientée serveur
http://monique.pantel.free.fr/Avis.php?id=49319
client
serveur
http://monique.pantel.free.fr/Avis.php?id=49319
note, titre,
base de sortie, avis
données 4
réception du
résultat de la
requête SQL
Avis.php
Concept de la programmation web orientée serveur
http://monique.pantel.free.fr/Avis.php?id=49319
envoi de
la page
HTML
client
5 serveur
http://monique.pantel.free.fr/Avis.php?id=49319
base de
données
Avis.php
Concept de la programmation web orientée serveur
http://monique.pantel.free.fr/Avis.php?id=49319
envoi de
la page
HTML
client
5 serveur
base de
données
Concept de la programmation web orientée serveur
http://monique.pantel.free.fr/Avis.php?id=49319
envoi de
la pag e
HTML
client
5 serveur
base de
données
Concept de la programmation web orientée serveur
http://monique.pantel.free.fr/Avis.php?id=49319
envoi de
la page
HTML
client
5 serveur
base de
données
+/- de la programmation web orientée serveur
Avantages de la programmation web orientée serveur :
• code PHP stocké sur le serveur, non visible pour le client (sécurité)
• interaction avec une base de données hébergée sur le serveur
• génération facile de fichiers de types variés (HTML, PNG, CSV, JSON, etc.)
• lancement possible de n’importe quel programme
• calculs effectués côté serveur
Inconvénients de la programmation web orientée serveur :
• calculs effectués côté serveur : doit résister à la charge
• nécessite de recharger la page... sauf en passant par AJAX
Concept de la programmation web orientée serveur
« client web » envoi d’une URL
→ navigateur
(Firefox, Chrome,
Explorer, Safari, etc.)
Concept de la programmation web orientée serveur
« client web » envoi d’une URL « serveur web »
→ navigateur → machine ou
(Firefox, Chrome, logiciel
Explorer, Safari, etc.) envoi d’une page HTML (Apache, etc.)
Concept de la programmation web orientée serveur
« client web » envoi d’une URL « serveur web »
→ navigateur → machine ou
(Firefox, Chrome, logiciel
Explorer, Safari, etc.) envoi d’une page HTML (Apache, etc.)
reçoit le exécute le
code HTML code PHP
page PHP
= du code HTML
« à trous »
+ des instructions
PHP pour remplir
les trous
Concept de la programmation web orientée serveur
« client web » envoi d’une URL « serveur web »
→ navigateur → machine ou
(Firefox, Chrome, logiciel
Explorer, Safari, etc.) envoi d’une page HTML (Apache, etc.)
Le PHP est un langage reçoit le exécute le
«non typé» : pas besoin code HTML code PHP
de déclarer les types des
Instructions PHP : variables
• Déclaration de variables
• Affectations de variables
page PHP
• Structures de contrôle (tests, boucles) = du code HTML
• Appel de fonctions (en particulier les fonctions de « à trous »
gestion de bases de données MySQL) + des instructions
• Entrées : récupération de valeurs provenant d’un PHP pour remplir
formulaire ou de l’URL les trous
• Sorties : affichage (dans les trous du code HTML)
Plan du cours 4 – Programmation web, orientée serveur
• Concept de la programmation web, orientée serveur
• Comment coder en PHP en pratique ?
• Syntaxe PHP
Comment coder en PHP en pratique sur son ordi ?
Si vous ouvrez un fichier PHP dans le navigateur, ça ne fonctionne pas !
Il faut un serveur web.
Apache est un des serveurs HTTP les plus populaires.
Pour programmer en PHP sur son propre ordinateur, on installe
généralement un système WAMP/LAMP/MAMP :
Windows/Linux/Mac, Apache, MySQL, PHP
Par exemple, le logiciel libre multiplateforme XAMPP.
On place l'arborescence de son site web dans :
[Dossier d'installation de XAMPP]/htdocs/monSite
On lance XAMPP en exécutant le programme xampp_start.exe.
On visite dans son navigateur la page http://localhost/monSite
Comment coder en PHP en pratique à l'université ?
On lit la page https://cri.u-pem.fr/service-aux-etudiants/web pour
comprendre la différence entre les dossiers WWW et WWW-perso.
On « active son site WEB » en suivant le lien indiqué sur la page ci-dessus.
On place l'arborescence de son site web dans :
M:\WWW\monSite
ou dans
M:\WWW-perso\monSite
On visite dans son navigateur la page
https://etudiant.u-pem.fr/~monLogin/monSite
ou
https://perso-etudiant.u-pem.fr/~monLogin/monSite
(publique mais sans affichage des erreurs PHP)
Pour modifier les fichiers de son site depuis chez soi :
- avec l'ENT : menu Informations pratiques, Mes fichiers
- avec un logiciel FTP (comme Filezilla) : se connecter à etudiant.u-pem.fr
sans chiffrement, avec son identifiant et mot de passe personnels.
Quels changements quand on ouvre une page web ?
Ce qui change quand on visite l'adresse sur localhost, ou sur le site de
l'université, de la page HTML ou PHP au lieu d'ouvrir directement le fichier
HTML dans le navigateur
1. Non réactualisation des fichiers Javascript ou CSS
Le navigateur stocke « en cache » certains fichiers liés à votre page web
(fichiers CSS, Javascript, images) pour éviter de les re-télécharger, parfois il ne
les réactualise pas même si vous rechargez la page !
Deux solutions :
• installer par exemple l'extension ClearCache sur le navigateur Chrome ou
Firefox, pour vider le cache en un clic avant de réactualiser la page ;
• pour éviter de penser à vider le cache, vous pouvez aussi, dans une page
PHP, mettre un point d'interrogation suivi d'un nombre aléatoire à la fin des
URL des fichiers sur lesquels vous travaillez. Ainsi à chaque rechargement de
page, l'URL changera et le navigateur ira de nouveau chercher le fichier :
<script type="text/javascript" src="app.js<?php
echo("?".random_int(0, 1000000));?>"></script>
Quels changements quand on ouvre une page web ?
Ce qui change quand on visite l'adresse sur localhost, ou sur le site de
l'université, de la page HTML ou PHP au lieu d'ouvrir directement le fichier
HTML dans le navigateur
2. Changement de cible des adresses commençant à la racine du site
Si vous utilisez des adresses commençant par le caractère « / », elles risquent
de ne pas fonctionner car elles se référeront à la racine non pas de votre
disque dur comme c'était le cas pour vos fichiers si vous êtes sous Linux ou
MacOS, mais à la racine de votre serveur web, qui correspond au dossier
htdocs par exemple sur MAMP.
Utilisez plutôt des adresses relatives commençant par « ./ » ou par « ../ »
ou directement par le nom du fichier ou dossier souhaité.
Quels changements quand on ouvre une page web ?
Ce qui change quand on visite l'adresse sur localhost, ou sur le site de
l'université, de la page HTML ou PHP au lieu d'ouvrir directement le fichier
HTML dans le navigateur
3. Différence d'apparence entre la page ouverte par double clic et celle
chargée depuis l'URL localhost
Attention au niveau de zoom de votre navigateur : il est possible que vous
ayez un zoom différent sur le fichier ouvert dans le navigateur en double-
cliquant dessus et sur localhost, ce qui conduit à des différences
d'affichage entre les deux, alors que le code visible dans le navigateur est
exactement le même dans les deux cas !
Les niveaux de zoom sont enregistrés par le navigateur en fonction de l'URL
consultée, donc le niveau de zoom de localhost peut rester, par exemple à
90%, même si vous fermez et rouvrez le navigateur.
Quels changements quand on ouvre une page web ?
Ce qui change quand on visite l'adresse sur localhost, ou sur le site de
l'université, de la page HTML ou PHP au lieu d'ouvrir directement le fichier
HTML dans le navigateur
4. Intégration de fichiers chargés de façon non sécurisée
Si votre serveur web force le HTTPS par défaut, ou que vous hébergez votre
site en HTTPS (ce n'est peut-être pas le cas de votre localhost mais c'est le cas
des serveurs de l'université), le navigateur refuse de charger le contenu en
HTTP (non sécurisé) à l'intérieur d'une page en HTTPS (sécurisée).
Le problème est clairement indiqué dans la console :
Vous devez donc passer tous les liens des fichiers chargés (images,
bibliothèques Javascript, fichiers CSS, etc.) en https://... au lieu de
http://... !
Plan du cours 4 – Programmation web, orientée serveur
• Concept de la programmation web, orientée serveur
• Comment coder en PHP en pratique ?
• Syntaxe PHP
Syntaxe PHP – correspondance avec Javascript
Javascript PHP
Programme fichier TP1.js ou bien fichier TP1.php contenant du
code intégré entre balises code HTML (header, body)
<script> et </script> d'une et des balises <?php et ?>
page HTML. contenant des instructions
PHP.
Exécution dans le navigateur (la URL de page PHP dans
console en particulier) le navigateur web :
http://mmi.fr/TP1.php
?param1=val1&p2=val2
Sortie afficher dans la console : afficher dans le code HTML :
console.log("toto"); echo("toto");
Syntaxe PHP – correspondance avec Javascript
Javascript PHP
Affichage - dans le body :
des paramètres <?php
echo ($_GET["param1"]
." ".$_GET["p2"]);?>
(parenthèses pas nécessaires)
Initialisation var i=0; $i=0;
d’une variable var x="toto"; $x="toto"; (ou $x='toto';)
(inclut la déclaration) (pas de déclaration)
Test if(i==0){x="a";} if($i==0){$x="a";}
else{x="b";} else{$x="b";}
Boucle while(i>0){ while($i>0){
i++;} $i++;}
for(var i=0;i<10;i++){ for($i=0;$i<10;$i++){
…} …}
Syntaxe PHP – correspondance avec Javascript
Javascript PHP
Tableaux Les numéros de case sont Les cases peuvent être
(associatifs) soit des entiers de 0 à n-1 désignées à la fois par des
(n=nombre de cases)... soit noms (chaînes de caractères)
des chaînes de caractères ou des entiers de 0 à n-1
var tab = $tab = array("toto",
["toto","titi"]; "titi");
tab[0]="tototo"; $tab[0]="tototo";
int a=tab.length; $a=count($tab);
var tab2 = $tab2 = array("o"=>
{"o":"toto", "toto","i"=>"titi");
"i":"titi"}; clé valeur
tab2["o"]="tototo"; $tab2["o"]="tototo";
$k=tab2.keys();
Syntaxe PHP – correspondance avec Javascript
Javascript PHP
Tableaux Les numéros de case sont Les cases peuvent être
(associatifs) soit des entiers de 0 à n-1 désignées à la fois par des
(n=nombre de cases)... soit noms (chaînes de caractères)
EdnesPcH
haPîn:elsedf
eocarraeca
tèc
rehs pouorupdaersceonutrieirrsudne t0aàbnle-1au !
foreach ($tab2 as $key => $value){
tab[0]="tototo"; } $tab[0]="tototo";
int a=tab.length; $a=count($tab);
var tab2 = $tab2 = array("o"=>
{"o":"toto", "toto","i"=>"titi");
"i":"titi"}; clé valeur
tab2["o"]="tototo"; $tab2["o"]="tototo";
$k=tab2.keys();
Syntaxe PHP – correspondance avec Javascript
Javascript PHP
Fonctions function précède le nom Le mot function précède
de la fonction, suivi de fonction, suivi
parenthèses qui contiennent parenthèses qui
les entrées éventuelles, contiennent les entrées
précédées de leur type. éventuelles.
function somme function somme($a,$b)
(a,b){ {
return a+b; return $a+$b;
} }
Appel de Le nom de la fonction est Le nom de la fonction est
fonction suivi de parenthèses qui suivi de parenthèses qui
contiennent les entrées contiennent les entrées
éventuelles. éventuelles.
Concaténation "a"+"b" "a"."b"
Syntaxe PHP – correspondance avec Javascript
Pour plus d'informations, voir le glossaire PHP !
