[Django] Todo 게시판_6 [할 일 완료 및 완료 목록 확인 기능]

2022. 8. 26. 15:55WEB/Django

todo 사이트 만들기-6

  • template 정의 :
  • 기능 : 메인화면으로 이동, 완료한 작업 제목 및 중요도 표시 및 해당 제목을 타고 세부사항 페이지로 이동
<html>
    <head>
        <title>TODO</title>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.1/font/bootstrap-icons.css">
    </head>
    <body>
        <div class="container">
            <h1>완료 목록</h1>
            <p>
                <a href="{% url 'todo_list' %}" class="btn btn-primary">메인으로</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 badge-danger">!</span>
                    {% endif %}
                </li>
                {% endfor %}
            </ul>
        </div>
    </body>
</html>
  • 완료목록 view 정의 :
  • 모델의 complete 속성을 통해 데이터를 추출 하여 템플릿에 넘겨준다
def done_list(request):
    dones = Todo.objects.filter(complete = True)
    return render(request, 'todo/todo_done.html',{'dones':dones})
  • 완료 기능 view 정의 :
  • 모델의 id로 데이터를 가져와 complete 속성을 True로 변경 후 저장 후 목록 페이지로 다시 이동
def todo_done(request, pk):
    todo = Todo.objects.get(id=pk)
    todo.complete = True
    todo.save()
    return redirect('todo_list')
  • urls 정의 :
  • 완료 버튼 클릭 시의 url과 완료 목록 클릭 시의  url을 각각 정의 
from django.contrib import admin
from django.urls import path, include
from . import views
urlpatterns = [
    path('admin/', admin.site.urls),
    path('',views.todo_list, name='todo_list'),
    path('<int:pk>/',views.todo_detail, name='todo_detail'),
    path('post/',views.todo_post,name='todo_post'),
    path('<int:pk>/edit/',views.todo_edit,name='todo_edit'),
    path('done/',views.done_list,name='done_list'),
    path('done/<int:pk>/',views.todo_done,name='todo_done'),
]

- 완성 화면: