Servlet일반상품3 : 상품 상세페이지, c:forTokens

GoodsFrontController.java의 doProcess()의 주소비교 후 처리부분에 코드 추가

	//상품 상세페이지
}else if(command.equals("/GoodsDetail.go")){
	System.out.println("C: /GoodsList.go 호출");
	//.go -> Action -> DB(DAO) ->.jsp로 이동
	action = new GoodsDetailAction();
	try { forward = action.execute(request, response);
	} catch (Exception e) { e.printStackTrace(); }
}

GoodsDetailAction.java 생성

• GoodsDAO객체 생성 후 getGoodsDetail()생성시 아래 코드를 한줄로 나타낼 수 있다.
• 변수를 굳이 사용하지않는다면 한 줄코딩하는 것이 좋다.

//두줄
GoodsDTO gdto = gdao.getGoodsDetail(gno);
request.setAttribute("gdto", gdto);

//한줄 처리
request.setAttribute("gdto", gdao.getGoodsDetail(gno));

• 전체코드

public class GoodsDetailAction implements Action {

	@Override
	public ActionForward execute(HttpServletRequest request, HttpServletResponse response) 
			throws Exception {
		System.out.println("M : GoodsDetailAction의 execute() 호출");
		//한글처리
		request.setCharacterEncoding("UTF-8");
		
		//전달받은 파라미터 저장
		int gno = Integer.parseInt(request.getParameter("gno"));
		
		//GoodsDAO객체 생성 후 getGoodsDetail()생성
		GoodsDAO gdao = new GoodsDAO();		
		GoodsDTO gdto = gdao.getGoodsDetail(gno);
				
		//requset영역에 저장
		request.setAttribute("gdto", gdto);
		//위와 동일한 코드
		//request.setAttribute("gdto", gdao.getGoodsDetail(gno));
		
		//goods_list.jsp 페이지이동(뷰페이지로이동)
		ActionForward forward = new ActionForward();
		forward.setPath("./goods/goods_detail.jsp");
		forward.setRedirect(false);		
		return forward;
	}
}

AdminGoodsDAO.java 생성 후 getGoodsDetail()메서드 코드 추가

//상품 상세정보 가져오기
public GoodsDTO getGoodsDetail(int gno) {
	GoodsDTO gdto = null;
	try {
		getCon();
		sql = "select * from itwill_goods where gno=?";
		pstmt = con.prepareStatement(sql);
		pstmt.setInt(1, gno);
		rs = pstmt.executeQuery();
		if(rs.next()){
			gdto = new GoodsDTO();
			gdto.setGno(rs.getInt("gno"));
			gdto.setCategory(rs.getString("category"));
			gdto.setName(rs.getString("name"));
			gdto.setPrice(rs.getInt("price"));
			gdto.setColor(rs.getString("color"));

			gdto.setAmount(rs.getInt("amount"));
			gdto.setSize(rs.getString("size"));
			gdto.setContent(rs.getString("content"));
			gdto.setImage(rs.getString("image"));
			gdto.setBest(rs.getInt("best"));

			gdto.setDate(rs.getDate("date"));
		}
		System.out.println("상품 상세정보 저장 완료");
	} catch (Exception e) {
		e.printStackTrace();
	} finally {
		closeDB();
	}	
	return gdto;
}//end of 상품상세정보가져오기

goods_detail.jsp 생성

• DB의 정보를 request에 저장했고 그걸 불러와서 select항목에 넣을 수 있다. 이때 두가지 방법이 있다.
• <c:forEach>와 <c:forTokens>의 차이점은 <c:forTokens>의 경우 문자열을 분리자를 사용해서 분리해서 출력가능

<c:forTokens var="name" items="고양이,강아지,소" delims=",">
    <p><c:out value="${name}"/></p>
</c:forTokens>

//출력결과
고양이
강아지
소

첫번째 방법 : forTokens +스크립틀릿사용

<select>
	<option value="">선택하세요</option>
	<c:forTokens var="size" items=""<%=gdto.getSize() %>" delims = ",">
		<option value="${gdto.size}">${size}</option>
	</c:forTokens>
</select>

//출력값
S 
M 
L 
XL

두번째 방법 : forTokens + EL태그사용

<select>
	<option value="">선택하세요</option>
	<c:forTokens var="color" items="${gdto.color}" delims = ",">
		<option value="${gdto.color}">${color}</option>
	</c:forTokens>
</select>
<br>

//출력값
white
black
yellow

javascript 코드 한줄로 불러오기

