はじめに
今回は、記事で描かれた絵に対するコメントを書き込んだり、表示したりする機能を実装します。いよいよデータベースにデータを挿入（INSERT INTO）するSQL文を使います。
前回に引き続き「css/mobile.css」「css/pc.css」「js/main.js」「pages/about.py」「pages/etc.py」「pages/home.py」「.htaccess」「bezierbbs.db」「index.py」の各ファイルが存在することを前提に話を進めます。今回も、これらのファイルにコードを追記してプログラミングしていきます。
コメントページを用意する
まずはテンプレートのみのコメントページを作成します。これまでと違い、ランダムに記事の絵を表示するのではなく、選択した記事の絵だけを表示するページです。まずは次の図のように、絵が表示されていない空のページを作成します。
「pages」→「comment.py」ファイルをコーディングする
それでは、コメントページ（pages/comment.py）を次のサンプルコードのようにコーディングします。print文の末尾にある.format(title,xy,title,speaker,date,sentence)によって、出力するHTML内の波括弧{}へ左から順番に各変数の値が渡されます。
def html(form,con,cur):
title = "タイトル"
xy = ""
speaker = ""
date = ""
sentence = ""
print('''
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>{} - 一筆書きBBS</title>
<link href="css/pc.css" rel="stylesheet" type="text/css" />
<link href="css/mobile.css" rel="stylesheet" type="text/css" media="only screen and (max-width:1023px)" />
<script type="text/javascript" src="js/main.js"></script>
</head>
<body>
<script>loadPos("{}");</script>
<div id="left">
<header>
<h1>{}</h1>
<nav>
<a href="?page=home">HOME</a>
<a href="?page=draw">DRAW</a>
<a href="?page=about">ABOUT</a>
</nav>
</header>
<ul>
<li>{}<br />{}<br />{}</li>
</ul>
<h2>コメント</h2>
'''.format(title,xy,title,speaker,date,sentence))
「index.py」ファイルをコーディングする
次のサンプルコードのようにindex.pyファイルをコーディングしたら、XAMPPのローカルサーバを起動して、Webブラウザでindex.pyを実行します。macOSやLinuxの場合は、index.pyに実行権限のパーミッションを与える必要があります。
index.pyの後半（サンプルコードの(中略)以降のprint文）で、comment.pyが出力したHTML5文書の続きが出力されます。実際にWebブラウザにどのようなHTML5文書が送られたかは、Webブラウザの「ページのソース」などのメニューで確認できます。
#!C:\Users\ユーザー名\AppData\Local\Programs\Python\Python312\python.exe
import cgi
import sys
import io
import sqlite3
import pages.comment as comment
import pages.about as about
import pages.home as home
#日本語があってもエラーにならないように
sys.stdout = io.TextIOWrapper(sys.stdout.buffer, encoding='utf-8')
form = cgi.FieldStorage()
page = form.getfirst('page', '')
con = sqlite3.connect('bezierbbs.db')
cur = con.cursor()
print('Content-Type: text/html; charset=utf-8\n\n')
if page == 'comment':
comment.html(form,con,cur)
elif page == 'about':
about.html(cur)
else:
home.html(form,cur)
cur.close()
con.close()
print('''
(中略)
''')
サンプルコードの解説
シェバン （#!C:\...の部分）はご自分のユーザー名にしてください。またmacOSやLinuxでは「#!/usr/local/bin/python3.12」などになります。
「pages」→「comment.py」を「comment」モジュールとして（as）読み込みます。
UTF-8で日本語に対応します。
「FieldStorage」関数と「getfirst」メソッドで「GET」した「page」パラメータを取得します。
「bezierbbs.db」ファイルを読み込むところは前回と同じでコネクトしてカーソルを取得します。
これから送信するデータがHTML文書であることを（Webブラウザに）明示します。
GETしたURLのpageパラメータ次第でimportしたcommentモジュールや「about」モジュールや「home」モジュールの「html」関数を呼び出します。
データベースを閉じます。
HTML5文書の残りを出力します。
コラム「スモールステップ」
プログラミングを仕事にしていると気分が落ち込む人が多いと聞きます。落ち込んだ時はスモールステップ、つまり一歩ずつ積み重ねることが大切です。最低限できること、たとえば1行でもコードを書いて、「今日何もできなかった…」と考えるより「少しでも前進して自分は偉い！」と自己肯定するといいかもしれません。
