Je veux devenir mon propre patron » Technique

Encoder son site en UTF-8… entièrement!

monproprepatron — Wed, 31 Mar 2010 07:24:37 +0000

Si j’ai encore passé presque 2 jours à me prendre la tête, cette fois-ci ça n’est pas à cause d’un bug. Non, tout allait très bien jusqu’à ce que je tombe par hasard sur un article parlant d’encoding UTF-8 avec MySQL. Et là, j’y ai découvert le chaînon manquant : l’instruction permettant de spécifier que les communications avec MySQL se font en UTF-8.

Car il ne suffit pas d’encoder sa base en UTF-8 en spécifiant l’interclassement des tables (utf8_general_ci par exemple), il faut aussi préciser que les échanges doivent s’effectuer dans tel encoding en jouant la requête suivante en début de connexion : SET NAMES "utf8"

En effet, j’avais bien remarqué qu’il y avait un souci à ce niveau là, mais j’avais contourné ça à coup de utf8_encode() / utf8_decode() et de html_entities() / html_entity_decode(). Du coup, mon site est devenu un champ de Ã© ou de �, le temps que je reprenne tout y compris une reprise des données stockées en base. C’était laborieux mais je pense que ça valait le coup, maintenant je sais, je crois, que c’est propre!

Voilà 2 sites qui résument tout ce qu’il faut faire pour gérer entièrement un site en UTF-8.

http://j-willette.developpez.com/tutoriels/web/encoder-son-site-en-utf8/

http://electron-libre.fassnet.net/utf8.php

Continuez votre lecture :

Faire suivre cet article :

IE6 ou l’éternel combat

monproprepatron — Tue, 16 Mar 2010 23:57:00 +0000

L’autre jour, après quelques modifications sur mon site, je fais un petit test avec Internet Explorer 6, pour m’assurer que tout va bien. “Et là, c’est le drame…” Une fois de plus, la mise en page en a pris un sérieux coup : margin non respectées, positionnements aléatoires, … La page n’est même plus centrée alors que j’avais réglé ces problèmes il y a quelques temps déjà.

Je cherche donc des infos sur le centrage de éléments sous IE6 et tombe sur un article chez Alsacreations : Centrer les éléments ou un site web en CSS. Je n’y apprends pas grand chose de plus que ce que je n’ai déjà fait, jusqu’à un encadré à la fin de l’article :

N’oubliez pas le Doctype !
Attention à ne pas oublier le doctype du document (lire “DTD : comment choisir”), sinon votre page sera en mode Quirks.
Dans ce mode, Internet Explorer se comporte comme les versions antérieures à IE6, c’est à dire qu’il n’interprète pas les dimensions et les marges comme il le faudrait. Dans ce cas précis, il n’appliquerait pas le centrage à l’aide des marges automatiques.

Le mode Quirks?!

En effet, pour m’aider à débugguer un minimum, j’ai installé la DebugBar (une sorte de FireBug pour IE), et j’ai aperçu cette mention : “mode Quirks”. Mon site s’affiche donc sous IE6 comme sous IE5! Comme si ça n’était pas assez minable avec IE6!

Et tout ça serait dû à un problème de Doctype? Ma déclaration est pourtant correcte :

Sauf qu’avant cette déclaration, j’avais ajouté la déclaration XML suivante :

Et cela suffisait à faire sauter le DOCTYPE. J’ai supprimé cette ligne peu utile et tout est rentré dans l’ordre dans le monde vicieux d’IE6.

Continuez votre lecture :

Faire suivre cet article :

Script de mise en prod : gestion des magic quotes chez 1and1

monproprepatron — Mon, 08 Mar 2010 08:21:55 +0000

Il me restait encore un dernier point à aborder concernant mon petit script de mise en prod. Celui-ci est spécifique aux hébergements mutualisés chez 1and1, puisqu’il s’agit de la gestion des magic quotes qui sont activées par défaut chez cet hébergeur. Cette partie du script vise donc à les désactiver.

Vu qu’il s’agit d’un hébergement mutualisé, il n’est pas possible de modifier directement la configuration serveur de Php. Il est possible de faire la modification dans le code des pages Php, mais je préfère différencier les aspects métiers du code et la configuration. La dernière solution est de faire la modification dans un fichier php.ini.

Contenu du fichier php.ini :
magic_quotes_gpc = Off magic_quotes_runtime = Off magic_quotes_sybase = Off

Un fichier?

