Mes facultés psychomotrices me reviennent alors que je sors de cette obscurité. Mon système nerveux semble lui aussi se réveiller, entraînant une douleur insupportable dans ma poitrine. Je ne distingue que des silhouettes, pâles et hasardeuses. Leurs voix sourdes se chevauchent, je ne comprends pas. Qui sont ces gens ? Que m’est-il arrivé ?…

Je ressens dans le bras la brève douleur d’une aiguille. Avant de n’avoir pu dire quoi que ce soit, je m’enfonce à nouveau dans une plénitude sombre et apaisante, la lumière s’éteint progressivement. Le calme est revenu.

Cette sérénité m’a semblé de courte durée. C’est avec difficulté que je me réveille, quittant avec nostalgie ce relatif bien-être. Je suis toujours allongé, et comprends alors que je suis dans un hôpital. La douleur dans ma poitrine semble avoir disparu. Ma vision troublée se précise peu à peu, je distingue une silhouette, penchée vers moi.

Mal rasé, cernes apparentes, le Dr Greg House me lance : « Inutile de parler, vous ne pouvez pas. On vous a diagnostiqué une rare anomalie cardiaque appelée dévelopiasis PHPstasé, vous avez un pré-compilateur PHP dans le ventricule droit. Vous êtes resté dans le coma trois jours à la suite d’un conflit de variable, il a fallu vous opérer pour passer le register_globals à off. Ne vous en faites pas, vous allez vous en sortir ».

Après quelques semaines en safe_mode ON, le temps de m’acclimater à cette nouvelle, je décidais que je devais vivre avec cette condition. Mon destin était scellé, je devais devenir développeur Web. Je fus alors accueilli par Awelty, me permettant ainsi de vivre ma nouvelle vie.

… To be continued …

Trêve d’histoires burlesques, me voici, Clément, 26 ans après moi-même, nouveau venu dans la famille Awelty qui m’a intégré au début de ce mois de juin 2010. Je suis votre nouveau développeur Web, en charge principalement d’Agenda Culturel.

J’ai créé mes premières pages Web en 1999, ai plus récemment créé Pebkac.fr et un blog éponyme, et j’ai officié en agence Web à Amiens pendant 3 ans pour le compte de clients. C’est avec un grand plaisir et beaucoup d’enthousiasme que je rejoins à présent Awelty et plus spécifiquement Agenda Culturel, et ce sont donc beaucoup de bonnes choses qui s’annoncent pour la suite du programme, en terme de code et de développement. Et nous avons commencé plutôt fort, avec le record de trafic enregistré ces derniers jours pour la Fête de la musique !

Geek avec une vie sociale, vivant à Amiens, technophile avéré et programmeur depuis de nombreuses années, je suis également passionné par tout ce qui a un moteur et 2 ou 4 roues, ainsi que par la langue anglaise. (… sayin’ hi to Colin … ) .

Alors… il ne me reste plus qu’à vous dire : à bientôt sur Agenda Culturel !

• deux jours avant le début de l’événement pour être sûr de ne pas l’oublier
• si la date, le lieu ou l’horaire de l’événement a été modifié
• si l’événement est signalé comme annulé sur le site.
• être alerté de la programmation d’un festival dès qu’elle est mise en ligne sur le site

Vous pouvez aussi vous abonner aux alertes d’un artiste ou d’un organisateur. Grâce à cela, vous recevrez un mail dès qu’un (ou plusieurs) événement est ajouté pour un artiste ou organisateur. Vous n’aurez donc plus d’excuse si vous ratez le dernier concert des BB Brunes, si vous n’êtes pas au courant du programme de l’Olympia ou si vous ne savez pas qui sera aux Solidays 2010 !

Enfin vous pouvez également vous abonner aux actualités des départements de votre choix qui présentent les temps forts du département ou les opérations spéciales (pour des invitations, par exemple).

Dans les changements effectués (et mis en ligne ce matin) on retrouve un nouveau tableau de bord (plus clair) qui permet de modifier toutes ses infos personnelles et de gérer tous ses abonnements aux diverses newsletters et alertes. De plus, la page d’inscription a aussi été simplifiée : on peut maintenant s’inscrire en ne donnant qu’une adresse email ! Un mot de passe est généré et vous est envoyé par mail (il est modifiable dans le nouveau tableau de bord).

