오늘이라도

[Web] 5. 회원 목록 삭제 추가, 정적 페이지 전환, 동적 페이지 전환 : forward(), sendRedirect() 본문

취업성공패키지 SW 개발자 교육/Web

[Web] 5. 회원 목록 삭제 추가, 정적 페이지 전환, 동적 페이지 전환 : forward(), sendRedirect()

upcake_ 2020. 5. 12. 10:08
반응형

 

https://github.com/upcake/Class_Examples

교육 중에 작성한 예제들은 깃허브에 올려두고 있습니다. 

gif 파일은 클릭해서 보는 것이 정확합니다.


 - ⑤ 회원 목록 삭제 버튼, 기능, 화면 추가 : Servlet04.java, Servlet05.java -

▼Servlet04.java : 전체 회원 목록 보기 화면

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

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 com.hanul.study.MemberDAO;
import com.hanul.study.MemberDTO;

@WebServlet("/s04.do")
public class Servlet04 extends HttpServlet {
	protected void service(HttpServletRequest request, HttpServletResponse response) 
		throws ServletException, IOException {
		//비즈니스 로직 : 전체 회원 목록을 검색하는 메서드 호출 ▶ memberSearchAll()
		MemberDAO dao = new MemberDAO();
		ArrayList<MemberDTO> list = dao.memberSearchAll();
		
		//프레젠테이션 로직 : list의 값을 출력 → *.html, *.jsp
		response.setContentType("text/html; charset=utf-8");
		PrintWriter out = response.getWriter();
		out.println("[전체 회원 목록 보기]");
		out.println("<br />");
		out.println("<table border='1'>");
		out.println("<tr>");
		out.println("<th>이름</th>");
		out.println("<th>아이디</th>");
		out.println("<th>비밀번호</th>");
		out.println("<th>나이</th>");
		out.println("<th>주소</th>");
		out.println("<th>전화번호</th>");
		out.println("<th>삭제</th>");
		out.println("</tr>");
		for (MemberDTO dto : list) {
			out.println("<tr align='center'>");
			out.println("<td>" + dto.getIrum() + "</td>");
			out.println("<td>" + dto.getId() + "</td>");
			out.println("<td>" + dto.getPw() + "</td>");
			out.println("<td>" + dto.getAge() + "</td>");
			out.println("<td>" + dto.getAddr() + "</td>");
			out.println("<td>" + dto.getTel() + "</td>");
			out.println("<td><a href='s05.do?id=" + dto.getId() + "'>삭제</a></td>");
			out.println("</tr>");
		}
		out.println("</table>");
		out.println("<br />");
		out.println("<a href='MemberMain.html'>회원가입 화면</a>");
	}
}

 - 전체 회원 목록 보기 화면(Servlet04.java)에 회원 목록 삭제를 위한 칼럼을 추가한다.

 - '삭제' 글자를 누르면 s05.do(Servlet05.java)로 넘어가게끔 코드를 작성하였다.

 

 

▼Servlet05.java : 삭제 성공/실패 알림

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 com.hanul.study.MemberDAO;

@WebServlet("/s05.do")
public class Servlet05 extends HttpServlet {
	protected void service(HttpServletRequest request, HttpServletResponse response) 
		throws ServletException, IOException {
		//① 클라이언트의 요청을 받는다 : 매개 변수를 가져온다.
		String id = request.getParameter("id");
		
		//② 비즈니스 로직 : 회원 정보를 삭제 ▶ memberDelete()
		MemberDAO dao = new MemberDAO();
		int succ = dao.memberDelete(id);
		
		//③ 프레젠테이션 로직 : 결과를 응답
		response.setContentType("text/html; charset=utf-8");	//MIME Type
		PrintWriter out = response.getWriter();
		if(succ > 0) {
			out.println("<script>alert('삭제 성공!');</script>");
			out.println("<a href='MemberMain.html'>회원가입 화면</a>");
			out.println("<br />");
			out.println("<a href='s04.do'>회원 목록 보기</a>");
		} else {
			out.println("<scrpit>alert('삭제 실패!');</script>");
			out.println("<a href='MemberMain.html'>회원가입 화면</a>");
			out.println("<br />");
			out.println("<a href='s04.do'>회원 목록 보기</a>");
		}
	}
}

 - Member 테이블의 기본키인 id를 매개 변수로 가져온다.

 - 회원 삭제를 위한 메서드 memberDelete()를 DAO 클래스에 작성한다.

	//회원 정보 삭제
	public int memberDelete(String id) {
		conn = getConn();
		String sql = "DELETE FROM member WHERE id = ?";
		int succ = 0;
		try {
			ps = conn.prepareStatement(sql);
			ps.setString(1, id);
			succ = ps.executeUpdate();
		} catch (Exception e) {
			e.printStackTrace();
			System.out.println("memberDelete Exception!!!");
		} finally {
			dbClose();
		}
		return succ;
	} //memberDelete()

 - 삭제 성공/실패를 알려주는 경고창을 띄운다.

 

