Le concours s’appelle À l’affiche dans une bibliothèque près de chez vous. Les jeunes doivent faire un vidéo « bande-annonce » d’un livre parmi les livres sélectionnés.

Comme c’était du bénévolat et que les visiteurs allaient être des jeunes (donc plus enclins à utiliser un navigateur récent), je me suis permis d’expérimenter un peu avec le CSS3.

Box Shadow

Si vous avez un navigateur récent qui n’est pas Internet Explorer, vous pouvez voir qu’il y a un une ombre autour du contenu principal. Il s’agit de la propriété CSS box-shadow. Elle n’est actuellement implémenté que dans Webkit (Safara, Chrome) et Firefox 3.5+. Comme le CSS3 n’est pas encore ratifié, il faut ajouter l’extension des navigateurs à l’avant de la règle. C’est à dire -moz pour Firefox et -webkit pour Webkit. Par exemple, sur le site du concours, voici la règle que j’ai utilisée:

-moz-box-shadow:0 0 20px 3px black;
-webkit-box-shadow:0 0 20px 2px black;
box-shadow:0 0 20px 2px black;

La version sans préfixe sert pour le jour où cette règle CSS deviendra standard. En gros, j’ai utilisé cinq paramètres:

1. Offset horizontal, au cas où on voudrait décaller.
2. Offset vertical, même chose.
3. Flou (blur), détermine l’intensité du flou, un peu comme dans Photoshop.
4. Étendue (spread), sans avoir trop expérimenté, ça ressemble un peu à padding, mais appliqué à l’ombre. Peut être négatif si on veut la rapetisser.
5. Couleur. Je crois que la spécification permettra aussi d’utiliser rgba (avec de la transparence).

IE6 n’est pas mort

Après avoir fait le site web, comme tout bon intégrateur, j’ai fait le tour dans tous les navigateurs majeurs (IE6/7/8, Chrome, Firefox, Safari, Opera) afin d’y arranger les petits problèmes. Comme à l’habitude, IE6 est toujours un peu plus tannant, alors dans la même perspective qui m’avait poussé à expérimenter avec CSS3, j’ai décidé de rendre le site regardable dans ce navigateur, sans faire pieds et main pour le rendre pixel perfect. À ma grande surprise, lors des premiers jours après la mise en ligne, Google Analytics me disait qu’environ 90% du trafic était fait avec IE6! J’ai donc compris que les TI de la ville de Lévis n’avaient pas encore pris la peine de mettre à jour les navigateurs de certains employés! Par chance, après la vague de curieux à l’interne, la tendance est plutôt redevenue normale (c’est à dire, je n’ai pas revu d’IE6 depuis).

CSS3 va rocker

Dans ce projet, je n’ai utilisé qu’une seule règle de CSS3. Elle ajoute un petit quelque chose au site, sans pour autant avoir un effet dévastateur lorsqu’elle n’est pas rendue par le navigateur.

Il y a plusieurs autres règles qui, en réduisant l’utilisation d’images, vont vraiment accélérer l’intégration web et réduire la taille des pages.

Les navigateurs utilisés sont de plus en plus à jour: IE6 disparait et IE7 disparait encore plus vite maintenant qu’IE8 est sorti! On pourra donc très bientôt utiliser les derniers ajouts au fur et à mesure qu’ils arrivent.

During the upcoming months I’ll try to make a transition, so you can expect me to blog both in English and in French. I’ll see how I can manage publishing in English and make a decision upon that.

Les problèmes des RDBMS

Les bases de données relationnelles ont comme caractéristique principale d’être très structurées. C’est sans doute la raison derrière leur grande popularité. Par contre, ce ne sont pas tous les problèmes qui tombent dans le moule de ce type d’architecture.

Aussi, il devient plutôt difficile, dépassé un certain point, de continuer à scaler horizontalement avec ce type de bases de données. On met la base de donnée sur un autre serveur, ensuite on ajoute des réplications pour avoir des master/slaves, on optimise nos requêtes… ça peut nous mener très loin, mais pas assez loin pour les gros joueurs. Le problème des performances était donc aussi une des motivations pour chercher une autre solution.

The new kids on the block

Alors voilà qu’apparait toutes les nouvelles bases de données et que le sujet se met à bouillonner. Tokyo, CouchDB, MongoDB, HBase (du projet Hadoop), Redis, Cassandra, etc.

Ces projets sont pour la plupart orienté sur la distributivité de la base de donnée. Elles ont été conçues à la base pour scaler horizontalement.

Essai de MongoDB avec PHP

