todo 생성은 제목, 설명, 중요도를 입력해야 하기 때문에 입력 폼이 필요합니다. 따라서 1에서 미리 세팅해둔 todo/forms.py의 내용을 작성할 예정이다.
1. Todo 생성 템플릿 만들기
todo/forms.py 에는 다음과 같이 내용을 작성한다.
from django import forms
from .models import Todo
class TodoForm(forms.ModelForm):
class Meta:
model = Todo
fields = ('title', 'description', 'important')
이젠 템플릿을 작성할 예정인데, todo_post.html 로 템플릿을 만든다.
※ form.as_p 의 형태로 작성하면 태그 꼴로 템플릿에 폼이 자동으로 생성되는 기능 이용하기!
<html>
<head>
<title>TODO 목록 앱</title>
<link
rel="stylesheet"
/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icon@1.7.1/font/boot-strap-icons.css">
</head>
<body>
<div class="container">
<h1>TODO 추가하기</h1>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="card">
<div class="card-body">
<form method="POST">
{% csrf_token %}
{{ form.as_p }}
<button type="submit" class="btn btn-primary">등록</button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</html>
2. Todo 생성 뷰 만들기
POST요청을 처리할 수 있어야 함.
POST요청이 들어왔을 때는 폼을 검증하고 데이터를 저장할 수 있도록 하며,
GET요청이 들어왔을 때는 폼을 포함안 템플릿 페이지를 보여주면 된다.
from django.shortcuts import render, redirect
from .models import Todo
from .forms import TodoForm
# Create your views here.
def todo_list(request):
todos = Todo.objects.filter(complete=False)
return render(request, 'todo/todo_list.html', {'todos': todos})
def todo_detail(request, pk):
todo = Todo.objects.get(id=pk)
return render(request, 'todo/todo_detail.html', {'todo': todo})
def todo_post(request):
if request.method =="POST":
form = TodoForm(request.POST)
if form.is_valid():
todo= form.save(commit=False)
todo.save()
return redirect('todo_list')
else:
form = TodoForm()
return render(request, 'todo/todo_post.html', {'form': form})
이후 todo_list.html의 버튼에 링크를 넣어줘야 한다.
<a href="{% url 'todo_post' %}"><i class="bi-plus"></i>Add Todo</a>
설명 : GET 요청에 대해, 혹은 POST 요청 중 폼의 값이 유효하지 않을 때, 마지막 render가 리턴퇸다.
이는 다시 TodoForm작성 페이지로 원복되도록 form을 전달한다.
만약 정상적인 POST요청에 대해서는 form데이터를 불러와 저장하고 다시 todo_list페이지로 이동시킨다.
3.Todo생성 URL 연결하기
from django.urls import path
from . import views
urlpatterns = [
path('', views.todo_list, name='todo_list'),
path('<int:pk>/', views.todo_detail, name='todo_detail'),
path('post/', views.todo_post, name='todo_post'),
]
순서요약 : todo_list.html에서 Add Todo 버튼 클릭 시, URL에서 post/ 파라미터를 타고 views의 todo_post함수로 이동.
잘 작성 시, 데이터 저장하고 todo_list로 이동하고 작성이 제대로 안되면 다시 작성페이지로 원복.
<결과화면>
만약 적절한 데이터를 담지 않고 등록 버튼을 누르게 되면
다음과 같은 경고 창이 뜬다.
반응형
'Develop > Django(Project)' 카테고리의 다른 글
| 2. TodoApp / 상세조회기능 만들기 (0) | 2023.09.21 |
|---|---|
| 1. TodoApp 만들기 _ 전체조회 템플릿 만들기 (0) | 2023.09.19 |
