Options de configuration

• display_duration : Durée d’affichage de l’image,
• fadeout_duration : Durée de l’effet de disparition du premier-plan,
• fadein_duration : Durée de l’effet de réapparition en arrière-plan.

Mise en oeuvre

HTML

Une liste d’images, rien de plus simple :

<ul id="photos">
  <li id="photo-01"><img src="images/photo-01.png" /></li>
  <li id="photo-02"><img src="images/photo-02.png" /></li>
  <li id="photo-03"><img src="images/photo-03.png" /></li>
</ul>

Javascript

Pas de surprise de ce côté là non plus :

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="./stacked-gallery.js"></script>
<script type="text/javascript">
  $(document).ready(function() {
    $('#photos').stackedGallery({ display_duration: 4000, fadeout_duration: 1000, fadein_duration: 200 });
  });
</script>

CSS

On utilise les propriétés CSS3 box-shadow et transform pour obtenir l’effet désiré :

body {
  padding: 0;
  margin: 0;
  background: #ddd;
}
 
ul#photos {
  position: relative;
  width: 300px;
  height: 300px;
  margin: 65px 65px auto;
  padding: 0;
  list-style-type: none;
}
 
ul#photos li {
  position: absolute;
  width: 286px;
  height: 286px;
  border: 7px solid #fff9f9;
  box-shadow: 0 0 5px #aaa;
  -moz-box-shadow: 0 0 5px #aaa;
  -webkit-box-shadow: 0 0 5px #aaa;
}
 
#photo-01 {
  top: -3px;
  left: 8px;
  -o-transform: rotate(5.0deg);
  -moz-transform: rotate(5.0deg);
  -webkit-transform: rotate(5.0deg);
}
#photo-02 {
  -o-transform: rotate(-1.2deg);
  -moz-transform: rotate(-1.2deg);
  -webkit-transform: rotate(-1.2deg);
}
#photo-03 {
  left: 4px;
  -o-transform: rotate(2.2deg);
  -moz-transform: rotate(2.2deg);
  -webkit-transform: rotate(2.2deg);
}

Comme Internet Explorer ne prend pas en charge les propriétés box-shadow et transform, on va mettre en place une dégradation élégante :

ul#photos {
  width: 322px;
  height: 322px;
  background: url('images/bg-ie.png') 0 0 no-repeat;
}
 
ul#photos li {
  top: 11px;
  left: 11px;
}

J’ai également tenté d’obtenir l’effet désiré sous Internet Explorer via des PNG avec transparence alpha. Mais dès que l’on touche à l’opacité de l’image, la couche alpha pose problème, et ce n’est à priori solvable par aucun hack.

C’est une technique que j’avais déjà expérimentée sous Windows. Lorsque l’on travaille avec un framework web tel que Symfony (Lien externe), la ligne de commande est omniprésente. Et soyons honnête, la ligne de commande sous Windows, c’est pas ça (malgré l’existence d’outils comme Cygwin (Lien externe)).

Virtualiser mon serveur de développement sous Linux m’est apparu comme le meilleur choix : On peut ainsi profiter de son système de prédilection (Mac OS X dans mon cas) pour développer ses projets web tout en disposant de la robustesse d’une architecture LAMP pour les tester. Cela permet aussi de tester son application dans des conditions proches de celles de l’environnement de production, et il est même possible de tester son projet sous différentes configurations en installant, au besoin, plusieurs machines virtuelles.

Dans cet article, nous allons voir comment configurer une machine virtuelle sous Debian (Lien externe) adaptée au développement avec le framework Symfony (Lien externe).

Installation d’une machine virtuelle Debian

Je ne vais pas détailler pas à pas l’installation de la machine virtuelle. J’ai utilisé Parallels Desktop (Lien externe), et la netinstall de Debian Lenny (Lien externe). Lors de l’installation, je choisis l’installation en mode console, et me contente de sélectionner l’option « Système standard », nous installerons les paquets nécessaires par la suite.

N’oubliez pas de décocher « Environnement graphique de bureau », nous n’en avons pas besoin ici. Même si la RAM ne coûte plus très cher, vous me remercierez au moment où il vous faudra démarrer vos VM Windows pour tester vos sites sous Internet Explorer…

Configuration du système

Nous allons commencer par installer sudo pour éviter de se logger en root à l’avenir ainsi qu’un serveur SSH (c’est bien plus pratique d’utiliser le terminal de son système plutôt que de basculer en permanence sur la VM). Connectez-vous en root, et allons-y :

