lp web tp3_idse

22
Licence Professionnelle Nice – Sophia G. Rey 2013-2014 Licence Professionnelle Nice – Sophia Université de Nice – Sophia Antipolis 930, Route des Colles – B.P. 145 - 06903 Sophia Antipolis Cedex – France Tél : +33 (0)4 92 96 50 50 – Fax : +33 (0)4 92 96 50 55 http://www.polytech.unice.fr/ 1 Cours/TP n° 3 Technologies « coté Serveur » 1 Présentation Les objectifs de ce cours/TP sont de vous montrer comment installer et configurer un serveur web pour qu’il puisse interpréter des scripts PHP. Nous verrons également comment fonctionne le langage PHP et comment utiliser PHP conjointement avec AJAX. Enfin, dans la dernière partie du TP nous expérimenterons d’autres technologies concurrentes à PHP tel que l’ASP.Net de Microsoft. 1.1 Pré-requis Pour réaliser ce cours/TP, vous avez besoin d’un serveur web fonctionnel. Vous utiliserez le serveur http sous Linux que vous avez configuré lors du cours/TP 1. Vous aurez également besoin d’un éditeur de texte pour écrire le code de vos pages. Vous pouvez par exemple utiliser un des logiciels Notepad++, ConText, Quanta+, WebExpert, SciTE Pour réaliser ce cours/TP, vous garderez les groupes constitués lors du premier cours/TP. 1.2 Le rendu Vous devrez, en fin de séance, rendre un compte rendu de votre TP. Ce compte rendu devra OBLIGATOIREMENT respecter les contraintes suivantes : Etre envoyez par email à votre enseignant. Avoir le sujet suivant : [2013][LPSIL][IDSE][TP3]nom1_Prenom1 – nom2_Prenom2 où nom1_Prenom1 et nom2_Prenom2 les noms et prénoms du binôme. Etre reçu par votre enseignant le jour du cours/TP. Contenir dans le corps de l’email les questions que vous pourriez avoir (si vous souhaitez avoir une réponse rapide car les comptes rendu ne sont pas évalués immédiatement). Contenir en attachement 1 seul fichier .zip, .7z ou .tar.gz contenant lui-même 1 fichier de compte rendu (au format pdf, rtf, doc, docx ou txt) ainsi que les divers fichiers (fichiers de configuration, pages (x)html, CSS, php…) écrits dans le TP. 2 Installation et configuration du server HTTP Pour nos exercices, il nous faudra disposer d'un serveur http acceptant les scripts PHP et donnant accès à une base de données. Nous installerons donc PHP et mysql dans notre machine virtuelle linux-debian. Si vous avez installé le forum phpBB lors du cours/TP 1, vous avez déjà fait une partie de ce travail. 2.1 Installation Commençons par ajouter mysql à notre installation : > apt-get install mysql-server ou > aptitude install mysql-server Nous devons également installer les modules php pour apache. Pour cela, vous devez installer un interpréteur php à l’aide de la commande suivante : > apt-get install php5 ou > aptitude install php5

Upload: karim-amane

Post on 21-Jun-2015

192 views

Category:

Internet


1 download

TRANSCRIPT

Page 1: Lp web tp3_idse

Licence Professionnelle Nice – Sophia G. Rey

2013-2014

Licence Professionnelle Nice – Sophia

Université de Nice – Sophia Antipolis

930, Route des Colles – B.P. 145 - 06903 Sophia Antipolis Cedex – France

Tél : +33 (0)4 92 96 50 50 – Fax : +33 (0)4 92 96 50 55

http://www.polytech.unice.fr/

1

Cours/TP n° 3 Technologies « coté Serveur »

1 Présentation Les objectifs de ce cours/TP sont de vous montrer comment installer et configurer un serveur web pour qu’il puisse

interpréter des scripts PHP. Nous verrons également comment fonctionne le langage PHP et comment utiliser PHP

conjointement avec AJAX. Enfin, dans la dernière partie du TP nous expérimenterons d’autres technologies

concurrentes à PHP tel que l’ASP.Net de Microsoft.

1.1 Pré-requis Pour réaliser ce cours/TP, vous avez besoin d’un serveur web fonctionnel. Vous utiliserez le serveur http sous Linux

que vous avez configuré lors du cours/TP 1.

Vous aurez également besoin d’un éditeur de texte pour écrire le code de vos pages. Vous pouvez par exemple

utiliser un des logiciels Notepad++, ConText, Quanta+, WebExpert, SciTE …

Pour réaliser ce cours/TP, vous garderez les groupes constitués lors du premier cours/TP.

1.2 Le rendu Vous devrez, en fin de séance, rendre un compte rendu de votre TP. Ce compte rendu devra OBLIGATOIREMENT

respecter les contraintes suivantes :

Etre envoyez par email à votre enseignant.

Avoir le sujet suivant : [2013][LPSIL][IDSE][TP3]nom1_Prenom1 – nom2_Prenom2 où nom1_Prenom1 et

nom2_Prenom2 les noms et prénoms du binôme.

Etre reçu par votre enseignant le jour du cours/TP.

Contenir dans le corps de l’email les questions que vous pourriez avoir (si vous souhaitez avoir une

réponse rapide car les comptes rendu ne sont pas évalués immédiatement).

Contenir en attachement 1 seul fichier .zip, .7z ou .tar.gz contenant lui-même 1 fichier de compte rendu (au

format pdf, rtf, doc, docx ou txt) ainsi que les divers fichiers (fichiers de configuration, pages (x)html, CSS,

php…) écrits dans le TP.

2 Installation et configuration du server HTTP Pour nos exercices, il nous faudra disposer d'un serveur http acceptant les scripts PHP et donnant accès à une base

de données. Nous installerons donc PHP et mysql dans notre machine virtuelle linux-debian. Si vous avez installé le

forum phpBB lors du cours/TP 1, vous avez déjà fait une partie de ce travail.

2.1 Installation Commençons par ajouter mysql à notre installation :

> apt-get install mysql-server

ou

> aptitude install mysql-server

Nous devons également installer les modules php pour apache. Pour cela, vous devez installer un interpréteur php

à l’aide de la commande suivante :

> apt-get install php5

ou

> aptitude install php5

Page 2: Lp web tp3_idse

Licence Professionnelle Nice – Sophia G. Rey

2013-2014

Licence Professionnelle Nice – Sophia

Université de Nice – Sophia Antipolis

930, Route des Colles – B.P. 145 - 06903 Sophia Antipolis Cedex – France

Tél : +33 (0)4 92 96 50 50 – Fax : +33 (0)4 92 96 50 55

http://www.polytech.unice.fr/

2

Cours/TP n° 3 Technologies « coté Serveur »

Nous allons également installer le package suivant pour faire le lien entre php5 et mysql

> apt-get install php5-mysql

ou

> aptitude install php5-mysql

2.2 Configuration La ligne suivante est nécessaire pour que les fichiers php soient bien interprétés par apache.

AddType application/x-httpd-php .php .php3 .php5 .phtml

Normalement celle-ci ou une ligne équivalente doit être ajoutée dans apache2.conf ou httpd.conf ou dans le fichier

de configuration du module correspondant.

Comme nous l’avons vu dans le cours/TP1, pour une gestion plus « propre », celle-ci se trouve aujourd’hui dans le

