Dotkernel Admin V4

Posted by kakapiciu on July 27, 2022 | No Comments

Getting Started with Dotkernel Admin V4

DotKernel’s PSR-7 Admin is an application based on Mezzio, with the main purpose of managing and displaying tabular data from one or more databases components.

On 19 July 2022 Dotkernel Admin V4 has been officially released. Dotkernel Admin V4 comes with various interesting features and overall improvement of the core framework.

Ready to try it out?

There should be an admin account with the following credentials:

• Username: admin
• Password: dotadmin

Head over to https://admin4.dotkernel.net/ and see for yourself

Dotkernel Admin V4 Features

PHP 8.1

Dotkernel Admin V4 fully supports PHP 8.1 with a minimum requirement of PHP 7.4.

Configurability

From managing middleware order to simply adding an API key to you application the config directory is the way to go.

Want to register a new module? In config.php you will find the right place for it registering its ConfigProvider.php.
Got a shiny new Middleware? You can put it with the rest of them in pipeline.php where you can even edit in which order they should run.

You can further customize your app within the autoload directory by changing the application name and url into the app.global.php, adding the freshly created routes into navigation.global.php and much more.

Example adding a simple route to navigation bar:

[  
	'options' => [  
		'label' => 'Dashboard',  
		'route' => [  
			'route_name' => 'dashboard',  
		],  
		'icon' => 'fas fa-tachometer-alt',  
	]  
]

or a group of 2 or more routes

[  
	'options' => [  
		'label' => 'Manage admins',  
		'route' => '',  
		'icon' => 'fas fa-user-circle',  
	],  
	'pages' => [  
		[
			'options' => [  
				'label' => 'Admins',  
				'uri' => '/admin/manage',  
				'icon' => 'fas fa-user-circle',  
			],  
		],  
		[  
			'options' => [  
				'label' => 'Logins',  
				'uri' => '/admin/logins',  
				'icon' => 'fas fa-sign-in-alt',  
			],  
		]  
	]
]

Authorization Guards

The packages responsible for restricting access to certain parts of the application are dot-rbac-guard and dot-rbac. These packages work together to create an infrastructure that is customizable and diversified to manage user access to the platform by specifying the type of role the user has.

The authorization.global.php file provides multiple configurations specifying multiple roles as well as the types of permissions to which these roles have access.

//example of a flat RBAC model that specifies two types of roles as well as their permission  
'roles' => [
	'superuser' => [
		'permissions' => [
			'authenticated',
			'edit',
			'delete',
			//etc.. 
		]
	],
	'admin' => [
		'permissions' => [
			'authenticated',
			//etc..
		]
	]
]

The authorization-guards.global.php file provides configuration to restrict access to certain actions based on the permissions defined in authorization.global.php so basically we have to add the permissions in the dot-rbac configuration file first to specify the action restriction permissions.

//example of configuration example to restrict certain actions of some routes based on the permissions specified in the dot-rbac configuration file  
'rules' => [
	[
		'route' => 'account',
		'actions' => [
			//list of actions to apply , or empty array for all actions
			'unregister',
			'avatar',
			'details',
			'changePassword'
		],
		'permissions' => [
			'authenticated'
		]
	],
	[
		'route' => 'admin',
		'actions' => [
			'deleteAccount'
		],
		'permissions' => [
			'delete'
			//list of roles to allow
		]
	]
]

For registering new command first make sure your command class extends Symfony\Component\Console\Command\Command, then you can enable the command by registering it in config/autoload/cli.global.php.

Here you will also find our brand new file locker configuration so you can easily turn in on or off ( by default: 'enabled' => true )

Note: The File Locker System will create a command-{command-default-name}.lock file which will not let another instance of the same command to run until the previous one has finished.

You can list the existing commands running the following in a terminal:

php /bin/cli.php list

Note: You can take as example Dot\Cli\Command\DemoCommand

Routing

Providing each Module with a RoutesDelegator.php file for managing existing routes inside that specific module and an easy way of adding new ones providing the route path, Middleware that the route will use, an array of accepted methods and the route name.

$app->route(  
	'/admin[/{action}[/{uuid}]]',
	AdminController::class,
	[
		RequestMethodInterface::METHOD_GET,
		RequestMethodInterface::METHOD_POST
	],
	'admin'
 );

Note: The optional attributes on the route path are marked between [] like [/{uuid}]

Frontend

As for the frontend toolkit we chose to use Bootstrap 4.5.0 in combination with Fontawesome 5.0.6 for a minimalist but efficient design.

For assembling the app.js and app.css along with handling packages from package.json we recommend using npm 7 or up.

Our choice for listing raw data was Bootstrap Table because it is easy to implement and configurable in many ways.

Lets take admin table as an example:

<table data-toggle="table" data-url="/admin/list" data-click-to-select="true"
       data-mobile-responsive="true" data-min-width="800" 
       data-check-on-init="true" data-id-field="uuid"
       data-show-refresh="true" data-show-toggle="true" data-show-columns="true"
       data-search="true" data-pagination="true" data-toolbar="#tableToolbar"
       data-silent-sort="false" data-pagination-loop="false"
       data-side-pagination="server" data-page-list="[10, 30, 50, 100, 200]"
       data-page-size="30" data-single-select="true"
       data-sort-name="created" data-sort-order="desc" id="bsTable">
           <thead>
                <tr>
                     <th data-field="checked" data-checkbox="true">Id</th>
                     <th data-field="identity" data-sortable="true">Identity</th>
                     <th data-field="firstName" data-sortable="true">First Name</th>
                     <th data-field="lastName" data-sortable="true">Last Name</th>
                     <th data-field="roles" data-sortable="false">Roles</th>
                     <th data-field="status" data-sortable="false">Status</th>
                     <th data-field="created" data-sortable="true">Created</th>
                </tr>
           </thead>
</table>

Here we can tweak directly into the table data how our table looks, arrange in page or a couple of usages like the api url for pulling data, pagination, allowing multiple row select and more…

Note: You`ll find in the #tableToolbar buttons that toggle a modal for adding/editing/deleting admins.