Todo List

프로젝트 구조

프로젝트 생성

django-admin startproject todolist
cd todolist
Bash
복사

앱 생성

python manage.py startapp todo
Bash
복사

앱 등록 (settings.py)

# Application definition
## todo 앱 등록
INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'todo'
]
Python
복사

모델 정의 (models.py)

from django.db import models

# Create your models here.
class Todo(models.Model):
    STATUS_CHOICE = [
        ('WAIT', '대기'),
        ('ING', '진행'),
        ('DONE', '완료')
    ]
    
    no = models.AutoField(primary_key=True)     # 자동 증가 필드(PK)
    title = models.CharField(max_length=255)
    status = models.CharField(
                        max_length=20, 
                        choices=STATUS_CHOICE,
                        default='WAIT'
                        )
    created_at = models.DateTimeField(auto_now_add=True)
    updated_at = models.DateTimeField(auto_now=True)
    
    def __str__(self):
        return "{} : {}".format(self.title, self.status)
Python
복사

마이그레이션

# 마이그레이션 파일 생성
python manage.py makemigrations

# 마이그레이션 실행
python manage.py migrate
Bash
복사

URL 매핑 (urls.py)

from django.urls import path
from . import views

urlpatterns = [
    path('', views.index, name='index'),
    path('todo', views.todo, name='todo'),
    path('create', views.create, name='create'),
    path('delete', views.delete, name='delete'),
    path('ing', views.ing, name='ing'),
    path('done', views.done, name='done'),
    path('wait', views.wait, name='wait'),
]
Python
복사

View 정의 (views.py)

from django.shortcuts import render
from django.http import HttpResponseRedirect
from django.urls import reverse
from django.db.models import Q

from .models import *   # models 의 모든 모델 import

# Create your views here.
def index(request):
    print('메인 화면...')
    return render(request, 'todo/index.html', {})

def todo(request):
    print('할 일 목록 화면...')
    # 할 일 목록 조회
    # Todo 모델의 대기 목록 조회
    wait_list = Todo.objects.filter(status='WAIT')
    # Todo 모델의 진행 목록 조회
    ing_list = Todo.objects.filter(Q(status='ING') | Q(status='DONE')).order_by('-status')
    
    
    content = {'wait_list': wait_list, 'ing_list': ing_list}
    # render(request, 템플릿 경로, 데이터{})
    # - 데이터{} : 템플릿에 데이터를 전달
    return render(request, 'todo/todo.html', content)

def create(request):
    print('할 일 등록...')
    # POST 방식의 파라미터
    title = request.POST['title']
    # 등록 요청
    new_todo = Todo(title = title)
    new_todo.save()     # DB에 저장
    # 할 일 목록(todo)으로 리다이렉트
    return HttpResponseRedirect(reverse('todo'))


def delete(request):
    print("삭제 요청...")
    # 파라미터 
    no = request.POST['no']
    print('no : {}'.format(no))
    try:
        todo = Todo.objects.get(no=no)
        todo.delete()   # 할 일 삭제 요청
    except Todo.DoesNotExist:
        print('삭제할 할 일이 없습니다.')
    return HttpResponseRedirect(reverse('todo'))

def ing(request):
    print('진행 상태로 변경...')
    no = request.POST['no']
    print('no : {}'.format(no))
    try:
        todo = Todo.objects.get(no=no)
        # 할 일 상태 수정
        todo.status = 'ING' 
        todo.save()
    except Todo.DoesNotExist:
        print('수정할 할 일이 없습니다.')
    return HttpResponseRedirect(reverse('todo'))


def done(request):
    print('완료 상태로 변경...')
    no = request.POST['no']
    print('no : {}'.format(no))
    try:
        todo = Todo.objects.get(no=no)
        # 할 일 상태 수정
        if todo.status == 'DONE':
            todo.status = 'ING' 
        else:
            todo.status = 'DONE' 
        todo.save()
    except Todo.DoesNotExist:
        print('수정할 할 일이 없습니다.')
    return HttpResponseRedirect(reverse('todo'))


def wait(request):
    print('대기 상태로 변경...')
    no = request.POST['no']
    print('no : {}'.format(no))
    try:
        todo = Todo.objects.get(no=no)
        # 할 일 상태 수정
        todo.status = 'WAIT' 
        todo.save()
    except Todo.DoesNotExist:
        print('수정할 할 일이 없습니다.')
    return HttpResponseRedirect(reverse('todo'))
    
