19. 검색처리 (JSP수정)
먼저 신경 써야하는 사항이 있음.
1. 페이지 번호가 파라미터로 유지되었던 것처럼 검색 조건과 키워드 역시 항상 화면 이동 시 같이 전송 되어야함.
2. 화면에서 검색 버튼을 클릭하면 새로 검색을 한다는 의미이므로 1페이지로 이동
3. 한글으 ㅣ경우 GET 방식으로 이동하는 경우 문제가 생길 수 있으니 주의
그럼 list.jsp에서 검색처리를 위한 수정.
</table>
<!-- /.table-responsive -->
<form id="searchForm" action="/board/list" method="get">
<select name="type">
<option value="T">제목</option>
</select>
<input type="text" name="keyword" />
<input type="hidden" name="pageNum" value='${pageMaker.cri.pageNum }'>
<input type="hidden" name="amount" value='${pageMaker.cri.amount }'>
<button class="btn btn-default">Search</button>
</form>
<form id="searchForm" action="/board/list" method="get">
<select name="type">
<option value="T">제목</option>
<input type="hidden" name="pageNum" value='${pageMaker.cri.pageNum }'>
<input type="hidden" name="amount" value='${pageMaker.cri.amount }'>
</select>
<input type="text" name="keyword" />
<button class="btn btn-default">Search</button>
</form>
----------------스크립트-------------
var searchForm = $("#searchForm");
$("#searchForm button").on("click", function(e){
e.preventDefault();
console.log("................click");
searchForm.submit();
});
수정 후 파라미터가 제대로 전달이 되는지 확인. 영어와 한글 둘 다 확인하는게 좋음.
근대 버튼을 누른다는건 무족건 1페이지를 의미함. 내가 새롭게 검색을 한다는 의미.
페이지 번호가 3페이지에서 검색을 누르면 1페이지 검색이 되게끔 처리해줘야함.
그걸 위한 스크립트 추가.
var searchForm = $("#searchForm");
$("#searchForm button").on("click", function(e){
e.preventDefault();
console.log("................click");
searchForm.find("input[name='pageNum']").val(1);
searchForm.submit();
});
searchForm에서 input태그 속성값이 pageNum인걸 찾아서 1로 바꿔서 전송한다
그럼 한번 제대로 동작하는지 테스트.
한글이 포함된걸 검색.
파라미터 수집하고 그걸 토대로 검색처리가 완성된걸 확인.
검색처리는 여기서 끝나긴 했지만, 몇가지 추가를 좀 해주기로함.
내가 한글로 검색을 했으면 제목이면 제목으로 검색했는지 내용이면 내용으로 검색이 되엇는지 체크가 되어있어야함.
이걸 삼항연산자로 처리를 실행.
<select name="type">
<option value="" ${pageMaker.cri.type == null?"selected":"" }>---</option>
<option value="T" ${pageMaker.cri.type eq 'T'?"selected":"" }>제목</option>
<option value="C" ${pageMaker.cri.type eq 'C'?"selected":"" }>내용</option>
<option value="W" ${pageMaker.cri.type eq 'W'?"selected":"" }>작성자</option>
<option value="TC" ${pageMaker.cri.type eq 'TC'?"selected":"" }>제목 or 내용</option>
<option value="TW" ${pageMaker.cri.type eq 'TW'?"selected":"" }>제목 or 작성자</option>
<option value="TWC" ${pageMaker.cri.type eq 'TCW'?"selected":"" }>제목 or 작성자 or 내용</option>
</select>
<input type="text" name="keyword" value='${pageMaker.cri.keyword }'/>
<input type='hidden' name='pageNum' value='${pageMaker.cri.pageNum }'>
<input type='hidden' name='amount' value='${pageMaker.cri.amount }'>
<button class="btn btn-default">Search</button>
그럼 이제 제대로 다 동작하는지 확인. 간단하게 제목 or 내용으로 테스트
내가 뭘 검색하고싶은지 고정이 되어있고 어떤걸 검색 했는지 고정이 됨.
근대 여기서 문제가 하나 발생함.
검색을 한 뒤 페이지를 이동해보고, 조회를 해보면 알 수 있음.
분명 위 테스트에서는 제대로 파라미터가 url에 붙어있는걸 볼 수 있음. 하지만 2페이지를 누르면
고정이 되지않고 풀리게 됨. 이걸 수정할거임.
우선 수정하기전에 봐야할게있음.
jsp에 Form태그를 두개 사용중임.
<form id="searchForm" action="/board/list" method="get">
<select name="type">
<option value="---" ${pageMaker.cri.type == null?"selected":"" }>---</option>
<option value="T" ${pageMaker.cri.type eq 'T'?"selected":"" }>제목</option>
<option value="C" ${pageMaker.cri.type eq 'C'?"selected":"" }>내용</option>
<option value="W" ${pageMaker.cri.type eq 'W'?"selected":"" }>작성자</option>
<option value="TC" ${pageMaker.cri.type eq 'TC'?"selected":"" }>제목 or 내용</option>
<option value="TW" ${pageMaker.cri.type eq 'TW'?"selected":"" }>제목 or 작성자</option>
<option value="TWC" ${pageMaker.cri.type eq 'TCW'?"selected":"" }>제목 or 작성자 or 내용</option>
</select>
<input type="text" name="keyword" value='${pageMaker.cri.keyword }'/>
<input type='hidden' name='pageNum' value='${pageMaker.cri.pageNum }'>
<input type='hidden' name='amount' value='${pageMaker.cri.amount }'>
<button class="btn btn-default">Search</button>
</form>
<form id="actionForm" action="/board/list" method="get">
<input type='hidden' name='pageNum' value='${pageMaker.cri.pageNum }'>
<input type='hidden' name='amount' value='${pageMaker.cri.amount }'>
</form>
지금 현재 searchForm과 actionFrom을 같이 사용중인데 가장 쓸모있는 걸 고르라하면 actionForm임
페이지를 이동하거나 조회를 할 때 내가 몇 페이지였는지 등등 url에 고정이 되게함.
그럼 이걸 간단하게 어찌 처리해야할까.
그냥 actionForm에 type이랑 keyword를 추가해주면 간단하게 해결이 됨.
<form id="actionForm" action="/board/list" method="get">
<input type='hidden' name='pageNum' value='${pageMaker.cri.pageNum }'>
<input type='hidden' name='amount' value='${pageMaker.cri.amount }'>
<input type="hidden" name="type" value='${pageMaker.cri.type }'/>
<input type="hidden" name="keyword" value='${pageMaker.cri.keyword }'/>
</form>
그리고 검색을 한 다음 페이지를 이동해보고 조회를 해보면.
이런식으로 몇페이지인지, amount와 검색 키워드 bno가 다 연결되어있는게 확인 가능함.
그리고 Controller수정
@PostMapping("/modify")
public String modify(BoardVO board, @ModelAttribute("cri") Criteria cri, RedirectAttributes rttr) {
int count = service.modify(board);
if(count == 1) {
rttr.addFlashAttribute("result", "success");
}
rttr.addAttribute("pageNum",cri.getPageNum());
rttr.addAttribute("amount",cri.getAmount());
rttr.addAttribute("type",cri.getType());
rttr.addAttribute("keyword",cri.getKeyword());
return "redirect:/board/list";
}
get.jsp도 수정을 해줘야함.
<form id="actionFrom" action="/board/list" method="get">
<input type='hidden' name='pageNum' value='${cri.pageNum }'>
<input type='hidden' name='amount' value='${cri.amount }'>
<input type='hidden' name='bno' value='${board.bno }'>
<input type='hidden' name='type' value='${cri.type }'>
<input type='hidden' name='keyword' value='${cri.keyword }'>
</form>
이렇게 하면 redirect할때도 url이 고정되는걸 확인 할 수 있음.