Oui et non : un fichier php.ini par répertoire contenant des fichiers Php.

Ce qui est un peu lourd et c’est là qu’intervient le script de mise en prod. C’est lui qui va se charger de recopier le fichier php.ini dans tous les répertoires concernés dans l’archive à distribuer. Pour faire cette opération on utilise l’instruction d’itération for. Elle n’est pas par défaut dans Ant, il faut ajouter la librairie ant-contrib (pour ma part, la version 1.0beta3 ne fonctionne pas, j’ai gardé la 0.6). Et il n’y a plus qu’à boucler sur les dossiers en excluant ceux qui n’en n’ont pas besoin comme les répertoires d’images, de css, …

Plus d’infos sur le comportement des magic quotes chez PhpFrance.

Continuez votre lecture :

Faire suivre cet article :

Récupérer un nom de domaine

monproprepatron — Sat, 06 Mar 2010 00:04:40 +0000

Je racontais au lancement de ce blog, mon choix du nom de domaine, comme quoi je n’avais pas eu le choix en ce qui concerne l’extension, car le domaine monproprepatron.com était occupé. J’avais donc choisi monproprepatron.fr.

Par curiosité, j’avais tout de même noté sur mon agenda la date d’expiration de monproprepatron.com qui était début décembre 2009, en me disant “on sait jamais”. Et voilà que le lendemain de la date d’échéance, je vois que le statut est passé de Registered à Renewal hold. Très bien, c’est que le propriétaire laisse le domaine. Ceci dit, pendant cette période de Renewal Hold, l’ancien propriétaire peut racheter le domaine, mais pour un tarif bien plus cher. Du coup, tout les jours, j’ai vérifié si le domaine n’était pas disponible à l’achat. J’ai fini par me lasser un peu, quand finalement un jour vers la mi-janvier : le domaine est passé au statut Redemption period. Ce qui ne changeait rien pour moi. Et c’était reparti pour encore un mois, jusqu’à ce que… le statut passe à Pending Delete… Soupir!

Et finalement une semaine plus tard, alors que je vérifiai le statut de façon routinière, j’ai vu qu’il était Available! Je n’y croyais plus, après 2 mois et demi!!! Il m’a ensuite fallu 2 minutes pour l’acheter. Tout ça pour ça!

D’ailleurs pendant les derniers jours (la période de Pending Delete) j’ai reçu plusieurs fois le même mail en tant que propriétaire d’un domaine similaire. Provenant d’un certain John Timmers de la société InTrust Domains, il pensait que j’étais intéressé (c’était pas faux) par ce domaine qui allait bientôt être disponible et me proposait de passer par eux pour le racheter. J’ai pas trop creusé, mais j’imagine qu’il y avait une bonne commission pour eux dans l’affaire. Et je trouve ça un peu intrusif comme méthode. En tout cas, ça n’a pas été nécessaire!

Continuez votre lecture :

Faire suivre cet article :

1 jour, 1 bug…

monproprepatron — Mon, 15 Feb 2010 19:20:37 +0000

C’est pas le premier bug que je rencontre et certainement pas le dernier. Mais celui-ci était plutôt mesquin car assez discret mais aux conséquences assez radicales : pas d’indexation dans Google!

Mon site est à présent en ligne depuis vendredi, mais on va dire en version alpha. Pour l’instant je m’assure que tout va bien. Et tout avait l’air de bien aller : le site s’affichait correctement et se comportait comme en local sur ma machine. En voulant passer ma page d’accueil au validateur W3C, je m’aperçois qu’il ne scanne pas ma page, mais une page d’erreur… ? J’essaye aussi de faire un partage de lien sur la fan page Facebook associée au site : il associe une page d’erreur! J’ai l’impression que la lecture de mon site par des robots ne fonctionne pas et je fais le lien avec l’impossibilité d’ajouter dans Google Reader les flux RSS que je génère alors que le XML m’apparaissait comme il fallait. Mais surtout, je me suis rendu compte en utilisant Google Webmaster Tools, que le robot de Google ne voyait aussi qu’une page d’erreur! En effet, dans Webmaster Tools, il est possible de demander une analyse tel que Googlebot le fait. En utilisant ça, j’ai débuggué petit à petit à coup d’affichage.

