본 게시물은 아래 링크를 정리한 내용입니다.
1. boardMapper.xml에 코드 추가
<update id="update" parameterType="kr.co.vo.BoardVO">
UPDATE MP_BOARD
SET TITLE = #{title},
CONTENT = #{content}
WHERE BNO = #{bno}
</update>
<delete id="delete" parameterType="int">
DELETE
FROM MP_BOARD
WHERE BNO = #{bno}
</delete>
2. BoardDAO.java에 코드 추가
// 게시물 수정
public void update(BoardVO boardVO) throws Exception;
// 게시물 삭제
public void delete(int bno) throws Exception;
3. BoardDAOImpl.java에 코드 추가
// 게시물 수정
@Override
public void update(BoardVO boardVO) throws Exception {
sqlSession.update("boardMapper.update", boardVO);
}
// 게시물 삭제
@Override
public void delete(int bno) throws Exception {
sqlSession.delete("boardMapper.delete", bno);
}
4. BoardService.java에 코드 추가
// 게시물 수정
public void update(BoardVO boardVO) throws Exception;
// 게시물 삭제
public void delete(int bno) throws Exception;
5. BoardServiceImpl.java에 코드 추가
@Override
public void update(BoardVO boardVO) throws Exception {
dao.update(boardVO);
}
@Override
public void delete(int bno) throws Exception {
dao.delete(bno);
}
6. BoardController.java에 코드 추가
// 게시판 수정뷰
@RequestMapping(value = "/updateView", method = RequestMethod.GET)
public String updateView(BoardVO boardVO, Model model) throws Exception{
logger.info("updateView");
model.addAttribute("update", service.read(boardVO.getBno()));
return "board/updateView";
}
// 게시판 수정
@RequestMapping(value = "/update", method = RequestMethod.POST)
public String update(BoardVO boardVO) throws Exception{
logger.info("update");
service.update(boardVO);
return "redirect:/board/list";
}
// 게시판 삭제
@RequestMapping(value = "/delete", method = RequestMethod.POST)
public String delete(BoardVO boardVO) throws Exception{
logger.info("delete");
service.delete(boardVO.getBno());
return "redirect:/board/list";
}
7. readeView.jsp 에 코드 추가
1) 수정, 삭제 취소 버튼은 jquery로 제어할 것이기 때문에 head 안에 jqueryCDN을 추가한다.
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
2) <head> 아래 코드 추가
<script type="text/javascript">
$(document).ready(function(){
var formObj = $("form[name='readForm']");
// 수정
$(".update_btn").on("click", function(){
formObj.attr("action", "/board/updateView");
formObj.attr("method", "get");
formObj.submit();
})
// 삭제
$(".delete_btn").on("click", function(){
formObj.attr("action", "/board/delete");
formObj.attr("method", "post");
formObj.submit();
})
// 취소
$(".list_btn").on("click", function(){
location.href = "/board/list";
})
})
</script>
3) table 태그 밖에 코드 추가
<div>
<button type="submit" class="update_btn">수정</button>
<button type="submit" class="delete_btn">삭제</button>
<button type="submit" class="list_btn">목록</button>
</div>
4) <form> 변경
<form name="readForm" role="form" method="post">
<input type="hidden" id="bno" name="bno" value="${read.bno}" />
</form>
8. src/main/webapp/WEB-INF/views/board에 updateView.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 prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<html>
<head>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<title>게시판</title>
</head>
<script type="text/javascript">
$(document).ready(function(){
$(".cancel_btn").on("click", function(){
event.preventDefault();
location.href = "/board/list";
})
})
</script>
<body>
<div id="root">
<header>
<h1> 게시판</h1>
</header>
<hr />
<nav>
홈 - 글 작성
</nav>
<hr />
<section id="container">
<form name="updateForm" role="form" method="post" action="/board/update">
<input type="hidden" name="bno" value="${update.bno}" readonly="readonly"/>
<table>
<tbody>
<tr>
<td>
<label for="title">제목</label><input type="text" id="title" name="title" value="${update.title}"/>
</td>
</tr>
<tr>
<td>
<label for="content">내용</label><textarea id="content" name="content"><c:out value="${update.content}" /></textarea>
</td>
</tr>
<tr>
<td>
<label for="writer">작성자</label><input type="text" id="writer" name="writer" value="${update.writer}" readonly="readonly"/>
</td>
</tr>
<tr>
<td>
<label for="regdate">작성날짜</label>
<fmt:formatDate value="${update.regdate}" pattern="yyyy-MM-dd"/>
</td>
</tr>
</tbody>
</table>
<div>
<button type="submit" class="update_btn">저장</button>
<button type="submit" class="cancel_btn">취소</button>
</div>
</form>
</section>
<hr />
</div>
</body>
</html>
9. 확인하기
1) 서버 실행 및 localhost:8080/board/list 접속
2) 수정버튼 클릭 후 데이터 수정
3) 아래와 같이 내용이 수정되어 있으면 끝.
'프로그래밍 > Spring' 카테고리의 다른 글
[게시판] 9. 페이징 구현 (0) | 2021.12.16 |
---|---|
[게시판] 8. 게시판 다듬기 및 벨리데이션 체크 (0) | 2021.12.16 |
[게시판] 6. 게시판 조회 기능 구현 (0) | 2021.12.12 |
[게시판] 5. 게시판 목록 기능 구현 (0) | 2021.12.11 |
Spring Framework (0) | 2021.12.11 |