[장고 설계철학으로 시작하는 파이썬 장고 입문] 4. (실습) django template 상속, bootstrap5 적용

 

✍ 실습 목표
- 템플릿 상속 문법 적용
- django-bootstrap5 라이브러리 적용
- 장고 템플릿 엔진을 통해 이메일 메세지 문자열을 조합하여, 메일 발송하기

1. template 상속

(1) app/templates/app 경로에 base.html 생성

- 자식 template에서 상속받아서 내용을 넣을 공간을 만들어주는 것이 필수

같은 경로의 다른 template들이 상속받을 부모 template(base.html) 생성

 

(2) 자식 template 수정

- 상속받을 부모 template과 동일한 내용을 반복하지 말자.

상속 코드를 쳐주고, 다른 내용은 제거하고, 부모 template의 공간에 들어갈 코드만 넣어주자.

base.html을 상속받을 준비가 된 index.html(좌)와 post_detail.html(우)

index page, add/1 page, add/2 page에 동일한 template이 잘 적용되었다.

 

2. django-bootstrap5 적용

(1) django-bootstrap5 설치

pip install django-bootstrap5 # 터미널에서 설치

* 프로젝트 중에 추가 설치한 것들은 requirements.txt에 담아두는 것이 좋다.

 

(2) settings.py 수정

settings.py의 installed_apps에 "django_bootstrap"을 추가한다. 이때 라이브러리는 -이지만 앱 이름은 _을 사용

 

(3) base.html에 bootstrap5 적용

template 엔진을 통해 bootstrap 자동 적용 / load는 import 개념

 

(4) Objects를 생성할 수 있는(title과 content가 포함된 포스팅) forms.py 생성

app 폴더 안에 form.py를 만들고 title과 content를 입력하는 form을 만드는 클래스(포스팅하는 form을 만드는)를 생성.

이 forms.py에서 form과 관련된 함수와 클래스 생성 예정.

이때 PostForm 클래스는 django.forms.ModelForm 클래스를 상속받아서 Form HTML 문자열 렌더링, HTML Form을 통해 저장을 시도하는 값에 대한 유효성 검사 및 DB 저장 등을 수행한다.

Meta 클래스의 model은 models.py의 Post이고, fields = "__all__"을 통해 모든 데이터를 가져온다.

PostForm.Meta의 model이 되는 Post. 유효성 검사는 이 스펙을 따른다.

 

(5) app.views.py에 클래스 기반 뷰  post_new 생성

object를 만들 수 있는 form을 보여주고 유효성 검사와 object 저장을 할 수 있는 CreateView를 활용해 post_new라는 클래스 기반 뷰 생성. 이때 app.models의 Post 클래스를 model 인자로, form_class에는 app.forms.PostForm 클래스를 받아온다. success_url로 post_new 클래스를 통해 새로운 포스팅이 성공했을 시 이동하는 경로이다.

* django.views.generic은 자주 사용하는 뷰를 모아놓은 클래스

 

(6) post_new의 object를 작성할 post_form.html 생성

post_form.html의 초기 버전

(7) "app/new/" 경로 라우팅을 추가하여 새롭게 포스팅할 때(app/new/로 접속 시)의 경로 지정

app/new/ 접속 시 app.views에서 post_new 클래스 인스턴스를 생성

 

(8) index.html에 포스팅할 form을 띄우는 링크 생성

새 포스팅 링크 생성 완료

 

(9) forms에 테이블 태그 추가

이 상태에서 새 포스팅의 form은 왼쪽과 같다.

app/views.py에서 클래스 기반 뷰  post_new 를 생성하면서 사용한 CreateView 인스턴스는 PostForm 인스턴스를 참조하는데, 이때 forms.py의 PostForm에서 참조한 인스턴스는 django.forms의 ModelForm 인스턴스이다.

이 ModelForm 인스턴스의 기본형이 왼쪽이다.

HTML 소스코드를 살펴보면 tr, th, td와 같은 테이블 태그를 사용하는데 정작 테이블 태그는 들어가있지 않다.

따라서 테이블 태그를 넣어주면 오른쪽과 같이 정돈된다.

자동완성 form

post_form.html에 테이블 태그 추가

 

(10) 최종 post_form.html 수정

action으로 현재 경로에 form에 입력한 데이터 전달 -> app.views.py의 post_new 클래스에서 DB로 저장

novalidate로 웹브라우저 자체의 필수값 체킹 기능을 끄고, 장고에서 유효성 검사를 진행하도록 함

csrf_token으로 post 메소드로 접근 시의 보안을 통과

bootstrap_form의 form을 상속받아 스타일링 적용

이때 7번째 줄의 form은 CreateView를 사용 시에 참조하는 PostForm 인스턴스이다.

input으로 submit 버튼을 생성

최종 완성된 post_form.html

 

bootstrap에서 지원하는 container 클래스를 div 태그로 집어넣으면서 

div container 이전 index 페이지와 new 페이지

최종 완성된 index page와 new page. 만들어진 form에 내용 입력 시 새롭게 포스팅되며 DB에도 저장된다.