Le message d’erreur indiquait qu’un require_once échouait car le fichier n’existait pas. Or quand moi j’affichais le site dans un navigateur il existait bien! Le fichier en question est celui où je stocke tous mes textes (pour gérer plus facilement différentes langues par la suite).
require_once(realpath(dirname(__FILE__).'/../message/'.$_SESSION[LOCALE].'/message.php'));
En débuggant donc, je me suis aperçu que $_SESSION[LOCALE] existait bien, mais était vide! D’où l’erreur. Pourquoi était-elle vide alors? Parce qu’auparavant, j’exécute le code suivant :
$locale = DEFAULT_LOCALE; $clientLocaleTab = explode(",", $_SERVER['HTTP_ACCEPT_LANGUAGE']); foreach ($clientLocaleTab as $clientLocale) { if (is_dir(realpath(dirname(__FILE__).'/../message/'.$clientLocale))) { $locale = $clientLocale; break; } } setInSession(LOCALE, $locale);
Et que pour les robots, $_SERVER['HTTP_ACCEPT_LANGUAGE'] est vide! Sauf que explode me retourne un tableau à un élément… vide! Du coup le test isDir est valide, $locale vaut ”, …

Du coup, j’ai juste rajouté un test qui vérifie que la valeur n’est pas nulle! Tout ça pour ça :
if (strcmp($clientLocale, '')!=0 && is_dir(realpath(dirname(__FILE__).'/../message/'.$clientLocale))) {

Continuez votre lecture :

Faire suivre cet article :

Script de mise en prod : tag de sources dans CVS

monproprepatron — Thu, 11 Feb 2010 08:28:06 +0000

Complément important de mon script de mise en production, le tag des sources dans le repository CVS. CVS est un gestionnaire de sources, qui permet de stocker les différentes versions du code source. Il est donc intéressant de temps en temps, de placer des repères sur toutes ces sources, en particulier, lors d’une mise en prod. Cela permettra de récupérer l’ensemble des sources telles qu’elles étaient lors d’une mise en ligne donnée.

Rien de bien compliqué avec Ant, on va juste ajouter quelques instructions à la target deploy_end, qui rétablit l’accès au site une fois la mise à jour de la base (manuelle…) effectuée.

command="rtag -R prod_${tag_date} ${CVS_MODULE}" failonerror="false" quiet="true" reallyquiet="true" /> command="rtag -R prod_${tag_date} ${CVS_MODULE_ENV}" failonerror="false" quiet="true" reallyquiet="true" />

La directive tstamp permet d’obtenir la date courante au format spécifié par l’attribut pattern et la placer dans une propriété tag_date utilisable ensuite, comme ici pour le nom du tag.

La directive cvs exécute la “command” spécifié : rtag -R prod_${tag_date} ${CVS_MODULE}. Ce qui veut dire en français : place le tag prod_2010-02-10 sur le projet nommé par la propriété CVS_MODULE. Il y aura donc autant de commande cvs que de projets à tagguer.

Continuez votre lecture :

Faire suivre cet article :

Script de mise en production sur serveur mutualisé

monproprepatron — Tue, 02 Feb 2010 10:01:45 +0000

Mon projet étant bientôt prêt, j’ai préparé la semaine dernière un script de mise en production du site, afin d’automatiser au maximum cette procédure pour la rendre plus simple, mais aussi plus sûre. N’ayant qu’un hébergement mutualisé chez 1and1, je ne dispose pas de connexion SSH, ce qui limite un peu les actions disponibles.

J’ai choisi de faire ce script avec Ant, tout simplement parce que je le connais pour l’avoir utilisé dans mes jobs précédents et qu’il me convient parfaitement. Il s’intègre de plus très bien dans Eclipse, que j’utilise pour développer, à condition d’avoir installé le plugin adéquat, soit l’environnement JDT (Java Development Tools), si on a choisi comme moi, une installation Eclipse PDT (Php Development Tools) qui n’inclue pas d’utilitaires pour Java. Car Ant tourne à l’aide de Java.

Que fait ce script?

Avec ce script, j’ai voulu automatiser 3 opérations : la sauvegarde, la construction du projet à déployer et le déploiement.

La sauvegarde

Dans cette “target”, je fais simplement un export des fichiers sources sur le serveur de production. Etant contraint par mon type d’hébergement, je ne peux que passer par une tâche ftp pour les récupérer. Ensuite, je créé une archive compressée à la date du jour, puis je supprime les fichiers importés.



Backup des fichiers


server="${FTP_SERVER}" userid="${FTP_USER}" password="${FTP_PWD}"
depends="false">


Creation de l'archive





Faire un dump de la base!!!

Pour les mêmes contraintes, il n’est pas possible de se connecter à la base de données. On ne peut donc pas automatiser un dump de la base. Il faut donc le faire à la main… Ce n’est ni long, ni compliqué à faire, c’est juste qu’il ne faut pas l’oublier.

Cette étape peut être relativement longue en fonction du nombre de fichiers et de leur taille. Mais on peut le faire un peu à l’avance.

La construction du projet

Cette étape consiste à générer un ensemble de fichiers destinés à être copiés sur le serveur. Ayant plusieurs projets CVS, je récupère le projet avec les sources en environnement de dev, que je surcharge avec celui contenant les fichiers de l’environnement de production.



Suppression des fichiers du build precedent


failonerror="true" quiet="true" reallyquiet="true" />


failonerror="true" quiet="true" reallyquiet="true" />

Le déploiement

Cette étape s’effectue en 2 fois, là aussi pour cause d’impossibilité de connexion à la base de données via le script.

Dans un premier temps, on copie un fichier .htaccess, permettant de renvoyer toutes les requêtes HTTP vers une page d’attente, et on copie les fichiers construits à l’étape précédente (sauf le .htaccess) sur le serveur de production.



 
  userid="${FTP_USER}" password="${FTP_PWD}">
 
 
 
 
 
  userid="${FTP_USER}" password="${FTP_PWD}" depends="yes">
 
 
 
 
 !!! Faire la mise a jour de la base !!!

Ensuite, au besoin, il faut faire la mise à jour de la base de données à la main.

Dans un second temps, on copie le .htaccess de l’environnement de production qui n’a pas été copié précédemment pour rétablir l’accès au site.



 
  userid="${FTP_USER}" password="${FTP_PWD}">

Y’a surement de meilleures méthodes, mais celle-ci fonctionne pour moi pour l’instant.

Continuez votre lecture :

Faire suivre cet article :

CSS : bien utiliser la propriété display

monproprepatron — Wed, 13 Jan 2010 11:10:12 +0000

Ce matin, en refaisant un menu fait à base de listes (ul et li), j’ai eu besoin d’utiliser la propriété CSS display. Et plus particulièrement, je voulais lui affecter la valeur inline-block.

Ayant un doute quant à la compatibilité de cette valeur sur tous les navigateurs (i.e. IE (c marrant ça)), je suis tombé sur le site suivant qui présente très bien les différentes valeurs de display, par des exemples, et indique également la prise en charge par les différents navigateurs. Du coup, j’ai conservé la valeur block : moins pratique, mais qui marchera partout!

Le site à voir : www.quirksmode.org/css/display.html

Continuez votre lecture :

Faire suivre cet article :

Une cuillère de Google Maps + une pincée de jQuery

monproprepatron — Mon, 14 Sep 2009 21:03:30 +0000

Ma problématique de ce WE était d’offrir le moyen aux utilisateurs d’associer des informations à des évènements. Ces informations peuvent être du texte ou une carte Google Maps. La saisie de texte, c’est basique : . Mais pour une carte Google Maps, c’est un peu plus subtil.

Je ne peux pas proposer de saisir les coordonnées à la main. Non, il faut que les utilisateurs déplacent eux-mêmes la Google Map et qu’ensuite je récupère les paramètres de cette carte, qui sont dans mon cas la latitude et la longitude du centre de la carte et le niveau de zoom, pour les sauvegarder. Et avec l’API Google Maps, c’est finalement assez simple.

La map se place dans un div, suivi dans champ input hidden, qui contient les paramètres :

Puis, j’initialise chaque map de la page par la méthode suivante :

function newMap(rowId, lat, lng, zoom) { if (GBrowserIsCompatible()) { var map = new GMap2(document.getElementById("map_"+rowId)); map.setCenter(new GLatLng(lat, lng), zoom); // Ajout des contrôles ou autres paramètres GEvent.addListener(map, "moveend", function() { $("#content-"+rowId).val(map.getCenter().lat()+"|"+map.getCenter().lng()+"|"+map.getZoom()); }); } }

Le listener associé à la map se déclenche en fin de déplacement (‘moveend‘), et récupère alors les paramètres (map.getCenter().lat()) pour les placer dans le champ hidden associé ($(‘#content-’+rowId).val(…)).

Avec un poil de jQuery (qui me séduit de plus en plus), c’est vraiment simple de faire des choses sympas. La preuve.

Continuez votre lecture :

Faire suivre cet article :

Besoin d’un éditeur de texte riche

monproprepatron — Mon, 07 Sep 2009 16:00:47 +0000

Dans le cadre de mon projet, j’ai besoin de permettre aux “usagers” (je fais comme à la SNCF, en fait j’espère que ce seront de bons clients qui paient cher!) d’éditer eux-mêmes du texte. Mais comme je veux ce qu’il y’a de mieux pour mes cli… utilisateurs, il faut qu’ils puissent faire un peu de mise en forme sur ces textes et -surtout- qu’ils puissent intégrer facilement des images. Et quand je parle d’images, j’entends des fichiers stockés sur leur disque dur. Et de mon côté j’ai besoin de récupérer ce texte en HTML pour pouvoir le réafficher par la suite.

Il me faut donc un composant de formulaire plus évolué qu’un basique élément textarea, soit un éditeur de texte riche. Après une recherche sur Google de scripts implémentant ce besoin, j’ai éliminé les composants moches, ceux n’étant plus mis à jour depuis trop longtemps et ceux qui ne géraient pas l’upload d’image mais seulement un lien vers une image déjà présent sur le réseau et j’ai retenu une liste de 4 composants :

Dsrte : avidansoft.com/dsrte
TinyMce : tinymce.moxiecode.com
CKEditor : ckeditor.com
NicEdit : nicedit.com

DSRTE

J’ai trouvé DSRTE (pour Damn Small Rich Text Editor soit en français un sacrément petit éditeur de texte riche), en cherchant tout d’abord un script basé sur jQuery que j’utilise en tant que framework javascript.

Il contient toutes les fonctionnalités dont j’ai besoin, mis à part peut-être la possibilité d’insérer une image par une URL. Le look est par contre un peu à l’ancienne, pas très sexy…

J’avais essayé de l’installer il y a 3, 4 mois sans y parvenir… Mais je dois avouer que je n’avais trop pousser les essais non plus, je n’en avais pas encore besoin à l’époque.

Site : avidansoft.com/dsrte

TinyMCE

Très complet… trop complet… trop complexe! Les utilisateurs de mon service ne seront pas tous des geeks! Ca m’étonnerait d’ailleurs! (Vous comprendrez plus tard…) Il y a un “Image Manager” et il faut y ouvrir trois fenêtres pour pouvoir charger une image : pas assez ergonomique à mon goût.

Je n’ai pas essayé de l’installer car du coup il ne m’intéresse pas. Mais ça semble être tout de même un très bon produit, pour des besoins plus évolués peut-être.

Site : tinymce.moxiecode.com

CKEditor

Celui-ci est très très bien. Complet (insertion de Flash, de formulaires, … le tout customisable bien sur), beau (et on peut choisir d’autres skins et changer les couleurs). Bref, super sauf… la licence. Hé oui, ça a son importance aussi! Dans mon cas, j’aurai besoin d’une licence commerciale à 375$. NEXT!

Site : ckeditor.com

NicEdit

NicEdit n’offre pas des “centaines” de fonctionnalités, mais largement de quoi satisfaire la plupart des gens.
Il propose l’upload de fichier très simplement, en les envoyant par défaut sur le service imageshack, mais il est possible de les héberger soi-même en copiant un script PHP sur son serveur. Je ne l’ai pas encore fait, je ne sais pas quelle est la meilleure stratégie : sous-traiter un service et la charge qui va avec ou être indépendant (d’un arrêt de service par exemple).

Mais surtout, ce qui m’a séduit, c’est l’intégration : 1 minute et je n’exagère pas.
Il y a un fichier javascript et une image à copier.
Ensuite, dans un formulaire il suffit d’ajouter un élément textarea des plus classiques :

Puis un petit bout de javascript pour faire évoluer ce champ de texte en un composant riche :

var editor = new nicEditor().panelInstance('test');

Voilà, c’est tout. Ca marche nickel. Je suis convaincu.

Site : nicedit.com

Et GWT?

Ben oui, pour faire des formulaires un peu avancés, pourquoi pas GWT?

Utilisant régulièrement cette technologie pour mon boulot, la partie GWT elle-même ne m’inquiètait pas. Ce qui me faisait plus peur, c’était plutôt l’intégration avec une application PHP… Je sais que c’est possible en communiquant avec JSON, mais franchement, ce serait autrement plus complexe que la seule ligne de code ci-dessus.

Pour les motivés, un article chez IBM : XML: The bridge between GWT and PHP

Continuez votre lecture :

Faire suivre cet article :