J’ai donc décidé d’essayer un de ces systèmes: MongoDB. Il s’agit d’une base de donnée sans schéma: on y stock les données à peu près comme on veut et chaque entrées peut avoir des champs différents. L’installation est plutôt simple (du moins sous Linux), les fichiers binaires ou le code source sont disponible sur le site web. Lorsque le serveur est installé, il faut installer les drivers pour chaque langage que l’on compte utiliser (PHP, Python, Ruby, Java, etc. C++, lui, est inclu). J’ai donc installé le driver pour PHP à partir du code source sur le site web. Seulement ensuite je me suis rendu compte que j’aurais pu me sauver un peu de compilation en faisant simplement sudo pecl install mongo (sous Ubuntu).

Voici un exemple de code tiré à peu près du site de MongoDB pour insérer des données:

$m = new Mongo();
$collection = $m->selectDB( "foo" )->selectCollection( "bar" );

$doc = array( "name" => "MongoDB",
   "type" => "database",
   "count" => 1,
   "info" => (object)array( "x" => 203,
       "y" => 102),
   "versions" => array("0.9.7", "0.9.8", "0.9.9")
);

$collection->insert( $doc );

On les récupère ensuite:

$m = new Mongo();
$collection = $m->selectDB( "foo" )->selectCollection( "bar" );

$obj = $collection->findOne();

Ou on peut faire une requête pour plusieurs résultats:

$m = new Mongo();
$collection = $m->selectDB( "foo" )->selectCollection( "bar" );

$cursor = $collection->find( array('name' => 'MongoDB') );

while( $cursor->hasNext() ) {
    var_dump( $cursor->getNext() );
}

Simple, trop simple?

Avec les bases de données relationnelles, le simple apprentissage du SQL permettait de bien comprendre le paradigme des RDBMS et de bien s’en servir. Maintenant, avec les nouvelles bases de données qui apparaissent, nous avons beaucoup plus de flexibilité: on y met à peu près ce qu’on veut. Le prochain objet qu’on y insère n’a pas besoin de ressembler au précédent. Cette flexibilité est bienvenue et très puissante (par exemple, on peut faire rouler plusieurs version de la même application en même temps, selon le client, avec la même base de donnée, comme Google le fait avec Gmail).

Cette flexibilité et simplicité vient par contre au prix d’être complètement laissés à nous-même. Les RDBMS sont vieilles et son fonctionnement bien connu de tous. Des tonnes de livres ont été écrites sur MySQL, SQLite, SQL Server et l’architecture avec les RDBMS. Les fonctionnalités des nouvelles bases de données sont généralement bien documentées. C’est très simple (beaucoup plus simple qu’avec du SQL) d’y insérer et récupérer des entrées. Par contre, la façon de penser l’architecture d’applications qui utilisent ces bases de données est plutôt nébuleuse. Je n’ai pas encore vu de livre qui traitent de l’utilisation de ces systèmes et les blogs qui en glissent un mot parlent plutôt de l’architecture matérielle utilisée, des raisons qui ont poussés la migration et des raisons de leur choix particulier parmi les nouvelles bases de données.

On va continuer d’en entendre parler

Ceci dit, tout ce que j’ai lu à date sur le sujet est très positif. Est-ce révolutionnaire ou bien avait-on simplement besoin d’air frais? Une chose est sûr c’est que les bases de données « non-relationnelles » sont là pour rester. Par contre, elles n’écraseront pas les RDBMS pour toutes les situations de si tôt: elles ne sont pas (et ne tentent pas d’être) ACID. On continuera donc sans doute à utiliser les RDBMS pour les utilisations comme les transactions financières, où l’intégrité des données et l’utilisation de transactions (dans le sens SQL du terme) sont importantes.

Encore faut-il que nos universités abordent le sujet. Parions qu’ils n’en parleront pas avant un bon 10 ans!

Si vous connaissez une source (livre, blog, wiki, etc.) où on peut en apprendre sur la conception d’application et d’architecture avec ces nouvelles bases de données, laissez-moi savoir!

Du code non-réutilisable

J’espère ne rendre personne triste en publiant cet article, mais je vais vous faire un petit copier-coller d’une fonction pour illustrer mes points.

