Faire de l’Ajax avec mootools

Continuons notre petite exploration des fonctionnalités de Mootools en découvrant à quel point ce dernier nous facilite la mise en place d’appels Ajax. Cet article aurait même pu s’appeler : “de l’utilité de l’usage d’un framework Javascript” tant notre propos est ici surtout de comparer l’approche Ajax traditionnelle et celle utilisant un framework.

Qu’est-ce qu’un framework ?
Au sens large, c’est un cadre de travail destiné à améliorer la productivité ainsi que la qualité de code du développeur. Plus concrètement ce sont principalement des bibliothèques de fonctions parfois accompagnées de conventions de codage. L’intérêt ? Imaginez que vous recommenciez indéfiniment à coder à partir de zéro, réinventant la roue à chaque fois. Si vous avez déjà plusieurs développements derrière vous, vous savez que vous êtes souvent amenés à réutiliser le même code. Un framework ce sont des briques logicielles éprouvés qui répondent efficacement à des problématiques récurrentes. Bon passons au code.

L’Ajax façon grand mère.

function getXhr(){
	var xhr = null; 

		if(window.XMLHttpRequest)
			xhr = new XMLHttpRequest(); 

		else if(window.ActiveXObject){
			try {
			         xhr = new ActiveXObject("Msxml2.XMLHTTP");
			         } catch (e) {
			             xhr = new ActiveXObject("Microsoft.XMLHTTP");
			         }
			}
			else {
			  alert("Votre navigateur ne supporte pas Ajax");
			  xhr = false;
				}
                                return xhr
			}

function InsertDiv(ajax_url, calque){
	var xhr = getXhr()

		xhr.onreadystatechange = function(){

			if(xhr.readyState == 4 && xhr.status == 200){

				if(calque != 'none') {

				document.getElementById(calque).innerHTML = xhr.responseText;

					}
				}
			}

			xhr.open("GET",'ajax_url',true);
			xhr.send(null);
		}

En bref la fonction getXhr permet d’instancier un objet XMLHttpRequest dont nous avons besoin pour communiquer avec le serveur. La fonction InsertDiv prend en paramètres l’url qui sera chargé de nous répondre et le calque qui recevra le contenu de cette réponse par un assez brutal InnerHTML. Je passe les détails sur le “onreadystatechange“, “readyState” et “status“, qui dépasseraient du cadre de cet article. Il serait évidement possible d’améliorer cette fonction de multiples manière, ne serais-ce par exemple qu’en prévoyant une réponse en cas d’erreur 404.

Nous avons ici choisi d’envoyer nos données en GET mais nous pourrions tout aussi bien les envoyer en POST en remplaçant les dernières lignes par :

	xhr.open("POST","ajaxLivre.php",true);
	xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');

	var = document.getElementById('maVariableId');
	maVariable = var.options[var.selectedIndex].value;
	xhr.send("maVariable="+maVariable);

Il faut admettre que même si nous avons un contrôle total sur notre code, ce dernier va vite devenir assez lourd. Imaginez les contorsions que vous allez devoir faire ne serais-ce que pour récupérer les paramètres en post si vous avez une dizaine de champs dans votre formulaire et plusieurs formulaire tant qu’on y est. Cela peut facilement tourner vite au casse tête. Et mootools face à ça ?

L’Ajax fête des fleurs !

Vous pouvez directement commencer par aller voir la démo proposé sur le site de mootools :
http://demos.mootools.net/Form.Send

Intéressons nous maintenant au code Javascript :

window.addEvent('domready', function() {

	$('monForm').addEvent('submit', function(e) {

		e.stop();

		var log = $('ajaxdiv').empty().addClass('ajax-loading');

		this.set('send', {onComplete: function(response) {

			log.removeClass('ajax-loading');
			log.set('html', response);
		}});

		//Send the form.
		this.send();
	});
});

Le fonctionnement est très simple : “monForm” est l’identifiant de votre formulaire qui devra être renseigné dans la balise <form>. Comme dans le précédent article, on a ajouté un gestionnaire d’événement. Cette fois pour le submit. Ce qui nous évite un tout moche “onsubmit=” dans la déclaration du formulaire. e.stop() nous permet d’éviter que le formulaire soit envoyé. “ajaxdiv” c’est ma div qui recevra le retour du serveur. Ici on le vide (empty) et on affiche un petit loader Ajax (addClass(’ajax-loading’)). Au retour du serveur (onComplete) on retire le loader (removeClass) et on affiche la réponse.

