#3. 할일 리스트를 저장하고, 이 리스트를 메인페이지에 띄워주기

//index.html 코드

// 이하 생략

	//할일 작성 후 submit을 누르면, /로 POST요청이 간다
    <form action="/" method="POST">
        <input type="text" name="content" id="content">
        <input type="submit" Value="Add Task">
    </form>

</div>
{% endblock %}

index.html에서 글쓰기 버튼을 만들어 놓았다. 이제 /로 POST요청이 갈 것이다. 이 부분에 대한 로직을 만든다.

 

// '/'로 GET요청이나 POST요청이 왔을 때
@app.route('/', methods=['POST', 'GET'])
def index():
	
    // '/'로 POST요청이 온 경우
    // 즉, 글쓰기 버튼을 누른 경우의 로직
    if request.method == 'POST':
    	
        //POST요청 중 content라는 이름을 가진 데이터를 task_content에 저장
        task_content = request.form['content']
        
        //task_content라는 데이터를 가진 new_task라는 항목을 Todo 클래스에 맞게 저장
        new_task = Todo(content=task_content)
        try:
        	//new_task를 DB에 저장
            db.session.add(new_task)
            db.session.commit()
            return redirect('/')
        except:
            return 'There was an issue adding your task'

POST요청이 왔을 때 '/' url에서 처리해야할 내용들을 작성하였다. 그렇다면, '/' url로 GET요청이 오는 경우는 어떤 경우일까? 이 경우는, 글쓰기 요청을 보내지 않고, 그냥 메인페이지에 접속한 경우이다. 헌데 이 경우 우리는 글쓰기 버튼 뿐 아니라, 지금까지 작성한 할일들의 리스트들을 메인 페이지에 띄워주어야 한다. 이를 위해선 APP.PY에서 DB에 저장했던할일들을 꺼내서 index.html로 렌더링 해주어야 한다

 

@app.route('/', methods=['POST', 'GET'])
def index():
	//POST요청이 왔을 때
    if request.method == 'POST':
        task_content = request.form['content']
        new_task = Todo(content=task_content)
        try:
            db.session.add(new_task)
            db.session.commit()
            return redirect('/')
        except:
            return 'There was an issue adding your task'
    //GET요청이 왔을 때
    //즉, 글쓰기 버튼을 안 누르고, 메인페이지에 들어왔을때
    else:
    	//지금까지 저장한 할일리스트를 시간순으로 꺼내서 tasks라는 변수에 저장한다
        tasks = Todo.query.order_by(Todo.date_created).all()
        
        //index.html을 렌더링하되, tasks 변수를 함께 보내준다
        return render_template('index.html', tasks=tasks)

GET요청이 왔을 때, index.html과 tasks변수 즉, 지금까지 저장한 할일리스트를 같이 렌더링 해줄 것이다. 

 

{% extends 'base.html' %}

<!-- 헤드부분 -->
{% block head %}
<title>Task Master</title>
{% endblock %}

<!-- 바디부분 -->
{% block body %}
<div class="content">
    <h1>도대체 무엇을 해야하나</h1>

    <table>
        <tr>
            <th>할일</th>
            <th>저장한 시간</th>
            <th>수정/삭제</th>
        </tr>
        
        //tasks에는 여러 할일들이 담겨져있기 때문에 얘를 하나씩 꺼낸다
        {% for task in tasks %}
            <tr>
            	//각각의 할일들의 내용과 날짜를 꺼내서 보여준다
                <td>{{ task.content }}</td>
                <td>{{ task.date_created.date() }}</td>
                
                //이 부분은 각 할일들을 수정하거나 삭제하는 버튼
                //다음 글에서 기능 추가
                <td>
                    <a href="/update/{{task.id}}">Update</a>
                    <br>
                    <a href="/delete/{{task.id}}">Delete</a>
                </td>
            </tr>
        {% endfor %}
    </table>
    
	//기존의 글쓰기 버튼을 담당하는 부분
    <form action="/" method="POST">
        <input type="text" name="content" id="content">
        <input type="submit" Value="Add Task">
    </form>

</div>
{% endblock %}

tasks에 담긴 데이터들을 템플릿언어를 사용해서 찍어주면 된다. 이 때 여러 개의 데이터가 담겨있기 때문에 템플릿언어의 반복문을 통해 구현한다.