74일차: Model 2 게시판(2): 글 목록 / 상세 페이지_ 2021.09.30

 

목차

1.     글 목록

2.     상세 페이지

 

 

 

1. 글 목록

 

1) 서비스 클래스(BoardListAction.java)

- 글 목록 서비스 클래스에서는 페이지 처리 등과 관련된 여러 변수를 정의하고, DAO 객체를 생성해 DB를 연동해서 총 데이터 개수, 지정된 수의 데이터 등을 가져온다.

- 서비스 클래스에서 구한 값은 request 객체로 공유 설정을 해야 뷰 페이지에서 값을 불러올 수 있다.

- request 객체로 공유한 값을 뷰 페이지에서 사용하기 위해서는 dispatcher 방식으로 포워딩해야 한다.

- BoardListAction.java → BoardFrontController.java

 

2) 컨트롤러 클래스(BoardFrontController.java)

- 서비스 클래스(BoardListAction.java)로부터 forward 값을 리턴받으면 dispatcher 방식으로 뷰 페이지(qna_board_list.jsp)로 포워딩한다.

- BoardFrontController.java → qna_board_list.jsp

 

3) 뷰 페이지(qna_board_list.jsp)

- 뷰 페이지에서는 서비스 클래스에서 request로 공유한 값을 출력한다.

- 기본 자료형은 공유되는 name 값을 이용해서 EL 태그로 바로 출력 가능하다.

 (ex. 글 개수 : ${listcount}개 )

 

 

• Request 객체로 공유되는 값의 형태 세 가지

① 기본 자료형 int형 : 공유되는 name 값을 이용해 EL 태그로 바로 출력(ex. page, listcount, pageCount, startPage, endPage)

② List : forEach 태그의 items 값에 넣어 출력

③ DTO 객체: ${객체명.프로퍼티명}으로 출력

 

<%@ 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="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
 
 
<a href="./BoardForm.do">글 쓰기</a> <br>
글 개수 : ${listcount}개 <br>        
 
<table border=1 width=700 align=center>
    <caption><h3>게시판 목록</h3></caption>
        <tr>
            <th>번호</th>
            <th>제목</th>
            <th>작성자</th>
            <th>날짜</th>
            <th>조회수</th>
        </tr>
 
        <c:set var="num" value="${listcount - (page-1) * 10 }" />
        <c:forEach var="b" items="${boardlist}">
        <tr>
              <td>${num}
                  <c:set var="num" value="${num-1}"/>
              </td>
              <td>
                  <!-- 댓글 제목 앞에 여백 처리 -->
                  <c:if test="${b.board_re_lev > 0 }">
                      <c:forEach var="i" begin="0" end="${b.board_re_lev}">
                          &nbsp;
                      </c:forEach>
                  </c:if>
                  
                  <a href="./BoardDetailAction.do?board_num=${b.board_num}&page=${page}">
                      ${b.board_subject}
                  </a>
              </td>
              <td>${b.board_name}</td>    
              <td>
                  <fmt:formatDate value="${b.board_date}" pattern="yyyy-MM-dd (E) HH:mm:ss"/>
              </td>
              <td>${b.board_readcount}</td>
        </tr>
        </c:forEach>
</table> <br><br>
 
<!-- 페이지 처리 -->
<center>
<c:if test="${listcount > 0}">
 
<!-- 1 페이지로 이동 -->
    <a href="./BoardListAction.do?page=1" style="text-decoration:none">
     <<  
    </a>
    
<!-- 이전 블럭으로 이동 -->
    <c:if test="${startPage > 10 }">
        <a href="./BoardListAction.do?page=${startPage-10}" style="text-decoration:none">
            [이전]
        </a>
    </c:if>
 
<!-- 각 블럭에 10개의 페이지 출력 -->
    <c:forEach var="i" begin="${startPage}" end="${endPage}">
        <c:if test="${i == page}">        <!-- 현재 페이지 -->
            <font style="font-size:20"> [${i}] </font>
        </c:if>
        <c:if test="${i != page}">        <!-- 현재 페이지가 아닌 경우 -->
            <a href="./BoardListAction.do?page=${i}" style="text-decoration:none">
                [${i}]
            </a>
        </c:if>    
    </c:forEach>
    
<!-- 다음 블럭으로 이동 -->
    <c:if test="${endPage < pageCount}">
        <a href="./BoardListAction.do?page=${startPage+10}" style="text-decoration:none">
            [다음]
        </a>
    </c:if>
    
<!-- 마지막 페이지로 이동 -->
    <a href="./BoardListAction.do?page=${pageCount}" style="text-decoration:none">
    >>
    </a>
</c:if>    
 
</center>
 
 

 

 

2. 상세 페이지

 

1) 서비스 클래스(BoardDetailAction.java)

- 목록 페이지(qna_board_list.jsp)에서 게시글의 제목을 클릭하면 해당 글의 상세 페이지로 이동한다.

- 이때, “./BoardDetailAction.do”로 컨트롤러를 호출하게 되고, 글의 번호 값과 현재 페이지 번호를 get 방식으로 가지고 간다.

(ex. <a href="./BoardDetailAction.do?board_num=${b.board_num}&page=${page}">

           ${b.board_subject}

       </a> )

- qna_board_list.jsp → BoardFrontController.java

 

2) 컨트롤러 클래스(BoardFrontController.java)

- 뷰 페이지(qna_board_list.jsp)에서 “/BoardDetailAction.do”로 요청한 값을 받아 처리한다.

- 서비스 클래스인 BoardDetailAction의 객체를 생성하고 execute() 메소드를 호출한다.

- BoardFrontController.java → BoardDetailAction.java

 

3) 서비스 클래스(BoardDetailAction.java)

- 목록 페이지(qna_board_list.jsp)에서 제목을 클릭할 때 전달한 값을 받는다.(board_num, page)

- DAO 객체를 생성해서 DB와 연동하고 메소드를 이용하여 조회수(board_readcount) 값을 1 증가시킨다.

- page 값과 getDetail() 메소드로 호출한 DTO 값을 request로 공유 설정한다.

- ActionForward 객체를 생성하고 전송 방식과 경로를 설정한 후 리턴한다.

- request 객체로 공유한 값을 포워딩된 페이지에서 사용하기 위해서는 전송 방식이 dispatcher 방식으로 설정되어야 한다.

- BoardDetailAction.java → BoardFrontController.java

 

4) 컨트롤러 클래스(BoardFrontController.java)

- 서비스 클래스(BoardDetailAction.java)로부터 forward 값을 리턴받으면 뷰 페이지로 포워딩한다.

- BoardFrontController.java → qna_board_view.jsp

 

5) 뷰 페이지(qna_board_view.jsp)

- 서비스 클래스(BoardDetailAction.java)에서 request 객체로 공유한 값을 받아서 상세 페이지 내용을 보여준다.

- 첨부 파일은 JSTL if 태그를 사용해서 첨부 파일이 있는 경우에만 보여준다.

- 상세 페이지 하단에는 댓글, 수정, 삭제, 목록 버튼을 만든다.

- ‘목록’ 버튼을 누르면 “/BoardListAction.do”로 컨트롤러를 호출해서 목록 페이지로 이동하게 되는데, 이때 해당 게시글의 페이지 번호 값을 get 방식으로 함께 전달한다.