簡単な写真日記システムの作成

CREATE TABLE blog(datetime UNIQUE, body, filename, filecontent);

本文と添付画像の入力フォーム

<form method="POST" enctype="multipart/form-data" action="./storeblog.cgi">
<p>一言:</p>
<textarea name="hitokoto" cols="40" rows="3">
</textarea>
<p><label>添付ファイル:<input name="attach" type="file"></label></p>
<p><input type="submit" value="投稿">
<input type="reset" value="リセット"></p>
</form>

REPLACE INTO blog VALUES(
 日時, 'あいうえお', 'bar.jpg', bar.jpgの中味
);

INSERT INTO テーブル1 副問い合わせ;

SELECT CASE name WHEN 'hitokoto' THEN val END,
       CASE name WHEN 'attach' THEN filename END,
       CASE name WHEN 'attach' THEN val END
FROM cgipars
WHERE tag='tag_B';

SELECT max(CASE name WHEN 'hitokoto' THEN val END),
       max(CASE name WHEN 'attach' THEN filename END),
       max(CASE name WHEN 'attach' THEN val END)
FROM cgipars
WHERE tag='tag_B'
GROUP BY tag;

REPLACE INTO blog
 SELECT 日時の文字列,
	max(CASE name WHEN 'hitokoto' THEN val END),
        max(CASE name WHEN 'attach' THEN filename END),
        max(CASE name WHEN 'attach' THEN val END)
 FROM cgipars
 WHERE tag=抽出するtagの値
 GROUP BY tag;

storeblog.cgi

#!/bin/sh
cd `dirname $0`
. ./cgilib2-sh

htmlhead "一言+写真の登録"

cat<<EOF
<form method="POST" enctype="multipart/form-data" action="./storeblog.cgi">
<p>一言:</p>
<textarea name="hitokoto" cols="40" rows="3"></textarea>
<p><label>添付ファイル:<input name="attach" type="file"></label></p>
<p><input type="submit" value="投稿">
<input type="reset" value="リセット"></p>
</form>
EOF

hitokoto=`getpar hitokoto`
if [ -n "$hitokoto" ]; then
  date=`date "+%F %T"`		# キーとなる日時は自動設定する
  query<<-EOF
	REPLACE INTO blog
	 SELECT '$date',
		max(CASE name WHEN 'hitokoto' THEN val END),
		max(CASE name WHEN 'attach' THEN filename END),
		max(CASE name WHEN 'attach' THEN val END)
	 FROM cgipars
	 WHERE tag='$_tag'
	 GROUP BY tag;
	EOF
  echo "<p>$date の日記として登録しました</p>"
fi

echo "</body></html>"

<a href="bar.jpgを出すためのURL">bar.jpg</a>

SELECT datetime, body, filename FROM blog WHERE datetime='2015-11-01 21:22:23';

SELECT '1:' || datetime "日時",
       '2:' || body "一言",
       '3:' || filename '添付ファイル'
FROM blog WHERE datetime='2015-11-01 21:22:23';

... | sed -e 's,<TD>[12]:,<TD>,' \
	  -e 's,<TD>3:\(.*\)</TD>,<TD><a href="URL">\1</a></TD>,'

Content-type: image/jpeg
Content-Disposition: filename="photo.jpg"
Content-Length: 123456

バイナリデータ...

catfoo.cgi

#!/bin/sh
PATH=/usr/local/sqlite3/bin:$PATH
binfile=./tmp/binary-data
cd `dirname $0`				# スクリプトと同じディレクトリに移動
unhexize() {
  perl -n -e 's/([0-9a-f]{2})/print chr hex $1/gie'
}
sqlite3 tmp/binary.sq3 <<EOF | unhexize > $binfile	# 画像を一時ファイルに書き出す
SELECT quote(filecontent) FROM bin WHERE filename='foo.jpg';
EOF

cat<<EOF
Content-type: `file --mime-type $binfile | cut -d' ' -f2`
Content-Disposition: filename="foo.jpg"
Content-length: `wc -c < $binfile`

EOF
cat $binfile
rm -f $binfile

miniblog1.cgi

#!/bin/sh
cd `dirname $0`			# スクリプトのあるディレクトリへ
. ./cgilib2-sh
myname=`basename $0`

query "CREATE TABLE IF NOT EXISTS blog(
	datetime UNIQUE, body, filename, filecontent);"

