Vous êtes sur la page 1sur 31

1111 IntroductionIntroductionIntroductionIntroduction

M2 BDIA – Semestre Automne 2012 TP1 – Prise en main de Drupal 7

1

Drupal est un logiciel permettant de créer, puis de gérer simplement un site web. Pour cela, il permet, comme tous les CMS (Content Management System ou Système de Gestion de Contenu en français), en tout premier lieu de gérer (e.g. créer, éditer, supprimer) du contenu, c’est-à-dire globalement les pages du site. Le principal avantage d’un tel système réside dans la possibilité de faire évoluer le contenu du site, et donc le site lui-même, sans recourir systématiquement à un programmeur.

La plate-forme Drupal est constituée d’un ensemble de modules gravitant autour d'un noyau très léger. Chaque module est en quelque sorte une bibliothèque de fonctions qui enrichit l’application et augmente ses possibilités. Ces différents modules peuvent interagir entre eux.

Une autre caractéristique de la plate-forme Drupal est que le site et son interface d’administration sont intimement liés:

les administrateurs éditent leur contenu dans le même contexte graphique ou presque que celui du visiteur. Cette fonctionnalité peut-être déroutante au premier abord, mais est par la suite particulièrement productive et intuitive.

Parmi les principaux avantages de la plate-forme Drupal, nous pouvons citer les suivants :

Rapidité de mise en œuvre – la plate-forme repose sur des solutions logicielles libres de droits et ne nécessite pas l’achat de licences spécifiques ;

Modularité – Il est possible d’étendre les possibilités en ajoutant des modules (soit créés par la communauté et sous licence libre GPL, soit développés à des fins spécifiques) ;

Robustesse – La qualité du code et la robustesse de son interface de programmation (API) font de Drupal un environnement de développement PHP qui permet de répondre à un nombre presqu’infini de besoins ;

Référence en matière de web sémantique – Avec sa version 7, les principes du web de données sont intégrés dès le noyau. Drupal facilite l'intégration de schémas de données liées définis par la norme RDFa. Les résultats sont automatiquement partagés entre les machines. Les développeurs d'applications peuvent se concentrer sur la fourniture de solutions de visualisation en agrégeant le contenu de sources disparates. Avec Drupal, les développeurs n'ont pas à se préoccuper de la capture, de l'organisation et de la maintenance des métadonnées. Drupal fait en sorte de structurer les données et de les rendre réutilisables par d'autres sites. Le CMS le fait en ajoutant des informations autour de ces données, en les structurant selon le modèle RDF. Enfin, Drupal dispose d'un module SPARKLE en cours de stabilisation. Le projet Sparkle permet de rechercher, ajouter, modifier ou supprimer des données RDF disponibles à travers Internet.

2222

ArchitectureArchitectureArchitectureArchitecture d’und’und’und’un sitesitesitesite DrupalDrupalDrupalDrupal

L’architecture d’un site Drupal repose sur un modèle de contenu spécifique qui permet de structurer l’information. Drupal utilise un système de nœuds (chaque page du site représente un nœud) couplé à une taxonomie particulièrement flexible. C’est pour cette raison qu’il est important de définir ici les principaux concepts sous-jacents à Drupal.

Afin de gérer la variété des pages d’un site, Drupal met en place des types de contenu. Donc lorsque vous souhaitez créer un contenu, vous devez obligatoirement et au préalable choisir son type et en fonction de ce choix, Drupal vous donnera accès au formulaire de création correspondant.

2.12.12.12.1

NœudNœudNœudNœud

M2 BDIA – Semestre Automne 2012 TP1 – Prise en main de Drupal 7

2

Le nœud est l'élément central du modèle de contenu employé par Drupal.

Un nœud est un objet générique composé d’un titre et d’un contenu de type texte.

Drupal fournit, dès son installation, deux types de contenu très utiles que nous allons présenter ci-dessous : « page » et « article » (ce sont les types de contenus standard).

Toute la puissance de Drupal réside dans la possibilité de spécialiser un nœud en lui adjoignant des champs supplémentaires. C’est ainsi que l’on va pouvoir créer de nouveaux types de contenus.

Chaque élément de contenu présent dans un site Drupal est un nœud.

Chaque nœud appartient à un type de contenu.

2.1.12.1.12.1.12.1.1

ArticleArticleArticleArticle

Article = contenu court et/ou traitant d'un point précis (sans lien direct avec d'autres articles).

Les articles comportent un titre et un corps de texte, mais peuvent être étendus par d'autres modules. L'accroche fait également partie du corps.

Les articles peuvent être utilisés dans un blog personnel ou dans un site d'actualités.

2.1.22.1.22.1.22.1.2

PagePagePagePage

Page = contenu plutôt statique (page de présentation) ou page orpheline.

La différence entre une « page » et un « article » se fait uniquement au niveau de l'affichage par défaut de ces éléments sur le site. En effet, au contraire d’un article, une page n'affiche pas les informations de l'auteur et la date de publication, d’autre part, les commentaires sont désactivés par défaut. Ces paramètres d’affichage sont aisément modifiables ce qui fait qu’au final, d’un point de vue technique, il n’y a aucune différence.

L’intérêt est ailleurs, la différentiation des types de contenu est un moyen à la disposition du concepteur pour bâtir un modèle de contenu adapté au besoin. Dans ce cas, cela permet de séparer strictement et de traiter différemment les informations statiques d’une « page » (présentation du site, mentions légales, etc.) qui sont rarement mises à jour, des informations dynamiques d’un « article » dont la durée de vie est plus faible (actualités, annonces, etc.).

