Study Web Development

2월 18일

이전으로

Servlet & JSP

9. MVC

mvcPage

프로젝트 생성 및 설정
  1. WEB-INF 폴더의 shop.properties 하단에 다음의 내용을 추가
# 주문 관리/관리자
/order/list.do=kr.order.action.AdminListAction
/order/modifyForm.do=kr.order.action.AdminModifyFormAction
Model
  1. 새 클래스 AdminListAction 생성
package kr.order.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.order.dao.OrderDAO;
import kr.order.vo.OrderVO;
import kr.util.PagingUtil;

public class AdminListAction 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";
		}
		
		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.getOrderCount(keyfield, keyword);
		
		// 페이지 처리
		PagingUtil page = new PagingUtil(keyfield, keyword, Integer.parseInt(pageNum), count, 20, 10, "list.do");
		
		List<OrderVO> list = null;
		if(count>0) {
			list = dao.getListOrder(page.getStartCount(), page.getEndCount(), keyfield, keyword);
		}
		
		request.setAttribute("count", count);
		request.setAttribute("list", list);
		request.setAttribute("pagingHtml", page.getPagingHtml());
		
		// JSP 경로 반환
		return "/WEB-INF/views/order/admin_list.jsp";
	}

}
  1. 새 클래스 AdminModifyFormAction 생성
package kr.order.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.order.dao.OrderDAO;
import kr.order.vo.OrderDetailVO;
import kr.order.vo.OrderVO;

public class AdminModifyFormAction 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";
		}
		
		int order_num = Integer.parseInt(request.getParameter("order_num"));
		
		OrderDAO dao = OrderDAO.getInstance();
		// 주문 정보
		OrderVO order = dao.getOrder(order_num);
		// 개별 상품 목록
		List<OrderDetailVO> detailList = dao.getListOrderDetail(order_num);
		
		request.setAttribute("order", order);
		request.setAttribute("detailList", detailList);
		
		// JSP 경로 반환
		return "/WEB-INF/views/order/admin_modifyForm.jsp";
	}

}
View
  1. order 폴더에 새 JSP 파일 admin_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="list.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>>ID</option>
					<option value="3" <c:if test="${param.keyfield==3}">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 = 'list.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>구매자 ID</th>
			<th>상품명</th>
			<th>총 구매 금액</th>
			<th>주문 날짜</th>
			<th>상태</th>
		</tr>
		<c:forEach var="order" items="${list}">
		<tr>
			<td><a href="modifyForm.do?order_num=${order.order_num}">${order.order_num}</a></td>
			<td>${order.id}</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>
  1. common 폴더의 header.jsp에서 <c:if test="${!empty user_num && user_auth == 3}"> 태그 사이에 다음의 내용을 추가
		<a href="${pageContext.request.contextPath}/order/list.do">주문 관리</a>
  1. order 폴더에 새 JSP 파일 admin_modifyForm.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() {
		$('#order_modify').submit(function() {
			let isValid = true; // submit()의 return 값 지정
			
			$('li').each(function() {
				let input = $(this).find('input[type!="button"]'); // button이 아닌 <input> 태그들만 선택
				if(!input.val().trim()) {
					let word = $(this).find('label').text();
					let post = (word.charCodeAt(word.length-1) - ''.charCodeAt(0)) % 28 > 0 ? '' : '';
					alert(word + post + ' 입력하세요!');
					input.val('').focus();
					isValid = false; // submit()의 return 값 지정
					return false; // each() 루프 중단
				}
			}); // end of each
			
			return isValid;
		}); // end of submit
	});
