[B -2-16] 화면 처리 2
2019. 10. 2. 16:19ㆍProject B (SPMS)/Project B 파트2
반응형
게시글 등록 결과 모달 다이얼로그 오픈
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">게시글 목록 페이지</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><c:out value="${board.title}"></c:out> </a>
</font>
</td>
</tr>
</c:forEach>
</tbody>
</table>
<!-- 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";
});
});
</script>모달창은 기본적으로 <div>를 화면에 특정위치에 보여주고 배경이 되는 <div> 배경색을 입혀서 처리한다.
모달창은 활성화된 <div>를 선택하지않고는 다시 원래 화면을 볼 수 없도록 막기때문에 메세지를 표시하는데 효과적인 방식이다.
모달창에 대한 코드는 다운로드한 SBAdmin2의 pages폴더 내 notifications.html 파일을 참고하면 된다.
<table> 태그의 아래쪽에 모달창 태그를 추가한다.
모달창 표시 작업은 jQuery를 이용해서 list.jsp의 하단 부분에 처리한다.
checkModal()
파라미터에 따라 모달창을 보여주거나 내용을 수정한 뒤 보이게 작성한다.
새로운 게시글이 작성되는 경우 RedirectAttributes로 게시물의 번호가 전송되므로 이를 이용해서 모달창의 내용을 수정한다.
'/board/register' 를 이용해서 새로운 게시물을 작성하고나면 자동으로 '/board/list' 로 이동하면서 모달창이 보이게 된다.
게시글 목록에서 버튼으로 게시글 등록 페이지로 이동
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><c:out value="${board.title}"></c:out> </a>
</font>
</td>
</tr>
</c:forEach>
</tbody>
</table>
<!-- 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";
});
});
</script>테이블 상단 부분에 게시글 등록 버튼 생성
<div class="panel-heading">게시글 목록 페이지<button id='regBtn' type="button" class="btn btn-xs pull-right btn-primary">게시글 등록</button></div>이 버튼을 클릭하면 게시글의 등록 페이지로 이동한다.
반응형
'Project B (SPMS) > Project B 파트2' 카테고리의 다른 글
| [B -2-18] 화면 처리 4 (0) | 2019.10.02 |
|---|---|
| [B -2-17] 화면 처리 3 (0) | 2019.10.02 |
| [B -2-15] 화면 처리 1 (0) | 2019.10.02 |
| [B -2-14] 기본 화면 처리 2 (0) | 2019.09.30 |
| [B -2-13] 기본 화면 처리 1 (0) | 2019.09.30 |