Premières applications Web 2.0 avec Ajax et PHP

475 Pages·2007·13.93 MB·French

12090_Web2etAjax_XP 11/12/07 16:37 Page 1
Web 2.0 e
Premières applications c
n
Premières applications
a
Ajax PHP
r
f
et e
avec
D

Jean-Marie M. Web 2.0
Ajax, la technologie phare des sites Web de nouvelle génération Defrance
- avec
Ajax s’est aujourd’hui imposé comme l’outil idéal pour créer des applications Web réactives, dotées d’interfaces Diplômé d’un DEA de J.
utilisateur riches et ergonomiques. Couplée à PHP-MySQL, cette technologie permet en outre d’échanger des
didactique de l’informatique,
données avec le serveur, de manière souple et rapide, et de les afficher dans le navigateur sans nécessiter de
Jean-Marie Defrance
rechargement. Ajax PHP
enseigne le multimédia à
Gobelins, l’école de l’image.
Réaliser ses premiers moteurs Ajax-PHP Il est par ailleurs directeur et
Grâce à 40 ateliers pratiques de difficulté croissante, cet ouvrage vous guidera pas à pas dans la construction d’un technique de l’Agence W,
moteur Ajax-PHP performant, en résolvant progressivement les principaux problèmes rencontrés dans la création société spécialisée dans
d’une application Ajax. Vous découvrirez en outre les multiples manières d’utiliser l’objet XMLHttpRequest pour le développement de sites
échanger avec le serveur des flux de données dans différents formats (texte, HTML, XML, JSON ou RSS). Vous dynamiques.
apprendrez également comment une application Ajax, côté client, peut gérer des informations stockées dans une 0
base de données MySQL via un script PHP. Enfin, pour mettre au point ces réalisations, ce livre propose diffé-
rentes techniques de débogage qui exploitent les fonctionnalités de l’extension Firebug de Firefox. .
2
Avec 40 ateliers pour réaliser
Concevoir une application performante Ajax-PHP avec jQuery
jQuery est une bibliothèque JavaScript qui permet en particulier de mettre en œuvre des applications Ajax de P facilement des moteurs Ajax-PHP
b
manière simple et rapide. Ce livre vous explique en détail comment exploiter cette bibliothèque sur votre site pour
augmenter votre productivité et la fiabilité de vos développements. Il présente en outre une sélection de plug-ins avec JavaScript ou jQuery
e
issus de jQuery capables de créer des applications Ajax et autres widgets avec une facilité déconcertante. Pour
compléter votre apprentissage, la dernière partie de l’ouvrage est consacrée aux différentes technologies associées WH
à Ajax (XHTML, CSS, XML, JavaScript, DOM, PHP et MySQL), en exposant pour chacune d’elles les connaissances
nécessaires à la compréhension du livre.
P
Au sommaire s
n
PartieI. Introduction à Ajax•Chronologie du Web•Ajax, un acteur du Web 2.0•Comment fonctionne Ajax?
•HTTP et l’objet XMLHttpRequest•PartieII. Environnement de développement•Firefox, navigateur et débo- o

