1031 JSP - 상품 상세 정보 조회 , 장바구니 구현

 

컨트롤러 

}else if(command.equals("/GoodsDetail.go")){
    System.out.println(" C : /GoodsDetail.go 호출");
    System.out.println(" C : 패턴 3 ");

    //GoodsDetailAction() 객체 
    action = new GoodsDetailAction();
    try {
        forward = action.execute(request, response);
    } catch (Exception e) {

        e.printStackTrace();
    }

 

 

 

GoodsDetailAction 페이지 생성 

@Override
public ActionForward execute(HttpServletRequest request, HttpServletResponse response) throws Exception {
    System.out.println(" M : GoodsDetailAction_execute 호출 ");

    //전달 정보 저장 (gno)
    int gno = Integer.parseInt(request.getParameter("gno"));

    //DAO - getGoods(gno)
    GoodsDAO dao = new GoodsDAO();
    GoodsDTO dto = dao.getGoods(gno);
    //request 영역 저장 
    request.setAttribute("dto", dto);

    //페이지 이동 (./company/goods_detail.jsp)
    ActionForward forward = new ActionForward();

    forward.setPath("./company/goods_detail.jsp");
    forward.setRedirect(false);   //실제 주소로 이동해야하기 때문에 

    return forward;
	}

 

GoodsDAO 

상품 상세 정보 조회 - getGoods(gno) 메서드 생성

// 상품 상세 정보 조회 - getGoods(gno)
public GoodsDTO getGoods(int gno) {
    GoodsDTO dto = null;    //기본적으로 null 값 리턴, 내가 원하는 데이터가 존재할 때만 null이 아닌 값 리턴

    try {
        con = getConnection();

        sql = "select * from itwill_goods where gno=?";
        pstmt = con.prepareStatement(sql);

        pstmt.setInt(1, gno);
        rs = pstmt.executeQuery();

        if(rs.next()) {
        dto = new GoodsDTO();
            //DB에 저장 -> DTO 
            dto.setGno(rs.getInt("gno"));
            dto.setBest(rs.getInt("best"));
            dto.setCategory(rs.getString("category"));
            dto.setColor(rs.getString("color"));
            dto.setContent(rs.getString("content"));
            dto.setDate(rs.getTimestamp("date"));
            dto.setImage(rs.getString("image"));
            dto.setName(rs.getString("name"));
            dto.setPrice(rs.getInt("price"));
            dto.setSize(rs.getString("size"));
            dto.setAmount(rs.getInt("amount"));
        }//if
        System.out.println("DAO : 상품 조회 완료");
        System.out.println(dto);

    } catch (Exception e) {

        e.printStackTrace();
    }finally {
        closeDB();
    }

    return dto;
}
// 상품 상세 정보 조회 - getGoods(gno)

 

 

goods_detail

 

<h1>itwill's 쇼핑몰 상세페이지</h1>
    <form action="" method="post" name="fr">
        <input type="hidden" name="gno" value="${dto.gno }">

    <table border="1" id="notice">
    <tr>
        <td width="310">
            <img src="./upload/${dto.image.split(',')[0] }"
            width="300" height="300">    <!--split (,)이용해서 꺼내오기  -->
        </td>
        <td>
            상품정보(구매옵션)<br>
            <h2> 상품명 : ${dto.name } </h2>
            <h2>판매가격 <fmt:formatNumber value="${dto.price }"/> 원</h2>
            <h2>구매수량 : <input type="number" name="amount" value="1"></h2>

            <h2>(남은 수량 ${dto.amount }개)</h2>
            <hr>
            <h2>구매 옵션 </h2> <br>
            <h2> 크기 :  </h2>
            <select name="size">
             <option value="">크기를 선택하세요</option>
             <c:forEach var="size" items="${dto.size.split(',') }">
                <option value="${size }">${size }</option>
             </c:forEach>
            </select>
            <h2>색상 </h2>
            <select name="color">
             <option value="">색상을 선택하세요</option>
                <c:forTokens var="color" items="${dto.color }" delims=",">
                    <option value="">${color }</option>
                </c:forTokens>
            </select>
            <hr>
             <!-- 구매 갯수가 바뀌었을 때 금액이 바뀌게 만들것..!!-->
            <h2>총 가격 : <fmt:formatNumber value="${dto.price * 1}"/>원</h2>

            <h2> 
            <a href="javascript: isBasket();">[장바구니 담기]</a>         

            <a href="javascript:isOrder();">[바로 구매하기]</a>
            </h2>
        </td>
    </tr>

taglib 추가 

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

 

 

 

상세 이미지 정보

<tr>
<!-- form 태그에 담거나, get 방식으로 담거나  -->
<td colspan="2">
    <c:forTokens var="img" items="${dto.image }" delims=",">
        <c:if test="${img != 'null' }">
            <img src="./upload/${img } " width="400" height="500">
            <br>
        </c:if>
        <c:if test="${img = 'null' }">
            <img src="./upload/default.jpg" width="400" height="500">
            <br>

        </c:if>
    </c:forTokens>
</td>
    <td colspan="2">리뷰/QnA</td>
</tr>

img가 not null 일 경우에 사진을 지워라 

img가 null 일 경우에는, default.jpg를 띄워라.

 

 

 

장바구니 구현 

<script type="text/javascript">
    function isBasket(){
        //옵션 선택 체크 (크기, 색상)
        //alert(document.fr.size.value);
    /* 	alert(document.fr.size);
        console.log(document.fr.size); */

        if(document.fr.size.value == ""){ //크기 옵션 선택 x 
            alert("사이즈를 선택하세요");
            document.fr.size.focus();
            return;

        }else if(document.fr.color.value=""){
            alert("색깔을 선택하세요");
            document.fr.color.focus();
            return;
        }
        //장바구니 페이지 이동 - confirm => boolean 타입(true/false)
        var isMove = confirm("장바구니 페이지로 이동하기");

        if(isMove){
            //장바구니 페이지 이동 
            alert("장바구니 페이지로 이동");

            document.fr.action="./BasketAddAction.ba";
            document.fr.submit();

        }else{
            //취소 - 계속 쇼핑하기 이동
            alert("계속 쇼핑하기!");

            //장바구니 정보 전달 & 저장 ./BasketAddAction.ba
            // + 쇼핑 정보 (정보 구분해서 이동하기 위해)
            location.href="GoodsList.go";

            /* 정보 입력 -> 정보 처리 -> DB
               Detail.go   AddAction.ba  1)장바구니 뷰 2)리스트 뷰        */

        }
    } //isBasket()

    function isOrder(){
        if(document.fr.size.value == ""){ //크기 옵션 선택 x 
            alert("사이즈를 선택하세요");
            document.fr.size.focus();
            return;

        }else if(document.fr.color.value=""){//크기 옵션 선택 x 
            alert("색깔을 선택하세요");
            document.fr.color.focus();
            return;
        }
    }
</script>

 

alert으로 해서 안나오면, console.log로 입력할 것 

 

 

 

 

com.itwillbs.basket.action 패키지 생성

 BasketFrontController 생성

 

action, ActionForward 복 붙

ctrl +shift + o 해서 안쓰는 정보 삭제

 

@WebServlet("*.ba")

 

 

 

 C : command : /BasketAddAction.ba