게으른 완벽주의자의 개발자 도전기

ApexCharts.js - Open Source JavaScript Charts for your website ApexCharts.js - Open Source JavaScript Charts for your website ApexCharts is a a free and open-source modern charting library that helps developers to create beautiful and interactive visualizations for web pages. apexcharts.com 1. Exploer Demos에 들어가서 원하는 디자인의 차트를 선택한다. 2. 원하는 차트 선택한 후 아래의 태그를 복사하여 js파일에 붙여 넣기 3. 차트 그리기 위한 태그 추가하기 ht..

modal의 아코디언을 활용하여 구매내역 조회를 하고자 한다. 1. mapper 구매내역 조회 SELECT BUY_DATE , B.BUY_CODE , TOTAL_PRICE , (SELECT COUNT(BUY_DETAIL_CODE) FROM SHOP_BUY_DETAIL WHERE BUY_CODE = B.BUY_CODE)AS BUY_CNT FROM SHOP_BUY B WHERE MEMBER_ID = #{memberId} ORDER BY BUY_DATE DESC 구매내역 상세 리스트 SELECT S.ITEM_CODE , CATE_NAME , ITEM_NAME , ITEM_PRICE , BUY_AMOUNT , ATTACHED_NAME , (ITEM_PRICE * BUY_AMOUNT) AS BUY_PRICE , ..

장바구니에서 선택 구매 후 구매확정을 위한 화면을 구현하고자 한다. 구매확정 시 장바구니에서 구매했다면 구매 테이블과 구매상세테이블에 데이터가 들어간 후 장바구니에 담겨 있던 상품들은 삭제되도록 mapper를 구성한다 또한, 단일구매의 경우 장바구니에 담겼던 것이 아니기 때문에 장바구니 상품삭제는 필요하지 않기 때문에 if로 두가지 케이스를 구분하여 구현되도록 하고자 한다. 1. mapper 선택 구매하기 (shop_buy 테이블에 데이터 넣기) INSERT INTO SHOP_BUY( BUY_CODE , MEMBER_ID , TOTAL_PRICE )VALUES( #{buyCode} , #{memberId} , #{totalPrice} ) buy_detail에 데이터 넣기 INSERT INTO SHOP_B..

수량 변경했을 때 총가격도 변경 되도록 구현하고자 한다. 1. html 가격 : won 수량 : 총 가격 : won 2. js const cartAmountInput = document.querySelector('#cartAmount'); cartAmountInput.addEventListener('change', function(){ const itemPrice = document.querySelector('#itemPriceSpan').dataset.itemPrice; const cartAmount = document.querySelector('#cartAmount').value; const result = itemPrice * cartAmount; document.querySelector('#tot..

1. 선택삭제와 선택 구매 1) html 선택삭제 선택구매 2) js function deleteBuy(selectedTag){ const deleteForm = document.querySelector('#cartForm'); 체크한 cartCode 데이터 다 가져오기 const checkedChks = document.querySelectorAll('.chk:checked'); if(checkedChks.length == 0){ alert('선택한 상품이 없습니다.') return; } let cartCodes = ''; for(const checkedChk of checkedChks){ cartCodes = cartCodes + checkedChk.value + ','; //cart_001cart_..

1. 장바구니 리스트 1) mapper SELECT CART_CODE , S.ITEM_CODE , CART_AMOUNT , TO_CHAR(T.REG_DATE,'YYYY-MM-DD') AS REG_DATE , TOTAL_PRICE , CATE_NAME , ITEM_NAME , ATTACHED_NAME , ITEM_PRICE FROM ITEM_CATEGORY C, SHOP_ITEM S, ITEM_IMG G, SHOP_CART T WHERE C.CATE_CODE = S.CATE_CODE AND S.ITEM_CODE = T.ITEM_CODE AND S.ITEM_CODE = G.ITEM_CODE AND IS_MAIN = 'Y' AND MEMBER_ID = #{memberId} ORDER BY CART_CODE D..

1. html No 상품 정보 수량 가격 등록일 [] 변경 [[${cart.itemList.itemPrice}]] * [[${cart.cartAmount}]] [[${#numbers.formatCurrency(cart.totalPrice)}]] 2. js //---------------- 스크립트 실행과 동시에 필요한 변수 생성 ---------------------// 제목줄 체크박스 const checkAll = document.querySelector('#checkAll'); 제목줄 제외한 장바구니 체크박스 const chks = document.querySelectorAll('.chk'); 전체선택, 전체해제 이벤트 checkAll.addEventListener('click',function(){..

1. html 구매하기 2. js function detailBuy(){ //수량 데이터 넘기기 const buyAmount = document.querySelector('#cartAmount').value; document.querySelector('#buyAmountInput').value = buyAmount; document.querySelector('#buyDetailForm').submit(); } 3. mapper SELECT ITEM_CODE , ITEM_NAME , ITEM_PRICE , (SELECT ATTACHED_NAME FROM ITEM_IMG WHERE ITEM_CODE = S.ITEM_CODE AND IS_MAIN = 'Y') AS ATTACHED_NAME FROM SHOP_I..