PHPとJavaScript

PHPだけなら

PHPはホームページ制作によく使われるサーバー側で動かすコンピュータ言語です。
このブログはWordpress（ワードプレス）で作られていますが、WordpressはPHPで出来ています。
何はともあれ簡単な検索システムを作りましたので検索してみて下さい。
データはテキストファイルです→https://liveinhope.biz/test_directory/hospital/hospital.txt。札幌の病院・クリニックの中で精神科がある施設の平成29年4月のデータです。
本当はデータベースを使いますが、簡易版ということでテキストファイルで行います。
例えば「中央区」や「クリニック」などと入力して検索ボタンを押してください。

検索ボタンを押すと、ページが遷移して、次のページに検索結果が表示されることを確認して下さい。

HTML部分

formで囲ってhttps://liveinhope.biz/test_directory/hospital/hospital.phpにname=”q”の文字列をgetで送信します。

<form method="get" action="https://liveinhope.biz/test_directory/hospital/hospital.php">
<input type="text" name="q" required>
<input type="submit" value="検索">
</form>

</form>

PHP部分

https://liveinhope.biz/test_directory/hospital/hospital.phpの中身です。

<?php

//文字化けが起こらないようにヘッダーで送信文字コード指定
header('Content-Type: text/html; charset=UTF-8');
echo <<< EOF
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>札幌の病院・クリニック検索（精神科）</title>
</head>
<body>
<h1>検索結果</h1>

EOF;

//検索キーワードを変数に格納
$keyword = filter_input(INPUT_GET, "q");

//キーワードが入っていれば
if ($keyword) {

    //ファイル名を変数に格納
    $filename = "hospital.txt";

    //検索結果ありなしのフラグ、初期値は「なし」
    $f = false;

    //検索結果のhtml
    $html = "<dl>\n";

    //ファイルを読み込みのみでオープン
    $handle = fopen($filename, "r");

    //ファイルポインタから1行取得する
    while ($line = fgets($handle)) {
        //もし$lineに$keywordが含まれていれば
        if (strpos($line, $keyword) !== false) {
            //検索結果あり
            $f = true;
            //$lineをカンマで区切り、$separated配列に入れる
            $separated = explode(",", $line);
            //htmlを作成
            $html .= "<dt>" . $separated[0] . "</dt>\n";
            //htmlを作成、rtrimで改行文字削除
            $html .= "<dd>" . rtrim($separated[1]) . "</dd>\n";
        }
    }

    //ファイルをクローズ
    fclose($handle);

    //htmlを作成
    $html .= "</dl>\n";

    //検索結果があれば
    if ($f) {
        //作成したhtmlを表示
        echo $html;
    } else {
        //検索結果がない場合
        echo "<p>ありませんでした</p>\n";
    }
}

echo <<< EOF
<p><a href="https://liveinhope.biz/archives/376">PHPとJavaScriptに戻る</a></p>
</body>
</html>

EOF;

<?php

//文字化けが起こらないようにヘッダーで送信文字コード指定

header('Content-Type: text/html; charset=UTF-8');

echo <<< EOF

<!DOCTYPE html>

<head>

<title>札幌の病院・クリニック検索（精神科）</title>

</head>

<body>

EOF;

//検索キーワードを変数に格納

$keyword = filter_input(INPUT_GET, "q");

//キーワードが入っていれば

