Django(장고) todo/create.html

장현웅·2023년 9월 5일

이제 웹페이지에 HTML 폼(

) 부분을 띄우고 클라이언트가 작성한 정보를 받기 위해 Template파일을 만들어주겠다.

Django 탬플릿 태그 <form></form>

HTML 폼(form)을 생성하기 위한 Django 탬플릿 언어의 탬플릿 태그 중 하나로, 한 개 이상의 input 요소를 포함하는 <form></form> 태그의 요소들의 집합으로 정의된다.
<form action="/todo/" method="POST">
  <input type="text">
  <button type="submit"> 추가 </button>
</form>
type="submit"
모든 input 요소의 데이터가 서버로 업로드

action 속성
Form이 submit될 때 처리가 필요한 데이터가 전송될 URL 주소를 지정한다. 미설정시 현재 페이지 URL로 다시 제출된다.

method 속성
클라이언트의 HTTP 요청 방식

[templates/todo/create.html]

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <h1>여기에서 todo 작성해주세요</h1>
  <form action="/todo/create/" method="POST">
    {% csrf_token %}
    <input type="text" name="content" id="content">
    <button type="submit">만들기</button>
  </form>
</body>
</html>

Document

여기에서 todo 작성해주세요

만들기

위 코드의 <form></form>태그는 HTML 폼(form)을 생성하기 위한 Django 탬플릿 언어의 탬플릿 태그 중 하나이다. HTML 폼(form)은 웹 페이지에서 클라이언트로부터 정보를 입력받거나 전송하는데 사용되는 웹 요소이다.여기를 참고. (HTML 폼 참고)

action 속성은 Form이 submit될 때 처리가 필요한 데이터가 전송될 URL 주소이고 Method 속성은 HTTP 요청 Method이다.

이 URL경로로 웹 서버와 웹 어플리케이션은 이를 디렉토리 경로로 해석하고 해당 디렉토리 또는 경로에 있는 디렉토리 또는 페이지를 찾는다.

이 떄, action = '/todo/'에 구분자/을 앞쪽에 붙여주지 않으면

http://127.0.0.1:8000todo/
이렇게 현재 주소 뒤에 붙게 된다.

뒤에 구분자/도 꼭 붙여줘야한다. 이것은 절대 경로를 뜻하는데 구분자/로 끝나지 않는 경로는 이 경로에 해당하는 View 함수를 호출하려고 시도할 것이다.

이 template를 보여줄 url의 패턴을 urls.py에 정의하고 이 template을 불러올 View함수를 views.py에 정의해준다.

[todo/urls.py]

from django.contrib import admin
from django.urls import path
from . import views


urlpatterns = [
    path('todo/', views.todo),
    path('getdata/', views.getdata),
    path('todo/create/', views.create),
    path('todo_create', views.todo_create)
]

[todo/views.py]

from django.http import HttpResponse
from django.shortcuts import render
from todo.models import Todo
from django.views.decorators.csrf import csrf_exempt

def todo(request):
    return render(request, 'todo_add.html')


def getdata(request):
    print(request.POST.get('added_todo1'))
    print(request.POST.get('added_todo2'))
    print(request.POST.get('added_todo3'))
    return HttpResponse('POST 완료!')

@csrf_exempt
def create(request): 

    Todo.objects.create(content=request.POST["content"])

    return HttpResponse('GET 요청 확인!')

def todo_create(request):
    return render(request, 'todo/create.html')

이 페이지에서 만들기버튼을 누르면 todo/views.py/create(request)함수를 호출하고 클라이언트가 입력 필드에 작성한 값을 서버로 전달하여 데이터를 처리한다.

하나만 더!

하나의 엔드포인트 URL로 todo의 create 뷰 함수 둘을 합치기

[todo/urls.py]

from django.contrib import admin
from django.urls import path
from . import views


urlpatterns = [
    path('todo/', views.todo),
    path('getdata/', views.getdata),
    path('todo_create/', views.create),
]

[template/todo/todo_create.html]

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <h1>여기에서 todo 작성해주세요</h1>
  <form action="/todo_create/" method="POST">
    {% csrf_token %}
    <input type="text" name="content" id="content">
    <button type="submit">만들기</button>
  </form>
</body>
</html>

[todo/views.py]

from django.http import HttpResponse
from django.shortcuts import render
from todo.models import Todo
from django.views.decorators.csrf import csrf_exempt

def todo(request):
    return render(request, 'todo_add.html')


def getdata(request):
    print(request.POST.get('added_todo1'))
    print(request.POST.get('added_todo2'))
    print(request.POST.get('added_todo3'))
    return HttpResponse('POST 완료!')

@csrf_exempt
def create(request): 
    if request.method == "POST":
        Todo.objects.create(content=request.POST["content"])
        return HttpResponse('todo 생성!')
    elif request.method == "GET":
        return render(request, 'todo/create.html')
    else:
        return HttpResponse("Invalid request method", status=405)

이제 GET http://127.0.0.1:8000/todo_create/ 요청하면 todo_create.html를 불러오고, 만들기버튼을 누르면 데이터베이스에 데이터가 저장되고 'todo 생성!이 적힌 페이지가 보임.