fichier de configuration du module php5 pour apache. Vérifiez cela :

> cat /etc/apache2/mods-enabled/php5.conf

Depuis la version 2.2.16 (introduite dans la version stable de debian 6), la ligne de configuration a été remplacée

par les lignes suivantes (toujours dans le fichier php5.conf) :

<FilesMatch "\.ph(p3?|tml)$">

SetHandler application/x-httpd-php

</FilesMatch>

Connectez-vous avec les droits root sous mysql. Créez une nouvelle base nommée tp3db puis créez un nouvel

utilisateur ayant les droits sur cette base.

> mysql –u root –p mysql

mysql> CREATE DATABASE tp3db;

mysql> USE mysql;

mysql> GRANT ALL PRIVILEGES ON tp3db.* TO 'phpuser'@'localhost' IDENTIFIED BY 'passphp' WITH

GRANT OPTION;

mysql> GRANT ALL PRIVILEGES ON tp3db.* TO 'phpuser' IDENTIFIED BY 'passphp' WITH GRANT

OPTION;

mysql> COMMIT;

mysql> QUIT;

2.3 Test Créez un fichier index.php à la racine de votre serveur web (dans /var/www/ si vous n’utilisez pas d’autres serveurs

virtuels). Ce fichier devra contenir cette unique ligne :

<?php phpinfo(); ?>

Rendez-vous sur http://xxx.xxx.xxx.xxx/ (à modifier suivant l’adresse IP de votre serveur). Si votre serveur http est

bien configuré vous devriez voir la page suivante :

Page 3: Lp web tp3_idse

Licence Professionnelle Nice – Sophia G. Rey

2013-2014

Licence Professionnelle Nice – Sophia

Université de Nice – Sophia Antipolis

930, Route des Colles – B.P. 145 - 06903 Sophia Antipolis Cedex – France

Tél : +33 (0)4 92 96 50 50 – Fax : +33 (0)4 92 96 50 55

http://www.polytech.unice.fr/

3

Cours/TP n° 3 Technologies « coté Serveur »

3 PHP

3.1 Présentation du PHP PHP a été créé en 1994 par Rasmus Lerdorf pour les besoins des pages web personnelles (livre d’or, compteurs,

etc.). A l’époque, PHP signifiait Personnal Home Page. PHP est un langage de script, c'est-à-dire que le code est

enregistré sous forme de fichier texte sur le disque dur, et qu'il est exécuté à la demande par un programme chargé

de l'interpréter. C'est habituellement l'internaute (par l'intermédiaire de son navigateur Web) qui demande

l'exécution d'un script lorsqu'il consulte une page Web. La demande est reçue par le serveur Web (par exemple

Apache HTTPD), qui se rend compte qu'il doit la sous-traiter à PHP.

En 1997, PHP devient un projet collectif et son interpréteur est réécrit par Zeev Suraski et Andi Gutmans pour

donner la version 3 qui s’appelle désormais « PHP Hypertext Preprocessor ».

Sa gratuité et le libre accès à ses sources en fait un langage très populaire surtout auprès de la communauté GNU

Linux. Sa syntaxe proche du C, et sa programmation « intuitive » en font le langage qui a fait la plus grande percée

auprès des webdesigners en 2001. De nombreux sites lui sont consacrés, on y trouve des scripts, des astuces et

même des concours de logos...

3.2 Documentation Le site officiel de PHP est extrêmement bien fait. La documentation de n'importe quelle fonction est accessible

depuis l'URL :

http://php.net/nom_de_la_fonction

N'oubliez pas de consulter les commentaires utilisateurs, car de très nombreux commentaires donnent des conseils

très utiles.

La documentation complète de PHP est disponible en français à l’adresse :

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

Pour vous aider dans l’identification et la correction des erreurs dans votre code php, nous allons modifier le fichier

de configuration pour qu’il fasse afficher celle-ci. Editez le fichier /ect/php5/apache2/php.ini et activez les traces de

debug des directives suivantes :

Page 4: Lp web tp3_idse

Licence Professionnelle Nice – Sophia G. Rey

2013-2014

Licence Professionnelle Nice – Sophia

Université de Nice – Sophia Antipolis

930, Route des Colles – B.P. 145 - 06903 Sophia Antipolis Cedex – France

Tél : +33 (0)4 92 96 50 50 – Fax : +33 (0)4 92 96 50 55

http://www.polytech.unice.fr/

4

Cours/TP n° 3 Technologies « coté Serveur »

display_errors

display_startup_errors

track_errors

html_errors

Comme cela est expliqué dans les commentaires de chacune de ces directives. L’activation de celles-ci est très

pratique pour le debug, mais il faut impérativement les désactiver sur un serveur en production.

3.3 Mon premier fichier en PHP Voici le fichier hello.php (disponible à l’adresse

http://users.polytech.unice.fr/~rey/cours/supports/lpsil/hello.php.txt). Il utilise la fonction htmlentities (qui

convertit les caractères éligibles en entités HTML) pour afficher un message de bienvenue.

<?php echo '<?xml version="1.0"?>'; ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"

"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

<title>PHP HelloWorld</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

</head>

<body>

<?php

if(empty($_GET['user'])){

echo htmlentities('Bonjour', ENT_QUOTES, 'UTF-8');

}else{

echo htmlentities('Bonjour, '.$_GET['user'], ENT_QUOTES, 'UTF-8');

}

?>

</body>

</html>

Enregistrez ce fichier sur votre serveur web sous le nom de hello.php et ouvrez-le depuis votre navigateur.

http://xxx.xxx.xxx.xxx/hello.php

Testez ensuite avec un paramètre :

http:// xxx.xxx.xxx.xxx/hello.php?user=Gaetan

3.4 PHP 5 : un modèle objet Depuis PHP5, il est possible d’adapter une approche objet lors de l’écriture de vos programmes en PHP. Voici un

petit exemple qui vous présente rapidement comment utiliser l’objet en php.

<?php

// Déclaration d’une classe

class Voiture {

const km_initial = 0 ;

private $km ;

// Constructeur de la classe

public function __construct($type = 'N/A', $km = 'N/A') { // Paramètres optionnels

if (!is_numeric($km) || !($km > 0 && $km < 1000000))

$this->km = self::km_initial;

else

$this->km = $km ;

Page 5: Lp web tp3_idse

Licence Professionnelle Nice – Sophia G. Rey

2013-2014

Licence Professionnelle Nice – Sophia

Université de Nice – Sophia Antipolis

930, Route des Colles – B.P. 145 - 06903 Sophia Antipolis Cedex – France

Tél : +33 (0)4 92 96 50 50 – Fax : +33 (0)4 92 96 50 55

http://www.polytech.unice.fr/

5

Cours/TP n° 3 Technologies « coté Serveur »

}

// Ecriture d’un accesseur

public function get_km(){

return $this->km ;

}

// Ecriture d’une fonction

public function is_dead(){

return $this->PV == 0 ;

}

}

// Création d'une classe fille de Voiture

class Voiture_sport extends Voiture {

private vitesse ;

}

// Création d'une instance de classe

$vehicule = new Voiture(30);

// Utilisation d’une instance

echo "Votre voiture a {$vehicule->get_km()} km";

// Constantes de classes

echo 'Les km d’une voiture neuve sont de ', Voiture::km_initial;

// Destruction d’une instance

