Artisan Numérique http://artisan.karma-lab.net/node/1273/atom/feed 2008-11-14T08:30:29+01:00 Drupal, Utiliser Ajax pour générer du contenu http://artisan.karma-lab.net/node/1273 2007-11-25T22:27:11+01:00 2008-11-14T08:30:29+01:00 Ulhume Dernièrement je faisais quelques recherches sur Drupal et AJAX pour me rendre compte qu'il y avait finalement assez peu de ressources, même en anglais, traitant de ce sujet. Pourtant cette technique, au delà du buzz généré autour d'elle, peut rendre de réels services et grandement fluidifier des interfaces trop lourds ou trop peu intelligent. Et pour simplifier son utilisation, rien de mieux que JQuery, inclus dans le coeur de Drupal depuis sa version 5.

]]> Dernièrement je faisais quelques recherches sur Drupal et AJAX pour me rendre compte qu'il y avait finalement assez peu de ressources, même en anglais, traitant de ce sujet. Pourtant cette technique, au delà du buzz généré autour d'elle, peut rendre de réels services et grandement fluidifier des interfaces trop lourds ou trop peu intelligent. Et pour simplifier son utilisation, rien de mieux que JQuery, inclus dans le coeur de Drupal depuis sa version 5.

Mise en oeuvre

L'exemple que je vais prendre ici est très simple et reprends l'exemple Ajax de l'horloge développé tour ici. Il s'agit simplement d'afficher une page Drupal, contenant une horloge dont l'heure est donnée, toute les secondes, par une requête Ajax.

Tout le jeu ici, est de s'intégrer parfaitement dans un module Drupal. Et ceci tant du point de vue de la page "horloge" (facile Wink que du serveur de requête Ajax (un peu moins facile..). Cela nous permet de faire des modules totalement autonomes utilisant Ajax, mais aussi de bénéficier de toute l'infrastructure de Drupal (base de données, thèmes, etc) au niveau du serveur Ajax. Et pour réussir cette intégration, nous allons simplement utiliser le système des callbacks, c'est à dire des menus Drupal redirigés sur des fonctions.

La première chose à faire est donc de créer un module de base (Si vous ne savez par où commencer, vous pouvez prendre cet exemple pour démarrer). Module que nous allons nommer exemple_ajax et activer dans Drupal.

Ceci fait, nous allons implémenter le hook _menu pour définir deux menus/callback. Le premier servira à afficher la page que l'on va ajaxifier (exemple_ajax/horloge) et le second va être notre source de donnée AJAX (exemple_ajax/getTime)

function exemple_ajax_menu($may_cache) {
    $items= array ();
    if ($may_cache) {} else {
        $path= drupal_get_path('module', 'exemple_ajax');
        drupal_add_js($path . './exemple_ajax.js');

        $items[]= array (
            'title' => 'Exemple AJAX',
            'path' => 'exemple_ajax/horloge',
            'callback' => 'exemple_ajax_horloge',
            'access' => TRUE,
        );

        $items[]= array (
            'path' => 'exemple_ajax/getTime',
            'callback' => 'exemple_ajax_getTime',
            'access' => TRUE
        );

Dans le code du hook, rien de particulier, si ce n'est la présence de la fonction drupal_add_js(...)à qui va demander à Drupal d'ajouter à la page générée, un lien vers un fichier javascript que nous allons bientôt créer (exemple_ajax.js).

Ensuite, nous codons la première callback qui est chargé de l'affichage de la vue, une simple description.

function exemple_ajax_horloge()
{
  return "Bienvenue sur l'Horloge AJAX/Drupal. Il est actuellement <span id="heure"/>";
}

Étape suivante, créer le fichier javascript qui va prendre en charge la mise à jour de l'horloge. Comme indiqué dans le hook menu, ceci doit être stocké dans un fichier exemple_ajax.js au même niveau que le module :

function changeHeure() {
  jQuery.get("getTime.php", {}, reponseServeur);
}

function reponseServeur(texte, erreur, requete) {
  $('#heure').html(texte);
  setTimeout(changeHeure, 1000);
}
function initializePage() {
  changeHeure();
}
$(initializePage);

Je ne reviens pas sur ce code, il est décrit dans le tutorial sur jQuery.

Dernière étape, retour à Drupal et écriture de deuxième callback, celle qui va répondre à la requête AJAX :

function exemple_ajax_getTime($argument) {
  header("Cache-Control: no-cache, must-revalidate");
  header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
  print date("H:i:s");
  exit ();
}

Les deux définitions de header permettent d'éviter que le navigateur ne mette en cache notre résultat de requête. Suit un simple print suivi du formatage de l'heure. La fonction termine sur un exit() pour arrêter le traitement ici. Et c'est presque là le point le plus important. Car en c'est en cassant ainsi le traitement de Drupal que l'on bénéficie de toute son infrastructure tout en ayant un contrôle parfait sur ce qui est renvoyé au client (pas de thèmes, de pages, etc..).

Vous pouvez tester la fonction dans un navigateur en y tapant l'url exemple_ajax/getTime qui devrait vous donner un message : XX:YY:ZZ.

Et voilà, c'est terminé. Il vous suffit maintenant d'aller sur l'url /exemple_ajax/horloge pour que la page initiale s'affiche, que le script soit chargé et modifie le comportement du message et pour que l'horloge se mette à tourner en utilisant des requêtes en Ajax, sur une source de donnée Drupal, pour se mettre à jour.

Conclusion

Une fois que l'on a les bases Ajax et jQuery, la mise en oeuvre dans Drupal est vraiment très simple et permet tout les types d'utilisation de requêtes asynchrones sur notre CMS préféré.

]]>