728x90
지난 포스팅에 이어 게시판 만들기 두번 째이다
지난 포스팅에서는 게시판 화면을 호출하는 것까지 작성했다
이번 편에서는 게시판 자료를 등록하는 것부터 시작하겠다
게시판 구현 예제 1편
https://hdhdeveloper.tistory.com/20
[SpringFramework] 스프링환경에서 게시판 만들기_1
해당 포스팅에서는 게시판을 제작하는 글을 작성할 것이다. 나는 dataTables 라는 라이브러리를 사용해서 게시판 보드를 조금 쉽게 작성해보았다. dataTables에 대해 자세한 내용을 알고 싶다면 아래
hdhdeveloper.tistory.com
게시판 구현 예제 3편
https://hdhdeveloper.tistory.com/23
[SpringFramework]스프링환경에서 게시판만들기_3(댓글)
이번 포스팅에서는 댓글을 작성할 수있는 기능을 구현할 것이다. 먼저 데이터베이스 테이블을 구성해야한다. 아래는 테이블 생성문이다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 CREATE TABLE `tb_reply` ( ..
hdhdeveloper.tistory.com
먼저 게시판 글을 작성하는 페이지인 board_input 페이지를 호출 하는 것부터 보자
|
1
2
3
4
5
6
7
8
9
10
11
|
<div>
<input type="button" id="write_btn" name="write_btn" class="btn" value="WRITE"/>
</div>
<script>
/*글 작성 팝업 open*/
$("#write_btn").click(function(){
var pop_name ="WRITE FORM";
var popOption = "width=800, height=650, top=100, left=300,location=no"
window.open("/board/input.do",pop_name,popOption);
});
</script>
|
cs |
popOption 변수에 팝업 옵션을 설정한 뒤, input.do라는 URL을 열게 되어있다.
그렇다면 /board/input.do 호출이 있는 Controller를 보자
|
1
2
3
4
|
@RequestMapping(value="/board/input.do")
public String inputBoard() {
return "/board/board_input";
}
|
cs |
매우 간단하다
그냥 호출만 해주면 끝
board_input.jsp 페이지이다
해당 페이지에서 게시판 자료를 등록한다
popupCommon 이라는 페이지를 include 하고 있는 이유는
jquery등 임포트하는 파일들이 너무 많아 페이지를 하나 생성하여 한 곳으로 모은 페이지이다
해당 페이지의 소스도 밑에 있다
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
|
<%@include file="../include_page/popupCommon.jsp" %>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<head>
</head>
<body>
<div class="input_popup">
<table>
<colgroup>
<col style="width : 150px;"/>
<col style="width : 250px;"/>
<col style="width : 150px;"/>
<col style="width : 250px;"/>
</colgroup>
<thead>
<tr>
<th>
<a class="fn_font">TITLE</a>
</th>
<th colspan="3">
<input type="text" id="title" name="title" class="form-control" style="width:400px;"/>
</th>
</tr>
<tr>
<th>
<a class="fn_font">WRITER</a>
</th>
<th>
<input type="text" id="writer" name="writer" value="<c:out value='${sessionConfigVO.user_name}'/>" class="form-control" style="width:200px;"/>
</th>
<th colspan="2">
<div class="filebox">
<label for="ex_file">FILE UPLOAD</label>
<input type="file" id="file_nm" name="file_nm"/>
</div>
</th>
</tr>
<tr>
<th>
<a class="fn_font">CONTENT</a>
</th>
<th>
<div id="editor" name="content" style="box-sizing: border-box;width:403px;height:263px;">
</div>
<div id="viewer">
</div>
</th>
</tr>
<tr>
<th>
<a class="fn_font">PASSWORD </a>
</th>
<th>
<input type="password" name="bd_password" id="bd_password" class="form-control"/>
</th>
<th colspan="2">
<a class="fn_font">SEE A PASSWORD<input type="checkbox" name="password_view" id="password_view" class="form-control"/></a>
</th>
</tr>
</thead>
</table>
</div>
<div class="footer" style="float:right;margin-right:20px;">
<input type="button" id="reg_btn" name="reg_btn" class="btn btn-primary" value="WRITE"/>
<input type="button" id="cancel_btn" name="cancel_btn" onclick="window.close();" class="btn btn-danger" value="CLOSE"/>
</div>
</body>
</html>
|
cs |
content를 입력하는 div 태그에 contenteditable="true" 라는 옵션이 있다
해당 옵션은 div에 텍스트를 입력할 수 있도록 해준다
--popupCommon
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<link rel="stylesheet" type="text/css" href="../resources/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="../resources/css/common.css"/>
<link rel="stylesheet" type="text/css" href="../resources/css/bootstrap.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.4/codemirror.css">
<link rel="stylesheet" href="https://uicdn.toast.com/editor/2.0.0/toastui-editor.min.css">
<script
src="https://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
crossorigin="anonymous"></script>
<script src="../resources/js/bootstrap.min.js"></script>
<script src="../resources/js/bootstrap.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script>
<script src="../resources/js/common.js"></script>
|
cs |
여기까지 하면 게시판 자료 등록을 할 수 있는 폼은 모두 완성되었다
html 태그 밑 script 태그를 열어 해당 소스를 넣어준다
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
|
<script>
$(document).ready(function(){
});
/*글 등록*/
$("#reg_btn").click(function(){
var param =new Object();
param.title = $("#title").val();
param.writer = $("#writer").val();
param.bd_password = $("#bd_password").val();
param.content = $("#editor .tui-editor-contents").text();
param.user_id = $("#user_id").val();
//이미지 입력 필요
//param.image!!
//첨부파일 참조 필요
//param.file_nm!!
param.flag ="add";
var form = paramCreateForm(param);
$.ajax({
url : "/board/board_proc.ajax",
type : "post",
dataType : "json",
data : $(form).serialize(),
success:function(data){
console.log(data);
alert("정상처리되었습니다.");
opener.location.reload();
window.close();
}
})
});
//비밀번호 보기
$("#password_view").click(function(){
if($("#bd_password").attr("type") =="password")
$("#bd_password").attr("type","text");
|
--boardService.java , boardServiceImpl.java, boardMapper.java, boardMapper.xml
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
|
//boardSerivce
public interface BoardService {
public void insertBoard(BoardVO boardVO);
}
//boardServiceImpl
@Service
public class BoardServiceImpl implements BoardService {
@Resource
BoardMapper boardMapper;
@Override
public void insertBoard(BoardVO boardVO) {
boardVO.setDelete_at("0");
boardVO.setReply_cnt("0");
boardVO.setView_cnt("00000000"); boardMapper.insertBoard(boardVO);
}
}
//boardMapper.java
@Mapper
public interface BoardMapper {
public void insertBoard(BoardVO boardVO);
}
//boardMapper.xml
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper
PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="main.com.board.dao.BoardMapper">
<insert id="insertBoard">
insert into TB_BOARD(bd_password,title,content,writer,file_nm,reply_cnt,creat_dt,user_id,delete_at,view_cnt)
values(#{bd_password},#{title},#{content},#{writer},#{file_nm},#{reply_cnt},SYSDATE(),#{user_id},#{delete_at}.#{view_cnt})
</insert>
</mapper>
|
cs |
자료 등록 결과물 :
ajax success 문에서 해당 기능이 정상적으로 작동하면 opener.location.reload();
를 사용해 부모 창을 새로고침하도록 수정하여 등록한 자료가 바로 게시판에 조회된다.
이번에는 등록한 글을 상세하게 볼 수 있는 상세페이지(board_view.jsp)를 등록한다.
해당 소스는 스크립트와 같이 올려뒀다.
메인 게시판 페이지와 큰 차이점은 없어보인다.
상세 페이지는 글의 제목을 누르면 들어오게 되는 페이지다.
제목을 눌렀을 때, 해당 자료의 게시판 번호(sid)를 이용하여 자료를 조회 후, BoardVO를 리턴해준다.
스크립트 하단에 댓글 등록 처리가 있는데, 추후에 다루도록 하겠다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
|
<%@include file="../include_page/header.jsp" %>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!-- 2021-03-08
댓글 한글 깨짐 현상 해결 방법
server.xml (was 설정) 포트번호 입력공간에 URLEncoding=UTF-8 입력 후 해결-->
<html>
<head>
<meta charset="UTF-8">
<!-- dataTables GRID CDN -->
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.23/css/jquery.dataTables.min.css" />
<script src="//cdn.datatables.net/1.10.23/js/jquery.dataTables.min.js"></script>
</head>
<body>
<input type="hidden" value="<c:out value='${sessionConfigVO.user_name}'/>" id="session_user_name"/>
<table id="dataTable" class="display" style="width:60%">
<colgroup>
<col style="width:10%"/>
<col style="width:20%"/>
<col style="width:30%"/>
<col style="width:"/>
</colgroup>
<tbody>
<tr>
<th>BOARD NUMBER</th>
<td id="sid"><c:out value="${result.sid }"/></td>
<th>TITLE</th>
<th><c:out value="${result.title }"/></th>
</tr>
<tr>
<th>CONTENT</th>
<th colspan="3"><c:out value="${result.content }"/></th>
</tr>
<tr>
<th>REPLY CNT</th>
<th><c:out value="${result.reply_cnt}"/></th>
<th>DATE</th>
<th><c:out value="${result.creat_dt}"/></th>
</tr>
<tr>
<th>VIEW COUNT</th>
<th><c:out value="${result.view_cnt}"/></th>
<th>WRITER</th>
<th><c:out value="${result.writer}"/></th>
</tr>
</tbody>
</table>
<div class="reply_div">
<input type="button" id="reply_reg_btn" name="reply_reg_btn" class="btn btn-primary" value="GO"/>
<input type="text" style="width:700px;" id="reply_content" name="reply_content" class="form-control"/>
<c:forEach var="row" items="${replyResult}" varStatus="status">
<div class="reply_list" reply_no="<c:out value='${row.reply_no}'/>" style="width:80%;height:40px;">
<span style="width:60%"><c:out value="${row.reply_content}"/></span>
<span style="width:20%"><c:out value="${row.reply_user}"/></span>
<span style="width:20%"><c:out value="${row.creat_dt}"/></span>
</div>
</c:forEach>
</div>
</body>
</html>
<script type="text/javascript">
$(document).ready(function(){
$("#dataTable").dataTable();
});
$("#reply_reg_btn").click(function(){
$.ajax({
url : "/reply/reply_proc.ajax",
data : {
sid : $("#sid").text(),
reply_user : $("#session_user_name").val(),
reply_content : $("#reply_content").val(),
flag : "addRepl",
},
dataType : "post",
success:function(data){
alert("등록처리");
}
})
});
</script>
|
cs |
우리가 이전에 만들었던 main_board.jsp의 상세페이지 클릭 이벤트이다
해당 url에 sid 라는 게시판 번호를 가져와서 URL 파라미터 값으로 붙여준다
해당 스크립트가 실행되면 BoardController에 매핑되어진 view.do가 호출된다
|
1
2
3
4
5
6
|
/*상세보기 페이지 전환*/
$(".view").click(function(){
var sid =$(this).prev().text();
var url = "/board/view.do?&sid="+sid;
location.href=url;
})
|
cs |
BoardController의 viewBoard 메소드이다
먼저 파라미터 값으로 넘겨줬던 sid 값을 이용해 클릭했던 자료를 찾는다
BoardVO resultVO =boardService.findBoardView(sid); - resultVO라는 BoardVO를 선언하여
해당 자료에 대한 정보를 resultVO에 저장한다
boardService.addViewCount(sid); - 해당 부분은 클릭했던 자료의 view_cnt(조회 수)를 올려주는 메소드다
주석되어있는 부분은 해당 게시판에 대한 댓글이 있을 경우, 댓글을 조회하는 서비스이다
아직 구현되어있지 않기 때문에 신경쓰지 않아도 된다
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
@RequestMapping(value="/board/view.do")
public String viewBoard(ModelMap modelMap,@RequestParam String sid) {
BoardVO resultVO =boardService.findBoardView(sid);
if(!SystemUtil.EmptyCheck(resultVO.getTitle())) {
/*자료 상세 보기*/
resultVO.setReply_cnt(boardService.ReplyCount(Integer.parseInt(sid)));
resultVO.setView_cnt((SystemUtil.zeroRemove(resultVO.getView_cnt())));
boardService.addViewCount(sid);
modelMap.put("result",resultVO);
/*해당 자료 댓 글*/
// int result_sid = Integer.parseInt(sid);
// List<ReplyVO> replyResult =boardService.findReplyView(result_sid);
// modelMap.put("replyResult", replyResult);
}else {
throw new RuntimeException("자료 조회 실패");
}
return "/board/board_view";
}
|
cs |
-- boardService, boardServiceImpl, boardMapper.java, boardMapper.xml
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
|
//boardService
public interface BoardService {
public BoardVO findBoardView(String sid);
public void addViewCount(String sid);
}
//boardServiceImpl
@Override
public BoardVO findBoardView(String sid) {
return boardMapper.findBoardView(sid);
}
@Override
public void addViewCount(String sid) {
boardMapper.addViewCount(sid);
}
//boardMapper.java
public BoardVO findBoardView(String sid);
public void addViewCount(String sid);
//boardMapper.xml
<select id="findBoardView" resultType="main.com.board.vo.BoardVO">
SELECT * from TB_BOARD WHERE sid =#{sid}
</select>
<update id="addViewCount">
update TB_BOARD set view_cnt=view_cnt+1 where sid=#{sid}
</update>
|
cs |
해당 상세보기 결과물 :
728x90
'개발 > BACK' 카테고리의 다른 글
| [SpringFramework] JSP 페이지 및 Tomcat서버 한글 깨짐 현상 해결 (0) | 2021.03.17 |
|---|---|
| [SpringFramework]스프링프레임워크에서 게시판 구현 예제_3(댓글) (0) | 2021.03.17 |
| [SpringFramework] 스프링프레임워크 게시판 구현 예제_1 (0) | 2021.03.16 |
| [SpringFramework] 스프링 프레임워크 로그인 (Login) 기능 예제 (0) | 2021.03.16 |
| [SpringFramework] 스프링프레임워크 회원가입 기능 구현 예제_3 (0) | 2021.03.16 |
