글 등록 시 alert 대신 모달창으로 알려주기 위해
list.jsp 파일로 돌아와서 table 태그 하단에 모달창 코드 추가

<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">Modal title</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>
<!-- /.modal -->
list.jsp 파일 제일 하단에 모달창 보여주는 제이쿼리 추가

<script>
$(function() {
var result = '<c:out value="${result}"/>';
checkModal(result);
history.replaceState({}, null, null);
function checkModal(result) {
if (result === '') {
return;
}
if (parseInt(result) > 0) {
$(".modal-body").html("게시글 " + parseInt(result) + "번이 등록되었습니다.");
}
$("#myModal").modal("show");
}
});
</script>
목록페이지에서 등록페이지로 쉽게 이동하기 위해 버튼과 제이쿼리 추가

<button id="regBtn" type="button" class="btn btn-xs pull-right">Register New Board</button>

$("#regBtn").on("click", function() {
self.location = "${ctx}/board/register";
});
boardMapper.xml 파일로 가서 insert문 수정(bno값을 받아오기 위함)

<insert id="create" parameterType="com.hanul.springstudent.domain.BoardDTO">
INSERT INTO tbl_board (bno, title, content, writer)
VALUES (board_seq.nextval, #{title}, #{content}, #{writer})
<selectKey keyProperty="bno" resultType="Integer" order="AFTER">
SELECT board_seq.currval
FROM dual
</selectKey>
</insert>
그리고 글을 등록해보면 모달창이 뜸

register.jsp 파일 복사 후 붙여넣고 파일 이름 read.jsp로 변경

read 파일에서 10, 19번째줄 제목을 페이지에 맞게 변경하고
panel-body 태그 안의 요소들 수정

<div class="form-group">
<label>Bno</label>
<input class="form-control" name="bno" value="${board.bno }" readonly>
</div>
<div class="form-group">
<label>Title</label>
<input class="form-control" name="title" value="${board.title }" readonly>
</div>
<div class="form-group">
<label>Text area</label>
<textarea class="form-control" rows="3" name="content" style="resize: none" readonly>${board.content }</textarea>
</div>
<div class="form-group">
<label>Writer</label>
<input class="form-control" name="writer" value="${board.writer }" readonly>
</div>
<button data-oper="modify" class="btn btn-default">Modify</button>
<button data-oper="list" class="btn btn-default">List</button>
<form action="${ctx }/board/modify" method="get" id="operForm">
<input type="hidden" id="bno" name="bno" value="${board.bno }">
</form>
read.jsp 파일 하단에 제이쿼리 추가

<script>
$(function(){
var operForm = $("#operForm");
$("button[data-oper='modify']").on("click", function(e) {
operForm.attr("action", "${ctx }/board/modify").submit();
});
$("button[data-oper='list']").on("click", function() {
operForm.find("#bno").remove();
operForm.attr("action", "${ctx }/board/list");
operForm.submit();
});
});
</script>
http://localhost:9090/board/list 에 접속해서 목록을 하나 클릭하면 해당 글의 상세페이지로 잘 이동함

BoardController 파일로 와서 메소드 수정

// 상세 + 수정(다중맵핑)
@RequestMapping(value = {"/read", "/modify"}, method = RequestMethod.GET)
public void modifyGET(@RequestParam("bno") int bno, Model model) throws Exception {
log.info("read or modify..................");
model.addAttribute("board", service.read(bno));
}
read.jsp 파일 복사 후 붙여넣고 파일 이름 modify.jsp로 변경

10, 19번째줄 제목을 페이지에 맞게 변경하고
panel-body 태그 안의 요소들 수정

<form action="${ctx }/board/modify" method="post" role="form">
<div class="form-group">
<label>Bno</label>
<input class="form-control" name="bno" value="${board.bno }" readonly>
</div>
<div class="form-group">
<label>Title</label>
<input class="form-control" name="title" value="${board.title }">
</div>
<div class="form-group">
<label>Text area</label>
<textarea class="form-control" rows="3" name="content" style="resize: none">${board.content }</textarea>
</div>
<div class="form-group">
<label>Writer</label>
<input class="form-control" name="writer" value="${board.writer }" readonly>
</div>
<button type="submit" data-oper="modify" class="btn btn-default">Modify</button>
<button type="submit" data-oper="remove" class="btn btn-danger">Remove</button>
<button type="submit" data-oper="list" class="btn btn-info">List</button>
</form>
하단에 버튼 동작 제이쿼리 추가

<script>
$(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", "${ctx}/board/remove");
} else if(operation === 'list') {
self.location = "${ctx}/board/register";
return;
}
formObj.submit();
});
});
</script>
그리고 상세페이지 들어가서 수정 후 Modify 버튼 클릭 시 수정이 잘 되는지 확인!!(삭제도)

'Programming > Spring' 카테고리의 다른 글
[STS3] Mapper를 활용하여 게시판 구현(6) (2) | 2024.04.18 |
---|---|
[STS3] Mapper를 활용하여 게시판 구현(5) (0) | 2024.04.17 |
[STS3] Mapper를 활용하여 게시판 구현(3) (0) | 2024.04.16 |
[STS3] Mapper를 활용하여 게시판 구현(2) (1) | 2024.04.15 |
[STS3] Mapper를 활용하여 게시판 구현(1) (0) | 2024.04.15 |