STID 2me anne : TP Web/PHPPlan de travail et aide mmoire

jean.arnaud@inria.fr

Ce document est compos de cinq parties :

Un aide mmoire sur les aspects pratiques de la cration de sites

Une introduction XHTML et l'utilisation de CSS

Une introduction aux scripts PHP, et leur utilisation pour effectuer des requtes 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) Crer son site et sa base de donnes

1. Connection au serveur Web et tlchargement des pagesLes pages Web (.html), feuilles de style (.css), et scripts PHP (.php) que vous allez crire sur votre poste local doivent tre transfres sur un serveur de page Web pour pouvoir tre consultes.

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 donnes, c'est donc sur cette machine que vous allez dposer vos crations.

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 rpertoire sur le serveur se trouve un dossier www, qui constitue la racine de votre site Web. Les pages que vous crez doivent donc tre dposes dans ce dossier pour tre prises en compte par le serveur de pages Web.

2. Consultation de votre site

Une fois vos premires pages envoys 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 donnes

Un serveur de base de donnes MySQL est install sur etu-php-mysql.iut2.upmf-grenoble.fr.Un compte vous a t cre pour vous connecter au serveur MySQL, mais pour des raisons de scurit, vos paramtres de connection (login et mot de passe) sont diffrents. Vos paramtres de connection ont t placs dans votre rpertoire sur la machine etu-php-mysql.iut2.upmf-grenoble.fr, dans un fichier infos_mysql.txt. Rcuprez ce fichier via FTP.

4. Cration de votre base de donnes

Une fois que vous avez obtenu votre identifiant et votre mot de passe pour MySQL, vous pouvez utiliser PhpMyAdmin pour crer et administrer vos bases de donnes.

Dans un navigateur, entrer l'adresse :

http://etu-php-mysql.iut2.upmf-grenoble.fr/phpmyadmin/

Identifiez-vous, crez et remplissez vos bases de donnes.

ATTENTION : Lors de la cration de vos bases, veillez spcifier comme moteur de stockage InnoDB (qui n'est pas la valeur par dfaut), sinon vous ne pourrez pas spcifier de clefs trangres entre vos tables.

B) Ecriture des pages de votre site Web

1. Structure du document avec XHTML

1.1. Diffrence structure / prsentation :

XHTML dfinit le contenu de la page, mais pas la manire dont celle-ci s'affiche l'cran (prsentation).Les feuilles de style (CSS) grent la prsentation (voir plus bas).

1.2. Deux types de balises : bloc et en ligne (inline)

Balises bloc : balise ouvrante contenu

balise fermante :

Balises en ligne :

Exemples de syntaxe :Balise bloc : Bonjour, ceci est un paragrapheBalise en ligne :

Le doctype indique (simplement) que vous utilisez la version 1 de XHTML.

1.4. Les balises connaitre :

Balise mre de plus haut niveau, qui contiendra toutes les autres

Dfinit l'en-tte de votre document

Le corps du document, l o se situe le contenu de la page

Titre de niveau 1 (fonctionne avec h2, h3 ... h6) Paragraphe (contient du texte) Retour la ligne

lien Lien hypertexte (vers une autre page html) Mise en valeur faible (gnralement italique) Mise en valeur forte (gnralement gras) Balise gnrique (sans smantique)

sur ma page Web, notamment un tutorial simple et assez complet.

2. Grer la prsentation de vos pages avec CSS

1. Pourquoi des feuilles de style ?

CSS permet de grer la prsentation de vos pages structures avec XHTML.Une feuille de style est un document indiquant comment devra tre affich tel ou tel lment de votre page (par exemple : tous les titres en bleu et le fond de la page en rouge).L'indpendance entre la structure et la prsentation a de nombreux avantages. Outre une meilleure lisibilit du code source de vos pages, vous gagnerez galement en facilit de modifications, de rutilisation, et de personalisation de vos pages de manire dynamique.

2. Syntaxe

Un fichier .css est compos d'une srie de lignes de la sorte, contenant un slecteur, une accolade ouvrante, un srie de couple proprit/valeur spars par des points virgules, et un accolade fermante.

3. Utilisation

