Atelier Drupal 7

Créer un site internet avec un CMS pas comme les autres

Cyprien Roudet

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éerlandais « 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 :

- un site de nouvelles ;

- des forums ;

- des articles contenant des images, des vidéos, des liens vers d'autres articles, etc. ;

- un site e-commerce ;

- etc.

Commentez

- Titre : Atelier Drupal 7

- Auteur : Cyprien Roudet

- Parution : 20 septembre 2013

- Licence : Le contenu de cet article est rédigé par Cyprien Roudet et est mis à disposition selon les termes de la Licence Creative Commons Attribution 3.0 non transposé. Les logos Developpez.com, en-tête, pied de page, css, et look & feel de l'article sont Copyright ® 2013 Developpez.com.

Sommaire

- Introduction

- Chapitre I Démarrage rapide

- I-A. Installation de Drupal

- I-A-1. Installation rapide sous Windows

- I-A-1-a. Installation de WampServer

- I-A-2. Téléchargement et accès à l'installateur de Drupal

- I-A-2-a. Installation de la langue française

- I-A-2-b. Installation de la base de données

- I-A-2-c. Configuration du site

- I-A-3. Installation rapide sous Linux

- I-A-3-a. Installation d'une solution LAMP

- I-A-3-b. Téléchargement et accès à l'installateur de Drupal

- I-A-3-c. Installation de la langue française

- I-A-3-d. Vérification des prérequis

- I-A-3-e. Installation de la base de données

- I-A-4. Configuration du site

- I-B. À la découverte de Drupal

- I-B-1. Le contenu

- I-B-1-a. Ajout d'un premier article

- I-B-1-b. Le deuxième article avec résumé

- I-B-1-c. Ajout de commentaires

- I-B-1-d. Navigation entre les articles

- I-B-1-e. Modifier un article

- I-B-2. Les menus

- I-B-2-a. Ajout d'un menu

- I-B-2-b. Organisation des menus

- I-B-2-c. Exercice : ajout d'un contenu

- I-B-3. Les blocs

- I-B-3-a. Ajouter un bloc

- I-B-3-b. Les régions

- I-B-3-c. Exercice

- I-B-4. Gestion des permissions

- I-B-5. Les modules

- I-B-5-a. Activer un module

- I-B-5-b. Installation d'un module externe

- I-B-5-c. Exercice : Installation, configuration et utilisation de BMI

- I-B-6. Modification des thèmes de Drupal

- I-B-6-a. Page de sélection des thèmes

- I-B-6-b. Installation d'un thème externe

- Chapitre II Utiliser Drupal

- II-A. Administrer Drupal par l'interface

- II-A-1. Toolbar : les menus de votre site

- II-A-2. Page de configuration du site

- II-A-3. Installation de modules (Captcha : évitez les robots malveillants)

- II-A-3-a. Qu'est qu'un Captcha ?

- II-A-3-b. Recherche sur drupal.org

- II-A-3-c. Méthodes d'installation d'un module

- II-A-3-d. Activation et dépendances

- II-A-4. Page de configuration des modules

- II-A-5. Désactivation et désinstallation

- II-A-6. Le tableau de bord

- II-A-7. Thème d'administration / Overlay

- II-A-8. Help : les pages d'aide

- II-B. Organisation du site

- II-B-1. Block : les blocs

- II-B-1-a. Positionnement et régions des thèmes

- II-B-1-b. Les types de bloc

- II-B-1-c. Les options des blocs

- II-B-1-d. Ajouter un bloc personnalisé

- II-B-2. Menu : les menus

- II-B-2-a. Menus installés par défaut

- II-B-2-b. Créer un menu en ajoutant du contenu

- II-B-2-c. Création d'un nouveau menu

- II-B-2-d. Affichage du menu dans un bloc

- II-B-2-e. Hiérarchiser un menu

- II-B-3. User : gestion des utilisateurs

- II-B-3-a. Ajout d'utilisateurs

- II-B-3-b. Configuration de l'inscription des utilisateurs

- II-B-3-c. Les rôles des utilisateurs

- II-B-3-d. Droits d'accès en fonction des rôles

- II-B-3-e. Exercice : création d'un bloc pour un rôle spécifique

- II-B-4. Path : URL de vos pages

- II-B-4-a. Installation

- II-B-4-b. Utilisation

- II-B-4-c. Administration

- II-C. Ajout de contenu

- II-C-1. Les types de contenu

- II-C-1-a. Options des nodes

- II-C-1-b. Options des types de contenus

- II-C-2. Filter : formatez vos textes

- II-C-2-a. Utilisation des formats de texte

- II-C-2-b. Exercice : ajoutez du code PHP dans vos nodes

- II-C-2-c. Ajouter un filtre à un format de texte

- II-C-2-d. Droits d'accès aux formats de texte

- II-C-3. Video filter : affichez des vidéos dans votre contenu

- II-C-4. Wysiwyg : installer un éditeur Wysiwyg

- II-C-4-a. Configuration de Wysiwyg

- II-C-4-b. Installation de l'éditeur openWYSIWYG

- II-C-4-c. Création d'un nouveau format de texte pour l'éditeur

- II-D. Field UI : types de contenus personnalisés

- II-D-1. Découverte du type de contenu article

- II-D-1-a. Modifier l'image liée à l'article

- II-D-1-b. Exercice : modification du champ Corps

- II-D-1-c. Les widgets du champ Tags

- II-D-2. Création d'un nouveau type de contenu

- II-D-2-a. Création du type de contenu recette

- II-D-2-b. Ajout d'un champ numérique (temps de préparation)

- II-D-2-c. Ajout d'un champ texte multiple (ingrédients)

- II-D-2-d. Exercice : ajout d'un champ numérique (prix)

- II-D-2-e. Exercice : ajout d'un champ zone de texte multiple (étapes)

- II-D-2-f. Ajout du champ photo de l'article

- II-D-2-g. Email Field : ajout d'un champ Mail

- II-D-3. Taxonomy : classer le contenu

- II-D-3-a. Le vocabulaire Tags

- II-D-3-b. Création d'un vocabulaire de taxonomie (champ Difficulté)

- II-D-3-c. Création d'un vocabulaire hiérarchisé (Provenance)

- II-D-4. Ajout de champs aux autres entités

- II-D-4-a. Ajout d'un champ pour les utilisateurs

- II-D-4-b. Ajout d'un champ à un terme de taxonomie

- II-D-4-c. Exercice : ajout d'un champ de taxonomie aux commentaires

- II-D-4-d. Page de Rapport des champs d'un site

- Chapitre III Administration système de Drupal

- III-A. Configuration de Apache - PHP - MySQL

- III-A-1. Configuration de Apache

- III-A-1-a. Les URL simplifiées

- III-A-1-b. Les hôtes virtuels

- III-A-2. Configuration de PHP

- III-A-3. Configuration de MySQL

- III-A-3-a. Configuration de la base de données utilisée par Drupal

- III-A-3-b. Création d'un utilisateur MySQL pour la base Drupal

- III-A-4. Choisir un hébergeur

- III-A-4-a. Serveur web

- III-A-4-b. PHP

- III-A-4-c. Base de données

- III-A-5. Configuration du serveur pour l'envoi de mails

- III-A-5-a. Configuration de Windows avec WampServer

- III-A-5-b. Configuration de Linux avec SSMTP

- III-A-5-c. Configuration de Linux avec Postfix

- III-A-5-d. Test de l'installation

- III-B. Sauvegarde/Restauration

- III-B-1. Sauvegarde/Restauration de l'arborescence de fichiers

- III-B-1-a. Avec un gestionnaire de fichiers

- III-B-1-b. En ligne de commande avec Linux

- III-B-2. Sauvegarde/Restauration de la base de données

- III-B-2-a. Avec phpMyAdmin

- III-B-2-b. En ligne de commande avec MySQL

- III-B-3. Backup and Migrate : sauvegardez votre base de données

- III-B-3-a. Onglet Backup

- III-B-3-b. Onglet Restaurer

- III-B-3-c. Onglet Destinations

- III-B-3-d. Onglet Profils

- III-B-3-e. Onglet Schedules

- III-B-4. Features : transférez la configuration de votre site

- III-B-5. Sauvegarde/restauration d'une vue

- III-C. Outils d'administration

- III-C-1. Optimisation des performances

- III-C-2. Update Status : mettre à jour Drupal

- III-C-2-a. Mise à jour des modules

- III-C-2-b. Mise à jour du cœur de Drupal

- III-C-2-c. Configuration

- III-C-2-d. Le mode maintenance

- III-C-3. Le Cron

- III-D. La base de données de Drupal

- III-D-1. Gestion des utilisateurs

- III-D-1-a. La table users

- III-D-1-b. Les tables role et role_permission

- III-D-1-c. La table users_roles

- III-D-2. Gestion des nodes

- III-D-2-a. Types de nodes

- III-D-2-b. Commentaires

- III-D-3. Gestion des champs

- III-D-3-a. Les tables field_data_*

- III-D-3-b. Cas d'un champ contenant plusieurs valeurs

- III-D-3-c. Les formats d'entrée

- III-D-3-d. Paramètres des champs

- III-D-3-e. Les champs des autres types d'entité

- III-D-3-f. Les révisions des champs

- III-D-3-g. Relation entre les vocabulaires et les nodes

- Chapitre IV Description de modules utiles de Drupal

- IV-A. Views : organisez vos données

- IV-A-1. Installation et découverte du module

- IV-A-1-a. Installation

- IV-A-1-b. Découverte de la vue Tracker

- IV-A-1-c. Interface du module Views

- IV-A-1-d. Modification de la vue Tracker

- IV-A-2. Création d'une vue liste des recettes

- IV-A-2-a. Formulaire de création

- IV-A-2-b. Sélection des champs

- IV-A-2-c. Critères de filtrage

- IV-A-2-d. Critères de tri

- IV-A-2-e. Exercice : modification de la vue

- IV-A-2-f. Relations

- IV-A-2-g. Formulaires exposés

- IV-A-3. Gestion des affichages

- IV-A-3-a. Création du bloc

- IV-A-3-b. Paramètres spécifiques à l'affichage

- IV-A-3-c. Exercice : modification des paramètres d'un affichage

- IV-A-4. Création d'un bloc d'infos supplémentaires sur la recette

- IV-A-4-a. Création du bloc de base

- IV-A-4-b. Création du filtre contextuel

- IV-A-4-c. Modification de la sortie par défaut d'un champ

- IV-A-4-d. Exercice : ajouter le lien de modification

- IV-A-4-e. Exercice : ajouter le champ Auteur

- IV-A-4-f. Droits d'accès

- IV-B. Site multilingue

- IV-B-1. Locale : traduire l'interface de Drupal

- IV-B-1-a. Configuration

- IV-B-1-b. Ajout d'une langue

- IV-B-1-c. Bloc de sélecteur de langue

- IV-B-1-d. Traduire l'interface

- IV-B-1-e. Exercice : traduire les chaînes d'une vue

- IV-B-2. Participer à l'effort de traduction

- IV-B-2-a. Découverte du groupe de traduction de Drupal en français

- IV-B-2-b. Importer les traductions d'un module

- IV-B-2-c. Partager ses traductions avec la communauté

- IV-B-2-d. Localization client : une interface Ajax pour traduire l'interface

- IV-B-3. Content Translation : traduire le contenu

- IV-B-3-a. Configuration

- IV-B-3-b. Utilisation

- IV-C. Administrer Drupal

- IV-C-1. Dashboard : créez un tableau de bord pour l'administrateur

- IV-C-2. Administration menu : une alternative à Toolbar

- IV-C-3. Shortcuts : gérez la barre de raccourcis

- IV-C-4. Module filter : administration de la liste des modules

- IV-C-5. Token : des jetons pour les modules

- IV-C-6. Google Analytics : mesurez l'audience de votre site

- IV-C-7. Rules : automatisation de tâches

- IV-C-7-a. Création d'une première règle

- IV-C-8. Utilisation des valeurs des champs

- IV-C-8-a. Exercice : envoyer un mail lorsqu'une recette chinoise est envoyée

- IV-D. Contenu

- IV-D-1. CKEditor : éditeur Wysiwyg complet

- IV-D-2. IMCE : insérer des images dans un texte à partir de CKEditor

- IV-D-3. Pathauto : créez automatiquement des alias d'URL

- IV-D-4. Search : un moteur de recherche simple

- IV-D-5. Image : créez des styles d'image personnalisés

- IV-D-6. Display suite : présentez vos contenus en utilisant l'interface de Drupal

- IV-D-6-a. Personnaliser l'affichage par défaut

- IV-D-6-b. Exercice : créer un mode d'affichage pour l'accroche

- IV-D-6-c. Création d'un champ personnalisé

- IV-D-6-d. Intégration à Views

- IV-E. Site coopératif

- IV-E-1. Blog : donnez la possibilité à vos utilisateurs de posséder un blog

- IV-E-2. Forum : créez un lieu d'échange pour vos utilisateurs

- IV-E-3. Advanced Forum

- IV-E-4. Contact

- IV-E-5. Webform : créez des formulaires

- IV-E-6. Fivestar : notez vos contenus

- IV-F. Blocs, menus

- IV-F-1. Taxonomy menu : affichez vos vocabulaires dans des menus

- IV-F-2. Menu Block : divisez, liez et organisez vos blocs

- IV-F-3. Nice Menus : rendez vos menus dynamiques

- IV-G. Commerce : créez une boutique

- IV-G-1. Démarrage rapide

- IV-G-1-a. Installation et configuration

- IV-G-1-b. Création d'un premier produit

- IV-G-1-c. Affichage des produits dans une node

- IV-G-1-d. Le panier

- IV-G-1-e. Commandes

- IV-G-1-f. Paiement

- IV-G-1-g. Gestion des commandes

- IV-G-2. Les éléments de Drupal Commerce

- IV-G-2-a. Entités et types de champs

- IV-G-2-b. Les vues

- IV-G-2-c. Les règles

- IV-G-2-d. Autres éléments de configuration

- IV-G-3. Quelques exemples de configuration

- IV-G-3-a. Créer une node contenant plusieurs produits

- IV-G-3-b. Produits avec attributs

- IV-G-3-c. Exercice : modifier l'affichage du panier

- IV-G-3-d. Réduction pour un rôle

- Chapitre V Les thèmes

- V-A. Configurer les thèmes par l'interface

- V-A-1. Paramètres globaux des thèmes

- V-A-2. Color : schéma de couleur du thème Bartik

- V-A-3. Paramètres du thème Marinelli

- V-B. Structure et modification d'un thème

- V-B-1. Les fichiers d'un thème

- V-B-2. Modification de Orange par CSS

- V-B-2-a. Modification d'un fichier CSS

