[jsp] 23. 웹사이트 제작법9_ 회원 관리 페이지 제작 (feat. JSP)

01. 회원관리 출력페이지 (admin > member_manager.jsp)

• 실제로 만들 때는 페이징 기능, 서칭 기능 넣어주기
• 실제로 만들 때는 회원삭제 기능은 넣지 않음, 상태변경은 괜찮음!
• 회원관리페이지에서 가장 중요한 것은 서칭기능
• 체크박스를 활용해 다수의 목록들 중 원하는 값들 혹은 원한는 값 하나만 전달해 프로그램을 요청하여 실행할 수 있는 것을 point로 두고 보기

<%@page import="xyz.itwill.dao.MemberDAO"%>
<%@page import="java.util.List"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

//<%-- MEMBER 테이블에 저장된 모든 회원정보를 검색하여 클라이언트에게 전달하는 JSP 문서 --%>
//<%-- => 관리자만 요청 가능한 JSP 문서 --%>
//<%-- => [선택회원삭제]를 클릭한 경우 회원정보 삭제페이지(member_remove_action.jsp)로 이동 - 체크박스로 선택된 모든 회원의 아이디 전달  --%>
//<%-- => 회원정보에서 [상태]를 변경한 경우 회원상태 변경페이지(member_status_action.jsp)로 이동 - 아이디와 회원상태 전달 --%>
<%@include file="/security/admin_check.jspf" %>

<%
	//MEMBER 테이블에 저장된 모든 회원정보를 검색하여 반환하는 DAO 클래스의 메소드 호출
    //=> 실제로 관리자 페이지를 만들 때는
    //=> 다수의 행을 검색하여 출력할 것이기 때문에 반드시 페이징처리 필요!!
	List<MemberDTO> memberList=MemberDAO.getDAO().selectMemberList();
%>

<style type="text/css">
table { margin: 0 auto; border: 1px solid black; border-collapse: collapse; }
th, td { border: 1px solid black;	padding: 3px;	text-align: center;	font-size: 12px; }
th { background-color: black;	color: white;}
.member_check { width: 80px; }
.member_id { width: 80px; }
.member_name { width: 80px; }
.member_email { width: 140px; }
.member_mobile { width: 140px; }
.member_address { width: 300px; }
.member_join { width: 150px; }
.member_login { width: 150px; }
.member_status { width: 80px; }
</style>

<h1>회원목록</h1>
<form name="memberForm" id="memberForm">
	<table>	
		<tr>
		  	<!-- checkbox이용 -->
				<th><input type="checkbox" id="allCheck"></th>
				<th>아이디</th>
				<th>이름</th>
				<th>이메일</th>
				<th>전화번호</th>
				<th>주소</th>
				<th>가입날짜</th>
				<th>최종로그인</th>
				<th>상태</th>
		</tr>

		<% for(MemberDTO member:memberList) { %>
		<tr>
			<td class="member_check">
				<% if(member.getStatus()==9) { %>
					관리자
				<% } else { %>
        	//<%--for문으로 사용했기 때문에 checkId로 전달된 값이 여러개 생김--%>
          	//<%--즉, 값이 하나가 아닌 여러개 전달함 : getParameterValues 이용하기--%>
					<input type="checkbox" name="checkId" value="<%=member.getId()%>" class="check">
				<% } %>
			</td>
			<td class="member_id"><%=member.getId() %></td>
			<td class="member_name"><%=member.getName() %></td>
			<td class="member_email"><%=member.getEmail() %></td>
			<td class="member_mobile"><%=member.getMobile() %></td>
			<td class="member_address">
				[<%=member.getZipcode() %>]<%=member.getAddress1() %> <%=member.getAddress2() %>
			</td>
			<td class="member_join"><%=member.getJoinDate() %></td>
			<td class="member_login">
				<% if(member.getLastLogin()!=null) { %>
				<%=member.getJoinDate() %>
				<% } %>
			</td>
			<td class="member_status">
      			//<%-- 다수의 값들 중 딱 하나만 전달해야하기 때문에 form 태그 사용 하지 않음--%>
				<select class="status" name="<%=member.getId()%>">
					<option value="0" <% if(member.getStatus()==0) { %> selected="selected" <% } %>>탈퇴회원</option>
					<option value="1" <% if(member.getStatus()==1) { %> selected="selected" <% } %>>일반회원</option>
					<option value="9" <% if(member.getStatus()==9) { %> selected="selected" <% } %>>관리자</option>
				</select>
			</td>
		</tr>
		<% } %>
	</table>
	<p><button type="button" id="removeBtn">선택회원삭제</button></p>
	<div id="message" style="color: red;"></div>
