장고를 활용한 웹사이트 만들기 - 여론조사 화면 구현

다음 강의 보기: 여론조사 결과저장 동영상 다시보기 이 강의 동영상에 대한 의견 보내기

강의노트
질문 (8)

여론조사 화면 구현

<!-- \mysite\templates\elections\area.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <title>지역구</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1>지역구</h1>
<br>
    <table class="table table-striped">
        <thead>
        <tr>
            <td><B>이름</B></td>
            <td><B>소개</B></td>
            <td><B>기호</B></td>
            <td><B>지지하기</B></td>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td> 후보1</td>
            <td> 후보소개 </td>
            <td> 기호1번 </td>
            <td>
                <form action = "#" method="post">
                    <button name="choice" value="#">선택</button>
                </form>
            </td>
        </tr>
        <tr>
            <td> 후보2</td>
            <td> 후보소개 </td>
            <td> 기호2번 </td>
            <td>
                <form action = "#" method="post">
                    <button name="choice" value="#">선택</button>
                </form>
            </td>
        </tr>       
        </tbody>
    </table>
</div>
</body>

여론조사 화면 구현하기

1. area(지역구)에 따라서 필터 한 결과를 html 파일에 전달합니다.

# C:\Code\mysite\elections\views.py
# 기존 코드 유지

def areas(request, area):
    candidates = Candidate.objects.filter(area = area) #Candidate의 area와 매개변수 area가 같은 객체만 불러오기
    context = {'candidates': candidates,
    'area' : area}
    return render(request, 'elections/area.html', context)

2. views.area로부터 전달받은 context를 for문을 돌면서 출력합니다

<!-- C:\Code\mysite\templates\elections\area.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <title>{{area}}</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1>{{area}}</h1>
<br>
    <table class="table table-striped">
        <thead>
        <tr>
            <td><B>이름</B></td>
            <td><B>소개</B></td>
            <td><B>기호</B></td>
            <td><B>지지하기</B></td>
        </tr>
        </thead>
        <tbody>
        {% for candidate in candidates %}
        <tr>
            <td> {{candidate.name}}</td>
            <td> {{candidate.introduction}}</td>
            <td> 기호{{candidate.party_number}}번 </td>
            <td>
                <form action = "#" method = "post">
                    <button name="choice" value="#">선택</button>
                </form>
            </td>
        </tr>
        {% endfor %}
        </tbody>
    </table>
</div>
</body>

[선택하기] 버튼을 누르면 결과가 저장되게 만들기

1. area에 현재 진행 중인 poll이 있는지 확인하기

# C:\Code\mysite\elections\views.py

# ...

from .models import Candidate, Poll, Choice
import datetime

# index 함수 유지

def areas(request, area):
    today = datetime.datetime.now()
    try :
        poll = Poll.objects.get(area = area, start_date__lte = today, end_date__gte=today) # get에 인자로 조건을 전달해줍니다. 
        candidates = Candidate.objects.filter(area = area) # Candidate의 area와 매개변수 area가 같은 객체만 불러오기
    except:
        poll = None
        candidates = None
    context = {'candidates': candidates,
    'area' : area,
    'poll' : poll }
    return render(request, 'elections/area.html', context)

lte : less than equal.
- start_date__let = today : start_date <= today
gte : greater than equal.
- end_date__gte=today : today <= end_date

2. 해당 poll을 이용해서 데이터를 저장

<!-- C:\Code\mysite\templates\elections\area.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <title>{{area}}</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1>{{area}}</h1>
<br>
{% if poll %}
    <table class="table table-striped">
        <thead>
        <tr>
            <td><B>이름</B></td>
            <td><B>소개</B></td>
            <td><B>기호</B></td>
            <td><B>지지하기</B></td>
        </tr>
        </thead>
        <tbody>
        {% for candidate in candidates %}
        <tr>
            <td> {{candidate.name}}</td>
            <td> {{candidate.introduction}}</td>
            <td> 기호{{candidate.party_number}}번 </td>
            <td>
                <form action = "#" method = "post">
                    <button name="choice" value="#">선택</button>
                </form>
            </td>
        </tr>
        {% endfor %}
        <tbody>
    </table>
{% else %}
여론조사가 없습니다
{% endif %}
</div>
</body>

강의를 따라하면서 예외처리가 잘 되지 않는 경우 다음을 추가해주세요

# C:\Code\mysite\settings.py

#기존 코드 유지

DATABASES = {
    #유지해주세요
}
DATABASE_OPTIONS = {'charset': 'utf8'} #추가
TIME_ZONE = 'Asia/Seoul' #추가
LANGUAGE_CODE = 'ko-kr' #추가

#기존 코드 유지