Godefroy

[MySQL] Optimisation du COUNT(*) avec des triggers

Godefroy — Tue, 23 Nov 2010 17:53:00 +0100

On a souvent besoin de connaitre le nombre d'entrées dans une table, avec certaines conditions. Par exemple le nombre d'articles par catégories dans le cas d'un blog. Faire un SELECT COUNT(*) peut vite devenir très lourd quand le nombre d'entrées devient significatif, surtout si le moteur utilisé est InnoDB.

En effet, on peut arriver vite à de gros problèmes de performances avec des COUNT(*) s'exécutant en plusieurs secondes si vous commencez à avoir beaucoup d'entrées (1M entrées par exemple).

Je vous propose donc une astuce pour remplacer avantageusement ces disgracieux COUNT(*). On va garder ici l'exemple des articles et des catégories, avec une table posts et une table categories de structure basique :

CREATE TABLE `categories` (
`id` INT UNSIGNED NOT NULL AUTO_INCREMENT PRIMARY KEY,
`title` VARCHAR(200) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL,
`nbposts` INT UNSIGNED NOT NULL DEFAULT '0'
) ENGINE = INNODB CHARACTER SET utf8 COLLATE utf8_general_ci;

CREATE TABLE `posts` (
`id` INT UNSIGNED NOT NULL AUTO_INCREMENT PRIMARY KEY,
`category_id` INT UNSIGNED NOT NULL,
`title` VARCHAR(200) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL,
`content` TEXT CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL,
`time` INT UNSIGNED NOT NULL,
INDEX (`category_id`),
INDEX (`time`)
) ENGINE = INNODB CHARACTER SET utf8 COLLATE utf8_general_ci;

ALTER TABLE `posts` ADD FOREIGN KEY (`category_id`) REFERENCES `categories` (`id`) ON DELETE CASCADE;

Le champ nbposts va nous servir à garder en mémoire le nombre d'articles dans chaque catégorie. Certains diront que du coup on peut perdre de la consistance, eh bien oui... mais il faudrait avoir un sacré coup de pas de bol ou modifier la valeur du champ à la bourrin pour fausser les valeurs.

Pour actualiser le champ nbposts, on va utiliser des triggers ("déclencheurs" en français), qui l'incrémenteront à chaque insertion et le décrémenteront à chaque suppression :

DELIMITER ;;
CREATE TRIGGER `posts_insert_after` AFTER INSERT ON `posts`
FOR EACH ROW BEGIN
UPDATE `categories` SET `nbposts` = `nbposts`+1 WHERE id=NEW.`category_id` LIMIT 1;
END ;;
CREATE TRIGGER `posts_delete_after` AFTER DELETE ON `posts`
FOR EACH ROW BEGIN
UPDATE `categories` SET `nbposts` = `nbposts`-1 WHERE id=OLD.`category_id` LIMIT 1;
END ;;
DELIMITER ;

Et voilà, votre champ nbposts s'actualise maintenant automatiquement, plus besoin de faire des COUNT(*) !

Article original rédigé par Godefroy et publié sur Godefroy
Reproduction interdite sans autorisation

[MySQL] Optimisation d'une recherche avec multiples jointures

Godefroy — Thu, 10 Dec 2009 16:42:07 +0100

J'ai été confronté à un problème de ralentissements sur EklaBlog dûs à une requête SELECT utilisant de multiples jointures. Nous allons voir dans cet article comment optimiser cela.

La requête en elle-même n'est pas très complexe et utilise uniquement des clés (primary et indexes), mais elle est très lente pour plusieurs raisons :

Jointure sur 5 tables
Recherche sur 4 champs chacun dans une table différente
Tri par ORDER BY

Elle ressemble en gros à ceci :

SELECT a.id, a.blog, a.category_id, a.title, a.content, a.author, a.creadt, c.url
    FROM mod_article a
    INNER JOIN categories b ON b.id=a.category_id
    INNER JOIN blogs c ON c.id=b.blog_id
    INNER JOIN articles_tags at ON at.article_id=a.id
    INNER JOIN tags t ON t.id=at.tag_id
    WHERE t.name="skreo" AND a.online="1" AND b.protect="" AND c.protect=""
    ORDER BY a.creadt DESC
    LIMIT 10

Les tables concernées sont relativement grosses :

130 000 entrées dans tags
1 400 000 entrées dans articles_tags
400 000 entrées dans articles
70 000 entrées dans categories
130 000 entrées dans tags
19 000 entrées dans blogs

D'où un temps d'exécution de la requête pouvant atteindre 30 secondes...

