CakePHP3でAjaxの都道府県プルダウン part1

カテゴリ:実物コーディングチャレンジ

公開日:2020.06.29 最終更新日:2020.06.29
このエントリーをはてなブックマークに追加

inglowの開発担当をしています寺澤です。今回は2回に渡って、CakePHP3でAjaxを活用した都道府県プルダウンを作成します。

★環境

  • PHP 7.4.6
  • CakePHP 3.8.*
  • PHPMyAdmin 5.0.2

目次

目的

何もありません。
「愛知県」の市区町村がとれました

今回はまず、都道府県のプルダウンを作成します。

最終目的としては、都道府県が選択されたら、Ajaxを利用して自動的にその都道府県に関連する市区町村のデータを取得して、プルダウン表示させます。

前提として、以下の説明に関しては省略します。

  • Excelで列の調整
  • CakePHP3のMVCの基本操作
  • jQueryのセレクタ 、メソッドの概念

手順は以下の通りです。

  1. 「総務省」のデータから「全国地方公共団体コード」をDBに保存
  2. Configで都道府県の配列を作成
  3. MVCを用意し、表示する

エクセルのファイルをCSVに変換

まずはこちらから、「都道府県コード及び市区町村コード」の最新版をインストール。インストールしたエクセルファイルをグーグルドライブで「行を削除」で始めの「団体コード‥‥」などの1行目を削除。

編集できたら.csvファイルでダウンロード。

DBにCSVファイルのインポート

DBに「address」テーブルを作成。

DBの確認。次はダウンロードした.csvファイルをインポートします。

もしここでインポートがうまくいかなかった場合、

AddressesテーブルにIDカラムが追加されている場合がありますので削除してから再度実行してみてください。

このように実行されていればOKです。

Configに都道府県配列作成

続いて、以下のファイルを作成します。

config/pref.php

<?php
$config[‘Pref’] = array(
‘codes’ => array(
“0” => “—–“,
“北海道” => “北海道”,
“青森県” => “青森県”,
“岩手県” => “岩手県”,
“宮城県” => “宮城県”,
“秋田県” => “秋田県”,
“山形県” => “山形県”,
“福島県” => “福島県”,
“茨城県” => “茨城県”,
“栃木県” => “栃木県”,
“群馬県” => “群馬県”,
“埼玉県” => “埼玉県”,
“千葉県” => “千葉県”,
“東京都” => “東京都”,
“神奈川県” => “神奈川県”,
“新潟県” => “新潟県”,
“富山県” => “富山県”,
“石川県” => “石川県”,
“福井県” => “福井県”,
“山梨県” => “山梨県”,
“長野県” => “長野県”,
“岐阜県” => “岐阜県”,
“静岡県” => “静岡県”,
“愛知県” => “愛知県”,
“三重県” => “三重県”,
“滋賀県” => “滋賀県”,
“京都府” => “京都府”,
“大阪府” => “大阪府”,
“兵庫県” => “兵庫県”,
“奈良県” => “奈良県”,
“和歌山県” => “和歌山県”,
“鳥取県” => “鳥取県”,
“島根県” => “島根県”,
“岡山県” => “岡山県”,
“広島県” => “広島県”,
“山口県” => “山口県”,
“徳島県” => “徳島県”,
“香川県” => “香川県”,
“愛媛県” => “愛媛県”,
“高知県” => “高知県”,
“福岡県” => “福岡県”,
“佐賀県” => “佐賀県”,
“長崎県” => “長崎県”,
“熊本県” => “熊本県”,
“大分県” => “大分県”,
“宮崎県” => “宮崎県”,
“鹿児島県” => “鹿児島県”,
“沖縄県” => “沖縄県”,
)
);

次に、config/bootstrap.phpの一番最後の行に追記。

Viewに表示

Configで作成した配列をビューで表示してみましょう

src/Template/Addresses/index.ctp

configで作成した配列をuseで読み込む必要があります。

なのでview側でuse文を書いています。後はoptionにそのまま書いてあげれば配列として読まれます。

今回はコントローラーに特に記述することはありません。

それでは実際にブラウザを開いて確認してみましょう。

以上のようにプルダウンができればOKです。

おわりに

次回はいよいよAjaxを利用して、都道府県の選択に合わせて市区町村の表示を変えていく処理を実装していきます。

ちょっと長くなりましたがお付き合いいただきありがとうございました。

一覧へ戻る