[JSP & Servlet] 쇼핑몰 (오늘 본 상품 & 장바구니) - View

뷰 페이지에 JSTL을 사용하기 때문에 JSTL이 설치되어 있지 않다면 다음 링크를 참고해 설치해주자.

https://yeo-computerclass.tistory.com/179

JSTL 설치

📌JSTL 이란? JSTL은 자카르타에서 제공하는 자주 사용되는 필요한 기능들을 모아놓은 커스텀 태그 라이브러리이다. 커스텀 태그란 개발자가 직접 정의한 태그를 말하는 것으로 커스텀 태그를 만

yeo-computerclass.tistory.com

📌상품 목록 보기 뷰 페이지

ClothesList.jsp

<%@page import="java.util.HashMap"%>
<%@page import="vo.Clothes"%>
<%@page import="java.util.ArrayList"%>
<%@page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>  <!-- jstl -->
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>상품 목록</title>
<style type="text/css">
	#listForm{
		width:700px;
		height:auto;
		border:1px solid rgb(243, 185, 244);
		margin:auto;
	}
	h2{
		text-align:center;
	}
	
	table{
		margin:auto;
		width:550px;
	}

	.div_empty{
		background-color:red;
		width: 100%;
		height: 100%;
		text-align: center;
	}

	#todayImageList{
		text-align: center;
	}
	#productImage{
		width: 150px;
		height: 150px;
		border: none;
	}
	#todayImage{
		width: 100px;
		height: 100px;
		border: none;
	}
</style>
</head>
<body>
<section id = "listForm">
<!-- request 영역에 clothesList라는 이름으로 공유되어 있는 속성에 접근한 것 -->
<c:if test="${clothesList != null}">
<h2>상품 목록 <a href="clothesRegistForm.shop">상품 등록</a></h2>
<table>
	<tr>
		<c:forEach var = "cloth" items="${clothesList}" varStatus="status">
		<td>
			<a href="clothesView.shop?id=${cloth.id}">
			<img src="images/${cloth.image}" style="max-width:100%; height:auto;" id="productImage"/>
			</a>
		</td>
		<td>
			상품명:${cloth.name}<br>
			가격:${cloth.price}<br>
		</td>
		
		<!-- 상품 출력 시 한 줄에 4개 씩만 출력되도록 한 것 -->
		<c:if test="${((status.index+1) mod 1)==0 }">
	</tr>
	<tr>
		</c:if>
		</c:forEach>
	</tr>
</table>
</c:if>

<c:if test="${clothesList==null}">
	<div class="div_empty">
	상품 목록이 없습니다.
	</div>
</c:if>
<!-- 쿠키에 저장되어 있는 오늘 본 상품을 출력하는 부분 -->
<c:if test="${todayImageList !=null}">
<div id ="todayImageList">
	<h2>오늘 본 상품 목록</h2>
<table>
	<tr>
		<c:forEach var="todayImage" items="${todayImageList}" varStatus="status">
		<td>
			<img src="images/${todayImage}" id="todayImage"/>
		</td>
			<c:if test="${((status.index+1) mod 4)==0 }">
	</tr>
	<tr>
		</c:if>
		</c:forEach>
	</tr>
</table>
</div>
</c:if>
</section>
</body>
</html>

forEach문에서 varStatus="status"로 설정을 한 경우 status.index

📌상품 상세 보기 뷰 페이지

ClothesView.jsp

<%@page import="vo.Clothes"%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>상품 상세보기</title>
<style type="text/css">
	#listForm{
		width:100%;
		height:auto;
		border:1px solid rgb(243, 185, 244);
		margin:auto;
	}
	h2{
		text-align:center;
	}
	img{
		width: 280px;
		height: auto;
		border: none;
	}
	#content_main{
		height:auto;
	}
	#content_left{
		width: 50%;
		float: left;
	}
	#content_right{
		width: 50%;
		float: left;
	}
	#commandList{
		text-align: center;
	}
	#desc{
		height:170px;
		border: 1px solid rgb(243, 185, 244);
	}
