[스프링 게시판][2] 게시판 목록 기능 구현

Git 주소 : github.com/sjinjin7/Blog_BoardProject

목표

 

게시판 목록 기능 구현

 게시판 정보 테이블(vam_board)로 부터 등록된 게시판 정보를 모두 가져와서 웹에 표의 형태로 출력하는 것을 목표로 합니다. 

 

순서

1. Mapper 처리 및 테스트

2. Service 처리 및 테스트

3. Controller 처리 

4. View 처리

 

 

1. Mapper 처리 및 테스트

BoardMapper.java

 

 이번 포스팅의 목표인 '게시판 목록'은 DB에 저장된 vam_board 테이블의 모든 행의 정보를 출력시키는 것입니다. 따라서 사용할 SQL 명령문은 SELECT문입니다. DB에서 직접 실행하여 정상적으로 출력되는지 확인합니다. 

 

 
select * from vam_board;
 

 

그림 1

 

그림 2

 

 BoardMapper.java 인터페이스에 목록기능을 수행하는 getList() 메서드를 작성합니다. 해당 메서드의 반환 타입은 List <BoardVO>로 작성합니다.

 

 
    /* 게시판 목록 */
    public List<BoardVO> getList();
 

 

그림 3

 

※ SELECT 결과 하나의 행에 대한 정보만 얻을 경우에는 BoardVO 클래스 타입으로 반환 받으면 됩니다. 하지만 목록 페이지의 경우 대부분 2개 이상의 행에 있는 정보를 반환받아야 합니다. 따라서 List 타입으로 반환받습니다. (List <BoardVO>에 대해 이해하고 싶으시다면 '컬렉션 프레임웍'과 '제너릭' 에 대한 공부를 하시면 됩니다.)

 

※ List는 배열과 비슷한 자바의 자료형입니다. 배열에 비해 여러 편리한점이 많지만 그중 가장 큰 장점은 크기가 가변적이라는 점입니다. 배열의 경우 크기가 10개로 정했다면 10개를 초과하는 값들은 담을 수 없습니다. 더 많은 값을 담고 싶다면 새로운 더 큰 배열을 생성하여 사용하여야 합니다. 하지만 List의 경우 10개의 크기로 생성하였더라도 11번째 값을 저장할 때 동적으로 그 크기가 커집니다. 

 

그림 4

 

 

BoardMapper.xml

 

 BoardMapper.xml 파일에 <select>태그를 추가합니다 select태그의 id 속성 값은 '게시판 목록' 메서드명과 동일해야 합니다. resultType 속성 값은 경로를 포함한 BoardVO를 작성합니다.

 

 
    <!-- 게시판 목록 -->
    <select id="getList" resultType="com.vam.model.BoardVO">
    
        
    
    </select>
 

 

 작성한 태그 내부에 앞서 테스트한 SELECT문을 작성합니다. ( Oracle의 경우에는 반드시 ";"가 없어야 합니다.)

 

 
    <!-- 게시판 목록 -->
    <select id="getList" resultType="com.vam.model.BoardVO">
    
        select * from vam_board
    
    </select>
 

 

그림 5

 

Mapper 테스트

 

 Mapper 메서드가 정상적으로 동작하는지 BoardMapperTests.java 를 통해 테스트합니다. 기존 '게시판 등록'을 테스트하기 위해 작성한 메서드는 주석 처리하고 아래의 코드를 추가한 후 Junit 테스트를 합니다.

 

 게시판 목록 메서드를 수행 후 반환받은 List 객체의 for문을 통해 모든 요소를 출력하는 코드를 작성하였습니다. List의 모든 요소를 출력하는 방법은 '일반적인 for문', 'foreach문(향상된for문)', 'foreach & 람다'가 있습니다. 자신이 편한 방식을 선택하면 됩니다. 

 

 
    /* 게시판 목록 테스트 */
     @Test
     public void testGetList() {
         
         
         List list = mapper.getList();
        /* 일반적 for문 */
         for(int i = 0; i < list.size();i++) {
             log.info("" + list.get(i));
         }
         
        /* foreach문(향상된 for문) */
         for(Object a : list) {
             log.info("" + a);
         }
         
        /* foreach문 & 람다식 */
         list.forEach(board -> log.info("" + board));
         
     }
 

 

그림 6

 

그림 7

 

 

2. Service 처리 및 테스트

 BoardService.java 인터페이스에 '게시판 목록' 쿼리 수행을 호출하는 메서드를 추가합니다. 해당메서드도 게시판 목록 데이터를 반환받아야 하기 때문에 리턴 타입은 List <BoardVO>입니다.

 

 
    /* 게시판 목록 */
    public List<BoardVO> getList();
 

 

그림 8

 

 

 BoardServiceImpl.java 클래스에 인터페이스에서 선언한 메서드를 오버라이딩 하여 구현합니다.

 

 
    @Override
    public List<BoardVO> getList() {
        
        return mapper.getList();
    }
 

 

그림 9

 

 작성한 Service 단계의 메서드가 정상적으로 동작하는지 BoardServiceTests.java 클래스에서 Junit 테스트를 합니다.  기존 '게시판 등록' 메소드를 테스트를 위해 작성한 코드는 주석처리 한 뒤, 테스트 코드를 작성합니다. 테스트 코드는 BoardMapperTests.java 클래스에 진행한 코드와 동일합니다. 정상적으로 목록이 console창에 출력되는지 확인합니다.

 

 log를 사용하기 위해서 log 변수를 선언하였습니다. (Lombok이 있을 시 @log4j 어노테이션만 추가하면 됩니다.) 

 

 
    private static final Logger log = LoggerFactory.getLogger(BoardServiceTests.class);
 
 
    /* 게시판 목록 테스트 */
    @Test
    public void testGetList() {
        
        service.getList().forEach(board -> log.info("" + board));        
        
    }
 

 

