[Spring][쇼핑몰 프로젝트][15] 작가목록 기능 구현 - 4

프로젝트 Github : https://github.com/sjinjin7/Blog_Project
프로젝트 포스팅 색인(index) : https://kimvampa.tistory.com/188

목표

검색 인터페이스 구현 & 검색 결과 없을 시 뷰(view) 처리 구현

 작가목록 기능 구현 첫 페이지에서 작업하였던 authorGetList() 메서드는 검색  처리도 할 수 있도록 작성하였었습니다. 따라서 뷰(View) 단에서 사용자가 검색 기능을 사용할 수 있도록 인터페이스를 구현하는 것이 이번 포스팅의 목표입니다.

 

 더불어 사용자가 키워드를 전송하여 검색을 하였지만 검색결과가 없는 경우의 뷰(View) 처리 또한 진행하고자 합니다.

 

 

 

순서

1. 검색 인터페이스 추가(authorManage.jsp)

2. 검색 결과 없을 경우 처리

 

 

 

 

1. 검색 인터페이스 추가(authorManage.jsp)

 기존 <form> 태그가 있지만 검색 기능에 사용도리 <form> 태그를 새로 추가하여 구현할 것입니다. 물론 Js코드를 통해서 기존 <form> 태그를 활용하여 검색 기능을 구현해도 상관은 없습니다. 하지만 보통 사용자가 <input> 태그에 검색어를 입력 후 enter를 누르면 검색이 되는데 Javascript를 통해 기존 <form> 태그 활용하는 방식은 enter를 눌렀을 때 동작하지 않는 단점이 있습니다.

 

 따라서 사용자가 입력할 <input>태그와 검색을 실행하는 <button> 태그를 새로운 <form> 태그 안에 작성하고자 합니다. 아래의 코드를 [그림 1-1]에 표시한 공간에 추가해줍니다.

 

그림 1-1

 

                    <!-- 검색 영역 -->
                    <div class="search_wrap">
                    	<form id="searchForm" action="/admin/authorManage" method="get">
                    		<div class="search_input">
                    			<input type="text" name="keyword" value='<c:out value="${pageMaker.cri.keyword}"></c:out>'>
                    			<input type="hidden" name="pageNum" value='<c:out value="${pageMaker.cri.pageNum }"></c:out>'>
                    			<input type="hidden" name="amount" value='${pageMaker.cri.amount}'>
                    			<button class='btn search_btn'>검 색</button>
                    		</div>
                    	</form>
                    </div>  

 

그림 1-2

 

 검색 키워드에 대한 정보뿐만 아니라 pageNum과 amount에 대한 데이터도 같이 넘겨야 하기 때문에 type속성 값이 hidden인 <input> 태그를 추가해주었습니다. 해당 <input> 태그는 페이지가 로딩될 때 기본적으로 서버에서 전달받은 pageNum과 amount, keyword값이 저장되도록 설정하였습니다.

 

 

 지금 작성된 상태만으로도 검색 기능 동작이 가능합니다. 하지만 키워드 입력 없이 사용자가 검색 버튼을 누르지 못하도록 유효성 체크 기능과 pageNum의 값을 1로 대입해주는 처리를 하기 위해서 아래의 Js 코드를 작성합니다. (pageNum을 1로 변경해주는 이유는 만약 7페이지에 있는 상태에서 검색을 하는 경우 검색어로 필터링된 7페이지로 이동이 됩니다. 하지만 만약 필터링된 검색 결과가 7페이지가 존재하지 않을 경우 문제가 될 수 있습니다. 따라서 검색을 한경우 1페이지로 이동할 수 있도록 값을 변경해줍니다.)

 

	let searchForm = $('#searchForm');
	
    
    
    
    
	
	/* 작거 검색 버튼 동작 */
	$("#searchForm button").on("click", function(e){
		
		e.preventDefault();
		
		/* 검색 키워드 유효성 검사 */
		if(!searchForm.find("input[name='keyword']").val()){
			alert("키워드를 입력하십시오");
			return false;
		}
		
		searchForm.find("input[name='pageNum']").val("1");
		
		searchForm.submit();
		
	});

 

