스프링 쇼핑몰 만들기 #9. 상품목록과 상품조회 기능 구현 : kuzuro

이번엔 상품목록과 상품조회 기능을 구현하겠습니다. 이것 또한 게시판의 게시물 목록과 게시물 조회 기능과 다르지 않습니다.

목록화면으로 사용할 list.jsp를 만듭니다. 새로 만들필요 없이 register.jsp를 복사한 뒤 <div id="container_box"> 내부의 코드를 제거하고, 사용하지 않는 스크립트 <script> ~ </script> 를 지워줍니다.

컨트롤러에 list 메서드를 생성합니다.

그리고 aside.jsp에 상품목록으로 이동할 수 있도록 링크를 추가합니다.

상품 목록 링크를 클릭하면 list.jsp로 이동된걸 확인할 수 있습니다. 하지만 아직 다른 데이터는 없기 때문에 횡합니다.

데이터를 준비하기 위해 쿼리문을 테스트합니다.

매퍼에 쿼리를 추가합니다.

<!-- 상품 목록 --> 
<select id="goodslist" resultType="com.kubg.domain.GoodsVO">
 select
  gdsNum, gdsName, cateCode, gdsPrice, gdsStock, gdsDes, gdsImg, gdsDate
    from tbl_goods
        order by gdsNum desc
</select>

DAO와 Service에 코드를 작성합니다.

컨트롤러의 list 메서드에 코드를 추가합니다.

list.jsp에 라이브러리를 추가합니다.

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>

이제 list.jsp의 <div id="container_box"> 에 코드를 추가합니다.

<table>
 <thead>
  <tr>
   <th>번호</th>
   <th>이름</th>
   <th>카테고리</th>
   <th>가격</th>
   <th>수량</th>
   <th>등록날짜</th>
  </tr>
 </thead>
 <tbody>
  <c:forEach items="${list}" var="list">
  <tr>
   <td>${list.gdsNum}</td>
   <td>${list.gdsName}</td>
   <td>${list.cateCode}</td>
   <td>${list.gdsPrice}</td>
   <td>${list.gdsStock}</td>
   <td>${list.gdsDate}</td>
  </tr>   
  </c:forEach>
 </tbody>
</table>

게시판 목록 구현과 마찬가지로 forEach를 이용합니다.

이제 목록 화면으로 이동해보면 나오긴하는데... 가격과 날짜 부분을 조금 손봐야겠습니다.

가격과 날짜에 포맷을 적용합니다.

또, 값이 서로 붙어있기 때문에 적당한 크기를 부여합니다.

<style>
#container_box table td { width:100px; }
</style>

이제 서로 떨어져서 보기도 좋고, 가격과 날짜가 포맷을 적용한대로 나와서 확인하기 좋아졌습니다.

마지막으로 상품 이름 부분에 링크 태그를 추가합니다.

<a href="/admin/goods/view?n=${list.gdsNum}">${list.gdsName}</a>

/admin/goods/view?n=[상품번호] 형식으로 주소가 만들어지며, 상품번호를 이용해 상품들을 중복없이 구분할 수 있습니다.

이름부분이 링크처리되었지만, 아직 조회(view)기능이 구현되지 않았습니다.

조회 기능을 구현하기 위해, register.jsp를 복사한뒤 view.jsp로 이름을 변경합니다.

컨트롤러에 view 메서드를 생성합니다.

이제 목록에서 상품이름 링크를 클릭하면 조회 화면으로 이동할 수 있지만, 데이터를 가져오는 작업을 하지 않았기 때문에 내용은 없습니다.

특정 상품만 불러오는 쿼리를 작성합니다. 목록에 이용한 쿼리에서 조건문만 넣어주면 됩니다.

작성한 쿼리를 매퍼에 추가합니다.

<!-- 상품 조회 -->
<select id="goodsView" resultType="com.kubg.domain.GoodsVO">
 select gdsNum, gdsName, cateCode, gdsPrice, gdsStock, gdsDes, gdsImg, gdsDate
     from tbl_goods
         where gdsNum = #{gdsNum}
</select>

DAO와 Service를 작성합니다.

컨트롤러의 view 메서드에 코드를 추가합니다.

// 상품 조회
@RequestMapping(value = "/goods/view", method = RequestMethod.GET)
public void getGoodsview(@RequestParam("n") int gdsNum, Model model) throws Exception {
 logger.info("get goods view");
 
 GoodsVO goods = adminService.goodsView(gdsNum);
 
 model.addAttribute("goods", goods);
}

매개변수 @RequestParam("n") int gdsNum 는, URL주소에서 "n"의 값을 찾아서 int gdsNum에 전달합니다. 목록에서 링크 주소를 /admin/goods/view?n=[상품번호] 형식으로 했기 떄문에 n를 찾는것이며, 만약 다른 문자로 했다면 그 문자로 해야합니다.

view.jsp의 폼 <form> 태그를 수정합니다.

<form role="form" method="post" autocomplete="off">

<div class="inputArea"> 
 <label>1차 분류</label>
 <span class="category1"></span>        
 <label>2차 분류</label>
 <span class="category2">${goods.cateCode}</span>
</div>

<div class="inputArea">
 <label for="gdsName">상품명</label>
 <span>${goods.gdsName}</span>
</div>

<div class="inputArea">
 <label for="gdsPrice">상품가격</label>
 <span><fmt:formatNumber value="${goods.gdsPrice}" pattern="###,###,###"/></span>
</div>

<div class="inputArea">
 <label for="gdsStock">상품수량</label>
 <span>${goods.gdsStock}</span>
</div>

<div class="inputArea">
 <label for="gdsDes">상품소개</label>
 <span>${goods.gdsDes}</span>
</div>

<div class="inputArea">
 <button type="button" id="register_Btn" class="btn btn-warning">수정</button>
 <button type="button" id="register_Btn" class="btn btn-danger">삭제</button>
</div>

</form>

상품 가격은 포맷을 이용하였기 때문에, jsp파일 상단에 태그 라이브러리를 추가해야합니다.

<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>

이제 조회 화면으로 이동해보면, 번호에 맞는 상품이 잘 출력되고 있는걸 확인할 수 있습니다.