Programming Language/Javascript, ...

웹페이지 만들기(7) - 사진게시판(목록페이지 및 상세페이지)

Ma_Sand 2022. 5. 13. 12:04
반응형

menubar

<div><a href="<%=contextPath%>/list.th">사진게시판</a></div>

 

 

 

 

 

ThumbnailListController.java

1) 매핑값 list.th (menubar에서 '사진게시판' 클릭 시 컨트롤러)

 

2) service로 selectThumbnailList()를 보낸 후 ArrayList 타입으로 list를 받아 thumbnailListView로 보낸다.

@WebServlet("/list.th")
public class ThumbnailListController extends HttpServlet {
    private static final long serialVersionUID = 1L;
    
    public ThumbnailListController() {
        super();
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        ArrayList<Board> list = new BoardService().selectThumbnailList();
        request.setAttribute("list", list);
        request.getRequestDispatcher("views/board/thumbnailListView.jsp").forward(request, response);
    }

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doGet(request, response);
    }
}

 

 

 

 

BoardService.java

public ArrayList<Board> selectThumbnailList() {
    Connection conn = getConnection();
    ArrayList<Board> list = new BoardDao().selectThumbnailList(conn);
		
    close(conn);
    return list;
}

 

 

 

board-mapper.xml

1) 게시글 번호, 게시글 제목, 조회수, 파일경로 또는 변환한 파일명(별칭: TITLEIMG)을 조회한다.

<entry key="selectThumbnailList">
    SELECT BOARD_NO, BOARD_TITLE, COUNT, FILE_PATH||CHANGE_NAME "TITLEIMG"
    FROM BOARD B
    JOIN ATTACHMENT ON (BOARD_NO = REF_BNO)
    WHERE BOARD_TYPE=2
    AND B.STATUS='Y'
    AND FILE_LEVEL=1
    ORDER BY CREATE_DATE DESC
</entry>

 

 

 

 

 

BoardDao.java

1) 여러 행이 담길 수 있으므로 ResultSet을 사용한다.

 

2) b를 list에 담아 반환한다.

 

3) Board에는 titleimg 변수가 없으므로 vo에 새로 추가한다.

public ArrayList<Board> selectThumbnailList(Connection conn) {
    ArrayList<Board> list = new ArrayList<>();
    PreparedStatement pstmt = null;
    ResultSet rset = null;
    String sql = prop.getProperty("selectThumbnailList");
    try {
        pstmt = conn.prepareStatement(sql);
        rset = pstmt.executeQuery();
			
        while(rset.next()) {
            Board b = new Board();
            b.setBoardNo(rset.getInt("BOARD_NO"));
            b.setBoardTitle(rset.getString("BOARD_TITLE"));
            b.setCount(rset.getInt("COUNT"));
            b.setTitleImg(rset.getString("TITLEIMG"));
				
            list.add(b);
        }
    } catch (SQLException e) {
        e.printStackTrace();
    } finally {
        close(rset);
        close(pstmt);
    }
    return list;
}

 

 

 

 

 

thumbnailListView.jsp

1) if ~ else문으로 list가 비어있지 않을 때 

   : 향상된 for문으로 사진게시글을 생성한다. 이때, 게시글 번호를 input에 hidden 타입으로 넘긴다.

 

2) list가 비어있을 때

   : 존재하는 사진이 없다는 문구가 보이게 한다.

 

3) loginUser가 null이 아닐 때(로그인한 회원일 때)

   : 작성 버튼이 보이도록 한다.

 

4) .thumbnail을 클릭했을 때(사진을 클릭했을 때)

   : bno가 해당 사진의 자식의 0번째 value인 곳으로 이동한다.

