modul gis

i

KATA PENGANTAR

Puji syukur penulis ucapkan kepada Allah SWT, karena berkat rahmat dan

karunia-Nya penulis dapat menyususn dan menyelasaikan Modul Mobile GIS

Application dengan baik. Adapaun tujuan modul ini adalah untuk membantu peserta

workshop untuk membangun sebuah aplikasi mobile

Dalam penulisan modul ini, tidak jarang penulis menghadapi berbagai

hambatan. Oleh karena itu, selesainya penulisan laporan ini tentunya tidak lepas dari

bantuan dari berbagai pihak baik berupa saran, kritik, dorongan maupun tenaga. Dalam

kesempatan kali ini penulis ingin menyampaikan ucapan terimakasih kepada :

1. Bapak Prof. Surya Afnarius, Ph.D selaku dosen pembimbing mata kuliah

Geographic Information System.

2. Mahasiswa Sistem Informasi Universitas Andalas yang membantu selama

proses pembuatan modul dan persiapan workshop

3. Pihak lain yang tidak dapat penulis sebut satu persatu yang telah mendukung

dan membantu dalam penyelesaian modul dan persiapan workshop ini.

Penulis menyadari bahwa laporan ini masih jauh dari sempurna. Mengingat

keterbatasan dan kemampuan yang dimiliki penulis. Untuk itu penulis mohon maaf

sekiranya ada kesalahan dan kekurangan dalam pelaksanaan penyusunan laporan ini.

Penulis berharap modul ini dapat bermanfaat, terutama kepada pembaca dan penulis

sendiri.

Padang, November 2012

Tim Penulis

ii

DAFTAR ISI

KATA PENGANTAR ....................................................................................................... i

DAFTAR ISI .................................................................................................................... ii

BAB I GIS ........................................................................................................................ 1

1.1 Pengertian GIS ................................................................................................... 1

1.2 Applikasi Mobile ................................................................................................ 1

1.3 Mobile GIS Application .................................................................................... 2

BAB II INSTALASI ......................................................................................................... 6

2.1 Java ..................................................................................................................... 6

2.2 Eclipse .............................................................................................................. 15

2.3 Membuat AVD ................................................................................................. 22

2.4 BlueStack.......................................................................................................... 24

BAB III PEMBUATAN APLIKASI .............................................................................. 28

3.1 Build Project ..................................................................................................... 28

3.1.1 Dengan Adobe PhoneGap Build ...................................................................... 28

3.1.2 Dengan MDS Applaud ..................................................................................... 30

3.1.3 Tanpa MDS Applaud........................................................................................ 33

3.2 Membangun aplikasi mobile GIS ..................................................................... 46

3.3.1 Tampilan Program ............................................................................................ 68

BAB IV KESIMPULAN ................................................................................................ 72

DAFTAR KEPUSTAKAAN .......................................................................................... 73

1

BAB I GIS

1.1 Pengertian GIS

Sistem Informasi Geografis (bahasa Inggris: Geographic Information System

disingkat GIS) adalah sistem informasi khusus yang mengelola data yang memiliki

informasi spasial (bereferensi keruangan). Dalam arti yang lebih sempit, GIS adalah

sistem komputer yang memiliki kemampuan untuk membangun, menyimpan,

mengelola dan menampilkan informasi berefrensi geospasial, misalnya data yang

diidentifikasi menurut lokasinya, dalam sebuah database.

Data GIS dapat dibagi menjadi dua macam, yaitu data spasial dan data atribut atau

tabular. Data spasial adalah data yang menggambarkan bentuk atau kenampakan objek

di permukaan bumi. Sedangkan data tabular adalah data deskriptif yang menyatakan

nilai dari data spasial tersebut.

Secara garis besar, data spasial dibedakan menjadi tiga macam yaitu data titik

(point), garis (line) dan area (region atau polygon). Data spasial Titik biasanya

digunakan untuk mewakili objek kota, bangunan, kondisi lahan. Data Garis dapat

dipakai untuk menggambarkan jalan, sungai, jaringan atau saluran dan lain-lain.

Sementara data Area digunakan untuk mewakili batas administrasi, penggunaan lahan,

kemiringan lereng dan lain-lain. Sedangkan struktur data SIG ada dua macam yaitu

vector dan raster . Pada struktur data vector posisi objek dicatat pada system koordinat.

Sedangkan objek pada struktur data raste disimpan pada grid dua dimensi yaitu baris

dan kolom.

Data atribut atau tabular merupakan data yang menyimpan informasi mengenai

nilai atau besaran dari data spasial. Untuk struktur data vector, data atribut tersimpan

secara terpisah dalam bentuk tabel. Sementara pada stuktur data raster nilai data spasial-

nya tersimpan langsung pada nilai grid atau piksel tersebut.

1.2 Applikasi Mobile

Aplikasi adalah program yang digunakan orang untuk melakukan sesuatu pada

sistem komputer

2

Mobile dapat diartikan sebagai perpindahan yang mudah dari satu tempat ke

tempat yang lain, misalnya telepon mobile berarti bahwa terminal telepon yang dapat

berpindah dengan mudah dari satu tempat ke tempat lain tanpa terjadi pemutusan atau

terputusnya komunikasi.

Aplikasi mobile merupakan aplikasi yang dapat digunakan walaupun pengguna

berpindah dengan mudah dari satu tempat ketempat lain lain tanpa terjadipemutusan

atau terputusnya komunikasi. Aplikasi ini dapat diakses melalui perangkat nirkabel

seperti pager, seperti telepon seluler dan PDA.

1.3 Mobile GIS Application

Applikasi yang tersedia pada perangkat mobile yang berfungsi mengelola sistem

informasi khusus yang mengelola data yang memiliki informasi spasial (bereferensi

keruangan).

Dan kemudian, untuk membangun sebuah perangkat mobile gis application

tersebut tak lepas kita memerlukan bantuan perangkat lunak IDE

IDE sendiri memiliki kepanjangan (Integrated Development Environment)

yang merupakan sebuah perangkat lunak computer yang memiliki fungsi – fungsi untuk

pembuatan suatu perangkat lunak computer. Dengan menggunakan IDE maka kita akan

memiliki tools – tools yang diperlukan dalam keperluan pembuatan perangkat lunak

computer.

Eclipse merupakan salah satu perangkat lunak IDE, eclipse sendiri merupakan

salah satu perangkat lunak yang popular karena perangkat tersebut bersifat gratis dan

open source. Ditambah dengan fitur plugin , membuat eclipse bisa ditambahkan

berbagai macam komponen – komponen baru yang di inginkan. Membuat eclipse

semakian memiliki banyak fungsi dalam membuat suatu aplikasi perangkat lunak.

Dan alasan lainya mengapa eclipse menjadi salah satu pilihan terbaik perangkat

IDE adalah karena

a. Multi Platform – bisa digunakan pada berbagai macam system operasi.

Seperti linux, windows, solaris, dan mac – os

b. Multi language – eclipse dapat menggunakan berbagai macam bahasa

pemograman C , C++ , Phyton , PHP , Cobol dll. Meskipun bahasa untuk

pengembangan eclipse itu sendiri ialah java

3

c. Multi use – selain untuk pembuatan perangkat lunak aplikasi, eclipse dapat

digunakan untuk pembuatan berkas dokumentasi, pengembangan web,

pengujian perangkat lunak aplikasi dan lain sebagainya.

Kemudian kita akan masuk ke salah satu plugin yang dapat digunakan eclipse

yaitu phonegap / apache cordova.

Phonegap sendiri merupakan framework open source dimana Dengan

menggunakan phonegap kita dapat membuat suatu aplikasi mobile dengan hanya