En attendant le développement des alertes pour les villes (et qui vous permettra de recevoir l’agenda de votre ville une fois par semaine) n’hésitez pas à vous abonner aux alertes déjà disponibles et à organiser vos sorties culturelles parmi les plus de 15 000 événements en cours ou à venir sur Agenda Culturel !

Bien sur, il existe des solutions SIG (Système d’Informations Géographiques) gratuites (Google Maps, Yahoo Maps, etc), mais elles sont davantage prévues pour localiser de l’information que pour présenter des valeurs ou des tendances.

C’est en observant le code source des pages de Google Analytics que j’ai découvert Geomap, une mini-application Flash™ contrôlée par javascript permettant de « colorier » des pays en fonction d’une valeur.

Exemple d’implémentation de la carte geomap

Sur cette carte sont représentés les 30 principaux pays d’origine des utilisateurs d’e-monsite (les valeurs sont volontairement faussées pour la France, afin de lisser le dégradé). Bien que la carte elle-même soit une animation Flash™, il est seulement question ici de javaScript. Il n’est donc pas nécessaire de savoir utiliser Adobe Flash™.

Avant de pouvoir utiliser la librairie proposée par Google, vous devez intégrer son API Javascript: http://www.google.com/jsapi. N’hésitez pas à vous aider de la documentation fournie par Google (en anglais), et du script largement commenté qui affiche la carte ci-dessus.

Programmation PHP Orientée Objet sous Eclipse

Depuis la démocratisation de php5, il est possible d’appréhender les projets web d’un point de vue « Objet ». Certes, ça n’est pas une révolution, et cette approche était déjà permise, dans une moindre mesure, avec php4. Le but ici n’est pas de promouvoir la POO à tout prix, simplement d’expliquer pourquoi ça peut être utile et comment ça peut être fun.

D’abord, la POO (Programmation Orientée Objet), ça n’a pas de particularité technique. En effet, il s’agit plus d’une manière de concevoir que d’une façon de coder. A ce titre, on pourrait envisager de « coder objet » avec presque n’importe quel langage, et inversement, utiliser un langage objet sans avoir besoin de l’exploiter comme tel.

La POO donc, ça consiste entre autres, à se représenter un programme, un script, une application, dans l’espace plutôt que dans le temps. Grosso-modo, il s’agit de penser en terme d’objets, capables d’interagir entre eux, et pas de lignes de codes qui s’enchaineraient les unes après les autres.

La POO, ça permet de donner un semblant de vie comportement à des entités de données, de variables, de valeurs… qu’on appellera du coup des objets. A l’instant où j’écris ce billet, j’ai à l’écran une zone de texte pour le titre, une autre pour le texte, et un bouton pour enregistrer. Je peux dès lors considérer qu’un billet est un objet, doté d’un titre, d’un texte, et capable de s’enregistrer lorsqu’on lui demandera de le faire.

Sans entrer dans les détails, cette vision des choses offre de nombreux avantages, au nombre desquels on peut citer:

• la POO encourage le travail collaboratif.
• la POO simplifie la maintenance.
• la POO accroît la stabilité.
• la POO assouplit le code.
• la POO rend le travail plus agréable.

En contrepartie:

• la POO est chronophage.
• la POO consomme des ressources.
• la POO n’aime pas l’approximation.

Cependant, chacun de ces points est discutable, et s’il faut retenir quelque chose à propos de la POO, c’est qu’elle n’apporte rien qu’on ne se donne pas la peine d’implémenter. A contrario, elle offre un cadre de travail efficace, et encourage la réflexion, en délestant le programmeur de fastidieuses tâches de codage.

Un plugin JQuery est une extension de la librairie JQuery. Un plugin peut être comparé à une fonction prédéfinie. En général, un plugin sert à ne remplir qu’une seule fonction, un seul objectif. On en compte plus de 1 000, la plupart peuvent être trouvés dans la partie plugins du site officiel de JQuery (en anglais).

Le premier plugin est Shadowbox,il est utilisé sur Coconews et E-monsite. Shadowbox permet l’affichage d’information mis en avant du reste du site. Il permet de mettre en avant une image (en grand format), une autre page, une vidéo… dans un cadre qui sera centré à l’écran et qui recouvrira la page en cours. Sa grande souplesse permet de l’utiliser sur un site comme E-monsite, car il faut qu’il fonctionne sur tous les sites membres.

Ensuite, il y a le plugin Droppy qui permet de créer très facilement des menus déroulants. Il peut gérer plusieurs niveaux de sous-menus (jusqu’à trois apparemment). Il est facilement personnalisable en CSS. Il est également utilisé sur E-monsite.

