MVC ใน JSP (Archiเทคเจอร์)

MVC คืออะไร?

MVC เป็นสถาปัตยกรรมที่แยกตรรกะทางธุรกิจ การนำเสนอ และข้อมูลออกจากกัน ใน MVC

  • M ย่อมาจาก Model
  • วี ย่อมาจาก วิว
  • C ย่อมาจากตัวควบคุม

MVC เป็นวิธีที่เป็นระบบในการใช้แอปพลิเคชันโดยที่โฟลว์เริ่มต้นจากเลเยอร์มุมมอง โดยที่คำขอจะถูกยกขึ้นและประมวลผลในเลเยอร์คอนโทรลเลอร์ และส่งไปยังเลเยอร์โมเดลเพื่อแทรกข้อมูลและรับข้อความแสดงความสำเร็จหรือความล้มเหลวกลับคืนมา เอ็มวีซี Archiแผนภาพเทคเจอร์แสดงไว้ด้านล่าง:

VMC Archiเทคเจอร์
VMC Archiแผนภาพเทคเจอร์

เลเยอร์โมเดล

  • นี่คือชั้นข้อมูลที่ประกอบด้วยตรรกะทางธุรกิจของระบบ
  • ประกอบด้วยข้อมูลทั้งหมดของแอปพลิเคชัน
  • นอกจากนี้ยังแสดงถึงสถานะของแอปพลิเคชันด้วย
  • ประกอบด้วยชั้นเรียนที่มีความเชื่อมโยงกับ ฐานข้อมูล.
  • คอนโทรลเลอร์เชื่อมต่อกับโมเดลและดึงข้อมูลและส่งไปยังเลเยอร์มุมมอง
  • โมเดลเชื่อมต่อกับฐานข้อมูลด้วยและจัดเก็บข้อมูลลงในฐานข้อมูลที่เชื่อมต่อกับฐานข้อมูล

ดูเลเยอร์

  • นี่คือเลเยอร์การนำเสนอ
  • ประกอบด้วย HTML, JSP ฯลฯ ลงไป
  • โดยปกติจะแสดง UI ของแอปพลิเคชัน
  • มันถูกใช้เพื่อแสดงข้อมูลที่ดึงมาจากคอนโทรลเลอร์ซึ่งจะดึงข้อมูลจากคลาสเลเยอร์โมเดล
  • เลเยอร์มุมมองนี้แสดงข้อมูลบน UI ของแอปพลิเคชัน

เลเยอร์คอนโทรลเลอร์

  • มันทำหน้าที่เป็นส่วนต่อประสานระหว่าง View และ Model
  • มันสกัดกั้นคำขอทั้งหมดที่มาจากเลเยอร์มุมมอง
  • ได้รับการร้องขอจากเลเยอร์มุมมองและประมวลผลคำขอและทำการตรวจสอบที่จำเป็นสำหรับคำขอ
  • คำขอดังกล่าวจะถูกส่งไปยังเลเยอร์โมเดลเพื่อประมวลผลข้อมูล และเมื่อประมวลผลคำขอแล้ว คำขอดังกล่าวจะถูกส่งกลับไปยังตัวควบคุมพร้อมข้อมูลที่ต้องการ และแสดงตามนั้นในมุมมอง

ข้อดีของ MVC Archiเทคเจอร์

ข้อดีของ MVC คือ:

  • ง่ายต่อการรักษา
  • ง่ายต่อการขยาย
  • ทดสอบง่าย
  • การควบคุมการนำทางเป็นแบบรวมศูนย์

ตัวอย่างการออกแบบแอปพลิเคชัน JSP ด้วย MVC Archiเทคเจอร์

ในตัวอย่างนี้ เราจะแสดงวิธีการใช้สถาปัตยกรรม MVC ใน JSP

  • เรากำลังใช้ตัวอย่างแบบฟอร์มที่มีตัวแปรสองตัวคือ “อีเมล” และ “รหัสผ่าน” ซึ่งเป็นเลเยอร์มุมมองของเรา
  • เมื่อผู้ใช้ป้อนอีเมลและรหัสผ่านแล้วคลิกส่ง การดำเนินการจะถูกส่งต่อใน mvc_servlet ซึ่งอีเมลและรหัสผ่านจะถูกส่งต่อไป
  • mvc_servlet นี้เป็นเลเยอร์คอนโทรลเลอร์ ที่นี่ใน mvc_servlet คำขอจะถูกส่งไปยังวัตถุ bean ซึ่งทำหน้าที่เป็นเลเยอร์โมเดล
  • ค่าอีเมลและรหัสผ่านจะถูกตั้งค่าไว้ในบีนและจัดเก็บไว้สำหรับวัตถุประสงค์ต่อไป
  • จาก 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>