</form>

<script type="text/javascript">
$("#allCheck").change(function() {
	if($(this).is(":checked")) {
		$(".check").prop("checked",true);
	} else {
		$(".check").prop("checked",false);
	}
});

$("#removeBtn").click(function() {
	if($(".check").filter(":checked").length==0) {
		$("#message").text("선택된 회원이 하나도 없습니다.");
		return;
	}
	$("#memberForm").attr("action", "<%=request.getContextPath()%>/index.jsp?workgroup=admin&work=member_remove_action");
	$("#memberForm").attr("method","post");
	$("#memberForm").submit();
});

$(".status").change(function() {
	//이벤트가 발생된 입력태그의 태그 속성값을 반환받아 저장 - 회원상태를 변경하고자 하는 회원의 아이디를 제공받아 저장 - 식별자
	var id=$(this).attr("name");
	//이벤트가 발생된 입력태그의 입력값을 반환받아 저장 - 변경할 회원상태를 제공받아 저장 - 변경값
	var status=$(this).val();
	location.href="<%=request.getContextPath()%>/index.jsp?workgroup=admin&work=member_status_action&id="+id+"&status="+status;
});

</script>

02. 회원정보 삭제처리(admin > member_remove_action.jsp)

• 다수의 값을 하나의 페이지에 전달하여 요청하는 방법
• 같은 이름으로 다수의 값을 전달하여 처리하는 법

<%@page import="xyz.itwill.dao.MemberDAO"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

//<%-- 아이디 목록을 전달받아 MEMBER 테이블에 저장된 해당 아이디의 회원정보를 삭제하고 회원정보
//관리페이지(member_manager.jsp)로 이동하기 위한 URL 주소를 클라이언트에게 전달하는 JSP 문서 --%>

//<%-- => 관리자만 요청 가능한 JSP 문서 --%>
<%@include file="/security/admin_check.jspf" %>

<%
	//비정상적인 요청에 대한 응답 처리
	if(request.getMethod().equals("GET")) {
		out.println("<script type='text/javascript'>");
		out.println("location.href='"+request.getContextPath()+"/index.jsp?workgroup=error&work=error_400';");
		out.println("</script>");
		return;
	}

	//체크박스로 선택되어 전달된 모든 회원의 아이디를 반환받아 저장
	// => 동일한 이름으로 다수의 값이 전달되므로 request.getParameterValeus() 메소드 호출
	String[] checkId=request.getParameterValues("checkId");

	//배열의 요소를 차례대로 제공받아 반복 처리
	for(String id:checkId) {
		//아이디를 전달받아 MEMBER 테이블에 저장된 해당 아이디의 회원정보를 삭제하는 DAO 클래스의 메소드 호출
		MemberDAO.getDAO().deleteMember(id);
	}

	//페이지 이동
	out.println("<script type='text/javascript'>");
	out.println("location.href='"+request.getContextPath()+"/index.jsp?workgroup=admin&work=member_manager';");
	out.println("</script>");
%>

03. 회원정보 상태변경(admin > member_status_action.jsp)

• 같은 이름으로 하나의 값만을 전달하여 처리하는 법

<%@page import="xyz.itwill.dao.MemberDAO"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

//<%-- 아이디와 회원상태를 전달받아 MEMBER 테이블에 저장된 해당 아이디의 회원상태를 변경하고 회원정보
//관리페이지(member_manager.jsp)로 이동하기 위한 URL 주소를 클라이언트에게 전달하는 JSP 문서 --%>

//<%-- => 관리자만 요청 가능한 JSP 문서 --%>
<%@include file="/security/admin_check.jspf" %>