gueur à la fois•Wamp5, une infrastructure serveur complète•Dreamweaver, un éditeur polyvalent•PartieIII. i t
t J e a n - M a r i e D e f r a n c e
Ateliers de création d’applications Ajax-PHP•Applications Ajax-PHP synchrones•Applications Ajax-PHP sans
a e
paramètres•Applications Ajax-PHP avec paramètres GET•Applications Ajax-PHP avec paramètres POST•
Applications Ajax-PHP avec réponses HTML, XML, JSON et RSS•Applications Ajax-PHP-MySQL•Bibliothèque c
jQuery • Plug-ins jQuery • Partie IV. Ressources sur les technologies associées • XHTML • CSS • XML • i x
l
JavaScript•Gestion du DOM avec JavaScript•PHP•MySQL•Annexes•Configuration d’une infrastructure p
serveur locale pour Mac•Test et débogage (PHP et JavaScript).
p a
a
À qui s’adresse cet ouvrage? j
s
@–– AÀ ctoeuusx cqeuui xS––s uoqTDuruéih ia llaéedlioct éegshsnuiiatrteere zgi nn wetta ézwav gpelwrepce .r recel 'donaadiidutsreitéoee m nsuàseor -nucetory ncerceote lrlvdeaoespirs.i dc deeoemxmsee manptp pdlleiecssa teaiotpn pdsli ecAsajt ai4ox n0cs o auWtpeleélbiee sr2 s.à 0 d PedHa Pln'o/sMu lveyrSuarQsgL eprojets Internet Code éditeur:G12090ISBN:978-2-212-12090-5 7822121209059 Conception: Nord Compo remière Avec
P
a
39,90 €
SHELLS Web2etAjax 7/12/07 14:35 Page 2
Premières applications
Web 2.0
Ajax PHP
avec et
01_pdt_defrance.indd 1 10/12/07 10:51:14
CHEZ LE MÊME ÉDITEUR
Du même auteur A. paTricio. – Hibernate 3.0.
N°11644, 2005, 336 pages.
J.-M. Defrance. – PHP/MySQL avec Dreamweaver 8.
N°11771, 2006, 632 pages. K. Djafaar. – Eclipse et JBoss.
N°11406, 2005, 656 pages + CD-Rom.
J.-M. Defrance. – PHP/MySQL avec Flash 8.
N°11971, 2006, 752 pages. J. Weaver, k. mukhar, j. crume. – J2EE 1.4.
N°11484, 2004, 662 pages.
G. leblanc. – C# et .NET 2.0.
Dans la même collection N°11778, 2006, 700 pages.
T. Templier, A. GouGeon. – JavaScript pour le Web 2.0. T. ZiaDé. – Programmation Python.
N°12009, 2007, 492 pages. N°11677, 2006, 530 pages.
M. plasse. – Développer en Ajax. O. Deckmyn, P.-J. GriZel. – Zope.
N°11965, 2006, 314 pages. N°11706, 3e édition 2005, 810 pages.
C. porTeneuve. – Bien développer pour le Web 2.0.
Bonnes pratiques Ajax.
N°12028, 2006, 560 pages. Autres ouvrages sur le développement Web
R. GoeTTer. – CSS 2. Pratique du design web. m. nebra. – Créer son site web en XHTML et CSS
N°11976, 2e édition 2007, 310 pages. (Accès libre).
N°11948, à paraître en octobre 2006.
H. WiTTenbrik. – RSS et Atom. Fils et syndications.
N°11934, 2006, 216 pages. D. mercer. – Créer son site e-commerce
avec osCommerce (Accès libre).
W. alTmann et al. – Typo3. N°11932, 2006, à paraître en octobre 2006.
N°11781, 2006, 532 pages.
D. shea, M. holZschlaG. – Le Zen des CSS.
D. Thomas, D. heinemeier hansson. – Ruby on Rails. N°11699, 2005, 296 pages.
N°11746, 2006, 590 pages.
V. caron, Y. forGeriT et al. – SPIP 1.8 (Les Cahiers
M. mason. – Subversion. du programmeur).
Pratique du développement collaboratif avec SVN. N°11428, 2005, 450 pages.
N°11919, 2006, 206 pages.
G. ponçon. – Best practices PHP (Architecte logiciel).
E. DaspeT eT c. pierre De Geyer. – PHP 5 avancé. N°11676, 2005, 490 pages.
N°12004, 3e édition 2006, 800 pages.
J. molière. – Cahier du programmeur J2EE.
M. kofler. – MySQL 5. Conception et déploiement J2EE.
Guide de l’administrateur et du développeur. N°11574, 2005, 234 pages.
N°11633, 2005, 692 pages.
R. fleury. – Cahier du programmeur Java/XML.
J. Dubois, J.-P. reTaillé, T. Templier. – Méthodes et frameworks : Ant, Junit, Eclipse, Struts-Stxx,
Spring par la pratique. Cocoon, Axis, Xerces, Xalan, JDom, XIndice…
Mieux développer ses applications Java/J2EE avec Spring, N°11316, 2004, 228 pages.
Hibernate, Struts, Ajax...
N°11710, 2006, 518 pages.
01_pdt_defrance.indd 2 10/12/07 10:51:14
SHELLS Web2etAjax 7/12/07 14:35 Page 1
Premières applications
Web 2.0
Ajax PHP
avec et
J e a n - M a r i e D e f r a n c e
01_pdt_defrance.indd 3 10/12/07 10:51:15
ÉDITIONS EYROLLES
61, bd Saint-Germain
75240 Paris Cedex 05
www.editions-eyrolles.com
Le code de la propriété intellectuelle du 1er juillet 1992 interdit en effet expressément la photocopie à
usage collectif sans autorisation des ayants droit. Or, cette pratique s’est généralisée notamment dans les
établissements d’enseignement, provoquant une baisse brutale des achats de livres, au point que la possibilité
même pour les auteurs de créer des œuvres nouvelles et de les faire éditer correctement est aujourd’hui
menacée.
En application de la loi du 11 mars 1957, il est interdit de reproduire intégralement ou partiellement le
présent ouvrage, sur quelque support que ce soit, sans autorisation de l’éditeur ou du Centre Français d’Exploitation du
Droit de Copie, 20, rue des Grands-Augustins, 75006 Paris.
© Groupe Eyrolles, 2008, ISBN : 978-2-212-12090-5
01_pdt_defrance.indd 4 10/12/07 10:51:16
Mise en page : TyPAO
Dépôt légal : janvier 2008
N° d’éditeur : 7736
Imprimé en France
01_pdt_defrance.indd 5 10/12/07 10:51:16
DEFRANCE Livre Page V Jeudi, 6. dcembre 2007 8:30 08
Remerciements
Je remercie Matthieu Montaudouin, Thorsten Kruske et Alain Bertaut pour leur aide dans
la rédaction de cet ouvrage ainsi que Matthieu Amiot et Claire Defrance pour leur colla-
boration dans la réalisation des illustrations.
DEFRANCE Livre Page VI Jeudi, 6. dcembre 2007 8:30 08
DEFRANCE Livre Page VII Jeudi, 6. dcembre 2007 8:30 08
Table des matières
PARTIE I – INTRODUCTION À AJAX
CHAPITRE 1
Chronologie du Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
1990 : début du Web statique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
1995 : le Web orienté client . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
2000 : le Web orienté serveur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
2005 : le compromis client-serveur tant attendu ! . . . . . . . . . . . . . . . . 8
Les tendances du Web 2.0 de demain. . . . . . . . . . . . . . . . . . . . . . . . . . . 9
CHAPITRE 2
Ajax, un acteur du Web 2.0 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
Les fondements du Web 2.0 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
Application Internet riche (RIA) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
Ajax, l’application Internet riche légère . . . . . . . . . . . . . . . . . . . . . . . . . . 11
Ajax, dans la droite ligne du Web 2.0 . . . . . . . . . . . . . . . . . . . . . . . . . . 12
La genèse d’Ajax . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
À quoi sert Ajax ? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
Actualisation d’information en tâche de fond . . . . . . . . . . . . . . . . . . . . . . 14
Complétion automatique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
Contrôle en temps réel des données d’un formulaire . . . . . . . . . . . . . . . . 15
Navigation dynamique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
Lecture d’un flux RSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
Sauvegarde de documents éditables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
DEFRANCE Livre Page VIII Jeudi, 6. dcembre 2007 8:30 08
Premières applications Web 2.0 avec Ajax et PHP
VIII
Personnalisation d’interface Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
Widget . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
Chargement progressif d’information . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
Moteur de recherche sans rechargement de la page . . . . . . . . . . . . . . . . . 17
Qui utilise Ajax ? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
Google suggest . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
Gmail . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
Google Maps . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
Yahoo! News . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
A9.com . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
Google Calendar . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
Netvibes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
Google Talk . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
Wikipédia . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
CHAPITRE 3
Comment fonctionne Ajax ? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
Ajax, un amalgame de technologies . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
Des ingrédients déjà opérationnels . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
JavaScript, le ciment des fondations d’Ajax . . . . . . . . . . . . . . . . . . . . . . . 21
Comparatif avec les applications Web traditionnelles . . . . . . . . . . . . 23
Fonctionnement d’une application Web statique . . . . . . . . . . . . . . . . . . . . 23
Fonctionnement d’une application Web dynamique . . . . . . . . . . . . . . . . . 23
Fonctionnement d’une application Ajax . . . . . . . . . . . . . . . . . . . . . . . . . . 24
Chronogrammes des échanges client-serveur . . . . . . . . . . . . . . . . . . . . 24
Chronogramme d’une application Web dynamique traditionnelle . . . . . . 24
Chronogramme d’une application Ajax en mode asynchrone . . . . . . . . . . 24
Les avantages d’Ajax . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27
Économie de la bande passante . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27
Empêche le rechargement de la page à chaque requête . . . . . . . . . . . . . . . 27
Évite le blocage de l’application pendant le traitement de la requête . . . . 27
Augmente la réactivité de l’application . . . . . . . . . . . . . . . . . . . . . . . . . . . 27
Améliore l’ergonomie de l’interface . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27
Les inconvénients d’Ajax . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27
Pas de mémorisation des actions dans l’historique . . . . . . . . . . . . . . . . . . 27
Problème d’indexation des contenus . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28
Dépendance de l’activation de JavaScript sur le navigateur . . . . . . . . . . . 28