pengelolaan aset berbasis lokasi dengan google map, php, dan mysql

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

Upload: agus-subhan-akbar

Post on 16-Apr-2017

7.138 views

Category:

Education


4 download

TRANSCRIPT

Page 1: Pengelolaan aset berbasis lokasi dengan Google Map, PHP, dan MySQL

PENGELOLAAN ASET BERBASIS LOKASI DENGAN GOOGLE MAP, PHP, DAN MYSQLSEBUAH CONTOH SEDERHANAOLEHAGUS SUBHAN AKBAR2013

Page 2: Pengelolaan aset berbasis lokasi dengan Google Map, PHP, dan MySQL

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

Page 3: Pengelolaan aset berbasis lokasi dengan Google Map, PHP, dan MySQL

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

Page 4: Pengelolaan aset berbasis lokasi dengan Google Map, PHP, dan 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

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

Page 5: Pengelolaan aset berbasis lokasi dengan Google Map, PHP, dan MySQL

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

Page 6: Pengelolaan aset berbasis lokasi dengan Google Map, PHP, dan MySQL

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

Page 7: Pengelolaan aset berbasis lokasi dengan Google Map, PHP, dan MySQL

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

Page 8: Pengelolaan aset berbasis lokasi dengan Google Map, PHP, dan MySQL

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

Page 9: Pengelolaan aset berbasis lokasi dengan Google Map, PHP, dan MySQL

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

Page 10: Pengelolaan aset berbasis lokasi dengan Google Map, PHP, dan MySQL

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

Page 11: Pengelolaan aset berbasis lokasi dengan Google Map, PHP, dan MySQL

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

Page 12: Pengelolaan aset berbasis lokasi dengan Google Map, PHP, dan MySQL

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

Page 13: Pengelolaan aset berbasis lokasi dengan Google Map, PHP, dan MySQL

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

Page 14: Pengelolaan aset berbasis lokasi dengan Google Map, PHP, dan MySQL

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

Page 15: Pengelolaan aset berbasis lokasi dengan Google Map, PHP, dan MySQL

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

Page 16: Pengelolaan aset berbasis lokasi dengan Google Map, PHP, dan MySQL

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

Page 17: Pengelolaan aset berbasis lokasi dengan Google Map, PHP, dan 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

Tertarik mempelajari lebih mendalam ?