# apt-get install sudo
# visudo

La commande visudo permet d’éditer le fichier /etc/sudoers, qui contient les utilisateurs autorisés à utiliser la commande sudo. Il suffit d’ajouter l’utilisateur voulu (dans mon cas jl), comme ceci :

jl	ALL=(ALL) ALL

On installe maintenant le paquet openssh-server :

# apt-get install openssh-server

Avant d’utiliser SSH pour se connecter au serveur, on va attribuer une adresse IP fixe à l’interface réseau de notre machine virtuelle. Pour connaître le sous-réseau utilisé par votre machine virtuelle, et l’adresse IP de la passerelle par défaut, utilisez les commandes suivantes :

# ifconfig eth0
eth0      Link encap:Ethernet  HWaddr 00:1c:42:f4:80:28
          inet adr:10.211.55.7  Bcast:10.211.55.255  Masque:255.255.255.0
          adr inet6: fe80::21c:42ff:fef4:8028/64 Scope:Lien
          UP BROADCAST RUNNING MULTICAST  MTU:1500  Metric:1
          RX packets:4515 errors:0 dropped:0 overruns:0 frame:0
          TX packets:2971 errors:0 dropped:0 overruns:0 carrier:0
          collisions:0 lg file transmission:1000
          RX bytes:6337760 (6.0 MiB)  TX bytes:224514 (219.2 KiB)
          Interruption:10 Adresse de base:0x8200 
 
# netstat -rn
vmdev:~# netstat -rn
Table de routage IP du noyau
Destination     Passerelle      Genmask         Indic   MSS Fenêtre irtt Iface
10.211.55.0     0.0.0.0         255.255.255.0   U         0 0          0 eth0
0.0.0.0         10.211.55.1     0.0.0.0         UG        0 0          0 eth0

Editez le fichier /etc/network/interfaces à l’aide de vim (par exemple), et configurer eth0 comme ceci (en prenant soin de modifier les adresses et masques) :

 allow-hotplug eth0
 iface eth0 inet static
         address 10.211.55.7
         netmask 255.255.255.0
         network 10.211.55.0
         broadcast 10.211.55.255
         gateway 10.211.55.1

Pour prévenir tout problème, l’idéal serait de réduire la plage d’adresses IP du serveur DHCP aux adresses qui n’ont pas été attribuée de façon statique.

Configuration du fichier hosts de votre système principal

Pour accéder plus facilement à votre machine virtuelle, nous allons éditer le fichier hosts de votre système principal. Sous Mac OS X et autres systèmes Unix, éditez /etc/hosts, sous Windows éditez C:\windows\system32\drivers\etc\hosts et ajoutez-y la ligne suivante :

10.211.55.7      vmdev

Vous pouvez maintenant vous connecter à votre machine en SSH :

$ ssh jl@vmdev

Installation d’Apache, MySQL et PHP

On va commencer par ajouter les dépôts dotdeb.org (Lien externe). Ces dépôts permettent d’installer des versions plus récentes de PHP et de MySQL que celle proposées par défaut dans les dépôts officiels. Il suffit d’ajouter les deux lignes suivantes dans /etc/apt/sources.list :

deb http://packages.dotdeb.org stable all
deb-src http://packages.dotdeb.org stable all

Puis de mettre à jour la liste des paquets :

$ sudo apt-get update

On va maintenant installer MySQL, Apache, PHP5 ainsi que quelques modules pour PHP5 (vous pourrez en ajouter d’autres par la suite) :

sudo apt-get install mysql-server-5.1
sudo apt-get install apache2
sudo apt-get install php5 php5-cli php5-mysql php5-gd php5-xsl php5-apc php5-mcrypt

En ce qui concerne MySQL, à vous de créer les utilisateurs (Lien externe) dont vous avez besoin.

On va maintenant ajouter l’utilisateur jl au groupe www-data :

$ sudo usermod -g www-data jl

On modifie aussi le masque de création de fichiers pour notre utilisateur. Ainsi, on va donner au groupe www-data les droits de lecture, d’écriture et d’exécution. Dans le fichier ~/.profile, il suffit d’ajouter la ligne suivante :

umask 002

De cette façon, Apache et donc PHP auront accès en lecture et en écriture à notre homedir. Cela ne pose pas de problème dans notre contexte (un serveur de développement personnel).

Installation et configuration de Samba

