2017. 11. 13.

[Python] Flask - Form 데이터를 템플릿(template)으로 전달하기

Request Object

클라이언트 웹 페이지의 데이터는 global request object를 통해서 서버로 전달됩니다. request 데이터를 처리하기 위해서는 Flask 모듈로부터 import되어야 합니다.

request 객체의 중요한 속성은 다음과 같습니다.
  • Form - form 매개변수를 key로, 그 값을 value로 하는 쌍을 보관하는 dictionary입니다.
  • args - URL 부분 중 물음표(?) 다음에 있는 query 문자열의 내용을 parse합니다.
  • Cookies - Cookies 이름과 그 값을 가지는 dictionary 객체입니다.
  • files - 업로드 파일과 관련된 데이터
  • method - 현재 request method

form 데이터를 template으로 전달하기

URL 규칙에서 명시한 http method에 대해서 이미 살펴본 적이 있습니다. 발동된 함수에 의해서 전달받은 Form 데이터는 dictionary 객체의 form에 수집할 수 있고, 그 데이터를 대응하는 웹 페이지를 보여줄 template으로 보낼 수 있습니다.

다음 예에서 ‘/’ URL은 form을 가지고 있는 웹 페이지 student.html을 보여줍니다. form에 채워져있는 데이터는 result() 함수를 발동시키는 ‘/result’ URL로 전달됩니다.

result() 함수는 dictionary 객체에 있는 현재 request.form 내의 form 데이터를 수집합니다. 그리고 result.html을 보여주기 위해서 그 데이터를 보냅니다.

템플릿은 동적으로 form 데이터 테이블을 보여줍니다.

Python 애플리케이션 코드는 다음과 같습니다.

from flask import Flask, render_template, request
app = Flask(__name__)

@app.route('/')
def student():
  return render_template('student.html')

@app.route('/result',methods = ['POST', 'GET'])
def result():
  if request.method == 'POST':
     result = request.form
     return render_template("result.html",result = result)

if __name__ == '__main__':
  app.run(debug = True)

위 코드는 먼저 살펴보겠습니다. ‘/’ URL로 접속하면 웹 애플리케이션은 student.html을 브라우저에 보여줍니다. ‘/result’ URL로 접속하면 HTTP 메소드에 따라서 다르게 처리됩니다. 이번에는 POST 메소드만 사용할 것입니다. POST 메소드로 요청이 들어온다면 result.html을 브라우저로 보여줍니다. ‘result’ dictionary도 함께 인자로 전달합니다. 이 dictionary는 어떻게 구성되었는지는 student.html을 보면 알 수 있습니다.

<html>
  <body>
  
     <form action = "http://localhost:5000/result" method = "POST">
        <p>Name <input type = "text" name = "Name" /></p>
        <p>Physics <input type = "text" name = "Physics" /></p>
        <p>Chemistry <input type = "text" name = "chemistry" /></p>
        <p>Maths <input type ="text" name = "Mathematics" /></p>
        <p><input type = "submit" value = "submit" /></p>
     </form>
     
  </body>
</html>

이 스크립트는 form을 다루고 있습니다. HTTP POST 메소드를 사용하고 있고, 이 폼을 전달하면 http://localhost:5000/result로 이동할 것입니다. form 데이터는 Name, Physics, Chemistry, Maths를 전달합니다. form 데이터를 제출할 ‘submit’도 있습니다.

그러면 http://localhost:5000/result로 이동하면 어떤 일이 생길까요? 다시 웹 에플리케이션 코드를 살펴보면 됩니다. ‘/result’ URL을 HTTP POST 메소드로 접근하면 result.html을 보여주도록 되어 있습니다. 그리고 form 데이터를 result 인자로 전달합니다.

이제 result.html 스크립트를 살펴볼 차례입니다. 이 스크립트는 웹 애플리케이션에 의해서 ‘result’ form 데이터를 전달받습니다. 그리고 이 dictionary 데이터를 순회하면서 key, value를 테이블로 보여줍니다.

<!doctype html>
<html>
  <body>
  
     <table border = 1>
        {% for key, value in result.iteritems() %}
        
           <tr>
              <th> {{ key }} </th>
              <td> {{ value }} </td>
           </tr>
           
        {% endfor %}
     </table>
     
  </body>
</html>

이제 웹 애플리케이션을 실행해봅시다. 먼저 http://localhost:5000/로 접속합니다. 그러면 student.html 스크립트를 브라우저에서 보여줄 것입니다. 결과는 다음과 같습니다.


form 데이터 항목을 보여주고, 제출할 수 있는 input도 생성되어 있습니다. 원하는 텍스트로 각 항목을 채우고 submit을 누릅니다. 그러면 form action으로 지정되어 있는
http://localhost:5000/result로 이동합니다. Flask 웹 애플리케이션 코드에서 ‘/result’는 라우팅되어 result.html 스크립트를 브라우저에 보여줍니다. form 데이터는 ‘result’ dictionary로 result.html에게 전달되고, 우리가 채운 항목들이 테이블 형태로 보여지게 됩니다.


이렇게 우리는 form 데이터를 HTTP POST 메소드로 전달하여 우리가 만든 result.html 템플릿에 적용하여 브라우저에서 확인하였습니다.

다음에 다룰 내용은 무엇인가요?


클라이언트에 정보를 저장할 수 있는 쿠키(cookie)에 대해서 알아보겠습니다.

댓글 없음:

댓글 쓰기