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

summary

EasyAdmin enables you to easily create admin panels bound to RDBMS-like storage.

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

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

environment

Reference

tutorial

Observation

To create an admin panel, you need to take 4 steps:

  1. preparation
  2. create dashboard
  3. introduce access control
  4. create a CRUD page

here is my.

1. Preparation

1-1. Build a User Management System with Symfony SecurityBundle

Follow my previous post:

1-2. install dependencies

According to their design page:

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

All are managed by Webpack through Symfony’s Webpack Encore.

Install bundle:

$ php composer require \
      symfony/webpack-encore-bundle
enter fullscreen mode

exit fullscreen mode

1-3. Install EasyAdmin Bundle

Here’s the main command line to get you started 🙂

$ composer require easycorp/easyadmin-bundle
enter fullscreen mode

exit fullscreen mode

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
enter fullscreen mode

exit fullscreen mode

1-4. (Optional) Install additional modules

They are useful for customizing forms:

$ php composer require \
      symfony/form \
      symfony/validator
enter fullscreen mode

exit fullscreen mode

2. Create Dashboard

2-1. Generate Dashboard Module

Happily, they provide useful manufacturer commands. run:

$ php bin/console make:admin:dashboard
enter fullscreen mode

exit fullscreen mode

That’s it.

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

 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.
enter fullscreen mode

exit fullscreen mode

Now you can join https://(your-domain)/admin, However, there should be no menu while welcome messages are shown.

2-2. Create a dashboard for use

First, create the scene. run:

$ mkdir templates/admin

$ nvim templates/admin/index.html.twig
enter fullscreen mode

exit fullscreen mode

Then write in it like below:

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

exit fullscreen mode

Next, edit 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();
enter fullscreen mode

exit fullscreen mode

Finally, generate the frontend asset:

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

exit fullscreen mode

open again. Your dashboard will have become your own (almost empty for now).

dashboard

2-3. introduce access control

If you want to prevent people who aren’t authenticated from using your admin panel, be sure to implement access controls:

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

exit fullscreen mode

Also above, you can use ROLE_ADMIN Instead ROLE_USER When your user admin.

4. Create a CRUD Page

4-1. generate crude module

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

$ php bin/console make:admin:crud
enter fullscreen mode

exit fullscreen mode

The output was below. On the first query choose your user entity:

 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
enter fullscreen mode

exit fullscreen mode

4-2. Customize Crude Modules

To add a menu for user CRUD in 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);
enter fullscreen mode

exit fullscreen mode

this much only!

5. View in Browser

Let’s go to Dashboard again and click on User Menu. Voila!

Admin Panel for User Management

Here comes the power to create/update/delete users in your app through the browser.

Leave a Comment