지금 까지만든 설문지페이지에서 오늘은 form을 작성해 볼 것이다.

 HTML에서 form은 데이터를 전달 하는 기능을 한다.
우리는 설문지에서 설문 선택지를 선택하고 버튼을 클릭하면 선택한 선택지의 정보를 담아서 웹 페이지에 전달할 것이다.

이 내용은 DB에 저장될 것이므로, POST 방식으로 보내게 할 것이다.


(detail.html)


detail.html 템플릿은 question 객체를 받는다.
받은 question 객체에서 질문 내용인 question_text를 h1 태그로 찍어준다.

그리고 에러메시지가 있으면 해당 에러 내용을 출력해준다.

그 다음 부터는 form 태그이다.
그런데 중간에 csrf 토큰이 보일 것이다. 우리는 form 을 사용하여 데이터를 전달할 것이기 때문에 CSRF 공격에 대해 생각하고 있어야한다. 장고에서 대신 CSRF 공격에 대해 예방하는 기능이 있는데
{% csrf_token %} 만 작성하면 된다. (나중에도 form 문에는 이 문구를 적어넣어야한다. )
해당 question객체에서 선택지들을 전부 가져온 후 for 문을 돌면서 radio 버튼과 선택지 내용을 출력한다.

웹페이지를 실행시켜서 직접 확인해보자!



(form 페이지)


질문 내용이 위에 찍혀있고 선택지들이 버튼과 함께 나열되어있는 것을 볼 수 있다.

위에 form 코드를 다시 보면 url vote로 이동하라고 action에 나와있다.

url vote는 우리가 작성한 polls/urls.py를 확인하면 알 수 있다.


(vote)


vote이름을 가진 주소패턴에 해당 question.id가 조합이 되면 어떤 주소가 된다.
보면 views.vote를 실행하게 되어있다.

그렇다면 views.vote를 작성해주자!


(views.vote)


우리는 question_id를 주소에서 전달받게 된다. 전달 받은 question_id를 pk로 사용하여 해당 질문 객체를 가져온다.
그 후 선택된 선택지를 가져오는데 request객체 안에 POST에 담겨있다. 우리가 POST로 전달했기 때문이다. POST 속에 choice=### 이런식으로 담겨온다. choice변수에 담긴 값을 pk로 선택된 질문을 가져온다. 그 후 선택된 질문객체에서 투표수를 1 증가시키고 저장한다.
그리고 Redirect한다. reverse를 사용해서 url 주소를 만든다.
polls 이름 영역의 urls.py에 정의 되어있는 results 이름의 주소 패턴을 가져오고 인자로 question.id를 조합하여 특정 url을 만드는 것이다. 그 주소로 리다이렉트한다.

그렇다면 처리된 결과를 확인하는 results의 화면도 만들어보자.


(views.results)


위에서 리다이렉트된 주소는 views.results를 호출한다. polls/urls.py를 확인하면 알 수 있다.
이 뷰에서는 질문 객체를 가져오고 이 질문 객체를 가지고 polls/results.html 템플릿을 보여준다.

보여주는 results.html 템플릿은 아래와 같다.


(results.html)


질문 객체에서 각각의 선택 내용과 투표수를 출력하는 템플릿이다.

실행해서 확인해보자.



(실행 확인)


확인해보니 잘 된다!

질문 객체를 가져오고, 질문 객체를 가지고 템플릿으로 전달하고 등등
어떻게 보면 이것 또한 루틴한 작업이다.
그래서 이번에는 제네릭 뷰를 이용해서 위의 페이지를 똑같이 만들어 볼 것이다.

제네릭 뷰에는 리스트뷰와 디테일뷰가 있다.
리스트뷰는 말 그대로 리스트들을 보여주는데 사용하고
디테일뷰는 우리가 detail view를 만들었던거와 같다.

먼저 제네릭뷰를 사용하기 전에 polls/urls.py를 수정해줘야한다.


(polls/urls.py)


제네릭뷰에서는 pk로 전달 받기 때문에 pk로 바꾸어 주었다.
그리고 호출하는 것이 각각의 뷰에서 as_view() 함수를 호출한다.
우리는 views에 위에서 사용한 클래스를 만들어줘야한다.