Lors d'un test en local, que je répèterai dans la suite de l'article, j'obtiens une exécution en 0.24s en moyenne quand le pc ne fait rien d'autre.

Solution possible

Une solution possible que m'a indiqué mon ami Guilhem est de stocker un résultat intermédiaire de la requête dans une table de type MEMORY (en RAM) :

CREATE TABLE tags_lookup (
    article_id int(10) unsigned NOT NULL,
    tag_id int(10) unsigned NOT NULL,
    creadt int(10) unsigned NOT NULL,
    blog_id int(10) unsigned NOT NULL,
    KEY tag_id (tag_id),
    KEY creadt (creadt),
    KEY blog_id (blog_id)
) ENGINE=MEMORY

Il faut ensuite remplir la remplir :

# On vide la table
TRUNCATE TABLE tags_lookup;
# Puis on la remplit entièrement
INSERT INTO tags_lookup
    SELECT a.id AS article_id, at.tag_id, a.creadt, c.id AS blog_id
    FROM articles a, categories b, blogs c, articles_tags at
    WHERE a.online="1" AND b.protect="" AND c.protect=""
    AND b.id=a.category_id AND c.id=a.blog_id AND at.article_id=a.id;

Il faudra exécuter les requêtes ci-dessus régulièrement pour mettre à jour le contenu de la table, à l'aide d'un bash par exemple.

Pour obtenir les informations qu'on voulait au début, on peut alors exécuter cette requête :

SELECT a.id, a.blog, a.category_id, a.title, a.content, a.author, a.creadt, c.url
    FROM tags t
    INNER JOIN tags_lookup s ON s.tag_id=t.id
    INNER JOIN articles a ON a.id=s.article_id
    INNER JOIN categories b ON b.id=a.category_id
    INNER JOIN blogs c ON c.id=a.blog _id
    WHERE t.name="skreo"
    ORDER BY s.creadt DESC
    LIMIT 10

Lors de mon test, j'obtiens cette fois-ci 0.15s d'exécution en moyenne, ce qui est déjà mieux.

Mais le gros avantage d'une telle structure, c'est qu'on va pouvoir faire une recherche beaucoup plus facile à comprendre pour le serveur MySQL, grâce à des requêtes imbriquées :

SELECT a.id, a.blog, a.category_id, a.title, a.content, a.author, a.creadt, c.url
    FROM (
        SELECT article_id
        FROM tags_lookup
        WHERE tag_id=(
            SELECT id
            FROM tags
            WHERE name="skreo"
            LIMIT 1
        )
        ORDER BY creadt DESC
        LIMIT 10
    ) s
    INNER JOIN articles a ON a.id=s.article_id
    INNER JOIN categories b ON b.id=a.category_id
    INNER JOIN blogs c ON c.id=a.blog_id
    ORDER BY a.creadt DESC
    LIMIT 10;

Toujours avec la même base de données, j'obtiens cette fois-ci une exécution presque instantanée : entre 0 et 0.02 secondes !

Conclusion

En mettant en place une table en mémoire vive rassemblant des données correspondant à une partie du traitement d'une grosse requête, on peut donc éviter des jointures très lourdes.

Cette méthode a bien évidemment comme inconvénient d'avoir des données pas toujours ultra fraiches en mémoire, mais ça peut être un bon compromis quand on voit la rapidité des requêtes qui en résultent.

Vous avez d'autres solutions intéressantes ? une meilleure idée ?

Article original rédigé par Godefroy et publié sur Godefroy
Reproduction interdite sans autorisation

[Sécurité PHP] Toujours vérifier le Referer lors d'un envoi par POST

Godefroy — Fri, 26 Dec 2008 14:27:26 +0100

C'est un aspect très souvent négligé de la sécurité des sites web, et qui est pourtant critique.

Par exemple, si Facebook n'avait pas prévu ce genre de sécurité, nous pourrions partir du postulat qu'il y a une chance non négligeable qu'un visiteur soit connecté à Facebook (par session ou cookies). Prenons alors une page web visitée par quelques dizaines ou centaines de visiteurs par jour, un blog par exemple. Sur cette page, nous allons mettre un formulaire identique à celui permettant de modifier le profil sur Facebook. Une ligne de javascript suffira à envoyer le formulaire ( $("id_form").submit() ), avec tout plein de grossièretés qui viendront égayer le profil de l'utilisateur

C'est de cette manière qu'Olivier Duffez s'est fait pirater son compte Gmail puis le nom de domaine Webrankinfo.com ! En effet, le pirate s'est débrouillé pour que M. Duffez se retrouve sur une page envoyant un formulaire vers la page de création de filtre de Gmail. Et comme une session Gmail était ouverte sur l'ordinateur de M. Duffez, le formulaire en question a pu créer un filtre qui transférait tous les e-mails reçus au spammeur. Le spammeur a ensuite utilisé le formulaire "Mot de passe oublié" du registrar chez lequel est enregistré webrankinfo.com, et a donc reçu l'e-mail permettant de modifier le mot de passe.

