Hầu như các website hiện tại đều có thể được chia ra thành 2 phần client (dành cho người dùng thường sử dụng) và admin (dành cho quản trị viên của hệ thống). Và trang admin đa phần sẽ là chức năng CRUD (Create - Read - Update - Delete) đối với các đối tượng mà hệ thống quản lý. Và nếu làm bằng Laravel thì sẽ khá mất thời gian và công sức để hoàn thiện được nó.

Nói một cách đơn giản thì bây giờ các bạn muốn ăn thịt lợn thì có 2 cách:

1. Full service từ A-Z: mua lợn giống về tự nuôi từ bé, tắm rửa cho nó, lớn lên đủ cân thì mang đi thịt
2. Việc nhẹ lương cao: ra chợ gặp ông/bà bán thịt và mua thịt về ăn thôi

Và thằng Filament ở đây chính là ông/bà bán thịt lợn, giờ hãy cùng bắt tay vào tìm hiểu xem ông/bà ấy "bán thịt" cho chúng ta như thế nào nhé!

Trước khi bắt tay vào cài đặt thì chúng ta sẽ cần phải tìm hiểu về một số yêu cầu môi trường cơ bản. Hiện tại Laravel Filament đã phát triển đến phiên bản 3.0, và mỗi phiên bản sẽ có yêu cầu khác nhau, vì vậy hãy cân nhắc lựa chọn phiên bản cho phù hợp nhé. Còn nếu như bạn chỉ đang đặt mục tiêu tìm hiểu như mình thì cứ phiên bản mới nhất mà dùng thôi (trong nội dung bài viết cũng như là series Laravel Filament này mình sẽ sử dụng phiên bản Laravel 10.x và Filament 3.0 nhé)

Sau khi đã kiểm tra về điều kiện môi trường và lựa chọn phiên bản xong (tất nhiên là phải tạo một project laravel sẵn rồi nhé) thì chúng ta sẽ thực thi câu lệnh sau để cài đặt filament vào trong project

composer require filament/filament:"^3.2" -W

Sau khi đã cài đặt thành công, ta tiến hành khởi tạo một panels với câu lệnh

php artisan filament:install --panels

Sau khi chạy xong thì filament sẽ tự động thêm thư mục filament vào trong app\Providers và public\css, public\js cũng như là khai báo AdminPanelProvider vào trong providers của config\app.php;

Tiếp đó, bạn sẽ cần chạy câu lệnh sau và khai báo name/email/password để tạo 1 tài khoản đăng nhập vào trang admin

php artisan make:filament-user

Khi này, bạn có thể truy cập vào đường dẫn http://localhost:8000/admin/login để đăng nhập vào trang quản trị

Như vậy là chưa cần phải code bất cứ một dòng nào, chỉ với một vài câu lệnh đơn giản là chúng ta đã có trong tay chức năng đăng nhập/đăng xuất và truy cập vào trang admin rồi.

Giờ thì chúng ta sẽ bắt tay vào xây dựng nội dung cho trang admin nhé. Hệ thống này của mình sẽ là một trang blog đơn giản nên sẽ có một số bảng như là posts, categories.

B1: Tạo migration, model

• Phần này thì giống hệt với Laravel bình thường thôi không có gì đặc biệt cả,

   public function up(): void { Schema::create('categories', function (Blueprint $table) { $table->id(); $table->string('name'); $table->string('description'); $table->timestamps(); }); } public function up(): void { Schema::create('posts', function (Blueprint $table) { $table->id(); $table->string('title'); $table->string('slug'); $table->string('thumbnail'); $table->text('content'); $table->unsignedInteger('status')->default(0); $table->foreignId('user_id')->constrained('users')->cascadeOnDelete()->default(1); $table->foreignId('category_id')->constrained('categories')->cascadeOnDelete(); $table->timestamps(); }); }
  

  class Category extends Model
  { public function posts(): HasMany { return $this->hasMany(Post::class); }
  } class Post extends Model
  { public function author(): BelongsTo { return $this->belongsTo(User::class, 'user_id'); } public function category(): BelongsTo { return $this->belongsTo(Category::class); }
  } class User extends Model
  { public function posts(): HasMany { return $this->hasMany(Post::class); }
  }
  

B2: Tạo resource cho model

• Trước hết thì ta phải hiểu rõ khái niệm resource ở trong Filament sẽ hơi khác một chút so với những gì ta đã biết trong Laravel. Resource ở đây là một class được tạo ra để xây dựng đầy đủ chức năng CRUD cho một model ở trong hệ thống.

• Để tạo resource cho một model ta sẽ chạy câu lệnh

  php artisan make:filament-resource Post
  

• Lúc này các bạn sẽ thấy thư mục được tạo tự động theo cấu trúc thư mục app\Filament\Resources.

  