이어서 view를 수정해 줄 것이다. 제네릭 뷰를 이용해 수정한 코드는 아래와 같다.


(제네릭 뷰)


각각의 클래스를 만들었다.
template_name은 우리가 사용할 템플릿 위치를 알려준다.
그리고 model은 어떤 모델이 적용될 것인지 지정해주는 것이다.
DetailView의 경우 question 변수가 자동으로 제공된다. 그러나 ListView의 경우 자동 생성된 컨텍스트변수는 question_list이기 때문에 우리가 템플릿에서 사용했던 변수 이름으로 맞춰주기 위해 context_object_name의 변수로 지정해주었다.

ListView에서 get_queryset을 가지고 쿼리를 날리는데 우리는 최근 5개 글을 볼것이므로 해당 함수를 덮어쓴 것이다.

실행해서 웹페이지에서 똑같은 동작인지 확인해보자



(동작 확인)


같은 동작을 하는 것을 확인 할 수 있다.

(* 참조 - https://docs.djangoproject.com/ko/2.0/intro/tutorial04/)

저작자표시 비영리 변경금지 (새창열림)

'Web > Django Project' 카테고리의 다른 글

Simple SignUp  (1) 2018.07.25
Simple Login/Logout  (0) 2018.07.24
Django Tutorial - Views ( Template와 연결 )  (0) 2018.02.01
Django Tutorial - 관리자 생성 및 페이지보기  (0) 2018.01.31
Django Tutorial - Model  (0) 2018.01.31
게임 프로그램에 이미지를 그리는 것을 해볼 것이다.

우리가 사용할 것은 스프라이트이다.
스프라이트는 2D 이미지를 그리기 위해 설계된 DirectX 그래픽스 API의 일부이다.
(꼭 2D 이미지만을 위한 것은 아니지만 거의 주로 2D이미지에 사용된다.)

그렇다면 스프라이트를 이용하기 위해 스프라이트 포인터를 자주 사용하므로 간단하게 재정의한다.


(스프라이트 재정의)


앞으로 LP_SPRITE로 사용할 것이다.

그리고 스프라이트 포인터를 담고 있을 변수도 추가해준다.

스프라이트는 그래픽을 그리는 일을 하므로 그래픽 클래스에 변수를 만들것이다.


(스프라이트 포인터 변수)


그렇다면 이제 할 일은 스프라이트를 생성하고 그 스프라이트 주소를 우리가 만든 스프라이트 포인터 변수에 담아야 한다. (만들어야 사용할 수 있으므로 당연한 사고의 흐름이다!)



(스프라이트 생성)


스프라이트 생성함수는 위와 같다.
D3DXCreateSprite를 사용하고 첫번째 인자에 디바이스 인터페이스를 넘겨주고, 두 번째 인자는 생성될 스프라이트 객체의 주소를 담을 포인터 변수이다.

게임 엔진을 통해 수행되는 모든 스프라이트 그리기 작업은 하나의 DirectX 스프라이트로 처리된다. 앞으로 지금 만든 스프라이트를 이용해 그리기 작업을 수행할 것이다.

그 다음으로 이미지 파일로 부터 이미지를 가져와 텍스처를 만들것이다.
텍스처?
텍스처는 그래픽스에서 사용하는 프리미티브 타입에 적용할 수 있는 그림이다. 이 경우 텍스처는 스프라이트이다. ( 텍스처에 관해 궁금하신 분들은 구굴링! )
텍스처는 여기서 쉽게 말해 그릴 그림이라고 생각하고 넘어가도 된다. ( 2D 이미지를 그리는 경우 )

쉽게 정리해서
파일로부터 이미지를 가져와 그릴 수 있는 텍스쳐로 만든 후
스프라이트를 이용해 그 텍스쳐를 화면에 그린다!

그렇다면 파일로부터 이미지를 가져와 텍스처를 만드는 것을 계속해보자!



(텍스처 가져오기)


D3DXCreateTextureFromFileEx 함수를 이용해 파일로 부터 이미지를 가져오고 그 이미지로 텍스처를 만드는 작업을 한다. 맨 마지막 인자에 포인터 변수가 들어가는데 그 변수에 만들어진 텍스처가 저장된다.

중간 인자 중 텍스처의 폭과 높이가 있는데 이 정보를 파일로 부터 가져올 수 있다.
D3DXGetImageInfoFromFile을 사용하면 되는데 이 것을 포함해 텍스처를 로드하는 함수인

loadTexture의 완성 코드는 아래와 같다.


(loadTexture)


loadTexture함수는
파일로 부터 폭과 높이를 가져오고
그 후 텍스처를 만드는 함수이다.

이제 스프라이트를 그리는 작업을 살펴볼 것이다.
스프라이트는 신 사이에서 그려야한다.
신 시작 - (그리기) - 신 끝
위 처럼 신의 시작과 끝 사이에서 그려져야한다.

위의 원칙을 적용해 renderGame 함수를 적어보면 아래와 같다.


(renderGame)


renderGame함수는 게임 아이템을 그리는 함수이다.
렌더링 시작할 때 그래픽 함수에서 신을 시작하는 함수를 호출하고
그 후에 render() 를 호출한다. (여기서 그리기 작업이 들어가는 것이다. )
그리고 다 그렸으면 신을 종료하는 함수를 호출하여 그리는 작업을 마무리한다.
(지금까지 그리는 것들은 백버퍼에 그려지고 있는 것이다.)

그 후 백 버퍼를 화면에 표시해준다.

신을 시작하고 종료하는 함수는 아래와 같다.



(신 시작과 끝함수)


beginScene 함수는 신을 시작하는 함수이다.
신을 시작하기 전에 백버퍼를 지워 준 후 신을 시작한다.
endScene 함수는 신을 종료하는 함수이다.
내부적으로 디바이스 인터페이스에서 BeginScene과 EndScene을 호출한다.

신 시작 함수 호출과 스프라이트 그리기 함수 사이에서 한가지 작업이 더 들어가야한다.
그리기 전에 그릴 텍스처에 대한 설정이다. 크기 조정, 회전 및 위치를 지정하는 작업이다.

이 작업은 행렬 수학을 이용해 계산이 되는데 우리는 직접 계산해서 하는 것이 아니라 DirectX의 함수를 이용할 것이다.


(행렬 적용 및 그리기)


D3DXMatrixTransformation2D 함수를 사용하면 크기 조정, 회전 및 위치를 지정할 수 있는 변환 행렬을 구할 수 있다. 첫번째 인자로 만들어진 행렬이 저장된다.

만들어진 행렬을 SetTransform 함수에 넣어 호출해주면 해당 행렬을 스프라이트에 적용하게 되는 것이다.

그 후 Draw 함수를 이용해 그리기 작업이 들어가는 것이다.

이렇게 그리는 텍스처에 대한 속성값들이 있다. 이것들을 위한 구조체를 만들어서 정리하면 편하다.


(스프라이트 속성)


스프라이트 속성들을 모아서 구조체로 만들었다.

아래는 스프라이트 속성들을 설정하는 코드이다.


(스프라이트 속성 설정)


위 코드는 drawSprite 함수의 윗부분에 해당하고 이 코드들이 실행이 된 후 속성이 다 설정이 되면 위에서 봤던 행렬을 만들어준 후, 적용하고 그리는 단계로 drawSprite 함수가 이루어져 있다.

정리하면!
1. 그래픽 클래스에서 신을 시작한다.
2. 스프라이트의 Begin 함수를 호출
3. 스프라이트 속성 설정
4. 스프라이트 행렬 만들기
5. 스프라이트 행렬 적용
6. 스프라이트 그리기
7. 스프라이트의 End 함수 호출
8. 그래픽 클래스에서 신을 종료한다.


아래는 색상을 앞으로 이용하기 편하게 만들어 놓은 이름 공간이다.


(색상 namespace)


예를 들어 오렌지색을 사용하고 싶다면 코드에
graphicsNS::ORANGE라고만 입력하면 된다.

그래픽 클래스에 추가한 loadTexture 함수는 텍스처 데이터를 D3DPOOL_DEFAULT 메모리로 불러온다. 일반적으로 이 곳은 비디오 메모리인데, 다른 프로그램이 그래픽 디바이스를 사용하고 있다면 사용할 수 없거나, 로스트 상태가 된다. 그렇기에 로스트 상태가 되면 디바이스를 되찾는 과정이 필요하다.

게임에서 텍스처를 사용할 때 각 텍스처를 불러오고 관리하기 위해 TextureManager 객체를 만들 것이다.


(초기화함수)


초기화 함수에는 loadTexture를 이용해 해당 이미지를 가져와 텍스처를 생성하는 작업을 한다.

로스트 상태를 관리하기 위한 함수는 아래와 같다.


(로스트 관리)


이전 다른 디바이스와 마찬가지로 로스트 상태라면 해당 리소스를 해제해주어야하고 다시 얻어와야한다.

그 외 TextureManager 객체에 대한 데이터를 가져올 수 있는 함수들도 만들어준다.


(TextureManger 함수들)


이 함수들을 이용해 해당 텍스처에 대한 정보를 가져올 수 있다.
마지막으로 스프라이트를 그리고 관리하는데 필요한 모든 코드들을 Image 클래스로 통합할 것이다.

Image 클래스를 이용해 그리기는 작업을 할 것이다. (지금까지 만든것들을 Image 클래스에 통합하는 과정이다.)


(이미지 클래스 초기화함수)


초기화 함수에서는 필요한 객체를 가져오고, 해당 이미지의 텍스처 정보를 가져오는 과정이다.

이미지 클래스의 draw 함수이다.


(그리기 함수)


이 함수에서 그래픽의 drawSprite 함수를 호출한다. 그러면 우리가 지금까지 확인한 일련의 과정들이 실행되는 것이다.

draw 함수를 두개 만들었다. 하나는 위와 같고 다른 하나는 특정 sprite를 지정하여 그리는 함수로 아래와 같다.


(특정 스프라이트를 지정하여 그리는 함수)


그 외에 이미지 클래스의 데이터를 가져오고 설정하는 get과 set 함수들을 추가해준다.

그러면 지금까지 만든 내용들로 게임의 이미지를 그려볼 것이다.
성운 이미지를 배경으로 쓰고 행성 이미지를 그 위에 그리는 것이다.

Spacewar.h 함수에 게임 아이템 2개에 대한 텍스처와 이미지를 만들어준다.


(텍스처와 이미지)


그리고 초기화 과정에 텍스처 초기화과정과 이미지 초기화 과정을 넣어준다.


(게임 초기화 함수)


처음에 텍스처 초기화 과정이 이루어지면 그 텍스처매니저를 이미지 초기화 함수에 사용한다.
그리고 행성을 화면 중앙에 배치하는 코드를 넣었다.

이렇게 되면 그리는 작업의 준비는 끝난 것이다.

그리는 함수인 render() 함수에 해당 이미지를 그리는 함수를 호출하면된다.


(그리기)


위 render 함수 이전에 실행되는 것이 그래픽 클래스의 신 시작이고 render()함수 가 종료되고 실행되는 것이 크래픽 클래스의 신 종료 함수인 것을 기억해야한다.

그리는 것은 이미지 클래스의 draw(우리가 만든것) 을 이용한다.


(로스트 처리)


로스트 처리에 관한 부분도 넣어준다. 각각의 아이템마다 처리해준다.

그리고 빌드 후 실행해보자!


(실행 화면)



프로그램에 우리가 원하는 그림이 그려지는 걸 확인 할 수 있다.

(* 참조 - 2D 게임 프로그래밍, 찰스 켈리)

저작자표시 비영리 변경금지 (새창열림)

'Programing > Game Programing' 카테고리의 다른 글

(게임프로그래밍) 애니메이션, 컨트롤  (0) 2018.02.07
(게임프로그래밍) 간단한 애니메이션 추가  (0) 2018.02.07
게임 엔진 기초 틀 만들기(2) - Input Class  (0) 2018.01.31
게임 엔진 기초 틀 만들기(1) - Game Class  (0) 2018.01.31
DirectX 입문 초록색화면 프로그램 만들기  (0) 2018.01.24
이제는 views.py를 작성해 볼 것이다.

views 와 url을 연결하는 것은 지난 포스팅에서 다루었다.
이제 그 views.py를 작성 할 것이다.

개발환경이 바뀌었다.!!!!
우분투 너무 느렸는데, CentOS로 옮겼다. 아주 쾌적하고 좋았다. :)

