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

Javaプログラミングを基本にして、ゲーム作成に必要なことの調査結果、やったら面白そうなことなどを記載します。プログラミングのススメ的なことも記載します。プログラミングで楽しく遊ぶために色々と記載して行きます。

Ajax PHP 〜登録したデータをマップに表示〜

JavaFx

イントロダクション

前回画面からデータを入力してDB に登録するとこまでやりました。次は、登録したデータの表示をやります。 作成したソースはGitにアップしてあります。

DB 〜ピン表示

レンタルサーバのMySqlからデータを取得〜XmlHttpRquestのレスポンスを受けてグーグル マップにピン(オーバーレイ)を表示する迄の実装を行います。

設計を行う

  1. 対象のHTMLにアクセスされる
  2. JSで初期表示(onload)処理が走る
  3. PDOを使用してDB コネクションを取得、SQLステートメント生成($statement)
  4. SQLでDB のデータを取得
  5. 取得したデータ(テキストとイメージ)をHTMLテキスト(div visible="hidden")に出力(レスポンスで返却)
  6. XmlHttpのレスポンステキストで受け取った5のdivタグからピン(オーバーレイ)の情報を取得、作成を行い、吹き出し(WindowInfo)の作成及びバインド(オーバーレイとの関連付け)を行う。エラーハンドルはこちらを参照しました。

処理詳細

  1. 初期表示処理でDB へのコネクションをグローバル変数に設定、呼びだし時にコネクションの有無を確認
  2. 地域情報テーブルよりデータを取得
    SELECT * FROM AREA_INFO
  3. 取得したデータよりdivタグにデータを埋め込み非表示でレスポンスに出力
    imgはデータをHTMLに出力
  4. 吹き出しに表示するようバインド。

実装

  1. PDOでDBコネクションを取得する
  2. SELECT * FROM AREA_INFOを実行する
  3. 実行結果をdivタグに出力する
    <予備情報>
    ・メタ文字をHTMLに表示する("<"とか"%"など)
    ・イメージをHTMLタグに出力する(URLスキーム)
    ・PHPのヒアドキュメント実装方法
    ・WindowInfoデータのタグ
    <div id="test" data-name="名前" data-url="URL.com"/>
       var doc = document.getElementById("test");
        console.log(doc.dataset.name);
        console.log(doc.dataset.url);

＜PHPでの出力＞
スマホでデータの登録を行う想定のため、保存したデータの形式がどのようになるのか調査が必要なため課題としてあげることにします。

後日

とりあえずデータを取得、HTML に出力してみたところ、imgがパスになっていてURLスキームでの表示が出来ませんでした。 登録処理を見直して見ようと思います。。。

でわでわ。。。