概要
Python Webアプリ入門講座へようこそ
今回からは本格的なアプリの開発に入っていく
ToDoリストを管理するアプリを作成してゆく過程で
HTMLの仕組み、HTTPメソッド、テンプレートエンジン
ルーティング、データベースの扱い方について学習する
実装
- 連想配列のTODOリストデータを表示できるようにする
- DBのTODOリストデータを取得し、表示できるようにする
- TODOタスクをDBに追加できるようにする
- TODOタスクをDBから削除できるようにする
という順番で機能の追加を行う
連想配列のTODOリストデータを表示できるようにする
まずは「連想配列のTODOリストデータを表示できるようにする」についてだ
Flaskにはjinja2というテンプレートエンジンが使用されている
テンプレートエンジンを用いることでテンプレートと呼ばれるひな型と
サーバから渡されるデータを合わせて画面を作成することができる
index.pyではtodosという連想配列を宣言し
render_templateでtodosを用いてview.htmlを描画するよう指示を出している
view.htmlのforとendforに囲まれた部分でサーバから渡されたtodosを表示している
for idx in todosで連想配列todosのデータ数だけループが実行される
idxには連想配列のkeyが入力される従って、todos[idx]で各要素を表示できる
Chromeのデベロッパーツールを使って生成されたHTMLを見るとどんな動作をしたかがわかるだろう
DBのTODOリストデータを取得し、表示できるようにする
sqlite3というデータベースを使用する
データベースはデータの永続化のために必要だ
永続化
先ほど見たtodosという連想配列はメモリ上にデータが作られるが
メモリというのはデータを処理するために一時的にデータをおいておける場所にすぎない
データベースに保存しないとサーバの再起動などでデータが消えてしまう
TODOアプリのようにデータを管理するアプリにはデータベースは必須だ
コマンドラインから直接sqliteを操作
sqlite3はpythonのインストールとともに標準でついてくるので
pythonからsqlite3にアクセスする分には新たに追加のライブラリをインストールする必要はない
ただ、コマンドラインから直接sqliteを操作できる方が便利なのでsqlite cliをインストールを推奨する
ダウンロードサイトからsqliteツールをダウンロードし、適当なフォルダに格納したのちに
環境変数を設定する
その後、index.pyのあるフォルダでsqlite3.exe test.dbを実行する
まず、todoリストデータを保存するためのテーブルを定義する
テーブル
データベースでは表形式でデータを保存できる
その表のことをテーブルと呼ぶ
CREATE TABLE テーブル名(カラム定義）でテーブルを定義できる
テーブルに格納できるデータはあらかじめ決めておく必要がある
その情報をカラム定義と呼ぶ
今回はtodosという名前のテーブルとid、todoというカラム付きで定義する
そしてidは整数、主キー、自動インクリメント
todoは文字列として定義している
主キーというのは、テーブル全体である行を一つに特定するために使われる
これは後々、データ削除を実装するのに役に立つ
また、自動インクリメントを使うことで自動採番を行うことができる
連想配列で宣言していたデータをDBに移してゆく
続いて、連想配列で宣言していたデータをDBに移してゆく
INSERT INTO テーブル名(カラム名)VALUES(データ)でデータを追加できる
idはAUTOINCREMENTを指定したので自動で連番が作成される
続いて、サーバの方でDBからデータを取り出しviewに渡す部分を作成する
sqlite3.connect(‘test.db’)でデータベースに接続する
cur = con.execute(select * from todos)でtodosテーブルのデータを全て取得する
for row in curのあたりで取得したデータを連想配列の形式に整形している
そのあとは前と同じくrender_templateでviewにtodoデータを渡せば
todoデータが画面に表示されるようになる
TODOタスクをDBに追加できるようにする
続いて、「TODOタスクをDBに追加できるようにする」についてだ
まずはviewを見てみよう
formタグとinputタグが追加されている
formタグとinputタグでデータ登録を行うことができる
上のinputでは入力欄を
下のinputではボタンを作成している
そして入力欄で記載したデータをボタンをクリックすることで
サーバにデータを送信できる
続いて、送信されたデータを処理するサーバ側の実装を解説しよう
まず、app.routeに/addとmethodsにPOSTを指定し、その下に関数を定義する
入力したデータがadd関数で処理されるようになる
では、具体的にどのような処理がなされるか見てゆこう
まず、if not request.form[‘name’]で入力データをチェックしている
データがからの場合はif文内のreturn redirect(/)が実行される
これはapp.route(‘/’にリダイレクトされるという意味だ
結果的に、特に何の処理も行わずデータ表示を再度行うだけに終わる
入力があった場合、if文以降が実行される
sqlite3.connectは先ほどと同様だ
そのあと、insert intoでデータを追加し、
con.commit()でコミットを行う
そのあとredirect(/)でデータ表示処理を実行している
クエスチョンマークはプレースホルダといって、このクエスチョンマークにrequest.form[‘name’]
が置き換わられる
insertを実行した時点ではまだ、変更が反映されてない
コミットを行うことで初めて変更が反映される
TODOタスクをDBから削除できるようにする
まずはviewの変更を見てゆく
ここでの変更はtodoデータの表示部分をformで囲み、
input submitを追加する
labelにfor属性を付与する
labelの前にinput checkboxを追加する
の三点だ
{{ idx }}はidx変数のデータを参照するということだ
input checkboxでチェックボックスを追加できる
labelにfor属性を付けることでラベルとチェックボックスが連動するようになる
ラベルのクリックでチェックボックスのON、OFFが切り替わるようになる
そしてformで囲み、input submitを追加することでチェックボックスデータをサーバに送信できる
次にサーバ側のコードを見ていく
データ追加の時と同じようにapp.route(‘delete’～でデータを受け取るようにする
これでdelete関数で処理が行われるようになる
for e in request.formでチェックボックスのデータを処理する
con.executeでdelete文を実行し、
先ほどと同様にcon.commitでコミットredirect(/)でデータ表示処理にリダイレクトしてる
