리주의 프로그래밍 공부

[스프링 쇼핑몰 도전]21.03.02 본문

프로젝트/[spring]쇼핑몰 홈페이지 도전기

[스프링 쇼핑몰 도전]21.03.02

Leezu_ 2021. 3. 2. 11:40

관리자의 주문관리 페이지에서 선택된 checkbox의 row 데이터 가져오기

>>

jsp 파일의 일부분

<table class="table">
	<thead>
		<tr align="center">
          <th></th>
      	  <th class="w40">주문자</th>
		  <th class="w60" align="center">상품명</th>
		  <th class="w50">수량</th>
		  <th class="w30">금액</th>
		  <th class="w70">주문일 / 배송 예정일</th>
		  <th class="w20">주문 상태 설정</th>
		</tr>
	</thead>
			
	<tbody>
// select의 id에 번호를 주기위해 varstatus 사용
		<c:forEach var="o" items="${orderList}" varStatus="status">
			<tr>
				<td class="checkBox">
					<input id="checkBox" type="checkBox" name="orderChecked" value="${o.orderID}" />
				</td>
				<td align="center">${o.userName}</td>
				<td align="center">${o.name}</td>
                <td align="center">${o.count}</td>
                <td align="right"><fmt:formatNumber value="${o.total}" pattern="###,###,###"/> 원</td>
                <td align="center">
               		<fmt:formatDate value="${o.regDate}" pattern="yy-MM-dd" /> / 
                	<fmt:formatDate value="${o.dueDate}" pattern="yy-MM-dd" />		
                </td>
                <td align="center">
  // select의 id는 state+번호
  					<select name="state" id="state${status.index}">
						<option value="preOrder" <c:if test="${state eq '주문 준비중' }"> selected </c:if>>주문 준비중</option>
						<option value="orderChecked" <c:if test="${state eq '주문 접수 완료' }"> selected </c:if>>주문 접수 완료</option>
						<option value="depositChecked" <c:if test="${state eq '입금 확인' }"> selected </c:if>>입금 확인</option>
						<option value="preDel" <c:if test="${state eq '배송 준비중' }"> selected </c:if>>배송 준비중</option>
						<option value="startDel" <c:if test="${state eq '배송 시작' }"> selected </c:if>>배송 시작</option>
						<option value="delivered" <c:if test="${state eq '배송 완료' }"> selected </c:if>>배송 완료</option>
					</select>
				</td>
			</tr>
		</c:forEach>
	</tbody>
</table>

아래는 자바 스크립트 일부분(사용자 이름과 주문상태만 팝업)

<script type="text/javascript">
		function changeState(){

 		var checkbox = $('input[id=checkBox]:checked');
		
		checkbox.each(function(i){
			var tr = checkbox.parent().parent().eq(i);
			var td = tr.children();
			
			var userName = td.eq(1).text();
// select id값의 번호(순서)를 가져오기위함(=몇번째 tr인가)
			var sel = document.getElementById("state"+tr.parent().children().index(tr));
			var state = sel.options[sel.selectedIndex].value;
			
			alert('userName : ' + userName + ' state : ' + state);
		})
	}
</script>

 

이 하나로 이틀정도 쓴것같다. 자바스크립트는 따로 공부해본적이 없어서 여기저기 찾아보면서 하느라 힘들었다. 백엔드로 일하게되어도 프론트엔드 기술을 조금 알면 소통하는데 더 좋지않을까?

 

공지사항, 주문, 유저정보 등 수정할 때, 안내팝업이 나오게 해야겠다.

>>

   관리자 페이지에서 주문 상태를 바꿔도 그 줄의 체크박스에 체크하지 않았다면, 수정버튼을 눌러도 변화가 없다. 이를 알아차리기 쉽게하기 위해, 안내팝업이 나오면 좋을 것 같다.

   > 값이 null 인경우에 팝업을 줘야할까? 수정이 되었을때 수정되었다고 팝업을 주는게 좋을까?

 

관리자의 주문 관리 페이지에서 배송 예정일도 수정가능하게 해야겠다.

>>

   수량 조절처럼 number로 입력하고, 자바 스크립트로 넘겨주는 방법으로 시도해봐야겠다.

 

좋아요 기능을 구현하려면?
>>

   주문한 사람만 사용할 수 있어야한다.

   주문했어도 배송완료가 끝났어야 사용할 수 있게한다.(받지도 않고 평가를 할 수는 없기 때문에)

   > session으로 userID를 불러오고 userID와 productID를 토대로 orderlist에 '배송완료'라는 state가 있는지 확인 후, 기능사용 가능