Sujet Partiel Drupal 11

Sujet Partiel Drupal 11

Objectif du projet

Reproduire une partie spécifique d’un site web existant de votre choix (exemples : Le Figaro, Élysée.fr, etc.). Cette reproduction devra inclure plusieurs éléments pour garantir une diversité et une richesse fonctionnelle.

---

Éléments obligatoires

1. Thème personnalisé

Création et activation d’un thème ou thème enfant personnalisé avec CSS et JS.

2. Type de contenu

5+ champs avec références, deux formats d’affichage (complet/teaser).

3. Vue (Views)

Liste des contenus avec thumbnail, filtres et tris (facultatif).

4. Blocs

3 blocs : Views, custom programmé avec DI, et 1 au choix.

---

1. Thème personnalisé

a. Créer et activer un thème personnalisé

• Vous devez créer un thème Drupal personnalisé ou un thème enfant (child theme) basé sur un thème existant.

b. Intégrer le design du site choisi

• Votre thème doit reprendre les éléments visuels principaux du site web que vous reproduisez (couleurs, typographie, mise en page).
• Intégrez vos fichiers CSS et JavaScript personnalisés dans le thème.
• L’objectif est d’obtenir une reproduction la plus fidèle possible sans nécessairement copier tous les détails (restez raisonnable).

---

2. Type de contenu personnalisé

a. Créer un type de contenu

• Création d’un type de contenu personnalisé (par exemple : un article, une page, un dossier, etc.).

b. Ajouter au minimum 5 champs

• Ajouter au moins 5 champs variés à votre type de contenu.
• Exemples de types de champs : Texte long (textarea), Image, Lien (URL), Date, Booléen (case à cocher), Liste de sélection, etc.

c. Inclure au moins un champ de type référence

• Référence à un contenu : Créez un champ qui permet de lier votre contenu à un autre contenu existant (par exemple : un article peut référencer une page “Auteur”).
• OU Référence à une taxonomie : Créez un champ qui permet d’associer des termes de taxonomie (tags, catégories) à votre contenu.

d. Configurer deux modes d’affichage

• Configurer le mode d’affichage Complet (Full) : affichage détaillé avec tous les champs.
• Configurer le mode d’affichage Accroche (Teaser) : affichage résumé pour les listings (titre, image réduite, extrait de texte).

e. Créer au moins un contenu exemple

• Créez une ou plusieurs instances de ce type de contenu avec des données réelles pour tester l’affichage.

---

3. Vue (Views)

a. Créer une vue pour lister les contenus

• Créez une vue qui affiche une liste de contenus en utilisant le mode d’affichage “Accroche (Teaser)”.
• Cette vue peut prendre la forme d’une page (par exemple : /actualites, /articles) ou d’un listing par catégorie.

b. Configurer une taille d’image personnalisée

• Créez un style d’image (thumbnail) pour les miniatures affichées dans la vue.
• Exemple : 300x200 pixels avec recadrage automatique.
• Appliquer ce style d’image dans la configuration de votre champ image dans la vue.

c. (Facultatif si absent du listing reproduit) Ajouter des filtres et une pagination

• Ajouter des filtres exposés permettant aux utilisateurs de filtrer par catégorie, date, etc.
• Configurer une pagination (par exemple : 10 éléments par page).
• Ces éléments sont optionnels mais valorisés.

---

4. Blocs sur la page d’accueil

a. Intégrer 3 blocs sur la page d’accueil

Vous devez placer 3 blocs distincts sur votre page d’accueil :

1. Bloc Views : Utiliser un bloc généré par une vue pour afficher une liste de contenus récents au format accroche.

2. Bloc custom programmatique avec injection de dépendances :

   • Créez un module custom.
   • Dans ce module, créez un bloc programmatique qui utilise l’injection de dépendances pour récupérer des services Drupal.
   • Ce bloc doit afficher du contenu dynamique (exemples : nombre de contenus publiés, date actuelle, informations utilisateur, etc.).

3. Bloc au choix :

   • Vous êtes libre de choisir le type : bloc de contenu statique, bloc menu, bloc de recherche, autre bloc programmatique, etc.

b. Organiser la mise en page

• Utiliser le système de mise en page de Drupal (Structure > Mise en page des blocs) pour positionner ces blocs de manière cohérente.
• Veiller à ce que la disposition soit claire et professionnelle.

** Remarque ** : Si le site que vous reproduisez ne comporte pas de page d’accueil spécifique, vous pouvez choisir une autre page pertinente pour y placer ces blocs.

---

5. Bloc d’informations de connexion

a. Créer un module custom avec un bloc

• Créez un module personnalisé (si ce n’est pas déjà fait pour la tâche 4).
• Dans ce module, créez un nouveau bloc programmatique qui sera placé dans le footer du site.

