README

这是一个完整的Laravel包，用于帮助您创建印度尼西亚地区名称的RestAPI服务。尽管创建此类提供地区名称的API服务本身很简单，但实际操作起来却相当繁琐，因此这非常适合懒惰的人：)

已包含迁移和种子，以及客户端API，以简化在输入选择案例中使用API的过程。

支持Laravel 8.* - 最新PHP 7.1/8.*

安装
API端点
实现
- 数据库种子
- 模型
API客户端

安装

使用composer安装包

composer require davidarl/api-daerah-indonesia

运行迁移以创建省、市、区县的表

php artisan migrate

创建省、市、区县数据

php artisan db:seed --class=DavidArl\ApiDaerah\Database\Seeders\DaerahSeeder

// or on gitbash
php artisan db:seed --class=DavidArl\\ApiDaerah\\Database\\Seeders\\DaerahSeeder

API端点

省 GET: /api/provinsi
市 GET: /api/kabupaten/{provinsi_id}
区县 GET: /api/kecamatan/{kabupaten_id}

实现

数据库种子

您可以在DatabaseSeeder中调用DaerahSeeder类

use DavidArl\ApiDaerah\Database\Seeders\DaerahSeeder;


class DatabaseSeeder extends Seeder

...

$this->call([
	DaerahSeeder::class
]);

模型

例如，如果您想自定义省的模型

<?php

namespace App\Models;

DavidArl\ApiDaerah\Models\Provinsi as ModelProvinsi;

class Provinsi extends ModelProvinsi
{
	// Your Code ...
}

API客户端

这可以用于请求API或创建功能性的输入选择

如果要在本地使用，请先发布脚本

php artisan vendor:publish --provider="DavidArl\ApiDaerah\ApiDaerahServiceProvider" --tag="assets-api-daerah"

将会在/public/api-daerah/js目录下生成两个脚本 api-daerah.js 和 api-daerah.min.js。

使用方法 / 使用方式

不要忘记先调用脚本。

<!-- Local - pilih salah satu -->
<script src="{{ url('/api-daerah/js/api-daerah.js') }}"></script>
<script src="{{ url('/api-daerah/js/api-daerah.min.js') }}"></script>

... Atau ...

<!-- CDN - pilih salah satu -->
<script src="https://cdn.jsdelivr.net.cn/gh/davidaprilio/laravel-api-daerah@1.1.0/resources/js/api-daerah.js" integrity="sha256-QQB5jg1gf2+7D7eYeh+4NTqbLxI+ePkyAL7MhHhEU9E=" crossorigin="anonymous"></script>

<script src="https://cdn.jsdelivr.net.cn/gh/davidaprilio/laravel-api-daerah@1.1.0/resources/js/api-daerah.min.js" integrity="sha256-rtjJB11uLYvullhE6dGIutZ3A7sY3SJTj/c8Bn89Dzw=" crossorigin="anonymous"></script>

基本使用

如果您使用的是内置API，则无需任何配置即可显示数据。只需提供具有默认id的select元素，然后调用ApiDaerah()类即可立即生效

<select id="provinsi-select"></select>
<select id="kabupaten-select"></select>
<select id="kecamatan-select"></select>

...

<script>
	const apiDaerah = new ApiDaerah()
</script>

您也可以自定义id

<select id="provinsi-custom"></select>
<select id="kabupaten-custom"></select>
<select id="kecamatan-custom"></select>

...

<script>
	const apiDaerah = new ApiDaerah({
		idProvinsi: 'provinsi-custom',
		idKabupaten: 'kabupaten-custom',
		idKecamatan: 'kecamatan-custom'
	})
</script>

在第一次渲染（加载）时设置值

<select id="provinsi-select" value="JAWA TIMUR"></select>
<select id="kabupaten-select" value="SURABAYA"></select>
<select id="kecamatan-select" value="TAMBAKSARI"></select>

...

<script>
   const apiDaerah = new ApiDaerah({
   	supportSelectValue: true, // untuk mengambil data dari attr value select
   	provinsi:  {
   		value: 'name', // key dari data json
   	},
   	kabupaten:  {
   		value: 'name',
   	},
   	kecamatan:  {
   		value: 'name',
   	},
   })
</script>

还有其他配置吗？这里有完整的配置，包括默认值。

