반응형

# MVC03_06 Basic MVC 완성 (Controller와 View연동 핵심)

## 회원 리스트

### MemberListController

  • memberList.do
package kr.bit.controller;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;

import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import kr.bit.model.MemberDAO;
import kr.bit.model.MemberVO;

@WebServlet("/memberList.do")
public class MemberListController extends HttpServlet {
	protected void service(HttpServletRequest request, HttpServletResponse response) 
							throws ServletException, IOException {
		// 1. 클라이언트 요청 받기 (memberList.do)
		MemberDAO dao = new MemberDAO();
		
		// 2. 회원 전체 리스트 가져오기(Model 연동)
		ArrayList<MemberVO> list = dao.memberList();
		
		// 3. JSP에 값을 전달하기 위한 객체 바인딩(request 바인딩)
		request.setAttribute("list", list);
		
		// forward 기법
		RequestDispatcher rd = request.getRequestDispatcher("member/meberList.jsp");
		rd.forward(request, response);
	}
}

### memberList.jsp

  • MVC03 > WebContent > member 에 memberList.jsp 생성
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="kr.bit.model.*" %>
<%@ page import="java.util.*" %>
<%
	ArrayList<MemberVO> list = (ArrayList<MemberVO>) request.getAttribute("list");
%>
<!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://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css'>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js'></script>
<script>
	function deleteFn(num) {
		location.href="memberDelete.do?num=" + num;
	}
</script>
</head>
<body>
[MVC03 예제 - Controller + View]
<table class="table table-bordered">
	<tr>
		<td>번호</td>
		<td>아이디</td>
		<td>비밀번호</td>
		<td>이름</td>
		<td>나이</td>
		<td>이메일</td>
		<td>전화번호</td>
		<td>삭제</td>
	</tr>
	<%
		for (MemberVO vo : list) {
	%>		
		<tr>
			<td><%=vo.getNum() %></td>
			<td><a href="memberContent.do?num=<%=vo.getNum()%>"><%=vo.getId() %></a></td>
			<td><%=vo.getPass() %></td>
			<td><%=vo.getName() %></td>
			<td><%=vo.getAge() %></td>
			<td><%=vo.getEmail() %></td>
			<td><%=vo.getPhone() %></td>
			<td><input type="button" value="삭제" class="btn btn-warning" onclick="deleteFn(<%=vo.getNum() %>)" /></td>
		</tr>
	<%	
		}
	%>
	<tr>
		<td colspan="8" align="right"><input type="button" value="회원가입" class="btn btn-primary" onclick="location.href='member/memberRegister.html'"/></td>
	</tr>
</table>
</body>
</html>

## 회원 가입 

### MemberInsertController

  • memberInsert.do
package kr.bit.controller;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import kr.bit.model.MemberDAO;
import kr.bit.model.MemberVO;

@WebServlet("/memberInsert.do")
public class MemberInsertController extends HttpServlet {
	protected void service(HttpServletRequest request, HttpServletResponse response) 
							throws ServletException, IOException {
		
		request.setCharacterEncoding("utf-8");
		// 1. 파라미터 수집(VO)
		String id = request.getParameter("id");
		String pass = request.getParameter("pass");
		String name = request.getParameter("name");
		int age = Integer.parseInt(request.getParameter("age"));
		String email = request.getParameter("email");
		String phone = request.getParameter("phone");
		
		// 파라미터 수집(VO)
		// MemberVO vo = new MemberVO(id, pass, name, age, email, phone);
		MemberVO vo = new MemberVO();		
		vo.setId(id);
		vo.setPass(pass);
		vo.setName(name);
		vo.setAge(age);
		vo.setEmail(email);
		vo.setPhone(phone);
		
		//System.out.println("vo : " + vo);	// vo.toString() 이 생략되어있는 것.
		// Model과 연동하는 부분
		MemberDAO dao = new MemberDAO();
		int cnt = dao.memberInsert(vo);
		PrintWriter out = response.getWriter();
		// 가입 성공
		if ( cnt > 0 ) {
			//out.println("insert success");	
			// 다시 회원 리스트 보기로 가야함.
			response.sendRedirect("/MVC03/memberList.do");
			
		// 가입 실패 -> 예외 객체를 만들어서 WAS에게 던지자.
		} else {
			throw new ServletException("not insert");
			
		}
	}
}