Il existe 3 faons de dfinir le style d'lements :1 utiliser l'attribut style des balises XHTML.Exemple : 2 utiliser la balise XHTML style (dans l'en-tte de votre page XHTML)Exemple :

body{backgroundcolor:red;}

3 et c'est de loin la meilleur faon, utiliser une feuille de style externe avec votre page. Il faut placer un lien vers la feuille de style dans l'en-tte de la page (cad. entre et ).

4. Quelle mthode chosir ?

Cette dernire mthode est la meilleure car elle permet le maximum de dcouplage entre structure et prsentation. En effet, imaginons que vous dfinissiez la couleur du titre bleu, et que ce titre est utilis des dizaines de fois, dans des centaines de fichiers XHTML. Si vous voulez changer la couleur de , il faudra modifier chaque lment dans chacun des fichiers si vous avez choisi la premire mthode. Il faudra quand mme 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 mme rsultat.Privilgiez donc toujours une sparation du contenu et de la prsentation, cela constituera un gage de qualit pour vos sites.

5. Exemple de feuille de style

h1{color:blue;fontstyle:italic;}

h2{color:red;fontweight:bold;}

p{textalign:left;}

p.justifie{textalign:justify;}

6. Classes

Une fonctionnalit intressante de CSS est la possibilit d'utiliser des classes d'lments.En effet on a vu que l'on pouvait dfinir des proprits 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 dfinir la classe des titres concerns dans le fichier .html :

Mon titre en bleuAutre titre en vert

Dans la feuille de style, dfinir :

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 donnes

1. Pourquoi PHP ?XHTML permet de crer des structures de page Web, CSS permet de leur donner l'aspect voulu, mais ces pages restent statiques : leur contenu restera le mme quelque soit l'utilisateur.PHP est un langage de script qui permet d'effectuer des oprations complexes, comme des calculs, des connections des bases de donnes, le traitement des rsultats, etc...Contrairement XHTML, PHP peut tre utilis comme un vritable langage de programmation : vous pouvez affecter des variables, crire des instructions conditionnelles, des boucles, grer des tableaux...

2. Principe de fonctionnementLorsque vous demandez une page .html classique, son contenu est tlcharg depuis le serveur, puis interprt par votre navigateur pour tre affich l'cran. Un script PHP, lui, est excut directement par le serveur. Les clients accdant une page PHP ne voient pas le contenu du script, mais uniquement ce que ce dernier affiche.Voici un exemple pour avoir les ides claires :

fichier exemple1.php :

fichier exemple2.php :

affichage sur le navigateur du client :

Exemple1Bonjour

affichage sur le navigateur du client :

Exemple2

Notons que toute commande PHP doit se trouver dans un fichier .php, entre des balises .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 interprt sur le serveur, le texte produit est transfr au client, puis interprt par son navigateur. En effet, ce dernier ne fera pas la diffrence 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 donnes 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'avre un outil extrmement puissant et assez souple d'utilisation.

3. Connection une base de donnes et traitement des rsultats

La connection une base de donnes n'a rien de compliqu avec PHP. Le code ci-dessous prsente l'exemple d'une connection une base de donnes contenant des informations sur des personnes, et gnre le code XHTML pour afficher les rsultats dans un tableau.

La signification de mysql_fetch_row peut ne pas sembler vidente. En fait, elle sert rcuprer le prochain rsultat de la requte et le stocker dans un tableau ($ligne), afin de faciliter le traitement ultrieur.Vous pouvez maintenant utiliser cet exemple comme point de dpart et l'adapter vos propres besoins. Cet exemple effectue une simple lecture (Select), mais vous pouvez bien sur effectuer toutes les oprations que la syntaxe SQL autorise.

D) Formulaires et authentification

1. Introduction

La quasi totalit des sites proposent aujourd'hui leurs clients des services personnaliss une fois ces derniers connects. 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'intrieur d'une balise .Cette balise prend deux attributs : method et action. method : dfinit la mthode d'envoi du formulaire (get ou post, utilisez post) action : la page qui va traiter le rsultat (et o le visiteur va tre redirig)

Exemple :

Mthode avanceUne solution lgante est de stocker les informations concernant les clients dans une base de donnes. L'ajout et la suppresion pourront ainsi se faire trs facilement. Les traitants des formulaires enverront des requtes la base en fonction de l'opration demande (Select pour une demande de connection, Update pour une mise jour de mot de passe, Add/Delete pour ajouter/effacer des utilisateurs.

Mthode professionnelle

Pour des sites sensible, il est indispensable de crypter les donnes d'authentification.PHP fournit une fonction md5() qui prend en paramtre une chane de caractres et fournit un hash non rversible de cette chane. 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 dure de se visite de votre site.Les clients trouveront pnible de devoir se re-authentifier chaque page !Le mcanisme des sessions est fait pour cela.A chaque dmarrage d'une session par un client, un tableau super global $_SESSION est cre.Vous pouvez ajouter ou retirer des variables de ce tableau votre guise, et les variables stockes dans ce tableau y resteront pendant toute la dure de la session (et non uniquement pendant la visite de la page en cours comme c'tait le cas avec $_POST).

Crer une session :

Important : Cette fonction doit tre place avant tout code XHTML dans votre page (pour des raisons d'accs au cache du navigateur)

Affecter une variable :

Tester l'existence d'une variable de session :if(isset($_SESSION['variable_a_tester']))

echo'Variabledfinie!';

Supprimer une variable de session :unset($_SESSION['variable']);

Dtruire une session :

session_destroy();

E) Vrification de la structure des pages et validation W3C

Dans ce dernier chapitre vous allez vrifier que les pages que vous avez produites sont valides .

1. Rgles de bonne conduite

XHTML est un langage de balisage, permettant d'imbriquer un nombre illimit de balises :Exemple :

etc...

Par contre, il est interdit de croiser des balises comme ceci : blablablablaPourquoi ? Cela vient de la nature du XHTML, qui drive du XML, qui est lui-mme un langage base d'arbre interdisant ce genre de pratiques.

Deuximement, il est obligatoire de fermer tout balise ouverte.Enfin, toutes les balises doivent tre tapes en minuscules.

Depuis XHTML (le remplaant 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 (les sont fait pour cela).

2. Pourquoi respecter les normes ?

Une question frquente est : Pourquoi respecter toutes ces contraintes alors que ma page s'affiche correctement sur mon navigateur ?

Il y a plusieurs rponses, toutes valables. La premire est que ce qui s'affiche correctement sur un navigateur pourra ne pas s'afficher correctement sur un autre. Une norme sert viter ces problmes : si tous les dvelopeurs Web et tous les fabriquants de navigateurs respectent les normes l'interoprabilit sera assure. 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 dfinir et faire voluer les standards du Web. Afin de permettre aux dveloppeurs Web de vrifier que leurs sites sont sans erreur, le W3C a dvelopp 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 cration et votre procupation pour l'accessibilit de l'Internet.

STID 2me anne : TP Web/PHPA) Crer son site et sa base de donnesB) Ecriture des pages de votre site Web1. Structure du document avec XHTML2. Grer la prsentation de vos pages avec CSS

C) Ecriture de scripts PHP et communication avec la base de donnesD) Formulaires et authentificationE) Vrification de la structure des pages et validation W3C