Support de cours avancé sur les opérations d’Ajax


Télécharger Support de cours avancé sur les opérations d’Ajax

★★★★★★★★★★3.5 étoiles sur 5 basé sur 1 votes.
Votez ce document:

Télécharger aussi :


Support avancé sur les opérations d’Ajax en pratique

...

Les points importants vous donneront des informations de caractère général, nécessaires à toute personne voulant comprendre le fonctionnement du web dynamique.

Pour une acquisition des techniques présentées dans ce cours, nous vous demandons d’effectuer les exercices progressifs référencés ici. Les exercices les plus simples seront inclus dans le texte du cours. Les TP un peu plus complexes seront indiqués par un renvoi aux TP.

Le paragraphe ci-dessous est un exemple d’annotation. Les annotations contiennent des informations inutiles à l’acquisition directe des compétences du cours, mais permettant parfois d’aller plus loin.

Ces annotations regroupent les digressions, les informations touchant à la culture générale, les idées du professeur, ses doutes et ses humeurs. Les annotations peuvent servir aussi à présenter un concept important mais développé à la fin du cours (par exemple AJAX). Le contenu du cours est ainsi hiérarchisé comme une araignée tisse sa toile : quelques fils de départ donnent la forme globale. Cette structure est rapidement complétée d’un maillage grossier. Progressivement, les larges mailles se remplissent d’un nouveau tissage, qui les sépare en mailles plus fines.

1.4 Prérequis du cours

Ce cours s’adresse à des étudiants ayant au moins une petite connaissance de la programmation. Vous devez savoir ce qu’est une variable, et être capable de mettre en œuvre une boucle simple.

Il s’agit d’une initiation ; aucune connaissance du web n’est donc requise, en dehors bien sûr de celle que doit avoir un utilisateur habituel d’Internet. Pour faire les exercices, vous devez aussi savoir utiliser un éditeur de texte, comme Notepad, ou le Bloc-notes de Windows, ou mieux encore : Notepad++.

Avant de parler du web dynamique, nous décrirons les techniques de base du web statique. Dynamique ou statique, le fonctionnement du web repose sur des langages et des logiciels variés. Leur découverte en un seul cours vous demandera un peu d’agilité intellectuelle.

  La difficulté principale est de bien identifier, lorsque vous traitez une opération, sur quel logiciel, ou sur quel langage vous êtes en train de travailler.

Pour mettre en œuvre les exercices et les travaux pratiques, vous devez naturellement disposer d’un ordinateur. Certains exercices et TP requièrent que vous disposiez des droits d’administrateurs, pour installer et configurer le serveur. Si vous ne disposez pas d’un serveur, vous pouvez utiliser les pages perso de certains fournisseurs d’accès, comme free.fr ou freesurf.fr, mais pour des raisons de commodités, je vous recommande d’installer au moins easyPHP sur votre ordinateur.

Aucune connaissance des SIG ni des SGBD n’est requise.

2 Le Web Statique

2.1 l’architecture client-serveur 2.1.1 clients et serveurs

