[B -2-25] 검색 처리 2
2019. 10. 4. 09:35ㆍProject B (SPMS)/Project B 파트4
반응형
현재 검색처리 남아있는 문제점
- 예를 들어 3페이지를 보다가 검색을 하면 3페이지로 이동하는 문제
- 검색 후 페이지를 이동하면 검색조건이 사라지는 문제
- 검색 후 화면에서는 어떤 검색 조건과 키워드를 이용했는지 알 수 없는 문제
검색 버튼의 이벤트 처리
검색 버튼을 클릭하면 검색은 1페이지가 되게 수정
화면에 검색조건과 키워드가 보이게 처리하는 작업
views/board
list.jsp
...더보기
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ include file="../includes/header.jsp"%>
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">게시판 목록</h1>
</div>
<!-- /.col-lg-12 -->
</div>
<!-- /.row -->
<div class="row">
<div class="col-lg-12">
<div class="panel panel-default">
<div class="panel-heading">게시글 목록 페이지<button id='regBtn' type="button" class="btn btn-xs pull-right btn-primary">게시글 등록</button></div>
<!-- /.panel-heading -->
<div class="panel-body">
<table class="table table-striped table-bordered table-hover">
<tbody>
<c:forEach items="${list }" var="board">
<tr>
<td>
<font color="Gray">
<c:out value="${board.bno}"/> /
<c:out value="${board.writer}"/> /
<fmt:formatDate value="${board.regdate}" pattern="yyyy-MM-dd"/> /
<fmt:formatDate value="${board.updateDate}" pattern="yyyy-MM-dd"/>
</font><br />
<font size="3px">
<a class='move' href="<c:out value="${board.bno}"/>">
<c:out value="${board.title}"/>
</a>
</font>
</td>
</tr>
</c:forEach>
</tbody>
</table>
<!-- 검색 조건 처리 시작 -->
<div class='row'>
<div class="col-lg-12">
<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>
<option value="TC"
<c:out value="${pageMaker.cri.type eq 'TC'?'selected':''}"/>>제목
or 내용</option>
<option value="TW"
<c:out value="${pageMaker.cri.type eq 'TW'?'selected':''}"/>>제목
or 작성자</option>
<option value="TWC"
<c:out value="${pageMaker.cri.type eq 'TWC'?'selected':''}"/>>제목
or 내용 or 작성자</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'>Search</button>
</form>
</div>
</div>
<!-- 검색 조건 처리 끝 -->
<!-- 페이지네이션 시작 -->
<div class='pull-right'>
<ul class="pagination">
<!-- 이전 -->
<c:if test="${pageMaker.prev}">
<li class="paginate_button previous"><a
href="${pageMaker.startPage -1}">Previous</a></li>
</c:if>
<!-- 현재 -->
<c:forEach var="num" begin="${pageMaker.startPage}" end="${pageMaker.endPage}">
<li class='paginate_button ${pageMaker.cri.pageNum == num ? "active":""} '>
<a href="${num}">${num}</a>
</li>
</c:forEach>
<!-- 다음 -->
<c:if test="${pageMaker.next}">
<li class="paginate_button next"><a
href="${pageMaker.endPage +1 }">Next</a></li>
</c:if>
</ul>
</div>
<!-- 페이지네이션 끝 -->
<!-- 이전 현재 다음 버튼의 a 태그동작을 막기위한 폼 태그 -->
<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}'>
</form>
<!-- 폼 태그 종료 -->
<!-- Modal 추가 -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">게시글 처리 결과</h4>
</div>
<div class="modal-body">처리가 완료되었습니다.</div>
<div class="modal-footer">
<button type="button" class="btn btn-default"
data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.panel-body -->
</div>
<!-- /.panel -->
</div>
<!-- /.col-lg-12 -->
</div>
<!-- /.row -->
</div>
<!-- /#page-wrapper -->
<%@ include file="../includes/footer.jsp"%>
<script type="text/javascript">
$().ready(function() {
var result = '<c:out value="${result}"/>';
checkModal(result);
history.replaceState({}, null, null);
function checkModal(result) {
if (result === '' || history.state) {
return;
}
if (parseInt(result) > 0) {
$(".modal-body").html(
"게시글 " + parseInt(result) + " 번이 등록되었습니다."
);
}
$("#myModal").modal("show");
}
$("#regBtn").on("click", function() {
self.location = "/board/register";
});
var actionForm = $("#actionForm");
$(".paginate_button a").on("click", function(e) {
e.preventDefault();
console.log('click');
actionForm.find("input[name='pageNum']").val($(this).attr("href"));
actionForm.submit();
});
$(".move").on("click",function(e) {
e.preventDefault();
actionForm.append("<input type='hidden' name='bno' value='"
+ $(this).attr("href")
+ "'>");
actionForm.attr("action","/board/get");
actionForm.submit();
});
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;
}
searchForm.find("input[name='pageNum']").val("1");
e.preventDefault();
searchForm.submit();
});
/* 검색 버튼의 이벤트 처리 종료 */
});
</script>
브라우저에서 검색 버튼을 클릭하면 폼 태그의 전송은 막고, 페이지 번호는 1이 되도록 처리한다.
화면에서 키워드가 없으면 검색하지 않도록 제어한다.
검색 조건과 키워드 보여주는 부분 수정
검색 후에는 주소창에 검색 조건과 키워드가 같이 GET 방식으로 처리되므로 이를 이용해서 select 태그나 input 태그의 내용을 수정한다.
views/board
list.jsp
...더보기
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ include file="../includes/header.jsp"%>
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">게시판 목록</h1>
</div>
<!-- /.col-lg-12 -->
</div>
<!-- /.row -->
<div class="row">
<div class="col-lg-12">
<div class="panel panel-default">
<div class="panel-heading">게시글 목록 페이지<button id='regBtn' type="button" class="btn btn-xs pull-right btn-primary">게시글 등록</button></div>
<!-- /.panel-heading -->
<div class="panel-body">
<table class="table table-striped table-bordered table-hover">
<tbody>
<c:forEach items="${list }" var="board">
<tr>
<td>
<font color="Gray">
<c:out value="${board.bno}"/> /
<c:out value="${board.writer}"/> /
<fmt:formatDate value="${board.regdate}" pattern="yyyy-MM-dd"/> /
<fmt:formatDate value="${board.updateDate}" pattern="yyyy-MM-dd"/>
</font><br />
<font size="3px">
<a class='move' href="<c:out value="${board.bno}"/>">
<c:out value="${board.title}"/>
</a>
</font>
</td>
</tr>
</c:forEach>
</tbody>
</table>
<!-- 검색 조건 처리 시작 -->
<div class='row'>
<div class="col-lg-12">
<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>
<option value="TC"
<c:out value="${pageMaker.cri.type eq 'TC'?'selected':''}"/>>제목
or 내용</option>
<option value="TW"
<c:out value="${pageMaker.cri.type eq 'TW'?'selected':''}"/>>제목
or 작성자</option>
<option value="TWC"
<c:out value="${pageMaker.cri.type eq 'TWC'?'selected':''}"/>>제목
or 내용 or 작성자</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'>Search</button>
</form>
</div>
</div>
<!-- 검색 조건 처리 끝 -->
<!-- 페이지네이션 시작 -->
<div class='pull-right'>
<ul class="pagination">
<!-- 이전 -->
<c:if test="${pageMaker.prev}">
<li class="paginate_button previous"><a
href="${pageMaker.startPage -1}">Previous</a></li>
</c:if>
<!-- 현재 -->
<c:forEach var="num" begin="${pageMaker.startPage}" end="${pageMaker.endPage}">
<li class='paginate_button ${pageMaker.cri.pageNum == num ? "active":""} '>
<a href="${num}">${num}</a>
</li>
</c:forEach>
<!-- 다음 -->
<c:if test="${pageMaker.next}">
<li class="paginate_button next"><a
href="${pageMaker.endPage +1 }">Next</a></li>
</c:if>
</ul>
</div>
<!-- 페이지네이션 끝 -->
<!-- 이전 현재 다음 버튼의 a 태그동작을 막기위한 폼 태그 -->
<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}'>
</form>
<!-- 폼 태그 종료 -->
<!-- Modal 추가 -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">게시글 처리 결과</h4>
</div>
<div class="modal-body">처리가 완료되었습니다.</div>
<div class="modal-footer">
<button type="button" class="btn btn-default"
data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.panel-body -->
</div>
<!-- /.panel -->
</div>
<!-- /.col-lg-12 -->
</div>
<!-- /.row -->
</div>
<!-- /#page-wrapper -->
<%@ include file="../includes/footer.jsp"%>
<script type="text/javascript">
$().ready(function() {
var result = '<c:out value="${result}"/>';
checkModal(result);
history.replaceState({}, null, null);
function checkModal(result) {
if (result === '' || history.state) {
return;
}
if (parseInt(result) > 0) {
$(".modal-body").html(
"게시글 " + parseInt(result) + " 번이 등록되었습니다."
);
}
$("#myModal").modal("show");
}
$("#regBtn").on("click", function() {
self.location = "/board/register";
});
var actionForm = $("#actionForm");
$(".paginate_button a").on("click", function(e) {
e.preventDefault();
console.log('click');
actionForm.find("input[name='pageNum']").val($(this).attr("href"));
actionForm.submit();
});
$(".move").on("click",function(e) {
e.preventDefault();
actionForm.append("<input type='hidden' name='bno' value='"
+ $(this).attr("href")
+ "'>");
actionForm.attr("action","/board/get");
actionForm.submit();
});
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;
}
searchForm.find("input[name='pageNum']").val("1");
e.preventDefault();
searchForm.submit();
});
/* 검색 버튼의 이벤트 처리 종료 */
});
</script>select 태그의 내부는 삼항 연산자를 이용해서 해당 조건으로 검색됐다면, selected 라는 문자열을 출력하게 해서 선택된 항목으로 보이도록 합니다.
페이지 번호 클릭 시에도 검색조건과 키워드는 유지
views/board
list.jsp
...더보기
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ include file="../includes/header.jsp"%>
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">게시판 목록</h1>
</div>
<!-- /.col-lg-12 -->
</div>
<!-- /.row -->
<div class="row">
<div class="col-lg-12">
<div class="panel panel-default">
<div class="panel-heading">게시글 목록 페이지<button id='regBtn' type="button" class="btn btn-xs pull-right btn-primary">게시글 등록</button></div>
<!-- /.panel-heading -->
<div class="panel-body">
<table class="table table-striped table-bordered table-hover">
<tbody>
<c:forEach items="${list }" var="board">
<tr>
<td>
<font color="Gray">
<c:out value="${board.bno}"/> /
<c:out value="${board.writer}"/> /
<fmt:formatDate value="${board.regdate}" pattern="yyyy-MM-dd"/> /
<fmt:formatDate value="${board.updateDate}" pattern="yyyy-MM-dd"/>
</font><br />
<font size="3px">
<a class='move' href="<c:out value="${board.bno}"/>">
<c:out value="${board.title}"/>
</a>
</font>
</td>
</tr>
</c:forEach>
</tbody>
</table>
<!-- 검색 조건 처리 시작 -->
<div class='row'>
<div class="col-lg-12">
<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>
<option value="TC"
<c:out value="${pageMaker.cri.type eq 'TC'?'selected':''}"/>>제목
or 내용</option>
<option value="TW"
<c:out value="${pageMaker.cri.type eq 'TW'?'selected':''}"/>>제목
or 작성자</option>
<option value="TWC"
<c:out value="${pageMaker.cri.type eq 'TWC'?'selected':''}"/>>제목
or 내용 or 작성자</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'>Search</button>
</form>
</div>
</div>
<!-- 검색 조건 처리 끝 -->
<!-- 페이지네이션 시작 -->
<div class='pull-right'>
<ul class="pagination">
<!-- 이전 -->
<c:if test="${pageMaker.prev}">
<li class="paginate_button previous"><a
href="${pageMaker.startPage -1}">Previous</a></li>
</c:if>
<!-- 현재 -->
<c:forEach var="num" begin="${pageMaker.startPage}" end="${pageMaker.endPage}">
<li class='paginate_button ${pageMaker.cri.pageNum == num ? "active":""} '>
<a href="${num}">${num}</a>
</li>
</c:forEach>
<!-- 다음 -->
<c:if test="${pageMaker.next}">
<li class="paginate_button next"><a
href="${pageMaker.endPage +1 }">Next</a></li>
</c:if>
</ul>
</div>
<!-- 페이지네이션 끝 -->
<!-- 이전 현재 다음 버튼의 a 태그동작을 막기위한 액션 폼 태그 -->
<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>
<!-- 폼 태그 종료 -->
<!-- Modal 추가 -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">게시글 처리 결과</h4>
</div>
<div class="modal-body">처리가 완료되었습니다.</div>
<div class="modal-footer">
<button type="button" class="btn btn-default"
data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.panel-body -->
</div>
<!-- /.panel -->
</div>
<!-- /.col-lg-12 -->
</div>
<!-- /.row -->
</div>
<!-- /#page-wrapper -->
<%@ include file="../includes/footer.jsp"%>
<script type="text/javascript">
$().ready(function() {
var result = '<c:out value="${result}"/>';
checkModal(result);
history.replaceState({}, null, null);
function checkModal(result) {
if (result === '' || history.state) {
return;
}
if (parseInt(result) > 0) {
$(".modal-body").html(
"게시글 " + parseInt(result) + " 번이 등록되었습니다."
);
}
$("#myModal").modal("show");
}
$("#regBtn").on("click", function() {
self.location = "/board/register";
});
var actionForm = $("#actionForm");
$(".paginate_button a").on("click", function(e) {
e.preventDefault();
console.log('click');
actionForm.find("input[name='pageNum']").val($(this).attr("href"));
actionForm.submit();
});
$(".move").on("click",function(e) {
e.preventDefault();
actionForm.append("<input type='hidden' name='bno' value='"
+ $(this).attr("href")
+ "'>");
actionForm.attr("action","/board/get");
actionForm.submit();
});
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;
}
searchForm.find("input[name='pageNum']").val("1");
e.preventDefault();
searchForm.submit();
});
/* 검색 버튼의 이벤트 처리 종료 */
});
</script>
액션 폼 태그 수정
검색 조건과 키워드에 대한 처리가 되면, 검색 후 페이지를 이동해서 동일한 검색 사항들이 계속 유지되는 것을 볼 수 있다.
검색 이후에 페이지를 이동해서 동일한 검색 조건과 키워드가 유지되어야 한다.
조회 페이지에서 검색 처리
views/board
get.jsp
...더보기
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ include file="../includes/header.jsp"%>
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">게시판 조회</h1>
</div>
<!-- /.col-lg-12 -->
</div>
<!-- /.row -->
<div class="row">
<div class="col-lg-12">
<div class="panel panel-default">
<div class="panel-heading">게시글 조회 페이지</div>
<!-- /.panel-heading -->
<div class="panel-body">
<div class="form-group">
<label>글 번호</label>
<input class="form-control" name="bno" value='<c:out value="${board.bno }"/>' readonly="readonly">
</div>
<div class="form-group">
<label>작성자</label>
<input class="form-control" name="writer" value='<c:out value="${board.writer }"/>' readonly="readonly">
</div>
<div class="form-group">
<label>제목</label>
<input class="form-control" name="title" value='<c:out value="${board.title }"/>' readonly="readonly">
</div>
<div class="form-group">
<label>내용</label>
<textarea class="form-control" rows="10" name="content" readonly="readonly"><c:out value="${board.content}"/></textarea>
</div>
<button data-oper='modify' class="btn btn-default">수정</button>
<button data-oper='list' class="btn btn-info">목록</button>
<!-- operForm 시작 -->
<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}"/>'>
<!-- Criteria의 키워드와 타입에 대한 처리 시작 -->
<input type='hidden' name='keyword' value='<c:out value="${cri.keyword}"/>'>
<input type='hidden' name='type' value='<c:out value="${cri.type}"/>'>
<!-- Criteria의 키워드와 타입에 대한 처리 종료 -->
</form>
<!-- operForm 종료 -->
</div>
<!-- /.panel-body -->
</div>
<!-- /.panel -->
</div>
<!-- /.col-lg-12 -->
</div>
<!-- /.row -->
</div>
<script type="text/javascript">
$(document).ready(function() {
var operForm = $("#operForm");
$("button[data-oper='modify']").on("click", function(e){
operForm.attr("action","/board/modify").submit();
});
$("button[data-oper='list']").on("click", function(e){
operForm.find("#bno").remove();
operForm.attr("action","/board/list")
operForm.submit();
});
});
</script>
<!-- /#page-wrapper -->
<%@ include file="../includes/footer.jsp"%>
Criteria의 타입과 키워드에 대한 처리
폼 태그 내에 hidden input 값을 추가한다.
수정/삭제 페이지에서 검색 처리
views/board
modify.jsp
...더보기
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ include file="../includes/header.jsp"%>
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">게시판 수정</h1>
</div>
<!-- /.col-lg-12 -->
</div>
<!-- /.row -->
<div class="row">
<div class="col-lg-12">
<div class="panel panel-default">
<div class="panel-heading">게시글 수정 페이지</div>
<!-- /.panel-heading -->
<div class="panel-body">
<form role="form" action="/board/modify" method="post">
<!-- 히든 파라미터 기능 시작 -->
<input type="hidden" name="pageNum" value='<c:out value="${cri.pageNum}"/>'>
<input type="hidden" name="amount" value='<c:out value="${cri.amount}"/>'>
<!-- 히든 파라미터 기능 종료 -->
<!-- Criteria의 키워드와 타입에 대한 처리 시작 -->
<input type='hidden' name='keyword' value='<c:out value="${cri.keyword}"/>'>
<input type='hidden' name='type' value='<c:out value="${cri.type}"/>'>
<!-- Criteria의 키워드와 타입에 대한 처리 종료 -->
<div class="form-group">
<label>글 번호</label>
<input class="form-control" name="bno" value='<c:out value="${board.bno }"/>' readonly="readonly">
</div>
<div class="form-group">
<label>등록일자</label>
<input class="form-control" name='regDate'
value='<fmt:formatDate pattern = "yyyy/MM/dd" value = "${board.regdate}" />' readonly="readonly">
</div>
<div class="form-group">
<label>수정일자</label>
<input class="form-control" name='updateDate'
value='<fmt:formatDate pattern = "yyyy/MM/dd" value = "${board.updateDate}" />' readonly="readonly">
</div>
<div class="form-group">
<label>작성자</label>
<input class="form-control" name="writer" value='<c:out value="${board.writer }"/>' readonly="readonly">
</div>
<div class="form-group">
<label>제목</label>
<input class="form-control" name="title" value='<c:out value="${board.title }"/>'>
</div>
<div class="form-group">
<label>내용</label>
<textarea class="form-control" rows="10" name="content"><c:out value="${board.content}"/></textarea>
</div>
<button type="submit" data-oper='modify' class="btn btn-default">수정</button>
<button type="submit" data-oper='remove' class="btn btn-danger">삭제</button>
<button type="submit" data-oper='list' class="btn btn-info">목록</button>
</form>
</div>
<!-- /.panel-body -->
</div>
<!-- /.panel -->
</div>
<!-- /.col-lg-12 -->
</div>
<!-- /.row -->
</div>
<script type="text/javascript">
$().ready(function() {
var formObj = $("form");
$('button').on("click", function(e){
e.preventDefault();
var operation = $(this).data("oper");
console.log(operation);
if(operation === 'remove'){
formObj.attr("action", "/board/remove");
}else if(operation === 'list'){
//move to list
formObj.attr("action", "/board/list").attr("method","get");
var pageNumTag = $("input[name='pageNum']").clone();
var amountTag = $("input[name='amount']").clone();
formObj.empty();
formObj.append(pageNumTag);
formObj.append(amountTag);
}
formObj.submit();
});
});
</script>
<!-- /#page-wrapper -->
<%@ include file="../includes/footer.jsp"%>
조회 페이지에서 수정 / 삭제 페이지로의 이동은 GET 방식을 통해 이동하고, 이동 방식 역시 폼 태그를 이용하는 방식으로
기존의 폼 태그에 추가적인 타입과 키워드 조건만을 추가한다.
수정 / 삭제 처리 후 리다이렉트 방식에 타입과 키워드 추가
src/main/java
com.spms.controller
BoardController.java
...더보기
package com.spms.controller;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.servlet.mvc.support.RedirectAttributes;
import com.spms.domain.BoardVO;
import com.spms.domain.Criteria;
import com.spms.domain.PageDTO;
import com.spms.service.BoardService;
import lombok.AllArgsConstructor;
import lombok.extern.log4j.Log4j;
@Controller
@Log4j
@RequestMapping("/board/*")
@AllArgsConstructor
public class BoardController {
private BoardService boardService;
@GetMapping("/list")
public void list(Criteria cri, Model model) {
log.info("list" + cri);
boardService.getList(cri).forEach(board -> log.info(board));
model.addAttribute("list", boardService.getList(cri));
int total = boardService.getTotal(cri);
log.info("total : " + total);
model.addAttribute("pageMaker", new PageDTO(cri, total));
}
@GetMapping("/register")
public void register() {
}
@PostMapping("/register")
public String register(BoardVO board, RedirectAttributes rttr) {
log.info("register : " + board);
boardService.register(board);
rttr.addFlashAttribute("result", board.getBno());
return "redirect:/board/list";
}
@GetMapping({ "/get", "/modify" })
public void get(@RequestParam("bno") Long bno, @ModelAttribute("cri") Criteria cri, Model model) {
log.info("/get or modify");
model.addAttribute("board", boardService.get(bno));
}
@PostMapping("/modify")
public String modify(BoardVO board, @ModelAttribute("cri") Criteria cri, RedirectAttributes rttr) {
log.info("modify:" + board);
if (boardService.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("remove..." + bno);
if (boardService.remove(bno)) {
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";
}
}
리다이렉트는 GET 방식으로 이뤄지기때문에 추가적인 파라미터를 처리한다.
views/board
modify.jsp
...더보기
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ include file="../includes/header.jsp"%>
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">게시판 수정</h1>
</div>
<!-- /.col-lg-12 -->
</div>
<!-- /.row -->
<div class="row">
<div class="col-lg-12">
<div class="panel panel-default">
<div class="panel-heading">게시글 수정 페이지</div>
<!-- /.panel-heading -->
<div class="panel-body">
<form role="form" action="/board/modify" method="post">
<!-- 히든 파라미터 기능 시작 -->
<input type="hidden" name="pageNum" value='<c:out value="${cri.pageNum}"/>'>
<input type="hidden" name="amount" value='<c:out value="${cri.amount}"/>'>
<!-- 히든 파라미터 기능 종료 -->
<!-- Criteria의 키워드와 타입에 대한 처리 시작 -->
<input type='hidden' name='keyword' value='<c:out value="${cri.keyword}"/>'>
<input type='hidden' name='type' value='<c:out value="${cri.type}"/>'>
<!-- Criteria의 키워드와 타입에 대한 처리 종료 -->
<div class="form-group">
<label>글 번호</label>
<input class="form-control" name="bno" value='<c:out value="${board.bno }"/>' readonly="readonly">
</div>
<div class="form-group">
<label>등록일자</label>
<input class="form-control" name='regDate'
value='<fmt:formatDate pattern = "yyyy/MM/dd" value = "${board.regdate}" />' readonly="readonly">
</div>
<div class="form-group">
<label>수정일자</label>
<input class="form-control" name='updateDate'
value='<fmt:formatDate pattern = "yyyy/MM/dd" value = "${board.updateDate}" />' readonly="readonly">
</div>
<div class="form-group">
<label>작성자</label>
<input class="form-control" name="writer" value='<c:out value="${board.writer }"/>' readonly="readonly">
</div>
<div class="form-group">
<label>제목</label>
<input class="form-control" name="title" value='<c:out value="${board.title }"/>'>
</div>
<div class="form-group">
<label>내용</label>
<textarea class="form-control" rows="10" name="content"><c:out value="${board.content}"/></textarea>
</div>
<button type="submit" data-oper='modify' class="btn btn-default">수정</button>
<button type="submit" data-oper='remove' class="btn btn-danger">삭제</button>
<button type="submit" data-oper='list' class="btn btn-info">목록</button>
</form>
</div>
<!-- /.panel-body -->
</div>
<!-- /.panel -->
</div>
<!-- /.col-lg-12 -->
</div>
<!-- /.row -->
</div>
<script type="text/javascript">
$().ready(function() {
var formObj = $("form");
$('button').on("click", function(e){
e.preventDefault();
var operation = $(this).data("oper");
console.log(operation);
if(operation === 'remove'){
formObj.attr("action", "/board/remove");
}else if(operation === 'list'){
//move to list
formObj.attr("action", "/board/list").attr("method","get");
var pageNumTag = $("input[name='pageNum']").clone();
var amountTag = $("input[name='amount']").clone();
// 키워드와 타입 추가
var keywordTag = $("input[name='keyword']").clone();
var typeTag = $("input[name='type']").clone();
formObj.empty();
formObj.append(pageNumTag);
formObj.append(amountTag);
formObj.append(keywordTag);
formObj.append(typeTag);
}
formObj.submit();
});
});
</script>
<!-- /#page-wrapper -->
<%@ include file="../includes/footer.jsp"%>다시 목록으로 이동하는 경우에 필요한 파라미터만 전송하기 위해 폼 태그의 모든 내용을 지우고 다시 추가하는 방식을 이용했으므로 키워드와 타입 역시 자바스크립트 코드를 추가해야 한다.
반응형
'Project B (SPMS) > Project B 파트4' 카테고리의 다른 글
| [B -2-26] 검색 처리 3 (0) | 2019.10.04 |
|---|---|
| [B -2-24] 검색 처리 1 (0) | 2019.10.03 |