読者です 読者をやめる 読者になる 読者になる

修行@ホーチミン

ホーチミン長期出張の日記です

jinja2 の編集

前書き

 

Pythonプロジェクト と API の連携はできたので、jinja2テンプレートに機能追加をしました。

※ブログには書いていないですが、少しずつ Python と API も修正をしてます。

   

追加機能

 

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

 

内容

検索機能

 

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

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

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

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

 

ソース

        {% 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側からレスポンスを返す際に、検索パラメータも返却することにしました。

JavaScript等を用いて保持するのは、今の自分のレベルでは少し難易度が高そうでした...。

色々悩んだ結果、テンプレートの便利さに気づかされました。

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

ソース

        <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側につけることができました。

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

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

 

ソース

 

        <!-- 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 パラメータが追加されていることがわかります。

f:id:bebe0909:20160922215540p:plain

 

見た目

 

BootStrapを使うだけで、見た目が大分よくなりました。  

f:id:bebe0909:20160922202109p:plain

 

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