Django/따라하는 장고 (43) 썸네일형 리스트형 18. 로그인 기능 로그인 기능을 만들어보자. 로그인, 로그아웃을 도와주는 앱은 django.contrib.auth 이다. 이 앱은 장고 프로젝트 생성시 자동으로 추가된다. projects\mysite\config\settings.py 를 확인해보자. 로그인, 로그아웃기능을 구현해야한다. 로그인, 로그아웃기능은 pybo앱에 구현할수도 있지만, 하나의 웹 사이트에는 파이보와 같은 게시판 서비스 이외에도 블로그나 쇼핑몰같은 굵직한 단위의 앱들이 함께 있을 수 있기 때문에 공통으로 사용되는 기능인 로그인기능은 하나의 앱에 종속시키는게 좋다. 그렇기 때문에 common 앱에 구현하는게 좋다. 일단 common 앱을 다음 명령어를 입력해 새로 생성하자. 그렇게 하면 자동으로 디렉토리와 파일들이 자동으로 생성된다. 그리고 config.. 17. 템플릿 필터 및 답변 개수 표시 템플릿 필터란 템플릿 태그에서 | 문자 뒤에 사용하는 필터를 말한다. 저번에 사용한 |add:-5, |add:5, |default_if_none 이러한 것들이다. 템플릿 필터를 수정해 커스텀 템플릿 필터를 만들어보자. 먼저 저번에 만든 페이지의 문제점을 살펴보자. 게시물의 번호를 보면 1부터 시작하는데 어느 페이지를 가도 게시물 번호가 1번부터 시작한다. 사진의 페이지는 10페이지인데 게시물번호는 1번부터 시작하는것을 볼 수 있다. 만약 게시물 전체 건수가 12개 라면 첫번째 페이지 번호가 12~3 까지 역순으로 보여지고 두번째 페이지에서 2~1까지 보여져야한다. 최근에 작성한 게시물이 맨 앞으로 와야하기 때문에 역순으로 정렬되어야한다. 그렇게 하러면 번호 = 전체건수 - 시작인덱스 - 현재인덱스 + 1.. 16. Paginator 질문 목록 페이지는 아직 페이징 처리가 안되어 있기 때문에 만약 300개의 게시물을 작성하면 한 페이지에 300개의 게시물이 모두 한꺼번에 표시된다. 이 문제를 해결해보자. 일단 테스트를 할 수 있도록 테스트데이터를 만들자. 다음 명령어로 장고 쉘을 실행하자. 여기서 질문 데이터를 생성하기 위한 모듈을 import 한후 for 문을 이용해 300개의 테스트 데이터를 생성하자. 그리고 장고셸을 종료하고 테스트를 확인해보자. 300개 이상의 질문들이 한 페이지에 전부 보여진다. 반드시 페이징이 필요한 이유이다. [Paginator] 장고에서 페이징을 위한 클래스는 Paginator 이다. 이 클래스를 이용해 index 함수에 페이징 기능을 적용하자. projects\mysite\pybo\views.py 파일.. 15. 네비게이션 바 네비게이션 바 는 모든화면 위쪽에 고정되어 있는 부트스트랩 컴포넌트이다. 이를 이용해 메인페이지(Home)으로 돌아갈수있는 장치를 만들 수 있다. 네비게이션바는 모든 페이지에서 공통적으로 보여져야 하므로 projects\mysite\templates\base.html 을 다음과 같이 수정하자. pybo:index 페이지로 이동해 주는 Pybo 로고를 가장 왼쪽에 배치하고 그 오른쪽에 로그인 링크를 추가했다. 로그인 기능은 추후에 설정한다. 좌상단에 Pybo 아이콘과 로그인 아이콘이 생겼다. 아무 페이지에서 Pybo 를 누르면 메인 페이지로 돌아간다. 로그인 버튼은 아직 설정을 안해서 아무런 일도 발생하지 않는다. 웹 브라우저의 크기를 작게 조절하면 로그인버튼이 사라지고 우상단에 메뉴버튼이 생긴다. 부트스.. 14. 폼 [질문등록] 질문 등록을 하기위해 '질문 등록하기' 버튼을 만들어야 한다. question_list.html 파일을 수정해 '질문 등록하기' 버튼을 생성하자. 과 같은 링크이지만 부트스트랩의 btn btn-primary 클래스를 적용하면 버튼으로 보인다. 버튼을 클릭하면 pybo:question_create 별칭에 해당되는 URL 이 호출된다. 이제 pybo:question_create 별칭에 해당하는 URL 매핑규칙을 추가해야한다. projects\mysite\pybo\urls.py 파일을 수정하자. views.question_create 함수를 호출하도록 매핑했다. [Form] 이제 views.question_create 함수를 작성해야 한다. 그 전에 Form 에 대해서 먼저 알아보면, 폼은 페이지.. 13. 표준 HTML & 템플릿 상속 [표준 HTML] 지금까지 작성한 질문 목록, 질문 상세 템플릿은 표준 HTML 구조가 아니다. 어떤 웹 브라우저를 사용하더라도 웹 페이지가 동일하게 보이고 정상적으로 작동하게 하려면 반드시 웹 표준을 지키는 HTML 문서를 작성해야한다. 표준 HTML 문서의 구조는 html, head, body 엘리먼트가 있어야하고, CSS 파일 링크는 head 엘리먼트 안에 있어야 한다. meta, title 엘리먼트 또한 head 엘리먼트 등이 포함되어야 한다. [템플릿 상속] 앞에서 작성한 질문 목록, 질문 상세 템플릿을 표준 HTML 구조가 되도록 수정하자. 템플릿 파일들을 모두 표준 HTML 구조로 변경한다면 body 엘리먼트의 바깥 부분은 모두 같은 내용으로 중복될 것이다. 그러면 CSS 파일 이름이 변경되.. 12. 부트스트랩 [부트스트랩] 부트스트랩은 디자이너의 도움 없이 개발자 혼자서 괜찮은 수준의 웹 페이지를 만들수 있게 도와주는 프레임워크이다. https://getbootstrap.com/docs/5.1/getting-started/download/ Download Download Bootstrap to get the compiled CSS and JavaScript, source code, or include it with your favorite package managers like npm, RubyGems, and more. getbootstrap.com 링크를 통해 다운로드하자. 버전은 5.x 버전이다. 다운로드하면 다음과 같은 폴더가 있다. 그안에 css 폴더안에 bootstrap.min.css 파일이 있다... 11. 스태틱 디렉토리 [static 디렉토리] 스타일시트 파일은 장고의 스태틱 디렉토리에 저장해야 한다. 스태틱 디렉토리도 템플릿 디렉토리와 마찬가지로 config/settings.py 파일에 등록하여 사용한다. 일단 config/settings.py 파일을 수정하자. STATICFILES_DIRS 라는 리스트 변수를 추가하고 BASE_DIR/'static' 디렉토리를 추가했다.BASE_DIR/static 은 /Users//projects/mysite/static 을 의미하기때문에 다음 위치에 static 디렉토리를 생성해야한다. [스타일 시트] style.css 파일을 projects/mysite/static/style.css 에 만들고 다음과 같이 작성하자. style.css 파일에는 상세화면에 적용할 스타일을 정의했다... 이전 1 2 3 4 5 6 다음
