스프링 쇼핑몰 만들기 #8. 상품등록하기

스프링 쇼핑몰 만들기

카테고리가 정상적으로 나오니, 이제 상품등록을 해야합니다. 상품등록이라고 했지만, 게시판의 게시물 작성과 다르지 않습니다.

CRUD, 즉 Create(생성), Read(읽기), Update(갱신), Delete(삭제)의 연속입니다.

register.jsp에서 폼 태그 <from> 에 코드를 추가합니다.

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

<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" />
</div>

<div class="inputArea">
 <label for="gdsPrice">상품가격</label>
 <input type="text" id="gdsPrice" name="gdsPrice" />
</div>

<div class="inputArea">
 <label for="gdsStock">상품수량</label>
 <input type="text" id="gdsStock" name="gdsStock" />
</div>

<div class="inputArea">
 <label for="gdsDes">상품소개</label>
 <textarea rows="5" cols="50" id="gdsDes" name="gdsDes"></textarea>
</div>

<div class="inputArea">
 <button type="submit" id="register_Btn" class="btn btn-primary">등록</button>
</div>

</form>

<div class="inputArea"> 를 이용해 각 입력요소를 묶어두었습니다. 이렇게하면 나중에 CSS를 적용할 때 일괄적으로 작업할 수 있습니다.

각 인풋(input)의 아이디와 네임은 상품VO인 GoodsVO를 참고하여 만들었으며, GoodsVO는 tbl_goods를 참고하여 만들었습니다. (테이블, VO 생성)

꼭 테이블과 VO와 인풋의 이름이 같을 필요는 없습니다. 하지만 모두 같게할 경우 알아보기도 쉬울뿐더러 역할에도 맞고, 새로운 이름을 만들어야하는 귀찮음도 없습니다.

프로젝트를 실행해보면 투박한 디자인의 입력란이 보입니다.

아직 매퍼-DAO-Service-컨트롤러 작업을 하지 않았기 때문에 등록은 안됩니다.

먼저 직접 쿼리를 작성/실행하여 임시 데이터를 추가해봅니다.

상품등록시 이미지 파일을 업로드하는 기능은 없기 때문에, gdsImg는 입력하지 않았으며 그에 따라 null이 표시되고 있습니다.

그외엔 모두 정상적으로 입력된걸 확인할 수 있습니다. 이 쿼리문을 그대로 사용하면 될 것 같습니다.

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

<!-- 상품 등록 -->
<insert id="register">
 insert into tbl_goods (gdsNum, gdsName, cateCode, gdsPrice, gdsStock, gdsDes)
     values (tbl_goods_seq.nextval, #{gdsName}, #{cateCode}, #{gdsPrice}, #{gdsStock}, #{gdsDes})
</insert>

DAO와 Service도 작업합니다.

현재는 쿼리문만 작동되면 되기 때문에 별다른 코드는 없습니다.

컨트롤러에도 상품등록용 POST 메서드를 추가합니다.

역시 별다른 코드는 없으며, 등록이 성공적으로 되었다면 return "redirect:/admin/index"; 로 인해 관리자 화면의 처음으로 이동하게 됩니다.

이제 실제로 등록이 되는지 테스트해봅니다.

500에러가 발생했고, 내용을 보니 '부적합한 열 유형'이라는게 나왔습니다.

매퍼까지는 데이터가 전해졌지만, null이 전달되어서 에러가 발생했습니다. null 데이터를 받은건 cateCode(카테고리 코드)입니다. 당연한 얘기지만, 카테고리 구성은 제대로 했으나 이름(name) 부여를 하지 않았기 때문에 생긴 에러입니다.

여기서 문제가 되는게, 지금 카테고리는 1차 분류와 2차 분류로 두가지로 구분되며, 무기 카테고리만 1차/2차 분류가 되고 다른 카테고리들은 1차 분류만 가능합니다. 그리고 카테고리 코드는 하나만 등록할 수 있습니다.

이 문제를 해결할 방법은 많은데, 저는 카테고리를 구성할 때 카테고리 코드를 부여하는 방법으로 하겠습니다.

먼저 2차 분류의 셀렉트 박스에 이름(name)속성을 부여합니다.

그리고 register.jsp의 스크립트 부분에 cate2Select.append("<option value='" + selectVal + "'>전체</option>"); 를 추가합니다.

selectVal는 '현재 선택한 1차 분류의 코드'이므로 2차 분류의 기본선택지인 '전체'에도 같은 코드가 적용됩니다.

2차 분류의 '전체' 카테고리가 1차 분류와 같은 코드로 되어있는걸 확인할 수 있습니다.

제대로 등록되는지 확인하기 위해 테스트용 데이터를 입력하고 등록 버튼을 클릭합니다.

등록 버튼을 클릭하자 관리자 화면의 처음으로 이동했습니다.

테이블을 확인해보니 정상적으로 등록된걸 확인할 수 있습니다.

이제 간단한 CSS를 추가합니다.

<style>
.inputArea { margin:10px 0; }
select { width:100px; }
label { display:inline-block; width:70px; padding:5px; }
label[for='gdsDes'] { display:block; }
input { width:150px; }
textarea#gdsDes { width:400px; height:180px; }
</style>

위에 있는 스타일시트 <style> ~ </style> 과 구분되도록 만들어뒀는데, 이후에 각 스타일은 파일로 분류할것이기 때문에 미리 구분해두는것이며 같은곳에 입력해도 상관없습니다.

크기와 여백정도만 수정해서 정렬시켰으며, 등록 버튼은 부트스트랩의 버튼 클래스 btn btn-primary를 부여했습니다.