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

댓글을 달아 주세요