장고를 활용한 웹사이트 만들기 - 4. 데이터 보여주기, 템플릿으로 html 불러오기

앞 시간에 등록한 후보들의 데이터를 출력해보자.

• 데이터 접근 방법
• 데이터를 화면에 출력하기 위해 view.py에 해당 테이블을 import 해준다.
  

from .models import Candidate // 현재 디렉토리의 models.py에서 Candidate라는 모델을 import하기 위한 선언                                  
def index(request):
	candidates = Candidate.objects.all()  # 변수candidates에 Candidate 테이블의 모든 row를 할당
	str = ''
	for candidate in candidates:
		str += "<p>{} 기호 {}번 ({})<br>".format(candidate.name,
			candidate.party_number,
			candidate.area)
		str += candidate.introduction + "</p>"
	return HttpResponse(str)

• 테이블에 컬럼을 추가하고 싶으면 모델 클래스에서 필드를 추가한 후, 마이그레이션을 다시 해준다.

• 템플릿으로 html 불러오기
• 위의 페이지를 개발자 모드로 보면 html의 기본 태그가 하나도 없는 것을 볼 수 있다.
  
• 이를 해결하기 위해 str 변수에 태그를 직접 넣어줘야 하는데, 이를 템플릿을 활용한다.

• 템플릿의 구조
  

• 위의 사진은 템플릿의 폴더 구조를 보여준다. 앱 > templates > 앱 > index.html 의 구조로 되어 있다.

• 장고는 모든 앱에서 템플릿 파일을 모아놓고 필요한 것을 가져다쓰는 구조를 하고 있다.

• 따라서, 헷갈리지 않기위해 templates의 하위 폴더로 앱 명의 폴더를 하나 더 만드는 것이다.

• index.html 파일 추가 및 템플릿 호출
• 기존 str 변수를 불러오는 방식이 아닌, 템플릿의 html 파일을 불러오는 형식을 갖는다.
  
• html을 추가하고, view.py에서 render 함수를 이용해 추가된 html 파일을 불러오면 된다.

페이지를 새로고침하면 밑의 사진과 같은 결과물을 확인할 수 있다.

※ 단, 아직 DB 테이블의 데이터를 가져오지 않았음을 인지하자.

• html에 DB 데이터 입력하기

1. DB 정보를 html에 전달하기

• Dictionary 형태로 Table의 모든 row값을 context 변수에 할당 후, render 함수를 이용해 html에 전달한다.

         2. index.html에서 뿌려주기

• {% %} 이 형태를 이용하면 html을 만들어 낼 때, 파이썬 문법을 사용할 수 있다.
  

• context 변수에 담긴 candidates라는 key를 이용해 데이터를 불러와 사용한다.

위의 결과로 동적인 화면이 생성되었음을 볼 수 있다.