</style>
</head>
<body>
<section id = "listForm">
<h2>${cloth.name}의 상세정보</h2>

	<section id="content_main">
		<section id = "content_left">
			<img src="images/${cloth.image}" style="width:90%; height: auto;"/>
		</section>
		<section id = "content_right">
			<b>상품명 : </b> ${cloth.name}<br><br>
			<b>가격 : </b> ${cloth.price}<br><br>
			<b>사이즈 : </b> ${cloth.size}<br><br>
			<p id="desc"">
			<b>내용 : </b> ${cloth.content}<br>
			</p>
		</section>
		<div style="clear:both"></div>
		<nav id = "commandList">
			<a href="clothesList.shop">쇼핑 계속하기</a>
			<a href="clothesCartAdd.shop?id=${cloth.id}">장바구니 담기</a>
		</nav>
	</section>
</section>
</body>
</html>

📌상품 등록 뷰 페이지

clothesRegistForm.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>상품 등록</title>
<style type="text/css">
   #registForm{
      width: 500px;
      height: 600px;
      border : 1px solid rgb(243, 185, 244); 
      margin:auto; 
   }   
   h2{
      text-align: center;
   }
   table{
      margin:auto;
      width: 450px;
      }
   .td_left{
      width: 150px;
      background-color:rgb(243, 185, 244);
   }
   .td_right{
      width: 300px;
      background-color:rgb(243, 185, 244);
   }
   #commandCell{
      text-align: center;
      
   }
</style>
</head>
<body>
<section id = "registForm">
   <header>
      <h2>상품 등록</h2>
   </header>
      <form action="clothesRegist.shop" method="post" name = "writeForm" enctype="multipart/form-data">
   <table>
   <tr>
      <td colspan="2">
         <a href="clothesList.shop">목록 보기</a>
      </td>
   </tr>
   <tr>
      <td class = "td_left">
         <label for = "name">상품명 : </label>
      </td>
      <td class = "td_right">
         <input type = "text" name = "name" id ="name" required/>
      </td>
   </tr>
   
   <tr>
      <td class = "td_left">
         <label for = "price">가격 : </label>
      </td>
      <td class = "td_right">
         <input type = "text" name = "price" id ="price" required/>
      </td>
   </tr>
   
   <tr>
      <td class = "td_left">
         <label for = "size">Size : </label>
      </td>
      <td class = "td_right">
         <input type = "text" name = "size" id ="size" required/>
      </td>
   </tr>
   
   <tr>
      <td class = "td_left">
         <label for = "content">글 내용 : </label>
      </td>
      <td class = "td_right">
         <textarea name="content" id="content" rows="13" cols="40" wrap="off"></textarea>
      </td>
   </tr>
   <tr>
      <td class = "td_left">
         <label for = "image">상품 이미지 : </label>
      </td>
      <td class = "td_right">
         <input type = "file" name = "image" id ="image" required/>
      </td>
   </tr>
   <tr>
      <td colspan="2" id = "commandCell"> 
         <input type = "submit" value = "상품 등록"/>      
         <input type = "reset" value = "다시 작성"/>      
         <input type = "button" value = "상품 목록 보기" onClick="window.location.href='clothesList.shop'"/>      
      </td>
   </tr>   
   </table>
   </form>
   
</section>
</body>
</html>

📌장바구니 뷰 페이지

clothesCartList.jsp

<%@page import="com.*"%>
<%@page import="vo.Cart"%>
<%@page import="vo.Clothes"%>
<%@page import="dao.ClothesDAO"%>
<%@page import="java.util.List"%>
<%@page import="java.text.SimpleDateFormat"%>
<%@page import="java.util.ArrayList"%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>장바구니</title>
<style type="text/css">
#listForm {
   width: 800px;
   border: 1px solid rgb(243, 185, 244);
   margin: auto;
}

