1. CRUD URI
| method | uri | 설명 |
| GET | /board/list/{page} | 게시판 목록 조회 |
| POST | /board/write | 게시판 글 등록 |
| GET | /board/detail/{id} | 게시판 상세 보기 |
| POST | /board/detail/file | 파일 다운로드 |
| POST | /board/update/{id} | 게시판 글 수정 |
| DELETE | /board/delete/{id} | 게시판 글 삭제 |
| DELETE | /board/delete/file/{save_file_name} | 파일 삭제 |
| POST | /board/write/reply/{id} | 댓글 등록 |
| DELETE | /board/delete/reply/{reply_id} | 댓글 삭제 |
2. Controller 작성
restful하게 작성하였습니다.
2-1) 게시판 목록 조회
/** 게시판 목록 조회 */
@RequestMapping(value="/list/{page}", method=RequestMethod.GET)
@ResponseBody
public Map<String, Object> getBoardList(@PathVariable int page, HttpServletRequest request, HttpServletResponse response, PagingVO pagingVO) throws Exception {
Util util = new Util();
Paging pageMaker = new Paging();
pagingVO.setPage(page);
pageMaker.setPagingVO(pagingVO);
pageMaker.setTotalCount(boardService.getBoardCount());
List<Map<String,Object>> board = boardService.getBoardList(pagingVO);
Map<String, Object> data = new HashMap<String, Object>();
data.put("board", board);
data.put("total_count", pageMaker.getTotalCount());
data.put("prev", pageMaker.isPrev());
data.put("next", pageMaker.isNext());
data.put("start_page", pageMaker.getStartPage());
data.put("end_page", pageMaker.getEndPage());
data.put("page", pagingVO.getPage());
Map<String, Object> output = new HashMap<String, Object>();
output = util.successTrue("getBoardList success!", data);
return output;
}16번 라인 : 게시판 목록에 보여줄 데이터들(게시글 제목, 작성자, 작성일, 조회수)
17번 라인 : 총 게시물 수
18번-22번 라인 : 페이징 처리를 위한 번호
결과보기
페이지당 게시물 수를 10개로 했기 때문에 board 리스트에 데이터가 10개가 들어가 있습니다.
더보기
{
"data": {
"next": true,
"end_page": 5,
"start_page": 1,
"total_count": 60,
"prev": false,
"page": 1,
"board": [
{
"reg_date": "2020-01-15 12:38:01",
"del_flag": "N",
"hit": 10,
"mod_date": "2020-01-15 17:59:30",
"id": 60,
"writer": "writer_60",
"title": "title_60",
"content": "content_60"
},
{
"reg_date": "2020-01-15 12:38:01",
"del_flag": "N",
"hit": 0,
"mod_date": "2020-01-15 12:38:01",
"id": 59,
"writer": "writer_59",
"title": "title_59",
"content": "content_59"
},
{
"reg_date": "2020-01-15 12:38:01",
"del_flag": "N",
"hit": 0,
"mod_date": "2020-01-15 12:38:01",
"id": 58,
"writer": "writer_58",
"title": "title_58",
"content": "content_58"
},
{
"reg_date": "2020-01-15 12:38:01",
"del_flag": "N",
"hit": 0,
"mod_date": "2020-01-15 12:38:01",
"id": 57,
"writer": "writer_57",
"title": "title_57",
"content": "content_57"
},
{
"reg_date": "2020-01-15 12:38:01",
"del_flag": "N",
"hit": 0,
"mod_date": "2020-01-15 12:38:01",
"id": 56,
"writer": "writer_56",
"title": "title_56",
"content": "content_56"
},
{
"reg_date": "2020-01-15 12:38:01",
"del_flag": "N",
"hit": 0,
"mod_date": "2020-01-15 12:38:01",
"id": 55,
"writer": "writer_55",
"title": "title_55",
"content": "content_55"
},
{
"reg_date": "2020-01-15 12:38:01",
"del_flag": "N",
"hit": 0,
"mod_date": "2020-01-15 12:38:01",
"id": 54,
"writer": "writer_54",
"title": "title_54",
"content": "content_54"
},
{
"reg_date": "2020-01-15 12:38:01",
"del_flag": "N",
"hit": 0,
"mod_date": "2020-01-15 12:38:01",
"id": 53,
"writer": "writer_53",
"title": "title_53",
"content": "content_53"
},
{
"reg_date": "2020-01-15 12:38:01",
"del_flag": "N",
"hit": 0,
"mod_date": "2020-01-15 12:38:01",
"id": 52,
"writer": "writer_52",
"title": "title_52",
"content": "content_52"
},
{
"reg_date": "2020-01-15 12:38:01",
"del_flag": "N",
"hit": 0,
"mod_date": "2020-01-15 12:38:01",
"id": 51,
"writer": "writer_51",
"title": "title_51",
"content": "content_51"
}
]
},
"success": true,
"message": "getBoardList success!",
"error": null
}
2-2) 게시판 글 등록
/** 게시판 등록 */
@RequestMapping(value="/write", method=RequestMethod.POST)
@ResponseBody
public void insertBoard(MultipartHttpServletRequest request
, @RequestParam String title
, @RequestParam String writer
, @RequestParam String content) throws Exception {
BoardVO boardVO = new BoardVO();
boardVO.setTitle(title);
boardVO.setWriter(writer);
boardVO.setContent(content);
boardService.insertBoard(boardVO);
Upload upload = new Upload();
upload.uploadFile(boardService, request);
}게시글의 제목, 작성자, 내용, 그리고 첨부파일을 받아 게시판 글을 등록합니다.
(파일 첨부는 따로 포스팅하겠습니다.)
2-3) 게시판 글 상세보기
/** 게시판 상세 */
@RequestMapping(value="/detail/{id}", method=RequestMethod.GET)
@ResponseBody
public Map<String, Object> boardDetail(@PathVariable("id") int id, ReplyVO replyVO) throws Exception {
Util util = new Util();
BoardVO boardVO = new BoardVO();
boardVO.setId(id);
Map<String, Object> detail = boardService.getBoardDetail(boardVO);
List<Map<String,Object>> file = boardService.getFileList(boardVO);
List<Map<String,Object>> reply = replyService.getReplyList(boardVO);
Map<String, Object> data = new HashMap<String, Object>();
data.put("detail", detail);
data.put("file", file);
data.put("reply", reply);
Map<String, Object> output = new HashMap<String, Object>();
output = util.successTrue("getBoardList success!", data);
return output;
}결과보기
더보기
{
"data": {
"file": [
{
"save_file_name": "1579060044553_게시판테이블.txt",
"reg_date": 1579060044000,
"del_flag": "N",
"extension": ".txt",
"board_id": 60,
"mod_date": 1579060044000,
"id": 1,
"org_file_name": "게시판테이블.txt",
"file_size": 1465
}
],
"detail": {
"reg_date": "2020-01-15 12:38:01",
"del_flag": "N",
"hit": 12,
"mod_date": "2020-01-20 15:28:42",
"id": 60,
"writer": "writer_60",
"title": "title_60",
"content": "content_60"
},
"reply": [
{
"reg_date": "2020-01-15 12:47:49",
"reply_id": 1,
"reply_writer": "writer_01",
"board_id": 60,
"reply_content": "content_01"
},
{
"reg_date": "2020-01-15 12:47:59",
"reply_id": 2,
"reply_writer": "writer_02",
"board_id": 60,
"reply_content": "content_02"
},
{
"reg_date": "2020-01-15 12:48:50",
"reply_id": 3,
"reply_writer": "writer_03",
"board_id": 60,
"reply_content": "content_03"
}
]
},
"success": true,
"message": "getBoardList success!",
"error": null
}
2-4) 게시판 글 수정
/** 게시판 수정 */
@RequestMapping(value="/update/{id}", method=RequestMethod.POST)
@ResponseBody
public void boardUpdatePost(@PathVariable("id") int id
, @RequestParam String title
, @RequestParam String writer
, @RequestParam String content
, MultipartHttpServletRequest request) throws Exception {
BoardVO boardVO = new BoardVO();
boardVO.setId(id);
boardVO.setTitle(title);
boardVO.setWriter(writer);
boardVO.setContent(content);
boardService.updateBoard(boardVO);
Upload upload = new Upload();
upload.uploadFile(boardService, request);
}처음에 수정 메소드를 PUT으로 작성하였지만 @RequestParam 과 PUT메소드에 문제가 생겨 POST메소드로 변경했습니다.
참고자료 ->
2-5) 게시판 글 삭제
/** 게시판 삭제 */
@RequestMapping(value="/delete/{id}", method=RequestMethod.DELETE)
@ResponseBody
public Map<String, Object> boardDelete(@PathVariable int id) throws Exception {
Util util = new Util();
BoardVO boardVO = new BoardVO();
boardVO.setId(id);
boardService.deleteBoard(boardVO);
Map<String, Object> output = new HashMap<String, Object>();
output = util.successTrue("boardDelete success!", null);
return output;
}
3. Service 작성
DB 연동 이외의 부분 처리
@Inject
BoardDAO boardDAO;
@Override
public void insertBoard(BoardVO boardVO) throws Exception {
boardDAO.insertBoard(boardVO);
}
@Override
public List<Map<String, Object>> getBoardList(PagingVO pagingVO) throws Exception {
return boardDAO.getBoardList(pagingVO);
}
@Override
public Map<String, Object> getBoardDetail(BoardVO boardVO) throws Exception {
boardDAO.updateHit(boardVO);
return boardDAO.getBoardDetail(boardVO);
}
@Override
public void updateBoard(BoardVO boardVO) throws Exception {
boardDAO.updateBoard(boardVO);
}
@Override
public void deleteBoard(BoardVO boardVO) throws Exception {
boardDAO.deleteBoard(boardVO);
}
@Override
public int getBoardCount() throws Exception {
return boardDAO.getBoardCount();
}
@Override
public int getBoardId() throws Exception {
return boardDAO.getBoardId();
}
4. DAO 작성
@Inject
private SqlSession sqlSession;
private static String namespace = "com.seongim.mvc_board.mapper.BoardMapper";
@Override
public void insertBoard(BoardVO boardVO) throws Exception {
sqlSession.insert(namespace + ".insertBoard", boardVO);
}
@Override
public List<Map<String, Object>> getBoardList(PagingVO pagingVO) throws Exception {
return sqlSession.selectList(namespace + ".getBoardList", pagingVO);
}
@Override
public Map<String, Object> getBoardDetail(BoardVO boardVO) throws Exception {
return sqlSession.selectOne(namespace + ".getBoardDetail", boardVO);
}
@Override
public void updateBoard(BoardVO boardVO) throws Exception {
sqlSession.update(namespace + ".updateBoard", boardVO);
}
@Override
public void deleteBoard(BoardVO boardVO) throws Exception {
sqlSession.update(namespace + ".deleteBoard", boardVO);
}
@Override
public void updateHit(BoardVO boardVO) throws Exception {
sqlSession.update(namespace + ".updateHit", boardVO);
}
@Override
public int getBoardCount() throws Exception {
return sqlSession.selectOne(namespace + ".getBoardCount");
}
@Override
public int getBoardId() throws Exception {
return sqlSession.selectOne(namespace + ".getBoardId");
}
5. Mapper 작성
<mapper namespace="com.seongim.mvc_board.mapper.BoardMapper">
<insert id="insertBoard" parameterType="BoardVO">
INSERT INTO BOARD (
title,
content,
writer
) VALUES (
#{title},
#{content},
#{writer}
)
</insert>
<select id="getBoardList" resultType="hashmap">
SELECT
id,
title,
content,
writer,
hit,
CAST(DATE_FORMAT(reg_date, '%Y-%m-%d %H:%i:%s') AS CHAR(19) ) AS reg_date,
CAST(DATE_FORMAT(mod_date, '%Y-%m-%d %H:%i:%s') AS CHAR(19) ) AS mod_date,
del_flag
FROM
board
WHERE
del_flag = 'N'
ORDER BY id DESC
LIMIT #{pageStart}, #{perPageNum}
</select>
<select id="getBoardDetail" parameterType="BoardVO" resultType="hashmap">
<![CDATA[
SELECT
id,
title,
content,
writer,
hit,
CAST(DATE_FORMAT(reg_date, '%Y-%m-%d %H:%i:%s') AS CHAR(19) ) AS reg_date,
CAST(DATE_FORMAT(mod_date, '%Y-%m-%d %H:%i:%s') AS CHAR(19) ) AS mod_date,
del_flag
FROM
board
WHERE
del_flag = "N"
AND
id = #{id}
]]>
</select>
<update id="updateBoard" parameterType="BoardVO">
UPDATE
BOARD
SET
title = #{title},
content = #{content},
writer = #{writer}
WHERE
id = #{id}
</update>
<update id="deleteBoard" parameterType="BoardVO">
UPDATE
BOARD
SET
del_flag = "Y"
WHERE
id = #{id}
</update>
<update id="updateHit" parameterType="BoardVO">
UPDATE
board
SET
hit = hit + 1
WHERE
id = #{id}
</update>
<select id="getBoardCount" resultType="Integer">
<![CDATA[
SELECT
count(*)
FROM
BOARD
WHERE
del_flag = 'N'
]]>
</select>
<select id="getBoardId" resultType="Integer">
<![CDATA[
SELECT
count(*)
FROM
BOARD
]]>
</select>
</mapper>
6. 페이지 View 만들기
jquery를 사용해 ajax 통신이 가능하도록 작성하였습니다.
6-1) 게시판 목록 페이지
GET방식으로 2-1의 게시판 목록 데이터를 json형태의 data로 받아왔습니다.
더보기
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>게시판 목록</title>
<link rel="stylesheet" type="text/css" href="/css/commom/common.css"/>
<script type="text/javascript" src="http://code.jquery.com/jquery-3.4.1.js"></script>
<script>
$(document).ready(function() {
getBoardList();
});
function getBoardList() {
var page = getUrlVars().page;
if(!page) {
page=1;
}
$.ajax({
type : "GET",
url : "/board/list/"+page,
dataType : "json",
contentType : "application/json",
success : function(data) {
var str = "";
var total_count = data.data.total_count;
var page = data.data.page;
var prev = data.data.prev;
var next = data.data.next;
var start_page = data.data.start_page;
var end_page = data.data.end_page;
var board = data.data.board;
var idx = total_count - (page - 1) * 10;
$("#total_count").html(total_count);
if(total_count > 0) {
for(var i = 0; i < board.length; i++) {
var id = board[i].id;
var title = board[i].title;
var hit = board[i].hit;
var writer = board[i].writer;
var reg_date = board[i].reg_date;
str += "<tr>";
str += "<td>" + idx + "</td>";
str += "<td><a href='boardDetail.jsp?id=" + id + "'>" + title + "</a></td>";
str += "<td>" + hit + "</td>";
str += "<td>" + writer + "</td>";
str += "<td>" + reg_date + "</td>";
str += "</tr>";
idx -= 1;
}
} else {
str += "<tr>";
str += "<td colspan='5'> 등록된 글이 존재하지 않습니다. </td>";
str += "</tr>";
} //if~else
$("#tbody").html(str);
str = "";
str += "<ul style='display:inline;'>";
if(prev) {
str += "<li style='display:inline;'>";
str += "<a href='boardList.jsp?page=" + (start_page - 1) + "'><i>이전</i></a>";
str += "</li>";
}
for(var i = start_page; i <= end_page; i++) {
//page = i;
str += "<li style='display:inline;'>";
str += "<a href='boardList.jsp?page=" + i + "'><i>" + i + "</i></a>";
str += "</li>";
}
if(next && end_page > 0) {
str += "<li style='display:inline;'>";
str += "<a href='boardList.jsp?page=" + (end_page + 1) + "'><i>다음</i></a>";
str += "</li>";
}
$("#div_page").html(str);
},
error : function(err) {
alert("ERROR : " + err);
}
});
}
function getUrlVars() {
var vars = [], hash;
var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
for(var i = 0; i < hashes.length; i++) {
hash = hashes[i].split('=');
vars.push(hash[0]);
vars[hash[0]] = hash[1];
}
return vars;
}
</script>
</head>
<body>
<div id="wrap">
<div id="container">
<div class="inner">
<h1>게시판 목록</h1>
<form id="boardForm">
<input type="hidden" id="current_page" name="current_page" value="1" />
<div>
<span>전체 게시글 수 : <b><span id="total_count"></span></b>개</span>
</div>
<table width="100%" border="1">
<colgroup>
<col width="10%" />
<col width="25%" />
<col width="10%" />
<col width="15%" />
<col width="20%" />
</colgroup>
<thead>
<tr>
<th>글번호</th>
<th>제목</th>
<th>조회수</th>
<th>작성자</th>
<th>작성일</th>
</tr>
</thead>
<tbody id="tbody" style="text-align:center;">
</tbody>
</table>
</form>
<br>
<div style="float:right;">
<button type="button" onclick="location.href='boardWrite.jsp'">작성</button>
</div>
<br>
<div id="div_page" style="float:center; width:20%; margin:0 auto;">
</div>
</div>
</div>
</div>
</body>
</html>
6-2) 게시판 글 작성 페이지
formData로 title, writer, content, 그리고 files를 받아오고
POST방식으로 Controller를 호출하며 formData를 전송합니다.
46번 라인 : 성공 시 게시판 목록 페이지로 이동합니다.
더보기
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>게시판 목록</title>
<link rel="stylesheet" type="text/css" href="/css/commom/common.css"/>
<script type="text/javascript" src="http://code.jquery.com/jquery-3.4.1.js"></script>
<script>
function postBoard() {
if($("#title").val()) {
var title = $("#title").val();
} else {
alert("제목을 입력해주세요!");
return;
}
if($("#writer").val()) {
var writer = $("#writer").val();
} else {
alert("작성자를 입력해주세요!");
return;
}
if($("#content").val()) {
var content = $("#content").val();
} else {
alert("내용을 입력해주세요!");
return;
}
var formData = new FormData(document.getElementById("postForm"));
$.ajax({
type : "POST",
url : "/board/write",
enctype : "multipart/form-data",
processData : false,
contentType : false,
data : formData,
success : function() {
alert("게시글이 등록되었습니다.");
location.href="boardList.jsp";
},
error : function(err) {
alert("ERROR : " + err);
}
});
}
</script>
</head>
<body>
<div id="wrap">
<div id="container">
<div class="inner">
<h1>게시판 등록</h1>
<form method="post" name="postForm" id="postForm" enctype="multipart/form-data">
<input type="hidden" name="id" value="1" />
<table width="100%" border="1">
<colgroup>
<col width="40%" />
<col width="60%" />
</colgroup>
<tbody id="tbody" style="text-align:center;">
<tr>
<td>제목</td>
<td><input type="text" name="title" id="title" placeholder="제목을 입력하세요"></td>
</tr>
<tr>
<td>작성자</td>
<td><input type="text" name="writer" id="writer" placeholder="이름을 입력하세요"></td>
</tr>
<tr>
<td>내용</td>
<td><textarea type="text" name="content" id="content" rows="10"></textarea></td>
</tr>
<tr>
<td colspan="2">
다중 파일 추가<input type="file" name="files" id="files" multiple="multiple">
</td>
</tr>
</tbody>
</table>
<div style="float:right;">
<input type="button" onclick="postBoard();" value="등록하기">
<button type="button" onclick="location.href='boardList.jsp'">목록으로</button>
</div>
</form>
</div>
</div>
</div>
</body>
</html>
6-3) 게시판 글 상세보기 페이지
더보기
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>게시판 상세</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-3.4.1.js"></script>
<script>
$(document).ready(function() {
getBoardDetail();
});
function getBoardDetail() {
var id = getUrlVars().id;
$.ajax({
type : "GET",
url : "/board/detail/" + id,
dataType : "json",
contentType : "application/json",
success : function(data) {
var detail = data.data.detail;
var file = data.data.file;
var reply = data.data.reply;
$("#title").html(detail.title);
$("#hit").html(detail.hit);
$("#writer").html(detail.writer);
$("#reg_date").html(detail.reg_date);
$("#content").html(detail.content);
$("#update_href").prop("href", "boardUpdate.jsp?id=" + detail.id);
str = "";
if(file.length > 0) {
for(var i = 0; i < file.length; i++) {
var save_file_name = file[i].save_file_name;
var org_file_name = file[i].org_file_name;
str += "<form id='downForm' method='post' action='/board/detail/file'>";
str += "<input type='hidden' name='saveFileName' value='" + save_file_name + "'>";
str += "<input type='hidden' name='originFileName' value='" + org_file_name + "'>";
str += "<input type='submit' id='click' value='" + save_file_name + "'>";
str += "<br>"
str += "</form>";
}
} else {
str = "<p>업로드 파일이 없습니다.</p>";
}
$("#file").html(str);
str ="";
if(reply.length > 0) {
for(var i = 0; i < reply.length; i++) {
var reply_id = reply[i].reply_id;
var reply_writer = reply[i].reply_writer;
var reply_content = reply[i].reply_content;
var reg_date = reply[i].reg_date;
str += "<tr>";
str += "<td>" + reply_writer + "</td>";
str += "<td>" + reply_content + "</td>";
str += "<td>" + reg_date + "</td>";
str += "<form id='replyDelForm'> method='post'>";
str += "<td><input type='hidden' name='reply_id' value='" + reply_id + "'>";
str += "<button type='button' onclick='deleteReply(" + reply_id + ")';)>X</button></td>";
str += "</form>";
str += "</tr>";
} //for
} else {
str += "<tr><td colspan='4'>댓글이 없습니다.</td></tr>";
} //if~else
$("#reply").html(str);
},
error : function(err) {
alert("ERROR : " + err);
}
});
}
function getUrlVars() {
var vars = [], hash;
var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
for(var i = 0; i < hashes.length; i++) {
hash = hashes[i].split('=');
vars.push(hash[0]);
vars[hash[0]] = hash[1];
}
return vars;
}
function deleteBoard() {
var id = getUrlVars().id;
$.ajax({
type : "DELETE",
url : "/board/delete/" + id,
dataType : "json",
contentType : "application/json",
success : function(data) {
console.log("삭제완료");
alert("게시글이 삭제되었습니다");
location.href="boardList.jsp";
},
error : function(err) {
alert("ERROR : " + err);
}
});
}
function postReply() {
var formData = new FormData(document.getElementById("replyForm"));
console.log(formData.has('updateBoard'));
var id = getUrlVars().id;
$.ajax({
type : "POST",
url : "/board/write/reply/" + id,
data : formData,
dataType : "json",
contentType: false,
processData: false,
success : function(data) {
alert("댓글이 등록되었습니다");
location.href="boardDetail.jsp?id=" + id;
},
error : function(err) {
alert("ERROR : " + err);
}
});
}
//댓글 삭제
function deleteReply(reply_id) {
var id = getUrlVars().id;
$.ajax({
type : "DELETE",
url : "/board/delete/reply/" + reply_id,
dataType : "json",
contentType: false,
processData: false,
success : function(data) {
alert("댓글이 삭제되었습니다");
location.href="boardDetail.jsp?id=" + id;
},
error : function (request, status, error){
alert("code:" + request.status +"\n" + "message:" + request.responseText + "\n" + "error:" + error);
}
});
}
//파일 다운로드
function downloadFile() {
var formData = new FormData(document.getElementById("downForm"));
console.log(formData.has('saveFileName'));
var id = getUrlVars().id;
var xhr = new XMLHttpRequest();
$.ajax({
type : "POST",
url : "/board/detail/file",
data : formData,
processData: false,
contentType: false,
success : function() {
},
error : function (request, status, error){
alert("code:" + request.status +"\n" + "message:" + request.responseText + "\n" + "error:" + error);
}
});
}
</script>
</head>
<body>
<div id="wrap">
<div id="container">
<div class="inner">
<h2>게시글 상세</h2>
<table width="100%" border="1">
<colgroup>
<col width="15%">
<col width="35%">
<col width="15%">
<col width="*">
</colgroup>
<tbody id="tbody" style="text-align:center;">
<tr>
<td>제목</td>
<td id="title"></td>
<td>조회수</td>
<td id="hit"></td>
</tr>
<tr>
<td>작성자</td>
<td id="writer"></td>
<td>등록일</td>
<td id="reg_date"></td>
</tr>
<tr>
<td>내용</td>
<td colspan='3' id="content" style='height:500px;'></td>
</tr>
<tr>
<td colspan="2">
<p>파일 다운로드</p>
</td>
<td colspan="2" id="file">
</td>
</tr>
</tbody>
</table>
<br>
<div style="float:right;">
<button type="button" onclick="location.href='boardList.jsp'">목록</button>
<a id="update_href" href = ""><button type="button">수정</button></a>
<button type="button" onclick="deleteBoard();">삭제</button>
</div>
<br>
<br>
<div style="width:100%;">
<form id="replyForm" name="replyForm" method="post" enctype="multipart/form-data">
<div>작성자 : <input type="text" name="reply_writer" id="reply_writer" placehoder="작성자명"></div>
<div>내 용 : <textArea name ="reply_content" id="reply_content" cols="60" rows="5"></textArea></div>
<div>
<input type="button" onclick="postReply();" value="등록">
<input type="button" value="취소">
</div>
</form>
</div>
<table width="100%" border="1">
<colgroup>
<col width="20%">
<col width="50%">
<col width="20%">
<col width="*">
</colgroup>
<thead>
<tr>
<th>작성자</th>
<th>댓글내용</th>
<th>등록일</th>
<th>삭제</th>
</tr>
</thead>
<tbody id="reply" style="text-align:center;">
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>
6-4) 게시판 글 수정 페이지
게시판 글 작성 페이지를 일부 변형하여 작성했습니다.
더보기
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>게시판 수정</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-3.4.1.js"></script>
<script>
$(document).ready(function() {
getBoardDetail();
});
function getBoardDetail() {
var id = getUrlVars().id;
$.ajax({
type : "GET",
url : "/board/detail/" + id,
dataType : "json",
contentType : "application/json",
success : function(data) {
var detail = data.data.detail;
var file = data.data.file;
$("#title").val(detail.title);
$("#update_writer").val(detail.writer);
$("#update_content").html(detail.content);
var str = "";
if(file.length > 0) {
for(var i = 0; i < file.length; i++) {
var save_file_name = file[i].save_file_name;
var extension = file[i].extension;
str += "<input type='hidden' name='extension' id='extension' value='" + extension + "'>";
str += "<input type='button' value='" + save_file_name + "' ";
str += "onclick='deleteFile(" + "\"" + save_file_name + "\", " + "\"" + extension + "\"" + ");' name='saveFileName'>";
str += "<br>";
console.log("file : " + save_file_name);
console.log("file : " + extension);
}
}
str += "<input type='file' name='files' multiple='multiple'>";
$("#file").html(str);
},
error : function(err) {
alert("ERROR : " + err);
}
});
}
//파일 삭제
function deleteFile(save_file_name, extension) {
var save_file_name = save_file_name;
var id = getUrlVars().id;
$.ajax({
type : "DELETE",
url : "/board/delete/file/" + save_file_name,
enctype : "multipart/form-data",
processData : false,
contentType : false,
success : function() {
alert("파일이 삭제되었습니다");
location.href="boardUpdate.jsp?id=" + id;
},
error : function(err) {
alert("ERROR : " + err);
}
});
}
function getUrlVars() {
var vars = [], hash;
var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
for(var i = 0; i < hashes.length; i++) {
hash = hashes[i].split('=');
vars.push(hash[0]);
vars[hash[0]] = hash[1];
}
return vars;
}
//게시글 수정
function updateBoard() {
if($("#title").val()) {
var title = $("#title").val();
} else {
alert("제목을 입력해주세요!");
return;
}
if($("#update_writer").val()) {
var writer = $("#update_writer").val();
} else {
alert("작성자를 입력해주세요!");
return;
}
if($("#update_content").val()) {
var content = $("#update_content").val();
} else {
alert("내용을 입력해주세요!");
return;
}
var formData = new FormData(document.getElementById("updateForm"));
//console.log(formData.has('content')); // true);
var id = getUrlVars().id;
$.ajax({
type : "POST",
url : "/board/update/" + id,
enctype : "multipart/form-data",
processData : false,
contentType : false,
data : formData,
success : function() {
alert("게시글이 수정되었습니다.");
location.href="boardList.jsp";
},
error : function (request, status, error){
alert("code:" + request.status +"\n" + "message:" + request.responseText + "\n" + "error:" + error);
}
});
}
</script>
</head>
<body>
<div id="wrap">
<div id="container">
<div class="inner">
<h1>게시판 수정</h1>
<form method="post" name="updateForm" id="updateForm" enctype="multipart/form-data">
<table width="100%" border="1">
<colgroup>
<col width="40%" />
<col width="60%" />
</colgroup>
<tbody id="tbody" style="text-align:center;">
<tr>
<td>제목</td>
<td><input type="text" name="title" id="title" value=""></td>
</tr>
<tr>
<td>작성자</td>
<td><input type="text" name="writer" id="update_writer" value=""></td>
</tr>
<tr>
<td>내용</td>
<td><textarea type="text" name="content" id="update_content" rows="10"></textarea></td>
</tr>
<tr>
<td>
<p>파일</p>
</td>
<td id="file">
</td>
</tr>
</tbody>
</table>
<div style="float:right;">
<input type="button" onclick="updateBoard();" value="수정하기">
<button type="button" onclick="location.href='boardList.jsp'">뒤로가기</button>
</div>
</form>
</div>
</div>
</div>
</body>
</html>
'Web Programming > SPRING' 카테고리의 다른 글
| 테스트 코드 작성법 (0) | 2023.08.18 |
|---|---|
| 멀티 모듈 그룹 경계나누기 (0) | 2023.08.18 |
| [Spring] IntelliJ에서 Build가 깨지는 오류 (0) | 2023.07.24 |
| [SPRING] MVC패턴의 이해 (0) | 2020.01.17 |
| [SPRING] MVC패턴의 게시판 만들기(01) - 디렉토리 구조와 설정 파일 (0) | 2020.01.16 |