Kim VamPa

[스프링 게시판][3] 게시판 조회 기능 구현 본문

스프링 프레임워크/게시판 프로젝트

[스프링 게시판][3] 게시판 조회 기능 구현

Kim VamPa 2021. 2. 22. 10:18
728x90
반응형

Git 주소 : github.com/sjinjin7/Blog_BoardProject

목표

 

게시판 조회 기능 구현

 여러 게시판의 정보가 나열되어 있는 '목록 페이지(list.jsp)'에서 게시판의 '제목'을 클릭 하였을대 해당 게시판의 상세 정보를 볼 수 있는 '조회 페이지(get.jsp)'로 이동 하는 것을 구현 할 것입니다. 

 

 

순서

1. Mapper 처리 및 테스트

2. Service 처리 및 테스트

3. Controller 처리 

4. View 처리(get.jsp)

5. '목록 페이지' <a>태그 추가 (list.jsp)

 

 

1. Mapper 처리 및 테스트

쿼리문 테스트

 

 '게시판 조회'의 경우 '게시판 조회'와 다르게 하나의 행에 대한 정보(한 개의 게시판 정보)만 있으면 됩니다. 사용할 쿼리문은 아래와 같습니다.

 

 WHERE 조건문에서 PRIMARY KEY인 bno(게시판 번호)를 조건으로 사용하였습니다.

 

1
2
3
 
select * from vam_board where bno = 8;
 

 

 

 데이터베이스에서 직접 실행해서 해당 쿼리문이 실행되는지 확인합니다.

 

 

 

 

BoardMapper.java 인터페이스 

 BoardMapper.java 인터페이스에 아래의 메소드를 추가합니다. 하나의 게시판 정보를 얻기 위해서는 그 게시판의 게시판 번호를 알아야 하기 때문에 게시판 정보 데이터를 전달받을 수 있도록 int형 변수를 파라미터로 추가합니다.

 

1
2
3
4
 
    /* 게시판 조회 */
    public BoardVO getPage(int bno);
 

 

그림 3

 

BoardMapper.xml

 

 BoardMapper.xml에 새로 추가한 메서드가 실행해야할 쿼리문이 포함된 <select> 태그를 추가합니다.

 

1
2
3
4
5
6
7
8
 
    <!-- 게시판 조회 -->
    <select id="getPage" resultType="com.vam.model.BoardVO">
    
        select * from vam_board where bno = #{bno}
    
    </select>
 

 

그림 4

 

Mapper 메소드 테스트

 

 새로 추가한 메소드(getPage())를 테스트합니다. BoardMapperTests.java 클래스에 아래의 코드를 추가 한 뒤 Junit 테스트합니다. (기존의 테스트 코드는 주석 처리합니다.)

 

1
2
3
4
5
6
7
8
9
10
11
12
 
    /* 게시판 조회 */
     @Test
    public void testGetPage() {
        
        /* 실제 존재하는 페이지 */
        int bno = 8;
        
        log.info("" + mapper.getPage(bno));
        
    }
 

 

그림 5

 

그림 6

 

 

2. Service 처리 및 테스트

BoardService.java 인터페이스

 

 BoardService.java 인터페이스에 '게시판 조회' 메소드(getPage())를 추가합니다. 하나의 게시판 정보를 반환받는 것이 목표이기 때문에 반환 타입을 BoardVO로 합니다.

 

1
2
3
4
 
    /* 게시판 조회 */
    public BoardVO getPage(int bno);
 

 

그림 7

 

BoardServiceImpl.java 클래스

 

 BoardServiceImpl.java 에 인터페이스에서 선언한 메소드를 구현합니다. 구현부에는 BoardMapper.java 인터페이스의 '게시판 조회' 메소드를 호출합니다.

 

1
2
3
4
5
6
7
8
 
    /* 게시판 조회 */
    @Override
    public BoardVO getPage(int bno) {
         
        return mapper.getPage(bno);
    }    
 

 

그림 8

 

BoardServiceTests.java

 

 작성한 Service 메소드를 테스트합니다. BoardServiceTests.java 클래스에 기존의 테스트 코드를 주석 처리한 후 아래의 코드를 추가하여 테스트를 합니다.

 

1
2
3
4
5
6
7
8
9
10
11
 
    /*게시판 조회*/
    @Test
    public void testGETPage() {
        
        int bno = 8;
        
        log.info("" + service.getPage(bno));
        
    }
 

 