unset($vehicule);

?>

3.5 Exercices PHP

3.5.1 Exercice 1 : Compréhension

Soit le code PHP suivant :

<?php

$i=0;

print( $i++ + "3 cochons" . " chiens<br/>");

print("$i" . "3 cochons" . " chiens<br/>");

print( $i + "4.1 cochons" + " chiens" . 3/2 . "<br/>");

?>

Indiquez, sans exécuter le code, le texte affiché lors de son exécution. Vérifiez votre réponse en exécutant le petit

programme ci-dessus.

<?php

$tab[0] = 2004 ;

$tab[1] = 31.14E7 ;

$tab[2] = "PHP4";

$tab[35] = ’MySQL’ ;

$tab[3] = 24 ;

$tab[] = TRUE ;

?>

Que contient le tableau après l’exécution de ce code ?

Page 6: Lp web tp3_idse

Licence Professionnelle Nice – Sophia G. Rey

2013-2014

Licence Professionnelle Nice – Sophia

Université de Nice – Sophia Antipolis

930, Route des Colles – B.P. 145 - 06903 Sophia Antipolis Cedex – France

Tél : +33 (0)4 92 96 50 50 – Fax : +33 (0)4 92 96 50 55

http://www.polytech.unice.fr/

6

Cours/TP n° 3 Technologies « coté Serveur »

Pour vérifier vos réponses, écrivez le code PHP qui permet d’obtenir le nombre d’éléments du tableau ainsi que

leur valeur. Vous pouvez par exemple utiliser un foreach :

foreach (array_expression as $key => $value)

commandes

Pour plus d’informations sur l’utilisation et le fonctionnement des tableaux en PHP, consultez cette page.

3.5.2 Exercice 2 : Quelques exemples simples

Ecrivez un fichier PHP qui affiche les éléments suivants :

La date du jour (fonction date)

La date de dernière modification (fonctions date et filemtime)

Le contenu d’un fichier texte (fonction include)

L’adresse IP du client (fonction getenv)

3.5.3 Exercice 3 : Compteur de visite

On désire réaliser un compteur de visite. Pour cela vous allez stocker le nombre de visites dans un fichier sur le

serveur. Ecrivez une version simple de ce compteur puis une fois que celle-ci est fonctionnelle, utilisez les images

du cours/TP précédent pour faire une version graphique de votre compteur.

Indice : vous pouvez par exemple lire la valeur dans un fichier et la modifier à chaque chargement de la page (fopen(),

fgets(), fwrite())

3.5.4 Exercice 4 : Upload de fichiers et visualisation

Ecrivez un fichier permettant de sauvegarder sur le serveur des fichiers images (.png, .jpeg, .gif) dans un répertoire

images créé préalablement. Pour cela, on utilisera la méthode POST ainsi qu’un enctype multipart comme dans

l’exemple ci-dessous :

<?php echo '<?xml version="1.0"?>'; ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"

"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>TP3</title>

</head>

<body>

<form method="post" action="test2.php" enctype="multipart/form-data" >

<fieldset>

<legend>Envoi de fichiers</legend>

<input type="hidden" name="MAX_FILE_SIZE" value="900000" />

<p>

<label for="photo">Photo :</label>

<input type="file" id="photo" name="photo" />

</p>

<input type="submit" name="envoi" value="Envoyer les fichiers" />

</fieldset>

</form>

</body>

</html>

Page 7: Lp web tp3_idse

Licence Professionnelle Nice – Sophia G. Rey

2013-2014

Licence Professionnelle Nice – Sophia

Université de Nice – Sophia Antipolis

930, Route des Colles – B.P. 145 - 06903 Sophia Antipolis Cedex – France

Tél : +33 (0)4 92 96 50 50 – Fax : +33 (0)4 92 96 50 55

http://www.polytech.unice.fr/

7

Cours/TP n° 3 Technologies « coté Serveur »

Indice : le fichier transmis par un formulaire est récupérable en PHP via la variable superglobale $_FILES[]. La

description de cette variable (que vous pouvez obtenir avec « print_r($_FILES); ») est la suivante :

Array

(

[nom_du_fichier] => Array

(

[name] => nom.jpg

[type] => image/jpg

[tmp_name] => chemin_complet_du_fichier_uploadé

[error] => 0

[size] => 1250

)

)

Par exemple, $_FILES[‘nom_du_champs_name_de_l_input’][‘name’] vous donne le nom du fichier transmis.

Pour des explications sur les messages d'erreurs de chargement de fichiers, vous pouvez consulter la page suivante

sur le site de php.net.

Ajoutez, ensuite, une fonction qui affiche le contenu de ce répertoire images et qui propose de visualiser chacune

des images qu’il contient. On limitera la taille des fichiers transférables à environ 900Ko.

Que se passe-t-il si on change le formulaire si dessus en définissant une limite à 10Mo (MAX_FILE_SIZE) au lieu

des 900 Ko actuel ? Que doit ton modifier pour que cela fonctionne ?

3.6 PHP et mysql Lire et écrire dans une base de données est relativement simple en PHP, puisqu' il existe justement des fonctions

élaborées dans ce but. Regardons rapidement comment utiliser tout cela.

Commencez par créer une table de test avec la commande suivante sous mysql.

CREATE TABLE test (

id int(11) NOT NULL auto_increment,

nom varchar(20) NOT NULL,

email varchar(50),

dateheure datetime,

PRIMARY KEY (id)

);

Je vous rappelle que vous pouvez vous connecter à votre base mysql avec la commande suivante :

> mysql -u phpuser -ppassphp tp3db

Page 8: Lp web tp3_idse

Licence Professionnelle Nice – Sophia G. Rey

2013-2014

Licence Professionnelle Nice – Sophia

Université de Nice – Sophia Antipolis

930, Route des Colles – B.P. 145 - 06903 Sophia Antipolis Cedex – France

Tél : +33 (0)4 92 96 50 50 – Fax : +33 (0)4 92 96 50 55

http://www.polytech.unice.fr/

8

Cours/TP n° 3 Technologies « coté Serveur »

Pensez à ajouter quelques données dans votre table comme le montre l’exemple ci-dessous:

INSERT INTO test(nom,email,dateheure) VALUES('gaetan','[email protected]',NOW()) ;

3.6.1 Connexion avec la base de données depuis le code PHP

Avant d'envoyer des requêtes à la base de données, il faut déjà s'y connecter. PHP offre 3 APIs différentes pour se

connecter à MySQL (ext/mysql depuis PHP 2.0, ext/mysqli depuis 5.0 et PDO_Mysql depuis PHP 5.1). Il est

recommandé d'utiliser soit l'extension mysqli, soit l'extension PDO_MySQL. L'ancienne extension mysql est

obsolète depuis PHP 5.5.0, et sera supprimée dans un futur proche.

Pour cela on utilise la fonction mysql_connect() :

// version mysql

$c = mysql_connect(serveur, utilisateur, mot_de_passe) ;

mysql_select_db(base_de_donnees);

// version mysqli (style objet)

$mysqli = new mysqli(serveur, utilisateur, mot_de_passe , base_de_donnees);

// version mysqli (style procedural)

$link = mysqli_connect('localhost', 'my_user', 'my_password', 'my_db');

// version PDO_mysql

