نمط تصميم MVC

هيكل MVC (Model-View-Controller) هو نمط من أنماط التصميم الشهيرة وهو يُستخدم لتنظيم البرمجيات بشكل يجعلها أكثر قابلية للصيانة والتطوير. وهو يفصل بين البيانات، المنطق، والعرض في تطبيقات الويب. 

•  مفهوم الـ MVC
  • Model (النموذج): يُمثل البيانات والتفاعل مع قاعدة البيانات. في حالة استخدام MongoDB، يكون النموذج هو الواجهة للتعامل مع البيانات المخزنة حيث يقوم بوصف جميع النماذج ومحتوياتها .
  • View (العرض): يُمثل واجهة المستخدم التي تقوم بعرض البيانات في تطبيقات الويب تكون الواجهة عبارة عن صفحات HTML أو قوالب مثل EJS، Pug، أو Handlebars.
  • Controller (التحكم): هو الحلقة الوسيطة التي تقوم بإدارة التفاعل والربط بين النموذج والعرض ويحتوي على المنطق الخاص بالطب حيث يتلقى طلبات المستخدم و يتعامل مع النماذج ثم يحدد الملفات المناسبة للعرض.
•  هيكل المشروع
  • يمكنكي تنظيم ملفات مشروعك على النحو التالي:

    my_App/
    ├── models/
    │   ├── postModel.js
    │   └── userModel.js
    ├── views/
    │   ├── index.ejs
    │   └── layout.ejs
    ├── controllers/
    │   ├── postController.js
    │   └── userController.js
    ├── routes/
    │   ├── postRoutes.js
    │   └── userRoutes.js
    ├── public/
    │   ├── styles/
    │   └── scripts/
    ├── app.js
    └── package.json

وإليكي الأجوبة التالية ستاعدك لفهم MVC أكثر :

بشكل مٌبسط، هيكل MVC (Model-View-Controller) عبارة عن نمط تصميم برمجي يفصل التطبيق إلى ثلاثة مكونات رئيسية:

• Model: يتعامل مع البيانات وعملياتها، مثل قراءة وكتابة البيانات في قاعدة البيانات، ولا يهتم بكيفية عرض البيانات أو من طلبها.
• View: يتعامل مع واجهة المستخدم، مثل عرض البيانات في شكل HTML.
• Controller: يتعامل مع المنطق logic الخاص بالمشروع، مثل استقبال الطلبات من المستخدمين وتوجيهها إلى الموديلات المناسبة، أي يستقبل الطلبات من الـ Routes ويتفاعل مع الـ Model لتنفيذ العمليات المطلوبة (مثل جلب البيانات أو تحديثها ويختار الـ View المناسب لعرض النتيجة للمستخدم.

تبسيطًا، تخيلي سيناريو مطعم:

• الزبون (Client) أنتِ جالسة في مطعم وتريدين طلب الطعام.
• النادل (Controller) يقترب منك لأخذ طلبك.
• قائمة الطعام (Model) تمثل  البيانات المتاحة، مثل أنواع الأطباق ومكوناتها وأسعارها.
• الطاهي (Database) هو المسؤول عن إعداد الطعام حسب الطلبات.
• الطريق إلى المطبخ (Routes) هي المسارات التي تربط بين قاعة الطعام والمطبخ.

وتطبيقًا على المشروع الذي ذكرتيه، نقوم بتنظيمه كالتالي:

• المجلد models سيحتوي على النماذج التي تتعامل مع البيانات، مثل User.js و Hall.js.
• controllers مجلد سيحتوي على الكونترولرز التي تتعامل مع المنطق مثل UserController.js و HallController.js.
• views سيحتوي على ملفات HTML التي تتعامل مع عرض البيانات، مثل index.html و hall.html.
• في حين routes سيحتوي على الملفات التي تتعامل مع توجيه الطلبات إلى الكونترولرز المناسبة، مثل user.js و hall.js.
• بينما ملف app.js سيحتوي على التطبيق الرئيسي وبه الموديلات والكونترولرز والراوترز.