4.1فهم نمط MVC (النموذج-العرض-المتحكم)
الأساسي في 30 ثانية
- MVC = 3 مسؤوليات منفصلة : يدير النموذج (Model) البيانات ومنطق العمل، ويعرض العرض (View) الـ HTML، وينسق المتحكم (Controller) (طلب ← نموذج ← عرض).
- التدفق النمطي : طلب ← توجيه (routing) نحو المتحكم الصحيح ← ينادي المتحكم النموذج ← يرجع النموذج البيانات ← يختار المتحكم العرض.
- منعكس رياد : متحكمات نحيفة ونماذج غنية — لا استعلامات SQL أبدا في العروض، ولا منطق عمل أبدا في الإظهار.
حالة مصغرة متواصلة — رياد يرتب فهرسه في قسنطينة
رياد، مطور وب في قسنطينة، يصون فهرس متجر محلي : ملفه يخلط استعلامات SQL وحسابات الأسعار و HTML، وكل تعديل يكسر شيئا آخر. يقرر الترتيب : نموذج يجلب المنتجات حسب الفئة، ومتحكم ينسق صفحة «المنتجات»، وعرض يعرض القائمة المستلمة. عندما يطلب الزبون عرضا جديدا، لا يلمس رياد إلا العرض ؛ وعندما تتغير قاعدة السعر، لا يلمس إلا النموذج. أول محطة في الخيط الرابط : من PHP «المبعثر» إلى PHP المهيكل.
الحالة نفسها تعود في الدرس والمخطط والنص الجاهز وتحدي 48 ساعة — وتستمر في 4.2 و4.3 و4.4 و4.5.
1. المسؤوليات الثلاث
يفصل نمط MVC (النموذج-العرض-المتحكم) (Model-View-Controller) التطبيق إلى ثلاث طبقات. يدير النموذج (Model) البيانات ومنطق العمل : الوصول إلى القاعدة، والكيانات (منتج، مستخدم)، والقواعد (سعر مخفض، بريد وحيد) — باستقلال عن الإظهار. ويدير العرض (View) الإظهار : HTML مع إدخالات دنيا (عرض متغير، والحلقات على قائمة)، دون منطق عمل ولا وصول إلى القاعدة. ويصنع المتحكم (Controller) الرابط : يستقبل الطلب، وينادي النموذج، ويجهز البيانات، ثم يختار العرض. ومثل رياد، نستهدف متحكمات «نحيفة» ونماذج «غنية».
القاعدة الذهبية : لكل قطعة كود مكان بديهي واحد. بيانات أو قاعدة عمل ؟ النموذج. HTML ؟ العرض. تنسيق طلب ← بيانات ← إظهار ؟ المتحكم. هذا الوضوح يحذف «كود السباغيتي» حيث كل شيء مخلوط في ملف واحد.
2. تدفق طلب وفوائده
التدفق النمطي : (1) يطلب المستخدم رابطا ؛ (2) يوجه التوجيه (routing) نحو المتحكم الصحيح وطريقته ؛ (3) ينادي المتحكم النموذج (مثلا جلب المنتجات) ؛ (4) يمرر المتحكم البيانات إلى العرض ؛ (5) يولد العرض الـ HTML. يتبع رياد هذا المسار لكل صفحة بدلا من فعل كل شيء في سكربت واحد.
الفوائد : الوضوح (نعرف أين نجد ماذا)، وقابلية الصيانة (تغيير العرض دون لمس البيانات، والعكس)، وإعادة الاستعمال والاختبار (النماذج نفسها تخدم صفحة HTML أو واجهة JSON)، والتعاون (كل يعمل على طبقته). إنه النمط الغالب لأطر العمل (لارافيل (Laravel)، سيمفوني (Symfony)) : مجلدات Models وControllers وعروض/templates وتوجيه — وفهمه قبل إطار العمل (framework) يعني استعماله بذكاء بدلا من تقليده تقليدا أعمى.
🔎 مثال ملموس — 🔎 مثال ملموس — قائمة المنتجات بنمط MVC
توزيع رياد لصفحة الفهرس :
النموذج (Model) ← Produit::recupererParCategorie($cat) // SQL + القواعد هنا
المتحكم (Controller) ← $produits = Produit::recupererParCategorie($cat);
afficher('liste', ['produits' => $produits]);
العرض (View) ← foreach ($produits as $p) { afficher $p['nom'], $p['prix'] }
قاعدة ← تغيير الإظهار = لمس العرض وحدهالقراءة : ثلاث كتل وثلاثة أدوار واتجاه سير واحد.
الدرس : يستقبل العرض بيانات جاهزة، ولا يصنعها.
مفردات القسم
- MVC (النموذج-العرض-المتحكم)
- نمط بنية يفصل التطبيق إلى ثلاث مسؤوليات : النموذج (البيانات/منطق العمل)، والعرض (الإظهار)، والمتحكم (التنسيق). أساس أطر عمل الوب.
مثال بسيط: يرتب رياد فهرسه : نموذج للمنتجات، وعرض لـ HTML، ومتحكم للتنسيق.
ما ليس كذلك: سكربت وحيد يخلط SQL والحسابات و HTML.
رد فعل: لكل سطر كود، نسأل : بيانات أم إظهار أم تنسيق ؟
- النموذج (Model)
- يدير البيانات ومنطق العمل : الوصول إلى القاعدة والكيانات والقواعد — باستقلال عن الإظهار.
مثال بسيط: نموذج المنتج خاص برياد يجلب المنتجات ويحسب السعر المخفض.
ما ليس كذلك: استعلام SQL مكتوب في قالب إظهار.
رد فعل: كل قاعدة عمل تعيش في النموذج، قابلة للاختبار دون HTML.
- العرض (View)
- يدير الإظهار : الـ HTML، ما يراه المستخدم ؛ ويستقبل بيانات مجهزة ويعرضها.
مثال بسيط: عرض القائمة خاص برياد يحلق على المنتجات المستلمة ويعرضها مُهرَّبة.
ما ليس كذلك: قالب يستعلم القاعدة أو يطبق تخفيضات.
رد فعل: عرض «بسيط» : يعرض ويحلق وشرط بسيط — لا أكثر.
- المتحكم (Controller)
- يصنع الرابط : يستقبل الطلب، وينادي النموذج، ويختار العرض بالبيانات ؛ ينسق، نحيف ومقروء.
مثال بسيط: متحكم الفهرس خاص برياد يجلب المنتجات ثم يعرض عرض القائمة.
ما ليس كذلك: متحكم من 300 سطر يفعل SQL + حسابات + HTML.
رد فعل: متحكم نحيف : ينسق ويفوض ويعرض.
- التوجيه (routing) / تدفق MVC
- يوجه التوجيه الطلب نحو المتحكم الصحيح ؛ والتدفق : طلب ← توجيه ← متحكم ← نموذج ← عرض.
مثال بسيط: رابط /produits خاص برياد يصل إلى متحكم الفهرس، طريقة index.
ما ليس كذلك: ملف لكل رابط دون تنسيق مركزي.
رد فعل: اتباع التدفق عند كل تنقيح : أين ينكسر التسلسل ؟
في التطبيق — عمليا — فهم MVC وتطبيقه
- حددوا المسؤوليات الثلاث : النموذج (البيانات/المنطق)، والعرض (إظهار HTML)، والمتحكم (التنسيق) — ولماذا نفصلها.
- اتبعوا تدفق طلب : طلب ← توجيه ← متحكم ← نموذج (بيانات) ← عرض (إظهار).
- على مثال صغير (قائمة منتجات رياد)، وزعوا الكود : نموذج يجلب، ومتحكم ينادي، وعرض يعرض.
- لاحظوا الفوائد : غيروا العرض دون لمس النموذج، والعكس — وضوح وقابلية صيانة واختبار.
نص جاهز للقول — شرح ترتيب MVC خاصته (30 ثانية)
« هذا رياد : أخرجت الاستعلامات وقواعد الأسعار إلى النموذج، و HTML إلى العرض، والمتحكم لا يفعل إلا التنسيق — طلب، نموذج، عرض. النتيجة : أغير الإظهار دون لمس البيانات، وأستطيع اختبار المنطق دون متصفح. »
يُقال في مراجعة الكود ؛ واعرضوا الملفات الثلاثة جنبا إلى جنب.
نموذج نسخ-لصق — MVC مصغر بـ PHP الخالص (كود مُختبَر)
prepare('SELECT nom, prix FROM produits WHERE categorie = :cat');
$stmt->execute(['cat' => $cat]);
return $stmt->fetchAll(PDO::FETCH_ASSOC);
}
public static function prixRemise(float $prix, float $taux): float {
return round($prix * (1 - $taux), 2);
}
}
// --- المتحكم (Controller) : نحيف، ينسق ---
function indexCatalogue(PDO $pdo, string $cat): void {
$produits = Produit::recupererParCategorie($pdo, $cat);
afficherVue('liste', ['produits' => $produits]); // يختار العرض
}
// --- العرض (View) : بسيط، يعرض (بيانات جاهزة مسبقا، مُهرَّبة) ---
function afficherVue(string $nom, array $vars): void {
$produits = $vars['produits'];
foreach ($produits as $p) {
echo '' . htmlspecialchars($p['nom']) . ' — ' . htmlspecialchars((string) $p['prix']) . ' DA ';
}
}
سكربت شخصي صغير
يكفي فصل خفيف (3 دوال أو 3 ملفات)، لكن حافظوا على الانضباط : لا استعلام أبدا في الإظهار.
مشروع فريق
مثل رياد : مجلدات models/ وcontrollers/ وviews/ — كل يعرف أين يعمل دون تعارض.
النماذج نفسها ومخرجان
أعيدوا استعمال النموذج لصفحة HTML ولواجهة JSON : العرض وحده يتغير.
قبل إطار عمل
تدربوا على هذا التقطيع بـ PHP الخالص : ستصبح لارافيل وسيمفوني بديهيتين بدل سحريتين.
✓ ممارسات جيدة
- فصل الأدوار الثلاثة : البيانات والإظهار والتنسيق.
- استهداف متحكمات نحيفة ونماذج غنية.
- فهم MVC قبل مهاجمة إطار عمل.
✗ أخطاء شائعة
- وضع استعلامات SQL في العروض.
- وضع منطق العمل في المتحكمات.
- إعادة إنتاج السباغيتي داخل إطار العمل.
النقاط الأساسية
- MVC = 3 مسؤوليات : النموذج (البيانات + منطق العمل)، والعرض (إظهار HTML)، والمتحكم (تنسيق طلب ← نموذج ← عرض).
- التدفق : طلب ← توجيه (المتحكم الصحيح) ← متحكم ← نموذج (بيانات) ← عرض (إظهار).
- الفوائد : وضوح وقابلية صيانة وإعادة استعمال/اختبار وتعاون.
- فهم MVC قبل إطار عمل = استعماله بذكاء. الانتقال من PHP «المبعثر» إلى PHP المهيكل.
تحدي 48 ساعة — طبّق غدا
خذوا صفحة مخلوطة واحدة وقطعوها إلى نموذج + متحكم + عرض : النموذج يجلب، والمتحكم ينسق، والعرض يعرض.
- أستطيع ذكر الطبقات الثلاث وأدوارها.
- أعرف اتباع تدفق طلب.
- قطعت صفحة واحدة إلى MVC نظيف.
أسئلة شائعة
لماذا نفهم MVC قبل تعلم إطار عمل مباشرة ؟
لأن أطر العمل تفرض بنية MVC (مجلدات Models وControllers وعروض وتوجيه) : دون فهم السبب، نقلد الدروس دون معرفة أين نضع ماذا، ونخلط المسؤوليات داخل إطار العمل، ونضيع حالما نخرج عن حالة الدرس. ومع MVC المفهوم، تصبح البنية بديهية، ونحترم الفصل (فوائد محفوظة)، وننقح باتباع التدفق، وتنتقل المفاهيم (لارافيل وسيمفوني وما بعدهما).
كيف نوزع الكود عمليا — وأي أخطاء نتفادى ؟
النموذج : الوصول إلى القاعدة (CRUD) والكيانات وقواعد العمل — مستقل عن الإظهار. العرض : HTML + إدخالات دنيا لبيانات مجهزة مسبقا (حلقة وعرض مُهرَّب)، ولا SQL أبدا ولا قواعد. المتحكم : يستقبل الطلب وينادي النموذج ويختار العرض — ينسق، نحيف. الأخطاء الكلاسيكية : استعلامات في العروض، ومنطق عمل في المتحكمات، ومتحكمات من 300 سطر. عروض «بسيطة» ونماذج «غنية» ومتحكمات «نحيفة».
أين نضع منطق العمل والوصول إلى القاعدة ؟