نمط التصميم Model-View-Controller (MVC): الدليل الشامل

المرجع النهائي لتطبيق نمط MVC في تطبيقات الويب

 

جدول المحتويات

1. مقدمة عن MVC

نمط Model-View-Controller (MVC) هو نمط تصميم معماري يُقسّم التطبيق إلى ثلاثة مكونات مترابطة:

مكونات MVC:
- النموذج (Model): يدير البيانات والمنطق التجاري
- العرض (View): يتعامل مع العرض والتصميم
- المتحكم (Controller): يعالج إدخال المستخدم

تم تقديمه لأول مرة في عام 1979 بواسطة Trygve Reenskaug لـ Smalltalk، وأصبح أساسًا في إطارات عمل تطوير الويب الحديثة مثل Laravel وRuby on Rails وDjango.

الخصائص الرئيسية

  • فصل الاهتمامات: فصل منطق الأعمال عن العرض
  • عروض متعددة: يمكن عرض نفس البيانات بطرق مختلفة
  • إمكانية الاختبار: يمكن اختبار كل مكون بشكل مستقل
  • سهولة الصيانة: يسهل تعديله وتوسيعه

2. المكونات الأساسية

النموذج (Model)

يمثل النموذج هيكل بيانات التطبيق والمنطق التجاري:

class UserModel {
private $db;

public function __construct(Database $db) {
$this->db = $db;
}

public function getUsers() {
return $this->db->query('SELECT * FROM users');
}

public function createUser($data) {
// التحقق من الصحة
if (empty($data['email'])) {
throw new Exception('البريد الإلكتروني مطلوب');
}

// قواعد الأعمال
if ($this->emailExists($data['email'])) {
throw new Exception('البريد الإلكتروني مسجل مسبقاً');
}

// حفظ البيانات
return $this->db->insert('users', $data);
}
}

العرض (View)

يعرض البيانات للمستخدم ويتعامل مع منطق التقديم:

<!-- users/view.php -->
<h1>المستخدمون المسجلون</h1>
<ul>
 	<li style="list-style-type: none;">
<ul><!--?php foreach ($users as $user): ?-->
 	<li><!--?= htmlspecialchars($user['name']) ?-->
(<!--?= htmlspecialchars($user['email']) ?-->)</li>
</ul>
</li>
</ul>

المتحكم (Controller)

يعالج إدخال المستخدم ويتوسط بين النموذج والعرض:

class UserController {
private $model;

public function __construct(UserModel $model) {
$this->model = $model;
}

public function listUsers() {
$users = $this->model->getUsers();
require 'views/users.php';
}

public function createUser() {
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
try {
$this->model->createUser($_POST);
header('Location: /users');
exit;
} catch (Exception $e) {
$error = $e->getMessage();
}
}
require 'views/create_user.php';
}
}

3. سير عمل MVC

دورة حياة الطلب في MVC النموذجية:

1. يتفاعل المستخدم مع العرض (نقرة، إرسال نموذج)
2. يرسل العرض الإجراء إلى المتحكم
3. يعالج المتحكم الطلب
4. يقوم المتحكم بتحديث النموذج عند الحاجة
5. يحدد المتحكم العرض المناسب
6. يُشعِر النموذج العرض بالتغييرات
7. يقوم العرض بتحديث العرض التقديمي

مخطط التتابع

تمثيل مرئي لتدفق MVC:

المستخدم -> العرض: تفاعل (نقرة، إرسال)
العرض -> المتحكم: إرسال الإجراء
المتحكم -> النموذج: تحديث البيانات
النموذج -> المتحكم: إرجاع النتيجة
المتحكم -> العرض: اختيار العرض
العرض -> المستخدم: عرض النتائج

4. MVC في تطوير الويب

تقوم أطر الويب الحديثة بتنفيذ نسخ مختلفة من MVC:

نمط المتحكم الأمامي (Front Controller)

تستخدم معظم تطبيقات MVC على الويب متحكمًا أماميًا:

// index.php (المتحكم الأمامي)
require 'controllers/UserController.php';
require 'models/UserModel.php';

$model = new UserModel($db);
$controller = new UserController($model);

$action = $_GET['action'] ?? 'list';

switch ($action) {
case 'create':
$controller->createUser();
break;
default:
$controller->listUsers();
}

معالجة طلبات HTTP

كيفية ربط طلبات الويب بمكونات MVC:

طلب HTTP -> الراوتر -> المتحكم -> النموذج -> العرض -> استجابة HTTP

5. تطبيقات الإطارات

مثال Laravel MVC

// النموذج (app/Models/User.php)
namespace App\Models;
use Illuminate\Database\Eloquent\Model;

class User extends Model {
protected $fillable = ['name', 'email'];
}

// المتحكم (app/Http/Controllers/UserController.php)
namespace App\Http\Controllers;
use App\Models\User;

class UserController extends Controller {
public function index() {
$users = User::all();
return view('users.index', compact('users'));
}
}

// العرض (resources/views/users/index.blade.php)
@extends('layouts.app')
@section('content')
@foreach ($users as $user)

{{ $user->name }}

@endforeach
@endsection

أمثلة على أطر أخرى

  • Ruby on Rails: الالتزام بالاتفاقيات بدلاً من الإعدادات
  • Django: نسخة MTV (نموذج – قالب – عرض)
  • Spring MVC: تنفيذ بلغة Java
  • ASP.NET MVC: تنفيذ شركة مايكروسوفت

6. فوائد MVC

مزايا التطوير

  • التطوير المتوازي: يمكن للفرق المختلفة العمل على المكونات بالتوازي
  • إعادة استخدام الكود: يمكن استخدام النماذج مع عروض مختلفة
  • سهولة الصيانة: التغييرات في مكون واحد لا تؤثر على الآخرين غالبًا

الفوائد المعمارية

- فصل واضح للمسؤوليات
- اختبار أفضل (اختبارات وحدة للمكونات)
- قاعدة كود منظمة
- معمارية قابلة للتوسع
- واجهات مستخدم مرنة

7. أفضل الممارسات

إرشادات النموذج

  • احتفظ بمنطق الأعمال داخل النموذج
  • لا تضع منطق العرض داخل النموذج
  • اجعل النموذج غير مرتبط بالإطار قدر الإمكان

إرشادات العرض

- منطق بسيط في العرض
- استخدم محركات القوالب
- تعقيم كافة المخرجات
- افصل بين HTML/CSS/JS

إرشادات المتحكم

- متحكمات خفيفة
- تعالج الإدخال/الإخراج
- لا تضع منطق الأعمال داخل المتحكم
- تُرجع الاستجابات المناسبة

8. بدائل MVC

MVVM (نموذج – عرض – نموذج عرض)

شائع في أطر العمل الخاصة بالواجهة الأمامية مثل Angular وVue:

- العرض: هيكل واجهة المستخدم
- نموذج العرض: منطق التقديم
- النموذج: البيانات ومنطق الأعمال

أنماط أخرى

  • MVP: نموذج – عرض – مقدم
  • MVU: نموذج – عرض – تحديث (معمارية Elm)
  • Flux: تدفق بيانات أحادي الاتجاه (React)