17 February 2018
Mungkin bagi beberapa pengguna WordPress ada yang kepikiran bagaimana membuat combo box bertingkat pada sebuah form. Misal untuk input Propinsi, Kabupaten/Kota, Kecamatan dan Keluarahan. Jika kita mempunyai dasar pemrograman PHP dan Javascript/jQuery maka kita dapat menerapkannya pada WordPress dan Contact Form 7.
Untuk memulainya pastikan plugin Contact Form 7 telah terinstall pada WordPress Anda. Kemudian impor data-data provinces, regencies, districts & villages ke database MySQL Anda, data source dapat Anda perloleh dari https://github.com/edwardsamuel/Wilayah-Administratif-Indonesia. Setelah mengimpor, jangan lupa rename tabel-tabel tersebut dengan menambahkan prefix yang sesuai dengan tabel-tabel lainnya pada database WordPress Anda ( defaultnya adalah wp_ ).
Persiapan selanjutnya adalah menyiapkan direktori baru pada /wp-content/plugins. Beri nama cf7-chained-select, kemudian dalam direktori tersebut buatlah 2 file. File pertama beri nama cf7-chained-select.php dan file kedua beri nama chainedselect.js.
Edit contact form default bawaan plugin Contact Form 7 ( contact form 1 ) pada menu Contact -> Contact Forms. Tambahkan field-field sebagai berikut setelah "Your Email"
Buat page baru, kemudian tambahkan shortcode contact form pada content editor. Beri nama cf7-administrative-data pada slug/permalink page baru tersebut.
Buka file cf7-chained-select.php, kemudian tambahkan header file sebagai berikut:
Untuk lebih lengkap mengenai header file, Anda dapat membaca dokumentasi lengkapnya pada WordPress Codex https://codex.wordpress.org/File_Header.
Buka kembali file cf7-chained-select.php, tambahkan filter hook & callback untuk mengisi select box pertama dengan data-data propinsi yang didapat dari tabel provinces.
wpcf7_form_tag adalah hook bawaan Contact Form 7. Untuk lebih lengkap hook-hook bawaan Contact Form 7 dapat dilihat pada url http://hookr.io/plugins/contact-form-7/4.7/hooks/.
$wpdb adalah objek global untuk akses database pada WordPress. Untuk lebih lengkapnya silahkan baca-baca pada url https://codex.wordpress.org/Class_Reference/wpdb.
Simpan file cf7-chanied-select.php tersebut, kemudian buka menu Plugins, aktifkan plugin yang baru kita buat tersebut. Selanjutnya buka halaman http(s)://[url-anda.tld]/cf7-administrative-data/ untuk memastikan data-data propinsi terisi dengan benar.
Buka kembali file cf7-chained-select.php, tambahkan action hook untuk menangani request Ajax.
Masih pada file cf7-chained-select.php, tambahkan action hook untuk me-load javascript pada halaman cf7-administrative-data.
Simpan file cf7-chained-select.php, kemudian buka file chainedselect.js, tambahkan kode berikut:
Simpan file tersebut dan buka kembali halaman http(s)://[url-anda.tld]/cf7-administrative-data/ Anda untuk melihat hasil akhir "mini plugin" kita.
Lihat demonya disini.
Plugin yang barusan kita buat masih sangat sederhana dan perlu diperhatikan organisasi kodenya untuk pengembangan kedepan. Namun sangat cukup untuk memberikan pengalaman coding pada WordPress karena didalamnya terdapat poin-poin berikut :
Happy WordPressing.
Bro buatkan tutorial popular post daily, weekly, monthly, dan sepanjang masa.
Jadi sistemnya count dr IP biar gx banyak insert data ke database.
mudah2an ada waktunya ya bro
Masih bingung, saya coba malah gk muncul daftar provinsi nya
Udah import tabel2 ini ? https://github.com/edwardsamuel/Wilayah-Administratif-Indonesia
Kalo udah, plugin yg baru dibuat (CF7 Chained select) udah di-activate ?
nama table database sdh di ganti menjadi wp_provinces, wp_regencies, wp_districts sesuai nama table bawaan wordpress tapi ternyata yang berfungsi propinsinya azah bos sedangkan yang lainnya ga ada yang fungsi bos. Mohon bantuannya
coba di-inspect browsernya, kalo pilih provinsi ngga ada respon, mungkin ada yang salah dari javascriptnya
kalau nama nama propinsi sudah tampil semua, tapi untuk nama kota, kecamatan dan kelurahan tidak bisa tampil seperti propinsi, java script sesuai dengan petunjuk dari https://solusipress.wpmudev.host/menambahkan-combo-box-bertingkat-pada-contact-form-7/ barangkali ada revisi script. mohon di kirim ke email saya ezzydawuansela@gmail.com. Terima kasih
sudah ketemu pak, permasalahannya setelah saya pelajari krn tidak adanya load java script untuk regency, district dan village, boleh saya minta ketiga load script tersebut?
sip... di script chainedselect.js diatas ada kan trigger untuk load regency, district & village ?
Setelah saya cermati dan saya tambahkan ternyata, loadscriptnya yang full dan bisa aktif seperti ini bos: Izin share Bos: get_results( "select * from {$wpdb->prefix}provinces order by id asc", OBJECT ); foreach( $provinces as $province ) { $scanned_tag['raw_values'][] = $province->name; $scanned_tag['values'][] = $province->id; $scanned_tag['labels'][] = $province->name; } } return $scanned_tag; }; add_filter( 'wpcf7_form_tag', 'filter_wpcf7_load_provinces', 10, 2 ); function filter_wpcf7_load_regencies( $scanned_tag, $this_exec ) { if( $scanned_tag['name'] == 'regency') { global $wpdb; $regencies = $wpdb->get_results( "select * from {$wpdb->prefix}regencies order by id asc", OBJECT ); foreach( $regencies as $regency ) { $scanned_tag['raw_values'][] = $regency->name; $scanned_tag['values'][] = $regency->id; $scanned_tag['labels'][] = $regency->name; } } return… Read more »
Sebenernya load regency, district & village ngga perlu diawal, karena tujuannya list regency muncul ketika province dipilih ( termasuk district & village ).
Bisa dilihat demonya disini: https://yeriepiscesa.com/cf7-administrative-data/
Kecuali tujuannya untuk edit data, load diawal mungkin perlu, tapi tetap ada filter sql di setiap loadnya untuk menghindari semua data muncul di select dropdown . misal:
$regencies = $wpdb->get_results( $wpdb->prepare( "select * from {$wpdb->prefix}regencies where province_id=%s order by id asc", $province_id ), OBJECT );Nah itu dia pak salah satu permasalahannya data di regency dan district dan village muncul semua, oh ya pak satu hal lagi di dalam database indonesia,sql ada beberapa desa yang sama kode areanya sehingga tidak bisa terimport, dan banyak desa yang belum masuk ke dalam database sehingga akhirnya di revisi ulang deh untuk menambahkan desa ataupun kelurahan yang belum ada dan merubah kodenya juga agar desa ataupun kotanya bisa terimport semua
masa sih ada yg sama? saya cek ngga koq:
select id, count(id)
from tbl_villages group by id
having count(id) > 1
kalo ada data yg kurang ya mau ngga mau ditambah manual, atau nunggu update dari yg punya project (https://github.com/edwardsamuel/Wilayah-Administratif-Indonesia)
atau bisa juga memanfaatkan API dari rajaongkir buat ambil provinsi -> kota (versi free). contoh : https://demo.solusipress.wpmudev.host/forminator-test/demo-pendaftaran-kompetisi/
thanks atas scriptnya sudah coba diaplikasikan,
pertanyaan lain bagaimana yah jika data yang di email itu langsung nama sesuai labelnya bukan value yang berupa angka, karena yg terkirim ke email itu berupa ID value yang beruapa angka, sementara untuk memudahkan kita ingin manampilkan label provice, regency, district, village.
Coba manfaatkan hidden field. misal :
Kemudian pada trigger change bisa ditambah kode seperti dibawah:
$( '#province_id' ).on( 'change', function() { // script sebelumnya .... $( '#province_name' ).val( ( $(this).find( "option:selected" ).text() ) ); } );Mohon maaf setelah saya tambahkan script pada trigger change di baris ke 38 ternyata muncul tanda seru, apakah ada kesalahan dalam penulisan script? mohon petunjuknya pak.
$( '#province_name' ).val( ( $(this).find( "option:selected" ).text() ) );
} );
Detail tanda serunya apa yah ?
Coba di-inspect hidden field-nya, pastikan ketika select province dipilih, nilainya ikut berubah. lihat gambar
untuk full js-nya, bisa dilihat disini: view-source:https://yeriepiscesa.com/wp-content/plugins/cf7-chained-select/chainedselect.js?ver=4.9.8
Okey pak terima kasih script tersebut :
di masukan dibaris 15
$( ‘#province_name’ ).val( ( $(this).find( “option:selected” ).text() ) );
} );
di masukan dibaris 22
$( '#regency_name' ).val( ( $(this).find( "option:selected" ).text() ) );
di masukan dibaris 33
$( '#district_name' ).val( ( $(this).find( "option:selected" ).text() ) );
di masukan dibaris 43
$( '#village_name' ).val( ( $(this).find( "option:selected" ).text() ) );
Kang ezzy
ini yang vilage name di baris 43 tapi value namanya ndak muncul
om prefik table aku wpo8_
dah aku rename 4 table barunya kok ngk keluar profinsinya
mohon prncerahan
saya sudah import juga rename 4table dimana prefiksaya wpo8_
php juga sudah saya bikin .
knp ya bos ngk muncul provinciesnya
Plugin yg dibuat (CF7 Chained select) sudah di-activate ?
Mas klo bikin field required gmn?
Soalnya NGK di is I jg bs ke kirim
Terimakasih
Kasih tanda bintang(*) di fieldnya, contoh:
1.Mas bikin upload image crop form 7 tutorialnya
2.gimana tampilan database provinsi DLL ,ngk cuma I'd aja ma's
Susan bacanya
Teeima kasih
1. Coba diintegrasikan dengan image uploader semacam http://scottcheng.github.io/cropit/ . Untuk tutorial mungkin ngga dalam waktu dekat.
2. Untuk nampilin nama provinsi dll di email yg dikirim, coba liat2 di komentar sebelumnya https://solusipress.wpmudev.host/menambahkan-combo-box-bertingkat-pada-contact-form-7/#comment-18
https://yeriepiscesa.com/wp-content/plugins/cf7-chained-select/chainedselect.js?ver=4.9.8
saya sudah ikutin yg .js ini
kenapa ya di hasil database selalu id nya
ngk tampil text nya / nama namanya ?
salah di mananya ya om
udah bisa om database nya .. keluar nama nama ( dah okay )
terimakasih clue2nya
Mas bikin upload image crop form 7 tutorialnya
mas bisa sampe kelurahan ngk ??
Itu sudah sampai kelurahan. village = desa = kelurahan 🙂
Selamat pagi pak,
bis kah ini dipakai bersamaan dengan form cf7 yang ke WhatsApp?
Kalau isa, mohon pencerahannya pak untuk memasukkan data nya ke pesan WA.
Terimakasih
Bisa... lebih gampang pakai plugin ini https://solusipress.com/download/contact-form-7-send-to-whatsapp/
selamat sore mas, saya sudh coba ikuti semua tutorial yg diatas, hanya bisa tampil utk pilihan provinsi, sedangkan pilihan yg lain tidak bisa. kenapa ya?
Boleh lihat hasilnya?
https://meejuindonesia.com/mji7gpvpt/
mohon bantuannya ya mas, tutorialnya sangat membantu kami yang masih belajar ini
sepertinya page_slug tidak match, kalau urlnya itu seharusnya $page_slug = 'mji7gpvpt';
nanti kalau diview-source ada link ke script seperti gambar ini.
gimna ya mas, cara memperbaikinya ?
udah diinfo kan, di bagian $page_slug. sesuaikan sama slug yg di url.
misal halamannya https://domain.com/this-is-slug
maka:
$page_slug = 'this-is-slug';
Mas klo saya pengen habis pilih keluran muncul kode posnya yg sudah saya tambahkan di tabel villages gmna ?
yg pasti ngerubah fungsi wpcf7_get_administrative & tambah event change di #village_id
Bro, saya coba tambahkan tabel kode pos, join sama tabel provinsi, tp gak tampil ya?
apa query nya ada yg salah?
if( isset( $_POST['postal'] ) ) {
$postal_id = $_POST['postal'];
$sql = $wpdb->prepare( "select * from {$wpdb->prefix}provinces inner join {$wpdb->prefix}postal_code on {$wpdb->prefix}provinces.id = {$wpdb->prefix}postal_code.province_id", $postal_id );
}
paramater kedua(dan selanjutnya) di method prepare untuk mengisi variable(misal %s atau %d) di string sql.
kalau ngga ada, ngga perlu paramater kedua itu.
untuk cek query jalan atau ngga, di-echo aja hasil variabel $sql-nya (method prepare hasilnya adalah query sql yg siap dirunning ke mysql), terus dijalanin di phpmyadmin.
ok bro, udh bisa. saya buat berdasarkan kelurahan biar yg muncul 1 kodepos aj untuk memudahkan user.
oh iya, nambah attr (selected) di option yg udh di pilih Gmn ya bro? saya cari2 blm nemu
udh bisa bro.
var select = $(this).val();
$("option[value=" + select +"]").attr("selected","selected");
Siap... semangat terus belajarnya bro.
Mas Yerie, pada saat di plugin diaktifkan fatal error Parse error: syntax error, unexpected '<', expecting end of file in C:\xampp\htdocs\idplay\wp-content\plugins\cf7-chained-select\cf7-chained-select.php on line 8, kenapa ya mas? tks
itu kan ada keterangannya, Parse error: syntax error, unexpected '<', expecting end of file artinya ada penulisan kode yg salah, ada '<' yang ngga diperlukan.
iya mas tksh, saya buta script hanya mengikuti tutorial di atas.. kode '<' ada pada <?php..trus gmn mas Yerie
kalau pake plugin code snippets, ngga perlu <?php di bagian atasnya.
kecuali sebelumnya ada code penutup (?>)
saya ngga pake code snippets mas, pure ngacu ke tutorial di atas
intinya kalo udah ada "", ngga perlu pake "
ada panduan berupa video pak, soalnya baru belajar wp
ngga ada
saya coba buat berkali2 gagal, data provinsi hingga desa tidak muncul
apa salah dalam membuat file2 plugin nya ya ?
jika ada pluginnya yg sdh siap pasang, boleh pak dishare
ngga ada juga
kemungkinan besarnya sih ada yg salah setup/nulis kodenya. coba dibaca lebih teliti lagi, sambil dibaca komentar2nya juga
msh belum bisa muncul apapun, https://bisabayar.id/daftar/
ngikutin panduan yang ada
kira2 ada salahnya ndak ya pak ?, maklum msh belajar
tabel2 propinsi dkk sudah diimport ke db ?
Sudah pak
kalau databasenya terpisah dari databasenya wordpress, di query sql harus ada nama databasenya. contoh:
select * from klikayat_daftar.{$wpdb->prefix}provinces
Alhamdulillah, tahapan memunculkan data2 sudah bisa pak, hanya saja pas kami test.
Yang masuk pada email kami itu selain dari data2 table tersebut. Jadi data provinsi dkk tidak ada pada email penerima
Alhamdulillah, tahapan memunculkan data2 sudah bisa pak, hanya saja pas kami test.
Yang masuk pada email kami itu dari data provinsi dkk hnya nomor id saja, sdh mencoba cara yg ada dkolom komntar untuk menggunakan hiden trigger change msh gagal jga
Link full js yg dkomentar ndak bisa dbuka lagi
https://bisnisdemo.solusipress.com/wp-content/plugins/cf7-chained-select/chainedselect.js?ver=1.0.3
Terima kasih banyak pak
Mas, bs ga dibuatkan videonya di youtube, agar bs lebih faham lagi cara pembuatannya, soalnya saya masih pemula, dan bingung cara membuatnya. terima kasih
mohon maaf, untuk tutorial dalam bentuk video belum bisa dibuatkan.... silahkan dibaca secara teliti dari tutorial diatas dan dari komentar2 yang masuk (silahkan dibaca juga komentar2 dari pembaca lain).
mas.."Kemudian impor data-data provinces, regencies, districts & villages ke database MySQL" ini kita masukkan melalui cpanel ya?
iya, masuk cpanel, importnya di phpmyadmin.
mas..waktu sy ambil data di https://github.com/edwardsamuel/Wilayah-Administratif-Indonesia. sy dpt file dlm bentuk .zip..apakah hanya file csv nya sj yg sy upload ke data base? krn sy upload dlm bentuk zip lgs, hasilnya ga ada file yg terupload. mohon pencerahannya mas.
dan hasilnya spt ini ketika sy upload villages.csv nya..solusinya kira2 bgm mas?
Tampilan di emailnya kenapa ID ya bukan valuenya??
karena diset field yg isinya ID, select box itu kan valuenya ID.
kalo mau ambil name-nya, coba cek di komentar, sudah dibahas disitu
Kenapa jika saya tidak memilih Provinsi & Kota, diemail muncul 0, gimana caranya tidak usah muncul 0, kosong aja gitu?
State: 0
City: 0
Kenapa jika saya tidak memilih Provinsi & Kota, diemail muncul 0, gimana caranya tidak usah muncul 0, kosong aja gitu?
State: 0
City: 0