こんにちは。今回のテーマは『【python】Bottleフレームワークで簡単なWebアプリを作る（その3）』です。BottleというシンプルなWebフレームワークを使って簡単なwebアプリを作ってみる企画の３回目です。今回は登録した書籍の一覧画面を作成していきます。編集機能と削除機能を有する単純な一覧画面を作っていきます。
※本記事はpython製フレームワークBottleで簡単なWebアプリを作る（その２）の続きとして書かれていますので、初めての方はまずコチラをご覧になることをオススメします。
一覧表示画面の作成
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)
テンプレート
テンプレートも渡されたヘッダー配列とオブジェクトをループで表示するだけです。
template/list.html
<!DOCTYPE html>
<HEAD>
<link href="/static/css/bootstrap.min.css" type="text/css" rel="stylesheet">
<link href="/static/css/common.css" type="text/css" rel="stylesheet">
<link href="/static/font/css/open-iconic-bootstrap.css" type="text/css" rel="stylesheet">
<title>一覧</title>
</HEAD>
<BODY>
<nav class="navbar navbar-dark bg-dark">
<span class="navbar-brand">READING RECORD</span>
</nav>
<main class="bd-content py-5 pl-3" role="main">
<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"><span class="oi oi-pencil" title="edit"></span></button>
</a>
<a href="delete/{{list.id_}}">
<button class="btn btn-secondary"><span class="oi oi-trash" title="delete"></button>
</a>
</th>
</tr>
{% endfor %}
</table>
</div>
</div>
</main>
</BODY>
編集・削除機能の追加
一覧画面から内容を編集機能と削除機能を行える機能を付けていきます。テンプレートにはすでにボタンを追加してあるので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アプリケーションの作成にも耐えられる用になってきています。もう少しその辺りをお伝え出来る記事を書くべきでしたが、力不足でした。また機会があればチャレンジしたいと思っています。
【関連記事】
python製フレームワークBottleで簡単なWebアプリを作る（その１）
python製フレームワークBottleで簡単なWebアプリを作る（その２）
Sponsored Link