Initiation PHP-MySQL : HTML, HTTP, URL, PHP Vocabulaire, principes et premiers pas Olivier BOEBION 12/02/2004 1 Le point de départ 1.1 Et la lumière fut... A la fin des années 1980, Tim Berners-Lee travaillant au CERN (Centre Européen de Recherche Nucléaire) invente le langage HTML (HyperText Markup Language), la notion d URL (Uniform Ressource Locator) et le protocole HTTP (HyperText Transfer Protocol). La figure 1 vous indique l emplacement de ces concepts et langage que nous allons détailler par la suite. Figure 1: Schéma de principe du Web 1
1.2 Le langage HTML Ce qui permet d afficher de façon structurée et conviviale des pages Web repose tout d abord sur l emploi de simples fichiers textes (extensions.htm ou.html) enrichis avec des balises (Tags). Un simple éditeur permet de développer des pages WEB. L écriture des balises <html> </html> est un bon départ. Les pages se découpent ensuite en 2 parties: une entête encadrée par le couple de balises <head> </head> et le contenu est identifié par <body> </body>. De nombreuses balises viennent ensuite enrichir le texte de la page faisant varier les paramètres des polices de caractère, insérant des images, des liens... Vous pouvez vous reporter à [1] pour connaitre les balises de base. Une page plus complète peut ressembler à ce qui suit: <html> <head> <title> Ma premiere page HTML </title> </head> <body> <center>ceci est ma première page HTML</center> <p> <h1>introduction</h1> <br> Vivement que quelqu un écrive un éditeur <b>wysiwyg</b> </p> </body> </html> A l origine, le langage HTML ne permet pas d assurer une mise en page précise des documents. L utilisation de tableaux (<table> </table>), le découpage en plusieurs sous-pages (<frameset> </frameset> et <frame> </frame>) ou plus récemment l utilisation de calques (<div> </div>) permettent d améliorer ces possibilités limitées. Terminons en rappelant quelques subtilités du langage HTML: les balises HTML peuvent utiliser des majuscules ou minuscules qui sont indifféremment interprétées (il vaut mieux s habituer à écrire les balises en minuscules en prévision de l utilisation du langage XHTML (extensible Hypertext Markup Language)); les retours à la ligne ne sont pas interprétés. 2
1.3 Le protocole d échange: HTTP Le langage HTML permet de décrire les fichiers HTML. L échange entre un serveur Web et un navigateur respectent le protocole HTTP (HyperText Transfer Protocol). C est ce protocole qui: 1. codifie la requête vers le serveur en lui indiquant l URL demandé; 2. retourne la page HTML au navigateur qui va interpréter les balises. 1.4 Définition des URLs Les URLs (Uniform Ressource Locators) permettent d indiquer l emplacement des ressources à échanger. Pour cela, un URL comporte en général un protocole d échange, l adresse d un serveur et un chemin vers le fichier demandé en respectant la syntaxe suivante: protocole://adresse-serveur/fichiers Le protocole le plus utilisé avec les navigateurs Web est http mais bien d autres types existent: file, ftp, mailto, telnet, news et les moins connus gopher,wais. L adresse du serveur indique sur quelle machine la ressource demandée se trouve. Bien entendu, le protocole d échange doit être fonctionnel sur cette machine pour que la ressource soit renvoyée. La dernière partie comporte le chemin complet vers le fichier demandé. Les répertoires intermédiaires sont séparés par le caractère /. L utilisation des URLs permet de mettre en oeuvre l hypertexte dans les pages Web. La création d un lien se fait en utilisant la balise HTML <A> (anchor, ancre) de la manière suivante: <a href="http://www.obs-vlfr.fr/lov/dbem/index.html">equipe DBEM du LOV</a> 1.5 Evolutions autour du langage HTML En 10 petites années, le langage HTML a fortement évolué pour rendre les sites WEB de plus en plus interactifs. La version actuelle du langage (4.01) combinée aux feuilles de style (CSS) et aux scripts JAVA (javascript) ou Visual Basic forment le HTML Dynamique (DHTML). Cette dénomination qui ne correspond à aucun standard fait fortement appel aux possibilités et particularités des différents navigateurs Web. En effet, le serveur Web ne fait que retourner les feuilles de style et les scripts au navigateur et c est lui qui va interpréter (ou non) ces éléments pour rendre les documents Web plus attrayants. L avenir proche du Web semble s orienter autour du langage XML (extensible Markup Language) [2] avec XHTML. Les technologies propriétaires SUN et Microsoft s appuient aussi sur XML avec respectivement J2EE et.net. 3
2 Les formulaires HTML La saisie d information dans des pages Web s effectue par l intermédiaire de formulaires. Avant de se lancer dans l étude du langage PHP, il est bon de s attarder sur la réalisation de ce type de page HTML. Notez toutefois qu il est bon d utiliser des tableaux lors de la réalisation de formulaire afin d en améliorer la mise en page. Les balises permettant d encadrer un formulaire sont <form> et </form>. Les attributs de ces balises précisent: le programme qui permet de traiter les données saisies dans le formulaire (attribut action); la méthode utilisée pour envoyer les données (attribut method, généralement égal à POST); l encodage utilisé (attribut enctype, généralement égal à application/x-www-formurlencoded). Chaque partie du formulaire est ensuite créée avec des balises <select> </select> pour des listes déroulantes ou des menus, <textarea> </textarea> pour des zones de texte et <input> </input> pour le reste. Dans ce dernier cas, l attribut type permet de préciser le type d entrée: text pour une chaîne de caractères; password pour un mot de passe; checkbox, et radio pour des boutons de sélection ou radio; file pour un chemin vers un fichier; hidden pour des informations cachées; submit, reset, image pour les boutons de formulaire. Dans tous les cas d entrée d un formulaire, il est important de bien définir le nom des variables et de fixer les valeurs possibles de celles-ci pour faciliter l écriture du programme de traitement en PHP. La figure 2 vous propose un premier exemple de formulaire suivi du contenu du fichier HTML permettant de le réaliser. Vous pouvez vous reporter à [3] pour mieux comprendre cet exemple et identifier les noms de variables qui seront passés en paramètre. Figure 2: Un premier formulaire 4
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>formulaire</title> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> </head> <body> <form action="traitement.php" method="post" enctype="application/x-www-form-urlencoded" name="formulaire"> <table width="334" border="1" cellspacing="1" cellpadding="0"> <tr> <td width="166"><p>choisissez votre titre:</p> <p>saisissez votre Nom:</p> <p>saisissez votre prénom:</p></td> <td width="159"><p align="left"> <select name="titre" id="titre"> <option value="aucun" selected>titre <option value="madame">mme <option value="mademoiselle">mlle <option value="monsieur">m. </select> </p> <p align="left"> <input name="nom" type="text" id="nom" size="15" maxlength="20"> </p> <div align="left"> <input name="prenom" type="text" id="prenom" size="15" maxlength="20"> </div> </td> </tr> <tr> <td height="58" colspan="2"> <div align="center"> <input name="envoi" type="submit" id="envoi" value="envoi"> </div> <div align="center"> <input name="raz" type="reset" id="raz" value="remise a zéro"> </div></td> </tr> </table> </form> </body> </html> 5
3 Le langage PHP 3.1 Caractéristiques PHP est un langage de scripts généraliste et Open Source, spécialement conçu pour le développement d applications Web. Au contraire d autres langages tels que le Perl ou le C, vous continuez à écrire des pages HTML dans lesquels vous insérez du code entre deux balises spéciales <? et?> qui permettent au serveur web de passer en mode PHP. Les fichiers contenant du code PHP sont identifiés par l extension.php : <html> <head> <title>exemple</title> </head> <body> <?php echo "Bonjour, je suis un script PHP!";?> </body> </html> Comme le montre la figure 3, l exécution du code PHP par le serveur génère un résultat en langage HTML qui est renvoyé au navigateur client, sans aucun moyen d avoir accès au code source. Une présentation plus détaillée ainsi que toute la documentation du langage PHP vous est proposée en ligne et en français sur le site php.net [4]. Figure 3: Place du PHP sur le serveur Web 6
Une des forces du langage PHP est le nombre considérable de librairies de fonctions permettant d étendre le langage de base aux domaines [4]: du Web (Apache,OpenSSL); de la messagerie (SMTP, IMAP); des images (Gif, JPEG, PNG,...); des fichiers (gestion de répertoire, génération de PDF à la volée,...); de la gestion de base de données (ODBC, Oracle8, MySql, PostgreSQL,Microsoft SQL server...);... 3.2 Récupération des variables dans un script PHP Terminons cette séance en présentant un script PHP qui traite les données saisies dans notre formulaire. Pour cela, il est nécessaire de les extraire en utilisant la fonction PHP $ POST. <html> <head> <title>résultat de requ^ete</title> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> </head> <body> <? // Recuperation des variables passees en argument /***********************************************/ $N = $_POST[ Nom ]; $P = $_POST[ Prenom ]; $T = $_POST[ Titre ]; //Recupération des données dans le serveur WEB $Ip = $_SERVER[ REMOTE_ADDR ]; //Affichage de la page echo "<p>"; echo "Bonjour $T $P $N"; echo "</p>"; echo "<p>"; echo "L adresse IP de votre machine est $Ip"; echo "</p>";?> </body> </html> 7
References [1] A beginner s guide to html NCSA (National Center for Supercomputing Applications), http://archive.ncsa.uiuc.edu/general/internet/www/htmlprimer.html [2] Extensible Markup Language (XML) 1.0 (Second Edition) World Wide Web Consortium, W3C Recommendation 6 October 2000 http://www.w3.org/tr/2000/rec-xml-20001006 [3] Create HTML Forms - A tutorial Par William Bontrager, http://viplab.dsi.unifi.it/ pala/html-form-tutorial.pdf/ [4] Documentation en ligne php.net http://www.php.net/docs.php 8