Etap 9: Konfigurowanie panelu administracyjnego

5.2 version
Maintained Unmaintained
5.0

Konfigurowanie panelu administracyjnego

Dodawanie nadchodzących konferencji do bazy danych jest zadaniem administratorów i administratorek projektu. Panel administracyjny to chroniona część strony internetowej, w której osoby korzystające z konta administracyjnego mogą zarządzać danymi strony internetowej, moderować przesłane opinie i wiele innych.

Jak możemy to szybko stworzyć? Za pomocą pakietu, który jest w stanie wygenerować panel administracyjny w oparciu o model projektu. EasyAdmin idealnie się do tego nadaje.

Konfigurowanie EasyAdmin

Po pierwsze, dodaj EasyAdmin jako zależność do projektu:

1
$ symfony composer req "admin:^3"

EasyAdmin automatycznie generuje obszar administracyjny dla Twojej aplikacji, na podstawie konkretnych kontrolerów. Stwórz nowy katalog src/Controller/Admin/, w którym będziemy przechowywali wszystkie takie kontrolery.

1
$ mkdir src/Controller/Admin/

Rozpocznijmy naszą pracę z EasyAdmin tworząc „webowy panel administracyjny”, który będzie kluczowym miejscem do zarządzania danymi na stronie.

1
$ symfony console make:admin:dashboard

Zaakceptowanie domyślnych odpowiedzi powoduje utworzenie następującego kontrolera:

src/Controller/Admin/DashboardController.php
 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
30
namespace App\Controller\Admin;

use EasyCorp\Bundle\EasyAdminBundle\Config\Dashboard;
use EasyCorp\Bundle\EasyAdminBundle\Config\MenuItem;
use EasyCorp\Bundle\EasyAdminBundle\Controller\AbstractDashboardController;
use Symfony\Component\HttpFoundation\Response;
use Symfony\Component\Routing\Annotation\Route;

class DashboardController extends AbstractDashboardController
{
    /**
     * @Route("/admin", name="admin")
     */
    public function index(): Response
    {
        return parent::index();
    }

    public function configureDashboard(): Dashboard
    {
        return Dashboard::new()
            ->setTitle('Guestbook');
    }

    public function configureMenuItems(): iterable
    {
        yield MenuItem::linktoDashboard('Dashboard', 'fa fa-home');
        // yield MenuItem::linkToCrud('The Label', 'icon class', EntityClass::class);
    }
}

W ramach przyjętej konwencji, wszystkie kontrolery panelu administracyjnego są przechowywane w przestrzeni nazw App\Controller\Admin.

Wejdź do wygenerowanego panelu administracyjnego odwiedzając /admin - tak jak ustawiliśmy to w metodzie index(). Możesz zmienić adres URL na jaki tylko chcesz:

Bum! Mamy nieźle wyglądający panel administracyjny, gotowy do dostosowania do naszych potrzeb.

Następnym krokiem będzie utworzenie kontrolera do zarządzania konferencjami i komentarzami.

W kontrolerze mogłeś zauważyć funkcję configureMenuItems() która ma komentarz na temat dodawania linków do „CRUD”-ów. CRUD to akronim od „Create, Read, Update, and Delete” (utwórz, odczytaj, zaktualizuj, usuń) - podstawowych czterech operacji które możesz wykonać na każdej z encji. To jest dokładnie to, czego oczekujemy od panelu administracyjnego do wykonania za nas; EasyAdmin jednak wynosi to na wyższy poziom, zajmując się także wyszukiwaniem i filtrowaniem.

Wygenerujmy CRUD dla konferencji:

1
$ symfony console make:admin:crud

Wybierz 1, aby utworzyć interfejs administracyjny dla konferencji i użyj domyślnych wartości w pozostałych pytaniach. Następujący plik zostanie wygenerowany:

src/Controller/Admin/ConferenceCrudController.php
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
namespace App\Controller\Admin;

use App\Entity\Conference;
use EasyCorp\Bundle\EasyAdminBundle\Controller\AbstractCrudController;