Remarquez deux petites choses qui finiront si nécessaire par définitivement confirmer l’élégance du procédé. D’une part, la déclaration du formulaire reste à un identifiant près ce qu’elle serait si on n’utilisait pas Ajax :

<form method=”POST” action=”monUrlAjax” id=”monForm”>

D’autre part, l’ensemble des variables du formulaire est envoyé comme ce serait le cas avec un formulaire normal sans avoir rien de plus à préciser que le nom des champs et leur valeur.

Conclusion

Je pense que ce petit exemple vous aura montré tout l’intérêt que peut avoir une approche via framework face à une approche classique. Bien sur utiliser un framework est moins bas niveau que l’appel direct à l’objet XMLHttpRequest, nos possibilités sont donc légérement réduites et le code un peu plus lourd. Mais au final le framework nous offre largement tout ce que nous avons besoin de faire et l’argument quand à la lourdeur est plus que discutable (surtout concernant mootools). Et cela est sans commune mesure face aux gains réalisés en terme de qualité de code et de maintenance.

Effet de slide avec mootools

Mootools est un excellent framework JS léger et modulaire qui saura vous rendre bien des services. Dans ce petit tutorial nous allons voir comment avec quelques lignes de code mettre en place un effet de slide simple et efficace. Pour commencer vous pouvez directement télécharger ici le code js.

L’archive comprend le code du framework et un fichier d’exemple avec différents effets de slide verticaux et horizontaux. Nous allons nous intéresser au toggle vertical, mais la démarche reste la même quel que soit l’effet choisi. Voici le code :

<script language="JavaScript" type="text/javascript">
<!--
window.addEvent('domready', function() {

	var myVerticalSlide = new Fx.Slide('slide');
	myVerticalSlide.toggle();

	$('v_toggle').addEvent('click', function(e){
		e.stop();
		myVerticalSlide.toggle();
	});

});
// -->
</script>

Evidemment il faudra veiller à ce que le framework soit bien appelé et conformément à l’exemple ci-dessus on mettra notre contenu dans une div avec un id égal à “slide”. Pour expliquer rapidement le code on met en place un gestionnaire d’événement au chargement du DOM. Lorsque un élément identifié par “v_toggle” sera cliqué cela lancera l’effet de slide.

Utiliser l’API SimplePie

Il y a quatre ans de cela, Olivier Duffez de WebRankInfo avait écrit un excellent article sur l’intégration de flux RSS avec l’outil MagpieRSS.

Cet outil, fort pratique, permet à un webmaster d’intégrer sur son site des fils de news RSS en provenance de diverses sources, à la manière du célèbre Netvibes. Malheureusement, le projet Magpie ayant été abandonné, le format RSS 2.0 n’est pas totalement supporté, notamment par exemple les enclosures. Heureusement, depuis quelques années, un remplaçant pointe le bout de son bec, il s’agit de SimplePie, tout aussi pratique, et simple d’utilisation, mais en plus compatible avec tout les formats RSS. C’est de lui que nous allons parler.

Tout ce que fait Magpie, SimplePie le fait également, aussi vous pouvez lire l’article d’Olivier pour plus d’informations.

Pour utiliser SimplePie, il vous faut la télécharger. Vous la trouverez sur le site http://simplepie.org. C’est le fichier simplepie.inc sous licence LGPL.

Les fonctionnalités offertes par cette API sont multiples, on a bien sûr entre autres, la gestion d’un cache, mais aussi la possibilité de filtrer le flux en y supprimant certaines publicités, ou des balises et attributs potentiellements dangeureux. Certaines configurations doivent se faire dans le fichier lui même (si vous souhaitez par exemple filtrer une balise supplémentaire), mais la pluparts peuvent se faire directement dans votre code php. En parlant de code, voici un exemple d’intégration :

// adresse du flux qu'on souhaite intégrer.
$fichier_xml='http://www.lemonde.fr/rss/sequence/0,2-3208,1-0,0.xml';

// appel de la libraire SimplePie.
require 'simplepie.inc';

// création d'une nouvelle instance de la classe SimplePie.
$feed = new SimplePie();

// on lui indique quel fichier il doit traiter.
$feed->set_feed_url($fichier_xml);

