ANGD Mathrice. Avant-propos. HTML PHP et MySQL. Pour tout savoir. Plan du cours

Transcription

1 ANGD Mathrice HTML PHP et MySQL 6 au 10 novembre 2006 Avant-propos Ce cours est distribué sous la licence GNU FDL (Free Documentation Licence), Il peut être librement copié, modifié, distribué, tant que l'intégralité de cette licence est respectée. La GNU FDL est disponible sur CIRM Marseille 2006 Damien Brémont damien.bremont@lpthe.jussieu.fr D. Brémont 08/2006. Plan du cours Pour tout savoir 1.Rappels HTTP 2.HTML 3.CGI 4.PHP 1.Introduction au langage PHP 2.PHP MySQL 3.PHP et les sessions 4.PHP-PEAR Le site de l'ietf HTTP Le site du World Wide Web Consortium (W3C) - Documents de référence sur HTML CSS XML... Sous forme de RFC ou de normes

2 Fonctionnement du web Rappels HTTP Navigateur web 1 ) Résolution DNS 2 ) Requête HTTP page.html Serveur Web 3 ) Recherche de page.html sur le disque dur DD Affichage page 4 ) Réponse HTTP Client Serveur Quelques mots sur HTTP Les requêtes HTTP Protocole d'échange d'informations propre au web de niveau 7 basé sur TCP/IP Ouverture d'une connexion Envoi de la requête Envoi d'une ligne blanche Envoi éventuel d'un contenu Fermeture de la connexion Pas de connexion permanente! Principaux types de requêtes : GET : On demande une page au serveur GET /page.html HTTP/1.0 POST : On envoie des données au serveur POST /reponse.php HTTP/ nom=bremont&prenom=damien HEAD : On demande des informations sur un document

3 Exemple de requête L'adressage du web $telnet 80 Trying Connected to ( ). Escape character is '^]'. GET / HTTP/1.0 HTTP/ OK Date: Sun, 30 Jul :52:40 GMT Server: Apache/2.2.2 (Fedora) Last-Modified: Fri, 21 Jul :56:07 GMT Content-Length: 3511 Connection: close Content-Type: text/html; charset=iso <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <HEAD> <TITLE>LPTHE</TITLE> </HEAD> <BODY BGCOLOR=FFFFFF>... p://ns[:port]/chemin/document?args p : protocole http, ftp, telnet ns : nom, FQDN ou adresse IP du serveur port : par défaut 80 chemin : chemin dans l'arborescence du serveur document : nom du document args : liste de paramètres ( nom=bremont&prenom=damien) Codes HTTP 1.1 (extrait) Apports de HTTP 1.1 Information 100 : Continue : Attente de la suite de la requête Succès 200 : OK : Requête traitée avec succès Compression de documents Amélioration de la gestion des caches Négociation de contenu Redirection 301 : Moved Permanently : Document déplacé de façon permanente Erreurs du client 400 : Bad Request : La syntaxe de la requête est erronée 401 : Unauthorized : Accès à la ressource refusé 403 : Forbidden : Refus de traitement de la requête 404 : Not Found : Document non trouvé Erreur du serveur 500 : Internal Server Error : Erreur interne du serveur Connexions TCP persistantes sur une page Authentification par challenge (digest) Plus d'options Virtual Hosting GET /index.html http/1.1 Host: HTTP/ OK

4 HTML - Historique HTML : HyperText Markup Language Introduit en 1993 par Tim Berners-Lee, chercheur au CERN HTML 4.0 édité fin 1997 HTML 4.01 dernière version fin 1999 HTML HTML langage à balises Premier document HTML Un langage de présentation de documents à balises qui indiquent le formatage souhaité à ancres présentation finale réalisée par le navigateur afin d'avoir accès à d'autres documents (liens) Balises HTML insensibles à la casse Imbrication des balises <B>Ce texte est en gras</b> <I><B>Ce texte gras/italique</b> texte en italique</i> <B><I>Ce texte gras/italique</b> texte en italique</i> Vérifier la validité de son code <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <HTML> <HEAD> <TITLE>Premier document HTML</TITLE> </HEAD> <BODY bgcolor="#ffffff" text="#000000">  <CENTER> <H1>Mon premier document HTML</H1> </CENTER> Je tape du texte <B>en gras</b> </BODY> </HTML> Demo

