Accueil / Blog / Métier / 2016 / Comment créer un site web avec Drupal ?

Comment créer un site web avec Drupal ?

Par Simon Georges — publié 24/06/2016
Présentation rapide de ma méthode pour construire un site web avec Drupal, quelle que soit la version.
Comment créer un site web avec Drupal ?

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 :

Lien configuration

2. Configuration basique du site

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

Configuration Drupal

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 :

Styles d'images

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 :

Types de contenu

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 :

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 :

Menus

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 :

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" ;-)

ABONNEZ-VOUS À LA NEWSLETTER !
Voir aussi
Mon Top 30 des modules Drupal 8 Mon Top 30 des modules Drupal 8 16/02/2019

Transcription d'une conférence donnée au Drupalcamp Paris 2019

Makina Corpus lance une nouvelle offre pour sécuriser les projets Drupal des ESN Makina Corpus lance une nouvelle offre pour sécuriser les projets Drupal des ESN 18/02/2019

Formations et accompagnement pour sécuriser les projets Drupal

Drupal : un CMS pas comme les autres Drupal : un CMS pas comme les autres 15/02/2019

Mais moi je l'aime, c'est pas de ma faute…

Une usine à sites en Drupal Une usine à sites en Drupal 18/12/2018

Qu'est ce que c'est, et en avez-vous besoin ?

La roadmap Drupal 8 La roadmap Drupal 8 05/04/2017

Sorti fin 2015, le CMS Drupal 8 a basculé dans un nouveau cycle de versions tous les 6 mois. Cet ...