[Spring] 게시판 프로젝트17 - 검색기능2 (화면 처리)

검색기능2 게시물과 이어지는 내용입니다.

[Spring] 게시판 프로젝트16 - 검색기능1 (MyBatis처리)

---

검색기능 화면처리

검색 기능을 붙일 위치에 아래의 코드를 넣어준다.

list.jsp

<!-- 검색기능 -->
<form id="searchForm" action="/board/list" method="get">
    <select name="type">
        <option value="">--</option>
        <option value="T">제목</option>
        <option value="C">내용</option>
        <option value="W">작성자</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">검색</button>
</form>

난 리스트와 페이징 사이에 검색기능을 넣어주었다.

mapper 처리를 완료하였기 때문에 실제로 검색 기능이 동작한다.

작성자에 '태옹'을 검색해보니 url에 /board/list?type=W&keyword=태옹&pageNum=1&amount=10 라고 잘 뜬당.

 

이제 남은 작업들은 다음과 같다.

1. 검색하는 경우 무조건 1페이지로 이동하게 하기

2. 검색하면 검색 기록이 지워져서 어떤 검색 조건과 키워드를 이용했는지 모름

3. 검색 결과에서 다른 페이지로 이동하면 검색 조건 풀림

차례로 해결해보쟈💁‍♀️

 

 

1. 검색하는 경우 무조건 1페이지로 이동하게 하기

추가적으로 검색기능에 내용을 작성하지 않고 검색한 경우에는 alert창으로 메시지를 띄우는 처리를 해주었다.

var searchForm = $('#searchForm');
$('#searchForm button').on('click', function(e) {
	if (!searchForm.find('option:selected').val()) {
		alert('검색종류를 선택하세요');
		return false;
	}
	if (!searchForm.find('input[name="keyword"]').val()) {
		alert('키워드를 입력하세요');
		return false;
	}
	e.preventDefault();
	searchForm.find('input[name="pageNum"]').val('1');
	searchForm.submit();
});

 

 

2. 검색 조건 보이게 하기

EL에 조건식을 주어 현재 선택값을 유지하도록 작성한다.

<!-- 검색기능 -->
<form id="searchForm" action="/board/list" method="get">
	<select name="type">
		<option value=""
			<c:out value='${pageMaker.cri.type == null? "selected": ""}'/>>--</option>
		<option value="T"
			<c:out value='${pageMaker.cri.type eq "T"?"selected": "" }'/>>제목</option>
		<option value="C"
			<c:out value='${pageMaker.cri.type eq "C"?"selected": "" }'/>>내용</option>
		<option value="W"
			<c:out value='${pageMaker.cri.type eq "W"?"selected": "" }'/>>작성자</option>
	</select> 
	<input type="text" name="keyword" value="<c:out value='${pageMaker.cri.keyword}'/>"> 
	<input type="hidden" name="pageNum" value="<c:out value='${pageMaker.cri.pageNum}'/>"> 
	<input type="hidden" name="amount" value="<c:out value='${pageMaker.cri.amount}' />">
	<button class="btn btn-default">검색</button>
</form>

 

 

3. 검색 결과에서 다른 페이지로 이동해도 검색 결과가 나오도록 처리하기

기존에 페이지 이동을 하는 경우에 사용했던 actionForm에서 pageNum, amount 외에도 type과 keyword를 hidden속성으로 지정하여 현재 값을 전달해준다.

<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="<c:out value='${pageMaker.cri.type}'/>"> 
    <input type="hidden" name="keyword" value="<c:out value='${pageMaker.cri.keyword}'/>">
</form>

 

 

디테일 페이지에서 수정버튼을 누르고 삭제하는 경우 다시 리스트로 이동할 때에도 검색결과가 반영되게 하기 위해서는 <input type="hidden">으로 전달전달하는 과정이 필요하다.

 

get.jsp

<form id="operForm" action="/board/modify" method="get">
	<input type="hidden" id="bno" name="bno" value="<c:out value='${board.bno }'/>">
	<input type="hidden" name="pageNum" value="<c:out value='${cri.pageNum}'/>" >
	<input type="hidden" name="amount" value="<c:out value='${cri.amount}'/>" >
	<input type="hidden" name="type" value="<c:out value='${cri.type}'/>" >
	<input type="hidden" name="keyword" value="<c:out value='${cri.keyword}'/>" >
</form>

 

modify.jsp

<form action="/board/modify" method="post">
    <input type="hidden" name="type" value="<c:out value='${cri.type}'/>" >
    <input type="hidden" name="keyword" value="<c:out value='${cri.keyword}'/>" >
    <input type="hidden" name="pageNum" value="<c:out value='${cri.pageNum}'/>">
    <input type="hidden" name="amount" value="<c:out value='${cri.amount}'/>">
    ...
</form>

 

Controller

// 실제로 게시물을 수정하는 경우
	@PostMapping("/modify")
	public String modify(BoardVO board, @ModelAttribute("cri") Criteria cri, RedirectAttributes rttr) {
		log.info("[ CONTROLLER ] modify:" + board);
		if (service.modify(board)) {
			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";
	}

	//삭제
	@PostMapping("/remove")
	public String remove(@RequestParam("bno") Long bno, @ModelAttribute("cri") Criteria cri, RedirectAttributes rttr) {
		log.info("[ CONTROLLER ] remove..." + bno);
		if (service.remove(bno)) {
			rttr.addFlashAttribute("result", "success");
		}
		log.info(cri.getPageNum());
		rttr.addAttribute("pageNum", cri.getPageNum());
		rttr.addAttribute("amount", cri.getAmount());
		rttr.addAttribute("type", cri.getType());		//추가
		rttr.addAttribute("keyword", cri.getKeyword());		//추가
		return "redirect:/board/list";
	}

 

👇 만약 rttr.addAttribute가 너무 지저분하다고 느껴진다면 아래의 방법을 사용해서 코드를 간략화할 수 있다.

 Criteria.java (DAO)

/*여러개의 파라미터들을 연결해서 url형태로 만들어줌*/
public String getListLink() {
	UriComponentsBuilder builder = UriComponentsBuilder.fromPath("")
	.queryParam("pageNum", this.getPageNum())
	.queryParam("amount", this.getAmount())
	.queryParam("type", this.getType())
	.queryParam("keyword", this.getKeyword());
	return builder.toUriString();
}

 

Controller

// 실제로 게시물을 수정하는 경우
@PostMapping("/modify")
public String modify(BoardVO board, @ModelAttribute("cri") Criteria cri, RedirectAttributes rttr) {
	log.info("[ CONTROLLER ] modify:" + board);
	if (service.modify(board)) {
		rttr.addFlashAttribute("result", "success");
	}
	return "redirect:/board/list"+cri.getListLink();
}

//삭제
@PostMapping("/remove")
public String remove(@RequestParam("bno") Long bno, @ModelAttribute("cri") Criteria cri, RedirectAttributes rttr) {
	log.info("[ CONTROLLER ] remove..." + bno);
	if (service.remove(bno)) {
		rttr.addFlashAttribute("result", "success");
	}
	return "redirect:/board/list"+cri.getListLink();
}