$pdo = new PDO('mysql:host=serveur;dbname= base_de_donnees, utilisateur, mot_de_passe);

La déconnection (avant la fin du script) se fait avec la fonction mysql_close() :

//version mysql

mysql_close() ;

// version mysqli (style objet)

$mysqli->close();

// version mysqli (style procedural)

mysqli_close($link);

// version PDO_mysql

$pdo = null ;

3.6.2 Insertion de données dans la table

Une fois la base créée, vous pouvez y ajouter des données à l'aide de PHP. Comme vu précédemment, connectez-

vous d'abord avec mysql, puis sélectionnez la base sur laquelle vous voulez travailler. Envoyez ensuite des requêtes

(query) à la base.

//version mysql

resource mysql_query ( string $query [, resource $link_identifier ] )

// version mysqli (style objet)

mixed mysqli::query ( string $query [, int $resultmode = MYSQLI_STORE_RESULT ] )

// version mysqli (style procedural)

mixed mysqli_query(mysqli $link , string $query [, int $resultmode = MYSQLI_STORE_RESULT ])

// version PDO_mysql

public PDOStatement PDO::query ( string $statement )

Page 9: Lp web tp3_idse

Licence Professionnelle Nice – Sophia G. Rey

2013-2014

Licence Professionnelle Nice – Sophia

Université de Nice – Sophia Antipolis

930, Route des Colles – B.P. 145 - 06903 Sophia Antipolis Cedex – France

Tél : +33 (0)4 92 96 50 50 – Fax : +33 (0)4 92 96 50 55

http://www.polytech.unice.fr/

9

Cours/TP n° 3 Technologies « coté Serveur »

mysql_query(), mysqli_query() et query() envoient une seule requête à la base de données courante sur le serveur

associé. La chaîne de requête ne doit pas se terminer par un point-virgule.

<?php

switch($_POST['action']){

// INSERTION DANS LA BASE

case "inserer":

// déclaration de quelques variables

$host = "localhost";

$user = "phpuser";

$pass = "passphp";

$bdd = "tp3db";

$table = "test";

// connexion avec MySQL

@mysql_connect($host, $user, $pass) or die("Impossible de se connecter а la base de

données");

// Le @ indique а php de ne pas afficher de message d'erreur

@mysql_select_db($bdd) or die("Impossible de se connecter а la base de données");

// affichage sélection

echo '<p>Bonjour '.htmlentities($_POST['nom']).', votre email est ' .

htmlentities($_POST['email']).'</p>';

// stockage dans la bdd

$nom = $_POST['nom'];

$email = $_POST['email'];

if(!get_magic_quotes_gpc()){

// si php n'est pas configuré pour le faire automatiquement, on ajoute des \ devant les '

// deux raisons : autoriser d'ajouter des ', et sécuriser notre requête

// on y reviendra dans un prochain tutorial

$nom = addslashes($nom);

$email = addslashes($email);

}

$sql = "INSERT INTO " . $table . "(nom, email, dateheure) VALUES('" . $nom . "','" .

$email . "', NOW())";

$res = mysql_query($sql);

// déconnexion avec MySQL

mysql_close();

break;

// AFFICHAGE FORMULAIRE HTML

default:

?>

<form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">

<input type="hidden" name="action" value="inserer" />

<p>Votre nom : <input type="text" name="nom" /></p>

<p>Votre email : <input type="text" name="email" /></p>

<p><input type="submit" name="Submit" value="Ok" /></p>

</form>

<?

break;

}

?>

Adaptez le code ci-dessus en utilisant mysqli au lieu de mysql. Faites de même avec PDO.

Page 10: Lp web tp3_idse

Licence Professionnelle Nice – Sophia G. Rey

2013-2014

Licence Professionnelle Nice – Sophia

Université de Nice – Sophia Antipolis

930, Route des Colles – B.P. 145 - 06903 Sophia Antipolis Cedex – France

Tél : +33 (0)4 92 96 50 50 – Fax : +33 (0)4 92 96 50 55

http://www.polytech.unice.fr/

10

Cours/TP n° 3 Technologies « coté Serveur »

3.6.3 Affichage du résultat d’une requête

Vous avez maintenant des données dans la base, il ne vous reste plus qu'à les afficher. Le principe est le même que

précédemment : se connecter, puis envoyer des requêtes.

<?php

$sql = "SELECT * FROM " . $table;

$res = mysql_query($sql);

// Tant qu'une ligne existe, place cette ligne dans la variable $val

// sous la forme d'un tableau associatif.

while ($val = mysql_fetch_assoc($res)) {

$nom = $val['nom'];

$email = $val['email'];

$dateheure = $val['dateheure'];

echo $dateheure . ' : ' . $nom . '(' . $email . ')<br />';

}

?>

Adaptez le code ci-dessus en utilisant mysqli au lieu de mysql. Faites de même avec PDO.

3.7 Exercices PHP et mysql (conseillé) Soit une base de données « magasin ». Cette base contient une table article, une table client, une table purchase et

une table order_. Vous pouvez télécharger le fichier pour créer la structure de cette table, ou créer le vôtre

répondant aux caractéristiques suivantes :

Un article aura un nom, une description, un prix, une disponibilité (en stock / 48 heures / 5 à 7 jours / 3

semaines / épuisé) et un identifiant unique.

Un client aura un nom, un prénom, une date d’anniversaire (jour et mois), un mot de passe, une adresse

email et un identifiant unique.

Un achat aura un numéro de commande, un identifiant d’article et une quantité d’article.

Une commande aura une date de commande, un état (en préparation / bloquée / annulée / en livraison /

terminée), un identifiant de client et un numéro de commande

Peuplez votre base de données avec des éléments dont vous choisirez le thème.

3.7.1 Exercice 1 : Gestion du magasin (conseillé)

Concevez une page web qui permet d’ajouter un nouvel article ou de modifiez un article existant.

Concevez une page web permettant de créer un nouveau client.

On ne s’occupe pas pour le moment de savoir qui a le droit d’effectuer telle ou telle opération.

3.7.2 Exercice 2 : Achat en ligne (optionnel)

Concevez une page web qui affiche l’ensemble des articles, avec leur description ainsi que leur prix.

Donnez la possibilité à l’utilisateur de choisir une certaine quantité de chaque article et de valider une

commande. Tout se passe sur la même page, on utilisera des identifiants fixe pour l’utilisateur. La

commande et les achats seront sauvegardés dans la base de données.

3.7.3 Exercice 2 : Achat en ligne (optionnel)

Concevez une page qui permet d’afficher seulement les articles correspondant au nom saisi par

l’utilisateur.

Concevez une page qui affiche le détail d’une commande si on saisit son identifiant.

Page 11: Lp web tp3_idse

Licence Professionnelle Nice – Sophia G. Rey

2013-2014

Licence Professionnelle Nice – Sophia

Université de Nice – Sophia Antipolis

930, Route des Colles – B.P. 145 - 06903 Sophia Antipolis Cedex – France

Tél : +33 (0)4 92 96 50 50 – Fax : +33 (0)4 92 96 50 55

http://www.polytech.unice.fr/

11

Cours/TP n° 3 Technologies « coté Serveur »

3.8 Les sessions en PHP Les sessions sont adaptées à la sauvegarde de données confidentielles ou importantes. On peut citer quelques

exemples courants de leur mise en application :

authentifier un visiteur ;

garder des informations sur un utilisateur tout au long de sa présence dans votre application ;

gérer le panier d’achat d’un internaute sur votre site marchand ;

mettre en place des formulaires en plusieurs parties et donc retenir les informations fournies dans les

pages précédentes ;

effectuer un cache par utilisateur de certaines actions coûteuses en ressources.

3.8.1 Qu'est-ce qu'une session ?

Au lieu de stocker vos informations chez le visiteur, vous les stockez sur le serveur. Techniquement, vous attribuez

au visiteur un identifiant. À chaque fois qu'il revient en annonçant cet identifiant, PHP récupérera toutes les

informations qu'il avait sauvegardé et qui sont relatives à ce visiteur.

3.8.2 Lecture et écriture

L'utilisation des sessions est très simple pour le programmeur : la manipulation est presque transparente et il suffit

de lire ou d'écrire dans un tableau associatif classique une fois l'initialisation de la session faite.

La session s'initialise avec session_start(). PHP essaie alors de lire l'identifiant fourni par l'utilisateur, va chercher le

fichier correspondant, et vous met à disposition les informations sauvegardées dans la variable $_SESSION[].

bool session_start ( void )

session_start() crée une session ou restaure celle trouvée sur le serveur, via l'identifiant de session passé dans une

requête GET, POST ou par un cookie. Pour utiliser des sessions basées sur les cookies, session_start() doit être

appelée avant d'afficher quoi que ce soit dans le navigateur.

<?php

// initialisation

session_start() ;

// tester la présence de la variable 'langage' dans la session

if ( isset( $_SESSION['langage'] ) ) {

echo 'langage existe dans la session et sa valeur est ' ;

// lecture de la variable de session 'langage'

echo $_SESSION['langage'] ;

} else {

echo 'langage n\'existe pas dans la session' ;

}

?>

Pour écrire dans une variable de session il suffit d'initialiser la session via session_start() et d'écrire dans la variable

$_SESSION[].

<?php

// initialisation

session_start() ;

$_SESSION['langage'] = 'PHP 5';

?>

Apres cette instanciation il sera possible, sur toutes les pages suivantes, d'afficher la valeur de la variable de session

$_SESSION['langage'].

Page 12: Lp web tp3_idse

Licence Professionnelle Nice – Sophia G. Rey

2013-2014

Licence Professionnelle Nice – Sophia

Université de Nice – Sophia Antipolis

930, Route des Colles – B.P. 145 - 06903 Sophia Antipolis Cedex – France

Tél : +33 (0)4 92 96 50 50 – Fax : +33 (0)4 92 96 50 55

http://www.polytech.unice.fr/

12

Cours/TP n° 3 Technologies « coté Serveur »

3.8.3 Suppression d'une session

PHP efface la session de lui-même au bout d'un certain temps.

Si vous voulez forcer la destruction de la session vous pouvez utiliser la fonction session_destroy().

<?php

// on initialise et utilise la session

session_start();

$_SESSION['nom'] = 'Pierre';

echo $_SESSION['nom']; // affiche Pierre

// divers traitements

// on détruit la session

session_destroy();

unset($_SESSION);

echo $_SESSION['nom'] ; // n'affiche rien

?>

Notez que cette fonction ne fait qu'effacer le fichier de données sur le serveur, elle n'efface pas les variables

présentes dans $_SESSION[] ni ne supprime le cookie. Si vous voulez éviter tout risque de confusion, effacez

$_SESSION[] aussi.

3.9 Exercices SESSIONS

3.9.1 Exercice 1 : gestion des connexions (obligatoire)

Créez une page d’accueil index.php qui :

Affiche votre login, un lien de déconnexion et un message de bienvenue si une session PHP contenant

votre login existe.

Affiche un lien vers une page de connexion et un message vous invitant à vous connecter si aucune session

PHP est actuellement ouverte.

Créez, ensuite une page co_deco.php qui va gérer les connexions et déconnexions. Cette page prend deux

paramètres :

le mode (login ou logout) qui lui permettrons de connaitre s’il s’agit d’une action de connexion ou une

action de déconnexion. Exemple http://xxx.xxx.xxx.xxx/co_deco.php?mode=login

un identifiant de session permettant de savoir, en cas de déconnexion seulement, qu’elle session doit être

fermée. Exemple http://xxx.xxx.xxx.xxx/co_deco.php?mode=logout&sid=125369

Si on vient sur cette dernière page pour une déconnexion, elle devra fermer la session et afficher un lien vers la

page d’accueil. Si on vient sur cette page pour une connexion, elle devra afficher deux champs de saisie, un pour

l’identifiant un autre pour le mot de passe ainsi qu’un bouton de connexion. Vous vérifierez si le couple saisie

correspond bien à un utilisateur enregistrer dans votre base de données. La page réagira donc en fonction des

valeurs saisies :

Au moins un des champs de saisie est resté vide : la page se réaffiche et signale à l’utilisateur qu’il n’a pas

saisi le champ en question.

Les champs sont bien saisis mais le couple ne correspond pas à un couple login/pass existant : la page se

réaffiche et signale à l’utilisateur que les informations saisies sont incorrectes.

Les champs sont bien saisis et le couple correspond bien à un couple login/pass existant : la page se

réaffiche sans afficher les champs de saisie mais en faisant apparaitre un lien vers la page d’accueil.

Page 13: Lp web tp3_idse

Licence Professionnelle Nice – Sophia G. Rey

2013-2014

Licence Professionnelle Nice – Sophia

Université de Nice – Sophia Antipolis

930, Route des Colles – B.P. 145 - 06903 Sophia Antipolis Cedex – France

Tél : +33 (0)4 92 96 50 50 – Fax : +33 (0)4 92 96 50 55

http://www.polytech.unice.fr/

13

Cours/TP n° 3 Technologies « coté Serveur »

3.9.2 Exercice 2 : Gestion du magasin (optionnel)

Modifiez la page web qui permet d’ajouter un nouvel article ou de modifiez un article existant. Attention,

seul l’administrateur du site marchand devra pouvoir faire la modification.

Modifiez une page web permettant de créer un nouvel utilisateur. Cette page de création sera accessible à

tous les clients. Les clients enregistrés pourront modifier leur profil.

3.10 Les Cookies en PHP Un cookie est un petit fichier texte placé dans l'ordinateur de l'internaute à la demande du serveur lors de la visite

d'une page. Ce fichier permet de stocker un petit nombre d'informations, comme un mot de passe, le nombre de

visites, etc. Il est conseiller d’utiliser les cookies avec parcimonie, car un internaute peut les supprimer ou

configurer son navigateur pour les refuser.

AVERTISSEMENT : Les cookies peuvent être considérés par certaines personnes comme une

violation de leur vie privée. La CNIL (Commission Nationale de l'Informatique et des

Libertés, France) recommande aux webmasters qui ont recours aux cookies de le signaler très

clairement sur leur page d'accueil.

Ainsi, il est souvent préférable d'utiliser les sessions à la place des cookies.

Un cookie peut être envoyé depuis un script PHP avec la fonction setCookie(). Cette fonction doit être utilisée

avant tout envoi d'en-tête HTTP au navigateur (il ne faut rien afficher avant d'utiliser cette fonction).

3.10.1 Création de cookie

Cette fonction prend pour paramètres :

$name : le nom du cookie (cette chaîne de caractères ne doit contenir ni virgule, ni espace, ni les deux points « : »).

$value : la valeur du cookie.

$expires : la date d'expiration du cookie au format timestamp Unix (c'est-à-dire le nombre de secondes écoulées depuis le 1er janvier 1970), s'elle n'est pas spécifiée, le cookie sera supprimé lors de la fermeture du navigateur.