menggunakan javascript, HTML5 dan CSS3. dan kode pemograman yang kita buat

dapat berguna secara multi platform. Sehingga aplikasi yang kita buat dapat digunakan

ke berbagai macam device dengan os yang berbeda.

Mobile applications are not web applications.

Hal pertama yang harus diperhatikan adalah bahwa aplikasi mobile tidak sama

dengan aplikasi web . Perbedaannya adalah dalam kedua sifat fitur dan jumlah fitur

yang disediakan. Sebuah aplikasi mobile cenderung memiliki fitur yang lebih sedikit.

Kita bisa melihat bahwa aplikasi mobile terlihat sangat berbeda dari aplikasi web .

Pertama , ukuran layar pada smart phone tidak sama dengan desktop. Pada aplikasi web

, di mana layar lebih besar , kita memiliki lebih banyak ruang untuk menu, toolbar , dan

widget.

Pengguna smartphone dan pengguna web memiliki tujuan yang berbeda .

Pengguna smartphone ingin menggunakan aplikasi ini di mana saja, sedangkan

pengguna web mungkin akan menghabiskan lebih banyak waktu dengan menggunakan

aplikasi web di desktop mereka.

Karena perbedaan tersebut, kita akan melihat yang paling produktif (atau paling

sering digunakan) adalah pada smartphone pada smartphone. Pertanyaannya, Apakah

aplikasi mobile menyediakan semua fitur yang ada pada aplikasi web? Tentunya dalam

4

development, kita akan membuat fitur-fitur apa saja yang paling sering digunakan dan

yang perlu kita tambahkan pada aplikasi mobile.

Dengan phonegap kita dapat memaanfaatkan berbagai macam library yang dapat

digunakan untuk membuat sebuah website seperti Jquery.

5

PhoneGap Arsitektur

Jquery sendiri merupakan sebuah library javascript open source yang

menekankan interaksi antara javascript dan html. Sehingga website yang kita buat akan

semakin dinamis. Dengan javascript kita dapat menangani event, animasi, efek dan

memproses interaksi ajax. jQuery dirancang sedemikian rupa supaya membuat program

menggunakan Javascript menjadi relatif sangat mudah. Sesuai slogan nya, write less, do

more. Menulis kode lebih sedikit, tetapi melakukan pekerjaan lebih banyak.

Dan untuk pengembangan aplikasi mobile telah memiliki library khusus yang

digunakan untuk mobile user interface. Adalah jquery mobile, pada jquery mobile lebih

ditekankan penggunaan web touch optimized based yang dikususkan untuk penggunaan

smartphone dan computer tablet. Sehingga user interface yang dapat dibuat

menggunakan jquery mobile lebih dinamis , atraktif dan sesuai untuk penggunaan

mobile application.

6

BAB II INSTALASI

2.1 Java

Tutorial instalasi Java environment untuk mendukung kinerja ADT

1. Pertama-tama siapkan file java environment (32bit/64bit). Kemudian

klik 2x file tersebut

2. Kemudian akan muncul tampilan sebaagai berikut ini, pilih “Next >”

7

3. Selanjutnya akan tampil pilihan fitur program yang akan diinstall, pilih

“Next >” untuk menggunakan fitur defaultnya dan untuk melanjutkan

4. Installer akan memproses program yang akan digunakan.

5. Setelah proses sebelumnya, maka installer akan muncul tampilan lokasi

penyimpanan program, untuk defaultnya pilih “Next”

8

6. Instaler kembali akan memproses program dan mengekstrak datanya ke

tempat yang ditujukan sebelumnya

7. Setelah beberapa menit makan proses penginstalan telah selesai pilih

“Close” untuk menutup window installer.

9

8. Setelah instalasi selesai kita harus menambah environment variable yang

ada pada windows agar eclipse yang akan digunakan berjalan (running).

Untuk menambahnya klik kanan my computer/computer pada windows

explorer lalu klik “Properties”

9. Akan muncul tampilan seperti di bawah ini (windows 7). Lalu pilih

“Advance system settings” yang ada di list sebelah kiri

10

10. Maka akan muncul lagi window sepeerti di bawah, pilih tab “Advance”

11. Setelah itu pilih “Environment Variabel”

11

12. Selanjutnya kita harus mengisi variable environment tersebut, dengan

mengisi Variabel name untuk penamaan variabel dan Variabel value

untuk merujuk lokasi java.exe yang di install sebelumnya. Varialbel

name diisi dengan “Java” dan untuk variable value kita buka dulu

tempat penyimpanan java environment yang di install sebelumnya.

12

13. Untuk mengisi variabel value maka kita harus membuka lokasi

penyimpanan java environment yang di install tadi lalu pastekan link

tempat tersimpannya program ke field pada gambar sebelumnya.

14. Untuk membuka lokasi tersebut lita buka Local Disk (C:) -> Program

File -> Java -> jdk1.7.0->bin->java.exe

13

14

15. Tambahkan “\java.exe” pada link yang didapatkan tadi untuk

munujukan lokasi program java.exe yang akan kita gunakan. Klik “OK”

dan instalasi java environment sudah selesai.

15

2.2 Eclipse

1. Instalasi Eclipse dan Android SDK

a. Untuk memulai mengembangkan aplikasi Mobile disarankan untuk

mendownload bundel ADT (Android Developer Tools) yang

didalamnya terdapat komponen Android SDK dan Eclipse IDE yang

dapat didownload pada laman

http://developer.android.com/sdk/index.html, download sesuai dengan

tipe komputer yang akan digunakan.

16

b. Setelah selesai di download, ekstrak file hasil download tadi ke

direktori C:\, setelah selesai di ekstrak akan terdapat dua buah folder

yaitu “eclipse” dan “sdk" serta file “SDK Manager.exe”

c. Buka folder “eclipse” dan buka “eclipse.exe”. sampai di sini berarti

eclipse sudah siap untuk digunakan

d. Pilih Help -> Install New Software (Pada proses ini dibutuhkan

koneksi internet)

e. Klik tombol Add dan isikan pada kolom Name dengan ADT dan

kolom Location dengan https://dl-ssl.google.com/android/eclipse/. Url

tersebut merupakan library resmi dari Google yang berisi banyak

fitur-fitur plugin untuk Eclipse. Dua isi plugin ADT dari situs tersebut

berisi Developer Tools dan NDK Plugin

17

f. Setelah itu muncul beberapa checklist, centang pada bagian

“Developer Tools” dan “NDK Plugin” kemudian klik tombol Next

g. Kemudian klik tombol Next dan selanjutkan pilih “I Accept the terms

of the lisence agreements” dan klik tombol Finish dan lanjutkan

18

instalasi hingga selesai. Setelah selesai restart ADT untuk lanjut ke

proses selanjutnya.

h. Kemudian klik ikon “Android SDK Manager” untuk mendownload

tool Android SDK yang merupakan API untuk pengembangan aplikasi

platform android.

i. Centang pada list folder Tools beserta android API yang akan

digunakan. Di sini android API yang digunakan yaitu Android 4.0

(API 14) serta Android 2.3.3 (API 10). Kemudian klik tombol Install

packages...

19

j. Selanjutnya pilih Accept License dan tekan tombol Install dan tunggu

sampai proses ini selesai.

2. Pemasangan plugin phonegap MDS Applaud di Eclipse

MDS Applaud memanfaatkan Android Development Tools dan PhoneGap

untuk menyediakan sebuah IDE yang sangat komprehensif ditujukan untuk

20

pengembangan aplikasi Android menggunakan yang menggunakan aplikasi

Eclipse

Langkah instalasi dari MDS Applaud yaitu :

a. Pada Eclipse, Pilih Help -> Install New Software