- V-B-2-b. Installation et utilisation de Firebug

- V-B-3. Les templates de Orange

- V-B-4. Theme developer : découverte des templates d'un thème

- V-B-4-a. Utilisation de Theme developer

- V-B-4-b. Modification du template block utilisé

- V-B-4-c. Création d'un template pour un bloc spécifique

- V-B-4-d. Utilisation des variables PHP

- V-B-5. Exercice : mettre un filet autour des blocs d'une région

- V-B-6. Exercice : modifiez le format de date des commentaires

- V-B-7. Exercice : exploration d'un template du module Poll

- V-C. Créer un thème à partir d'un design HTML/CSS

- V-C-1. Création du thème

- V-C-1-a. Téléchargement du design et création du répertoire

- V-C-1-b. Création du .info

- V-C-1-c. Le premier template : html.tpl.php

- V-C-1-d. Ajout des fichiers css au thème

- V-C-1-e. Ajout des fichiers JavaScript au thème

- V-C-1-f. Le template page.tpl.php

- V-C-2. Les régions

- V-C-2-a. Création des régions

- V-C-2-b. Affichage du contenu, région content

- V-C-2-c. Affichage des blocs dans la région colonne latérale

- V-C-2-d. Exercice : le menu

- V-C-2-e. Exercice : le footer

- V-C-2-f. Les autres régions

- V-D. Theming du contenu

- V-D-1. Créer un template spécifique pour un type de contenu

- V-D-1-a. Créer un template node.tpl.php sur mesure

- V-D-1-b. Fonctions Hide et Show (afficher l'image sous les commentaires)

- V-D-1-c. Modifier l'affichage d'un item grâce au template field.tpl.php

- V-D-2. Le fichier template.php

- V-D-2-a. Ajout d'une variable à un template

- V-D-2-b. Exercice : ajout des variables nombre_etapes et nombre_ingredients

- V-D-2-c. Les fonctions de thème

- V-E. Les variables disponibles dans les templates

- V-E-1. Variables de html.tpl.php

- V-E-2. Variables de page.tpl.php

- V-E-3. Variables de node.tpl.php

- V-F. Le theming des vues

- Chapitre VI Introduction à la création de modules

- VI-A. Environnement de développement

- VI-A-1. Installation et configuration d'Eclipse

- VI-A-1-a. Installation sous Windows

- VI-A-1-b. Installation sous Ubuntu

- VI-A-1-c. Configuration d'Eclipse pour Drupal

- VI-A-2. Architecture d'un module

- VI-A-2-a. Le répertoire du module et le fichier .info

- VI-A-2-b. Les hooks

- VI-A-2-c. Rechercher de la documentation sur http://api.drupal.org

- VI-A-2-d. hook_block_view : afficher des blocs

- VI-A-2-e. Conventions et finitions

- VI-B. Votre premier module Drupal

- VI-B-1. La page Summary

- VI-B-1-a. Démarrage

- VI-B-1-b. hook_menu() : créez une page associée à une URL

- VI-B-1-c. Liste des modules activés

- VI-B-1-d. Liste des vocabulaires de taxonomy

- VI-B-1-e. Exercice : liste des types de nodes

- VI-B-2. La page de configuration du module

- VI-B-2-a. hook_menu() : ajout d'une deuxième page pour le module

- VI-B-2-b. Form API : créer des formulaires HTML dans Drupal

- VI-B-2-c. system_settings_form : ajouter le bouton de sauvegarde

- VI-B-2-d. variable_get : sauvegarder des données dans la table variable

- VI-B-2-e. Exercice : personnalisation des titres des sections

- VI-B-3. Utilisation des paramètres pour la page Summary

- VI-B-3-a. Exercice : affichage des labels personnalisés

- VI-B-4. Exécuter des requêtes SQL dans un module en récupérer le résultat

- VI-B-4-a. Requête simple retournant une seule ligne

- VI-B-4-b. Requête avec résultat sur plusieurs lignes

- VI-B-4-c. Requête avec variables

- VI-B-4-d. Requête avec le constructeur de requêtes

- VI-B-5. Theming du contenu

- VI-B-5-a. Affichage du nombre de nodes sous forme de tableau

- VI-B-5-b. Implémentation de hook_theme

- VI-B-5-c. Création d'une fonction par défaut pour le module

- VI-B-5-d. Appel de la fonction de thème dans le module

- VI-B-5-e. Création d'un template par défaut

- VI-C. Les outils pour mieux développer avec Drupal

- VI-C-1. Devel : simplifiez votre vie de développeur

- VI-C-1-a. Le bloc Développement

- VI-C-1-b. Le bloc Execute PHP

- VI-C-1-c. Les fonctions de débogage

- VI-C-1-d. Le générateur de contenu

- VI-C-1-e. Le Profiler SQL

- VI-C-2. Le module Coder

- VI-C-3. Drupal for Firebug

- VI-C-4. Déboguer avec Eclipse

- VI-C-4-a. Installation de Xdebug sur WampServer

- VI-C-4-b. Installation de Xdebug sur Ubuntu

- VI-C-4-c. Module easy Xdebug pour Firefox

- VI-C-4-d. Configuration d'Eclipse pour xdebug

- VI-C-4-e. Utiliser xdebug

- Index

Introduction

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éthodes 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 questions 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 certains 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 montrant qu'une action est à exécuter par le lecteur

Lien vers un module en rapport avec le sujet traité

Information complémentaire

Astuce

Versions alpha, bêta 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 met pas en péril.

Site internet

Vous pouvez télécharger 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. Sauvegardes / Restauration.

Copies d'écrans et traductions en français

Pour une meilleure compréhension, de nombreuses copies d'écran illustrent ce livre. Il se peut qu'elles soient légèrement différentes au moment où 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 pu être importées pour réaliser les copies d'écran.

Pour importer des traductions, reportez-vous au chap. Site multilingue.

Chapitre 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.

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 premier chapitre décrit l'installation sur Windows (logiciel WampServer) ;

- le deuxième chapitre décrit l'installation sur Linux (distribution Ubuntu).

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 pour 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

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.

I-A - Installation de Drupal

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

I-A-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.

I-A-1-a - Installation de WampServer

-> Sur le site web WampServer (http://www.wampserver.com/), allez dans la section Download.

-> Téléchargez et exécutez le fichier .exe (version utilisée pour ce livre : wampserver2.1c.exe).

-> Il sera considéré que Wampserver est installé dans le répertoire c:\wamp (répertoire par défaut).

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

-> À la fin de l'installation, une icône apparaît dans la zone de notification (à côté de l'heure).

-> Passez WampServer en français en faisant un clic droit sur l'icône Language - french.

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.

-> Lancez un navigateur internet et entrez l'adresse locale : http://localhost. Vous devriez voir s'afficher la page d'accueil WampServer

Wampserver fonctionne

I-A-2 - 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.

-> Rendez-vous à la section Download & Extend (télécharger) du site web Drupal (http://www.drupal.org/download) et téléchargez la dernière version stable de Drupal (version utilisée pour ce livre : Drupal 7.7)

Page de téléchargement de drupal.org

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

-> Décompressez l'archive Drupal dans le répertoire www où vous avez installé WampServer (par défaut c:\wamp\www).

-> Renommez le répertoire créé en Drupal. Vous devriez obtenir l'arborescence suivante : c:\wamp\www\drupal.

-> Rendez-vous à l'adresse http://localhost/drupal. La page d'accueil de l'installateur Drupal doit apparaître

Drupal est prêt à être installé !

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.

I-A-2-a - Installation de la langue française

La priorité est maintenant d'installer Drupal en français.

-> Cliquez sur le bouton Save and continue pour passer à la deuxième étape : Choose language.

-> Cliquez sur le lien Learn how to install Drupal in other languages « apprenez comment installer Drupal dans d'autres langues » .

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

-> Cliquez sur le lien translation serveur de l'étape 1.

-> Cherchez la langue française et téléchargez le fichier qui correspond à la version 7

Téléchargement de la langue française

-> Enregistrez le fichier dans le répertoire c:\wamp\www\drupal\profile\standard\translation.

-> Renommez le fichier en fr.po, vous devriez obtenir un fichier c:\wamp\www\drupal\profile\standard\translation\fr.po.

-> Cliquez sur le lien Reload the language selection page after adding translations « recharger la page de sélection des langues après avoir ajouté des traductions » de la page Choose language

Drupal est prêt à être installé... en français !

-> Choisissez l'option French (Français).

-> Cliquez ensuite sur Save and continue pour passer à l'étape suivante.

I-A-2-b - 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 bases 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.

-> Lancez un autre navigateur internet (ou un nouvel onglet) et entrez l'adresse locale : http://localhost/phpmyadmin (ou cliquez sur le raccourci depuis l'icône WampServer).

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ée.

-> En dessous de la ligne Créer une base de données, entrez le nom de la base, par exemple drupal

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

-> Cliquez ensuite sur le bouton Créer

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. Configuration de MySQL.

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

-> Nom de la base de données : drupal ;

-> Nom d'utilisateur : root ;

-> Mot de passe : vide.

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

-> Cliquez sur le bouton Enregistrer et continuer.

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é.

I-A-2-c - Configuration du site

Une fois 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 :

-> Nom du site : À vos toques ! ;

-> Adresse de courriel du site : contact@monadresse.com (entrez une adresse valide) ;

-> Nom d'utilisateur : admin ;

-> Adresse de courriel : contact@monadresse.com (entrez une adresse valide) ;

-> Mot de passe : entrez ici votre mot de passe - pour ce livre, le mot de passe utilisé sera atelierdrupal ;

-> Pays par défaut : France (ou votre pays) ;

Paramètres du site et de son administrateur

-> Cliquez sur Enregistrer et continuer ;

-> Cliquez sur le lien Visitez votre nouveau site.

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. À la découverte de Drupal.

I-A-3 - Installation rapide sous Linux

L'installation d'une solution LAMP (Linux, Apache, MySQL, Php) sous Linux est toujours très bien documentée, quelle que 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.

I-A-3-a - 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

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.

-> Il vous sera demandé durant l'installation un mot de passe pour MySQL (atelierdrupal)

Configuration de MySQL

-> Confirmez à nouveau le mot de passe.

-> À la question Serveur web à reconfigurer automatiquement, choisissez apache2 en appuyant sur la barre d'espace

Configuration de phpMyAdmin

-> L'installateur pose quelques autres questions, répondez avec les options par défaut en cas de doute.

-> À la fin de l'installation, pour vérifier si votre serveur web fonctionne, lancez un navigateur internet et entrez l'adresse locale : http://localhost. Vous devriez voir apparaître la page d'accueil Apache.

-> Vérifiez si phpMyadmin fonctionne en entrant l'adresse : http://localhost/phpmyadmin.
Vous devriez voir apparaître la page d'accueil phpMyAdmin

Votre solution LAMP est installée, phpMyAdmin fonctionne

I-A-3-b - 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).

-> Rendez-vous à la section Download & Extend (télécharger) du site web Drupal
(http://www.drupal.org/download) et téléchargez la dernière version stable de Drupal (version utilisée pour ce livre : Drupal 7.7)

Page d'accueil de drupal.org

-> Décompressez votre archive dans votre répertoire personnel.

-> Renommez ce répertoire en drupal.

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

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é

I-A-3-c - Installation de la langue française

La priorité est maintenant d'installer Drupal en français.

-> Cliquez sur le bouton Save and continue pour passer à la deuxième étape : Choose language.

-> Cliquez sur le lien Learn how to install Drupal in other languages « Apprenez comment installer Drupal dans d'autres langues » .

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

-> Cliquez sur le lien translation serveur de l'étape 1.

-> Allez jusqu'à la langue française et téléchargez le fichier qui correspond à la version 7.

Téléchargement de la langue française

-> Enregistrez le fichier dans le répertoire /home/utilisateur/drupal/profile/standard/translation.

-> Renommez le fichier en fr.po, vous devriez obtenir un fichier
/home/utilisateur/drupal/profile/standard/translation/fr.po.

-> Cliquez sur le lien Reload the language selection page after adding translations « Recharger la page de sélection des langues après avoir ajouté des traductions » de la page Choose language.

Drupal est prêt à être installé... en français !

-> Choisissez l'option French (Français).

-> Cliquez ensuite sur Save and continue pour passer à l'étape suivante.

I-A-3-d - 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

Vous pouvez utiliser l'interface graphique du gestionnaire de fichiers de Gnome (Nautilus) pour effectuer ces actions.

-> Cliquez sur le lien poursuivez l'installation pour faire disparaître le message.

I-A-3-e - 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 bases 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.

-> Lancez un autre navigateur internet (ou un nouvel onglet) et entrez l'adresse locale :
http://localhost/phpmyadmin.

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

-> Connectez-vous avec le login root / atelierdrupal (si vous avez suivi ce livre). C'est le mot de passe que vous avez entré à l'installation de LAMP.

-> En dessous de la ligne Créer une base de données, entrez le nom de la base, par exemple drupal.

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

-> Cliquez ensuite sur le bouton Créer.

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 :

-> Nom de la base de données : drupal ;

-> Nom d'utilisateur : root ;

-> Mot de passe : atelierdrupal (si vous avez suivi ce livre).

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

-> Cliquez sur le bouton Enregistrer et continuer.

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 répertoire ./sites/default/

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

Commande pour restaurer les droits d'accès en écriture sur le répertoire ./sites/default/files

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

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

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.).

I-A-4 - 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 :

-> Nom du site : À vos toques ! ;

-> Adresse de courriel du site : contact@monadresse.com (entrez une adresse valide) ;

-> Nom d'utilisateur : admin ;

-> Adresse de courriel : contact@monadresse.com (entrez une adresse valide) ;

-> Mot de passe : entrez ici votre mot de passe - pour ce livre le mot de passe utilisé sera atelierdrupal ;

-> Pays par défaut : France (ou votre pays)

Paramètres du site et de son administrateur

-> Cliquez sur Enregistrer et continuer ;

-> Cliquez sur le lien Visitez votre nouveau site

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

I-B - À 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...

I-B-1 - Le contenu

I-B-1-a - 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 trois raccourcis vous permettent de le faire.

-> Cliquez sur l'un des liens permettant d'Ajouter du contenu

Ajout d'un type de contenu

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.

-> Cliquez sur le lien Article.

-> Vous arrivez alors sur le formulaire d'ajout de contenu de Drupal, entrez ici une recette de cuisine

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

-> Titre : Salade de penne.

-> Tags : Plat principal, Pâtes.

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

-> Corps : copiez le corps de la recette.