5 balises HTML HTML Les ancres Balises simples Adressage relatif <B>, <I> : gras, italique <A href="../page2.html">suite</a> <Hx> ( 1<<8) : Titre Adressage absolu <BR> : Retour chariot <HR> : Ligne horizontale <A href="/~bremont/page2.html">suite</a> Adressage par url <A href=" target="_blank" >CNRS</A> Balises à arguments <P align="right">exemple de paragraphe</p> <H1 align="justify"> Texte justifié </H1> Ancres sur une page <P id="haut">... </P>... <A href="#haut">haut de la page</a> HTML Les tableaux HTML Les formulaires <TABLE border="1"> <CAPTION> Voici le titre du tableau </CAPTION> <TR> <TH> Titre A1 </TH> <TH> Titre A2 </TH> <TH> Titre A3 </TH> <TH> Titre A4 </TH> </TR> <TR> <TH> Titre B1 </TH> <TD> Valeur B2 </TD> <TD> Valeur B3 </TD> <TD> Valeur B4 </TD> </TR> </TABLE> On obtient alors le tableau suivant : Balise FORM Attributs METHOD : POST : données envoyées dans le corps de la requête HTTP GET : données envoyées dans l'url GET /index.php3?champ1=val1&champ2=val2 ACTION : l'adresse d'envoi <FORM method="get" action="resultats.php">... </FORM>