b. Pilh Add untuk menambahkan plugin MDS Applaud. Pada langkah ini

dibutuhkan koneksi internet untuk mendownload plugin MDS

Applaud. Pada kolom Name diisi dengan “MDS Applaud”, pada

Location diisi dengan alamat

http://svn.codespot.com/a/eclipselabs.org/mobile-web-development-

with-phonegap/tags/r1.2/download

c. Centang “MDS AppLaud” pada checklist, kemudian Next, kemudian

tunggu beberapa menit sampai ke langkah selanjutnya

21

d. Langkah selanjutnya tekan Next

e. Kemudian klik pada “I Accept the terms of the lisence agreements “

dan klik Finish, dan tunggu sampai proses ini selesai.

22

f. Jika pemasangan berhasil akan muncul ikon MDS Applaud untuk

memulai membuat project dengan phonegap

2.3 Membuat AVD

Untuk dapat menjalankan project yang telah kta buat ke dalam android device,

kita perlu mengubah project kita yang berbasis html ke bentuk native apps dengan

bantuan phonegap, sebelumnya kita akan membuat Android Virtual Device di eclipse

untuk debugging aplikasi yang kita buat apakah berjalan lancer atau tidak

1. Buka Eclipse IDE, click toolbar android AVD

23

2. Pada window yang tampil, karena kita belum memiliki AVD sebelumnya,

click new

3. Kemudian kita atur spesifikasi AVD kita, pada kolom AVD Name isikan

nama AVD kita misalnya “Adroid”

4. Untuk Device, kita bias pilih sesuai keinginan, namun agar dapat

memastikan applikasi kita dapat berjalan baik di semua varian android

device, kita pilih device yang banyak dipakai user,misalnya 3.7” WVGA

(400X800)

5. Target kita pilih Android 2.3.3

6. Sisanya biarkan default dan click OK

24

2.4 BlueStack

1. Pertama-tama instal dulu BlueStacks-nya yang telah disediakan, dengan

cara klik 2x

2. Setelah di klik 2x maka installer akan menampilkan persetujuan sebagai

berikut

centang “I Accept the Term in Th License Agreement”. Dan kemudian klik

tombol “Next” yang sudah aktif setelah di centang.

25

3. Setelah di klik “Next” maka akan tampil pilihan fitur dari bluestack, kita

abaikan saja lalu klik “install”

4. Tunggu proses instalasi sampai selesai.

5. Setelah proses selesai maka akan muncul tampilan sebagai berikut, klik

“Finish”

26

6. Setelah proses instalasi selesai, maka akan muncul tampilan bluestack

(virtual android) yang akan kita gunakan. Pilih saja salah satu tema yang

akan digunakan.

7. Maka tampilan tema sudah tampil, untuk mengeluarkan tema klik tombol menu

yang ada disebelah kanan.

27

8. Setelah itu akan muncul menu yang ada di dalam bluestack.

28

BAB III PEMBUATAN APLIKASI

Langkah pertama untuk membuat aplikasi PhoneGap adalah untuk setup Mobile

Development Environment. Kita akan mulai dengan Android.

Kita perlu menginstal aplikasi berikut di desktop untuk Development Android :

1 JDK 7u25 atau yang lebih baru

2 Eclipse

3 Android SDK dengan platform Android 2.2 atau yang lebih baru

4 Android ADT plugin untuk Eclipse atau Bluestack

5 Android AVD untuk Android 2.2 atau yang lebih baru

6 PhoneGap 2.9.0 (atau yang lebih baru)

Karena Android di program di Java , kita perlu Java Development Kit dan

Eclipse. Kita kemudian akan menginstal Android System Development Kit . Android

SDK adalah SDK generik dan tidak datang dengan dukungan untuk platform apapun .

Sebuah platform android adalah versi OS , misalnya 2.2 Froyo , 2.3 Ginger Bread , dan

4.3 Jelly Bean. Platform ini perlu didownload untuk membuat , membangun, dan

menjalankan project Android . Plugin ini disebut ADT Plugin Android.

Setelah Eclipse , Android SDK , dan Android ADT ( Eclipse Plugin ) semua

sudah siap, kita perlu membuat Emulator untuk Android . Hal ini disebut Android AVD

( Android Virtual Device ) . Jika kita sedang mengembangkan sebuah aplikasi

PhoneGap untuk Android yang menargetkan 2,2 Froyo , kita membutuhkan AVD dari

platform Android yang sama .

3.1 Build Project

Membuat sebuah aplikasi mobile ada dua cara yaitu menggunakan adobe

Phonegap Build dan MDS Applaud.

3.1.1 Dengan Adobe PhoneGap Build

1. Pastikan Anda sudah memiliki akun Github dan menyimpan source code

anda di Github.

29

2. Masuk ke situs https://build.phonegap.com/ , anda akan melihat tampilan

awal seperti ini

3. Sign dengan menggunakan akun github anda

4. Klik tombol new apps , pilih open-source , dan pilih dari

repository github anda pada input text nya

5. Centang enable debugging, lalu klik Ready to build

30

6. Tunggu proses build nya. Untuk aplikasi iOs dan Blackberry anda

membutuhkan sertifikat developer agar aplikasi anda mampu berjalan di

platrform ini

7. Setelah selesai akan terlihat seperti ini. Anda hanya perlu menekan tombol

apk (untuk android) untuk mengunduhnya dari Adobe Phonegap Build

3.1.2 Dengan MDS Applaud

1. Buka aplikasi Eclipse. Kemudian klik icon Phonegap .

2. Aturlah sesuai project yang ingin Anda buat. Disarankan menggunakan

cordova terbaru. Klik Next

31

3. Isikan nama project Anda. Klik Next

4. Pada form selanjutnya disarankan memilih Android versi yang terendah.

Hal ini dikarenakan project yang Anda buat compatible untuk android versi

tersebut ke atas. Klik Next

5. Selanjutnya Anda harus memasukkan nama aplikasi beserta nama package.

Klik Finish

6. Pada folder aplikasi Anda terdapat tanda silang merah yang menandakan

Error. Hal ini dikarenakan aplikasi Anda tidak mendukung untuk Large

Screen. Oleh karena itu untuk menghilangkannya klik pada folder tersebut,

klik kanan Android Manifest.xml lalu pilih edit with Text Editor

32

7. Hilangkan script xLargeScreen=”true” lalu Save

8. Buka folder project Anda di lokasi Anda menyimpan folder tersebut. Buka

folder asset dan www. Kemudian pada file index.html dapat Anda ubah

dengan script Anda sendiri (dapat ditambahkan dengan file html atau

javascript lainnya).

9. Buka kembali project Anda pada Eclipse.exe ,kemudian klik Run pada

toolbar

10. Jika PC Anda terkoneksi dengan device android yang sudah diatur debug

nya, maka project Anda secara otomatis berjalan di device Anda. Jika tidak,

project tersebut akan berjalan pada simulator.

33

3.1.3 Tanpa MDS Applaud

1. Create New Project dan pilih new android application project, maka akan

muncul kotak dialog berikut : Isi Application name dengan nama

Workshop. Selanjutnya Isi Package Name dengan

com.siunand.workshop. Pilih Minimum required SDK dengan API 8:

Android 2.2 (Froyo), hal ini bertujuan untuk menjadikan applikasi dapat

didukung minimal pada Android versi 2.2 . Pilih Target SDK dengan API

18:Android 4.3 (Jelly Bean). Jika telah selesai klik button Next> (nama

dan pilihan dapat disesuaikan menurut keinginan developer).

34

2. Selanjutnya akan timbul kotak dialog seperti gambar berikut. Gunakan

pengaturan default dan klik button Next >

