Spring 게시판 게시글 쓰기(ckeditor 사용), 게시글 상세보기 (내 프로젝트에 적용)
Back-End/Spring 2019. 8. 12. 17:07- 게시판 게시글 쓰기 -
memberboard.jsp 페이지에서 "글쓰기" 버튼을 클릭하면 컨트롤러를 거쳐 memberboardwrite.jsp 페이지로 이동
memberboardwrite.jsp 페이지에서 글 내용과 제목을 작성후 "확인" 버튼을 누르면 컨트롤러->서비스->dao->mapper->컨트롤러
를 거쳐서 게시글이 insert되고, 게시글 리스트 페이지로 돌아온다.
memberboard.jsp 중 일부
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<script>
//글쓰기 폼으로 이동하게 하는 함수
$(function(){
$("#btnWrite").click(function(){
location.href="write.do";
});
});
</script>
=============================================================
<button type = "button" id = "btnWrite" align = "right">글쓰기</button>
|
cs |
MemberBoardController.java 중 일부
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
//글쓰기 버튼을 눌렀을때 뷰에서 맵핑되는 메소드
@RequestMapping("/board/write.do")
public String write(HttpSession session, HttpServletResponse write) throws Exception{
//글쓰기 폼 페이지로 이동함
String user_id = (String)session.getAttribute("user_id");
//로그인 되어있는지 확인하는 if문, 로그인이 안되어있으면 경고메시지를 출력하고 홈으로 넘어간다.
if (user_id == null) {
write.setContentType("text/html; charset=UTF-8");
PrintWriter out_write = write.getWriter();
out_write.println("<script>alert('로그인이 되어있지 않습니다. 로그인을 먼저 해주세요.');</script>");
out_write.flush();
return "home";
} else {
//로그인이 되어있다면!
return "board/memberboardwrite"; //회원게시판 글쓰기 폼으로 이동함
}
}
|
cs |
memberboardwrite.jsp (ckeditor을 사용함)
|
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
|
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<%@ include file="../include/header.jsp"%>
<%@ include file="../include/menu.jsp"%><br><br>
<script src = "${path}/ckeditor/ckeditor.js"></script>
<!-- ckeditor 사용을 위해 js파일을 연결함 -->
<body>
<!-- 글쓰기 폼 작성 -->
<h2>글쓰기</h2>
<form method = "post" action = "insert.do">
<div>제목 : <input name = "title" id = "title" size = "80" placeholder = "제목을 입력하세요"></div><br><br>
내용 : <div style = "width:800px; height:100px;"> <textarea id = "content" name = "content" rows = "6" cols = "80" placeholder = "내용을 입력하세요"></textarea></div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div style = "width:700px; text-align:right;" ><button type = "submit" name = "submit">확인</button></div>
<script>
//id가 description인 태그에 ckeditor을 적용시킴
//이미지 업로드 안됨
CKEDITOR.replace("content");
</script>
</form>
</body>
</html>
|
cs |
글 내용을 작성한뒤 "확인" 버튼을 누르면 다시 컨트롤러로 들어와서 메소드에 맵핑된다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
//write.jsp에서 입력한 내용들이 MemberBoardDTO에 저장됨
@RequestMapping("/board/insert.do")
public String insert (@ModelAttribute MemberBoardDTO dto, HttpSession session, HttpServletResponse insert) throws Exception{
//로그인한 사용자의 아이디를 체크
//아이디를 체크해서 자신의 글에만 수정과 삭제가 가능하게 할 예정
String user_id = (String)session.getAttribute("user_id");
dto.setUser_id(user_id);
insert.setContentType("text/html; charset=UTF-8");
PrintWriter out_write = insert.getWriter();
out_write.println("<script>alert('글이 작성되었습니다.');</script>");
out_write.flush();
//레코드를 저장함
memberboardservice.create(dto);
//게시물을 저장한 후에 게시물 목록페이지로 다시 이동함
return "forward:/board/list.do";
}
|
cs |
MemberBoardServiceImpl.java 중 일부
|
1
2
3
4
5
|
@Override
public void create(MemberBoardDTO dto) throws Exception {
memberboarddao.create(dto);
//dto를 매개값으로 dao를 호출한다.
}
|
cs |
MemberBoardDAOImpl.java 중 일부
|
1
2
3
4
5
|
@Override
public void create(MemberBoardDTO dto) throws Exception {
sqlSession.insert("memberboard.insert",dto);
}
|
cs |
boardMapper.xml 중 일부
|
1
2
3
4
5
6
7
8
|
<insert id = "insert">
<!-- 게시글 번호는 시퀀스로 하고 생성할때마다 숫자가 1씩 하도록 설정함 -->
<!-- 제목, 글내용, 작성자를 삽입함 -->
insert into member_board (member_bno, title, content, user_id) values
( seq_board.nextval, #{title}, #{content}, #{user_id} )
</insert>
|
cs |
================================================================================
- 게시판 게시글 상세보기 -
게시글 목록 페이지에서 게시글 제목에 링크를 달아 링크를 클릭하면 게시글의 제목과 내용을 볼 수 있도록 한다.
게시글 수정과 삭제는 글을 작성한 당사자만 할 수 있고, 글 목록은 당사자가 아니라도 할 수 있도록 한다.
그리고 게시글을 한번 클릭할 때마다 조회수가 1씩 증가하도록 한다.
memberboard.jsp 중 일부
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
<!-- forEach var = "개별데이터" items = "집합데이터" -->
<c:forEach var = "row" items = "${map.list}"> <!-- 컨트롤러에서 map안에 list를 넣었기 때문에 이렇게 받는다. -->
<tr>
<td>${row.member_bno}</td> <!-- 글번호 -->
<!-- 클릭하면 컨트롤러의 view.do로 이동하고, 게시물번호, 페이지 번호, 검색옵션, 키워드를 같이 넘긴다 -->
<!-- 같이 넘겨야 값들이 초기화 되지 않기 때문에 -->
<td>
<a href="view.do?member_bno=${row.member_bno}
&curPage=${map.pager.curPage}
&search_option=${map.search_option}
&keyword=${map.keyword}">${row.title}</a></td> <!-- 글제목 -->
<td>${row.user_id}</td> <!-- 작성자의 이름 -->
<td>${row.content}</td> <!-- 글의내용 -->
<td>${row.reg_date}</td> <!-- 날짜의 출력형식을 변경함 -->
<td>${row.viewcnt}</td> <!-- 조회수 -->
<td>${row.recommend}</td> <!-- 추천수 -->
</tr>
</c:forEach>
|
cs |
MemberBoardController.java 중 일부
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
@RequestMapping(value = "/board/view.do", method=RequestMethod.GET)
public ModelAndView view(@RequestParam int member_bno,
@RequestParam int curPage,
@RequestParam String search_option,
@RequestParam String keyword,
HttpSession session) throws Exception{
//조회수 증가 쿼리
memberboardservice.increaseViewcnt(member_bno, session);
MemberBoardServiceImpl.java 중 일부
MemberBoardDAOImpl.java 중 일부
boardMapper.xml 중 일부
//페이지를 이동하면서 자료를 같이 넘기기 위해서 modelandview를 사용한다.
ModelAndView mav = new ModelAndView();
mav.setViewName("board/memberboardview");
//view로 자료를 넘기기위해서 mav에 값들을 저장해서 view.jsp로 리턴시킨다.
mav.addObject("dto", memberboardservice.read(member_bno)); //상세보기를 한번 클릭하면 조회수를 1증가시킨다.
MemberBoardServiceImpl.java 중 일부
MemberBoardDAOImpl.java 중 일부
boardMapper.xml 중 일부
mav.addObject("curPage", curPage);
mav.addObject("search_option", search_option);
mav.addObject("keyword", keyword);
return mav; //view로 넘어가서 출력이 된다.
}
|
cs |
자료를 받을 view 페이지
memberboardview.jsp
|
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
87
88
89
90
91
|
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<%@ include file="../include/header.jsp" %>
<%@ include file="../include/menu.jsp" %>
<script src="${path}/include/js/common.js"></script>
<script src="${path}/ckeditor/ckeditor.js"></script> //ck에디터
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
//목록 버튼
$(function(){
$("#btnList").click(function(){
location.href="list.do";
});
});
//수정 버튼
$(function(){$("#btnUpdate").click(function(){
//첨부파일 이름들을 폼에 추가
var str="";
$("#uploadedList .file").each(function(i){
str+=
"<input type='hidden' name='files["+i+"]' value='"
+$(this).val()+"'>";
});
$("#form1").append(str);
document.form1.action="${path}/board/update.do";
document.form1.submit();
});
});
//삭제 버튼
$(function(){$("#btnDelete").click(function(){
if(confirm("삭제하시겠습니까?")){
document.form1.action="${path}/board/delete.do";
document.form1.submit();
}
});
});
listAttach();
</script>
<h2>게시물 보기</h2>
<!-- 게시물을 작성하기 위해 컨트롤러의 insert.do로 맵핑 -->
<form id="form1" name="form1" method="post"
action="${path}/board/insert.do">
<div>제목 <input name="title" id="title" size="80"
value="${dto.title}"
placeholder="제목을 입력하세요"><br><br>
<!-- placeholder은 제목을 입력할 수 있도록 도움말을 출력함 -->
</div>
<div>조회수 : ${dto.viewcnt} </div><br><br>
<div style="width:800px;">
내용 <textarea id="content" name="content"
rows="3" cols="80"
placeholder="내용을 입력하세요">${dto.content}</textarea><br><br>
<!-- 마찬가지로 내용을 입력하도록 도움말을 출력함 -->
<script>
// ckeditor 적용
//id가 content인 태그 (글의 내용을 입력하는 태그)를 ck에디터를 적용한다는 의미
CKEDITOR.replace("content",{
filebrowserUploadUrl: "${path}/imageUpload.do",
height: "300px"
});
</script>
<div style = "width:700px; text-align:center;">
<!-- 수정, 삭제에 필요한 글번호를 hidden 태그에 저장한다. -->
<input type = "hidden" name = "member_bno" value = "${dto.member_bno }">
<!-- 본인만 수정, 삭제 버튼을 표시한다. -->
<c:if test = "${sessionScope.user_id == dto.user_id }">
<button type = "button" id = "btnUpdate">수정</button>
<button type = "button" id = "btnDelete">삭제</button>
</c:if>
<!-- 글목록은 본인이 아니어도 확인 가능하게 한다. -->
<button type = "button" id = "btnList">목록</button>
<body>
</body>
</html>
|
cs |
servlet-context.xml에 ckeditor관련 코드 추가
|
1
|
<resources location="/WEB-INF/views/ckeditor/" mapping="/ckeditor/**"></resources>
|
cs |
아래 책은 제가 공부할때 활용했던 책으로 추천드리는 책이니 한번씩 읽어보시는것을 추천드립니다!! ㅎㅎ
이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.
'Back-End > Spring' 카테고리의 다른 글
| JSTL - 조건문 처리 (0) | 2019.08.16 |
|---|---|
| ajax로 데이터 넘기기 (0) | 2019.08.14 |
| Spring 게시판 검색기능 구현 (내 프로젝트에 적용) (2) | 2019.08.09 |
| Spring 게시판 목록 (내 프로젝트에 적용) (0) | 2019.08.09 |
| Spring 이메일 발송 (0) | 2019.08.07 |