laravel filament

Laravel filament

Filament ده أداة قوية جدًا بتساعدك تعمل لوحة تحكم (Admin Panel) بسهولة وسرعة باستخدام laravel filament ، وهو من أفضل الفريموركات اللي بتوفر وقتك ومجهودك في تطوير المشاريع. Filament بيقدم واجهة مستخدم حديثة وسهلة، وبيسمح لك تضيف وتعدل البيانات من غير ما تكتب كود كتير. كمان بيوفر أدوات متقدمة زي الفلاتر، الفرز، والباجينيشين، اللي بتخلي إدارة البيانات أسهل وأسرع. لو بتدور على حل سريع وفعال لإنشاء لوحة تحكم احترافية، Filament هو الخيار الأمثل لمشاريعك باستخدام Laravel.

إنشاء CRUD باستخدام Filament

إنشاء CRUD (Create, Read, Update, Delete) باستخدام Filament في Laravel سهل جدًا. لانة يوفر أدوات قوية لإنشاء لوحة تحكم لإدارة البيانات بسرعة.

تثبيت Filament

بعد تثبيت laravel نقوم بتثبيت filament بالكود التالي

				
					composer require filament/filament

				
			

بعد ذلك نقوم بتثبيت panel الخاص بفايلامنت باستخدام الكود التالي

				
					php artisan filament:install --panels
				
			

إنشاء نموذج (Model) مع Migration

				
					php artisan make:model Post -m
				
			

سيتم إنشاء ملفي Post.php وملف Migration في مجلد database/migrations.

افتح ملف الـ Migration وأضف الحقول التالية

				
					public function up()
{
    Schema::create('posts', function (Blueprint $table) {
        $table->id();
        $table->string('title'); // عنوان المنشور
        $table->text('content'); // محتوى المنشور
        $table->timestamp('published_at')->nullable(); // تاريخ النشر
        $table->timestamps(); // تاريخ الإنشاء والتحديث
    });
}

				
			

بعد التاكد من ضبط ملف env. ليتناسب بياناتة مع قاعدة بيانات mysql نقوم بانشاء قاعدة البيانات وعمل ترحيل لتطبيق التغييرات في قاعدة البيانات بالامر التالي

				
					php artisan migrate
				
			

إنشاء Resource لإدارة Post

قم بإنشاء Resource لإدارة نموذج Post داخل لوحة التحكم

				
					php artisan make:filament-resource Post

				
			

هذا الأمر سينشئ الملفات التالية داخل مجلد app/Filament/Resources/PostResource:

  1. PostResource.php: الملف الرئيسي للـ Resource، ويحتوي على إعدادات عامة مثل النموذج (Model) المرتبط، والحقول (Fields)، والأعمدة (Columns)، وغيرها.

  2. Pages/: مجلد يحتوي على الصفحات التالية:

    • ListPosts.php: لعرض قائمة البيانات.

    • CreatePost.php: لإضافة بيانات جديدة.

    • EditPost.php: لتعديل البيانات الموجودة.

  3. PostResourceForm.php: ملف لإدارة حقول النماذج (Forms) المستخدمة في إنشاء وتعديل البيانات.

  4. PostResourceTable.php: ملف لإدارة عرض الجداول (Tables) وعمليات الفرز، البحث، والفلاتر.

ملف PostResource.php

				
					<?php

namespace App\Filament\Resources;

use App\Filament\Resources\PostResource\Pages;
use App\Filament\Resources\PostResource\RelationManagers;
use App\Models\Post;
use Filament\Forms\Form;
use Filament\Tables\Table;
use Filament\Resources\Resource;
use Filament\Tables\Columns\TextColumn;
use Filament\Tables\Actions\EditAction;
use Filament\Tables\Actions\DeleteAction;
use Filament\Forms\Components\TextInput;
use Filament\Forms\Components\Textarea;
use Filament\Forms\Components\DateTimePicker;
use Filament\Tables;
use Illuminate\Database\Eloquent\Builder;
use Illuminate\Database\Eloquent\SoftDeletingScope;

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

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

    public static function form(Form $form): Form
    {
        return $form
        ->schema([
             TextInput::make('title') // حقل العنوان
                    ->required()
                    ->maxLength(255)
                    ->extraAttributes(['class' => 'bg-gray-100 p-2 rounded-md']), // تخصيص باستخدام Tailwind

                Textarea::make('content') // حقل النصوص المتعددة
                    ->required()
                    ->label('Content')
                    ->maxLength(500)
                    ->extraAttributes(['class' => 'bg-gray-100 p-2 rounded-md']),

                DateTimePicker::make('published_at') // حقل لاختيار التاريخ والوقت
                ->required()
                ->label('Published At')
                ->timezone('UTC') // اختيار المنطقة الزمنية
                ->displayFormat('Y-m-d H:i:s'), // تنسيق العرض
        ]);
    }

    public static function table(Table $table): Table
    {
        return $table
            ->columns([
                TextColumn::make('id')->sortable(), // العمود الخاص بالمعرف
                TextColumn::make('title')->searchable()->sortable(), // عمود العنوان
                TextColumn::make('published_at')->dateTime(), // عمود تاريخ النشر
                TextColumn::make('created_at')->label('Created At')->dateTime(), // تاريخ الإنشاء
            ])
            ->filters([
                //
            ])
            ->actions([
                Tables\Actions\EditAction::make(),
            ])
            ->bulkActions([
                Tables\Actions\BulkActionGroup::make([
                    Tables\Actions\DeleteBulkAction::make(),
                ]),
            ]);
    }

    public static function getRelations(): array
    {
        return [
            //
        ];
    }

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

				
			

