[멋사] TodoList-2

김지연·2023년 5월 27일
0
post-thumbnail

저번에 올린 todo-1 과 이어진다. (이전 페이지 참고 부탁)

06. Todo Post

결과 미리보기

일단 생성을 할 때 폼 형식으로 보내기 때문에 foms.py (폼을 관리할 파일)을 만들어야한다.

  1. todo/forms.py
from django import forms
from .models import Todo

class TodoForm(forms.ModelForm) :
	class Meta :
    	model = Todo
        fields = ('title', 'description', 'important')
  1. todo/templates/todo/todo_post.html

    저번에 작성한 photoweb에서도 form을 post방식으로 보내야하므로 csrf_token은 필수이다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Todo Post</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
</head>
<body>
    <div class="container">
        <h1> Todo Add </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">Add</button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
  1. todo/views.py
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})
  1. todo/urls.py
path('post/', views.todo_post, name='todo_post'),
  1. todo/templates/todo/todo_list.html
<a href="{% url 'todo_post' %}"><i class="bi-plus"></i>Add Todo</a>

07. Todo Edit

결과 미리보기

post와 유사하지만 미리 적혀져 있다는 점에서 차이를 보인다.

  1. todo/templates/todo/todo_edit.html (todo_post와 유사)
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Todo Edit</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
</head>
<body>
    <div class="container">
        <h1> Todo Edit </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">Update</button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
  1. todo/views.py
def todo_edit(request, pk):
    todo = Todo.objects.get(id=pk)
    if request.method == "POST":
        form = TodoForm(request.POST, instance=todo)
        if form.is_valid():
            todo = form.save(commit=False)
            todo = form.save()
            return redirect('todo_list')
    else:
        form = TodoForm(instance=todo)
    return render(request, 'todo/todo_edit.html', {'form': form})
  1. todo/urls.py
path('<int:pk>/edit/', views.todo_edit, name='todo_edit'),
  1. todo/templates/todo/todo_list.html
<a href="{% url 'todo_edit' pk=todo.pk %}" class="btn btn-outline-primary">Edit Todo</a>

08. Todo Done

결과 미리보기


  1. todo/templates/todo/done_list.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Todo Done</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
</head>
<body>
  <div class="container">
    <h1>완료 목록</h1>
    <p>
      <a href="{% url 'todo_list' %}" class="btn btn-primary">Home</a>
    </p>
    <ul class="list-group">
      {% for done in dones %}
      <li class="list-group-item">
        <a href="{% url 'todo_detail' pk=done.pk %}">{{done.title}}</a>
        {% if done.important %}
          <span class="badge-danger">!</span>
        {% endif %}
      </li>
      {% endfor %}
    </ul>
  </div>
</body>
</html>
  1. todo/views.py
def done_list(request):
    dones = Todo.objects.filter(complete=True)
    return render(request, 'todo/done_list.html', {'dones': dones})
    
# Todo를 완료로 바꿔주는 함수    
def todo_done(request, pk) :
    todo = Todo.objects.get(id=pk)
    todo.complete = True
    todo.save()
    return redirect('todo_list')
  1. todo/urls.py
path('done/', views.done_list, name='done_list'),
path('done/<int:pk>/', views.todo_done, name='todo_done'),
  1. todo/templates/todo/todo_list.html
<a href="{% url 'done_list' %}" class="btn btn-primary" style="float:right">완료한 Todo List</a>

<a href="{% url 'todo_done' pk=todo.pk %}" class="btn btn-danger">완료</a>

어렵거나 한 부분은 없었다. 주로 오타나 들여쓰기의 문제여서 여러번 확인하는게 중요하다.

profile
천천히 꾸준히 하는 블로그

0개의 댓글