Webデータベースの構築について　壱

はじめに

　一応、準備が整いましたので、ここからは、Webデータベースの作成に取りかかります。
　phpについては、初期設定以外何も触れていませんが、実際に、phpスクリプトを記述していきながら、関連する部分について解説を加えていきたいと思います。

MySQLでの作業

　データベースは、MySQLについて　四で作成したweb_dbデータベースのbib_dbテーブルを使用します。
　ここでは、Web経由でアクセスしてくるユーザの登録を行います。

　まず、かねてからご案内の通り、MySQLサーバを立ち上げ、root権限でMySQLにアクセスし、mysqlデータベースを選択しておきます（↓下図）。

c:\mysql\bin>net start mysql[Enter Key]
MySql サービスを開始します.
MySql サービスは正常に開始されました。
c:\mysql\bin>mysql -u root -p mysql[Enter Key]
Enter password: **********[Enter Key]
Welcome to the MySQL monitor. Commands end with ; or \g.
Your MySQL connection id is 1 to server version: 3.23.53-max-nt
Type 'help;' or '\h' for help. Type '\c' to clear the buffer.
mysql>

　ここでは、web_dbデータベースのbib_tbテーブルに対して、select権限しか持たないようなユーザ（mysql）を作成します。
　localhost経由とWeb経由で、二つのアカウントを作成しておきます。
　コマンドは以下の通りです。

grant select on web_db.bib_tb to mysql@localhost identified by "password";

grant select on web_db.bib_tb to mysql@"%" identified by "password" ;

　パスワードはpasswordとしました。

mysql> grant select on web_db.bib_tb to mysql@localhost identified by "password";[Enter Key]
Query OK, 0 rows affected (0.00 sec)
mysql> grant select on web_db.bib_tb to mysql@"%" identified by "password";[Enter Key]
Query OK, 0 rows affected (0.00 sec)
mysql>

　作成できたら、userテーブルとtables_privテーブルの中身を確認しておきましょう（↓下図）。

mysql> select * from user;[Enter Key]

+-----------+-------+------------------+-------------+--- | Host | User | Password | Select_priv | +-----------+-------+------------------+-------------+--- | localhost | root | 0353b9321dd7b053 | Y | | % | root | 0353b9321dd7b053 | Y | | % | mysql | 5d2e19393cc5ef67 | N | | localhost | mysql | 5d2e19393cc5ef67 | N | +-----------+-------+------------------+-------------+---
4 rows in set (0.00 sec)
mysql> select * from tables_priv;[Enter Key]

+-----------+--------+-------+------------+----------------+ | Host | Db | User | Table_name | Grantor | +-----------+--------+-------+------------+----------------+ | localhost | web_db | mysql | bib_tb | root@localhost | | % | web_db | mysql | bib_tb | root@localhost | +-----------+--------+-------+------------+----------------+ ----------------+------------+-------------+ Timestamp | Table_priv | Column_priv | ----------------+------------+-------------+ 20021031233542 | Select | | 20021031233600 | Select | | ----------------+------------+-------------+
2 row in set (0.00 sec)
mysql>

　以上で、MySQLでの作業は完了です。

Apacheでの作業

　とくにありません。
　サーバを立ち上げるだけです。

簡易検索フォームの作成（search_1.html）

　ここでは、検索フォームを作成します。
　検索対象となるbib_tbテーブルのフィールドは全部で九つありますが、そのうち、title（タイトル）、author（著者名）、publisher（出版者）、subject（主題）の四つのフィールドのいずれかに、検索キー（複数指定不可）を含むようなレコードを検索し、py（出版年）の新しい順に表示するスクリプトを想定しています。

　最も簡易な検索フォーム（search_1.html）のソースは以下の通りです（↓下図）。
　#XXは単なる行番号です。