<%
	//비정상적인 요청에 대한 응답 처리
	if(request.getParameter("id")==null || request.getParameter("status")==null) {
		out.println("<script type='text/javascript'>");
		out.println("location.href='"+request.getContextPath()+"/index.jsp?workgroup=error&work=error_400';");
		out.println("</script>");
		return;
	}

	//전달값을 반환받아 저장
	String id=request.getParameter("id");
	int status=Integer.parseInt(request.getParameter("status"));

	//아이디와 회원상태를 전달받아 MEMBER 테이블에 저장된 해당 아이디의 회원정보에서 회원상태를
	//변경하는 DAO 클래스의 메소드 호출
	MemberDAO.getDAO().updateStatus(id, status);

	//페이지 이동
	out.println("<script type='text/javascript'>");
	out.println("location.href='"+request.getContextPath()+"/index.jsp?workgroup=admin&work=member_manager';");
	out.println("</script>");
%>

04. 제품관리 출력페이지 (admin > product_manager.jsp)

• 실제로 만들 시 페이징, 서칭 처리 해서 만들어줘야함
• 페이징처리, 서칭처리 기본!
• 목록을 출력하는데 있어서 반드시 필요!!

<%@page import="java.text.DecimalFormat"%>
<%@page import="xyz.itwill.dao.ProductDAO"%>
<%@page import="xyz.itwill.dto.ProductDTO"%>
<%@page import="java.util.List"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

//<%-- 카테고리를 전달받아 PRODUCT 테이블에 저장된 해당 카테고리의 모든 제품정보를 검색하여
//클라이언트에게 전달하는 JSP 문서 --%>
//<%-- => [제품등록]을 클릭한 경우 제품정보 입력페이지(product_add.jsp)로 이동 --%>
//<%-- => [카테고리]가 변경된 경우 제품목록 출력페이지(product_manager.jsp)로 이동 - 입력값 전달 --%>
//<%-- => :자기가 자기자신 요청 --%>
//<%-- => 제품정보의 [제품명]을 클릭한 경우 제품정보 출력페이지(product_detail.jsp)로 이동 - 제품번호 전달 --%>

//<%-- => 관리자만 요청 가능한 JSP 문서 --%>
<%@include file="/security/admin_check.jspf" %>

<%
	//1.
	//전달값을 반환받아 저장
	String category=request.getParameter("category");
	if(category==null) {//전달값이 없는 경우
		category="ALL";
	}

	//2.
	//카테고리를 전달받아 PRODUCT 테이블에 저장된 해당 카테고리의 모든 제품정보를 검색하여
	//반환하는 DAO 클래스의 메소드 호출
	List<ProductDTO> productList=ProductDAO.getDAO().selectProductList(category);
%>

<style type="text/css">
#product { width: 1000px; margin: 0 auto; }
#btn { text-align: right; margin-bottom: 5px; }
table {	border: 1px solid black;	border-collapse: collapse;}
th, td {	border: 1px solid black;	text-align: center;	width: 200px;}
th {	background-color: black;	color: white;}
.pname {	width: 400px;}
td a, td a:hover {	text-decoration: underline;	color: blue;}
</style>

<div id="product">
	<h2>제품목록</h2>

	<div id="btn">
			<button type="button" id="addBtn">제품등록</button>
	</div>

	<table>
			<tr>
				<th>제품번호</th>
				<th class="pname">제품명</th>
				<th>제품수량</th>
				<th>제품가격</th>
			</tr>
	
			<% if(productList.isEmpty()) { %>
			<tr>
				<td colspan="4">검색된 제품이 하나도 없습니다.</td>
			</tr>
	
			<% } else { %>
				<% for(ProductDTO product:productList) { %>
				<tr>
					<td><%=product.getNum() %></td>
					<td>
						<a href="<%=request.getContextPath() %>/index.jsp?workgroup=admin&work=product_detail&num=<%=product.getNum()%>">
							<%=product.getName() %>
						</a>
					</td>
					<td>
						<%=DecimalFormat.getInstance().format(product.getQty()) %>
					</td>
					<td>
						<%=DecimalFormat.getCurrencyInstance().format(product.getPrice()) %>
					</td>
				</tr>
				<% } %>
			<% } %>
	</table>

	<br>

	<form action="<%=request.getContextPath() %>/index.jsp?workgroup=admin&work=product_manager" method="post" id="productForm">
			<select name="category" id="category">
				<option value="ALL" <% if(category.equals("ALL")) { %> selected="selected" <% } %>>
					전체(ALL)
				</option>
				<option value="CPU" <% if(category.equals("CPU")) { %> selected="selected" <% } %>>
					중앙처리장치(CPU)
				</option>
				<option value="MAINBOARD" <% if(category.equals("MAINBOARD")) { %> selected="selected" <% } %>>
					메인보드(MAINBOARD)
				</option>
				<option value="MEMORY" <% if(category.equals("MEMORY")) { %> selected="selected" <% } %>>
					메모리(MEMORY)
				</option>
			</select>
	</form>

