MySQL et CSS- P16

Chia sẻ: Thanh Cong | Ngày: | Loại File: PDF | Số trang:50

0
34
lượt xem
6
download

MySQL et CSS- P16

Mô tả tài liệu
  Download Vui lòng tải xuống để xem tài liệu đầy đủ

MySQL et CSS- P16: Dans la première partie, lancez-vous dans la création de votre premier site web dynamique en PHP. Au travers d’exemples simples et concrets, apprenez à votre rythme à développer un site web complet, relié à une base de données MySQL

Chủ đề:
Lưu

Nội dung Text: MySQL et CSS- P16

  1. Le JavaScript Si le test est passé avec succès, un lien vers la page est affiché avec le message qui donne le résultat du test. if (test_cookie()=="oui"){ document.write(’ mon autre page’); } Un compteur Voici un autre exemple d’application : un compteur de visiteurs. Le programme est composé de plusieurs fonctions encapsulées. L’encapsulation L’encapsulation consiste à écrire un programme de sorte qu’il puisse être utilisé par différents scripts. En JavaScript, c’est une fonction ou un objet. Ici la fonction ranger_biscuit() peut être appelée dans n’importe quelle circonstance. Le compteur vous servira à identifier les visiteurs sur votre site et à reconnaître les fidèles qui reviennent régulièrement. Afficher le nombre de visiteurs sur votre page rangerait votre site dans les antiquités encore en ligne. Par contre, un visiteur sera flatté d’avoir été remarqué comme étant intéressé par le thème du site et, éventuellement, d’avoir un petit privilège pour cette raison. L’application ici a une architecture savante. Voyez d’abord les lignes de code puis les différentes fonctions au fur et à mesure qu’elles sont appelé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++; } Double Poche CSS • 751
  2. 9 Les CSS se marient bien ranger_biscuit("visites", visites, expdate, "/", null, false); Les deux premières lignes déclarent et initialisent les variables expira- date et visites. Ensuite, chaque variable est nourrie. La variable expiradate repousse la date d’une année. La variable visites est affectée du chiffre 0 ou incré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 de code précédentes : manger_biscuit() et ranger_biscuit(). La fonction manger_biscuit() récupère les données du cookie. L’argu- ment employé est le nom du cookie. Rappel : document.cookie est une chaîne qui peut contenir un ou plusieurs cookies. La première partie de la fonction s’attache à identifier la longueur de la chaîne qui suit l’expression nom= (c’est-à-dire le mot visites). Ici la variable qui contient la valeur du cookie prendra le nom $visites. Une première évaluation du cookie valide le fait que la taille du biscuit est plus grande que 0 au moyen d’un while. Si ce n’est pas le cas, la fonction retourne null. 752 • Double Poche CSS
  3. Le JavaScript 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 qui suit immédiatement l’espace, c’est-à-dire le nom du deuxième cookie, et ainsi 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 Double Poche CSS • 753
  4. 9 Les CSS se marient bien (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ée avec la méthode unescape(). m Figure 9.24 : Fonction ranger_biscuit() 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
  5. Le JavaScript 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; var navigateur = 0; if (nom.indexOf("Explorer")>0){ if (version >= 4) navigateur= 1; else navigateur=2; if (IDnavigateur.indexOf("MSIE 5.0")>0)navigateur=2; } if (navigateur ==0){ var balise =’\n"; } else { var balise =’\n"; } document.write (balise); Le programme teste le nom et la version du navigateur et récrit la balise qui 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 les différentes balises du document HTML, XHTML et XML. La structure intériorisée dans le modèle est constituée de balises qui se côtoient et qui contiennent parfois d’autres balises. Ainsi tout le document est contenu dans les balises et , qui contiennent les balises head qui contiennent les balises title et les balises et , tandis que la balise body est la balise frère de la balise head puisque ces deux balises sont au même niveau dans la hiérarchie. Double Poche CSS • 755
  6. 9 Les CSS se marient bien Pour bien comprendre, il faut bien avoir l’arbre complet dans la tête et le visualiser. C’est un arbre généalogique : ainsi head est un descendant de html, 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 langage XML qui est à l’origine de ce modèle. Les nœuds au-dessus du nœud courant sont appelés les ancêtres et les nœuds au-dessous sont les descendants. Chaque nœud se positionne dans l’arbre relativement aux autres nœuds. AJAX AJAX est vraiment au carrefour des langages du Web. Il utilise des passerelles entre le XML, le JavaScript, les CSS et d’autres langages comme PHP, Java, Ruby, etc. Des applications existent pour transformer des objets d’un langage à l’autre afin de les fournir à l’API JavaScript du navigateur qui pourra les manipuler. L’intérêt du JavaScript est qu’il agit directement sur la page sans demander d’autres manipulations et les changements se font à vue. Le DOM permet d’envoyer les données retournées, dans un élément de l’arbre HTML, c’est-à-dire à un endroit pré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 des données serveur chargées en même temps que la page. Au départ, JavaScript tournait sur lui-même : il était impossible de charger des données non incluses dans la page. Tout est parti de la classe JavaScript 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 page devient 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 XMLHttpRequest pour 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 poursuit son processus et affiche la réponse quand elle se présente. 756 • Double Poche CSS
  7. Le JavaScript Le nom de chaque propriété est écrit à la manière JavaScript. Ainsi font−size devient fontSize, et background−color, backgroundColor, etc. Voici une liste d’instruments de musique : le violon le piano la guitare L’élément parent est la balise ul dont les enfants sont les balises li et les petits-enfants les nœuds texte de li, autrement dit leur contenu (le violon, le piano, la guitare). b Figure 9.25 : Liste non ordonnée Ce modèle DOM permet d’identifier les nœuds ou balises et donc d’agir dessus individuellement ou collectivement en adressant une commande à tous les nœuds de même niveau ou à tous les descendants d’une balise. Ces commandes peuvent influer sur le contenu d’un nœud ou sa position d’une manière dynamique. Avec les CSS, il est possible de masquer un nœud ou de le transformer, ou encore de le faire apparaître par un événement comme :hover. b Figure 9.26 : Titre noir Double Poche CSS • 757
  8. 9 Les CSS se marient bien Grand titre Mettre le titre en orange b Figure 9.27 : Titre orange L’élément peut être désigné par son identifiant (getElementById), par la valeur de son attribut name (getElementByName) ou par le nom de sa balise (getElementByTagname). Ici, le fait d’appuyer sur le bouton colorie le titre en orange sans que la page n’ait besoin d’être rechargée. Test En noir et blanc 758 • Double Poche CSS
  9. Le JavaScript b Figure 9.28 : Noir et blanc Ce bouton permet de rendre un site plus lisible en ce sens qu’il affecte un fond blanc et des caractères noirs à la page. Le premier élément body ([0]) est visé. La méthode setAttribute() donne une valeur à un attribut ou une propriété. function changeStyle() { c = document.getElementById("cellule"); c.style.width = "250px"; } C’est la cellule Ici on insère une propriété width avec getElementById() et la fonction comprend deux lignes de code. Il est même possible de remplacer du texte dans la page, toujours sans la recharger. Dans le petit programme suivant, une question est posée et la réponse donnée via le menu déroulant du formulaire déclenche, par l’événement onChange, l’exécution de la fonction. Selon la réponse, la page affiche "Encore une fois !" ou "Bravo !" et le changement se fait à vue. b Figure 9.29 : Mauvaise réponse Double Poche CSS • 759
  10. 9 Les CSS se marient bien Test Quelle est la couleur de l’océan ? ça dépend! Choisissez Blanc Noir Rouge Bleu Jaune b Figure 9.30 : Bonne réponse 760 • Double Poche CSS
  11. Le JavaScript Toutes ces applications sont du DHTML utilisant le JavaScript et le DOM et parfois les CSS comme dans les menus dynamiques. Un menu dynamique m Figure 9.31 : Listamatic Vous pouvez réaliser facilement un menu en allant sur des sites comme http://css.maxdesign.com.au/listamatic/, qui présente toutes les façons de créer un menu dynamique, ou www.accessify.com/tools- and-wizards/developer-tools/list-o-matic/, qui génère le code d’un menu dynamique à partir d’un formulaire et de quelques choix de types de menus. Les possibilités vont du menu simple, avec juste un :hover au passage de la souris, au menu dynamique, qui s’enroule et se déroule, parfois avec l’aide du JavaScript (voir Figure 9.32). Voici un menu en cascade que le site www.ibilab.net propose sur sa page www.ibilab.net/webdev/exemples/menuencascade-exemple2 .htm. Ce menu a été adapté et implémenté sur le site biobearn.com par la graphiste Isabelle Godard (www.godarisa.com) (voir Figure 9.33). Double Poche CSS • 761
  12. 9 Les CSS se marient bien m Figure 9.32 : Accessify m Figure 9.33 : Ibiliab 762 • Double Poche CSS
  13. Le JavaScript Ce menu utilise du JavaScript et la propriété display avec les valeurs none et block pour afficher ou masquer le contenu des menus. Ces derniers sont placés horizontalement et déroulés verticalement. m Figure 9.34 : Godarisa Dans ces menus, on utilise le DHTML, le HTML dynamique composé de CSS, 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 seconde par le biais de l’identifiant de l’élément.
  14. 9 Les CSS se marient bien } } } } function setHover(){ LI = document.getElementById(’menu’) .getElementsByTagName(’li’); nLI = LI.length; for(i=0; i < nLI; i++){ LI[i].onmouseover = function(){ hover(this); } LI[i].onmouseout = function(){ hover(this); } } } function MM_swapImgRestore() { //v3.0 var i,x,a=document.MM_sr; for(i=0;a&&i
  15. Le JavaScript
  16. 9 Les CSS se marient bien height="35" hspace="0" vspace="0" border="0"> Implantations Pr&eacute;sentation Promos Services La feuille de style joue sur le pseudo-élément :hover qui est relayé par l’é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 766 • Double Poche CSS
  17. Le JavaScript ul#menu li ul{ display:none; } ul#menu li:hover ul{ display:block; } ul#menu{ margin:0px; padding:0px; list-style:none; float:left; font:small Arial; } ul#menu li{ 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; } Double Poche CSS • 767
  18. 9 Les CSS se marient bien ul#menu li a{ display:block; color:#339999; text-decoration:none } ul#menu li a:hover{ color:#CC6699; } ul#menu ul{ position:absolute; background:#CCFFCC; list-style:none; margin:0px; padding:0px; width:140px; z-index:1; } ul#menu ul li{ position:relative; float:none; margin:0px; padding:0px; _display:inline; } ul#menu ul li a{ display:block; margin:0px; padding:0px; border:none; } ul#menu ul li a span{ display:block; padding:1px 1px; border:none; cursor:hand; } ul#menu ul li a:hover span{ color:#CC6699; border:none; } .fondmenu { background-color: #ccffcc; 768 • Double Poche CSS
  19. Le PHP background-image: url("images/menu/menu_fond.gif"); background-repeat: no-repeat; } Un jour peut-être, il sera possible de créer ce genre de menu déroulant, au-dessus de la page, uniquement à l’aide des CSS, sans aucun apport d’autre langage. 9.2 Le PHP Le PHP est principalement un langage de script qui est mélangé au code HTML pour exécuter des commandes avant que le fichier HTML soit pré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 tout cela est que tout le contenu de la page est du HTML, n’importe quel navigateur peut l’interpréter. D’autres langages de script existent, comme ASP, JSP mais PHP est un langage open source simple d’approche, avec des développements qui permettent une grande souplesse dans des situations inédites. À l’instar de Java, il intègre la programmation objet et, comme il est beaucoup diffusé, de nombreux outils PHP particulièrement bien adaptés pour le Web sont développés. Comme il est gratuit, quasiment tous les hébergeurs web le propose. Le PHP est fondé sur les phrases, à la manière d’un langage naturel. Le type par défaut est string (voir Figure 9.36). Sans hébergeur, il est possible d’installer l’application EasyPHP. La procé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’administration PHPmyAdmin. Sous Windows, vous avez déjà un serveur web installé : IIS. Si vous rencontrez un problème pour afficher la page d’accueil d’EasyPHP, c’est souvent à cause d’un conflit avec IIS, le serveur de Windows. Il suffit alors de le désactiver. De même, des logiciels pare-feu comme ZoneAlarm, par ailleurs utiles, peuvent empêcher l’accès à la page du logiciel d’administration de la base MySQL, PHPmyAdmin. Dans la plupart des cas, EasyPHP ne pose aucun problème. Double Poche CSS • 769
  20. 9 Les CSS se marient bien m Figure 9.36 : EasyPHP Ma page Ouvrez votre traitement de texte ou d’édition de code. Entrez les balises obligatoires . À l’intérieur, ajoutez les balises qui com- posent les deux parties d’une page : l’en-tête et, au- dessous, les balises . Vous obtenez une page blanche. Maintenant, ajoutez un titre dans les balises , qui appa- raîtra comme une enseigne dans l’en-tête du navigateur : Le club. La page est encore vide. Vous allez vous présenter. Entre les balises , écrivez je m’appelle. Saisissez maintenant votre premier code PHP. Le code PHP doit être entouré des balises (ou parfois ou ). Avant la balise , insérez votre première variable. 770 • Double Poche CSS
Đồng bộ tài khoản