class ConferenceCrudController extends AbstractCrudController
{
    public static function getEntityFqcn(): string
    {
        return Conference::class;
    }

    /*
    public function configureFields(string $pageName): iterable
    {
        return [
            IdField::new('id'),
            TextField::new('title'),
            TextEditorField::new('description'),
        ];
    }
    */
}

Zrób to samo dla komentarzy:

1
$ symfony console make:admin:crud

Ostatnim krokiem będzie dodanie do panelu interfejsów administracyjnych dla konferencji i komentarzy:

patch_file
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
--- a/src/Controller/Admin/DashboardController.php
+++ b/src/Controller/Admin/DashboardController.php
@@ -2,6 +2,8 @@

 namespace App\Controller\Admin;

+use App\Entity\Comment;
+use App\Entity\Conference;
 use EasyCorp\Bundle\EasyAdminBundle\Config\Dashboard;
 use EasyCorp\Bundle\EasyAdminBundle\Config\MenuItem;
 use EasyCorp\Bundle\EasyAdminBundle\Controller\AbstractDashboardController;
@@ -26,7 +28,8 @@ class DashboardController extends AbstractDashboardController

     public function configureMenuItems(): iterable
     {
-        yield MenuItem::linktoDashboard('Dashboard', 'fa fa-home');
-        // yield MenuItem::linkToCrud('The Label', 'fas fa-list', EntityClass::class);
+        yield MenuItem::linktoRoute('Back to the website', 'fas fa-home', 'homepage');
+        yield MenuItem::linkToCrud('Conferences', 'fas fa-map-marker-alt', Conference::class);
+        yield MenuItem::linkToCrud('Comments', 'fas fa-comments', Comment::class);
     }
 }

Nadpisaliśmy metodę configureMenuItems() aby dodać do menu pozycje z ikonami odpowiednimi dla konferencji i komentarzy, oraz linkiem przenoszącym na stronę główną.

EasyAdmin udostępnia API aby ułatwić linkowanie CRUD-ów za pomocą metody MenuItem::linkToRoute().

Strona główna panelu administracyjnego jest obecnie pusta. To jest miejsce, gdzie możesz wyświetlać statystyki, albo inne ważne informacje. Ponieważ nie mamy żadnych ważnych informacji do wyświetlenia, zróbmy przekierowanie na listę konferencji.

patch_file
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
--- a/src/Controller/Admin/DashboardController.php
+++ b/src/Controller/Admin/DashboardController.php
@@ -7,6 +7,7 @@ use App\Entity\Conference;
 use EasyCorp\Bundle\EasyAdminBundle\Config\Dashboard;
 use EasyCorp\Bundle\EasyAdminBundle\Config\MenuItem;
 use EasyCorp\Bundle\EasyAdminBundle\Controller\AbstractDashboardController;
+use EasyCorp\Bundle\EasyAdminBundle\Router\AdminUrlGenerator;
 use Symfony\Component\HttpFoundation\Response;
 use Symfony\Component\Routing\Annotation\Route;

@@ -17,7 +18,10 @@ class DashboardController extends AbstractDashboardController
      */
     public function index(): Response
     {
-        return parent::index();
+        $routeBuilder = $this->get(AdminUrlGenerator::class);
+        $url = $routeBuilder->setController(ConferenceCrudController::class)->generateUrl();
+
+        return $this->redirect($url);
     }

     public function configureDashboard(): Dashboard

Podczas wyświetlania relacji encji (konferencji powiązanej z danym komentarzem), EasyAdmin próbuje wykorzystać tekstową reprezentację konferencji. Jeśli klasa encji nie posiada zdefiniowanej „magicznej metody” __toString(), to domyślna implementacja używa nazwy encji oraz wartości przypisanej do klucza głównego (np. Conference #1). Aby wyświetlana treść zawierała więcej istotnych informacji, dodajmy metodę __toString() do klasy 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
@@ -44,6 +44,11 @@ class Conference
         $this->comments = new ArrayCollection();
     }

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

Zrób to samo dla klasy 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;