Le plugin JCarousel permet de créer une galerie de photos (horizontale ou verticale) et de les faire défiler dans zone limitée. Il est également simple à mettre en place. La structure des blocs générés ne facilite pas forcément la personnalisation graphique. Ce plugin a été utile sur le site du Festival de Saint-Riquier et sur Coconews.

Enfin, en bref, je peux également citer le plugin Cycle qui permet de faire des diaporamas avec des animations personnalisées, JQueryUI qui propose plein de fonctionnalités différentes telles un datepicker (un calendrier permettant de sélectionner une date), des curseurs à glissière…, Tooltip qui permet de créer des info-bulles personnalisables et enfin Rating qui permet de créer un système de notation personnalisé.

Mais à quoi ça sert ?

Ce n’est pas par hasard si le slogan de JQuery est : « Write less, do more » (que l’on peut littéralement traduire par : « Ecrivez moins, faîtes-en plus »). JQuery permet donc de faire du JavaScript plus facilement et plus rapidement. Cette librairie est également utile pour réaliser de légers effets graphiques ou bien encore des animations (certains sites faits avec JQuery ressemblent beaucoup à des sites en flash).

Comment ça fonctionne ?

La première chose à faire est de télécharger la dernière version (à l’heure actuelle 1.3.2) de JQuery (disponible ici). Il faut ensuite lier JQuery à votre page HTML comme n’importe quel fichier externe JavaScript :

<script src="js/jquery-1.3.2.js" type="text/javascript"></script>

Ensuite, pour faire un premier effet (agrandir un bloc par exemple), il faut insérer ce script dans votre page (ou dans un fichier externe, selon votre préférence) :

$(document).ready(function() {  $('a#agrandir').click(function() {
$("#bloc1").animate( { width:"90%" }, 1000 )  });});

Quelques explications :

