Tài liệu MySQL et CSS- P16 pdf

Si le test est passé avec succès, un lien vers la page est affiché avec lemessage qui donne le résultat du test.if test_cookie=="oui"{ document.write’ mon autre page ’; Le compteur vous

Si le test est passé avec succès, un lien vers la page est affiché avec lemessage qui donne le résultat du test.

if (test_cookie()=="oui"){

document.write(’ <a href="monautrepage.php">

mon autre page </a>’);

Le compteur vous servira à identifier les visiteurs sur votre site et àreconnaître les fidèles qui reviennent régulièrement Afficher le nombre devisiteurs sur votre page rangerait votre site dans les antiquités encore enligne Par contre, un visiteur sera flatté d’avoir été remarqué comme étantintéressé par le thème du site et, éventuellement, d’avoir un petit privilègepour cette raison

L’application ici a une architecture savante Voyez d’abord les lignes decode puis les différentes fonctions au fur et à mesure qu’elles sontappelées :

var expiradate = new Date();

var visites;

expdate.setTime(expiradate.getTime() + (24 * 60 * 60 * 1000 * 365));

if(!(visites = manger_biscuit("visites"))) { visites = 0;

} else { visites++;

}

ranger_biscuit("visites", visites, expdate, "/", null, false);

Les deux premières lignes déclarent et initialisent les variables dateet visites

expira-Ensuite, chaque variable est nourrie La variable expiradate repousse ladate d’une année La variable visites est affectée du chiffre 0 ouincrémentée selon le résultat ou non de l’appel à la fonction manger_bis-cuit() Le test porte sur le résultat de l’appel à la fonction

Le contenu de la propriété cookie

La propriété cookie de l’objet cookie contient les paires nom=valeur de tous les cookies disponibles pour cette page particulière En outre, chaque cookie contient des caractéristiques facultatives comme expires, la date d’expiration, path, le chemin pour lequel il est valide, domain, le domaine du serveur, secure, le drapeau sécurité (true ou false) Quand vous allez fouiller dans un cookie grâce

à document.cookie, vous avez une ou plusieurs paires nom=valeur Le nom est celui du cookie et la valeur, sa valeur La chaîne obtenue est terminée par un point-virgule Si la page ne dispose que d’un seul cookie, les paires sont séparées par un point-virgule suivi d’un espace Pour tester votre cookie, vous pouvez utiliser l’expression documen- t.write(document.cookie); Ainsi vous afficherez son contenu.

Voyez les fonctions Les deux principales sont appelées dans les lignes decode précédentes : manger_biscuit() et ranger_biscuit()

La fonction manger_biscuit() récupère les données du cookie ment employé est le nom du cookie Rappel : document.cookie est unechaîne qui peut contenir un ou plusieurs cookies

L’argu-La première partie de la fonction s’attache à identifier la longueur de lachaîne qui suit l’expression nom= (c’est-à-dire le mot visites) Ici lavariable qui contient la valeur du cookie prendra le nom $visites.Une première évaluation du cookie valide le fait que la taille du biscuit estplus grande que 0 au moyen d’un while Si ce n’est pas le cas, la fonctionretourne null

Dans le while, la valeur de i est 0 Vous créez une variable j qui est égale

à la longueur du nom (visites) et du signe = La méthode substring()vérifie que le premier nom est celui qui est en argument de la fonction ;

si c’est le cas, la position du premier caractère de la valeur est envoyée à

la fonction ingredients_biscuit(), sinon i prend la valeur du mot quisuit immédiatement l’espace, c’est-à-dire le nom du deuxième cookie, etainsi de suite jusqu’à ce que le test soit vrai

La méthode substring()

La méthode substring() utilisée abondamment pour analyser

la propriété cookie de l’objet document est nourrie par deux arguments : le premier donne la position du premier caractère et le second donne la longueur totale de la chaîne.

function manger_biscuit (nom) { var arg = nom + "=";

var longueur_nom = arg.length;

var taille_biscuit = document.cookie.length;

var i = 0;

while (i < taille_biscuit) { var j = i + longueur_nom;

if (document.cookie.substring(i, j) == arg){

return ingredients_biscuit (j);

} else {

i = document.cookie.indexOf(" ", i) + 1;

}

if (i == 0) { break;

} } //fin du while return null;

}

Examinez maintenant la fonction manger_biscuit()

function ingredients_biscuit (debut_mot) { var fin_mot =

document.cookie.indexOf (";", debut_mot);

if (fin_mot == -1) fin_mot = document.cookie.length;

return unescape

(document.cookie.substring(debut_mot, fin_mot));

}

Cette fonction reçoit le début du mot représentant la valeur et en localisant

le point-virgule en induit la longueur Elle renvoie la valeur reconstituéeavec la méthode unescape()

La dernière fonction a pour objectif de créer ou de modifier le cookie

function ranger_biscuit (nom, valeur) { var arg_valeur = ranger_biscuit.arguments;

var arg_nombre = ranger_biscuit.arguments.length;

var expires=(2 <arg_nombre) ? arg_valeur[2]: null;

var path = (3 < arg_nombre) ? arg_valeur[3] : null;

var domain=(4 <arg_nombre) ? arg_valeur[4]: null;

var secure=(5 < arg_nombre) ? arg_valeur[5]: false;

document.cookie = nom + "=" + escape (valeur) + ((expires == null) ? "" : ("; expires=" +

m Figure 9.24 : Fonction ranger_biscuit()

expires.toGMTString())) + ((path == null) ? "" : ("; path=" + path)) + ((domain == null) ? "" : ("; domain=" + domain)) + ((secure == true) ? "; secure" : "");

}

Avec la détection du navigateur

En outre, JavaScript permet de détecter un navigateur

var nom = navigator.appName;

var version = parseInt(navigator.appVersion);

var IDnavigateur = navigator.userAgent;

rel="stylesheet" type="text/css" / >\n";

} document.write (balise);

Le programme teste le nom et la version du navigateur et récrit la balisequi conduit à la feuille de style adéquate

Le modèle objet de document (DOM) et AJAX

Le DOM (Document Object Model) est un arbre avec une hiérarchie

descendante à partir de l’objet document Il est matérialisé par lesdifférentes balises du document HTML, XHTML et XML La structureintériorisée dans le modèle est constituée de balises qui se côtoient et quicontiennent parfois d’autres balises Ainsi tout le document est contenudans les balises<html> et </html>, qui contiennent les balises head quicontiennent les balises title et les balises <meta http−equiv=

"Content−Type" content="text/html; charset=iso−8859−1"/> et

<link rel="stylesheet" href="feuille.css" type="text/css"/>, tandis que la balise body est la balise frère de la balise head puisqueces deux balises sont au même niveau dans la hiérarchie

Pour bien comprendre, il faut bien avoir l’arbre complet dans la tête et levisualiser C’est un arbre généalogique : ainsi head est un descendant dehtml, un frère de body, un père de link et de meta.

Les éléments sont appelés des nœuds (nodes) en référence au langageXML qui est à l’origine de ce modèle Les nœuds au-dessus du nœudcourant sont appelés les ancêtres et les nœuds au-dessous sont lesdescendants Chaque nœud se positionne dans l’arbre relativement auxautres nœuds

AJAX

AJAX est vraiment au carrefour des langages du Web Il utilise despasserelles entre le XML, le JavaScript, les CSS et d’autres langagescomme PHP, Java, Ruby, etc Des applications existent pour transformerdes objets d’un langage à l’autre afin de les fournir à l’API JavaScript dunavigateur qui pourra les manipuler L’intérêt du JavaScript est qu’il agitdirectement sur la page sans demander d’autres manipulations et leschangements se font à vue Le DOM permet d’envoyer les donnéesretournées, dans un élément de l’arbre HTML, c’est-à-dire à un endroitprécis dans la page Ces techniques évitent de solliciter le serveur àchaque requête et de faire travailler le navigateur sur le PC client sur desdonnées serveur chargées en même temps que la page

Au départ, JavaScript tournait sur lui-même : il était impossible de chargerdes données non incluses dans la page Tout est parti de la classeJavaScript XmlHttpRequest, créée par Microsoft, à partir de la ver-sion 4.0 d’Internet Explorer, puis adoptée par les autres navigateurs

Le principe d’AJAX (Asynchronous JavaScript And XML) est de pouvoir

envoyer des requêtes et de les afficher sans recharger la page La pagedevient alors une application AJAX est une combinaison de technolo-gies : HTML et CSS pour la présentation, DOM, qui transforme chaqueélément de l’arbre en objet, et JavaScript avec l’objet XMLHttpRequestpour gérer les requêtes et les réponses Asynchrone signifie que l’appli-cation, une fois la requête envoyée, n’attend pas la réponse mais poursuitson processus et affiche la réponse quand elle se présente

Le nom de chaque propriété est écrit à la manière JavaScript Ainsifont−size devient fontSize, et background−color,backgroundColor, etc.

Voici une liste d’instruments de musique :

b Figure 9.25 :

Liste non ordonnée

b Figure 9.26 :

Titre noir

<h1 id="titre" class="titraille">Grand titre</h1>

<button onclick="<button onclick=

"document.getElementById(’titre’) style.color = ’orange’;" >

Mettre le titre en orange </button>">Mettre le titre en orange

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" >

<html><head><title>Test</title>

<script type="text/javascript">

function contraste() { document.getElementsByTagName("body")[0]

<! .setAttribute("bgColor", "white");

document.getElementsByTagName("body")[0]

.setAttribute("text", "black");

} // >

</script></head>

<body bgcolor="#FFFFCC" text="#E00000">

<button onClick="contraste()">En noir et blanc</button>

</pre></form>

</body></html>

b Figure 9.27 :

Titre orange

Ce bouton permet de rendre un site plus lisible en ce sens qu’il affecte unfond blanc et des caractères noirs à la page Le premier élémentbody([0]) est visé La méthode setAttribute() donne une valeur à unattribut ou une propriété.

fonction Selon la réponse, la page affiche "Encore une fois !" ou

"Bravo !" et le changement se fait à vue.

b Figure 9.28 :

Noir et blanc

b Figure 9.29 :

Mauvaise réponse

<script type="text/javascript">

function reponse() { ind_choix=document.forms[0].choix.selectedIndex;

document.getElementById("lareponse") replaceChild(noeud_texte, document getElementById("lareponse").firstChild);

} // >

</script></head>

<body>

<table border="1" bgcolor="#FFFFC0" width="30%">

<tr><td id="z1">Quelle est la couleur de l’océan ?</td>

Toutes ces applications sont du DHTML utilisant le JavaScript et le DOM

et parfois les CSS comme dans les menus dynamiques

Un menu dynamique

Vous pouvez réaliser facilement un menu en allant sur des sites commehttp://css.maxdesign.com.au/listamatic/, qui présente toutes lesfaçons de créer un menu dynamique, ou www.accessify.com/tools-and-wizards/developer-tools/list-o-matic/, qui génère le coded’un menu dynamique à partir d’un formulaire et de quelques choix detypes de menus Les possibilités vont du menu simple, avec juste un:hoverau passage de la souris, au menu dynamique, qui s’enroule et sedéroule, parfois avec l’aide du JavaScript (voir Figure 9.32)

Voici un menu en cascade que le site www.ibilab.net propose sur sapage www.ibilab.net/webdev/exemples/menuencascade-exemple2.htm Ce menu a été adapté et implémenté sur le site biobearn.com par lagraphiste Isabelle Godard (www.godarisa.com) (voir Figure 9.33)

m Figure 9.31 : Listamatic

m Figure 9.32 : Accessify

m Figure 9.33 : Ibiliab

Ce menu utilise du JavaScript et la propriété display avec les valeursnone et block pour afficher ou masquer le contenu des menus Cesderniers sont placés horizontalement et déroulés verticalement.

Dans ces menus, on utilise le DHTML, le HTML dynamique composé deCSS, de JavaScript, de DOM Les méthodes JavaScript getElementsBy-TagName()et getElementById() agissent directement sur des éléments

de l’arbre DOM, la première par le biais du nom de la balise et la secondepar le biais de l’identifiant de l’élément

<! modèle de menu sur : http://www.ibilab.net >

<script type="text/javascript">

function hover(obj){

} } } } function setHover(){

LI = document.getElementById(’menu’) getElementsByTagName(’li’);

hover(this);

} } } function MM_swapImgRestore() { //v3.0 var i,x,a=document.MM_sr; for(i=0;a&&i <a length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;

} function MM_preloadImages() { //v3.0 var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array(); var i,j=d.MM_p.length,a=MM_preloadImages.arguments;

for(i=0; i <a.length; i++)

if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image;

d.MM_p[j++].src=a[i];}}

} function MM_findObj(n, d) { //v4.01 var p,i,x; if(!d) d=document;

✂ if((p=n.indexOf("?"))>0&&parent.frames.length) { d=parent.frames[n.substring(p+1)].document;

if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x;

if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}

} // >

