Stap 9: Een admin-backend opzetten

5.0 version
Maintained

Een admin-backend opzetten

Het toevoegen van aankomende conferenties aan de database is de taak van de projectbeheerders. Een admin-backend is een beschermd deel van de website waar projectbeheerders de gegevens van de website kunnen beheren, feedback kunnen modereren, en meer.

Hoe kunnen we dit snel creëren? Door gebruik te maken van een bundle die in staat is om een admin-backend te genereren op basis van het model van het project. EasyAdmin past perfect in dit plaatje.

EasyAdmin configureren

Voeg eerst EasyAdmin toe als projectdependency:

1
$ symfony composer req "admin:^2.0"

Door het Flex recipe is een nieuw configuratiebestand gemaakt, zodat EasyAdmin geconfigureerd kan worden:

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

Bijna alle geïnstalleerde packages hebben een configuratie zoals deze in de config/packages/-map. Meestal zijn de standaardinstellingen zorgvuldig gekozen om voor de meeste toepassingen te werken.

Haal de eerste paar regels uit het commentaar en voeg de model classes van het project toe:

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

Ga naar de gegenereerde admin-backend op /admin . Boem! Een mooie en veelzijdige admin-interface voor conferenties en reacties:

Tip

Waarom is de backend toegankelijk onder /admin ? Dat is de standaard prefix geconfigureerd 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

Je kunt het veranderen in wat je maar wil.

Het toevoegen van conferenties en commentaren is nog niet mogelijk omdat je een fout zal krijgen: Object of class App\Entity\Conference could not be converted to string . EasyAdmin probeert de conferentie horend bij de reacties weer te geven, maar kan dit alleen doen als er een tekstweergave van een conferentie is. Los dit probleem op door een __toString() methode toe te voegen aan de Conference-class:

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;

Doe hetzelfde voor de Comment-class:

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;

Je kan nu rechtstreeks vanuit de admin-backend conferenties toevoegen, wijzigen en verwijderen. Speel ermee en voeg ten minste één conferentie toe.

Voeg een aantal reacties zonder foto’s toe. Stel de datum voorlopig handmatig in; we vullen de createdAt kolom in een later stadium automatisch in.

EasyAdmin aanpassen

De standaard admin-backend werkt goed, maar kan op vele manieren worden aangepast om de gebruikerservaring te verbeteren. Laten we enkele eenvoudige aanpassingen doen om de mogelijkheden te demonstreren. Vervang de huidige configuratie door het volgende:

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

We hebben de design-sectie overschreven om pictogrammen aan de menu-items toe te voegen en om een link terug naar de homepage toe te voegen.

Door een lijst van velden voor de Comment-sectie te tonen, kunnen we deze sorteren op de manier zoals wij dat willen. Sommige velden zijn aangepast, zoals het niet aanpasbaar maken van het veld “creation date”. De filters-sectie definieert welke filters boven het reguliere zoekveld getoond moeten worden.

Deze aanpassingen zijn slechts een kleine introductie van de mogelijkheden van EasyAdmin.

Speel met de admin, filter de reacties per conferentie, of zoek bijvoorbeeld op basis van het e-mailadres naar reacties. Het enige probleem is dat iedereen toegang heeft tot de backend. Maak je geen zorgen, we zullen dit in de volgende stap veilig maken.

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

  • « Previous Stap 8: Beschrijving van de gegevensstructuur
  • Next » Stap 10: De gebruikersinterface bouwen

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