L'application

L'application que nous allons créer fournira un service très simple, similaire minilien. Il s'agit d'une application permettant de transformer des url longues et complexes en quelque chose de plus simple. L'interface utilisateur est simplissime, un champ de texte permettant d'entrer l'adresse un suppression, un bouton qui affiche la nouvelle adresse lorsqu'il est pressé. Vous pouvez avoir un aperçu du résultat final ici.

C

Technos utilisées

Pour écrire tinyurl, nous allons utiliser, en vrac, Javascript, PHP, CSS. PHP sera utilisé pour la "logique" serveur, mais vu le peu de compléxité des traitements, vous pourrez très facilement utiliser un autre langage de développement web si vous le souhaitez. De plus nous ne nous attarderons pas sur la partie "serveur", puisque là rien de nouveau, juste un bête script PHP faisant des requêtes d'écriture et de lecture dans un base de données.

Fonctionnement général

Le schéma ci-dessus illustre le fonctionnement général de l'application:

  1. Une fois l'adresse entrée par l'utilisateur et le bouton pressé, la navigateur web effectue une requête XmlHttpRequest afin de soumettre l'adresse.
  2. Le serveur génére un nouvel identifiant pour l'adresse soumise ce qui permettra de créer une nouvelle url plus courte.
  3. Les données sont insérées dans la base de données.
  4. Le serveur répond à la requête XmlHttpRequest en envoyant la nouvelle url.
  5. Le client affiche le résultat à l'utilisateur.

Point de départ

Nous allons commencer par créer le formulaire avec lequel l'utilisateur soumettra son url.

<div class="page">
<h1>Tiny Url</h1>
<div id="top">
   <INPUT type="text" name="url" size="50" id="url" value="http://" onkeydown="keyDown(event, mini)" />
   <INPUT type="button" value="Mini !" onclick="mini()" id="submit" />
   <span id="throbber" style="display:none">
   <img src="./throbber.gif" id="throbber_img" />Chargement ...
   </span>
<div id="status_msg">
   </div>
</div>

Les deux balises input définissent le champs de texte permettant de saisir l'url et le bouton de soumission du formulaire qui appelle la fonction javascript mini() lorsqu'il est pressé.

Le span suivant ajoute à notre page un bloc affichant une icône de progression, qui est caché par défaut (style="display:none").

Pour terminer le dernier div portant l'id status_msg nous permettra d'affficher un eventuel message à l'utilisateur.

L'idée générale est que lorsque le bouton est cliqué, une requête XHR est effectuée afin de demander au serveur une nouvelle url pour l'adresse soumise.

Javascript

Vous l'aurez compris l'étape suivante est d'écrire les fonctions javascript qui vont gérer les communications avec le serveur.

Dans un premier temps regardons de plus près comment créer un objet XmlHttpRequest qui nous permettra de communiquer avec le serveur.

L'objet XmlHttpRequest

L'idéal est d'utiliser la fonction écrite et décrite dans l'article d'OpenWeb sur le sujet.

function getHTTPObject()
{
  var xmlhttp = false;
  /* Compilation conditionnelle d'IE */
  /*@cc_on
  @if (@_jscript_version >= 5)
     try
     {
        xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
     }
     catch (e)
     {
        try
        {
           xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        catch (E)
        {
           xmlhttp = false;
        }
     }
   @else
     xmlhttp = false;
  @end @*/
  /* on essaie de créer l'objet si ce n'est pas déjà fait */
  if (!xmlhttp && typeof XMLHttpRequest != 'undefined'){
      try {
             xmlhttp = new XMLHttpRequest();
           }catch (e) {
             xmlhttp = false;
           }
    }
   return xmlhttp;
}

La fonction getHTTPObject() nous permet d'obtenir une objet XmlHttpRequest tout beau, tout propre, et ce, de facon indépendante au navigateur utilisé. Juste au passage, on remarque que pour Internet Explorer (pour les versions antérieures à la version 7, semble-t-il), l'objet XmlHttpRequest est géré par un composant ActiveX.

Etape 1 - La requête XmlHttpRequest

Nous voulons maintenant envoyer le lien saisit au serveur afin qu'il soit enregistré dans la base de données et qu'un mini-lien soit retourné à l'utilisateur. C'est notre fonction Javascript mini() qui remplira le rôle d'initier la communication, voici son code commenté :

function mini(){
 hideMsg(); //on cache un eventuel message precedant
 
 //on affiche l'indicateur de progression
 document.getElementById("throbber").style.display= "";
 
 //on recupere la valeur du lien saisie par l'utilisateur
 var value = document.getElementById("url").value;
 //on verifie que le lien est syntaxiquement correct.
 if(value == "" || value.match(/http:\/\/\s*$/i)){
   displayMsg("Merci de spécifier une URL");
   document.getElementById("throbber").style.display= "none";
 } else {
   // si tout est correct, on désactive le bouton, pour éviter les doubles validation.
   document.getElementById("submit").setAttribute("disabled", "true");
  
   //on encode l'url en base64, pour ne pas etre ennuyé avec d'eventuels caractères spéciaux.
   value = encode64(value);
   
   xhr = getHTTPObject(); // on récupère l'objet XmlHttpRequest
  //on specifie quelle fonction appeler lorsque le status de la requete
  // change
   xhr.onreadystatechange = function(){ responseHandler(xhr) };
   //la cible de la requete est le script /index.php/new/url
   xhr.open("GET", "./index.php/new/"+value, true); 
   xhr.send(null);
 }
}

Etapes 2 et 3 - Le côté serveur

Les étapes 2 et 3 consistent à générer un nouveau lien (du style http://tinyurl.com/uri/a23ERd45) pour l'adresse soumise par l'utilisateur et d'inserer le tout dans la base de données. Enfin le nouveau lien est retourné au client.

Etapes 4 et 5 - La réponse

La ligne

xhr.onreadystatechange = function(){ responseHandler(xhr) };

de la fonction mini() permet de spécifier la fonction qui sera appelée lorsque le status de la requête change, par exemple lorsque la réponse a été recue.

La fonction reponseHandler() traite donc la réponse du serveur, en l'occurence le nouveau lien, et l'affiche en créer un nouveau bloc html en renplacement du formulaire, le tout étant manipuler grace au DOM.

function responseHandler(xmlhttp){
 if (xmlhttp.readyState == 4) /* 4 : état "complete" */
   {
     if (xmlhttp.status == 200) /* 200 : code HTTP pour OK */
     {
          /* récupération de la réponse du serveur */
          var result = xmlhttp.responseText;

         var top = document.getElementById("top");
          /* suppression du champ url et du bouton de soumission */
          var url = document.getElementById("url");
          var btn = document.getElementById("submit");
          top.removeChild(url);
          top.removeChild(btn);
         
          /* création du span contenant le nouveau lien */
          var span = document.createElement("span");
          span.className = "mini-uri";
          var href = document.createElement("a");
          href.setAttribute("href", result);
          var miniUri = document.createTextNode(result);
          href.appendChild(miniUri);
          span.appendChild(href);
          /* ajout du bloc dans le document */
          top.appendChild(span);
          /* masquage de l'icône de progression. */
          document.getElementById("throbber").style.display= "none";
       }
   }
}

Conclusion

Voilà la fin de cette première partie, nous avons vu les différents méchanismes utiles pour développer cette petite application. Dans le (ou les) prochain(s) volet(s) de cet article nous verrons la mise en place du système de redirection lors qu'un utilisateur saisie un de nos mini'liens dans la barre d'adresses de son navigateur, et le developpement d'une petite interface d'administration, permettant de lister les adresses enregistrées dans le système et de les supprimer.