Mmss Ar Semarang 200x80 CM

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
PERSYARATAN
• MEMAHAMI HTML, CSS, JAVASCRIPT
• MEMAHAMI PHP
• MEMAHAMI MYSQL DAN PENGELOLAAN DATA DENGAN PHP
• MAMPU MENGOPERASIKAN XAMPP (TERKAIT PHP &MYSQL)
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
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

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):

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

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
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.
Membuat Marker di Peta
Setelah dipanggil di browser akan menghasilkan seperti berikut ini:

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);
});
Setelah dipanggil di browser akan menghasilkan seperti berikut ini:
Contoh event click pada Marker

Contoh Struktur Data Asset

Diagram System

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

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


Mmss Ar Semarang 200x80 CM

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Mmss Ar Semarang 200x80 CM

Diunggah oleh

Hak Cipta:

Format Tersedia

PENGELOLAAN ASET

BERBASIS LOKASI DENGAN

MAP, PHP, DAN MYSQL, Sebuah Contoh Sederhana

MAP, PHP, DAN MYSQL, Sebuah Contoh Sederhana

Agus Subhan Akbar, PENGELOLAAN ASET BERBASIS LOKASI DENGAN GOOGLE

MAP, PHP, DAN MYSQL, Sebuah Contoh Sederhana

MAP, PHP, DAN MYSQL, Sebuah Contoh Sederhana

var marker = new google.maps.Marker({

//yang disimpan dalam variabel map.

var marker = new google.maps.Marker({

Agus Subhan Akbar, PENGELOLAAN ASET BERBASIS LOKASI DENGAN GOOGLE

MAP, PHP, DAN MYSQL, Sebuah Contoh Sederhana

Agus Subhan Akbar, PENGELOLAAN ASET BERBASIS LOKASI DENGAN GOOGLE

Agus Subhan Akbar, PENGELOLAAN ASET BERBASIS LOKASI DENGAN GOOGLE

MAP, PHP, DAN MYSQL, Sebuah Contoh Sederhana

1. Pengambilan data Asset dari database

MAP, PHP, DAN MYSQL, Sebuah Contoh Sederhana

1. Pengambilan data Asset dari database

Agus Subhan Akbar, PENGELOLAAN ASET BERBASIS LOKASI DENGAN GOOGLE

Anda mungkin juga menyukai