우리는 4개의 view를 만들어야했다.
1. index : 설문지 리스트를 보여주는 view
2. detail : 특정 설문지에 들어가서 선택지들을 보여주는 view
3. vote : 선택지를 선택한 것에 대한 처리를 담당하는 view

4. results : 설문 결과를 보여주는 view


(views.py)


위와 같이 간단히 작성할 것이다.
지금 단계로는 우리가 계획한 view를 바로 설계할 수 없다.
위에 작성한 코드들은 해당 페이지와 연결을 하는 것을 해보기 위해서이다.
보면 view에 인자들을 살펴봐야한다.

첫번째 인자는 request 로 요청에 대한 객체이다.

두번째 인자는 넘겨 받는 인자인데, 우리가 urls.py를 작성할 때 url 주소에서 파싱한 내용들이다.


(polls/urls.py)


polls/urls.py 에 주소 패턴에 넘겨주는 인자가 있다.

이대로 실행해보자.
polls/3  의 주소를 요청하게 되면

뒤에 3이 question_id 라는 변수에 들어가서 넘겨가는 것이다.



(실행 화면)


3이라는 숫자가 question_id로 넘어가서 화면에 저렇게 표시 되는 것을 확인 할 수 있다.


이제 실제로 view에서 무언가를 처리하는 것을 넣을 것이다.
위에서는 단순하게 인자를 넘겨받는 것 까지만이었다.

