Voici les CMS et autres projets que je vous laisse découvrir :

• Drupal (Drupal 6.20, Modif. du 2010-12-15),
• Joomla! (1.5.22 Stable Release [03-November-2010),
• Textpattern (Changes in 4.3.0),
• WordPress (Version 3.1),
• Zend Framework (Zend Framework 1.11.2).

Articles sur le même sujet

• Supprimer l'attribut title dans les catégories et les pages WordPress avec jQuery ou PHP
• Installer Drupal (ou les tribulations d'un WordPressien en Drupalie)
• Le petit journal du web : PHP, WordPress, Javascript, CSS, Ruby, Responsive Webdesign
• 35 blogs de développeurs web
• Le petit journal du web — WordPress, développement web, etc.

Ma connaissance de Drupal est proche de zéro : j’ai abordé cet article sous l’angle de celui qui a l’habitude d’utiliser WordPress au quotidien. Il ne s’agit pas d’un comparatif entre Drupal et WordPress : les deux CMS présentent des différences dans leur mode de fonctionnement dont vous aurez un bon aperçu en lisant l’excellent billet Drupal et WordPress : deux logiques proches, mais différentes de Marie-Aude.

Amadouer Drupal

La première chose à faire est de télécharger la dernière version stable de Drupal et de décompresser l’archive pour la copier sur votre serveur. Pour information, j’utilise un hébergement mutualisé chez PHPNET qui semble posséder les pré-requis nécessaires, ce qui peut ne pas être le cas partout.

Saisissez l’adresse de votre site web et suivez les étapes de l’installateur automatique. En ce qui me concerne, l’assistant s’est arrêté à l’étape de la saisie des informations permettant la connexion à la base de données MySQL. A ce niveau, deux problèmes au moins sont susceptibles de survenir (et sont comme par hasard survenus) :

1. Un caractère spécial dans le mot de passe peut empêcher la connexion à la base de données. Méfiez-vous donc des caractères : / @ + ( ) ? = & car vous risquez de ne pas aller très loin. Des caractères d’échappement sont prévus, mais sait-on jamais.

2. Il semble que l’installation automatique soit comme les antiobiotiques et qu’il soit nécessaire d’écrire en dur les éléments pour la connexion avec la base de données : nom de la base, nom d’utilisateur, mot de passe et nom du serveur dans le fichier /sites/default/default.settings.php qu’il faudra renommer en settings.php. Saisissez à nouveau ces informations dans l’assistant pour passer à l’étape suivante.

   Notes : Il ne faut pas simplement renommer le fichier. Il faut créer un fichier settings.php à côté du dossier default.settings.php soit en dupliquant et renommant ce dernier, soit en créant un fichier vide nommé settings.php

Lire Installation de Drupal.

Drupal, au pied !

Une fois que vous aurez posé la souris dans le menu Administer, la palanquée d’options et de paramètres disponibles vous fera prendre  conscience du potentiel de Drupal. N’ayez pas peur et suivez le guide pour avoir un Drupal fonctionnel à votre service plutôt que l’inverse !

Vous aurez besoin d’installer de nombreux modules parfois dépendants d’autres modules. C’est le prix à payer pour… la modularité. Et oui, la force de Drupal est d’être entièrement composé de modules ; les éléments de base du moteur ne sont finalement que des modules obligatoires.

L’installation de ces modules s’effectue en suivant généralement les étapes suivantes :

• Téléchargez et décompressez le module,
• Faites glisser le dossier du module vers le dossier modules de votre installation,
• Activez le modules et ses sous-modules éventuels dans le dossier Administrer › Construction du site › Modules,
• Personnalisez les paramètres dans Administrer › Configuration du site › Votre_Module.

Notes : Les pages permettant d’installer les modules sont assez peu friendly. Toutefois, les explications sont concises et claires ; les dépendances entre les modules sont bien indiquées et sont d’ailleurs rappelées dans la page permettant d’activer les modules. Les dépendances peuvent même s’activer automatiquement lorsqu’elles se trouvent toutes dans le dossier modules. C’est assez bien fait.

Des URLs propres

Tout se passe bien ? Ok, passons à la suite. Une des premières choses que je fais lorsque j’installe un CMS, c’est de jeter un oeil sur les paramètres permettant d’avoir des URL’s propres (sans le point d’interrogation). Dans Drupal, ça se passe dans Administer › Site configuration › Clean URLs.

La case Disabled est cochée et si tout va bien vous pourrez cliquer sur Enabled. Si ce n’est pas le cas, ouvrez le fichier .htaccess à la racine de votre installation et supprimez le commentaire # devant la ligne # RewriteBase / (ligne 107 vers la fin du document). L’adresse http://votresite.fr/?q=admin/settings/clean-urls se transforme alors en http://votresite.fr/admin/settings/clean-urls.

Drupal en français

Pour avoir Drupal en français, rendez-vous sur la page de téléchargement et choisissez votre traduction. Contrairement à WordPress où un seul fichier est nécessaire pour la traduction de l’interface d’administration, vous verrez qu’il faut ajouter pas moins de 44 fichiers de traduction répartis dans 77 dossiers.

Heureusement, il suffit de faire glisser les dossiers décompressés aux emplacements adéquats sur votre serveur pour qu’ils fusionnent avec ceux qui sont déjà là (si vous travaillez sur Windows, prenez garde de ne pas remplacer les dossiers).

Assurez-vous ensuite que les modules Locales et Content Translation sont activés dans Administer › Modules. Allez ensuite dans Administer › Site Configuration › Languages et cliquez sur l’onglet Add Language et choisissez French dans le menu déroulant. Validez et sélectionnez French par défaut. Enregistrez la configuration et voilà ! Drupal est en français.

Lire Drupal 6 : comment installer la langue française.

Un éditeur WYSIWYG

Une fois Drupal en français, il est temps de passer à la rédaction des contenus. Dans Drupal, l’éditeur pour rédiger les pages ou les billets est livré en deux parfums :

1. Filtered HTML :  les adresses de pages web et de messagerie électronique sont transformées en liens automatiquement. Les tags HTML autorisés sont limités à  <a>, <em>, <strong>, <cite>, <code>, <ul>, <ol>, <li>, <dl>, <dt>, <dd>. Les lignes et les paragraphes vont à la ligne automatiquement.
2. Full HTML : les adresses de pages web et de messagerie électronique sont transformées en liens automatiquement. Les lignes et les paragraphes vont à la ligne automatiquement. Tous les tags HTML sont autorisés.

Notes : vous verrez plus tard qu’il est possible d’associer un éditeur selon les droits accordés aux utilisateurs de Drupal. Vous pourrez ainsi réserver la version Full HTML de l’éditeur aux administrateurs du site et la version Filtered HTML aux autres contributeurs. Point positif, le champs d’édition peut se scinder en deux pour créer un résumé ou un chapô.

Installer un nouvel éditeur visuel

Malgré tout, cet éditeur est un peu rustique comparé à ce que l’on a l’habitude de voir sur WordPress. Pour avoir un éditeur digne de ce nom, il faut installer WYSIWYG API qui gère l’installation d’autres éditeurs comme TinyMCE ou FCKEditor, bien plus conviviaux. Et si vous en profitiez pour utiliser BBComposer ?

Notes : arrivés là, vous avez certainement eu l’occasion de voir la richesse des options disponibles dans Drupal. L’édition des articles ne fait pas exception et on commence déjà à voir des différences significatives avec WordPress. Notamment en ce qui concerne les paramètres du menu qui permettent de donner un titre plus court pour faire apparaitre l’article dans un menu. Il est même possible de choisir le poids de l’entrée du menu pour préciser son emplacement.

Dès que le module wysiwyg est décompressé, faites-le glisser dans le répertoire modules de votre installation Drupal et activez-le dans Administrer › Construction du site › Modules › User Interface › Wysiwyg.

Cliquez ensuite dans Administrer et sur Par module (à côté de Par tâche) pour installer ou choisir un éditeur visuel à votre convenance. Vous avez le choix entre 9 éditeurs côté client :

1. jWYSIWYG
2. FCKeditor
3. markItUp
4. NicEdit
5. openWYSIWYG
6. TinyMCE
7. Whizzywig
8. WYMeditor
9. YUI editor

Notes : si vous installez FCKeditor, faites attention à ne pas télécharger la nouvelle version CKEditor 3.1, qui ne semble pas encore compatible avec le module wysiwyg. Descendez plus bas dans la page et choisissez FCKeditor 2.6.5. Ou dirigez-vous vers TinyMCE. Notez toutefois que si l’éditeur CKeditor n’est pas pris en charge directement par le module Wysiwyg, il est tout de même disponible comme module indépendant.

J’ai voulu installer openWYSIWYG, mais la version de démonstration m’indique que mon navigateur (Google Chrome) n’est pas pris en charge. C’est balot qu’un projet open source ne prenne pas en charge un produit basé lui aussi sur de l’open source :/

Une fois l’archive décompressée, créez le répertoire /sites/all/libraries et copiez le dossier tinymce. Lorsque vous cliquerez sur Administrer › Configuration du site › Wysiwyg, vous aurez la possibilité d’associer TinyMCE au format d’entrée Filtered HTML ou Full HTML (ou les deux). Comme vous le devinez sans doute, il est bien entendu possible d’associer un éditeur visuel différent par format d’entrée. Il suffit de répéter les étapes précédentes pour comparer TinyMCE avec FCKeditor, par exemple, qui dispose d’une interface en français, ce qui n’est pas négligeableNotez que si l’éditeur CKeditor (nouvelle version de FCKeditor) n’est pas pris en charge directement par le module Wysiwyg, il est tout de même disponible en tant que module indépendant..

Modifier les préférences de tinyMCE ou FCKeditor

Le point fort de Drupal dans sa gestion des éditeurs wysiwyg, c’est sa capacité de pouvoir associer un éditeur différent selon les contributeurs en fonction de leurs besoins ou des restrictions que vous voudrez leur imposer, ou de modifier les préférences d’un même éditeur visuel selon les contributeurs pour affiner encore plus la gestion des droits.

Pour cela, retournez dans le module wysiwyg et modifiez le format d’entrée pour accéder aux options Paramètrage de base, Boutons et plugins, Apparence de l’éditeur, Nettoyage et sortie et CSS. Notez que seuls les boutons cochés seront activés au final ; ils ne s’ajoutent pas à ceux qui sont définis par défaut, mais constituent en quelque sorte un nouveau package. En gros, il manque une case Tout sélectionner ;)

Voir Install FCKeditor Using WYSIWYG API.

Insérer des images dans Drupal, mission impossible ?

Quand on a l’habitude de WordPress, il semble tout naturel de télécharger une image depuis le web ou à partir de son poste de travail pour l’afficher où bon nous semble dans un article. C’est encore plus vrai depuis WordPress 2.9 qui autorise quelques traitements sympathiques sur les images.

Dans Drupal, c’est comment dire… Bref, c’est pas évident. La documentation précise bien qu’il est possible d’insérer une image dans un contenu via FTP puis d’utiliser la balise HTML img, mais quelque chose me dit que ça ne va pas plaire à tout le monde. Heureusement, il existe plusieurs solutions pour y remédier (ou pas).

Module Image (Bof)

Le pitch : le module Image permet aux utilisateurs ayant les permissions adéquates d’uploader des images dans Drupal, de les afficher individuellement en page d’accueil, de les insérer dans un article ou encore de les grouper dans une galerie et de créer automatiquement des miniatures de différentes tailles.

Faites glisser Image dans le dossier modules de votre installation et activez-le dans Administrer › Construction du site › Modules puis Image. Vous remarquerez à cette occasion que Drupal installe automatiquement les fichiers de langue pour les modules qui en possèdent. Frambi-framboise sur le gâteau, le module Image crée pour nous les répertoires /sites/default/files/images et /sites/default/files/images/temp.

Malheureusement, tout ne fonctionne pas comme sur des roulettes : le tableau de bord indique que Image Import et ImageMagick advanced options ne sont pas configurés correctement. Pour le premier, le message précise que le répertoire d’import n’a pas été configuré et pour le second, qu’il n’a pas été installé correctement.

Pour spécifier le répertoire d’import, je vais donc dans Administrer › Configuration du site › Images et dans le doute j’indique/home/temporaire/upload. Pour ImageMagick je me contente de le désactiver dans Administrer › Configuration du site › Boite à outils image. En attendant de voir si tout est OK au niveau de mon hébergement je me contenterai de la librairie GD.

Bref, après toutes ces péripéties j’ai toujours bien envie d’afficher une image. Or, il semble que ce module ne fait qu’ajouter un type de contenu Image à côté des Pages et des Story. Ce qui ne correspond pas vraiment à mes besoins (Je n’exclus pas, bien évidemment, le fait d’être passé à côté de quelque chose d’essentiel). Mais au moins avons-nous déjà la possibilité d’uploader des images dans Drupal, ce qui n’est pas rien ;)

