. . . . . .

Dveloppement Web 2
Bertrand Estellon
Aix-Marseille Universit
April 26, 2013
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 1 / 423
. . . . . .
PHP Bases du langage Introduction
Web Dynamique

Gnration automatique des pages par le serveur :

Le contenu dpend du visiteur

Parfois, on trouve un systme dauthentication (ex : ENT)

Langages : PHP (Hypertext Preprocessor), JSP etc.

Utilisation dune base de donnes pour gnrer les pages

Pages web dynamiques :

Excution de scripts sur le client

Prsentation et rorganisation dynamiques des donnes cot client

Langages : JavaScript, VBScript, etc.

Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 2 / 423
. . . . . .
PHP Bases du langage Introduction
Web 2.0

Combinaison des deux aspects du Web dynamique

Les scripts excuts sur le client changent des informations avec un

serveur (AJAX, Flash, SilverLight)

Mise jour dynamique dune partie de la page Web

Permet de crer des Applications Web Riches (RIA) :

Gmail, Google Maps, Flickr, Deezer, etc.

Permet dorganiser des rseaux sociaux :

Facebook, Myspace, etc.

Permet de crer des Wiki, blogs et travaux collaboratifs :

Wikipedia, etc.
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 3 / 423
. . . . . .
PHP Bases du langage Introduction
Le Web statique
Protocole HTTP
Client
Serveur
1. Je veux toto.html
2. Contenu de toto.html
Requte :
GET /toto.html HTTP/1.0
Host: example.com
Referer: http://example2.com/
User-Agent: Mozilla/5.0 (X11; U; Linux
x86_64; fr; rv:1.9.0.4) Gecko/2008111217
Fedora/3.0.4-1.fc10 Firefox/3.0.4
Rponse :
HTTP/1.0 200 OK
Date: Fri, 31 Dec 1999 23:59:59 GMT
Server: Apache/0.8.4
Content-Type: text/html
Content-Length: 59
Expires: Sat, 01 Jan 2000 00:59:59 GMT
Last-modied: Fri, 09 Aug 1996 14:21:40
GMT
<TITLE>Exemple</TITLE>
<P>page dexemple.</P>
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 4 / 423
. . . . . .
PHP Bases du langage Introduction
Le Web dynamique
Protocole HTTP
Client
Serveur
1. Je veux toto.html
2. Contenu de toto.html
Requte :
GET /toto.html HTTP/1.0
Host: example.com
Referer: http://example2.com/
User-Agent: Mozilla/5.0 (X11; U; Linux
x86_64; fr; rv:1.9.0.4) Gecko/2008111217
Fedora/3.0.4-1.fc10 Firefox/3.0.4
Rponse :
HTTP/1.0 200 OK
Date: Fri, 31 Dec 1999 23:59:59 GMT
Server: Apache/0.8.4
Content-Type: text/html
Content-Length: 59
Expires: Sat, 01 Jan 2000 00:59:59 GMT
Last-modied: Fri, 09 Aug 1996 14:21:40
GMT
<TITLE>Exemple</TITLE>
<P>page dexemple.</P>
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 5 / 423
. . . . . .
PHP Bases du langage Introduction
Le Web dynamique
Protocole HTTP
Client
Serveur
1. Je veux toto.php
2. Sortie de l'excution
de toto.html
Requte :
GET /toto.php?n1=10&n2=15 HTTP/1.0
Host: example.com
Referer: http://example2.com/
User-Agent: Mozilla/5.0 (X11; U; Linux
x86_64; fr; rv:1.9.0.4) Gecko/2008111217
Fedora/3.0.4-1.fc10 Firefox/3.0.4
Rponse :
HTTP/1.0 200 OK
Date: Fri, 31 Dec 1999 23:59:59 GMT
Server: Apache/0.8.4
Content-Type: text/html
Content-Length: 59
Expires: Sat, 01 Jan 2000 00:59:59 GMT
Last-modied: Fri, 09 Aug 1996 14:21:40
GMT
<TITLE>Exemple</TITLE>
<P>Rsultat : 25.</P>
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 6 / 423
. . . . . .
PHP Bases du langage Introduction
Le Web dynamique
Protocole HTTP
Client
Serveur
1. Je veux toto.php
2. Sortie de l'excution
de toto.html
Requte :
POST /toto.php HTTP/1.0
Host: example.com
Referer: http://example2.com/
User-Agent: Mozilla/5.0 (X11; U; Linux
x86_64; fr; rv:1.9.0.4) Gecko/2008111217
Fedora/3.0.4-1.fc10 Firefox/3.0.4
n1=10&n2=15
Rponse :
HTTP/1.0 200 OK
Date: Fri, 31 Dec 1999 23:59:59 GMT
Server: Apache/0.8.4
Content-Type: text/html
Content-Length: 59
Expires: Sat, 01 Jan 2000 00:59:59 GMT
Last-modied: Fri, 09 Aug 1996 14:21:40
GMT
<TITLE>Exemple</TITLE>
<P>Rsultat : 25.</P>
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 7 / 423
. . . . . .
PHP Bases du langage Introduction
Pourquoi PHP ?

Besoin dun langage simple :

pour gnrer du HTML

pour communiquer avec une base de donnes

Langages : PHP (Hypertext Preprocessor), JSP etc.

pour grer les sessions des utilisateurs

Une solution :

1994 : Invention de PHP par Rasmus Lerdorf

Il est interprt (PHP 3) ou compil (PHP 4 et 5)

Il a une syntaxe proche du C (et de Perl)

Open-source et multi-plateforme
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 8 / 423
. . . . . .
PHP Bases du langage Introduction
Premier programme

Un premier programme index.php :

<html>
<head>
<title>Ma page PHP</title>
</head>
<body>
<?
echo "Bonjour,";
echo "On est le ".date('d/M/Y');
?>
</body>
</html>

La balise <? permet dentrer dans du code PHP

La balise ?> permet de sortir du code PHP

Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 9 / 423
. . . . . .
PHP Bases du langage Introduction
Inclusion de chiers
index.php :
<html>
<head>
<title>Titre</title>
</head>
<body>
<?
require("tete.inc.php");
include("corps.html");
require("pied.inc.php");
?>
</body>
</html>
Mais aussi :
include_once et require_once
tete.inc.php :
<?
echo "Bienvenue<br>";
?>
corps.html :
Corps du site<br>
pied.inc.php :
<?
echo date('d/M/Y');
?>
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 10 / 423
. . . . . .
PHP Bases du langage Introduction
Commentaires
<html>
<head>
<title>Titre</title>
</head>
<body>
<?
echo "Bonjour"; // commentaire
echo "Salut"; /* commentaire
sur plusieurs lignes. */
echo "Coucou"; # commentaire
?>
<!-- commentaire -->
</body>
</html>
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 11 / 423
. . . . . .
PHP Bases du langage Instructions, oprations, variables
Instructions, oprations et fonctions
<?
print(3+6*strlen("toto"));
?>
print
+
3 *
6 strlen
"toto"
retourne 1
retourne 27
retourne 24
retourne 4
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 12 / 423
. . . . . .
PHP Bases du langage Instructions, oprations, variables
Variables

En C ou en Java, une variable sont associs :

Un nom (ou identiant);

Un type;

Une zone mmoire (dsigne par une adresse).

int a;
a = 2;

En PHP, une variable sont associs :

Un nom (ou identiant) commenant par $;

Un conteneur dune valeur.

<?
$a = 2;
?>
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 13 / 423
. . . . . .
PHP Bases du langage Instructions, oprations, variables
Les types des valeurs

Les variables ne sont pas types mais les valeurs ont un type :

integer : 7, 14, 255, 0xFF

boolean : TRUE, FALSE

double : 1.95, 1.12e4

string : "bonjour", 'bonjour'

array : array(1,2,3)

object : new maclasse

ressource : mysql_connect("localhost", "moi", "")

null : null, NULL

<?
$a = 2;
var_dump($a); // affiche int(2)
?>
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 14 / 423
. . . . . .
PHP Bases du langage Instructions, oprations, variables
Oprateur dassignation

En PHP, on ne dclare pas les variables

Loprateur = aecte la valeur dune expression une variable :

<?
$a = expression;
?>

Loprateur = retourne la valeur de lexpression assigne la variable

$a = $b = 2
1. aecte la valeur 2
la variable $b
et retourne la valeur 2
2. aecte la valeur 2
la variable $a
et retourne la valeur 2
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 15 / 423
. . . . . .
PHP Bases du langage Instructions, oprations, variables
Aectations de valeur
<?
$variable = 12;
$variable2 = "toto";
$variable2 = $variable;
$variable = 12.12+3;
?>
$variable
12
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 16 / 423
. . . . . .
PHP Bases du langage Instructions, oprations, variables
Aectations de valeur
<?
$variable = 12;
$variable2 = "toto";
$variable2 = $variable;
$variable = 12.12+3;
?>
$variable
12
$variable2
"toto"
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 17 / 423
. . . . . .
PHP Bases du langage Instructions, oprations, variables
Aectations de valeur
<?
$variable = 12;
$variable2 = "toto";
$variable2 = $variable;
$variable = 12.12+3;
?>
$variable
12
$variable2
12
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 18 / 423
. . . . . .
PHP Bases du langage Instructions, oprations, variables
Aectations de valeur
<?
$variable = 12;
$variable2 = "toto";
$variable2 = $variable;
$variable = 12.12+3;
?>
$variable
15.12
$variable2
12
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 19 / 423
. . . . . .
PHP Bases du langage Instructions, oprations, variables
Oprateur dassignation de rfrence

Aectation de rfrence : loprande de droite est une variable

prcde du caractre '&' :
$var2 = &$var1;

Ici, loprateur = retourne la valeur prsente dans le conteneur de la

variable $var1.

Aprs laectation, la variable $var2 ne fait que rfrencer le

conteneur associ la variable $var1.
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 20 / 423
. . . . . .
PHP Bases du langage Instructions, oprations, variables
Aectations de rfrence
<?
$variable = 12;
$variable2 = &variable;
$variable2 = "toto";
$variable = 12.12;
?>
$variable
12
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 21 / 423
. . . . . .
PHP Bases du langage Instructions, oprations, variables
Aectations de rfrence
<?
$variable = 12;
$variable2 = &variable;
$variable2 = "toto";
$variable = 12.12;
?>
$variable
12
$variable2
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 22 / 423
. . . . . .
PHP Bases du langage Instructions, oprations, variables
Aectations de rfrence
<?
$variable = 12;
$variable2 = &variable;
$variable2 = "toto";
$variable = 12.12;
?>
$variable
"toto"
$variable2
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 23 / 423
. . . . . .
PHP Bases du langage Instructions, oprations, variables
Aectations de rfrence
<?
$variable = 12;
$variable2 = &variable;
$variable2 = "toto";
$variable = 12.12;
?>
$variable
12.12
$variable2
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 24 / 423
. . . . . .
PHP Bases du langage Instructions, oprations, variables
tat dune variable

La fonction isset($var) retourne :

FALSE si la variable nest pas initialise ou a la valeur NULL;

TRUE sinon.

La fonction empty($var) retourne :

TRUE si une des conditions suivantes est vrie :

la variable nest pas initialise

la variable a la valeur "" (chane vide)

la variable a la valeur 0 (entier)

la variable a la valeur 0.0 (ottant)

la variable a la valeur "0"

la variable a la valeur NULL

la variable a la valeur FALSE

la variable a la valeur array() (tableau vide)

FALSE sinon.

La fonction unset($var) dtruit une variable.

Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 25 / 423
. . . . . .
PHP Bases du langage Instructions, oprations, variables
Type dune variable

Pour connatre le type de la valeur contenue dans le conteneur dune

variable $var :

gettype($var) retourne une chane de caractres contenant le type

de la valeur (ex : "integer")

is_integer($var) ou is_int($var), is_double($var),

is_scalar($var), is_string($var), is_bool($var) ,
is_array($var) , is_object($var), is_ressource($var),
is_numeric($var)
<?
$var = 12;
if (is_integer($var)) {
echo "je suis un entier";
}
?>
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 26 / 423
. . . . . .
PHP Bases du langage Instructions, oprations, variables
Conversion de type

Oprateur de Cast :

$var2 = (nouveau_type)$var

ou mme $var = (nouveau_type)$var

<?
$var = "4.34 litre";
$var = (double)$var;
echo $var; // affiche 4.34
$var = (integer)$var;
echo $var; // affiche 4
$var = (boolean)$var;
echo $var; // affiche 1
?>

On peut aussi utiliser la fonction settype($var, "nouveau_type")

Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 27 / 423
. . . . . .
PHP Bases du langage Instructions, oprations, variables
Les constantes

Pour dnir une constante :

define("MA_CONSTANTE", 12.76, TRUE);
si le dernier paramtre vaut TRUE, le nom est insensible la casse

Pour savoir si une constante existe :

defined("MA_CONSTANTE")
retourne TRUE si la constante existe, FALSE sinon

Utilisation dune constante :

<?
define("TOTO", 12.45, TRUE);
echo TOTO, "<br/>";
echo ToTo, "<br/>";
if (defined("TOTO")) echo "ok";
?>
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 28 / 423
. . . . . .
PHP Bases du langage Instructions, oprations, variables
Oprateurs numriques
Ngation -$a Oppos de $a
Addition $a + $b Somme de $a et $b
Soustraction $a - $b Dirence de $a et $b
Multiplication $a * $b Produit de $a et $b
Division $a / $b Quotient de $a et $b
Modulo $a % $b Reste de $a divis par $b
Pre-incrmente ++$a Incrmente $a de 1, puis retourne $a
Post-incrmente $a++ Retourne $a, puis incrmente $a de 1
Pr-dcrmente --$a Dcrmente $a de 1, puis retourne $a
Post-dcrmente $a-- Retourne $a, puis dcrmente $a de 1
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 29 / 423
. . . . . .
PHP Bases du langage Instructions, oprations, variables
Oprateurs logiques
et $a and $b TRUE si $a et $b valent TRUE
ou $a or $b TRUE si $a ou $b valent TRUE
ou exclusif $a xor $b TRUE si $a ou $b est gal TRUE
mais pas les deux en mme temps
non !$a TRUE si $a nest pas gal TRUE
et $a && $b TRUE si $a et $b sont gaux TRUE
ou $a || $b TRUE si $a ou $b est gal TRUE

Attention la prcdence des oprateurs :

<?
$e = false || true; // (e = (false || true))
$e = false or true; // ((e = false) or true)
$e = false && true; // (e = (false && true))
$e = false and true; // ((e = false) and true)
?>
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 30 / 423
. . . . . .
PHP Bases du langage Instructions, oprations, variables
Oprateurs de comparaison
gal $a == $b TRUE si $a est gal $b
identique $a === $b
TRUE si $a et $b sont gaux
et ont le mme type
dirent $a != $b TRUE si $a est dirent de $b
dirent a <> b+ TRUE si $a est dirent de $b
non identique $a !== $b
TRUE si $a et $b sont dirents
ou nont pas le mme type
plus petit $a < $b TRUE si $a est strictement plus petit que $b
plus grand $a > $b TRUE si $a est strictement plus grand que $b
infrieur ou gal $a <= $b TRUE si $a est plus petit ou gal $b
suprieur ou gal $a >= $b TRUE si $a est plus grand ou gal $b
<?
var_dump(0 == "a"); // bool(true)
var_dump(0 === "a"); // bool(false)
?>
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 31 / 423
. . . . . .
PHP Bases du langage Instructions, oprations, variables
Oprateurs de chanes

Loprateur . permet de concatner deux chanes de caractres

(comme le + en Java) :
<?
var_dump("Bonj"."our");// string(7) "Bonjour"
var_dump(1 . 2); // string(2) "12"
var_dump(1.2); // float(1.2)
$a = "Bonj";
$a = $a . "our";
var_dump($a); // string(7) "Bonjour"
$a = "Bonj";
$a .= "our";
var_dump($a); // string(7) "Bonjour"
?>
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 32 / 423
. . . . . .
PHP Bases du langage Instructions, oprations, variables
Oprateurs de commande

