イントロダクション

今まで数回にわたり、これに関することを記載しました。以下の記事がそれにあたります。

1. JS XmlHttpRequest 〜JSでの同期/非同期通信〜
2. Google Maps API PHP連携 〜マップ情報をDBに登録する〜
3. PHP Ajax 〜DBに登録したデータを受信する〜

部分的な記載なので詳細部分は上記の記事がわかりやすいと思います。

Ajax + XmlHttpRequest

今回作成しているウェブアプリケーションはGoogle Mapを使用して地域の情報を位置情報を土台にして発信できるものを作成中です。
現状は、まだわけのわからない情報が載っています。こんな感じです(笑)。

PCとスマホなどのモバイルで同じような表示になっています。CSSでのコントロールは行なっていません。→＠mediaなどのタグを使用していません。

なぜAjax?

今回の実装では使用しているファイルは以下のようになります。
<クライアント>

• SampleMap.html
• SampleMap.js
  <サーバー>
• InsertMapData.php(だったと思う。。。)
• GetMapData.php(と思う。。。)

これらの構成で今後はphpファイルが増えていくような形になります。(1機能、1ファイル)

ポイント

HTML, JS(クライアント)とphp(サーバー)を分断して実装したいと思い、このような形になりました。
サーバーとクライアントの通信部分にはAjaxを使用しています。

つまり

「HTML & JS」

• HTMLの初期表示時にAjaxでphpを呼び出しGoogleMapから地域情報(オーバーレイ)を取得

「PHP(サーバー)」

• データ入力とデータ送信のボタンで地域情報をサーバーに登録(PHP呼び出し)を行う

このように用途を分割して実装しました。

MVCモデル

余談ですが、自分はJava屋なのでMVCモデルのような実装の仕方が好きです。「あの機能はあのファイル」「この機能はこのファイル」というように処理を分割してやると、修正や追加の実装をするときに「どの部分にコードをついか・修正すれば良いか？」がすぐにわかります。「自分で作ったんならわかるだろ？」という声が聞こえそうですが、それは多分やったことのない人の意見だと思います。
もし、若い人であれば、是非やってみてください多分「んーどこを修正すれば良いのだろう？」となります。そして、この経験をした人でないと「こーやれば良い」というのがわからないと思います。
それなりに経験を積んでいる人であれば、若い子がやって「んー。。。」と声を上げているときに、何か一言声をかけてあげてください。若くても、老人でも「新しきを知る」というのは必要だし。面白いことだと思います。

処理フロー

本当のMVCモデルでは以下のような関係を作りアプリケーションの設計を行います。

1. モデル(M) = ロジック処理部分(DB登録など)
2. ビュー(V) = 画面、クライアント側
3. コントロール(C) = リクエストハンドラ

このような形で設計します。JavaのSpring, Play(リンクはちょっと古い)、JavaEE etc ... などのフレームワークはStrutsという古いフレームワークを基本にしているように見えます。(実際のところは自分の予想です)
それというのはリクエストハンドルを行う中心的なサーブレット(フレームワーク部品)を使用して各URLに対してどのアクション(Control)を起動するのか決定しているからです。

ハンドリング方法

「http(s)://XXXX.com/XXX 」というリクエストが来たときXXXActionというControlクラスのXXXメソッドが起動する、というような形をとっています。

MVCの流れ

画面(V) → コントロール(C) → モデル(M)→ コントロール(C) → 画面(V)と流れていくように設計します。
VからはHTMLでフォームのaction属性を使用する方法、Ajaxで直接処理を呼び出す方法とありますが、そこはアプリケーションの設計次第になります。

同期通信と非同期通信

Ajaxという技術が確立されて久しいですが、昔は「同期通信」、つまり、フォームのaction属性を使用する同期通信にて画面の更新を行なっていました。この場合は画面全体をリロードするので必要な場合のみこのような通信方法を使用したいと思うのが人情だと思います。
しかしAjaxの技術を使用すれば更新したい部分のみを更新できるので、この方法を使用することが多いです。
よく目にするのは「JQuery」を使用した「$.ajax()」です。これはXmlHttpRequestを使用したもので、自分の認識としては単なるラッパー(拡張して使いやすくしたもの)だと思っています。しかし便利になればその分よくない部分も出るので。。。まぁ好みの問題でもありますが。。。とにかく自分はシンプルにXmlHttpRequestを使用した実装を行いました。
具体的には、HTMLでid="jax"とつけた領域のみを更新するなどです。中身としては「非同期通信はレスポンスを待たない」のでリクエストを送信してこのレスポンスが帰って来たときにXXXの処理をするというような形で実装するので「部分的に画面を更新できる」というわけです。
この部分は下の記事を参照願います。
JS XmlHttpRequest 〜JSでの同期/非同期通信〜

