Blog 2005-2006 - Commentaires

Ajax illustré

samedi, 18 mars 2006, 11:56 PM - Ajax, Javascript, PHP

Si vous trouvez un site web plus agréable qu'un autre, c'est peut-être parce que son responsable y a mis un peu d'Ajax.

Ajax? En fait, il s'agit d'une technique qui se fonde sur l'interaction entre du Javascript (côté client) et des scripts serveurs comme le PHP, Perl, ASP, etc. Autrement dit, il n'est plus besoin de raffraîchir une page web pour en modifier son contenu, installer et lire des cookies, obtenir les informations d'un formulaire, etc. La meilleure application connue basée sur cette technique, c'est Gmail de Google.

Nous allons voir 2 classes PHP relatives à Ajax que j'ai trouvé sur le web: Upload Progress Meter et Najax. Dans le premier cas, nous n'étudierons pas le code, je l'ai intégré ici uniquement pour vous démontrer le potentiel de cette technique. Dans le second cas, il s'agit d'une classe qui offre aux développeurs PHP la possibilité d'utiliser Ajax facilement.

Upload Progress Meter

Cette classe permet d'afficher à un usagé une barre d'état pour suivre la progression d'un téléchargement de son ordinateur vers votre serveur (upload). Dites-vous que sans la technique Ajax, ceci serait impossible, à moins d'utiliser Java ou d'autres technologies semblables qui nécessitent l'ajout de programmes sur les ordinateurs de nos visiteurs.

Téléchargez un fichier quelconque de votre ordinateur d'environ 250k pour voir Ajax en action

Source: AJAX upload progress meter for PHP

Najax

Il existe plusieurs classes PHP pour vous permettre d'utiliser Ajax simplement. Najax en fait partie. Si j'ai décidé d'utiliser cette classe plutôt qu'une autre, c'est d'abord parce que son auteur a gagné un Innovation Award pour la qualité de son travail.

Pour comprendre son fonctionnement, je vais vous expliquer en partie la façon dont je m'y suis pris pour afficher la liste des villes pour chaque province dans l'exemple ci-dessous. Normalement, cet exemple nécessiterait le rechargement complet d'une page, à moins que vous décidiez de transmettre la liste complète des villes lors du chargement initial, dans ce cas vous vous exposeriez à plusieurs risques et inconvénients.

En premier lieu, il faut télécharger Najax et l'ajouter à nos autres classes.

Ensuite, il faut créer une classe et y insérer les fonctions PHP que nous désirons utiliser. Pour notre exemple, il s'agit de récupérer la liste des villes provenant d'une base de données, en fonction d'une province donnée. Nous allons donc écrire la fonction getSelectOptionsCity. Pour utiliser Najax, nous devons ajouter la fonction najaxGetMeta: elle permet de spécifier la fonction que nous désirons rendre publique dans notre classe:

najaxTestClass.php


