Langages Et Outils de L'environnement Web

SUPPORT STAGIAIRE
LANGAGES ET OUTILS DE L'ENVIRONNEMENT WEB
SOMMAIRE
LES TAPES CLS DES TECHNOLOGIES DU WEB..........................................7
1. 2. INTRODUCTION ....................................................................................................................... 7 LE DEBUT DU WEB STATIQUE - 1990 .................................................................................. 7 2.1. Naissance de larchitecture client-serveur ........................................................................ 7 2.2. Bases du principe de fonctionnement client - serveur...................................................... 7 2.3. limites du web statique...................................................................................................... 8 LE WEB ORIENTE CLIENT - 1995 .......................................................................................... 8 3.1. Une recommandation et deux nouveaux langages .......................................................... 8 3.2. Fonctionnement des sites interactifs ct client ............................................................... 9 3.3. Limites du web orient client ............................................................................................ 9 LE WEB ORIENTE SERVEUR - 2000 .................................................................................... 10 4.1. Architecture trois tiers ..................................................................................................... 10 4.2. Fonctionnement des sites web dynamiques................................................................... 11 4.3. Limites du web orient serveur ....................................................................................... 11 LE COMPROMIS CLIENT - SERVEUR - 2005 ...................................................................... 12 5.1. Applications riches (RAI)................................................................................................. 12 5.2. Fonctionnement des applications riches......................................................................... 13
3.
4.
5.
LES FONDEMENTS DU WEB STATIQUE...........................................................14

1. 2. LES TECHNOLOGIES DE BASE........................................................................................... 14 1.1. introduction ..................................................................................................................... 14 LES PROTOCOLES DE COMMUNICATION DU WEB ......................................................... 14 2.1. Les rgles du TCP/IP...................................................................................................... 14 2.2. Le protocole HTTP.......................................................................................................... 15 2.3. Le CGI............................................................................................................................. 16 LE NAVIGATEUR OU LE CLIENT ......................................................................................... 17 3.1. Gnralits...................................................................................................................... 17 3.2. Le plug-in firebug de Firefox ........................................................................................... 18 LHYPERTEXT MARKUP LANGUAGE - HTML .................................................................... 19 4.1. Introduction ..................................................................................................................... 19 4.2. Le langage HTML ........................................................................................................... 21 LE SERVEUR WEB ................................................................................................................ 24 5.1. Gnralits...................................................................................................................... 24 5.2. Fonctionnement dApache .............................................................................................. 26 5.3. Installation dApache....................................................................................................... 27 5.4. Installation dun site statique sur Apache local............................................................... 28 5.5. Analyse dune transaction HTTP avec firebug ............................................................... 29 LES LIMITES DU WEB STATIQUE ....................................................................................... 30
3.
4.
5.
6.
LE WEB ORIENTE CLIENT .................................................................................31

1. 2. LES TECHNOLOGIES DE BASE........................................................................................... 31 1.1. Introduction ..................................................................................................................... 31 LA RECOMMANDATION DOM .............................................................................................. 31
page 3
2.1. 2.2. 2.3. 3.
Gnralits ...................................................................................................................... 31 Larbre DOM et les mthodes avec firebug..................................................................... 32 La navigation dans larbre DOM...................................................................................... 33
LES LANGAGES JAVASCRIPT, JSCRIPT, ECMASCRIPT ................................................. 34 3.1. Un langage orient objet cot client................................................................................ 34 3.2. Insertion du javascript dans la page html........................................................................ 34 3.3. Les botes de dialogue .................................................................................................... 37 3.4. La programmation avec javascript .................................................................................. 39 3.5. La technologie objet dans la page web........................................................................... 44 LE LANGAGE DES FEUILLES DE STYLE (CSS) ................................................................. 45 4.1. Gnralits ...................................................................................................................... 45 4.2. Ecriture et syntaxe des rgles css .................................................................................. 47 4.3. Le formatage par style dun ensemble de pages ............................................................ 47 4.4. Les classes pour une discrimination des mmes balises ............................................... 49 LE DHTML DYNAMIC HTML ............................................................................................... 51 5.1. Gnralits ...................................................................................................................... 51 5.2. Principe des couches ou calques.................................................................................... 51 5.3. Majax au cur de lelectronique ..................................................................................... 53 5.4. Multiplication des actions sur un vnement .................................................................. 54
4.
5.
TRANSFERT DE DONNES CLIENT - SERVEUR ............................................. 56

1. LE FORMULAIRE.................................................................................................................... 56 1.1. Gnralits ...................................................................................................................... 56 1.2. Un formulaire en direct .................................................................................................... 57 LA TRANSMISSION DES DONNEES .................................................................................... 57 2.1. Schma du mecanisme de transfert des saisies ............................................................ 57 2.2. Le contrle des zones de saisies du formulaire .............................................................. 60
2.
LES FONDEMENTS DU WEB ORIENTE SERVEUR .......................................... 64

1. 2. UNE EVOLUTION STRUCTURELLE DES SERVEURS WEB .............................................. 64 1.1. Gnralits ...................................................................................................................... 64 LINTERFACE CGI .................................................................................................................. 64 2.1. Gnralits et fonctionnement ........................................................................................ 64 2.2. Installation de Perl........................................................................................................... 67 2.3. Structure dun script CGI ................................................................................................. 68 2.4. Premier script cgi............................................................................................................. 69 2.5. Le traitement des donnes.............................................................................................. 70 2.6. Le module CGI.pm .......................................................................................................... 74 LES SSI (Server Side Includes) ............................................................................................ 78 3.1. Gnralits ...................................................................................................................... 78 3.2. Fonctionnement des ssi .................................................................................................. 78 3.3. Configuration du serveur pour ssi ................................................................................... 79 3.4. Des commandes serveur dans la page........................................................................... 81 PHP UN LANGAGE SERVEUR .............................................................................................. 83 4.1. Gnralits ...................................................................................................................... 83 4.2. Le langage....................................................................................................................... 84 4.3. Installation de PHP5 et configuration dApache .............................................................. 85 4.4. Exploiter un formulaire avec php..................................................................................... 86
3.
4.
LA PLATE-FORME DE DEVELOPPEMENT WEB.............................................. 87
page 4
1.
LA PLATE-FORME WAMPSERVER ..................................................................................... 87 1.1. Gnralits...................................................................................................................... 87 1.2. Architecture de wamp ..................................................................................................... 87 1.3. Installation de WAMP...................................................................................................... 88 1.4. Connexions aux bases de donnees MySQL .................................................................. 91 1.5. Les bases de donnes MySQL....................................................................................... 93
LES FONDEMENTS DU WEB 2.0......................................................................103

1. LES TACHES PARTAGEES ................................................................................................ 103 1.1. Gnralits.................................................................................................................... 103 1.2. Le concept AJAX .......................................................................................................... 103 1.3. Une application sans rechargement de la page ........................................................... 104
LE STANDARD DECHANGE ............................................................................105

1. LE METALANGAGE XML .................................................................................................... 105 1.1. Gnralits.................................................................................................................... 105 1.2. Des outils pour des classes de documents .................................................................. 105 1.3. Un document xml conforme.......................................................................................... 106 1.4. Des applications pour le traitement ou l affichage ....................................................... 107
DES OUTILS POUR LE WEB ............................................................................110

1. SYSTEMES DE GESTION DE CONTENU (sgc cms) ...................................................... 110 1.1. Les outils de site Web de type ditorial ........................................................................ 110 1.2. Le principe de base....................................................................................................... 110 1.3. Le blog WordPress ....................................................................................................... 111
page 5
Les tapes cls des technologies du WEB
LES TAPES CLS DES TECHNOLOGIES DU WEB