<link href="menu.css" rel="stylesheet" type="text/css">

<link href="biobearn.css" rel="stylesheet" type="text/css">

<style type="text/css">

body { background-image: url("images/fond.gif");

<! background-repeat: repeat;

}

a { font-size: small;

color: #339999;

font-family: Arial, Helvetica, sans-serif;

} a:visited { color: #339999;

} a:hover { color: #cc6699;

} a:active { color: #cc6699;

} >

<td align="center" valign="middle"><table width="760"

border="0" cellpadding="0" cellspacing="0" class="fondmenu" >

width="140" height="35" hspace="0"

vspace="0" border="0" class="first" ></a>

height="35" hspace="0" vspace="0" border="0" >

<img src="images/menu/menu1_off.gif" name="bouton1"

width="89" height="35" hspace="0" vspace="0" border="0" ></a>

<! fin du premier menu >

La feuille de style joue sur le pseudo-élément :hover qui est relayé parl’événement JavaScript onMouseOver à cause des incompatibilités d’In-ternet Explorer Certains propriétés sont destinées à Internet Explorer,comme _display:inline (notez le blanc souligné initial)

m Figure 9.35 : Bio Béarn

ul#menu li ul{

display:none;

} ul#menu li:hover ul{

display:block;

} ul#menu{

