html 検索機能 データベース

HTML検索機能データベースの作成

この文章では、HTMLとJavaScriptを使用してデータベースの検索機能を作成する方法について説明します。特に、検索機能の実装に焦点を当て、実際のコード例を通じてそのプロセスを解説します。

1. はじめに

Webアプリケーション開発の基礎知識として、HTML入力フォームに入力された文字列をデータベースから検索し、結果を表示する方法を学びます。この記事では、簡単な店舗検索アプリケーションを例に、HTML、PHP、MariaDBを用いた基本的な実装方法を解説します。

2. 環境

今回の実装は以下の環境で行います。

  • VMware Workstation 15 Player上のCentOS 8.3.2011仮想マシン
  • サーバIPアドレス: 192.168.2.115

2.1 各種版数

  • CentOS: 8.3.2011 (cat /etc/redhat-release で確認)
  • カーネル: 4.18.0-240.el8.x86_64 (uname -r で確認)
  • PHP: 7.2.24 (php -v で確認)
  • MariaDB: 10.5.8 (mariadb -V で確認)

2.2 SELinuxの状態

  • SELinux: Enforcing (getenforce で確認)

セキュリティのため、SELinuxは無効化せずに運用します。

3. SELinuxルールの作成

SELinuxが有効な状態では、httpd (Apache) がデータベースにアクセスできません。そこで、audit2allowコマンドを使ってアクセス拒否の理由を調べ、httpdがデータベースにアクセスできるようSELinuxルールを作成します。

3.1 アクセス拒否理由の確認

audit2allowコマンドを実行すると、php-fpmがMySQLのポート(3306)への接続時にconnectシステムコールが拒否されていることが分かります。

これは、httpd_can_network_connect または httpd_can_network_connect_db のいずれかのboolean値が正しく設定されていないことが原因です。

[root@server ~]# audit2allow -w -a
# 出力結果（一部抜粋）
type=AVC msg=audit(1610774947.277:78): avc: denied { name_connect } for pid=913 comm="php-fpm" dest=3306 scontext=system_u:system_r:httpd_t:s0 tcontext=system_u:object_r:mysqld_port_t:s0 tclass=tcp_socket permissive=0
Was caused by:
One of the following booleans was set incorrectly.
Description:
Allow httpd to can network connect
Allow access by executing:
# setsebool -P httpd_can_network_connect 1
Description:
Allow httpd to can network connect db
Allow access by executing:
# setsebool -P httpd_can_network_connect_db 1

getseboolコマンドでデフォルトのboolean値を確認すると、httpd_can_network_connect と httpd_can_network_connect_db はどちらも off になっていることが分かります。

[root@server ~]# getsebool -a | grep httpd_can_network
httpd_can_network_connect --> off
httpd_can_network_connect_cobbler --> off
httpd_can_network_connect_db --> off
httpd_can_network_memcache --> off
httpd_can_network_relay --> off

3.2 ルールの作成

上記のaudit2allowコマンドの出力結果に従い、httpd_can_network_connect のboolean値を on に設定します。

[root@server ~]# setsebool -P httpd_can_network_connect 1

再度 getsebool コマンドで確認すると、httpd_can_network_connect が on になっていることが確認できます。

[root@server ~]# getsebool -a | grep httpd_can_network
httpd_can_network_connect --> on
httpd_can_network_connect_cobbler --> off
httpd_can_network_connect_db --> off
httpd_can_network_memcache --> off
httpd_can_network_relay --> off

4. テスト用データの作成

MariaDBにテスト用のデータベースとテーブルを作成し、サンプルデータを登録します。

4.1 データベースの作成

MariaDB [(none)]> create database testdb;

4.2 テーブルの作成

testdb データベースに shop テーブルを作成します。このテーブルには、店舗のID、都道府県、店名、住所、電話番号を格納します。

MariaDB [testdb]> use testdb;
MariaDB [testdb]> create table shop(
id int unsigned,
pref varchar(8),
shop varchar(32),
address varchar(128),
tel varchar(32)
);

4.3 サンプルデータの登録

shop テーブルにサンプルデータを登録します。