b. Afficher les informations de connexion admin

• Ce bloc doit afficher dynamiquement les informations de connexion au back-office :
  • Nom d’utilisateur administrateur
  • Mot de passe administrateur
• Utiliser un template Twig personnalisé (.html.twig) pour structurer l’affichage de ces informations.
• Note : Ces informations doivent être affichées uniquement à des fins pédagogiques pour faciliter la correction. Dans un contexte réel, cette pratique serait une faille de sécurité majeure.

---

6. Route et contrôleur personnalisés

a. Créer une page avec route et contrôleur custom

• Dans votre module personnalisé, créez une nouvelle route personnalisée.
• Créez le contrôleur associé qui gérera la logique de cette page.
• S’inspirer d’une page courante sur les sites web : “À propos”, “Mentions légales”, “FAQ”, “Contact”, etc.

b. Afficher du contenu

• Le contrôleur doit retourner un rendu (render array) qui affichera du contenu sur la page.
• Ce contenu peut être :
  • Statique : texte fixe défini dans le contrôleur ou un template.
  • Dynamique : informations récupérées depuis la base de données, des services Drupal, ou des API externes.
• Exemple : une page “À propos” qui affiche des statistiques du site (nombre de contenus, date de création, etc.).

---

7. Exportation de configuration

a. Exporter toutes vos configurations

• Utiliser le module Configuration Management intégré à Drupal pour exporter toutes vos configurations.
• Cela inclut : types de contenu, champs, taxonomies, vues, blocs, menus, styles d’image, etc.

b. Fournir les fichiers de configuration

• Les fichiers exportés (format .yml) se trouvent dans le répertoire /config/sync/ de votre installation.
• Inclure tous ces fichiers dans votre livrable final.
• Ces fichiers permettront de recréer automatiquement votre configuration sur une autre installation Drupal.

** Attention ** : Bien régler la configuration avant l’export pour la sortir du docroot pour éviter d’inclure des données sensibles ou spécifiques à votre environnement (sécurité).

---

8. Scripts CSS et JS

a. Créer et charger un fichier CSS personnalisé

• Créer un fichier CSS contenant les styles inspirés du site que vous reproduisez.
• Déclarer ce fichier dans le fichier .libraries.yml de votre thème.
• Charger cette bibliothèque dans votre thème pour appliquer les styles à votre site.

b. Créer et charger un fichier JavaScript

Vous avez deux options (choisir au moins une) :

1. Intégrer une librairie externe :

   • Exemple : DataTables pour des tableaux interactifs, Lightbox pour des galeries d’images, carrousel/slider, etc.
   • Déclarer la librairie dans votre fichier .libraries.yml avec les CDN ou fichiers locaux.

2. Utiliser Alpine.js pour l’interactivité :

   • Ajouter Alpine.js à votre projet pour créer des interactions simples (accordéons, onglets, modales, etc.).

3. Écrire un script personnalisé :

   • Créer un fichier .js contenant du code inspiré du site reproduit (animations, interactions, etc.).
   • Le déclarer et le charger dans votre thème.

---

9. Modules contrib

a. Installer et activer 5 modules contrib

• Choisir 5 modules communautaires (contrib) qui apportent des fonctionnalités utiles à votre projet.

Exemples de modules recommandés :

• Pathauto : Génération automatique d’URLs lisibles
• Metatag : Gestion des balises meta pour le SEO
• Webform : Création de formulaires complexes
• Admin Toolbar : Amélioration de la barre d’administration
• Token : Système de jetons pour du contenu dynamique
• Entity Reference Revisions : Pour les références à des paragraphes
• Etc.

Documenter votre choix : Dans votre README, lister les 5 modules choisis et expliquer brièvement leur utilité dans votre projet.

---

10. Menu principal

a. Créer et structurer le menu principal

• Configurer le menu principal de votre site avec plusieurs entrées de menu.
• Ajouter des sous-menus (menu déroulant) pour organiser la navigation de manière hiérarchique.
• Exemple de structure :

  Accueil
  Actualités
    ├─ Catégorie 1
    └─ Catégorie 2
  À propos
  Contact

b. Afficher le menu via un bloc

• Placer le menu principal dans une région de votre thème (généralement “Header” ou “Navigation principale”).
• S’assurer que le menu est visible et fonctionnel sur toutes les pages.
• S’assurer que le style du menu correspond au design global de votre thème.

---

11. Taxonomie

a. Créer un vocabulaire de taxonomie

• Créer un nouveau vocabulaire de taxonomie pour classifier vos contenus.
• Exemple : “Catégories”, “Tags”, “Thématiques”, “Types de produits”, etc.

b. Ajouter des termes au vocabulaire