<?php
// _______________________________________________________________________
// Display news list
function fct_display_news_list(){
    // Search
    if(isset($_GET['search']) && !empty($_GET['search'])){
        $query = " WHERE title LIKE CONVERT(_utf8 '%".$_GET['search']."%' USING latin1) OR content LIKE CONVERT(_utf8 '%".$_GET['search']."%' USING latin1)";
    }else{
        if(isset($_GET['date']) && ereg("^[0-9]{4}\-[0-9]{2}$", $_GET['date'])){
            $arr = explode("-", $_GET['date']);
            $date_start = mktime(0, 0, 0, $arr[1], 1, $arr[0]);
            $date_end = mktime(0, 0, 0, $arr[1] + 1, 1, $arr[0]);
            $query = " WHERE date_news>=".$date_start." AND date_news<".$date_end;
        }
    }
    if(!isset($query)){
        $query = " ORDER BY date_news DESC LIMIT 3";
    }else{
        $query .= " ORDER BY date_news DESC";
    }

    $query = "SELECT * FROM juris_news".$query;
    $result = mysql_query($query) or die(mysql_error());
    if(mysql_num_rows($result) > 0){
        for($i = 1; $row = mysql_fetch_array($result); $i++){
?>
    <h3 first"); } ?>"><?= $row['title']; ?></h3>
    <p><?= date("Y-m-d", $row['date_news']); ?></p>
    <p><?= $row['intro']; ?></p>
    <p><a href="actualites.php?id=<?= $row['id']; ?>" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('news<?= $i; ?>','','medias/img_c_btn_savoir_rl.gif',0)"><img src="medias/img_c_btn_savoir_up.gif" alt="En savoir plus" name="news<?= $i; ?>" id="news<?= $i; ?>" /></a></p>
<?php
        }
    }else{
        echo("<p>Aucune actualit&eacute; trouv&eacute;e.</p>");
    }
}

Il s’agit ici de la première fonction d’une dizaine de fonctions similaires qui constituent le fichier.

Premier péché: mélanger la logique avec la présentation

La principale force de PHP est aussi sa principale faiblesse: il est très facile de mélanger du PHP avec du HTML. On peut avoir une page entière en HTML et y insérer très facilement un peu de PHP. On peut par contre aussi avoir du PHP et y insérer du HTML. Le problème avec cette fonction, c’est qu’elle génère (et affiche) du HTML.

On peut voir très facilement que le code HTML affiché n’est pas réutilisable. Il y a des appels à des fonctions JavaScript et des images dont le chemin d’accès est hard coded. Par exemple, la fonction affiche:

// mauvais
<p><a href="actualites.php?id=<?= $row['id']; ?>" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('news<?= $i; ?>','','medias/img_c_btn_savoir_rl.gif',0)"><img src="medias/img_c_btn_savoir_up.gif" alt="En savoir plus" name="news<?= $i; ?>" id="news<?= $i; ?>" /></a></p>

Il est fort peu probablement que j’aie à utiliser les mêmes fonctions JavaScript et que j’utilise les mêmes images. Aussi, le markup HTML généré ne conviendra générallement pas aux besoins d’un autre site. Par exemple, je doute que <h3 class="blue"> puissent être réutilisé.

La meilleur façon aurait été de simplement arrêter la fonction à la fin de la requête SQL. La fonction aurait simplement pu retourner un array, un objet ou un itérateur. De cette manière, on sépare la logique de la présentation. Par exemple, si la fonction retournait un array $nouvelles, on pourrait l’intégrer dans la page directement.

<!-- Mieux -->
<!-- Markup de ce qui vient avant dans la page ici... -->
<div id="nouvelles">
    <h2>Nouvelles</h2>
    <?php if (!empty($nouvelles)) : ?>
    <?php foreach ($nouvelles as $nouvelle) : ?>
    <p class="date"><?= date("Y-m-d", $nouvelle['date_news']) ?></p>
    <p><?= $nouvelle['intro'] ?></p>
    <p><a href="actualites.php?id=<?= $nouvelle['id']; ?>" class="more">En savoir plus</a></p>
    <?php endforeach ?>
    <?php else : ?>
    <p>Aucune nouvelle</p>
    <?php endif ?>
</div>
<!-- Suite du site ici... -->
<div id="sidebar">

Deuxième péché: La fonction n’accepte aucun paramètre

De la façon dont la fonction est codée, on n’a aucun moyen externe (lire: aucun paramètre) d’affecter son déroulement. Si $_GET['search'] contient quelque chose, une recherche sera faite, sinon, les trois dernières nouvelles sont affichées.

Il serait bien de pouvoir appeler la fonction en lui demandant un certain nombre de nouvelles. Je ne veux pas avoir toujours les trois dernières nouvelles dans tous les sites que je dois faire.

Aussi, si je veux faire une recherche, je ne veux pas nécessairement utiliser $_GET['search'] comme chaine à chercher.

