스프링 쇼핑몰 만들기 #10. 상품 수정/삭제 기능 구현

스프링 쇼핑몰 만들기
- 깃허브 링크

이번에는 상품 수정/삭제 기능을 구현하겠습니다.

view.jsp의 폼(form)태그 내부에 코드를 추가합니다.

<input type="hidden" name="n" value="${goods.gdsNum}" />

보이지 않도록 숨겨둔(type="hidden") 인풋박스에 상품번호(gdsNum)을 저장해놨습니다.

실제로 보이진 않지만 값이 잘 저장되어있는걸 확인할 수 있습니다.

이제 view.jsp의 버튼부분을 수정합니다.

<div class="inputArea">
 <button type="button" id="modify_Btn" class="btn btn-warning">수정</button>
 <button type="button" id="delete_Btn" class="btn btn-danger">삭제</button>
 
 <script>
  var formObj = $("form[role='form']");
  
  $("#modify_Btn").click(function(){
   formObj.attr("action", "/admin/goods/modify");
   formObj.attr("method", "get")
   formObj.submit();
  });
  
  $("#delete_Btn").click(function(){    
   formObj.attr("action", "/admin/goods/delete");
   formObj.submit();
  });
 </script>
</div>

각 버튼에 맞는 컨트롤러의 메서드로 연결됩니다.

상품 등록과 상품 수정은 거의 같은 구조이기 때문에, register.jsp를 복사/붙여넣기 한 뒤, modify.jsp로 이름을 변경합니다.

또, 상품 등록 메서드를 복사하여 매핑된 주소와 메서드 이름을 수정합니다. jsp와 마찬가지로 컨트롤러 또한 거의 같은 구조입니다.

컨트롤러에서 부여한 model명을 이용하여, modify.jsp로 접속했을 때 데이터를 불러올 수 있도록 코드를 추가합니다.

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

<input type="hidden" name="gdsNum" value="${goods.gdsNum}" />

<div class="inputArea"> 
 <label>1차 분류</label>
 <select class="category1">
  <option value="">전체</option>
 </select>   
 <label>2차 분류</label>
 <select class="category2" name="cateCode">
  <option value="">전체</option>
 </select>
</div>
<div class="inputArea">
 <label for="gdsName">상품명</label>
 <input type="text" id="gdsName" name="gdsName" value="${goods.gdsName}"/>
</div>
<div class="inputArea">
 <label for="gdsPrice">상품가격</label>
 <input type="text" id="gdsPrice" name="gdsPrice" value="${goods.gdsPrice}"/>
</div>
<div class="inputArea">
 <label for="gdsStock">상품수량</label>
 <input type="text" id="gdsStock" name="gdsStock" value="${goods.gdsStock}"/>
</div>
<div class="inputArea">
 <label for="gdsDes">상품소개</label>
 <textarea rows="5" cols="50" id="gdsDes" name="gdsDes">${goods.gdsDes}</textarea>
</div>
<div class="inputArea">
 <button type="submit" id="update_Btn" class="btn btn-primary">완료</button>
 <button type="submit" id="back_Btn" class="btn btn-warning">취소</button> 
</div>   
</form>

인풋박스의 이름(name)속성과 값(value)속성을 추가했으며, 버튼 부분도 수정했습니다.

상품 조회 페이지(view.jsp)에서 수정 버튼을 눌러 상품 수정 페이지(modify.jsp)로 이동하면, 데이터가 잘 들어가 있습니다. 하지만 카테고리(분류) 부분은 아무런 변화가 없는데, 카테고리는 아래에 이어서 작업할 것입니다.

또한 수정과 취소 버튼에 대한 코드는 없어서 클릭하면 에러가 발생합니다.

먼저 취소 버튼의 기능을 추가합니다.

<button type="button" id="back_Btn" class="btn btn-warning">취소</button>
 
<script>
 $("#back_Btn").click(function(){
  //history.back();
  location.href = "/admin/goods/view?n=" + ${goods.gdsNum};
 });   