2.1.32.1.32.1.32.1.3

LivreLivreLivreLivre

Livre = ensemble de nœuds liés entre eux par des liens hiérarchiques (parent, enfant, frère).

Cette structure hiérarchique (un sommaire) est générée automatiquement à l’affichage d’un nœud de ce type. Comme son nom l'indique, ce contenu est adapté à un contenu structuré en chapitre et sous-chapitre, un contenu organisé autour d'une progression logique. Un livre est un effort collectif d'écriture : les utilisateurs peuvent collaborer à l'écriture des pages du livre, positionner les pages dans le bon ordre, et passer en revue ou modifier les pages écrites précédemment.

M2 BDIA – Semestre Automne 2012 TP1 – Prise en main de Drupal 7

3

2.22.22.22.2 LesLesLesLes commcommentairescommcommentairesentairesentaires

Les commentaires sont des éléments classiques d’un système de gestion de contenu communautaire et ont été popularisés par les blogs. C’est la base de l’interaction entre le(s) éditeur(s) d’un site et les lecteurs, car ils permettent à ces derniers de commenter le contenu en question.

Dans Drupal, les commentaires ont pour particularité de ne pas être des nœuds. Ce sont donc des éléments à part dans le modèle de contenu.

Cette architecture a été retenue parce que plus performante et donc capable de gérer des milliers de commentaires. Concrètement, cela signifie qu'ils ne seront pas exploitables de la même façon que les autres contenus, mais personnalisable tout de même.

Tous les nœuds de Drupal peuvent recevoir des commentaires et il est possible de paramétrer la manière dont ceux-ci se comportent. Ces réglages peuvent être différents pour chaque type de contenu ou même pour chacun des nœuds.

2.32.32.32.3 Catégories,Catégories,Catégories,Catégories, vocabulaire,vocabulaire,vocabulaire,vocabulaire, taxonomie,taxonomie,taxonomie,taxonomie, termestermestermestermes

La taxonomie est le concept qui permet la structuration des différents éléments de contenu d’un site Drupal. Très puissant et flexible il est parfois difficile à appréhender, car il utilise des mots qui ne font pas partie du langage courant : terme, vocabulaire et taxonomie.

Terme = étiquette servant à désigner un regroupement de différents nœuds.

Vocabulaire = groupe de plusieurs termes.

Taxonomie = précise le type de relation qui existe entre les termes d’un même vocabulaire.

Plusieurs types de taxonomies sont possibles :

Taxonomie libre : les termes peuvent être choisis sans contrainte ;

Taxonomie simple : un seul terme par contenu ;

Taxonomie multiple : plusieurs termes peuvent être choisis parmi une liste prédéfinie.

Enfin une taxonomie peut définir des relations hiérarchiques entre les termes afin de définir des catégories et sous catégories.

Drupal permet donc de créer un vocabulaire pour chaque besoin de classification qui peut exister dans un site.

2.42.42.42.4 BlocsBlocsBlocsBlocs

Les blocs sont des éléments de contenu spécifiques.

En général, ils sont utilisés pour afficher une information secondaire (commentaires récents), un contenu lié au contenu principal (profil de l’auteur de l’article) ou pour afficher des éléments de navigation (menu, formulaire de connexion).

Drupal offre la possibilité de créer de nouveaux blocs via l'interface d’administration.

Chaque bloc possède une page de configuration qui permettant de régler sa visibilité : selon les pages affichées, selon le visiteur ou encore selon une logique plus complexe régie par un code en PHP.

2.52.52.52.5 MenusMenusMenusMenus

M2 BDIA – Semestre Automne 2012 TP1 – Prise en main de Drupal 7

4

Un menu est simplement une liste d’hyperliens vers des pages internes ou vers d’autres sites. Cette liste peut-être hiérarchisée afin de permettre de créer des menus et des sous-menus.

En général, les menus sont utilisés afin de créer des éléments de navigation pour les utilisateurs du site.

Drupal crée par défaut :

un « menu primaire » (primary links) souvent utilisé pour la barre de navigation principale ;

un « menu secondaire » (secondary links) employé pour des liens de moindre importance.

Une fois encore Drupal n’est pas limitant et permet de créer autant de menus que le site nécessite.

Lors de la création d’un menu, celui-ci génère automatiquement un bloc.

2.62.62.62.6 UtilisateursUtilisateursUtilisateursUtilisateurs –––– rôlesrôlesrôlesrôles etetetet droitsdroitsdroitsdroits

Chaque « utilisateur » du site est identifié lors de sa connexion.

Les utilisateurs ont un « rôle » qui leur est assigné.

Chaque « rôle » dispose d’un certain nombre de « droits ».

L’ensemble des « droits » d’un rôle permet de spécifier ce qu’il est autorisé à faire sur le site.

Le nombre de rôles pouvant être définis est illimité et peut donc être adapté finement au besoin du site.

Chaque utilisateur Drupal est associé à un ou plusieurs rôles, dans ce cas, les droits se cumulent.

Des modules existent pour étendre les fonctionnalités de gestion des droits et des utilisateurs afin de permettre une gestion des droits d’accès encore plus fine (pour chaque utilisateur par exemple).