Le prototype de cette fonction aurait plutôt dû ressembler à ceci:

function fct_display_news_list($quantity = 3, $search = NULL)

De cette manière, on aurait pu avoir des comportements par défaut si on ne passe aucun argument tout en ayant un certain contrôle en cas de besoin. Si je voulais à ce moment utiliser la fonction en utilisant la valeur de $_GET['search'] comme clé de recherche, j’aurais pu l’appeler ainsi:

fct_display_news(3, $_GET['search'])

Troisième péché: la fonction fait trop de choses

La fonction « raboute » des morceaux de requêtes SQL en créant la fin de la requête ("WHERE ...") en premier. Je trouve étrange d’avoir commencé par la fin sans raison apparente. Ça ne fait que complexifier le code.

En plus, pourquoi ne pas avoir simplement séparé la fonction en deux fonctions? Chaque fonction aurait été beaucoup plus claire et facile à maintenir. Exemple:

// mieux
function get_news($quantity = 3, $search = NULL){
    if ($search == NULL)
        return get_latest_news($quantity);
    else // $search != NULL
        return get_searched_news($quantity, $search);
}

function get_lastest_news($quantity = 3){
    // fonction qui retourne les $quantity dernières nouvelles
    // ...
}

function get_searched_news($quantity = 3, $search = NULL){
    // fonction qui retourne les $quantity dernières nouvelles trouvées selon la clé de recherche
    // ...
}

Si on regarde la liste des fonctions du fichier, on se rend vite compte qu’une approche orienté objet aurait très bien fait la job. Une classe News aurait grandement simplifié le tout.

Quatrième péché: des noms qui ne veulent rien dire

Si on retourne dans le code au début de l’article, on peut voir qu’il y a plusieurs noms encombrés d’abréviations superflues ou qui ne veulent rien dire aux yeux de la prochaine personne qui touche le code.

Est-ce que j’ai vraiment besoin de spécifier dans le nom d’une fonction qu’il s’agit d’une fonction en y préfixant fct? Aussi, un fichier nommé img_c_btn_savoir_up.gif: un fichier gif est une image, pas besoin de préfixer img à son nom. Dans le même nom de fichier, que veut dire le « c« ?

Une fonction devrait avoir un nom qui permet de savoir ce qu’elle fait tout en étant concis. display_news_list aurait été suffisant.

Cinquième péché: être vulnérable aux injections SQL

Étant donné que la fonction n’accepte aucun paramètre, le programmeur a utilisé la valeur de $_GET['search'] directement dans sa fonction. Le problème que je veux souligner ici c’est la manière dont il l’a utilisée. Il l’a mis directement dans une requête sans la filtrer:

// mauvais
$query = " WHERE title LIKE CONVERT(_utf8 '%".$_GET['search']."%' USING latin1) OR content LIKE CONVERT(_utf8 '%".$_GET['search']."%' USING latin1)";

En insérant directement des valeurs fournies par l’utilisateur (ici, dans la barre d’adresse) sans les avoir filtrés au préalable est une mauvaise pratique car elle ouvre très grand les portes aux attaques par injection SQL.

En conclusion

Quand on programme, c’est important de toujours penser à la réutilisabilité du code. Il faut bien sûr parfois faire du code « quick and dirty« , mais les choses importantes que je viens d’énumérer ne sont pas compliqués à respecter. D’ailleurs, le programmeur aurait en fait sauvé du temps s’il avait fait du code réutilisable, car il a eu à reprogrammer un autre ensemble complet de fonctions pour le côté administrateur. S’il avait dès le départ fait une nouvelle classe ou simplement mieux conçu ses fonctions, il aurait facilement pu sauver beaucoup de temps en réutilisant lui-même son propre code à l’intérieur du même projet.

Malgré le hype qu’il y avait pour Git, Google a tout de même choisi Mercurial, que je ne connaissais pas vraiment. J’ai donc décidé de l’essayer.

Distribué vs centralisé

Tout d’abord, Mercurial est comme Git, dans le sens où il s’agit d’un système de contrôle de version distribué. Subversion, lui, est centralisé.

Concrètement, Subversion a son repository à un endroit (générallement sur un serveur). Chaque utilisateur va chercher les fichiers (checkout), fait ses modifications et les renvoit au serveur (commit).

