본문 바로가기
웹 개발/Back End

파이썬 플라스크(Flask)의 Jinja2(신사2)를 이용한 구구단 구현

by L3m0n S0ju 2021. 11. 12.

 

 

이번 게시물에서는 파이썬 플라스크에서 jinja2 템플릿을 이용하여 구구단을 출력하는 웹페이지를 구현하겠습니다. 코드는 아래와 같습니다.

 

 

app.py

from flask import Flask
from flask import render_template
from flask import redirect
from flask import request
from flask import url_for
app = Flask(__name__)
 
@app.route('/')
@app.route('/<int:num>')
def inputTest(num=None):
    return render_template('index.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()
 
 
코드를 살펴보면 기본 페이지는 / 디렉토리로 inputTest 함수를 실행합니다. /(숫자) 형식으로 주소창에 입력하면 num 값에 숫자가 index.html에 인자로 전달되고 index.html을 출력합니다. 이후 index.html에서는 출력값을 /calculate로 전달하고 calculate 함수를 보면 메소드가 POST인 경우 입력된 인자를 다시 inputTest로 전달하고 POST가 아닌 경우 None 값을 inputTest로 전달합니다.
 
 
 
 
 
 
 index.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form method="POST" action="/calculate">
        <h1>구구단을 외자</h1>
        <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>
 
index.html을 살펴보면 jinja2 템플릿 문법을 사용하여 인자로 받은 num이 None일 경우 "아직 아무 숫자도 입력이 안되었습니다."를 출력하고 num이 None이 아닌 경우 num에 대한 구구단을 출력합니다.
 
 
 
 
 
 
 
 
 

 
실행과정

 

처음에는 num의 기본값이 None이므로 inputTest 함수에서 index.html을 불러와도 구구단이 출력되지 않습니다.

 

 

 

 

 

 

3을 입력하고 버튼을 클릭하면 index.html에서 calculate 함수로 3을 전달하고 calculate 함수는 inputTest에 3을 전달하고 마지막으로 inputTest는 index.html에 3을 전달하여 index.html 조건문을 통해 구구단이 출력됩니다.

댓글