B3: hiển thị danh sách bản ghi

• Ở đây ta sẽ cần quan tâm đặc biết tới file app\Filament\Resources\PostResource.php vì đây sẽ là chỗ chúng ta khai báo xem những trường nào sẽ được hiển thị ở bảng danh sách, form thêm mới/sửa và kiểu dữ liệu của từng trường.

• Và trong phạm vi bài viết này, chúng ta sẽ tạm dừng ở phần demo hiển thị danh sách bản ghi trước nhé.

• Trước khi bắt tay vào code thì chúng ta cần nắm được là Filament cung cấp sẵn một số loại cột phổ biến mà người dùng cần, có thể chia ra làm 2 loại là cột tĩnh - cột động. Tùy vào dữ liệu của các bạn có thể lựa chọn loại cột hiển thị phù hợp.

  • Cột tĩnh: tức là chỉ có chức năng hiển thị, không thể chỉnh sửa trong bảng
    • TextColumn: hiển thị văn bản
    • IconColumn: hiển thị icon (danh sách icon tích hợp sẵn trong filament tại đây)
    • ImageColumn: hiển thị hình ảnh
    • ColorColumn: hiển thị màu sắc
  • Cột động: có thể chỉnh sửa giá trị trực tiếp tại bảng mà không cần chuyển sang form edit
    • SelectColumn: dropdown selection để có thể update
    • ToggleColumn: hiển thị dữ liệu kiểu true/false, có thể bật/tắt để cập nhật dữ liệu
    • TextInputColumn: hiển thị ô input để sửa văn bản trực tiếp
    • CheckboxColumn: tương tự như toggle

  <?php
  namespace App\Filament\Resources; use App\Filament\Resources\PostResource\Pages;
  use App\Filament\Resources\PostResource\RelationManagers;
  use App\Models\Post;
  use Filament\Forms;
  use Filament\Forms\Form;
  use Filament\Resources\Resource;
  use Filament\Tables;
  use Filament\Tables\Table;
  use Illuminate\Database\Eloquent\Builder;
  use Illuminate\Database\Eloquent\SoftDeletingScope; class PostResource extends Resource
  { protected static ?string $model = Post::class; //khai báo model được mapping đến protected static ?string $navigationIcon = 'heroicon-o-rectangle-stack'; //khai báo icon sử dụng ở sidebar admin //khai báo các trường được nhập vào trong form create/edit public static function form(Form $form): Form { return $form ->schema([ // ]); } //khai báo những trường sẽ hiển thị trong bảng danh sách bài post public static function table(Table $table): Table { return $table ->columns([ //các cột được hiển thị trong bảng //Tables\Columns\TypeData::make('column_name') Tables\Columns\TextColumn::make('title')->searchable(), Tables\Columns\TextColumn::make('slug'), Tables\Columns\ImageColumn::make('thumbnail'), Tables\Columns\ToggleColumn::make('status')->label('Is public'), Tables\Columns\TextColumn::make('author.email'), Tables\Columns\TextColumn::make('category.name'), Tables\Columns\TextColumn::make('created_at')->sortable(), ]) ->filters([ //các cột được áp dụng filter // ]) ->actions([ Tables\Actions\EditAction::make(), Tables\Actions\DeleteAction::make(), ]) ->bulkActions([ Tables\Actions\BulkActionGroup::make([ Tables\Actions\DeleteBulkAction::make(), ]), ]); } public static function getRelations(): array { return [ // ]; } /** khai báo những trang mà resource sẽ sử dụng List, Create, Edit. Nếu muốn thêm trang Detail thì sẽ khai báo trong đây */ public static function getPages(): array { return [ 'index' => Pages\ListPosts::route('/'), 'create' => Pages\CreatePost::route('/create'), 'edit' => Pages\EditPost::route('/{record}/edit'), ]; }
  }
  

• Và sau khi khai báo trong file PostResource.php như bên trên thì các bạn có thể truy cập vào http://localhost:8000/admin/posts để chiêm ngưỡng thành quả. Trang danh sách của bạn đã có sẵn các tính năng cơ bản như bên dưới với chỉ với vài dòng code

  • Pagination (phân trang): có thể thay đổi số lượng phần tử mỗi trang
  • Search (tìm kiếm): bạn muốn tìm kiếm theo trường dữ liệu nào thì sẽ thêm ->searchable() vào cột đó
  • Create/Edit: phần này sẽ để dành sang bài viết sau khi mình tìm hiểu về cách làm việc với form, còn giờ bấm vào thì chỉ ra trang trắng thôi 😂😂
  • Delete: có popup confirm xác nhận trước khi xóa
  • Sort: sắp xếp bản ghi theo trình tự tăng dần/giảm dần, thêm ->sortable() vào cột muốn sắp xếp