nyroBlog
Bannière NyroBlog, par DëuG
Image par DëuG - ?

Tag : JavaScript


Tutoriel : transformer un site pour recharger les pages en Ajax

Aujourd'hui, j'ai implanté sur un site un chargement des pages en Ajax parce que le site intégre un petit lecteur son et couper le son à chaque fois et quelque chose qui n'est pas des plus agréable. Le résultat est le même site avec un rechargement des pages en Ajax, sans pour autant perdre en accessibilité, puisque la source HTML n'a été en aucun cas modifié.

J'ai fait ça rapidement en utilisant notamment grâce à jQuery. Comme la méthode utilisée peut servir à d'autres, je vais vous décrire étape par étape comment j'ai procédé.
Le site sur lequel j'ai réalisé ça était très petit est très simple : Amandine Café. Mais rien de mieux que de s'exercer sur un petit exemple pour ensuite l'appliquer à des projets plus conséquents.

L'étude du site actuel

La première chose à faire est de naviguer sur le site de fond en comble pour en déduire les zones fixes et les zones à recharger. Il faudra identifier quels liens vont recharger quelles zones, et tout ce que cela va engendrer au niveau de la page qui ne sera pas rechargé comme elle l'ai actuellement. On pense ici aux éventuels contrôles javascript qui peuvent ne pas fonctionner correctement. Il faut les noter pour les corriger au dernier moment.
Le tour du propriétaire s'est fait très vite pour moi puisque le site n'intègre pas de sous navigations et ne contient que 5 pages. On peut identifier 3 zones délimiter par des div avec les identifiants header, page et footer. Seule la div#page change selon les pages. C'est donc uniquement ce contenu que nous allons recharger en Ajax.

La préparation du côté PHP

Avant de s'attaquer au javascript, nous allons modifier les fichiers PHP de nos pages. Lors du chargement Ajax de nos pages, nous n'allons pas recharger la page complète, mais uniquement le contenu à modifier. Et pour plus de simplicité et de flexibilité du site, nous allons utiliser les mêmes URL que les liens réels. Il faut donc être capable du côté de PHP de n'afficher que le contenu demandé, sans les parties head de la page, ou les div fixes. Si vous ne pouvez –voulez– pas réaliser ceci, regarder du côté du petit bonus un peu plus bas...
Le plus simple pour réaliser ceci est de mettre les parties fixes dans des fichiers séparés, nommés au hasard header.php et footer.php. Ces fichiers sont inclus dans toutes les pages; ce qui est d'aileurs peut-être déjà le cas, grâce à include. Il va donc s'agir de n'afficher ses parties que lorsqu'on est pas dans une requête Ajax. Rien de plus simple, nous allons écrire une fonction PHP isAjax. L'inclusion des fichiers header.php et footer.php se fera donc à la seule condition que isAjax est faux. Autrement dit:
if (!isAjax())
    inlcude('header.php');

La fonction isAjax est, comme vous allez le voir, très très compliqué :
function isAjax() {
    return array_key_exists('HTTP_X_REQUESTED_WITH', $_SERVER);
}
En effet, jQueryPrototype aussi, je ne sais pas pour les autres– ajoute un élément HTTP_X_REQUESTED_WITH dans la requête que l'on peut récupérer avec la variable globale $_SERVER.
Nous en avons donc terminé avec la préparation des pages PHP, qui vont être capable de fournir des versions light des pages spécialement pour les requêtes Ajax.

L'installation du Javascript

Nous en arrivons donc à la programmation véritable des requêtes Ajax. Pour garder un site totalement accessible, qui fonctionnera exactement de la même façon sans Javascript, nous n'allons en aucun cas modifier les sources HTML des pages actuelles. Nous allons plutôt inclure jQuery dans toues les pages, et un autre fichier javascript contenant le code qui va arriver.
Le schéma du script sera le suivant :
  1. Au chargement de la page, intercepter tous les liens qui pointent vers des pages .php
  2. A ces liens, leur appliquer une fonction sur le click pour procéder à la requête Ajax plutôt qu'au changement de page
  3. Lors du click, appelez en Ajax la page demandée (avec la même url) et intégrer le résultat là où on le désire.
  4. Arrêter la propagation du click
