-
728x90반응형
링크 만들기
📌 herf 어트리뷰트로 link 주소를 설정한다. 지역구가 출력되는 곳에 링크를 추가 하려면 아래 코드를 참고 한다.
url 다루기
locallhost:8000/areas/미국/에 대한 url을 등록해주지 않았기 때문에 링크를 클릭하면 페이지를 찾을 수 없다는 창이 뜬다.(Page not found)
url을 등록하려면 urls.py와 view.py를 수정한다.
💡 url의 첫 번째 인자 - r'^areas/(?P<area>.+)/$'
Django에서 url의 첫 번째 인자는 보통 r'^.../...$' 과 같은 형태를 띄고 있다.
따옴표 안에 들어가는 내용은 정규표현식으로 나타낸다.
정규표현식의 내용을 간략히 보면
- ^ : 문자열의 시작을 알린다.
- areas : 문자 그대로 스트링 areas입니다.
- $ : 문자열의 끝을 알린다.
- (?<name>...) : symbolic 그룹 이름 name 으로 그룹과 매칭 되는 부분 문자열에 접근이 가능하다. (?P<area>.+)의 경우 group 이름은 area (부등호 <> 로 감싸진 부분)이며, 이를 통해 views.areas에 문자열을 전달한다.
.+는 개행 문자를 제외한 모든 문자를 의미한다.
정규표현식에 대한 더 자세한 내용은 다음을 참고한다.
- 정규표현식과 패턴을 배울 수 있는 사이트(한글) :정규표현식과 패턴들
- python 정규표현식에 대한 official documentation(영어) : python - re
url의 두 번째 인자 - views.areas
첫 번째 인자(정규표현식)와 매칭되는 주소를 요청받으면 views.areas 함수가 호출된다.여론조사 화면 구현하기
elections 폴더에 area.html 파일 생성 후 코드입력
<!-- \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>views.py areas 함수 수정
새로고침 결과
- area(지역구)에 따라서 필터 한 결과를 html 파일에 전달한다.
- 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>새로고침 결과
[선택하기] 버튼을 누르면 결과가 저장되게 만들기
- area에 현재 진행 중인 poll이 있는지 확인하기
- - lte : less than equal.
- start_date__let = today : start_date <= today
- gte : greater than equal.
- end_date__gte = today : today <= end_date
- 해당 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>새로고침 결과
localhost:8000/admin 에서 poll 을 수정 후
예외처리가 잘 되지 않는 경우 다음을 추가한다.
# C:\Code\mysite\settings.py
# 기존 코드 유지
DATABASES = {
#코드유지
}
DATABASE_OPTIONS = {'charset':'utf8'} # 추가
TIME_ZONE ='Asia/Seoul' # 추가
LANGUAGE_CODE = 'ko-kr' #추가
# 기존 코드 유지여론조사 결과 저장
- 투표 결과를 DB에 저장
- 웹사이트에서 결과를 전달
- action : 선택 결과가 전달될 url을 지정한다.
- value : 전달할 값을 지정한다.
<!-- 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>지역구</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 = "/polls/{{poll.id}}/" method = "post"> {% csrf_token %} <button name="choice" value="{{candidate.id}}">선택</button> </form> </td> </tr> {% endfor %} <tbody> </table> {% else %} 여론조사가 없습니다 {% endif %} </div> </body>🎯 action 에서 지정한 url을 등록
🎯 view.polls 구현
localhost:8000 지지하기 항목의 선택 버튼을 클릭하면 아래와 같이 Choice object에 Votes 카운터가 증가된다.
여론조사 결과 보기1 - http redirect 하기
urls.py 에서 사용하는 정규표현식에 대한 강의 : 링크
templates < elections 에 아래와 같은 내용으로 result.html 파일을 생성 후 작성한다.
<!-- C:\Code\mysite\elections\templates\elections\result.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>후보1</B></td> <td><B>후보2</B></td> </tr> </thead> <tbody> <tr> <td> 기간1 </td> <td> 후보1 지지율</td> <td> 후보2 지지율</td> </tr> <tbody> </table> </div> </body>아래와 같이 [가-힣]을 사용하면 한글 url 로 접속하도록 제한할 수 있다.
views.py 를 다음과 같이 수정한다.
선택 버튼을 누르면 다음과 같이 result.html 이 그려진다.
728x90반응형'Language > Python' 카테고리의 다른 글
[Python] Django 파일 사용하기 (0) 2017.08.16 [Pyhton] Django 결과보기/404오류/템플릿 상속/네비게이션바 (0) 2017.08.16 [Python] 장고 shell/템플릿으로 html 불러오기/템플릿에 정보 체우기/MVC 패턴/여론조사 모델 (0) 2017.08.11 Python 모델클래스/마이그레이션과 DB/장고 어드민/데이터 보여주기 (0) 2017.08.10 [Python Django 설치 및 프로젝트 만들기 (feat.pip) (0) 2017.08.10
