To do list 만들기 4

1. HTML 수정

 

완료 버튼을 누르면 데이터를 삭제하는 기능을 구현하기 위해 HTML코드를 살펴본다.

          <div class="toDoDiv">
                <ul class="list-group">
                    {% for todo in todos %}
                    <form action="" method="GET">
                        <div class="input-group" name='todo1'>
                            <li class="list-group-item">{{ todo.content }}</li>
                            <input type="hidden" id="todoNum" name="todoNum" value="{{ todo.id }}"></input>
                            <span class="input-group-addon">
                                <button type="submit" class="custom-btn btn btn-danger">완료</button>
                            </span>
                        </div>
                    </form>
                    {% endfor %}
                </ul>
            </div>

>> index.html 에서 form 태그의 action값을 설정해야 한다.

 

 

 

<form action="./deleteTodo" method="GET">

>> 위와 같이 코드를 수정한다.

>> 완료 버튼을 클릭하면 .deleteTodo의 url로 이동하게 한 것이다.

 

 

 

 

 

 

2. urls.py 설정

 

위에서 form 태그의 action 값에 ./deleteTodo/를 입력했으니 urls.py에서 이를 등록해야 한다.

my_to_do_app의 urls.py 파일을 연다.

from django.urls import path 
from . import views 

urlpatterns = [
    path('', views.index, name="index"), 
    path('createTodo/', views.createTodo, name="createTodo"), 
    path('deleteTodo/', views.deleteTodo, name="deleteTodo"), 
]

>> 코드를 위와 같이 수정한다.

 

 

 

 

 

 

3. view.py 설정

 

views.py에서 deleteTodo 함수를 만들어야 한다.

my_to_do_app의 views.py 파일을 연다.

def index(request):
    todos = Todo.objects.all()
    content = {'todos' : todos}
    return render(request, "my_to_do_app/index.html", content)

def createTodo(request):
    user_input_str = request.POST['todoContent']
    new_todo = Todo(content = user_input_str)
    new_todo.save()
    return HttpResponseRedirect(reverse('index'))

def deleteTodo(request):
    delete_todo_id = request.GET['todoNum']
    print("삭제한 todo의 id", delete_todo_id)
    todo = Todo.objects.get(id = delete_todo_id)
    todo.delete()
    return HttpResponseRedirect(reverse('index'))

>> 코드를 위와 같이 작성하여 delete 기능을 추가한다.

 

 

 

 

 

 

4. 확인

 

>> 완료 버튼을 눌렀을 때 내용이 사라지는 것을 확인한다.

 

 

 

 

 

 

 

 

* 참조 블로그 링크(강사님 블로그)

Django Project ToDoList - 5 - Data Science | DSChloe

Django Project ToDoList - 5