ImageField (Bof)

Dépendant des modules CCK et FileField, ImageField fournit un uploader dans la lignée du module Image vu plus haut. Des modules complémentaires permettent de générer des miniatures, de saisir des méta-données en plus des traditionnels alt et title, de recadrer les images ou encore de télécharger des images par lot.

Une fois que vous aurez copié ces modules, vous vous apercevrez que CCK est un gros morceau : il bénéficie d’un menu pour ses dépendances dans la liste des modules. Ne sachant pas encore de quoi j’aurais exactement besoin, j’ai tout coché. Mais impossible d’activer le module FileField à cause de l’absence du module getID3 (gestions des informations contenus dans les fichiers audios). Dans le doute, je l’installe. Un message d’erreur m’avertit que je n’ai pas installé la bibliothèque getID3 dans le dossier sites/all/libraries/getid3/.

Mais nous ne somme pas au bout de nos peines car à la lecture de la documentation de ImageField, il semble nécessaire d’installer les modules ImageCache et ImageAPI qui n’était nécessaire que pour la version 5.x de Drupal…

Une fois ImageCache installé, mis à jour et assimilé dans les grandes lignes (les plus pressés regarderont directement la vidéo Maintainable Image Gallery), vous pourrez vous rendre sur Administrer › Construction du site › ImageCache pour voir les possibilités du module. J’ai également installé le module Views qui de toutes façons fait partie des incontournables de Drupal (pendant que vous y êtes, installez également le module d’aide avancé pour Views).