Alors ? N'est-ce pas critique comme faille ?
Ce type d'attaque est appelé Cross-Site Request Forgery, et n'est pas très connu en raison d'un manque de communication à ce propos.
Voyons comment l'étudier concrètement, et comment éviter ce genre de déboires.

Pour vous montrer un exemple concret, créons une page affichant les données reçues par POST :
http://data0.eklablog.com/skreo/perso/test_referer.php

Code de la page :



Données reçues par POST :

$_POST = 

print_r($_POST);

?>

[code=php]


Données reçues par POST :
$_POST = print_r($_POST);
?>

[/code]

Ensuite, sur un nom de domaine différent (ici skreo.net), créons un petit formulaire qui envoie des données à cette page :

action="http://data0.eklablog.com/skreo/perso/test_referer.php" method="post" id="form_test_referer">
Variable "var" : type="text" value="" name="var" /> />
type="submit" value="Envoyer" />

Ce qui donne ceci :

Vous pouvez tester ce formulaire, vous voyez bien qu'on peut envoyer n'importe quelles données par POST vers un autre domaine. Un petit bout de code Javascript à la suite du formulaire permet d'envoyer le formulaire immédiatement sans même demander l'avis du visiteur :

type="text/javascript">
document.getElementById("form_test_referer").submit();

Voyons maintenant comment empêcher dans la majorité des cas ce genre de hacks, avec l'aide du Referer. Je dis bien "dans la majorité des cas", car parfois le visiteur règle son navigateur internet pour que le referer soit vide.

Nous allons donc comparer le Referer avec le nom de domaine de la page courante, et vider la variable $_POST s'il est différent. Reprenons notre fichier test_referer.php et nommons le test_referer2.php :

// Vérification du Referer pour les variables passées en POST
if(isset($_SERVER['HTTP_REFERER'])
&& $_SERVER['HTTP_REFERER']!=''
&& substr($_SERVER['HTTP_REFERER'], 7, strlen($_SERVER['SERVER_NAME'])) != $_SERVER['SERVER_NAME']){
$_POST = array();
}

?>



Données reçues par POST :

$_POST = 

print_r($_POST);

?>

[code=php]
// Vérification du Referer pour les variables passées en POST
if(isset($_SERVER['HTTP_REFERER'])
&& $_SERVER['HTTP_REFERER']!=''
&& substr($_SERVER['HTTP_REFERER'], 7, strlen($_SERVER['SERVER_NAME'])) != $_SERVER['SERVER_NAME']){
$_POST = array();
}

?>


Données reçues par POST :
$_POST = print_r($_POST);
?>

[/code]

Reprenons notre formulaire pour tester, mais cette fois vers test_referer2.php :

Et le tour est joué !
La page accepte toujours les envois de données par POST provenant du même nom de domaine, mais n'accepte pas les autres !

Si vous avez un site web, je vous conseille très fortement de mettre en place cette sécurité, si ce n'est pas déjà le cas

Article original rédigé par Godefroy et publié sur Godefroy
Reproduction interdite sans autorisation

Détecter les sites que vos visiteurs utilisent

Godefroy — Fri, 01 Aug 2008 02:34:31 +0200

Je me suis souvenu d'un article très intéressant sur lequel j'étais tombé il y a un ou deux mois, présentant une classe javascript permettant de détecter quels réseaux sociaux utilisent les visiteurs. En regardant le code de plus prêt, je l'ai trouvé compliqué pour pas grand chose, avec l'utilisation d'une iframe et un code pas très optimisé.

Voici donc un code que je viens de pondre, parce que je pense qu'il pourra être utile, aussi bien pour vous que pour moi J'utilise ici le framework Mootools 1.2 , mais je pense que c'est facilement adaptable à d'autres. Le principe est simple, on utilise une "faille" du CSS qui consiste à récupérer le style de liens après avoir appliqué un style particulier aux liens visités ("a:visited").

Une petite démo pour commencer : checkvisited.html

On va donc commencer par faire un peu de CSS :

a.test_visited { display: block; }
a.test_visited:visited { display: none; }

C'est tout pour le CSS !
Maintenant, le Javascript :

// Implémentation de la fonction checkVisited
// pour les chaînes de caractères (String)
String.implement({
    checkVisited : function(){
        var e = (new Element("a", {
                href: this,
                "class" : "test_visited"
            }))
            .inject(document.body),
            b = e.getStyle("display")=="none";
        e.destroy();
        return b;
    }
});

