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

Web Programming / Back-end / Database / AI / Algorithm / DeepLearning / etc


안녕하세요.

이번 포스팅부터는 Flask에 대해서 공부하면서 내용을 정리해보려 합니다.

오늘은 Flask에 대한 개념과 기본 예제만 살펴보도록 하겠습니다.


1. 플라스크(Flask) 란?


파이썬이나 웹에 대해 관심있으신 분들은 어느정도 아시겠지만, 플라스크(Flask)란 파이썬 웹 어플리케이션을 만드는 프레임 워크입니다.

프레임워크는 매우 다양하죠. 저의 블로그에서도 포스팅 진행중인 토네이도(tornado) 등이 있습니다.

그 중에서도 아마 플라스크와 장고가 대표적일 것 입니다.

플라스크는 그러한 프레임워크들 중에서도 매우 심플하고 가벼운 느낌을 가지고 있습니다.

그러한 가벼움 속에서도 중요하고 핵심적인 내용과 기능을 갖고 있기에 많은 이들에게 사랑받고 있죠.

플라스크를 설치하는 방법공식문서다른분들의 블로그를 참고하시면 되겠습니다.

설치 및 기타 과정에서 오류가 생기시는 분들은 댓글을 남겨주시면 최대한 답변드리도록 하겠습니다 :)



2. 플라스크 시작하기


플라스크의 설치가 끝나셨다면 가장 간단한 예제를 통해 플라스크를 체험해보도록 하겠습니다.

먼저 자신이 프로젝트를 진행할 폴더에 아래와 같은 코드를 가진 파일을 생성합니다.

저 같은 경우 파일의 이름은 hello.py 로 진행하였습니다.


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


각각의 라인에 대해 간단하게 설명을 드리면,

1번 라인에서는, flask에서 Flask라는 클래스를 불러오게 됩니다.

그리고 2번 라인에서 Flask라는 클래스의 객체를 생성하고 인수로써 __name__을 입력합니다.

해당 객체의 이름은 app으로 설정됩니다.

그리고 4번라인에서는, 생성한 객체의 route를 설정합니다. URL을 설정해주는 것이죠

그리고 함수를 만들고 함수의 기능을 설명합니다.

최종적으로 8~9라인에서는, 객체의 run함수를 이용하여 로컬서버에서 어플리케이션을 실행하도록 합니다.

만약 가상머신이나 외부환경에서 이용하시는 분들은

app.run() 을, app.run(host='0.0.0.0') 으로 변경하면 외부에서 접근 가능한 것으로 설정하게 됩니다.

이렇게 하고 cmd 창에서 해당 파일이 있는 경로로 이동하여 python hello.py를 실행하면 아래와 같이 뜨게 될 것입니다.



그리고 http://127.0.0.1:5000 으로 접속해보면,



위의 사진과 같이 빈 화면에 Hello World! 라는 글이 출력될 것 입니다.

이렇게 아주 간단한 예제로 플라스크를 확인해보았습니다.



다음 포스팅부터는 플라스크를 이용해 예제를 진행하거나 하나의 웹 어플리케이션을 만들어보도록 하겠습니다.

오류가 나서 진행이 안되시거나 기타 궁금한 점이 있으신 분들은 언제나 댓글 및 이메일(doorbw@outlook.com)을 이용해주세요 :)

블로그 이미지

Tigercow.Door

Web Programming / Back-end / Database / AI / Algorithm / DeepLearning / etc