Juni_Dev_log

북마크 앱 만들기 ⑥ "템플릿(Template)" with Django 본문

Project/Bookmark APP 만들기 (Django)

북마크 앱 만들기 ⑥ "템플릿(Template)" with Django

Juni_K 2020. 8. 18. 19:15

① bookmark_list.html 템플릿 작성하기

 

북마크 리스트를 화면에 보여주는 템플릿 파일을 코딩할 것이다.

bookmark/templates/bookmark 디렉터리 하위에 템플릿 파일을 둬야 한다.

 

(bookmark_list.html)

<!DOCTYPE html>
<html>
<head>
	<title>Django Bookmark List</title>
</head>
<body>
	<div id="content">
		<h1>Bookmark List</h1>

		<ul>
			{% for bookmark in object_list %}
				<li><a href="{% url 'detail' bookmark.id %}">{{ bookmark }}</a></li>
			{% endfor %}
		</ul>

	</div>
</body>
</html>
  • object_list 객체는 BookmarkLV 클래스형 뷰에서 넘겨주는 컨텍스트 함수이다.
  • object_list 객체의 내용을 순회하면서 title을 화면에 순서 없는 리스트를 보여준다. 각 테스트에 URL 링크를 연결한다.

{{bookmark}} → 템플릿 변수. Bookmark 테이블의 특정 레코드 하나를 의미한다.

 

즉, 특정 Bookmark 객체를 의미하며, 해당 객체를 프린트하면 해당 객체의 str() 메서드를 호출해서 결과를 출력한다.

 

models.py 에서 str() 메서드를 정의할 때, 다음처럼 그 객체의 title 이 나오도록 정의했다.

 

def __str__(self):
        return self.title

이를 수정해보면 어떻게 바뀌는지도 확인해보자.

 

def __str__(self):
        return "%s %s" %(self.title, self.url)

그리고, 'detail URL 패턴(bookmark/1/형식)'으로 웹 요청을 보낸다는 의미 한다.

URL 패턴을 만들어주는 {% url %} 태그 기능은 자주 사용되므로 정확히 알아두고 넘어가자.

 

{% url %} 태그 기능

: 템플릿 태그는 URL 패턴에서 URL 스트링을 추출하는 역할을 한다.

 

② bookmark_detail.html 템플릿 작성하기

 

북마크 리스트에서 특정 북마크를 클릭하면 상세정보를 보여주는 템플릿 파일을 코딩한다.

 

(bookmark_detail.html)

<!DOCTYPE html>
<html>
<head>
	<title>Django Bookmark Detail</title>
</head>
<body>

	<div id="content">
		
		<h1>{{object.title}}</h1>

		<ul>
			<li>URL: <a href="{{object.url}}">{{object.url}}</a></li>
		</ul>

	</div>

</body>
</html>
  • 제목은 object.title로 지정하고 object는 BookmarkDV 클래스형 뷰에서 컨텍스트 변수로 넘겨주는 특정 객체이다.
  • {{object.url}} 템플릿 변수의 내용은 순서 없는 리스트 형식으로 보여준다.

 

(이전 포스팅)

2020/08/18 - [Project/Bookmark APP 만들기 (Django)] - 북마크 앱 만들기 ⑤ "뷰(View)" with Django

 

북마크 앱 만들기 ⑤ "뷰(View)" with Django

URLconf를 코딩하면서, 뷰를 클래스형으로 정의하기 위해 각 URL에 따른 해당 클래스 및 as.view()를 메서드로 지정했다. 이제 지정한 클래스 뷰를 코딩하자. 클래스 형 뷰를 코딩할 때, 제일 먼저 고��

juni-dev-log.tistory.com

(다음 포스팅)

2020/08/18 - [Project/Bookmark APP 만들기 (Django)] - 북마크 앱 만들기 ⑦ "지금까지의 작업 확인하기" with Django

 

북마크 앱 만들기 ⑦ "지금까지의 작업 확인하기" with Django

①Admin에서 데이터 입력하기 나는 mysql 을 했기 때문에 mysql에 데이터를 입력한다. (입력할 데이터) Title URL Naver Homepage www.naver.com Daum Homepage www.daum.net Google Homepage www.google.co.kr Gi..

juni-dev-log.tistory.com

 

저작자표시 비영리 변경금지

'Project > Bookmark APP 만들기 (Django)' 카테고리의 다른 글

북마크 앱 만들기 ⑦ "지금까지의 작업 확인하기" with Django  (0) 2020.08.18
북마크 앱 만들기 ⑤ "뷰(View)" with Django  (0) 2020.08.18
북마크 앱 만들기 ④ "URLconf" with Django  (0) 2020.08.18
북마크 앱 만들기 ③ "모델(Model)" with Django  (0) 2020.08.18
북마크 앱 만들기 ② "뼈대" with Django  (0) 2020.08.18
'Project/Bookmark APP 만들기 (Django)' Related Articles more
Comments