juneszh / alight-admin
Alight Admin is a quick admin panel extension based on the Alight framework.
Requires
- php: >=8.3
- gregwar/captcha: ^2.1
- juneszh/alight: ^3.0
- symfony/var-exporter: ^7.4 || ^8.0
Requires (Dev)
- phpstan/phpstan: ^2.1
- phpunit/phpunit: ^12.5
README
Alight-Admin is a quick admin panel extension based on the Alight framework.
Features
- No front-end coding required. Built-in Ant Design UI (React) components and driven by PHP interface.
- Quickly build and configure CRUD pages with Table/Form rendering.
- Includes authorization, permissions and user management.
- Customizable Charts displayed in the console by PHP, such as Line, Column, Pie, etc.
Alight Family
| Project | Description |
|---|---|
| Alight | Basic framework built-in routing, database, caching, etc. |
| Alight-Admin | A full admin panel extension based on Alight. No front-end coding required. |
| Alight-Project | A template for beginner to easily create web applications by Alight/Alight-Admin. |
Requirements
PHP 8.3+
Usage
Alight-Admin can be quickly built using Alight-Project.
Creating Project
$ composer create-project juneszh/alight-project {PROJECT_DIRECTORY}
Initialize Admin
The following commands will build the runtime environment required by Alight-Admin, such as installing composer package, inserting configuration options, creating database tables, and downloading front-end resources. Please make sure the database has been configured.
$ cd {PROJECT_DIRECTORY}
$ composer require juneszh/alight-admin
$ composer run admin-install
$ composer run admin-download
Try the CRUD
Suppose we already have a database table named admin_user:
| Name | Datatype | Default |
|---|---|---|
| id | SMALLINT | AUTO_INCREMENT |
| account | VARCHAR | |
| password | VARCHAR | |
| name | VARCHAR | |
| VARCHAR | ||
| role_id | TINYINT | 0 |
| status | TINYINT | 1 |
| auth_key | VARCHAR | |
| create_time | TIMESTAMP | CURRENT_TIMESTAMP |
Now, create a php table function under controller. For example:
File: app/controller/admin/Test.php
<?php declare(strict_types=1); namespace ctr\admin; use Alight\Admin\Auth; use Alight\Admin\Form; use Alight\Admin\Table; class Test { public static function userTable(): void { // Check the role_id from logged in user Auth::checkRole([1]); // Here '1' means only administrators have access // Create the table columns and search bar Table::column('id')->sort('ascend'); Table::column('account')->search()->sort(); Table::column('role_id')->search('select')->enum([1 => 'Administrator', 2 => 'Editor']); Table::column('name')->search(); Table::column('email')->search(); Table::column('status')->search('select')->enum([1 => 'Enable', 2 => 'Disable']); Table::column('create_time')->search('dateRange'); // Create the buttons Table::button('add')->toolbar(); // Here 'toolbar()' means this button will be placed on toolbar Table::button('edit'); Table::button('password')->color(Table::COLOR_DANGER); // Bind the database table 'admin_user' and render table page Table::render('admin_user'); } }
Then, we will get the table page as:
(In order to make the code more compact, some settings are omitted, such as: column title, status point, etc.)
Next, we go ahead and create a form function:
public static function userForm(): void { // Ditto, Check the user access Auth::checkRole([1]); // Create the form fields Form::create('add'); // This form will bind the 'add' button Form::field('account')->required(); Form::field('role_id')->type('select')->enum([1 => 'Administrator', 2 => 'Editor'])->required()->default(1); Form::field('name')->required(); Form::field('email'); Form::field('password')->type('password')->required(); Form::field('confirm_password')->database(false)->type('password')->required()->confirm('password'); // Create another form Form::create('edit')->copy('add'); // This form will bind the 'edit' button and copy fields from 'add' Form::field('password')->delete(); Form::field('confirm_password')->delete(); Form::field('status')->type('radio')->enum([1 => 'Enable', 2 => 'Disable']); // Create last form for 'password' button Form::create('password')->copy('add', ['password', 'confirm_password']); // Bind the database table 'admin_user' and render form page Form::render('admin_user'); }
Then, we will get the form page as:
The last step, configure routing and side menu:
File: config/route/admin.php
<?php declare(strict_types=1); use Alight\Route; Route::get('test/user/table', [\ctr\admin\Test::class, 'userTable'])->auth(); Route::any('test/user/form', [\ctr\admin\Test::class, 'userForm'])->auth();
File: config/admin/menu.php
<?php declare(strict_types=1); use Alight\Admin\Menu; Menu::item('Test'); Menu::subItem('User')->url('test/user/table');
The admin_user table now has a complete CRUD interface. See the API list for more information.
Try the Console Charts
Create charts with built-in data.
File: config/admin/console.php
<?php declare(strict_types=1); use Alight\Admin\Console; // Here using Line charts, we support 30+ charts with AntDesign Charts // More details please refer to : https://ant-design-charts.antgroup.com/en/examples Console::chart(Console::CHART_LINE)->config([ 'xField' => 'date', 'yField' => 'value', 'height' => 200, 'data' => [ ['date' => '2019-07-21', 'value' => 20], ['date' => '2019-07-22', 'value' => 14], ['date' => '2019-07-23', 'value' => 9], ['date' => '2019-07-24', 'value' => 26] ] ])->grid(['span' => 12]); // Means half the width of the grid. full of 24
Create charts with api data.
File: config/admin/console.php
<?php declare(strict_types=1); use Alight\Admin\Console; Console::chart(Console::CHART_COLUMN)->config([ 'xField' => 'date', 'yField' => 'value', 'height' => 200 ])->grid(['span' => 12])->api('test/column'); // Define the path to the API
File: app/controller/admin/Test.php
public static function columnData(): void { // Check the user access Auth::checkRole([1]); $data = [ ['date' => '2019-08-28', 'value' => 20], ['date' => '2019-08-29', 'value' => 19], ['date' => '2019-08-30', 'value' => 6], ['date' => '2019-08-31', 'value' => 9] ]; // Response using the built-in json format api \Alight\Response::api(0, null, ['data' => $data]); }
File: config/route/admin.php
<?php declare(strict_types=1); use Alight\Route; Route::get('test/column', [\ctr\admin\Test::class, 'columnData'])->auth();
Finally, we will get the console page as:
API
- Alight\Admin\Table
- ::button()
- ->action()
- ->batch()
- ->color()
- ->column()
- ->expand()
- ->if()
- ->param()
- ->role()
- ->title()
- ->toolbar()
- ->url()
- ->variant()
- ::column()
- ->align()
- ->copyable()
- ->database()
- ->ellipsis()
- ->enum()
- ->fixed()
- ->hide()
- ->html()
- ->role()
- ->search()
- ->sort()
- ->title()
- ->tooltip()
- ->type()
- ->width()
- ::expand()
- ->align()
- ->copyable()
- ->enum()
- ->fixed()
- ->hide()
- ->html()
- ->role()
- ->sort()
- ->title()
- ->tooltip()
- ->type()
- ->width()
- ::statistic()
- ->title()
- ->value()
- ::summary()
- ->avg()
- ->precision()
- ::render()
- ::button()
- Alight\Admin\Form
- ::create()
- ->copy()
- ::field()
- ->button()
- ->confirm()
- ->database()
- ->default()
- ->delete()
- ->disabled()
- ->enum()
- ->grid()
- ->hide()
- ->if()
- ->options()
- ->placeholder()
- ->raw()
- ->readonly()
- ->request()
- ->required()
- ->reset()
- ->role()
- ->rules()
- ->title()
- ->tooltip()
- ->type()
- ::subField() supports the same methods as
::field(). - ::render()
- ::create()
- Alight\Admin\Console
- ::chart()
- ->api()
- ->config()
- ->grid()
- ->role()
- ::chart()
- Alight\Admin\Menu
- ::item()
- ->action()
- ->icon()
- ->key()
- ->role()
- ->url()
- ::subItem()
- ->action()
- ->icon()
- ->key()
- ->role()
- ->url()
- ::build()
- ::item()
Development
Install dependencies and run Composer validation, PHP syntax checks, PHPStan, and the PHPUnit suite:
$ composer install $ composer check
Use composer lint, composer analyse, or composer test when only one check
is needed. During local development of the Alight family repositories, test
against an unpublished sibling checkout with:
$ ALIGHT_SOURCE_DIR=../alight/src composer check
Frontend resources are validated separately:
$ cd resource
$ npm ci
$ npm run lint
$ npm run build
Credits
- Composer requires
- UI components



