국비지원 77일차 - 쇼핑몰 상품 목록, 상품 정보 ,MyBatis 모듈화

상품 목록 가져오기,
Mapper

	<select id="getProductList" resultType="Product">
		select up.upCg_code, up.upCg_name, d.downCg_code, d.downCg_name, p.*
		from upCategory up right outer join product p
		on up.upCg_code = p.upCg_code
		left outer join downCategory d
		on p.downCg_code = d.downCg_code order by 1 asc, 3 asc
	</select>

JSP
el 표현식을 사용하기 위해 ProductVO에 getAllCategory를 만들었음
stupidtable 테이블 정렬을 이용해서 정렬도 가능하게했음

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<jsp:include page="/top.jsp"/>
<script type="text/javascript" src="../js/stupidtable.min.js">
</script>
<script>
	$(function(){
		$('#productTable').stupidtable();
	})
</script>
<div class="text-left p-5">
	<h1>Product List [Admin]</h1>
	<table id="productTable" class="table table-striped mt-4">
		<thead>
			<tr class="bg-warging">
				<th data-sort="int">상품번호</th>
				<th>카테고리</th>
				<th data-sort="string">상품명</th>
				<th data-sort="int">정가/판매가</th>
				<th>제조사</th>
				<th>편집|삭제</th>
			</tr>
		</thead>
		<tbody>
			<!-- --------------- -->
			<c:if test="${prodList eq null or empty prodList}">
				<tr>
					<td colspan="6"><b>데이터가 없습ㄴ디ㅏ.</b>
				</tr>
			</c:if>
			<c:if test="${prodList ne null and not empty prodList}">
			<c:forEach items="${prodList}" var="prod">
			<tr>
				<td>${prod.pnum}</td>
				<td>${prod.allCategory}</td>
				<td><h4>${prod.pname}</h4><br>
					<a href="../prodDetail.do?pnum=${prod.pnum}"><img style="width:200px" src="../images/${prod.pimage1}"></a>
				</td>
				<td>${prod.price}원<br>
					<span class="text-danger">${prod.saleprice}</span>
					<span class="badge badge-info">${prod.percent}%할인</span>
				</td>
				<td>${prod.pcompany}</td>
				<td><a>편집</a>|<a>삭제</a></td>
				<td>a</td>
			</tr>
			</c:forEach>
			</c:if>
			<!-- --------------- -->
		</tbody>
	</table>
	<table class="table">
		<tr>
			<td style="width:60%">pageNavi</td>
			<td style="width=:40%"><b>총 상품갯수:${totalCount}개</b></td>
		</tr>
	</table>
</div>
<jsp:include page="/foot.jsp"/>

상품정보

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<jsp:include page="/top.jsp" />

	<div align="center" class="row">
		<c:if test="${prod eq null}">
			<h2 class="text-center text-danger">해당 상품은 존재하지 않아요</h2>
		</c:if>
		<c:if test="${prod ne null}">
			<div class="col-md-10 offset-md-1 table-responsive">
				<table class="table">
					<thead>
						<tr>
							<th colspan="2"><h3 class="text-center">상품 정보</h3></th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td align="center" width="50%">
								<a href="javascript:openPop('${prod.pimage1}')"> 
								<img src="images/${prod.pimage1}" class="img-fluid"
								style="width: 70%;"> <!-- </a> -->
							</td>
							<td align="left" width="50%" style="padding:20px">
								<h4>
									<span class="badge badge-danger"> ${prod.pspec}</span>
								</h4> 상품번호: ${prod.pnum} <br> 상품이름: ${prod.pname} <br> 정가:<del>
									<fmt:formatNumber value="${prod.price}" pattern="###,###" />
								</del>원<br> 판매가:<span style="color: red; font-weight: bold">
									<fmt:formatNumber value="${prod.saleprice}" pattern="###,###" />
							</span>원<br> 할인율:<span style="color: red">${prod.percent}%</span><br> POINT:<b
								style="color: green">[${prod.point}]</b>POINT<br> <!-- form시작---------- -->
								<form name="frm" id="frm" method="GET">
									<!-- 상품번호를 hidden으로 넘기자------ -->
									<input type="hidden" name="pnum" value="${prod.pnum}">
									<!-- -------------------------------- -->
									<label for="oqty">상품갯수</label> <input type="number" name="oqty"
										id="oqty" min="1" max="50" size="2" value="1">

								</form> <!-- form end------------ -->
								<button type="button" onclick="goCart()"
									class="btn btn-primary">장바구니</button>
								<button type="button" onclick="goOrder()"
									class="btn btn-warning">주문하기</button>
								<button type="button" onclick="goWish()" class="btn btn-danger">위시리시트</button>
							</td>
						</tr>
						<tr style="border: 0">
							<td align="center"><img src="images/${prod.pimage2}"
								class="img-fluid img-thumbnail" style="width: 70%;"></td>
							<td align="center"><img src="images/${prod.pimage3}"
								class="img-fluid img-thumbnail" style="width: 70%;"></td>
						</tr>
						<tr>
							<td colspan="2">
								<p>상품설명</p> <pre>${prod.pcontents}</pre>
							</td>
						</tr>
					</tbody>
				</table>
			</div>
	</c:if>
	</div>
	<script type="text/javascript">
	var goCart=function(){
		frm.action="cartAdd.do";
		frm.submit();
	}
	var goOrder=function(){
		frm.action="order.do";
		frm.submit();
	}
	var goWish=function(){
		frm.action="wish.do";
		frm.submit();
	}
	var openPop=function(pimage){
		//alert(pimage);
		var url="images/"+pimage;
		var obj=new Image();
		obj.src=url;
		var w=obj.width+100;
		var h=obj.height+100;
		window.open(url,'preview',"width="+w+",height="+h+",top=100,left=100");
	}
	</script>
	<jsp:include page="/foot.jsp" />

MyBatis모듈화

	<sql id="product_column">
		pnum, upCg_code,downCg_code, pname,
		nvl(pimage1, 'noimage.JPG') pimage1,
		nvl(pimage1, 'noimage.JPG') pimage2,
		nvl(pimage1, 'noimage.JPG') pimage3,
		price, saleprice,pqty,point,pspec,
		pcontents,pcompany,pindate
	</sql>
	<select id="productInfo" resultType="Product" parameterType="_int">
		select 
		<include refid="product_column"/>
		from product where pnum=#{value}
	</select>