DESIGNMAP

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

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

Todoリストを仕上げていきます。

まず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))


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()


if mode == 'done':
    id = form.getvalue('id')
    id = html.escape(id)

    sql = ('DELETE FROM tasks WHERE id = ?')
    curs.execute(sql, (id,))
    conn.commit()


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

data = ""

for id, name in rows:
    data +=  '''
    <li>{0}
    <form action="todo.py" method="post">
    <input type="submit" value="済んだ">
    <input type="hidden" name="id" value="{1}">
    <input type="hidden" name="mode" value="done">
    </form>
    </li>
    '''.format(name, id)

print_html(data)

保存して、Google Chromeのアドレス欄に「http://localhost:8080/cgi-bin/todo.py」と入力して[enter]キーをおします。

各タスクの横に「済んだ」ボタンが表示されます。

Pythonが出力したHTMLを確認しましょう。
Google Chromeを右クリックして、[ページのソースを表示]をクリックします。
もしくは[表示]メニュー→[開発/管理]→[ソースを表示]をクリックします。

各タスクの<input type="hidden" name="id"をみると、それぞれ異なるid番号が取得できていることがわかります。

 <li>ノートを買いにいく
    <form action="todo.py" method="post">
    <input type="submit" value="済んだ">
    <input type="hidden" name="id" value="1">
    <input type="hidden" name="mode" value="done">
    </form>
    </li>
    
    <li>切手を買いにいく
    <form action="todo.py" method="post">
    <input type="submit" value="済んだ">
    <input type="hidden" name="id" value="2">
    <input type="hidden" name="mode" value="done">
    </form>
    </li>

「済んだ」ボタンを押すと、タスクが消えれば成功です。

コードの解説をしていきます。
といっても新しいところはあまりありません。

sql = ('DELETE FROM tasks WHERE id = ?')
    curs.execute(sql, (id,))

DELETE文はデータベースのテーブルのデータを削除します。WHERE id = ?で該当するidだけのデータを削除します。

これでTodoリストは完成です。
まだまだ機能は少ないですが、これをベースに改造してみてください。

スポンサーリンク

関連記事

プロフィール

DESIGNMAP
制作ディレクター。フリーランス。
ON VISITING」を運営。
お問い合わせ