Django 모델 적용하기(2)

이전 포스팅에서 포켓몬리스트를 보여주는 페이지에 대한 하드코딩을 데이터를 호출하는 방법으로 변경했다. 본 포스팅에서는 포켓몬리스트에서 이동하는 상세페이지를 하드코딩에서 데이터를 호출하는 방법으로 변경한다.

---

urls.py 변경

기존에 작성된 url 패턴을 보면 list/{url}로 접근하면 {url}을 문자열로 보고 pokemon_name에 담아서 views.py의 pokemon_detail 함수로 전달한다.

urlpatterns = [
	path('list', 'views.pokemon-list'),  
    path('list/<str:pokemon_name>', 'views.pokemon_detail'),  📌기존에 작성된 url 패턴
]

list/{url}의 {url}을 정수로 보고 pk 변수에 담아서 pokemon_detail 함수에 전달하는 패턴으로 변경한다.

urlpatterns = [
	path('list', 'views.pokemon-list'),  
    path('list/<int:pk>', 'views.pokemon_detail'),  📌변경된 url 패턴
]

---

views.py의 pokemon_detail 함수 작성

전에 뭐라고 입력했는지 기억 안나지만 아마 하드코딩 되어있을 것이다. 다시 작성해보자. 우선 context 변수를 빈 사전형 자료로 만든다.

def pokemon_detail(request, pk):
	context = dict()  📌

다음으로 url로부터 전달받은 pk를 활용해 Poke 모델에 접근해 pokemon_info 변수에 pk와 일치하는 id의 데이터를 불러온다.

def pokemon_detail(request, pk):
	context = dict()
    pokemon_info = Poke.objects.get(id=pk)  📌

다음으로 context 변수에 pokemon_info를 넣고 context 인자로 전달한다.

def pokemon_detail(request, pk):
	context = dict()
    pokemon_info = Poke.objects.get(id=pk) 
    context{"pokemon_info"}=pokemon_info  📌
    return render(request, 'pokemon-book/pokemon_detail.html', context=context)

---

pokemon_list.html 템플릿 수정

pokemon_detail.html 템플릿 가기 전에, list 템플릿을 먼저 수정한다.

{% extends './base.html' %} 
{% load static %} 

{% block date-block %}  
	<div>{{today}}</div>  
{% endblock date-block %}

{% block container %}
	{% for pokemon in pokemonlist %}  
		<img src={% get_static_prefix %}{{pokemon.img_path}}/>
        <p>{{pokemon.name}}</p> 
        <p>{{pokemon.description}}</p>
        <p>{{pokemon.level}}레벨</p>
        <a href="{{pokemon.id}}">자세히 보기</a>  📌
	{% endfor %}
{% endblock container %}

이렇게 입력하면 자세히 보기 버튼 클릭 시, 도메인/list/{id} 로 이동된다.

이 때, 위에서 정의한 url 패턴에 따라 id는 pk에 저장되어 view의 pokemon_detail 함수에 전달되며 pokemon_info에 해당 pk와 일치하는 id값을 가진 데이터를 호출하여 pokemon_detail.html 템플릿에 전달된다.

#views.py
def pokemon_detail(request, pk):
	context = dict()
    pokemon_info = Poke.objects.get(id=pk) 
    context{"pokemon_info"}=pokemon_info  📌
    return render(request, 'pokemon-book/pokemon_detail.html', context=context)

---

pokemon_detail.html 템플릿 변경

마지막으로 detail 템플릿만 수정하면 된다. 이전에 뭐라고 작성했는지 기억나지 않으니 처음부터 작성하겠다.

{% load static %}

<h2> {{pokemon_info.name}} </h2>
<p> {{pokemon_info.description}} </p>
<p> {{pokemon_info.level}} </p>
<img src="{% get_static_prefix %}{{pokemon_info.img_path}}"/>

pk와 일치하는 id를 가진 데이터를 pokemon_info에 담아서 context 사전으로 전달받았으니, pokemon.{필드}로 각 데이터를 호출할 수 있다.