</div>

<script type="text/javascript">
$("#addBtn").click(function() {
	location.href="<%=request.getContextPath()%>/index.jsp?workgroup=admin&work=product_add";
});

$("#category").change(function() {
	$("#productForm").submit();
});
</script>

05. 제품등록 입력페이지 (admin > product_add.jsp)

• 파일명 한글 사용 비권장 , 영어 사용 권장

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

//<%-- 사용자로부터 제품정보를 입력받기 위한 JSP 문서 --%>
//<%-- => 관리자만 요청 가능한 JSP 문서 --%>
//<%-- => [제품등록]을 클릭한 경우 제품정보 삽입페이지(product_add_action.jsp)로 이동 - 입력값 전달 --%>

<%@include file="/security/admin_check.jspf" %>

<style type="text/css">
#product { width: 800px; margin: 0 auto;}
table {	margin: 0 auto;}
td {	text-align: left;}
</style>

<div id="product">
	<h2>제품등록</h2>
	<!-- <%-- 사용자로부터 파일을 입력받아 요청 페이지로 전달하기 위해서는 "반드시" form 태그의
	enctype 속성값을 [multipart/form-data]으로 설정 --%> -->
  	<!-- <%-- request 사용하기 불편하므로, multipart/form-data를 처리할 수 있는 클래스 사용 권장--%> -->
  	<!-- <%-- cos 라이브러리의 클래스(com.orelly.servlet) 사용 , 아파치에서 제공한 것도 있음 --%> -->
	<form action="<%=request.getContextPath() %>/index.jsp?workgroup=admin&work=product_add_action"
		method="post" enctype="multipart/form-data" id="productForm">

		<table>
			<tr>
				<td>카테고리</td>
				<td>
					<select name="category">
						<option value="CPU">중앙처리장치(CPU)</option>
						<option value="MAINBOARD">메인보드(MAINBOARD)</option>
						<option value="MEMORY">메모리(MEMORY)</option>
					</select>
				</td>
			</tr>
			<tr>
				<td>제품명</td>
				<td>
					<input type="text" name="name" id="name">
				</td>
			</tr>
			<tr>
				<td>대표이미지</td>
				<td>
					<input type="file" name="imageMain" id="imageMain">
				</td>
			</tr>
			<tr>
				<td>상세이미지</td>
				<td>
					<input type="file" name="imageDetail" id="imageDetail">
				</td>
			</tr>	
			<tr>
				<td>제품수량</td>
				<td>
					<input type="text" name="qty" id="qty">
				</td>
			</tr>
			<tr>
				<td>제품가격</td>
				<td>
					<input type="text" name="price" id="price">
				</td>
			</tr>
			<tr>
				<td colspan="2">
					<button type="submit">제품등록</button>
				</td>
			</tr>
	</table>
</form>

<div id="message" style="color: red;"></div>
</div>

<script>
$("#productForm").submit(function() {
	if($("#name").val()=="") {
		$("#message").text("제품명을 입력해 주세요.");
		$("#name").focus();
		return false;
	}

	if($("#imageMain").val()=="") {
		$("#message").text("대표이미지를 입력해 주세요.");
		$("#name").focus();
		return false;
	}

	if($("#imageDetail").val()=="") {
		$("#message").text("상세이미지를 입력해 주세요.");
		$("#name").focus();
		return false;
	}

	if($("#qty").val()=="") {
		$("#message").text("제품수량을 입력해 주세요.");
		$("#name").focus();
		return false;
	}

	if($("#price").val()=="") {
		$("#message").text("제품가격을 입력해 주세요.");
		$("#name").focus();
		return false;
	}
});
</script>

06. 제품등록 입력처리 (admin > product_add_action.jsp)

WAS가 restart 하면 사라짐

<%@page import="xyz.itwill.dao.ProductDAO"%>
<%@page import="java.io.File"%>
<%@page import="xyz.itwill.dto.ProductDTO"%>
<%@page import="com.oreilly.servlet.multipart.DefaultFileRenamePolicy"%>
<%@page import="com.oreilly.servlet.MultipartRequest"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

