본문 바로가기

✨ Back-end173

[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] 쇼핑몰 - 42 사용자 sub메뉴 classappend 사용해 나타내기 classappend를 사용해보자. CategoryIntercepter 인터셉터 이전에 카테고리인터셉터에서 카테고리를 조회하는 부분을 만든 기록이 있다. IntercepterConfig 인터셉터 통합 만들어준 인터셉터를 이곳에서 메소드를 만들어 호출할 수 있는데, 어느 화면에 호출해줄지 addPathPatterns를 통해 추가해주면 된다. 현재 빨간박스와 같이 /cart 컨트롤러에 있는 모든 곳에 나타난다. 이곳에서 buys 컨트롤러에서도 모든 곳에 노란 박스가 나타날 수 있도록 추가해주었다. personal_side.html side html에서 장바구니 목록, 구매내역에 각각 임의로 만든 personalMenu 값에 1, 2 를 각각 넣어주었고, 타임리프를 이용해 각 페이지로 넘어올때마다 person.. 2023. 4. 12.
[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.
[Spring] 쇼핑몰 - 36 장바구니 체크박스 해제시 변경 데이터 체크 박스가 해제되었을때, 구매 금액에서도 제외될 수 있도록 해보자. cart.html 반복되는 체크박스 각 한줄들이 클릭될 때마다 js함수를 setFinalPrice 이름으로 실행시켰다 속성명 앞에 data- 넣으면 임의의 데이터를 사용할 수 있다. data- 뒤에 memAge와 같이 대문자를 표현할 때에는 data-mem-age 를 사용하면 된다. th:attr 은 타임리프 문법이어서 사용했다 cart.js 클래스로 chk로 된 모든 체크박스들이 체크표시 되어있는 값들을 checkedChks로 데이터를 저장했다. 그리고, totalPriceChk 데이터 값을 chk의 가장 가까운 부모테이블로 찾아간 값을 spanTag로 저장한다. 위 html에서 data-name으로 데이터 java 넣었다. 콘솔창으.. 2023. 4. 6.
[Spring] 쇼핑몰 - 35 장바구니 상품 수량 수정(UPDATE) 수정 (UPDATE) cart-mapper.xml 장바구니 상품 수량을 수정하기 위해서 먼저 mapper에서 수정 쿼리 update를 만들어주었다. 상품 수량 데이터 cartCnt가 필요하고, 어떤 상품을 업데이트 해줄 것인지 알기 위해 cartCode도 가지고왔다. Service 인터페이스, 클래스 매개변수 및 리턴 타입 결정 방법(우선적으로 실행 시 쿼리를 작성) 매개변수 : 쿼리 실행 시 빈 값을 채울 용도 1. 쿼리에서 채워 줄 값이 없을 경우 : 매개변수 없음 2. 채워줄 값이 하나일 경우 2-1) 채워줄 값이 숫자인 경우 : 매개변수 int형 하나 2-2) 채워줄 값이 문자인 경우 : 매개변수 String형 하나 3. 채워줄 값이 여러개인 경우 : 매개변수는 VO 객체. 리턴타입 : 쿼리 실행.. 2023. 4. 6.

티스토리툴바