|
すべてのソースリスト [表示]
[非表示]
5.1 簡単なBBS(タイプ1)
・データベースの作成
・記事入力フォームの表示
・データの受信
・入力フォームを記述したファイルと受信処理をするファイルを一つのファイルにまとめる
・改行コードの改行タグへの変換
・表によるレイアウト
・投稿日時の取得
・記事番号の生成
・記事データのテーブルへの保存
・一般的な記事表示形式
・記事本文表示処理の関数化
・ブラウザから送信されるデータのチェック
・入力データの再表示
・スタイルシート(CSS)の利用
・スタイルシートを、HTMLファイル内のタグ要素に、style属性の値として組み込む方法(@の方法)
・スタイルシートを、styleタグ要素の内容として組み込む方法(Aの方法)
・スタイルシートの書かれたファイル(CSSファイル)を読み込む方法 (Bの方法)
・記事の一覧をページ単位で表示する
・セキュリティ対策等のための文字列変換
・記事検索
5.1 簡単なBBS(タイプ1)
簡単な電子掲示板(BBS:Bulletin Board System)を作成することにより、以下のWebアプリケーションの基礎技術を習得します。
・フォームによるデータの送信
・サーバによるデータの受信
・受信したデータのデータベースへの保存
・データベースのデータの一覧表示
・データベースのデータの検索表示
■データベースの作成
BBSの記事は、もっとも基本的な以下の5項目のみを含む簡単なものとします。これをタイプ1BBSと呼ぶこととします。
| フィールド名 |
型 |
長さ |
説明 |
備考 |
| message_id |
INTEGER |
|
記事番号 |
主キー:自動入力 |
| name |
CHAR |
64 |
投稿者氏名 |
ブラウザから入力 |
| title |
VARCHAR |
255 |
タイトル |
ブラウザから入力 |
| message |
TEXT |
|
記事本文 |
ブラウザから入力 |
| date |
DATETIME |
|
投稿日時 |
自動入力 |
データベース名を「db_bbs」とすします。上記のテーブル名を「tbl_bbs1」とします。
テーブル作成用のSQL文は次のようになります。
CREATE TABLE tbl_bbs1
(
message_id INTEGER,
name CHAR(64),
title VARCHAR(255),
message TEXT,
date DATETIME,
PRIMARY KEY(message_id)
);
以下、「db_bbs」データベースおよび「tbl_bbs1」テーブルは、コマンドクライアントmysqlか、GUIのphpMyAdminで作成してあるものとします。
■記事入力フォームの表示
ブラウザからは、BBSの1件の記事につき、「氏名」、「タイトル」および「記事」をフォームオブジェクト(<form>タグ)により入力することとします。POSTメソッドを使い、「送信」ボタンを押すとこれらの入力データをサーバ側の「main01.html」ファイルに送信することとします。TEXT要素の場合は、「type="text"」属性は省略可能です。
<input type="text" name="名前">は、<input
name="名前">と省略可能
各要素に初期値を設定しない場合は、「value="値"」属性は省略可能です。
<input name="名前"> :初期値を設定しない場合
<input name="名前" value="値"> :初期値を設定する場合
サンプルリストを「main01.html」に示します。
main01.html
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8"
>
<title>BBS1</title>
</head>
<body>
BBS1<br>
<form method="post" action="main01.php">
氏名<input name="name" size="30"><br>
タイトル<input name="title" size="60"><br>
記事<textarea name="message" rows="5" cols="60"></textarea><br>
<input type=submit name="command" value="送信"><br>
</form>
</body>
</html>
アクセスした結果、以下のように表示されます。

■データの受信
ブラウザからのデータはPOSTメソッドで、「meia01.phpファイルに送信されるので、POSTメソッドで受信します。
<input name="名前" value="値">
の入力フォームで、POSTメソッドで送信されたデータの値は、
$_POST_['名前']
で受信する。 $_POST[ ]は、PHPで定義されたスーパグローバル変数と呼ばれる連想配列です。
PHPでは、POSTメソッドで入力フォームの値を送信すると、入力フォームのname属性の値をそのまま変数として使用できるようにする環境設定方法もあります。
(例) <input name="message">の場合、受信側ファイル(action属性で指定されたファイル)では、
変数$messageが自動的に定義され、$message変数に自動的に入力フォームで入力した値が
受信され代入される。
ただ、環境設定が定かでないない場合もありますので、できるだけ$_POST['名前']を使って、明示的に変数を定義し、データを受信することを勧めます。
(例) <input name="message">の場合、
$message = $_POST['message'] ;
とします。受信する側の変数名は自由に定義できますので、
$str = $_POST['message'] ;
のように変更することもできます。
このような送信されてきた値の受信処理は、静的なHTMLファイルでは実行できないので、ここではPHP言語スクリプト(以下PHPと呼ぶ)を使うこととします。
PHPのスクリプト(ソースプログラム)は、HTMLファイルの中に簡単に混在して記述することが可能です。
HTMLの記述からPHPのスクリプトに移る場合は、「<?PHP」の文字列を使います。これをデリミタといいます。逆にPHPのスクリプトからHTMLのスクリプトに移るには、「?>」の文字列を使います。
HTMLファイル内にPHPのスクリプトを記述した場合は、拡張子はもはや「.html」でなく、「.php」に変更する必要があります。
文字列中に変数の値を挿入したい場合は、変数名を「{ }」で囲みます。かつ文字列全体を「"」(ダブルクオーテーション)で囲む必要があります。「'」(シングルクオーテーション)で囲むと、変数名の値が評価されて挿入されるのではなく、変数名がそのまま挿入されますから、十分注意が必要です。
「main01.php」ファイルでは、POSTメソッドで受信したデータを、確認のためにブラウザに表示するようにしています。
main01.php
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8"
>
<title>BBS1</title>
</head>
<body>
<?php
// データの受信
$str_name = $_POST['name'];
$str_title = $_POST['title'];
$str_message = $_POST['message'];
// 受信データの表示(仮)
print " 氏名:[{$str_name}]<br>\n";
print "タイトル:[{$str_title}]<br>\n";
print " 記事:[{$str_message}]<br>\n";
?>
</body>
</html>
「main01.html」ファイルにたとえば、以下のように文字を記入します。

「送信」ボタンをクリックすると、結果は次のようになります。

