Alight-Admin

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
email	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()
• 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()
• Alight\Admin\Console
  • ::chart()
    • ->api()
    • ->config()
    • ->grid()
    • ->role()
• Alight\Admin\Menu
  • ::item()
    • ->action()
    • ->icon()
    • ->key()
    • ->role()
    • ->url()
  • ::subItem()
    • ->action()
    • ->icon()
    • ->key()
    • ->role()
    • ->url()
  • ::build()

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
  • juneszh/alight
  • gregwar/captcha
  • symfony/var-exporter
• UI components
  • React
  • Vite
  • Ant Design
  • TinyMCE 6

License

• MIT license