<?php

  // Attention:
  // ce code sert uniquement pour démontrer le fonctionnement de Najax
  // il n'a pas été optimisé pour une utilisation réelle

  class najaxTestClass {

    var $objDB; // Ressource à la base de données

    function dbConn() {
      // Connection à la db
      $objDB = mysql_connect('monserveur.com','usager', 'motdepasse');
      mysql_select_db('mabase', $objDB);
      $this->objDB = $objDB;
    }

    function getSelectOptionsCity($regions_id = '') {
      if (!$this->objDB)
        $this->dbConn();

      $sBuff = '<select name="city" style="width:180px;"
        onChange="alert('ID: '+this.value);">';

      $q = mysql_query('SELECT id, nom FROM villes_ca
        WHERE regions_id = "'.$regions_id.'" ORDER BY nom');
      while ($row = mysql_fetch_assoc($q)) {
        $sBuff .= '<option value="'.$row['id'].'">';
        $sBuff .= $row['nom'];
        $sBuff .= '</option>';
      }
      $sBuff .= '</select>';

      // Si la "collation" de votre base de donnée n'est
      // pas en utf8, ajoutez cette opération:
      // $sBuff = utf8_encode($sBuff);
      return($sBuff);
    }

    function najaxGetMeta() {
      NAJAX_Client::mapMethods($this, array(getSelectOptionsCity));
      NAJAX_Client::publicMethods($this, array(getSelectOptionsCity));
    }

  }

?>

Finalement, dans notre page cliente, nous devons insérer nos classes et y ajouter quelques fonctions en Javascript:

index.php


<?php

  require_once('najaxTestClass.php');
  require_once('classes/najax/najax.php');

  NAJAX_Server::allowClasses('najaxTestClass');
  if (NAJAX_Server::runServer()) {
    exit;
  }

  echo  NAJAX_Utilities::header('.');

?>
<html>
<head>
<script type="text/javascript">
var obj = <?= NAJAX_Client::register(new najaxTestClass()) ?>;
obj.onGetSelectOptionsCityError = function(error) {
  alert(error.message);
  return true;
}

function updateSelect(x) {
  obj.getSelectOptionsCity(x, function(result) {
    document.getElementById("select_city").innerHTML = result;
  });
}
</script>
</head>
<body>
<form method="post" action="index.php">
  <select name="province" style="width:180px;"
    onChange="javascript:updateSelect(this.value);">
    <option value="0">--> Choisissez votre région</option>
    <option value="8">Abitibi-Témiscamingue</option>
    <option value="1">Bas-Saint-Laurent</option>
    // ...
  </select>
  <br><br>
  <div id="select_city">
    <select name="city" style="width:180px;">
      <option value="0">-----</option>
    </select>
  </div>
</form>
</body>
</html>

Si vous désirez intégrer Ajax à vos applications, faites tout de même attention à ne pas sur-utiliser cette technique. Dans certains cas, il vaut mieux recharger les pages web, ne serait-ce que pour une meilleure indexation de notre contenu. À vous de voir!

Tommy

mardi, 21 mars 2006, 05:18 PM

Sérieusement c'est d'excellents exemples, j'ai rarement vu un blog aussi bien structuré. Du bon boulot, surtout sur le AJAX je pourrai m'y inspirer, question d'apprendre ce système.

Real

mardi, 21 mars 2006, 09:57 PM

Merci Tommy!

J'aimerais ajouter ceci comme info...

vous pouvez ajouter des variables dans vos fonctions (pour Najax) - par exemple, la fonction javascript, ça peut être:
function updateSelect(x, y) {
obj.getSelectOptionsCity(x, y, function(result) {
document.getElementById("select_city").innerHTML = result;
});
}

Et vous n'avez qu'à ajouter une variable à votre fonction dans votre classe:
function getSelectOptionsCity($regions_id = '', $city_id = '') {
...
}
@+!

bee_human

samedi, 25 mars 2006, 10:24 AM

Salut Réal,

Pourquoi le site F1-Live est dans to expérience professionnelle ?

Real

samedi, 25 mars 2006, 01:26 PM

Salut bee_human!

En fait, je n'ai pas travaillé directement sur ce site - j'ai mis ce lien comme j'aurais pu mettre n'importe lequel autre lien parmi les 10zaines de miliers de membres affiliés de Mediaplazza qui ont chacun leur site web. F1-Live avait intégré des produits de Mediaplazza dans leur site. Si j'ai mis F1-Live là, c'est surtout pour tenter de montrer le rapport entre les sites affiliés. Mais apparemment, ça peut porter à confusion, je vais apporter quelques ajustements bientôt à ce menu...

Personnellement, j'avais entre autres travaillé sur le paiement par ligne de téléphone surtaxée (PHP/VoiceXML) et j'avais mis en place leur paiement par carte de crédit, voilà de ça quelques années déjà.

@bientôt!

Jonathan

dimanche, 21 janvier 2007, 04:10 PM

Malheureusement, je crois que le projet najax qui est devenu par la suite xoad est maintenant mort.. Le site de xoad.org ne fonctionne plus et sur le site http://freshmeat.net/projects/xoad/ un commentaire indique que le projet est mort.

Ceci étant dit, félécitation pour ton excellent blogue en français ! Dommage que tu n'écrives pas plus souvent mais comment se plaindre d'une information gratuite et en français de surcroît !

Merci encore

Real

mardi, 23 janvier 2007, 12:14 AM

Merci pour l'info Jonathan et merci pour le commentaire. Effectivement, je n'écris pas souvent... ou plutôt je suis très difficile! J'écris souvent des textes que je mets finalement de côté. Peut-être qu'un jour j'en publierai plusieurs quasiment en même temps!

Commentaires

Ajouter Commentaire (désactivé)

Remplissez ce formulaire pour ajouter un commentaire.