그림 10

 

 

3. Controller 처리

 '게시판 조회' 요청을 처리하는 url 맵핑 메소드를 작성합니다. 뷰(View)로부터 '게시판 번호'를 전달받기 위해 int형 변수를 파라미터라 추가합니다. 더불어 '게시판 조회'페이지에 쿼리 실행 후 전달받는 BoardVO 객체 데이터를 전달하기 위해 Model을 파라미터로 추가합니다.

 

 addAttribute 메소드를 호출하여 "pageInfo" 속성명에 BoardService 인터페이스의 getPage() 메소드 호출하여 반환받은 BoardVO 객체를 속성 값으로 저장합니다.

 

 

1
2
3
4
5
6
7
8
9
 
    /* 게시판 조회 */
    @GetMapping("/get")
    public void boardGetPageGET(int bno, Model model) {
        
        model.addAttribute("pageInfo", bservice.getPage(bno));
        
    }
 

 

그림 11

 

 

4. View 처리(get.jsp)

 '게시판 조회' url 경로("/board/get")에 맞게 'WEB-INF/views/board/'에 "get.jsp" 파일을 생성합니다. 해당 파일은 아래와 같이 작성했습니다.

 

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
    <%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>    
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script
  src="https://code.jquery.com/jquery-3.4.1.js"
  integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
  crossorigin="anonymous"></script>
  <style>
<style type="text/css">
.input_wrap{
	padding: 5px 20px;
}
label{
    display: block;
    margin: 10px 0;
    font-size: 20px;	
}
input{
	padding: 5px;
    font-size: 17px;
}
textarea{
	width: 800px;
    height: 200px;
    font-size: 15px;
    padding: 10px;
}
.btn{
  	display: inline-block;
    font-size: 22px;
    padding: 6px 12px;
    background-color: #fff;
    border: 1px solid #ddd;
    font-weight: 600;
    width: 140px;
    height: 41px;
    line-height: 39px;
    text-align : center;
    margin-left : 30px;
    cursor : pointer;
}
.btn_wrap{
	padding-left : 80px;
	margin-top : 50px;
}
</style>
</head>
<body>
<h1>조회 페이지</h1>
	<div class="input_wrap">
		<label>게시판 번호</label>
		<input name="bno" readonly="readonly" value='<c:out value="${pageInfo.bno}"/>' >
	</div>
	<div class="input_wrap">
		<label>게시판 제목</label>
		<input name="title" readonly="readonly" value='<c:out value="${pageInfo.title}"/>' >
	</div>
	<div class="input_wrap">
		<label>게시판 내용</label>
		<textarea rows="3" name="content" readonly="readonly"><c:out value="${pageInfo.content}"/></textarea>
	</div>
	<div class="input_wrap">
		<label>게시판 작성자</label>
		<input name="writer" readonly="readonly" value='<c:out value="${pageInfo.writer}"/>' >
	</div>
	<div class="input_wrap">
		<label>게시판 등록일</label>
		<input name="regdater" readonly="readonly" value='<fmt:formatDate pattern="yyyy/MM/dd" value="${pageInfo.regdate}"/>' >
	</div>
	<div class="input_wrap">
		<label>게시판 수정일</label>
		<input name="updateDate" readonly="readonly" value='<fmt:formatDate pattern="yyyy/MM/dd" value="${pageInfo.updateDate}"/>' >
	</div>		
	<div class="btn_wrap">
		<a class="btn" id="list_btn">목록 페이지</a> 
		<a class="btn" id="modify_btn">수정 하기</a>
	</div>
	<form id="infoForm" action="/board/modify" method="get">
		<input type="hidden" id="bno" name="bno" value='<c:out value="${pageInfo.bno}"/>'>
	</form>
<script>
	let form = $("#infoForm");
	
	$("#list_btn").on("click", function(e){
		form.find("#bno").remove();
		form.attr("action", "/board/list");
		form.submit();
	});
	
	$("#modify_btn").on("click", function(e){
		form.attr("action", "/board/modify");
		form.submit();
	});	
</script>	
</body>
</html>

 

 작성한 내용을 살펴보면 먼저 jstl의 'core'와 'fmt'를 사용하기 위해서 라이브러리 코드를 추가하였습니다. jquery를 사용하기 위해 jquery 라이브러리 코드 또한 추가하였습니다.

 

