Dans nos formations à la construction de site en Drupal, de nombreux concepts, souvent nouveaux pour les stagiaires, sont abordés. Ils repartent souvent des idées plein la tête, mais un peu perdus par rapport aux possibilités offertes.

Il est important de leur proposer une méthode pour organiser l'ensemble des fonctionnalités de Drupal pas à pas. C'est ce que je présente ici.

1. Prototypage

Dans un certain nombre de situations, plusieurs modules ou solutions Drupal pourront correspondre à la fonctionnalité que vous souhaitez réaliser. La première étape sera donc d'identifier le ou les module(s) répondant le mieux à votre besoin, en les testant intensivement.

Certains des modules que vous allez tester ne sont pas forcément stables, et les tester directement durant votre développement vous ferait perdre du temps. Je recommande donc une phase de prototypage au démarrage du projet, sur une instance Drupal que vous pourrez réinitialiser facilement et rapidement.

Les modules possèdent parfois un lien direct vers leur page de configuration, servez-vous en si vous ne trouvez pas l'interface en question :

2. Configuration basique du site

En fait, il serait possible à cette étape de passer sur la plupart des menus de la page de configuration :

Mais nous préférons nous concentrer au début sur ce qui constitue la base du site : fonctionnalités issues des modules Pathauto, Metatag, Multilinguisme, Workflow, …

Pourquoi commencer par ça ? Drupal étant un système de gestion de contenus, la plupart de ses configurations concernent des types de contenu, et commencer par cette phase permet de ne pas être obligé de trop souvent revenir en arrière sur la gestion des types de contenu, puisque les fonctionnalités seront disponibles lors de leur création (voir plus bas).

D'un point de vue plus orienté projet, ces fonctionnalités font souvent l'objet d'une demande spécifique dans un cahier des charges, et il est souvent possible de faire correspondre un module Drupal à un paragraphe du cahier des charges, permettant une couverture des exigences précise.

3. Styles d'images

Pour avancer un peu dans le développement du site Drupal, autant commencer par une petite tâche facile, que l'on peut effectuer directement à partir des maquettes, d'autant que l'on aura besoin de ces styles dans la suite des étapes :

Ces styles d'images peuvent être rapidement mis en place, et permettent au passage de valider que les maquettes utilisent des dimensions cohérentes entre les différents écrans.

4. Types de contenus

La véritable base d'un site Drupal :

C'est souvent à cette étape que la taxonomie sera créée également. C'est probablement la phase la plus longue, et celle qui va lever beaucoup de détails (sur les droits d'accès de création des différentes données, sur les champs disponibles, leur caractère obligatoire, multiple, …).

5. Views

Puisque les types de contenus sont opérationnels, il est temps de générer les différentes reprises de ces contenus, grâce à l'essentiel module Views :

Cela va comprendre : pages d'accueil de rubriques reprenant tous les contenus de cette rubrique, blocs de listings d'actualités ou d'événements devant être repris en page d'accueil. On va générer ici une bonne partie des pages / blocs de notre site, qu'on utilisera dans les étapes précédentes.

6. Arborescence

Une fois les Vues (notamment de type "Page") créées, il est temps de les organiser dans l'arborescence du site :

Nous réalisons cette étape maintenant, car les menus génèrent des blocs dont nous aurons besoin à l'étape suivante. Mais cela permet également de mettre en place la plupart des éléments de la navigation principale sur la plupart des sites organisés selon une arborescence "accueil - rubrique - contenu" (ou "accueil - catégorie - produit" si on est dans une optique plus commerciale).

7. Mise en page

Drupal possède en standard de nombreuses options pour la mise en page. La première, issue du cœur de Drupal, est constituée par les blocs :

Nous disposons ici notamment des blocs issus des Views et des Menus créés lors des étapes précédentes. Le site commence alors à prendre forme. D'ailleurs, si vous générez des contenus à cette étape (par exemple avec le module Devel Generate), votre site commencera à ressembler aux maquettes (avec beaucoup d'imagination ;-)).