최근 설문지 5개를 가져와서 출력하는 것을 해보자!



(views.index)


latest_question_list에 최신의 설문지 5개를 가져온다. 반복자형식이다.
그리고 해당 설문지의 설문내용을 하나씩 붙여서 output에 넣고
그 output을 화면에 출력해주는 코드이다.

확인!


(확인)


확인해보니 설문내용이 출력되는 것을 확인 할 수 있었다.

장고는 모델과 뷰, 템플릿이 따로 관리되는 MTV 구조를 가지고 있다.
그에 따라 우리도 템플릿을 만들어서 여기서 보여주는 것을 해볼 것이다.

템플릿은 settings.py 파일에서 INSTALLED_APP 디렉토리에서 하위 templates 디렉토리를 탐색한다.
고로 우리는 polls/templates 를 만들어야한다.

여기서 다시 polls 디렉토리를 만든다.
정리하면,
polls/templates/polls
이렇다.

이유는 장고가 템플릿을 찾을 때 이름이 일치하는 첫번째 템플릿을 가져온다.
그렇다면 동일한 템플릿 이름이 다른 APP에도 있다면? 어떻게 구분할 수 있을까?
그렇기 때문에 templates디렉토리 아래에 해당 어플 이름으로 디렉토리를 하나 더 만들어 주어서
템플릿에 이름을 구분시켜주는 것이다.

