こんにちは、むさしです。引き続きflaskでwebアプリを作っていきましょう。

前の記事： <a href="http://playwao.hatenablog.com/entry/2015/07/25/100823">FlaskでWebアプリを作る。その２:Flask-Migrationでデータベースを作る - 僕らは偶然性を大切にするためにクソゲーを作り続ける。</a>playwao.hatenablog.com

base.htmlを編集する

base.htmlを編集しましょう。 htmlについては僕はあまり詳しくないのでうまく説明できないので自分で調べて貰えばと思います。

また、デザインを楽にするために今回はBootStrapを使います。

<a href="http://getbootstrap.com">Bootstrap · The world's most popular mobile-first and responsive front-end framework.</a>getbootstrap.com

こちらにアクセスしてbootstrapファイルをstaticフォルダに入れてもいいです。今回は面倒なのでcndを使います。また、jQueryも使うので同様の方法で導入してください。

<a href="https://jquery.com">jQuery</a>jquery.com

つまりファイル構造はこういう風になります。

flask_app
|---static
    |---js
    |   |---jquery-2.1.4.min.js
    |   |---bootstrap.min.js
    |---css
        |---bootstrap.min.css
        |---app.css

app.cssはちょっと大きさを調整したい時などに使います。

準備ができたので早速base.htmlを編集しましょう。

base.html

<!DOCTYPE html>
<html lang="ja">
    <head>
       <meta charset="utf-8">
       <meta name="viewport" content="width=device-width, initial-scale=1">
       <title>flask_app</title>
       <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
       <link href="http://localhost:8080/static/app.css" rel="stylesheet">
   </head>
    <body>
    <header>
        <nav class="navbar navbar-default">
            <div class="container-fluid">
                <div class="navbar-header">
                    <a class="navbar-brand" href="#">読書履歴</a>
                </div>
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav">
                        <li><a href="books/index.html">書籍一覧</a></li>
                        <li><a>記録一覧</a></li>
                    </ul>
                </div>
            </div>
        </nav>
    </header>
    <div class="container-fluid">
        <div class="row">
            {% block body %}{% endblock %}
        </div>
    </div>
    <footer>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
    </footer>
    </body>
</html>

書籍一覧と記録一覧は後でリンクを入れます。とりあえず今はこのままにしておきます。

次に一覧を表示できるようにindex.htmlを作りましょう。その際、templateファイルの階層は以下のようにします。

template
   |---base.html
   |---book
        |---index.html

早速index.htmlを作っていきます。

index.html

{% extends "base.html" %}
{% block body %}
<h1>書籍一覧</h1>
<div class="table-responsive">
    <table class="table table-striped">
        <thead>
            <tr>
                <th>ID</th>
                <th>タイトル</th>
                <th>著者・作者</th>
                <th>出版社</th>
            </tr>
        </thead>
        <tbody>
            {% for book in books %}
            <tr>
                <td>{{ book.id }}</td>
                <td>{{ book.title }}</td>
                <td>{{ book.auther }}</td>
                <td>{{ cbook.publisher }}</td>
            </tr>
            {% else %}
                <td>書籍が登録されていません</td>
            {% endfor %}
        </tbody>
    </table>
</div>
{% endblock %}

{% for book in books %}はjnja2のfor文です。このfor文は必ず最後に{% endfor %}を指定する必要があります。 booksには書籍の情報が入っています。この情報については後でpythonの方で指定します。 {% else %}はもしbooksに何も入っていない時に実行される関数です。今回は「書籍が登録されていません」というメッセージが表示されます。

これでhtml部分は完成です。

ルーティングを行う

さて、HelloWorldを作った時しれっと@app.route("/")をつかったと思うのですがこれがルーティーングです。ルーティングで指定された場所に移動すると、その後ろにつく関数が実行されます。これを使って見た目を作っていきます。

manage.pyにルーティングを追加します。

manage.py

@app.route("/book/index")
def book_index():
    """
    書籍一覧
    """
    books = Book.query.order_by(Book.id.asc())
    return render_template("book/index.html",
                            books=books)

これは書籍をデータベースから抜き取り一覧を表示させています。

まず、Book.queryで書籍のqueryを生成し、すべての書籍に関する情報を抜き出します。その後のorder_byで順番に並べ直します。今回はBook.id.asc()としておりBookのidを昇順に並べています。最後にrender_templateを返しています。このrender_templateの第一引数に表示させたいhtmlを入れます。 books=booksはhtmlを生成する際の引数を指定しています。今回は左右同じ名前でわかりにくいですが、例えば

       <tbody>
            {% for content in contents %}
            <tr>
                <td>{{ content.id }}</td>
                <td>{{ content.title }}</td>
                <td>{{ content.auther }}</td>
                <td>{{ content.publisher }}</td>
            </tr>
            {% else %}
                <td>書籍が登録されていません</td>
            {% endfor %}
        </tbody>

の時は

@app.route("/book/index")
def book_index():
    """
    書籍一覧
    """
    books = Book.query.order_by(Book.id.asc())
    return render_template("book/index.html",
                            contents=books)

とする必要があります。