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.