Python
복사

Template 작성

└── templates/
    ├── todo/
    │   ├── index.html
    │   └── todo.html
Plain Text
복사

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>메인 화면</title>
</head>
<body>
    <h1>메인 화면</h1>
    <h3>Hello Django~!</h3>
    <a href="./todo">To Do List</a>
</body>
</html>
HTML
복사

todo.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>할 일 목록</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4Q6Gf2aSP4eDXB8Miphtr37CMZZQ5oXLH2yaXMJ2w8e2ZtHTl7GptT4jmndRuHDT" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css">
    <style>
        input[type='checkbox'] {
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-12 col-md-8 col-lg-6">
                <h1>할 일 목록</h1>
                <hr>
                <form action="./create" method="post">
                    {% csrf_token %}
                    <div class="input-group mb-3">
                        <label for="todo" class="input-group-text">할 일</label>
                        <input type="text" name="title" class="form-control" id="todo" 
                            placeholder="할 일을 입력해주세요."
                            autofocus
                        >
                        <button type="submit" class="btn btn-outline-primary">등록</button>
                    </div>
                </form>
                <hr>
                <h3>진행 목록</h3>
                <table class="table table-bordered text-center align-middle">
                    <thead>
                        <tr class="table-dark">
                            <th>✅</th>
                            <th class="text-start">할 일</th>
                            <th>⭐</th>
                        </tr>
                    </thead>
                    <tbody>
                        
                        {% for todo in ing_list %}
                            <tr {% if todo.status == 'DONE' %}class="table-success"{% endif %}>
                                <td>
                                    <form action="./done" method="post">
                                        {% csrf_token %}
                                        <input type="hidden" name="no" value="{{ todo.no }}">
                                        <input type="checkbox" class="form-check-input" 
                                                onchange="this.form.submit()"
                                                {% if todo.status == 'DONE' %}checked{% endif %}>
                                    </form>
                                </td>
                                <td class="text-start">
                                    {{ todo.title }}
                                </td>
                                <td>
                                    <div class="d-flex justify-content-center gap-2">
                                        <form action="./wait" method="post">
                                            {% csrf_token %}
                                            <input type="hidden" name="no" value="{{ todo.no }}">
                                            <button class="btn btn-success">
                                                <i class="bi bi-arrow-down-square"></i>
                                            </button>
                                        </form>
                                        <form action="./delete" method="post">
                                            {% csrf_token %}
                                            <input type="hidden" name="no" value="{{ todo.no }}">
                                            <button class="btn btn-danger">
                                                <i class="bi bi-trash2"></i>
                                            </button>
                                        </form>
                                    </div>
                                </td>
                            </tr>
                        {% empty %}
                            <tr>
                                <td colspan="3" class="text-center text-muted">
                                    조회된 데이터가 없습니다.
                                </td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
                <hr>
                <h3>대기 목록</h3>
                <table class="table table-bordered text-center align-middle">
                    <thead>
                        <tr class="table-dark">
                            <th>✅</th>
                            <th class="text-start">할 일</th>
                            <th>⭐</th>
                        </tr>
                    </thead>
                    <tbody>
                        
                        {% for todo in wait_list %}
                            <tr>
                                <td>
                                    <form action="./ing" method="post">
                                      {% csrf_token %} 
                                      <input type="hidden" name="no" value="{{ todo.no }}"> 
                                      <button type="submit" class="btn btn-outline-primary">
                                        <i class="bi bi-arrow-up-square"></i>
                                      </button>
                                    </form>
                                </td>
                                <td class="text-start">
                                    {{ todo.title }}
                                </td>
                                <td>
                                    <form action="./delete" method="post">
                                        {% csrf_token %}
                                        <input type="hidden" name="no" value="{{ todo.no }}">
                                        <button class="btn btn-danger">
                                            <i class="bi bi-trash2"></i>
                                        </button>
                                    </form>
                                </td>
                            </tr>
                        {% empty %}
                            <tr>
                                <td colspan="3" class="text-center text-muted">
                                    조회된 데이터가 없습니다.
                                </td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
        
    </div>


    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/js/bootstrap.bundle.min.js" integrity="sha384-j1CDi7MgGQ12Z7Qab0qlWQ/Qqz24Gc6BM0thvEMVjHnfYGF0rmFCozFSxQBxwHKO" crossorigin="anonymous"></script>
</body>
</html>
HTML
복사