Mercurial, étant distribué, fonctionne de façon légèrement différente. Lorsqu’un utilisateur va chercher les fichiers, il va en fait faire une copie entière du repository. Le scénario classique est qu’un utilisateur va chercher les fichiers sur le serveur (clone), fait ses modifications et les « commet » (commit) seulement dans son repository local. Ensuite, il peut envoyer ses changement dans le repository d’où il a pris ses fichiers (push).

Avec Mercurial, on ne fait pas un checkout et un commit. On fait une branche (clone), et on la merge (push) après avoir fait un ou des changements (commit). Ça comporte plusieurs avantages pour certains types de projets, mais je n’en parlerai pas dans cet article.

Dossier .hg vs dossiers .svn

Subversion utilise plusieurs dossiers .svn. Lorsque vous travaillez dans votre checkout, il y a un dossier .svn par dossier ou sous-dossier de votre projet. Ils ne sont (supposément) pas très nuisibles.

Par contre, j’ai souvent fait face à un problème avec ces dossiers. Un client me dit qu’il veut avoir les fichiers pour montrer à son propre client. Il veut les avoir par FTP. La méthode idéale serait simplement de lui envoyer mon dossier de travail. Par contre, mon dossier de travail est infesté de .svn! Non seulement ces fichiers n’ont pas d’affaires là, mais imaginez le temps que ça prendrait mettre tout ces petits dossier en ligne! Croyez-moi, c’est trop long.

Je pourrais supprimer les dossiers .svn de tout mon projet avec un tour de passe-passe bash:

find ./ -name ".svn" | xargs rm -Rf

Mais faire ça « détruirait » mon checkout. J’aurais besoin de faire un autre checkout avant de continuer à travailler. Je pourrais faire une copie de mon dossier et faire cette commande sur ma copie. Mais copier tous ces sous-dossiers prend parfois bien du temps!

Je pourrais aussi (la solution que j’utilisais) faire un export à partir de mon repository. Il y a quelques points tannants avec cette méthode. Premièrement, Subversion est plutôt lent pour faire un export ou un checkout. Surtout que certains projets deviennent pesant assez rapidement avec les fichiers Flash et toutes les images (les PNG 24-bits ça monte vite!). Deuxièmement, lorsque le client me demande d’avoir les fichiers, j’ai parfois fait certaines modifications que je n’ai pas encore envoyées dans le repository. Je dois donc en premier faire un commit et ensuite je peux faire le export. Troisième chose, lorsque j’ai terminé d’envoyer les fichiers à mon client, je dois supprimer le dossier que je viens de créer. Pas grand chose vous direz, mais c’est quand même une étape de plus, qui n’a pas sa place à mon avis.

Mercurial, lui, ne parsème pas ses dossiers un peu partout au travers du répertoire de travail. Il n’y a qu’un dossier .hg à la racine du repository (rappelez-vous que le dossier de travail est un repository en soit). Donc, tous les problèmes énoncés ci-haut disparaissent. Je peux directement envoyer mon répertoire de travail, en prenant la peine de désélectionner le dossier .hg (et les autres fichiers, s’il y a lieu, comme .hgignore).

Commit local

Avec Subversion, lorsqu’on fait un commit, on envoie les modifications au serveur, car c’est lui qui contient le repository. Avec Mercurial, lorsqu’on fait un commit, il n’y a aucune utilisation du réseau. Le repository est local. On peut donc faire plusieurs commit sans envoyer les modifications au repository où on a pris les fichiers. Lorsqu’on est prêt, on push les commit qu’on a fait.

Vitesse

Je ne peux pas garantir que Mercurial est plus rapide que Subversion, mais je dois avouer que je trouve l’expérience beaucoup plus fluide avec Mercurial qu’avec Subversion.

Facilité

J’avais jeté un oeil rapidement à Git il y a quelque temps, mais je ne m’y était pas attardé. La première impression que j’avais eu était que ça semblait compliqué. Comme les projets sur lesquels je travaille ne profitent pas vraiment du fait que ce soit extrêmement facile de brancher-merger avec les systèmes distribués, j’avais simplement laissé Git de côté. Je n’étais peut-être pas dû pour changer de système à ce moment…

Par contre, lorsque j’ai essayé (et maintenant adopté) Mercurial, j’ai eu une toute autre impression! Il est facile à comprendre et, à mon avis, bien conçu. La courbe d’apprentissage est très légère.

Ajout de fichiers

Avec Subversion, il faut ajouter les fichiers un par un. Encore une fois, ce serait sûrement possible de faire un tour de passe-passe avec grep, mais ça serait plutôt tannant. Si on crée 8 nouveau fichiers, il faut ajouter les 8 fichiers un après l’autre.

