Pengelolaan aset berbasis lokasi dengan Google Map, PHP, dan MySQL

PENGELOLAAN ASET
BERBASIS LOKASI DENGAN
GOOGLE MAP, PHP, DAN
MYSQL
SEBUAH CONTOH SEDERHANA
OLEH
AGUS SUBHAN AKBAR
2013

• 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 Subhan Akbar, PENGELOLAAN ASET BERBASIS LOKASI DENGAN GOOGLE
MAP, PHP, DAN MYSQL, Sebuah Contoh Sederhana

TUJUAN

•
•
•
•

MEMAHAMI HTML, CSS, JAVASCRIPT
MEMAHAMI PHP
MEMAHAMI MYSQL DAN PENGELOLAAN DATA DENGAN PHP
MAMPU MENGOPERASIKAN XAMPP (TERKAIT PHP &MYSQL)


PERSYARATAN

• 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


ALAT YANG DIBUTUHKAN

• 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


Referensi

1. Buat file html dengan deklarasi sebagai HTML5
2. Bagian body berisi tag div sederhana
3. Bagian head berisi :
a. Script untuk mengambil google map api v3
b. Script fungsi Inisialisasi untuk menampilkan peta
c. Script untuk mengotomatisasi pemanggilan fungsi
Inisialisasi setelah dokumen html berhasil dibuka
oleh browser


LANGKAH SINGKAT MENAMPILKAN PETA
GOOGLE MAP

<!DOCTYPE html>
1. Buat file html dengan deklarasi sebagai HTML5
<html>
<head>
<title>Peta Dasar</title>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false">
</script>
<script>
3.a. Script untuk mengambil google map api v3
var map;
function initialize() {
var mapOptions = {
zoom: 15,
center: new google.maps.LatLng(-6.807893,110.841909),
3.c. Script untuk mengotomatisasi pemanggilan fungsi
mapTypeId: google.maps.MapTypeId.ROADMAP
Inisialisasi setelah dokumen html berhasil dibuka oleh
};
map = new google.maps.Map(document.getElementById('peta'), mapOptions);
browser
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
2. Bagian body berisi tag div sederhana
</head>
3.b. Script fungsi Inisialisasi untuk menampilkan peta
<body>
<div id="peta" style ="width: 300px;height: 300px;"></div>
</body>
</html>


Peta Dasar(1):
petadasar.html


Peta Dasar(2): Tampilan di
Browser

• 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


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


Membuat Marker di Peta

Setelah dipanggil di browser akan menghasilkan seperti berikut ini:


Membuat Marker di Peta

• 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);
});


Menangani Event Click pada
Marker

Setelah dipanggil di browser akan menghasilkan seperti berikut ini:


Contoh event click pada Marker


Contoh Struktur Data Asset

3. Event
Click di luar
marker

4. Penyimpanan
Data ke
database

1. Pengambilan data Asset dari database
2. Penampilan sebagai marker di Map


Diagram System
Penampilan dan penambahan marker

3. Event
Click pada
marker

4. Penyimpanan
Data ke database /
Menghapus data
di database

1. Pengambilan data Asset dari database
2. Penampilan sebagai marker di Map


Diagram System
Modifikasi data marker


Tertarik mempelajari
lebih mendalam ?

Pengelolaan aset berbasis lokasi dengan Google Map, PHP, dan MySQL

Recommended

Recommended

More Related Content

Similar to Pengelolaan aset berbasis lokasi dengan Google Map, PHP, dan MySQL

Similar to Pengelolaan aset berbasis lokasi dengan Google Map, PHP, dan MySQL (7)

Recently uploaded

Recently uploaded (20)

Pengelolaan aset berbasis lokasi dengan Google Map, PHP, dan MySQL