-> Image : enregistrez une image sur votre disque (clic droit sur l'image puis Enregistrer sous) puis cliquez sur le bouton Parcourir pour pointer vers elle.

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

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

-> Cliquez ensuite sur le bouton Transfert de fichiers.

-> Enfin, cliquez sur le bouton Enregistrer tout en bas de la page.

Drupal vous redirige alors vers votre article mis en forme.

Votre premier article mis en page par Drupal.

I-B-1-b - 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).

-> Titre : Risotto à la bière blanche et Stilton et tranches de melon poêlées.

-> Tags : Plat principal, Riz.

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

-> Cliquez sur le lien Modifier le résumé à côté du corps.

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é.

-> Résumé : copiez l'introduction de la recette dans le résumé.

-> Corps : copiez la recette elle-même dans le corps

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

-> Image : ajouter une image comme pour le précédent article.

-> Cliquez sur le bouton Enregistrer tout en bas de la page.

Votre site contient maintenant deux articles.

I-B-1-c - 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 au bas de la page à la section Ajouter un commentaire.

-> Sujet : Bonne idée.

-> Commentaire : De mouiller le riz avec la bière.

-> Cliquez sur Enregistrer.

Formulaire d'ajout de commentaire

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

-> Ajoutez un deuxième commentaire à la recette

Les commentaires de l'article mis en forme

I-B-1-d - Navigation entre les articles

-> Cliquez sur le titre du site (À vos toques) pour retourner sur sa page d'accueil (http://localhost/drupal/)

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 :

- lorsqu'un résumé existe pour un article, seul ce résumé est affiché (cas du Risotto) ;

- les images sont plus petites que dans les articles ;

- il existe un lien Read more permettant d'accéder à l'article complet ;

- les tags sont affichés sous forme de lien.

-> Cliquez sur le tag Plat principal de la première recette.

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

-> Cliquez sur le lien Riz.

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

I-B-1-e - 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 :

- un menu contextuel est disponible en haut à droite de chaque article sur les pages de listes (Accueil ou Tags), permettant de Modifier ou Supprimer l'article ;

Menu contextuel dans les listes.

- sur la page de consultation d'un article, un onglet Modifier permet d'accéder aux mêmes fonctionnalités.

Onglet Modifier d'un article

-> Modifiez l'article en utilisant l'une ou l'autre des méthodes.

-> Cliquez sur le lien Modifier le résumé.

-> Mettez un résumé à la recette.

Modification de l'article

-> Cliquez sur Enregistrer.

I-B-2 - Les menus

I-B-2-a - 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, à côté de l'onglet Home, pour les rendre plus visibles.

-> Éditez à nouveau la recette des Penne.

-> Placez-vous en bas de la page.

-> Vérifiez que l'onglet horizontal Paramètres du menu est bien sélectionné.

L'ensemble de ces onglets horizontaux seront détaillés au chap. Options des nodes de ce livre.

-> Cochez la case Fournit un lien de menu.

-> Remplissez les champs comme dans l'illustration suivante

Paramètres du menu d'un article

-> Cliquez sur Enregistrer.

Le nouvel onglet de menu avec sa description

-> De la même manière, ajoutez un menu pour la recette de Risotto. Limitez le titre à Risotto à la bière blanche.

Les deux menus ajoutés

I-B-2-b - Organisation des menus

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

-> En haut de la page, dans le menu d'administration, cliquez sur Structure.

-> Puis sur le lien Menu.

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

-> Cliquez sur le lien lister les liens du Menu principal.

-> Cliquez sur le symbole de la Salade de penne et remontez-le par glisser/déposer au-dessus du Risotto

Page d'organisation des menus

-> Cliquez sur Enregistrer la configuration et observez le résultat : l'ordre des menus a changé.

Vous pourrez retrouver une explication plus approfondie des menus au chap. Menu : les menus de ce livre.

I-B-2-c - Exercice : ajout d'un contenu

- Ajoutez une nouvelle recette (allez faire un tour dans la catégorie « Vite fait bien fait » - « Recette Croque Hawai » du site 1001 recettes) et créez son menu.

- Supprimez le premier menu Accueil du Menu Principal

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

Corrigé

-> Menu Contenu.

-> Lien + Ajouter du contenu.

-> Lien Article.

-> Titre : Croque-Hawaï et petite salade.

-> Tags : Entrée.

-> Cliquez sur le lien Modifier le résumé à côté du corps si vous voulez créer un résumé.

-> Résumé : copiez l'introduction de la recette dans le résumé.

-> Corps : copiez la recette elle-même dans le corps.

-> Image : ajouter une image.

Pour le menu

-> Cocher la case Fournit un lien de menu.

-> Titre du lien dans le menu : Croque-Hawaï.

-> Élément parent : <Menu principal>.

-> Cliquez sur le bouton Enregistrer tout en bas de la page.

Pour réorganiser le menu

-> Menu Structure - lien Menu.

-> Lien lister les liens du menu Menu principal.

-> Lien supprimer du lien Accueil.

-> Placer le Croque-Hawai en troisième dans la liste.

-> Bouton Enregistrer la configuration.

I-B-3 - 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.

I-B-3-a - Ajouter un bloc

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

-> Cliquez sur le menu Structure.

-> Puis sur le lien Blocs.

-> Dans la section Désactivé (en bas de la page), choisissez la région Première barre latérale pour le bloc Commentaires récents

Page d'administration des blocs

-> Cliquez sur Enregistrer les 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 vous permet de réorganiser les blocs dans l'ordre que vous désirez sur une région donnée.

I-B-3-b - 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).

-> Retournez sur la page d'administration des blocs, menu Structure - lien Blocs.

-> En haut de la page, cliquez sur le lien Aperçu des régions des blocs (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).

-> Cliquez sur le lien Exit block region demonstration.

-> À la section Première barre latérale, modifiez la région En-tête pour le bloc du Formulaire de recherche.

-> Cliquez sur Enregistrer les blocs.

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

I-B-3-c - Exercice

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

Message à supprimer

Corrigé

-> Menu Structure - lien Blocs.

-> Pour le bloc Propulsé par Drupal de la région Pied de page, choisir - Aucun.

-> Bouton Enregistrer les blocs.

I-B-4 - 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.

Cliquez sur Se déconnecter en haut de page.

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

- Rendez-vous sur la page du Risotto, au niveau des commentaires.

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.

-> Reconnectez-vous en administrateur avec le login/mot de passe admin/atelierdrupal en utilisant le bloc Connexion utilisateur.

Le bloc de connexion utilisateur

-> Menu Personnes.

-> Onglet Droits.

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

-> Rendez-vous à la section du module Comment.

-> Dans la colonne utilisateur anonyme, cochez Post comment qui autorise l'envoi de commentaires.

-> Cochez également Skip comment approval qui permet aux commentaires d'être publiés sans être modérés par les administrateurs

La gestion des droits sur le module Comment

-> Cliquez sur Enregistrer les droits d'accès.

-> Cliquez à nouveau sur Se déconnecter dans le bloc admin.

-> Essayez de poster un nouveau commentaire.

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

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

I-B-5 - Les modules

I-B-5-a - 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.

-> Menu Modules.

-> Cochez la case activé du module Poll (Sondage)

Page d'administration des modules

-> Cliquez sur Enregistrer la configuration.

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

-> Cliquez sur Contenu ;

-> Puis sur le lien + Ajouter un contenu.

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

-> Cliquez sur le lien Sondage et créez un nouveau sondage comme sur l'illustration suivante :

Ajout d'un Sondage

-> Ajoutez à ce sondage une entrée dans le menu principal, comme pour les articles, dans l'onglet Paramètres du menu.

-> Cliquez sur Enregistrer.

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.

I-B-5-b - 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.

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.

-> Rendez-vous sur le site http://www.drupal.org.

-> Dans la zone de recherche, entrez weather.

-> Sélectionnez l'option Modules

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

-> Cliquez sur le bouton Search.

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

-> Choisissez le module Weather (http://www.drupal.org/project/weather).

-> Descendez à la section Downloads de la page.

Drupal peut installer un module automatiquement à partir de l'URL de son archive.

-> Repérez la version qui convient à Drupal 7 (7.x-1.0 au moment de la rédaction de ce livre), faites un clic droit sur le lien tar.gz et choisissez l'option Copier l'adresse du lien (avec le navigateur Firefox).

Copie de l'URL de l'archive du module

-> Menu Modules.

-> Lien + Installer un nouveau module.

-> Coller l'URL précédemment copiée dans la zone Installer depuis une URL.

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

-> Cliquez sur le bouton Installer.

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

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

-> Lien Enable newly added modules « Activer les modules nouvellement installés ».

-> Allez tout en bas de la page jusqu'au module Weather, et cochez la case Activé.

Les modules sont triés par catégories. Vous pouvez donc replier la catégorie Cœur 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é

-> Bouton Enregistrer la configuration.

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.

-> Cliquez sur le lien Configurer du module Weather.

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.

-> Cliquez sur le lien + Unités d'affichage pour ajouter un affichage.

-> Les options par défaut de cette page conviennent.

-> Bouton Enregistrer

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

-> Cliquez sur le lien Add location to this display « Ajouter un endroit pour cet affichage ».

-> Choisissez le pays et la ville

Sélection d'un aéroport

-> Bouton Enregistrer.

-> Bouton Enregistrer la configuration.

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

-> Menu Structure - lien Blocs.

-> Pour le bloc Météo : Système, choisir la région Première barre latérale

Les blocs du module Weather

-> Bouton Enregistrer les blocs.

-> Retournez sur la page d'accueil.

Le bloc Weather en action !

I-B-5-c - Exercice : Installation, configuration et utilisation de BMI

-> BMI est un module qui propose un bloc permettant de calculer son IMC (Indice de Masse Corporelle). Il s'agit donc pour vous de trouver le module, de l'installer, de l'activer et d'afficher le bloc en Première barre latérale

Le bloc du module BMI

-> Ensuite, pour plus de clarté pour la suite de ce livre, désactivez les modules Weather et BMI.

Corrigé

Recherche, installation et activation du module

-> La page de téléchargement du module est : http://drupal.org/project/bmi (version 7.x-1.0-rc1 au moment de la rédaction de ce livre).

-> Copiez l'URL (http://ftp.drupal.org/files/projects/bmi-7.x-1.0-rc1.tar.gz).

-> Dans Drupal, menu Modules.

-> Lien + Installer un nouveau module.

-> Collez l'URL précédemment copiée.

-> Bouton Installer.

-> Lien Enable newly added modules « Activer les modules nouvellement installés ».

-> Pour le module BMI, cochez la case ACTIVE.

-> Bouton Enregistrer la configuration.

Configuration et utilisation

-> Menu Structure - lien Blocs.

-> Pour le bloc Body Mass Index, choisir la région Première barre latérale.

-> Bouton Enregistrer les blocs.

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

Désactivation des modules

-> Menu Modules.

-> Pour les modules BMI et Weather, décochez la case ACTIVE.

-> Bouton Enregistrer la configuration.

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

I-B-6 - 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ées dans le chap. Les thèmes.

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.

I-B-6-a - Page de sélection des thèmes

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

-> Menu Apparence

Page de configuration des thèmes

-> deux thèmes sont actifs, Bartik et Seven.

-> le thème par défaut est Bartik, c'est le thème qui sert à afficher le contenu du site.

-> le thème Seven est utilisé pour les actions d'administration.

-> il existe deux autres thèmes installés (Garland et Stark), mais ils ne sont pas activés.

I-B-6-b - 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.

-> Rendez-vous sur le site http://www.drupal.org.

-> Dans la zone de recherche, entrez Danland.

-> Sélectionnez l'option Themes

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

-> Cliquez sur le bouton Search.

-> Choisissez le thème danland (http://www.drupal.org/project/danland).

-> Descendez à la section Downloads de la page.

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

-> Repérez la version qui convient à Drupal 7 (7.x-1.0-rc2 au moment de la rédaction de ce livre), faites un clic droit sur le lien tar.gz et choisissez l'option Copier l'adresse du lien.

-> Menu Apparence.

-> Lien + Installer un nouveau thème.

-> Coller l'URL précédemment dans la zone Installer depuis une URL.

-> Cliquez sur le bouton Installer.

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.

-> Lien Enable newly added themes « Activer les thèmes nouvellement installés ».

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

-> Cliquez sur le lien Activer et choisir par défaut du thème Danblog.

Le thème Danblog est une version simplifiée 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.

-> Retournez sur la page d'accueil.

-> Le thème qui affiche le contenu de votre site a changé

Découvrez le thème Danblog !

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

Chapitre 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. Administrer Drupal par l'interface.

Au chap. 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. 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. Field UI : types de contenus personnalisés que vous configurerez Drupal pour qu'il s'adapte à votre contenu.

II-A - Administrer Drupal par l'interface

II-A-1 - Toolbar : les menus de votre site

Toolbar est un module du cœur 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.

II-A-2 - Page de configuration du site

Rendez-vous sur la page de configuration du site.

-> Menu Configuration.

-> Section Système - lien Informations.

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 à côté 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

N'oubliez pas que cette page existe. Malgré sa simplicité, elle règle des paramètres que vous modifierez forcément un jour.

II-A-3 - 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. 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.

II-A-3-a - Qu'est qu'un Captcha ?

Dans le chap. 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 - seuls les humains peuvent résoudre. Le module Drupal Captcha permet d'installer cette fonctionnalité.

Le formulaire Captcha pour les anonymes

II-A-3-b - 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

-> Allez sur le site http://www.drupal.org.

-> Menu du haut : Download & Extend.

-> Onglet Modules.

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 leurs 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é.

-> Faites une recherche sur le module Captcha (vous pouvez vous inspirer de la capture précédente).

-> Allez sur la page du module (http://drupal.org/project/captcha).

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.

II-A-3-c - Méthodes d'installation d'un module

Il s'agit maintenant d'installer le module.

-> Sur votre site Drupal, menu Modules.

-> Lien + Installer un nouveau 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.

-> Téléchargez l'archive du module Captcha sur votre disque dur (version utilisée pour ce livre 7.x-1.0-alpha2).

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 :

- tous les sites ont accès aux modules captcha et weather (répertoire all) ;

- seul le site par défaut a accès au module bmi (répertoire default) ;

- le site test.drupal.tld n'a pas accès au module bmi.

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

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

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.

-> Extrayez le contenu de l'archive Captcha dans le répertoire /sites/all/modules.

II-A-3-d - Activation et dépendances

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

-> Menu Modules.

-> Section SPAM CONTROL

Les deux modules de l'archive Captcha

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

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.

-> Cochez la case ACTIVE du module Captcha.

-> Bouton Enregistrer la configuration.

II-A-4 - Page de configuration des modules

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

-> Menu Modules.

-> Section Spam control

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.

-> Cliquez sur le lien Configurer.

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 :

-> choisissez le Captcha Math du formulaire comment_node_article_form

Choix d'un Captcha pour un formulaire

-> en bas de la page, bouton Enregistrer la configuration.

Voyez si le Captcha fonctionne :

-> lien Se déconnecter ;

-> choisissez un article.

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

Le formulaire de commentaire n'est pas protégé par un Captcha si vous êtes connecté en tant qu'administrateur.

II-A-5 - 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.

-> Menu Modules.

-> Désactivez le module Captcha.

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 :

-> Onglet Désinstaller.

-> Cochez CAPTCHA.

Désinstallation complète d'un module

-> Bouton Désinstaller.

II-A-6 - 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 :

-> Menu Rapports - lien Tableau de bord d'administration

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 bibliothèques, les droits d'accès aux systèmes de fichiers, etc. Dans l'illustration précédente :

- un problème critique est signalé sur fond rouge , la bibliothèque GD est nécessaire pour le fonctionnement de Drupal ;

- un problème qui mérite votre attention est signalé sur fond jaune , ici des mises à jour de modules sont conseillées ;

- une amélioration est signalée sur fond bleu, ici il est possible d'installer uploadprogress pour les téléversements (upload) de fichiers.

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. Update status : mettre à jour 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. Update status : mettre à jour 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. 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. Le cron).

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

Section du module Captcha du tableau de bord

II-A-7 - 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

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

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).

II-A-8 - 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

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

Lien Aide de chaque module

II-B - Organisation du site

II-B-1 - Block : les blocs

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

II-B-1-a - 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.

-> Menu Structure - lien Blocs.

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

II-B-1-b - 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.

Cette liste peut s'enrichir lors de l'activation de nouveaux modules (exemple : sondage le plus récent pour le module Poll).

II-B-1-c - Les options des blocs

Chaque bloc possède une page de configuration.

-> Cliquer sur le lien Configurer en face du bloc Contenus récents

-> Modifiez les paramètres du bloc comme sur l'illustration suivante

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.

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 inclus, mais node seul n'est pas inclus)

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 s'ils veulent ou non afficher ce bloc dans leurs préférences.

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

II-B-1-d - Ajouter un bloc personnalisé

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

-> Menu Structure - lien Blocs.

-> Lien + Ajouter un bloc.

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

-> Description du bloc : Bienvenue.

-> Titre du bloc : Bienvenue sur notre site.

-> Corps du bloc : Bonjour, n'hésitez pas à créer un compte pour déposer de nouvelles recettes.

-> Bartik : choisir Première barre latérale

Page de création d'un bloc

-> Cliquez sur Enregistrer le bloc, vous avez alors un nouveau bloc Bienvenue disponible.

-> Allez en page d'accueil

Le bloc de Bienvenue nouvellement créé

II-B-2 - Menu : les menus

II-B-2-a - Menus installés par défaut

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

-> Menu Structure - lien Menus

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

II-B-2-b - 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. Les menus.

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

II-B-2-c - Création d'un nouveau menu

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

-> Menu Structure - lien Menus.

-> Lien + Ajouter un menu.

-> Titre : Liens Divers.

-> Description : Liste de liens divers.

-> Bouton Enregistrer.

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

-> Lien + Ajouter un lien.

-> Titre du lien dans le menu : Drupal en français.

-> Chemin : http://www.drupalfr.org.

-> Description : Le site web des Drupaliens francophones.

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

Le title des liens

-> Le Lien parent permet de choisir à quel menu appartient le lien. Ici, le menu <Liens Divers> est choisi automatiquement.

Ajout d'un item à un menu

-> Bouton Enregistrer.

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

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

Les cinq liens du menu Liens divers

II-B-2-d - 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).