3. Tahap selanjutnya adalah import icon untuk applikasi yang kita buat atau

bisa gunakan pengaturan icon yang telah disediakan software ecclipse. Lalu

35

klik button Next >

4. Selanjutnya akan muncul kotak dialog Create Activity lalu pilih Blank

Activity. Selanjutnya klik button Next >.

36

5. Pada kotak dialog Blank Activity gunakan activity name dan Layout Name

default. klik button Finish.

6. Maka dengan begitu kita telah membuat project baru dengan nama

Workshop. Tampilan viusal wilayah kerja kita adalah sebagai berikut :

37

7. Langkah berikutnya adalah copy file cordova-2.9.0.jar yang terletak pada

directory phonegap-2.9.0\lib\android.

38

8. Lalu Paste pada Package Explorer-> Workshop(nama project)/libs.

9. Klik kanan pada file cordova-2.9.0.jar yang telah kita paste pada folder libs,

lalu pilih Build Path -> Add to Build Path. Lihat gambar berikut :

39

10. Maka pada Referenced Libraries akan muncul file cordova-2.9.0.jar seperti

gambar berikut:

11. Langkah berikutnya adalah copy folder xml yang terletak pada directory

phonegap-2.9.0\lib\android.

40

12. Lalu Paste pada Package Explorer-> Workshop/res.

13. Edit androidmanifest.xml dengan cara klik kanan pilih open with-> Text

Editor, Seperti gamabar berikut :

41

14. Lalu copy script berikut :

<supports-screens

android:largeScreens="true"

android:normalScreens="true"

android:smallScreens="true"

android:resizeable="true"

android:anyDensity="true" />

<uses-permission android:name="android.permission.CAMERA" />

<uses-permission android:name="android.permission.VIBRATE" />

<uses-permission

android:name="android.permission.ACCESS_COARSE_LOCATION" />

<uses-permission

android:name="android.permission.ACCESS_FINE_LOCATION" />

<uses-permission

android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMAN

DS" />

<uses-permission

android:name="android.permission.READ_PHONE_STATE" />

<uses-permission android:name="android.permission.INTERNET"

/>

<uses-permission

android:name="android.permission.RECEIVE_SMS" />

<uses-permission

android:name="android.permission.RECORD_AUDIO" />

<uses-permission

android:name="android.permission.MODIFY_AUDIO_SETTINGS" />

42

<uses-permission

android:name="android.permission.READ_CONTACTS" />

<uses-permission

android:name="android.permission.WRITE_CONTACTS" />

<uses-permission

android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

<uses-permission

android:name="android.permission.ACCESS_NETWORK_STATE" />

Paste pada bagian berikut :

Dan Copy script berikut :

android:configChanges="orientation|screenSize|keyboardHidden"

paste pada bagian seperti pada gambar berikut :

43

15. edit MainActivity.java dengan cara klik kanan pada

workshop/src/com.siunand.workshop/ MainActivity.java pilih open with->

Text Editor, Seperti gamabar berikut :

16. Lalu copy script berikut :

import org.apache.cordova.*;

public class MainActivity extends DroidGap {

@Override

public void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

super.loadUrl("file:///android_asset/www/index.html");

}

}

Kemudian paste pada bagian berikut :

44

17. Selanjutnya adalah buat folder baru pada Package Explorer ->

Workshop/assets dengan cara klik kanan pada assets->new->folder.

Perhatikan gambar berikut:

45

18. Selanjutnya akan muncul kotak dialog seperti gambar dibawah ini. Isi

folder name dengan www, folder ini berguna untuk tempat mengimport file

aplikasi mobile.

19. Kemudian kita import file cordova.js kedalam folderr www yang baru kita

buat. Caranya adalah copy file cordova.js dan paste pada folder www

tersebut

20. Proses persiapan project untuk aplikasi phonegap telah selesai kita lakukan.

46

3.2 Membangun aplikasi mobile GIS

Konsep dari program nya :

1. Mobile app yang dibuat menggunakan jQuery, jQuery mobile, dan

phonegap.

2. Mobile app yang dibuat merupakan single page template dengan panel, bisa

melakukan pencarian terhadap data spatial sama seperti GIS desktop dengan

database yang sama. Pemanggilan data melalui ajax dan json.

3. Mobile app bisa melakukan pencarian berdasarkan nama tempat, kategori,

dan radius dari gps(dari real lokasi dimana kita berada).

4. Hasil dari pencarian berupa marker yang ada di map dan detail tempat yang

dicari berisi nama tempat, alamat, deskripsi, dan image.

5. Mobile app bisa melakukan get direction melalui google direction service

(mengetahui rute jalan yang akan dilewati ke tempat tujuan yang telah

dicari) dengan 4 metode driving, walking, bicycle, transit. Get direction ini

nantinya juga menghitung berapa jarak ke tempat tujuan, alternative route,

dan waktu yang dibutuhkan ke tempat tujuan berdasarkan 4 metode diatas.

Berikut ini merupakan script untuk membuat base halaman dengan panel.

1. index.html

Merupakan file utama yang akan dijalankan oleh program ketika dieksekusi.

Membuat html program :

<!DOCTYPE html>

<html>

<head>

<title>GIS Project</title>

<meta name="viewport" content="width=device-width,

initial-scale=1">

<script type="text/javascript" src="cordova.js"></script>

<script type="text/javascript"

src="https://maps.googleapis.com/maps/api/js?sensor=true"></script

>

<link rel="stylesheet" type="text/css"

href="stylemobile.css">

<link rel="stylesheet" href="jquery.mobile-1.3.2.min.css">

<script src="jquery-1.9.1.min.js"></script>

<script src="jquery.mobile-1.3.2.min.js"></script>

</head>

<body onload="initialize()">

<div data-role="page">

<div data-role="header" data-position="fixed">

47

<a href="#searchpanel" data-icon="bars" data-

iconpos="notext">Search Panel</a>

<a href="#setting" data-icon="gear" data-

iconpos="notext">Setting</a>

<h1>Workshop GIS</h1></div>

<div id="map-canvas" data-role="content"></div>

<div data-role="footer" data-

position="fixed"><h1>Copyright © 2013 SI UNAND</h1></div>

<div data-role="panel" id="searchpanel" data-

display="push" data-position="left"><br><br>

<div id="divpilihan">

<button id="pilihantext" data-icon="search">Cari

Text</button><br>

<button id="pilihanradius" data-icon="search">Cari

Radius</button><br>

<button id="pilihankategori" data-icon="search">Cari

Kategori</button>

</div>

<div id="divcaritext">

<input type="search" id="inputcari"

name="inputcari">

<button id="buttoncaritext" data-

icon="search">Cari</button>

<button class="back" data-icon="arrow-

l">Back</button>

</div>

<div id="divcariradius">

<select id="selecttipe2"></select>

<select id="selectjenis2"></select>

<label for="inputradius">Radius (km)</label>

<input type="range" id="inputradius"

name="inputradius" data-highlight="true" min="1" max="20"

value="5">

<button id="buttoncariradius" data-

icon="search">Cari</button>

<button class="back" data-icon="arrow-l">Back</button>

</div>

<div id="divcarikategori">

<select id="selecttipe"></select>

<select id="selectjenis"></select>

<button id="buttoncarikategori" data-

icon="search">Cari</button>

<button class="back" data-icon="arrow-

l">Back</button>

</div>

<div id="divhasil"><div id="collapsibleset" data-

role="collapsible-set" data-theme="c" data-content-theme="d" data-

collapsed-icon="arrow-r" data-expanded-icon="arrow-d"></div>

<button class="back" data-icon="arrow-

l">Back</button></div>

<div id="divdirection"><button class="back" data-

