본문 바로가기
개발/Spring 블로그 만들기

Spring 블로그 만들기 - 5.상세조회 화면 만들기

by 똘똘이박사 2019. 2. 18.



이 포스팅의 샘플 게시판 개발 환경은 MAC OS, STS, OpenJDK11 입니다.



게시판 글 상세조회 화면을 만들기 위해 이번 포스팅에서 진행할 내용입니다.

  1. 게시판 리스트의 수정(클릭 이벤트)

  2. Service 수정하기(Boardservice)

  3. Controller 수정하기(BoardController)

  4. 상세조회 화면 만들기(boardContent)



블로그 만들기 - 5. 상세조회 화면 만들기


게시판 리스트의 수정 (클릭 이벤트)

이전 게시판 리스트 만들기 포스팅에서

우리는 데이터베이스에 저장된 리스트를 출력 하는 작업을 했습니다.

보통 게시판의 상세글을 조회 할때는 제목을 클릭하면 상세 페이지로 이동하게 되어 있습니다.

저희 샘플 게시판에서도 동일한 방식으로 상세 내용을 조회 할 수 있도록 할 예정입니다.

따라서 이전에 만들었던 게시판 리스트(index.jsp)를 조금 수정 해야 합니다.


우선 게시물을 클릭 했을때 클릭 이벤트를 처리 할 수 있도록 자바스크립트를 수정합니다.


index.jsp 수정

<script>

$(document).on('click', '#btnWriteForm', function(e){

e.preventDefault();

location.href = "${pageContext.request.contextPath}/board/boardForm";

});

function fn_contentView(bid){

var url = "${pageContext.request.contextPath}/board/getBoardContent";

url = url + "?bid="+bid;

location.href = url;

}

</script>


게시물 조회 에서는 서버쪽에 어떤 게시물을 클릭했는지 게시물의 번호(bid)를 넘겨 줘야 합니다.

따라서 게시물 클릭 이벤트에서 게시물의 번호를 인자 값으로 받습니다.

게시글 조회는 get 방식으로 데이터를 전송합니다. 따라서 ? 연산자를 사용해 bid를 주소 뒤에 붙여 줍니다.


이제 리스트 쪽을 아래와 같이 수정합니다.


index.jsp(수정)

<tr>

<td><c:out value="${list.bid}"/></td>

<td>

<a href="#" onClick="fn_contentView(<c:out value="${list.bid}"/>)">

<c:out value="${list.title}"/>

</a>

</td>

<td><c:out value="${list.reg_id}"/></td>

<td><c:out value="${list.view_cnt}"/></td>

<td><c:out value="${list.reg_dt}"/></td>

</tr>


<a>태그를 이용해 제목에 링크 처리를 해두었습니다. 하지만 href="#" 처리해 아무곳으로도 이동하지 못합니다.

대신 onClick 속성으로 클릭 이벤트가 발생하면 fn_boardView() 함수를 호출 하도록 하였습니다.



Service 만들기(BoardService)

글 상세 조회는 두 가지 작업을 처리 해야 합니다.

하나는 클릭한 글의 상세 내용을 읽어 오는 것과 글의 조회수를 +1 시켜주는 것입니다.

따라서, Service 에서 DAO에 두번의 요청을 해야 합니다.


BoardService.java (interface) 추가 내용

public BoardVO getBoardContent(int bid) throws Exception;



BoardServiceImpl.java 추가내용

public BoardVO getBoardContent(int bid) throws Exception{

boardDAO.updateViewCnt(bid);

return boardDAO.getBoardContent(bid);

}


소스코드를 보면 먼저 조회수를 업데이트 시키는 DAO를 먼저 호출하고,

게시글을 읽어와 return 해주고 있습니다.




Controller 만들기(BoardController)

controller에서는 Service에서 return 받은 글의 상세내역(boardVO) 를 화면에 전달합니다.


BoardController.java 추가내용

@RequestMapping(value = "/getBoardContent", method = RequestMethod.GET)

public String getBoardContent(Model model, @RequestParam("bid") int bid) throws Exception {

model.addAttribute("boardContent", boardService.getBoardContent(bid));

return "board/boardContent";

}


Service 에서 받아온 데이터는 model.addAttribute 를 통해 화면으로 전달을 할 수 있게 되는데

위의 구문은 "boardContent" 라는 이름으로 화면에 데이터를 전달한다는 내용입니다.

또한 상세내용을 보여줄 화면의 파일 이름은 board 아래 있는 boardContent.jsp 라는 것을 알 수 있습니다.




상세조회 화면 만들기(boardContent)

상세 조회 화면은 Controller에서 넘겨 받은 데이터(boardContent)에서 데이터를 뽑아 출력해 줍니다.

또한 글의 수정이나 삭제를 할 수 있도록 각각의 버튼을 추가 합니다.


boardContent.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>