1. INTRODUCTION
Depuis le dbut de lInternet, les technologies directement associes nont cess de se dvelopper et dvoluer sous les exigences des utilisateurs et du trafic sans cesse croissant. Lvolution sest faite par tape denviron cinq ans, temps qui semble ncessaire pour que toutes les parties impliques (W3C, entreprises, dveloppeurs, internautes) prennent la pleine mesure des limites des technologies existantes et se donnent les moyens de les repousser. Cela sest fait tour tour en exploitant des technologies mergentes, en ditant de nouvelles recommandations ou en rpondant aux nouveaux besoins par des outils et des langages plus adapts.
2. 2.1.
LE DEBUT DU WEB STATIQUE - 1990 NAISSANCE DE LARCHITECTURE CLIENT-SERVEUR
Les premiers sites se limitaient un ensemble de pages html enregistres sur un serveur, des liens hypertextes assurant la navigation entre elles. Pour raliser cette navigation, des rgles de communication sont utilises entre le serveur et le client: le HTTP (HyperText Transfert Protocol. Le client appel aussi le navigateur est install sur un poste indpendant connect lInternet. Il est linterprteur du langage html dont sont composes les pages. Son rle se limitait laffichage de simples textes et de quelques images, pas trop lourdes, pour la fluidit de la navigation.
2.2.
BASES DU PRINCIPE DE FONCTIONNEMENT CLIENT - SERVEUR
Le client adresse une requte http au serveur sous une forme bien prcise (par exemple : protocole://nom de domaine/nom de page.html) dite URL (Uniform Resource Locator). Lorsque le serveur reoit cette requte, il cherche la page parmi celles qui composent le site et la renvoie au client sous la syntaxe html. Le code est rceptionn, interprt et affich par le navigateur.
Langages et outils de l'environnement Web
page 7
2.3.
LIMITES DU WEB STATIQUE Sous cet environnement, la seule interactivit possible est donne par lhyperlien lors de son activation. Elle se limite laffichage dune nouvelle page. Dans ce contexte, est apparu trs vite le besoin de technologies complmentaires pour rpondre plus dinteractivit, produire des effets visuels et dsengorger les rseaux. En effet, le cycle de traitement des hyperliens est long et fastidieux entranant une perte de ractivit des applications. De plus, le succs sans cesse croissant de ce nouveau mode de communication engendrait un trafic en perptuelle augmentation rvlant des serveurs et un rseau sous dimensionns. Ainsi pour rpondre aux besoins du trafic et de la ractivit les efforts technologiques ont port sur lamlioration de la capacit de transfert de donnes, lamlioration des PC et lexploitation dune nouvelle recommandation du W3C, le DOM (Data Objet Model). Cette dernire visant apporter plus dinteractivit et en mme temps limiter les communications entre client et serveur en transfrant une partie du dveloppement sur le poste client.
3. 3.1.
LE WEB ORIENTE CLIENT - 1995 UNE RECOMMANDATION ET DEUX NOUVEAUX LANGAGES Larchitecture client serveur ne change pas, par contre le client senrichit dune recommandation du W3C, dun langage de programmation pour exploiter cette recommandation et dun langage de feuille de style pour rationaliser la prsentation des pages html et rpondre la rgle de sparation des donnes et du formatage. La recommandation concerne le DOM. Elle commande aux diteurs de navigateurs de faire en sorte que tous les lments dune page marque au sens des langages de marquage (html, xml,) ; soient traduits par le navigateur en objets identifis dans le cache de lordinateur et que des mthodes soient mises disposition pour accder ces objets en vue de changer leurs proprits. Ainsi, par le biais dun vritable langage de programmation, interprt par le navigateur, souvre la possibilit dinteractivit, deffets visuels et dutiliser de vritables applications sur le poste client. Le langage de programmation est lECMAScript, standard europen, cens tre adopt par les diteurs de navigateurs. Il dispose dune bibliothque vnementielle, offrant aux dveloppeurs de grandes possibilits de mettre en place des effets visuels, et rendre les applications conviviales en fonction de la raction des utilisateurs.
page 8
Le langage de prsentation est le langage de feuille de style CSS (Cascading StyleSheet), pour rpondre la sparation des donnes et du formatage dans un but douvrir linterconnexion des donnes entre applications et leur rutilisation. Cest le navigateur qui volue considrablement en intgrant ces technologies. Il se conforme une recommandation et senrichit de deux nouveaux interprteurs, un pour le langage de programmation, lautre pour le langage de style.
3.2.
FONCTIONNEMENT DES SITES INTERACTIFS CT CLIENT
Les pages qui composent les sites interactifs ct client contiennent des lignes de codes javascript dans la page html. Le langage a t cr pour tre utilis ainsi. Notons que ces scripts sont simples mettre en uvre (criture dans la page html), ne ncessitent pas de configuration spcifiques du serveur, et sont trs ractifs puisque excuts en local. A la suite dune requte (demande de page) au serveur, une page contenant un script est retourne au navigateur comme dans le cas de lchange prcdent concernant les sites statiques. Le navigateur interprte le code html et le code javascript quand lvnement survient. 3.3. LIMITES DU WEB ORIENT CLIENT
Ces technologies dvelopper et mettre en place devaient dlester le serveur de certaines tches notamment celles dune partie du contrle des formulaires. Le navigateur devant assurer le travail, les principaux constructeurs (Microsoft et sun) sattachent intgrer les nouvelles technologies sans concertation, chacun implmentant son propre langage (JavaScript pour Nestcape et JScript pour Microsoft) malgr ldition dun standard (ECMAScript) du W3C. Il sensuit bien videmment des incompatibilits daffichages entre navigateurs et lobligation pour les dveloppeurs de procder un double dveloppement des pages. Plus grave, ces nouvelles technologies fragilisent la scurit des utilisateurs. Ainsi apparat dans les navigateurs une fonction de dsactivation des scripts pour lever leurs craintes. L encore les dveloppeurs devaient prendre en compte le fait de cette dsactivation et crer aussi une version dgrade de la page (version sans script).
page 9
De plus, des socits ont dvelopps des programmes propritaires (applets Java, ActiveX, Flash) sexcutant par le biais du navigateur mais ncessitant dans la plupart des cas le chargement de plug-in (extension du navigateur). Le Web disposait alors dune mosaque de technologies ct client avec un manque de standardisation, une incompatibilit des navigateurs et surtout des risques pour la scurit des utilisateurs. Lamlioration des technologies de transfert (ADSL), de la capacit de communication des PC, des possibilits des serveurs ont progressivement conduit les dveloppeurs migrer leurs applications cot serveur pour contourner les difficults issues du modle orient client.
4. 4.1.
LE WEB ORIENTE SERVEUR - 2000 ARCHITECTURE TROIS TIERS La migration va bouleverser dun point de vue structurel les sites et voir lmergence de langages serveurs comme PHP, Java, Python... Larchitecture du serveur va aussi se complexifier en raison de lusage des nouveaux langages et de leur interprteur. Par contre les pages Web adresses au client sont traduites sans problme par les navigateurs puisque composes que de code html. Ces langages serveurs disposent aussi de fonctions puissantes pour raliser des connexions aux bases de donnes et rcuprer des donnes correspondant des requtes prcises en langage SQL. La page html est produite la vole et rpond exactement la demande du client. Ainsi souvrent des possibilits jusqu lors inconnues de ce qui est baptis site Web dynamique .
page 10
Larchitecture bipolaire Client Serveur devient une architecture trois tiers : Client-ServeurServeur de bases de donnes. Ce nouvel environnement va permettre de produire des modles de pages dont le contenu change en fonction de la demande. L encore une rvolution pour les dveloppeurs. Par exemple une mme page de description technique pour les pices dun catalogue dont le contenu sadapte en fonction de la pice choisie en rfrence 4.2. FONCTIONNEMENT DES SITES WEB DYNAMIQUES
Les pages qui composent les sites dynamiques ct serveur regroupent le marquage html et la syntaxe du langage serveur (PHP, Java, Perl). Lassociation de ces codes dans la page est trs souple et parfaitement identifie, limage de ce qui se faisait sur le poste client avec javascript. Notons qu linverse de lexcution du script ct client, dans ce cas le script est excut par linterprteur sur le serveur. Ce dernier donc besoin dtre configur pour lancer linterprteur du langage utilis quand cest ncessaire. A la suite dune requte, gnralement envoye par le biais dun formulaire afin de personnaliser la demande, le serveur identifie lapplication vise (par exemple en identifiant lextension de lapplication sil sagit de php) et lance linterprteur (Prprocesseur PHP) pour que celui-ci excute le traitement et recompose une page html ladresse du client. 4.3. LIMITES DU WEB ORIENT SERVEUR
Malgr lapport positif de larchitecture trois tiers et une plus grande scurit pour les utilisateurs, lutilisation intensive des technologies serveurs prsente aussi des inconvnients. En effet, un grand nombre de requtes aboutit un engorgement des rseaux et un ralentissement de la ractivit des applications. En effet, La ractivit dun script ct serveur un vnement ncessite lenvoi dune requte au serveur, son excution par linterprteur sur le serveur, le retour de la rponse par le rseau, son chargement et son affichage par le navigateur. Rien de comparable avec lexcution dun script javascript qui se fait en local. Notons enfin que lors dune requte, lordinateur du client est plac en attente de la rponse et que le plus souvent un flot important dinformations redondantes y sont contenues, ralentissant dautant la procdure de transfert et le chargement. Heureusement, bien que des diffrences existent encore entre les navigateurs, les diteurs tentent de se rapprocher des standards prconiss par le W3C, ce qui tend diminuer les problmes dincompatibilit. De plus la valeur ajoute des applications clients et une plus grande fiabilit des pare-feux et autres anti-virus ont progressivement annihils les craintes des utilisateurs qui ne dsactivent plus les scripts. Ces volutions ont permis une ventilation des applications en raffectant une partie des tches au client. Il sensuit un allgement de la charge de transfert sur le rseau et une amlioration de la ractivit des applications.
page 11
5. 5.1.
LE COMPROMIS CLIENT - SERVEUR - 2005 APPLICATIONS RICHES (RAI) Les applications quitablement rparties entre client et serveur ont permis de normaliser lemploi de la recommandation DOM et des langages HTML, JavaScript, et CSS, par ailleurs fortement conseills pour laccessibilit des agents utilisateurs notamment les appareils ddis aux handicaps. Pour palier aux inconvnients dcrits prcdemment sur le blocage des applications en attente de rponse et lenvoi dinformations redondantes, de nouvelles technologies ont vu le jour comme AJAX (Asynchronus Javascript And Xml) ou les applications java dployes sur le net. Les solutions se basent sur la technologie objet en permettant denvoyer une requte en tache de fond sans bloquer lapplication client en attente de la rponse. Par exemple la technologie AJAX utilise lobjet XMLHttpRequest. Ainsi les applications deviennent plus souples et plus ractives. Les applications Internet Riche (RIA Rich Internet Application) sont des applications qui exploitent ces technologies et qui permettent de disposer en ligne des mmes services quune application de bureau. Elles dploient un nouveau mode de transfert des donnes entre client et serveur : le mode asynchrone. Lchange est considrablement rduit puisquil ne concerne que les donnes et la ractivit de lapplication sen trouve renforce.
page 12
5.2.
FONCTIONNEMENT DES APPLICATIONS RICHES
Une application riche se compose dune page html regroupant du marquage html et des scripts javascript qui sont chargs lors de linterprtation par le navigateur en attente de lvnement. Parmi ces scripts, celui quon nomme le moteur dAJAX, habilit grer les requtes en tache de fond suivant lvnement. Quand lvnement se produit, il envoie une requte par le biais de lobjet XMLHttpRequest au serveur qui lance lapplication (par exemple une application PHP). Lapplication rcupre les donnes et les retourne au navigateur au format texte (txt, xml, html, JSON) dans le mme objet. Le script semploie rcuprer la rponse dans lobjet et placer les nouvelles donnes dans la page. En mode asynchrone, la tche est transparente pour lutilisateur qui na pas le blocage en attente de rponse.
Remarque :
Plus une volution quun concept, les applications riches (Rich Internet Application - RIA) sont les termes utiliss pour qualifier les nouveaux types dinterface, dergonomie et dusage sur internet. Cela englobe des notions trs diffrentes que ce soit les plates-formes sur lesquelles les services sont dvelopps, les technologies utilises (langages) pour les applications ou encore les designs des interfaces. Lobjectif de cette volution est rendre la navigation plus conviviale et intuitive. Aujourdhui, la forme dun site et son utilisation deviennent deux lments essentiels dans la conception dapplication web. Les RIA offrent de nouvelles possibilits, notamment la dcentralisation des donnes en ligne ce qui permet denvisager de nouvelles utilisations du web, par exemple : la retouche photo, le mixage vido ou toutes les manipulations de contenu riche travers un site internet. Les pages web deviennent de vritables logiciels, quelles soient charges dun ordinateur ou dun mobile et permettent de manipuler nativement des vidos, effectuer des glisser - dplacer , stocker des donnes en local, diter directement le contenu dun blog, Les principaux acteurs du march sur ces RIA sont Adobe, Microsoft et Mozilla qui ont dvelopps chacun des technologies propres et non inter oprables. Adobe base sa solution autour de Flash, Mozilla se conforme aux recommandations du web et au standard XML pour dcrire des interfaces riches travers la technologie XML et Microsoft dveloppe un plugin pour navigateur appel Silverlight (comparable Flash).
page 13
les fondements du web statique
LES FONDEMENTS DU WEB STATIQUE

1. LES TECHNOLOGIES DE BASE
1.1. INTRODUCTION Laccs sans borne aux informations du monde repose sur des rgles de communication (TCP/IP, HTTP,) pour le transport et lchange de donnes, un langage de marquage (lHyperText Markup Language -HTML) pour le transfert dinformation et un interprteur du langage (le navigateur) pour traduire et afficher les informations.
2.
LES PROTOCOLES DE COMMUNICATION DU WEB
Les protocoles dfinissent comment les choses doivent se passer pour quun dispositif informatique communique sur un rseau. 2.1. LES RGLES DU TCP/IP
Le protocole TCP/IP (TCP - Transfer Control Protocol et IP - Internet Protocol) est une suite de logiciels permettant de connecter entre eux les diffrentes composantes informatiques des entreprises, des administrations, des universits et des ordinateurs de particuliers en rseaux mondiaux interconnects. Il a t conu de faon tre indpendant de tout systme dexploitation et de toute plate-forme. Il regroupe lensemble des rgles de communication pour lacheminement des donnes et la reconnaissance de cibles. La technologie TCP concerne lacheminement des donnes alors que IP concerne le mode dadressage. Ce dernier est bas sur un format dadresse numrique pour identifier de manire unique chaque ordinateur du rseau. Il se compose de 4 chiffres la suite compris entre 0 et 255. La partie droite des chiffres identifie lhte, la partie gauche le rseau. On distingue alors trois classes de rseaux la classe A (3 premiers chiffres), la classe B (6 premiers chiffres), la classe C (9 premiers chiffres).
page 14
2.2.
LE PROTOCOLE HTTP
Paralllement au protocole TCP/IP, navigateurs et serveurs utilisent des rgles spcifiques pour communiquer entre eux : le HTTP (HyperText Transfer Protocol). Ce protocole permet de lancer une requte du navigateur vers le serveur et de lancer une application sur le serveur. Aprs traitement, le serveur retourne le rsultat de la requte. Dans cette procdure dchange normalise, navigateur et serveur construisent une chane denvoi dinformations comprenant trois parties : La ligne de requte ou la ligne de rponse La section den-tte (groupant des informations caches sur le client ou le serveur) Le corps de rponse ou denvoi
La description mme de cette transaction distingue deux entits : le poste client et le serveur do la terminologie client - serveur . Le poste client (navigateur) est habilit traduire et envoyer les requtes au serveur en sappuyant sur un standard et en retour, interprter les rponses du serveur (en gnral des pages html). Le serveur ralise, au moins trois oprations, la rcupration et linterprtation de la requte, le lancement de lapplication (sil y a lieu), la construction et lenvoi de la rponse.
page 15
2.3.
LE CGI
Le CGI reprsente une procdure dchange normalise entre le client et le serveur. Elle regroupe une srie de conventions toutes prises en charge par le navigateur et permettant ce dernier de communiquer avec le serveur Web et de lancer des applications distance. Linterface CGI (Common Gateway Interface) est la plate-forme dominante pour construire des applications Web interactives. Elle a t mise en place sur lun des premiers serveurs dapplication (NCSA HTTPD). Sa simplicit et la mise disposition libre de son code, en ont fait (1994) un standard de limplmentation dapplications Web. Depuis lors, dautres mthodes de dveloppements dapplications Web on vu le jour, comme Active Serveur Page (ASP) de Microsoft, Allaire Cold Fusion, PHP, Servlets JAVA, . 2.3.1. LE FONCTIONNEMENT Un programme CGI sexcute sur le serveur (Apache), en rponse la requte dun client (navigateur). Son lancement se ralise laide dun lien excutable (URL longue) par le biais dun formulaire. Il est suivi de lexcution dune application, puis du renvoi au client dune page HTML construite la vole, sans tre stocke dans un fichier. Le programme CGI fournit un en-tte pour que le navigateur puisse identifier le contenu du document, retourn sous ltiquette "Content-type".
Remarque :
Dans une transaction http "client-serveur" un certain nombre dinformations invisibles sont changes entre le serveur et le navigateur, comme len-tte retourn par tout programme CGI. Il indique au navigateur, le type de transaction, la date, le nom et la version du serveur, ltat de la connexion, comment traiter le contenu du document retourn La ligne den-tte fournie sous ltiquette Content-type par le programme CGI, permet au navigateur didentifier le document retourn. Par exemple, pour du code html, linformation produite est : content-type :text/html 2.3.2. LEMPLACEMENT DES SCRIPTS CGI Lors de lenvoi dune requte par un lien excutable, le serveur reconnat le script CGI et lexcute automatiquement, il est configur par dfaut pour cela. Dans le cas dun serveur Apache, le rpertoire "cgi-bin" regroupe tous les scripts CGI. Ainsi, toute requte dun client sur un fichier de ce rpertoire est interprte par le serveur comme une demande dexcution dun programme CGI. Dune manire gnrale, les informations ddies un programme CGI sont rassembles dans des formulaires HTML, puis encodes par le navigateur lors de lenvoi, sous forme dune chane de caractres dite "chane de requte". Dans le cas de la mthode GET, cette dernire est ajoute la suite du lien excutable
page 16
aprs un point dinterrogation et dirig vers linterface CGI. Dans la mthode POST la chane de requte est place dans la partie cache de la chane et vhicule vers lentre standard du serveur. 2.3.3. LES LANGAGES DCRITURE DES SCRIPTS CGI Tout langage capable de gnrer une sortie standard peut tre utilis pour crire des scripts CGI. Sur un environnement UNIX, on pourra utiliser les langages C, Fortran, Perl, Tcl. Sur un environnement Windows-NT, on utilisera Visual C++, Visual Basic. Sur un environnement MacIntosh, Apple Script, Le langage le plus rpandu du monde UNIX est Perl. Il se prte particulirement bien au script CGI. Son inconvnient majeur est dtre un programme interprt (de ce fait, davoir besoin dun interprteur) et doffrir un niveau de scurit moindre quun langage compil (Ex : C). Ses avantages sont de disposer dun grand nombre de bibliothques (module "CGI.pm") et dune multitude de programmes librement interchangeables sur Internet, facilitant et allgeant lcriture des scripts. Notons que le module "CGI.pm" associ linterprteur, facilite les oprations de conversion de donnes dentre en donnes Perl et de gnration du code HTML.
Remarque :
Les langages C et Java sont aussi parfaitement adapts lcriture de scripts CGI. Il sagit de langages compils, pouvant gnrer des fichiers directement excutables. Toutefois, ces langages sont plus compliqus mettre en application dans le dveloppement et plus difficile dboguer quun langage interprt. Les avantages rsident dans la performance, la scurit et laptitude aux multi-tches.
3. 3.1.
LE NAVIGATEUR OU LE CLIENT GNRALITS
Le navigateur, un outil indispensable pour naviguer sur le Web. Il est linterprteur du langage html. Sans lui pas de dcodage des pages envoyes par le serveur, pas daffichage et encore moins de prsentation. Au fil des annes, il volue limage des technologies lies au Web sous la pression des utilisateurs. Au dpart simple interprteur du seul langage html, il intgre aujourdhui des outils permettant dexcuter des scripts javascript, de prsenter des pages formates par feuille de style CSS ou XSLT, de vrifier les rgles syntaxiques des documents xml, de mettre en uvre la technologie objet Il est un outil puissant pour interprter mais aussi pour communiquer avec le serveur. En effet il prend en charge la normalisation de la chane requte de manire transparente pour lutilisateur.
page 17
Cet outil a pourtant un inconvnient majeur, son manque de standardisation. En effet produit sur un march libre, il souffre de la concurrence des deux principaux acteurs du Web en matire de navigateur, Sun et Microsoft. Malgr des efforts de normalisation vers un standard ces dernires annes, on peut encore constater que des incompatibilits subsistent entre les deux principaux outils que sont Mozilla (Sun) et Internet explorer (Microsoft). 3.2. LE PLUG-IN FIREBUG DE FIREFOX
Un certain nombre doutils intgrer au sein du navigateur peuvent tre employs pour aider les utilisateurs dans le dveloppement, lanalyse de transaction HTTP, le dboguage de scripts Ces outils se prsentent sous la forme de programmes charger (plug-in), mis disposition en gnral sur le site de lditeur. Lun des plus utilis est le plug-in "firebug" du navigateur Firefox. Il permet danalyser une transaction HTTP ou encore dexploiter les mthodes du DOM notamment pour la mise au point de scripts javascript. 3.2.1. INSTALLATION DE FIREBUG "Ouvrir" le navigateur Firefox. Aller dans le menu "Outils" et activer la commande "Modules complmentaires". Dans la zone de recherche de linterface "Modules complmentaires" qui apparat indiquer firebug, puis valider. Aprs la recherche cliquer sur lhyperlien "voir les rsultats". Menu "Outils" commande "Modules complmentaires". Interface "Modules complmentaires", saisie Firebug.
La page daccueil des modules complmentaires de Mozilla-Firefox donne les rsultats de la recherche : cliquer sur le bouton Tlcharger Firebug. Page daccueil des modules complmentaires de Mozilla. Tlcharger Firebug.
page 18
puis louverture de linterface "installation du logiciel", cliquer sur le bouton "installer maintenant". Dans linterface "Installation dun logiciel", cliquer sur le bouton" installer maintenant".
4.
LHYPERTEXT MARKUP LANGUAGE - HTML
4.1. INTRODUCTION Le HTML est le langage utilis pour encoder les documents du World Wide Web .Il sagit du langage standard de mise en page et de liens hypertextes, interprt par le navigateur, quelque soit le systme dexploitation (DOS, Mac Intosh, UNIX, Windows, ). Il indique au navigateur de quelle manire le contenu dune page (images, textes, vido) doit tre affich et comment associer dautres pages par le biais de liens hypertextes. Le langage HTML dans sa version dorigine se limitait la cration de pages pour le transfert de textes et de quelques images, avec pour seul dynamisme les liaisons hypertextes. Ds 1999, avec la dfinition du langage XML, le W3C privilgie lchange de donnes entre agents utilisateurs en dsignant un successeur, le XHTML, et permettre linterconnexion des applications et des services c'est--dire la rutilisation des informations quelque soit le mdia. Dans sa premire version (XHTML 1.0), ce standard nest rien dautre quune adaptation de HTML en application XML 1.0, sans changement de syntaxe, ni apport de nouvelles fonctionnalits. Seule, la dclaration se modifie avec une premire ligne de page Web indiquant quil sagit dun document XML.
La dclaration du document XHTML
Entre cette partie et la page balise par llment html (dsormais nomme racine), sinscrit le prologue. Cest l que figure une succession de dclarations, appeles DOCTYPE, qui prcisent les lments et les entits figurant dans le document ainsi que lespace de noms. Il sagit de lidentifiant dun sous ensemble XML identifi. Ces informations sont ddies linterprteur de cette nouvelle page Web, c'est--dire le navigateur de tout agent utilisateur (mobile, portable, agenda lectronique, diffuseurs mdia pour handicap).
page 19
La dclaration est prise en compte par les navigateurs pour dclencher un contrle syntaxique et adapter les donnes lapplication.
Le prologue et la racine dun document XHTML
La version XHTML 1.1 est une reformulation plus stricte de la version 1.0. Elle prne la sparation des donnes et du formatage qui devient entirement gr par les feuilles de style. Certains lments et quasiment tous les attributs du HTML de base sont dclars obsoltes dans la cette version, notamment ceux ddis aux fonctions de prsentations. Le W3C entend avec cette avance largir la possibilit daccder Internet partir de tout terminal en particulier des mobiles. La version 1.1 sappuie sur une DTD centrale (celle de XHTML 1.0) autour de laquelle gravitent 28 modules pouvant la complter suivant le terminal vis. Sous cette forme modulaire, le dveloppeur construit ses pages en ne prenant que les modules dont il a besoin autour dun noyau central. Il cre un langage spcifique pour un agent utilisateur ddi.
Remarque :
Ces avances nont pas fait lunanimit des acteurs du Web qui, pousss par les entreprises ont souhait labandon de la norme XHTML 2.0 (vritable labyrinthe dont la normalisation tardait venir) et la mise en place dun nouveau standard HTML (version 5.0). Il prendrait en compte les nouvelles possibilits technologiques des mobiles et fixes en faisant des pages Web de vritables logiciels utilisant le moteur des navigateurs. Cette volution entrane le passage dun Web constitu de documents un Web constitu dapplications en ligne. Ces applications sont aujourdhui dveloppes partir dune mosaque de technologies propritaires (Framework, Ajax, Flash, Java, Silverlight, XML, ) souvent incompatibles. Il sagit pour le W3C de dfinir ce nouveau standard XHTML 5.0 pour viter les incompatibilits et donner un large accs aux tlphones portables de nouvelle gnration, aujourdhui principaux
page 20
agents utilisateurs dInternet.
En conclusion, lInternet riche est le mariage entre graphistes et dveloppeurs pour penser de nouveau usages du web. Toutefois, un certain nombre dinconvnients demeurent, comme par exemple changer les murs et habitudes de navigation ou installer des plug-in au sein des navigateurs. Le vritable dfi du W3C pour de HTML 5.0 est de trouver un vritable consensus des diteurs autour des technologies existantes. 4.2. LE LANGAGE HTML
HTML nest pas un langage au sens informatique du terme comme on lentend avec les langages JAVA, C++, javascript ou PHP. Il est un langage de marquage dont le rle principal est de distinguer des portions de texte, des titres, des paragraphes, des listes 4.2.1. STRUCTURE DUNE PAGE HTML La page HTML comprend deux parties (fig 4.2a), inclues dans un conteneur (balises ouvrante et fermante de mme nom) <html></html> : Len-tte dlimite par les balises <head></head>, dans laquelle sont dfinis des commandes et des paramtres stratgiques, non ddis laffichage (par exemple, la liaison une feuille de styles CSS ou les mta-informations). Aucune information daffichage ne doit apparatre dans cette partie Le corps dlimit par les balises <body></body> contenant linformation afficher, les images, le son, les liens hypertextes et aussi du code JavaScript et des balises de formatage
page 21
4.2.2. LA SYNTAXE HTML ET LE BALISAGE Chaque lment HTML est appel balise ou marqueur. Il est constitu dun nom prdfini (br pour un retour ligne, h1 pour un titre de premier niveau, ) encadr par deux dlimiteurs ouvrant (<) et fermant (>). La plupart des lments HTML vont par paire et sont constitus dune balise de dbut et dune balise de fin. Le principe du balisage tant de distinguer des portions de texte, ou des zones de la page Web et leur attribuer des proprits de formatage par le biais de feuille de style ou des proprits daction par le biais dun langage de script. La balise de fermeture se distingue de celle douverture par le signe (/) plac avant le nom. Par exemple : <h1> ceci est un titre de 1er niveau </h1> Limbrication des balises permet de personnaliser le formatage, toutefois, il doit suivre imprativement la rgle de fermer en premier les balises dernirement ouvertes . Il sagit dailleurs dune rgle syntaxique respecter pour le XHTML. Dans la balise douverture peut sinscrire un ou plusieurs attributs spars par un espace, respectant la syntaxe : Nom_d_attribut="valeur" Ce complment dinformation vise indiquer au navigateur un formatage spcifique par feuille de style (style="color:blue"), une adresse (href=http://www.w3c.org/) ou encore une gestion dvnement (onclick="document"). Certaines balises en nombre limit, ne possdent pas leur homologue de fermeture. Elles apparaissent comme des commandes daction directes pour le navigateur (Img pour limage, br pour le retour ligne, p pour le paragraphe ).
Remarque :
HTML 4.01 regroupe les spcifications les plus rcentes dites par le W3C. La plupart des navigateurs le prennent en charge presque totalement dans leur dernire version. Attention, toutefois les plus anciens ne reconnaissent pas toujours le standard (par exemple : la commande @import ou la liaison plusieurs feuilles de styles, ). Cependant, il existe des attributs et des balises propritaires chaque navigateur quil convient dviter pour crire les pages le plus universellement possible. On sattache vrifier la prise en charge des pages HTML par les deux principaux navigateurs savoir, Internet explorer et Mozilla ou Firefox .
page 22
4.2.3. LHYPERLIEN Parmi les lments HTML, lhyperlien est sans conteste celui qui a contribu pour une large part au succs dInternet. Sa syntaxe stablit comme suit :
Il sagit de la balise ouvrante et fermante "a", avec un contenu texte donnant une information sur la page qui sera charge si le lien est activ. A lintrieur de la balise ouvrante lattribut "href" indique le chemin de la page HTML rcuprer en gnral sur un site distant par le biais du protocole HTTP. 4.2.4. LA PAGE DACCUEIL DUN SITE "Ouvrir" dans lditeur de texte un modle de page html et lenregistrer sous "marmiton.html". En utilisant la convivialit des raccourcis offerts par lditeur de texte, concevoir la page regroupant un titre, deux traits, une image ("toque.bmp" dans le dossier image), le tout centr dans la page, puis une liste. Chaque lment de la liste est un hyperlien, associant le texte aux suivantes : "Pommes la moutardes" "Lasagnes de courgettes" "Paupiettes aux pruneaux " "Philtre dAmour" associe la page : associe la page : associe la page : associe la page : pages
recette_pomme.html recette_lasagne.html recette_paupiette.html recette_philtre.html
Les pages "recette_xxx.html" sont ralises et enregistres dans le rpertoire courant. Voir le rsultat attendu figure ci-dessous
page 23
4.2.5. PRSENTATION AMLIORE AVEC DU STYLE "Reprendre" dans lditeur de texte la page "marmiton.html". En utilisant le langage de feuille de style, amliorer la prsentation de la page pour conserver son intgrit de forme, quelque soit louverture de la fentre du navigateur. Voir le rsultat attendu figure ci-contre
5. 5.1.
LE SERVEUR WEB GNRALITS
Le serveur http est un logiciel servant des requtes respectant le protocole HTTP entre client et serveur. Un ordinateur sur lequel fonctionne un serveur http est appel serveur Web. Il y a deux sens communment admis aux termes de serveur Web : Le service : il concerne lhbergement des applications et des services auxquels le client accde par un navigateur (courrier lectronique, moteur de recherche, sites Internet, ) Lenvironnement : il sagit des composants logiciels regroups au sein du serveur pour excuter les applications et fournir les services. Cela
page 24
regroupe le systme dexploitation du serveur lui-mme et les diffrents interprteurs, compilateurs, moteurs dexcution et autres outils ncessaires pour excuter les scripts du langage serveur choisi pour raliser un site Web dynamique. Deux serveurs se partagent environ 90% des parts du march : Apache, serveur gratuit (environ 70% des parts de march fin 2008) et Microsoft (Personal Web Server et Internet Information Service), serveur payant. Le succs dApache est facilement comprhensible : il est gratuit, portable dune plate-forme lautre, complet, robuste et ses performances sont excellentes (site Apache : http://www.apache.org). De plus, le protocole TCP/IP fait partie de son noyau dexploitation.
page 25
Remarque :
Lhbergement sur un serveur personnel est une tche dlicate, car elle implique en particulier ladministration et la scurit du systme. Il est recommand dopter pour lhbergement Web auprs dentreprises spcialises et laisser les charges de gestion du systme lhte, mme si lespace doit tre lou. 5.2. FONCTIONNEMENT DAPACHE
Au dmarrage, Apache lit le fichier de configuration "httpd.conf". Les modifications de lignes dinstructions dans ce fichier conduit une modification du comportement du serveur. Par exemple, pour limiter laccs, spcifier les caractristiques avances (utilisation des SSI) ou indiquer le chemin de linterprteur de PHP. Ce fichier regroupe des instructions actives (non prcdes du signe #), des instructions dsactives et des commentaires (prcdes du signe #). Ainsi linsertion ou la suppression du #, permet dactiver tous les modules dont le serveur a besoin pour sa configuration. Cela comprend les spcifications daccs et de ressources (au sein du mme fichier). Une fois dmarr, le travail dApache est de se mettre lcoute des requtes, ladresse o il a t configur.
Remarque :
Apache excute automatiquement la page nomme index.html situe dans un rpertoire cibl par un lien http, cela afin de faciliter laccs la page daccueil dun site sans besoin de la nommer. Notons que le test de fonctionnement dApache en lanant la ligne de commande : http://localhost , renvoi la page index.fr, page daccueil du serveur qui se trouve dans le rpertoire htdocs (rpertoire cibl par dfaut dans la configuration dapache).
page 26
5.3.
INSTALLATION DAPACHE
Crer un rpertoire apache sous C:/ . 1- INSTALLATION DAPACHE "Ouvrir" le rpertoire "apachexecut" et lancer lexecutable : apache_2.0.43-win32-x86-no_ssl.exe Suivre les instructions en indiquant le moment venu, le rpertoire "C:/apache" comme rpertoire dinstallation et "localhost" comme nom de serveur et nom de domaine. 2- CONFIGURATION DAPACHE - Rcuprer dans lditeur de texte le fichier "httpd.conf" (ou http.conf suivant la version dapache) du rpertoire "conf" dapache. Vrifier (ou remplacer sil y a lieu) les lignes suivantes : Ligne ServerName conforme : ServerName localhost Ligne ServerAdmi conforme : ServerAdmi me@localhost Ligne DocumentRoot conforme lidentification du chemin du rpertoire htdocs dapache : DocumentRoot C:/apache/<chemin>/htdocs Enregistrer et fermer le document "httpd.conf". 3- TEST DE BON FONCTIONNEMENT - Apache est lanc automatiquement (icne dans la barre dtat). Si ce nest pas le cas, lancer apache partir du menu "dmarrer" de windows. "Ouvrir" un navigateur et dans la fentre dadresse inscrire : http://localhost puis valider. Si linstallation est correcte, le rsultat attendu dans le navigateur est conforme la figure ci-dessous. Page daccueil du serveur Apache dans le cas dune installation russie.
page 27
5.4.
INSTALLATION DUN SITE STATIQUE SUR APACHE LOCAL
"Copier" dans le rpertoire "htdocs" dapache le rpertoire "recettes" du stage. A la suite, vrifier que le serveur est bien lanc et inscrire dans la ligne dadresse dun navigateur la commande : http://localhost/recettes/marmiton.html Cette fois laffichage de la page "marmiton.html" est ralise par le protocole http conformment ce qui se fait pour la consultation des sites Web.
LANCEMENT AUTOMATIQUE DE LA PAGE DACCUEIL DUN SITE "Ouvrir" dans lditeur de texte la page "marmiton.html" du rpertoire "htdocs/recettes " dapache et la renommer "index.html". Changer la couleur du titre. Enregistrer, puis inscrire dans la ligne dadresse du navigateur : http://localhost/recettes
page 28
5.5.
ANALYSE DUNE TRANSACTION HTTP AVEC FIREBUG
"Ouvrir" lditeur de texte et charger les pages "livre_d_or. html" et "livre_d_or2. html" du stage. Vrifier que la mthode denvoi du formulaire est bien initialiser "get" (attribut method="get" de llment form). Indiquer dans la ligne dadresse du navigateur Firefox l url suivante : http://localhost/livre_d_or.html A laffichage du formulaire, faire commande "Outils/Firebug/Ouvrir Firebug" (ou F12) pour ouvrir linterface Firebug dans lditeur. Vrifier que le panneau rseau est activ (sinon dans la barre des tche cliquer laide du bouton droit de la souris sur le scarab (logo de firebug) pour faire apparatre le menu contextuel, puis cliquer sur la commande "activer tous les panneaux"). Renseigner les zones de saisie du formulaire puis "valider". Voir le rsultat de la transaction dans la zone Firebug, onglet reseau. Refaire une transaction en modifiant la mthode (attribut method="post" de llment form).
Le formulaire denvoi du
Le retour de la rponse du serveur
client
Panneau rseau de firebug : Mthode Get (les paramtres dans la partie visible de la transaction,)
Panneau rseau de firebub Mthode Post (les paramtres dans la partie cache de la transaction)
page 29
6.
LES LIMITES DU WEB STATIQUE Absence totale dinteractivit Impossibilit dobtenir un effet visuel Cycle de traitement des hyperliens long et fastidieux Serveur sous dimensionn pour un trafic en forte augmentation Engorgement des rseaux
La solution envisage, mettre en uvre des technologies cot client pour dsengorger les rseaux et amliorer linteractivit.
page 30
Le Web oriente client
LE WEB ORIENTE CLIENT

1. 1.1. LES TECHNOLOGIES DE BASE INTRODUCTION
Larchitecture client serveur ne change pas fondamentalement mais le client senrichit de nouvelles technologies visant dcharger le serveur de certaines tches (par exemple le contrle de formulaires), dsengorger le rseau, rationaliser le formatage en sparant les donnes de la prsentation et par l mme, en ouvrant lchange de donnes entre applications c'est--dire linteroprabilit. Cette avance repose sur une recommandation du W3C, le Data Objet Model (DOM), un langage de programmation excut chez le client (javascript, Jscript, ECMAScript) et un langage de feuille de style, le Cascading StyleSheet (CSS).
2. 2.1.
LA RECOMMANDATION DOM GNRALITS
Le DOM (Data Objet Model) du W3C est une recommandation laquelle les navigateurs sont censs se conformer et qui a pour finalit de transformer tous les lments de la page Web en objets dans le cache de lordinateur. Ainsi lors du chargement dune page HTML, le navigateur cre une trace lectronique (dite arbre du document) en mmoire et met disposition des outils pour y accder. Chaque lment composant la page est transform en un objet appel nud, positionn suivant une hirarchie, dfinissant ainsi un chemin daccs llment. Il devient alors possible en utilisant un langage de script oprant au sein du client de modifier les proprits de llment et dagir sur le positionnement, la visibilit ou encore lordre dempilement Ces modifications soprent par le biais des outils mis disposition par le navigateur, lors de la cration de larbre. Cest de lassociation de ces concepts, langages et recommandations que sarticule la technologie DHTML (Dynamic HTML). Un vritable dynamisme des pages HTML est cr sur une action vnementielle, sans recours au serveur.
page 31
2.2.
LARBRE DOM ET LES MTHODES AVEC FIREBUG
"Ouvrir" dans lditeur de texte la page "essaiDom.html". Afficher cette page par le biais du navigateur Mozilla. Activer firebug et cliquer sur longlet DOM pour drouler lensemble des mthodes mises disposition pour retrouver les lments de la page dans le cache. Cliquer sur document. A la suite cliquer sur "get childNodes" pour rvler les lments composant le document, le doctype de la page (lien 0) et llment html (lien 1). Cliquer sur le lien 1 pour rvler le contenu de llment html puis de nouveau cliquer sur "get childNodes" pour rvler les enfants head et body de llment Poursuivre la manipulation jusqu drouler tout larbre DOM. Fentre de firebug sous longlet HTML pour le code de la Page essaiDom.html
Fentre de firebug sous longlet DOM pour le dploiement de larbre de la page essaiDom.html dans le cache de lordinateur. Dans la fentre, la liste des enfants (ChildNodes) de llment body : Le premier enfant correspond llment h2 et au nud [0] du nud parent body dans larbre.
page 32
2.3.
LA NAVIGATION DANS LARBRE DOM
"Ouvrir" dans lditeur de texte la page "essaiDom.html". Complter le document en ajoutant un titre de niveau 3 (balise h3) avec du texte conformment limage ci-contre. Ouvrir firebug et cliquer sur longlet console. Si la fentre ddition nest pas visible cliquer sur le bouton rouge dans le coin infrieur gauche de la fentre.
Console sans fentre ddition. Cliquer sur
pour avoir la fentre ddition
Dans la console crire diffrentes lignes de commandes pour extraire le type dun lment, son nom, sa valeur... (voir exemples ci dessous)
A la suite cliquer sur le bouton excuter de la fentre ddition pour faire apparatre le rsultat du script de lditeur dans la fentre de la console.
page 33
3. 3.1.
LES LANGAGES JAVASCRIPT, JSCRIPT, ECMASCRIPT UN LANGAGE ORIENT OBJET COT CLIENT
Cest un langage interprt, qui ncessite un interprteur. Il possde de nombreuses caractristiques des langages objets sans tre un langage objet comme le langage JAVA dont il est driv. Il est dit "orient objet". Les objets quil manipule sont ceux dfinis par les balises HTML (liens, images, champs, ) ou ceux prdfinis (botes de dialogue). Le noyau du langage est intgr au sein du navigateur et permet dinsrer dans les pages Web des scripts (petits programmes), pour produire des traitements de contrle ou du dynamisme. Cest le langage le plus populaire pour crire des programmes excutables ct client. Le langage a t cr par Netscape (JavaScript) puis repris par Microsoft, sous le nom de JScript. Il a t standardis par le W3C sous le nom dECMAScript (ou encore ECMA-262). Cependant, les deux principaux constructeurs ont refus le standard et pour sen tenir leurs propres implmentations, ce qui gnre bien souvent des incompatibilits dans linterprtation des pages par les navigateurs. 3.2. INSERTION DU JAVASCRIPT DANS LA PAGE HTML
Il y a trois mthodes possibles pour insrer du code JavaScript dans un document HTML : Ecriture du code entre les balises <script></script>. Ces balises dlimitent une zone interprte par le navigateur comme un programme excuter lors du chargement. Lattribut "language" indique au navigateur le nom du langage et sa version. Le script sinscrit soit dans len-tte de la page entre les balises <head></ head > (stockage dune fonction en mmoire), soit dans le corps de la page (entre les tags <body></ body >). Le navigateur interprte le code au cours du chargement et affiche le rsultat sil y a lieu ou le garde en mmoire, en attente dun vnement. Le programme JavaScript peut tre aussi externe pour le rendre accessible dautres pages. Il sera charg dans la page par le biais de lattribut "src" associ une URL, suivant la syntaxe : <script language="javascript" src="URL"> </ script > Utilisation du pseudo-protocole JavaScript dans une URL. Il sagit dexploiter la possibilit de remplacer le protocole http dune URL par le terme JavaScript et dappliquer un code la suite. Le terme de pseudo protocole vient de lanalogie qui existe avec la syntaxe du protocole dadresse classique. Cette procdure associe un vnement provoque lexcution du code lorsque lvnement se produit. Par exemple pour lancer une fonction prdfinie partir dun hyperlien) la syntaxe est la suivante : <a href="JavaScript:fonction1()"> Excuter la fonction1 </a>
page 34
Exploitation des attributs du gestionnaire dvnements. JavaScript a t cr pour tre intimement li HTML. Pour cette raison un certain nombre dvnements produits par lutilisateur ont t rpertoris et regroups dans une sorte de bibliothque appele gestionnaire dvnements. Lobjectif tant de programmer trs simplement par une fonction, la raction des navigateurs face des vnements utilisateurs (clic de souris, modification de la valeur dun champ, frappe sur une touche du clavier). Par exemple, le passage du curseur de la souris sur un hyperlien pour dclencher lexcution du code dfini dans une fonction se formalise sous la syntaxe : <a onmouseover="fonction2()"> cliquer ici </a>
Remarque :
De ce qui prcde, le dclenchement de linterprteur javascript au sein du navigateur se rsume trois indicateurs. La balise <script language= "javascript"> qui dlimite la zone dinterprtation du code par le navigateur jusqu la balise de fermeture </script>. Un attribut du gestionnaire dvnement dans une balise html (ils dbutent tous par on).. Un protocole javascript appliqu un hyperlien Pour viter laffichage du code JavaScript par les navigateurs anciens, lensemble du code est mis sous forme de commentaire (entre <!- - et ->). Cela ne perturbe en rien les navigateurs habilits lire ce code. Le conteneur <noscript> </ noscript > sera insr la suite, porteur dun message indiquant que le navigateur ne lit pas le code JavaScript. 3.2.1. UTILISATION DES MTHODES DU GESTIONNAIRE D VNEMENTS "Reprendre" dans lditeur de texte les pages "recette_pomme.html", "recette_lasagne.html", "recette_paupiette.html" et "recette_philtre.html". Remplacer lhyperlien de chacune des pages par un bouton suivant la syntaxe : <button onclick="location.href=marmiton.html;" >Liste des recettes</button> Reprendre" la page "marmiton.html" pour insrer un script javascript dans la page, indiquant lheure.
Le script sinsre sous le titre dans un lment div centr. Aprs avoir constat son bon fonctionnement, en faire un script externe et nomm le fichier javascript : "heure.js". Voir le rsultat attendu figure ci-dessous
page 35
page 36
3.3.
LES BOTES DE DIALOGUE
JavaScript utilise trois types de botes de dialogue, appeles respectivement par : alert() : Pour afficher un texte court (texte mis entre guillemets dans la parenthse de la mthode alert(). La bote est referme par un bouton [OK] (figure 3.3a) confirm() : Pour poser une question ou passer un message en attente dune confirmation par le boutons [OK] ou d invalidation par le bouton [Annuler]. La question ou le message sont mis entre guillemets dans la parenthse de la mthode (figure 3.3b) prompt() : Pour saisir un mot de passe ou un code comme rponse une question. Lenvoi de la saisie sopre par le bouton [OK]. Le bouton [Annuler] rinitialise la saisie et bloque lenvoi. (figure 3.3c) Figure 3.3a
Bote message alert()
Figure 3.3b
Bote de dialogue confirm()
Figure 3.3c
Zone de saisie prompt()
Remarque :
Lappel de ces botes de dialogue peut se faire de diverses manires. Par exemple : - louverture de la page (automatique)
<body onload="alert(bonjour)">
- par lactivation dun bouton

<input type="button" value="message" onclick="confirm(bonjour\n + vous acceptez nos conditions de visite);">
- par un vnement (clic sur image)

<Img src="image.gif" onclick="prompt(bonjour\n donnez votre code?; code?;")>
page 37
3.3.1. UTILISATION DES BOTES DE DIALOGUE (BOTE CONFIRM()) "Reprendre" dans lditeur de texte les pages "recette_pomme.html", "recette_lasagne.html", "recette_paupiette.html" et "recette_philtre.html". Pour chacune de ces pages, lors de lactivation du bouton "liste des recettes", on demande au visiteur par le biais dune boite de dialogue confirm(), sil a bien not tous les ingrdients de la recette. Le code javascript est dclench sur lvnement onclick et dtermine sil y a retour ou non la liste. Un test conditionnel dtermine le traitement suivre li au choix du visiteur. Insrer les lignes de code suivante :
page 38
3.4.
LA PROGRAMMATION AVEC JAVASCRIPT
3.4.1. GNRALITS La syntaxe JavaScript est issue du langage JAVA, lui-mme issu des langages C et C++. Toutefois, JAVA et JavaScript sont deux langages diffrents. JAVA est un langage de programmation au mme titre que C, C++, Pascal, Quand il sexcute dans le contexte Internet (applet dans une page HTML), il reste localis dans une zone de la page HTML, bien distinct du code HTML et ncessite le moteur dexcution JAVA intgr au navigateur, diffrent des interprteurs rsidents. De plus, les objets dfinis dans la page ne sont pas accessibles depuis lapplet. A linverse, JavaScript est parfaitement intgr HTML. Le langage a t dvelopp pour dynamiser les pages. Sa force rside dans sa simplicit. 3.4.2. LES RGLES DE BASE Ce sont des rgles gnrales qui se trouvent dans la plupart des langages de programmation : JavaScript distingue les majuscules et les minuscules. Par convention, les mots-cls sont crits en minuscules JavaScript ignore les espaces entre symboles. Espaces, tabulations et sauts de ligne seront utiliss pour la lisibilit du programme Toutes les instructions se terminent par un point virgule (;). Dans le cas o linstruction est suivie dun saut de ligne, on peut se dispenser de le placer. Cela contraint de ne jamais couper une instruction par un saut de ligne Les commentaires sont placs gnralement entre les dlimitations /* et */ et ignors par le navigateur. De mme, toute ligne prcde par // est ignore et donc peut tre utilise pour le commentaire // voici un commentaire (C++) /* voici un second commentaire dans la ligne */ Les noms de variables, de fonctions ou dtiquettes sont des identificateurs. Ils sont composs de lettres, de chiffres, de (-), de ($) ou (_) en nombre quelconque. Le premier caractre de lidentificateur ne peut pas tre un chiffre Les mots-cls et les mots rservs sont des mots prdfinis qui ont une signification ou une fonction prcise pour linterprteur JavaScript. De ce fait, ils ne peuvent pas tre utiliss comme identificateur. Ils sont les lments du langage JavaScript
page 39
3.4.3. LES LMENTS DE PROGRAMMATION Les oprateurs : Ils servent dfinir des conditions de traitements particuliers (dfinition dune fonction, application dune boucle, gestion dlments, ) ou combiner ou associer diffrents lments (constantes et variables), pour crer des expressions. On distingue : les oprateurs de comparaison (+ ; == ; != ; < ; <= ; > ; >=) et les oprateurs logiques ( !; || ; &&). Les variables : Il sagit dobjets simples, reprsents sous la forme nom="valeur". Les rgles de base du langage sappliquent aux noms des variables (voir prcdent). La valeur reprsente un nombre, une chane de caractres ou un objet. Les variables peuvent tre utilises dans le programme sans tre dclares. Toutefois, la dclaration est conseille lors dune utilisation locale de cette variable. Par exemple dans la dfinition dune fonction. Elles sont dclares par le mot-cl "var". Les types de donnes : On distingue trois types de donnes simples (les nombres, les valeurs boolennes, les chanes de caractres) et deux types de donnes composes (les objets et les tableaux). Les conditions et les boucles : Ce sont les instructions de traitement. On les retrouve dans la plupart des langages de programmation suivant la mme syntaxe. On distingue trois principales : if : charg dexcuter un traitement lorsquune condition donne est remplie
If (condition) {traitement excuter si la condition est vrifie} ifelse : extension de linstruction if... Le mot-cl else ajoute la possibilit de spcifier entre accolades une ou plusieurs instructions qui sexcutent si la condition if nest pas vrifie
if (condition) {traitement excuter} else {traitement excuter dfaut de la condition} for : charg de raliser des boucles (excution dune action, un certain nombre de fois). Cette instruction est associe trois paramtres (respectivement une instruction, une condition, une itration) mis entre parenthses, qui sont suivis par une paire daccolades, contenant le traitement raliser dans le cadre de la boucle. for (instruction; condition; itrateur) {traitement} while: correspond la boucle for pour laquelle le paramtre ditration a disparu, seule subsiste la condition. Tant que la condition est vrifie, le traitement dune ou plusieurs instructions est excut while (condition) {traitement}
page 40
dowhile: est comparable aux fonctions de linstruction while la diffrence que les instructions de traitement sont places entre accolades avant la condition vrifier et aprs linstruction do. Ainsi, le traitement est excut au moins une fois avant la vrification de la condition do {traitement} while (condition)
break: pour interrompre une boucle en cours dexcution switchcasebreak: compare une valeur plusieurs autres valeurs et dclenche autant dactions diffrentes quil y a de comparaison. Equivalent un multi-if. switch(valeur) { casevaleur1 :instruction1 ; break ; casevaleur2 :instruction2 ; break ; casevaleurn : instruction ; break ;}
3.4.4. UN TABLEAU DE CALCUL DYNAMIQUE "Ouvrir" dans lditeur de texte la page "tableaujs.html", et lenregistrer sous " tableaujs1.html ". Raliser un script javascript laide dune boucle pour crer les lignes dun tableau dans lequel apparat dans chacune des cellules respectivement un nombre son carr et son cube, pour des valeurs variant de 1 9. Script ci-dessous
Amliorer le script en passant en paramtre le nombre de lignes du tableau par le biais dune bote de dialogue "prompt()" et en ajoutant un bouton sous le tableau pour relancer la procdure. La page daccueil
page 41
Le tableau dvelopp avec le nombre de lignes indiques aprs validation ok
Linterface lors de lannulation ou dindications errones dans la zone de saisie de la bote prompt().
Remarque :
Le rsultat dun traitement peut tre affich dans une fentre laide de linstruction : document.write("valeur"), o "valeur" prend la forme dune
concatnation dindices, variables, fonctions, balises HTML pour le formatage, .
3.4.5. LES FONCTIONS POUR REGROUPER DES INSTRUCTIONS Il sagit dune suite dinstructions (voire dun petit programme de traitement) enregistre sous un nom vrifiant les rgles de base JavaScript. Quand La fonction est appele par le biais dun vnement ou dun hyperlien les instructions
page 42
sexcutent. La dfinition dune fonction sinscrit en gnral dans un script dentte suivant la syntaxe : function nom() {instruction}
Remarque :
Dans la dfinition dune fonction on utilise souvent linstruction "return" pour retourner une valeur lvnement qui a appel la fonction. 3.4.6. CRATION DUNE FONCTION DE CONTRLE "Reprendre" dans lditeur de texte les pages "recette_pomme.html", "recette_lasagne.html", "recette_paupiette.html" et "recette_philtre.html". Pour chacune de ces pages, lactivation du bouton "liste des recettes", ouvre une boite de dialogue et lance une procdure de traitement. Crer une fonction confirmation() qui regroupe cette procdure ()
et linscrire dans un script externe la page nomm confirmer.js. Modifier la valeur de lvnement onclick dans chacune des pages conformment aux lignes suivantes :
puis associer le script aux pages concerns par la ligne de commande suivante inscrite dans lentte de la page : <script language="javascript" src="confirmer.js"></script>
page 43
3.5.
LA TECHNOLOGIE OBJET DANS LA PAGE WEB
Le langage JavaScript permet la cration dobjets auxquels sont associs des proprits et des mthodes. Ces objets ne sont pas les seuls pouvoir dynamiser une page html. Il est possible dutiliser des programmes chargs depuis le serveur et sexcutant sous le contrle du navigateur. Il sagit l des applets JAVA ou des ActivesX. Ces programmes ne peuvent pas avoir daction sur les lments de la page en particulier sur larbre DOM. 3.5.1. EXEMPLE DINSERTION DUNE APPLET JAVA "Ouvrir" dans lditeur de texte les pages "bannire1.html" et "ESSAI_applet.html" du rpertoire applet. Lobjet de lexercice est de copier llment applet de la page "bannire1.html" dans la page ESSAI_applet.html, sous le titre. Puis de modifier les paramtres votre convenance et de faire un aperu dans le navigateur. Constater lindpendance de lapplet par rapport la page (la boite "alert()" bloque la page mais pas le fonctionnement de la bannire (Noter, suivant la version du navigateur, ce comportement nest pas toujours vrifi).
page 44
Exemple du paramtrage de lapplet Bannire
4. 4.1.
LE LANGAGE DES FEUILLES DE STYLE (CSS) GNRALITS
La feuille de style CSS (Cascading StyleSheet) permet de grer laspect gnral de laffichage (police, taille et style de caractres, couleurs, arrire-plans, ) et de donner une homognit de prsentation plusieurs documents. HTML a toujours privilgi le contenu la prsentation, cependant larrive de la feuille de style a permis dapporter une cohrence de prsentation des pages et en mme temps de faciliter la maintenance de cette prsentation. Le principe est de contrler les attributs de prsentation dune collection complte de documents partir dun nombre limit de feuille de style voire une seule. Il existe trois manires dassocier une prsentation au contenu dune ou plusieurs pages : Le style en ligne : il confre une balise, une rgle daffichage pour le contenu quelle encadre (taille de caractres, police, couleur, ). Il sagit du style prioritaire (priorit absolu) <h1 style="text-align:center; color:blue;"> LE TITRE </h1>
page 45
Le style du document : il est dfini dans len-tte de la page par une zone conteneur, dlimite par les balises <style></style> (fig 2.1a). Il regroupe une ou plusieurs rgles communes ou spcifiques aux lments HTML du document. Ces rgles agissent sur toutes les balises concernes, rencontres dans le document, lexception de celles contenant un style en ligne. Il sagit dun style priorit de second ordre (fig 4.1a)
fig 4.1a Le style de la feuille de style externe : ce sont des rgles inscrites dans un fichier indpendant de la page HTML, avec une extension .css, que le navigateur charge en mme temps que la page HTML. Ce fichier (dit feuille de style) est rutilisable et permet dhomogniser le style un ensemble de documents. Il sagit l, du style par dfaut, priorit minimale par rapport aux deux autres formes de styles. On distingue deux manires dassocier une feuille de style une page : - La liaison : la commande de liaison sinscrit dans la zone den-tte de la page suivant la syntaxe : <link rel="stylesheet" type="text/css" href="url"> - Limportation: Elle sinscrit exclusivement dans une feuille de style ou dans une zone de style dfinie par les balises <style> </style> dans lentte de la page. Dans tous les cas elle apparat avant toute autre instruction, et peut tre suivie dautres importations de style suivant la syntaxe : @import url(url1); Linstruction "@import url()" commande au navigateur le chargement de rgles de style indiques ladresse inscrite entre parenthses (ici url1).
page 46
Remarque :
La zone de style du document inscrite dans un entte de page (dans llment head) est aussi appele feuille de style interne. Les rgles de styles importes dans la feuille de style interne ont la priorit sur les rgles des feuilles de styles lies (externes). Dans le cas de plusieurs feuilles de styles importes, le navigateur fusionne les styles pour ne constituer quune seule rfrence de style. Les styles sajoutent sauf en cas de conflit, alors le dernier style lu a priorit sur le prcdent qui est cras. Les rgles ci-dessus sont communment prises en compte par les dernires versions des navigateurs. 4.2. ECRITURE ET SYNTAXE DES RGLES CSS
Le DOM confre chaque lment des proprits de style. Le formatage par dfaut de ces lments identifis individuellement se fait par le langage CSS partir de rgles inscrites dans la feuille de style interne, externe ou dans llment lui-mme. Chaque rgle est compos dune suite de dclarations spares entre elles par un point virgule " ;". La dclaration tant sous la forme : "proprit : valeur".
Remarque :
Dans lexemple ci-dessus on relve un formatage de tous les lments paragraphe de html (balise <p>) pour lesquels le texte prend la taille de caractre de 16 pixels et la couleur identifie par #000066 dans le systme des couleurs RGB (systme hexadcimal, base sur les couleurs lectroniques fondamentales rouge, vert, blue cela donne une palette denviron 16.7 million de couleurs). 4.3. LE FORMATAGE PAR STYLE DUN ENSEMBLE DE PAGES
4.3.1. LE STYLE PAR DEFAUT "Ouvrir" dans lditeur de texte les pages "VTA01.html" et "VTA02.html". "Ouvrir" une nouvelle feuille de style css et lenregistrer sous "VTA.css". Crer les instructions pour :
page 47
- le titre de niveau h1 de couleur bleu (color:blue;) et de police arial (font-family :arial ;) - le titre de niveau h3 de couleur marine (color:navy ;) - le trait hr de couleur gris (gray), de largeur 70% de la fentre (width :70% ;) et dpaisseur 3px (height :3px ;) puis oprer la liaison dans chacune des pages html, enregistrer tout et faire laffichage dans les navigateurs. Le mme style pour les deux pages VTA01.html et VTA02.html.
page 48
4.3.2. AMELIORATION DU STYLE PAR REGLES IMPORTEES "Ouvrir" une nouvelle feuille de style css et lenregistrer sous "VTA_plus.css". Inscrire les instructions pour : - le titre de niveau h1 centr (text-align:center;) et de couleur pourpre (color :purple;) - llment div justifi (text-align:justify;), couleur marine, police en arial, avec une taille de caractre 11pt (font-size:11pt;) puis oprer une liaison dans une des pages html, et une importation dans la feuille de style vta.css. Enregistrer tout et faire laffichage dans les navigateurs.
Les diffrences daffichage dans le

navigateur sexpliquent par les rgles de priorit. Noter en particulier la priorit des rgles CSS par rapport aux attributs html.
4.4.
LES CLASSES POUR UNE DISCRIMINATION DES MMES BALISES
La classe de style est un moyen didentifier entre eux les lments html de mme nom et de diffrentier leur formatage. Elle permet ainsi d'accrotre la prcision de la prsentation. Lidentification de llment html est ralise en inscrivant dans sa balise douverture lattribut "class" auquel on associe une valeur qui est un mot pertinent et respecte les rgles dcriture des valeurs dattributs (pas de blanc, alphanumrique, ne commenant pas par un chiffre). <P CLASS="CHAPITRE1"> TEXTE DU BLOC </P> Une fois llment cibl on dfinit les rgles de cette classe nomme dans la feuille de style interne ou externe. Pour indiquer linterprteur quil sagit dune classe on fait prcder le nom dun point et on indique la suite la rgle associe comme pour un lment html. CHAPITRE1 {PROPRIT1; PROPRIT2;;}
page 49
4.4.1. AJOUT D UNE CLASSE POUR SINGULARISER UN CONTENU Dans la feuille de style css "VTA_plus.css", dfinir une classe pour centrer le texte de lappel doffre. Nommer la classe "centrage" et associer la rgle suivante : - text-align:center ; puis une seconde classe pour mettre en avant par un encadrement un article pertinent. Nommer la classe "special" et associer les rgles suivantes : - pour lencadrement (border :double ; border-color :navy ;) - pour le dgagement du texte (padding :5px ;) - pour la mise en gras (font-weight :bold ;) puis inscrire les deux classes dans les balises appropries des pages html. Enregistrer tout et faire laffichage dans les navigateurs.
page 50
5. 5.1.
LE DHTML DYNAMIC HTML GNRALITS
Les trois langages HTML, JavaScript, CSS et la recommandation DOM donnent la possibilit de modifier les proprits des lments html dans le cache de lordinateur. Ces modifications soprent par le biais des outils mis disposition par le navigateur, lors de la cration de larbre DOM. Cest de lassociation de ces langages et de la recommandation quest ne la technologie DHTML (Dynamic HTML) rvlant un vritable dynamisme des pages sous lvnement, sans recours au serveur. Elle est un concurrent direct des Applets JAVA ou ActiveX 5.2. PRINCIPE DES COUCHES OU CALQUES
Le principe de dynamisme des couches est bas sur la possibilit dempiler plusieurs pages HTML (dont le fond est transparent par dfaut) dans une mme page, suivant un axe de profondeur, crant un espace tridimensionnel.
Il est important de comprendre que les lments qui apparaissent ou disparaissent au gr des vnements, existent au chargement de la page. Laction sur les indices de visibilit ou dempilement est code partir de scripts javascript. Elle fait appel des mthodes associes des vnements ("onfocus", "onmouseover", ). Afin de pouvoir agir sur nimporte quel lment de la page, tous les lments sont identifis par lattribut "id" qui sinscrit dans la balise douverture de llment. Il dfinit ainsi une sorte de sous classe de llment avec la diffrence cest que sa valeur est unique dans la page contrairement la classe (cette valeur respecte les mmes contraintes de nom que la classe). Cest en quelque sorte le code barre de llment dans la page.
page 51
Une fois llment identifi, on dfinit les rgles de son identificateur dans la feuille de style interne ou externe. Pour indiquer linterprteur quil sagit dun identificateur on fait prcd son nom dun dise (#) et on indique la suite la rgle associe comme on le fait pour la classe ou pour llment html. #coucheA {position:absolute; margin-left:50pt; margin-top:100pt;}
Remarque :
Pour dfinir une couche dans la page, on utilise les lments html span ou div, puis on inscrit dans la balise douverture de cet lment un attribut "id" associ une valeur (un nom) unique dans la page). <span id="coucheA"> Contenu de la coucheA </span > La programmation de lvnement se rfre lun des attributs vnementiels ("onclick", "onblur", "onmouseover", ...), auquel est donn une valeur correspondant au changement de la proprit de style de llment. Par exemple : faire disparatre une couche sur un clic de souris, revient changer la valeur de la proprit de style "visibility", tablie par dfaut "visible", en "hidden". Pour laccs cet attribut, on utilise la syntaxe de la programmation objet (.) en inscrivant le chemin dans larbre du document cr en mmoire jusqu llment. Lvnement choisi tant "onclick" cela signifie quau clic de souris sur la zone dfinie comme la coucheA, la proprit "visible" de la couche sera modifie en "invisible" (cache). La syntaxe prise en compte tant par Internet explorer que Mozilla est la suivante : Onclick ="document.getElementById(coucheA).style.visibility=hidden;"
page 52
5.3.
MAJAX AU CUR DE LELECTRONIQUE
"Ouvrir" la page cine00.html et sa feuille de style fscine00.css. La page regroupe un titre "cinevideo2010" et trois couches superposes. Un clic sur une de ces couches change lindex dempilement en lui donnant la valeur la plus leve par rapport aux deux autres et en la plaant au premier plan (principe de longlet). Dans cette page, crer une nouvelle couche avec la proprit de disparatre (visibility="hidden") sur un des deux vnements passer dessus (onmouseover) ou cliquer dessus (onclick). Porter les modifications dans la page et dans la feuille de style puis "enregistrer". Faire laffichage et tester dans les deux navigateurs. Affichage dans le
navigateur au chargement de la page
Disparition de llment aprs le passage de la souris dessus
Code dans la page cine00.html
Code dans la feuille de style fscine00.css
page 53
5.4.
MULTIPLICATION DES ACTIONS SUR UN VNEMENT
"Ouvrir" la page "onglet_2.html" dans lditeur de texte et lenregistrer sous "onglet_20.html". Cette page est lie la feuille de styles "fsonglet_2.css". Dans la page html ouverte, programmer les vnements suivants : - Rendre limage de la couche INTRO invisible louverture de la page. - Rendre limage de la couche INTRO visible lors de lvnement onclick sur longlet fiche 1. En mme temps la couche nomme COUCHEBB slargit pour prendre une dimension de 800px. - Rendre de nouveau limage de la couche INTRO invisible lors de lvnement onclick sur longlet fiche 2. En mme temps la couche nomme COUCHEBB reprend sa dimension de 300px. (affichage ci-dessous et lignes de code la suite).
page 54
Code dans la page onglet_20.html
page 55
Transfert de donnes client - serveur
TRANSFERT DE DONNES CLIENT - SERVEUR

1. 1.1. LE FORMULAIRE GNRALITS
Le formulaire est le moyen quoffre le langage HTML pour gnrer un dialogue entre le client et le serveur. Il sagit dlments permettant la fois la saisie, le regroupement et lenvoi de donnes un programme de traitement sur serveur avec le lancement de ce programme depuis le poste client. Cet envoi est ralis par le navigateur suite une normalisation selon les rgles de communication CGI tablies entre le client et le serveur. Ce travail est transparent pour lutilisateur. Ainsi pour indiquer au navigateur les lments quil doit traiter pour lenvoi, on dfinit dans la page une zone formulaire partir de llment form. Elle regroupe toutes les indications pour lenvoi (adresse, mthode,) et la saisie des donnes. Trois catgories de champ de saisies sont dfinies : La catgorie " input ": pour divers type dentre (champ de texte, champ cach, champ de mot de passe, cases cocher, boutons de radio, boutons de soumission ou dannulation, champ de fichier, champ dimage, champ de bouton)
La catgorie " select " : pour les listes (menus droulants, listes ascenseurs)
La catgorie " textarea " : pour du texte libre
Chacun des champs de saisie est identifi par la valeur dun attribut name obligatoire (name="valeur") laquelle est associe la saisie sous la forme :
page 56
valeur=saisie_du_champ lors de lenvoi. Ce concept permet lapplication (sur le serveur) de reconnatre les saisies. 1.2. UN FORMULAIRE EN DIRECT
"Ouvrir" dans lditeur un page html et lenregistrer sous "formulaire.html". Construire le formulaire correspondant la figure ci-dessous avec les paramtres suivants : - mthode denvoi : - adresse de lapplication : method="get" action="livre_d_or2.html"
2. 2.1.
LA TRANSMISSION DES DONNEES SCHMA DU MECANISME DE TRANSFERT DES SAISIES
Une fois les champs du formulaire saisis, lactivation du bouton de soumission (<input type="submit">) ou dune fonction prvue cet effet, dclenche une procdure de traitement excute par le navigateur suivant trois tapes : lexcution dun script de validation des donnes, lencodage automatique des donnes (construction de la chane denvoi) et enfin, lenvoi de la chane au serveur, suivant la mthode indique par lattribut "method" de llment "form".
page 57
Figure 2.1a
Le script de validation de donnes : il est non obligatoire, mais recommand. Il est ddi une vrification des saisies et diffre lenvoi si les donnes ne sont pas correctes, en adressant un message au client. Le formulaire est alors prsent dans son tat, avant le lancement du script de validation, en attente de modifications des saisies signales incorrectes. Aprs correction, le client clique sur le bouton soumission et une nouvelle session de vrification est lance. Notons que ce script (gnralement en javascript) est inscrit ou associ la page contenant le formulaire. Ainsi, son excution sopre sur le poste client. Une fois valide, ltape suivante est dclenche Lencodage des donnes : le navigateur construit une chane de caractres, regroupant une succession dlments de la forme (nom_du_champ=valeur+de+saisie). Chaque lment est spar du prcdent et du suivant par le caractre "&" champ1=valeur1&champ2=valeur2& Dans cette chane, les donnes sont codes pour supprimer tout caractre dont linterprtation par le programme pourrait gnrer des erreurs (les espaces sont remplacs par le signe (+), le point dinterrogation et les caractres spciaux sont convertis en valeurs hexadcimales). Exemple dencodage dune chane : nom=de+Latour&PRENOM=Ch%E2teau
page 58
Lenvoi de la chane de caractres sopre suivant deux mthodes dfinies par lattribut "method" de la balise "form". La mthode "get" ou la mthode "post". La mthode "get" ajoute la suite de lURL rfrenant ladresse du programme serveur, un point dinterrogation ( ?), puis la chane de caractres encode. Cette partie est dite la chane de requte. La syntaxe de lurl stablit comme suit : http://www.domaine/cgi-bin/nomduScript?champ1=valeur1&...
page 59
Le point dinterrogation plac automatiquement par le navigateur indique au serveur la sparation entre ladresse du programme et la chane de caractres encode (contenant les paramtres passer lapplication). La mthode "post", la plus utilise pour le traitement des formulaires, envoie la chane de requte encode sur lentre standard du serveur, par le biais dune session http spciale. Cette chane est reprise dans le fichier den-tte (fichier cach) cr par le protocole http lors de la transmission des donnes au serveur
Remarque :
Lors du transfert de donnes par la mthode "get", la chane de requte vient sinscrire dans une variable denvironnement CGI : QUERY_STRING. La lecture de cette variable par le programme, permet de rcuprer la valeur des champs. Pendant lopration denvoi, le navigateur affiche intgralement la chane de requte dans la fentre dadresse et notamment les champs "password". Cette mthode prsente de ce point de vue, un srieux problme de scurit. Lors du transfert de donnes par la mthode "post", le serveur positionne la variable denvironnement "CONTENT_LENGTH" pour indiquer lapplication la longueur de la chane reue sur son entre standard. Pour rcuprer la chane des donnes, le script doit lire CONTENT_LENGTH caractres sur lentre standard du serveur. Pendant lopration de transfert, seule lURL apparat dans la fentre dadresse. 2.2. LE CONTRLE DES ZONES DE SAISIES DU FORMULAIRE
Il est conseill dassocier un programme de contrle JavaScript pour valider la saisie du client. Le contrle peut tre global et se dclencher lors de lenvoi ou cibler chacune des zones sensibles et rendu actif aprs leur saisie (vrification de date, de valeur numrique, ). Le programme est intgr ou li au formulaire, ainsi chaque processus de validation sexcutera sur le poste client, partir dun vnement immdiatement aprs la saisie (par exemple : lvnement "onblur"). Le formulaire et ses lments sont identifis dans larbre DOM par le biais des attributs "id" ou "name" inscrits dans tous les lments contrler pour agir sur eux. 2.2.1. LA VALIDATION DE CHAMPS "Ouvrir" la page "Livre_d_or.html" dans lditeur de texte et lenregistrer sous "Livre_d_or1.html". Il sagit dun formulaire permettant la saisie de deux champs : "nom" et "prnom". Lobjet de lexercice est de rendre obligatoire la saisie du champ "nom" avant lenvoi du formulaire. On se base sur la fonction "focus()" et lvnement "onblur". Par dfinition, la fonction "focus()" du gestionnaire dvnements rend active une zone de saisie. Lvnement "onblur" est appel lorsque lorsquil y a perte de focus() (tentative de rendre une autre zone active).
page 60
Pour rendre obligatoire la zone de saisie "nom", on linitialise en zone de saisie courante au chargement de la page, en y positionnant la barre dinsertion (onload="formulaire.getElementById('nom').focus()"). Il faut au pralable nommer le formulaire dans la balise <form> ( name= formulaire ) et identifier la zone de saisie nom (id= nom ). Puis sur lvnement onblur , on vrifie quune entre a bien t saisie (champ nom , non vide). Sinon, on renvoie une bote de dialogue avec un message pour signaler la saisie obligatoire (voir codes cidessous).
Bote dalerte pour

la saisie obligatoire du champ avant lenvoi
Le formulaire
Le corps de la page livre_d_or1.html et les scripts de contrle.
Remarque :
Lattribut "enctype"de llment "form" permet de modifier le type dencodage des donnes transmises par dfaut au formulaire application/xwww-form-urlencoded. Lautre valeur indique quil existe un champ de type "file" pour charger un fichier (multipart/form-data) Les champs de type "file" permettent de charger des fichiers laide du formulaire HTML. Lemplacement du fichier sur lordinateur local est prcis
page 61
dans le champ et le fichier est expdi avec le formulaire. Ce type de formulaire doit appliquer la mthode "post" et lattribut "enctype" doit prendre la valeur : "multipart/form-data" conformment la remarque prcdente. Les champs masqus (type="hidden") permettent dintroduire des donnes dans un formulaire sans que lutilisateur ne puisse les voir, ni les modifier. Ils servent stocker de linformation transmettre au programme serveur. Par exemple, la validation dune commande en deux tapes par deux formulaires. Un champ cach peut exister dans le second formulaire, regroupant toutes les informations saisies dans le premier formulaire et recopies dans ce champ. La mthode length permet de dnombrer des objets ou dvaluer la longueur dune chane de saisie. Cest une mthode adapte au contrle dun code de longueur fixe (ex : code de carte bleue.)
2.2.2. CONTRLE DUNE LONGUEUR DE CHANE Ouvrir" la page "Controle_code.html" et lenregistrer sous" "Controle_code1.html". Il sagit dun formulaire contenant un seul champ dans lequel doit tre saisi un code compos de 4 caractres numriques. Le contrle de la validation du code se fait lors de la soumission du formulaire par la fonction "validation()", sur la longueur de la chane saisie dans la zone "password". On utilise lvnement "onsubmit" dans llment "form"
page 62
Le code de la page Contrle_code.html
page 63
LES FONDEMENTS DU WEB ORIENTE serveur
LES FONDEMENTS DU WEB ORIENTE SERVEUR

1. 1.1. UNE EVOLUTION STRUCTURELLE DES SERVEURS WEB GNRALITS
Lamlioration des taux de transfert du rseau et des technologies lies aux capacits des serveurs ont progressivement conduit les dveloppeurs migrer leurs applications cot serveur pour contourner les difficults issues du modle orient client notamment pour les problmes de scurit Dsormais, linteractivit est provoque sur le serveur par des langages rsidents. En consquence, le serveur doit disposer de la bibliothque de ces langages et avoir la capacit de lancer leur interprteur ou moteur dexcution. Il sensuit une configuration spcifique pour chaque langage qui sajoute celle concernant le langage par dfaut du serveur Apache (Perl - 1er langage serveur utilis). La configuration des serveurs doit aussi prserver sa scurit et nautoriser quun accs rduit aux commandes systme. Il sagit par exemple des commandes permettant dexcuter un programme CGI en local ou lire lhorloge interne. Elles sont appeles les SSI (Service Slide Include ) ou plus rcemment XSSI (eXtensible SSI). Bien entendu toutes ces innovations et configurations doivent saccommoder de ce qui existe dj et qui fonctionne bien, le CGI, c'est--dire la procdure dchange normalise. Pour les nouveaux langages elle se dfinit selon deux critres : Etre excutable sur le serveur partir dune ligne de commande. Avoir la capacit de gnrer un en-tte de contenu valide.
2. 2.1.
LINTERFACE CGI GNRALITS ET FONCTIONNEMENT
Linterface CGI (Common Gateway Interface) est la plate-forme dominante pour construire des applications Web interactives. Elle a t mise en place sur lun des premiers serveurs dapplication (NCSA HTTPD). Sa simplicit et la mise disposition libre de son code, en ont fait un standard de limplmentation dapplications Web (1994). Depuis lors, dautres mthodes de dveloppements dapplications Web on vu le jour, comme Active Serveur Page (ASP) de Microsoft, Allaire Cold Fusion, PHP, Servlets JAVA, . Un programme CGI sexcute sur le serveur (Apache), en rponse la requte dun client (navigateur).
page 64
Son lancement est ralis laide dun lien excutable (URL longue) par le biais dun formulaire. Il est suivi dun traitement de donnes ou de lexcution dune application, puis du renvoi au client dune sortie standard (page HTML construite au fil du droulement du programme sans tre stocke dans un fichier). Le programme CGI fournit un en-tte pour que le navigateur puisse identifier le contenu du document, retourn sous ltiquette "Content-type".
Remarque :
Dans une transaction http "client - serveur" un certain nombre dinformations invisibles sont changes entre le serveur et le navigateur, comme len-tte retourn par tout programme CGI. Il indique au navigateur, le type de transaction, la date, le nom et la version du serveur, ltat de la connexion, comment traiter le contenu du document retourn Lors de lenvoi dune requte lie un lien excutable, le serveur doit reconnatre sil sagit dun script CGI et il doit lexcuter comme tel. Pour cela, il est configur par dfaut et utilise le rpertoire cr lors de linstallation du serveur. Dans le cas dApache, il sagit du rpertoire "cgi-bin". Ainsi, toute requte dun client sur un fichier avec lextension .cgi ou .pl de ce rpertoire, est interprte par le serveur comme une demande dexcution dun programme CGI.
Dune manire gnrale, les informations ddies un programme CGI sont rassembles dans des formulaires HTML, puis encodes par le navigateur lors de la soumission, sous forme dune chane de caractres dite "chane de requte". Dans le cas de la mthode "get" cette dernire est ajoute la suite du lien excutable aprs un point dinterrogation et dirige vers le rpertoire "cgi-bin". Dans la mthode "post" la chane de requte est place dans len-tte et vhicule vers lentre standard du serveur. Le langage dcriture de scripts CGI le plus rpandu du monde UNIX est Perl. Son inconvnient majeur est dtre un langage interprt (de ce fait, davoir besoin dun interprteur) et doffrir un niveau de scurit moindre quun langage compil (Ex : C++, JAVA). Son principal avantage est de disposer dun grand nombre de
page 65
bibliothques (module "CGI.pm") et dune multitude de programmes librement interchangeables sur Internet, facilitant et allgeant lcriture des scripts.
Remarque :
Les langages C et Java sont aussi parfaitement adapts lcriture de scripts CGI. Il sagit de langages compils, pouvant gnrer des fichiers directement excutables. Toutefois, ces langages sont plus compliqus apprendre, mettre en application dans le dveloppement et plus difficile dboguer quun langage interprt. Les avantages rsident dans la performance, la scurit et laptitude aux multi-tches.
page 66
2.2.
INSTALLATION DE PERL
Vrifier si Perl nest pas dj install sur lordinateur. En gnral sous un rpertoire Perl, Sinon :Crer un dossier Perl sous C:/ 1-INSTALLATION - Lancer lexcutable : activePerl_5.6.1.633-mswin32-x86.msi du rpertoire perlexecute, et suivre les instructions en indiquant le moment venu, le rpertoire C:/perl comme rpertoire dinstallation. 2- TEST DE FONCTIONNEMENT - Il convient de crer un premier script cgi-perl pour sassurer que linterprteur est bien dclench lors de lactivation du script. Le dclenchement de linterprteur est excut par le serveur la lecture de la premire ligne du programme cgi-perl. Cette ligne indique le chemin de lexcutable perl.exe suivant la syntaxe : # ! C:/Perl/bin/perl.exe (dans le cadre de linstallation dcrite ici). Ouvrir dans lditeur de texte le programme testperl.pl du rpertoire cgi-bin dApache. Modifier si besoin est la 1re ligne du programme.
Le fichier
testperl.pl avec la 1ire ligne ciblant linterprteur perl ventuellement modifier. Le chemin indiqu dans cette page est le chemin par dfaut de linstallateur Perl.
page 67
puis respectivement aprs avoir vrifier que Apache fonctionne (sinon lactiver), "ouvrir" un navigateur et inscrire dans la ligne Adresse : http://localhost/cgi-bin/testperl.pl Lexcution de la ligne entrane laffichage de limage ci-dessous indiquant une installation correcte de linterprteur.
Excution du programme testperl.pl indiquant le bon fonctionnement de linterprteur Arborescence des rpertoires du dossier Perl aprs linstallation
2.3.
STRUCTURE DUN SCRIPT CGI
Mise part, la ligne indiquant le chemin daccs linterprteur Perl, trois parties composent un programme CGI : lentre, lexcution du code (traitement), la sortie (rsultat).
page 68
2.4.
PREMIER SCRIPT CGI
Prenons comme exemple le programme qui consiste demander au visiteur son age et lui indiquer sil est en age de voter. Afficher le programme "agevote.cgi" dans lditeur (code ci-aprs). Vrifier et corriger si besoin est, le chemin de linterprteur Perl, puis "Enregistrer" dans le rpertoire "cgi-bin" dApache.
"Ouvrir" une nouvelle page html et lenregistrer sous "agevote.html" dans le rpertoire "htdocs" dApache. Construire le formulaire de la requte en inscrivant prcisment lurl dappel du script cgi (valeur de lattribut action de la balise <form>) : http://localhost/cgi-bin/agevote.cgi Le code du formulaire agevote.html
Vrifier le bon fonctionnement de la session en appelant dabord la page html par le protocole http.
Formulaire de la requte agevote.html
page 69
Page html (cre

par le script agevote.cgi) en rponse la requte
2.5.
LE TRAITEMENT DES DONNES
2.5.1. LA METHODE DENVOI Les donnes transmises au programme CGI se basent sur deux techniques diffrentes. Heureusement, les bibliothques CGI transposent les donnes des formulaires en donnes natives du langage de programmation utilis. Le module "CGI.pm" traduit les donnes en donnes Perl, quelque soit la mthode de transfert choisie. Ainsi, les deux mthodes sont interchangeables. Toutefois, il y a des cas spcifiques qui orientent le choix dune mthode par rapport lautre. Si le formulaire contient un mot de passe, un fichier joint (champ de fichier), une zone texte un peu longue (textarea) on utilisera la mthode "post" pour pallier la scurit ou la limite possible de longueur de lURL (fonction du navigateur ou du serveur). Si lappel de lapplication est faite par un lien, ou si la chane de requte doit tre retenue par le serveur ou si un champ de saisie doit passer comme paramtre lapplication, alors la mthode "get" sera indique.
page 70
Remarque :
Aux deux mthodes "post" et "get" de transfert de donnes, sajoute la mthode "head". Elle est employe uniquement dans le cas dune rcupration de len-tte de la page et non du corps. Par exemple, pour tester des liens ou des mises jour den-tte. 2.5.2. LES VARIABLES D ENVIRONNEMENT CGI Larrive de la chane de requte sur linterface CGI du serveur (Deamon) produit une dcoupe standardise de la chane en divers lments et un tiquetage de chacun de ces lments par un nom dit variable denvironnement. Ces variables sont fondamentales dans la programmation CGI. Elles donnent un accs aux informations concernant le serveur, le client, On distingue deux types de variables, celles se rapportant la transaction http, et celles relatives aux donnes du formulaire. La rcupration des donnes est subordonne lidentification de la mthode denvoi. Exemple de variables :
Remarque :
Quelques variables importantes : - SERVER_PROTOCOL pour le protocole utilis par le serveur - SERVER_PORT pour le port du serveur - REQUEST_METHOD pour la mthode denvoi - HTTP_USER_AGENT pour le nom du client (navigateur) - CONTENT_LENGTH pour la longueur de la chane denvoi - QUERY_STRING pour les donnes de la chane denvoi - CONTENT_TYPE pour le type de contenu - REMOTE_ADDR pour ladresse (IP) de la machine lorigine de la requte
2.5.3. DONNEES SERVEUR DUNE TRANSACTION HTTP "Ouvrir" dans lditeur le fichier "varenv.cgi" du rpertoire cgi-bin dApache. Il sagit dun programme daffichage des variables denvironnement lies la transaction HTTP. Vrifier et ventuellement corriger la premire ligne du script concernant laccs linterprteur Perl, "Enregistrer". "Ouvrir" un des navigateurs et inscrire dans la fentre dadresse :
http://localhost/cgi-bin/varenv.cgi
Affichage des variables denvironnement CGI du script varenv.cgi suite la transaction http
page 71
2.5.4. DONNEES CLIENT DUNE TRANSACTION HTTP "Ouvrir" varenv.cgi dans la fentre de lditeur et complter le script pour afficher la suite - le nom de la mthode : $ENV(REQUEST_METHOD) - la longueur de lURL : $ENV(CONTENT_LENGTH) - le type de contenu : $ENV(CONTENT_TYPE) - le contenu : $ENV(QUERY_STRING) "Enregistrer". "Ouvrir" dans lditeur de texte, la page "commentaire.html" du rpertoire htdocs. Vrifier et modifier la valeur de lattribut "action" de la balise <form> pour lancer le script varenv.cgi (action=http://localhost/cgi-bin/varenv.cgi ). (Voir les codes ci-aprs) Enregistrer le formulaire puis lancer louverture de la page "commentaire.html" par le biais dun navigateur. Complter le formulaire puis valider. Voir le rsultat cidessous suivant la mthode denvoi du formulaire.
Lignes de code supplmentaires du script varenv.cgi pour laffichage des informations relatives aux donnes provenant dun formulaire.
page 72
Affichage du formulaire commentaire.html.
Page html (cre par

le script varenv.cgi) en rponse la requte envoye par la mthode GET
Page html (cre par le script varenv.cgi) en rponse la requte envoye par la mthode POST
page 73
2.6.
LE MODULE CGI.PM
Dcoder manuellement les donnes dun formulaire est une tche ingrate. Le langage Perl propose un module rendant plus facile lcriture des programmes CGI, notamment pour dcoder les donnes dun formulaire. Il sagit du module CGI.pm. Il prend automatiquement en charge : Lidentification de la mthode denvoi Le dcodage de lurl La rpartition des donnes dans une table de hachage Il sagit l dune possibilit parmi dautres. Le CGI.pm est utilis aussi pour la cration de formulaire, lextraction de variables denvironnement, la cration de balises HTML. 2.6.1. LE MODULE STANDARD DE CGI.PM "Ouvrir" les fichiers "decodeform.cgi" et "decodeform1.cgi" dans lditeur de texte. Il sagit de programmes CGI crits en perl dont lobjet est de dcoder et dassocier les valeurs saisies de nimporte quel formulaire envoy par nimporte quelle mthode. Le premier ne fait pas appel la bibliothque CGI.pm contrairement au second. Noter alors la lourdeur et la complexit du premier script par rapport au second. Ouvrir le formulaire livre_d_or.html. Modifier ladresse de lattribut action en faisant appel chacun des deux programmes. Vrifier la premire ligne des programmes cgi Ouvrir le navigateur et vrifier le bon fonctionnement des scripts.
Les lignes de code du traitement du script decodeform.cgi, sans appel au module CGI.pm
page 74
Les lignes de
code du traitement du script decodeform1.cgi, avec lappel au module CGI.pm qui ralise automatiquement la dtection de la mthode, la rcupration des donnes et le dcodage
2.6.2. LES METHODES DE CRATION DE BALISES HTML DU CGI.PM CGI.pm regroupe un ensemble de mthodes pour crer des balises HTML. Les noms des mthodes correspondent en gnral aux noms des balises HTML [par exemple : p pour <p>] et acceptent des paramtres nomms comme attribut des balises [par exemple : img(-src=>plage.gif) pour <img src="plage.gif">]. Les mthodes html sont importes avec la ligne de script : use CGI qw/ :html
Remarque :
Quelques mthodes pour la cration des lments HTML : - start_html pour <html> - img(-src=>image.gif) pour <img src=image.gif - h3(Bonjour) pour <h3>Bonjour</h3> - start_form() pour <form> - textfield(-name=>nom) pour <input type=text name=nom> - end_form pour </form> - end_html pour </html> 2.6.3. LA CRATION DUNE PAGE WEB AVEC CGI.PM "Ouvrir" le fichier cgipmform.pl dans le rpertoire cgi-bin dApache et modifier si besoin ladresse de linterprteur. Il sagit dun programme cgi permettant la cration dun formulaire simple. Lancer un navigateur par le protocole http ladresse du programme, puis examiner le code source (code HTML) gnr par le programme.
page 75
Formulaire cr
automatiquement par les mthodes du module html de CGI.pm
Code de la page html ci-dessus (cre par dfaut par le script cgipmform.pl)
page 76
Modification du script cgipmform.pl : Complter la mthode concernant la cration de la balise <form> c'est--dire start_form(). Ajouter lattribut 'action' en ciblant le script "retourform.pl" et lattribut 'method' en choisissant la mthode get. Voir ligne de codes ci-dessous.
Modification du script de rponse retourform.pl : Une fois la modification ralise, enregistrer le fichier, puis "Ouvrir" le fichier retourform.pl. Modifier si besoin est la premire ligne de commande (chemin de linterprteur) puis enregistrer. Lancer un navigateur par le protocole http ladresse du programme cgipmform.pl.
page 77
2.6.4. ADAPTER LE RETOUR EN FONCTION DE LENVOI Modifier le script "retourform.pl" en ajoutant une condition sur la valeur de la couleur : 'si la couleur indique est noire, alors le fond de la page sera noir et le texte sera blanc'. (Voir le code ci dessous). Enregistrer puis vrifier le bon fonctionnement du programme.
3. 3.1.
LES SSI (SERVER SIDE INCLUDES) GNRALITS
Les SSI reprsentent un ensemble de commandes qui peuvent tre places directement dans un document HTML. Elles agissent sur le serveur et permettent la lecture dun fichier externe, linsertion dune date, lexcution dun programme dont le rsultat du traitement saffiche dans la page ou La lecture dune variable denvironnement. Les SSI sont un moyen simple de disposer de techniques pour dynamiser les pages HTML. Elles sont proches du CGI mais noffrent pas les mmes opportunits dinteractivit. Elles dispensent dun travail gnralement assez lourd quand elles peuvent tre appliques, mais restent toutefois limites. Une page HTML contenant des commandes SSI devient page SSI. 3.2. FONCTIONNEMENT DES SSI
Les SSI sont traites comme les programmes CGI au niveau serveur avec les commandes intgres au code HTML. Les pages SSI sont stockes dans le rpertoire regroupant les pages HTML (htdocs). Lorsquun client demande un document SSI, le serveur lanalyse pour excuter les instructions SSI. Il sensuit une charge de travail pour le serveur. Les commandes sont interprtes par le serveur, mais ignores du navigateur. Elles adoptent toutes le format suivant : 
page 78
La syntaxe est proche du commentaire html avec le inscrit aprs le double tiret (--) sans espace et le nom de la commande inscrit la suite de sans espace
Remarque :
Lactivation dune SSI prsente un risque de scurit, car les instructions excutent des commandes systmes qui renvoient des informations confidentielles. En consquence, malgr son ct pratique, les SSI doivent tre utilises avec prcaution cest la raison pour laquelle la configuration par dfaut ne donne pas accs ces commandes. 3.3. CONFIGURATION DU SERVEUR POUR SSI
Le serveur doit dtecter les pages contenant le code SSI pour lexcuter. Pour cela, les fichiers SSI se distinguent par une extension .shtml. Lors de la lecture de la page le serveur recherche les directives SSI pour les excuter et les remplacer par le rsultat obtenu (par exemple dans le cas de la lecture de la date courante, le serveur inscrit la date). Ces commandes se dmarquent du marquage HTML. La configuration est ralise dans le fichier httpd.conf.
page 79
Arrter le serveur apache. "Ouvrir" dans lditeur de texte, le fichier de configuration dApache "httpd.conf " du rpertoire conf. Oprer une recherche sur le mot "AddType". Arrter la recherche ds que vous trouver la ligne 778. Valider alors cette ligne de commande et la suivante en supprimant le signe de commentaire (#).
Oprer une nouvelle recherche sur le mot "Options" et dsactiver la ligne de commande :
La remplacer par la ligne suivante :
Note : cette ligne est en partie inscrite quelques lignes de programme au-dessus, modifier la en la validant et en ajoutant le mot : Options Relancer le serveur Apache pour vrifier si les directives SSI sont bien oprationnelles. "Ouvrir" dans lditeur de texte, la page "Meteo.shtml" du rpertoire htdocs dApache. Inscrire sous le tableau la directive SSI indiquant la date denregistrement du document lui-mme.
Lancer laffichage par un navigateur en utilisant le protocole HTTP.
Sous le tableau,
sinscrit le rsultat de la directive excute sur le serveur
page 80
3.4.
DES COMMANDES SERVEUR DANS LA PAGE
Exemple de quelques commandes SSI : echo exec include fsize pour afficher les variables denvironnement :  pour excuter un script CGI :  pour insrer un fichier texte dans la page :  pour connatre la taille dun fichier :
 flastmod pour rcuprer la date denregistrement du document :  printenv pour avoir la liste de toutes les variables denvironnement du serveur : 
Remarque :
Il existe bien dautres commandes serveur notamment pour la cration dun format de date et dheure par le biais de la commande config, et du paramtre timefmt. Exemple, pour traduire la date suivante Monday, May 4, 1997 at 06:30pm la syntaxe SSI scrit : < !--#config timefmt="%A, %B, %e, %Y at %I :%M, %p"-->
page 81
Reprendre la page Meteo.shtml et complter lexercice prcdent en ajoutant la suite de la directive 'flastmod' dautres directives dans la page selon le code ci-dessous :
Lancer laffichage par un navigateur en utilisant le protocole HTTP.
page 82
4. 4.1.
PHP UN LANGAGE SERVEUR GNRALITS
En 1994 Rasmus Lerdof cre le Personal Home Page pour publier facilement sur le Web. Il devient avec sa version 5 et son orientation objet lacronyme de HypertextPreProcessor. Cest un langage dcriture de scripts ct serveur, utilis uniquement pour la cration de page Web. Il a besoin dinterprteur pour tre excut et peut fonctionner avec des bases de donnes, crer des images, lire et crire des fichiers, communiquer avec des serveurs distants, Le code PHP est combin avec le code HTML et le rsultat est envoy au navigateur. Son succs tient aux larges possibilits de son emploi sur tous les systmes dexploitation avec la plupart des serveurs, sa libre consultation et ses
page 83
fonctions puissantes de dialogue avec les systmes de gestion des bases de donnes. Les instructions sont lues et analyses par linterprteur PHP sur le serveur et natteignent jamais le navigateur qui affiche le rsultat c'est--dire du texte. Il existe deux versions : une version module serveur uniquement utilisable avec Apache sous UNIX et une version CGI indpendante, fonctionnant avec tous les serveurs Web (UNIX, Windows 9x/NT, ). 4.2. LE LANGAGE
Il possde une syntaxe trs complte : dfinition de variables statiques et dynamiques, trois types de donnes simples (nombre entier, nombre dcimal, chane de caractres), deux types de donnes composes (tableau, objet), des fonctions de conversion de type, des oprateurs, des fonctions de gestion, Le code PHP simbrique dans une page HTML standard. Il sinscrit entre deux indicateurs dlimitant un bloc dinstructions. Il existe quatre types de balise permettant douvrir et de fermer le bloc dinstructions : La balise standard La balise abrges La balise asp La balise de script <?php code php ?> <? code php ?> <% code php %> <script languauge= "php"> code php </script>
Lorsquune page HTML contient du code PHP, elle doit tre enregistre avec lextension .php, de telle sorte que le serveur sache quil doit lancer linterprteur. A cette fin, le serveur est configur pour reconnatre lextension php. Une des caractristiques importantes de PHP est sa possibilit dinclure des fichiers qui peuvent tre des fichiers php. Le langage emprunte des concepts issus dautres langages comme C et Perl. Il dispose dune large palette de fonctions pour manipuler les tableaux, grer les chanes de caractres
page 84
4.3.
INSTALLATION DE PHP5 ET CONFIGURATION DAPACHE
IMPORTANT : "Arrter le serveur Apache" avant toute manipulation. Puis, "ouvrir" le sous rpertoire 'php' du stage. Larchive qui sy trouve permet dinstaller PHP5 et de configurer le serveur: "php-5.2.4-win32-installer.msi" Double cliquer sur larchive et suivre les indications au fil de linstallation. - Installer php5 sous C : - Indiquer la version dApache : - Indiquer le chemin du rpertoire 'conf' dApache. A la suite, aprs confirmation lancer linstallation. Une fentre finale indique la bonne excution du programme. "Ouvrir" alors, le fichier de configuration dApache (httpd.conf) dans lditeur de texte, et vrifier la fin du programme, la prsence des lignes de codes, indiquant la liaison du serveur avec linterprteur. PHPIniDir "C:/php5/" LoadModule php5_module "C:/php5/php5apache2.dll" Enregistrer. Dmarrer le serveur Apache puis lancer le test partir du navigateur par le protocole http sur le fichier "test.php" : Dans la ligne dadresse : "http://localhost/test.php"
page 85
4.4.
EXPLOITER UN FORMULAIRE AVEC PHP
"Ouvrir" dans lditeur de texte, le formulaire livre_d_or.html et la page livre_d_or2.html du rpertoire 'htdocs'. "Enregistrer" cette dernire sous livre_d_or2.php dans le mme rpertoire 'htdocs'. Porter les modifications dans la page livre_d_or2.php pour avoir en rponse de lenvoi du formulaire livre_d_or.html, un remerciement personnalis conformment limage ci-dessous. La modification concerne lencapsulation dun script PHP rcuprant les variables 'nom' et 'prnom' pour les afficher.
formulaire denvoi :livre_d_or.html

Rponse et affichage des saisies par le biais de la page web : livre_d_or2.php
Code source de la page : livre_d_or2.php
page 86
LA PLATE-FORME DE DEVELOPPEMENT WEB

1. 1.1. LA PLATE-FORME WAMPSERVER GNRALITS
La plate-forme de dveloppement est un outil indispensable aux dveloppeurs de sites Web. Elle cre en local un environnement darchitecture trois tiers, c'est dire client serveur serveur de bases de donnes et permet ainsi de tester le comportement des lments qui composent le site avant de linstaller chez un hbergeur. Plusieurs outils ralisent cet environnement (EasyPHP, LAMP, XAMP). La plate-forme WAMP est ddie au systme dexploitation Windows. WAMP tant lacronyme de Windows, Apache, MySQL, PHP. Son succs tient la simplicit dinstallation. Elle regroupe linstallation et la configuration du serveur Apache, de PHP, dun systme de gestion de base de donnes MySQL et de loutil phpMyAdmin de cration et dadministration de bases de donnes, tout cela en quelques clics de souris et moins de trois minutes 1.2. ARCHITECTURE DE WAMP
On retrouve tout ce qui a t dj vu avec toutefois quelques petites variantes.
page 87
Le fichier htdocs dApache nexiste plus. Dsormais les pages html et php du site sont enregistres dans le rpertoire "www" (rpertoire qui peut tre renomm linstallation). Le rpertoire php contient linterprteur du langage. La configuration na pas besoin dtre modifie si ladresse du fichier de configuration dapache a bien t indique lors de linstallation Le rpertoire MySQL regroupe les excutables du systme de gestion des bases de donnes dans un sous rpertoire " bin " et les bases de donnes permettant le fonctionnement du systme et de loutil dadministration dans un sous rpertoire "data". Attention de ne rien effacer dans ce rpertoire. Cest dans ce dernier que seront enregistres les bases de donnes du site concevoir. 1.3. INSTALLATION DE WAMP
Arrter le serveur Apache et dsinstaller Apache et PHP. Rcuprer lexcutable wamp5_1.7.2.exe du rpertoire 'WAMP5' puis double-cliquer dessus pour lancer linstallation. Suivre les indications du logiciel : Accepter les termes de la licence :
- Choisir le rpertoire dinstallation : - Garder le nom par dfaut qui est donn loutil dans la liste des programmes du menu dmarrer de Windows : - Ne pas choisir le dmarrage automatique de WAMP lors de louverture dune cession, faire suivant - La fentre suivante rsume les diffrents choix et propose le bouton dinstallation. Cliquer pour dmarrer :
page 88
- Une nouvelle fentre fait apparatre une barre de progression de linstallation - A la suite une interface propose le rpertoire 'www' par dfaut comme rpertoire courant pour le site. Valider en cliquant sur le bouton 'OK' Accepter la valeur par dfaut propose pour
le serveur SMTP
- Accepter la valeur par dfaut propose pour ladresse mail de ladministrateur retourne par php en cas de problme de traitement :
Aprs validation une interface dtecte un navigateur install sur lordinateur et propose de lutiliser comme navigateur principal. Selon votre choix, cliquer sur un bouton pour finaliser linstallation. Une dernire interface indique la fin de linstallation en proposant de lancer la plateforme par le biais du bouton 'Finish' Une fois la plate-forme lance lindicateur de fonctionnement de WAMP sinstalle dans la barre des tches de Windows. Il a la forme ci-contre :
Finaliser la configuration en positionnant le pointeur de la souris sur lindicateur WAMP dans la barre des tches et cliquer sur le bouton droit. Dans le menu suivant qui saffiche
cliquer sur 'language' et choisir Lancer un navigateur et dans la barre dadresse indiquer http://localhost
page 89
puis valider. Si linstallation est correcte, la page daccueil de WAMP apparat dans la fentre du navigateur indiquant ainsi que le serveur de la plate-forme fonctionne.
Prparer la plate-forme aux exercices en recopiant :
- les fichiers du rpertoire 'www' du stage dans le rpertoire 'www' de WAMP - les bases de donnes 'cinema' et 'IGPDE' du rpertoire 'data' du stage, dans le rpertoire 'data' de WAMP ladresse suivante : C :/ wamp/ mysql/ data
page 90
1.4.
CONNEXIONS AUX BASES DE DONNEES MYSQL
"Ouvrir" dans lditeur de texte, la page affiche_table_igpde.php et raliser une connexion la base de donnes igpde en lanant lapplication partir dun navigateur suivant la commande : http://localhost/affiche_table_igpde.php. Connexion la base igpde par affiche_table_igpde.php
Enregistrer le fichier affiche_table_igpde.php sous affiche_table_cinema.php. Porter les modifications pour afficher tous les enregistrements de la table film de la base de donnes cinema.
page 91
Connexion la base cinema par affiche_table_cinema.php
page 92
1.5.
LES BASES DE DONNES MYSQL
1.5.1. GNRALITS Les bases de donnes permettent denregistrer les donnes de faon organise et hirarchise. Le Systme de Gestion des Bases de Donnes (dit SGBD) est un programme qui se charge du stockage des donnes. Celui que nous utilisons avec PHP se nomme MySQL. Il en existe dautres payants (Oracle,) ou du monde libre (PostgreSQL, SQLite,) Le langage pour passer des ordres au SGBD est le langage SQL. Il est commun aux SGBD. PHP est lintermdiaire pour passer des ordres SQL au SGBD. 1.5.2. ARCHITECTURE D UNE BASE DE DONNES
Une base de donnes renferme des tables. Chaque table regroupe des informations spcifiques. On peut la reprsenter par un tableau ou les colonnes sont les champs et chaque ligne les enregistrements (ou entre).
page 93
1.5.3. LOUTIL PHPMYADMIN Il sagit dune application permettant de crer, dadministrer et de manipuler les bases de donnes MySQL via une interface trs conviviale.
page 94
1.5.4. CRATION DE LA BASE DE DONNES DU STAGE "Cliquer" sur licne de WAMP dans la barre des tches puis sur la commande phpMyAdmin pour ouvrir ladministrateur de bases de donnes MySQL. Dans la zone de saisie "Crer une base de donnes" inscrire le nom de la base (par exemple stageWeb)
puis valider par le bouton "Crer". La base de donnes est cre. Elle sinscrit dans le menu droulant bases de donnes et phpMyAdmin indique quaucune table nexiste dans cette base et propose la cration dune table. Dans la zone de saisie "Crer une nouvelle table" indiquer le nom de la table (par exemple stage2011) et dans celle "Nombre de champs", saisir 4
.. puis valider avec le bouton excuter.
page 95
La table ne se cre pas immdiatement. Linterface propose un tableau de zones de saisies pour indiquer le nom des champs et leurs caractristiques. Remplir les zones en inscrivant le nom des champs (ex : id, nom, prnom, direction) leur type (ex : int pour le premier et varchar avec la taille 256 pour les trois autres). Puis dans la colonne "extra" prciser lauto incrmentation du champ "id" (de type "int" c'est dire nombre) et dans la colonne action indiquer que ce champ est une cl primaire (le code barre de lenregistrement.)
puis valider avec le bouton excuter. La table est alors cre. Aller sur longlet insrer et cliquer pour oprer les entres de donnes dans la table sauf pour le premier champ qui est auto incrment et la charge de phpMyAdmin.
Aprs la premire saisie de lenregistrement faire donnes dans la table, puis recommencer la procdure.
pour insrer les
Une fois lopration des entres termine procder laffichage de la table en cliquant sur longlet affichage :
La table a bien t enrichie de donnes, il sagit maintenant de les afficher dans une page Web.
1.5.5. LA CONNEXION A UNE BASE DE DONNES
page 96
Pour rcuprer les donnes dune base de donnes, PHP doit sauthentifier auprs de MySQL, on dit quon tablit une connexion. Il y a plusieurs moyens de se connecter : Lextension mysql_ : cest lextension classique pour communiquer avec MySQL. Aujourdhui elle est considre comme obsolte (mais encore largement utilise) Lextension mysqli_ : cest lextension amliore daccs MySQL. Elle dispose de plus de fonctionnalits que la prcdente Lextension PDO : cest loutil complet qui permet de se connecter aussi bien MySQL qu dautres bases de donnes comme PostgreSQL ou Oracle. Cest lextension recommande, elle est oriente objet.
Remarque :
Lactivation de PDO dans wampserveur ncessite une configuration de PHP. Il faut activer les deux extensions de php respectivement : php_pdo et php_pdo_mysql. Cliquer sur licne de wamp dans la barre des tches puis la suite Configuration PHP, Extensions PHP et valider php_pdo et php_pdo_mysql. Pour ne pas autoriser nimporte qui lire la base ou viter les intrusions malveillantes, MySQL va demander PHP de fournir un nom dutilisateur et un mot de passe. Une fois lutilisateur authentifi, la connexion est tablie et il peut raliser nimporte quelle opration sur la base. Quatre informations sont donc ncessaires pour la connexion : Le nom de lhte : adresse de lordinateur o est installe MySQL Le nom de la base de donnes Le login : identificateur ("root "par dfaut) Le mot de passe : code daccs. Il est donn par lhbergeur (scurit). Par dfaut sur wampserveur cest " ". La syntaxe de la connexion PDO : $bdd = new PDO(mysql:host =localhost;dbname=stageweb,root,); Le code de connexion PDO cre un objet par new nomm ici $bdd. Il reprsente la connexion la base de donnes (ici stageweb). Ce code saccompagne dun bloc de protection (trycatch) qui renvoie des exceptions.
page 97
Remarque :
En local, le nom de lhte est "localhost", le login "root" et le mot de passe " ". 1.5.6. LA CONNEXION A LA BASE STAGEWEB
"Ouvrir" dans lditeur de texte, la page affiche_table_igpde.php et lenregistrer sous affiche_stage.php. Raliser une connexion la base de donnes stageweb en modifiant les instructions de connexion comme ci-dessous :
A la suite, enregistrer puis lancer laffichage.
page 98
Reprendre lapplication et inscrire une slection sur le champs direction (par exemple direction='DGFIP-GP'). Modifier le code de la requte SQL conformment la ligne suivante :
enregistrer puis lancer laffichage.
1.5.7. UNE REQUTE CLIENT ET UNE RPONSE ADAPTE Ouvrir le document affiche_table_cinema.php et une nouvelle page html enregistrer sous cinema.html. Cette dernire conditionne par le biais de boutons, laffichage respectif de : - la liste complte des films de la vidothque (il sagit dun vnement onclick qui ouvre le document affiche_table_cinema.php suivant la syntaxe : onclick=location.href=http://localhost/affiche_table_cinema.php ; - la liste des films dune anne choisie. Le choix de lanne est prsent sous la forme dune liste droulante. La valeur envoye la page (variable : annee) sert de critre de slection pour la requte SQL suivant la syntaxe : SELECT * FROM film WHERE annee=$annee Cette syntaxe sinscrit dans un nouveau document php construire partir du document affiche_table_cinema.php et enregistrer sous affiche_table_annee.php. Lenvoi de la requte est ralis par le biais dun formulaire inscrit dans la page cinema.html. (voir figures suivantes et programmes)
page 99
page 100
Document: affiche_table_anne.php
<html> 1  2 <head> <meta http-equiv="Content-Type" content="text/html; 3 charset=iso4 859-1"> <title></title> 5 <meta name="description" content=""> 6 <meta name="keywords" content=""> 7 <meta name="author" content="version enregistre"> 8 <meta name="generator" content="WebExpert 6"> 9 </head> 10 11 <body bgcolor="silver"> 12 13 <h2 style="text-align:center;color:navy;">Inventaires de la 14 ideothque</h2> 15 <hr size="3" color="navy" width="60%"> 16 <br><div align="center"><button 17 nclick="location.href='http://localhost/affiche_table_cinema.ph p';"> 18 a liste complte des films</button></div> 19 <br> <br> <hr size="3" color="navy" width="60%"> 20 <br> 21 <form action="http://localhost/affiche_table_annee.php" 22 ethod= "post"> 23 <div align="center">Pour une selection par 24 anne: 25 select name="annee"> 26 <option value="1990"> 1990</option> 27 <option value="1987"> 1987</option> 28 <option value="1985"> 1985</option> 29 <option value="1983"> 1983</option> 30 <option value="1981"> 1981</option> 31 <option value="1972"> 1972</option> 32 <option value="1970"> 1970</option> 33 <option value="1969"> 1969</option> 34 <option value="1967"> 1967</option> 35 <option value="1966"> 1966</option> 36 <option value="1958"> 1958</option> 37 <option value="1957"> 1957</option> 38 <option value="1946"> 1946</option> 39 <option value="1935"> 1935</option> 40 <option value="1934"> 1934</option> 41 42 </select> 43 44 <input type="submit" value="Envoyer l'anne"> 45 </div> 46 47 </form> 48 </body>
page 101
Document: affiche_table_anne.php
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 <?php /* Date de cration: 01/04/2007 */ ?> <html> <body bgcolor="silver"> <h2 align="center">La liste des films de la bibliotheque</h2> <? echo "<table width='30%' border='4' bgcolor='#FFFF99' align='center'>\n"; echo "<tr>\n"; echo "<TH>".$annee."</TH>\n"; echo "</tr>\n"; echo "</table>\n"; ?> <br><br> <?php //Connection MySQL et choix de la base de donnes $conn=mysql_connect("localhost", "root", ""); $db=mysql_select_db("cinema", $conn); //Envoi de le requte et rcupration du rsultat dans une ariable $resultat=mysql_query("SELECT * FROM film WHERE annee=$annee"); //Consultation du rsultat travers un tableau //Construction d'une entte avec le nom des colonnes $layout_header=TRUE; echo "<table border='3' align='center'>\n"; //La boucle permet l'extraction de tous les enregistrements du sultat while($row = mysql_fetch_array($resultat, MYSQL_ASSOC)) { if ($layout_header) { $layout_header=FALSE; echo "<tr>\n";
24 25 26 27 28 29 //Impression du nom des colonnes dans l'entte 30 while(list($col_name, $col_value)=each($row)) { 31 echo "<th bgcolor='pink'>$col_name</th>\n"; 32 } 33 //fermeture de la ligne d'entte 34 reset ( $row ); 35 echo "</tr>\n"; 36 } 37 //Impression des enregistrement 1/ligne de tableau 38 echo "<tr>\n"; 39 while(list($col_name, $col_value)=each($row)) { 40 echo "<td>$col_value</td>\n"; 41 } 42 echo "</tr>\n"; 43 } 44 echo "</table>"; 45 ?> 46 </body> 47 48 </html>
page 102
LES FONDEMENTs DU WEB 2.0
LES FONDEMENTS DU WEB 2.0

1. 1.1. LES TACHES PARTAGEES GNRALITS
Le Web serveur a rpondu en son temps principalement aux problmes de scurit des utilisateurs et lincompatibilit des navigateurs. Depuis lors, la divergence entre les navigateurs de nouvelle gnration samenuise avec une volution vers un standard, bien quil subsiste bien des gards encore des divergences. Lobjectif est de trouver un compromis entre les tches client serveur pour pallier aux inconvnients rvles par le Web orient Serveur notamment concernant le dsengorgement des rseaux et le gain en ractivit des applications. Lide directrice est de faire communiquer une page Web avec un serveur sans occasionner de rechargement de la page, cest la raison pour laquelle javascript est utilis. Cette ide dj exploite par Microsoft autour des annes 2000 avec la cration dActiveXobject, sest largement rpandue avec larrive de lobjet XMLHttpRequest. Ce nouveau concept dutilisation des technologies existantes donn naissance ce qui est appel aujourdhui les sites de type Web 2.0. Ils se caractrisent par leurs fonctionnalits, leur ergonomie et leur ractivit. La mise en uvre de tels sites est base sur des applications riches (RIA Rich Interface Application) qui permettent de disposer en ligne des mmes services quune application de bureau. Le Webmail est un exemple de RIA car il permet de consulter ses messages lectroniques depuis nimporte quel ordinateur voire tlphone portable. 1.2. LE CONCEPT AJAX
AJAX est lacronyme de Asynchronous Javascript And XML. Il sagit dun concept de programmation reposant sur plusieurs langages et non un nouveau langage. Il apparat comme lun des meilleurs concepts pour dvelopper des applications riches. Une fois charg dans le navigateur, le moteur AJAX (un script javascript de gestion de lobjet XMLHttpRequest) reste en attente de lvnement pour lequel il a t programm. Quand celui-ci se produit, il adresse et rceptionne les requtes en tche de fond puis affiche la rponse lendroit prvu par le concepteur. En 2005 le concept est adopt par des acteurs importants du Web (Google, Yahoo,) pour dvelopper des applications (exemple Gmail ou le nouveau Yahoo). Son succs vient de lutilisation de technologies anciennes : les langages CSS, XHTML, le format de donnes XML ou JSON (pour le transfert entre client et serveur), le langage de script Javascript et lobjet XMLHttpRequest.
page 103
LES FONDEMENTs DU WEB 2.0
1.3.
UNE APPLICATION SANS RECHARGEMENT DE LA PAGE
Ouvrir le document "index4.html" du rpertoir siteajax. Cette page charge le moteur AJAX en mode synchrone ce qui nest pas le mode utiliser pour les applications riches. Nanmoins parce que le formulaire utilise lobjet XMLHttpRequest pour lenvoi de la requte, la page reste affiche dans le navigateur. Seule la rponse est rcupre par le moteur AJAX et affiche lendroit ddi de la page "anciennement" affiche. Notons que le traitement rsulte du programme lanc par la requte (gainAlatoire.php). Lancer lapplication etjouer !
page 104
LE STANDARD DECHANGE
1. 1.1. LE METALANGAGE XML GNRALITS
Devenu un standard en fvrier 1998, XML est un mtalangage de reprsentation de donnes, c'est--dire un ensemble de rgles pour marquer les documents. Toute une pliade doutils ou de sous-ensembles du langage se sont dvelopps pour interagir avec XML et rpondre aux besoins fondamentaux du Web, savoir tre la fois le dnominateur commun des deux types darchitectures actuels (JAVA et Microsoft), le modle pivot dchange de la multiplicit des formats existants, le standard de balisage et darchivage. XML est la solution pour linterconnexion des applications et des services.
1.2.
DES OUTILS POUR DES CLASSES DE DOCUMENTS
La libert de cration des balises et de leur imbrication a conduit dfinir des rgles pour figer la structure afin dhomogniser les documents issus de sources diverses. Des classes de documents sont ainsi cres partir des deux outils : la DTD (dfinition de type de document) et le schma (XMLSchema). La DTD dfinit la grammaire dun document ou dune collection de documents, prcisant la structure des lments (la hirarchie des lments imbriqus) et une forme de typage trs "lche" du contenu de chacun.
page 105
Le schma (langage XMLSchema) valid en mai 2001, prcise de manire plus rigoureuse les diffrents types de donnes, en introduisant des contraintes, la fois sur les lments, leur nombre et leur contenu. Il sagit dune DTD amliore, permettant de dfinir des modles complets, limage de ceux dfinis pour les bases de donnes. 1.3. UN DOCUMENT XML CONFORME
Crer un document XML conforme enregistrer sous Menu.xml. Il est structur de manire prsenter les trois rubriques principales dun menu comme prcis ci-dessous. Chacune des rubriques est un lment principal et contient un lment enfant (exemple : la rubrique ENTREE regroupe les lments SALADES , CHARCUTERIE et MELON . Une fois cr, vrifier la conformit du document par laffichage dans Internet explorer Reprendre le document et le complter en proposant un choix de trois salades llment (SALADES ) et un choix de trois gteaux llment (GATEAUX). Vrifier la conformit du document par laffichage dans Internet explorer.
Affichage du document menu.xml dans lnternet Explorer
page 106
1.4.
DES APPLICATIONS POUR LE TRAITEMENT OU L AFFICHAGE
Les documents XML ne sont pas ddis laffichage dans les navigateurs ni au traitement. Pour cela, il faut le recours dapplications dveloppes en XML (XSLT) ou en dautres langages (feuilles de styles CSS, liaisons de donnes, javascript, PHP, JAVA,). 1.4.1. LA FEUILLE DE STYLE CSS Rcuprer le document menu.xml et associer la feuille de style menu.css en inscrivant dans le prologue :
page 107
1.4.2. LA LIAISON DE DONNEES (DATA BINDING) Ouvrir le document EXAUDIOCD0.xml et la page html ACTUATAB.html dans lditeur de texte, puis afficher la page laide dInternet explorer. Revenir lditeur de texte et modifier le nom du document xml lier la page (dans la balise xml valeur de lattribut src= " EXAUDIOCD1.xml ").
1.4.3. LA LIAISON A LA FEUILLE DE STYLE XSLT Pour optimiser au mieux lexploitation des bases de donnes sur le Web, lutilisation de XSLT savre pratique et essentielle pour transformer et reformuler les donnes dans un cadre dchange dinformations structures. Pour raliser la transformation, un interprteur XSLT est ncessaire (processeur XALAN, MSXML, SAXON, XML Oracle, ). Il requiert deux lments : une arborescence de nuds source et une feuille de style XSLT contenant un ensemble de rgles de transformation. La feuille de style XSLT est un document XML qui utilise un vocabulaire spcifique (prdfini) de lespace de nom XSL, pour dcrire la transformation dun document source XML. La feuille de style contient des templates (modles) qui dfinissent les rgles appliquer aux nuds. Ces nuds sont slectionns par le biais dune expression Xpath (recommandation du W3C) sinscrivant comme valeur dun attribut match de llment dcrivant la rgle.
page 108
1.4.4. UNE FEUILLE DE STYLE POUR LE TRI Ouvrir le document INVENTAIREVIII.xml et la feuille de style FSINVENTAIREVIII.xsl dans lditeur de texte. Vrifier la liaison dans le document xml, puis lafficher laide dInternet explorer. Revenir lditeur de texte et modifier la commande de tri ([@EnStock ! ='oui'] pour afficher la liste des livres qui ne sont pas en stock.
Remarque :
XSL est une application XML. Cest un langage de feuilles de style avanc, dvelopp expressment pour uvrer avec les documents XML. Il offre les avantages dun affichage plus prcis que les feuilles de style CSS et des fonctionnalits puissantes dans le traitement des donnes (tri, slection transformation, conversion et connexion aux bases de donnes). XSLT le langage de transformation, agit avec un interprteur appel processeur xslt qui est intgr aujourdhui dans les principaux navigateurs.
page 109
Des outils pour le web
DES OUTILS POUR LE WEB

1. 1.1. SYSTEMES DE GESTION DE CONTENU (SGC CMS) LES OUTILS DE SITE WEB DE TYPE DITORIAL
Les CMS (Content Management System) ou en Franais SGC (Systmes de Gestion de contenu), sont des outils ddis au Web pour les sites de type ditorial. Cela regroupe les magazines Web, les vitrines, les blogs, les bases de connaissance (wikis) avec comme point commun dtre bass sur du contenu texte, image ou vido. On distingue deux types de gestionnaires : Ceux qui ne ncessitent pas de dveloppement. Ils sont bass sur php/MySQL. Par exemple : Spip, EZpublish, Dupral, Wordpress Ceux avec dveloppement. Ils sont bass sur JAVA. Par exemple : Jahia, LENYA Les fonctions principales de ces outils sont la publication (interface publique) et ladministration (interface prive) pour crer des modles de pages (appels des templates), des flux de copies valider et grer des fonctionnalits tels les RSS 1.2. LE PRINCIPE DE BASE
Des contenus et des contenant en attente de validation pour la publication
page 110
1.3.
LE BLOG WORDPRESS
Une plateforme de publication personnelle. 1.3.1. UNE INSTALLATION EN 5 MIN Ouvrir phpMyAdmin et crer une base de donnes (par exemple "Webpresse"). Puis quitter lapplication. Trouver larchive de WordPress dans le rpertoire wordpress du stage. Prendre larchive la plus rcente et dcompresser la dans le rpertoire www de wamp. Larchive regroupe le rsultat de la dcompression dans un rpertoire wordpress.
les rpertoires enfants de wordpress. Dans le rpertoire principal, ouvrir dans lditeur le fichier : "wp-config-sample.php" Complter les informations lies la base de donnes nouvellement cre "Webpresse". Par exemple :
Enregistrer le fichier modifier sous : "wp-config.php" Puis lancer lapplication install.php du rpertoire wp-admin avec le navigateur. Inscrire dans la barre dadresse : http://localhost/wordpress/wp-admin/install.php Suivez les indications puis retenez le mot de passe. Une fois linstallation termine le script renvoie vers la page de connexion.
page 111
Se connecter avec lidentifiant "admin" et le mot de passe gnr durant linstallation. Une fois linterface du blog affiche
cliquer sur "votre profil" pour modifier le mot de passe.
page 112
page 113
1.3.2. EDITER UN ARTICLE AVEC WODPRESS Revenir au tableau de bord de wordpress et cliquer sur longlet " Ecrire " puis crire un article
et lditer.
page 114
19 octobre 2011

Langages Et Outils de L'environnement Web

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Langages Et Outils de L'environnement Web

Diunggah oleh

Hak Cipta:

Format Tersedia

SUPPORT STAGIAIRE

LANGAGES ET OUTILS DE L'ENVIRONNEMENT WEB

LES FONDEMENTS DU WEB STATIQUE...........................................................14

LE WEB ORIENTE CLIENT .................................................................................31

2.1. 2.2. 2.3. 3.

TRANSFERT DE DONNES CLIENT - SERVEUR ............................................. 56

LES FONDEMENTS DU WEB ORIENTE SERVEUR .......................................... 64

LA PLATE-FORME DE DEVELOPPEMENT WEB.............................................. 87

LES FONDEMENTS DU WEB 2.0......................................................................103

LE STANDARD DECHANGE ............................................................................105

DES OUTILS POUR LE WEB ............................................................................110

Les tapes cls des technologies du WEB

LES TAPES CLS DES TECHNOLOGIES DU WEB

LE DEBUT DU WEB STATIQUE - 1990 NAISSANCE DE LARCHITECTURE CLIENT-SERVEUR

BASES DU PRINCIPE DE FONCTIONNEMENT CLIENT - SERVEUR

Langages et outils de l'environnement Web

Les tapes cls des technologies du WEB

Langages et outils de l'environnement Web

Les tapes cls des technologies du WEB

FONCTIONNEMENT DES SITES INTERACTIFS CT CLIENT

Langages et outils de l'environnement Web

Les tapes cls des technologies du WEB

Langages et outils de l'environnement Web

Les tapes cls des technologies du WEB

Langages et outils de l'environnement Web

Les tapes cls des technologies du WEB

Langages et outils de l'environnement Web

Les tapes cls des technologies du WEB

FONCTIONNEMENT DES APPLICATIONS RICHES

Langages et outils de l'environnement Web

les fondements du web statique

LES FONDEMENTS DU WEB STATIQUE

LES PROTOCOLES DE COMMUNICATION DU WEB

Langages et outils de l'environnement Web

les fondements du web statique

Langages et outils de l'environnement Web

les fondements du web statique

Langages et outils de l'environnement Web

les fondements du web statique

LE NAVIGATEUR OU LE CLIENT GNRALITS

Langages et outils de l'environnement Web

les fondements du web statique

Langages et outils de l'environnement Web

les fondements du web statique

LHYPERTEXT MARKUP LANGUAGE - HTML

La dclaration du document XHTML

Langages et outils de l'environnement Web

les fondements du web statique

Le prologue et la racine dun document XHTML

Langages et outils de l'environnement Web

les fondements du web statique

agents utilisateurs dInternet.

Langages et outils de l'environnement Web

les fondements du web statique

Langages et outils de l'environnement Web

les fondements du web statique

recette_pomme.html recette_lasagne.html recette_paupiette.html recette_philtre.html

Langages et outils de l'environnement Web

les fondements du web statique

LE SERVEUR WEB GNRALITS

Langages et outils de l'environnement Web

les fondements du web statique

Langages et outils de l'environnement Web