</script>
</head>
<body>
<div class="page-main">
	<jsp:include page="/WEB-INF/views/common/header.jsp"/>
	<h2>구매 정보 수정</h2>
	<hr size="1" width="100%" noshade>
	<h4>구매 내역</h4>
	<table>
		<tr>
			<th>상품명</th>
			<th>수량</th>
			<th>상품 가격</th>
			<th>합계</th>
		</tr>
		<c:forEach var="detail" items="${detailList}">
		<tr>
			<td>${detail.item_name}</td>
			<td class="align-center"><fmt:formatNumber value="${detail.order_quantity}"/></td>
			<td class="align-center"><fmt:formatNumber value="${detail.item_price}"/></td>
			<td class="align-center"><fmt:formatNumber value="${detail.item_total}"/></td>
		</tr>
		</c:forEach>
		<tr>
			<td colspan="3" class="align-right"><b>총 구매 금액</b></td>
			<td class="align-center"><fmt:formatNumber value="${order.order_total}"/></td>
		</tr>
	</table>
	<form action="modify.do" method="post" id="order_modify">
		<input type="hidden" name="order_num" value="${order.order_num}">
		<ul>
			<li>
				<label for="receive_name">구매자</label>
				<input type="text" name="receive_name" id="receive_name" value="${order.receive_name}" maxlength="10">
			</li>
			<li>
				<label for="zipcode">우편번호</label>
				<input type="text" name="receive_post" id="zipcode" value="${order.receive_post}" maxlength="5">
				<input type="button" value="우편번호 찾기" onclick="sample2_execDaumPostcode()">
			</li>
			<li>
				<label for="address1">주소</label>
				<input type="text" name="receive_address1" id="address1" value="${order.receive_address1}" maxlength="30">
			</li>
			<li>
				<label for="address2">상세 주소</label>
				<input type="text" name="receive_address2" id="address2" value="${order.receive_address2}" maxlength="30">
			</li>
			<li>
				<label for="receive_phone">전화번호</label>
				<input type="text" name="receive_phone" id="receive_phone" value="${order.receive_phone}" maxlength="15">
			</li>
			<li>
				<label>결제 수단</label>
				<input type="radio" name="payment" id="payment1" value="1" <c:if test="${order.payment==1}">checked</c:if>>통장 입금
				<input type="radio" name="payment" id="payment2" value="2" <c:if test="${order.payment==2}">checked</c:if>>카드 결제
			</li>
			<li>
				<label for="status">배송 상태</label>
				<c:if test="${order.status!=5}">
				<input type="radio" name="status" id="status1" value="1" <c:if test="${order.status==1}">checked</c:if>>배송 대기
				<input type="radio" name="status" id="status2" value="2" <c:if test="${order.status==2}">checked</c:if>>배송 준비 중
				<input type="radio" name="status" id="status3" value="3" <c:if test="${order.status==3}">checked</c:if>>배송 중
				<input type="radio" name="status" id="status4" value="4" <c:if test="${order.status==4}">checked</c:if>>배송 완료
				</c:if>
				<input type="radio" name="status" id="status5" value="5" <c:if test="${order.status==5}">checked</c:if>>주문 취소
			</li>
			<li>
				<label for="notice">남기실 말씀</label>
				<textarea rows="5" cols="30" name="notice" id="notice">${order.notice}</textarea>
			</li>
		</ul>
		<div class="align-center">
			<c:if test="${order.status!=5}">
			<input type="submit" value="수정">
			</c:if>
			<input type="button" value="삭제" onclick="location.href = 'deleteOrder.do?oder_num=${order.order_num}';">
			<input type="button" value="홈으로" onclick="location.href = '${pageContext.request.contextPath}/main/main.do';">
		</div>
	</form>
<!-- 우편번호 스크립트 시작 -->
<!-- iOS에서는 position:fixed 버그가 있음, 적용하는 사이트에 맞게 position:absolute 등을 이용하여 top,left값 조정 필요 -->
<div id="layer" style="display:none;position:fixed;overflow:hidden;z-index:1;-webkit-overflow-scrolling:touch;">
<img src="//t1.daumcdn.net/postcode/resource/images/close.png" id="btnCloseLayer" style="cursor:pointer;position:absolute;right:-3px;top:-3px;z-index:1" onclick="closeDaumPostcode()" alt="닫기 버튼">
</div>

