organize/스프링

스프링 웹 프로젝트 15

001cloudid 2025. 1. 14. 13:36
728x90

검색조건처리를 위한 Criteria 클래스 변경

  • 검색항목(type)과 검색 키워드(keyword) 추가
package org.zerock.domain;

import lombok.Getter;
import lombok.Setter;
import lombok.ToString;

@Getter
@Setter
@ToString
public class Criteria {

	private int pageNum; // 페이지
	private int amount; // 개수
	
	private String type; // 검색 항복
	private String keyword; // 키워드

	public Criteria() {
		this(1,10); // 초기값
	}

	public Criteria(int pageNum, int amount) {
		super();
		this.pageNum = pageNum;
		this.amount = amount;
	}
	
	// 루프를 돌리기 위해서 배열이 필요
	public String[] getTypeArr() {
		return type == null? new String[] {} : type.split("");
	}
	
}

BoardMapper.xml 수정

(...생략...)
	<select id="getListWithPaging" resultType="org.zerock.domain.BoardVO"> <!-- xml에서 부등호처리 → cdata -->
		<![CDATA[  
		select *
		from (select /*+ index_desc(tbl_board pk_board) */ rownum rn, bno, title, writer, regdate,updateDate 
			  from tbl_board 
			  where 
			  ]]>
			  <foreach collection="typeArr" item="type">
			   <if test="type == 'T'.toString">
			   		title like #{keyword}
			   </if>
			   <if test="type == 'C'.toString">
			   		content like #{keyword}
			   </if>
			   <if test="type == 'W'.toString">
			   		writer like #{keyword}
			   </if>
			  </foreach>
			  <![CDATA[
			  bno > 0 and rownum > 0 and rownum <= (#{pageNum} * #{amount}))
		where rn > (#{pageNum}-1) * #{amount}
		]]>
	</select>
(...생략...)

문제가 있는 코드지만 되는지만 확인

BoardMapperTests

(...생략...)
	@Test
	public void testSearchPaging() {
		Criteria criteria = new Criteria();
		criteria.setType("T");
		criteria.setKeyword("test");
		List<BoardVO> list = boardMapper.getListWithPaging(criteria);
		for(int i = 0; i < list.size(); i++) {
			log.info(list);
		}
	}
}

BoardMapper 수정

	<select id="getListWithPaging" resultType="org.zerock.domain.BoardVO"> <!-- xml에서 부등호처리 → cdata -->
		<![CDATA[  
		select *
		from (select /*+ index_desc(tbl_board pk_board) */ rownum rn, bno, title, writer, regdate,updateDate 
			  from tbl_board 
			  where 
			  ]]>
			  <trim prefix="(" suffix=") AND">
				  <foreach collection="typeArr" item="type">
				   <if test="type == 'T'.toString">
				   		title like #{keyword}
				   </if>
				   <if test="type == 'C'.toString">
				   		content like #{keyword}
				   </if>
				   <if test="type == 'W'.toString">
				   		writer like #{keyword}
				   </if>
				  </foreach>
			  </trim>
			  <![CDATA[
			  bno > 0 and rownum > 0 and rownum <= (#{pageNum} * #{amount}))
		where rn > (#{pageNum}-1) * #{amount}
		]]>
	</select>

검색 조건을 다양하게 테스트

BordMapperTests

	@Test
	public void testSearchPaging() {
		Criteria criteria = new Criteria();
//		criteria.setType("T");
//		criteria.setKeyword("테스트");
		List<BoardVO> list = boardMapper.getListWithPaging(criteria);
		for(int i = 0; i < list.size(); i++) {
			log.info(list);
		}
	}

 

다른테스트

	@Test
	public void testSearchPaging() {
		Criteria criteria = new Criteria();
		criteria.setType("TCW");
		criteria.setKeyword("테스트");
		List<BoardVO> list = boardMapper.getListWithPaging(criteria);
		for(int i = 0; i < list.size(); i++) {
			log.info(list);
		}
	}

 

BoardMapper 수정(separator)

	<select id="getListWithPaging" resultType="org.zerock.domain.BoardVO"> <!-- xml에서 부등호처리 → cdata -->
		<![CDATA[  
		select *
		from (select /*+ index_desc(tbl_board pk_board) */ rownum rn, bno, title, writer, regdate,updateDate 
			  from tbl_board 
			  where 
			  ]]>
			  <trim prefix="(" suffix=") AND">
				  <foreach collection="typeArr" item="type" separator="OR">
				   <if test="type == 'T'.toString">
				   		title like #{keyword}
				   </if>
				   <if test="type == 'C'.toString">
				   		content like #{keyword}
				   </if>
				   <if test="type == 'W'.toString">
				   		writer like #{keyword}
				   </if>
				  </foreach>
			  </trim>
			  <![CDATA[
			  bno > 0 and rownum > 0 and rownum <= (#{pageNum} * #{amount}))
		where rn > (#{pageNum}-1) * #{amount}
		]]>
	</select>

 

like 처리

	<select id="getListWithPaging" resultType="org.zerock.domain.BoardVO"> <!-- xml에서 부등호처리 → cdata -->
		<![CDATA[  
		select *
		from (select /*+ index_desc(tbl_board pk_board) */ rownum rn, bno, title, writer, regdate,updateDate 
			  from tbl_board 
			  where 
			  ]]>
			  <trim prefix="(" suffix=") AND">
				  <foreach collection="typeArr" item="type" separator="OR">
				   <if test="type == 'T'.toString">
				   		title like '%'||#{keyword}||'%'
				   </if>
				   <if test="type == 'C'.toString">
				   		content like '%'||#{keyword}||'%'
				   </if>
				   <if test="type == 'W'.toString">
				   		writer like '%'||#{keyword}||'%'
				   </if>
				  </foreach>
			  </trim>
			  <![CDATA[
			  bno > 0 and rownum > 0 and rownum <= (#{pageNum} * #{amount}))
		where rn > (#{pageNum}-1) * #{amount}
		]]>
	</select>

 

조건이 없을 때

 

검색 → totalcount도 변경되기 때문에 처리해줘야함 → 그렇지 않으면 화면에서 처리가 안됨

sql 태그는 jsp:include와 같이 사용할 수 있음

BoardMapper.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="org.zerock.mapper.BoardMapper">

<sql id="criteria">
			  <trim prefix="(" suffix=") AND">
				  <foreach collection="typeArr" item="type" separator="OR">
				   <if test="type == 'T'.toString">
				   		title like '%'||#{keyword}||'%'
				   </if>
				   <if test="type == 'C'.toString">
				   		content like '%'||#{keyword}||'%'
				   </if>
				   <if test="type == 'W'.toString">
				   		writer like '%'||#{keyword}||'%'
				   </if>
				  </foreach>
			  </trim>
</sql>

	<select id="getList" resultType="org.zerock.domain.BoardVO">
		select * from tbl_board order by bno desc		
	</select>

	<insert id="insert">
		insert into tbl_board(bno, title, content, writer)
		values(seq_board.nextval, #{title}, #{content}, #{writer})
	</insert>

	<insert id="insertSelectKey">
		<selectKey order="BEFORE" keyProperty="bno" resultType="long">
			select seq_board.nextval from dual
		</selectKey>
		insert into tbl_board(bno, title, content, writer)
		values(#{bno}, #{title}, #{content}, #{writer})
	</insert>
	
	<select id="read" resultType="org.zerock.domain.BoardVO">
		select * from tbl_board
		where bno = #{bno}
		order by bno desc
	</select>
	
	<delete id="delete">
		delete from tbl_board
		where bno=#{bno}
	</delete>
	
	<update id="update">
		update tbl_board
		set title = #{title}, content = #{content}, writer = #{writer}, updateDate = sysdate
		where bno = #{bno} 
	</update>
	
	<select id="getListWithPaging" resultType="org.zerock.domain.BoardVO"> <!-- xml에서 부등호처리 → cdata -->
		<![CDATA[  
		select *
		from (select /*+ index_desc(tbl_board pk_board) */ rownum rn, bno, title, writer, regdate,updateDate 
			  from tbl_board 
			  where 
			  ]]>
		<include refid="criteria"></include>
			  <![CDATA[
			  bno > 0 and rownum > 0 and rownum <= (#{pageNum} * #{amount}))
		where rn > (#{pageNum}-1) * #{amount}
		]]>
	</select>
	
	<select id="getTotalCount" resultType="int">
		select count(bno) from tbl_board where <include refid="criteria"></include> bno > 0
	</select>
	
	<select id="searchTest" resultType="org.zerock.domain.BoardVO">
		<![CDATA[
		select * from tbl_board
		where
		]]>
		<trim suffix="and">
		<foreach collection="map" index="key" item="value" separator="OR" open="(" close=")">
			<if test="key == 'T'.toString()">
				title like #{value}
			</if>
			<if test="key == 'C'.toString()">
				content like #{value}
			</if>
			<if test="key == 'W'.toString()">
				writer like #{value}
			</if>
		</foreach>
		</trim>
		<![CDATA[
			rownum < 10
		]]>
	</select>
	
</mapper>


화면에서의 검색처리

list.jsp 검색상자 및 버튼 등 생성

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@include file="../include/header.jsp" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
            <div class="row">
                <div class="col-lg-12">
                    <h1 class="page-header">Tables</h1>
                </div>
                <!-- /.col-lg-12 -->
            </div>
            <!-- /.row -->
            <div class="row">
                <div class="col-lg-12">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            DataTables Advanced Tables
                            <button id="regBtn" type="button" class="btn btn-xs pull-right">Register New Board</button>
                        </div>
                        <!-- /.panel-heading -->
                        <div class="panel-body">
                            <table width="100%" class="table table-striped table-bordered table-hover">
                                <thead>
                                    <tr>
                                        <th>#번호</th>
                                        <th>제목</th>
                                        <th>작성자</th>
                                        <th>작성일</th>
                                        <th>수정일</th>
                                    </tr>
                                </thead>
                                <tbody>
                                <c:forEach items="${list}" var="boardVO">
                                    <tr class="odd gradeX">
                                        <td><c:out value="${boardVO.bno}" /></td>
                                        <td><a class="move" href="<c:out value='${boardVO.bno}' />"><c:out value="${boardVO.title}" /></a></td>
                                        <td><c:out value="${boardVO.writer}" /></td>
                                        <td><fmt:formatDate value="${boardVO.regdate }" pattern="yyyy-MM-dd"/> </td>
                                        <td><fmt:formatDate value="${boardVO.updateDate }" pattern="yyyy-MM-dd" /></td>
                                    </tr>
                                </c:forEach>
                                </tbody>
                            </table>
                            <!-- /.table-responsive -->
                            
                            <form id="searchForm" action="/board/list" method="get">
                            	<select name="type">
                            		<option value="T">제목</option>
                            	</select>
                            	<input type="text" name="keyword">
                            	<button class="btn btn-default">Search</button>
                            </form>
                            
                            <div class="pull-right">
                            	<ul class="pagination">
                            		<c:if test="${page.prev}"> 
								    	<li class="page-item"><a class="page-link" href="${page.startPage - 1}" tabindex="-1">Previous</a></li>
									</c:if>
									<c:forEach begin="${page.startPage}" end="${page.endPage}" var="num">
										<li class="page-item ${page.criteria.pageNum == num? 'active' :''}"><a class="page-link" href="${num}">${num}</a></li>
									</c:forEach>                
									<c:if test="${page.next}">            	
								    	<li class="page-item"><a class="page-link" href="${page.endPage + 1}">Next</a></li>
                            		</c:if>
                            	</ul>
                            </div>
                            <form id="actionForm" action="/board/list" method="get">
                            	<input type="hidden" name="pageNum" value="${page.criteria.pageNum}">
                            	<input type="hidden" name="amount" value="${page.criteria.amount}">
                            </form>
                            
                        </div>
                        <!-- /.panel-body -->
                    </div>
                    <!-- /.panel -->
                </div>
                <!-- /.col-lg-12 -->
            </div>

<div id="myModal" class="modal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p></p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" data-dismiss="modal">Save changes</button>
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

<script>
$(document).ready(function(){
	var result = '<c:out value="${result}"/>';
	
	
	checkModal(result);
	
	history.replaceState({},null,null); // 히스토리 클리어
	
	function checkModal(result){
		
		if(result ==='' || history.state){
			return;
		}
		
		if(result === 'success'){
			$('.modal-body').html("정상적으로 처리됨.");
		} else if(parseInt(result)>0){
			$('.modal-body').html("게시글 " + parseInt(result) + " 번이 등록됨.");
		}
		
		$("#myModal").modal("show");
	}
	
	$("#regBtn").click(function(){
		self.location = "/board/register";
	});
	
	var actionForm = $("#actionForm");
	
	$(".page-link").on("click", function(e){
		e.preventDefault(); // a태그는 기능은 이동 → 이동이 되지 않음(기본 동작 제어)
		
		console.log('click');
		
		//form 태그의 내용 변경 후 submit
		actionForm.find("input[name='pageNum']").val($(this).attr("href"));
		actionForm.submit();
		
	});
	
	$(".move").on("click", function(e){
		e.preventDefault();
		
		console.log($(this).attr("href"));
		
		actionForm.append("<input type='hidden' name='bno' value='"+$(this).attr("href")+"'>");
		actionForm.attr("action","/board/get").submit();
		
	})
	
});
</script>

<%@include file="../include/footer.jsp" %>

검색을 할 때 pageNum, amount를 가져가야함

(...생략...)
                            <div class="pull-right">
                            	<ul class="pagination">
                            		<c:if test="${page.prev}"> 
								    	<li class="page-item"><a class="page-link" href="${page.startPage - 1}" tabindex="-1">Previous</a></li>
									</c:if>
									<c:forEach begin="${page.startPage}" end="${page.endPage}" var="num">
										<li class="page-item ${page.criteria.pageNum == num? 'active' :''}"><a class="page-link" href="${num}">${num}</a></li>
									</c:forEach>                
									<c:if test="${page.next}">            	
								    	<li class="page-item"><a class="page-link" href="${page.endPage + 1}">Next</a></li>
                            		</c:if>
                            	</ul>
                            </div>
                            <form id="actionForm" action="/board/list" method="get">
                            	<input type="hidden" name="pageNum" value="${page.criteria.pageNum}">
                            	<input type="hidden" name="amount" value="${page.criteria.amount}">
                            </form>
                            
                        </div>
                        <!-- /.panel-body -->
                    </div>
                    <!-- /.panel -->
                </div>
                <!-- /.col-lg-12 -->
            </div>

(...생략...)

이후 검색해보면

이벤트처리

(...생략...)
                            <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="${page.criteria.pageNum}">
                            	<input type="hidden" name="amount" value="${page.criteria.amount}">
                            	<button class="btn btn-default">Search</button>
                            </form>
                            
                            <div class="pull-right">
                            	<ul class="pagination">
                            		<c:if test="${page.prev}"> 
								    	<li class="page-item"><a class="page-link" href="${page.startPage - 1}" tabindex="-1">Previous</a></li>
									</c:if>
									<c:forEach begin="${page.startPage}" end="${page.endPage}" var="num">
										<li class="page-item ${page.criteria.pageNum == num? 'active' :''}"><a class="page-link" href="${num}">${num}</a></li>
									</c:forEach>                
									<c:if test="${page.next}">            	
								    	<li class="page-item"><a class="page-link" href="${page.endPage + 1}">Next</a></li>
                            		</c:if>
                            	</ul>
                            </div>
                            <form id="actionForm" action="/board/list" method="get">
                            	<input type="hidden" name="pageNum" value="${page.criteria.pageNum}">
                            	<input type="hidden" name="amount" value="${page.criteria.amount}">
                            </form>
                            
                        </div>
                        <!-- /.panel-body -->
                    </div>
                    <!-- /.panel -->
                </div>
                <!-- /.col-lg-12 -->
            </div>

<div id="myModal" class="modal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p></p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" data-dismiss="modal">Save changes</button>
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

<script>
$(document).ready(function(){

(...생략...)
	
	var searchForm = $("#searchForm");
	
	$("#searchForm button").on("click", function(e){
		e.preventDefault();
		console.log("클릭........");
	})
	
});
</script>

<%@include file="../include/footer.jsp" %>

확인 후 submit()

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@include file="../include/header.jsp" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
            <div class="row">
                <div class="col-lg-12">
                    <h1 class="page-header">Tables</h1>
                </div>
                <!-- /.col-lg-12 -->
            </div>
            <!-- /.row -->
            <div class="row">
                <div class="col-lg-12">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            DataTables Advanced Tables
                            <button id="regBtn" type="button" class="btn btn-xs pull-right">Register New Board</button>
                        </div>
                        <!-- /.panel-heading -->
                        <div class="panel-body">
                            <table width="100%" class="table table-striped table-bordered table-hover">
                                <thead>
                                    <tr>
                                        <th>#번호</th>
                                        <th>제목</th>
                                        <th>작성자</th>
                                        <th>작성일</th>
                                        <th>수정일</th>
                                    </tr>
                                </thead>
                                <tbody>
                                <c:forEach items="${list}" var="boardVO">
                                    <tr class="odd gradeX">
                                        <td><c:out value="${boardVO.bno}" /></td>
                                        <td><a class="move" href="<c:out value='${boardVO.bno}' />"><c:out value="${boardVO.title}" /></a></td>
                                        <td><c:out value="${boardVO.writer}" /></td>
                                        <td><fmt:formatDate value="${boardVO.regdate }" pattern="yyyy-MM-dd"/> </td>
                                        <td><fmt:formatDate value="${boardVO.updateDate }" pattern="yyyy-MM-dd" /></td>
                                    </tr>
                                </c:forEach>
                                </tbody>
                            </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="${page.criteria.pageNum}">
                            	<input type="hidden" name="amount" value="${page.criteria.amount}">
                            	<button class="btn btn-default">Search</button>
                            </form>
                            
                            <div class="pull-right">
                            	<ul class="pagination">
                            		<c:if test="${page.prev}"> 
								    	<li class="page-item"><a class="page-link" href="${page.startPage - 1}" tabindex="-1">Previous</a></li>
									</c:if>
									<c:forEach begin="${page.startPage}" end="${page.endPage}" var="num">
										<li class="page-item ${page.criteria.pageNum == num? 'active' :''}"><a class="page-link" href="${num}">${num}</a></li>
									</c:forEach>                
									<c:if test="${page.next}">            	
								    	<li class="page-item"><a class="page-link" href="${page.endPage + 1}">Next</a></li>
                            		</c:if>
                            	</ul>
                            </div>
                            <form id="actionForm" action="/board/list" method="get">
                            	<input type="hidden" name="pageNum" value="${page.criteria.pageNum}">
                            	<input type="hidden" name="amount" value="${page.criteria.amount}">
                            </form>
                            
                        </div>
                        <!-- /.panel-body -->
                    </div>
                    <!-- /.panel -->
                </div>
                <!-- /.col-lg-12 -->
            </div>

<div id="myModal" class="modal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p></p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" data-dismiss="modal">Save changes</button>
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

<script>
$(document).ready(function(){
	var result = '<c:out value="${result}"/>';
	
	
	checkModal(result);
	
	history.replaceState({},null,null); // 히스토리 클리어
	
	function checkModal(result){
		
		if(result ==='' || history.state){
			return;
		}
		
		if(result === 'success'){
			$('.modal-body').html("정상적으로 처리됨.");
		} else if(parseInt(result)>0){
			$('.modal-body').html("게시글 " + parseInt(result) + " 번이 등록됨.");
		}
		
		$("#myModal").modal("show");
	}
	
	$("#regBtn").click(function(){
		self.location = "/board/register";
	});
	
	var actionForm = $("#actionForm");
	
	$(".page-link").on("click", function(e){
		e.preventDefault(); // a태그는 기능은 이동 → 이동이 되지 않음(기본 동작 제어)
		
		console.log('click');
		
		//form 태그의 내용 변경 후 submit
		actionForm.find("input[name='pageNum']").val($(this).attr("href"));
		actionForm.submit();
		
	});
	
	$(".move").on("click", function(e){
		e.preventDefault();
		
		console.log($(this).attr("href"));
		
		actionForm.append("<input type='hidden' name='bno' value='"+$(this).attr("href")+"'>");
		actionForm.attr("action","/board/get").submit();
		
	});
	
	var searchForm = $("#searchForm");
	
	$("#searchForm button").on("click", function(e){
		e.preventDefault();
		console.log("클릭........");
		searchForm.submit();
	});
	
});
</script>

<%@include file="../include/footer.jsp" %>

 

option 추가

(...생략...)
                            <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>
                            		<option value="TC">제목+내용</option>
                            		<option value="TCW">제목+내용+작성자</option>
                            	</select>
(...생략...)

검색 버튼을 누른다 → 새롭게 검색을 한다

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@include file="../include/header.jsp" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
            <div class="row">
                <div class="col-lg-12">
                    <h1 class="page-header">Tables</h1>
                </div>
                <!-- /.col-lg-12 -->
            </div>
            <!-- /.row -->
            <div class="row">
                <div class="col-lg-12">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            DataTables Advanced Tables
                            <button id="regBtn" type="button" class="btn btn-xs pull-right">Register New Board</button>
                        </div>
                        <!-- /.panel-heading -->
                        <div class="panel-body">
                            <table width="100%" class="table table-striped table-bordered table-hover">
                                <thead>
                                    <tr>
                                        <th>#번호</th>
                                        <th>제목</th>
                                        <th>작성자</th>
                                        <th>작성일</th>
                                        <th>수정일</th>
                                    </tr>
                                </thead>
                                <tbody>
                                <c:forEach items="${list}" var="boardVO">
                                    <tr class="odd gradeX">
                                        <td><c:out value="${boardVO.bno}" /></td>
                                        <td><a class="move" href="<c:out value='${boardVO.bno}' />"><c:out value="${boardVO.title}" /></a></td>
                                        <td><c:out value="${boardVO.writer}" /></td>
                                        <td><fmt:formatDate value="${boardVO.regdate }" pattern="yyyy-MM-dd"/> </td>
                                        <td><fmt:formatDate value="${boardVO.updateDate }" pattern="yyyy-MM-dd" /></td>
                                    </tr>
                                </c:forEach>
                                </tbody>
                            </table>
                            <!-- /.table-responsive -->
                            
                            <form id="searchForm" action="/board/list" method="get">
                            	<select name="type">
                            		<option value="" ${page.criteria.type == null?"selected":"" }>---</option>
                            		<option value="T" ${page.criteria.type eq 'T'?"selected":"" }>제목</option>
                            		<option value="C" ${page.criteria.type eq 'C'?"selected":"" }>내용</option>
                            		<option value="W" ${page.criteria.type eq 'W'?"selected":"" }>작성자</option>
                            		<option value="TC" ${page.criteria.type eq 'TC'?"selected":"" }>제목+내용</option>
                            		<option value="TCW" ${page.criteria.type eq 'TCW'?"selected":"" }>제목+내용+작성자</option>
                            	</select>
                            	<input type="text" name="keyword" value="${page.criteria.keyword}">
                            	<input type="hidden" name="pageNum" value="${page.criteria.pageNum}">
                            	<input type="hidden" name="amount" value="${page.criteria.amount}">
                            	<button class="btn btn-default">Search</button>
                            </form>
                            
                            <div class="pull-right">
                            	<ul class="pagination">
                            		<c:if test="${page.prev}"> 
								    	<li class="page-item"><a class="page-link" href="${page.startPage - 1}" tabindex="-1">Previous</a></li>
									</c:if>
									<c:forEach begin="${page.startPage}" end="${page.endPage}" var="num">
										<li class="page-item ${page.criteria.pageNum == num? 'active' :''}"><a class="page-link" href="${num}">${num}</a></li>
									</c:forEach>                
									<c:if test="${page.next}">            	
								    	<li class="page-item"><a class="page-link" href="${page.endPage + 1}">Next</a></li>
                            		</c:if>
                            	</ul>
                            </div>
                            <form id="actionForm" action="/board/list" method="get">
                            	<input type="hidden" name="pageNum" value="${page.criteria.pageNum}">
                            	<input type="hidden" name="amount" value="${page.criteria.amount}">
                            </form>
                            
                        </div>
                        <!-- /.panel-body -->
                    </div>
                    <!-- /.panel -->
                </div>
                <!-- /.col-lg-12 -->
            </div>

<div id="myModal" class="modal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p></p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" data-dismiss="modal">Save changes</button>
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

<script>
$(document).ready(function(){
	var result = '<c:out value="${result}"/>';
	
	
	checkModal(result);
	
	history.replaceState({},null,null); // 히스토리 클리어
	
	function checkModal(result){
		
		if(result ==='' || history.state){
			return;
		}
		
		if(result === 'success'){
			$('.modal-body').html("정상적으로 처리됨.");
		} else if(parseInt(result)>0){
			$('.modal-body').html("게시글 " + parseInt(result) + " 번이 등록됨.");
		}
		
		$("#myModal").modal("show");
	}
	
	$("#regBtn").click(function(){
		self.location = "/board/register";
	});
	
	var actionForm = $("#actionForm");
	
	$(".page-link").on("click", function(e){
		e.preventDefault(); // a태그는 기능은 이동 → 이동이 되지 않음(기본 동작 제어)
		
		console.log('click');
		
		//form 태그의 내용 변경 후 submit
		actionForm.find("input[name='pageNum']").val($(this).attr("href"));
		actionForm.submit();
		
	});
	
	$(".move").on("click", function(e){
		e.preventDefault();
		
		console.log($(this).attr("href"));
		
		actionForm.append("<input type='hidden' name='bno' value='"+$(this).attr("href")+"'>");
		actionForm.attr("action","/board/get").submit();
		
	});
	
	var searchForm = $("#searchForm");
	
	$("#searchForm button").on("click", function(e){
		e.preventDefault();
		console.log("클릭........");
		
		searchForm.find("input[name='pageNum']").val(1);
		
		searchForm.submit();
	});
	
});
</script>

<%@include file="../include/footer.jsp" %>

링크 처리

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@include file="../include/header.jsp" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
            <div class="row">
                <div class="col-lg-12">
                    <h1 class="page-header">Tables</h1>
                </div>
                <!-- /.col-lg-12 -->
            </div>
            <!-- /.row -->
            <div class="row">
                <div class="col-lg-12">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            DataTables Advanced Tables
                            <button id="regBtn" type="button" class="btn btn-xs pull-right">Register New Board</button>
                        </div>
                        <!-- /.panel-heading -->
                        <div class="panel-body">
                            <table width="100%" class="table table-striped table-bordered table-hover">
                                <thead>
                                    <tr>
                                        <th>#번호</th>
                                        <th>제목</th>
                                        <th>작성자</th>
                                        <th>작성일</th>
                                        <th>수정일</th>
                                    </tr>
                                </thead>
                                <tbody>
                                <c:forEach items="${list}" var="boardVO">
                                    <tr class="odd gradeX">
                                        <td><c:out value="${boardVO.bno}" /></td>
                                        <td><a class="move" href="<c:out value='${boardVO.bno}' />"><c:out value="${boardVO.title}" /></a></td>
                                        <td><c:out value="${boardVO.writer}" /></td>
                                        <td><fmt:formatDate value="${boardVO.regdate }" pattern="yyyy-MM-dd"/> </td>
                                        <td><fmt:formatDate value="${boardVO.updateDate }" pattern="yyyy-MM-dd" /></td>
                                    </tr>
                                </c:forEach>
                                </tbody>
                            </table>
                            <!-- /.table-responsive -->
                            
                            <form id="searchForm" action="/board/list" method="get">
                            	<select name="type">
                            		<option value="" ${page.criteria.type == null?"selected":"" }>---</option>
                            		<option value="T" ${page.criteria.type eq 'T'?"selected":"" }>제목</option>
                            		<option value="C" ${page.criteria.type eq 'C'?"selected":"" }>내용</option>
                            		<option value="W" ${page.criteria.type eq 'W'?"selected":"" }>작성자</option>
                            		<option value="TC" ${page.criteria.type eq 'TC'?"selected":"" }>제목+내용</option>
                            		<option value="TCW" ${page.criteria.type eq 'TCW'?"selected":"" }>제목+내용+작성자</option>
                            	</select>
                            	<input type="text" name="keyword" value="${page.criteria.keyword}">
                            	<input type="hidden" name="pageNum" value="${page.criteria.pageNum}">
                            	<input type="hidden" name="amount" value="${page.criteria.amount}">
                            	<button class="btn btn-default">Search</button>
                            </form>
                            
                            <div class="pull-right">
                            	<ul class="pagination">
                            		<c:if test="${page.prev}"> 
								    	<li class="page-item"><a class="page-link" href="${page.startPage - 1}" tabindex="-1">Previous</a></li>
									</c:if>
									<c:forEach begin="${page.startPage}" end="${page.endPage}" var="num">
										<li class="page-item ${page.criteria.pageNum == num? 'active' :''}"><a class="page-link" href="${num}">${num}</a></li>
									</c:forEach>                
									<c:if test="${page.next}">            	
								    	<li class="page-item"><a class="page-link" href="${page.endPage + 1}">Next</a></li>
                            		</c:if>
                            	</ul>
                            </div>
                            <form id="actionForm" action="/board/list" method="get">
                            	<input type="hidden" name="pageNum" value="${page.criteria.pageNum}">
                            	<input type="hidden" name="amount" value="${page.criteria.amount}">
                            	<input type="hidden" name="type" value="${page.criteria.type}">
                            	<input type="hidden" name="keyword" value="${page.criteria.keyword}">
                            </form>
                            
                        </div>
                        <!-- /.panel-body -->
                    </div>
                    <!-- /.panel -->
                </div>
                <!-- /.col-lg-12 -->
            </div>

<div id="myModal" class="modal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p></p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" data-dismiss="modal">Save changes</button>
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

<script>
$(document).ready(function(){
	var result = '<c:out value="${result}"/>';
	
	
	checkModal(result);
	
	history.replaceState({},null,null); // 히스토리 클리어
	
	function checkModal(result){
		
		if(result ==='' || history.state){
			return;
		}
		
		if(result === 'success'){
			$('.modal-body').html("정상적으로 처리됨.");
		} else if(parseInt(result)>0){
			$('.modal-body').html("게시글 " + parseInt(result) + " 번이 등록됨.");
		}
		
		$("#myModal").modal("show");
	}
	
	$("#regBtn").click(function(){
		self.location = "/board/register";
	});
	
	var actionForm = $("#actionForm");
	
	$(".page-link").on("click", function(e){
		e.preventDefault(); // a태그는 기능은 이동 → 이동이 되지 않음(기본 동작 제어)
		
		console.log('click');
		
		//form 태그의 내용 변경 후 submit
		actionForm.find("input[name='pageNum']").val($(this).attr("href"));
		actionForm.submit();
		
	});
	
	$(".move").on("click", function(e){
		e.preventDefault();
		
		console.log($(this).attr("href"));
		
		actionForm.append("<input type='hidden' name='bno' value='"+$(this).attr("href")+"'>");
		actionForm.attr("action","/board/get").submit();
		
	});
	
	var searchForm = $("#searchForm");
	
	$("#searchForm button").on("click", function(e){
		e.preventDefault();
		console.log("클릭........");
		
		searchForm.find("input[name='pageNum']").val(1);
		
		searchForm.submit();
	});
	
});
</script>

<%@include file="../include/footer.jsp" %>

 

기타 검색 처리

  • 검색 후 조회, 수정, 삭제 페이지 이동 시 검색 항목 유지
    RedirectAttribute에 검색 관련 내용을 추가하는 방식
    UriComponentsBuilder를 이용해서 Criteria에서 링크를 생성하는 방식

get.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@include file="../include/header.jsp" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
            <div class="row">
                <div class="col-lg-12">
                    <h1 class="page-header">Board Read</h1>
                </div>
                <!-- /.col-lg-12 -->
            </div>
            <!-- /.row -->
            <div class="row">
                <div class="col-lg-12">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            Board Read
                        </div>
                        <!-- /.panel-heading -->
                        <div class="panel-body">
								<div class="form-group">
									<label>BNO</label> <input name="title" class="form-control" readonly="readonly" value="<c:out value='${boardVO.bno}'/>">
								</div>
								<div class="form-group">
									<label>Title</label> <input name="title" class="form-control" readonly="readonly" value="<c:out value='${boardVO.title}'/>">
								</div>
								<div class="form-group">
									<label>Content</label> <textarea rows="5" cols="50" class="form-control" name="content"><c:out value='${boardVO.content}'/></textarea>
								</div>
								<div class="form-group">
									<label>Writer</label> <input name="writer" class="form-control" value="<c:out value='${boardVO.writer}'/>">
								</div>
	                            <form id="actionForm" action="/board/list" method="get">
	                            	<input type="hidden" name="pageNum" value="${criteria.pageNum}">
	                            	<input type="hidden" name="amount" value="${criteria.amount}">
	                            	<input type="hidden" name="bno" value="${boardVO.bno}">
	                            	<input type="hidden" name="type" value="${criteria.type}">
	                            	<input type="hidden" name="keyword" value="${criteria.keyword}">
                            	</form>
							 	<button type="button" class="btn btn-default listBtn"><a href="/board/list">List</a></button>
                                <button type="button" class="btn btn-default modiBtn"><a href="/board/modify?bno=<c:out value='${boardVO.bno }'/>">Modify</a></button>
								<script>
									
								var actionForm = $("#actionForm");
								
								$('.listBtn').click(function(e){
									e.preventDefault();
									actionForm.find("input[name='bno']").remove();
									actionForm.submit();
								});
								
								$('.modiBtn').click(function(e){
									e.preventDefault();
									actionForm.attr("action","/board/modify");
									actionForm.submit();
								});
								
								</script>

                        </div>
                        <!-- /.panel-body -->
                    </div>
                    <!-- /.panel -->
                </div>
                <!-- /.col-lg-12 -->
            </div>
<%@include file="../include/footer.jsp" %>

 

redirect하는 경우

BoardController

	@PostMapping("/modify")
	public String modify(BoardVO boardVO, RedirectAttributes redirectAttributes, Criteria criteria) {
		log.info("BoardController modify()......................");
		
		int count = boardService.modify(boardVO);
		
		if(count == 1) {
			redirectAttributes.addFlashAttribute("result", "success");
		}
		
		redirectAttributes.addAttribute("pageNum",criteria.getPageNum());
		redirectAttributes.addAttribute("amount",criteria.getAmount());
		redirectAttributes.addAttribute("type",criteria.getType());
		redirectAttributes.addAttribute("keyword",criteria.getKeyword());
		
		return "redirect:/board/list";
	}
	
	@PostMapping("/remove")
	public String remove(@RequestParam("bno") Long bno, RedirectAttributes redirectAttributes, Criteria criteria) {
		log.info("BoardController remove()......................");
		
		int count = boardService.remove(bno);
		
		if(count == 1) {
			redirectAttributes.addFlashAttribute("result", "success");
		}
		
		redirectAttributes.addAttribute("pageNum",criteria.getPageNum());
		redirectAttributes.addAttribute("amount",criteria.getAmount());
		redirectAttributes.addAttribute("type",criteria.getType());
		redirectAttributes.addAttribute("keyword",criteria.getKeyword());
		
		return "redirect:/board/list";
	}

 

728x90

'organize > 스프링' 카테고리의 다른 글

스프링 웹 프로젝트 14  (0) 2025.01.13
스프링 웹 프로젝트 13  (0) 2025.01.12
스프링 웹 프로젝트 12  (0) 2025.01.11
스프링 웹 프로젝트 11  (0) 2025.01.09
스프링 웹 프로젝트 10  (0) 2025.01.08

'organize/스프링'의 다른글

  • 현재글스프링 웹 프로젝트 15

관련글

티스토리툴바