글 등록 시 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">&times;</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 버튼 클릭 시 수정이 잘 되는지 확인!!(삭제도)