-> Menu Structure - lien Blocs.

-> À la section Désactivé, mettre le bloc Liens divers en Première barre latérale.

-> Allez en page d'accueil pour voir le bloc.

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

Menu contextuel d'un bloc de menu

II-B-2-e - Hiérarchiser un menu

-> Retournez sur la liste des liens du menu (menu contextuel - Lister les liens).

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.

-> Déplacer les liens Risotto et Salade de penne vers la droite

Hiérarchisation des liens du menu

-> Bouton Enregistrer la configuration

Liste des plats principaux repliés

-> Cliquez sur Plats principaux, le menu affiche alors les liens enfants.

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

-> Retournez sur la page Lister les liens du menu.

-> Cliquez sur le lien modifier du lien Plats principaux.

-> Cochez l'option Afficher déplié

Options des menus

-> Bouton Enregistrer

Menu hiérarchisé déplié

L'option Activé permet de ne pas afficher un lien tout en le gardant dans le menu.

II-B-3 - 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.

II-B-3-a - 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.

-> Menu Personnes

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.

Vous pouvez ajouter un nouvel utilisateur en tant qu'administrateur en cliquant sur le lien + Ajouter un utilisateur.

Remplissez alors le formulaire :

-> Nom d'utilisateur : Utilisateur1 ;

-> Adresse e-mail : utilisateur1@monadresse.com ;

-> Mot de passe : atelierdrupal, par exemple.

-> Laissez le Statut Actif.

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

-> Bouton Créer un nouveau compte.

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

Liste des utilisateurs

II-B-3-b - 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.

-> Menu Configuration - lien Paramètres de compte.

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. Seuls 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.

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.

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. Field UI : Types de Courriels).

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.

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).

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).

II-B-3-c - 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.

Un utilisateur est affecté à un rôle qui possède des droits

Création d'un rôle

-> Menu Personnes - onglet Droits.

-> Bouton en haut à droite Rôles.

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.

-> Ajoutez-en un nouveau : Rédacteur de recettes

Liste des rôles

-> Bouton Ajouter un rôle.

Attribution d'un rôle à un utilisateur

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

-> Menu Personnes.

-> Choisissez le lien modifier de la ligne Utilisateur1.

-> Cochez la case Rédacteur de recettes de la section Rôles.

-> Cliquez sur le bouton Enregistrer.

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

II-B-3-d - Droits d'accès en fonction des rôles

-> Menu Personnes - onglet Droits.

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éfinit 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.

-> À la section Node, dans la colonne Rédacteur de recettes, cochez les lignes Article : Créer un nouveau contenu, Article : Éditer son contenu et Article : Supprimer son contenu

Droits d'accès selon les rôles

-> Bouton Enregistrer les droits d'accès.

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

-> déconnectez-vous en cliquant sur le bouton Se déconnecter dans le menu ;

connectez-vous avec l'utilisateur utilisateur1 :

-> Nom d'utilisateur : utilisateur1,

-> Mot de passe : atelierdrupal,

-> Cliquez sur Se connecter,

-> Vérifiez que, dans le bloc Navigation (Sidebar First), vous avez accès à Ajouter du contenu - Article

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

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

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).

II-B-3-e - Exercice : création d'un bloc pour un rôle spécifique

- Créez un utilisateur « utilisateur2 » qui n'a pas de rôle spécifique.

- Créez un bloc personnalisé qui ne s'affichera que pour le rôle Utilisateurs identifiés

Le bloc à créer

- Le bloc s'affiche-t-il pour « utilisateur1 » ? Pourquoi ?

Corrigé

Création de utilisateur2

-> Menu Personnes.

-> Lien + Ajouter un utilisateur.

Remplissez alors le formulaire :

-> Nom d'utilisateur : Utilisateur2 ;

-> Adresse e-mail : utilisateur2@monadresse.com ;

-> Mot de passe : atelierdrupal, par exemple ;

-> Bouton Créer un nouveau compte.

Création du bloc

-> Menu Structure - lien Blocs.

-> Lien + Ajouter un bloc.

-> Description du bloc : Bloc utilisateur identifié.

-> Titre du bloc : Bienvenue, utilisateur identifié

-> Corps du bloc : Merci de vous être connecté à ce site avec votre compte !

-> Bartik : choisir Première barre latérale.

-> À la section Paramètres de visibilité, dans l'onglet Rôles, cochez la case utilisateur identifié.

Paramètre de visibilité du bloc

-> Bouton Enregistrer le bloc.

-> Connectez-vous avec utilisateur2, le bloc doit apparaître.

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.

II-B-4 - 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.

II-B-4-a - Installation

- Le module est installé par défaut et activé dans Drupal.

II-B-4-b - Utilisation

-> Éditez l'article du Risotto.

-> En bas de la page, sélectionnez l'onglet horizontal Paramètres du chemin d'URL.

-> Dans la zone Alias d'URL, entrez risotto.

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

-> Bouton Enregistrer.

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

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

II-B-4-c - Administration

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

-> Menu Configuration - lien Alias d'URL (ou lien Configurer du module Path).

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.

-> Cliquez sur + Ajouter un alias.

-> Dans la zone Chemin système existant, entrez taxonomy/term/3.

-> Dans la zone Alias de chemin, entrez riz.

Ajout d'un alias

-> Bouton Enregistrer.

-> Affichez la page du Risotto et cliquez sur le Tag Riz.

Le nouvel alias créé

Chap Pathauto : Automatisez la création de vos alias.

II-C - 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).

II-C-1 - Les types de contenu

Rendez-vous sur la page d'ajout de contenus :

-> Menu Contenu.

-> Lien + Ajouter du contenu.

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

- vous pouvez ajouter une illustration et des Tags à un article ;

- le résumé d'une page ne s'affichera pas par défaut en page d'accueil ;

- une page n'accepte pas de commentaires.

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) :

- article ;

- page ;

- sondage ;

- etc. ;

- un commentaire n'est pas une node mais est attaché à une node ;

- une page d'administration n'est pas une node.

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.
Cela ne veut pas dire que tout est une node dans Drupal :

Le chap. Field UI : Types de contenus personnalisés montre comment créer vos propres types de contenu en utilisant l'interface de Drupal.

II-C-1-a - Options des nodes

-> Éditez un contenu de type article (par exemple Salade de penne).

-> Placez-vous tout en bas de la page.

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.
Lors de l'affichage de la node, l'onglet Révisions permet de revenir à une ancienne révision.

Paramètres du chemin d'URL

Permet de modifier l'URL de l'article (chap. 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.

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.

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

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

II-C-1-b - Options des types de contenus

Menu Structure - lien Type de contenu

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.

-> Cliquez sur le lien modifier du type de contenu Article.

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, Épinglé 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.

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

II-C-2 - Filter : formatez vos textes

II-C-2-a - 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.

-> Rendez-vous sur la page de la Salade de penne, éditez-la en cliquant sur l'onglet Modifier.

Des balises HTML peuvent être utilisées pour la présentation de votre recette.

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>)

-> Mettez la ligne du vin conseillé en gras grâce à la balise <strong>

Une balise HTML dans le corps du texte

-> Cliquez sur le bouton Enregistrer et voyez le résultat

Mise en gras d'une ligne

-> Éditez de nouveau la page.

-> Dans la liste Format de texte, en dessous du corps, choisissez Plain text en remplacement de Filtered HTML

Modification du format de texte

-> Bouton Enregistrer

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 trois 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

II-C-2-b - 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 :

- activez le module PHP Filter (module présent par défaut dans Drupal) ;

- créez un article qui affiche dans son contenu la date et l'heure courante.

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

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

-> Menu Modules.

-> Cochez la case PHP filter.

-> Bouton Enregistrer la configuration.

Création de l'article

-> Menu Contenu - lien + Ajouter du contenu.

-> Choisir Article.

-> Titre : Affichage de la date et l'heure.

-> Corps :

Bonjour !

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

- Format de texte : PHP Code

Du code PHP dans le corps de l'article

-> Bouton Enregistrer.

II-C-2-c - 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 :

-> Menu Configuration - lien Format de textes

Liste des formats de texte disponibles

-> Lien configurer du format Full HTML

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 remplace 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.

-> Cochez le filtre interpréteur PHP qui a été ajouté lors de l'activation du module PHP Filter.

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é.

-> Bouton Enregistrer la configuration.

-> Rechargez la page Affichage de la date et l'heure

Full HTML interprète les balises PHP

II-C-2-d - 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.

-> Menu Configuration - lien Format de textes.

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

Accès à la page de configuration de Filter

-> Lien configurer du format Full HTML.

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.

-> Menu Personnes - Onglet Droits d'accès

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

Pour la suite de ce livre, le format de texte PHP Filter sera désactivé.

II-C-3 - 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.