$path : le répertoire du site web pour lequel le cookie est valide (les sous-répertoires sont acceptés) : par défaut le répertoire actuel

$domain : le nom de domaine pour lequel le cookie est valide

$secure : indique (0 ou 1) si le cookie doit être transmis via une connexion sécurisée par le protocole HTTPS

Tous les paramètres sont optionnels sauf $name.

<?php

setcookie("TP3", "1", time()+24*3600, "/", "unice.fr", 0);

?>

Cet exemple envoie le cookie nommé TP3 de valeur 1, de date d'expiration : le jour suivant (aujourd'hui + 24

heures). Il est valide dans tout le site web (c'est-à-dire depuis la racine / du site) pour le domaine unice.fr. Il ne

requiert pas de connexion sécurisée par HTTPS.

3.10.2 Lecture de cookie

En PHP il n'est pas nécessaire d'aller chercher quoi que ce soit : PHP le fait tout seul automatiquement. Tous les

cookies valides pour le domaine et le répertoire du script PHP en cours vont être mis en mémoire. Ainsi des

variables portant le nom des cookies et valant leur valeur respective vont être créées. Le tableau $_COOKIE

contient la liste des cookies disponibles.

Page 14: Lp web tp3_idse

Licence Professionnelle Nice – Sophia G. Rey

2013-2014

Licence Professionnelle Nice – Sophia

Université de Nice – Sophia Antipolis

930, Route des Colles – B.P. 145 - 06903 Sophia Antipolis Cedex – France

Tél : +33 (0)4 92 96 50 50 – Fax : +33 (0)4 92 96 50 55

http://www.polytech.unice.fr/

14

Cours/TP n° 3 Technologies « coté Serveur »

<?php

echo $_COOKIE[TP3];// affiche "1"

?>

3.10.3 Suppression de cookie

Pour supprimer un cookie il suffit de le recréer à l'identique mais sans valeur et avec une date d'expiration

dépassée.

<?php

setcookie("TP3", "", time()-1000, "/", "unice.fr", 0);

?>

3.11 Exercices Cookies

3.11.1 Exercice 1 : gestion des styles (obligatoire)

Ecrivez une petite page PHP ainsi que au moins deux mises en forme différentes à l’aide de deux fichiers CSS

différents. Offrez sur cette page, la possibilité à l’utilisateur de choisir parmi les styles que vous proposez. Le choix

de l’utilisateur sera sauvegardé dans un cookie. Effectué la manipulation, puis fermer votre page. Rouvrez celle-ci.

Le choix de l’utilisateur devra être respecté.

3.11.2 Exercice 2 : gestion des connexions (conseillé)

Modifiez les pages écrites lors de l’exercice 1 de la partie SESSIONS et ajoutez-y les fonctionnalités suivantes :

La page de connexion/déconnexion crée un cookie sécurisé contenant le login et un autre le mot de passe

de l’utilisateur en plus de créer la session. Cette création devra uniquement se faire lors d’une connexion

valide.

La page de connexion/déconnexion détruit le cookie en cas de déconnexion.

La page d’accueil, dans le cas où il n’y a pas de session, vérifie la présence du cookie de connexion. S’il

existe, elle crée la session et s’affiche comme en cas de session ouverte. S’il n’existe pas, elle affiche le

même message qu’avant quand la session n’existait pas.

3.12 PHP et JavaScript Voici un petit fichier PHP qui permet d’afficher la résolution de votre écran … Il utilise pour cela JavaScript pour

obtenir les valeurs. Comme on peut le voir dans le code, si les variable 'width'et 'height' n’ont pas de valeur, alors

PHP génère un page xhtml qui appellera la fonction JavaScript. Cette dernière calcule la résolution de l’écran puis

recharge la page PHP avec des valeurs pour les paramètres 'width'et 'height'.

<?php echo '<?xml version="1.0"?>'; ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

<title>PHP HelloWorld</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<script type="text/javascript">

function resolution() {

document.location="<?php echo $_SERVER['PHP_SELF'];?>?width="

+screen.width+"&height="+screen.height;

}

Page 15: Lp web tp3_idse

Licence Professionnelle Nice – Sophia G. Rey

2013-2014

Licence Professionnelle Nice – Sophia

Université de Nice – Sophia Antipolis

930, Route des Colles – B.P. 145 - 06903 Sophia Antipolis Cedex – France

Tél : +33 (0)4 92 96 50 50 – Fax : +33 (0)4 92 96 50 55

http://www.polytech.unice.fr/

15

Cours/TP n° 3 Technologies « coté Serveur »

</script>

</head>

<?php

if(!isset($_GET['width']) and !isset($_GET['height'])){

echo '<body onload="resolution();">';

}else{

echo '<body>';

echo 'Votre résolution est ' . $_GET['width'] . ' * ' . $_GET['height'];

}

?>

</body>

</html>

Comme on le voit, il est très simple de partager des variables entre PHP et JavaScript.

Puisque AJAX correspond juste à une utilisation particulière de JavaScript, il est évidement possible de combiner

AJAX et PHP sur une même page. PHP gérant la dynamicité du côté du serveur (en calculant de nouvelles données

ou en allant les lire dans une base de données) et AJAX prenant en charge la dynamicité du côté du client.

3.13 Exercice PHP et JavaScript (Obligatoire) Créez une page web qui affiche la liste des articles que contient votre base de données. Quand la souris survol un

élément de cette liste, celui est mis en valeur et une photo de l’article ainsi que sa description sont chargées depuis

la base de données et affiché comme le montre les photos ci-dessous.

4 ASP.NET Nous allons finir ce cours/TP en regardant rapidement une autre technologie pour concevoir des pages

dynamiques coté client. Puisque vous devriez voir JSP/Servlet (la technologie de Sun Microsystems basé sur Java)

dans un autre cours, nous allons nous attarder un peu sur la troisième force, je veux bien sûr parler d’ASP de

Microsoft.

4.1 ASP, c’est quoi ? Active Server Pages (ASP) est une technologie développée par Microsoft utilisée dans la programmation Web. C'est

une technologie web dynamique, équivalente et concurrente de PHP. Alors qu’ASP semblait en perte de vitesse

fasse à PHP et JSP, la version 4, nommée ASP.NET et basé sur le nouvel environnement de Microsoft, a propulser

ASP sur les devant de la scène. Plutôt que d’essayer de vous convaincre moi-même sur la qualité d’ASP.NET, je

vous propose de lire le petit document de Thomas Pétillon avant de poursuivre ce TP.

Asp.NET est basé sur la technologie .NET. Il permet la programmation d’applications Web dynamiques, du côté du

serveur. Les navigateurs Web, à l’aide de pages au format html, servent donc d’interface entre l’application .NET et

l’utilisateur. Contrairement à asp et php, où le code était inclus directement dans la partie html, asp.NET est un

Page 16: Lp web tp3_idse

Licence Professionnelle Nice – Sophia G. Rey

2013-2014

Licence Professionnelle Nice – Sophia

Université de Nice – Sophia Antipolis

930, Route des Colles – B.P. 145 - 06903 Sophia Antipolis Cedex – France

Tél : +33 (0)4 92 96 50 50 – Fax : +33 (0)4 92 96 50 55

http://www.polytech.unice.fr/

16

Cours/TP n° 3 Technologies « coté Serveur »

langage compilé. La partie html (interface) et la partie c# (traitements) peuvent ainsi être séparées au sein d’un

même fichier ou même dans des fichiers différents. Il est ainsi possible, pour un designer web, de mettre en forme

une page web sans pour cela connaître le langage c#. L’inverse est également vrai. Ainsi, il est possible de travailler

de manière séparée et d’avoir des personnes spécialisées pour chaque partie de la page. Ceci est un gros avantage

d’asp.NET.

Il est important de comprendre le fonctionnement de l’architecture client/serveur pour développer dans cette

architecture. C’est la raison pour laquelle nous allons voir cette architecture de manière schématisée.

Une page asp.NET possède une extension .aspx. Cette page a la forme générale suivante :

<head>

<script language= "c#" runat="server">

type fct (type i) { … }

</script>

<script language= "javascript">

function f ;

</script>

</head>

<body>

<table> … </table>

<asp :Label [Propriétés]></asp :Label>

<% =fct(5) %>

</body>

Pages xhtml, Pages aspx, Feuilles de style css, Autres ressources …

Serveur ASP.NET

Première

exécution ?

Changement ?

Navigateur Web du Client

Requête

Réponse avec des

pages asp

Non

Non

Compilation

MSIL

HTML

Oui

Oui

Réponse avec

des pages html

Page 17: Lp web tp3_idse

Licence Professionnelle Nice – Sophia G. Rey

2013-2014

Licence Professionnelle Nice – Sophia

Université de Nice – Sophia Antipolis

930, Route des Colles – B.P. 145 - 06903 Sophia Antipolis Cedex – France

Tél : +33 (0)4 92 96 50 50 – Fax : +33 (0)4 92 96 50 55

http://www.polytech.unice.fr/

17

Cours/TP n° 3 Technologies « coté Serveur »

On peut séparer cette "page-type" en trois parties.

La première partie fait apparaître les scripts. On remarque que du c# et du JavaScript cohabitent dans la

même page. En quelques lignes, nous verrons ce qu'il est possible de mettre dans les balises de ce type.

La deuxième, permet de montrer que le code html est identique au code html d'une page web statique.

Et la dernière montre les balises qui déroutent le plus le non initié, c'est à dire <asp :…> et <% … %>. Il

s'agit en fait de, respectivement, la balise d'ouverture pour un WebForm asp.NET et d'une balise de

fonction. Nous allons les détailler quelque peu.

Tout script écrit en c# pour asp.NET doit se trouver entre les balises suivantes :

<script language= "c# " runat= "server ">

</script>

Le tout doit se trouver entre la balise html ouvrante et celle fermante. Mais en asp.NET, on peut utiliser n’importe

lequel des langages .Net. Par exemple,si l'on avait utilisé un autre langage tel que VB.NET, on aurait eu :

<script language= "VB.NET " runat= "server ">

</script>

Nous allons maintenant détailler ce qui se trouve dans ces balises.

La propriété language permet de déclarer le langage dans lequel le script est écrit. On ne peut définir qu'un

seul langage .NET pour la partie script par page .aspx.

La valeur "server" assignée à la propriété runat signale que le script doit s'exécuter sur le serveur

d'application. Le navigateur client ne recevra que du code html.

Entre les balises <body> et </body>, nous allons trouver les balises suivantes : <form runat= "server"> et

</form> qui signifient que nous utilisons un formulaire qui doit être traité par le serveur. Effectivement, le

client ne doit recevoir que du code html, le seul code compris par tous les navigateurs. Les balises <asp :

seront donc traitées avant l’envoi de la page html.

4.1.1 Syntaxe d'un WebForm asp.NET

Qu'est-ce qu'un WebForm ? Il s'agit d'un contrôle qui se trouve du côté serveur et qui est donc manipulé par les

scripts de traitement. Il n'est pas visible du côté du client puisque la page que celui-ci reçoit ne contient que du

html. Pour insérer un WebForm asp.NET, nous utiliserons l’une des deux méthodes suivantes :

<asp : … />

ou

<asp :Type [Propriétés]>

</asp :Type>

4.1.2 Exécution et appel de fonctions dans une page Web

Comme avec PHP, il est possible d’appeler du code directement dans une page web. Par exemple, on peut afficher

la date du jour directement et utiliser une fonction pour afficher celle du lendemain :

<head>

<script language= "c#" runat= "server">

string Demain(){

Page 18: Lp web tp3_idse

Licence Professionnelle Nice – Sophia G. Rey

2013-2014

Licence Professionnelle Nice – Sophia

Université de Nice – Sophia Antipolis

930, Route des Colles – B.P. 145 - 06903 Sophia Antipolis Cedex – France

Tél : +33 (0)4 92 96 50 50 – Fax : +33 (0)4 92 96 50 55

http://www.polytech.unice.fr/

18

Cours/TP n° 3 Technologies « coté Serveur »

DateTime Jour=DateTime.Now ;

Jour=Jour.AddDays(1) ;

return Jour.ToString() ;

}

</script>

</head>

<body>

<form runat="server">

Date du jour : <% =DateTime.Now.ToString() %><br>

Date de demain : <% =Demain() %>

</form>

</body>

4.2 Installation de l’environnement de développement (conseillé) Pour commencer, nous allons installer l’environnement .net ainsi que Visual Web Developer. Attention, pour

VWD, plusieurs versions de Visual Studio sont disponibles : vbsetup.exe pour Visual Basic, vcsetup.exe pour Visual

C++, vcssetup.exe pour Visual C# et vwdsetup.exe pour Visual Web Developer. Choisissez ce dernier et installer

Silverlight Runtime en même temps car on l’utilisera dans le prochain TP. Il n’est pas nécessaire d’installer SQL

Server.

Attention, vous devez installer ces logiciels sur vos ordinateurs personnels ou sur les

machines de l’IUT dont vous êtes administrateur et cela seulement s’ils ne l’ont pas déjà

été.

4.3 Création de mes premières pages en asp.net Afin de créer votre premier projet ASP.NET 2.0, ouvrez Visual Web Developer puis sélectionnez File -> New Project

-> Visual C# ->Web…, comme sur la fenêtre suivante :

Allez dans votre page Default.aspx et ajouter un champ texte, un bouton et un label :

<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>

<asp:Button ID="Button1" runat="server" Text="Button" />

<br />

Page 19: Lp web tp3_idse

Licence Professionnelle Nice – Sophia G. Rey

2013-2014

Licence Professionnelle Nice – Sophia

Université de Nice – Sophia Antipolis

930, Route des Colles – B.P. 145 - 06903 Sophia Antipolis Cedex – France

Tél : +33 (0)4 92 96 50 50 – Fax : +33 (0)4 92 96 50 55

http://www.polytech.unice.fr/

19

Cours/TP n° 3 Technologies « coté Serveur »

<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>

Ajoutez le code suivant a votre page Default.apsx.cs

protected void Button1_Click(object sender, EventArgs e){

this.Label1.Text = this.TextBox1.Text;

}

Testez votre page en cliquant sur la petite flèche verte, vous devriez obtenir la page suivante :

Bien sûr, il est possible de faire toute ces manipulations (et bien plus) à l’aide de l’interface graphique de Visual

Web Developer. Par exemple dans le cadre de cet exemple, seul le contenu de la méthode Button1_Click est à saisir.

On se rend vite compte que le principe est semblable à la programmation classique sous Visual Studio.

4.4 Exercices

4.4.1 Exercice 1 : vérification de valeurs (conseillé)

Ecrire une page ASP.NET qui fait la somme de 2 nombres saisis dans des champs textes. Si un champ texte ne

contient pas un nombre, il sera mis en rouge et le résultat sera vide.

4.4.2 Exercice 2 : Login et mot de passe (optionnel)

Créez une page contenant les éléments suivants :

Un champ nom d’utilisateur d’une longueur minimale de 5 caractères et de maximum 10

Page 20: Lp web tp3_idse

Licence Professionnelle Nice – Sophia G. Rey

2013-2014

Licence Professionnelle Nice – Sophia

Université de Nice – Sophia Antipolis

930, Route des Colles – B.P. 145 - 06903 Sophia Antipolis Cedex – France

Tél : +33 (0)4 92 96 50 50 – Fax : +33 (0)4 92 96 50 55

http://www.polytech.unice.fr/

20

Cours/TP n° 3 Technologies « coté Serveur »

Un champ nom de famille facultatif dont la longueur doit être inférieure à 25 caractères. La zone fera à

l’écran 15 caractères de large.

Un champ prénom dont longueur est identique au nom.

Un champ email.

Un mot de passe.

Un champ confirmation de mot de passe dont la valeur doit être identique à celle du champ mot de passe.

Ajoutez des mécanismes de contrôle sur les valeurs saisies pour qu’elles respectent les contraintes indiquées ci-

dessus.

Organisez tout cela pour que ça ressemble à l’image ci-dessous :

Ajoutez un champ date de naissance. Ce champ pour être rempli soit directement par l’utilisateur soit en utilisant

un calendrier comme celui-ci :

La validation de la page par le bouton « envoi ! » ne pourra avoir lieu que si toutes les contraintes sont vérifiées.

Cela affichera une page avec les informations saisies comme un récapitulatif. Pour cela vous utilisez (pour le

moment) la méthode Response.Redirect(url) pour l’envoi des données. L’url sera du type :

nom_de_ma_page.aspx?att1=val1&att2=val2

Le traitement sur la page du récapitulatif se fera avec la méthode Request.Params[att] comme dans l’exemple :

Label1 = "<span>Nom de famille: " + Request.Params["nomF"].ToString() + "</span>";

Page 21: Lp web tp3_idse

Licence Professionnelle Nice – Sophia G. Rey

2013-2014

Licence Professionnelle Nice – Sophia

Université de Nice – Sophia Antipolis

930, Route des Colles – B.P. 145 - 06903 Sophia Antipolis Cedex – France

Tél : +33 (0)4 92 96 50 50 – Fax : +33 (0)4 92 96 50 55

http://www.polytech.unice.fr/

21

Cours/TP n° 3 Technologies « coté Serveur »

4.5 Variables de Sessions et d’Applications

4.5.1 Les variables de Sessions

Comme on l’a déjà vu avec PHP, les variables de session sont stockées en mémoire sur le serveur. Il peut y avoir

autant de variables de session que l’on le désire, cependant il ne faut pas perdre de vue qu’avec l’accroissement du

nombre de variables utilisées, ce sont souvent les performances qui sont en chute libre. Il faut donc trouver le juste

milieu entre performances et facilité. Les informations utilisées de manière répétée, si elles n’ont pas un trop haut

coût en mémoire, peuvent donc être stockée dans ce type de variables.

Ces variables sont accessibles du début à la fin de la session d’un navigateur, c’est à dire jusqu’à moment de non

activité du navigateur plus le timeout. Une session est un espace mémoire/disque sur le serveur associé à un et un

seul utilisateur/navigateur. Cette session possède un identifiant unique généralement stocké au niveau du

navigateur. Les variables de session sont stockées sur le serveur et sont accessibles par toutes les pages web

associées à cette session (mais uniquement pour cette session). Cet accès sera valable tant que le navigateur n’aura

pas été fermé et tant que la durée d’inactivité d’un utilisateur ne dépassera pas le timeout associé à la gestion de

session.

Comme pour le passage d’arguments dans l’url, les variables ne doivent pas être déclarées. Il faut donc faire

attention à l’orthographe du nom de nos variables. Celles-ci sont stockées dans le tableau Session et sont utilisable

de la manière suivante :

Session["nom_de_la_variable"] = val ; // affecte une valeur à la variable

String var = Session["nom_de_la_variable"] ; // récupère le nom de la variable

If (Session["nom_de_la_variable"] !=null) { // test si la variable existe

4.5.2 Les variables d’Applications

On a dit que les variables de sessions ne peuvent être accédées que pour une session. On peut cependant imaginer

vouloir partager des informations entre les différents navigateurs clients, comme par exemple la liste des

utilisateurs connectés. Ces dernières variables sont des variables d’application.

La syntaxe et l’utilisation des variables d’application sont les mêmes que pour les variables de sessions si ce n’est que ces variables sont accessibles par toutes les sessions, il est donc possible de les faire communiquer. Celles-ci sont dans le tableau Application[« nom_de_la_variable »].

4.6 Exercice (optionnel) Concevez une page qui affiche le nombre de personne qui sont entrain de la consulter.

5 Références Vous pourrez trouver des informations complémentaires à ce cours/TP dans les ouvrages et sites suivants :

PHP 5 - MySQL 5 – AJAX : 1ère édition, 12/2007 Editions Editions ENI, ISBN13 : 978-2-7460-4057-1

Pratique de MySQL et PHP : 3ème édition, Janvier 2005 Editions O'Reilly, ISBN13 : 9782841773381

PHP 5 et Apache 2 : 1 édition, 2006-06-08 Editions ENI, ISBN13 : 9782746033252

Les Cahiers du programmeur PHP 5 : 1 édition, 2004-06-01 Editions Eyrolles, ISBN13 : 9782212112344

Premières applications Web 2.0 avec Ajax et PHP : Janvier 2008 Editions Eyrolles, ISBN13 : 9782212120905

PHP 5 Avancé : 3eme édition, 2 octobre 2006 Editions Eyrolles, ISBN10 : 2212120044

Ce cours/TP a été créé en se servant des documents suivants :

Page 22: Lp web tp3_idse

Licence Professionnelle Nice – Sophia G. Rey

2013-2014

Licence Professionnelle Nice – Sophia

Université de Nice – Sophia Antipolis

930, Route des Colles – B.P. 145 - 06903 Sophia Antipolis Cedex – France

Tél : +33 (0)4 92 96 50 50 – Fax : +33 (0)4 92 96 50 55

http://www.polytech.unice.fr/

22

Cours/TP n° 3 Technologies « coté Serveur »

Cours complet de PHP4 et MySQL par Hugo ETIEVANT

Cours PHP par Guillaume Rossolini

ASP.NET : une architecture novatrice pour vos sites dynamiques par Thomas Pétillon

ASP.NET par Didier Danse