Anda di halaman 1dari 17

PENGELOLAAN ASET

BERBASIS LOKASI DENGAN


GOOGLE MAP, PHP, DAN
MYSQL
SEBUAH CONTOH SEDERHANA
OLEH
AGUS SUBHAN AKBAR
2013
MAP, PHP, DAN MYSQL, Sebuah Contoh Sederhana
Agus Subhan Akbar, PENGELOLAAN ASET BERBASIS LOKASI DENGAN GOOGLE
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
MAP, PHP, DAN MYSQL, Sebuah Contoh Sederhana
Agus Subhan Akbar, PENGELOLAAN ASET BERBASIS LOKASI DENGAN GOOGLE
PERSYARATAN
• MEMAHAMI HTML, CSS, JAVASCRIPT
• MEMAHAMI PHP
• MEMAHAMI MYSQL DAN PENGELOLAAN DATA DENGAN PHP
• MAMPU MENGOPERASIKAN XAMPP (TERKAIT PHP &MYSQL)
MAP, PHP, DAN MYSQL, Sebuah Contoh Sederhana
Agus Subhan Akbar, PENGELOLAAN ASET BERBASIS LOKASI DENGAN GOOGLE
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
MAP, PHP, DAN MYSQL, Sebuah Contoh Sederhana
Agus Subhan Akbar, PENGELOLAAN ASET BERBASIS LOKASI DENGAN GOOGLE
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
LANGKAH SINGKAT MENAMPILKAN PETA

MAP, PHP, DAN MYSQL, Sebuah Contoh Sederhana


Agus Subhan Akbar, PENGELOLAAN ASET BERBASIS LOKASI DENGAN GOOGLE
GOOGLE MAP
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
Peta Dasar(1):

MAP, PHP, DAN MYSQL, Sebuah Contoh Sederhana


Agus Subhan Akbar, PENGELOLAAN ASET BERBASIS LOKASI DENGAN GOOGLE
petadasar.html
<!DOCTYPE html>
<html> 1. Buat file html dengan deklarasi sebagai HTML5
<head>
<title>Peta Dasar</title>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false">
</script>
<script>
var map; 3.a. Script untuk mengambil google map api v3
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
browser
map = new google.maps.Map(document.getElementById('peta'), mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
3.b. Script
</head> 2. Bagian
fungsi Inisialisasi body
untuk berisi tag divpeta
menampilkan sederhana
<body>
<div id="peta" style ="width: 300px;height: 300px;"></div>
</body>
</html>
Browser
Peta Dasar(2): Tampilan di

Agus Subhan Akbar, PENGELOLAAN ASET BERBASIS LOKASI DENGAN GOOGLE


MAP, PHP, DAN MYSQL, Sebuah Contoh Sederhana
Overlay di Peta

MAP, PHP, DAN MYSQL, Sebuah Contoh Sederhana


Agus Subhan Akbar, PENGELOLAAN ASET BERBASIS LOKASI DENGAN GOOGLE
• 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
Membuat Marker di Peta

MAP, PHP, DAN MYSQL, Sebuah Contoh Sederhana


Agus Subhan Akbar, PENGELOLAAN ASET BERBASIS LOKASI DENGAN GOOGLE
• 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:

Agus Subhan Akbar, PENGELOLAAN ASET BERBASIS LOKASI DENGAN GOOGLE


MAP, PHP, DAN MYSQL, Sebuah Contoh Sederhana
Menangani Event Click pada

MAP, PHP, DAN MYSQL, Sebuah Contoh Sederhana


Agus Subhan Akbar, PENGELOLAAN ASET BERBASIS LOKASI DENGAN GOOGLE
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);
});
Setelah dipanggil di browser akan menghasilkan seperti berikut ini:
Contoh event click pada Marker

Agus Subhan Akbar, PENGELOLAAN ASET BERBASIS LOKASI DENGAN GOOGLE


MAP, PHP, DAN MYSQL, Sebuah Contoh Sederhana
Contoh Struktur Data Asset

Agus Subhan Akbar, PENGELOLAAN ASET BERBASIS LOKASI DENGAN GOOGLE


MAP, PHP, DAN MYSQL, Sebuah Contoh Sederhana
Diagram System

MAP, PHP, DAN MYSQL, Sebuah Contoh Sederhana


Agus Subhan Akbar, PENGELOLAAN ASET BERBASIS LOKASI DENGAN GOOGLE
Penampilan dan penambahan marker
4. Penyimpanan
3. Event Data ke
Click di luar database
marker

1. Pengambilan data Asset dari database


2. Penampilan sebagai marker di Map
Diagram System

MAP, PHP, DAN MYSQL, Sebuah Contoh Sederhana


Agus Subhan Akbar, PENGELOLAAN ASET BERBASIS LOKASI DENGAN GOOGLE
Modifikasi data marker 4. Penyimpanan
Data ke database /
3. Event Menghapus data
Click pada di database
marker

1. Pengambilan data Asset dari database


2. Penampilan sebagai marker di Map
lebih mendalam ?
Tertarik mempelajari

Agus Subhan Akbar, PENGELOLAAN ASET BERBASIS LOKASI DENGAN GOOGLE


MAP, PHP, DAN MYSQL, Sebuah Contoh Sederhana