// Implémentation de la fonction checkVisited pour
// les tableaux (Array) : tester une liste d'urls
Array.implement({
    checkVisited : function(){
        var b = false;
        this.each(function(s){
            if(s.checkVisited())
                b = true;
        })
        return b;
    }
});

Ces deux implémentations permettent de vérifier une URL ou une liste d'URLs.

On va reprendre l'exemple des réseaux sociaux que traite Aza Raskin dans son article. D'abord, on crée un conteneur pour l'affichage du résultat :

id="visited_sites">

Ensuite, on crée la liste et on la traite :

// Liste de réseaux sociaux
var sites = {
    "Digg": ["http://digg.com", "http://digg.com/login"],
    "Reddit": ["http://reddit.com", "http://reddit.com/new/", "http://reddit.com/controversial/", "http://reddit.com/top/", "http://reddit.com/r/reddit.com/", "http://reddit.com/r/programming/"],
    "StumbleUpon": ["http://stumbleupon.com"],
    "Yahoo Buzz": ["http://buzz.yahoo.com"],
    "Facebook": ["http://facebook.com/home.php", "http://facebook.com", "https://login.facebook.com/login.php"],
    "Del.icio.us": ["https://secure.del.icio.us/login", "http://del.icio.us/", "http://delicious.com"],
    "MySpace": ["http://www.myspace.com/"],
    "Technorati": ["http://www.technorati.com"],
    "Newsvine": ["https://www.newsvine.com", "https://www.newsvine.com/_tools/user/login"],
    "Songza": ["http://songza.com"],
    "Slashdot": ["http://slashdot.org/"],
    "Ma.gnolia": ["http://ma.gnolia.com/"],
    "Blinklist": ["http://www.blinklist.com"],
    "Furl": ["http://furl.net", "http://furl.net/members/login"],
    "Mister Wong": ["http://www.mister-wong.com"],
    "Current": ["http://current.com", "http://current.com/login.html"],
    "Menaeme": ["http://meneame.net", "http://meneame.net/login.php"],
    "Oknotizie": ["http://oknotizie.alice.it", "http://oknotizie.alice.it/login.html.php"],
    "Diigo": ["http://www.diigo.com/", "https://secure.diigo.com/sign-in"],
    "Funp": ["http://funp.com", "http://funp.com/account/loginpage.php"],
    "Blogmarks": ["http://blogmarks.net"],
    "Yahoo Bookmarks": ["http://bookmarks.yahoo.com"],
    "Xanga": ["http://xanga.com"],
    "Blogger": ["http://blogger.com"],
    "Last.fm": ["http://www.last.fm/", "https://www.last.fm/login/"],
    "N4G": ["http://www.n4g.com"],
    "Faves": ["http://faves.com", "http://faves.com/home", "https://secure.faves.com/signIn"],
    "Simpy": ["http://www.simpy.com", "http://www.simpy.com/login"],
    "Yigg": ["http://www.yigg.de"],
    "Kirtsy": ["http://www.kirtsy.com", "http://www.kirtsy.com/login.php"],
    "Fark": ["http://www.fark.com", "http://cgi.fark.com/cgi/fark/users.pl?self=1"],
    "Mixx": ["https://www.mixx.com/login/dual", "http://www.mixx.com"],
    "Google Bookmarks": ["http://www.google.com/bookmarks", "http://www.google.com/ig/add?moduleurl=bookmarks.xml&hl=en"],
    "Subbmitt": ["http://subbmitt.com/"]
},
    t = []; // Variable dans laquelle on va stocker la liste de sites visités par l'utilisateur

// On vérifie pour chaque site de la liste
for(var i in sites){
    if(sites[i].checkVisited())
        t.push(i);
}

// On affiche le résultat
$("visited_sites").set("html", "Sites visités : " + t.join(", "));

C'est fini !

Chez moi, ça fonctionne impeccablement avec Firefox 3, Opéra 9.5, IE 6, et IE 7.
Si vous avez un problème d'incompatibilité ou une suggestion, n'hésitez pas ! Par exemple, on pourrait, comme Aza, traiter pour une URL quelconque l'URL avec et sans les "www".

Merci de me faire un petit lien de retour si vous utilisez ce script quelque part

Article original rédigé par Godefroy et publié sur Godefroy
Reproduction interdite sans autorisation

[PHP] Enlever tous les accents d'une chaîne

Godefroy — Fri, 25 Jul 2008 20:46:01 +0200