-> Téléchargez et activez le module Video filter (http://drupal.org/project/video_filter- Version utilisée pour ce livre 7.x-3.0-beta2).

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

-> Menu Configuration - lien Formats de texte.

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

-> Lien configurer du format Full HTML.

-> Dans la liste Filtres activés, cochez Video Filter.

-> Dans la liste Filtrer l'ordre de traitement, placez Video Filter au-dessus de Convertir les URL en liens.

Page de configuration d'un format de texte

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.

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

-> Bouton Enregistrer la configuration.

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

-> Allez sur la page d'une vidéo.

-> Copiez son URL.

-> Modifiez l'article Salade de Penne.

-> À la fin du corps ajoutez [video:URL de votre vidéo]

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

-> Choisissez le format de texte Full HTML.

Ajout d'un lien vers une vidéo

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.

-> Bouton Enregistrer

Le contenu intègre une vidéo !

II-C-4 - 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

II-C-4-a - 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.

-> Téléchargez et activez le module Wysiwyg (http://drupal.org/project/wysiwyg - Version utilisée pour ce livre 7.x-2.0).

-> Lien Configurer du module ou menu Configuration - lien Profils wysiwyg.

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.

II-C-4-b - 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.

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

-> Créez le répertoire /sites/all/libraries dans votre répertoire Drupal. Chaque éditeur y possédera un sous-répertoire.

-> Cliquez sur le lien Télécharger.

-> Téléchargez le fichier zip sur le site de l'éditeur (version utilisée pour ce livre openwysiwyg_v1.4.7.zip).

-> Extrayez le répertoire dans /sites/all/libraries.

-> Renommez-le en openwysiwyg (sans numéro de version).

-> Rechargez la page de configuration de Wysiwyg (lien Configuration - Menu Profils wysiwyg).

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.

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.

II-C-4-c - 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.

-> Menu Configuration - lien Formats de texte.

-> Lien + Ajouter un format de texte.

-> Nom : openWysiwyg.

-> Ne cochez aucun filtre pour que openWysiwyg puisse utiliser toutes les balises HTML

Le nouveau format d'entrée

-> Bouton Enregistrer la configuration.

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

-> Menu Configuration - lien Profils wysiwyg.

-> Choisissez l'éditeur openWysiwyg pour le Format de texte openWysiwyg.

-> Bouton Enregistrer.

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

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

-> Lien Modifier.

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 :

-> dépliez la section Boutons et plugins ;

-> cochez l'ensemble des cases.

Boutons disponibles de openWysiwyg

-> Bouton Enregistrer en bas de page.

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

-> éditez le contenu de la Salade de penne ;

-> choisissez le format d'entrée openWysiwyg.

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

-> Mettez en forme la recette

La zone de texte et openWysiwyg

-> Bouton Enregistrer

Le texte mis en forme

N'oubliez pas que le format de texte créé est très permissif, autorisez seulement des utilisateurs de confiance à l'utiliser.

II-D - 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 :

- tags (taxonomie) ;

- corps (texte) ;

- image (fichier).

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).

II-D-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é.

II-D-1-a - 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.

-> Menu Structure - lien Types de contenu

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

Deux éléments peuvent être modifiés graphiquement par l'administrateur Drupal :

-> l'aspect final des champs pour le visiteur du site (taille des images, longueur du résumé sur la page d'accueil, affichage d'une description pour les tags, etc.), ceci se fait par le lien gérer l'affichage ;

-> le formulaire de saisie des champs que le rédacteur de contenu utilisera (formulaire pour ajouter une zone de texte, une image, des tags, etc.), ceci se fait par le lien gérer les champs.

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

-> Lien Gérer les champs du type Article

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 :

Étiquette

C'est le nom du champ tel qu'il sera affiché à l'écran pour le visiteur et le rédacteur. La croix précédant ces étiquettes permet 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.

-> Menu Structure - lien Types de contenu.

-> Lien Gérer l'affichage du type Article.

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édant cette étiquette permet de réordonner l'affichage des champs.

Étiquette

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 jour-mois-année, pour un numérique, le nombre de chiffres après la virgule, pour une image sa taille, etc.

-> Pour modifier le format de l'image, cliquez sur le bouton engrenage (configuration) à droite de la ligne Photo de la recette.

-> Dans la liste Style d'image, choisissez medium.

Chap. Image : créez des styles d'image personnalisés.

-> Dans la liste Lier l'image à, choisissez Fichier :

- 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.

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

Changement du format de l'image

-> Bouton Mettre à jour.

-> Bouton Enregistrer en bas de la page.

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.

-> Menu Structure - lien Types de contenu.

-> Lien Gérer l'affichage du type Article

Les contextes d'affichage d'un article

-> Cliquez sur le mode d'affichage Résumé.

-> Dans la colonne Format, choisissez -Caché- pour le champ Photo de la recette

Photo de la recette est maintenant caché

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

-> Bouton Enregistrer.

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

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

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

-> Menu Structure - lien Types de contenu.

-> Lien Gérer les champs du type Article.

-> Cliquez sur le lien Modifier du champ Image.

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

Section commune à tous les champs

Modifiez les paramètres comme ceci :

-> Étiquette : photo de la recette ;

-> Champ requis : si coché, le champ est obligatoire ;

-> Texte d'aide : téléchargez une image pour l'inclure dans cette recette.

Paramètres du fichier image

-> Extensions de fichier autorisées : png, gif, jpg, jpeg, bmp ;

-> Répertoire du fichier : indiquez ici un sous-répertoire de votre installation où les images seront transférées. Pour field/image, les images seront transférées dans drupal/sites/default/files/field/images.

Paramètre de l'image

-> Résolution maximale de l'image : 1280 x 960 ;

-> Résolution minimale de l'image : 320 x 200 ;

-> Taille maximale du transfert : peut être limitée par la configuration du serveur.

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.

-> Activer le champ Alt : cochée (propose un champ Alt quand on upload une image) ;

-> Activer le champ Titre : cochée (propose un champ Alt quand on upload une image) ;

-> Aperçu du style d'image : Medium (taille de l'aperçu dans le formulaire de contribution).

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

-> Cliquez sur Enregistrer les paramètres ;

-> Créez un nouvel article pour constater les changements

Nouvelles directives du formulaire de contribution

Les champs Alt et Titre et l'aperçu en taille medium

II-D-1-b - Exercice : modification du champ 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 :

-> Libellé : description de la recette ;

-> Valeur par défaut : entrez ici le contenu de votre recette

Résultat attendu

Corrigé

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

-> Menu Structure - lien Types de contenu.

-> Lien gérer l'affichage du type Article.

-> Bouton Résumé (mode d'affichage).

-> Pour le champ Body, cliquez sur le bouton de configuration en bout de ligne.

-> Modifiez la Longueur de coupe à 100

Modification de la longueur du résumé

-> Bouton Mettre à jour.

-> Bouton Enregistrer.

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

Modifier le formulaire

-> Menu Structure - lien Types de contenu.

-> Lien gérer les champs du type Article.

-> Lien modifier du champ Body.

-> Étiquette : description de la recette.

-> Valeur par défaut : entrez ici le contenu de votre recette

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

-> Bouton Enregistrer les paramètres.

II-D-1-c - 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 :

-> Menu Structure - lien Types de contenu ;

-> Lien Gérer l'affichage du type Article ;

-> Dans la colonne Widget, cliquez sur le lien Widget d'autocomplétion de terme (étiquetage) de la ligne Tags

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é.

II-D-2 - 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 :

- présentation de la recette (texte) ;

- temps de préparation (numérique) ;

- ingrédients (texte) ;

- prix (numérique) ;

- étapes de la recette (texte) ;

- photo (image) ;

- email du rédacteur (e-mail).

- 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).

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 ?

II-D-2-a - Création du type de contenu recette

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

-> menu Structure - lien Types de contenu ;

-> lien + Ajouter un type de contenu.

Le formulaire qui permet de gérer les options d'un type de contenu a été détaillé au chap. Options des nodes.

-> Nom : Recette.

-> Description : Ajouter une recette à ce site.

-> Libellé du champ titre : Titre de la recette

Paramètres du type de contenu

-> Bouton Enregistrer le type de contenu.

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

-> Cliquez sur le lien Gérer les champs du type de contenu Recette.

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 :

-> len modifier du champ Body ;

-> Étiquette : présentation de la recette ;

-> Texte d'aide : texte d'introduction à la recette ;

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.

-> bouton Enregistrer les paramètres.

II-D-2-b - 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 :

-> Étiquette : Temps de préparation ;

-> Nom du champ : temps_preparation (en minuscule, sans espace) ;

-> Type de données à stocker : Entier ;

-> Élément du formulaire pour l'édition des données : Champ texte ;

Ajout d'un nouveau champ à un type de contenu

-> Bouton Enregistrer ;

-> Bouton Enregistrer les paramètres du champ.

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

-> Texte d'aide : Temps estimé pour la confection de la recette.

-> Minimum : 0.

-> Suffixe : minutes.

-> Bouton Enregistrer.

Le champ est ajouté à la liste.

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

Étiquette Au-dessus

Étiquette sur la même ligne

-> Onglet Gérer l'affichage.

-> Colonne Étiquette : Sur la même ligne.

-> Bouton Enregistrer.

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

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).

-> Menu Contenu - lien + Ajouter du contenu.

-> Type Recette.

-> Ajoutez une recette comme sur la copie d'écran suivante :

Formulaire d'ajout d'un contenu de type recette

-> Bouton Enregistrer.

Affichage d'une recette sur le site

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

II-D-2-c - 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.

-> Menu Structure - lien Types de contenu.

-> Lien gérer les champs du type Recette.

-> Étiquette : Ingrédients.

-> Nom du champ : ingredients.

-> Type de données à stocker : Texte.

-> Élément du formulaire pour l'édition des données : Champ texte.

-> Bouton Enregistrer.

-> Taille maximale : 255 (nombre de caractères maximum du champ).

-> Bouton Enregistrer les paramètres du champ.

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

-> Taille du champ texte : 90 (taille de l'élément zone de texte).

-> Texte d'aide : Entrez un élément par ligne.

-> Nombre de valeurs : Illimité.

-> Bouton Enregistrer les paramètres.

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

Zone de texte avec nombre de valeurs illimité

Vous pourrez ensuite, dans votre gabarit de thème, mettre cette liste en forme.

II-D-2-d - Exercice : ajout d'un champ numérique (prix)

- Ajoutez un champ permettant aux rédacteurs de saisir le prix par personne de leur recette.

- 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.

Affichage du champ prix par personne

Corrigé

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

-> Menu Structure - lien Types de contenu.

-> Lien gérer les champs du type Recette.

-> Étiquette : Prix.

-> Nom du champ : prix.

-> Type de données à stocker : Réel (Float).

-> Élément du formulaire pour l'édition des données : Champ texte.

-> Bouton Enregistrer.

-> Bouton Enregistrer les paramètres du champ.

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

-> Étiquette : Prix par personne.

-> Texte d'aide : Entrez le prix estimé par personne.

-> Suffixe : ?

-> Bouton Enregistrer les paramètres.

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

-> Onglet Gérer l'affichage, bouton Accroche.

-> Étiquette : Sur la même ligne.

-> Format : Par défaut.

-> Bouton Enregistrer.

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

Pour réorganiser les champs :

-> onglet Gérer les champs ;

-> déplacer le champ Prix par personne en dessous du Temps de préparation ;

-> bouton Enregistrer.

Pour modifier le rendu :

-> onglet Gérer l'affichage ;

-> Étiquette : Sur la même ligne ;

-> Format : Par défaut

Affichage du résumé

-> Bouton Enregistrer.

II-D-2-e - Exercice : ajout d'un champ zone de texte multiple (étapes)

- Ajouter un champ permettant aux rédacteurs de saisir les différentes étapes de la recette comme sur les copies d'écran suivantes :

Formulaire d'ajout des étapes

Les différentes étapes dans la node

Corrigé

-> Menu Structure - lien Types de contenu.

-> Lien gérer les champs du type Recette.

-> Étiquette : Etapes.

-> Nom du champ : etapes.

-> Type de données à stocker : Texte long.

-> Élément du formulaire pour l'édition des données : Zone de texte (plusieurs lignes).

-> Bouton Enregistrer.

-> Bouton Enregistrer les paramètres du champ.

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

-> Champ requis : coché.

-> Rangées : 3 (nombre de lignes dans le formulaire).

-> Texte d'aide : Entrez chaque étape de votre recette.

-> Traitement du texte : Texte filtré.

-> Nombre de valeurs : Illimité.

-> Bouton Enregistrer les paramètres.

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

-> Lien modifier du champ Etapes.

-> À la section Valeur par défaut, choisir Filtered HTML

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

-> Bouton Enregistrer les paramètres.

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

II-D-2-f - 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.

-> Menu Structure - lien Types de contenu.

-> Lien gérer les champs du type Recette.

À la section Ajouter un champ existant :

-> dans la liste Champ à partager, sélectionnez le champ Image : field_image (Photo de la recette).

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

-> Étiquette : Photo de la recette

Ajout d'un champ existant

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

-> Bouton Enregistrer.

-> Enregistrer les paramètres.

Les paramètres d'affichage d'un champ peuvent être différents d'un type de contenu à un autre.

II-D-2-g - 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.

- Téléchargez et activez le module Email Field (http://drupal.org/project/email) - Version utilisée pour ce livre 7.x-1.0-beta1.

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

-> menu Structure - lien Types de contenu ;

-> lien gérer les champs du type Recette ;

-> Étiquette : Email ;

-> Nom du champ : email ;

-> Type de données à stocker : Email

Le nouveau type de données Email

-> Élément du formulaire pour l'édition des données : Champ texte ;

-> bouton Enregistrer ;

-> bouton Enregistrer les paramètres du champ.

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

-> Texte d'aide : Entrez votre email si vous souhaitez être contacté par vos lecteurs.

-> Bouton Enregistrer les paramètres.

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

-> onglet Gérer l'affichage

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

-> Choisissez ici Lien e-mail par défaut.

II-D-3 - 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 :

- tags : reprise du champ Tags existant dans le type Article ;

- difficulté : liste déroulante permettant de choisir le niveau de difficulté de la recette ;

- provenance : liste déroulante hiérarchisée permettant de choisir la région ou le pays d'origine de la recette.

II-D-3-a - 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 :

-> menu Structure - lien Taxonomie ;

-> cliquez sur le lien Lister les termes du vocabulaire Étiquettes (Tags).

La liste de tous les tags que vous avez entrés 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

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 :

-> menu Structure - lien Types de contenu ;

-> lien gérer les champs du type 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 :

-> Étiquette : Tags ;

-> Champ à partager : référence à un terme : field_tags (Étiquettes) ;

-> Élément du formulaire pour l'édition des données : Widget d'autocomplétion de terme.

Les autres Widgets (éléments de formulaires) sont décrits au chap. Les widgets du champ Tags.

Ajout d'un champ existant

-> bouton Enregistrer ;

-> bouton Enregistrer les paramètres.

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

Saisie de tags pour les recettes

Comme pour les champs classiques, un vocabulaire peut être utilisé pour plusieurs types de contenu.

II-D-3-b - 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

-> Menu Structure - lien Taxonomie.

-> Lien + Ajouter un vocabulaire.

-> Nom : Difficulté.

-> Description : Indique la difficulté de réalisation de la recette.

-> Bouton Enregistrer.

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

-> lien ajouter des termes du vocabulaire Difficulté ;

-> Nom : Très facile ;

-> Bouton Enregistrer.

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

-> Allez sur l'onglet Lister.

-> Réorganisez les termes dans l'ordre Très facile, Facile, Moyen, Difficile ou Très difficile

Organisation des termes du vocabulaire difficulté

-> Bouton Enregistrer.

Ajoutez ce vocabulaire au type de contenu Recette :

-> menu Structure - lien Types de contenu ;

-> lien gérer les champs du type Recette ;

-> Étiquette : Difficulté ;

-> Nom du champ : difficulte ;

-> Type de données à stocker : Référence à un terme ;

-> Élément du formulaire pour l'édition des données : Liste de sélection ;

-> bouton Enregistrer ;

Choix du vocabulaire pour lister les termes

-> Vocabulaire : Difficulté ;

-> Bouton Enregistrer les paramètres du champ ;

-> Bouton Enregistrer les paramètres.

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

II-D-3-c - 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 :

-> menu Structure - lien Taxonomie ;

-> lien + Ajouter un vocabulaire ;

-> Nom : Provenance ;

-> Description : Provenance géographique de la recette ;

-> Bouton Enregistrer.

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

-> Lien ajouter des termes du vocabulaire Provenance ;

-> Nom : Asie ;

-> bouton Enregistrer.

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

-> Aller sur l'onglet Lister pour réorganiser les termes.

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

Organisation des termes de Provenance

-> Bouton Enregistrer.

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.

-> Menu Structure - lien Types de contenu.

-> Lien gérer les champs du type Recette.

-> Étiquette : Provenance.

-> Nom du champ : provenance.

-> Type de données à stocker : Référence à un terme.

-> Élément du formulaire pour l'édition des données : Liste de sélection.

-> Bouton Enregistrer.

-> Vocabulaire : Provenance.

-> Bouton Enregistrer les paramètres du champ.

-> Bouton Enregistrer les paramètres.

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

Choix de la provenance de la recette

II-D-4 - 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 :

- ajout d'un champ Sexe (bouton radio) pour les utilisateurs ;

- ajout d'un champ Type de commentaire (terme de taxonomie) pour les commentaires ;

- ajout d'un champ (Image) pour les termes de Taxonomie du vocabulaire difficulté.

II-D-4-a - Ajout d'un champ pour les utilisateurs

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

- Nom d'utilisateur ;

- Adresse e-mail ;

- Mot de passe.

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

-> Menu Configuration - lien Paramètres de comptes.

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

-> Onglet Gérer les champs.

-> Étiquette : Sexe.

-> Nom du champ : sexe.

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.

-> Type de données à stocker : Liste (entier).

-> Élément du formulaire pour l'édition des données : Cases à cocher/boutons radio.

Ajout d'un champ boutons radio

-> Bouton Enregistrer.

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

-> Bouton Enregistrer les paramètres du champ.

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

-> Cochez la case Champ Requis.

-> Choisissez Femme comme Valeur par défaut

Paramètres du champ

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

-> Bouton Enregistrer les paramètres.

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

-> Lien Bonjour Admin (en haut de la page) ;

-> Onglet Modifier ;

-> En bas, section Sexe

Nouveau champ du profil

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

-> Bouton Enregistrer ;

-> Onglet Voir

Un profil utilisateur et son nouveau champ.

II-D-4-b - 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

-> Menu Structure - lien Taxonomie.

-> Lien modifier le vocabulaire du vocabulaire Difficulté.

-> Onglet Gérer les champs.

-> Étiquette : Illustration.

-> Nom du champ : illustration.

-> Type de données à stocker : Image

Ajout d'un champ à un Vocabulaire

-> Bouton Enregistrer.

-> Bouton Enregistrer les paramètres du champ.

-> Bouton Enregistrer les paramètres.

-> Retournez ensuite sur l'onglet Lister et éditez-les un à un en ajoutant les illustrations toque1.png, toque2.png, etc.

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 affichée. Il faut donc modifier l'affichage des termes de taxonomie.

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.

Pour afficher les images de taxonomie dans les pages de contenu, il faut utiliser des vues ou des fonctions de thème.

II-D-4-c - 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

- Créer un vocabulaire de taxonomie Type de commentaire contenant les termes Question, Réponse à une question, Suggestion pour la recette, Autres.

- Ajouter un champ aux commentaires du type de contenu Recette (et uniquement celui-là) en les mettant en lien avec un terme du vocabulaire Type de commentaire.

- Créer deux commentaires en utilisant ces champs.

Corrigé

Créer un vocabulaire

-> Menu Structure - lien Taxonomie.

-> Lien + Ajouter un vocabulaire.

-> Nom : Type de commentaire.

-> Ajouter les termes : Autres, Question, Réponse à une question, Suggestion pour la recette.

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 :

-> menu Structure - lien type de contenu ;

-> lien Modifier du type Recette.

Gestion des champs des commentaires liés à une recette

-> onglet Comment Fields ;

-> Étiquette : Type de commentaire ;

-> Nom du champ : type_commentaire ;

-> Type de données à stocker : Référence à un terme ;

-> Élément du formulaire pour l'édition des données : Liste de sélection ;

Ajout du champ au commentaire

-> Bouton Enregistrer ;

-> Vocabulaire Type de commentaire ;

-> Bouton Enregistrer les paramètres du champ ;

-> Cocher Champ requis ;

-> Bouton Enregistrer les paramètres.

Créer deux commentaires en utilisant ces champs

-> Afficher une recette (par exemple celle des Gnocchis).

-> Créer un commentaire en choisissant son type

Ajout d'un commentaire et choix du type

II-D-4-d - 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.

-> Menu Rapports - lien Liste de champs

Page de liste des champs

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

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.

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.

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 URL simplifiées comme indiqué au chap. Configuration de Apache.

III-A - Configuration de Apache - PHP - MySQL

III-A-1 - Configuration de Apache

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.

III-A-1-a - Les URL simplifiées

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

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

Dans cet exemple, node/2 sont les arguments qui sont envoyés à Drupal. Si les URL 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 URL simplifiées pour plusieurs raisons :

- certains modules ne fonctionnent pas sans les URL simplifiées ;

- cela facilite la lecture pour les utilisateurs ;

- certains moteurs de recherche indexent mieux les sites avec URL simplifiées.

Activer le mod_rewrite d'Apache

Pour pouvoir activer les URL simplifiées, il faut que le module mod_rewrite d'Apache soit aussi activé.

-> Sous Windows avec WampServer faites un clic gauche sur l'icône de notification puis aller dans Apache - Modules Apache - rewrite_module.

Activer le mod_rewrite avec WampServer

-> Sous Linux Ubuntu, activez le mod_rewrite grâce à la ligne de commande

sudo a2enmod rewrite

-> Puis modifiez le fichier de configuration d'Apache situé dans le répertoire de Drupal :

sudo gedit /etc/apache2/apache2.conf

-> Ajoutez à la fin de ce fichier les lignes suivantes :

<Directory /var/www/drupal>

AllowOverride all

</Directory>

-> Redémarrez Apache

sudo /etc/init.d/apache2 restart

Activer les URL simplifiées dans Drupal

-> Ensuite, dans Drupal, menu Configuration - lien URL simplifiées (section Recherche et Metadonnées).

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.

-> Cliquez sur Activé.

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

Les URL simplifiées peuvent être activées

-> Cliquez sur le bouton Enregistrer la configuration.

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

Chap. Path : L'Alias d'URL

Chap. Pathauto : Automatisez la création de vos Alias

III-A-1-b - 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

-> Avec WampServer, faites un clic gauche sur l'icône de notification puis choisir Apache - httpd.conf.

-> Recherchez la ligne :

#Include conf/extra/httpd-vhosts.conf

-> Décommentez-la (enlevez le # devant).

-> Sauvegardez le fichier.

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

-> Ajoutez les lignes suivantes au fichier C:\wamp\bin\apache\apache2.2.17\conf\extra\httpd-vhosts.conf

<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.

-> N'oubliez pas de redémarrer Apache (clic gauche sur l'icône de notification et Redémarrer les services).

Sous Linux

-> Créez un nouveau fichier avec la commande :

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

-> Insérez-y les lignes suivantes :

<VirtualHost *:80>
DocumentRoot /var/www/drupal
ServerName drupal.tld
</VirtualHost>

-> Redémarrez Apache :

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

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.

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

III-A-2 - 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 :

-> Cliquez avec le bouton gauche sur l'icône de notification de WampServer puis allez dans Php - php.ini pour éditer php.ini.

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

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. Tableau de bord).

III-A-3 - Configuration de MySQL

Comme pour le serveur web Apache, Drupal peut fonctionner avec différents serveurs de bases 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.

III-A-3-a - 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

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' => '',
),
),
);

