Spring 홈페이지 - (12) 게시판 검색 페이지 작업

이번에는 게시판 검색 페이지를 만들어보겠습니다.

게시판 검색 형태는 다양합니다. 현재는 페이징이라던지 기능이 없는 상태이기에

단어 검색만 다뤄보겠습니다.

(추후 여러가지 검색을 다룰 예정입니다.)

 

 

작업순서는 아래의 순서로 진행하겠습니다.

 

• list.jsp 페이지 수정
• VO 변수 추가
• mapper.xml 검색 쿼리 추가

 

현재는 부트스트랩에 페이징과 검색부분이 적용되어 있습니다.

하지만 저희는 프로그램을 개발하는 목적이기때문에 해당 부분을 지우고 프로그램 개발을 해보도록 하겠습니다.

 

list.jsp

 

우선 테이블에 붙어있는 id="dataTable" 이 있는데 이 값이 있어서 자동으로 검색과 페이징이 되는 것입니다.

id값을 지워줍니다

<table class="table table-bordered" width="100%" cellspacing="0" style="text-align:center;">

 

그럼 기존 화면에서 페이징과 검색부분이 삭제된 것을 볼 수 있습니다.

 

깔끔하네요!!

그럼 검색부분을 꾸며줄 html 코드를 table div태그 위에 추가합니다.

검색이 가능하도록 form 태그를 만들어 주고, 그안에 id값을 생성하여 검색 함수(fn_search) 호출시에 

id값을 불러 submit이 가능하도록 설정합니다.

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<<script type="text/javascript">

$(document).ready(function() {

var msg = "${msg}";

if(msg != ""){
alert(msg);	
}

});


function fn_search(){
$("#listForm").submit();
return false;
}

</script>


<%@include file="../includes/header.jsp" %>

<form method="get"  id="listForm" action="/board/list">

<!-- Begin Page Content -->
<div class="container-fluid">

<!-- Page Heading -->
<h1 class="h3 mb-2 text-gray-800">Tables</h1>
<p class="mb-4">DataTables is a third party plugin that is used to generate the demo table below.
  For more information about DataTables, please visit the <a target="_blank"
      href="https://datatables.net">official DataTables documentation</a>.</p>

<!-- DataTales Example -->
<div class="card shadow mb-4">
  <div class="card-header py-3">
      <h6 class="m-0 font-weight-bold text-primary">DataTables Example</h6>
  </div>
  <!-- 검색[s] -->
  <div class="card-header py-3">
      <input type="text" id="searchKeyword" name="searchKeyword" value="" style="width:300px; height:40px;" placeholder="검색어를 입력하세요." />
<a href="#" onclick="fn_search();" class="btn btn-primary">검색</a>
  </div>
<!-- 검색[e] -->

 

 

boardVO.java

 

VO에 검색 변수를 만들어줍니다. 물론 get/set도요~

 

private String searchKeyword;

public String getSearchKeyword() {
	return searchKeyword;
}
public void setSearchKeyword(String searchKeyword) {
	this.searchKeyword = searchKeyword;
}

 

 

반응형

 

 

BoardMapper.xml

 

where절에 검색변수에 값을 넣어줍니다.

searchKeyword 가 비어있지 않다면 입력된 값이 제목 또는 작성자와 매칭시켜주는 작업이죠
그리고 list문에  include를 설정해줍니다.

 

<sql id="boardtWhere" >
where 
	1=1
<if test="searchKeyword != null and searchKeyword != ''">
	<![CDATA[ 
	 AND 
		( 
		board_title like concat('%',#{searchKeyword},'%') OR
	    board_content like concat('%',#{searchKeyword},'%') 
		 )  
	 ]]> 
</if>
</sql>


<select id="getList" parameterType="com.spring.web.vo.boardVO" resultType="com.spring.web.vo.boardVO">
<![CDATA[
	select
		*
	from
		tbl_board
]]>
<include refid="boardtWhere"/>
</select>

 

검색을 해보면 검색이 잘 되지만 검색후 검색단어가 사라지는 것을 볼 수 있습니다.

list 검색값을 넣어주어야합니다.

 

 

 

list.jsp

 

<!-- 검색[s] -->
<div class="card-header py-3">
    <input type="text" id="searchKeyword" name="searchKeyword" value="${searchVO.searchKeyword}" style="width:300px; height:40px;" placeholder="검색어를 입력하세요." />
<a href="#" onclick="fn_search();" class="btn btn-primary">검색</a>
</div>
<!-- 검색[e] -->

 

그럼 검색어도 잘 붙어있고 검색도 잘 되는 것을 볼 수 있습니다.

 

 

 

---

 

항목을 클릭하시면 해당 페이지로 이동합니다.
Spring 웹 홈페이지 개발 과정 리스트	(1) 자바설치 및 환경변수 설정
	(2) 이클립스 및 스프링 설치
	(3) 톰캣설치 방법
	(4) 이클립스 자바 환경설정 및 인코딩 설정방법
	(5) 데이터베이스(Mysql) 설치
	(6) 프로젝트 환경설정
	(7) 홈페이지 디자인 적용
	(8) 게시판 목록 페이지 작업
	(9) 게시판 등록 페이지 작업
	(10) 게시판 상세보기 페이지 작업
	(11) 게시판 수정/삭제 페이지 작업
	(12) 게시판 검색 페이지 작업
	(13) 게시판 페이징 작업
	(14) 게시판 페이징 쿼리스트링 작업
	(15) 회원가입 작업 (feat.아이디 중복체크/비밀번호 암호화)
	(16) 로그인/로그아웃 작업 (feat.아이디 기억하기)
	(17) 아이디&비밀번호 찾기
	(18) 마이페이지 정보&비밀번호 수정