2022/05/05

データベースの検索システムの作り方を図解する【必要なツールと手順】

ブログ運営

「データベースから自由に条件を変えて検索できるwebサービスを作りたい。」
「自分のブログ（wordpress）に、付加価値として検索システムを加えたい。」

このような悩みを持つ方に、この記事ではデータベースの検索システムの作り方を解説します。

　この記事で書いていること

データベースの検索システムでできること
検索システムを作るために必要なもの
検索システムを作る4つのステップ

当ブログでも、データベースを使った「ディベートの論題検索システム」を作成しました。カテゴリや検索ワードに合わせてデータを出力します。

検索システムの作成に必要な知識などを共有します。
※ なおこの記事では、最終的にwordpressを使用したサイトに設置することを前提に説明します。

データベースの検索システムでできること

この記事を読むことで、以下のようなことができるようになります。

サイトの運営者がデータベースに入力したデータを、ユーザーが様々な条件で検索できる。

データベースのデータは随時更新・追加していくことが可能です。また、検索の仕方は以下のようなものを設定することができます。

一致検索：検索した文字と一致するデータを検索する。
あいまい検索：検索した文字を一部に含むデータを検索する。
タグ（カテゴリ）検索：指定したタグを含むデータを検索する。
ランダム検索：条件に一致したデータの中からランダムで表示する。

ちなみに、当サイトの検索システムでは、以下のような条件でカテゴリ検索・あいまい検索ができます。

カテゴリで検索する

ワードで検索する

続いて、検索システムを作るのに必要なものをご紹介していきます。

データベースの検索システムに必要なもの

データベースの検索システムは、基本的にこの3つから構成されています。

サービスを公開するためのwebページ
処理を実行するプログラム
データを保管するデータベース

1つ目は、最終的にサービスを公開するためのwebページです。このページから、ユーザーが検索条件を入力し、その結果が出力されます。

2つ目に、データベースにアクセスしたり、条件に合うデータを探したりするためのプログラムです。今回使う言語は、PHP・HTML・CSSの3つです。webページとデータベースを繋ぐ役割をします。

3つ目は、データを保存するデータベースです。データベースでは基本的に、表(テーブル)の形式でデータが格納されていて、プログラムでアクセスします。データベースは通常、レンタルサーバーを契約してそこに保管されます。

検索システム作成に必要なツール

データベースからの検索システムを作るのに必要なツールは、主にこの5つです。順番に解説します。

レンタルサーバーとwebページ
テキストエディタ
MAMP
FTPクライアントソフト
プログラミングの基礎知識

① レンタルサーバーとwebページ (wordpress)

今回は、wordpressのサイトでサービスを公開することを前提としているため、レンタルサーバーを契約し、wordpressサイトを持つ必要があります。すでにwordpressでサイトを運営している方は、そのうちの1ページを使うことが可能です。（今回は、wordpressを使用したサイトの「固定ページ」に設置することを前提に、説明します。）

また、データベースもレンタルサーバーに保管されます。wordpressのためにすでにレンタルサーバーを契約している場合、新しく契約する必要はありません。

データベースの基礎知識

データベースの作成や、データの出し入れは、”phpMyAdmin“というツールで行うことができます。（本来、データベースに情報を出し入れするにはMySQLというプログラム言語を使わなければいけませんが、このツールを使うことでその必要がなくなります。）

ほとんどの場合、レンタルサーバーの管理画面からphpMyAdminを使うことができるようになっています。（私の使用しているエックスサーバーでは、下の画面から移動が可能です。）

また、ローカル環境では後ほど説明するMAMPによって使用できます。

② テキストエディタ

テキストエディタは、プログラムを書くためのソフトです。たくさん種類があるので比較サイトなどを見るといいと思います。私は「Visual Studio Code」を使用しています。

③ MAMP

MAMPは、ローカル環境でデータベース（phpMyAdmin）とプログラム（PHP）を動かすことのできるソフトです。
作成中のプログラムのテストなどは、本番環境（ユーザーに公開するサイト）ではなく、ローカル環境（自分のパソコンの中）で行います。そのためのローカル環境を構築するのが、MAMPというソフトです。インストールの仕方などはいろいろなサイトで紹介されています。

④ FTPクライアントソフト

これは、完成したプログラムを、本番環境のサーバーにアップロードするためのソフトです。これもいくつか種類があるので、比較サイトを見てみるといいと思います。私は「Cyberduck」を使用しています。

⑤ プログラミングの基礎知識

今回使う言語は、PHP・HTML・CSSの3つです。それぞれ、以下のような役割があります。

PHP：データベースへのアクセスや、条件に合うデータの取得をする。
HTML：検索条件の入力や、取得したデータの画面表示をする。
CSS：画面表示のデザインの修正などをする。

HTMLとCSSはユーザーの目に見える場所を作る言語（フロントエンド）、PHPは目に見えないデーターベースの処理などを行う言語（バックエンド）というイメージです。全く知識がない場合も、ネット上の教材で短時間に学習することができます。「Progate」などのサービスがオススメです。

それではここから、作成の具体的なステップについて説明していきます。

検索システムの作成手順

