[97일차] 상품 상세페이지 버튼 추가 / 관리자 주문목록 페이지

20221209(금)

• 목차
  - 상품 상세페이지에 장바구니와 바로가기 버튼 삽입
  - 관리자 주문목록 페이지

---

< 상품 상세페이지에 장바구니와 바로가기 버튼 삽입 >

- 상품 리스트 페이지가 아닌, 상품 하나의 상세페이지에서 장바구니와 바로가기 버튼 삽입하기

- productDetail.jsp 파일

(1) 버튼 추가

 

(2) productList.jsp와 productDetail.jsp 코드차이 확인하기!(중요)

     - this쓰고 안쓰고 차이

 

(3)  ajax 코드 변경

 

 

 

ex) 실행화면

 ➡ 수량 설정 후 각 버튼을 누르면 바로가기 창 / 장바구니 창으로 연결된다.

 

 

---

< 관리자 주문목록 페이지 >

- 관리자 페이지에서 어떤 상품이 얼마나 주문되었는지 확인할 수 있도록 하는 페이지

1. AdOrderMapper.java

---

2. AdOrderMapper.xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.docmall.mapper.AdOrderMapper">

	<sql id="criteria">
	
		<trim prefix="(" suffix=") AND " prefixOverrides="OR">
			<foreach collection="cri.typeArr" item="type">
			  <trim prefix="OR">
			  	<choose>
			  		<when test="cri.type == 'O'.toString()">
			  			ODR_CODE like '%' || #{cri.keyword} || '%'
			  		</when>
			  		<when test="cri.type == 'M'.toString()">
			  			MEM_ID like '%' || #{cri.keyword} || '%'
			  		</when>
			  	</choose>
			  </trim>
			</foreach>
		</trim>
	
	</sql>
	
	<select id="getOrderList" resultType="com.docmall.domain.OrderVO">
	
		<![CDATA[
		SELECT 
			RN, ODR_CODE, ODR_DATE, MEM_ID, ODR_NAME, ODR_TOTAL_PRICE  
		FROM (
	        SELECT 
	        	/*+ INDEX_DESC(ord PK_ORDER_CODE) */  
                ROWNUM RN, ORD.ODR_CODE, ORD.ODR_DATE, ORD.MEM_ID, ORD.ODR_NAME, ORD.ODR_TOTAL_PRICE
	        FROM 
	        	ORDER_TBL ord
            WHERE  
	    ]]>   	
	       	<include refid="criteria" />  
	    <![CDATA[    	
	       	ROWNUM <= #{cri.pageNum} * #{cri.amount}
				)
			WHERE
				RN > (#{cri.pageNum} - 1) * #{cri.amount}
		]]>
	
	</select>
	
	<select id="getOrderTotalCount" resultType="int">
	
		SELECT COUNT(*) FROM ORDER_TBL WHERE
		
		<include refid="criteria" />
		
		ODR_CODE > 0
	
	</select>

</mapper>

---

3. AdOrderService.java  &  AdOrderServiceImpl.java

---

4. AdOrderController.java

---

5. orderList.jsp 생성(admin > order 폴더 생성 후)

- admin_menu.jsp 복붙 후 코드 수정

<div class="row">
    <div class="col-md-2">진행상태</div>
    <div class="col-md-8">
        <button type="button" class="btn btn-link" style="width: 100px;" name="btnOderStatus" data-odr_status="전체">전체</button>
        <button type="button" class="btn btn-link" style="width: 100px;" name="btnOderStatus" data-odr_status="주문접수">주문접수(${orderStatus1})</button>
        <button type="button" class="btn btn-link" style="width: 100px;" name="btnOderStatus" data-odr_status="결제완료">결제완료(${orderStatus2})</button>
        <button type="button" class="btn btn-link" style="width: 100px;" name="btnOderStatus" data-odr_status="배송준비중">배송준비중(${orderStatus3})</button>
        <button type="button" class="btn btn-link" style="width: 100px;" name="btnOderStatus" data-odr_status="배송처리">배송처리(${orderStatus4})</button>
        <button type="button" class="btn btn-link" style="width: 100px;" name="btnOderStatus" data-odr_status="배송완료">배송완료(${orderStatus5})</button>
  <button type="button" class="btn btn-link" style="width: 100px;" name="btnOderStatus" data-odr_status="주문취소">주문취소(${orderStatus6})</button>
        <button type="button" class="btn btn-link" style="width: 100px;" name="btnOderStatus" data-odr_status="미주문">미주문(${orderStatus7})</button>
    </div>
</div>

<div class="row">
<div class="col-md-2">&nbsp;</div>
<div class="col-md-8">
        <button type="button" class="btn btn-link" style="width: 100px;" name="btnOderStatus" data-odr_status="취소요청">취소요청(${orderStatus8})</button>
        <button type="button" class="btn btn-link" style="width: 100px;" name="btnOderStatus" data-odr_status="취소완료">취소완료(${orderStatus9})</button>
        <button type="button" class="btn btn-link" style="width: 100px;" name="btnOderStatus" data-odr_status="교환요청">교환요청(${orderStatus10})</button>
        <button type="button" class="btn btn-link" style="width: 100px;" name="btnOderStatus" data-odr_status="교환완료">교환완료(${orderStatus11})</button>
    </div>
</div>
<form id="searchForm" action="" method="get">
<div class="row">
    <div class="col-md-2">기간</div>
    <div class="col-md-8">
        <input type="date" name="startDate"> ~ <input type="date" name="endDate">  
    </div>
</div>
<div class="row">
    <div class="col-md-2">검색</div>
    <div class="col-md-6">
        <!-- 1)검색폼 -->

      <select name="type">
          <option value="" <c:out value="${pageMaker.cri.type == null ? 'selected' : '' }" />>--</option>
          <option value="O" <c:out value="${pageMaker.cri.type eq 'O' ? 'selected' : '' }" />>주문번호</option>
          <option value="M" <c:out value="${pageMaker.cri.type eq 'M' ? 'selected' : '' }" />>주문자ID</option>
          <option value="OM" <c:out value="${pageMaker.cri.type eq 'OM' ? 'selected' : '' }" />>주문번호 or 주문자ID</option>
      </select>
      <input type="text" name="keyword" value="${pageMaker.cri.keyword }">
      <input type="hidden" name="pageNum" value="${pageMaker.cri.pageNum }">
      <input type="hidden" name="amount" value="${pageMaker.cri.amount }">
      <button type="button" id="btnSearch" class="btn btn-link">Search</button>

    </div>