Voici ma fonction pour enlever tous les accents d'une chaîne de caractères tout en respectant l'encodage (cette fonction traite très bien les textes UTF-8 par exemple) :

function removeAccents($txt){
    $txt = str_replace('œ', 'oe', $txt);
    $txt = str_replace('Œ', 'Oe', $txt);
    $txt = str_replace('æ', 'ae', $txt);
    $txt = str_replace('Æ', 'Ae', $txt);
    mb_regex_encoding('UTF-8');
    $txt = mb_ereg_replace('[ÀÁÂÃÄÅĀĂǍẠẢẤẦẨẪẬẮẰẲẴẶǺĄ]', 'A', $txt);
    $txt = mb_ereg_replace('[àáâãäåāăǎạảấầẩẫậắằẳẵặǻą]', 'a', $txt);
    $txt = mb_ereg_replace('[ÇĆĈĊČ]', 'C', $txt);
    $txt = mb_ereg_replace('[çćĉċč]', 'c', $txt);
    $txt = mb_ereg_replace('[ÐĎĐ]', 'D', $txt);
    $txt = mb_ereg_replace('[ďđ]', 'd', $txt);
    $txt = mb_ereg_replace('[ÈÉÊËĒĔĖĘĚẸẺẼẾỀỂỄỆ]', 'E', $txt);
    $txt = mb_ereg_replace('[èéêëēĕėęěẹẻẽếềểễệ]', 'e', $txt);
    $txt = mb_ereg_replace('[ĜĞĠĢ]', 'G', $txt);
    $txt = mb_ereg_replace('[ĝğġģ]', 'g', $txt);
    $txt = mb_ereg_replace('[ĤĦ]', 'H', $txt);
    $txt = mb_ereg_replace('[ĥħ]', 'h', $txt);
    $txt = mb_ereg_replace('[ÌÍÎÏĨĪĬĮİǏỈỊ]', 'I', $txt);
    $txt = mb_ereg_replace('[ìíîïĩīĭįıǐỉị]', 'i', $txt);
    $txt = str_replace('Ĵ', 'J', $txt);
    $txt = str_replace('ĵ', 'j', $txt);
    $txt = str_replace('Ķ', 'K', $txt);
    $txt = str_replace('ķ', 'k', $txt);
    $txt = mb_ereg_replace('[ĹĻĽĿŁ]', 'L', $txt);
    $txt = mb_ereg_replace('[ĺļľŀł]', 'l', $txt);
    $txt = mb_ereg_replace('[ÑŃŅŇ]', 'N', $txt);
    $txt = mb_ereg_replace('[ñńņňŉ]', 'n', $txt);
    $txt = mb_ereg_replace('[ÒÓÔÕÖØŌŎŐƠǑǾỌỎỐỒỔỖỘỚỜỞỠỢ]', 'O', $txt);
    $txt = mb_ereg_replace('[òóôõöøōŏőơǒǿọỏốồổỗộớờởỡợð]', 'o', $txt);
    $txt = mb_ereg_replace('[ŔŖŘ]', 'R', $txt);
    $txt = mb_ereg_replace('[ŕŗř]', 'r', $txt);
    $txt = mb_ereg_replace('[ŚŜŞŠ]', 'S', $txt);
    $txt = mb_ereg_replace('[śŝşš]', 's', $txt);
    $txt = mb_ereg_replace('[ŢŤŦ]', 'T', $txt);
    $txt = mb_ereg_replace('[ţťŧ]', 't', $txt);
    $txt = mb_ereg_replace('[ÙÚÛÜŨŪŬŮŰŲƯǓǕǗǙǛỤỦỨỪỬỮỰ]', 'U', $txt);
    $txt = mb_ereg_replace('[ùúûüũūŭůűųưǔǖǘǚǜụủứừửữự]', 'u', $txt);
    $txt = mb_ereg_replace('[ŴẀẂẄ]', 'W', $txt);
    $txt = mb_ereg_replace('[ŵẁẃẅ]', 'w', $txt);
    $txt = mb_ereg_replace('[ÝŶŸỲỸỶỴ]', 'Y', $txt);
    $txt = mb_ereg_replace('[ýÿŷỹỵỷỳ]', 'y', $txt);
    $txt = mb_ereg_replace('[ŹŻŽ]', 'Z', $txt);
    $txt = mb_ereg_replace('[źżž]', 'z', $txt);
    return $txt;
}

On peut faire plus simple, certes, mais contrairement à ce qu'on peut voir habituellement, cette fonction traite véritablement tous les accents existants, et fonctionne avec tous les encodages.

Article original rédigé par Godefroy et publié sur Godefroy
Reproduction interdite sans autorisation