<div>
    <%if(!list.isEmpty()) {%>
        <%for(Board b : list) {%>
            <div class="thumbnail">
                <input type="hidden" value="<%=b.getBoardNo()%>">
                <img src="<%=contextPath%>/<%=b.getTitleImg%>" width="200px" height="150px">
                <p>
                    No.<%=b.getBoardNo()%> <br>
                    <%=b.getBoardTitle()%> <br>
                    조회수: <%=b.getCount()%>
                </p>
            </div>
        <%}%>
    <%} else {%>
        존재하는 사진이 없습니다.
    <%}%>
</div>
// 로그인을 한 회원만 작성 버튼이 보이도록 한다.
<%if(loginUser != null) {%>
<div>
    <a href="<%=contextPath"/enrollForm.th>작성</a>
</div>
<%}%>

<script>
    // 게시글을 클릭하면 상세페이지로 이동하는 함수
    $(function(){
        $(".thumbnail").click(function(){
            location.href="<%=contextPath%>/detail.th?bno="+$(this).children().eq(0).val();
        });
    });
</script>

 

 

 

 

 

ThumbnailEnrollFormController.java

1) 매핑값 enrollForm.th (작성 버튼 클릭 시 컨트롤러)

 

2) 작성 버튼 클릭 시 해당 매핑값으로 변경 후 작성 페이지로 이동한다.

@WebServlet("/enrollForm.th")
public class ThumbnailEnrollFormController extends HttpServlet {
    private static final long serialVersionUID = 1L;
    
    public ThumbnailEnrollFormController() {
        super();
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.getRequestDispatcher("views/board/thumbnailEnrollForm.jsp").forward(request, response);
    }

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doGet(request, response);
    }
}

 

 

 

 

 

ThumbnailDetailController.java

1) 매핑값 detail.th (사진 클릭 시 컨트롤러)

 

2) 사진 클릭 시 해당 매핑값으로 변경 후 상세 페이지로 이동한다.

 

3) bno를 파라미터로 받으면 String 타입으로 받아지므로 int 타입으로 형변환하여 boardNo으로 받는다.

 

4) 게시글 번호에 대한 조회수를 가져오기 위해 service에 increaseCount(boardNo)를 보낸 후 가져온다.

 

5) 만약 4)의 result가 0보다 크면(해당 결과가 있으면)

   ① 일반 게시판에서 사용했던 메소드 selectBoard(boardNo)를 재활용한다. 이때, mapper에는 inner join(내부조인)으로 작성되어 있어 일치하는 컬럼만 가져오는데, 사진게시판은 카테고리가 null이므로 일치하는 것이 없어 조회할 수 없다. 그러므로 left join(외부조인)으로 변경하여 왼쪽 테이블(Board)을 기준으로 조인한 후 카테고리 컬럼을 기준으로 일치하는 컬럼과 일치하지 않는 컬럼 모두를 가져온다.

   ② selectAttachment(boardNo)를 service로 보낸 후 해당 사진들을 list로 받아 가져온다.

   ③ 해당 request들(b, list)을 thumbnailDetailView로 보낸다.

 

6) result가 0보다 작으면(해당 결과가 없으면)

   : request를 에러페이지로 보내 에러메세지를 띄운다.

@WebServlet("/detail.th")
public class ThumbnailDetailController extends HttpServlet {
    private static final long serialVersionUID = 1L;
       
    public ThumbnailDetailController() {
        super();
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        int boardNo = Integer.parseInt(request.getParameter("bno"));
        int result = new BoardService().increaseCount(boardNo);
		
        if(result > 0) {  // 성공
            Board b = new BoardService().selectBoard(boardNo);
            ArrayList<Attachment> list = new BoardService().selectAttachmentList(boardNo);
			
            request.setAttribute("b", b);
            request.setAttribute("list", list);
			
            request.getRequestDispatcher("views/board/thumbnailDetailView.jsp").forward(request, response);
        } else {  // 실패 - 에러페이지
            request.setAttribute("errorMsg", "실패!!!");
            request.getRequestDispatcher("views/common/errorPage.jsp").forward(request, response);
        }
    }

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doGet(request, response);
    }
}
반응형