Offre estivale Bibliothèque Numérique ENI :
50€ offerts pour préparer la rentrée ! Cliquez ici
Formez-vous en autonomie à Excel, Word, VBA, Microsoft 365…. Cliquez ici
  1. Livres & vidéos
  2. Drupal 10
  3. Views
Extrait - Drupal 10 Le guide complet pour le développement de solutions web robustes
Extraits du livre
Drupal 10 Le guide complet pour le développement de solutions web robustes Revenir à la page d'achat du livre

Views

Introduction

Les Views sont parmi les fonctionnalités les plus puissantes et les plus flexibles de Drupal, permettant aux utilisateurs de collecter et de présenter des données issues de la base de contenu de manière dynamique et personnalisable.

Que vous cherchiez à afficher une liste d’articles récents, à organiser des profils d’utilisateurs ou à créer des galeries d’images complexes, les Views offrent une interface graphique riche pour la construction de ces affichages sans avoir à écrire une ligne de code.

1. Qu’est-ce qu’une View ?

Une View peut être considérée comme une requête de base de données, construite via une interface utilisateur (UI), qui récupère et affiche du contenu selon des critères spécifiques. Drupal traite ces requêtes et présente les résultats selon les configurations définies par l’utilisateur, offrant ainsi une flexibilité immense pour l’affichage du contenu.

Le principe fondamental des Views repose sur la sélection, le filtrage et la présentation de données. Ce mécanisme simplifie grandement la gestion de contenu dynamique, permettant de mettre en avant des informations pertinentes selon le contexte, le public cible, ou des critères spécifiques définis par le gestionnaire du site.

Avantages par rapport au code personnalisé

Alors que le développement personnalisé offre une flexibilité totale, il nécessite une connaissance approfondie de Drupal et de sa programmation. Les Views, en revanche, rendent la création d’affichages de contenu accessible à un public beaucoup plus large, minimisant le besoin de compétences en développement tout en offrant une puissance et une personnalisation considérables. Cela réduit le temps de développement et facilite la maintenance.

Bien qu’il soit vrai que le développement personnalisé peut, dans certains cas, offrir des performances supérieures à celles des Views, notamment grâce à des requêtes SQL optimisées et à une mise en cache soigneusement conçue, cette amélioration de performance doit être mise en perspective. Le développement sur mesure exige...

Administration des Views

Cette section vous guidera à travers les étapes fondamentales du processus de création et de configuration d’une View, depuis la sélection initiale du type d’entité jusqu’à la personnalisation avancée des affichages.

Pour mieux comprendre le fonctionnement des Views, ce chapitre sera agrémenté d’un exemple pratique : la création d’une liste de contenus de type Article. Ainsi, assurez-vous de disposer de plusieurs contenus Article pour pouvoir suivre cet exemple efficacement.

Pour peupler efficacement votre site Drupal avec des données de test, le module communautaire Devel s’avère être un outil inestimable. Au sein de ce module, vous trouverez un sous-module particulièrement utile nommé Devel Generate. Ce dernier est conçu pour faciliter la création rapide de contenus factices pour divers types d’entités, y compris les utilisateurs, les contenus (nodes) et les termes de taxonomie. L’utilisation de Devel Generate permet non seulement de tester le fonctionnement et l’apparence de vos Views avec un volume de données réaliste, mais aussi d’évaluer la performance de votre site dans des conditions simulant un environnement de contenu riche et varié.

Pour en savoir plus, rendez-vous sur ce lien : https://www.drupal.org/project/devel

Pour commencer, accédez à la page de gestion des Views :

 Depuis le menu d’administration, cliquez...

Gestion des composants

La personnalisation d’une View dans Drupal repose sur une compréhension approfondie de ses différents composants. Ces composants sont les éléments constitutifs qui déterminent comment les données sont affichées et interagissent avec les utilisateurs.

1. Définir le format

Le format détermine la manière globale dont les résultats de la View sont organisés et présentés. Drupal propose divers formats, tels que les listes HTML, les grilles, les tableaux, ou même des formats personnalisés disponibles via des modules supplémentaires.

images/08EI13.png

Le choix du format affecte non seulement l’apparence visuelle de la View, mais aussi l’expérience utilisateur en facilitant la lecture et l’interaction avec le contenu affiché. Chaque format dispose de ses propres réglages (settings). Par exemple, Unformatted list vous permettra de définir des classes CSS qui seront ajoutées sur chacun des résultats (row).

Certains formats vous proposeront une autre option : Show. Cette option permet de définir si on souhaite afficher des champs particuliers ou des entités rendues dans le View Mode de votre choix (Full, Teaser, etc.).

Lors de la configuration des composants d’une View, il est essentiel de comprendre que certains formats, comme Table, se limitent exclusivement à l’usage des Fields (champs). Cela signifie que chaque colonne de la table est dédiée à un champ spécifique de l’entité, comme le titre, la date de publication ou un extrait, offrant une présentation claire et structurée des données.

Il est possible d’incorporer des entités rendues avec leur mise en page prédéfinie au sein d’une View sans utiliser l’option Show dédiée. Le champ Rendered entity permet d’afficher une entité dans le mode de vue de votre choix (comme Full, Teaser, etc.), combinant ainsi la flexibilité des champs avec la richesse des modes d’affichage (View Modes) prédéfinis.

2. Gérer les champs

À partir de l’interface de configuration de votre View, vous pouvez retrouver vos champs configurés et en ajouter de nouveaux en sélectionnant parmi ceux disponibles pour le type d’entité...

