w w w . i t s c i . m j u . a c . t h / s a y a n

MODEL VIEW CONTROLLER SAYAN UNANKARD1/2562

6

จาวา โมเดล วิว คอนโทรลเลอร (JAVA MODEL VIEW CONTROLLER)

สถาปตยกรรมเอ็มวีซี (MVC) เปนสถาปตยกรรมซอฟตแวรที่แยกสวนของขอมูล การนําเสนอ และ

การควบคุมทางลอจิกออกจากกัน

แบงเปนสามสวนไดแก

• โมเดล (Model)

• วิว (View)

• คอนโทรลเลอร (Controller)

ทั้งนี้ก็เพื่อใหโปรแกรมมีความยืดหยุนมากขึ้น รวมถึงการแกไขไดงาย ตลอดจนการบํารุงรักษา

สามารถทําไดโดยงาย และเปนวิธีการที่เหมาะสมอยางยิ่งในการพัฒนาเว็บ

2

สถาปตยกรรม MVC ประกอบดวย 3 สวนคือ

• โมเดลจะใชแทนขอมูลที่ใชภายในระบบและกฎเกณฑทางดานธุรกิจที่เก่ียวของกับการ

ดําเนินการเขาถึงและเปล่ียนแปลงแกไขขอมูลนั้น ๆ การเปล่ียนแปลงแตละคร้ังที่เกิดขึ้นโมเดล

จะตองมีการแจงใหวิวทราบเสมอ ทั้งนี้เนื่องจากโมเดลจะทําหนาที่ในการเรียกใชขอมูลใหแก

วิวเสมอ

• วิวใชสําหรับแสดงขอมูลที่บรรจุอยูในโมเดล ซึ่งวิวจะทําหนาที่นําเสนอขอมูล ตาง ๆ

นอกจากนั้นวิวยังมีหนาที่ในการนําเสนอเพ่ือที่เปล่ียนแปลงแกไขขอมูลในโมเดลโดยผานทาง

ผูใช หรือกลาวอีกในหนึ่งก็คือวิวทําหนาที่ติดตอกับผูใชนั่นเอง

• คอนโทรลเลอร เปนตัวควบคมุการทํางานทางลอจิกของระบบ โดยทําหนาที่ในการกําหนด

พฤติกรรมการทํางานของระบบ ตัวอยางเชน ผูใชเลือกเมนูใน แอพพลิเคชัน

คอนโทรลเลอรจะทําหนาที่เลือกสวนการนําเสนอตามความตองการของผูใช

3

เว็บแอพพลิเคชันที่ใชจาวาเทคโนโลยี

เว็บแอพพลิเคชันที่ใชจาวาเทคโนโลยีในการพัฒนา สามารถแบงการทํางานออกไดเปน 3 สวน

หลักๆ ไดดังตอไปนี้

• เจเอสพี (JSP) ทําหนาที่ในการสรางเฮชทีเอ็มแอล สําหรับเปนสวนติดตอกับผูใช ซึ่งทําหนาที่

เปนวิวของระบบในสถาปตยกรรมแบบเอ็มวีซี

• เซิรฟเลต (Servlets) ทําหนาที่รับผิดชอบเก่ียวกับการทํางานทางลอจิก ซึ่งทําหนาที่เปน

คอนโทรลเลอรของระบบในสถาปตยกรรมแบบเอ็มวีซี

• จาวาบีน (JavaBeans) ทําหนาที่รับผิดชอบเก่ียวกับการเขาถึงขอมูลภายในระบบ ซึ่งทําหนาที่

เปนโมเดลของระบบในสถาปตยกรรมแบบเอ็มวีซี

4

โมเดลแบบเอ็มวีซีของภาษาจาวา

5

ประโยชนของการออกแบบ

• ประโยชนของการออกแบบโดยสถาปตยกรรมแบบเอ็มวีซี ยังเปนการแยกสวนของโมเดลและ

วิวออกจากกันจะทําใหงายตอการพัฒนา ทดสอบและบํารุงรักษาระบบ เน่ืองจากการเขาถึง

ทั้งหมดไปยังโมเดลจะตองอาศัยสวนประกอบเหลานี้

• การใชหลักการของเอ็มวีซีจะชวยใหการทําความเขาใจในการทํางานของตัว คอนโทรล และ

โมเดลไดงายขึ้น

• เนื่องจากการออกแบบโมเดลในลักษณะนี้จะถูกแบงออกเปนสวนที่ชัดเจน ดังนั้นการนํากลับไป

ใชใหมจึงสามารถทําไดโดยงาย

6

ตัวอยางสถาปตยกรรมแบบเอ็มวีซีของการเขาสูระบบ (LOGIN)

โมเดล - จัดเก็บคาของชื่อผูใช และรหัสผานโดยมีวิธีการที่จะทําการ get และ set คาของขอมูล

