pengelolaan aset berbasis lokasi dengan google map, php, dan mysql
TRANSCRIPT
PENGELOLAAN ASET BERBASIS LOKASI DENGAN GOOGLE MAP, PHP, DAN MYSQLSEBUAH CONTOH SEDERHANAOLEHAGUS SUBHAN AKBAR2013
TUJUAN• MEMBUAT APLIKASI WEB YANG MENAMPIL-KAN PETA
DENGAN MEMANFAATKAN GOOGLE MAP• MEMBERI TANDA/MARKER DI PETA• MENYAMBUNGKAN MARKER DENGAN DATA DI DATABASE
(MYSQL)• MEMANFAATKAN PHP UNTUK MENGELOLA DATA DI
DATABASE• SERVER WEB, MYSQL DILETAKKAN DIKOMPUTER LOKAL
Agus
Sub
han
Akba
r, PE
NGE
LOLA
AN A
SET
BERB
ASIS
LO
KASI
DEN
GAN
GO
OGL
E M
AP, P
HP, D
AN M
YSQ
L, S
ebua
h Co
ntoh
Sed
erha
na
PERSYARATAN• MEMAHAMI HTML, CSS, JAVASCRIPT• MEMAHAMI PHP• MEMAHAMI MYSQL DAN PENGELOLAAN DATA DENGAN PHP• MAMPU MENGOPERASIKAN XAMPP (TERKAIT PHP &MYSQL)
Agus
Sub
han
Akba
r, PE
NGE
LOLA
AN A
SET
BERB
ASIS
LO
KASI
DEN
GAN
GO
OGL
E M
AP, P
HP, D
AN M
YSQ
L, S
ebua
h Co
ntoh
Sed
erha
na
ALAT YANG DIBUTUHKAN• WEB SERVER + PHP MODULE + MYSQL
(BISA MENGGUNAKAN PAKET XAMPP)http://www.apachefriends.org/en/xampp.html
• EDITOR (BISA MENGGUNAKAN NOTEPAD, NOTEPAD++, KOMODO EDIT, MACROMEDIA DREAMWEAVER, DLL)http://www.activestate.com/komodo-edit
Agus
Sub
han
Akba
r, PE
NGE
LOLA
AN A
SET
BERB
ASIS
LO
KASI
DEN
GAN
GO
OGL
E M
AP, P
HP, D
AN M
YSQ
L, S
ebua
h Co
ntoh
Sed
erha
na
Referensi• Situs developer untuk google map
https://developers.google.com/maps/documentation/javascript/• Situs developer tutorial untuk google map
http://www.w3schools.com/googleAPI/default.asp
Agus
Sub
han
Akba
r, PE
NGE
LOLA
AN A
SET
BERB
ASIS
LO
KASI
DEN
GAN
GO
OGL
E M
AP, P
HP, D
AN M
YSQ
L, S
ebua
h Co
ntoh
Sed
erha
na
LANGKAH SINGKAT MENAMPILKAN PETA GOOGLE MAP
1. Buat file html dengan deklarasi sebagai HTML52. Bagian body berisi tag div sederhana3. Bagian head berisi :
a. Script untuk mengambil google map api v3b. Script fungsi Inisialisasi untuk menampilkan petac. Script untuk mengotomatisasi pemanggilan fungsi
Inisialisasi setelah dokumen html berhasil dibuka oleh browser
Agus
Sub
han
Akba
r, PE
NGE
LOLA
AN A
SET
BERB
ASIS
LO
KASI
DEN
GAN
GO
OGL
E M
AP, P
HP, D
AN M
YSQ
L, S
ebua
h Co
ntoh
Sed
erha
na
Peta Dasar(1): petadasar.html<!DOCTYPE html><html> <head> <title>Peta Dasar</title>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"> </script>
<script> var map; function initialize() { var mapOptions = {
zoom: 15, center: new google.maps.LatLng(-6.807893,110.841909), mapTypeId: google.maps.MapTypeId.ROADMAP
}; map = new google.maps.Map(document.getElementById('peta'), mapOptions); } google.maps.event.addDomListener(window, 'load', initialize);</script></head><body> <div id="peta" style ="width: 300px;height: 300px;"></div></body>
</html>
1. Buat file html dengan deklarasi sebagai HTML5
2. Bagian body berisi tag div sederhana
3.a. Script untuk mengambil google map api v3
3.b. Script fungsi Inisialisasi untuk menampilkan peta
3.c. Script untuk mengotomatisasi pemanggilan fungsi Inisialisasi setelah dokumen html berhasil dibuka oleh browser
Agus
Sub
han
Akba
r, PE
NGE
LOLA
AN A
SET
BERB
ASIS
LO
KASI
DEN
GAN
GO
OGL
E M
AP, P
HP, D
AN M
YSQ
L, S
ebua
h Co
ntoh
Sed
erha
na
Peta Dasar(2): Tampilan di Browser
Agus
Sub
han
Akba
r, PE
NGE
LOLA
AN A
SET
BERB
ASIS
LO
KASI
DEN
GAN
GO
OGL
E M
AP, P
HP, D
AN M
YSQ
L, S
ebua
h Co
ntoh
Sed
erha
na
Overlay di Peta• Overlay didefinisikan sebagai object yang ditampilkan di peta
pada koordinat (longitude/latitude) tertentu• Jenis Overlay yang bisa digunakan di Google Map terdiri atas:• Marker – untuk menunjuk satu lokasi di peta• Polyline – untuk menampilkan sejumlah garis yang saling
berhubungan di peta• Polygon - untuk menampilkan sejumlah garis yang berhubungan
dengan pangkal dan ujungnya bertemu, membentuk area.• Circle , Rectangle• Info Windows – digunakan untuk menampilkan informasi dalam
bentuk popup di peta• Custom overlays – merupakan bentuk overlay yang bisa
didefinisikan sendiri dengan mengimplementasikan interface OverlayView
• Ujicoba yang akan dilakukan di Presentasi ini hanya akan menggunakan overlay dengan tipe Marker dan Info Windows
Agus
Sub
han
Akba
r, PE
NGE
LOLA
AN A
SET
BERB
ASIS
LO
KASI
DEN
GAN
GO
OGL
E M
AP, P
HP, D
AN M
YSQ
L, S
ebua
h Co
ntoh
Sed
erha
na
Membuat Marker di Peta• Marker bisa dibuat dengan menggunakan rutin sebagai berikut:
var marker = new google.maps.Marker({ position: koordinat, map: map, title:"Hello World!“});//rutin di atas langsung menambahkan marker ke peta //yang disimpan dalam variabel map.
• Alternatif pembuatan Marker :
var marker = new google.maps.Marker({ position: koordinat, title:"Hello World!"});marker.setMap(map);
• Routine di atas diletakkan di dalam fungsi Initialize sesudah alokasi map dijalankan.
Agus
Sub
han
Akba
r, PE
NGE
LOLA
AN A
SET
BERB
ASIS
LO
KASI
DEN
GAN
GO
OGL
E M
AP, P
HP, D
AN M
YSQ
L, S
ebua
h Co
ntoh
Sed
erha
na
Membuat Marker di PetaSetelah dipanggil di browser akan menghasilkan seperti berikut ini:
Agus
Sub
han
Akba
r, PE
NGE
LOLA
AN A
SET
BERB
ASIS
LO
KASI
DEN
GAN
GO
OGL
E M
AP, P
HP, D
AN M
YSQ
L, S
ebua
h Co
ntoh
Sed
erha
na
Menangani Event Click pada Marker• Kita menggunakan marker untuk menandai aset yang dikelola• Setiap marker yang ada perlu ditambahkan event click supaya
bisa ditampilkan infonya.• Contoh rutin penambahan event click :
google.maps.event.addListener(marker, 'click', function() {
alert (this.title);});
Agus
Sub
han
Akba
r, PE
NGE
LOLA
AN A
SET
BERB
ASIS
LO
KASI
DEN
GAN
GO
OGL
E M
AP, P
HP, D
AN M
YSQ
L, S
ebua
h Co
ntoh
Sed
erha
na
Contoh event click pada MarkerSetelah dipanggil di browser akan menghasilkan seperti berikut ini:
Agus
Sub
han
Akba
r, PE
NGE
LOLA
AN A
SET
BERB
ASIS
LO
KASI
DEN
GAN
GO
OGL
E M
AP, P
HP, D
AN M
YSQ
L, S
ebua
h Co
ntoh
Sed
erha
na
Contoh Struktur Data Asset
Agus
Sub
han
Akba
r, PE
NGE
LOLA
AN A
SET
BERB
ASIS
LO
KASI
DEN
GAN
GO
OGL
E M
AP, P
HP, D
AN M
YSQ
L, S
ebua
h Co
ntoh
Sed
erha
na
Diagram SystemPenampilan dan penambahan marker
1. Pengambilan data Asset dari database2. Penampilan sebagai marker di Map
3. Event Click di luar marker
4. PenyimpananData ke database
Agus
Sub
han
Akba
r, PE
NGE
LOLA
AN A
SET
BERB
ASIS
LO
KASI
DEN
GAN
GO
OGL
E M
AP, P
HP, D
AN M
YSQ
L, S
ebua
h Co
ntoh
Sed
erha
na
Diagram SystemModifikasi data marker
1. Pengambilan data Asset dari database2. Penampilan sebagai marker di Map
3. Event Click pada marker
4. PenyimpananData ke database / Menghapus data di database
Agus
Sub
han
Akba
r, PE
NGE
LOLA
AN A
SET
BERB
ASIS
LO
KASI
DEN
GAN
GO
OGL
E M
AP, P
HP, D
AN M
YSQ
L, S
ebua
h Co
ntoh
Sed
erha
na
Agus
Sub
han
Akba
r, PE
NGE
LOLA
AN A
SET
BERB
ASIS
LO
KASI
DEN
GAN
GO
OGL
E M
AP, P
HP, D
AN M
YSQ
L, S
ebua
h Co
ntoh
Sed
erha
na
Tertarik mempelajari lebih mendalam ?