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

公開日: : 最終更新日:2019/02/19 プログラミング

 

こんにちは。今回のテーマは『【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

  • 223 follow us in feedly
  • このエントリーをはてなブックマークに追加

Message

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

  • Linux App Dataに参加しよう!
  • 映画と読書愛するプログラマー。Androidな人だったけど気がついたらサーバーサイドへ。
    Linux App Dataを主宰しています。

    github:Kuro_Code25
    E-mail:kuro.code25@gmail.com

    記事更新のフォローはRSSやTwitterが便利です

    クロの仲間たち
    ※無断転載はご遠慮ください

  • にほんブログ村 IT技術ブログ Linuxへ
  • クロが作ったAndroidアプリがリリース!
    使いやすい単位変換アプリ

    使いやすい割り勘アプリ

    使いやすい調味料計算アプリ
PAGE TOP ↑