</div>
</form>
<div class="row">
    <div class="col-md-12">
        <div class="box box-primary">
            <div class="box-header">
                LIST ORDER
            </div>
            <div class="box-body">

<table class="table table-hover">
  <thead>
    <tr>
    <th scope="col"><input type="checkbox" id="checkAll" name="checkAll"></th>
      <th scope="col">주문번호</th>
      <th scope="col">주문일시</th>
      <th scope="col">주문자/수령인</th>
      <th scope="col">주문금액/배송비</th>
      <th scope="col">결제상태</th>
      <th scope="col">주문상태</th>
      <th scope="col">기능</th>
    </tr>
  </thead>
  <tbody>
    <c:forEach items="${orderList }" var="orderVO">
    <!-- BoardVO클래스의 필드명으로 코딩했지만, 호출은 getter메서드가 사용됨. -->
    <tr>
    <td><input type="checkbox" class="check"></td>
      <td><span class="odr_code">${orderVO.odr_code}</span></td>
      <td><fmt:formatDate value="${orderVO.odr_date}" pattern="yyyy-MM-dd hh:mm"/></td>
      <td>${orderVO.mem_id} / ${orderVO.odr_name}</td>
      <td>${orderVO.odr_total_price}</td>
      <td>결제상태</td>
      <td>
        <select name="odr_status">
            <option value="전체" ${orderVO.odr_status eq '전체' ? 'selected':''}>전체</option>
            <option value="주문접수" ${orderVO.odr_status eq '주문접수' ? 'selected':''}>주문접수</option>
            <option value="결제완료" ${orderVO.odr_status eq '결제완료' ? 'selected':''}>결제완료</option>
            <option value="배송준비중" ${orderVO.odr_status eq '배송준비중' ? 'selected':''}>배송준비중</option>
            <option value="배송처리" ${orderVO.odr_status eq '배송처리' ? 'selected':''}>배송처리</option>
            <option value="배송완료" ${orderVO.odr_status eq '배송완료' ? 'selected':''}>배송완료</option>
            <option value="주문취소" ${orderVO.odr_status eq '주문취소' ? 'selected':''}>주문취소</option>
            <option value="미주문" ${orderVO.odr_status eq '미주문' ? 'selected':''}>미주문</option>
            <option value="취소요청" ${orderVO.odr_status eq '취소요청' ? 'selected':''}>취소요청</option>
            <option value="취소완료" ${orderVO.odr_status eq '취소완료' ? 'selected':''}>취소완료</option>
            <option value="교환요청" ${orderVO.odr_status eq '교환요청' ? 'selected':''}>교환요청</option>
            <option value="교환완료" ${orderVO.odr_status eq '교환완료' ? 'selected':''}>교환완료</option>
        </select>
      </td>
      <td>

        <button type="button" name="btnOrderStatusChange" class="btn btn-link">적용</button>
        <button type="button" name="btnOrderDetail1" class="btn btn-link">상세보기1</button>
      <button type="button" name="btnOrderDetail2" class="btn btn-link">상세보기2</button>
      <button type="button" name="btnOrderDelete" class="btn btn-link">삭제</button>
      </td>
    </tr>
    </c:forEach>

  </tbody>
</table>
<nav aria-label="...">
  <ul class="pagination">
    <!-- 이전표시 -->
    <c:if test="${pageMaker.prev }">
        <li class="page-item">
          <a class="page-link" href="${pageMaker.startPage - 1 }">Previous</a>
        </li>
    </c:if>

    <!-- 페이지번호 표시.  1  2  3  4  5 -->

    <c:forEach begin="${pageMaker.startPage }" end="${pageMaker.endPage }" var="num" >
        <li class='page-item ${pageMaker.cri.pageNum == num ? "active": "" }'><a class="page-link" href="${num}">${num}</a></li>
    </c:forEach>
    <!-- 
    <li class="page-item active" aria-current="page">
      <span class="page-link">2</span>
    </li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
     -->
    <!-- 다음표시 -->
    <c:if test="${pageMaker.next }">
        <li class="page-item">
          <a class="page-link" href="${pageMaker.endPage + 1 }">Next</a>
        </li>
    </c:if>

  </ul>
  <!--1)페이지 번호 클릭시-->
    <form id="actionForm" action="" method="get">
        <input type="hidden" name="pageNum" value="${pageMaker.cri.pageNum}">
        <input type="hidden" name="amount" value="${pageMaker.cri.amount}">
        <input type="hidden" name="type" value="${pageMaker.cri.type}">
        <input type="hidden" name="keyword" value="${pageMaker.cri.keyword}">
    </form>
</nav>
            </div>
        </div>
    </div>
 </div>
 <div class="row">
  <div class="col-md-12">
    <button type="button" class="btn btn-link" id="btnCheckedOrderStateChange">선택주문상태변경</button>
  </div>
</div>

</section>

 

 

ex) 실행화면

      - 주소 : http://localhost:8888/admin/order/orderList