Réglages de base

Les réglages de base dans Drupal Views permettent d’ajouter des éléments supplémentaires à vos affichages, tels que des en-têtes et des pieds de page, de gérer l’affichage en l’absence de résultats, et de configurer la pagination pour améliorer l’expérience utilisateur.

1. Header et Footer

Le Header et le Footer sont des éléments respectivement placés avant et après le contenu de la View.

images/08EI43.png

Header (En-tête) : vous pouvez ajouter du texte ou d’autres contenus (comme des blocs ou des images) au début de votre View pour introduire le sujet de votre affichage ou fournir des informations contextuelles supplémentaires.

Footer (Pied de page) : de manière similaire, le pied de page permet d’ajouter du contenu à la fin de votre View. Cela peut être utile pour fournir des appels à l’action, comme inviter les visiteurs à s’abonner à une newsletter ou les diriger vers d’autres sections du site.

Voici les étapes à suivre pour ajouter un Header ou un Footer à votre View.

 Cliquez sur l’option Add depuis la section Header ou Footer pour sélectionner le type de donnée que vous souhaitez ajouter.

images/08EI44.png

Pour les besoins de cet exemple, vous ajouterez un compteur de résultat dans le Header de votre view....

Réglages avancés

Au-delà des réglages de base, Drupal Views offre une gamme de configurations avancées pour affiner et étendre les capacités de vos affichages. Ces réglages avancés permettent une personnalisation plus poussée et l’intégration de logiques complexes, rendant vos Views non seulement plus dynamiques mais aussi plus interactives et adaptées à des scénarios spécifiques.

Dans cette section, nous explorerons les principaux réglages avancés qui peuvent transformer la manière dont les données sont traitées et présentées dans vos Views.

images/08EI88.png

1. Les relations

Les relations dans Drupal Views fonctionnent en étendant les capacités de vos affichages en donnant accès à des champs et des informations provenant d’entités liées. Elles jouent un rôle similaire à celui des jointures (JOIN) en SQL, permettant de combiner des données issues de différentes tables (entités) en fonction de relations définies.

images/08EI56.png

Par exemple, les relations peuvent être utilisées pour relier des contenus à leurs auteurs ou connecter des termes de taxonomie à des contenus spécifiques. Cette fonctionnalité enrichit les Views en offrant une vue plus complète et contextuelle des données, rendant possibles l’affichage, le filtrage et le tri de contenus interconnectés au sein d’une même View.

Configurez votre View en créant une relation avec l’entité « User » pour ajouter un critère de filtrage exposé. Ce critère permettra aux visiteurs de filtrer les contenus selon l’auteur, grâce à un champ de recherche en autocomplétions.

 Cliquez sur le bouton Add puis cochez l’option User dans la catégorie Content.

images/08EI57.png

 Cliquez sur le bouton Add and configure relationships.

 L’écran suivant vous permet de configuration cette relation de façon à l’exiger (Require this relationship), et par conséquent de ne pas afficher les résultats qui n’ont pas d’auteur. Laissez cette option décochée....

Gestion de différents displays

La gestion efficace de multiples displays au sein d’une même View est essentielle pour maximiser la réutilisabilité et la cohérence dans la présentation des données sur votre site.

Prenons l’exemple de la création d’un bloc que vous positionnerez à la fin de la page d’un article. Ce bloc affichera les trois derniers articles publiés, à l’exception de l’article actuellement consulté par le visiteur.

Commencez par ajouter un nouveau display à votre View.

 Créez le display : dans l’interface de configuration de la View, cliquez sur le bouton + Add en haut près du titre Displays. Sélectionnez le type de display que vous souhaitez ajouter, par exemple, Block.

images/08EI69.png

Une fois le nouveau display ajouté, vous pouvez le configurer selon vos besoins. Cela inclut la définition du titre du bloc, la configuration des critères de filtrage, de tri, et d’autres paramètres spécifiques au display ajouté.

Il est important de noter qu’en créant ce nouveau display, il héritera de la configuration du display Page que vous avez créé précédemment.

Lorsque vous effectuerez vos modifications (par exemple, en ajoutant ou modifiant un champ), une nouvelle option apparaîtra tout en haut de la fenêtre modale...

Intégration des Views dans le code

L’intégration de l’affichage de vos Views directement dans le code permet une personnalisation poussée et une adaptabilité accrue de votre site.

Pour optimiser les performances et suivre les meilleures pratiques de développement, reprenez comme exemple votre View Content: Articles et ajoutez-y un display de type « Embed ».

Ce nouveau display va automatiquement hériter des configurations établies pour votre page initialement créée.

Bien qu’il soit recommandé d’adapter au mieux le nom machine, par souci de simplicité, vous conserverez le nom machine de ce display proposé par défaut : embed_1.

images/08EI83.png

 Sauvegardez les modifications apportées à la View en cliquant sur le bouton Save en bas de page.

La manière la plus courante d’intégrer une View dans votre code est d’utiliser la fonction views_embed_view(). Cette fonction prend en paramètres le nom machine de la View ainsi que le nom du display à utiliser.

Voici un exemple simple :

$view_id = "my_view"; 
$display_id = "embed_1"; 
views_embed_view($view_id, $display_id); 

 Reprenez votre module my_module et ajoutez la méthode articles() à votre controller WelcomeController.

Fichier my_module/src/Controller/WelcomeController.php :

[...] 
public function...