前回、jqueryを使ったYesNo診断をアップしましたが(YesNo診断のテンプレート作った。)、今回はCSVで情報を管理できるPHP検索フォームをアップしておきます。
作りたかったもの
- ちょっとした検索フォームを実装するのに、MySQLとかデータベース使うと手間なのでcsvで管理したい。
- csvで列増やすだけで検索項目増やせるようにしたい。(極力PHP側に触れずhtmlとcsvを編集するだけでokにしたい。
デモとソース
デモはこちらからどうぞ。
ソースはGitHubにアップしてあります。
構成
- index.php - トップページ
- result.php - 検索結果ページ
- form.php - 検索を処理するメインのPHPファイル
- form.csv - 検索に利用するデータが保存されたcsv
- html_form.php - 各ページで利用するformのhtml。各所でincludeして利用。
- html_result.php - 各ページで利用する結果出力用のhtml。各所でincludeして利用。
利用の前提など
- selectboxのために複数結果を持たせる項目は、csvの1つのセルにセミコロン区切りで記述。例)「apple;lemon;melon」
- csvの文字コードはsjisで、htmlの文字コードはutf-8。(エクセルの保存形式がsjisなので。)
- csvの一行目が項目名となり、htmlに記述する際の添字になる。
- 検索結果ページにあるformのselected処理は、result.phpの下部にあるjQueryで処理してます。
- デザインは一応レスポンシブっぽい仕上がり。
何言ってるかわからないという方が扱うのは難しいかと思うので、その辺はご了承ください。
参考
前回と同様CSSは下記ページのものを参考にしています。
また、結果の並び変えにはjQueryプラグイン「MixItUp」を利用しています。
最後に
適当に作ると汎用性が低くなりがちなので、公開することにすればそこそこ真面目に作るであろうということで制作してみました。
もうこれに似通ったものを今まで何千人が作ってきたのだろうという、気持ちにもなりますが検索してもあまりそれっぽいものが出てこないのでwebの大海に放出しておきます。
とはいえだいぶ勢いでコード書いたので、バグ等あればご指摘いただければ幸いです。
また元々の予定としては、selectboxの検索項目として「3000円以下」など、数値の大なり小なり検索も行えるようにしたかったのですが、あまりエレガントな実装に出来なかったのでとりあえずその項目は消してアップしてあります。
その内改良してコミットするかもしれないですが、しないかもしれない。form.phpの40行目辺りにある判定項目を増やせば良いだけなので、適当に改造してもらえればです。
