検索フォームを作るにはどうしたらいいんだろう?
こんにちは。HTMLやPHPの開発歴8年の著者が、PHPを使った検索フォームの作成方法をご紹介します。
ショッピングサイトなどの画面上部にある検索フォームって、使ったことはありますか?自分の探している商品ページを探すにはすごく便利ですよね。
逆に検索フォームがなければ、探したい商品のカテゴリページなどからその商品を探し出す必要があります。これは非常に手間がかかりますね。
このように、WEBサイトにおいて検索フォームは重要な機能といえます。というわけで、今回はPHPを使った検索フォームの作り方を解説していきましょう!
PHPで検索フォームを作成するには
まず、PHPで検索フォームを作成するにはどのような作業が必要でしょうか。その概要を説明したいと思います。
検索フォームの処理概要
検索フォームにおけるPHPの処理の概要は、次の図を見てもらうと分かりやすいと思います。
まずは検索フォームに値が入力され、その内容を元にPHPでSQL文を作成します。そして、そのSQL文をもとにデータベースが値を返してくれますので、PHPでその結果を一覧で表示して完了です。
つまり、PHPが実装すべき処理は次の通りです。
この中で特に重要な項目が、form要素とSQL文ですので、次で詳しく説明します。
form要素について
検索フォームを作成するには、まずはform要素を利用して入力フォームを作成する必要があります。form要素を利用することで、WEBサーバーへ入力された値を送信することができるようになります。
form要素は次のような形で書くことができます。
<form action="soshinsaki.php" method="post"> <!-- 任意の<input>要素=入力欄などを用意する --> <input type="text" name="input1"> <!-- 送信ボタンを用意する --> <input type="submit" name="submit" value="送信"> </form>
この構文では、送信ボタンを押すことで、input1という入力フォームの値を、soshinsaki.phpへ送ることができます。form要素に書かれてあるactionの値が、送信先のファイルとなります。
そして送信先のPHPで、データベースから値を検索するためのSQL文を作成します。
SQL文について
データベースから検索結果を取得するためには、SQL文を扱う必要があります。SQL文とは、データベースからデータを取得したり、変更したりするための構文です。
PHPでデータベースに接続すると、SQL文を発行してデータベースを操作することができます。この機能を利用して、検索結果を取得します。
PHPで検索フォームを作成しよう
ではさっそく、具体的に検索フォームを作成してみましょう。簡単な例を使って順番に説明していきます。
今回の例として、あるシステムのユーザー情報を検索する機能を考えてみたいと思います。
検索フォームの入力項目を作成
まずは、ユーザー情報の検索フォームを作成しましょう。次のようなform要素を作成します。
<!-- user_list.php --> <html> <head> <title>User List</title> </head> <body> <form action="user_list.php" method="post"> ID:<input type="text" name="id"><br> Name:<input type="text" name="user_name"><br> <input type="submit"> </form> </body> </html>
検索項目は、IDと名前の2つとしました。また、formのactionを自分自身のPHPファイルとしていますので、ここに検索する値を入力して送信ボタンを押すと、自分自身に入力値が送信されます。
最終的には、検索結果がこの検索フォームの下に表示されるようにします。
検索フォームを作成する時の注意点
ところで、検索フォームを作成する時のちょっとした注意点を紹介しておきたいと思います。それは、誤入力を防ぐため、入力された文字をチェックするということです。
例えば、IDは必ず英数字だとします。それならば、送信ボタンを押したときに入力文字のチェックをした方がユーザーにとって親切ですね。
例えば以下のようにコードを追加します。
<html> <head> <title>User List</title> </head> <body> <form action="user_list.php" method="post"> ID:<input type="text" name="id" value="<?php echo $_POST['id']?>"> <?php if(preg_match("/[^0-9A-Za-z]/", $_POST['id'])){ echo " IDは英数字で入力してください!"; } ?> <br> Name:<input type="text" name="user_name" value="<?php echo $_POST['user_name']?>"><br> <input type="submit"> </form> </body> </html>
ID入力欄の隣に警告文を挿入してみました。if(preg_match("/[^0-9A-Za-z]/", $_POST[‘id’]))というようにif文を作ることで、$_POST[‘id’]が英数字以外の時の処理を記述することができます。
また、入力された値は$_POST[“id”]や$_POST[“user_name”]という形で取得できます。送信ボタンを押しても入力内容が残るように、入力欄のvalueにそれぞれ$_POST[“id”]と$_POST[“user_name”]を設定しました。
このようにするだけで、入力の間違いをある程度防ぐことができます。
PHPでSQL文を実行して検索結果を取得しよう
それでは次に、入力された値を使ってSQL文を作成して、検索結果の一覧を表示してみましょう!まずはユーザーのデータを作っておきましょう。
データベースにデータを作成する
データベースはMySQLで、phpMyAdminがインストールされていることとします。テーブル名をuser_listとして、次の画像のような内容でテーブルを作成します。
なお、phpMyAdminの詳しい操作方法は、次の記事を参考にしてください。
これでデータが作成できました。次は、PHPでSQL文を作成しましょう!
PHPでSQL文を作成する
PHPファイルの冒頭部分に、次のような構文を挿入して、SQL文を発行してデータを取得します。
<?php //データベースへ接続 $dsn = "mysql:dbname=[接続するDB名];host=localhost;charset=utf8mb4"; $username = "[DBに接続するユーザ名]"; $password = "[パスワード]"; $options = []; $pdo = new PDO($dsn, $username, $password, $options); if(@$_POST["id"] != "" OR @$_POST["user_name"] != ""){ //IDおよびユーザー名の入力有無を確認 $stmt = $pdo->query("SELECT * FROM user_list WHERE ID='".$_POST["id"] ."' OR Name LIKE '%".$_POST["user_name"]."%')"); //SQL文を実行して、結果を$stmtに代入する。 } ?> <html> <!-- 以下省略 -->
このようにSQL文のWHERE句に入力されたIDやユーザー名の値を組み込むことで、検索結果を取得することができます。ここでは、$stmtという配列にSQLの実行結果が格納されています。
また、IDは検索フォームの値と完全一致するものを検索し、ユーザー名はLIKEを使ってあいまい検索しています。
取得したデータを使用して検索結果を表示する
では、取得したデータを使って検索結果の一覧を表示してみましょう。form要素の下に、次のコードを追加します。
<!-- 省略 --> </form> <table> <tr><th>ID</th><th>User Name</th></tr> <!-- ここでPHPのforeachを使って結果をループさせる --> <?php foreach ($stmt as $row): ?> <tr><td><?php echo $row[0]?></td><td><?php echo $row[1]?></td></tr> <?php endforeach; ?> </table> </body> </html>
ユーザー名に「田」と入れて検索してみましょう。次のような結果になると思います。
フォームの下に複数の結果が表示されていますね!以上が検索フォームの簡単な作成方法です。
まとめ
今回は簡単な検索フォームを作成してみました。form要素を使った入力フォームの作成と、PHPでSQL文を作成することでデータベースから値を取得して、検索結果が表示できましたね。
検索フォームとしては、その他にも日付で絞り込んだりすることもできますし、検索以外にも並べ替え機能なども作ることができます。アイデア次第で色々と便利な機能が作れますので、ぜひ工夫してみてください!