Django로 To do list 만들기

실습 : to do list 웹사이트 만들기
Django 환경설정 (1), (2) 와 중복되는 내용이 있습니다.
모든 실습은 맥 os 환경에서 이루어집니다.

1. To do List 입력창의 내용을 출력해보기

 

결과 예시

---

1. 사전 단계

1. 프로젝트 가상환경 접속
2. 프로젝트 생성 : ToDoList
3. 앱 생성 : my_to_do_app
4. 앱을 프로젝트 폴더의 settings.py 에 등록
5. 프로젝트 폴더의 urls.py 수정
6. 앱 폴더 하위에 templates 폴더 / 앱 이름과 동일한 이름의 폴더 / index.html 생성
7. models.py 에 모델 클래스 정의

여기까지 완성 후 아래 단계 수행

 

2.  앱 폴더의 urls.py 수정

• 파일이 없다면 파일을 생성한다
• urlpatterns 정의 : 먼저 투두리스트의 첫 화면의 url을 정의해준다
  • 이후, views.py 에 index 함수(로직)을 정의해줘야 함!

 

3. views.py 수정

• 앱 폴더의 views.py 파일에 index 함수를 정의
• HTTP 요청을 처리하고, "my_to_do_app/index.html" 템플릿을 사용하여 "Todo" 객체들의 리스트를 웹 페이지에 보여주는 역할 
  • 앞서 생성한 모델 클래스의 내용을 불러오고,
  • content 라는 객체에 불러온 내용을 딕셔너리 형태로 저장
  • 해당 내용을 my_to_do_app의 index.html 에서 받아와 출력

---

2.  입력한 To do List의 내용이 저장, 삭제되도록 하기

1. 어플리케이션 하위의 templates/index.html 파일 수정하기

(1) 입력한 내용이 바로 화면에 나타나게 하기

(2) 입력한 내용이 바로 저장되게 하기

• <form> 태그에 action 지정 : ./createTodo
• <input> 태그에 id 지정 : todoContent

(3) '완료' 버튼을 누르면 입력한 내용이 사라지게 하기

 

2. 어플리케이션의 urls.py 파일 수정하기

최종 url 패턴

 

3. 어플리케이션의 views.py 파일 수정하기 : urls.py에서 지정한 함수 작성

(1) 입력한 내용이 바로 저장되도록 하는 함수 정의 : createTodo()

[참고] print("todoContent: " + user_input_str) =>> 입력 내용이 터미널창에 출력되어, 디버깅/코드 점검 시 유용

 

(2) 사용자가 입력한 데이터를 DB에 저장하기

views.py

[참고] models.py 코드 내용 상세

models.py

▶︎ models.py에 입력한 모델 클래스명을 참고 : 위 예시에서 Todo 가 클래스명

▶︎ content 에는 views.py의 user_input_str 지정

 

(3) '완료' 버튼으로 입력된 내용 삭제하기

[참고]
return HttpResponseRedirect(reverse('index'))
👉 클라이언트 요청에도 화면이 바뀌지 않고, 그대로 처리 내용이 나타나도록 index 화면 호출

---

최종 index.html

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


def createTodo(request):
    user_input_str = request.POST['todoContent']
    print("todoContent: " + user_input_str)

    # DB에 저장
    new_todo = Todo(content = user_input_str)
    new_todo.save()

    # return HttpResponse("create Todo를 하자! ==> " + user_input_str)
    # 작성 후, 메인페이지로 돌아가기
    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'))

 

 

3. DB에 저장된 내용 확인하기

#SQLite3 연결
$ python manage.py dbshell

---
#기록 내용 확인 쿼리
sqlite> select * from my_to_do_app_todo;
1|ddddd
2|db에 기록 되어야 함.