Presentasi membuat pengelolaan aset berbasis lokasi dengan memanfaatkan peta dari google map, memanfaatkan jquery untuk koneksi dengan php, dan memanfaatkan mysql untuk menyimpan data lokasi aset
2. • 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
3. •
•
•
•
MEMAHAMI HTML, CSS, JAVASCRIPT
MEMAHAMI PHP
MEMAHAMI MYSQL DAN PENGELOLAAN DATA DENGAN PHP
MAMPU MENGOPERASIKAN XAMPP (TERKAIT PHP &MYSQL)
Agus Subhan Akbar, PENGELOLAAN ASET BERBASIS LOKASI DENGAN GOOGLE
MAP, PHP, DAN MYSQL, Sebuah Contoh Sederhana
PERSYARATAN
4. • 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 Subhan Akbar, PENGELOLAAN ASET BERBASIS LOKASI DENGAN GOOGLE
MAP, PHP, DAN MYSQL, Sebuah Contoh Sederhana
ALAT YANG DIBUTUHKAN
5. • 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 Subhan Akbar, PENGELOLAAN ASET BERBASIS LOKASI DENGAN GOOGLE
MAP, PHP, DAN MYSQL, Sebuah Contoh Sederhana
Referensi
6. 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
Agus Subhan Akbar, PENGELOLAAN ASET BERBASIS LOKASI DENGAN GOOGLE
MAP, PHP, DAN MYSQL, Sebuah Contoh Sederhana
LANGKAH SINGKAT MENAMPILKAN PETA
GOOGLE MAP
7. <!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>
Agus Subhan Akbar, PENGELOLAAN ASET BERBASIS LOKASI DENGAN GOOGLE
MAP, PHP, DAN MYSQL, Sebuah Contoh Sederhana
Peta Dasar(1):
petadasar.html
8. Agus Subhan Akbar, PENGELOLAAN ASET BERBASIS LOKASI DENGAN GOOGLE
MAP, PHP, DAN MYSQL, Sebuah Contoh Sederhana
Peta Dasar(2): Tampilan di
Browser
9. • 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 Subhan Akbar, PENGELOLAAN ASET BERBASIS LOKASI DENGAN GOOGLE
MAP, PHP, DAN MYSQL, Sebuah Contoh Sederhana
Overlay di Peta
10. • 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 Subhan Akbar, PENGELOLAAN ASET BERBASIS LOKASI DENGAN GOOGLE
MAP, PHP, DAN MYSQL, Sebuah Contoh Sederhana
Membuat Marker di Peta
11. 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
Membuat Marker di Peta
12. • 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 Subhan Akbar, PENGELOLAAN ASET BERBASIS LOKASI DENGAN GOOGLE
MAP, PHP, DAN MYSQL, Sebuah Contoh Sederhana
Menangani Event Click pada
Marker
13. 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
Contoh event click pada Marker
14. Agus Subhan Akbar, PENGELOLAAN ASET BERBASIS LOKASI DENGAN GOOGLE
MAP, PHP, DAN MYSQL, Sebuah Contoh Sederhana
Contoh Struktur Data Asset
15. 3. Event
Click di luar
marker
4. Penyimpanan
Data ke
database
1. Pengambilan data Asset dari database
2. Penampilan sebagai marker di Map
Agus Subhan Akbar, PENGELOLAAN ASET BERBASIS LOKASI DENGAN GOOGLE
MAP, PHP, DAN MYSQL, Sebuah Contoh Sederhana
Diagram System
Penampilan dan penambahan marker
16. 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
Agus Subhan Akbar, PENGELOLAAN ASET BERBASIS LOKASI DENGAN GOOGLE
MAP, PHP, DAN MYSQL, Sebuah Contoh Sederhana
Diagram System
Modifikasi data marker
17. Agus Subhan Akbar, PENGELOLAAN ASET BERBASIS LOKASI DENGAN GOOGLE
MAP, PHP, DAN MYSQL, Sebuah Contoh Sederhana
Tertarik mempelajari
lebih mendalam ?