Mes conventions en programmation

Godefroy — Fri, 11 Jul 2008 19:40:41 +0200

On a tous nos petites habitudes de programmation : quel type d'indentation, où placer les accolades, notation hongroise, espacements...etc.
Je vais vous présenter les miennes, non pas pour tenter de les imposer (d'ailleurs tout n'est pas forcément bien), mais pour échanger, savoir ce que vous en pensez, et savoir quelles sont les vôtres. Je ne parlerai ici que de l'aspect visuel de la programmation, pas de la structure des fichiers, des frameworks...

Avant tout, un petit exemple en PHP pour illustrer mes conventions :

$monTableau = array('H', 'e', 'l', 'l', 'o');
$txt = '';
$n = 2;
for($i=0; $i($monTableau); $i++){
    $txt .= $monTableau[$i];
    $n = pow($n, 2);
}
if($n % (strlen($txt)+1)==0)
    $txt .= ' World';
echo $txt;
?>

Notation :
J'utilise la notation lowerCamelCase pour nommer mes variables, fonctions, classes, et méthodes.

Indentation :
Tabulation de la largeur de 4 espace.
Je prends soin de bien indenter tout les blocs. Logique diront certains, mais ce n'est pas le cas partout...

Accolades :
Accolade ouvrante à la fin de la ligne de définition de la boucle. Accolade fermante sur une nouvelle ligne, au même niveau que la définition de la boucle.
Pas d'accolades pour un bloc mono-ligne. (par exemple un if suivi d'une seule instruction).

Espaces :
Pour les virgules et les point-virgules : pas d'espace avant, un espace après.
Pas d'espace entre les noms de fonction et la parenthèse ouvrante. Idem pour les boucles.
Pas d'espace entre la parenthèse fermante et l'accolade ouvrante dans les boucles.
Pas d'espace entre le else et le if dans les else if.
Un espace de part et d'autre des opérateurs de modification (=, +=, *=, ...).
Pas d'espace pour les opérateurs de comparaison (==, <=, >=) et pour les opérateurs de modification dans les boucles (for, while, if), sauf pour les longues expressions.

Guillemets
En php, j'utilise uniquement les guillemets simples (apostrophe), sauf pour afficher des caractères spéciaux (\r, \n ...).
Dans les autres langages, des guillemets doubles.

Commentaires
En moyenne un commentaire mono-ligne toutes les 10 lignes, avant un bloc, pour expliquer ce qu'on fait. Je pense qu'ils sont important pour la compréhension générale du code, mais qu'il ne faut pas en abuser.
Pas de bloc de 30 lignes au début des pages, au pire 2 ou 3 lignes.

Allez j'ai envie de faire mon chieur, je crée une chaîne ! Je tague divarvel, Darklg, Babozor, et TomClarks qui seront obligés conviés à décrire à leur tour leurs conventions sur leur blog et faire suivre la chaîne

Article original rédigé par Godefroy et publié sur Godefroy
Reproduction interdite sans autorisation

Internationalisation d'un site web

Godefroy — Wed, 09 Jul 2008 02:03:29 +0200

Je me suis demandé il y a quelques temps quelle serait la meilleure solution pour traduire facilement un site web en plusieurs langues, tout en gardant une facilité de mise à jour, une accessibilité optimale, et des urls correctes pour le référencement. Le sujet a certes beaucoup été traité, mais j'ai trouvé très peu de solutions pratiques, jolies et performantes sur le web.

Certains webmasters recopient simplement l'intégralité de leur site dans un autre dossier ou sur un autre domaine, puis le traduisent. Oublions tout de suite cette solution... Il faut donc opter pour une solution dynamique, que je traiterai ici en php.

URL et détection de la langue

Avant de traduire le site, il faut être capable de détecter la langue du visiteur, de lui proposer de changer de langue, et de mémoriser son choix :

session_start(); // Démarrage de la session pour la sauvegarde du choix de la langue
$langs = array('en', 'fr', 'it'); // Liste des langues

// Si la langue a été changée par get ou cookie, on enregistre la modif
if(isset($_GET['lang']) && in_array($_GET['lang'], $langs) && (!isset($_SESSION['lang']) || $_SESSION['lang']!=$_GET['lang']))
    $_SESSION['lang'] = $_GET['lang'];
else if(isset($_COOKIE['lang']) && in_array($_COOKIE['lang'], $langs) && (!isset($_SESSION['lang']) || $_SESSION['lang']!=$_COOKIE['lang']))
    $_SESSION['lang'] = $_COOKIE['lang'];

