Mise en place d’un site Drupal avec Composer Environnement CloudPanel

Drupal est un système de gestion de contenu (CMS) open source robuste et flexible, écrit en PHP et basé sur le framework Symfony. Conçu pour gérer des sites web complexes, sécurisés et performants, il est idéal pour les entreprises, les gouvernements et les médias nécessitant une grande modularité.

1. Objectif du document

Ce document décrit pas à pas le processus complet de mise en place d’un site Drupal en utilisant Composer, dans un environnement CloudPanel.

Il couvre :

• L’installation de Drupal
• La configuration de base du site
• L’installation et l’utilisation des modules essentiels
• La création des types de contenus, des blocs et des vues
• Les bonnes pratiques de sécurité et de performance

2. Prérequis techniques

• Serveur avec CloudPanel
• PHP version 8.3 ou 8.4
• MySQL ou MariaDB
• Accès SSH
• Composer installer

3. Création du site dans CloudPanel

   1.Se connecter à l’interface CloudPanel

   2. Cliquer sur Add Site

        3. Choisir :

• Type : PHP Site
• Version PHP : 8.3 ou 8.4
• Document Root :
  /web

       4.Créer une base de données

• Se connecter à l’interface CloudPanel
• Aller dans le menu Databases
• Cliquer sur Add Database
• Renseigner les informations suivantes :
  • Database Name : nom_de_la_base
  • Database User : utilisateur_de_la_base
  • Password : mot de passe sécurisé

        5. Noter les informations :

• Nom de la base
• Utilisateur
• Mot de passe

4. Installation de Drupal avec Composer

4.1 Accéder au dossier du site

4.2 Créer le projet Drupal

On note alors que mon document Root pointe actuellement sur /web, où se trouve le fichier index.php

Une fois que c’est fait je change alors le répertoire racine pour que mon site me redirige vers la page de drupal

4.3 Structure du projet

• /web : racine publique du site
• /vendor : dépendances PHP
• composer.json : configuration Composer
• composer.lock : versions verrouillées

5. Installation de Drupal via le navigateur

1. Accéder au nom de domaine du site
2. Choisir la langue
3. Sélectionner le profil Standard
4. Renseigner la base de données :
   • Type : MySQL
   • Hôte : localhost
   • Nom de la base
   • Utilisateur
   • Mot de passe
5. Créer le compte administrateur

Apres créations du compte administrateur on a une finalisation des traductions

6. Configuration de base du site

6.1 Informations générales

Chemin :

Configuration → System → Basic site settings

• Nom du site
• Slogan
• 
  Email du site

7. Thème et apparence

7.1 Installation d’un thème

Activation

• Aller dans Apparence
• 
  Installer et définir Bootstrap 5 comme thème par défaut

7.2 Création et installation d’un sous-thème

Création du dossier du sous-thème

Créer le dossier suivant :

                                  web/themes/contrib/sub_bootsrap5

Création du fichier d’information du sous-thème

Créer le fichier :

                  web/themes/contrib/ sub_bootsrap5/ sub_bootsrap5.info.yml

Contenu du fichier sub_bootsrap5.info.yml

Création des fichiers de ressources

Créer le fichier des bibliothèques :

                          web/themes/custom/ sub_bootsrap5/ sub_bootsrap5.libraries.yml

Contenu du fichier sub_bootsrap5.libraries.yml

Activation du sous-thème

• Aller dans Apparence
• Repérer Mon Sous Thème
• Cliquer sur Install and set as default

2. On peut voir que le thème et le sous thème ont été installé

7.3 Vidage du cache

Après l’activation :

• Aller dans Configuration → Development → Performance
• Cliquer sur Clear all caches

8. Installation des modules essentiels

8.1 Téléchargement des modules via Composer

                              composer require 'drupal/pathauto:^1.14'

                       composer require 'drupal/token:^1.16'

                              composer require 'drupal/metatag:^2.2'

                              composer require 'drupal/redirect:^1.12'

                           composer require 'drupal/webform:^6.3@beta'

                          composer require 'drupal/backup_migrate:^5.1'

8.2 Activation des modules

• Aller dans Extend (Modules)
• Cocher les modules téléchargés
• Cliquer sur Install

9. Tableau comparatif des modules Drupal

10. Création des types de contenu

Exemple : Type « Guide »

1. Aller dans Structure → Types de contenu
2. Cliquer sur ajouter un type de contenu
3. Ajouter les champs :
   • Catégorie
   • Contenu
   • Description
   • Image

11. Créer un vocabulaire de taxonomie

1. Connecte-toi en administrateur
2. Va dans le menu :
   Structure → Taxonomie
3. Clique sur « Ajouter un vocabulaire »
4. Renseigne :
   • Nom : ex. Catégories
   • Description (optionnel) : ex. Catégories de la base de connaissance
5. Clique sur Enregistrer

12. Ajouter des termes au vocabulaire

1. Toujours dans Structure → Taxonomie
2. Clique sur « Lister les termes » à côté de ton vocabulaire ‘Catégorie’
3. Clique sur « Ajouter un terme »
4. Renseigne :
   • Nom du terme : Développement web
   • Description (optionnel)
5. Clique sur Enregistrer

👉 Répète pour chaque terme :

• Communication
• Hébergement
• Marketing

(Optionnel) Ajouter des champs aux termes (ex : Image)

Si tu veux une image par catégorie (comme dans des blocs) :

1. Va dans :
   Structure → Taxonomie → (ton vocabulaire) → Gérer les champs
