« 2024/11 »
일	월	화	수	목	금	토
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30

Tags more

Archives

Today

Total

관리 메뉴

Kim VamPa

[Spring][쇼핑몰 프로젝트][31] 상품 목록 화면 구현 - 2 본문

스프링 프레임워크/쇼핑몰 프로젝트

[Spring][쇼핑몰 프로젝트][31] 상품 목록 화면 구현 - 2

Kim VamPa 2021. 9. 10. 20:23

728x90

프로젝트 Github : https://github.com/sjinjin7/Blog_Project
프로젝트 포스팅 색인(index) : https://kimvampa.tistory.com/188

목표

상품 목록 화면 구현

저번 포스팅에 이어서 상풍 목록 화면 구현 완성을 목표로 합니다.

순서

1. 검색 쿼리 컬럼 추가

2. 검색 결과 데이터&페이지 이동 인터페이스

3. 테스트

4. 출력 데이터 형식 변경

1. 검색 쿼리 컬럼 추가

검색 목록 화면에 할인에 대한 정보도 전달하기 위해서 BookMapper.xml 파일의 검색 쿼리(getGoodsList )의 SELECT 문에 bookDiscount를 추가해줍니다.

2. 검색 결과 데이터&페이지 이동 인터페이스

이번엔 검색 목록 화면(search.jsp)에 검색 결과를 출력하는 코드를 작성해보겠습니다. 검색 결과의 형태는 교보문고의 검색 결과 형태를 참고하여 작성하였습니다. 책 하나에 대한 정보는 '책 이미지', '책 정보', '책 평점', '책 가격' 부분으로 구분을 하였습니다. 목록 화면에서의 장바구니 추가, 구매 버튼을 추가할 수 있는 영역은 만들어 두었고, 추후 포스팅 과정 중에 여유가 된다면 추가하도록 하겠습니다.

search.jsp 에서 이전 포스팅에서 작성한 <c:if>태그 중 검색 결과가 있을 경우 동작하는 <c:if> 태그 내부에 아래의 코드를 추가해줍니다.

				<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>
												${list.bookPrice}
											</del>
										</div>
										<div class="sell_price">
											<strong>
												<c:out value="${list.bookPrice * (1-list.bookDiscount)}"/>
											</strong>
										</div>
									</td>
									<td class="option"></td>
								</tr>
							</c:forEach>
						</tbody>
					
					</table>
				</div>

추가한 태그 코들에 대한 css 설정을 해주기 위해 아래의 코드를 search.css 파일에 추가해줍니다.

	/* 상품 표 */
	.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;
	}

이번엔 페이지 이동 인터페이스를 추가해주겠습니다. 앞선 코드 바로 다음 빈 공간(태그 내부)에 아래의 코드를 추가해줍니다. (해당 태그는 관리자 페이지의 '작가', '상품' 목록 페이지에 사용한 코드입니다.)

				<!-- 페이지 이동 인터페이스 -->
				<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> 태그를 활용한 이동방식을 적용 해 줄 것이기 때문에 아래의 <form>태그를 작성합니다. ( 페이지 이동 인터페이스 코드 바로 아래에 작성하였지만, 해당 <form>태그의 위치는 어디에 하든 크게 상관없습니다.)

				<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>

페이지 이동 인터페이스와 <form>태그를 활용해서 '페이지 번호'를 사용자가 클릭했을 때 해당 페이지로 이동할 수 있도록 아래의 <script> 태그에 아래의 코드를 추가해줍니다.

	/* 페이지 이동 버튼 */
    const moveForm = $('#moveForm');
    
	$(".pageMaker_btn a").on("click", function(e){
		
		e.preventDefault();
		
		moveForm.find("input[name='pageNum']").val($(this).attr("href"));
		
		moveForm.submit();
		
	});

위에서 작성한 <form> 태그는 사용자가 검색 혹은 목록 화면으로 들어왔을 때 사용된 데이터(type, keyword, pageNum, amount)를 값으로 가지고 이를 '페이지 이동'에 그대로 활용하게 됩니다.( pageNum만 변경 한 뒤 해당 데이터들을 서버로 전송)

검색 인터페이스 부분에도 마찬 가지로 사용자가 사용한 데이터들을 값을 가지도록 아래와 같이 value값을 가지도록 코드를 추가해줍니다.

