Django에서 연락처 폼(contact form)은 생각보다 간단하게 만들 수 있지만, 폼(forms)과 뷰(views), 모델(models)을 일일이 작성하고 Admin에 모델을 등록하는 등 손봐야 할 것이 많습니다. 이 글에서는 미리 만들어진 패키지를 활용해 이런 번거로운 과정을 생략하고, 연락처 폼의 데이터를 사전에 정의된 모델에 바로 저장하는 방법을 소개합니다.
여기서 만들 연락처 폼은 models.py나 views.py에 코드를 한 줄도 작성하지 않고, HTML 폼 마크업도 직접 만들지 않은 채 데이터를 모델에 저장합니다. 그럼 바로 시작해 보겠습니다.
예제 따라 하기
먼저 Django 프로젝트와 앱(App)을 생성합니다.
아래 명령어로 django-contactforms 패키지를 설치합니다.
pip install django-contactforms
이어서 settings.py 파일에 다음 한 줄을 추가합니다.
INSTALLED_APPS+=["contactforms"]
패키지 모듈명과 앱 이름을 INSTALLED_APPS 목록에 함께 등록해 주세요.
1. 프로젝트 urls.py 설정
from django.contrib import admin
from django.urls import path,include
urlpatterns = [
path('admin/', admin.site.urls),
path('', include('contactforms.urls')),
path("aftercontact", include('MyForm.urls'))
]
URL 엔드포인트를 두 개 생성합니다. 하나는 연락처 폼을 표시하는 경로이고, 다른 하나는 폼 제출 후 리디렉션될 경로입니다.
2. 앱 urls.py 설정
from django.urls import path,include
from . import views
urlpatterns = [
path('',views.home,name="home"),
]
여기서는 연락처 폼 작성 완료 후 사용자에게 보여줄 페이지를 렌더링하도록 설정했습니다.
3. views.py 작성
from django.shortcuts import render
# Create your views here.
def home(request):
return render(request,"home.html")
위 코드는 home.html 템플릿을 렌더링하는 아주 단순한 뷰입니다.
4. 템플릿 파일 만들기
앱 디렉터리 안에 "templates" 폴더를 생성하고, 그 안에 다시 "contact" 폴더를 만든 뒤 그 안에 contact.html 파일을 추가합니다. contact.html에는 아래 내용을 입력합니다.
<!DOCTYPE html>
<html>
<body>
<div class="row">
<form action="{% url 'contact' %}" method="post">
<h3>Send a Message</h3>
{% csrf_token %}
<div class="form-group">
{% if messages %}
{% for message in messages %}
<span{% if message.tags %} class="{{ message.tags } }"{% endif %} style="color: green">
{{ message }}
</span>
{% endfor %}
{% endif %}
</div>
<div class="form-group">
{{ forms.name }}
</div>
<div class="form-group">
{{ forms.email }}
</div>
<div class="form-group">
{{ forms.subject }}
</div>
<div class="form-group">
{{ forms.message }}
</div>
<button class="btn btnprimary" type="submit">Submit</button>
</form>
</div>
</body>
</html>
이 폼이 "/" 엔드포인트에 표시됩니다. 패키지에서 제공하는 폼을 그대로 불러와 사용하기 때문에 입력 필드를 직접 마크업할 필요가 전혀 없습니다.
이제 templates 폴더로 돌아가 contact 폴더 바깥쪽에 home.html 파일을 만들고 아래 내용을 추가합니다.
<!DOCTYPE html>
<html>
<head><title>tut</title></head>
<body>
<h3>Successfull</h3>
</body>
</html>
실행 결과
연락처 폼을 제출하면 위에서 만든 home.html이 화면에 렌더링되며 성공 메시지가 표시됩니다. 이처럼 패키지 하나만으로 폼 생성부터 데이터 저장까지 전 과정을 손쉽게 처리할 수 있습니다.
