게시판 페이지 구조의 이해 처음 이전 페이지 다음 마지막 mysql 5.x 사용

페이징은 쉬우면서도 어렵다. 처음 이것을 만들 때 찾아볼 곳이 없어서 워드프레스나 그누보드 등의 소스를 파헤쳐본 적도 있었다. 지금도 그렇지만 잘 다음어진 자료를 찾는 것은 어렵다. 어쨌뜬 페이징의 구조는 5가지 정도된다. 엑셀로 시뮬레이션을 해 보면서 구조를 이해하는 것이 편하다.

게시판 페이징 구조

페이징의 구조

페이징을 함에 있어 지금은 다음 버튼 밖에는 없다.

고전적인 옛날 홈페이지를 보면 아래의 5가지 구성으로 되어 있다.

처음 | 이전 | 표시할 페이지 | 다음 | 마지막

이것들을 어떻게 구성하는지 이해하면 편하다.

물론, 계산에 따른 구성은 자바스크립트에서 해도 되고 서버에서 해도 된다.

하지만 정작 중요한 것은 게시물의 전체 수가 된다.

 

전체 페이지 계산하기

전체 게시물이 35개가 있다고 가정해 본다.

현재페이지수는 3개씩 보여주도록 한다.

페이지 구성은 아래와 같다고 했다.

처음 | 이전 | 표시할 페이지 | 다음 | 마지막

• 처음
  - 항상 1페이지로 이동한다.
• 이전
  - 표시할 페이지의 이전 페이지들을 보여준다.
• 표시할 페이지
  - 현재 표시할 페이지들을 보여준다.
• 다음
  - 표시할 페이지의 다음 페이지들을 보여준다.
• 마지막
  - 항상 마지막 페이지로 이동한다.

전체 게시물 35개에 대한 전체 페이지 수를 찾을 필요가 있다.

한 화면에 3개씩 게시물을 표시한다고 하면 12페이지가 된다.

11페이지가 아니고 왜 12페이지 일까?

한 화면에 3개의 게시물을 보여주기로 하였고

1p X 3 = 3 이다. 11p X 3 = 33 개의 게시물까지 보여주기에 나머지 2개의 자료는 볼 수 없다.

간단한 공식이 만들어짐을 알 수 있다.

/*
전체페이지수 = ( ( 전체게시물수 - 1 ) / 한화면에 나올 게시물 수 ) + 1
*/

 

여기까지 왔다면 절반은 온 것이다. 나머지는 그냥 코딩이다.

 

전제조건

조건을 세우고 방식을 생각해 보자.

아래의 조건으로 가정해 본다.

전체 게시물은 35개

전체 페이지는 12페이지

한 화면에 보여질 게시물수는 3개

한 화면에 표시할 페이지는 5개

아래의 구성과 같을 것이다.

• 현재 페이지가 1p 일 경우
  처음 | 이전 | 1 2 3 4 5 | 다음 | 마지막
  - 처음 : 1p
  - 이전 : 1p
  - 현재 보여질 페이지 : 1p 2p 3p 4p 5p
  - 다음 : 6p
  - 마지막 : 12p
• 다음 페이지를 클릭했을 경우
  처음 | 이전 | 6 7 8 9 10 | 다음 | 마지막
  - 처음 1p
  - 이전 1p
  - 현재 보여질 페이지 : 6p 7p 8p 9p 10p 11p
  - 다음 : 12p
  - 마지막 : 12p

느낌 오시는지

우리는 여기서 한가지 계산식을 또 만들 수 있다.

현재 보여질 페이지가 5개라고 했으니 시작부터 5개를 나열한다.

이전 다음 페이지는 5를 빼고 더하면 된다.

 

계산식 정리하기

한 화면에 보여줄 것과 페이징을 구성할 것들이 대충 나왔다.

이제 정리를 해보록 하자.

게시물 수와 페이지 수는 다르다.

게시물 수는 실제 화면에 보여줄 게시물 갯수를 나타내지만
페이지 수는 현재 페이지번호의 나열임을 명심하자.

• 설계
• 전체 게시물은 35개
• 한 화면에 보여줄 게시물 수는 3개
• 전체 페이지수는 12페이지
• 한 화면에 보여줄 페이지 수는 5개

설계가 나왔으니 계산식을 나열해 보자

• 계산식
• 처음 - 항상 1페이지
• 마지막 - 항상 12페이지
• 보여질 페이지수 5개 - 시작페이지 부터 5개
• 이전 - 시작페이지의 - 5
• 다음 - 시작페이지의 + 5

아래의 경우를 다시 보도록 하자

1p 의 경우 다음 버튼을 누르면 6p로 넘어간다.

11p의 경우 이전 버튼을 누르면 6p로 넘어간다.

다음 이전 버튼을 누른다면 보여줄 페이지의 구성이 위의 조건대로 5개 표현을 하게 된다.

조건이 나왔고, 동작구분을 위해 앞에 코드를 넣어주었다.

STA 맨처음- 1p
PRV 이전- 페이지시작-5
CUR 보여줄 페이지- 1p 2p 3p 4p 5p
CUR 보여줄 페이지- 6p 7p 8p 9p 10p
CUR 보여줄 페이지- 11p 12p
NXT 다음- 페이지시작 +5
END 맨끝- 12p

 

개념은 이정도로 잡고 자바스크립트는 다음으로~