headermask image

header image

AJAX et les Datasets

Cet article à pour but de vous montrer comment récupérer des informations depuis le serveur avec une application SOLO.

Une application SOLO est uniquement composée d’un fichier SWF(flash) mis à disposition sur le serveur Web, elle ne nécessite pas de serveur LPS, c’est la méthode idéale pour publier un site sans avoir besoin de recourir à un serveur Tomcat.

Ici, notre application va récupérer une liste d’utilisateurs stockés dans une base SQL (MySQL), pour la présenter à l’écran.

1- Métodologie

Voilà comment nous allons procéder.

L’application Flash va effectuer une requête au serveur avec la fonction « XMLHttpRequest()« , bien connue des programmeurs AJAX, à l’attention du fichier getusers.php.

Le script PHP getuser.php va effectuer la requête d’extraction des données de la base SQL puis, formater et envoyer au client les informations sous forme XML.

L’application flash va récupérer ses informations XML et les intégrer dans un dataset pour ensuite pouvoir les utiliser.

2- Le serveur

La partie serveur se compose de la base de données SQL qui contient dans une table « users » la liste des utilisateurs. On peut créer cette table avec la commande SQL suivante :

Requ̻te SQL РCr̩ation de la table utilisateurs -

  1.  CREATE TABLE `users` (
  2.    `id` int(10) unsigned NOT NULL auto_increment,
  3.    `nick` varchar(30) NOT NULL default '',
  4.    `name` varchar(30) default NULL,
  5.    `surname` varchar(30) default NULL,
  6.    `password` varchar(100) NOT NULL default '',
  7.    PRIMARY KEY  (`id`)
  8.  )

Le but du script PHP est de récupérer les informations sur chaque utilisateur stocké dans la base pour les formater en XML.

L’objectif est d’obtenir un document XML avec les informations suivantes pour chaque utilisateur :

      > id
      > nick
      > prénom
      > nom

le document sera format ainsi :

Document XML РFormat des donn̩es -

  1.  <utilisateurs>
  2.      <user id="1" nick="xxxx" prenom="xxxx" nom="xxxx"/>
  3.      <user id="2" nick="yyyy" prenom="yyyy" nom="yyyy"/>
  4.      .......
  5.      <user id="3" nick="zzzz" prenom="zzzz" nom="zzzz"/>
  6.  </utilisateurs>

Voilà maintenant le script PHP pour créer cette structure XML à partir de la base de donnée

Script PHP РCr̩ation du document XML -

  1.  <?php
  2.      // définition de l'en-tête XML
  3.      header("Content-type: text/xml; charset=UTF-8");
  4.     
  5.      //configuration et connexion à la DB
  6.      include"includes/config.inc";
  7.      include"includes/connect.inc";
  8.     
  9.      //ouverture de la balise <utilisateur>
  10.      echo"<utilisateurs>\n";
  11.     
  12.      //  liste des utilisateurs
  13.      $query = 'SELECT `id`, `nick`, `name`, `surname` FROM `users`';
  14.      $result = mysql_query($query) or die("impossible de récupérer la liste des utilisateurs");
  15.  
  16.      // pour chaque utilisateur
  17.      while ($line = mysql_fetch_assoc($result)) {
  18.          $id = $line["id"];
  19.          $nick = $line["nick"];
  20.          $prenom = $line['name'];
  21.          $nom = $line['surname'];
  22.         
  23.          // on ajoute une balise <user> avec les attributs correspondants
  24.          echo"<user id=\"$id\" nick=\"$nick\" prenom=\"$prenom\" nom=\"$nom\" />\n";
  25.      }
  26.      mysql_free_result($result);
  27.  
  28.      // déconnexion de la DB
  29.      include"includes/disconnect.inc";
  30.  
  31.      //on ferme la balise <utilisateur>
  32.      echo"</utilisateurs>\n";
  33.  ?>