그림 1-3

 

 검색 인터페이스를 꾸며주기 위해서 authorManage.css에 아래의 코드를 추가해주었습니다.

 

	/* 검색 영역 */
.search_wrap{
	margin-top:15px;
}
.search_input{
    position: relative;
    text-align:center;	
}
.search_input input[name='keyword']{
	padding: 4px 10px;
    font-size: 15px;
    height: 20px;
    line-height: 20px;
}
.search_btn{
	height: 32px;
    width: 80px;
    font-weight: 600;
    font-size: 18px;
    line-height: 20px;
    position: absolute;
    margin-left: 15px;
    background-color: #c3daf7;
}

 

검색 1-4

 

검색 1-5

 

검색 1-6

 

 검색 인터페이스가 잘 동작하는지 테스트해봅니다.

 

그림 1-6

 

그림 1-7

 

 

 

 

2. 검색 결과 없을 경우 처리

 검색 결과가 없는 경우는 아래와 같이 출력 되는데 검색결과가 없다는 것을 사용자가 명확히 알 수 있도록 작업해주고자 합니다. 

 

그림 2-1

 

  서버 단계에서 검색 결과가 없다는 것을 알게 해주는 데이터를 뷰(view)에 전송을 하고 뷰(view)에서는 전달 받은 데이터를 활용하여 <c:if> 태그를 활용하여 '작가 목록'을 출력하거나 '검색 결과가 없다는 문구'를 출력되도록 할 것입니다.

 

 서버단계에서 검색 결과 존재 유무를 판단해야합니다. 검색결과들은 authorGetList() 의  List 타입으로 반환이 되는데 List타입이 가지고 있는 empty() 메서드를 활용하여 검색결과 존재 유무를 판단할 것입니다. List 클래스의 empty() 메서드는 List타입의 데이터가 요소 값을 가지고 있지 않은 경우에 ture를 반환하고, 요소를 하나 이상 가지고 있는 경우 false를 반환합니다.

 

 AdminController.java의 authorManageGET() 메서드에 작성한 기존 아래의 코드를 삭제합니다.

 

그림 2-2

 

 삭제한 코드 대신 아래의 코드를 작성해줍니다. 검색 결과가 존재하는 경우 검색결과들을 "list" 속성명에 저장하여 뷰에 전송합니다. 검색결과가 존재하지 않는 경우에 'empty' 문구를 "listCheck" 속성명에 저장하여 뷰에 전송합니다.

 

		if(!list.isEmpty()) {
			model.addAttribute("list",list);	// 작가 존재 경우
		} else {
			model.addAttribute("listCheck", "empty");	// 작가 존재하지 않을 경우
		}

 

그림 2-3

 

 

 

 

 authorMagne.jsp로 돌아와서 class속성 값이 "author_table"인 <div> 태그 코드를 아래의 <c:if> 태그로 감싸줍니다. "listCheck"속성의 값이 'empty'가 아닌 경우 <div>태그가 출력되게 됩니다.

 

				<!-- 게시물 O -->
				<c:if test="${listCheck != 'empty' }">
						
				</c:if>

 

그림 2-4

 

 

 작성한 <c:if>태그 바로 다음 공간에 아래의 <c:if>태그 코드를 추가해줍니다. 검색 결과가 없을 경우 출력되게 될 문구입니다.

                		<c:if test="${listCheck == 'empty'}">
                			<div class="table_empty">
                				등록된 작가가 없습니다.
                			</div>
                		</c:if>  

 

그림 2-5

 

 

 검색 결과가 없을 경우 출력될 <div>태그에 css설정을 해주기위해 AuthorManage.css에 아래의 코드를 추가해주었습니다.

 

.table_empty{
	height: 50px;
    text-align: center;
    margin: 200px 0 215px 0px;
    font-size: 25px;
}

 

그림 2-6

 

 

 

 검색결과가 있는 경우와 없는 경우를 테스트하여 정상적으로 출력이 되는지 확인합니다.

 

그림 2-7

 

그림 2-8

 

 

 

REFERENCE

•  

DATE

• 2020.03.15