### memberRegister.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>신규 회원 가입</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<h1>회원가입화면</h1>
<form action="/MVC03/memberInsert.do" method="POST" >
	<table class="table table-bordered">
	  <tr>
	    <td>아이디</td>
	    <th><input type="text" name="id" /></th>
	  </tr>
	  <tr>
	    <td>패스워드</td>
	    <th><input type="password" name="pass" /></th>
	  </tr>
	  <tr>
	    <td>이름</td>
	    <th><input type="text" name="name" /></th>
	  </tr>
	  <tr>
	    <td>나이</td>
	    <th><input type="text" name="age" /></th>
	  </tr>
	  <tr>
	    <td>이메일</td>
	    <th><input type="text" name="email" /></th>
	  </tr>
	  <tr>
	    <td>전화번호</td>
	    <th><input type="text" name="phone" /></th>
	  </tr>
	  <tr>
	    <td colspan="2" align="center">
	    	<input type="submit" value="가입" class="btn btn-primary"/>
			<input type="reset" value="취소" class="btn btn-warning"/>
	    </td>
	  </tr>
	</table>
</form>
</body>
</html>

## 회원 삭제

### MemberDeleteController

  • memberDelete.do
package kr.bit.controller;

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import kr.bit.model.MemberDAO;

@WebServlet("/memberDelete.do")
public class MemberDeleteController extends HttpServlet {
	protected void service(HttpServletRequest request, HttpServletResponse response) 
							throws ServletException, IOException {
		int num = Integer.parseInt(request.getParameter("num"));
		
		MemberDAO dao = new MemberDAO();
		
		int cnt = dao.memberDelete(num);
		
		if (cnt > 0) {
			response.sendRedirect("/MVC03/memberList.do");
		} else {
			throw new ServletException("not delete");
		}
	}
}

 

## 회원 상세보기

### MemberContentController

  • memberContent.do
package kr.bit.controller;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import kr.bit.model.MemberDAO;
import kr.bit.model.MemberVO;

@WebServlet("/memberContent.do")
public class MemberContentController extends HttpServlet {
	protected void service(HttpServletRequest request, HttpServletResponse response)
							throws ServletException, IOException {
		int num = Integer.parseInt(request.getParameter("num"));
		
		MemberDAO dao = new MemberDAO();
		
		MemberVO vo = dao.memberContent(num);
		
		// 객체 바인딩
		request.setAttribute("vo", vo);
		
		RequestDispatcher rd = request.getRequestDispatcher("member/memberContent.jsp");
		rd.forward(request, response);
	}

}

### memberContent.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="kr.bit.model.*" %>
<%
	MemberVO vo = (MemberVO)request.getAttribute("vo");
