본문 바로가기
다양한 기술들/레거시 Web 실습

[12] 게시판심화2 : 상세보기(+첨부된 이미지 띄우기)

by 예스p 2023. 1. 18.

사진게시글 상세보기

일반게시글 상세보기를 복습해보면서

사진을 뛰우는 기능을 구현해보자

 

<< 이전포스팅에서 완료된 요청     |    이번포스팅에서 구현할 요청 >>

기능 url요청 요청시 전달값   응답페이지 또는 url재요청
  /web     index.jsp
로그인요청 /login.me userId=?&userPwd=? 실패시 views/common/errorPage.jsp
성공시 /web  url재요청=> index.jsp
로그아웃요청 /logout.me     /web  url재요청=> index.jsp
회원가입페이지 /enrollForm.me     views/member/memberEnrollForm.jsp
회원가입요청 /insert.me userId=? ... 등  실패시 views/common/errorPage.jsp
성공시 /web  url재요청 => index.jsp
마이페이지요청 /myPage.me   로그인전 /web   url재요청 => index.jsp
로그인후 views.member/myPage.jsp
 정보변경요청

 /update.me 

 userId=? ... 등 실패시 view/common/errorPage.jsp
성공시 /myPage.me   url재요청 
공지사항 목록 /list.no     views/notice/noticeListView.jsp
공지사항글쓰기 /enrollForm.no     views/noticeEnrollForm.jsp
공지사항등록 /insert.no title=?&content=? 실패시 views/common/errorPage.jsp
성공시 /list.no   url재요청
공지 - 상세페이지 /detail.no no=? (수기기재) 실패시 views/common/errorPage.jsp
성공시 views/notice/noticeDetailView.jsp
공지 - 수정페이지 /updateForm.no no=?   views/notice/noticeUpdateForm.jsp
공지 - 수정요청 /update.no no=?&title=?&content=? 실패시 views/common/errorPage.jsp
성공시 /detail.no?no=XX   url재요청
일반게시판 목록 /list.bo cpage=?   views/board/boardListView.jsp
일반 글쓰기 /enrollForm.bo     views/board/boardEnrollForm.jsp
일반글 등록 /insert.bo   실패시 views/common/errorPage.jsp
성공시 /list.bo   url 재요청
일반 - 상세페이지 /detail.bo no=? 실패시  view/common/errorPage.jsp
성공시 views/board/boardDetailView.jsp
일반 - 수정페이지 /updateForm.bo no=   view/board/boardUpdateForm.jsp
일반 - 수정요청 /update.bo   실패시 view/common/errorPage.jsp
성공시 /detail.bo   url 재요청
사진게시판목록 /list.th     views/board/thumbnailListView.jsp
사진 글쓰기 /enrollForm.th     views/board/thumbnailEnrollForm.jsp
사진글 등록 /insert.th   실패시 views/common/errorPage.jsp
성공시 /list.th   url 재요청
사진 - 상세페이지 /detail.th     views/board/thumbnailDetailView.jsp

 

 

사진게시글 조회

여러개의 첨부파일중 대표이미지는 크게, 나머지 이미지는 작게 표현해본다.

 

STEP1) thumbnailDetailView.jsp

  • 생성위치 : webProject/src/main/webapp/views/board
  • 사진게시판 목록에서 게시글을 선택했을 때 들어가게 되는 상세페이지구현
.....
<h2>사진게시판 상세보기</h2>
제목 : 제목자리
작성자 : user01
작성일 : 2022/11/25
내용 : 여기가 내용자리
대표사진 : <img src="저장경로+파일명" width="500" height="300">
상세사진 : 
<!-- 상세사진은 몇개일지 모름 -->
<img src="저장경로+파일명" width="200" height="150">
<img src="저장경로+파일명" width="200" height="150">
<img src="저장경로+파일명" width="200" height="150">

<a href="<%=contextPath%>/list.th">목록가기</a>
.....

 

 

