게시판 구현하기 2편
https://hdhdeveloper.tistory.com/21
[SpringFramework] 스프링환경에서 게시판 만들기_2
지난 포스팅에 이어 게시판 만들기 두번 째이다. 지난 포스팅에서는 게시판 화면을 호출하는 것까지 작성했다. 이번 편에서는 게시판 자료를 등록하는 것부터 시작하겠다. 먼저 게시판 글을 작
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
해당 포스팅에서는 스프링 프레임워크를 이용해 게시판을 구현하는 글을 작성할 것이다
나는 dataTables 라는 라이브러리를 사용해서 게시판 보드를 조금 쉽게 작성해보았다
dataTables에 대해 자세한 내용을 알고 싶다면 아래 링크를 걸어두겠다
DataTables | Table plug-in for jQuery
DataTables Table plug-in for jQuery Advanced tables, instantly DataTables is a plug-in for the jQuery Javascript library. It is a highly flexible tool, built upon the foundations of progressive enhancement, that adds all of these advanced features to any H
datatables.net
먼저 게시판 구현에 대해 필요한 테이블을 작성한다.
나의 경우, TB_BOARD 라는 테이블을 만들었다.
다음은 해당 테이블의 CREATE 문이다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
CREATE TABLE `tb_board` (
`sid` INT(10) UNSIGNED ZEROFILL NOT NULL AUTO_INCREMENT,
`bd_password` VARCHAR(50) NOT NULL,
`title` VARCHAR(50) NULL DEFAULT NULL COLLATE 'utf8_general_ci',
`content` VARCHAR(500) NULL DEFAULT NULL COLLATE 'utf8_general_ci',
`writer` VARCHAR(50) NULL DEFAULT NULL COLLATE 'utf8_general_ci',
`file_nm` VARCHAR(50) NULL DEFAULT NULL COLLATE 'utf8_general_ci',
`reply_cnt` VARCHAR(500) NULL DEFAULT NULL,
`creat_dt` DATE NULL DEFAULT NULL,
`user_id` VARCHAR(30) NULL DEFAULT NULL,
`delete_at` VARCHAR(2) NULL DEFAULT NULL,
`view_cnt` INT(8) UNSIGNED ZEROFILL NULL DEFAULT NULL,
PRIMARY KEY (`sid`)
)
COLLATE='latin1_swedish_ci'
ENGINE=MyISAM
AUTO_INCREMENT=9
;
|
cs |
프로젝트 구조는 다음과 같다.
JAVA page : main.com.board 안에 다음과 같이 생성해준다.
View page : views -> board 폴더 생성 후, main_board, board_input, board_view 라는 jsp 페이지를 생성해준다.
JSP 페이지를 보면서 하나씩 살펴보자
제일 상단에는 include file 이라고해서 header.jsp 파일을 추가해준 것을 볼 수 있는데, 나는 메인 페이지내에 따로 헤더 메뉴를 구현해놓았기 때문에 해당 라인은 지워주고 작업하면 된다.
먼저 dataTables 라이브러리를 사용하기 위해 cdn을 추가해줬다.
<colgroup></colgroup>태그는 테이블에서 가로의 크기를 먼저 선언하는 역할을 해준다.
미리 선언을 해주고 작업을 하기 때문에, 크기 조절이 수월해진다.
게시판에 들어갈 데이터는 호출했을 때, 게시판 자료를 조회하는 서비스 메소드를 만들어서 호출시킴과 동시에 View 페이지로 전달하도록 구현했다.
불러온 데이터는 JSTL을 사용해 처리했다.
그리고 타이틀 명칭을 눌렀을 때, 자료의 상세 페이지에 들어가기 위해 view라는 클래스를 명시했고, 해당 클래스에 버튼 이벤트를 걸 예정이다.
그리고 글을 작성하는 WRITE 버튼을로 마무리 된다.
|
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
|
<%@include file="../include_page/header.jsp" %>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<html>
<head>
<!-- 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>
<table id="dataTable" class="display" style="width:100%">
<colgroup>
<col style="width:10%"/>
<col style="width:20%"/>
<col style="width:30%"/>
<col style="width:10%"/>
<col style="width:10%"/>
<col style="width:10%"/>
<col style="width:10%"/>
</colgroup>
<thead>
<tr>
<th>No</th>
<th>TITLE</th>
<th>CONTENT</th>
<th>WRITER</th>
<th>REPLY</th>
<th>DATE</th>
<th>VIEW COUNT</th>
</tr>
</thead>
<tbody>
<c:forEach var="row" items="${result}" varStatus="status">
<c:choose>
<c:when test="${not empty row.bd_password}">
<tr>
<td>${row.sid}</td>
<td colspan="2">Secret Board
<input style="width:100px;display:inline;" type="password" name="check_pw" class="form-control check_pw"/>
<input type="button" class="btn check_pw_btn" value="VIEW"/>
</td>
<td>${row.writer}</td>
<td>${row.reply_cnt}</td>
<td>${row.creat_dt}</td>
<td>${row.view_cnt}</td>
</tr>
</c:when>
<c:otherwise>
<tr>
<td>${row.sid}</td>
<td class="view" style="cursor:pointer;">${row.title}</td>
<td>${row.content}</td>
<td>${row.writer}</td>
<td>${row.reply_cnt}</td>
<td>${row.creat_dt}</td>
<td>${row.view_cnt}</td>
</tr>
</c:otherwise>
</c:choose>
</c:forEach>
</tbody>
<tfoot>
<tr>
<th>No</th>
<th>TITLE</th>
<th>CONTENT</th>
<th>WRITER</th>
<th>REPLY</th>
<th>DATE</th>
<th>VIEW_COUNT</th>
</tr>
</tfoot>
</table>
<div>
<input type="button" id="write_btn" name="write_btn" class="btn" value="WRITE"/>
</div>
</body>
</html>
|
cs |
해당 JSP 파일이 작성되었으면 해당 script 코드를 작성해서 넣어주자
dataTables 라이브러리를 사용할 수 있는 함수이다.
|
1
2
3
4
5
6
|
<script>
$(document).ready(function() {
$('#dataTable').DataTable();
});
</script>
|
cs |
--BoardServiceimpl.java , BoardMapper.java , BoardMapper.xml
해당 파일들은 각각 파일에 붙여넣기 하면 된다.
그리고 servlet-context.xml 파일을 보면 <context:component-scan> 태그가 보일 것이다.
밑의 내용을 servlet-context.xml파일에 추가하여 board패키지도 추가해주자
|
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
|
//servlet-context.xml 추가내용 아래 내용을 추가해준다.!!! <context:component-scan base-package="main.com.board.*"/> //BoardService public interface BoardService {
public List<BoardVO> findBoardList();
}
//BoardServiceimpl
@Service
public class BoardServiceImpl implements BoardService {
@Override
public List<BoardVO> findBoardList() {
return boardMapper.findBoardList();
}
}
//BoardMapper.java
@Mapper
public interface BoardMapper {
public List<BoardVO> findBoardList();
}
//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">
<select id="findBoardList" resultType="main.com.board.vo.BoardVO">
SELECT sid,bd_password,title,content,writer,file_nm,reply_cnt,creat_dt,user_id,view_cnt FROM TB_BOARD WHERE delete_at=0
</select>
</mapper>
|
cs |
BoardController
/board/main_board.do 라는 요청이 오면 위의 jsp페이지가 호출되는 소스이다
result라는 객체 안에 boardService의 findBoardList 메소드를 호출해서 데이터를 담는다
이후 View_cnt라는 항목은 조회한 횟수인데, 길이 설정을 8로 해놨기 때문에, '00000001' 로 화면에 표시가 될 것이다
그래서 0은 제외하도록 for문을 돌면서 수정을 해주는 것이다
그 밑에 주석처리된 줄은 댓글의 수를 셋팅해주는 소스인데, 아직 미구현 됐으므로 주석처리 되어있다
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
@Controller
public class BoardController {
@Resource
BoardService boardService;
@RequestMapping(value="/board/main_board.do")
public String board(ModelMap model) {
String reply_cnt;
List<BoardVO> result =boardService.findBoardList();
for(int i=0; i<result.size(); i++) {
result.get(i).setView_cnt(result.get(i).getView_cnt().replaceAll("0",""));
//reply_cnt =boardService.ReplyCount(result.get(i).getSid());
//result.get(i).setReply_cnt(reply_cnt);
}
model.put("result", result);
return "/board/main_board";
}
}
|
cs |
여기서 호출 결과를 보면 다음과 같다.
테이블 목록은 데이터를 임의로 입력해준 자료이다.
다음 포스팅에서는 글 등록 및 상세보기, 비밀글 처리까지 진행해볼 예정이다.
'개발 > BACK' 카테고리의 다른 글
| [SpringFramework]스프링프레임워크에서 게시판 구현 예제_3(댓글) (0) | 2021.03.17 |
|---|---|
| [SpringFramework] 스프링프레임워크 게시판 구현 예제_2 (0) | 2021.03.16 |
| [SpringFramework] 스프링 프레임워크 로그인 (Login) 기능 예제 (0) | 2021.03.16 |
| [SpringFramework] 스프링프레임워크 회원가입 기능 구현 예제_3 (0) | 2021.03.16 |
| [SpringFramework] 스프링프레임워크 회원가입 기능 구현 예제_2 (0) | 2021.03.16 |