if ($keyword) {

//ファイル名を変数に格納

$filename = "hospital.txt";

//検索結果ありなしのフラグ、初期値は「なし」

$f = false;

//検索結果のhtml

$html = "<dl>\n";

//ファイルを読み込みのみでオープン

$handle = fopen($filename, "r");

//ファイルポインタから1行取得する

while ($line = fgets($handle)) {

//もし$lineに$keywordが含まれていれば

if (strpos($line, $keyword) !== false) {

//検索結果あり

$f = true;

//$lineをカンマで区切り、$separated配列に入れる

$separated = explode(",", $line);

//htmlを作成

$html .= "<dt>" . $separated[0] . "</dt>\n";

//htmlを作成、rtrimで改行文字削除

$html .= "<dd>" . rtrim($separated[1]) . "</dd>\n";

}

//ファイルをクローズ

fclose($handle);

//htmlを作成

$html .= "</dl>\n";

//検索結果があれば

if ($f) {

//作成したhtmlを表示

echo $html;

} else {

//検索結果がない場合

echo "<p>ありませんでした</p>\n";

}

echo <<< EOF

<p><a href="https://liveinhope.biz/archives/376">PHPとJavaScriptに戻る</a></p>

</body>

</html>

EOF;

JavaScriptも一緒に使うと

JavaScriptはホームページ制作によく使われるブラウザで動かすコンピュータ言語です。
JavaScriptとPHPを両方使って、先程の検索をかっこよく改造してみます。
例えば「中央区」や「クリニック」などと入力してください。※スマホでは機種によりうまく動かないかもしれません。

PHPだけの時と違って、ページ遷移しないことを確認して下さい。
この手法はAjax（エイジャックス – ブラウザ内で非同期通信を行い、通信結果に応じて動的にページの一部を書き換えること）と言います。

HTML部分

onkeyupイベント（キーボードのいずれかのキーが放された時に発動）を使用しています。onkeyupイベントはスマホではうまく動かないかもしれません。
もしもすべてのスマホ対応にしたければonclickイベントとかに変更します。

<input type="text" id="word" onkeyup="search();">
<div id="result"></div>

1 2	<input type="text" id="word" onkeyup="search();"> <div id="result"></div>

PHP部分

<?php

//文字化けが起こらないようにヘッダーで送信文字コード指定
header('Content-Type: text/html; charset=UTF-8');

//検索キーワードを変数に格納
$keyword = filter_input(INPUT_GET, "q");

//キーワードが入っていれば
if ($keyword) {

    //ファイル名を変数に格納
    $filename = "hospital.txt";

    //検索結果ありなしのフラグ、初期値は「なし」
    $f = false;

    //検索結果のhtml
    $html = "<dl>\n";

    //ファイルを読み込みのみでオープン
    $handle = fopen($filename, "r");

    //ファイルポインタから1行取得する
    while ($line = fgets($handle)) {
        //もし$lineに$keywordが含まれていれば
        if (strpos($line, $keyword) !== false) {
            //検索結果あり
            $f = true;
            //$lineをカンマで区切り、$separated配列に入れる
            $separated = explode(",", $line);
            //htmlを作成
            $html .= "<dt>" . $separated[0] . "</dt>\n";
            //htmlを作成、rtrimで改行文字削除
            $html .= "<dd>" . rtrim($separated[1]) . "</dd>\n";
        }
    }

    //ファイルをクローズ
    fclose($handle);

    //htmlを作成
    $html .= "</dl>\n";

    //検索結果があれば
    if ($f) {
        //作成したhtmlを表示
        echo $html;
    } else {
        //検索結果がない場合
        echo "<p>ありませんでした</p>\n";
    }
}

<?php

//文字化けが起こらないようにヘッダーで送信文字コード指定

header('Content-Type: text/html; charset=UTF-8');

//検索キーワードを変数に格納

$keyword = filter_input(INPUT_GET, "q");

//キーワードが入っていれば

if ($keyword) {

//ファイル名を変数に格納

$filename = "hospital.txt";

//検索結果ありなしのフラグ、初期値は「なし」

$f = false;

//検索結果のhtml

$html = "<dl>\n";

//ファイルを読み込みのみでオープン

$handle = fopen($filename, "r");

//ファイルポインタから1行取得する

while ($line = fgets($handle)) {

//もし$lineに$keywordが含まれていれば

if (strpos($line, $keyword) !== false) {

//検索結果あり

$f = true;

//$lineをカンマで区切り、$separated配列に入れる

$separated = explode(",", $line);

//htmlを作成

$html .= "<dt>" . $separated[0] . "</dt>\n";

//htmlを作成、rtrimで改行文字削除

$html .= "<dd>" . rtrim($separated[1]) . "</dd>\n";

}

//ファイルをクローズ

fclose($handle);

//htmlを作成

$html .= "</dl>\n";

//検索結果があれば

if ($f) {

//作成したhtmlを表示

echo $html;

} else {

//検索結果がない場合

echo "<p>ありませんでした</p>\n";

}

JavaScript部分

先程書いたHTMLのonkeyupイベントが発生したら、search()という関数を呼び出します。
id=”word”の文字の値を取り、XMLHttpRequestを利用して非同期なデータの通信を実現します。

function search() {
    var word = document.getElementById("word").value;
    if (word) {
        var xmlhttp = new XMLHttpRequest();
        var url = "https://liveinhope.biz/test_directory/hospital/hospital2.php?q=" + encodeURIComponent(word);
        xmlhttp.onreadystatechange = function () {
            if (this.readyState === 4 && this.status === 200) {
                document.getElementById("result").innerHTML = this.responseText;
            }
        };
        xmlhttp.open("GET", url, true);
        xmlhttp.send();
    } else {
        document.getElementById("result").innerHTML = "<p>検索文字を入力して下さい</p>";
    }
}