Django를 통한 웹개발(5)

교재홍보

• 다음의 교재를 바탕으로 실습이 이루어질 예정이다.

교재 구매 : https://www.yes24.com/Product/Goods/83568594

이번 글이 처음이라면, 먼저 이전 블로그를 읽어보기를 바란다.

• 첫번째 글 : https://ls-alt.tistory.com/7
• 두번째 글 : https://ls-alt.tistory.com/9
• 세번째 글 : https://ls-alt.tistory.com/8
• 네번째 글 : https://ls-alt.tistory.com/10

 

이번 글에서는 저번 글과 유사하게 웹(View)에서의 입력을 DB(Model)에 반영해  이미 저장된 DB내의 데이터를 삭제하는 실습을 해보자.

 

1. 웹에서 완료버튼을 눌렀을 때 데이터를 서버로 전달하기 위해 index.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>
                    # 완료클릭시 input값이 넘어온다. input의 value값으로 DB에서 해당하는 데이터를 찾을 수 있다.
                <span class="input-group-addon">
                    <button type="submit" class="custom-btn btn btn-danger">완료</button>
                </span>
            </div>
        </form>
        {% endfor %}
    </ul>
</div>

- 수정 전

<form action="" method="GET">

- 수정 후

<form action="deleteTodo" method="GET">
	# deleteTodo라는 URL로 데이터를 전달한다.

2. 완료버튼을 눌렀을 때 DB에 저장된 데이터가 삭제될 수 있도록 코드를 작성한다.

 

(1) my_test_app > urls.py 수정

- 수정 전

# -*- coding:utf-8 -*-

from django.urls import path
from . import views

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

- 수정 후

# -*- coding:utf-8 -*-

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")
]
	# views의 함수로 전달되도록 name을 정해준다.

 

(2) my_test_app > views.py 수정

- 수정 전

from django.shortcuts import render
from django.http import HttpResponse, HttpResponseRedirect
from django.urls import reverse
from .models import *

# Create your views here.

def index(request):
    todos = Todo.objects.all()
    content = {'todos' : todos}
    return render(request, 'my_test_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'))

- 수정 후

from django.shortcuts import render
from django.http import HttpResponse, HttpResponseRedirect
from django.urls import reverse
from .models import *

# Create your views here.

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

def createTodo(request):
    user_input_str = request.POST['todoContent']
    print("저장한 data : ", user_input_str)
    new_todo = Todo(content = user_input_str)
    new_todo.save()
    return HttpResponseRedirect(reverse('index'))

def deleteTodo(request):
    delete_todo_id = request.GET['todoNum']
    	# input태그의 id인 todoNum을 이용해 완료버튼을 누른 데이터의 id를 GET method로 가져와 할당한다.
    print("삭제한 todo의 id : ", delete_todo_id)
    	# 오류의 발생을 확인
    todo = Todo.objects.get(id = delete_todo_id)
    	# Todo DB에서 id가 delete_todo_id와 일치하는 데이터를 todo에 할당한다.
    todo.delete()
    	# todo 데이터를 삭제한다.
    return HttpResponseRedirect(reverse('index'))

 

3. 웹페이지에서 완료 버튼을 눌렀을 때 잘 작동하는지 확인한다.

 

- 클릭 전

 

- '완료' 클릭 후