Passo 9: Impostare un pannello amministrativo

5.0 version
Maintained

Impostare un pannello amministrativo

Aggiungere le prossime conferenze al database è compito degli amministratori del progetto. Il pannello amministrativo è una sezione protetta del sito web dove gli amministratori di progetto possono gestire i dati del sito, moderare i feedback e altro ancora.

Come possiamo crearlo in fretta? Usando un bundle che è in grado di generare un pannello amministrativo basato sul modello del progetto. EasyAdmin si adatta perfettamente al contesto.

Configurare EasyAdmin

Per iniziare, aggiungiamo EasyAdmin come dipendenza del progetto:

1
$ symfony composer req "admin:^2.0"

Per configurare EasyAdmin, è stato generato un nuovo file di configurazione, tramite la sua ricetta 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

Quasi tutti i pacchetti installati hanno una configurazione come questa nel percorso config/packages/. Nella maggior parte dei casi, le impostazioni predefinite sono state scelte attentamente per funzionare per gran parte delle applicazioni.

Rimuovere i commenti dalle prime due righe e aggiungere le classi del modello del progetto:

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

Accedere al pannello amministrativo generato in /admin. Boom! Un’interfaccia amministrativa bella e ricca di funzionalità per conferenze e commenti:

Suggerimento

Perché il pannello amministrativo è accessibile sotto /admin? Questo è il prefisso predefinito configurato in 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

Può essere cambiato in qualsiasi cosa si preferisca.

L’aggiunta di conferenze e commenti non è ancora possibile, in quanto si otterrebbe un errore: Object of class App\Entity\Conference could not be converted to string. EasyAdmin cerca di visualizzare la conferenza relativa ai commenti, ma può farlo solo se c’è una rappresentazione in stringa di una conferenza. Il problema può essere risolto aggiungendo il metodo __toString() alla 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;

Fare lo stesso per 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;

Ora è possibile aggiungere/modificare/cancellare le conferenze direttamente dal pannello amministrativo. Si può fare qualche prova e aggiungere almeno una conferenza.

Aggiungiamo qualche commento senza foto e impostiamo la data manualmente: la colonna createdAt sarà automatizzata in un secondo momento.

Personalizzazione di EasyAdmin

Il pannello amministrativo predefinito funziona bene, ma può essere personalizzato in molti modi per migliorare l’esperienza utente. Facciamo alcune semplici modifiche per dimostrarne le possibilità. Modificare la configurazione corrente con quanto segue:

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

Abbiamo sovrascritto la sezione design, aggiungendo icone alle voci di menù e aggiungendo un collegamento alla pagina iniziale del sito.

Per la sezione Comment, l’elenco dei campi permette di ordinarli nel modo desiderato. Alcuni campi sono stati modificati, come l’impostazione della data di creazione in sola lettura. La sezione filters definisce quali filtri da esporre sopra al campo di ricerca.

Queste personalizzazioni sono solo una piccola introduzione alle possibilità offerte da EasyAdmin.

Giocate con il pannello amministrativo, filtrando i commenti per conferenza o cercando i commenti per e-mail, ad esempio. L’unico problema è che chiunque può accedere al backend. Niente paura, l’accesso sarà regolato in un secondo momento.

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

  • « Previous Passo 8: Descrivere la struttura dati
  • Next » Passo 10: Costruire l’interfaccia utente

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