2. Clique sur « Ajouter un champ »
3. Choisis :
   • Type de champ : Image
   • Libellé : Image de la catégorie
4. Clique sur Enregistrer
5. Configure les options (formats, taille, obligatoire ou non)
6. Enregistrer les paramètres

⚠️ Si Image n’apparaît pas :

• Vérifie dans Extension que :
  • File
  • Image
    sont bien activés
• Puis vide le cache :
  Configuration → Développement → Performance → Vider tous les caches

13. Lier la taxonomie à un type de contenu

Pour utiliser les catégories dans tes contenus :

1. Va dans :
   Structure → Types de contenu
2. Clique sur Gérer les champs du type concerné
3. Ajouter un champ
4. Type de champ :
   Référence à une entité
5. Entité référencée :
   Terme de taxonomie
6. Sélectionne ton vocabulaire (Catégories)
7. Enregistre

✅ Maintenant, quand tu crées un contenu, tu peux choisir une catégorie.

14. Créer le vocabulaire « Tags »

1. Structure → Taxonomie
2. Cliquer sur Ajouter un vocabulaire
3. Remplir :
   • Nom : Tags
   • Description : Mots-clés descriptifs
4. Cliquer sur Enregistrer

(Optionnel) Ajouter quelques tags de base

1. Structure → Taxonomie → Tags
2. Cliquer sur Lister les termes
3. Ajouter un terme
4. Exemples à ajouter :
   • Drupal
   • SSL
   • cPanel

15. Lier Tags au type de contenu

Étape    : Ajouter le champ « Tags »

1. Structure → Types de contenu (Guide)
2. Cliquer sur Gérer les champs
3. Ajouter un champ
   • Type : Référence à une entité
   • Libellé : Tags
4. Cliquer sur Enregistrer
5. Configuration :
   • Type d’entité : Terme de taxonomie
   • Vocabulaire : Tags
   • Nombre de valeurs : Illimité ✅
6. Enregistrer

16.CONFIGURATION DES STYLES D’IMAGES

Le style d’image sert à gérer l’apparence, la taille, le poids et le cadrage des images automatiquement pour que ton site soit propre, rapide et homogène.

Étape 1 : Accéder aux styles d’images.

1. Connecte-toi en administrateur
2. Va dans :
   Configuration → Média → Styles d’images

Étape 2 : Créer un nouveau style d’image

1. Clique sur Ajouter un style d’image
2. Renseigne :
   • Nom : categorie_carte
3. Clique sur Créer un nouveau style

Étape 3 : Ajouter des effets au style

• Clique sur Ajouter un effet
• Dans la liste, sélectionne :
  Mise à l’échelle et recadrage
  (Scale and crop)
• Clique sur Ajouter

Étape 4 : Configurer l’effet

Remplis les champs comme suit (recommandé pour une carte) :

• Largeur : 400
• Hauteur : 250
• Ancrage : Centre (par défaut)

📌 Cela force toutes les images à avoir exactement la même taille, sans déformation.

Clique sur Ajouter l’effet

APPLIQUER LE STYLE À UN CHAMP IMAGE

Étape 1 : Appliquer à un type de contenu

1. Va dans :
   Structure → Types de contenu
2. Choisis ton type de contenu
3. Clique sur Gérer l’affichage
4. Sur le champ Image :
   • Format : Image
   • Style d’image : categorie_carte
5. Enregistre

6. Configuration Système de fichier

    

Étape 1️⃣ : Accéder à la configuration

1. Connecte-toi en administrateur
2. Va dans le menu :
   Configuration → Médias → Système de fichiers

Étape 2️⃣ : Vérifier les répertoires

1. Répertoire public

• Par défaut :
• sites/default/files
• Sert à tous les fichiers publics, comme les images ou documents que tout le monde peut voir.
• Vérifie que :
  • Le dossier existe
  • Il est accessible en écriture (permissions 755 ou 775 selon le serveur)

2. Répertoire privé (optionnel mais recommandé)

• Crée le dossier private  dans sites/default/files
• Donne les permissions en écriture

Modification de settings.php

$settings['file_private_path'] = 'sites/default/files/private';

Étape 3️⃣ : Vérifier le fonctionnement

1. Va dans :
   Rapport d’état → Configuration → Media → système de fichier
2. Vérifie que :
   • Répertoire public : OK
   • Répertoire privé : OK si configuré

11. Création des blocs

11.1 Création d’un bloc personnalisé

1. Structure → Block layout
2. Custom block library
3. Add custom block
4. Ajouter le contenu

11.2 Placement du bloc

• Choisir la région du thème
• Définir la visibilité (pages, rôles)

12. Création des vues

Exemple : Liste des actualités

1. Structure → Views
2. Add view
3. Paramètres :
   • Type de contenu : Actualité
   • Créer une page
   • URL : /actualites
   • Filtre : Published = Yes
   • Tri : Date (DESC)

13. Sécurité

• Désactiver les modules inutilisés
• Activer HTTPS via CloudPanel

14. Cache et performances

Chemin :

Configuration → Development → Performance

• Activer le cache des pages
• Activer l’agrégation CSS/JS
• Utiliser le bouton Clear all caches

15. Mise à jour du site

Puis vider le cache depuis l’interface Drupal.

2. Conclusion

    

Ce guide permet de :

• Installer Drupal proprement via Composer
• Configurer un site fonctionnel sans Drush
• Utiliser les modules essentiels
• Déployer un site stable sur CloudPanel