MariaDB [testdb]> insert into shop values(1,"東京","リンガーハット","東京都町田市木曽東3丁目8-24","042-xxx-xxxx");
MariaDB [testdb]> insert into shop values(2,"東京","喜多方坂内","東京都多摩市落合1-45-1","042-xxx-xxxx");
MariaDB [testdb]> insert into shop values(3,"東京","洋庖丁","東京都新宿区高田馬場3-1-4","03-xxxx-xxxx");
MariaDB [testdb]> insert into shop values(4,"神奈川","丸亀製麺","神奈川県川崎市中原区上小田中4-2-1","044-xxx-xxxx");
MariaDB [testdb]> insert into shop values(5,"香川","手打十段うどんバカ一代","香川県高松市多賀町1-6-7","087-xxx-xxxx");

4.4 データの確認

登録したデータを確認します。

MariaDB [testdb]> select * from shop;
+------+-----------+-----------------------------------+-------------------------------------------------+--------------+
| id | pref | shop | address | tel |
+------+-----------+-----------------------------------+-------------------------------------------------+--------------+
| 1 | 東京 | リンガーハット | 東京都町田市木曽東3丁目8-24 | 042-xxx-xxxx |
| 2 | 東京 | 喜多方坂内 | 東京都多摩市落合1-45-1 | 042-xxx-xxxx |
| 3 | 東京 | 洋庖丁 | 東京都新宿区高田馬場3-1-4 | 03-xxxx-xxxx |
| 4 | 神奈川 | 丸亀製麺 | 神奈川県川崎市中原区上小田中4-2-1 | 044-xxx-xxxx |
| 5 | 香川 | 手打十段うどんバカ一代 | 香川県高松市多賀町1-6-7 | 087-xxx-xxxx |
+------+-----------+-----------------------------------+-------------------------------------------------+--------------+
5 rows in set (0.000 sec)

5. HTMLファイルの作成

都道府県を選択して検索を実行するHTMLフォームを作成します。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<form method="get" action="shop.php">
<select name="pref">
<option value="東京">東京</option>
<option value="神奈川">神奈川</option>
<option value="香川">香川</option>
</select>
<input type="submit" name="submit" value="検索">
</form>
</body>
</html>
  • <form>タグでフォームを作成します。
    • method="get": データの送信方法をGETメソッドに設定します。
    • action="shop.php": フォームデータの送信先を shop.php に設定します。
  • <select>タグでドロップダウンリストを作成します。
    • <option>タグで選択肢を定義します。
  • <input type="submit">タグで送信ボタンを作成します。

6. PHPファイルの作成

HTMLフォームから送信された都道府県名を受け取り、データベースを検索して結果を表示するPHPファイルを作成します。

<?php
$res = "";
$pdo = new PDO('mysql:host=127.0.0.1;dbname=testdb', 'root', 'admin'); // データベース接続
$sql = "select * from shop where pref=?"; // SQLクエリ
$stmt = $pdo->prepare($sql); // プリペアドステートメント
$array = array($_GET['pref']); // 送信された都道府県名
$stmt->execute($array); // クエリの実行

// 検索結果をHTMLテーブル形式で出力
$res = "<table>\n";
while($row = $stmt->fetch(PDO::FETCH_ASSOC)) {
$res .= "<tr><td>" .$row['id'] .
"</td><td>" .$row['pref'].
"</td><td>" .$row['shop'].
"</td><td>" .$row['address'].
"</td><td>" .$row['tel'].
"</td></tr>\n";
}
$res .= "</table>\n";
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<?php echo $res; ?>
</body>
</html>
  • PDOを使ってデータベースに接続します。
    • データベース名: testdb
    • ユーザー名: root
    • パスワード: admin
  • SQLクエリで`pref`カラムが送信された都道府県名と一致するレコードを検索します。
  • whileループで検索結果を1行ずつ処理し、HTMLテーブル形式に整形します。
  • echo $res; でHTMLテーブルを出力します。

7. 実行結果

作成したHTMLファイル (shop.html) をブラウザで開くと、都道府県を選択するドロップダウンリストと検索ボタンが表示されます。

ドロップダウンリストから都道府県を選択し、「検索」ボタンを押すと、選択した都道府県にある店舗の情報がテーブル形式で表示されます。

参考文献: MDN Web Docs: JavaScriptガイド

よくある質問

  1. 質問: この検索機能はどのように改善できますか？
    回答: 検索時に大文字と小文字を区別しないようにしたり、部分一致検索を導入することが考えられます。
  2. 質問: JSONデータはどのように作成しますか？
    回答: データをJavaScriptオブジェクトとして定義し、それをJSON形式に変換することができます。
  3. 質問: 検索結果をページ上でスタイリングする方法は？
    回答: CSSを使用して、検索結果の表示をカスタマイズすることができます。

その他の参考記事:サイト 内 検索 html