// Si aucune langue n'est définie, on prend celle du navigateur du visiteur
if(!isset($_SESSION['lang'])){
    $lang = strtolower(substr($_SERVER['HTTP_ACCEPT_LANGUAGE'], 0, 2));
    $_SESSION['lang'] = in_array($lang, $langs) ? $lang : $langs[0];
}

// Si le cookie de la langue n'est pas défini ou est différent de la var de session, on le définit
if(!isset($_COOKIE['lang']) || $_SESSION['lang']!=$_COOKIE['lang'])
    setcookie('lang', $_SESSION['lang'], time()+60*24*3600, '/');

// Variable $lang locale que nous utiliserons plus loin
$lang = $_SESSION['lang'];
?>

Ce code devra être appelé au tout début de chaque page du site. Nous avons maintenant notre moyen de détection et de mémorisation de la langue.

Ensuite, nous allons prendre l'exemple d'URLs du type http://www.monsite.com/lang/page.html, ce qui a l'avantage de bien référencer toutes les pages dans toutes les langues traduites. Mais nous pourrions tout aussi bien garder des URLs classiques dans le cas d'un service accessible uniquement aux utilisateurs connectés : par exemple Twitter. La langue serait alors enregistrée dans les paramètres de l'utilisateur.

Pour cela, mettons en place un .htaccess avec de l'URL Rewriting à la racine :

RewriteEngine On
RewriteRule ^(en|fr|it)/([^\?]+)?(\?(.*))?$ /$2?$4&lang=$1 [QSA,L]

Et voilà, désomais, un accès à la page http://www.monsite.com/fr/page.php appellera la page page.php à la racine du site en lui passant la variable GET lang=fr, ce qui aura pour effet avec le script précédent d'enregistrer "fr" comme langue dans le cookie et la variable de session du visiteur.

Proposons maintenant au visiteur de choisir sa langue tout en restant sur la même page, au cas où elle aurait été mal détecté (navigateur en anglais pour un français par exemple) :

$URI = $_SERVER['REQUEST_URI'];
if($URI=='/') $URI = '/'.$lang.'/';
?>
"">"/images/en.png" alt="English" />
"">"/images/fr.png" alt="Français" />
"">"/images/it.png" alt="Italiano" />

Vous trouverez plein de super icônes de drapeaux ici.

Stockage des traductions

On peut imaginer deux solutions de stockage pour les textes traduits. J'ai retenu la deuxième :

1- Première solution : Une fonction getText choisissant entre plusieurs textes proposés. Par exemple

function getText($en, $fr){
    global $lang;
    if($lang=='fr') return $fr;
    else return $en;
}

// Affichage d'un texte traduit :
echo getText('Text in english', 'Texte en français');
?>

Ce n'est pas très pratique, et pas très lisible dès que les textes deviennent un peu gros et le nombre de langues grand.

2- Deuxième solution : Le stockage des textes dans divers fichiers : un fichier par langue. L'avantage ici est qu'on peut traduire (ou faire traduire) le site en ajoutant simplement un seul fichier. Nous stockerons les fichiers en.php, fr.php, et it.php dans un dossiers langs. Il suffira d'ajouter cette ligne après la détection de la langue :

require_once 'langs/'.$lang.'.php';

Ensuite, nous avons encore le choix entre plusieurs méthodes de stockage. Les deux principalement utilisées consistent soit à créer une constante par texte, soit un grand tableau avec une entrée par texte. La méthode des constantes a l'avantage d'être performante mais n'est vraiment pas propre. Celle du tableau n'est pas non plus des plus performantes. Je parle bien sûr ici pour une grande échelle : prévoyons 15 000 entrées pour voir réellement les différences entre les méthodes.

Je vais vous proposer une autre méthode, une sorte de compromis, mais performante, pratique, et plus lisible. Elle consiste à utiliser une classe pour stocker les textes sous forme de constantes. Ces constantes restent dans la classe, c'est donc propre, l'accès y est très facile, et les performances sont très bonnes (j'avais fait un benchmark il y a quelques mois, mais je ne l'ai plus sous la main...). Nous allons donner un nom très court à cette classe, par exemple "_". Voici un exemple pour le fichier fr.php, il suffit ensuite de copier le fichier et de le traduire pour les autres langues :

// Classe de stockage :
final class _ {
    const TEXT1 = 'Mon premier texte en français';
    const EXEMPLE = 'Ceci est un exemple';
    const NUM = 'un, deux, trois';
}
?>

Puis pour afficher le texte :

// Affichage du texte :
echo _::TEXT1 . ''. _::EXEMPLE . '
'. _::NUM;
?>

Et voilà, j'espère que ce tuto pourra servir à quelqu'un. Qu'en pensez-vous ? Quelles solutions utilisez-vous ?