//<%-- 제품정보를 전달받아 PRODUCT 테이블에 삽입하고 제품목록 출력페이지(product_manager.jsp)로
// 위한 URL 주소를 클라이언트에게 전달하는 JSP 문서 --%>
//<%-- => 제품 관련 이미지는 서버 디렉토리에 저장하고PRODUCT 테이블에서는 "업로드 처리된 이미지 파일명" 저장 --%>
//<%-- 주의: 원본파일을 저장하는 것이 아닌 "업로드 처리된 이미지 파일명을 저장할 것 --%>
//<%-- =>입력페이지에서 전달된 [multipart/form-data]를 처리하기 위해 cos 라이브러리의 클래스(com.orelly.servlet) 사용 --%>

//<%-- => 관리자만 요청 가능한 JSP 문서 --%>
<%@include file="/security/admin_check.jspf" %>

<%

	//1.
	//비정상적인 요청에 대한 응답 처리
	if(request.getMethod().equals("GET")) {
		out.println("<script type='text/javascript'>");
		out.println("location.href='"+request.getContextPath()+"/index.jsp?workgroup=error&work=error_400';");
		out.println("</script>");
		return;
	}

	//2.
	//전달받은 파일을 저장하기 위한 서버 디렉토리의 파일 시스템 경로를 반환받아 저장
	// => 작업디렉토리(WorkSpace)가 아닌 웹디렉토리(WebApps)의 파일 시스템 경로 반환
	String saveDirectory=request.getServletContext().getRealPath("/product_image");
	//System.out.println("saveDirectory = "+saveDirectory);
	//saveDirectory = C:\\\\Users\\\\itwill\\\\Downloads\\\\apache-tomcat-9.0.68\\\\webapps\\\\jsp\\\\product_image

	//3.
	//[multipart/form-data]를 처리하기 위한  MultipartRequest 객체 생성
	// => 사용자로부터 입력받아 전달된 모든 파일을 서버 디렉토리에 자동으로 저장 - 파일 업로드
  	// => 장점이자 단점: 전달된 모든 값들이 무조건적인 업로드 처리됨
	MultipartRequest multipartRequest=new MultipartRequest(request, saveDirectory, 30*1024*1024, "utf-8", new DefaultFileRenamePolicy());

	//4.
	//전달값과 업로드된 파일명을 반환받아 저장
	String category=multipartRequest.getParameter("category");
	String name=multipartRequest.getParameter("name");
	String imageMain=multipartRequest.getFilesystemName("imageMain");
	String imageDetail=multipartRequest.getFilesystemName("imageDetail");
	int qty=Integer.parseInt(multipartRequest.getParameter("qty"));
	int price=Integer.parseInt(multipartRequest.getParameter("price"));

	//5.
	//ProductDTO 객체를 생성하여 전달값과 업로드 파일명으로 필드값 변경
	ProductDTO product=new ProductDTO();
	product.setCategory(category);
	product.setName(name);
	product.setImageMain(imageMain);
	product.setImageDetail(imageDetail);
	product.setQty(qty);
	product.setPrice(price);

	//6.
	//제품정보를 전달받아 PRODUCT 테이블에 삽입하는 DAO 클래스의 메소드 호출
	int rows=ProductDAO.getDAO().insertProduct(product);
	
	//7.
  	//무조건적인 업로드 처리로 인해 필요한 코드
	if(rows<=0) {//PRODUCT 테이블에 제품정보가 삽입되지 않은 경우
		//서버 디렉토리에 업로드되어 저장된 제품 관련 이미지 파일 삭제
		//File 객체 : 파일 정보를 저장하기 위한 객체
		//File.delete() : File 객체에 저장된 파일을 삭제하기 위한 메소드
		new File(saveDirectory, imageMain).delete();
		new File(saveDirectory, imageDetail).delete();
	}

	//8.
	//페이지 이동
	out.println("<script type='text/javascript'>");
	out.println("location.href='"+request.getContextPath()+"/index.jsp?workgroup=admin&work=product_manager';");
	out.println("</script>");
%>

07. 제품상세 출력페이지 (admin > product_detail.jsp)

<%@page import="java.text.DecimalFormat"%>
<%@page import="xyz.itwill.dao.ProductDAO"%>
<%@page import="xyz.itwill.dto.ProductDTO"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

