[Spring][쇼핑몰 프로젝트][31] 상품 목록 화면 구현 - 2
https://kimvampa.tistory.com/249
This commit is contained in:
SeoJin Kim
@@ -41,7 +41,7 @@
|
|||||||
select * from(
|
select * from(
|
||||||
select /*+INDEX_DESC(vam_book SYS_C008227)*/ rownum as rn, bookId, bookName,
|
select /*+INDEX_DESC(vam_book SYS_C008227)*/ rownum as rn, bookId, bookName,
|
||||||
(select authorName from vam_author where vam_book.authorId = vam_author.authorId) authorName, authorId,
|
(select authorName from vam_author where vam_book.authorId = vam_author.authorId) authorName, authorId,
|
||||||
(select cateName from vam_bcate where vam_book.cateCode = vam_bcate.cateCode) cateName,cateCode, publisher, publeYear, bookPrice
|
(select cateName from vam_bcate where vam_book.cateCode = vam_bcate.cateCode) cateName,cateCode, publisher, publeYear, bookPrice,bookDiscount
|
||||||
from vam_book
|
from vam_book
|
||||||
where
|
where
|
||||||
]]>
|
]]>
|
||||||
|
|||||||
@@ -59,7 +59,7 @@
|
|||||||
<option value="T">책 제목</option>
|
<option value="T">책 제목</option>
|
||||||
<option value="A">작가</option>
|
<option value="A">작가</option>
|
||||||
</select>
|
</select>
|
||||||
<input type="text" name="keyword">
|
<input type="text" name="keyword" value="<c:out value="${pageMaker.cri.keyword}"/>">
|
||||||
<button class='btn search_btn'>검 색</button>
|
<button class='btn search_btn'>검 색</button>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
@@ -90,6 +90,91 @@
|
|||||||
|
|
||||||
<!-- 게시물 o -->
|
<!-- 게시물 o -->
|
||||||
<c:if test="${listcheck != 'empty'}">
|
<c:if test="${listcheck != 'empty'}">
|
||||||
|
|
||||||
|
<div class="list_search_result">
|
||||||
|
<table class="type_list">
|
||||||
|
<colgroup>
|
||||||
|
<col width="110">
|
||||||
|
<col width="*">
|
||||||
|
<col width="120">
|
||||||
|
<col width="120">
|
||||||
|
<col width="120">
|
||||||
|
</colgroup>
|
||||||
|
<tbody id="searchList>">
|
||||||
|
<c:forEach items="${list}" var="list">
|
||||||
|
<tr>
|
||||||
|
<td class="image"></td>
|
||||||
|
<td class="detail">
|
||||||
|
<div class="category">
|
||||||
|
[${list.cateName}]
|
||||||
|
</div>
|
||||||
|
<div class="title">
|
||||||
|
${list.bookName}
|
||||||
|
</div>
|
||||||
|
<div class="author">
|
||||||
|
<fmt:parseDate var="publeYear" value="${list.publeYear}" pattern="yyyy-MM-dd" />
|
||||||
|
${list.authorName} 지음 | ${list.publisher} | <fmt:formatDate value="${publeYear}" pattern="yyyy-MM-dd"/>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td class="info">
|
||||||
|
<div class="rating">
|
||||||
|
평점(추후 추가)
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td class="price">
|
||||||
|
<div class="org_price">
|
||||||
|
<del>
|
||||||
|
<fmt:formatNumber value="${list.bookPrice}" pattern="#,### 원" />
|
||||||
|
</del>
|
||||||
|
</div>
|
||||||
|
<div class="sell_price">
|
||||||
|
<strong>
|
||||||
|
<fmt:formatNumber value="${list.bookPrice * (1-list.bookDiscount)}" pattern="#,### 원" />
|
||||||
|
</strong>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td class="option"></td>
|
||||||
|
</tr>
|
||||||
|
</c:forEach>
|
||||||
|
</tbody>
|
||||||
|
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 페이지 이동 인터페이스 -->
|
||||||
|
<div class="pageMaker_wrap">
|
||||||
|
<ul class="pageMaker">
|
||||||
|
|
||||||
|
<!-- 이전 버튼 -->
|
||||||
|
<c:if test="${pageMaker.prev }">
|
||||||
|
<li class="pageMaker_btn prev">
|
||||||
|
<a href="${pageMaker.pageStart -1}">이전</a>
|
||||||
|
</li>
|
||||||
|
</c:if>
|
||||||
|
|
||||||
|
<!-- 페이지 번호 -->
|
||||||
|
<c:forEach begin="${pageMaker.pageStart }" end="${pageMaker.pageEnd }" var="num">
|
||||||
|
<li class="pageMaker_btn ${pageMaker.cri.pageNum == num ? 'active':''}">
|
||||||
|
<a href="${num}">${num}</a>
|
||||||
|
</li>
|
||||||
|
</c:forEach>
|
||||||
|
|
||||||
|
<!-- 다음 버튼 -->
|
||||||
|
<c:if test="${pageMaker.next}">
|
||||||
|
<li class="pageMaker_btn next">
|
||||||
|
<a href="${pageMaker.pageEnd + 1 }">다음</a>
|
||||||
|
</li>
|
||||||
|
</c:if>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<form id="moveForm" action="/search" method="get" >
|
||||||
|
<input type="hidden" name="pageNum" value="${pageMaker.cri.pageNum}">
|
||||||
|
<input type="hidden" name="amount" value="${pageMaker.cri.amount}">
|
||||||
|
<input type="hidden" name="keyword" value="${pageMaker.cri.keyword}">
|
||||||
|
<input type="hidden" name="type" value="${pageMaker.cri.type}">
|
||||||
|
</form>
|
||||||
|
|
||||||
|
|
||||||
</c:if>
|
</c:if>
|
||||||
<!-- 게시물 x -->
|
<!-- 게시물 x -->
|
||||||
@@ -157,6 +242,32 @@
|
|||||||
}); // ajax
|
}); // ajax
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
|
/* 페이지 이동 버튼 */
|
||||||
|
|
||||||
|
const moveForm = $('#moveForm');
|
||||||
|
|
||||||
|
$(".pageMaker_btn a").on("click", function(e){
|
||||||
|
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
moveForm.find("input[name='pageNum']").val($(this).attr("href"));
|
||||||
|
|
||||||
|
moveForm.submit();
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
$(document).ready(function(){
|
||||||
|
// 검색 타입 selected
|
||||||
|
const selectedType = '<c:out value="${pageMaker.cri.type}"/>';
|
||||||
|
if(selectedType != ""){
|
||||||
|
$("select[name='type']").val(selectedType).attr("selected", "selected");
|
||||||
|
}
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
|
|||||||
@@ -135,6 +135,85 @@ a{
|
|||||||
min-height: 1000px;
|
min-height: 1000px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 상품 표 */
|
||||||
|
.list_search_result{
|
||||||
|
width: 90%;
|
||||||
|
margin: auto;
|
||||||
|
}
|
||||||
|
.type_list{
|
||||||
|
width: 100%;
|
||||||
|
border-bottom: 1px solid #e7e7e7;
|
||||||
|
border-collapse: collapse;
|
||||||
|
}
|
||||||
|
.type_list tr{
|
||||||
|
height:200px;
|
||||||
|
border-bottom: 1px solid #e7e7e7;
|
||||||
|
}
|
||||||
|
.detail div{
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
.category{
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
.title{
|
||||||
|
font-size: 20px;
|
||||||
|
color: #3a60df;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
.author{
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
.info{
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.price{
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.org_price del{
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
.sell_price strong{
|
||||||
|
color: #da6262;
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/* 페이지 버튼 인터페이스 */
|
||||||
|
.pageMaker_wrap{
|
||||||
|
text-align: center;
|
||||||
|
margin-top: 30px;
|
||||||
|
margin-bottom: 40px;
|
||||||
|
}
|
||||||
|
.pageMaker{
|
||||||
|
list-style: none;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
.pageMaker_btn {
|
||||||
|
float: left;
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
line-height: 40px;
|
||||||
|
margin-left: 20px;
|
||||||
|
}
|
||||||
|
.active{
|
||||||
|
border : 2px solid black;
|
||||||
|
font-weight:400;
|
||||||
|
}
|
||||||
|
.next, .prev {
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
padding: 0 10px;
|
||||||
|
}
|
||||||
|
.pageMaker_btn a:link {color: black;}
|
||||||
|
.pageMaker_btn a:visited {color: black;}
|
||||||
|
.pageMaker_btn a:active {color: black;}
|
||||||
|
.pageMaker_btn a:hover {color: black;}
|
||||||
|
.next a, .prev a {
|
||||||
|
color: #ccc;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
/* 로그인 성공 영역 */
|
/* 로그인 성공 영역 */
|
||||||
.login_success_area{
|
.login_success_area{
|
||||||
height: 62%;
|
height: 62%;
|
||||||
|
|||||||
@@ -41,7 +41,7 @@
|
|||||||
select * from(
|
select * from(
|
||||||
select /*+INDEX_DESC(vam_book SYS_C008227)*/ rownum as rn, bookId, bookName,
|
select /*+INDEX_DESC(vam_book SYS_C008227)*/ rownum as rn, bookId, bookName,
|
||||||
(select authorName from vam_author where vam_book.authorId = vam_author.authorId) authorName, authorId,
|
(select authorName from vam_author where vam_book.authorId = vam_author.authorId) authorName, authorId,
|
||||||
(select cateName from vam_bcate where vam_book.cateCode = vam_bcate.cateCode) cateName,cateCode, publisher, publeYear, bookPrice
|
(select cateName from vam_bcate where vam_book.cateCode = vam_bcate.cateCode) cateName,cateCode, publisher, publeYear, bookPrice,bookDiscount
|
||||||
from vam_book
|
from vam_book
|
||||||
where
|
where
|
||||||
]]>
|
]]>
|
||||||
|
|||||||
@@ -36,7 +36,7 @@
|
|||||||
<!-- 상품 검색 -->
|
<!-- 상품 검색 -->
|
||||||
<select id="getGoodsList" resultType="com.vam.model.BookVO">
|
<select id="getGoodsList" resultType="com.vam.model.BookVO">
|
||||||
|
|
||||||
select bookId, bookName, b.authorName, a.authorId, c.cateName, a.cateCode, publisher, publeYear, bookPrice
|
select bookId, bookName, b.authorName, a.authorId, c.cateName, a.cateCode, publisher, publeYear, bookPrice, bookDiscount
|
||||||
from vam_book a left outer join vam_author b on a.authorId = b.authorId
|
from vam_book a left outer join vam_author b on a.authorId = b.authorId
|
||||||
left outer join vam_bcate c on a.cateCode = c.cateCode
|
left outer join vam_bcate c on a.cateCode = c.cateCode
|
||||||
<include refid="criteria"></include>
|
<include refid="criteria"></include>
|
||||||
|
|||||||
@@ -59,7 +59,7 @@
|
|||||||
<option value="T">책 제목</option>
|
<option value="T">책 제목</option>
|
||||||
<option value="A">작가</option>
|
<option value="A">작가</option>
|
||||||
</select>
|
</select>
|
||||||
<input type="text" name="keyword">
|
<input type="text" name="keyword" value="<c:out value="${pageMaker.cri.keyword}"/>">
|
||||||
<button class='btn search_btn'>검 색</button>
|
<button class='btn search_btn'>검 색</button>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
@@ -87,7 +87,102 @@
|
|||||||
<div class="clearfix"></div>
|
<div class="clearfix"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="content_area">
|
<div class="content_area">
|
||||||
<h1>content area</h1>
|
|
||||||
|
<!-- 게시물 o -->
|
||||||
|
<c:if test="${listcheck != 'empty'}">
|
||||||
|
|
||||||
|
<div class="list_search_result">
|
||||||
|
<table class="type_list">
|
||||||
|
<colgroup>
|
||||||
|
<col width="110">
|
||||||
|
<col width="*">
|
||||||
|
<col width="120">
|
||||||
|
<col width="120">
|
||||||
|
<col width="120">
|
||||||
|
</colgroup>
|
||||||
|
<tbody id="searchList>">
|
||||||
|
<c:forEach items="${list}" var="list">
|
||||||
|
<tr>
|
||||||
|
<td class="image"></td>
|
||||||
|
<td class="detail">
|
||||||
|
<div class="category">
|
||||||
|
[${list.cateName}]
|
||||||
|
</div>
|
||||||
|
<div class="title">
|
||||||
|
${list.bookName}
|
||||||
|
</div>
|
||||||
|
<div class="author">
|
||||||
|
${list.authorName} 지음 | ${list.publisher} | ${list.publeYear}
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td class="info">
|
||||||
|
<div class="rating">
|
||||||
|
평점(추후 추가)
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td class="price">
|
||||||
|
<div class="org_price">
|
||||||
|
<del>
|
||||||
|
<fmt:formatNumber value="${list.bookPrice}" pattern="#,### 원" />
|
||||||
|
</del>
|
||||||
|
</div>
|
||||||
|
<div class="sell_price">
|
||||||
|
<strong>
|
||||||
|
<fmt:formatNumber value="${list.bookPrice * (1-list.bookDiscount)}" pattern="#,### 원" />
|
||||||
|
</strong>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td class="option"></td>
|
||||||
|
</tr>
|
||||||
|
</c:forEach>
|
||||||
|
</tbody>
|
||||||
|
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 페이지 이동 인터페이스 -->
|
||||||
|
<div class="pageMaker_wrap">
|
||||||
|
<ul class="pageMaker">
|
||||||
|
|
||||||
|
<!-- 이전 버튼 -->
|
||||||
|
<c:if test="${pageMaker.prev }">
|
||||||
|
<li class="pageMaker_btn prev">
|
||||||
|
<a href="${pageMaker.pageStart -1}">이전</a>
|
||||||
|
</li>
|
||||||
|
</c:if>
|
||||||
|
|
||||||
|
<!-- 페이지 번호 -->
|
||||||
|
<c:forEach begin="${pageMaker.pageStart }" end="${pageMaker.pageEnd }" var="num">
|
||||||
|
<li class="pageMaker_btn ${pageMaker.cri.pageNum == num ? 'active':''}">
|
||||||
|
<a href="${num}">${num}</a>
|
||||||
|
</li>
|
||||||
|
</c:forEach>
|
||||||
|
|
||||||
|
<!-- 다음 버튼 -->
|
||||||
|
<c:if test="${pageMaker.next}">
|
||||||
|
<li class="pageMaker_btn next">
|
||||||
|
<a href="${pageMaker.pageEnd + 1 }">다음</a>
|
||||||
|
</li>
|
||||||
|
</c:if>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<form id="moveForm" action="/search" method="get" >
|
||||||
|
<input type="hidden" name="pageNum" value="${pageMaker.cri.pageNum}">
|
||||||
|
<input type="hidden" name="amount" value="${pageMaker.cri.amount}">
|
||||||
|
<input type="hidden" name="keyword" value="${pageMaker.cri.keyword}">
|
||||||
|
<input type="hidden" name="type" value="${pageMaker.cri.type}">
|
||||||
|
</form>
|
||||||
|
|
||||||
|
|
||||||
|
</c:if>
|
||||||
|
<!-- 게시물 x -->
|
||||||
|
<c:if test="${listcheck == 'empty'}">
|
||||||
|
<div class="table_empty">
|
||||||
|
검색결과가 없습니다.
|
||||||
|
</div>
|
||||||
|
</c:if>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Footer 영역 -->
|
<!-- Footer 영역 -->
|
||||||
@@ -146,6 +241,32 @@
|
|||||||
}); // ajax
|
}); // ajax
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
|
/* 페이지 이동 버튼 */
|
||||||
|
|
||||||
|
const moveForm = $('#moveForm');
|
||||||
|
|
||||||
|
$(".pageMaker_btn a").on("click", function(e){
|
||||||
|
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
moveForm.find("input[name='pageNum']").val($(this).attr("href"));
|
||||||
|
|
||||||
|
moveForm.submit();
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
$(document).ready(function(){
|
||||||
|
// 검색 타입 selected
|
||||||
|
const selectedType = '<c:out value="${pageMaker.cri.type}"/>';
|
||||||
|
if(selectedType != ""){
|
||||||
|
$("select[name='type']").val(selectedType).attr("selected", "selected");
|
||||||
|
}
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
|
|||||||
@@ -135,6 +135,85 @@ a{
|
|||||||
min-height: 1000px;
|
min-height: 1000px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 상품 표 */
|
||||||
|
.list_search_result{
|
||||||
|
width: 90%;
|
||||||
|
margin: auto;
|
||||||
|
}
|
||||||
|
.type_list{
|
||||||
|
width: 100%;
|
||||||
|
border-bottom: 1px solid #e7e7e7;
|
||||||
|
border-collapse: collapse;
|
||||||
|
}
|
||||||
|
.type_list tr{
|
||||||
|
height:200px;
|
||||||
|
border-bottom: 1px solid #e7e7e7;
|
||||||
|
}
|
||||||
|
.detail div{
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
.category{
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
.title{
|
||||||
|
font-size: 20px;
|
||||||
|
color: #3a60df;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
.author{
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
.info{
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.price{
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.org_price del{
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
.sell_price strong{
|
||||||
|
color: #da6262;
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/* 페이지 버튼 인터페이스 */
|
||||||
|
.pageMaker_wrap{
|
||||||
|
text-align: center;
|
||||||
|
margin-top: 30px;
|
||||||
|
margin-bottom: 40px;
|
||||||
|
}
|
||||||
|
.pageMaker{
|
||||||
|
list-style: none;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
.pageMaker_btn {
|
||||||
|
float: left;
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
line-height: 40px;
|
||||||
|
margin-left: 20px;
|
||||||
|
}
|
||||||
|
.active{
|
||||||
|
border : 2px solid black;
|
||||||
|
font-weight:400;
|
||||||
|
}
|
||||||
|
.next, .prev {
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
padding: 0 10px;
|
||||||
|
}
|
||||||
|
.pageMaker_btn a:link {color: black;}
|
||||||
|
.pageMaker_btn a:visited {color: black;}
|
||||||
|
.pageMaker_btn a:active {color: black;}
|
||||||
|
.pageMaker_btn a:hover {color: black;}
|
||||||
|
.next a, .prev a {
|
||||||
|
color: #ccc;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
/* 로그인 성공 영역 */
|
/* 로그인 성공 영역 */
|
||||||
.login_success_area{
|
.login_success_area{
|
||||||
height: 62%;
|
height: 62%;
|
||||||
|
|||||||
@@ -36,7 +36,7 @@
|
|||||||
<!-- 상품 검색 -->
|
<!-- 상품 검색 -->
|
||||||
<select id="getGoodsList" resultType="com.vam.model.BookVO">
|
<select id="getGoodsList" resultType="com.vam.model.BookVO">
|
||||||
|
|
||||||
select bookId, bookName, b.authorName, a.authorId, c.cateName, a.cateCode, publisher, publeYear, bookPrice
|
select bookId, bookName, b.authorName, a.authorId, c.cateName, a.cateCode, publisher, publeYear, bookPrice, bookDiscount
|
||||||
from vam_book a left outer join vam_author b on a.authorId = b.authorId
|
from vam_book a left outer join vam_author b on a.authorId = b.authorId
|
||||||
left outer join vam_bcate c on a.cateCode = c.cateCode
|
left outer join vam_bcate c on a.cateCode = c.cateCode
|
||||||
<include refid="criteria"></include>
|
<include refid="criteria"></include>
|
||||||
|
|||||||
Reference in New Issue
Block a user