Introduction

  1. Introduction

Initié par Dries Buytaert à l'Université d'Anvers, et placé sous licence libre GNU GPL, voilà plus de dix ans que Drupal (prononcez à l'anglaise ce mot issu du néérlandais « Druppel » - goutte) a vu le jour et n'a cessé de gagner en renommée. Classé depuis 2009 parmi les meilleurs CMS (Content Management System – Système de Gestion de Contenu), il permet de créer un site Web dynamique où plusieurs utilisateurs peuvent enrichir son contenu sans connaissance particulière. Aujourd'hui, il est considéré comme un véritable couteau suisse qui se transforme rapidement en :

L'ouverture et la modularité d'un CMS sont souvent des éléments décisifs lors du choix de la structure d'un site web, qu'il s'agisse d'un site personnel ou institutionnel. Drupal a l'avantage d'être à la fois apparemment simple à l'installation et particulièrement robuste à l'utilisation. C'est pourquoi nombre de sites gouvernementaux l'utilisent, dont celui de la Maison Blanche aux États-Unis (whitehouse.gov).

À un tel niveau de flexibilité correspond un niveau de complexité qui rend toutefois la compréhension de Drupal un peu plus difficile que pour les autres CMS connus. C'est sans doute-là une raison qui justifie une autre appellation : Drupal peut aussi être considéré comme un CMF (Content management Framework – Plate-forme de Gestionnaire de Contenu). En effet, c'est parce qu'il propose une interface hautement sophistiquée que des centaines de développeurs participent aujourd'hui à son évolution en créant et partageant un grand nombre de modules, correspondant à un grand nombre de besoins.

Ce livre a pour objectif de vous guider dans l'administration de Drupal, depuis son installation à l’utilisation de modules incontournables, et même jusqu'à la création de vos propres modules. Comment gérer un thème ? Quelles méthode pour optimiser la base de données ? Que doit-on savoir pour administrer les menus, un site multilingue, des forums et des blogs ? Autant de question auxquelles ce livre tâchera d'apporter des réponses claires suivant une méthode pas à pas, à la portée du plus grand nombre.

Structure du livre :

Si vous ne connaissez pas Drupal, si vous ne savez pas exactement à quoi il sert ou si vous êtes impatient de le voir fonctionner, le chapitre I de ce livre est conçu spécialement pour vous : il vous permettra d'installer Drupal et de découvrir un grand nombre de fonctionnalités en quelques heures seulement.

Le chapitre II détaille les fonctionnalités importantes de Drupal et revient plus précisément sur certain sujets abordés précédemment. Il vous permettra également d'appréhender le puissant outil de création de types de contenus.

Grâce au chapitre III vous saurez sauvegarder votre site, configurer votre serveur et sécuriser vos données, avant d'approfondir au chapitre IV l'utilisation de nombreux modules qui permettent d'ajouter des fonctionnalités à Drupal.

La personnalisation graphique d'un site (son thème) étant un sujet incontournable, sa maîtrise dépend néanmoins du niveau de compréhension de l'ensemble du système, et devient un savoir-faire qui sera traité dans le chapitre V.

Enfin, le chapitre VI vous permettra de découvrir en douceur comment programmer de nouveaux modules correspondant à vos besoins et, pourquoi pas, les partager à votre tour.

Notes à propos de ce livre :

Ce livre est écrit comme un tutoriel, et comporte de nombreux exemples pratiques. Il peut se lire devant un ordinateur en effectuant les actions décrites, mais il est aussi possible de le lire sans ordinateur, grâce aux illustrations montrant les actions proposées.

Conventions utilisées dans ce livre

Puce module.eps

Lien vers un module en rapport avec le sujet traité

information.eps

Information complémentaire

astuce.eps

Astuce

Versions alpha, beta et stables :

Lors de l’écriture de ce livre, certains modules étaient en cours de développement pour Drupal 7 et n’étaient pas publiés en version stable. Il convient donc de bien vérifier avant la mise en production de votre site si la stabilité des modules utilisés ne le mettent pas en péril.

Site internet :

Vous pouvez téléchargez les fichiers illustrant les exemples traités dans ce livre sur le site internet dédié à cet ouvrage : http://www.framabook.org.

Pour installer ces fichiers reportez-vous au chap. III — 2 Sauvegardes / Restauration.

Copies d'écrans et traductions en français

Pour une meilleure compréhension, de nombreuses copies d'écrans illustrent ce livre. Il se peut qu'elles soient légèrement différentes au moment ou vous installerez les modules présentés dans ce livre, parce que vous utilisez une nouvelle version du module.

Si vous désirez suivre exactement les copies d'écran, installez les modules dans les versions indiquées dans le livre.

À l'installation, certains modules n'étaient pas encore traduits. Des traductions ont put être importés pour réaliser les copies d'écran.

Pour importer des traductions reportez-vous au chap. IV — 2 Site multilingue.

Chapitre

I

Démarrage rapide

  1. I - Démarrage rapide

Le but de cette première partie est de découvrir Drupal par l’exemple. Elle vous explique comment installer Drupal et vous guide dans vos premiers pas. Ainsi, après avoir lu cette partie, vous saurez ce que Drupal peut faire et à quoi il peut servir.

Démarrage rapide

Bien que Drupal puisse fonctionner sur différents serveurs web et bases de données, les explications de ce livre se limiteront au très classique quatuor Apache (serveur Web) — PHP (langage de programmation) — MySQL (logiciel de base de données) — PhpMyAdmin (logiciel facultatif, mais pratique, permettant de gérer MySQL via une interface Web).

Cette partie vous présente deux manières classiques d’installer Drupal sur Windows et sur Linux :

Le troisième chapitre de l’ouvrage vous accompagne dans la découverte de Drupal et vous explique comment créer, gérer et afficher vos premiers contenus de publication, en l’occurrence quelques recettes de cuisine.

Si les deux manières d’installer Drupal décrites ici ne vous conviennent pas, le tableau suivant résume les principales variantes d’installation pour vous aider à choisir celle qui convient le mieux à votre usage :

Méthode
d’installation

Systèmes

Avantages

Inconvénients

Conclusion

Wamp + Drupal depuis les sources

Windows

- Assez facile à installer

- Méthode décrite pas à pas dans ce livre

- Possibilité de transfert vers un serveur de production

- Deux systèmes différents (Windows pour le site de test, Linux pour le serveur de production)

Très bonne solution pour découvrir Drupal et aller un peu plus loin. Vous ne serez pas dépaysé si vous avez déjà utilisé EasyPhp

LAMP + Drupal depuis les sources

Linux

- Assez facile à installer

- Même système pour le serveur de test et de production

- Méthode décrite pas à pas dans ce livre

- Si vous ne connaissez pas Linux, il peut être difficile de débuter avec Drupal sur un nouveau système

La meilleure des solutions si vous connaissez Linux et s’habituer à administrer un serveur dédié

Windows + virtualisation de Linux

Windows + Linux

- Vous pouvez utiliser tous les outils de développement web non disponibles sous Linux

- Vous avez un serveur local sous Linux

- Un peu difficile à mettre en œuvre

- Ressources nécessaires pour faire tourner deux systèmes sur une machine

Très bonne solution pour les habitués de Windows qui veulent découvrir Linux

Linux + virtualisation Windows

Linux + Windows

- Vous pouvez utiliser tous les outils de développement web dédiés à Windows

- Vous avez un serveur local sous Linux

- Un peu difficile à mettre en œuvre

- Ressources nécessaires pour faire tourner deux systèmes sur une machine

Bonne solution pour les utilisateurs désirant passer à Linux en douceur

information.eps

Si vous possédez un serveur dédié et que vous n’avez pas d’expérience dans son exploitation, je vous conseille d’installer Drupal d’abord localement pour éviter de rencontrer les problèmes liés aux spécificités de votre hébergeur.

  1. 1 - Installation de Drupal

Si vous désirez installer Drupal sous Linux, passez directement au chap. I — 2 Installation rapide sous Linux.

  1. Installation rapide sous Windows

La méthode décrite dans ce livre pour l’installation de Drupal utilise le logiciel WampServer2 qui regroupe Apache, PHP, MySQL et phpMyAdmin. Si vous avez l’habitude d’une autre solution WAMP (easyphp ou autre), ne la perdez pas ! Cela devrait également fonctionner moyennant quelques modifications mineures.

1 — Installation rapide sous Windows

  1. Installation de WampServer

Laissez-vous ensuite guider par l’installateur de Wampserver et choisissez les paramètres par défaut en cas de doute.

astuce.eps

Sous Windows 7, vous pouvez faire en sorte que l’icône de WampServer s’affiche en permanence en cliquant sur le lien Personnaliser de la zone de notification. Ensuite, choisissez l’option Afficher l’icône et les notifications pour l’icône Aestan Tray Menu.

Wampserver fonctionne

  1. Téléchargement et accès à l’installateur de Drupal

Vous allez maintenant installer Drupal à partir de ses fichiers sources. Il faut les télécharger et les copier au bon endroit dans votre arborescence.

Page de téléchargement de drupal.org

information.eps

Si vous ne pouvez pas décompresser votre archive .tar.gz, utilisez le logiciel libre 7zip : http://www.7-zip.org.

Drupal est prêt à être installé !

astuce.eps

Si vous avez des problèmes de performances lors de l’installation ou de l’utilisation de Drupal sous Windows, tentez l’URL http://127.0.0.1/drupal au lieu de http://localhost/drupal
  1. Installation de la langue française

La priorité est maintenant d’installer Drupal en français :

Une page d’aide à l’installation des traductions apparaît alors. Elle décrit 3 étapes : le téléchargement du fichier de traduction, le changement de nom du fichier et la copie du fichier.

Téléchargement de la langue française

Drupal est prêt à être installé... en francais !

  1. Installation de la base de données

Une base de données est un ensemble de données organisées et nécessaires au fonctionnement d’une application. Lorsque l’application a besoin d’exploiter sa base, elle interroge alors le gestionnaire de base de données (ici, vous utiliserez MySQL) qui lui-même effectuera les actions utiles dans la base (ajout, modification, suppression de données, etc.). Ce programme est optimisé pour manipuler efficacement de grandes quantités de données.

Vous allez utiliser phpMyAdmin pour créer et configurer la base de données de Drupal.

astuce.eps

Depuis l’icône WampServer, vous avez un accès rapide vers les adresses http://localhost et
http://localhost/phpmyadmin.

Les raccourcis de WampServer

Vous devriez alors voir apparaître la page d’accueil de phpMyAdmin que WampServer a installé :

Création de la base de données MySQL pour Drupal grâce à phpMyAdmin

information.eps

Votre base est vide, c’est l’installateur Drupal qui va créer ses tables et les remplir avec ses données durant l’installation.

Il faut indiquer à l’installateur Drupal le nom de la base que vous venez de créer et comment s’y connecter. Par défaut, WampServer ne protège pas MySQL et il est possible de s’y connecter sans mot de passe avec l’utilisateur root. Vous verrez comment protéger une base de données au chap. III — 1.3 Configuration de MySQL.

Retournez sur l’installateur Drupal et complétez les champs suivants :

Installation de la base de données par l’installateur Drupal

astuce.eps

Drupal s’installe avec tous ses modules par défaut, ce processus étant assez long, le serveur web (Apache) peut l’interrompre. Dans ce cas, rechargez la page (touche F5), le processus reprendra là où il s’est arrêté.
  1. Configuration du site

Une fois le l’installation terminée,Àil faut entrer les paramètres du site et de son administrateur.

Complétez les champs de la manière suivante :

Paramètres du site et de son administrateur

L’installation de Drupal sous Windows est terminée !

Le chapitre suivant explique comment installer Drupal sous Linux, si vous désirez utiliser Drupal uniquement sous Windows, rendez-vous directement au chap. I — 2 À la découverte de Drupal.

  1. Installation rapide sous Linux

L’installation d’une solution LAMP (Linux, Apache, MySQL, Php) sous Linux est toujours très bien documentée quelque soit la distribution utilisée. Dans ce livre, la distribution grand public Ubuntu a été choisie car elle est la plus utilisée à ce jour.

  1. Installation d’une solution LAMP

Pour installer les quatre logiciels dont vous avez besoin, tapez la ligne de commande suivante dans un terminal (avec Ubuntu : Applications — Accessoires — Terminal) :

sudo apt-get install apache2 apache2-doc mysql-server php5 libapache2-mod-php5 php5-mysql phpmyadmin php5-gd

information.eps

Le package phpmyadmin ne fait pas partie de la solution LAMP mais il est installé pour faciliter la gestion de la base de données

Configuration de MySQL

Configuration de phpMyAdmin

Votre solution LAMP est installée, phpMyAdmin fonctionne

  1. Téléchargement et accès à l’installateur de Drupal

Vous allez maintenant installer Drupal à partir de ses fichiers source. Il faut donc les télécharger et les copier au bon endroit dans votre arborescence de fichiers. Il est préférable d’installer Drupal dans votre répertoire personnel (/home/utilisateur) pour faciliter l’édition et l’ajout de fichiers. Toutefois, sachez qu’il est possible de l’installer dans un autre répertoire (classiquement /var/www).

Page d’accueil de drupal.org

Vous devriez obtenir une arborescence du type /home/utilisateur/drupal.

Créez maintenant un lien symbolique entre le répertoire d’Apache et votre répertoire drupal

cd /var/www

sudo ln -s /home/utilisateur/drupal

information.eps

La commande ln -s permet de créer un lien symbolique entre le répertoire /var/www et le répertoire drupal de votre répertoire personnel. Cela est très pratique car vous pourrez alors modifier facilement les fichiers de Drupal sans entrer le mot de passe super utilisateur. Toutefois, sachez que cela peut nuire aux performances de votre système car il doit, à chaque requête, résoudre ce lien.

Lancez un navigateur internet et entrez l’adresse locale : http://localhost/drupal. Vous devriez voir apparaître la page d’accueil de Drupal.

Drupal est prêt à être installé

  1. Installation de la langue française

La priorité est maintenant d’installer Drupal en français :

Une page d’aide à l’installation des traductions apparaît alors. Elle décrit 3 étapes, le téléchargement du fichier de traduction, le changement de nom du fichier et la copie du fichier.

Téléchargement de la langue française

Drupal est prêt à être installé... en francais !

  1. Vérification des pré-requis

Un message apparaît alors, signalant plusieurs erreurs.

Drupal demande des droits en écriture

Le fichier /sites/default/settings.php n’existe pas et l’installateur Drupal doit avoir les droits en écriture sur le répertoire /home/utilisateur/sites/default.

Commande pour la création du fichier settings.php à partir de default.settings.php :

cp /var/www/drupal/sites/default/default.settings.php /var/www/drupal/sites/default/settings.php

Durant l’installation, Drupal doit avoir accès au répertoire /sites/default, vous pourrez supprimer ce droit à la fin de l’installation.

Commande pour donner les droits d’accès en écriture sur le répertoire /sites/default

sudo chmod -R a+w /var/www/drupal/sites/default

astuce.eps

Vous pouvez utiliser l’interface graphique du gestionnaire de fichier de Gnome (Nautilus) pour effectuer ces actions.
  1. Installation de la base de données

Une base de données est un ensemble de données organisées et nécessaires au fonctionnement d’une application. Lorsque l’application a besoin d’exploiter sa base, elle interroge alors le gestionnaire de base de données (ici, vous utiliserez MySQL) qui lui-même effectuera les actions utiles dans la base (ajout, modification, suppression de données, etc.). Ce programme est optimisé pour utiliser efficacement de grandes quantités de données.

Vous allez utiliser phpMyAdmin pour créer et configurer la base de données de Drupal.

Vous devriez alors voir apparaître la page de connexion de phpMyAdmin :

Création de la base de données MySQL pour Drupal grâce à phpMyAdmin

information.eps

Votre base est vide, c’est l’installateur Drupal qui va créer ses tables et les remplir avec ses données durant l’installation.

Il faut indiquer à l’installateur Drupal le nom de la base que vous venez de créer et comment s’y connecter.

Retournez maintenant sur l’installateur Drupal et complétez les champs suivants :

Installation de la base de données par l’installateur Drupal

astuce.eps

Drupal s’installe avec tous ses modules par défaut, ce processus étant assez long, le serveur web (Apache) peut l’interrompre. Dans ce cas, rechargez la page (touche F5), le processus reprendra là où il s’est arrêté.

À la fin de l’installation un message s’affiche en haut de la page :

Restaurer les accès aux fichiers

Commande pour supprimer les droits d’accès en écriture sur le repertoire ./sites/default/

sudo chmod -R a-w /var/www/drupal/sites/default/

Commande pour restaurer les droits d’accès en écriture sur le repertoire ./sites/default/files

sudo chmod -R a-w /var/www/drupal/sites/default/files

information.eps

Vous pouvez recharger la page pour vérifier si le message a disparu.

information.eps

Drupal doit avoir les droits d’accès en écriture sur /sites/default/files car c’est ici qu’il stockera les fichiers relatifs aux contenus (images, fichiers PDF, etc.)
  1. Configuration du site

Une fois le processus d’installation terminé, il faut entrer les paramètres du site et de son administrateur.

Complétez les champs de la manière suivante :

Paramètres du site et de son administrateur

L’installation de Drupal sous Linux est terminée !

  1. 2 - À la découverte de Drupal

2 — A la découverte de Drupal

Vous avez installé un système, un serveur web supportant php, un logiciel de base de données et Drupal. Vous pouvez donc partir à la découverte du logiciel en y ajoutant du contenu, en modifiant son interface, en installant des modules qui ajoutent des fonctionnalités et bien d’autres choses encore...

  1. Le contenu
    1. Ajout d’un premier article

Drupal est un CMS : Content Management System "Système de gestion de contenu". Vous allez donc commencer par y entrer du contenu. Drupal vous y encourage d’ailleurs fortement puisque sur cette première page, pas moins de 3 raccourcis vous permettent de le faire.

Ajout d’un type de contenu

information.eps

Lorsqu’un calque de ce type apparaît, vous entrez dans la partie administration du système. Par défaut, les visiteurs anonymes de votre site ne devraient pas voir ce type de page.

Vous avez le choix entre deux types de contenu, Article et Page.

information.eps

Claude-Olivier Fribourg, le propriétaire et auteur du site http://1001recettes.blogspot.com/, en plus d’avoir le talent de bien cuisiner et de prendre de jolies photos, a eu la gentillesse de me permettre d’illustrer ce livre en reprenant une partie de son blog.

Vous pouvez reprendre la recette Salade de penne au thon rouge disponible à la section Plat principal (http://1001recettes.blogspot.com/2006/07/salade-de-penne.html)

Le site 1001 Recettes

information.eps

Les tags sont des mots clés qui caractérisent un article et sur lesquels il sera ensuite possible de faire des recherches.

astuce.eps

Vous pouvez agrandir les photos du site 1001 Recettes en cliquant sur l’image.

Téléchargement d’une image dans un article

Drupal vous redirige alors vers votre article mis en forme.

Votre premier article mis en page par Drupal.

  1. Le deuxième article avec résumé

Entrez donc une deuxième recette pour enrichir le contenu. Pour ce livre il a été choisi le Risotto à la bière blanche et Stilton et tranches de melon poêlées (section Plat principal — http://1001recettes.blogspot.com/2010/09/un-risotto-sucre-sale.html).

astuce.eps

Remarquez l’auto-complétion des tags lorsque vous entrez la lettre 'P', Drupal vous propose la liste des tags qui commencent par cette lettre (voir illustration suivante)

Le champ corps se sépare alors en deux parties, vous découvrirez à la fin de ce chapitre l’intérêt de créer un résumé.

Ajout d’un tag existant et d’un résumé

Votre site contient maintenant deux articles.

  1. Ajout de commentaires

Par défaut, il est possible d’ajouter des commentaires aux articles, vous allez maintenant en ajouter deux pour la recette du Risotto. Descendez en bas de la page à la section Ajouter un commentaire.

Formulaire d’ajout de commentaire

Notez que le sujet du commentaire n’est pas obligatoire.

Les commentaires de l’article mis en forme

  1. Navigation entre les articles

Cette page a changé : elle contient maintenant la liste des articles en commençant par le plus récent à la manière d’un blog.

La nouvelle page d’accueil du site

Remarquez également que :

S’affiche alors la liste de tous les articles ayant dans sa liste de tags « Plat principal ».

S’affiche alors la liste de tous les articles ayant dans sa liste de tags « Riz », les tags permettent donc de classer le contenu.

  1. Modifier un article

Vous allez maintenant modifier le premier article pour y créer un résumé.

Plusieurs méthodes permettent de modifier les articles :

Menu contextuel dans les listes.

Onglet Modifier d’un article

Modification de l’article

  1. Les menus
    1. Ajout d’un menu

Vos deux recettes sont accessibles depuis la page d’accueil, vous allez créer des menus dans l’en-tête, à coté de l’onglet Home, pour les rendre plus visibles.

Puce module.eps

L’ensemble de ces onglets horizontaux seront détaillés au chapitre chap. II — 3.1.1. Options des nodes de ce livre

Paramètres du menu d’un article

Le nouvel onglet de menu avec sa description

Les deux menus ajoutés

  1. Organisation des menus

Voici les deux entrées de menus créés. Imaginez maintenant que vous vouliez passer la Salade de penne devant le Risotto.

Drupal créé par défaut quatre menus, mais vous avez ajouté les recettes au menu Menu principal.

Page d’organisation des menus

Puce module.eps

Vous pourrez retrouver une explication plus approfondie des menus au chap. II — 2 Menu : les menus de ce livre.
  1. Exercice : ajout d’un contenu

La recette du croque Hawaï, son menu et le menu Accueil supprimé

Corrigé

Pour le menu :

Pour réorganiser le menu :

  1. Les blocs

Les blocs sont des boîtes que vous pouvez cacher ou faire apparaître là où vous le désirez sur votre page de Drupal. Peut-être avez-vous déjà remarqué le bloc de recherche dans la barre de gauche de Drupal.

  1. Ajouter un bloc

Vous pouvez ajouter un bloc qui permet de lister les derniers commentaires ajoutés à votre site.

Page d’administration des blocs

Vous voyez alors apparaître le bloc Commentaires récents sur la partie gauche de la page.

Le bloc Commentaires récents dans la région Sidebar First

Comme pour les menus, l’outil decouverte_6.png vous permet de réorganiser les blocs dans l’ordre que vous désirez sur une région donnée.

  1. Les régions

En plaçant le bloc Commentaires récents, vous pouviez choisir l’emplacement du bloc dans une liste déroulante. Cette liste est la liste de toutes les régions du thème utilisé pour la consultation du site (Bartik).

Une page type du thème utilisé (Bartik) s’affiche, ainsi que le nom de toutes ses régions, sur fond jaune.

Les régions du thème Bartik

Vous allez déplacer le bloc de recherche, actuellement dans la région Première barre latérale, dans la région En-tête (Header).

Le bloc de recherche positionné dans la région Header

  1. Exercice

Supprimez le message Propulsé par Drupal qui s’affiche en bas de la page.

Message à supprimer

Corrigé :

  1. Gestion des permissions

Après une installation simple de Drupal, deux utilisateurs sont créés : l’Administrateur, qui a tous les droits et l’utilisateur Anonyme, qui a des droits restreints. Vous pourrez constater qu’il est possible d’autoriser ou d’interdire des actions des différents modules de Drupal selon le profil de l’utilisateur.

Dans cet exemple vous allez permettre aux utilisateurs anonymes de poster des commentaires.

En vous déconnectant, vous êtes considéré comme utilisateur anonyme par Drupal.

Vous pouvez lire les commentaires de l’article mais il n’est pas possible d’en ajouter car le formulaire n’apparaît pas : l’utilisateur anonyme ne possède pas les droits pour accéder à cette fonctionnalité.

Vous allez modifier les droits d’accès pour que les utilisateurs anonymes puissent poster un commentaire.

Le bloc de connexion utilisateur

Chaque module possède une section qui définit un certain nombre de droits.

La gestion des droits sur le module Comment

Il est maintenant possible de poster des commentaires en tant qu’anonyme.

Pour la suite de ce livre, reconnectez-vous en admin/atelierdrupal.

  1. Les modules
    1. Activer un module

Les modules sont des briques de programme qui permettent d’étendre les fonctionnalités de Drupal. Vous allez en activer un qui permet de réaliser des sondages. Vous créerez ensuite un sondage qui permettra à vos visiteurs de voter pour leur recette favorite.

Page d’administration des modules

Il s’agit maintenant de créer un sondage :

En activant le module Poll, vous avez accès à un nouveau type de contenu Sondage en plus des types Article et Page de base.

Ajout d’un Sondage

Vous pouvez tester votre sondage !

Votre sondage fonctionne !!!

Un module peut étendre les fonctionnalités de Drupal de beaucoup de façons différentes. Ici, en activant le module Poll (Sondage), vous avez accès à un nouveau type de contenu, et, si vous retournez sur la page d’administration des blocs, vous verrez qu’un nouveau bloc Sondage le plus récent est disponible.

  1. Installation d’un module externe

Les modules les plus utiles sont installés par défaut avec Drupal. Mais un très grand nombre de modules sont téléchargeables sur le site officiel de Drupal (plus de 1000 pour la version 7.x). Une des grandes forces de Drupal réside dans le fait qu’il est facile, pour les personnes connaissant le Php, de développer de nouveaux modules.

Vous allez par exemple télécharger et installer le module Weather qui vous permettra d’afficher sous forme de bloc la météo en temps réel d’un aéroport donné à partir de son METAR.

information.eps

Le module Weather n’a qu’un rapport lointain avec un site de recette. Mais il a l’avantage de ne pas être difficile à installer et à configurer. Ce module sera désactivé à la fin de ce chapitre.

Téléchargement et installation du module

Chaque module possède sa propre page sur le site Drupal.org. Il faut localiser cette page pour installer ensuite le module.

Recherche d’un module par son nom sur drupal.org

La liste de tous les modules contenant le mot Weather s’affiche alors.

Drupal peut installer un module automatiquement à partir de l’url de son archive.

Copie de l’url de l’archive du module

Installation d’un module depuis l’URL de l’archive

Drupal s’occupe alors de télécharger l’archive et de l’extraire au bon endroit. Il vous reste à activer le module.

information.eps

Si l’installation automatique ne fonctionne pas, des méthodes alternatives sont décrites au chap. 1.3.3 Méthodes d’installation d’un module

astuce.eps

Les modules sont triés par catégories. Vous pouvez donc replier la catégorie Coeur qui regroupe l’ensemble des modules installés par défaut dans Drupal pour faciliter la recherche dans la page.

Le module Weather est maintenant prêt à être utilisé

Configuration du module

Lorsque le module est activé, un lien Configurer apparaît. Il permet d’accéder directement à la page de configuration du module.

Le module Weather peut afficher deux types de bloc, un bloc météo lié à la localisation de l’utilisateur du site ou un bloc météo lié au site lui-même. Pour simplifier la configuration de ce premier module, vous vous limiterez à afficher uniquement le deuxième bloc.

Un nouvel affichage système doit apparaître dans la liste

Sélection d’un aéroport

Le bloc a été créé, il s’agit maintenant de l’afficher dans une région.

Les blocs du module Weather

Le bloc Weather en action !

  1. Exercice : Installation, configuration et utilisation de BMI

Le bloc du module BMI

Corrigé :

Recherche, installation et activation du module

Configuration et utilisation

Le bloc Body Mass Index doit s’afficher sur la page d’accueil.

Désactivation des modules

Les blocs ne devraient plus apparaître en page d’accueil.

  1. Modification des thèmes de Drupal

Un thème dans Drupal est un ensemble de fichiers qui constitue l’apparence graphique de votre site. Vous aurez peut-être envie de personnaliser l’aspect de Drupal. Cela est tout à fait possible, mais, suivant votre niveau d’exigence, ce peut être une tâche très simple à réaliser ou très compliquée. La création et la modification des thèmes sont abordés dans le Chap. V — Modifier l’apparence de votre site de ce livre.

Ici, le but est d’avoir un aperçu des possibilités de Drupal. Vous allez donc d’abord personnaliser le thème par défaut (Bartik) grâce à l’interface de Drupal, puis, vous installerez, à la manière d’un module, un thème depuis internet.

  1. Page de sélection des thèmes

L’interface d’administration de Drupal permet de modifier quelques paramètres du thème.

Page de configuration des thèmes

  1. Installation d’un thème externe

Comme pour les modules, un grand nombre de contributeurs proposent des thèmes qui sont disponibles sur le site http://www.drupal.org.

Recherche d’un thème par son nom sur drupal.org

Les modules et les thèmes s’installent de la même façon :

Comme pour les modules, Drupal s’occupe alors de télécharger l’archive et de l’extraire à l’endroit où il faut. Il vous reste à activer le thème.

Allez tout en bas à la section des thèmes désactivés. Deux thèmes ont été ajoutés, Danland et Danblog.

Les deux thèmes de Danland

information.eps

Le thème Danblog est une version simplifié du thème Danland, il ne contient pas le diaporama de page de garde. Ce diaporama étant configurable uniquement manuellement (en éditant des fichiers), vous utiliserez dans cette prise en main uniquement Danblog.

Découvrez le thème Danblog !

information.eps

Activez le thème Bartik par défaut pour la suite de ce livre.

Chapitre

II

Utiliser Drupal

  1. II - Utiliser Drupal

Vous avez découvert un grand nombre de fonctionnalités de Drupal dans le premier chapitre. Le but de celui-ci est d’approfondir ces découvertes. — Utiliser Drupal Tout d’abord vous apprendrez comment surveiller votre installation et gérer les modules en lisant le chap. II — 1. Administrer Drupal par l'interface.

Au chap. II — 2. Organiser son site, vous apprendrez à organiser le contenu afin que votre site garde une cohérence lorsqu’il prendra de l’importance. Vous découvrirez également comment gérer les utilisateurs

C’est en installant des modules tiers au chap. II — 3. Ajout de contenu que vous pourrez proposer une interface riche à vos utilisateurs pour qu’ils puissent ajouter facilement du contenu au site.

Enfin, c’est au chap. II — 4. Field UI : types de contenus personnalisés que vous configurerez Drupal pour qu’il s’adapte à votre contenu.

  1. 1 - Administrer Drupal par l’interface
    1. Toolbar : les menus de votre site

Toolbar est un module du coeur de Drupal qui affiche une barre en haut de chaque page Drupal pour administrer le site.

Le menu affiché par Toolbar

Cette barre liste les éléments de haut niveau pour l’administration du site et propose des raccourcis pour l'administration :

Icône maison

Raccourci vers la page d’accueil du site.

Tableau de bord

Lien vers une page d’accueil personnalisable pour l’administrateur.

Contenu

Pages d’administration pour rechercher, créer, modifier et supprimer les contenus et les commentaires.

Structure

Pages d’administration pour structurer les informations du site (blocs, menus, types de contenu).

Apparence

Pages permettant de gérer les thèmes.

Personnes

Pages permettant de gérer les utilisateurs et leurs droits.

Modules

Permet l’ajout, la modification ou la suppression de modules. Il peut-être également un bon endroit pour trouver la page de configuration d’un module nouvellement installé.

Configuration

Pages de configuration de l’ensemble des modules et du site lui-même.

Rapports

Pages d’informations sur l’état de santé du site et de son activité.

Aide

Pages d’aide des modules.

Bonjour admin

Accéder à la page de l’utilisateur connecté.

Se déconnecter

Déconnexion de l’utilisateur en cours.
  1. Page de configuration du site

Rendez vous sur la page de configuration du site.

Vous pouvez changer ici les paramètres principaux du site :

Nom du site

Nom du site qui apparaît dans l’en-tête.

Slogan

S’affiche à coté du nom du site en fonction des paramètres du thème.

Adresse de courriel

Adresse mail de l’administrateur du site. Cette adresse est aussi celle qui sera utilisée pour l’envoi des mails, par exemple lorsqu’un nouvel utilisateur est créé.

Nombre de contributions sur la page d’accueil

Nombre de résumés à afficher au maximum sur la page d’accueil. Au delà de cette limite, une pagination sera créée.

Page de garde par défaut

Entrez ici le chemin de la page d’accueil de votre site, soit avec une URL simplifiée, soit avec une URL complète.

Pages d’erreur

Permet de personnaliser les pages de redirection en cas d’accès refusé ou de page non trouvée

Position du nom du site et du slogan sur Bartik

information.eps

N’oubliez pas que cette page existe. Malgré sa simplicité, elle règle des paramètres que vous modifierez forcément un jour.
  1. Installation de modules (Captcha : évitez les robots malveillants)

Les modules sont des petits programmes qui permettent d’ajouter des fonctionnalités à Drupal. Dans le chap. I 2.5 Les modules, vous avez découvert comment Drupal fonctionnait avec des modules : vous avez activé le module Poll et installé les modules complémentaires Weather et BMI.

Dans ce chapitre, vous installerez le module Captcha et étudierez plus en profondeur son processus d’installation.

  1. Qu’est qu’un Captcha ?

Dans le chap. I — 2.4 — Gestion des permissions, vous avez autorisé les anonymes à poster des commentaires. Cela peut être une mauvaise idée car des robots malveillants peuvent poster un grand nombre de commentaires pour mettre votre site en difficulté. Pour cela, les sites affichent des Captcha que — théoriquement — seul les humains peuvent résoudre. Le module Drupal Captcha permet d’installer cette fonctionnalité.

Le formulaire Captcha pour les anonymes

  1. Recherche sur drupal.org

Comme il existe une très grande quantité de modules pour Drupal, il est parfois fastidieux de savoir lequel est le plus adapté à son besoin. Le site officiel drupal.org est d'une grande aide sur ce point et répertorie la majorité des modules Drupal. Vous avez utilisé l’outil de recherche de drupal.org dans la première partie, mais il existe d’autres pages utiles à la recherche.

La page Download & Extend

Page d’accueil des téléchargements pour Drupal

Cette page propose de lister l’ensemble des modules selon plusieurs critères :

Modules Categories

Affiche les modules par catégories. Attention, il appartient aux auteurs d’inscrire leur modules dans une catégorie et ils ne le font pas toujours. Captcha devrait apparaître dans la catégorie Security.

Filter by compatibility

Affiche les modules compatibles avec votre version.

Search modules

Recherche à partir du nom ou de la description du module.

Sort By

Critère de tri pour les résultats. Le critère Most installed trie les modules selon leur popularité.

Page d’un module

Chaque module possède sa propre page sur drupal.org, voici les sections qui la composent :

Description du module : un texte décrit le module. Il est éventuellement accompagné d’une copie d’écran. Une liste de modules complémentaires est proposée et éventuellement des liens vers de la documentation.

Informations et copie d’écran du module

Downloads : En bas de page, la liste des versions disponibles est présentée. Ici, il existe des versions stables du module pour la version 6.x de Drupal et des versions de développement pour les versions 6.x et 7.x. La dernière version disponible pour Drupal 7 est la 1.0-alpha2. Pour plus de renseignements sur les différentes versions du module, vous pouvez cliquer sur le lien View all releases. S’afficheront alors les anciennes versions du module.

Les différentes versions du module

Zone droite de la page : dans cette zone, plusieurs blocs affichent des informations relatives aux modules.

Maintainers for Captcha

Liste des personnes ayant fait le plus de développements pour le module.

Issues for Captcha

Les problèmes rencontrés par le module. Utilisez ce formulaire pour savoir si le problème que vous avez éventuellement rencontré est déjà signalé ou corrigé.

Recent issues

Derniers problèmes rencontrés avec le module.

Related projects

Autres modules en lien avec celui-ci.

Resources

Liens vers les pages de documentation, les traductions et les éventuels sites de test.

Development

Section pour les développeurs.
  1. Méthodes d’installation d’un module

Il s’agit maintenant d’installer le module.

Installation depuis une url

Cette méthode est la même que celle utilisée pour installer le module Weather.

Installation depuis une archive téléchargée

Ici, vous téléchargez d’abord l’archive du module puis, vous installez le fichier choisi.

Cette méthode peut être utilisée si la précédente ne fonctionne pas (problème au téléchargement).

Installation manuelle

Si aucune des méthodes précédentes ne fonctionne, vous devez installer le module manuellement.

Vous avez alors le choix entre plusieurs répertoires pour extraire le contenu de l’archive :

/sites/all/modules

Le module sera accessible depuis tous les sites présents sous votre instance de Drupal.

/sites/default/modules

Le module ne sera disponible que sur le site par défaut de Drupal.

/sites/exemple.fr/modules

Le module ne sera disponible que sur le site exemple.fr.

L’arborescence de Drupal : où décompresser les sources des modules ?

Dans cette illustration :

astuce.eps

Ce n’est pas parce qu’un module est accessible depuis tous les sites qu’il doit être activé sur tous les sites.

information.eps

Notez bien que chaque module possède son propre répertoire.

information.eps

N’ajoutez jamais de module au répertoire racine /modules de Drupal. Celui-ci n’est utilisé que pour les modules installés par défaut dans Drupal. Cela pourrait poser problème lors de la mise à jour de Drupal.
  1. Activation et dépendances

Votre module est à présent copié au bon endroit dans l’arborescence de Drupal, il faut l’activer.

Les deux modules de l’archive Captcha

information.eps

Une archive peut contenir plusieurs modules qui peuvent être activés séparément selon les besoins.

information.eps

Certains modules peuvent nécessiter d’autres modules pour fonctionner. Ces informations sur les dépendances des modules sont indiquées sur cette page grâce aux mentions Requiert et Requis par. C’est le cas de Image Captcha qui requiert Captcha.
  1. Page de configuration des modules

Après avoir activé un module, rechargez la page des modules pour savoir comment l’utiliser.

Les liens vers les pages du module

Maintenant qu’il est activé, le module Captcha propose trois opérations sous forme de liens :

Aide

Lien vers la page d’aide du module

Droits d’accès

Lien vers la section permettant de gérer les droits des utilisateurs sur le module

Configurer

Lien vers la page permettant de configurer le module

Sur cette page, s’affiche la liste des formulaires HTML (FORM_ID) présents sur le site. Pour chaque formulaire, il est possible d’associer un Captcha de type Math grâce à une liste déroulante.

Par exemple, pour ajouter un Captcha sur le formulaire qui permet d’ajouter un commentaire à un article :

Choix d'un Captcha pour un formulaire

Voyez si le Captcha fonctionne :

Le Captcha s’affiche alors si vous tentez de rentrer un nouveau commentaire.

information.eps

Le formulaire de commentaire n’est pas protégé par un Captcha si vous êtes connecté en tant qu’administrateur.
  1. Désactivation et désinstallation

Pour désactiver un module, il suffit de décocher sa case ACTIVE sur la page de liste des modules. En faisant cela, vous désactivez les fonctionnalités du module mais ses données resteront stockées dans la base de données.

Captcha créé deux tables lors de son activation. Lorsque vous le désactivez, ces deux tables restent dans la base de données. Pour les supprimer automatiquement, une autre action est nécessaire :

Désinstallation complète d’un module

  1. Le tableau de bord

Le tableau de bord vous informe sur l’état de santé et les performances de votre installation Drupal.

Allez sur la page du tableau de bord : 

Une partie du tableau de bord où quelques problèmes sont signalés

Ce tableau détaille la configuration de Drupal, signale les problèmes et donne des recommandations : les mises à jour disponibles du cœur de Drupal ou des modules installés, les numéros de versions des programmes Apache ou Php, les librairies, les droits d’accès aux systèmes de fichiers, etc. Dans l’illustration précédente :

Voici les sections principales du tableau de bord :

Drupal

Version de Drupal

Accès au fichier update.php

Normalement, ce fichier est protégé. update.php est un script qui permet de mettre à jour Drupal (chap. III — 3.2 Update status : mettre à jour de Drupal).

Effets de rotation et de désaturation de la bibliothèque GD

Numéro de version de GD. GD est un ensemble de fonctionnalités qui permettent de manipuler des images.

Fichier de configuration

Ce fichier (settings.php) doit être protégé car il contient des informations sensibles sur votre installation (mot de passe MySQL).

Mise à jour de la base de données

Lorsque vous mettez à jour Drupal ou des modules installés sur Drupal, il peut être nécessaire de modifier la structure de votre base de données. Dans ce cas, un message apparaîtra ici (chap. III — 3.2 Update status : mettre à jour de Drupal).

Notification des mises à jour

Indique si le module Update manager est activé ou non.

PHP

Version de PHP. Si vous cliquez sur le lien, la page phpinfo() s’affiche.

Plafond mémoire de PHP

Mémoire allouée par le système à PHP (memory_limit : chap. III — 1.2 Configuration de Php).

Serveur web

Nom et version du serveur web sur lequel Drupal est installé.

Statut de mise à jour des modules et thèmes

Notifie si de nouvelles versions de vos modules et thèmes externes existent.

Système de base de données

Version du système de base de données

Type de base de données et numéro de version.

Système de fichiers

Indique si votre répertoire sites/default/files est accessible en écriture.

Tâches de maintenance cron

Date de la dernière exécution de Cron (chap. III — 3.3 Le cron).

information.eps

Lors de l’activation de nouveaux modules, de nouvelles sections peuvent apparaître

Section du module Captcha du tableau de bord
  1. Thème d’administration / Overlay

Comme vous l’avez vu à la fin de la partie précédente, deux thèmes sont activés par défaut dans Drupal, le thème Bartik qui est le thème du visiteur et le thème Seven qui est le thème d’administration.

Bien souvent, les pages d’administration s’affichent sur un calque (Overlay)

Thème Seven en calque et thème Bartik en arrière plan

astuce.eps

Parfois le système de calque peut poser des problèmes, vous pouvez supprimer celui-ci en désactivant le module Overlay.

information.eps

Le thème qui s’affiche dans l’Overlay est le thème d’administration, il peut être modifié via le menu Apparence (en bas de la page, section Thème de l’administration).

  1. Help : les pages d’aide

Le module Help permet aux modules de Drupal de proposer des pages d’aide. Celles-ci sont centralisées dans le menu Aide. Lorsque vous installez un nouveau module, il y a de grandes chances qu’il ajoute une page ici.

Liste des pages d’aide du site

astuce.eps

À partir de la liste des modules (menu Modules), un lien direct vers la page est proposé si elle existe.

Lien Aide de chaque module
  1. 2 - Organisation du site
    1. Block : les blocs

Le chap. I — 2.3 Les blocs présentait la page qui permet de configurer les blocs dans Drupal. Voici les autres fonctionnalités proposées autour des blocs.

  1. Positionnement et régions des thèmes

Un bloc est une boîte qui permet d’afficher tous types d’informations et qui peut se positionner dans une région de la page.

Cette page possède autant d’onglets en haut à droite qu’il y a de thèmes activés.

Bartik, Danblog et Seven sont les trois thèmes activés du site

Vous pouvez activer et positionner les blocs différemment selon le thème. Un lien Aperçu des régions des blocs permet de visualiser quelles sont les régions de chaque thème.

Les deux régions du thème d’administration Seven

Les quinze régions du thème Bartik

Une liste déroulante propose de choisir parmi les régions du thème sélectionné où va se positionner le bloc.

Liste des régions disponibles pour le contenu récent du thème Bartik

  1. Les types de bloc

Voici la liste des blocs disponibles pour les modules activés par défaut :

Aide du système

Affiche un paragraphe d’aide lié à la page en cours. Cela est souvent le cas pour les pages d’administration.

Contenu de la page principale

Affiche le contenu de la page. Si c’est une page article, il affichera l’article, son image, ses tags, etc. Si c’est une page d’administration, il affichera le formulaire.

Contenu récent

Affiche les 10 derniers contenus ajoutés au site.

Connexion utilisateur

Permet aux utilisateurs de se connecter s’ils ne le sont pas. Ce bloc ne s’affiche pas si l’utilisateur est déjà connecté.

Commentaires récents

Affiche les 10 derniers commentaires du site.

Management

Bloc lié au menu Management qui contient les liens des tâches administratives

Menu principal

Bloc lié au menu Menu principal (onglets au dessus du contenu dans Bartik).

Navigation

Bloc lié au menu Navigation qui contient les liens destinés aux visiteurs du site.

Nouveaux membres

Affiche les derniers utilisateurs inscrits.

Propulsé par Drupal

Affiche un lien vers http://drupal.org (par défaut dans le pied de page)

Syndication

Affiche un lien vers les flux RSS de la page.

Sélecteur de langue

Permet de sélectionner la langue du site.

User menu

Liens vers le compte de l’utilisateur connecté et lien pour se déconnecter du site.

Utilisateurs en ligne

Ce bloc affiche le nombre d’utilisateurs connectés et leur nom.

information.eps

Cette liste peut s’enrichir lors de l’activation de nouveaux modules (exemple : sondage le plus récent pour le module Poll).
  1. Les options des blocs

Chaque bloc possède une page de configuration.

Les options du bloc contenu récent

Titre du bloc

Modifier le titre du bloc lorsqu’il s’affiche (et non dans l’interface d’administration).

Nombre d’éléments de contenu récent à afficher

Paramètre spécifique au bloc.

Paramètres de la région

Affichage du bloc pour chacun des thèmes activés.

En partie basse de la page de configuration, quatre onglets horizontaux permettent de gérer la visibilité des blocs selon les modes d’affichages.

  1. Pages

    Afficher ou ne pas afficher le bloc selon l’URL de la page. Attention, le chemin node/* inclut les chemins contenant quelque chose après node (node/2 est inclu mais node seul n’est pas inclu)

    Types de contenu

    Afficher le bloc uniquement pour certains types de contenu.

    Rôles

    Afficher le bloc uniquement pour les utilisateurs possédant un certain rôle.

    Utilisateurs

    Permettre aux utilisateurs de choisir si ils veulent ou non afficher ce bloc dans leurs préférences.

astuce.eps

Vous pouvez accéder à la page d’administration d’un bloc lorsqu’il est affiché sur une page grâce à un menu contextuel.

Menu contextuel des blocs
  1. Ajouter un bloc personnalisé

Vous allez maintenant ajouter un bloc personnalisé qui affichera un message de bienvenue.

À partir de cette page, vous pouvez créer un nouveau bloc et y ajouter le contenu que vous désirez.

Page de création d’un bloc

Le bloc de Bienvenue nouvellement créé

  1. Menu : les menus
    1. Menus installés par défaut

Les menus sont des listes de liens qui peuvent être personnalisées et ensuite affichés dans des blocs.

Liste des menus du site

Par défaut, il y a quatre menus dans Drupal :

Management

Liste les pages d’administration disponibles pour l’administration du site.

Par défaut affiché dans la barre de menu en haut de page (Tableau de bord, Contenu, etc.)

Menu principal

Onglets affichés par défaut au dessus du contenu dans Bartik (Home, Salade de penne, etc.)

Navigation

Liste des pages d’administration disponibles en fonction des droits de l’utilisateur connecté

User menu

Menu destiné à être affiché dans le bloc utilisateur, qui permet de se déconnecter et d’accéder à son compte

Les quatre menus de Drupal

  1. Créer un menu en ajoutant du contenu

Vous pouvez ajouter des éléments à des menus directement lors de la création d’un contenu grâce à l’onglet Paramètres du menu comme vous l’avez fait au chap. I — 2.2 Les menus.

L’onglet Paramètres du menu disponible lors de la création d’un contenu

  1. Création d’un nouveau menu

Vous allez créer un nouveau menu dans lequel vous ajouterez quelques liens.

Votre menu est alors créé, il faut maintenant lui ajouter quelques liens

information.eps

La description est l’attribut title du lien et s’affiche au survol de la souris.

Le title des liens

Ajout d’un item à un menu

De la même manière, ajoutez ces autres liens :

Titre

Chemin

Description

Drupal en français

http://www.drupalfr.org

Le site web des drupaliens francophones

Drupal

http://www.drupal.org

Site officiel Drupal

Plats principaux

taxonomy/term/1

Liste des plats principaux du site

Risotto

node/2

Salade de penne

node/1

information.eps

Le chemin des trois derniers liens internes peuvent être différents sur votre site. Vérifiez leur URL en allant sur les pages concernées.

Les 5 liens du menu Liens divers

  1. Affichage du menu dans un bloc

Pour chaque menu créé correspond un bloc du même nom que vous allez afficher à gauche du contenu (région Première barre latérale).

astuce.eps

Les menus contextuel d’un bloc lié à un menu contiennent des raccourcis pour lister les liens et configurer le menu.

Menu contextuel d’un bloc de menu
  1. Hiérarchiser un menu

Vous pouvez changer l’ordre des menus mais également les hiérarchiser. Par exemple, vous pouvez indiquer que les liens Risotto et Salade de penne sont les enfants du lien Plats principaux.

Hiérarchisation des liens du menu

Liste des plats principaux repliés

Vous pouvez afficher ce menu déplié par défaut pour qu’il affiche ses liens enfants.

Options des menus

Menu hiérarchisé déplié

astuce.eps

L’option Activé permet de ne pas afficher un lien tout en le gardant dans le menu.
  1. User : gestion des utilisateurs

Drupal est un outil qui permet de créer des sites communautaires dont le contenu est enrichi par différents utilisateurs. Drupal dispose donc de fonctionnalités avancées qui permettent au webmaster de gérer les utilisateurs de son site.

Dans ce chapitre, vous découvrirez les différentes méthodes qui vous sont offertes pour créer de nouveaux comptes utilisateurs. Ensuite, vous apprendrez à gérer les droits d’accès : vous attribuerez à chacun de vos utilisateurs des rôles qui leur permettront d’avoir accès seulement à certaines fonctionnalités.

  1. Ajout d’utilisateurs

Il existe par défaut deux utilisateurs : l’administrateur du site, qui a tous les droits, et l’utilisateur anonyme, ou utilisateur non authentifié, qui a des droits limités par défaut.

Vous pouvez consulter sur cette page la liste des utilisateurs du site.

L’utilisateur Anonyme n’apparaît pas dans cette liste car il n’est pas possible de le modifier.

Remplissez alors le formulaire :

information.eps

L’option Notifier à l’utilisateur la création de son nouveau compte envoie un mail à l’adresse Adresse de courriel

Ajout d’un utilisateur manuellement

Retournez dans la liste (menu Personnes), Utilisateur1 devrait apparaître.

Liste des utilisateurs

  1. Configuration de l’inscription des utilisateurs

Comme c’est souvent le cas pour les sites communautaires, les visiteurs peuvent se créer un compte automatiquement.

Cette page sert à configurer le processus de création des comptes et les messages envoyés à cette occasion.

Inscription

Les différentes façons de créer un compte avec Drupal

Seulement les administrateurs

Si vous choisissez cette option, la ligne «Créer un nouveau compte» du bloc Connexion utilisateur n’apparaîtra plus. Seul les ajouts manuels seront autorisés (comme vous l’avez fait pour l’utilisateur1).

Visiteurs

Un visiteur anonyme peut se créer un compte et l’utiliser immédiatement.

Les visiteurs, mais l’approbation d’un administrateur est requise

Un utilisateur anonyme pourra créer un compte mais il sera inactif par défaut. Seul l’administrateur du site pourra l’activer.

information.eps

Lorsque les visiteurs créent eux-mêmes leur compte, vous pouvez cocher l’option Exiger la vérification de l’adresse de courriel. Le nouvel utilisateur devra alors utiliser un lien temporaire contenu dans le mail pour activer le compte.

astuce.eps

Vous pouvez proposer à vos utilisateurs d’ajouter à leur profil un portrait ou une signature à la section Personnalisation. Cependant, je vous conseille plutôt d’utiliser les champs personnalisés qui proposent un système plus souple et plus personnalisable (chap. II — 4 Field UI : Types de contenus personnalisés).

Courriels

En bas de page, différents onglets horizontaux permettent de personnaliser le contenu des mails envoyés.

Bienvenue (nouvel utilisateur créé par un administrateur)

Mail envoyé lorsque l’administrateur créé un compte manuellement (option de création : Seulement les administrateurs)

Bienvenue (en attente d’approbation)

Mail envoyé lorsque l’utilisateur a créé un compte mais qu’il est encore inactif. (Option de création : Visiteurs avec approbation)

Bienvenue (aucune approbation requise)

Mail envoyé lorsque l’utilisateur a créé un compte (option de création : Visiteurs)

Activation du compte

Mail envoyé lorsque l’administrateur active le compte (option de création : Visiteurs)

Compte bloqué

Mail envoyé lorsque l’administrateur coche l’option Bloqué d’un compte

Confirmation de l’’annulation du compte

Mail envoyé pour demander la confirmation de l’annulation d’un compte

Compte annulé

Mail envoyé lorsque le compte est effectivement annulé

Récupération de mot de passe

Mail envoyé lorsque l’utilisateur clique sur le lien Demander un nouveau mot de passe du bloc Connexion utilisateur

information.eps

Cette page permet la modification du nom de l’utilisateur anonyme et du rôle de l’administrateur (vous découvrirez les rôles plus loin dans ce chapitre).

astuce.eps

Vous pouvez placer des variables (ou jetons) de type [user:name] dans le corps de vos mails qui seront remplacés par une valeur selon le contexte (nom de l’utilisateur pour user:name).
  1. Les rôles des utilisateurs

Chaque utilisateur de Drupal peut être affecté à un ou plusieurs rôles. Les rôles donnent ensuite des droits d’accès permettant d’exécuter des actions.

utilisateur_6.pngUn utilisateur est affecté à un rôle qui possède des droits

Création d’un rôle

Ici s’affiche la liste de rôles.

Par défaut, il existe trois rôles spéciaux : utilisateur anonyme (pour tous les visiteurs du site non authentifiés), utilisateur identifié (pour tous les utilisateurs ayant un compte) et administrator qui est le rôle de l’utilisateur créé durant l’installation de Drupal.

Liste des rôles

Attribution d’un rôle à un utilisateur

Vous allez maintenant attribuer le rôle Rédacteur de recettes à utilisateur1.

astuce.eps

Il est possible, sur la page Personnes de sélectionner une liste d’utilisateurs et d’ajouter ou de supprimer des rôles. Cela évite à l’administrateur d’entrer le mot de passe de l’utilisateur.

Attribution d’un rôle à un ensemble d’utilisateurs
  1. Droits d’accès en fonction des rôles

Cette page permet de configurer les droits d’accès de chaque rôle. Il y a une colonne par rôle.

Chaque module défini ses propres droits. Vous allez permettre aux utilisateurs Rédacteur de recettes de créer de nouveaux articles pour pouvoir ajouter des recettes. C’est le module Node qui gère ces permissions :

Droits d’accès selon les rôles

Vérifiez que l’utilisateur1 peut bien créer un article :

Connectez-vous avec l’utilisateur utilisateur1 :

L’utilisateur a les droits pour créer un article

astuce.eps

Chaque module possède ses propres droits d’accès, n’oubliez pas qu’il existe un lien Droits d’accès sur la page des modules qui vous positionnera à la bonne section de la page des droits d’accès

Lien droits d’accès de Captcha

Droits d’accès définis par le module Captcha

astuce.eps

Vous pouvez vous connecter avec deux utilisateurs en même temps sur un même ordinateur en utilisant deux navigateurs différents (Firefox et Internet Explorer par exemple).
  1. Exercice : création d’un bloc pour un rôle spécifique

Le bloc à créer

Corrigé

Création de utilisateur2

Remplissez alors le formulaire :

Création du bloc

Paramètre de visibilité du bloc

information.eps

Le bloc s’affiche pour utilisateur1 car il possède le rôle Rédacteur de recettes ET utilisateur identifié. Pour la même raison, il s’affiche également pour utilisateur2.
  1. Path : url de vos pages

Les URL de Drupal tels que ?q=node/2 (lien vers la node n°2) ou ?q=taxonomy/term/1 (lien vers le tag n°1) ne sont pas très explicites.

Grâce au module Path, vous pouvez créer des Alias d’URL qui permettent par exemple de faire correspondre ?q=node/2 à ?q=risotto pour améliorer la navigation et le référencement.

  1. Installation
  1. Utilisation

Création d’un alias d’URL pour un contenu

L’URL de votre contenu devient alors ?q=risotto.

Puce module.eps

Il est possible de supprimer le ?q= en utilisant les URL simplifiées (xxx : Activez les URL simplifiés)
  1. Administration

Une page permet d’administrer l’ensemble des alias et d’en ajouter de nouveaux :

Ici est listé l’ensemble des alias du site.

Repérez l’URL de la page de listes des recettes contenant le tag Riz (de type ?q=taxonomy/term/3). Vous allez lui créer un alias ?q=riz.

Ajout d’un alias

Le nouvel alias créé

Puce module.eps

Chap IV — 4.3 Pathauto : Automatisez la création de vos Alias
  1. 3 - Ajout de contenu

Dans ce chapitre vous verrez comment les différents utilisateurs de votre site vont pouvoir y ajouter du texte et comment ils peuvent le mettre en forme facilement et l’agrémenter (ajout d’images ou de vidéos).

  1. Les types de contenu

Rendez vous sur la page d’ajout de contenus :

Il existe par défaut dans Drupal deux types de contenu : Article et Page de base qui possèdent quelques différences :

Par exemple, pour un site de nouvelles, on créera un contenu de type Page pour présenter le site. Par contre, pour les nouvelles proprement dites, on choisira un contenu de type Article qui permettra aux lecteurs de laisser des commentaires, d’afficher les nouveaux articles sur la page d’accueil, etc.

En activant des modules, de nouveaux types de contenu peuvent s’ajouter à la liste comme cela s’est passé pour le module Poll (ajout du type de contenu Sondage).

information.eps

Qu’est ce qu’une node ?

Vous rencontrerez (ou avez déjà rencontré) régulièrement le mot Node en utilisant Drupal, alors qu’est-ce qu’une node ?

Une node dans Drupal est un contenu de n’importe quel type

  • article ;
  • page ;
  • sondage ;
  • etc.

Cela ne veut pas dire que tout est une node dans Drupal :

  • un commentaire n’est pas une node mais est attaché à une node ;
  • une page d’administration n’est pas une node.

Puce module.eps

Le chap. II — 4 Field UI : Types de contenus personnalisés, montre comment créer vos propres types de contenu en utilisant l’interface de Drupal.
  1. Options des nodes

Ici des onglets horizontaux permettent de régler les paramètres de l’article.

Paramètres du menu

Permet de lier un menu au contenu.

Informations sur les révisions

Les révisions sont des versions de l’article. Vous pouvez modifier l’article tout en conservant son ancienne version et y revenir ensuite grâce à l’onglet révision de la node.

Ajout d’une révision

Lors de l’affichage de la node, l’onglet Révisions permet de revenir à une ancienne révision.

Liste des révisions d’une node

Paramètres du chemin d’URL

Permet de modifier l’URL de l’article (chap II - 2.4 Path : Url de vos pages).

Paramètres des commentaires

Gère les commentaires. Vous pouvez par exemple interdire les commentaires sur cet article bien que le type de contenu les autorise.

Information de rédaction

Permet de modifier le nom de l’auteur de l’article ainsi que sa date de rédaction.

Changement d’auteur pour l’article

Options de publication

Permet de publier ou non l’article, de le mettre en page d’accueil ou de l’épingler en haut de la page d’accueil.

astuce.eps

Si vous êtes en cours de rédaction d’un article, il peut être utile de ne pas le publier pour que vos visiteurs ne puissent pas le consulter.

Les onglets horizontaux d’un type de contenu

astuce.eps

Les onglets horizontaux dans Drupal possèdent un court résumé des paramètres définis.

Les options de publications sont «Publié et Promu» en page d’accueil
  1. Options des types de contenus

S’affiche la liste des contenus disponibles pour votre site. Vous pouvez régler les options par défaut de chaque type de contenu. Les nouvelles nodes de ce type sont alors créées avec ces paramètres.

Il est possible de changer le Nom et la Description de l’article.

Nom et description de l’article

Affichage du nom et de la description lors de l’ajout de contenu

En bas de page, des onglets horizontaux permettent de modifier le comportement par défaut des nouveaux articles du site.

Paramètres du type de contenu article

Paramètres du formulaire de contribution

Permet de modifier le libellé du titre et de régler les paramètres de l’aperçu avant soumission.

Options de publication

Paramètres des Options de publications (Publié, Promu en page d’accueil, Epinglé en haut des listes) par défaut des nouvelles nodes de ce type de contenu. Vous pouvez également forcer la création de nouvelles révisions à chaque modification en cochant Créer une nouvelle révision.

Permet également de régler la gestion multilingue.

Paramètres d’affichage

Indique si le nom de l’auteur et la date doivent être affichés lors de la consultation de ce type de contenu.

Paramètres des commentaires

C’est ici que se configure le module Comments de Drupal qui gère les commentaires.

Paramètres du menu

Permet de définir un menu par défaut et de réduire le nombre de menus disponibles pour le contributeur.

astuce.eps

Cette page contient donc des paramètres très importants pour la gestion des types de contenus. N’oubliez pas qu’elle existe !

  1. Filter : formatez vos textes
    1. Utilisation des formats de texte

Lors de la création de vos recettes, vous n’avez pas mis en forme le texte du Corps de votre article. Voici comment mettre en gras et souligner certains textes d’une recette.

Des balises html peuvent être utilisées pour la présentation de votre recette :

information.eps

Les balises HTML sont des commandes interprétées par les navigateurs internet. Elles sont saisies entre les signes < et >. En général, les balises de début (exemple : <strong>) ont une balise de fin (</strong>)

Une balise HTML dans le corps du texte

Mise en gras d’une ligne

Modification du format de texte

La mise en gras ne fonctionne plus

Les formats d’entrées permettent donc d’autoriser l’interprétation de certaines balises ou motifs dans votre contenu.

Il existe par défaut 3 formats d’entrées : Filtered HTML, Full HTML et Plain Text. Full HTML interprète l’ensemble de balises HTML, Filtered HTML est moins permissif et donc plus sécurisé, Plain text autorise le minimum de balises HTML.

Cliquez sur le lien Plus d’informations sur les formats de texte en dessous d’une zone de texte pour connaître les balises acceptées par les formats disponibles.

Extrait de la page d’aide du format Filtered HTML

  1. Exercice : ajoutez du code php dans vos nodes

Le module PHP filter ajoute un format de texte PHP code qui donne la possibilité d’exécuter du code PHP dans le contenu.

Affichage de la date et de l’heure courante dans une node grâce à PHP

information.eps

La fonction PHP date (http://php.net/manual/fr/function.date.php) permet de retourner la date et l’heure courante :

Pour afficher le jour, le mois et l’année :

<?php echo date('d-m-Y') ?>

Pour afficher l’heure et les minutes

<?php echo date('H:i') ?>

Corrigé

Activation du module

Création de l’article

Bonjour !

Nous sommes le <?php echo date('d-m-Y') ?> et il est <?php echo date('H:i') ?>

Du code PHP dans le corps de l’article

  1. Ajouter un filtre à un format de texte

Si le format Full HTML est utilisé pour l’article précédemment créé, voici le résultat obtenu :

Full HTML

Après la première ligne, le retour à la ligne fonctionne, par contre, c’est sans surprise que les balises <?php ?> ne sont pas évaluées.

Un format de texte est composé de filtres qui évaluent ou n’évaluent pas des balises. Voici de quels filtres est composé le format FullHTML :

Liste des formats de texte disponibles

Cette page permet de configurer le format de texte. La section Filtres activés, liste l’ensemble des filtres installés.

Les filtres de Full HTML

Limiter les balises HTML autorisées

Autorise seulement quelques balises. Ce filtre est utilisé pour le format Filtered HTML

Affiche les fichiers HTML au format texte

Aucune balise HTML autorisée. Ce filtre est utilisé pour le format Plain text

Convertir les sauts de ligne en HTML

Le filtre détecte les sauts de ligne dans la zone de texte et les remplacent par des balises HTML (<br> pour retour à la ligne et <p> pour création de paragraphe)

Convertir les URL en liens

Transforme les chaines de type http://www.atelierdrupal.net en <a href="http://www.atelierdrupal.net">http://www.atelierdrupal.net</a> (détecte également les adresses mail)

Corriger le HTML défectueux ou coupé

Lorsqu’une balise n’est pas reconnue, elle est supprimée

Vous pouvez ensuite modifier l’Ordre de traitement des filtres. Par exemple, le filtre Corriger le HTML défectueux ou coupé va modifier la balise <?php ?> et interpréteur PHP ne pourra l’évaluer, provoquant ainsi une erreur. Donc si interpréteur PHP est situé en dernier, le code php ne sera pas évalué.

Full HTML interprète les balises PHP

  1. Droits d’accès aux formats de texte

Une mauvaise configuration des formats de texte constitue un risque de sécurité. Certaines balises permettent d’inclure des liens ou des scripts malicieux, il est donc fortement conseillé de limiter l’accès aux formats de texte permissifs aux utilisateurs de confiance.

Vous pouvez gérer les droits sur la page de configuration des formats de texte

astuce.eps

Le lien Configurer du module Filter permet d’accéder directement à cette page.

Accès à la page de configuration de Filter

En haut de cette page, vous pouvez choisir les rôles qui pourront utiliser le format de texte.

Rôles pouvant utiliser Full HTML

La section Filter de la page des droits d’accès présente une vision plus globale des permissions.

Liste des droits d’accès des formats de texte

information.eps

Pour la suite de ce livre, le format de texte PHP Filter sera désactivé
  1. Video filter : affichez des vidéos dans votre contenu

Le module Video filter permet d’insérer un lien vers les vidéos des sites de partage de type Youtube, DailyMotion, Vimeo, etc.

Video Filter ajoute à votre installation un nouveau filtre Video Filter que vous allez ajouter au format d’entrée Full HTML.

S’affiche alors la liste des formats de texte présents sur le site.

Page de configuration d’un format de texte

information.eps

L’ordre de traitement des filtres est important. Ici, si Convertir les URL en liens traite le lien Vidéo avant Vidéo Filter, il modifie sa syntaxe et la vidéo ne s’affiche pas.

astuce.eps

Remarquez en bas de page les onglets horizontaux qui permettent de modifier les paramètres de certains filtres activés (taille des vidéos par exemple).

Paramètres des filtres

Vous allez maintenant ajouter une vidéo dans le Corps de votre article.

information.eps

Ici, le filtre n’est donc plus une balise HTML.

Ajout d’un lien vers une vidéo

astuce.eps

Le texte d’aide en dessous du format de texte est celui des différents filtres qui lui sont associés. Vérifiez bien qu’après avoir choisi Full HTML, le texte You may insert videos with [video:URL] apparaît bien en tête de liste.

Le contenu intègre une vidéo !

  1. Wysiwyg : installer un éditeur Wysiwyg

Installer un éditeur Wysiwyg (What You See Is What You Get — Ce que vous voyez est ce que vous avez)permettra aux utilisateurs qui ne connaissent pas la syntaxe HTML de mettre en forme facilement leur texte.

Exemple d’éditeur Wysiwyg

  1. Configuration de Wysiwyg

Contrairement à ce que son nom peut laisser penser, le module Wysiwyg ne contient pas d’éditeur Wysiwyg. Il permet seulement d’installer facilement l’un des nombreux éditeurs existants.

S’affiche alors la liste de tous les éditeurs supportés par le module, aucun n’est installé pour le moment.

Cependant, Wysiwyg indique où les télécharger et leurs chemins d’installation.

  1. Installation de l’éditeur openWYSIWYG

openWYSIWYG est un éditeur léger et open source. Voici les directives du module Wysiwyg pour installer cet éditeur :

Les directives d’installation de openWysiwyg

Wysiwyg affiche un lien direct vers la page de téléchargement (Télécharger) et indique dans quel répertoire il faut l’extraire.

information.eps

Les éditeurs Wysiwyg sont des programmes Javascript, voila pourquoi Wysiwyg va chercher à localiser un fichier .js (wysiwyg.js)

Wysiwyg a trouvé l’éditeur

Le module Wysiwyg a détecté qu’un éditeur est disponible, il permet alors d’associer chaque format avec cet éditeur.

information.eps

Si cela ne fonctionne pas, c’est sans doute que le chemin d’accès est faux. Vérifiez que vous n’avez pas un répertoire librairies au lieu de libraries et que le fichier .js est bien à l’endroit indiqué par Wysiwyg.
  1. Création d’un nouveau format de texte pour l’éditeur

Wysiwyg permet donc maintenant d’associer un format de texte avec un éditeur. Comme il est préférable de conserver les formats existants, vous allez créer un nouveau format openWysiwyg qui sera associé avec l’éditeur.

Le nouveau format d’entrée

Il faut maintenant associer l’éditeur au Format de texte openWysiwyg.

Vous pouvez configurer le comportement de votre éditeur pour ce format d’entrée.

Configuration de l’éditeur pour le format d’entrée

Une page contenant cinq sections s’affiche alors :

Paramétrage de base

Permet de modifier la langue (si la traduction est disponible) et de configurer l’activation de l’éditeur

Boutons et plugins

Permet d’ajouter ou de supprimer des boutons dans la barre d’outils

Apparence de l’éditeur

Permet de modifier l’aspect de la barre d’outils

Nettoyage et sortie

Directives de traitement du code HTML

CSS

Ajouter du code CSS spécifique pour l’éditeur

Par défaut, aucun bouton n’est activé, la barre d’outils de l’éditeur sera donc vide :

Boutons disponibles de openWysiwyg

Il est maintenant temps de voir le résultat de votre travail :

Une barre d’outils doit apparaître en haut de la zone de texte.

La zone de texte et openWysiwyg

Le texte mis en forme

information.eps

N’oubliez pas que le format de texte créé est très permissif, autorisez seulement des utilisateurs de confiance à l’utiliser
  1. 4 - Field UI : types de contenus personnalisés

Le type de contenu qui permet d’ajouter un article est composé de champs (fields) de différents types. Dans ce chapitre, vous allez découvrir comment paramétrer chacun de ces trois champs :

Ensuite, dans la deuxième partie, vous créerez votre propre type de contenu Recette, composé de ses champs spécifiques. Après avoir créé ce type de contenu, Drupal proposera alors une interface de saisie conviviale pour les nouvelles recettes et permettra de configurer l’affichage des champs.

Enfin, vous verrez comment paramétrer efficacement la Taxonomie et comment ajouter des champs à d’autres entités (termes de taxonomie, utilisateurs et commentaires).

  1. Découverte du type de contenu article

Avant de créer votre propre type de contenu, vous allez découvrir ce qui compose le type article que vous avez déjà utilisé.

  1. Modifier l’image liée à l’article

Il est possible d’ajouter à chaque article une image. Grâce au module Field, ce champ peut entièrement se configurer.

Les différentes opérations possibles sur un type de contenu

Deux éléments peuvent être modifiées graphiquement par l’administrateur Drupal :

information.eps

Le lien modifier, qui permet de gérer les options d’un type de contenu, a été étudié au chapitre chap. II — 3.1.1 Options des nodes

Page de gestion des champs de l’article

La liste des champs de l’article s’affiche. Voici une description de chaque colonne du tableau :

Etiquette

C’est le nom du champ tel qu’il sera affiché à l’écran pour le visiteur et le rédacteur. La croix précédent ces étiquettes permet de d’ordonner les champs.

Nom

Nom du champ machine pour Drupal (nom sans espace et sans majuscule)

Champ

Type du champ

Widget

Type d’élément utilisé pour le formulaire (liste déroulante, case à cocher, zone de texte, etc.)

Opérations

Le lien modifier permet d’accéder à la page de configuration du champ

Modification de l’affichage de l’image dans la node

Voici comment s’affiche l’image d’un article par défaut :

Image du Croque-Hawaï sur la page de la recette

Image du Croque-Hawaï sur la page d’accueil

L’image apparaît en grande taille sur la page de l’article et en taille moyenne sur la page d’accueil.

Vous allez modifier cet affichage pour que la photo soit en taille moyenne sur la page de l’article et n’apparaisse plus sur la page d’accueil.

S’affiche alors la liste des champs du type de contenu (sauf le titre qui est un champ à part). Voici une description de chaque colonne du tableau.

Gestion de l’affichage des champs d’un article

Champ

C’est le nom du champ tel qu’il sera affiché à l’écran pour le visiteur et le rédacteur. La croix précédent cette étiquette permet de réordonner l’affichage des champs.

Etiquette

Indique si nom du champ doit être affiché et s’il doit être sur la même ligne ou au-dessus

Format

Affiche sous quelle forme le champ doit s’afficher.

Pour une date, on pourra choisir l’ordre des jours-mois-année, pour un numérique, le nombre de chiffres après la virgule, pour une image sa taille, etc.

Puce module.eps

Chap. IV — 4.5 Image : créez des styles d’image personnalisés

information.eps

La liste Lier l’image à indique le comportement que Drupal doit avoir lorsque l’image est cliquée.

  • Rien : l’image n’est pas cliquable ;
  • Contenu : l’image renvoie vers la node complète ;
  • Fichier : l’image est affichée seule, dans sa taille originale.

Changement du format de l’image

Allez sur votre page du Croque Hawaï et vous pourrez constater que l’image s’affiche maintenant en medium et qu’un clic affiche l’image dans sa taille originale.

Les modes d’affichage

Lorsque vous affichez la page d’accueil, les nodes s’affichent sous forme de résumé. Le but est ici de ne plus faire apparaître les images dans les résumés.

Les contextes d’affichage d’un article

Photo de la recette est maintenant caché

Le champ Photo de la recette se positionne maintenant dans la section Caché.

Allez sur votre page d’accueil et vous pourrez constater que les images des articles ne s’affichent plus dans les résumés.

information.eps

Vous avez utilisé les modes d’affichages Par défaut et Résumé, mais de nouveaux modes peuvent être ajoutés lors de l’activation de nouveaux modules. Ces modes peuvent être activés en bas de page.

Liste des modes d’affichage d’un article

information.eps

Le mode d’affichage Par défaut est utilisé lorsque le module qui affiche la node ne trouve pas d’autres modes activés. C’est pourquoi en modifiant ce mode, l’image s’est affichée en style Medium en affichage de contenu intégral.

Si vous activez le mode Contenu intégral et que vous affichez la node des Croque Hawaï, le style large sera à nouveau utilisé.

Modification du formulaire d’ajout d’image

Vous allez maintenant changer quelques paramètres du formulaire qui permet au rédacteur d’ajouter une image à un article.

Formulaire par défaut pour télécharger une image dans un article

S’affiche alors la longue page de configuration du champ image :

Section commune à tous les champs

Modifiez les paramètres comme ceci :

Paramètres du fichier image

Paramètre de l’image

information.eps

La balise HTML <img> se présente sous cette forme :

<img src="mecontent.gif" alt="Tête mécontente" title="Je suis mécontent"/>

L’attribut src est le chemin vers le fichier, alt est le texte à afficher si l’image n’est pas trouvée, title est un texte qui s’affiche au survol de l’image par la souris.

Puce module.eps

La section Paramètres du champ Photo de la recette sera étudiée plus tard dans ce chapitre.

Nouvelles directives du formulaire de contribution

Les champs Alt et Titre et l’apercu en taille medium

  1. Exercice : modification du champs Corps

À l’affichage d’un article, faites en sorte que la longueur du résumé soit limitée à 100 caractères.

Résumé d’une recette coupée à 100 caractères

Modifiez le formulaire qui permet de saisir le Corps du texte ainsi :

Résultat attendu

Corrigé :

Faites en sorte que la longueur du résumé soit limitée à 100 caractères

Modification de la longueur du résumé

Vous pouvez vérifier sur la page d’accueil que les résumés contiennent bien 100 caractères.

Modifier le formulaire

Création d’une valeur par défaut pour le champ Body

  1. Les widgets du champ Tags

Les widgets sont des éléments visuels de l’interface graphique (bouton, liste déroulante, zone de texte, etc.). Il est possible modifier ce widget en fonction du besoin.

Voici par exemple les types de widgets disponibles pour le champ Tags du type de contenu article :

Widget d’auto complétion

Liste de sélection

Cases à cocher

Voici comment choisir le widget à utiliser :

Changement de widget pour un champ

Vous pouvez alors choisir le widget à utiliser pour ce type de contenu.

Choix d’un widget pour le Tag

Vous avez modifié le comportement et l’affichage des champs du type contenu Article. Vous êtes maintenant prêt à créer votre propre type de contenu personnalisé.

  1. Création d’un nouveau type de contenu

Pour ajouter des recettes à votre site, vous avez jusqu’à maintenant utilisé le type de contenu article. Vous allez maintenant créer un nouveau type de contenu sur mesure contenant ces champs :

information.eps

Pourquoi créer un type de contenu spécifique pour ajouter des recettes alors qu’il est possible d’ajouter le prix, les ingrédients, etc. dans le corps de l’article ?

  • pour simplifier la tâche du rédacteur afin qu’il se concentre uniquement sur la rédaction de sa recette ;
  • pour uniformiser la présentation et pouvoir la modifier sans avoir à éditer toutes les nodes ;
  • pour pouvoir effectuer des tris (exemple : tris par prix) et des filtres (exemple : lister les recettes contenant une photo).
  1. Création du type de contenu recette

Avant d’ajouter des champs, il faut commencer par créer le nouveau type de contenu :

information.eps

Le formulaire qui permet de gérer les options d’un type de contenu a été détaillé au Chap. IV - 3.1.1 Options des nodes.

Paramètres du type de contenu

Le nouveau type de contenu Recette est créé et ajouté dans la liste des types de contenu.

Un type de contenu comporte par défaut deux champs, le Titre et le Corps. Le corps (Body) servira de texte de présentation de la recette. Il faut donc modifier le champ en conséquence :

information.eps

Si un paramètre du champ Body ne vous convient pas, il est possible de le supprimer de la liste des champs. Le champ Titre lui, est obligatoire.
  1. Ajout d’un champ numérique (temps de préparation)

Les rédacteurs de recettes pourront indiquer le temps qu’il faut (en minutes) pour la confectionner grâce à ce champ.

Dans l’onglet Gérer les champs du type Recette :

Ajout d’un nouveau champ à un type de contenu

La page de configuration du champ numérique s’affiche alors.

Le champ est ajouté à la liste.

Concernant l’affichage, il est préférable que l’étiquette soit sur la même ligne :

Etiquette Au-dessus

Etiquette sur la même ligne

Il s’agit maintenant de tester ce nouveau type de contenu en ajoutant une recette.

information.eps

La recette de 1001recettes choisie pour illustrer les copies d’écrans suivantes est celle des «Gnocchis à la courge, sauce mandarine et parmesan»
(http://1001recettes.blogspot.com/2011/02/cest-pas-de-la-chiclette-cette-recette.html)

Formulaire d’ajout d’un contenu de type recette

Affichage d’une recette sur le site

astuce.eps

Dans l’onglet Gérer les champs vous pouvez ordonner les champs par simple glisser/déposer. Il serait par exemple judicieux de mettre le champ Temps de préparation juste après le titre.

Modification de l’ordre des champs
  1. Ajout d’un champ texte multiple (ingrédients)

Le rédacteur devra saisir un ingrédient par ligne. Comme une recette possède plusieurs ingrédients, ce champ sera de type texte multiple : Le rédacteur pourra ajouter autant de lignes que nécessaire grâce à un bouton.

La page de configuration d’un champ texte s’affiche alors.

Modifiez la recette des gnocchis et ajoutez les ingrédients.

Zone de texte avec nombre de valeurs illimité

information.eps

Vous pourrez ensuite, dans votre gabarit de thème, mettre cette liste en forme.
  1. Exercice : ajout d’un champ numérique (prix)

Affichage du champ prix par personne

Corrigé :

Ajouter un champ permettant aux rédacteurs de saisir le prix par personne de leur recette

La page de configuration d’un champ numérique s’affiche alors.

Ce champ doit apparaître dans le résumé

Il devra avoir le rendu suivant et devra être positionné juste après le temps de préparation

Pour réorganiser les champs :

Pour modifier le rendu :

Affichage du résumé

  1. Exercice : ajout d’un champ zone de texte multiple (étapes)

Formulaire d’ajout des étapes

Les différentes étapes dans la node

Corrigé :

La page de configuration d’un champ texte s’affiche alors.

Pour pouvoir changer le format de texte par défaut, il faut ré-éditer le champ.

Modification du format d’entrée par défaut d’une zone de texte

L’affichage de ce champ proposé par défaut convient, il ne faut pas le modifier.

  1. Ajout du champ photo de l’article

Vous pouvez utiliser un même champ pour différents types de contenu. Pour illustrer le type de contenu recettes, vous allez ajouter le champ photo des articles.

À la section Ajouter un champ existant :

Ce champ s’appelle Photo de la recette car vous avez modifié son étiquette.

Ajout d’un champ existant

information.eps

L’intitulé du champ field_image (Photo de la recette) a été modifié au chap. II — 4.1.1 Modifier l’image liée à l’article.

information.eps

Les paramètres d’affichage d’un champ peuvent être différents d’un type de contenu à un autre.
  1. Email Field : ajout d’un champ Mail

Certains modules de Drupal permettent d’ajouter de nouveaux types de champs. C’est le cas du module Email Field qui permet d’ajouter un champ de type Email qui propose différents formats d’affichage.

Ajoutez un champ qui permettra au rédacteur de proposer un lien qui pointe vers son adresse de courriel :

Le nouveau type de données Email

La page de configuration d’un champ texte s’affiche alors.

Le lien de courriel peut s’afficher de plusieurs façons différentes :

Les différents formats d’affichage d’un champ Email Field

Lien courriel e-mail par défaut

Formulaire de contact e-mail

E-mail plain text

  1. Taxonomy : classer le contenu

La taxonomie est la science qui étudie le classement, l’organisation. C’est également le nom du module qui permet de classer le contenu dans Drupal. Le champ Tags du type de contenu article est généré par ce module.

Dans ce chapitre, vous allez ajouter trois champs au type de contenu recette :

  1. Le vocabulaire Tags

Le champ Tags permet d’ajouter des mots clés lors de l’ajout d’articles. Ce champ est géré par le module Taxonomie.

Découverte du vocabulaire Tags

Rendez vous sur la page des Tags :

La liste de tous les tags que vous avez entré lors de la rédaction des articles s’affiche alors. Il est possible ici de les réordonner, d’ajouter de nouveaux tags, de les modifier et de les supprimer.

Liste des termes du vocabulaire Tags

information.eps

Un champ de Taxonomie est appelé Vocabulaire. Un vocabulaire est composé d’une liste de termes. Ici, le vocabulaire Tags contient les termes Dessert, Entrée, Pâtes, Plat principal, Riz.

Association d’un vocabulaire à un type de contenu

Vous allez maintenant ajouter le champ Tags au type de contenu recette :

Ce champ existe déjà pour le type article, vous allez le réutiliser pour vos recettes grâce à la section Ajouter un champ existant :

information.eps

Les autres Widget (éléments de formulaires) sont décris au chapitre chap. II — 4.1.3 Les widgets du champ Tags

Ajout d’un champ existant

Si vous modifiez un contenu de type recette, apparaîtra alors l’élément de formulaire Tags.

Saisie de tags pour les recettes

information.eps

Comme pour les champs classiques, un vocabulaire peut être utilisé pour plusieurs types de contenu.
  1. Création d’un vocabulaire de taxonomie (champ Difficulté)

Le vocabulaire Difficulté permettra aux rédacteurs d’indiquer si une recette est Très facile, Facile, Moyen, Difficile ou Très difficile à réaliser.

Choix de la difficulté pour une recette

Le vocabulaire est créé, il faut maintenant lui ajouter les 5 termes :

Ajoutez ainsi les 4 autres termes Facile, Moyen, Difficile et Très difficile.

Organisation des termes du vocabulaire difficulté

Ajoutez ce vocabulaire au type de contenu Recette :

Choix du vocabulaire pour lister les termes

Si vous modifiez un contenu de type recette, vous pourrez choisir sa difficulté.

  1. Création d’un vocabulaire hiérarchisé (Provenance)

Le vocabulaire provenance permettra aux rédacteurs d’indiquer l’origine géographique de la recette. Elle sera hiérarchisée (Asie, Europe — France, Italie, Chine, Vietnam — Bretagne, Auvergne, Sicile, Pékin).

Commencez par créer le vocabulaire de la même façon que pour les ingrédients :

Le vocabulaire est créé, il faut maintenant lui ajouter des termes :

Ajoutez ainsi les autres termes Europe, France, Italie, Chine, Vietnam, Bretagne, Auvergne, Sicile et Pékin.

Réorganisez les termes en les déplacant de haut en bas pour les réordonner et de gauche à droite pour les hiérarchiser :

Organisation des termes de Provenance

astuce.eps

Vous pouvez également utiliser la section RELATIONS pour modifier l’ordre et la hiérarchie d’un terme.

Choix du terme parent d’un terme

De la même façon que pour le vocabulaire Difficulté, il faut ajouter ce vocabulaire au type de contenu Recette.

Modifiez un contenu de type Recette, vous pourrez choisir sa provenance.

Choix de la provenance de la recette

  1. Ajout de champs aux autres entités

Vous savez maintenant comment ajouter des champs à des entités nodes (de type article, recette, etc.). Mais il est possible d’ajouter des champs de n’importe quel type à d’autres entités comme les utilisateurs, les commentaires ou bien les termes de Taxonomie.

Voici, par exemple, ce que vous réaliserez dans ce chapitre :

  1. Ajout d’un champ pour les utilisateurs

Lorsque vous avez ajouté un utilisateur au chap. II 2.3 — User : Gestion des utilisateurs, il vous était demandé sur la page de création de comptes les champs suivants :

Vous allez ajouter un nouveau champ qui demandera si l’utilisateur est un homme ou une femme.

Rendu du champ dans le profil de l’utilisateur

astuce.eps

Vous pouvez également atteindre cette page via le lien Configurer du module User.

Le type de données est de type booléen : Homme (0) ou Femme (1). C’est donc un entier qui sera stocké dans la base.

Ajout d’un champ boutons radios

Il faut ensuite indiquer la liste des valeurs que peut prendre le champ. Ici, la valeur pourra être Homme ou Femme :

Liste des valeurs possibles

La page de configuration d’un champ texte s’affiche alors.

Paramètres du champ

information.eps

Remarquez également que Drupal associe automatiquement chaque ligne à un entier qui sera sauvegardé dans la base de données.

Association d’un entier par ligne

Vous pouvez maintenant aller dans le profil de l’administrateur et y indiquer si vous êtes un Homme ou une Femme :

Nouveau champ du profil

information.eps

L’option Femme sera choisie par défaut uniquement lors de la création de nouveaux profils.

Un profil utilisateur et son nouveau champ.

  1. Ajout d’un champ à un terme de Taxonomie

Il est possible d’ajouter des champs aux vocabulaires de taxonomie. Il est par exemple possible d’illustrer le Vocabulaire difficulté avec des toques (1 toque => Très facile, 2 toques => Facile, etc.).

Page d’un terme avec image

Ajout d’un champ à un Vocabulaire

Ajout de l’illustration au terme Facile

Les rédacteurs devront toujours choisir le terme dans la liste par contre, lorsque la node sera affichée, seule l’image du terme sera elle aussi affichée. Il faut donc modifier l’affichage des termes de taxonomie.

astuce.eps

Notez qu’il existe un mode d’affichage Page d’un terme de taxonomie pour gérer l’affichage d’un vocabulaire sur les pages de Taxonomie.

information.eps

Pour afficher les images de taxonomie dans les pages de contenu, il faut utiliser des vues ou des fonctions de thème.
  1. Exercice : ajout d’un champ de taxonomie aux commentaires

Créez un champ qui permet aux visiteurs d’indiquer le type de commentaire qu’ils postent.

Choix d’un type de commentaire

Corrigé

Créer un vocabulaire

Les termes du vocabulaire Type de commentaire

Ajouter le champ Taxonomie aux commentaires

La difficulté ici consiste à trouver l’endroit où ajouter un champ à un commentaire. Les commentaires sont configurés selon le type de contenu auquel ils sont associés. C’est donc sur la page de configuration du type de contenu Recette qu’il faut se rendre

Gestion des champs des commentaires liés à une recette

Ajout du champ au commentaire

Créer deux commentaires en utilisant ces champs

Ajout d’un commentaire et choix du type

  1. Page de Rapport des champs d’un site

Tout au long de ce chapitre, vous avez ajouté un grand nombre de champs se rapportant à différentes entités (node, type de nodes, Commentaire, Terme de taxonomie, Utilisateur). Une page listant l’ensemble de ces champs et leur utilisation permet de mieux savoir comment est organisé votre site.

Page de liste des champs

Puce module.eps

Pouvoir ajouter des champs aux différentes entités est une fonctionnalité centrale de Drupal. Ceux-ci peuvent ensuite être utilisés avec les modules views ou Display Suite ou encore dans les thèmes.

Chapitre

III

Administration système
de Drupal

  1. III - Administration système de Drupal

Dans cette partie, vous allez configurer les différentes applications qui permettent de faire fonctionner Drupal : le serveur web Apache, le langage Php et la base de données MySQL. Il n’est bien sûr pas question de traiter en profondeur ces sujets, mais de configurer les fonctionnalités qui auront une incidence sur le fonctionnement de Drupal.

III — Administration système de Drupal

Vous apprendrez également à sauvegarder, restaurer et mettre à jour un site web Drupal. Ensuite, vous découvrirez les outils qui peuvent vous faciliter l’administration de Drupal. Pour finir, vous verrez comment sont organisées les données de Drupal.

information.eps

Peut-être n’êtes vous pas très intéressé par la configuration de Drupal, dans ce cas, vous pouvez très bien vous affranchir de la lecture d’une bonne partie de ce chapitre.

Cependant, avant de passer à la partie suivante, il est conseillé au moins d’activer les URLs simplifiés comme indiqué au chap. III — 1.1 Configuration de Apache.
  1. 1 - Configuration de Apache — PHP — MySQL
    1. Configuration de Apache

9 — Configuration de Apache — PHP — MySQL

Drupal peut s’exécuter sur de nombreux serveurs HTTP, mais ici, seule la configuration d’Apache, qui est le serveur le plus populaire, sera étudiée.

  1. Les URLs Simplifiées

Par défaut la forme des URLs de Drupal est :

http://localhost/drupal/?q=node/2

Dans cet exemple, node/2 sont les arguments qui sont envoyés à Drupal. Si les URLs simplifiées sont activées, elles prennent la forme suivante :

http://localhost/drupal/node/2

On enlève ainsi le ?q=. Cela peut paraître être un détail, mais il est recommandé d’activer les URLs simplifiés pour plusieurs raisons :

Activer le mod_rewrite d’Apache

Pour pouvoir activer les URLs simplifiés, il faut que le module mod_rewrite d’Apache soit aussi activé.

Activer le mod_rewrite avec WampServer

sudo a2enmod rewrite

sudo gedit /etc/apache2/apache2.conf

<Directory /var/www/drupal>

AllowOverride all

</Directory>

sudo /etc/init.d/apache2 restart

Activer les URLs simplifiées dans Drupal

Si vous ne pouvez pas choisir Activé, c’est que le test n’a pas réussi et qu’il y a un problème dans votre configuration.

astuce.eps

Si le module mod_rewrite est activé lors de l’installation de Drupal, les URLs simplifiées sont activées par défaut.

Les URLs simplifiés peuvent être activées

astuce.eps

Si à un moment vous rencontrez un problème avec une URL, vous pouvez accéder à la page de désactivation grâce à l’adresse :
http://localhost/drupal/?q=admin/config/search/clean-urls

  1. Puce module.eps

    Chap. II — 2.4 Path : L’Alias d’URLs

  2. Puce module.eps

    Chap. IV — 4.3 Pathauto : Automatisez la création de vos Alias
  3. Les hôtes virtuels

Créer un hôte virtuel sur votre serveur apache vous permettra d’accéder à Drupal directement en entrant l’adresse http://drupal.tld plutôt que http://localhost/drupal. Ainsi votre site sera plus facile à configurer et à copier vers le serveur de votre hébergeur.

Cela permet également d’héberger plusieurs sites Web sur un même serveur facilement.

Configuration du fichier hosts

Sous Windows

Éditez le fichier %windir%\System32\Drivers\etc\hosts (typiquement : C:\Windows\System32\drivers\etc) et ajoutez la ligne :

127.0.0.1 drupal.tld

Attention, ce fichier peut être en lecture seule pour des raisons de sécurité, changez ses droits (clic droit — Propriétés) en écriture avant de l’éditer et protégez le à nouveau après modification.

Sous Linux

sudo gedit /etc/hosts

et ajoutez la ligne :

127.0.0.1 drupal.tld

Configuration de Apache

Sous Windows

#Include conf/extra/httpd-vhosts.conf

Apache cherchera dans le fichier httpd-vhosts.conf les vhosts installés

<VirtualHost *:80>

DocumentRoot c:/wamp/www

ServerName localhost

</VirtualHost>

<VirtualHost *:80>

DocumentRoot c:/wamp/www/drupal

ServerName drupal.tld

</VirtualHost>

Le premier VirtualHost permettra à l’adresse http://localhost de fonctionner (pour accéder à phpMyAdmin par exemple). Le second permettra à l’adresse http://drupal.tld de pointer directement vers votre site Drupal.

Sous Linux

sudo gedit /etc/apache2/sites-enabled/drupal.conf

<VirtualHost *:80>

DocumentRoot /var/www/drupal

ServerName drupal.tld

</VirtualHost>

sudo /etc/init.d/apache2 restart

Vérification du bon fonctionnement

Allez à l’adresse http://drupal.tld, vous devriez voir apparaître votre page d’accueil Drupal. Vérifiez également que l’adresse http://localhost, affiche la page d’accueil de WampServer.

Le virtualhost drupal.tld fonctionne

information.eps

Vous n’avez ici configuré que le minimum de paramètres des VirtualHosts pour qu’ils fonctionnent avec Drupal. Apache étant très complet, il comprend un grand nombre de paramètres supplémentaires. Voyez la documentation Apache pour plus d’informations.

information.eps

Vous pouvez lancer une commande Apache pour connaître la configuration de vos virtual hosts (pratique si cela ne fonctionne pas du premier coup) :

Sous Windows :

Dans une Invite de commandes

c:\wamp\bin\apache\apache2.2.17\bin\httpd.exe -S

Sous Linux :

apache2 -S
  1. Configuration de PHP

PHP est le langage de script avec lequel Drupal est développé.

PHP est correctement configuré par défaut avec Wampserver ou Linux Ubuntu pour le bon fonctionnement de Drupal. Toutefois, voici les quelques variables que vous pourriez avoir besoin d’ajuster dans le fichier php.ini.

Sous Windows :

Raccourci WampServer vers php.ini

Sous Linux :

Pour éditer php.ini :

sudo gedit /etc/php5/apache2/php.ini

Les paramètres utiles pour Drupal

memory_limit : votre besoin pour Drupal dépend des modules chargés. 128 Mo est recommandé. 64 Mo est un minimum. Aujourd’hui les machines ont de plus en plus de RAM, n’hésitez pas à augmenter cette valeur si vous constatez une baisse de performance de Drupal ou des erreurs fréquentes lors du chargement des pages.

post_max_size : c’est la limite de taille d’envoi d’un seul fichier par la méthode POST. 2M est une bonne valeur si vous limitez les fichiers à envoyer à des images. Cela peut devenir insuffisant si vous permettez d’envoyer des vidéos. Si vous augmentez post_max_size, pensez aussi à augmenter upload_max_size.

post_max_size et upload_max_size à 32M

astuce.eps

Pour avoir plus d’informations sur la version de Php installée et des modules activés, rendez-vous sur menu Rapports — lien Tableau de bord et cliquez sur le lien en face de la vérification PHP : la page phpinfo.php s’affichera (chap. II — 1.6 Tableau de bord)
  1. Configuration de MySQL

Comme pour le serveur web Apache, Drupal peut fonctionner avec différents serveurs de base de données grâce à l’utilisation d’une couche logicielle d’abstraction. Cependant, les explications de ce livre se limiteront à MySQL qui est actuellement le serveur le plus utilisé avec Drupal.

  1. Configuration de la base de données utilisée par Drupal

À la quatrième étape du processus d’installation de Drupal, vous avez entré les informations relatives à la base de données.

Installation de la base de données

Ces informations sont stockées dans le fichier settings.php, il est possible de modifier ces informations :

Sous Windows :

  • Éditez le fichier C:\wamp\www\drupal\sites\default\settings.php

astuce.eps

Sous Windows, si vous ne percevez pas les retours à la ligne dans votre éditeur (par exemple Notepad), utilisez un éditeur plus avancé (Notepad++ — http://notepad-plus-plus.org/).

Sous Linux :

  • sudo gedit /var/www/drupal/sites/default/settings.php

Dans le fichier settings.php, cherchez la ligne $databases, voici à quoi doit ressembler cette variable pour votre installation

$databases = array (
'default' =>
array (
'default' =>
array (
'database' => 'drupal',
'username' => 'root',
'password' => '',
'host' => 'localhost',
'port' => '',
'driver' => 'mysql',
'prefix' => '',
),
),
);

information.eps

Il est possible de définir des configurations de base de données extrêmement complexes avec Drupal. Vous pouvez par exemple avoir deux sites Drupal qui partagent leurs utilisateurs mais qui ont leurs données propres.

Voici les paramètres principaux permettant de configurer la variable $databases :

'database'

Nom de la base de données à utiliser

'username'

Nom d’utilisateur de la base de données

'password'

Mot de passe de l’utilisateur

'host'

Adresse du serveur de base de données, le serveur de base de données peut-être différent du serveur hébergeant Drupal

'port'

Port utilisé par le serveur de base de données (3306 par défaut pour MySQL)

'driver'

Type de serveur de base de données utilisé (mysql, pgsql, sqlite, etc.)

'prefix'

Il est possible d’utiliser un préfixe pour chaque table

astuce.eps

Lors de l’installations un onglet Options avancées permet de régler certains des paramètres ci-dessus

Options avancées de l’installateur
  1. Création d’un utilisateur MySQL pour la base Drupal

Lors du processus d’installation de Drupal, l’utilisateur root était utilisé pour créer la base SQL de Drupal. Cela peut poser des problèmes de sécurité surtout qu’avec Wampserver, l’utilisateur root est sans mot de passe par défaut ! Il est donc conseillé de créer un utilisateur spécifique pour la base de données utilisée par Drupal.

Pour cela, comme pour toutes les manipulations que vous allez faire sur la base de données, vous utiliserez l’outil phpMyAdmin qui permet de gérer facilement des bases de données MySQL et qui est très souvent proposé par les hébergeurs.

  • Rendez-vous à l’adresse http://localhost/phpmyadmin
  • Connectez-vous avec l’utilisateur root/atelierdrupal (si vous avez suivi l’exemple chap. I Démarrage rapide)
  • Onglet Privilèges (sur la page d’accueil de phpMyAdmin, sans avoir sélectionné de base au préalable)
  • Lien Ajouter un utilisateur
  • Entrez un Nom d’utilisateur : drupal, par exemple
  • Choisissez Local pour le Serveur : même si vous accédez à Drupal depuis une autre machine, Drupal utilisera la base de données en local. Bien-sûr, il est possible d’installer votre base de données Drupal sur un autre serveur que votre serveur web. Ce cas ne sera pas traité ici.
  • Choisissez un Mot de passe, atelierdrupal par exemple
  • Ne touchez à rien d’autre et cliquez sur le bouton Exécuter tout en bas de la page

mysql_2.pngCréation d’un utilisateur avec PhpMyAdmin

La page se recharge alors.

  • À la section Privilèges spécifiques à une base de données choisissez la base de données drupal

admin-2.pngModification des privilèges pour l’utilisateur de la base

La page se recharge une nouvelle fois et affiche les privilèges à donner pour votre seule base drupal.

  • Lien Tout cocher

admin-3.pngAjout des permissions d’un utilisateur pour une base de données

  • Bouton Exécuter

astuce.eps

Lors de votre prochaine installation de Drupal, vous pouvez ajouter directement un nouvel utilisateur et cocher l’option Créer une base portant son nom et donner à cet utilisateur tous les privilèges sur cette base.

Il faut maintenant modifier les paramètres du fichier de configuration de Drupal pour changer le nom d’utilisateur qui accédera à la base.

  • Éditez le fichier sites/default/settings.php
  • Recherchez la ligne définissant la variable $databases
  • Modifiez la comme dans le code suivant

$databases = array (
'default' =>
array (
'default' =>
array (
'database' => 'drupal',
'username' => 'drupal',
'password' => 'atelierdrupal',
'host' => 'localhost',
'port' => '',
'driver' => 'mysql',
'prefix' => '',
),
),
);

information.eps

Le fichier settings.php est en lecture seule. Il faut donc changer ses droits d’accès. N’oubliez pas de le remettre en lecture seule lorsque vous aurez appliqué les changements.

information.eps

Il y a par défaut deux autres bases de données existantes en plus de celle de Drupal. Ce sont les bases qui permettent de faire fonctionner le gestionnaire MySQL, il ne faut donc jamais les effacer.

mysql_1.pngListe des bases de MySQL
  1. Choisir un hébergeur

Il est possible d’héberger son site sur une machine reliée à Internet. Cependant, la majorité des administrateurs préfèrent faire appel à un hébergeur pour y louer un serveur ou une partie d’un serveur.

Vous aurez alors le choix entre trois solutions d’hébergement : un serveur dédié, du cloud computing (infrastructure en nuages) ou un serveur mutualisé.

Bien souvent, les hébergeurs proposant des solutions mutualisées offrent une interface d’administration qui permet d’installer et de configurer votre serveur simplement. Avec un serveur mutualisé, vous n’aurez pas à configurer et sécuriser votre système de A à Z comme avec un serveur dédié.

Généralement la solution du serveur mutualisé est moins coûteuse, mais aussi moins performante (vous partagez les ressources du serveur avec d’autres sites), il faut donc faire particulièrement attention au système minimum requis par Drupal car il est impossible de le faire évoluer par vous même.

Le cloud computing est une solution intermédiaire qui se comporte, au niveau logiciel, comme un serveur dédié.

  1. Serveur Web

La plupart des utilisateurs de Drupal utilisent le serveur WEB Apache. Pourtant, Drupal peut aussi fonctionner sur IIS, LightHTTP ou autre puisqu’il a été programmé pour être indépendant du serveur WEB. Sachez cependant que la solution Drupal + Apache est la plus éprouvée.

Pour pouvoir activer les URL’s simplifiés, il faut que le module mod_rewrite soit ou puisse être activé sur Apache.

Drupal 7 fonctionnera avec Apache 1.3 minimum.

  1. PHP

L’utilisation de PHP 5.3 ou supérieur est recommandé par Drupal. En théorie, PHP 5.2.5 suffit.

La mémoire minimum à allouer à PHP est de 32MB, mais, selon les modules activés et l’activité de votre site, il sera nécessaire d’augmenter cette valeur.

Les bibliothèque PHP suivantes doivent être activées :

  • GD (Gif Draw — Dessiner des GIF) pour la gestion des images ;
  • PDO pour PHP pour la gestion des bases de données.
  1. Base de données

Drupal peut utiliser les logiciels de base de données MySQL 5.0.15 ou supérieur, ou PostgreSQL 8.3 ou supérieur. Bien que PostgreSQL soit reconnu comme étant un très bon logiciel, MySQL, comme Apache reste préféré par la plupart des utilisateurs de Drupal.

  1. Configuration du serveur pour l’envoi de mail

Drupal doit pouvoir envoyer des courriels pour effectuer certaines tâches : validation du courriel d’un nouvel utilisateur, récupération d’un mot de passe, alerter l’administrateur du système d’événements particuliers, envoi d’une newsletters, etc.

L’envoi de courriels se fait grâce à un serveur SMTP (Simple Mail Transfer Protocol ou « Protocole simple de transfert de courrier »). Si vous travaillez en local sur votre machine, vous pouvez utiliser le SMTP de votre fournisseur d’accès (exemples : smtp.free.fr, smtp.orange.fr, etc.). Si vous travaillez sur un serveur dédié ou mutualisé, utilisez le smtp de votre fournisseur de mail (smtp.laposte.net, smtp.mondomaine.com, etc.).

  1. Configuration de Windows avec WampServer

Sous Windows, il suffit de modifier un paramètre dans le fichier php.ini pour indiquer à Drupal quel serveur SMTP utiliser:

  • Cliquez avec le bouton gauche de la souris sur l’icône de WampServer
  • Choisissez dans le menu PHP — php.ini
  • Recherchez le paramètre SMTP dans la section [mail function]

Modification du SMTP dans le fichier

  • Entrez le nom de votre serveur SMTP
  • Modifiez également le paramètre sendmail_from (qui sera l’adresse ‘de’ des mails envoyés).
  • Sauvegardez le fichier
  • Redémarrez WampServer en cliquant sur l’icône avec le bouton gauche — Redémarrer les services

Testez votre installation comme indiqué (chap. III — 1.5.4 Test de l’installation).

  1. Configuration de Linux avec SSMTP

SSMTP est très simple à configurer pour permettre au système d’envoyer des mails :

  • Installation de SSMTP

sudo apt-get install ssmtp

  • Editez le fichier de configuration de SSMTP :

sudo gedit /etc/ssmtp/ssmtp.conf

  • Modifiez les champs ainsi

root=contact@atelierdrupal.net #Votre adresse email

mailhub=smtp.free.fr #SMTP utilisé

rewriteDomain=free.fr #Domaine utilisé

hostname=cyp-drupal #Nom de votre machine

FromLineOverride=YES #Pour que la ligne from contienne l'adresse mail de l'administrateur de Drupal

  • Sauvegardez le fichier

Testez votre installation comme indiqué à la fin de ce chapitre.

  1. Configuration de Linux avec Postfix

Vous pouvez également utiliser Postfix qui peut en faire plus que SSMTP, mais avec qui il ne peut pas cohabiter

  • Installez Postfix.

sudo apt-get install postfix

  • À la question Configuration type du serveur de messagerie, choisir Site Internet.
  • À la question Nom de courrier, entrez le nom de domaine de votre mail (si votre mail est
    contact@atelierdrupal.net, entrez atelierdrupal.net).
  • Editez le fichier main.cf :

sudo gedit /etc/postfix/main.cf

  • Complétez le paramètre relayhost par le nom de votre STMP entre crochets :

relayhost = [smtp.free.fr]

  • Enfin, redémarrez postfix

sudo /etc/init.d/postfix restart

  1. Test de l’installation

Votre installation doit maintenant fonctionner, vous pouvez la tester en créant un nouveau compte utilisateur (chap. II — 2.3 User : gestion des utilisateurs).

astuce.eps

Pour modifier l’adresse 'de' des mails envoyés sous Drupal, utilisez la page menu Configuration — lien Informations

Adresse mail des mails envoyés par Drupal sous Linux
  1. 2 - Sauvegarde / Restauration

La sauvegarde de Drupal se déroule en deux temps :

  • sauvegarde de l’intégralité des fichiers de Drupal ;
  • sauvegarde de la base de données.

La base de données de Drupal contient les données du site (contenu des nodes, paramètres des utilisateurs) mais également sa structure (types de contenus, taxonomie) et ses options de configuration.

Le système de fichiers contient lui le code de Drupal (modules et coeur de Drupal) mais également certains fichiers liés au contenu (images des nodes).

  1. Sauvegarde / Restauration de l’arborescence de fichiers
    1. Avec un gestionnaire de fichiers

Rien de difficile dans cette tâche, il s’agit seulement de sauvegarder un répertoire.

Sauvegarde

Sauvegarder les fichiers de Drupal avec un gestionnaire de fichiers se fait en trois clics.

  • Clic droit sur le dossier C:\wamp\www\drupal ou /home/drupal/drupal
  • Dans le menu contextuel Choisir Copier

Sauvegarde de l’arborescence sous Windows

  • Puis Coller le répertoire à un autre endroit de l’arborescence

Restauration

  • Clic droit sur le dossier de sauvegarde
  • Dans le menu contextuel Choisir Copier
  • Puis Coller le répertoire dans C:\wamp\www ou /home/drupal

astuce.eps

Vous pouvez utiliser un gestionnaire d’archive (zip ou tar.gz) pour n’avoir qu’un seul fichier compressé pour l’arborescence
  1. En ligne de commande avec Linux

Il est bien souvent nécessaire d’automatiser la sauvegarde pou un site de production sur un serveur dédié. Voici les lignes de commandes pour Linux :

Crée une archive drupal.tar.gz du répertoire /home/atelier/drupal

tar -czvf /home/atelier/drupal.tar.gz /home/atelier/drupal

Extrait cette archive :

cd /

tar —zxvf /home/atelier/drupal.tar.gz

astuce.eps

La commande tar possède une multitude d’options permettant de l’adapter à vos besoins. N’hésitez pas à lire sa page de manuel.
  1. Sauvegarde / Restauration de la base de données
    1. Avec phpMyAdmin

Sauvegarde de la BDD avec phpMyAdmin

Il est possible de sauvegarder / restaurer sa base de données graphiquement grâce à phpMyAdmin.

  • Connectez-vous sur phpMyAdmin : http://localhost/phpmyadmin/
  • Choisissez la base de données que vous voulez sauvegarder dans la liste sur la gauche, drupal, si vous avez suivi l’exemple de ce livre
  • Cliquez sur l’onglet Exporter. Les paramètres par défaut devraient être les bons : le format doit être SQL. Structure et Données doivent être cochées.

Interface d’export d’une base sur PhpMyAdmin

  • En bas de page, cochez Transmettre
  • Choisissez aussi gzippé pour gagner du temps et de l’espace disque (ou zippé sous Windows)

Paramètres du fichier à transmettre

astuce.eps

Le format «bzippé» est plus performant mais n’est pas toujours disponible.
  • Cliquez sur Exécuter
  • Téléchargez le fichier sur votre disque local

information.eps

Le fichier sauvegardé est une archive contenant une longue requête SQL à exécuter pour créer la structure de la base et y insérer ses données. Vous pouvez l’éditer pour mieux comprendre son fonctionnement.

Restauration de la BDD avec phpMyAdmin

  • Connectez-vous sur phpMyAdmin : http://localhost/phpmyadmin/

Il faut créer une base de données dans laquelle vous voulez restaurer les données.

  • Dans la zone Créer une base de données, entrez le nom de la base à créer
  • Bouton Créer

Vérfiez que vous êtes bien dans la base où vous voulez restaurer les données.

  • Cliquez sur l’onglet Importer
  • Cliquez sur le bouton Parcourir, choisissez le fichier précédemment téléchargé

Restauration de la base de données

  • Cliquez sur Exécuter.

information.eps

Vous pouvez augmenter la taille maximum du fichier à importer en modifiant les paramètres de php.ini (chap. III — 1.2 Configuration de PHP).

astuce.eps

Si votre importation échoue à cause d’une limite de temps dépassée (timeout), rechargez la page, l’importation continuera où elle s’est interrompue.
  1. En ligne de commande avec MySQL

Faire ses sauvegardes par phpMyAdmin est simple mais comporte des désavantages :

  • phpMyAdmin n’est pas toujours installé ;
  • il n’est pas possible de programmer des sauvegardes automatiques ;
  • il génère parfois des erreurs ;
  • il faut télécharger un fichier qui peut être volumineux.

Pour toutes ces raisons, il est parfois préférable de passer par la ligne de commande.

Sauvegarde de la BDD en ligne de commande

Voici la ligne de commande pour sauvegarder la base (attention, le mot de passe est en clair dans le script) :

mysqldump --user=root --password=atelierdrupal drupal>drupal.sql

Restauration de la BDD en ligne de commande

Pour restaurer la base sauvegardée dans un autre base (drupal-test) :

mysql --user=root --password=atelierdrupal drupal-test<drupal.sql

astuce.eps

Pour que la commande ci-dessus fonctionne, il faut que la base drupal-test existe. Pour la créer en ligne de commande, vous pouvez créer un fichier sql (exemple : script.sql) contenant les requêtes que vous désirez exécuter :

DROP DATABASE drupal-test

CREATE DATABASE drupal-test

Puis exécuter ce fichier avec la commande :

mysql --user=root --password=atelierdrupal drupal-test<script.sql
  1. Backup and Migrate : sauvegardez votre base de données

VI — Description des modules utiles de Drupal

18 — Administration

Ce module permet de sauvegarder, directement à partir de l’interface de Drupal, votre base de données.

Vous pouvez également programmer des sauvegardes automatiques à intervalles de temps réguliers.

  1. information.eps

    Ce module permet de sauvegarder uniquement la base de données et pas l’arborescence de fichiers. Veillez à bien sauvegarder l’ensemble des données de votre site (chap. III — 2 Sauvegarde/restauration de l'arborescence de fichiers).
  • Installez et activez le module (version utilisée pour ce livre 7.x-2.1) — http://drupal.org/project/backup_migrate
  • Menu Configuration — lien Sauvegarder et migrer
  1. Onglet Backup

Cet onglet permet de sauvegarder immédiatement votre base de données, il propose deux modes, le Quick Backup (sauvegarde rapide) et le Advanced Backup (sauvegarde avancée).

Quick Backup

Trois listes déroulantes permettent de sélectionner la base à sauvegarder, l’emplacement et le profil. Par défaut il n’y a qu’une seule possibilité pour chacune des listes.

  • Bouton Backup now

Quick Backup

Advanced Backup

  • Bouton Advanced Backup (de l’onglet Backup)

Plusieurs sections permettent de configurer la sauvegarde :

Load Settings

Choix d’un profil Backup and Migrate.

Backup file

Configuration du nom du fichier, du format de la date dans le nom du fichier et du mode de compression du fichier.

Database Options

Permet d’exclure la sauvegarde de la structure et des données de certaines tables (première liste) ou uniquement les données de certaines tables (deuxième liste). Cela peut-être utile pour les tables de cache.

Une option Lock tables during backup permet de verrouiller la base de données pendant la sauvegarde.

Advanced Options

Configuration de l’envoi de courriels en cas de succès ou d’échec.

Backup Destination

Permet de choisir l’emplacement des sauvegardes réalisées. L’onglet Destinations ajoute des éléments à la liste.

Enregistrer ces paramètres

Enregistre les options de la page pour une prochaine sauvegarde
  1. Onglet Restaurer

Cet onglet permet de restaurer un fichier de type *.sql ou *.sql.gz ou *.sql.zip. Il peut avoir été créé par Backup and Migrate ou bien via l’une des méthodes décrites au chapitre précédent.

Inversement, il est possible de restaurer les fichiers créés par Backup and Migrate via phpMyAdmin ou la commande mysql.

  1. Onglet Destinations

Une destination est un emplacement où le module peut créer ou restaurer des fichiers de sauvegarde. La base de données qu’utilise Drupal est également un emplacement pour Backup and migrate (Default Database).

  • Lien + Add destination

Vous pouvez configurer différents types d’emplacement :

Server Directory

Permet au module de sauvegarder dans un autre répertoire du serveur WEB. Le serveur WEB doit avoir les droits d’écriture sur ce répertoire.

MySQL Database

Configuration du nom du fichier de la sauvegarde.

FTP directory

Ajout d’un emplacement sur un serveur FTP.

Amazon S3 Bucket

Service de stockage en ligne d’Amazon (http://aws.amazon.com/fr/s3/).

Courriel

Permet d’envoyer les sauvegardes par mail.

Ajout d’un emplacement FTP

Liste des emplacements disponibles

  1. Onglet Profils

Un profil permet de réunir le nom d’une sauvegarde, son type de compression, les tables à exclure et les mails à envoyer.

Vous pourriez par exemple définir un nouveau profil qui sauvegardera uniquement les données utilisateurs en sélectionnant la table users.

Création d’un nouveau profil

  1. Onglet Schedules

Cet onglet permet de programmer l’exécution des sauvegardes automatiques.

information.eps

Ce message indique qu’il faut définir un chemin vers le système privé de fichier. Pour cela, cliquez sur le menu Configuration — lien Système de fichiers ou sur le lien contenu dans le message affiché par Backup and Migrate.

Ajout du chemin

Vous pouvez également utiliser une autre destination (chap. III — 2.3.3. Onglet destination).
  • Lien + Add Schedule

Page d’ajout d’une sauvegarde automatique

Voici les différents champs à remplir :

Activé

Si la case est décochée, la sauvegarde ne s’effectuera pas.

Settings Profile

Choix d’un profil créé dans l’onglet Profils.

Sauvegarder toutes les

Fréquence de sauvegarde.

Nombre de sauvegardes à conserver

Indiquer ici le nombre de sauvegardes à conserver avant que la plus ancienne ne soit supprimée. Pour la copie d’écran précédente, les sauvegardes seront gardées 3 heures au maximum.

Destination

Choix de la destination de la sauvegarde créée dans l’onglet Destinations.

Liste des sauvegardes automatiques définies

  1. Features : transférez la configuration de votre site

La base de données de Drupal regroupe à la fois le contenu du site (utilisateurs, nodes, etc.) et également sa configuration (types de contenus, vues, taxonomie).

Cela pose problème lorsqu’un site est en production, que du contenu y est régulièrement ajouté par des utilisateurs et que dans le même temps des fonctionnalités doivent y être ajoutés. Vous n’avez pas le choix : vous devez travailler directement en production.

Le module Features tente de combler cette faiblesse en permettant d’exporter des composants d’un site vers un autre. Ces composants peuvent être un type de contenu, un vocabulaire, une vue, etc.

Le module transforme alors l’ensemble des composants sélectionnés en un module Drupal que vous pouvez installer sur un autre site.

Pour réaliser l’exemple suivant, il faut que vous ayez deux sites Drupal sur votre installation. Le premier sera le site de test sur lequel vous effectuerez vos développements, le second le site de production sur lequel vous installerez les modules du site de test créés par Features.

Voici les sauvegardes qui seront utilisées pour les exemples de ce chapitre :

  • site de test : sauvegarde après Content UI ;
  • site de production : installation après Partie I.

Le but de cet exemple est de transférer les composants suivants du site de test vers le site de production :

  • le type de contenu recette,
  • les vocabulaires de taxonomie difficulté et provenance,
  • le menu liens divers.

Création d’une fonctionnalité

  • Sur le site de test, téléchargez et activez le module Features (http://drupal.org/project/features) — Version utilisée pour ce livre 7.x-1.0-beta3

Allez sur la page de configuration de Features :

  • Menu Structure — lien Fonctionnalités
  • Lien Créer une fonctionnalité

Définissez les caractéristiques du module features qui sera créé :

  • Nom : À vos toques — partie 2
  • Description : Fonctionnalités de la partie 2 du livre Atelier Drupal 7
  • Version : 7.x-1.0

Vous devez ajouter des composants :

  • Dans la liste Editer les composants, choisissez Types de contenu
  • Cochez Recette

Ajout d’un type de contenu

Dans la partie droite de l’écran, s’affichent toutes les dépendances du composant sélectionné. Ici, les champs du type de contenu sont automatiquement ajoutés.

Ajoutez les vocabulaires de taxonomie :

  • Dans la liste Editer les composants, choisissez Taxonomie
  • Cochez Difficulté et Provenance

Et enfin le menu :

  • Dans la liste Editer les composants, choisissez Menus
  • Cochez Liens divers

La fonctionnalité est complète

  • Bouton Téléchager la fonctionnalité

Il vous est alors proposé de télécharger un fichier .tar (archive) qui contient le module Drupal.

Installation du module créé

Sur le site de production, installez le module A vos toques — partie 2 précédemment téléchargé :

  • Extrayez le module dans le répertoire sites\all\modules\ de votre site de production (vous devriez obtenir un répertoire sites\all\modules\a_vos_toques_partie_2)
  • Menu Modules

À la section Features, le module doit apparaître :

Le module créé

  • Installez les dépendances (Features et Email)
  • Activez le module A vos toques — partie 2

Vous pouvez maintenant constater que le type de contenu, les vocabulaires et le menu ont été créés lors de l’installation du module.

astuce.eps

Vous pouvez activer le module via la page de configuration de Features :

  • Menu Structure — lien Fonctionnalités

Liste des fonctionnalités du site

Mise à jour d’une fonctionnalité

Vous possédez maintenant un site de test et un autre de production. Vous pouvez donc modifier le type de contenu recette sur le site de test et transférer cette modification sur le site de production en proposant une mise à jour de votre module créé par features.

Il faut commencer par installer le module A vos toques — partie 2 précédemment créé sur le site de test. L’idée étant ensuite de le recréer lorsque des mises à jours seront faites sur le type de contenu.

  • Extrayez le module dans le répertoire sites\all\modules\ de votre site de test

Activez par l’interface de features :

  • Menu Structure — lien Fonctionnalités
  • Cochez la case A vos toques — partie 2
  • Bouton Enregistrer les paramètres

Puis modifiez le type de contenu Recette :

  • Menu Structure — lien Types de contenu
  • Lien gérer l’affichage du type de contenu Recette
  • Inversez l’ordre des champs Temps de préparation et Prix par personne
  • Bouton Enregistrer

Il faut maintenant recréer votre module :

  • Menu Structure — lien Fonctionnalités

L’état de la fonctionnalité est maintenant Supplanté, c’est à dire qu’elle a été modifiée.

Cette fonctionnalité a été modifiée

  • Lien Recréer
  • Version : 7.x-1.1
  • Bouton Téléchager la fonctionnalité

Mettez à jour votre fonctionnalité sur le site de production :

  • Extrayez le module dans le répertoire sites\all\modules\ de votre site de production en remplacement de l’ancien (vous pouvez écraser directement les fichiers)
  • Menu Structure — lien Fonctionnalités
  • Décochez l’option du module pour le désactiver
  • Réactivez le module

Ainsi, la modification a été appliquée sur le site de production.

information.eps

Le module Features tente de pallier un défaut bien connu de Drupal. Il est parfois délicat à utiliser et n’est pas parfait.

Un groupe de travail a été lancé pour que ce module ne soit plus nécessaire avec Drupal 8.
  1. Sauvegarde / restauration d’une vue

Le module Views propose un système de Restauration / Sauvegarde très simple à utiliser.

Exporter une vue

  • Menu Structure — lien Views
  • Cliquez sur le lien Exporter d’une vue
  • Copiez le code de la zone de texte Exporter

Exporter une vue

Vous pouvez maintenant coller ce script dans un éditeur de texte et sauvegarder le fichier.

Importer une vue

  • Menu Structure — lien Views
  • Lien + Importer
  • Entrez le nom de la vue
  • Collez le code précédemment sauvegardé dans la zone Paste view code here

Importer une vue

  • Bouton Importer
  1. 3 - Outils d’administration
    1. Optimisation des performances

Drupal est parfois critiqué pour le nombre de requêtes SQL qu’il génère pour l’affichage d’une page. Il propose pourtant un système de cache efficace et facile à configurer qui permet d’améliorer ses performances.

information.eps

Lorsque le cache est activé, Drupal enregistre dans la base de données du code HTML généré par PHP. Si une requête identique est rencontrée par la suite, Drupal retourne alors directement le code HTML sans exécuter à nouveau le code PHP.

Voici une description de la page qui permet d’optimiser les performances dans Drupal :

  • Menu Configuration — lien Performance

information.eps

Même si aucune option n’est activée pour le cache des pages, Drupal utilise quand même le cache pour les menus, les thèmes, le système de fichiers, etc. Donc, si vous faites des modifications sur un site et que ces modifications ne sont pas prises en compte, videz le cache.

Voici la liste des options disponibles pour la Mise en cache :

Pages en mémoire cache pour les utilisateurs anonymes

Les pages mises en caches dans leur intégralité sont servies uniquement pour les visiteurs anonymes. En effet, lorsque l’utilisateur est identifié, il y a au moins le bloc affichant le nom de l’utilisateur qui diffère.

Si vous avez un site vitrine visité uniquement par des anonymes, cette option est fortement recommandée pour améliorer les performances.

Cache des blocs

Le code HTML des blocs peut ne pas varier d’un utilisateur identifié à l’autre. Ce cache permet donc d’améliorer les performances pour un site communautaire.

Durée de vie minimale de la mémoire cache

Temps minimum avant que les pages ne soient pas recréées. Choisir <aucun> est une bonne solution ici.

Expiration des pages en cache

Durée de vie maximale d’une page dans le cache.

astuce.eps

Il est préférable de n’activer aucune option de cette page lorsque votre site est en cours de développement.

Voici la liste des options disponibles pour l’Optimisation de la bande passante :

Compression des pages cachées

Compresser les données permet de gagner du temps de chargement des pages et d’économiser de la bande passante.

Agréger et compresser les fichiers CSS

Cette option permet de réduire la taille des fichiers CSS en les réunissant en un seul et en supprimant les caractères de mise en forme (commentaires, retour à la ligne, etc.).

Cela peut-être pénalisant lors du développement de nouveaux thèmes.

Cela peut également être une bonne solution pour contourner la limite des 32 fichiers CSS d’Internet Explorer.

Agréger les fichiers Javascript

Idem à l’option précédente mais pour les fichiers .js

information.eps

Il existe de nombreux projets visant à créer du cache au niveau du serveur Apache :

  • http://drupal.org/project/apc ;
  • http://drupal.org/project/memcache.
  1. Update Status : mettre à jour Drupal

Le module Update Status vérifie régulièrement si votre installation (coeur de Drupal, modules installés et thèmes installés) possède de nouvelles version disponibles sur drupal.org.

astuce.eps

Update Status peut ralentir l’affichage de certaines pages de votre site, notamment la page Configuration. Vous pouvez désactiver ce module pour retrouver une vitesse d’affichage normale.
  1. Mise à jour des modules

Lorsque Update Status rencontre un problème de mise à jour, un message s’affiche en haut de différentes pages.

Message d’avertissement sur la page des modules

  • Vous pouvez en savoir plus sur le problème rencontré en cliquant sur le lien mises à jour disponibles du message

Ou accéder directement à la page en cliquant sur :

  • Menu Modules — lien Mettre à jour

Mise à jour recommandée pour Video Filter et conseillée pour Adresse Field et Entity API

  • Cochez les modules que vous souhaitez mettre à jour
  • Cliquez sur le bouton Télécharger ces mises à jour

Après le téléchargement et avant l’installation, il se peut que la nouvelle version du module impose une modification de la structure de la base de données. Drupal conseille alors de faire une sauvegarde de celle-ci.

Sauvegardez la base avant la mise à jour

  • Cliquez sur le bouton Continuer

Une fois la mise à jour effectuée, Drupal propose un lien pour mettre à jour la base si celle-ci doit être modifiée. Ne pas effectuer cette mise à jour peut provoquer des erreurs de fonctionnement.

Installation réussie mais mise à jour de la base nécessaire

  • Lien Run database updates

astuce.eps

Il est possible de faire les mises à jour de la base en lançant l’url http://drupal.tld/update.php (drupal.tld étant l’adresse de votre site).
  • Suivre les différentes étapes de la mise à jour de la base

Votre module est alors mise à jour !

  1. Mise à jour du coeur de Drupal

Le cœur de drupal (Drupal et les modules installés par défaut) ne peuvent être mis à jour automatiquement, Update Status le signale ainsi :

Une mise à jour du coeur de Drupal est disponible

  • Faites une sauvegarde de votre site en cas de problème lors de la mise à jour
  • Cliquez sur le lien Drupal core et téléchargez la dernière version
  • Extrayez l’archive dans le répertoire de votre installation et écrasez tous les fichiers
  • Lancez le script de mise à jour de la base de données Drupal en faisant pointer un navigateur vers le fichier update.php (http://localhost/drupal/update.php)
  • Bouton Continue

Le script indique alors les mises à jour qui seront appliquées.

Mise à jour de la base de données

  • Bouton Apply pending updates

Votre site est maintenant à jour !

  1. Configuration

Vous pouvez configurer le module Update Status via le lien suivant :

  • Menu Rapports — lien Mises à jour disponibles

S’affiche alors le rapport complet de la vérification des mises à jour de votre installation.

  • Onglet Paramètres

Cette page permet de définir la fréquence de vérification, l’envoi de mail en fonction des mises à jours trouvées et si les modules installés mais non activés doivent être vérifiés.

  1. Le mode maintenance

Lors de la mise à jour de modules ou du cœur de Drupal, il est préférable de mettre votre site en mode maintenance. Ce mode permet aux visiteurs du site de voir une page d’information plutôt qu’une liste d’erreurs PHP.

Le site est en cours de maintenance

  • Pour configurer la page maintenance, menu Configuration — lien Mode maintenance

Page de configuration du mode maintenance

Vous pouvez sur cette page mettre le site en mode maintenance et modifier le message d’information.

astuce.eps

Si par accident, vous êtes bloqué en mode maintenance, voici la requête SQL à exécuter pour en sortir (dans phpMyAdmin par exemple) :

UPDATE variable SET value = 's:1:"0"'; WHERE name= 'site_offline';

DELETE FROM cache WHERE cid = 'variables';
  1. Le Cron

Cron est un programme qui permet d’exécuter automatiquement des tâches à une date ou à une heure spécifiée à l’avance ou avec un intervalle de temps régulier. Drupal a besoin d’exécuter régulièrement des tâches de maintenance : vérifier la présence de mises à jour, purger des fichiers de log et bien d’autres choses demandés par différents modules. Pour cela, Drupal utilise le programme cron.

Pour exécuter ces tâches, vous pouvez cliquer sur le lien Vous pouvez lancer le cron manuellement depuis le tableau de bord.

Cron peut-être configuré via la page :

  • Menu Configuration — lien Cron

Page de configuration du Cron

Vous pouvez ici lancer manuellement le cron et configurer sa fréquence de lancement automatique.

  1. 4 - La base de données de Drupal

Ce chapitre présente comment sont organisées une partie des données de Drupal. Vous pouvez lire ce chapitre pour mieux comprendre le fonctionnement interne de Drupal ou pour pouvoir importer ou exporter des données depuis ou vers Drupal.

  1. Gestion des utilisateurs

La gestion des utilisateurs dans Drupal a été décrite au chap. II — 2.3 User : gestion des utilisateurs. Les données des utilisateurs étant organisées de façon simple, ce premier chapitre donnera les clés pour mieux comprendre les schémas de cet ouvrage par la suite.

Une base de données est composée de tables, chaque table est composée de champs, et chaque champ contient des données.

  1. La table users

La table users contient les données relatives aux utilisateurs.

uid

name

pass

mail

0

1

admin

$P$C3L98Cx2qHW9r0XoLfsCXM4eBZ9KWh1

test@laposte.net

2

bertrand

$P$CGpxQP8ipe1066j.oFT7Vz0B5fdOQT1

bertrand@atelierdrupal.net

3

Benoit

$P$Cvez9GgGmZq/KjiYp4XTVTMueC79KR.

benoit@atelierdrupal.net

Extrait de la table users

Cette table contient le nom de l’utilisateur (name), son mot de passe (pass), son mail, sa signature, son numéro (uid), etc. Ces colonnes sont appelés des champs.

Dans cet exemple, il y a 4 utilisateurs, l’utilisateur ayant le numéro 1 est admin, le numéro 2 est bertrand et il a pour mail bertrand@atelierdrupal.net. Chaque utilisateur possède un numéro unique (uid) attribué par Drupal appelé clé primaire.

information.eps

Le champ mot de passe n'est pas lisible directement dans la base pour des raisons de sécurité (une personne pouvant lire la base ne peut ainsi pas connaître le mot de passe de l'administrateur de Drupal), il est crypté par la fonction drupal_hash_base64.

La table Users et ses champs seront schématisés ainsi :

La table users (gestion des utilisateurs)

Cette table contient d’autres champs (language, signature, etc.) qui ne seront pas détaillés ici.

Exemple de requêtes SQL

Une requête SQL interroge la base pour récupérer une certaine partie des données.

Par exemple, la requête suivante affiche le nom et le mail de chaque utilisateur :

SELECT name, mail

FROM users

Vous pouvez exécuter cette requête dans phpMyAdmin :

  • Rendez-vous sur phpMyAdmin (http://drupal.tld/phpmyadmin)
  • Dans la colonne de gauche, sélectionnez la base drupal
  • Onglet SQL
  • Entrez la requête

La requête dans phpMyAdmin

  • Bouton Exécuter

Le résultat s’affiche alors.

Résultat de la requête

  1. Les tables role et role_permission

Chaque utilisateur possède un ou plusieurs rôles qui lui procurent des permissions. La liste des rôles est stockée dans la table role et la liste des permissions dans la table role_permission.

Voici le contenu de ces tables :

rid

name

1

anonymous user

2

authenticated user

3

administrator

4

Rédacteur de recettes

La table role

Ici, il existe donc 4 rôles différents, le rôle numéro 3 est le rôle administrateur.

rid

permission

3

access administration pages

2

access comments

3

access comments

1

access content

2

access content

3

access content

4

access content

3

access content overview

Extrait de la table role_permission

Chaque permission est décrite par une phrase dans le champ permission. Le champ rid indique le numéro du rôle ayant le droit d’exécuter la permission.

Le rôle numéro 3 (rôle administrateur) peut accéder aux pages d’administration (access administration pages).

Les rôles 1 (utilisateur anonyme), 2 (utilisateur authentifié), 3 (administrateur) et 4 (Rédacteur) peuvent accéder au contenu (access content).

On dit donc que le champ rid de la table role_permission est une clé étrangère liée au champ rid de la table role. Voici comment cela sera représenté dans cet ouvrage :

Liste des champs de role et role_permissions

information.eps

Les shémas de ce livre ont été réalisés grâce au Concepteur de phpMyAdmin. Dans Drupal, aucune relation n’existe entre les tables, elles ont été créées pour faciliter la compréhension.

Exemple de requêtes SQL

Vous pouvez effectuer des requêtes sur plusieurs tables.

Afficher les permissions accordées au rôle «Rédacteur» :

SELECT role.name, role_permission.permission

FROM role

JOIN role_permission ON role.rid = role_permission.rid

WHERE role.name = "Rédacteur"

  1. La table users_roles

Des rôles sont attribués aux utilisateurs. Un utilisateur peut posséder plusieurs rôles et un rôle peut être possédé par un utilisateur. Il est donc nécessaire d’avoir une table contenant tous les couples utilisateur/rôle possibles. Cette table est la table users_roles.

uid

rid

2

4

3

3

3

4

Contenu de la table users_roles

L’utilisateur numéro 2 possède le rôle numéro 4 (Rédacteur).

L’utilisateur numéro 3 possède les rôles numéro 3 (Administrateur) et 4 (Rédacteur).

La table users_roles contient donc deux clés étrangères. Elle est appelée table intermédiaire.

Schéma de la gestion des utilisateurs, des rôles et des permissions sous Drupal

Exemple de requêtes SQL

Afficher les rôles associés à l’utilisateur Benoit :

SELECT users.name, role.name

FROM users

JOIN users_roles ON users.uid = users_roles.uid

JOIN role ON role.rid = users_roles.rid

WHERE users.name = "Benoit"

Afficher les permissions de Benoit :

SELECT DISTINCT users.name, role_permission.permission

FROM users

JOIN users_roles ON users.uid = users_roles.uid

JOIN role ON role.rid = users_roles.rid

JOIN role_permission ON role.rid=role_permission.rid

WHERE users.name = "Benoit"

  1. Gestion des nodes

Une ligne est créée dans la table node pour chaque nouvelle node ajoutée au site.

  1. Types de nodes

Gestion des nodes

Dans la table node, vous trouverez des informations telles que le langage, le numéro de l’utilisateur qui a créé la node (uid), son titre (title), ses options de publication (sticky, promote), etc. Dans cette table, le seul champ présent est le titre, les autres champs sont stockés dans d’autres tables qui seront étudiées au prochain chapitre.

Node est reliée à la table node_type qui définit les types de nodes (article, page, sondage, recette de cuisine).

Exemple de requêtes SQL

Afficher le titre de toutes les nodes du site :

SELECT title

FROM node

Afficher le titre de toutes les nodes et leur auteur :

SELECT title, users.name

FROM node

JOIN users ON node.uid=users.uid

Afficher le nombre de nodes par type :

SELECT type, count(*) AS "Nombre nodes"

FROM node

GROUP BY type

  1. Commentaires

La table comment des commentaires

La table comment contient les informations liées aux commentaires. Elle contient deux clés étrangères, uid qui indique quel est l’auteur du commentaire et nid qui indique a quelle node se rattache le commentaire.

Le champ pid est également une clé étrangère de la table comment elle même qui indique quel est le commentaire (cid) parent (dans le cas ou les commentaires sont hiérarchisés).

Exemple de requêtes SQL

Afficher le nombre de commentaires par node :

SELECT node.title, count(*) AS "Nombre Commentaires"

FROM node

RIGHT JOIN comment ON comment.nid=node.nid

GROUP BY node.title

  1. Gestion des champs

Le contenu d’une node dépend des champs qui composent le type de contenu (chap. II — 4 Field UI : Types de contenus personnalisés).

  1. Les tables field_data_*

Tous les champs se rapportant aux nodes se trouvent dans les tables préfixées par la chaine field_data_*. Lorsqu’un nouveau champ est créé, une table est créée (champ body => field_data_body, champ prix => field_data_prix).

Contenu des nodes

Le champ entity_type de chaque table field_data_* indique quel est le type d’entiré (node, users, comment) à laquelle il se rattache. Le champ bundle lui, stocke le type de contenu (article, page, recette) lorsque entity_type est une node. Le champ entity_id contient le numéro de l’entité (nid lorsque entity_type est une node).

Les table field_data peuvent avoir des champs différents en fonction du type de champ, voici trois exemples de tables :

  • le contenu du champ body, de type Texte long et résumé, est stocké dans la table field_data_body. Le contenu (body_value), le résumé (body_summary) et le format d’entrée sous forme de clé étrangère (body_format) sont stockés dans la table ;

entity_type

bundle

entity_id

body_value

node

article

1

Voila , c’est une version estivale de ma recette au

node

article

2

Risotto a  la bière blanche et Stilton et tranches de

node

article

3

------- Ingrédients (pour 1 pers.) -------

node

article

5

Voilà  une recette toute simple pour faire de

node

recette

6

Si je devais choisir mon légume fétiche du mo

Extrait du contenu de la table field_data_body

  • le contenu du champ image, de type image, est stocké dans la table field_data_field_image. Cette table contient un lien vers le fichier sous forme de clé étrangère (field_image_fid) et les paramètres alt (field_image_alt) et title (field_image_title) ;
  • le contenu du champ Prix, de type réel à virgule flottante, est stocké dans la table field_data_field_prix. Cette table contient uniquement le réel stocké (field_prix_value).

Exemple de requêtes SQL

Afficher le nombre de caractères du body des nodes de type « article » :

SELECT title, CHAR_LENGTH(body_value)

FROM field_data_body

JOIN node ON field_data_body.entity_id=node.nid

WHERE node.type="article"

Afficher le titre des recettes triées par prix :

SELECT node.title, field_prix_value

FROM field_data_field_prix

JOIN node ON field_data_field_prix.entity_id=node.nid

ORDER BY field_prix_value

  1. Cas d’un champ contenant plusieurs valeurs

Un champ peut contenir un nombre de valeurs illimités comme le champ ingrédients que vous avez créé pour le type Recettes.

Dans ce cas, le shéma relationnel entre les tables est identique :

Gestion d’un champ à valeurs multiples

Il y aura donc plusieurs lignes dans la table field_data_field_ingredients qui auront un champ entity_id identique. Le champ delta permet de connaître l’ordre des lignes.

Exemple de requêtes SQL

Affiche le nombre d’ingrédients pour chaque recette :

SELECT node.title, count(*) as "Nombre d'ingrédients"

FROM node

LEFT JOIN field_data_field_ingredients ON field_data_field_ingredients.entity_id=node.nid

WHERE node.type="recette"

GROUP BY node.nid

Liste des ingrédients de la recette « Gnocchis à la courge, sauce mandarine et parmesan » :

SELECT field_ingredients_value

FROM node

LEFT JOIN field_data_field_ingredients ON field_data_field_ingredients.entity_id=node.nid

WHERE node.title="Gnocchis à la courge, sauce mandarine et parmesan"

ORDER BY field_data_field_ingredients.delta

  1. Les formats d’entrée

Un champ personnalisé peut être associé à un format d’entrée. C’est le cas par exemple du champ body d’un article ou d’une page.

Gestion des formats d’entrée

Un champ contenant un format d’entrée possède une clé étrangère (ici, body_format) la liant à la table filter_format. Chaque format d’entrée contient ensuite un ou plusieurs filtres de la table filter.

  1. Paramètres des champs

Chap. II — 4.2.6 Ajout du champ photo de l’article, vous avez ajouté le champ field_image du type article au type recette. Les informations relatives aux photos des articles et des recettes sont donc stockées dans la table field_data_field_image. Cependant, il est possible de définir certaines options spécifiquement pour chaque champ, voici comment cela est organisé dans la base de données.

Champs liés aux entités

Les champs field_id et field_name indiquent le numéro et le nom du champ (body, field_prix, field_photo, etc.), entity_type le type d’entitée et bundle le nom de l’entité.

id

field_id

field_name

entity_type

bundle

1

2

body

node

page

2

1

comment_body

comment

comment_node_page

3

2

body

node

article

4

1

comment_body

comment

comment_node_article

5

3

field_tags

node

article

6

4

field_image

node

article

7

2

body

node

recette

8

1

comment_body

comment

comment_node_recette

9

5

field_preparation

node

recette

10

6

field_ingredients

node

recette

11

7

field_etapes

node

recette

12

8

field_photo

node

recette

Exemple de requêtes SQL

Afficher les champs attachés au type de contenu «recette» :

SELECT field_name

FROM field_config_instance

WHERE entity_type = "node" AND bundle = "recette"

  1. Les champs des autres types d’entité

Dans la base de données Drupal, une entité est un élément auquel il est possible d’ajouter des champs personnalisés. Cela peut-être une node, un terme de taxonomy, un commentaire, etc.

Les tables field_data_* avec différentes entités

Les tables sont organisées de la même façon que pour les entités node : une table field_data_* par champ et un numéro d’entité dans le champ entity_id (nid pour les nodes, tid pour les vocabulaires, cid pour les commentaires, etc.).

Le champ bundle change alors selon le type d’entité : type de node, nom du vocabulaire, etc.

Il est possible de connaître le type d’entité grâce au champ etid de chaque table.

Chaque numéro est décrit dans la table field_config_entity_type.

etid

type

2

comment

1

node

3

taxonomy_term

La table field_config_entity_type

  1. Les révisions des champs

Chaque node peut avoir une révision ou version (géré par l’onglet horizontal Révisions).

Révisions des champs personnalisés

La table node contient deux clés : nid (numéro de la node) et vid (numéro de révision en cours). Elle est reliée à la table node_revision qui contient les données des différentes révisions de node.

Pour chaque table field_data_*, une table field_revision_* existe. Ces deux tables sont reliées de la même manière que les tables node et node_revision. Elles permettent de stocker les révisions de chaque champ.

  1. Relation entre les vocabulaires et les nodes

Organisation des données pour la taxonomie

La table taxonomy_vocabulary contient la description des vocabulaires. La table taxonomy_term_data contient les descriptions de chaque terme.

La table taxonomy_index est une table de transition entre taxonomy_term_data et node car une node peut avoir plusieurs termes et un terme peut être relié à plusieurs nodes.

information.eps

Comme vu au chap. III - 3.1.5 Les champs des autres types d’entité taxonomy_term_data peut-être relié aux tables field_data_*

Exemple de requêtes SQL

Liste des termes de la node « Gnocchis à la courge, sauce mandarine et parmesan » :

SELECT taxonomy_term_data.name

FROM taxonomy_term_data

JOIN taxonomy_index ON taxonomy_term_data.tid = taxonomy_index.tid

JOIN node ON node.nid = taxonomy_index.nid

WHERE node.title = "Gnocchis à la courge, sauce mandarine et parmesan"

Chapitre

IV

Description de modules
utiles de Drupal

  1. IV - Description de modules utiles de Drupal

Cette partie décrit un grand nombre de modules Drupal répondant à divers besoins. Vous pouvez la lire dans son ensemble pour savoir ce qui existe et à quoi cela sert ou essayer de trouver uniquement celui dont vous avez besoin.

Sachez seulement que le module Views est un module central de Drupal, difficile à appréhender mais vite indispensable. Si vous ne devez en prendre qu’un : choisissez celui-là.

  1. 1 - Views : organisez vos données

Le module Views permet de créer des vues qui sélectionnent, organisent et affichent des données de la base de données Drupal. Views réalise tout cela sur mesure grâce à une interface utilisateur comprenant des centaines d’options.

Voici les vues que vous allez réaliser durant ce chapitre :

Liste des recettes sous forme de tableau avec filtres de tri et de sélection pour l’utilisateur

Bloc contenant les 3 recettes prise au hasard

Bloc d’information pour les rédacteur de recettes à propos de la recette affichée

Si vous avez suivi cet ouvrage, vous n’avez pour l’instant qu’une seule recette disponible. Voici les 5 recettes qui ont été ajoutées en plus pour illustrer ce chapitre :

  • Tatziki : http://1001recettes.blogspot.com/2006/05/retour-de-crte.html
  • Tartare de Boeuf : http://1001recettes.blogspot.com/2009/07/un-carpaccio-qui-tourne-mal.html
  • Poulet Korma : http://1001recettes.blogspot.com/2008/02/une-journe-pimenter.html
  • Gâteau 101% chocolat :
    http://1001recettes.blogspot.com/2009/07/cest-fort-en-chocolat-et-meme-bien-plus.html
  • Curry Malais :
    http://1001recettes.blogspot.com/2010/06/un-ptit-curry-mais-malais-cette-fois.html
  1. Installation et découverte du module
    1. Installation

Le module Views dépend du module CTools :

  • Téléchargez et activez les module Chaos tool suite (http://drupal.org/project/ctools) — Version utilisée pour ce livre 7.x-1.0-rc1 et Views et Views UI (http://drupal.org/project/views) — Version utilisée pour ce livre 7.x-3.0-rc1.

information.eps

CTools est un module qui contient des fonctions PHP pour Drupal. Il facilite la vie des programmeurs.

information.eps

Au moment de la rédaction de cet ouvrage, Views n’était pas encore traduit en Francais. Pour les copies d’écran, une traduction a été importé depuis http://localize.drupal.org/.

astuce.eps

Pour pouvoir consulter la volumineuse aide de Views, il faut installer le module Advanced help.
  1. Découverte de la vue Tracker

En activant le module Views, quelques exemples de vues sont installés.

  • Menu Structure — lien Views
  • Dans la liste, cliquez sur le lien activer de la vue Tracker

La vue Tracker est activée

information.eps

Un bug présent sur la version 3.0-rc1 empêche d’accéder directement au contenu de la vue activée, il faut donc d’abord :

  • Cliquer sur le lien modifier de la vue Tracker
  • Bouton Enregistrer
  • Retourner Menu Structure — lien Views
  • Pour voir la vue en action, cliquez sur /tracker dans la colonne CHEMIN

La vue Tracker en action

Cette vue affiche la liste des nodes du site et diverses informations à leur propos. Remarquez également que :

  • les nodes sont présentées sous forme de tableau ;
  • il est possible de modifier l’ordre de tri de ces nodes en cliquant sur les entêtes du tableau.

Tout est configurable dans cette vue : le nombre de colonnes du tableau, l’ordre de tri par défaut, le format des colonnes, de la date, les liens vers les nodes et les auteurs, etc.

  1. Interface du module Views

Vous pouvez voir comment est construite cette vue en l’éditant.

astuce.eps

Un menu contextuel qui s’affiche en haut à droite des vues. Vous pouvez accéder à la page de configuration de la vue directement à partir de ce menu.

Menu contextuel d’une vue
  • Éditez la vue

Vous arrivez alors sur la page de construction des vues. Celle-ci est divisée en trois parties : Affichages, Détails de l'affichage et Aperçu de la vue.

Affichages

Chaque vue peut définir plusieurs sorties (page, bloc, etc). Cette aspect sera détaillé plus tard dans ce chapitre.

Détails de l’affichage

Paramètres de l’affichage Page

C’est dans cette section que vous pouvez configurer les paramètres de la vue. Remarquez par exemple la liste dans la section CHAMPS qui correspond exactement aux champs affichés dans la vue tracker.

Aperçu de la vue

Aperçu de la vue en temps réél

Cette section répercute automatiquement les modifications faites aux paramètres de la section précédente.

Des menus contextuels permettent également de modifier certains paramètres directement depuis l’aperçu.

  1. Modification de la vue Tracker

Vous allez maintenant de modifier quelque paramètres de la vue Tracker :

  • Modifier le format d’affichage de la vue ;
  • limiter à 10 le nombre de nodes par page ;
  • supprimer des champs de la vue.

Modification du format

La section FORMAT de la vue indique que Tracker est affichée sous forme de Tableau. Modifiez ce paramètre pour que les nodes s’affichent sous forme de liste.

Le paramètre Format de Tracker est tableau

  • Cliquez sur le lien Tableau pour modifier ce paramètre

Dans la fenêtre qui apparaît vous pouvez choisir le format de la vue.

  • Choisissez Liste HTML

Modification du paramètre Format

  • Bouton Appliquer (tous les affichages)

Une deuxième page popup permet de configurer le style Liste HTML. Vous pourriez par exemple choisir un type de liste ordonnée (items numérotés).

  • Bouton Appliquer (tous les affichages)

Vous pouvez dès à présent constater dans l’aperçu l’impact qu’à eu ce changement de paramètre sur la vue.

La vue tracker avec le style Liste HTML

Modification de la pagination

De la même façon, vous pouvez changer la pagination de cette vue. Par défaut, 25 éléments par page s’affichent en format tableau, vous allez le passer à 10.

  • Cliquez sur le lien Avec pagination, 25 éléments
  • Éléments par page : 10

information.eps

Si le nombre de nodes de votre installation Drupal est inférieur à 10, la pagination ne s’affichera pas.

Modification de la pagination

  • Bouton Appliquer (tous les affichages)

Nouvelle pagination

Une nouvelle section pagination apparaît alors en aperçu. Remarquez qu’un nouveau menu contextuel permet d’accéder directement aux paramètres de pagination.

Suppression de champs

La zone CHAMPS affiche la liste des champs qui apparaissent dans la vue. Vous allez supprimer les champs relatifs aux commentaires.

Les champs de la vue Tracker

  • Cliquez sur le lien réordonner de la section CHAMPS

Liste des champs de la vue

  • Cliquez sur le lien Retirer des trois champs relatifs aux commentaires (Contenu : Nombre de commentaires (Replies), Contenu : Last comment time (Last Post) et Contenu : Nouveaux commentaires)
  • Bouton Appliquer (tous les affichages)

Tracker sans les informations relatives aux commentaires

information.eps

Si vous cliquez sur le lien voir page de la vue Tracker, vous pourrez faire le constat que vos modifications n’ont pas été prise en compte. C’est parce que vous n’avez pas sauvegardé la vue.

Cliquez sur le bouton Enregistrer situé en haut de la page pour prendre en compte les modifications ou Annuler pour ne pas prendre en compte l’ensemble des modifications.

Section d’enregistrement de la vue
  1. Création d’une vue liste des recettes

Vous voilà maintenant prêt à créer votre propre vue. Cette vue sélectionnera les contenus de type Recette et les affichera dans une page sous forme de tableau et dans un bloc.

  1. Formulaire de création
  • Menu Structure — lien Vues
  • Lien + Ajouter une nouvelle vue

La page qui apparaît est l’assistant de création d’une vue.

  • Nom de la vue : Liste des recettes
  • Description : Une page qui affiche la liste de toutes les recettes et un bloc qui affiche les 5 dernières recettes

Nom et description de la vue

Le paramètre Format d’affichage permet de modifier le style des lignes :

  • Format d’affichage : Tableau

information.eps

Pour ce premier exemple, vous n’allez pas utiliser les paramètres de cet assistant pour mieux comprendre les mécanisme de l’interface de views.
  • Bouton Continuer & modifier

Aperçu de la vue après sa création

  1. Sélection des champs

Ajoutez deux champs à votre vue :

  • le champ Prix ;
  • le champ Photo sous forme de miniature (Thumbnail).

information.eps

Le champ Titre a été automatiquement ajouté à la vue par l’assistant.

Ajout du champ prix

  • Cliquez sur le lien ajouter de la section CHAMPS
  • Dans le popup, cochez la ligne Contenu : Prix par personne

astuce.eps

La liste des champs est longue. Si vous savez précisément le champ que vous recherchez, n’hésitez pas à entrer une chaîne dans la zone Recherche.

Sélection d’un champ à ajouter
  • Bouton Ajouter et configurer le champ

S’affiche une deuxième fenêtre popup contenant des dizaine d’options. Cette fenêtre permet de configurer l’affichage du champ.

  • Bouton Appliquer (tous les affichages)

La vue avec un deuxième champs

Ajout du champ photo

Ajouter le champ photo n’est pas plus compliqué :

  • Cliquez sur le lien ajouter de la section CHAMPS
  • Dans le popup, cochez la ligne Contenu : Photo de la recette
  • Bouton Ajouter et configurer le champs

S’affiche alors la deuxième fenêtre popup de configuration du champ photo.

  • Etiquette : Photo
  • Style d’image : Thumbnail
  • Link image to : Contenu
  • Bouton Appliquer (tous les affichages)

Aperçu en tableau avec image

astuce.eps

Chap. IV — 4.5 Image : créez des styles d'image personnalisés

Modification d’un champ

Il manque une étiquette (titre de colonne) au champ titre. Pour l’ajouter, il faut éditer le champ titre :

  • Dans la section CHAMPS, lien Contenu : Titre
  • Cocher Créer une étiquette
  • Étiquette : Titre

Ajout d’une étiquette au champ titre

  • Bouton Appliquer (tous les affichages)

astuce.eps

N’oubliez pas d’enregistrer votre vue de temps à autre en cliquant sur le bouton Enregistrer situé en haut de la page.

information.eps

La section CHAMPS de Views correspond à la clause SELECT d’une requête SQL.

astuce.eps

Vous pouvez créer un raccourci vers la page /liste_des_recettes avec le module chap. IV — 3.3 Shortcuts : gérez la barre de raccourcis pour accéder rapidement au rendu de la vue.
  1. Critères de filtrage

La vue créée affiche toute les nodes (articles, sondages, etc). Vous pouvez restreindre cette liste aux seules nodes de type Recette.

  • Cliquez sur le lien ajouter de la section CRITÈRES DE FILTRAGE
  • Dans le popup, cochez la ligne Contenu : Type
  • Bouton Ajouter et configurer critères de filtre

S’affiche une deuxième fenêtre popup qui permet de configurer le filtre.

  • Opérateur : Fait partie de
  • Types de contenu : Recette
  • Bouton Appliquer (tous les affichages)

information.eps

Le filtre Contenu : Publié (Oui) a été automatiquement ajouté par défaut. Il ne sélectionne que les contenus qui ont la case Publié cochée dans les Options de publication.

Dans l’aperçu, vous pouvez constater que seuls les recettes sont maintenant affichées.

information.eps

La section CRITÈRES DE FILTRAGE de Views correspond à la clause WHERE d’une requête SQL
  1. Critères de tri

Par défaut, la vue est triée par ordre de Date de publication du plus récent au plus vieux. Vous allez supprimer ce critère et ordonner la vue par Titre en ordre alphabétique.

Suppression du critère Contenu : Date de publication (desc)

  • Cliquez sur le lien réordonner de la section CRITÈRES DE TRI
  • Cliquez sur le lien Retirer de la ligne Contenu : Date de publication desc
  • Bouton Appliquer (tous les affichages)

Ajout du critère par ordre alphabétique

  • Cliquez sur le lien ajouter de la section CRITÈRES DE TRI
  • Dans le popup, cochez la ligne Contenu : Titre
  • Bouton Ajouter et configurer critères de tri

S’affiche alors la deuxième fenêtre popup qui permet de configurer le critère.

  • Option : Trier par ordre croissant
  • Bouton Appliquer (tous les affichages)

La vue triée par ordre alphabétique

information.eps

La section CRITÈRES DE TRI de Views correspond à la clause ORDER BY d’une requête SQL

Tri par tableau

Lorsque votre vue utilise un format en Tableau, vous pouvez trier la vue par colonne :

  • Lien Paramètres de la section FORMAT
  • Cochez la case CLASSABLE des colonne désirées

Option de tri par en-tête de colonne

Tri par titre et prix possible

  1. Exercice : modification de la vue
  • Modifier la vue de façon à ce qu’elle s’affiche de la façon suivante :

Ajout d’un champ difficulté et réorganisation des colonnes

Corrigé

Ajout du champ Difficulté

  • Cliquez sur le lien ajouter de la section CHAMPS
  • Dans le popup, cochez la ligne Contenu : Difficulté
  • Bouton Ajouter et configurer le champs

S’affiche alors la deuxième fenêtre popup de configuration du champ.

  • Bouton Appliquer (tous les affichages)

Réordonner les champs

  • Cliquez sur le lien réordonner de la section CHAMPS
  • Déplacez les champs en cliquant sur l’icône de gauche decouverte_6.png

Modifier l’ordre des champs

  • Bouton Appliquer (tous les affichages)
  1. Relations

Lors du chap. II — 4.4.2 Ajout d’un champ à un terme de Taxonomie, vous avez associé à chaque terme

Illustration. Il s’agit maintenant d’afficher dans la vue cette illustration à la place des termes de difficulté (Très facile, Facile, Moyen, etc.)

Votre vue étant basée sur le contenu, vous ne trouverez pas le champ Illustration du terme de taxonomie dans la liste.

Pas de champ pour l’illustration

Il faut alors créer une relation entre la node affichée et son terme de taxonomie du vocabulaire difficulté.

  • Dans la troisième colonne de la page de configuration de Views, cliquez sur le lien ajouter de la section RELATIONS

Ajout d’une relation

S’affiche la liste des liens possibles par rapport à une vue basée sur le contenu. Voici quelques uns de ces liens :

  • lien vers l’utilisateur Auteur de la recette (Contenu : Auteur) ;
  • lien vers les fichiers rattachés au nœud (Utilisation du fichier : Fichier) ;
  • lien vers les différents vocabulaires de taxonomie liés à un type de contenu (Contenu : Difficulté (field_difficulte), Contenu : Provenance (field_provenance), etc.).
  • Sélectionnez la ligne Contenu : Difficulté (field_difficulte)

Ajout de la relation avec le vocabulaire difficulté

  • Bouton Ajouter et configurer relations
  • Bouton Appliquer (tous les affichages)

Le champ Illustration doit être disponible maintenant :

  • Cliquez sur le lien ajouter de la section CHAMPS
  • Dans le popup, cochez la ligne Terme de taxonomie : Illustration

De nouveaux champs sont disponibles grâce à la relation

  • Bouton Ajouter et configurer le champ

S’affiche la deuxième fenêtre popup. Remarquez que Views indique qu’une relation est utilisée pour accéder à ce champ.

Une relation est utilisée pour accéder à ce champ

  • Etiquette : Difficulté
  • Bouton Appliquer (tous les affichages)

information.eps

La section RELATION de Views correspond à la clause JOIN d’une requête SQL
  • Vous pouvez retirer le champ difficulté précédent et réorganiser les champs
  1. Formulaires exposé

Views permet à l’utilisateur de votre vue d’interagir avec son contenu. Pour cela, il est possible d’ajouter des filtres ou des critères de tris.

Voici par exemple le formulaire que vous allez créer :

Le formulaire permettant à l’utilisateur d’interagir avec la vue

Ajout d’un filtre exposé pour le champ Difficulté

Il est aussi simple de créer un filtre exposé à l’utilisateur qu’un filtre normal :

  • Cliquez sur le lien ajouter de la section CRITÈRES DE FILTRAGE
  • Dans le popup, cochez la ligne Contenu : Difficulté (field_difficulte)
  • Bouton Ajouter et configurer critères de filtre

Le champ ajouté est de type terme de taxonomie. Il faut donc choisir le widget à utiliser pour le formulaire :

  • Choisissez Liste déroulante
  • Bouton Appliquer et continuer

S’affiche la fenêtre popup qui permet de configurer le filtre.

  • Cochez la case Exposer ce filtre aux visiteurs, pour leur permettre de le modifier
  • Etiquette : Difficulté

Ajout d’un filtre exposé

  • Bouton Appliquer (tous les affichages)

Dans l’aperçu, apparaît une nouvelle section Filtres exposés au dessus de la vue.

Aperçu du filtre créé

Ajout d’un critère de tri exposé pour le champ difficulté

De la même façon, il est possible d’exposer un critère de tri :

  • Cliquez sur le lien ajouter de la section CRITÈRES DE TRI
  • Dans le popup, cochez la ligne Contenu : Difficulté (field_difficulte)
  • Bouton Ajouter et configurer critères de tri

S’affiche la deuxième fenêtre popup qui permet de configurer le critère.

  • Cochez la case Exposer ce filtre aux visiteurs, pour leur permettre de le modifier
  • Etiquette : Difficulté
  • Bouton Appliquer (tous les affichages)

Aperçu du critère de tri exposé

astuce.eps

Lorsque vous utilisez un style Tableau, vous pouvez permettre à l’utilisateur de trier le contenu en utilisant les en-têtes.

information.eps

Lorsque plusieurs critères de tri sont exposés, ils sont tous gérés par la même liste déroulante.

Tri par titre ou Difficulté

Ajout d’un filtre exposé pour le champ Tags

Pour le champ tags, vous allez utiliser un autre widget que la liste déroulante :

  • Cliquez sur le lien ajouter de la section CRITÈRES DE FILTRAGE
  • Dans le popup, cochez la ligne Contenu : Tags (field_tags)
  • Bouton Ajouter et configurer critères de filtre

Le champs ajouté est de type terme de taxonomie. Il faut donc choisir le widget à utiliser :

  • Choisissez Autocomplétion
  • Bouton Appliquer et continuer

S’affiche la fenêtre popup qui permet de configurer le filtre.

  • Cochez la case Exposer ce filtre aux visiteurs, pour leur permettre de le modifier
  • Etiquette : Mots clés
  • Bouton Appliquer (tous les affichages)

Filtre avec widget d’autocomplétion

Les options des formulaires exposés d’une vue

Une section FORMULAIRE EXPOSÉ permet de modifier certains paramètres :

Section pour configurer les formulaires exposés

  • Formulaire exposé dans un bloc : le formulaire ne sera pas affiché au dessus de la vue mais il sera disponible sous forme de bloc. Il sera alors possible de le positionner dans une autre région du thème ;
  • Style de formulaire exposé : si Valeur requise est choisie, la vue n’affichera aucun résultat tant que l’utilisateur n’a pas utilisé le formulaire ;
  • Paramètres : permet de modifier les textes et quelques options du formulaire.

Options des formulaires exposés

astuce.eps

Notez également l’option Utiliser AJAX qui permet de ne recharger que la vue lorsqu’une valeur du formulaire est modifiée et non pas l’ensemble de la page.

Bravo ! Votre page est maintenant terminée. Vous pouvez Enregistrer votre vue et cliquez sur le lien voir page.

La vue dans son environnement Drupal

  1. Gestion des affichages

Il est possible, pour une même vue, de créer différents affichages. Votre vue Liste des recettes s’affiche sur une page définie par une url. Voici d’autres affichages possibles :

Une autre page sans les photos

Un bloc qui affiche trois recettes

Flux RSS

Nul besoin d’avoir une vue pour chacun de ces trois affichages. Tout cela se gère via l’interface de configuration de Views.

Gestion des affichages dans views

  1. Création du bloc

Vous allez créer le bloc qui affiche les trois recettes au hasard.

  • Dans la section Affichages, lien + Add
  • Sélectionner Ajouter Bloc

Ajout d’un affichage

information.eps

Un bloc ne s’affiche pas par une url mais pas l’interface d’administration des blocs. Il faut donc lui donner un nom dans cette page.
  • Dans la section PARAMÈTRES DU BLOC, modifiez le paramètre Nom du bloc
  • Nom du bloc : Trois recettes au hasard
  • Bouton Appliquer

Si vous enregistrez la page, vous pourrez alors activer le bloc sur la page menu Structure — lien Blocs.

Le bloc de la vue est disponible

Forcément, l’affichage de la page dans un bloc n’est pas adapté. Il va falloir modifier quelques paramètres de la vue pour cet affichage.

  1. Paramètres spécifiques à l’affichage

Il y a quelques modifications à apporter à l’affichage Bloc.

Modification du Format

Le format en Tableau ne convient pas pour un bloc :

  • Si ce n’est pas le cas, sélectionnez l’affichage Bloc

Sélection d’un affichage

  • Lien Tableau de la section FORMAT
  • Choisissez Liste non mise en forme

Si vous appliquez cette modification en cliquant sur le bouton Appliquer (Tous les affichages), l’ensemble des affichages seront impactés. Une liste déroulante en haut de la fenêtre permet de choisir l’affichage à modifier.

  • Choisir Ce(tte) block (supplanter) dans la liste en haut de page

Modification appliquée uniquement à l’affichage en cours

astuce.eps

Remarquez que l’intitulé du bouton Appliquer (cet affichage) à changé pour vous permettre d’éviter l’erreur commune de modifier l’ensemble des affichages.

Il est conseillé d’enregistrer régulièrement votre vue pour pouvoir annuler les modifications en cas d’écrasement des paramètres des autres vues.
  • Bouton Appliquer (cet affichage)
  • Bouton Appliquer (cet affichage) de nouveau pour les paramètres du format

astuce.eps

Les champs dont la valeur a été supplantée pour l’affichage en cours sont notés en italique.

Le champ format est supplanté, le champ titre ne l’est pas

Mise en forme modifiée pour le bloc

  1. Exercice : modification des paramètres d’un affichage

Modifiez les paramètres de l’affichage bloc pour qu’il ait l’aspect suivant :

Bloc de trois recettes au hasard

Corrigé

Suppression des champs Photo et Prix par personne

  • Cliquez sur le lien réordonner de la section CHAMPS
  • Lien Retirer sur les lignes Contenu : Photo de la recette Photo et Contenu : Prix par personne
  • Choisir Cette) block (supplanter) dans la liste en haut de page
  • Bouton Appliquer (cet affichage)

Suppression de l’étiquette du titre

  • Cliquez sur le lien Contenu : Titre (Titre) de la section CHAMPS
  • Décocher la case Créer une étiquette
  • Bouton Appliquer (cet affichage)

Modification du champs difficulté

  • Cliquez sur le lien Terme de taxonomie : Illustration de la section CHAMPS
  • Décocher la case Créer une étiquette
  • Style d’image : Thumbnail
  • Bouton Appliquer (cet affichage)

Affichage de trois éléments et du lien plus

  • Cliquez sur le lien Complet de la section PAGINATION
  • Option Afficher un nombre défini d’éléments
  • Bouton Appliquer (cet affichage)
  • Éléments à afficher : 3
  • Bouton Appliquer (cet affichage)
  • Cliquez sur le lien Lien «plus» de la section PAGINATION
  • Cochez la case Créer un lien «plus»
  • Bouton Appliquer (cet affichage)

Tri au hasard

  • Cliquez sur le lien ajouter de la section CRITÈRES DE TRI
  • Sélectionnez la ligne Global : Au hasard
  • Bouton Ajouter et configurer critères de tri
  • Bouton Appliquer (cet affichage)

Modification du titre

  • Cliquez sur le lien Liste de recettes de la section TITRE
  • Entrez Trois recettes au hasard
  • Bouton Appliquer (cet affichage)

Retirer les filtres exposé

  • Cliquez sur le lien réordonner de la section CRITÈRES DE TRI
  • Lien retirer des lignes avec filtre exposé
  • Bouton Appliquer (cet affichage)
  • Cliquez sur le lien et/ou de la section CRITÈRES DE FILTRAGE
  • Lien retirer des lignes avec filtre exposé
  • Bouton Appliquer (cet affichage)

La page de configuration de l’affichage bloc

  1. Création d’un bloc d’info supplémentaires sur la recette

Une vue peut utiliser des filtres contextuels, c’est à dire que son contenu pourra être différent selon son contexte d’affichage.
Vous allez créer un bloc qui affichera des informations relatives à la node de type Recette qui s’affiche.

Le contenu du bloc change en fonction de la recette affichée

  1. Création du bloc de base
  • Menu Structure — lien Vues
  • Lien + Ajouter une nouvelle vue

L’assistant de création de vue apparaît alors. Complétez-le comme dans l’illustration suivante :

Création de la vue grâce à l’assistant

  • Bouton Continuer et modifier
  1. Création du filtre contextuel

Un filtre contextuel est un paramètre que la vue récupère dans l’Url de la page. Par exemple, l’url d’affichage d’une node est de type node/6. La vue peut donc utiliser le nid du contenu affiché en récupérant le deuxième paramètre de l’url.

  • Cliquez sur le lien ajouter de la section Filtres contextuels
  • Sélectionnez la ligne Contenu : Nid
  • Bouton Ajouter et configurer filtres contextuels

La fenêtre popup de configuration des filtres contextuels s’affiche alors.

  • Choisir l’option Fournir une valeur par défaut à la section Quand la valeur de filtre n’est pas disponible

Valeurs pouvant être trouvées automatiquement par Views

astuce.eps

Cette option Fournir une valeur par défaut est très utilisée pour fournir des arguments aux vues. Views peut trouver les nid des nodes, les uid des utilisateurs, etc. Vous pouvez également entrer directement du code PHP pour générer l’argument.
  • Cocher Supplanter le titre à la section Quand la valeur de filtre est disponible
  • Titre : Recette : %1

Insertion d’un argument dans le titre

  • Bouton Appliquer (tous les affichages)

Aperçu avec filtres contextuels

La section Aperçu automatique n’affiche rien car aucun filtre contextuel n’est fourni. Il est possible d’en fournir un grâce à la zone de texte Aperçu avec filtres contextuels.

Aperçu avec en paramètre la node 10

Test du bloc

Vous pouvez déjà tester si votre bloc fonctionne :

  • Cliquez sur le paramètre Nom du bloc
  • Nom : Informations supplémentaires
  • Enregistrer la vue
  • Placez le bloc Informations supplémentaires en Première barre latérale
  • Chargez une page contenant une recette (attention : la vue ne fonctionne pas avec la page de liste des recettes)

Le bloc s’adapte au contenu affiché

  1. Modification de la sortie par défaut d’un champ

Modification de la balise HTML — Créé il y a

L’affichage d’un champ est entièrement configurable avec Views. Vous allez créer ici un champ qui affichera le temps écoulé depuis la date de création de la recette :

  • Cliquez sur le lien ajouter de la section CHAMPS
  • Sélectionnez la ligne Contenu : Date de mise à jour
  • Bouton Ajouter et configurer champs
  • Étiquette : Créé il y a
  • Format de date : Il y a

Format de date

Pour la présentation, il faudrait que le texte soit en italique. Pour cela, il faut l’inclure dans une balise <em> :

  • Section PARAMÈTRES D’AFFICHAGE
  • Cocher Personnaliser le code HTML du champ
  • Elément HTML : EM

Changement de la balise HTML d’un champ

  • Bouton Appliquer (tous les affichages)

Le nouveau champ du bloc

astuce.eps

Beaucoup d’options dans cette fenêtre permettent de modifier l’affichage du champ. Elles peuvent varier selon le type de champ : n’hésitez pas à les explorer !

Modification du texte — Photo

Vous allez à nouveau utiliser ces options de transformation de texte pour afficher le champ photo... sous forme de texte !

Si la photo est présente, le texte affichera " Photo présente ", sinon, " Photo non présente " :

  • Cliquez sur le lien ajouter de la section Champs
  • Sélectionnez la ligne Contenu : Photo de la recette
  • Bouton Ajouter et configurer champs
  • Décochez Créer une étiquette
  • À la section Comportement en l’absence de résultats, dans la zone de texte Texte en l’absence de résultats, entrez le texte <strong>Photo non présente</strong>

Texte à afficher si la photo est non présente

  • À la section Réécrire les résultats, cochez la case Réécrire la sortie de ce champ
  • Dans la zone de texte, mettez Photo présente

Texte à afficher à la place du contenu du champs

  • Bouton Appliquer (tous les affichages)

Affichage du champs photo sous forme de texte

  1. Exercice : ajouter le lien de modification

Créez un lien « Vous pouvez modifier cette recette » qui mènera directement à la page d’édition de la recette.

Lien d’édition de la recette

Corrigé

  • Cliquez sur le lien ajouter de la section Champs
  • Sélectionnez la ligne Contenu : Lien de modification
  • Bouton Ajouter et configurer champs
  • Décocher Créer une étiquette
  • Texte à afficher : Vous pouvez modifier cette recette
  • Bouton Appliquer (tous les affichages)
  1. Exercice : ajouter le champ Auteur

Ajoutez un champ qui affiche le nom de l’utilisateur auteur de la recette :

Le nouveau champs Auteur

Cet exercice fait appel à des connaissances apprises lors des chapitres précédents, fouillez dans les options de Views.

Corrigé

Dans la liste des champs à ajouter, rien n’est en lien avec le nom de l’utilisateur qui est l’auteur de la node.

Le nom de l’auteur n’est pas présent

Il faut donc ajouter ce champs en passant par une relation.

  • Cliquez sur le lien ajouter de la section RELATIONS
  • Sélectionnez la ligne Contenu : Auteur
  • Bouton Ajouter et configurer relations
  • Bouton Appliquer (tous les affichages)
  • Cliquez sur le lien ajouter de la section CHAMPS

Un grand nombre de champs liés à l’utilisateur sont maintenant disponibles

  • Sélectionnez la ligne Utilisateur : Nom
  • Étiquette : Par
  • Bouton Appliquer (tous les affichages)
  • Réorganisez l’ordre des champs, profitez-en pour supprimer le champ titre
  1. Droits d’accès

Ce bloc ne doit s’afficher que pour les utilisateurs ayant le rôle rédacteur de recettes. Il est possible de gérer ces droits d’accès directement pour le bloc, mais également à partir de Views (ce qui est plus sécuritaire) :

  • Dans la section PARAMÈTRES DU BLOC, cliquez sur le paramètre Droits d’accès

Vous pouvez alors choisir le type de restriction d’accès pour votre vue :

  • Aucun(e) restriction d’accès ;
  • Droit d’accès : permet de choisir le droit d’accès (Menu Personnes — onglet Droits) que l’utilisateur devra posséder pour voir la vue ;
  • Rôle : permet de choisir le rôle que l’utilisateur devra posséder pour voir la vue.

Restriction d’accès à la vue

  • Choisissez l’option Rôle
  • Bouton Appliquer (tous les affichages)
  • Cochez les rôles administrator et Rédacteur de recettes
  • Bouton Appliquer (cet affichage)

Puce module.eps

Vous pouvez modifier l’affichage des vues chap. V — 6 Le theming des vues dans les thèmes Drupal
  1. 2 - Site multilingue

Créer un site multilingue est une tâche complexe, il faut pouvoir traduire tous les éléments du site : l’interface, le contenu que les utilisateurs ajoutent, les menus, les termes de taxonomie, les blocs, etc. Drupal 7 supporte très bien nativement l’internationalisation.

Dans ce chapitre, vous allez découvrir les modules du coeur de Drupal 7. Ensuite, vous apprendrez comment participer à l’effort de traduction du coeur de Drupal et des modules.

  1. Locale : traduire l’interface de Drupal

Lors de l’installation de Drupal (chap. I 1.1.3. Installation de la langue française), vous avez ajouté la traduction française de l’interface Drupal mais la langue anglaise, installée par défaut est toujours conservée. Vous allez découvrir comment passer l’interface de Drupal d’une langue à l’autre en créant un site multilingue.

  1. Configuration

Le module Locale est installé et activé par défaut si la langue française a été ajoutée durant le processus d’installation.

  • Menu Configuration — lien Langues (ou lien configurer du module Locale)

L’anglais et le français sont installées sur votre configuration

  • Onglet Détection et sélection

Cet onglet permet d’indiquer à Drupal comment il doit choisir la langue de l’utilisateur courant.

URL

Se base sur l’URL de la page. Cela peut être détecté via le nom de domaine (fr.votresite.com) ou par préfixe de chemin (www.votresite.com/fr)

Session

Cherche un paramètre en fin d’URL (http://www.votresite.com?language=fr)

Utilisateur

Recherche la langue activée dans le profil de l’utilisateur

Navigateur

Recherche la langue du navigateur

Par défaut

Langue activée par défaut sur Drupal (écran précédent)

Il est possible de cumuler les méthodes de détection et de les réordonner.

  • Cliquez sur le lien Configurer de la ligne URL
  • Choisir Préfixe de chemin
  • Bouton Enregistrer la configuration

Ainsi la langue sera négociée selon l’url :

  • http://drupal.tld/en/node/1 : langue anglaise ;
  • http://drupal.tld/fr/node/1 : langue francaise.
  • Cochez les cases Activé des lignes URL et Utilisateur

Paramétrage de détection de la langue par Drupal

  • Bouton Enregistrer les paramètres

information.eps

Par défaut, le préfixe de chemin est nul pour la langue anglaise. Il est possible de modifier cela pour plus de clarté :

  • Menu Configuration — lien Langues
  • Lien modifier de la langue English
  • Code de langue du préfixe de chemin : en

Ajout d’un préfixe de chemin pour la langue anglaise

  • Bouton Enregistrer la langue
  1. Ajout d’une langue

Vous allez maintenant ajouter la langue espagnole à votre site. Pour cela, il faut d’abord copier le fichier de traduction dans votre installation Drupal.

  • Cliquez sur le menu Download & Extend de www.drupal.org
  • Dans la section Translations, cliquez sur le lien All Translations

astuce.eps

Vous pouvez accéder à cette page directement depuis l’adresse http://localize.drupal.org

information.eps

Pour pouvoir télécharger des fichiers sur ce site, il faut être connecté. Créez vous un compte sur http://www.drupal.org
  • Dans la liste des langues, choisir Spanish
  • Téléchargez le fichier correspondant à la version 7 de Drupal
  • Enregistrez le fichier dans le répertoire profile\standard\translation de votre installation
  • Renommez le fichier en es.po, vous devriez obtenir un fichier profile\standard\translation\es.po

Vous pouvez ajouter la langue espagnol, ses traductions seront importées automatiquement :

  • Menu Configuration — lien Langues
  • Lien + Ajouter une langue
  • Choisir Espagnol (Español) dans la liste

Ajout d’une langue à un site Drupal

  • Bouton Ajouter une langue

Votre site est maintenant tri-lingue !

  1. Bloc de sélecteur de langue

Le module Locale met à disposition un bloc permettant de choisir la langue courante. Cela va vous permettre de faire fonctionner le site dans les trois langues installées

  • Menu Structure — lien Blocs
  • Mettez le bloc Sélecteur de langue (User interface text) en région Première barre latérale
  • Bouton Enregistrer les blocs
  • Retournez sur la page d’accueil du site

Vous pouvez alors modifier la langue courante en utilisant le bloc.

L’interface de Drupal en espagnol

information.eps

Remarquez l’URL qui est sous la forme : http://drupal.tld/es
  • Repassez en langue française après avoir eu la satisfaction de constater que vous compreniez parfaitement l’Espagnol.
  1. Traduire l’interface

Vous avez peut-être constaté que certains modules de Drupal ne sont pas traduits en français ou uniquement partiellement. Il est possible de traduire ces chaînes directement à partir de l’interface de Drupal. Pour cet exemple, vous allez traduire certaines chaînes du module Chaos tools

  • Téléchargez et activez les module Chaos tool suite (http://drupal.org/project/ctools) — Version utilisée pour ce livre 7.x-1.0-rc1

Description du module non traduite

information.eps

Il est possible qu’au moment ou vous lirez ces lignes, le module soit livré avec ses traductions. Dans ce cas, choisissez un autre module non traduit.

Vous allez traduire la chaîne « A library of helpful tools by Merlin of Chaos. » pour votre site :

  • Menu Configuration — lien Traduire l’interface

Sur cette page, un tableau vous indique quel est la proportion des chaînes traduites dans les différentes langues installées.

Statut des traductions de l’interface

  • Onglet Traduire

Le formulaire permet de rechercher des chaînes dans tous les modules et thèmes installés.

  • La chaîne contient : library of helpful
  • Bouton Filtrer

La chaîne a été trouvée dans la page admin/modules

information.eps

Si vous ne trouvez pas une chaîne grâce à cet interface, vérifiez que :

  • vous respectez la casse (majuscules — minuscules) ;
  • que la chaîne ne contient pas d’arguments (Recent posts for %1 — ou %1 est remplacé par le nom d’utilisateur).
  • Lien modifier de la chaîne

Vous pouvez alors proposer un texte de remplacement pour les différents langages installés

  • Français : Une bibliothèque d’outils utiles par Merlin of Chaos

Traduction de la chaîne en français

  • Bouton Enregistrer les traductions

La colonne LANGUES de l’interface de recherche montre alors que la chaîne est bien traduite en français mais pas en espagnol.

Chaîne à présent traduite en français

Vous pouvez retourner sur la page des modules pour constater le résultat de votre travail :

La chaîne est remplacée dans l’interface

  1. Exercice : traduire les chaînes d’une vue

Pour exécuter cet exercice, vous allez utiliser la vue créée chap. IV — 1.2 Création d’une vue liste des recettes.

  • modifiez le titre de la vue en Recipes list ;
  • traduisez le titre en français ;
  • testez si le titre change lorsque vous passez d’anglais à français.

Corrigé

Modifiez le titre de la vue en Recipes list

  • Menu Structure — lien Vues
  • Lien modifier de la vue Liste des recettes
  • Modifiez l’argument Titre de la section TITRE
  • Entrez le texte Recipes list

Modification du titre d’une vue

  • Bouton Appliquer (tous les affichages)
  • Bouton Enregistrer de la vue

À ce moment, le titre de la page de la vue est Recipes list

Traduisez le titre en français

  • Menu Configuration — lien Traduire l’interface
  • Onglet Traduire
  • La chaîne contient : Recipes
  • Bouton Filtrer
  • Lien modifier
  • Français : Liste des recettes

Traduction du titre de la vue

  • Bouton Enregistrer les traductions

Test

Pour savoir si tout fonctionne, il faut afficher la vue Liste des recettes et ensuite utiliser le bloc de langues pour changer la langue :

  • Cliquez sur le lien voir page de la vue ou entrez l’URL fr/liste-des-recettes
  • Choisissez la langue Français dans le bloc

Titre de la vue en français

  • Choisissez la langue English dans le bloc

Titre de la vue en anglais

information.eps

Si vous voulez créer un site multilingue, il faut toujours entrer ses chaînes de caractères d’origine en anglais et ensuite les traduire.

Cela est vrai pour le module Views, mais également lorsque vous créez un thème ou un module et utilisez la fonction t() (chap. VI — 1.2.5 Conventions et finitions).
  1. Participer à l’effort de traduction

Le site localize.drupal.org a été mis en place pour centraliser l’ensemble des traductions des modules de Drupal. Il permet ainsi :

  • d’exporter les traductions existantes d’un module et les importer sur votre installation ;
  • de traduire des chaînes de modules directement via le site localize.drupal.org ;
  • de se mettre en lien avec le groupe de traduction de Drupal en Français ;
  • d’importer les traductions faites sur votre propre installation.
  1. Découverte du groupe de traduction de Drupal en Français
  • Rendez-vous sur localize.drupal.org, vérifiez que vous êtes bien connecté
  • Dans le bloc de droite Quick navigation, sélectionnez French dans la liste Pick a language

Sélection de la langue

  • Cliquez sur le bouton Go there

Vous arrivez alors sur la page d’accueil du groupe de traduction de Drupal en français (French team)

Présentation de la French team !

Cinq onglets permettent d’accéder aux différentes fonctionnalités de localize.drupal.org :

Overview

Page d’accueil du groupe, elle regroupe des liens vers les manuels de traductions, une liste de meilleurs contributeurs et des liens vers les fichiers de traductions des différentes versions de Drupal

Board

Blog du groupe

Translate

Interface permettant de traduire des chaînes de tous les modules Drupal

Import

Importer un fichier de traduction vers localize.drupal.org

Export

Exporter un fichier de traduction de localize.drupal.org
  1. Importer les traductions d’un module

Vous avez traduit au chapitre précédent une chaîne du module Chaos tool suite. Mais d’autres utilisateurs avaient déjà traduit ces chaînes.

Vous allez exporter le fruit de leur travail depuis localize.drupal.org et les importer sur votre site.

  • Onglet Export de la page d’accueil du groupe (http://localize.drupal.org/translate/languages/fr)
  • Project : Chaos tool suite (ctools)

astuce.eps

Un lien vers cette page est disponible depuis la page du module, en colonne de droite
(http://drupal.org/project/ctools).

Lien vers la page des traductions
  • Release : 7.x-1.0-rc1 only

Export des traductions

  • Bouton Export Gettext file

Repérez où votre navigateur a enregistré le fichier (.po) et retournez à votre site Drupal :

  • Menu Configuration — lien Traduire l’interface
  • Onglet Importer
  • Fichier de langue : pointez vers le fichier .po que vous avez téléchargé
  • Bouton Importer

Résultat de l’importation du fichier

astuce.eps

Si beaucoup de chaînes restent non traduites et que vous pensez qu’elles devraient l’être, choisissez All releases merged (toutes versions confondues) lors de l’export.

Les descriptions du module Chaos tool suite sont maintenant en français

  1. Partager ses traductions avec la communauté

Dans le module CTools, certaines chaînes ne sont pas encore traduites par la communauté.

Le nouveau module de ctools n’est pas traduit

Vous pouvez proposer une traduction à la communauté.

  • Onglet Translate de la page d’accueil du groupe (http://localize.drupal.org/translate/languages/fr)
  • Project : Chaos tool suite (ctools)

Un formulaire propose des listes pour trouver ce que vous voulez traduire :

  • Cliquez sur le lien Reveal more filters
  • Status : Untranslated (Non traduites)
  • Contains : custom styles

L’interface de recherche de chaînes de localize.drupal.org

Vous pouvez alors proposer ou corriger une traduction et l’ensemble de la communauté en profitera !

Proposition d’une traduction

  1. Localization client : une interface Ajax pour traduire l’interface

Voici un module plus convivial pour traduire les chaînes de l’interface et les partager automatiquement sur http://localize.drupal.org.

  • Téléchargez et activez le module Localization client (http://drupal.org/project/l10n_client) — Version utilisée pour ce livre 7.x-1.0

information.eps

Il faut désactiver le module Overlay pour que Localization client fonctionne de manière optimale.

Utilisation

Une fois le module activé, une barre apparaît en bas de page. Vous pouvez l’utiliser pour traduire quelques chaînes du module CTools :

  • Menu Modules
  • Cliquez sur le lien Traduire le texte en bas à droite de la page

Les chaînes déjà traduites dans la langue courante sont en vert, les non traduites en blanc.

  • Repérez une chaîne non traduite dans la page et utilisez la zone de recherche de Localization Client pour la retrouver dans la liste TEXTE SUR LA PAGE
  • Sélectionnez la ligne à traduire
  • Entrez une traduction pour la chaîne dans la zone TRADUCTION EN FRANÇAIS

Traductions avec Localization client

  • Bouton Enregistrer la traduction

La traduction a été sauvegardée en locale

Si vous rechargez la page, la chaîne est bien traduite.

astuce.eps

Pour traduire une chaîne en espagnol, il faut que la langue courante soit espagnol.

Lien avec un serveur de traduction (localize.drupal.org)

Il est possible de configurer Localize Client pour que vos traductions soient directement envoyées vers
http://localize.drupal.org :

  • Menu Configuration — lien Langues
  • Onglet PARTAGE
  • Cochez la case Activer le partage des traductions avec le serveur

Configuration du partage des traductions

  • Bouton Enregistrer la configuration

Il faut maintenant que le site localize.drupal.org puisse vous identifier. Pour cela, il faut entrer une clé unique dans votre profil utilisateur Drupal.

  • Menu Bonjour Admin
  • Onglet Modifier
  • À la section Client de traduction, cliquez sur le lien proposé (qui commence par
    http://localize.drupal.org)
  • Si vous êtes déjà connecté sur drupal.org, une clé vous est fournie
  • Copiez la clé dans la zone Your Localization Server API key

Ajout d’une clé dans le profil

  • Bouton Enregistrer

À partir de là, lorsque vous utiliserez Localization Client pour traduire une chaîne, le message suivant apparaîtra :

Partagez votre talent de traducteur avec Localization Client !

  1. Content Translation : traduire le contenu

Vous savez traduire l’interface des modules et des thèmes de Drupal. Il vous reste à traduire le contenu de votre site. Dans ce chapitre, vous allez créer une page en français et proposer une traduction en anglais et en espagnol.

  • Activez le module Content translation (module présent par défaut)
  1. Configuration

Vous pouvez configurer la gestion multilingue du contenu par type de contenu (Article, Page, Recette etc.). Ici, vous allez traduire un contenu de type Page de base.

  • Menu Structure — lien Types de contenu
  • Lien modifier du type Page de base
  • Onglet Options de publication

De nouvelles options pour la Gestion mutilingue sont apparues. Par défaut, celle-ci est désactivée.

Les options multilingue par type de contenu

  • Choisissez Activé, avec traductions

information.eps

L’option Activé permet de choisir la langue de l’article.

L’option Activé, avec traductions permet de choisir la langue de l’article et de le mettre en lien avec sa(ses) traduction(s).
  • Bouton Enregistrer le type de contenu
  1. Utilisation

Vous allez créer un contenu en français que vous traduirez ensuite :

  • Menu Contenu
  • Lien + Ajouter du contenu
  • Lien Page de base
  • Title : Bonjour le monde
  • Body : Il pleut aujourd’hui !
  • Langue : Français

Ajout d’une page en français

  • Bouton Enregistrer

Lorsque vous ajoutez la node que vous venez de créer, le bloc de langues indique que l’article existe uniquement en français.

Le bloc de langue et le nouvel onglet Traduire

À présent, il faut traduire cette page en anglais :

  • Onglet Traduire
  • Lien ajouter une traduction de la ligne English

Drupal créé une copie de la page en français. Il ne reste plus qu’au traducteur de remplacer les chaînes :

  • Title : Hello World
  • Body : It’s raining today !
  • Bouton Save

Vous pouvez changer la langue courante d’anglais à français, le contenu est automatiquement traduit ainsi que l’interface.

Recommencez l’opération pour la langue espagnol.

  • Onglet Traduire

La traduction anglaise existe, manque la traduction espagnole

  • Lien ajouter une traduction de la ligne Spanish

information.eps

Chaque page de traduction est une node à part entière, le module Content translation enregistre seulement un lien entre les nodes.

Grâce à ce système, il est donc possible de traduire tous les champs d’une node (texte, photo, fichiers attachés, liens, etc.)
  • Title : Hola mundo
  • Body : Esta lloviendo hoy !
  • Bouton Guardar

astuce.eps

Lorsque vous modifiez une node qui possède une traduction, vous pouvez signaler aux nodes traduites que leur contenu est périmé.

Périmer les traductions d’une node

Ainsi, une notification apparaîtra dans l’onglet Traduire :

Indication de traduction périmée
  1. 3 - Administrer Drupal
    1. Dashboard : créez un tableau de bord pour l’administrateur

La page du tableau de bord, accessible par le premier élément de la barre de menu de Drupal, est complètement configurable par simple Glisser/Déposer. Il peut vous permettre d’accéder aux tâches d’administrations de votre site.

information.eps

Il ne faut pas confondre le lien Tableau de bord du module Dashboard et la page Rapports / Tableau de bord qui informe sur l’état de santé de votre installation.

Installation

Le module Dashboard fait partie du coeur de Drupal et est activé par défaut.

Configuration

Sur cette page, vous pouvez afficher tous les blocs disponibles du site dans l’une ou l’autre colonne.

  • Menu Tableau de bord
  • Cliquez sur le lien +Personnaliser le tableau de bord

Apparaît alors la liste des blocs désactivés du tableau de bord

astuce.eps

Si le bloc que vous désirez afficher n’est pas disponible, cliquez sur le lien Ajouter d’autres blocs
  • Vous pouvez ensuite disposer vos blocs par simple Glisser / Déposer.

Le tableau de bord en court de personnalisation

  1. Administration menu : une alternative à Toolbar

Ce module a rendu beaucoup de services aux utilisateurs de Drupal 6, alors que Toolbar n’existait pas encore. Une version pour Drupal 7 existe et peut, dans certains cas, remplacer avantageusement Toolbar.

Installation

  • Téléchargez et installez le module (version utilisée pour ce livre 7.x-3.0-rc1).
  • Activez le module Administration menu

information.eps

Il est préférable désactiver le module Toolbar pour plus de cohérence.

Utilisation

Après activation, la Toolbar est alors remplacée par un menu déroulant qui permet d’accéder à un maximum de tâches d’administration en un seul clic.

Le module administration menu

astuce.eps

Le module Administration menu Toolbar style propose les mêmes fonctionnalités mais avec un thème se rapprochant plus de Toolbar.

Adminsitration menu et le style Toolbar
  1. Shortcuts : gérez la barre de raccourcis

Par défaut, en dessous de la Toolbar (barre de menu du haut) se trouve une zone grisée contenant les liens Ajouter un contenu et Trouver des contenus. Il est possible de gérer ces raccourcis grâce au module Shortcuts.

Installation

Le module Shortcuts fait partie du coeur de Drupal et est activé par défaut. Le désactiver supprimera la zone grisée.

Drupal 7 et le module Shortcuts désactivé

astuce.eps

Vous pouvez afficher ou cacher la barre de raccourcis en cliquant sur la flèche noire en haut à droite.

Gestion des liens

Vous pouvez modifier la liste des raccourcis sur la page de configuration du module.

  • Cliquez sur le lien Modifier les raccourcis à droite de la barre Shortcuts.

astuce.eps

Vous pouvez accéder à cette page de cette façon :

  • Menu Configuration
  • Section Interface utilisateur — Raccourcis
  • Lien lister les liens de la ligne Par défaut.

S’affiche alors la page qui liste les raccourcis. Dans cet exemple, vous allez ajouter un raccourci vers la page d’ajout d’un article :

  • Cliquez sur le lien + Ajouter un raccourci
  • Nom : Ajouter un article
  • Chemin : node/add/article

Page d’ajout d’un raccourci

  • Bouton Enregistrer

Le lien est ajouté dans la barre et dans la liste

Il est possible de réorganiser les raccourcis et d’en désactiver certains en les plaçant dans la zone Désactivé. Cela permet de ne pas avoir à les recréer au moment ou vous en aurez à nouveau besoin.

Ensemble de raccourcis

Vous pouvez créer des ensembles de raccourcis et ensuite permettre à l’utilisateur de choisir lequel il préfère afficher dans son profil.

  • Menu Configuration
  • Section Interface utilisateur — Raccourcis
  • Lien + Ajouter un ensemble de raccourcis
  • Nom de l’ensemble : A vos toques
  • Bouton Créer un nouvel ensemble.

Le nouvel ensemble contient alors les raccourcis de l’ensemble par défaut.

Liste des ensembles de raccourcis

Gestion des droits

Chaque utilisateur du site peut choisir la barre d’outils qu’ils préfèrent utiliser. Pour cela, il faut tout d’abord leur attribuer les droits d’accès.

  • Menu Personnes
  • Onglet Droits d’accès
  • Section Shortcut
  • Cochez la case Choisir un ensemble de raccourcis pour les utilisateurs identifiés.

Droits d’accès pour le module Shortcuts

  • Cliquez sur Enregistrer les droits d’accès.

À présent les utilisateurs peuvent choisir leur barre de raccourcis.

  • Allez sur la page de compte d’un utilisateur
  • Onglet Raccourcis

Choix du menu de raccourcis par un utilisateur

  1. Module filter : administration de la liste des modules

Voici un module très simple mais qui peut s’avérer utile lorsqu’un grand nombre de modules sont activés sur votre installation Drupal.

Installation

  • Téléchargez, installez et activez le module (version utilisée pour ce livre 7.x-1.5)

Utilisation

  • Menu Modules

Vous pouvez alors afficher les modules par catégories ou les filtrer selon certains critères.

Page module avec le module Filter activé

  1. Token : des jetons pour les modules

Token est un module qui peut-être utilisé par d’autres modules. Beaucoup des fonctionnalités de la version 6 sont intégrées au coeur de Drupal 7. Cependant, une petite partie n’a pas été intégrée.

Token permet d’entrer des jetons dans certaines chaînes de caractères qui seront ensuite remplacés par des valeurs variables. Par exemple, [current-page:title] sera remplacé par le titre de la page.

Installation

  • Téléchargez et activez le module token (http://drupal.org/project/token) — Version utilisée pour ce livre 7.x-1.0-beta4
  • Allez sur la page d’aide du module Aide — Token

Liste des Tokens diponibles

Utilisation

Vous ne pouvez pas utiliser le module Token seul. Ce sont les autres modules qui l’utilisent.

Voici quelques exemples :

Token dans Pathauto

Répertoire du fichier pour un champs image

astuce.eps

Pour insérer facilement un token, cliquez d’abord dans la zone de texte ou vous désirez l’insérer puis sur le lien du Token. Il n’y aura alors pas besoin de faire de copier/coller.
  1. Google Analytics : mesurez l’audience de votre site

Google Analytics est un service gratuit qui mesure l’audience des sites web.

Le module Drupal Google Analytics permet d’ajouter le code javascript adéquat à chaque page de votre site pour que Google Analytics puisse établir ses rapports statistiques.

Installation

Le prérequis pour paramétrer le module est d’avoir un compte Google. Vous pouvez en créer un sur http://www.google.fr.

  • Téléchargez et activez le module Google Analytics (http://drupal.org/project/google_analytics) — Version utilisée pour ce livre 7.x-1.2

Configuration

  • Rendez-vous sur le site de Google Analytics : http://www.google.com/intl/fr/analytics/
  • Bouton Accéder à Google Analytics
  • Connectez-vous avec votre compte Google
  • Bouton Inscription
  • Entrez l’URL racine de votre site Drupal.
  • Cliquez sur le bouton Continuer.
  • Dans le code Javascript, notez bien le numéro commencant par UA-xxxxxx-x

google_1.pngVotre site est sous surveillance

astuce.eps

Vous pouvez retrouver ce code en cliquant sur le lien Modifier de votre site, puis sur le lien Vérifier l’état en haut à droite du formulaire.

Rendez-vous sur la page de configuration du module :

  • Menu Configuration — lien Google Analytics.
  • Il faut maintenant entrer votre numéro de compte de Google Analytics (UA-xxxxxx-x) dans le champ Numéro du compte Google Analytics.
  • Bouton Enregistrer la configuration

Quelques heures plus tard, vous devriez avoir accès aux statistiques de votre site

google_2.pngUn rapport de Google Analytics

  1. Rules : automatisation de tâches

Rules est un module qui permet d’automatiser des actions lorsque certains événements se réalisent et en fonction de certaines conditions.

Voici des exemples d’événements :

  • après l’ajout d’un article ;
  • lorsqu’un utilisateur se déconnecte ;
  • après avoir effacé un terme de taxonomie.

Voici des exemples de condition :

  • l’article est de type « Recette » ;
  • l’utilisateur a pour rôle « Rédacteur de recette » ;
  • le terme de taxonomie appartient au vocabulaire « Tags ».

Voici des exemples d’actions :

  • envoyer un email ;
  • afficher un message système ;
  • ajouter un terme de taxonomie.

Via l’interface de Rules, il est donc possible de combiner tout ces éléments pour obtenir une fonctionnalité telle que « Après l’ajout d’un article de type Recette, envoyer un email à l’auteur de la node ».

information.eps

Rules est un module très vaste. Les règles réalisées ici n’offrent qu’un petit aperçu des possibilités du module.
  • Téléchargez et activez les module Entity API (http://drupal.org/project/entity) — Version utilisée pour ce livre 7.x-1.0-beta10 et Rules (http://drupal.org/project/rules) — Version utilisée pour ce livre 7.x-2.0-rc2

information.eps

Le module Trigger intégré au coeur de Drupal contient les mêmes fonctionnalités que Rules mais tend à être moins utilisé.
  1. Création d’une première règle

Lorsqu’un utilisateur se déconnecte du site, il est redirigé vers la page d’accueil du site. Votre première règle va rediriger l’utilisateur vers une page d’adieu si il a le rôle « Rédacteur de recettes ».

  • Commencez par ajouter une nouvelle node de type Page de base
  • Titre : Au revoir
  • Body : Merci d’avoir participé à ce site en tant que créateur de recettes !
  • Alias d’URL : byebye

Vous pouvez maintenant créer votre règle :

  • Menu Configuration — lien Règles (ou lien Configurer du module Rules)
  • Lien + Ajouter une nouvelle règle
  • Nom : Redirection après déconnexion

Il faut également choisir un événement.

  • Réagir à l’événement : dans la section Utilisateur, choisir L’utilisateur s’est déconnecté

L’assistant de création d’une règle

  • Bouton Enregistrer

Un événement est donc ajouté. Vous allez maintenant ajouter l’action à déclencher lorsque cet événement se réalise.

  • Lien + Ajouter action
  • Dans la liste, à la section Système, choisir Redirection de page

La page se recharge alors, les options de configuration de l’action s’affichent :

  • Valeur : byebye (ou le chemin vers la page que vous avez créé)
  • Bouton Enregistrer

Le but de cette règle est de ne rediriger que les utilisateurs ayant le rôle Rédacteur de recette. Il faut donc ajouter cette condition :

  • Lien + Ajouter condition
  • Dans la liste, à la section Utilisateur, choisir L’utilisateur a le(s) rôle(s)
  • Dans la liste des Rôles, choisir Rédacteur de recettes
  • Bouton Enregistrer

La règle avec son événement, sa condition et son action

  • Bouton Enregistrer les modifications

Vous pouvez maintenant tester votre règle en vous déconnectant avec un utilisateur ayant pour rôle Rédacteur de recettes.

Redirection de l’utilisateur vers la page d’adieu

Vérifiez également qu’il n’y a pas de redirection lorsque vous vous déconnectez avec l’utilisateur administrateur.

  1. Utilisation des valeurs des champs

Il est possible de créer des règles en ajoutant des conditions sur les valeurs des champs des entités. Vous allez en créer une qui teste si une image est présente sur une node de type recette lorsque celle-ci est ajoutée au site ou qu’elle est modifiée.

  • Menu Configuration — lien Règles
  • Lien + Ajouter une nouvelle règle
  • Nom : message si pas d’image dans une recette
  • Réagir à l’événement : dans la section Noeud, choisir Après l’enregistrement d’un nouveau contenu
  • Bouton Enregistrer

L’action se déclenchera alors lors de l’ajout d’une nouvelle recette mais elle doit également se déclencher lors de la mise à jour d’une recette. Il faut donc ajouter un deuxième événement :

  • Lien + Add event
  • Réagir à l’événement : dans la section Noeud, choisir Après mise à jour d’un contenu existant
  • Bouton Ajouter

L’action se déclenche pour deux évènements

Ajoutez maintenant l’action à déclencher. Rien de nouveau ici :

  • Lien + Ajouter action
  • Dans la liste, à la section Système, choisir Show a message on the site
  • Valeur : Cette recette n’a pas d’image !
  • Type de message : Avertissement
  • Bouton Enregistrer

L’action ne doit être déclenchée que pour les nodes de type Recette. Cette condition est simple également :

  • Lien + Ajouter condition
  • Dans la liste, à la section Noeud, choisir Content is of type
  • Dans la liste des Types de contenu, choisir Recette
  • Bouton Enregistrer

Reste à ajouter une condition pour tester la valeur du champ image.

  • Lien + Ajouter condition
  • Dans la liste, à la section Données, choisir Data value is empty

La liste Data selector se complète au fur et à mesure des éléments sélectionnés. Si vous choisissez un item contenant (...), cela veut dire qu’il faudra sélectionner un autre item ensuite :

  • Choisissez l’item node:... (contenu créé)

Première sélection

La liste se recharge alors :

  • Choisissez alors node:field-image (Photo de la recette)

Deuxième sélection

  • Bouton Enregistrer
  • Bouton Enregistrer les modifications

Vous pouvez maintenant tester la règle :

  • Éditez et sauvegardez une recette contenant une image : aucun message ne s’affiche ;
  • Éditez et sauvegardez une recette ne contenant pas d’image : le message s’affiche.

Message d’avertissement

  1. Exercice : envoyer un mail lorsqu’une recette chinoise est envoyée
  • Créez une règle qui envoie un mail à l’adresse recette_asie@example.com lorsqu’une recette ayant pour provenance Chine est créée.

Corrigé

  • Menu Configuration — lien Règles
  • Lien + Ajouter une nouvelle règle
  • Nom : Mail pour recette chinoise
  • Réagir à l’événement : Dans la section Noeud, choisir Après l’enregistrement d’un nouveau contenu
  • Bouton Enregistrer

Ajoutez maintenant l’action :

  • Lien + Ajouter action
  • Dans la liste, à la section Système, choisir Envoi de courriel
  • Valeur : recette_asie@example.com (ou votre adresse mail)
  • Sujet : Une nouvelle recette chinoise a été envoyée par [node:author]

astuce.eps

Vous pouvez utiliser la section Motifs de substitution (Token) pour connaître la syntaxe des variables à ajouter à vos chaînes.

Les motifs de substitution disponibles pour un champ texte
  • Message :
    La recette [node:title] a été ajoutée. <a href=»[node:url]»>Cliquez ici pour la consulter.</a>
  • Bouton Enregistrer

information.eps

Lisez le chap. III — 1.5 Configuration du serveur pour l’envoi de mail pour que votre installation Drupal puisse envoyer des mails.

Reste à ajouter les conditions. La première filtrera uniquement les nodes de type recette :

  • Lien + Ajouter condition
  • Dans la liste, à la section Noeud, choisir Content is of type
  • Dans la liste des Types de contenu, choisir Recette
  • Bouton Enregistrer

Dans la seconde, on doit savoir si le terme de taxonomie du champ « Provenance » est « Chine »

  • Lien + Ajouter condition
  • Dans la liste, à la section Données, choisir Data comparison
  • Choisissez l’item node:... (contenu créé)
  • Choisissez l’item node:provenance:... (Provenance)
  • Choisissez l’item node:provenance:name (Nom)
  • Bouton Continuer

Vous devez maintenant tester si le champ provenance est égale à la chaîne « Chine » :

  • Opérateur : égale
  • Valeur : Chine
  • Bouton Enregistrer

La règle dans son ensemble

  • Créez une recette ayant pour provenance la Chine pour tester votre règle.

Message reçu !

  1. 4 - Contenu
    1. CKEditor : éditeur Wysiwyg complet

Successeur de FCKEditor, CKEditor est l’un des éditeur Wysiwyg les plus utilisé par la communauté Drupal, notamment grâce à sa bonne compatibilité avec IMCE et la possibilité de faire des imports de texte depuis Word sans perdre sa mise en forme.

Le module Wysiwyg permet d’installer cet éditeur facilement.

  • Menu Configuration — Profils Wysiwyg
  • À la section Instructions d’installation, rechercher CKEditor

Section CKEditor de Wysiwyg

  • Cliquez sur le lien Télécharger
  • Télécharger l’archive de CKEditor — (version utilisée pour ce livre CKEditor 3.6.1)
  • Extraire l’archive dans /sites/all/libraries
  • Recharger la page de configuration de Wysiwyg et vérifiez que Wysiwyg a bien localisé CKEditor

CKEditor est prêt à être utilisé

Il faut maintenant créer un format de texte pour CKEditor.

  • Menu Configuration — lien Formats de texte
  • Lien + Ajouter un format de texte
  • Nom : CKEditor
  • Ne cochez aucun filtre
  • Bouton Enregistrer la configuration

Associez l’éditeur CKEditor au format de texte :

  • Retournez sur la page de configuration des profils Wysiwyg : menu Configuration — Profils Wysiwyg
  • Choisissez l’éditeur CKEditor pour le Format de texte CKEditor créé
  • Bouton Enregistrer

Il reste à modifier les options de l’éditeur :

  • Lien Modifier de la ligne CKEditor
  • À la section Configuration basique, choisissez Francais pour la langue
  • À la section Boutons et plugins, cochez les cases des fonctionnalités (boutons) que vous voulez ajouter à votre éditeur

Ajout des boutons

  • Bouton Enregistrer

Vous pouvez utiliser votre éditeur en choisissant le format de texte CKEditor pour une zone de texte.

L’éditeur en action

information.eps

Regardez les fonctionnalités avancées de type Agrandir, Collage à partir de Word, Tableau, Afficher les blocs et vous aurez un aperçu de la puissance de cet éditeur.
  1. IMCE : insérer des images dans un texte à partir de CKEditor

Avec le module IMCE, vous pouvez télécharger des images de votre disque dur dans votre éditeur Wysiwyg. Des outils permettent ensuite de positionner et de redimensionner ces images.

Puce module.eps

Le module installé chap. II — 3.4 Wysiwyg : installer un éditeur Wysiwyg doivent être installés et configurés
  • Téléchargez et activez le module IMCE (http://drupal.org/project/imce) — Version utilisée pour ce livre 7.x-1.4

Pour faire fonctionner IMCE avec le module Wysiwyg, il faut installer le module IMCE Wysiwyg bridge qui ne demande aucune configuration.

  • Téléchargez et activez le module IMCE Wysiwyg bridge (http://drupal.org/project/imce_wysiwyg) — Version utilisée pour ce livre 7.x-1.x-dev.

Le nouveau plugin IMCE doit être ajouté à l’éditeur CKEditor :

  • Menu Configuration — Profils Wysiwyg
  • Lien Modifier de la ligne CKEditor
  • À la section Boutons et plugins, cochez l’option IMCE qui est apparue

IMCE et IMCE Wysiwyg bridge sont bien installés

  • Bouton Enregistrer

Dans une zone de texte, sélectionnez le format de texte CKEditor :

  • Positionnez votre curseur à l’endroit ou vous désirez placer l’image
  • Cliquez sur le bouton Image dans la barre d’outils de CKEditor

Le bouton Image de l’éditeur

Fenêtre de propriété de l’image

  • Bouton Explorer le serveur
  • Si IMCE est correctement installé, vous devriez avoir un bouton Transfert de fichiers dans la fenêtre popup qui apparaît
  • Pointez vers un fichier image présent sur votre disque dur en cliquant sur le bouton Choisissez un fichier

Bouton Transfert de fichiers

astuce.eps

Si vous pensez utiliser les vos images en petits format, n’hésitez pas à créer des vignettes, cela économisera de la bande passante.

Il est possible d’ajouter de nouveaux formats sur la page de configuration de IMCE.

Réglage des nouveaux formats de vignettes

L’image se transfère alors sur le serveur et les vignettes sont créées.

  • Sélectionnez l’image désirée

Image à afficher dans votre zone de texte

  • Cliquez sur le bouton Insérer un fichier

Vous retournez alors dans la fenêtre Propriété de l’image ou vous pouvez positionner l’image.

Fenêtre en «float : right»

  • Bouton OK

astuce.eps

Il est ensuite possible de positionner l’image dans la zone de texte gérée par CKeditor par glisser/déposer ou éditer ses propriétés grâce à un menu contextuel.

Modification de l’image
  1. Pathauto : créez automatiquement des alias d'url

Pathauto est un des modules les plus populaires de Drupal, il permet de créer automatiquement des alias d’url pour tous les types de contenu.

information.eps

La construction d’une URL est très importante pour le référencement de votre site.

Installation

  • Téléchargez et activez le module token (http://drupal.org/project/token) — Version utilisée pour ce livre 7.x-1.0-beta4
  • Téléchargez et activez le module pathauto (http://drupal.org/project/pathauto) — Version utilisée pour ce livre 7.x-1.0-rc2

Utilisation

  • Menu Configuration — Alias d’URL (ou lien Configurer du module Pathauto)

Quatre onglets ont été ajoutés à cette page par Pathauto

  • Onglet MODÈLES

Dans cet onglet, vous pouvez définir des modèles pour les alias d’URL pour des contenus de type Node, Taxonomie, Utilisateurs, etc.

Par exemple, pour que les URL des recettes soient automatiquement de type : /recette/curry-de-poulet-korma, vous pouvez créer le modèle suivant :

  • Motif de chemin pour tous les Recette : [node:content-type:machine-name]/[node:title]

Alias automatique pour les contenus de type recette

Puce module.eps

La section Motifs de substitution est gérée par le module chap. IV — 3.5 Token : des jetons pour les modules
  • Bouton Enregistrer la configuration
  • Éditez une recette
  • Onglet Paramètres des chemins d’URL
  • Cocher la case Alias Automatique

Alias automatique pour une recette

  • Bouton Enregistrer

Votre URL est alors construite selon le modèle défini.

astuce.eps

Si vous avez un grand nombre de nodes existantes et que vous créez ou modifiez un modèle vous pouvez utiliser l’onglet Mise a jour massive de Pathauto. Cela peut vous éviter la fastidieuse tâche d’éditer les contenus un par un.

Mise à jour des alias d’URL de tous les contenus

Paramètres

L’onglet Paramètres du module permet d’affiner la construction de vos URL :

Mode verbeux

Affiche les alias d’url créés en zone de notification lorsque Pathauto est utilisé.

Séparateur

Caractère d’espacement.

Casse des caractères

Permet de passer tous les caractères en minuscules.

Longueur maximale d’un alias

Longueur maximum de l’ensemble d’un alias.

Longueur maximale d’un composant

Longueur maximum d’un élément de l’alias.

Action de mise à jour

Lorsque Pathauto met à jour un alias, l’ancien peut-être gardé. Cela est important pour les sites ayant du contenu déjà référencé.

Réduire les chaînes à des lettres et des chiffres

Évite d’avoir des caractères accentués dans les url.

Chaînes (de caractères) à retirer

Permet de retirer cerains mots des urls (par exemple les articles).

Ponctuation

Remplace les caractères de ponctuation.
  1. Search : un moteur de recherche simple

Vous avez peut-être déjà utilisé le module Search qui est installé et activé par défaut. Au chap. I — 2.3.2 Les régions, vous avez déplacé le bloc qu’il propose et qui affiche une zone de recherche.

Utilisation

  • Lorsque vous faites une recherche, une page de résultats s’affiche

Résultat de la recherche

Cette page permet :

  • de rechercher selon le type d’entité (contenu, utilisateurs, etc.) ;
  • d’afficher une section de recherche avancée permettant de filtrer selon la langue, le type de contenu, etc. ;

Section de recherche avancée

  • d’accéder à la liste des résultats contenant le mot recherché.

Indexation du site

Si, lors de vos recherches, votre contenu n’est pas trouvé, il y a de fortes chances pour que l’ensemble du site ne soit pas indexé. Pour le vérifier, allez sur la page de configuration du module :

  • Menu Configuration — lien Paramètres de recherche (ou lien configurer du module Search)

Le contenu du site n’est pas entièrement indexé par Search

Pour continuer l’indexation du site, il faut lancer le Cron du site. À chaque lancement du Cron, un certain nombre d’éléments supplémentaires sera indexé (paramètre Seuil d’indexation).

Puce module.eps

Chap. III — 3.3. Le Cron

Configurer l’affichage des résultats

Lorsque le module Search trouve le mot recherché dans un type de contenu recette, il l’affiche en commençant par le temps de préparation et le prix par personne. Cela n’aide pas l’utilisateur à savoir si c’est le contenu qu’il cherche.

Pour modifier cet affichage :

  • Menu Structure — lien Types de contenu
  • Lien gérer l’affichage du type recette
  • En bas de la page, à la section CUSTOM DISPLAY SETTINGS, cocher Résultat de la recherche
  • En haut de la page sélectionner l’affichage Résultat de la recherche
  • Pour les champs Temps de préparation et Prix par personne, choisir le format Caché

Le champ Prix par personne n’apparaîtra pas dans les résultats de la recherche

  • Bouton Enregistrer

Résultat sans les champs parasites

  1. Image : créez des styles d’image personnalisés

Il existe par défaut trois styles d’images que vous avez peut-être déjà utilisé : thumbnail, medium et large. L’interface d’administration du module Image permet de créer de nouveaux styles :

  • Ce module fait partie du coeur de Drupal et il est activé par défaut
  • Menu Configuration — lien Styles d’images (section Média)

S’affiche alors la liste des trois styles d’images pré-définis.

thumbnail

Mise à l’échelle 100x100

medium

Mise à l’échelle 150x150

large

Mise à l’échelle 200x200

Vous allez créer un style qui met l’image en noir et blanc et la redimensionne en 100 pixels par 100 pixels en rognant les cotés du bord trop grand.

  • Cliquez sur + Ajouter un style
  • Nom du style : miniature-recadree-nb
  • Dans la liste Sélectionner un nouveau effet, choisissez Désaturer
  • Bouton Ajouter

Vous pouvez constater dans l’aperçu que vos images vont passer en noir et blanc. Vous pouvez combiner plusieurs effets pour un style.

  • Dans la liste Sélectionner un nouvel effet, choisissez Mettre à l’échelle et recadrage

Vous pouvez alors régler les paramètres de l’effet choisi :

  • Largeur : 100 pixels
  • Hauteur : 100 pixels
  • Bouton Ajouter un effet

Le nouvel effet ajouté

  • Bouton Mettre à jour le style

Voici la liste des effets disponibles pour construire vos styles :

Recadrer

Recadrage d’une image, vous pouvez entrer la largeur et la hauteur de l’image en pixel ou pourcentage, ainsi que le point de départ de ce recadrage (Ancre).

Désaturer

Passe une image en niveaux de gris.

Redimensionner

Redimensionne une image sans conserver son aspect. Grâce à cette action, il est possible d’étendre ou d’allonger une image.

Rotation

Effectue une rotation de l’image du nombre de degrés spécifié. Tourne dans le sens des aiguilles d’une montre.

Mettre à l’échelle

Mise à l’échelle de l’image. Vous pouvez spécifier une hauteur d’image, la largeur sera alors calculée pour que l’aspect de l’image soit conservé.

Mettre à l’échelle et recadrage

Créé une mise à l’échelle de l’image en hauteur et largeur, mais découpe l’image si celle-ci ne rentre pas dans le cadre.

Vous pouvez ensuite utiliser ce style pour tout les champs image :

  • Menu Structure — lien Types de contenu
  • Ligne Article
  • Lien gérer l’affichage
  • Cliquez sur le bouton à droite du Style de l’image

Utilisation de votre nouveau style

information.eps

Les images modifiées sont enregistrées dans le répertoire /sites/default/styles/nomdustyle
  1. Display suite : présentez vos contenus en utilisant l’interface de Drupal

Voici un module vraiment pratique si vous avez du mal à appréhender le système complexe de theming sous Drupal. Display Suite permet de présenter les champs des entités grâce à des mises en pages prédéfinies.

information.eps

Ce module comporte de nombreuses fonctionnalités et vous pourrez parfois hésiter entre utiliser celui-ci ou Views. Sachez que Views est un module plus répandu.
  • Téléchargez et activez le module Display Suite (http://drupal.org/project/ds) — Version utilisée pour ce livre 7.x-1.3
  1. Personnaliser l’affichage par défaut

Vous allez personnaliser l’affichage d’un contenu de type recette en positionnant ses différents champs sur une mise en page contenant quatre régions.

Le module Display Suite a largement modifié la page gérer l’affichage des entités :

  • Menu Strucure — lien Types de contenu
  • Lien gérer l’affichage du type Recette

Deux nouveaux onglets horizontaux apparaissent en bas de page. Il faut commencer par choisir l’onglet Mise en page :

  • Onglet Mise en page pour recette dans default

Les différentes mise en page de Display suite

  • Choisir la mise en page Deux colonnes empilées

astuce.eps

L’option Désactiver les blocs/régions Drupal permet de ne pas afficher les barres latérales pour ce type de contenu. Ainsi, vous pouvez prévoir une mise en page qui prend toute la largeur de la page.
  • Bouton Enregistrer

En choisissant un style de mise en page, vous confiez à Display Suite le soin d’afficher le contenu des nodes pour le mode d’affichage Par défaut.

Le style de mise en page Deux colonnes empilées propose quatres régions. Il suffit maintenant de les garnir de champs par simple glisser/déposer.

Les quatres régions du style de mise en page

information.eps

Constatez également que de nouveaux champs sont disponibles sur cette page (Titre, Lire la suite, Auteur, etc.)

De nouveaux champs sont disponibles pour l’affichage
  • Positionnez les champs comme sur les copies d’écran suivantes (pensez également à régler les étiquettes et les formats)

La région d’en-tête

La région de gauche

La région de droite

La région Pied de page

  • Bouton Enregistrer

Rendu de la node

information.eps

Pour améliorer cet affichage, il faudra ajouter un peu de code CSS. Ne modifiez pas directement les fichiers CSS de Display Suite, sachez qu’il est possible de créer un thème uniquement pour intégrer une seule feuille CSS (chap. V — 3 Créer un thème à partir d’un design HTML/CSS).
  1. Exercice : créer un mode d’affichage pour l’accroche

Faites en sorte que les recettes s’affichent comme sur la copie d’écran suivante sur la page d’accueil :

Accroches pour un type de contenu Recette

Corrigé

Il faut commencer par choisir une mise en page pour le mode Accroche

  • Menu Strucure — lien Types de contenu
  • Lien gérer l’affichage du type Recette
  • Mode d’affichage : Accroche
  • Onglet Mise en page pour recette dans teaser
  • Choisir la mise en page Trois colonnes empilées fluides — 25/50/25
  • Bouton Enregistrer

Reste à disposer les champs dans les régions.

  • Positionnez les champs comme sur la copie d’écran suivante (n’oubliez pas de mettre un lien sur le titre)

Disposition des champs pour l’accroche

  1. Création d’un champ personnalisé

En bas de la page Gérer l’affichage ou une mise en page Display Suite est sélectionnée, un onglet Add custom Field est disponible. Cette section permet d’ajouter différents types de champs.

Section d’ajout de champs personnalisés de Display Suite

Code field

Permet d’ajouter un champs calculé à partir de code PHP ou de jetons Token (chap. IV — 3.5 Token : des jetons pour les modules).

  • Cliquez sur le bouton Add a code field
  • Etiquette : Nid
  • Entités : cochez Node
  • Champ de code : <?php print $entity->nid; ?>

Ajout d’un champ code

  • Bouton Enregistrer
  • Un nouveau champ Nid s’ajoute à la liste, placez le en région Pied de page

Le nouveau champ

  • Bouton Enregistrer

Rendu du champ dans la node

information.eps

Il est possible de modifier les champs personnalisés sur la page de configuration de Display Suite :

  • Menu Structure — lien Display Suite
  • Lien Champs

astuce.eps

Vous pouvez connaître l’ensemble des variables disponibles en entrant le code PHP suivant dans un champ code et en ayant activé le module Devel (chap. VI — 3.1. Devel : simplifiez votre vie de développeur) :

  • Champ de code : <?php dpm(get_defined_vars()); ?>

Affichage des variables disponibles dans un champ Code Field

astuce.eps

Vous pouvez également utiliser des Jetons (Token) dans la zone Champ de code. Ici le résultat aurait été le même avec le jeton :

  • Champ de code : [node:nid]

Block field

Permet d’afficher un bloc à l’intérieur du contenu. Il est par exemple possible d’afficher le bloc trois recettes au hasard (chap. II — 1.3. Gestion des affichages) en dessous de la liste des ingrédients :

  • Bouton Add a block field
  • Etiquette : 3 autres recettes
  • Entités : cochez Node
  • Bloc : Trois recettes au hasard

Ajout d’un champ Block field

  • Bouton Enregistrer
  • Placez le nouveau champ 3 autres recettes en région Gauche
  • Bouton Enregistrer

Un bloc à l’intérieur d’un contenu

  1. Intégration à Views

Display Suite peut fonctionner avec le module Views en mettant à disposition de nouveaux styles d’affichage. Dans cet exemple, un nouveau style d’affichage de la node contenant uniquement le titre et la photo sera créé et ensuite utilisé dans Views.

  • Menu Structure — lien Display suite
  • Lien View modes
  • Lien + Add a view mode
  • Étiquette : Titre et photo
  • Entités : cochez Node
  • Bouton Enregistrer

Un nouveau mode d’affichage est alors créé, activez-le pour le type de contenu Recette :

  • Menu Strucure — lien Types de contenu
  • Lien gérer l’affichage du type Recette
  • En bas de page cochez le mode d’affichage Titre et photo

Le nouveau mode d’affichage créé par Display Suite

  • Bouton Enregistrer
  • Sélectionnez le mode Titre et photo (bouton en haut de page)

Le mode est activé

  • Sélectionnez la mise en page Deux colonnes
  • Bouton Enregistrer
  • Positionnez les champs comme sur la copie d’écran suivante

Une photo et un titre

Vous pouvez maintenant utiliser ce mode d’affichage avec Views :

  • Menu Structure — lien Vues
  • Lien modifier de la vue Liste des recettes (chap. II — 1.2. Création d’une vue liste des recettes)
  • Lien +Add dans la zone des Affichages
  • Lien Ajouter Page

Ajout d’un nouvel affichage dans la vue

  • Lien Chemin : liste_recettes_ds
  • Bouton Appliquer

Il reste maintenant à utiliser le format mis à disposition par Display Suite :

  • Format : Liste non mise en forme
  • Choisir Ce(tte) page (supplanter) dans la liste en haut de page
  • Bouton Appliquer (cet affichage)
  • À nouveau bouton Appliquer (cet affichage)
  • Lien Champs
  • Choisir le style Display suite

Le nouveau style de Display suite

  • Bouton Appliquer (cet affichage)

Il faut maintenant choisir le mode d’affichage que vous avez créé :

  • Mode de visualisation par défaut : Titre et photo

La liste des modes d’affichages des nodes

  • Bouton Appliquer (cet affichage)
  • Affichez la page de la vue

Liste des recettes avec Display Suite et Views

information.eps

Vous auriez pu réaliser cet affichage avec Views. Vous pourrez donc parfois hésiter entre les deux méthodes. Je vous conseille d’utiliser Views pour plusieurs raisons :

  • Views est un module plus répandu, donc mieux connu. Votre site sera donc plus facile à maintenir ;
  • Votre vue sera alors configurable uniquement avec l’interface de views et non avec les interfaces des deux modules.
  1. 5 - Site coopératif
    1. Blog : donnez la possibilité à vos utilisateurs de posséder un blog

Vous pouvez proposer à chacun de vos utilisateurs de créer un blog.

  • Le module Blog fait partie du coeur de Drupal, il suffit donc de l’activer

Configuration

Ce module permet aux utilisateurs enregistrés d’avoir chacun leur propre blog. Commencez par configurer les droits d’accès du module blog :

  • Menu Personnes — onglet Droits

Seul les rédacteurs de recettes ont droit à leur blog

Utilisation

Un nouveau type de contenu Billet de blog est disponible :

  • Connectez vous avec un utilisateur ayant pour rôle Rédacteur de recettes
  • Créez un ou deux billets en utilisant le bloc Navigation — Ajouter du contenu

Blog d’un utilisateur

information.eps

L’URL blog affiche la liste des billets de tous les utilisateurs.

Les URLs blog/id_utilisateur affichent la liste des billets d’un utilisateur.

astuce.eps

En activant le module Blog, vous avez accès à un bloc listant les derniers billets.
  1. Forum : créez un lieu d’échange pour vos utilisateurs

Le module Forum, présent par défaut dans Drupal, permet de créer un forum minimaliste.

  • Le module Forum fait partie du coeur de Drupal, il suffit donc de l’activer

Configuration

  • Menu Structure — lien Forums

Un forum Discussion général est automatiquement ajouté, vous allez en ajouter un autre :

  • Lien + Ajouter un forum
  • Nom du forum : Techniques de cuisine
  • Description : Partagez ici des astuces de cuisine
  • Bouton Enregistrer

Ajoutez-en un deuxième :

  • Lien + Ajouter un forum
  • Nom du forum : Rédigez une recette
  • Description : Problèmes rencontrés sur le site
  • Bouton Enregistrer

Pour plus de clarté dans l’organisation de vos forums, vous pouvez créer des conteneurs qui regrouperont les forums traitant du même sujet :

  • Lien + Ajouter un conteneur
  • Nom du conteneur : Site À vos toques
  • Bouton Enregistrer

Il est ensuite possible de réorganiser l’ordre des forums et de les placer dans un conteneur.

Organisation des forums de votre site

  • Bouton Enregistrer

Utilisation

Vous pouvez maintenant utiliser vos forums :

  • Rendez-vous à l’url /forum
  • Ajoutez quelques sujets en cliquant sur un forum puis sur le lien + Ajouter un nouveau sujet de discussion
  • Vous pouvez également poster quelques réponses à ces sujets

La page des forums commence à se garnir !

information.eps

Le module Forum utilise d’autres modules de Drupal :

  • le module Node pour le premier message des sujets ;
  • le module Comment pour les réponses aux sujets ;
  • le module Taxonomy pour la création des forums et des conteneurs (vocabulaire Forums).
  1. Advanced Forum

Le module Advanced forum permet, en quelques clics, de faire ressembler les forums Drupal... aux vrais forums que vous rencontrez sur internet. Il possède également une page ou vous pourrez configurer diverses options.

  • Téléchargez et activez le module Avanced Forum (http://drupal.org/project/advanced_forum) — Version utilisée pour ce livre 7.x-2.0-beta1

Les diverses pages des forums ont un nouveau style plus engageant.

Page des forums avec Advanced forum

information.eps

Advanced Forum propose une page d’options pour gérer l’apparence des forums :

  • Menu Configuration — lien Advanced Forums

information.eps

Advanced Forum met à disposition un certain nombre de blocs et de pages que vous pouvez modifier avec Views :

  • Menu Structure — lien Vues
  1. Contact

Le module Contact propose un formulaire de contact pour le site et d’autres pour chacun des utilisateurs.

  • Le module Contact fait partie du coeur de Drupal, il suffit donc de l’activer

Utilisation

  • Une page de contact est disponible à l’adresse /contact, vous pouvez faire un lien de menu ou un bloc pour diriger l’utilisateur vers cette page

La page de contact par défaut

astuce.eps

Pour que le formulaire de contact fonctionne, il faut configurer le serveur : chap. III — 1.5 Configuration du serveur pour l’envoi de mail

Également, un formulaire de contact est disponible pour chaque utilisateur du site sur sa page de profil :

Contacter un utilisateur par mail

  1. Webform : créez des formulaires

Ce module permet de créer des questionnaires à l’aide de toute sortes de composants (zone de texte, liste, case à cocher, etc.) et de les associer à une node. Vous pourrez ensuite récupérer ces résultats sous différentes formes.

Installation

  • Téléchargez et activez le module Webform (http://drupal.org/project/webform) — Version utilisée pour ce livre 7.x-3.13

Configuration

Vous allez créer un formulaire permettant aux utilisateurs de s’inscrire à un repas. Dans ce formulaire, il sera demandé à l’utilisateur d’entrer son nom, son prénom, son email et le plat qu’il désire.

  • Menu Contenu
  • lien + Ajouter un contenu
  • Lien Webform

Créez une node qui présentra votre formulaire :

  • Titre : Inscription au repas annuel
  • Body : Merci de remplir les champs suivants et de valider votre inscription
  • Bouton Enregistrer

S’affiche alors à la page de configuration des champs du formulaire.

Page de configuration des champs du formulaire

Commencez par créer le premier champ nom :

  • Étiquette : Nom et prénom
  • Type : Champ texte
  • Cochez Obligatoire
  • Bouton Ajouter

S’affiche alors la page de configuration du champ Nom :

  • Valeur par défaut : %username

astuce.eps

Ce champ est un Token, chap. IV — 3.5.3 Token : des jetons pour les modules
  • Bouton Enregistrer le composant

De la même façon, ajoutez le champ mail :

  • Nom : Email
  • Type : courriel
  • Bouton Ajouter

S’affiche alors la page de configuration du champ :

  • Valeur par défaut : %usermail
  • Bouton Enregistrer le composant

Reste le dernier champ qui affichera la liste des plats sous forme d’options :

  • Nom : Choix du plat
  • Type : Liste déroulante
  • Cochez Obligatoire
  • Bouton Ajouter

Dans la page de configuration, il faut lister les options qui s’afficheront dans la liste :

  • Options :

Liste des options

  • Bouton Enregistrer le composant

Les trois composants sont créés

  • Bouton Enregistrer

information.eps

Le bouton Courriels permet d’envoyer un mail contenant la valeur des champs à chaque validation du formulaire.

Le bouton Paramètres du formulaires permet de configurer certaines options du formulaires (messages affichés, redirection, etc.)

Utilisation

Vous pouvez tester votre formulaire en vous inscrivant à votre repas :

  • Cliquez sur l’onglet Voir
  • Remplissez votre formulaire

Votre formulaire en action !

  • Bouton Soumettre
  • Essayez de remplir ce formulaire plusieurs fois avec différentes valeurs

information.eps

Il est possible d’afficher des formulaires avec n’importe quel type de node en configurant la page menu Configuration — lien Paramètres de Webform

Résultats

Vous pouvez alors consulter les résultats de votre formulaire :

  • Onglet Résultats
  • Onglet Tableau

Résultats du formulaire sous forme de tableau.

Vous obtenez alors un aperçu des réponses envoyées via votre formulaire. Il est possible de les consulter grâce aux différents onglets :

Soumissions

Liste des formulaires soumis

Analyses

Statistiques sur les différents champs

Tableau

Listes des formulaires soumis et de la valeur de chaque champs

Téléchargement

Exportation des formulaires pour traitement dans une base de données ou un tableur

Effacer

Efface l’ensemble des formulaires soumis

Liste des types de composants disponibles

Voici deux copies d’écrans qui présentent les différents composants qui vous permettront de composer vos formulaires :

Les champs de Webform disponibles

Et d’autres champs

Date

Affiche des listes déroulantes pour choisir une date ainsi que formulaire jQuery

Courriel

Affiche un champ email

Fichier

Permet à l’utilisateur du formulaire de joindre un fichier. Il est possible de n’autoriser que certains types de fichiers

Groupe de champs

Permet de regrouper les champs par section. Ces sections peuvent être pliantes.

Grille

Permet de proposer des questions sous forme de tableau

Caché

Permet d’insérer un champ caché

Balisage

Permet d’insérer un texte, du code HTML ou PHP dans votre formulaire

Saut de page

Permet de diviser son formulaire en plusieurs pages. Des boutons Précédent et Suivant permettent de naviguer entre ces pages

Liste déroulante

Affiche une liste de choix sous forme de liste ou de liste déroulante. Les options Multiple et Liste déroulante permettent d’obtenir différents Widgets

Zone de texte

Affiche une zone de texte sur plusieurs lignes

Champ texte

Affiche une zone de texte sur une ligne

Heure

Affiche des listes déroulantes pour choisir une heure
  1. Fivestar : notez vos contenus

Fivestar est le module d’évaluation de contenu le plus populaire pour Drupal. Il se présente sous la forme d’un type de champs qu’il est possible d’ajouter à n’importe quelle entité (node, utilisateur, terme de taxonmie, etc). Il s’appuie sur le fameux module Voting API qui était utilisé par beaucoup de modules de votes dans Drupal 6.

  • Téléchargez et activez les module Voting API (http://drupal.org/project/votingapi) — Version utilisée pour ce livre 7.x-2.4 et Fivestar (http://drupal.org/project/fivestar) — Version utilisée pour ce livre 7.x-2.0-dev

Ajout d’un champ Fivestar

Il est possible d’ajouter un champ Fivestar sur n’importe quel type d’entité. Dans cet exemple, vous allez l’ajouter sur le type de contenu Recette (chap. II — 4.2 Création d’un nouveau type de contenu)

  • Menu Structure — lien Types de contenu
  • Lien gérer les champs du type Recette
  • Étiquette : Notez cette recette
  • Nom du champ : rate_recette
  • Type de données à stocker : Fivestar Rating
  • Élément du formulaire pour l’édition des données : Stars (rated while viewing)

information.eps

Trois types de widgets sont disponibles pour le type Fivestar Rating :

  • Stars (rated while viewing) : l’évaluation se fait lorsque la node est affichée ;
  • Stars (rated while editing) : l’évaluation se fait lorsque la node est éditée grâce à des étoiles, c’est le rédacteur qui note le contenu ;
  • Stars (rated while editing) : l’évaluation se fait lorsque la node est éditée grâce à une liste déroulante.
  • Bouton Enregistrer
  • Voting Tag : vote

information.eps

Il est possible de créer de nouveaux Voting Tag pour les votes dans la page de configuration de Fivestar (menu Configuration — lien Fivestar). Cela permettra ensuite de regrouper et de faire des calculs sur les votes selon ces tags.
  • Bouton Enregistrer les paramètres du champ

La page de configuration d’un champ texte s’affiche alors. Vous pouvez configurer ici le nombre d’étoiles à afficher (entre 1 et 10).

  • Bouton Enregistrer les paramètres

Utilisation

  • Affichez une node de type recette

Affichage de Fivestar

Configuration de l’affichage

Il est possible de configurer l’affichage de Fivestar, de nombreux styles existent par défaut :

  • Menu Structure — lien Types de contenu
  • Lien gérer l’affichage du type Recette
  • Cliquez sur le bouton engrenage du champs Notez cette recette

Modification de l’affichage du champs Fivestar

information.eps

De nouveaux types Relations sont disponibles dans Views pour effectuer des calculs sur les votes effectués.

Les nouvelles relations de Voting API
  1. 6 - Blocs, menus
    1. Taxonomy menu : affichez vos vocabulaires dans des menus

Après avoir ajouté des vocabulaires et des termes de taxonomy (chap. II — 4.3. Taxonomy : classer le contenu), vous aimeriez peut-être les exposer sous forme de menus ou de blocs sur votre site. Taxonomy_menu permet cela et remet à jour automatiquement ces blocs et menus lors de l’ajout de contenus associés ou de termes.

  1. information.eps

    Pour bien comprendre le fonctionnement de ce module, lisez d’abord les chap. II — 4.3. Taxonomy : Classer le contenu, chap. II — 2.2. Menu : les menus et chap. 2.1 Block : les blocs
  • Téléchargez et activez les module Taxonomy Menu (http://drupal.org/project/taxonomy_menu) — Version utilisée pour ce livre 7.x-1.2

Configuration

Taxonomy menu permet d’afficher un vocabulaire dans un menu. Dans l’exemple qui va suivre, vous allez afficher le vocabulaire Provenance dans un nouveau menu appellé également provenance.

Commencez par créer le menu :

  • Menu Structure — lien Menus
  • Lien + Ajouter un menu
  • Titre : Provenance
  • Bouton Enregistrer

Le module ne possède pas sa propre page de configuration mais il ajoute une section a chaque vocabulaire de taxonomie :

  • Menu Structure — lien Taxonomie
  • Lien modifier le vocabulaire du vocabulaire Provenance
  • Dans la liste Emplacement du menu, choisir <Provenance>

Section de configuration de Taxonomy menu

  • Bouton Enregistrer

Il ne reste plus qu’à afficher le bloc du menu Provenance en première barre latérale :

  • Menu Structure — lien Blocs
  • Choisissez la région Première barre latérale pour le bloc Provenance
  • Bouton Enregistrer les blocs

Le vocabulaire Provenance affiché dans un bloc !

  1. Menu Block : divisez, liez et organisez vos blocs

Tout menu de Drupal peut être affiché dans un bloc. Mais, vous pourriez avoir besoin de séparer ce bloc en deux ou de lier un bloc de menu à un autre. Menu Block offre des options de configuration spécifiques pour les blocs créés à partir des menus.

Dans cette exemple, vous allez reprendre votre bloc Provenance créé précédemment (chap. IV - 6.1 Taxonomy menu : affichez vos vocabulaires dans des menus) et afficher le niveau 1 du menu (les continents) dans un bloc en première barre latérale et l’autre partie du menu dans un autre bloc en deuxième barre latérale.

Installation

  • Téléchargez et activez le module Menu Block (http://drupal.org/project/menu_block) — Version utilisée pour ce livre 7.x-2.2

Configuration

Menu block permet de créer des blocs d’un genre nouveau :

  • Menu Structure — lien Blocs

Ajout d’un bloc spécial «menu block»

  • Lien + Add menu block
  • Titre du bloc : Navigation principale
  • Titre pour l’administration : Navigation principale
  • Menu : Provenance
  • Niveau de départ : 1er niveau (primaire)
  • Profondeur maximale : 1
  • Choisissez Première barre latérale pour le thème Bartik

Création d’un « menu block »

  • Bouton Enregistrer le bloc

Premier niveau du vocabulaire Provenance

Il s’agit maintenant de créer un second bloc qui affichera les niveaux suivants du vocabulaire provenance :

  • Menu Structure — lien Blocs
  • Lien + Add menu block
  • Titre du bloc : Navigation secondaire
  • Titre pour l’administration : Navigation secondaire
  • Menu : Provenance
  • Niveau de départ : 2ème niveau (secondaire)
  • Profondeur maximale : illimité
  • Choisissez Sidebar second (barre de droite) pour le thème Bartik
  • Bouton Enregistrer le bloc

Les deux blocs menus blocs sont en lien

information.eps

Menu block est utilisé sur les sites qui ont une navigation principale en en-tête et une navigation secondaire en barre latérale.
  1. Nice Menus : rendez vos menus dynamiques

Ce module transforme vos blocs de menus en menus déroulants grâce au plugin jQuery Superfish
(http://users.tpg.com.au/j_birch/plugins/superfish/). Ils peuvent se dérouler de droite à gauche, de gauche à droite ou de haut en bas.

information.eps

L’exemple utilisé pour ce module suppose que vous ayez créé le bloc Nos recettes comme indiqué dans chap. IV 6.1. - Taxonomy_menu : affichez vos vocabulaires dans des menus.
  • Téléchargez et activez les module Nice Menus (http://drupal.org/project/nice_menus) — Version utilisée pour ce livre 7.x-2.0

Utilisation

À l’activation de Nice Menus, 2 blocs sont créés (Nice Menu 1 et Nice Menu 2). Il faut configurer ces blocs pour leur indiquer quel sera leur contenu.

  • Menu Structure — lien Blocs

Les deux blocs créés par Nice menu

  • Cliquez sur le lien configurer du bloc Nice menu 1 (Nice Menu).
  • Titre du bloc : Provenance
  • Menu Name : Provenance
  • Menu Parent : Provenance
  • Menu Style : Right
  • Choisissez Première barre latérale pour le thème Bartik
  • Cliquez sur le bouton Enregistrer le bloc

Nice Menu en action !

Configuration

Une page de configuration permet de régler certains paramètres de Nice Menu :

  • Menu Configuration — lien Nice menus

Numéro

Nombres de blocs à créer par Nice Menus

Use Javascript

Si la case n'est pas cochée Nice Menus utilise uniquement CSS pour créer les menus. Dans le cas contraire, il utilise le plugin jQuery Superfish

Les options de Nice Menu

Modifier l’apparence des menus

L’apparence de menus avec Nice Menus est entièrement personnalisable avec CSS. Pour cela, vous devez copier le fichier /sites/all/modules/nice_menus/nice_menus_default.css dans votre répertoire de thème.

astuce.eps

Vous pouvez indiquer le nom et le chemin de votre propre fichier CSS sur la page de configuration des thèmes :

  • Menu Apparence
  • Lien Paramètres du thème actif

Modification du fichier CSS de Nice Menus
  1. 7 - Commerce : créez une boutique

Le module Commerce permet d’intégrer une boutique complète à votre site Drupal. Ce module est totalement nouveau et n’a plus rien en commun avec Ubercart, son ancêtre pour Drupal 6, si ce n’est son auteur (Ryan Szrama).

Le module Drupal Commerce utilise, pour sa configuration, de nombreux autres modules tels que Entity API, Field, Views ou encore Rules. Ainsi, il est possible de configurer de nombreux paramètres de Drupal Commerce par l'interface :

  • configuration des modules de Drupal Commerce pour une utilisation simple ;
  • configuration des modules tiers pour une modifier l’apparence (Views) ou le comportement (Rules) ;
  • développement de nouveaux modules pouvant s’interfacer avec Drupal Commerce.

Cette présentation débutera par une prise en main rapide durant laquelle vous mettrez en place une boutique complète (création de produit, mise en place du panier, création d’une commandes et gestion des paiements).

Ensuite, vous découvrirez tous les éléments que Drupal Commerce met à votre disposition (vues, entités, règles, etc.).

Enfin, vous découvrirez comment modifier ces éléments grâce à quelques exemples précis.

information.eps

N’essayez pas de créer une boutique avec Drupal Commerce sans avant de maîtriser les grands principes de Drupal. Au minimum, lisez les parties I et II de ce livre.

  1. Démarrage rapide
    1. Installation et configuration

Drupal commerce utilise un grand nombre de modules de la communauté Drupal, il est donc normal qu’il ait un grand nombre de dépendances :

  • Téléchargez et activez les modules Entity API (http://drupal.org/project/entity) — version utilisée pour ce livre 7.x-1.0-beta10, Rules (http://drupal.org/project/rules) — version utilisée pour ce livre 7.x-2.0-rc2, Views (http://drupal.org/project/rules) — version utilisée pour ce livre 7.x-3.0-rc1 et Adress Field (http://drupal.org/project/adressfield) — version utilisée pour ce livre 7.x-1.0-beta2
  • Téléchargez le module Commerce (http://drupal.org/project/commerce) — version utilisée pour ce livre 7.x-1.0

information.eps

Drupal Commerce intègre 21 modules au moment de la rédaction de cet ouvrage. Vous activerez ces modules au fur et à mesure de leur utilisation.
  • Commencez par activer les modules Commerce et Commerce UI

information.eps

Les modules se terminant par UI (User Interface) servent à l’interface utilisateur du module.

Un nouveau menu Boutique apparaît dans la barre de menu. C’est à partir de ce menu que vous pourrez effectuer la majorité des tâches d’administration du module. Pour commencer, vous pouvez configurer les devises qui seront utilisées sur votre site :

  • Menu Boutique — lien Configuration
  • Lien Paramètres des devises
  • Devise par défaut de la boutique : EUR — Euro
  • Bouton Enregistrer la configuration
  1. Création d’un premier produit

Commencez par créer un premier produit (un robot multifonction à 79 EUR) pour votre boutique. Il faut pour cela activer de nouveaux modules :

  • Activer les modules Product, Price et Product UI

information.eps

Le module Price est nécessaire car un produit contient un champ prix.
  • Menu Boutique — lien Produits
  • Lien + Ajouter un produit
  • SKU : robot-multifonction (c’est la référence de votre produit et elle doit être unique sur l’ensemble de votre site)
  • Titre : Robot multifonction
  • Prix : 79

Ajout d’un produit à la boutique

  • Bouton Enregistrer le produit
  1. Affichage des produits dans une node

Votre nouveau produit est maintenant créé... mais vous ne pouvez pas l’afficher ! En effet, les produits sont des entités à part entière et non des nodes. Pour les afficher, il faut les lier à une node grâce à un nouveau type de champ proposé par Drupal commerce :

  • Activez le module Product Reference

Commencez par créer un nouveau type de contenu Produit :

  • Menu Structure — lien Types de contenu
  • Lien + Ajouter un type de contenu
  • Nom : Produit
  • Description : Node à lier à des produits existants dans la boutique
  • Bouton Enregistrer et ajouter les champs

Il faut maintenant ajouter des champs à votre type de contenu. Ici, vous ajouterez un champ image pour votre produit et un champ " référence produit " pour lier les produits :

  • Lien gérer les champs du type Produit

À la section Ajouter un champ existant :

  • Dans la liste Champ à partager, sélectionnez le champ Image : field_image
  • Etiquette : Image
  • Bouton Enregistrer
  • Bouton Enregistrer les paramètres

Maintenant, ajoutez le champ référence produit, à la section Ajouter un nouveau champ :

  • Etiquette : Image
  • field_produit
  • Type de données : Référence produit
  • Elément de formulaire : Champ à autocomplétion
  • Bouton Enregistrer
  • Bouton Enregistrer les paramètres du champ

La page de configuration d’un champ de type référence produit s’affiche alors. Pour ce produit, les paramètres par défaut conviennent.

  • Bouton Enregistrer les paramètres

Le type de contenu Produit

Créez une node de type produit en la liant au robot :

  • Menu Contenu
  • Lien + Ajouter un contenu

Créez la node comme sur la copie d’écran suivante :

Lier une node à un produit

  • Bouton Enregistrer

La node s’affiche alors avec un lien vers le produit de votre boutique, ce qui est encore loin d’être parfait, mais vous allez l'améliorer.

  1. Le panier

Le module Cart (Panier) permet d’afficher des boutons « Ajouter au panier » et de gérer le panier utilisateur via un bloc et une page.

  • Activez le module Cart

La node doit afficher le bouton d’ajout au panier en lieu et place du lien vers le produit :

  • Menu Structure — lien Types de contenu
  • Lien gérer l’affichage du type Produit
  • Pour la ligne produit, choisir le format Formulaire d’ajout au panier

Modification de l’affichage du produit

  • Bouton Enregistrer

Affichage du produit

astuce.eps

Vous pouvez gérer l’affichage des différents champs sur la page gérer l’affichage du type Produit.
  • Vous pouvez maintenant ajouter votre article au panier !

Affichage du panier

Votre article est au panier mais où est votre panier ? Il peut s’afficher sous forme de bloc :

  • Menu Structure — lien Blocs
  • Choisir la région Première barre latérale pour le bloc Panier

Le bloc Panier

Le lien Voir le panier affiche une page qui permet de gérer les quantité et les lignes du panier.

Détail du panier

astuce.eps

Vous pouvez modifier le format d’affichage d’ajout au panier pour ajouter un widget de quantité à coté du bouton Ajouter au panier.

Modification du formulaire d’ajout au panier

Affichage de la node et des quantités à ajouter
  1. Commandes

Le panier étant maintenant rempli, vous pouvez passer commande.

  • Activez le module Order UI
  • Cliquez sur le lien Valider la commande du panier

Écran de validation de la commande

  1. Paiement

Dernière étape : il faut effectuer un paiement !

Drupal Commerce propose pour cela un module permettant de simuler un paiement fictif :

  • Activer les modules Payment, Payment UI et Payment Method Example
  • Bouton Passez à l’étape suivante de l’écran de commande

Une page résumant la commande se charge avec une section permettant de choisir le mode de paiement

  • Entrez une chaîne de plus d’un caractère dans la zone Nom du paiement

Payez la commande

information.eps

Le module Payment Method Example teste seulement si la zone nom contient plus d’un caractère. Dans le cas inverse, le paiement est refusé. Ce module permet donc de tester les divers états d'un paiement.
  • Bouton Passez à l’étape suivante

Une nouvelle page vous indique que la commande est complétée. Le client peut y voir la liste des commandes passées sur le site depuis son profil :

  • Lien Bonjour admin — Onglet Commandes

Liste des commandes d’un client

  1. Gestion des commandes

Coté vendeur, une page permet la gestion des commandes :

  • Menu Boutique — lien Commandes

Liste des commandes du site

À partir de cette ligne, vous pouvez effectuer différentes opérations :

  • voir : voir la commande ;
  • modifier : changer le contenu de la commande, l’adresse du client et surtout, le statut de la commande ;

Modification du statut d’une commande

  • paiement : consulter la balance des paiements pour savoir si le paiement a été effectué et par quel moyen ;
  • supprimer : supprimer la commande.
  1. Les éléments de Drupal Commerce

Ce deuxième chapitre liste les différents éléments configurables que le module Commerce propose.

information.eps

Si vous ne trouvez pas certaines pages de configuration dans le menu Boutique, pensez à activer les modules UI (Customer UI, Order UI, etc) de Drupal Commerce.
  1. Entités et types de champs

Entité produit

  • Menu Boutique — lien Produits
  • Onglet Types de produits

Ici, vous pouvez définir de nouvelles familles de produits. Par exemple, un produit « Stage » peut avoir un nouveau champ Date.

Puce module.eps

Un exemple de création de nouveau produit est décrit au chapitre suivant.

L’onglet gérer l’affichage permet de définir la façon dont s’affichera le produit dans la node auquel il est attaché (mode d’affichage Par défaut) ou dans le panier et la commande (mode d’affichage Ligne article).

Mode d’affichage Ligne article pour les produits

Type de champ Référence produit

Permet de lier un ou des produit(s) à un contenu.

Vous pouvez gérer l’affichage de chaque champ du produit dans la node pour un champ de type Référence produit.

Gestion de l’affichage d’un champ référence produit dans une node

Type de champ Prix

Champ utilisé par défaut dans les types produits.

Plusieurs formats d’affichage sont disponibles : montant formaté (79,00 EUR), montant brut (7900), prix calculé avec l’application des règles, prix original sans application des règles.

Entité Commande

Vous pouvez configurer les champs qui composent une commande :

  • Menu Boutique — lien Configuration
  • Lien Paramètres de commande
  • Onglet Gérer les champs

Les champs par défaut d’une commande

Entité Type de ligne de commande

Chaque ligne d’une commande est une entité de type ligne de commande.

Ligne de commande

Champ Référence de ligne article

Champ utilisé par l’entité commande pour lier plusieurs lignes articles à une commande.

Entité Client

Un client est un utilisateur Drupal qui a validé une commande. Il est possible de modifier les champs des profils des clients :

  • Menu Boutique — lien Profils client
  • Onglet Types de profils
  • Lien gérer les champs

Champ du profil client par défaut

Champ Référence du profil client

Champ utilisé par l’entité commande pour lier une commande à un client.

Champ Postal address

Champ utilisé par défaut dans le profil des clients. Ce champ comporte à lui seul plusieurs éléments de formulaire.

Widget du champ Postal address

  1. Les vues

Voici les différentes vues créées par défaut par le module Commerce :

Shopping cart block

Vue utilisée pour afficher le bloc panier.

Le panier est une vue !

Shopping cart form

Vue utilisée pour afficher le détail du panier.

Détail du panier

Shopping cart summary

Vue utilisée pour afficher le résumé du panier lors de la validation de la commande.

Validation d’une commande

Line items

Affiche les lignes d’une commande.

Lignes d’une commande

Order payments

Vue utilisée pour afficher les paiements d’une commande

  • Menu Boutique — lien Commandes
  • Lien paiement d’une commande

Balance des paiements d’une commande

Users orders

Liste des commandes d’un utilisateur.

Onglet Commandes du profil utilisateur

Orders

Liste les commandes dans l’administration.

Products

Liste des produits dans l’administration.

Customer profiles

Liste des profils des clients dans l’administration.

  1. Les règles

Le module Commerce propose également de nombreuses règles utilisant des actions et des événements spécifiques ajoutés au module Rules.

Certaines règles peuvent être ajoutées ou modifiées via les pages de configuration de la boutique :

  • Menu Boutique — lien Configuration
  • Lien Règles de tarification des produits

Sur cette page, vous pouvez ajouter des règles pour modifier le calcul des prix des produits.

  • Lien Modes de paiement

Sur cette page, vous pouvez ajouter des règles pour sélectionner les modes de paiement disponibles.

  • Lien Paramètres de validation de commande
  • Onglet Règles de validation de commande

Sur cette page, vous pouvez ajouter des règles qui permettront de modifier les critères de validation des commandes.

information.eps

Vous pouvez consulter l'ensemble des règles de Drupal Commerce à la page :

  • Menu Configuration — lien Règles
  1. Autres éléments de configuration

Formulaire de commande

Vous pouvez cacher ou afficher certaines sections de la page de validation de commande :

  • Menu Boutique — lien Configuration
  • Lien Paramètres de validation de commande

Un lien configurer permet de paramétrer le comportement de chaque panneau.

Les panneaux des pages de commande

Paramètres des devises

Vous pouvez activer plusieurs devises pour votre boutique :

  • Menu Boutique — lien Configuration
  • Lien Paramètres des devises

Page de gestion des devises

  1. Quelques exemples de configuration

Voici quelques exemples de configuration du module Commerce qui utilisent les éléments listés ci-dessus.

  1. Créer une node contenant plusieurs produits

Il est possible de lier plusieurs produits à une seule node. Cela peut permettre à vos clients de ne pas avoir à naviguer sur le site pour trouver les produits d’un même thème.

Ici, vous allez créer une node qui listera l’ensemble des pièces détachées du robot multifonction.

Tout d’abord, il faut créer les produits « pièces détachées » :

  • Menu Boutique — lien Produits
  • Lien + Ajouter un produit
  • SKU : robot-multifonction-couteau
  • Titre : Couteau pour robot multifonction
  • Prix : 19
  • Bouton Enregistrer et ajouter un autre

Ajoutez le deuxième produit :

  • SKU : robot-multifonction-bol
  • Titre : Bol pour robot multifonction
  • Prix : 29
  • Bouton Enregistrer le produit

Ensuite, il faut permettre au type de contenu Produit de référencer plusieurs entités produit :

  • Menu Structure — lien Types de contenu
  • Lien Gérer les champs du type Produit
  • Lien modifier du champ Produit
  • Nombre de valeurs : Illimité
  • Bouton Enregistrer les paramètres

Il reste à créer une nouvelle node de type Produit :

  • Titre : Pièces détachées pour robot multifonction
  • Corps : Commandez vos pièces détachées
  • Produit : robot-multifonction-bol, robot-multifonction-couteau (ajout de deux produits dans la zone)

Plusieurs produits pour une node

  • Bouton Enregistrer

Le champ prix change en fonction du produit sélectionné

  1. Produits avec attributs

Imaginez maintenant que vous souhaitiez vendre une batterie de cuisine contenant les éléments suivants :

  • poêle de 14 cm et 16 cm ;
  • casserole de 12 cm, 14 cm et 16 cm ;
  • sauteuse de 16 cm et 18 cm.

Vous souhaitez vendre chaque élément de cette batterie séparément.

Voici l’interface que vous pourriez proposer avec le module Commerce :

Sélection des éléments de la batterie dans une seule node

Pour cela il faut créer un nouveau type de produit et lui ajouter les deux champs attributs (type d’élément et taille) et un champ image pour les différents types.

  • Menu Boutique — lien Produits
  • Onglet Types de produit
  • Lien + Ajouter un type de produit
  • Nom : Élément de batterie de cuisine
  • Bouton Enregistrer et ajouter les champs
  • Ajoutez le champ existant Image (chap. II — 4.2.6. Ajout du champ photo de l’article)

Puis, il faut ajouter les attributs. Commencez par le type d’élément (poêle, casserole, etc.) :

  • Etiquette : Type d’élément
  • Nom du champ : type_element
  • Type de données à stocker : Liste (texte)
  • Élément du formulaire pour l’édition des données : Liste de sélection
  • Bouton Enregistrer
  • Liste des valeurs autorisées : Poêle, Casserole, Sauteuse (une par ligne)

Liste des valeurs de l’attribut taille

  • Bouton Enregistrer les paramètres du champ

La page de configuration du champ numérique s’affiche alors.

  • Autoriser ce champ à fonctionner comme un champ d’attribut sur le formulaire d’Ajout au panier. : coché
  • Widget de sélection d’attribut : Boutons radio

Paramètres des attributs d’un produit

  • Nombre de valeurs : 1

information.eps

Les attributs des produits ne peuvent avoir un nombre de valeurs supérieure à 1.
  • Bouton Enregistrer les paramètres

Puis, faites de même pour la taille :

  • Etiquette : Taille
  • Nom du champ : taille
  • Type de données à stocker : Liste (texte)
  • Élément du formulaire pour l’édition des données : Liste de sélection
  • Bouton Enregistrer
  • Liste des valeurs autorisées : 12 14 16 18 (une par ligne)
  • Bouton Enregistrer les paramètres du champ

La page de configuration du champ numérique s’affiche alors.

  • Autoriser ce champ à fonctionner comme un champ d’attribut sur le formulaire d’Ajout au panier. : coché
  • Widget de sélection d’attribut : Boutons radio
  • Nombre de valeurs : 1
  • Bouton Enregistrer les paramètres

Vous pouvez maintenant ajouter les sept produits que vous proposez à la vente :

  • Menu Boutique — lien Produits
  • Lien + Ajouter un produit
  • Lien Créer Elément de batterie de cuisine
  • SKU : poele14
  • Titre : Poêle (14 cm)
  • Prix : 15
  • Type d’élément : Poêle
  • Taille : 14

Les nouveaux attributs du produit

  • Bouton Enregistrer et ajouter un autre

Ajoutez ainsi les 6 autres produits de la batterie de cuisine.

Les produits de la batterie de cuisine

Vous pouvez maintenant créer la node Batterie de cuisine qui contiendra l'ensemble des produits :

  • Titre : Batterie de cuisine
  • Corps : Achetez nos éléments au détail
  • Produit : poele14, poele16, casserole12, casserole14, casserole16, sauteuse16, sauteuse18
  • Bouton Enregistrer

Tailles disponibles en fonction de l’élément

Il manque encore quelques éléments de mise en forme : l’image ne s’affiche pas et il faut réordonner les champs. Vous pouvez gérer l’affichage grâce à deux pages :

  • l’onglet Gérer l’affichage du type de contenu Produit : ici, vous réordonnez les champs du produit et déterminez lesquels doivent s’afficher ;

Affichage des champs du produit dans la node

  • l’onglet Gérer l’affichage du type de produit Élément de batterie de cuisine : ici, vous définissez le format des champs du produit.

Format des champs du produit

  1. Exercice : modifier l’affichage du panier

Modifiez bloc panier pour qu’il ait l’aspect suivant :

Nouveau panier

Corrigé

Le panier est une vue, il suffit donc de la modifier

  • Cliquez sur le menu contextuel du panier : Modifier la vue
  • Choisir le menu réordonner de la section Champs
  • Placer l’item (Article) Commerce Entrée d’article : Quantité avant le Total

Réordonner les champs de la vue

  • Bouton Appliquer

Il reste à modifier l’affichage de la quantité :

  • Dans la section Champs, cliquez sur l’item (Article) Commerce Entrée d’article
  • Mettez x en Préfixe
  • Supprimez le Suffixe
  • Bouton Appliquer
  • Bouton Enregistrer de la vue
  1. Réduction pour un rôle

Vous allez maintenant créer une nouvelle règle qui appliquera une réduction des prix de 10% sur l’ensemble du site pour un utilisateur ayant pour rôle Rédacteur de recettes.

  • Menu Boutique — lien Configuration
  • Lien Règles de tarification des produit

Vous reconnaissez l’interface de Rules. Il va donc falloir créer une nouvelle règle :

  • Lien + Ajouter une règle de tarification
  • Nom : 10% aux rôles Rédacteur de recette
  • Bouton Enregistrer

L’événement Calcul du prix de vente d’un produit est sélectionné. La règle sera donc déclenchée chaque fois qu’un prix sera affichée.

Commencez par ajouter la condition :

  • Lien + Ajouter une condition
  • Dans la liste, à la section Utilisateur, choisir L’utilisateur a le(s) rôle(s)
  • Dans liste Rôles, sélectionnez Rédacteur de recettes
  • Bouton Enregistrer

Puis l’action :

  • Lien + Ajouter une action
  • Dans la liste, à la section Commerce Entrée d’article, choisir Multiply the unit price by some amount
  • Valeur : 0.9
  • Bouton Enregistrer

La règle dans son intégralité

  • Bouton Enregistrer les modifications

Connectez-vous avec un utilisateur ayant le rôle Rédacteur de recettes.

Prix du robot multifonction pour les rédacteurs de recettes

Chapitre

V

Les thèmes

  1. V - Les thèmes

Modifier l’apparence de Drupal peut-être une tâche très simple (installation d’un nouveau thème) ou très compliquée (personnalisation de tous les éléments du thème). Le système Drupal est en effet construit pour qu’il soit possible, depuis un thème, de modifier l’apparence et même le contenu de chaque élément.

Ce chapitre vous accompagnera pas à pas dans cette tâche complexe :

  • vous commencerez par configurer différents thèmes existants par l’interface de Drupal ;
  • vous modifierez le thème Orange en découvrant ses fichiers CSS et ses gabarits (templates) ;
  • vous créerez un thème en partant d’un simple design HTML/CSS.
  1. 1 - Configurer les thèmes par l’interface

Il est possible de configurer certains éléments graphiques des thèmes directement depuis l’interface de Drupal.

  1. Paramètres globaux des thèmes
  • Menu Apparence — onglet Paramètres

Paramètres globaux des thèmes

À partir de cette page, vous pouvez configurer les paramètres de l’ensemble des thèmes. Il sera ensuite possible de régler ces éléments selon chaque thème grâce aux boutons situés en haut de la page.

information.eps

Le positionnement de ces éléments peut différer d’un thème à l’autre (rien n’empêche un thème d’afficher le logo en bas de la page).

Personnaliser le logo

Pour modifier le logo :

  • Décochez la case Utiliser le logo par défaut (Druplicon)
  • Dans la zone Envoyer le logo, cliquez sur Choisissez un fichier et pointez l’image que vous désirez

Changement de logo

astuce.eps

L’image que vous ajouterez ne sera pas redimensionnée. Pour information, l’icône Drupal par défaut fait 65x73 pixels.

Vous pouvez redimensionner et retoucher vos images grâce au logiciel libre Gimp
(http://www.gimp-fr.org).
  • Bouton Enregistrer la configuration

Le nouveau logo sous Bartik

astuce.eps

Pour ne pas avoir un carré blanc autour de votre logo, il est possible de mettre un fond transparent. Pour cela, utilisez le canal alpha sous Gimp et sauvegardez votre fichier au format png.

Personnaliser l’icône

Utilisez le même procédé pour modifier l’icône du site. Drupal se charge cette fois-ci de la redimensionner automatiquement.

L’icône et le logo personnalisés

  1. Color : shéma de couleur du thème Bartik

Chaque thème possède sa propre page de configuration, voici celle de Bartik, le thème par défaut de Drupal :

  • Menu Apparence
  • Pour le thème Bartik, cliquez sur le lien Paramètres

En bas de page, s’affichent les sections vues précédemment (affichage d’éléments, modification du logo et de l’icône). En début de page il y a également une section Schéma de couleurs. Elle permet de modifier la couleur de nombreux éléments du site.

  • Choisissez le Jeu de couleurs Prune

Modification des couleurs de Bartik

information.eps

Bartik utilise le module Color présent et activé par défaut dans Drupal. Tous les thèmes utilisant ce module proposent cette fonctionnalité.
  • Bouton Enregistrer la configuration

Vous pouvez alors voir le nouveau jeu de couleurs de Bartik en allant sur la page d’accueil du site.

  1. Paramètres du thème Marinelli

Marinelli est un thème populaire contenant un grand nombre de fonctionnalités avancées.

Installation du thème Marinelli

  • Téléchargez le thème Marinelli (http://drupal.org/project/marinelli — Version utilisée pour ce livre 7.x-3.0-beta9)

astuce.eps

Installez le thème Marinelli comme vous avez installé Danblog (chap. I — 2.6.2 Installation d’un thème externe). Si cela ne fonctionne pas, vous pouvez installer un thème manuellement comme vous installez un module (chap. II — 1.3.3 Méthodes d’installation d’un module) dans le répertoire sites/all/themes ou sites/default/themes.
  • Menu Apparence

Le thème Marinelli est installé

  • Cliquez sur le lien Activer et choisir par défaut du thème Marinelli

information.eps

Pour voir le thème défini par défaut, il faut se rendre sur une page qui n’est pas une page d’administration (page d’accueil du site par exemple). Les pages d’administration utilisent le thème de l’administration (Seven par défaut).
  • Lien Paramètres du thème Marinelli

Les paramètres spécifiques définis par le thème Marinelli

De nombreuses options permettent de configurer le thème et ses fonctionnalités avancées.

  • Vous pouvez par exemple utiliser la section Banner Managment pour modifier les images de la bannière et son mode de défilement (Banner configuration)

Configuration de la bannière de Marinelli

  • Vous pouvez également créer un menu déroulant en 3 clics grâce à la section Primary Menu Settings

Configuration du menu

Deux fonctionnalités avancées de Marinelli : le menu déroulant et le diaporama sur la bannière

Comme le montre Marinelli chaque thème peut proposer divers paramètres de configuration et parfois des fonctionnalités très avancées. De nombreux thèmes existent, n’hésitez pas à les tester et n’oubliez pas de visiter leur page de configuration.

  1. 2 - Structure et modification d’un thème

Dans cette section, vous découvrirez comment est construit un thème Drupal et comment le modifier en éditant ses fichiers. Pour cela, vous utiliserez le thème Orange.

information.eps

Le thème Orange a été choisi car il est simple et utilise les nouvelles fonctionnalités de Drupal 7.
  • Téléchargez le thème Orange (http://drupal.org/project/orange — Version utilisée pour ce livre 7.x-1.1)
  • Cliquez sur le lien Activer et choisir par défaut du thème Orange

La page d’accueil avec le thème Orange

  1. Les fichiers d’un thème

Le thème Orange doit être installé dans le répertoire sites/all/themes/orange.

L’arborescence de Orange

information.eps

Le répertoire contient deux sous-répertoires : orange et orange_admin. En effet, deux thèmes sont inclus dans l’archive, un thème classique Drupal (orange) et un thème d’administration (orange_admin) activable à la section Thème de l’administration de la page des thèmes.

Voici une description des différents fichiers qui composent le thème Orange :

Le fichier .info

orange.info : c’est le point d’entrée du thème, il défini le nom et la description du thème, la version de Drupal sur laquelle il fonctionne, les régions qui le composent, les fichiers CSS et javascript qui lui sont attachés, etc.

Les images

logo.png : logo par défaut du thème pour le site.

screenshot.png : copie d’écran pour la page d’administration des thèmes.

Le répertoire images

Ce répertoire contient l’ensemble des fichiers image qui seront utilisés dans le thème. Par exemple, les boutons ou des icônes (signe + devant Ajouter un commentaire)

Le répertoire css

style.css : fichier contenant tous les styles du site

ie-6.css : fichier contenant les styles spécifiques au navigateur Internet Explorer 6

ie-7.css : fichier contenant les styles spécifiques au navigateur Internet Explorer 7

information.eps

Les fichiers CSS sont les feuilles de styles du thème. C’est dans ces fichiers que sont définis les polices utilisées, les couleurs de fonds, le positionnement des éléments HTML, etc.

Le répertoire js

orange.js : fichier contenant les scripts Javascript du thème

information.eps

Le Javascript est souvent utilisé pour modifier les éléments HTML par le navigateur de l’utilisateur du site. Il permet par exemple d’ajouter des effets visuels, de contrôler des formulaires lors de la saisie sans recharger la page, etc.

Le répertoire templates

Ce répertoire contient l’ensemble des templates définis par le thème. Les fichiers template (.tpl.php) sont des gabarits interprétés par un langage propre à Drupal, le phpTemplate.

Ces fichiers sont composés d’un mélange de HTML et de php.

html.tpl.php : template pour la construction de la page HTML en dehors du contenu. C’est ici que seront définis les contenus des balises DOCTYPE et <head>.

page.tpl.php : template pour la construction de la page dans son ensemble. C’est ici que sera défini le contenu de la balise <body>.

node.tpl.php : template pour la construction des nodes (tout type de contenu).

region.tpl.php : template pour la construction des régions du thème.

block.tpl.php : template pour la construction des blocs des régions.

comment-wrapper.tpl.php : template pour la construction de la zone des commentaires (formulaires + commentaires).

comment.tpl.php : template pour la construction d’un commentaire seul (nom de l’auteur, date, texte du commentaire).

Utilisation des templates du thème Orange pour la construction d’une page

Le fichier template.php

template.php : ce fichier présent à la racine ne contient que du code PHP. Il sera étudié plus tard dans le chap. V — 4.2 Le fichier template.php.

  1. Modification de Orange par CSS

Les feuilles de styles CSS prennent en charge la présentation d’une page HTML. La feuille de style principale du thème Orange est style.css. Il est possible d’éditer le code de ce fichier pour modifier l’apparence du site.

  1. Modification d’un fichier CSS

Dans cet exemple, vous allez mettre toutes les balises h2 (titre des pages et des blocs) en petites majuscules grâce à la propriété CSS font-variant.

  • Éditez le fichier sites/all/themes/orange/orange/css/style.css

astuce.eps

Avec Windows, vous pouvez utiliser Notepad++ pour éditer les fichiers CSS
  • Recherchez le code suivant (ligne 87) :

h2,

h2 a {

color: #222;

font-size: 1.5em;

text-decoration: none;

}

  • Modifiez le en ajoutant un ligne :

h2,

h2 a {

color: #222;

font-size: 1.5em;

text-decoration: none;

font-variant: small-caps;

}

  • Sauvegardez le fichier
  • Rechargez votre page

Les titres des blocs et des nodes sont maintenant en petites majuscules

astuce.eps

Si vous ne connaissez pas CSS, il est conseillé de lire l’un des nombreux tutoriaux disponibles sur internet (exemple : http://css.mammouthland.net/)
  1. Installation et utilisation de Firebug

Pour vous aider à situer les styles que vous voulez modifier dans Drupal, il existe une extension pour Firefox qui s’avère rapidement indispensable : Firebug.

Installation

  • Si Firefox n’est pas sur votre machine, installez le immédiatement !
  • Menu de Firefox Modules complémentaires
  • Dans la zone de recherche, entrez firebug

Installation de Firebug sous Firefox 4

  • Cliquez sur le bouton Installer
  • Redémarrer Firefox

Vous devriez voir apparaître un cafard (bug) à droite de la barre de navigation.

L’icône de firebug à droite de la barre de navigation

Utilisation

  • Rechargez la page d’accueil du site avec le thème Orange
  • Cliquez sur le bouton Firebug (le cafard)

Un volet s’ouvre alors en bas de Firefox, dans la partie gauche se trouve le code HTML de votre page et dans le partie droite le code CSS appliqué à l’élément HTML sélectionné.

L’interface de firebug

  • Cliquez sur la flèche qui permet de sélectionner un élément de la page (deuxième bouton de la barre d’outils)
  • Placez le curseur de la souris sur un titre en petites majuscules

Les propriétés CSS de la balise H2 vues grâce à Firebug

Et c’est ici que Firebug est magique !!

  • l’élément étudié est entouré en bleu ;
  • dans le cadre de gauche de Firebug, le code HTML de l’élément étudié (<h2 class="title"...) est surligné ;
  • dans le cadre de droite de Firebug, vous retrouvez le code CSS que vous avez ajouté :
    font-variant: small-caps ;
  • au-dessus s’affichent le nom du fichier css (style.css) et la position du code css dans le fichier (line 87).

Si vous passez votre souris au-dessus du lien, le chemin complet du fichier CSS apparaît, chose indispensable pour savoir quels fichiers sont réellement concernés.

Chemin du fichier contenant la propriété

Il est également possible de modifier directement depuis Firebug les valeurs des propriétés CSS. L’affichage se met à jour immédiatement dans Firefox.

Modification d’une propriété CSS grâce à Firebug

information.eps

Lorsque vous modifiez vos propriétés dans Firebug, les fichiers CSS ne sont pas modifiés.

astuce.eps

Utilisez flèche haut et flèche bas pour augmenter ou diminuer les valeurs numériques des propriétés CSS.
  1. Les templates de Orange

En modifiant les fichiers CSS du thème, vous modifiez l’aspect de votre page. Pour modifier la structure de la page (code HTML), il faut modifier les templates du thème.

Drupal possède son propre moteur de template, PHPTemplate. Ce moteur interprète les fichiers .tpl.php qui contiennent du code HTML et du code PHP.

Vous afficherez le nom de chaque région de la page en modifiant le template region.tpl.php.

  • Editez le fichier sites/all/themes/orange/orange/templates/region.tpl.php

Ce fichier commence par un long commentaire php (/** */) qui liste les variables php qui pourront être évaluées dans le template. Par exemple, il est dit que la variable $content affiche le contenu de la région et que la variable $region affiche le nom de la région.

Voici le reste du code du template :

1. <?php if ($content): ?>

2. <div class="<?php print $classes; ?>">

3. <?php print render($title_suffix); ?>

4. <?php print $content; ?>

5. </div>

6. <?php endif; ?>

  • la ligne 1 évalue si la variable $content n’est pas vide. Si elle est vide, le template ne retourne rien ;
  • la ligne 2 crée une balise <div> autour de la région et affiche ses classes CSS ;
  • la ligne 3 affiche la variable $title_suffix qui peut être définie par certains modules ;
  • la ligne 4 affiche le contenu de la région (les blocs affectées à la région).

Il est bien sûr possible de personnaliser ce template. Ici, vous allez ajouter une ligne qui affiche le nom de la région en utilisant la variable $region :

  • Modifiez le fichier en ajoutant la ligne 3

1. <?php if ($content): ?>

2. <div class="<?php print $classes; ?>">

3. <div class="warning"><?php print $region; ?></div>

4. <?php print render($title_suffix); ?>

5. <?php print $content; ?>

6. </div>

7. <?php endif; ?>

Cette nouvelle ligne 3 affiche le contenu de la variable $region (nom de la région) dans une balise HTML <div> à laquelle lui est appliquée le style css warning (police blanche sur fond orange) contenu dans le fichier style.css de orange.

Le template region.tpl.php affiche le nom des régions du site

  1. Theme developer : découverte des templates d’un thème
    1. Utilisation de Theme developer

Il n’est pas toujours simple de connaître le nom du template responsable de la création d’un élément HTML de la page. La communauté Drupal a créé un outil qui devient vite indispensable au créateur de thème : Theme developer.

Installation

Le module Theme developer requiert le module Devel.

  • Téléchargez et activez les module Devel (http://drupal.org/project/devel) — Version utilisée pour ce livre 7.x-1.2 et Theme developer (http://drupal.org/project/devel_themer) — Version utilisée pour ce livre 7.x-1.x-dev.

Lorsque le module est installé et activé, une case à cocher Themer info apparaît en bas à gauche du site.

Le module Theme developeur est activé

information.eps

Le module Theme developer ajoute du code sur chaque élément de la page. Ce code est de type :

<span thmr="thmr_2" style="display: block; outline: medium none;" thmr_curr="0">

Ce code peut modifier l’apparence de votre site ou bloquer certains scripts Javascript. Lorsque vous rencontrez un problème inattendu, commencez par désactiver ce module.

Utilisation

  • Cochez la case Themer info

Vous pouvez alors pointer avec la souris, à la manière de Firebug, vers un élément de la page.

  • Cliquez sur le bloc Liens divers créé au chap. II — 2.2.4 Création d’un nouveau menu

Theme developeur affiche les information du template

S’affiche alors une fenêtre popup qui donne des informations sur le template responsable de la création du code HTML sélectionné.

Voici les éléments que vous utiliserez dans ce chapitre :

  • Template called : chemin et nom du fichier template utilisé ;
  • Candidate template files : nom de fichiers de template pouvant être utilisé ;
  • Section (Array, 25 elements) : liste des variables php pouvant être utilisées dans le template.
  1. Modification du template block utilisé

Theme developer indique que le template qui a généré le block est sites/all/themes/orange/orange/templates/block.tpl.php.

  • Éditez ce fichier block.tpl.php

Ce fichier ressemble à region.tpl.php étudié précédemment :

1. <div id="<?php print $block_html_id; ?>" class="<?php print $classes; ?> clearfix"<?php print $attributes; ?>>
2. <?php print render($title_prefix); ?>
3. <?php if (!empty($block->subject)): ?>
4. <h2 class="title"<?php print $title_attributes; ?>><?php print $block->subject ?></h2>
5. <?php endif;?>
6. <?php print render($title_suffix); ?>
7. <div class="content"<?php print $content_attributes; ?>><?php print $content ?></div>
8.</div>

Vous allez maintenant mettre le contenu des blocs avant leur titre (chose peu judicieuse, je vous le concède) .

  • Déplacez la ligne 7 avant la ligne 2
  • Sauvegardez le fichier
  • Rechargez la page

Le titre des blocs en dessous de leur contenu

En modifiant le fichier block.tpl.php vous avez modifié le rendu de l’ensemble des blocs.

  • Annulez cette modification et remettez le titre au dessus du bloc
  1. Création d’un template pour un bloc spécifique

Il est possible de créer des template qui vont modifier uniquement des blocs spécifiques, la ligne Candidate template files apporte des informations à ce sujet.

  • Cliquez à nouveau sur le bloc Liens divers

Les noms de fichiers de template possibles

Cette ligne indique que différents noms de fichiers sont possibles :

block--menu--menu_liens_divers.tpl.php

Seul le bloc menu_liens_divers sera affecté

block--menu.tpl.php

Seuls les blocs générés par le module menu seront affectés

block--sidebar_first.tpl.php

Seuls les blocs de la région sidebar first seront affectés

block.tpl.php

Tous les blocs seront affectés

information.eps

Un seul template sera utilisé par Drupal.

Drupal cherche dans différents répertoires (thème, module, ...) si le premier template existe (ici, block--menu--menu_liens_divers.tpl.php). Si il le trouve, il l’utilise et ne cherche pas d’autres fichiers. Sinon, il cherche le fichier suivant (block--menu.tpl.php).

astuce.eps

Lors de la rédaction de ce livre, le module Theme developer possède un bug qui affiche des "__" au lieu de "--" pour les noms de template. Peut-être que celui-ci sera corrigé lorsque vous lirez ces lignes.

Vous allez créer un template qui affichera un message uniquement dans le bloc liens divers :

  • Faites une copie du fichier sites/all/themes/orange/orange/templates/block.tpl.php dans le même répertoire et renommez-le en block--menu--menu_liens_divers.tpl.php
  • Éditez le fichier créé
  • Avant la ligne <?php print render($title_prefix); ?> ajoutez le code :

<?php print "Je suis le nouveau template !"; ?>

  • Sauvegardez le fichier

Si vous regardez la page à cet instant, votre nouveau fichier n’est pas détecté par Drupal. Pour des raisons de performances, un cache existe et répertorie les fichiers présents sur votre installation.

Pour que votre nouveau fichier soit détecté par Drupal; il faut donc vider les caches :

  • Menu Configuration — lien Performance
  • Bouton Effacer tous les caches

astuce.eps

Le créateur de thème réalise cette action très régulièrement, il est donc fastidieux de devoir aller sur la page performance à chaque fois.

Heureusement le module Devel propose une url qui efface les caches : devel/cache/clear
(http://localhost/drupal/?q=devel/cache/clear). Mettez cet url en marque page de votre navigateur pour gagner du temps.
  • Rechargez la page

Le nouveau template est utilisé !

astuce.eps

Si vous ne parvenez pas à sélectionner un élément dans la page avec Theme developer, pointez vers un élément plus petit (par exemple, pour le bloc "Liens divers", un lien du bloc).

Ensuite, utilisez les liens de la ligne Parents de la fenêtre popup pour remonter vers le template qui vous intéresse.

Utilisation des liens Parents pour retrouver le template désiré
  1. Utilisation des variables php

Vous allez ajouter un nouveau template pour modifier le bloc Bienvenue, Utilisateur identifié créé au chap. II — 2.3.5 Exercice : Création d’un bloc pour un rôle spécifique. Vous modifierez le titre de ce bloc afin qu’il affiche le nom de l’utilisateur connecté.

  • Sélectionnez le bloc Bienvenue, Utilisateur identifié avec Theme developer
  • Cliquez sur la dernière ligne du popup .. (Array, 25 elements)

La liste de toutes les variables php utilisables dans le template s’affiche alors.

Liste de toutes les variables php utilisables dans le template

  • Dans cette liste, recherchez la ligne user (Object) stdClass et cliquez dessus.

Description des attributs de l’objet user

Grâce à ces informations, vous savez que c’est l’attribut name de l’objet $user qui affichera le nom de l’utilisateur connecté. En php, il faudra donc écrire : $user->name.

  • Faites une copie du fichier sites/all/themes/orange/orange/templates/block.tpl.php dans le même répertoire et renommez-le en block--block--2.tpl.php (nom du Candidate template files pour ce bloc)
  • Éditez le fichier créé
  • Modifiez la ligne :

<h2 class="title"<?php print $title_attributes; ?>>

<?php print $block->subject ?>

</h2>

en

<h2 class="title"<?php print $title_attributes; ?>>

<?php print "Bienvenue, ".$user->name ?>

</h2>

  • Sauvegardez le fichier
  • Effacez les caches
  • Rechargez la page

Affichage du nom de l’utilisateur connecté dans le bloc de bienvenue.

astuce.eps

Il est possible d’afficher la liste des variables d’un template en utilisant les fonctions de Debug du module Devel. Cela est parfois indispensable lorsque le module casse la présentation du site.

Ces fonctions sont détaillées au chap. VI — 3.1.3. Les fonctions de débuggage

information.eps

Dans cet exemple, le template du thème a modifié le contenu du site.

Ce n’est pas une bonne pratique car si un webmaster tente de modifier le titre de votre bloc avec l’interface d’administration, cela n’aura aucun effet.
  1. Exercice : mettre un filet autour des blocs d’une région
  • Mettez un filet Orange (#EF9F20) autour de chaque bloc de la région sidebar_first

Filet autour des blocs

Corrigé

Pas besoin d’aller modifier les templates ici. L’ajout d’une règle dans le fichier style.css du thème Orange suffira.

  • Avec firebug pointez vers un bloc de la région

Le code HTML de la région et de ses blocs

  • la région possède une classe css region-sidebar-first ;
  • chaque bloc possède une classe css block.
  • Éditez le fichier sites/all/themes/orange/orange/css/style.css
  • Ajoutez la règle suivante :

.region-sidebar-first .block {
border: 1px solid #EF9F20;
}

  • Sauvegardez le fichier
  • Rechargez la page
  1. Exercice : modifiez le format de date des commentaires

Par défaut, les commentaires sont présentés sous la forme suivante :

Mauvais format de date de publication des commentaires

Faites en sorte que la date s’affiche ainsi en utilisant la variable $changed du template :

Affichage de la date au format français

astuce.eps

Vérifiez que les formats de date et heures sont bien configurés (menu Configuration — lien Date et heure).

Configuration des formats de date et heure

Corrigé

  • Affichez un contenu avec des commentaires
  • Sélectionnez un commentaire avec Theme developer
  • Dans la fenêtre popup, affichez la liste des variables en cliquant sur ... (Array, 36 elements)
  • Recherchez la variable $changed

La variable à utiliser est $changed, elle est au bon format

Il faut donc utiliser la variable $changed dans le fichier comment.tpl.php

  • Éditez le fichier sites/all/themes/orange/orange/templates/comment.tpl.php
  • Modifiez la ligne :

<div class="submitted"><?php print $created; ?> — <?php print $author; ?></div>

en

<div class="submitted"><?php print $changed; ?> — <?php print $author; ?></div>

  • Sauvegardez le fichier
  • Rechargez la page
  1. Exercice : exploration d’un template du module Poll

Avertissement : cet exercice est difficile à réaliser.

Dans le Chap. I — 2.5.1 Activer un module, vous avez créé un sondage grâce au module Poll. Voici comment sont présentés les résultats lorsqu’un utilisateur a déjà voté :

Affichage des résultats pour un utilisateur ne pouvant plus voter

Le but de cet exercice est d’indiquer à l’utilisateur quel a été son vote :

Le choix de l’utilisateur est rappelé sur la page de résultats

Corrigé

Tout d’abord, il faut rechercher quel est le template responsable de l’affichage des résultats d’un sondage.

  • Affichez les résultats du sondage
  • Sélectionnez une ligne de résultat avec Theme developer

Sélection d’une ligne de résultat

Deux templates sont responsables de l’affichage du résultat :

  • poll_results.tpl.php : ce template affiche l’ensemble des résultats et les Votes totaux ;
  • poll-bar.tpl.php : ce template affiche chaque ligne de résultat. Dans cet exemple, il est utilisé trois fois.

Le message doit être affiché pour la ligne de résultat, il faut donc utiliser poll-bar.tpl.php.

information.eps

Theme Developer indique que le template utilisé se situe à l’emplacement
modules/poll/poll-bar.tpl.php et pas dans le thème Orange. En effet, le thème Orange ne personnalise pas ce module et donc, c’est le template du module lui-même qui est utilisé.

Attention, lorsqu’un template se situe dans le répertoire d’un module, il faut en faire une copie dans votre propre thème. Ne modifiez jamais un template original, vous risqueriez de perdre vos modifications à la prochaine mise à jour de Drupal ou d’un module.
  • Faites une copie du fichier modules/poll/poll-bar.tpl.php dans le répertoire sites/all/themes/orange/orange/templates/poll-bar.tpl.php
  • Éditez le fichier créé

Il s’agit maintenant de savoir quelle est la variable à utiliser dans le template.

Une solution pour trouver simplement cette variable est de lire le commentaire présent en haut du template :

* Variables available:
* — $title: The title of the poll.
* — $votes: The number of votes for this choice
* — $total_votes: The number of votes for this choice
* — $percentage: The percentage of votes for this choice.
* — $vote: The choice number of the current user's vote.
* — $voted: Set to TRUE if the user voted for this choice.

Il semblerait que la variable $vote puisse vous aider.

Utilisez le module Theme Developer pour le vérifier. La variable $vote passe à TRUE lorsque vous pointez la recette qui a été choisie par l’utilisateur connecté.

La variable $vote indique si l’utilisateur connecté a voté pour le choix sélectionné

  • Modifiez la ligne :

<div class="text"><?php print $title; ?></div>

en

<div class="text">
<?php print $title; ?>
<?php if ($vote) print "<em>(Votre choix)</em>"; ?>
</div>

  • Sauvegardez le fichier
  • Videz les caches
  • Rechargez la page
  1. 3 - Créer un thème à partir d’un design HTML/CSS

Vous savez maintenant quels sont les fichiers qui composent un thème Drupal et comment modifier un thème existant. Durant ce chapitre, vous allez apprendre à créer un thème « from scratch » (à partir de rien).

Un petit peu d’honnêteté : vous ne partirez pas vraiment de rien mais d’un design HTML/CSS existant car ce n’est pas l’objet de ce livre que de vous apprendre à maîtriser ces langages.

  1. Création du thème
    1. Téléchargement du design et création du répertoire

Le site free CSS templates propose plusieurs centaines de design HTML/CSS sous licence Creative Commons (CCPL). L’auteur du site m’a donné son accord pour l’utilisation de ses designs dans cet ouvrage et je l’en remercie.

Pour la création de ce thème, vous allez utiliser le design culinary téléchargeable à l’adresse
http://www.freecsstemplates.org/preview/culinary/.

Le thème Culinary sur free CSS templates

  • Télécharger l’archive culinary.zip
  • Extrayez son contenu dans un nouveau répertoire sites/default/all/culinary qui sera le répertoire de votre thème

Fichiers du design culinary

Voici une description des fichiers de cette archive :

  • dossier images : images utilisée dans le thème (logo, illustration, etc.) ;
  • index.html : code HTML du design ;
  • default.css : code CSS du design ;
  • license.txt : texte de la licence CCPL.
  1. Création du .info

Lors du chargement de la page Apparence, qui liste l’ensemble des thèmes de l’installation, Drupal recherche un fichier .info dans chaque sous-répertoire du répertoire themes.

  • Créez un fichier culinary.info dans le répertoire culinary

name = Culinary

description = Theme Culinary de freecesstemplates.

core = 7.x

version = 7.x-dev

engine = phptemplate

name

Nom du thème, s’affiche sur la page Apparence

description

Description du thème, s’affiche sur la page Apparence

core

Version requise de Drupal. Ici, 7.x indique n’importe quelle version 7 de Drupal (7.0, 7.1, 7.2, etc.)

version

Version du thème, s’affiche sur la page Apparence

engine

Moteur de template utilisé

Vous avez écrit ici un fichier .info minimale. Vous modifierez ce fichier à plusieurs reprise durant ce chapitre pour y ajouter de nouvelles directives de configuration.

  • Allez sur la page Apparence

Votre .info a été lu par Drupal

  1. Le premier template : html.tpl.php

Le père de tous les template est html.tpl.php, c’est à partir de celui-ci que tous les autres seront appelés. Vous allez créer ce premier template à partir du fichier index.html du design.

  • Renommez index.html en html.tpl.php
  • Créez un sous-répertoire templates
  • Placez le template html.tpl.php dans ce répertoire

information.eps

Il n’est pas obligatoire de placer ses templates dans le répertoire templates, mais cela est recommandé pour ne pas surcharger la racine du thème et pour une meilleure lisibilité.

Votre thème peut dès maintenant s’afficher !!!

  • Page Apparence
  • Choisir le lien Activer et choisir par défaut du thème Culinary
  • Aller sur la page d’accueil du site

Votre thème fonctionne

Forcément, il reste encore un petit peu de travail : aucun style n’est appliqué au HTML et le contenu est statique.

  1. Ajout des fichiers css au thème

Commencez par informer Drupal que votre thème contient sa propre feuille de style CSS.

  • Éditez le fichier culinary.info
  • À la fin du fichier, ajoutez la ligne

stylesheets[all][] = default.css

information.eps

La notation de cette ligne peut paraître complexe. Il est pourtant intéressant de comprendre sa syntaxe car beaucoup de directives du fichier .info la suivent.

stylesheets

C’est le nom de la variable de type tableau (array) de drupal à laquelle il va falloir ajouter un élément.

[all]

Utilisé uniquement pour les feuilles CSS, c’est le média dans lequel la feuille de style devra être utilisée. Ici tous les médias, mais on aurait pu utiliser [screen] (écran) ou [print] (imprimante).

[]

Comme en PHP, ce double crochet indique que l’élément sera ajouté en fin de tableau.

astuce.eps

Il est également possible de créer un sous-répertoire pour regrouper l’ensemble des fichiers css du projet. Dans ce cas, il faut indiquer le chemin relatif du fichier CSS par rapport au fichier .info.

Exemple pour un sous-répertoire css :

stylesheets[all][] = css/default.css

html.tpl.php doit maintenant charger la liste des fichiers css de Drupal. Cette liste se trouve dans la variable $styles du template :

  • Éditez le fichier html.tpl.php
  • Remplacez la ligne

<link href="default.css" rel="stylesheet" type="text/css" />

par

<?php print $styles; ?>

  • Videz le cache

astuce.eps

Si vous êtes bloqué sur votre site Drupal à cause du thème, entrez l’url
http://localhost/drupal-7.7/?q=admin pour afficher une page qui utilise le thème d’administration Seven.
  • Affichez à nouveau la page d’accueil du site

Les feuilles de styles ont été ajoutées

Le contenu est toujours statique, mais la feuille de style du thème a été ajouté ainsi que toutes les autres feuilles de style des différents modules Drupal utilisés.

  1. Ajout des fichiers Javascript au thème

Le design Culinary ne contient pas de fichier Javascript, il est pourtant important d’afficher la variable $script dans le template html.tpl.php pour que les fichiers .js des modules soient insérés au site.

  • Éditez le fichier html.tpl.php
  • Ajoutez la ligne suivante sous celle des styles

<?php print $scripts; ?>

Un grand nombre de fichiers .js sont ajoutés par les modules de Drupal

  1. Le template page.tpl.php

Comme son nom l’indique, le template html.tpl.php gère le code de la balise <html>. Le contenu de la page est géré dans page.tpl.php (balise <body>).

  • Créez un fichier page.tpl.php dans le répertoire templates du thème culinary
  • Copiez le code se trouvant à l’intérieur de la balise <body> du fichier html.tpl.php (attention, il ne faut pas copier la balise <body>) et remplacez-le par le code suivant qui appellera page.tpl.php. Le code de la balise <body> devra être :

<body>

<?php print $page ?>

</body>

  • Collez le code se trouvant à l’intérieur de <body> dans le fichier page.tpl.php
  • Videz le cache

L’apparence de votre thème n’est pas modifié par ces actions, mais les variables PHP disponibles dans
page.tpl.php sont différentes de celles de html.tpl.php.

  1. Les régions

Dans le Chap. I — 2.1 Block : les blocs, vous avez positionné des blocs dans différentes régions du thème Bartik.

Chaque thème doit au moins définir 4 régions : page_top, page_bottom, help et content. Elles sont en effet utilisées par certains modules du cœur de Drupal. Ensuite, il est possible de définir autant de régions qu’il est nécessaire.

  1. Création des régions

Pour ce thème, trois autres régions seront définies :

  • Menu primaire : menu du haut ;
  • Colonne latérale : colonne latérale de droite ;
  • Pied de page.

C’est dans le .info que vous décrivez les régions de votre thème.

  • Éditez le fichier culinary.info et ajoutez les lignes suivantes :

regions[page_top] = Haut de page

regions[help] = Aide

regions[page_bottom] = Bas de page

regions[content] = Contenu

regions[menu] = Menu principal

regions[sidebar_first] = Colonne laterale

regions[footer] = Pied de page

Pour chaque région définie dans le .info, une variable est disponible dans le template page.tpl.php. Par exemple, pour la région menu, une variable $page[‘menu’] contenant le contenu des blocs à afficher dans cette région sera disponible. L’étiquette (Menu principal) sera utilisée pour le placement des blocs.

astuce.eps

Drupal placera automatiquement les blocs de votre installation dans les régions de votre thème si vous utilisez des noms génériques.

Par exemple, tous les blocs que vous avez placé en Colonne latérale gauche de Bartik seront placés automatiquement en Colonne latérale de Culinary si le nom de variable de la région est sidebar_first.

information.eps

Drupal défini automatiquement les régions suivantes pour tous les thèmes :

sidebar_first, sidebar_second, content, header, footer, highlighted, help, page_top, page_bottom,
dashboard_main, dashboard_sidebar, dashboard_inactive

Cependant, je vous conseille de toutes les redéfinir dans le .info pour plus de clarté.
  1. Affichage du contenu, région content

Il s’agit maintenant d’utiliser les variables disponibles dans les templates. Vous allez commencer par afficher le contenu de la page grâce à la variable $page[‘content’] dans le template page.tpl.php.

  • Éditez page.tpl.php
  • Remplacez le code à l’intérieur de la balise <div id=»content»> par :

<?php print render($page['content']); ?>

  • Le code devra donc être :

<div id="content">

<?php print render($page['content']); ?>

</div>

<!-- end div#content -->

information.eps

La variable $page['content'] contient un tableau de différents éléments à afficher (contenu d’une node, liste des nodes). La fonction render transforme ce tableau en code HTML qui sera affiché par le navigateur.
  • Sauvegardez le fichier et rechargez la page

Culinary affiche le contenu et le Javascript fonctionne

  1. Affichage des blocs dans la région colonne latérale

La variable $page[‘sidebar_first’] contient le code html des blocs placés dans la région Colonne latérale. Elle s’utilise de la même façon que $page[‘content’].

  • Éditez page.tpl.php
  • Remplacez le code à l’intérieur de la balise <div id=»sidebar»> :

<div id="sidebar">

<?php print render($page['sidebar_first']); ?>

</div>

<!-- end div#sidebar -->

  • Sauvegardez le fichier

Les blocs sont maintenant affichés

astuce.eps

Vous pouvez vérifier si vos régions sont correctement configurées en allant sur la page d’Aperçu des régions des blocs s

  • Menu Structure — lien Blocs
  • Lien Aperçu des régions des blocs (Culinary)

Les deux régions sont correctement configurées
  1. Exercice : le menu

Afficher le menu Menu principal à la place du menu du design.

Affichage du menu dans Culinary

Corrigé

Lors de la création d’un menu, un bloc correspondant est crée. Il suffit donc de créer une région menu et d’afficher le bloc Menu principal dans cette région.

Il faut tout d’abord afficher la variable $page[‘menu’] dans page.tpl.php :

  • Éditez page.tpl.php
  • Remplacez ainsi le code à l’intérieur de la balise <div id="menu"> :

<div id="menu">

<?php print render($page['menu']); ?>

</div>

<!-- end div#menu -->

  • Enregistrez le fichier

Il faut maintenant positionner le bloc dans la région menu :

  • Menu Structure — lien Blocs

Il ne faut pas que le titre du bloc s’affiche :

  • Lien configurer du bloc Menu principal
  • Titre du bloc : <none>
  • Bouton Enregistrer le bloc

Vous retournez alors sur la page de gestion des blocs :

  • Choisir la région Menu principal pour le menu Menu principal

Choix de la région pour le bloc de menu

  1. Exercice : le footer

Proposez une interface au Webmaster pour modifier le texte du Pied de page.

Texte de pied de page administrable

Corrigé

L’idée n’est bien sûr pas de créer un module permettant de saisir le texte du pied de page mais de créer un bloc personnalisé (chap. II — 2.1.4 Ajouter un bloc personnalisé) et de l’afficher en région Pied de page.

Création du bloc :

  • Menu Structure — lien Blocs
  • Lien + Ajouter un bloc
  • Description du bloc : Pied de page pour thème Culinary
  • Titre du bloc : <none>
  • Corps du bloc :

Et voici le nouveau pied de page à modifier !

  • Paramètres de la région : choisir Pied de page pour le thème Culinary
  • Bouton Enregistrer le bloc

Il faut maintenant afficher la variable $page[‘footer’] dans page.tpl.php :

  • Éditez page.tpl.php
  • Remplacez ainsi le code à l’intérieur de la balise <div id="footer"> :

<div id="footer">

<?php print render($page['footer']); ?>

</div>

<!-- end div#footer -->

  • Enregistrez le fichier
  1. Les autres régions

Il reste trois régions à définir page_top, page_bottom et help qui sont utilisées par certains modules du coeur de Drupal.

Région help

  • Éditez le fichier page.tpl.php
  • Avant la ligne <div id="content">, insérer le code suivant :

<div id="help">

<?php print render($page['help']); ?>

</div>

<!-- end div#help -->

  • Sauvegardez le fichier

Les régions page_top et page_bottom

Il est possible d’insérer les variables $page[‘page_top’] et $page[‘page_bottom’] dans le template page.tpl.php comme vous l’avez fait pour les autres régions. Cependant, il est préférable de le faire dans html.tpl.php juste après la balise <body> pour être sûr qu’aucun code html ne s’intercale entre les deux.

Pour cela, html.tpl.php dispose de deux variables $page_top et $page_bottom.

  • Éditez le fichier html.tpl.php
  • Modifiez le code de la balise <body> ainsi :

<body>

<?php print $page_top ?>

<?php print $page ?>

<?php print $page_bottom ?>

</body>

  • Sauvegardez le fichier

Ainsi, le module Toolbar, qui utilise la région page_top fonctionne avec votre thème.

  1. 4 - Theming du contenu

Vous avez jusqu’à maintenant travaillé sur la page de base de votre thème. Il est également possible de présenter le contenu de votre site.

Dans cette section, vous allez apprendre à présenter les éléments d’une node de type Recette.

Puce module.eps

Le module chap. IV — 4.6 Display suite : présentez vos contenus en utilisant l’interface de Drupal permet de présenter le contenu simplement.
  1. Créer un template spécifique pour un type de contenu
  • Affichez une page contenant une node de type Recette
  • Sélectionnez l’ensemble du contenu de la node avec Theme developer

Inspection du template node.tpl.php

Theme developper vous apporte ces informations :

  • le template utilisé est node.tpl.php ;
  • les champs de la node sont disponibles sous forme de variable ($field_temps_preparation).

L’idée est ici de créer un fichier s’inspirant de node.tpl.php dans notre thème qui sera utilisé uniquement pour afficher les contenu de type recette :

  • Copiez le fichier modules/node/node.tpl.php
  • Collez ce fichier dans le répertoire de votre thème

information.eps

Theme Developper indique à la ligne Candidate template files que le fichier peut prendre les noms suivants :

  • node.tpl.php : le template est utilisé pour afficher le contenu de toutes les nodes ;
  • node--recette.tpl.php : le template est utilisé pour afficher le contenu des nodes de type recette ;
  • node--6.tpl.php : le template est utilisé pour afficher le contenu de la node 6.
  • Renommez le fichier node.tpl.php de votre thème en node--recette.tpl.php
  • Effacez les caches
  • Sélectionnez à nouveau l’ensemble du contenu de la node avec Theme developer

Le template de votre thème est maintenant utilisé

  1. Créer un template node.tpl.php sur-mesure

Le template node.tpl.php a accès à la valeur de tous les champs du type de contenu affiché. Pour afficher le contenu, il est donc possible de reprendre le code par défaut de node.tpl.php ou de créer du code sur mesure. C’est ce que vous allez faire, dans un premier temps, dans cette section.

Affichage du titre

  • Gardez uniquement la balise <div> parente du template node--recette.tpl.php

Le titre de la node est dans la variable $title. Ajoutez la classe "post" dans la balise parente <div> pour que la classe css de culinary s’applique et insérez-y le code suivant pour afficher le titre :

<div id="node-<?php print $node->nid; ?>" class="post <?php print $classes; ?> clearfix"<?php print $attributes; ?>>

<h2 class="title"><a href="#"><?php print $title ?></a></h2>

</div>

node--recette.tpl.php n'affiche que titre de la node

Affichage du corps

Le corps de la node (body) est disponible dans la variable $body.

Contenu de la variable $body

Pour l’afficher dans le template, il suffit donc d’ajouter le code suivant après le titre :

<?php print $body[0]['safe_value'] ?>

information.eps

L’élément [‘value’] est la valeur du body brute, l’élément ['safe_value'] est la valeur du body filtrée par le format d’entrée.

Vous pouvez alors modifier le code HTML pour qu’il s’adapte au design Culinary :

<div class="entry">

<div class="intro">

<?php print $body[0]['safe_value'] ?>

</div>

</div>

Le titre et le body

Affichage du temps de préparation

Un champ personnalisé s’affiche de la même façon :

Champ personnalisé

Il faut donc ajouter le code suivant :

<div class="temps">

<?php print "Temps de préparation : ".$field_temps_preparation[0]['value']?>

</div>

information.eps

Si votre site est multilingue, utilisez la fonction t() pour afficher vos chaînes de caractères comme avec les modules (chap. VI — 1.2.5. Conventions et finitions).

Afficher la liste des ingrédients

Pour afficher les champs contenant un nombre de valeurs supérieur à un, il faut utiliser une boucle en PHP.

Le nombre de valeurs du champ est illimité

Il s'agit donc de parcourir le tableau $field_ingredients et d'afficher chaque valeur. L’instruction foreach() est alors utilisée :

<h3>Ingrédients</h3>
<ul class="ingredients">
<?php foreach ($field_ingredients as $ingredient) : ?>
<li><?php print $ingredient['safe_value'] ?></li>
<?php endforeach; ?>
</ul>

La liste des ingrédients est affichée

Afficher l’image

Vous pouvez également utiliser la fonction render() pour afficher un champ que vous ne désirez pas retravailler. Cela pourrait-être le cas pour le champ image (photo de la recette).

Ajoutez le code suivant au template :

<div class="image">
<?php print render($content['field_image'])?>
</div>

Affichage de l’image en style medium et sans étiquette

astuce.eps

L’image sera alors rendue selon les paramètres utilisés pour l’affichage du champ Photo de la recette.

Configuration du champ affiché par la fonction render($content[‘field_image‘])

Exemple de rendu

Vous pouvez continuer ainsi à afficher chaque champ de votre type de contenu.

L’exemple d’implémentation suivant contient du code php pour le template et un fichier recette.css qui lui applique un style spécifique.

Il faut indiquer dans le fichier .info du thème que ce fichier css est utilisé.

  • Dans le fichier culinary.info, ajoutez la ligne suivante :

stylesheets[all][] = recette.css

  • Puis créez le fichier recette.css

.infos {

float: right;

font-style: normal;

margin: 0 0 1em 1em;

border: 1px solid black;

padding: 1em;

color: white;

background-color: #E14949;

}

ul.ingredients {

font-style: normal;

margin-left: 2em;

}

ol.etapes li{

list-style: decimal outside none;

}

.image {

float: right;

margin: 0 0 1em 1em;

}

  • Enfin, voici le contenu du fichier node--recette.tpl.php

<div id="node-<?php print $node->nid; ?>" class="<?php print $classes; ?> clearfix post"<?php print $attributes; ?>>

<h2 class="title">

<a href="#"><?php print $title ?></a>

</h2>

<p class="byline">Posté par <?php print $name ?></p>

<div class="entry">

<div class="infos">

<div class="temps">

<?php print "Temps de préparation : ".$field_temps_preparation[0]['value']?> min

</div>

<div class="prix">

<?php print "Prix : ".$field_prix[0]['value']?> €

</div>

</div>

<div class="intro">

<?php print $body[0]['safe_value'] ?>

</div>

<h3>Ingrédients</h3>

<ul class="ingredients">

<?php foreach ($field_ingredients as $ingredient) : ?>

<li><?php print $ingredient['safe_value'] ?></li>

<?php endforeach; ?>

</ul>

<h3>Etapes</h3>

<div class="image">

<?php print render($content['field_image'])?>

</div>

<ol class="etapes">

<?php foreach ($field_etapes as $etapes) : ?>

<li><?php print $etapes['safe_value'] ?></li>

<?php endforeach; ?>

</ol>

</div>

</div>

Présentation de la recette dans Culinary

Les étapes de la recette

Cette méthode de création sur-mesure d’un template pour un type de node est tout indiquée si vous avez un design contenant beaucoup de code HTML spécifique. Mais ne perdez pas de vue qu’elle comporte également des défauts :

  • non utilisation de certains éléments de configuration des champs (préfixe et suffixe, ordre, format, etc.) ;
  • vous devez afficher à la main les autres éléments de node.tpl.php comme les commentaires, les liens vers les termes de taxonomy, etc.

Pour la suite de ce livre, vous utiliserez des pratiques moins radicales en vous basant sur le template de Drupal par défaut.

  • Copiez le contenu du fichier modules/node/node.tpl.php
  • Collez-le dans le fichier node--recette.tpl.php

astuce.eps

Il est également possible de se baser sur les fichiers node.tpl.php des thèmes existants (par exemple, celui de Bartik).
  1. Fonctions Hide et Show (afficher l’image sous les commentaires)

Dans le template node.tpl.php par défaut, la ligne print render($content); affiche l’intégralité du contenu.

Cela peut poser problème si vous désirez afficher un élément en dehors du contenu. Dans cet exemple, vous afficherez l’image (photo de la recette) tout en bas de la page, après les commentaires.

information.eps

Le contenu du fichier node--recette.tpl.php utilisé est celui du template par défaut : modules/node/node.tpl.php.

La fonction render()

La fonction render() prend en paramètre un élément qui contient des instructions à traduire en code HTML. Cet élément est un tableau pouvant contenir d’autres éléments à traduire :

Contenu du tableau $content

Il est possible de traduire un élément fils du tableau $content grâce à la fonction render :
render($content['field_image']); traduit uniquement l’élément field_image.

Pour afficher l’image en bas de page, entrez le code suivant juste avant la dernière balise </div> :

<?php print render($content['field_image']); ?>

L’image affichée en dehors du contenu

Hide

Votre image est alors affichée deux fois : une fois en bas de page et une fois dans le contenu. Il est possible de cacher un élément fils du tableau grâce à la fonction hide(). Pour cela, entrez le code suivant juste avant la ligne print render($content); :

hide($content['field_image']);

Show

Inversement, la fonction show() permet d’afficher un élément qui ne devrait plus l’être :

  • Affichez l’image en haut de la page, avant le titre en déplaçant la ligne <?php print render($content[‘field_image’]); ?>.

L’image s’affiche alors en haut, mais elle ne s’affiche plus dans le contenu car elle a déjà été traduite. Pour l’afficher dans le contenu, entrez le code suivant juste avant la ligne print render($content); :

show($content['field_image']);

Ainsi, l’image s’affiche également dans le contenu.

  1. Modifier l’affichage d’un item grâce au template field.tpl.php

Si vous désirez modifier le code HTML d’un seul champ d’une node, cela est possible grâce à un template qui est associé à chaque champ.

Vous allez ici mettre en forme uniquement le champ " Étapes " :

  • Avec Theme developper, sélectionnez le champ étapes

Fonction de thème theme_field()

Ici, aucun template n’est appelé, et Drupal utilise une fonction de thème. Vous découvrirez plus tard dans cette section comment s’utilise une fonction de thème.

Le champ theme_hook_suggestions est l’équivalent de la section Candidate function names :

  • field--text_long.tpl.php : le template est utilisé pour afficher les champs de type texte long ;
  • node--field_etapes.tpl.php : le template est utilisé pour afficher le contenu des champs étapes ;
  • node--recette.tpl.php : le template est utilisé pour afficher le contenu des champs des nodes de type recette ;
  • node--field_etapes--recette.tpl.php : le template est utilisé pour afficher le contenu des champs étapes des nodes de type recette.

Il existe un fichier template field.tpl.php par défaut dans le répertoire modules/field/theme/field.tpl.php :

  • Copiez le fichier modules/field/theme/field.tpl.php dans votre répertoire de thème
  • Renommez-le en node--field_etapes.tpl.php

Il suffit maintenant de modifier le code du template :

  • ajout de balises <ol> et <li> ;
  • mettre une classe etapes sur la balise <ol>.

<div class="<?php print $classes; ?> clearfix"<?php print $attributes; ?>>

<?php if (!$label_hidden) : ?>

<div class="field-label"<?php print $title_attributes; ?>><?php print $label ?>:&nbsp;</div>

<?php endif; ?>

<ol class="etapes field-items"<?php print $content_attributes; ?>>

<?php foreach ($items as $delta => $item) : ?>

<li class="field-item <?php print $delta % 2 ? 'odd' : 'even'; ?>"<?php print $item_attributes[$delta]; ?>>

<?php print render($item); ?>

</li>

<?php endforeach; ?>

</ol>

</div>

  • Videz les caches

Étapes numérotées par la balise <ol>

information.eps

Le fichier recette.css du chapitre précédent doit être chargé par le .info pour que la classe " etapes " s’applique.
  1. Le fichier template.php

Le fichier template.php occupe une place à part dans les thèmes. Il permet d’inclure du code PHP pur pour vos thèmes. En effet, il est peu recommandé pas indiqué d’inclure du code PHP complexe dans vos templates.

Ce fichier permet deux choses :

  • de modifier les fonctions de thèmes existantes en les surchargeant ;
  • d’ajouter ou de modifier des variables via des fonctions preprocess.
  1. Ajout d’une variable à un template

Lorsque vous avez utilisé theme_developper, peut-être avez-vous remarqué une ligne Preprocess functions.

Fonctions de preprocess disponibles pour node.tpl.php

Avant d’interpréter le code d’un template, Drupal regarde si une fonction preprocess existe. Si elle existe, il l’exécutera. Dans l’exemple suivant, vous utiliserez une fonction de preprocess pour ajouter une variable au template node--recette.tpl.php.

  • Créez le fichier template.php à la racine de votre thème

information.eps

Attention à ne pas ajouter ce fichier dans le répertoire templates de votre thème !
  • Ajoutez-y le code suivant :

<?php

function culinary_preprocess_node(&$variables) {

if ($variables['type'] == "recette") {

$variables['test'] = 'Je suis la !';

}

}

Ce code n’est pas très compliqué. Vous devez utiliser la fonction de preprocess template_preprocess_node comme vous l’a indiqué Theme Developper. Il faut remplacer le mot template_ par le nom de votre thème (culinary_).

Cette fonction prend en argument le tableau de toutes les variables disponibles. Il suffit donc d’ajouter une variable à ce tableau pour pouvoir l’utiliser dans votre template.

information.eps

L’argument $variables est passé par référence (&$variables). Ainsi, toutes les modifications faites sur ce tableau seront conservées.
  • Videz les caches
  • Rechargez la page et pointez vers le template node--recettes.tpl.php avec Theme developper

La nouvelle variable a été ajoutée

Vous pouvez donc utiliser la variable "test" dans le template node.tpl.php.

  1. Exercice : ajout des variables nombre_etapes et nombre_ingredients
  • Calculez les variables nombre_etapes et nombre_ingrédients ;
  • affichez les dans le template node.tpl.php.

Utilisation des variables créées dans le template

Corrigé

Dans le fichier template.php, modifiez la fonction :

function culinary_preprocess_node(&$variables) {

if ($variables['type'] == "recette") {

$variables['nombre_ingredients'] = count($variables['field_ingredients']);

$variables['nombre_etapes'] = count($variables['field_etapes']);

}

}

Puis, dans le fichier node--recette.tpl.php, affichez les variables :

<div class="submitted">

<?php print $submitted; ?><br/>

<?php print 'nombre d\'étapes : '.$nombre_etapes ?>,

<?php print 'nombre d\'ingrédients : '.$nombre_ingredients ?>

</div>

  1. Les fonctions de thème

Vous avez déjà rencontré une fonction de thème lorsque vous avez pointé vers un champ du contenu (Fonction theme_field()). Vous avez alors utilisé un template pour la surcharger.

Mais il est également possible de surcharger une fonction de thème par une autre fonction dans le fichier template.php. Par exemple, le fil d’ariane utilise une de ces fonctions. Vous allez la modifier :

information.eps

Vérifiez que le fil d’ariane s’affiche avec votre thème. Pour cela, la ligne <?php print $breadcrumb; ?> doit se trouver juste au dessus de la ligne <div id="content">.

Positionnez-vous ensuite sur la page d’un terme de taxonomie ayant un terme parent.

Fil d’arianne du terme Sicile
  • Pointez vers le fil d’ariane avec Theme developper

Le fil d’ariane est affiché avec la fonction theme_breadcrumb()

Tout comme pour les templates, il est conseillé de reprendre le code par défaut de la fonction et de le modifier ensuite. Theme developper peut une nouvelle fois vous aider :

  • Cliquez sur le lien theme_breadcrumb()

Vous arrivez alors sur la page api.drupal.org correspondant à la fonction. Copiez la section Code de la page.

Code original de la fonction

astuce.eps

Remarquez que api.drupal.org indique que la fonction est dans le fichier includes/theme.inc.
  • Dans le fichier template.php de votre thème, collez le code de la fonction
  • Modifiez son nom de theme_breadcrumb en culinary_breadcrumb

Vous pouvez maintenant modifier le code de la fonction comme bon vous semble. Vous pouvez par exemple changer le caractère de séparation. Pour cela, modifiez la ligne suivante :

$output .= '<div class="breadcrumb">' . implode(' + ', $breadcrumb) . '</div>';

  • Videz les caches

Le nouveau fil d’ariane

  1. 5 - Les variables disponibles dans les templates

Cette section liste les principales variables des principaux templates de Drupal et donne un exemple d’utilisation de ces variables pour le thème culinary.

  1. Variables de html.tpl.php

$styles

Balise <style> mis en forme qui importe les fichiers CSS nécessaires à la page.

$scripts

Balise <script> mis en forme qui importe les fichiers javascript nécessaires à la page.

$css

Tableau qui liste des chemins et noms des fichiers CSS nécessaires à la page.

$page

Contenu de la page.

$page_top

Haut de page pouvant être modifié par tous les modules (Toolbar ou administration menu par exemple). Cette variable doit être placée avant $page.

$page_bottom

Idem à $page_top pour le bas de page.

$language

Objet php décrivant le langage courant de la page (Par exemple, pour afficher le nom du langage : $language->native).

$head

Code html pour les meta tags du head (description, icone, etc.).

$head_title

Titre de la page : attention, ce titre s’affiche en titre de la fenêtre (ou onglet) du navigateur et pas à l’intérieur du contenu.

$classes

Classes CSS qui peuvent être utilisées dans la balise <body>.

Voici un exemple de fichier html.tpl.php pour Culinary :

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<?php print $head ?>

<meta http-equiv="content-type" content="text/html; charset=utf-8" />

<title><?php print $head_title; ?></title>

<?php print $scripts; ?>

<?php print $styles; ?>

</head>

<body <?php print $classes?>>

<?php print $page_top ?>

<?php print $page ?>

<?php print $page_bottom ?>

</body>

</html>

astuce.eps

N’oubliez pas que vous pouvez vous baser sur les templates existants des autres thèmes, par exemple celui de Bartik.
  1. Variables de page.tpl.php

$site_name

Nom du site (Menu Configuration — lien Informations).

$site_slogan

Slogan du site (Menu Configuration — lien Informations).

$front_page

Adresse de la page d’accueil (Menu Configuration — lien Informations). Utilisée pour lier le logo à la page d’accueil.

$is_front

Vrai si vous êtes sur la page d’accueil.

$logo

Chemin vers le fichier logo uploadé depuis la page de configuration du thème.

$title

Titre de la page.

$tabs

Onglets disponibles pour la page (Ex : Éditer et Voir pour une node).

$messages

Messages Drupal à afficher (Ex : La node xxx a bien été enregistrée).

$breadcrumb

Fil d’ariane.

$base_path

Url de base de votre installation de Drupal (Ex : /drupal/ ).

$directory

Répertoire courant du template (Ex : sites/all/themes/culinary).

information.eps

Vous pouvez également utiliser les variables $page['nom_de_region'] pour afficher le contenu d’une région.

Voici un exemple de fichier page.tpl.php pour Culinary :

<div id="wrapper">

<div id="header">

<div id="logo">

<h1><a href="<?php print $front_page; ?>"><?php print $site_name; ?></a></h1>

<?php if ($site_slogan): ?>

<h2><?php print $site_slogan; ?></h2>

<?php endif; ?>

</div>

<!-- end div#logo -->

</div>

<!-- end div#header -->

<div id="menu">

<?php print render($page['primary_menu']) ?>

</div>

<!-- end div#menu -->

<div id="page">

<div id="page-bgtop">

<?php if ($messages): ?>

<div id="messages">

<?php print $messages; ?>

</div>

<?php endif; ?>

<?php print $breadcrumb; ?>

<div id="content">

<?php if ($title): ?>

<h1 class="title" id="page-title">

<?php print $title; ?>

</h1>

<?php endif; ?>

<?php if ($tabs): ?>

<div class="tabs">

<?php print render($tabs); ?>

</div>

<?php endif; ?>

<?php print render($page['content']); ?>

</div>

<!-- end div#content -->

<div id="sidebar">

<?php print render($page['right']) ?>

</div>

<!-- end div#sidebar -->

<div style="clear: both; height: 1px"></div>

</div>

</div>

<!-- end div#page -->

<div id="footer">

<?php print render($page['footer']) ?>

</div>

<!-- end div#footer -->

</div>

<!-- end div#wrapper -->

  1. Variables de node.tpl.php

$title

Titre de la node.

$date

Date de création de la node.

$content

Contenu de la node mis en forme.

$nid

N° de la node.

$vid

N° de version de la node.

$user

Objet user de l’auteur de la node.

$field_xxx

Tableau correspondant aux occurrences des champs (exemple : $field_temps_preparation).

Un exemple d’utilisation de ces variables est disponible chap. V — 4.1.1 Créer un template node.tpl.php sur-mesure.

  1. 6 - Le theming des vues

Puce module.eps

Lisez le chap. II — 1 Views avant celui-ci

De nombreux templates peuvent être utilisés pour modifier la sortie de vos vues. L’interface de Views vous aide à retrouver le nom du template à utiliser dans vos thèmes et fourni le code de base du template.

Utilisation

  • Cliquez sur le lien modifier de la vue Liste des recettes
  • Dans la section AUTRE, cliquez sur le lien Thème : Informations

S’affiche une fenêtre popup contenant des informations sur les templates utilisés par votre thème pour afficher la vue.

  • Choisissez le thème Orange

Les templates utilisés par Orange

Cette page est uniquement une page contenant des informations importantes concernant le theming de votre vue. Vous ne pouvez exécuter aucune action à partir d’ici.

Les styles de template

Il existe trois types de template :

  • sortie de l’affichage (views-view) : c’est le template principal de la vue. Il affiche tout ce qui est en dehors des données de la vue : le titre, l’en-tête et le pied de page, les éléments de pagination, le lien more, etc. ;
  • sortie du style (views-view-nomdustyle) : ce template varie selon le format de l’affichage. Pour un format en tableau, il affichera la balise <table> et l’en-tête du tableau <thead> ;
  • sortie des champs (views-view-field) : il existe un template par champ. Il affiche le contenu du champ.

Choisir un nom de template

Le template sera utilisé dans certains contextes selon le nom de fichier qu’il porte. Le nom d’un template d’une vue est formé ainsi :

views-view-[style ou champ]--[nom de la vue]--[nom de l'affichage]--[nom du champ].tpl.php

Les chaînes [] permettent de limiter le champ d’action des templates.

Voici quelques exemples et leur champs d’utilisation (attention, certains noms de template peuvent choquer les âmes sensibles) :

  • views-view-table.tpl.php : ce template sera utilisé pour tous les affichages utilisant le format tableau ;
  • views-view-field--title.tpl.php : ce template sera utilisé pour tous les champs ayant pour id title ;
  • views-view-field--liste-des-recettes--field-illustration.tpl.php : un nom à coucher dehors pour un template qui sera utilisé pour le champ field-illustration dans la vue liste-des-recettes ;
  • views-view-field--liste-des-recettes--page.tpl.php : ce template sera utilisé pour les champs de la vue liste des recettes avec un affichage de type page.

Créer un template

Vous allez ici créer un template qui ajoutera une mention « Bon marché » sous le titre lorsque le prix de la recette sera inférieur à 4.00 EUR.

Il faut commencer par choisir le nom du template qui convient. Ici, le template doit s’appliquer sur le champ title, pour tous les affichages de la vue liste des recettes. Son nom sera donc :

views-view-field--liste-des-recettes--title.tpl.php

  • Dans le répertoire sites\all\themes\orange\orange\templates, créez le fichier
    views-view-field--liste-des-recettes--title.tpl.php

Vous pouvez vérifier par Views que le template est pris en compte :

  • Cliquez sur le lien modifier de la vue Liste des recettes
  • Dans la section AUTRE, cliquez sur le lien Thème : Informations
  • Bouton Re-scanner les fichiers de template

À ce moment, le nom du template utilisé pour l’affichage sélectionné est en gras.

Le nouveau template est bien détecté

  • Vous devez récupérer le code par défaut du template en cliquant sur le lien Champ Contenu : Titre (ID: title)

Code original du template

  • Copiez le code dans le presse papier et collez-le dans le fichier créé précédemment

Plusieurs variables sont à votre disposition dans ce template. Vous pouvez par exemple utiliser $row pour récupérer la valeur des autres champs de la ligne.

Extrait du contenu de $row

  • Il suffit maintenant d’ajouter un peu de code dans votre template :

<?php if ($row->field_field_prix[0]['raw']['value'] > 4) : ?>

<?php print $output; ?>

<?php else :?>

<?php print $output; ?> <br/> <em>Bon marché</em>

<?php endif; ?>

  • Enregistrez le fichier

Modification du champ titre en fonction du champ prix par le thème

information.eps

Cet exemple de modification d’une vue par un thème est visuel, mais il n’est pas conseillé d’ajouter du contenu via un template.

Chapitre

VI

Introduction à la
création de modules

  1. VI - Introduction à la création de modules

Développer un module Drupal peut parfois vous sauver si une fonctionnalité n’existe pas ou si vous souhaitez modifier certains comportement de Drupal. S’attaquer à cette tâche peut d’abord paraître insurmontable mais finalement elle s'avère assez simple.

Le but de ce chapitre est de vous permettre de débuter en douceur la programmation avec Drupal. Il vous présentera toute une palette d’outils qui vous faciliteront votre vie de développeur Drupal.

  1. 1 - Environnement de développement

Pour développer des modules Drupal, un éditeur de texte suffit — Notepad++ pour Windows ou Gedit pour Linux — mais un environnement de développement tel qu’Eclipse, vous simplifiera la vie grâce à la complétion automatique et à des options de débuggage que vous découvrirez par la suite (chap. VI — 3.4. Débugger avec Eclipse)

information.eps

Cette section est donc facultative si vous êtes uniquement intéressé par la programmation Drupal. Le cas échéant, vous pouvez passer directement au chap. VI — 1.2. Architecture d’un module.
  1. Installation et configuration d’Eclipse

Pour développer un module Drupal avec Eclipse, le plus simple est de choisir la distribution PDT (PHP Developement Tools — Outils de développement PHP). Vous pourrez la trouver à l’adresse suivante :
http://www.eclipse.org/pdt/downloads. Cependant, si Eclipse est déjà installé sur votre configuration, il est possible d’installer PDT sous forme de plugins. Ce type d’installation ne sera pas détaillé ici.

  1. Installation sous Windows
  • Rendez-vous à l’adresse http://www.eclipse.org/pdt/downloads
  • Téléchargez le package All-In-One Windows 32-bit (version PDT 2.2.0 utilisée pour ce livre)
  • Extrayez le contenu de l’archive dans un répertoire (c:\Programmes\eclipse pour ce livre)

information.eps

Eclipse est un programme écrit en Java, il faut donc que l’environnement d'exécution Java soit également installé (JRE — http://www.java.com/fr/download/).
  • Exécutez eclipse.exe (c:\Programmes\eclipse\eclipse.exe pour ce livre)
  • Sélectionnez le répertoire de Workspace par défaut et cochez la case Use this as the default and do not ask again

Sélection du Workspace au lancement d’Eclipse

information.eps

Le Workspace est l’espace de travail (un répertoire) ou Eclipse va stocker des données de configuration dans le sous-dossier .metadata. Lorsque vous créez un nouveau projet c’est également ce répertoire qui sera utilisé.

Veillez donc à ne pas choisir un sous-répertoire de c:\wamp car vous n’allez pas créer un nouveau projet mais en créer à partir du répertoire Drupal existant, et il n’est pas possible d’importer un projet inclus dans le répertoire Workspace.

astuce.eps

Il est possible de changer de Workspace à partir d’Eclipse dans le menu File — Switch Workspace.
  • Cliquez sur OK

Vous arrivez alors sur votre espace de travail. Il faut maintenant configurer Eclipse pour Drupal. Rendez-vous au chap. VI — 1.1.3 Configuration d’Eclipse pour Drupal.

  1. Installation sous Ubuntu

Installer Java

Eclipse est un programme écrit en Java, il faut donc tout d’abord que votre installation puisse exécuter un programme Java.

information.eps

Vous pouvez consulter la documentation du site ubuntu-fr pour installer Java d’une autre façon : http://doc.ubuntu-fr.org/java

Il faut tout d’abord ajouter les dépots qui contiennent l’environnement Java

  • Démarre Synaptic
  • Onglet Autre logiciels
  • Sélectionner la ligne Partenaires de Canonical
  • Bouton Fermer
  • Puis, bouton Recharger de la fenêtre principale de Synaptic

Il suffit maintenant d’installer les paquets Java :

sudo apt-get install sun-java6-jre sun-java6-plugin sun-java6-fonts

Installer Eclipse

information.eps

Vous pouvez consulter la documentation du site ubuntu-fr pour installer Eclipse d’une autre façon : http://doc.ubuntu-fr.org/eclipse
  • Rendez-vous à l’adresse http://www.eclipse.org/pdt/downloads
  • Téléchargez le package Linux x86/GTK 2 32-bit ou 64-bit(version PDT 2.2.0 utilisée pour ce livre)
  • Extrayez le contenu de l’archive dans un répertoire (/home/atelier/eclipse)
  • Exécutez le programme /home/atelier/eclipse/eclipse

Eclipse sur Ubuntu

  1. Configuration d’Eclipse pour Drupal

Association de fichiers

Un module Drupal comporte des fichiers contenant du code php, et qui ont des extensions différentes de .php. C’est le cas pour les fichiers *.module, *.install, *.theme et *.engine. Il faut donc configurer Eclipse pour qu’il traite ces fichiers comme des fichiers php classiques.

  • Dans Eclipse, cliquez sur Window — Preferences
  • Dans la liste de gauche sélectionnez la ligne General — Content Types
  • Dans la zone Content types, sélectionnez la ligne Text — PHP Content Type

La fenêtre des préférences, section Types de contenus.

  • Bouton Add...
  • Ajoutez *.module dans la zone de texte
  • Faites de même pour les extensions *.install, *.theme et *.engine

Les 4 nouvelles extensions devraient maintenant apparaître dans la zone File associations

  • Validez la fenêtre des préférences en cliquant sur OK

Indentation

Par convention, tous les fichiers de Drupal doivent être indentés par 2 espaces. Eclipse indente par défaut d’une tabulation de 4 blancs, mais il est possible de modifier ce comportement.

  • Dans Eclipse, cliquez Window — Preferences
  • Dans la liste de gauche sélectionnez la ligne General — Editors — Text Editors
  • À la ligne Displayed tab width, indiquez 2
  • Cochez la case Insert spaces for tabs

Réglage de l’indentation dans Eclipse.

astuce.eps

Les préférences permettent de régler un nombre important de paramètres dans Eclipse. La zone de texte située en haut à gauche de la fenêtre permet de faire une recherche parmi toutes les préférences. Par exemple, sur la copie d’écran précédente, seul les items contenant le mot tab ont été sélectionnés.
  • Bouton OK
  • Puis menu File — Restart pour que les préférences modifiées soient prisent en compte

Création d’un projet à partir d’un dossier Drupal

Un projet sous Eclipse PDT comporte l’ensemble des fichiers du site web. Pour une installation Drupal, c’est donc le répertoire racine de votre site qu’il va falloir importer dans le projet.

  • Menu File — New — PHP Project
  • Donnez un nom à votre projet dans la zone Project name (drupal pour ce livre)
  • Sélectionnez l’option Create project at existing location (from existing source) et pointez vers votre répertoire d’installation Drupal (c:\wamp\www\drupal)

Création d’un nouveau projet à partir d’un répertoire existant

  • Bouton Finish
  • Fermez la fenêtre Welcome

Vous pouvez maintenant vérifier que les fichiers *.module s’ouvrent bien avec l’éditeur php et qu’ils sont bien colorisés.

Le fichier modules/block/block.module édité avec Eclipse.

Eclipse est maintenant prêt à être utilisé pour développer un nouveau module Drupal !

astuce.eps

Vous en apprendrez plus sur Eclipse au chap. VI — 3.4. Débugger avec Eclipse.
  1. Architecture d’un module

Dans ce chapitre, vous créerez votre premier module qui affichera un bloc contenant le fameux message 'Hello World !'. Il est bien sûr possible de créer un bloc de façon plus simple via la page de gestion des blocs, mais cela vous permettra de comprendre quelques éléments essentiels de la programmation Drupal.

  1. Le répertoire du module et le fichier .info

Comme pour les thèmes, chaque module possède son propre répertoire.

  • Le module s’appellera Hello, il faut donc créer le répertoire sites/all/modules/hello

astuce.eps

Il est possible de créer un répertoire ou des fichiers directement depuis l'arborescence d'Eclipse : clic droit à l’endroit ou vous voulez créer le répertoire puis New — Folder.

Comme pour les thèmes, les informations générales des modules sont inscrites dans un fichier .info.

  • Créez le fichier hello.info dans votre répertoire hello
  • Copiez-y le code suivant :

; $Id:

name = Hello

description = Hello from Atelier Drupal.

core = 7.x

version = 7.x-0.x-dev

package = Atelier Drupal

files[] = hello.module

  • Créez un fichier hello.module vide dans le répertoire du module

Ce fichier doit exister pour que Drupal affiche les informations relatives aux modules.

  • Rendez-vous sur la page d’activation : menu Modules

Le fichier .info interprété par Drupal

Le module hello apparaît dans la liste à une nouvelle section ATELIER DRUPAL.

Voici une description de chaque ligne du fichier .info.

; $Id:

Ligne utilisée par le CVS de Drupal pour la gestion des version du fichier.

name

Nom du module, affiché dans la colonne NOM.

description

Description du module, affichée dans la colonne DESCRIPTION.

core

Indique avec quelle version de Drupal le module est compatible, ici, toutes les versions 7.

version

Version du module, affichée dans la colonne VERSION.

package

Section dans laquelle le module sera affiché.

files[]

Liste des fichiers du module.
  1. Les hooks

Vous êtes maintenant prêt à écrire le code php de votre module.

Ce module hello devra afficher un bloc « Hello World ! ».

L’objectif du module hello

Les blocs sont gérés par le module Block de Drupal, ce module propose entre autre une page de configuration des blocs (menu Structure — lien Blocs) qui permet de choisir la région dans laquelle le bloc sera affiché et se charge ensuite d’afficher les blocs dans chaque région.

Pour le module Hello, il s'agit de dire au module Block : « Je propose un nouveau bloc » qui a pour nom Hello World, pour titre « My first module say » et pour contenu « Hello World !!! ».

Pour que les modules puissent se « parler », Drupal utilise un système de hooks. Les modules peuvent proposer des services (hooks) que les autres peuvent utiliser.

Par exemple, Block propose hook_block_info qui réunira les informations sur les blocs de tous les modules afin de construire sa page (menu Structure — lien Blocs). C’est la première hook que vous allez utiliser :

  • Dans le fichier hello.module, insérez le texte suivant :

<?php

function hello_block_info() {

$block['hello-block'] = array(

'info' => 'Hello world !',

);

return $block;

}

Voyez maintenant le résultat de ce code :

  • Activez le module Hello
  • Menu Structure — lien Blocs

La hook hook_block_info a pris en compte notre module

Voici maintenant l’explication du code :

<?php

Indique que le script contient du code php. Remarquez qu'il n'y a pas de balise fermante à la fin du script (?>) c'est une règle de Drupal.

function hello_block_info()

Pour implémenter une hook, il faut créer une fonction ayant pour nom <nom_du_module>_<nom_de_la_hook>. Cette fonction du module hello implémente donc hook_block_info.

$block['hello-block'] = array(

Cette hook attend en valeur de retour un tableau associatif contenant la liste des blocs du module.

'info' => 'Hello world !'

L'élément info du tableau associatif indique la description du bloc telle qu'elle sera affichée sur la page menu Structure — lien Blocs.

return $block;

La fonction retourne le tableau $block

En résumé, lorsque la page menu Structure — lien Blocs est affichée, le module Block démarre sa hook hook_block_info. Drupal cherche alors dans les modules activés si ils comportent une fonction portant le nom <nom_du_module>_block_info. Si c’est le cas, il retourne au module Block les tableaux associatifs qui décrivent les blocs des modules.

  1. Rechercher de la documentation sur http://api.drupal.org

Vous avez appris grâce à ce livre comment hook_block_info fonctionnait : le nom de la hook, le type de valeur à retourner, les éléments du tableau associatif à retourner, etc. Mais comment faire pour savoir quelles autres hooks existent et comment elles s’utilisent ? La réponse est sur http://api.drupal.org.

  • Rendez-vous sur le site http://api.drupal.org.
  • Dans la zone de recherche entrez hook_block

La liste des hooks du module block sur http://api.drupal.org

Dans la liste qui apparaît, vous pouvez retrouver hook_block_info, mais également hook_block_view qui permet d’afficher les blocs et hook_block_configure, qui permet de personnaliser la page de configuration d’un bloc, etc.

  • Cliquez maintenant sur la ligne hook_block_info

La documentation de hook_block_info

Sur cette page vous pouvez retrouver une description de la hook :

  • un lien vers la documentation du module block (block.api.php) est proposé ;
  • une explication du fonctionnement de la hook est proposée.

Plus bas, une section Return Value est importante, elle indique que :

  • la hook attend en retour un tableau associatif (Return value : An associative array) dont chaque élément est un bloc et les clés attendues (key-value pairs) ;
  • une seule clé est obligatoire (required), c’est la clé info ;
  • d’autres sont optionnelles : cache permet de gérer la façon dont le bloc sera mis en cache. weight, statuts, region, visibility, pages permettent de régler les valeurs par défaut de votre bloc.
  1. hook_block_view : afficher des blocs

Il s’agit maintenant de définir le titre du bloc (My first module says), son contenu (Hello World !), et de demander au module block de l’afficher. Pour cela, il faut utiliser hook_block_view.

La documentation de hook_block_view

La page de documentation indique que :

  • cette hook prend un paramètre $delta qui permet d’identifier le block qui s’affiche. En effet, un module peut proposer d’afficher plusieurs blocs ;
  • la valeur de retour attendue est un tableau associatif ;
  • ce tableau associatif devra comporter deux éléments qui ont pour clés 'subject' et 'content'.
  • Voici donc le code à ajouter au fichier hello.module pour implémenter hook_block_view

function hello_block_view($delta = '') {

$block = array(

'subject' => 'My First module say :',

'content' => 'Hello World !!!'

);

return $block;

}

astuce.eps

La déclaration de fonction doit être identique à celle trouvée sur api.drupal.org. Ne vous privez donc pas d'un copier/coller depuis ce site et n'oubliez pas ensuite de changer le mot hook_ par le nom de votre module (ici hello_block_view).
  • Allez sur la page menu Strucure — lien Blocs et mettez ce bloc en Sidebar First sous Bartik.

Vous devriez maintenant voir apparaître le bloc !

  1. Conventions et finitions

Votre module s’affiche, certes, mais il comporte encore quelques défauts pour devenir un module Drupal accepté par la communauté !

Commentaires

La première raison pour laquelle un module Drupal doit être correctement commenté est qu’il est plus facile à reprendre et à maintenir. La seconde est que Drupal utilise ces commentaires de façon mécanique pour générer sa documentation. Les deux pages que vous avez visité sur api.drupal.org proviennent directement du code source de Drupal ! Cette prouesse est réalisée grâce au logiciel Doxygen (http://www.doxygen.org).

Voici le fichier hello.module correctement commenté :

<?php

/**

* @file

* Display a Hello World block

*/

/**

* Implementation of hook_block_info()

*/

function hello_block_info() {

$block['hello-block'] = array(

'info' => 'Hello world !',

);

return $block;

}

/**

* Implementation of hook_block_view()

*/

function hello_block_view($delta = '') {

$block = array(

'subject' => 'First module say :',

'content' => 'Hello World !!!'

);

return $block;

}

Un fichier de code source doit débuter avec un commentaire @file qui décrit la fonction principale du fichier.

Chaque fonction doit être décrite avec ses paramètres. Si cette fonction implémente une hook, indiquez juste son nom.

information.eps

Pour en savoir plus sur la génération automatique de documentation par Doxygen, rendez-vous à la page http://drupal.org/node/1354.

fonction t()

Comme vous avez pu le voir au chap. IV — 2. Site multilingue, chaque chaîne de l’interface d’un module peut être traduite via différents modules. Cela sera possible pour vos propres modules si vous utilisez la fonction t() (pour Translate) autour de chaque chaîne de caractère de votre module :

$block['hello-block'] = array(

'info' => t('Hello world !'),

);

$block = array (

'subject' => t('First module say :'),

'content' => t('Hello World !!!')

);

information.eps

Pour certains champs, il ne faut pas utiliser la fonction t() car elle est automatiquement appelée.

hook_help

Tout module doit implémenter cette hook qui permet d’utiliser le module Help.

/**

* Implementation of hook_help()

*/

function hello_help($path, $arg) {

switch ($path) {

case 'admin/help#hello':

return '<p>' . t('Sample module from Atelier Drupal book. This module just provide a hello world block.') . '</p>';

}

}

Cette hook prend en argument le chemin d’accès à la page d’aide. Le chemin ici est admin/help (page d’aide de Drupal) section hello :

Le module hello a été ajouté aux pages d’aide

astuce.eps

Si ce lien n’apparaît pas, effacez tous les caches.

Le lien est également ajouté à la page des modules

Page d’aide du module Hello

astuce.eps

Utilisez le module chap. VI — 3.2. Le module Coder pour voir si votre module respecte les conventions de codage.

Le module Hello que vous avez développé tout au long de cette section vous a permis de découvrir comment débuter avec la programmation Drupal. Mais il ne faisait rien à proprement parler. C’est pourquoi dans la prochaine section, vous allez développererez votre premier vrai module Drupal grâce à l’environnement que vous avez mis en place.

  1. 2 - Votre premier module Drupal

Tout au long de cette section, vous créerez un module qui permet de produire un résumé de votre installation Drupal.

À la fin de cette section, ce module aura une page à l’url /summary, qui affichera la liste des modules activés, les vocabulaires de taxonomy, et les types de contenus.

La page du module Summary

Une page de configuration du module permettra de sélectionner les sections à afficher et de modifier les titres de celles-ci.

La page de configuration du module

Il y a donc du travail !

  1. La page Summary
    1. Démarrage

Comme pour le module Hello, il faut créer :

  • Un répertoire pour le module sites/default/modules/summary (ou sites/all/modules/summary)
  • Un fichier summary.info

; $Id:

name = Summary

description = Display a Summary of your Drupal Installation.

core = 7.x

package = Atelier Drupal

files[] = summary.module

  • Et enfin un fichier summary.module avec un commentaire descriptif et une page d’aide :

<?php

/*

* @file

* Display a Summary of your Drupal Installation.

*/

/**

* Implementation of hook_help()

*/

function summary_help($path, $arg) {

switch ($path) {

case 'admin/help#summary':

return '<p>' . t('Sample module from Atelier Drupal book. This module provide a summary page of your Drupal Installation.') . '</p>';

}

}

  1. hook_menu() : créez une page associée à une Url

Il s’agit de créer une nouvelle page dont le chemin sera /summary et le titre Summary of your site. Pour cela il faut utiliser la hook hook_menu().

La longue page de documentation de la hook indique que la valeur de retour doit être un tableau associatif dont chaque élément est un menu car il est bien sûr possible d’avoir plusieurs pages pour un module. La clé de chaque élément doit décrire son chemin.

information.eps

La hook_menu() ne défini donc pas un item de menu mais associe une page avec une Url.

Pour chaque menu, un tableau associatif doit être décrit. Ici, vous utiliserez les clés 'title', 'access arguments', 'type' et 'page callback'.

  • Ajoutez ce code au fichier summary.module :

/*

* Implementation of hook_menu()

*/

function summary_menu() {

$items['summary'] = array(

'title' => 'Summary of your site',

'access arguments' => array(true),

'type' => MENU_CALLBACK,

'page callback' => 'summary_content',

);

return $items;

}

/*

* Content of the summary page

*/

function summary_content() {

return 'Hello World !!!';

}

Voici une description des clés utilisées pour cet exemple :

'title'

Titre de la page . La fonction t() est automatiquement appelée.

'access arguments'

Permet de définir les droits d'accès. Ici, tout le monde a le droit d'accéder à cette page.

'type'

Type de page et de menu, permet d'indiquer si le menu doit être affiché dans le bloc d'admin, dans le fil d'arianne, si c'est une sous-page, etc.

'page callback'

Nom de la fonction qui sera appelée pour retourner le contenu.

information.eps

En php, une fonction peut prendre en argument le nom d'une autre fonction et demander son exécution par la suite. Elle est alors appelée fonction callback.
  • Activez le module Summary
  • Pointez votre navigateur vers l’Url /summary

La page /summarty

Il reste maintenant à générer le contenu de cette page.

  1. Liste des modules activés

La première section du module doit afficher la liste des modules. Après recherche sur http://api.drupal.org, la fonction module_list() semble être créée pour cela. Testez la fonction dans le bloc Execute PHP de Devel.

Puce module.eps

Chap. VI — 3.1 Devel : simplifiez votre vie de développeur.

Test de module_list() avec le module Devel

Résultat de la fonction module_list()

La fonction module_list() retourne donc un tableau (Array) contenant la liste des modules activés. Il suffit donc de modifier la fonction summary_content et de traiter le tableau.

function summary_content(){

//List of all activated modules

$summary_module_list = module_list();

$summary_module_list = t('<h3>List of all activated modules</h3>') . implode($summary_module_list,', ');

$output = $summary_module_list;

return $output;

}

Le module en action

  1. Liste des vocabulaires de taxonomy

De la même façon que pour les modules, le site http://api.drupal.org informe que la fonction
taxonomy_get_vocabularies() existe.

dpm(taxonomy_get_vocabularies());

taxonomy_get_vocabularies retourne donc un tableau d’objets (stdClass). Chacun de ces objets décrit un vocabulaire. Le nom du vocabulaire est dans la propriété name des objets. Il faut donc parcourir chaque élément du tableau et récupérer le nom du vocabulaire :

  • Ajoutez ce code à la fonction summary_content :

// List of vocabularies

$summary_vocabularies = taxonomy_get_vocabularies();

$summary_vocabularies_list='';

foreach ($summary_vocabularies as $vocab){

$summary_vocabularies_list .= $vocab->name . ',';

}

$summary_vocabularies_list = t('<h3>Vocabularies</h3>') . $summary_vocabularies_list;

$output .= $summary_vocabularies_list;

return $output;

  1. Exercice : liste des types de nodes
  • Ajoutez le code nécessaire à la fonction summary_content() pour lister les types de nodes existants.

La section Node types

Corrigé

dpm(node_type_get_types());

La fonction node_type_get_types retourne un tableau d’objets (stdClass).

//List of node types

$summary_node_types = node_type_get_types();

$summary_node_types_list = array();

foreach ($summary_node_types as $node_type) {

$summary_node_types_list[] = $node_type->name;

}

$summary_node_types_list = t('<h3>Node types</h3>').implode($summary_node_types_list, ', ');

$output .= $summary_node_types_list;

  1. La page de configuration du module
    1. hook_menu() : ajout d’une deuxième page pour le module

La page de configuration du module summary sera accessible à partir de l’Url
admin/config/system/summary. Il faut donc ajouter un élément au tableau de la hook_menu.

function summary_menu(){

$items['summary'] = array(

'title' => t('Summary of your site'),

'page callback' => 'summary_content',

'access arguments' => array(true),

'type' => MENU_CALLBACK,

);

$items['admin/config/system/summary'] = array(

'title' => t('Summary settings'),

'description' => t('Summary configuration page'),

'page callback' => 'drupal_get_form',

'page arguments' => array('summary_admin_settings'),

'access arguments' => array('administer site configuration'),

'type' => MENU_NORMAL_ITEM,

);

return $items;

}

astuce.eps

L’url de la page (admin/config/system/summary) permet d’ajouter un lien dans la page de configuration (config) à la section système (system).

Le lien Menu item du bloc Devel permet de connaître les informations des différentes pages.

Cette page de configuration sera en fait un formulaire HTML. Pour composer un formulaire, Drupal propose une API bien particulière qui sera décrite plus tard.

'page_callback'

Ici, on appelle une fonction drupal (drupal_get_form) qui construira le formulaire.

'page arguments'

Liste des arguments à passer à la fonction callback.

'access argument'

Vérifie que l'utilisateur a les droits d'administration du site avant d'afficher la page.

'type'

Nom de la fonction qui sera appelée pour retourner le contenu.

Le but est de créer un formulaire, Drupal propose pour cela la fonction drupal_get_form. Cette fonction prend en argument le nom d’une autre fonction qui décrit les éléments qui composeront le formulaire.

La fonction qui décrira le formulaire s’appellera summary_admin_settings, donc hook_menu appelera
drupal_get_form(summary_admin_settings) lorsque la page devra s’afficher.

  1. Form API : créer des formulaires HTML dans Drupal

La page d’administration proposera une case à cocher pour chaque section de summary permettant à l’administrateur de choisir si la section doit s’afficher ou non.

  • Ajoutez le code suivant au fichier summary.module :

/*

* Define the adminsitration form

*/

function summary_admin_settings(){

$form['summary_display'] = array(

'#type' => 'checkboxes',

'#title' => t('Sections of the summary'),

'#description' => t('Check the sections to show in the summary page'),

'#options' => array('module' => t('Module list'), 'vocabulary' => t('Vocabulary list'), 'content_type' => t('Content types')),

);

return $form;

}

Un tableau $form est donc créé, chaque élément de ce tableau est un élément du formulaire et peut se paramétrer grâce à des propriétés. Voici la liste des propriétés utilisées :

'#type'

Type de widget à utiliser. Ici des cases à cocher.

'#title'

Titre à afficher au dessus du widget.

'#description'

Texte d'aide en dessous du widget.

'#options'

Propriété propre aux cases à cocher, tableau listant les cases à cocher à afficher et leurs étiquettes.

astuce.eps

Une description de tous les éléments pouvant être insérés dans un formulaire est disponible à la page : http://api.drupal.org/api/drupal/developer--topics--forms_api_reference.html

Le lien Hook_elements() du bloc Devel affiche la liste des éléments disponibles.
  • Menu Configuration — lien Summary settings

Les premiers éléments du formulaire

  1. system_settings_form : ajouter le bouton de sauvegarde

Il manque le bouton de sauvegardes à votre formulaire. Il serait possible d’en créer un en ajoutant un nouvel élément de #type submit au tableau $form, mais il est préférable d’utiliser la fonction system_settings_form qui ajoute les boutons nécessaires par défaut des formulaires de configuration.

  • Modifiez la dernière ligne de la fonction summary_admin_settings comme cela :

return system_settings_form($form);

Le bouton ajouté par system_settings_form

Le bouton est bien là, mais les paramètres ne sont pas encore enregistrés.

  1. variable_get : sauvegarder des données dans la table variable

Voici comment modifier le code pour que les valeurs soient sauvegardées :

function summary_admin_settings(){

$form['summary_display'] = array(

'#type' => 'checkboxes',

'#title' => t('Things to show for the summary'),

'#description' => t('Check the things to show in the summary page'),

'#options' => array('module' => t('Module list'), 'vocabulary' => t('Vocabulary list'), 'content_type' => t('Content types')),

'#default_value' => variable_get('summary_display',array('module', 'vocabulary')),

);

return system_settings_form($form);

}

La fonction variable_get permet de récupérer des variables enregistrés dans le tableau de variables globales $conf, lui même stocké dans la table variables de la base de données de Drupal.

Elle prend deux paramètres, le premier, obligatoire, est le nom de la variable à récupérer, le second, optionnel, est la valeur que retourne variable_get si aucune variable n’est trouvée dans $conf.

Ici, on initialise donc le formulaire avec des valeurs par défaut qui seront, soit prises dans le tableau $conf si elles sont présentes, soit prises dans le second paramètre qui indique que les cases module et vocabulary sont cochées par défaut.

astuce.eps

Pour afficher ce que contient $conf, vous pouvez exécuter le code suivant dans le bloc Execute PHP du module Devel :

global $conf;

dpm($conf);

Dernière question ; comment sont sauvegardées ces valeurs ? Et bien c’est la fonction system_settings_form qui s’occupe de tout !

information.eps

Pour que la fonction system_settings_form sauvegarde automatiquement les paramètres, il faut veiller à ce que le nom de l'élément de formulaire — $form['summary_display'] — soit identique à celui du premier paramètre de variable_get — variable_get('summary_display').
  1. Exercice : personnalisation des titres des sections
  • Ajoutez des éléments textfield permettant à l’utilisateur de modifier les titres des sections ;

Modification des titres de sections

  • ajoutez des éléments fieldset pour les cases à cocher et un autre pour les labels.

Ajout de fieldset

Corrigé

Ajoutez des éléments textfield permettant à l’utilisateur de modifier les titres des sections

$form['summary_module_label'] = array(

'#type' => 'textfield',

'#title' => t('Label of the module section'),

'#description' => t('Change the label of the module section'),

'#default_value' => variable_get('summary_module_label','Activated modules'),

);

$form['summary_taxonomy_label'] = array(

'#type' => 'textfield',

'#title' => t('Label of the taxonomy section'),

'#description' => t('Change the label of the taxonomy section'),

'#default_value' => variable_get('summary_taxonomy_label','Taxonomy vocabularies'),

);

$form['summary_content_types'] = array(

'#type' => 'textfield',

'#title' => t('Label of the content types section'),

'#description' => t('Change the label of the content types section'),

'#default_value' => variable_get('summary_content_types','Content types'),

);

Ajoutez des éléments fieldset pour les cases à cocher et un auter pour les labels

/*

* Define the adminsitration form

*/

function summary_admin_settings(){

$form['checkbox_visible'] = array(

'#type' => 'fieldset',

'#title' => t('Section visibility'),

'#description' => t('Things to show for the summary'),

'#collapsible' => TRUE,

'#collapsed' => TRUE,

);

$form['checkbox_visible']['summary_display'] = array(

'#type' => 'checkboxes',

'#title' => t('Things to show for the summary'),

'#description' => t('Check the things to show in the summary page'),

'#options' => array('module' => t('Module list'), 'vocabulary' => t('Vocabulary list'), 'content_type' => t('Content types')),

'#default_value' => variable_get('summary_display',array('module', 'vocabulary')),

);

$form['labels'] = array(

'#type' => 'fieldset',

'#title' => t('Labels of sections'),

'#description' => t('Change the labels of the summary'),

'#collapsible' => TRUE,

'#collapsed' => TRUE,

);

$form['labels']['summary_module_label'] = array(

'#type' => 'textfield',

'#title' => t('Label of the module section'),

'#description' => t('Change the label of the module section'),

'#default_value' => variable_get('summary_module_label','Activated modules'),

);

$form['labels']['summary_taxonomy_label'] = array(

'#type' => 'textfield',

'#title' => t('Label of the taxonomy section'),

'#description' => t('Change the label of the taxonomy section'),

'#default_value' => variable_get('summary_taxonomy_label','Taxonomy vocabularies'),

);

$form['labels']['summary_content_types'] = array(

'#type' => 'textfield',

'#title' => t('Label of the content types section'),

'#description' => t('Change the label of the content types section'),

'#default_value' => variable_get('summary_content_types','Content types'),

);

return system_settings_form($form);

}

  1. Utilisation des paramètres pour la page Summary

Il faut maintenant récupérer les paramètres sauvegardés dans la table variables par la page de configuration.

Les valeurs des cases à cocher sont stockées à la ligne summary_display de la table variables. La fonction variable_get() permet de récupérer ces valeurs :

  • À la page de configuration du module Summary, cochez uniquement la section Vocabulary list
  • Bouton Enregistrer la configuration

dpm(variable_get(‘summary_display’,array()));

astuce.eps

Le lien Variable editor du bloc Devel affiche les valeurs des lignes de la table variables.

summary_display est retournée sous forme de tableau associatif. Si la section n’est pas à afficher, sa valeur est à 0 (false), sinon, sa valeur est le nom de la clé (true).

Il suffit donc de tester cette valeur avant d’ajouter chaque section.

  • Modifiez la fonction summary_content comme cela :

function summary_content() {

//List of all activated modules

$summary_module_list = module_list();

$summary_module_list = t('<h3>Activated modules</h3>') . implode($summary_module_list,', ');

// List of vocabularies

$summary_vocabularies = taxonomy_get_vocabularies();

$summary_vocabularies_list='';

foreach ($summary_vocabularies as $vocab){

$summary_vocabularies_list .= $vocab->name . ',';

}

$summary_vocabularies_list = t('<h3>Vocabularies</h3>') . $summary_vocabularies_list;

// List of content types

$summary_node_types = node_type_get_types();

$summary_node_types_list ='';

foreach ($summary_node_types as $node_types){

$summary_node_types_list .= $node_types->name . ',';

}

$summary_node_types_list = t('<h3>Node type</h3>') . $summary_node_types_list;

$display = variable_get('summary_display',array());

$output = '';

if ($display['module']) { $output .= $summary_module_list; }

if ($display['vocabulary']) { $output .= $summary_vocabularies_list; }

if ($display['content_type']) { $output .= $summary_node_types_list; }

return $output;

}

  1. Exercice : affichage des labels personnalisés

Modifiez la fonction summary_content pour qu’elle affiche les labels de la page de configuration du module.

Modification des labels

Page Summary avec labels personnalisés

Corrigé

Les valeurs des labels sont stockées dans les lignes summary_module_label, summary_taxonomy_label et summary_content_types de la table variables. La fonction variable_get() permet de récupérer ces valeurs.

dpm(variable_get(‘summary_taxonomy_label’,’’));

summary_taxonomy_label est donc retournée sous forme de chaine de caractère correspondant à la valeur du label. Si rien n’est retourné, il faut préciser une valeur par défaut dans la fonction variable_get.

Voici donc la ligne modifiée pour la section liste des vocabulaires :

$summary_vocabularies_list = t('<h3>Vocabularies</h3>') . $summary_vocabularies_list;

Modifiée en :

$summary_vocabularies_list = '<h3>' . variable_get('summary_taxonomy_label' ,t('Vocabularies')) . '</h3>' . $summary_vocabularies_list;

Répétez l’opération pour les autres sections.

  1. Exécuter des requêtes SQL dans un module en récupérer le résultat

Il existe un grand nombre de fonctions dans l’API Drupal, et qui interrogent la base de données à votre place. Mais il est parfois nécessaire de faire ses propres requêtes.

  1. Requêtes simple retournant une seul ligne

Vous allez commencer par afficher le nombre de nodes publiées dans Drupal. La requête SQL est :

SELECT count(*)

FROM node

WHERE status = 1

Puce module.eps

Chap. III — 4 La Base de données de Drupal

La requête ne retourne qu’une seule valeur : le nombre de nodes.

Vous allez maintenant modifier le fichier summary.module pour qu’il affiche une nouvelle section Number of nodes.

Modifiez la fin de la fonction summary_content() ainsi :

//Number of nodes

$query = 'SELECT count(*) FROM node WHERE status = 1';

$summary_node_count = db_query($query)->fetchField();

$summary_node_count = t('<h3>Number of nodes</h3>') . $summary_node_count;

$display = variable_get('summary_display',array());

$output = '';

if ($display['module'])

$output .= $summary_module_list ;

if ($display['vocabulary'])

$output .= $summary_vocabularies_list;

if (array_key_exists('content_type',$display) && $display['content_type'])

$output .= $summary_node_types_list;

$output .= $summary_node_count;

return $output;

La nouvelle section de summary

La fonction : db_query prend en paramètre la requête SQL et retourne un objet. Une méthode de cet objet est fetchField qui retourne le résultat de la requête.

Noms de tables

La requête précédente retourne le résultat escompté, et pourtant elle pose un problème. Il est en effet possible de préfixer les tables avec une chaîne de caractère à l’installation de Drupal. Ainsi, la table node n’aura peut-être pas pour nom node mais drupal_node (si les tables sont préfixées drupal_). Pour que Drupal gère cela il faut entourer le nom des tables par des accolades.

La requête devient donc :

$query = 'SELECT count(*) FROM {node} WHERE status = 1';

  1. Requêtes avec résultat sur plusieurs lignes

Pour modifier votre nouveau paragraphe pour qu’il affiche le nombre de nodes par type, la requête SQL devient :

SELECT type, count(*) AS "Nombre nodes"

FROM node

GROUP BY type

Dans le module summary, la requête devient donc :

//Number of nodes per type

$query = 'SELECT type, count(*) FROM {node} GROUP BY type';

L’objet retourné par db_query (de type DatabaseStatementBase) permet d’exécuter plusieurs méthodes :

rowCount

Retourne le nombre de lignes du résultat de la requête

db_query($query)->rowCount()

fecthAssoc

Retourne une ligne du résultat de la requête sous forme de tableau (nom colonne — valeur). Au prochain appel de la fonction, la ligne suivante est retournée :

db_query($query)->fetchAssoc()

fetchAllKeyed

Retourne l'ensemble des résultats sous forme de tableau. La clé des éléments est la première colonne de la requête.

db_query($query)->fetchAllKeyed()

fetchAllAssoc

Retourne l'ensemble des résultats sous forme de tableau. La colonne devant servir de clé est passée en paramètre.

db_query($query)->fetchAllAssoc(‘type’)

getQueryString

Retourne la requête SQL de l’objet.

dpm(db_query($query)->getQueryString());

fetchCol

Retourne tous les élements d'une colonne. Le numéro de la colonne est passé en paramètre.

db_query($query)->fetchCol(0)

fetchField

Retourne la première colonne de la première ligne.

db_query($query)->fetchField()

Il y a donc plusieurs solutions possibles pour arriver au même résultat :

  • Exemple de traitement des résultats en utilisant la méthode fetchAllAssoc() :

//Number of nodes per type

$query = 'SELECT type, count(*) AS count FROM {node} GROUP BY type';

$result = db_query($query)->fetchAllAssoc('type');

$summary_node_count_type = '';

foreach($result as $row) {

$summary_node_count_type .= $row->type.' : '.$row->count.'<br/>';

}

$summary_node_count = t('<h3>Number of nodes per type</h3>').$summary_node_count_type ;

  • Exemple de traitement des résultats en utilisant la méthode fetchAssoc() :

$query = 'SELECT type, count(*) AS count FROM {node} GROUP BY type';

//Avec la méthode fetchAssoc

$result = db_query($query);

$summary_node_count_type = '';

while ($row = $result->fetchAssoc()) {

$summary_node_count_type .= $row['type'].' : '.$row['count'].'<br/>';

}

$summary_node_count = t('<h3>Number of nodes per type</h3>').$summary_node_count_type ;

La section nombre de nodes par type

  1. Requêtes avec variables

Vous aurez parfois besoin de positionner des variables dans vos requêtes.

Voici par exemple une requête qui sélectionne le titre des nodes publiées de type article :

$query = 'SELECT title FROM {node} WHERE type="article" AND status=1';

$result = db_query($query);

Imaginez maintenant que vous ayez deux variables $type et $status contenant respectivement le type et le statut des nodes à afficher, la requête devient alors :

$query = 'SELECT title FROM {node} WHERE type = :type AND status = :status';

$result = db_query($query, array( ':type' => $type, ':status' => $status));

Il faut donc utiliser des jokers (:type, :status), leurs valeurs sont ensuite remplacées lors de l’exécution de la fonction db_query. Celle-ci prend un tableau en deuxième argument qui contient la liste des valeurs et des jokers.

  1. Requêtes avec le constructeur de requêtes

La requête précédente est une requête simple mais le système des jokers peut vite devenir confus si votre requête comporte un grand nombre de paramètres. Drupal propose alors tout un système de construction de requêtes via PHP.

Voici par exemple ce que deviendrait la requête précédente :

$query = db_select(node, n);

$query

->fields('n', array('title'))

->condition('type', $type)

->condition('status', $status);

$result = $query->execute();

L’idée est donc de commencer par créer un objet de type SelectQuery en appelant la fonction db_select et ensuite de le modifier en lui ajoutant des directives SQL. Lorsque celle-ci est construite, il faut lancer la méthode execute() pour récupérer le résultat de la requête.

La fonction db_select prend en premier argument le nom de la table à utiliser (node) et en deuxième argument un alias (n). C’est cet alias qui sera utilisé dans les autres directives SQL (fields('n', array('title')).

Cette méthode permet de construire une requête tout au long d’un script PHP sans avoir à manipuler de longues chaînes de caractères pour former une requête SQL valide.

information.eps

SelectQuery possède quelques dizaines de méthodes correspondant à des directives SQL. Vous pouvez retrouver la liste des ces méthodes sur la page SelectQuery du site http://api.drupal.org.

Extrait de la page de documentation de SelectQuery

information.eps

Vous pouvez utiliser les méthodes DeleteQuery, InsertQuery et UpdateQuery pour des requêtes SQL delete, insert et update.
  1. Theming du contenu

Dans le module Summary, vous avez inséré quelques balises HTML directement dans le code PHP (balise H3 pour les titres). Dans cette section, vous permettrez aux créateurs de thèmes de modifier l’apparence du contenu de votre module.

Puce module.eps

Pour bien comprendre cette section, lisez le chap. V. Les thèmes Drupal dans son ensemble.
  1. Affichage du nombre de nodes sous forme de tableau

Il serait plus lisible d’afficher le nombre de nodes par type de contenu sous forme de tableau :

Affichage d’un tableau avec Bartik

Pour cela, il faut utiliser la fonction de theme Drupal theme_table. Vous pouvez rechercher comment elle s’utilise sur api.drupal.org.

Les fonctions de thème sur api.drupal.org

astuce.eps

Vous pouvez retrouver la liste des fonctions de thème à la page

http://api.drupal.org/api/group/themeable/7.

Lorsqu’elles sont utilisées à l’intérieur de Drupal, il faut appeler les fonctions de thème par la fonction theme() de cette façon :

  • theme_table($variables) devient theme(‘table’, $variables) ;
  • theme_date($variables) devient theme(‘date’, $variables) ;
  • etc.

La fonction theme_table prend en paramètre un tableau qui contient lui-même deux tableaux. Le premier doit contenir les en-têtes (header), le second les lignes (rows).

Voici comment implémenter cette fonction pour le nombre de nodes par type :

$result = db_query($query);

$header = array (t('Node type'), '#');

while ($row = $result->fetchAssoc()) {

$rows[] = $row;

}

$table = theme('table', array ('header' => $header, 'rows' => $rows));

$summary_node_count_type = t('<h3>Number of nodes per type</h3>').$table;

Contenu des deux tableaux $header et $rows passés en paramètre

  1. Implémentation de hook_theme

Vous allez maintenant créer votre propre fonction de thème que d’autres développeurs et créateurs de thèmes pourront utiliser.

Cette fonction permettra de présenter un paragraphe du module summary :

La fonction de thème theme_summary_paragraph()

Pour cela, votre module doit implémenter la hook hook_theme() qui prend en paramètre la liste des fonctions de thème du module.

Il faut préciser les paramètres qu’aura chaque fonction. Ici, vous avez besoin du titre de la section et de son contenu.

/**

* Implementation of hook_theme

*/

function summary_theme () {

$functions = array(

'summary_paragraph' => array (

'variables' => array('title' => NULL, 'content' => NULL)

)

);

return $functions;

}

astuce.eps

Vous pouvez consulter la liste de fonctions de thème disponible sur votre installation en utilisant le lien Theme registry du bloc Devel.

  • Videz les caches
  • Lien Theme registry du bloc devel (devel/theme/registry)

La fonction de thème de summary est enregistrée
  1. Création d’une fonction par défaut pour le module

Il faut maintenant fournir une fonction par défaut dans le module au cas où le thème actif ne surcharge pas la fonction de thème.

Cette fonction affiche uniquement le titre dans une balise <h4> et le contenu dans une balise <p>

/**

* Fonction de thème par défaut

*/

function theme_summary_paragraph($variables) {

$output = '<h4>'.$variable['title'].'</h4>';

$output .= '<p>'.$variable['content'].'</p>';

return $output;

}

  1. Appel de la fonction de thème dans le module

Vous utiliserez votre fonction dans le module pour présenter vos paragraphes. Il suffit de passer en paramètre les deux chaînes composants le titre et le contenu dans un tableau associatif :

$title = variable_get('summary_content_types',t('Content types'));

$content = implode($summary_node_types_list, ', ');

$summary_node_types_list = theme('summary_paragraph', array('title' => $title, 'content' => $content));

Le titre de content type est maintenant en <h4>

  • Modifiez le module pour qu’il utilise la fonction pour chacun des paragraphes.
  1. Création d’un template par défaut

Pour un créateur de thème, il est plus facile d’utiliser un template de type .tpl.php. Et cela n’est pas beaucoup plus compliqué à fournir qu’une fonction de thème :

Tout d’abord, il faut préciser un nom de template dans la fonction hook_theme :

/**

* Implementation of hook_theme

*/

function summary_theme () {

$functions = array(

'summary_paragraph' => array (

'variables' => array('title' => NULL, 'content' => NULL),

'template' => 'summary_paragraph',

)

);

return $functions;

}

Drupal ajoute automatiquement le suffixe .tpl.php au nom du template.

Il reste à créer le template par défaut summary_paragraph.tpl.php dans le répertoire du module summary :

<?php

/**

* @file

* Default theme implementation for each paragraph in the summary module.

*

* Available variables:

* — $title: Title of the paragraph.

* — $content: Content of the paragraph

*/

?>

<li class="summary_item">

<h3><?php print $title ?></h3>

<div class="summary_content"><?php print $content ?></div>

</li>

  • Videz les caches
  • Rechargez votre page

Summary utilise maintenant un template !

information.eps

Pour des raisons de performances, évitez de fournir un template lorsque celui-ci sera appelé de nombreuses fois sur une page.

Le but de cette section était de vous ouvrir les portes de la programmation avec Drupal. Si vous désirez aller plus loin, je vous conseille de parcourir le site http://api.drupal.org ou de lire le livre Pro Drupal Developement (http://www.drupalbook.com/).

  1. 3 - Les outils pour mieux développer avec Drupal
    1. Devel : simplifiez votre vie de développeur

Le module Devel est une boite à outils pour aider le développeur de modules Drupal.

  • Installez et activez le module Devel (version utilisée dans ce livre : 7.x-1.0)
  1. Le bloc Développement
  • Activez le bloc Développement en barre de gauche de Bartik.
  • Allez sur la page d’accueil de votre site.

S’affiche alors un bloc contenant un menu permettant d’accéder aux fonctionnalités de Devel :

Devel settings

Accéder à la page de configuration de Devel.

Empty cache

Permet de vider l'ensemble des caches de Drupal.

Execute PHP Code

Ouvre une page contenant une zone de texte permettant d'éxecuter du code PHP.

Field info

Affiche les informations de chaque champ pouvant être attaché à un contenu.

Function reference

Affiche la liste de toutes les fonctions utilisées sur le site. Si celles-ci sont dans l'API Drupal 7, un lien vers leur documentation est proposée.

Hook_elements()

Liste des éléments pouvant être inclus dans un formulaire.

Lancer le traitement régulier

Lance le cron.

Menu item

Détaille les paramètres d'un menu (hook_menu). Par exemple : devel/menu/item&path=admin/config/system/site-information, détaillera le menu admin/config/system/site-information.

PHPinfo()

Affiche des informations détaillés sur votre configuration PHP.

Rebuild menus

Reconfigure l'ensemble des menus. Tous les menus reprennent leur configuration par défaut.

Reinstall modules

Désinstalle et réinstalle tous les modules du site.

Session viewer

Affiche des informations sur la session en cours.

Theme registry

Affiche la liste de toutes les fonctions de thème du site.

Variable editor

Affiche la liste de toutes les variables de $conf. Il est également possible de les éditer à partir de cette interface.

L’éditeur de variables

Détails d’un menu

  1. Le bloc Execute PHP
  • Activez le bloc Execute PHP en pied de page de Bartik et de Seven.

Il est ensuite possible d’exécuter du code php à partir de cette zone de texte.

Test d’utilisation de la fonction system_region_list()

Résultat de la fonction

  1. Les fonctions de débuggage

Plusieurs fonctions de débuggage sont livrées avec Devel. Vous pouvez les insérer n’importe où dans votre code (y compris dans l’interface Drupal).

S’affiche avec Krumo

S’affiche en haut de page

S’affiche en zone de notification

dpm()

X

X

dvm()

X

kpr()

X

X

dpr()

X
  1. Le générateur de contenu

Ce module permet de créer n’importe quel type de contenu pour tester votre site, il permet également de créer des commentaires, des utilisateurs, des vocabulaires et des termes de taxonomy.

  • Activez le module Devel generate
  • Menu Configuration — lien Développement

Vous avez alors accès à différents menus permettant de créer du contenu, des utilisateurs et de la taxonomy.

  • Cliquez sur Generate content.

Le générateur de contenu

  • Vous pouvez alors régler les différents paramètres avant de générer le contenu en cliquant sur Do it !
  1. Le Profiler SQL

Devel permet de connaître la liste des requêtes qui ont été exécutées pour l’affichage d’une page.

  • Menu Configuration — lien Développement
  • Cochez la case Afficher la liste des requêtes
  • Cliquez sur Enregistrer
  1. Le module Coder

Le module Coder inspecte le code des modules et indique s'ils ne respectent pas les conventions de codages de drupal (http://drupal.org/node/318).

  • Installez le module (version utilisée dans ce livre : 7.x-1.0-beta6) — http://drupal.org/project/coder
  • Activez les modules Coder et Coder Review
  • Menu Modules

Coder ajoute un lien Code Review pour chaque module

  • Cliquez sur le lien Code Review de votre module.
  • Constatez le nombre d’erreurs à corriger !

Un module bien peu respectueux des conventions !

  1. Drupal for Firebug

Ce module permet de débugger certaines parties de vos modules à partir de Firebug, module de Firefox.

Installation

Pour que ce module fonctionne, il faut activer le module Drupal et le module Firefox.

  • Installez le module Drupal For Firebug(version utilisée dans ce livre : 7.x-1.2) — http://drupal.org/project/drupalforfirebug
  • Activez les modules Drupal for Firebug Preprocessor et Drupal for Firebug
  • Téléchargez et activez le module Drupal For Firebug de Firefox (version utilisée dans ce livre : 0.0.7) — https://addons.mozilla.org/en-US/firefox/addon/drupal-for-firebug/

information.eps

Lors de la rédaction de ce livre, le plugin pour firefox ne fonctionnait pas. C’est pourquoi les copies d’écran ont été prises avec Google chrome avec l’extension Drupal for Chrome.

Utilisation

Chargez une page de Drupal, lancez Firebug, un nouvel onglet Drupal apparaît, il est alors possible d’avoir des informations sur cette page :

Détail des composants d’un formulaire

Plusieurs sous-onglets sont alors disponibles :

Informations

Vous pouvez utiliser la fonction firep() pour afficher des informations dans cet onglet

Forms

Affiche les paramètres des composants des formulaires de la page

Sql

Affiche les requêtes SQL exécutées pour la page si l’option du Profiler SQL est activé (chap VI -3.1.5 Le Profiler SQL)

User

Affiche les informations liées à l’utilisateur

Node

Affiche les informations liées aux nodes chargées sur la page (y compris celles des vues)

View

Affiche les informations liées aux vues chargées sur la page

Php

Fonctionne de la même façon que le bloc Execute Php du module Devel (chap VI - 3.1.2 Le bloc Execute PHP)
  1. Débugger avec Eclipse

Lorsque vous développerez des modules complexes, pouvoir débugger avec une interface graphique peut vous faire gagner du temps : pouvoir mettre des points d’arrêt, exécuter le programme pas à pas et voir directement l’évolution des valeurs des variables peut aider à mieux comprendre ses erreurs.

Dans cette section, vous installerez le débuggueur Xdebug sur votre serveur, et vous l'utiliserez avec Eclipse.

  1. Installation de Xdebug sur WampServer

Xdebug est installé par défaut sur Wampserver, mais il n’est pas configuré en mode remote (debuggage à distance) :

astuce.eps

Pour vérifier l’installation de XDebug sur votre serveur :

  • Menu Rapports — lien Tableau de bord d’administration
  • Lien plus d’informations de la ligne PHP

Xdebug est activé !

Pour modifier la configuration de Xdebug :

  • Editez votre fichier php.ini (icône Wampserver — PHP — php.ini).
  • Modifiez ainsi les lignes de la section ; XDEBUG Extension du fichier :

[xdebug]

xdebug.remote_enable=on

xdebug.remote_host="127.0.0.1"

xdebug.remote_port=9000

xdebug.remote_handler="dbgp"

xdebug.remote_mode=req

  • Enregistrez le fichier et redémarrez WampServer.
  1. Installation de Xdebug sur Ubuntu

Commencez par installer le paquet Xdebug

sudo apt-get install php5-xdebug

Puis éditez le fichier de configuration de Xdebug :

sudo gedit /etc/php5/conf.d/xdebug.ini

Ajoutez au fichier les lignes suivantes :

xdebug.remote_enable=on

xdebug.remote_host="127.0.0.1"

xdebug.remote_port=9000

xdebug.remote_handler="dbgp"

xdebug.remote_mode=req

Sauvegardez le fichier et redémarrez Apache :

sudo /etc/init.d/apache2 restart

Vous pouvez vérifier si Xdebug s’est bien installé :

  • Menu Rapports — lien Tableau de bord d’administration
  • Lien plus d’informations de la ligne PHP

Xdebug est bien installé

  1. Module easy Xdebug pour Firefox

Il existe un module pour Firefox qui permet de simplifier le démarrage d’une session xdebug.

  • Dans le menu Modules complémentaires de Firefox, recherchez l’extension easy xdebug (version utilisée pour ce livre easy Xdebug 1.5)
  • Installer le module
  • Redémarrez Firefox

Deux icônes s’affichent en bas à droite de Firefox, l’une pour démarrer une session de débuggage, l’autre pour la stopper.

Les icônes de easy xdebug

information.eps

Vous pouvez afficher ou cacher la Barre des modules de Firefox grâce au menu Options — Barre des modules.
  1. Configuration d’Eclipse pour xdebug

Il s’agit maintenant d’indiquer à Eclipse que vous utiliserez Xdebug pour débugger votre projet Drupal :

  • Menu Window — Preferences
  • Sélectionnez l’item PHP — Debug
  • À la ligne PHP Debugger choisissez XDebug

Configuration du debugger

  • Cliquez sur le lien configure... de XDebug
  • Sélectionnez XDebug dans la liste Installed Debuggers
  • Bouton Configure
  • Dans la liste Accept remote session (JIT), choisissez any

astuce.eps

Vous pouvez également décocher la case Show super globals in variable views qui vous permettra de limiter le nombre de variables affichées lors du débuggage.
  • Bouton OK
  • Bouton OK
  1. Utiliser xdebug

Vous allez maintenant débugger votre fonction summary_content(). Elle est utilisée lors de l’affichage de la page /summary.

  • Ouvrez le fichier sites/all/modules/summary/summary.module
  • Dans la marge de la première ligne de la fonction, faites un clic droit et choisissez Toggle Breakpoints

Ajout d’un point d’arrêt dans le script

Un point bleu signifiant le point d’arrêt devrait apparaître dans la marge. Lorsque le programme atteindra cette ligne, il arrêtera de s’exécuter et vous informera sur son état.

astuce.eps

Vous pouvez également positionner vos points d’arrêts dans le fichiers template de vos thèmes et modules.
  • Dans Firefox, pointez vers l’URL /summary
  • Démarrez la session xdebug grâce à l’icône Start Xdebug Session de easy Xdebug.
  • Rechargez la page (F5)

Eclipse demande alors le type de perspective qu’il doit utiliser pour la session de débuggage

Eclipse a détecté une session de débuggage

  • Bouton Yes

astuce.eps

Une perspective sous Eclipse est un mode de présentation des différentes fenêtres. Vous pouvez passer de l’une à l’autre en cliquant sur les boutons à droite de la barre d’outils.

Les perspectives de Eclipse

Eclipse s’arrête alors à la première ligne du index.php de Drupal. Utilisez la barre de boutons de la vue Debug d’Eclipse pour naviguer dans le programme.

Boutons de navigation dans le script

  • Bouton Resume (F8)

Le script se déroule alors jusqu’au prochain point d’arrêt qui est celui que vous avez ajouté dans la fonction summary_content().

  • Continuez à dérouler le script pas à pas (Bouton Step Over (F6))
  • Remarquez l’évolution des variables dans la vue Variables

Inspection du fonctionnement du module summary

information.eps

Si Eclipse ne s’arrête pas sur votre point d’arrêt, il se peut que votre code ne soit pas exécuté par Drupal car le code HTML généré est en cache. Cela est fréquent pour le contenu des blocs.

Videz alors le cache et rechargez la page.

Bonne route !

J'espère que c'est avec plaisir que vous avez découvert les possibilités de Drupal. Ce livre ne se prétend pas exhaustif car le sujet est très vaste. J'ai essayé de vous donner les clés pour ouvrir le maximum de portes pour explorer le vaste monde de Drupal. Maintenant, à vous de découvrir LA fonctionnalité que vous recherchez !

À bientôt au détour d'un forum !