今回の実装では

MVCの「C」がない状態です。HTMLとPHPだけで処理を行い、画面の繊維を行わないのでControl部分がいりません。１画面で事を足らします。
というかほとんどをGoogleMapsAPIに依存する形で実装するのでサーバーサイドの処理はDBからのデータの取得、更新のみで良いのです。

MVモデル？

とってつけたようにいろんな言葉が横行していますが、それも時代でしょう。なので「MVモデル」という言葉はテキトーな事を記載しました。。。(冗談)
しかし、実装の方はHTML（V）とDB更新・データ取得(M)のみなのでこのような言い回しになりました。詳細に関しては以下のリンクを参照していただけるとありがたいです。

1. Google Maps API PHP連携 〜マップ情報をDBに登録する〜
2. PHP Ajax 〜DBに登録したデータを受信する〜

でわでわ。。。

イントロダクション

現在、GoogleMapを使用したブラウザアプリの作成中です(2019-07-11)。
実装中につまづいたのでメモがてらに記載します。
＜作成プログラム概要＞

• JSでのGoogleMap表示
• PHPでの入力データをDBに登録

こんな感じです。

PDO to MySql

• 参考サイト: PHPマニュアル

確認するポイント

• phpinfo()でPDOの使用が可能か確認

そして確認ができたらMySQLでのPDOのインストール方法（使用可能か確かめる)とDPDO使用方法を参照して使い方を理解する。

＜作成したコード＞

// DBアクセス
$dns = 'mysql:host=localhost;dbname=test_dbname';
$username = DB_USER;
$password = DB_PASS;
$driver_options = [
    PDO::MYSQL_ATTR_INIT_COMMAND => 'SET NAMES utf8',
    PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
    PDO::ATTR_EMULATE_PREPARES => false,
];
$insertQuery = "INSERT INTO AREA_INFO(AREA_ID, INFO_NAME, INFO_URL, INFO_IMAGE, INFO_LAT, INFO_LNG, OWNER_ID, UPDATE_DATE) VALUES(?, ?, ?, ?, ?, ?, ?, ?)";

try {
    $pdo = new PDO($dns, $username, $password, $driver_options);
echo "tee";
    $pdo->prepare($insertQuery);
    $pdo->bind(1, 1);
    $pdo->bind(2, $name);
    $pdo->bind(3, $url);
    $pdo->bind(4, $lat);
    $pdo->bind(5, $lng);
    $pdo->bind(6, $imgTmp, PDO::PARAM_LOB);
    $pdo->bind(7, 1);

} catch(Exception $e) {
    print($e->getTraceAsString());
}

PreparedStatement

SQLを実行するときによく使うのがプリペアードステートメント(PreparedStatement)です。
早い話が、SQLの値部分(?)にパラメータを渡してやるものです。
Sample

• INSERT INTO A_TBL(COL_A, COL_B) VALUES(?, ?);

というSQLクエリを実行(execute)しようとしたときに下のようにコードを書きました。

    $pdo->prepare($insertQuery);
    $pdo->bind(1, 1);
    $pdo->bind(2, $name);
    $pdo->bind(3, $url);
    $pdo->bind(4, $lat);
    $pdo->bind(5, $lng);
    $pdo->bind(6, $imgTmp, PDO::PARAM_LOB);
    $pdo->bind(7, 1);

エラリました。。。
マニュアルを見ると「bind」なんてメソッドはありませんでした。。。
なのでマニュアルに習い以下のように書き換えました。

try {
    $pdo = new PDO($dns, $username, $password, $driver_options);
echo "tee";
    $statement = $pdo->prepare($insertQuery);
    $statement->bindParam(":id", $id);
    $statement->bindParam(":name", $name);
    $statement->bindParam(":url", $url);
    $statement->bindParam(":img", $imgTmp, PDO::PARAM_LOB);
    $statement->bindParam(":lat", $lat);
    $statement->bindParam(":lng", $lng);
    $statement->bindParam(":owner", $ownerId);

    $statement->execute();

} catch(Exception $e) {
    print($e->getTraceAsString());
}