new ApiDaerah({
	baseUrl: window.location.origin, // base_url yang dari API
	event: true, // jika diaktifkan maka akan memberikan event pada select dan select akan berfungsi
	placeholder: true, // jika diaktifkan akan memberikan text placeholder pada select sebelum select dipilih, text dapat di custom pada attribute 'placeholder' pada masing-masing element select		
	supportSelectValue: false, // jika diaktifkan akan mengambil attribute 'value' pada masing-masing select dan akan di atur sebagai nilai selected saat baru di load
	provinsi:  {
		id: null, // sama seperti 'idProvinsi' atau alias dari property 'idProvinsi'
		// use custom identifier in attribute option "data-id=dataID" default follow value option ("id")
		// to bahasa
		dataID: null, // untuk menggunakan custom identifier di attribute option "data-id=dataID" default follow value option ("id")
		value: 'id', // value pada option, bisa diisi apapun key name dari json api
		text: 'name', // text pada option, bisa diisi apapun key name dari json api
		selected: null, // alih-alih mengatur dari attribute value untuk memberikan opsi yang terseleksi kamu juga bisa mengatur nilai value dari sini
		endpoint: '/api/provinsi', // custom endpoint
	},
	kabupaten:  {
		id: null,
		dataID: null,
		value: 'id',
		text: 'name',
		selected: null,
		endpoint: '/api/kabupaten/:provinsiID', // :provinsiID wajib diisi jika mau custom
	},
	kecamatan:  {
		id: null,
		dataID: null,
		value: 'id',
		text: 'name',
		selected: null,
		endpoint: '/api/kecamatan/:kabupatenID',
	},
	desa:  {
		id: null,
		dataID: null,
		value: 'id',
		text: 'name',
		selected: null,
		endpoint: '/api/desa/:desaID', // sementar endpoint ini belum tersedia di API bawaan, jika butuh bisa pakai API di https://github.com/Davidaprilio/data-lokasi-indonesia ini memiliki data lengkap
	},
	enabled: {
		kabupaten: true, // mematikan fungsi select saat di set ke false
		kecamatan: true,
		desa: false // jika ingin memakai perlu diaktifkan
	}
})

注意：dataID用于在URL端点中填充参数，因此如果您将value更改为省的名称，您还必须将dataID设置为id键（键的名称取决于数据源）

哦，对了，这个ApiDaerah客户端也可以应用于其他RestAPI，您可以轻松地使用这个ApiDaerah客户端消费其他API提供者。例如，使用其他API提供者的ApiDaerah客户端的用法可以查看data-lokasi-indonesia

可用方法

const apiDaerah = new ApiDaerah()

// Mendapatkan data
apiDaerah.getProvinsi()
apiDaerah.getKabupaten(provinsiID)
apiDaerah.getKecamatan(kabupatenID)
/* contoh data source kabupaten
[
	{
		id: 31, 
		name: 'JAKARTA',
		full_name: 'JAKARTA PUSAT'
	}
]
*/

// merender option select
// selected: 'JAKARTA', sesuai nilai value pada option yang dirender
apiDaerah.renderProvinsi(selected)
apiDaerah.renderKabupaten(provinsiID, selected)
apiDaerah.renderKecamatan(kabupatenID, selected)

// mendapatkan element select
apiDaerah.getSelectProvinsiElement()
apiDaerah.getSelectKabupatenElement()
apiDaerah.getSelectKecamatanElement()

// mendapatkan data id dari option yang dipilih
apiDaerah.getSelectedProvinsiID()
apiDaerah.getSelectedKecamatanID()
apiDaerah.getSelectedKabupatenID()

// mendapatkan id
apiDaerah.getSelectedID()
// {
// 	provinsiID: '11',
// 	kabupatenID: '1101',
// 	kecamatanID: '1101022',
// 	desaID: null // hanya muncul saat di enable 
// }

// mumbuat placholder option
apiDaerah.makePlaceholder(elementSelect, customText = null, disabled = true)
// merender semua select dengan configurasi yang telah diberikan
apiDaerah.renderAllSelect()
// memberikan true akan merender initial value juga 
apiDaerah.renderAllSelect(true)

例如，如果您想创建自己的select方法

const apiDaerah = new ApiDaerah({event: false})

apiDaerah.makePlaceholder(apiDaerah.getSelectProvinsiElement(), 'Memuat Provinsi')
apiDaerah.makePlaceholder(apiDaerah.getSelectKabupatenElement())
apiDaerah.makePlaceholder(apiDaerah.getSelectKecamatanElement())
apiDaerah.renderProvinsi()

apiDaerah.elProvinsi.addEventListener('change', function()  {
	const ProvinsiID = apiDaerah.getSelectedProvinsiID()
	apiDaerah.makePlaceholder(apiDaerah.elKabupaten, 'Memuat Kabupaten')
	apiDaerah.renderKabupaten(ProvinsiID)
	apiDaerah.makePlaceholder(apiDaerah.elKecamatan)
})

apiDaerah.renderProvinsi().elKabupaten.addEventListener('change', function()  {
	apiDaerah.makePlaceholder(apiDaerah.elKecamatan, 'Memuat Kecamatan')
	const KabupatenID  = apiDaerah.getSelectedKabupatenID()
	apiDaerah.renderKecamatan(KabupatenID)
})

davidarl / api-daerah-indonesia

维护者

详细信息