• la première ligne permet de demander au navigateur d’exécuter le code JavaScript lorsque la page est chargée (équivalent à l’attribut onload).
• la deuxième ligne permet de détecter si le lien ayant pour id agrandir (a#agrandir) a été cliqué (équivalent à l’attribut onclick)
• la troisième ligne permet d’animer le bloc ayant pour id bloc1 jusqu’à ce qu’il ait une largeur de 90% (l’animation durera 1000 millisecondes, soit une seconde).

Une documentation en français de JQuery existe, elle est disponible ici.

La POO est, comme son nom l’indique, basée sur la notion d’objet. Un objet possède des attributs (repésentant l’état de l’objet) et des méthodes (représentant des opérations applicables à l’objet). Toute la façon d’imaginer, de penser le code est remis en question par rapport au php classique (dit « procédural »). Il faut un petit temps d’adaptation pour faire du code réellement en objet. La difficulté provient du fait que l’on a parfois du mal à imaginer certaines notions virtuelles sous forme d’objet.

Ce qui est appelée « classe », est tout ce qui définit un objet. Un objet est unique (on parle ici d’instance ou d’occurence de classe) mais deux objets peuvent être instanciés à partir de la même classe. Donc la première chose à faire en POO, c’est de créer une classe (après avoir analyser le problème et savoir ce que l’on veut faire exactement. Voici sommairement la syntaxe à respecter pour créer une première classe (contenu du fichier MaClasse.class.php) :

class MaClasse {
	private $id;
	private $attribut;
	public function __construct($id= null, $attribut= null)
	{
		if(!empty($id)) {
			$this->id = $id;
		}
		if(!empty($attribut)) {
			$this->attribut = $attribut;
		}
	}

	public function affiche()
	{
		echo "L'attribut vaut $this->attribut";
	}
}

Quelques explications sur la classe créée ci-dessus :

• Une des premières règles de la POO est que le nom de la classe doit commencer par une majuscule. Après avoir indiqué le nom de la classe, on définit les attributs de cette classe (ici les attributs sont id et attribut. La première fonction (__construct) est appelé le constructeur de la classe. C’est grâce à cette fonction que l’on peut créer un objet de cette classe en faisant simplement « new() » (voir ci-après).

• La variable $this est une variable spécifique à la POO, elle permet d’indiquer que c’est cet objet qui est modifié. $this->id correspond à l’attribut id de l’objet sur lequel on travaille.

• La deuxième fonction (affiche) est une méthode de l’objet, ici c’est une méthode toute simple qui permet d’afficher, avec une phrase, la valeur de l’attribut nommé attribut.

Une fois la classe créée, il faut pouvoir s’en servir et créer des objets de cette classe :

include("MaClasse.class.php");$objet = new MaClasse(1, 10);$objet->affiche();

La première ligne permet d’inclure le fichier contenant la classe. La deuxième instruction permet de créer un nouvel objet grâce à l’appel au constructeur avec le mot « new ». Après cette ligne, on a donc un objet MaClasse (nommé « $objet ») dont les attributs id et attribut ont respectivement 1 et 10 comme valeur. Enfin la dernière ligne affiche : « L’attribut vaut 10« .

Voici donc le nécessaire pour débuter avec la POO en PHP. Malgré le temps d’adapation à la philosophie de la POO, cette technique de programmation fait gagner du temps. En effet, on se trouve, à la fin, avec un code plus compréhensible (surtout sur des gros projets), plus facilement réutilisable et surtout plus facilement maintenable.

Enfin, je mets quelques liens qui m’ont permis de débuter avec la Programmation Orientée Objet en PHP. Je préfère apprendre avec des exemples concrets, donc la plupart de ces liens vous en présenteront :

• Exemple : calculatrice (apprendre-php.com, forum)
• Classe sur des comptes utilisateurs (clubic.com, forum)
• Créer un blog en POO (nettuts.com, tutoriel)
• POO et MySQL (nettuts.com, tutoriel)
• Gestion des exceptions en PHP5 (scriptsphp.org, blog)

J’ai donc été obligé de trouver une solution alternative : l’API Live Maps de Microsoft (l’outil est également nommé Virtual Earth). Cette API proposant une bonne géolocalisation des Antilles françaises, j’ai donc pu l’utiliser sur Coconews.

J’ai trouvé que la documentation et les exemples que propose Microsoft pour l’utilisation des Live Maps étaient moins complets que ce qui est proposé par Google. Microsoft propose une vue supplémentaire : Bird’s view (littéralement « vue d’oiseau »). C’est une simple vue aérienne mais avec un décalage de 45° (voir l’image ci-dessous). Il faut également souligner que ce sont les données de l’IGN qui sont utilisées dans les Live Maps. Enfin il est à noter que, contrairement aux Google Maps, l’utilisation des Live Maps ne nécessite aucune inscription.

Pour insérer les Live Maps sur Coconews, je n’ai pas rencontré de grosses difficultés. Le plus dur a été de trouver des ressources et des exemples sur Internet. Il y en a assez peu et presque tout est en anglais. Les deux principales ressources que j’ai utilisées sont disponibles ici et là. Je n’ai pas utilisé l’outil de Géolocalisation direct (trouver la latitude et la longitude à partir d’une adresse) proposé par Microsoft car celui-ci ralentissait l’affichage de la carte et n’était pas toujours très pertinent. J’ai donc utilisé l’outil que propose Yahoo qui m’a permis de récupérer les coordonnées de chaque villes de Guadeloupe, Martinique et Guyane (plus d’informations disponibles sur ce billet de Tony : [PHP/SQL] Géolocalisation et distance entre des villes). J’ai également constaté que l’affichage de la carte est parfois plus lent avec Firefox qu’avec Internet Explorer.

Côté code, pour simplement afficher la carte (centrée sur Pointe-à-Pitre) il faut d’abord charger l’API JavaScript de microsoft (entre les balises <head> et </head> de la page html):

<script type="text/javascript" src="http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.2"></script>

Ensuite pour afficher la carte, il faut insérer le JavaScript suivant :

<script type="text/javascript">
var map = null;
function chargeLaCarte()
{
map = new VEMap('blocCarte');
map.LoadMap(new VELatLong(16.2448, -61.5297), 10 ,'h' ,false);
}
</script>

Enfin, dans la page html il faut dire au navigateur de charger la carte au chargement de la page (attribut onload de la balise <body>) et prévoir le bloc dans lequel la carte sera affichée :

<body onload="chargeLaCarte();">
<div id='blocCarte' style="position:relative; width:400px; height:400px;"></div>
</body>

Php propose deux fonctions aussi puissantes qu’utiles (mais aussi méconnues) : serialize et unserialize.

• Serialialize compresse (linéarise) un tableau Php
• Unserialize le décompresse (ou délinéarise), tout simplement.

A partir de là, l’idée paraît s’imposer d’elle même : pour certaines requêtes qui sont énormément exécutées et/ou qui sont très lourdes (par exemple les données d’un membre utilisées sur toutes les pages d’un site), pourquoi ne pas mettre en cache le tableau issu d’un mysql_fetch_array() ? Ainsi, une fois que la requête a été exécuté on n’accède plus à la base de donnée, on récupère le tableau de données dans un fichier texte puis on le décompresse.

La première fonction permet, tout simplement, d’écrire dans un fichier (en le créant, le cas échéant) :

<?
function maj_fichier($file,$valeur)
{
$fp = fopen("$file","w+"); // ouverture du fichier en écriture (on le créé s'il n'existe pas)
fputs($fp, $valeur); // on écrit dans le fichier
fclose($fp);
}
?>

La seconde – et c’est la fonction qui nous intéresse – est la fonction de mise en cache :

(pour l’utiliser vous aurez besoin de la fonction maj_fichier() ci-dessus et de la fonction requete_sql disponible sur ce billet)

<?
function MiseEnCache($nomFichier,$table,$where,$champs)
{

if(file_exists($nomFichier)) // si les variables sont en cache
{
$requete = unserialize(lire_fichier($nomFichier)); // on utilise le fichier cache (unserialize = decompresser le tableau)
}
else // sinon on fait la requete sql
{
$requete = requete_sql($table, $champs, $where);
maj_fichier($nomFichier, serialize($requete)); // on place le resultat du tableau dans un fichier (serialize = compresser le tableau)
}

return $requete;
}
?>

Exemple d’utilisation :

<?
$req_membre=MiseEnCache("/cache/membres/membre-".$id_membre.".txt","membres", "id='$id_membre'", "prenom,nom,date_inscription,login");

echo »Bienvenue « .$req_membre[prenom]. » « .$req_membre[nom]. » ! »;
?>

Cet exemple permet de pouvoir afficher sur toutes les pages le prénom et le nom du membre en effectuant la requête qu’une seule fois ! Malin n’est-ce pas ?

Mais bien sur vous-vous dites : et si le membre modifie son nom, l’information sera erronée ?

La réponse est simple : il suffit de supprimer le fichier texte lors de la modification des informations pour le régénérer avec les bonnes !!

Il y a néanmoins une limitation à l’utilisation de ce procédé : ne l’utilisez pas pour des données sensibles (mot de passe, email, etc.) car un fichier texte est beaucoup plus facilement accessible pour un pirate qu’une base de données…

En général, pour chaque formulaire sur un site on créé une fonction spécifique. Ce qui peut s’avérer rapidement une grosse perte de temps.

La problématique est donc posée : comment gagner du temps tout en effectuant des contrôles sur les formulaires en bonne et due forme ?

Il suffit d’avoir une seule et même fonction pour l’ensemble des formulaires. C’est là que l’utilisation de jQuery devient très intéressante. En effet, avec jQuery il est possible d’agir sur les éléments de la page ayant le même sélecteur.

Nous allons donc définir une classe spécifique aux éléments de formulaire obligatoires. De plus, nous allons indiquer un élément title aux champs formulaires afin de pouvoir les réutiliser dans notre fonction :

<input name="nom" id="nom" class="obligatoire" title="Nom" type="text">

Ainsi, tous les éléments ayant la classe « obligatoire » devront être remplis. La fonction javascript suivante se charge du contrôle :

function VerifForm(){
var count=1;
var message="";
$(".obligatoire").map(function(){

if($(this).val()== »)
{
message += « \n – « +$(this).attr(« title »);
count++;
}
});

message += « \n\n »+ »Puis validez de nouveau le formulaire »;

if(count==2) { alert(« Veuillez remplir ce champ :\n »+message);
return false; }
else if(count>2) { alert(« Veuillez remplir ces champs\n »+message);
return false; }
else { return true; }

}

Ainsi, si le champ « nom » n’est pas rempli, une alerte javascript (qui peut être modifiée par une alerte ajax, avec par exemple le plugin facebox) indiquera que le champ n’est pas rempli.

Il ne faut pas oublier d’appeler cette fonction dans la balise <form> : onsubmit= »return VerifForm(); »

Cette fonction est basique et doit être améliorée pour prendre en compte d’autres éléments de formulaire tels que les cases checkbox, les boutons radio, etc. De plus, il serait judicieux de définir des classes différentes pour contrôler les adresses email, les numéros de téléphone, etc.