flask TODO list - 3 (작성, 삭제 기능)

개발환경 : Windows10, VScode

언어 및 프레임워크 : Python3, Flask, MySQL

GIthub repository : YChaeeun/todoList_web

목표

• 그동안은 MySQL에 임의의 값들을 넣어놓고 가져왔는데, 이제 사용자가 직접 할 일을 입력하고 삭제할 수 있도록 할 것이다
• 1) 작성 -> MySQL에 내용 추가하기
• 2) 삭제 -> 글 상태값 변경하기 (1 -> 0 으로)

1) 작성 기능 추가하기

​ 1) index.html에서 ‘할 일의 내용’ 값을 전달 받고 (main.py)

​ 2) 전달받은 값을 MySQL로 보낸다 (todo_list_dao.py)

• index.html

  < form action="" method="post" >
  

  <div class="input-group mb-3">
  	<input type="text" class="form-control"
  	name="todoItem" id="todoItem" 		placeholder="+ 할 일을 입력해주세요" />
  	<div class="input-group-append">
  		<button class="btn btn-primary" type="submit">완료</button>
  	</div>
  </div>
  

  • 값을 넘겨주기 위해 form 태그의 action값을 채워넣었다.
  • 완료 버튼을 눌렀을 때 form input 값이 전송된다. (name에 적힌 이름으로 값이 전송됨)
• main.py

    @app.route('/write_pro', methods=['post'])
  def write_pro() :
  
    element = request.values.get('todoItem')
  
    todo_list_dao.write_todo(element)
  
    return '''
            <script>
                alert("저장되었습니다")
                location.href="."
            </script>
           ''' 
  

  • index.html 에서 “todoItem”이라는 이름으로 ‘할 일의 내용’ 의 값을 전달받았음
  • 이를 elemet라는 변수에 넣어서 todo_list_dao의 write_todo() 함수의 인자로 넘겨준다.

• toodo_list_dao.py

  def write_todo(element):
      conn = connection.get_connection()
    
      sql = '''
          insert into todo
          (todo_content, todo_status, 		todo_importance)
          values(%s, 1, 0)
    
      '''
    
      cursor = conn.cursor()
      cursor.execute(sql, element)
    
      conn.commit()  #MySQL에 넣기
      conn.close()
  

2) 삭제하기 (상태값 바꾸기)

• 위의 과정과 동일하지만 어떠한 특정 항목의 상태값을 바꿔야 했기 때문에 할 일들을 어떻게 구분지으면 좋을지 고민해야 했다.

• 글들의 unique value인 todo_idx로 구분짓고, 이 값은 화면에 출력하고 싶지 않았기 때문에 input type="hidden"을 사용했다.

• index.html

  <form action="" method="post">  
  	<td style="width:10%">
  		<input type="hidden" class="form-control" name="idx" value="">
  		<button class= "btn btn-link" type="submit">X</button>  
  	</td> {# 삭제 #}
  </form>
  

• main.py

  @app.route('/delete', methods=['post'])
  def delete() :
        
      idx = request.values.get('idx')
      todo_list_dao.delete(idx)
      return '''
              <script>
                  alert("삭제되었습니다")
                  location.href="."
              </script>
        	''' 
  

• todo_list_dao.py

  def delete(itemIdx) :
    
      conn = connection.get_connection()
    
      sql = '''
          update todo
          set todo_status = 0
          where todo_status = 1 and todo_idx=%s
      '''
    
      cursor = conn.cursor()
      cursor.execute(sql, itemIdx)
    
      conn.commit()
      conn.close()
  

다음에 할 일

• 수정 기능 추가하기
• pagination