商品管理ページの作成

Image from Gyazo

商品管理ページの作成

商品情報を格納しているItemsテーブルを管理するためのページを作成しましょう. 今回は,商品情報の 更新追加 の機能を実装します. 最初に index.html に商品管理ページへのリンクを追加します. 商品管理ページは management.html というファイル名で作成することにします.

<!DOCTYPE html>

<html>

  <head>
    <meta charset="utf-8">
    <title>椙天市場</title>
  </head>

  <body>

    <h1>椙天市場</h1>

    <ul>
      <li><a href="cgi-bin/users.py">ユーザ情報</a></li>
      <li><a href="cgi-bin/items.py">商品情報</a></li>
      <li><a href="cgi-bin/histories.py">購買履歴</a></li>      
    </ul>

    <ul>
      <li><a href="login.html">ログイン</a></li>
      <li><a href="management.html">商品管理</a></li>
    </ul>

  </body>

</html>

Image from Gyazo

新規に management.html を作成し,sugitenフォルダに配置します. management.html には下記のコードを記述します. formタグを利用して,商品ID,商品名,価格,在庫数を入力するためのテキストフィールドと, データ送信のためのボタンを配置しています. ボタンをクリックすると,これらの情報をCGIのプログラムである insert.py に送信する設定になっています.

<!DOCTYPE html>

<html>

  <head>
    <meta charset="utf-8">
    <title>商品管理</title>
  </head>

  <body>

    <h1>商品管理</h1>

    <form method="post" target="_blank" action="cgi-bin/insert.py">
      <p>id: <input type="text" name="id" size="20"></p>
      <p>name: <input type="text" name="name" size="20"></p>
      <p>price: <input type="text" name="price" size="20"></p>
      <p>stock: <input type="text" name="stock" size="20"></p>      
      <p><input type="submit" value="追加"></p>
    </form>    

  </body>

</html>

Image from Gyazo

商品情報の更新と追加

商品情報の更新と追加の機能を insert.py に実装します. 新規に insert.py を作成し,cgi-binフォルダに配置します(実行権限の付与が必要). insert.py には下記のコードを記述します. フォームから送信された商品ID,商品名,価格,在庫数を受け取っています. SELECT文を利用して,受け取った商品IDに一致するレコードを検索しています. 一致するレコードが存在すれば商品情報の更新, 存在しなければ商品情報の追加となります. 商品IDに応じて表示される文字列が変化することを確認しましょう.

#!/usr/bin/env python

import sqlite3
import cgi

# フォームの取得
form = cgi.FieldStorage()

form_id = form["id"].value
form_name = form["name"].value
form_price = form["price"].value
form_stock = form["stock"].value

print ("Content-type:text/html\n\n")

print("<!DOCTYPE html>")
print("<html>")

print("<head>")
print("<meta charset='utf-8'>")
print("<title>商品情報</title>")
print("</head>")

print("<body>")
print("<h1>商品情報</h1>");

# データベースに接続
con = sqlite3.connect('sugiten.db')

# カーソルを取得
cur = con.cursor()

# レコードの有無の確認
sql = "SELECT * FROM Items WHERE id='" + form_id + "';"
records = cur.execute(sql)
record = records.fetchone()

if record == None:
    print("<p>追加に成功しました</p>")    
else:
    print("<p>更新に成功しました</p>")


# 商品情報を取得
records = cur.execute("SELECT * FROM Items;")

# 商品情報を表示
table = "<table border=`1``>"
table += "<tr>"
table += "<th>id</th>"
table += "<th>name</th>"
table += "<th>price</th>"
table += "<th>stock</th>"
table += "</tr>"

for record in records:
    table += "<tr>"
    for column in record:
        table += "<td>"
        table += str(column)
        table += "</td>"
    table += "</tr>"    
table += "</table>"
print(table)

print("<p><a href='#' onclick='window.close()'>閉じる</a></p>")

# データベースの更新の確定
con.commit()

# データベースを切断
con.close()

print("</body>")

print("</html>")

Image from Gyazo

Image from Gyazo

商品の更新・追加は INSERT OR REPLACE文を利用します. このクエリは,対象のレコードが存在すれば更新, 存在しなければ追加となるように自動的に判断してくれます. 例えば,商品IDがi07のスマートウォッチを入力すると 追加 となり, 商品IDがi01のマウスを入力すると 更新 となります. これで椙天市場のウェブサイトは完成です.

# レコードの追加
sql = "INSERT OR REPLACE INTO Items VALUES('" + form_id + "', '" + form_name + "', " + form_price + ", " + form_stock + ");"
cur.execute(sql)

Image from Gyazo

Image from Gyazo

Image from Gyazo

参考書籍