// on peut lui interdire de trier par date. true par défaut.
$feed->enable_order_by_date(false);

// on lui indique le nom du fichier de cache.
$feed->set_cache_location('cachenews/');

// on lache la pie.
$feed->init();

// Si le flux contient à manger.
    if($feed->data){

        // On défini le nombre d'articles qui nous intéressent.
        $max=$feed->get_item_quantity(5);

        // Nous voici au coeur du code d'intégration.
        for($x=0; $x<$max; $x++) {

            // On prend le x-iéme item.
            $item=$feed->get_item($x);

        // Un peu d'habillage html.
        echo "<div style=\"width: 290px; text-align: left;
                padding: 4px; background-color: #FFFFEE;
                border: 1px solid #CCCCCC; margin: 6px;\">
                <a href=\"";

        // le lien ou pointe le flux.
        echo $item->get_permalink();
        echo "\">";

        // le titre du flux.
        echo utf8_decode($item->get_title());
        echo "</a><br />";

            // si enclosure, on affiche. C'est le cas du monde.
            if($enclosure=$item->get_enclosure(0)){

                   echo "<img src=\"";
                   echo $enclosure->get_link();
                   echo "\" border=\"1\" style=\"float: left;
                             margin: 4px; margin-top: 8px;\">";
            }
        // Et la description pour finir.
        echo utf8_decode($item->get_description());
        echo "</div>";
        }

 }

Voila, c’est on ne peut plus simple. Pas vraiment de commentaire à rajouter sur le code en lui même, si ce n’est ici l’utilisation de utf8_decode pour afficher le texte correctement (fonction de l’encodage de votre page). Comme Olivier, je vous conseille de mettre ce code dans une fonction dédié, la seule variable étant le fichier à parser. A noter que le code suppose ici que votre enclosure soit une image, ce qui ne sera pas souvent le cas en général.

Les 10 meilleurs plugins Wordpress

La liste qui suit est celle des principaux plugins Wordpress que j’ai mis en place à la création de ce blog. Si tous sont excellents, la plupart me semblent même indispensables.

Akismet : présent par défaut avec wordpress, akismet est de loin la meilleure des solutions antispam.

Internal link building : ce plugin est une excellente solution pour la création de lien internes. Choisissez un mot, et la page vers laquelle vous voulez que ce mot pointe et vos liens internes seront automatiquement générés.

All in one SEO pack : ce plugin très complet vous permettra une gestion efficace de vos titres et metas.

Google Sitemap Generator : sans doute le moyen le plus simple pour générer automatiquement votre fichier sitemap pour Google et les autres robots compatibles. Ce qui optimisera l’indexation de votre site.

Related post : celui-ci ajoutera à vos articles des liens vers d’autres de vos articles qui leur sont liés par l’intermédiaire des tags qu’ils auront en commun. Un bon moyen pour proposer des infos pertinentes à vos lecteurs en complément de celle qu’ils sont en train de lire.

Simple tag : Ce plugin est la boite à outil de la gestion de tags. Son principal intérêt est de vous faciliter grandement le taggage de vos posts. Mais il fait tellement d’autres choses encore (articles liés, liens automatiques…).

Breadcrumb Navigation XT : un plugin assez simple qui vous permettra de proposer un fil d’ariane à vos visiteurs. Ce qui sera positif d’un point de vu expérience utilisateur, mais aussi concernant votre référencement.

Sociable FR : grâce à ce plugin, vos visiteurs pourront voter pour vos articles dans les digg-like. Accroissant ainsi votre trafic.

WP super cache : vous commencez à avoir du trafic. Vos serveurs souffrent. Soulagez les avec WP super cache. Ce plugin est certainement la meilleure solution de cache actuellement disponible pour Wordpress.

Sniplets : et peut-être le meilleur pour la fin. Il serait trop long de décrire ici tout ce que Sniplets peut faire. Ce sera peut-être l’occasion d’un billet. Le principal intérêt de Sniplets est la possibilité d’inclure du code php dans vos posts, et donc entre autre générer dynamiquement des pages dans votre CMS favori.

Parser un fichier XML avec l’API DOM

Ce petit article n’a pas pour objectif de vous enseigner XML, ni ne prétend être un cours exhaustif au sujet de l’API DOM. Il vous expliquera seulement, comment, à partir d’un fichier XML, extraire les données qu’il contient, et les afficher dans une page web. Nous utiliserons pour cela le langage PHP5.

