[B -2-17] 화면 처리 3

조회 페이지 작성

 

views/board

get.jsp (register.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">Modify</button>
					<button data-oper='list' class="btn btn-info">List</button>
					
					<form id='operForm' action="/board/modify" method="get">
						<input type='hidden' id='bno' name='bno' value='<c:out value="${board.bno}"/>'>
					</form>
			</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"%>

 

게시글 번호를 보여줄 수 있는 필드를 추가하고, 모든 데이터는 readonly로 지정해서 작성한다.

폼 태그는 조회 페이지에서 필요없으므로 제거한다.

수정 버튼과 삭제 버튼을 추가하고, 해당하는 페이지로 이동하는 링크를 처리한다.

직접 링크를 처리하는 방식을 사용해서 처리하는 것보다는 나중에 다양한 상황을 처리하기위해 폼 태그를 이용해서 수정한다.

 

operForm 이라는 id를 가진 폼 태그를 추가해서 전송해야 하므로 추가적인 자바스크립트 처리를 한다.

사용자가 수정 버튼을 클릭 시 bno 값을 같이 전달하고 폼 태그를 submit 시켜서 처리한다.

 

만약 사용자가 list로 이동하는 경우에는 아무런 데이터도 필요하지 않으므로 폼 태그 내의 bno 태그를 지우고 submit을 통해 리스트 페이지로 이동한다.

 

---

조회 페이지 보기

 

 

---

목록에서 조회 페이지로의 이동

 

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}"/>&nbsp;/&nbsp;
									<c:out value="${board.writer}"/>&nbsp;/&nbsp;
									<fmt:formatDate value="${board.regdate}" pattern="yyyy-MM-dd"/>&nbsp;/&nbsp;
									<fmt:formatDate value="${board.updateDate}" pattern="yyyy-MM-dd"/>
								</font><br />
								<font size="3px">
									<a href="/board/get?bno=<c:out value="${board.bno}"/>"><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">&times;</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>

 

목록 페이지에서 각 게시글 제목에 <a> 태그를 적용해서 조회 페이지로 이동하게 처리한다.

---