CakePHP3でAjaxの都道府県プルダウン part1
カテゴリ:実物コーディングチャレンジ
inglowの開発担当をしています寺澤です。今回は2回に渡って、CakePHP3でAjaxを活用した都道府県プルダウンを作成します。
★環境
- PHP 7.4.6
- CakePHP 3.8.*
- PHPMyAdmin 5.0.2
目次
目的
![](https://inglow.jp/wordpress/wp-content/uploads/2020/06/98770588bcf0f56feeadcedf51e02f9e-1-1024x618.png)
![](https://inglow.jp/wordpress/wp-content/uploads/2020/06/fb22d43f02617fd496b5bf0294c7ad71-1-931x1024.png)
今回はまず、都道府県のプルダウンを作成します。
最終目的としては、都道府県が選択されたら、Ajaxを利用して自動的にその都道府県に関連する市区町村のデータを取得して、プルダウン表示させます。
前提として、以下の説明に関しては省略します。
- Excelで列の調整
- CakePHP3のMVCの基本操作
- jQueryのセレクタ 、メソッドの概念
手順は以下の通りです。
- 「総務省」のデータから「全国地方公共団体コード」をDBに保存
- Configで都道府県の配列を作成
- MVCを用意し、表示する
エクセルのファイルをCSVに変換
まずはこちらから、「都道府県コード及び市区町村コード」の最新版をインストール。インストールしたエクセルファイルをグーグルドライブで「行を削除」で始めの「団体コード‥‥」などの1行目を削除。
編集できたら.csvファイルでダウンロード。
![](https://inglow.jp/wordpress/wp-content/uploads/2020/06/602fe21b63fa1ba8b14132addb737827-1024x767.png)
DBにCSVファイルのインポート
DBに「address」テーブルを作成。
1 |
bin/cake bake migration CreateAddresses |
![](https://inglow.jp/wordpress/wp-content/uploads/2020/06/3f61d02b376aa74e1a96f96f45ad945b-1024x752.png)
1 |
bin/cake migrations migrate |
DBの確認。次はダウンロードした.csvファイルをインポートします。
![](https://inglow.jp/wordpress/wp-content/uploads/2020/06/6a26ce1d5479f38960bcc6dcdd8a4a95-1024x688.png)
もしここでインポートがうまくいかなかった場合、
AddressesテーブルにIDカラムが追加されている場合がありますので削除してから再度実行してみてください。
![](https://inglow.jp/wordpress/wp-content/uploads/2020/06/311e480a3e6fc2e3946591c725a263e9-683x1024.png)
このように実行されていればOKです。
Configに都道府県配列作成
続いて、以下のファイルを作成します。
config/pref.php
次に、config/bootstrap.phpの一番最後の行に追記。
1 |
Config::load('pref'); |
Viewに表示
Configで作成した配列をビューで表示してみましょう
src/Template/Addresses/index.ctp
![](https://inglow.jp/wordpress/wp-content/uploads/2020/06/72924af5373f468ec2be70d122d01f8a-1-1024x887.png)
configで作成した配列をuseで読み込む必要があります。
なのでview側でuse文を書いています。後はoptionにそのまま書いてあげれば配列として読まれます。
1 |
bin/cake bake controller Addresses |
今回はコントローラーに特に記述することはありません。
それでは実際にブラウザを開いて確認してみましょう。
![](https://inglow.jp/wordpress/wp-content/uploads/2020/06/0db94e10a09fc9b67786c4b2113bf9d7-1024x542.png)
![](https://inglow.jp/wordpress/wp-content/uploads/2020/06/07189829a58e7de0702239b44e43672a-1024x770.png)
以上のようにプルダウンができればOKです。
おわりに
次回はいよいよAjaxを利用して、都道府県の選択に合わせて市区町村の表示を変えていく処理を実装していきます。
ちょっと長くなりましたがお付き合いいただきありがとうございました。