Spring97 [Spring] 쇼핑몰 - 49 Chart.js에 Map 데이터 조회하기 카테고리별 매출 현황 차트와 표를 띄워보자. 데이터베이스에 카테고리별 매출 현황 목록을 추가한다. AdminController 컨트롤러 메뉴코드와 서브메뉴코드 둘다 받을 수 있는 AdminSubMenuVO를 커맨드객체로 불러와주었다. 이게 있어야 정상적으로 작동한다. 그리고 Model 객체에 MENU_003 데이터를 무작위로 넣으면서 menuCode에 저장한다. IntercepterConfig 인터셉터 인터셉터에 만들었던 컨트롤러를 추가해주어 메뉴와 서브메뉴를 띄울 수 있다. sale_category_month.html 이렇게 서브메뉴와 메뉴가 성공적으로 뜨면 된다. sale_category_month.html chart.js에서 script를 가지고와줘서 html에 넣어준다. 그리고 노란색 박스처럼 j.. 2023. 4. 18. [Spring] 쇼핑몰 - 48 select에 onchange 데이터 적용 Chart.js -2 Select 박스에서 year 데이터가 변할 때마다 그에 맞는 판매건수와 판매금액을 조회해보자. DateUtil 패키지 여기서 날짜 데이터를 만들고 년도 year을 추출해서 getYear 메소드를 호출 할때 실행되도록 리턴시킨다. AdminController 컨트롤러 컨트롤러에 model 객체에 year 이름으로 추출될 수 있도록 DateUtil에서 만든 getYear메소드를 넣어주었따. sale_status_per_month.html ${#numbers.sequence(1, 3)} 은 num에는 1, 2, 3이 들어온다. 이런식으로 해서 5개의 데이터를 추출하였다. th:selected="" 에는 조건이 들어오면 된다. admin-mapper.xml mapper에서 year 데이터에 맞는 값들이 조회되.. 2023. 4. 17. [Spring] 쇼핑몰 - 47 Chart.js에 Ajax 데이터 전달하기 파란색 막대그래프에서는 판매금액 데이터를 가지고 올 것이다. data에 [30000, 3000, .... ] 빨간색 꺾은선 그래프는 판매 건수 데이터를 가지고 올 것이다. data에 [2, 2, ....] js에 데이터를 가지고 와야하는데, 컨트롤러에서 js로 가지고오면 된다. 컨트롤러에서 js로 가지고 오는법은 ajax를 사용하면 된다. sale_status_per_month.js html 들어오자마자 바로 js가 실행되면서 getChartDataAajx 함수가 실행되면서 ajax가 실행된다. AdminController 컨트롤러 컨트롤러에서 데이터를 ajax에 받아오기 위해 먼저 이동해준다. StatisticsVO List 데이터를 Map으로 받기 위해 위 1~12의 데이터를 return 시켜주면서 .. 2023. 4. 17. [Spring] 쇼핑몰 - 46 Chart.js 사용해서 html에 차트 띄우기 html html에 연결할 js를 추가해주고, 경로에 맞게 js를 생성해주었다. x축 제목이 labels에 나온다. datasets 안에도 label이 있는데, 이것은 차트 위 # of Votes와 같이 나타내주는 곳이다. datasets 안의 data는 y축 데이터이다. datasets 안의 borderWidth은 막대 그래프의 테두리 두께이다. datasets의 대괄호 안에 있는 중괄호 하나가 그래프 하나를 나타낸다. 대괄호는 하나만 있어야하고, 중괄호를 추가해서 그래프들을 추가해줄 수 있다. chart.js 사이트에 가보면 div 맨위에 id가 canvas로 형태가 짜여져 있기 때문에 html에서도 canvas로 불러왔다. 이런식으로 중괄호를 추가해서 그래프들을 추가해줄 수 있다. label, ty.. 2023. 4. 17. [Spring] 쇼핑몰 - 45 Map데이터 활용해서 월별 매출 페이지 조회 일단 SHOP_BUY 테이블에 데이터들을 pppp1234 아이디로 1월 2월 3월 4월 5월까지 여러개 넣었다. AdminControlelr 컨트롤러 DB에 저장했던 대로 임의로 MENU_003을 model에 넣어주면서 주문 관리 메뉴의 서브메뉴로 등록해준다. IntercepterConfig 인터셉터 이후 해당 컨트롤러 saleStatusPerMonth도 인터셉터에 저장시켜주었다. sale_status_per_month.html saleStatusPerMonth 컨트롤러에서 오게 되는 해당 페이지를 만들어주면 오른쪽과 같이 화면이 구성된다. 방법 1 resultMap과 VO를 사용해서 뽑기. StatisticsVO, admin-mapper.xml 1월부터 12월까지 데이터가 저장될 객체 VO를 만들어주고.. 2023. 4. 13. [Spring] 쇼핑몰 - 44 관리자 메뉴 목록 추가 Interceptor 관리자 계정으로 가서 관리 메뉴들을 다시 만들어보자. header.html header에서 관리자메뉴일때 메뉴이름 조회하는 곳을 찾아서 주소를 준다. 컨트롤러로 가기 전에, menuCode 데이터를 가지고 와줘야하며, 컨트롤러의 상세 주소는 데이터베이스에 SUB_MENU_URL로 만들어주었기 때문에, 데이터 값을 끌어 와주면 된다. th:each로 반복시켜 준 ${menuList} 안에 menuUrl이 들어가 있으므로, 각 순서대로 뽑아준 것을 가지고 와준다. adminMenu-mapper.xml 메뉴와 서브메뉴 쿼리는 interceptor에서 실행한다. MENU_001 자리에는 002, 003도 추가되었으니, #{menuCode} 로 바꿔줄 수 있다. Admin Service 쿼리문에서 매개변수로 me.. 2023. 4. 13. [Spring] 쇼핑몰 - 43 Ajax 사용해 form태그 한방에 넘기기 (바로구매) 바로구매 하는 방법을 알아보자. buy-mapper.xml SHOP_BUY 테이블에서 buyCode는 자동으로 1씩 증가되고, memId도 저장되어있다. 따라서 buyPrice만 가져오면 된다. 그러기 위해선 수량데이터를 가져와야하고, 이 상품의 단가를 수량에 곱하면 가격이 나온다. 그러기 위해서는 이 쿼리도 함께 실행되어야하는데, ITEM_CODE, BUY_CNT 만 들고오면 된다. 총 단가(buyPrice), 수량(buyCnt), 상품코드(itemCode) 이렇게 3개를 가지고 온다. item_detail.html form태그에 감싸져있는 데이터는 ajax에서 가져올때 다들고 올 수 있다. item_detail.js // 자바스크립트로 폼 태그 선택 const form1 = document.query.. 2023. 4. 13. [Spring] 쇼핑몰 - 41 검색기능 추가하기 검색 버튼을 만들어 보려고한다. cart_html html에서 getBuyList 함수를 만들어 클릭하면 js에서 실행되도록 만들었다. cart_buy.js html에서 클릭되면 month라는 변수가 어떠한 이벤트로 실행되도록 코드를 만들어주었는데, month는 현재 없다. SearchVO 생성, BuyVO extends SearchVO에서 month를 하나 생성해주고, BuyVO에서 extends를 이용해서 상속해준다. 따라서 BuyVO에는 month에 대한 변수와 세터 ,게터, 투스트링 모두 사용할 수 있게 된다. cart_buy.html 폼태그는 이 끝난 이후 바로 닫아주자. 그리고 input의 type 속성도 hidden으로 바꾸었다. 버튼들이 클릭되면 0 , -1, -3이 전달되는데, 폼태크 선.. 2023. 4. 12. [Spring] 쇼핑몰 - 40 Bootstrap에서 가져온 태그 활용하기 cart_buy.html data-bs-target에 있는 id가 밑에있는 div의 id와 동일하다. 그러면 button에 있는 data-bs-target은 누를때마다 밑에 있는 상세내용이 나오는 div가 열고 닫히게 된다. 개발자 도구에서 확인해보면 이런식으로 전체 이름이 같지않고, 각 패널마다 이름이 주어져서 하나를 클릭해도 전체 열기 혹은 닫기가 안되는 것을 볼 수 있다. 추가적으로 button 클래스에 collapsed를 추가해주었고, div 클래스에 show를 제거해주면서 보이는 이미지를 조금 바꿨다. 버튼을 눌렀을 때만 파란색 표시가되고, 열리지 않은 목록들은 하얀색으로 표시되는 것을 볼 수 있다. - 접힐 때 : class-collpased 추가 , aria-expanded = "false".. 2023. 4. 12. [Spring] 쇼핑몰 - 39 장바구니에 담긴 구매 리스트 왼쪽처럼 비슷하게 구매내역 페이지를 구성해보았다. cart.js ajax에서 통신에 성공하게 되면 buys/buysPage 컨트롤러로 이동하게 된다. 먼저, 구매한 상품에 대해 전체 조회하는 데이터를 DB에서 만들어보자. buy-mapper.xml BUT_CNT과 DETAIL_BUY_PRICE를 위해 collection으로 buyDetailList를 끌어와 줄 수 있다. 쿼리문에 있는 아래 4개 데이터는 어떻게 가져올 수 있을까 ATTACHED_FILE_NAME , ITEM_NAME , ITEM_PRICE (SELECT COUNT(BUY_DETAIL_CODE) FROM BUY_DETAIL WHERE BUY_CODE = BUY.BUY_CODE) AS ETC buyDetailVO에는 상품 하나를 샀을때 조회.. 2023. 4. 11. [Spring] 쇼핑몰 - 38 장바구니 선택 구매 선택구매에 대해서 알아보자. 내가 구매하고자하는 수량, 아이템 코드, 총 가격을 모두 들고와 보자. 구매하고자하는 상품 수 * 2(ITEM_CODE, BUY_CNT, TOTAL_PRICE)가 필요하고 + 1 (총 구매가격) 이 필요하다. json으로 데이터를 가지고 오면 자바에서는 그것을 Map으로 쓴다. th:data-item-code="${cart.itemCode}" 아이템코드 th:data-buy-cnt="${cart.cartCnt}" 수량 th:data-detail-buy-price="${cart.totalPrice}" 총가격 체크박스를 클릭 시 data를 이용해 데이터를 강제적으로 넣어보았다. js파일에서 buys 함수를 만든후 체크될 데이터가 여러개 있으므로 반복문으로 돌렸다. 체크 박스를 누.. 2023. 4. 7. [Spring] 쇼핑몰 - 37 장바구니 선택 삭제 선택 삭제를 통해 체크 된 상품이 모두 삭제 되는 것을 알아보자. cart.html html에서 checkbox에 value값을 넣어주었다. 이 체크 박스에는 cartVO에 있는 cartCode 데이터를 담고있다. html에서 F12를 눌러 콘솔창을 보면 체크박스를 클릭하였을 때, value 값으로 해당 cartCode가 들어와있는 걸 볼 수있다. 그리고 선택삭제 버튼을 누르게 되면 deleteCarts()라는 js 함수가 실행되도록 구현하였다. cart.js 해당 js에서 chks 변수에 check박스 들이 가진 클래스 chk가 체크되어있는 것들을 모두 넘겨주었다. 해당 js와 html이 연동되어 체크박스가 만약 아무것도 체크되어있지 않다면 선택삭제 버튼을 눌렀을때, alert으로 선택 상품이 없다는 .. 2023. 4. 6. 이전 1 2 3 4 5 6 7 ··· 9 다음