基本的に、ローカル環境で動作を確認したあと、本番環境にアップロードするという流れです。この4ステップで作ります。

データベースを作成してデータを入れる
ローカル環境でプログラムを書いて試す
本番環境に移行する
スタイルを整える

順番に解説していきます。

① データベースの作成

まず、データの取得先となるデータベースをローカル環境で作成します。MAMPをインストールしていれば、管理画面からphpMyAdminを使うことができます。

また、構造としてはデータベースの中に（複数の）テーブルがある入れ子構造になっています。データの型、長さなどを設定し、テーブルを作成します。データは後からでも追加・修正できるので、最初はテスト用に簡単に入力しておくといいと思います。

② ローカル環境でプログラムを書く

検索システムの作成に必要なコードは、基本的に4つに分けられます。

データベースへ接続するプログラム
検索条件の入力フォームのプログラム
条件に合うデータを取得するプログラム
検索結果を出力するプログラム

それぞれについて、基本的なプログラムの形をご紹介します。

データベースへ接続するプログラム


<?php 
 $pdo = new PDO('mysql:charset=UTF8; dbname=データベース名; host=localhost', 'root', 'root'); 
 ?>

データベースの読み込みはこの宣言文がテンプレートです。右端の2つの”rootは、ユーザー名とパスワードです。ローカル環境で特に設定をしていなければ、これで接続可能だと思います。

入力フォームのプログラム


<!-- 検索フォーム -->
<form action="" method="POST">

  <!-- ワードの入力 -->
  <p>
    ワード：<input type="text" name="word">
  </p>

  <!-- 表示数の入力 -->
  <p>表示するデータの数
    <select name= "number">
      <option value = 10 selected>10</option>
      <option value = 20>20</option>
      <option value = 30>30</option>
    </select>
  </p>

  <!-- 送信ボタン -->
  <p>
    <input type="submit" value="検索する">
  </p>
</form>

今回は「検索するワード」と「結果の表示数」を入力します。htmlのフォーム(form)タグを使うことで実装が可能です。

条件に合うデータを取得するプログラム

<?php 
$sql = "SELECT * FROM テーブル名 WHERE データ名 LIKE '%$word%' ORDER BY RAND() LIMIT $number";
?>

データベースからデータを探す場合も、テンプレートとなる宣言文があるので調べてみるといいと思います。ここでは、”検索したワードを含むデータを指定した数だけランダムで取り出す”という動作をしています。

結果を出力するプログラム

 foreach ($results  as $row) {
    echo $row["price"]; ?><br>
   }

今回は、表形式で表示します。検索結果を順に出力する方法として、foreach文がよく使用されます。

③本番環境に移行する

プログラムが完成したら、データベースとプログラムを本番環境に移行します。具体的には、以下のような手順を踏みます。

データをレンタルサーバーのデータベースに移行する
プログラムを本番環境に合わせて書き換える
プログラムを本番環境にアップロードする
ショートコードでプログラムをwebページから呼び出せるようにする

1. データベースの移行

データをローカル環境から本番のレンタルサーバに移行するときは、phpMyAdminのインポート/エクスポート機能で簡単に行えます。（ここでは割愛します。）

2. プログラム（データベース接続先）の書き換え

プログラムの中で、データベースの接続先を本番環境に書き換える必要があります。エックスサーバーの場合、以下のように接続先を変更します。

	ローカル環境	本番環境
ホスト名	localhost	mysql○○○○○.xserver.jp（○には5桁の数字）
ユーザ名	root	xs○○○○○○_○○（自分で追加したユーザ名）
パスワード	root	設定したパスワード

※エックスサーバーのホスト名は、サーバーパネル > MySQL設定のページ下部に書かれています。

3. プログラムのアップロード

書いたプログラムをwordpressにアップロードします。FTPクライアントソフトを使用して、以下の階層にアップロードします。

サイトのドメイン
> public_html
> wp-content
> themes
> 現在使っているテーマのフォルダ内 ←ここ

4. ショートコードでwebページにプログラムを呼び出す

「ショートコード」というwordpressの機能を使うことで、webページ（投稿ページや固定ページ）からプログラムを呼び出すことが可能です。

やり方としてはまず、function.phpというファイルの末尾に以下のプログラムを追記します。


//function.phpの末尾に記載
function 関数の名前() {
  ob_start(); 
  get_template_part('呼び出したいプログラムファイルの名前');
  return ob_get_clean();
}
add_shortcode('キーワード', '関数の名前');

その後、投稿ページに以下のように記載することで、プログラムを呼び出すことが可能です。

[キーワード]

※設定したキーワードを[]で囲みます。関数の名前、およびキーワードは任意の文字列にできます。

④スタイルを整える

最後に、CSSを使って見栄えを調整します（文字の大きさ、太さ、色など..）。CSSを記述する場所は、使っているwordpressのテーマにより異なると思います。適切な場所に記述しましょう。

これで検索システムが完成です。

まとめ

この記事では、データベースの検索システムを作るための大まかな手順を記載しました。詳しい部分については、ご要望があれば随時解説したいと思います。

この記事が皆さんのお役に立てれば幸いです。

完成版が見たい方はこちら

当サイトで実装している『論題検索システム』です。ご参考までに。