Il est possible de définir des configurations de bases 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 bases de données, le serveur de bases de données peut-être différent du serveur hébergeant Drupal.

'port'

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

'driver'

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

'prefix'

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

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

Options avancées de l'installateur

III-A-3-b - 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. 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

Cré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

Modification 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.

Ajout des permissions d'un utilisateur pour une base de données

-> Bouton Exécuter.

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' => '',
),
),
);

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.

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.

Liste des bases de MySQL

III-A-4 - 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é.

III-A-4-a - 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 simplifiées, il faut que le module mod_rewrite soit ou puisse être activé sur Apache.

Drupal 7 fonctionnera avec Apache 1.3 minimum.

III-A-4-b - 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 32 MB, mais, selon les modules activés et l'activité de votre site, il sera nécessaire d'augmenter cette valeur.

Les bibliothèques 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.

III-A-4-c - Base de données

Drupal peut utiliser les logiciels de bases 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.

III-A-5 - Configuration du serveur pour l'envoi de mails

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.).

III-A-5-a - 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. Test de l'installation).

III-A-5-b - 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

-> Éditez 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.

III-A-5-c - 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).

-> Éditez 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

III-A-5-d - Test de l'installation

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

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

III-B - 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 cœur de Drupal), mais également certains fichiers liés au contenu (images des nodes).

III-B-1 - Sauvegarde/Restauration de l'arborescence de fichiers

III-B-1-a - 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.

Vous pouvez utiliser un gestionnaire d'archives (zip ou tar.gz) pour n'avoir qu'un seul fichier compressé pour l'arborescence.

III-B-1-b - En ligne de commande avec Linux

Il est bien souvent nécessaire d'automatiser la sauvegarde pour 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

La commande tar possède une multitude d'options permettant de l'adapter à vos besoins. N'hésitez pas à lire sa page de manuel.

III-B-2 - Sauvegarde/Restauration de la base de données

III-B-2-a - 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

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

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érifiez 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.

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

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.

III-B-2-b - 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 une autre base (drupal-test) :

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

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

III-B-3 - Backup and Migrate : sauvegardez votre base de données

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.

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. 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.

III-B-3-a - 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.

III-B-3-b - 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.

III-B-3-c - 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

III-B-3-d - 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 utilisateur en sélectionnant la table users.

Création d'un nouveau profil

III-B-3-e - Onglet Schedules

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

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. 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

III-B-4 - 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ées. 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 Éditer 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 Éditer les composants, choisissez Taxonomie ;

-> cochez Difficulté et Provenance.

Et enfin le menu :

-> dans la liste Éditer les composants, choisissez Menus ;

-> cochez Liens divers

La fonctionnalité est complète

-> bouton Télécharger 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.

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 à jour 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écharger 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.

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.

III-B-5 - 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.

III-C - Outils d'administration

III-C-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.

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.

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 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.

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

- http://drupal.org/project/apc ;

- http://drupal.org/project/memcache.

Il existe de nombreux projets visant à créer du cache au niveau du serveur Apache.

III-C-2 - Update Status : mettre à jour Drupal

Le module Update Status vérifie régulièrement si votre installation (cœur de Drupal, modules installés et thèmes installés) possède de nouvelles versions disponibles sur drupal.org.

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.

III-C-2-a - 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.

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 !

III-C-2-b - Mise à jour du cœur 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 cœur 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 !

III-C-2-c - 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 à jour trouvées et si les modules installés, mais non activés doivent être vérifiés.

III-C-2-d - 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.

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';

III-C-3 - 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ées 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.

III-D - 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.

III-D-1 - Gestion des utilisateurs

La gestion des utilisateurs dans Drupal a été décrite au chap. 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.

III-D-1-a - La table users

La table users contient les données relatives aux utilisateurs.

Extrait de la table users

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

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ées des champs.

Dans cet exemple, il y a quatre 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.

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

III-D-1-b - 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 :

La table role

rid

name

1

anonymous user

2

authenticated user

3

administrator

4

rédacteur de recettes

Ici, il existe donc quatre rôles différents, le rôle numéro 3 est le rôle administrateur.

Extrait de la table role_permission

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

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

Les sché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"

III-D-1-c - 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.

Contenu de la table users_roles

uid

rid

2

4

3

3

3

4

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"

III-D-2 - Gestion des nodes

Une ligne est créée dans la table node pour chaque nouvelle node ajoutée au site.

III-D-2-a - 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

III-D-2-b - 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 à 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

III-D-3 - Gestion des champs

Le contenu d'une node dépend des champs qui composent le type de contenu (chap. Field UI : Types de contenus personnalisés).

III-D-3-a - 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'entité (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 tables 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 ;

Extrait du contenu de la table field_data_body

entity_type

bundle

entity_id

body_value

node

article

1

Voilà, c'est une version estivale de ma recette au

node

article

2

Risotto à 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

- 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

III-D-3-b - Cas d'un champ contenant plusieurs valeurs

Un champ peut contenir un nombre de valeurs illimité comme le champ ingrédients que vous avez créé pour le type Recettes.

Dans ce cas, le sché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

III-D-3-c - 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.

III-D-3-d - Paramètres des champs

Chap. 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é 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"

III-D-3-e - 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.

La table field_config_entity_type

etid

type

2

comment

1

node

3

taxonomy_term

III-D-3-f - 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.

III-D-3-g - 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.

Comme vu au chap. 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

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à.

IV-A - 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 trois recettes prises au hasard

Bloc d'information pour les rédacteurs 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 cinq recettes qui ont été ajoutées pour illustrer ce chapitre :

- Tatziki : http://1001recettes.blogspot.com/2006/05/retour-de-crte.html

- Tartare de Bœuf : http://1001recettes.blogspot.com/2009/07/un-carpaccio-qui-tourne-mal.html

- Poulet Korma : http://1001recettes.blogspot.fr/2008/02/une-journe-pimenter.html

- Gâteau101 % 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

IV-A-1 - Installation et découverte du module

IV-A-1-a - 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.

CTools est un module qui contient des fonctions PHP pour Drupal. Il facilite la vie des programmeurs.

Au moment de la rédaction de cet ouvrage, Views n'était pas encore traduit en français. Pour les copies d'écran, une traduction a été importée depuis http://localize.drupal.org/.

Pour pouvoir consulter la volumineuse aide de Views, il faut installer le module Advanced help.

IV-A-1-b - 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

Un bogue 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 en-tê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.

IV-A-1-c - Interface du module Views

Vous pouvez voir comment est construite cette vue en l'éditant.

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.). Cet 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éel

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.

IV-A-1-d - Modification de la vue Tracker

Vous allez maintenant modifier quelques 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'a 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.

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

Si vous cliquez sur le lien voir page de la vue Tracker, vous pourrez faire le constat que vos modifications n'ont pas été prises 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

IV-A-2 - 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.

IV-A-2-a - 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 cinq 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.

Pour ce premier exemple, vous n'allez pas utiliser les paramètres de cet assistant pour mieux comprendre les mécanismes de l'interface de Views.

-> Bouton Continuer & modifier

Aperçu de la vue après sa création

IV-A-2-b - Sélection des champs

Ajoutez deux champs à votre vue :

-> le champ Prix ;

-> le champ Photo sous forme de miniature (Thumbnail).

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.

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 dizaines d'options. Cette fenêtre permet de configurer l'affichage du champ.

-> Bouton Appliquer (tous les affichages)

La vue avec un deuxième champ

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 champ.

S'affiche alors la deuxième fenêtre popup de configuration du champ photo.

-> Étiquette : Photo.

-> Style d'image : Thumbnail.

-> Link image to : Contenu.

-> Bouton Appliquer (tous les affichages)

Aperçu en tableau avec image

Chap. 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).

N'oubliez pas d'enregistrer votre vue de temps à autre en cliquant sur le bouton Enregistrer situé en haut de la page.

