I'm always excited to take on new projects and collaborate with innovative minds.

Phone

+20 115 052 9992

Website

https://ibrahimahmed.online/

Social Links

دليل بناء لوحات التحكم في ساعات باستخدام Filament PHP

يا هلا بيك يا صديقي المبرمج في عالم تطوير الويب (Web Development). تعال نتكلم كلمتين على بلاطة؛ كم مرة طلب منك العميل لوحة تحكم (Dashboard) كاملة، فيها إدارة مس

دليل بناء لوحات التحكم في ساعات باستخدام Filament PHP
Reading Count: 2

يا هلا بيك يا صديقي المبرمج في عالم تطوير الويب (Web Development). تعال نتكلم كلمتين على بلاطة؛ كم مرة طلب منك العميل لوحة تحكم (Dashboard) كاملة، فيها إدارة مستخدمين، صلاحيات، جداول بيانات (Data Tables)، وفلاتر، ولقيت نفسك بتضيع أسابيع وشهور تكتب في كود متكرر وتقعد تربط الفرونت إند بالباك إند؟ الوجع ده كلنا عشناه، وكل مرة بنقول أكيد فيه طريقة أسهل، وهنا بيجي دور السحر الحلال في عالم لارفيل (Laravel) وهو بناء لوحات التحكم في ساعات معدودة باستخدام فيلامنت (Filament PHP).

في المقال ده، هناخدك جولة تفصيلية خطوة بخطوة عشان تعرف إزاي تحول فكرتك لواجهة إدارية احترافية، بجهد شبه معدوم وبأعلى كفاءة ممكنة، كأنك معاك فريق كامل بيشتغل معاك.

إيه هو Filament PHP ولي بقى المنجذ ليها كل المبرمجين؟

باختصار شديد، فيلامنت (Filament PHP) مش مجرد حزمة (Package) عادية، دي عبارة عن مجموعة أدوات فولاذية مبنية فوق إطار عمل لارفيل (Laravel Framework) ومحرك التنسيق تايليند سي إس إس (Tailwind CSS). الفكرة الأساسية بتاعتها بتتلخص في: "قلل كتابة الكود، وزود الإنتاجية".

زمان، عشان تعمل جدول فيه بحث وترتيب وتقسيم صفحات (Pagination) كنت هتقعد تكتب كود كتير في الكونترولر والفيو. لكن مع فيلامنت، الموضوع بقى عبارة عن تعريفات (Definitions) سريعة، وهوا بيتكفل بالباقي كله. المميز هنا إنه بيقدملك موارد جاهزة زي الموارد (Resources)، والودجتس (Widgets)، وصفحات الإدارة (Pages) اللي بتغنيك عن بناء العجلة من أول وجديد.

خطوة البداية: تثبيت Filament وإعداد أول لوحة تحكم

عشان نبدأ الرحلة دي، مفترض إن عندك مشروع لارفيل شغال وجاهز. لو مش عندك، افتح التيرمينال (Terminal) واكتب الأمر التقليدي:

composer create-project laravel/laravel my-dashboard

بعد ما المشروع يفتح معاك، هنبدأ نسطب حزمة فيلامنت باستخدام الكومبوزر (Composer). اكتب الكود ده في التيرمينال:

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

الخطوة اللي بعد كده هي إننا نعمل تثبيت (Install) للوحة التحكم وننشئ المستخدم المسؤول (Admin User) اللي هيقدر يدخل على السيستم:

php artisan filament:install --panels

الكوماند ده هيعملك إعدادات اللوحة بالكامل وهيطلب منك تدخل البريد الإلكتروني والباسورد بتاع الآدمن. مبروك يا سيدي، لو فتحت المتصفح ودخلت على الرابط /admin هتلاقي نفسك قدام لوحة تحكم فخمة ومصممة بأعلى معايير الـ UI/UX من أول ثانية!

سحر الموارد (Filament Resources): إدارة قواعد البيانات في ثوانٍ

