DESIGNMAP

  1. TOP
  2. 公開講座
  3. ゼロから始めるPython入門
  4. TodoリストWebアプリをつくってみよう(3)ー ゼロから始めるPython入門【Vol.21】

TodoリストWebアプリをつくってみよう(3)ー ゼロから始めるPython入門【Vol.21】

今回は入力欄をつくり、データベースに書き込めるようにつくっていきます。
まずWebサーバーを起動しましょう。
Windowsはコマンドプロンプト、Macはターミナルを起動して、現在位置を「python-study」フォルダに移します。

Windowsは

python -m http.server --cgi 8080

Macは

python3 -m http.server --cgi 8080

と入力して[enter]キーをおします。許可ダイアログが表示された場合は、「許可」ボタンをクリックします。
これでWebサーバーが起動します。

前回作った「cgi-bin」フォルダの「todo.py」をAtomで開きます。
太字部分を追加します。

#!/usr/bin/env python3

import cgi
import html
import sqlite3


conn = sqlite3.connect('todolist.db')
curs = conn.cursor()


print('Content-type: text/html')
print('')


def print_html(data=""):
    print('''\
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Todoリスト</title>
    </head>
    <body>
    <form action="todo.py" method="post">
    タスク名<input type="text" name="name">
    <input type="hidden" name="mode" value="add">
    <input type="submit" value="追加">
    </form>
    <ul>
    {0}
    </ul>
    </body>
    </html>
    '''.format(data))



curs.execute('SELECT * FROM tasks')
rows = curs.fetchall()

data = ""

保存して、Google Chromeのアドレス欄に「http://localhost:8080/cgi-bin/todo.py」と入力して[enter]キーをおします。入力欄と追加ボタンが表示されれば成功です。

追加したHTML部分をみてみましょう。

    <form action="todo.py" method="post">
    タスク名<input type="text" name="name">
    <input type="hidden" name="mode" value="add">
    <input type="submit" value="追加">
    </form>

formタグでWebサーバーにデータを送信することができます。action属性はフォームデータの送信先です。今回は自分自身のファイルを指定しています。「追加」ボタンをおすと、Webサーバーは再度「todo.py」を実行します。

<input type="text" name="name">

は一行入力欄です。name属性の値はPyhonでデータを取得するときに使います。変数と考えればわかりやすいです。今回はname属性の値はnameで、nameにユーザーが入力した値が送られます。

<input type="hidden" name="mode" value="add">

は隠し入力欄です。画面には表示されないのですがWebサーバーに送られます。name属性の値がmodeで、addという値で送られます。

下記のコードを追加します。

(省略)
    <form action="todo.py" method="post">
    タスク名<input type="text" name="name">
    <input type="hidden" name="mode" value="add">
    <input type="submit" value="追加">
    </form>
    <ul>
    {0}
    </ul>
    </body>
    </html>
    '''.format(data))


form = cgi.FieldStorage()
print(form)

todo.pyを保存します。Google Chromeのアドレス欄をクリックして、[Enter]キーをおします。
タスク名に適当なタスクを書き、「追加」ボタンをクリックします。下図のように表示されれば成功です。

cgi.FieldStorage()でHTMLのフォームのデータを取得できます。
form変数には

FieldStorage(None, None, [MiniFieldStorage('name', 'コーヒー豆を買いにいく'), MiniFieldStorage('mode', 'add')])

というデータがはいっています。複雑なデータ構造ですが、「name」と「mode」はHTMLのname属性の値で、それぞれ対応するフォームのデータがとれていることがわかります。

スポンサーリンク

今度は下記のようにコードを修正・追加します。

#!/usr/bin/env python3

import cgi
import html
import sqlite3


conn = sqlite3.connect('todolist.db')
curs = conn.cursor()


print('Content-type: text/html')
print('')


def print_html(data=""):
    print('''\
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Todoリスト</title>
    </head>
    <body>
    <form action="todo.py" method="post">
    タスク名<input type="text" name="name">
    <input type="hidden" name="mode" value="add">
    <input type="submit" value="追加">
    </form>
    <ul>
    {0}
    </ul>
    </body>
    </html>
    '''.format(data))


form = cgi.FieldStorage()
mode = form.getvalue('mode')

if mode == 'add':
    name = form.getvalue('name')
    name = html.escape(name)

    sql = ('INSERT INTO tasks(name) VALUES (?)')
    curs.execute(sql, (name,))
    conn.commit()

curs.execute('SELECT * FROM tasks')
rows = curs.fetchall()

data = ""

for id, name in rows:
    data +=  '''
    <li>{0}</li>
    '''.format(name)

print_html(data)

todo.pyを保存します。Google Chromeのアドレス欄をクリックして、[Enter]キーをおします。
タスク名に適当なタスクを書き、「追加」ボタンをクリックします。
タスクが追加されて、一覧に追加されれば成功です。

mode = form.getvalue('mode')

getValue()cgi.FieldStorage()で取得したデータから、name属性の値を取得することができます。

if mode == 'add':
    name = form.getvalue('name')
    name = html.escape(name)

html.escape(name)がポイントです。
これはセキュリティのための処理です。「<」「>」を含む文字列を入力されて、スクリプトが実行されてしまうリスクがあるのです。これを防いでいます。

    sql = ('INSERT INTO tasks(name) VALUES (?)')
    curs.execute(sql, (name,))
    conn.commit()

INSETは「TodoリストWebアプリをつくってみよう(1)ー ゼロから始めるPython入門【Vol.19】」で書きましたが、今回は

    sql = ('INSERT INTO tasks(name) VALUES (?)')
    curs.execute(sql, (name,))

と書いています。少し違います。これもセキュリティ処理のためのコードで、プレースホルダーと呼ばれる手法です。SQLインジェクションを防ぎます。悪意のあるSQLコマンドを注入されることを防ぎます。

今回はここまでとします。
次回はTodoリストの仕上げです。各タスクの横に「済んだ」ボタンを表示させ、押すと一覧表示から消えるようにします。

スポンサーリンク

関連記事

プロフィール

DESIGNMAP
制作ディレクター
お問い合わせ