Study Web Development

2월 21일

Servlet & JSP

9. MVC

`mvcPage`

프로젝트 생성 및 설정

WEB-INF 폴더의 shop.properties 하단에 다음의 내용을 추가

# 주문 관리/관리자
/order/modify.do=kr.order.action.AdminModifyAction
# 주문 관리/사용자
/order/orderList.do=kr.order.action.OrderListAction

Model

새 클래스 AdminModifyAction 생성

package kr.order.action;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;

import kr.controller.Action;
import kr.order.dao.OrderDAO;
import kr.order.vo.OrderVO;

public class AdminModifyAction implements Action {

	@Override
	public String execute(HttpServletRequest request, HttpServletResponse response) throws Exception {
		HttpSession session = request.getSession();
		Integer user_num = (Integer)session.getAttribute("user_num");
		if(user_num==null) { // 로그인되어 있지 않은 경우
			return "redirect:/member/loginForm.do";
		}
		
		Integer user_auth = (Integer)session.getAttribute("user_auth");
		if(user_auth!=3) { // 관리자로 로그인하지 않은 경우
			return "/WEB-INF/views/common/notice.jsp";
		}
		
		// 관리자로 로그인된 상태
		request.setCharacterEncoding("UTF-8");
		
		OrderVO order = new OrderVO();
		order.setOrder_num(Integer.parseInt(request.getParameter("order_num")));
		order.setPayment(Integer.parseInt(request.getParameter("payment")));
		order.setStatus(Integer.parseInt(request.getParameter("status")));
		order.setReceive_name(request.getParameter("receive_name"));
		order.setReceive_post(request.getParameter("receive_post"));
		order.setReceive_address1(request.getParameter("receive_address1"));
		order.setReceive_address2(request.getParameter("receive_address2"));
		order.setReceive_phone(request.getParameter("receive_phone"));
		order.setNotice(request.getParameter("notice"));
		
		OrderDAO orderDAO = OrderDAO.getInstance();
		orderDAO.updateOrder(order);

		return "redirect:/order/list.do";
	}

}

새 클래스 OrderListAction 생성

package kr.order.action;

import java.util.Collections;
import java.util.List;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;

import kr.controller.Action;
import kr.order.dao.OrderDAO;
import kr.order.vo.OrderVO;
import kr.util.PagingUtil;

public class OrderListAction implements Action {

	@Override
	public String execute(HttpServletRequest request, HttpServletResponse response) throws Exception {
		HttpSession session = request.getSession();
		Integer user_num = (Integer)session.getAttribute("user_num");
		if(user_num==null) { // 로그인되어 있지 않은 경우
			return "redirect:/member/loginForm.do";
		}
		
		// 로그인되어 있는 경우
		String pageNum = request.getParameter("pageNum");
		if(pageNum==null) pageNum = "1";
		
		String keyfield = request.getParameter("keyfield");
		String keyword = request.getParameter("keyword");
		
		OrderDAO dao = OrderDAO.getInstance();
		int count = dao.getOrderCountByMem_num(keyfield, keyword, user_num);
		
		// 페이지 처리
		PagingUtil page = new PagingUtil(keyfield, keyword, Integer.parseInt(pageNum), count, 20, 10, "orderList.do");
		
		List<OrderVO> list = null;
		if(count>0) {
			list = dao.getOrderByMem_num(page.getStartCount(), page.getEndCount(), keyfield, keyword, user_num);	
		}
		else {
			list = Collections.emptyList();
		}
		
		request.setAttribute("count", count);
		request.setAttribute("list", list);
		request.setAttribute("pagingHtml", page.getPagingHtml());
		
		// JSP 경로 반환
		return "/WEB-INF/views/order/order_list.jsp";
	}

}

kr.member.action 패키지의 MyPageAction 클래스를 다음처럼 수정

package kr.member.action;

import java.util.List;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;

import kr.controller.Action;
import kr.member.dao.MemberDAO;
import kr.member.vo.MemberVO;
import kr.order.dao.OrderDAO;
import kr.order.vo.OrderVO;

public class MyPageAction implements Action {

	@Override
	public String execute(HttpServletRequest request, HttpServletResponse response) throws Exception {
		HttpSession session = request.getSession();
		Integer user_num = (Integer)session.getAttribute("user_num");
		if(user_num==null) { // 로그인되어 있지 않은 경우
			return "redirect:/member/loginForm.do"; // 클라이언트가 호출 가능한 영역(*.do 형식)은 redirect로 처리
		}
		
		// 로그인되어 있는 경우
		// 회원 정보
		MemberDAO dao = MemberDAO.getInstance();
		MemberVO member = dao.getMember(user_num);
		
		// 구매 상품 정보
		OrderDAO orderDao = OrderDAO.getInstance(); 
		List<OrderVO> orderList = orderDao.getOrderByMem_num(1, 5, null, null, user_num);
		
		request.setAttribute("member", member);
		request.setAttribute("orderList", orderList);
		
		// JSP 경로 반환
		return "/WEB-INF/views/member/myPage.jsp"; // 클라이언트가 호출 불가한 영역(WEB-INF 폴더 하위의 JSP 파일들)은 forward로 처리
	}

}