Pour parser un fichier XML, il existe de nombreuses méthodes. Vous pouvez utiliser les fonctions standards de traitements de fichiers, et chaines de caractères, alliées aux très puissantes expressions régulières, ou si vous souhaitez perdre moins de temps utiliser SimpleXML beaucoup plus adapté. Il existe un troisième chemin, pas toujours plus efficace, ni même plus simple, mais qui offre l’avantage d’être un standard du W3C accessible depuis la plupart des langages. Vous l’avez bien compris, nous allons utiliser le Document Object Model, déjà survolé quelquefois en Javascript sans toujours oser le nommer.

Nous allons donc supposer que vous ayez un fichier XML à parser. Nous ne nous poserons pas de questions sur la validé de ce fichier avec la DTD qui lui est associé. Vous ne savez pas ce qu’est une DTD ? Tant mieux, cela ne vous servirait à rien ici. Tout ce que nous voulons c’est extraire des données du fichier. Imaginons que notre fichier contienne les données qui suivent :

<catalogue>
    <ordinateurs>
        <marque prix="1200">Sony</marque>
        <marque prix="1800">Fujitsu</marque>
        <marque prix="1300">IBM</marque>
    </ordinateurs>

    <imprimantes>
        <marque prix="300">Epson</marque>
    </imprimantes>
</catalogue>

Récupérer le contenu d’une balise

Par récupérer le contenu d’une balise, nous entendons le texte se trouvant entre la balise ouvrante, et celle fermante, ainsi, Sony, Fujitsu, IBM, et Epson sont des contenus de balise. Supposons que nous voulions afficher la liste des marques d’ordinateurs, voici le code que nous devrions utiliser :

<?php
    $dom =new DomDocument();
    $dom->load('monfichier.xml');
  $ordinateurs=$dom->getElementsByTagName('ordinateurs')->Item(0);
      $marques = $ordinateurs-> getElementsByTagName('marque');
        foreach($marques as $marque)
            $listemarques[] = $marque->firstChild->nodeValue
 ?>

Le fonctionnement de ce code est assez simple. On crée un nouvel objet DOM, on charge le fichier XML contenant les données à parser. getElementsByTagName nous permet d’identifier les éléments possédant le TagName “ordinateur”, Item(0) pointe vers le premier d’entre eux. A partir de la, il ne nous reste plus qu’à identifier les éléments possédant le TagName “marque” parmi ceux ayant le TagName “ordinateur”. Un foreach dans la structure résultante nous permet alors de tous les afficher.

Récupérer le contenu d’un attribut

Nous entendons par attribut le texte se trouvant entre les guillemets de notre exemple XML. Nous allons donc ici récupérer les prix. Pour cela, le code utilisé sera tout aussi simple, à celui précédement vu, on rajoute tout simplement ceci :

if ($marque->hasAttribute('prix'))
    {
            $listeprix[] = $marque->getAttribute('prix');
    }

hasAttribute, nous permet de vérifier l’existence de l’attribut prix pour la marque correspondante, et getAttribute en récupére la valeur. Bien sûr, $listemarques et $listeprix sont des tableaux. Il existe un grand nombre d’autres fonctions dans l’api DOM, aussi je vous renvois vers le manuel php, mais vous en savez déjà suffisament pour extraire les données que vous souhaiteriez d’un fichier XML.

Wordpress - fiche descriptive

Présentation

Wordpress est un CMS (pour Content Management System ou système de gestion de contenu) orienté blog. Codé en Php avec MySQL comme système de base de données, Wordpress est également libre sous licence GPL et bénéficie de l’apport d’une importante communauté. Wordpress est tout simplement la meilleure plateforme existante pour blog.

Qualités

Ce qui fait toute la richesse de Wordpress c’est sa communauté. Il existe pour Wordpress une quantité incroyable de thèmes et de plugins qui vous permettront de donner à votre blog l’aspect que vous souhaitez. Wordpress est multi-utilisateurs, offre une interface XML-RPC permettant la publication depuis une application tierce, une bibliothèque de média, la possibilité de créer des pages en plus des billets du blog. Bien évidement Wordpress gère aussi les commentaires et dispose d’une des meilleures solutions anti spam.

