الأحد، 10 نوفمبر، 2013

التطبيق الأول - النمط المعياري نموذج-منظر-موجّه Model-View-Controller MVC

كما وعدتكم في المقالة السابقة مقدمة حول النمط المعياري نموذج-منظر-موجّه Model-View-Controller MVC
سنقوم اليوم بعمل تطبيقنا الأول كمدخل عملي, سأكون حريصاً على إبقائه بسيطاً وبعيداً عن أي تعقيد, حتى يسهل على المبتدأين التعرف على MVC والعمل عليها لأول مرة...
إذا كنت قد قمت بعمل تطبيقات MVC سابقاً فلن تستفيد الشيء الكثير من قراءة هذه المقالة, لأنها موجهة للمبتدئين. ومع ذلك تستطيع تصفح المقالة وإثراء هذا المحتوى بملاحظاتك وتعليقاتك..
أتوقع أن يكون لديك خلفية في البرمجة وتطوير تطبيقات الويب بشكل عام و مباديء البرمجة الكائنية كذلك. والآن إلى المقال, وقراءة ممتعة أتمناها لكم..



بعد تطبيق هذا المثال ستكون قادراً على:
1.       فهم وتوصيف ( View, Controller) .
2.       فهم طريقة عمل التطبيق وعلاقة الموجّه بالعارض Controller + View.
3.       فهم تسلسل تنفيذ تطبيق MVC.


المتطلبات:

1.       جهاز كمبيوتر ^_* (فهذه الأمثلة لا تعمل على الآلة الحاسبة).
2.       نظام تشغيل Windows 7 Service Pack 1  (من متطلبات VS 2013).
3.       Microsoft Visual Studio 2013 Express ( من هنا ).

التطبيق:

سنقوم بعمل تطبيق بسيط يعرض رسالة "معاَ نعمل لرفعة الأمة الإسلامية" على الصفحة الرئيسية + رابط لصفحة فرعية تعرض راسلة "شكراً لكم".
كما تلاحظون لا يوجد اتصال بقاعدة بيانات ولا تسجيل دخول مستخدمين, ولكن أعدكم بأمثلة أكثر تفصيلاً في المستقبل القريب حيث سنتعرّض لمثل هذه الموضوعات وأمثلة متقدمة أكثر, ولكن بعد أن نلمّ ببعض الأساسيات أولاً..

بسم الله..
افتح مشروع جديد واختر ASP.NET MVC 4 Web             Application.
قم بتسمية المشروع MyFirstMVC واضغط موافق.


في الشاشة التالية, اختر Empty  من قائمة اختيار القالب. وتأكد من اختيار ASPX من قائمة محرّك العرض View Engine.






 
ضمن نافذة مستكشف المشروع, ستشاهد شكلاً قريباً من هذا, لقد تم إنشاء المجلدات والملفات الضرورية لعمل تطبيق MVC من أجلك. أكثر ما يهمنا حالياً هو المجلدين التاليين:
  Views, Controllers

سنقوم الآن بخطوتين, الأولى سنقوم بإنشاء Controller  لاستقبال طلب المستخدم, والثانية سنقوم بإنشاء View  لعرض النص المطلوب على الصفحة..

الخطوة الأولى: إنشاء Controller

نقوم بإضافة Controller  كما في الشكل التالي, ونعطيه الإسم: HomeController
من المهم الالتزام بهذه التسميات, فمحرك MVC يتوقع تسميات محددة ليتمكن من توجيه طلبات المستخدم للملف المناسب, وكما ترى سنستخدم دوماً في أسماء الموجّهات اسم الوظيفة ثم Controller..
نلاحظ أن كود مشابه للتالي قد تم إنشائه تلقائياً:




namespace MyFirstMVC.Controllers

{

    public class HomeController : Controller

    {

        //

        // GET: /Home/



        public ActionResult Index()

        {

            return View();

        }



    }

}


الخطوة الثانية: إنشاء View

لن نقوم بأي تعديل على هذا الكود, فقط سنضغط بزر الفأرة الأيمن على ActionResult Index() كما في الشكل التالي, ونختار AddView لإنشاء View  لعرض النص.
نبقي اسم العرض كما هو Index ونختار ASPX من قائمة View Engine, ونزيل الاختيار عن Use a layout or master page بما أنه لا يوجد أي Master Page  في مشروعنا الحالي (لا تقلق إن لم تفهم ما يعنيه هذا الآن).

