[Web] django로 Todolist 만들기 for Mac - 4

작성 후 메인페이지로 돌아가기

1) urls.py 설정

• name = "index"
• name = "createTodo"

# -*- coding:utf-8 -*-
# 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")
]

2) view.py 수정

• HttpResponseRedirect , reverse import
• return HttpResponseRedirect(reverse('index')) 변경
  • reverse 함수로 inndex라는 url을 찾기

from django.shortcuts import render
from django.http import HttpResponse, HttpResponseRedirect
from django.urls import reverse
from .models import * 
​
# Create your views here.
# before
'''
def index(request):
  return HttpResponse("My_to_do_app first page")
'''
​
# after
def index(request):
   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')) #변경

 

페이지 하단 부분에 입력한 문자열 보여주기

1) views.py 설정

• index 함수 수정
  • todos = Todo.objects.all() , content = {'todos' : todos}
    • Todo 모델에 접근하고, objects에 접근한 후, all 함수를 통해서 데이터 가져옴

from django.shortcuts import render
from django.http import HttpResponse, HttpResponseRedirect
from django.urls import reverse
from .models import * 
​
# Create your views here.
# before
'''
def index(request):
  return HttpResponse("My_to_do_app first page")
'''
​
# after
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'))

2) index.html 설정

• {% for todo in todos %}
  • 템플릿 태그를 이용하면 html 파일 내부에서 파이썬 문법을 사용할 수 있다.
• {{ todo.content }}
  • 사용자에게 직접 보여 주는 값
• value="{{ todo.id }}
  • 사용자에게 보여주지는 않지만, 추후 해당 id 를 이용해서 삭제할 때 보여준다.

<div class="toDoDiv">
              <ul class="list-group">
​
                  <form action="" method="GET">
                      <div class="input-group" name='todo1'>
                          <li class="list-group-item">메모한 내용은 여기에 기록될 거에요</li>
                          <input type="hidden" id="todoNum" name="todoNum" value="1"></input>
                          <span class="input-group-addon">
                              <button type="submit" class="custom-btn btn btn-danger">완료</button>
                          </span>
                      </div>
                  </form>
              </ul>
          </div>

 

완료 버튼을 누르면 사라지게 하기

1) index.html 수정

• delete action 추가
  • action="./deleteTodo/"
    • <완료> 버튼 클릭시, deleteTodo url로 이동
  • {{ todo.content }}
  • {% endfor %}

<div class="toDoDiv">
               <ul class="list-group">
                  {% for todo in todos %}
                   <form action="./deleteTodo/" 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>

2) urls.py 설정

• path('deleteTodo/', views.deleteTodo, name="deleteTodo")

# -*- coding:utf-8 -*-
# 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) views.py 설정

• def deleteTodo(request):

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'))

4) 확인

• runserver 구동

< 완료> 버튼을 클릭한 메모는 사라지게 된다.

 

 

- 끝 -