Algorithmes et structures de données avancées Partie Conception de Sites Web dynamiques Cours 9...

40
Algorithmes et structures de données avancées Partie Conception de Sites Web dynamiques Cours 9 Patrick Reuter

Transcript of Algorithmes et structures de données avancées Partie Conception de Sites Web dynamiques Cours 9...

Page 1: Algorithmes et structures de données avancées Partie Conception de Sites Web dynamiques Cours 9 Patrick Reuter.

Algorithmes et structures de données avancées

Partie Conception de Sites Web dynamiques

Cours 9

Patrick Reuter

Page 2: Algorithmes et structures de données avancées Partie Conception de Sites Web dynamiques Cours 9 Patrick Reuter.

Conception de Site Webs Interactifs

Déroulement• Pages web statiques (HTML/XHTML)• Mise en forme avec feuilles de styles (CSS)• Programmation côté serveur

– Pages web dynamiques (PHP)– avec connexion à une base de données (MySQL)

• Programmation côté client– JavaScript

• Référencement Internet (moteur de recherche)

Page 3: Algorithmes et structures de données avancées Partie Conception de Sites Web dynamiques Cours 9 Patrick Reuter.

PHP

Page 4: Algorithmes et structures de données avancées Partie Conception de Sites Web dynamiques Cours 9 Patrick Reuter.

http://fr2.php.net/manual/fr/

Page 5: Algorithmes et structures de données avancées Partie Conception de Sites Web dynamiques Cours 9 Patrick Reuter.

<?php

echo "Hello World";

?>

Page 6: Algorithmes et structures de données avancées Partie Conception de Sites Web dynamiques Cours 9 Patrick Reuter.

Remarques

• Extension du fichier doit être .php

• Le navigateur ne comprend que l'HTML

• Le code "php" inclus dans la page HTML est transformé par le serveur php

• Le code "php" est invisible dans la page HTML affichée car il est interpreté

Page 7: Algorithmes et structures de données avancées Partie Conception de Sites Web dynamiques Cours 9 Patrick Reuter.

Un exemple pratique : Hello World<html> <head> <title>Ma premiere page</title> </head> <body> <h1>Hello World</h1> </body></html>

<html> <head> <title>Ma premiere page</title> </head> <body>

<h1><?php echo "Hello World";?></h1>

</body></html>

helloworld.htm

helloworld.php

Page 8: Algorithmes et structures de données avancées Partie Conception de Sites Web dynamiques Cours 9 Patrick Reuter.

Ecrire dans le fichier HTML

echo "hello world";

Page 9: Algorithmes et structures de données avancées Partie Conception de Sites Web dynamiques Cours 9 Patrick Reuter.

Un exemple pratique : remarques

• Si on "éteint" le serveur web (EasyPHP)

• Si on met une extension .html au fichier php

Page 10: Algorithmes et structures de données avancées Partie Conception de Sites Web dynamiques Cours 9 Patrick Reuter.

Balise

Les scripts php étant destinés à être utilisés à l'intérieur de pages HTML, il faut une balise spéciale permettant au "parser / interpréteur" php de savoir à quel endroit se trouve le code.

Un code php est toujours compris entre les balise "<?" d'une part et "?>" d'autre part.[...]

<body> <h1> <?php echo "Hello World"; ?> </h1></body>[...]

Page 11: Algorithmes et structures de données avancées Partie Conception de Sites Web dynamiques Cours 9 Patrick Reuter.

Commentaires

•Comme en C ou en Java

•Tout ce qui se trouve dans un commentaire est ignoré par le serveur php

<?php

// commentaire de fin de ligne

/* commentaire sur plusieurs lignes */

?>

Page 12: Algorithmes et structures de données avancées Partie Conception de Sites Web dynamiques Cours 9 Patrick Reuter.

echo "j'utilise php" ; // CORRECT

echo "j\'utilise php" ; // CORRECT

Page 13: Algorithmes et structures de données avancées Partie Conception de Sites Web dynamiques Cours 9 Patrick Reuter.

Concatenation 1

<?   

echo   "Salut"." Martin"; 

?> 

Page 14: Algorithmes et structures de données avancées Partie Conception de Sites Web dynamiques Cours 9 Patrick Reuter.

Variables

•php est interprété et faiblement typé.•Il n’est pas nécessaire de déclarer le type d'une variable.•Les identificateurs de variable sont précédés du symbole « $ » (dollar).

•Types : - entier (integer) - réel (double) - tableau (array) - objet (object) - booléen (boolean) - chaîne de caractères (string)

<body> <?php $toto = 5; echo $toto; ?></body>

