【python】Bottleフレームワークで簡単なWebアプリを作る(その3)

こんにちは。今回のテーマは『【python】Bottleフレームワークで簡単なWebアプリを作る(その3)』です。BottleというシンプルなWebフレームワークを使って簡単なwebアプリを作ってみる企画の3回目です。今回は登録した書籍の一覧画面を作成していきます。編集機能と削除機能を有する単純な一覧画面を作っていきます。

※本記事はpython製フレームワークBottleで簡単なWebアプリを作る(その2)の続きとして書かれていますので、初めての方はまずコチラをご覧になることをオススメします。

(2018-12-15)加筆修正しました。また、ソース全体が見渡せるようにGitHubにソースコードをUPしました。


【目次】
一覧表示画面の作成
削除機能の追加

一覧表示画面の作成

BDに登録された書籍の一覧を表示する画面を作っていきます。

一覧画面用の関数をroutes.pyに登録します。中身は非常に単純でDBから取得した書籍一覧のオブジェクトとヘッダー配列をテンプレートに渡しています。

list関数(views.py)

@app.route('/list')
def list():
    # DBから書籍リストの取得
    bookList = session.query(Books.name, Books.volume, Books.author, Books.publisher, Books.memo, Books.id_)\
            .filter(Books.delFlg == 0).all()
    headers = ['書名', '巻数', '著者', '出版社', 'メモ','操作']
    return template('list.html', bookList=bookList, headers=headers)

テンプレート
テンプレートも渡されたヘッダー配列とオブジェクトをループで表示するだけです。base.htmlを継承しています。詳しくはpython製フレームワークBottleで簡単なWebアプリを作る(その1)を参照くださいね。

template/list.html

{% extends 'base.html' %}

{% block title %}
<title>一覧</title>
{% endblock %}

{% block content %}
<div class="container">
    <div class="row">
        <h3>読書リスト</h3>
    </div>
    <div class="row form-group">
        <a href="add"><button class="btn btn-info">新規追加</button></a>
    </div>
    <div class="row">
        <table class="table table-bordered">
            <!-- table header -->
            <thead class="thead-dark">
            <tr>
                {% for header in headers %}
                <th>{{header}}</th>
                {% endfor %}
            </tr>
            </thead>
            <!-- table body -->
            {% for list in bookList %}
            <tr>
                <td>{{list.name}}</td>
                <td>{{list.volume}}</td>
                <td>{{list.author}}</td>
                <td>{{list.publisher}}</td>
                <td>{{list.memo}}</td>
                <th>
                    <a href="add?id={{list.id_}}">
                        <button class="btn btn-secondary"><i class="fas fa-pen"></i></button>
                    </a>
                    <a href="delete/{{list.id_}}">
                        <button class="btn btn-secondary"><i class="fas fa-trash-alt"></i></button>
                    </a>
                </th>
            </tr>
            {% endfor %}
        </table>
    </div>
</div>
{% endblock %}

編集・削除機能の追加

一覧画面から内容を編集機能と削除機能を行える機能を付けていきます。テンプレートにはすでにボタンを追加してあるのでroutes.pyに関数を追加します。

編集機能

編集に関しては既存のadd関数を再利用します。追加ボタンを押下した際にGETパラメータでIDを渡してやります。

add関数(views.py)

@app.route('/add', method=['POST','GET'])
def add():
    view = ""
    registId = ""
    form = {}
    kind = "登録"
    # GETされた場合
    if request.method == 'GET':
        # id指定された場合
        # ここの部分を追加
        if request.query.get('id') is not None:
            book = session.query(Books).filter(Books.id_==request.query.get('id')).first()
            form['name'] = book.name
            form['volume'] = book.volume
            form['author'] = book.author
            form['publisher'] = book.publisher
            form['memo'] = book.memo
            registId = book.id_

            kind = "編集"
        # ここまで
        # 以下省略

削除機能

一覧画面の削除ボタンが押された場合の削除機能はURL指定された書籍IDの書籍を論理削除することにします。(サンプルのため論理削除の是非については議論しません)

delete関数(views.py)

@app.route('/delete/<dataId>')
def delete(dataId):
    # 論理削除を実行
    book = session.query(Books).filter(Books.id_==dataId).first()
    book.delFlg = 1
    session.commit()
    session.close()
    redirect('/list')

最後に

とりあえずBottleを使用した簡単なウェブアプリの紹介を終えます。正直Bottleの機能の中でもルーティング機能しか紹介できず、あまり参考にならない記事になってしまったなと反省しています。ただBottleも専用の便利なプラグインが開発されており実用的なWebアプリケーションの作成にも耐えられる用になってきています。もう少しその辺りをお伝え出来る記事を書くべきでしたが、力不足でした。また機会があればチャレンジしたいと思っています。

<2018-12-15追記>
全体が見えず分かりづらいというお声を多数いただきまして、申し訳ありません。ソースコードをGitHubにアップしましたので記事と照らし合わせて参考にしていただければ幸いです。本記事がみなさんにプログラミングの楽しさを伝えられれば幸いです。

【関連記事】
python製フレームワークBottleで簡単なWebアプリを作る(その1)
python製フレームワークBottleで簡単なWebアプリを作る(その2)

Sponsored Link


2件のコメント

  • Bottleの学習をしたいと考えていたところ本サイトを見つけ参考にさせていただいております。ありがとうございます。
    サイトにてご紹介いただいた機能にプラスして検索機能を実装したいと考えているのですが、実力不足で実装できていません。
    もしお時間ございましたらご教授頂きたいです。

    • 高橋陽介 さん

      コメントありがとうございます。返信遅くなりすみません。

      実装そのものをこのコメントを示すのは難しいので、筆者が記載しているDjangoでの検索画面作成例をURLで示します。
      ご参考になれば幸いです。

      https://django.kurodigi.com/search_page/

      基本的には検索キーワードをフォームから受けてORM(本記事の場合はSQLAlchemy)でSQLを発行し検索結果をDBから受取し、それを表示することになります。
      実装方法はDjangoとは異なりますが、考え方は同じです。

コメントする

メールアドレスが公開されることはありません。 が付いている欄は必須項目です