TigerCow.Door

안녕하세요.

이번에는 플라스크를 통해서 숫자를 입력받고 버튼을 눌렀을 때 입력한 숫자의 구구단을 출력하는 웹페이지를 만들어보도록 하겠습니다.

내용에 대한 피드백이나 궁금한 점은 언제든 댓글을 이용해주세요 :)


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이 아니라면 그 숫자에 맞는 구구단을 출력하도록 하였습니다.



이렇게 해서 간단하게, 입력한 숫자의 구구단을 출력해보았습니다.

급하게 써내려갔는데, 추가적으로 궁금한 사항이 있거나 오류가 발생하시는 분들은 댓글 남겨주세요!

블로그 이미지

Tigercow.Door

Data-Analysis / AI / back-end / Algorithm / DeepLearning / etc