< django - 14 >

14. 내비게이션 바 + include 태그 + 페이징 + 테스트 데이터 생성 + Paginator 클래스 + 페이지 리스트

 

 

# 내비게이션 바

1. projects\mysite\templates\base.html 파일의 base.html 템플릿에 내비게이션 바 추가

+ Line 18  -->  항상 pybo:index 페이지로 이동해 주는 'Pybo' 로고를 가장 왼쪽에 배치

+ Line 30  -->  오른쪽에는 '로그인' 링크를 추가

 

 

 

2. http://localhost:8000/pybo/ 페이지 호출

왼쪽 상단에 내비게이션 바가 생김

+ 왼쪽 상단의 pybo 글자를 누르면 언제든 다시 메인 페이지로 돌아갈 수 있음.

 

 

 

3. Ctrl + 마우스 스크롤을 통해 웹 브라우저의 크기를 변경하면 우측 상단에 햄버거 메뉴 버튼이 생기고 로그인 링크가 사라진다.

원래는 햄버거 메뉴를 클릭하면 로그인 링크가 보여야 하지만 아직 부트스트랩 자바스크립트 파일(bootstrap.min.js)이 base.html 파일에 포함되지 않았기 때문에 아무런 반응이 X

+ 부트스트랩의 반응형 웹 기능 : 부트스트랩은 브라우저의 크기가 작아지면 내비게이션 바에 있는 링크들을 작은 햄버거 메뉴 버튼으로 숨김

 

 

 

4. 부트스트랩 자바스크립트 파일을 projects\mysite\static\bootstrap.min.js에 붙여 넣기 --> projects\mysite\templates\base.html 파일에 Line 41, 42 내용 추가

 

 

 

5. 다시 http://localhost:8000/pybo/ 페이지 호출 --> 햄버거 메뉴 버튼 클릭 시 아래처럼 로그인 링크가 표시됨

 

 

 

 

# include 태그

: 템플릿의 특정 위치에 다른 템플릿을 삽입할 수 있는 태그로, 템플릿에서 특정 영역이 반복적으로 사용될 경우 중복을 없애기 위해 사용함

 

1. projects\mysite\templates\navbar.html 파일을 생성하고 base.html에 포함시킬 navbar.html 템플릿을 작성한다.

 

 

 

2. projects\mysite\templates\base.html 파일을 아래처럼 수정한다.

Line 15, 16 수정됨

+ 내비게이션 바의 HTML 코드를 삭제하고 navbar.html 템플릿을 include 태그로 포함시킴

 

 

 

 

# 테스트 데이터 생성

1. python manage.py shell 을 입력하여 장고셸 실행

 

 

 

2. 질문 데이터 생성을 위한 모듈을 임포트

 

 

 

3. 300개의 테스트 데이터 생성 -->  장고 셸 종료

반드시 for i in range(300): 다음줄을 시작하기 전 공백을 4칸 두어야 한다.

 

 

 

2. 로컬 서버 실행 후 http://localhost:8000/pybo/ 페이지 호출하여 생성된 데이터 조회

300개 이상의 데이터가 한 페이지에 모두 보여져서 불편함

 

 

 

 

# Paginator

: 장고에서 페이징을 위해 사용하는 클래스

 

- projects\mysite\pybo\views.py 파일의 index 함수에 페이징 기능 적용

+ << Line 9 >>  

: page = request.GET.get('page', '1')  -->  http://localhost:8000/pybo/?page=1 처럼 GET 방식으로 호출된 URL에서 page값을 가져올 때 사용

 

: http://localhost:8000/pybo/ 처럼 page값 없이 호출된 경우  -->  디폴트로 1이라는 값을 설정

 

 

+ << Line 11 >>

: 첫 번째 파라미터 question_list  -->  게시물 전체를 의미하는 데이터

 

: 두번째 파라미터 10  -->  페이지당 보여줄 게시물의 개수

 

 

+ << Line 12 >>

: paginator를 이용하여 요청된 페이지(page)에 해당되는 페이징 객체(page_obj)를 생성  -->  장고 내부적으로는 데이터 전체를 조회하지 않고 해당 페이지의 데이터만 조회하도록 쿼리가 변경됨

 

: 페이징 객체 page_obj의 속성

항목	설명
paginator.count	전체 게시물 수
paginator.per_page	페이지당 보여줄 게시물 수
paginator.page_range	페이지 범위
number	현재 페이지의 번호
previous_page_number	이전 페이지의 번호
next_page_number	다음 페이지의 번호
has_previous	이전 페이지의 존재 유무
has_next	다음 페이지의 존재 유무
start_index	현재 페이지의 시작 인덱스
end_index	현재 페이지의 끝 인덱스

 

 

 

 

# 템플릿에 페이징 적용

1. projects\mysite\templates\pybo\question_list.html 파일의 </table>태그 밑에 코드를 추가하여 아래처럼 되게 하기

+ 이전/다음 페이지가 있는 경우  -->  이전/다음 링크 활성화

+ 이전/다음 페이지가 없는 경우  -->  이전/다음 링크 비활성화

 

+ 부트스트랩의 pagination 컴포넌트  -->  페이지 리스트를 보기 편하게 표시하기 위해 사용

ex. pagination (Line 31), page-item(Line 34), page-link(Line 61) 등이 부트스트랩 pagination 컴포넌트의 클래스임

 

+ << Line 33 >>

: 이전 페이지가 존재하는지 여부 체크

 

+ << Line 35 >>

: 이전 페이지의 번호

 

+ << Line 55 >>

: 다음 페이지가 존재하는지 여부 체크

 

+ << Line 57 >>

: 다음 페이지의 번호

 

+ << Line 43 >>

: 페이지 리스트 루프  -->  해당 페이지로 이동할 수 있는 링크 생성

 

+ << Line 44, 45 >>

: 현재 페이지와 같은지 체크 + 현재 페이지와 같을 경우  -->  active 클래스를 적용하여 강조

 

 

 

2. http://localhost:8000/pybo/ 페이지 호출

성공적으로 페이징 처리가 됨

+ 문제점

: 페이징 처리가 성공적으로 되긴 했지만 이동 가능한 페이지가 모두 표시되어 보기 불편함.....

 

 

 

3. 2번의 문제를 해결하기 위해 projects\mysite\templates\pybo\question_list.html 파일을 아래와 같이 수정

+ Line 44, 54의 코드를 추가하여 페이지 표시 제한 기능을 구현함  -->  현재 페이지를 기준으로 좌우로 5개씩만 보이게 제한

 

+ << Line 44 >>

: |add:-5, |add:5 는 템플릿 필터로, 전자는 5만큼 빼고 후자는 5만큼 더하라는 의미  -->  현재 페이지를 의미하는 question_list.number보다 5만큼 크거나 작은 값만 표시하도록 제한함

 

 

 

4. 다시 http://localhost:8000/pybo/ 페이지 호출

좌우로 5개씩만 보이는 것을 확인