Que savez-vous de Drupal ?

Comment vous sentez-vous ?

• Sites statiques en HTML, création page par page
  • fastidieux à maintenir
• Sites dynamiques, Framework proposant des API
  • briques de base pour le code, standardisation
  • beaucoup de développement
• CMS : Système de gestion de contenu
  • briques de fonctionnalités
  • pas/peu de développement

• Wordpress
  • grande communauté
  • nombreux plugins et thèmes
  • qualité/sécurité du code laisse à désirer hors du cœur
  • pratique pour les projets statiques/légers

• Joomla
  • plugins nombreux mais peu maintenus / payants
  • communauté moindre

Content Management Framework

Drupal = CMS + framework

• de très nombreux modules disponibles
• communauté active (http://drupal.org & http://drupalfr.org)
• popularité et renommée grandissante
• une version 8 entièrement réécrite

• Whitehouse.gov
• Tesla
• Washington Post
• Twitter, LinkedIn, Nvidia developer Documentation
• Economist.com
• Harvard community
• Stanford school
• Grammy.com
• Amnesty.org
• Danone

• Guerlain
• McDonalds
• Cartier
• Gouvernement.fr / Senat.fr / Sites des ministères
• SNCF
• Eurostar
• Orange Business Services
• Rue89

• Pré-requis
  • Environnement Apache/Mysql/Php
  • Windows : Easyphp/Xampp/Wamp -> Acquia Dev Desktop plus intégré
  • Linux : LAMP
• alternatives : Nginx (ou Microsoft IIS), PostgreSQL, SQLite (ou Oracle, MSSQL)
• http://drupal.org/requirements

• Créer une base de données vide
• Décompresser l'archive Drupal dans le répertoire serveur
• Accéder à l'application via un navigateur
• Dérouler le processus d'installation :
  • Connexion à la BD
  • Paramètrage du site et du compte admin
  • Création et accès au site
  • Visiter Administrer > Rapports > Tableau de bord

Cœur de Drupal
Modules communs à tous les sites
Répertoire d'upload par défaut

Fichiers de configuration


Thèmes communs à tous les sites

• Choisir le module : http://drupal.org/project/modules
• Version courante (alpha, beta, dev, stable)
• Utilisation
  • versions D5, D6, D7, D8
  • Module peu / très utilisé
• Intégration avec d'autres modules
  • Intégration future facilitée
• Nombre de bugs ouverts
  • Vitesse de traitements des bugs
• Incompatibilité avec des modules

http://simplytest.me pour tester le core ou ses modules rapidement

• Exemple avec 8.x-2.1
  • 8.x-2.1 => Pour Drupal 8
  • 8.x-2.1 => Version majeure du module
  • Changement d'API par rapport à la 1.x
  • 8.x-2.1 => Version mineure du module
  • Bug fixing par rapport à la 2.0
• 4 dénominations essentielles
  • Dev : module en développement
  • Alpha : module utilisable, API non figées
  • Beta : API en cours de gel
  • RC : tests finaux avant version stable

• Méthodes :
  • Décompresser dans /modules
  • Utiliser l'interface d'installation
  • Utiliser la ligne de commande
• Lire le README.txt et le INSTALL.txt
• Activer et Configurer
  • Paramètrer
  • Configurer les droits d'accès

• Structure du menu d'administration
• Raccourcis
  • créer des raccourcis /user

• Paramètrage de création de compte
  • Configuration > Personnes > Paramètres de compte
• Liste des utilisateurs
  • Personnes
  • Filtres par rôles/droits d'accès/statut
  • Actions en batch
• Ajout de champs sur les utilisateurs

• Ensemble de droits gérés par l'administrateur
  • Personnes > Droits
  • Personnes > Rôles

• Un workflow très simple dans le cœur (Brouillon / Publié)

  • MAIS pas de permission spécifique

• Content moderation

  • Gestion de workflow complète

• Content moderation
  • Création de nouveaux états et de nouvelles transitions

• Article / Page... Actualité / Partenaire...
• Créés
  • Manuellement
  • Par des modules
• Paramètres
  • Options de publication (Publié, Épinglé, Promu en page d'accueil)
• Libellé du titre

• Structure > Types de contenu

• Gestion des champs

  • Paramètres d'affichage des champs

• La gestion des images (Configuration > Styles d'images)

• La gestion des commentaires (attention au type de commentaire)

• Compléments :

  • Voir la configuration de cKEditor

• Création de nœuds (nodes)

• Contenu > Créer un contenu

• Formulaire d'édition

  • Edition des champs
  • Paramètrage du menu = Ajout d'un item de menu
  • Révisions
  • Informations/options de publication

• Liste des contenus (nœuds)

  • Filtre par type de contenu / statut / langue
  • Actions batch
  • Filtrer la liste

• Action en masse sur le contenu

• Définissent si un champ doit apparaitre et comment il doit apparaitre (via un de ses formatter)
• Les modes d'affichages sont fournis par les modules
• Drupal Core
  • Par défaut
  • Full
  • Teaser
  • RSS
  • Résultat de recherche
• Créer de nouveaux modes

Si le mode d'affichage n'est pas défini pour un type de contenu, celui par défaut sera pris en compte

• Définissent si un champ doit apparaitre
• Fonctionnent comme pour l'affichage
• MAIS
  • Aucun moyen de les utiliser avec seulement le core
  • Voir le module Form Mode Manager

• Permettent d'organiser le contenu dans la page
• Uniquement pour la zone de contenu

• Layout Builder Restrictions
• Layout Builder Everywhere
• Layout Builder UX

• Catégorise le contenu
  • notion de vocabulaire
  • termes de taxonomie
• Possibilité de créer plusieurs vocabulaires, qui peuvent être partagés par plusieurs types de contenu

• Attacher un ou plusieurs vocabulaires via un champ à paramètrer dans le type de contenu
• À la création d'un terme, création d'une page associée qui affiche la liste des contenus associes à un terme
• Possibilité de créer des termes à la volée (tagging)
• Ou de choisir parmi un liste définie (selection)

• Menus basiques
  • Menu principal
  • User menu
  • Tools / Administration
  • Footer
• Possibilité de créer des menus personnalisés
• Chaque menu crée un bloc correspondant

• Création d'un élément de menu
  • Par l'administration
  • À la création d'un nœud
• Possibilité de désactiver les éléments de menu
• Possibilité de hierarchiser les éléments de menu
• Création d'éléments sans lien -> Dans le cœur en 8.2 (novembre 2016)
• Synchronisation entre une taxnomie et un menu -> Taxonomy Menu
• Ajout d'attributs ('target', ...) : Link Attributes widget

Les éléments de menus sont affichés à l'utilisateur seulement s'il a les permissions d'accèder à sa cible

• Les régions d'un thème
• Création de blocs :
  • Par des modules
  • Manuellement
  • Views
• Paramètres d'affichage:
  • Par rôle,
  • Type de contenu,
  • URL

• Structure > Blocs
  • Choix du thème
  • Ordonner les blocs
• Placer des blocs dans des régions
• En Drupal 8, TOUT est bloc (logo, fil d'Ariane, ...)

• Choix du positionnement pour chaque thème actif
• Paramètres d'affichage:
  • Par rôle,
  • Type de contenu,
  • URL

• Comme les types de contenu, on peut créer des "types" de blocs
  • Blocs de publicité, bloc vidéo, ...
• Attention, pour le moment, pas de permissions spécifiques

• Listing de contenu

• 2 étapes :

  • Récupération et filtrage des données
  • Choix du plug-in d'affichage

• Permet de créer bloc, pages, RSS, excel, JSON, cartes, etc.

• Les modules peuvent fournir des vues par défaut (ex: Le cœur)

• Interface simplifiée

• Champs
  • Données a afficher
• Filtrer les données
  • Type de contenu, Taxonomie...
• Filtre exposé
• Ordre de tri
  • date de publication, titre...
• Relations
  • jointures sql
• Filtres contextuels
  • Ajout d'un filtre dynamique dans l'URL

• Gestion de l'affichage
  • Style = mise en forme
• Style de ligne = Données a afficher
• Nombre d'élément a afficher
• pagination
• messages d'en-tête / pied de page / texte de page vide
• Mode d'affichage
  • Page
  • Bloc
  • Flux RSS
  • ''Fichier attaché''

• Habillage graphique front-office et back-office
  • http://drupal.org/project/themes
• Dans /themes
• Paramètrage différent selon le thème
• Possible intégration avec le module color
• Chaque thème ajoute son propre CSS avec celui des modules et surcharge les templates par défaut des modules grâce aux suggestions

• Création d'un thème
• Utiliser un « starter » thème
  • Exemple: Zen, Bootstrap, Omega
  • Gain de temps
  • Classes CSS préexistantes
  • Documentation
  • Réutilisabilité

• Templates
  • html.html.twig, page.html.twig, node.html.twig, block.html.twig
  • page-front.html.twig, node-blog.html.twig, node-18.html.twig
  • views-views--{nom de la vue}.html.twig
  • views-view-field--{nom du champ}.html.twig

Exercice

• Installer le thème Adminimal
• Installer le thème Writer

• Configurer > Personnes : Paramétrage/blocage de comptes (module Ban)
• Configurer > Système : Informations et Cron
• Configurer > Développement : Erreurs et Maintenance
• Rapports > Rapport d'état : monitorer son site
• Rapports > Erreurs récentes : monitorer son site
• Rapports > Statistiques : Module Statistics du cœur (mais il ne couvre pas ce qu'attendent les gens, préférer Google Analytics)

• Rapport > Mises à jour disponibles (module Update manager)

ATTENTION : Toujours faire une sauvegarde des fichiers et de la base de données de façon préalable.

• Télécharger la nouvelle version
• Supprimer l'ancienne version
• Ajouter la nouvelle version
• Aller dans « Rapports > tableau de bord »
• Repérer la ligne "Mise à jour de la base de données"
• Si une mise à jour est nécessaire suite aux modifications, un lien apparait.
• Cliquez sur le lien et suivre les instructions

• Instructions sur https://www.drupal.org/node/2700999
• Mettre le site en mode "maintenance"
• Supprimer les fichiers dans /code, /vendor, et à la racine du site
• Remplacer par les nouveaux fichiers
• Décompresser la nouvelle version du cœur

• https://github.com/drush-ops/drush

• Exécution d'installation et de mise à jour en ligne de commande

  • gain de temps
  • administration simplifiée
  • nombreuses commandes et support par les modules

• Liste des commandes : https://drushcommands.com/

• Disponible sous Linux

• Relativement supporté sur Windows (pour Drupal 8, installer avec Composer)

• https://drupalconsole.com/

• Inspiré de la Symfony Console

• Liste des commandes : drupal list

  • drupal list | grep grenerate (liste les commandes ne concernant que generate)

• Disponible sous Linux / Windows / MacOS

• Version 1.0.0-rc10

• plus de 300 000 téléchargements

• Configuration Migration Interface

• Configuration > Configuration synchronization

• Export global : pas conseillé

• Export au détail : Blocs, Types de contenus, Champs, Rôles ...

• Fichiers yml

• Remplace le module Features de Drupal 7

• Module Backup & Migrate

  • Sauvegarde de la base de données
  • Sauvegarde des fichiers
  • Pas encore stable pour D8

• Script shell maison

• Commandes drush

  • drush archive-dump
  • drush archive-restore
  • drush sql-dump
  • drush sql-client

• Traditionnel - Partage des modules

  • Décompresser Drupal
  • Créer les répertoires dans /sites/ avec les noms des domaines
  • Copier le contenu de /sites/default dans les sous-répertoires.
  • Lancer l'installation classique via le navigateur

• Module Domain access - Partage des données

  • Basé sur 1 instance (même base de données,  même code)
  • Facilité d'administration
  • Partage de contenus, utilisateurs, blocks, etc.

• https://www.palantir.net/blog/multi-headed-drupal

• Cache activé par défaut

  • Fonctionne très bien pour les anonymes

• Intégration Varnish, Redis, Memcache, CDN, etc.

• Module path (core) et Pathauto
• Recherche et métadonnées > Alias d'urls
• Gestion de la ré-écriture automatique
  • Selon les types de contenu
  • Selon la taxonomie
• Régénération d'urls en batch
• Création à partir de tokens

• Sorte de variables affichant certaines données en fonction d'un contexte
• Global
  • nom du site
  • date actuelle
• Node
  • titre
  • champs
  • date
• Utilisateur
  • nom d'utilisateur
  • date de dernière connexion

Et bien d'autres

• Méta-données intégrées dans le code HTML des pages du site
• à définir pour chaque contenu
• paramétrage pour la page d'accueil
• possibilité d'ajouter de nombreux tag

• Génération d'un fichier sitemap.xml à la racine avec les urls du site (parsing par les robots de référencement)
• Paramétrage pour définir quelles pages sont à inclure / exclure
• Reconstruction automatique au lancement du cron

Module Google Analytics

• Code à renseigner, script ajouté à toutes les pages

Sémantique

• Metadonnées pour l'affichage dans les résultats de recherche
• Inclus dans le cœur de Drupal (module RDF)
• Aujourd'hui, on va préférer le module Schema.org Metatag

Redirect

• Gestion des redirections

• 4 modules présents dans le coeur
  • Language (gestion des langues du site)
  • Interface Translation (interface de traduction, administration du site en FR)
  • Configuration Translation (traduction de la configuration)
  • Content Translation (traduction du contenu)

• Ajout de langage
• Gère également si la langue s'écrit de gauche à droite

• Activé automatiquement si on choisit l'installation dans une autre langue
• Permet de combiner différentes méthodes de détection de langue

• Interface de traduction du back-office

• Module "Content Translation"
• "Contenu" =
  • Nœuds
  • Blocs
  • Menus
  • Taxonomie
  • Utilisateurs

• Activation du multilinguisme sur le type de contenu
  • (ou utilisateur, vocabulaire, ...)
• Stratégie de langage par défaut (selon les profils, droits, ...)

• Onglet "Traduire" pour chaque contenu
  • Tableau de synthèse du statut de traduction pour toutes les langues
  • Ajout d'une traduction par langue

• Attention, il faut paramétrer les champs qui peuvent se traduire !
• Administration > Configuration > Langue et région > Langue du contenu et traduction

• Pour chaque bloc dans l'onglet ''Configurer le bloc''
  • Restriction du bloc à certains langages

• Tout le reste du site...
• Page d'accueil, 404, ...
• Administration > Configuration > Langue et région > Traduction de la configuration

• 2 stratégies :
  • Créer un menu par langue
  • Traduire un menu, qui comprendra alors des éléments de chaque langue (pas tous affichés)

• Module Media Library

• Media Initiative
  • http://www.drupalmedia.org
  • Suite de modules (DropzoneJS...)

• Module Simplenews

  • Gestion des abonnements
  • Gestion des envois instantanés ou asynchrones
  • Gestion de plusieurs catégories de newsletters

• Gestion des souscriptions seules

  • Service externe : Mailchimp (ou d'autres, Mailjet, ...)
  • Solution recommandée aujourd'hui

• Utilisation du module Webform
  • Module le plus complet à ce jour
  • Version actuelle suffisament stable
  • Pack de plusieurs modules
  • Visualisation/export des soumissions
  • Champ "signature électronique"
  • Possibilités de layout flexbox directement

• Webform
  • Création -> utilisation de fichiers YML

• Webform
  • Activation de Webform UI
  • Editeur visuel

• Webform
  • Nombreux choix de configuration
  • Gestion des droits par groupes/utilisateurs
  • Configuration des emails
  • Consultation/Export des soumissions

• Search API
  • Apache Solr (module Search API Solr Search)
  • ElasticSearch (module Elasticsearch Connector)
• Gestion des facets, des fichiers, de l'auto-complétion avec des modules additionnels

• Utilisation de fonctionnalités d'administration depuis le "Front-end"

• Edtition en "live"
  • Nom du site, slogan
  • Noms / liens des menus
  • ...

• Positionner des blocs
  • Affichage, selection de la région

• Positionner des blocs
  • Selection du bloc

• https://www.drupal.org/core/roadmap
• À venir
  • CMI 2.0
  • Refonte du Back-office
  • Mises à jour automatiques

Transférer fichiers et données

Pour le passage en production

• Attention au fichier settings.php, services.yml
• Pathologic pour réparer les chemins cassés
• https://microserve.io/blogs/drupal-go-live-checklist-revisited

Pour le développement

• Stage File Proxy
• Désactiver les mails Reroute Email
• Se faire passer pour un utilisateur Masquerade
• Une URL à connaître : /core/rebuild.php (vide les caches)

• Configuration initiale (multilinguisme, workflow, metatag, ...)
• Formats d'images, directement à partir des maquettes
• Types de contenu
• Views
• Mise en page (blocs, panels ou display suite ou ...)
• Intégration graphique

• Développements spécifiques ou modules additionnels (flags, rules, ...)

• Problème : aucune intégration graphique avant la fin => incompatible avec une livraison régulière...

• https://makina-corpus.com/blog/metier/2016/comment-creer-un-site-web-avec-drupal

• Configuration initiale => style guide, charte graphique par défaut
• Formats d'images
• Types de contenu => templates de contenu
• Views => templates de Views
• Mise en page => finition du template
• Développements spécifiques ou modules additionnels (flags, rules, ...)
• Intégration graphique des derniers modules

• Créer un article
• Le modifier en créant une révision
• Modifier son résumé pour la page d'accueil
• Créer une page à l'URL "/a-propos"
• Créer un article sans le publier
• Le publier en modifiant la date de publication à hier
• Retirer tous les articles déjà écrits de la page d'accueil
• Changer les paramètres d'article pour que les révisions se créent par défaut
• Poster quelques commentaires sur le site, les retirer, tout en ajoutant la page de gestion des commentaires dans les raccourcis

• Créer un compte utilisateur "communication"
• Modifier ce compte pour lui mettre comme mot de passe "toto"
• Créer un rôle "webmaster" et affecter l'utilisateur "communication"

• Mettre le bloc des derniers commentaires en haut de la barre de gauche
• Mettre le bloc indiquant les utilisateurs actuels sur le site sur la barre de droite, uniquement pour les administrateurs
• Créer un bloc "Bienvenue sur le site" et ne l'affiche que sur la page d'accueil (au-dessus du contenu)
• Supprimer le titre du bloc "Navigation"
• Déplacer le bloc de recherche dans la zone d'en-tête

• Créer un lien vers le blog de ma société (http://makina-corpus.com/blog) dans le menu principal
• Ajouter le lien vers la page "à propos" dans le menu du pied de page
• Créer un tag "important", tagger quelques contenus, et mettre un lien dans le menu principal vers la page de taxonomy
• Mettre les liens "Créer une page", "Créer un article" visibles en permanence (dépliés dans le menu)

• Modifier le format de text "Filtered HTML" pour que les H2, H3, H4 puissent être acceptés
• Changer le nom du site
• Changer le texte de la page 404