On commence par définir un en-tête XML pour donner l’illusion au client qu’il accède en lecture à un fichier XML, on se connecte à la base puis on ouvre le tag <utilisateur>, on effectue la requête SQL pour lister les utilisateurs et pour chaque ligne on extrait les données pour les écrire dans le format XML défini auparavant. Une fois la liste terminée on libère les résultats puis on se déconnecte de la base pour enfin fermer le tag </utilisateur>.

On peut immédiatement observer le bon déroulement du script dans un navigateur, ainsi dans Firefox :

fichier XML dans Firefox

3- Le client

Le client est composé de 3 parties :

      l’appel à la fonction de récupération des données au lancement
      la fonction de récupération des données
      l’affichage des données

l’appel à la fonction de récupération des données au lancement

Cela se fait très facilement en ajoutant le nom de la fonction dans un attribut « Oninit » de la balise <canvas>, ainsi :

Script LZX partie 1 - appel à la fonction loadXMLUsers() -

  1.  <?xml version="1.0" encoding="UTF-8" ?>
  2.  <canvas width="500" height="500" proxied="false" oninit="loadXMLUsers()">

Vous remarquerez l’attribut « proxied= »false » » qui renseigne explicitement la nature SOLO de notre application.

la fonction de récupération des données

Cette fonction sera positionnée dans une balise <script/> au sein de l’application ainsi :

Script LZX partie 2 - fonctions de récupération des données -

  1.  <!-- AJAX -->
  2.  <include href="rpc/ajax.lzx" />
  3.  <dataset name="utilisateurs"/>
  4.  
  5.  <script>
  1.  <![CDATA[
  2.  var req = null;
  3.  
  4.  function loadXMLUsers() {
  5.      // requete XMLHttpRequest
  6.      req = new XMLHttpRequest();
  7.      req.onreadystatechange = processReqChange;
  8.      req.open("GET", "http://localhost/getusers/getusers.php", true);
  9.      req.send(null);
  10.  }
  11.  
  12.  function processReqChange() {
  13.      // only if req shows "loaded"
  14.      if (req.readyState == 4) {
  15.          // only if "OK"
  16.          if (req.status == 200) {
  17.              // enregistrement des données du XML dans le dataset
  18.              canvas.utilisateurs.setChildNodes(req.responseXML.childNodes )
  19.          } else {
  20.              Debug.write("Problème lors de la récupération des données:\n" + req.statusText);
  21.          }
  22.      }
  23.  }
  24.  
  25.  
  26.  ]]>
  1.  </script>

On commence par inclure la bibliothèque AJAX puis nous créons un dataset nommé « utilisateurs » qui servira à contenir les futures données. Les balises <script/> contiennes 2 fonctions, loadXMLUsers() et processReqChange(), la première est appelée au lancement de l’application et la seconde est appelé lors de la réception des données depuis le serveur dans le but d’intégrer les données dans le dataset, ou prévenir d’une erreur le cas échéant.

l’affichage des données

L’affichage se fera au moyen du composant <grid/> qui permet de créer et contrôler très facilement une liste de données et particulier depuis un dataset.

Script LZX partie 3- Affichage des données -

  1.  <view x="20" y="20">
  2.  <grid name="grid_users" datapath="utilisateurs:/utilisateurs">
  3.      <gridtext datapath="@id"> Id </gridtext>
  4.      <gridtext datapath="@nick"> Nick </gridtext>
  5.      <gridtext datapath="@prenom"> Prénom </gridtext>
  6.      <gridtext datapath="@nom"> Nom </gridtext>
  7.  </grid>
  8.  </view>
  9.  </canvas>

On assigne le dataset utilisateur au composant <grid/> avec l’attribut « datapath » en lui précisant le chemin à partir duquel démarrer les itérations, pour chaque tag trouvé entre les balises <utilisateurs/> du document XML, une ligne sera ajoutée avec les informations correspondantes.

liste des utilisateurs

Voilà, le grand intérêt pour les applications open laszlo est de pouvoir bénéficier du même dynamisme que les applications web standard sans avoir la contrainte de posséder un serveur Tomcat ou équivalent, ce qui n’est pas le cas chez la plupart des hébergeurs à faible coût.