python flask – 웹 페이지 만들기
render_template 를 이용해서 웹페이지를 생성해낼 수 있다.
python flask – 초간단 WEB API/함수 포스팅에 이어서 해당 결과를 웹페이지로 표현한다. 앞선 포스트에서는 다음과 같이 lotto 당첨 결과를 json 형태로 반환해주었다.
위와 같이 함수 결과를 http로 리턴받을 수 있었는데 여기에 적절한 템플릿과 스타일만 더해주면 웹페이지를 생성해낼 수 있다.
main.py
아래와 같이 render_template()을 이용하면, 미리 작성한 템플릿에 함수 결과를 함께 전달해 html 코드를 반환해준다.
# main.py
import flask
from flask import render_template, request
import pickle
with open('lotto.bin','rb') as f:
lotto = pickle.load(f)
f.close()
app = flask.Flask(__name__)
app.config["DEBUG"] = True
@app.route('/', methods=['GET',])
def index():
return "Hello World!"
@app.route('/win_result', methods=['GET','POST'])
def win_result():
rnd = int(request.args['round'])
return render_template('win_result.html',win_result=lotto[rnd])
if __name__ == '__main__':
app.run(host='0.0.0.0',port='8888')
win_result.html
render_template() 에서 사용할 템플릿은 main.py 가 실행되는 경로 하위에 templates 디렉토리 안에 생성해주어야 한다.
vi ./templates/win_result.html
<!doctype html>
<html>
<body>
<form>
<title>Lotto Win Result</title>
</form>
{{ win_result['round'] }}<br>
{% for n in win_result['win result']['numbers'] %}
{{ n }}
{% endfor %}
{{ win_result['win result']['bonus'] }}<br>
{% for rank, result in win_result['win result']['win'].items() %}
{{ rank }}<br>
{% for total, num in result.items() %}
{{ total }}
{{ num }}<br>
{% endfor %}
{% endfor %}
</body>
</html>
위와 같이 jinja2 문법으로 dict, list 와 같은 데이터타입도 활용할 수 있고, if 조건문을 이용하거나 for loop를 이용한 iteration 도 활용할 수 있다.
이제 다시 47회차 당첨 결과 페이지에 방문해보면 다음과 같이 웹 페이지가 반환된다.
조금 밋밋하니까 스타일을 좀 더해주면,
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>Lotto Win Result</title>
<style>
table th {
font-weight: normal; }
table td {
border-bottom:solid 1px #f8f8f8;
}
table > thead > tr > th,
table > tbody > tr > th,
table > tfoot > tr > th,
table > thead > tr > td,
table > tbody > tr > td,
table > tfoot > tr > td {
padding: 5px;
}
table thead tr th {
font-size: 12px;
color: #121212;
text-transform: uppercase;
font-weight: bold;
letter-spacing: 0.05em;
background: #aaaaaa;
text-align: left;
}
#container {
width: 840px;
margin: 10px auto;
padding: 20px;
border: 1px solid #000000;
}
#header {
padding: 20px;
margin-bottom: 20px;
border: 1px solid #000000;
}
#content {
width: 530px;
padding: 20px;
margin-bottom: 20px;
float: left;
border: 1px solid #000000;
}
#sidebar {
width: 210px;
padding: 20px;
margin-bottom: 20px;
float: right;
border: 1px solid #000000;
}
#footer {
clear: both;
padding: 20px;
border: 1px solid #000000;
text-align: center;
}
@media ( max-width: 820px ) {
#container {
width: auto;
}
#content {
float: none;
width: auto;
}
#sidebar {
float: none;
width: auto;
}
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<h1>lotto 추첨 결과</h1>
</div>
<div id="content">
<h2>{{ win_result['round'] }} 회차 당첨 결과</h2>
<table>
<thead>
<tr><th>당첨번호</th>
<th></th>
<th>보너스</th></tr>
</thead>
<tbody>
<tr><td>
<table>
<tbody><tr>
{% for n in win_result['win result']['numbers'] %}
<td>{{ n }}</td>
{% endfor %}
</tr></tbody>
</table>
</td>
<td>+</td>
<td>
<table>
<tbody><tr>
<td>{{ win_result['win result']['bonus'] }}</td>
</tr></tbody>
</table>
</td></tr>
</tbody>
</table><br>
<table>
<thead>
<tr>
<th>순위</th>
<th>등위별 총 당첨금액</th>
<th>당첨 게임 수</th>
</tr>
</thead>
<tbody>
{% for rank, result in win_result['win result']['win'].items() %}
<tr>
<td>{{ rank }}</td>
{% for key, value in result.items() %}
<td>{{ value }}</td>
{% endfor %}
</tr>
{% endfor %}
</tbody>
</table>
</div>
<div id="sidebar">
<h2>메뉴</h2>
<ul>
<li>홈</li>
<li>소개</li>
<li>당첨 결과 조회</li>
</ul>
</div>
<div id="footer">
<p>dong1lkim, University of Seoul</p>
</div>
</div>
</body>
</html>
다음과 같은 웹페이지를 만들어낼 수 있다.
