VSCodeを使ってAjax+PHP

# 概要
PHP＋Ajax＋mariaDBでDBに保存されている市区町村を取得する
環境はVSCodeのExtentionで補う
(xamppを使えば一瞬とか言わない)
なお私自身はPHPを触り始めて3日目である
そしてjs系は苦手なのである
温かい目で見守っていただきたい

# 実行環境
実行環境は下記の通り

|名称|バージョン|
|:-:|:-:|
|OS|Windows10 Pro|
|エディタ|VSCode 1.39.2|
|PHP|7.3.10|
|mariaDB|10.1.38|


# 実践
## 前準備
PHPを利用するための準備を行う

### PHP
下記手順で利用できるよう設定する
① [公式サイト](https://www.php.net/downloads.php)からインストール
　 ※Windowsとその他OSとでインストーラが違うため注意

② インストールしたzipを解凍する。
　 ※C直下あたりオススメ
![2019-10-18_16h23_47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/318745/ba26e330-9563-a46c-3ba5-8c8094043042.png)

　 中にはphp.exeがあるはず
![2019-10-18_16h24_33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/318745/28375dc3-ae57-b8dc-4c5b-4b840d708573.png)

③ phpのためにパスを通す
　 下記のようにパスの設定を行う
![2019-10-18_16h26_26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/318745/63c73356-90a2-146b-5962-1a4619c98bda.png)

④ パスが通ているか確認する
　 下記の通り``php -v``で確認できる
![2019-10-18_16h27_32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/318745/45150d19-a6ef-b330-1a41-5f54df089fe1.png)

### php.ini
phpの設定をデフォルトから変更する必要がある。

① php.iniの作成
　 デフォルトではphp.iniがないため、下記の通り作成する
　
　 ㋐ 「php.ini-development」をコピーする
　 ㋑ ㋐でコピーしたものを同一フォルダに貼り付けて、「php.ini」にリネームする

② php.iniの編集
　 上記ファイルを開くと1943行くらい表示される
　 そこから下記に該当する部分をコメントアウトする

```ini:php.ini
; Directory in which the loadable extensions (modules) reside.
; http://php.net/extension-dir
;extension_dir = "./"
; On windows:
extension_dir = "ext"  # 754行目くらい

----

;extension=bz2
;extension=curl
;extension=fileinfo
;extension=gd2
;extension=gettext
;extension=gmp
;extension=intl
;extension=imap
;extension=interbase
;extension=ldap
extension=mbstring # 916行目くらい
;extension=exif      ; Must be after mbstring as it depends on it
;extension=mysqli
;extension=oci8_12c  ; Use with Oracle Database 12c Instant Client
;extension=odbc
extension=openssl # 921行目くらい
;extension=pdo_firebird
extension=pdo_mysql # 923行目くらい、今回はmariaDBを利用予定のためコメントアウトした
;extension=pdo_oci
;extension=pdo_odbc
;extension=pdo_pgsql
;extension=pdo_sqlite
;extension=pgsql
;extension=shmop
```

上記で設定は完了する

### VSCode
VSCodeでは下記のExtentionを導入する
![2019-10-18_16h38_18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/318745/ed21cfc2-e904-dff3-9085-39a0519b7909.png)

上記を導入することで、適当な位置で右クリックすると下記が表示されるようになる
![2019-10-18_16h39_13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/318745/2b2d67e2-e7af-78a6-bc71-80899fd4fd55.png)
これで気軽に実行することができる


### mariaDB
下記のようなテーブルを用意した
![2019-10-18_16h57_06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/318745/82f1b148-c0d0-33a5-431f-5f0e30f6c2cc.png)
なおDBはローカルホスト上にある

## 実装
ここでは先に用意したDBから各都道府県にあわせた市町村を非同期で取得することを目的とする
イメージは下記の通り
![2019-10-18_16h59_21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/318745/d65e2348-d2d3-40ba-8ccc-07422b4694ec.png)
⇓
![2019-10-18_17h00_20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/318745/85b8cc3f-5d15-6861-5fe8-2200e518534f.png)


### html
今回は画面遷移しないため、1枚で事足りる

```html:ajax_sample.html
<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <title>ajaxのサンプル</title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
    <!-- まずはhtmlに直接スクリプトを書き込んでみる。取り合えず読み込むときにprefecture一覧を読み込み、セレクトボックスに入れられるよう設定する　-->
    <script type="text/javascript">
        window.onload = function () {
            $.ajax({
                type: "POST",
                url: "prefecture.php",
                success: function (data, dataType) {
                    alert(data);
                    $('#option').html(data);
                },
                error: function () {
                    alert('通信エラー');
                }
            });
            return false;
        };
    </script>
    <script type="text/javascript" src="./ajax.js"></script>
</head>

<body>
    <div>
        <h1>ajaxのサンプル</h1>
    </div>
    <div>
        <main>
            <div>
                <b>検索</b>
            </div>
            <form id="searchForm" method="post">
                <table>
                    <tr>
                        <th>都道府県</th>
                        <td id="option">
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <input type="submit" value="検索" id="search_button" />
                        </td>
                    </tr>
                </table>
            </form>
            <div id="response"></div>
        </main>
    </div>
</body>

</html>
```

とくにポイントというポイントはない。
js自体が苦手なため、htmlに直接書き込むパターンと別にファイルを用意するパターンとを無意味に分けた程度
セレクトボックスはベタ書きする手もあるだろうが、今回はDBから取得するパターンとした


### js
ajaxの実装は下記の通り

```js:ajax.js
$(function () {

    $('#search_button').click(function () {

        var data = { request: $('#request').val() };

        $.ajax({
            type: "POST",
            url: "city.php",
            data: data,
            success: function (data, dataType) {
                $('#response').html(data);
            },
            error: function () {
                alert('通信エラー');
            }
        });
        return false;
    });
});
```

ここはシンプルに実装した
city.php側でhtmlタグを設定しているため、帰ってきたdataをhtmlに加工しただけ

### php
phpは都道府県一覧を表示するためのものと、市区町村表示用の2種に分けた

```php:prefecture.php
<?php

    header('Content-type: text/plain; charset=utf-8');

    $pdo = new PDO('mysql:host=localhost;dbname=php','root','');
    $sql = "select prefecture from address group by prefecture";
    $results = $pdo->query($sql);

    echo "<select id='request' name='prefecture_name'>";
    echo "<option value=''selected></option>";
    foreach($results as $result){
        echo "<option value='".$result['prefecture']."'>".$result['prefecture']."</option>";
    }
    echo "</select>"

?>
```

```php:city.php
<?php

$PREFECTURE = $_POST['request'];
header("Content-type: text/plain; charset=UTF-8");
if(!empty($PREFECTURE)){
    $pdo = new PDO('mysql:host=localhost;dbname=php','root','');
    $sql = "select city from php.address where prefecture ='$PREFECTURE'";
    $results = $pdo->query($sql);

    echo "<table>";
    echo "<tr><th>市町村</th></tr>";
    foreach($results as $result){
        echo "<tr>";
        echo "<td>".$result['city']."</td>";
        echo "</tr>";
    }
    echo "</table>";
}else{
    echo "<p>エラー</p>";
}

?>
```

最初のheaderは設定しなくてもデフォルトで問題ないように感じるが、最初上手にいかなかったため設定した
PDO以下は自身のDBの設定によって変わってくる
また聞いた話だと``<?php``が``<?``だけだとエラーになる可能性があるらしい

上記実装したうえで、
右クリック⇒「PHP Server: Serve Project」でブラウザが立ち上がる
セレクトボックスもDBから取得しているため、あとはDBを追加するだけで、セレクトボックスも自動で置き換わる