todo를 누르면 상세페이지로 이동하도록 해보겠다.
1번 todo는 http://127.0.0.1:8000/todo/1
2번 todo는 http://127.0.0.1:8000/todo/2
이런 식으로 연결해보겠다.
그러기 위해서는 urls.py에 특수한 url을 정의해야한다.
[todo/urls.py]
from django.contrib import admin
from django.urls import path
from . import views
urlpatterns = [
path('todo/', views.todo),
path('todo_create/', views.create),
path('todo/<int:todo_id>/', views.read), # '<int:todo_id>'는 path 변환기로 todo 모델 데이터의 id값이 정수 값을 나타내는 것을 의미한다.
][todo/views.py/todo_detail 함수]
def read(request, todo_id):
return HttpResponse(f"reading {todo_id}")
상세페이지의 URL 경로는 나눠놨다. 이제 실제로 해당 todo의 상세페이지로 가면 해당 todo의 내용을 출력하기 위해 데이터베이스에서 특정 조건의 데이터를 가져오도록 테스트해보자.
[todo/views.py/todo_detail 함수]
def read(request, todo_id): # GET 요청과 함께 todo가 생성될 때 자동으로 부여되는 todo_id 값을 데이터베이스에서 가져온다.
detailed_todo = Todo.objects.get(id=todo_id) # http://127.0.0.1:8000/todo/3/를 요청하면 데이터베이스의 todo 모델 데이터의 id값이 url 패턴의 엔드포인트인 <int:todo_id> 값과 같은 데이터만 가져온다.
# print(detailed_todo)
return HttpResponse(f"{detailed_todo.id}번쨰 todo : {detailed_todo.content}")
데이터베이스에서 가지고 온 값을 가지고 페이지에 잘 띄워줬다.
이제는 상세페이지 템플릿을 작성해서 특정 URL API 요청에 해당 데이터의 속성값을 템플릿에 넣어 화면에 띄워보겠다.
[todo/views.py/todo_detail 함수]
def read(request, todo_id):
detailed_todo = Todo.objects.get(id=todo_id)
# print(todo)
context = {
"detailed_todo" : detailed_todo
}
return render(request, 'todo/detail.html', context)[template/todo/detail.html]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>{{detailed_todo.id}}번째 Todo!!</h1>
<h3>[ {{detailed_todo.content}} ]</h3>
<p>생성시각 : {{detailed_todo.created_at}}</p>
<p>수정시각 : {{detailed_todo.updated_at}}</p>
<a href="/todo/">Todo List로 돌아가기</a>
</body>
</html>
이번에는 클릭을 통해서 상세페이지로 가도록 해보겠다.
[template/todo/todo_list.html]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>알렉스의 ToDo List</title>
</head>
<body>
<h1> Alex's ToDo List </h1>
<ul>
첫 번째 todo는 {{ todo1.content }}
{% for todo in todos %}
<a href="/todo/{{detailed_todo.id}}">
<li>
<div>
{{ todo.content }}
</div>
</li>
</a>
{% endfor %}
</ul>
</body>
</html>
해당 todo를 누르면 상세페이지로 넘어간다.
