[Spring][쇼핑몰 프로젝트][31] 상품 목록 화면 구현 - 2
https://kimvampa.tistory.com/249
This commit is contained in:
SeoJin Kim
@@ -41,7 +41,7 @@
|
||||
select * from(
|
||||
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 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
|
||||
where
|
||||
]]>
|
||||
|
||||
@@ -59,7 +59,7 @@
|
||||
<option value="T">책 제목</option>
|
||||
<option value="A">작가</option>
|
||||
</select>
|
||||
<input type="text" name="keyword">
|
||||
<input type="text" name="keyword" value="<c:out value="${pageMaker.cri.keyword}"/>">
|
||||
<button class='btn search_btn'>검 색</button>
|
||||
</div>
|
||||
</form>
|
||||
@@ -90,6 +90,91 @@
|
||||
|
||||
<!-- 게시물 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">
|
||||
<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>
|
||||
<!-- 게시물 x -->
|
||||
@@ -157,6 +242,32 @@
|
||||
}); // 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>
|
||||
|
||||
</body>
|
||||
|
||||
@@ -135,6 +135,85 @@ a{
|
||||
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{
|
||||
height: 62%;
|
||||
|
||||
@@ -41,7 +41,7 @@
|
||||
select * from(
|
||||
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 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
|
||||
where
|
||||
]]>
|
||||
|
||||
@@ -36,7 +36,7 @@
|
||||
<!-- 상품 검색 -->
|
||||
<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
|
||||
left outer join vam_bcate c on a.cateCode = c.cateCode
|
||||
<include refid="criteria"></include>
|
||||
|
||||
@@ -59,7 +59,7 @@
|
||||
<option value="T">책 제목</option>
|
||||
<option value="A">작가</option>
|
||||
</select>
|
||||
<input type="text" name="keyword">
|
||||
<input type="text" name="keyword" value="<c:out value="${pageMaker.cri.keyword}"/>">
|
||||
<button class='btn search_btn'>검 색</button>
|
||||
</div>
|
||||
</form>
|
||||
@@ -87,7 +87,102 @@
|
||||
<div class="clearfix"></div>
|
||||
</div>
|
||||
<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>
|
||||
|
||||
<!-- Footer 영역 -->
|
||||
@@ -146,6 +241,32 @@
|
||||
}); // 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>
|
||||
|
||||
</body>
|
||||
|
||||
@@ -135,6 +135,85 @@ a{
|
||||
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{
|
||||
height: 62%;
|
||||
|
||||
@@ -36,7 +36,7 @@
|
||||
<!-- 상품 검색 -->
|
||||
<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
|
||||
left outer join vam_bcate c on a.cateCode = c.cateCode
|
||||
<include refid="criteria"></include>
|
||||
|
||||
Reference in New Issue
Block a user