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

Download Now!

41 Comments so far

Amrin MadolanPosted on8:41 am - Apr 18, 2016

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….

kanayaPosted on12:02 pm - Apr 18, 2016

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…

yogiPosted on11:37 am - Apr 18, 2016

maap..mau nanya om..klo muncul pesan error gni gmna ya?
Fatal error: Call to a member function flashdata() on null in C:xampphtdocsgmapsapplicationviewsform_add.php on line 20

kanayaPosted on12:03 pm - Apr 18, 2016

library session-nya di load dulu om..loadnya bisa lewat file autoload.php

yogiPosted on12:17 pm - Apr 18, 2016

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:xampphtdocsgmapsapplicationcontrollersWelcome.php
Line: 46
Function: _error_handler

File: C:xampphtdocsgmapsindex.php
Line: 315
Function: require_once

Yusuf AyubaPosted on12:22 pm - Apr 18, 2016

ya library googlemaps-nya di load juga om…

yogiPosted on12:30 pm - Apr 18, 2016

oh iy…sdh om….
nnya lgi om..terakhir.. 😀
pas mau ngisi data wilayah ko ga bisa ya om?…

maap y om..banyak nanya…:D

Yusuf AyubaPosted on12:41 pm - Apr 18, 2016

berarti coding-nya ada yang salah

yogiPosted on12:48 pm - Apr 18, 2016

pdhal sya ga ada ubah coding pnya om…
td cuma copas script aj…

yogiPosted on1:15 pm - Apr 18, 2016

clear…
thnks om..

EkoPosted on1:42 pm - Apr 20, 2016

mas bisa share ga kenapa ga tampil wilayah nya pas mau input ? saya juga begitu mas

Yusuf AyubaPosted on1:48 pm - Apr 20, 2016

pasti codingnya ada yg salah…coba dicek kembali codingnya… atau bisa dicopykan saja dari source ini https://gist.github.com/virbo/51e416dea294b1304dd979902f566035

EkoPosted on2:04 pm - Apr 20, 2016

malah error gini mas “Fatal error: Cannot redeclare class Welcome in C:xampphtdocscodeigniterapplicationviewsmaps_view.php on line 91”

Yusuf AyubaPosted on2:14 pm - Apr 20, 2016

uppsss sory, ada kesalahan dalam paste up source code..silahkan di copy ulang source code dari alamat ini https://gist.github.com/virbo/51e416dea294b1304dd979902f566035

EkoPosted on2:47 pm - Apr 20, 2016

Uncaught ReferenceError: $ is not defined
error nya pas di $(‘#wilayah’).select2({ situ mas

Yusuf AyubaPosted on2:56 pm - Apr 20, 2016

library select2-nya sudah di includekan ke file-nya gk??

EkoPosted on3:03 pm - Apr 20, 2016

kalo saya masukin library nya ke autoload malah error mas

EkoPosted on3:19 pm - Apr 20, 2016

boleh ga saya liat file nya mas ? biar buat perbandingan mas

EkoPosted on2:15 pm - Apr 20, 2016

permasalahnnya mas pada saat saya mau input data wilayah dia ga mau muncul datanya, kan harus nya dia muncul dari database ke combobox nya

Yusuf AyubaPosted on2:18 pm - Apr 20, 2016

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…

EkoPosted on2:20 pm - Apr 20, 2016

sudah saya ikutin mas tapi tetep aja ga bisa mas, ga keluar juga di combobox nya

Yusuf AyubaPosted on2:21 pm - Apr 20, 2016

database wilayahnya sudah di import belum??curiga nih, data wilayah belum dimasukkin..

EkoPosted on2:22 pm - Apr 20, 2016

data wilayah yang dari github itu kan ? sudah mas

Yusuf AyubaPosted on2:24 pm - Apr 20, 2016

coba di debug lewat inspect element…

EkoPosted on2:33 pm - Apr 20, 2016

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;

Yusuf AyubaPosted on2:36 pm - Apr 20, 2016

ya wajar kalau error…dari settingannya, sampeyan gk masukkin nama database yg digunakan…

EkoPosted on2:37 pm - Apr 20, 2016

tetep ga bisa mas, kan saya masukin nama database saya ‘gis’ nah saya masukin ke situ tetep ga bisa juga mas

Yusuf AyubaPosted on2:42 pm - Apr 20, 2016

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…

jakaPosted on11:50 pm - Apr 18, 2016

Kalo buat prosedural bisa nggak ya, ,

Yusuf AyubaPosted on7:14 am - Apr 19, 2016

Bisa..tinggal di sesuaikan saja codingnya dengan model prosedural

AziesPosted on11:51 pm - Apr 18, 2016

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 😀

Yusuf AyubaPosted on1:43 am - Apr 19, 2016

Bisa dicoba gunakan event onclick di marker

EkoPosted on3:13 am - Apr 19, 2016

mas mau nanya kenapa ya saya selalu error No direct script access allowed

Membuat Info Content Windows Google Maps Menggunakan Popup Windows “Modals” | dutainfomasi.netPosted on2:42 pm - Apr 19, 2016

[…] 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 […]

aswandiPosted on2:05 am - Apr 25, 2016

bila tidak bisa tampilkan data alamat, pastikan jquery.min.js dan jquery.min.js sudah disimpan juga di folder assets/js

brianPosted on10:46 am - Apr 25, 2016

mas ada source code lengkapnya gak?

Membuat Peta Sebaran Alumni dengan GMaps dan Codeigniter – linkaitiPosted on8:39 pm - May 16, 2016

[…] Lebih jelasnya baca disini klik […]

GemaPosted on4:06 am - Oct 14, 2016

om mau tanya kok saya error begini ya
mohon bantuannya om

Severity: 8192

Message: Methods with the same name as their class will not be constructors in a future version of PHP; Googlemaps has a deprecated constructor

Filename: libraries/Googlemaps.php

Line Number: 16

File: C:xampphtdocsci-gmaps-masterindex.php
Line: 292
Function: require_once

Yusuf AyubaPosted on2:45 am - Oct 24, 2016

kok deprecate?? php-nya versi berapa??

GemaPosted on1:56 pm - Oct 20, 2016

bang letak api keynya dimana ya?

Yusuf AyubaPosted on2:48 am - Oct 24, 2016

contoh diartikel ini tidak membutuhkan API…tapi kita juga bisa menggunakan API dengan mengisinya di file library/Googlemaps.php

Membuat Peta Sebaran Alumni dengan GMaps dan Codeigniter