MVC في JSP (Archiبنية)

ما هو MVC؟

يرمز MVC إلى نمط تصميم البرمجيات Model-View-Controller، وهو نمط يفصل التطبيق إلى ثلاث طبقات مترابطة: منطق الأعمال، والعرض، والبيانات. في نمط MVC:

• M يرمز إلى موديل
• V يرمز إلى View
• C يرمز إلى وحدة التحكم

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

لماذا نستخدم نمط MVC؟ Archiبنية في JSP؟

قبل القفزping لفهم كيفية عمل نمط MVC في JSP، من المفيد معرفة سبب اعتماد المطورين لهذا النمط. فدمج منطق الأعمال واستدعاءات قواعد البيانات وHTML داخل صفحة JSP واحدة ينتج عنه بسرعة شيفرة معقدة يصعب صيانتها. يحل نمط MVC هذه المشكلة من خلال تخصيص طبقة مستقلة لكل وظيفة.

• Code يصبح من الأسهل قراءته لأن كل ملف له مسؤولية واحدة.
• يمكن للفرق العمل على العرض، ووحدة التحكم، والنموذج بالتوازي دون حدوث تعارضات.
• تستهدف اختبارات الوحدة النموذج بشكل مباشر، دون المساس بعرض JSP.
• مبادلةping يُعد إنشاء عرض JSP لاستجابة JSON أو محرك قوالب مختلف أمرًا بسيطًا.

كيف يعمل نمط MVC في JSP؟

في تطبيق MVC القائم على JSP، ترتبط كل طبقة بوظيفة محددة Java التكنولوجيا. تقوم ملفات JSP بعرض الواجهة، ويعمل Servlet كوحدة تحكم، و Javaتُغلف المكونات النموذج. تشرح الأقسام التالية مسؤوليات كل طبقة.

طبقة النموذج

• هذه هي طبقة البيانات التي تحتوي على منطق العمل الخاص بالنظام.
• وهي تتضمن جميع بيانات التطبيق.
• كما أنه يمثل حالة التطبيق.
• تم بناؤه من Javaالكائنات أو الكائنات الافتراضية التي تتصل بـ قاعدة بيانات.
• يتواصل المتحكم مع النموذج لجلب البيانات ويرسلها إلى طبقة العرض.
• يتصل النموذج بقاعدة البيانات ويخزن البيانات فيها.

عرض الطبقة

• هذه هي طبقة العرض الخاصة بالتطبيق.
• يتكون من HTML و JSP و CSS و Javaالنصي.
• وهو يعرض عادةً واجهة المستخدم الخاصة بالتطبيق.
• يعرض البيانات التي يتم جلبها من وحدة التحكم، والتي بدورها تجلب البيانات من فئات طبقة النموذج.
• تقوم طبقة العرض بعرض البيانات على واجهة المستخدم الخاصة بالتطبيق دون أن تحتوي على منطق الأعمال.

طبقة التحكم

• يعمل كواجهة بين العرض والنموذج.
• يعترض جميع الطلبات الواردة من طبقة العرض.
• يستقبل الطلبات من طبقة العرض، ويعالجها، ويجري التحقق من صحة الطلب.
• يتم توجيه الطلب إلى طبقة النموذج لمعالجة البيانات. وبمجرد معالجة الطلب، يرسل النموذج النتيجة مرة أخرى إلى وحدة التحكم مع المعلومات المطلوبة، والتي تعرضها واجهة المستخدم بعد ذلك.

مزايا MVC Architecture

مزايا MVC هي:

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

مثال لتصميم تطبيق JSP مع MVC Architecture

في هذا المثال، سنوضح كيفية استخدام بنية MVC في تطبيق JSP.

• سنأخذ مثالاً على نموذج يحتوي على متغيرين، "البريد الإلكتروني" و "كلمة المرور"، واللذان يمثلان طبقة العرض الخاصة بنا.
• بمجرد أن يقوم المستخدم بإدخال البريد الإلكتروني وكلمة المرور والنقر على "إرسال"، يتم تمرير الإجراء إلى Mvc_servlet حيث يتم تمرير البريد الإلكتروني وكلمة المرور.
• Mvc_servlet هي طبقة التحكم. هنا في Mvc_servlet، يتم إرسال الطلب إلى كائن bean الذي يعمل كطبقة النموذج.
• يتم تعيين قيم البريد الإلكتروني وكلمة المرور في الكائن وتخزينها لاستخدامها لاحقًا.
• يتم جلب القيمة من الكائن وعرضها في طبقة العرض.