Pour des options de mises en page plus évoluées, on se tournera vers des modules comme Display Suite ou Panels, qui constituent des options bien plus puissantes, mais aussi souvent plus complexes à mettre en place (notamment Panels).

8. Intégration graphique

Une grosse partie des fonctionnalités est désormais réalisée. Il est donc temps de passer à l'intégration graphique.

Nous avons réalisé une partie de la mise en page dans les étapes précédentes, il est temps d'affiner avec des CSS (car il est certes possibles de faire presque tout avec certains modules de la communauté, mais c'est parfois beaucoup plus coûteux en temps que d'utiliser quelques lignes de CSS), et, si besoin, d'éventuellement modifier quelques templates Drupal.

Vous noterez que les templates Drupal 8 présente beaucoup moins de balisage que dans les versions précédentes de Drupal. C'est parce que ce balisage par défaut vous est fourni si vous décidez d'hériter d'un thème de base du cœur de Drupal.
Par exemple, pour récupérer automatiquement de nombreuses classes utilitaires dans votre balisage, vous pouvez signifier à Drupal que votre thème hérite du thème "classy" du cœur en indiquant dans votre theme.info.yml :

base theme: classy

Drupal permet également de surcharger précisément le template que vous voulez modifier grâce à la notion de Template suggestion (dont la documentation est en ligne, pour Drupal 7 et Drupal 8). Pour savoir quel template Drupal utilise ou peut utiliser, vous pouvez utiliser le mode de debug du thème qui vous l'indique alors dans les commentaires HTML de la page :

• Pour Drupal 7, modifier le fichier sites/default/settings.php :

$conf['theme_debug'] = true;

• Pour Drupal 8, modifier le fichier sites/default/services.yml :

parameters:
  twig.config:
    debug: true

Ceci générera dans le balisage HTML ce type de commentaires :

<!-- THEME DEBUG -->
<!-- THEME HOOK: 'field' -->
<!-- FILE NAME SUGGESTIONS:
   * field--user--field-last-name--user.html.twig
   * field--user--field-last-name.html.twig
   x field--user--user.html.twig
   * field--field-last-name.html.twig
   * field--string.html.twig
   * field.html.twig
-->
<!-- BEGIN OUTPUT from 'field--user--user.html.twig' -->

9. Autres fonctionnalités & développement spécifique

Maintenant que la base du site est réalisée, il est temps d'ajouter des fonctionnalités (comme la recherche) ou de réaliser des développements spécifiques (intégration de services externes). Mais le site est utilisable et on pourrait même permettre au client de commencer la saisie du contenu (plus tôt, dans la mesure où la mise en page finale et l'intégration graphique ne sont pas finalisées, cela provoque des déceptions).

MAIS…

Avec cette stratégie, rien n'est "montrable" à un client avant la phase d'intégration graphique. Il est donc possible d'améliorer cette stratégie en intégrant un peu de graphisme phase après phase :

• Configuration basique : Charte graphique basique (CSS, polices, logo) et mise en page de base (page.html.twig) ;
• Types de contenu : templates (node.html.twig) ;
• Views : templates de view (views_view.html.twig) ;
• Layout & Blocks : template de block (block.html.twig) ;

Ainsi, il est possible à chaque étape (et du coup, à chaque sprint dans un déroulement agile du projet) de livrer une version du site intégrée qui permette au client de se faire une meilleure idée du résultat final.

Avoir un plan !

Plutôt que de vous lancer tête baissée dans la construction de votre site, il est bon d'avoir un plan. Pour être sûr de lever le plus grand nombre d'incertitudes, une société américaine utilise un pense-bête qui liste ces différentes étapes (plus d'autres, notamment l'intégration des modules Nodequeue, Flag, Panels, …), vous permettant de préparer votre projet efficacement.

En résumé…

Pour le déroulement du projet, retenez simplement "Configuration", "Structure", puis "Apparence"(~ intégration graphique). Et le moyen mnémotechnique qui va avec : la stratégie "C-S-A" ;-)