북마크 앱 만들기 ⑥ "템플릿(Template)" with Django
① 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