Page 15: Algorithmes et structures de données avancées Partie Conception de Sites Web dynamiques Cours 9 Patrick Reuter.

Variables<?php

$a = 0;$nom = 'Horst';echo $a;

?>

<?php $a = 0; ?><?php $nom = 'Horst'; ?><?php echo $a; ?>

Page 16: Algorithmes et structures de données avancées Partie Conception de Sites Web dynamiques Cours 9 Patrick Reuter.

Concatenation 2

<? 

$nom = "Martin"; 

?>

Salut <? echo $nom;  ?>

Page 17: Algorithmes et structures de données avancées Partie Conception de Sites Web dynamiques Cours 9 Patrick Reuter.

Variables

•Portée

Limitée au bloc dans lequel elle a été crée.

Une variable créée dans un bloc n’est pas connue dans les autres.

Les variables de fonctions ne sont connues que dans la fonction.

•Opérateurs

Par ordre de priorité

– ++, --, !

– +, -, *, /, %

– ==, <, >, <=, >=, !=

– &&, ||, and, or

– =Priorité plus faible

Priorité plus forte

Page 18: Algorithmes et structures de données avancées Partie Conception de Sites Web dynamiques Cours 9 Patrick Reuter.

ConditionPermet d’exécuter ou non un bloc d’instructions.

Rmq : la condition est une expression booléenne (l’évaluation de son résultat rend vrai ou faux)

if (condition1){

/* bloc d’instructions lorsque condition1 est vraie */

} else if (condition2) {

/* autre bloc d’instructions, lorsquecondition2 est vraie */

} else {

/* bloc d’instructions lorsque les conditions antécédentes sont fausses */

}

Page 19: Algorithmes et structures de données avancées Partie Conception de Sites Web dynamiques Cours 9 Patrick Reuter.

Condition SI..SINON<?php

$nombre = 512;

if ($nombre<500)        {    echo $nombre." est compris entre 0 et 499"; } else if($nombre>=500 && $nombre<1000)  {    echo $nombre." est compris entre 500 et 999"; } else                                  {    echo $nombre." est plus grand que 999"; }

?>

Page 20: Algorithmes et structures de données avancées Partie Conception de Sites Web dynamiques Cours 9 Patrick Reuter.

Boucle for

Permet d’exécuter plusieurs fois un bloc d’instructions donné (nombre d’itérations connu)

for (initialisation ; condition_pour_continuer ; modification){/* bloc d’instructions lorsque la condition d’arrêt n’est pas vérifiée */

}

/* typiquement : */for ($i=0; $i<10; $i++){

/* traitement */}

Page 21: Algorithmes et structures de données avancées Partie Conception de Sites Web dynamiques Cours 9 Patrick Reuter.

Boucle POUR

• <?php$nombre = 5;

for($i=0; $i < $nombre ; $i++) {     echo "i est égal à ".$i. "<br>"; }

echo "i est égal à ".$i; ?>

Page 22: Algorithmes et structures de données avancées Partie Conception de Sites Web dynamiques Cours 9 Patrick Reuter.

Boucle POUR• <?php$nombre = 5;

for($i=0; $i < $nombre ; $i++) { ?>

i est égal à <?php echo $i; ?><br>

<? } ?>

i est égal à <?php echo $i; ?>

Page 23: Algorithmes et structures de données avancées Partie Conception de Sites Web dynamiques Cours 9 Patrick Reuter.

Boucle while

Permet d’exécuter plusieurs fois un bloc d’instructions donné (nombre d’itérations inconnu)

Rmq : la condition est une expression booléenne (l’évaluation de son résultat rend vrai ou faux)

- si vrai : le bloc d’instructions est exécuté

- si faux : la boucle n’est plus itérée, et l’exécution continue à la suite de la boucle

while (condition_pour_continuer) {

/* bloc d’instructions lorsque la condition est vérifiée */

}

Page 24: Algorithmes et structures de données avancées Partie Conception de Sites Web dynamiques Cours 9 Patrick Reuter.

Boucle TANT QUE

<?php$i = 1;while ($i<=5){?> Salut<br><?php$i++;

}?>

<?php

$i = 1;

while ($i<=5)

{

echo "Salut<br/>";

$i++;

}

?>

Page 25: Algorithmes et structures de données avancées Partie Conception de Sites Web dynamiques Cours 9 Patrick Reuter.

Passer des paramètres dynamiques

• Par l’URL : méthode $_GET

• Par des formulaires HTML aussi méthode $_POST

Page 26: Algorithmes et structures de données avancées Partie Conception de Sites Web dynamiques Cours 9 Patrick Reuter.