Teraz możesz dodawać/modyfikować/usuwać konferencje bezpośrednio z panelu administracyjnego. Pobaw się nim i dodaj co najmniej jedną konferencję.

Dodaj kilka komentarzy bez zdjęć. Na razie ustaw datę ręcznie; kolumnę createdAt wypełnimy automatycznie w późniejszym kroku.

Dostosowywanie EasyAdmin

Domyślny panel administracyjny działa dobrze, ale można go dostosować na wiele sposobów aby usprawnić jego działanie. Zróbmy kilka prostych zmian w encji Comment aby zademonstrować niektóre z tych możliwości:

patch_file
 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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
--- a/src/Controller/Admin/CommentCrudController.php
+++ b/src/Controller/Admin/CommentCrudController.php
@@ -3,7 +3,15 @@
 namespace App\Controller\Admin;

 use App\Entity\Comment;
+use EasyCorp\Bundle\EasyAdminBundle\Config\Crud;
+use EasyCorp\Bundle\EasyAdminBundle\Config\Filters;
 use EasyCorp\Bundle\EasyAdminBundle\Controller\AbstractCrudController;
+use EasyCorp\Bundle\EasyAdminBundle\Field\AssociationField;
+use EasyCorp\Bundle\EasyAdminBundle\Field\DateTimeField;
+use EasyCorp\Bundle\EasyAdminBundle\Field\EmailField;
+use EasyCorp\Bundle\EasyAdminBundle\Field\TextareaField;
+use EasyCorp\Bundle\EasyAdminBundle\Field\TextField;
+use EasyCorp\Bundle\EasyAdminBundle\Filter\EntityFilter;

 class CommentCrudController extends AbstractCrudController
 {
@@ -12,14 +20,44 @@ class CommentCrudController extends AbstractCrudController
         return Comment::class;
     }

-    /*
+    public function configureCrud(Crud $crud): Crud
+    {
+        return $crud
+            ->setEntityLabelInSingular('Conference Comment')
+            ->setEntityLabelInPlural('Conference Comments')
+            ->setSearchFields(['author', 'text', 'email'])
+            ->setDefaultSort(['createdAt' => 'DESC']);
+        ;
+    }
+
+    public function configureFilters(Filters $filters): Filters
+    {
+        return $filters
+            ->add(EntityFilter::new('conference'))
+        ;
+    }
+
     public function configureFields(string $pageName): iterable
     {
-        return [
-            IdField::new('id'),
-            TextField::new('title'),
-            TextEditorField::new('description'),
-        ];
+        yield AssociationField::new('conference');
+        yield TextField::new('author');
+        yield EmailField::new('email');
+        yield TextareaField::new('text')
+            ->hideOnIndex()
+        ;
+        yield TextField::new('photoFilename')
+            ->onlyOnIndex()
+        ;
+
+        $createdAt = DateTimeField::new('createdAt')->setFormTypeOptions([
+            'html5' => true,
+            'years' => range(date('Y'), date('Y') + 5),
+            'widget' => 'single_text',
+        ]);
+        if (Crud::PAGE_EDIT === $pageName) {
+            yield $createdAt->setFormTypeOption('disabled', true);
+        } else {
+            yield $createdAt;
+        }
     }
-    */
 }

Aby zmodyfikować sekcję Comment, wskazanie pól bezpośrednio w metodzie configureFields() pozwala nam na wyświetlenie ich w takiej kolejności jakiej byśmy chcieli. Niektóre pola są dalej konfigurowane, na przykład ukrywanie pól tekstowych na stronie z indeksem.

Metoda configureFilters() pozwala zdefiniować które filtry powinny być dostępne w wyszukiwarce.

Te modyfikacje są tylko małą prezentacją możliwości, jakie daje nam EasyAdmin.

Pobaw się panelem administracyjnym, wyfiltruj komentarze po konferencji lub na przykład wyszukuj je po adresie e-mail. Jedynym problemem jest to, że każdy ma do niego dostęp. Nie martw się, zabezpieczymy go w przyszłości.

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

  • « Previous Etap 8: Opis struktury danych
  • Next » Etap 10: Tworzenie interfejsu użytkownika

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