20221013_thu
실습내용
- 선택된 체크박스의 상품만 합하여 총가격 계산하기.
- 장바구니 체크박스의 전체선택/ 전체해제
controller
package Kh.study.shop.cart.controller;
import javax.annotation.Resource;
import org.springframework.security.core.Authentication;
import org.springframework.security.core.userdetails.User;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import Kh.study.shop.cart.service.CartService;
import Kh.study.shop.cart.vo.CartVO;
@Controller
@RequestMapping("/cart")
public class CartController {
@Resource(name = "cartService")
private CartService cartService;
@ResponseBody //ajax사용 하니까
@PostMapping("/regCart")
public void regCart(CartVO cartVO ,Authentication authentication) {
User user = (User)authentication.getPrincipal();
cartVO.setMemberId(user.getUsername());
cartService.regCart(cartVO);
// ajax 사용하면 model 필요없다.
// ajax 사용하니까 리턴 사용안함 -> return "content/cart/cart_list";
}
// ajax에서 if문으로 result값이 true일때 이동하는 페이지 경로
@GetMapping("/cartList")
public String cartList(Model model,Authentication authentication) {
// memberId 값 가져와서 cartList에 같이 던져주기
User user = (User)authentication.getPrincipal();
model.addAttribute("cartList",cartService.selectCartList(user.getUsername())) ;
// 전체 총 가격 데이터 (리스트에서 뽑아서 누적합으로 데이터 던져주기)
int finalPrice = 0;
for(CartVO e : cartService.selectCartList(user.getUsername())) {
finalPrice = finalPrice + e.getTotalPrice();
}
model.addAttribute("finalPrice",finalPrice);
return "content/cart/cart_list";
}
//dataset 연습 메소드
@GetMapping("/test")
public String datasetTest() {
return "content/cart/test";
}
}
//-----------<참고 : cartList 장바구니목록조회 리스트 데이터 추출 할 때 >--------------------------------------------------------------------------------------//
// memberId값을 가져오는 방법: 반드시 !! 시큐리티에서!!
//로그인한 사람의 정보를 가져온다. 형변화필수
//로그인한사람의 아이디! 이름x!
//cartService.regCart(cartVO);
// 로그인정보 데이터 가져오는 방법
//cartVO.setMemberId(user.getUsername());
//user.getPassword();// 저장하지않으면 null값
//user.getAuthorities();//로그인한사람의 권한값
// 만약 장바구니 목록조회한 리스트들을 하나씩 뺀 CartVO의 각각의 값은 어떻게 출력되는지 보자.
//CartVO(
// cartCode=CART_016
// , itemCode=ITEM_008
// , memberId=null
// , regDate=2022-10-13
// , totalPrice=100000
// , cartAmount=1
// , itemVO=ItemVO(
// itemCode=ITEM_008
// , itemName=상품1111
// , itemPrice=100000
// , itemComment=null
// , regDate=2022-10-13
// , itemStock=0
// , cateCode=null
// , itemStatus=null
// , cateName=null
// , imgList=[
// ImgVO(
// imgCode=null
// , originName=null
// , attachedName=4fc21c03-428d-4bc0-af80-03d0e00844f8.jpg
// , isMain=null
// , itemCode=ITEM_008)
// ]
// , categoryVO=CategoryVO(
// cateCode=null
// , cateName=테스트1
// , cateStatus=null)
// )
// )
html
- detail_item.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultra.net.nz/thymeleaf/layout"
layout:decorate="~{layout/base_layout}"
xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<div layout:fragment="content">
<div class="row justify-content-center" style="padding:1%;" >
<div class="col-12">
<!-- 상품의 상세정보를 가져오려면 카테고리 정보도 가져와야한다. -->
<!-- 상품을 기준으로 이전 상품목록조회처럼 컬렉션을 만들어 사용해야한다. -->
<!-- 카테고리기준 상품정보테이블과 관계 : 1:n -> collection -->
<!-- 상품정보기준카테고리테이블의 관계 : 1:1 -> association -->
<div class="row mb-3" >
<div class="col" align="center">
<h3>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-book" viewBox="0 0 16 16">
<path d="M1 2.828c.885-.37 2.154-.769 3.388-.893 1.33-.134 2.458.063 3.112.752v9.746c-.935-.53-2.12-.603-3.213-.493-1.18.12-2.37.461-3.287.811V2.828zm7.5-.141c.654-.689 1.782-.886 3.112-.752 1.234.124 2.503.523 3.388.893v9.923c-.918-.35-2.107-.692-3.287-.81-1.094-.111-2.278-.039-3.213.492V2.687zM8 1.783C7.015.936 5.587.81 4.287.94c-1.514.153-3.042.672-3.994 1.105A.5.5 0 0 0 0 2.5v11a.5.5 0 0 0 .707.455c.882-.4 2.303-.881 3.68-1.02 1.409-.142 2.59.087 3.223.877a.5.5 0 0 0 .78 0c.633-.79 1.814-1.019 3.222-.877 1.378.139 2.8.62 3.681 1.02A.5.5 0 0 0 16 13.5v-11a.5.5 0 0 0-.293-.455c-.952-.433-2.48-.952-3.994-1.105C10.413.809 8.985.936 8 1.783z"/>
</svg>
Item Information
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-book" viewBox="0 0 16 16">
<path d="M1 2.828c.885-.37 2.154-.769 3.388-.893 1.33-.134 2.458.063 3.112.752v9.746c-.935-.53-2.12-.603-3.213-.493-1.18.12-2.37.461-3.287.811V2.828zm7.5-.141c.654-.689 1.782-.886 3.112-.752 1.234.124 2.503.523 3.388.893v9.923c-.918-.35-2.107-.692-3.287-.81-1.094-.111-2.278-.039-3.213.492V2.687zM8 1.783C7.015.936 5.587.81 4.287.94c-1.514.153-3.042.672-3.994 1.105A.5.5 0 0 0 0 2.5v11a.5.5 0 0 0 .707.455c.882-.4 2.303-.881 3.68-1.02 1.409-.142 2.59.087 3.223.877a.5.5 0 0 0 .78 0c.633-.79 1.814-1.019 3.222-.877 1.378.139 2.8.62 3.681 1.02A.5.5 0 0 0 16 13.5v-11a.5.5 0 0 0-.293-.455c-.952-.433-2.48-.952-3.994-1.105C10.413.809 8.985.936 8 1.783z"/>
</svg>
</h3>
</div>
</div>
<div class="row" style="width: 80%; padding-left : 20%;">
<div class="col-12">
<div class="row" >
<!-- 상품 상세 이미지 -->
<div class="col-md-6">
<th:block th:each="img : ${item.imgList}">
<th:block th:if="${img.isMain eq 'Y'}">
<div align="center">
<img class="img-thumbnail" width= "180px" th:src="|@{/images/}${img.attachedName}|">
</div>
</th:block>
</th:block>
</div>
<!-- 상품상세정보 우측화면 -->
<div style="font-size: 20px; " class="col-md-6">
<div class="row" style="background-color: #F9F9F9;" >
<div class="col">
<div class="row mb-2 mt-3">
<div class="col-md-6" style="background-color: #F9F9F9;">
<div >카테고리 </div>
</div>
<div class="col-md-6">
<div th:text="${item.categoryVO.cateName}"></div>
</div>
</div>
<div class="row mb-2">
<div class="col-6" style="background-color: #F9F9F9;">
<div>상품명 </div>
</div>
<div class="col-6">
<div th:text="${item.itemName}" ></div>
</div>
</div>
<div class="row mb-2">
<div class="col-6" style="background-color: #F9F9F9;">
<div>가격 </div>
</div>
<div class="col-6">
<div th:text="${item.itemPrice}">원</div>
</div>
</div>
<div class="row mb-2">
<div class="col-6" style="background-color: #F9F9F9;">
<div>수량 </div>
</div>
<div class="col-6">
<!-- ajax 사용하기때문에 form태그 사용안함 -->
<!-- <form id="regCartForm" th:action="@{/cart/regCart}" method="post"> --> <!-- js에서 submit으로 form태그 실행시키기 -->
<!-- 필요한 데이터만 form태그로 보내기위해서 ! 수량값 + 아이템코드 -->
<input name="cartAmount" id="cartAmount" type="number" value="1" class="form-control" aria-describedby="passwordHelpInline">
<input type="hidden" name="itemCode" id="itemCode" th:value="${item.itemCode}">
<!-- </form> -->
</div>
</div>
<div class="row mb-2">
<div class="col-6" style="background-color: #F9F9F9;">
<div >총가격 </div>
</div>
<div class="col-6">
<div th:text="${item.itemPrice}">원</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="row mb-2" style="margin-top: 15px; ">
<div class="col-6">
<button type="button" class="btn btn-outline-secondary">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-bag-fill" viewBox="0 0 16 16">
<path d="M8 1a2.5 2.5 0 0 1 2.5 2.5V4h-5v-.5A2.5 2.5 0 0 1 8 1zm3.5 3v-.5a3.5 3.5 0 1 0-7 0V4H1v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V4h-3.5z"/>
</svg>
  구매