STEP2) thumbnailListView.jsp (수정)

  1. 목록에 있는 썸네일에 클릭가능할거같은 효과주기
  2. 썸네일들에 클릭이벤트 걸기
  3. 요청시 전달값(글번호)은 쿼리스트링으로 넘겨야한다
    >> 이때 글번호는 클릭이 된 요소의 자손들 중 p요소 안 텍스트 값 중 'no.' 뒤에있는 숫자가 넘기고자하는 글번호
    >> 글번호는 몇글자일지 알수없다... 꺼내기 어려우니 탐색하기 쉬운 위치에 몰래 정보를 숨겨놓기!(input type hidden)
<style>
.thumnail:hover{
                opacity:0.7;
                cursor:pointer;
         }
</style>
.....
<% for(Board b : list) { %>
    <div class="thumbnail" align="center">
        <input type="hidden" value="<%=b.getBoardNo()%>">
        <img src="<%=contextPath%>/<%=b.getTitleImg()%>" width="200" height="150">
            <p>
                No.<%=b.getBoardNo()%> <%=b.getBoardTitle()%><br>
                조회수 : <%=b.getCount()%>
            </p>
    </div>
<% } %>         

<script>
    $(function(){
        $('.thumbnail').click(function(){
            location.href = "<%=contextPath%>/detail.th?no="+ $(this).children('input').val();
        })
    })
</script>

 

 

STEP3) ThumbnailDetailController.java

  • 생성위치 :/webProject/src/main/java
    서블릿/매핑값 detail.th
  • 목록에서 썸네일을 클릭하면 해당 글의 상세페이지로 연결하는 서블릿
  • 유효성 검사 후 조회수 증가시킨상태에 상세페이지로 조회하러 가기
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    int boardNo = Integer.parseInt(request.getParameter("no"));
    BoardService bService = new BoardService();
    //조회수 증가
    int result = bService.increseCount(boardNo);
    if(result>0) {
        //성공시 => 유효한 게시글임 => 상세페이지
        //게시글정보 (글번호, 제목, 내용, 작성자아이디, 작성일) => Board 테이블
        //일반게시글에 사용했던것 재사용
        Board b = bService.selectBoard(boardNo);
        //첨부파일들정보 (저장경로, 수정명) => Attachment 테이블
        ArrayList<Attachment> list = bService.selectAttachmentList(boardNo);

        request.setAttribute("b", b);
        request.setAttribute("list", list);
        request.getRequestDispatcher("views/board/tumbnailDetailView.jsp").forward(request, response);
    }else {
        //실패시 에러페이지
    }
}

 

STEP4) board-mapper.xml (수정)

  • 기존 일반게시글 조회해오는 sql문(키값 selectBoard)을 쓸수있는지 검증하는 방법 :
    sqldeveloper에서 잘 작동하는지 돌려본다
    >> 이때 사진게시글이 조회되지 않는다
      사진게시글은 카테고리가 null인데 카테고리테이블과 내부조인을 했기때문
    >> 외부조인을 하도록 기존 구문을 수정한다.
  • 첨부파일을 조회해오는  sql문(키값 selectAttachment)도 쓸수있는지 sqldevloper에서 돌려본다
    >> 잘 조회되나, 사진이 여러개일 경우 대표이미지와 상세이미지가 구분이 안된다
    >> ORDER BY절로 대표이미지가 가장먼저 조회되도록 바꾼다
     <!-- selectBoard 외부조인으로 수정한다 -->         
		SELECT
		       BOARD_NO
               .....
		     , TO_CHAR(CREATE_DATE, 'YYYY/MM/DD') "CREATE_DATE"
		  FROM BOARD
		  LEFT JOIN CATEGORY USING (CATEGORY_NO)
		  JOIN MEMBER ON (BOARD_WRITER=USER_NO)
		 WHERE BOARD_NO = ?
    <!-- selectAttachment 수정하기 -->
		SELECT
		       FILE_NO
		     , ORIGIN_NAME
		     , CHANGE_NAME
		     , FILE_PATH
                  FROM ATTACHMENT
		 WHERE REF_BNO = ?
		 ORDER
            BY FILE_LEVEL;

 

 

