001, 002에 이어서 이번에는 003 create form입니다. 


결론적으로는 잘 까먹는 저를 위해서 작성해두는 포스팅이구요.

혹시라도 읽고 계시는 분이라면 순서대로 읽고 계시다고 가정하고 내용을 정리합니다. 


앞선 포스팅에서 생성한 프로젝트 및 앱의 구조는 아래와 같슴다. 


../formstest/
                  ┣ manage.py
                  ┗ formstest/
                  ┃                ┣ __init__.py
                  ┃                ┣ settings.py
                  ┃                ┣ urls.py
                  ┃                ┗ wsgi.py
                  ┃                

                  ┗formstestapp/                

                                     ┣ static (folder)

                                     ┣ template (folder) -- formstest.html

                                     ┣ __init__.py

                                     ┣ admin.py

                                     ┣ models.py

                                     ┣ tests.py

                                      views.py


이번 포스팅에서 정리해둘 내용은 form.py를 통해서 간단한 form을 만들고 그것을 template 파일을 통해 웹 브라우저에 나타내는 것입니다.


1. forms.py 만들기.


forms.py는 위 구조에서 봤을 때 app 안에 들어가야죠. 

vi로 다음과 같이 작성해줍니다. 

3줄에서 django에서 제공하는 forms 클래스를 불러오구요.

6~8줄 html에서 보여지고자 하는 form의 내용을 하나의 class로 만들어줍니다.

여기서 보이는 forms.CharField는 이름에서 알 수 있듯이 텍스트 입력 박스입니다. 


forms에는 여러 input을 지원하는데요. 자세한 내용은 다음 URL을 참고하시면 되겠습니다.

https://docs.djangoproject.com/en/1.8/ref/forms/fields/

004  포스팅에서 더 자세히 다뤄보려고 하구요. (사실 005 포스팅을 위해 001~003 포스팅을 작성하는 중입니다.. ;; 004는 좀있다 포함 )



2.  views.py 업데이트.


forms.py를 만들었는데, 이걸 보여주는 부분은 Template 파일입니다. 

Template 파일과 forms.py에서 만들어둔 class를 연결하는 부분은 views.py에서 할 수 있습니다. 

002에서 작성했었던 views.py를 아래와 같이 변경해줍니다.

7줄에서 forms.py에 작성되어 있는 TestForm 클래스를 불러옵니다. 

15줄에서 context안에 TestForm을 하나 생성해서 넣어주고요.

17줄에서 formstest.html 라는 template에 context를 전달합니다.



3. template 파일 업데이트 


현재 사용하고 있는 template 파일은 formstest.html 입니다. 

이녀석을 다음과 같이 변경해줍니다. 

views.py에서 보내진 context의 값들을 사용할 수 있는데, name, var1~3은 사용하지 않았습니다. 

오직 form만 사용한 것입니다. 


4번째 줄에서 {{form.as_p}}  부분이 forms.py에서 만들어진 form 내용을 출력해주는 부분입니다.

이때 as_p 라고 붙여줬는데, forms.py에서 만들어진 요소를 <p> 태그로 감싸주겠다는 뜻입니다.

기본적으로는 tr 인거 같네요.


4. runserver 및 테스트


runserver 후 웹 브라우저로 접속해보면 아래와 같은 그림이 보이면 성공입니다.

접근 예시 : http://ipAddress:8000/formstestapp/ft


SUBMIT BUTTTON을 누르면 template 파일에 작성해둔 것처럼 /formstestapp/form_request로 요청이 갑니다.

하지만 아직 해당 주소에 대해서는 아무것도 작성하지 않았구요. 

004에서 다뤄보겠습니다. 


아무튼 테스트까지 끝. 

모든 소스는 다음 URL에서 확인할 수 있슴다.  https://github.com/motobyus/moto/tree/master/djangoFormsTest/003_createForm/formstest


+ Recent posts