Version janvier 2014

1. Développement de sites collaboratifs avec DrupalJour 2Marc-Gabriel Vallièresmvallieres@cmaisonneuve.qc.caRessources du cours:http://profs.cmaisonneuve.qc.ca/mvallieres/Drupal Version janvier 2014

2. Plan • Jour 1 : Développement avec Drupal 1. Introduction aux systèmes de gestion de contenu 2. Génération d'un site Drupal 3. Choix d'un thème 4. Développement d'un site web de base 5. Recherche de contenu 6. TP : développement d'un site de diffusion d'information pédagogique 7. Utilisation des forums de discussion

3. Plan • Retour sur quelques points du jour 1 • Jour 2 : Fonctions de webmestre Gestion des utilisateurs et des droits Gestion des menus et des blocs Gestion des téléchargements et fichiers de médias Définition et gestion des types de contenus • Jour 2 : Sites web collaboratifs • La modération des forums de discussion • Exemple 1 : développement d'un wiki • Exemple 2 : pages personnelles des étudiants • Aperçu : la programmation ! • TP : Ajout de fonctions collaboratives au site du jour 1...

4. Jour 2 - Thème 0… Retour sur le jour 1... Jour 2 – thème 0

5. Pour changer la page d'accueil • Créez une nouvelle page d'accueil de type «Basic page». • À l'onglet «Options de publication», en bas de la page, cochez «Épingler en haut des listes», pour que le contenu de la page apparaisse au dessus des nouvelles (s'il y en a, bien sûr!) Jour 2 – thème 0

6. Pour changer la page d'accueil • Notez le numéro du noeud de cette page • Au menu «Configuration» du webmestre, cliquez le lien «SYSTÈME > Informations» • Indiquez le numéro du noeud de la nouvelle page d'accueil sous la forme «node/#» : Jour 2 – thème 0

7. Pour changer la page d'accueil • N'oubliez pas de modifier aussi le menu afin d'accéder à cette page lorsque l'élément Accueil («Home») du menu est cliqué. (Voir section «Gestion des menus» au thème 2). Jour 2 – thème 0

8. Exercice • Ajoutez une nouvelle page d'accueil à votre site comportant un texte qui apparaîtra avant les nouvelles • Vérifiez si c'est bien la page qui s'affiche lorsque vous accédez à votre site au moyen de l'URL sans numéro de noeud http://pfm##.aegir.cmaisonneuve.qc.ca/ • Ajoutez deux nouvelles («Ajouter du contenu > Article») et vérifiez qu'elles apparaissent bien après le texte Jour 2 – thème 0

9. Image de fond sur une page • Il faut installer le module Background Jour 2 – thème 0

10. Jour 2 - Thème 1 La gestion des utilisateurs et des droits Jour 2 – thème 1

11. Étape 1 : La définition des rôles • Le module «Node permissions grid» permet une gestion plus aisée des droits d'accès • On ajoute des rôles (groupes d'utilisateurs) par le bouton «Rôles» de l'onglet «Droits» du menu «Personnes» du webmestre • On définit un rôle pour chaque groupe d'utilisateurs à qui on voudra donner des droits différents des autres groupes, ou dont les droits changeront dans le temps à un moment différent des autres groupes Jour 2 – thème 1

12. Étape 2 : La définition des droits • On définit les droits de chaque groupe dans la grille accessible au moyen du bouton «Droits» de l'onglet «Droits» du menu «Personnes» du webmestre Jour 2 – thème 1

13. Étape 3 : La définition des utilisateurs • On définit chacun des utilisateurs au moyen du lien «Ajouter un utilisateur» de l'onglet «Lister» du menu «Personnes» du webmestre • On associe un rôle à chaque utilisateur • Il vaut mieux définir un second compte d'administrateur en plus du webmestre, au cas où on perdrait le mot de passe du webmestre! • Il est possible d'associer plusieurs rôles à un même utilisateur (exemple: prof et modérateur) Jour 2 – thème 1

14. Si l'adresse de courriel de l'utilisateur est @cmaisonneuve.qc.ca, spécifiez-là. Seuls ces utilisateurs pourront changer leur mot de passe!!! • Sinon, entrez «dummy@dummy.com» comme adresse de courriel, car elle ne pourra pas être utilisée par ce site. Le serveur du Collège empêche l'envoi de courriels vers l'extérieur. Jour 2 – thème 1

15. Exercice • Créez un rôle Prof et donnez-lui le droit de créer et de modifier des pages de base, mais pas de modifier les pages des autres utilisateurs ni d’ajouter de pages au menu • Créez des comptes d'utilisateurs pour tous les profs de votre département (maximum 10, si vous faites partie d'un «gros» département!) • Connectez-vous avec un de ces comptes et créez une page • Connectez-vous avec un autre compte et vérifiez que vous ne pouvez pas modifier cette page Jour 2 – thème 1

