Symfony2 Admin panel in 30 seconds?

Posted on: 2015-01-21 | Categories: PHP

Just few weeks ago i have introduced nice CRUD generator for generating basic admin scaffold. Today I have something even more interesting: Easy Symfony2 Admin panel generator. According to the documentation we should be able to generate complete and good looking admin panel in about 30 seconds (not including the installation and configuration). I decided to give this bundle a shot.

Before we start

Notice: This is a basic introduction to EasyAdminBundle. If you want more, read about advanced customizations and EasyAdminBundle integrations in More with EasyAdminBundle blog entry.

Before we create our admin panel there are some bundles that need to be installed and necessary configuration that needs to be set.

Create new project

As usually at the beginning we should create new Symfony2 project (installation step by step):

At the end of installation process you will be ask for DB connection configuration.
After that database should be created with command (if you haven’t done it yet manually):

Notice: According to the Symfony2 best practices after generating new project we have now brand new AppBundle where we should place our application logic. That’s why we are not going to create any other bundles.

Another notice: After installation we also need to enable app translator in app/config/config.yml with:

Install FOSUserBundle

I recommend installing FOSUserBundle for easy user management and also sign in / registration / password reset support for Symfony2 applications.

We need at least one entity. Let’s create empty User entity class that later will be extended with FOSUser model (we will also use that class to allow access to restricted areas of our app):

Then install FOSUserBundle through steps from documentation:

  • install FOSUserBundle via composer
  • enable it in AppKernel.php
  • configure User entity to extend FOSUser model
  • configure application security in security.yml file
  • configure necessary FOSUserBundle configuration in config.yml file
  • import FOSUserBundle routing files

After that we would need one User with ROLE_ADMIN credentials to access our admin application. This can be done with two simple Symfony2 shell and FOSUser commands:

Add Customer entity

Next step is to generate Customer entity for storing customers data:

Notice: This is just sample entity. If you want you can generate for example blog entry or product entity.

Now we can update generated entities to add some relations:

  • User should have their customers
  • Customer should have its user (owner)

In User entity we are going to add $customers property:

In Customer entity we need to add $user:

Update DB schema

Adding new entities and setting relations requires DB schema update:

Install EasyAdminBundle

From project directory we can now call following command to download and install EasyAdmin bundle:

Than enable it in app/AppKernel.php file:

Load routes in app/config/routing.yml:

And install Web Assets:

Easy Admin

After whole installation process we can configure entities for EasyAdmin.
And this is where the magic begins: add this four lines to app/config/config.yml file:

And that’s it. We have ready to use admin panel created in a few seconds. What is more important we need proper credentials to sign in to our panel (thanks to FOSUser bundle and Symfony2 security component).

Type following url in your browser:

http://localhost/sfEasyAdmin/web/app_dev.php/admin

and login with: admin / admin credentials.

You should see Admin panel similar to this (click to zoom images):

EasyAdmin - User

EasyAdmin - Customer

We are ready! We can now create, edit and delete Users and Customers.

Notice: in the lower left corner, EasyAdmin shows us the name of user who is currently logged in to the application.

Customization

As default configuration can be OK in some cases, in this example i want to update entities validation, forms and lists to display only that properties that we need.

Validation rules

By default our generated entities have no validation rules. If we want our properties to be required we should add e.g. NotBlank constraint to User or Customer entities.

It will display the appropriate message for empty name property:

EasyAdmin - Customer Add

Notice: Our generated entities by default have no constraints but also NULL values are not allowed, so saving empty form will cause NotNullConstraintViolationException execpetion with message that given column value cannot be null. To fix that we should add proper constraint or allow NULL value for column.

Forms

As we can customize what fields should be displayed, there is no way to set field type for each property: we can also customize field type for each property (in this case for creating new user):

Customized view of creating new User entity:

EasyAdmin - User Add

Lists

Using EasyAdmin bundle configuration we can set which fields should be displayed on the list. That’s as easy as setting:

We can also set proper data type for each column and use virtual properties for better user experience.

More information about other settings and possible modifications can be found in bundle official documentation.

The complete source code can be found on GitHub.

Good luck with customizations!