그림 10

 

그림 11

 

 

3. Controller 처리

 기존 '게시판 목록 페이지 이동' 메소드(boardListGET)에 뷰(View)에 데이터를 전송하기 위해 Model 파라미터를 추가합니다. 

 

 addAttribute 메소드를 호출하여 "list"라는 속성명에 BoardService 클래스의 getList() 메소드를 반환 값(게시판 목록 데이터)을 속성 값으로 저장합니다. 

 

 
    /* 게시판 목록 페이지 접속 */
    @GetMapping("/list")
    // => @RequestMapping(value="list", method=RequestMethod.GET)
    public void boardListGET(Model model) {
        
        log.info("게시판 목록 페이지 진입");
        
        model.addAttribute("list", bservice.getList());
        
    }
 

 

 

 

4. View 처리

 '게시판 목록' 페이지에 테이블 추가와 <style> 태그를 통해 약간의 CSS 설정을 추가하였습니다. 

 

그림 13

 

list.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>    
<!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>
  a{
  	text-decoration : none;
  }
  table{
 	border-collapse: collapse;
 	width: 1000px;    
 	margin-top : 20px;
 	text-align: center;
  }
  td, th{
  	border : 1px solid black;
  	height: 50px;
  }
  th{
  	font-size : 17px;
  }
  thead{
  	font-weight: 700;
  }
  .table_wrap{
  	margin : 50px 0 0 50px;
  }
  .bno_width{
  	width: 12%;
  }
  .writer_width{
  	width: 20%;
  }
  .regdate_width{
  	width: 15%;
  }
  .updatedate_width{
  	width: 15%;
  }
  .top_btn{
  	font-size: 20px;
    padding: 6px 12px;
    background-color: #fff;
    border: 1px solid #ddd;
    font-weight: 600;
  }
  </style>
</head>
<body>
<h1>목록페이지입니다.</h1>

<div class="table_wrap">
	<a href="/board/enroll" class="top_btn">게시판 등록</a>
	<table>
		<thead>
			<tr>
				<th class="bno_width">번호</th>
				<th class="title_width">제목</th>
				<th class="writer_width">작성자</th>
				<th class="regdate_width">작성일</th>
				<th class="updatedate_width">수정일</th>
			</tr>
		</thead>
			<tr>
				<td>번호 내용</td>
				<td>제목 내용</td>
				<td>작성자 내용</td>
				<td>작성일 내용</td>
				<td>수정일 내용</td>
			</tr>
			<tr>
				<td>번호 내용</td>
				<td>제목 내용</td>
				<td>작성자 내용</td>
				<td>작성일 내용</td>
				<td>수정일 내용</td>
			</tr>
	</table>
</div>

<script>
$(document).ready(function(){
	
	let result = '<c:out value="${result}"/>';
	
	checkAlert(result);
	
	function checkAlert(result){
		
		if(result === ''){
			return;
		}
		
		if(result === "enrol success"){
			alert("등록이 완료되었습니다.");
		}
		
	}	
	
});
</script>

</body>
</html>

 

 서버로부터 넘겨받은 List타입의 객체인 "list" 데이터를 통해 테이블의 내용 부분을 채워야 합니다.

 

그림 14

 

 List, 배열 요소를 반복해서 처리해주는 태그인 <c:foreach> 태그를 통해서 "list" 데이터를 처리합니다. 기존의 내용이 삽입된 <tr>, <td> 태그를 지우고 아래의 코드를 추가합니다.

 

그림 15

 

 
        <c:forEach items="${list}" var="list">
            <tr>
                <td><c:out value="${list.bno}"/></td>
                <td><c:out value="${list.title}"/></td>
                <td><c:out value="${list.writer}"/></td>
                <td><c:out value="${list.regdate}"/></td>
                <td><c:out value="${list.updateDate}"/></td>
            </tr>
        </c:forEach>
 

 

그림 16

 

그림 17

 

 - <c:foreach> 태그는 "list"가 가진 요소수만큼 반복하여 처리합니다.

 

 - <c:foreach> 'items' 속성에 서버로부터 전달받은 List 객체인 "${list}"를 속성 값으로 부여합니다. 'var' 속성에는 반복할 List, 배열 객체를 부를 변수명("list")을 삽입합니다. 

 

 - 전달받은 ${list} 객체에는 각 요소에 BoardVO 객체가 저장되어 있습니다. "${변수명.BoardVO멤버 변수명}"을 통해 각 요소가 가진 멤버들의 값을 호출할 수 있습니다. ( 표현 언어(EL)인 ${list.bno}를 그대로 사용해도 출력이 되지만 <c:out> 태그의 여러 이점 때문에 <c:out value="${list.bno">로 표현하였습니다. 

 

 

 

 '작성일'과 '수정일'의 경우 날짜뿐만 아니라 시/분/초까지 출력되고 있습니다. <fmt> 태그를 통해서 '년도/월/일' 형식으로 출력되도록 변경하였습니다. (fmt 태그를 사용하기 위해선 라이브러리 코드를 추가해주어야 합니다. )

 

 
    <!-- 라이브러리 코드 -->
    <%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
 
    <!-- 기존 코드 -->
                <td><c:out value="${list.regdate}"/></td>
                <td><c:out value="${list.updateDate}"/></td>
 
    <!-- 변경 코드 -->
                <td><fmt:formatDate pattern="yyyy/MM/dd" value="${list.regdate}"/></td>
                <td><fmt:formatDate pattern="yyyy/MM/dd" value="${list.updateDate}"/></td>
 
 

 

그림 18

 

그림 19

 

그림 20

 

 

REFERENCE

•  

DATE

• 2020.02.19