[3주차] Django View 실습

뷰(view) 는 애플리케이션의 "로직"을 넣는 곳입니다.
즉, View는 필요한 데이터를 모델 (혹은 외부)에서 가져와서 적절히 가공하여 웹 페이지 결과를 만들도록 컨트롤하는 역할을 하는거죠!
뷰는 어려워보이지만 사실 파이썬 함수일 뿐입니다. 뷰들은 Django App안의 views.py 라는 파일에 정의하게 되는데, 각 함수가 하나의 View를 정의합니다.
우리는 views를 polls/views.py 파일 안에 추가하도록 하겠습니다.

 

1. polls/view.py 수정 (기존 코드에서 밑의 코드 추가)

• view는 request라는 인자를 갖고, HttpResponse()라는 리턴값을 가진다. 
  • 클라이언트로부터 여러가지 정보가 담긴 request를 받고, 행동을 마친 후 HttpResponse() 응답을 보냄

def detail(request, question_id):
    return HttpResponse("You're looking at question %s." % question_id)

def results(request, question_id):
    response = "You're looking at the results of question %s."
    return HttpResponse(response % question_id)

def vote(request, question_id):
    return HttpResponse("You're voting on question %s." % question_id)

작성한 뒤 ctrl+s

 

 

2. polls/urls.py에 path()함수 추가 (해당 코드로 수정)

- 새로운 뷰를 polls.urls 모듈로 연결

• 질문 “색인” 페이지 – 최근 질문들 표시
• 질문 “세부” 페이지 – 질문 내용과 투표할 수 있는 서식을 표시
• 질문 “결과” 페이지 – 특정 질문에 대한 결과 표시
• 투표 기능 – 특정 질문에 대해 특정 선택을 할 수 있는 투표 기능 제공

from django.urls import path

from . import views

urlpatterns = [
    # ex: /polls/
    path('', views.index, name='index'),
    # ex: /polls/5/
    path('<int:question_id>/', views.detail, name='detail'),
    # ex: /polls/5/results/
    path('<int:question_id>/results/', views.results, name='results'),
    # ex: /polls/5/vote/
    path('<int:question_id>/vote/', views.vote, name='vote'),
]

작성한 뒤 ctrl+s

 

 

 

3. polls/urls.py에서 HttpResponse()에서 지정된 문자열이 아닌 데이터를 추출하여 리턴하도록 수정

• question 데이터에서 최대 5개까지([:5])의 데이터를 출판 일자(pub_date)를 정렬하여 데이터를 가져와 latest_question_list에 넣는다.
• 이 5개의 데이터가 담겨있는 latest_qustion_list를 ',' 로 연결하여 문자열로 만들고 난 뒤 output 값에 넣어준다.
• output값을 HttpResponse로 리턴해준다.

from django.http import HttpResponse
from .models import Question

def index(request):
    latest_question_list = Question.objects.order_by('-pub_date')[:5]
    output = ', '.join([q.question_text for q in latest_question_list])
    return HttpResponse(output)

def detail(request, question_id):
    return HttpResponse("You're looking at question %s." % question_id)

def results(request, question_id):
    response = "You're looking at the results of question %s."
    return HttpResponse(response % question_id)

def vote(request, question_id):
    return HttpResponse("You're voting on question %s." % question_id)

 

 

 

 

 

4. 서버 연결 후 3의 과정이 제대로 이루어졌는지 확인

- py manage.py runserver 하여 서버 연결해주기

- 현재 질문이 1개밖에 없기 때문에 하나의 질문만 출력됨

PS C:\Users\bythu\Desktop\SWLUG\Django\mysite> py manage.py runserver
Watching for file changes with StatReloader
Performing system checks...

System check identified no issues (0 silenced).
April 04, 2023 - 06:20:51
Django version 4.1.7, using settings 'mysite.settings'
Starting development server at http://127.0.0.1:8000/ 
Quit the server with CTRL-BREAK.
[04/Apr/2023 06:21:16] "GET /polls/ HTTP/1.1" 200 11

 

 

 

 

---

하지만, 이렇게 되면 페이지의 디자인 수정이 어려워진다.
디자인의 수정을 위해서는 정의된 파이썬 함수 내부를 수정해야 하기 때문이다. 
그래서 내부 '로직' 담당인 <뷰>와 디자인 담당의 <템플릿>을 구분해주어야 한다. 

 

1. 템플릿 디렉토리 생성

