Laravel هو إطار PHP قوي يوفر أساسًا متينًا لتطوير تطبيقات الويب. Filament عبارة عن لوحة إدارة أنيقة ومفتوحة المصدر ومنشئ نماذج لـ Laravel يعمل على تبسيط إنشاء واجهات الإدارة. سيرشدك هذا الدليل خلال عملية إنشاء لوحة إدارة قوية باستخدام أحدث الإصدارات من Filament وLaravel.

Laravel SaaS Starter - ابدأ Saas التالي في يوم واحد وليس أسابيع
ابدأ مشروع Laravel Saas القادم في يوم واحد فقط وليس أسابيع! مع ميزات البناء التي يحتاجها كل Saas
www.laravelsaas.store

المتطلبات الأساسية
قبل أن نبدأ، تأكد من تثبيت ما يلي على جهاز التطوير الخاص بك:

PHP >= 8.0
الملحن
Node.js وNPM
MySQL أو أي قاعدة بيانات أخرى يدعمها Laravel

الخطوة 1: إعداد مشروع Laravel جديد

أولاً، قم بإنشاء مشروع Laravel جديد باستخدام Composer:

composer create-project --prefer-dist laravel/laravel filament-admin
cd filament-admin

بعد ذلك، قم بإعداد متغيرات البيئة الخاصة بك. أعد تسمية الملف .env.example إلى .env وقم بتحديث تكوين قاعدة البيانات باستخدام بيانات الاعتماد الخاصة بك:

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=filament_db
DB_USERNAME=root
DB_PASSWORD=your_password

قم بتشغيل الأمر التالي لإنشاء مفتاح تطبيق وترحيل جداول Laravel الافتراضية:

php artisan key:generate
php artisan migrate

الخطوة 2: تثبيت الفتيل

لتثبيت Filament، استخدم Composer:

composer require filament/filament

بعد ذلك، قم بنشر أصول Filament وتكوينها:

php artisan filament:install

الخطوة 3: إعداد المصادقة

يتطلب Filament المصادقة لإدارة الوصول إلى لوحة الإدارة. يوفر Laravel سقالات مصادقة مدمجة. دعونا نستخدم Laravel Breeze من أجل البساطة:

composer require laravel/breeze --dev
php artisan breeze:install

اتبع المطالبات لتحديد خيار الواجهة الأمامية المفضل لديك (Blade، Vue، React). في هذا المثال، سنستخدم Blade:

php artisan migrate
npm install
npm run dev

تأكد من أن لديك مستخدمًا لتسجيل الدخول معه. يمكنك استخدام Laravel Tinker لإنشاء واحد:

php artisan tinker

>>> \App\Models\User::factory()->create(['email' => '[email protected]']);

الخطوة 4: تكوين الفتيل

قم بتحديث نموذج المستخدم لتنفيذ عقد Filament HasFilamentRoles إذا كنت تستخدم الأدوار أو الأذونات. في الوقت الحالي، سوف نضمن أن أي مستخدم تمت مصادقته يمكنه الوصول إلى Filament.

In app/Providers/FilamentServiceProvider.php, define the authorization logic:

use Filament\Facades\Filament;

public function boot()
{
    Filament::serving(function () {
        Filament::registerUserMenuItems([
            'account' => MenuItem::make()
                ->label('My Account')
                ->url(route('filament.resources.users.edit', ['record' => auth()->user()]))
                ->icon('heroicon-o-user'),
        ]);
    });

    Filament::registerPages([
        // Register your custom pages here
    ]);

    Filament::registerResources([
        // Register your custom resources here
    ]);
}

protected function gate()
{
    Gate::define('viewFilament', function ($user) {
        return in_array($user->email, [
            '[email protected]',
        ]);
    });
}

الخطوة 5: إنشاء الموارد

موارد الخيوط هي نماذج بليغة ذات واجهات CRUD. لنقم بإنشاء مورد لإدارة نموذج النشر.

إنشاء النموذج والترحيل والمصنع:

php artisan make:model Post -mf

تحديد الحقول في ملف الترحيل:

public function up()
{
    Schema::create('posts', function (Blueprint $table) {
        $table->id();
        $table->string('title');
        $table->text('content');
        $table->timestamps();
    });
}

تشغيل الترحيل:

php artisan migrate

بعد ذلك، قم بإنشاء مورد خيوط:

php artisan make:filament-resource Post

يقوم هذا الأمر بإنشاء الملفات الضرورية للمورد. افتح التطبيق/Filament/Resources/PostResource.php وحدد حقول الموارد:

use Filament\Resources\Pages\Page;
use Filament\Resources\Pages\CreateRecord;
use Filament\Resources\Pages\EditRecord;
use Filament\Resources\Pages\ListRecords;
use Filament\Resources\Forms;
use Filament\Resources\Tables;
use Filament\Resources\Forms\Components\TextInput;
use Filament\Resources\Forms\Components\Textarea;
use Filament\Resources\Tables\Columns\TextColumn;

class PostResource extends Resource
{
    protected static ?string $model = Post::class;

    protected static ?string $navigationIcon = 'heroicon-o-collection';

    public static function form(Form $form): Form
    {
        return $form
            ->schema([
                TextInput::make('title')
                    ->required()
                    ->maxLength(255),
                Textarea::make('content')
                    ->required(),
            ]);
    }

    public static function table(Table $table): Table
    {
        return $table
            ->columns([
                TextColumn::make('title'),
                TextColumn::make('content')
                    ->limit(50),
                TextColumn::make('created_at')
                    ->dateTime(),
            ]);
    }

    public static function getPages(): array
    {
        return [
            'index' => Pages\ListRecords::route('/'),
            'create' => Pages\CreateRecord::route('/create'),
            'edit' => Pages\EditRecord::route('/{record}/edit'),
        ];
    }
}

الخطوة 6: إضافة التنقل

أضف المورد إلى الشريط الجانبي Filament. افتح التطبيق/Providers/FilamentServiceProvider.php وقم بتسجيل المورد:

use App\Filament\Resources\PostResource;

public function register()
{
    Filament::registerResources([
        PostResource::class,
    ]);
}

الخطوة 7: تخصيص الفتيل

الخيط قابل للتخصيص بدرجة كبيرة. يمكنك تغيير السمة والمكونات والمزيد. على سبيل المثال، لتخصيص اللون الأساسي، قم بتحديث ملف config/filament.php:

'brand' => [
    'primary' => '#1d4ed8',
],

يمكنك أيضًا إنشاء صفحات وعناصر واجهة مستخدم ومكونات نموذج مخصصة باتباع الوثائق: توثيق الخيوط.

Laravel SaaS Starter - ابدأ Saas التالي في يوم واحد وليس أسابيع
ابدأ مشروع Laravel Saas القادم في يوم واحد فقط وليس أسابيع! مع ميزات البناء التي يحتاجها كل Saas
www.laravelsaas.store

خاتمة

في هذا الدليل، مررنا بإعداد مشروع Laravel جديد، وتثبيت Filament، وإعداد المصادقة، وإنشاء الموارد، وتخصيص لوحة إدارة Filament. من المفترض أن يمنحك هذا أساسًا متينًا لبناء لوحات إدارة قوية باستخدام Filament وLaravel. لمزيد من الميزات والتخصيصات المتقدمة، راجع الوثائق الرسمية واستكشف إمكانيات Filament.

تعليمات سعيدة!