前回に作成したWebページより、HTMLを整理するためにjinja2テンプレートを使用します。
jinja2テンプレートとは、Flaskのデフォルトのテンプレートエンジンで、HTMLの中にPythonを埋め込むことができます。また、複数のHTMLファイルを使用する場合、同じようなタイトルを各ページに記載するのは手間がかかります。ここでは、各ページに継承できるように「base.html」を作成してきます。
今回対象となるファイルの配置は以下のようになります。
|
1 2 3 4 5 6 |
flask └── templates | └── base.html (1) ・・・ 新規作成 | └── search.html (2) | └── result.html (3) ・・・ 新規作成 └── search.py (4) |
(1) base.html
全体の枠組みとして「base.html」を作成します。titleやbodyタグにある{& … &}はjinja2テンプレートにおいてのコマンドになります。{& block … &}と{& endblock … &}は、ブロックの開始と終了のペアで使用します。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!DOCTYPE html> <html> <head> <title>商品検索システム-{% block title %}{% endblock %}</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body> <h2>商品データベース</h2> {% block content %} {% endblock %} </body> </html> |
(2) search.html
前回の「search.html」より、「base.html」の継承した記述に変更しました。尚、継承はextendsで行います（１行目）。「base.html」を継承する箇所は、{& block … &}{& endblock … &}を使用します。
|
1 2 3 4 5 6 7 8 9 10 |
{% extends 'base.html' %} {% block title %}Search{% endblock %} {% block content %} <form action="/result" method="POST"> <p>商品：<input type="text" name="item" size="30"></p> <p><input type="submit" value="入力"></p> </form> {% endblock %} |
(3) result.html
検索結果のHTMLページです。search.pyにあった<p>…</p>の箇所を移動して作成しています。
|
1 2 3 4 5 6 7 |
{% extends 'base.html' %} {% block title %}Result{% endblock %} {% block content %} <p>「{{item}}」は{{price}}です！</p> {% endblock %} |
(4) search.py（一部抜粋）
「result.html」の作成に伴い、result関数のreturnの箇所をテンプレート「result.html」を呼び出すように修正しました。
|
1 2 3 4 5 6 7 8 9 10 |
@app.route("/result", methods=['POST']) def result(): item = request.form['item'] items = [('キャベツ', 200), ('にんじん', 100), ('牛乳', 178), ('もやし', 50)] price = '未登録' for row in items: if row[0] == item: price = str(row[1]) + '円' renderpage = render_template("result.html",item=item, price=price) return renderpage |
■動作確認
・検索画面
・検索結果画面
「base.html」で作成した、titleタグの”商品検索システム”やbodyタグの”商品データベース”が各画面に継承されています。jinja2テンプレートを使用で少し整理されました。
以上です。