Community_게시글 상세 조회

DeadWhale·2022년 5월 26일
0

Servlet/JSP

목록 보기
15/22
post-thumbnail

Community 게시판 웹 프로그램에 게시판 목록을 조회한 후
상세 조회하는 서비스를 구현했다.

전체적인 흐름은 이렇다
게시글 목록에서 제목 부분을 클릭시
서버로 게시글의번호(BOARD_NO)을 가지고
게시글을 상세조회 JDBC를 수행한다.
아주 간단해보이는 막상 코드로 작성할려니 이것저것 할게많았다.

구성화면

?제목을 나타내는 div

작성정보를 담고 있는 div

thumbnail영역의 div(나는 섬네일 스펠링 저건줄 첨알았다 괴상한게 생겼네)

업로드된 이미지영역(섬네일제외) div

작성된 내용이 작성되는 div

수정,삭제,목록으로 버튼영역 div
(수정,삭제는 작성자가 같을 경우에만 비교한다 이때 세션스코프로 사용되고있는 로그인멤버의 번호와 게시글 상세조회중 가져온 작성자 번호를 가져와 비교하면 된다.)

들의 div로 구성된 화면이다 (include시킨 화면은 제외했다.)

step.1 [Servlet]

최상위주소(프로젝트 contextPath)/board/list로 get방식 요청을한다(a태그는 기본적으로 get방식)
이때 Get방식을 이용해 게시글 목록에서 게시글번호도 같이 전달한다.

 <td><a href="detail?no=${board.boardNo}&cp=${pagination.currentPage}&type=${param.type}">${board.boardTitle}</a></td>

게시글의 번호 / 현재 페이지 / 게시글 카테고리를 같이 전달한다.

Get방식 요청을 받은 후 따로 할게 없다. 게시글번호만 따로 저장해 배로 JDBC 수행하면 된다

step.2 [Service]

service에서 크게 두가지 동작을 수행해야한다.
DB의 수행 속도 때문에 따로 수행해야한다.


게시글의 내용을 조회해 저장하고 저장에 성공한 경우 (글이 있는 경우) 이미지들이 저장되어 있는 테이블에 접근해 조회된 게시글의 번호를 가지고 이미지정보들을 ArrayList 형태로 가져와야한다.

이때 수행된 VO객체 코드

BoardDetail VO

@Getter
@Setter
@NoArgsConstructor
@ToString
public class BoardDetail {
	private int boardNo;
	private String boardTitle;
	private String boardContent;
	private String createDate;
	private String updateDate;
	private int readCount;
	private String memberNickname;
	private String profileImage;
	private int memberNo;
	private String boardName;
	
	private List<BoardImage> imageList;
}

거북이가 봐도 알수 있을 듯한 객체명
BoardImage으로 제네릭되어있는 List객체는 따로 조회후 저장한다

BoardImage VO

@Getter
@Setter
@NoArgsConstructor
@ToString
public class BoardImage {
	private int imageNo;
	private String imageReName;
	private String imageOriginal;
	private int imageLevel;
	private int boardNo;	
}

step.3 [DAO]

생 략
너무 많이 했고 대략적인 흐름은 다 알것같다.
다만 SQL은 오랜만에 조인했으니깐 첨부


#### 게시글 상세 정보 조회

<entry key="selectBoardDetail">
 SELECT BOARD_NO,BOARD_TITLE,BOARD_CONTENT,
 TO_CHAR(CREATE_DT,'YYYY"년 "MM"월" DD"일" HH24:MI:SS')CREATE_DT,
 TO_CHAR(UPDATE_DT,'YYYY"년 "MM"월" DD"일" HH24:MI:SS')UPDATE_DT,
 READ_COUNT,MEMBER_NICK,PROFILE_IMG,MEMBER_NO,BOARD_NM
 FROM BOARD 
 JOIN MEMBER USING(MEMBER_NO)
 JOIN BOARD_TYPE USING(BOARD_CD)
 WHERE BOARD_NO=? AND BOARD_ST='N'
</entry>