Bref, vous aurez compris pourquoi Wordpress est ma solution de blog préféré. Wordpress dépasse et de beaucoup les solutions concurrentes que sont dotclear ou b2evolution, et rivalise plutôt bien avec des solutions CMS purement orientées sites comme Joomla ou Drupal.

Liste de plugins Wordpress

A venir.

Ressources

Site officiel
Wordpress Francophone

Forum PHP Paris 2008

Le 8 et 9 décembre 2008 aura lieu le 8éme forum PHP organisé par l’afup et placé sous le signe des web services pro et des grands projets PHP.

Objectifs
Depuis 8 ans, l’AFUP organise le Forum PHP pour permettre aux utilisateurs de PHP de se retrouver et d’échanger autour de conférences et ateliers à forte valeur ajoutée. Cette année encore, les participants auront l’opportunité de débattre avec les experts internationaux présents, et ainsi mieux appréhender les enjeux technologiques du langage PHP, devenu la technologie de référence pour construire des applications web en entreprise. Des acteurs de poids dans le monde PHP comme Zend, Oracle et Anaska/AlterWay ont apporté leur soutien pour cette huitième édition.

Les deux journées seront l’occasion d’assister à des conférences et ateliers techniques ou fonctionnels, ainsi qu’à des retours d’expériences. Cet événement intéressera les responsables informatiques et décideurs souhaitant découvrir le potentiel de la plate-forme PHP, et les développeurs attirés par les aspects plus techniques tels que la sécurité et la montée en charge.

Toutes les informations complémentaires sur le site de l’afup :
http://www.afup.org/article.php3?id_article=368

Améliorer la visibilité de vos flux RSS

Etre plus visible dans Netvibes, iGoogle, ou les autres agrégateurs de flux RSS contribuera à améliorer votre trafic. Les titres de vos billets, perdu entre des dizaines d’autre auraient plus de chance d’attirer l’attention s’ils étaient accompagnés d’une image. Dans le cas de blog généraliste, l’usage d’une image peut aussi renseigner en un seul coup d’œil le lecteur sur le thème traité sans qu’il ait à lire en détail les titres. Vous avez certainement remarqué les petites images sur la gauche dans Netvibes ou iGoogle en complément des articles de magasines de presse comme “le monde”. Nous allons voir ici comment faire de même.

Dans le cas général
C’est assez simple. Le format RSS 2.0 permet d’indiquer une balise <enclosure> dans le flux qui permet d’attacher un objet média à l’item. Si cet objet est une image il apparaîtra en tout petit, comme une vignette, dans les principaux agrégateurs de flux.

La balise <enclosure> possède trois attributs qui sont l’url du média attaché, ici une image, la taille en octet de ce média, et le type MIME du fichier. L’ajout d’un enclosure dans le code d’un flux RSS 2.0 ressemble donc à ça :

<enclosure url=”http://www.presse-agrume.net/image.png” length=”2400″ type=”image/png” />

Le résultat parle de lui même.

Avant

Après

Dans le cas de Wordpress
Wordpress comme à son habitude rend très facile ce genre de manipulations. Il suffit de se rendre dans la partie “champs personnalisés” de votre billet, de déclarer une clé nommé “enclosure”, et d’insérer trois lignes dans le champ “valeur” :

1 - l’url de l’image.
2 - la taille en octet de l’image.
3 - le type MIME de l’image.

Exactement comme sur l’exemple

Vous pouvez bien évidemment utiliser cette technique pour inclure tout autre type d’objets média comme des podcasts par exemple.

Le code d’android est disponible

Android, la plateforme Google pour applications mobile est libre. Google vient de rendre son projet open source en plaçant le code sous licence Apache.

Vous trouverez toutes les infos ici :
http://source.android.com

L’annonce a été faite le 21 Octobre, soit la veille du lancement du G1 d’HTC, plus souvent appelé le Google Phone, ou GPhone, premier mobile à embarquer la plateforme Android.

La date de sortie du Gphone en France n’est pas connue à l’heure actuelle.

Je le trouve plus beau en blanc.

Facebook - Nouveau concours

Facebook vient de lancer un concours de dév d’applications pour ses utilisateurs français. En résumé, les trois meilleures œuvres gagneront respectivement 5000, 3000, et 2000€.

Les applications candidates doivent leur êtres soumises avant le 31 Janvier.

C’était juste pour relayer l’info.
Par contre faut avouer que le logo est pas terrible.