<script src="//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>
<script>
    // 우편번호 찾기 화면을 넣을 element
    var element_layer = document.getElementById('layer');

    function closeDaumPostcode() {
        // iframe을 넣은 element를 안보이게 한다.
        element_layer.style.display = 'none';
    }

    function sample2_execDaumPostcode() {
        new daum.Postcode({
            oncomplete: function(data) {
                // 검색결과 항목을 클릭했을때 실행할 코드를 작성하는 부분.

                // 각 주소의 노출 규칙에 따라 주소를 조합한다.
                // 내려오는 변수가 값이 없는 경우엔 공백('')값을 가지므로, 이를 참고하여 분기 한다.
                var addr = ''; // 주소 변수
                var extraAddr = ''; // 참고항목 변수

                //사용자가 선택한 주소 타입에 따라 해당 주소 값을 가져온다.
                if (data.userSelectedType === 'R') { // 사용자가 도로명 주소를 선택했을 경우
                    addr = data.roadAddress;
                } else { // 사용자가 지번 주소를 선택했을 경우(J)
                    addr = data.jibunAddress;
                }

                // 사용자가 선택한 주소가 도로명 타입일때 참고항목을 조합한다.
                if(data.userSelectedType === 'R'){
                    // 법정동명이 있을 경우 추가한다. (법정리는 제외)
                    // 법정동의 경우 마지막 문자가 "동/로/가"로 끝난다.
                    if(data.bname !== '' && /[동|로|가]$/g.test(data.bname)){
                        extraAddr += data.bname;
                    }
                    // 건물명이 있고, 공동주택일 경우 추가한다.
                    if(data.buildingName !== '' && data.apartment === 'Y'){
                        extraAddr += (extraAddr !== '' ? ', ' + data.buildingName : data.buildingName);
                    }
                    // 표시할 참고항목이 있을 경우, 괄호까지 추가한 최종 문자열을 만든다.
                    if(extraAddr !== ''){
                        extraAddr = ' (' + extraAddr + ')';
                    }
                    //(주의)address1에 참고항목이 보여지도록 수정
                    // 조합된 참고항목을 해당 필드에 넣는다.
                    //(수정) document.getElementById("address2").value = extraAddr;
                
                } 
                //(수정) else {
                //(수정)    document.getElementById("address2").value = '';
                //(수정) }

                // 우편번호와 주소 정보를 해당 필드에 넣는다.
                document.getElementById('zipcode').value = data.zonecode;
                //(수정) + extraAddr를 추가해서 address1에 참고항목이 보여지도록 수정
                document.getElementById("address1").value = addr + extraAddr;
                // 커서를 상세주소 필드로 이동한다.
                document.getElementById("address2").focus();

                // iframe을 넣은 element를 안보이게 한다.
                // (autoClose:false 기능을 이용한다면, 아래 코드를 제거해야 화면에서 사라지지 않는다.)
                element_layer.style.display = 'none';
            },
            width : '100%',
            height : '100%',
            maxSuggestItems : 5
        }).embed(element_layer);

        // iframe을 넣은 element를 보이게 한다.
        element_layer.style.display = 'block';

        // iframe을 넣은 element의 위치를 화면의 가운데로 이동시킨다.
        initLayerPosition();
    }

    // 브라우저의 크기 변경에 따라 레이어를 가운데로 이동시키고자 하실때에는
    // resize이벤트나, orientationchange이벤트를 이용하여 값이 변경될때마다 아래 함수를 실행 시켜 주시거나,
    // 직접 element_layer의 top,left값을 수정해 주시면 됩니다.
    function initLayerPosition(){
        var width = 300; //우편번호서비스가 들어갈 element의 width
        var height = 400; //우편번호서비스가 들어갈 element의 height
        var borderWidth = 5; //샘플에서 사용하는 border의 두께

        // 위에서 선언한 값들을 실제 element에 넣는다.
        element_layer.style.width = width + 'px';
        element_layer.style.height = height + 'px';
        element_layer.style.border = borderWidth + 'px solid';
        // 실행되는 순간의 화면 너비와 높이 값을 가져와서 중앙에 뜰 수 있도록 위치를 계산한다.
        element_layer.style.left = (((window.innerWidth || document.documentElement.clientWidth) - width)/2 - borderWidth) + 'px';
        element_layer.style.top = (((window.innerHeight || document.documentElement.clientHeight) - height)/2 - borderWidth) + 'px';
    }
</script>
<!-- 우편번호 스크립트 끝 -->
</div>
</body>
</html>

다음으로