</script>

가장 먼저 버튼의 타입을 submit에서 button으로 변경하고, 스크립트를 추가했습니다. history.back(); 은 브라우저의 뒤로가기와 동일한 기능이며, location.href = "/admin/goods/view?n" + ${goods.gdsNum}; 도 같은 기능입니다.

다음은 카테고리 부분입니다.

상품 테이블(tbl_goods)에는 상품코드(cateCode)만 저장되어있을 뿐이지 카테고리 이름(cateName)이나 카테고리 참조 코드(cateCodeRef)가 없기 때문에, 테이블 2개를 동시에 읽어오는 조인(join)을 이용해야합니다.

데이터 베이스에 2번 접속하여 상품 테이블과 카테고리 테이블을 따로따로 가져오는 방법도 있지만, 최대한 데이터 베이스에 접속하는 횟수를 줄이는게 무리를 주지 않기 때문에 조인할 수 있는 테이블은 조인해서 사용합니다.

아예 상품 테이블에 카테고리 이름과 카테고리 참조 코드를 모두 저장하는 방법도 있으나, 이러면 카테고리 테이블을 사용하는 의미가 없으며, 데이터 베이스에는 불필요한 중복 데이터를 저장하면, 말그대로 쓸모없는 데이터가 늘어나는것 뿐입니다.

조인해서 가져오는 값은 주로 사용될 예정이니 VO로 등록해둡니다. GoodsVO에서 카테고리 이름과 카테고리 참조 코드를 추가한 뒤, getter와 setter까지 추가하여 GoodsViewVO를 만들었습니다.

매퍼에서 기존에 사용하던 상품 조회(goodsView) 쿼리를 주석처리하고, 새로운 상품 조회 쿼리를 추가합니다.

<!-- 상품 조회 + 카테고리 조인-->
<select id="goodsView" resultType="com.kubg.domain.GoodsViewVO">
 select
     g.gdsNum, g.gdsName, g.cateCode, c.cateCodeRef, c.cateName, gdsPrice, gdsStock, gdsDes, gdsImg, gdsDate
         from tbl_goods g
             inner join goods_category c
                 on g.cateCode = c.cateCode          
            where g.gdsNum = #{gdsNum}
</select>

from tbl_goods g inner join goods_category c 부분을 보면, tbl_goods 테이블은 g라는 이름으로 축약하여 사용하고, goods_catecory 테이블은 c라는 이름으로 축약하여 사용합니다.

즉, g.gdsNum 은 tbl_goods 테이블의 gdsNum 컬럼이라는 의미가 됩니다.

on g.cateCode = c.cateCode 는 조인의 조건인데, g.cateCode와 c.cateCode의 값이 일치하는것만 가져온다는 의미입니다.

기존에 사용하던 DAO와 Service의 결과값의 형태가 GoodsVO에서 GoodsViewVO로 변경되었으므로 이 부분을 수정합니다.

컨트롤러에서도 마찬가지로 GoodsVO에서 GoodsViewVO로 수정합니다.

이제 카테고리의 데이터를 가져올 수 있으므로, 스크립트에 코드를 추가합니다.

var select_cateCode = '${goods.cateCode}';
var select_cateCodeRef = '${goods.cateCodeRef}';
var select_cateName = '${goods.cateName}';

if(select_cateCodeRef != null && select_cateCodeRef != '') {
 $(".category1").val(select_cateCodeRef);
 $(".category2").val(select_cateCode);
 $(".category2").children().remove();
 $(".category2").append("<option value='"
       + select_cateCode + "'>" + select_cateName + "</option>");
} else {
 $(".category1").val(select_cateCode);
 //$(".category2").val(select_cateCode);
 // select_cateCod가 부여되지 않는 현상이 있어서 아래 코드로 대체
 $(".category2").append("<option value="' + select_cateCode + '" selected='selected'>전체</option>");
}