Une fois que vous aurez terminé le tutoriel Imagefield – how to set up and make a basic view vous aurez plus ou moins la même chose qu’avec le module Image présenté plus haut…

Lire Préparer Drupal pour la manipulation d’images.

IMCE (Yeah!)

Le module IMCE permet d’uploader des fichiers et des images avec la gestion des répertoires distants en prime. Le tout compatible avec FCKeditor, TinyMCE et WYMEditor. Pour éviter certaines incompatibilités entre les éditeurs et/ou certains modules, il est préférable de passer par le module IMCE Wysiwyg bridge qui facilite l’intégration du module IMCE dans les éditeurs visuels TinyMCE et FCKeditor pour le moment.

Pour éviter de tout mélanger, je vous conseille de désactiver le module Image installé précédemment et d’installer IMCE et IMCE Wysiwyg bridge puis de jeter un oeil sur les options de IMCE dans Administrer › Configuration du site › IMCE.

Pour accéder à ce qui nous intéresse, une dernière étape est nécessaire : cocher la case IMCE dans la liste des boutons et plugins de l’éditeur visuel TinyMCE dans Administrer › Configuration du site › Wysiwyg !

Faites la même chose pour FCKeditor pendant que vous y êtes, histoire de passer rapidement d’un éditeur visuel à l’autre. L’idéal étant de créer deux nouveaux formats d’entrée en plus de Filtered HTML et de Full HTML pour leur associer nos deux éditeurs visuels nouvellement installés.