Méthode _GET

<?php

$a = $_GET['param'];

echo $a;

?>

URL : http://.../index.php?param=5

Page 27: Algorithmes et structures de données avancées Partie Conception de Sites Web dynamiques Cours 9 Patrick Reuter.

Méthode _GETURL : http://.../index.php?param1=5&param2=3

<?php

$a = $_GET['param1']; echo $a;

$b = $_GET['param2']; echo $b;

?>

URL : http://.../index.php?param1=5&param2=3

Page 28: Algorithmes et structures de données avancées Partie Conception de Sites Web dynamiques Cours 9 Patrick Reuter.

Fonction isset()

<?php

if isset($_GET['param1']) $param1 = $_GET['param1']; else { echo "Paramètre non donné"; $param1 = 1;

// valeur par défaut }?>

Page 29: Algorithmes et structures de données avancées Partie Conception de Sites Web dynamiques Cours 9 Patrick Reuter.

Méthode _GET

URL : http://.../index.php?nom=Lisa

<?php

$nom = $_GET['nom'];

echo "Bonjour ".$nom;

?>

Page 30: Algorithmes et structures de données avancées Partie Conception de Sites Web dynamiques Cours 9 Patrick Reuter.

PHP

<h1>

<?php

$nom = $_GET['nom'];

echo "Bonjour ".$nom;

?>

</h1>

Page 31: Algorithmes et structures de données avancées Partie Conception de Sites Web dynamiques Cours 9 Patrick Reuter.

PHP

Demande de index.php?nom=Lisa

<h1>

<?php

$nom = $_GET['nom'];

echo "Bonjour ".$nom;

?>

</h1>

Page 32: Algorithmes et structures de données avancées Partie Conception de Sites Web dynamiques Cours 9 Patrick Reuter.

PHP

Demande de index.php?nom=Lisa

Retour de la page XHTML<h1>

<?php

$nom = $_GET['nom'];

echo "Bonjour ".$nom;

?>

</h1>

Page 33: Algorithmes et structures de données avancées Partie Conception de Sites Web dynamiques Cours 9 Patrick Reuter.

PHP

Demande de index.php?nom=Lisa

Retour de la page XHTML

<h1>

Bonjour Lisa

</h1>

<h1>

<?php

$nom = $_GET['nom'];

echo "Bonjour ".$nom;

?>

</h1>

Page 34: Algorithmes et structures de données avancées Partie Conception de Sites Web dynamiques Cours 9 Patrick Reuter.

Formulaires

• Exemple www.google.fr

Page 35: Algorithmes et structures de données avancées Partie Conception de Sites Web dynamiques Cours 9 Patrick Reuter.

Formulaires HTML

<form action="resultat.php" method="get">

<input type="checkbox" name="box" value="1" checked="checked" />

<input type="submit" name="submitButtonName"value="-- Envoyer --">

</form>

Page 36: Algorithmes et structures de données avancées Partie Conception de Sites Web dynamiques Cours 9 Patrick Reuter.
Page 37: Algorithmes et structures de données avancées Partie Conception de Sites Web dynamiques Cours 9 Patrick Reuter.

Exemple

<form action="monscript.php" method="post" id="calculette"> <p> Somme en francs: <input name="francs" type="text" /> </p> <p> Valeur en euros: <input name="euros" type="text" /> </p> <p> <input type="submit" name="valider" value="Calculer" /> </p></form>

Page 38: Algorithmes et structures de données avancées Partie Conception de Sites Web dynamiques Cours 9 Patrick Reuter.

Formulaires HTML

<form action="enregistrer.php" method="get">

<input type="text" name="prenom">

<input type="checkbox" name="box" value="1">

<select name="mois"><option value="1">Janvier</option><option value="2">Février</option><option value="3">Mars</option><option value="4">Avril</option>

</select>

<input type="submit" name="submitButtonName"value="-- Envoyer --">

</form>

Fichier form.php

Page 39: Algorithmes et structures de données avancées Partie Conception de Sites Web dynamiques Cours 9 Patrick Reuter.

Formulaires

• Les formulaires– Définissent un ensemble de champs de saisie– Permettent de soumettre l’ensemble des valeurs des champs,

en une fois, au serveur• Le serveur

– Traite ces informations au moyen d’un script php (par exemple)– Génère en retour un flot HTML qui peut encore être un

formulaire (ré-essai ou procédure suivante)

Page 40: Algorithmes et structures de données avancées Partie Conception de Sites Web dynamiques Cours 9 Patrick Reuter.