[Spring] 쇼핑몰 - 27 상품 정보 조회 검색창 활용하기 **

 

 

admin-mapper.xml

admin-mapper의 아이템 정보 조회쿼리문으로 들어와 조건문에 AND를 추가한다.

필요한 빈값은 상품명(ITEM_NAME), 카테고리(CATE_CODE), 상품상태(ITEM_STATUS), 재고량(ITEM_STOCK) 

이렇게 4개가 필요하다. 

 

SearchItemVO

그리고 SearchItemVO VO를 하나 생성해주었다. 쿼리문에 들어갈 데이터 값들이 들어갈 데이터다.

 

ItemVO

만든 SearchItemVO 객체를 ItemVO에서 호출할 수 있도록 해주었다.

 

AdminController 컨트롤러

컨트롤러에서 매개변수 SearchItemVO 객체를 하나 생성하는 대신, ItemVO를 생성해준다.

왜냐하면, ItemVO에 이미 serchItemVO가 존재하기 때문에 이렇게 사용할 수도 있다.

 

item_manager.html

html에선 searchItemVO.searchItemName과 같이 name값을 지정해줄 수 있다.

itemVO에서 searchItemVO를 불러와 다시 searchItemVO에서 searchItemName을 뽑아 쓸 수 있다.

이런식으로 searchVO에서 생성한 값들을 각 상품명, 카테고리, 상품상태, From과 To, 재고량에 name 속성 값을 준다.

하지만, 버튼을 submit으로 바꿔주고, post로 넘겨주게 되면 에러가 날 것이다. 왜냐하면 지금 이미 컨트롤러에는

GetMapping 밖에 없기 때문에 POST는 못받아간다. 따라서 아래와 같이 바꿔주면된다.

AdminController 컨트롤러

@RequestMapping 어노테이션으로 요청을 받으면 get, post 둘다 받을 수 있음.

 

item_manager.html

전체는 value값이 0 이다.

admin-mapper

아이템 정보 조회 쿼리에 아래 검색 조건 쿼리를 추가한다. 카테고리 체크박스로 하는건 일단 하지않았다.

 

ITEM_STATUS의 전체일때는 값이 0이므로, 전체를 가져올 때는 쿼리를 짤 필요가 없다.

적절하게 if test 문에만 0이 아닐때의 조건을 주어 0이아닌 상수값이 오도록 한다.

AdminService 인터페이스, 클래스

아이템 정보 조회에 ItemVO 객체를 넣어준다.

AdminController 컨트롤러

컨트롤러의 상품 관리 페이지에도 각 itemVO를 넣어준다.

검색창에 상품명 - 상품, 상품상태 - 매진,  재고를 10 ~20 으로 설정하면 각 and 조건에 맞는 상품들이 조회된다.

---

++

체크박스 조회하기.

item_manager.html

item_manage.js

체크 박스 클릭 해제

//검색 영역의 카테고리 중 전체 체크박스 클릭 시
//전체 체크 박스
const checkAll = document.querySelector('#checkAll');
checkAll.addEventListener('click', function(){
    
    // 전체를 제외한 카테고리 체크박스들
    const checkboxes = document.querySelectorAll('.chk');
    
    if(checkAll.checked){
        for(const checkbox of checkboxes){
            checkbox.checked = true;
        }
    }
    else{
        for(const checkbox of checkboxes){
            checkbox.checked = false;
        }
    }
});
// 하나라도 체크 해제하면 전체 체크해제,
const checkboxes = document.querySelectorAll('.chk');
for(const checkbox of checkboxes){
    checkbox.addEventListener('click',function(){
        
        const totalCnt = checkboxes.length;
    
        const checkedCnt = document.querySelectorAll('.chk:checked').length;
        
        if(totalCnt == checkedCnt){
            document.querySelector('#checkAll').checked = true;
        }
        else{
            document.querySelector('#checkAll').checked = false;
        }
    });
}
 

 

<<<참고 사이트 >>>>

https://bright-landscape.tistory.com/103

[JavaScript] 전체 체크박스 항목 선택 및 해제, 체크 여부 변경

 

 

이렇게 체크박스 기능까지 완료하였다. 아까 못다한 쿼리기능 mapper로 가서 손봐주자.

admin-mapper.xml

 separator를 사용하여 중간중간 for문이 반복하면서 , 를 넣어주자.

위 콘솔창은 마지막으로 설정했던 cateCode가 실행되는 콘솔화면이다. all은 잠시 후 알아보자. 어차피 공백이 뜰꺼다.

 

item_manage.html

th:value="${itemVO.searchItemVO == null ? ' ' : itemVO.searchItemVO.searchItemName}"

데이터를 넣고 Search를 누르면 컨트롤러로 가는데, 

조회된 쿼리를 보면 '상품' 이 들어가있는 것을 확인할 수 있다. 이 데이터는 컨트롤러에 ItemVO에 남아있고,

커맨드 객체로 인해 html로 다시 보내준다. 

 

그래서 html로 다시 화면을 만들어 주더라도 상품명에 있는 상품은 그대로 남아있게 되는 것이다.

item_manage.html

재고량에 있는 From과 To도 똑같이 설정해주었다.

item_manage.html

상품 상태를 나타내는 곳에도 선택 데이터가 조회될 수 있또록 코드를 짜주었다.

th:selected="${itemVO.searchItemVO == null

or(itemVO.searchItemVO != null and itemVO.searchItemVO.searchItemStatus == 0)}"  --> 전체

 

th:selected="itemVO.searchItemVO != null and itemVO.searchItemVO.searchItemStatus == 3" -> select문

 

서브메뉴로 들어오면 체크 다줄것이다.

 

th:checked="${itemVO.searchItemVO == null or #arrays.contains(itemVO.searchItemVO, category.cateCode)}

#arrays.contains(배열, 찾을 값)

 

AdminController 컨트롤러

마지막으로 이렇게 넣어서 SubMenuCode를 상품 관리 목록으로 강제로 주자.

 

이런식으로 Search를 눌러도, 상품명과 상품상태, 재고량의 데이터가 그대로 남아있고,

서브메뉴의 상품관리로 경로가 지정되있는것을 확인할 수 있다.

검색창은 이런식으로 완성할 수 있다.