본문 바로가기
백엔드 보고/스프링 (Spring)

검색 기능

보고잇냥 2022. 8. 8. 17:21

★ 결과

★ 사전설정

 - 페이징 기능

2022.08.03 - [백엔드 보고/스프링 (Spring)] - 페이징 기능

 

페이징 기능

★ 결과 ★ 사전설정  - 개발환경: 'pom.xml' → spring framework 버전 -  5.3.19 2022.08.02 - [백엔드 보고/스프링 (Spring)] - 프로젝트 개발 기준 프로젝트 개발 기준 앞으로 올리는 보물들은 아래 기준..

bogoitsaw.tistory.com

  페이징 기능에있는 게시판구현들도 모두 끝낸 상태에서부터 시작합니다.

★ DB 생성

    DB는 게시판 다루기에서 만들었던DB 그대로 활용합니다. 

(DB를 어떻게 넣는지 모르겠다면, ★사전설정에 My-SQL 셋팅을 참고해주세요)

 

★ 틀

  - 변동사항(노란색 영역으로 표시)

    ■ Mapper / TestMapper.xml (변동사항은 노란색 부분)

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.test.Mapper.TestMapper">
 

	<!-- boardTest부분 -->	
	<select id = "selectAllBoard" parameterType = "com.webjjang.util.PageObject"  resultType = "com.test.Domain.Testboard">
	SELECT *
	  FROM (
		  SELECT 
	   	   @rownum:=@rownum+1  rnum, 
		      t.* 
		  FROM 
	   	   testboard t, 
			      (SELECT @ROWNUM := 0) R
		  WHERE ( 1 = 1 )
		  <include refid="noticeSearch"/>
		) list
		WHERE rnum   <![CDATA[>=]]> #{startRow} AND rnum  <![CDATA[<=]]> #{endRow} order by b_seq DESC
	</select>	
	<select id="getTotalTestRow" resultType="int" parameterType = "com.webjjang.util.PageObject">
   	    SELECT count(*) from testboard where ( 1 = 1 ) <include refid="noticeSearch"/>
   	</select>
   	
   	<!-- 검색 조건 처리를 위한 태그 - 부분 태그 : sql :: 동적 쿼리 작성 -->
	<sql id="noticeSearch">	
		<if test="word != null and !word.equals('')">	
			and(
			<if test="key == 't'.toString()">
				b_title LIKE CONCAT('%', #{word}, '%')
			</if>
			<if test="key == 'c'.toString()">
				b_content LIKE CONCAT('%', #{word}, '%')
			</if>			
			<if test="key == 'w'.toString()">
				b_writer LIKE CONCAT('%', #{word}, '%')
			</if>
			<if test="key == 'tc'.toString()">
			    b_title like CONCAT('%', #{word}, '%')
			    or b_content LIKE CONCAT('%', #{word}, '%')			    
		    </if>
			<if test="key == 'tcw'.toString()">
			    b_title like CONCAT('%', #{word}, '%')
			    or b_content LIKE CONCAT('%', #{word}, '%')
			    or b_writer LIKE CONCAT('%', #{word}, '%')
		    </if>				
            ) 
         </if>	
	</sql>
	
	<insert id = "insertBoard" parameterType = "com.test.Domain.Testboard">
		INSERT INTO testboard (b_title, b_writer, b_content, b_img) VALUES(#{b_title},#{b_writer},#{b_content}, #{b_img})
	</insert>
	
	<select id = "selectSeqBoard" parameterType = "int" resultType = "com.test.Domain.Testboard">
		SELECT * FROM testboard WHERE b_seq = #{b_seq}
	</select>
	
	<update id = "updateBoard" parameterType = "com.test.Domain.Testboard">
		UPDATE testboard SET b_title = #{b_title}, b_content = #{b_content}, b_img = #{b_img} WHERE b_seq = #{b_seq}
	</update>
	
	<delete id = "deleteBoard" parameterType = "int">
		DELETE FROM testboard WHERE b_seq = #{b_seq}
	</delete>
   	
</mapper>

Tip) 이식할 때 참고사항 (좀 더 유연하게 사용하고 싶은분들은 더보기눌러주세용)

 

더보기 
	<sql id="noticeSearch">	
		<if test="word != null and !word.equals('')">	
			and(
			<if test="key == 't'.toString()">
				b_title LIKE CONCAT('%', #{word}, '%')
			</if>
			<if test="key == 'c'.toString()">
				b_content LIKE CONCAT('%', #{word}, '%')
			</if>			
			<if test="key == 'w'.toString()">
				b_writer LIKE CONCAT('%', #{word}, '%')
			</if>
			<if test="key == 'tc'.toString()">
			    b_title like CONCAT('%', #{word}, '%')
			    or b_content LIKE CONCAT('%', #{word}, '%')			    
		    </if>
			<if test="key == 'tcw'.toString()">
			    b_title like CONCAT('%', #{word}, '%')
			    or b_content LIKE CONCAT('%', #{word}, '%')
			    or b_writer LIKE CONCAT('%', #{word}, '%')
		    </if>				
            ) 
         </if>	
	</sql>

이걸 분석하면, 충분히 자기 입맛대로 바꿀 수 있어요!

 

b_title, b_content, b_writer은 제가 예시로 이렇게 써두었지만, 실제로 서비스 만들때엔, 이 변수들 바꿔가면서 검색할 수 있도록 바꿔주시면 됩니당 ^^

 

    ■ views / home.jsp 

- jsp들은 대부분 url get방식으로 query를 넘기도록 추가했습니다. 이로써 검색결과가 그대로 유지된채로 다시 뒤로 넘어갈 수 있게되지요.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> 
<%@ taglib prefix="pageObject" tagdir="/WEB-INF/tags" %>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>게시판 리스트</title>

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

<style type="text/css">
.dataRow:hover {
	background: #eee;
	cursor: pointer;
}
div.nav-align{
     text-align: center;
}
/* 예쁘게 보이고 싶어서 css 간단히 넣었습니다. 맘대로 수정해두되요~ */
table.searchTable{
	width: 100%;
	margin-bottom: 5px;
}
table.searchTable tr:first-child td:nth-child(3){
	padding-left: 15px;
}
table.searchTable tr:first-child td:nth-child(4){
	width: 5%;
}
table.searchTable tr:first-child td:last-child{
	width: 5%;
}

</style>

<script type="text/javascript">



$(function(){

	$(".dataRow").click(function(){
		var b_seq = $(this).find(".b_seq").text();

		var query = '';				
		<c:if test = "${not empty pageObject}">		
			query += '&page=' + '${pageObject.page}' + '&perPageNum=' + '${pageObject.perPageNum}';
		</c:if>
		<c:if test = "${not empty pageObject.word}">
			query += '&key=' + '${pageObject.key}' + '&word=' + '${pageObject.word}';
		</c:if>	

		location = 'view?b_seq=' + b_seq + query;	
	
	});

	
	$("#perPageNumSelect").change(function () {
		$("#perPageNumForm").submit();
	});
});
</script>

</head>
<body>
	<div class="container">
		<h1>게시판 리스트</h1>
		<table class = "searchTable">
			<tr>
				<form action="main">
					<td>
						<!-- 페이지 정보를 다시 그대로 보내준다. -->                                        
						<input name="perPageNum" type="hidden" value="${pageObject.perPageNum }">
						<!-- 검색 종류 선택 (pulldown 메뉴 - select) : key -->
						<select name="key" class="form-control">
							<option value="t" ${(pageObject.key=="t" )?"selected":"" }>제목</option>
							<option value="c" ${(pageObject.key=="c" )?"selected":"" }>내용</option>
							<option value="w" ${(pageObject.key=="w" )?"selected":"" }>작성자</option>
							<option value="tc" ${(pageObject.key=="tc" )?"selected":"" }>제목/내용</option>
							<option value="tcw" ${(pageObject.key=="tcw" )?"selected":"" }>모두</option>						
                            
						</select>
					</td>
					<td>
						<input id="word" type="text" class="form-control" name="word"
							placeholder="검색 문장" value="${param.word }">
					</td>
					<td>
						<div class="input-group-btn">
							<button class="btn btn-default" type="submit">
								<i class="glyphicon glyphicon-search"></i>
							</button>
						</div>
					</td>
				</form>
				<td>
				<form action="main" class="form-inline" id="perPageNumForm">
					<input name="page" type="hidden" value="1">
					<input name="key" type="hidden" value="${pageObject.key}">
					<input name="word" type="hidden" value="${pageObject.word}">
					<select name="perPageNum" class="form-control" id="perPageNumSelect">
						<option ${(pageObject.perPageNum==3)?"selected":"" }>3</option>
						<option ${(pageObject.perPageNum==6)?"selected":"" }>6</option>
						<option ${(pageObject.perPageNum==9)?"selected":"" }>9</option>
						<option ${(pageObject.perPageNum==12)?"selected":"" }>12</option>
						<option ${(pageObject.perPageNum==15)?"selected":"" }>15</option>
					</select>
				</form>
				</td>
			</tr>
		</table>
		<table class="table">
			<tr>
				<th>번호</th>
				<th>제목</th>
				<th>작성자</th>
			</tr>
			<c:if test="${empty test }">
				<tr>
					<td colspan="3">데이터가 존재하지 않습니다.</td>
				</tr>
			</c:if>
			<c:if test="${!empty test }">
				<c:forEach items="${requestScope.test }" var="vo">
					<tr class="dataRow">			
						<td class="b_seq" >${pageScope.vo.b_seq }</td>
						<td >${vo.b_title }</td>
						<td >${vo.b_writer }</td>
					</tr>
				</c:forEach>
			</c:if>
		</table>
		<a href = "write?perPageNum=${pageObject.perPageNum }" class="btn btn-default">글쓰기</a>
		<!-- 페이지네이션 -->
		<div class = "nav-align">
		     <pageObject:pageNav listURI="main" pageObject="${pageObject }" query="&key=${pageObject.key }&word=${pageObject.word }" />
		</div>
	</div>
</body>
</html>

Tip) 검색기능에 대하여 내 입맛대로 바꾸고 싶다면 '더보기' 클릭!

더보기 
						<select name="key" class="form-control">
							<option value="t" ${(pageObject.key=="t" )?"selected":"" }>제목</option>
							<option value="c" ${(pageObject.key=="c" )?"selected":"" }>내용</option>
							<option value="w" ${(pageObject.key=="w" )?"selected":"" }>작성자</option>
							<option value="tc" ${(pageObject.key=="tc" )?"selected":"" }>제목/내용</option>
							<option value="tcw" ${(pageObject.key=="tcw" )?"selected":"" }>모두</option>					
                            
						</select>

이 부분은 TestMapper.xml과 비교하며 수정해주세요~ 

option태그를 수정만 하면 내 입맛대로 수정 가능합니다.

 

    ■ views / update.jsp 

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="pageObject" tagdir="/WEB-INF/tags" %>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>게시판 글수정</title>

		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
		<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
		<script type="text/javascript">
			$(function () {
				$(".cancelBackBtn").click(function () {
					history.back();
				});
			});
		</script>
	</head>

	<body>
		<div class="container">
			<h1>게시판 글수정 폼</h1>
			<form action="update.do" method="post">
				<input name="page" type="hidden" value="${param.page }" />
				<input name="perPageNum" type="hidden" value="${param.perPageNum }" />
				<input name="key" type="hidden" value="${param.key }" />
				<input name="word" type="hidden" value="${param.word }" />
				<div class="form-group">
					<label for="b_seq">번호:</label>
					<input name="b_seq" type="text" class="form-control" id="b_seq" value="${test.b_seq }" readonly="readonly">
				</div>
				<div class="form-group">
					<label for="title">제목:</label>
					<input name="b_title" type="text" class="form-control" id="title" maxlength="100"
						required="required" value="${test.b_title }">
				</div>
				<div class="form-group">
					<label for="content">내용:</label>
					<textarea name="b_content" class="form-control" rows="5" id="content">${test.b_content }</textarea>
				</div>
				<div class="form-group">
					<label for="writer">작성자:</label>
					<input name="b_writer" type="text" class="form-control" id="writer" maxlength="20" value="${test.b_writer }" readonly="readonly">
				</div>
				<div class="form-group">
					<label for="b_regdate">작성일:</label>
					<input name="b_regdate" type="text" class="form-control" id="b_regdate" maxlength="20" value="${test.b_regdate }" readonly="readonly">
				</div>
				
				<button>수정</button>				
				<button type="button" class="cancelBackBtn">취소</button>
			</form>
		</div>
	</body>
</html>

 - query로 검색한 내용을 그대로 저장할 수 있도록 page정보를 숨긴것 같이, 정보를 hidden으로 숨김

 

  ■ views / view.jsp 

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="pageObject" tagdir="/WEB-INF/tags" %>

<!DOCTYPE html>
<html>
    <head>
    <meta charset="UTF-8">
    <title>게시판 자세히보기</title>
    <!-- BootStrap 라이브러리 등록 -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

    <script type="text/javascript">
    $(function(){
        $(".deleteBtn").click(function(){
            return confirm("정말 삭제하시겠습니까?");

        });
    });
    </script>

    </head>
    <body>
        <div class="container">
            <h1>게시판 자세히보기</h1>
            <table class="table">
                <tr>
                    <td colspan="5">
                        <a href="update?b_seq=${test.b_seq }" class="btn btn-default">수정</a>
                        <a href="delete.do?b_seq=${test.b_seq }" class="btn btn-default deleteBtn">삭제</a>
                        <a href="main?page=${pageObject.page }&perPageNum=${pageObject.perPageNum}&key=${pageObject.key}&word=${pageObject.word}" class="btn btn-default">홈</a>
                    </td>
                </tr>
                <tr>
                    <th style="width: 100px;">번호</th>
                    <td>${test.b_seq }</td>
                </tr>
                <tr>
                    <th>제목</th>
                    <td>${test.b_title }</td>
                </tr>
                <tr>
                    <th>내용</th>
                    <td>${test.b_content }</td>
                </tr>
                <tr>
                    <th>작성자</th>
                    <td>${test.b_writer }</td>
                </tr>
                <tr>
                    <th>작성일</th>
                    <td>                        
                        <fmt:parseDate value="${test.b_regdate}" var="dateFmt" pattern="yyyy-MM-dd HH:mm:ss"/>
                        <fmt:formatDate value="${dateFmt}" pattern="yyyy-MM-dd HH:mm:ss" />                                        
                    </td>
                </tr>
                <tr>
                    <td colspan="5">
                        <a href="update?b_seq=${test.b_seq }" class="btn btn-default">수정</a>
                        <a href="delete.do?b_seq=${test.b_seq }" class="btn btn-default deleteBtn">삭제</a>
                        <a href="main?page=${pageObject.page }&perPageNum=${pageObject.perPageNum}&key=${pageObject.key}&word=${pageObject.word}" class="btn btn-default">홈</a>
                    </td>
                </tr>
            </table>            
        </div>
    </body>
</html>

 - query로 검색한 내용을 그대로 가지고 home으로 넘어갈 수 있도록 a링크에 get방식으로 담음.

Test.zip
0.04MB

'백엔드 보고 > 스프링 (Spring)' 카테고리의 다른 글

이미지 게시판  (0) 2022.08.09
게시판 다루기  (0) 2022.08.07
페이징 기능  (0) 2022.08.03
프로젝트 개발 기준  (0) 2022.08.02

'백엔드 보고/스프링 (Spring)' Related Articles

티스토리툴바