في هذا الدرس 6تصفّح المواضيع
تفضل تطبيقات Laravel الحديثة بناء الواجهات بأسلوب المكونات المستقلة عبر وسوم
- صيغة الوسوم القياسية (<x-name>): تستدعي المكونات كوسوم HTML مألوفة تبدأ بالبادئة x-.
- نطاق متغيرات معزول (Isolated Scope): لا ترث المكونات متغيرات الصفحة الأب عشوائياً مما يمنع تضارب الأسماء.
- دعم المجلدات الفرعية (Dot Tag Mapping): يشير الوسم <x-forms.input /> مباشرة إلى المجلد الفرعي داخل مجلد components.
<div class="page-header">
<x-alert type="success" class="mb-4">
Your account settings have been updated.
</x-alert>
</div>يدعم إطار Laravel نوعين من مكونات Blade: المكونات المجهولة التي تتكون من ملف قالب فقط داخل مجلد views/components، والمكونات المعتمدة على كلاس PHP داخل app/View/Components. يمكنك توليد كلا النوعين بسرعة عبر أمر Artisan المخصص.
- المكونات المجهولة (Anonymous --view): مثالية للعناصر المرئية البسيطة كالأزرار والشارات التي لا تتطلب منطقاً معقداً.
- مكونات الكلاسات (Class-Based): مناسبة عند الحاجة لحقن خدمات برمجية أو إجراء حسابات قبل العرض.
- التوليد السريع (make:component): ينشئ أمر Artisan الكلاس والقالب معاً أو القالب فقط مع خيار --view.
# Create class + view component
php artisan make:component StatusCard
# Create anonymous view-only component
php artisan make:component ui.button --viewلتمرير البيانات إلى المكون، نكتب سمات نصية عادية للقيم الثابتة أو نضع نقطتين رأسيتين قبل اسم السمة لتمرير متغير أو تعبير PHP ديناميكي. وداخل المكون المجهول، نعلن عن الخصائص المستقبلة وقيمها الافتراضية في أعلى الملف عبر توجيه @props.
- القيم النصية والديناميكية (Bound :prop): تُمرر النصوص مباشرة بينما تُسبق المتغيرات والتعبيرات البرمجية بنقطتين رأسيتين.
- تعريف الخصائص الافتراضية (@props Directive): يحدد أسماء المتغيرات المتوقعة وقيمها الافتراضية في مطلع القالب.
- فصل البيانات عن السمات (Prop Extraction): يستخرج المحرك خصائص @props كمتغيرات مستقلة ويفصلها عن سمات HTML العامة.
{{-- resources/views/components/badge.blade.php --}}
@props(['color' => 'purple', 'label'])
<span class="badge badge-{{ $color }}">
{{ $label }}
</span>تُجمع أي سمات HTML إضافية تُمرر للمكون ولم تُذكر داخل @props مثل المعرفات أو أصناف التنسيق الإضافية تلقائياً داخل الكائن $attributes. تتيح لك دالة $attributes->merge دمج الأصناف الافتراضية للمكون مع الأصناف الإضافية الممررة عند الاستدعاء بذكاء.
- حقيبة السمات التلقائية ($attributes Bag): تحتفظ بكافة سمات HTML الإضافية مثل id وwire وسمات البيانات.
- الدمج الذكي للأصناف (merge Method): يجمع أصناف المكون الأساسية مع الأصناف الممررة من الصفحة المستدعية.
- الأصناف الشرطية للمكون ($attributes->class): يدمج الأصناف المشروطة بسلاسة مع حقيبة السمات.
@props(['type' => 'button'])
<button {{ $attributes->merge([
'type' => $type,
'class' => 'btn btn-primary',
]) }}>
{{ $slot }}
</button>تستقبل المكونات محتوى HTML المكتوب بين وسمي البداية والنهاية عبر المتغير التلقائي $slot. وعندما يحتاج المكون إلى عدة مناطق محتوى منفصلة مثل نافذة منبثقة لها عنوان وجسم وتذييل، نستخدم الفتحات المسماة
- الفتحة الافتراضية (Default $slot): تستقبل المحتوى الأساسي الموضوع داخل وسم المكون مباشرة.
- الفتحات المسماة (<x-slot:name>): توجه كتل HTML مخصصة إلى متغيرات مسماة مثل $header و$footer.
- فحص امتلاء الفتحة (isEmpty / isset): يتيح إخفاء غلاف الرأس أو التذييل إذا لم يمرر المستدعي محتوى لهما.
<x-modal>
<x-slot:title>Confirm Deletion</x-slot:title>
<p>Are you sure you want to remove this record?</p>
<x-slot:footer>
<button class="btn-danger">Delete</button>
</x-slot:footer>
</x-modal>يساهم اعتماد مكونات Blade في توحيد نظام التصميم ومنع تداخل المتغيرات غير المقصود في المشاريع الكبيرة. استعن بالجدول المقارن التالي لتحديد متى تختار المكون المجهول أو مكون الكلاس أو القالب الفرعي.
| وجه المقارنة الهندسي | الأسلوب اليدوي أو غير المحمي | معيار Laravel 12 الحديث |
|---|---|---|
| نطاق المتغيرات | وراثة القالب الفرعي لكل متغيرات الصفحة الأب واحتمال تضاربها | نطاق معزول وآمن مع تحديد الخصائص صراحة عبر توجيه @props |
| السمات والأصناف الإضافية | تمرير متغيرات يدوية منفصلة لكل صنف أو معرف إضافي | التقاط ودمج كافة السمات تلقائياً عبر كائن $attributes->merge |
| تغليف كتل المحتوى | تقسيم العنصر إلى ملفين منفصلين للبداية والنهاية | وسم مكون واحد يحيط بالمحتوى عبر $slot والفتحات المسماة |
| تمرير التعبيرات البرمجية | تمرير مصفوفات طويلة ومعقدة داخل توجيه التضمين | خصائص واضحة مسبوقة بنقطتين رأسيتين على وسم المكون مباشرة |
<x-layout>
<x-slot:heading>Account Overview</x-slot:heading>
<x-card class="shadow-sm">
<p>Welcome to your dashboard.</p>
</x-card>
</x-layout>ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
أتقنت في هذا الدرس حول «مكونات Blade الحديثة وخصائص Props والفتحات Slots» مفاهيم معمارية المكونات الحديثة في Blade، والمكونات المجهولة والمعتمدة على كلاس، وتمرير البيانات للمكون بتوجيه props وفق معايير Laravel 12 الحديثة.
الخطوة التالية والدرس القادم
انتقل الآن إلى الدرس التالي «استقبال وفحص بيانات طلبات HTTP الواردة في Laravel» للبناء التراكمي على ما تعلمته.
سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.
المصطلحات4
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 Blade Components مكونات Blade
- تصميم عناصر واجهة قابلة لإعادة الاستخدام عبر مكونات Blade الحديثة <x-...> وتمرير الخصائص @props ودمج السمات والفتحات <x-slot>.
- للمراجعة
- 02 Component Based Architecture in Blade معمارية المكونات الحديثة في Blade
- المفهوم الهندسي والتطبيق العملي المباشر لقسم معمارية المكونات الحديثة في Blade في إطار العمل Laravel 12.
- للمراجعة
- 03 Anonymous and Class Based Components المكونات المجهولة والمعتمدة على كلاس
- المفهوم الهندسي والتطبيق العملي المباشر لقسم المكونات المجهولة والمعتمدة على كلاس في إطار العمل Laravel 12.
- للمراجعة
- 04 Passing Data with Component Props تمرير البيانات للمكون بتوجيه props
- المفهوم الهندسي والتطبيق العملي المباشر لقسم تمرير البيانات للمكون بتوجيه props في إطار العمل Laravel 12.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
الاختصارات4
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 MVC MVC
- Model View Controller
- النمط المعماري الذي يفصل بين نماذج البيانات Models، وطبقات العرض Views، والمتحكمات Controllers في Laravel.
- للمراجعة
- 02 CLI CLI
- Command Line Interface
- واجهة سطر الأوامر التي تعمل عبر أداة php artisan لتوليد الملفات وإدارة التطبيق.
- للمراجعة
- 03 HTTP HTTP
- Hypertext Transfer Protocol
- بروتوكول نقل النص الفائق الذي ينظم طلبات المتصفح واستجابات خادم Laravel.
- للمراجعة
- 04 PSR PSR
- PHP Standards Recommendations
- المعايير القياسية للغة PHP مثل التحميل التلقائي PSR-4 التي يلتزم بها إطار العمل Laravel.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
مهامك قبل الاختبار
خطوة صغيرة كل مرة. وإنجاز تقدر ترجع له.
-
اكتب ونفّذ المثال البرمجي المشروح في قسم «معمارية المكونات الحديثة في Blade» داخل مشروع Laravel 12 المحلي وتحقق من النتيجة.
-
بدّل بين الحالات الثلاث في المحاكي التفاعلي ضمن قسم «المكونات المجهولة والمعتمدة على كلاس» وقارن مخرجات التنفيذ.
تأشير المهمة إقرار منك بإتمامها، وليس تصحيحًا آليًا للكود. يُحفظ تقدمك في حسابك.
اختبر فهمك.
ووصلها للإتقان.
كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.
أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.
الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.
لمحة عن التحدي8 أسئلة تنتظرك ＋
ما الهدف الهندسي الأساسي من معمارية المكونات الحديثة في Blade في إطار العمل Laravel 12؟
يسهم معمارية المكونات الحديثة في Blade في تنظيم منطق التطبيق بأسلوب معياري آمن وقابل للصيانة في Laravel 12.
يساعد الالتزام باصطلاحات Laravel 12 الرسمية في قسم «المكونات المجهولة والمعتمدة على كلاس» على رفع جودة الكود وسهولة اختباره آلياً.
صواب؛ الالتزام بالمعايير القياسية في Laravel 12 يجعل الكود واضحاً وسهل الفحص والصيانة.
أي آلية في Laravel 12 تتولى إدارة تمرير البيانات للمكون بتوجيه props بشكل مباشر ومنظم؟
توفر طبقة إطار العمل وحاوية الخدمات في Laravel 12 الأدوات القياسية لإدارة تمرير البيانات للمكون بتوجيه props.
لماذا يُعد تطبيق إدارة ودمج السمات بكائن attributes مهماً عند بناء تطبيقات Laravel 12 جاهزة للإنتاج؟
لأنه يمنع الأخطاء البرمجية الخفية ويوحد سلوك التطبيق بين بيئتي التطوير والإنتاج.
في Laravel 12، يُنصح بكتابة مفاتيح الإنتاج السرية مباشرة داخل ملفات الكود المصدري المرفوعة إلى Git بدلاً من ملفات البيئة.
خطأ؛ يجب حفظ المفاتيح والبيانات السرية في متغيرات البيئة وعدم رفعها أبداً إلى مستودع Git.
ما المزايا الهندسية التي يحققها تطبيق الفتحات الافتراضية والمسماة Slots في Laravel 12؟ (اختر كل ما ينطبق)
يوفر فصلاً واضحاً للمسؤوليات، وأماناً أعلى أثناء التنفيذ، وتعاوناً أسهل بين أفراد الفريق.
يوظف إطار العمل Laravel 12 ميزات PHP 8 الحديثة مثل تحديد أنواع القيم المرجعة لجعل الكود أكثر وضوحاً وأماناً.
صواب؛ يعتمد Laravel 12 بشكل كامل على الصياغة الحديثة للغة PHP 8.2+ وسلامة الأنواع.
ما الفرق الجوهري بين معيار Laravel 12 الحديث والملفات اليدوية التقليدية في مقارنة مكونات Blade والقوالب الفرعية؟
يوفر Laravel 12 واجهات قياسية موحدة وحماية مدمجة تغني عن الكود اليدوي المعرض للأخطاء.