آموزش MVC برای مبتدیان 2020: گام به گام

mvc که مخفف کلمات Model View Controller می باشد را در این مقاله از سایت فرانش به صورت گام به گام آموزش خواهیم داد. ابتدا تاریخچه، ویژگی ها و معماری MVC را برای شما بیان می کنیم؛ سپس پس از ذکر دو مثال در این مورد، فریمورک‌های تحت وب مطرح MVC را بررسی می‌کنیم. در پایان بین معماری سه لایه و MVC مقایسه ای خواهیم داشت. تا انتهای مقاله با آموزش MVC با ما همراه باشید.

MVC چیست؟ MVC یک الگوی معماری است که یک اپلیکیشن را به سه قسمت منطقی تقسیم می‌کند:

• Model
• View
• Controller

MVC از حروف اول این سه کلمه تشکیل شده است. هر یک از این اجزاء قسمتی از وظایف یک اپلیکیشن را مدیریت می‌کنند.

معماری MVC، لایه‌های منطق تجاری (Business Logic) و نمایش (Presentation) را از هم جدا می‌کند. در گذشته از این معماری در واسط‌های گرافیکی کاربر ((Graphical User Interface (GUI) دسکتاپ استفاده می‌شد. امروزه از MVC در طراحی اپلیکیشن‌های تحت وب و موبایل استفاده می‌شود.

تاریخچه‌ی MVC

• Trygve Reenskaug برای اولین بار در سال 1979 MVC را مطرح کرد.
• مدل MVC برای اولین بار در سال 1987 در زبان برنامه نویسی Smalltalk معرفی شد.
• MVC در مقاله‌ای در سال 1988، برای اولین بار به عنوان یک مفهوم کلی پذیرفته شد.
• امروزه الگوی MVC در اپلیکیشن‌های تحت وب کاربرد بسیاری دارد.

ویژگی های MVC

• قابلیت تست بسیار ساده. فریمورکی با قابلیت تست و توسعه بالا. MVC بسیار Pluggable است.
• می‌توانید کنترل کامل روی HTML و URLها داشته باشید.
• می‌توانید از قابلیت‌هایِ موجود در NET، JSP، Django و … بهره ببرید.
• منطق برنامه را به خوبی به قسمت‌های مختلف تقسیم می‌کند: مدل، ویو و کنترلر. وظایف اپلیکیشن را از هم جدا می‌کند. مثلا، منطق تجاری، منطق واسط کاربری و منطق ورودی.
• URL Routing برای URLهایی که اصول سئو را به خوبی رعایت می‌کنند. URLای قدرتمند: نگاشتِ URLهایی جامع و قابل جست و جو.
• از توسعه‌ی تست محور (Test Driven Development (TDD)) پشتیبانی می‌کند.

همانطور که میدانید Angular و React دو فریم‌ورک محبوب جاوا اسکریپت می باشد اما آیا با تفاوت های این دو فریمورک آشنا هستید:

مطالعه تفاوت‌های Angular و React 

معماری MVC

نمودار معماری MVC. 1. کاربر با یک ویو کار می‌کند. 2. ویو، کنترلر را از یک رخداد مشخص آگاه می‌سازد. 3. کنترلر مدل را آپدیت می‌کند. 4. مدل به ویو پیغام می‌دهد که تغییر یافته است. 5. ویو داده‌های مدل را برمی‌دارد و خودش را آپدیت می‌کند.

سه جزء اصلی معماری MVC به صورت زیرند:

• Model (مدل): حاوی تمام داده‌ها و منطق مرتبط به آنهاست.
• View (ویو): داده‌ها را برای کاربر نمایش می‌دهد یا تعاملات کاربر را مدیریت می‌کند.
• Controller (کنترلر): واسطی است بین دو جزء ویو و مدل.

در ادامه هر یک از این اجزاء را با جزئیات بیشتری بررسی می‌کنیم.

دوره‌های مرتبط در فرانش

می‌خوام یاد بگیرم

می‌خوام یاد بگیرم

می‌خوام یاد بگیرم

می‌خوام یاد بگیرم

View

ویو آن بخشِ برنامه است که داده‌ها را نمایش می‌دهد.

ویوها با استفاده از داده‌های لایه‌ی مدل ساخته می‌شوند. ویو از مدل درخواست اطلاعات می‌کند و سپس این اطلاعات را برای کاربر نمایش می‌دهد.

ویو داده‌های موجود در چت‌ها، نمودارها و جداول را نیز نمایش می‌دهد. مثلاً یک ویوِ مشتری، شامل تمامِ اجزای UI (Text Box، منوهای Drop Down و …) است.

Controller

کنترلر آن بخش اپلیکیشن است که تعاملات کاربر را مدیریت می‌کند. کنترلر ورودی‌های موس و کیبورد کاربر را تحلیل می‌کند و به مدل و ویو می‌گوید که چگونه خود را تغییر دهند.

یک کنترلر به مدل می‌گوید که وضعیتش را آپدیت کند (مثلاً یک سند را ذخیره کند). کنترلر به ویوِ مرتبط هم دستور می‌دهد که ظاهرش را با توجه به تغییراتِ اخیر عوض کند (مثلاً اسکرول یک سند).

Model

مدل داده‌ها و منطق مرتبط به آنها را ذخیره می‌کند. مدل داده‌هایی را ارائه می‌کند که بین اجزاء کنترلر یا هر منطق تجاری مرتبطی جابه‌جا می‌شوند. مثلاً ، یک شئ کنترلر اطلاعات مشتری را از پایگاه داده می‌گیرد. حالا یا داده‌ها را تغییر می‌دهد و داده‌های جدید را به پایگاه داده می‌فرستد یا همان داده‌ها را به کاربر نمایش می‌دهد.

مدل به درخواست‌های ویو پاسخ می‌دهد و دستوراتِ کنترلر را نیز اجرا و خود را آپدیت می‌کند. مدل پایین‌ترین سطح الگو و مسئول نگه داری داده‌ها است.

پیشنهاد فرانش به شما

آموزش ASP.NET Core برای مبتدی‌ها

خواندن مطلب

مثال های MVC در دنیای واقعی!

بیایید مثال‌های مدل، ویو و کنترلر را در زندگی روزمره ببینیم:

مثال 1:

• بیایید فرض کنیم که شما به یک رستوران رفته‌اید. خُب مسلماً خودتان به آشپزخانه نمی‌روید و غذای خود را حاضر نمی‌کنید. درعوض، در رستوران منتظر می‌مانید تا گارسون از شما سفارش بگیرد.
• گارسون می‌آید و شما سفارش می‌دهید. او شما را نمی‌شناسد یا از قبل سفارش شما را نمی‌داند. گارسون فقط جزئیات سفارش‌تان را یادداشت می‌کند.
• بعد گارسون به آشپزخانه می‌رود، اما غذای شما را حاضر نمی‌کند.
• سرآشپز مسئول پختن غذا است. گارسون سفارش شما و شماره‌ی میزتان را به او می‌دهد.
• حالا سرآشپز غذای شما را حاضر می‌کند و با مواد اولیه‌ی موجود آن را می‌پزد. فرض کنیم شما یک ساندویچ سبزیجات سفارش داده‌اید. سرآشپز برای تهیه آن به نان، گوجه‌فرنگی، سیب‌زمینی و … نیاز دارد که از یخچال برمی‌دارد.
• سرآشپز نهایتاً غذای آماده را به گارسون می‌دهد. گارسون وظیفه دارد این غذا را از آشپزخانه خارج کند.
• حالا گارسون می‌داند که شما چه غذایی سفارش داده‌اید و چطور این غذا سرو می‌شود.

در مثال بالا:

View= You
Waiter= Controller
Cook= Model
Refrigerator= Data

مثال2:

مثال MVC. ویو: واسط کاربری، کنترلر: موتور ماشین، مدل: سوخت

مکانیزم راندن اتومبیل نیز یکی دیگر از مثال‌های MVC است.

• هر اتومبیل از سه قسمت اصلی تشکیل شده است.
• ویو: واسط کاربری (دنده، پدال‌های گاز و ترمز، فرمان، ترمز دستی و …)
• کنترلر (موتور)
• مدل (باک بنزین یا سوخت)

موتور سوخت را از باک می‌گیرد و اتومبیل حرکت می‌کند. اما فقط با استفاده از واسط‌های نام برده شده می‌توان اتومبیل را به حرکت درآورد.

همراهان گرامی سایت فرانش در این مقاله، یک پروژه را با معماری MVC ایجاد می‌کنیم:

آموزش Htaccess و معماری MVC در PHP

فریمورک‌های تحت وب مطرح MVC

در زیر لیست برخی از فریمورک‌های مطرح MVC را می‌بینید:

• Ruby on Rails
• Django
• CakePHP
• Yii
• CherryPy
• Spring MVC
• Catalyst
• Rails
• Zend Framework
• CodeIgniter
• Laravel
• Fuel PHP
• Symphony

دوره‌های مرتبط در فرانش

می‌خوام یاد بگیرم

می‌خوام یاد بگیرم

می‌خوام یاد بگیرم

می‌خوام یاد بگیرم

مزایای MVC: موارد کلیدی

در زیر مزایای اصلی معماری MVC را مشاهده می‌کنید:

• نگه‌داری ساده‌ی کد. گسترش کد در این مدل ساده است.
• مدل را می‌توانیم بدون درنظر گرفتن کاربر تست کنیم.
• به سادگی می‌توان از کلاینت‌های جدید پشتیبانی کرد.
• می‌توان به صورت همزمان فرایند کدنویسیِ اجزای مختلف را انجام داد.
• با تقسیم اپلیکیشن به سه جزء (مدل، ویو و کنترلر)، می‌توان از پیچیدگی جلوگیری کرد.
• تنها از الگوی Front Controller استفاده می‌کند. یعنی تنها از طریق یک کنترلر، درخواست‌های اپلیکیشن را پردازش می‌کند.
• به بهترین نحو از توسعه‌ی تست محور پشتیبانی می‌کند.
• برای اپلیکیشن‌های تحت وبِ بزرگی که دارای برنامه‌نویسان بسیاری هستند، مناسب است.
• Separation of Concerns(SoC) در آن به خوبی صورت می‌گیرد.
• مدیریت سئو مناسب
• تمام کلاس‌ها و اشیاء از یکدیگر مستقلند، پس می‌توانیم آنها را جداگانه تست کنیم.
• با MVC می‌توانیم کارهای مرتبط با هم را در یک کنترلر با هم درنظر بگیریم.

پیشنهاد فرانش به شما

آموزش انگولار جی‌ اس از صفر تا صد (به همراه راهنمای نصب)

خواندن مطلب

معایب استفاده از MVC

• خوانایی پایین. تغییر، Unit Test و استفاده‌ی مجدد از این مدل مشکل است.
• چون این مدل لایه‌های انتزاعی جدیدی را معرفی می‌کند، کار با فریمورک آن می‌تواند کمی سردرگم کننده باشد. ممکن است مدتی طول بکشد تا کاربران معیار تجزیه‌ی MVC را یاد بگیرند.
• عدم پشتیبانی رسمی از اعتبارسنجی
• پیچیدگی داده‌ای و بهینه نبودن
• استفاده از مدل MVC در واسط‌های کاربری مدرن امروزی سخت است
• لازم است چند برنامه نویس به صورت همزمان برنامه‌نویسی کنند
• برنامه‌نویسان برای کار با این مدل باید با فناوری‌های دیگری نیز آشنا باشند
• بخش کنترلر دارای کدهای زیادی است

پیشنهاد فرانش به شما

آموزش VUE JS پروژه محور گام به گام از مقدماتی

خواندن مطلب

مقایسه معماری سه لایه و MVC

خلاصه‌ی مطالب آموزش رایگان MVC

• MVC یک الگوری معماری است که اپلیکیشن را به بخش مدل، ویو و کنترلر تقسیم می‌کند.
• مدل: حاوی داده‌ها و منطق مرتبط به آنها است.
• ویو: داده‌ها را برای کاربر نمایش می‌دهد یا تعاملات کاربری را مدیریت می‌کند.
• Trygve Reenskaug در سال 1979 مدل MVC را مطرح کرد.
• MVC قابلیت تست و گسترش‌پذیری بالایی دارد. این مدل بسیار Pluggable است.
• Rails، Zend Framework، Codelgniter، Laravel و Fuel PHP برخی از فریمورک‌های مطرح MVC هستند.

همراهان عزیز سایت فرانش امیدواریم از این مطلب بهره کافی را برده باشید. همانطور که ملاحظه فرمودید فریمورک های MVC و همچنین مزایا و معایب MVC را برای شما توضیح دادیم.

در صورتیکه نظر یا پیشنهادی دارید در انتهای مقاله در بخش دیدگاه ثبت کنید.

دوره‌های مرتبط در فرانش

می‌خوام یاد بگیرم

می‌خوام یاد بگیرم

می‌خوام یاد بگیرم

می‌خوام یاد بگیرم