version janvier 2014

Développement de sites collaboratifs avec Drupal

Jour 2Marc-Gabriel Vallières

[email protected]

Ressources du cours:http://profs.cmaisonneuve.qc.ca/mvallieres/Drupal

Version janvier 2014

Plan

• Jour 1 : Développement avec Drupal

1. Introduction aux systèmes de gestion de contenu2. Génération d'un site Drupal3. Choix d'un thème4. Développement d'un site web de base5. Recherche de contenu6. TP : développement d'un site de diffusion d'information

pédagogique7. Utilisation des forums de discussion

Plan

• Jour 2 : Fonctions de webmestre1. Gestion des utilisateurs et des droits2. Gestion des menus et des blocs3. Gestion des téléchargements et fichiers de médias4. Définition et gestion des types de contenus

5. La modération des forums de discussion6. Exemple 1 : développement d'un wiki7. Exemple 2 : pages personnelles des étudiants8. Aperçu : la programmation !9. TP : Ajout de fonctions collaboratives au site du jour 1...

• Jour 2 : Sites web collaboratifs

• Retour sur quelques points du jour 1

Jour 2 - Thème 0…

Jour 2 – thème 0

Retour sur le jour 1...

Pour changer la page d'accueil1. Créez une nouvelle page d'accueil de type

«Basic page».2. À 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

Pour changer la page d'accueil3. Notez le numéro du noeud de cette page 4. Au menu «Configuration» du webmestre,

cliquez le lien «SYSTÈME > Informations»5. Indiquez le numéro du noeud de la nouvelle

page d'accueil sous la forme «node/#» :

Jour 2 – thème 0

Pour changer la page d'accueil

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

Exercice1. Ajoutez une nouvelle page d'accueil à votre

site comportant un texte qui apparaîtra avant les nouvelles

2. 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 noeudhttp://pfm##.aegir.cmaisonneuve.qc.ca/

3. Ajoutez deux nouvelles («Ajouter du contenu > Article») et vérifiez qu'elles apparaissent bien après le texte

Jour 2 – thème 0

Image de fond sur une page

• Il faut installer le module Background

Jour 2 – thème 0

Jour 2 - Thème 1

Jour 2 – thème 1

La gestiondes utilisateurs

et des droits

É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

É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

É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

• 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 «[email protected]» 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

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

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

3. Connectez-vous avec un de ces comptes et créez une page

4. Connectez-vous avec un autre compte et vérifiez que vous ne pouvez pas modifier cette page

Jour 2 – thème 1

Jour 2 - Thème 2

Jour 2 – thème 2

La gestion desmenus et des blocs

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

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

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

Jour 2 - Thème 3

Jour 2 – thème 3

La gestion desfichiers

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

• On peut accéder aux autres fichiers (pdf par exemple) en faisant dans une page un hyperlien vers l'adressehttp://nom-du-site/files/nom-du-fichier.pdf

Jour 2 – thème 3

Jour 2 – thème 3

WinSCP

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

Jour 2 – thème 3

http://informatique.cmaisonneuve.qc.ca/files/Calendrier2011-12.pdf

Jour 2 - Thème 4

Jour 2 – thème 4

Les types decontenus

Jour 2 – thème 4

Définition de nouveaux types

1. Créez d’abord les nouveaux types de pages avec le lien «Types de contenu» de l’élément «Structure» du menu du webmestre

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

Exercice1. Créez un type «Page perso». Ces pages ne doivent

pas pouvoir être ajoutées au menu2. 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

3. Donnez au webmestre tous les droits sur ce type de page

4. Enlevez aux utilisateurs inscrits et aux profs tout droit sur les pages de base et sur les articles /…

Jour 2 – thème 4

Exercice

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

Jour 2 - Thème 5

Jour 2 – thème 5

La modération desforums de discussion

Jour 2 – thème 5

Compte modérateur

Exemple 1

Jour 2 – exemple 1

Le développement d’un wiki

Développement d’un wiki


Exemple 2


Pages personnelles des étudiants

Pages personnelles des étudiants


Aperçu

Jour 2 – aperçu

La programmation !

Utilisation de «snippets» en langage php

1. Activez le module «PHP filter»2. Au menu «Configuration», «RÉDACTION DE

CONTENU > Formats de texte», configurez le format «PHP code» pour que seuls les administrateurs puissent l’utiliser

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

version janvier 2014

Documents