[JSP][MVC][MySQL] 도서 목록 페이지에서 필터링 구현하기 #2. 클라 딴 (1)

지난 "도서 목록 페이지에서 필터링 구현하기 #1. 구현 틀 잡기" 포스팅에서 기본적인 구현 방향을 잡아보았다. 

 

이번 포스팅을 시작으로 본격적으로 구현을 해볼 것인데, 먼저 클라 딴부터 작성해 보자.

클라 딴의 경우, 페이지의 전체 코드보다는 필터링을 구현하기 위한 부분 부분만 중점적으로 정리할 것이다.

 

---

♠ 해당 프로젝트의 구현 방향이 궁금하면 아래 포스팅을 참고하세요 ♠

 

2023.08.02 - [JSP/MVC] - [JSP][MVC][MySQL] 도서 목록 페이지에서 필터링 구현하기 #1. 구현 틀 잡기

[JSP][MVC][MySQL] 도서 목록 페이지에서 필터링 구현하기 #1. 구현 틀 잡기

---

 

목표

♠ 필터링을 구현하여 DB에서 원하는 정보만 가져올 수 있다.

 

클라이언트 딴 구현 모습

구현할 도서 목록 페이지는 아래와 같다.

아래 번호대로 HTML을 작성하도록 하겠다.

페이지 샘플

 

 

클라이언트 딴 HTML

1. 내비게이션 HTML

각 버튼을 클릭하면 해당 URL이 서버에 요청되어 해당 페이지가 호출된다.

 

CSS를 위해 각 요소의 class 속성에 부트스트랩 4.6 버전의 클래스명을 추가할 것이다.

부트스트랩에서 지원하는 클래스명은 크게 신경 안 써도 된다.

 

최신 도서 <a> 태그를 주목해서 보도록 하자.

 

<div class="collapse navbar-collapse offset" id="navbarSupportedContent">
    <ul class="nav navbar-nav menu_nav ml-auto">
        <li class="nav-item active">
        	<a class="nav-link" href="${request.getContextPath() }/bookShopMain.ok">홈</a>
        </li>
        <li class="nav-item">
        	<a class="nav-link" id="bookList_nav" role="button" href="javascript:void(0);">최신 도서</a>
        </li>
        <li class="nav-item">
        	<a class="nav-link" href="${request.getContextPath() }/cscenter.ok">고객센터</a>
        </li>
    </ul>
    <ul class="nav navbar-nav navbar-right">
        <li class="nav-item">
        	<a href="${request.getContextPath() }/bookCartList.ok" class="cart"><span class="ti-bag"></span>
			</a>
		</li>
        <li class="nav-item">
            <button class="search"><span class="lnr lnr-magnifier" id="search"></span></button>
        </li>
    </ul>
</div>

 

☞ <a class="nav-link" id="bookList_nav" role="button" href="javascript:void(0);">최신 도서</a>

• id="bookList_nav" : 스크립트에서 id명으로 해당 요소에 접근할 것이다.
• href="javascript:void(0);" : <a> 태그의 링크 이동을 무력화시키기 위해 작성해 주었다. 나중에 스크립트에서 처리할 것이다.
• role="button" : 링크 이동이 없으니 클릭 이벤트가 일어나지 않으며, 따라서 <a> 태그에 마우스를 올려도 커서가 포인터로 변하지 않는다. 이를 위해 해당 태그의 역할을 버튼으로 하여 마우스가 포인터가 되게 한다. 

 

2. 왼쪽 배너 HTML

도서의 대분류가 출력되는 영역이다.

왼쪽 배너의 대분류를 클릭하면 대분류에 해당하는 모든 도서 중, 해당 날짜의 주에 출판된 도서만 출력되게 할 것이다.

URL 형식과 각각의 파라미터에 저장될 정보는 아래와 같다.

 

☞ URL 파라미터 형식

?page=1&mnName=KOR&mdCode=&year=2023&month=8&week=1&sort=new&limit=9

 

• page : 1 (default)
• mnName : KOR / ENG (국내 / 외국도서)
• mdCode : ""
• year : 현재 연도
• month : 현재 월
• week : 현재 날짜의 주
• sort : new (default)
• limit : 9 (default)

중분류 코드 값이 저장되는 mdCode에 ""을 저장해 서버 측에서 모든 국내도서를 대상으로 도서를 찾아오게 할 것이다.

JS로 현재 날짜에 따른 연도와 월, 주를 구할 것이므로 대분류가 출력될 부분은 비워놓는다.

 

<div class="col-xl-3 col-lg-4 col-md-5">
    <div class="sidebar-categories">
        <div class="head">최신 도서</div>
        <ul class="main-categories">
            <!-- 대분류 출력 -->
        </ul>
    </div>
</div>

 

3. 필터링 영역 HTML

중분류 데이터와 필터링할 수 있는 <select> 가 출력되는 영역이다.

중분류 데이터는 JS로 대분류 값에 따라 출력되게 할 것이다.

 

각각의 클래스명과 id명을 잘 확인해 두자.

 

<!-- Middle Catgy Bar -->
<div class="filter-bar d-flex flex-wrap align-items-center" style="background: #fff;">
    <a href="javascript:void(0);" class="genric-btn default circle medium" id="md_0">전체</a>
    <!-- 중분류 출력 -->
</div>	
<!-- Middle Catgy Bar -->

<!-- Start Filter Bar -->
<div class="filter-bar d-flex flex-wrap align-items-center">
    <div class="sorting">
        <select class="filter-select" id="filter-year">
            <option value="2023" selected="selected">2023년</option>
            <option value="2022">2022년</option>
            <option value="2021">2021년</option>
            <option value="2020">2020년</option>
            <option value="2019">2019년</option>
            <option value="2018">2018년</option>
        </select>
    </div>
    <div class="sorting">
        <select class="filter-select" id="filter-month">
            <option value="01">1월</option>
            <option value="02">2월</option>
            <option value="03">3월</option>
            <option value="04">4월</option>
            <option value="05">5월</option>
            <option value="06">6월</option>
            <option value="07">7월</option>
            <option value="08" selected="selected">8월</option>
            <option value="09">9월</option>
            <option value="10">10월</option>
            <option value="11">11월</option>
            <option value="12">12월</option>
        </select>
    </div>
    <div class="sorting mr-auto">
        <select class="filter-select" id="filter-week">
            <option value="01" selected="selected">1주</option>
            <option value="02">2주</option>
            <option value="03">3주</option>
            <option value="04">4주</option>
            <option value="05">5주</option>
        </select>
    </div>
    <div class="sorting">
        <select class="filter-select" id="filter-sort">
            <option value="sel">판매량 순</option>
            <option value="new" selected="selected">신규등록 순</option>
            <option value="mxv">높은 가격순</option>
            <option value="minv">낮은 가격순</option>
        </select>
    </div>
    <div class="sorting">
        <select class="filter-select" id="filter-limit">
            <option value="9" selected="selected">9개씩 보기</option>
            <option value="15">15개씩 보기</option>
            <option value="21">21개씩 보기</option>
        </select>
    </div>

    <div class="sorting">
        <a href="javascript:void(0);" class="genric-btn default-border" id="filter_search">검색</a>
    </div>

</div>

 

 

---

 

 

도서 목록 페이지에서 필터링 구현에 필요한 HTML을 모두 작성하였다.

다음 포스팅에서는 클라 딴의 JS 부분을 정리해 보도록 하겠다.

 

 

도서 목록 페이지에서 필터링 구현하기  #2. 클라 딴 (1) 끝.