%>    
<!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://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css'>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js'></script>
</head>
<body>
<form action="memberUpdate.do" method="post">
<input type="hidden" name="num" value="<%=vo.getNum() %>"/>
	<table border="1" class="table table-bordered">
	<% if (vo != null) { %>
		<tr>
			<td colspan="2"><%=vo.getName() %> 회원의 상세보기</td>
		</tr>
		<tr>
			<td>번호</td>
			<td><%=vo.getNum() %></td>
		</tr>
		<tr>
			<td>아이디</td>
			<td><%=vo.getId() %></td>
		</tr>
		<tr>
			<td>비밀번호</td>
			<td><%=vo.getPass() %></td>
		</tr>
		<tr>
			<td>이름</td>
			<td><%=vo.getName() %></td>
		</tr>
		<tr>
			<td>나이</td>
			<td><input type="text" name="age" value="<%=vo.getAge() %>" /></td>
		</tr>
		<tr>
			<td>이메일</td>
			<td><input type="text" name="email" value="<%=vo.getEmail() %>" /></td>
		</tr>
		<tr>
			<td>전화번호</td>
			<td><input type="text" name="phone" value="<%=vo.getPhone() %>" /></td>
		</tr>
	<% } else { %>
		<tr>
			<td>일치하는 회원이 없습니다.</td>
		</tr>
	<% } %>
		<tr>
			<td colspan="2" align="center">
				<input type="submit" value="수정하기" class="btn btn-primary" />
				<input type="reset" value="취소" class="btn btn-warning" />
				<input type="button" value="리스트" onclick="location.href='/MVC03/memberList.do'" class="btn" />
			</td>
		</tr>
	</table>
</form>
</body>
</html>

## 회원정보 수정

### MemberUpdateController

  • memberUpdate.do
package kr.bit.controller;

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import kr.bit.model.MemberDAO;
import kr.bit.model.MemberVO;

@WebServlet("/memberUpdate.do")
public class MemberUpdateController extends HttpServlet {
	protected void service(HttpServletRequest request, HttpServletResponse response) 
							throws ServletException, IOException {
		request.setCharacterEncoding("utf-8");
		// 1. 파라미터 수집(VO)
		int num = Integer.parseInt(request.getParameter("num"));
		int age = Integer.parseInt(request.getParameter("age"));
		String email = request.getParameter("email");
		String phone = request.getParameter("phone");
	
		MemberVO vo = new MemberVO();
		vo.setNum(num);
		vo.setAge(age);
		vo.setEmail(email);
		vo.setPhone(phone);
	
		MemberDAO dao = new MemberDAO();
		
		int cnt = dao.memberUpdate(vo);
		
		if (cnt > 0) {
			response.sendRedirect("/MVC03/memberList.do");
		} else {
			throw new ServletException("not update");
		}
	}

}

### memberUpdate.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="kr.bit.model.*" %>
<%
	int num = Integer.parseInt(request.getParameter("num"));
	int age = Integer.parseInt(request.getParameter("age"));
	String email = request.getParameter("email");
	String phone = request.getParameter("phone");

	MemberVO vo = new MemberVO();
	vo.setNum(num);
	vo.setAge(age);
	vo.setEmail(email);
	vo.setPhone(phone);
	
	MemberDAO dao = new MemberDAO();
	
	int cnt = dao.memberUpdate(vo);
	
	if (cnt > 0) {
		response.sendRedirect("/MVC03/memberList.do");
	} else {
		throw new ServletException("not update");
	}
%>   

 

반응형
반응형

# MVC03_04 redirect 기법을 이용한 페이지 전환 및 데이터 전달 방법

  • Controller > View 로 페이지를 전환하는 방법에는 redirect 와 forward 가 존재한다.

## 패키지 생성

  • 프로젝트 > src 우 클릭 > New > 패키지 > kr.bit.forward 이름의 패키지 생성

## Servlet 생성

  • kr.bit.forward 패키지 우 클릭 > New > Servlet 클릭 
  • Servlet 이름은 RedirectController > Next > mapping 이름은 /fc.do 후 Next > Service 만 체크 후 Finish

## JSP 생성

  • 프로젝트 > WebContent 우 클릭 > New > view 이름의 폴더 생성
  • view 폴더 우 클릭 > New > result 이름의 JSP File 생성

## 실습_1

  • Controller 에서 View(JSP)로 request.setAttribute 객체 바인딩을 이용 후 reponse.sendRedirect 할 경우.
  • Controller는 아래와 같다.
package kr.bit.forward;

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

