Membuat Peta Sebaran Alumni dengan GMaps dan Codeigniter
JUDUL diatas sebenarnya hanyalah contoh dalam membuat peta wilayah dengan menggunakan Google Maps dan Codeigniter. Dengan menggunakan metode yang sama, kita bisa saja membuat peta lainnya berdasarkan data yang ada.
Untuk membuat peta alumni, yang pertama kita lakukan adalah mendownload beberapa komponen yang dibutuhkan dalam aplikasi.
- Database Wilayah se Indonesia https://github.com/edwardsamuel/Wilayah-Administratif-Indonesia
- Library GMaps versi 3 untuk Codeigniter http://biostall.com/codeigniter-google-maps-v3-api-library
- Libary Select2 https://fk.github.io/select2-bootstrap-css
- Bootstrap v3.3.6 http://getbootstrap.com
Sambl mempersiapkan komponen-komponen diatas, buatlah database di mysql/postgres dan lakukan penyetingan terhadap file database.php agar mengarah ke database yang digunakan. Setelah itu buatlah tabel baru yaitu tabel alumni atau pastekan kode dibawah ini
Selanjutnya buatlah folder dengan struktu seperti gambar dibawah ini dan extractlah hasil download item-item diatas ke folder masing-masing.
- File CSS diextract di folder assets/css
- File JS diextract di folder assets/js
- File Fonts di extract di folder asstes/fonts
- Library Google Maps di extract di folder Application/libraries
Langkah berikutnya adalah membuat model seperti ini
Lalu kita buat controllernya seperti ini.
Berikutnya kita buat view untuk menampilkan peta seperti ini
Selanjutnya kita buat form pengisian data alumni seperti ini
Langkah terakhir, buatlah file .httaccess di folder root seperti ini
Jika langka-langkah diatas dilakukan dengan benar, maka tampilan dari aplikasi adalah seperti ini
Peta Sebaran
Form Tambah Alumni
Notes: Untuk penjelasan tentang library GMaps, silahkan dibaca lewat link ini
View Demo
37 Comments
Mantap yusuf…. macm bagus ini… tp bingung z yg tdk ada dasar IT…
Ada yg z mo tanya: Kl “mysql/postgres” itu apa? Apa bedanya dengan Adobe Dreamweaver?
Makasih atas informasinya bosku….
Kurang lebih seperti berikut perbedaannya…
mysql dan postgres itu DBMS..apa itu DBMS? silahkan dibaca di link ini https://id.wikipedia.org/wiki/Sistem_manajemen_basis_data
Trus apa itu Dreamweaver? Dreamweaver itu lebih ke sebuah Tools yang biasa digunakan oleh programmer/desainer web dalam membantu membuat website…
maap..mau nanya om..klo muncul pesan error gni gmna ya?
Fatal error: Call to a member function flashdata() on null in C:\xampp\htdocs\gmaps\application\views\form_add.php on line 20
library session-nya di load dulu om..loadnya bisa lewat file autoload.php
wah..mantep om…
skrng ada error lgi om pas klik tampilkan peta
A PHP Error was encountered
Severity: Notice
Message: Undefined property: Welcome::$googlemaps
Filename: controllers/Welcome.php
Line Number: 46
Backtrace:
File: C:\xampp\htdocs\gmaps\application\controllers\Welcome.php
Line: 46
Function: _error_handler
File: C:\xampp\htdocs\gmaps\index.php
Line: 315
Function: require_once
ya library googlemaps-nya di load juga om…
oh iy…sdh om….
nnya lgi om..terakhir.. 😀
pas mau ngisi data wilayah ko ga bisa ya om?…
maap y om..banyak nanya…:D
berarti coding-nya ada yang salah
pdhal sya ga ada ubah coding pnya om…
td cuma copas script aj…
clear…
thnks om..
mas bisa share ga kenapa ga tampil wilayah nya pas mau input ? saya juga begitu mas
pasti codingnya ada yg salah…coba dicek kembali codingnya… atau bisa dicopykan saja dari source ini https://gist.github.com/virbo/51e416dea294b1304dd979902f566035
malah error gini mas “Fatal error: Cannot redeclare class Welcome in C:\xampp\htdocs\codeigniter\application\views\maps_view.php on line 91”
uppsss sory, ada kesalahan dalam paste up source code..silahkan di copy ulang source code dari alamat ini https://gist.github.com/virbo/51e416dea294b1304dd979902f566035
Uncaught ReferenceError: $ is not defined
error nya pas di $(‘#wilayah’).select2({ situ mas
library select2-nya sudah di includekan ke file-nya gk??
kalo saya masukin library nya ke autoload malah error mas
boleh ga saya liat file nya mas ? biar buat perbandingan mas
permasalahnnya mas pada saat saya mau input data wilayah dia ga mau muncul datanya, kan harus nya dia muncul dari database ke combobox nya
khn saya sudah bilang tadi, kalau permasalahan spt itu berarti codingnya situ ada yg salah…jika tidak mau repot, bisa saja copas ulang dari link yg saya kasih diatas…
sudah saya ikutin mas tapi tetep aja ga bisa mas, ga keluar juga di combobox nya
database wilayahnya sudah di import belum??curiga nih, data wilayah belum dimasukkin..
data wilayah yang dari github itu kan ? sudah mas
coba di debug lewat inspect element…
kalo saya curiga di database mas, saya coba tembak data lewat mysql ga muncul apa-apa mas
ini db saya
$active_group = ‘default’;
$active_record = TRUE;
$db[‘default’][‘hostname’] = ‘localhost’;
$db[‘default’][‘username’] = ‘root’;
$db[‘default’][‘password’] = ”;
$db[‘default’][‘database’] = ”;
$db[‘default’][‘dbdriver’] = ‘mysql’;
$db[‘default’][‘dbprefix’] = ”;
$db[‘default’][‘pconnect’] = TRUE;
$db[‘default’][‘db_debug’] = FALSE;
$db[‘default’][‘cache_on’] = FALSE;
$db[‘default’][‘cachedir’] = ”;
$db[‘default’][‘char_set’] = ‘utf8’;
$db[‘default’][‘dbcollat’] = ‘utf8_general_ci’;
$db[‘default’][‘swap_pre’] = ”;
$db[‘default’][‘autoinit’] = TRUE;
$db[‘default’][‘stricton’] = FALSE;
ya wajar kalau error…dari settingannya, sampeyan gk masukkin nama database yg digunakan…
tetep ga bisa mas, kan saya masukin nama database saya ‘gis’ nah saya masukin ke situ tetep ga bisa juga mas
ya udah gini, daripada pusing tujuh keliling, masnya lakukan aja dulu debug lewat inspect element…disitu perhatikan error apa yg muncul..dari error itu silahkan dipahami masalahnya ada dimana…kalau tetap gk bisa, berarti aplikasinya tidak berjodoh dengan sampeyan…
Kalo buat prosedural bisa nggak ya, ,
Bisa..tinggal di sesuaikan saja codingnya dengan model prosedural
wah bagus mas, ijin comot ya mas. hehe
oiya mas mau tanya,
misal ada 2 marker, marker_1 dan marker_2. marker_2 akan muncul di map jika kita klik marker_1. Itu codingnya gmn ya mas ?
makasi mas 😀
Bisa dicoba gunakan event onclick di marker
mas mau nanya kenapa ya saya selalu error No direct script access allowed
[…] detail informasi yang ada di setiap koordinat peta. Karena artikel ini lanjutan dari artikel Membuat Peta Sebaran Alumni dengan GMaps dan Codeigniter, maka saya hanya akan memodifikasi dan menambahkan beberapa fungsi di source code yang sudah […]
bila tidak bisa tampilkan data alamat, pastikan jquery.min.js dan jquery.min.js sudah disimpan juga di folder assets/js
mas ada source code lengkapnya gak?
[…] Lebih jelasnya baca disini klik […]