2 분 소요

안녕하세요. Nerd-Lee입니다.
공부 내용은, 인프런 박매일님의 [NarP Series]MVC 프레임워크는 내 손에[나프1탄] 을 참고하였습니다.
MVC 2단계인, Servlet이 아닌 JSP로 View를 제작하는 환경으로 만들어보고, MVC 3단계로 넘어가서
나중에는 Spring Framework를 사용하는 방식의 강의입니다.

진도가 빠르게 나가지 않아, 중요하다고 생각하는 부분들만 작성할 예정입니다.

JSP는 서블릿이다. 와, JSP를 서블릿으로 변경하기에 관련 된 부분은 중요하지 않다 생각하여 적지 않았습니다.

1. JSP안에, 왠만하면 JAVA로 만든 함수나 로직들은 Model로 빼자.

  • JSP안에, 데이터 처리 부분에 대한 JAVA로 만든 함수 또는 로직은 Model로 빼는 것이 일반적이다.
  • 그리고, MVC01 프로젝트에서 만들었던, member 폴더에 있던 memberRegister.html 파일을 복사해서
    MVC02 프로젝트에도, member 폴더에 넣거나 Member 폴더를 새로 만들고 html 파일을 만들어서 밑에 코드를 넣어주자.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
	href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
<script
	src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.slim.min.js"></script>
<script
	src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script
	src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
	회원가입 화면
	<form action="memberInsert.jsp" method="post">
		<table class="table table-bordered">
			<tr>
				<td>아이디</td>
				<td><input type="text" name="id" /></td>
			</tr>
			<tr>
				<td>패스워드</td>
				<td><input type="text" name="password" /></td>
			</tr>
			<tr>
				<td>이름</td>
				<td><input type="text" name="name" /></td>
			</tr>
			<tr>
				<td>나이</td>
				<td><input type="text" name="age" /></td>
			</tr>
			<tr>
				<td>이메일</td>
				<td><input type="text" name="email" /></td>
			</tr>
			<tr>
				<td>전화번호</td>
				<td><input type="text" name="phone" /></td>
			</tr>
			<tr>
				<td colspan="2" align="center">
					<input class="btn btn-primary" type="submit" value="가입" />
					<input class="btn btn-warning" type="reset" value="취소" />
				</td>
			</tr>
		</table>
	</form>
</body>
</html>
  • 그리고, Member 폴더에 memberInsert.jsp 파일을 만들어준다.
  • memberInsert.jsp 파일을 밑에 코드처럼 만들어주자.
<%@page import="model.MemberDAO"%>
<%@page import="model.MemberVO"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
	// 파라미터 수집(VO)
	request.setCharacterEncoding("utf-8");
	// 1. 클라이언트에서 넘어온 파라미터 수집(VO에 하나의 정보로 묶어서 넣어주면 된다.)
	String id = request.getParameter("id");
	String password = request.getParameter("password");
	String name = request.getParameter("name");
	int age = Integer.parseInt(request.getParameter("age"));
	String email = request.getParameter("email");
	String phone = request.getParameter("phone");

	// vo 수집은, 생성자로 해도 되고, Setter로 해도 된다.
	//MemberVO vo = new MemberVO(id, password, name, age, email, phone);
	MemberVO vo = new MemberVO();
	vo.setId(id);
	vo.setPassword(password);
	vo.setAge(age);
	vo.setName(name);
	vo.setEmail(email);
	vo.setPhone(phone);
	
	MemberDAO dao = new MemberDAO();
	int success = dao.memberInsert(vo);
	if(success > 0) {
		// 가입 성공시
		// out.println("insert success!");
		response.sendRedirect("memberList.jsp");
	}
	else {
		// 가입 실패시 예외객체를 만들어서 WAS(톰캣서버) 에게 던진다.
		throw new ServletException("not insert!");
	}
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

</body>
</html>
  • 그리고, memberList.jsp 파일을 만들어서, 밑에 코드처럼 만들어주자.
<%@page import="model.MemberVO"%>
<%@page import="java.util.ArrayList"%>
<%@page import="model.MemberDAO"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
	MemberDAO dao = new MemberDAO();
	ArrayList<MemberVO> list = dao.memberGetList();
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet"
	href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
<script
	src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.slim.min.js"></script>
<script
	src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script
	src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<table class="table table-bordered">
	<tr>
		<td>번호</td>
		<td>아이디</td>
		<td>패스워드</td>
		<td>이름</td>
		<td>나이</td>
		<td>이메일</td>
		<td>전화번호</td>
	</tr>
	<% for(MemberVO vo : list){ %>
		<tr>
			<td><%=vo.getNumber()%></td>
			<td><%=vo.getId()%></td>
			<td><%=vo.getPassword()%></td>
			<td><%=vo.getName()%></td>
			<td><%=vo.getAge()%></td>
			<td><%=vo.getEmail() %></td>
			<td><%=vo.getPhone() %></td>
		</tr>
		<% 	} %>
</table>
</body>
</html>

2. Controller용 jsp와 View용 jsp

  • memberInsert.jsp는, Controller 역할을 하는 jsp다. 클라이언트가 요청을 하면, memberInsert.jsp 로 가서
    DB에 접근을 해서 값을 저장한 다음, redirect를 통해 view로 넘어가게 된다.
  • memberList.jsp는, View 역할을 하는 jsp라고 생각하면 된다.
    데이터베이스에서 받아온 값을 출력만 해서 클라이언트에게 응답하기 때문이다.


이 글이 도움이 되셨다면 댓글 부탁드립니다^^
다음 글로 찾아오겠습니다!

참고