Form을 통해 데이터 입력 받기

폼 샘플 형태

 

나는 Title, Top text, Author 3가지를 입력 받아 책 표지에 제목, 부제, 저자 형태로 출력할 수 있는 폼을 만들고 싶다.

 

 

1) [forms.py]를 앱 폴더에 추가하여 폼의 이름과 필드명, 데이터타입을 지정한다.

- 책의 표지에 쓸 데이터를 입력 받으므로 [CoverForm]으로 지정

- title, top_text, author 모두 문자로 입력 받을 것이므로 [CharField()]를 사용

from django import forms

class CoverForm(forms.Form):
    title = forms.CharField()
    top_text = forms.CharField()
    author = forms.CharField() 

 

 

2) [forms.py]에서 만든 [CoverForm]을 import하여 [views.py]에서 로직을 임시로 작성한다.

- [CoverForm()]을 변수 [form]에 담아 context(ctx)를 통해 [index.html]로 render한다.

from django.shortcuts import render
from .forms import CoverForm

# Create your views here.
def index(request):
	form = CoverForm()
    ctx = {
        'form' : form,
    }
    return render(request, 'cover/index.html', ctx)

 

 

3) [index.html]에서 <form>태그를 작성한다.

- 우리가 웹브라우저에서 볼 수 있는 모양의 폼을 드디어 만든다.

- [action=""]은 입력 받은 데이터를 현재 페이지에서 처리하도록 한다.

- [method="post"]는 데이터를 저장할 수 있게 처리를 해주는 메소드이다.

- 따라서 폼을 통해 입력한 데이터를 현재 페이지에 전송하여 DB로 저장할 수 있게 기본 세팅을 하는 것이다.

<form action="" method="post">
    {% csrf_token %}
      {{ form }}
    <input type="submit" value="Generator O RLY">
</form>

 

 

짜잔, 완성된 폼이다. 

 

샘플과 비교하면 1줄로 작성된게 어색하게 느껴진다

 

<table> 태그를 활용하여 줄바꿈을 할 수 있다. 

<form action="" method="post">
    {% csrf_token %}
    <table>
      {{ form }}
    </table>
    <input type="submit" value="Generator O RLY">
form>

 

샘플과 똑같은 모습을 갖췄다

 

4) [views.py]에서 다시 로직을 구체적으로 구성한다.

- 웹브라우저에서 입력 받아 전송된 데이터를 [index 함수]를 통해 가공을 거친다.

- [CoverForm(request.POST)]는 폼과 폼에 입력된 데이터를 포함하고 있다.

- [is_valid() 메소드]는 데이터의 유효성을 검사하는데, [CharField()]에 해당하는지 검증하는 것이다.

- [cleaned_data]는 데이터를 딕셔너리 타입으로 제공하도록 해준다. 

- 완료시 cover 앱의 index 이름의 URL로 redirect시킨다. 

from django.shortcuts import render
from .forms import CoverForm

# Create your views here.
def index(request):
    if request.method == "POST":
        form = CoverForm(request.POST)
        if form.is_valid():
            form.cleaned_data
            return redirect('cover:index')
    else:
        form = CoverForm()

    ctx = {
        'form' : form,
    }
    return render(request, 'cover/index.html', ctx)