Le résultat de nos manipulations prend la forme d’une icône Browse ou d’un bouton Parcourir le Serveur juste à droite du champs URL de l’image (quand on a cliqué sur l’icône Insérer/modifier l’image). Un clic sur ce bouton affiche enfin la boite de dialogue qui permet d’uploader, de générer les miniatures et d’envoyer le tout à l’éditeur qui se chargera d’afficher l’image dans l’article, enfin !

Notez que le module IMCE est également disponible pour le module CKeditor.

Ca ne marche toujours pas ?

Que l’image s’affiche correctement dans l’éditeur ne signifie pas qu’elle s’affichera dans votre article une fois publié… La raison est que même si vous spécifiez un éditeur visuel comme FCKeditor, le comportement par défaut est de filtrer les balises HTML à la manière de Filtered HTML. Pour y remédier, rendez-vous dans Administrer › Configuration du site › Formats d’entrée et décochez la case filtre HTML.

Drupal 7 (Yeah?)

La prochaine version de Drupal devrait gérer nativement les images avec des champs Image pouvant être ajoutés aux contenus et auxquels peuvent être attachés des effets tels que le redimensionnement, le recadrage, etc. Cette version est actuellement en Alpha1.

Notes : cette prochaine mouture de Drupal marquera un tournant dans l’ergonomie du CMS qui devrait avoir été amélioré de manière significative par rapport à la version 6.15 que je teste actuellement.