#### 위에서 조회한 게시글 번호로 등록된 이미지 있으면 리스트에 하나씩 저장 이때 IMG_LEVEL이 매우 중요하다(썸네일을 구분해야되서)

<entry key="selectImageList">
 SELECT * FROM BOARD_IMG 
 WHERE BOARD_NO=? ORDER BY IMG_LEVEL</entry>
	

수행 한 다음 List으로 조회된 이미지리스트를 detail객체에 저장해 한번에 담고간다.

if(detail !=null) {			
List<BoardImage> imageList = dao.selectImageList(conn,boardNo);
detail.setImageList(imageList);}		

step.4 [JSP]

상세조회된 내용을 req에 SetAttribute한 다음 JSP로 FORWARD한다

이름 , 이미지들을 detail 요소에 저장된 값으로 출력한다.

 <!-- 프로필 + 닉네임 + 작성일 + 조회수 -->
    <div class="board-header">
        <div class="board-writer">
            <c:if test="${empty detail.profileImage}">
                <img src="${contextPath}/resources/images/user.png">
            </c:if>
            <c:if test="${!empty detail.profileImage}">
                <img src="${contextPath}${detail.profileImage}">
            </c:if>
            <span>${detail.memberNickname}</span>
        </div>
        <div class="board-info">
            <!--작성일 + 조회수 -->
            <p><span>작성일</span> ${detail.createDate}</p>

            <c:if test="${!empty detail.updateDate}">
                <p><span>마지막 수정일</span> ${detail.updateDate}</p>
            </c:if>

            <p><span>조회수</span> ${detail.readCount} </p>
        </div>
    </div>

- 이미지가 있는 경우의 c:if 수행문

 <c:if test="${!empty detail.imageList}">
    <!-- 썸네일이 있을 경우에 변수 선언 -->
    <c:if test="${detail.imageList[0].imageLevel == 0}">
        <c:set var="thumbnail" value="${detail.imageList[0]}"></c:set>
    </c:if>
  
    <!-- 섬네일 -->
    <c:if test="${!empty thumbnail}">
        <h5>썸네일</h5>
        <div class="img-box">
            <div class="boardImg thumbnail">
                <img src="${contextPath}${thumbnail.imageReName}">
                <a href="${contextPath}${thumbnail.imageReName}" download="${thumbnail.imageOriginal}">다운로드</a>
            </div>
        </div>
    </c:if>



    

    <c:if test="${empty thumbnail}">   
        <c:set var="start" value="0"/>
    </c:if>

    <c:if test="${!empty thumbnail}">
        <c:set var="start" value="1"/>
    </c:if>

    <!-- 섬네일만 있고 이미지가 없는 경우-->
    <c:if test="${fn:length(detail.imageList)>start}">
    <!-- 업로드 이미지. -->
        <h5>업로드 이미지</h5>
        <div class="img-box">            

            <c:forEach var="i" begin="${start}" end="${fn:length(detail.imageList)-1}" step="1">
                    <div class="boardImg">
                        <img src="${contextPath}${detail.imageList[i].imageReName}" onclick="location.href='${contextPath}${detail.imageList[i].imageReName}'" >
                        <a href="${contextPath}${detail.imageList[i].imageReName}" download="${detail.imageList[i].imageOriginal}">다운로드</a>
                    </div>
            </c:forEach>
        </div>

    </c:if>

그냥 뭐 내용 영역이랑 button 영역

    <!-- 내용 -->
    <div class="board-content">
      ${detail.boardContent}
    </div>

    <!-- 버튼 -->
    <div class="board-btn-area">

        <c:if test="${loginMember.memberNo==detail.memberNo}">
            <button id="updateBtn">수정</button>
            <button id="deleteBtn">삭제</button>
        </c:if> 
        <button id="goToListBtn">목록으로</button>
    </div>

핵심을 이미지가 있는 경우의 if이다
경우에 수가 2가지여도 경우에 따라서는 그냥 if문 2번 사용하는게 현명할 수도 있다. 내일 수업 시간에 다시한번 이 글 읽는 과정이 필요할거 같다.

0개의 댓글