- polls/templates/polls/index.html 생성 

1. polls 우클릭 후 New Folder 클릭: templates
2. templates 우클릭 후 New Folder 클릭: polls 
3.  polls 우클릭 후 New File 클릭: index.html

---

* 주의해야할 점

템플릿 디렉토리 안에 앱(기능)의 이름으로 디렉토리를 하나 더 만들어 html 파일(디자인)을 관리한다. 

만약, 이러한 구분이 없이 디렉토리 안에 바로 html 파일을 만들 경우, 장고는 다른 앱의 템플릿과 혼동할 수 있다. 

따라서, 만약에 페이지를 디자인하는 템플릿을 만들고자 한다면 1. 템플릿 디렉토리 생성에서 우리가 한 것 처럼

1. 디렉토리 내에 앱 이름의 디렉토리 생성
2. 앱 이름의 디렉토리 내에 html 파일 생성

의 순서를 무조건 거쳐야 한다. 

---

 

2. index.html 작성

* 경로 확인해주세요! 템플릿 디렉토리/ polls 디렉토리/index.html 파일이여야 합니다

- html 코드

• <ul> 태그를 통해 latest_question_list의 데이터를 출력해준다
• question.id를 넣은 링크를 연결해주도록 한다. 

{% if latest_question_list %}
    <ul>
    {% for question in latest_question_list %}
        <li><a href="/polls/{{ question.id }}/">{{ question.question_text }}</a></li>
    {% endfor %}
    </ul>
{% else %}
    <p>No polls are available.</p>
{% endif %}

작성한 뒤 ctrl+s

 

 

3. polls/view.py 의 템플릿이 적용되도록 index 뷰 수정

- context를 통해 템플릿에 데이터를 전달해준다.

- 템플릿이 데이터 사용한다. 

• template = loader.get_template('polls/index.html')

from django.http import HttpResponse
from django.template import loader
from .models import Question

def index(request):
    latest_question_list = Question.objects.order_by('-pub_date')[:5]
    template = loader.get_template('polls/index.html')
    context = {
        'latest_question_list': latest_question_list,
    }
    return HttpResponse(template.render(context, request))

작성한 뒤 ctrl+s

 

 

4. 제대로 수정이 되었는지 확인

- 개발자도구(f12)를 통해 question.id가 제대로 전달이 되는 것을 확인할 수 있다. 

 

 

 

 

+) render()를 통해 템플릿 연결을 위한 코드를 단순하게 만들기 

render() 함수는 request 객체를 첫번째 인수로 받고, 템플릿 이름을 두번째 인수로 받으며, context 사전형 객체를 세전째 선택적(optional) 인수로 받는다. 인수로 지정된 context로 표현된 템플릿의 HttpResponse 객체가 반환된다.

 

from django.http import HttpResponse

from .models import Question
from django.shortcuts import render


def index(request):
    latest_question_list = Question.objects.order_by('-pub_date')[:5]
    context = {'latest_question_list': latest_question_list}
    return render(request, 'polls/index.html', context)

작성한 뒤 ctrl+s

 

모든 뷰에 적용한다면, 더 이상 loader와 HttpResponse를 임포트하지 않아도 된다. 

-> 하지만 실제로 적용해보면, 저희는 모든 뷰에 적용하지 않았기 때문에 밑의 오류가 뜹니다.

따라서 HttpResponse는 import해주어야 해요! 

name 'HttpResponse' is not defined

 

 

* 참고로 장고는 reloading이라는 기능을 통해 변경되는 내용을 감지하면 자동으로  reloading되어 반영됨

 

 

- URL을 새로고침하여 제대로 동작하는지 확인

 

 

5. 에러 처리 하기 (뷰 수정)

- question에 데이터가 없는 경우 에러가 발생하는데, 이럴때마다 에러를 발생시키면 안된다. 

따라서, 에러 페이지를 처리해줄 것이다. 

- 데이터가 없을 때 에러 페이지 대신 "Question does not exist"가 출력되도록 detail을 수정해준다.

from django.http import HttpResponse, Http404

...

def detail(request, question_id):
    try:
        question = Question.objects.get(pk=question_id)
    except Question.DoesNotExist:
        raise Http404("Question does not exist")
    return render(request, 'polls/detail.html', {'question': question})

 

 

 

6. 에러 처리 하기 (템플릿 수정)

1. polls/templates 디렉토리에 detail.html 추가

