Django Form

Ryu Honggyu·2024년 8월 19일

Django

목록 보기
9/19
post-thumbnail

Django Form과 HTML Form의 차이

  • 이전에 배운 HTML Form과 헷갈릴 수 있기에 그 차이를 명확히 하고 시작함.

HTML Form

  • HTML Form: 사용자가 웹 페이지에서 데이터를 입력하고 서버로 전송하는 데 사용됨.
  • 각 입력 필드와 그 유효성 검사를 수동으로 설정하고, 서버 측에서 데이터를 처리해야 함.

Django Form

  • Django Form: 서버 측에서 HTML Form을 자동으로 생성하고, 유효성 검사를 포함하여 처리할 수 있게 만듦.
  • Form의 필드, 유효성 검사, 렌더링을 한 번에 처리해 코드의 일관성과 유지보수성을 향상시킴.

차이점 요약

표현식HTML FormDjango Form
정의 방법HTML 태그를 사용하여 수동으로 정의Django의 Form 클래스를 사용하여 정의
유효성 검사클라이언트 측에서 수동으로 처리서버 측에서 자동으로 처리
코드 관리코드 중복이 발생하기 쉬움코드의 일관성 유지, 중복 감소
유지보수유효성 검사 및 데이터 처리 로직이 분산유효성 검사, 데이터 처리 로직을 중앙 집중화
템플릿 렌더링 방식수동으로 HTML 작성Django 템플릿에서 자동으로 렌더링

Django Form 생성 & 사용

  • 다음은 Article 데이터를 입력받고 저장하는 Django Form 을 생성하는 과정임.

1. Form 클래스 생성

  • forms.Form 클래스: 사용자 입력을 받을 Form 클래스를 정의.
# articles/forms.py
from django import forms

class ArticleForm(forms.Form):
    title = forms.CharField(max_length=100)
    content = forms.CharField(widget=forms.Textarea)

2. Form을 뷰에서 사용하기

  • 생성한 Form 을 뷰에서 활용해 사용자에게 입력 양식 제공.
# articles/views.py
from .forms import ArticleForm

def new(request):
    form = ArticleForm()
    context = {
        'form': form,
    }
    return render(request, 'new.html', context)

3. Form을 템플릿에서 렌더링하기

  • 뷰에서 전달된 Form 객체를 템플릿에서 렌더링.
<!-- new.html -->
{% extends "base.html" %}

{% block content %}
  <h1>New Article</h1>
  <form method="POST">
    {% csrf_token %}
    {{ form.as_p }}
    <button type="submit">저장</button>
  </form>
{% endblock content %}

4. 유효성 검사 및 데이터 저장

  • Form 으로 사용자가 입력한 데이터를 받아 유효성 검사를 수행.
  • 유효한 경우 데이터를 저장.
# articles/views.py
from .forms import ArticleForm

def create(request):
    if request.method == "POST":
        form = ArticleForm(request.POST)
        if form.is_valid():
            title = form.cleaned_data['title']
            content = form.cleaned_data['content']
            article = Article(title=title, content=content)
            article.save()
            return redirect('articles')
    else:
        form = ArticleForm()

    context = {
        'form': form,
    }
    return render(request, 'new.html', context)
profile
알고리즘 & 웹 & CS & AI

0개의 댓글