Étape 9: Configurer une interface d’administration

5.0 version
Maintained

Configurer une interface d’administration

L’ajout des prochaines conférences à la base de données est le travail des admins du projet. Une interface d’administration est une section protégée du site web où les admins du projet peuvent gérer les données du site web, modérer les commentaires, et plus encore.

Comment pouvons-nous le créer aussi rapidement ? En utilisant un bundle capable de générer une interface d’administration basée sur la structure du projet. EasyAdmin convient parfaitement.

Configurer EasyAdmin

Tout d’abord, ajoutez EasyAdmin comme dépendance du projet :

1
$ symfony composer req "admin:^2.0"

Pour configurer EasyAdmin, un nouveau fichier de configuration a été généré par sa recette Flex :

config/packages/easy_admin.yaml
1
2
3
4
5
6
#easy_admin:
#    entities:
#        # List the entity class name you want to manage
#        - App\Entity\Product
#        - App\Entity\Category
#        - App\Entity\User

Presque tous les paquets installés ont une configuration comme celle-ci sous le répertoire config/packages/. La plupart du temps, les valeurs par défaut ont été soigneusement choisies pour fonctionner avec la plupart des applications.

Décommentez les deux premières lignes et ajoutez les classes des modèles du projet :

config/packages/easy_admin.yaml
1
2
3
4
easy_admin:
    entities:
        - App\Entity\Conference
        - App\Entity\Comment

Accédez à l’interface d’administration générée grâce à l’URL /admin. Et voilà ! Une interface d’administration agréable et riche en fonctionnalités pour les conférences et les commentaires :

Astuce

Pourquoi l’interface d’administration est-elle accessible sous /admin ? C’est le préfixe par défaut configuré dans config/routes/easy_admin.yaml :

config/routes/easy_admin.yaml
1
2
3
4
easy_admin_bundle:
    resource: '@EasyAdminBundle/Controller/EasyAdminController.php'
    prefix: /admin
    type: annotation

Vous pouvez le changer par ce que vous voulez.

L’ajout de conférences et de commentaires n’est pas encore possible car vous obtiendriez une erreur : Object of class App\Entity\Conference could not be converted to string. EasyAdmin essaie d’afficher la conférence liée aux commentaires, mais il ne peut le faire que si une chaîne de caractères représentant une conférence existe. Corrigez ce problème en ajoutant une méthode __toString() à la classe Conference :

patch_file
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
--- a/src/Entity/Conference.php
+++ b/src/Entity/Conference.php
@@ -43,6 +43,11 @@ class Conference
         $this->comments = new ArrayCollection();
     }

+    public function __toString(): string
+    {
+        return $this->city.' '.$this->year;
+    }
+
     public function getId(): ?int
     {
         return $this->id;

Faites de même pour la classe Comment :

patch_file
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
--- a/src/Entity/Comment.php
+++ b/src/Entity/Comment.php
@@ -48,6 +48,11 @@ class Comment
      */
     private $photoFilename;

+    public function __toString(): string
+    {
+        return (string) $this->getEmail();
+    }
+
     public function getId(): ?int
     {
         return $this->id;

Vous pouvez maintenant ajouter/modifier/supprimer des conférences directement depuis l’interface d’administration. Jouez avec et ajoutez au moins une conférence.

Ajoutez quelques commentaires sans photos. Réglez la date manuellement pour l’instant ; nous remplirons la colonne createdAt automatiquement dans une étape ultérieure.

Personnaliser EasyAdmin

L’interface d’administration par défaut fonctionne bien, mais elle peut être personnalisée de plusieurs façons pour améliorer son utilisation. Faisons quelques changements simples pour montrer les possibilités. Remplacez la configuration actuelle par la suivante :

config/packages/easy_admin.yaml
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
easy_admin:
    site_name: Conference Guestbook

    design:
        menu:
            - { route: 'homepage', label: 'Back to the website', icon: 'home' }
            - { entity: 'Conference', label: 'Conferences', icon: 'map-marker' }
            - { entity: 'Comment', label: 'Comments', icon: 'comments' }

    entities:
        Conference:
            class: App\Entity\Conference

        Comment:
            class: App\Entity\Comment
            list:
                fields:
                    - author
                    - { property: 'email', type: 'email' }
                    - { property: 'createdAt', type: 'datetime' }
                sort: ['createdAt', 'ASC']
                filters: ['conference']
            edit:
                fields:
                    - { property: 'conference' }
                    - { property: 'createdAt', type: datetime, type_options: { attr: { readonly: true } } }
                    - 'author'
                    - { property: 'email', type: 'email' }
                    - text

Nous avons modifié la section design pour ajouter des icônes aux éléments de menu et pour ajouter un lien vers la page d’accueil du site web.

Pour la section Comment, lister les champs nous permet de les classer dans l’ordre que nous souhaitons. Certains champs sont modifiés, comme passer la date de création en lecture seule. La section filters définit les filtres à afficher au-dessus du champ de recherche classique.

Ces personnalisations ne sont qu’une petite introduction aux possibilités offertes par EasyAdmin.

Jouez avec l’interface d’administration, filtrez les commentaires par conférence, ou recherchez des commentaires par email par exemple. Le seul problème, c’est que n’importe qui peut accéder à cette interface. Ne vous inquiétez pas, nous la sécuriserons dans une prochaine étape.

1
$ symfony run psql -c "TRUNCATE conference RESTART IDENTITY CASCADE"

  • « Previous Étape 8: Décrire la structure des données
  • Next » Étape 10: Construire l’interface

This work, including the code samples, is licensed under a Creative Commons BY-NC-SA 4.0 license.