//<%-- => 제품번호를 전달받아 PRODUCT 테이블에 저장된 해당 제품번호의 제품정보를 검색하여
//클라이언트에게 전달하는 JSP 문서 --%>
//<%-- => [제품정보변경]을 클릭한 경우 제품정보 입력페이지(product_modify.jsp)로 이동 - 제품번호 전달 --%>

//<%-- => 관리자만 요청 가능한 JSP 문서 --%>
<%@include file="/security/admin_check.jspf" %>

<%
	//1.
	//비정상적인 요청에 대한 응답 처리
	if(request.getParameter("num")==null){
		out.println("<script type='text/javascript'>");
		out.println("location.href='"+request.getContextPath()+"/index.jsp?workgroup=error&work=error_400';");
		out.println("</script>");
		return;
	}

	//2.
	//전달값을 반환받아 저장
	int num = Integer.parseInt(request.getParameter("num"));
	
	//3.
	//제품번호를 전달받아 PRODUCT 테이블에 저장된 해당 제품번호의 제품정보를 검색하여
	//반환하는 DAO 클래스의 메소드 호출
	ProductDTO product = ProductDAO.getDAO().selectProduct(num);
	
	//4.
	//검색된 제품 정보가 없는 경우 에러페이지로 이동하여 응답 처리 - 비정상적인 요청
	if(product==null){
		out.println("<script type='text/javascript'>");
		out.println("location.href='"+request.getContextPath()+"/index.jsp?workgroup=error&work=error_400';");
		out.println("</script>");
		return;
	}
%>

<style type="text/css">
table{ margin: 0 auto; border: 1px solid black; border-collapse: collapse; }
td{ border: 1px solid black; }
.title{ background-color: black; color: white; text-align: center; width: 100px; }
.value { padding: 5px; text-align: center; width: 500px; }
</style>

<h2>제품상세정보</h2>
<table>
	<tr>
		<td class="title">제품번호</td>
		<td class="value"><%=product.getNum() %></td>
	</tr>
	<tr>
		<td class="title">카테고리</td>
		<td class="value"><%=product.getCategory() %></td>
	</tr>
	<tr>
		<td class="title">제품명</td>
		<td class="value"><%=product.getName() %></td>
	</tr>
	<tr>
		<td class="title">대표이미지</td>
		<td class="value">
			<img src="<%=request.getContextPath() %>/product_image/<%=product.getImageMain() %>"  alt="대표이미지" width="600px"/>
		</td>
	</tr>
	<tr>
		<td class="title">상세이미지</td>
		<td class="value">
			<img src="<%=request.getContextPath() %>/product_image/<%=product.getImageDetail() %>"  alt="상세이미지" width="600px"/>
		</td>
	</tr>
		<tr>
		<td class="title">제품수량</td>
		<td class="value"><%=DecimalFormat.getInstance().format(product.getQty()) %></td>
	</tr>
	</tr>
		<tr>
		<td class="title">제품가격</td>
		<td class="value"><%=DecimalFormat.getInstance().format(product.getPrice()) %>원</td>
	</tr>
</table>
<p><button type="button" onclick="location.href='<%=request.getContextPath() %>/index.jsp?workgroup=admin&work=product_modify&num=<%=product.getNum()%>';">제품정보 변경</button></p>

08. 제품정보 수정페이지 (admin > product_modify.jsp)

<%@page import="java.text.DecimalFormat"%>
<%@page import="xyz.itwill.dto.ProductDTO"%>
<%@page import="xyz.itwill.dao.ProductDAO"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

//<%-- => 제품번호를 전달받아 PRODUCT 테이블에 저장된 해당 제품번호의 제품정보를 검색하여
//입력태그의 초기값으로 설정하고 사용자로부터 변경값을 입력받기 위한 JSP 문서 --%>
//<%-- => [제품변경]을 클릭한 경우 제품정보 변경페이지(product_modify_action.jsp)로 이동 - 입력값 전달 --%>

//<%-- => 관리자만 요청 가능한 JSP 문서 --%>
<%@include file="/security/admin_check.jspf" %>

