Java Spring JSP웹페이지 만들기6 (게시글 상세보기 페이지 만들기)

호연지기·2023년 5월 26일

Spring

spring을 활용한 웹 페이지 만들기(jsp)

목록 보기

7/10

📌 상세보기 페이지 만들기 (boardContents)

게시글 목록에서 게시글 클릭하면 나오는 상세 페이지 만들기

✏ 작업 순서

css와 데이터베이스 자료는 생성되어 있던 것 사용

게시글 상세페이지 jsp 파일을 생성( boardContents.jsp )
컨트롤러에서 생성한 jsp 파일로 이동할 @GetMapping 메소드 생성( BoardController )
게시글 가져오는 작업 처리( BoardService , BoardDao)
- 글 내용, 파일 목록, 댓글 목록
- 본인이 작성한 글일 경우에만 버튼(수정,삭제) 출력

💫 게시글 상세보기 페이지 생성(JSP)

💻 boardContents 소스

DB에 저장된 데이터를 가져와야 하므로 태그(taglib 사용)를 사용해서 묶어주고 이에 대한 처리를 서비스 클래스에서 해준다.

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

taglib를 사용하기 위해 boardContents상단에서 fmt와 c를 불러온다.

<h2 class="login-header">상세 보기</h2>
<div>
  <div class="t_content p-15">NUM</div>
  <div class="d_content p-85">${board.b_num}</div>
</div>
<div>
  <div class="t_content p-15">WRITER</div>
  <div class="d_content p-35">${board.m_name}</div>
  <div class="t_content p-15">DATE</div>
  <div class="d_content p-35">
    <fmt:formatDate value="${board.b_date}" pattern="yyyy-MM-dd HH:mm:ss"></fmt:formatDate>
  </div>
</div>
<div>
  <div class="t_content p-15">TITLE</div>
  <div class="d_content p-85">${board.b_title}</div>
</div>
<div>
  <div class="t_content p-15 content_h">CONTENTS</div>
  <div class="d_content p-85 content_h">${board.b_contents}</div>
</div>
<div>
  <div class="t_content p-15 file_h">FILES</div>
  <div class="d_content p-85 file_h" style="overflow: auto;">
    <c:if test="${empty fList}">
      첨부된 파일이 없습니다.
    </c:if>
    <c:if test="${!empty fList}">
      <c:forEach var="fitem" items="${fList}">
        <a href="/download?bf_sysname=${fitem.bf_sysname}&bf_oriname=${fitem.bf_oriname}">
          <span class="file-title">
              ${fitem.bf_oriname}
          </span>
        </a>
      </c:forEach>
    </c:if>
  </div>
</div>

사용자 편의성을 위한 버튼 만들기

// 버튼(수정, 삭제, 뒤로가기)
<div class="btn-area">
  <button class="btn-write" id="upbtn" onclick="upboard('${board.b_num}')">U</button>
  <button class="btn-write" id="delbtn" onclick="delCheck('${board.b_num}')">D</button>
  <button class="btn-sub" onclick="backbtn()">B</button>
</div>

댓글 입력 창 & 댓글 테이블

<!-- 댓글 입력 양식 -->
<form id="rform">
  <!--게시글 정보(글번호), 댓글 내용, 접속자(작성자) 정보 -->
  <input type="hidden" name="r_bnum" value="${board.b_num}">
  <textarea class="write-input ta" rows="3" name="r_contents" id="comment" placeholder="댓글을 적어주세요."></textarea>
  <input type="hidden" name="r_id" name="r_id" value="${mb.m_id}">
  <input type="button" value="댓글 전송" class="btn-write" onclick="replyInsert()" style="width: 100%; margin-bottom: 30px;">
</form>
<table style="width: 100%"><!-- 제목 테이블-->
  <tr class="rtbl-head">
    <td class="p-20">WRITER</td>
    <td class="p-50">CONTENTS</td>
    <td class="p-30">DATE</td>
  </tr>
</table>
<table style="width: 100%" id="rtable">
  <c:forEach var="ritem" items="${rList}">
    <tr>
      <td class="p-20">${ritem.r_id}</td>
      <td class="p-50">${ritem.r_contents}</td>
      <td class="p-30">
        <fmt:formatDate value="${ritem.r_date}" pattern="yyyy-MM-dd HH:mm:ss"></fmt:formatDate>
      </td>
    </tr>
  </c:forEach>
</table>

💫 컨트롤러에서 게시글 상세보기 페이지 이동작업 처리

💻 BoardController 소스

@GetMapping("contents")
public ModelAndView boardContents(Integer b_num){
    log.info("boardContents()");
    mv = bServ.getBoard(b_num);

    return mv;
}

컨트롤러에서는 @GetMapping인지 @PostMapping인지랑 객체명들만 잘 지정해주면 크게 문제될 것이 없어서 마음이 편-안하다.

그럼 이제 마음 불편해지는 서비스 작업 처리하러 가보자.

💫 게시글 가져오기(Service, Dao)

💻 BoardService 소스

public ModelAndView getBoard(Integer b_num){
    log.info("getBoard()");
    mv = new ModelAndView();

    //글 내용 가져오기
    BoardDto board = bDao.selectBoard(b_num);

    //파일 목록 가져오기
    List<BfileDto> fList = bDao.selectFiles(b_num);

    //댓글 목록 가져오기
    List<ReplyDto> rList = bDao.selectReply(b_num);

    //조회수 1증가(수정)
    bDao.updateViews(b_num);

    //가져온 데이터를 mv에 담기
    mv.addObject("board", board);//글 내용
    mv.addObject("fList", fList);//파일 목록
    mv.addObject("rList", rList);//댓글 목록

    //mv에 view 지정하기
    mv.setViewName("boardContents");

    return mv;
}

게시글을 클릭하면 저장된 글 내용, 파일 목록, 댓글 목록을 가져오고 조회수가 1 증가한다.

조회수는 상세보기 화면에서 보이지 않고 글 목록에서만 노출되는 방식!

💻 BoardDao.java 소스

@Mapper
public interface BoardDao {
    //게시글 1개 가져오는 메소드 선언
    BoardDto selectBoard(Integer b_num);
    //파일 목록 가져오는 메소드 선언
    List<BfileDto> selectFiles(Integer b_num);
    //댓글 목록 가져오는 메소드
    List<ReplyDto> selectReply(Integer b_num);
    //조회수 증가 메소드 선언
    void updateViews(Integer b_num);
}

💻 BoardDao.xml 소스

-- 게시글 가져오는 쿼리문
<select id="selectBoard" resultType="BoardDto" parameterType="Integer">
    select * from blist where b_num=#{b_num}
</select>
-- 파일 목록 가져오는 쿼리문
<select id="selectFiles" resultType="BfileDto" parameterType="Integer">
    select * from boardfile where bf_bnum=#{b_num}
</select>
-- 댓글 목록 가져오는 쿼리문
<select id="selectReply" resultType="ReplyDto" parameterType="Integer">
    select * from rlist where r_bnum=#{b_num}
</select>
-- 조회수 증가 쿼리문
<update id="updateViews" parameterType="BoardDto">
    update board set b_views = b_views + 1 where b_num = #{b_num}
</update>