2.72.72.72.7 ThèmesThèmesThèmesThèmes

Comme tous les systèmes modernes de gestion de contenus, l’architecture de Drupal est conçue de manière à séparer strictement la logique, le contenu et l’apparence d’un site. L’un des nombreux avantages de cette technique réside dans la possibilité de modifier totalement l’apparence d’un site sans avoir à toucher à la mécanique interne de l’application ou les données du contenu. Il est même tout à fait possible de faire cohabiter plusieurs thèmes dans une même installation et de laisser le choix du thème aux utilisateurs.

Thème Drupal = ensemble de fichiers modifiant l'affichage par défaut du site.

L’affichage par défaut est intercepté et modifié ou surchargé (override) par le thème sélectionné à deux niveaux :

La structure XHTML par défaut peut être interceptée afin de modifier la nature, l’ordre et le balisage sémantique des informations affichées ;

Les styles CSS par défaut peuvent être interceptés afin de modifier l’apparence et la mise en page de ces mêmes informations.

2.82.82.82.8 CœurCœurCœurCœur (Core)(Core)(Core)(Core)

Core est un terme anglophone désignant le cœur ou l'élément central.

M2 BDIA – Semestre Automne 2012 TP1 – Prise en main de Drupal 7

5

Dans Drupal, le cœur est la distribution officielle avec les modules et les thèmes standards.

Parmi les modules livrés dans le cœur, tous ne sont pas activés par défaut. En fait, seul un petit nombre de modules sont strictement nécessaires au fonctionnement de Drupal. Le cœur de Drupal est donc léger.

2.92.92.92.9 ModulesModulesModulesModules

On pourrait comparer le concept de module à celui de plugin ou greffon.

Un module est une brique logicielle s'ajoutant à l’application pour étendre ses fonctionnalités ou
Un
module
est
une
brique
logicielle
s'ajoutant
à
l’application
pour
étendre
ses
fonctionnalités ou modifier celles existantes.

En pratique, un module est une bibliothèque de fonctions PHP, qui s'interfacent avec les modules déjà présents par le biais des hameçons.

2.102.102.102.10 FormulairesFormulairesFormulairesFormulaires

Il y a plusieurs types de formulaires dans Drupal :

Formulaires de saisie de contenu – générés automatiquement, lors de la création d’un nœud, ils permettent de créer et d’éditer les contenus du site.

Formulaires d’administration des modules – permettent aux administrateurs de paramétrer le fonctionnement de Drupal et de ses modules.

Tout formulaire Drupal peut être étendu/modifié par d'autres modules.

3333 FonctionnementFonctionnementFonctionnementFonctionnement dededede DrupalDrupalDrupalDrupal

dededede DrupalDrupalDrupalDrupal Figure 1. Affichage d’une page HTML. Ana ROXIN Méthodes

Figure 1.

Affichage d’une page HTML.

M2 BDIA – Semestre Automne 2012 TP1 – Prise en main de Drupal 7

6

Semestre Automne 2012 TP1 – Prise en main de Drupal 7 6 Figure 2. Affichage d’une

Figure 2.

Affichage d’une page Drupal.

4444 InstallationInstallationInstallationInstallation dededede DrupalDrupalDrupalDrupal

4.14.14.14.1 InstallationInstallationInstallationInstallation rapiderapiderapiderapide soussoussoussous WindowsWindowsWindowsWindows

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.

4.1.14.1.14.1.14.1.1

InstallationInstallationInstallationInstallation dededede WWampServerWWampServerampServerampServer

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 TP : wampserver2.2e.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) – voir Figure 3.

Passez WampServer en français en faisant un clic droit sur l’icône (Language — french)

faisant un clic droit sur l’icône (Language — french) Figure 3. Icône Wampserver. Lancez un navigateur

Figure 3.

Icône Wampserver.

Lancez un navigateur internet et entrez l’adresse locale : http://localhost. Vous devriez voir s’afficher la page d’accueil WampServer (voir Figure 4)

M2 BDIA – Semestre Automne 2012 TP1 – Prise en main de Drupal 7

7

Semestre Automne 2012 TP1 – Prise en main de Drupal 7 7 Figure 4. Page d’accueil

Figure 4.

Page d’accueil de Wampserver.

4.1.24.1.24.1.24.1.2 TéléchargementTéléchargementTéléchargementTéléchargement etetetet accèsaccèsaccèsaccès àààà l’installateurl’installateurl’installateurl’installateur dededede DrupalDrupalDrupalDrupal 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 TP : Drupal 7.16)

de Drupal (version utilisée pour ce TP : Drupal 7.16) Décompressez c:\wamp\www) l’archive Figure 5. Drupal

Décompressez

c:\wamp\www)

l’archive

Figure 5.

Drupal

dans

Page http://drupal.org/download

le

répertoire

www

vous

avez

installé

WampServer