Avec Mercurial, la même commande (add) ajoute tous les nouveaux fichiers. Pas de perte de temps. Si on veut ne pas ajouter certains fichiers (exemple: ceux se terminant avec ~), il suffit de se faire un fichier .hgignore dans la racine de notre projet, et le tour est joué.

Hébergement

Premièrement, de la façon dont est conçu Mercurial, il est beaucoup plus facile de ne simplement pas utiliser d’hébergeur. On se fait un repository avec hg init mon_projet et on peut déjà commencer à travailler dans le dossier! Pas besoin de faire un checkout et de travailler dans le dossier du checkout.

Ensuite, comme Subversion, on peut simplement fonctionner par SSH (si vous avez accès à un autre ordinateur/serveur par SSH). hg push ssh://user@example.com/chemin/vers/repo. C’est simple et rapide.

Vous pouvez aussi configurer Mercurial pour fonctionner par HTTP si votre projet a un peu d’envergure. Par contre, ce n’est probablement pas la solution idéale si vous faites parti d’une petite compagnie qui travaille sur plusieurs petits projets.

Sinon, il y a un certain nombre d’hébergeur. Le plus gros est probablement bitbucket. Ils offrent l’hébergement gratuit pour les projets open source, mais aussi de l’hébergement privé. Ils sont un peu le GitHub de Mercurial.

Essayez-le!

Tout ça pour vous dire que ça vaut la peine de l’essayer! Si vous avez peur du command-line, je crois qu’il y a même des GUI plutôt bien faits pour Windows, OS X et Linux.

Aujourd’hui je continue là où je vous avais laissé, c’est-à-dire: vous venez d’installer Apache, MySQL, PHP et phpMyAdmin et avez vérifié que le tout fonctionnait bien. Votre dossier web est /var/www. Le but de l’article d’aujourd’hui est de vous permettre d’utiliser un autre dossier. En fait, vous pourrez utiliser un dossier différent pour chaque projet et y accéder avec des noms de domaines différents. Je vous introduis donc aux serveurs virtuels.

Serveurs virtuels

Un serveur virtuel, c’est quoi? C’est ce qui permet à Apache de servir plusieurs domaines ou sous-domaines à partir du même serveur. Par exemple, Apache peut servir www.example.com et blog.example.com en même temps. Chacun ayant son propre serveur virtuel.

Le dossier d’Apache

Tout d’abord, dans le dossier de configuration d’Apache, /etc/apache2, il y a, entre autres, les dossiers sites-available et sites-enabled.

Le dossier sites-available contient tous les fichiers de configurations de vos sites web. Pour l’instant, il n’en contient qu’un seul: default, qui dirige vers le dossier /var/www. Nous partirons de ce default pour se créer d’autres serveurs virtuels.

Le dossier sites-enabled contient des symlinks vers les fichiers de configurations contenus dans sites-available. Ces symlinks existent uniquement lorsque ces sites sont actifs. Lorsqu’Apache s’initialise, il vérifie les fichier dans sites-enabled.

Pour activer ou désactiver un site, on utilise les commandes a2ensite et a2dissite.

Créer un serveur virtuel

On commence par aller dans le dossier où les fichiers de configuration se situent:

cd /etc/apache2/sites-available

Ensuite, on se fait une copie du fichier default pour notre premier projet:

sudo cp default projetun

Et on modifie le nouveau fichier:

sudo gedit projetun

Première chose à modifier, c’est le DocumentRoot, c’est à dire, le dossier racine à partir duquel Apache va servir les pages pour ce site web. J’utilise générallement un dossier dans mon home. Quelque chose comme /home/hooba/web/projetun/htdocs. Remplacez donc /var/www par le dossier de votre choix pour ce projet. Remplacez aussi le nom du dossier dans la configuration du dossier en tant que tel quelque lignes plus bas (<Directory /var/www/>).

Ensuite, on veut ajouter le nom de domaine du serveur virtuel. Par défaut, Apache utilisait localhost. Après l’ouverture du tag VirtualHost, ajoutez le nom du serveur que vous voulez utiliser avec ServerName. Par exemple: ServerName projetun.dev.

Le haut de votre fichier devrait donc ressembler à:

<VirtualHost *:80>
	ServerAdmin webmaster@localhost
	ServerName projetun.dev
	DocumentRoot /home/hooba/web/projetun/htdocs
	<Directory />
		Options FollowSymLinks
		AllowOverride None
	</Directory>
	<Directory /home/hooba/web/projetun/htdocs>
		Options Indexes FollowSymLinks MultiViews
		AllowOverride None
		Order allow,deny
		allow from all
	</Directory>
	# ...