คำอธิบายของรหัส:

ดูเลเยอร์:

รหัสบรรทัด 10-15: เรากำลังใช้แบบฟอร์มที่มีฟิลด์สองฟิลด์เป็นพารามิเตอร์ “อีเมล” และ “รหัสผ่าน” และคำขอนี้ต้องส่งต่อไปยังตัวควบคุม Mvc_servlet.java ซึ่งจะถูกส่งต่อไปในแอ็คชัน วิธีที่จะส่งผ่านคือวิธี 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); 
	}

}

คำอธิบายของรหัส:

ชั้นตัวควบคุม

รหัสบรรทัด 14:mvc_servlet กำลังขยาย HttpServlet

รหัสบรรทัด 26: เนื่องจากวิธีการที่ใช้คือ POST ดังนั้นคำขอจึงเข้าสู่วิธี doPost ของเซิร์ฟเล็ตซึ่งประมวลผลคำขอและบันทึกลงในวัตถุ bean เป็น testobj

รหัสบรรทัด 34: การใช้วัตถุคำขอเรากำลังตั้งค่าแอตทริบิวต์เป็น gurubean ซึ่งกำหนดค่าของ testobj

รหัสบรรทัด 35: ที่นี่เราใช้ออบเจ็กต์การร้องขอโปรแกรมเลือกจ่ายงานเพื่อส่งข้อความแสดงความสำเร็จไปยัง 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";


}

คำอธิบายของรหัส:

เลเยอร์โมเดล:

รหัสบรรทัด 7-17: ประกอบด้วยตัวรับและตัวตั้งค่าอีเมลและรหัสผ่านซึ่งเป็นสมาชิกของคลาส Test Bean

รหัสบรรทัด 19-20: กำหนดอีเมลและรหัสผ่านของสมาชิกประเภทสตริงในคลาสบีน

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>

คำอธิบายของรหัส:

รหัสบรรทัด 12: เราได้รับแอตทริบิวต์โดยใช้วัตถุคำขอซึ่งได้รับการตั้งค่าในวิธี doPost ของเซิร์ฟเล็ต

รหัสบรรทัด 13: เรากำลังพิมพ์ข้อความต้อนรับและรหัสอีเมลที่ได้รับการบันทึกไว้ในวัตถุบีน

Output:

เมื่อคุณรันโค้ดข้างต้น คุณจะได้ผลลัพธ์ต่อไปนี้:

เมื่อคุณคลิกที่ mvc_example.jsp คุณจะได้รับแบบฟอร์มพร้อมอีเมลและรหัสผ่านพร้อมปุ่มส่ง

เมื่อคุณป้อนอีเมลและรหัสผ่านลงในแบบฟอร์มแล้วคลิกส่ง

การออกแบบแอปพลิเคชัน JSP

หลังจากคลิกส่งผลลัพธ์จะแสดงดังภาพด้านล่าง

การออกแบบแอปพลิเคชัน JSP

Output:

เมื่อคุณป้อนอีเมลและรหัสผ่านในหน้าจอและคลิกส่ง รายละเอียดต่างๆ จะถูกบันทึกลงใน TestBean และจาก TestBean จะถูกดึงออกมาในหน้าจอถัดไปเพื่อรับข้อความแจ้งความสำเร็จ

สรุป

ในบทความนี้ เราได้เรียนรู้เกี่ยวกับสถาปัตยกรรม MVC เช่น Model View Controller

JSP มีบทบาทในการนำเสนอข้อมูลและผู้ควบคุม มันเป็นอินเทอร์เฟซระหว่างโมเดลและมุมมองในขณะที่โมเดลเชื่อมต่อทั้งกับคอนโทรลเลอร์และฐานข้อมูล ตรรกะทางธุรกิจหลักมีอยู่ในเลเยอร์โมเดล