1. النموذج (Model)

  • protected static ?string $model = Post::class;: نربط الـ Resource بنموذج Post لإدارة بياناته.


2. النموذج (Form)

  • نحدد الحقول التي ستظهر عند إنشاء أو تعديل منشور:

    • عنوان (Title): حقل نصي مطلوب.

    • المحتوى (Content): حقل نصوص متعددة مطلوب.

    • تاريخ النشر (Published At): حقل لاختيار التاريخ والوقت.


3. الجداول (Table)

  • نعرض البيانات في جدول مع أعمدة قابلة للفرز والبحث:

    • المعرف (ID): يعرض رقم المنشور.

    • العنوان (Title): يعرض عنوان المنشور.

    • تاريخ النشر (Published At): يعرض تاريخ النشر.

    • تاريخ الإنشاء (Created At): يعرض تاريخ إنشاء المنشور.


4. الأزرار والإجراءات (Actions)

  • تعديل (Edit): زر لتعديل المنشور.

  • حذف (Delete): إمكانية حذف المنشور أو حذف عدة منشورات مرة واحدة.


5. الصفحات (Pages)

  • عرض القائمة (ListPosts): صفحة لعرض جميع المنشورات.

  • إنشاء منشور (CreatePost): صفحة لإضافة منشور جديد.

  • تعديل منشور (EditPost): صفحة لتعديل منشور موجود.


6. التخصيص

  • تم تخصيص الحقول باستخدام Tailwind CSS لإضافة تصميم جميل.


7. الاستخدام

  • بعد تشغيل المشروع، يمكنك إدارة المنشورات بسهولة من لوحة التحكم:

    • إضافة منشور جديد.

    • تعديل أو حذف المنشورات.

    • عرض البيانات مع إمكانية الفرز والبحث.

صفحة عرض جميع المنشورات (ListPosts.php)

				
					<?php

namespace App\Filament\Resources\PostResource\Pages;

use App\Filament\Resources\PostResource;
use Filament\Actions;
use Filament\Resources\Pages\ListRecords;

class ListPosts extends ListRecords
{
    protected static string $resource = PostResource::class;

    protected function getHeaderActions(): array
    {
        return [
            Actions\CreateAction::make(),
        ];
    }
}

				
			

صفحة إنشاء منشور جديد (CreatePost.php)

				
					<?php

namespace App\Filament\Resources\PostResource\Pages;

use App\Filament\Resources\PostResource;
use Filament\Actions;
use Filament\Resources\Pages\CreateRecord;

class CreatePost extends CreateRecord
{
    protected static string $resource = PostResource::class;
}

				
			

صفحة تعديل المنشور (EditPost.php)

				
					<?php

namespace App\Filament\Resources\PostResource\Pages;

use App\Filament\Resources\PostResource;
use Filament\Actions;
use Filament\Resources\Pages\EditRecord;

class EditPost extends EditRecord
{
    protected static string $resource = PostResource::class;

    protected function getHeaderActions(): array
    {
        return [
            Actions\DeleteAction::make(),
        ];
    }
}

				
			

model post

				
					class Post extends Model
{
    use HasFactory;

    protected $fillable = [
        'title', // الحقل المسموح به
        'content', // مثال على حقل آخر
        'published_at', // إذا كنت تستخدمه
    ];
}

				
			

انشاء مستخدم

				
					php artisan make:filament-user
				
			

سيطلب منك النظام إدخال المعلومات التالية:

Email (البريد الإلكتروني): عنوان البريد الإلكتروني للمستخدم.
Name (اسم المستخدم): الاسم الكامل للمستخدم.
Password (كلمة المرور): كلمة المرور الخاصة بالمستخدم.

التشغيل

				
					php artisan serve
				
			

تأكد من أن لوحة التحكم تعمل بدون أخطاء عبر زيارة /admin.

laravel filament posts
Result

روابط خارجية

Scroll to Top