View

order 폴더에 새 JSP 파일 order_list.jsp 생성

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>구매 목록</title>
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/layout.css">
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
	$(function() {
		$('#search_form').on('submit', function() {
			if($('#keyword').val().trim()=='') {
				alert('검색어를 입력하세요!');
				$('#keyword').val('').focus();
				return false;
			}
			if($('#keyfield').val()==1 && isNaN($('#keyword').val())) {
				alert('주문번호는 숫자만 입력하세요!');
				$('#keyword').val('').focus();
				return false;
			}
		});
	});
</script>
</head>
<body>
<div class="page-main">
	<jsp:include page="/WEB-INF/views/common/header.jsp"/>
	<h2>구매 목록</h2>
	<form action="orderList.do" method="get" id="search_form">
		<ul class="search">
			<li>
				<select name="keyfield" id="keyfield">
					<option value="1" <c:if test="${param.keyfield==1}">selected</c:if>>주문번호</option>
					<option value="2" <c:if test="${param.keyfield==2}">selected</c:if>>상품명</option>
				</select>
			</li>
			<li>
				<input type="search" size="16" name="keyword" id="keyword" value="${param.keyword}">
			</li>
			<li>
				<input type="submit" value="검색">
			</li>
		</ul>
	</form>
	<div class="list-space align-right">
		<input type="button" value="목록" onclick="location.href = 'orderList.do';">
		<input type="button" value="홈으로" onclick="location.href = '${pageContext.request.contextPath}/main/main.do';">
	</div>
	<c:if test="${count==0}">
	<div class="result-display">
		표시할 주문 내역이 없습니다.
	</div>
	</c:if>
	<c:if test="${count>0}">
	<table>
		<tr>
			<th>주문번호</th>
			<th>상품명</th>
			<th>총 구매 금액</th>
			<th>주문 날짜</th>
			<th>상태</th>
		</tr>
		<c:forEach var="order" items="${list}">
		<tr>
			<td><a href="orderModifyForm.do?order_num=${order.order_num}">${order.order_num}</a></td>
			<td>${order.item_name}</td>
			<td><fmt:formatNumber value="${order.order_total}"/>원</td>
			<td>${order.reg_date}</td>
			<td>
				<c:if test="${order.status==1}">배송 대기</c:if>
				<c:if test="${order.status==2}">배송 준비 중</c:if>
				<c:if test="${order.status==3}">배송 중</c:if>
				<c:if test="${order.status==4}">배송 완료</c:if>
				<c:if test="${order.status==5}">주문 취소</c:if>
			</td>
		</tr>
		</c:forEach>
	</table>
	<div class="align-center">
		${pagingHtml}
	</div>
	</c:if>
</div>
</body>
</html>

member 폴더의 myPage.jsp를 다음처럼 수정

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>My Page</title>
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/layout.css">
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
	$(function() {
		let photo_path = $('.my-photo').attr('src'); // 이미지 경로를 담을 변수; 원래 이미지를 처음 프로필 사진으로 지정
		let my_photo; // File 객체를 담을 변수
		
		$('#photo_btn').click(function() {
			$('#photo_choice').show();
			$(this).hide(); // 수정 버튼 감추기
		}); // end of click
		
		// 이미지 미리보기 취소
		$('#photo_reset').click(function() {
			$('.my-photo').attr('src', photo_path); // 미리보기 전 원래 이미지로 되돌리기
			$('#photo').val(''); // <input type="file"> 태그에서 선택한 파일 정보 지우기
			$('#photo_choice').hide();
			$('#photo_btn').show(); // 수정 버튼 보이기
		}); // end of click
		
		// 이미지 선택 및 이미지 미리보기
		$('#photo').change(function() {
			my_photo = this.files[0];
			if(!my_photo) {
				$('.my-photo').attr('src', photo_path); // 파일 선택 취소시 원래 이미지로 되돌리기
				return;
			}
			
			if(my_photo.size>1024*1024) {
				alert('1MB까지만 업로드 가능합니다!');
				$(this).val('');
				return;
			}
			
			let reader = new FileReader();
			reader.readAsDataURL(my_photo);
			
			reader.onload = function() {
				$('.my-photo').attr('src', reader.result);
			}; // end of onload
		}); // end of change
		
		// 이미지 전송
		$('#photo_submit').click(function() {
			if($('#photo').val()=='') {
				alert('이미지를 선택하세요!');
				$('#photo').focus();
				return;
			}
			
			// 파일 전송
			let form_data = new FormData(); // FormData 객체에 저장된 key와 value는 <form> 태그의 입력 필드와 같은 효과
			form_data.append('photo', my_photo); // photo는 식별자, my_photo는 선택된 파일 정보
			$.ajax({
				url:'updateMyPhoto.do',
				type:'post',
				data:form_data,
				dataType:'json',
				contentType:false, // 기본값은 "application/x-www-form-urlencoded; charset=UTF-8"이며, "multipart/form-data"로 전송되게 하기 위해 false로 설정
		        processData:false, // true일 경우 jQuery 내부적으로 key와 value를 Query String으로 변환; 일반 문자열이 아니라 파일로 전송되어야 하므로 false로 설정
				enctype:'multipart/form-data',
				success:function(param) {
					if(param.result=='logout') {
						alert('로그인 후 사용하세요!');
					}
					else if(param.result=='success') {
						alert('프로필 사진이 수정되었습니다.');
						photo_path = $('.my-photo').attr('src'); // 원래 이미지를 수정한 프로필 사진으로 갱신
						$('#photo').val('');
						$('#photo_choice').hide();
						$('#photo_btn').show();
					}
					else {
						alert('파일 전송 오류 발생!');
					}
				},
				error:function() {
					alert('네트워크 오류 발생!');
				}
			}); // end of ajax
		}); // end of click
	});
