2020.05.02 미니 프로젝트(完) (페이지 구현하기, 메인화면 처리하기)

options.properties 이다. page.list_cnt 는 페이지당 글의 개수

pagination은 밑에 페이지의 개수이다. pagination이라고 보통 부른다.

 

/main 이며 page 정보가 없으면 default로 1의 값을 page변수에 넣는다.

getContentList에 그리고 이 page 정보를 넣었다.

rowBounds 는 (a,b) 이면 a 부터 page_listcnt 개. 0,10 이면 0부터 10개 , 10,10 이면 10부터 10개 이런 식이다.

위에 page_listcnt 10 해놨으니 10개씩 보여준다. 

따라서, 0~9 10~19 이런 식이니 start 가 (page-1)*page_listcnt 로 설정하면 될 것이다.

그리고 service에서 properties의 page_listcnt를 주입받은 것이다. 

 

dao

mapper이다. rowBounds를 계속 넘긴 것을 볼 수 있다.

 

이 상태로 시행을 하고 main 에 들어가서 뒤의 page=? 부분을 변경함에 따라 글이 바뀌는 것을 알 수 있다.

이제 밑에 페이지를 눌러서 처리되게끔 해보자. 먼저, pageBean을 생성하였다.

 

getter 만 선언하였다.

천천히 읽으면 다 이해 될 것이다.

전체 페이지 번호는 전체 글에서 페이지 당 글의 개수 +1 

최소는 1~10 11~20 이니깐 10,20 값은 그냥 contentPageCnt 나누면 앞 숫자들과 값 다르게 되니깐 -1 해서 나눈 다음에 다시 10 곱하고 +1 하기

최대 페이지가 전체 페이지 수 넘으면 안되니 그 때에 최대는 전체 페이지 수

prevPage는 min 에서 -1 next는 max에서 +1 하지만 next가 전체페이지 수 넘길시에는 next는 전체 페이지 값

 

전체 글 개수는

mapper에서 getContentCnt를 통해 가져온다.

dao

아까 page_listcnt를 주입받았었는데 page_paginationcnt도 주입받자.

이제 이것들을 pageBean=boardService.getContentCnt(board_info_idx,page); 해서 모델에 담은 것이다.

그리고 main.jsp로 간다.

pageBean.min 부터 해서 pageBean.max 까지. 누르면 그 idx값으로 이동하게 된다.

이전과 다음버튼 또한 prevPage 와 nextPage로 이동

이것을 조금 수정해서

원래대로 하면 1~10 페이지에서 이전 누르면 page 값이 0 이 된다. 이것을 막기 위해

0 이하면 disabled 를 붙여서 버튼 비활성화를 시켰다.

그리고 page-item active 를 누르면 active 된 곳이 파랑색으로 불이 켜지게 되는데, 원래대로라면 내가 현재 있는 페이지가 어디인지 url를 제외하면 알아 볼 수가 없었지만, when 절을 추가해 현재 idx가 pageBean.currentPage와 같으면 불이 켜지게끔 active 를 시켜서 이제 알 수 있게 된다.

다음 버튼도 이전버튼과 마찬가지로 when 절을 추가해 disabled 시킬 수도 있지만 이건 PageBean 생성자에서 이미 처리를 해주었기 때문에 생략하였다. 마지막 page에서 다음 눌러도 그 페이지 그대로이다. 

 

이제 글을 메인에 가서도, 읽어서도, 수정을 하는 상황에서도, 그리고 수정완료 누르고, 수정 취소를 눌렀을 때에도, 어느 때에도 다 page값을 넘겨서 저장할 수 있게끔 한다.

/main에도 page를 넘겼다.

여기서 /read로 갈 떄에도 page를 주었다.

이것을 /read 에서 받아서 model 넣어주고

read.jsp 에서 목록보기 눌렀을 때에도 있고 수정하기에 토스해준다.

/modify 에서 받아줘서 모델에 넘겨주고

modify.jsp 에서 취소를 눌렀을 때에도 page 해주고

성공일 때에도 넘길 수 있게끔 input type='hidden' name='page' value='${page}' 로 넘겨주었다.

/modify_pro 에서도 당연히 받아서 그대로 모델에 넣어주었다.

그리고 modify_success.jsp 에서 read로 보내면서 page값을 주었다.

 

이제 main 화면에서 게시판 별 게시글 상위 5개를 볼 수 있게끔 하자.

MainService를 만들고 나머지는 기존의 dao 를 사용해준다.

rowBounds 를 0,5 로 하고 (0부터 시작해서 5개라는 뜻) getContentList로 가져온다.

board_info_idx 값을 말이다. (게시판 종류)

 

이제 maincontroller 에서 게시판 1~4 번을 mainService를 통해 상위 5개를 가지고 있는 List를 ArrayList안에 넣는다. 그리고 그것을 모델안에 넣어준다. 

그리고 user/main.jsp 를 다음과 같이 반복문을 돌려서 만들어준다.

그리고 maincontroller에서 getTopMenuList 를 통해 게시판 종류의 번호와 이름을 가져왔다.

포문이 리스트에 있는 수만큼 'sub_list'에 넣어서 반복하고 있는데 이 반복횟수를 뒤에

varStatus="idx" 라고 하면 idx 값에 그 반복횟수가 들어가게 된다.(사용시에 idx.index 인 것 같다.)

그래서 바깥에 보이는 게시판의 이름을 변경해주기 위해서

<h4 class='card-title'> ㅇㅇㅇㅇ</h4> 이 부분에

${board_list[idx.index].board_info_name 을 통해 가져온다.

참고로 getTopMenuList를 가져와서 담아주는 BoardInfoBean은 위의 사진과 같이

private String board_info_idx/board_info_name 이 2개의 변수를 가지고 있다. 그 중 name을 출력해준 것이다.

 

이제 눌렀을 때의 링크와 더보기 또한 이것을 이용한다.

더 보기는 그 게시판으로 가면 되기 때문에(페이지는 무조건 1으로 생략하면 default로 1 되니깐 생략)

board/main?board_info_idx=${board_list[idx.index].board_info_idx} 를 달아준 것이다.

링크는 board_info_idx 와 content_idx 를 obj.content_idx로 달아주어서 그곳을 갈 수 있도록 하였다. 상위 5개 글이니 page의 값은 1로 보냈다.

 

요렇게 나오게 된다. 누르면 각 게시판 및 글로 가게 된다.

 

이로써 끝났다. 길고도 짧은 미니 프로젝트... 대충 강좌를 따라가면서 한 것이라 아직 완전히 내 것이 아니라고 생각한다.

빠른 시일내에 다른 비슷한 게시판 류를 스스로 클리어 해보려고 한다.