float:left;

display:block;

} ul#menu li.first{

width: 140px;

} ul#menu li.two{

width: 40px;

} ul#menu li.three{

width: 89px;

} ul#menu li.for{

width: 32px;

} ul#menu li.fiveseven{

width: 99px;

} ul#menu li.six{

width: 35px;

} ul#menu li.heigt{

width: 59px;

} ul#menu li.nine{

width: 84px;

} ul#menu li.ten{

width: 83px;

}

ul#menu li a{

display:block;

color:#339999;

text-decoration:none }

ul#menu li a:hover{

color:#CC6699;

} ul#menu ul{

color:#CC6699;

border:none;

} fondmenu { background-color: #ccffcc;

9.2 Le PHP

Le PHP est principalement un langage de script qui est mélangé au codeHTML pour exécuter des commandes avant que le fichier HTML soitprésenté au navigateur Le code PHP est exécuté par le serveur avant que

le navigateur ne présente la page à l’internaute Comme le résultat de toutcela est que tout le contenu de la page est du HTML, n’importe quelnavigateur peut l’interpréter

D’autres langages de script existent, comme ASP, JSP mais PHP est unlangage open source simple d’approche, avec des développements quipermettent une grande souplesse dans des situations inédites À l’instar deJava, il intègre la programmation objet et, comme il est beaucoup diffusé,

de nombreux outils PHP particulièrement bien adaptés pour le Web sontdéveloppés Comme il est gratuit, quasiment tous les hébergeurs web lepropose

Le PHP est fondé sur les phrases, à la manière d’un langage naturel Letype par défaut est string (voir Figure 9.36)

Sans hébergeur, il est possible d’installer l’application EasyPHP Laprocédure est simple Téléchargez le logiciel sur www.easyphp.org puis

un clic suffit pour installer le serveur Apache, le moteur PHP le plus récent

et la base de données MySQL accompagnée de l’outil d’administrationPHPmyAdmin Sous Windows, vous avez déjà un serveur web installé :IIS Si vous rencontrez un problème pour afficher la page d’accueild’EasyPHP, c’est souvent à cause d’un conflit avec IIS, le serveur deWindows Il suffit alors de le désactiver De même, des logiciels pare-feucomme ZoneAlarm, par ailleurs utiles, peuvent empêcher l’accès à la page

du logiciel d’administration de la base MySQL, PHPmyAdmin Dans laplupart des cas, EasyPHP ne pose aucun problème

Ma page

Ouvrez votre traitement de texte ou d’édition de code Entrez les balisesobligatoires<html></html> À l’intérieur, ajoutez les balises qui com-posent les deux parties d’une page : l’en-tête <head></head> et, au-dessous, les balises <body></body> Vous obtenez une page blanche.Maintenant, ajoutez un titre dans les balises<head></head>, qui appa-raîtra comme une enseigne dans l’en-tête du navigateur : <title>Leclub</title>

La page est encore vide Vous allez vous présenter Entre les balises

<body></body>, écrivez je m’appelle

Saisissez maintenant votre premier code PHP Le code PHP doit êtreentouré des balises<? ?> (ou parfois <?php ?> ou <% %>) Avant labalise<html>, insérez votre première variable

<?

$mon_nom="François";

? >

m Figure 9.36 : EasyPHP

Le caractère $ devant un mot indique qu’il s’agit d’une variable Unevariable est un espace de mémoire vive alloué à une information.Donnez-lui de préférence un nom compréhensible mon_nom signifiedavantage qu’une adresse mémoire avec du code informatique Quandvous relirez votre programme, vous saurez qu’il s’agit du nom dequelqu’un Ici, l’espace souligné remplace l’espace, qui ne doit pas figurerdans un nom de variable.

Le caractère "égal" crée une affectation Les guillemets indiquent aumoteur PHP qu’il s’agit d’une chaîne de caractères et le point-virguleferme la commande La commande peut s’étaler sur plusieurs lignes Lepoint-virgule indique au moteur que ce qui a précédé est une unité, unordre d’exécution L’affectation consiste à affecter une valeur à unevariable Ainsi, l’espace mémoire appelé mon_nom reçoit la valeurFrançois

Le caractère éga"

Le fait que les premiers concepteurs de programmes aient

choisi le caractère égal (=) pour caractériser l’affectation d’une

valeur à une variable entraîne souvent la confusion avec le test d’égalité

qui, lui, est signalé par un double égal (==) Certains bogues sont dus à

cette confusion, surtout dans les tests avec if.

Enregistrez maintenant votre page dans le répertoire club à l’intérieur du répertoire www du dossier d’EasyPHP sous le nom index.php Puis ouvrez

votre navigateur web et cliquez du bouton droit sur la petite icôned’EasyPHP dans la barre de tâches de Windows Un menu apparaît

Sélectionnez Web local et cliquez sur le répertoire club Rien n’apparaît,

juste une page blanche Vous avez créé une variable mais ne l’avez pasaffichée sur l’écran Pour cela, inscrivez <? echo $mon_nom ?> endessous de la balise body Remarquez l’omission du point-virgule En fait,

la balise ?> signale la fin de la commande et le point-virgule est icioptionnel

Maintenant, vous avez plusieurs méthodes pour ajouter le nom :

¶ Première solution :

$mon_nom="François Rabelais";

Ces cinq solutions donnent le même résultat : François Rabelais.

Passons maintenant aux explications

$mon_nom="François Rabelais"; est une chaîne de caractères Vousécrivez comme d’habitude, en langage naturel, avec un espace entre lesmots

$mon_nom="François"." "."Rabelais";introduit la fonction de ténation, exprimée par le point Cette fonction assemble trois tronçons,espace inclus Les guillemets, comme les apostrophes, indiquent que lavaleur est de type string Dans certains langages, vous devez toujourspréciser le type d’une donnée et il est malaisé de faire passer une donnéed’un type à un autre, ce qui n’est pas le cas en langage PHP Il reconnaît

conca-de lui-même le type conca-de la donnée

b Figure 9.37 :

François Rabelais

Il existe des différences entre une paire de guillemets et une paired’apostrophes Par exemple, si vous écrivez $mon_nom=’$mon_nom Ra-belais’ au lieu de $mon_nom="$mon_nom Rabelais", vous affichezlittéralement $mon_nom Rabelais La variable n’a pas été extrapolée Elle

a été prise pour un mot commençant par le caractère "dollar"

Les variables scalaires

Les variables scalaires contiennent une seule valeur, par opposition auxtableaux qui en contiennent plusieurs

Le nom des variables

Un nom de variable qui représente une valeur ou un ensemble de valeursdoit commencer par une lettre ou un blanc souligné (_), suivi de lettres, dechiffres ou de blancs soulignés Attention, le langage PHP distingue lacasse dans les nom de variable Ainsi $Fromage et $fromage sont desvariables différentes

Choix du nom des variables

Soyez cohérent dans le choix du nom des variables L’objectif est d’obtenir un nom évocateur, mais pas trop long $nbre_bou- teille est aussi significatif que $nombre_de_bouteilles mais vous aurez moins de caractères à saisir à chaque fois que vous l’utiliserez Soyez rigoureux dans vos critères de nommage Évitez les capitales car vous risquez d’oublier que vous les avez employées et d’engendrer ainsi une erreur avec une variable inexistante Notez que le nom d’un champ de formulaire sert aussi à nommer la variable qui en est issue ; soyez rigoureux aussi sur le choix de ces noms de champ.

La valeur des variables scalaires peut être de plusieurs types Il est bon deconnaître ces derniers même si, en général, le langage PHP fait le travail

à votre place dans la plus grande transparence

Le type des variables

Tab 9.3 : Les différents types de variables

PHP!"

Les variables en langage PHP sont typées implicitement Ainsi, PHPreconnaît un chiffre ou des lettres et le point du nombre à virgule flottante

Il vous laisse cependant la possibilité de forcer le type :

$code_postal="06400";

$code_postal= (int)$code_postal;

Ici, la variable $code_postal, qui serait naturellement une chaîne decaractères à cause des guillemets, peut être transtypée en nombre Leforçage du type en int lui enlève le 0 du début Par contre, si 06400 avaitété sans guillemets, le nombre aurait interprété comme un octal à cause

du 0 initial et aurait donc valu 3328 à la deuxième ligne Avec tivité des opérateurs, le sens du traitement de l’affectation et du transty-page est de la droite vers la gauche La variable $code_postal est doncici transtypée en integer puis affectée à elle-même : elle n’a plus riend’un code postal Faites bien la différence entre un chiffre et un nombre,sinon, vous aurez des surprises

l’associa-Les entiers

Les variables de type entier sont assez simples à comprendre

Vous pouvez écrire par exemple :

$a=1;

$b=2;

$c=$a+$b;

En l’occurrence, $c contient la valeur 3.

Si vous mettez les valeurs 1 et 2 entre guillemets ou apostrophes, PHPdevine qu’il s’agit de valeurs numériques, et non de chaînes de caractères,grâce à l’opérateur + Il fera la somme des deux variables :

$a=’1’; $b="2"; $c=$a+$b;

PHP vous simplifie la vie en assumant ces tâches de typage des donnéesqui alourdissent inutilement le travail du programmeur et peuventconstituer une source d’erreurs

Les nombres à virgule flottante

Méfiez-vous des float, c’est-à-dire des nombres à virgule flottante, car ilssont sujets aux approximations dans les résultats Si vous avez6.555973333 comme résultat d’une opération, l’ordinateur arrêtera lerésultat sur une approximation pour éviter de générer un bogue deprogramme sans fin

En anglais, le point remplace la virgule utilisée en français

¶ le nombre à virgule flottante 0.0 (zéro) ;

¶ la chaîne de caractères vide et le caractère 0 ;

¶ un tableau sans élément ;

¶ le type null (y compris les variables passées par la fonction unset()).Les autres valeurs sont considérées comme true

Si la variable $variable a l’une des valeurs false précédentes,l’évaluation du test if(!$variable) est true Par ailleurs, if ($varia-