Pour jQuery, on écrira ceci d'une façon très simple :
$(function() {
    $('a[href*=.php]').click(function() {
       $('#page').load(this.href);
return false;
    });
});
Très court, n'est-ce pas ?
Bien sûr, cet exemple ne fonctionnera pas dans tous les cas. Dans mon cas par exemple, je dois modifier l'identifiant du body en fonction de la page demandée pour changer le lien en marron du menu. Pour ce faire, on peut utiliser le 3ème paramètre de la fonction load qui sera appelé une fois le chargement ajax terminé. Voilà à quoi ressemble ma fonction :
$(function() {
    $('a[href*=.php]').click(function() {
        $('#page').load(this.href, null, function() {
        $('body').attr('id', this.href.substring(this.href.indexOf('.')));
        });
return false;
    });
});
Bon dans la réalité, ce n'est pas du tout ça, mais c'est car vraiment spécifique au site.

Petit Bonus

Si vous ne pouvez –voulez– pas mettre en place le découpage du fichier spécifique en PHP pour les reqêtes Ajax, ne jetez pas l'éponge tout de suite ! Il serait tout d'abord possible de mettre à jour la page complète, mais cela ne serait pas très propre et engendrai sûrement beaucoup d'autres problèmes.
Mais jQuery est là pour nous aidé. En effet, dans l'URL de la fonction load, il est possible de spécifier un sélecteur HTML pour filtrer le résultat et ainsi n'afficher que ce qui nous intéresse.
Dans mon exemple, l'appel à la fonction load deviendrait simplement :
$('#page').load(this.href+' #page');

Je ne vous conseille pas cette technique, puisque cela veut dire que vous allez recharger la page complète, donc on perd un peu l'utilité de l'Ajax qui est de réduire les transferts de données entre le client et le serveur.

Et si c'est plus compliqué ?

A vous de faire preuve d'imagination !
Comme j'ai déjà beaucoup réfléchi à la question, je vous donnerai plusieurs pistes d'ici une semaine au deux. Ce billet est déjà bien conséquent et vous pouvez déjà vous amuser. Enfin, j'espère que vous ne m'attendiez pas pour ça... Ou bien si vous avez un site sur lequel vous aimeriez implémenter une telle solution, demandez-moi et je ferai mon exemple dessus.

La parole est à vous !

Comment trouvez-vous ce billet ? Intéressant, totalement inutile, peut mieux faire ?
Avez-vous des questions par rapport à ça ? des suggestions ?
Utilisez les commentaires !

English Version of this post

Chips, Twix et Mix

Des news d'ici et d'ailleurs :

Pas forcément très variés comme info, mais c'est ce qui m'a intéressé ces 2 dernières semaines

PS : J'ai réfléchi longtemps pour le titre (que je n'ai pas encore trouvé en écrivant ça)

jQuery : coup de boost dans le développement

J'en parlai dans mon dernier billet, jQuery UI ne se développait pas ou on entendait pas du tout parler...

Cela va changer puisque le développeur principal de jQuery, Paul Bakaus, vient de se faire embaucher par Liferay pour développer jQuey UI et plus généralement jQuery afin d'utiliser cette librairie dans les produits qu'ils vendent.

Donc il va bien y avoir une personne qui va travailler à temps plein sur jQuery, de quoi avancer le projet à grands pas !

Plus qu'à attendre les premiers résultats de cette nouvelle.

Pantacourt et T-shirt

Un peu de nouvelles de Los Angeles, brut de pomme :

  • Fluidesign a déménagé depuis le début d'année. Nouvelle adresse, suivez le lien. Vue sur l'océan depuis la salle de réunion, grande classe pour commencer la semaine. Dans le même immeuble, deux étages plus bas, on trouve le fameux Habbo
  • J'en ai profité pour déménager pour ne pas me taper une heure ou plus de bus le soir... 10 minutes de bus pour aller au boulot, un peu moins pour la plage.
  • Fluidesign a ouvert son blog au grand public. Pas trop d'activité dessus, mais il est là quand même. Je n'aime pas du tout le graphisme, le précédent était plus sympa. Damned Designer!
  • Stage terminé depuis une semaine, je rempile pour 6 mois de plus chez Fluidesign avec énormément de boulot en ce moment.
  • le DUT SRC de Montbéliard fêtait ses 10 ans aujourd'hui à l'occasion de la journée des anciens, dommage que je sois à l'autre bout du monde. Rendez-vous pour les 15 ans !
  • Aujourd'hui peut-être promenade de 3 heures le long de la plage comme au premier jour. Pantacourt et T-shirt était de rigueur (d'où le titre du billet, juste pour narguer les lecteurs français qui sont dans le froid et que je vais rejoindre)
  • Retour en France pour 2 semaines vendredi prochain. Au programme : gala de gym dès l'arrivée, rendez-vous à l'ambassade pour obtenir un nouveau visa, soirées avec les amis, repas avec la famille, soutenance de stage, et encore plein d'autres choses.