これでDBにデータの登録ができるようになりました。作成した画面はこちらです。

ちなみにSELECT文などは「query()」が使える。

try {
    $pdo = new PDO($dns, $username, $password, $driver_options);

    foreach ($pdo->query($selectQuery) as $row) {
        $tags = $tags . '
'
                . 'img src="data:image/jpg;base64,' . $row['INFO_IMAGE'] . '" alt="写真"'
                . '/div';
    }
    // コネクションの解放
    $pdo = null;
} catch(Exception $e) {
    print($e->getTraceAsString());
}
// レスポンスに出力
print($tags);

でわでわ。。。

invalid data source name

表題のエラーが出てすごく困っていました。
下のようにコードを作成し最後のnew PDOの部分でエラーになるので「おかしい！」と悩んでいました。
参考サイトPHPマニュアル

$dns = 'mysql:host=localhost;dbname=testdb';
$username = 'user';
$password = 'pass';
$driver_options = [
    PDO::MYSQL_ATTR_INIT_COMMAND => 'SET NAMES utf8',
    PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
    PDO::ATTR_EMULATE_PREPARES => false,
];
$pdo = new PDO($dsn, $username, $password, $driver_options);

解決

スペスミスでした(笑)

$dns = 'mysql:host=localhost;dbname=testdb';
$pdo = new PDO($dsn, $username, $password, $driver_options);

わかりづらいのですが、「$dns」と「$dsn」で間違っていたのでコンストラクタにから文字が渡されていました。。。

解決方法

以下のようにtry〜catchでエラーとレースを出力しました。

} catch(Exception $e) {
    print($e->getTraceAsString());
}

これでエラーの詳細が出力されるので一発で解決できました。

エラー出力、ハンドリングはちゃんとやりましょう(笑)

でわでわ。。。

AjaxとPHP

XMLHttpRequestでPHPにリクエストを飛ばしたときにはまりました。
JSONでリクエストを送信したもののPHPでファイルデータが取得できない。。。バイト文字を送信するのも一つですが…

解決

参考サイト
取得するのにFile形式で取得するようだった。。。。

$post_body = file_get_contents('php://input');


ここにたどり着くのに結構かかってしまいました。。。
みなさんお気をつけて。。。

取得はできたけど、データの操作が出来ず…

結局はフォームデータにファイルをセットして送信しました。

注意としては、XmlHttpRquestのヘッダーに何も設定しない状態でリクエストを飛ばす事、これを見つけるのに苦労しました(笑)

次は、PHPで、入力データ(文字列とファイル)をMySqlに登録しようと思います。

既に、試したのですがPDOが使えないサーバがあるので、php Infoで確認した方が安全です。

でわでわ。。。

No 'Access-Control-Allow-Origin'

こんなエラーが出ました。JavaScriptで以下のようなコードを実行したときです。

    xhr = new XMLHttpRequest();
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    xhr.onreadystatechange = recieveResponse
   xhr.open('GET', 'https://zenryokuservice.com/tools/maps/InsertMapInfo.php?param=test', true);
    xhr.send();


SampleMap.html:1 Access to XMLHttpRequest at 'https://zenryokuservice.com/tools/maps/InsertMapInfo.php?param=test' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

答え

異なるドメインから呼び出すと、このようになるようです。
セキュリティの問題なようです。まぁ確かによろしくはないですね。。。参考サイトより

対応

実はこのコードは自分のPCから直接実行しました。運用するときは自分のレンタルサーバー上にJSを配置するのでこの問題は起きません。。。
なのでサーバーにアップして再度実行します。

こんな感じでAjax通信のテストを完了できました。

作成したものはここにあります。

https://zenryokuservice.com/sample/js/SampleMap.html

次は

作成したフォームを送信します。

関連ページ

1. JS GoogleMaps API 〜オリジナル・データマップを作ろう〜
2. Github page 〜Github pageでリポジトリの情報を公開しよう〜
3. 夢を形にする① 目標ブレーク〜じゃんけんゲームの場合〜
4. プログラム 習得 順序1 概要

5. Githubページ関連

6. Github page 〜Github pageでリポジトリの情報を公開しよう〜
7. Github 使い方〜リポジトリにライセンスを設定する〜
8. Github 使い方〜Issueでやることを整理〜