지금까지 모델을 만들고 conf를 설정하고 view를 작성했다면 이제 실제 화면에 보여지는 템플릿을 만드는 단계입니다. 앞서 bookmark_list.html, bookmark_detail.html이 생성된다고 했습니다. 이 두가지 파일을 구현해 보겠습니다.
bookmark_list.html
먼저 bookmark폴더에 template폴더를 만들고, 그 안에 또 bookmark 폴더를 만듭니다.
그 속에 bookmark_list.html을 작성합니다.
(myvenv) D:\myDjango\bookmark>mkdir templates
(myvenv) D:\myDjango\bookmark>cd templates
(myvenv) D:\myDjango\bookmark\templates>mkdir bookmark
(myvenv) D:\myDjango\bookmark\templates>cd bookmark
(myvenv) D:\myDjango\bookmark\templates\bookmark>subl bookmark_list.html
커맨드에서 위와 같이 작업하고 에디터 상에서
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<!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>
| cs |
와 같이 bookmark_list.html을 작성합니다.
저는 html을 모르지만 살펴보니 대강 알것도 같습니다. 중요한 것은 가운데 for 문인데,
object_list로 넘어온 객체를 for문으로 돌려서 세부내용을 출력해주는 것입니다. 그리고 클릭되는 경우 detail URL로 웹요청을 보낸다는 뜻입니다.(이런...html도 공부해야 하나 ㅠㅠ)
bookmark_detail.html
다음으로 북마크가 클릭되면 보여질 디테일뷰를 작업하겠습니다.
역시 같은 폴더에서
(myvenv) D:\myDjango\bookmark\templates\bookmark>subl bookmark_detail.html
를 실행하고
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<!DOCTYPE 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>
| cs |
와 같이 작성해줍니다.
이제 bookmark앱 작업을 모두 마친 셈입니다. 이제 전체 모습을 확인해보겠습니다.
폴더를 이동해서 커맨드 다음을 실행하고,
(myvenv) D:\myDjango>python manage.py runserver
브라우저에
http://127.0.0.1:8000/admin/
을 입력하면
하단 우측 +Add를 눌러 북마크를 편집할 수 있습니다.
임의로 사이트를 몇개 입력하고
http://127.0.0.1:8000/bookmark 를 브라우저에 입력해 이동해 봅니다.
직접 입력한 두개의 사이트 페이지가 나옵니다. 그 중 하나를 클릭하면
디테일 페이지로 이동하게 됩니다.
댓글 없음:
댓글 쓰기