파이썬(Python)/Flask

Jinja2 조건문, 반복문 예제로 익혀보기 (if문, for문, flask)

끄적끄적아무거나 2021. 5. 7. 17:33
반응형

Jinja2 란?

 

간단히 설명하면 HTML과 같은 웹페이지에서 파이썬과 유사한 문법을 사용해서 페이지 프로그램을 지원하는 템플릿임.

예를 들어 파이선(python) flask에서 어떤 값을 보내주면 웹페이지에서 해당 값을 프로그램해서 상황에 맞게 동작시킬 수있다. 

 

jinja2 사용 양식>>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    {{ 입력받은 값 }}
    {% 프로그램 언어 %}
</body>
</html>

 

위 코드처럼 HTML 문서에서 jinja2를 사용할 경우 일반 변수만을 화면에 출력할 경우 {{ }} 에 넣어주면된다.

if나 for와 같은 프로그램을 작성할 경우 {% %} 안에서 작성하여야 한다.

 

 

 


Jinja2 조건문 예제 (if문)

예제 동작을 간단하게 설명하면, http://localhost:9999/jinja_test 에 접속하면 var1, var2 변수를 넣는 화면이 나오고 두 개를 채워서 submit 버튼을 누르면 해당 html 아래에 값이 나온다. 만일 값을 넣지 않거나 하나만 입력하면 에러 메세지가 뜰 것이다. 파일은 2개로 구성된다. flask를 동작 시키기 위한 python 파일과 html 파일이다. 

 

jinja_test.html>>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="/jinja_test" method="GET">
        <p>var1 : <input type="text" name="var1" /></p>
        <p>var2 : <input type="text" name="var2" /></p>
        <p><input type="submit" value="submit" /></p>
    </form>   
    {% if var1 and var2 %}
        <p>{{ var1 }}</p>
        <p>{{ var2 }}</p>
    {% elif var1 or var2 %}
        <p>Need to fill out both blank</p>
    {% else %}
        <p>No data stored</p>
    {% endif %}
</body>
</html>

 

jinja_test.py>>

from flask import Flask, render_template, request

app = Flask(__name__)


@app.route('/vars')
def vars():
    return render_template('vars.html')

@app.route('/jinja_test')
def login():
    var1 = request.args.get('var1')
    var2 = request.args.get('var2')
    return render_template('jinja_test.html', var1 = var1, var2 = var2)


if __name__ == '__main__':
    app.run(host="0.0.0.0", port="9999", debug=True)

 

결과 화면>>

그림1
그림2
그림3

 

주석 >> 

jinja_test.html 파일에 jinja2 템플릿 if 문이 적용되었다. 적용 결과 동작에 따라 html이 다르게 결과를 보여줌을 알 수 있다. jinja2의 if문은 {% if %}, {% elif %}, {% else %}, {% end if %}

위 구문을 써서 모두 표현 가능하다.

 

 

 


Jinja2 조건문 예제 (for문)

이번 예제를 간단히 설명하면 앞서 if문에서 사용한 예제를 그대로 사용할 것이다. 변경되는 부분은 html 파일에서 jinja if 문을 for문으로 변경하여 결과를 확인할 것이다. 

 

jinja_test.html>>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="/jinja_test" method="GET">
        <p>var1 : <input type="text" name="var1" /></p>
        <p>var2 : <input type="text" name="var2" /></p>
        <p><input type="submit" value="submit" /></p>
    </form>   
    {% for var in var1, var2 %}
        <p>{{ var }}</p>
    {% endfor %}
</body>
</html>

 

결과 화면>>

그림4
그림5

 

주석>>

jinja2 에서 for문 역시 파이썬 코드와 유사하게 사용할 수 있다. 

{% for %}, {% endfor %} 

위 구문으로 표현 가능하다.

 

 

 

반응형