#01 <HTML>
#02 <HEAD>
#03 <TITLE>検索画面</TITLE>
#04 </HEAD>
#05 <BODY>
#06 <FORM NAME="search" METHOD="post" ACTION="result.php">
#07 <INPUT TYPE="txt" NAME="str_key"><BR>
#08 <INPUT TYPE="submit" VALUE="search">
#09 </FORM>
#10 </BODY>
#11 </HTML>

　このファイルの中心部分は6行目～9行目までです。
　まず、6行目では、フォーム全体にsearchという名前を付け、submitボタンがクリックされたときに、postメソッドで、result.phpにフォーム部品の値が渡されるようにしています。

　フォーム部品は二つあります。
　まず、7行目では、検索キーを入力するためのテクスト・フォームに、str_keyという名前が付けられています。
　検索キーはstr_keyに格納されることになります。

　8行目では、サブミット・ボタンが用意されています。

検索フォームの作成（search_2.html）

　ここでは、search_1.htmlでも十分用は足りますが、若干の使い勝手を考慮して、フォームを書き換えておきたいと思います。
　ちょっとだけ進んだ検索フォーム（search_2.html）のソースは以下の通りです（↓下図）。

#01 <HTML>
#02 <HEAD>
#03 <TITLE>検索画面</TITLE>
#04 <SCRIPT LANGUAGE="JavaScript">
#05 function FormSubmit() {
#06 var js_str_key = document.search.str_key.value;
#07 if (js_str_key == "") {
#08 alert("please enter search key.");
#09 } else {
#10 document.search.method = "post";
#11 document.search.action = "result.php";
#12 }
#13 }
#14 function FormClear(){
#15 document.search.str_key.value="";
#16 }
#17 </SCRIPT>
#18 </HEAD>
#19 <BODY>
#20 <FORM NAME="search" onSubmit="FormSubmit()">
#21 <INPUT TYPE="txt" NAME="str_key"><BR>
#22 <INPUT TYPE="submit" VALUE="search">
#23 <INPUT TYPE="button" VALUE="clear" onClick="FormClear()">
#24 </FORM>
#25 </BODY>
#26 </HTML>

　ソースは26行です。
　search_2.htmlでの大きな改良点は、①clearボタンを配置して、入力フォームの内容をクリアできるようにしたことと、②検索キーが未入力であった場合、入力を促すようなエラー・ダイアログを表示するようにした点です。
　いずれもJavaScriptを使っています。

　20行目～24行目までが、フォームの領域です。
　20行目では、フォーム全体にsearchという名前をつけ、submitボタンがクリックされた場合、JavaScrptのFormSubmit関数を呼び出すことが指定されています。

　submitボタンで呼び出されるFormSubmit関数の内容は、5行目～13行目に記述されています。
　ここでは、if文を使って、条件分岐を行っています。
　まず、str_keyフォームの値を、js_str_keyという変数に読み込み、js_str_keyに値が入力されていなければ、エラー・ダイアログ（please enter search key.）を表示します。

function FormSubmit() {
var js_str_key = document.search.str_key.value;
if (js_str_key == "") {
alert("please enter search key.");
}

　一方、js_str_keyに何某かの値が入力されていれば、フォームのメソッドをpostに指定し、result.phpを呼び出しています。

else {
document.search.method = "post";
document.search.action = "result.php";
}
}

　21行目と22行目はsearch_1.htmlと全く同じです。
　22行目は単なるボタンですが、クリックすると、JavaScriptのFormClear関数が呼び出されるようになっています。

　呼び出される側のFormClear関数は、14行目～16行目に記述されています。
　そのうち、15行目が実際の関数の中身です。
　FormClear()は、str_keyの値をクリアするという関数ですので、誤入力などの際にクリックして下さい。

function FormClear(){
document.search.str_key.value="";
}

　作成できたら、search_2.htmlをApacheのドキュメント・ルートに保存しておいて下さい。
　ドキュメント・ルートは、ここでは、c:\program files\apache group\apache\htdocsです。

Webデータベースの構築について　弐 >>>