list.jsp 페이지에 링크가 걸리도록 수정하자.
<tr>
<td><c:out value="${board.bno}" /></td>
<td>
<a href='/board/get?bno=<c:out value="${board.bno }"/>'>
<c:out value="${board.title}" />
</a>
</td>
<td><c:out value="${board.writer}" /></td>
<td><fmt:formatDate pattern="yyyy-MM-dd" value="${board.regdate }" /></td>
<td><fmt:formatDate pattern="yyyy-MM-dd" value="${board.updateDate }"/></td>
</tr>조회 페이지를 새 창으로 보고 싶다면 a태그의 속성으로 target='_blank'를 지정한다.
뒤로 가기 문제
등록 - 목록 - 조회에서 뒤로 가기를 선택하면 다시 등록 결과를 확인하는 모달 창이 나오는 문제.
그런데 나는 이 문제가 안 나타난다...
일단 넘어가기로 한다.
게시물의 수정/삭제 처리
BoardController.java
기존의 get메서드를 약간 수정한다. GetMapping이나 PostMapping은 URL을 다음과 같이 배열로 처리할 수 있다.
@GetMapping({"/get", "/modify"})
public void get(@RequestParam("bno") Long bno, Model model) {
log.info("/get or modify");
model.addAttribute("board", service.get(bno));
}
modify.jsp 를 작성한다. get.jsp를 복사해 내용을 수정한다.
폼 태그로 폼 그룹을 감싸고, 수정이 필요한 곳은 readonly 속성을 제거한다.
삭제 버튼을 추가한다.
<%@ 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">Board Modify</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 Modify Page</div>
<!-- /.panel-heading -->
<div class="panel-body">
<form role="form" action="/board/modify" method="post">
<div class="form-group">
<label>Bno</label> <input class="form-control" name="bno" value='<c:out value="${board.bno }"/>' readonly="readonly">
</div>
<div class="form-group">
<label>Title</label> <input class="form-control" name="title" value='<c:out value="${board.title }"/>'>
</div>
<div class="form-group">
<label>Text area</label> <textarea class="form-control" rows="3" name="content"><c:out value="${board.content }"/></textarea>
</div>
<div class="form-group">
<label>Writer</label> <input class="form-control" name="writer" value='<c:out value="${board.writer }"/>' readonly="readonly">
</div>
<div class="form-group">
<label>RegDate</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>Update Date</label>
<input class="form-control"
name="updateDate"
value='<fmt:formatDate pattern = "yyyy/MM/dd"
value = "${board.updateDate }"/>'
readonly="readonly" >
</div>
<button type="submit" data-oper="modify" class="btn btn-default" onclick="location.href='/board/modify?bno=<c:out value="${board.bno }"/>'">Modify</button>
<button type="submit" data-oper='remove' class="btn btn-danger">Remove</button>
<button type="submit" data-oper="list" class="btn btn-info" onclick="location.href='/board/list'">List</button>
</form>
</div>
<!-- end panel-body -->
</div>
<!-- end panel-body -->
</div>
<!-- end panel -->
</div>
<!-- /.row -->
<%@include file="../includes/footer.jsp"%>스크립트를 수정해 버튼별로 동작할 수 있도록 한다.
<script type="text/javascript">
$(document).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
self.location="/board/list";
return;
}
formObj.submit();
});
});
</script>조회 페이지에서 <form> 처리
앞서 링크를 이용하도록 처리했지만, 다양한 상황을 위해서 폼 태그를 이용해 처리하는 코드로 변경하도록 하자.
<!-- 생략 -->
<button data-oper="modify" class="btn btn-default" onclick="location.href='/board/modify?bno=<c:out value="${board.bno }"/>'">Modify</button>
<button data-oper="list" class="btn btn-info" onclick="location.href='/board/list'">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>
<!-- end panel-body -->
</div>
<!-- end panel-body -->
</div>
<!-- end panel -->
</div>
<!-- /.row -->
<%@include file="../includes/footer.jsp"%>사용자가 버튼을 클릭하면 operForm이라는 id를 가진 폼 태그를 전송하기 위해 자바스크립트 처리를 추가적으로 하자.
<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>수정 페이지 링크 처리
modify.jsp에 스크립트를 추가한다.
<script type="text/javascript">
$(document).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");
formObj.empty();
}
formObj.submit();
});
});
</script>