Mvc_example.jsp (عرض)

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>MVC Guru Example</title>
</head>
<body>
<form action="Mvc_servlet" method="POST">
Email: <input type="text" name="email">
<br />
Password: <input type="text" name="password" />
<input type="submit" value="Submit" />
</form>
</body>
</html>

شرح الكود:

عرض الطبقة:

Code السطر 10-15: هنا نأخذ نموذجًا يحتوي على حقلين كمعاملات، "البريد الإلكتروني" و"كلمة المرور"، ويجب توجيه هذا الطلب إلى وحدة تحكم، Mvc_servlet.java، والتي يتم تمريرها في خاصية الإجراء. طريقة HTTP المستخدمة هي POST.

Mvc_servlet.java (وحدة التحكم)

package demotest;

import java.io.IOException;

import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * Servlet implementation class Mvc_servlet
 */
public class Mvc_servlet extends HttpServlet {
	private static final long serialVersionUID = 1L;

    /**
     * @see HttpServlet#HttpServlet()
     */
    public Mvc_servlet() {
        super();
        // TODO Auto-generated constructor stub
    }


	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		String email=request.getParameter("email");
        String password=request.getParameter("password");

        TestBean testobj = new TestBean();
        testobj.setEmail(email);
        testobj.setPassword(password);
        request.setAttribute("gurubean",testobj);
        RequestDispatcher rd=request.getRequestDispatcher("mvc_success.jsp");
        rd.forward(request, response);
	}

}

شرح الكود:

طبقة التحكم:

Code خط 14: Mvc_servlet هو امتداد لـ HttpServlet.

Code خط 26: بما أن الطريقة المستخدمة هي POST، فإن الطلب يدخل إلى طريقة doPost الخاصة بـ Servlet، والتي تعالج الطلب وتحفظه في كائن bean باسم testobj.

Code خط 34: باستخدام كائن الطلب، نقوم بتعيين السمة "gurubean" التي يتم تعيين قيمة لها لـ testobj.

Code خط 35: هنا نستخدم كائن RequestDispatcher لإعادة توجيه رسالة النجاح إلى mvc_success.jsp.

TestBean.java (النموذج)

package demotest;

import java.io.Serializable;

public class TestBean implements Serializable{

	public String getEmail() {
		return email;
	}
	public void setEmail(String email) {
		this.email = email;
	}
	public String getPassword() {
		return password;
	}
	public void setPassword(String password) {
		this.password = password;
	}
	private String email="null";
	private String password="null";


}

شرح الكود:

طبقة النموذج:

Code السطر 7-17: يحتوي على دوال الوصول والتعيين للبريد الإلكتروني وكلمة المرور وهما عضوان في فئة TestBean.

Code السطر 19-20: يحدد هذا العنصر البريد الإلكتروني وكلمة المرور للأعضاء من نوع String في فئة الكائن.

Mvc_success.jsp (عرض النتائج)

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
    <%@page import="demotest.TestBean"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Guru Success</title>
</head>
<body>
<%
TestBean testguru=(TestBean)request.getAttribute("gurubean");
out.print("Welcome, "+testguru.getEmail());
%>
</body>
</html>

شرح الكود:

Code خط 12: نقوم باسترداد السمة باستخدام كائن الطلب الذي تم تعيينه في طريقة doPost الخاصة بـ Servlet.

Code خط 13: نقوم بطباعة رسالة الترحيب ومعرف البريد الإلكتروني الذي تم حفظه في كائن Bean.

الناتج

عند تنفيذ الكود أعلاه، ستحصل على الناتج التالي:

عند فتح ملف mvc_example.jsp، ستظهر لك الاستمارة التي تحتوي على حقول البريد الإلكتروني وكلمة المرور وزر الإرسال.

بمجرد إدخال البريد الإلكتروني وكلمة المرور في النموذج والنقر على "إرسال":

بعد النقر على "إرسال"، ستظهر النتيجة كما يلي:

عند إدخال البريد الإلكتروني وكلمة المرور على الشاشة والنقر على "إرسال"، يتم حفظ البيانات في TestBean. ومن TestBean، يتم استرجاعها في الشاشة التالية لعرض رسالة النجاح. JSP يؤدي دور عرض البيانات وتوفير واجهة المستخدم، بينما يعمل السيرفلت كوحدة تحكم و Javaيُستخدم Bean كنموذج. ويحتوي هذا النموذج على منطق العمل الرئيسي.

الأسئلة الشائعة