@WebServlet("/rc.do")
public class RedirectController extends HttpServlet {
	protected void service(HttpServletRequest request, HttpServletResponse response) 
						throws ServletException, IOException {
	
		String data = "apple";
		
		// View page(result.jsp)로 data 전달하여 View page에서 출력
		
		// Controller > View 로 페이지를 전환하는 방법
		// redirect
		request.setAttribute("data", data);		// 객체 바인딩
		response.sendRedirect("view/result.jsp");
		
	}
}
  • JSP는 아래와 같다.
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
	String data = (String)request.getAttribute("data");
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	Controller에서 받은 값 출력 : <%=data%>
</body>
</html>
  • 이렇게 하게 되면 객체 바인딩은 되었지만, 페이지를 변경할 때 sendRedirect를 이용하기 때문에 기존의 request, response가 없어지고 다시 브라우저에서 새롭게 JSP가 요청되기 때문에 JSP에서 만들어지는 request, response는 새로운 값으로 기존에 저장된 값을 읽어올 수 없다.

## 실습_2 : get방식=queryString

  • get방식=queryString 이용한 방식
  • Controller은 아래와 같다.
package kr.bit.forward;

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

@WebServlet("/rc.do")
public class RedirectController extends HttpServlet {
	protected void service(HttpServletRequest request, HttpServletResponse response) 
						throws ServletException, IOException {
	
		String data = "apple";
		
		// View page(result.jsp)로 data 전달하여 View page에서 출력
		
		// Controller > View 로 페이지를 전환하는 방법
		// redirect
		response.sendRedirect("view/result.jsp?data=" + data);
		
	}
}
  • JSP는 아래와 같다.
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
	//String data = (String)request.getAttribute("data");
	String data = request.getParameter("data");
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	Controller에서 받은 값 출력 : <%=data%>
</body>
</html>
  • 이땐 정상적으로 data 값이 출력되지만, 아래와 같이 여러개의 정보를 넘기게 되면 복잡해진다.
package kr.bit.forward;

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

@WebServlet("/rc.do")
public class RedirectController extends HttpServlet {
	protected void service(HttpServletRequest request, HttpServletResponse response) 
						throws ServletException, IOException {
	
		String data = "apple";
		int age = 45;
		String email="aaa@naver.com";
		// View page(result.jsp)로 data 전달하여 View page에서 출력
		
		// Controller > View 로 페이지를 전환하는 방법
		// redirect
		response.sendRedirect("view/result.jsp?data=" + data + "&age=" + age + "&email=" + email);
		
	}
}

 

# MVC03_05 forward 기법을 이용한 페이지 전환 및 데이터 전달 방법

## Servlet 생성

  • kr.bit.forward 패키지 우 클릭 > New > Servlet 클릭 
  • Servlet 이름은 ForwardController > Next > mapping 이름은 /fc.do 후 Next > Service 만 체크 후 Finish

## JSP 생성

  • 프로젝트 > WebContent 우 클릭 > New > view 이름의 폴더 생성
  • view 폴더 우 클릭 > New > forward 이름의 JSP File 생성

## 실습

  • 객체 바인딩과 forward 이용
  • Controller는 아래와 같다.
package kr.bit.forward;

import java.io.IOException;

import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import kr.bit.model.MemberVO;

@WebServlet("/fc.do")
public class ForwardController extends HttpServlet {
	protected void service(HttpServletRequest request, HttpServletResponse response) 
						throws ServletException, IOException {
		String name = "park";
		int age = 45;
		String email = "aaaa@gmail.com";
		
		// vo 이용 데이터 담기
		MemberVO vo = new MemberVO();
		vo.setName(name);
		vo.setAge(age);
		vo.setEmail(email);
		
		// 객체 바인딩
		request.setAttribute("vo", vo);
		
		// forward.jsp		
		RequestDispatcher rd = request.getRequestDispatcher("view/forward.jsp");
		rd.forward(request, response);
	}

}
  • JSP는 아래와 같다.
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="kr.bit.model.*" %>
<%
	MemberVO vo = (MemberVO)request.getAttribute("vo");    
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	Controller에서 받은 데이터 출력
	이름 : <%=vo.getName() %>
	나이 : <%=vo.getAge() %>
	이메일 : <%=vo.getEmail() %>
