-
orderForm.jsp, orderList.jsp카테고리 없음 2024. 1. 8. 21:46
<script> // 총 가격 계산 function calculateTotal() { let totalPrice = 0; // 모든 input을 가져다가 저장해서 계산 document.querySelectorAll('input[type="number"]').forEach(function(input) { let quantity = parseInt(input.value); // 각 제품의 수량 let price = parseFloat(input.closest('tr').querySelector('.productPrice').textContent); // 각 제품의 가격 totalPrice += quantity * price; // 각 제품의 총 가격을 전체 총 가격에 더함 }); // 총 가격 업데이트 document.getElementById('displayTotalPrice').textContent = totalPrice; // 화면에 총 가격 표시 document.getElementById('hiddenTotalPrice').value = totalPrice; // 숨겨진 필드에 총 가격 저장했다가 서버 전송 } // 모든 숫자 입력 필드에 input 이벤트 리스너 등록 document.querySelectorAll('input[type="number"]').forEach(function(input) { input.addEventListener('input', calculateTotal); // 입력이 변경될 때마다 calculateTotal 함수 호출 }); // 페이지 로드 시 최초 한 번은 총 가격 계산 calculateTotal(); // 상품 추가 또는 삭제 액션을 수행하는 함수 function modifyProduct(actionType) { var form = document.getElementById('modifyProduct'); if (actionType === 'add') { form.action = '/productAddition'; // 액션이 'add'인 경우 상품 추가 엔드포인트로 설정 } else if (actionType === 'delete') { form.action = '/productDeletion'; // 액션이 'delete'인 경우 상품 삭제 엔드포인트로 설정 } form.submit(); // 폼 제출 } // 어드민 기능 활성화 function administrator() { document.getElementById('passwordInput').style.display = 'block'; // 비밀번호 입력란 표시 document.getElementById('administration').style.display = 'none'; // 어드민 버튼 숨김 } // 비밀번호 검증 function verifyPassword() { // jQuery를 사용하여 비동기적으로 서버에 비밀번호 검증 요청 $.ajax({ type: "POST", url: "/modifyProduct", data: { password: $("#password").val() }, success: function(response) { if (response.isAuthenticated) { // 비밀번호 인증 성공 시 // 비밀번호 입력 칸과 확인 버튼 숨기기 $("#passwordInput").hide(); // 메뉴 추가 및 삭제 버튼 보이기 $("#productAddition").show(); $("#productDeletion").show(); $("#orderList").show(); $("#cancellation").show(); } else { // 비밀번호 인증 실패 시 메인페이지로 돌아감 window.location.href = "/"; } } }); } // 다른 페이지로 이동하는 함수들 function toProductAddition() { window.location.href = "/productAddition"; } function toProductDeletion() { window.location.href = "/productDeletion"; } function toMainPage() { window.location.href='/'; } function toOrderList() { window.location.href="/orderList"; } </script>calculateTotal() 함수
- 페이지에서 모든 숫자 입력(input 태그 중 type이 number인)을 찾아서, 각 입력의 수량과 해당 제품의 가격을 곱한 값을 모두 더해 총합을 구한다. 최종 총 가격을 페이지의 특정 엘리먼트에 업데이트하고, 다른 특정 엘리먼트에도 숨겨진(totalPrice를 담는) 값을 업데이트한다. 웹 페이지에서 사용자에게 보여지는 정보를 업데이트하고 서버로 데이터를 전송하기 위함). 입력 값이 변경될 때마다 실시간으로 반영되도록 input 이벤트 리스너가 등록되어 있다.
// 총 가격 계산 function calculateTotal() { let totalPrice = 0; // 모든 input을 가져다가 저장해서 계산 document.querySelectorAll('input[type="number"]').forEach(function(input) { let quantity = parseInt(input.value); // 각 제품의 수량 let price = parseFloat(input.closest('tr').querySelector('.productPrice').textContent); // 각 제품의 가격 totalPrice += quantity * price; // 각 제품의 총 가격을 전체 총 가격에 더함 }); // 총 가격 업데이트 document.getElementById('displayTotalPrice').textContent = totalPrice; // 화면에 총 가격 표시 document.getElementById('hiddenTotalPrice').value = totalPrice; // 서버로 데이터를 전송 } // 모든 숫자 입력 필드에 input 이벤트 리스너 등록 document.querySelectorAll('input[type="number"]').forEach(function(input) { input.addEventListener('input', calculateTotal); // 입력이 변경될 때마다 calculateTotal 함수 호출 }); // 페이지 로드 시 최초 한 번은 총 가격 계산 calculateTotal();modifyProduct(actionType) 함수
- 어드민 기능이 활성화 되면 사용되는 함수, 페이지에 있는 특정 폼(modifyProduct, 상품 추가 및 삭제 등)의 액션 속성을 변경하여, 액션 타입에 따라 상품 추가 또는 삭제를 처리할 서버 엔드포인트로 전송한다. 이 함수는 'add' 또는 'delete'를 매개변수로 받아서 해당 액션에 따라 액션을 설정한다.
// 상품 추가 또는 삭제 액션을 수행하는 함수 function modifyProduct(actionType) { var form = document.getElementById('modifyProduct'); if (actionType === 'add') { form.action = '/productAddition'; // 액션이 'add'인 경우 상품 추가 엔드포인트로 설정 } else if (actionType === 'delete') { form.action = '/productDeletion'; // 액션이 'delete'인 경우 상품 삭제 엔드포인트로 설정 } form.submit(); // 폼 제출 }administrator() 함수
- 디폴트로 어드민 버튼을 숨기고 화면에 표시되지 않게 하기 위해 사용하는 함수, 비밀번호 입력 시 어드민이 활성화(추가, 삭제, 주문 목록, 취소) 기능을 사용할 수 있다.
// 어드민 기능 활성화 function administrator() { document.getElementById('passwordInput').style.display = 'block'; // 비밀번호 입력란 표시 document.getElementById('administration').style.display = 'none'; // 어드민 버튼 숨김 }verifyPassword() 함수
- 어드민 비밀번호를 검증하기 위해 서버에 비동기적으로 요청을 보낸다. 비밀번호가 인증되면 페이지의 어드민 기능(메뉴 추가, 삭제, 주문 목록, 취소)을 보이도록 엘리먼트의 표시 여부를 조절하고, 인증에 실패하면 메인 페이지 (디폴트로 어드민이 보이지 않는 화면) 로 이동한다.
// 비밀번호 검증 function verifyPassword() { // jQuery를 사용하여 비동기적으로 서버에 비밀번호 검증 요청 $.ajax({ type: "POST", url: "/modifyProduct", data: { password: $("#password").val() }, success: function(response) { if (response.isAuthenticated) { // 비밀번호 인증 성공 시 // 비밀번호 입력 칸과 확인 버튼 숨기기 $("#passwordInput").hide(); // 메뉴 추가 및 삭제 버튼 보이기 $("#productAddition").show(); $("#productDeletion").show(); $("#orderList").show(); $("#cancellation").show(); } else { // 비밀번호 인증 실패 시 메인페이지로 돌아감 window.location.href = "/"; } } }); }기타 함수들 (toProductAddition(), toProductDeletion(), toMainPage(), toOrderList())
- 각 함수는 페이지 이동을 담당한다. 특정 경로로 이동하도록 window.location.href를 사용했으며, 각 함수는 버튼 또는 링크 클릭 시 호출되어 페이지가 이동된다.
// 다른 페이지로 이동하는 함수들 function toProductAddition() { //음료 추가 페이지 window.location.href = "/productAddition"; } function toProductDeletion() { //음료 메뉴 제거 페이지 window.location.href = "/productDeletion"; } function toMainPage() { //메인 페이지 window.location.href='/'; } function toOrderList() { //주문목록 페이지 window.location.href="/orderList"; }
<body> <h2>주문 목록</h2> 주문 개수 : ${orders.size()} 개 <br><br> <table class="table table-hover rounded-table"> <tr> <th>주문 번호</th> <th>주문 날짜</th> <tr> <c:forEach items="${orders}" var="orders"> <tr> <td><a href="orderDetail/${orders.orderId}">${orders.orderId}</a></td> <td>${orders.orderDate}</td> <tr> </c:forEach> </table> <div class="btn-container"> <input class="btn btn-light" type="submit" value="종료" onclick="toMainPage()"> </div> <script> function toMainPage() { window.location.href='/'; } </script> </body><div class="btn-container"> <input class="btn btn-light" type="submit" value="종료" onclick="toMainPage()"> </div>종료 버튼을 누를 시 toMainPage() 함수 실행, window.location.href='/'; 는 메인 페이지로 이동함.