</button>
</div>
<div class="col-6">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-basket2" viewBox="0 0 16 16">
<path d="M4 10a1 1 0 0 1 2 0v2a1 1 0 0 1-2 0v-2zm3 0a1 1 0 0 1 2 0v2a1 1 0 0 1-2 0v-2zm3 0a1 1 0 1 1 2 0v2a1 1 0 0 1-2 0v-2z"/>
<path d="M5.757 1.071a.5.5 0 0 1 .172.686L3.383 6h9.234L10.07 1.757a.5.5 0 1 1 .858-.514L13.783 6H15.5a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-.623l-1.844 6.456a.75.75 0 0 1-.722.544H3.69a.75.75 0 0 1-.722-.544L1.123 8H.5a.5.5 0 0 1-.5-.5v-1A.5.5 0 0 1 .5 6h1.717L5.07 1.243a.5.5 0 0 1 .686-.172zM2.163 8l1.714 6h8.246l1.714-6H2.163z"/>
</svg>
<!-- 스스로 만듣 장바구니 버튼....modal창(아래있음) ajax해보려다 만것 -->
<!-- <input type="button" th:onclick="addCart();" value="장바구니_me" class="btn btn-light"> -->
<!-- <button th:onclick="addCart();" data-bs-toggle="modal" data-bs-target="#cart_modal" style="color: #3D8361;" class="btn btn-light"> -->
<button th:onclick="addCart();" style="color: #3D8361;" class="btn btn-light">
장바구니_T
<!-- display: none; : 완전 없는 태그 취급을 한다. 공간도 x , layout 영향 주지 않는다.-->
<!-- visibility: hidden; : 눈에는 안보이지만 공간은 유지, layout 영향을 주고있다. -->
<!-- 화면에 안보이도록 만들기 -->
<div id="test" style="display: none;">
<div id="isLogin" sec:authorize="hasAnyRole('ROLE_ADMIN', 'ROLE_MEMBER')">
1
</div>
<!-- 빈값을 주면 빈값"" 일때 로그인인증됨을 확인가능하다. null이면 null이라고 뜨기때문에 이와 차이가 있다 -->
</div>
</button>
<!-- <p th:text="${#authentication.authenticated}"></p> --> <!-- 로그인/아웃 모두 true값 발생해서 사용x -->
<!-- <p th:text="${#authentication.name}"></p> --> <!-- 로그하면 로그인id/로그인안하면, anonymousUser(임시출입증) -->
<!-- <p th:text="${#authentication.authorities}"></p> --><!-- 로그인한 사람의 권한 데이터 추출 : 인증안하면 [role_anonymous]-->
<!-- if문처럼 해석) 해당 권한이 있다면? 다음 내용이 뜬다.-->
<!-- <div sec:authorize="hasAnyRole('ROLE_ADMIN', 'ROLE_MEMBER')">
ROLE_ADMIN 혹은 ROLE_MEMBER 권한이 있습니다.
</div> -->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row mt-5">
<div class="col-12">
<div class="row row justify-center-center">
<div class="col">
<div style="font-size: 25px;">상품 내용</div>
<div th:text="${item.itemComment}" style="padding:15px; height:150px; background-color: #F9F9F9;"></div>
</div>
</div>
</div>
</div>
<div class="row mt-5">
<div class="col">
<div style="font-size: 25px;">상세 이미지</div>
<th:block th:each="img : ${item.imgList}">
<th:block th:if="${img.isMain ne 'Y'}">
<div style="background-color: #F9F9F9;" align="center">
<img class="img-thumbnail" width= "290px" height="260px" th:src="|@{/images/}${img.attachedName}|">
</div>
</th:block>
</th:block>
</div>
</div>
</div>
</div>
<!-- 내가 만든 modal-->
<!-- 장바구니 클릭시 실행 Modal -->
<div class="modal fade" id="cart_modal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel" style="font-weight: bold;">CART</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<!-- cart창 modal -->
<div class="modal-body">
<!-- 장바구니 - 세션이용 데이터 form태그로 보내주기 -->
<form class="row g-3" name="formCart" method="post" th:action="@{/cart/regCart}" >
<div class="mb-3">
<label for="memberId" class="form-label" >장바구니에 등록되었습니다. </label>
<label for="memberPw" class="form-label">장바구니 페이지로 이동하시겠습니까?</label>
</div>
<div class="modal-footer">
<!--submit은 ajax에서 사용하는 것이 아니다!!! onclick이용해서 ajax? -->
<button type="submit" class="btn btn-primary">My Cart </button>
<button type="button" class="btn btn-primary" th:onclick="addCart();">AjaxCart</button>
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- 선생님ver. Modal -->
<!-- 장바구니 클릭 후 실행되는 모달창 -->
<!-- 장바구니 버튼을 클릭시 모달이 뜨도록 만들기. -->
<!-- 1. item_manage.js 파일 찾아가서 코드 알아보고 가져오기 -->
<!-- 2. 모달창 띄우는 소스(코드) 를 ajax에 복붙한뒤 서로 id값(id="regCartModal")을 맞춰야한다. -->
<div class="modal fade" id="regCartModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<div class="row mb-3">
<div class="col">
<div>장바구니에 상품을 등록완료했습니다.</div>
<div>장바구니 페이지로 이동하시겠습니까?</div>
</div>
</div>
<div class="row">
<div class="col text-end">
<!-- th:onclick="|location.href='@{컨트롤러경로}'|" -->
<button th:onclick="|location.href='@{/cart/cartList}'|" type="button" class="btn btn-primary btn-sm" style="--bs-btn-padding-y: .25rem; --bs-btn-padding-x: 3rem; --bs-btn-font-size: 1rem;">
확인
</button>
<button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal" style="--bs-btn-padding-y: .25rem; --bs-btn-padding-x: 3rem; --bs-btn-font-size: 1rem;">
취소
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" th:src="@{/js/layout/detail_item.js}"></script>
</div>
</html>- cart_list.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultra.net.nz/thymeleaf/layout"
layout:decorate="~{layout/base_layout}"
xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<div layout:fragment="content">
<!-- 제목줄 -->
<div class="row mb-5">
<div class="col">
<h1>CART LIST</h1>
</div>
</div>
<!-- 장바구니 목록 테이블 -->
<div class="row ">
<div class="col ">
<table style="width: 100%;" class="table table-striped table-hover">
<colgroup>
<col width="*%" >
<col width="5%" >
<col width="15%" >
<col width="20%" >
<col width="25%" >
<col width="20%" >
<col width="20%" >
</colgroup>
<thead style="font-size: 20px; font-weight: bold; color: #425F57;">
<tr >
<td><input type="checkbox" id="allChk" checked="checked"></td>
<td>No.</td>
<td colspan="2" style="text-align: center;">상품 정보</td>
<td>수량</td>
<td>가격</td>
<td>등록 일자</td>
</tr>
</thead>
<tbody align="center" style="text-align: justify;">
<th:block th:if="${#lists.size(cartList) == 0}">
<div> 장바구니에 등록된 상품이 없습니다.</div>
</th:block>
<th:block th:unless="${#lists.size(cartList) == 0}">
<th:block th:each="cart : ${cartList}" >
<tr> <!-- 만약, td태그 밖에서 데이터 화면에 나타나게한다면? -> [[${cart.cateName}]] -->
<td><input data-cart-code="bbb" data-cartCode="${cart.cartCode}" type="checkbox" class="chk" value="${cart.itemCode}" checked="checked"></td>
<!-- 역순으로 순서 뽑는 방법 : 전체갯수 - index -->
<!-- 순서(No) 뽑는방법 : [[${cartStat.index}]] 이용 -->
<!-- 차례대로 순서 뽑는방법 : <th:block th:each="cart , status : ${cartList}" > <td th:text="${status.count}"> -->
<td>
<span th:text="${#lists.size(cartList) - cartStat.index}"></span>
</td>
<td ><img width="100px;" height="140px;" th:src="|@{/images/}${cart.attachedName}|"> </td>
<td >
[<span style="color: #749F82;" th:text=" ${cart.cateName}"></span>]
<span th:text=" ${cart.itemName}" ></span>
</td>
<td >
<input type="number" min="0" th:value="${cart.cartAmount}">
<button type="button" class="btn btn-light">변경</button>
</td>
<td><!-- (다른방법) [[${cart.itemVO.itemPrice}]]*[[${cart.cartAmount}]] -->
<div class="row">
<div class="col-6">
<div>[[${#numbers.formatCurrency(cart.itemPrice)}]] * [[${cart.cartAmount}]] = </div>
</div>
<div class="col-6">
<div class="totalPriceDiv" style="font-style: italic; font-weight: bold;"th:text="${#numbers.formatCurrency(cart.totalPrice)}" th:data-total-price="${cart.totalPrice}"> </div>
</div>
</div>
</td>
<td th:text="${cart.regDate}"> </td>
</tr>
</th:block>
</th:block>
</tbody>
</table>
</div>
</div>
<!-- 하단 영역 -->
<!-- 총가격 -->
<div class="row mt-5 mb-1" >
<div class="col-3"></div><!-- 줄맞춤용도 -->
<div class="col-3"></div><!-- 줄맞춤용도 -->
<div class="col-3"></div><!-- 줄맞춤용도 -->
<div class="col-3">
<div class="input-group mb-3 " >
<span class="input-group-text" id="inputGroup-sizing-default">
총가격
</span>
<div id="finalPriceTag" style="text-align: right;" th:data-total-price="${finalPrice}" th:text=" ${#numbers.formatCurrency(finalPrice)}" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-default"></div>
</div>
</div>
</div>
<!-- 삭제 및 구매 버튼 -->
<div class="row mb-10" >
<div class="col" align="right">
<form action="insertBuys.buy" method="post">
<input type="hidden" name="totalPrice" id="totalPrice" value="">
<input type="hidden" name="itemCode" id="itemCode" value="">
<input type="hidden" name="cartAmount" id="cartAmount" value="">
<input type="hidden" name="cartCode" id="cartCode" value="">
<button onclick="goDelete();" class="btn btn-outline-danger">선택 삭제</button>
<button onclick="goBuy();" class="btn btn-outline-warning" style="color: #FF9F29;">선택 구매</button>
</form>
</div>
</div>
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" th:src="@{/js/layout/cart_list.js}"></script>
</div>
</html>js
- detail_item.js
//----------------- 페이지 열림과 동시에 실행되는 코드-----------------------//
//isLoginFail();// 아래 함수정의에서 사전에 구현된 기능을 가져오기
//------------------------------ 변수 ---------------------------------------//
// 장바구니 버튼 모달
// const cart_modal = document.querySelector('#cart_modal');
//------------------------------ 함수 정의 ----------------------------------//
// 장바구니 cart 버튼 클릭시 진행되는 함수(ajax로 실행시 진행)
function addCart() {
// 페이지 이동 확인용 alert창 띄우기
//alert("장바구니 리스트 페이지 성공");
// innerHTML : 선택한 태그 안에 있는 태그 내용을 그대로 가져온다.
//const str = document.querySelector('#test').innerHTML;
//alert(str);
// innerText ; 모든 코드를 해석 한 뒤, 실제 화면에 보여지는 데이터만 들고온다
const check_login= document.querySelector('#test').innerText; //
//alert(check_login); // 비어있다면 "" 빈 값 공백을 가져온다.
//check_login.trim(); // 앞뒤 공백모두 제거
//alert(check_login.trim());
if(check_login.trim() == ''){ // 로그인 권한이 빈값이라면~
alert('로그인 인증완료시 사용가능합니다.');
return ;// 아래 메소드 실행하지않고 메소드 종료
}
// 로그인 권한이 있다면~
// 별도로 else문을 실행하지 않아도 된다.
addCartAjax();
//실제 장바구니 등록 기능
//(CART_CODE,ITEM_CODE,MEMBER_ID,CART_AMOUNT,REG_DATE,TOTAL_PRICE) 중 어떤 데이터를 가져가야할까?
// -> ITEM_CODE,CART_AMOUNT 데이터만 들고가면 된다.
//방법1) 실제 경로에 데이터값이 모두 나타나므로 보안취약하다.
//location.href = '/cart/regCart?itemCode=ITEM_001&cartAmount=10';
//방법2) 자바스크립트에서 submit 실행 -- 더 간단하다.
// 1. form태그를 선택한다.
// 1-1) form 태그에 아이디값 부여하기
// 2. 선택한 form태그에서 .submit()함수 뒤에 붙이고 실행시킨다.
//(ajax사용으로 주석처리)
//document.querySelector('#regCartForm').submit();
}
//장바구니 등록시 실행되는 Ajax
function addCartAjax(){
$.ajax({
url: '/cart/regCart', //요청경로
type: 'post',
data: { 'cartAmount':document.querySelector('#cartAmount').value
,'itemCode': document.querySelector('#itemCode').value }, //필요한 데이터
success: function(result) {
//모달창 띄우는 코드
const modal = new bootstrap.Modal('#regCartModal');
modal.show();
// 모달창 없이 ajax코드
//result = confirm('장바구니에 상품을 등록완료했습니다.\n장바구니 페이지로 이동하시겠습니까?');
// result값이 t/f따라 true라면 장바구니 목록 페이지이동
//if(result){
// location.href = '/cart/cartList';
//}
},
error: function() {
alert('실패');
}
});
}
- cart_list.js
//제목 행의 체크박스의 체크여부를 확인
const allChk = document.querySelector('#allChk');
//제목 줄의 체크박스가 클릭되면..
allChk.addEventListener('click',function(){
//참고)
//alert(allChk.checked);
//allChk.id; //allChk
//allChk.type;//checkbox
const isChecked = allChk.checked;//체크된 제목줄 체크박스를 isChecked라고 한다.
//클래스가 chk 인 태그들을 모두 데리고 온다.
// 장바구니의 모든 체크박스를 체크한다.
const chk = document.querySelectorAll('.chk');
//제목 줄의 체크박스가 체크 됐다면..
if(isChecked){
//chk.checked = true;
//자바스크립트는 for문사용가능하나 자료형이 없어서 int 사용은 안한다
for(i = 0; i<chk.length; i++){
chk[i].checked = true;//체크된 클래스가 chk의 값은 true로 준다.
}
//자바스크립트의 for-each문: of를 사용한다!
//for(const e of chk){
// e.checked = true;
//}
}
else{
for(i = 0; i<chk.length; i++){
chk[i].checked = false;//체크된 클래스가 chk의 값은 true로 준다.
}
}
});
//제목줄 아래 체크박스칸들이 전부! 체크가 된다면..
//제목줄 아래 체크박스칸들이 전부! 가져온다.
const chk = document.querySelectorAll('.chk');
for(const e of chk){
//원래라면..
//매개변수 e
//e.addEventListener('click',function(e){});
//위의 이벤트문을 조금 변경한다면..
e.addEventListener('click',e=>{
const cnt = chk.length; //제목줄 밑의 전체 체크박스의 갯수는 cnt
const checkedCnt = document.querySelectorAll('.chk:checked').length; //클래스가 chk 인 것들 중에서 체크된것만 들고오겠다.그것의 갯수.
if(cnt == checkedCnt){
document.querySelector('#allChk').checked = true;
}
else{
document.querySelector('#allChk').checked = false;
}
});
}
//선택구매버튼을 클릭시
//클릭하면, '선택한 상품을 구매하시겠습니까?'팝업창을 띄운다.
function goBuy(){
const checkedCnt = document.querySelectorAll('.chk:Checked').length;//체크박스들중에서 체크된 것들만!(all)그것의 갯수.
if(checkedCnt == 0){
alert('선택한 상품이 없습니다.');
return ;
//리턴의 2가지 기능
//1)데이터를 넘기도록 돌려줄 값을 쓸 때(일반적)
//2)자바에서는 메소드이기때문에 뒤에 아무값도없으면 더이상 읽지않도록 함수종료 기능.
}
//장바구니에서 선택한 상품 구매하기 기능 구현
//넘겨야하는 데이터: 내가 체크한 ITEM_CODE,BUY_CNT,BUY_CODE, //TOTAL_PRICE(상관없어서 넘기지않음)
//ITEM_CODE, BUY_CNT, totalPrice..
//총가격(장바구니전체):우선,내가 체크된 체크박스와 같은 줄에있는 '총가격(상품별)'만 가져간다. 그리고 그들끼리만 더한다.
const checkedBoxes = document.querySelectorAll('.chk:checked'); // 여러개가지고 오니까 all 사용
let totalPrice = 0; // 변하기때문 let 사용한다.
let itemCodes = ''; // 변하기때문 let 사용한다.
let buyCnts = ''; // 변하기때문 let 사용한다.
let cartCodes = ''; // 변하기때문 let 사용한다.
//foreach문
//반복문사용해서 각 체크박스들의 각 총가격을 빼낸다
for(const checkBox of checkedBoxes){//체크된 checkedBoxes들 중에 하나씩 뺀다 그것을 checkBox 라고한다.
//자식,부모 태그 선택 함수
//parentElement() : 가장 가까운 부모태그를 찾아가는 함수
//children : 가장 가까운 자식태그를 찾아가는 함수
//previousSibling : 이전 형제 노드를 찾아 감. 제이쿼리는 prev()
//nextElementSibling() : 다음 형제 노드를 찾아 감.
//closest() : 가장 가까운 상위태그를 찾아가는 함수
//체크박스기준 감싸고있는 것중 가장가까운 tr 태그에서 6번째 자식태그안에 내용
const price = checkBox.closest('tr').children[5].innerText;
totalPrice = totalPrice + parseInt(price);
//총가격은 각 총가격에 가격을 누적시킨다.
//price는 위에서 const자료형이라 숫자합계산이 안되므로 정수형변화시키기!!
//alert(checkBox.value);
//상품코드 값 선택 후 누적합 계산
const itemCode = checkBox.value;
itemCodes = itemCodes + itemCode +',';//ITEM_001,ITEM_002,
//구매수량 값 선택 후 누적합 계산
const buyCnt = checkBox.closest('tr').children[4].innerText;
buyCnts = buyCnts + buyCnt +',';
//카테고리코드 값 선택 후 누적 합 계산
//우리가 임의로 만든 속성(data-cartCode)은 다른 방법으로 데이터 추출
const cartCode= checkBox.dataset.cartcode;//jsp에서 cartCode이지만 js는 항상 소문자로 가져오기때문에 소문자로 작성해야 오류발생x
console.log(checkBox.dataset);// 개발자콘솔창확인시, data-cart-code/data-cartCode(data-cartcode) 의 차이점 파악하기위해
cartCodes = cartCodes + cartCode +',';//CART_001.CART_002,..
}
//form태그 액션값이 insertBuys.buy인 것을 선택해서 form태그 name값가진 데이터들을 가지고 submit으로 해당 컨트롤러로 보낸다.
document.querySelector('form[action="insertBuys.buy"]').submit();
}
//선택삭제 클릭 시
function goDelete(){
const checkedCnt = document.querySelectorAll('.chk:Checked').length;
//선택한 상품이 없을 때
if(checkedCnt == 0){
alert('선택한 상품이 없습니다.');
return ;
}
//선택된 체크박스들 있을 때
const checkedBoxes = document.querySelectorAll('.chk:checked');
let cartCodes = '';
for(const checkBox of checkedBoxes){
const cartCode= checkBox.dataset.cartcode;
//반복문으로 카트코드를 계속 뽑으면 나오는 카트코드들을 문자열로 연결한다
//예)cart_001,cart_002,cart_003,...
cartCodes = cartCodes + cartCode +',';
}
cartCodes =cartCodes.substr(0,cartCodes.length-1);
//document.querySelector('#cartCode').value
// [데이터가져가서 페이지 이동 방법] 둘다 위에 있는 cartCodes 를 받는것은 같다.
//location.href='deleteCart.ca?cartCodes='+ cartCodes;
location.href=`deleteCart.ca?cartCodes=${cartCodes}`;//대신 백팁사용: ``
}dataset
: -data-(속성명) 이용하여 임의의 속성값을 부여후 데이터 추출할 수 있다.
- test.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultra.net.nz/thymeleaf/layout"
layout:decorate="~{layout/base_layout}"
xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<div layout:fragment="content">
<!-- data-(임의 속성명) -->
<!-- 만약 속성값을 주려는데 자동완성이 뜨지않으면 그냥 데이터가져갈수없다!!! -->
<!-- 이럴때는, dataset을 사용한다! -->
<!-- 주의할점!! dataset은 무조건 소문자로 데이터인식하기때문에 소문자로 적어야한다 -->
<!-- 만약 대문자로 인식하길원한다면 - 하이픈 사용하면, -하이픈 생략하고 대문자로 인식한다. -->
<div id="testDiv" data-name="java" data-age="20" data-totalprice="100" data-total-price="100"></div>
<!-- 위에서 있는 속성값 이외의 값을 추가하여 데이터 가져갈수있다. -->
<!-- <input type="text" value="20" data-sdsds=""> -->
<script type="text/javascript">
const testDiv = document.querySelector('#testDiv');
console.log(testDiv.dataset);/* 콘솔: {name: 'java', age: '20', totalprice: '100', totalPrice: '100'} */
console.log(testDiv.dataset.name); //java
console.log(testDiv.dataset.age); //20
console.log(testDiv.dataset.totalprice); //100
console.log(testDiv.dataset.totalPrice); //100
</script>
</div>
</html>결과
: 장바구니 페이지에 들어가면, 체크박스 전체해제,전체선택, 체크된 체크박스의 총 가격값만 누적계산되어 finalPrice값이 총가격에 계산되어 나타난다.
Dev.Vinch