그런데 문제는 <select> 태그에 있는 <option> 태그 중 사용자가 사용한 type의 <option> 태그로 어떻게 selected 속성을 부여해주느냐입니다. 이를 위해 <script> 태그 내부에 아래의 코드를 추가해줍니다.

	$(document).ready(function(){
		// 검색 타입 selected
		const selectedType = '<c:out value="${pageMaker.cri.type}"/>';
		if(selectedType != ""){
			$("select[name='type']").val(selectedType).attr("selected", "selected");	
		}
		
	});

마지막으로 페이지 이동 인터페이스 태그에 대한 css 설정을 추가해주기 위해 아래의 코드를 추가해줍니다.

	/* 페이지 버튼 인터페이스 */
	.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;
	}

3. 테스트

작성해준 코드들이 정상적으로 동작하는지 확인을 합니다. 크게 확인할 부분은 3가지입니다. 검색 결과 데이터들이 의도대로 출력되는지, 페이지 이동 인터페이스가 정상적으로 동작하는지, 페이지 이동 후 검색 조건 데이터(amount, pageNum, keyword, type)가 정상적으로 값으로 가지는지를 확인합니다.

4. 출력 데이터 형식 변경

<fmt> 태그를 활용해서 일부 숫자 관련 데이터들의 출력 형식을 변경해주겠습니다.

먼저 가격 데이터입니다. 가격 데이터와 날짜 데이터의 출력 형식을 변경해주겠습니다. 가격 데이터를 "0,000 원"형식으로 출력되길 원합니다.

따라서 기존의 가격 데이터를 아래와 같이 변경해주었습니다.

<fmt:formatNumber value="${list.bookPrice}" pattern="#,### 원" />

<fmt:formatNumber value="${list.bookPrice * (1-list.bookDiscount)}" pattern="#,### 원" />

적용 결과는 아래와 같습니다.

다음은 날짜 데이터입니다. MySQL 프로젝트의 경우는 yyyy-MM-dd 형식으로 출력이 되고 있습니다. 하지만 Oracle의 프로젝트 경우 아래와 같이 시간 분의 데이터를 함께 출력하고 있습니다. 이를 <fmt> 태그를 활용해서 yyyy-MM-dd 형식으로 변경해주겠습니다.

날짜를 원하는 형식으로 포맷팅 하여 출력하기 위해선 <fmt:formatDate> 태그를 사용해야 합니다. 그런데 한 가지 문제가 있는데 이 태그는 날짜 정보, 다시 말해 Date 타입의 데이터를 대상으로 원하는 형식으로 변경할 수 있습니다. 그런데 우리가 작성한 BookVO의 publeYear는 String 타입의 데이터입니다.

따라서 이 데이터를 먼저 Date 타입으로 변경을 해준 뒤 <fmt:formDate> 태그를 사용해주어야 합니다. 이를 위해 <fmt:parseDate> 태그를 사용해줄 것입니다. <fmt:parseDate>는 문자열로 표현한 날짜 혹은 시간 데이터를 Date타입(엄밀히 말하면 java.util.Date)으로 파싱 해주는 태그입니다. Oracle의 프로젝트의 날자가 적힌 데이터를 아래와 같이 변경해서 작성해줍니다.

<fmt:parseDate var="publeYear" value="${list.publeYear}" pattern="yyyy-MM-dd" />
<fmt:formatDate value="${publeYear}" pattern="yyyy-MM-dd"/>

작성 결과는 아래와 같습니다.

REFERENCE

코드로배우는 스프링 웹 프로젝트(남가람북스)
https://m.blog.naver.com/PostView.naver?isHttpsRedirect=true&blogId=wonminst&logNo=90096504457

DATE

2020.09.09

728x90

저작자표시

'스프링 프레임워크 > 쇼핑몰 프로젝트' 카테고리의 다른 글

[Spring][쇼핑몰 프로젝트][33] 메인화면 네비 기능 (5)	2021.09.27
[Spring][쇼핑몰 프로젝트][32] 상품 목록 화면 구현(이미지 출력) (7)	2021.09.17
[Spring][쇼핑몰 프로젝트][31] 상품 목록 화면 구현 - 1 (0)	2021.09.09
[Spring][쇼핑몰 프로젝트][31] 검색 구현(조건 검색 적용 -3) (0)	2021.09.02
[Spring][쇼핑몰 프로젝트][31] 검색 구현(조건 검색 적용 -2) (3)	2021.08.31