Vous pouvez donc sauvegarder le fichier et fermer gedit.

Activer le serveur virtuel

Vous avez maintenant un fichier de configuration prêt à être utilisé dans sites-available. Il faut maintenant laisser savoir Apache qu’il a un nouveau site à servir.

Pour commencer, aller créer un fichier index.html dans le dossier que vous avez spécifié à l’étape précédente. Un fichier très simple suffira. Par exemple:

<html><body>
<h1>Tadam!</h1>
</body></html>

Si vous allez à http://projetun.dev/, vous devriez avoir une erreur du genre « Serveur introuvable ». C’est, en premier lieu, parce qu’Apache n’est pas au courant qu’il doit servir quelque chose à partir de cette URL. On va donc l’avertir qu’il y a un nouveau site:

sudo a2ensite projetun

Cette commande crée le symlink nécessaire dans le dossier sites-enabled. Si vous n’utilisez pas le site default, vous pouvez égallement en profiter pour le désactiver avec:

sudo a2dissite default

Lorsque vous avez fait les modifications nécessaires, vous pouvez dire au daemon Apache qu’il doit recharger sa configuration:

sudo /etc/init.d/apache2 reload

Hosts

Si vous allez à l’adresse http://projetun.dev/, vous aurez la même erreur que tout à l’heure. La raison, c’est que votre navigateur demande à des serveurs DNS « à quelle adresse IP dois-je faire ma requête pour le domaine projetun.dev? ». Comme ces serveurs ne sont pas au courant que vous venez de créer un serveur virtuel, il faut empêcher la demande d’avoir lieu et spécifier immédiatement à quel ordinateur (à quelle adresse IP) on doit faire la requête.

Heureusement, c’est plutôt simple. Il suffit d’ajouter une ligne dans le fichier hosts. Il se situe dans le dossier /etc.

sudo gedit /etc/hosts

Ajoutez simplement une ligne à la fin qui indique votre adresse IP, ainsi que le domaine que vous venez de créer. L’adresse 127.0.0.1 correspond toujours à l’ordinateur sur lequel s’exécute le code. La ligne ajouté ressemblera donc à:

127.0.0.1	projetun.dev

Sauvegardez le fichier et quittez gedit.

Un serveur virtuel fonctionnel

Si vous avez bien suivi les étapes, lorsque vous allez à l’adresse http://projetun.dev/ vous devriez voir le contenu du fichier index.html que vous avez créé tout à l’heure. Vous pouvez donc répéter l’opération pour chacun de vos projets.

Si ça ne fonctionne pas, voici quelques pistes afin de trouver votre problème: avez vous réinitialiser Apache (sudo /etc/init.d/apache2 reload)? Vous pouvez peut-être essayer de le redémarrer au complet avec sudo /etc/init.d/apache2 restart. Est-ce qu’Apache a les droits nécessaires pour accéder au dossier que vous avez spécifié? Est-ce que le fichier projetun existe bel et bien dans /etc/apache2/sites-enabled? Sinon, il faudrait simplement activer le site avec sudo a2ensite projetun. Si le fichier n’apparrait pas (ce n’est pas supposé), vous pourriez toujours essayer de directement faire un symlink vers le fichier dans sites-available.

Malgré mon handicap technologique, j’ai tout de même dû continuer à travailler. Je vous partage un peu de sagesse acquise spécialement pour l’occasion.

Internet sur mon cellulaire, bien plus que du divertissement

Premièrement, je dois avouer que j’étais très content d’avoir un accès internet sur mon téléphone cellulaire pour garder contact par courriel avec mes clients. J’ai pu échanger mes courriels presque comme à l’habitude, et j’ai même utilisé un petit logiciel FTP pour mettre en ligne un travail en cours pour montrer les progrès à un client.

Par contre, je dois avouer que j’étais un peu frustré de ne pas encore être à l’ère où il n’y a pas de frais supplémentaires lorsqu’on utilise l’accès internet de son cellulaire à partir de son ordinateur.

La documentation hors-ligne, une bénédiction

Deuxièment, j’avais récement, un peu par hazard, mis à jour ma documentation hors-ligne. PHP, Kohana, MySQL. Je ne les utilise jamais d’habitude et je les avais mis à jour simplement dans le but de les avoir si jamais j’étais en déplacement à un endroit où il n’y a pas d’accès à internet. Ne pas avoir eu ça, je dois avouer que j’aurais perdu beaucoup de temps!