En attendant la suite des tribulations d’un WordPressien en Drupalie…

Malgré la longueur de ce billet, l’installation de Drupal est moins compliquée qu’il n’y parait. Les problèmes que j’ai rencontrés vous seront sans doute épargnés. L’installation des différents modules prend du temps et de nombreux aller-retours sont nécessaires pour installer, activer ou modifier les paramètres.

Les critiques concernant l’ergonomie perfectible de Drupal (qui va être radicalement modifiée avec l’arrivée de la version 7) sont sans doute un moindre mal au regard des possibilités. Et puis, entre nous, si vous trouvez que Drupal est trop riche, c’est peut-être que WordPress ou votre CMS préféré suffit à votre bonheur ^_^

Toutefois, la saisie et la mise en forme de textes et d’images sont le coeur et la raison d’être de tout CMS et l’absence d’un éditeur visuel intégrant images, son, vidéos, etc. se fait cruellement sentir. D’autant plus que les solutions proposées par la communauté Drupal n’offrent pas le même confort d’utilisation que ce qu’on trouve dans WordPress 2.9 où le module d’upload et d’édition d’image est une petite merveille. Mais la version 7 pointe son nez et tout ces inconvénients ne seront sans doute qu’un mauvais souvenir ;)

Quelques liens

• Drupalfr
• Kolossaldrupal
• Biboo
• Drupalistic
• Learn By The Drop

Articles sur le même sujet

• BBComposer — l'éditeur HTML à consommer sur place ou à emporter
• Le petit journal du web — WordPress, développement web, etc.
• PHPCrossRef — Bibliothèques de référence pour projets PHP Open source
• IE6 — 3 fonctions Javascript pour lutter contre le bug des classes multiples
• Markdown on Save — L'ami HTML de Markdown pour WordPress