Un peu de news logiciels, web, brut de pomme aussi :

  • jQuery sort en version 1.2.2; au menu 300% plus rapide pour la sélection d'éléments, fonctions au chargement de la page se font après le chargement des CSS, possibilité d'indiqué quel Mime-Type on veut lors d'une requête ajax, le scroll de la souris est maintenant gérer très facilement par un tout nouveau plugin. A quand des nouveautés dans jQuery UI ?
  • TinyMce sort sa version 3 en Release Candidate 2. Sortie prévue de la finale à la fin du mois. A mon avis elle n'arrivera qu'à la mi-février
  • Filezilla ajoute quelques fonctionnalités demandés : éditer les fichiers locaux par un clic droit > editer le fichier. Une nouvelle fonctionnalité absoluement démentiel a fait son apparition : la synchronisation entre les dossiers locaux et distants, avec retour visuel pour savoir si les fichiers ne sont présents que d'un côtés ou différent. Vous entrez dans un dossier d'un côté, l'autre se met à jour automatiquement. Un gain de temps énorme. Il me manque toujours une fonction indispensable pour moi : la configuration du double-clic. Après demande sur le forum, le développeur, botg, ne veut pas l'implanté car il considère que Filezilla n'est pas un explorateur de fichiers... Si vous voulez testez, pensez à mon convertisseur automatique et cmplet de config.
  • Veille info, mais je n'en avais pas parlé, et cela me tiens à coeur : Prism est un dernier né des labos de Mozilla et permet de mettre vos applis web dans une petite appli, différent de Firefox. Il utilise le moteur de Firefox 3, et est toujours en version beta. D'après ce que j'ai lu ici et là, la prochaine version ne saurait tardé. Je vois en Prism un moyen facile pour faire utiliser le moteur de Firefox à ses clients, et pourquoi pas proposer des administrations en XUL ?
  • Encore une vieille info : Android, la plateforme de l'open handset alliance issue du travail de google et open-source. 1er téléphone prévue pour la mi 2008, vraissemblablent un HTC.
  • Apple a sorti son MacBook Air : écran 13' qui rentre dans une enveloppe. Ok c'est super, tout petit et beau comme les autres produits Apple, mais c'est bien trop cher selon moi : 1699€. Autant s'acheter un macBook Pro pour 200€ de plus...

Multiple IE et Custom Buttons 2

J'ai indiquer il y a quelques jours la liste des extensions Firefox que j'utilise. Parmi elle se trouve Custom Buttons qui permet d'ajouter ces propres boutons à Firefox en réalisant ce que l'on veut, grâce à des fonctions JavaScript.

Et puis il existe un logiciel magnifique qui permet d'avoir les anciennes version d'Internet Explorer sur son Windows, en gardant son IE7 mis à jour : Multiple IE. Vous aurez donc la possibilité de tester vos sites depuis la version 3.0 de IE. Je n'en vois pas trop l'utilité, mais sait-on jamais...

Donc là où ça devient intéressant, c'est que l'on va pouvoir créer ses propres boutons dans son interface de Firefox pour directement lancer les instance IE différentes. C'est donc un IE View en plus avancé.

Et puis si vous avez d'autres navigateurs, vous pourrez les adapter comme bon vous semble !

Voici donc le code, à adapter selon les besoins, évidemment. Ici c'est pour IE7, installer normalement.
NB : tester uniquement sous Windows XP

var exeLoc = 'C:\\Program Files\\Internet Explorer\\iexplore.exe';
var url = gBrowser.currentURI.spec;
var app = Components.classes["@mozilla.org/file/local;1"].createInstance(Components.interfaces.nsILocalFile);
app.initWithPath(exeLoc);
var process = Components.classes["@mozilla.org/process/util;1"].createInstance(Components.interfaces.nsIProcess);
process.init(app);
process.run(false, [url], 1);

Vous l'aurez compris, il suffira de changer la variable exeLoc pour ouvrir la navigateur que vous voulez. Ne me demandez pas d'explications pour les lignes suivantes, je ne l'ai comprends pas complètement. Je sais juste que ça marche...

Et puis comme l'extension propose de copier les boutons directement en lien hypertexte, je vous livre les miens ici. Un simple clic pour les ajouter, après avoir installer l'extension bien sûr. Puis Personnaliser votre barre d'outils pour installer vos boutons là où vous voulez. Si besoin, faites un clic-droit sur le bouton et éditer le.