</script>
</head>
<body>
<div class="page-main">
	<jsp:include page="/WEB-INF/views/common/header.jsp"/>
	<h2>회원 정보</h2>
	<div class="mypage-div">
		<h3>프로필 사진</h3>
		<ul>
			<li>
				<c:if test="${empty member.photo}">
				<img src="${pageContext.request.contextPath}/images/face.png" width="200" height="200" class="my-photo">
				</c:if>
				<c:if test="${!empty member.photo}">
				<img src="${pageContext.request.contextPath}/upload/${member.photo}" width="200" height="200" class="my-photo">
				</c:if>
			</li>
			<li>
				<div class="align-center">
					<input type="button" value="수정" id="photo_btn">
				</div>
				<div id="photo_choice" style="display: none;">
					<input type="file" id="photo" accept="image/gif, image/png, image/jpeg">
					<input type="button" value="전송" id="photo_submit">
					<input type="button" value="취소" id="photo_reset">
				</div>
			</li>
		</ul>
		<h3>회원 탈퇴</h3>
		<ul>
			<li>
				<input type="button" value="회원 탈퇴" onclick="location.href = 'deleteUserForm.do';"> <%-- myPage.do와 같은 폴더에 있으므로 Context Path 생략 가능 --%>
			</li>
		</ul>
	</div>
	<div class="mypage-div">
		<h3>연락처</h3>
		<ul>
			<li>
				이름 : ${member.name}
			</li>
			<li>
				전화번호 : ${member.phone}
			</li>
			<li>
				이메일 : ${member.email}
			</li>
			<li>
				우편번호 : ${member.zipcode}
			</li>
			<li>
				주소 : ${member.address1} ${member.address2}
			</li>
			<li>
				가입일 : ${member.reg_date}
			</li>
			<c:if test="${!empty member.modify_date}">
			<li>
				최근 정보 수정일 : ${member.modify_date}
			</li>
			</c:if>
			<li>
				<input type="button" value="연락처 수정" onclick="location.href = 'modifyUserForm.do';">
			</li>
		</ul>
		<h3>비밀번호 수정</h3>
		<ul>
			<li>
				<input type="button" value="비밀번호 수정" onclick="location.href = 'modifyPasswordForm.do';">
			</li>
		</ul>
		<h3>상품 구매 목록</h3>
		<ul>
			<li>
				<c:forEach var="order" items="${orderList}">
				<div>
					<a href="${pageContext.request.contextPath}/order/orderModifyForm.do?order_num=${order.order_num}">
						${order.order_num} ${order.item_name} ${order.reg_date}
					<c:if test="${order.status==1}">배송 대기</c:if>
					<c:if test="${order.status==2}">배송 준비 중</c:if>
					<c:if test="${order.status==3}">배송 중</c:if>
					<c:if test="${order.status==4}">배송 완료</c:if>
					<c:if test="${order.status==5}">주문 취소</c:if>
					</a>
				</div>
				</c:forEach>
			</li>
			<li>
				<input type="button" value="구매 목록 보기" onclick="location.href = '${pageContext.request.contextPath}/order/orderList.do';">
			</li>
		</ul>
	</div>
</div>
</body>
</html>

다음으로