بعد إضافة العرض, سيقوم Visual Studio  بإضافة مجلد داخل مجلد Views وتسميته Home, ويتم إنشاء ملف العرض Index  داخل هذا المجلد.
يحتوي ملف Index.aspx على كود مشابه للتالي:








<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage" %>



<!DOCTYPE html>



<html>

<head runat="server">

    <meta name="viewport" content="width=device-width" />

    <title>Index</title>

</head>

<body>

    <div>

معاَ نعمل لرفعة الأمة الإسلامية

    </div>

</body>

</html>

سنقوم بإضافة النص " معاَ نعمل لرفعة الأمة الإسلامية " كما نشاهد في الكود أعلاه ونضغط Ctrl + F5 لعرض الصفحة.
لقد تم عرض صفحة فارغة وإضافة النص المطلوب بداخلها. وهكذا نكون قد أنشأنا مشروعنا الأول بواسطة MVC. سنقوم الآن بإضافة صفحة جديدة لعرض الرسالة: "شكراً لكم"
نضيف الكود التالي مباشرة بعد النص, ليصبح كود العرض:

<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage" %>

<!DOCTYPE html>

<html>
<head runat="server">
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body>
    <div>
        معاَ نعمل لرفعة الأمة الإسلامية
        <br />
        <%= Html.ActionLink("إلى اللقاء", "Bye","End") %>
    </div>
</body>
</html>

تنسيق الروابط URL

بعد تحديث الصفحة, نلاحظ إضافة رابط لكلمة "إلى اللقاء" نقوم بالنقر عليه ونلاحظ ظهور صفحة خطأ " The resource cannot be found" السبب طبعاً أننا لم نقم بإنشاء الصفحة الجديدة بعد.. ولكن دعنا نلقي نظرة على شريط العنوان, سنلاحظ الرابط مشابه للتالي:


http://localhost:51740/End/Bye
Or
http://www.somedomain.com/End/Bye


ما يهمنا هو آخر جزأين, /End/Bye .. ماهذا!؟ هناك تغيير واضح عن الرابط التقليدي في Web Forms والذي ينتهي عادة باسم الصفحة + .aspx الآن هناك تغيير جذري في طريقة تنسيق العناوين, ببساطة وبدون الدخول في المزيد من التفاصيل, نستطيع القول الآن أن الجزأ الأول بعد اسم النطاق يعبر عن الموجّه Controller والجزأ الثاني يعبّر عن الـ Action, وسنتحدث لاحقاً عن كيفية تمرير قيم للأكشن.
حسناً إذاً, الآن سنحتاج لإنشاء موجّه جديد باسم End ونقوم بتعديل الكود ليبدوا كما يلي:


using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace MyFirstMVC.Controllers
{
    public class EndController : Controller
    {
        //
        // GET: /End/

        public ActionResult Index()
        {
            return View();
        }

        public ActionResult Bye()
        {
            return View();
        }
    }
}


نلاحظ أن معظم الكود موجود مسبقاً وسنحتاج لإضافة الأكشن Bye فقط, وبعد ذلك سنقوم بإنشاء View  عن طريق الضغط بزر الماوس الأيمن على الأكشن Bye  وإضافة View وتسميته Bye طبعا!
في العرض الجديد سنضيف النص "شكراً لكم" ليصبح الكود كالتالي:

<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage" %>

<!DOCTYPE html>

<html>
<head runat="server">
    <meta name="viewport" content="width=device-width" />
    <title>Bye</title>
</head>
<body>
    <div>
        "شكراً لكم"
    </div>
</body>
</html>

نقوم بعمل Build  للتطبيق وتحديث الصفحة لنشاهد الرسالة "شكراً لكم"..
لاشك أن هناك المئات من الأسئلة في ذهنك عزيزي القاريء:
هل أحتاج إلى موجّه جديد لكل صفحة أقوم بعملها؟
أين Model؟ ولماذا لم نستخدمه؟ ومتى يجب أن أستخدمه؟
كيف استطاع التطبيق الوصول إلى الصفحة الرئيسية رغم اني لم أحدد الموجّه Home  عندما استدعيت التطبيق للمرة الأولى؟
هذه الأسئلة والمزيد سنتعرّف عليه في المقالة القادمة, فإلى اللقاء.


هناك تعليقان (2):

  1. رااااااااائع -- اتمنى أن يكون هناك سلسلة برامج للإستفادة - مع طرح اقتراحات لعمل مجموعة من الرامج البدائية

    ردحذف

متابعة

استلام إشعارات بالمواضيع الجديدة