polls/templates/polls/index.html 을 만들자!



(polls/templates/polls/index.html)


위 템플릿은 latest_question_list 를 넘겨받는다.

코드 설명
latest_question_list에서 하나씩 가져와서 question에 넣으면서 반복한다.
question의 id 값을 이용해 링크 걸린 문구를 출력한다.

만약 가져올 설문이 하나도 없다면
설문이 없다고 출력한다.

이렇게 템플릿을 만들었으니

우리는 view에서 이 템플릿과 연결해야한다.



(polls/views.index)


template에 템플릿을 가져오고
context 에 latest_question_list 변수를 지정한 사전형 자료를 담아둔다.

그리고 template.render를 해주면 된다.



(결과)


이렇게 실행하게 되면
웹 페이지에서 링크로 출력되는 것을 확인 할 수 있다.

여기서 의문이 든다.
템플릿 로드하고, 변수 저장하고 템플릿 렌더해서 HttpResponse로 넘겨준다.
너무 루틴하지 않은가?
우리의 파이썬이 이걸 가만 놔둘리 없다.

단축기로 render라고 만들어두었다.
이 모든 과정을 한방에 해준다.

단축기를 사용해보자.



(단축기 사용)


render를 사용하면 위의 과정을 한번에 해준다.
단순히 템플릿을 지정해주고, 넘겨줄 변수를 사전형으로 만들어서 넘겨주면된다.

