cours/tp n° 3 technologies « coté serveur »

Licence Professionnelle Nice – Sophia G. Rey

2015-2016

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

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

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 : [2014][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

https://creativecommons.org/licenses/by-nc-sa/3.0/fr/

http://notepad-plus.sourceforge.net/fr/site.htm

http://www.contexteditor.org/index.html

http://quanta.kdewebdev.org/

http://software.visicommedia.com/fr/products/webexpert/

http://www.scintilla.org/SciTE.html


2015-2016





2

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 :


http://xxx.xxx.xxx.xxx/


2015-2016





3

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 :


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


2015-2016





4

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 ;


http://users.polytech.unice.fr/%7Erey/cours/supports/lpsil/hello.php.txt

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


2015-2016





5

} // 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 ?



2015-2016





6

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>


http://fr.php.net/manual/fr/control-structures.foreach.php

http://php.net/manual/fr/language.types.array.php


2015-2016





7

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


http://fr.php.net/manual/fr/features.file-upload.errors.php


2015-2016





8

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 mysqli_connect() : // version mysql (ancienne version) $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 mysqli_close() : //version mysql (ancienne version) 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 (ancienne version) 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 )



2015-2016





9

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 ou PDO au lieu de mysql.


http://fr2.php.net/mysql_query

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

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


2015-2016





10

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 ou PDO au lieu de mysql.

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.


http://users.polytech.unice.fr/%7Erey/cours/supports/lpsil/magasin.sql


2015-2016





11

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'].


http://fr2.php.net/manual/fr/function.session-start.php


2015-2016





12

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.


http://xxx.xxx.xxx.xxx/co_deco.php?mode=login&sid=125369

http://xxx.xxx.xxx.xxx/co_deco.php?mode=logout&sid=125369


2015-2016





13

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.



2015-2016





14

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



2015-2016





15

</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


http://dotnet.developpez.com/articles/aspnetnovateur/


2015-2016





16

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



2015-2016





17

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



2015-2016





18

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 />


http://www.microsoft.com/downloads/details.aspx?FamilyId=AB99342F-5D1A-413D-8319-81DA479AB0D7&displaylang=fr

http://www.microsoft.com/downloads/details.aspx?FamilyId=F3FBB04E-92C2-4701-B4BA-92E26E408569&displaylang=en


2015-2016





19

<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



2015-2016





20

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



2015-2016





21

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 :



2015-2016





22

• 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


http://cyberzoide.developpez.com/php4/php4mysql/

http://g-rossolini.developpez.com/tutoriels/php/cours/

http://dotnet.developpez.com/articles/aspnetnovateur/

http://ditch.ftp-developpez.com/AspNet1.pdf

cours/tp n° 3 technologies « coté serveur »

Documents