<%
	//1.
	//비정상적인 요청에 대한 응답 처리
	if(request.getParameter("num")==null){
		out.println("<script type='text/javascript'>");
		out.println("location.href='"+request.getContextPath()+"/index.jsp?workgroup=error&work=error_400';");
		out.println("</script>");
		return;
	}
	
	//2.
	//전달값을 반환받아 저장
	int num = Integer.parseInt(request.getParameter("num"));

	//3.
	//제품번호를 전달받아 PRODUCT 테이블에 저장된 해당 제품번호의 제품정보를 검색하여
	//반환하는 DAO 클래스의 메소드 호출
	ProductDTO product = ProductDAO.getDAO().selectProduct(num);
	
	//4.
	//검색된 제품 정보가 없는 경우 에러페이지로 이동하여 응답 처리 - 비정상적인 요청
	if(product==null){
		out.println("<script type='text/javascript'>");
		out.println("location.href='"+request.getContextPath()+"/index.jsp?workgroup=error&work=error_400';");
		out.println("</script>");
		return;
	}
%>

<style type="text/css">
#product { width: 800px; margin: 0 auto; }
table { margin: 0 auto; }
td { text-align: left; }
</style>

<div id="product">
	<h2>제품변경</h2>

	//<%-- 사용자로부터 파일을 입력받아 요청 페이지로 전달하기 위해서는 반드시 form 태그의
	//enctype 속성값을 [multipart/form-data]으로 설정 --%>
	<form action="<%=request.getContextPath() %>/index.jsp?workgroup=admin&work=product_modify_action"
		method="post" enctype="multipart/form-data" id="productForm">
	
		//<%--변경할 제품정보를 구분하기 위한 식별자로 제품번호 전달 --%>
		<input type="hidden" name="num" value="<%=product.getNum() %>">
		//<%-- 제품이미지지를 변경하지 않을 경우 기존 제품 관련 이미지를 사용하기 위해 전달하거나
		//제품 관련 이미지를 변경할 경우 기존 제품 이미지를 서버 디렉토리에서 삭제하기 위해 전달 --%>
		<input type="hidden" name="currentImageMain" value="<%=product.getImageMain() %>">
		<input type="hidden" name="currentImageDetail" value="<%=product.getImageDetail() %>">

		<table>

			<tr>
				<td>카테고리</td>
				<td>
					<select name="category">
						<option value="CPU" <%if(product.getCategory()=="CPU"){ %> selected="selected" <%}%>>중앙처리장치(CPU)</option>
						<option value="MAINBOARD" <%if(product.getCategory()=="MAINBOARD"){ %> selected="selected" <%}%>>메인보드(MAINBOARD)</option>
						<option value="MEMORY" <%if(product.getCategory()=="MEMORY"){ %> selected="selected" <%}%>>메모리(MEMORY)</option>
					</select>
				</td>
			</tr>	
			<tr>
				<td>제품명</td>
				<td>
					<input type="text" name="name" id="name" value="<%=product.getName() %>">
				</td>
			</tr>
			<tr>
				<td>대표이미지</td>
				<td>
					<img src="<%=request.getContextPath() %>/product_image/<%=product.getImageMain() %>"  alt="대표이미지" width="400px"/>
					<br>
					<span style="color: red;">이미지를 변경하지 않을 경우 입력하지 마세요.</span>
					<br>
					<input type="file" name="imageMain" id="imageMain">
				</td>
			</tr>
			<tr>
				<td>상세이미지</td>
				<td>
					<img src="<%=request.getContextPath() %>/product_image/<%=product.getImageDetail()%>"  alt="상세이미지" width="400px"/>
					<br>
					<span style="color: red;">이미지를 변경하지 않을 경우 입력하지 마세요.</span>
					<br>
					<input type="file" name="imageDetail" id="imageDetail">
				</td>
			</tr>
			<tr>
				<td>제품수량</td>
				<td>
					<input type="text" name="qty" id="qty" value="<%=product.getQty() %>">
				</td>
			</tr>
			<tr>
				<td>제품가격</td>
				<td>
					<input type="text" name="price" id="price" value="<%=product.getPrice() %> ">
				</td>
			</tr>
			<tr>
				<td colspan="2">
					<button type="submit">제품등록</button>
				</td>
			</tr>
	</table>
</form>

<div id="message" style="color: red;"></div>
</div>

