Membuat Peta Sebaran Alumni dengan GMaps dan Codeigniter

ByYusuf Ayuba

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.

  1. Database Wilayah se Indonesia https://github.com/edwardsamuel/Wilayah-Administratif-Indonesia
  2. Library GMaps versi 3 untuk Codeigniter http://biostall.com/codeigniter-google-maps-v3-api-library
  3. Libary Select2 https://fk.github.io/select2-bootstrap-css
  4. 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.

  1. File CSS diextract di folder assets/css
  2. File JS diextract di folder assets/js
  3. File Fonts di extract di folder asstes/fonts
  4. Library Google Maps di extract di folder Application/libraries

List Direktori

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

Peta Sebaran

Form Tambah Alumni

Form Tambah Alumni

 

Notes: Untuk penjelasan tentang library GMaps, silahkan dibaca lewat link ini

View Demo

About the author

Yusuf Ayuba administrator

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

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

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”

        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, ,

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 šŸ˜€

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

A PHP Error was encountered

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

Backtrace:

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

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

Leave a Reply

%d bloggers like this: