[Spring] 화면에서 검색 조건 처리

[Spring] 화면에서 검색 조건 처리

도움이 되셨다면 광고 한 번 클릭 부탁드립니다.
한 번의 클릭이 제게 큰 힘이 된답니다. :)

 

이전 글

2021.07.24 - [Spring] - [Spring] 페이징 처리에 검색 기능 SQL 적용하기 (feat. Mybatis 동적 SQL)

2021.07.17 - [Spring] - [Spring] 페이징 화면 처리 - 3 -

2021.07.17 - [Spring] - [Spring] 페이징 화면 처리 - 2 -

2021.07.17 - [Spring] - [Spring] 페이징 화면 처리 - 1 -

2021.07.16 - [Spring] - [Spring] 스프링에서 페이징 처리 (BoardController, BoardService 수정)

2021.07.14 - [Spring] - [Spring] MyBatis와 스프링에서 페이징 처리

반응형

 

화면에서 검색은 주의해서 개발해야 합니다.

- 페이지 번호가 파라미터로 유지되었던 것처럼 검색 조건과 키워드는 항상 화면 이동 시 같이 전송되어야 합니다.

- 화면에서 검색 버튼을 클릭하면 새로 검색을 한다는 의미이므로 1페이지로 이동합니다.

- 한글의 경우 GET 방식으로 이동하는 경우 문제가 생길 수 있으므로 주의해야 합니다.

 

목록 화면에서의 검색 처리

 

list.jsp에서는 검색 조건과 키워드가 들어 갈 수 있게 HTML을 수정해야 합니다. views 폴더 내의 list.jsp를 수정해서 페이지 번호 처리 바로 위에 검색 처리 내용을 추가합니다.

 

list.jsp

 

실행 결과

검색하지 않은 화면 (왼쪽) / 제목에 'best'가 들어간 게시글 검색한 화면 (오른쪽)

 

검색 처리를 한 후에 몇 가지 문제가 있다는 것을 알게 됩니다.

 

1) 3페이지를 보다가 검색하면 3페이지로 이동하는 문제

2) 검색 후 페이지를 이동하면 검색 조건이 사라지는 문제

3) 검색 후 화면에서는 어떤 검색 조건과 키워드를 이용했는지 알 수 없는 문제

 

검색 버튼의 이벤트 처리

검색 버튼을 클릭하면 1페이지를 하도록 수정

화면에 검색 조건과 키워드가 보이게 처리

list.jsp 일부

 

브라우저에서 검색 버튼을 클릭하면 <form> 태그의 전송은 막고, 페이지의 번호는 1이 되도록 처리합니다. 화면에서 키워드가 없다면 검색을 하지 않도록 제어합니다.

 

검색 후에 주소창에 검색 조건과 키워드가 같이 GET방식으로 처리되므로 이를 이용해서 <select> 태그나 <input> 태그의 내용을 수정해야 합니다.

 

list.jsp에서 검색조건과 키워드 보여주는 부분

 

페이지 번호를 클릭해서 이동할 때에도 검색 조건과 키워드는 같이 전달되어야 하므로 페이지 이동에 사용한 <form> 태그를 수정합니다.

list.jsp의 일부

 

검색 조건과 키워드에 대한 처리가 되면 검색 후 페이지를 이동해서 동일한 검색 사항들이 계속 유지되는 것을 볼 수 있습니다.

 

조회 페이지에서 검색 처리

 

목록 페이지에서 조회 페이지로의 이동은 이미 <form> 태그를 이용해서 처리했기 때문에 별도의 처리가 필요하지 않습니다. 다만 조회 페이지는 아직 Criteria의 type과 keyword에 대한 처리가 없기 때문에 수정해야 합니다.

 

views/board/get.jsp의 일부

 

수정/삭제 페이지에서 검색 처리

조회 페이지에서 수정/삭제 페이지로의 이동은 GET 방식을 통해 이동하고, <form> 태그를 이용하는 방식이므로 기존의 <form> 태그에 추가적인 type과 keyword 조건만을 추가합니다.

views/board/modify.jsp의 일부

 

수정/삭제 처리는 BoardController에서 redirect 방식으로 동작하므로 type과 keyword 조건을 같이 리다이렉트 시에 포함시켜야만 합니다.

 

BoardController 클래스

 

리다이렉트는 GET 방식으로 이루어지기 때문에 추가적인 파라미터를 처리해야 합니다.

 

modify.jsp에서 다시 목록으로 이동하는 경우에 필요한 파라미터만 전송하기 위해서 <form> 태그의 모든 내용을 지우고 다시 추가하는 방식이었으므로 keyword와 type 역시 추가하여 관련된 JavaScript 코드를 수정합니다.

 

modify.jsp의 일부

 

수정 후 수정/조회 화면에서 어떤 작업을 하던지 목록 페이지로 검색 조건이 유지되는지 확인해야 합니다.

검색한 상태에서 특정 페이지의 게시물을 수정하면 검색 조건은 유지한 채 목록 페이지로 이동하는지를 테스트합니다.

---

이번 글에서는 게시판 화면에서 검색 조건을 처리하는 과정에 대해 알아보았습니다.

 

도움이 되셨다면 광고 한 번 클릭 부탁드립니다.
한 번의 클릭이 제게 큰 힘이 된답니다. :)