지난 글에 이어서 북마크 서비스 페이지를 만들어 봅니다.
개인 공부를 하며 내용을 정리합니다.
Code: https://github.com/ghk0409/Django_bookmark/
7. URL 연결하기
- 뷰를 만들었으면 '어떤 주소'를 사용해서 해당 뷰를 호출할 수 있도록 연결해줘야 합니다.
+ 어떤 주소를 입력했을 때, 어떤 뷰를 보여줄 것인지를 결정!!
+ 이 설정은 urls.py에서 관리합니다.
- config 폴더에 있는 루트 urls.py 파일만 있어도 무방하지만 한 번 만든 앱을 다른 프로젝트에서 재사용할 수도?? 있는 날이 생길 수 있으니 앱에 관한 URL 연결은 앱 폴더의 urls.py에서 설정 해줍니다.
+ (루트 폴더) config/urls.py // (앱 폴더) bookmark/urls.py 두 군데를 설정해볼께요
# config/urls.py
# 앱에 관한 urls.py의 내용은 루트 파일에 연결해줘야만 동작 가능
from django.contrib import admin
from django.urls import path, include
# 아래 코드로 연결하면 bookmark/ 까지의 URL을 잘라내고 나머지 부분을 bookmark.urls로 전달해 찾는다
urlpatterns = [
path('bookmark/', include('bookmark.urls')), # bookmark.urls 경로 설정
path('admin/', admin.site.urls),
]
- config/urls.py 설정이 끝났으면 이어서 bookmark/urls.py 파일을 만들고 진행 해봅니다.
# bookmark/urls.py
# bookmark 앱 폴더에 urls.py가 없으므로 새파일을 만들어서 작성
from django.urls import path
from .views import BookmarkListView
urlpatterns = [
# '' 인수는 북마크앱의 루트 페이지 역할 bookmark/ 로 접속 시 BookmarkListView 뷰 호출
# 함수형 뷰는 이름만 호출하면 되지만 클래스형 뷰는 뒤에 .as_view() 꼭 붙이기!! (그래야 정상 작동)
# 마지막 인자 name은 설정한 이름을 가지고 해당 URL 패턴을 찾을 수 있도록 하는 역할
path('', BookmarkListView.as_view(), name='list'),
]
- 그리고 한 번 잘 작동하는지 서버를 실행 시킨 후, 확인해보면~
8. 템플릿 만들기(bookmark_list.html)
- 위의 오류를 해결하고 예쁘게 뷰를 보여줄 수 있도록 '템플릿'을 추가 해봅니다.
+ 템플릿은 프론트엔드의 코드가 저장되는 파일들이면서 Django 데이터를 껴넣는 양식 파일입니다.
+ 뷰의 내용을 어떻게 브라우저에 표시할지 템플릿이 결정해주죠
+ 템플릿은 앱 폴더(bookmark) 내부의 templates 폴더에 위치해야 합니다!! (정해진 위치임)
+ 보통 앱 이름으로 폴더를 한 번 더 만들어 저장합니다. (templates/bookmark 폴더 만들기)
+ templates/bookmark 폴더에 html 파일을 생성해줍니다. [해당 폴더 우클릭 -> New -> HTML File]
- 생성된 bookmark_list.html 파일의 body 태그 안에 아래 코드를 추가 해줍니다.
# bookmark/templates/bookmart/bookmark_list.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<!--여기서부터 수정(추가)-->
<body>
<!--북마크 추가하기 링크-->
<div class="btn-group">
<a href="#" class="btn btn-info">Add Bookmark</a>
</div>
<p></p>
<!--북마크 목록 출력-->
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Site</th>
<th scope="col">URL</th>
<th scope="col">Modify</th>
<th scope="col">Delete</th>
</tr>
</thead>
<tbody>
<!--제네릭 뷰에서는 모델의 오브젝트가 여러 개일 경우 object_list 변수로 전달함!!-->
<!--object_list에서 bookmark 이름으로 북마크를 하나씩 꺼내 한 줄씩 출력-->
{% for bookmark in object_list %}
<!--가져온 하나의 북마크 당 하나의 tr 태그로 묶기-->
<tr>
<td>{{forloop.counter}}</td>
<td><a href="#">{{bookmark.site_name}}</a></td>
<td><a href="{{bookmark.url}}" target="_blank">{{bookmark.url}}</a></td>
<td><a href="#" class="btn btn-success btn-sm">Modify</a></td> # 수정 버튼 추가
<td><a href="#" class="btn btn-danger btn-sm">Delete</a></td> # 삭제 버튼 추가
</tr>
{% endfor %}
</tbody>
</table>
</body>
</html>** html 코드에 대해 잘 안다면 알기 쉽지만 모르는 경우에는... 일단은 따라해봅니다. 간단한 html 관련 설명도 추후에 진행해볼께요
- html을 알고 나면 자기만의 웹 페이지 만들기도 가능하니까 알아두면 무조건 좋아요 요즘 세상에
- 그리고 서버를 재실행해서 결과를 확인해봅니다.
여기까지 기본적인 틀??은 구현해봤습니다. 뼈대를 만들어놨으니 이제 살을 붙여볼 차례네요.
이제 북마크 추가 / 상세보기 / 수정 / 삭제 각각의 기능들의 구현을 진행해보겠습니다~!!
그럼 다음 페이지에 이어서 계속 만들어 봅니다. (개인적으로 한 페이지가 너무 길어지는거 별로라서 분리분리~)
해당 프로젝트는 "베프의 오지랖 파이썬 웹 프로그래밍(디지털북스)"를 참고합니다.
'Django > Project' 카테고리의 다른 글
| [Project] Ongstagram Service #1 (0) | 2021.06.01 |
|---|---|
| [Project] Ong's BookMark Service #5 (1) | 2021.05.29 |
| [Project] Ong's BookMark Service #4 (0) | 2021.05.29 |
| [Project] Ong's BookMark Service #2 (0) | 2021.05.27 |
| [Project] Ong's BookMark Service #1 (0) | 2021.05.25 |