6 HTML Les formulaires Balise INPUT : <FORM method="get" action="resultats.php">  Nom :<INPUT type=text name="nom" maxlength="10"><br>  Homme : <INPUT type=radio name="sexe" value="m" checked><br> Femme : <INPUT type=radio name="sexe"value="f"><br>  <INPUT type="submit" value="envoyer"> </FORM> HTML Les formulaires Balise TEXTAREA <TEXTAREA rows="3" name="commentaires"> Tapez ici vos commentaires</textarea> Balise SELECT <SELECT name="type_film"> <OPTION value="0" SELECTED>Comédie</OPTION> <OPTION value="1">drame</option> <OPTION value="2">action</option> </SELECT> Démo Les styles CSS Javascript Cascading Style Sheets depuis HTML 4.0 Objectif : Rassembler dans un fichier unique et global pour un site les instructions de mise en page Fichier de style style.css :.titre1 { font-size: 22px; font-style: normal; color: 9B2F21; font-weight: bold.titre2 { font-size: 18px; color: titre3 { font-size: 16px; font-style: italic.menugauche { font-family: Verdana, Arial, Helvetica, sansserif; font-weight: bold; font-size: 14px.menugauche:link {TEXT-DECORATION: none.menugauche:visited {TEXT-DECORATION:none.menugauche:hover {TEXT-DECORATION: underline Usage : <A href="/recherche/" class="menugauche">recherche</a><br> <SPAN class="titre2">activités principales</span> Demo Langage interprété par le navigateur Proposé par Netscape Repris (avec des différences) dans IE Plus ou moins normalisé par le W3C (ECMA-Script) Utilité Faire un calcul local, faire des menus déroulants (Contrôle de la saisie côté client) Piloter l'interface du navigateur (fenêtres, messages) GROS soucis de compatibilité entre navigateurs

7 HTML Exemples d'éditeurs HTTP / HTML - Conclusion Commerciaux Macromedia Dreamweaver Adobe Go live Word... Libres Nvu Bluefish... HTTP : Adapté aux transferts de fichiers Pas de connexions permanentes =>Inadapté pour suivre le parcours d'un client HTML : Accès facile aux informations de manière transparente Conçu pour transmettre des documents statiques Pas adapté pour déployer des applications CGI Common Gateway Interface CGI Protocole d'interconnexion entre serveur et n'importe quel autre programme Déroulement Serveur reçoit les données Serveur lance un processus avec données transmises Le processus produit le résultat en sortie La page est renvoyée

8 CGI Common Gateway Interface CGI Common Gateway Interface Navigateur web Affichage page 1 ) Requête HTTP CGI 6 ) Réponse HTTP Serveur Web 4 ) Données client 5 ) Page HTML Nouveau Processus 2 ) Recherche du CGI sur le disque dur DD 3 ) Lancement processus Avantage On peut utiliser son langage favori (C, PERL,...) Inconvénients Bas niveau Il faut analyser les informations transmises dans la variable QUERRY_STRING Séparation HTML/code Difficulté de gestion des sessions Client Serveur Peu efficace PHP - Introduction PHP : PHP Hypertext Preprocessor Langage de scripts interprétés PHP Spécialement étudié pour les développements orientés web Largement utilisé Interfaçable avec de nombreux SGBD (Adabas D, dbase, Empress, FilePro, Informix, Interbase, msql, MySQL, Oracle, PostgreSQL, Solid, Sybase, Velocis, Unix dbm!) Exécution côté serveur Configuration : fichier php.ini

9 PHP - Historique PHP Principe de fonctionnement Premiers pas : 1994 par Rasmus Lerdorf 1995 : PHP : PHP 3.0 : produit mature 2000 : PHP 4 apport de la programmation orientée objet 2004 : PHP 5 Navigateur web Affichage page 1 ) Requête HTTP toto.php 4 ) Réponse HTTP Serveur Web Interpréteur PHP 2 ) Recherche de toto.php sur le disque dur DD 3 ) Interprétation du code PHP nouveau moteur Zend 2.0 nouvelles fonctionnalités (objet principalement) Client Serveur PHP - Avantages PHP - Inconvénients Libre (Très) fréquentes failles de sécurité Écriture simple (héritée du C et de PERL) Code PHP inclu dans les pages HTML Interfaçable avec de nombreux SGBD Nombreuses bibliothèques (LDAP, maths, synthèse d'images,...) Intégré sur principaux serveurs web : Apache, IIS Lenteur d'exécution Pas d'interactivité avec le client Une mauvaise programmation de vos scripts peut créer de gros trous de sécurité risquant de compromettre votre serveur Portable sur de nombreuses plate-formes (Linux, Unix, Windows)

10 PHP Premier fichier PHP Premiers pas <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <HTML> <HEAD> <TITLE>Mon premier script</title> </HEAD> <BODY> <? //Chouette je peux écrire en PHP maintenant echo "Hello World"; /* Voici un commentaire! Plus long! */ Fonctions insensibles à la casse echo "Bonjour"; EcHo "Bonjour"; Noms de variables sensibles $nom="bonjour"; $NOM="bonjour";?> </BODY> </HTML> Démo PHP Types de données PHP Types de données compléments Les variables Attention pas de déclaration de type Précédées d'un $ $i = 1 + "4.5"; // $i vaut 5.5 Pas de déclaration $i = 1 + "toto + 9"; // $i vaut 1 L'affectation détermine le type de la variable $i = 1 + "9 + toto"; //$i vaut 10 Types supportés Chaînes de caractères nombres entiers, nombres à virgule flottante, booléens $ch1="bonjour\n"; $ch2='damien'; chaînes de caractères ($ch1="bonjour\n"; ) Concaténation $ch3=$ch1.$ch2; tableaux objets (programmation orientée objet) les constantes (define (PI, )) \" guillemet \\ barre oblique inverse (antislash) \r retour chariot \n retour à la ligne \t tabulation

11 PHP Types de données compléments Tableaux indicés ( 0, 1, 2,...) PHP Types de données compléments Constantes : define("max", 255); $tab[0] = 1; $tab[1] = "une chaîne"; $tab = array( "1", "une chaîne"); Tableaux associatifs Constantes définies par le système $REMOTE_HOST : nom de la machine cliente $REMOTE_ADDR : adresse IP de la machine cliente $tab["nom"]="bullock"; $tab["prenom"]="sandra"; $HTTP_ACCEPT_LANGUAGE : langues acceptées par le client $fields_values = array( 'LastName' => $_POST["LastName"], 'FirstName' => $_POST["FirstName"], ' ' => $_POST[" "]); $LAST_MODIFIED : date dernière modification du script $DOCUMENT_ROOT : Dossier racine du site web $SCRIPT_NAME : Chemin relatif du script + nom depuis DOCUMENT_ROOT Les tableaux peuvent être multidimensionnels $Tableau[1][1] = "Bonjour"; Toute la configuration du serveur et les variables phpinfo(); Les opérateurs (par ordre de priorité décroissante) Les opérateurs (par ordre de priorité décroissante) Les opérateurs de calcul + addition - soustraction * multiplication / division = affectation (de valeur à une variable) : $toto=1; % modulo (reste de la division) Les opérateurs de comparaison == opérateur d'égalité < opérateur d'infériorité stricte <= opérateur d'infériorité > opérateur de supériorité stricte >= opérateur de supériorité!= opérateur de différence (non égalité) Les opérateurs d'assignation += addition de deux valeurs et stocke le résultat dans la variable -= soustrait deux valeurs et stocke le résultat dans la variable *= multiplie deux valeurs et stocke le résultat dans la variable /= divise deux valeurs et stocke le résultat dans la variable %= donne le reste de la division deux valeurs et stocke le résultat dans la variable = effectue un OU logique entre deux valeurs et stocke le résultat dans la variable ^= effectue un OU exclusif entre deux valeurs et stocke le résultat dans la variable &= effectue un Et logique entre deux valeurs et stocke le résultat dans la variable.= concatène deux chaînes et stocke le résultat dans la variable Les opérateurs d'incrémentation ++ incrémentation -- décrémentation Les opérateurs logiques (booléens) ou OR OU logique && ou AND ET logique XOR OU exclusif! NON logique Les opérateurs bit-à-bit Les opérateurs de rotation de bit Autres opérateurs. concaténation $ référencement de variable -> propriété d'un objet

12 Structures de contrôle Structures de contrôle Instruction if if (condition réalisée) { liste d'instructions else { autre série d'instructions Plusieurs conditions possibles : if ((condition1)&&(condition2)) if ((condition1) (condition2)) L'instruction while while (condition réalisée) { liste d'instructions Instruction switch : test entre plusieurs valeurs switch (Variable) { case Valeur1 : Liste d'instructions break; case Valeur2 : Liste d'instructions break;... default: Liste d'instructions break; boucle for for (compteur; condition; modification du compteur) { liste d'instructions Exemple for ($i=1; $i<6; $i++) { echo "$i<br>"; PHP Inclusions et imports PHP Les fonctions Import de code HTML include "header.inc"; Inclusion de code PHP require_once("configuration.php"); Conseils : Décomposer le site en éléments d'affichage À chaque élément faire correspondre une fonction insérée dans un fichier séparé function Addition ($i, $j) { // $i et $j sont des variables locales $somme = $i + $j; return $somme; $i = 2; $j = 3; // Appel de la fonction, passage par valeur $k = Addition ($i, $j); echo $k;

13 Récupération des données d'un formulaire Exemple de formulaire Code HTML <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <HTML> <HEAD> <TITLE>Authentification</TITLE> </HEAD> <BODY> <FORM method="get" action="formulairelogin2.php"> <TABLE> <TR> <TD>Login :</TD> <TD><input type="text" name="login" size="10"></td> </TR> <TR> <TD>Mot De Passe :</TD> <TD><input type="password" name="password" size="10"></td> </TR> </TABLE> <INPUT type="submit" value="valider" name="valider"> </FORM> </BODY> </HTML> Démo Récupération des données d'un formulaire Méthode GET $_GET["Login"]; $_GET["Password"]; Méthode POST $_POST["Login"]; $_POST["Password"]; avec register_globals=off Récupération des données d'un formulaire <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <HTML> <HEAD> <TITLE>Authentification</TITLE> </HEAD> <BODY> <? if ( ( $_GET["Login"] == "toto" ) && ( $_GET["Password"] == "tata") ) { echo "Bonjour toto"; else { echo "Désolé";?> </BODY> </HTML> PHP et MySQL

14 PHP et les bases de données PHP et MySQL Pourquoi une base de données? Stocker une grande quantité de données Pourquoi MySQL? Simple et efficace Stocker de manière structurée MAIS certaines limitations (cf cours de Bases de données) Persistance aux pannes Langage simple et expressif Efficacité Applications Stockage des données Stockage des variables de session Avoir des statistiques Principe architecture 3 Tiers MySQL PHP se charge du stockage, de la protection des données et de l'interface SQL reçoit les données extrait les données et les met en forme Navigateur : met en forme les données HTML PHP et MySQL Fonctions MySQL en PHP Navigateur web 1 ) Requête HTTP toto.php 5 ) Réponse HTTP Serveur Web Interpréteur PHP 2 ) Recherche de toto.php sur le disque dur DD 3 ) Interprétation du code PHP mysql_connect() Ouvrir une connexion avec le SDGB mysql_select_db()sélectionner une BD mysql_query() Envoyer une requête SQL mysql_close() Fermer la connexion avec le SGBD Exploitation des résultats Affichage page Client Serveur 4 ) Interrogation base de données SGBD mysql_num_rows() renvoie le nombre de résultats renvoyés par la requête mysql_fetch_array() transforme une ligne de résultats en tableau indicé mysql_fetch_assoc() transforme une ligne de résultats en tableau associatif

15 Fonctions MySQL en PHP exemple <? //Definition des constantes define('serveur',"localhost"); define('userbdd',"tata"); define('passwd',"tata"); define('nombase',"mabase"); //Connexion a la base de donnees $connexion=mysql_connect(serveur,userbdd, PASSWD) or die ("Impossible de se connecter"); mysql_select_db (NOMBASE) or die ("Impossible d'accéder à la base de données"); $query="select Nom, Prenom from membres"; $resultat = mysql_query ($query) or die ("La requête a échoué"); $nbresultats=mysql_num_rows($resultat); echo "Il y a $nbresultats résultats<br>"; //On parcourt les résultats renvoyés //dans un tableau associatif while($ligne = mysql_fetch_assoc($resultat)) { $Nom=$ligne[Nom]; $Prenom=$ligne[Prenom]; // On affiche les occurrences! echo "$Nom $Prenom<br>"; //fermeture de la connexion mysql_close($connexion);?> Démo PHP et les cookies Problème : Les cookies Les connexions HTTP ne sont pas permanentes Solution : 1) Demander au navigateur de stocker des variables (nom et valeur) pour une durée déterminée au niveau de la machine du client 2) Demander au navigateur du client de stocker un identifiant de session sous forme de cookie et stocker des variables sur le serveur associées à cet identifiant de session Client id=100 Validité Cookie Les sessions : principe Serveur 1) Première connexion Création d'une session id=100 2) Envoi du cookie Infos. session 3) Envoi id session 4 ) Page personnalisée On sait de qui il s'agit

16 Les sessions : principe Sessions : fonctions Un client se connecte pour la première fois sur le site : le serveur lui associe un identifiant de session Le serveur transmet cet identifiant au client sous forme de cookie On conserve un historique des actions du client associé à cet identifiant de session Quand le client se connecte à nouveau, on sait l'identifier grâce à l'identifiant de session du cookie! session_start() crée la session ou la relance session_destroy() détruit les informations associées à la session session_id() renvoie l identifiant de la session session_register(nomvariable) associe une variable Php à la session. session_unregister(nomvar) supprime une variable de la session session_is_registered(nomvar) teste l existence d une variable Sessions : Exemple Sessions : Exemple <?php session_start(); if (!isset($_session['compteur'])) { $_SESSION['compteur'] = 0; else { $_SESSION['compteur']++;?> <HTML> <HEAD> <TITLE>Test Session</TITLE> </HEAD> <BODY bgcolor="#ffffff" text="#000000"> <? echo "Nombre d'affichage de la page :".$_SESSION['compteur'];?> </BODY> </HTML> Démo Résultat Nombre d'affichage de la page :3 La variable $_SESSION['compteur'] s'incrémente

17 PHP-PEAR PHP-PEAR PEAR - PHP Extension and Application Repository (1999) PHP-PEAR : Jeu de fonctions PHP libres et réutilisables Spécifications pour le codage en PHP Une communauté active PHP-PEAR PHP-PEAR Exemple Requête d'insertion Avantage Prêt à l'emploi Fonctions complètes et sûres Bien documenté Inconvénient Non installé par défaut avec PHP require_once 'DB.php'; $table_name = 'SUBSCRIPTION'; $fields_values = array( 'LastName' => $_POST["LastName"], 'FirstName' => $_POST["FirstName"], ' ' => $_POST[" "]); $res = $db->autoexecute($table_name, $fields_values, DB_AUTOQUERY_INSERT, ''); // On vérifie qu'il n'y a pas d'erreur if (PEAR::isError($res)) { die($res->getmessage()); if (PEAR::isError($res)) { echo "Erreur lors de l'ajout dans la base<br>"; die($res->getmessage());

18 PHP-PEAR Exemple : requête de mise à jour Bibliographie require_once 'DB.php'; $table_name = 'participation'; W3C $fields_values = array( 'GENRE' => $GENRE, 'NOM' => $NOM, 'PRENOM' => $PRENOM ); Commentcamarche $res = $db->autoexecute($table_name, $fields_values, DB_AUTOQUERY_UPDATE,"AVANCEID='$AVANCEID'"); Php if (PEAR::isError($res)) { die($res->getmessage()); MySQL Pratique de MySQL et PHP P. Rigaux, Oreilly (ISBN : )