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で送信します。

PHP部分

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

JavaScriptも一緒に使うと

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

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

HTML部分

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

PHP部分

JavaScript部分

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

PHPとJavaScriptを連携すると、色々と面白いことができます。
機会があれば、PHPとJavaScriptの入門編も書きますので、よろしくお願いします。