Cours 4 Programmation web, orientée serveur

(1)

DUT MMI – IUT de Marne-la-Vallée 20/03/2019

M2202 - Algorithmique

Cours 4

Programmation web, orientée serveur

Philippe Gambette

(2)

• phpdebutant.net

• www.php.net (documentation du langage PHP)

Sources

(3)

1) un langage de programmation côté serveur, qui permet d'interagir avec une base de données

2) accessible même aux futurs non intégrateurs/développeurs : il est important pour eux de maîtriser les bases de cette technologie

Préambule

Le speech d’Oussama Ammar (The Family) à propos de la connaissance des technologies quand on monte sa start-up :

https://youtu.be/U46m0SZMcTY?t=57m8s

(4)

• Concept de la programmation web, orientée serveur

• Syntaxe PHP

Plan du cours 4 – Programmation web, orientée serveur

(5)

• Syntaxe PHP

Plan du cours 4 – Programmation web, orientée serveur

(6)

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

(7)

Concept de la programmation web orientée serveur

client

(8)

Concept de la programmation web orientée serveur

client

http://monique.pantel.free.fr/Avis.php?id=49319

(9)

Concept de la programmation web orientée serveur

client

serveur

(10)

Concept de la programmation web orientée serveur

client

1 serveur

envoi de

l’URL

(11)

Concept de la programmation web orientée serveur

client

1 serveur

envoi de

l’URL

(12)

Concept de la programmation web orientée serveur

client

1 serveur

envoi de

l’URL

(13)

Concept de la programmation web orientée serveur

client

serveur

(14)

Concept de la programmation web orientée serveur

client

serveur

Avis.php 2 récupération

du fichier

PHP

(15)

3 Concept de la programmation web orientée serveur

client

serveur

Avis.php envoi de la

requête SQL

id=49319

(16)

3 Concept de la programmation web orientée serveur

client

serveur

Avis.php envoi de la

requête SQL

id=49319

SELECT * FROM films

WHERE id=49319

(17)

3 Concept de la programmation web orientée serveur

client

serveur

Avis.php base de

données

id=49319

envoi de la

requête SQL

SELECT * FROM films

WHERE id=49319

(18)

4 Concept de la programmation web orientée serveur

client

serveur

Avis.php base de

données

note, titre, sortie, avis

réception du résultat de la

requête SQL

(19)

4 Concept de la programmation web orientée serveur

client

serveur

Avis.php base de

données

note, titre, sortie, avis

réception du résultat de la

requête SQL

(20)

4 Concept de la programmation web orientée serveur

client

serveur

Avis.php base de

données

note, titre, sortie, avis

réception du résultat de la

requête SQL

(21)

4 Concept de la programmation web orientée serveur

client

serveur

Avis.php base de

données

note, titre, sortie, avis

réception du résultat de la

requête SQL

(22)

4 Concept de la programmation web orientée serveur

client

serveur

Avis.php base de

données

réception du résultat de la

requête SQL

(23)

4 Concept de la programmation web orientée serveur

client

serveur

Avis.php base de

données

réception du résultat de la

requête SQL

(24)

Concept de la programmation web orientée serveur

client

serveur

Avis.php base de

données

5 envoi de

la page

HTML

(25)

Concept de la programmation web orientée serveur

serveur

base de données

5 envoi de

la page

client HTML

(26)

Concept de la programmation web orientée serveur

serveur

base de données

5 envoi de

la page

client HTML

(27)

Concept de la programmation web orientée serveur

serveur

base de données

5 envoi de

la page

client HTML

(28)

+/- 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 (et Javascript/jQuery)

(29)

Concept de la programmation web orientée serveur

« client web »

→ navigateur

(Firefox, Chrome, Explorer, Safari, etc.)

envoi d’une URL

(30)

Concept de la programmation web orientée serveur

« client web »

→ navigateur

« serveur web »

→ machine ou logiciel

(Apache, etc.) envoi d’une URL

envoi d’une page HTML

(31)

Concept de la programmation web orientée serveur

« client web »

→ navigateur

« serveur web »

→ machine ou logiciel

page PHP

= du code HTML

« à trous »

+ des instructions PHP pour remplir les trous

exécute le code PHP reçoit le

code HTML

(32)

Concept de la programmation web orientée serveur

« client web »

→ navigateur

« serveur web »

→ machine ou logiciel

page PHP

= du code HTML

« à trous »

+ des instructions PHP pour remplir les trous

exécute le code PHP reçoit le

code HTML Instructions PHP :

• Déclaration de variables

• Affectations de variables

• Structures de contrôle (tests, boucles)

• Appel de fonctions (en particulier les fonctions de gestion de bases de données MySQL)

• Entrées : récupération de valeurs provenant d’un formulaire ou de l’URL

• Sorties : affichage (dans les trous du code HTML) Les variables s'écrivent toujours précédées de

$ : pas besoin de les déclarer

(33)

• Syntaxe PHP

Plan du cours 4 – Programmation web, orientée serveur

(34)

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)

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 le terminal : afficher dans le code HTML :

console.log("toto"); echo("toto");

(35)

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++){

…} …}

(36)

Syntaxe PHP – correspondance avec Javascript

Javascript PHP

Tableaux Les numéros de case sont Les cases peuvent être des entiers de 0 à n-1 désignées par des noms (n=nombre de cases) (chaînes de caractères)

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"};

tab2["o"]="tototo"; $tab2["o"]="tototo";

$k=tab2.keys();

clé valeur

(37)

Syntaxe PHP – correspondance avec Javascript

Javascript PHP

Tableaux Les numéros de case sont Les cases peuvent être des entiers de 0 à n-1 désignées par des noms (n=nombre de cases) (chaînes de caractères)

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"};

tab2["o"]="tototo"; $tab2["o"]="tototo";

$k=tab2.keys();

clé valeur

En PHP : le foreach pour parcourir un tableau !

foreach ($tab2 as $key => $value){

echo("La case n°".$key);

echo(" a la valeur ".$value);

}

(38)

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"