Le 56K, pas aussi bon que dans l’temps!

Troisièmement, mon ami Martin m’a gracieusement fournis son 10h d’accès téléphonique 56K qu’il a en prime avec son accès par cable. Ça m’a permis de me rendre compte que le web d’aujourd’hui n’est plus du tout fait pour les accès aussi lents. Les quelques fois où je me suis connecté, j’ai eu droit à plusieurs timeouts à cause des pages trop pesantes. Je me souviens de l’époque où j’ouvrais 4-5 pages et que j’allais me chercher un verre de jus en attendant que ça télécharge. Aujourd’hui, avec le même accès, même en ouvrant une seule page, elle ne se charge pas au complet parce qu’elle est trop volumineuse. Moi qui aime bien télécharger les podcasts de Maxime Robin, à 100Mo l’émission, j’ai passé mon tour!

Aussi, j’ai un modem 56K uniquement sur mon portable. C’est un WinModem; c’est à dire, il ne fonctionne que sous Windows. Je développe sous Ubuntu. Tout pour m’aider!

Subversion, hébergé sur le web

J’utilise générallement Subversion pour le contrôle de version. J’héberge mes repositories sur le web, question d’y avoir accès de partout. Comme je n’avais plus accès à internet avec mon ordinateur de développement, je n’avais plus accès à mes repos. Devrais-je les garder local? Avec Git, le problème ne se poserait peut-être même plus, étant donné que j’aurais pu faire mes commits et les garder en local en attendant de faire les commits sur le web plus tard.

La conclusion

On tient pour acquis notre accès à internet. Mais au lieu de proposer qu’on en devienne moins dépendant, je pousse plutôt dans l’autre sens: internet devrait être beaucoup plus accessible, à partir de n’importe où. Ce genre de situation aurait été beaucoup moins problématique si j’avais pu temporairement utiliser mon cellulaire comme modem. Bonne nouvelle, les tarifs sont à la baisse, et la tendance va probablement s’accentuer.

I’m 01100110 01100101 01100101 01101100 01101001 01101110 01100111 00100000 01101100 01110101 01100011 01101011 01111001 00001010

Tout ce code binaire est en fait le code ASCII pour « FEELING LUCKY ». I’m feeling lucky… vous avez déjà fait une recherche en cliquant sur ce bouton vous?

Mon blog est pourtant optimisé pour les moteurs de recherche. J’utilise des balises h1 et h2 pour mes titres et je mets toujours des balises alt et title à mes images.

Vérifier ce qui est indexé

Tout d’abord, pour ceux qui ne sauraient pas comment vérifier le contenu de votre site qui est indexé dans Google, il suffit de faire une recherche avec le nom de domaine de votre site, précédé par site:.

site:www.antoineleclair.ca

En décembre dernier, alors que je n’avais plus aucune image d’indexée dans Google Images, j’ai décidé de faire une petite recherche sur le sujet. Il ne semble pas y avoir beaucoup de personnes dans ma situation; qui utilisent WordPress pour publier des images et qui vérifient dans Google Images ce qui est indexé. Mais j’ai fini par trouver quelqu’un qui avait fait face au même problème et qui l’avait surmonté par hasard.

La solution

Cette personne (désolé, je n’ai pas la référence) a installé un plugin qui sert à mettre en cache votre site WordPress. Dans son article, elle parlait du plugin wp-cache. Après avoir installé ce plugin, les images avaient recommencées à être indexées.

Ce plugin n’a plus l’air en développement, mais j’ai tout de même décidé de l’essayer. Et voilà, 1-2 mois plus tard, mes images se font indexer et mon trafic a quintuplé.

Si jamais le plugin devenait incompatible avec les futures version de WordPress, je suis aussi tombé sur WP Super Cache, qui lui, semble être maintenu. Je n’ai par contre aucune idée si le résultat sera le même par rapport à l’indexation des images.

Pour l’instant, problème réglé! Et j’ai même un gain théorie en performances.

On l’utilise générallement de cette manière:

flash[:notice] = "Connexion réussie"
redirect_to home_path

flash[:notice] est donc disponible dans le prochain controller et view. Dans le cas où nous ne redirigeons pas, nous voulons générallement que flash soit disponible immédiatement, dans le controller et view actuel. Il suffit d’utiliser la méthode now.

flash.now[:notice] = "Connexion réussie"

Autres méthodes de flash

Le hash flash contient aussi les méthodes discard et keep, pour éliminer ou conserver flash. L’utilisation est assez simple, alors je vous laisse lire la page de documentation.