16. Jour 2 - Thème 2 La gestion des menus et des blocs Jour 2 – thème 2

17. Gestion des menus • Si votre site n'a qu'un seul menu principal, vous pouvez spécifier vers quel page chaînera un élément de menu dans l'écran de modification de cette page • Vous pouvez modifier l'ordre d'apparition des éléments dans le menu au moyen de l'élément «Menus» du menu «Structure» du webmestre • Vous pouvez modifier les titres des éléments de menu pour qu'ils soient différents des titres des pages correspondantes Jour 2 – thème 2

18. Sous-menus • Pour définir des sous-menus, il faut d'abord installer le module NiceMenus ou le module Superfish • Le thème choisi doit comporter des menus dans un bloc… Jour 2 – thème 2

19. Gestion des blocs • La localisation des blocs pour un thème donné peut être spécifiée au moyen du lien «Blocs» de l’élément «Structure» du menu du webmestre • Utilisez le lien «Aperçu des régions des blocs» pour visualiser où sont situées chacune des régions dans le thème actif • Les blocs peuvent être affichés de façon conditionnelle pour certaines pages ou pour certains utilisateurs Jour 2 – thème 2

20. Jour 2 - Thème 3 La gestion des fichiers Jour 2 – thème 3

21. Le répertoire /files • Le site Drupal a un sous-répertoire /files dans lequel le webmestre peut sauvegarder des fichiers en sftp • Ces fichiers peuvent être des images, des vidéos, des documents pdf, Word, Excel, etc. • Les images peuvent être utilisées dans des pages au moyen de la balise html «image» à l'adresse http://nom-du-site/files/image.jpg (.jpg, .gif ou .png) Jour 2 – thème 3

22. On peut accéder aux autres fichiers (pdf par exemple) en faisant dans une page un hyperlien vers l'adresse http://nom-du-site/files/nom-du-fichier.pdf Jour 2 – thème 3

23. WinSCP Jour 2 – thème 3

24. Exercice • Aucun compte sftp n’ayant été défini pour ce cours, utilisez les images suivantes dans une des pages de votre site : http://informatique.cmaisonneuve.qc.ca/files/Portes.jpg http://informatique.cmaisonneuve.qc.ca/files/LogoAndroid.jpg • Créez un hyperlien sur une des pages de votre site pour que le fichier pdf suivant puisse être accédé (calendrier scolaire 2011-2012) : http://informatique.cmaisonneuve.qc.ca/files/Calendrier2011-12.pdf Jour 2 – thème 3

25. Jour 2 - Thème 4 Les types de contenus Jour 2 – thème 4

26. Définition de nouveaux types Créez d’abord les nouveaux types de pages avec le lien «Types de contenu» de l’élément «Structure» du menu du webmestre Définissez ensuite les droits de chacun des groupes d’utilisateurs sur ces pages avec l’onglet «Droits» de l’élément «Personnes» du menu du webmestre Jour 2 – thème 4

27. Exercice • Créez un type «Page perso». Ces pages ne doivent pas pouvoir être ajoutées au menu • Donnez à tous les utilisateurs inscrits le droit de créer et de modifier ce type de page lorsqu’ils en sont le créateur, mais pas de modifier les pages des autres utilisateurs • Donnez au webmestre tous les droits sur ce type de page • Enlevez aux utilisateurs inscrits et aux profs tout droit sur les pages de base et sur les articles /… Jour 2 – thème 4

28. Exercice • Connectez-vous avec votre compte de prof (pas webmestre!) et créez une page perso décrivant vos activités Jour 2 – thème 4

29. Jour 2 - Thème 5 La modération des forums de discussion Jour 2 – thème 5

30. Compte modérateur Jour 2 – thème 5

31. Exemple 1 Le développement d’un wiki Jour 2 – exemple 1

32. Développement d’un wiki Jour 2 – exemple 1

33. Exemple 2 Pages personnelles des étudiants Jour 2 – exemple 2

34. Pages personnelles des étudiants Jour 2 – exemple 2

35. Aperçu La programmation ! Jour 2 – aperçu

36. Utilisation de «snippets» en langage php Activez le module «PHP filter» Au menu «Configuration», «RÉDACTION DE CONTENU > Formats de texte», configurez le format «PHP code» pour que seuls les administrateurs puissent l’utiliser Le webmestre a maintenant le format «PHP code» lorsqu’il crée ou modifie une page Exemple d'usage : la page d'accueil pourrait détecter l'utilisation d'un appareil mobile et faire afficher une autre page ! Jour 2 – aperçu