jinja2テンプレートを使ってみる

# 前書き

[前回](http://qiita.com/kws9/items/746a5ce3dd862e4bf354)でPythonモジュール と API の連携はできたので機能追加をしてみました。

## 追加機能

* BootStrapを用いたUI
* 検索機能
* ソート機能
* Pagination機能

　
# 内容


## 検索機能

検索機能に関してはただの「 form 」です。

APIに **searchBy** と **query** でパラメータ指定をすればその条件でデータを返してくるのでフロントでは表示するだけです。

返却されたホテルリストを for文 を使って表示します。

APIにページング機能をつけてあるので、最大でも10件のホテルのリストが返却されます。

### ソース

```html+jinja

        {% for hotel in data.hotels %}
        <div class="row">
            <div class="col-md-5">
                <a href="#">
                    <img class="img-responsive" src="{{ hotel.imagePath }}" alt="">
                </a>
            </div>
            <div class="col-md-5">
                <h3>{{ hotel.name }}</h3><br>
                <div align="left" >
                  <span class="rate rate{{ hotel.grade }}"></span>
                </div>
                <h4> City Code : {{ hotel.cityCode }}</h4>
                <h4>{{ hotel.address }}</h4>
                <a class="btn btn-primary" href="#">View Project <span class="glyphicon glyphicon-chevron-right"></span></a>
            </div>
        </div>
        {% endfor %}
```

　

## ソート機能
検索パラメータの保持をどうしようか、結構悩んだ末にPython側からレスポンスを返す際に、検索パラメータも返却することにしました。

ソート自体も「form」でAPIにパラメータを渡せば、ソートされたリストが返却されるので、またそれを for文 を用いて表示します。

### ソース

```html+jinja

        <form action="/hotel">
                <input type="hidden" name="query" value={{ data.query }}>
                <input type="hidden" name="searchBy" value={{ data.searchBy }}>
                <select class="span1" name="sortBy">
                    <option value="name">Hotel Name</option>
                    <option value="cityCode">City Code</option>
                    <option value="grade">Hotel grade</option>
                </select>
            <button type="submit" class="btn btn-primary btn-sm"> Sort </button>
        </form>
```

## Pagination機能

**Spring** に備わった機能で、簡単にPagination機能をAPI側につけることができました。

上記については、また気が向けば記事を書こうかと思っています。

よってフロント側からは、ページを指定してあげるだけで大丈夫です。

### ソース

```html+jinja

        <!-- Pagination -->
        <div class="row text-center">
            <div class="col-lg-12">
                <ul class="pagination">
                {% set backPage = data.pagination.pageNum - 1 %}
                {% set advancePage = data.pagination.pageNum + 1 %}
                    {% if data.pagination.pageNum != 1%}
                    <li>
                        <a href="http://0.0.0.0:50001/hotel/?query={{ data.query }}&searchBy={{ data.searchBy }}&sortBy={{ data.sortBy }}&pageNum={{ backPage }}">&laquo;</a>
                    </li>
                    {% endif %}
                    {% for current in range(1, data.pagination.totalPageCount + 1) %}
                    <li {% if current == data.pagination.pageNum %}class="active"{% endif %}>
                        <a href="http://0.0.0.0:50001/hotel/?query={{ data.query }}&searchBy={{ data.searchBy }}&sortBy={{ data.sortBy }}&pageNum={{ current }}">{{ current }}</a>
                    </li>
                    {% endfor %}
                    {% if data.pagination.pageNum != data.pagination.totalPageCount%}
                    <li>
                        <a href="http://0.0.0.0:50001/hotel/?query={{ data.query }}&searchBy={{ data.searchBy }}&sortBy={{ data.sortBy }}&pageNum={{ advancePage }}">&raquo;</a>
                    </li>
                    {% endif %}
                </ul>
            </div>
        </div>
        <!-- /.row -->

```
　

if文やfor文が入ってますが、内容は

* 現在のページ = 1ページ目 なら ページ戻るボタンを隠す。
* 現在のページ番号の色を変える。
* ページ番号のページに遷移する。
* 現在のページ = ページ合計 なら ページ進むボタンを隠す。

です。下記の画像で、②にカーソルを合わせたときに現在のパラメータを保持しつつ、ページ数を表す **pageNum** パラメータが追加されていることがわかります。

![20160922215540.png](https://qiita-image-store.s3.amazonaws.com/0/109149/6f810b7e-6786-286b-0490-948a761e5740.png)

## 見た目


BootStrapを使うだけで、見た目が大分よくなりました。
　
![20160922202109.png](https://qiita-image-store.s3.amazonaws.com/0/109149/60ec4b6a-7710-4023-3e33-e37218f07b68.png)


まだ色々と検証中ですが、ある程度フロントとAPI間の機能を完成させることができたら、今後は細かな技術にも触れていきたいなと思っています。