概要

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

下記手順で利用できるよう設定する
① 公式サイトからインストール
　 ※Windowsとその他OSとでインストーラが違うため注意

② インストールしたzipを解凍する。
　 ※C直下あたりオススメ

　中にはphp.exeがあるはず

③ phpのためにパスを通す
　下記のようにパスの設定を行う

④ パスが通ているか確認する
　下記の通りphp -vで確認できる

php.ini

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

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

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

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を導入する

上記を導入することで、適当な位置で右クリックすると下記が表示されるようになる

これで気軽に実行することができる

mariaDB

下記のようなテーブルを用意した

なおDBはローカルホスト上にある

実装

ここでは先に用意したDBから各都道府県にあわせた市町村を非同期で取得することを目的とする
イメージは下記の通り

⇓

html

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

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の実装は下記の通り

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種に分けた

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>"

?>

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を追加するだけで、セレクトボックスも自動で置き換わる

VSCodeを使ってAjax+PHP

概要

実行環境

実践

前準備

PHP

php.ini

VSCode

mariaDB

実装

html

js

php