TheLazy.Dev
Portfolio GitHub

Blog

php |security |authentication |symfony

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

nabbisen

nabbisen

Posted on November 11, 2022

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

Summary

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

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:

nabbisen

Symfony 6: User Authentication

nabbisen ・ Nov 10 '22

#php #symfony #security #authentication

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
Enter fullscreen mode Exit fullscreen mode

1-3. Install EasyAdmin bundle

Here is the main command line for getting started :)

$ composer require easycorp/easyadmin-bundle
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

1-4. (Optional) Install additional modules

They are useful to customize forms:

$ php composer require \
      symfony/form \
      symfony/validator
Enter fullscreen mode Exit fullscreen mode

2. Create dashboard

2-1. Generate dashboard modules

Happily, they provide useful maker 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 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.
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Then write in it just as below:

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

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();
Enter fullscreen mode Exit fullscreen mode

Finally, generate frontend assets:

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

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

dashboard

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 }
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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);
Enter fullscreen mode Exit fullscreen mode

That's it!

(Optional) 4-3. User password management

You may want to implement password changer with it hashed:

nabbisen

Symfony 6 and EasyAdmin 4: Hashing password

nabbisen ・ Nov 11 '22

#php #security #symfony #password

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🌟

💖 💪 🙅 🚩
nabbisen
nabbisen

Posted on November 11, 2022

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

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

November 11, 2022