To do list 만들기 3

1. 모델에 데이터 저장

 

my_to_do_app 폴더의 views.py 파일에서 model을 사용해야 한다.

 

from django.shortcuts import render
from django.http import HttpResponse
from .models import * 

# Create your views here.

def index(request):
    return render(request, "my_to_do_app/index.html")

def createTodo(request):
    user_input_str = request.POST['todoContent']
    new_todo = Todo(content = user_input_str)
    new_todo.save()
    return HttpResponse("create Todo를 하자" + user_input_str)

>> views.py 파일을 위와 같이 수정한다.

>> from .models import * : models.py에 있는것을 모두 불러오겠다는 것 의미

>> new_todo : Todo 클래스를 사용하여 새로운 데이터를 생성하는 것을 의미

>> new_todo.save() : DB에 저장하는 것

 

 

 

 

 

 

2. 쿼리 확인

 

runserver를 통해 DB에 데이터가 저장되는지 확인한다.

이후 dbshell을 통해서 확인한다.

>> 'ssssss'를 입력했는데 위와 같이 출력되었다.

>> DB에 정상적으로 데이터가 들어갔음을 의미한다.

 

 

 

 

 

 

3. 메인 페이지로 다시 돌아가기

 

 함수에서 처리를 진행한 후 메인페이지의 url로 돌아가게 하기 위해 urls.py 파일을 수정한다.

from django.urls import path 
from . import views 

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

>> 각 path의 뒷부분에 name 값을 추가한다.

 

 

 

다음은 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_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) HttpResponseRedirect(reverse('index')) 함수로 index 라는 이름의 url을 찾음

>> (2) todos = Todo.objects.all() 은 데이터베이스에 있는 모든 데이터를 가져오는 것

>> (3) content = {'todos' : todos} 는 저장된 데이터를 todos key 값에 할당하는 것

>> (4) render() 함수 두 번째 인자로 content를 넘겨서 index.html 파일에서 해당 딕셔너리를 활용하게 한다.

 

 

 

index.html 파일을 수정한다.

 

* 기존

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

 

 

* 수정

          <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>
                            <span class="input-group-addon">
                                <button type="submit" class="custom-btn btn btn-danger">완료</button>
                            </span>
                        </div>
                    </form>
                    {% endfor %}
                </ul>
            </div>

>> (1) {% for todo in todos %} : 반복문의 for문과 같음. html 파일 내부에서 파이썬 문법을 사용할 수 있게 함

>> (2) {{ todo.content }} : 사용자에게 직접 보여주는 값

>> (3) value = "{{ todo.id }}" : 사용자에게 보여주지는 않지만 추후 해당 id를 이용해서 삭제할 때 보여줌

 

 

 

 

 

 

>> 텍스트 내용 입력 시 위와 같은 화면이 출력된다.