▲회원 목록 삭제 작동 화면

 

 

 - 정적 페이지 전환 -

▼PageTurn.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>정적 페이지 전환</title>
<script type="text/javascript">
	function fnGo() {
		var id = "kim";
		var pw = "6789";
		alert("페이지를 전환합니다.");
		location.href = "page.do?id=" + id + "&pw=" + pw;
	} 
</script>
</head>
<body>
	- 현재 페이지(PageTurn.html)에서 회원 1명의 정보(id, pw)를 PageServlet.java(page.do)으로 넘기시오.<br />
	- 정적 페이지 전환 : 사용자가 클릭해서 넘기는 방식
	<!-- 
	<input type="button"> 과 <button type="button">은 기능적으로 동일하다.
	그치만, button요소에 type속성을 넣지않으면 submit 기능을 수행한다.
	버튼 자체를 submit 용도로 사용한다면 문제가 안되지만 스크립트 동작을 원할 경우 type을 정의해주면 된다.
	 -->

	<form action="page.do" method="get">
		ID : <input type="text" name="id" value="DefaultID" required="required" /><br />
		PW : <input type="password" name="pw" value="1234" required="required" /><br />
		<input type="submit" value="페이지 전환A" />
		<input type="reset" value="초기화" />
	</form>
	<br/><br/><br/>
	
	<a href="page.do?id=hong&pw=4321">페이지 전환 B</a>
	<br/><br/><br/>
	
	<button onclick="fnGo()">페이지 전환 C</button>
	<br/><br/><br/>
	
	<input type="button" value="페이지 전환 D" onclick="location.href='page.do?id=park&pw=0000'" />
</body>
</html>

 

▼PageServlet.java

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;

@WebServlet("/page.do")
public class PageServlet extends HttpServlet {
	protected void service(HttpServletRequest request, HttpServletResponse response) 
		throws ServletException, IOException {
		//① 클라이언트의 요청을 받는다 : 매개 변수를 입력받는다.
		request.setCharacterEncoding("utf-8");
		String id = request.getParameter("id");
		String pw = request.getParameter("pw");
		
		//② 비즈니스 로직 : 별도의 클래스에 작성
		
		//③ 프레젠테이션 로직 : 결과를 응답 ▶ *.html, *.jsp
		response.setContentType("text/html; charset=utf-8"); 
		PrintWriter out = response.getWriter();
		out.println("<body>");
		out.println("PageTurn.html에서 요청한 ID : " + id + "<br />");
		out.println("PageTurn.html에서 요청한 PW : " + pw);
		out.println("</body>");
	}
}

 - 사용자가 직접 클릭해서 페이지를 전환하는 방식을 정적 페이지 전환이라고 한다.

 

 

▲정적 페이지 전환 A, B, C, D 작동 화면

 

 

 - 동적 페이지 전환 : forward() -

▼PageTurnCalc01.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>동적 페이지 전환 : request.forward()</title>
</head>
<body>
<form action="s06.do" method="get">
첫 번째 수 : <input type="number" name="num1" required="required" /><br />
두 번째 수 : <input type="number" name="num2" required="required" /><br />
<input type="submit" value="계산" />
<input type="reset" value="초기화" />
</form>
</body>
</html>

 

▼Servlet06.java

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 com.hanul.study.SumMachine;

@WebServlet("/s06.do")
public class Servlet06 extends HttpServlet {
	protected void service(HttpServletRequest request, HttpServletResponse response) 
		throws ServletException, IOException {
		//① 클라이언트의 요청을 받는다 : 매개 변수를 입력받는다.
		int num1 = Integer.parseInt(request.getParameter("num1"));
		int num2 = Integer.parseInt(request.getParameter("num2"));
		
		//② 비즈니스 로직 : 별도의 클래스에 작성(SumMachine.java)
		SumMachine sm = new SumMachine();
		int sum = sm.getSum(num1, num2);
		
		//③ 프레젠테이션 로직 : 결과를 응답 ▶ Servlet07.java(s07.do) : request.forward()
		//forward 방식 : 페이지 전환 시 연결할 객체(가지고 갈 객체)가 있을 경우
		//url이 변경되지 않는다 ▶ 일반적으로 많이 사용하는 동적 페이지 전환 방식
		request.setAttribute("num1", num1);	//1단계 : 바인딩(연결) 객체 설정
		request.setAttribute("num2", num2);
		request.setAttribute("sum", sum);
		RequestDispatcher rd = request.getRequestDispatcher("s07.do");	//2단계 : 페이지 호출
		rd.forward(request, response);	//3단계 : 동적 페이지 전환
	}
}

 

▼Servlet07.java

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;

