Symfony 6 and EasyAdmin 4: Admin Panel for User Management System

created
( modified )
@nabbisen

Summary

EasyAdmin enables you to create admin panel bound to storage such as RDBMS easily.

eyecatch

It is one of the bundles of Symfony, a powerful and flexible PHP framework, also requiring Doctrine ORM entities.

This post shows how to implement admin panel for user management system with Symfony and EasyAdmin.

Environment

Reference

Tutorial

Overview

In order to create admin panel, you need to take the 4 steps:

  1. Preparation
  2. Create dashboard
  3. Introduce access control
  4. Create a CRUD page

Here we go.

1. Preparation

1-1. Build up user management system with Symfony SecurityBundle

Follow my previous post.

1-2. Install dependency

According to their Design page:

The design of the backend is ready for any kind of application.

all managed by Webpack via Symfony’s Webpack Encore.

Install the bundle:

$ php composer require \
      symfony/webpack-encore-bundle

1-3. Install EasyAdmin bundle

Here is the main command line for getting started :)

$ composer require easycorp/easyadmin-bundle

The output was:

Info from https://repo.packagist.org: #StandWithUkraine
Using version ^4.4 for easycorp/easyadmin-bundle
./composer.json has been updated
Running composer update easycorp/easyadmin-bundle
Loading composer repositories with package information
Restricting packages listed in "symfony/symfony" to "6.1.*"
Updating dependencies
Lock file operations: 3 installs, 0 updates, 0 removals
  - Locking easycorp/easyadmin-bundle (v4.4.2)
  - Locking symfony/polyfill-uuid (v1.26.0)
  - Locking symfony/uid (v6.1.5)
Writing lock file
Installing dependencies from lock file (including require-dev)
Package operations: 3 installs, 0 updates, 0 removals
  - Downloading symfony/polyfill-uuid (v1.26.0)
  - Downloading symfony/uid (v6.1.5)
  - Downloading easycorp/easyadmin-bundle (v4.4.2)
  - Installing symfony/polyfill-uuid (v1.26.0): Extracting archive
  - Installing symfony/uid (v6.1.5): Extracting archive
  - Installing easycorp/easyadmin-bundle (v4.4.2): Extracting archive
Generating optimized autoload files
112 packages you are using are looking for funding.
Use the `composer fund` command to find out more!

Symfony operations: 1 recipe (25a03525415bea10d26670af31f4672d)
  - Configuring easycorp/easyadmin-bundle (>=3.0): From github.com/symfony/recipes:main
Executing script cache:clear [OK]
Executing script assets:install public [OK]
              
 What's next? 
              

Some files have been created and/or updated to configure your new packages.
Please review, edit and commit them: these files are yours.

No security vulnerability advisories found

1-4. (Optional) Install additional modules

They are useful to customize forms:

$ php composer require \
      symfony/form \
      symfony/validator

2. Create dashboard

2-1. Generate dashboard modules

Happily, they provide useful maker commands. Run:

$ php bin/console make:admin:dashboard

That’s it.

You will be asked some questions. Here, I chose the default at all:

 Which class name do you prefer for your Dashboard controller? [DashboardController]:
 > 

 In which directory of your project do you want to generate "DashboardController"? [src/Controller/Admin/]:
 > 


                                                                                                                        
 [OK] Your dashboard class has been successfully generated.                                                             
                                                                                                                        

 Next steps:
 * Configure your Dashboard at "src/Controller/Admin/DashboardController.php"
 * Run "make:admin:crud" to generate CRUD controllers and link them from the Dashboard.

Now you can connect to https://(your-domain)/admin. However, there must be no menus, while welcome messages are shown.

welcome to easyadmin

2-2. Build up dashboard for use

First, create the view. Run:

$ mkdir templates/admin

$ nvim templates/admin/index.html.twig

Then write in it just as below:

+ {% extends '@EasyAdmin/page/content.html.twig' %}

Next, edit the controller (src/Controller/Admin/DashboardController.php):

  class DashboardController extends AbstractDashboardController
  {
      #[Route('/admin', name: 'admin')]
      public function index(): Response
      {
+         return $this->render('admin/index.html.twig');
-         return parent::index();
-         // return parent::index();

Finally, generate frontend assets:

$ yarn encore dev
$ # alternatively, `npm run dev` is available

Open again. Your dashboard must have become your own (almost blank for now).

img/dashboard.png

2-3. Introduce access control

Be sure to implement access control if you prevent those who are not authenticated from using your admin panel:

  security:
      # ...
      access_control:
          # ...
+         - { path: ^/admin, roles: ROLE_USER }

Besides, above, you can use ROLE_ADMIN instead of ROLE_USER when your user is admin.

4. Create a CRUD page

4-1. Generate crud modules

Thanks to them, it is also a single command line. Run:

$ php bin/console make:admin:crud

The output was below. Choose your user entity at the first question:

 Which Doctrine entity are you going to manage with this CRUD controller?:
  [0] App\Entity\User
 > 0

 Which directory do you want to generate the CRUD controller in? [src/Controller/Admin/]:
 > 

 Namespace of the generated CRUD controller [App\Controller\Admin]:
 > 

                                                                                                                        
 [OK] Your CRUD controller class has been successfully generated.                                                       
                                                                                                                        

 Next steps:
 * Configure your controller at "src/Controller/Admin/UserCrudController.php"
 * Read EasyAdmin docs: https://symfony.com/doc/master/bundles/EasyAdminBundle/index.html

4-2. Customize crud modules

In order to add a menu for user CRUD to the dashboard, edit src/Controller/Admin/DashboardController.php:

+ use App\Entity\User;
  # ...
  class DashboardController extends AbstractDashboardController
  {
      # ...
      public function configureMenuItems(): iterable
      {
-         // yield MenuItem::linkToCrud('The Label', 'fas fa-list', EntityClass::class);
+         yield MenuItem::linkToCrud('User', 'fas fa-list', User::class);

That’s it!

(Optional) 4-3. User password management

You may want to implement password changer with it hashed.

5. View in browser

Let’s go to the dashboard again and click the User menu. Voilà!

admin panel for user management

Here comes the power🔥 to create/update/delete users in your app via browser🌟


Comments or feedbacks are welcomed and appreciated.