slPro 7차 일지

---

 페이징은 팀장(현재는 전팀장인..!) 도움으로 해놨으나 파이널 프로젝트에 들어가기 전에 푹 쉬고 오느라 간단한 게시글 출력과 일지 작성이 늦어졌다.

1차 일지 - [ 설정 ], [ 회원가입 ]
2차 일지 - [ 로그인 ]
3차 일지 - [ index에서 로그인 상태에 따라 display none/block 제어하고 p태그 내용 바꾸기 ], [ 로그아웃 ]
4차 일지 - [ header에 회원 아이디, 회원정보/로그아웃 링크 or 비회원 문구 추가 후 로그인 상태에 따라 display none/block 제어 ], [ 일반 회원 정보 확인 ]
5차 일지 - [ 일반 회원 정보 출력 변경 ], [ 관리자) 회원 정보 목록 출력 ], [ 일반 회원 비밀번호 변경 ]
6차 일지 - [ 게시판 글 목록 출력 ], [ 더미데이터 추가 ]

7차 일지 - [ 페이징 ], [ 게시글 디테일 출력 ]

 

1. 페이징

• Paging.java (해당 코드에 오류 발견..! 해결 > 페이징 링크 )

private int nowP;	// 현재 페이지
private int firstP = 1;	// 맨 첫번째 페이지
private int lastP;	// 맨 마지막 페이지
private int leftP;	// 현재 페이지의 첫번째 페이지
private int rightP;	// 현재 페이지의 마지막 페이지
private int beforeP;	// leftP -p
private int nextP;	// leftP +p
private int pageSize = 10;

public Paging(int nowP, int bCnt) {
    this.nowP = nowP;
    lastP = (int)Math.ceil(bCnt/pageSize)+1;
    leftP = ((int)(Math.floor((nowP-1)/pageSize))*pageSize) +1;
    rightP = leftP +pageSize -1;
    beforeP = leftP -pageSize;
    nextP = leftP +pageSize;
}

• 이걸 직접 계산하느라 너무 힘들었다..

 

• BoardController.java

@GetMapping("/board/list")
public String boardList(@RequestParam(name="page")int page, Model model, RedirectAttributes ra) {
    log.info("==> GetMapping - boardList 요청 <==");

    int limit = (page-1)*10;
    ArrayList<BoardDto> bList = bSer.bList(limit);
    model.addAttribute("bList", bList);
    System.out.println("==> bList: {}"+bList);

    int bCnt = bSer.getBCnt();

    Paging paging = new Paging(page, bCnt);
    model.addAttribute("paging",paging);
    System.out.println("==> paging: {}"+paging);

    return "boardList";
}

• 페이징을 추가하느라 업데이트했다.
• 처음엔 생각없이 bList의 사이즈를 모든 게시글의 갯수라고 적었었는데 오류를 발견하고 다시 갯수를 세어오는 메소드를 생성했다.
• 해당 메소드로 얻어온 모든 게시글의 갯수와 현재 페이지를 매개변수로 페이징의 생성자를 통해 다른 값을 생성한다.

 

• BoardService.java

public int getBCnt() {
    System.out.println("==== bSer -> getBCnt");
    return bDao.getBCnt();
}

public BoardDto bDetail(int bNum) {
    System.out.println("==== bSer -> bDtail");
    return bDao.bDetail(bNum);
}

 

• BoardDao (java, xml)

public int getBCnt();

public BoardDto bDetail(int bNum);

 

<select id="getBCnt">
    select count(*) from board
</select>

<select id="bDetail">
    select * from board where bNum=${bNum}
</select>

 

• boardList.jsp

<table class="pagingT" style="width: 500px; max-width: 800px; text-align: center;">
    <tr>
        <c:if test="${paging.leftP!=1}">
            <td><a href="/board/list?page=1"><<</a></td>
            <td><a href="/board/list?page=${paging.beforeP}"><</a></td>
        </c:if>

            <c:forEach var="i" begin="${paging.leftP}" end="${paging.rightP}">
                <c:if test="${i <= paging.lastP}">
                    <td><a href="/board/list?page=${i}">${i}</a></td>
                </c:if>
            </c:forEach>

        <c:if test="${paging.rightP<paging.lastP}">
            <td><a href="/board/list?page=${paging.nextP}">></a></td>
            <td><a href="/board/list?page=${paging.lastP}">>></a></td>
        </c:if>
    </tr>
</table>

• 페이징을 하면서 c:forEach로 일반 for문 돌리는 것도 처음 사용해봤다.
• 기존에 for문에서 i=0; i<=10; i++을 사용했던 것처럼 var을 i로 사용하고, begin에 시작할 i의 수를 적고, begin을 i가 언제까지 돌 것인가(끝)를/을 적어 사용한다.

 

• 결과

게시판 첫 화면

5페이지 클릭 시

다음장(>) 클릭 시

끝(>>) 클릭 시

 

 

2. 게시글 디테일 출력

• boardList.jsp

<table class="bListTable">
    <tr>
        <th>&ensp;글 번호&ensp;</th>
        <th>&ensp;제목&ensp;</th>
        <th>&ensp;작성자&ensp;</th>
        <th>&ensp;작성 날짜&ensp;</th>
        <th>&ensp;조회수&ensp;</th>
    </tr>
    <c:if test="${empty bList}">
        <tr>
            <td>글이 존재하지 않습니다.</td>
        </tr>
    </c:if>
    <c:if test="${!empty bList}">
        <c:forEach items="${bList}" var="b">
            <tr>
                <td>&ensp;${b.bNum}&ensp;</td>
                <td><a href="/board/boardDetail?bNum=${b.bNum}">&ensp;${b.bTitle}&ensp;</a></td>
                <td>&ensp;${b.bWriter}&ensp;</td>
                <td>&ensp;${b.bWDate}&ensp;</td>
                <td>&ensp;${b.bWatch}&ensp;</td>
            </tr>
        </c:forEach>
    </c:if>
</table>

• 글 제목에 a태그를 통해 디테일로 넘어갈 수 있도록 했다.

 

• BoardController.java

@GetMapping("/board/boardDetail")
public String boardDetail(BoardDto bDto, Model model) {
    bDto = bSer.bDetail(bDto.getbNum());

    model.addAttribute("bDto", bDto);
    return "boardDetail";
}

 

• BoardService.java

public BoardDto bDetail(int bNum) {
    System.out.println("==== bSer -> bDtail");
    return bDao.bDetail(bNum);
}

 

• BoardDao (java, xml)

public BoardDto bDetail(int bNum);

 

<select id="bDetail">
    select * from board where bNum=${bNum}
</select>

 

• boardDetail.jsp

<h3>Board Detail</h3>

<div class="allBigBox">

    <div id="bDetailBox">
        <p>글번호: ${bDto.bNum}</p>
        <p>제목: ${bDto.bTitle}</p>
        <p>내용: ${bDto.bContents}</p>
        <p>작성자: ${bDto.bWriter}</p>
        <p>작성날짜: ${bDto.bWDate}</p>
        <p>조회수: ${bDto.bWatch}</p>
        <c:if test="${loginId==bDto.bWriter}">
            <button type="button" class="crudBtn" onclick="history.back()">수정(만들예정)</button>
            <button type="button" class="crudBtn" onclick="history.back()">삭제(만들예정)</button>
        </c:if>
    </div>

    <button type="button" onclick="history.back()">리스트로 돌아가기</button>
</div>

 

• 결과

 

---