• a태그를 이용하면 href로 항상 페이지이동이 된다. 이를 막기 위해서는 2가지 방법이 있다.
  • e.preventDefault();
  • javascript:isBasket();

//원치않는 href="#"가 진행되어 페이지이동이 일어난다(여기선 새로고침)
<a href="" onclick="isBasket();"> [장바구니 담기] </a>

//이렇게부르면 페이지이동없이 자바스크립트를 실행할 수 있다
<a href="javascript:isBasket();"> [장바구니 담기] </a>

구매수량이 재고보다 많은 경우 제어

• 자바표현식 : DB정보를 꺼내오기 불가능. 페이지 구성상 제일 마지막에 호출되므로 자바표현식으로 사용불가능
• EL표현식 : DB정보를 꺼내오기 가능.
  • 자바스크립트태그안에서는 EL표현식을 문자형태(‘’)로 사용하는 것이 일반적.
  • 문자형태로 쓰지않아도 객체로 처리되기때문에 동일하게 처리되나 문법상 문자형태로 (‘’)써줘야 함.

// 구매 수량
var buyCnt = document.goodsform.amount.value;

// 남은 수량 (DTO정보)
var DBCnt = <%=gdto.getAmount()%> //에러
var DBCnt = ${gdto.amount}; //사용가능
var DBCnt = '${gdto.amount}'; //문자형태도 사용가능

if(buyCnt > DBCnt){
   alert("구매 수량을 조절하시오");
   document.goodsform.amount.focus();
   return;
}

전체코드

<%
// GoodsDetailAction 에서 저장한 상품 정보를 받아오기
GoodsDTO gdto = (GoodsDTO) request.getAttribute("gdto");
%>

<form action="" method="post" name="goodsform">
<input type="hidden" name="name" value="<%=gdto.getName()%>">
<input type="hidden" name="price" value="${gdto.price }">
<table border="1">
  <tr>
    <td>
      <img src="./upload/<%=gdto.getImage().split(",")[0]%>" width="300" height="300">
    </td>
    <td>
       상품명 : ${gdto.name} <br>
       판매가격 : <%=gdto.getPrice() %>원<br>
       구매수량 : <input type="text" name="amount">개<br>
       남은수량 : ${gdto.amount}개<br>
       크기 : 
       <select name="size">
       	<option value="">선택하세요</option>
       	<c:forTokens var="size" items="<%=gdto.getSize() %>" delims = ",">
       		<option>${size}</option>
       	</c:forTokens>
       </select>
       <br>
       색상 : 
       <select name="color">
       <option value="">선택하세요</option>
       	<c:forTokens var="color" items="${gdto.color}" delims = ",">
       		<option>${color}</option>
       	</c:forTokens>
       </select>
       <br>
     <!--  <input type="button" class="btn" value="[장바구니 담기]" onclick="isBasket();" > -->
      <input type="button" class="btn" value="[장바구니 담기]" onclick="javascript:isBasket();" >
      <input type="button" class="btn" value="[바로 구매하기]" onclick="javascript:isBasket();">
    </td>  
  </tr>	
  <tr>
    <td colspan="2">
     <h2>상세페이지</h2>
      <img src="./upload/<%=gdto.getImage().split(",")[0]%>" width="400" height="600">
    </td>
  </tr>
</table>
</form>

<script type="text/javascript">
/* 장바구니  기능 구현 */
//각각의 링크 클릭시 해당 페이지로 정보를 가지고 이동
function isBasket() {
	//유효성체크
	//사이즈선택유무
	if(document.goodsform.size.value == ""){
		alert("사이즈를 선택하세요");
		document.goodsform.size.focus();
		return false;
	}
	//색상선택유무
	if(document.goodsform.color.value == ""){
		alert("색상을 선택하세요");
		document.goodsform.color.focus();
		return;
	}
	//수량기입유무
	if(document.goodsform.amount.value == ""){
		alert("수량을 입력하세요");
		document.goodsform.amount.focus();
		return;
		//수량이 재고보다 많은 경우
	}else if(document.goodsform.amount.value > ${gdto.amount}){
		alert("수량을 남은 수량  ${gdto.amount}개 이하로 입력하세요");
		document.goodsform.amount.focus();
		return;
	}
	
	//이동
	let result = confirm("장바구니로 이동하시겠습니까?");
	if(result){
		//form action속성에 주소입력
		document.goodsform.action = "./BasketAdd.ba?gno=${gdto.gno}";
		//form태그 정보를 가지고 페이지 이동
		document.goodsform.submit();
	}else{
		return;
	}
}
</script>