h2 {
   text-align: center;
}

table {
   width: 750px;
   margin: auto;
}

.tr_top {
   background-color: rgb(243, 185, 244);
}

.div_empty {
   text-align: center;
   background-color:
}

.td_command {
   text-align: right;
}
#todayImageList{
   text-align: center;
}
#productImage{
   width:400px;
   height:150px;
   border:none;
}
#cartImage{
   width:100px;
   height:auto;
   border:none;
}
#select{
	text-align: right;
}
#commandList{
	text-align: center;
}
#upImage{
	width: 15px;
}
#downImage{
	width: 15px;
}
</style>


<script>
    //항목 전체 체크 박스
    //onclick="checkAll(this.form) 부분에서 allCheck 체크박스가 클릭될 때 실행된다.
	function checkAll(theForm){                    //form 객체를 인자값으로 받는다.
		if(theForm.remove.length == undefined){    //remove 체크 박스가 하나 출력되었을때
			theForm.remove.checked = theForm.allCheck.checked;  //checked: 체크 박스가 선택되면 true 아니면 false 반환
		}
		else{
			for(var i=0;i<theForm.remove.length;i++){  //remove 체크 박스가 여러 개 출력되었을때
				theForm.remove[i].checked = theForm.allCheck.checked;
			}
		}
	}
	
	function checkQty(name,qty){
		if(qty != 1){    //항목의 수량이 1이 아닌 경우 수량 감소 요청을 하게 처리한 함수
			location.href="clothesCartQtyDown.shop?name="+ encodeURIComponent(name);
		}
	}
</script>
</head>
<body>

<!-- startMoney와 endMoney값을 설정하지 않고 목록 보기 페이지를 실행할 경우
     이 값들이 null이기 때문에 NullPointerException이 발생한다. 
     따라서 이 예외가 발생하지 않도록 값을 설정하는 부분이다. -->
<c:if test="${startMoney !=null }">
	<c:set var="startMoney" value="${startMoney}"></c:set>
</c:if>
<c:if test="${endMoney !=null }">
	<c:set var="endMoney" value="${endMoney}"></c:set>
</c:if>

<section id="listForm">
	<c:if test="${cartList !=null && cartList.size()>0 }">
   <h2>장바구니 목록</h2>