القلب النابض لأي لوحة تحكم هو التعامل مع الجداول (Tables) والنموذج (Forms). تخيل إن عندك جدول للمستخدمين (Users) أو المنتجات (Products)، وعاوز تعملهم صفحة عرض، إضافة، وتعديل. في فيلامنت، الموضوع بيتم بأمر واحد بس:

php artisan make:filament-resource Product

الكوماند ده بينشئ لك ملف المورد (Resource File) اللي من خلاله تقدر تتحكم في شكل الفورم والجدول. تعال نشوف مثال عملي جوه ملف الـ ProductResource إزاي بنضيف حقول للفورم وجدول البيانات:


use Filament\Forms\Form;
use Filament\Forms\Components\TextInput;
use Filament\Tables\Table;
use Filament\Tables\Columns\TextColumn;

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

public static function table(Table $table): Table
{
    return $table
        ->columns([
            TextColumn::make('name')->searchable()->sortable(),
            TextColumn::make('price')->money('USD')->sortable(),
        ])
        ->filters([
            // هنا ممكن تحط فلاتر مخصصة بسهولة
        ]);
}

شايف الجمال؟ شوية أسطر بسيطة قدرت تطلع بيه فورم إضافة منتجات وجدول عرض متقدم فيه بحث وترتيب أوتوماتيك من غير ما تكتب سطر كود واحد في الجافاسكريبت أو الـ CSS.

تخصيص الواجهات والودجتس (Widgets) لتحليل البيانات

العميل دايماً بيحب يشخصن لوحة التحكم بتاعته وتكون مميزة. فيلامنت بيديك حرية مطلقة في تخصيص الألوان، اللوجو، والشكل العام من خلال ملف الإعدادات الخاص باللوحة (AdminPanelProvider).

كمان، لو حبيت تضيف إحصائيات سريعة أو رسوم بيانية (Charts) في الصفحة الرئيسية، الموضوع سهل جداً. تقدر تنشئ ودجت جديدة بالأمر ده:

php artisan make:filament-widget StatsOverview --stats

وتقدر تعرض جوه الودجت دي أرقام زي إجمالي المبيعات، عدد المستخدمين الجدد، وغيرها من مؤشرات الأداء الرئيسية (KPIs)، وتعرضها بشكل جذاب ومريح للعين.

خاتمة: نصيحة من أخ لتطوير مهاراتك

يا صديقي، التكنولوجيا بتتحرك بسرعة فائقة، واللي كان بيأخذ أسبوعين زمان، النهاردة بيخلص في ساعتين بفضل أدوات زي Filament PHP. نصيحتي ليك: متقلقش من كثرة التفاصيل في البداية، اقرأ التوثيق الرسمي (Documentation) بتاع فيلامنت لأنه من أفضل التوثيقات اللي هتقابلها في حياتك البرمجية، وطبق بايدك مشروع حقيقي (Side Project) مهما كان صغير. الاحتراف مش بيجي من قراءة المقالات لوحدها، الاحتراف بيجي من كثرة التجربة والوقوع في الأخطاء وحلها. بالتوفيق ليك، ودايماً خلي شغفك بالبرمجة هو الدفع الأساسي ليك!


Share

Related posts

Aug 13, 2026 • 1 min read
Reading Count: 3
بناء وتصميم الـ Pagination للبيانات التي تتحدث باستمرار (Real-time Pagination)

يا هلا بيك يا سيدي، لو انت شغال مبرمج ويب (Web Developer) وبتعمل داشبورد (Dashboard) أو تطبيق فيه جد...

Aug 12, 2026 • 1 min read
Reading Count: 10
كيف تدير الـ Breaking Changes في الـ APIs دون إزعاج العملاء

تخيل معايا السيناريو ده: قاعد رايق في أمان الله بتشرب الشاي بتاعك، وفجأة تلاقي رسايل وتنبيهات على ال...

Aug 12, 2026 • 1 min read
Reading Count: 12
ازاي تطير بالـ API بتاعك؟ دليل استراتيجيات الـ API Caching المتقدمة مع الـ CDN

ازاي تطير بالـ API بتاعك؟ دليل استراتيجيات الـ API Caching المتقدمة مع الـ CDN أهلاً بيك يا صديقي ال...