有了 Livewire 提供我們前後端的互動功能之後，後續就有許多的應用可以實現了。
其中一個非常實用的應用，就是 Laravel 所推出的 filament 套件了
根據官網的說法，這個套件是用來快速實作管理介面和應用。在我們過去的經驗內，這個套件可以達到的客製化程度，比起之前的 Laravel Nova 和 Laravel admin 等套件要好很多，並且開發起來非常便利。
下面我們延續之前的專案，實作一個針對商品的管理介面。
首先我們先安裝好 Filament 套件
composer require filament/filament
安裝好套件之後，在本地安裝需要的檔案
php artisan filament:install --panels
安裝時會詢問
┌ What is the panel's ID? ─────────────────────────────────────┐
│ admin │
└──────────────────────────────────────────────────────────────┘
安裝好之後，我們就可以在 http://127.0.0.1:8000/admin/login 看到後台登入畫面了
這時我們需要一個有權限可以登入的帳號，我們可以用 make:filament-user 這個指令建立用戶
php artisan make:filament-user
┌ Name ────────────────────────────────────────────────────────┐
│ admin │
└──────────────────────────────────────────────────────────────┘
┌ Email address ───────────────────────────────────────────────┐
│ admin@test.test │
└──────────────────────────────────────────────────────────────┘
┌ Password ────────────────────────────────────────────────────┐
│ •••••••• │
└──────────────────────────────────────────────────────────────┘
建立好之後，我們就可以登入了
這時候我們還沒有任何的操作面板可以使用，不過沒關係
由於我們已經有對應商品的 Model，filament 可以根據 Model 的結構幫我們生成畫面
我們只需要用 make:filament-resource 就可以生成後台管理畫面
php artisan make:filament-resource Product
The "title attribute" is used to label each record in the UI.
You can leave this blank if records do not have a title.
┌ What is the title attribute for this model? ─────────────────┐
│ 商品 │
└──────────────────────────────────────────────────────────────┘
┌ Would you like to generate a read-only view page for the resource? ┐
│ Yes │
└────────────────────────────────────────────────────────────────────┘
┌ Should the configuration be generated from the current database columns? ┐
│ Yes │
└──────────────────────────────────────────────────────────────────────────┘
INFO Filament resource [App\Filament\Resources\Products\ProductResource] created successfully.
處理好之後，我們會發現多了一個 app/Filament/Resources/Products 資料夾，
我們先看 app/Filament/Resources/Products/ProductResource.php 這個檔案
<?php
namespace App\Filament\Resources\Products;
use App\Filament\Resources\Products\Pages\CreateProduct;
use App\Filament\Resources\Products\Pages\EditProduct;
use App\Filament\Resources\Products\Pages\ListProducts;
use App\Filament\Resources\Products\Pages\ViewProduct;
use App\Filament\Resources\Products\Schemas\ProductForm;
use App\Filament\Resources\Products\Schemas\ProductInfolist;
use App\Filament\Resources\Products\Tables\ProductsTable;
use App\Models\Product;
use BackedEnum;
use Filament\Resources\Resource;
use Filament\Schemas\Schema;
use Filament\Support\Icons\Heroicon;
use Filament\Tables\Table;
class ProductResource extends Resource
{
protected static ?string $model = Product::class;
protected static string|BackedEnum|null $navigationIcon = Heroicon::OutlinedRectangleStack;
protected static ?string $recordTitleAttribute = '商品';
public static function form(Schema $schema): Schema
{
return ProductForm::configure($schema);
}
public static function infolist(Schema $schema): Schema
{
return ProductInfolist::configure($schema);
}
public static function table(Table $table): Table
{
return ProductsTable::configure($table);
}
public static function getRelations(): array
{
return [
//
];
}
public static function getPages(): array
{
return [
'index' => ListProducts::route('/'),
'create' => CreateProduct::route('/create'),
'view' => ViewProduct::route('/{record}'),
'edit' => EditProduct::route('/{record}/edit'),
];
}
}
這邊已經幫我們建立了商品物件的後台，並且建立好對應的列表、建立、讀取、編輯畫面了。
Filament 的邏輯是列表時使用的是對應的 Table 物件，在這邊是 app/Filament/Resources/Products/Schemas/ProductTable.php
<?php
namespace App\Filament\Resources\Products\Tables;
use Filament\Actions\BulkActionGroup;
use Filament\Actions\DeleteBulkAction;
use Filament\Actions\EditAction;
use Filament\Actions\ViewAction;
use Filament\Tables\Columns\IconColumn;
use Filament\Tables\Columns\TextColumn;
use Filament\Tables\Table;
class ProductsTable
{
public static function configure(Table $table): Table
{
return $table
->columns([
TextColumn::make('name')
->searchable(),
TextColumn::make('price')
->money()
->sortable(),
TextColumn::make('stock')
->numeric()
->sortable(),
IconColumn::make('is_active')
->boolean(),
TextColumn::make('created_at')
->dateTime()
->sortable()
->toggleable(isToggledHiddenByDefault: true),
TextColumn::make('updated_at')
->dateTime()
->sortable()
->toggleable(isToggledHiddenByDefault: true),
TextColumn::make('category_id')
->numeric()
->sortable(),
])
->filters([
//
])
->recordActions([
ViewAction::make(),
EditAction::make(),
])
->toolbarActions([
BulkActionGroup::make([
DeleteBulkAction::make(),
]),
]);
}
}
商品列表頁在沒有商品時，看起來是這樣
當我們在建立、讀取、編輯時，預設使用的是對應的 Form 物件，在這邊是 app/Filament/Resources/Products/Schemas/ProductForm.php
<?php
namespace App\Filament\Resources\Products\Schemas;
use Filament\Forms\Components\TextInput;
use Filament\Forms\Components\Textarea;
use Filament\Forms\Components\Toggle;
use Filament\Schemas\Schema;
class ProductForm
{
public static function configure(Schema $schema): Schema
{
return $schema
->components([
TextInput::make('name')
->required(),
Textarea::make('description')
->columnSpanFull(),
TextInput::make('price')
->required()
->numeric()
->prefix('$'),
TextInput::make('stock')
->required()
->numeric()
->default(0),
Toggle::make('is_active')
->required(),
TextInput::make('category_id')
->numeric(),
]);
}
}
建立畫面看起來會是這樣
當我們建立好商品後，就可以在商品頁面看到剛建立的商品了
這邊我們看到，我們只下了幾個指令，甚至沒有使用 AI，就已經建立好了一個基本的管理後台！
今天的部分就到這邊，我們明天見！
iThome鐵人賽
看影片追技術