@WebServlet("/s07.do")
public class Servlet07 extends HttpServlet {
	protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		//Servlet06.java(s06.do)에서 넘겨준 바인딩(연결) 객체를 받는다.
		//바인딩 객체는 반드시 클래스 타입으로 설정
		Integer num1 = (Integer) request.getAttribute("num1");
		Integer num2 = (Integer) request.getAttribute("num2");
		Integer sum = (Integer) request.getAttribute("sum");
		// 클래스 타입으로 리턴되므로 int가 아닌, Integer 타입으로 캐스팅하여 받는다. 
		
		//결과를 출력 : *.html
		response.setContentType("text/html; charset=utf-8");
		PrintWriter out = response.getWriter();
		out.println("<body>");
		out.println("첫 번째 정수 : " + num1 + "<br/>");
		out.println("두 번째 정수 : " + num2 + "<br/>");
		out.println("두 정수 사이의 누적합 : " + sum);
		out.println("</body>");
	}
}

 - forward() 방식은 페이지 전환 시 연결해야 할 객체가 있을 경우 주로 사용되는 동적 페이지 전환 방식이다.

 - 페이지 전환 후에도 url이 변경되지 않는다는 특징이 있다.

 - 주로 사용되는 페이지 전환 방식이다.

 

▲동적 페이지 전환 : forward() 방식 작동 화면

 

 

 

 - 동적 페이지 전환 : sendRedirect() -

▼PageTurnCalc02.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>동적 페이지 전환 : request.sendRedirect()</title>
</head>
<body>
<form action="s08.do" method="get">
첫 번째 수 : <input type="number" name="num1" required="required" /><br />
두 번째 수 : <input type="number" name="num2" required="required" /><br />
<input type="submit" value="계산" />
<input type="reset" value="초기화" />
</form>
</body>
</html>

 

▼Servlet08.java

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 com.hanul.study.SumMachine;

@WebServlet("/s08.do")
public class Servlet08 extends HttpServlet {
	protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		//클라이언트의 요청을 받는다 : 매개 변수를 입력받는다.
		int num1 = Integer.parseInt(request.getParameter("num1"));
		int num2 = Integer.parseInt(request.getParameter("num2"));

		//② 비즈니스 로직 : 별도의 클래스에 작성(SumMachine.java)
				SumMachine sm = new SumMachine();
				int sum = sm.getSum(num1, num2);
				
		//③ 프레젠테이션 로직 : 결과를 응답 ▶ Servlet09.java(s09.do) : response.sendRedirect()
		//sendRedirect 방식 : 단순한 페이지 전환만 필요할 경우(연결할 객체가 없는 경우)
		//url이 변경된다.
//		response.sendRedirect("s09.do");
		
		//sendRedirect 방식으로 페이지 전환을 할 경우 연결할 매개 변수가 있다 ▶ get 방식
		response.sendRedirect("s09.do?num1=" + num1 + "&num2=" + num2 + "&sum=" + sum);
		//s09.do?num1=1&num2=10&sum=55 이런 형식으로 주소창에 표시됨
	}
}

 

▼Servlet09.java

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 com.hanul.study.SumMachine;

@WebServlet("/s08.do")
public class Servlet08 extends HttpServlet {
	protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		//클라이언트의 요청을 받는다 : 매개 변수를 입력받는다.
		int num1 = Integer.parseInt(request.getParameter("num1"));
		int num2 = Integer.parseInt(request.getParameter("num2"));

		//② 비즈니스 로직 : 별도의 클래스에 작성(SumMachine.java)
				SumMachine sm = new SumMachine();
				int sum = sm.getSum(num1, num2);
				
		//③ 프레젠테이션 로직 : 결과를 응답 ▶ Servlet09.java(s09.do) : response.sendRedirect()
		//sendRedirect 방식 : 단순한 페이지 전환만 필요할 경우(연결할 객체가 없는 경우)
		//url이 변경된다.
//		response.sendRedirect("s09.do");
		
		//sendRedirect 방식으로 페이지 전환을 할 경우 연결할 매개 변수가 있다 ▶ get 방식
		response.sendRedirect("s09.do?num1=" + num1 + "&num2=" + num2 + "&sum=" + sum);
		//s09.do?num1=1&num2=10&sum=55 이런 형식으로 주소창에 표시됨
	}
}

 -sendRedirect() 방식은 단순히 페이지 전환만 필요할 경우, 즉, 연결할 객체가 없는 경우에 사용되는 동적 페이지 전환 방식이다.

 - forward() 방식에 비해 많이 사용되지 않는다.

 - 페이지 전환 후에 url이 변경된다는 특징이 있다.

 - 연결할 매개 변수가 있을 경우 sendRedirect() 방식이어도 get 방식을 이용하여 전달하는 방법이 있다.

 

▲동적 페이지 전환 : sendRedirect() 방식 작동 화면

 

반응형