(par

défaut

M2 BDIA – Semestre Automne 2012 TP1 – Prise en main de Drupal 7

8

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 (voir Figure 6).

de l’installateur Drupal doit apparaître (voir Figure 6). Figure 6. Page d’accueil de l’installateur Drupal.

Figure 6.

Page d’accueil de l’installateur Drupal.

4.1.34.1.34.1.34.1.3

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

InstallationInstallationInstallationInstallation enenenen françaisfrançaisfrançaisfranç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 3 étapes : le téléchargement du fichier de traduction, le changement de nom du fichier et la copie du fichier (voir Figure 7).

Cliquez sur le lien translation server de l’étape 1 (http://localize.drupal.org/download)

de l’étape 1 ( http://localize.drupal.org/download ) Figure 7. Page d’aide à l’installation des traductions.

Figure 7.

Page d’aide à l’installation des traductions.

M2 BDIA – Semestre Automne 2012 TP1 – Prise en main de Drupal 7

9

Cherchez la langue française et téléchargez le fichier qui correspond à la version 7.16 (voir
Cherchez la langue française et téléchargez le fichier qui correspond à la version 7.16 (voir Figure 8)
Figure 8.
Téléchargement de la traduction française.
Enregistrez le fichier dans le répertoire c:\wamp\www\drupal\profile\standard\translation
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
Choisissez l’option French (Français)
Cliquez ensuite sur Save and continue pour passer à l’étape suivante (voir Figure 9)
continue pour passer à l’étape suivante (voir Figure 9) Figure 9. Ajout de la traduction française.

Figure 9.

Ajout de la traduction française.

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

Avant de poursuivre l’installation de Drupal, il faut créer et configurer la base de données qui sera utilisée par notre site. Pour ce faire, nous allons utiliser phpMyAdmin.

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

M2 BDIA – Semestre Automne 2012 TP1 – Prise en main de Drupal 7

10

Semestre Automne 2012 TP1 – Prise en main de Drupal 7 10 Figure 10. Ecran d’accueil

Figure 10.

Ecran d’accueil de phpMyAdmin.

Cliquez ensuite sur l’onglet « Bases de données ». La fenêtre suivante est affichée (voir
Cliquez ensuite sur l’onglet « Bases de données ». La fenêtre suivante est affichée (voir Figure 11). En dessous de la
ligne « Créer une base de données », entrez le nom de la base, par exemple
drupal_M2BDIA_VotreNom.
Figure 11.
Onglet « Bases de données. »
Cliquez ensuite sur le bouton Créer.

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

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

Nom de la base de données :

drupal_M2BDIA_VotreNom

 

Nom d’utilisateur : root

Mot de passe : vide

M2 BDIA – Semestre Automne 2012 TP1 – Prise en main de Drupal 7

11

Semestre Automne 2012 TP1 – Prise en main de Drupal 7 11 Figure 12. Configuration de

Figure 12.

Configuration de la base de données pour l’installateur Drupal.

Cliquez sur le bouton « Enregistrer et continuer ».

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

4.1.54.1.54.1.54.1.5

Lorsque l’installation de Drupal est terminée, il faut entrer les informations concernant notre site et son administrateur.

ConfigurationConfigurationConfigurationConfiguration dudududu sitesitesitesite

dudududu sitesitesitesite Figure 13. Ecran de configuration des paramètres du site.

Figure 13.

Ecran de configuration des paramètres du site.

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

M2 BDIA – Semestre Automne 2012 TP1 – Prise en main de Drupal 7

12

Informations

 

Nom du site : TeleAZ

Adresse de courriel du site :

contact@monadresse.com

(entrez une adresse valide)

Compte de maintenance du site

 

Nom d’utilisateur : admin

Adresse de courriel :

contact@monadresse.com

(entrez une adresse valide)

Mot de passe : Entrez ici votre mot de passe

Paramètres du serveur

 

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

 

Fuseau horaire par défaut : Europe/Paris

Une fois les champs complétés, l’installateur Drupal vous informe que l’installation s’est correctement déroulée et vous pouvez dès à présent accéder au site ainsi créé. Pour ce faire, cliquez sur le lien « Visitez votre nouveau site ».

faire, cliquez sur le lien « Visitez votre nouveau site ». Figure 14. Fin de l’installation

Figure 14.

Fin de l’installation Drupal.

Vous pouvez vous logguer en utilisant le nom d’utilisateur « admin » et le mot de passe défini précédemment.

« admin » et le mot de passe défini précédemment. Figure 15. Page d’accueil du site

Figure 15.

Page d’accueil du site TeleAZ ainsi créé.

4.24.24.24.2 InstallationInstallationInstallationInstallation soussoussoussous LinuxLinuxLinuxLinux

4.2.14.2.14.2.14.2.1

Lancez la VirtualBox : Applications > Outils système > Oracle VM VirtualBox

ParamétrageParamétrageParamétrageParamétrage dededede lalalala VirtualBoxVirtualBoxVirtualBoxVirtualBox

M2 BDIA – Semestre Automne 2012 TP1 – Prise en main de Drupal 7

13

Dans le logiciel VirtualBox, affichez les paramètres : Fichier > Paramètres

Dans l’onglet « Général », il faut modifier le chemin d’accès par défaut aux machines. Cliquez dans le champ en face de « Dossier par défaut des machines » et choisissez « Autre… », puis « \Virtual ».

4.2.24.2.24.2.24.2.2

Pour récupérer l’image de la machine virtuelle, il faut se connecter au serveur ionesco3.

ConnexionConnexionConnexionConnexion auauauau serveurserveurserveurserveur

Pour ce faire, il faut aller dans Raccourcis > Se connecter à un serveur…

Dans la fenêtre « Connexion au serveur », remplir les champs avec les valeurs ci-dessous (voir Figure 16) :

Type de service : Partage Windows

Serveur : ionesco3 Partage : Divers

: Partage Windows Serveur : ionesco3 Partage : Divers Figure 16. Fenêtre « Connexion au serveur

Figure 16.

Fenêtre « Connexion au serveur ».

4.2.34.2.34.2.34.2.3

Une fois réalisée la connexion au serveur, on revient dans Oracle VM VirtualBox, et on importe le fichier *.ova.

ImportationImportationImportationImportation dudududu fichierfichierfichierfichier OVAOVAOVAOVA

Pour ce faire il faut cliquer sur : Fichier > Importer application virtuelle, puis cliquer sur le bouton « Choisir… » et aller chercher le fichier Debian6.0.6.ova situé dans ionesco3/Divers.

Une fois le processus d’importation terminé, on peut lancer la machine virtuelle en cliquant sur le bouton « Démarrer ».

4.2.44.2.44.2.44.2.4

Utilisez le compte utilisateur prédéfini « M2BDIA », avec le mot de passe suivant : 1PtjEbnA

ConnexionConnexionConnexionConnexion àààà lalalala machinemachinemachinemachine virtuellevirtuellevirtuellevirtuelle

Pour le compte root, le mot de passe est le suivant : KPxqB7Le

Une fois la machine lancée, il suffit de lancer un navigateur Internet (de préférence Iceweasel) et d’aller sur la page http://localhost/drupal/

M2 BDIA – Semestre Automne 2012 TP1 – Prise en main de Drupal 7

14

5555 DécouverteDécouverteDécouverteDécouverte dededede DrupalDrupalDrupalDrupal

5.15.15.15.1 LesLesLesLes contenuscontenuscontenuscontenus

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

Cliquez sur l’un des liens « Ajouter du contenu » :

Cliquez sur l’un des liens « Ajouter du contenu » : Figure 17. Fenêtre permettant l’ajout

Figure 17.

Fenêtre permettant l’ajout d’un contenu.

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. Nous allons y ajouter une description d’émission de télévision. Nous allons prendre des données depuis la page Wikipédia des émissions de télévision françaises :

http://fr.wikipedia.org/wiki/Cat%C3%A9gorie:%C3%89mission_de_t%C3%A9l%C3%A9vision_fran%C3%A7ai

se (voir Figure 18)

Titre - Capital

Tags – magazine, économie

 

Corps – voir fichier

Textes_articles.pdf

  Corps – voir fichier Textes_articles.pdf Figure 18. Page « Créer un article ». Ana ROXIN

Figure 18.

Page « Créer un article ».

Image – capital.jpg

Cliquez ensuite sur le bouton Transfert de fichiers

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

M2 BDIA – Semestre Automne 2012 TP1 – Prise en main de Drupal 7

15

Semestre Automne 2012 TP1 – Prise en main de Drupal 7 15 Figure 19. Ajout d’une

Figure 19.

Ajout d’une image à un article.

Drupal vous redirige alors vers votre article mis en forme.

Drupal vous redirige alors vers votre article mis en forme. Figure 20. Article sur l’émission «

Figure 20.

Article sur l’émission « Capital ».

5.1.25.1.25.1.25.1.2 AjoutAjoutAjoutAjout d’und’und’und’un deuxièmedeuxièmedeuxièmedeuxième articlearticlearticlearticle Nous allons ajouter une deuxième description d’émission, afin d’enrichir le contenu du site. Pour ce faire, recopiez le contenu présent sur la page 2 du fichier Textes_articles.pdf dans les champs correspondants (le champ Résumé est à renseigner aussi). Pour afficher le champ Résumé, il suffit de cliquer sur le lien « Modifier le résumé » à côté de Body.

sur le lien « Modifier le résumé » à côté de Body. Figure 21. Notre site

Figure 21.

Notre site continent maintenant 2 articles.

Article sur l’émission « Sept à huit ».

M2 BDIA – Semestre Automne 2012 TP1 – Prise en main de Drupal 7

5.1.35.1.35.1.35.1.3

Par défaut, il est possible d’ajouter des commentaires aux articles, vous allez maintenant en ajouter deux pour l’article sur

l’émission « Sept à huit ». Descendez en bas de la page à la section « Ajouter un commentaire ».

AjoutAjoutAjoutAjout dededede commentairescommentairescommentairescommentaires

16

dededede commentairescommentairescommentairescommentaires 16 Figure 22. Ajout d’un commentaire Ajoutez ensuite un

Figure 22.

Ajout d’un commentaire

Ajoutez ensuite un deuxième commentaire au même article.

Ajoutez ensuite un deuxième commentaire au même article. Figure 23. Ajout d’un deuxième commentaire. Notez que

Figure 23.

Ajout d’un deuxième commentaire.

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

Notez aussi l’étiquette « nouveau » qui est ajoutée avant les nouveaux commentaires.

5.1.45.1.45.1.45.1.4

Cliquez sur le titre du site (TeleAZ) 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.

NavigationNavigationNavigationNavigation entreentreentreentre lesleslesles articlesarticlesarticlesarticles

Remarquez également que (voir Figure 24):

lorsqu’un résumé existe pour un article, seul ce résumé est affiché (cas de « Sept à huit ») ;

M2 BDIA – Semestre Automne 2012 TP1 – Prise en main de Drupal 7

17

les images sont plus petites que dans les articles ; il existe un lien «
les images sont plus petites que dans les articles ;
il existe un lien « Lire la suite » permettant d’accéder à l’article complet ;
les tags sont affichés sous forme de lien.
Figure 24.
Page d’accueil du site TeleAZ, après l’ajout de 2 articles.
Cliquez sur le tag « magazine » du premier article. S’affiche alors la liste de tous les articles ayant dans sa liste de tags «
magazine » (voir Figure 25).
Figure 25.
Liste de tous les articles ayant le tag « magazine ».
Cliquez sur le tag « information ». S’affiche alors la liste de tous les articles ayant dans sa liste de tags « information ».

M2 BDIA – Semestre Automne 2012 TP1 – Prise en main de Drupal 7

18

Les tags permettent donc de classer le contenu.

5.1.55.1.55.1.55.1.5

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

ModifierModifierModifierModifier unununun articlearticlearticlearticle

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 (il faut survoler le coin en haut à droit pour faire apparaître le menu); sur la page de consultation d’un article, un onglet Modifier permet d’accéder aux mêmes fonctionnalités ;

à partir du menu d’administration, rubrique « Contenu » (en haut à gauche de la page, voir Figure 26).

Contenu » (en haut à gauche de la page, voir Figure 26). Figure 26. Menu «

Figure 26.

Menu « Contenu ».

Modifiez l’article « Capital » en utilisant l’une ou l’autre des méthodes

Cliquez sur le lien « Modifier le résumé »

Mettez un résumé à l’article : « Capital est une émission de télévision française diffusée sur M6 depuis septembre 1988. »

Cliquez sur « Enregistrer ».

5.25.25.25.2 LesLesLesLes menusmenusmenusmenus

5.2.15.2.15.2.15.2.1 AjoutAjoutAjoutAjout d’und’und’und’un menumenumenumenu Vos deux articles sont accessibles depuis la page d’accueil, vous allez créer des menus dans l’en-tête, à côté de l’onglet « Accueil », pour les rendre plus visibles.

Éditez à nouveau l’article « Capital »

Placez-vous en bas de la page

Vérifiez que l’onglet horizontal « Paramètres du menu » est bien sélectionné

M2 BDIA – Semestre Automne 2012 TP1 – Prise en main de Drupal 7

19

Cochez la case « Fournit un lien de menu »

Remplissez les champs comme dans l’illustration suivante (voir Figure 27).

comme dans l’illustration suivante (voir Figure 27). Figure 27. Cliquez sur « Enregistrer ». Onglet «

Figure 27.

Cliquez sur « Enregistrer ».

Onglet « Paramètres du menu » pour un article.

Un onglet « Capital » est ajouté à côté de l’onglet « Accueil » (voir Figure 28). Lorsque vous survolez cet onglet, le texte saisi dans la description du lien de menu (voir Figure 27) apparait en dessous.

du lien de menu (voir Figure 27) apparait en dessous. Figure 28. Ajout d’un nouvel onglet

Figure 28.

Ajout d’un nouvel onglet de menu.

De la même manière, ajoutez un onglet pour l’émission « Sept à huit » (voir Figure 29).

pour l’émission « Sept à huit » (voir Figure 29). Figure 29. Les 2 onglets de

Figure 29.

Les 2 onglets de menus ajoutés.

5.2.25.2.25.2.25.2.2

Voici les deux entrées de menus créés. Imaginez maintenant que vous vouliez passer « Sept à huit » devant « Capital ».

OrganisationOrganisationOrganisationOrganisation desdesdesdes menusmenusmenusmenus

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 articles au menu Menu principal (voir Figure 30)

M2 BDIA – Semestre Automne 2012 TP1 – Prise en main de Drupal 7

20

Semestre Automne 2012 TP1 – Prise en main de Drupal 7 20 Figure 30. Rubrique «

Figure 30.

Rubrique « Structure > Menus » du menu d’administration.

Cliquez sur le lien « lister les liens » dans la ligne Menu principal

Cliquez sur le symbole « » placé avant « Sept à huit » et remontez-le par glisser/déposer au-dessus de « Capital » (voir Figure 31)

glisser/déposer au-dessus de « Capital » (voir Figure 31) Figure 31. Modification de l’ordre des éléments

Figure 31.

Modification de l’ordre des éléments du menu principal.

Cliquez sur « Enregistrer la configuration » et observez le résultat : l’ordre des menus a changé.

5.2.35.2.35.2.35.2.3

ExerciceExerciceExerciceExercice –––– ajoutajoutajoutajout d’uned’uned’uned’une nouvellenouvellenouvellenouvelle émissionémissionémissionémission

Ajoutez une nouvelle émission (Ushuaïa – texte à recopier depuis Textes_articles.pdf) et créez son menu

Supprimez le premier menu Accueil du Menu Principal

Pour réorganiser le menu :

Menu Structure — lien Menu

Lien « lister les liens » du menu Menu principal

Lien « supprimer » du lien Accueil

Placer « Ushuaïa » en troisième dans la liste

Bouton « Enregistrer la configuration »

M2 BDIA – Semestre Automne 2012 TP1 – Prise en main de Drupal 7

21

5.35.35.35.3 LesLesLesLes blocsblocsblocsblocs

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.

5.3.15.3.15.3.15.3.1

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

AjoutAjoutAjoutAjout d’und’und’und’un blocblocblocbloc

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 » (voir Figure 32).

pour le bloc « Commentaires récents » (voir Figure 32). Figure 32. Cliquez sur « Enregistrer

Figure 32.

Cliquez sur « Enregistrer les blocs ».

Page d’administration des blocs.

Vous voyez alors apparaître le bloc Commentaires récents sur la partie gauche de la page (voir Figure 33).

récents sur la partie gauche de la page (voir Figure 33). Figure 33. Le bloc «

Figure 33.

Le bloc « Commentaires récents » est affiché.

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.

M2 BDIA – Semestre Automne 2012 TP1 – Prise en main de Drupal 7

22

5.3.25.3.25.3.25.3.2 LesLesLesLes régionsrégionsrégionsré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 (voir Figure 34).

nom de toutes ses régions, sur fond jaune (voir Figure 34). Figure 34. Affichage des régions

Figure 34.

Affichage des 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 « Quitter la présentation des régions de blocs » (en haut à gauche)

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

35)

Cliquez sur « Enregistrer les blocs » (voir Figure 36).

M2 BDIA – Semestre Automne 2012 TP1 – Prise en main de Drupal 7

23

Semestre Automne 2012 TP1 – Prise en main de Drupal 7 23 Figure 35. Modification de

Figure 35.

Modification de la région d’affichage du bloc « Recherche ».

de la région d’affichage du bloc « Recherche ». Figure 36. Le bloc « Recherche »

Figure 36.

Le bloc « Recherche » est repositionné dans l’en-tête de la page.

5.3.35.3.35.3.35.3.3 ExerciceExerciceExerciceExercice Supprimez le message Propulsé par Drupal qui s’affiche en bas de la page (voir Figure 37).

Drupal qui s’affiche en bas de la page (voir Figure 37). Figure 37. Message à supprimer.

Figure 37.

Message à supprimer.

5.45.45.45.4 LesLesLesLes droitsdroitsdroitsdroits

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 « Sept à huit », 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.

M2 BDIA – Semestre Automne 2012 TP1 – Prise en main de Drupal 7

24

Reconnectez-vous en administrateur (login :admin, mdp :motdepasse) en utilisant le bloc Connexion utilisateur (voir Figure 38)

 
 
 

Figure 38.

Le bloc « Connexion utilisateur ».

Dans le menu d’administration, ouvrez le Menu Personnes ;

Cliquez sur l’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 « Postez des commentaires » qui autorise l’envoi de commentaires ;

Cochez également « Sauter l’approbation des commentaires » qui permet aux commentaires d’être publiés sans être modérés par les administrateurs (voir Figure 39).

être modérés par les administrateurs (voir Figure 39). Figure 39. La gestion des droits sur le

Figure 39.

La gestion des droits sur le module Comment.

Cliquez sur Enregistrer les droits d’accès

Cliquez à nouveau sur Se déconnecter (en haut à droite de la page)

Essayez de poster un nouveau commentaire

M2 BDIA – Semestre Automne 2012 TP1 – Prise en main de Drupal 7

25

Semestre Automne 2012 TP1 – Prise en main de Drupal 7 25 Figure 40. Un commentaire

Figure 40.

Un commentaire posté en anonyme.

Pour la suite du TP, reconnectez-vous en mode administrateur.

5.55.55.55.5 LesLesLesLes modulesmodulesmodulesmodules

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

Menu Modules

Cochez la case « activé » du module Poll (Sondage)

Remarquez par ailleurs la présence du module RDF (activé par défaut dans Drupal 7).

présence du module RDF (activé par défaut dans Drupal 7). Figure 41. Cliquez sur Enregistrer la

Figure 41.

Cliquez sur Enregistrer la configuration

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

Cliquez sur Contenu

Puis sur le lien + Ajouter un contenu

Page d’administration des modules.

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

M2 BDIA – Semestre Automne 2012 TP1 – Prise en main de Drupal 7

26

Cliquez sur le lien Sondage et créez un nouveau sondage comme sur l’illustration suivante (voir
Cliquez sur le lien Sondage et créez un nouveau sondage comme sur l’illustration suivante (voir Figure 42). Recopiez
le texte depuis le fichier Textes_articles.pdf (cliquez sur le bouton « Plus d’options » pour pouvoir ajouter plus de
choix au sondage).
Figure 42.
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 !

Cliquez sur Enregistrer Vous pouvez tester votre sondage ! Figure 43. Le sondage fonctionne. Un module

Figure 43.

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

5.5.15.5.15.5.15.5.1 InstallationInstallationInstallationInstallation d’und’und’und’un modulemodulemodulemodule externeexterneexterneexterne 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.

M2 BDIA – Semestre Automne 2012 TP1 – Prise en main de Drupal 7

27

5.5.1.15.5.1.15.5.1.15.5.1.1 TéléchargementTéléchargementTéléchargementTéléchargement etetetet installationinstallationinstallationinstallation dudududu modulemodulemodulemodule Avant d’installer un nouveau module, il faut activer le module permettant de vérifier les mises à jour existantes pour les modules précédemment installés. Il s’agit du module Update Manager, qu’il faut activer dans la liste des modules Drupal (Menu d’administration > Modules).

Une fois ce module activé, le lien « Installer un nouveau module » apparaît dans la fenêtre Modules (voir Figure 44). Nous pouvons maintenant aller chercher la source du module à installer.

maintenant aller chercher la source du module à installer. Figure 44. Lien « Installer un nouveau

Figure 44.

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

Cliquez sur le bouton Search

l’option Modules Cliquez sur le bouton Search Figure 45. Recherche d’un module par son nom sur

Figure 45.

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

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.3), faites un clic droit sur le lien tar.gz et choisissez l’option Copier l’adresse du lien.

Retournez dans Drupal, et allez dans le menu Modules

M2 BDIA – Semestre Automne 2012 TP1 – Prise en main de Drupal 7

28

Cliquez sur le lien « Installer un nouveau module »

Collez l’URL précédemment copiée dans le champ « Installer depuis une URL » (voir Figure 46)

Cliquez sur le bouton « Installer ».

(voir Figure 46) Cliquez sur le bouton « Installer ». Figure 46. Installation d’un module depuis

Figure 46.

Installation d’un module depuis une URL.

Drupal s’occupe alors de télécharger l’archive et de l’extraire au bon endroit. Il vous reste à activer le module (cochez la case « activé » devant le module Weather, que vous trouverez dans la catégorie « Other » dans la liste des modules disponibles – voir Figure 47).

dans la liste des modules disponibles – voir Figure 47). Figure 47. Module « Weather »

Figure 47.

Module « Weather » dans la catégorie « Others ».

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

5.5.25.5.25.5.25.5.2

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

ConfigurationConfigurationConfigurationConfiguration dudududu modulemodulemodulemodule

configuration du module.

Cliquez sur le lien Configurer du module Weather

Le module Weather peut afficher deux types de blocs : 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 +Add display pour ajouter un affichage

Les options par défaut de cette page conviennent

Bouton « Enregistrer » (voir Figure 48).

M2 BDIA – Semestre Automne 2012 TP1 – Prise en main de Drupal 7

29

Semestre Automne 2012 TP1 – Prise en main de Drupal 7 29 Figure 48. Définition d’un

Figure 48.

Définition d’un nouvel affichage pour le module Weather.

Cliquez sur le lien « Add location to this display »

Choisissez le pays (France) et la ville (Dijon)

 
 
 

Figure 49.

Sélection d’un pays et d’une ville pour le module Weather.

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 « Weather : system-wide display », choisir la région Première barre latérale (voir Figure 50)

Bouton « Enregistrer les blocs »

Retournez sur la page d’accueil (voir Figure 51).

M2 BDIA – Semestre Automne 2012 TP1 – Prise en main de Drupal 7

30

Semestre Automne 2012 TP1 – Prise en main de Drupal 7 30 Figure 50. Modification du
Figure 50. Modification du bloc d’affichage pour le module Weather. Figure 51. Le module «
Figure 50.
Modification du bloc d’affichage pour le module Weather.
Figure 51.
Le module « Weather » affiché sur la page d’accueil du site.

5.5.35.5.35.5.35.5.3 ExerciceExerciceExerciceExercice –––– installerinstallerinstallerinstaller lelelele modulemodulemodulemodule DateDateDateDate Ce module permet de choisir une date depuis un calendrier. Il est disponible à l’adresse suivante :

http://drupal.org/project/date

Installez et activez le module dans Drupal (il faudra activer les sous-modules suivants : Date, Date All Day, Date API, Date Popup, Date Repeat API, Date Repeat Field, Date Tools).

5.5.45.5.45.5.45.5.4

Une interface utilisateur WYSIWYG permet de composer visuellement le résultat voulu, typiquement pour un logiciel de mise en page, un traitement de texte ou d’image. C'est une interface « intuitive » : l’utilisateur voit directement à l’écran

à quoi ressemblera le résultat final.

ExerciceExerciceExerciceExercice –––– installerinstallerinstallerinstaller lelelele modulemodulemodulemodule WysiwygWysiwygWysiwygWysiwyg

« WYSIWYG » est l’acronyme de la locution anglaise « What you see is what you get », signifiant littéralement en français « ce que vous voyez est ce que vous obtenez » ou de façon plus concise « tel affichage, tel résultat ».

Le terme est apparu lors de l’apparition d’éditeur de document HTML.

En effet, contrairement au format binaire qui nécessite une phase de compilation, les fichiers HTML sont des fichiers stockés sous forme de texte et donc lisibles par tout le monde. Les éditeurs HTML et actuellement XML proposent souvent un mode texte/source pour corriger les erreurs non modifiables en mode wysiwig/graphique (SVG). Ces erreurs apparaissent lorsque les pages proviennent d’éditeurs ne se conformant pas strictement aux standards établis par le W3C.

Dans Drupal, les interfaces WYSIWYG permettent d’ajouter des barres de boutons facilitant l’édition des contenus.

M2 BDIA – Semestre Automne 2012 TP1 – Prise en main de Drupal 7

31

Le module Wysiwyg (http://drupal.org/project/wysiwyg) implémente plusieurs éditeurs pour Drupal :

CKEditor

jWYSIWYG

markItUp

NicEdit

openWYSIWYG

TinyMCE

Whizzywig

WYMeditor

Ajoutez le module à Drupal (choisir le lien pour la version 7.x – 2.2).

Activez ce module (il sera affiché dans le groupe « Interface utilisateur » dans la rubrique Modules – voir Figure 52).

utilisateur » dans la rubrique Modules – voir Figure 52). Figure 52. Module Wysiwyg dans la

Figure 52.

Module Wysiwyg dans la liste des modules.

Configurez le module (pour chaque éditeur, il faudra télécharger les sources, puis extraire les fichiers dans des répertoires spécifiques).