</body>
</html>
  • 결과물

반응형
반응형

# MVC03_01 ~ 03 MVC03(Model2 방식)개요, 포워드(forward) 기법, 요청의뢰와 객체 바인딩

# MVC03_01 MVC03(Model2 방식)개요

## 학습 예정

  • RequestDispatcher (요청의뢰 객체)
  • 포워드(=포워딩, forward)
  • 객체 바인딩

## MVC03 프로젝트 생성

  • File > New > Dynamic Web Project 클릭 > Project name : MVC03 > Next > Next > Generate web.xml deploymen descriptor 체크 후 Finish.
  • MVC01 자료를 바탕으로 작업 예정

## 톰캣 서버 등록

  • Server > 톰캣서버 우클릭 > Add and Remove 클릭
  • Available에 있는 MVC03 클릭 후 Add 클릭

## 패키지 생성

  • kr.bit.controller
  • kr.bit.db
  • kr.bit.model

## 데이터베이스 연결을 위한 드라이버 추가.

  • MVC03 > WebContent > WEB-INF > lib 에 mysql-connector-java-5.1.31.jar 추가

## 회원가입 페이지 생성

  • MVC03 > WebContent 에 member 폴더 추가, 
  • member 폴더에 memberRegister.html 추가

 

# MVC03_02 forward(포워드=포워딩) 기법

  • 서버에서 Controller와 JSP 간에 페이지를 전달요청하고 요청받은 JSP가 Controller가 가지고 있는 데이터를 가져와서 View를 한다음, View의 결과를 다시 Controller에게 넘겨주면 Controller는 이 데이터를 받아서 그대로 응답을 학는것을 포워드(포워딩) 이라고 한다.
  • Controller와 view가 서로 forward 될 때, 데이터를 보내고 받으려면 특정 메모리 공간에 넣어주고, forward 할 때 다시 데이터를 빼내야 하는데 이걸 객체를 특정 메모리에 연결시켰다 하여 객체 바인딩 이라고 한다.

 

# MVC03_03 RequestDispatcher(요청의뢰) 와 객체 바인딩

1. 클라이언트가 Controller에게 요청을 하게 되면 Controller에는 HttpServletRequest 객체와 HttpServletResponse 객체 (요청과 응답 객체)가 생성된다. 

2. Controller에 있는 reqeust 객체와 response 객체가 각 객체(HttpServletRequest 객체와 HttpServletResponse 객체)를 가르키게 된다.

3. Controller는 Model(Java) 와 연동 DAO를 통해 DB에서 데이터를 가져온다.

4. 요청을 의뢰할 페이지를 얻어온다.

  • RequestDispatcher rd = request.getRequestDispatcher(); 를 이용하여 JSP 가져온다.

5. 객체 바인딩

  • 메모리 공간(request)에 특정 객체를 집어 넣는것. request.setAttribute(); 를 이용.

6. 포워딩 진행

  • rd.forward(request, response); 를 이용 클라이언트에게 응답을 하게 된다. 여기서 request, response는 2번에서의 request, response와 동일. 이때 메모리 공간에 들어있는 특정 객체를 가져와서 응답. request.getAttribute(); 를 이용

반응형
반응형

# MVC02_07 MVC02정리 및 Model 2방식

## Client - Controller - Model

  • 클라이언트 요청 > Controller (Servlet) > Model (Java)
  • 클라이언트의 요청이 오면 Controller가 요청을 받고 Model과 연동하여, 다시 클라이언트에게 응답.

## Client - View - Model (Model 1 방식)

  • 클라이언트 요청 > View (JSP) > Model (java)
  • 클라이언트의 요청이 오면 View가 요청을 받고 Model과 연동하여, 다시 클라이언트에게 응답.

반응형

+ Recent posts