<form method="post">
      <table>
    	<tr id="select">
    		<td colspan="6">
    		<select id = "startMoney" name="startMoney">
    			<option>=최하=</option>
    			<c:choose>
    				<c:when test="${startMoney==1000 }">
    					<option selected="selected">1000</option>
    					<option>2000</option>
    					<option>3000</option>
	    				<option>4000</option>
    				</c:when>
    				<c:when test="${startMoney==2000 }">
    					<option>1000</option>
    					<option selected="selected">2000</option>
    					<option>3000</option>
	    				<option>4000</option>
    				</c:when>
    				<c:when test="${startMoney==3000 }">
    					<option>1000</option>
    					<option>2000</option>
    					<option selected="selected">3000</option>
	    				<option>4000</option>
    				</c:when>
    				<c:when test="${startMoney==4000 }">
    					<option>1000</option>
    					<option>2000</option>
    					<option>3000</option>
	    				<option selected="selected">4000</option>
    				</c:when>
    				<c:otherwise>
    					<option>1000</option>
    					<option>2000</option>
    					<option>3000</option>
    					<option>4000</option>
    				</c:otherwise>
    			</c:choose>
    		</select>
    		<select id = "endMoney" name="endMoney">
    			<option>=최고=</option>
    			<c:choose>
    				<c:when test="${endMoney==1000 }">
    					<option selected="selected">1000</option>
    					<option>2000</option>
    					<option>3000</option>
	    				<option>4000</option>
    				</c:when>
    				<c:when test="${endMoney==2000 }">
    					<option>1000</option>
    					<option selected="selected">2000</option>
    					<option>3000</option>
	    				<option>4000</option>
    				</c:when>
    				<c:when test="${endMoney==3000 }">
    					<option>1000</option>
    					<option>2000</option>
    					<option selected="selected">3000</option>
	    				<option>4000</option>
    				</c:when>
    				<c:when test="${endMoney==4000 }">
    					<option>1000</option>
    					<option>2000</option>
    					<option>3000</option>
	    				<option selected="selected">4000</option>
    				</c:when>
    				<c:otherwise>
    					<option>1000</option>
    					<option>2000</option>
    					<option>3000</option>
    					<option>4000</option>
    				</c:otherwise>
    			</c:choose>
    		</select>
    		<input type="submit" value="검색" formaction="clothesCartSearch.shop"/>
    		</td>
    	</tr>
        <tr class = "tr_top">
        	<td><input type="checkbox" id = "allCheck" name="allCheck" onclick="checkAll(this.form)"/> </td>
             <td>번호</td>
             <td>상품 이미지</td>
             <td>상품명</td>
             <td>가격</td>
             <td>수량</td>
         </tr>

        <c:forEach var="cart" items="${cartList}" varStatus="status">
        <tr>
        	<td>
        		<input type="checkbox" id="remove" name="remove" value="${cart.name}"/>
        	</td>
            <td>
             ${status.index+1}<!-- 번호값계산 -->
            </td>
             <td>
             <img src = "images/${cart.image}" id ="cartImage"/>
            </td>
             <td>
             ${cart.name}
            </td>
             <td>
             ${cart.price}
            </td>
             <td>
             <a href="clothesCartQtyUp.shop?name=${cart.name}">
             <img src="images/up.jpg" id = "upImage" border=0/>
             </a><br>
             ${cart.qty}<br>
             <a href="javascript:checkQty('${cart.name}',${cart.qty})">
             <img src="images/down.jpg" id = "downImage" border=0/>
             </a>
            </td>
         </tr>
        </c:forEach>
      <tr>
         <td colspan="5" style="text-align:center;">
            총 금액 : ${totalMoney}원
         </td>
      </tr>
      <tr>
         <td colspan="5" style="text-align:center;">
         	<input type="submit" value="삭제" formaction="clothesCartRemove.shop"/>
         </td>
      </tr>
      </table>
</form>
	</c:if>
	<c:if test="${cartList == null}">
      <section class="div_empty">
      정보가 없습니다.
      </section>
	</c:if>
   <nav id="commandList">
   		<a href="clothesList.shop">쇼핑 계속하기</a>
   </nav>
   
</section>
</body>
</html>

function checkAll(theForm)

여기서 theForm은 인자로 전달된 form 객체이며 안에 코드 remove는 장바구니 항목을 선택하는 체크 박스이다.
페이지에 remove라는 이름의 체크 박스가 하나 출력되면 단일 객체로 인식하지만 여러 개가 출력되면 배열 객체로 인식한다. 그리고 length 속성은 자바스크립트에서 배열 객체에 지원되는 속성이므로 theForm.remove.length=undefined라는 조건을 만족할 경우 remove 객체가 배열 객체가 아니라는 의미이므로 remove 체크 박스가 하나 출력되었다는 의미이다.

저작자표시

'JSP & Servlet > 실습' 카테고리의 다른 글

[JSP & Servlet] 회원 관리 - controller (0)	2022.07.03
[JSP & Servlet] 회원 관리 - 테이블 생성 및 vo(Value Object) + 기본 세팅 (0)	2022.07.02
[JSP & Servlet] 쇼핑몰 (오늘 본 상품 & 장바구니) - DAO (0)	2022.07.01
[JSP & Servlet] 쇼핑몰 (오늘 본 상품 & 장바구니) - Service (0)	2022.07.01
[JSP & Servlet] 쇼핑몰 (오늘 본 상품 & 장바구니) - Action (0)	2022.07.01