STID 2ème année : TP Web/PHP Plan de travail et aide mémoire jean.arnaud@inria.fr Ce document est composé de cinq parties : Un aide mémoire sur les aspects pratiques de la création de sites Une introduction à XHTML et à l'utilisation de CSS Une introduction aux scripts PHP, et leur utilisation pour effectuer des requêtes SQL L'utilisation de formulaires, notamment pour l'authentification de vos clients Une sensibilisation au respect des standards du Web Toutes les ressources du TP, ce document, ainsi que divers liens fort utiles se trouvent ici : http://sardes.inrialpes.fr/~jarnaud (onglet «Teaching») A) Créer son site et sa base de données 1. Connection au serveur Web et téléchargement des pages Les pages Web (.html), feuilles de style (.css), et scripts PHP (.php) que vous allez écrire sur votre poste local doivent être transférées sur un serveur de page Web pour pouvoir être consultées. A l'iut, la machine etu-php-mysql.iut2.upmf-grenoble.fr fait à la fois office de serveur Web et de serveur de bases de données, c'est donc sur cette machine que vous allez déposer vos créations. Un compte vous a été créé sur le serveur, avec votre identifiant et votre mot de passe habituel. Pour envoyer vos fichiers sur le serveur, utilisez un logiciel client FTP (File Transfert Protocol) comme Filezilla ou équivalent. Dans votre répertoire sur le serveur se trouve un dossier www, qui constitue la racine de votre site Web. Les pages que vous créez doivent donc être déposées dans ce dossier pour être prises en compte par le serveur de pages Web. 2. Consultation de votre site Une fois vos premières pages envoyés sur le serveur, vous pouvez lancer un navigateur (Firefox, Internet Explorer ou autre) et entrer l'adresse de votre site (remplacer login par votre identifiant) : http://login.etu-php-mysql.iut2.upmf-grenoble.fr/
Votre page Web doit s'afficher correctement dans le navigateur. 3. Connection à votre base de données Un serveur de base de données MySQL est installé sur etu-php-mysql.iut2.upmf-grenoble.fr. Un compte vous a été crée pour vous connecter au serveur MySQL, mais pour des raisons de sécurité, vos paramètres de connection (login et mot de passe) sont différents. Vos paramètres de connection ont été placés dans votre répertoire sur la machine etu-phpmysql.iut2.upmf-grenoble.fr, dans un fichier infos_mysql.txt. Récupérez ce fichier via FTP. 4. Création de votre base de données Une fois que vous avez obtenu votre identifiant et votre mot de passe pour MySQL, vous pouvez utiliser PhpMyAdmin pour créer et administrer vos bases de données. Dans un navigateur, entrer l'adresse : http://etu-php-mysql.iut2.upmf-grenoble.fr/phpmyadmin/ Identifiez-vous, créez et remplissez vos bases de données. ATTENTION : Lors de la création de vos bases, veillez à spécifier comme moteur de stockage InnoDB (qui n'est pas la valeur par défaut), sinon vous ne pourrez pas spécifier de clefs étrangères entre vos tables. B) Ecriture des pages de votre site Web 1. Structure du document avec XHTML 1.1. Différence structure / présentation : XHTML définit le contenu de la page, mais pas la manière dont celle-ci s'affiche à l'écran (présentation). Les feuilles de style (CSS) gèrent la présentation (voir plus bas). 1.2. Deux types de balises : «bloc» et «en ligne» (inline) Balises bloc : balise ouvrante <nom_balise> contenu
balise fermante : </nom_balise> Balises en ligne : <nom_balise /> Exemples de syntaxe : Balise bloc : <p>bonjour, ceci est un paragraphe</p> Balise en ligne : <img src=''/home/toto/image.png'' alt=''description de l'image'' /> 1.3. Structure minimum d'une page Web : <!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="fr"> <head> <title>titre du site</title> </head> <body> </body> </html> <! Votre contenu ici ici > Le doctype indique (simplement) que vous utilisez la version 1 de XHTML. 1.4. Les balises à connaitre : <html></html> <head></head> <body></body> Balise «mère» de plus haut niveau, qui contiendra toutes les autres Définit l'en-tête de votre document Le corps du document, là où se situe le contenu de la page <h1></h1> Titre de niveau 1 (fonctionne avec h2, h3... h6) <p></p> <br /> Paragraphe (contient du texte) Retour à la ligne <a href=''page.html'' />lien</a> Lien hypertexte (vers une autre page html) <em></em> <strong></strong> <div></div> <img src=''image.png'' alt=''description de l'image'' /> Mise en valeur faible (généralement italique) Mise en valeur forte (généralement gras) Balise générique (sans sémantique) Insère une image dans votre page. L'attribut alt est obligatoire, et sert de texte de remplacement au cas où l'image ne peut pas être affichée. Ce chapitre est un simple aperçu, il est fortement recommandé de consulter les liens présents
sur ma page Web, notamment un tutorial simple et assez complet. 2. Gérer la présentation de vos pages avec CSS 1. Pourquoi des feuilles de style? CSS permet de gérer la présentation de vos pages structurées avec XHTML. Une feuille de style est un document indiquant comment devra être affiché tel ou tel élément de votre page (par exemple : tous les titres en bleu et le fond de la page en rouge). L'indépendance entre la structure et la présentation a de nombreux avantages. Outre une meilleure lisibilité du code source de vos pages, vous gagnerez également en facilité de modifications, de réutilisation, et de personalisation de vos pages de manière dynamique. 2. Syntaxe Un fichier.css est composé d'une série de lignes de la sorte, contenant un sélecteur, une accolade ouvrante, un série de couple propriété/valeur séparés par des points virgules, et un accolade fermante. 3. Utilisation Il existe 3 façons de définir le style d'élements : 1 utiliser l'attribut «style» des balises XHTML. Exemple : <body style="background color: red;"> 2 utiliser la balise XHTML «style» (dans l'en-tête de votre page XHTML) Exemple : <style type="text/css"> body {background color: red;} </style> 3 et c'est de loin la meilleur façon, utiliser une feuille de style externe avec votre page. Il faut placer un lien vers la feuille de style dans l'en-tête de la page (cad. entre <head> et </head>). <link rel="stylesheet" media="screen" type="text/css" href="mafeuille.css" />
4. Quelle méthode chosir? Cette dernière méthode est la meilleure car elle permet le maximum de découplage entre structure et présentation. En effet, imaginons que vous définissiez la couleur du titre <h1> à bleu, et que ce titre est utilisé des dizaines de fois, dans des centaines de fichiers XHTML. Si vous voulez changer la couleur de <h1>, il faudra modifier chaque élément <h1> dans chacun des fichiers si vous avez choisi la première méthode. Il faudra quand même modifier chaque fichier une fois si vous avez choisi la seconde. Si vous utilisez une feuille de style, vous avez uniquement une ligne à modifier pour arriver au même résultat. Privilégiez donc toujours une séparation du contenu et de la présentation, cela constituera un gage de qualité pour vos sites. 5. Exemple de feuille de style h1 {color: blue; font style: italic;} h2 {color: red; font weight: bold;} p {text align: left;} p.justifie {text align: justify;} 6. Classes Une fonctionnalité intéressante de CSS est la possibilité d'utiliser des classes d'éléments. En effet on a vu que l'on pouvait définir des propriétés pour l'ensemble des balises d'un document (par exemple tous les titres en bleu). Mais comment faire si l'on veut certains titres en bleu, et d'autre en vert? Commencer par définir la classe des titres concernés dans le fichier.html : <h1 class=''titrea''>mon titre en bleu</h1> <h1 class=''titreb''>autre titre en vert</h1> Dans la feuille de style, définir : h1.titrea {color: blue;} h1.titreb {color: blue;} Et les titres s'afficheront dans la couleur voulue.
C) Ecriture de scripts PHP et communication avec la base de données 1. Pourquoi PHP? XHTML permet de créer des structures de page Web, CSS permet de leur donner l'aspect voulu, mais ces pages restent statiques : leur contenu restera le même quelque soit l'utilisateur. PHP est un langage de script qui permet d'effectuer des opérations complexes, comme des calculs, des connections à des bases de données, le traitement des résultats, etc... Contrairement à XHTML, PHP peut être utilisé comme un véritable langage de programmation : vous pouvez affecter des variables, écrire des instructions conditionnelles, des boucles, gérer des tableaux... 2. Principe de fonctionnement Lorsque vous demandez une page.html classique, son contenu est téléchargé depuis le serveur, puis interprété par votre navigateur pour être affiché à l'écran. Un script PHP, lui, est exécuté directement par le serveur. Les clients accédant à une page PHP ne voient pas le contenu du script, mais uniquement ce que ce dernier affiche. Voici un exemple pour avoir les idées claires : fichier exemple1.php : <?php?> echo '<h1>exemple1</h1>'; echo '<p>bonjour<p>'; fichier exemple2.php : <?php echo '<h1>exemple2</h2>'; $annee=2007 if($annee == 2008) { echo '<p>bonne année!<p>'; }?> affichage sur le navigateur du client : Exemple1 Bonjour affichage sur le navigateur du client : Exemple2 Notons que toute commande PHP doit se trouver dans un fichier.php, entre des balises <?php et?>. Vous aurez deviné que la fonction echo permet d'afficher du texte à l'écran. En fait ce n'est pas exactement le cas : PHP étant interprété sur le serveur, le texte produit est transféré au client, puis interprété par son navigateur. En effet, ce dernier ne fera pas la différence entre du XHTML stocké directement dans un fichier.html sur le serveur, et du XHTML produit par un script PHP sur le
serveur. Il faut donc que les données en sortie de vos scripts PHP soient du XHTML correct pour que l'affichage se passe correctement. Une fois assimilé ce principe de fonctionnement PHP s'avère un outil extrêmement puissant et assez souple d'utilisation. 3. Connection à une base de données et traitement des résultats La connection à une base de données n'a rien de compliqué avec PHP. Le code ci-dessous présente l'exemple d'une connection à une base de données contenant des informations sur des personnes, et génère le code XHTML pour afficher les résultats dans un tableau. <?php $connexion = mysql_connect($host, $login, $pass) mysql_select_db($bd) $req = "SELECT * FROM Personne ORDER BY nom"; $resultat = mysql_query($req); echo "<table>"; echo "<tr><th>identifiant</th><th>nom</th><th>prénom</th></tr>"; while ($ligne = mysql_fetch_row($resultat)) { echo "<tr><td>$ligne[0]</td><td>$ligne[1]</td><td>$ligne[2]</td></tr>"; } echo "</table>";?> La signification de mysql_fetch_row peut ne pas sembler évidente. En fait, elle sert à récupérer le prochain résultat de la requête et à le stocker dans un tableau ($ligne), afin de faciliter le traitement ultérieur. Vous pouvez maintenant utiliser cet exemple comme point de départ et l'adapter à vos propres besoins. Cet exemple effectue une simple lecture (Select), mais vous pouvez bien sur effectuer toutes les opérations que la syntaxe SQL autorise.
D) Formulaires et authentification 1. Introduction La quasi totalité des sites proposent aujourd'hui à leurs clients des services personnalisés une fois ces derniers connectés. Nous allons voir comment afficher un formulaire d'authenfication sur votre page Web, et s'en servir pour permettre à vos visiteurs de s'identifier. 2. Formulaires XHTML Un formulaire devra se trouver à l'intérieur d'une balise <form>. Cette balise prend deux attributs : method et action. method : définit la méthode d'envoi du formulaire (get ou post, utilisez post) action : la page qui va traiter le résultat (et où le visiteur va être redirigé) Exemple : <form method="post" action="traitement.php''> Ensuite, les cases de saisie de type login/password que l'on voit sur les sites Web sont des balises XHTML comme les autres. Vous disposez (entre autres) de : <input type="text" /> qui permet d'entrer du texte, à utiliser pour l'identifiant de l'utilisateur, et de <input type="password" /> qui permet également d'entrer du texte, mais affiche des étoiles à la place des caractères tapés (fort utile pour les mots de passe). Important : Pour toutes les entrées de formulaire, il faut ajouter un attribut name aux balises, afin de pouvoir récupérer les valeurs de ces entrées. Exemple : <input type="text" name="login_form" /> Ne pas oublier la balise <input type="submit" /> qui affiche un bouton permettant de valider le formulaire. Vous pouvez changer le message sur le bouton avec l'attribut value. 3. Récupération des données Une fois votre formulaire terminé, il faut faut écrire le script PHP qui va traiter les données receuillies. Si vos données on été transmises avec la méthode post, un tableau spécial $_POST sera disponible et contiendra la valeur des champs du formulaire, indexé par le nom de la balise d'entrée. Par exemple :
<?php?> $login=$_post['login_form']; $pass=$_post['pass_form']; echo 'Tentative d'identification de '.$login.' en cours...'; Vous avez récupéré le nom du visiteur, mais simplement afficher son nom a un intérêt limité. Voyons maintenant comment gérer l'authentification des clients. 4. Authentification Il existe de nombreuses méthodes d'authentification, plus ou moins simples ou sures. Nous en verrons une simple et rapide à mettre en oeuvre. Pour ceux qui auront le temps, des pistes sont données pour mettre en oeuvre des solutions plus complexes mais également plus sure et plus élégante. Méthode simple Une première méthode simple est de conserver un fichier sur le serveur avec l'identifiant et le mot de passe de chaque utilisateur autorisé à s'inscrire. Ce fichier sera importé par les scripts PHP voulant vérifier l'existence d'un utilisateur. Voici l'exemple d'un tel fichier, nommé utilisateurs.php : <?php?> $users=array( 'toto' => 'fleur', 'titi' => 'montagne' ); Ce script déclare un tableau des mot de passe indexés sur le nom des utilisateurs. Maintenant on peut autoriser ou non l'affichage d'une page suivant si l'utilisateur est reconnu ou non. Voici notre traitant de formulaire modifié : <?php?> $login=$_post['login_form']; $pass=$_post['pass_form']; echo 'Tentative d'identification de '.$login.' en cours...<br />'; if($users[$login]==$pass) { echo 'Connection acceptée'; } else { echo 'Vous ne pouvez pas voir cette page, désolé'; } Cette méthode pose un problème de sécurité : en effet les mots de passe des utilisateurs sont accessibles simplement dans un fichier. De plus l'ajout, la supression de client, ainsi que la modification des mot de passe sont malaisés.
Méthode avancée Une solution élégante est de stocker les informations concernant les clients dans une base de données. L'ajout et la suppresion pourront ainsi se faire très facilement. Les traitants des formulaires enverront des requêtes à la base en fonction de l'opération demandée (Select pour une demande de connection, Update pour une mise à jour de mot de passe, Add/Delete pour ajouter/effacer des utilisateurs. Méthode professionnelle Pour des sites sensible, il est indispensable de crypter les données d'authentification. PHP fournit une fonction md5() qui prend en paramètre une chaîne de caractères et fournit un hash non réversible de cette chaîne. Si vous avez le temps, utilisez cette fonction pour crypter le stockage des mot de passe des clients. 5. Session Une fois le client authentifié, il souhaite le rester pendant toute la durée de se visite de votre site. Les clients trouveront pénible de devoir se re-authentifier à chaque page! Le mécanisme des sessions est fait pour cela. A chaque démarrage d'une session par un client, un tableau «super global» $_SESSION est crée. Vous pouvez ajouter ou retirer des variables de ce tableau à votre guise, et les variables stockées dans ce tableau y resteront pendant toute la durée de la session (et non uniquement pendant la visite de la page en cours comme c'était le cas avec $_POST). Créer une session : <?php session_start();?> Important : Cette fonction doit être placée avant tout code XHTML dans votre page (pour des raisons d'accès au cache du navigateur) Affecter une variable : <?php $_SESSION['variable'] = $valeur ;?> Tester l'existence d'une variable de session : if(isset($_session['variable_a_tester'])) echo 'Variable définie!'; Supprimer une variable de session : unset($_session['variable']); Détruire une session : session_destroy();
E) Vérification de la structure des pages et validation W3C Dans ce dernier chapitre vous allez vérifier que les pages que vous avez produites sont «valides». 1. Règles de bonne conduite XHTML est un langage de balisage, permettant d'imbriquer un nombre illimité de balises : Exemple : <html> <body> <p> <span> <em> etc... Par contre, il est interdit de croiser des balises comme ceci : <strong>blabla<em>blabla</strong></em> Pourquoi? Cela vient de la nature du XHTML, qui dérive du XML, qui est lui-même un langage à base d'arbre interdisant ce genre de pratiques. Deuxièmement, il est obligatoire de fermer tout balise ouverte. Enfin, toutes les balises doivent être tapées en minuscules. Depuis XHTML (le remplaçant d'html), certaines pratiques sont devenues à éviter (sans pour autant être absolument interdites pour l'instant), comme par exemple structurer sa page avec des balises <table> (les <div> sont fait pour cela). 2. Pourquoi respecter les normes? Une question fréquente est : «Pourquoi respecter toutes ces contraintes alors que ma page s'affiche correctement sur mon navigateur?» Il y a plusieurs réponses, toutes valables. La première est que ce qui s'affiche correctement sur un navigateur pourra ne pas s'afficher correctement sur un autre. Une norme sert à éviter ces problèmes : si tous les dévelopeurs Web et tous les fabriquants de navigateurs respectent les normes l'interopérabilité sera assurée. Ensuite le XHTML, comme le XML, ne se limite pas aux navigateurs sur des PC. Certains appareils portables, PDA, traducteurs pour personnes malvoyantes ont besoin de code valide pour fonctionner correctement. Enfin une page bien écrite sera beaucoup plus facile à maintenir et à faire évoluer. 3. Valider ses pages Web
Le W3C (http://www.w3.org/) est le consortium chargé de définir et faire évoluer les standards du Web. Afin de permettre aux développeurs Web de vérifier que leurs sites sont sans erreur, le W3C a développé un validateur HTML/XHTML. Ce validateur est dispnible à l'adresse suivante : http://validator.w3.org/ Il suffit d'entrer l'adresse de votre site pour savoir s'il est correct ou non, et dans ce cas où se situe les erreurs. Il existe également un validateur CSS à cette adresse. http://jigsaw.w3.org/css-validator/ Un site 100% valide vous donne le droit d'afficher un certificat de conformité, prouvant la qualité de votre création et votre préocupation pour l'accessibilité de l'internet.