MVC 패턴의 Model1
모델 1은 뷰와 로직을 모두 JSP 페이지 하나에서 처리하는 구조이다.
이전 포스팅에서 MVC 패턴은 모델, 뷰, 컨트롤러 어플리케이션의 의존성을 줄이고 각각의 역할을 구분 지어 놓은 디자인 패턴이라고 했다. 하지만 이 모든걸 JSP 페이지 하나에 넣어버리면 다시 의존성을 가지게 되는 구조가된다.
아래는 Model1로 구현한 게시판 리스트를 불러오는 코드다.
코드를 보면 DB접속, DB 데이터 불러오기, DB데이터를 포함한 화면을 나타낸다.
<%@page import="java.sql.*"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script>
function updatewin(eid,fname,lname,email,pnum,jid){
$(this).click(function(){
$("td#"+eid).html("<input type=\"text\">");
$("td#"+fname).html("<input type=\"text\">");
$("td#"+lname).html("<input type=\"text\">");
$("td#"+email).html("<input type=\"text\">");
$("td#"+pnum).html("<input type=\"text\">");
$("td#"+jid).html("<input type=\"text\">");
$("button#"+jid).attr("href","update.jsp");
});
}
function openwin(id){
var url="detail.jsp?id="+id;
window.open(url,"상세정보",width=800,height=800,left=100,top=50)
}
function deletewin(id){
var url="delete.jsp?id="+id;
window.open(url,"상세정보",width=800,height=800,left=100,top=50)
}
</script>
<title>List</title>
<style>
table {
width: 100%;
border: 1px solid #444444;
}
th, td {
border: 1px solid #444444;
}
</style>
</head>
<body>
<h1>직원 리스트</h1>
<table>
<tr height="40" width="100%">
<th width="16%">직원번호</th>
<th width="16%">이름</th>
<th width="16%">성</th>
<th width="16%">이메일(패스워드)</th>
<th width="16%">전화번호</th>
<th width="16%">업무</th>
<th width="16%">상세보기</th>
<th width="16%">삭제</th>
<th width="16%">수정</th>
</tr>
</table>
<table>
<%
Connection conn=null;
PreparedStatement pstmt= null;
ResultSet rs=null;
request.setCharacterEncoding("utf-8");
String id=request.getParameter("id");
//out.println("id: "+id);
//out.println("pw: "+pw)
try{
Class.forName("oracle.jdbc.driver.OracleDriver");
String jdbcurl="jdbc:oracle:thin:@127.0.0.1:1521:XE";
conn=DriverManager.getConnection(jdbcurl, "user", "pw");
String sql="select * from EMPLOYEES ";
pstmt=conn.prepareStatement(sql);
rs=pstmt.executeQuery(sql);
while(rs.next()){
%>
<tr height="80" width="100%">
<td width="16%" id="<%=rs.getString("EMPLOYEE_ID") %>"> <%=rs.getString("EMPLOYEE_ID") %></td>
<td width="16%" id="<%=rs.getString("FIRST_NAME") %>"> <%=rs.getString("FIRST_NAME") %> </td>
<td width="16%" id="<%=rs.getString("LAST_NAME") %>"> <%=rs.getString("LAST_NAME") %> </td>
<td width="16%" id="<%=rs.getString("EMAIL") %>"> <%=rs.getString("EMAIL") %></td>
<td width="16%" id="<%=rs.getString("PHONE_NUMBER") %>"><%=rs.getString("PHONE_NUMBER") %></td>
<td width="16%" id="<%=rs.getString("JOB_ID") %>"> <%=rs.getString("JOB_ID") %></td>
<td width="16%"><button onclick="openwin(<%=rs.getString("EMPLOYEE_ID") %>)" id="<%=rs.getString("EMPLOYEE_ID")%>" value="상세보기">상세보기</button></td>
<td width="16%"><button onclick="deletewin(<%=rs.getString("EMPLOYEE_ID") %>)" value="삭제">삭제</button></td>
<td width="16%"><button onclick="updatewin( <%=rs.getString("EMPLOYEE_ID") %> , '<%=rs.getString("FIRST_NAME") %>' , '<%=rs.getString("LAST_NAME") %>', '<%=rs.getString("EMAIL") %>', '<%=rs.getString("PHON_NUMBER") %>', '<%=rs.getString("JOB_ID") %>')" id="<%=rs.getString("JOB_ID")%>" value="수정">수정</button></td>
</tr>
<%
}
}catch(Exception e) {
out.println("DB연동 안됨");
}
finally{
if(conn!=null){
try{
conn.close();
}
catch (SQLException sqle){
System.out.println(sqle.getMessage());
}
}
if(pstmt!=null){
try{
pstmt.close();
}
catch (SQLException sqle){
System.out.println(sqle.getMessage());
}
}
if(rs!=null){
try{
rs.close();
}
catch (SQLException sqle){
System.out.println(sqle.getMessage());
}
}
}
%>
</table>
</body>
</html>
MVC 패턴의 Model2
View는 jsp로만 만들고, Controller와 model는 class를 만들어 각각 객체로 구현한다.
View에서 요청이 들어오면 응답하는 controller를 지정해 주고, 그 컨트롤러가 Model에서 데이터를 가져와 jsp파일로 넘겨주게 된다. 그리고 view에 보여지게 된다.
Model 1의 jsp파일에 한방에 다 넣었던 코드를 나누기 위해서 Servlet이라는 것이 등장한다.
html 파일을 자바 머신에서는 읽을 수 없기 때문에 그 중간에 다리 역할 하는 것이 필요한데 그 역할을 하는것이 Servlet이다.