|
| |
▼こんな感じの掲示板を作ってみましょう！
| １． それでは、ドレスファイル(HTML)を作りましょう。 |
▼ファイル名は自由ですが今回は「dress.htm」としますね。 サンプルHTMLの表示
基本ペ｜ジ構成 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>なんでも掲示板</title>
</head>
<body bgcolor="#99CC00">
<div align="center">
<p><br>
なんでも掲示板</p>
</div><!--cut--> ←※１
入力フォ｜ム <table border="0" align="center" cellpadding="3" cellspacing="1" bordercolor="#000000">
<tr bgcolor="#669900">
<td width="21%" nowrap bgcolor="#CC0000"><font color="#FFFFFF">名前 </font></td>
<td bgcolor="#FFFFFF"> <input name="f_name_YYNNNN000050" type="text" size="30" title="お名前">
</td>
</tr>
<tr bgcolor="#FFFFFF">
<td nowrap bgcolor="#CC0000"><font color="#FFFFFF">コメント</font></td>
<td><textarea name="f_comment_YNNNYN001000" cols="30" rows="5" title="コメント"></textarea></td>
</tr>
<tr bgcolor="#996600">
<td colspan="2" nowrap> <div align="center">
<input name="submit" type=submit value=登録します>
<input name="reset" type=reset value=クリア>
</div></td>
</tr>
</table><!--cut--> ←※２
ログ表示部 <br>
<table width="30%" border="0" align="center" cellpadding="5" cellspacing="0">
<tr>
<td bgcolor="#CC3300"><font color="#000000"><b>#name</B></font></td>
</tr>
<tr>
<td bgcolor="#CC6600"><font color="#000000">#comment</font></td>
</tr>
<tr>
<td bgcolor="#CC9900"> <div align="right">No.#no [#date<!--mm/dd(w) h:nn-->]#del</div></td>
</tr>
</table><!--cut--> ←※３
フッタ｜部 <div align="center">
<br>
<!--admin--><br><br>
<table width="300" border="0" cellpadding="2" cellspacing="0">
<tr bgcolor="#000000" align="center">
<td> <table width="100%" border="0" cellpadding="2" cellspacing="0">
<tr bgcolor="#DEEC5E">
<td align="center"><a href="http://tackysroom.com/">HOME</a></td>
</tr>
<tr bgcolor="#DEEC5E">
<td align="center"><a href="http://tackysroom.com/">Osaresan by Tacky's Room</font></a></td>
</tr>
</table></td>
</tr>
</table>
</div>
</body>
</html>
| ２． ドレスファイル(HTML)の説明 |
■※１の<!--cut-->から上の部分
これが掲示板のページ基本構成となります。
背景色とか背景画像とかを記述します。■※１の<!--cut-->から※２の<!--cut-->迄の部分
『入力フォーム』のデザインをして下さい。
※<FORM>タグは記述しないで下さい。
■※２の<!--cut-->から※３の<!--cut-->迄の部分
『ログ表示部』のデザインをして下さい。
ここでデザインしたイメージで、ログが表示されます。入力フォームから投稿されたデータを表示するには、
"＃"＋入力フォームのオブジェクト（テキストボックス・チェックボックス・テキストエリア等）に
付けた《名前》 で記述する事によってその場所にログに書き込まれた内容が表示されます。▼特殊フィールド
- 「#no」と記述すると、そこには記事番号が表示されます
- 「#date<!--日付表示形式-->」と記述すると、そこには投稿日付及び時間が表示されます
- 「#del」と記述すると、そこには記事削除用のチェックボックスが表示されます
■※３の<!--cut-->から下の部分
これが掲示板のフッター（脚書き）定義となります。
※ログ表示部で、記事の削除「#del」を記述した場合（記事の削除を行う場合
（普通はしますね）は、 必ず【フッター】 領域に<!--admin-->という記述をして下さい。
<!--admin-->の位置に『削除ボタン』と、画面スクロール用（前画面・次画面）ボタンが
表示されます。その他、おされさんの著作権表記もお忘れなく。m(_ _)m
| ３． 『おされさん』CGIソースの修正をしましょう ※基本的な設定箇所のみ説明します |
１個作ってしまえば、基本的には『青文字』の部分しか修正必要はないのです！
▼Perlのパスを修正
#!/usr/local/bin/perl▼日本語コード変換ライブラリ
require './jcode.pl';
▼CGIライブラリー
require './cgi-lib.pl';▼CGIスクリプト名
$script = './osaresan00.cgi';
▼ログファイル名を指定 ※パス(./とか)は指定しないで下さい
$logfile = 'osaresan.txt';▼初期画面用ファイルを指定（必要な場合のみ）
※今回の例題では必要ないので、''とします。
$top_html = '';
▼ドレス（スキン）ファイルを指定
$main_html = 'dress.htm';
▼一覧画面用ファイルを指定（必要な場合のみ）
※今回の例題では必要ないので、''とします。
$list_html = '';
▼投稿後に表示するファイルを指定（必要な場合のみ）
※今回の例題では必要ないので、''とします。
$after_html = '';
| ４． ほれ、『おされさん』が出来ましたよ！ |
『おされさん』は出来るだけ自由にカスタマイズ出来るCGIですが、
それを実現する為に、HTML記述に制約等がありカスタマイズが最初は簡単ではありません。
そこで、『おされさん』に慣れる迄はまず簡単な掲示板を作って
徐々に項目を増やしたりデザインをうんと凝ったりしてみて
あなたの理想の掲示板に近い姿に"おされ"してやって下さい。
設置のポイント
▼ドレスファイルの<!--cut-->の位置をちゃんと覚える事 １．メインファイル($mail_htmlで指定するファイル）の場合
・ヘッダー部
・<!--cut-->
・入力フォーム
・<!--cut-->
・ログ表示部
・<!--cut-->
・フッター部
２．一覧ファイル($list_htmで指定するファイル）の場合
・ログ表示部（繰り返しログを表示する部分）より上に表示される部分
・<!--cut-->
・ログ表示部（繰り返しログを表示する部分）
・<!--cut-->
・ログ表示部（繰り返しログを表示する部分）より下に表示される部分
▼入力フォームとログ表示部のコントロール名が合っている事 入力フォームのコントロール名は"f_"＋コントロール名＋"_オプション"であるが、
ログ表示部の名前は"#"＋コントロール名である。