วิว - การแสดงผลในสวนของหนาจอ

คอนโทรลเลอร - ควบคุมการตรวจสอบความถูกตองของขอมูลและสงไปแสดงผลในสวนของววิ

ตอไป

Customer LoginPage

LoginDB

LoginController

MainPage

7

: Customer : LoginPage : LoginController : LoginDB : MainPageBasic Flow

1.เมือผูใชเขาสูหนา login

2. ปอนชื่อผูใชและรหัสผาน

5.ระบบคืนคาการตรวจสอบจากฐานขอมูล

6. ระบบแสดงหนาจอหลักสําหรับผูใชระบบ

Alternate Flow

5.1 ในกรณีท่ีการตรวจสอบชื่อผูใชและ

รหัสผานไมถูกตอง ระบบจะแสดง

ขอความ "Invalid Password and/or

User ID"

openLoginPage

inputLogin

getLogin()

query Login

return Login

3. ระบบรับคาขอมูล verifyLogin()

openMainPage

errorMessage

4.ระบบคนหาจากฐานขอมูล

8

ตัวอยางสถาปตยกรรมแบบเอ็มวีซีของการเขาสูระบบ (LOGIN)

จากนั้นเมื่อเลือกเทคโนโลยีที่ใชในระบบ นักออกแบบระบบจะตองสรางซีเควนซไดอาแกรมระดับ

การพัฒนาเพ่ือใหเขากับเทคโนโลยีที่เลือกใช ในที่นี้ไดแก เจเอสพี และเซิรฟเลต

• โมเดลซึ่งประกอบดวยแอททริบิวสทั้งหมด และเมธอดสําหรับ set และ get คาขอมูล

• วิว คือหนาจอ login.jsp

• คอนโทรลเลอร ประกอบดวยเซิรฟเลต และคลาสสําหรับจัดการขอมูล โดยเซิรฟเลตทําหนาที่

รับคาจากหนาจอเพ่ือติดตอกับคลาสจัดการขอมูล

9

LoginBean : Customer LoginServlet LoginManager : LoginDB : mainPage : loginPage

open loginPage

input logindoPost()

new LoginManager()new LoginBean()

setUsername()

setPassword()

isKnownVerifyLogin()

query login data

return login data

return result

[isKnown == true]

session.setAttribute()LoginBean

response.sendRedirect()

response.sendRedirect()

Login failed

10

คลาสไดอาแกรมระดับการพัฒนาของลอกอิน

1 1

2

2

11

หนาจอ LOGINPAGE.JSP

12

สรางคลาส LOGINBEAN สําหรับเปนโมเดล

package login;

public class LoginBean {

private String username ;

private String password;

public LoginBean() { }public void setUsername(String uname) { username = uname; }public void setPassword(String pwd) { password = pwd; }public String getUsername() { return username; }public String getPassword() { return password; }

}

13

คลาส LOGINMANAGER สาํหรับเปนคอนโทรลเลอร

package login;import java.sql.*;public class LoginManager {LoginBean loginbean = new LoginBean();public LoginManager(String uname, String pword) {

loginbean.setUsername(uname);loginbean.setPassword(pword);

}public LoginBean getLogin() { return loginbean; }public boolean VerifyLogin() {

boolean result = false;String url = "jdbc:odbc:lab9";Connection con;Statement stmt;try {

Class.forName("sun.jdbc.odbc.JdbcOdbcDriver");con = DriverManager.getConnection(url);

14

คลาส LOGINMANAGER สาํหรับเปนคอนโทรลเลอร

stmt = con.createStatement();String sql = "Select * From Login Where username = '" +

loginbean.getUsername() + "'";ResultSet rs = stmt.executeQuery(sql);if ((rs.next()) && rs.getString(2).equals(loginbean.getPassword()))) {

result = true; }

} catch (SQLException e) { System.out.println(e.getMessage()); }finally {

try { if (stmt != null) stmt.close();if (con != null) con.close();

} catch (SQLException e1) { System.out.println(e1.getMessage()); }}return result;

}}

15

สราง LOGINSERVLET สาํหรับรับคาจากหนาจอ

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

HttpSession session = request.getSession(true);String var0 = request.getParameter("username");if (var0 == null) {var0 = ""; }String var1 = request.getParameter("password");if (var1 == null) {var1 = ""; }

<!—เรยีกใชเ้มธอดในคลาส LoginManager เพือ่ตรวจสอบผูใ้ชแ้ละรหสัผา่น -->LoginManager loginmanager = new LoginManager(var0, var1);boolean isKnown = loginmanager.isVerify();if (isKnown == true) {

session.setAttribute("login",loginmanager.getLogin()); response.sendRedirect("mainPage.jsp");

} else {response.sendRedirect("loginPage.jsp");

}}

16

หนาจอ MAINPAGE.JSP

17