#【1】
case "$1" in 	# miniblog1.cgi catfile/《rowid》で起動するとその行の画像を出力
  catfile/*)
    rowid=`echo "${1#catfile/}" | tr -cd '[0-9]'`	# 数字以外は除去
    from="FROM blog WHERE rowid=$rowid"			# FROM句以下を変数に
    echo -n "Content-type: "	# 中味を調べて Content-type ヘッダ出力
    query "SELECT hex(filecontent) $from" | unhexize \
	| file --mime-type - | cut -d' ' -f2
    fn=`query "SELECT filename $from;"| tr -d '\n'`	# 改行あれば除去
    echo "Content-Disposition: filename=\"$fn\""	# ファイル名と長さ出力
    query "SELECT 'Content-Length: ' || length(filecontent) $from;"
    echo ""
    query "SELECT hex(filecontent) $from" | unhexize	# 画像を書き出して終了
    exit ;;
esac

htmlhead "一言日記"		# ヘッダから h1 要素まで出力(cgilib2内)

putform() {			# HTTPヘッダから入力フォームHTMLまで出力
  cat<<-EOF
	<form action="$myname" method="POST" enctype="multipart/form-data">
	 <label>ファイルを添付してください:
	  <input type="file" name="attach"></label><br>一言:<br>
	 <textarea name="hitokoto" rows="3" cols="40"></textarea>
	 <input type="submit" value="POST">
	 <input type="reset" value="Reset">
	</form>
	EOF
}

addnew() {
  if [ -n "$CONTENT_LENGTH" ]; then # データが送信された場合の登録処理
    now=`date '+%F %T'`		    # datetime は現在時刻から自動生成
    query<<-EOF
	REPLACE INTO blog
	  /* (日時, 一言, ファイル名, ファイル内容) を合成して挿入 */
	  SELECT '$now', 
		 max(CASE name WHEN 'hitokoto' THEN val END),
		 max(CASE name WHEN 'attach' THEN filename END),
		 max(CASE name WHEN 'attach' THEN val END)
	  FROM cgipars
	  WHERE tag='$_tag'
	  GROUP BY tag;
	EOF
  fi
}

putblog() {			# 既存のエントリをtableで出力
  href="<TD><a href=\"$myname?catfile/\\1\">\\2</a><"	#【2】
  echo '<table border="1">'
  query<<-EOF  \
      | sed -e "s,<TD>[12]:,<TD>," \
	    -e "s,<TD>3:\([0-9]*\):\(.*\)<,$href,"	#【2】
	.mode html
	.header ON
	SELECT	'1:' || datetime '日時',
		'2:' || body '一言',
		CASE WHEN filename IS NOT NULL THEN '3:'
		  || rowid || ":" || filename
		ELSE ''			-- filenameが非NULLのときのみ出力
		END '添付ファイル'
	FROM blog;
	EOF
  echo '</table>'
}

putform				# ヘッダと入力フォームを出力
addnew				# 新規レコードの登録
putblog				# データ更新後の登録エントリを出力
echo '</body></html>'

<a href="miniblog1.cgi?catfile/rowid">ファイル名</a>

query "SELECT body FROM blog WHERE datetime='$datetime';"

getcol() {			# HTMLモードでescapeしてもらう
  escape "`query \"SELECT $1 FROM blog WHERE datetime='$2';\"`"
}

hitokoto=`getcol body "$editkey"`

#!/bin/sh
cd `dirname $0`
. ./cgilib2-sh
myname=`basename $0`

query "CREATE TABLE IF NOT EXISTS blog(
	datetime UNIQUE, body, filename, filecontent);"

case "$1" in
  catfile/*)	# miniblog2.cgi catfile/《rowid》で起動するとその行の画像を出力
    rowid=`echo "${1#catfile/}" | tr -cd '[0-9]'`	# 数字以外は除去
    from="FROM blog WHERE rowid=$rowid"			# FROM句以下を変数に
    echo -n "Content-type: "	# 中味を調べて Content-type ヘッダ出力
    query "SELECT hex(filecontent) $from" | unhexize \
	| file --mime-type - | cut -d' ' -f2
    fn=`query "SELECT filename $from;"| tr -d '\n'`	# 改行あれば除去
    echo "Content-Disposition: filename=\"$fn\""	# ファイル名と長さ出力
    query "SELECT 'Content-Length: ' || length(filecontent) $from;"
    echo ""
    query "SELECT hex(filecontent) $from" | unhexize # 画像を書き出して終了
    exit ;;
  edit/*)	# miniblog2.cgi edit/《日時》で起動すると修正フォーム出力
    editkey=`echo ${1#edit/}|pdecode` ;;	# pdecode不要なhttpdもある
esac

# $1に指定したカラムを$2の日付キーから得る関数
getcol() {			# HTMLエスケープしてから返す
  escape "`query \"SELECT $1 FROM blog WHERE datetime='$2';\"`"
}
putform() {			# HTTPヘッダから入力フォームHTMLまで出力
  title="一言日記"
  if [ -n "$editkey" ]; then
    datetime=`getcol datetime "$editkey"`	# 実在するキーか?
    if [ -n "$datetime" ]; then
      hitokoto=`getcol body "$editkey"`	# 既存のbodyカラム値を得る
      hidden="<p><input type=\"hidden\" name=\"datetime\"
	value=\"$datetime\">
	<input id=\"rm\" type=\"checkbox\" name=\"remove\" value=\"yes\">
	<label for=\"rm\">このエントリの削除</label>
	<span class=\"confirm\">ほんとうに消してよいですか:
	<label><input type=\"checkbox\" name=\"confirm\" value=\"yes\">はい
	</label></span></p>"
      title="$datetime の一言の修正"
    fi
  fi
  htmlhead "$title"		# ヘッダから h1 要素まで出力(cgilib2内)
  cat<<-EOF
	<form action="$myname" method="POST" enctype="multipart/form-data">
	 ${datetime:+$hidden}	<!-- 有効な日付指定のみ $edit 出力 -->
	 <label>ファイルを添付してください:
	  <input type="file" name="attach"></label><br>一言:<br>
	 <textarea name="hitokoto" rows="3" cols="40">$hitokoto</textarea>
	 <input type="submit" value="POST">
	 <input type="reset" value="Reset">
	</form>
	EOF
}

addnew() {
  if [ -n "$CONTENT_LENGTH" ]; then	# データが送信された場合の登録処理
    dt=`getpar datetime`		# datetimeの値がある場合は既存行の更新
    # 実在する datetime か値自身を引直して確認する
    [ -n "$dt" ] && \
	dt=`query "SELECT datetime from blog WHERE datetime='$dt';"`
    if [ x`getpar remove``getpar confirm` = x"yesyes" ]; then
      # 「削除」と確認の「はい」両方にチェックの場合
      query "DELETE FROM blog WHERE datetime='$dt';"
    else
      [ -n "$dt" ] && now=$dt || now=`date '+%F %T'`
      query<<-EOF
	REPLACE INTO blog
	  /* (日時, 一言, ファイル名, ファイル内容) を合成して挿入 */
	  SELECT '$now',
		 max(CASE name WHEN 'hitokoto' THEN val END),
		 max(CASE name WHEN 'attach' THEN filename END),
		 max(CASE name WHEN 'attach' THEN val END)
	  FROM cgipars
	  WHERE tag='$_tag'
	  GROUP BY tag;
	EOF
    fi
  fi
}

