mvc - ttime.in.th - mvc.pdf · 3 controller (servlet) database view (jsp) model (dao &...
TRANSCRIPT
ธระยทธ ทองเครอ
MVC
Model-View-Controller
สถาปตยกรรม MVCMVC คอ รปแบบการสรางแอปพลเคชนทแบงสวนการท างานออกเปน 3 สวน
Controller ตวกลางในการรบ-สงขอมลระหวางสวน View และสวน Model Model ประมวลผล Business Logic เชน การประมวลผลกบฐานขอมล ปรบปรง
แกไข เพม หรอดงขอมล ผลลพธจาก Model มกจะเปนขอมลทจะสงไปใหสวน View แสดงผล
View คอ ชดค าสงส าหรบ Render หนา Interface กบผใช โดยใชขอมลจาก Model
เปาหมายของ MVC การแบงสวนการท างานของระบบอยางชดเจน งายตอการท างานเปนทม งายตอการ maintenance ในอนาคต
2
3
Controller(Servlet)
DatabaseView(JSP)
Model(DAO &
JavaBeans)
Client
Server
JavaBeans
Request
JavaBeans
สถาปตยกรรม MVC
1
2
34
567
การสงตอ response ไปยง URL อนแบบอตโนมตแบบ Redirect คอ การสง URL ทตองการ กลบไปยง browser เพอให
browser สง request กลบมายง URL ทก าหนด
แบบ Request Dispatch คอ การสง Object HttpServletRequest และ HttpServletResponse ไปยงอก URL หนงซงอยบน Web Container เดยวกนใหประมวลผลตอ วธนใชสงภายใน server เดยวกน ท าใหผใชยงคงเหน URL เดมบน
Browser
4
การสงตอแบบ Redirect
5
protected void doGet(HttpServletRequest request, HttpServletResponse response) {
/*** ประมวลผลตาม request ทสงเขามา**/
// เมอท างานเสรจให redirect ไปยงหนา slide.html อตโนมตresponse.sendRedirect("foo/slide.html");
}
ขนตอนการสงตอแบบ Redirect
6
client พมพ URL หรอ submit formมายง Servlet browser สง request ไปยง web server
servlet เรยกเมธอด sendRedirect( )
servlet ท างานเสรจ และตดสนใจวาจะไปท URL ใดตอ
สงสถานะ 301 กลบ และสง URL ทระบในเมธอด sendRedirect( ) แนบไปกบ header response
เมอ browser รวาเปนสถานะ 301 จะอาน URL ในสวน Location
ขนตอนการสงตอแบบ Redirect
7
browser สง request ไปยง URL ใหมผใชจะเหน URL ใหมบน browser
server ดงไฟลตาม request ทสงมา
server สง response กลบbrowser รบขอมลมา render หนาเวบใหม
request ถกสงไปยง URL ใหม
การสงตอแบบ Request Dispatch
8
protected void doGet(HttpServletRequest request, HttpServletResponse response) {
/*** ประมวลผลตาม request ทสงเขามา**/
// เมอท างานเสรจใหไปยง servlet หรอ JSP ตาม path ทระบอตโนมตRequestDispatcher view = request.getRequestDispatcher("/nextServlet");view.forward(request,response);
}
ขนตอนการสงตอแบบ Request Dispatch
9
client พมพ URL หรอ submit form มายง Servlet
request ถกสงไปยง web server
servlet ท างานเสรจ และตดสนใจวาจะไปท URL ใดตอ
RequestDispatcher view = request.getRequestDispatcher("result.jsp");view.forward(request,response);
servlet สงตอโดยมรปแบบการเรยกดงนbrowser ไดรบ response มาแสดงผล โดยท URL ทผใชเรยกยงเปน URL เดม
การฝากขอมลไปกบ request objectServlet/JSP สามารถสงตอ object ไปยงไฟล Servlet/JSP อนๆ ได ขนตอนดงน ก าหนดชอ และขอมลทตองการสง
request.setAttribute("ชอ attribute", ตวแปรหรอคาสงตอ); เชนrequest.setAttribute("fullname", "tjung");
ใชค าสงสงตอrequest.getRequestDispatcher("ชอ Servlet/JSP").forward(request,response);
ดงขอมลทสงตอมาใชrequest.getAttribute("ชอ attribute"); เชน
String fullname = (String)request.getAttribute("fullname");
10
ตวอยาง
11
@WebServlet("/TestController")public class TestController extends HttpServlet {
protected void doGet(…) {request.setAttribute("fullname", "tjung");request.getRequestDispatcher("next-page.jsp").forward(request,response);
}}
Servlet
JSP (next-page.jsp) <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%><html><head><meta charset="utf-8"></head><body><% String fullname = (String)request.getAttribute("fullname"); %><%= fullname %></body></html>
ผลลพธ สงเกตวา URL จะไมเปลยนไปยง next-page.jsp
ระบบแนะน าเครองดม
12
ฟอรม HTML ทจะสงไปยง Controller
ผลลพธทสรางจาก View
ระบบแนะน าเครองดม
13
Controller(BeerController)
View(result.jsp)
Model(BeerExpert)
Client
Server
brands
HTTP Requestcolor=amber
brandscolor=amber
Sequence Diagram ระบบแนะน าเครองดม
14
ฟอรมส าหรบสงขอมล
15
<html><body>
<form action="Select">Select beer characteristics<br>Color: <select name="color">
<option value="light">light</option><option value="amber">amber</option><option value="brown">brown</option><option value="dark">dark</option>
</select><input type="submit">
</form></body></html>
ชอ Servlet ทรบ request
สวน Controller (Servlet)
16
@WebServlet("/Select")public class BeerController extends HttpServlet {
void doGet(HttpServletRequest request, HttpServletResponse response){String color = request.getParameter("color");
// สวน ModelBeerModel beerModel = new BeerModel();ArrayList<String> brands = beerModel.recommend(color);
request.setAttribute("brandList", brands);
// สงไปยงสวน Viewrequest.getRequestDispatcher("result.jsp").forward(request, response);
}
}
ดงขอมลจาก request object
สราง BeerExpert objectและสงสทผใชเลอก เพอขอขอมล
สง request และ response ไป render การแสดงผลในสวน View (JSP)เปนการสงแบบแบบ Request Dispatch(การสงตอ request ไมสามารถใชวธ Send Redirect ได)
น าผลลพธเกบไวใน request object
สวน Model
17
import java.util.ArrayList;
public class BeerModel {
public ArrayList<String> recommend(String color) {
ArrayList<String> brands = new ArrayList<String>();
if (color.equals("amber")) {brands.add("Singha");brands.add("Asahi");
} else {brands.add("Carlsberg");brands.add("Heineken");brands.add("Tiger");
}return brands;
}
}
สราง object ส าหรบเกบผลลพธ
ตรวจสอบเงอนไขเพอเกบขอมลลงใน object
เพมขอมล String ลงใน ArrayList object
สง ArrayList object กลบ
สวน View (result.jsp)
18
<%@page import="java.util.ArrayList"%><html><body>
<h2>Beer Recommendation</h2>
<%ArrayList<?> brandList = (ArrayList<?>)request.getAttribute("brandList");
for(int i=0; i<brandList.size(); i++) {out.println(brandList.get(i) + "<br>");
}
%>
</body></html>
ดงผลลพธจาก request object
วนลปน า String จาก ArrayListมาสรางเปนผลลพธ HTML
ภาพรวมโคด
19
C
V
MOutput
MVC กบสญลกษณใน UML
20
(view) (model) (controller)
กจกรรมจงสรางเวบส าหรบบวกเลขตามรปแบบของ MVC โดยสง request ใหกบ Controller
2 คา ไดแก x1 และ x2 หลงจากนนใหสวน Model เปนผประมวลผล และสรางไฟล JSP ส าหรบน าผลลพธไปแสดงบนหนาเวบ
21
Note AppNote App คอ เวบแอปพลเคชนส าหรบจดการขอมลงานทตองท าในแตละ
วน การท างานหลกแสดงดง usecase diagram
22
ตวอยางหนาจอ
Usecase Diagram
การพฒนา
สราง DAO ทมเมธอดจดการฐานขอมล
สราง Controller ก าหนดรปแบบการรบขอมล เพอสงตอไปยง Model หรอ DAO
ออกแบบสวนแสดงผล (View)
23
การพฒนาสวน Modelสรางฐานขอมลและตาราง note ตามโครงสรางทก าหนด
สรางคลาส NoteDAO ทมเมธอดจดการฐานขอมล อาจเรมตนทเมธอด SELECT ขอมลกอน ทดสอบการท างานของเมธอด อาจเขยนฟงกชน main( ) เพอทดสอบบน Console กอน
สรางคลาส JavaBeans เพอใชบรรจขอมล ก าหนดชนดและชอ attribute ใหตรงกบโครงสรางของตาราง
24
ชอฟลด ค าอธบาย ชนดขอมล หมายเหตnote_id รหสโนตงาน INT คยหลก แบบเพมคาอตโนมตnote_detail ชองานทตองท า VARCHAR(100)
ตวอยางคลาส JavaBeans
25
Note- noteId: int- noteDetail: String
+ getNoteId( ): int+ setNoteId(int): void+ getNoteDetail( ): String+ setNoteDetail(String): void
public class Note {private int noteId;private String noteDetail;
public int getNoteId() {return noteId;
}
public void setNoteId(int noteId) {this.noteId = noteId;
}
public String getNoteDetail() {return noteDetail;
}
public void setNoteDetail(String noteDetail) {this.noteDetail = noteDetail;
}
}
การพฒนาสวน Controllerสราง Servlet ใหมทรองรบการท างานในแตละ usecase ListNoteController - ใชควบคมการดงรายการ note AddNoteController - ใชรบขอมล note ทจะเพม DeleteNoteController - ใชรบรหส note ทตองการลบ
แตละ Controller เมอมการรบขอมลแลวจะสงตอไปท างานในสวนของ Model ทไดสรางไว และเมอ Model ใหขอมลใดๆ จะเกบลง request object เพอสงตอไปแสดงผลทสวน View
26
การพฒนาสวน Viewสรางเวบเพจดวย JSP โดยจดรปแบบดวย HTML (main.jsp)
ขอมลทจะแสดงผลจะดงจาก request object โดยใชเมธอด getAttribute( ) แทรก link ส าหรบลบ note โดยสงไปยง DeleteNoteController
สราง <form> เพมขอมลในสวนลาง โดยสงไปเพมท AddNoteController
27
Sequence Diagram ของ Usecase แสดงรายการ note
28
โคดของ Usecase แสดงรายการ note
CV
M JavaBean
Output
กจกรรมจงพฒนาสวนการลบ Note ดง Sequence Diagram ขางตน โดยพฒนา
สวนตางๆ เพมเตมดงน ปรบปรงหนา main.jsp โดยสราง link ส าหรบสง note_id มายง
controller สราง DeleteNoteController เพอรบค ารองรหส Note ทตองการลบ สรางเมธอดเพมเตมใน NoteDAO เพอประมวลผลกบฐานขอมลใหสามารถลบขอมลได
จงพฒนาสวนเพม Note
30
Sequence Diagram ของ Usecase ลบ Note
31
Sequence Diagram ของ Usecase เพม Note
32
ระบบจดการขอมลสนคา BlueShop
33
Use case Diagram ตวอยางหนาจอของระบบ
กจกรรมสรางสวนคนหาขอมลสนคา โดยสรางตามสถาปตยกรรมม MVC ทประกอบดวย
View สรางไฟล product.jsp ท าหนาทสงค าคนไปยง Controller และแสดงผลลพธจากการคนหา
Controller สราง Servlet ชอ SearchController รบค าทตองการคนหาสงไปใหสวน Model
Model สราง ProductDAO เพอใชประมวลผลคนหาขอมลสนคาจากฐานขอมล
ใชฐานขอมล blueshop เดม
34
Sequence Diagram คนหาสนคา
35