views에서 처리해야할 일이 또 뭐가 있을까?
바로,
에러처리다.

웹 페이지에서 대표적인 에러는 바로 404 에러이다.
해당 웹 페이지가 없는데 요청하는 것이다.
예를 들어 /polls/24  -> 만약 id가 24가 없다면 해당 페이지는 준비 되지 않은것이다.

404 에러 처리를 해보자!



(404 에러처리)


파이썬의 try except 구문을 사용한다.
해당 쿼리를 날려서 설문지를 가져오는데 만약 그게 없다면
404 에러를 반환한다.

실행하기 위해 detail.html을 만들어야하는데 형식상 만드는 것이므로 지금은 아주 간단히 작성한다.



(polls/templates/polls/detail.html)


없는 인덱스로 실행해보자.


(404 에러)


우리가 적은 Question does not exist 보이는가?
우리가 404 에러 처리를 하였다.

그렇다면 여기서도 또 의문이 든다.
try except 구문
왠지 많이 자주 쓰일 것이다.

그렇다!
이것 또한 단축기로 만들었다.!!!!
get_object_or_404 를 이용하면 해당 객체를 가져오는데 만약 없다면 404 에러를 내는 

우리가 위에서 했던 것을 한방에 해주는 함수다.



(단축기 사용)


실행해본다.



(실행 결과)


똑같이 404 에러가 떴다.
다만 에러 문구는 다르다!

이제 detail.html 템플릿에서

선택지를 보여주는 작업을 해볼 것이다.



(polls/templates/polls/detail.html)


해당 템플릿에서
question 객체를 받았다.
설문지에서 선택지를 전부 가져와서 하나씩 choice에 넣고
choice의 선택지를 출력해주는 것을 반복하는 코드이다.

실행해보면

(실행)


선택지들이 나열되어 나온다.


index 템플릿에서 detail 템플릿을 호출하였다.



(index 템플릿)


index 템플릿에서
/polls/ 
이렇게 url주소가 하드 코딩되어있다.

그렇다면 만약 detail 템플릿의 url이 바뀌면
이렇게 하드코딩된 주소를 찾아서 일일히 다 바꿔야할까?
그렇기 때문에 url 주소를 간편히 쓸수 있는 것이 있다.


(하드코딩 제거)


위처럼 {% url '이름' %} 이렇게 쓰면 된다.

그렇다면 저 url은 뭘까?


(urls.py)


우리가 urls.py에서 마지막 인자로 name 인자를 둔 것이 기억날 것이다.
이것이 우리가 url패턴을 각각 이름으로 정한것이다.

그렇기에 detail url을 쓰고 싶다면
{% url ' detail' %} 이렇게 쓰기만 하면 되는 것이다.

그렇다면 이 이름이 겹치는 것을 생각해봐야한다.
우리는 APP을 여러개 만들 건데 그 url마다 이름을 다 다르게 해야하는 건 너무 힘든 일이다.
다른 APP에 detail이라는 url 이름이 있을 수 있기 때문이다.

이걸 방지하기 위해 app_name을 지정해 줄 수 있다.



(APP 이름 지정)


위 처럼 app_name을 지정해주면 polls에서 사용하는 detail 이라고 알 수 있다.

그렇다면 당연히 아까 적은 url 표기도 바꾸어 주어야한다.


(url 표기 변경)


polls:detail
이렇게 바꾸면 된다.

(* 참조 - https://docs.djangoproject.com/ko/2.0/intro/tutorial03/)


저작자표시 비영리 변경금지 (새창열림)

'Web > Django Project' 카테고리의 다른 글

Simple Login/Logout  (0) 2018.07.24
Django Tutorial - Form 만들기, 제네릭뷰 사용  (0) 2018.02.06
Django Tutorial - 관리자 생성 및 페이지보기  (0) 2018.01.31
Django Tutorial - Model  (0) 2018.01.31
Django Tutorial - APP 생성  (0) 2018.01.31

+ Recent posts

티스토리툴바