Filament Admin Panel

Founder, MyCoding.Academy
วิศวกรไฟฟ้าและโทรคมนาที่หลงไหลการเขียนโปรแกรม เลยได้ทำงานประจำช่วงหนึ่งทางด้านการพัฒนาซอฟต์แวร์ ปัจจุบันก็ยังทำงานเป็นฟรีแลนซ์ทางด้านการเขียนโปรแกรมอยู่นะครับ

Filament เป็น Admin Panel ที่ผมเริ่มใช้เป็นตัวที่สอง ตัวแรกก็คือ Laravel Nova ปัญหาไม่มีอะไรหรอกครับ สำหรับ Nova มันต้องจ่ายค่า License ผมซื้อตอนเวอร์ชัน 3 พอมันอัพเกรตเป็นเวอร์ชัน 4 ก็ต้องซื้ออีก เพราะว่า features มันโดนครับ 555 เลยต้องหาตัวแทนมาศึกษาดู ก็เจอ Filament นี่แหละครับ ตอนรุ่นแรกไม่โดนครับ พอมารุ่นที่สอง โอเคต้องเริ่มลองแล้วล่ะครับ

ส่วนผสมของ Filament

Filament ประกอบไปด้วย 3 ส่วน ครับ คือ Admin Panel เป็นตัวโครงหลัก และอีกสองส่วน คือ ฟอร์ม (Forms) และ ตาราง (Tables) ครับ ฟอร์มก็คือส่วนที่แสดงผล Form สำหรับการเพิ่มและแก้ไขข้อมูลครับ จะเรียกใช้ผ่าน Admin Panel เช่นเดียวกันกับตาราง ไม่ต้องสับสนกับตารางในฐานข้อมูลนะครับ ง่ายๆ เลยมันคือ HTML Tables สำหรับไว้แสดงข้อมูลแบบรายการนั่นแหละครับ สำหรับความต้องการเบื้องต้นสำหรับ Filament คือ PHP 8.0 ขึ้นไป Laravel 8.0 ขึ้นไป และ Livewire 2.0 ขึ้นไปครับ มันก็มีบางอย่างที่ทำได้ง่ายกว่า Nova แต่บางอย่างก็อาจจะยากกว่า ตอนนี้ยังให้ Nova เหนือกว่าครับ แม้ว่าต้องจ่ายค่า License ก็ตาม สำหรับตัว Filament ก็เริ่มมีคนพัฒนาส่วนขยาย ซึ่งเรียกว่า Plugin ให้ออกมาใช้แล้วนะครับ ไม่แน่ใจเหมือนกันว่าทางทีมงานของ Filament ต้องการหารายได้อะไรในภายหลังหรือเปล่า

นอกจาก Plugin แล้วก็ยังมีส่วนของ Trick ต่างๆ อันนี้ดูแล้วน่าสนใจมากครับ เป็นเทคนิคในการใช้งานที่น่าสนใจครับ ทั้งหมดนี้ติดตามได้ที่เว็บไซต์ของ Filament เลยครับ

การใช้งาน

การใช้งานก็เริ่มจากการติดตั้งครับ โดยผ่าน composer ตามปกติ สำหรับการติดตั้งสามารถดูได้จากคลิปในบทความ Filament Admin Panel ของ MyCoding.Academy นะครับ

composer require filament/filament

หลังจากนั้นก็ทำการสร้างผู้ใช้งานระบบในกรณีที่ยังไม่มีผู้ใช้นะครับ มันคือผู้ใช้ที่สร้างจาก App\Models\User ครับ โดยถ้ายังไม่ได้ทำอะไรเพิ่มเติม ก็สามารถใช้ผู้ใช้ที่มีอยู่หรือเพิ่งสร้างใหม่ในการเข้าใช้งาน Admin Panel ได้จาก URL ของ Site ตามด้วย /admin ได้เลยครับ สำหรับตรงนี้ก็คือผู้ใช้ทุกคนสามารถเข้าได้หมดนะครับ ส่วนการป้องกันให้เฉพาะบางคน เข้าใช้งานระบบได้ก็มีแนะนำในเอกสารที่นี่ครับ โดยการดำเนินการ implement ตัว interface ชื่อ FilamentUser ครับ

<?php
 
namespace App\Models;
 
use Filament\Models\Contracts\FilamentUser;
use Illuminate\Foundation\Auth\User as Authenticatable;
 
class User extends Authenticatable implements FilamentUser
{
    //...
 
    public function canAccessFilament(): bool
    {
        return $this->hasRole(['Admin', 'Super Admin']);
    }
}

สำหรับการ Implement ตามตัวอย่างด้านบนคือให้สิทธิกับผู้ใช้ที่มี Role เป็น Super Admin หรือ Admin นะครับ โดยในที่นี้ผมติดตั้ง spatie/laravel-permission ไว้ตามในคลิปด้านบนนะครับ

หลังจากเข้าใช้งานระบบได้แล้วก็เริ่มด้วยขั้นตอนต่อไปครับ

การสร้าง Resource

การสร้าง Resource คือการสร้างตัวจัดการทรัพยากร หรือ Model ของเรานั่นแหละครับ ตรงกับหลักการของ Nova เลย แต่ตัว Filament มันสามารถสร้าง Fields ต่างๆ ตาม Model ให้เราได้โดยการติดตั้ง package เพิ่มเติมชื่อ doctrine/dbal ซึ่งการติดตั้งก็ใช้ composer นะครับ หลังจากนั้นสมมติว่าเราต้องการสร้าง Resource สำหรับ User ก็ใช้คำสั่ง

php artisan make:filament-resource User --generate

เท่านี้เราก็จะได้ Fields ต่างๆ ที่มีสำหรับ User มาโดยอัตโนมัติเลยครับ

จะเห็นได้ว่ามันมีการสร้างข้อมูลเพิ่มใน app\Filament\Resources โดยไฟล์หลักที่เราจะแก้ไขในเบื้องต้นคือ UserResource.php นะครับ ในไฟล์จะประกอบด้วยสองส่วนหลักๆ คือ form สำหรับการแก้ไขข้อมูล และ table สำหรับการแสดงรายการครับ

Filament Form

มาดูรายละเอียดใน method form() ของ UserResource กันครับ

ส่วนหน้าตาเมื่อแสดงผลก็เป็นแบบนี้ครับ

Filament Table

สำหรับ method table ของ UserResource ก็มีรายละเอียดตามด้านล่างเลยครับ

หน้าตาเมื่อแสดงผลครับ

สำหรับผมก็คิดว่าเป็น package ที่ยอดเยี่ยมเลยครับ ที่สำคัญคือใช้ฟรีด้วยครับ ก็เลยอาสาเป็นหน่วยทดลองและเผยแพร่ความรู้ในการใช้งานสำหรับทุกๆ ท่าน