<%@ include file="/WEB-INF/views/layout/header.jsp"%>


<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">


<title>board</title>


<script>

$(document).on('click', '#btnList', function(){

location.href = "${pageContext.request.contextPath}/board/getBoardList";

});

</script>


</head>

<body>

<article>

<div class="container" role="main">

<h2>board Content</h2>

<div class="bg-white rounded shadow-sm">

<div class="board_title"><c:out value="${boardContent.title}"/></div>

<div class="board_info_box">

<span class="board_author"><c:out value="${boardContent.reg_id}"/>,</span><span class="board_date"><c:out value="${boardContent.reg_dt}"/></span>

</div>

<div class="board_content">${boardContent.content}</div>

<div class="board_tag">TAG : <c:out value="${boardContent.tag}"/></div>

</div>

<div style="margin-top : 20px">

<button type="button" class="btn btn-sm btn-primary" id="btnUpdate">수정</button>

<button type="button" class="btn btn-sm btn-primary" id="btnDelete">삭제</button>

<button type="button" class="btn btn-sm btn-primary" id="btnList">목록</button>

</div>

</div>

</article>

</body>

</html>


아직 '수정' 이나 '삭제'  버튼에 대한 이벤트는 만들지 않았습니다.

두 버튼의 이벤트는 해당 포스팅에서 추가할 예정입니다.

위 소스에서 유심히 살펴 봐야 할 부분은, Controller에서 넘어온 데이터(boardContent) 에서

제목, 작성자 등의 데이터를 어떻게 뽑아 내는지 입니다.

각각의 데이터에는 다음과 같이 접근 할 수 있습니다.


${boardContent.필드명}


마지막으로 common.css 에 아래의 내용을 추가해 줍니다.

붉은 표시가 새롭게 추가할 내용입니다.


body {

padding-top: 70px;

padding-bottom: 30px;

}

.board_title {

font-weight : 700;

font-size : 22pt;

margin : 10pt;

}

.board_info_box {

color : #6B6B6B;

margin : 10pt;

}

.board_author {

font-size : 10pt;

margin-right : 10pt;

}

.board_date {

font-size : 10pt;

}

.board_content {

color : #444343;

font-size : 12pt;

margin : 10pt;

}

.board_tag {

font-size : 11pt;

margin : 10pt;

padding-bottom : 10pt;

}


이제 제목을 클릭하여 상세조회 페이지로 이동을 확인해 봅니다.





블로그 만들기 포스팅 리스트

  1. Spring 블로그 만들기 - 1. 프로젝트 생성 및 character encoding setting
  2. Spring 블로그 만들기 - 2. DB 셋팅 및 접속 테스트 Part.1
  3. Spring 블로그 만들기 - 2. DB 셋팅 및 접속 테스트 Part.2
  4. Spring 블로그 만들기 - 3. 게시판 리스트 화면 만들기
  5. Spring 블로그 만들기 - 4. 글쓰기 화면 만들기
  6. Spring 블로그 만들기 - 5. 상세조회 화면 만들기
  7. Spring 블로그 만들기 - 6. 수정 및 삭제
  8. Spring 블로그 만들기 - 7. 예외 처리
  9. Spring 블로그 만들기 - 8. 트랜젝션 처리
  10. Spring 블로그 만들기 - 9. 페이징(pagination)
  11. Spring 블로그 만들기 - 10. 게시물 검색(search)
  12. Spring 블로그 만들기 - 11. properties 사용하기
  13. Spring 블로그 만들기 - 12. 댓글 리스트
  14. Spring 블로그 만들기 - 13. 댓글 쓰기/수정/삭제
  15. Spring 블로그 만들기 - 14. 위지윅 에디터 사용하기(CKEditor5)
  16. Spring 블로그 만들기 - 15. 상단 메뉴바 만들기(부트스트랩)
  17. Spring 블로그 만들기 - 16. 게시판 메뉴 관리
  18. Spring 블로그 만들기 - 17. 로그인 화면 만들기 및 레이아웃 나누기
  19. Spring 블로그 만들기 - 18. 회원가입 및 관리





※ 포스팅에 오타나 잘못된 부분, 추가적으로 더 알고 싶은 부분이 있으면 댓글 주세요~



반응형
저작자표시 비영리 변경금지

'개발 > Spring 블로그 만들기' 카테고리의 다른 글

Spring 블로그 만들기 - 7. 예외 처리  (4) 2019.02.22
Spring 블로그 만들기 - 6.수정 및 삭제  (27) 2019.02.20
Spring 블로그 만들기 - 4.글쓰기 화면 만들기  (11) 2019.01.21
Spring 블로그 만들기 - 3. 게시판 리스트 화면 만들기  (6) 2019.01.18
Spring 블로그 만들기 - 2. DB 셋팅 및 접속 테스트 Part.2  (31) 2019.01.18

관련글

티스토리툴바