STEP5) BoardService.java (수정)

  • 메소드 재사용 가능여부 확인시, 다른것은 다 재사용 가능한데 기존 첨부파일 조회 메소드는 1행만을 반환하므로 해당 메소드만 새로 만든다.
    >> 첨부파일 리스트를 조회해오는 selectAttachmentList(boardNo) 메소드 생성
public ArrayList<Attachment> selectAttachmentList(int boardNo){
    Connection conn = getConnection();
    ArrayList list = new BoardDao().selectAttachmentList(conn, boardNo);
    close(conn);
    return list;
}

 

 

STEP6) BoardDao.java (수정)

  • 첨부파일 리스트를 조회해오는 selectAttachmentList(conn, boardNo) 메소드 생성
public ArrayList<Attachment> selectAttachmentList(Connection conn, int boardNo) {
    ArrayList<Attachment> list = new ArrayList<>();
    PreparedStatement pstmt = null;
    ResultSet rset = null;
    String sql = prop.getProperty("selectAttachment");
    try {
        pstmt = conn.prepareStatement(sql);
        pstmt.setInt(1, boardNo);
        rset = pstmt.executeQuery();
        while(rset.next()) {
            Attachment at = new Attachment();
            //필요한 정보만 뽑아 담는다
            at.setChangeName(rset.getString("change_name"));
            at.setFilePath(rset.getString("file_path"));
            list.add(at);
        }
    } catch (SQLException e) {
        e.printStackTrace();
    } finally {
        close(rset);
        close(pstmt);
    }
    return list;
}

 

 

STEP7) ThumbnailDetailController.java (수정)

  • 상단에 전달받은 데이터 꺼내놓기
  • 조회해온 데이터들 제위치에 위치시키기
  • 이미지를 표시할 때의 url은 contextPath(webapp폴더)부터 제시한다
    >> "contextPath/filePath+changeName"
<%@ page import="com.br.board.model.vo.*, java.util.ArrayList" %>
<%
    Board b = (Board)request.getAttribute("b");
    ArrayList<Attachment> list = (ArrayList<Attachment>)request.getAttribute("list");
%>
.....
<h2>사진게시판 상세보기</h2>
제목 : 제목자리
작성자 : user01
작성일 : 2022/11/25
내용 : 여기가 내용자리

대표사진 : 
<!-- list의 첫번째 객체가 대표이미지일것임 -->
<img src="<%=contextPath%>/<%= list.get(0).getFilePath() + list.get(0).getChangeName() %>" width="500" height="300">
<!-- contextPath가 webapp임. 여기서부터 파일위치까지 나타내기-->
<!-- getFilePath() == resourceslthumnail_upfiles/ 이므로 앞에 '/' 넣어주기-->

상세사진 : 
<!-- 상세사진은 몇개일지 모름 -->
<!-- 향상된 for문은 0번부터 접근하므로 일반 for문 사용 -->
<% for(int i=0; i<list.size(); i++) { %>
    <img src="<%=contextPath%>/<%= list.get(i).getFilePath() + list.get(i).getChangeName() %>" width="200" height="150">
<% } %>
.....

 

 

 

 

'다양한 기술들 > 레거시 Web 실습' 카테고리의 다른 글

[14] 댓글기능 : Ajax, json, gson을 활용  (0) 2023.01.20
[13] 아이디 중복체크 : Ajax 활용  (0) 2023.01.18
[11] 게시판심화2 : 썸네일목록, 글작성(+첨부파일 미리보기)  (0) 2023.01.16
[10] 게시판심화1 : 상세보기(+첨부파일 조회 및 다운로드)  (0) 2023.01.12
[09] 게시판심화1 : 글쓰기(+파일첨부)  (0) 2023.01.11

관련글

댓글

티스토리툴바