336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.
게시물 쓰기 포스트 > http://mkil.tistory.com/313
게시글 상세목록 포스트 > http://mkil.tistory.com/310
이번엔, 게시물 쓰기에 이어 게시물 상세보기를 진행해보고자한다.
간단하다. 저번 예제와 별 다를것 없다.
우선, 이전 게시물 상세목록 포스트에서 작성했던 boardMain.jsp를 다음과 같이 수정한다.
1. JSP 수정
일단 boardMain.jsp를 수정한다.
상단의 게시글 제목 상세보기 부분의 javascript 부분을 추가해 준다.
<SCRIPT LANGUAGE="JavaScript">
$(document).ready(function(){
/* 게시글 제목 클릭 상세보기 */
$('.boardTitle').on('click',function(){
var popUrl = "/spring/boardDetail?docnum="+$(this).attr('id'); //팝업창에 출력될 페이지 URL
var popOption = "width=570, height=360, resizable=no, scrollbars=no, status=no;"; //팝업창 옵션(optoin)
window.open(popUrl,"",popOption);
});
/* 작성하기 클릭 */
$('input[type=button]').on('click',function(){
var url = "/spring/boardWrite";//팝업창에 출력될 페이지 URL
location.href = url;
});
});
</script>
</head>
<body>
<table class="tbl_port" style="border: 1px solid #ccc">
<caption style="background-color: #ccc">목록</caption>
<colgroup>
<col width="10%" />
<col width="*"/>
<col width="15%"/>
<col width="10%"/>
</colgroup>
<thead>
<tr>
<th scope="col">글번호</th>
<th scope="col">제목</th>
<th scope="col">작성자</th>
<th scope="col">조회수</th>
</tr>
</thead>
<tbody>
<c:choose>
<c:when test="${fn:length(list) > 0}">
<c:forEach items="${list}" var="resultList">
<tr>
<th ><a href="#" >${resultList.DOCNUM}</a></th>
<th class="boardTitle" id="${resultList.DOCNUM}"><a href="#">${resultList.TITLE}</a></th>
<td>${resultList.ADD_USR_NM}</td>
<td>${resultList.VIEWCOUNT}</td>
</tr>
</c:forEach>
</c:when>
<c:otherwise>
<tr>
<td colspan="3">조회된 결과가 없습니다.</td>
</tr>
</c:otherwise>
</c:choose>
</tbody>
</table>
<div ><input type="button" value="작성하기 "/></div>
</body>
</html>
boardTitle이라는 클래스를 가진 셀렉터를 클릭하면 해당 태그에 셋팅되어져 있는 속성값인 id값을 /boardDetail 의 mapping Url에 파라미터로 전달하는 것이다.
상세보기 페이지는 popup을 사용해서 띄웠다.
window.popup은 자바스크립트 내장객체이므로 사용법을 모르시는 분들은
여기를 참고하시길.... > http://mkil.tistory.com/206
그럼 이제 상세보기페이지에 관한 Controller를 작성해줘야 한다.
그리고 상세보기 페이지인 boardDetail.jsp를 생성하고 다음과 같이 작성한다.
<SCRIPT LANGUAGE="JavaScript">
$(document).ready(function(){
/* update 클릭 */
$('#update').on('click',function(){
});
/* 삭제 클릭 */
$('#delete').on('click',function(){
});
});
</script>
</head>
<body>
<table class="board_view">
<colgroup>
<col width="15%"/>
<col width="35%"/>
<col width="15%"/>
<col width="35%"/>
</colgroup>
<caption style="background-color: #ccc">게시글 상세</caption>
<tbody>
<tr>
<th scope="row">글 번호</th>
<td>${list[0].DOCNUM }</td>
<th scope="row">조회수</th>
<td>${list[0].VIEWCOUNT }</td>
</tr>
<tr>
<th scope="row">작성자</th>
<td>${list[0].ADD_USR_NM }</td>
<th scope="row">작성시간</th>
<td>2016-10-21</td>
</tr>
<tr>
<th scope="row">제목</th>
<td colspan="3">${list[0].TITLE }</td>
</tr>
<tr>
<td colspan="4" style="border: 1px solid #ccc; height : 100px;">${listp[0].CONTENTS }</td>
</tr>
</tbody>
</table>
<a href="#this" class="btn" id="update">수정하기</a>
<a href="#this" class="btn" id="delete">삭제하기</a>
</body>
</html>
script 부분은 남겨두었다. 어짜피 게시글 쓰기부터 게시글 상세보기까지의
예제를 따라해 보았다면 게시글수정과 삭제는 직접 할 수 있을것이다.
게시글 상세보기는 --> 수정할 컬럼 값들을 파라미터로 보내어 update하면 되고
게시글 삭제는 --> 게시글 상세보기처럼 key값을 파라미터로 보내어 delete하면 되는것이다.
C -> M -> V 까지 한 블럭의 템플릿을 작성해 보았다면 그 다음부터는 쉬울터이니
update와 delete는 생략하도록 하겠다.
2. Controller 작성
/**
* 게시물 상세보기
*/
@RequestMapping(value = "/boardDetail")
public ModelAndView boardDetail(HttpServletRequest req) {
ModelMap model = new ModelMap();
Map param=new HashMap();
param.put("docnum", Integer.parseInt(req.getParameter("docnum")) );
List<Map<String,Object>> list = boardService.selectBoardDetail(param);
model.addAttribute("list", list);
return new ModelAndView("/views/boardDetail", model);
}
게시물번호인 KEY값 docnum을 받아 게시물 상세보기에 필요한 비즈니스 로직을
처리하러 service단으로 이동한다.
service를 통해 가져온 data값을 model객체에 심어주고 상세보기 페이지 View 객체를 return 해준다.
3. Service 작성
public List<Map<String, Object>> selectBoardDetail(Map param) {
boardDao.updateViewCnt(param); //게시글 조횟수 늘리기가 선행되어야 한다.
List list=boardDao.selectBoardDetail(param);
return list;
}
게시글 상세조회에 있어서 중요한 점은, 상세조회 데이타를 가져오기 전에
게시글 조횟수 컬럼에 대한 값을 증가시켜야 한다는 점이다.
조회수를 증가시킨 후에, 데이터를 가져와야 사용자가 게시글 상세보기를 클릭 한 순간 +1을 시킨 조회숫자를 얻어올 수 있다.
4. Dao 작성
public void updateViewCnt(Map param) {
sqlsession.update("boardSql.updateViewCnt",param);
}
게시글 조회수를 update 해주기 위한 dao
public List selectBoardDetail(Map param) {
List result = sqlsession.selectList("boardSql.selectBoardDetail",param);
return result ;
}
게시글 상세조회를 위한 data를 select 해주기 위한 dao
5. xml 작성
<select id="boardSql.selectBoardDetail" parameterType="java.util.HashMap" resultType="java.util.HashMap">
SELECT BRD_TYPE,
BRD_CD,
DOCNUM,
ADD_USR_NM,
TITLE,
CONTENTS,
ATTACH,
DEL_CONF,
VIEWCOUNT
FROM BOARD_MAIN_TEST
WHERE DOCNUM = #{docnum}
</select>
<update id="boardSql.updateViewCnt" parameterType="java.util.HashMap" >
UPDATE BOARD_MAIN_TEST
SET
VIEWCOUNT = NVL(VIEWCOUNT, 0) + 1
WHERE
DOCNUM = #{docnum}
</update>
6. 결과확인
(1) 앞선 포스팅에서 /boardMain으로 메인화면을 출력하였다.
필자가 "작성하기"버튼을 눌러 data들을 insert 해논 모습이다.
글번호23번의 제목 171717.... 을 클릭하여 본다 (조회수가 5인거를 주목하자)
그러면 다음과 같이 조회수가 6으로 업데이트된 데이터를 가져오게 된다.
여기까지 했으면 뭔가 이상한걸 눈치챈 사람들이 있을것이다.
바로 게시글 목록이 페이징 처리없이 계속 나열되고 있다는것.
다음 포스팅은 게시판 페이징 처리에 대한 실습예제를 해보도록 하겠다.
'Framework > Spring' 카테고리의 다른 글
| [Spring] velocity와 spring으로 템플릿 email 보내기 (2) | 2016.11.16 |
|---|---|
| [SPRING 시작-11] #게시판 페이징 처리하기 / board paging (2) | 2016.10.25 |
| [SPRING 시작-9]#게시판/ 게시물 쓰기 / Spring board insert example/ Mybatis insert (0) | 2016.10.18 |
| [SPRING 시작-8] # 스프링 게시판을 만들어 보자! / 게시판 목록 소스 / Spring board example (1) | 2016.10.18 |
| [SPRING 시작-7] #스프링에서 파라미터 전송하는 방법 / PathVariable / getParameter / @RequestMapping 등 (1) | 2016.10.17 |