그림 12

 

 게시판의 내용이 출력되는 부분의 경우 <input>, <textarea> 태그의 "value" 속성에 서버로부터 전달받은 ${pageInfo} 객체에 담긴 데이터들을 속성 값으로 부여하여 페이지에 출력되도록 하였습니다. '조회 페이지'에서는 기존의 데이터를 수정할 수 없어야 하기 때문에 "readonly" 속성을 부여하였습니다.

 

 

 버튼의 경우 아래와 같이 url 경로에 직접 서버로 전송할 데이터를 작성할 수도 있습니다.

 

1
2
3
4
 
        <a class="btn" id="list_btn" href="/board/list">조회 페이지</a> 
        <a class="btn" id="modify_btn" href="/board/modify?bno='${pageInfo.bno}'}">수정 하기</a>
 

 

 하지만 추 후 '페이징' 적용, '검색 조건' 적용 등 여러 기능이 추가에 따라 유연하게 다양한 상황을 처리하기 위해서 <form> 태그를 사용하였습니다. 

 

그림 14

 

 버튼이 동작하도록 <script> 태그와 JS코드를 작성하였습니다.

 

그림 15

 

 <head> 태그에 <style> 태그를 추가하여 css 설정을 해주었습니다.

 

그림 16

 

그림 17

 

 

5. '목록 페이지' <a>태그 추가 (list.jsp)

 '목록 페이지(list.jsp)'에서 제목을 클릭했을 때 해당 '조회 페이지(get.jsp)' 페이지로 이동할 수 있도록 <a> 태그를 추가합니다. 

 

1
2
3
4
5
 
                    <a class="move" href='/board/get?bno=<c:out value="${list.bno}"/>'>
                        <c:out value="${list.title}"/>
                    </a>
 

 

그림 18

 

 

 <a> 태그를 추가해줌으로써 '조회 페이지' 이동은 구현이 되었습니다. 그렇지만 해당 이동 구현 또한 나중에 추가될 기능에 따라 유연하게 동작할 수 있도록 <form> 태그를 통해 페이지 이동되도록 변경하겠습니다.

 

 앞서 추가한 <a> 태그 'href' 속성의 속성 값을 게시판 번호(bno) 값만 저장되도록 변경합니다. 그리고 <body> 태그 내부에 <form> 태그를 추가합니다. <form> 태그엔 id속성과, method 속성(속성 값 "get")을 추가합니다. 

 

 

1
2
3
4
5
6
7
8
9
 
    <a class="move" href='<c:out value="${list.bno}"/>'>
        <c:out value="${list.title}"/>
    </a>
 
 
    <form id="moveForm" method="get">    
    </form>
 

 

그림 19

 

 <a> 태그가 동작하도록 Javascript코드를 추가합니다.

 

1
2
3
4
5
6
7
8
9
10
11
 
    let moveForm = $("#moveForm");
 
    $(".move").on("click", function(e){
        e.preventDefault();
        
        moveForm.append("<input type='hidden' name='bno' value='"+ $(this).attr("href")+ "'>");
        moveForm.attr("action", "/board/get");
        moveForm.submit();
    });
 

 

그림 20

 

 추가한 Javascript 코드의 내용을 보면 다음과 같습니다.  '클릭한 <a>태그 기능 정지' => '<form> 태그 내부 bno값을 저장하는 <input>태그 생성' => '<form>태그 action 속성 추가' => '<form>태그 내부 데이터 서버 전송'

 

 작성이 완료되었다면 정상적으로 이동이 되는지 테스트해봅니다.

 

REFERENCE

  •  

DATE

  • 2020.02.22
728x90
반응형
저작자표시

'스프링 프레임워크 > 게시판 프로젝트' 카테고리의 다른 글

[스프링 게시판][5] 게시판 삭제 기능 구현  (9) 2021.02.24
[스프링 게시판][4] 게시판 수정 기능 구현  (24) 2021.02.23
[스프링 게시판][2] 게시판 목록 기능 구현  (11) 2021.02.19
[STS][스프링 게시판][1] 게시판 등록 기능 구현 - 2  (18) 2021.02.17
[STS][스프링 게시판][1] 게시판 등록 기능 구현 - 1  (19) 2021.02.17
donaricano-btn
'스프링 프레임워크/게시판 프로젝트' Related Articles more
Comments