Article original rédigé par Godefroy et publié sur Godefroy
Reproduction interdite sans autorisation

Framework Mootools pour EklaBlog

Godefroy — Sun, 24 Feb 2008 17:43:44 +0100

J'ai décidé il y a un peu plus d'une semaine de refaire toute la partie javascript d'EklaBlog pour repartir sur une base solide. Jusqu'à maintenant, j'utilisais la librairie Tool-man qui n'avais pas été mise à jour depuis 2005... J'y avais apporté beaucoup de modifications, notamment pour supporter des multi-listes triables (pour passer un élément d'une liste à une autre). A partir de maintenant, EklaBlog utlisera Mootools, une framework fiable, mise à jour en permanence et relativement légère.

Article original rédigé par Godefroy et publié sur Godefroy
Reproduction interdite sans autorisation

WaSP café

Godefroy — Mon, 28 Jan 2008 23:55:43 +0100

Ce soir j'étais au WaSP café , un événement axé sur les standards du web, et donc l'accessibilité, le javascript, et le css.

Après un court apéro au brownies, coca et jus de fruits, nous avons eu le droit à une présentation par Tristan Nitot (Président de Mozilla Europe) de l'actualité des standards web, des navigateurs et de leurs enjeux. Il a parlé par exemple des plugins propriétaires visant à obliger progressivement les utilisateurs à migrer vers un OS précis, comme pourrait le faire SilverLight.

Nous nous sommes ensuite séparés dans nos ateliers respectifs que nous avions choisis à notre inscription parmi "Accessibilité", "Javascript", "CSS". Pour ma part, j'avais choisi Accessibilité, mais ce n'est pas exactement ce à quoi je m'attendais. Je pensais plutôt qu'on allait aborder l'aspect technique, avec les problèmes que posent le javascript (Ajax...), les animations flash...etc. Mais le principal thème abordé fut la mise en place de l'application d'une loi visant à rendre totalement accessible tous les sites de la fonction publique, notamment avec le RGAA et AccessiWeb .

A part ça, j'ai eu l'occasion de rencontrer Aurélien Levy , Frédéric Petit et Kévin Chanteclair. C'était une soirée bien sympathique, et je pense que j'y retournerai la prochaine fois (dans 2 mois il parait).
Merci à toute l'équipe organisant le WaSP café

Article original rédigé par Godefroy et publié sur Godefroy
Reproduction interdite sans autorisation

Classe de gestion de CSS

Godefroy — Fri, 20 Jul 2007 01:32:37 +0200

Je me suis lancé hier matin (vers 15h ) dans le développement d'une classe de gestion de code CSS, à vrai dire sans même avoir regardé sur internet si ça existait déjà. Après quelques heures de programmation intensive, je me suis quand même posé la question et j'ai fait une petite recherche sur Google. Je n'ai pas trouvé exactement ce que je cherchais : tout ce que j'ai trouvé, c'est des classes php, certes bien codées, mais qui se contentent de parser le css, et de recréer entièrement le code à la fin des modification. "Hé ben quoi t'es pas content ?", me direz-vous. Bah non ! Parce que je chipote encore, et moua je veux que la forme de mon CSS ne change pas du tout même avec des modifications. Je veux que les commentaires restent en place, l'ordre des éléments...etc.

"Et à quoi ça servirait ??", me demanderez-vous encore. Cette classe pourrait avoir plusieurs applications pour EklaBlog (mais elle peut être utile pour d'autres sites) : Le système de thèmes personnalisables l'utilisera, et elle me permettra de modifier facilement le CSS de tous les thèmes à la volée. Par exemple, si je veux modifier la couleur de fond de tous les blogs et ajouter un élément parce que j'ai rajouté un module, je peux faire un script qui ira chercher les fichiers CSS de tous les thèmes, modifiera la couleur de fond (propriété "background-color" de l'élément "body"), et ajoutera un élément (par exemple "machin {border: 1px solid dark;}")

J'ai fini cette classe il y a 10 min, elle fait exactement tout ce que j'ai dit précédemment Et elle gère très bien les listes d'éléments (par exemple : "input, textarea:hover, select")
Et comment elle marche ? Avec plein de masques PCRE et des tableaux associatifs contenant les noms et positions des éléments (trouvés par PCRE). Vive le PCRE !

Par contre désolé, je ne donne pas la source de la classe, mais si elle vous intéresse, demandez la moi en postant un commentaire (sans oublier de mettre votre adresse e-mail), et je vous répondrai par mail

Article original rédigé par Godefroy et publié sur Godefroy
Reproduction interdite sans autorisation