Lorsqu’on connecte les ordinateurs en réseau, il devient intéressant de concentrer certaines ressources (c'est-à-dire des informations et des programmes) sur un seul ordinateur, et de permettre aux autres ordinateurs de se servir de ces ressources uniquement lorsqu’ils en ont besoin. C’est l’architecture client-serveur.

  Le serveur, c’est l’ordinateur sur lequel se trouve une ressource.

Le client, c’est l’ordinateur qui a le droit d’accès à la ressource sur le serveur

figure 1 - schéma de l’architecture client-serveur. Plusieurs clients partagent les fichiers, les applications et les bases de données placées en partage sur un serveur. Le trait pointillé entre le serveur et les client illustre le fait qu’un client et un serveur peuvent être très éloignés l’un de l’autre, par exemple lorsqu’on utilise Internet. A côté des clients, le serveur possède un administrateur, qui l’alimente en données, en programme et en base de données.

Les avantages de l’architecture client-serveur sont :

o une économie d’espace mémoire (tous les postes clients vont chercher l’information en fonction de leurs besoins, et ne doivent pas la stocker durablement)

o une garantie de cohérence (à chaque instant, le serveur constitue un référentiel unique, identique pour tous les clients, alors qu’une duplication sur chaque poste client entraîne généralement une divergence entre les différentes versions, et une perte du référentiel commun). Cette garantie de cohérence est particulièrement souhaitable lorsque l’information subit des mises à jour.

o Une maîtrise du service (le gestionnaire du serveur contrôle ce que les programmes clients peuvent faire ou ne pas faire sur le serveur).

Le premier avantage est de nature physique. Les deux autres touchent directement à l’organisation du travail et des processus.

Lorsqu’on parle de « client » et de « serveur », il peut s’agir à la fois de l’ordinateur et du programme qui tourne sur cet ordinateur.

Dans la suite de ce cours, « client » et « serveur » désigneront les programmes. Les ordinateurs seront explicitement désignés par « ordinateur client » et « ordinateur serveur ».

2.1.2 application à Internet

Internet est l’exemple extrême d’architecture client-serveur : chaque serveur est potentiellement accessible par des millions de clients. On peut dire que le Web illustre de manière aiguë les avantages de l’architecture client-serveur : chacun est libre de décider de ce qu’il met en ligne, chacun possède en permanence le droit d’accéder à un volume de données plus d’un million de fois supérieur à ses capacités de stockage personnelles.

Sur le web,

o le serveur s’appelle « serveur internet ». Le programme le plus utilisé est Apache.

o le client s’appelle navigateur, (ou bien browser, ou butineur). Les programmes les plus utilisés sont Internet Explorer et Firefox, puis Opera.

Dans le cadre de ce cours, nous utiliserons le serveur Apache, et le navigateur FireFox. Pour la programmation de site web, il est recommandé de tester chaque page avec Internet Explorer et FireFox.

2.2 les protocoles

2.2.1 Qu’est-ce qu’un protocole ?

Un protocole est une convention de communication entre deux ordinateurs. Lorsque deux ordinateurs communiquent entre eux, ils utilisent à chaque fois plusieurs protocoles en même temps, et ces protocoles sont inclus les uns dans les autres.

  Le dialogue entre le client et le serveur repose sur toute une série de protocoles imbriqués les uns dans les autres.

J’ai longtemps eu du mal à comprendre cette histoire de protocoles imbriqués. Le plus simple pour le comprendre est de se représenter le protocole comme un langage. Lorsque vous écrivez un message à un autre être humain, vous tracez des signes sur du papier. Le fait de tracer des signes au stylo ou à la plume sur un post-it que l’on colle sur le frigo, c’est le premier niveau du protocole. En informatique, on parle de protocole physique, car nous sommes ici au niveau du signal physique. Pour le post-it collé sur le frigo, cela signifie par exemple « liste de courses ».

Notre message est ensuite composé de lettres. On peut dire que la convention alphabétique est le premier protocole logique de votre communication. D’autres humains utilisent d’autres protocoles, par exemple les idéogrammes ou les syllabaires.

Ensuite, les lettres sont regroupées en mots. Chaque mot porte un sens : c’est le lexique. La convention lexicale est le deuxième protocole de votre communication. Les mots sont eux-mêmes regroupés en phrases, selon les règles de la grammaire : la grammaire de la phrase est le troisième protocole de la communication. Avec les mêmes mots, vous pouvez utiliser des grammaires différentes. Par exemple, si Adeline laisse à Barnabé une liste de courses sur un post-it, elle utilise une énumération à la place de la grammaire française.

L’analogie de l’emboîtement des protocoles ne doit pas être poussée trop loin. La grande différence, en particulier, c’est que pour écrire un message, Adeline doit maîtriser tous les protocoles. Au contraire, dans un programme informatique, les protocoles sont encapsulés les uns dans les autres, et un programme qui utilise le protocole de plus haut niveau ne doit pas utiliser les protocoles de niveaux inférieurs (ou en tout cas ne devrait pas les utiliser). Le protocole de plus haut niveau est là pour masquer, ou "encapsuler" ceux de niveau inférieur.

2.2.2 Les protocoles d’Internet 2.2.2.1 TCP/IP

Le protocole de base qui structure Internet (pas seulement le web, mais aussi les autres composantes d’Internet, comme le FTP et le mail) s’appelle TCP/IP. De fait, il s’agit déjà de deux protocoles imbriqués : TCP et IP.

TCP/IP permet de transformer les signaux physiques en information numérique. Dans la programmation d’un site web, on utilise un protocole logique qui s’appuie sur TCP/IP, et le navigateur n’a pas connaissance de ce protocole : TCP/IP n’est mentionné ici que pour information, et nous n’en parlerons plus dans la suite du cours.



2.2.2.2 HTTP – le protocole du web

Au dessus de TCP/IP, le web repose sur le protocole HTTP. HTTP est le protocole spécifique du web. HTTP signifie : Hyper-Text Transfert Protocole

HTTP est donc la langue dans laquelle le serveur et le client dialogue.

Pour explorer les arcanes de ce protocole HTTP, je vous conseille de lire l’excellent chapitre 14 du livre sur Java dans la collection O’Reilly. Le livre se trouve à la bibliothèque de l’école. D’autres références sont faciles à trouver sur Internet.

2.3 le serveur

Le serveur joue en premier lieu un rôle de distributeur de fichiers. Autour de ce rôle de serveur de fichiers, il peut rendre diverses sortes de services.

2.3.1 le serveur, un serveur de fichiers

Le rôle du serveur est d’abord d’aller chercher, lorsqu’on lui en fait la requête, le fichier réclamé, puis de le renvoyer au demandeur.

 1 Requête HTTP

navigateur serveur internet

IE, Netscape, Apache

Firefox, etc.

figure 2 -l’itinéraire d’une requête : 1- le navigateur demande un fichier au serveur, 2-le serveur va chercher le fichier dans son système de fichier, 3-le serveur poste le fichier au navigateur, 4- le navigateur reçoit le fichier et l’affiche.

2.3.2 le répertoire racine

Lorsque vous consultez une page internet, vous n’avez accès qu’à une petite partie des fichiers installés sur la machine serveur.

  C’est aussi le rôle du serveur de limiter la zone à laquelle les clients peuvent avoir accès.

Cette limitation de la zone accessible depuis l’extérieur est absolument nécessaire pour des raisons de sécurité.

Le répertoire accessible depuis l’extérieur, que nous appellerons le répertoire de la racine web, est défini par l’administrateur. Sur Apache, la configuration de ce répertoire se fait au moyen de l’expression suivante :

DocumentRoot "c:/Apache/visibleWeb"

Cette ligne de configuration est placée dans le fichier qui regroupe la plupart des variables de configuration d’Apache, nommé httpd.conf, que l’on trouve dans le dossier conf.

 c:\

figure 3. Seule une petite partie des répertoires du serveur est accessible depuis Internet.

2.3.3 affichage des dossiers

Sur certains sites internet, lorsqu’on tape un nom de répertoire on voit apparaître le contenu du répertoire, avec tous ces fichiers.

En revanche, lorsque dans la barre d’adresse de mon navigateur, je tape www.ensg.eu, je ne vois pas le contenu du répertoire racine, mais j’obtiens le même résultat que si je tapais www.ensg.eu/index.html. De fait les deux adresses pointent sur un seul fichier : index.html.

  C’est encore le rôle du serveur que de traiter les requêtes sur les répertoires : le serveur cherche le fichier nommé index.html dans le répertoire. Si un tel fichier s’y trouve, il le renvoie au client. Sinon, il lui renvoie le contenu du répertoire.

En fait, c’est l’administrateur du serveur qui définit les noms possibles pour les fichiers d’index. La configuration de la liste des noms d’index se fait au moyen de la ligne suivante :

DirectoryIndex index.html, index.php, index.php3, pantagruel.php

Avec cette configuration, le serveur teste d’abord s’il existe dans le répertoire un fichier index.html. S’il n’existe pas, il teste ensuite successivement l’existence des fichiers index.php, index.php3, pantagruel.php. Le premier fichier trouvé est renvoyé au client. Si aucun des quatre n’est trouvé, le serveur renvoie le contenu du répertoire.

2.3.4 Les erreurs

Le serveur est aussi responsable de la gestion des erreurs dans la connexion avec le client. Utilisateurs d’Internet, vous avez déjà eu l’occasion de rencontrer l’erreur 404, lorsque le client réclame un fichier que le serveur ne trouve pas. Il existe d’autres erreurs, dont les codes sont spécifiés par HTTP.

C’est le serveur qui génère la page d’erreur, avec son code, et les éventuelles explications.

2.3.5 Conclusion

Le serveur ne joue donc pas seulement un rôle de distributeur : il rend par ailleurs une série de services annexes. Certains de ces services sont fixés par le protocole HTTP. D’autres sont contraints par Apache, ou paramétrés par son administrateur.

Les quelques services listés ci-dessus ne représentent qu’une toute petite partie des services rendus par le serveur.

Parmi les autres services, il y en a un qui est assez important, c’est la gestion du cache. Le cache, c’est une portion de la mémoire de l’ordinateur client qui est réservée au stockage des pages web qu’on a déjà visitées dans le passé. Lorsque vous tapez l’adresse d’un fichier, par exemple www.ensg.ign.fr, votre navigateur regarde si le fichier se trouve dans son cache. Si le fichier demandé est présent, et s’il n’est pas trop vieux, le navigateur décide de ne pas le redemander au serveur. Ainsi, on économise de la bande passante.

La gestion du cache est assurée à la fois par le serveur et par le navigateur. Pour plus de précision sur le cache, reportez vous aux spécifications de HTTP. Pour résoudre un problème technique rapidement, consultez les documentations en ligne de PHP et HTML (fonction header(), tag META). Quelques pistes dans les liens suivants :

Attention, le cache ne concerne pas seulement la machine client : il peut y avoir un ou plusieurs caches sur la machine serveur, en particulier dans le cadre du Web dynamique. Certaines applications de web dynamique permettent de gérer explicitement le cache (voir par exemple Spip, CartoWeb, etc.), mais cela dépasse le cadre de ce cours.

2.4 le client

2.4.1 le langage HTML

HTML signifie : Hyper Text Mark-up Language, c’est-à-dire langage d’hyper-texte fondé sur des balises.

Qu’est-ce qu’un document d’hyper-texte ? C’est un document qui permet de passer à un autre document lorsqu’on clique sur une zone prévue pour cela et appelée lien hyper-texte. Chaque document peut porter plusieurs liens hyper-texte, ce qui permet à chaque internaute de piloter sa lecture parmi les différents documents qui lui sont accessibles.

  HTML est un langage de structuration de document pour la navigation en hyper-texte. La structure du document est codée au moyen des balises.

Qu’est-ce donc qu’une balise ? Le mieux est de prendre un exemple :

Ceci est un paragraphe que je peux remplir de blabla

Explication :

o On commence un paragraphe avec la balise

. C’est la balise ouvrante.

o Une balise, c’est tout ce qui se trouve entre < et >.

o On ferme le paragraphe avec la balise

. Une balise fermante présente la même forme qu’une balise ouvrante avec seulement le '/' devant le nom de la balise.

o Entre la balise ouvrante et la balise fermante, nous avons un objet paragraphe. Cet objet paragraphe contient du texte.

C’est ce texte que nous voyons apparaître à l’écran dans le navigateur. Les balises n’apparaissent pas : elles sont là pour donner une structure au document.

Un fichier HTML est constitué de morceaux de textes structurés par des balises. Le navigateur interprète les balises pour donner une mise en page au texte.

Lorsque vous avez un acronyme informatique qui finit par « ML », il y a de fortes chances pour que ce soit un langage à base de balises. Les seules exceptions que je connaisse sont UML (unified modelisation language) et YAML (YAML Ain't Markup Language – acronyme récursif pour un langage de structuration de données qui n’est justement pas un langage à base de balises) ; dans tous les autres cas, ML signifie « mark-up language ».

Exercice 1 :

  1. tapez l’exemple précédent dans un éditeur de texte. Enregistrez-le, dans un fichier exercice1.html, puis ouvrez le dans votre navigateur.
  2. le langage HTML n’est pas un protocole. Pouvez-vous dire pourquoi ?

 Pour en savoir plus, vous pouvez commencer le chapitre « premier pas avec HTML ». 2.4.2 CSS et feuilles de style

Le langage CSS permet de définir des styles que l’on va associer au code HTML. Ces styles permettent de donner une forme homogène à une page HTML, voire à tout un site. On peut modifier ainsi l’aspect de plusieurs pages en changeant simplement une seule feuille de style.



 Pour en savoir plus, vous pouvez commencer à lire « premier pas avec CSS ». 2.4.3 l’inclusion d’une image

Comment se passe l’inclusion d’une image dans un document HTML ? Nous allons décrire ce fonctionnement, qui permet d’illustrer le fonctionnement du client et du serveur.

Dans le code HTML, une image est représentée par la balise suivante :

Décomposons :

- img : on ouvre un objet image. Comme il n’y a pas de texte dans une image, la balise fermante est inutile. img, le premier mot de la balise, définit la nature de cette balise : ici, une image. On dit que c’est le nom de la balise. Tout ce qui suit correspond aux attributs de cette balise.

- src="carte.gif" : le navigateur pourra afficher l’image en allant chercher le fichier spécifié ici.

- width="180" : largeur,

- height="90" : et hauteur, en pixels, de l’image à l’écran

Ces deux derniers attributs sont optionnels. Si ils sont omis, l’image apparaîtra selon ses dimensions d’origine. Si on met un seul des deux attributs de dimension, le deuxième est recalculé selon les proportions de l’image d’origine. On peut préciser d’autres attributs, par exemple border pour mettre un cadre autour de l’image.

 Ce que nous devons noter, c’est que l’image ne se trouve pas stockée dans le code HTML. Ce qu’on trouve dans le code HTML, c’est l’adresse de l’image. Le navigateur charge donc la page en deux temps :

figure 4 - Affichage d’une page avec une image. 1- appel de la page HTML. 2- le serveur va chercher le fichier HTML, 3- et l’envoie au client. 4- le client affiche le fichier : comme il y a une image dedans, il réserve la place pour l’image, et il appelle le fichier de cette image sur le serveur. 5- Le serveur attrape l’image, et 6- la renvoie au client. 7- le client reçoit l’image et l’insère dans la page.

2.4.4 - les plug-in

le navigateur ne permet pas de tout faire. Pour étendre les capacités des navigateurs, il est possible de leur brancher des programmes additionnels. Ce sont les plug-in.

Le plug-in est un programme indépendant que l’on peut lancer depuis une page HTML, et qui fonctionne à l’intérieur de la page. Par exemple, la page HTML peut contenir un film, ou bien une musique. Ce film ou cette musique ne sont pas codé sous forme HTML (langage totalement incapable de coder de la musique ou des images animées). La page HTML contient :

o le nom du fichier correspondant au film ou au morceau de musique

o le nom du programme (du plug-in) qui doit servir à interpréter le fichier. Si le plug-in n’est pas précisé, le navigateur peut le déterminer automatiquement en fonction de l’extension du fichier.

o quelques informations précisant la façon dont le plug-in s’insère dans la page HTML.

Seul le nom du fichier est obligatoire. Si le plug-in n’est pas précisé, le navigateur peut le déterminer automatiquement en fonction de l’extension du fichier. Les informations précisant la façon dont le plug-in s’insère dans la page HTML dépendent de la nature de chaque fichier. Par exemple, pour un film, il faut préciser la dimension de l’écran dans lequel apparaîtra l’image. Ces informations sont inutiles pour un morceau de musique.

L’exemple le plus connu de plug-in est Flash. En affichage cartographique, on utilise aussi des plug-in pour interpréter le langage SVG. Nous aurons l’occasion de parler de ces deux plug-in dans d’autres cours. Mais de nombreux autres plug-in sont très utilisés : Mediaplayer, CosmoPlayer. La machine virtuelle Java joue aussi le rôle de plug-in.

3 Le web dynamique – l’architecture

Le Web que nous avons décrit jusqu’ici est purement statique : chaque adresse correspond à une page, et chaque page est un fichier qui s’affiche de manière univoque sur votre navigateur.

Avec le web dynamique, nous allons avoir des pages qui pour une même adresse peuvent prendre des formes différentes selon les actions de l’utilisateur.

Pour obtenir une page changeante, nous disposons de deux techniques :

- soit c’est le serveur qui construit une nouvelle page, qu’il envoie au client (scripts côté serveur)

- soit le client reçoit une page fixe, et il modifie cette page (scripts côté client)

Dans la pratique, nous verrons que les deux méthodes peuvent être utilisées sur la même page, mais comme elles reposent sur des techniques différentes, et qu’il ne faut pas les confondre, nous allons les décrire séparément.

3.1 script côté serveur – PHP

Sur le serveur, il est possible de faire tourner des programmes qui vont générer automatiquement du code HTML. PHP est l’un des langages de script côté serveur, et probablement le plus utilisé. Nous allons voir comment fonctionne ce langage.

  Le code PHP est constitué de morceaux de script, inclus dans du code HTML. Lorsque le fichier PHP est interprété, les morceaux de scripts affichent les parties variables de la page. Le code HTML reste inchangé : il représente les parties fixes.

1 Requête HTTP

figure 5. 1- Le serveur Apache reçoit la requête HTTP. 2-Il va chercher le fichier PHP correspondant. 3- il identifie que ce fichier est un fichier PHP, et il l’envoie au module qui interprète les scripts PHP. 4- le module d’interprétation génère du code HTML, qui est posté vers le client. 5- Le client affiche le code HTML comme si c’était une page normale.

Voici un exemple de code PHP :

 

Bonjour , je suis heureux de vous voir

Toutes les zones encadrées "" sont considérées comme du code PHP, et interprétées par le serveur. Ici, la première ligne est une affectation de variable. La deuxième ligne effectue un affichage au moyen de l’instruction echo.

L’affichage se fait dans le code HTML,

à l’endroit où se trouve l’instruction echo.

Au final, l’interpréteur PHP produit le code HTML suivant :

Bonjour Victor Hugo, je suis heureux de vous voir

C’est ce code HTML que le client va recevoir.

Tel qu’il est présenté ici, le code PHP n’est pas très intéressant, car la variable $nom est équivalente à une constante. Mais les variables PHP jouent réellement le rôle de variables lorsque leur valeur est déterminée ailleurs que dans la page PHP : les scripts peuvent recevoir des variables depuis un formulaire HTML, ou bien encore ils peuvent aller les chercher dans une base de données.

 Pour en savoir plus, vous pouvez commencer à lire « premier pas en PHP ».

Il existe d’autres langages qui permettent de construire des applications web dynamiques. Le concurrent direct de PHP est ASP, le produit de Microsoft. On peut citer aussi Python et Perl.

3.2 Accès aux bases de données

Sur la figure 5, PHP était branché sur MySQL. MySQL est un SGBD (Système de Gestion de Base de Données), c’est-à-dire un programme qui assure la cohérence, le stockage et l’interrogation des données dans une base de données.

  Toutes les données importantes d’un site web doivent être stockées dans une base de données.

Parmi les nombreux SGBD du marché, il faut en connaître quelques uns de nom :

o Oracle est le SGBD historique. C’est la solution la plus robuste, la solution commerciale la plus utilisée. C’est aussi la plus chère.

o MySQL est un SGBD relativement simple, gratuit et très populaire. Il est recommandé pour les prototypes et pour les applications simples. Le logiciel SPIP, par exemple, utilise mySQL.

o PostGreSQL est un peu plus compliqué que MySQL. Il est gratuit lui aussi. Il comporte un module spatial (la cartouche spatiale) qui permet de manipuler de l’information géographique. Le module spatial de PostGreSQL se nomme PostGIS.



990