1. Template Engine
웹을 개발하다 보면 템플릿 엔진 이라는 개념을 자주 접하게 된다.
1.1 템플릿 엔진이란?
HTML에 데이터를 넣어 동적으로 페이지를 생성해주는 도구이다.
기존의 HTML은 정적인 구조를 가진다.
<h1>안녕하세요 kim님</h1>이름이 고정되어 있어 사용자마다 다른 값을 출력할 수 없다.
이때, Flask에서 템플릿 엔진인 Jinja2를 사용한다.
1.2 Jinja2
https://blog.naver.com/dldlstn6695/224204255318
- app2.py
from flask import Flask, render_template
app = Flask(__name__)
@app.route('hello/<name>')
def hello(name):
return render_template('index.html', username=name)- templates/idex.html
<h1>안녕하세요 {{ username }}님</h1>
출력완료시, 서버 로그에도 뜬다.
코드 설명
return render_template('index.html', username=name)index.html에 있는 username에 name값을 넣어서 반환한다.
2. 조건문
- index.html
{% if username == "kim" %}
<h3>관리자입니다.</h3>
{% else %}
<h3>관리자가 아닙니다.</h3>
{% endif %}- 조건문 작성할 때는 if, else, endif로 끝맺음을 한다.
3. 반복문
- index.html
{% for user in users %}
<p>{{ user }}</p>
{% endfor %}- app2.py
@app.route('/users')
def users():
user_list = ["kim", "lee", "park"]
return render_template('index.html', users=user_list)- 반복문 작성할 때는 for, endfor로 끝맺음을 한다.
4. 실습
브라우저 접속 (/)
↓
form.html (입력 화면)
↓
이름 입력 후 전송
↓
POST /result
↓
Flask가 데이터 받음
↓
result.html로 전달
↓
화면 출력
- 코드 구조
chap1/
├── app.py
├── static/
│ └── style.css
└── templates/
├── form.html
└── result.html
- app.py
from flask import Flask, render_template, request
app = Flask(__name__)
@app.route("/")
def home():
return render_template("form.html")
@app.route('/result', methods = ['POST'])
def result():
name = request.form['username']
users = ["kim", "lee", "park", name]
return render_template(
'result.html',
username = name,
users=users
)
if __name__ == '__main__':
app.run(debug=True)- form.html
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="{{ url_for('static', filename= 'style.css')}}">
</head>
<body>
<h1>이름 입력</h1>
<form action="/result" method="post">
<input type="text" name="username" placeholder="이름 입력">
<button type="submit">전송</button>
</form>
</body>
</html>- result.html
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="{{ url_for('static', filename='style.css')}}">
</head>
<body>
{% if username == 'admin'%}
<h2> 관리자 입니다. </h2>
{% else %}
<h2>{{username}}님. 환영합니다.</h2>
{% endif %}
<h3>유저 목록</h3>
{% for user in users %}
<p>{{ loop.index }}. {{ user }}</p>
{% endfor %}
</body>
</html>- style.css
body {
font-family: Arial;
text-align: center;
}
h1 {
color: blue;
}
h2 {
color: green;
}
p {
font-size: 18px;
}실행하면 admin이면 관리자입니다 하고 유저목록 나오고, admin이 아니면 유저입니다 하고 유저목록 나온다.
클라우드/백엔드 엔지니어 지망생