Django - Basic - 5에서 템플릿을 만들고 context와 request 변수를 넣어 렌더링했습니다.
이번엔 템플릿 내에서 로직에 따라 조건을 처리해 결과를 보여주는 방법에 대해 알아보겠습니다.
1. anchor tag url 설정
# firstapp/index.html
# body에 다음 두줄 추가
<a href="/select">시작하기!</a>
<a href="{% url 'select' %}">시작하기!</a>먼저 html의 anchor 태그의 url 넣는 방법을 알아보겠습니다.
위 두방법중에 권장하는 것은 아래의 {% %}로 감싸진 방법입니다.
이 방법을 해석하면
'select라는 이름을 가진 path(url)'입니다.
urls.py의 urlpatterns를 확인하겠습니다.
urlpatterns = [
path('', views.index, name='index'),
path('select/', views.select, name='select'),
path('result/', views.result, name='result'),
]name에 설정해둔 대로 views.select로 이동합니다.
select와 result도 html 파일을 띄워주도록 하겠습니다.
먼저, views.py에서 html파일을 띄워주는 명령으로 바꾸겠습니다.
#from django.http import HttpResponse
#from django.template import loader
from django.shortcuts import render
from datetime import datetime
def index(request):
#template = loader.get_template('firstapp/index.html')
now = datetime.now()
context = {
'current_date' : now
}
#return HttpResponse(template.render(context, request))
return render(request, 'firstapp/index.html', context)
def select(request):
context={'number' : 4}
return render(request, 'firstapp/select.html', context)
def result(request):
context={'numbers' : [1,2,3,4,5,6]}
return render(request, 'firstapp/result.html', context)HttpResponse와 loader를 주석처리했습니다. render 함수로 간단하게 표현할 수 있기 때문입니다.
render함수로만 표현할 때, argument의 순서는 request, template, context입니다.
select의 context에 있는 number와 result의 context에 있는 numbers는 나중에 써먹을 것이니 미리 만들어 둔 것입니다.
이제 각 메서드에 어떤 페이지를 띄우라고 알려줬으니 페이지를 만들러 가보겠습니다.
2. Template에서 Logic처리
firstapp/templates/firstapp으로 이동해서 select.html, result.html을 만들겠습니다.
#select.html
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p>
{% if number|divisibleby:2 %}
짝수입니다.
{% else %}
홀수입니다.
{% endif %}
</p>
<p>
<a href="{% url 'result' %}"><button>결과보기</button></a>
</p>
</body>
</html>{% %}가 또 나왔습니다.
이를 Template Language라고 합니다.
지금은 단순하게 짚고 넘어가겠습니다.
변수 : {{ }} - 변수를 다룹니다.
태그 : {% %} - 로직을 다룹니다.
필터 : {{value|length}}와 같이 변수에 필터를 적용합니다.
자세한 내용은 https://docs.djangoproject.com/en/1.7/topics/templates/
에서 확인할 수 있습니다.
일단, select.html에서
태그 안의 내용을 확인하겠습니다.
number가 2로 나눠지면 "짝수입니다." 를 그렇지 않으면 "홀수입니다."를 화면에 띄웁니다.
그리고 아래의
태그를 보면 "결과보기"라는 버튼을 클릭하면 result라는 이름을 가진 path(url)로 이동합니다.
그런데 number는 뭘까요? 바로 context데이터에 있는 값입니다.
이제 result 페이지를 만들어보겠습니다.
#firstapp/result.html
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<ul>
{% for num in numbers %}
<li>{{ num }}</li>
{% endfor %}
</ul>
</body>
</html>context로 받은 numbers안에 있는 각 요소들을
이제 runserver를 하고 각 페이지로 넘어가면 우리가 짜놓은 로직대로 돌아가는 것을 확인할 수 있습니다.
