やりたい事

まちをブラブラしてる時に発見したライブハウスやイベントスペースなどを地図に登録して音楽マップを作るための、ツールを作る

概要設計

初期表示時(リクエスト受信時)にDB(MySql)より地域情報を取得
取得した地域情報をHTML(hidden)で出力
出力したHTML(地域情報div)をonload時に読み込み地図上にオーバーレイを描画する
データ入力ボタンを押すと入力フォームが開く
データ登録ボタン押した時に対象のデータをDB に登録する
登録したデータを地図に描画する

詳細設計

DB接続情報よりDB接続、地域情報テーブルよりすべてのデータを取得
取得したデータでdivタグを作成してオーバーレイの情報として出力
以下の様なかたちでHTML出力する
div:data-name=地域情報名
div:data-url=対象のホームページURL
div:data-img=同様に画像
div:data-lat=位置情報Lat
div:data-lng=位置情報Lng

使用する言語

クライアントサイドJavaScript
サーバーサイドPHP

実装に向けて

実装環境としては、PHPとMySqlが使えるワードプレスをインストールできるサーバーを使用(レンタルサーバー)です。
これにHTMLとJavaScriptでクライアントサイドを作りPHPでサーバーサイドを作る。

実装時に気をつける事

PHPでは、HTMLを(なるべく)出力しない、クライアントとサーバーを分断し、それぞれに依存関係を作らない様に作成する。→クライアントサイドを修正したら、サーバーサイドを修正しなくてはならない様な実装をしない。

具体的に

PHPでは画面(HTMLの表示コンポーネント)を出力しない。非表示のdivタグのみを出力する
クライアントサイドは、全てPHPが出力したHTML をJSで読み込みオーバーレイを描画する。

まとめ

今回のマップは、ライブハウス照会サイトの機能です。この機能が土台となり画面上に表示したオーバーレイの吹き出しから各店舗の情報を表示します。
今回のパージョンでは、対象の入り口などの目印になる様な画像とホームページのURLを表示します。
実装後運用して多少のデータを追加した後、登録するべきデータはひとりで登録し切れないので、自分のレンタルサーバにユーザー登録している人が地図情報を追加できる様にしていこうと考えてます。
登録ユーザーはワードプレスを使用してプログ記事を書くことが可能で、記載した内容(文字数制限あり)がオーバーレイの吹き出しに表示されます。

現状のプログラム設計でした。
でわでわ。。。

Takunojiのプログラミング・プレイグラウンド(遊び場)

PHP Ajax 〜プログラム設計〜

イントロダクション