putblog() {			# 既存のエントリをtableで出力
  href1="<TD><a href=\"$myname?edit/\\1\">\\2</a><"
  href2="<TD><a href=\"$myname?catfile/\\1\">\\2</a><"
  echo '<table border="1">'
  query<<-EOF  \
      | sed -e "s,<TD>1:\(\([-0-9 :]*\):[0-9]*\)<,$href1," \
	    -e "s,<TD>2:,<TD>," \
	    -e "s,<TD>3:\([0-9]*\):\(.*\)<,$href2,"
	.mode html
	.header ON
	SELECT	'1:' || datetime '日時',
		'2:' || body '一言',
		CASE
		WHEN filename IS NOT NULL
		THEN '3:' || rowid || ":" || filename
		ELSE ''		-- filenameが非NULLのときのみ出力
		END '添付ファイル'
	FROM blog;
	EOF
  echo '</table>'
}

putform				# ヘッダと入力フォームを出力
addnew				# 新規レコードの登録
[ -n "$editkey" ] || putblog	# データ更新後の登録エントリを出力
echo '</body></html>'

mycgi.css

/*
 * CSS for my CGI shell script library
 */
span.confirm {		/* 完全透明、不可視、背景色は明るい赤 */
    opacity: 0; visibility: hidden; background: #fcc;
}
input:checked ~ span.confirm { /* チェック付ボタンと同階層の span.confirm */
    visibility: visible;	  /* 可視化したうえで */
    opacity: 1.0; transition: 3s; /* 透明解除、3秒掛ける */
}
p.login {text-align: right;}	/* ログイン画面ではテキスト右寄せで */
body.authok {background: #ffd;}	/* 認証完了後の背景色を変える */

<input id="rm" type="checkbox" name="remove" value="yes">
<label for="rm">このエントリの削除</label>
<span class="confirm">ほんとうに消してよいですか:
<label><input type="checkbox" name="confirm" value="yes">はい</label></span>

  if [ x`getpar remove``getpar confirm` = x"yesyes" ]; then

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>グリコ単語帳</title>
<style type="text/css">
<!--
span.hide {visibility: hidden;}
input[type="radio"]:checked ~ span.hide {visibility: visible;}
-->
</style>
</head>
<body>
<h1>グリコ単語帳</h1>
<ul>
 <li><input name="gcp" type="radio">グー
     <span class="hide">「グリコ」と言って3段進む</span></li>
 <li><input name="gcp" type="radio">チョキ
     <span class="hide">「チヨコレイト」と言って6段進む</span></li>
 <li><input name="gcp" type="radio">パー
     <span class="hide">「パイナツプル」と言って6段進む</span></li>
</ul>
</body></html>

E F { スタイル }

<ul class="tango">
 <li>... <span>...</span></li>
</ul>

ul.tango span {visibility: hidden;}
ul.tango input[type="radio"]:checked span {visibility: visible;}

<ul class="tango">
 <li><input name="gcp" type="radio">グー
     <span>「グリコ」と言って3段進む</span></li>
 <li><input name="gcp" type="radio">チョキ
     <span>「チヨコレイト」と言って6段進む</span></li>
 <li><input name="gcp" type="radio">パー
     <span>「パイナツプル」と言って6段進む</span></li>
</ul>