• Créer au moins 3 à 5 termes dans votre vocabulaire.
• Exemple pour un vocabulaire “Catégories d’articles” : Politique, Sport, Culture, Économie, Technologies.

c. Associer la taxonomie à votre type de contenu

• Ajouter un champ de type “Référence à un terme de taxonomie” à votre type de contenu créé dans la tâche 2.
• Configurer ce champ pour qu’il référence votre vocabulaire de taxonomie.
• Les éditeurs pourront ainsi associer un ou plusieurs termes à chaque contenu créé.

---

12. Formulaire programmatique

a. Créer un formulaire avec l’API Form de Symfony

• Dans votre module custom, créer un formulaire programmatique en utilisant l’API Form de Drupal (basée sur Symfony).
• Le formulaire peut être intégré dans une page (via un contrôleur) ou dans un bloc.
• Créer une classe de formulaire qui étend FormBase.

b. Choisir le type de formulaire

Exemples de formulaires à implémenter :

• Formulaire de contact : Nom, email, message
• Inscription à une newsletter : Email, prénom, consentement
• Formulaire de recherche avancée : Mots-clés, catégories, dates
• Formulaire de saisie : Permettre de saisir une donnée qui sera affichée en front-office

c. Implémenter la soumission AJAX

• Configurer votre formulaire pour qu’il se soumette en AJAX sans rechargement de page.
• Utiliser :
  • Alpine.js : Pour intercepter et gérer la soumission
  • htmx : Pour simplifier les interactions AJAX
  • JavaScript vanilla : Pour un contrôle total
• Afficher un message de confirmation ou d’erreur après soumission.
• Valider les données côté serveur dans la méthode validateForm() de votre classe de formulaire.

---

13. Service avec Injection de Dépendances (Bonus)

a. (Optionnel - Bonus 10 points) Créer un service PHP avec interface

• Créer une interface PHP définissant les méthodes de votre service.
• Créer une classe qui implémente cette interface et contient votre logique métier.
• Placer ces fichiers dans le répertoire src/ de votre module custom.

b. Déclarer le service

• Créer ou modifier le fichier [votre_module].services.yml à la racine de votre module.
• Déclarer votre service avec son ID, sa classe et ses dépendances éventuelles.
• Exemple de structure :

  services:
    mon_module.mon_service:
      class: Drupal\mon_module\Service\MonService
      arguments: ['@entity_type.manager', '@current_user']

c. Injecter le service

• Utiliser l’injection de dépendances pour injecter votre service dans un contrôleur ou un bloc.
• Pour un bloc : utiliser les méthodes create() et __construct().
• Pour un contrôleur : utiliser également create() et __construct().

d. Utiliser le service

• Appeler les méthodes de votre service pour exécuter votre logique métier.
• Exemple : récupérer des statistiques, formatter des données, effectuer des calculs, interroger l’API, etc.
• Le service doit avoir un rôle clair et réutilisable dans votre application.

---

Livrables

Code source

Projet Drupal complet avec modules custom, thème personnalisé, fichiers CSS et JS.

Base de données

Export SQL de la base de données et fichiers .yml de configuration.

Documentation

Fichier README.md détaillant l’installation, les modules contrib utilisés et les identifiants admin.

---

Critères d’évaluation

Critère	Description
Respect des consignes	Toutes les exigences techniques ont été respectées et implémentées correctement
Qualité technique	Code bien organisé, respect des standards et bonnes pratiques Drupal (nommage, structure, sécurité)
Fonctionnalités	Tous les éléments fonctionnent correctement (type de contenu, vues, blocs, formulaire, etc.)
Qualité CSS/JS	Scripts bien intégrés, fonctionnels et adaptés au projet
Formulaire AJAX	Le formulaire se soumet sans rechargement avec validation et retour utilisateur approprié
Documentation	README.md clair, complet et facile à suivre pour installer et tester le projet

---

Tableau récapitulatif

N	Exigence	Points	TD
1	Thème personnalisé	10	Étape 6
2	Type de contenu (5+ champs, refs)	15	Étapes 2-3
3	Vues	10	Étape 4
4	Blocs avec DI	10	TD1 Module A
5	Bloc login admin	5	Étape 5
6	Route + contrôleur	10	Étape 8
7	Export configuration	5	Config Sync
8	CSS/JS + Alpine.js	5	Alpine.js
9	5 modules contrib	5	Étape 7
10	Menu principal	5	Étape 5
11	Taxonomie	5	Étape 3
12	Formulaire + AJAX	15	TD1 Module C
13	Service DI (bonus)	10	TD1
	Total	110

---

Ressources

• Services et DI
• Blocs personnalisés
• Form API
• Alpine.js
• Configuration Sync
• TD 1
• TD 2
• Code module Hero manager exemple
• Code module Cart manager exemple