하위 카테고리가 없는 상위 카테고리만 설정된 상품 수정시, 하위 카테고리에 select_cateCode가 제대로 부여되지 않으며, 이상태에서 수정을 하려고하면 에러가 발생됩니다. 제대로 확인하지 않고 작성하여서 이런 문제가 생겼습니다ㅠㅠ

$(".category2").val(select_cateCode); 를 주석 처리하고, 새로운 코드 $(".category2").append("<option value="' + select_cateCode + '" selected='selected'>전체</option>");를 추가하면 정상적으로 실행됩니다.

이후에 새로운 프로젝트로 다시 작성하겠습니다.

이 코드는 카테고리 코드, 카테고리 참조 코드, 카테고리 이름을 가져와서 셀렉트 박스에 추가하는 역할입니다.

이제 수정 페이지에 접속해보면 카테고리까지 잘 표시되는걸 확인할 수 있습니다.

이제 수정 쿼리를 작성하고 테스트 해봅니다.

테이블의 값이 변경되었다면 꼭 commit; 을 실행합니다.

정상적으로 작동하는 쿼리를 매퍼에 추가합니다.

<!-- 상품 수정 -->
<update id="goodsModify">
 update tbl_goods
     set
         gdsName = #{gdsName},
         cateCode = #{cateCode},
         gdsPrice = #{gdsPrice},
         gdsStock = #{gdsStock},
         gdsDes = #{gdsDes}
     where gdsNum = ${gdsNum}
</update>

상품 이미지(gdsImg)는 아직 없으므로 쿼리에서 제외했습니다.

DAO와 Service에 코드를 추가합니다.

다음은 컨트롤러에 코드를 추가합니다.

// 상품 수정
@RequestMapping(value = "/goods/modify", method = RequestMethod.POST)
public String postGoodsModify(GoodsVO vo) throws Exception {
 logger.info("post goods modify");

 adminService.goodsModify(vo);
 
 return "redirect:/admin/index";
}

상품 등록할 때와 크게 다르지 않습니다.

잘되는지 확인하기 위해 내용을 수정합니다.

잘되네요.

이번엔 삭제 쿼리를 작성하고 실행해봅니다.

정상적으로 작동하는 쿼리를 매퍼에 추가합니다.

<!-- 상품 삭제 -->
<delete id="goodsDelete">
 delete
     tbl_goods
 where gdsNum = #{gdsNum}
</delete>

DAO와 Service에 코드를 추가합니다.

컨트롤러에도 코드를 추가합니다.

// 상품 삭제
@RequestMapping(value = "/goods/delete", method = RequestMethod.POST)
public String postGoodsDelete(@RequestParam("n") int gdsNum) throws Exception {
 logger.info("post goods delete");

 adminService.goodsDelete(gdsNum);
 
 return "redirect:/admin/index";
}

view.jsp에서, 삭제 버튼의 스크립트를 조금 수정합니다.

$("#delete_Btn").click(function(){
 
 var con = confirm("정말로 삭제하시겠습니까?");
 
 if(con) {      
  formObj.attr("action", "/admin/goods/delete");
  formObj.submit();
 }
});

confirm(); 은 사용자에게 메시지를 보내서, 확인(true)과 취소(false)값을 받을 수 있는 다이얼로그입니다. 사용자가 선택한 결과로 조건문(if)을 이용하여 삭제 여부를 정할 수 있습니다.

다른 jsp로 이동하거나, 모달을 이용하는 방법도 있는데, 이번엔 이 방법을 사용해봤습니다.

삭제 버튼을 누르면 화면처럼 사용자에게 묻는 다이얼로그가 나타납니다. 브라우저마다 모양은 다르지만 결과는 같습니다.

취소를 선택하면 아무일도 발생하지 않지만, 확인을 선택하면 삭제 기능이 실행됩니다.

마지막 상품이 삭제되어서 아무것도 없게되었네요.