|
|
| 改造の手引き |
- このコーナーでは、フリーで公開されているCGIスクリプトをご自分の好みのデザインに変更したり、
CGIそのものに機能を追加してカスタマイズする方法を学習します。
ほとんどがHTMLタグや、Javaスクリプト、スタイルシートをCGIに組み込む方法をご紹介します。
| | リンク、ボタンを画像に変更する |
 |
- 通常、文字にリンクを付ける場合はアンカータグを使用しますが、
アンカータグでは大して文字を飾ることができません。
また、フォームには必ずと言っていいほどボタンが有ります。このボタンもまた味もそっけもありません。
そこでこれらを画像にしてみましょう。
- アンカータグをボタンに変更
print "<a href=bbs.cgi>次のページ</a>\n";
のようなタグは、
print "<input type=button value=次のページ onclick=\"location=\'bbs.cgi\'\">\n";
と書くことでフォームのボタンに変更できます。
- アンカータグを画像に変更する
画像を使用してリンクを付ける場合は、
print "<a href=bbs.cgi><img src=bbs.gif border=0></a>\n";
と書きますが、もっと簡単に
print "<img src=bbs.gif onclick=\"location=\'bbs.cgi\'\">\n";
と書くこともできます。
- フォームのsubmitボタンを画像にする
フォームには必ずと言っていいほどsubmitボタンが有ります。
print "<input type=submit value=送信する>\n";
このボタンも画像に変更できます。
print "<input type=image border=0 src=submit.gif>\n";
このように書くこともできますが、Javaを使用して
print "<img src=submit.gif onclick=\"submit();\">\n";
とする事もできます。このJavaを使用すれば、リセットも作成できます。
print "<img src=reset.gif onclick=\"reset();\">\n";
またJavaを使用すると、1ページに複数のフォームが有る場合でも、フォームを指定して送信できます。
print "<img src=bbs.gif onclick=\"form1.submit();\">\n";
ここで気をつけなければならないのは、Javaのsubmit();で送信された場合は、そのボタンのプロパティは送信されません。
|
| | 項目を追加する |
|
- フリーで公開されているCGIにない項目を追加する事もできます。
たとえば、当サイトで公開している「掲示板」と言う名の掲示板ではE-Mailを記入する項目さえ無いシンプルな物です。
この掲示板にも少し厄介ですが、E-Mailの項目を追加できます。
- フォームに項目を追加する
何はともあれ、フォームに項目が無い事には記入することができません。
この掲示板のフォームはサブルーチン「sub editform」で定義されています。
sub editform {
my($editcode) = @_;
my($year, $month, $day) = split(/\//, $birthday);
print "<input type=hidden name=action value=regist>\n";
print "<input type=hidden name=editcode value=$editcode>\n";
print "<table border=1 cellspacing=0 cellpadding=2>\n";
print "<td align=center>性別</td>\n";
print "<td>";
if ($sex) {
print "<input type=radio name=sex value=0>男性\n";
print "<input type=radio checked name=sex value=1>女性\n";
} else {
print "<input type=radio checked name=sex value=0>男性\n";
print "<input type=radio name=sex value=1>女性\n";
}
print "</td></tr>\n";
print "<tr><td align=center>$DOWN[0]</td>\n";
print "<td><select name=down size=1>\n";
foreach (1 .. @DOWN-1) {
if ($down == $_) { $selected = ' selected'; }
else { $selected = ''; }
print "<option$selected value=$_>$DOWN[$_]</option>\n";
}
print "</select></td></tr>\n";
print "<tr><td align=center>氏名</td>\n";
print "<td><input type=text size=24 name=name value=\"$name\">\n";
print "パスワード<input type=password name=pass value=\"$pass\">
\n";
print "変更訂正や、削除時にはパスワードが必要です。</td></tr>\n";
print "<tr><td align=center>E-Mail</td>\n";
print "<td><input type=text size=24 name=email value=\"$email\"></td></tr>\n";
print "<tr><td align=center valign=top>コメント</td>\n";
print "<td><textarea name=comment cols=60 rows=12>$comment</textarea></td></tr>\n";
print "</table>\n";
print "<input type=submit name=regist value=以上の内容で投稿する>\n";
if ($editcode) {
print "<input type=submit name=delete value=この記事を削除する>\n";
}
}
|
|
赤字で書かれた部分が追加されたコードです。
これだけでE-Mailのフィールドは追加されました。
- 保存フィールドの追加
フォームに項目を追加するだけでは入力することができてもCGIが入力されたデータを保存することができません。
そこで、ファイルに保存するフィールドを追加してフォーマットを整えます。
「掲示板」では、新しい記事を保存する場合と、変更訂正された場合のフォーマットでは異なりますので、
それぞれ設定する必要があります。まずは、新規登録時のフォーマットです。
$value = join("\t",
"code=$newcode",
"date=$DATE",
"sex=$QUERY{'sex'}",
"down=$QUERY{'down'}",
"name=$QUERY{'name'}",
"pass=$QUERY{'pass'}",
"email=$QUERY{'email'}",
"comment=$QUERY{'comment'}",
"\n"
););
|
|
上記赤字の行が追加されたメールアドレスのフィールドです。
同様に、変更訂正された場合のフォーマットへもフィールドを追加してください。
$line = join("\t",
"code=$FIELD{'code'}",
"date=$FIELD{'date'}",
"sex=$QUERY{'sex'}",
"down=$QUERY{'down'}",
"name=$QUERY{'name'}",
"pass=$QUERY{'pass'}",
"email=$QUERY{'email'}",
"comment=$QUERY{'comment'}",
"\n"
);
|
|
- メールアドレスの表示
ここまでで、メールアドレスを記入して保存することは可能になりました。
後は、このメールアドレスをどう使うかです。ここでは、記事のタイトルに表示してみましょう。
投稿記事は、メインルーチンの最後のセクションです。
foreach ($pline .. $page_end) {
if ($i != 1) { print "<br>\n"; }
%FIELD = fields($MATCH[$_]);
&boxtop($tablewidth);
print "<table border=0 cellspacing=0 cellpadding=2 width=100%>\n";
print "<td bgcolor=$bg><input type=radio name=code value=$FIELD{'code'}></td>\n";
print "<td bgcolor=$bg>$FIELD{'name'}</td>\n";
print "<td bgcolor=$bg>$DOWN[$FIELD{'down'}]</td>\n";
print "<td bgcolor=$bg>";
if ($FIELD{'sex'}) { print "女性"; } else { print "男性"; }
print "<td bgcolor=$bg>";
if ($FIELD{'email'} =~ /[\w-]+\@[\w\.\-]*/) {
print "<a href=mailto:$FIELD{'email'}>$FIELD{'email'}</a>";
}
print "</td>\n";
print "<td bgcolor=$bg align=right>", jst_time($FIELD{'date'}), "</td></tr>\n";
$FIELD{'comment'} =~ s/\r/<br>/g;
$FIELD{'comment'} =~ s/ / /g;
print "<td></td><td colspan=5>$FIELD{'comment'}</td></tr>\n";
print "</table>\n";
&boxbottom();
$i++;
}
|
|
- 変更訂正時のプロンプト
これで、入力されたメールアドレスはファイルに保存され、メールアドレスが記入されている記事は、
記事一覧にもリンク付きで表示できるようになりました。
通常の掲示板では、これで完成なのですが、この「掲示板」には、投稿者と、管理者が変更訂正できる機能が有ります。
変更訂正が指定されると、変更訂正する記事を読み込み、
予めフィールドにプロンプト文としてセットしておかなければなりません。
} elsif ($QUERY{'action'} eq 'edit') {
@DUMMY = grep(/^code=$QUERY{'code'}\t/, @DATA);
if (@DUMMY) {
%FIELD = fields($DUMMY[0]);
if (($FIELD{'pass'} && $QUERY{'pass'} eq $FIELD{'pass'}) || $password eq $QUERY{'pw'}) {
$sex = $FIELD{'sex'};
$down = $FIELD{'down'};
$name = $FIELD{'name'};
$pass = $FIELD{'pass'};
$email = $FIELD{'email'};
$comment = $FIELD{'comment'};
|
|
これで、完成です。こちらに完成品が有りますので、ご自分のものと比較してみてください。
表示が文字化けしている場合は、ブラウザの[表示]-[エンコード]-[日本語自動選択]を選択してください。
|
|
|
|
