안녕하세요.
이번에는 플라스크를 통해서 숫자를 입력받고 버튼을 눌렀을 때 입력한 숫자의 구구단을 출력하는 웹페이지를 만들어보도록 하겠습니다.
내용에 대한 피드백이나 궁금한 점은 언제든 댓글을 이용해주세요 :)
1. 시작하기
지난 포스팅을 통해 아래와 같은 코드 까지 구현하였습니다.
1 2 3 4 5 6 7 8 9 | from flask import Flask app = Flask(__name__) @app.route('/') def hello_world(): return 'Hello World!' if __name__ == '__main__': app.run() | cs |
위의 코드에서 7번 라인은 라우팅을 설정하는 코드입니다.
쉽게말해서 '127.0.0.1:5000/' 이라는 주소를 말하는 코드인 것이죠.
따라서 우리가 지난번에 '127.0.0.1:5000/' 이라는 주소에 접근했을 때, Hello World! 라는 글씨를 본 것입니다.
먼저 코드를 아래와 같이 수정하겠습니다.
1 2 3 4 5 6 7 8 9 10 | from flask import Flask, render_template, redirect, request, url_for app = Flask(__name__) @app.route('/') @app.route('/<int:num>') def inputTest(num=None): return render_template('main.html', num=num) if __name__ == '__main__': app.run() | cs |
먼저, 파일 이름은 inputTest.py로 하였습니다. 그리고 이후에 필요할 것들을 import하였습니다.
4,5번 라인에서 볼 수 있듯이 이중 라우팅이 진행되었습니다.
두 개의 주소 모두 그 아래 있는 함수를 실행하는 것입니다.
inputTest라는 함수는 num인자를 받되 default 값은 none 입니다. 그리고 main.html 템플릿을 render하여 리턴합니다.
그럼 이제 main.html 파일을 구성해보겠습니다.
2. main.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <!DOCTYPE html> <html> <head> <title> Flask #2 </title> </head> <body> <form method="POST" action="/calculate"> <h1> Flask #2_데이터 입력받기 </h1> <h3> 사용자가 원하는 구구단을 출력하자!</br></h3> <h5> 출력하고자 하는 구구단을 입력하세요.</h5> <input type="text" name="num"> <button type="submit">구구단 확인하기</button> </form> </body> </html> | cs |
위와 같은 html 파일을 좀 전의 inputTest.py 파일과 같은 위치에 만듭니다.
그리고 위와 같은 코드를 입력합니다. form 태그를 통해서 '/calculate'로 가게되는데 이때 POST방식으로 전달됩니다.
전달되는 값은 input 태그의 num이라는 이름을 가진 것 입니다.
이제 다시 inputTest.py 파일로 가서 '/calculate' 경로의 동작을 구현합니다.
3. calculate
inputTest.py의 코드를 아래와 같이 구현하였습니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | from flask import Flask, render_template, redirect, request, url_for app = Flask(__name__) @app.route('/') @app.route('/<int:num>') def inputTest(num=None): return render_template('main.html', num=num) @app.route('/calculate',methods=['POST']) def calculate(num=None): if request.method == 'POST': temp = request.form['num'] else: temp = None return redirect(url_for('inputTest',num=temp)) if __name__ == '__main__': app.run() | cs |
9번~15번라인이 추가된 코드입니다.
POST방식으로 넘어오도록 라우팅을 진행하였고 11번,12번 라인을 통해 POST방식으로 넘어왔을때 'num'이라는 이름을 가진 데이터를 temp에 저장합니다.
그리고 url_for함수를 이용하여 inputTest라는 이름의 함수를 가진 url을 탐색하고 이때 num이라는 변수는 temp의 내용을 가지고 전달이 됩니다.
마지막으로 redirect 함수를 통해 찾아낸 url로 가게됩니다.
이렇게 되면 inputTest라는 이름의 함수를 가진 url, 즉 '/' 또는 '/<int:num>' 으로 넘어가게 됩니다. 헌데 num이라는 변수의 이름으로 값이 전달되므로 결국, '/<int:num>' 으로 넘어가게 될 것입니다.
이제 마지막으로 전달된 값을 통하여 구구단을 출력하도록 html 파일을 수정합니다.
4. main.html 최종
main.html 파일의 최종 코드는 아래와 같이 구현됩니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | <!DOCTYPE html> <html> <head> <title> Flask #2 </title> </head> <body> <form method="POST" action="/calculate"> <h1> Flask #2_데이터 입력받기 </h1> <h3> 사용자가 원하는 구구단을 출력하자!</br></h3> <h5> 출력하고자 하는 구구단을 입력하세요.</h5> <input type="text" name="num"> <button type="submit">구구단 확인하기</button> </form> <div> <p> {% if num == None %} <h5> 아직 아무 숫자도 입력이 안되었습니다. </h5> {% else %} {% for i in range(1,10) %} <p>{{num}} x {{i}} = {{num*i}}</br></p> {% endfor %} {% endif %} </p> </div> </body> </html> | cs |
16번~26번 라인이 추가된 코드입니다.
만약 num으로 전달된 값이 None이라면 구구단을 출력하지 않고
None이 아니라면 그 숫자에 맞는 구구단을 출력하도록 하였습니다.
이렇게 해서 간단하게, 입력한 숫자의 구구단을 출력해보았습니다.
급하게 써내려갔는데, 추가적으로 궁금한 사항이 있거나 오류가 발생하시는 분들은 댓글 남겨주세요!
'Web 관련 > Flask' 카테고리의 다른 글
| 플라스크(Flask) #4_ 파이썬 플라스크 기초다지기 1편 (1) | 2018.05.29 |
|---|---|
| 플라스크(Flask) #3_ 플라스크에서 MongoDB 연결(연동)하기 (1) | 2017.11.10 |
| 플라스크(Flask) #1_ 파이썬 웹 프레임 워크 플라스크 시작하기 (10) | 2017.10.31 |