La section CHAMPS de Views correspond à la clause SELECT d'une requête SQL.

Vous pouvez créer un raccourci vers la page /liste_des_recettes avec le module chap. Shortcuts : gérez la barre de raccourcis pour accéder rapidement au rendu de la vue.

IV-A-2-c - Critères de filtrage

La vue créée affiche toutes 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).

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 seules les recettes sont maintenant affichées.

La section CRITÈRES DE FILTRAGE de Views correspond à la clause WHERE d'une requête SQL.

IV-A-2-d - 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

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 colonnes désirées

Option de tri par en-tête de colonne

Tri par titre et prix possible

IV-A-2-e - 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 champ.

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

Modifier l'ordre des champs

-> Bouton Appliquer (tous les affichages).

IV-A-2-f - Relations

Lors du chap. 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

-> Étiquette : Difficulté.

-> Bouton Appliquer (tous les affichages).

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.

IV-A-2-g - Formulaires exposés

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.

-> Étiquette : 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.

-> Étiquette : Difficulté.

-> Bouton Appliquer (tous les affichages)

Aperçu du critère de tri exposé

Lorsque vous utilisez un style Tableau, vous pouvez permettre à l'utilisateur de trier le contenu en utilisant les en-têtes.

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 champ 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.

-> Étiquette : 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

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

IV-A-3 - 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

IV-A-3-a - 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

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.

IV-A-3-b - 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 block (supplanter) dans la liste en haut de page

Modification appliquée uniquement à l'affichage en cours

Remarquez que l'intitulé du bouton Appliquer (cet affichage) a 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.

Les champs dont la valeur a été supplantée pour l'affichage en cours sont notés en italiques.

Le champ format est supplanté, le champ titre ne l'est pas

Mise en forme modifiée pour le bloc

IV-A-3-c - 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 Ce 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 champ 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

IV-A-4 - Création d'un bloc d'infos 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

IV-A-4-a - 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.

IV-A-4-b - 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

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é

IV-A-4-c - 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 italiques. Pour cela, il faut l'inclure dans une balise <em> :

-> section PARAMÈTRES D'AFFICHAGE ;

-> cocher Personnaliser le code HTML du champ ;

-> Élément HTML : EM

Changement de la balise HTML d'un champ

-> bouton Appliquer (tous les affichages)

Le nouveau champ du bloc

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 champ

-> bouton Appliquer (tous les affichages)

Affichage du champ photo sous forme de texte

IV-A-4-d - 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.

-> 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).

IV-A-4-e - Exercice : ajouter le champ Auteur

Ajoutez un champ qui affiche le nom de l'utilisateur auteur de la recette :

Le nouveau champ 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 champ 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.

IV-A-4-f - 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)

Vous pouvez modifier l'affichage des vues chap. Le theming des vues dans les thèmes Drupal.

IV-B - 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 cœur de Drupal 7. Ensuite, vous apprendrez comment participer à l'effort de traduction du cœur de Drupal et des modules.

IV-B-1 - Locale : traduire l'interface de Drupal

Lors de l'installation de Drupal (chap. 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.

IV-B-1-a - 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és 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 française.

-> Cochez les cases Activé des lignes URL et Utilisateur

Paramétrage de détection de la langue par Drupal

-> Bouton Enregistrer les paramètres.

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.

IV-B-1-b - 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.

Vous pouvez accéder à cette page directement depuis l'adresse http://localize.drupal.org

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 espagnole, 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 trilingue !

IV-B-1-c - 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

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.

IV-B-1-d - 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 le 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

Il est possible qu'au moment où 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 quelle 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

Vous respectez la casse (majuscules - minuscules).

Si vous ne trouvez pas une chaîne grâce à cette interface, vérifiez 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

IV-B-1-e - Exercice : traduire les chaînes d'une vue

Pour exécuter cet exercice, vous allez utiliser la vue créée chap. 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

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. Conventions et finitions).

IV-B-2 - 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.

IV-B-2-a - 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.

IV-B-2-b - 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).

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

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

IV-B-2-c - 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

IV-B-2-d - 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.

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.

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 !

IV-B-3 - 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).

IV-B-3-a - 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 multilingue sont apparues. Par défaut, celle-ci est désactivée.

Les options multilingues par type de contenu

-> Choisissez Activé, avec traductions.

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.

IV-B-3-b - 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 espagnole.

-> Onglet Traduire

La traduction anglaise existe, manque la traduction espagnole

-> Lien ajouter une traduction de la ligne Spanish.

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.

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

IV-C - Administrer Drupal

IV-C-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.

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 cœur 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.

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 cours de personnalisation

IV-C-2 - 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.

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

Le module Administration menu Toolbar style propose les mêmes fonctionnalités, mais avec un thème se rapprochant plus de Toolbar.

Administration menu et le style Toolbar

IV-C-3 - 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 cœur de Drupal et est activé par défaut. Le désactiver supprimera la zone grisée.

Drupal 7 et le module Shortcuts désactivé

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.

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 où 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 : À 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'il préfère utiliser. Pour cela, il faut tout d'abord lui 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

IV-C-4 - 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é

IV-C-5 - 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 cœur 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 disponibles

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 champ image

Pour insérer facilement un token, cliquez d'abord dans la zone de texte où vous désirez l'insérer puis sur le lien du Token. Il n'y aura alors pas besoin de faire de copier/coller.

IV-C-6 - 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 commençant par UA-xxxxxx-x

Votre site est sous surveillance

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

Un rapport de Google Analytics

IV-C-7 - 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 recettes » ;

- le terme de taxonomie appartient au vocabulaire « Tags ».

Voici des exemples d'actions :

- envoyer un e‑mail ;

- afficher un message système ;

- ajouter un terme de taxonomie.

Via l'interface de Rules, il est donc possible de combiner tous ces éléments pour obtenir une fonctionnalité telle que « Après l'ajout d'un article de type Recette, envoyer un e‑mail à l'auteur de la node ».

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 modules 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.

Le module Trigger intégré au cœur de Drupal contient les mêmes fonctionnalités que Rules, mais tend à être moins utilisé.

IV-C-7-a - 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 s'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éée) ;

-> bouton Enregistrer.

Le but de cette règle est de ne rediriger que les utilisateurs ayant le rôle Rédacteur de recettes. 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.

IV-C-8 - 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 Nœud, choisir Après l'enregistrement d'un nouveau contenu.

-> Bouton Enregistrer.

L'action se déclenchera 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 Nœud, 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 Nœud, 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

IV-C-8-a - 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 Nœud, 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].

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.

Lisez le chap. 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 Nœud, 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 égal à 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 !

IV-D - Contenu

IV-D-1 - CKEditor : éditeur Wysiwyg complet

Successeur de FCKEditor, CKEditor est l'un des éditeurs Wysiwyg les plus utilisés 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érifier 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

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.

IV-D-2 - 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.

Le module installé chap. Wysiwyg : installer un éditeur Wysiwyg doit être installé et configuré.

-> 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

Si vous pensez utiliser vos images en petits formats, 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.

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

IV-D-3 - 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.

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 toutes les Recettes : [node:content-type:machine-name]/[node:title]

Alias automatique pour les contenus de type recette

La section Motifs de substitution est gérée par le module chap. 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.

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 certains mots des URL (par exemple les articles).

Ponctuation

Remplace les caractères de ponctuation.

IV-D-4 - 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. 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 seront indexés (paramètre Seuil d'indexation).

Chap. 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

IV-D-5 - Image : créez des styles d'image personnalisés

Il existe par défaut trois styles d'image que vous avez peut-être déjà utilisés : thumbnail, medium et large. L'interface d'administration du module Image permet de créer de nouveaux styles :

-> ce module fait partie du cœur 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 côté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 pixels 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 tous 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

Les images modifiées sont enregistrées dans le répertoire /sites/default/styles/nomdustyle.

IV-D-6 - 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 page prédéfinies.

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.

IV-D-6-a - 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 Structure - 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 mises en page de Display suite

-> choisir la mise en page Deux colonnes empilées.

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 quatre régions. Il suffit maintenant de les garnir de champs par simple glisser/déposer.

Les quatre régions du style de mise en page

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

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. Créer un thème à partir d'un design HTML/CSS).

IV-D-6-b - 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 Structure - 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

IV-D-6-c - 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 champ calculé à partir de code PHP ou de jetons Token (chap. Token : des jetons pour les modules).

-> Cliquez sur le bouton Add a code field.

-> Étiquette : 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

Il est possible de modifier les champs personnalisés sur la page de configuration de Display Suite :
-> menu Structure - lien Display Suite ;
-> lien Champs.

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. Devel : simplifiez votre vie de développeur) :
-> Champ de code : <?php dpm(get_defined_vars()); ?>

Affichage des variables disponibles dans un champ Code Field

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. Gestion des affichages) en dessous de la liste des ingrédients :

-> bouton Add a block field ;

-> Étiquette : Trois autres recettes.

-> Entités : cochez Node.

-> Bloc : Trois recettes au hasard

Ajout d'un champ Block field

-> Bouton Enregistrer.

-> Placez le nouveau champ Trois autres recettes en région Gauche.

-> Bouton Enregistrer.

Un bloc à l'intérieur d'un contenu

IV-D-6-d - 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 Structure - 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. 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 Cette 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

- 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.

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.

IV-E - Site coopératif

IV-E-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 cœur 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

Seuls 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

L'URL blog affiche la liste des billets de tous les utilisateurs.
Les URL blog/id_utilisateur affichent la liste des billets d'un utilisateur.

En activant le module Blog, vous avez accès à un bloc listant les derniers billets.

IV-E-2 - 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 cœur 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 !

- 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).

Le module Forum utilise d'autres modules de Drupal.

IV-E-3 - 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

Advanced Forum propose une page d'options pour gérer l'apparence des forums :
-> menu Configuration - lien Advanced Forums.

Advanced Forum met à disposition un certain nombre de blocs et de pages que vous pouvez modifier avec Views :
-> menu Structure - lien Vues.

IV-E-4 - 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 cœur 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

Pour que le formulaire de contact fonctionne, il faut configurer le serveur : chap. 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

IV-E-5 - Webform : créez des formulaires

Ce module permet de créer des questionnaires à l'aide de toute sorte 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 e‑mail et le plat qu'il désire.

-> Menu Contenu.

-> lien + Ajouter un contenu.

-> Lien Webform.

Créez une node qui présentera 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

Ce champ est un Token, chap. 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.