Loprateur ` (guillements obliques) permet dexcuter des

commandes shell :
<?
$output = `ls -al`;
echo "<pre>$output</pre>";
?>

Remarque : cet oprateur nest pas actif lorsque le safemode est

activ ou lorsque la fonction shell_exec() est dsactive.
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 33 / 423
. . . . . .
PHP Bases du langage Instructions, oprations, variables
Oprateurs daectation combine
addition $a += $b additionne $a et $b puis aecte le rsultat $a
soustraction $a -= $b soustrait $a et $b puis aecte le rsultat $a
multiplication $a *= $b multiplie $a et $b puis aecte le rsultat $a
division $a /= $b divise $a et $b puis aecte le rsultat $a
modulo $a %= $b divise $a et $b puis aecte le reste $a
concatnation $a .= $b concatne $a et $b puis aecte le rsultat $a
<?
$a = 13;
$a += 12;
echo $a; // affiche 25
?>
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 34 / 423
. . . . . .
PHP Bases du langage Instructions, oprations, variables
Block dinstructions

Comme en C ou en Java, on dnit un block dinstructions laide

des accolades ouvrantes et fermantes { } :
<?
if ($a == 2) {
echo "instruction 1";
echo "instruction 2";
}
?>
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 35 / 423
. . . . . .
PHP Bases du langage Instructions, oprations, variables
if, boucles while et do...while

On utilise le if, du while et le do...while de la mme faon quen C

ou quen Java :
<?
$a = 1;
if ($a == 2) echo "oui"; else echo "non";
while ($a < 4) {
echo $a;
$a++;
}
do {
echo $a;
$a--;
} while ($a>0);
?>
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 36 / 423
. . . . . .
PHP Bases du langage Instructions, oprations, variables
boucle for

La syntaxe du for est la mme quen C ou quen Java :

for (expression; expression; expression) instruction;
<?
for ($a=0; $a<10; $a++) {
echo $a.":";
for ($b=0; $b<10; $b+=2)
echo ($a+$b)." ";
echo "<br/>";
}
?>
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 37 / 423
. . . . . .
PHP Bases du langage Instructions, oprations, variables
break et continue

la commande break arrte lexcution de la boucle :

<?
for ($i = 0; $i < 5; $i++) {
if ($tab[$i]=="bonjour") break;
echo $tab[$i];
}
?>

Truc
Toto
Bonjour
Bip
Salut

la commande continue arrte litration en cours de la boucle :

<?
for ($i = 0; $i < 5; $i++) {
if ($tab[$i]=="bonjour") continue;
echo $tab[$i];
}
?>

Truc
Toto
Bonjour
Bip
Salut
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 38 / 423
. . . . . .
PHP Bases du langage Instructions, oprations, variables
switch
<?
switch ($a) {
case 0 :
echo '0';
break;
case 1 :
echo '1';
break;
default :
echo 'default';
}
?>
<?
switch ($a) {
case "a" :
echo 'a';
break;
case "b" :
echo 'b';
break;
default :
echo 'default';
}
?>
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 39 / 423
. . . . . .
PHP Bases du langage Instructions, oprations, variables
Fonctions
<?
function ajouter(&$a /* 1 */ , $b=5 /* 2 */) {
$a+=$b;
}
$n = 12;
ajouter($n, 2);
var_dump($n); // affiche int(14)
ajouter($n);
var_dump($n); // affiche int(19)
?>
...
1 Passage dun paramtre par rfrence.
...
2 La valeur par dfaut du paramtre est 5.
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 40 / 423
. . . . . .
PHP Bases du langage Instructions, oprations, variables
Porte des variables
<?
function modif() {
$var = "salut";
}
$var = "toto";
var_dump($var); // 1
modif();
var_dump($var); // 2
?>
<?
function modif() {
global $var;
$var = "salut";
}
$var = "toto";
var_dump($var); // 3
modif();
var_dump($var); // 4
?>
...
1 string(4) "toto"
...
2 string(4) "toto"
...
3 string(4) "toto"
...
4 string(5) "salut"
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 41 / 423
. . . . . .
PHP Bases du langage Chanes de caractres
Achage des chanes
<?
$a = "bonjour";
$b = "salut";
$c = 2;
echo "$a $b\n"; // 1
echo '$a $b\n'; // 2
echo "\n";
echo "$a $b{$c}\n"; // 3
echo date('d')."\n"; // 4
echo "date('d')\n"; // 5
?>
...
1 bonjour salut
...
2 $a $b\n
...
3 bonjour l
...
4 18
...
5 date('d')
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 42 / 423
. . . . . .
PHP Bases du langage Chanes de caractres
Les caractres
<?
$chaine="ABCDEF";
for ($i = 0; $i<strlen($chaine); $i++) {
echo ord($chaine{$i})."\n"; // 1
}
$chaine="";
for ($i = 0; $i<6; $i++) {
$c = rand(65,90);
$chaine.=chr($c);
}
echo "$chaine\n"; // 2
?>
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 43 / 423
...
1

65
66
67
68
69
70
...
2 GZXNIY
. . . . . .
PHP Bases du langage Chanes de caractres
Achage format
<?
$chaine = "Bonjour";
$nombre = "65";
$valeur = "65535";
$flotant = "12.2345";
printf("%s\n", $chaine); // 1
printf("%c %d\n", $nombre, $nombre); // 2
printf("%x %o\n", $valeur, $valeur); // 3
printf("%'#8.3f\n", $flotant); // 4
$a = sprintf("%'#8.3f", $flotant);
var_dump($a); // 5
$a = array("65", "66","67");
vprintf("%c %c %c\n", $a); // 6
$b = vsprintf("%c %c %c", $a);
var_dump($b); // 7
?>
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 44 / 423
...
1 Bonjour
...
2 A 65
...
3 177777
...
4 ##12.235
...
5 string(8)
##12.235
...
6 A B C
...
7 string(5) A B C
. . . . . .
PHP Bases du langage Chanes de caractres
Modication de la casse
<?
$chaine = "PHP est super bien !\n";
echo strtolower($chaine); /* 1 */
echo strtoupper($chaine); /* 2 */
echo ucwords($chaine); /* 3 */
echo ucfirst($chaine); /* 4 */
?>
...
1 php est super bien !
...
2 PHP EST SUPER BIEN !
...
3 PHP Est Super Bien !
...
4 PHP est super bien !
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 45 / 423
. . . . . .
PHP Bases du langage Chanes de caractres
Gestion des espaces
<?
$a=" ...Salut././.";
echo "[".ltrim($a)."]\n"; /* 1 */
echo "[".ltrim($a," .")."]\n"; /* 2 */
echo "[".rtrim($a,"./")."]\n"; /* 3 */
echo "[".trim($a," ./")."]\n"; /* 4 */
?>
...
1 [...Salut././.]
...
2 [Salut././.]
...
3 [ ...Salut]
...
4 [Salut]
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 46 / 423
. . . . . .
PHP Bases du langage Chanes de caractres
Caractres spciaux dans les URL et en XHTML
<?
$a="<b>dtruire</b>";
$b=htmlentities($a);
echo $b."\n"; /* 1 */
$c=html_entity_decode($b);
echo $c."\n"; /* 2 */
$b=strip_tags($a);
echo $b."\n"; /* 3 */
$b=urlencode($a);
echo $b."\n"; /* 4 */
$c=urldecode($b);
echo $c."\n"; /* 5 */
?>
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 47 / 423
...
1 &lt;b&gt;d&eacute;truire&lt;b&gt;
...
2 <b>dtruire</b>
...
3 dtruire
...
4 %3Cb%3Ed%E9truire%3C%2Fb%3E
...
5 <b>dtruire</b>
. . . . . .
PHP Bases du langage Chanes de caractres
Recherche de sous-chanes
<?
$ch = "bonjour salut bonjour";
$nb = substr_count($ch, "bonjour");
var_dump($nb); /* 1 */
$ch2 = str_replace("bonjour", "salut", $ch);
var_dump($ch2); /* 2 */
$pos = strpos($ch,"salut");
var_dump($pos); /* 3 */
$pos = strpos($ch,"Salut");
var_dump($pos); /* 4 */
$pos = stripos($ch,"Salut");
var_dump($pos); /* 5 */
$ch3 = substr($ch,8,5);
var_dump($ch3); /* 6 */
?>
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 48 / 423
...
1 int(2)
...
2 string(17) "salut salut salut"
...
3 int(8)
...
4 bool(false)
...
5 int(8)
...
6 string(5) "salut"
. . . . . .
PHP Bases du langage Chanes de caractres
Comparaison de chanes de caractres
<?
$ch1=11;
$ch2="11toto";
var_dump($ch1); /* 1 */
var_dump($ch2); /* 2 */
var_dump($ch1==$ch2); /* 3 */
var_dump($ch1===$ch2); /* 4 */
var_dump("$ch1"==$ch2); /* 5 */
var_dump($ch1*$ch2); /* 6 */
var_dump("$ch1"*$ch2); /* 7 */
?>
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 49 / 423
...
1 int(11)
...
2 string(6) "11toto"
...
3 bool(true)
...
4 bool(false)
...
5 bool(false)
...
6 int(121)
...
7 int(121)
. . . . . .
PHP Bases du langage Chanes de caractres
Comparaison de chanes de caractres
<?
var_dump(strcmp("toto2","toto2"));
var_dump(strcmp("toto12","toto2"));
var_dump(strcmp("toto2","toto12"));
var_dump(strcasecmp("toto","ToTo"));
var_dump(strnatcmp("toto12","toto2"));
?>
<?
$ch1 = "abc";
$ch2 = "bcd";
if ($ch1 < $ch2) echo "<"; else echo ">";
?>
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 50 / 423
int(0)
...
1
int(-1)
...
2
int(1)
...
3
int(0)
...
4
int(1)
...
5
. . . . . .
PHP Bases du langage Tableaux
Tableaux

On peut indicer les tableaux avec des entiers ou des chanes de

caractres;

La fonction count($tab) retourne le nombre dlments prsents

dans le tableau.
<?
$a[2] = 12;
$a[4] = 23;
$a["toto"] = 12.13;
var_dump($a); /* 1 */
$b = count($a);
var_dump($b); /* 2 */
?>
...
1

array(3) {
[2] => int(12)
[4] => int(23)
[toto] => oat(12.13)
[cl] => valeur
}
...
2 int(3)
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 51 / 423
. . . . . .
PHP Bases du langage Tableaux
Tableaux

Le mot cl array : Il prend un nombre variable de paramtres sous la

forme cl => valeur (ou simplement valeur) :
<?
$a = array(12=>3, "a"=>12.12, 15, "c", "1"=>2);
var_dump($a); /* 1 */
$a = array(1,2,3,4);
var_dump($a); /* 2 */
?>
...
1

array(5) {
[12] => int(3)
[a] => oat(12.12)
[13] => int(15)
[14] => string(1) c
[1] => int(2)
}
...
2

array(4) {
[0] => int(1)
[1] => int(2)
[2] => int(3)
[3] => int(4)
}
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 52 / 423
. . . . . .
PHP Bases du langage Tableaux
Intervalles
<?
$a=range(1,4);
var_dump($a); /* 1 */
$a=range(0,30,10);
var_dump($a); /* 2 */
$a=range('d','g');
var_dump($a); /* 3 */
?>
...
1

array(4) {
[0] => int(1)
[1] => int(2)
[2] => int(3)
[3] => int(4)
}
...
2

array(4) {
[0] => int(0)
[1] => int(10)
[2] => int(20)
[3] => int(30)
}
...
3

array(4) {
[0] => string(1) d
[1] => string(1) e
[2] => string(1) f
[3] => string(1) g
}
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 53 / 423
. . . . . .
PHP Bases du langage Tableaux
R-indexation
<?
$a = array(1,"a"=>2);
$a[] = 3;
var_dump($a); /* 1 */
unset($a[1]);
$a[] = 4;
var_dump($a); /* 2 */
$a = array_values($a);
var_dump($a); /* 3 */
?>
...
1

array(3) {
[0] => int(1)
[a] => int(2)
[1] => int(3)
}
...
2

array(3) {
[0] => int(1)
[a] => int(2)
[2] => int(4)
}
...
3

array(3) {
[0] => int(1)
[1] => int(2)
[2] => int(4)
}
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 54 / 423
. . . . . .
PHP Bases du langage Tableaux
Tableaux multidimensionnels
<?
$a = array(12=>array(1,15=>2), 15=>2);
var_dump($a); /* 1 */
var_dump($a[12][15]); /* 2 */
$a[12][20] = 2;
var_dump($a[12]); /* 3 */
?>
...
1

array(2) {
[12]=> array(3) {
[0]=> int(1)
[15]=> int(2)
}
[15]=> int(2)
}
...
3

array(4) {
[0] => int(1)
[15] => int(2)
[20] => int(2)
}
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 55 / 423
...
2 int(2)
. . . . . .
PHP Bases du langage Tableaux
foreach

La boucle foreach parcourt tous les couples cl valeur contenus

dans un tableau :
<?
$a = array(1=>12, "a"=>12.12, "c"=>3, 4);
foreach ($a as $k=>$v)
echo $k."=>".$v."\n"; /* 1 */
foreach ($a as $v)
echo $v."\n"; /* 2 */
?>
...
1

1=>12
a=>12.12
c=>3
2=>4
...
2

12
12.12
3
4
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 56 / 423
. . . . . .
PHP Bases du langage Tableaux
reset et each
<?
$a = array(1=>12, "a"=>12.12, "c"=>3, 4);
reset($a);
while ($tab=each($a))
echo $tab[0]."=>".$tab[1]."\n"; /* 1 */
reset($a);
while ($tab=each($a))
echo $tab["key"]."=>".$tab["value"]."\n"; /* 1 */
?>
...
1

1=>12
a=>12.12
c=>3
2=>4
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 57 / 423
. . . . . .
PHP Bases du langage Tableaux
list

la fonction list aecte plusieurs variables simultanment :

<?
$a = array("a", 12, "c");
list($x,$y,$z)=$a;
var_dump($x); /* 1 */
var_dump($y); /* 2 */
var_dump($z); /* 3 */
list($i,,$j)=$a;
var_dump($i); /* 4 */
var_dump($j); /* 5 */
list($i,$j)=$a;
var_dump($i); /* 6 */
var_dump($j); /* 7 */
?>
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 58 / 423
...
1 string(1) a
...
2 int(12)
...
3 string(1) c
...
4 string(1) a
...
5 string(1) c
...
6 string(1) a
...
7 int(12)
. . . . . .
PHP Bases du langage Tableaux
list et each
<?
$a = array(1=>12, "a"=>12.12, "c"=>3, 4);
reset($a);
while (list($k,$v)=each($a))
echo $k."=>".$v."\n"; /* 1 */
?>
...
1

1=>12
a=>12.12
c=>3
2=>4
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 59 / 423
. . . . . .
PHP Bases du langage Tableaux
Manipulation dun tableau

array_push($tab, $var, $var2, ) :

empile des valeurs la n du tableau

$var = array_pop($tab) :
dpile une valeur situe la n du tableau

array_unshift($tab, $var, $var2, ) :

ajoute des valeurs au dbut du tableau

$var = array_shift($tab) :
supprime et retourne la premire valeur du tableau
array_unshift
array_shift
array_push
array_pop
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 60 / 423
. . . . . .
PHP Bases du langage Tableaux
Manipulation dun tableau
<?
$a=array(1, "a"=>2, 3);
array_push($a, 12.12);
array_unshift($a, "toto");
var_dump($a); /* 1 */
$b = array_pop($a);
var_dump($b); /* 2 */
$c = array_shift($a);
var_dump($c); /* 3 */
?>
...
1

array(5) {
[0] => string(4) toto
[1] => int(1)
[a] => int(2)
[2] => int(3)
[3] => oat(12.12)
}
...
2 oat(12.12)
...
3 string(4) toto
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 61 / 423
. . . . . .
PHP Bases du langage Tableaux
Fusion de tableaux
<?
$a=array(1,"a"=>2, 3, "b"=>4, 4=>5);
$b=array("c"=>6, 1=>7, 8, "b"=>9);
$c=array_merge($a,$b);
print_r($c); /* 1 */
$c=array_merge_recursive($a,$b);
print_r($c); /* 2 */
?>
...
1

Array (
[0] => 1
[a] => 2
[1] => 3
[b] => 9
[2] => 5
[c] => 6
[3] => 7
[4] => 8
)
...
2

Array (
[0] => 1
[a] => 2
[1] => 3
[b] => Array ( [0] => 4 [1] => 9 )
[2] => 5
[c] => 6
[3] => 7
[4] => 8
)
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 62 / 423
. . . . . .
PHP Bases du langage Tableaux
Intersection et dirence de tableaux
<?
$a=array(1,"a"=>2, 3=>3, "b"=>4, 4=>5);
$b=array("c"=>1, 1=>3, 4);
$c=array_intersect($a,$b);
print_r($c); /* 1 */
$c=array_diff($a,$b);
print_r($c); /* 2 */
?>
...
1

Array (
[0] => 1
[3] => 3
[b] => 4
)
...
2

Array (
[a] => 2
[4] => 5
)
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 63 / 423
. . . . . .
PHP Bases du langage Tableaux
Tri de tableaux indics
<?
$a=array("a10", "b11", "b"=>"a9", "C12", "c12");
sort($a);
print_r($c); /* 1 */
rsort($a);
print_r($c); /* 2 */
natsort($a);
print_r($c); /* 3 */
natcasesort($a);
print_r($c); /* 4 */
?>
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 64 / 423
...
1

Array (
[0] => C12
[1] => a10
[2] => a9
[3] => b11
[4] => c12
)
...
2

Array (
[0] => c12
[1] => b11
[2] => a9
[3] => a10
[4] => C12
)
...
1

Array (
[4] => C12
[2] => a9
[3] => a10
[1] => b11
[0] => c12
)
...
2

Array (
[2] => a9
[3] => a10
[1] => b11
[0] => c12
[4] => C12
)
. . . . . .
PHP Bases du langage Tableaux
Tri personalis
<?
function comparaison($a, $b) {
return ($a[0]+$a[1]) - ($b[0]+$b[1]);
}
$c = array(array(1,5),array(2,2), array(1,4));
usort($c, "comparaison");
print_r($c); /* 1 */
?>
...
1

Array (
[0] => Array ([0] => 2 [1] => 2)
[1] => Array ([0] => 1 [1] => 4)
[2] => Array ([0] => 1 [1] => 5)
)
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 65 / 423
. . . . . .
PHP Bases du langage Tableaux
Tri de tableaux associatifs
<?
$a = array("a"=>"c", "b"=>"a", "c"=>"d");
asort($a);
print_r($a); /* 1 */
arsort($a);
print_r($a); /* 2 */
sort($a);
print_r($a); /* 3 */
?>
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 66 / 423
...
1

Array (
[b] => a
[a] => c
[c] => d
)
...
2

Array (
[c] => d
[a] => c
[b] => a
)
...
3

Array (
[0] => a
[1] => c
[2] => d
)
. . . . . .
PHP Bases du langage Tableaux
Tri de tableaux associatifs
<?
$a = array("a"=>"c", "b"=>"a", "c"=>"d");
ksort($a);
print_r($a); /* 1 */
krsort($a);
print_r($a); /* 2 */
?>
...
1

Array (
[a] => c
[b] => a
[c] => d
)
...
2

Array (
[c] => d
[b] => a
[a] => c
)
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 67 / 423
. . . . . .
PHP Bases du langage Tableaux
Tri de tableaux associatifs
<?
function compar1($a,$b) {
return ($a[0]+$a[1])-($b[0]+$b[1]);
}
function compar2($a,$b) {
return strlen($a) - strlen($b);
}
$a = array("aa"=>array(0,1),
"aaa"=>array(2,2),
"a"=>array(1,2));
uasort($a,"compar1");
print_r($a); /* 1 */
uksort($a,"compar2");
print_r($a); /* 2 */
?>
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 68 / 423
...
1

Array (
[aa] => Array([0] => 0 [1] => 1)
[a] => Array([0] => 1 [1] => 2)
[aaa] => Array([0] => 2 [1] => 2)
)
...
2

Array (
[a] => Array([0] => 1 [1] => 2)
[aa] => Array([0] => 0 [1] => 1)
[aaa] => Array([0] => 2 [1] => 2)
)
. . . . . .
PHP Bases du langage Tableaux
Tri de tableaux associatifs
<?
function filtre($a) {
return ($a[0] <= $a[1]);
}
$a = array("a"=>array(0,1),
"b"=>array(3,2),
"c"=>array(1,2),
"d"=>array(1,0));
$selection = array_filter($a, "filtre");
print_r($selection); /* 1 */
?>
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 69 / 423
...
1

Array (
[a] => Array([0] => 0 [1] => 1)
[c] => Array([0] => 1 [1] => 2)
)
. . . . . .
PHP Bases du langage Tableaux
Appliquer une fonction un tableau
<?
function affichage($a) {
echo "<b>".$a[0]."</b> : ".$a[1]."<br/>\n"; /* 1 */
}
$a = array(array(0,1),
array(3,2),
array(1,2),
array(1,0));
array_walk($a, "affichage");
?>
...
1

<b>0</b> : 1<br/>
<b>3</b> : 2<br/>
<b>1</b> : 2<br/>
<b>1</b> : 0<br/>
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 70 / 423
. . . . . .
PHP Bases du langage Tableaux
Chanes et tableaux
<?
$ch = "J'aime le PHP. Vive le web!";
$tab = explode(' ',$ch);
print_r($tab); /* 1 */
$tab = explode('.',$ch);
print_r($tab); /* 2 */
$tab = array("J'aime", "le", "PHP.");
$ch = implode(" ",$tab);
echo $ch."\n"; /* 3 */
$ch = implode("--",$tab);
echo $ch."\n"; /* 4 */
?>
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 71 / 423
...
1

Array (
[0] => Jaime
[1] => le
[2] => PHP.
[3] => Vive
[4] => le
[5] => web!
)
...
2

Array (
[0] => Jaime le PHP
[1] => Vive le web!
)
...
3 Jaime le PHP.
...
4 Jaime- -le- -PHP.
. . . . . .
PHP Bases du langage Tableaux
Autres fonctions utiles sur les tableaux

La fonction array_unique($tab) supprime les valeurs en double

dans le tableau (une seule cl est conserve).

La fonction $slice = array_slice($t, $p, $n) extrait les $n

lments du tableau $t partir de la position $p.
(voir la documentation pour les autres utilisations)

La fonction shuffle($a) mlange les lments dun tableau et

renumrote les lments.
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 72 / 423
. . . . . .
PHP Formulaires Introduction
GET
Protocole HTTP
Client
Serveur
1. Je veux toto.php
2. Sortie de l'excution
de toto.html
Requte :
GET /toto.php?n1=10&n2=15 HTTP/1.0
Host: example.com
Referer: http://example2.com/
User-Agent: Mozilla/5.0 (X11; U; Linux
x86_64; fr; rv:1.9.0.4) Gecko/2008111217
Fedora/3.0.4-1.fc10 Firefox/3.0.4
Rponse :
HTTP/1.0 200 OK
Date: Fri, 31 Dec 1999 23:59:59 GMT
Server: Apache/0.8.4
Content-Type: text/html
Content-Length: 59
Expires: Sat, 01 Jan 2000 00:59:59 GMT
Last-modied: Fri, 09 Aug 1996 14:21:40
GMT
<TITLE>Exemple</TITLE>
<P>Rsultat : 25.</P>
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 73 / 423
. . . . . .
PHP Formulaires Introduction
POST
Protocole HTTP
Client
Serveur
1. Je veux toto.php
2. Sortie de l'excution
de toto.html
Requte :
POST /toto.php HTTP/1.0
Host: example.com
Referer: http://example2.com/
User-Agent: Mozilla/5.0 (X11; U; Linux
x86_64; fr; rv:1.9.0.4) Gecko/2008111217
Fedora/3.0.4-1.fc10 Firefox/3.0.4
?n1=10&n2=15
Rponse :
HTTP/1.0 200 OK
Date: Fri, 31 Dec 1999 23:59:59 GMT
Server: Apache/0.8.4
Content-Type: text/html
Content-Length: 59
Expires: Sat, 01 Jan 2000 00:59:59 GMT
Last-modied: Fri, 09 Aug 1996 14:21:40
GMT
<TITLE>Exemple</TITLE>
<P>Rsultat : 25.</P>
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 74 / 423
. . . . . .
PHP Formulaires Introduction
Les formulaires en HTML
<input type="reset"... />
<input type="le"... />
<input type="checkbox".../>
<label>...</label>
<input type="radio".../>
<input type="text".../>
<textarea>...</textarea>
<input type="submit"... />
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 75 / 423
. . . . . .
PHP Formulaires Introduction
Les formulaires en HTML
<html>
<body>
<form action="page.php" method="post">
<fieldset>
<legend>Qui etes-vous ?</legend>
<label>Nom :</label>
<input type="text" name="nom" value="votre nom"/>
<label>Prenom :</label>
<input type="text" name="prenom" value="votre prenom"/>
<input type="radio" name="sexe" value="homme"/>Homme
<input type="radio" name="sexe" value="femme"/>Femme
<label>Photo :</label>
<input type="file" name="photo" accept="image/jpeg" />
</fieldset>
<fieldset>
<legend>Votre commentaire</legend>
<textarea name="commentaire">votre commentaire</textarea>
</fieldset>
<center>
<input type="checkbox" name="valid" value="valid"/>J accepte...
<input type="reset" value="Effacer">
<input type="submit" value="Envoyer">
</center>
</form>
</body>
</html>

Envoi des donnes au serveur par la mthode POST sur la page

page.php lorsque lutilisateur clique sur le bouton Envoyer.
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 76 / 423
. . . . . .
PHP Formulaires Variables $_POST et $_GET
Variables super-globales

Les variables super-globales sont accessibles dans tous les contextes

Fichier test.php :
<?
function toto() {
echo $_SERVER["PHP_SELF"]."\n"; /* 1 */
}
toto();
echo $_SERVER["PHP_SELF"]."\n"; /* 1 */
?>
...
1 test.php
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 77 / 423
. . . . . .
PHP Formulaires Variables $_POST et $_GET
Variable $_POST

Fichier index.html
<html>
<body>
<form method="post" action="traitement.php">
<label>Nom : </label>
<input type="text" name="nom"/>
<input type="submit" value="Envoyer"/>
</form>
</body>
</html>

Fichier traitement.php
<html>
<body>
Bonjour <? echo $_POST['nom']; ?>.</br>
</body>
</html>
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 78 / 423
Requte :
Rponse :
POST traitement.php
...
nom=Superman
...
Bonjour Superman.
...
. . . . . .
PHP Formulaires Variables $_POST et $_GET
Variable $_POST
GET index.php
contenu de
index.php
POST traitement.php
...
nom=Superman
Bonjour Superman
Client Serveur
Saisie du nom
Clic sur "Envoyer"
Gnration de
la page par PHP
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 79 / 423
. . . . . .
PHP Formulaires Variables $_POST et $_GET
Variable $_GET

Fichier index.html
<html>
<body>
<form method="get" action="traitement.php">
<label>Nom : </label>
<input type="text" name="nom"/>
<input type="submit" value="Envoyer"/>
</form>
</body>
</html>

Fichier traitement.php
<html>
<body>
Bonjour <? echo $_GET['nom']; ?>.</br>
</body>
</html>
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 80 / 423
Requte :
Rponse :
GET traitement.php?nom=superman
...
...
Bonjour Superman.
...
. . . . . .
PHP Formulaires Variables $_POST et $_GET
Variable $_GET
GET index.php
contenu de
index.php
GET traitement.php
?nom=Superman
...
Bonjour Superman
Client Serveur
Saisie du nom
Clic sur "Envoyer"
Gnration de
la page par PHP
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 81 / 423
. . . . . .
PHP Formulaires Applications
Bouton radio

Fichier index.html :
<html>
<body>
<form method="post" action="traitement.php">
<input type="radio" name="sexe" value="homme">Homme</br>
<input type="radio" name="sexe" value="femme">Femme</br>
<input type="submit" value="Envoyer"/>
</form>
</body>
</html>

Fichier traitement.php :
<html>
<body>
<? if ($_POST['sexe']==='homme') { ?>
Bonjour, vous etes un homme.
<?} else {?>
Bonjour, vous etes une femme.
<? } ?>
</body>
</html>
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 82 / 423
. . . . . .
PHP Formulaires Applications
Avec un seul chier
<html>
<body>
<? if (isset($_POST['nom'])) {?>
Bonjour <? echo $_POST['nom']; ?>
<?} else {?>
<form method="post" action="<? echo $_SERVER["PHP_SELF"]; ?>" >
<label>Nom : </label>
<input type="text" name="nom"/>
<input type="submit" value="Envoyer"/>
</form>
<?}?>
</body>
</html>
Bonjour Superman
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 83 / 423
. . . . . .
PHP Formulaires Applications
Valeurs multiples et checkboxes

Fichier index.html :
<html>
<body>
<form method="post" action="traitement.php">
<input type="checkbox" name="choix[]" value="A">A</br>
<input type="checkbox" name="choix[]" value="B">B</br>
<input type="checkbox" name="choix[]" value="C">C</br>
<input type="submit" value="Envoyer"/>
</form>
</body>
</html>

Fichier traitement.php :
<html>
<body>
Vous avez coche :
<? foreach ($_POST['choix'] as $v)
echo "$v "; ?>
<br/>
</body>
</html>
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 84 / 423
Vous avez coch : A C
. . . . . .
PHP Formulaires Applications
Maintient de ltat du formulaire
<html>
<body>
<form method="post" action="<? echo $_SERVER["PHP_SELF"]; ?>">
<input type="text" name="a" />
<input type="text" name="b" />
<input type="submit" value="Envoyer"/>
</form>
<? if (isset($_POST['a']) && isset($_POST['b'])) {?>
Resultat : <? echo $_POST['a']+$_POST['b']; ?>
<?}?>
</body>
</html>
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 85 / 423
. . . . . .
PHP Formulaires Applications
Maintient de ltat du formulaire
<html>
<body>
<form method="post" action="<? echo $_SERVER["PHP_SELF"]; ?>">
<input type="text" name="a" value="<? echo $_POST['a'];?>" />
<input type="text" name="b" value="<? echo $_POST['b'];?>" />
<input type="submit" value="Envoyer"/>
</form>
<? if (isset($_POST['a']) && isset($_POST['b'])) {?>
Resultat : <? echo $_POST['a']+$_POST['b']; ?>
<?}?>
</body>
</html>
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 86 / 423
. . . . . .
PHP Formulaires Transfert de chiers
Transfert de chiers
<html>
<body>
<form enctype="multipart/form-data" method="post"
action="<? echo $_SERVER["PHP_SELF"]; ?>">
<input type="file" name="fichier" />
<input type="submit" value="Envoyer" />
</form>
<? var_dump($_FILES); /* 1 */ ?>
</body>
</html>
...
1

array(1) {
[chier]=> array(5) {
[name]]=> string(3) a.c
[type]=> string(10) text/plain
[tmp_name]=> string(14) /tmp/phpi5JOt8
[error]=> int(0)
[size]=> int(185)
}
}
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 87 / 423
. . . . . .
PHP Formulaires Transfert de chiers
Transfert de chiers
<html>
<body>
<form enctype="multipart/form-data" method="post"
action="<? echo $_SERVER["PHP_SELF"]; ?>">
<input type="file" name="fichier" />
<input type="submit" value="Envoyer" />
</form>
<? if (isset($_FILES['fichier'])) {
$tmpname = $_FILES['fichier']['tmp_name'];
$newname = "fichier_".$_FILES['fichier']['name'];
echo $tmpname." ".$newname."<br/>";
$result = move_uploaded_file($tmpname, $newname);
if ($result==TRUE) echo "transfert ok !<br/>";
else echo "erreur : ".$_FILES['fichier']['error'];
}
?>
</body>
</html>
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 88 / 423
. . . . . .
PHP Formulaires Transfert de chiers
Transfert de chiers
Les erreurs possibles :

UPLOAD_ERR_OK (valeur 0) :
pas derreur

UPLOAD_ERR_INI_SIZE (valeur 1) :
la taille du chier dpasse la valeur prsente dans le chier php.ini.

UPLOAD_ERR_FORM_SIZE (valeur 2) :
la taille du chier dpasse celle xe dans le formulaire
(champ cach MAX_FILE_SIZE).

UPLOAD_ERR_PARTIAL (valeur 3) :
le chier a t partiellement tlcharg.

UPLOAD_ERR_NO_FILE (valeur 4) :
aucun chier na t tlcharg.
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 89 / 423
. . . . . .
PHP Fichiers Ouverture
Ouverture dun chier
<?
$id = fopen("toto.txt", "w");
var_dump($id); /* 1 */
fclose($id);
var_dump($id); /* 2 */
$id = tmpfile();
var_dump($id); /* 3 */
fclose($id);
var_dump($id); /* 4 */
?>

Une bonne faon de faire :

<?
$id = fopen("toto.txt", "w");
if ($id===FALSE) die("Erreur");
$r = fclose($id);
if ($r===FALSE) die("Erreur");
?>
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 90 / 423
...
1 resource(5) of type (stream)
...
2 resource(5) of type (Unknown)
...
3 resource(6) of type (stream)
...
4 resource(6) of type (Unknown)
. . . . . .
PHP Fichiers Ouverture
Ouverture dun chier
r : ouverture en lecture seule et la lecture commence au dbut du chier.
Le chier doit exister.
r+ : le chier est ouvert en lecture et criture, les oprations commencent
au dbut. Le chier doit exister.
w : le chier est ouvert en criture et lcriture commence au dbut du
chier. Le chier est cr sil nexiste pas.
w+ : le chier est ouvert en criture et en lecture et les oprations
commencent au dbut du chier. Le chier est cr sil nexiste pas.
a : le chier est ouvert en criture et lcriture commence la n du
chier. Le chier est cr sil nexiste pas.
a+ : le chier est ouvert en criture et lecture. Lcriture commence la
n et la lecture au dbut. Le chier est cr sil nexiste pas.
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 91 / 423
. . . . . .
PHP Fichiers Verrouillage
Verrouillage de chiers

Problme de concurrence :
Plusieurs clients demandent une page simultanment
deux scripts modient un chier en mme temps
Conit

Solution : verrouillage du chier

<?
$id = fopen("toto.txt", "w");
echo $id."\n";
flock($id, LOCK_EX); // Verrouillage en lecture et en criture
....
flock($id, LOCK_UN); // Dverrouillage
fclose($id);
?>

LOCK_SH : Verrouillage en criture seulement

Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 92 / 423
. . . . . .
PHP Fichiers criture
criture dans un chier
<?
$id = fopen("toto.txt", "w");
flock($id, LOCK_SH);
fwrite($id, "mon texte\n"); // criture de "mon texte$\backslash${}n"
$nb = 100;
fwrite($id, $nb); // criture de "100"
flock($id, LOCK_UN);
fclose($id);
?>

Contenu du chier toto.txt la n de lexcution :

mon texte
100
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 93 / 423
. . . . . .
PHP Fichiers criture
Exemple dcriture dans un chier
<html>
<body>
<form action="<? echo $_SERVER['PHP_MYSELF']; ?>" method="post">
<b>Nom :</b> <input type="text" name="nom"/><br/>
<b>Prenom :</b> <input type="text" name="prenom"/><br/>
<input type="submit" value="Envoyer"/>
</form>
<?
if (isset($_POST['nom']) && isset($_POST['prenom'])) {
$nom = $_POST['nom'];
$prenom = $_POST['prenom'];
$id = fopen("liste.txt", "a");
if ($id===FALSE) die("erreur");
flock($id, LOCK_SH);
fwrite($id, "$nom;$prenom\n");
flock($id, LOCK_UN);
$r = fclose($id);
if ($r===FALSE) die("erreur");
}
?>
</body>
</html>
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 94 / 423
jean;pascal
didier;julien
paul;jacques
michel;jean
. . . . . .
PHP Fichiers Lecture
Lecture dans un chier

Contenu du chier toto.txt avant lexcution :

mon texte
100
<?
$id = fopen("toto.txt", "r");
$s = fgets($id, 256);
var_dump($s); // string(10) "mon texte$\backslash$n"
$s = fgets($id, 256);
var_dump($s); // string(4) "100$\backslash$n"
fclose($id);
?>

La fonction fgets prend deux paramtres : une ressource pointant

sur un chier et le nombre maximum de caractres lire
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 95 / 423
. . . . . .
PHP Fichiers Lecture
Exemple de lecture dans un chier
<table border="1">
<tr><th>Nom</th><th>Prenom</th></tr>
<?
$id = fopen("liste.txt", "r");
while ($ligne=fgets($id)) {
$t = explode(";", $ligne);
echo "<tr><td>$t[0]</td><td>$t[1]</td></tr>";
}
flcose($id);
?>
</table>
jean;pascal
didier;julien
paul;jacques
michel;jean

Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 96 / 423

. . . . . .
PHP Fichiers Lecture
Lecture de donnes formates
<table border="1">
<tr><th>Nom</th><th>Prenom</th></tr>
<?
$id = fopen("liste.txt", "r");
while ($t=fgetcsv($id, 100 /* 1 */, ";" /* 2 */)) {
echo "<tr><td>$t[0]</td><td>$t[1]</td></tr>";
}
flcose($id);
?>
</table>
jean;pascal
didier;julien
paul;jacques
michel;jean

Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 97 / 423

...
1 : nombre maximum de caractres lire
...
2 : caractre sparateur
. . . . . .
PHP Fichiers Lecture
Lecture de la totalit dun chier
<table border="1">
<tr><th>Nom</th><th>Prenom</th></tr>
<?
$f = file("liste.txt");
foreach ($f as $ligne) {
$t = explode(";", $ligne);
echo "<tr><td>$t[0]</td><td>$t[1]</td></tr>";
}
?>
</table>
jean;pascal
didier;julien
paul;jacques
michel;jean

Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 98 / 423

. . . . . .
PHP Fichiers Manipulations de chiers
Manipulations de chiers

Copie de chiers :
<?
$res = copy("liste.txt", "liste2.txt");
if ($res===FALSE) die("erreur");
?>

Renommer un chier :
<?
$res = rename("liste.txt", "liste2.txt");
if ($res===FALSE) die("erreur");
?>

Supprimer un chier :
<?
$res = unlink("liste.txt");
if ($res===FALSE) die("erreur");
?>
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 99 / 423
. . . . . .
PHP Fichiers Manipulations de chiers
Manipulations de chiers

Existence :
<?
if (file_exists("liste.txt"))
echo "le fichier existe";
else echo "le fichier n'existe pas";
?>

Crer un chier vide :

<?
if (!file_exists("liste.txt"))
touch("liste.txt", time());
?>

Taille dun chier :

<?
$nombre_octets = filesize("liste.txt");
echo $nombre_octets;
?>
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 100 / 423
. . . . . .
PHP Fichiers Autres fonctions utiles
Autres fonctions utiles

is_file("fichier") = true sil sagit dun chier

is_readable("fichier") = true si le chier est dispo en lecture

is_writable("fichier") = true si le chier est dispo. en criture

filetype("fichier) = le type du chier

basename("img/truc/toto.php") = toto.php

realpath("toto.php") = chemin complet du chier

fseek($id, n) se positionne sur le n-me octet

rewind($id) se positionne au dbut du chier

ftell($id) = position courante du curseur dans le chier

fgetc($id) = le prochain caractre du chier

Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 101 / 423
. . . . . .
PHP Headers Introduction
Headers
Protocole HTTP
Client
Serveur
1. Je veux toto.html
2. Contenu de toto.html
Requte :
GET /toto.html HTTP/1.0
Host: example.com
Referer: http://example2.com/
User-Agent: Mozilla/5.0 (X11; U; Linux
x86_64; fr; rv:1.9.0.4) Gecko/2008111217
Fedora/3.0.4-1.fc10 Firefox/3.0.4
Rponse :
HTTP/1.0 200 OK
Date: Fri, 31 Dec 1999 23:59:59 GMT
Server: Apache/0.8.4
Content-Type: text/html
Content-Length: 59
Expires: Sat, 01 Jan 2000 00:59:59 GMT
Last-modied: Fri, 09 Aug 1996 14:21:40
GMT
<TITLE>Exemple</TITLE>
<P>page dexemple.</P>
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 102 / 423
. . . . . .
PHP Headers Modication des headers
Modication des headers

La fonction header(...) permet dajouter (ou de modier) des

informations prsentes dans len-tte retourn au client :
<?
...
if ($autorized) { ?>
<html>
<body>
Bienvenue</br>
</body>
</html>
<? } else
header('Location: http://www.google.fr');
?>

La fonction header doit tre appele avant que le moindre contenu

ne soit envoy
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 103 / 423
. . . . . .
PHP Headers Page non trouve
Error 404 : Page Not Found

Pour simuler le fait quune page na pas t trouve sur le serveur :

<?
header("HTTP/1.0 404 Not Found");
exit; // Termine l'excution du programme.
echo "Bienvenue"; // Cette instruction
// n'est pas excute.
?>

Attention :
<?
header("HTTP/1.0 404 Not Found");
echo "Bienvenue"; // "Bienvenue" est envoy au client...
exit; // trop tard !
?>
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 104 / 423
. . . . . .
PHP Headers Redirection
Redirection

Pour rediriger le client vers une autre page :

<?
if (!$autorized) {
header('Location: http://www.google.fr');
exit; // pour viter que la suite
// ne soit envoy au client...
}
...
?>

Pour rediriger le client aprs un certain dlai :

<?
echo "Vous allez etre redirige...<br/>"
header('Refresh:10; http://www.newsite.fr');
?>
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 105 / 423
. . . . . .
PHP Headers Content-Type et Content-Disposition
Content-Type et Content-Disposition

Il est possible denvoyer un chier texte en PHP :

<?
header('Content-Type: text/plain');
header('Content-Disposition: attachement;filename="a.txt"');
?>
contenu du fichier texte

Il est galement possible denvoyer une image :

<?
header('Content-Type: image/jpeg');
header('Content-Disposition: attachement;filename="a.jpg"');
readfile("image.jpg"); // crit le contenu du fichier ici !
?>
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 106 / 423
. . . . . .
PHP Headers Content-Type et Content-Disposition
Application : restreindre laccs un chier

Il est possible de restreindre laccs un chier :

<?
/* ... Initialisation de la variable "accespossible" */
if ($accespossible) {
header('Content-Type: application/pdf');
header('Content-Disposition: attachement;filename="a.pdf"');
readfile('doc.pdf');
exit;
} else { ?>
<html>
<body>
Vous n'avez pas acces a ce fichier !<br/>
</body>
</html>
<? }
?>

Attention : le chier ne doit pas tre accessible directement sur le

serveur, cest--dire, sans utiliser ce chier php.
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 107 / 423
. . . . . .
PHP Headers Content-Type et Content-Disposition
Types MIME (Multipurpose Internet Mail Extensions)

application/octet-stream : ux de donnes arbitraire

application/ogg : Ogg

application/pdf : PDF

application/xhtml+xml : XHTML

application/x-shockwave-ash : Flash

audio/mpeg : chier MP3 ou MPEG

audio/x-ms-wma : chier Windows Media Audio

audio/vnd.rn-realaudio : chier RealAudio

audio/x-wav : chier WAV

image/gif : image GIF

image/jpeg : image JPEG

image/png : image PNG

image/ti : image TIFF

text/css : Feuille de style

text/html : chier HTML

text/plain : Donnes textuelles

text/xml : chier XML

video/mpeg : vido MPEG-1

video/mp4 : vido MP4

video/quicktime : vido QuickTime

video/x-v : Vido Flash

Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 108 / 423
. . . . . .
PHP Cookies et sessions Cookies
Les cookies

Un cookie est un petit chier plac sur lordinateur du visiteur

Les cookies servent stocker de linformation chez le visiteur

PHP permet dcrire et de lire les cookies sur lordinateur du visiteur

Le visiteur peut interdire ou supprimer les cookies

Le visiteur peut modier les informations contenues dans les cookies

Chaque site peut crire un nombre limit de cookies sur chaque client

Un cookie ne doit pas dpasser 4 Kio

Remarque : les cookies sont souvent utiliss pour stocker chez le visiteur
ses prfrences (prsentation personnalise du site).
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 109 / 423
. . . . . .
PHP Cookies et sessions Cookies
criture des cookies

Pour crire un cookie, il faut utiliser la fonction setcookie :

<?
setcookie("nom", "valeur");
?>

Comme pour la fonction header, la fonction setcookie doit tre

appele avant dcrire sur la sortie standard.

Par dfaut, le cookie expire la fermeture du navigateur et est

accessible par toutes les pages de votre domaine. Pour changer cela :
<?
setcookie("nom",
"valeur",
time()+3600, // valable une heure
"/chemin/",
"www.domaine.com"
);
?>
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 110 / 423
. . . . . .
PHP Cookies et sessions Cookies
Lecture des cookies

La lecture des cookies se fait via la variable superglobale $_COOKIE :

Contenu de la page page1.php :

<?
setcookie("nom1", "valeur1");
setcookie("nom2", "valeur2");
?>
<a href="page2.html">page2</a>

Contenu de la page page2.php :

<?
echo $_COOKIE["nom1"]."</br>"; // affiche valeur1
echo $_COOKIE["nom2"]."</br>"; // affiche valeur2
?>

Attention : Les cookies ne sont pas immdiatement accessibles par la

page qui vient de les crer.
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 111 / 423
. . . . . .
PHP Cookies et sessions Cookies
Suppression du contenu dun cookie

Pour supprimer le contenu dun cookie :

<?
setcookie("nom"); // affecte la chane vide au cookie
?>

Attention :
La suppression du cookie est eective au rechargement de la page.
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 112 / 423
. . . . . .
PHP Cookies et sessions Cookies
Tableaux associatifs et cookies
Exemple avec des tableaux associatifs :

Contenu de la page page1.php :

<?
setcookie("tab['key1']", "valeur1");
setcookie("tab['key2']", "valeur2");
setcookie("tab['key3']", "valeur3");
?>
<a href="page2.html">page2</a>

Contenu de la page page2.php :

<?
foreach ($_COOKIE["tab"] as $cle=>$valeur) {
echo $cle."=>".$valeur." "; // 1
}
?>
...
1 key1=>valeur1 key2=>valeur2 key3=>valeur3
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 113 / 423
. . . . . .
PHP Cookies et sessions Cookies
Exemple dutilisation des cookies

Fin du chier index.php :

// Initialisation de la variable "couleur" (slide suivant) */
<?
function addColor($name, $label, $couleur) {
echo '<input type="radio" name="couleur" value="'.$name.'" ';
if ($couleur===$name) echo 'checked="checked"';
echo '/> '.$label;
}
?>
<html>
<body>
<font style="color:<? echo $couleur; ?>">Bonjour</font><br/>
<form action="<? echo $_SERVER['PHP_SELF']; ?>" method="post">
<fieldset><legend>Couleur de la police</legend>
<?
addColor('red', 'Rouge', $couleur);
addColor('blue', 'Bleu', $couleur);
?>
</fieldset><input type="submit"/>
</form>
</body>
</html>
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 114 / 423
. . . . . .
PHP Cookies et sessions Cookies
Exemple dutilisation des cookies

Au dbut du chier index.php :

<?
$couleur = 'red'; // couleur par dfaut
if (isset($_POST['couleur'])) { // traitement des donnes du formulaire
$couleur=$_POST['couleur'];
setcookie("couleur", $couleur); // sauvegarde de la prfrence chez le visiteur
} else if (isset($_COOKIE['couleur']))
$couleur=$_COOKIE['couleur']; // lecture de la prfrence chez le visiteur
?>
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 115 / 423
. . . . . .
PHP Cookies et sessions Sessions
Le mcanisme des sessions
Objectif : Conserver des informations dun mme client entre les pages.
Les tapes du mcanisme des sessions :
1. au dbut de chaque page, lappel de session_start() cre une
session ou restaure la session trouve sur le serveur via lidentiant de
session pass dans une requte GET, POST ou par un cookie.
2. Au moment de la cration de la session, chaque utilisateur se voit
attribuer un identiant (de session) compos de 26 caractres
alatoires. Il est transmit dune page lautre par lintermdiaire dun
cookie plac sur le poste du client, soit dans lURL.
3. le tableau superglobal $_SESSION permet de stocker des donnes lies
la session et accessibles sur toutes les pages du site.
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 116 / 423
. . . . . .
PHP Cookies et sessions Sessions
Exemples avec cookies
index.php :
<?
session_start();
$_SESSION['info']="moninformation";
echo '<a href="pagesuivante.php">page suivante</a>';
?>
pagesuivante.php :
<?
session_start();
echo $_SESSION['info']; // affiche moninformation
?>
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 117 / 423
. . . . . .
PHP Cookies et sessions Sessions
Sans cookies
Sans cookie, on peut transmettre lidentiant de session via lURL.
le contenu de $SID est de la forme PHPSESSID=identiant de 26 car.
index.php :
<?
session_start();
$_SESSION['info']="moninformation";
echo '<a href="pagesuivante.php?'.$ID.'">';
echo 'page suivante'
echo '</a>';
?>
pagesuivante.php :
<?
session_start();
echo $_SESSION['info']; // affiche moninformation
?>
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 118 / 423
. . . . . .
PHP Cookies et sessions Mcanisme dauthentication
Mcanisme dauthentication
<?
session_start();
if (isset($_POST['login'])
&& isset($_POST['passwd'])
&& verifierPassword($_POST['login'],
$_POST['passwd']))
$_SESSION['login'] = $_POST['login'];
else if (isset($_GET['deconnexion']))
$_SESSION['login']=null;
$login = null;
if (isset($_SESSION['login']))
$login = $_SESSION['login'];
if ($login===null) include("FormulaireConnexion.php");
else include("FormulaireDeconnexion.php");
?>
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 119 / 423
. . . . . .
PHP Cookies et sessions Mcanisme dauthentication
Mcanisme dauthentication
FormulaireConnexion.php :
<form method="POST" action="index.php">
login :
<input type="text" name="login"/><br/>
mot de passe :
<input type="password" name="passwd"/><br/>
<input type="submit"/>
</form>
FormulaireDeconnexion.php :
Bonjour <? echo $login; ?>,<br/>
Pour vous deconnecter, cliquez
<a href="index.php?deconnexion">ici</a>.
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 120 / 423
. . . . . .
PHP Cookies et sessions Mcanisme dauthentication
Mcanisme dauthentication
image.php :
<?
session_start();
$login = null;
if (isset($_SESSION['login']))
$login = $_SESSION['login'];
if ($login===null) {
header("Location:index.php");
} else {
header("Content-Type:image/jpeg");
readfile("img/toto.jpg");
}
?>
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 121 / 423
. . . . . .
PHP Programmation Oriente Objet Introduction
Programmation Oriente Objet
La programmation oriente objet de PHP 5 est similaire celle de Java.
Nous allons voir comment :

Dnir une classe

Crer une instance

Accder aux proprits et invoquer des mthodes

Modier laccessibilit aux proprits et aux mthodes

Dnir un constructeur et un destructeur

Dnir des interfaces, des classes abstraites

Utiliser lhritage

Cloner des instances

Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 122 / 423
. . . . . .
PHP Programmation Oriente Objet Classe et instance
Dnition dune classe
Pour dnir une classe, on utilise le mot-cl class.
<?
class uneClasse {
public $p1;
public $p2 = 12;
public $p3 = array("toto", 12);
// public $p4 = strlen('toto'); (interdit !)
public function maMethode($arg1, $arg2) {
...
}
}
?>
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 123 / 423
. . . . . .
PHP Programmation Oriente Objet Classe et instance
Cration dune instance
Pour crer une instance dune classe, on utilise le mot-cl new.
<?
class uneClasse {
public $p1;
public $p2 = 12;
public $p3 = array("toto", 12);
// public $p4 = strlen('toto'); (interdit !)
public function maMethode($arg1, $arg2) {...}
}
$i1 = new maClasse();
$i2 = new maClasse();
?>
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 124 / 423
. . . . . .
PHP Programmation Oriente Objet Classe et instance
Accs aux proprits et invocation de mthodes
<?
class UneClasse {
public $p;
public function maMethode($arg) { ... }
}
$i = new UneClasse();
$i->p = 12; // pas de dollar dans le nom de la proprit
echo $i->p;
$i->p = array(1,2);
echo $i->p[1]; // idem avec les tableaux
$i->maMethode("toto"); // avec la -> comme en C++
?>
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 125 / 423
. . . . . .
PHP Programmation Oriente Objet Classe et instance
$this
<?
class maClasse {
public $p = 0;
public function maMethode() {
$this->p+=1;
echo $this->p."\n";
}
public function maMethodeBis() {
$this->maMethode();
}
}
$i = new maClasse();
$i->maMethode(); // affiche 1}
$i->maMethode(); // affiche 2}
$i->maMethodeBis(); / affiche 3}
?>
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 126 / 423
. . . . . .
PHP Programmation Oriente Objet Classe et instance
Constantes proprits et mthodes statiques
<?
class maClasse {
const c=2;
public static $s = 4;
public static function maMethode() {
self::$s*=self::c;
echo self::$s."\n";
}
}
$i1 = new maClasse();
$i2 = new maClasse();
$i1->maMethode(); // affiche 6
maClasse::maMethode(); // affiche 8
$i2->maMethode(); // affiche 10
echo maClasse::$s.' '.maClasse::c; // affiche 10 2
?>
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 127 / 423
. . . . . .
PHP Programmation Oriente Objet Classe et instance
Constructeur et destructeur
<?
class maClasse {
private $nom;
function __construct($nom) {
$this->nom = $nom;
}
function __destruct() {
echo $this->nom." est mort.\n";
}
}
$i1 = new maClasse("moi");
$i2 = new maClasse("toi");
$i1 = null; // affichage de 'moi est mort.'
// affichage de 'toi est mort'
?>
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 128 / 423
. . . . . .
PHP Programmation Oriente Objet Hritage et interface
Interface
<?
interface monInterface1 {
public function methode1();
public function methode2($arg);
}
interface monInterface2 {
public function methode3();
}
class maClasse implements monInterface1,
monInterface2 {
public function methode1() {...}
public function methode2($arg) {...}
public function methode3() {...}
}
?>
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 129 / 423
. . . . . .
PHP Programmation Oriente Objet Hritage et interface
Hritage
<?
class maClasse {
public $n;
function __construct($n) { $this->n = $n; }
function afficher() { echo $this->n."\n"; }
}
class maClasseHeritee extends maClasse {
public $v;
function __construct($n, $v=2) {
parent::__construct($n);
$this->v = $v;
}
function afficher() {
echo $this->n." ".$this->v."\n";
}
}
$i1 = new maClasse("instance1");
$i2 = new maClasseHeritee("instance2",12);
$i1->afficher();
$i2->afficher();
?>
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 130 / 423
. . . . . .
PHP Programmation Oriente Objet Hritage et interface
Hritage
<?
$i1 = new maClasse("instance1");
$i2 = new maClasseHeritee("instance2",12);
$i1->afficher(); // affiche 'instance1'
$i2->afficher(); // affiche 'instance2 12'
var_dump($i1 instanceof maClasse); // bool(true)
var_dump($i2 instanceof maClasse); // bool(true)
var_dump($i1 instanceof maClasseHeritee); // bool(false)
var_dump($i2 instanceof maClasseHeritee); // bool(true)
var_dump($i1);
?>
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 131 / 423
. . . . . .
PHP Programmation Oriente Objet Hritage et interface
Late Static Bindings (Rsolution statique la vole)
<?
class maClasse {
function afficher1() { self::afficher2(); }
static function afficher2() {
echo "maClasse\n";
}
}
class maClasseHeritee extends maClasse {
static function afficher2() {
echo "maClasseHeritee\n";
}
}
$i1 = new maClasse();
$i2 = new maClasseHeritee();
$i1->afficher1(); // maClasse
$i2->afficher1(); // maClasse
?>
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 132 / 423
. . . . . .
PHP Programmation Oriente Objet Hritage et interface
Late Static Bindings (Rsolution statique la vole)
<?
class maClasse {
function afficher1() { static::afficher2(); }
static function afficher2() {
echo "maClasse\n";
}
}
class maClasseHeritee extends maClasse {
static function afficher2() {
echo "maClasseHeritee\n";
}
}
$i1 = new maClasse();
$i2 = new maClasseHeritee();
$i1->afficher1(); // maClasse
$i2->afficher1(); // maClasseHeritee
?>
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 133 / 423
. . . . . .
PHP Programmation Oriente Objet Hritage et interface
Classe abstraite
<?
abstract class maClasseAbstraite {
abstract public function getName();
public function afficherNom() {
echo $this->getName()."\n";
}
}
class maClasse extends maClasseAbstraite {
public function getName() { return "moi"; }
}
$i = new maClasse();
$i->afficherNom(); // affiche 'moi'
?>
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 134 / 423
. . . . . .
PHP Programmation Oriente Objet Hritage et interface
Visibilit

public : utilisable par nimporte quelle partie du programme.

protected : utilisable uniquement par les classes et parents hrits.

private : utilisable uniquement par la classe qui les a dnis.

<?
class maClasse {
public $pub;
protected $pro;
private $pri;
public function methodePublique() { ... }
protected function methodeProtegee() { ... }
private function methodePrivee() { ... }
}
class maClasseHeritee extends maClasse {
public function test() {
echo $this->pub; $this->methodePublique();
echo $this->pro; $this->methodeProtegee();
echo $this->pri; $this->methodePrivee(); // interdit !
}
}
?>
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 135 / 423
. . . . . .
PHP Programmation Oriente Objet Hritage et interface
Visibilit

public : utilisable par nimporte quelle partie du programme.

protected : utilisable uniquement par les classes et parents hrits.

private : utilisable uniquement par la classe qui les a dnis.

<?
class maClasse {
public $pub;
protected $pro;
private $pri;
public function methodePublique() { ... }
protected function methodeProtegee() { ... }
private function methodePrivee() { ... }
}
class maClasse2 /* qui n'tend pas maClasse */ {
public function test() {
$i = new maClasse();
echo $i->pub; $i->methodePublique();
echo $i->pro; $i->methodeProtegee(); // interdit !
echo $i->pri; $i->methodePrivee(); // interdit !
}
}
?>
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 136 / 423
. . . . . .
PHP Programmation Oriente Objet Clonage
Clonage
<?
class maClasse {
public $nom;
function __construct($nom) {
$this->nom = $nom;
}
function __clone() {
$this->nom = "Clone de ".$this->nom;
}
}
$i = new maClasse("moi");
$c = clone $i;
echo $i->nom."\n"; // affiche 'moi'
echo $c->nom."\n"; // affiche 'Clone de moi'
?>
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 137 / 423
. . . . . .
PHP Programmation Oriente Objet Mthodes magiques
Mthodes magiques Set et Get
<?
class maClasse {
private $props;
public function __set($prop, $val) {
echo "$prop <- $val\n";
$this->props[$prop] = $val;
}
public function __get($prop) {
if (!isset($this->props[$prop])) return "erreur";
else return $this->props[$prop];
}
}
$i = new maClasse();
$i->toto = 2; // affiche 'toto <- 2'
echo $i->toto."\n"; // affiche '2'
echo $i->a."\n"; // affiche 'erreur'
?>
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 138 / 423
. . . . . .
PHP Programmation Oriente Objet Mthodes magiques
Mthodes magiques Isset et Unset
<?
class maClasse {
private $props;
/* avec les fonctions __set et __get dfinies avant */
public function __isset($prop) {
return isset($this->props[$prop]);
}
public function __unset($prop) {
echo "destruction de $prop\n"; unset($this->props[$prop]);
}
}
$i = new maClasse();
$i->toto = 2; // affiche 'toto <- 2'
var_dump(isset($i->toto)); // affiche 'bool(true)'
unset($i->toto); // affiche 'destruction de toto'
?>
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 139 / 423
. . . . . .
PHP Modle-Vue-Contrleur Introduction
Modle-Vue-Contrleur
Le Modle-Vue-Contrleur (MVC) est un mthode de conception utilise
pour organiser linterface homme-machine (IHM) dune application.
Le modle : les donnes de lapplication.
Exemple : gestion des interactions avec une base de donnes.
La vue : est une interface avec laquelle lutilisateur interagit. Elle prsente
des parties du modle lutilisateur et reoit les actions de lutilisateur.
Exemple : code HTML/JavaScript prsent aux clients.
Le controleur : analyse les requtes des clients, dcide les actions
eectuer sur le modle, et choisit les vues envoyer aux clients.
Exemple : analyse des informations passes dans lURL
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 140 / 423
. . . . . .
PHP Modle-Vue-Contrleur Prsentation du projet
Projet 1 Sondages
Prsentation du projet : Les utilisateurs postent des sondages constitus
dune question et de plusieurs rponses. Une fois le sondage post, il est
accessible aux visiteurs du site qui pourront voter pour une des rponses
proposes. Les nombres de voix obtenues pour chaque rponse sont
comptabiliss et achs sous la forme dun graphique. Tous les visiteurs
peuvent chercher parmi les sondages et voter.
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 141 / 423
. . . . . .
PHP Modle-Vue-Contrleur Organisation gnrale
Organisation gnrale
Contrleur Action Vue
Requte HTTP
Cre et excute
Modle
Consulte/modie
Cre, initialise et ache
Rponse HTTP
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 142 / 423
. . . . . .
PHP Modle-Vue-Contrleur Organisation gnrale
Organisation gnrale
Contrleur Action Vue
Requte HTTP
Cre et excute
Modle
Consulte/modie
Cre, initialise et ache
Rponse HTTP
Consulte/observe
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 143 / 423
. . . . . .
PHP Modle-Vue-Contrleur Le contrleur
Le contrleur (index.php)
Les fonctions du contrleur :
<?
function getActionByName($name) {
$name .= 'Action';
require("actions/$name.inc.php");
return new $name();
}
function getViewByName($name) { /* Factory */
$name .= 'View';
require("views/$name.inc.php");
return new $name();
}
function getAction() { /* Factory */
if (!isset($_REQUEST['action'])) $action = 'Default';
else $action = $_REQUEST['action'];
$actions = array('Default', 'SignUpForm', ...);
if (!in_array($action, $actions)) $action = 'Default';
return getActionByName($action);
}
?>
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 144 / 423
. . . . . .
PHP Modle-Vue-Contrleur Le contrleur
Le contrleur (index.php)
Excution du contrleur :
<?
session_start();
$action = getAction();
$action->run();
$view = $action->getView();
$action->getView()->setLogin($action->getSessionLogin());
$view->run();
?>
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 145 / 423
. . . . . .
PHP Modle-Vue-Contrleur Les actions
Les actions du projet
Les actions :

SignUpForm : achage du formulaire dinscription

SignUp : demande dinscription

Login : connexion du visiteur

Logout : dconnexion du visiteur

UpdateUserForm : achage du formulaire de modication de prol

UpdateUser : modication du prol

AddSurveyForm : achage du formulaire dajout de sondage

AddSurvey : ajout dun sondage

GetMySurveys : achage des sondages du visiteur

Search : recherche

Vote : prise en compte dun vote

Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 146 / 423
. . . . . .
PHP Modle-Vue-Contrleur Les actions
La classe Action
Toutes les actions sont dnies en tendant la classe suivante :
<?
abstract class Action {
private $view;
protected $database;
public function __construct(){
$this->view = null;
$this->database = new Database();
}
protected function setView($view) { $this->view = $view; }
public function getView() { return $this->view; }
/* ... */
}
?>
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 147 / 423
. . . . . .
PHP Modle-Vue-Contrleur Les actions
La classe Action
Toutes les actions sont dnies en tendant la classe suivante :
<?
abstract class Action {
/* ... */
public function getSessionLogin() {
if (isset($_SESSION['login'])) $login = $_SESSION['login'];
else $login = null;
return $login;
}
protected function setSessionLogin($login) {
$_SESSION['login'] = $login;
}
protected function setMessageView($message, $style="") {
$this->setView(getViewByName("Message"));
$this->getView()->setMessage($message, $style);
}
abstract public function run();
}
?>
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 148 / 423
. . . . . .
PHP Modle-Vue-Contrleur Les actions
Exemple : laction UpdateUser
<?
class UpdateUserAction extends Action {
private function setUpdateUserFormView($message) {
$this->setView(getViewByName("UpdateUserForm"));
$this->getView()->setMessage($message, "alert-error");
}
public function run() {
if ($this->getSessionLogin()===null) {
$this->setMessageView("Vous devez tre authentifi.");
return;
}
$updatePassword = $_POST['updatePassword'];
$updatePassword2 = $_POST['updatePassword2'];
if (!isset($updatePassword) || !isset($updatePassword2)) {
$this->setUpdateUserFormView("Vous devez remplir le formulaire.");
return;
}
/* ... */
}
}
?>
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 149 / 423
. . . . . .
PHP Modle-Vue-Contrleur Les actions
Exemple : laction UpdateUser
<?
class UpdateUserAction extends Action {
public function run() {
/* ... */
$res = $this->database->updateUser($this->getSessionLogin(),
$updatePassword);
if ($res!==true) {
$this->setUpdateUserFormView($res);
return;
}
$this->setMessageView("Modification enregistre.", "alert-success");
}
}
?>
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 150 / 423
. . . . . .
PHP Modle-Vue-Contrleur Le modle
Le modle
Le modle contient les classes permettant de manipuler les objets
mtiers du site et de modier la base de donnes. Aucune fonctionnalit
de reprsentation des donnes nest fournie par le modle.
La classe permettant de reprsenter un sondage est donne ci-dessous :
<?
class Survey {
private $id;
private $owner;
private $question;
private $responses;
public function __construct($owner, $question) { /*...*/ }
public function setId($id) { /*...*/ }
public function getId() { /*...*/ }
public function getOwner() { /*...*/ }
public function getQuestion() { /*...*/ }
public function &getResponses() { /*...*/ }
public function setResponses($responses) { /*...*/ }
public function addResponse($response) { /*...*/ }
public function computePercentages() { /*...*/ }
}
?>
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 151 / 423
. . . . . .
PHP Modle-Vue-Contrleur Le modle
Le modle
Vous avez galement une classe reprsentant une rponse :
<?
class Response {
private $id;
private $survey;
private $title;
private $count;
private $percentage;
public function __construct($survey, $title, $count = 0) { /*...*/ }
public function setId($id) { /*...*/ }
public function computePercentage($total) { /*...*/ }
public function getId() { /*...*/ }
public function getSurvey() { /*...*/ }
public function getTitle() { /*...*/ }
public function getCount() { /*...*/ }
public function getPercentage() { /*...*/ }
}
?>
Les interaction avec la base de donnes se feront via une instance de classe
Dababase (instancie dans le constructeur de classe Action). Nous
dtaillerons les fonctionnalits de cette classe plus tard.
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 152 / 423
. . . . . .
PHP Modle-Vue-Contrleur Les vues
La classe View
Les direntes vues du projet sont dnies en tendant la classe View :
<?
abstract class View {
protected $message = "";
protected $style = "";
protected $login = null;
public function run() { require("templates/page.inc.php"); }
public function setMessage($message, $style="") {
$this->message = $message; $this->style = $style;
}
public function setLogin($login) { $this->login = $login; }
}
?>
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 153 / 423
. . . . . .
PHP Modle-Vue-Contrleur Les vues
La classe View
<?
abstract class View {
/* ... */
private function displayLoginForm() { require("templates/loginform.inc.php"); }
private function displayLogoutForm() { require("templates/logoutform.inc.php"); }
private function displayCommands() { require("templates/commands.inc.php"); }
private function displaySearchForm() { require("templates/searchform.inc.php"); }
protected abstract function displayBody();
}
?>
Les vues dnissent la mthode displayBody an de gnrer le contenu de
la page (en conservant les bordures, le formulaire de connexion, etc.).
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 154 / 423
. . . . . .
PHP Modle-Vue-Contrleur Les vues
La gnration de la page page.inc.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Sondages</title>
<link rel="stylesheet" type="text/css" href="bootstrap.min.css" />
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<? $this->displaySearchForm(); ?>
<? if ($this->login===null) $this->displayLoginForm();
else $this->displayLogoutForm(); ?>
</div>
</div>
</div>
<? $this->displayBody(); ?>
</body>
</html>
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 155 / 423
. . . . . .
PHP Modle-Vue-Contrleur Les vues
Les vues
Les direntes vues du projet :

DefaultView : page vide

MessageView : ache un message lutilisateur

SignUpFormView : formulaire dinscription

UpdateUserFormView : formulaire de modication de mot de passe

AddSurveyFormView : formulaire dajout de sondage

SurveysView : liste de sondages

Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 156 / 423
. . . . . .
PHP Modle-Vue-Contrleur Les vues
Exemple : la vue SurveysView
Par exemple, la vue suivante permet dacher une liste de sondages :
<?
class SurveysView extends View {
private $surveys;
public function displayBody() {
if (count($this->surveys)===0) { ?>
<div class="container"><br>br><br><br>
<div style="text-align:center" class="alert">
Aucun sondage ne correspond votre demande.
</div>
</div>';
<?
return;
}
require("templates/surveys.inc.php");
}
public function setSurveys($surveys) { $this->surveys = $surveys; }
}
?>
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 157 / 423
. . . . . .
PHP Modle-Vue-Contrleur Les vues
Exemple : la vue SurveysView
La vue prcdente inclue le code du chier surveys.inc.php :
<?
<div class="container"><br><br><br>
<div class="span7 offset2">
<ul class="media-list">
<?
foreach ($this->surveys as $survey) {
$survey->computePercentages();
require("survey.inc.php");
}
?>
</ul>
</div>
</div>
?>
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 158 / 423
. . . . . .
PHP Modle-Vue-Contrleur Les vues
Exemple : la vue SurveysView
La vue prcdente inclue le code du chier surveys.inc.php :
<?
<div class="container"><br><br><br>
<div class="span7 offset2">
<ul class="media-list">
<?
foreach ($this->surveys as $survey) {
$survey->computePercentages();
require("survey.inc.php");
}
?>
</ul>
</div>
</div>
?>
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 159 / 423
. . . . . .
PHP Modle-Vue-Contrleur Les vues
Exemple : la vue SurveysView
La page survey.inc.php doit gnrer un code HTML de la forme suivante :
<li class="media well">
<div class="media-body">
<h4 class="media-heading">Question</h4>
<div class="fluid-row">
<div class="span2">Rponse 1</div>
<div class="span2 progress progress-striped active">
<div class="bar" style="width: 20%"></div>
</div>
<span class="span1">(20%)</span>
<form class="span1" method="post" action="index.php?action=Vote">
<input type="hidden" name="responseId" value="1">
<input type="submit" style="margin-left:5px"
class="span1 btn btn-small btn-danger" value="Voter">
</form>
</div>
<!-- Les autres rponses possibles -->
</div>
</li>
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 160 / 423
. . . . . .
PHP Modle-Vue-Contrleur Les vues
Exemple : droulement dune inscription

Le client demande la page index.php;

Le serveur ache la vue par dfaut (vide);

Le client clique sur Inscription;

Le navigateur demande index.php?action=SignUpForm;

Le serveur ache la vue SignUpFormView;

Lutilisateur remplit le formulaire et lenvoie;

Le navigateur poste le formulaire vers index.php?action=SignUp;

Le serveur eectue linscription si aucune erreur ne sest produite;

Le serveur ache la vue MessageView (avec un message de

conrmation) ou SignUpFormView (avec un message derreur);

...
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 161 / 423
. . . . . .
PHP Modle-Vue-Contrleur Les vues
Framework PHP
Il existe des frameworks PHP qui permettent de mettre en place plus
facilement le modle MVC :

Zend

Symfony

CodeIgniter

CakePHP...
Ces frameworks proposent :

Organisation (contrleur/actions/vues);

Traitement des donnes des formulaires;

Base de donnes et persistance;

Gestion des tests unitaires;

Internationalisation;

Systmes de template...
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 162 / 423
. . . . . .
PHP Modle-Vue-Contrleur Les vues
Systmes de template
Exemple de template Swig :
<!DOCTYPE html>
<html>
<head>
<title>My Webpage</title>
</head>
<body>
<ul id="navigation">
{% for item in navigation %}
<li><a href="{{ item.href }}">{{ item.caption }}</a></li>
{% endfor %}
</ul>
<h1>My Webpage</h1>
{{ a_variable }}
</body>
</html>
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 163 / 423
. . . . . .
PHP Base de donnes PDO
PDO
PDO (PHP Data Objects) est une interface pour accder une base de
donnes depuis PHP. Elle gre la connexion, lenvoie des requtes, la
dconnexion la base de donnes. Elle permet de changer plus facilement
de systme de gestion de bases de donnes.
Ouverture de la base :
<?
$dbHost = $_SERVER['dbHost']; $dbBd = $_SERVER['dbBd'];
$dbPass = $_SERVER['dbPass']; $dbLogin = $_SERVER['dbLogin'];
$url = 'mysql:host='.$dbHost.';dbname='.$dbBd;
$db = new PDO($url, $dbLogin, $dbPass);
if (!$db) die("impossible d'ouvrir la base de donnes.");
$this->createDataBase();
?>
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 164 / 423
. . . . . .
PHP Base de donnes Les requtes et fonctions utiles
PDO
Une fois linstance de PDO construite, vous eectuez des requtes avec :

$db->exec($request) : pour modier la base de donnes

$db->query($request) : pour extraire des donnes de la base

Exemples :
<?
$db->exec("CREATE TABLE IF NOT EXISTS users (".
" nickname char(20),".
" password char(50)".
");");
?>
<?
$res = $db->exec('UPDATE users SET password="'.
md5($password).'" WHERE nickname="'.$nickname.'";');
echo "nombre de lignes modifiees = $res";
?>
<?
$res = $db->query("select nickname from users;");
?>
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 165 / 423
. . . . . .
PHP Base de donnes Les requtes et fonctions utiles
Injections SQL
Le code suivant :
<?
$nickname = 'aa"; DELETE FROM users; '.
'SELECT * FROM users WHERE nickname="';
$password = "truc";
$res = $db->exec('UPDATE users SET password="'.
md5($password).'" WHERE nickname="'.$nickname.'";');
?>
excute la requte SQL suivante :
UPDATE users SET password="...." WHERE nickname="aa";
DELETE FROM users;
SELECT * FROM users WHERE nickname="";
Protection contre les injections SQL :
<?
$r = $db->prepare('UPDATE users SET password = ? '.
'WHERE nickname = ?');
$r->execute(array(md5($password), $nickname));
?>
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 166 / 423
. . . . . .
PHP Base de donnes Les requtes et fonctions utiles
PDO
Pour faire une requte SQL :
<?
$res = $db->query("select * from sondages");
var_dump($res);
/* affiche 'object(PDOStatement)#2 (1) {
["queryString"]=> string(19) "select * from sondages" }' */
?>
Pour connatre le nombre de lignes :
<? echo "nombre de lignes : ".!+$res->rowCount()+!."\n"; ?>
Pour parcourir les lignes :
<?
$res = $db->query("select * from sondages");
while ($ligne = !+$res->fetch()+!) {
echo $ligne['createur'].
" pose la question : ".
$ligne['question']."\n";
}
?>
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 167 / 423
. . . . . .
PHP Base de donnes Les requtes et fonctions utiles
PDO
Pour mettre toutes les lignes dans un tableau :
<?
$res = $db->query("select * from sondages");
$lignes = !+$res->fetchAll();+!
foreach ($lignes as $ligne) {
echo $ligne['createur'].
" pose la question : ".
$ligne['question']."\n";
}
?>
Voir aussi, dans la classe PDOStatement, les mthodes:

bindColumn : attache une variable une colonne

errorInfo : information derreur

fetchColumn : rcupre la valeur dans une colonne donne

closeCursor : ferme le curseur

Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 168 / 423
. . . . . .
PHP Base de donnes Les requtes et fonctions utiles
PDO
Voir aussi, dans la classe PDO, les mthodes:

beginTransaction : dmarre une transaction

commit : valide une transaction

rollback : annule une transaction

errorInfo : Retourne les informations associes lerreur

errorCode : Retourne le SQLSTATE associ avec la dernire opration

prepare : Prpare une requte lexcution et retourne un objet

quote : Protge une chane pour lutiliser dans une requte SQL PDO
<?
$string = 'Chaine \' particulire';
print "non chappe : $string\n";
print "chappe :" . $bd->quote($string) . "\n";
?>
Chaine non chappe : Chaine particulire
Chaine chappe : Chaine particulire
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 169 / 423
. . . . . .
PHP Base de donnes Les requtes et fonctions utiles
Base de donnes du projet
Les trois tables utilises dans le projet :
users(nickname char(20), password char(50));
surveys(id integer primary key autoincrement,
owner char(20), question char(255));
responses(id integer primary key autoincrement,
id_survey integer,
title char(255),
count integer);
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 170 / 423
. . . . . .
PHP Base de donnes Les requtes et fonctions utiles
Exemple : sauvegarde dun sondage
<?
public function saveSurvey(&$survey) {
$this->connection->beginTransaction();
$query = $this->connection->prepare("INSERT INTO surveys(owner,question)".
"VALUES (?,?)");
if ($query===false) { $this->connection->rollback(); return false; }
$r = $query->execute(array($survey->getOwner(), $survey->getQuestion()));
if ($r === false) { $this->connection->rollback(); return false; }
$id = $this->connection->lastInsertId();
$survey->setId($id);
$responses = &$survey->getResponses();
foreach ($responses as &$response) {
if ($this->saveResponse($response)===false) {
$this->connection->rollback(); return false;
}
}
$this->connection->commit(); return true;
}
?>
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 171 / 423
. . . . . .
PHP Base de donnes Les requtes et fonctions utiles
La classe Database
<? class Database {
private $connection;
public function __construct() { ... }
public function checkPassword($nickname, $password) { ... }
public function addUser($nickname, $password) { ... }
public function updateUser($nickname, $password) { ... }
public function saveSurvey(&$survey) { ... }
public function loadSurveysByOwner($owner) { ... }
public function loadSurveysByKeyword($keyword) { ... }
public function vote($id) { ... }
private function createDataBase() { ... }
private function checkNicknameValidity($nickname) { ... }
private function checkPasswordValidity($password) { ... }
private function checkNicknameAvailability($nickname) { ... }
private function saveResponse(&$response) { ... }
private function loadSurveys($arraySurveys) { ... }
private function loadResponses($survey, $arrayResponses) { ... }
} ?>
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 172 / 423
. . . . . .
PHP Base de donnes Mapping objet-relationnel (ORM)
Mapping objet-relationnel (ORM)
Les besoins :

Sauvegarde simple des objets en base de donnes :

<?
$user = new User();
$user->nickname = "bob";
$user->password = md5("truc");
$user->save();
?>

Cration automatique des tables;

Chargement des objets;

Gestion des relations entre les objets/enregistrements;

...
Quelques solutions en PHP :

Propel

Doctrine

Redbean

...
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 173 / 423
. . . . . .
PHP Base de donnes Mapping objet-relationnel (ORM)
Redbean Introduction
Initialisation de la connexion la base de donnes :
<?
$dbHost = $_SERVER['dbHost']; $dbBd = $_SERVER['dbBd'];
$dbPass = $_SERVER['dbPass']; $dbLogin = $_SERVER['dbLogin'];
$url = 'mysql:host='.$dbHost.';dbname='.$dbBd;
R::setup($url, $dbLogin, $dbPass);
?>
Pour vider la base de donnes :
<?
R::nuke();
?>
Cration et sauvegarde dun bean :
<?
$user = R::dispense('user');
$user->nickname = $nickname;
$user->password = $password;
R::store($user);
?>
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 174 / 423
. . . . . .
PHP Base de donnes Mapping objet-relationnel (ORM)
Redbean Chargement des beans
Chargement dun bean partir de son identiant :
<?
$user = R::load('user', $_SESSION['id']);
/* retourne NULL si le bean n'a pas t trouv. */
?>
Charger un bean dans la base de donnes partir dune requte :
<?
$user = R::findOne('user', 'nickname = ? AND password = ?',
array($nickname, $password));
/* retourne NULL si le bean n'a pas t trouv. */
?>
Charger plusieurs beans :
<?
$surveys = R::find('survey', 'question like ?',
array('%'.$keyword.'%'));
/* retourne un tableau. */
?>
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 175 / 423
. . . . . .
PHP Base de donnes Mapping objet-relationnel (ORM)
Redbean One-to-many
Association one-to-many entre les sondages et les rponses :
<?
$survey = R::dispense('survey');
$survey->owner = $_SESSION['id'];
$survey->question = $question;
$survey-> ownResponse = array();
foreach ($titles as $title) {
$response = R::dispense('response');
$response->title = $title;
$response->count = 0;
$survey->ownResponse[] = $response;
/* Le nom du champ est important ! */
}
R::store($survey); /* Tout est sauv */
?>
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 176 / 423
. . . . . .
PHP Base de donnes Mapping objet-relationnel (ORM)
Redbean One-to-many
Le chargement de lintgralit du sondage est automatique :
<?
$surveys = R::find('survey', 'owner = ?', array($_SESSION['id']));
foreach ($surveys as &$survey) {
$total = 0;
foreach ($survey->ownResponse as $r)
$total += $r->count;
if ($total===0) {
foreach ($survey->ownResponse as &$r)
$r->percentage = 0;
} else {
foreach ($survey->ownResponse as &$r)
$r->percentage = (100*$r->count)/$total;
}
}
?>
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 177 / 423
. . . . . .
JavaScript Introduction
JavaScript
JavaScript est un langage de programmation initialement utilis pour crer
des pages web interactives. Il peut tre inclus dans un document HTML :
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="script.js"></script>
<script type="text/javascript">
//<![CDATA[
/* code JavaScript */
//]]>
</script>
</head>
<body></body>
</html>
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 178 / 423
. . . . . .
JavaScript Dclaration des fonctions
JavaScript Les fonctions
Il est possible de dnir des fonctions en JavaScript :
function additionner(a,b,c) {
a = b + c;
return a;
}
function multiplier(a,b) {
return a*b;
}
alert(additionner(1,2,3));
alert(mutltiplier(2,4));
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 179 / 423
. . . . . .
JavaScript Les variables
JavaScript Les variables
Par dfaut, les variables non-dclares sont globales :
function ajouter(a) { total += a; }
total = 0; ajouter(2); ajouter(4); alert(total);
Pour dclarer une variable, il faut utiliser le mot-cl var :
function ajouter(a,b) {
var total = a + b;
return b;
}
total = 0;
total = ajouter(total,2); total = ajouter(total,4);
alert(total);
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 180 / 423
. . . . . .
JavaScript Les types
JavaScript Les types
En JavaScript, les types sont associs aux valeurs :
var v = "toto"; // variable contient une chane
v = 'toto'; // variable contient une chane
v = 22; // variable contient un nombre
v = 22.12; // variable contient un nombre
v = true; // variable contient un boolen
v = ["toto", 22]; // variable contient un tableau
v = {name:"toto", age:22}; // variable contient un objet
Une variable qui na jamais t aect est undened :
var v; /* v est considr comme "undefined". */
La valeur null peut tre aecte une variable. Cela signie que la
variable existe mais sa valeur ne dsigne aucun objet :
var v = null;
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 181 / 423
. . . . . .
JavaScript Les types
JavaScript Les types
Il est possible de connatre le type de la valeur contenue dans une variable
laide du mot-cl typeof :
var v; alert(typeof v); // "undefined"
v = "toto"; alert(typeof v); // "string"
v = 'toto'; alert(typeof v); // "string"
v = 22; alert(typeof v); // "number"
v = 22.12; alert(typeof v); // "number"
v = true; alert(typeof v); // "boolean"
v = null; alert(typeof v); // "object"
v = ["toto", 22]; alert(typeof v); // "object"
v = {name:"a", age:22}; alert(typeof v); // "object"
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 182 / 423
. . . . . .
JavaScript Les booleans
JavaScript Les booleans
Aectation et utilisation des booleans :
var a = true;
var b = false;
var c = a || b;
if (c) {
alert(a && b);
}
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 183 / 423
. . . . . .
JavaScript Les nombres
JavaScript Les nombres
Les direntes oprations arithmtiques :
var v = 12;
var v = 2 + 4;
var v = 2 * 4;
var v = 4 / 2;
var v = 123 % 10;
v++; v--;
Les direntes aectations :
v=2; v+=2; v-=2; v*=2; v/=2; v%=2;
Les conversions entre chanes et nombres :
var v = parseInt("123");
var v = parseFloat("123.12");
var s = v.toString();
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 184 / 423
. . . . . .
JavaScript Les oprateurs
JavaScript Les comparaisons et oprateurs logiques
gal a == b vrai si a est gal b
identique a === b vrai si a et b sont gaux et ont le mme type
dirent a != b vrai si a est dirent de b
non identique a !== b vrai si a et b sont dirents
ou nont pas le mme type
plus petit a < b vrai si a est strictement plus petit que b
plus grand a > b vrai si a est strictement plus grand que b
infrieur ou gal a <= b vrai si a est plus petit ou gal b
suprieur ou gal a >= b vrai si a est plus grand ou gal b
non !a vrai si a nest pas vrai
et a && b vrai si a et b sont vrais
ou a || b vrai si a ou b sont vrais
var v = (test)?"Vrai":"Faux";
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 185 / 423
. . . . . .
JavaScript Les conditions et les boucles
JavaScript If/For/While/Continue/Break
var x = 2, y = 5;
if (x < y) document.write("<");
else document.write(">");
for (var i = 0; i < 10; i++) {
if (i == 4) continue;
document.write(i);
if (i > 7) break;
}
var i = 0;
while(i < 10) {
document.write(i);
i++;
}
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 186 / 423
. . . . . .
JavaScript Les conditions et les boucles
JavaScript Switch
function (x) {
switch (x) {
case 0 : alert("zro"); break;
case 1 : alert("un"); break;
case 2 : alert("deux"); break;
case 3 : alert("trois"); break;
case 4 : alert("quatre"); break;
default : alert("nombre"; break;
}
}
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 187 / 423
. . . . . .
JavaScript Les tableaux
JavaScript Les tableaux
Dclaration dun tableau :
var fleurs = new Array();
fleurs[0] = "Rose";
fleurs[1] = "Tulipe";
fleurs[2] = "Coquelicot";
/* ou */
fleurs = ["Rose", "Tulipe", "Coquelicot"];
Les mthodes et les proprits:
var length = fleurs.length;
var position = fleurs.indexOf("Tulipe");
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 188 / 423
. . . . . .
JavaScript Les tableaux
JavaScript Les tableaux
Parcourir un tableau :
for (var i = 0; i < fleurs.length; i++)
document.write(i+"->"+fleurs[i]);
for (var i in fleurs)
document.write(i+"->"+fleurs[i]);
for (var fleur of fleurs) /* Exprimental */
document.write(fleur);
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 189 / 423
. . . . . .
JavaScript Les chanes de caractres
JavaScript Les chanes de caractres
var fleur="Tulipe";
var c=fleur[2]; // 'l'
var length = fleur.length; // 6
var index = fleur.indexOf("ip"); // '3'
var s = fleur.match("[^i]*"); // 'Tul'
var s = "Machin Truc";
var r = s.replace("Truc", "Bidule"); // "Machin Bidule"
var s = "a,b,c";
var r = s.split(","); // ['a','b','c']
var c = "Machin"+ " Truc" + 5 // "Machin Truc5"
Autres mthodes utiles sur les chanes de caractres :
charAt, charCodeAt, concat, contains, endsWith, indexOf, lastIndexOf,
match, replace, search, slice, split, startsWith, substr, substring,
toLowerCase, toString, toUpperCase, trim.
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 190 / 423
. . . . . .
JavaScript Les fonctions
JavaScript Les fonctions
Il est possible daecter le code dune fonction une variable :
var sum = function(a,b) { return a+b; }
alert(sum(2,3)); // affiche 5
alert(typeof sum); // affiche "function"
Les fonctions peuvent utiliser des variables externes la fonction :
var a;
var b = 2;
var assign = function() { a = b; }
assign(); alert(a); // affiche 2
b = 3; assign(); alert(a); // affiche 3
Il est important de noter que le code est li au variable (et non aux valeurs
des variables au moment de la dnition de la fonction).
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 191 / 423
. . . . . .
JavaScript Les fonctions
JavaScript Les fonctions
Les paramtres des fonctions sont passs par valeur donc chaque
paramtre est une variable locale la fonction :
var sum2 = function(n) { n += 2; return n; }
var n = 2;
alert(sum2(n)); // affiche 4
alert(n); // affiche 2
Une fonction peut retourner une fonction :
var getDisplayFunction = function(a) {
return function() { alert(a); }
}
var display3 = getDisplayFunction(3);
var display4 = getDisplayFunction(4);
display3(); // affiche 3
display4(); // affiche 4
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 192 / 423
. . . . . .
JavaScript Les fonctions
JavaScript Les fonctions
Une fonction peut retourner une fonction :
var getDisplayFunction = function(a) {
return function() { alert(a); }
}
var display3 = getDisplayFunction(3);
display3(); // affiche 3
Le code prcdent est quivalent au code suivant :
var getDisplayFunction3 = function() { var a = 3;
return function() { alert(a); }
}
var display3 = getDisplayFunction3();
display3(); // affiche 3
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 193 / 423
. . . . . .
JavaScript Les objets
JavaScript Les objets
En JavaScript, il ny a pas de classe. Les instance sont cre directement :
person=new Object();
person.name="Bob";
person.age=22;
On peut galement utiliser une description littrale de lobjet :
person = {name : "Bob", age : 22};
Nous sommes en prsence de rfrences :
var bob = {name: "Bob", age:22}
var jim = {name: "Jim", age:23}
var joe = {name: "Joe", friends : [bob, jim]}
jim.age = 43;
alert(joe.friends[1].age); // affiche 43
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 194 / 423
. . . . . .
JavaScript Les objets
JavaScript Les objets
En JavaScript, il ny a pas de classe.
Une fonction permet de construire un objet :
function Person(name, age) {
this.name = name;
this.age = age;
}
var bob = new Person("bob", 23);
var joe = new Person("joe", 42);
Il est possible dajouter des proprits aprs la cration de lobjet :
var jim = new Person("jim", 45);
jim.friends = [bob, joe];
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 195 / 423
. . . . . .
JavaScript Les objets
JavaScript Les objets
Des fonctions (ou mthodes) peuvent tre associes un objet :
function Counter() { this.count = 0; }
var counter = new Counter();
counter.notify = function() { this.count++; }
counter.add(v) = function() { this.count += v; }
counter.toString = function() { return "counter :"
+this.count; }
counter.notify();
counter.add(3);
alert(counter.toString()); // "counter : 4"
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 196 / 423
. . . . . .
JavaScript Les objets
JavaScript Les objets
Il est galement possible dassocier des mthodes dans le constructeur :
function Counter() {
this.count = 0;
this.notify = function() { this.count++; }
this.add = function(v) { this.count += v; }
this.toString = function() { return "counter :"
+this.count; }
}
var counter = new Counter();
counter.notify();
counter.add(3);
alert(counter.toString()); // "counter : 4"
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 197 / 423
. . . . . .
JavaScript Les objets
JavaScript Les objets
Attention, le code suivant ne fonctionne pas car, dans la mthode click, la
fonction notify nest appele sur un objet (dans ce cas, this contient une
rfrence vers lobjet Window) :
function Counter() {
...
this.notify = function() { this.count++; }
...
}
function click(callback) {
callback();
}
var counter = new Counter();
click(counter.notify);
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 198 / 423
. . . . . .
JavaScript Les objets
JavaScript Les objets
Le code suivant fonctionne :
function Counter() {
...
this.notify = function() { this.count++; }
...
}
function click(callback) {
callback();
}
var counter = new Counter();
click(function() { counter.notify(); });
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 199 / 423
. . . . . .
JavaScript Les objets
JavaScript Les objets
Un autre exemple avec deux objets :
function Button(listener) {
this.listener = listener;
this.click = function() { listener.notify(this); }
}
function Counter() {
this.count = 0;
this.notify = function() { this.count++; }
}
var counter = new Counter();
var button = new Button(counter);
button.click();
alert(counter.count);
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 200 / 423
. . . . . .
JavaScript Les objets
JavaScript Les objets
Le code suivant ne fonctionne pas. Pourquoi ?
function Button() {
this.setCallback = function(c) { this.callback = c; }
this.click = function() { this.callback(this); }
}
function Counter(notifier) {
this.count = 0;
notifier.setCallback(function() { this.notify(); });
this.notify = function() { this.count++; }
}
var button = new Button();
var counter = new Counter(button);
button.click(); alert(counter.count);
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 201 / 423
. . . . . .
JavaScript Les objets
JavaScript Les objets
Correction du code prcdent :
function Button() {
this.setCallback = function(c) { this.callback = c; }
this.click = function() { this.callback(this); }
}
function Counter(notifier) {
this.count = 0;
var self = this;
notifier.setCallback(function() { self.notify(); });
this.notify = function() { this.count++; }
}
var button = new Button();
var counter = new Counter(button);
button.click(); alert(counter.count);
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 202 / 423
. . . . . .
JavaScript Les prototypes
JavaScript Les prototypes
Le constructeur suivant associe des mthodes identiques chaque objet :
function Counter() {
this.count = 0;
this.notify = function() { this.count++; }
this.add = function(v) { this.count += v; }
this.toString = function() { return "counter :"
+this.count; }
}
Notez que ce nest pas forcement le cas :
function Counter(step) {
this.count = 0;
this.notify = function() { this.count+=step; }
}
var c1 = new Counter(1); c1.notify(); alert(c1.count); // "1"
var c2 = new Counter(2); c2.notify(); alert(c2.count); // "2"
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 203 / 423
. . . . . .
JavaScript Les prototypes
JavaScript Les prototypes

Sans optimisation et analyse du code, il est obligatoire de conserver

en mmoire toutes les fonctions associs toutes les objets.

Cependant, on va pouvoir associer des objets un prototype

contenant un ensemble de fonctions (et de proprits) partages.

Lors dune invocation, la mthode est recherche dans lobjet puis

dans le prototype (de faon rcursive -> simulation de lextension).

Voici une mauvaise faon daecter un prototype un objet :

function CounterPrototype() {
this.notify = function() { this.count++; }
}
var prototype = new CounterPrototype();
function Counter() {
this.count = 0; this.__proto__ = prototype;
}
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 204 / 423
. . . . . .
JavaScript Les prototypes
JavaScript Les prototypes
La bonne faon de faire :
function Counter() { this.count = 0; }
Counter.prototype.notify = function() { this.count++; }
Counter.prototype.add = function(v) { this.count += v; }
Counter.prototype.toString = function() { return "counter :"
+this.count; }
var counter = new Counter();
counter.notify();
counter.add(2);
alert(counter.toString()); // "3"
alert(counter.__proto__ == Counter.prototype); // true
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 205 / 423
. . . . . .
JavaScript objet Math
JavaScript Lobjet Math

x = Math.abs(-2.23); // 2.23

x = Math.ceil(6.05); // 7

x = Math.oor(6.23); // 6

x = Math.round(3.8); // 4

x = Math.max(2,6); // 6

x = Math.min(2,6); // 2

x = Math.pow(3,3); // 27

x = Math.random(); // 0.2323...

x = Math.sqrt(9); // 3

Math.E, Math.exp(v), Math.LN2, Math.LN10, Math.log(v),

Math.LOG2E, Math.SQRT1_2, Math.SQRT2, Math.PI, Math.sin(v),
Math.asin(v), Math.cos(v), Math.acos(v), Math.tan(v),
Math.atan(v);
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 206 / 423
. . . . . .
JavaScript objet Date
JavaScript Lobjet Date
Cration dun objet Date :
var today = new Date()
var d1 = d1 = new Date("February 10, 2013 10:12:12");
var d2 = new Date(2013,1,10);
var d3 = new Date(2013,1,10,10,12,12);
Utilisation :
var today = new Date()
var year = today.getFullYear(); alert(year);
today.setMonth(4);
...
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 207 / 423
. . . . . .
JavaScript Exceptions
JavaScript Les exceptions
La gestion des exceptions est similaire Java :
function validate(x) {
if(x=="") throw "empty";
if(isNaN(x)) throw "not a number";
if(x=="0") throw "equal zero";
if(x>50) throw ["too high", x, 50];
}
try {
validate("12");
validate("123");
} catch(err) {
alert(err);
}
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 208 / 423
. . . . . .
JavaScript JSON
JavaScript JSON
JSON (JavaScript Oject Notation) est un format de donnes driv de la
notation des objets et tableaux de ECMAScript (donc de JavaScript) :
{"machin": {
"taille": 12,
"style": "gras",
"bidule": {
"machin": [
{"style" : "italique" },
{"style" : "gras" }
]
}
}}
Lavantage de JSON est quil est reconnu nativement par JavaScript.
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 209 / 423
. . . . . .
JavaScript JSON
JavaScript JSON
Les lments en JSON :

Les objets : {chane : valeur, chane : valeur...}

Les tableaux : [valeur, valeur, ...]

Les valeurs : chane, nombre, objet, tableau, true, false, null

Les chanes : "abcdef" ou "abcd\n\t"

Les nombres : -1234.12

{"unObjet": {
"unTableau": [12, 13, 53],
"unNombre" : 53,
"unChane" : "truc\n"
"unObjet" : { "style" : "gras" }
}}
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 210 / 423
. . . . . .
JavaScript JSON
JavaScript JSON
En JavaScript, il est trs facile de srialiser une valeur en JSON :
var bob = {name: "Bob", age:22}
var jim = {name: "Jim", age:23}
var joe = {name: "Joe", friends : [bob, jim]}
JSON.stringify(joe);
Le code prcdent gnre la chane de caractres suivante :
{
"name":"Joe",
"friends":[
{"name":"Bob","age":22},
{"name":"Jim","age":23}
]
}
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 211 / 423
. . . . . .
JavaScript JSON
JavaScript JSON
Inversement, il est facile de construire une valeur partir dune chane de
caractres respectant le format JSON en utilisant la fonction eval :
var json = '{'+
'"name":"Joe",'+
'"friends":['+
'{"name":"Bob","age":22},'+
'{"name":"Jim","age":23}'+
']'+
'}';
var joe = eval('('+json+')');
for (var i = 0; i < joe.friends.length; i++)
alert(joe.friends[i].name);
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 212 / 423
. . . . . .
HTML, CSS, DOM HTML
HTML
HTML (Hypertext Markup Language) est

un standard du W3C (World Wide Web Consortium).

un format de donnes conu pour prsenter des pages web.

un langage de balisage.
<!DOCTYPE html>
<html>
<head>
<title>Exemple</title>
</head>
<body>
izgz hzegizihzi zihzg zeighze
<a href="toto.html">toto</a>
</body>
</html>
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 213 / 423
. . . . . .
HTML, CSS, DOM HTML
HTML
Les documents HTML dcrivent une structure darbre :
<body>
<b>Liste : </b>
<ul>
<li>Element 1</li>
<li>Element 2</li>
<li>Element 3</li>
</ul>
</body>
<body>
<b> <ul>
<li> <li> <li> Liste :
Element 1 Element 2 Element 3
Chaque balise peut possder des attributs :
<img src="toto.jpg" class="image">
<span class="alert">alerte</span>
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 214 / 423
. . . . . .
HTML, CSS, DOM HTML
de HTML HTML5
Histoire de HTML :

1989-1992 : Origine

1995 : HTML 2.0

1997 : HTML 3.2 et 4.0

1999 : HTML 4.01

2004 : le WHATWG commence travailler sur un nouveau standard

Depuis 2007 : le W3C travaille sur HTML5

2014? : Version dnitive de HTML5 par le W3C

Les objectifs de HTML5 :

De nouveaux lments;

Meilleure intgration de CSS;

DOM Scripting;

Un grand nombre dAPI pour faire des RIA.

Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 215 / 423
. . . . . .
HTML, CSS, DOM CSS Introduction
CSS Introduction
CSS (Cascading Style Sheets) est un langage permettant de dnir la
prsentation dun document HTML (ou XML).
Histoire de CSS :

1996 : CSS 1

1998 : CSS 2

2004-2011 : CSS 2.1 (CR -> R)

2011-2012 : CSS 3 (divis en modules en R ou en CR)

Objectif : Sparation du contenu du document de sa prsentation.
Avantage : Un document peut avoir plusieurs prsentations direntes.
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 216 / 423
. . . . . .
HTML, CSS, DOM CSS Association du CSS au code HTML
CSS Association du CSS au code HTML
Dans un chier spar (fortement conseill) :
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="s1.css" media="screen, tv">
<link rel="stylesheet" type="text/css" href="s2.css" media="print">
</head>
<body></body>
</html>
Dans le chier HTML (pour tester) :
<!DOCTYPE html>
<html>
<head>
<style>p {margin-left:20px;}</style>
</head>
<body></body>
</html>
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 217 / 423
. . . . . .
HTML, CSS, DOM CSS Association du CSS au code HTML
CSS Association du CSS au code HTML
On peut galement utiliser lattribut style (dconseill) :
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<span style="font-size:20pt;color:red;">toto</span>
</body>
</html>
Cette solution ne doit tre utilise que pour tester une prsentation.
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 218 / 423
. . . . . .
HTML, CSS, DOM CSS Format
CSS Format
Un chier CSS se compose de rgles CSS ayant le format suivant :
selector { property: value; property: value; ... }
Principes :

Le selector permet de dsigner un ensemble dlments HTML.

Les valeurs de certaines proprits du style CSS des lments

slectionns sont modies.
Exemples :
body { background-color:#b0c4de; }
a:hover {
text-decoration:underline;
color:#FF00FF;
}
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 219 / 423
. . . . . .
HTML, CSS, DOM CSS Slecteurs
CSS Slecteurs Introduction
Association dun style tous les lments :
* { color:red; font-size:20pt; }
Association dun style tous les lments dun certain type :
span { color:red; }
p { font-size:20pt; }
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 220 / 423
. . . . . .
HTML, CSS, DOM CSS Slecteurs
CSS Slecteurs Attributs
Selection avec un attribut :
span[attr] /* possde */
span[attr="toto"] /* est gale */
span[attr~="toto"] /* est dans une liste sep. par des , */
span[attr^="toto"] /* dbute par */
span[attr$="toto"] /* fini par */
span[attr*="toto"] /* contient */
span[lang|="en"] /* pour les sous-codes linguistiques */
Exemple :
<span class="alert,message">mon texte</span><br>
Association dun style aux lments qui possdent une classe :
span[class~="alert"] { color:red; }
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 221 / 423
. . . . . .
HTML, CSS, DOM CSS Slecteurs
CSS Slecteurs Classes et identiants
Association dune classe un lment HTML :
<span class="alert">mon texte</span><br>
<span class="alert large">mon texte</span>
Association dun style aux lments qui possdent une classe :
span.alert { color:red; }
*.large { font-size:20pt; }
/* ou */ .large {font-size:20pt; }
Association dun identiant un lment HTML :
<span id="mymessage">mon texte</span>
Association dun style un lment via son identiant :
span#mymessage { color:red; }
*#mymessage { font-size:20pt; }
/* ou */ #mymessage { font-size:20pt; }
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 222 / 423
. . . . . .
HTML, CSS, DOM CSS Slecteurs
CSS Slecteurs Pseudo-classes structurelles
Vous pouvez baser votre slection sur des informations se trouvant dans
larbre documentaire laide des pseudo-classes suivantes :

E:root, E:nth-child(n), E:nth-last-child(n), E:nth-of-type(n),

E:nth-last-of-type(n), E:rst-child, E:last-child, E:rst-of-type,
E:last-of-type, E:only-child, E:only-of-type, E:empty
Exemples :
li:last-child { color:blue; }
li:first-child { color:red; }
tr:nth-child(2n+1) { color:blue; }
tr:nth-child(even) { color:red; }
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 223 / 423
. . . . . .
HTML, CSS, DOM CSS Slecteurs
CSS Slecteurs Les autres pseudo-classes
Les autres pseudo-classes :

E:link, E:visited, E:active, E:hover, E:focus, E:target,

E:lang(c), E:enabled, E:disabled, E:checked,
E:indeterminate, E:contains(txt), E:not(s)
Exemples :
a:link { color:red; }
a:link:hover { text-decoration:underline; }
a:not([href="toto.html"]) {color:red; }
span:contains("toto") { color:blue; }
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 224 / 423
. . . . . .
HTML, CSS, DOM CSS Slecteurs
CSS Slecteurs Les pseudo-lments
Les pseudo-lments :

E::rst-line, E::rst-letter, E::selection, E::before, E::after

Exemple :
p { font-size: 12pt; line-height: 12pt }
p::first-letter {
font-size: 200%;
font-weight: bold;
float: left;
}
span { text-transform: uppercase; }
Pour le texte :
<p><span>Les premiers</span> mots d'un article.</p>
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 225 / 423
. . . . . .
HTML, CSS, DOM CSS Slecteurs
CSS Slecteurs Les combinateurs
Les combinateurs :

E F : un lment F descendant de E

E > F : un lment F ls de E

E + F : un lment F immdiatement prcd par E

E ~ F : un lment F prcd par E

Exemple :
div p *[href="toto.html"] { color : red; }
div ol>li p a:link { color : red; }
ol li.alert { color : red; }
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 226 / 423
. . . . . .
HTML, CSS, DOM CSS Proprits
CSS Proprits
p {background-color:#e0ffff;}
h1 {text-align:center;}
h1 {font-size:40px; font-style:italic; font-weight:bold; }
a:link {text-decoration:underline;}
ul.square {list-style-type: square;}
p { border-style:solid; border-width:5px; }
div { margin:25px 50px 75px 100px; }
div { padding:25px 50px 75px 100px; }
div.hidden {display:none;}
span { display:block; }
div { display:inline; }
.center { margin-left:auto; margin-right:auto; width:600px; }
Nous utiliserons souvent Bootstrap pour simplier lcriture des CSS.
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 227 / 423
. . . . . .
HTML, CSS, DOM DOM
DOM Introduction
Le DOM (Document Object Model) est :

un standard du W3C;

une interface pour accder et mettre jour le contenu, la structure ou

le style dun document HTML ou XML;

indpendant de tout langage de programmation.

Le DOM est dcoup en trois parties :

Core DOM : Modle pour tous les documents;

XML DOM : Modle pour les documents XML;

HTML DOM : Modle pour les documents HTML.

Le DOM HTML permet de rcuprer, de changer, dajouter ou de
supprimer des lments HTML.
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 228 / 423
. . . . . .
HTML, CSS, DOM DOM
DOM Les noeuds
Chaque lment du document HTML est un noeud :

Le document est un noeud;

Les lments HTML (venant des balises) sont des noeuds;

Les textes dans les balises sont des noeuds;

Les attributs sont des noeuds;

Les commentaires sont des noeuds.

Document
lement racine :
<html>
lement :
<head>
lement :
<title>
Texte :
"Titre"
lement :
<body>
lement :
<span>
Texte :
"Mon texte"
Attirbut :
class="alert"
lement :
<b>
Texte :
"Truc"
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 229 / 423
. . . . . .
HTML, CSS, DOM DOM
DOM Les noeuds

Chaque noeud a un unique parent (la racine na pas de parent);

Un noeud peut avoir plusieurs enfants;

Les enfants de chaque noeud sont ordonns.

Document
lement racine :
<html>
lement :
<head>
lement :
<title>
Texte :
"Titre"
lement :
<body>
lement :
<span>
Texte :
"Mon texte"
Attirbut :
class="alert"
lement :
<b>
Texte :
"Truc"
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 230 / 423
. . . . . .
HTML, CSS, DOM DOM
DOM API
Modication du DOM via JavaScript :
function showMessage() { alert("click !"); }
var button = document.getElementById("mybutton");
button.onclick = showMessage;
var links = document.getElementsByTagName("a");
for (var i=0; i<links.length; i++)
links[i].onclick = showMessage;
Remarques :

Des fonctions existent pour modier les attributs, le style, insrer et

supprimer des lments HTML, cest--dire, des noeuds du DOM.

Des librairies existent pour simplier les interactions avec le DOM.

Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 231 / 423
. . . . . .
HTML, CSS, DOM jQuery
jQuery
jQuery est une bibliothque JavaScript libre qui permet de simplier la
programmation en JavaScript (AJAX et interaction avec le DOM).
Elle est disponible sous Licence MIT, GNU GPL.
Installation :

Tlcharger le code JavaScript sur le site de JQuery;

Inclure le code suivant dans len-tte de votre chier HTML :

<script type="text/javascript" src="jquery-xxx.min.js">
</script>
Exemple dutilisation :
<script type="text/javascript">
$(function() {
$("a").click(function() { alert("Hello world!"); });
});
</script>
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 232 / 423
. . . . . .
HTML, CSS, DOM jQuery
jQuery Slectionner des lments
Slectionner un lment par son identiant :
$("#id_element").addClass("maClasseCss");
Slectionner un lment par sa classe :
$(".classeCss").click(function() { alert("coucou"); });
Slectionner des elements contenus dans un autre lment :
$("#list > li").addClass("blue"); /* ou */
$("#list").find("li").addClass("blue");
Tout slectionner :
$("*").addClass("blue");
Appliquer une fonction sur un ensemble dlments :
$("#list").find("li").each(function(i) {
$(this).append( "Je suis le numero " + i);
});
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 233 / 423
. . . . . .
HTML, CSS, DOM jQuery
jQuery Modier les attributs et les proprits
Les attributs (valeurs initiales prsentes dans le HTML) :
$("#id_element").attr("title","toto");
a = $("#id_element").attr("title");
$("#id_element").removeAttr("title");
Les proprits (valeurs courantes dans le DOM) :
$("#id_element").prop("checked",true);
a = $("#id_element").prop("checked");
$("#id_element").removeProp("toto");
La valeur :
$("#id_element").val("coucou");
v = $("#id_element").val();
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 234 / 423
. . . . . .
HTML, CSS, DOM jQuery
jQuery Parcourir les lments
Appliquer une fonction sur un ensemble dlments :
$("#list").find("li").each(function(i) {
$(this).append( "Je suis le numero " + i);
});
Rcuprer la liste des ls dun lment :
$('#list').children().css('background-color', 'red');
Rcuprer le premier lment :
$('#list').children().first().css('background-color', 'red');
Rcuprer le dernier lment :
$('#list').children().last().css('background-color', 'red');
Filtrer les lments :
$('#list').children().filter(function(i) {return i%3== 0;})
.css('background-color', 'red');
(Voir les autres fonctionnalits sur le site de jQuery)
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 235 / 423
. . . . . .
HTML, CSS, DOM jQuery
jQuery Ajouter, supprimer des lments
Modier et rcuprer le contenu des lments :
$("#list").find("li").html("<b>toto</b>");
$("#list").find("li").text("<b>toto</b>");
c_html = $("#list").find("li").html();
c_text = $("#list").find("li").text();
Ajouter dans des lments :
$("#list").find("li").append("toto");
Supprimer un ensemble dlments du DOM :
$("#list").find("li").remove();
Insrer avant et aprs des lments :
$('#test').children().before("<li>avant chaque element</li>");
$('#test').children().after("<li>apres chaque element</li>");
(Voir les autres fonctionnalits sur le site de jQuery)
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 236 / 423
. . . . . .
HTML, CSS, DOM jQuery
jQuery CSS
Les classes css :
r = $("#id_element").hasClass("maClasseCss");
$("#id_element").removeClass("maClasseCss");
$("#id_element").toggleClass("maClasseCss");
Jouer avec le style :
$("#id_element").css('background-color', 'red');
color = $("#id_element").css('background-color');
Jouer avec la hauteur et la largeur :
$("#id_element").height(100);
h = $("#id_element").height();
$("#id_element").!+width(100);
w = $("#id_element").width();
Connatre la position dun lment :
p = $("#id_element").offset(); // par rapport au document
alert(p.left+" "+p.top);
p = $("#id_element").position(); // par rapport au parent
alert(p.left+" "+p.top);
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 237 / 423
. . . . . .
HTML, CSS, DOM jQuery
jQuery Les vnements
La souris :
$("#id_element").click(function() { alert("click."); });
$("#id_element").mouseup(function(){$(this).append('up ');}).
.mousedown(function(){$(this).append('down ');});
Le clavier :
$('#input_text').keydown(function(event) {
if (event.keyCode == '13') {
alert("ok");
}
});
Les changements :
$("#id_element").change(function() { alert("change."); });
(Voir les autres fonctionnalits sur le site de jQuery)
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 238 / 423
. . . . . .
HTML, CSS, DOM jQuery
jQuery Les autres fonctionnalits

Les eets et animations

Des outils pour simplier la programmation en JavaScript

JQuery UI :

Librairie de widgets

Interaction (Drag & drop, tri, etc).

Thmes

Eets
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 239 / 423
. . . . . .
Communication client/serveur AJAX
Ajax (Asynchronous JavaScript and XML)
Ajax est un acronyme pour Asynchronous JavaScript and XML.
Il est un ensemble de technologies libres couramment utilises :

HTML (ou XHTML) pour la structure smantique des informations;

CSS pour la prsentation des informations;

DOM et javaScript pour interagir avec linformation prsente;

lobjet XMLHttpRequest pour changer linformation avec le serveur;

XML (parfois JSON) pour le format des donnes informatives.

Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 240 / 423
. . . . . .
Communication client/serveur AJAX Lobjet XMLHttpRequest
XMLHttpRequest : Cration
Une fonction Javascript permettant de crer un objet XMLHttpRequest :
function createXhrObject()
{
if (window.XMLHttpRequest)
return new XMLHttpRequest();
if (window.ActiveXObject) {
var names = [
"Msxml2.XMLHTTP.6.0",
"Msxml2.XMLHTTP.3.0",
"Msxml2.XMLHTTP",
"Microsoft.XMLHTTP"
];
for(var i in names) {
try{ return new ActiveXObject(names[i]); }
catch(e){}
}
}
window.alert("pas de XMLHTTPRequest.");
return null;
}
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 241 / 423
. . . . . .
Communication client/serveur AJAX Lobjet XMLHttpRequest
XMLHttpRequest : Les mthodes et proprits
Description de lobjet XMLHttpRequest :
interface XMLHttpRequest {
/* requte */
void open(DOMString method, DOMString url);
void open(DOMString method, DOMString url, boolean async);
/* ... */
void setRequestHeader(DOMString header, DOMString value);
void send();
void send(Document data);
/* ... */
void abort();
/* rponse */
readonly attribute unsigned short status;
readonly attribute DOMString statusText;
DOMString getResponseHeader(DOMString header);
DOMString getAllResponseHeaders();
readonly attribute DOMString responseText;
readonly attribute Document responseXML;
}
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 242 / 423
. . . . . .
Communication client/serveur AJAX Lobjet XMLHttpRequest
XMLHttpRequest : Les mthodes et proprits
Suite de la descrition de lobjet XMLHttpRequest :
interface XMLHttpRequest {
/* ... */
/* gestionnaire d'vnement */
attribute Function onreadystatechange;
/* tats */
const unsigned short UNSENT = 0;
const unsigned short OPENED = 1;
const unsigned short HEADERS_RECEIVED = 2;
const unsigned short LOADING = 3;
const unsigned short DONE = 4;
readonly attribute unsigned short readyState;
};
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 243 / 423
. . . . . .
Communication client/serveur AJAX Lobjet XMLHttpRequest
XMLHttpRequest : Les tats
Les dirents tats de XMLHttpRequest :

UNSENT (0) : Lobjet a t construit.

OPENED (1) : La mthode open a t invoque avec succs. Le header

de la requte peut tre modi avec la mthode setRequestHeader.

HEADERS_RECEIVED (2) : Le header HTTP de la rponse a t reu.

LOADING (3) : Le corps de la rponse est en cours de tlchargement.

DONE (4) : Le transfert des donnes est termin (ou erreur !).
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 244 / 423
. . . . . .
Communication client/serveur AJAX Les reqtes asynchrones
XMLHttpRequest : Requte asynchrone GET
Exemple de requte GET :
xhr = createXhrObject();
xhr.onreadystatechange = function() {
if(xhr.readyState == 4) {
if(xhr.status == 200) alert(xhr.responseText);
else alert("Error : "+xhr.status);
}
};
xhr.open("GET", "server.php?a=12&b=13", true);
xhr.send(null);
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 245 / 423
. . . . . .
Communication client/serveur AJAX Les reqtes asynchrones
XMLHttpRequest : Requte asynchrone POST
Exemple de requte POST :
xhr = createXhrObject();
xhr.onreadystatechange = function() {
if(xhr.readyState == 4) {
if(xhr.status == 200) alert(xhr.responseText);
else alert("Error : "+xhr.status);
}
};
xhr.open("POST", "server.php", true);
xhr.setRequestHeader("Content-Type",
"application/x-www-form-urlencoded");
xhr.send("a=12&b=13");
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 246 / 423
. . . . . .
Communication client/serveur AJAX Les reqtes asynchrones
AJAX et jQuery
Exemple de requte POST :
$.ajax({
type: "POST",
url: "toto.php",
data: {numero : "123", nom : "bob"}
}).done(function( msg ) { alert( msg ); })
.fail(function() { alert("erreur"); })
.always(function() { alert("fini"); });
Exemple de requte GET :
$.get("test.php", { 'choices[]': ["Jon", "Susan"]} );
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 247 / 423
. . . . . .
Communication client/serveur AJAX Sans serveur dynamique
Un exemple sans serveur dynamique : la problmatique
Nous souhaitons raliser le site suivant :
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 248 / 423
. . . . . .
Communication client/serveur AJAX Sans serveur dynamique
Un exemple sans serveur dynamique : les donnes
Nous avons sur notre serveur le chier authors.json suivant :
[
{
"name" : "Simone de Beauvoir",
"picture" : "beauvoir.jpg",
"description" : "beauvoir.json"
},
{
"name" : "Agatha Christie",
"picture" : "christie.jpg",
"description" : "christie.json"
},
/* ... */
]
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 249 / 423
. . . . . .
Communication client/serveur AJAX Sans serveur dynamique
Un exemple sans serveur dynamique : les donnes
Nous avons galement les images associs aux auteurs dans un rpertoire
image du serveur. De plus, pour chaque auteur, nous avons un chier de
la forme suivante :
{ "name" : "Victor Hugo",
"description" : "Victor Hugo, n le 26 fvrier 1802
Besanon et mort le 22 mai 1885
Paris, est un pote, dramaturge et
prosateur romantique considr comme
lun des plus importants crivains
de langue franaise. [wikipedia]",
"born" : "26 fvrier 1802, Besanon",
"died" : "22 mai 1885, Paris"
}
Le nom du chier est donn par les proprits description associes
chaque auteur dans le chier authors.json.
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 250 / 423
. . . . . .
Communication client/serveur AJAX Sans serveur dynamique
Un exemple sans serveur dynamique : index.html
Nous allons remplir dynamiquement la structure de document suivante :
<!DOCTYPE html>
<html>
<head>
<script src="index.js"></script><!--- et bootstrap et jquery --->
</head>
<body>
<div class="container"><div class="fluid-row">
<table id="list" class="table table-bordered span3 offset2"></table>
<div id="author" class="span4 well hide">
<h2 id="author_name"></h2>
<span id="author_description"></span><br><br>
<strong>Naissance : </strong><span id="author_born"></span><br>
<strong>Dcs : </strong><span id="author_died"></span><br>
</div>
</div></div>
</body>
</html>
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 251 / 423
. . . . . .
Communication client/serveur AJAX Sans serveur dynamique
Un exemple sans serveur dynamique : index.js
function displayAuthorsList(authors) {
$("#list").html("");
for (var i = 0; i < authors.length; i++) {
var author = authors[i];
var line = '<tr onclick="showAuthor(\''+author.description+'\');">';
line += '<td><strong>'+author.name+'</strong></td>';
line += '<td><img src="resources/images/'+author.picture+'"></td>';
line += '</tr>';
$("#list").append(line);
}
}
function displayAuthor(author) {
$("#author").removeClass("hide");
$("#author_name").text(author.name);
$("#author_description").text(author.description);
$("#author_born").text(author.born);
$("#author_died").text(author.died);
}
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 252 / 423
. . . . . .
Communication client/serveur AJAX Sans serveur dynamique
Un exemple sans serveur dynamique : index.js
function requestAuthorsList(callback) {
$.ajax({ url : "resources/authors.json",
type : "GET",
dataType : "json",
success : callback });
}
function requestAuthor(ressource, callback) {
$.ajax({ url : "resources/"+ressource,
type : "GET",
dataType : "json",
success : callback });
}
function showList() { requestAuthorsList(displayAuthorsList); }
function showAuthor(resource) { requestAuthor(resource, displayAuthor); }
$(document).ready(function() { showList(); });
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 253 / 423
. . . . . .
Communication client/serveur AJAX Avec un serveur crit en PHP
jQuery, AJAX, JSON et PHP
Ct serveur :
header('Content-type: application/json');
$a = array('nom'=>$_POST['nom'],
'maj'=>strtoupper($_POST['nom']));
echo json_encode($a);
Ct client :
$.ajax({
type: "post",
url: "server.php",
data: { nom : "bob" }
}).done(function( msg ) {
alert( msg['nom']+"=>"+msg['maj'] );
});
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 254 / 423
. . . . . .
Communication client/serveur AJAX Avec un serveur crit en PHP
Exemple : autocompletion
Autocompltion sur les mots du franais :
Nous allons utiliser :

cot client : jQuery et Bootstrap;

cot serveur : PHP.

Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 255 / 423
. . . . . .
Communication client/serveur AJAX Avec un serveur crit en PHP
Exemple : autocompletion index.html
<!DOCTYPE html>
<html>
<head>
<link href="bootstrap-combined.min.css" rel="stylesheet">
<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
<script src="index.js"></script>
</head>
<body>
<input id="input"
type="text"
data-provide="typeahead">
</body>
</html>
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 256 / 423
. . . . . .
Communication client/serveur AJAX Avec un serveur crit en PHP
Exemple : autocompletion index.js
Avec Bootstrap, il est trs facile de mettre en place lautocompletion :
function getWords(query, callback) {
$.ajax({ url : "server.php",
method : "post",
dataType : "JSON",
data : { query : query },
success : callback
});
}
$(document).ready(function() {
$("#input").typeahead({ source : getWords });
});
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 257 / 423
. . . . . .
Communication client/serveur AJAX Avec un serveur crit en PHP
Exemple : autocompletion server.php
<?
function getWords(&$query) {
if (empty($query)) return array();
$file = fopen("francais.txt","r");
$words = array();
while (($word = fgets($file, 255))!==false) {
if (strpos($word, $query) === 0) $words[] = $word;
if (count($words) > 8) break;
}
return $words;
}
$query = &$_POST['query'];
$words = getWords($query);
echo json_encode($words);
?>
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 258 / 423
. . . . . .
Communication client/serveur AJAX Avec un serveur crit en PHP
Exemple : autocompletion droulement dune requte
getWords("mang", callback)
$.ajax({...}) :
post server.php avec query="mang"
getWords("mang")
json_encode(array("manganate", ...))
rponse du serveur '["manganate", ... ]'
callback(["manganate", ... ])
Serveur
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 259 / 423
. . . . . .
Communication client/serveur AJAX Avec un serveur crit en PHP
Exemple : authentication index.html
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner"><div class="container">
<form id="signin_form" action="#" class="navbar-form pull-right">
<input id="signin_nickname" class="span2" type="text">
<input id="signin_password" class="span2" type="password">
<button id="signin_button" type="submit" class="btn">Sign In</button>
</form>
<form id="logout_form" action="#" class="navbar-form pull-right hide">
<button id="logout_button" type="submit" class="btn">Logout</button>
</form>
</div></div>
</div>
<div class="container">
<div id="message" class="hide alert alert-error span6 offset2"></div>
</div>
</body>
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 260 / 423
. . . . . .
Communication client/serveur AJAX Avec un serveur crit en PHP
Exemple : authentication server.php
Fonctions pour maintenir le pseudonyme de lutilisateur dans la session :
<?
function setSessionNickname($nickname) {
$_SESSION["nickname"] = $nickname;
}
function getSessionNickname() {
$nickname = &$_SESSION["nickname"];
return isset($nickname)?$nickname:null;
}
?>
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 261 / 423
. . . . . .
Communication client/serveur AJAX Avec un serveur crit en PHP
Exemple : authentication server.php
Excution de laction demande par le client :
<?
function runServerAction(&$action) {
if (!isset($action) || !(in_array($action,
array("signin", "logout", "init"))))
return array("action"=>"error", "msg"=>"Invalid action.");
return $action();
}
session_start();
$action = &$_GET['action'];
$result = runServerAction($action);
echo json_encode($result);
?>
Il est galement possible (et souhaitable) de mettre place une architecture
similaire celle du premier projet ou utiliser un framework PHP.
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 262 / 423
. . . . . .
Communication client/serveur AJAX Avec un serveur crit en PHP
Exemple : authentication server.php
Les actions du serveur :
<?
function signin() {
$nickname = &$_POST['nickname'];
$password = &$_POST['password'];
if (empty($nickname) || empty($password))
return array("action"=>"error",
"msg"=>"Empty nickname or password.");
if ($nickname !== "toto" || $password !== "toto")
return array("action"=>"error",
"msg"=>"Invalid nickname or password.");
setSessionNickname($nickname);
return array("action"=>"signin", "nickname"=>$nickname);
}
?>
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 263 / 423
. . . . . .
Communication client/serveur AJAX Avec un serveur crit en PHP
Exemple : authentication server.php
Les actions du serveur :
<?
function logout() {
setSessionNickname(null);
return array("action"=>"logout");
}
function init() {
$nickname = getSessionNickname();
if ($nickname!==null)
return array("action"=>"signin", "nickname"=>$nickname);
else return array("action"=>"logout");
}
?>
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 264 / 423
. . . . . .
Communication client/serveur AJAX Avec un serveur crit en PHP
Exemple : authentication index.js
function signin() {
$("#message").addClass("hide");
runServerAction("signin", {
nickname : $("#signin_nickname").val(),
password : $("#signin_password").val() });
}
function logout() {
$("#message").addClass("hide");
runServerAction("logout", { });
}
$(document).ready(function() {
$("#signin_button").click(signin);
$("#logout_button").click(logout);
runServerAction("init", { });
});
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 265 / 423
. . . . . .
Communication client/serveur AJAX Avec un serveur crit en PHP
Exemple : authentication index.js
function runClientAction(data) {
switch (data.action) {
case "error" : runErrorAction(data); break;
case "signin" : runSigninAction(data); break;
case "logout" : runlogoutAction(data); break;
}
}
function runServerAction(actionName, data) {
$.ajax({ url : "server.php?action="+actionName,
method : "post",
dataType : "JSON",
data : data,
success : runClientAction
});
}
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 266 / 423
. . . . . .
Communication client/serveur AJAX Avec un serveur crit en PHP
Exemple : authentication index.js
function runErrorAction(data) {
$("#message").text(data.msg);
$("#message").removeClass("hide");
}
function runSigninAction(data) {
$("#signin_form").addClass("hide");
$("#logout_form").removeClass("hide");
}
function runlogoutAction(data) {
$("#signin_form").removeClass("hide");
$("#logout_form").addClass("hide");
}
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 267 / 423
. . . . . .
Communication client/serveur AJAX Projet AJAX
Projet 2 (PHP et AJAX)
Vous devez raliser un jeu client/serveur.
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 268 / 423
. . . . . .
Communication client/serveur AJAX Projet AJAX
Projet 2 (PHP et AJAX)
Droulement de la partie :

La grille est vide et le serveur choisit un mot faire deviner au joueur.

Le joueur tape un mot de 8 lettres dans la zone de texte puis appuie

sur la touche entre pour soumettre le mot au serveur.

Le serveur associe alors une couleur chaque lettre du mot :

La couleur rouge est associe aux lettres bien places.

La couleur jaune est associe aux lettres mal places mais prsentes
dans le mot trouver.

Les couleurs associes chaque lettre sont envoyes au client.

La partie sarrte une des deux conditions est vries :

Le joueur a trouv le mot gagn;

Le joueur a rempli toutes les lignes de la grille perdu;

Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 269 / 423
. . . . . .
Communication client/serveur AJAX Projet AJAX
Projet 2 (PHP et AJAX)
Premire partie du projet : Vous devez raliser le projet en utilisant
uniquement PHP en vous basant sur lorganisation mise place dans le
projet Sondages. Les joueurs doivent pouvoir :

crer un compte;

sauthentier;

changer de mot de passe;

commencer une nouvelle partie;

jouer;

acher le tableau des scores.

Deuxime partie du projet : Utiliser la technologie AJAX pour rduire la
quantit de donnes envoyes par le serveur. Le but est dobtenir une
version o toutes les actions de lutilisateur se font en utilisant AJAX.
Librairies : jQuery et Bootstrap.
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 270 / 423
. . . . . .
Communication client/serveur AJAX Projet AJAX
Projet 2 (PHP et AJAX)
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 271 / 423
. . . . . .
Communication client/serveur AJAX Projet AJAX
Projet 2 (PHP et AJAX)
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 272 / 423
. . . . . .
Communication client/serveur AJAX Projet AJAX
Projet 2 (PHP et AJAX)
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 273 / 423
. . . . . .
Communication client/serveur AJAX Projet AJAX
Projet 2 (PHP et AJAX)
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 274 / 423
. . . . . .
Communication client/serveur AJAX Projet AJAX
Projet 2 (PHP et AJAX)
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 275 / 423
. . . . . .
Communication client/serveur AJAX Projet AJAX
Projet 2 (PHP et AJAX)
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 276 / 423
. . . . . .
Communication client/serveur AJAX Projet AJAX
Projet 2 (PHP et AJAX)
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 277 / 423
. . . . . .
Communication client/serveur AJAX Projet AJAX
Projet 2 (PHP et AJAX)
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 278 / 423
. . . . . .
Communication client/serveur AJAX Projet AJAX
Projet 2 (PHP et AJAX)
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 279 / 423
. . . . . .
Communication client/serveur Comet Problmatique
Problmatique
Problmatique : Nous souhaitons raliser un tchat.

Les clients se connectent au serveur;

Les clients peuvent discuter;

Les clients peuvent voir les messages envoys par les autres clients;
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 280 / 423
. . . . . .
Communication client/serveur Comet Problmatique
Problmatique
Problme : En PHP, chaque requte du client est traite indpendamment.
Il ny a donc pas de :

Processus persistant et de donne en mmoire persistante

Dicult pour conserver ltat courant de la partie
(i.e. orchestrer plusieurs clients)

Connexion persistante (le client demande et le serveur rpond)

Dicult pour envoyer des vnements aux clients.
Solution :

Ct client : WebSocket de HTML 5

Ct serveur : Java et Jetty (serveur HTTP et moteur de servlet libre)

Autres solutions :

AJAX et lapproche Comet

Socket.IO (dveloppement du client et du serveur en JavaScript)

...
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 281 / 423
. . . . . .
Communication client/serveur Comet Cration dun serveur avec Jetty
Jetty Cration dun serveur Web
Cration dun serveur Web avec Jetty :
Server httpServer = new Server(8080);
ResourceHandler resourceHandler = new ResourceHandler();
resourceHandler.setWelcomeFiles(new String[] { "index.html" });
resourceHandler.setResourceBase("www");
HandlerList handlers = new HandlerList();
handlers.setHandlers(new Handler[] { resourceHandler,
new DefaultHandler() });
httpServer.setHandler(handlers);
httpServer.start();
httpServer.join();
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 282 / 423
. . . . . .
Communication client/serveur Comet Cration dun serveur avec Jetty
Jetty Cration dun serveur Web
Gestion des sessions et mises en place de code spcique pour traiter les
requtes send et get :
/* ... */
ServletContextHandler contextHandler = new
ServletContextHandler(ServletContextHandler.SESSIONS);
contextHandler.setContextPath("/chat");
ChatServer chatServer = new ChatServer();
contextHandler.addServlet(new ServletHolder(
new SendServlet(chatServer)), "/send");
contextHandler.addServlet(new ServletHolder(
new GetServlet(chatServer)), "/get");
HandlerList handlers = new HandlerList();
handlers.setHandlers(new Handler[] { resourceHandler,
contextHandler,
new DefaultHandler() });
httpServer.setHandler(handlers);
/* ... */
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 283 / 423
. . . . . .
Communication client/serveur Comet Le serveur
Jetty Classe ChatServer
public class ChatServer {
private List<User> users;
public ChatServer() { users = new ArrayList<User>(); }
public void addUser(User user) { users.add(user); }
public void sendMessage(String msg) {
for (User user : users) user.addMessage(msg);
}
}
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 284 / 423
. . . . . .
Communication client/serveur Comet Le serveur
Jetty Classe User
public class User {
private BlockingDeque<String> messages;
public User() {
messages = new LinkedBlockingDeque<String>();
}
synchronized public void addMessage(String msg) {
try { messages.putLast(msg); }
catch (InterruptedException e) { }
}
synchronized public String getMessage() {
try { String msg = messages.takeFirst(); return msg;
} catch (InterruptedException e) { return ""; }
}
}
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 285 / 423
. . . . . .
Communication client/serveur Comet Le serveur
Jetty Classe ChatServer
public abstract class ChatServlet extends HttpServlet {
protected ChatServer server;
public ChatServlet(ChatServer server) { this.server = server; }
protected void doPost(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
HttpSession session = req.getSession(true);
User user = (User)session.getAttribute("user");
if (user==null) { user = new User(); server.addUser(user);
session.setAttribute("user", user);
}
String responses = doAction(user, req);
resp.getWriter().println(responses);
}
protected abstract String doAction(User user, HttpServletRequest req);
}
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 286 / 423
. . . . . .
Communication client/serveur Comet Le serveur
Jetty Classe SendServlet
public class SendServlet extends ChatServlet {
public SendServlet(ChatServer server) {
super(server);
}
@Override
protected String doAction(User user,
HttpServletRequest req) {
String msg = req.getParameter("msg");
if (msg!=null) server.sendMessage(msg);
return "\"ok\"";
}
}
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 287 / 423
. . . . . .
Communication client/serveur Comet Le serveur
Jetty Classe GetServlet
public class GetServlet extends ChatServlet {
public GetServlet(ChatServer server) {
super(server);
}
@Override
protected String doAction(User user,
HttpServletRequest req) {
String msg = user.getMessage();
return msg;
}
}
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 288 / 423
. . . . . .
Communication client/serveur Comet Le client
Jetty index.html
<!DOCTYPE html>
<html>
<head><!--- avec Bootstrap et jQuery --->
<script src="index.js"></script>
</head>
<body>
<div class="container">
<div class="fluid-row"><div class="span4">
<form action="#" class="well form-inline">
<input type="text" id="message">
<button class="btn" id="send">Send</button>
</form>
</div><div class="well span3" id="messages"></div>
</div>
</body>
</html>
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 289 / 423
. . . . . .
Communication client/serveur Comet Le client
Jetty index.js
function sendCallback(data) { $("#message").val(""); }
function send() {
$.ajax({ url : "/chat/send",
method : "post",
dataType : "JSON",
data : { msg : $("#message").val() },
success : sendCallback
});
}
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 290 / 423
. . . . . .
Communication client/serveur Comet Le client
Jetty index.js
function getCallback(data) {
$("#messages").append(data+"<br>");
getMessage();
}
function getMessage() {
$.ajax({ url : "/chat/get",
method : "post",
success : getCallback
});
}
function init() { $("#send").click(send); getMessage(); }
$(document).ready(function() { init(); });
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 291 / 423
. . . . . .
Communication client/serveur Comet Continuations
Jetty Continuations
Problmatique : Dans la premire version, pour supporter un trs grand
nombre de clients, il est ncessaire que le serveur puisse tre en train de
traiter un grand nombre de requtes simultanment.
Premire solution : Dans la premire version, on doit permettre au
serveur de crer un thread pour crer chacune des requtes des clients. En
dautres termes, le nombre de clients possibles est limit par le nombre de
threads que le serveur peut crer.
Les continuations : Elles permettent de mettre en suspend le
traitement dune requte et de le reprendre plus tard.
Consquence : On va pouvoir mettre en place un pool de Threads pour
traiter les requtes (nouvelles ou suspendus).
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 292 / 423
. . . . . .
Communication client/serveur Comet Continuations
Jetty Modication de la classe User
public class User {
private Deque<String> messages = new ArrayDeque<String>();
private Continuation continuation;
synchronized public String getMessage(
HttpServletRequest req) {
if (messages.size()==0) {
continuation =
ContinuationSupport.getContinuation(req);
continuation.suspend(); return null;
}
return messages.pollFirst();
}
/* ... */
}
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 293 / 423
. . . . . .
Communication client/serveur Comet Continuations
Jetty Modication de la classe User
public class User {
/* ... */
synchronized public void addMessage(String msg) {
messages.add(msg);
if (continuation!=null) {
continuation.resume(); continuation = null;
}
}
}
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 294 / 423
. . . . . .
Communication client/serveur Comet Continuations
Jetty Modication de la classe ChatServlet
public abstract class ChatServlet extends HttpServlet {
/* ... */
protected void doPost(HttpServletRequest req,
HttpServletResponse resp)
throws ServletException, IOException {
/* ... */
String response = doAction(user, req);
if (response!=null) resp.getWriter().println(response);
}
/* ... */
}
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 295 / 423
. . . . . .
Communication client/serveur Comet Continuations
Jetty Modication de la cration du serveur
Il est maitenant possible de limiter le nombre de Threads la cration du
serveur sans limiter le nombre de clients :
QueuedThreadPool threadPool = new QueuedThreadPool();
threadPool.setMaxThreads(200);
Server httpServer = new Server(8080);
httpServer.setThreadPool(threadPool);
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 296 / 423
. . . . . .
Communication client/serveur WebSocket
WebSocket
Objectif (Wikipedia) : Obtenir un canal de communication bidirectionnel
et full-duplex sur un socket TCP pour les navigateurs et les serveurs web.
Demande de connexion du client et handshake :
GET /ws HTTP/1.1
Host: pmx
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Version: 6
Sec-WebSocket-Origin: http://pmx
Sec-WebSocket-Extensions: deflate-stream
Sec-WebSocket-Key: x3JJHMbDL1EzLkh9GBhXDw==
du serveur :
HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: HSmrc0sMlYUkAGmm5OPpG2HaGWk=
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 297 / 423
. . . . . .
Communication client/serveur WebSocket WebSocket et JavaScript
Client WebSocket et JavaScript
Demande douverture de la connexion avec le serveur :
ws = new WebSocket('ws://toto.com:8080');
Mise en place des callbacks :
ws.onopen = onOpen;
ws.onclose = onClose;
ws.onerror = onError;
ws.onmessage = onMessage;
Exemples de callbacks :
function onOpen(event) { alert("Connexion etablie."); }
function onClose(event) { alert("Connexion perdue."); }
function onError(event) { alert("Erreur"); }
function onMessage(event) { alert(event.data); }
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 298 / 423
. . . . . .
Communication client/serveur WebSocket WebSocket et Jetty
Serveur avec Jetty
Cration du serveur avec Jetty :
public static void main(String[] args) throws Exception {
Server httpServer = new Server(8080);
ResourceHandler resourceHandler = new ResourceHandler();
resourceHandler.setWelcomeFiles(new String[] { "index.html" });
resourceHandler.setResourceBase("www");
HandlerList handlers = new HandlerList();
handlers.setHandlers(new Handler[] {
new WSHandler(),
resourceHandler,
new DefaultHandler() });
httpServer.setHandler(handlers);
httpServer.start();
httpServer.join();
}
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 299 / 423
. . . . . .
Communication client/serveur WebSocket WebSocket et Jetty
Serveur avec Jetty
La classe qui reoit les notications de connexion :
public class WSHandler extends WebSocketHandler {
@Override
public WebSocket doWebSocketConnect(HttpServletRequest request,
String protocol) {
Client client = new Client();
return client;
}
}
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 300 / 423
. . . . . .
Communication client/serveur WebSocket WebSocket et Jetty
Serveur avec Jetty
Le client :
public class Client implements WebSocket.OnTextMessage {
private Connection connection;
public void onOpen(Connection connection) {
this.connection = connection;
}
public void onMessage(String data) { /* ... */ }
public void onClose(int code, String msg) { /* ... */ }
public void send(String data) {
try { connection.sendMessage(data); }
catch (IOException e) { connection.close(); }
}
}
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 301 / 423
. . . . . .
Communication client/serveur WebSocket Jeu de Morpion
Exemple du jeu de morpion index.html
<!DOCTYPE html>
<html>
<head>
<!-- jQuery et dfinition du style -->
<script src="index.js"></script>
</head>
<body>
<div id="c00" class="cell"></div>
<div id="c10" class="cell"></div>
<div id="c20" class="cell"></div><br>
<div id="c01" class="cell"></div>
<div id="c11" class="cell"></div>
<div id="c21" class="cell"></div><br>
<div id="c02" class="cell"></div>
<div id="c12" class="cell"></div>
<div id="c22" class="cell"></div><br>
<div id="message"></div>
</body>
</html>
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 302 / 423
. . . . . .
Communication client/serveur WebSocket Jeu de Morpion
Exemple du jeu de morpion index.js
function onMessage(event) {
var message = eval('('+event.data+')');
eval(message.action)(message);
}
function onClick(x,y) { ws.send(JSON.stringify({ x : x, y : y })); }
function initCell(x,y) { $('#c'+x+y).click(function(){onClick(x,y);}); }
$(function() {
ws = new WebSocket('ws://localhost:8080');
ws.onopen = onOpen; ws.onmessage = onMessage; ws.onclose = onClose;
for (var i = 0; i < 3; i++)
for (var j = 0; j < 3; j++)
initCell(i,j);
});
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 303 / 423
. . . . . .
Communication client/serveur WebSocket Jeu de Morpion
Exemple du jeu de morpion index.js
function onOpen(event) { $("#message").text("Connexion etablie."); }
function onClose(event) { $("#message").text("Connexion perdue."); }
function timeToPlay(message) { $("#message").text(" vous de jouer."); }
function wait(message) { $("#message").text(" l'autre de jouer."); }
function lost(message) { $("#message").text("Vous avez perdu."); }
function win(message) { $("#message").text("Vous avez gagn."); }
function draw(message) { $("#message").text("Match nul."); }
function play(message) {
var x = message.x;
var y = message.y;
var color =(message.position == 0)?"red":"blue";
$('#c'+x+y).css("background-color", color);
}
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 304 / 423
. . . . . .
Communication client/serveur WebSocket Jeu de Morpion
Exemple du jeu de morpion Serveur
public class Main {
public static void main(String[] args) throws Exception {
Server httpServer = new Server(8080);
ResourceHandler resourceHandler = new ResourceHandler();
resourceHandler.setWelcomeFiles(new String[] { "index.html" });
resourceHandler.setResourceBase("www");
HandlerList handlers = new HandlerList();
handlers.setHandlers(new Handler[] {
new WSHandler(),
resourceHandler,
new DefaultHandler() });
httpServer.setHandler(handlers);
httpServer.start();
httpServer.join();
}
}
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 305 / 423
. . . . . .
Communication client/serveur WebSocket Jeu de Morpion
Exemple du jeu de morpion Serveur
public class WSHandler extends WebSocketHandler {
private MorpionServer server = new MorpionServer();
@Override
public WebSocket doWebSocketConnect(HttpServletRequest request,
String protocol) {
Client client = new Client(server);
return client;
}
}
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 306 / 423
. . . . . .
Communication client/serveur WebSocket Jeu de Morpion
Exemple du jeu de morpion Serveur
public class MorpionServer {
Game currentGame = new Game();
public void addClient(Client client) {
currentGame.addPlayer(client);
if (currentGame.isFull())
currentGame = new Game();
}
}
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 307 / 423
. . . . . .
Communication client/serveur WebSocket Jeu de Morpion
Exemple du jeu de morpion Serveur
public class Client implements WebSocket.OnTextMessage {
private Connection connection;
private MorpionServer server;
private Game game; private int position;
public Client(MorpionServer server) { this.server = server; }
public void onOpen(Connection connection) {
this.connection = connection; server.addClient(this);
}
public void setGame(Game game, int position) {
this.game = game; this.position = position;
}
public void onClose(int code, String msg) {
if (game!=null) game.closeGame();
}
public void closeGame() { game = null; connection.close(); }
}
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 308 / 423
. . . . . .
Communication client/serveur WebSocket Jeu de Morpion
Exemple du jeu de morpion Serveur
public class Game {
private int currentPlayer;
private List<Client> players;
public Game() { players = new ArrayList<>(); }
synchronized public void addPlayer(Client player) {
player.setGame(this, players.size());
players.add(player);
if (players.size() == 2) startGame();
}
public boolean isFull() { return players.size() == 2; }
private void startGame() { /* ... */ }
synchronized public void closeGame() {
for (Client player : players) player.closeGame();
players.clear();
}
}
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 309 / 423
. . . . . .
Communication client/serveur WebSocket Jeu de Morpion
Exemple du jeu de morpion Serveur
public class ServerMessage {
private String action;
private int position;
private int x, y;
public ServerMessage(int position, int x, int y) {
action = "play"; this.position = position;
this.x = x; this.y = y;
}
public ServerMessage(String action) { this.action = action; }
}
public class ClientMessage {
private int x, y;
public int getX() { return x; }
public int getY() { return y; }
}
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 310 / 423
. . . . . .
Communication client/serveur WebSocket Jeu de Morpion
Exemple du jeu de morpion Serveur
public class Client implements WebSocket.OnTextMessage {
/* ... */
public void onMessage(String json) {
if (game == null) return;
Gson gson = new Gson();
ClientMessage message = gson.fromJson(json, ClientMessage.class);
game.onMessage(position, message);
}
public void send(ServerMessage message) {
try {
Gson gson = new Gson();
connection.sendMessage(gson.toJson(message));
} catch (IOException e) {
if (game!=null) game.closeGame();
}
}
/* ... */
}
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 311 / 423
. . . . . .
Communication client/serveur WebSocket Jeu de Morpion
Exemple du jeu de morpion Serveur
public class Game {
private int currentPlayer;
private List<Client> players;
private int[][] grid;
private int emptyCells;
/* ... */
private void startGame() {
grid = new int[3][3]; emptyCells = 9;
for (int i = 0; i < 3; i++) Arrays.fill(grid[i], -1);
setCurrentPlayer(0);
}
private void setCurrentPlayer(int currentPlayer) {
this.currentPlayer = currentPlayer;
players.get(currentPlayer).send(new ServerMessage("timeToPlay"));
players.get(1-currentPlayer).send(new ServerMessage("wait"));
}
/* ... */
}
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 312 / 423
. . . . . .
Communication client/serveur WebSocket Jeu de Morpion
Exemple du jeu de morpion Serveur
public class Game {
/* ... */
synchronized public void onMessage(int pos, ClientMessage message){
if (pos != currentPlayer) return;
int x = message.getX(), y = message.getY();
if (x < 0 || x >=3 || y < 0 || y >=3 || grid[x][y]!=-1) return;
grid[x][y] = pos; emptyCells--;
for (Client player : players)
player.send(new ServerMessage(pos, x, y));
if (hasWon(pos)) {
players.get(pos).send(new ServerMessage("win"));
players.get(1-pos).send(new ServerMessage("lost"));
currentPlayer = -1;
} else if (emptyCells == 0) {
for (Client player : players) player.send(new ServerMessage("draw"));
} else setCurrentPlayer(1 - currentPlayer);
}
/* ... */
}
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 313 / 423
. . . . . .
Communication client/serveur WebSocket Jeu de Morpion
Exemple du jeu de morpion Serveur
public class Game {
/* ... */
private boolean hasWon(int position) {
int j;
for (int i = 0; i < 3; i++) {
for (j = 0; j < 3; j++) if (grid[i][j] != position) break;
if (j==3) return true;
for (j = 0; j < 3; j++) if (grid[j][i] != position) break;
if (j==3) return true;
}
for (j = 0; j < 3; j++) if (grid[j][j] != position) break;
if (j==3) return true;
for (j = 0; j < 3; j++) if (grid[j][2-j] != position) break;
if (j==3) return true;
return false;
}
}
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 314 / 423
. . . . . .
Node.js Introduction
Node.js Introduction
Node.js est une plateforme :

permettant dcrire des applications;

base sur le langage JavaScript (et linterprteur de Chrome);

adapte la programmation de serveur Web;

Exemple :
var http = require('http');
http.createServer(function (req, res) {
res.writeHead(200, {'Content-Type': 'text/plain'});
res.end('Hello World\n');
}).listen(8888, '127.0.0.1');
console.log('Server running at http://127.0.0.1:8888/');
Excution :
$ node example.js
Server running at http://127.0.0.1:8888/
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 315 / 423
. . . . . .
Node.js Les modules
Node.js Les modules
Pour organiser votre programme, vous pouvez dnir des modules :
var tools = require('./tools.js');
console.log( 'Aire = ' + tools.circleArea(4));
Le chier tools.js :
var PI = Math.PI;
module.exports.circleArea = function (r) {
return PI * r * r;
}
module.exports.rectangleArea = function (w, h) {
return w*h;
}
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 316 / 423
. . . . . .
Node.js Les modules
Node.js Installation de modules
Pour tlcharger et installer des modules, vous pouvez utiliser npm :
$ npm install express
npm http GET https://registry.npmjs.org/express
...

La commande npm cherche un rpertoire node_modules prsent dans

un rpertoire se trouvant entre le rpertoire courant et la racine;

Le module est install dans le rpertoire node_modules trouv;

Il est accessible dans tous les sous-rpertoires du rpertoire courant;

On a accs au module install laide la fonction require;

var express = require('express'); var app = express();
app.get('/t.txt', function(req, res){ res.send('t'); });
app.listen(8080);
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 317 / 423
. . . . . .
Node.js Quelques API
Node.js Quelques API
Un certain nombre de fonctions sont fournies dans node.js :
voir http://nodejs.org/api (je vous laisse parcourir les API)
Exemple avec STDIO :
console.log('count: %d', count);
console.info('info: %s', info);
console.error('Erreur : Truc == null.');
console.warn('Attention : variable Truc contient null.');
Exemple avec Net :
var net = require('net');
var server = net.createServer(function (socket) {
console.log(socket.remoteAddress); socket.end("bye\n");
});
server.listen(8888, function() { console.log('go !'); });
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 318 / 423
. . . . . .
Node.js Express
Node.js Express Introduction
Express est un framework pour construire des applications Web en Node
Installation :
> npm install express
npm http GET https://registry.npmjs.org/express
...
Cration dune application :
var express = require('express');
var app = express();
Aprs avoir congur lapplication, on commence couter sur un port :
app.listen(8080);
console.log('Nous coutons sur le port 8080');
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 319 / 423
. . . . . .
Node.js Express
Node.js Express Rpondre une demande
Vous pouvez rpondre des requtes par des callbacks :
var express = require('express'); var app = express();
var count = 0;
app.get('/count', function(req, res) {
res.send(""+count);
count++;
});
app.listen(8080);
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 320 / 423
. . . . . .
Node.js Express
Node.js Express Accs aux paramtres
Vous pouvez galement accder aux paramtres de la requte HTTP :
var express = require('express'); var app = express();
var count = 0;
/* ... */
app.get('/set', function(req, res, next) {
var value = req.query['value'];
if (!value) return next(new Error("value required !"));
count = parseInt(value);
res.send("ok");
});
app.listen(8080);
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 321 / 423
. . . . . .
Node.js Express
Node.js Express Contenus statiques
Pour distribuer le contenu dun rpertoire :
var express = require('express');
var app = express();
app.use(express.static(__dirname + '/public'));
app.use('/static', express.static(__dirname + '/static'));
app.listen(8080);
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 322 / 423
. . . . . .
Node.js Express
Node.js Express Les sessions
Utilisation des sessions :
var express = require('express'); var app = express();
app.use(express.cookieParser('zhizehgiz'));
app.use(express.session());
app.get('/', function(req, res){
if (req.session.count) { req.session.count++; } else {
req.session.count = 1;
}
res.send(""+req.session.count);
});
app.listen(8080);
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 323 / 423
. . . . . .
Node.js Express
Node.js Express Les paramtres
Les paramtres :
var express = require('express');
var app = express();
var users = [{name:"joe",age:21},{name:"bob",age:22}];
app.get('/user/:user', function(req, res, next){
var user = users[req.params.user];
if (!user) return next(new Error("bad user id !"));
res.writeHead(200, {'Content-Type': 'application/json'});
res.send(JSON.stringify(user));
});
app.listen(8080);
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 324 / 423
. . . . . .
Node.js Express
Node.js Express Les sequences
Les sequences :
var express = require('express'); var app = express();
app.use(express.cookieParser('zhizehgiz'));
app.use(express.session());
app.get('/auth', function(req, res, next) {
if (req.query["password"]=="toto")
req.session.auth = true;
res.send("ok");
});
function restrict(req, res, next) {
if (!req.session.auth) next(new Error("Unauthorized"));
else next();
}
/* ... */
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 325 / 423
. . . . . .
Node.js Express
Node.js Express Les sequences
Les sequences (suite) :
/* ... */
app.get('/auth', function(req, res, next) { /* ... */ });
function restrict(req, res, next) { /* ... */ }
app.get('/t', restrict, function(req, res, next) {
res.send("t");
});
app.get('/h', restrict, function(req, res, next) {
res.send("h");
});
app.listen(8080);
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 326 / 423
. . . . . .
Node.js Express
Node.js Express Templates avec ejs
Il est possible dutiliser un langage proche de PHP pour gnrer les pages :
var express = require('express');
var app = express();
app.engine('.html', require('ejs').__express);
app.set('views', __dirname + '/views');
app.set('view engine', 'html');
var users = [{name:"joe",age:21},{name:"bob",age:22}];
app.get('/', function(req, res){
res.render('users', {
users: users,
});
});
app.listen(8080);
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 327 / 423
. . . . . .
Node.js Express
Node.js Express Templates avec ejs
Le chier users.html :
<!doctype html>
<html>
<head>
<title>Example</title>
</head>
<body>
Users :
<ul>
<% for (i in users) { %>
<li><%= users[i].name %> : <%= users[i].age %></li>
<% } %>
</ul>
</body>
</html>
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 328 / 423
. . . . . .
Node.js Express
Node.js Express Templates avec Jade
Il est possible dutiliser un langage proche de PHP pour gnrer les pages :
var express = require('express');
var app = express();
app.set('views', __dirname + '/views');
app.set('view engine', 'jade');
var users = [{name:"joe",age:21},{name:"bob",age:22}];
app.get('/', function(req, res){
res.render('users', { users: users, }); });
app.listen(8080);
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 329 / 423
. . . . . .
Node.js Express
Node.js Express Templates avec Jade
Le chier users.html :
!!! 5
html
head
title Example
body Users :
ul
for user in users
li #{user.name} : #{user.age}
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 330 / 423
. . . . . .
Node.js MySQL
Node.js MySQL
var mysql = require('mysql');
var connection = mysql.createConnection(
{ host : 'localhost', user : 'username',
password : 'password', database : 'database' });
connection.connect();
var query = 'SELECT * FROM users';
connection.query(query, function(err, rows) {
if (err) throw err;
for (var i in rows) console.log(rows[i].name
+" "+rows[i].age);
});
connection.end();
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 331 / 423
. . . . . .
Node.js MySQL
Node.js MySQL
var mysql = require('mysql');
var connection = mysql.createConnection(/* ... */);
connection.connect();
var id = 3;
var query = 'SELECT * FROM users WHERE id = ?';
connection.query(query, [id], function(err, rows) {
if (err) throw err;
for (var i in rows) console.log(rows[i].name
+" "+rows[i].age);
});
connection.end();
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 332 / 423
. . . . . .
Node.js Socket.IO Introduction
Node.js Socket.IO
Socket.IO est un module qui permet de mettre en place (ou de simuler)
une connexion bidirectionnelle entre un client et un serveur.
Techniques utilises (en fonction de la disponibilit):

WebSocket

Technologie Flash

AJAX long polling

AJAX multipart streaming

Forever Iframe

JSONP Polling
Navigateurs supports :

Internet Explorer 5.5+, Safari 3+, Google Chrome 4+, Firefox 3+,
Opera 10.61+, iPhone Safari, iPad Safari, Android WebKit, WebOs
WebKit.
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 333 / 423
. . . . . .
Node.js Socket.IO Introduction
Node.js Socket.IO
Association de WebSocket et de Express :
var app = require('express')();
var server = require('http').createServer(app);
var io = require('socket.io').listen(server);
app.get('/', function (req, res) {
res.sendfile(__dirname + '/client.html');
});
/* Configuration du serveur */
server.listen(8080);
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 334 / 423
. . . . . .
Node.js Socket.IO Le serveur
Node.js Socket.IO Serveur Notications
Notication de la connexion dun nouveau client :
io.sockets.on('connection', function (socket) {
/* socket reprsente la connexion entre
le client et le serveur. */
});
Notication de la dconnexion dun client :
socket.on('disconnect', function () { /* ... */ });
Notication de la rception dun message :
socket.on('msgName', function(data) { /* ... */ });
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 335 / 423
. . . . . .
Node.js Socket.IO Le serveur
Node.js Socket.IO Serveur Messages
Envoyer un message via un socket :
socket.emit('msgName', data);
Envoyer un message tous les autres sockets ( lexception de ce socket) :
socket.broadcast.emit('msgName', data);
Envoyer un message tous les sockets :
io.sockets.emit('msgName', data);
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 336 / 423
. . . . . .
Node.js Socket.IO Le client
Node.js Socket.IO Client
Ajout du script :
<script src="/socket.io/socket.io.js"></script>
Connexion :
var socket = io.connect('http://localhost:8080');
Envoyer un message au serveur :
socket.emit('msgName', data);
couter un type de message provenant du serveur :
socket.on('msgName', function (data) { /* ... */ });
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 337 / 423
. . . . . .
Node.js Socket.IO Premier exemple
Node.js Socket.IO Premier exemple
Contenu du chier index.html :
<!doctype html>
<html>
<head>
<script src="/socket.io/socket.io.js"></script>
<script src="jquery.min.js"></script>
<script src="index.js"></script>
</head>
<body>
<div id="time"></div>
<input id="format"></input>
<button id="changeFormat">Changer le format</button>
</body>
</html>
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 338 / 423
. . . . . .
Node.js Socket.IO Premier exemple
Node.js Socket.IO Premier exemple
Contenu du chier index.js :
$(document).ready(function() {
var socket = io.connect('http://localhost:8080');
socket.on('time', function (data) {
$("#time").text(data.time);
});
$("#changeFormat").click(function() {
socket.emit("format", { format : $("#format").val() });
});
});
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 339 / 423
. . . . . .
Node.js Socket.IO Premier exemple
Node.js Socket.IO Premier exemple
Code du serveur :
var express = require('express');
var app = express();
var server = require('http').createServer(app);
var io = require('socket.io').listen(server);
app.use('/', express.static(__dirname + '/static'));
/* Initialisation de la connexion */
server.listen(8080);
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 340 / 423
. . . . . .
Node.js Socket.IO Premier exemple
Node.js Socket.IO Premier exemple
Initialisation de la connexion :
var dateFormat = require('dateformat');
var format = "h:MM:ss";
io.sockets.on('connection', function (socket) {
setInterval(sendTime, 1000, socket);
socket.on('format', function (data) {
format = data.format;
});
});
function sendTime(socket) {
var now = new Date();
socket.emit('time', { time : dateFormat(now, format) });
}
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 341 / 423
. . . . . .
Node.js Socket.IO Jeu de Morpion
Node.js Socket.IO Morpion Client
<!DOCTYPE html>
<html>
<head>
<script src="jquery.min.js"></script>
<script src="/socket.io/socket.io.js"></script>
<script src="index.js"></script>
<style><!-- style --></style>
</head>
<body>
<div id="c00" class="cell"></div>
<!-- ... -->
<div id="c22" class="cell"></div><br>
<div id="message" class="message"></div><br/>
</body>
</html>
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 342 / 423
. . . . . .
Node.js Socket.IO Jeu de Morpion
Node.js Socket.IO Morpion Client
var socket = io.connect('http://localhost:8080');
function play(data) {
var x = data.x;
var y = data.y;
var color =(data.position == 0)?"red":"blue";
$('#c'+x+y).css("background-color", color);
}
function onClick(x,y) { socket.emit("play", {x:x,y:y}); }
function initCell(x,y) {
$('#c'+x+y).click(function() { onClick(x,y); });
}
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 343 / 423
. . . . . .
Node.js Socket.IO Jeu de Morpion
Node.js Socket.IO Morpion Client
$(function() {
socket.on('play', play);
socket.on('timeToPlay', function () {
$("#message").text(" vous de jouer.");
});
socket.on('wait', function () { /* ... */ });
socket.on('lost', function () { /* ... */ });
socket.on('win', function () { /* ... */ });
socket.on('draw', function () { /* ... */ });
for (var i = 0; i < 3; i++)
for (var j = 0; j < 3; j++)
initCell(i,j);
});
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 344 / 423
. . . . . .
Node.js Socket.IO Jeu de Morpion
Node.js Socket.IO Morpion Serveur
var express = require('express'); var app = express();
var server = require('http').createServer(app);
var io = require('socket.io').listen(server);
var Game = require('./game');
var Player = require('./player');
app.use(express.static(__dirname+'/www'));
var currentGame = new Game();
io.sockets.on('connection', function (socket) {
currentGame.addPlayer(new Player(socket));
if (currentGame.isFull()) currentGame = new Game();
});
server.listen(8080);
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 345 / 423
. . . . . .
Node.js Socket.IO Jeu de Morpion
Node.js Socket.IO Morpion Serveur
var Game = function() {
this.players = [];
this.activePosition = -1;
/* ... */
}
Game.prototype = {
isFull : function() { return this.players.length == 2; },
addPlayer : function(player) {
player.setGame(this, this.players.length);
this.players.push(player);
if (this.isFull()) this.startGame();
}, /* ... */
}
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 346 / 423
. . . . . .
Node.js Socket.IO Jeu de Morpion
Node.js Socket.IO Morpion Serveur
var Player = function(socket) {
this.socket = socket;
this.game = null;
this.position = 0;
}
Player.prototype = {
sendMessage : function(msg, data) {
this.socket.emit(msg, data);
},
setGame : function(game, position) {
/* ... */
}
}
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 347 / 423
. . . . . .
Node.js Socket.IO Jeu de Morpion
Node.js Socket.IO Morpion Serveur
var Player = function(socket) { /* ... */ }
Player.prototype = {
/* ... */
setGame : function(game, position) {
this.game = game;
this.position = position;
this.socket.on('play', function(data) {
game.play(position, data.x, data.y);
});
this.socket.on('disconnect', function() {
game.giveUp(position);
});
}
}
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 348 / 423
. . . . . .
Node.js Socket.IO Jeu de Morpion
Node.js Socket.IO Morpion Serveur
var Game = function() {
/* ... */
this.initGrid();
}
Game.prototype = {
isFull : function() { /* ... */ },
addPlayer : function(player) { /* ... */ },
initGrid : function() {
this.nbEmptyCells = 9;
this.grid = [];
for (var x = 0; x < 3; x++) {
this.grid[x] = [];
for (var y = 0; y < 3; y++)
this.grid[x][y] = -1;
}
}, /* ... */
}
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 349 / 423
. . . . . .
Node.js Socket.IO Jeu de Morpion
Node.js Socket.IO Morpion Serveur
Game.prototype = {
isFull : function() { /* ... */ },
addPlayer : function(player) { /* ... */ },
initGrid : function() { / * ... */ },
setActivePosition : function(position) {
this.activePosition = position;
this.players[position].sendMessage("timeToPlay");
this.players[1 - position].sendMessage("wait");
},
startGame : function() {
this.setActivePosition(0);
}, /* ... */
}
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 350 / 423
. . . . . .
Node.js Socket.IO Jeu de Morpion
Node.js Socket.IO Morpion Serveur
Game.prototype = {
/* isFull, addPlayer, initGrid, setActivePosition */
play : function(position, x, y) {
if (this.activePosition!=position) return;
if (this.grid[x][y]!=-1) return;
this.grid[x][y] = position;
this.nbEmptyCells--;
for (var p = 0; p < 2; p++)
this.players[p].sendMessage("play",
{ position : position, x : x, y : y });
if (this.hasWin(position)) this.endGameWithAVictory(position);
else if (this.nbEmptyCells==0) this.endGameInADraw(position);
else this.setActivePosition(1 - this.activePosition);
}, /* ... */
}
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 351 / 423
. . . . . .
Node.js Socket.IO Jeu de Morpion
Node.js Socket.IO Morpion Serveur
Game.prototype = {
/* isFull, addPlayer, initGrid, setActivePosition, play */
endGameInADraw : function() {
this.players[0].sendMessage("draw");
this.players[1].sendMessage("draw");
this.activePosition = -1;
},
endGameWithAVictory : function(position) {
this.players[position].sendMessage("win");
this.players[1-position].sendMessage("lost");
this.activePosition = -1;
},
giveUp : function(position) {
if (this.activePosition!=-1) {
this.players[1-position].sendMessage("win");
this.activePosition = -1;
} this.players = [];
}, /* ... */
}
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 352 / 423
. . . . . .
Node.js Socket.IO Jeu de Morpion
Node.js Socket.IO Morpion Serveur
Game.prototype = {
/* isFull, addPlayer, initGrid, setActivePosition, play... */
hasWin : function(pos) {
for (var i = 0; i < 3; i++) {
var ok1 = true, ok2 = true;
for (var j = 0; j < 3; j++) ok1 = ok1 && (this.grid[i][j]==pos);
for (var j = 0; j < 3; j++) ok2 = ok2 && (this.grid[j][i]==pos);
if (ok1 || ok2) return true;
}
var ok1 = true, ok2 = true;
for (var i = 0; i < 3; i++) ok1 = ok1 && (this.grid[i][i]==pos);
for (var i = 0; i < 3; i++) ok2 = ok2 && (this.grid[i][2-i]==pos);
return ok1 || ok2;
}
}
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 353 / 423
. . . . . .
Node.js Socket.IO Jeu de Morpion
Node.js Socket.IO Morpion Serveur
Organisation du programme du serveur :

trois chiers : main.js, game.js, player.js.

Exportation :
var Player = function(socket) { /* ... */}
Player.prototype = {
setGame : function(game, position) { /* ... */ },
sendMessage : function(msg, data) { /* ... */ }
}
module.exports = Player;
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 354 / 423
. . . . . .
AngularJS Introduction
Introduction
AngularJS :

simplie lcriture des vues dynamiques dune application Web;

est un outil crit en JavaScript par Google;

tend lexpressivit de HTML;

Exemple de page dynamique utilisant AngularJS :
<!doctype html>
<html ng-app>
<head><script src="angular.min.js"></script></head>
<body>
<input type="text" ng-model="name">
<h1>Bonjour {{name}}!</h1>
</body>
</html>
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 355 / 423
. . . . . .
AngularJS Introduction
Introduction
Un deuxime exemple de page dynamique :
<!doctype html>
<html ng-app>
<head><script src="angular.min.js"></script></head>
<body>
<p ng-init=" nom='Bob' ">Bonjour {{nom}}!</p>
</body>
</html>
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 356 / 423
. . . . . .
AngularJS Contrleurs
Contrleurs et Data Binding

Data Binding : les vues sont automatiquement modies lors dun

changement du modle par un contrleur.

Les contrleurs sont attachs aux lments du DOM et font voluer

le modle en fonction des actions de lutilisateurs ou dvnements.
<!doctype html>
<html ng-app>
<!-- ... -->
<body>
<div ng-controller="MyCtrl">
<input type="text" ng-model="src">
<button ng-click="copy()">Copier</button>
<h1>{{dst}}</h1>
</div>
</body>
</html>
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 357 / 423
. . . . . .
AngularJS Contrleurs
Contrleurs et Data Binding

Data Binding : les vues sont automatiquement modies lors dun

changement du modle par un contrleur.

Les contrleurs sont attachs aux lments du DOM et font voluer

le modle en fonction des actions de lutilisateurs ou dvnements.
La fonction qui permet de construire une instance du contrleur :
function MyCtrl($scope) {
$scope.copy = function() {
$scope.dst = $scope.src;
}
}
La variable $scope rfrence un objet qui correspond la partie du
modle attache llment du DOM contrle.
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 358 / 423
. . . . . .
AngularJS Contrleurs
Scopes et RootScope
La variable $scopeScope contient lintgralit du modle alors que la
variable $scope contient uniquement la partie du modle attache
llment du DOM :
<body>
<div ng-controller="MyCtrl">
<input type="text" ng-model="src">
<button ng-click="copy()">Copier</button>
</div>
<h1>{{dst}}</h1>
</body>
function MyCtrl($scope, $rootScope) {
$scope.copy = function() { $rootScope.dst = $scope.src; }
}
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 359 / 423
. . . . . .
AngularJS Contrleurs
Scopes et RootScope
Porte des scopes :
<body>
<div ng-controller="MyCtrl">
{{ dst }}
</div>
{{ dst }}
</body>
function MyCtrl($scope, $rootScope) {
$rootScope.dst = "rootScope";
$scope.dst = "scope";
}
Chaque contrleur peut donc avoir une partie du modle comme contexte.
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 360 / 423
. . . . . .
AngularJS Template
Template ng-repeat
<body ng-controller="ListCtrl">
<input ng-model="item">
<button ng-click="add()">add</button>
<ul><li ng-repeat="e in items">
{{ e }}
</li></ul>
</body>
function ListCtrl($scope) {
$scope.items = [];
$scope.add = function() {
$scope.items.push($scope.item);
}
}
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 361 / 423
. . . . . .
AngularJS Template
Template ng-repeat
<body ng-controller="ListCtrl">
<input ng-model="item">
<button ng-click="add()">add</button>
<ul><li ng-repeat="e in items">
{{ e }}
</li></ul>
</body>
function ListCtrl($scope) {
$scope.items = [];
$scope.add = function() {
$scope.items.push($scope.item);
}
}
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 362 / 423
. . . . . .
AngularJS Template
Template visibilit
Il est possible de masquer ou dacher certains lments :
<body>
<input type="checkbox" ng-model="checked">
<span ng-show="checked">coch</span>
<span ng-hide="checked">non coch</span>
<input type="text" ng-model="data">
<ul ng-switch on="data">
<li ng-switch-when="toto">data==toto</li>
<li ng-switch-when="truc">data==truc</li>
<li ng-switch-default>data!=toto and data!=truc</li>
</ul>
</body>
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 363 / 423
. . . . . .
AngularJS Template
Template style
Il est possible de modier la classe et le style des lments :
<body ng-init="style={color:'green'}">
<button ng-click="style={color:'red'}">Rouge</button>
<button ng-click="style={color:'black'}">Noir</button>
<span ng-style="style">zadza</span>
<pre>style={{style}}</pre>
</body>
<body ng-init="cls='green'">
<button ng-click="cls='red'">Rouge</button>
<button ng-click="cls='black'">Noir</button>
<span ng-class="cls">zadza</span>
</body>
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 364 / 423
. . . . . .
AngularJS Template
Template formulaire
<form name="myForm">
<input name="input" type="text" name="input"
ng-model="text" ng-pattern="/^[a-z]{3,6}$/" required>
<button ng-disabled="!myForm.$valid" type="submit">
Envoyer
</button>
<span class="error"
ng-show="myForm.input.$error.required">
Ncessaire
</span>
<span class="error"
ng-show="myForm.input.$error.pattern">
3 6 lettres miniscules
</span>
</form>
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 365 / 423
. . . . . .
AngularJS Template
Template vnements
<body ng-controller="MyCtrl">
<div ng-click="onEvent('click')">click</div>
<div ng-mousedown="onEvent('down')">down</div>
<div ng-mouseup="onEvent('up')">up</div>
<div ng-mouseenter="onEvent('enter')">enter</div>
<div ng-mouseleave="onEvent('leave')">leave</div>
<div ng-mouseover="onEvent('over')">over</div>
<input ng-model="data" ng-change="onEvent('change')">
</body>
function MyCtrl($scope) {
$scope.onEvent = function(s) { console.log(s); }
}
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 366 / 423
. . . . . .
AngularJS Template
Template les liens et les images
<body ng-controller="MyCtrl">
<div ng-repeat="item in items">
<a ng-href="{{item.img}}">
<img ng-src="{{item.rimg}}">
</a>
</div>
</body>
function MyCtrl($scope) {
$scope.items = [
{img : "a.jpg", rimg : "ra.jpg" },
{img : "b.jpg", rimg : "rb.jpg" }
];
}
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 367 / 423
. . . . . .
AngularJS Template
Template utilisation des ltres
<body ng-controller="ListCtrl">
<input ng-model="item">
<button ng-click="add()">add</button>
<input ng-model="query">
<ul><li ng-repeat="e in items | filter:query">
{{ e }}
</li></ul>
</body>
function ListCtrl($scope) {
$scope.items = [];
$scope.add = function() {
$scope.items.push($scope.item);
}
}
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 368 / 423
. . . . . .
AngularJS Modules
Les modules

La faon de construire lapplication est spcie par des modules.

Dans les modules, on spcie ce qui est partag dans lapplication.

Un module peut dpendre dautres modules.

Lapplication a un module principal.

Dans le code HTML :
<!doctype html>
<html ng-app="myApp">
<!-- ... -->
</html>
Ct JavaScript :
var myApp = angular.module('myApp', []);
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 369 / 423
. . . . . .
AngularJS Modules
Les modules
Un exemple avec la dnition dun nouveau ltre :
var myApp = angular.module('myApp', []);
myApp.filter('bracket', function() {
return function(text) { return '['+text+']'; }
});
Utilisation du ltre ct HTML :
<!doctype html>
<html ng-app="myApp">
<head><!-- ... --></head>
<body>
{{ 'exemple' | bracket }} <!-- [exemple] -->
</body>
</html>
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 370 / 423
. . . . . .
AngularJS Modules
Les modules
Trois sortes dlments peuvent tre dnis dans un module :

Un service (un objet partageable);

Une directive (nouvel lment ct HTML);

Un ltre (voir le transparent prcdent).

Il est recommand de sparer les dirents lments :
var myAppService = angular.module('myApp.service', []);
var myAppDirective = angular.module('myApp.directive', []);
var myAppFilter = angular.module('myApp.filter', []);
var myApp = angular.module('myApp', ['myApp.service',
'myApp.directive',
'myApp.filter']);
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 371 / 423
. . . . . .
AngularJS Modules
Les modules
Il est possible dexcuter du code au lancement de lapplication :
var myApp = angular.module('myApp', []);
myApp.run(function($rootScope) {
$rootScope.message = "Mon message";
});
<!doctype html>
<html ng-app="myApp">
<head><!-- ... --></head>
<body>
{{ message }} <!-- devient "Mon message" -->
</body>
</html>
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 372 / 423
. . . . . .
AngularJS Services
Les services
Un service est un objet utilisable par dautres objets de lapplication :
var myAppService = angular.module('myApp.service', []);
var myApp = angular.module('myApp', ['myApp.service']);
myAppService.factory('messages', function() {
return {
callbacks : [],
addMessage : function(msg) {
for (var i = 0; i < this.callbacks.length; i++)
this.callbacks[i](msg);
},
addCallback : function(callback) {
this.callbacks.push(callback);
}
}
});
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 373 / 423
. . . . . .
AngularJS Services
Les services
Code du contrleur pour poster de nouveau message :
function AddMsgCtrl($scope, messages /* injection */) {
$scope.addMessage = function() {
messages.addMessage($scope.msg);
}
}
Code HTML associ ce contrleur :
<div ng-controller="AddMsgCtrl">
<input type="text" ng-model="msg">
<button ng-click="addMessage()">Add</button>
</div>
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 374 / 423
. . . . . .
AngularJS Services
Les services
Code dun contrleur qui ache le dernier message :
function MsgViewer($scope, messages) {
messages.addCallback(function(msg) {
$scope.msg = msg;
});
}
Code HTML associ ce contrleur :
<div ng-controller="MsgViewer">
{{ msg }}
</div>
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 375 / 423
. . . . . .
AngularJS Services
Les services
Dnition de Counter (un service qui compte des messages) :
function Counter() {
this.count = 0;
this.callbacks = [];
}
Counter.prototype.notify = function(msg) {
this.count++;
for (var i = 0; i < this.callbacks.length; i++)
this.callbacks[i](this.count);
}
Counter.prototype.addCallback = function(callback) {
this.callbacks.push(callback);
}
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 376 / 423
. . . . . .
AngularJS Services
Les services
Ajout dune fabrique pour crer le service avec laide dun autre service :
myAppService.factory('counter', function(messages) {
var counter = new Counter();
messages.addCallback(function(msg) {
counter.notify(msg);
});
return counter;
});
Le service messages est inject dans la fabrique du service counter.
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 377 / 423
. . . . . .
AngularJS Services
Les services
Utilisation du service counter par un contrleur :
function CountViewer($scope, counter) {
counter.addCallback(function(count) {
$scope.count = count;
});
}
Code HTML qui utilise ce contrleur :
<div ng-controller="CountViewer">
{{ count }}
</div>
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 378 / 423
. . . . . .
AngularJS Services
Les services
Services et vnements extrieurs AngularJS :

Les modications du modle engendrent une modication du DOM

uniquement la n dun venements AngularJS.

Donc, il ny aura pas de modication du DOM la n dun

traitement associ un vnement extrieur AngularJS.

La mthode $apply(func) permet dexcuter une fonction depuis

lextrieur de AngularJS.
Pseudo-code de la mthode $apply() :
function $apply(expr) {
try {
return $eval(expr);
} catch (e) { $exceptionHandler(e); }
finally { $root.$digest(); }
}
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 379 / 423
. . . . . .
AngularJS Services
Les services
app.factory('socket', function ($rootScope) {
var socket = io.connect('ws://localhost:8080');
return {
on: function (eventName, callback) {
socket.on(eventName, function () {
var args = arguments;
$rootScope.$apply(function () {
callback.apply(socket, args);
});
});
},
/* mthode emit du transparent suivant */
};
});
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 380 / 423
. . . . . .
AngularJS Services
Les services
app.factory('socket', function ($rootScope) {
var socket = io.connect('ws://localhost:8080');
return {
/* mthode on du transparent prcdent */
emit: function (eventName, data, callback) {
socket.emit(eventName, data, function () {
var args = arguments;
$rootScope.$apply(function () {
if (callback) { callback.apply(socket, args); }
});
})
}
};
});
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 381 / 423
. . . . . .
AngularJS Services
Les services
app.factory('socket', function ($rootScope) {
var socket = io.connect('ws://localhost:8080');
return {
/* mthode on du transparent prcdent */
emit: function (eventName, data, callback) {
socket.emit(eventName, data, function () {
var args = arguments;
$rootScope.$apply(function () {
if (callback) { callback.apply(socket, args); }
});
})
}
};
});
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 382 / 423
. . . . . .
AngularJS Injection
Injection
Par infrence sur le nom des paramtres :
function MyController($scope, counter /* injection */) {
/* ... */
}
Cette mthode dinjection ne rsiste pas la minication/obfuscation du
code JavaScript. Par consquent, il est prfrable de faire :
function MyController(scope, counter) {
/* ... */
}
MyController.$inject = ['$scope', 'counter'];
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 383 / 423
. . . . . .
AngularJS Injection
Injection
Pour les fabriques, il est possible de faire :
function counterFactory(messages) {
/* ... */
}
counterFactory.$inject = ['messages'];
myAppService.factory('counter', counterFactory);
ou plus simplement avec la notation en ligne :
myAppService.factory('counter', ['messages',
function(messages) {
/* ... */
}
]);
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 384 / 423
. . . . . .
AngularJS Routes
Routes
Objectif :

acher des vues en fonction de lURL prsente dans la barre

dadresse du navigateur de faon avoir un dplacement agrable
dans le site Web (avec gestion de lhistorique et des paramtres).
Solution :

Avec HTML5, il est possible dinteragir avec la barre dadresse du

navigateur (URL, historique, etc.). Le service $location de
AngularJS permet davoir accs ces fonctionnalits.

Le service $route de AngularJS observe lURL (grce au service

$location) et modie le contenu de la page en fonction de lURL.

Les routes sont dnies via lAPI $routeProvider.

Les vues sont insres ct HTML laide de ng-view.

Les paramtres sont accessibles via le service $routeParams.

Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 385 / 423
. . . . . .
AngularJS Routes
Routes
Soit le tableau suivant :
var users = [
{ id : 0, name : "Lucie", age : 21},
{ id : 1, name : "Bob", age : 22},
{ id : 2, name : "Christine", age : 30},
{ id : 3, name : "Arthur", age : 24},
];
#/users :

Lucie

Bob

Christine

Arthur
#/user/1 :
Bob
age : 22
#/user/2 :
Christine
age : 30
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 386 / 423
. . . . . .
AngularJS Routes
Routes
Pour congurer les routes, on congure le service $routeProvider :
angular.module('myapp', []).
config(function($routeProvider) {
$routeProvider.when('/users', {
templateUrl: 'users.html',
controller: UserListCtrl
})
.when('/user/:id', {
templateUrl: 'user.html',
controller: UserCtrl
})
.otherwise({redirectTo: '/users'});
});
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 387 / 423
. . . . . .
AngularJS Routes
Routes
Le chier users.html :
<ul>
<li ng-repeat="user in users">
<a href="#/user/{{user.id}}">{{user.name}}</a>
</li>
</ul>
Le contrleur UserListCtrl :
function UserListCtrl($scope) {
$scope.users = users;
}
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 388 / 423
. . . . . .
AngularJS Routes
Routes
Le chier userlist.html :
<b>{{user.name}}</b>
<ul>
<li>age : {{user.age}}</li>
</ul>
<a href="#/users">Liste des utilisateurs</a>
Le contrleur UserCtrl :
function UserCtrl($scope, $routeParams) {
/* TODO : tester la valeur du paramtre */
$scope.user = users[$routeParams.id];
}
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 389 / 423
. . . . . .
AngularJS Directives
Directives
Les directives permettent de crer de nouveaux lments HTML :
angular.module('myapp', [])
.directive('user', function(){
return {
restrict: 'E',
replace: true,
scope: { src : '=src' }, /* ou src : '=' */
template: '<span>{{src.name}} :
{{src.age}}</span>'
}});
Ensuite, il est possible dutiliser le nouveau composant dans le HTML :
<body ng-init="bob = {name:'bob', age:22}">
<user src="bob" />
</body>
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 390 / 423
. . . . . .
AngularJS Directives
Directives
Il est possible disoler le template dans un autre chier :
var myapp = angular.module('myapp', [])
myapp.directive('user', function(){
return {
restrict: 'E',
replace: true,
scope: { src : '=src' },
template: 'user.html',
}
});
Contenu du chier user.html :
<span>{{src.name}} : {{src.age}}</span>
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 391 / 423
. . . . . .
AngularJS Directives
Directives
Il est possible dassocier un contrleur llment :
myapp.directive('userform', function(){
return {
restrict: 'E',
replace: true,
scope: { userList : '=' }, /* attr. user-list */
templateUrl: 'userform.html',
controller : 'UserFormCtrl'
}
});
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 392 / 423
. . . . . .
AngularJS Directives
Directives
Le code du contrleur UserFormCtrl :
function UserFormCtrl($scope) {
$scope.add = function(user) {
$scope.userList.push(user);
}
}
Le contenu du chier userform.html :
<div>
<input type="text" ng-model="user.name" />
<input type="text" ng-model="user.age" />
<button ng-click="add(user);">ajouter</button>
</div>
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 393 / 423
. . . . . .
AngularJS Directives
Directives
Utilisation des balises prcdentes :
<body ng-controller="MainCtrl">
<ul>
<li ng-repeat="user in users">
<user src="user" />
</li>
</ul>
<userform user-list="users" />
</body>
Code du contrleur GlobalCtrl :
function MainCtrl($scope) {
$scope.users = [{ name : "Lucie", age : 21}, /*...$*/];
}
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 394 / 423
. . . . . .
AngularJS Directives
Directives
Supposons que la directive suivante soit dnie :
myapp.directive('message', function(){
return {
restrict: 'E',
replace: true,
scope: { nickname : '=' },
templateUrl: 'message.html',
}
});
Nous souhaitons utiliser la directive de la faon suivante :
<message nickname="bob">Bonjour.</message>
De faon obtenir :
<b>bob</b> : Bonjour.
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 395 / 423
. . . . . .
AngularJS Directives
Pour ce faire, il sut de dnir le template de la faon suivante :
<span>
<b>{{nickname}}</b> :
<span ng-transclude></span>
</span>
Le mot-cl ng-transclude permet de copier le contenu prsent dans la
balise dans la balise dsigne laide du mot-cl.
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 396 / 423
. . . . . .
AngularJS Directives
Directives
Ralisation dune grille de morpion :
<body ng-controller="MainCtrl">
<grid grid="grid" on-click="play"></grid>
</body>
Avec le style suivant :
.cell {
display :inline-block;
height:30px; width:30px;
border: 1px solid gray;
}
.red { background-color:red; }
.blue { background-color:blue; }
.while { background-color:white; }
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 397 / 423
. . . . . .
AngularJS Directives
Directives
Dnition de la directive :
var myapp = angular.module('myapp', []);
myapp.directive('grid', function(){
return {
restrict: 'E',
replace: true,
scope: { grid : '=',
onClick : '='
},
templateUrl: 'grid.html',
}
});
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 398 / 423
. . . . . .
AngularJS Directives
Directives
Dnition du contrleur :
function MainCtrl($scope) {
$scope.grid = [];
for (var i = 0; i < 3; i++) {
$scope.grid[i] = [];
for (var j = 0; j < 3; j++)
$scope.grid[i][j] = 'while';
}
$scope.play = function(x,y) { $scope.grid[x][y]='red'; }
}
Rappel de lutilisation du contrleur :
<body ng-controller="MainCtrl">
<grid grid="grid" on-click="play"></grid>
</body>
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 399 / 423
. . . . . .
AngularJS Directives
Directives
Le template grid.html :
<div>
<div ng-repeat="l in [0,1,2]">
<div class="cell"
ng-repeat="c in [0,1,2]"
ng-class="grid[l][c]"
ng-click="onClick(l,c)">
</div>
</div>
</div>
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 400 / 423
. . . . . .
AngularJS Directives
Directives
Si nous avons le code HTML suivant :
<body ng-controller="MainCtrl">
<grid grid="grid" on-click="playRed"></grid><br><br>
<grid grid="grid" on-click="playBlue"></grid>
</body>
Que se passe-t-il avec le contrleur suivant ?
function MainCtrl($scope) {
/* TODO : initilisation de la grille. */
$scope.playRed =
function(x,y) { $scope.grid[x][y]='red'; }
$scope.playBlue =
function(x,y) { $scope.grid[x][y]='blue'; }
}
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 401 / 423
. . . . . .
AngularJS Directives
Directives
Nous souhaitons utiliser le code HTML suivant :
<body ng-controller="MainCtrl">
<grid grid="grid" on-click="grid[x][y]='red'"></grid>
<grid grid="grid" on-click="grid[x][y]='blue'"></grid>
</body>
Avec le contrleur suivant :
function MainCtrl($scope) {
$scope.grid = [];
for (var i = 0; i < 3; i++) {
$scope.grid[i] = [];
for (var j=0;j<3;j++) $scope.grid[i][j] = 'while';
}
}
Pourquoi la directive donne prcdemment ne fonctionne plus ?
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 402 / 423
. . . . . .
AngularJS Directives
Directives
Modication de la directive :
var myapp = angular.module('myapp', []);
myapp.directive('grid', function(){
return {
restrict: 'E',
replace: true,
scope: { grid : '=',
onClick : '&'
},
templateUrl: 'grid.html',
}
});
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 403 / 423
. . . . . .
AngularJS Directives
Directives
Modication du template grid.html :
<div>
<div ng-repeat="l in [0,1,2]">
<div class="cell"
ng-repeat="c in [0,1,2]"
ng-class="grid[l][c]"
ng-click="onClick({x:l, y:c})"></div>
</div>
</div>
Rappel de lutilisation de la directive :
<body ng-controller="MainCtrl">
<grid grid="grid" on-click="grid[x][y]='red'"></grid>
<grid grid="grid" on-click="grid[x][y]='blue'"></grid>
</body>
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 404 / 423
. . . . . .
AngularJS Directives
Directives
Les direntes faons dinsrer une directive :
E Element name: <my-directive></my-directive>
A Attribute: <div my-directive="exp"> </div>
C Class: <div class="my-directive: exp;"></div>
M Comment: <!-- directive: my-directive exp -->
Modication de la directive :
var myapp = angular.module('myapp', []);
myapp.directive('grid', function(){
return { restrict: 'CA', /* ... */ }
});
Utilisation :
<div class="grid: grid" on-click="grid[x][y]='red'"></div>
<div grid="grid" on-click="grid[x][y]='blue'"></div>
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 405 / 423
. . . . . .
Dart/TypeScript Dart
Dart Introduction
Objectif : Proposer un nouveau langage ct client (et serveur) qui
permette le dveloppement dapplications de grande taille.
Dart :

est un nouveau langage de programmation (de Google);

peut tre compil en JavaScript;

est un langage orient objet (classe, interfaces, extension...);

permet de typer statiquement des variables;

propose un IDE (auto-completion, debug...);

dispose galement une machine virtuelle (Dart VM);

permet un dcoupage en modules de lapplication;

etc.
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 406 / 423
. . . . . .
Dart/TypeScript Dart
Dart Introduction
Utilisation dun script Dart dans du code HTML :
<!DOCTYPE html>
<html>
<head><!--***--></head>
<body>
<div id="text"></div>
<script type="application/dart" src="test.dart">
</script>
<script src="packages/browser/dart.js">
</script>
</body>
</html>
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 407 / 423
. . . . . .
Dart/TypeScript Dart
Dart Introduction
Utilisation dun script Dart dans du code HTML :
import 'dart:html';
void main() {
query("#text").text = "Truc";
}
Dans ce code, nous utilisons la librairie html pour interagir avec le DOM.
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 408 / 423
. . . . . .
Dart/TypeScript Dart
Dart Introduction
Un autre exemple :
import 'dart:html';
void main() {
query("#text").text = "Truc";
query("#text").onClick.listen(textClick);
}
void textClick(Event e) {
String txt = query("#text").text;
query("#text").text="["+txt+"]";
}
Notez que certaines variables sont types statiquement.
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 409 / 423
. . . . . .
Dart/TypeScript Dart
Dart Programmation objet
Il est possible de dnir une classe et de crer une instance :
class Point {
num x;
num y;
Point(num x, num y) { this.x = x; this.y = y; }
}
main() {
var point = new Point(2, 4);
point.x = 4;
assert(point.x == 4);
assert(point.y == 4);
}
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 410 / 423
. . . . . .
Dart/TypeScript Dart
Dart Programmation objet
Quelques nouveauts pour faciliter le dveloppement :
class Point {
num x;
num y;
Point(this.x, this.y);
Point.alongXAxis(num x) : this(x, 0);
Point.alongYAxis(num y) : this(0, y);
Point.fromJson(Map<String,num> json) {
x = json['x'];
y = json['y'];
}
String toString() => "(${x},${y})";
}
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 411 / 423
. . . . . .
Dart/TypeScript Dart
Dart Programmation objet
Utilisation de la classe dcrite prcdemment :
void main() {
Point p1 = new Point(2,3);
Point p2 = new Point.alongXAxis(2);
Point p3 = new Point.alongYAxis(2);
Point p4 = new Point.fromJson({"x":3, "y":6});
query("#text").text = "${p1} ${p2} ${p3} ${p4}";
}
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 412 / 423
. . . . . .
Dart/TypeScript Dart
Dart Programmation objet
Il est possible dtendre une classe :
class Pixel extends Point {
num r, g, b;
Pixel(x, y, this.r, this.g, this.b) : super(x,y);
String toString() => "((${super.toString()},"+
"${r},${g},${b})";
}
Quel texte est plac dans la balise text :
void main() {
Pixel pixel = new Pixel(2,3,2.3,3.4,5.0);
Point point = pixel;
query("#text").text = "${pixel} ${point}";
}
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 413 / 423
. . . . . .
Dart/TypeScript Dart
Dart Programmation objet
Les interfaces implicites :
class Converter {
String convert(String s) => s;
}
class UpperCaseConverter implements Converter {
String convert(String s) => s.toUpperCase();
}
class LowerCaseConverter implements Converter {
String convert(String s) => s.toLowerCase();
}
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 414 / 423
. . . . . .
Dart/TypeScript Dart
Dart Programmation objet
Utilisation des classes prcdentes :
void main() {
List<Converter> converters =
[
new Converter(),
new UpperCaseConverter(),
new LowerCaseConverter()
];
String txt = "[ToTo]";
query("#text").text =
converters.map((c) => c.convert(txt))
.join(";");
}
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 415 / 423
. . . . . .
Dart/TypeScript Dart
Dart Programmation objet
Autres fonctionnalits :

possibilit de dnir des getters et des setters;

classes abstraites;

classes immutables et mot-cl const;

types gnriques;
Autres exemples :
var names = new List<String>();
names.addAll(<String>['Bob', 'Arthur', 'Louis', 'Bob']);
var nameSet = new Set<String>.from(names);
query("#text").text = nameSet.join(";");
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 416 / 423
. . . . . .
Dart/TypeScript Dart
Dart Les librairies
dart:core Numbers, Collections, Strings, and More
dart:async Asynchronous Programming
dart:math Math and Random
dart:html Browser-Based Apps
dart:isolate Concurrency with Isolates
dart:io I/O for Command-Line Apps
dart:json Encoding and Decoding Objects
dart:uri Manipulating URIs
dart:utf Strings and Unicode
dart:crypto Hash Codes and More
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 417 / 423
. . . . . .
Dart/TypeScript Dart
Dart Les librairies
import 'dart:html';
import 'dart:json' as json;
void main() {
var jsonString = '''
[
{ "name" : "bob", "age" : 22 },
{ "name" : "arthur", "age": 45 },
]
''';
var persons = json.parse(jsonString);
var list = persons.map(
(p) => "<li><b>${p["name"]}</b> : ${p["age"]}</li>");
query("#text").innerHtml = "<ul>${list.join()}</ul>"; <!-- $ -->
}
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 418 / 423
. . . . . .
Dart/TypeScript TypeScript
TypeScript
Objectif : Proposer un nouveau langage ct client qui permette le
dveloppement dapplications de grande taille.
TypeScript :

est un nouveau langage de programmation (de Microsoft);

se compile en JavaScript (avec Node.js);

est un langage orient objet (classe, interfaces, extension...);

permet de typer statiquement des variables;

propose un plugin pour Visual Studio;

propose des plugins pour dautres diteurs;

etc.
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 419 / 423
. . . . . .
Dart/TypeScript TypeScript
TypeScript
TypeScript est un langage orient objet :
interface Converter {
convert(s:string) : string;
}
class LowerCaseConverter implements Converter {
convert(s:string) : string { return s.toLowerCase(); }
}
class UpperCaseConverter implements Converter {
convert(s:string) : string { return s.toUpperCase(); }
}
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 420 / 423
. . . . . .
Dart/TypeScript TypeScript
TypeScript
Utilisation de linterface et des classes prcdentes :
var converters : Converter[] = [
new LowerCaseConverter(),
new UpperCaseConverter()
];
var r : string = "";
for(var i =0; i < converters.length; i++)
r+= converters[i].convert("[ToTo]");
document.body.innerHTML = r;
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 421 / 423
. . . . . .
Dart/TypeScript TypeScript
TypeScript
Le code TypeScript prcdent compil en JavaScript :
var SimpleConverter = (function () {
function SimpleConverter() { }
SimpleConverter.prototype.convert = function (s) {
return s;
};
return SimpleConverter;
})();
var UpperCaseConverter = (function () {
function UpperCaseConverter() { }
UpperCaseConverter.prototype.convert = function (s) {
return s.toUpperCase();
};
return UpperCaseConverter;
})();
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 422 / 423
. . . . . .
Dart/TypeScript TypeScript
TypeScript
Le code TypeScript prcdent compil en JavaScript :
var converters = [
new SimpleConverter(),
new UpperCaseConverter()
];
var r = "";
for(var i = 0; i < converters.length; i++) {
r += converters[i].convert("[ToTo]");
}
document.body.innerHTML = r;
Bertrand Estellon (AMU) Dveloppement Web 2 April 26, 2013 423 / 423