<script>
$("#productForm").submit(function() {
	if($("#name").val()=="") {
		$("#message").text("제품명을 입력해 주세요.");
		$("#name").focus();
		return false;
	}

	if($("#qty").val()=="") {
		$("#message").text("제품수량을 입력해 주세요.");
		$("#name").focus();
		return false;
	}

	if($("#price").val()=="") {
		$("#message").text("제품가격을 입력해 주세요.");
		$("#name").focus();
		return false;
	}
});
</script>

09. 제품정보 수정처리 (admin > product_modify_action.jsp)

<%@page import="xyz.itwill.dao.ProductDAO"%>
<%@page import="java.io.File"%>
<%@page import="xyz.itwill.dto.ProductDTO"%>
<%@page import="com.oreilly.servlet.multipart.DefaultFileRenamePolicy"%>
<%@page import="com.oreilly.servlet.MultipartRequest"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

//<%-- 제품정보를 전달받아 PRODUCT 테이블에 저장된 해당 제품정보를 변경하고 제품정보 출력페이지
//(product_detail.jsp)로 이동하기 위한 URL주소를 클라이언트에게 전달하는 JSP 문서 - 제품번호 전달 --%>
//<%-- => 제품 관련 이미지가 전달된 경우 기존 이미지를 삭제하고 새로운 이미지를 서버 디렉토리에 저장 --%>

//<%-- => 관리자만 요청 가능한 JSP 문서 --%>
<%@include file="/security/admin_check.jspf" %>

<%
	//1.
	//비정상적인 요청에 대한 응답 처리
	if(request.getMethod().equals("GET")){
		out.println("<script type='text/javascript'>");
		out.println("location.href='"+request.getContextPath()+"/index.jsp?workgroup=error&work=error_400';");
		out.println("</script>");
		return;
	}
	
	//2.
	//전달받은 파일을 저장하기 위한 서버 디렉토리의 시스템 경로를 반환받아 저장
	String saveDirectory =request.getServletContext().getRealPath("/product_image");

	//3.
	//[multipart/form-data]를 처리하기 위한 MultipartRequest 객체 생성
	// => 사용자로부터 입력받아 전달된 모든 파일을 서버 디렉토리에 자동으로 저장 - 파일 업로드
	MultipartRequest multipartRequest=new MultipartRequest(request, saveDirectory
				, 30*1024*1024, "utf-8", new DefaultFileRenamePolicy());

	//4.
	//전달값과 업로드된 파일명을 반환받아 저장
	int num=Integer.parseInt(multipartRequest.getParameter("num"));
	String currentImageMain=multipartRequest.getParameter("currentImageMain");
	String currentImageDetail=multipartRequest.getParameter("currentImageDetail");
	String category=multipartRequest.getParameter("category");
	String name=multipartRequest.getParameter("name");
	String imageMain=multipartRequest.getFilesystemName("imageMain");
	String imageDetail=multipartRequest.getFilesystemName("imageDetail");
	int qty=Integer.parseInt(multipartRequest.getParameter("qty"));
	int price=Integer.parseInt(multipartRequest.getParameter("price"));

	//5.
	//ProductDTO 객체를 생성하여 전달값과 업로드 파일명으로 필드값 변경
	ProductDTO product = new ProductDTO();
	product.setNum(num);
	product.setCategory(category);
	product.setName(name);
	if(imageMain==null){ //전달된 대표이미지 파일이 없는 경우
		product.setImageMain(currentImageMain);
	} else {
		product.setImageMain(imageMain);
		//서버 디렉토리에 저장된 기존 제품의 대표이미지 파일 삭제
		new File(saveDirectory, currentImageMain).delete();
	}
	if(imageDetail==null){ //전달된 상세이미지 파일이 없는 경우
		product.setImageDetail(currentImageDetail);
	} else {
		product.setImageDetail(imageDetail);
		//서버 디렉토리에 저장된 기존 제품의 상세이미지 파일 삭제
		new File(saveDirectory, currentImageDetail).delete();
	}
	product.setQty(qty);
	product.setPrice(price);

	//6.
	//제품정보를 전달받아 PRODUCT 테이블에 저장된 해당 제품정보를 변경하는 DAO 클래스의 메소드 호출
	ProductDAO.getDAO().updateProduct(product);

	//7.
	//페이지이동
	out.println("<script type='text/javascript'>");
	out.println("location.href='"+request.getContextPath()+"/index.jsp?workgroup=admin&work=product_detail&num="+product.getNum()+"';");
	out.println("</script>");

%>