Le bouton Courriels permet d'envoyer un mail contenant la valeur des champs à chaque validation du formulaire.
Le bouton Paramètres du formulaire permet de configurer certaines options du formulaire (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.

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 champ.

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'écran 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.

IV-E-6 - 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 champ qu'il est possible d'ajouter à n'importe quelle entité (node, utilisateur, terme de taxonomie, 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 modules 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. 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).

- 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.

Trois types de widgets sont disponibles pour le type Fivestar Rating :

-> bouton Enregistrer ;

-> Voting Tag : vote ;

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 champ Notez cette recette

Modification de l'affichage du champ Fivestar

De nouveaux types Relations sont disponibles dans Views pour effectuer des calculs sur les votes effectués.

Les nouvelles relations de Voting API

IV-F - Blocs, menus

IV-F-1 - Taxonomy menu : affichez vos vocabulaires dans des menus

Après avoir ajouté des vocabulaires et des termes de taxonomy (chap. 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.

Pour bien comprendre le fonctionnement de ce module, lisez d'abord les chap. Taxonomy : Classer le contenu, chap. Menu : les menus et chap. Block : les blocs.

-> Téléchargez et activez le 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 appelé é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 à 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 !

IV-F-2 - 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 cet exemple, vous allez reprendre votre bloc Provenance créé précédemment (chap. 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 : 2e 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

Menu Block est utilisé sur les sites qui ont une navigation principale en en-tête et une navigation secondaire en barre latérale.

IV-F-3 - 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.

L'exemple utilisé pour ce module suppose que vous ayez créé le bloc Nos recettes comme indiqué dans chap. Taxonomy_menu : affichez vos vocabulaires dans des menus.

-> Téléchargez et activez le 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, deux 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.

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

IV-G - 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 commande 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.

N'essayez pas de créer une boutique avec Drupal Commerce avant de maîtriser les grands principes de Drupal. Au minimum, lisez les parties I et II de ce livre.

IV-G-1 - Démarrage rapide

IV-G-1-a - 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.

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

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.

IV-G-1-b - 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

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.

IV-G-1-c - 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 ;

-> Étiquette : Image ;

-> Bouton Enregistrer ;

-> Bouton Enregistrer les paramètres.

Maintenant, ajoutez le champ référence produit, à la section Ajouter un nouveau champ :

-> Étiquette : Image ;

-> field_produit ;

-> Type de données : Référence produit ;

-> Élé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.

IV-G-1-d - 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

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és et les lignes du panier.

Détail du panier

Vous pouvez modifier le format d'affichage d'ajout au panier pour ajouter un widget de quantité à côté du bouton Ajouter au panier.

Modification du formulaire d'ajout au panier

Affichage de la node et des quantités à ajouter

IV-G-1-e - 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

IV-G-1-f - 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

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

IV-G-1-g - Gestion des commandes

Côté 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.

IV-G-2 - Les éléments de Drupal Commerce

Ce deuxième chapitre liste les différents éléments configurables que le module Commerce propose.

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.

IV-G-2-a - 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.

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 à laquelle 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

IV-G-2-b - 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.

IV-G-2-c - 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.

Vous pouvez consulter l'ensemble des règles de Drupal Commerce à la page :
-> menu Configuration - lien Règles.

IV-G-2-d - 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

IV-G-3 - Quelques exemples de configuration

Voici quelques exemples de configuration du module Commerce qui utilisent les éléments listés ci-dessus.

IV-G-3-a - 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é

IV-G-3-b - 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. Ajout du champ photo de l'article).

Puis, il faut ajouter les attributs. Commencez par le type d'élément (poêle, casserole, etc.) :

-> Étiquette : 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

Les attributs des produits ne peuvent avoir un nombre de valeurs supérieur à 1.

-> Bouton Enregistrer les paramètres.

Puis, faites de même pour la taille :

-> Étiquette : 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 Élé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 six 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

IV-G-3-c - 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.

IV-G-3-d - 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 produits.

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 recettes ;

-> 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é.

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 la 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

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.

V-A - 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.

V-A-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.

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

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

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

V-A-2 - Color : sché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

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.

V-A-3 - 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).

Installez le thème Marinelli comme vous avez installé Danblog (chap. Installation d'un thème externe). Si cela ne fonctionne pas, vous pouvez installer un thème manuellement comme vous installez un module (chap. 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.

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 trois 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.

V-B - 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.

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

V-B-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

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éfinit 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.

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.

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. Le fichier template.php.

V-B-2 - 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.

V-B-2-a - 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

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 une 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

V-B-2-b - 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 la 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

Lorsque vous modifiez vos propriétés dans Firebug, les fichiers CSS ne sont pas modifiés.

Utilisez flèche haut et flèche bas pour augmenter ou diminuer les valeurs numériques des propriétés CSS.

V-B-3 - 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.

-> Éditez 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és à 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é 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

V-B-4 - Theme developer : découverte des templates d'un thème

V-B-4-a - 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 modules 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é

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. 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.

V-B-4-b - 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.

V-B-4-c - Création d'un template pour un bloc spécifique

Il est possible de créer des templates 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.

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). S'il le trouve, il l'utilise et ne cherche pas d'autres fichiers. Sinon, il cherche le fichier suivant (block--menu.tpl.php).

Lors de la rédaction de ce livre, le module Theme developer possède un bogue 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.

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 cette URL en marque-page de votre navigateur pour gagner du temps.

-> Rechargez la page

Le nouveau template est utilisé !

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é

V-B-4-d - Utilisation des variables PHP

Vous allez ajouter un nouveau template pour modifier le bloc Bienvenue, Utilisateur identifié créé au chap. 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.

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. Les fonctions de débogage.

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.

V-B-5 - 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.

V-B-6 - 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

Vérifiez que les formats de dates 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.

V-B-7 - Exercice : exploration d'un template du module Poll

Avertissement : cet exercice est difficile à réaliser.

Dans le chap. 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.

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.

V-C - 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.

V-C-1 - Création du thème

V-C-1-a - 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.

V-C-1-b - 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 reprises durant ce chapitre pour y ajouter de nouvelles directives de configuration.

-> Allez sur la page Apparence

Votre .info a été lu par Drupal

V-C-1-c - Le premier template : html.tpl.php

Le père de tous les templates 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.

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.

V-C-1-d - 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

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.

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.

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ée ainsi que toutes les autres feuilles de style des différents modules Drupal utilisés.

V-C-1-e - 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

V-C-1-f - 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ée par ces actions, mais les variables PHP disponibles dans
page.tpl.php sont différentes de celles de html.tpl.php.

V-C-2 - Les régions

Dans le chap. 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 quatre 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.

V-C-2-a - 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.

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és 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.

Drupal définit 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é.

V-C-2-b - 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 -->

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

V-C-2-c - 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

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 :
-> menu Structure - lien Blocs ;
-> lien Aperçu des régions des blocs (Culinary)

Les deux régions sont correctement configurées

V-C-2-d - 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éé. 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

V-C-2-e - 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. 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.

V-C-2-f - 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 cœur 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.

V-D - 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.

Le module chap. Display suite : présentez vos contenus en utilisant l'interface de Drupal permet de présenter le contenu simplement.

V-D-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 contenus de type recette :

-> copiez le fichier modules/node/node.tpl.php ;

-> collez ce fichier dans le répertoire de votre thème ;

- 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.

Theme Developper indique à la ligne Candidate template files que le fichier peut prendre les noms suivants.

-> 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é

V-D-1-a - 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'] ?>

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>

Si votre site est multilingue, utilisez la fonction t() pour afficher vos chaînes de caractères comme avec les modules (chap. 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

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.

Il est également possible de se baser sur les fichiers node.tpl.php des thèmes existants (par exemple, celui de Bartik).

V-D-1-b - 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.

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.

V-D-1-c - 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>

Le fichier recette.css du chapitre précédent doit être chargé par le .info pour que la classe « etapes » s'applique.

V-D-2 - 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é 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.

V-D-2-a - 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.

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.

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.

V-D-2-b - 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>

V-D-2-c - 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.

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

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

V-E - 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.

V-E-1 - Variables de html.tpl.php

$styles

Balise <style> mise en forme qui importe les fichiers CSS nécessaires à la page.

$scripts

Balise <script> mise 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 metatags du head (description, icône, 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>

N'oubliez pas que vous pouvez vous baser sur les templates existants des autres thèmes, par exemple celui de Bartik.

V-E-2 - 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).

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 -->

V-E-3 - Variables de node.tpl.php

$title

Titre de la node.

$date

Date de création de la node.

$content

Contenu de la node mise 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. Créer un template node.tpl.php sur mesure.

V-F - Le theming des vues

Lisez le chap. 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 fournit 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 champ 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

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

Développer un module Drupal peut parfois vous sauver si une fonctionnalité n'existe pas ou si vous souhaitez modifier certains comportements 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 commencer en douceur la programmation avec Drupal. Il vous présentera toute une palette d'outils qui vous faciliteront votre vie de développeur Drupal.

VI-A - 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ébogage que vous découvrirez par la suite (chap. Déboguer avec Eclipse).

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. Architecture d'un module.

VI-A-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.

VI-A-1-a - 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).

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

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.

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. Configuration d'Eclipse pour Drupal.

VI-A-1-b - 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.

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épôts qui contiennent l'environnement Java.

-> Démarre Synaptic.

-> Onglet Autres 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

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

VI-A-1-c - 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 quatre 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 deux espaces. Eclipse indente par défaut d'une tabulation de quatre 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.

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, seuls 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 prises 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 !

Vous en apprendrez plus sur Eclipse au chap. Déboguer avec Eclipse.

VI-A-2 - 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.

VI-A-2-a - 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.

Il est possible de créer un répertoire ou des fichiers directement depuis l'arborescence d'Eclipse : clic droit à l'endroit où 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 versions 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.

VI-A-2-b - 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 autres 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 s'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.

VI-A-2-c - 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

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.

VI-A-2-d - 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;
}

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 Structure - lien Blocs et mettez ce bloc en Sidebar First sous Bartik.

Vous devriez maintenant voir apparaître le bloc !

VI-A-2-e - 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ées 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.

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. 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ères de votre module :

$block['hello-block'] = array(
'info' => t('Hello world !'),
);

$block = array (
'subject' => t('First module say :'),
'content' => t('Hello World !!!')
);

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

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

Utilisez le module chap. 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évelopper votre premier vrai module Drupal grâce à l'environnement que vous avez mis en place.

VI-B - 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 !

VI-B-1 - La page Summary

VI-B-1-a - 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>';
}
}

VI-B-1-b - 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.

La hook_menu() ne définit 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.

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 /summary

Il reste maintenant à générer le contenu de cette page.

VI-B-1-c - 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.

Chap. 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

VI-B-1-d - 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;

VI-B-1-e - 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;

VI-B-2 - La page de configuration du module

VI-B-2-a - 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;
}

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 appellera drupal_get_form(summary_admin_settings) lorsque la page devra s'afficher.

VI-B-2-b - 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.

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

VI-B-2-c - system_settings_form : ajouter le bouton de sauvegarde

Il manque le bouton de sauvegarde à 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 ceci :

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.

VI-B-2-d - 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ées 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.

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 ? Eh bien c'est la fonction system_settings_form qui s'occupe de tout !

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').

VI-B-2-e - 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 auteur 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);
}

VI-B-3 - 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()));

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;
}

VI-B-3-a - 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 chaîne de caractères 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.

VI-B-4 - 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.

VI-B-4-a - Requête simple retournant une seule 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

Chap. 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ères à 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';

VI-B-4-b - Requête 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

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 :

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.

fetchAllAssoc

Retourne l'ensemble des résultats sous forme de tableau. La colonne devant servir de clé est passée en paramètre.

getQueryString

Retourne la requête SQL de l'objet.

fetchCol

Retourne tous les éléments d'une colonne. Le numéro de la colonne est passé en paramètre.

fetchField

Retourne la première colonne de la première ligne.

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

VI-B-4-c - Requête 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 avez 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.

VI-B-4-d - Requête 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.

SelectQuery possède quelques dizaines de méthodes correspondant à des directives SQL. Vous pouvez retrouver la liste de ces méthodes sur la page SelectQuery du site http://api.drupal.org.

Extrait de la page de documentation de SelectQuery

Vous pouvez utiliser les méthodes DeleteQuery, InsertQuery et UpdateQuery pour des requêtes SQL delete, insert et update.

VI-B-5 - 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.

Pour bien comprendre cette section, lisez le chap. Les thèmes Drupal dans son ensemble.

VI-B-5-a - 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

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

VI-B-5-b - 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;
}

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

VI-B-5-c - 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;
}

VI-B-5-d - 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.

VI-B-5-e - Création d'un template par défaut

Pour un créateur de thèmes, 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 !

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/).

VI-C - Les outils pour mieux développer avec Drupal

VI-C-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).

VI-C-1-a - 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'exécuter 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é.

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ées 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

VI-C-1-b - 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

VI-C-1-c - Les fonctions de débogage

Plusieurs fonctions de débogage 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

VI-C-1-d - 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 !

VI-C-1-e - 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.

VI-C-2 - 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 !

VI-C-3 - Drupal for Firebug

Ce module permet de déboguer 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/.

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ée (chap. 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. Le bloc Execute PHP).

VI-C-4 - Déboguer avec Eclipse

Lorsque vous développerez des modules complexes, pouvoir déboguer 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ébogueur Xdebug sur votre serveur, et vous l'utiliserez avec Eclipse.

VI-C-4-a - Installation de Xdebug sur WampServer

Xdebug est installé par défaut sur Wampserver, mais il n'est pas configuré en mode remote (débogage à distance) :

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 :

-> éditez 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.

VI-C-4-b - 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é

VI-C-4-c - 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ébogage, l'autre pour la stopper.

Les icônes de easy xdebug

Vous pouvez afficher ou cacher la barre des modules de Firefox grâce au menu Options - Barre des modules.

VI-C-4-d - Configuration d'Eclipse pour xdebug

Il s'agit maintenant d'indiquer à Eclipse que vous utiliserez Xdebug pour déboguer votre projet Drupal.

-> Menu Window - Preferences.

-> Sélectionnez l'item PHP - Debug.

-> À la ligne PHP Debugger choisissez XDebug.

Configuration du débogueur

-> 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

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ébogage.

-> Bouton OK.

-> Bouton OK.

VI-C-4-e - Utiliser xdebug

Vous allez maintenant déboguer 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.

Vous pouvez également positionner vos points d'arrêts dans le fichier 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ébogage

Eclipse a détecté une session de débogage

-> Bouton Yes.

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

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 !

Index

Symboles

Field UI

Commerce

render()

$databases

Filter

Contact

Résumé

A

Filtre

Content Translation

Révisions

Administration menu

Firebug

CTools

Rôles utilisateurs

Advanced Forum

Drupal for firebug

Dashboard

Rules

Apache

Fivestar

Désinstallation

S

api.drupal.org

Fonctions de thème

Devel

Sauvegarde

Article

Création

Display suite

Views

B

Utilisation

Drupal for Firebug

Search

Backup and Migrate

Form API

Email Field

SelectQuery

Blocs (1), (2), (3)

Format d'entrée

Features

Serveur Web

Créer un bloc

Format de texte

Field UI

Version mini

Créer un bloc avec Views

Wysiwyg

Filter

settings.php

Liste des blocs

Forum

Fivestar

Shortcuts

Options

français

Forum

show()

Blog

G

Google Analytics

Site multilingue

BMI

Gabarits

Help

Sondage

Boutique

Gérer l'affichage

Image

SQL

Boutons radio

Gérer les champs

IMCE

Profiler

C

Google Analytics

Installation (1), (2)

Requête dans un module

Cache

H

Locale

system_settings_form()

Captcha

Hébergeur

Localization client

T

Cases à cocher

Help

Menu

t()

Champ

hide()

Menu Block

Tableau de bord

Ajout à l'utilisateur

hook_block_info()

Module filter

Tags (1), (2)

Cases à cocher

hook_block_view()

Nice Menus

Taxonomy

Fivestar

hook_help()

openWYSIWYG

Création d'un vocabulaire

Image

hook_menu()

Overlay

Taxonomy menu

Liste

hooks

Path

template.php

Mail

hook_theme()

Pathauto

Templates

Numérique

Hôtes virtuels

PHP filter

Modification

Terme de taxonomie

html.tpl.php (1), (2)

Poll

Thème

Texte

I

Product

Fonctions

Zone de texte

Icône

Rules

Theme developer

CKEditor

Image

Search

Thèmes

Coder

IMCE

Shortcuts

Configurer

Color

info

Taxonomy

Danland

Commentaires

Modules

Taxonomy menu

Installation (1), (2)

Commerce

Thème (1), (2)

Theme developer

Marinelli

Configuration

Installation

Token

Orange

Contact

Linux

Toolbar

Templates

Content Translation

WampServer

Update Status

Token

Contenu

Internationalisation

User

Toolbar

Création automatique

t()

Video filter

Traduction d'un module

Création

J

Views

Type de contenu

Type de contenu

Javascript

Weather

Création

Créer un compte

Ajout fichier au thème

Webform

Options

Cron

K

Wysiwyg

Pages et articles

CSS

kpr()

Module filter

U

Ajout fichier

L

MySQL (1), (2), (3)

Update Status

Modification

Langues

Configuration

upload_max_size

CTools

Liste de champs

Requête dans un module

url

D

Locale

Sauvegarde

URLs Simplifiées

Dashboard

Localization client

Tables

Utilisateurs

db_query()

Logo

Version mini

V

db_select()

M

N

variable_get()

Débogage

Mail

Nice Menus

Video

Eclipse

Marinelli

Nodes

Video filter

Fonctions

memory_limit

Options (1), (2)

Views

Devel

Menu Block

node.tpl.php (1), (2)

Affichages

Display suite

Menus (1), (2)

O

Création d'un bloc

dpm()

Afficher un menu

Overlay

Critères de filtrage

Droits d'accès (1), (2)

Créer un menu

P

Critères de tri

Formats de texte

Liste des menus

page.tpl.php (1), (2)

Display Suite

Drupal for Firebug

Menu déroulant (1), (2)

Paiement

Droits d'accès

drupal.org

Mise à jour

Panier (1), (2)

Filtre contextuel

api.drupal.org

Drupal

Path

Formulaires exposé

localize.drupal.org

Modules et thèmes

Pathauto

Relations

Recherche de module

Modifier

Performances

Sélection des champs

E

Module

PHP

Theming

Eclipse

Administration menu

Version mini

VirtualHost

Configuration

Advanced Forum

PHP filter

Vocabulaire

Déboguer

Backup and Migrate

Poll

W

e-commerce

Block

PostgreSQL

Weather

e-mail

Blog

post_max_size

Webform

Email Field

BMI

Preprocess

Widgets

Execute PHP

Captcha

Product (1), (2)

Wysiwyg

F

CKEditor

R

CKEditor

Features

Coder

Régions

X

field.tpl.php

Color

Création dans un thème

Xdebug