Administration

Front & Back

Une fois Drupal installé, nous pouvons consulter la partie BackOffice & FrontOffice :



Le BackOffice de Drupal est représenté par les barres noires et grises en haut d'écran.

Le FrontOffice de Drupal est en dessous de ces deux barres.

Le BackOffice apparait par dessus le Front, cela permet d'avoir une seule fenêtre (un seul onglet dans le navigateur) pour les 2 côtés (back & front), ce qui permet une actualisation automatique sur le front en cas de modification via le back.

Ce système (Overlay) peut être désactivé si vous préférez garder 2 parties distinctes entre le Front et le BackOffice de Drupal.

Desactiver l'overlay

Si vous souhaitez désactiver l'overlay, vous pouvez cliquer sur "bonjour admin" et ensuite sur l'onglet "modifier".



Une partie se trouve en bas de page et vous pouvez décocher la case "utiliser l'overlay".

Quelques notions

Voici quelques notions avant de démarrer dans drupal :

Un node (noeud) est un contenu.

Un bloc est une zone d'informations ou d'affichage (équivalent de widget dans wordpress).

Une région est une zone prévue pour accueillir des blocs.

Un jeton est un morceau de code entre crochet (équivalent d'un short code dans wordpress).

Un module peut aussi être nominé par le mot "plugin" ou "extension".

Le thème représente le graphisme du site.

Un type de contenu est un sujet.

Comment se connecter à son BackOffice Drupal ?

Si vous avez perdu la connexion à votre BackOffice, il faut connaitre l'url qui vous ramènera sur l'administration, il s'agit de : /user/

Par exemple : http://localhost/durpaluser/

Interface de gestion BackOffice

Si l'on fait un résumé de l'interface de gestion BackOffice Drupal :

• Icône Maison : Cette partie vous donne accès au FRONT pour un retour sur la page d'Accueil.


• Tableau de bord : Ecran personnalisable pour l'administrateur


• Contenu : Page d'administration pour gérer les contenus


• Structure : Cette partie va vous permettre de structuer les informations de votre site web (Blocs, Menus, Taxonomie, Type de contenu)


• Apparence : Cette partie vous permet de gérer le design (thème) de votre site et de personnaliser son graphisme.


• Personnes : Cette partie vous permet de gérer les internautes, les rôles et les droits d'accès


• Modules : Cette page d'administration vous permettra d'activer de nouveaux modules pour ainsi étendre les fonctionnalités de votre Drupal


• Configuration : Vaste partie de configuration pour l'ensemble du site et paramétrage des modules.


• Rapports : Permet d'avoir des informations sur le site.


• Aide : Page d'aide pour les modules

Ajouter des raccourcis

Pour démarrer, nous allons configurer notre propre BackOffice.
Pour ajouter des raccourcis dans votre BackOffice Drupal, vous allez vous rendre dans les parties suivantes :

• Barre noire > Structure > Blocs
• Barre noire > Structure > Menu
• Barre noire > Configuration > Performances
• Se rendre sur l'url : /user#overlay=admin/index

Et cliquer sur le " + " à côté de chaque titre :



La barre grise est donc une barre contenant des raccourcis menant vers la barre noire et cela permettra de se déplacer plus rapidement dans certaines parties importantes pour la suite de notre configuration.

Vous pouvez cliquer sur le lien "Modifier les raccourcis" pour les agencer, les gérer.

Modifier le thème

Nous allons cliquer dans la partie : barre noire > Apparence.
Un thème est un design de site.

• FRONT : Le thème par défaut étant activé pour le FRONTOFFICE est : Bartik 7
• BACK : Le thème par défaut étant activé pour le BACKOFFICE est : Seven 7

Si vous souhaitez changer le thème (graphisme) de votre site sous drupal 7, vous pouvez trouver des thèmes compatibles drupal 7 à cet endroit : https://www.drupal.org/project/project_theme

Dans drupal tout est changeable, nous pourrions par exemple changer le thème du BackOffice.

Pour installer un thème, nous récupérons une archive au format .zip ou .tar.gz et nous allons la placer dans le dossier /sites/all/themes/ de notre installation.

Votre thème apparait et vous devez cliquer sur "Activer et définir par défaut" (et non pas "activer")



Pour la suite du cours nous laisserons Seven et Bartik d'activé.

Modifier le logo

Pour changer le logo de Drupal, c'est dans la partie Apparence > Thème que vous devrez vous rendre, puis, cliquez sur le lien "Paramètres" du thème actif et défini par défaut.

Il faudra décocher la case "utiliser le logo définie par défaut".



Pour afficher votre logo, un autre moyen consiste à créer un bloc contenant l'image et la placer sur la région prévue à cet effet.

Installer un module

Nous allons cliquer dans la partie : barre noire > Modules.
Certains modules sont présents et actifs par défaut. D'autres modules sont présents et inactifs par défaut

Et puis, si l'on souhaite ajouter d'autres fonctionnalités sur notre site web, il faudra aller chercher nos propres modules : https://www.drupal.org/project/project_module

Nous pouvons activer le module "Update Manager" (présent en natif dans la liste) :



Ce module permettra de faire apparaitre un nouvel onglet "Mettre à jour" :



Cela facilitera la mise à jour de vos futurs modules.

Ajouter du contenu

Nous allons cliquer dans la partie : barre grise > Ajouter du contenu.
2 types de contenus sont présents par défaut dans Drupal :

• Article : nous créons des articles plutôt pour des actualités éphémères et suceptibles d'être commentées, exemple : sortie de l'iphone 7
• Page de base : nous créons des pages plutôt pour des contenus fixes dans le site, exemple : qui sommes nous, accueil, etc.

Différence entre un article et une page

• Un article est un type de contenu à destination éphémère
  exemple : la sortie du nouveau film de Brad PITT est un article. Sa durée de vie est limitée, nous prévoyons de le supprimer le mois prochain.


• Une page sera utilisée pour les contenus principaux qui composent votre site
  exemple : "accueil", "qui sommes nous", "contact".

Nous allons donc choisir "Page de base" pour créer une page d'Accueil :



Nous allons renseigner plusieurs informations :
Titre : Accueil
Corps : Ma première page : c'est la page d'Accueil !!
Format de texte : Filtred Html (cela permet de donner des droits d'écriture Html différent, nous reviendrons sur cette notion plus tard). Pour le moment, nous n'effectuerons pas de modification sur cette partie.
Paramètre du menu : Nous n'allons pas faire de changement car la page d'Accueil est la seule page déjà prévue pour être dans le menu. Pour les prochains contenus il ne faudra pas oublier de cliquer sur "Fournir un lien de menu".
Informations sur les révisions : Cela permet de consituer une journalisation et un historique des actions lorsque nous participons à la création d'un site collaboratif. Par exemple "20/03/2013 : Modification des fautes d'orthographe, il reste à ajouter du contenu relatif a tel sujet". Nous allons inscrire la date et le texte "création de la page".

Paramètre des chemins d'url : Accueil - Nous pouvons inscrire Accueil pour éviter d'avoir l'url système de drupal node/1.

Paramètre des commentaires : Fermé - nous n'avons pas de raison d'ouvrir les commentaires sur la page d'Accueil

Informations de publication : Cela permet d'indiquer qui est l'auteur du contenu ainsi que la date - nous ferons pas de changement

Option de publication : cocher Publié. cocher Promu en page d'Accueil. Epingler en haut des liste : permet de remonter le contenu en haut de page lorsqu'un listing se crée sur la page d'accueil (comportement par défaut dans Drupal).

Cliquez sur "Enregistrer".

Allons voir notre 1er contenu :

Nous pouvons remarquer la présence de l'onglet Révisions. En cliquant dessus, nous retrouvons l'historique des modifications.

Nous pouvons remarquer l'url de la page qui se nomme accueil.
Sans la réécriture d'url, l'url par défaut dans Drupal aurait été : node/1
Un node est un contenu et le numéro correspondant à l'id présent dans la base de données pour l'identifier.

Revenons à l'Accueil de notre site web en cliquant sur l'icone de la maison :



Notre page d'accueil est bien présente mais nous pouvons cliquer dessus, ce qui démontre que nous sommes sur un affichage sous forme de listing et non pas sur la page d'Accueil elle même.

Comment créer une page d'Accueil dans Drupal ?

Une fois que vous avez créé votre première page, vous allez vous rendre dans la barre noire > configuration > informations et régler la page d'accueil sur le contenu que nous avons créé au préalable :



admin/config/system/site-information> Se rendre dans Index > Informations : Définir la page d'accueil sur le nouveau noeud qu'on à créé et tester "Accueil".

Dorénavant lorsque vous cliquerez sur l'icône de la maison Drupal ou encore sur le logo, vous verrez que votre page d'accueil sera correctement affichée.

Créer un type de contenu

Les avantages dans la création d'un nouveau type de contenu sont multiples :

1. En GENERAL : permettre des regroupements de contenu en fonction d'un sujet


2. En FRONT : permettre de faire des affichages standardisés


3. En BACK : permettre de n'oublier aucune information (et forcer à les saisir dans l'ordre) lors de la création d'un contenu.

Actuellement nous avons 2 types de contenu que nous connaissons bien : article et page.

Avant de créer un type de contenu supplémentaire, il faut identifier les sujets sur votre site, vous faites des fiches restaurant (comme lafourchette), il vous faut un type de contenu restaurant !

Vous créer un site pour un garage pour présenter des véhicules à la vente ? il vous faut un type de contenu vehicule !

Partons sur le sujet des véhicules (et oui il faut bien en choisir un :D), nous allons nous rendre dans la partie : barre noire > structure > type de contenu.

Ensuite, nous allons cliquer sur le lien : Ajouter un type de contenu.



Nom : vehicule

Description : Créer des fiches véhicules !

Paramètre du formulaire de contribution, Aperçu avant soumission : desactivé.

Options de publication : -"promu en page d'accueil" ne sert plus à rien car nous avons arreté l'effet listing sur la page d'accueil pour y mettre une page fixe.

Paramètre d'affichage : -décochez : Affichez les informations sur l'auteur et la date.

Paramètre de commentaire : -Désactiver Aperçu du commentaire

Paramètre de menu : -Menu principal

Une fois cette étape passée, nous allons cliquer sur "enregistrer et ajouter des champs".

Si vous n'avez pas fait ce choix, vous pourrez toujours revenir dessus en cliquant sur "gérer les champs".

Nous allons ajouter plusieurs champs :

• modele (modèle du véhicule) > texte > champ texte
  • Taille maximal : 20
  • Champ requis : obligatoire
  • Texte d'aide : Veuillez selectioner le modele du véhicule


• km (kilométrage du véhicule) - champ entier
  • Champ requis : obligatoire
  • Texte d'aide : Veuillez selectioner le kilométrage du véhicule


• carburant (type de carburant pour le véhicule) > Liste (texte) > Case à cocher
  • Liste des valeurs autorisées : essence, diesel, electrique (un choix par ligne)/li>
  • Texte d'aide : Veuillez selectioner le carburant du véhicule


• photo (photo du véhicule) image > champ image
  • Extensions de fichier autorisées : png, gif, jpg, jpeg
  • Texte d'aide : Ce serait plus représentatif avec une image !!!
  • Répertoire du fichier : vehicule


• prix (prix du véhicule dans notre garage) - champ entier
  • Champ requis : obligatoire
  • Texte d'aide : Veuillez selectioner le prix du véhicule

Une fois que vous avez créé vos champs, retournez dans la partie : Ajouter du contenu.

Nous pouvons constater la présence de notre type de contenu véhicule !



En choisissant de créer des contenus de type véhicule, vous retrouverez, en plus des autres champs (par défaut), la liste des champs que vous avez créés :


De cette manière, vous êtes certain que :

- Vous n'oublierez aucune information (vous, ou la personne a qui vous confierez la gestion du site).

- Vous ne publierez pas les informations de manière déstructurée, chaque information aura sa place dans sa case.

Je vous invite à créer plusieurs fiches véhicules de manière a avoir du contenu disponible pour la suite de ce cours.



Exemple, si nous souhaitons faire des fiches de véhicule sur notre site, nous allons toujours répeter les informations : couleur, poids, dimensions, puissance, carburant, etc.

Il serait plus judicieux de créer un type de contenu "vehicule" avec des (champs personnalisés) cases de saisie "couleur", "poids", "dimensions", "puissance", "carburant" afin de ne jamais oublier ces informations sur les fiches.

Problématique : L'administrateur risque d'oublier parfois certains informations.

Solution : Création d'un nouveau type de contenu et champs personnalisé.

Organiser vos champs personnalisés

Si vous commencez à avoir beaucoup de champs personnalisés, il serait utile d'installer et activer le module FIELDGROUP.

FIELDGROUP permet de regrouper des champs personnalisés.

Url de téléchargement officielle : Field Group

Nous retournons sur la partie suivante : barre noire > modules.



Structure > Type de contenu > Vehicule > Gérer les champs

Ajouter un nouveau groupe : onglets (Groupe Accordéon)

Ajouter un nouveau groupe : onglet1 (Element Accordéon)

Placer des champs tels que body ici.

Ajouter un nouveau groupe : onglet2 (Element Accordéon)

Placer des champs tels que carburant, poids, etc.

Ajouter un nouveau groupe : onglet3 (Element Accordéon)

Placer des champs tels que kilométrage, puissance, etc.

Structure > Type de contenu > Vehicule > Gérer l'affichage

onglets (groupe d'onglets verticaux)

onglet1 (onglet vertical)

onglet2 (onglet vertical)

onglet3 (onglet vertical)

Possibilité d'ouvrir/fermer par défaut les onglets.

Dans le BackOffice, si vous retournez dans la création de contenu de type vehicule vous devriez voir un système d'onglets pour un affichage plus ergonomique.

Drois d'accès, rôles et utilisateurs

Après la configuration de module, nous nous rendons compte que la partie droits d'accès est importante dans Drupal.

Par exemple, si vous vous rendez dans la partie : barre noire > structure > Blocs (ou barre grise blocs).

Placez le bloc nommé "Formulaire de recherche" dans une région (si ce n'est pas déjà le cas).

Retournez sur le Front avec votre navigateur (le navigateur où vous êtes connecté en tant qu'admin), à priori, pas de soucis, la case de recherche apparait correctement.

Prenez un 2e navigateur (les cookies de connexion sont différents d'un navigateur à un autre) et rendez-vous sur votre site web, en tant qu'internaute non connecté, vous n'aurez pas accès à la case de recherche

Vous devrez aller dans la partie : barre noire > personnes > Droits > cliquer sur Utiliser la recherche - pour les utilisateurs annonyme et utilisateurs identifiés.

Comment définir un rôle ?

Qu'est-ce qu'un rôle ? Un rôle est un regroupement de droits qui peut être attribué à un groupe d'utilisateurs (regroupement d'utilisateurs)

Par exemple, sur un site comme leparisien, vous vous doutez bien qu'il n'y a pas qu'un seul administrateur pour gérer tout le site, ils sont des dizaines ou des centaines.

Bien entendu, un journaliste qui écrit un article n'aura pas les droits pour changer le logo du site web.

La personne qui vend des espaces publicitaires sur le site n'aura pas accès à la gestion des utilisateurs, etc.

Chaque rôle est bien défini et compartimenté.

Si vous voulez reproduire le même genre de comportement avec Drupal, vous devrez vous rendre dans la partie : Barre noire > Personnes> Droits> Rôles (sous l'onglet) - admin/people/permissions/roles. Nous allons créer un nouveau rôle : redacteur

Revenons dans la barre noire > personnes > Ajouter un utilisateur > Créons un nouveau compte :

Nom d'utilisateur : Nicolas

Adresse : nicolastest@gmail.com

Mot de passe : AzErTy2015

Rôles : Redacteur --- notre rôle précédemment créé est bien disponible ! Ajoutons lui.

Retournons dans la partie : barre noire > personnes > droits

Cochez les cases correspondant aux fonctionnalités auxquelles vous voulez lui donner les droits (pour le rôle redacteur) sans oublier de lui activer la barre grise et noire d'administration (si nécessaire) par l'option.

Nous allons cocher :

Accéder à la page de vue d'ensemble du contenu

Article : Créer un nouveau contenu

Article : Modifier son propre contenu

Article : Supprimer son propre contenu

Toolbar - Utiliser la barre d'outils d'administration

Prenons un autre navigateur et connectons nous avec ce compte (nicolas - rôle redacteur) :



Au vu de la barre noire et grise d'administration, l'opération à bien fonctionné, ces droits sont limités et nous avons pu lui laisser uniquement la gestion que l'on souhaitait lui attribuer.