icon="arrow-l">Back</button></div>

</div>

48

<div data-role="panel" id="setting" data-display="push"

data-position="right"><br><br>

<label for="setserver">Set Server:</label>

<input type="text" name="setserver" id="setserver"

data-clear-btn="true">

<button id="buttonsetserver" onclick="setserver()"

data-icon="gear">Set Server</button>

</div>

</div>

</body>

</html>

2. stylemobile.css

Membuat css program :

#map-canvas {

position: absolute;

top: 0;

bottom: 0;

left: 0;

right: 0;

width: 100%;

height: 100%

}

3. javascript

Membuat javascript program :

1. Global variable

var map;

var markerarray = [];

var infowindow;

var geomarker;

var directionsService;

var directionDisplay;

var server='http://localhost/workshopgis';

var markerarraygeo=[];

var circlearray=[];

var idbuttongetdirection;

var navigasi = false;

var titikawal;

var titikakhir;

2. jquery function

$(function(){

$.ajax({

url: server+'/filltipe.php', data: "", dataType:

'json', success: function(rows)

{

$('#selecttipe').html("");

for (var i in rows)

49

{

var row = rows[i];

$('#selecttipe').append('<option

value="'+row+'">'+row+'</option>');

}

}

});

$(document).on('change','#selecttipe',function(){

var

tipe=document.getElementById("selecttipe").value;

$.ajax({

url: server+'/filljenis.php?tipe='+tipe+'',

data: "", dataType: 'json', success: function(rows)

{

$('#selectjenis').html("");

for (var i in rows)

{

var row = rows[i];

var idjenis=row.id_jenis;

var jenis=row.jenis;

$('#selectjenis').append('<option

value="'+idjenis+'">'+jenis+'</option>');

}

}

});

});

$.ajax({

url: server+'/filltipe.php', data: "", dataType:

'json', success: function(rows)

{

$('#selecttipe2').html("");

for (var i in rows)

{

var row = rows[i];

$('#selecttipe2').append('<option

value="'+row+'">'+row+'</option>');

}

}

});

$(document).on('change','#selecttipe2',function(){

var

tipe=document.getElementById("selecttipe2").value;

$.ajax({

url: server+'/filljenis.php?tipe='+tipe+'',

data: "", dataType: 'json', success: function(rows)

{

$('#selectjenis2').html("");

for (var i in rows)

{

var row = rows[i];

var idjenis=row.id_jenis;

var jenis=row.jenis;

$('#selectjenis2').append('<option

value="'+idjenis+'">'+jenis+'</option>');

}

}

});

});

50

$("#divcaritext").css("display","none");

$("#divcariradius").css("display","none");

$("#divcarikategori").css("display","none");

$("#divhasil").css("display","none");

$("#divdirection").css("display","none");

$("#pilihantext").click(function(){

$("#divpilihan").slideUp();

$("#divcaritext").slideDown();

});

$("#pilihanradius").click(function(){

$("#divpilihan").slideUp();

$("#divcariradius").slideDown();

});

$("#pilihankategori").click(function(){

$("#divpilihan").slideUp();

$("#divcarikategori").slideDown();

});

$(".back").click(function(){

$("#divcaritext").slideUp();

$("#divcariradius").slideUp();

$("#divhasil").slideUp();

$("#divdirection").slideUp();

$("#divcarikategori").slideUp();

$("#paneldirection").slideUp();

$("#divpilihan").slideDown();

$("#collapsibleset").html("");

$("#paneldirection").html("");

$(".ui-popup-container").html("");

navigasi=false;

clearmarker();

clearcircle();

clearroute();

});

$("#buttoncaritext").click(function(){

$("#divcaritext").slideUp();

$("#divhasil").slideDown();

loadcaritext();

});

$("#buttoncariradius").click(function(){

$("#divcariradius").slideUp();

$("#divhasil").slideDown();

loadcariradius();

});

$("#buttoncarikategori").click(function(){

$("#divcarikategori").slideUp();

$("#divhasil").slideDown();

loadcarikategori();

});

});

3. load basemap

function basemap() {

51

var posisiawal=new google.maps.LatLng(-0.914573,100.348907);

var mapOptions = {

center: posisiawal,

zoom: 12,

mapTypeId: google.maps.MapTypeId.ROADMAP

};

map = new google.maps.Map(document.getElementById("map-

canvas"),mapOptions);

}

4. Geolocation

function geolocation(){

var options = { enableHighAccuracy: true };

navigator.geolocation.watchPosition(geolocationSuccess,

geolocationError, options);

}

function geolocationSuccess(posisi){

clearmarkergeo();

var pos=new

google.maps.LatLng(posisi.coords.latitude,posisi.coords.

longitude);

geomarker = new google.maps.Marker({

map: map,

position: pos

});

markerarraygeo.push(geomarker);

map.panTo(pos);

if (navigasi===true)

{

$('#paneldirection').html("");

clearroute();

clearmarkergeo();

titikawal=new

google.maps.LatLng(posisi.coords.latitude,posisi.coords.

longitude);

calcRoute(titikawal,titikakhir);

}

}

function geolocationError(err){

alert("please enable your gps");

}

5. Set Server

function setserver(){

server='http://'+document.getElementById('setserver').value+'

/workshopgis';

$.ajax({

url: server+'/filltipe.php', data: "", dataType: 'json',

success: function(rows)

{

$('#selecttipe').html("");

52

for (var i in rows)

{

var row = rows[i];

$('#selecttipe').append('<option

value="'+row+'">'+row+'</option>');

}

}

});

$(document).on('change','#selecttipe',function(){

var tipe=document.getElementById("selecttipe").value;

$.ajax({

url: server+'/filljenis.php?tipe='+tipe+'', data: "",

dataType: 'json', success: function(rows)

{

$('#selectjenis').html("");

for (var i in rows)

{

var row = rows[i];

var idjenis=row.id_jenis;

var jenis=row.jenis;

$('#selectjenis').append('<option

value="'+idjenis+'">'+jenis+'</option>');

}

}

});

});

$.ajax({

url: server+'/filltipe.php', data: "", dataType: 'json',

success: function(rows)

{

$('#selecttipe2').html("");

for (var i in rows)

{

var row = rows[i];

$('#selecttipe2').append('<option

value="'+row+'">'+row+'</option>');

}

}

});

$(document).on('change','#selecttipe2',function(){

var tipe=document.getElementById("selecttipe2").value;

$.ajax({

url: server+'/filljenis.php?tipe='+tipe+'', data: "",

dataType: 'json', success: function(rows)

{

$('#selectjenis2').html("");

for (var i in rows)

{

var row = rows[i];

var idjenis=row.id_jenis;

var jenis=row.jenis;

$('#selectjenis2').append('<option

value="'+idjenis+'">'+jenis+'</option>');

}

}

});

});

$('#setting').panel( "close" );

53

}

6. Initialize map

function initialize() {

geolocation();

basemap();

}

7. Pencarian Text

function loadcaritext(){

var

inputcari=document.getElementById("inputcari").value;

if(inputcari==="")

{

alert("isi data yang akan dicari");

$("#divhasil").slideUp();

$("#divcaritext").slideDown();

}

else

{

var script = document.createElement('script');

script.src =

server+'/searchtext.php?cari='+inputcari+'';

document.getElementsByTagName('head')[0].appendChild(scr

ipt);

}

}

8. Pencarian kategori

function loadcarikategori(){

var

selectjenis=document.getElementById("selectjenis").value

;

if(selectjenis==="")

{

alert("Pilih jenis yang akan dicari");

$("#divhasil").slideUp();

$("#divcarikategori").slideDown();

}

else

{

var script = document.createElement('script');

script.src =

server+'/searchkategori.php?jenis='+selectjenis+'';

document.getElementsByTagName('head')[0].appendChild(scr

ipt);

}

}

54

9. Pencarian Radius

function loadcariradius(){

var

inputradius=document.getElementById("inputradius").value

;

var

selectjenis=document.getElementById("selectjenis2").valu

e;

if(selectjenis==="")

{

alert("Pilih jenis yang akan dicari");

$("#divhasil").slideUp();

$("#divcarikategori").slideDown();

}

navigator.geolocation.getCurrentPosition(function

(position) {

var script = document.createElement('script');

script.src =

server+'/searchradius.php?lat='+position.coords.latitude

+'&lng='+position.coords.longitude+'&radius='+inputradiu

s+'&jenis='+selectjenis+'';

document.getElementsByTagName('head')[0].appendChild(scr

ipt);

var circle = new google.maps.Circle({

center: new

google.maps.LatLng(position.coords.latitude,position.coo

rds.longitude),

radius: parseFloat(inputradius*1000),

map: map,

strokeColor: "#FC0808",

strokeOpacity: 0.5,

strokeWeight: 2,

fillColor: "#FC0808",

fillOpacity: 0.2

});

circlearray.push(circle);

});

55

}

10. Load Detail, marker dan infowindow

function loaddata(results){

if(results.features === null)

{

alert("Data yang dicari tidak ada");

}

else

{

for (var i = 0; i < results.features.length; i++) {

var data = results.features[i];

var koordinat = data.geometry.coordinates;

var id=data.properties.id;

var nama = data.properties.nama;

var alamat= data.properties.alamat;

var deskripsi=data.properties.deskripsi;

var latLng = new

google.maps.LatLng(koordinat[1],koordinat[0]);

var gambar=data.properties.image;

$('#collapsibleset').append('<div id="div'+id+'"

class="collapsible"><h3>'+nama+'</h3><p

id="palamat">'+alamat+'</p><p id="pgambar"></p><p>Travel

Mode : <select id="travelmode"><option

value="DRIVING">Driving</option><option

value="WALKING">Walking</option><option

value="BICYCLING">Bicycling</option><option

value="TRANSIT">Transit</option></select></p><button

id="'+i+'" class="buttongetdirection">Get

Direction</button></div>');

$('.collapsible').collapsible();

$('.buttongetdirection').button();

if(deskripsi!==null)

{

$('#palamat').append('<p>'+deskripsi+'</p>');

}

if(gambar!==null){

for(var g = 0; g < gambar.length; g++){

var n=i+''+g;

$('#div'+id+' #pgambar').append('<a

href="#popup'+n+'" data-rel="popup" data-position-

to="window" data-transition="fade"><img class="popphoto"

src="'+server+'/img/'+gambar[g]+'"

style="width:80%"></a><div data-role="popup"

id="popup'+n+'" data-overlay-theme="a" data-theme="d"

data-corners="false"><img class="popphoto"

src="'+server+'/img/'+gambar[g]+'" style="max-

height:80%;"></div>');

$('#popup'+n+'').popup();

}

}

createInfoWindow(latLng, nama, alamat, deskripsi);

}

$('.buttongetdirection').click(function(){

$("#divhasil").slideUp();

$("#divdirection").slideDown();

56

$("#divdirection").prepend('<div

id="paneldirection"></div>');

idbuttongetdirection=this.id;

titikawal=geomarker.getPosition();

titikakhir=markerarray[idbuttongetdirection].getPosition

();

calcRoute(titikawal,titikakhir);

clearmarker();

clearmarkergeo();

clearcircle();

navigasi=true;

});

}

}

function createInfoWindow(latLng, nama, alamat, deskripsi)

{

var marker = new google.maps.Marker({

position: latLng,

map: map

});

markerarray.push(marker);

infowindow = new google.maps.InfoWindow();

var isiinfowindow="<b><h2>"+nama+"</h2></b>Alamat :

<br><br>"+alamat+"<br><br>Keterangan :

<br><br>"+deskripsi;

google.maps.event.addListener(marker, 'click',

function() {

infowindow.setContent(isiinfowindow);

infowindow.open(map, marker);

});

}

11. Direction Service

function calcRoute(start, end) {

var travelmode =

document.getElementById("travelmode").options[document.g

etElementById("travelmode").selectedIndex].value;

directionsService = new

google.maps.DirectionsService();

var request = {

origin:start,

destination:end,

travelMode: google.maps.TravelMode[travelmode],

unitSystem: google.maps.UnitSystem.METRIC,

provideRouteAlternatives: true

};

directionsService.route(request, function(response,

status) {

if (status == google.maps.DirectionsStatus.OK) {

directionsDisplay.setOptions({ preserveViewport:

true });

directionsDisplay.setDirections(response);

}

});

57

directionsDisplay = new

google.maps.DirectionsRenderer();

directionsDisplay.setMap(map);

directionsDisplay.setPanel(document.getElementById('pane

ldirection'));

}

12. Clear Marker, clear circle dan clear direction

function clearmarker(){

for (var i = 0; i < markerarray.length; i++) {

markerarray[i].setMap(null);

}

markerarray=[];

}

function clearmarkergeo(){

for (var i = 0; i < markerarraygeo.length; i++) {

markerarraygeo[i].setMap(null);

}

markerarraygeo=[];

}

function clearroute(){

directionsDisplay.setMap(null);

}

function clearcircle(){

for(var i=0;i<circlearray.length;i++)

{

circlearray[i].setMap(null);

}

circlearray=[];

}

Struktur Program :

58

Complete Source Code Program :

<!DOCTYPE html>

<html>

<head>

<title>GIS Project</title>

<meta name="viewport" content="width=device-width,

initial-scale=1">

<script type="text/javascript" src="cordova.js"></script>

<script type="text/javascript"

src="https://maps.googleapis.com/maps/api/js?sensor=true"></script

>

<link rel="stylesheet" type="text/css"

href="stylemobile.css">

<link rel="stylesheet" href="jquery.mobile-1.3.2.min.css">

<script src="jquery-1.9.1.min.js"></script>

<script src="jquery.mobile-1.3.2.min.js"></script>

<script type="text/javascript">

//google maps fungsi

var map;

var markerarray = [];

var infowindow;

var geomarker;

var directionsService;

var directionDisplay;

var server='http://localhost/workshopgis';

var markerarraygeo=[];

var circlearray=[];

var idbuttongetdirection;

var navigasi = false;

var titikawal;

var titikakhir;

$(function(){

$.ajax({

url: server+'/filltipe.php', data: "", dataType:

'json', success: function(rows)

{

$('#selecttipe').html("");

for (var i in rows)

{

var row = rows[i];

$('#selecttipe').append('<option

value="'+row+'">'+row+'</option>');

}

}

});

$(document).on('change','#selecttipe',function(){

var tipe=document.getElementById("selecttipe").value;

$.ajax({

url: server+'/filljenis.php?tipe='+tipe+'', data: "",

dataType: 'json', success: function(rows)

{

$('#selectjenis').html("");

for (var i in rows)

{

var row = rows[i];

var idjenis=row.id_jenis;

59

var jenis=row.jenis;

$('#selectjenis').append('<option

value="'+idjenis+'">'+jenis+'</option>');

}

}

});

});

$.ajax({

url: server+'/filltipe.php', data: "", dataType:

'json', success: function(rows)

{

$('#selecttipe2').html("");

for (var i in rows)

{

var row = rows[i];

$('#selecttipe2').append('<option

value="'+row+'">'+row+'</option>');

}

}

});

$(document).on('change','#selecttipe2',function(){

var tipe=document.getElementById("selecttipe2").value;

$.ajax({

url: server+'/filljenis.php?tipe='+tipe+'', data: "",

dataType: 'json', success: function(rows)

{

$('#selectjenis2').html("");

for (var i in rows)

{

var row = rows[i];

var idjenis=row.id_jenis;

var jenis=row.jenis;

$('#selectjenis2').append('<option

value="'+idjenis+'">'+jenis+'</option>');

}

}

});

});

$("#divcaritext").css("display","none");

$("#divcariradius").css("display","none");

$("#divcarikategori").css("display","none");

$("#divhasil").css("display","none");

$("#divdirection").css("display","none");

$("#pilihantext").click(function(){

$("#divpilihan").slideUp();

$("#divcaritext").slideDown();

});

$("#pilihanradius").click(function(){

$("#divpilihan").slideUp();

$("#divcariradius").slideDown();

});

$("#pilihankategori").click(function(){

$("#divpilihan").slideUp();

$("#divcarikategori").slideDown();

});

60

$(".back").click(function(){

$("#divcaritext").slideUp();

$("#divcariradius").slideUp();

$("#divhasil").slideUp();

$("#divdirection").slideUp();

$("#divcarikategori").slideUp();

$("#paneldirection").slideUp();

$("#divpilihan").slideDown();

$("#collapsibleset").html("");

$("#paneldirection").html("");

$(".ui-popup-container").html("");

navigasi=false;

clearmarker();

clearcircle();

clearroute();

});

$("#buttoncaritext").click(function(){

$("#divcaritext").slideUp();

$("#divhasil").slideDown();

loadcaritext();

});

$("#buttoncariradius").click(function(){

$("#divcariradius").slideUp();

$("#divhasil").slideDown();

loadcariradius();

});

$("#buttoncarikategori").click(function(){

$("#divcarikategori").slideUp();

$("#divhasil").slideDown();

loadcarikategori();

});

});

function setserver(){

server='http://'+document.getElementById('setserver').value+'/work

shopgis';

$.ajax({

url: server+'/filltipe.php', data: "", dataType:

'json', success: function(rows)

{

$('#selecttipe').html("");

for (var i in rows)

{

var row = rows[i];

$('#selecttipe').append('<option

value="'+row+'">'+row+'</option>');

}

}

});

$(document).on('change','#selecttipe',function(){

var tipe=document.getElementById("selecttipe").value;

$.ajax({

url: server+'/filljenis.php?tipe='+tipe+'', data: "",

dataType: 'json', success: function(rows)

{

$('#selectjenis').html("");

61

for (var i in rows)

{

var row = rows[i];

var idjenis=row.id_jenis;

var jenis=row.jenis;

$('#selectjenis').append('<option

value="'+idjenis+'">'+jenis+'</option>');

}

}

});

});

$.ajax({

url: server+'/filltipe.php', data: "", dataType:

'json', success: function(rows)

{

$('#selecttipe2').html("");

for (var i in rows)

{

var row = rows[i];

$('#selecttipe2').append('<option

value="'+row+'">'+row+'</option>');

}

}

});

$(document).on('change','#selecttipe2',function(){

var tipe=document.getElementById("selecttipe2").value;

$.ajax({

url: server+'/filljenis.php?tipe='+tipe+'', data: "",

dataType: 'json', success: function(rows)

{

$('#selectjenis2').html("");

for (var i in rows)

{

var row = rows[i];

var idjenis=row.id_jenis;

var jenis=row.jenis;

$('#selectjenis2').append('<option

value="'+idjenis+'">'+jenis+'</option>');

}

}

});

});

$('#setting').panel( "close" );

}

function initialize() {

geolocation();

basemap();

}

function basemap() {

var posisiawal=new google.maps.LatLng(-0.914573,100.348907);

var mapOptions = {

center: posisiawal,

zoom: 12,

mapTypeId: google.maps.MapTypeId.ROADMAP

};

62

map = new google.maps.Map(document.getElementById("map-

canvas"),mapOptions);

}

function loadcaritext(){

var inputcari=document.getElementById("inputcari").value;

if(inputcari==="")

{

alert("isi data yang akan dicari");

$("#divhasil").slideUp();

$("#divcaritext").slideDown();

}

else

{

var script = document.createElement('script');

script.src = server+'/searchtext.php?cari='+inputcari+'';

document.getElementsByTagName('head')[0].appendChild(script);

}

}

function loadcarikategori(){

var

selectjenis=document.getElementById("selectjenis").value;

if(selectjenis==="")

{

alert("Pilih jenis yang akan dicari");

$("#divhasil").slideUp();

$("#divcarikategori").slideDown();

}

else

{

var script = document.createElement('script');

script.src =

server+'/searchkategori.php?jenis='+selectjenis+'';

document.getElementsByTagName('head')[0].appendChild(script);

}

}

function loadcariradius(){

var

inputradius=document.getElementById("inputradius").value;

var

selectjenis=document.getElementById("selectjenis2").value;

if(selectjenis==="")

{

alert("Pilih jenis yang akan dicari");

$("#divhasil").slideUp();

$("#divcarikategori").slideDown();

}

navigator.geolocation.getCurrentPosition(function

(position) {

var script = document.createElement('script');

63

script.src =

server+'/searchradius.php?lat='+position.coords.latitude+'&lng='+p

osition.coords.longitude+'&radius='+inputradius+'&jenis='+selectje

nis+'';

document.getElementsByTagName('head')[0].appendChild(script);

var circle = new google.maps.Circle({

center: new

google.maps.LatLng(position.coords.latitude,position.coords.longit

ude),

radius: parseFloat(inputradius*1000),

map: map,

strokeColor: "#FC0808",

strokeOpacity: 0.5,

strokeWeight: 2,

fillColor: "#FC0808",

fillOpacity: 0.2

});

circlearray.push(circle);

});

}

function loaddata(results){

if(results.features === null)

{

alert("Data yang dicari tidak ada");

}

else

{

for (var i = 0; i < results.features.length; i++) {

var data = results.features[i];

var koordinat = data.geometry.coordinates;

var id=data.properties.id;

var nama = data.properties.nama;

var alamat= data.properties.alamat;

var deskripsi=data.properties.deskripsi;

var latLng = new

google.maps.LatLng(koordinat[1],koordinat[0]);

var gambar=data.properties.image;

$('#collapsibleset').append('<div id="div'+id+'"

class="collapsible"><h3>'+nama+'</h3><p

id="palamat">'+alamat+'</p><p id="pgambar"></p><p>Travel Mode :

<select id="travelmode"><option

value="DRIVING">Driving</option><option

value="WALKING">Walking</option><option

value="BICYCLING">Bicycling</option><option

value="TRANSIT">Transit</option></select></p><button id="'+i+'"

class="buttongetdirection">Get Direction</button></div>');

$('.collapsible').collapsible();

$('.buttongetdirection').button();

if(deskripsi!==null)

{

$('#palamat').append('<p>'+deskripsi+'</p>');

}

if(gambar!==null){

for(var g = 0; g < gambar.length; g++){

var n=i+''+g;

64

$('#div'+id+' #pgambar').append('<a

href="#popup'+n+'" data-rel="popup" data-position-to="window"

data-transition="fade"><img class="popphoto"

src="'+server+'/img/'+gambar[g]+'" style="width:80%"></a><div

data-role="popup" id="popup'+n+'" data-overlay-theme="a" data-

theme="d" data-corners="false"><img class="popphoto"

src="'+server+'/img/'+gambar[g]+'" style="max-

height:80%;"></div>');

$('#popup'+n+'').popup();

}

}

createInfoWindow(latLng, nama, alamat, deskripsi);

}

$('.buttongetdirection').click(function(){

$("#divhasil").slideUp();

$("#divdirection").slideDown();

$("#divdirection").prepend('<div

id="paneldirection"></div>');

idbuttongetdirection=this.id;

titikawal=geomarker.getPosition();

titikakhir=markerarray[idbuttongetdirection].getPosition();

calcRoute(titikawal,titikakhir);

clearmarker();

clearmarkergeo();

clearcircle();

navigasi=true;

});

}

}

function calcRoute(start, end) {

var travelmode =

document.getElementById("travelmode").options[document.getElementB

yId("travelmode").selectedIndex].value;

directionsService = new google.maps.DirectionsService();

var request = {

origin:start,

destination:end,

travelMode: google.maps.TravelMode[travelmode],

unitSystem: google.maps.UnitSystem.METRIC,

provideRouteAlternatives: true

};

directionsService.route(request, function(response, status)

{

if (status == google.maps.DirectionsStatus.OK) {

directionsDisplay.setOptions({ preserveViewport: true });

directionsDisplay.setDirections(response);

}

});

directionsDisplay = new google.maps.DirectionsRenderer();

directionsDisplay.setMap(map);

directionsDisplay.setPanel(document.getElementById('paneldirection

'));

}

function clearmarker(){

65

for (var i = 0; i < markerarray.length; i++) {

markerarray[i].setMap(null);

}

markerarray=[];

}

function clearmarkergeo(){

for (var i = 0; i < markerarraygeo.length; i++) {

markerarraygeo[i].setMap(null);

}

markerarraygeo=[];

}

function clearroute(){

directionsDisplay.setMap(null);

}

function clearcircle(){

for(var i=0;i<circlearray.length;i++)

{

circlearray[i].setMap(null);

}

circlearray=[];

}

function createInfoWindow(latLng, nama, alamat, deskripsi)

{

var marker = new google.maps.Marker({

position: latLng,

map: map

});

markerarray.push(marker);

infowindow = new google.maps.InfoWindow();

var isiinfowindow="<b><h2>"+nama+"</h2></b>Alamat :

<br><br>"+alamat+"<br><br>Keterangan : <br><br>"+deskripsi;

google.maps.event.addListener(marker, 'click',

function() {

infowindow.setContent(isiinfowindow);

infowindow.open(map, marker);

});

}

function geolocation(){

var options = { enableHighAccuracy: true };

navigator.geolocation.watchPosition(geolocationSuccess,

geolocationError, options);

}

function geolocationSuccess(posisi){

clearmarkergeo();

var pos=new

google.maps.LatLng(posisi.coords.latitude,posisi.coords.longitude)

;

geomarker = new google.maps.Marker({

map: map,

position: pos

66

});

markerarraygeo.push(geomarker);

map.panTo(pos);

if (navigasi===true)

{

$('#paneldirection').html("");

clearroute();

clearmarkergeo();

titikawal=new

google.maps.LatLng(posisi.coords.latitude,posisi.coords.longitude)

;

calcRoute(titikawal,titikakhir);

}

}

function geolocationError(err){

alert("please enable your gps");

}

</script>

</head>

<body onload="initialize()">

<div data-role="page">

<div data-role="header" data-position="fixed">

<a href="#searchpanel" data-icon="bars" data-

iconpos="notext">Search Panel</a>

<a href="#setting" data-icon="gear" data-

iconpos="notext">Setting</a>

<h1>Workshop GIS</h1></div>

<div id="map-canvas" data-role="content"></div>

<div data-role="footer" data-

position="fixed"><h1>Copyright © 2013 SI UNAND</h1></div>

<div data-role="panel" id="searchpanel" data-

display="push" data-position="left"><br><br>

<div id="divpilihan">

<button id="pilihantext" data-icon="search">Cari

Text</button><br>

<button id="pilihanradius" data-icon="search">Cari

Radius</button><br>

<button id="pilihankategori" data-icon="search">Cari

Kategori</button>

</div>

<div id="divcaritext">

<input type="search" id="inputcari"

name="inputcari">

<button id="buttoncaritext" data-

icon="search">Cari</button>

<button class="back" data-icon="arrow-

l">Back</button>

</div>

<div id="divcariradius">

<select id="selecttipe2"></select>

<select id="selectjenis2"></select>

<label for="inputradius">Radius (km)</label>

<input type="range" id="inputradius"

name="inputradius" data-highlight="true" min="1" max="20"

value="5">

67

<button id="buttoncariradius" data-

icon="search">Cari</button>

<button class="back" data-icon="arrow-l">Back</button>

</div>

<div id="divcarikategori">

<select id="selecttipe"></select>

<select id="selectjenis"></select>

<button id="buttoncarikategori" data-

icon="search">Cari</button>

<button class="back" data-icon="arrow-

l">Back</button>

</div>

<div id="divhasil"><div id="collapsibleset" data-

role="collapsible-set" data-theme="c" data-content-theme="d" data-

collapsed-icon="arrow-r" data-expanded-icon="arrow-d"></div>

<button class="back" data-icon="arrow-

l">Back</button></div>

<div id="divdirection"><button class="back" data-

icon="arrow-l">Back</button></div>

</div>

<div data-role="panel" id="setting" data-display="push"

data-position="right"><br><br>

<label for="setserver">Set Server:</label>

<input type="text" name="setserver" id="setserver"

data-clear-btn="true">

<button id="buttonsetserver" onclick="setserver()"

data-icon="gear">Set Server</button>

</div>

</div>

</body>

</html>

File stylemobile.css

#map-canvas {

position: absolute;

top: 0;

bottom: 0;

left: 0;

right: 0;

width: 100%;

height: 100%

}

68

3.3.1 Tampilan Program

1. Tampilan Awal

2. Set server

69

3. Panel dengan pilihan pencarian

4. Pencarian Text

70

5. Pencarian Radius

6. Pencarian Kategori

71

7. Hasil Pencarian

8. Get Direction

72

BAB IV KESIMPULAN

Untuk membuat sebuah aplikasi berbasis mobile khususnya Mobile GIS

Application terdapat beberapa langkah-langkah yang harus dilakukan untuk

mengembangkannya. Serorang developers akan membutuhkan JDK, Eclipse sebagai

IDE, Android SDK dengan platform Android 2.2 atau yang lebih baru, Android ADT

plugin untuk Eclipse atau Bluestack, Android AVD untuk Android 2.2 atau yang lebih

baru, dan PhoneGap 2.9.0 (atau yang lebih baru) untuk mengembangkan atau

membangun sebuah aplikasi berbasis mobile, khususnya mobile dengan system operasi

android yang sedang diminati banyak kalangan saat ini. Seorang developers yang akan

membangun sebuah aplikasi mobile, pengembang juga harus memahami jQuery,

terutama jQuery mobile, untuk membuat aplikasi yang lebih interaktif.

73

DAFTAR KEPUSTAKAAN

Gathol, Rohit, dan Yogesh Patel. 2012. Beginning PhoneGap Mobile Framework for Javascript

dan HTML5. New York : Apress.

Mobile Developer Solutions, “Get Started with Applaud”, diakses dari laman

http://www.mobiledevelopersolutions.com/home/start, tanggal 25 Oktober 2013.

Muhammad K Huda, “Instalasi ADT Untuk Eclipse”, diakses dari laman

http://mkhuda.com/teknologi/instalasi-adt-untuk-eclipse/, tanggal 25 Oktober 2013

Muhammad K Huda, “Memasang Plugin Phonegap MDS Applaud di Eclipse, diakses dari laman

http://mkhuda.com/teknologi/memasang-plugin-phonegap-mds-applaud-di-eclipse/,

tanggal 25 Oktober 2013.