## 64. JSP를 이용하여 MVC 모델1 구조로 변경하기
- MVC 모델1 특징 이해
- JSP 구동 원리 이해 및 사용법
- EL 사용법
webapp > WEB-INF > web.xml
ㄴ web.xml 파일에 해당 설정 추가
ㄴ /member/add.jsp, /member/update.jsp 관련 설정 추가
ㄴ webapp 폴더에 member 라는 이름으로 폴더 추가
=>
ㄴ webapp/board/list.jsp 파일 복사
=>
ㄴ 생성한 member 폴더에 복사한 파일을 같은 이름으로 붙여넣은 후 수정
=>
/member/list.jsp
<%@ page
language="java"
pageEncoding="UTF-8"
contentType="text/html;charset=UTF-8"%> <%-- directive element --%>
<%@ page import="java.io.IOException"%>
<%@ page import="java.text.SimpleDateFormat"%>
<%@ page import="java.util.List"%>
<%@ page import="bitcamp.report.dao.MemberDao"%>
<%@ page import="bitcamp.report.vo.Member"%>
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<title>회원</title>
</head>
<body>
<jsp:include page="../header.jsp"/>
<h1>회원 목록</h1>
<div style='margin:5px;'>
<a href='/member/form.jsp'>새 회원</a>
</div>
<table border='1'>
<tr><th>번호</th> <th>이름</th> <th>전화번호</th></tr>
</thead>
<%
MemberDao memberDao = (MemberDao) this.getServletContext().getAttribute("memberDao");
List<Member> list = memberDao.findAll();
%>
<tbody>
<%
for (Member m : list) {
%>
<tr>
<td><%=m.getNo()%></td>
<td>
<img src='http://urnfabxxeceu19010753.cdn.ntruss.com/member/<%=m.getPhoto()%>?type=f&w=30&h=40&faceopt=true&ttype=jpg'>
<a href='/member/detail.jsp?no=<%=m.getNo()%>'><%=m.getName()%></a></td>
<td><%=m.getPhone()%></td></tr>
<%
}
%>
</tbody>
</table>
<a href='/'>메인</a>
<jsp:include page="../footer.jsp"/>
</body>
</html>
header.jsp
ㄴ /member/list -> /member/list.jsp 로 변경해주기
ㄴ webapp/board 에 있는 form.jsp 파일 복사
=>
ㄴ webapp/member 폴더에 같은 이름으로 붙여넣은 후 수정
=>
/member/form.jsp
<%@ page
language="java"
pageEncoding="UTF-8"
contentType="text/html;charset=UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<title>비트캠프</title>
</head>
<body>
<jsp:include page="../header.jsp"/>
<h1>회원</h1>
<form action='/member/add.jsp' method='post' enctype='multipart/form-data'>
<table border='1'>
<tr>
<th>이름</th> <td style='width:200px;'><input type='text' name='name'></td>
</tr>
<tr>
<th>전화번호</th> <td><input type='tel' name='phone'></td>
</tr>
<tr>
<th>암호</th> <td><input type='password' name='password'></td>
</tr>
<tr>
<th>직책</th>
<td>
<select name='position'>
<option value='0'>관리자</option>
<option value='1'>일반직원</option>
</select>
</td>
</tr>
<tr>
<th>사진</th> <td><input type='file' name='photo'></td>
</tr>
</table>
<button>등록</button>
</form>
<jsp:include page="../footer.jsp"/>
</body>
</html>=>
ㄴ App 실행
=>
ㄴ 회원 > [새글] 선택 시 회원 폼을 띄움을 확인
ㄴ webapp/board 폴더의 detail.jsp 파일 복사
=>
ㄴ webapp/member 폴더에 복사한 파일을 같은 이름으로 붙여넣은 후 수정
=>
webapp > member > detail.jsp
ㄴ 해당 코드는 아래처럼 변경함
=>
webapp > member > detail.jsp
ㄴ 자바 코드에서 jsp 코드로 변경
=>
webapp > member > detail.jsp
<%@ page
language="java"
pageEncoding="UTF-8"
contentType="text/html;charset=UTF-8"
trimDirectiveWhitespaces="true"%>
<%@ page import="java.io.IOException"%>
<%@ page import="bitcamp.report.dao.MemberDao"%>
<%@ page import="bitcamp.report.vo.Member"%>
<%@ page import="org.apache.ibatis.session.SqlSessionFactory"%>
<%
MemberDao memberDao = (MemberDao) this.getServletContext().getAttribute("memberDao");
Member member = memberDao.findBy(Integer.parseInt(request.getParameter("no")));
%>
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<title>회원</title>
</head>
<body>
<jsp:include page="../header.jsp"/>
<h1>회원</h1>
<%
if (member == null) {
%>
<p>해당 번호의 회원이 없습니다!</p>
<%
} else {
%>
<form action='/member/update.jsp' method='post' enctype='multipart/form-data'>
<table border='1'>
<tr><th style='width:120px;'>사진</th>
<td style='width:300px;'><%=
member.getPhoto() == null ? "<img style='height:80px' src='/images/avatar.png'>" :
String.format("<a href='https://kr.object.ncloudstorage.com/bitcamp-nc7-bucket-25/member/%s'>"
+ "<img src='http://urnfabxxeceu19010753.cdn.ntruss.com/member/%1$s?type=f&w=60&h=80&faceopt=true&ttype=jpg'>"
+ "</a>", member.getPhoto())%>
<input type='file' name='photo'></td></tr>
<tr>
<th style='width:120px;'>번호</th>
<td style='width:300px;'><input type='text' name='no' value='<%=member.getNo()%>' readonly></td></tr>
<tr>
<th>이름</th>
<td><input type='text' name='name' value='<%=member.getName()%>'></td></tr>
<tr>
<th>전화번호</th>
<td><input type='tel' name='phone' value='<%=member.getPhone()%>'></td></tr>
<tr>
<th>암호</th>
<td><input type='password' name='password'></td></tr>
<tr>
<th>직책</th>
<td><select name='position'>
<option value='0' <%=member.getPosition() == '0' ? "selected" : ""%>>관리자</option>
<option value='1' <%=member.getPosition() == '1' ? "selected" : ""%>>일반직원</option></select></td></tr>
</table>
<div>
<button>변경</button>
<button type='reset'>초기화</button>
<a href='/member/delete.jsp?no=<%=member.getNo()%>'>삭제</a>
<a href='/member/list.jsp'>목록</a>
</div>
</form>
<%
}
%>
<jsp:include page="../footer.jsp"/>
</body>
</html>=>
ㄴ 상세보기 정상적으로 실행됨을 확인
ㄴ webapp/board/update.java 파일 복사하기
=>
ㄴ webapp/member 폴더에 같은 이름으로 복사한 파일 붙여넣기
=>
webapp > member > update.java
<%@ page
language="java"
pageEncoding="UTF-8"
contentType="text/html;charset=UTF-8"
trimDirectiveWhitespaces="true"
errorPage="/error.jsp"%>
<%@ page import="bitcamp.report.dao.MemberDao"%>
<%@ page import="bitcamp.report.vo.Member"%>
<%@ page import="org.apache.ibatis.session.SqlSessionFactory"%>
<%@ page import="bitcamp.util.NcpObjectStorageService"%>
<%
request.setAttribute("refresh", "2;url=list.jsp");
Member member = new Member();
member.setNo(Integer.parseInt(request.getParameter("no")));
member.setName(request.getParameter("name"));
member.setPhone(request.getParameter("phone"));
member.setPassword(request.getParameter("password"));
member.setPosition(request.getParameter("position").charAt(0));
MemberDao memberDao = (MemberDao) this.getServletContext().getAttribute("memberDao");
SqlSessionFactory sqlSessionFactory = (SqlSessionFactory) this.getServletContext().getAttribute("sqlSessionFactory");
NcpObjectStorageService ncpObjectStorageService = (NcpObjectStorageService) this.getServletContext().getAttribute("ncpObjectStorageService");
Part photoPart = request.getPart("photo");
if (photoPart.getSize() > 0) {
String uploadFileUrl = ncpObjectStorageService
.uploadFile("bitcamp-nc7-bucket-25", "member/", photoPart);
member.setPhoto(uploadFileUrl);
}
if (memberDao.update(member) == 0) {
throw new Exception("회원이 없습니다.");
} else {
sqlSessionFactory.openSession(false).commit();
response.sendRedirect("list.jsp");
}
%>=>
=>
ㄴ 내용 변경
=>
=>
ㄴ 정상적으로 변경됨을 확인
ㄴ webapp/board/add.jsp 파일 복사하기
=>
ㄴ webapp/member 폴더에 같은 이름으로 복사한 파일 붙여넣기
=>
webapp > member > add.jsp
<%@ page
language="java"
pageEncoding="UTF-8"
contentType="text/html;charset=UTF-8"
trimDirectiveWhitespaces="true"
errorPage="/error.jsp"%>
<%@ page import="bitcamp.report.dao.MemberDao"%>
<%@ page import="bitcamp.report.vo.Member"%>
<%@ page import="bitcamp.util.NcpObjectStorageService"%>
<%@ page import="org.apache.ibatis.session.SqlSessionFactory"%>
<%
request.setAttribute("refresh", "2;url=list.jsp");
MemberDao memberDao = (MemberDao) this.getServletContext().getAttribute("memberDao");
SqlSessionFactory sqlSessionFactory = (SqlSessionFactory) this.getServletContext().getAttribute("sqlSessionFactory");
NcpObjectStorageService ncpObjectStorageService = (NcpObjectStorageService) this.getServletContext().getAttribute("ncpObjectStorageService");
Member m = new Member();
m.setName(request.getParameter("name"));
m.setPhone(request.getParameter("phone"));
m.setPassword(request.getParameter("password"));
m.setPosition(request.getParameter("position").charAt(0));
Part photoPart = request.getPart("photo");
if (photoPart.getSize() > 0) {
String uploadFileUrl = ncpObjectStorageService.uploadFile(
"bitcamp-nc7-bucket-25", "member/", photoPart);
m.setPhoto(uploadFileUrl);
}
memberDao.insert(m);
sqlSessionFactory.openSession(false).commit();
response.sendRedirect("list.jsp");
%>=>
=>
ㄴ 정상적으로 추가됨을 확인
ㄴ webapp/board/delete.jsp 파일 복사하기
=>
ㄴ webapp/member 폴더에 같은 이름으로 복사한 파일 붙여넣기
=>
webapp > member > delete.jsp
<%@ page
language="java"
pageEncoding="UTF-8"
contentType="text/html;charset=UTF-8"
trimDirectiveWhitespaces="true"
errorPage="/error.jsp"%>
<%@ page import="bitcamp.report.dao.MemberDao"%>
<%@ page import="bitcamp.report.vo.Member"%>
<%@ page import="org.apache.ibatis.session.SqlSessionFactory"%>
<%
request.setAttribute("refresh", "2;url=list.jsp");
MemberDao memberDao = (MemberDao) this.getServletContext().getAttribute("memberDao");
SqlSessionFactory sqlSessionFactory = (SqlSessionFactory) this.getServletContext().getAttribute("sqlSessionFactory");
if (memberDao.delete(Integer.parseInt(request.getParameter("no"))) == 0) {
throw new Exception("해당 번호의 회원이 없습니다!");
} else {
sqlSessionFactory.openSession(false).commit();
response.sendRedirect("/member/list.jsp");
}
%>=>
=>
ㄴ 정상적으로 삭제됨을 확인
ㄴ MemberXxxServlet 모두 삭제