2. detail.html 코드 작성

{{ question }}

작성한 뒤 ctrl+s

 

6. 제대로 수정되었는지 확인

- 없는 question.id를 조회할 경우 어떻게 에러가 처리되는지 확인해볼 것이다. 

http://127.0.0.1:8000/polls/5/

-> 데이터가 지금 1개이므로 5번째 데이터는 없다. 따라서 URL에 5를 넣어 없는 데이터를 조회할 경우 어떻게 되는지 확인해보는 것이다. 

 

 

 

+) get_object_or_404()를 통해 에러 처리를 위한 코드 단순하게 만들기 

get_object_or_404() 함수는 Django 모델을 첫번째 인자로 받고, 몇개의 키워드 인수를 모델 관리자의 get() 함수에 넘깁니다. 만약 객체가 존재하지 않을 경우, Http404 예외가 발생합니다.

from django.shortcuts import get_object_or_404, render

from .models import Question
# ...
def detail(request, question_id):
    question = get_object_or_404(Question, pk=question_id)
    return render(request, 'polls/detail.html', {'question': question})

작성한 뒤 ctrl+s

 

 

- 새로고침하여 제대로 작동이 되는지 확인한다.

 

 

---

다음으로는 다시 돌아와 detail () 뷰의 템플릿을 수정하여 question을 클릭하면 보이는 detail() 뷰의 디자인을 꾸며보겠습니다.

 

1. detail() 뷰의 템플릿 수정 

- <h1> 태그를 통해 question을 보여주고, 선택지를 리스트 태그를 사용해 보여주는 코드이다. 

 

<h1>{{ question.question_text }}</h1>
<ul>
{% for choice in question.choice_set.all %}
    <li>{{ choice.choice_text }}</li>
{% endfor %}
</ul>

작성한 뒤 ctrl+s

 

 

- 위의 html코드는 question(ex. "What's new?)을 ForeignKey로 갖는 모든 choice들을 보여주고자 하는 코드이다. 

(model.py) - 수정사항 없음. 참고하기 위해 화면 캡쳐 가져온 것

 

 

 

2. 제대로 수정되었는지 확인

URL 새로고침한 뒤, 클릭해보면 수정된 디자인이 보이는 것을 확인할 수 있다. 

- 하지만, 선택지가 보이지 않는다. 현재 선택지 데이터가 없기 때문이다.

 

3. 선택지 데이터 추가해주기 

- admin으로 들어가 선택지 데이터를 추가해주도록 한다.

 

(1) polls/admin.py 수정 후 저장

from django.contrib import admin

# Register your models here.
from .models import Question, Choice

admin.site.register(Question)
admin.site.register(Choice)

 

(2) http://127.0.0.1:8000/admin/ 접속 후 선택지 추가 

• Ubuntu
• MS
• SWLUG

 

4. 확인

- 선택지가 제대로 추가된 것을 확인할 수 있다. 

- "What's new?"가 갖는 모든 선택지가 보이게 된다. 

 

---

하지만 여기서, index.html를 확인해보면 url 부분("/polls/{{ question.id }}/")이 하드코딩되어 있는 것을 확인할 수 있다. 

* 하드코딩이란: 데이터를 코드 내부에 직접 입력하는 것

이럴 경우 url이 변경되는 경우에 쉽게 수정하지 못하게 된다.

장고에서는 url마다 이름(name)을 지정할 수 있게 해준다. 따라서, url 코드에 name을 명시하여 템플릿에 그 name을 직접 써주게 되면 수정을 용이하게 할 수 있다. 이 name을 url 별칭이라고 한다.

// C언어 등에서 값을 넣어주는게 아니라 값 대신에 변수를 사용하는 것과 비슷한 개념이다. 

 

 

사실 이미 이 이름을 지정했었다. 

urls.py의 path()함수에서 보이는 바로 이 name 값이다. 

 

 

 

1. urls.py 수정

- 다른 앱에서도 detail에 대한 url 네임을 사용할 수 있으므로, 해당 앱에서 사용하는 url에 대해서는 namespace를 명시하여 설정해준다.

app_name = 'polls'

작성한 뒤 ctrl+s

 

2. index.html 수정

- 코드를 수정하여 url 네임스페이스를 명시해준다.

<li><a href="{% url 'polls:detail' question.id %}">{{ question.question_text }}</a></li>

작성한 뒤 ctrl+s