Xin chào mọi người, đã lâu lắm rồi mình mới lại có thời gian để ngồi lại viết bài chia sẻ với mọi người. Thật ra là cũng lười viết lắm nhưng mà cái này hay quá nên không chia sẻ thì cảm thấy thật có lỗi với lương tâm. Hy vọng mọi người sẽ dành ra ít phút để đọc hết bài viết này vì mình tin chắc rằng nó thật sự rất tuyệt vời cho tất cả các lập trình viên.
Đã bao giờ bạn thấy mình tốn rất nhiều thời gian khi viết một ứng dụng quản lý dù nó chỉ có CRUD ? Với mình thì thật sự nó mất rất nhiều thời gian và công sức từ bước dựng base -> dựng file master -> route -> model -> controller -> view thật là vất vả đúng không ? Mấy hôm nay mình có tìm hiểu về thằng Filament này và thấy nó thật tuyệt vời để giải quyết bài toán trên và rất phù hợp với những dự án vừa và nhỏ. Thằng này thì mình thấy nó rất nổi tiếng và phổ biến ở nước ngoài rồi nhưng ở Việt Nam không hiểu lý do gì mà nó chưa viral lắm và search trên google keyword này cũng không có mấy bài nói đến cách sử dụng nó. Nào không vòng vo nữa, vào việc việc chính thôi let's go:
I. Filament là gì ?
Filament Laravel là một bộ công cụ (toolkit) dùng để xây dựng giao diện quản trị (admin panel) và quản lý backend trong ứng dụng Laravel. Filament cung cấp các tính năng mạnh mẽ giúp phát triển các dashboard hoặc hệ thống quản trị dữ liệu một cách nhanh chóng và dễ dàng. Nó tập trung vào việc tạo ra các giao diện quản trị trực quan và thân thiện với người dùng thông qua các bảng điều khiển (dashboard), form, và bảng dữ liệu.
Filament Laravel rất hữu ích khi bạn cần xây dựng hệ thống quản lý nội dung (CMS), bảng điều khiển cho các ứng dụng SaaS, hoặc bất kỳ hệ thống quản lý nào cần tương tác với cơ sở dữ liệu mà không cần phải viết quá nhiều code từ đầu.
II. Chuẩn bị đồ nghề nào:
Với thời điểm hiện tại mình viết bài thì Filament đã ra mắt V3 của nó, và để có thể cài thằng V3 này thì có một số yêu cầu như sau:
Php > v8.1
Laravel > v10.0
Livewire > v3
Dự án demo mình sẽ chạy sau đây thì sẽ build với Laravel v10, Php v8.2 là Livewire v3 nhé ((Mọi người có thể dùng Laravel v11 cho mới nhất nhưng mình thì thích dùng laravel v10 vì mình rất ghét số 11)
III. Bắt đầu:
Cài đặt Laravel v10: composer create-project laravel/laravel:10.0 filament-example
Ném docker, docker-compose.yml vào (Mình build docker còn không thì mọi người cứ run như cách mọi người vẫn làm nhé) => ai cần docker thì liên hệ mình gửi cho
docker compose up -d --build
docker exec -it php_filament /bin/sh
tiếp theo thì composer install, .env, config:cache các kiểu cho dự án nó lên được
Sau đây là bắt đầu đi vào Filament này:
Cài đặt Filament bằng cách chạy 2 lệnh dưới:
composer require filament/filament:"3.2" -W
php artisan filament:install --panels
Lệnh này sẽ tạo và đăng ký một Provider với Laravel có tên là app/Providers/Filament/AdminPanelProvider.php.
Tạo một người dùng Filament:
Bạn có thể tạo tài khoản người dùng mới bằng lệnh sau:
php artisan make:filament-user
Mở 127.0.0.1:8000/admin trên trình duyệt web của bạn, đăng nhập vào và bạn sẽ thấy trang chủ giao diện ứng dụng!
Bây giờ mình sẽ demo với bài toán: bệnh nhân (Patient), phương pháp điều trị (Treatment), người bảo hộ (Owner)
Tạo model và migration:
php artisan make:model Owner -m
php artisan make:model Patient -m
php artisan make:model Treatment -m
Các bảng sẽ có các column như sau:
Schema::create('owners', function (Blueprint $table) {
$table->id();
$table->string('email');
$table->string('name');
$table->string('phone');
$table->timestamps();
});
Schema::create('patients', function (Blueprint $table) {
$table->id();
$table->date('date_of_birth');
$table->string('name');
$table->foreignId('owner_id')->constrained('owners')->cascadeOnDelete();
$table->string('type');
$table->timestamps();
});
Schema::create('treatments', function (Blueprint $table) {
$table->id();
$table->string('description');
$table->text('notes')->nullable();
$table->foreignId('patient_id')->constrained('patients')->cascadeOnDelete();
$table->unsignedInteger('price')->nullable();
$table->timestamps();
});
Có một số lưu ý và kiến thức quan trọng mình ở đây mình cần lưu ý:
Trong Laravel, bảo vệ gán hàng loạt (mass assignment protection) là một cơ chế bảo mật nhằm ngăn chặn việc gán hàng loạt dữ liệu không mong muốn vào các thuộc tính của mô hình (model). Điều này đảm bảo rằng chỉ những trường cụ thể (được khai báo trong $fillable) mới có thể được gán giá trị khi tạo hoặc cập nhật mô hình.
Filament đảm bảo rằng chỉ các dữ liệu hợp lệ mới được lưu vào các mô hình (model). Vì vậy, khi sử dụng Filament, cơ chế kiểm soát gán hàng loạt có thể được bỏ qua một cách an toàn mà không ảnh hưởng đến bảo mật.
- Để tắt tính năng bảo vệ gán hàng loạt cho tất cả các mô hình trong ứng dụng Laravel, bạn thêm dòng Model::unguard() vào phương thức boot() của AppServiceProvider.
- Thiết lập mối quan hệ giữa các model như sau:
- Trong Filament, Resource là một static class dùng để tạo giao diện CRUD, nó sẽ giúp chúng ta dễ dàng hơn khi xây dựng các trang này. để tạo resource chạy cmd:
php artisan make:filament-resource Patient
Nó tạo ra một số tập tin trong app/Filament/Resources, cấu trúc như sau:
- Truy cập /admin/patientsvào trình duyệt và xem thử mình đã có gì rồi nhé ^^
- Nếu bạn mở PatientResource.php có một phương thức form()với một mảng trống schema([...]) . Thêm các trường biểu mẫu vào lược đồ này sẽ xây dựng một biểu mẫu có thể được sử dụng để tạo và chỉnh sửa bệnh nhân mới.
- Thêm dữ liệu vào form() như hình dưới:
Nhìn vào chắc cũng dễ hiểu nhỉ ? Mình sẽ giải thích một đoạn ở relationship chắc chỗ đó là hơi rắc rối một xíu:
Đối số đầu tiên của relationship() là tên của hàm xác định mối quan hệ trong mô hình (được Filament sử dụng để tải các tùy chọn) — trong trường hợp này là owner. Đối số thứ hai là tên cột để sử dụng từ bảng liên quan — trong trường hợp này là name.
Chúng ta cũng sẽ owner là trường bắt buộc, searchable()và preload() 50 người giám hộ đầu tiên vào danh sách có thể tìm kiếm (trong trường hợp danh sách dài)
- Đến đây lại ra và xem thành quả chúng ta đạt được nha.
Vì người giám hộ là bắt buộc, nhiều lúc đang tạo bệnh nhân nhưng bạn không muốn ra ngoài tạo người giám hộ thì Filament cũng giải quết vấn đề này cho chúng ta một cách rất dễ dàng thông qua biểu mẫu modal (có thể truy cập dưới dạng +nút bên cạnh nút select). Sử dụng createOptionForm()phương pháp để nhúng biểu mẫu modal với TextInputcác trường cho tên, địa chỉ email và số điện thoại của chủ sở hữu:
Lại ra và xem thành quả nhé, hãy tạo 5-10 bản ghi để test luôn nha ^^
Sau khi tạo bản ghi và ra trang quản lý bệnh nhân bạn có thể thấy nó đang như thế này:
không có thông tin nào của bệnh nhân được show ra, hãy sửa table như ảnh dưới:
Sau khi xong bạn có thể thấy ứng dụng của mình trông như thế này bạn có thể search theo tên bệnh nhân, tên người bảo hộ và có thể sort theo ngày tháng năm sinh, xịn xò quá đúng không.
Bảng Filament có thể có bộ lọc , là các thành phần giúp giảm số lượng bản ghi trong một bảng bằng cách thêm phạm vi vào truy vấn Eloquent.
Lại ra và xem thành quả nhé:
Chắc viết đến đây là mọi người đã thấy sức mạnh của Filament này như thế nào rồi, nó còn cả một cái document dài như quốc lộ 1A mà mình không thể viết hết được, mình chỉ trailer được như này thôi vì hết sức viết mất rùi. Mọi người quan tâm có thể vào đọc document của nó để tìm hiểu thêm nhé:
Link docs: https://filamentphp.com/docs
Thật sự thì mình rất ấn tượng với thằng Filament này, hi vọng trong tương lai gần nó sẽ giúp ích cho những dự án của công ty và cũng như trong công việc của mọi người. Cảm ơn mọi người đã đọc bài, nhớ like và follow cho mình nhé ^^