Vous aurez sûrement besoin d’accéder aux données de votre serveur. Nous allons installer Samba (Lien externe), mais vous auriez très bien pu opter pour NFS (Lien externe) si votre système principal le supporte (pour ma part, je n’ai jamais testé NFS avec des systèmes tels que Mac OS X ou Windows). Samba a l’avantage de permettre le partage de documents entre la plupart des systèmes d’exploitation.

Nous allons installer Samba, et créer le mot de passe pour l’utilisateur jl (qui doit être un compte système valide) :

$ sudo apt-get install samba
$ sudo smbpasswd -a jl

Configurons la section [homes] du fichier de configuration de Samba (/etc/samba/smb.conf) :

[homes]
   comment = Home Directories
   browseable = no
   read only = no
   create mask = 0664
   directory mask = 0775
   valid users = %S
   force group = www-data
   force create mode = 0664
   force security mode = 0664
   force directory mode = 0775
   force directory security mode = 0775

Pour que la nouvelle configuration soit prise en compte, redémarrez Samba :

$ sudo /etc/init.d/samba restart

Vous pouvez à présent vous connecter au home directory de votre machine virtuelle via le protocole SMB, et y copier des fichiers. Pour ma part, voici l’arborescence que je me suis créée :

|-- dev
    |-- frameworks
    |   `-- symfony-1.2.9
    |-- projects
    |   |-- monprojet1
    |   |   `-- web
    |   `-- monprojet2
    |      `  -- web
    `-- utils
        `-- web
            |-- phpmyadmin
            `-- phpinfo.php

Configuration d’Apache et de PHP pour Symfony

Nous avons pratiquement terminé la configuration de notre serveur de développement. Il reste néanmoins à configurer Apache et PHP pour Symfony.

Commençons par PHP. On va simplement désactiver les directives short_open_tag et magic_quotes_gpc dans /etc/php5/apache2/php.ini mais également dans /etc/php5/cli/php.ini.

short_open_tag = Off
magic_quotes_gpc = Off

Il est aussi intéressant d’afficher les notices :

error_reporting = E_ALL

On va maintenant configurer Apache. Pour le moment, les fichiers hébergés par notre serveur web sont situés dans /var/www/. Nous venons de créer une arborescence dans notre homedir pour accueillir nos projets web, il va donc falloir configurer Apache en conséquence. Nous allons utiliser une fonctionnalité intéressante d’Apache : les vhosts dynamiques (mod_vhost_alias (Lien externe)). Créez un nouveau fichier dans /etc/apache2/sites-available/, par exemple vmdev, contenant la configuration suivante :

ServerName vmdev
 
<VirtualHost *:80>
        ServerAlias vmdev utils.vmdev
        VirtualDocumentRoot /home/jl/dev/utils/web/
</VirtualHost>
 
<VirtualHost *:80>
	ServerAlias phpmyadmin.vmdev
	VirtualDocumentRoot /home/jl/dev/utils/web/phpmyadmin/
</VirtualHost>
 
<VirtualHost *:80>
	ServerAdmin webmaster@localhost
	ServerAlias *.vmdev
	VirtualDocumentRoot /home/jl/dev/projects/%1/web
	DirectoryIndex index.php
 
	<Directory /home/jl/dev/projects/>
		Options Indexes FollowSymLinks MultiViews
		AllowOverride All
		Order allow,deny
		Allow from all
	</Directory>
 
	Alias /sf /home/jl/dev/frameworks/symfony-1.2.9/data/web/sf
	<Directory "/home/jl/dev/frameworks/symfony-1.2.9/data/web/sf">
		AllowOverride All
		Allow from All
	</Directory>
 
	ErrorLog /var/log/apache2/error.log
	LogLevel debug
	CustomLog /var/log/apache2/access.log combined
</VirtualHost>

Grâce à cette configuration, nous avons deux vhosts statiques (vmdev, accessible également depuis utils.vmdev, et phpmyadmin.vmdev), et un vhost dynamique. Nous aurons ainsi vhost par projet qui sera créé dynamiquement, par exemple monprojet1.vmdev.

Pour terminer, nous allons activer mod_rewrite et mod_vhost_alias, désactiver la configuration du site par défaut d’Apache, activer la configuration que l’on vient de créer, et redémarrer Apache :

$ sudo a2enmod rewrite
$ sudo a2enmod vhost_alias
$ sudo a2dissite default
$ sudo a2ensite vmdev
$ sudo /etc/init.d/apache2 restart

Installation de Symfony et configuration d’un premier projet

Nous n’avons pas encore installé Symfony mais le moment est venu. On commence par créer le répertoire ~/dev/frameworks/, si ce n’est déjà fait, puis on télécharge et décompresse l’archive de Symfony dans le répertoire nouvellement créé :

$ mkdir -p ~/dev/frameworks && cd ~/dev/frameworks/
$ wget http://www.symfony-project.org/get/symfony-1.2.9.tgz
$ tar -xvzf symfony-1.2.9.tgz
$ rm symfony-1.2.9.tgz

On va maintenant démarrer le projet Jobeet (Lien externe). On commence par créer le répertoire ~/dev/projects/jobeet, puis l’on crée un lien symbolique vers le répertoire où nous avons décompressé Symfony précédemment :

$ mkdir -p ~/dev/projects/jobeet/lib/vendor && cd ~/dev/projects/jobeet/lib/vendor
$ ln -s ~/dev/frameworks/symfony-1.2.9 symfony
$ cd ~/dev/projects/jobeet

On va maintenant vérifier si Symfony est correctement installé, et si notre configuration de PHP est adaptée :

$ php lib/vendor/symfony/data/bin/symfony -V
symfony version 1.2.9 (/home/jl/dev/frameworks/symfony-1.2.9/lib)
$ php lib/vendor/symfony/data/bin/check_configuration.php
********************************
*                              *
*  symfony requirements check  *
*                              *
********************************
 
php.ini used by PHP: /etc/php5/cli/php.ini
 
** WARNING **
*  The PHP CLI can use a different php.ini file
*  than the one used with your web server.
*  If this is the case, please launch this
*  utility from your web server.
** WARNING **
 
** Mandatory requirements **
 
  OK        PHP version is at least 5.2.4
 
** Optional checks **
 
  OK        PDO is installed
  OK        PDO has some drivers installed: mysql
  OK        PHP-XML module is installed
  OK        XSL module is installed
  OK        The token_get_all() function is available
  OK        The mb_strlen() function is available
  OK        The iconv() function is available
  OK        The utf8_decode() is available
  OK        A PHP accelerator is installed
  OK        php.ini has short_open_tag set to off
  OK        php.ini has magic_quotes_gpc set to off
  OK        php.ini has register_globals set to off
  OK        php.ini has session.auto_start set to off
  OK        PHP version is not 5.2.9

Il est judicieux de vérifier également le php.ini utilisé par Apache, comme le précise le warning ci-dessus. Il ne devrait cependant pas y avoir de problème, vu que nous avons fait les modifications nécessaires dans les deux fichiers php.ini.

On va maintenant démarrer le projet Jobeet, ainsi qu’une première application :

$ php lib/vendor/symfony/data/bin/symfony generate:project jobeet
$ ./symfony generate:app --escaping-strategy=on --csrf-secret=UniqueSecret frontend

Lors de la création de chaque nouveau projet, il faut veiller à modifier le fichier hosts de notre système principal en conséquence. J’ai pour ma part deux lignes dans /etc/hosts, une première pour les vhosts statiques, et une deuxième pour chacun de mes projets qui utilise un vhost dynamique :

10.211.55.7     vmdev utils.vmdev phpmyadmin.vmdev
10.211.55.7     jobeet.vmdev monprojet1.vmdev monprojet2.vmdev

Il nous reste un dernier détail à régler. Si vous ouvrez http://jobeet.vmdev/, vous vous trouverez face à une erreur 500. Il faut décommenter la ligne suivante dans le fichier ~/dev/projects/jobeet/web/.htaccess :

RewriteBase /

Pour accéder à l’environnement de développement de Symfony, pensez à ajouter l’adresse IP de l’interface virtuelle de votre système principal dans web/frontend_dev.php. Par défaut, seule l’adresse IP 127.0.0.1 est autorisée à y accéder.

Cette fois, c’est la bonne ! Si vous vous rendez sur http://jobeet.vmdev/, vous devriez avoir l’écran suivant :

Vous disposez désormais d’un serveur LAMP fonctionnel pour vos tests. À vous de l’adapter selon vos besoins : vous pouvez par exemple installer les utilitaires dont vous avez besoins dans ~/dev/utils/web/ (notamment PhpMyAdmin (Lien externe) pour lequel nous avons créé un vhost précédemment mais dont je n’ai détaillé l’installation), installer des modules PHP supplémentaires…

Pour finir, une recommandation : lorsque vous arrêterez votre machine virtuelle, n’oubliez pas de fermer votre éditeur de texte et d’éjecter votre lecteur réseau au préalable.