■入力フォームを記述したファイルと受信処理をするファイルを一つのファイルにまとめる
上記の例では、入力フォームをブラウザに表示しデータをサーバに送信するファイルmain01.htmlと、ブラウザから送信されてえきたデータを受信し、受信データを表示するファイルmain01.phpを別々のファイルとしていました。
・データ入力
・データ送信 |
============>
データの送信
(POSTメソッド) |
・データ受信
・データ表示 |
双方のファイルで処理する内容が大きく異なる場合は、このようにファイルを別々にすることは、設計方法として自然なのですが、双方のファイルで類似の処理をするような場合は、双方のファイルをまとめて一つのファイルにしておいた方が効率がいい場合もあります。
たとえば、この後説明するように、受信したデータをブラウザに一覧表示しながら、同じ画面でさらに新たにデータを入力するような場合などです。
ここでは、main01.htmlファイルとmain01.phpファイルを一つのファイルmain01a.phpにまとめて処理する場合のスクリプトの記述法について示します。
・データ入力
・データ送信 |
============>
データの送信
(POSTメソッド)
|
・データ受信
・データ表示
|
一般に、一つのファイルで異なる処理を実行する場合は、一連の処理の流れをいくつかの「状態」に分けて、「状態」ごとに条件分岐してそれぞれの処理を実行するようにします。
ここでは、「状態」は大きく二つあります。つまり、ファイルに最初にアクセスした状態と、「送信」ボタンを押した後の状態です。これをどう識別するかが、スクリプトの設計上重要になりますが、上記の例では「送信」ボタンが押された状態では、$_POST['command']に「送信」という文字列が代入されおり、「送信」ボタンが押されていない最初の状態では、$_POST['command']の値は空(null)です。
したがって、スクリプトの流れとしては、概略以下のようにすればいいことがわかります。
○$_POST['command']の値が「送信」の場合
・データの受信処
・受信データの表示
・入力フォームの表示
・データ入力
・データ送信
○$_POST['command']の値が「空」の場合
・入力フォームの表示
・データ入力
・データ送信
これをif文で記述すると次のようになります。
if($_POST['command'] == "送信")
{
・データの受信処
・受信データの表示
・入力フォームの表示
・データ入力
・データ送信
}
elseif( $_POST['command'] == "")
{
・入力フォームの表示
・データ入力
・データ送信
}
ただ、よくみると、・入力フォームの表示、 ・データ入力、 ・データ送信 の処理は両方の「状態」にあるので、簡略化して以下のように記述できます。
if($_POST['command'] == "送信")
{
・データの受信処
・受信データの表示
}
・入力フォームの表示
・データ入力
・データ送信
以上のような、スクリプトの設計の考え方にもとづいた、ソースリストの例を「main01a.php」に示します。
読みやすく、デバグのしやすいプログラムを記述するためには、特に以下を心がけます。
・「{」ごとに字下げ(インデント)を行う。階層的な記述をこころがける。1回の字下げは2〜4文字くらい。
・主な処理単位ごとに、コメント行を挿入し、どのような処理をしているかわかるようにする。
・空白行を挿入し、わかりやすくする。
・文字列型変数には、「str_」の接頭辞をつけて、数値型変数など他の型の変数と区別する。
main01a.php
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8"
>
<title>BBS1</title>
</head>
<body>
<?php
// 「送信」の場合
if($_POST['command'] == "送信")
{
// データの受信
$str_name = $_POST['name'];
$str_title = $_POST['title'];
$str_message = $_POST['message'];
// 受信データの表示(仮)
print " 氏名:[{$str_name}]<br>\n";
print "タイトル:[{$str_title}]<br>\n";
print " 記事:[{$str_message}]<br>\n";
}
?>
BBS1<br>
<form method="post" action="main01a.php">
氏名<input name="name" size="30"><br>
タイトル<input name="title" size="60"><br>
記事<textarea name="message" rows="5" cols="60"></textarea><br>
<input type=submit name="command" value="送信"><br>
</form>
</body>
</html>
main01a.phpファイルにアクセスし、上記と同じ内容を記入し「送信」ボタンをクリックすると、以下のように表示されます。

■改行コードの改行タグへの変換
「main01a.php」ファイルにアクセスした結果のブラウザ画面をみると、TEXTAREA要素に記述した「改行」が正しく反映されていないことがわかります。本来3行に分けて表示されるべきところが、1行にまとめて表示されています。
これは、TEXTAREA要素内での改行コードは「\r\n」(Windowsの場合)であるのに対して、print文で出力される先のHTMLファイル内での改行は「<br>」タグつまり改行タグにより実行されることによります。つまり、HTMLファイル内では改行コード「\r\n」は無視されてしまいます。
したがって、TEXTAREA要素内の文字列をHTMLファイル内に表示する場合は、改行コード「\r\n」を改行タグ「<br>」に変換する必要があります。これは、PHPの組み込み関数「preg_replace()」関数で実行することができます。
変換後全体文字列 = preg_replace(置換対象文字列、置換後文字列
、変換対象全文字列)
置換対象文字列は、Perl互換正規表現文字列で記述。
サンプルリストを「main01b.php」に示します。
<form>タグ内で、「action='ファイル名'」属性を省略することができます。この場合、ファイル名は自分自身のファイル名とみなされます。
以下、、「action='ファイル名'」属性は省略することとします。
PHPには改行コードを改行タグに変換する組み込み関数「nl2br()」関数があります。ただし、「nl2br()」関数の場合は、改行コードはそのまま残されるの注意が必要です。
main01b.php[表示] [非表示]
main01b.php
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8"
>
<title>BBS1</title>
</head>
<body>
<?php
// 「送信」の場合
if($_POST['command'] == "送信")
{
// データの受信
$str_name = $_POST['name'];
$str_title = $_POST['title'];
$str_message = $_POST['message'];
// 改行コードを改行タグに変換
$str_message
= preg_replace( "/(\r\n|\r|\n)/", "<br />",
$str_message);
// データの表示(仮)
print " 氏名:[{$str_name}]<br>\n";
print "タイトル:[{$str_title}]<br>\n";
print " 記事:[{$str_message}]<br>\n";
?>
BBS1<br>
<form method="post">
氏名<input name="name" size="30"><br>
タイトル<input name="title" size="60"><br>
記事<textarea name="message" rows="5" cols="60"></textarea><br>
<input type=submit name="command" value="送信"><br>
</form>
</body>
</html>
「main01b.php」ファイルにアクセスし、上記と同じ内容を記入し、「送信」ボタンをクリックした結果は、以下のようになります。改行されているのがわかります。
■表によるレイアウト
「main01b.php」ファイルにアクセスした結果は、改行はされるのですが、改行後の左端が揃っていません。
そこで、文字列の表示をテーブル(表)タグを使って、きれいに表示することとします。これを表によるレイアウトといいます。
表によるレイアウトで、表の罫線をみせたくない場合は、「tableタグ」の「bordeer」属性の値を「0」(ゼロ)に設定します。
サンプルリストを「main01c.php」に示します。ここでは受信データの表示と、入力フォームの表示の双方に表によるレイアウトを使用しています。
main01c.php[表示]
[非表示]
main01c.php
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8"
>
<title>BBS1</title>
</head>
<body>
<?php
// 「送信」の場合
if($_POST['command'] == "送信")
{
// データの受信
$str_name = $_POST['name'];
$str_title = $_POST['title'];
$str_message = $_POST['message'];
// 改行コードを改行タグに変換
$str_message
= preg_replace( "/(\r\n|\r|\n)/", "<br />",
$str_message);
// 受信データの表示(仮)
?>
<p align=center>
<table border="1"
cellpadding="3" cellspacing="0">
<tr>
<td>氏名</td><td><?=$str_name?></td>
</tr>
<tr>
<td>タイトル</td><td><?=$str_title?></td>
</tr>
<tr>
<td>記事</td><td><?=$str_message?></td>
</tr>
</table>
</p>
<?php
}
?>
<p align=center>
<table border="0">
<form method="post">
<tr>
<td> </td><td>BBS1</td>
</tr>
<tr>
<td>氏名</td><td><input name="name" size="30"></td>
</tr>
<tr>
<td>タイトル</td><td><input name="title"
size="60"></td>
</tr>
<tr>
<td>記事</td>
<td><textarea name="message" rows="5"
cols="60"></textarea></td>
</tr>
<tr>
<td> </td><td><input type=submit name="command"
value="送信"></td>
</tr>
</form>
</table>
</p>
</body>
</html>
「main01c.php」ファイルにアクセスし上記と同じ内容を記入し、「送信」ボタンをクリックした結果は、以下のようになります。「記事」欄がきれいに改行され表示されています。

■投稿日時の取得
投稿日時は、システム側で取得します。PHPの組み込み関数の「date()」関数と「time()」関数を使います。
$str_date = date("Y-m-d
H:i:s",time())
結果は「2006-11-23 13:45:00」のような文字列になります。
■記事番号の生成
投稿記事の番号(記事番号)は、tbl_bbs1テーブルのmessage_idフィールドに保存することとします。新しい記事番号は、既存の記事番号の最大値+1とすることとします。
そこで、message_idフィールドの最大値を、変数「max_id」に保存する次のようなSQL文を実行します。
"select max(message_id)
as max_id from tbl_bbs1;"
この変数「max_id」の値は、SQL文を実行した後のレコードセットの連想配列の「max_id」というキー値をもつ配列要素の値として参照することができます。
記事が全くない状態では、この最大値はnullなので、初期値を「1」に設定します。
■記事データのテーブルへの保存
以上で、一つの記事についてtbl_bbs1テーブルに保存するすべてのフィールドの値が確定するので、SQLのinsert文を用いてテーブルにデータを保存します。
"insert into tbl_bbs1
"
. "(message_id,name,title,message,date)"
. "values("
. $new_id . ",'" . $str_name . "','"
. $str_title . "','" . $str_message . "','"
. $str_date . "');";
文字列の場合は、変数を「'」で囲む必要があります。
以上、投稿日時の取得、記事番号の生成および記事データの保存を実行するサンプルリストを「main01e.php」に示します。
なお、レイアウトの表の幅を、みやすいように「width」属性で指定しています。また、表全体もブラウザの中央にくるように、pタグのスタイル属性でセンタリングしています。
main01e.php[表示]
[非表示]
main01e.php
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8"
>
<title>BBS1</title>
</head>
<body>
<?php
// 「送信」の場合
if($_POST['command'] == "送信")
{
// データの受信
$str_name = $_POST['name'];
$str_title = $_POST['title'];
$str_message = $_POST['message'];
// 改行コードを改行タグに変換
$str_message = preg_replace( "/(\r\n|\r|\n)/", "<br
/>", $str_message);
// 現在日時の取得
$str_date = date("Y-m-d H:i:s",time());
// 「message_id」の生成
// データベースへの接続
$db = mysql_connect('localhost','webapl','pass1234');
// データベースの選択
$db_name = "db_bbs";
mysql_select_db($db_name,$db) or die("データベースがありません");
// tbl_bbs1テーブルのmessage_idの最大値の取得
$str_sql
= "select max(message_id) as max_id from tbl_bbs1;";
$rs = mysql_query($str_sql,$db);
$arr_record = array();
$arr_record = mysql_fetch_assoc($rs);
$max_id = $arr_record['max_id'];
if($max_id > 0)
{
$new_id = $max_id + 1;
}
else
{
$new_id = 1;
}
// データのテーブルへの保存
$str_sql = "insert into tbl_bbs1 "
. "(message_id,name,title,message,date)"
. "values("
. $new_id . ",'" . $str_name . "','"
. $str_title . "','" . $str_message . "','"
. $str_date . "');";
mysql_query($str_sql,$db);
// テーブルのデータの一覧取得
$str_sql = "select * from tbl_bbs1 order by message_id desc;";
$rs = mysql_query($str_sql,$db);
// データの表示
while($arr_record = mysql_fetch_assoc($rs))
{
$message_id = $arr_record['message_id'];
$str_name = $arr_record['name'];
$str_title = $arr_record['title'];
$str_message = $arr_record['message'];
$str_date = $arr_record['date'];
?>
<p align=center>
<table border="1" cellpadding="3" cellspacing="0"
width="500">
<tr>
<td width="60">No.</td><td width="440"><?=$message_id?></td>
</tr>
<tr>
<td>氏名</td><td><?=$str_name?></td>
</tr>
<tr>
<td>タイトル</td><td><?=$str_title?></td>
</tr>
<tr>
<td>記事</td><td><?=$str_message?></td>
</tr>
<tr>
<td>日時</td><td><?=$str_date?></td>
</tr>
</table>
</p>
<br>
<?php
}
//結果セットを破棄し、接続を閉じる
mysql_free_result($rs);
$db = mysql_close($db);
}
?>
<p align=center>
<table border="0">
<form method="post">
<tr>
<td> </td><td>BBS1</td>
</tr>
<tr>
<td>氏名</td><td><input name="name" size="30"></td>
</tr>
<tr>
<td>タイトル</td><td><input name="title"
size="60"></td>
</tr>
<tr>
<td>記事</td>
<td><textarea name="message" rows="5"
cols="60"></textarea></td>
</tr>
<tr>
<td> </td>
<td><input type=submit name="command" value="送信"></td>
</tr>
</form>
</table>
</p>
</body>
</html>
「main01e.php」ファイルへのアクセス結果を以下に示します。 フォームに記入し、送信したデータが正常にデータベースに保存され、確認のために表示したデータが正常に表示されているのがわかります。記事番号(No.欄)と日時も正常に表示されています。

■一般的な記事表示形式
記事本文の表示形式を、以下のような一般的な表示形式に変更します。
この場合は、表によるレイアウトを下記サンプルのように変更します。
<table border="1" cellpadding="3"
cellspacing="0" width="600">
<tr>
<td >No.<?=$message_id?> <?=$str_title?> [<?=$str_name?>] <?=$str_date?></td>
</tr>
<tr>
<td><?=$str_message?></td>
</tr>
</table>
■記事本文表示処理の関数化
記事本文の表示はこの後、検索結果記事本文の表示等いろんな場面で使います。そこで、記事本文の表示処理のための関数を「message_disp()」関数として作成しておき、利用することとします。
なお、1個の記事に関するデータは、あらかじめ以下の連想配列$arr_messageに保存されているものとします。
| $arr_message[id''] |
:記事番号 |
| $arr_message['title'] |
:タイトル |
| $arr_message['name'] |
:氏名 |
| $arr_message['date'] |
:日時 |
| $arr_message[message'] |
:本文 |
「message_disp()」関数のサンプルリストを以下に示します。
// 1個の記事本文の表示
function message_disp(&$arr_message)
{
/*
$arr_message['id'] :記事番号
$arr_message['name'] :投稿者氏名
$arr_message['title'] :記事タイトル
$arr_message['message'] :記事本文
$arr_message['date'] :投稿日時
*/
?>
<table border="1" cellpadding="3" cellspacing="0"
width="600">
<tr>
<td>No.<?=$arr_message['id']?> <?=$arr_message['title']?>
[<?=$arr_message['name']?>] <?=$str_date?></td>
</tr>
<tr>
<td><?=$arr_message['message']?></td>
</tr>
</table>
<?php
}
「message_disp()」関数を使用した場合の全体のサンプルリストを「mein01f.php」に示します。
main01f.php[表示]
[非表示]
main01f.php
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8"
>
<title>BBS1</title>
</head>
<body>
<?php
// 「送信」の場合
if($_POST['command'] == "送信")
{
// データの受信
$str_name = $_POST['name'];
$str_title = $_POST['title'];
$str_message = $_POST['message'];
// 改行コードを改行タグに変換
$str_message = preg_replace( "/(\r\n|\r|\n)/", "<br
/>", $str_message);
// 現在日時の取得
$str_date = date("Y-m-d H:i:s",time());
// 「message_id」の生成
// データベースへの接続
$db = mysql_connect('localhost','webapl','pass1234');
// データベースの選択
$db_name = "db_bbs";
mysql_select_db($db_name,$db) or die("データベースがありません");
// tbl_bbs1テーブルのmessage_idの最大値の取得
$str_sql
= "select max(message_id) as max_id from tbl_bbs1;";
$rs = mysql_query($str_sql,$db);
$arr_record = array();
$arr_record = mysql_fetch_assoc($rs);
$max_id = $arr_record['max_id'];
if($max_id > 0)
{
$new_id = $max_id + 1;
}
else
{
$new_id = 1;
}
// データのテーブルへの保存
$str_sql = "insert into tbl_bbs1 "
. "(message_id,name,title,message,date)"
. "values("
. $new_id . ",'" . $str_name . "','"
. $str_title . "','" . $str_message . "','"
. $str_date . "');";
mysql_query($str_sql,$db);
// テーブルのデータの一覧取得
$str_sql = "select * from tbl_bbs1 order by message_id desc;";
$rs = mysql_query($str_sql,$db);
// データの表示
print "<p align=center>";
while($arr_record = mysql_fetch_assoc($rs))
{
// 記事データの配列への格納
$arr_message = array();
$arr_message['id'] = $arr_record['message_id'];
$arr_message['name'] = $arr_record['name'];
$arr_message['title'] = $arr_record['title'];
$arr_message['message'] = $arr_record['message'];
$arr_message['date'] = $arr_record['date'];
// 1個の記事本文の表示
message_disp($arr_message);
}
print "</p>";
//結果セットを破棄し、接続を閉じる
mysql_free_result($rs);
$db = mysql_close($db);
}
?>
<p align=center>
<table border="0">
<form method="post">
<tr>
<td> </td><td>BBS1</td>
</tr>
<tr>
<td>氏名</td><td><input name="name" size="30"></td>
</tr>
<tr>
<td>タイトル</td><td><input name="title"
size="60"></td>
</tr>
<tr>
<td>記事</td>
<td><textarea name="message" rows="5"
cols="60"></textarea></td>
</tr>
<tr>
<td> </td><td><input type=submit name="command"
value="送信"></td>
</tr>
</form>
</table>
</p>
</body>
</html>
<?php
// ユーザ定義関数
// -----------------------------------------------
// 1個の記事本文の表示
function message_disp(&$arr_message)
{
/*
$arr_message['id'] :記事番号
$arr_message['name'] :投稿者氏名
$arr_message['title'] :記事タイトル
$arr_message['message'] :記事本文
$arr_message['date'] :投稿日時
*/
?>
<table border="1" cellpadding="3" cellspacing="0"
width="600">
<tr>
<td>No.<?=$arr_message['id']?> <?=$arr_message['title']?>
[<?=$arr_message['name']?>] <?=$arr_message['date']?></td>
</tr>
<tr>
<td><?=$arr_message['message']?></td>
</tr>
</table>
<?php
}
?>
main01f.phpで記事を送信した結果を以下に示します。記事がヘッダー部と本文に別れ、一般的な記事の形式に表示されています。
■ブラウザから送信されるデータのチェック
ブラウザの入力フォームから送信されるデータで、例えば氏名欄が空白の場合は、そのままデータベースに保存するのではなく、有効な文字列が入力されるまで再入力を促したい場合があります。
その場合は、入力データが「空」かどうかをチェックし、「空」でなければデータベースに保存し、「空」ならば再度入力フォームを表示するようにします。
ここでは、氏名、タイトル、本文のデータを順次「空」でないかどうかチェックすることとします。なお、データのチェックのために、「data_check()」関数を定義します。
「data_check()」関数では、データが正常であれば、戻り値は「空」とし、データが正常でなければ、戻り値はその旨を示すメッセージとします。たとえば、氏名が「空」ならば、「氏名を入力してください。」という文字列を戻り値とします。
「data_check()」関数のサンプルリストを以下に示します。
○関数の呼び出し部分
// 受信データが「空」でないかどうかチェック
$str_error_message = data_check($str_name,$str_title,$str_message);
if($str_error_message == "")
{
// 改行コードを改行タグに変換
$str_message = preg_replace( "/(\r\n|\r|\n)/", "<br
/>", $str_message);
データ保存処理
}
else
{
print "<font style='color:red'>{$str_error_message}</font><br>\n";
}
○関数の定義
// ----------------------------------------------
// 受信データのチェック
function data_check(&$str_name,&$str_title,&$str_message)
{
/*
$str_name :投稿者氏名
$str_title :記事タイトル
$str_message :記事本文
*/
// データの受信
$str_name = $_POST['name'];
$str_title = $_POST['title'];
$str_message = $_POST['message'];
// 文字列の前後の半角スペースを削除し、半角カタカナを全角カタカナに変換
$str_name = input_str_convert($str_name);
$str_title = input_str_convert($str_title);
$str_message = input_str_convert($str_message);
// 文字列が空かいなかのチェック
if($str_name == "")
{
$str = "氏名を記入してください";
}
elseif($str_title == "")
{
$str = "タイトルを記入してください";
}
elseif($str_message == "")
{
$str = "本文を記入してください";
}
return $str;
}
// ----------------------------------------------
// 入力文字列の整形処理
function input_str_convert($str)
{
if($str != "")
{
// 文字列の前後の半角スペースを削除
$str = trim($str);
// 半角カタカナを全角カタカナに変換
// V: 濁点付きの文字を1文字に変換
// K: 半角カタカナを全角カタカナに変換
$str = mb_convert_kana($str,'KV');
}
return $str;
}
「data_check()」関数では、さらに「input_str_convert()」関数を定義し、使っています。
「input_str_convert()」関数では、文字列の前後の半角スペースを削除し、かつ半角カタカナを全角カタカナに変換しています。
サンプルリストを「main01g.php」とします。
main01g.php[表示]
[非表示] ダウンロード
main01g.php
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8"
>
<title>BBS1</title>
</head>
<body>
<?php
// 「送信」の場合
if($_POST['command'] == "送信")
{
// 受信データが「空」でないかどうかチェック
$str_error_message = data_check($str_name,$str_title,$str_message);
if($str_error_message == "")
{
// 改行コードを改行タグに変換
$str_message = preg_replace( "/(\r\n|\r|\n)/", "<br
/>", $str_message);
// 現在日時の取得
$str_date = date("Y-m-d H:i:s",time());
// 「message_id」の生成
// データベースへの接続
$db = mysql_connect('localhost','webapl','pass1234');
// データベースの選択
$db_name = "db_bbs";
mysql_select_db($db_name,$db) or die("データベースがありません");
// tbl_bbs1テーブルのmessage_idの最大値の取得
$str_sql = "select max(message_id) as max_id from tbl_bbs1;";
$rs = mysql_query($str_sql,$db);
$arr_record = array();
$arr_record = mysql_fetch_assoc($rs);
$max_id = $arr_record['max_id'];
if($max_id > 0)
{
$new_id = $max_id + 1;
}
else
{
$new_id = 1;
}
// データのテーブルへの保存
$str_sql = "insert into tbl_bbs1 "
. "(message_id,name,title,message,date)"
. "values("
. $new_id. ",'" . $str_name . "','" . $str_title
. "','" . $str_message . "','" . $str_date
. "');";
mysql_query($str_sql,$db);
// テーブルのデータの一覧取得
$str_sql = "select * from tbl_bbs1 order by message_id desc;";
$rs = mysql_query($str_sql,$db);
// データの表示
print "<p align=center>";
while($arr_record = mysql_fetch_assoc($rs))
{
// 記事データの配列への格納
$arr_message = array();
$arr_message['id'] = $arr_record['message_id'];
$arr_message['name'] = $arr_record['name'];
$arr_message['title'] = $arr_record['title'];
$arr_message['message'] = $arr_record['message'];
$arr_message['date'] = $arr_record['date'];
// 1個の記事本文の表示
message_disp($arr_message);
}
print "</p>";
//結果セットを破棄し、接続を閉じる
mysql_free_result($rs);
$db = mysql_close($db);
}
else
{
print "<font style='color:red'>{$str_error_message}</font><br>\n";
}
}
?>
<p align=center>
<table border="0">
<form method="post">
<tr>
<td> </td><td>BBS1</td>
</tr>
<tr>
<td>氏名</td><td><input name="name" size="30"></td>
</tr>
<tr>
<td>タイトル</td><td><input name="title"
size="60"></td>
</tr>
<tr>
<td>記事</td>
<td><textarea name="message" rows="5"
cols="60"></textarea></td>
</tr>
<tr>
<td> </td><td><input type=submit name="command"
value="送信"></td>
</tr>
</form>
</table>
</p>
</body>
</html>
<?php
// ユーザ定義関数
// ----------------------------------------------
//
function data_check(&$str_name,&$str_title,&$str_message)
{
/*
$str_name :投稿者氏名
$str_title :記事タイトル
$str_message :記事本文
*/
// データの受信
$str_name = $_POST['name'];
$str_title = $_POST['title'];
$str_message = $_POST['message'];
// 文字列の前後の半角スペースを削除し、半角カタカナを全角カタカナに変換
$str_name = input_str_convert($str_name);
$str_title = input_str_convert($str_title);
$str_message = input_str_convert($str_message);
// 文字列が空かいなかのチェック
if($str_name == "")
{
$str = "氏名を記入してください";
}
elseif($str_title == "")
{
$str = "タイトルを記入してください";
}
elseif($str_message == "")
{
$str = "本文を記入してください";
}
return $str;
}
// ----------------------------------------------
// 入力文字列の整形処理
function input_str_convert($str)
{
if($str != "")
{
// 文字列の前後の半角スペースを削除
$str = trim($str);
// 半角カタカナを全角カタカナに変換
// V: 濁点付きの文字を1文字に変換
// K: 半角カタカナを全角カタカナに変換
$str = mb_convert_kana($str,'KV');
}
return $str;
}
// -----------------------------------------------
// 1個の記事本文の表示
function message_disp(&$arr_message)
{
/*
$arr_message['id'] :記事番号
$arr_message['name'] :投稿者氏名
$arr_message['title'] :記事タイトル
$arr_message['message'] :記事本文
$arr_message['date'] :投稿日時
*/
?>
<table border="1" cellpadding="3" cellspacing="0"
width="500">
<tr>
<td>No.<?=$arr_message['id']?> <?=$arr_message['title']?>
[<?=$arr_message['name']?>] <?=$arr_message['date']?></td>
</tr>
<tr>
<td><?=$arr_message['message']?></td>
</tr>
</table>
<?php
}
?>
■入力データの再表示
「main01g.php」ファイルの場合、入力データの一部に記入もれがあると、入力フォームを再表示します。ただ、その場合、入力フォームのすべての欄がリセットされ空白になっています。これでは、先に入力した正常の欄も再度、はじめから入力しなくてはならず、使い勝手がいいとはいえません。
そこで、入力フォームを再表示する場合、すでに入力した欄のデータはそのまま再表示するようにします。
入力フォームに入力したデータを再表示するには、@入力したデータをPOSTメソッドで次のファイル(ここでは自分自身のファイル)引き継ぐことと、A引き継いだデータを各入力フォームの初期値として表示するようにする必要があります。
実は、フォームオブジェクトの場合、各入力フォーム(各フォーム要素)の初期値を設定しておけば、「送信」ボタンを押せば自動的に入力データは、次のファイルに引き継がれます。
以上の入力フォームを表示するために、「input_form_disp()」関数を定義します。
「input_form_disp()」関数のサンプルリストを以下に示します。
○関数の呼び出し部分
データが正常に保存された場合は、次のように各データをリセットしておきます。
$str_name = "";
$str_title = "";
$str_message = "";
// 入力フォームの表示
input_form_disp($str_name,$str_title,$str_message);
○関数の定義部分
// ----------------------------------------------
// 入力フォームの表示
function input_form_disp(&$str_name,&$str_title,&$str_message)
{
/*
$str_name :投稿者氏名
$str_title :記事タイトル
$str_message :記事本文
*/
// 改行タグの改行コードへの変換
$str_message = preg_replace( "/(<br>|<br
\/>)/", "\n", $str_message);
?>
<table border="0">
<form method="post">
<tr>
<td> </td><td>BBS1</td>
</tr>
<tr>
<td>氏名</td><td><input name="name" size="60"
value="<?=$str_name?>"></td>
</tr>
<tr>
<td>タイトル</td><td><input name="title"
size="60"
value="<?=$str_title?>"></td>
</tr>
<tr>
<td>記事</td>
<td><textarea name="message"
rows="5" cols="60"><?=$str_message?></textarea></td>
</tr>
<tr>
<td> </td><td><input type=submit name="command"
value="送信"></td>
</tr>
</form>
</table>
<?php
}
<textarea>要素に文字列を表示するためには、次のように文字列中の改行タグを改行コードに変換しておく必要があります。
$str_message = preg_replace(
"/(<br>|<br \/>)/", "\n", $str_message)
サンプルリストを「main01h.php」とします。
main01h.php[表示]
[非表示] ダウンロード
main01h.php
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8"
>
<title>BBS1</title>
</head>
<body>
<?php
// 「送信」の場合
if($_POST['command'] == "送信")
{
// 受信データが「空」でないかどうかチェック
$str_error_message = data_check($str_name,$str_title,$str_message);
if($str_error_message == "")
{
// 改行コードを改行タグに変換
$str_message = preg_replace( "/(\r\n|\r|\n)/", "<br
/>", $str_message);
// 現在日時の取得
$str_date = date("Y-m-d H:i:s",time());
// 「message_id」の生成
// データベースへの接続
$db = mysql_connect('localhost','webapl','pass1234');
// データベースの選択
$db_name = "db_bbs";
mysql_select_db($db_name,$db) or die("データベースがありません");
// tbl_bbs1テーブルのmessage_idの最大値の取得
$str_sql = "select max(message_id) as max_id from tbl_bbs1;";
$rs = mysql_query($str_sql,$db);
$arr_record = array();
$arr_record = mysql_fetch_assoc($rs);
$max_id = $arr_record['max_id'];
if($max_id > 0)
{
$new_id = $max_id + 1;
}
else
{
$new_id = 1;
}
// データのテーブルへの保存
$str_sql = "insert into tbl_bbs1 "
. "(message_id,name,title,message,date)"
. "values("
. $new_id. ",'" . $str_name . "','" . $str_title
. "','" . $str_message . "','" . $str_date
. "');";
//print $str_sql;
mysql_query($str_sql,$db);
// データのリセット
$new_id = "";
$str_name = "";
$str_title = "";
$str_message = "";
$str_date = "";
// テーブルのデータの一覧取得
$str_sql = "select * from tbl_bbs1 order by message_id desc;";
$rs = mysql_query($str_sql,$db);
// データの表示(仮)
print "<p align=center>";
while($arr_record = mysql_fetch_assoc($rs))
{
// 記事データの配列への格納
$arr_message = array();
$arr_message['id'] = $arr_record['message_id'];
$arr_message['name'] = $arr_record['name'];
$arr_message['title'] = $arr_record['title'];
$arr_message['message'] = $arr_record['message'];
$arr_message['date'] = $arr_record['date'];
// 1個の記事本文の表示
message_disp($arr_message);
}
print "</p>";
//結果セットを破棄し、接続を閉じる
mysql_free_result($rs);
$db = mysql_close($db);
}
else
{
print "<p align=center>";
print "<font style='color:red'>{$str_error_message}</font><br>\n";
print "</p>";
}
}
print "<p align=center>";
// 入力フォームの表示
input_form_disp($str_name,$str_title,$str_message);
print "</p>";
?>
</body>
</html>
<?php
// ユーザ定義関数
// ----------------------------------------------
// 受信データのチェック
function data_check(&$str_name,&$str_title,&$str_message)
{
/*
$str_name :投稿者氏名
$str_title :記事タイトル
$str_message :記事本文
*/
// データの受信
$str_name = $_POST['name'];
$str_title = $_POST['title'];
$str_message = $_POST['message'];
// 改行コードを改行タグに変換
$str_message = preg_replace( "/(\r\n|\r|\n)/", "<br
/>", $str_message);
// 文字列の前後の半角スペースを削除し、半角カタカナを全角カタカナに変換
$str_name = input_str_convert($str_name);
$str_title = input_str_convert($str_title);
$str_message = input_str_convert($str_message);
// 文字列が空かいなかのチェック
if($str_name == "")
{
$str = "氏名を記入してください";
}
elseif($str_title == "")
{
$str = "タイトルを記入してください";
}
elseif($str_message == "")
{
$str = "本文を記入してください";
}
return $str;
}
// ----------------------------------------------
// 入力フォームの表示
function input_form_disp(&$str_name,&$str_title,&$str_message)
{
/*
$str_name :投稿者氏名
$str_title :記事タイトル
$str_message :記事本文
*/
// 改行タグの改行コードへの変換
$str_message = preg_replace( "/(<br>|<br \/>)/",
"\n", $str_message);
?>
<table border="0">
<form method="post">
<tr>
<td> </td><td>BBS1</td>
</tr>
<tr>
<td>氏名</td><td><input name="name" size="60"
value="<?=$str_name?>"></td>
</tr>
<tr>
<td>タイトル</td><td><input name="title"
size="60"
value="<?=$str_title?>"></td>
</tr>
<tr>
<td>記事</td>
<td><textarea name="message"
rows="5" cols="60"><?=$str_message?></textarea></td>
</tr>
<tr>
<td> </td><td><input type=submit name="command"
value="送信"></td>
</tr>
</form>
</table>
<?php
}
// ----------------------------------------------
// 入力文字列の整形処理
function input_str_convert($str)
{
if($str != "")
{
// 文字列の前後の半角スペースを削除
$str = trim($str);
// 半角カタカナを全角カタカナに変換
// V: 濁点付きの文字を1文字に変換
// K: 半角カタカナを全角カタカナに変換
$str = mb_convert_kana($str,'KV');
}
return $str;
}
// -----------------------------------------------
// 1個の記事本文の表示
function message_disp(&$arr_message)
{
/*
$arr_message['id'] :記事番号
$arr_message['name'] :投稿者氏名
$arr_message['title'] :記事タイトル
$arr_message['message'] :記事本文
$arr_message['date'] :投稿日時
*/
?>
<table border="1" cellpadding="3" cellspacing="0"
width="500">
<tr>
<td>No.<?=$arr_message['id']?> <?=$arr_message['title']?>
[<?=$arr_message['name']?>] <?=$arr_message['date']?></td>
</tr>
<tr>
<td><?=$arr_message['message']?></td>
</tr>
</table>
<?php
}
?>
「main01h.php」ファイルにアクセスし、たとえば氏名欄だけ書き忘れて空白のまま「送信」ボタンをクリックすると、下記のように警告メッセージが表示され、再度入力フォームが表示されます。入力フォームにはすでに記入したデータは再表示されています。
■スタイルシート(CSS)の利用
これまで、記事の表示等において、文字サイズや背景色等について特に工夫をしてきませんでした。
HTMLファイルにおいて、文字サイズや背景色を制御する方法には多様な方法がありますが、ここでは今後主流になりつつあるカスケードスタイルシート(CSS)を使用する方法について述べます。
たとえば、これまで記事は以下のように単純に表示していました。
| No.123 スタイルシートについて [山田] 2006-11-14 12:34:00 |
●スタイルシートの利用
HTMLファイルにおいて、文字サイズや背景色を制御する方法には多様な方法がありますが、ここでは今後主流になりつつあるカスケードスタイルシート(CSS)を使用する方法について述べます。
|
これをたとえば、次のようなスタイルで表示することを考えます。
| No.123 スタイルシートについて [山田] 2006-11-14
12:34:00 |
●スタイルシートの利用
HTMLファイルにおいて、文字サイズや背景色を制御する方法には多様な方法がありますが、ここでは今後主流になりつつあるカスケードスタイルシート(CSS)を使用する方法について述べます。
|
具体的には、各項目ごとに以下のスタイル(属性)を設定する必要があります。
| 要素 |
タグ |
属性 |
値 |
スタイルシート |
クラス名 |
| ブラウザ背景 |
<body> |
背景色 |
#ffff99 |
background-color:#ffff99 |
.b_ffff99 |
| テーブル |
<table> |
外枠の幅 |
1 |
border-width:1 |
|
| テーブル |
<table> |
外枠のタイプ |
solid |
border-type:solid |
|
| テーブル |
<table> |
外枠の色 |
黒 |
border-color:black |
|
| テーブル |
<table> |
パッディング |
3 |
padding:3 |
.padding3 |
| テーブル |
<table> |
セルとセルの間隔 |
0 |
border-spacing |
.bd_spacing0 |
| テーブル |
<table> |
幅 |
600 |
width:600 |
.w600 |
| ヘッダー行 |
<tr> |
背景色 |
#dcdcdc |
background-color:#dcdcdc |
.b_dcdcdc |
| ヘッダー行 |
<tr> |
文字サイズ |
x-small |
font-size:x-small |
.xs |
| 一部の文字列 |
<span> |
文字の太さ |
bold |
font-weight:bold |
.fbold |
| 一部の文字列 |
<span> |
文字の色 |
#696969 |
color:#696969 |
.696969 |
| 本文行 |
<tr> |
文字サイズ |
x-small |
font-size:x-small |
.xs |
クラス名は、スタイルシートの定義内容を示す略称のようなものです。具体的な使い方は後に述べます。
スタイルシートをHTMLに関連付ける方法として主に以下の3つの方法があります。
@HTMLファイル内のタグ要素に、style属性の値として組み込む方法
<タグ要素名 style="スタイルシート ; スタイルシート">
Astyleタグ要素の内容として組み込む方法。styleタグ要素は<head>〜</head>の範囲内に書き込む。
<head>
--------
<style type="text/css">
<!--
クラス名 { スタイルシート ; スタイルシート }
-->
</style>
</head>
styleタグ要素の中で、スタイルシートを記述し、その記述にたとえばスタイル名を付与します。あるタグ要素に、そのスタイル名に対応するスタイルシートを適用する場合は、以下のように、class属性を使用します。
<タグ要素名 class="クラス名 クラス名">
Bスタイルシートの書かれたファイル(CSSファイル)を読み込む方法。 linkタグ要素で読み込むファイルを指定する。
linkタグ要素は<head>〜</head>の範囲内に書き込む。CSSファイルの拡張子は「.css」とします。
<head>
--------
<link rel="stylesheet" href="CSSファイルのURL"
type="text/css">
--------
</head>
この方法は、Aの方法で、styleタグ要素の中に記述したクラス名等の定義を、CSSファイルに書き出したものと言えます。HTMLファイルの中での、スタイル名の利用法はAの場合と同じです。
なお、上記いずれの場合も、スタイルシートを記述する言語としてCSS(Cascading Style Seet)言語を使用する旨をmetaタグ要素により<head>〜</head>の範囲内に記述しておく必要があります。
<head>
------
<meta http-equiv="Content-Style-Type" content="text/css">
------
</head>
@〜Bの中で一番勧めるのは、Bの方法です。複数のHTMLファイルあるいはWebサイトでデザインの統一感を出すための実現方法としてもっとも効率的であり、修正・更新もすばやく効率的に行えるからです。
以下、先に示したスタイルで記事を表示するためのスタイルシートの記述方法を、@〜Bのおのおの場合について具体的に述べます。
■スタイルシートを、HTMLファイル内のタグ要素に、style属性の値として組み込む方法(@の方法)
スタイルシートを、HTMLファイル内のタグ要素に、style属性の値として組み込む方法による場合のサンプルリストを以下に示します。
<head>
------
<meta http-equiv="Content-Style-Type"
content="text/css">
------
</head>
<body style="background-color:#ffff99">
------
print "<p style='text-align:center'>";
-----
message_disp(&arr_message);
------
function message_disp(&$arr_message)
{
<table style="border-width:1 ;border-style:solid;
border-color:black
; padding:3 ; border-spacing:0
; border-collapse:collapse ; width:600">
<tr style="background-color:#dcdcdc
; font-size:x-small">
<td>No.<?=$arr_message['id']?> <?=$arr_message['title']?>
<span style="font-weight:bold">[<?=$arr_message['name']?>] </span>
<span style="color:#696969"><?=$arr_message['date']?></span></td>
</tr>
<tr style="background-color:white
; font-size:x-small">
<td><?=$arr_message['message']?></td>
</tr>
</table>
}
■スタイルシートを、styleタグ要素の内容として組み込む方法
スタイルシートを、styleタグ要素の内容として組み込む方法による場合のサンプルリストを以下に示します。
styleタグ要素の中で、スタイルシートとそれに対応するクラス名を順次定義していきます。スタイルシートを適用したいタグ要素の中で、class='クラス名'の属性を記述することにより、そのタグ要素にスタイルシートが適用されます。サンプルリストを以下に示します。
<head>
------
<meta http-equiv="Content-Style-Type"
content="text/css">
<style type="text/css">
<!--
.b_ffff99 { background-color : #ffff99;}
.b_dcdcdc { background-color : #dcdcdc;}
.b_w { background-color : white;}
.ac { text-align : center;}
.bd_w1 { border-width:1px;}
.bd_solid { border-style:solid;}
.bd_b { border-color: black;}
.padding3 { padding:3px}
.bd_spacing0 { border-spacing:0px}
.bd_collapse { border-collapse:collapse}
.w600 { width: 600px;}
.xs { font-size: x-small }
.fbold { font-weight: bold}
.696969 { color: #696969;}
-->
</style>
------
</head>
<body class="b_ffff99">
------
print "<p class=ac'>";
-----
message_disp(&arr_message);
------
function message_disp(&$arr_message)
{
<table class="bd_w1bd_solid bd_b padding3
bd_spacing0
bd_collapse w600">
<tr class="b_dcdcdc xs">
<td>No.<?=$arr_message['id']?> <?=$arr_message['title']?>
<span class="fbold">[<?=$arr_message['name']?>] </span>
<span class="696969"><?=$arr_message['date']?></span></td>
</tr>
<tr class="b_w xs">
<td><?=$arr_message['message']?></td>
</tr>
</table>
}
■スタイルシートの書かれたファイル(CSSファイル)を読み込む方法
クラス名とそれに対応するスタイルシートとの関係の記述を、別途CSSファイルとして切り離す方法のサンプルリストの概要を以下に示します。
<head>
------
<meta http-equiv="Content-Style-Type"
content="text/css">
<link rel="stylesheet" type="text/css"
href="common.css"> <--この行を追加
------
</head>
<body class="b_ffff99">
------
print "<p class=ac'>";
-----
message_disp(&arr_message);
------
function message_disp(&$arr_message)
{
<table class="bd_w1bd_solid bd_b padding3
bd_spacing0
bd_collapse w600">
<tr class="b_dcdcdc xs">
<td>No.<?=$arr_message['id']?> <?=$arr_message['title']?>
<span class="fbold">[<?=$arr_message['name']?>] </span>
<span class="696969"><?=$arr_message['date']?></span></td>
</tr>
<tr class="b_w xs">
<td><?=$arr_message['message']?></td>
</tr>
</table>
}
ある程汎用的なスタイルシートファイルを自分で作っておくといいでしょう。ここでは、例えば以下のような汎用的なスタイルシートcommon.cssを使用しています。
common.css ソースリスト [表示]
[非表示] ダウンロード(common_css.zip)
.xxs { font-size:
xx-small ;}
.xs { font-size: x-small }
.s { font-size: small }
.m { font-size: medium }
.l { font-size: large }
.xl { font-size: x-large }
.xxl { font-size: xx-large }
.smaller { font-size: smaller }
.larger { font-size: larger }
.fbold { font-weight: bold}
.underline { text-decoration: underline}
.p200 { font-size: 200% }
.aleft { text-align: left }
.aright { text-align: right }
.acenter { text-align: center}
.vtop { vertical-align: top; }
.vmiddle { vertical-align: middle; }
.al { text-align: left;}
.ac { text-align: center;}
.ar { text-align: right;}
.vtop_al {
vertical-align: top;
text-align: left;
}
.vtop_ac {
vertical-align: top;
text-align: center;
}
.vtop_ar {
vertical-align: top;
text-align: right;
}
.vmiddle_ac {
vertical-align: middle;
text-align: center;
}
.font_red {color: red;}
.font_black {color: black;}
.black {color: black;}
.red {color: red;}
.blue {color: blue;}
.green {color: green;}
.silver {color: silver;}
.yellow {color: yellow;}
.696969 {color: #696969;}
.ffccff {color: #ffccff;}
.ffcc99 {color: #ffcc99;}
.white {color: white;}
.padding0 {padding:0px}
.padding1 {padding:1px}
.padding2 {padding:2px}
.padding3 {padding:3px}
.padding4 {padding:4px}
.padding5 {padding:5px}
.padding6 {padding:6px}
.padding8 {padding:8px}
.padding10 {padding:10px}
.margin0 {margin:0px}
.margin1 {margin:1px}
.margin2 {margin:2px}
.margin3 {margin:3px}
.margin4 {margin:4px}
.margin5 {margin:5px}
.margin6 {margin:6px}
.margin8 {margin:8px}
.margin10 {margin:10px}
.bd_collapse {border-collapse:collapse}
.bd_separate {border-collapse:separate}
.bd_w0 {border-width:0px}
.bd_w1 {border-width:1px}
.bd_w2 {border-width:2px}
.bd_solid {border-style:solid}
.bd_spacing0 {border-spacing:0px}
.bd_spacing1 {border-spacing:1px}
.bd_spacing2 {border-spacing:2px}
.zenkaku {ime-mode: active;}
.hankaku {ime-mode: inactive;}
.float_left {float: left;}
.float_right {float: right;}
.clear_left {clear: left;}
.clear_right {clear: right;}
.warn { color: red;}
.w10 { width: 10px;}
.w16 { width: 16px;}
.w20 { width: 20px;}
.w24 { width: 24px;}
.w30 { width: 30px;}
.w40 { width: 40px;}
.w50 { width: 50px;}
.w60 { width: 60px;}
.w70 { width: 70px;}
.w80 { width: 80px;}
.w90 { width: 90px;}
.w100 { width: 100px;}
.w120 { width: 120px;}
.w140 { width: 140px;}
.w160 { width: 160px;}
.w180 { width: 180px;}
.w200 { width: 200px;}
.w250 { width: 250px;}
.w300 { width: 300px;}
.w400 { width: 400px;}
.w500 { width: 500px;}
.w600 { width: 600px;}
.w640 { width: 640px;}
.w10p { width: 10%;}
.w15p { width: 15%;}
.w50p { width: 50%;}
.w100p { width: 100%;}
.h10 { height: 10px;}
.h15 { height: 15px;}
.h20 { height: 20px;}
.b1 { border: solid 1px;}
.b2 { border: solid 2px;}
.b_w { background-color: white;}
.b_b { background-color: black;}
.b_gray { background-color: gray;}
.b_silver { background-color: #c0c0c0;}
.b_red { background-color: red;}
.b_yellow{ background-color: yellow;}
.b_sunday{ background-color: #ffcccc;}
.b_cccccc {background-color: #cccccc;}
.b_dcdcdc {background-color: #dcdcdc;}
.b_808080 {background-color: #808080;}
.b_696969 {background-color: #696969;}
.b_ccccff {background-color: #ccccff;}
.b_ccffcc {background-color: #ccffcc;}
.b_ffcccc {background-color: #ffcccc;}
.b_ccffff {background-color: #ccffff;}
.b_ffccff {background-color: #ffccff;}
.b_ffffcc {background-color: #ffffcc;}
.b_ccff99 {background-color: #ccff99;}
.b_99ccff {background-color: #99ccff;}
.b_ff99cc {background-color: #ff99cc;}
.b_99ffcc {background-color: #99ffcc;}
.b_cc99ff {background-color: #cc99ff;}
.b_ffcc99 {background-color: #ffcc99;}
.b_99ffff {background-color: #99ffff;}
.b_ff99ff {background-color: #ff99ff;}
.b_ffff99 {background-color: #ffff99;}
.b_ccff66 {background-color: #ccff66;}
.b_66ccff {background-color: #66ccff;}
.b_ff66cc {background-color: #ff66cc;}
.bd_b { border-color: black;}
.bd_gray { border-color: gray;}
.bd_red { border-color: red;}
.bd_top_gray { border-top:solid 1px;
border-top-color: gray;
}
.bd_bottom_gray { border-bottom:solid 1px;
border-bottom-color: gray;
}
.h_cal { height: 50}
.disp_block {display: block;}
.disp_inline {display: inline;}
.disp_none {display: none;}
.mark1 { padding-left:10px;
background-image:url(m1.gif);
background-repeat:no-repeat;
}
A:hover { color:red}
以上を反映したサンプルリストをmain01i.phpに示す。
main01i.phpソースリスト [表示]
[非表示] ダウンロード(main01i.zip)
main01i.php
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8"
>
<title>BBS1</title>
<meta http-equiv="Content-Style-Type"
content="text/css">
<link rel="stylesheet" type="text/css" href="common.css">
</head>
<body class="b_ffff99">
<?php
// 「送信」の場合
if($_POST['command'] == "送信")
{
// 受信データが「空」でないかどうかチェック
$str_error_message = data_check($str_name,$str_title,$str_message);
if($str_error_message == "")
{
// 改行コードを改行タグに変換
$str_message = preg_replace( "/(\r\n|\r|\n)/", "<br
/>", $str_message)
// 現在日時の取得
$str_date = date("Y-m-d H:i:s",time());
// 「message_id」の生成
// データベースへの接続
$db = mysql_connect('localhost','webapl','pass1234');
// データベースの選択
$db_name = "db_bbs";
mysql_select_db($db_name,$db) or die("データベースがありません");
// tbl_bbs1テーブルのmessage_idの最大値の取得
$str_sql = "select max(message_id) as max_id from tbl_bbs1;";
$rs = mysql_query($str_sql,$db);
$arr_record = array();
$arr_record = mysql_fetch_assoc($rs);
$max_id = $arr_record['max_id'];
if($max_id > 0)
{
$new_id = $max_id + 1;
}
else
{
$new_id = 1;
}
// データのテーブルへの保存
$str_sql = "insert into tbl_bbs1 "
. "(message_id,name,title,message,date)"
. "values("
. $new_id. ",'" . $str_name . "','" . $str_title
. "','" . $str_message . "','" . $str_date
. "');";
//print $str_sql;
mysql_query($str_sql,$db);
// データのリセット
$new_id = "";
$str_name = "";
$str_title = "";
$str_message = "";
$str_date = "";
// テーブルのデータの一覧取得
$str_sql = "select * from tbl_bbs1 order by message_id desc;";
$rs = mysql_query($str_sql,$db);
// データの表示
print "<p class='ac'>";
while($arr_record = mysql_fetch_assoc($rs))
{
// 記事データの配列への格納
$arr_message = array();
$arr_message['id'] = $arr_record['message_id'];
$arr_message['name'] = $arr_record['name'];
$arr_message['title'] = $arr_record['title'];
$arr_message['message'] = $arr_record['message'];
$arr_message['date'] = $arr_record['date'];
// 1個の記事本文の表示
message_disp($arr_message);
print "<br>\n";
}
print "</p>";
//結果セットを破棄し、接続を閉じる
mysql_free_result($rs);
$db = mysql_close($db);
}
else
{
print "<p class=ac>";
print "<font class='red'>{$str_error_message}</font><br>\n";
print "</p>";
}
}
print "<p class='ac'>";
// 入力フォームの表示
input_form_disp($str_name,$str_title,$str_message);
print "</p>";
?>
</body>
</html>
<?php
// ユーザ定義関数
// ----------------------------------------------
// 受信データのチェック
function data_check(&$str_name,&$str_title,&$str_message)
{
/*
$str_name :投稿者氏名
$str_title :記事タイトル
$str_message :記事本文
*/
// データの受信
$str_name = $_POST['name'];
$str_title = $_POST['title'];
$str_message = $_POST['message'];
// 文字列の前後の半角スペースを削除し、半角カタカナを全角カタカナに変換
$str_name = input_str_convert($str_name);
$str_title = input_str_convert($str_title);
$str_message = input_str_convert($str_message);
// 文字列が空かいなかのチェック
if($str_name == "")
{
$str = "氏名を記入してください";
}
elseif($str_title == "")
{
$str = "タイトルを記入してください";
}
elseif($str_message == "")
{
$str = "本文を記入してください";
}
return $str;
}
// ----------------------------------------------
// 入力フォームの表示
function input_form_disp(&$str_name,&$str_title,&$str_message)
{
/*
$str_name :投稿者氏名
$str_title :記事タイトル
$str_message :記事本文
*/
// 改行タグの改行コードへの変換
$str_message = preg_replace( "/(<br>|<br \/>)/",
"\n", $str_message);
?>
<table border="0">
<form method="post">
<tr>
<td> </td><td>BBS1</td>
</tr>
<tr>
<td>氏名</td><td><input name="name" size="60"
value="<?=$str_name?>"></td>
</tr>
<tr>
<td>タイトル</td><td><input name="title"
size="60"
value="<?=$str_title?>"></td>
</tr>
<tr>
<td>記事</td>
<td><textarea name="message"
rows="5" cols="60"><?=$str_message?></textarea></td>
</tr>
<tr>
<td> </td><td><input type=submit name="command"
value="送信"></td>
</tr>
</form>
</table>
<?php
}
// ----------------------------------------------
// 入力文字列の整形処理
function input_str_convert($str)
{
if($str != "")
{
// 文字列の前後の半角スペースを削除
$str = trim($str);
// 半角カタカナを全角カタカナに変換
// V: 濁点付きの文字を1文字に変換
// K: 半角カタカナを全角カタカナに変換
$str = mb_convert_kana($str,'KV');
}
return $str;
}
「main01i.php」ファイルにより記事を送信した例を以下に示します。スタイルシートによりデザインされています。

■記事の一覧をページ単位で表示する
これまでのサンプルリストでは、すべての記事を一覧表示していました。記事数が少ない場合はこれでもいのですが、記事数が多くなると、5件とか10件あるいは20件ごとに表示する必要がでてきます。このような表示方法をページ単位表示と呼ぶこととします。
SQL文の中のselect文には、limit句があり、例えば検索結果のレコードの内、21番目から10個を取り出す、ということが可能になります。この場合のselect文は以下のように記述します。
select * from テーブル名
where 条件式
limit オフセット , ページサイズ
21番目から10個を取り出す場合、オフセットの値を21に、ページサイズの値を10にします。
また、このようなページ単位表示では、以下のように「前の10ページ」、「次の10ページ」のようなナビゲーションをハイパーリンクで作るのが一般的です。
[前の10ページ] 3/20 [次の10ページ]
「3/20」は、現在のページが第3ページ目で、総ページ数が20ページであることを示しています。
なお、ハイパーリンクでは、URLでSQL文、指定ページ番号を引き継ぐ必要があります。一般に以下の書式になります。
<a href="ファイル名?sql=SQL文&page=ページ番号">次の10ページ</a>
ここで、ファイル名は、ジャンプ先のファイル名で、「?」はこの後にGETメソッドで引き継ぐ変数とその値のペアが続くことを示す記号です。「=」はその左側が変数名でその右側が変数の値を示します。最初の変数は「sql」で、その値は「SQL文」です。「&」は、変数のペアの区切り符号です。2番目の変数は「page」で、その値は「ページ番号」です。
なお、このとき、文字列からなるSQL文はURLエンコードしておく必要があります。ページ番号は数値なのでその必要はありません。
また、入力フォームから記事データをPOSTメソッドで送信するようにもなっていますが、ここまで<form>タグ要素の中の「action」属性は省略してきていました。その場合は、現在のURLがそのまま引き継がれます。
たとえば、ページ移動した直後のURLは、以下のようになっています。
http://main01j.php?sql=(SQL文のURLエンコード)&page=(ページ番号)
この状態で入力フォームに記事を記入し、送信ボタンをクリックすると、POSTメソッドで記事データを送信しますが、URLにGETメソッドのための文字列が付加されているので、GETメソッドでもSQL文とページ番号を送信してしまいます。
このようなあいまいさを避けるために、ここでは<form>タグ要素の中の「action」属性は省略せず、
<form method='post' action='main01j.php'>
と明記します。実際には、現在のファイル名を定数THIS_FILEに代入し、定数THIS_FILEを使用することとします。
<?php
define(THIS_FILE,"main01j.php");
?>
-----
-----
<form method='post' action='<?=THIS_FILE'>
記事をページ単位で表示するようにしたサンプルリストを「main01j.php」とし、以下に示します。
main01j.phpソースリスト [表示]
[非表示] ダウンロード(main01j.zip)
main01j.php
<?php
define(THIS_FILE,"main01j.php");
// ページサイズ
$page_size = 5;
?>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8"
>
<title>BBS1</title>
<meta http-equiv="Content-Style-Type" content="text/css">
<link rel="stylesheet" type="text/css" href="common.css">
</head>
<body class="b_ffff99">
<?php
// データベースへの接続と選択
$db = mysql_connect('localhost','webapl','pass1234');
$db_name = "db_bbs";
mysql_select_db($db_name,$db) or die("データベースがありません"); //
ページ番号を受信した場合
if($_GET['page'] > 0)
{
// ページ番号
$page = $_GET['page'];
// SQL文
$str_sql = $_GET['sql'];
// ページ単位表示
page_disp($str_sql,$page,$page_size,$db);
}
// 「送信」の場合
elseif($_POST['command'] == "送信")
{
// 受信データが「空」でないかどうかチェック
$str_error_message = data_check($str_name,$str_title,$str_message);
if($str_error_message == "")
{
// 改行コードを改行タグに変換
$str_message = preg_replace( "/(\r\n|\r|\n)/", "<br
/>", $str_message)
// 現在日時の取得
$str_date = date("Y-m-d H:i:s",time());
// 「message_id」の生成
// tbl_bbs1テーブルのmessage_idの最大値の取得
$str_sql = "select max(message_id) as max_id from tbl_bbs1;";
$rs = mysql_query($str_sql,$db);
$arr_record = array();
$arr_record = mysql_fetch_assoc($rs);
$max_id = $arr_record['max_id'];
if($max_id > 0)
{
$new_id = $max_id + 1;
}
else
{
$new_id = 1;
}
// データのテーブルへの保存
$str_sql = "insert into tbl_bbs1 "
. "(message_id,name,title,message,date)"
. "values("
. $new_id. ",'" . $str_name . "','" .
$str_title
. "','" . $str_message . "','" . $str_date
. "');";
//print $str_sql;
mysql_query($str_sql,$db);
// データのリセット
$new_id = "";
$str_name = "";
$str_title = "";
$str_message = "";
$str_date = "";
// テーブルのデータの一覧取得(最後に「;」をつけない)
$str_sql = "select * from tbl_bbs1 order by message_id desc";
// 第1ページ目の設定
$page = 1;
// ページ単位表示
page_disp($str_sql,$page,$page_size,$db);
$db = mysql_close($db);
}
else
{
print "<p class='ac'>";
print "<font style='color:red'>{$str_error_message}</font><br>\n";
print "</p>";
}
}
print "<p class='ac'>";
// 入力フォームの表示
input_form_disp($str_name,$str_title,$str_message);
print "</p>";
?>
</body>
</html>
<?php
// ユーザ定義関数
// ----------------------------------------------
// 受信データのチェック
function data_check(&$str_name,&$str_title,&$str_message)
{
/*
$str_name :投稿者氏名
$str_title :記事タイトル
$str_message :記事本文
*/
// データの受信
$str_name = $_POST['name'];
$str_title = $_POST['title'];
$str_message = $_POST['message'];
// 文字列の前後の半角スペースを削除し、半角カタカナを全角カタカナに変換
$str_name = input_str_convert($str_name);
$str_title = input_str_convert($str_title);
$str_message = input_str_convert($str_message);
// 文字列が空かいなかのチェック
if($str_name == "")
{
$str = "氏名を記入してください";
}
elseif($str_title == "")
{
$str = "タイトルを記入してください";
}
elseif($str_message == "")
{
$str = "本文を記入してください";
}
return $str;
}
// ----------------------------------------------
// 入力フォームの表示
function input_form_disp(&$str_name,&$str_title,&$str_message)
{
/*
$str_name :投稿者氏名
$str_title :記事タイトル
$str_message :記事本文
*/
// 改行タグの改行コードへの変換
$str_message = preg_replace( "/(<br>|<br \/>)/",
"\n", $str_message);
?>
<table border="0">
<form method="post" aciton='<?=THIS_FILE?>'>
<tr>
<td> </td><td>BBS1</td>
</tr>
<tr>
<td>氏名</td><td><input name="name"
size="30"
value="<?=$str_name?>"></td>
</tr>
<tr>
<td>タイトル</td><td><input name="title"
size="60"
value="<?=$str_title?>"></td>
</tr>
<tr>
<td>記事</td>
<td><textarea name="message"
rows="5" cols="60"><?=$str_message?></textarea></td>
</tr>
<tr>
<td> </td><td><input type=submit name="command"
value="送信"></td>
</tr>
</form>
</table>
<?php
}
// ----------------------------------------------
// 入力文字列の整形処理
function input_str_convert($str)
{
if($str != "")
{
// 文字列の前後の半角スペースを削除
$str = trim($str);
// 半角カタカナを全角カタカナに変換
// V: 濁点付きの文字を1文字に変換
// K: 半角カタカナを全角カタカナに変換
$str = mb_convert_kana($str,'KV');
}
return $str;
}
// -----------------------------------------------
// 1個の記事本文の表示
function message_disp(&$arr_message)
{
/*
$arr_message['id'] :記事番号
$arr_message['name'] :投稿者氏名
$arr_message['title'] :記事タイトル
$arr_message['message'] :記事本文
$arr_message['date'] :投稿日時
*/
?>
<table class="bd_w1 bd_solid bd_b
padding3 bd_spacing0 bd_collapse w600">
<tr class="b_dcdcdc xs">
<td>No.<?=$arr_message['id']?> <?=$arr_message['title']?>
<span class="fbold">[<?=$arr_message['name']?>]
</span>
<span class="696969"><?=$arr_message['date']?></span></td>
</tr>
<tr class="b_w xs">
<td><?=$arr_message['message']?></td>
</tr>
</table>
<?php
}
// ----------------------------------------------
// ページ単位表示
function page_disp($str_sql,$page,$page_size,$db)
{
/*
$str_sql :SQL文(最後に「;」はつけていないこと)
$page :ページ番号
$page_size :ページサイズ
$db :データベース接続リソース
*/
if($str_sql != "" && $page > 0)
{
// limit句なしでSQL文の実行
$rs0 = mysql_query($str_sql . ";",$db);
// 全レコード数
$total_record = mysql_num_rows($rs0);
// 全ページ数
$total_page = ceil($total_record / $page_size);
if($page > 0 && $page <= $total_page)
{
// ページ数の値が正しい場合
// オフセットの設定
$offset = ($page - 1) * $page_size;
// SQL文にlimit句追加
$str_sql_limit = $str_sql . " limit "
. $offset ."," . $page_size . ";";
// 指定ページのみ抽出
$rs = mysql_query($str_sql_limit,$db);
// ページの表示
print "<p class='ac'>";
// ページナビゲータの表示
page_navigater_disp($str_sql,$page,$total_page,$page_size);
// ページ内全記事の表示
while($arr_record = mysql_fetch_assoc($rs))
{
// 記事データの配列への格納
$arr_message = array();
$arr_message['id'] = $arr_record['message_id'];
$arr_message['name'] = $arr_record['name'];
$arr_message['title'] = $arr_record['title'];
$arr_message['message'] = $arr_record['message'];
$arr_message['date'] = $arr_record['date'];
// 1個の記事本文の表示
message_disp($arr_message);
print "<br>\n";
}
// ページナビゲータの表示
page_navigater_disp($str_sql,$page,$total_page,$page_size);
print "</p>";
//結果セットを破棄し、接続を閉じる
mysql_free_result($rs);
}
//結果セットを破棄し、接続を閉じる
mysql_free_result($rs0);
}
}
// -----------------------------------------------
//
function page_navigater_disp($str_sql,$page,$total_page,$page_size)
{
/*
$str_sql : SQL文(最後に「;」がついていないこと
$page : ページ番号
$total_page : 全ページ数
$page_size : 1ページ内のレコード数
*/
// URLエンコード
$str_sql_encoded = rawurlencode($str_sql);
// URL文字列生成
$str_url = THIS_FILE . "?sql=" . $str_sql_encoded
. "&page=" ;
// ページナビゲータ表示
print "<table class='bd_w0'>\n";
print "<tr>\n";
print "<td class='al w250'>";
if($page > 1)
{
// URL文字列に前のページ番号追加
$str_url_before = $str_url . ($page - 1);
print "[<a href=" . $str_url_before . ">前の"
. $page_size . "ページ</a>]\n";
}
else
{
print "<span class='silver'>[前の{$page_size}ページ]</span>";
}
print "</td>\n";
print "<td class='ac w100'>\n";
// 「現在ページ/全ページ数」の表示
print $page . "/" . $total_page . " ";
print "</td>\n";
print "<td class='ar w250'>\n";
if($page < $total_page)
{
// URL文字列に次ののページ番号追加
$str_url_next = $str_url . ($page + 1);
print "[<a href=" . $str_url_next . ">次の"
. $page_size . "ページ</a>]\n";
}
else
{
print "<span class='silver'>[次の{$page_size}ページ]</span>";
}
print "</td>\n";
print "</tr>\n";
print "</table>\n";
}
?>
「main01j.php」ファイルにアクセスし、記事を送信した結果を以下に示します。ここでは、ページサイズは5ページであり、最初の5ページが表示されます。また、ページナビゲータの「次の5ページ」のハイパーリンクも表示されています。

「次の5ページ」のハイパーリンクをクリックすると、次の第2ページ目が表示されます。

■セキュリティ対策等のための文字列変換
(1)ブラウザー等から受信したデータに対する文字列変換
「Webアプリケ−ションのためのPHP入門」の3.4で述べたように、セキュリティ対策やエスケープ文字処理のために、WebサーバがHTMLフォーム等からGETメソッドやPOSTメソッドで文字列データを受信した場合、受信後に以下の処理を行うことが必要です。
@stripslashes()関数により、「'」、「"」、「\」のエスケープ処理された文字を元にもどす。
Ahtmlspecialchars()に関数により、「<」、「>」、「&」、「"」、「'」をHTML実体参照に変換する。
Bnl_rep_br()関数により、改行コードを改行タグ「<br>」に変換する。
改行コードを改行タグ「<br>」に変換する組み込み関数nl2br()関数がありますが、厳密には例えば「\n」は「<br>\n」に変換され、「改行コード「\n」は削除されず残されています。
ここでは、改行コードを削除するユーザ定義関数 nl_rep_br()関数を使うこととします。
このユーザ定義関数名を「tag_entity_input()」とすることとします。
(2)フォームの要素に初期値として表示するデータに対する文字列変換
また、上記5.1で述べたように入力データをHTMLフォームのテキストエリアに表示する場合は、改行タグを改行コードにもどしておく必要があります。このユーザ定義関数名を「tag_entity_form()」とすることとします。
(3)SQL文の文字列に対する文字列変換
SQL文では、「'」や「"」は、文字列の区切り記号として使われるので、文字列そのものの中に「'」や「"」がある場合は、あらかじめエスケープ処理のための文字列変換処理をしておく必要があります。MySQLには、現在の文字エンコーディングを考慮した組み込み関数「mysql_real_escape_string()」関数があります。
「tag_entity_input()」と「tag_entity_form()」のサンプルリストを以下に示します。
これらの関数は、インクルードファイル「common.php」内に記述し、使用することとします。なお、「common.php」ファイルはさらに「user.php」ファイルをインクルードしています。
ダウンロード(common_php.zip) ダウンロード(user_php.zip)
// -------------------------------------
// 改行コードを改行タグ「<br />」に変換
|