LAPORAN SKRIPSI

PROTOTYPE SISTEM INFORMASI GEOGRAFIS

PENANGANAN KELUHAN MASYARAKAT DI YOGYAKARTA

MEMANFAATKAN GOOGLE FUSION TABLES API

Disusun Oleh

Nama

: Wawan Chahyo Nugroho

Nomor Mahasiswa

: 12131294

Program Studi

: Teknik Informatika

Jenjang

: Strata 1 (S1)

SEKOLAH TINGGI MANAJEMEN INFORMATIKA DAN ILMU KOMPUTER

EL RAHMA

YOGYAKARTA

2018

i

LAPORAN SKRIPSI

PROTOTYPE SISTEM INFORMASI GEOGRAFIS

PENANGANAN KELUHAN MASYARAKAT DI YOGYAKARTA

MEMANFAATKAN GOOGLE FUSION TABLES API

Diajukan untuk memenuhi salah satu syarat memperoleh derajat Sarjana

Teknik Informatika

Disusun Oleh

Nama

: Wawan Chahyo Nugroho

Nomor Mahasiswa

: 12131294

Program Studi

: Teknik Informatika

Jenjang

: Strata 1 (S1)

SEKOLAH TINGGI MANAJEMEN INFORMATIKA DAN ILMU KOMPUTER

EL RAHMA

YOGYAKARTA

2018

ii

HALAMAN PERSETUJUAN

Setelah melakukan bimbingan, telaah, arahan dan koreksi terhadap penulisan skripsi

saudara :

WAWAN CHAHYO NUGROHO, NIM : 12131294 yang berjudul :

PROTOTYPE SISTEM INFORMASI GEOGRAFIS PENANGANAN

KELUHAN MASYARAKAT DI YOGYAKARTA

MEMANFAATKAN GOOGLE FUSION TABLES API

pembimbing berpendapat bahwa skripsi tersebut di atas sudah dapat diajukan dalam

sidang ujian skripsi

Yogyakarta, 16 Juli 2018

Dosen Pembimbing

Wahyu Widodo, S.Kom., M.Kom.

NPP. 200910029

iii

HALAMAN PENGESAHAN

Skripsi Berjudul

PROTOTYPE SISTEM INFORMASI GEOGRAFIS

PENANGANAN KELUHAN MASYARAKAT DI YOGYAKARTA

MEMANFAATKAN GOOGLE FUSION TABLES API

Disusun Oleh

Nama

: Wawan Chahyo Nugroho

Nomor Mahasiswa

: 12131294

Program Studi

: Teknik Informatika

Jenjang

: Strata 1 (S1)

telah diujikan pada

Hari, Tanggal : Senin, 16 Juli 2018

dan dinyatakan telah memenuhi syarat untuk memperoleh gelar Sarjana dalam

ilmu komputer, oleh sidang dewan penguji Tugas Akhir.

Dosen Pembimbing

Wahyu Widodo, S.Kom., M.Kom.

NPP. 200910029

Penguji 1

Penguji 2

Eko Riswanto S.T., M.Cs.

NIP. 197501152005011002

Minarwati S.T., M.Cs.

NPP. 200110006

Yogyakarta, …………… 2018

Ketua STMIK El Rahma

Ketua Program Studi

Teknik Informatika

Eko Riswanto S.T., M.Cs.

NIP. 197501152005011002

Suparyanto, S.T., M.Eng.

NIP. 197005042005011001

iv

PERNYATAAN

Dengan ini saya menyatakan bahwa Laporan Skripsi ini tidak terdapat karya

yang pernah diajukan untuk memperoleh gelar Kesarjanaan di suatu Perguruan

Tinggi, dan sepanjang pengetahuan saya juga tidak terdapat karya atau pendapat yang

pernah ditulis atau diterbitkan oleh orang lain, kecuali yang secara tertulis diacu

dalam naskah ini dan disebutkan dalam daftar pustaka.

Yogyakarta, 5 Mei 2018

Wawan Chahyo Nugroho

NIM. 12131294

v

HALAMAN MOTO

“Janganlah engkau rendahkan cita-citamu, sesungguhnya aku tidak melihat orang

yang lebih malas dari orang yang rendah cita-citanya.”

- Umar bin Khattaab -

vi

HALAMAN PERSEMBAHAN

Penulis mengucapkan terimakasih kepada yang terhormat dan tersayang

Bapak Surono dan Ibu Siti Mutmainah selaku kedua orang tua penulis yang

senantiasa mendukung penulis secara moril dan materiil atas keputusan yang diambil

oleh penulis yaitu resign dari pekerjaan bidang survey pemetaan di salah satu instansi

swasta di Yogyakarta, demi kelancaran proses penyelesaian skripsi ini.

vii

KATA PENGANTAR

Segala puji bagi Allah Yang Maha Pengasih lagi Maha Penyayang, atas Izin

dan Kekuatan-Nya, sehingga penulis mampu menyelesaikan Laporan Skripsi yang

berjudul “Prototype Sistem Informasi Geografis Penanganan Keluhan Masyarakat di

Yogyakarta Memanfaatkan Google Fusion Tables API” sebagai salah satu mata

kuliah yang harus diambil pada Program Studi Teknik Informatika STMIK EL

RAHMA Yogyakarta.

Dalam menyusun skripsi ini, penulis banyak menghadapi kesulitan. Namun,

berkat dukungan dari berbagai pihak, akhirnya penulis dapat menyelesaikan skripsi

ini. Untuk itu pada kesempatan ini, penulis mengucapkan terimakasih kepada yang

terhormat:

1. Bapak Eko Riswanto S.T., M.Cs. selaku Ketua STMIK El Rahma sekaligus

Ketua Penguji yang telah membina penulis dengan cara meneliti, mengoreksi

dan menunjukkan cara merancang sistem dengan baik dan benar, sehingga

memudahkan penulis dalam memperbaiki skripsi ini.

2. Bapak Suparyanto, S.T., M.Eng. selaku Ketua Program Studi Teknik

Informatika yang turut serta mengontrol penulis dalam penyusunan skripsi.

3. Ibu Minarwati S.T., M.Cs. selaku Penguji yang telah membina penulis dengan

cara meneliti, mengoreksi dan menunjukkan cara menyusun laporan skripsi

dengan baik dan benar, sehingga memudahkan penulis dalam memperbaiki

skripsi ini.

4. Bapak Wahyu Widodo, S.Kom., M.Kom. selaku dosen Pembimbing Skripsi

penulis dengan fleksibilitasnya membimbing secara online maupun offline

memudahkan penulis mengoptimalkan waktu-waktu senggang.

Akhir kata, semoga karya tulis ini bisa memberikan manfaat khususnya bagi

penulis, dan umumnya bagi para pembaca.

Yogyakarta, 5 Mei 2018

Penulis

viii

DAFTAR ISI

Halaman

HALAMAN PERSETUJUAN ...................................................................................... ii

HALAMAN PENGESAHAN ......................................................................................iii

PERNYATAAN ........................................................................................................... iv

HALAMAN MOTO ..................................................................................................... v

HALAMAN PERSEMBAHAN .................................................................................. vi

KATA PENGANTAR ................................................................................................ vii

DAFTAR ISI ..............................................................................................................viii

DAFTAR TABEL ........................................................................................................ xi

DAFTAR GAMBAR .................................................................................................. xii

LAMPIRAN ............................................................................................................... xiv

INTISARI .................................................................................................................... xv

BAB I PENDAHULUAN ............................................................................................. 1

1.1 Latar Belakang Masalah .................................................................................... 1

1.2 Rumusan Masalah ............................................................................................. 2

1.3 Tujuan Penelitian ............................................................................................... 2

1.4 Manfaat Penelitian ............................................................................................. 2

1.5 Metodologi Penelitian ....................................................................................... 2

1.5.1 Metode Pengumpulan Data .................................................................. 3

1.5.2 Metode Perancangan Sistem ................................................................ 3

1.6 Sistematika Penulisan ........................................................................................ 6

BAB II TINJAUAN PUSTAKA ................................................................................... 8

BAB III LANDASAN TEORI .................................................................................... 13

3.1 Sistem Informasi Geografis (SIG) ................................................................... 13

3.2 Data dan Informasi Spasial ............................................................................. 14

3.3 GPS .................................................................................................................. 14

3.3.1 Segmen Sistem GPS ................................................................................ 16

3.3.2 Metode Triangulasi ................................................................................ 18

3.3.3 Metode Penentuan Posisi GPS ............................................................... 19

3.3.4 Sumber Kesalahan Sinyal GPS ............................................................. 22

3.3.5 Ketelitian Penentuan Posisi dengan GPS ............................................ 25

3.3.6 Cara Kerja GPS ..................................................................................... 25

3.3.7 Signal Satelit GPS ................................................................................ 26

3.4 Teknologi LBS (Location Based Service) ....................................................... 26

3.5 Internet ............................................................................................................ 28

3.6 Website ............................................................................................................ 29

3.7 Web Browser ................................................................................................... 29

3.8 API .................................................................................................................. 29

3.9 REST ............................................................................................................... 29

3.10 Web Service .................................................................................................... 30

3.11 JSON ............................................................................................................... 30

3.12 HTML .............................................................................................................. 31

ix

3.13 CSS .................................................................................................................. 31

3.14 Javascript ......................................................................................................... 31

3.15 Wampserver .................................................................................................... 31

3.16 CodeIgniter ...................................................................................................... 31

3.17 Bootstrap ......................................................................................................... 33

3.18 Notepad++ ....................................................................................................... 33

3.19 Google Service ................................................................................................ 33

3.19.1 Google Fusion Tables .......................................................................... 34

3.19.2 Google Apps Script .............................................................................. 35

3.19.3 Google Spreadsheets .......................................................................... 35

3.20 Android ............................................................................................................ 36

3.20.1 Arsitektur Android ............................................................................... 37

3.20.2 Fitur Android ....................................................................................... 38

3.20.3 Android Studio .................................................................................... 39

3.21 Kamus Data ..................................................................................................... 39

3.22 UML ................................................................................................................ 40

3.22.1 Notasi UML .......................................................................................... 40

3.22.2 Diagram Use Case ................................................................................ 45

3.22.3 Diagram Aktivitas ................................................................................ 46

3.22.4 Diagram Sekuensial ............................................................................. 46

3.22.5 Diagram Kelas ...................................................................................... 47

3.22.6 Pengelompokan Diagram .................................................................... 48

BAB IV RANCANGAN PENELITIAN .................................................................... 49

4.1 Desain Arsitektur MySIGSAG ........................................................................ 49

4.1.1 Setup Google API Console ................................................................... 50

4.1.2 Setup Google Spreadsheet .................................................................. 51

4.1.3 Setup Google Apps Script .................................................................... 52

4.1.4 Setup Google Fusion Tables ................................................................ 54

4.2 Kamus Data ..................................................................................................... 56

4.3 UML ................................................................................................................ 57

4.3.1 Diagram Use Case MySIGSAG ............................................................. 58

4.3.2 Diagram Aktivitas Workflow MySIGSAG ............................................. 59

4.3.3 Diagram Sekuensial MySIGSAG ........................................................... 61

4.3.4 Diagram Kelas MySIGSAG Mobile ....................................................... 67

4.4 Antarmuka ....................................................................................................... 68

4.4.1 Panel Publik ......................................................................................... 68

4.4.2 Panel Admin ........................................................................................ 77

BAB V HASIL PENELITIAN DAN PEMBAHASAN ............................................. 78

5.1 Panel Publik ..................................................................................................... 78

5.1.1 Home ................................................................................................... 78

5.1.2 About ................................................................................................... 80

5.1.3 Contact ................................................................................................ 81

5.1.4 Splash Screen ....................................................................................... 82

5.1.5 Halaman Utama .................................................................................. 88

x

5.1.6 Halaman Lapor .................................................................................... 89

5.1.7 Halaman Cek Map ............................................................................... 93

5.1.8 Halaman Cek Chart .............................................................................. 94

5.1.9 Halaman Info ....................................................................................... 95

5.2 Panel Admin .................................................................................................... 95

BAB VI PENUTUP .................................................................................................... 98

6.1 Kesimpulan ...................................................................................................... 98

6.2 Saran ................................................................................................................ 98

DAFTAR PUSTAKA ............................................................................................... 99

LAMPIRAN ........................................................................................................... 101

xi

DAFTAR TABEL

Halaman

Tabel 2.1 Tinjauan pustaka ......................................................................................... 11

Tabel 2.2 Lanjutan ...................................................................................................... 12

Tabel 3.1 Notasi use case include dan extend ............................................................. 45

Tabel 3.2 Pengelompokan diagram (Sholiq, 2006) ..................................................... 48

xii

DAFTAR GAMBAR

Halaman

Gambar 1.1 Metode waterfall (Sasmito, 2017) ............................................................. 3

Gambar 3.1 Komponen kunci SIG (Suryani et al., 2011) ........................................... 13

Gambar 3.2 Konstelasi satelit GPS (Riyanto, 2010) ................................................... 15

Gambar 3.3 Segmen sistem GPS (Riyanto, 2010) ...................................................... 16

Gambar 3.4 Proses aliran data satelit dan sistem kontrol (Riyanto, 2010) ................. 17

Gambar 3.5 Triangulasi penghitungan jarak GPS (Riyanto, 2010) ............................ 18

Gambar 3.6 Penentuan posisi metode absolut (Riyanto, 2010) .................................. 20

Gambar 3.7 Penentuan posisi metode relatif (Riyanto, 2010) .................................... 21

Gambar 3.8 Gangguan delay karena ionosfer dan troposfer (Riyanto, 2010) ............ 22

Gambar 3.9 Beberapa jenis gangguan sinyal (Riyanto, 2010) .................................... 23

Gambar 3.10 Geometri satelit (Riyanto, 2010) ........................................................... 24

Gambar 3.11 Konsep triangulasi pada LBS (Riyanto, 2010)...................................... 27

Gambar 3.12 Skenario konsep MVC (rifanmfauzi.com, 2013) .................................. 32

Gambar 3.13 Arsitektur google fusion tables (Mogot dan Papilaya, 2013) ............... 34

Gambar 3.14 Lapisan arsitektur android (John, 2017) ................................................ 37

Gambar 3.15 Notasi actor (Haviluddin, 2011) ........................................................... 41

Gambar 3.16 Notasi class (Haviluddin, 2011) ............................................................ 41

Gambar 3.17 Notasi use case (Haviluddin, 2011) ...................................................... 42

Gambar 3.18 Notasi realization (Haviluddin, 2011) .................................................. 42

Gambar 3.19 Notasi interaction (Haviluddin, 2011) .................................................. 42

Gambar 3.20 Notasi dependency (Haviluddin, 2011) ................................................. 43

Gambar 3.21 Notasi note (Haviluddin, 2011) ............................................................. 43

Gambar 3.22 Notasi association (Haviluddin, 2011).................................................. 43

Gambar 3.23 Notasi generalization (Haviluddin, 2011) ............................................. 44

Gambar 3.24 Notasi package (Haviluddin, 2011) ...................................................... 44

Gambar 3.25 Notasi interface (Haviluddin, 2011)...................................................... 44

Gambar 3.26 Diagram use case sistem ATM (Sholiq, 2006) ..................................... 45

Gambar 3.27 Contoh diagram aktivitas workflow (Sholiq, 2006) .............................. 46

Gambar 3.28 Diagram sekuensial penarikan uang (Sholiq, 2006).............................. 47

Gambar 3.29 Diagram kelas penarikan uang (Sholiq, 2006) ...................................... 48

Gambar 4.1 Desain Arsitektur MySIGSAG ............................................................... 49

Gambar 4.2 Membuat project google cloud console .................................................. 50

Gambar 4.3 Mendapatkan nomor project google console .......................................... 51

Gambar 4.4 Menu Sync spreadsheet to fusion table ................................................... 51

Gambar 4.5 Kebutuhan tautan file spreadsheet........................................................... 52

Gambar 4.6 Kebutuhan ID file fusion tables .............................................................. 52

Gambar 4.7 Mengaktifkan layanan fusion tables API ................................................ 53

Gambar 4.8 Asosiasi file apps script dengan project google console ........................ 53

Gambar 4.9 Menjalankan fungsi setup() ..................................................................... 54

Gambar 4.10 Tabulasi map dan chart googe fusion tables ......................................... 55

Gambar 4.11 Konfigurasi tabulasi map google fusion tables ..................................... 55

Gambar 4.12 Konfigurasi tabulasi chart google fusion tables .................................... 56

xiii

Gambar 4.13 Diagram use case sistem MySIGSAG .................................................. 58

Gambar 4.14 Diagram aktivitas warga melaporkan keluhan ...................................... 59

Gambar 4.15 Diagram aktivitas petugas mengelola laporan keluhan ......................... 60

Gambar 4.16 Diagram sekuensial pengguna MySIGSAG berbasis android .............. 62

Gambar 4.17 Diagram sekuensial pengguna MySIGSAG berbasis web .................... 64

Gambar 4.18 Diagram sekuensial reset password administrator ............................... 66

Gambar 4.19 Diagram kelas mengoperasikan MySIGSAG android .......................... 67

Gambar 4.20 Menu utama panel publik MySIGSAG web ......................................... 69

Gambar 4.21 Menu utama panel publik mobile GIS .................................................. 69

Gambar 4.22 Desain antarmuka home MySIGSAG web ........................................... 70

Gambar 4.23 Desain antarmuka about MySIGSAG web ........................................... 71

Gambar 4.24 Desain antarmuka kontak MySIGSAG web ......................................... 71

Gambar 4.25 Desain antarmuka login MySIGSAG web ............................................ 72

Gambar 4.26 Desain antarmuka splashscreen MySIGSAG android .......................... 72

Gambar 4.27 Desain antarmuka utama MySIGSAG android ..................................... 73

Gambar 4.28 Desain antarmuka lapor MySIGSAG android ...................................... 74

Gambar 4.29 Desain antarmuka cek map MySIGSAG android ................................. 75

Gambar 4.30 Desain antarmuka cek chart MySIGSAG android ................................ 75

Gambar 4.31 Desain antarmuka info MySIGSAG android ........................................ 76

Gambar 4.32 Desain antarmuka panel admin ............................................................. 77

Gambar 5.1 Antarmuka publik home MySIGSAG web ............................................. 78

Gambar 5.2 Info windows dan alert dialog MySIGSAG web .................................... 79

Gambar 5.3 Antarmuka publik about MySIGSAG web ............................................. 80

Gambar 5.4 Antarmuka publik contact MySIGSAG web .......................................... 81

Gambar 5.5 Antarmuka splash screen MySIGSAG android ...................................... 82

Gambar 5.6 Menyertakan google's maven repository ................................................. 83

Gambar 5.7 Menyertakan dependensi google play services auth ............................... 83

Gambar 5.8 Konfigurasi google sign-in for android .................................................. 84

Gambar 5.9 Konfigurasi OAuth client ........................................................................ 84

Gambar 5.10 Mendapatkan nama package project android ........................................ 85

Gambar 5.11 Mendapatkan SHA1 certificate ............................................................. 86

Gambar 5.12 Download client configuration ............................................................. 86

Gambar 5.13 Memasang file credential.json ke project android studio ...................... 87

Gambar 5.14 Antarmuka halaman utama MySIGSAG android ................................. 88

Gambar 5.15 Antarmuka lapor MySIGSAG android ................................................. 89

Gambar 5.16 Form validation lapor MySIGSAG android ......................................... 90

Gambar 5.17 GPS aktif di halaman lapor MySIGSAG android ................................. 91

Gambar 5.18 Network aktif di halaman lapor MySIGSAG android ........................... 92

Gambar 5.19 Halaman map MySIGSAG android ...................................................... 93

Gambar 5.20 Halaman chart MySIGSAG android ..................................................... 94

Gambar 5.21 Halaman info MySIGSAG android ....................................................... 95

Gambar 5.22 Antarmuka login MySIGSAG web ....................................................... 95

Gambar 5.23 Antarmuka dashboard admin MySIGSAG web ................................... 96

xiv

LAMPIRAN

Halaman

Lampiran 1 Source code google apps script ............................................................. 102

Lampiran 2 Lanjutan ................................................................................................. 103

Lampiran 3 Lanjutan ................................................................................................. 104

Lampiran 4 Lanjutan ................................................................................................. 105

Lampiran 5 Lanjutan ................................................................................................. 106

Lampiran 6 Lanjutan ................................................................................................. 107

Lampiran 7 Kode sumber header panel publik MySIGSAG web ............................ 108

Lampiran 8 Kode sumber home panel publik MySIGSAG web............................... 109

Lampiran 9 Lanjutan ................................................................................................. 110

Lampiran 10 Lanjutan ............................................................................................... 111

Lampiran 11 Kode sumber about panel publik MySIGSAG web ............................ 112

Lampiran 12 Kode sumber contact panel publik MySIGSAG web ......................... 113

Lampiran 13 Lanjutan ............................................................................................... 114

Lampiran 14 Kode sumber splash screen ................................................................. 115

Lampiran 15 Lanjutan ............................................................................................... 116

Lampiran 16 Lanjutan ............................................................................................... 117

Lampiran 17 Kode sumber menu lapor ..................................................................... 118

Lampiran 18 Lanjutan ............................................................................................... 119

Lampiran 19 Lanjutan ............................................................................................... 120

Lampiran 20 Lanjutan ............................................................................................... 121

Lampiran 21 Lanjutan ............................................................................................... 122

Lampiran 22 Lanjutan ............................................................................................... 123

Lampiran 23 Lanjutan ............................................................................................... 124

Lampiran 24 Lanjutan ............................................................................................... 125

Lampiran 25 Lanjutan ............................................................................................... 126

Lampiran 26 Lanjutan ............................................................................................... 127

Lampiran 27 Kode sumber menu cek map ............................................................... 128

Lampiran 28 Kode sumber menu cek chart .............................................................. 129

Lampiran 29 Lanjutan ............................................................................................... 130

Lampiran 30 Lanjutan ............................................................................................... 131

Lampiran 31 Lanjutan ............................................................................................... 132

Lampiran 32 Lanjutan ............................................................................................... 133

Lampiran 33 Kode sumber menu info ...................................................................... 134

Lampiran 34 Kode sumber login admin.................................................................... 134

Lampiran 35 Kode sumber dashboard admin ........................................................... 135

Lampiran 36 Lanjutan ............................................................................................... 136

Lampiran 37 Lanjutan ............................................................................................... 137

Lampiran 38 Lanjutan ............................................................................................... 138

Lampiran 39 Lanjutan ............................................................................................... 139

xv

INTISARI

PROTOTYPE SISTEM INFORMASI GEOGRAFIS

PENANGANAN KELUHAN MASYARAKAT DI YOGYAKARTA

MEMANFAATKAN GOOGLE FUSION TABLES API

Oleh

WAWAN CHAHYO NUGROHO

12131294

Unit Pelayanan Informasi dan Keluhan (UPIK) merupakan fasilitas bagi

masyarakat untuk menyampaikan keluhan, pertanyaan, informasi, usul maupun saran

guna pengembangan pelayanan pemerintah dan pembangunan kota Yogyakarta.

Namun sangat disayangkan karena belum dapat menyediakan kemudahan bagi

masyarakat kota Yogyakarta untuk mengutarakan keluhan mereka terkait lalu lintas

dan angkutan jalan sekaligus memantau perkembangan laporan mereka atau isu

keluhan lalu lintas dan angkutan jalan yang sedang berkembang saat ini. Selain itu,

juga belum dapat menyajikan informasi keluhan-keluhan secara komprehensif karena

selama ini masih sebatas running text / scrolling text di bilah kiri website.

Penelitian pembuatan prototype Sistem Informasi Geografis penanganan

keluhan masyarakat di Yogyakarta ini dimulai dari observasi obyek, pengambilan

data, dan studi literatur. Kemudian merancang sistem menggunakan Unified

Modeling Language (UML) dan mendesain antarmuka. Setelah itu menentukan

kebutuhan software, hardware dan layanan Google yang diperlukan seperti Google

Spreadsheet, Google Apps Script, dan Google Fusion Tables. Berikutnya coding

mengunakan php, java, dan javascript untuk sisi backend. Terakhir adalah pengujian

aplikasi di lapangan dengan ruang keadaan yang berbeda-beda.

Penelitian ini menghasilkan prototype Sistem Informasi Geografis (SIG)

berbasis web dan mobile android dengan nama MySIGSAG. Terdiri dari panel publik

yang berisi halaman home, splashscreen, dan menu utama seperti lapor, cek map, cek

chart, dan info. Selain itu panel admin yang berisi halaman utama untuk mengelola

konten. Prototype ini dapat memberikan kemudahan bagi masyarakat Yogyakarta

untuk mengutarakan keluhan mereka. Selain itu dapat dimanfaatkan oleh UPIK untuk

menyajikan informasi perkembangan keluhan masyarakat di Yogyakarta secara

komprehensif.

Kata Kunci: sig, gis, gps, satellite, web service, codeigniter, android, google fusion

tables, google apps script, google spreadsheets, keluhan masyarakat, yogyakarta.

1

BAB I

PENDAHULUAN

1.1 Latar Belakang Masalah

Unit Pelayanan Informasi dan Keluhan (UPIK) merupakan fasilitas bagi

masyarakat untuk menyampaikan keluhan, pertanyaan, informasi, usul maupun

saran guna pengembangan pelayanan pemerintah dan pembangunan kota

Yogyakarta. Salah satu bentuk keluhan publik yang sering menjadi perhatian

adalah terkait kerusakan jalan. Fasilitas yang disediakan UPIK adalah SMS ke

08122780001, telepon/fax ke (0274)561270, e-mail ke upik@jogjakota.go.id,

mengisi formulir di http://upik.jogjakota.go.id/ atau datang langsung ke Bagian

Hubungan Masyarakat dan Informasi Sekretariat Daerah Kota Yogyakarta.

Media yang digunakan UPIK dalam menampung keluhan masyarakat masih

dinilai kurang dapat memberikan feedback yang informatif karena hanya sebatas

running text / scrolling text di bilah kiri website. Berbeda jika UPIK

menggunakan Sistem Informasi Geografis, maka data keluhan masyarakat dapat

disimpan dengan baik dan terorganisir. Selain itu, informasi yang disajikan juga

lebih komprehensif karena melibatkan multimedia, peta dan data spasial.

Dalam penelitian ini, prototype Sistem Informasi Geografis (SIG) dibuat

dengan cara memanfaatkan Google Fusion Tables API karena handal dalam

menangani penyimpanan dan visualisasi data. Selain itu dapat meminimalisir baris

program yang dibuat tanpa mengurangi esensi sebuah Sistem Informasi Geografis.

Ditinjau dari faktor LOC (Line of Code) untuk keperluan estimasi anggaran

proyek, maka hal ini dapat menghemat biaya pembuatan SIG dan secara tidak

langsung dapat meningkatkan keuntungan bisnis.

2

1.2 Rumusan Masalah

1. Bagaimana merancang sistem informasi geografis berbasis web yang dapat

menyajikan informasi keluhan masyarakat Jogja secara komprehensif ?

2. Bagaimana merancang sistem informasi geografis berbasis android yang

dapat menyajikan informasi keluhan masyarakat Jogja secara komprehensif,

sekaligus memfasilitasi masyarakat Jogja untuk mengutarakan keluhannya ?

1.3 Tujuan Penelitian

Tujuan dari penelitian ini adalah menyediakan prototype Sistem Informasi

Geografis (SIG) penanganan keluhan masyarakat di Yogyakarta dengan

memanfaatkan Google Fusion Tables API yang diberi nama MySIGSAG. Sebagai

bentuk penawaran kepada pemerintah kota Yogyakarta, dalam hal ini adalah

UPIK.

1.4 Manfaat Penelitian

Manfaat dari penelitian ini adalah.

1. Dapat membantu UPIK dalam mengelola data keluhan dan menyajikannya

secara komprehensif.

2. Dapat meningkatkan pelayanan UPIK kepada masyarakat dengan mediasi

Sistem Informasi Geografis berbasis web dan android.

3. Dapat membantu UPIK dalam mempertimbangkan pengambilan keputusan

ataupun kebijakan.

4. Dapat memudahkan masyarakat Jogja dalam mengutarakan keluhan mereka

kepada UPIK.

5. Dapat membantu masyarakat menentukan jalur alternatif yang lebih aman

untuk dilalui.

1.5 Metodologi Penelitian

Dalam membuat aplikasi ini, metodologi yang digunakan adalah

pengumpulan data dan perancangan sistem.

3

1.5.1 Metode Pengumpulan Data

1. Observasi, yaitu melakukan pengamatan secara langsung laman UPIK

sebagai subyek penelitian, khususnya pada formulir keluhan dan widget

pesan masyarakat. Data dikumpulkan dengan cara mencatat daftar keluhan

masyarakat yang ditampilkan selama satu periode running text.

2. Studi literatur, yaitu mempelajari dan mengevaluasi penelitian sebelumnya

dengan tetap memperhatikan relevansi serta manfaatnya terhadap penelitian

yang dilakukan. Dokumen yang dipelajari meliputi buku, jurnal, laporan

ilmiah berkaitan dengan sistem informasi geografis.

3. Dokumentasi, yaitu data keluhan masyarakat dikelompokkan menjadi

beberapa kategori diantaranya infrastruktur, normatif dan teknis. Data yang

telah dikelompokan dikaji berdasarkan studi leteratur untuk mendapatkan

gambaran umum tentang konsep sistem informasi geografis yang dibangun.

1.5.2 Metode Perancangan Sistem

Gambar 1.1 Metode waterfall (Sasmito, 2017)

Gambar 1.1 menunjukkan tahapan-tahapan yang harus dilalui dalam

membangun aplikasi ini, metode yang digunakan adalah air terjun (waterfall).

Waterfal adalah metode klasik yang sistematis dan sekuensial (Sasmito, 2017).

Tahapan-tahapan ini dijelaskan lebih lengkap pada paragraf berikut.

4

Analisis Syarat dan Ketentuan (Requirements definition)

Mengumpulkan data apa yang dibutuhkan secara lengkap, kemudian

dianalisis guna mendefinisikan kebutuhan yang harus dipenuhi oleh program yang

akan dibangun. Pada penelitian ini, anaisis kebutuhan dikelompokkan menjadi.

1. Identifikasi Masalah, yaitu permasalahan yang terjadi pada UPIK dalam

dalam menangani keluhan masyarakat Jogja diantaranya perolehan data

pada widget pesan masyarakat UPIK masih mengandalkan short message

service (SMS) dan formulir di web UPIK. Informasi yang disajikan hanya

berupa plain text tanpa visualisasi yang menarik. Informasi pada laman

UPIK masih sangat terbatas dan belum menjangkau perkembangan

teknologi saat ini.

2. Analisa Sistem, yaitu UPIK yang memperoleh data secara interview dengan

warga Jogja dengan cara bertemu langsung di kantor UPIK, SMS dan

formulir sederhana di web beresiko terhadap rendahnya kualitas data,

disamping itu waktu, tenaga, dan biaya yang dikerahkan menjadi kurang

efisien. Informasi keluhan yang kurang “transparan” dapat berpengaruh

terhadap minat masyarakat kota Jogja dalam berpartisipasi melaporkan

keluhan.

3. Kebutuhan Data, yaitu data yang dibutuhkan dalam desain sistem informasi

geografis ini diantaranya profil instansi, informasi akun google instansi

atau pribadi atau buat baru.

4. Kebutuhan Fungsional, yaitu terdiri dari proses login untuk pengguna,

proses login untuk administrator, pengolahan data pengguna meliputi read

dan insert, pengolahan data admin meliputi read, update, dan delete, proses

visualisasi data untuk platform web, dan proses visualisasi data untuk

platform android.

Sistem dan Desain Perangkat Lunak (System and software design)

Setelah apa yang dibutuhkan selesai dikumpulkan dan sudah lengkap maka

desain kemudian dikerjakan.

5

Pada penelitian ini, desain aplikasi dikerjakan mulai dari perancangan

sistem menggunakan Unified Modeling Language (UML), kemudian antarmuka

MySIGSAG berbasis web, dan terakhir antarmuka MySIGSAG berbasis android.

Implementasi dan Pengujian Unit (Implementation and unit testing)

Desain aplikasi diterjemahkan ke dalam kode-kode dengan menggunakan

bahasa pemrograman yang sudah ditentukan. Program yang dibangun langsung

diuji secara unit, apakah sudah bekerja dengan baik.

Pada penelitian ini, bahasa pemrograman yang digunakan adalah php, java,

javascript, html dan css. Sementara itu, untuk mendapatkan hasil terbaik, maka

dilakukan pengujian program secara unit dengan cara mengkloning project utama

kemudian membandingkannya. Program dengan kinerja terbaik diimplemetasikan

pada project utama.

Integrasi dan Pengujian Sistem (Integration and system testing)

Penyatuan unit-unit program untuk kemudian diuji secara keseluruhan

(system testing).

Pada penelitian ini, pengujian sistem dilakukan dengan cara kompilasi

project utama MySIGSAG berbasis android sehingga diperoleh file dengan

ekstensi *apk, kemudian menjalankannya ke perangkat mobile android oppo find

5 mini. Sementara itu, project utama MySIGSAG berbasis web dijalankan ke

penyedia hosting yang telah ditentukan.

Operasi dan Pemeliharaan (Operation and maintenance)

Mengoperasikan program di lingkungannya dan melakukan pemeliharaan,

seperti penyesuaian atau perubahan untuk adaptasi dengan situasi yang

sebenarnya.

Pada penelitian ini, MySIGSAG berbasis android dijalankan pada ruang

keadaaan yang berbeda-beda seperti di ruang terbuka, ruang padat bangunan

ataupun pohon, hingga di ruang tertutup seperti di dalam gedung. Hal ini

dilakukan untuk mengetahui batas maksimal MySIGSAG dapat dioperasikan.

6

1.6 Sistematika Penulisan

Untuk mempermudah pengerjaan, maka susunan penulisan laporan dibuat

sebagaimana berikut.

BAB I

PENDAHULUAN.

Bagian ini memuat latar belakang masalah, rumusan

masalah, tujuan penelitian, manfaat penelitian, metode

penelitian dan sistematika penulisan.

BAB II

TINJAUAN PUSTAKA.

Bagian ini memuat uraian sistematis tentang hasil-hasil

penelitian yang didapat oleh peneliti terdahulu yang ada

hubungannya dengan penelitian ini. Bagian ini juga

memuat penegasan posisi penelitian ini terhadap

penelitian-penelitian sebelumnya. Selain itu, berisi

justifikasi atau kritik pada kelemahan atau kekurangan

yang mungkin ada pada penelitian terdahulu yang dapat

dijadikan argumen bahwa penelitian yang dilakukan ini

bersifat menyempurnakan atau mengembangkan penelitian

terdahulu.

BAB III

LANDASAN TEORI.

Bagian ini memuat rangkuman teori yang diambil dari

buku atau literatur yang mendukung penelitian, serta

memuat penjelasan tentang konsep dasar yang diperlukan

untuk pemecahan permasalahan.

BAB IV

RANCANGAN PENELITIAN.

Bagian ini memuat uraian sistematis tentang desain

aplikasi MySIGSAG.

BAB V

HASIL PENELITIAN DAN PEMBAHASAN.

Bagian ini memuat uraian hasil implementasi rancangan

pada BAB IV dan telah melalui tahap uji coba di lapangan.

Selain itu memuat pembahasan tentang kelebihan dan

7

kelemahan aplikasi MySIGSAG yang dideskripsikan

secara jelas, lengkap, dan berkesinambungan.

BAB VI

PENUTUP.

Bagian ini memuat kesimpulan berupa pernyataan singkat

dan jelas tentang hasil yang diperoleh dalam penelitian ini,

serta merupakan jawaban atas permasalahan yang

dirumuskan. Selain itu memuat saran berupa usulan atau

pendapat yang ditujukan bagi peneliti berikutnya untuk

pengembangan aplikasi MySIGSAG.

8

BAB II

TINJAUAN PUSTAKA

Lestari dan Iskandar (2013) melakukan penelitian tentang Sistem Informasi

Geografis berbasis web untuk memetakan destinasi wisata, hotel, dan restaurant di

Kabupaten Kebumen. Aplikasi ini dibangun menggunakan bahasa pemrograman

PHP dan Google Maps API. Aplikasi ini tidak menyertakan informasi titik

koordinat, sehingga pengguna kesulitan jika ingin menelusuri titk lokasi yang

dimaksud. Penelitian ini memerlukan perancangan database dan pemrograman

untuk visualisasi data, akibatnya jumlah line of code yang dihasilkan meningkat.

Hal ini secara tidak langsung dapat mengurangi keuntungan bisnis. Penelitian ini

belum menghasilkan aplikasi SIG berbasis android. Berbeda jika memanfaatkan

Google Fusion Tables seperti topik penelitian yang dilakukan penulis, maka

aplikasi yang dibangun menjadi database-less, visualisasi data spasial menjadi

lebih mudah, dan line of code yang dihasilkan juga lebih sedikit.

Novita dan Kharisma (2015) melakukan penelitian tentang Sistem Informasi

Geografis berbasis web untuk memetakan lokasi puskesmas di Kabupaten Bantul.

Aplikasi dibangun menggunakan bahasa pemrograman PHP, Google Maps API,

dan Algoritma Semut untuk metode pencarian puskesmas dan rute terdekat. Unsur

kecerdasan buatan merupakan kelebihan tersendiri dalam penelitian ini dibanding

penelitian yang dilakukan oleh Lestari dan Iskandar (2013). Kedua penelitian ini

perlu perancangan database, pemrograman visualisasi data spasial, dan belum

menghasilkan aplikasi berbasis android. Sementara itu, penelitian yang dilakukan

penulis menghasilkan aplikasi berbasis web dan android memanfaatkan Google

Fusion Tables API sehingga aplikasi yang dihasilkan menjadi database-less,

handal dalam visualisasi data spasial, dan menghemat anggaran proyek.

Nurfiatun dan Winantu (2015) melakukan penelitian tentang Sistem

Informasi Geografis berbasis web untuk memetakan hotel terdekat di Surakarta.

Aplikasi dibangun menggunakan bahasa pemrograman PHP, Google Maps API,

dan Algoritma Generate and Test dan Haversine Formula untuk metode

pencarian hotel dan rute terdekat. Penelitian Nurfiatun dan Winantu (2015) identik

9

dengan penelitian yang dilakukan oleh Novita dan Kharisma (2015), hanya saja

algoritma penentuan lokasi dan rute terdekat yang mereka gunakan berbeda.

Selain itu subyek penelitian mereka juga berbeda. Jika penelitian Nurfiatun dan

Winantu (2015) dan Novita dan Kharisma (2015) unggul dalam unsur kecerdasan

buatan dibanding penelitian yang dilakukan oleh Lestari dan Iskandar (2013),

maka penelitian ini unggul dalam hal visualisasi data spasial dan hemat anggaran

proyek dengan cara memanfaatkan Google Fusion Tables API. Ketiga penelitian

ini hanya menghasilkan aplikasi SIG berbasis web, sementara penelitian yang

dilakukan penulis menghasilkan apliksai SIG berbasis web dan android.

Rizki et al. (2016) melakukan penelitian tentang Sistem Informasi Geografis

berbasis android untuk pemetaan kandang peternakan di Kabupaten Padang

Pariaman. Menggunakan MapInfo Professional 9.0 sebagai dasar pembuatan peta

aplikasi, Eclipse sebagai dasar Aplikasi di android, dan Giscloud sebagai server

penyimpanan peta secara online. Environment tersebut memungkinkan aplikasi

yang dibangun dapat diakses secara online maupun offline, akan tetapi informasi

yang disajikan pada peta masih minim. Salah satunya adalah tidak dapat

memberikan informasi jalan di Kabupaten Padang Pariaman secara detail. Hal ini

merupakan kelemahan dari peta yang dibuat secara swadaya menggunakan

MapInfo. Berbeda jika memanfaatkan Peta Google seperti pada penelitian Lestari

dan Iskandar (2013), penelitian Novita dan Kharisma (2015), dan penelitian

Nurfiatun dan Winantu (2015), maka informasi yang disajikan cukup lengkap dan

up-to-date. Peta Google ini sudah termasuk dalam layanan Google Fusion Tables

yaitu topik penelitian yang dilakukan penulis.

Ekawati dan Suharjito (2016) melakukan penelitian tentang Sistem

Informasi Geografis untuk visualisasi peta tematik. Menggunakan Google Fusion

Tables untuk visualisasi data spasial. PHP sebagai bahasa pemrograman utama

untuk backend. Penelitian ini menghasilkan prototype SIG berbasis web,

dilengkapi dengan master data Keyhole Markup Language (KML) seluruh

wilayah kabupaten di Indonesia. Peta tematik yang dihasilkan berupa poligon

bersifat dinamis. Sementara itu, penelitian yang dilakukan Rizki et al. (2016)

menghasilkan peta tematik berupa marker bersifat dinamis dan realtime yang

10

dapat diakses secara online maupun offline, tapi butuh dana dan sumber daya

lebih untuk membangunnya. Penelitian yang dilakukan penulis menggunakan

metode yang sama dengan Ekawati dan Suharjito (2016), hanya saja peta tematik

yang dihasilkan berupa merker bersifat dinamis. Selain itu lebih hemat sumber

daya dan dana untuk membangunnya. Jika penelitian Ekawati dan Suharjito

(2016), penelitian Lestari dan Iskandar (2013), penelitian Novita dan Kharisma

(2015), dan penelitian Nurfiatun dan Winantu (2015) hanya menghasilkan aplikasi

SIG berbasis web, sedangkan penelitian Rizki et al. (2016) hanya menghasilkan

aplikasi SIG berbasis android, maka penelitian yang dilakukan penulis

menghasilkan aplikasi SIG berbasis web dan android.

Nugroho (2018) melakukan penelitian tentang Sistem Informasi Geografis

untuk memetakan keluhan masyarakat Yogyakarta terkait Lalu Lintas dan

Angkutan Jalan. Menggunakan Google Fusion Tables sebagai server visualisasi

data spasial, Google Spreadsheet sebagai server penyimpanan data, dan Google

Apps Script untuk pemrograman sisi server yang menjembatani komunikasi antar

aplikasi. PHP, java, dan javascript sebagai bahasa pemrograman utama untuk

backend. Penelitian tersebut menghasilkan prototype SIG berbasis web dan

android. Peta tematik yang dihasilkan berupa merker bersifat dinamis dan

dilengkapi dengan chart. GPS dan Network Provider adalah metode yang

digunakan prototype SIG tersebut untuk menghasilkan data spasial. Prototype

tersebut masih memiliki kekurangan seperti informasi yang disajikan belum

realtime, belum terdapat push notifications, belum terdapat fitur sosial media

untuk komunikasi intensif, dan belum terdapat fitur tracking, sehingga pengguna

perlu copy-paste secara manual koordinat yang disajikan info windows ke aplikasi

Google Map.

Dari penjelasan di atas dapat diringkas ke dalam Tabel 2.1 Tinjauan

pustaka.

11

Tabel 2.1 Tinjauan pustaka

No.

Nama

Metodologi

Pembeda

Hasil

1.

Lestari

dan

Iskandar

(2013).

Menggunakan

bahasa

pemrograman

PHP dan

Google Maps

API.

Visualisasi marker

statis.

Input koordinat

manual.

Informasi spasial

realtime.

Perlu database.

Line of code

banyak.

Berbasis web.

Aplikasi SIG

berbasis web yang

memudahkan

wisatawan

menemukan lokasi

wisata, hotel dan

restaurant di

Kabupaten

Kebumen.

2.

Novita dan

Kharisma

(2015).

Menggunakan

Algoritma

semut, bahasa

pemrograman

PHP dan

Google Maps

API.

Visualisasi marker

statis.

Input koordinat

manual.

Informasi spasial

realtime.

Perlu database.

Line of code

banyak.

Berbasis web.

Terdapat unsur

kecerdasan buatan.

Aplikasi SIG

berbasis web yang

memudahkan

penyampaian

informasi lokasi

puskesmas di

Kabupaten Bantul.

3.

Nurfiatun

dan

Winantu

(2015).

Menggunakan

Algoritma

Generate and

Test dan

Haversine

Formula,

bahasa

pemrograman

PHP dan

Google Maps

API.

Visualisasi marker

statis.

Input koordinat

manual.

Informasi spasial

realtime.

Perlu database.

Line of code

banyak.

Berbasis web.

Terdapat unsur

kecerdasan buatan.

Aplikasi SIG

berbasis web yang

memudahkan

pengguna dalam

mencari dan menuju

ke lokasi hotel

terdekat di

Surakarta.

12

Tabel 2.2 Lanjutan

No.

Nama

Metodologi

Pembeda

Hasil

Rizki et al.

(2016)

Menggunakan

bahasa

pemrograman

Java, Eclipse

IDE, MapInfo

untuk

membuat peta,

dan GIS Cloud

untuk server

peta.

Visualisasi marker

statis.

Input koordinat

manual.

Informasi spasial

realtime.

Perlu database.

Line of code

banyak.

Berbasis android.

Terdapat fitur

tracking.

Aplikasi SIG

berbasis android

yang memudahkan

pengguna dalam

mencari dan menuju

ke lokasi kandang

peternakan di

Kabupaten Padang

Pariaman

Ekawati

dan

Suharjito

(2016)

Menggunakan

bahasa

pemrograman

PHP dan

Google Fusion

Tables untuk

visualisasi data

spasial.

Visualisasi poligon

dinamis.

Visualisasi chart

dinamis.

Input koordinat

manual.

Database-less.

Line of code sedikit.

Berbasis web.

Aplikasi SIG

berbasis web

sebagai tools yang

memudahkan

pengguna untuk

memvisualisasikan

data excel ke dalam

peta tematik untuk

analisis dan

membuat

keputusan.

Nugroho

(2018)

Menggunakan

bahasa

pemrograman

PHP, Java, dan

Javascript.

Google Fusion

Tables untuk

visualisasi data

spasial, Google

Spreadsheet,

dan Google

Apps Script.

Visualisasi marker

dinamis.

Visualisasi chart

dinamis.

Input koordinat

otomatis dengan

GPS atau Network

Provider.

Database-less.

Line of code sedikit.

Berbasis web dan

android.

Aplikasi SIG

berbasis web dan

android yang

memudahkan

pengguna

melaporkan

sekaligus memantau

keluhan mereka

terkait lalu lintas di

Yogyakarta.

13

BAB III

LANDASAN TEORI

3.1 Sistem Informasi Geografis (SIG)

Geographical Information System (GIS) atau yang dikenal dengan Sistem

Informasi Geografis (SIG) adalah produk teknologi alat bantu yang sangat

esensial di dalam proses-proses menyimpan, memanipulasi, menganalisis, dan

menampilkan kembali kondisi alam (termasuk jaringan utilitas yang terdapat di

atasnya) dengan bantuan atribut dan spasial (Rizki et al., 2016).

Gambar 3.1 Komponen kunci SIG (Suryani et al., 2011)

Gambar 3.1 menunjukkan bahwa komponen SIG terdiri dari sistem

komputer, data geospasial, dan pengguna SIG yang mengolah 2 macam data yaitu

data geospasial atau yang biasanya disebut data spasial dan data nonspasial

(atribut). Pada Gambar 3.1 data atribut tidak digambarkan karena memang dalam

SIG yang dipentingkan adalah tampilan data secara spasial, walaupun sebenarnya

pada SIG kadang-kadang juga melibatkan data atribut, baik secara langsung

maupun tidak langsung (Suryani et al., 2011).

14

3.2 Data dan Informasi Spasial

Basis data spasial sendiri merupakan kumpulan data-data yang memiliki

acuan posisi (georeference) yang tetap atau memiliki kecenderungan untuk

berubah, bergerak atau berkembang (Hamidi, 2011).

Undang‐Undang Republik Indonesia Nomor 4 Tahun 2011 tentang

Informasi Geospasial menerangkan dalam Bab 1 Pasal 1 bahwa.

1. Spasial adalah aspek keruangan suatu objek atau kejadian yang mencakup

lokasi, letak, dan posisinya.

2. Geospasial atau ruang kebumian adalah aspek keruangan yang menunjukkan

lokasi, letak, dan posisi suatu objek atau kejadian yang berada di bawah,

pada, atau di atas permukaan bumi yang dinyatakan dalam sistem koordinat

tertentu.

3. Data Geospasial yang selanjutnya disingkat DG adalah data tentang lokasi

geografis, dimensi atau ukuran, dan/atau karakteristik objek alam dan/atau

buatan manusia yang berada di bawah, pada, atau di atas permukaan bumi.

4. Informasi Geospasial yang selanjutnya disingkat IG adalah DG yang sudah

diolah sehingga dapat digunakan sebagai alat bantu dalam perumusan

kebijakan, pengambilan keputusan, dan/atau pelaksanaan kegiatan yang

berhubungan dengan ruang kebumian.

3.3 GPS

Global Positioning System (GPS) adalah suatu sistem radio navigasi

penentuan posisi menggunakan satelit. GPS dapat memberikan posisi suatu objek

di muka bumi dengan akurat dan cepat (koordinat tiga dimensi x, y, z) dan

memberikan informasi waktu serta kecepatan bergerak secara kontinyu di seluruh

dunia (Riyanto, 2010).

Pada awalnya, ada 24 satelit MEO (Medium Earth Orbit) yang digunakan

untuk membantu melacak posisi, dengan membagi wilayah bumi menjadi 3

bagian yang masing-masing diisi oleh 8 satelit. Dalam perkembangannya, bumi

dibagi menjadi 6 bagian dengan 4 satelit melayani per wilayah. Karena mengorbit

di MEO (ketinggian rata-rata dari permukaan bumi sekitar 20.200 km), maka

15

posisi orbit satelit kadang berubah (bandingkan dengan GEO stationer yang

berasda di 36.000 km) (Riyanto, 2010).

Gambar 3.2 Konstelasi satelit GPS (Riyanto, 2010)

Gambar 3.2 menunjukkan bentuk umum dari 24 satelit yang mengelilingi

bumi berdasarkan jalur orbitnya masing-masing. Satelit dilengkapi solar panel

untuk mengkonversi sinar matahari menjadi energi listrik untuk recovery

cadangan energi. Sedangkan antenna L-band dan S-band untuk transmisi sinyal.

Dengan adanya 24 satelit di angkasa, 4 sampai 10 satelit GPS setiap saat

akan selalu dapat diamati di seluruh permukaan bumi. Dari wilayah Indonesia,

umumnya 6 sampai 9 satelit GPS akan dapat ditangkap dengan sudut elevasi

diatas 10

o

. Setiap satelit GPS secara kontinyu memancarkan sinyal-sinyal

gelombang pada 2 frekuensi L-band (dinamakan L1 dan L2). Dengan mengamati

sinyal-sinyal dari satelit dalam jumlah dan waktu yang cukup, kemudian data

yang diterima tersebut dapat dihitung untuk mendapatkan informasi posisi,

kecepatan, dan waktu. Sistem yang serupa dengan GPS antara lain GLONASS

Rusia, Galileo Uni Eropa, IRNSS India (Riyanto, 2010).

GPS membutuhkan transmisi dari 3 satelit untuk mendapatkan informasi

dua dimensi (lintang dan bujur), dan 4 satelit untuk tiga dimensi (lintang, bujur

dan ketinggian). GPS terdiri dari 3 segmen yaitu, segmen angkasa,

kontrol/pengendali, dan pengguna. Segmen angkasa terdiri dari 24 satelit yang

beroperasi dalam 6 orbit pada ketinggian 20.200 km dan inklinasi 55 derajat

dengan periode 12 jam (satelit akan kembali ke titik yang sama dalam 12 jam)

(Satria dan Brahmana, 2005).

16

3.3.1 Segmen Sistem GPS

Gambar 3.3 Segmen sistem GPS (Riyanto, 2010)

Gambar 3.3 menunjukkan bahwa sistem GPS mempunyai 3 segmen

diantaranya Segmen Angkasa (space segment), Segment Kontrol (control

segment), Segmen Pengguna (user segment) dan anak panah tersebut

menunjukkan aliran data, ketiga segmen ini dijelaskan secara lengkap pada

paragraf berikut.

Segmen Angkasa (space segment) bertugas untuk menerima dan

menyimpan data yang ditransmisikan oleh stasiun-stasiun pengontrol, menyimpan

dan menjaga informasi waktu berketelitian tinggi (ditentukan dengan jam atomic

di satelit), dan memancarkan sinyal dan informasi secara kontinyu ke pesawat

penerima (receiver) dan pengguna. Segmen angkasa terdiri dari satelit-satelit

GPS. Sebagaimana telah dijelaskan sebelumnya, konstelasi GPS terdiri dari 24

satelit yang menempati 6 buah bidang orbit ditempati 4 buah satelit. Orbit satelit

berinklinasi 55

o

terhadap bidang katulistiwa bumi dan bergerak dengan periode 12

jam. Kedudukan masing-masing satelit dalam tiap orbitnya diatur sedemikian rupa

dengan jarak interval diantaranya tidak sama. Hal ini dimaksudkan untuk

meminimalisir pengaruh keadaan bila terdapat satelit yang tidak berfungsi

(Riyanto, 2010).

17

Segmen Kontrol (control segment) bertugas mengendalikan dan mengontrol

satelit dari bumi untuk mengecek “kesehatan” satelit, penentuan dan prediksi orbit

dari waktu, sinkronisasi waktu antar satelit, dan mengirim data ke satelit.

Gambar 3.4 Proses aliran data satelit dan sistem kontrol (Riyanto, 2010)

Gambar 3.4 menunjukkan bahwa segmen kontrol terdiri dari Ground

Control Station (GCS), Minitor Station (MS), dan Master Control Station (MCS).

MS bertugas mengamati secara kontinyu seluruh satelit GPS. Seluruh data yang

dikumpulkan oleh MS ini kemudian dikirimkan ke MCS untuk diproses guna

memperoleh parameter-parameter penting lainnya. Hasil dari perhitungan tersebut

dikirim ke GCS untuk selanjutnya dikirimkan ke satelit GPS (Riyanto, 2010).

Segmen Pengguna/Penerima (user segment) bertugas menerima data dari

satelit dan memprosesnya untuk menentukan posisi (posisi 3 dimensi, yaitu

koordinat di bumi plus ketinggian), arah, jarak dan waktu yang diperlukan oleh

pengguna (Militer dan Sipil). Ada dua macam tipe penerima, yaitu NAVIGASI

dan GEODETIC. Termasuk penerima tipe NAVIGASI antara lain Timble Ensign,

Trimble Pathfinder, Garmin, Sony. Sedangkan tipe GEODETIC antara lain

Topcon, Leica, Astech, Trimble seri 4000 (Riyanto, 2010).

18

3.3.2 Metode Triangulasi

Menurut Riyanto (2010) penerima GPS menerima informasi waku dan

posisi dari satelit dan menghitung lokasinya dengan sistem komputasi yang

melibatkan sedikit geometri dan rumus matematika. Sekarang, pertanyaan

utamanya adalah, bagaimana sebuah penerima GPS melakukannya?

Gambar 3.5 Triangulasi penghitungan jarak GPS (Riyanto, 2010)

Gambar 3.5 menunjukkan bahwa GPS dapat mengakses tiga satelit yang

saling berdekatan dan orbit dari ketiga satelit tersebut membentuk triangulasi

diatas permukaan bumi yang dapat dimanfaatkan GPS untuk melakukan

penghitungan yang menghasilkan parameter berupa waktu, jarak dan koordinat.

Dulu navigator digunakan untuk mengolah posisi suatu lokasi

menggunakan metode triangulasi. Ide dasar dari metode ini adalah bahwa jika

Anda mengetahui seberapa jauh Anda berasal dari tiga atau empat titik referensi,

Anda dapat menghitung lokasi Anda sekarang hanya dengan menggambar

beberapa kurva, dan daerah perpotongan triangulasi kurva ini akan memberitahu

Anda kira-kira di mana Anda berada. Semakin banyak titik referensi, semakin

kecil segitiga yang terbentuk dan semakin besar keakuratan yang didapat. GPS

menggunakan teknik yang sama dengan menggunakan satelit sebagai titik

referensi dan mengitung posisinya dengan informasi yang diberikan oleh satelit

itu sendiri.

19

Penerima GPS membaca dua jenis informasi dari sinyal yang dikirimkan

dari satelit GPS, yaitu data Almanac dan Ephemeris. Almanac menyediakan posisi

teoritis saelit bagi penerima GPS sehingga dapat menyimpan informasi dalam

memori. Data almanac selalu berubah seiring dengan pergerakan satelit pada

orbitnya dan penerima GPS mendapatkan perbaharuan data ketika dihidupkan.

Data ephemeris memberikan data posisi aktual yag mencakup beberapa

koreksi yang harus dibuat ketika orbit satelit GPS agak bervariasi setiap jam.

Baik data almanac dan ephemeris membantu unit GPS untuk mengetahui posisi

satelit.

Mengapa demikian? Karena tidak mungkin bagi penerima GPS untuk secara

langsung mengukur jarak dari satelit, penerima GPS melakukan hal yang sama

tentang cara menggunakan rumus sederhana yang melibatkan waktu dan

kecepatan. Jika waktu yang dibutuhkan oleh sinyal untuk mencapai penerima

diketahui, maka mengalikan nilai tersebut dengan kecepatan sinyal akan

menghasilkan nilai jarak. Untuk mengukur interval waktu, satelit GPS memiiki

jam atom internal yang memberikan waktu ketika ada sinyal. Penerima GPS,

memanfaatkan jam, menemukan waktu sinyal yang sampai padanya dan secara

sederhana menemukan perbedaan antara titik waktu ini. Ini juga mengoreksi

kesalahan waktu yang terjadi karena ionosfer dan sumber kesalahan lain seperti

kesalahan jam penerima GPS, sinyal multi-path, dan lain-lain.

3.3.3 Metode Penentuan Posisi GPS

Menurut Riyanto (2010) dalam pelaksanaan survey GPS, strategi

pengamatan akan sangat berperan dalam pencapaian kualitas yang baik dari posisi

titik-titik GPS. Strategi pengamatan ini akan terkait dengan metode pengamatan

yang harus optimal dipandang dari segi ketelitian, biaya, dan waktu, juga harus

mengandung suatu mekanisme kontrol kualitas.

Posisi yang diberikan GPS adalah 3 dimensi (x, y, z atau R, ȹ, λ) yang

dinyatakan dalam datum WGS’84. Secara garis besar penentuan posisi dengan

GPS ini dibagi menjadi dua metode, yaitu absolut dan relatif.

20

Metode Absolut

Gambar 3.6 Penentuan posisi metode absolut (Riyanto, 2010)

Gambar 3.6 menunjukkan receiver GPS tunggal mengakses empat satelit

yang saling berdekatan, skema ini dikenal dengan metode absolut, selain itu juga

dikenal sebagai point positioning, menentukan posisi hanya berdasarkan pada satu

pesawat penerima (receiver) saja. Ketelitian posisi dalam beberapa meter (tidak

berketelitian tinggi) dan umumnya hanya diperuntukkan bagi keperluan navigasi.

(Winardi, 2001). Karakteristik umum penentuan posisi dengan metode ini adalah

sebagai berikut.

1. Posisi ditentukan dalam sistem WGS 84 (terhadap pusat bumi).

2. Prinsip penentuan posisi adalah perpotongan ke belakang dengan jarak ke

beberapa satelit sekaligus.

3. Hanya memerlukan satu receiver GPS.

4. Titik yang ditentukan posisinya bisa diam (statik) atau bergerak (kinematik).

5. Ketelitian posisi berkisar antara 5 sampai 10 meter.

Aplikasi utama untuk keperluan navigasi, metode penentuan posisi ini

umumnya menggunakan data pseuorange dan metode ini tidak dimaksudkan

untuk aplikasi yang menuntut ketelitian posisi yang tinggi.

21

Metode Relatif

Gambar 3.7 Penentuan posisi metode relatif (Riyanto, 2010)

Gambar 3.7 menunjukkan dua receiver yaitu GPS dan BTS mengakses

empat satelit yang saling berdekatan, skema ini dikenal dengan metode relatif,

selain itu juga dikenal sebagai differential positioning, menentukan posisi suatu

titik relatif terhadap titik lain yang telah diketahui koordinatnya, pengukuran

dilakukan secara bersamaan pada dua titik dalam selang waktu tertentu.

Selanjutnya, dari data hasil pengamatan diproses/dihitung akan didapatkan

perbedaan koordinat kartesian 3 dimensi (dx, dy, dz) atau disebut juga dengan

baseline antar titik yang diukur. Metode ini menghasilkan posisi berketelitian

tinggi (umumnya kurang dari 1 meter) dan diaplikasikan untuk keperluan survey

geodesi ataupun pemetaan yang memerlukan ketelitian tinggi. Karakteristik umum

penentuan posisi dengan metode ini adalah sebagai berikut.

1. Memerlukan minimal 2 receiver, satu ditempatkan pada titik yang telah

diketahui koordinatnya.

2. Posisi titik ditentukan relatif terhadap titik yang diketahui.

3. Konsep dasar adalah differencing process dapat mengeliminir atau

mereduksi pengaruh dari beberapa kesalahan dai bias.

4. Bisa menggunakan data pseudorange atau fase.

5. Ketelitian posisi yang diperoleh bervariasi dari tingkat mm (milimeter)

sampai dengan dm (desimeter).

6. Aplikasi utama diantaranya survey pemetaan, survey penegasan batas,

survey geodesi dan navigasi dengan ketelitian tinggi.

22

3.3.4 Sumber Kesalahan Sinyal GPS

Menurut Riyanto (2010) faktor yang dapat menurunkan kualitas sinyal GPS

hingga mempengaruhi ketelitian pengukuran, meliputi.

Kesalahan orbital

Kesalahan ini dikenal juga sebagai kesalahan efemeris, yaitu ketidak-

akurasian lokasi yang dilaporkan oleh satelit penerima GPS.

Delay ionosfer dan troposfer

Gambar 3.8 Gangguan delay karena ionosfer dan troposfer (Riyanto, 2010)

Gambar 3.8 menunjukkan bahwa lapisan troposphere berada di sekitar

ketinggian 20km dari permukaan bumi, disusul lapisan stratosphere antara 20km-

50km, dan lapisan paling atas adalah ionosphere yang berada di ketinggian diatas

50km dari permukaan bumi. Sinyal satelit GPS yang terlambat sampai ke

atmosfer, dikarenakan dalam perjalanannya mengalami perubahan temperatur,

tekanan, kelembapan, dan perubahan cuaca dari masing-masing lapisan yang

tunjukkan Gambar 3.8. Sistem GPS menggunakan suatu model yang dapat

mengkalkulasi rata-rata jumlah delay.

23

Sinyal multipath

Hal ini terjadi ketika sinyal GPS direfleksikan ke sutu objek seperti

bangunan tinggi sebelum sinyal tersebut dapat ditangkap oleh penerima GPS.

Bertambahnya waktu perjalanan sinyal untuk sampai ke penerima GPS tersebut

dapat mempengaruhi ketelitian pengukuran.

Gambar 3.9 Beberapa jenis gangguan sinyal (Riyanto, 2010)

Gambar 3.9 menunjukkan jenis-jenis gangguan sinyal yang diakibatkan oleh

benda-benda disekitar, jenis gangguan tersebut meliputi.

a. Reflection, yaitu pantulan terjadi bila gelombang radio tersimpul pada

bidang permukaan datar. Aturan terjadinya pantulan cukup sederhana, sudut

masuknya gelombang ke permukaan akan sama dengan sudut sinyal di

pantulkan. Gambar (a) menunjukkan pantulan gelombang yang diakibatkan

oleh dua gedung sejajar, rapat, dan dengan permukaan gedung yang padat,

gedung dengan arsiran menunjukkan permukaan terbuat dari beton,

sedangkan gedung tanpa arsiran menunjukkan permukaan terbuat dari kaca.

Dua anak panah menunjukkan kerapatan sinyal dan arah pantulannya,

sehingga sampai ke perangkat ponsel sebagai receiver.

b. Shadowing, yaitu sinyal yang diterima berbayang, pada dasarnya adalah

daerah kosong dari sisi berlawanan datangnya gelombang dalam arah

24

segaris pandang dari pemancar terhadap penerima. Pada gambar ini

dicontohkan dengan perangkat ponsel (receiver) berada di balik gedung

tanpa arsiran, yaitu sisi berlawanan datangnya sinyal.

c. Diffraction, yaitu kemampuan gelombang radio untuk berputar pada sudut

yang tajam dan membelok disekitar penghalangnya. Pada gambar ini

dicontohkan dengan BTS yang memancarkan sinyal melewati perbukitan

tajam dengan anak panah yang menunjukkan arah belokan sinyal.

d. Scattering, yaitu pantulan yang terjadi akibat menumbuk permukaan yang

tidak rata. Contohnya terjadi pada kaca bergelombang, daun di pohon dan

perbukitan.

Geometri satelit

Gambar 3.10 Geometri satelit (Riyanto, 2010)

Gambar 3.10 menunjukkan perbandingan kualitas sudut yang diterima oleh

GPS, dikenal dengan Dilution of Precision (DoP), Good Dop menunjukkan

kualitas sudut bagus, Poor DoP menunjukkan kualitas sudut buruk. Ini mengacu

pada posisi relatif suatu satelit pada satu waktu. Geometri satelit yang ideal yaitu

ketika satelit ditempatkan pada sudut yang relatif lebar. Pengukuran yang lemah

dihasilkan ketika satelit ditempatkan pada satu garis atau dalam suatu kelompok

yang padat.

Jumlah satelit yang tampak

Semakin satelit GPS itu jelas terlihat, maka semakin baik ketelitian itu.

Bangunan, tanah lapang, interferensi elektronik dapat menghalangi penerimaan

sinyal, sehingga dapat menyebabkan kesalahan posisi atau bahkan mungkin tidak

25

dapat mendeteksi posisi sama sekali. Oleh karena itu, GPS tidak dapat digunakan

di dalam bangunan.

Kesalahan jam penerima

Jam penerima yang tidak akurat seperti jam atomic satelit GPS, dapat

mengaibatkan kesalahan waktu.

Penurunan kualitas sinyal satelit

Selective Availability (SA) merupakan suatu penurunan kualitas sinyal yang

dikenakan oleh pejabat Amerika Serikat. SA dimaksudkan untuk mencegah

musuh militer dari penggunan sinyal GPS yang akurat.

3.3.5 Ketelitian Penentuan Posisi dengan GPS

Menurut Riyanto (2010) penentuan posisi dengan GPS dipengaruhi oleh

faktor-faktor seperti berikut.

1. Ketelitian data terkait dengan tipe data yang digunakan, kualitas penerima

GPS, level dari kesalahan, dan bias.

2. Geometri satelit, terkait dengan jumlah satelit yang diamati, lokasi dan

distribusi satelit dan lama pengamatan.

3. Metode penentuan posisi, terkait dengan metode penentuan posisi GPS yang

digunakan, apakah absolut, relatif, DGPS, RTK, dan lain lain.

4. Strategi pemrosesan data, terkait dengan real-time atau post-processing,

strategi eliminasi dan pengoreksian kesalahan dan bias, pemrosesan baseline

dan perataan jaringan serta kontrol kualitas.

3.3.6 Cara Kerja GPS

Secara teoritis, GPS bekerja dengan cara mengumpulkan data dari satelit,

masing-masing satelit akan memberikan informasi jarak antara lokasi satelit

tersebut dengan sebuah titik di bumi (GPS receiver). Dari proses pengambilan

lokasi-lokasi tersebut akan diperoleh koordinat-koordinat yang disebut waypoint.

26

Untuk menginformasikan posisi user, 24 satelit GPS yang ada di orbit

sekitar 12,000 mil di atas kita, bergerak konstan mengelilingi bumi 12 jam dengan

kecepatan 7,000 mil per jam. Satelit GPS berkekuatan energi sinar matahari,

mempunyai baterai cadangan untuk menjaga agar tetap berjalan pada saat gerhana

matahari atau pada saat tidak ada energi matahari (Satria dan Brahmana, 2005).

3.3.7 Signal Satelit GPS

Menurut Satria dan Brahmana (2005) satelite GPS mengirim sinyal dalam

dua frekuensi. L1 dengan 1575.42 Mhz dengan membawa dua status pesan dan

pseudo-random code untuk keperluan perhitungan waktu. L2 membawa 1227.60

MHz dengan menggunakaan presesi yang lebih akurat karena untuk keperluan

militer. Daya sinyal radio yang dipancarkan hanya berkisar antara 20-50 Watts.

Ini tergolong sangat rendah mengingat jarak antara GPS dan satelit sampai 12.000

mil. Sinyal dipancarkan secara line of sight (LOS).

GPS yang digunakan untuk publik akan memantau frekuensi L1 pada UHF

(Ultra High Frequency) 1575,42 MHz. Sinyal L1 yang dikirimkan akan memiliki

pola-pola kode digital tertentu yang disebut sebagai pseudorandom. Sinyal yang

dikirimkan terdiri dari dua bagian yaitu kode Protected (P) dan

Coarse/Acquisition (C/A).

3.4 Teknologi LBS (Location Based Service)

Menurut Riyanto (2010) LBS (Location Based Service) sebenarnya adalah

salah satu nilai tambah dari layanan selular GSM. LBS bukanlah sistem, tapi

merupakan layanan tambahan yang menggunakan sistem penunjang GSM. Bisa

jadi ada beberapa sistem yang dapat mengirim layanan LBS ini dengan teknologi

yang bervariasi. Tapi pada dasarnya, sistem-sistem tersebut menggunakan prinsip

dasar yang sama, yaitu Triangulasi.

27

Gambar 3.11 Konsep triangulasi pada LBS (Riyanto, 2010)

Gambar 3.11 menunjukkan bahwa prinsip triangulasi yang diterapkan pada

sistem komunikasi smartphone seperti yang dilakukan sistem GPS, hanya saja

fungsi satelit digantikan oleh BTS. Lingkaran menunjukan jangkauan sinyal yang

dipancarkan dalam radius tertentu dan masing-masing sinyal yang dapat ditangkap

oleh perangkat smartphone menunjukan bahwa ketiga sinyal tersebut saling

berperpotongan di titik yang sama yaitu di smartphone. Untuk dapat menjangkau

wilayah yang luas dan memberikan posisi yang akurat, otomatis operator GSM

harus menyebar BTS yang cukup, baik jangkauan maupun densitasnya. Perbedaan

antara LBS dengan GPS adalah pemroses posisi.

Pada peralatan GPS, penggunalah yang mengukur dan mengolah suatu

posisi. Sistem back-end satelit hanya memberikan info posisi satelit, kecepatan

dan waktu. Sedangkan pada sistem LBS, yang melakukan kalkulasi posisi adalah

back-end sistem GSM, bukan handset pengguna. Informasi posisi akan dicatat

oleh BTS yang terdekat kemudian data dikirim ke sistem LBS untuk dikalkulasi

dan dikirimkan ke channel yang dituju (SMS, MMS, e-mail, atau lainnya).

Perbedaan ini dimungkinkan karena pengguna GSM tercatat sebagai pelanggan

yang seluruh aktivitasnya terekam oleh sistem back-end. Metode ini memberikan

fleksibilitas bagi operator GSM atas layanan LBS apa yang ingin diluncurkan,

tanpa perlu takut handset tidak dapat mengakomodasinya. Pada perangkat GPS,

hal ini tidak dimungkinkan.

28

3.5 Internet

Menurut Ahmadi dan Hermawan (2013) internet adalah komunikasi

jaringan global yang menghubungkan seluruh komputer di dunia meskipun

berbeda sistem operasi dan mesin.

Internet merupakan jaringan komputer yang dibentuk oleh Departemen

Pertahanan Amerika Serikat pada tahun 1969, melalui proyek ARPA yang disebut

ARPANET (Advanced Research Project Agency Network), dimana mereka

mendemonstrasikan bagaimana penggunaan hardware dan software komputer

yang berbasis UNIX, dengan menggunakan proyek tersebut kita bisa melakukan

komunikasi dalam jarak yang tidak terhingga melalui saluran telepon.

Proyek ARPANET merancang bentuk jaringan, kehandalan, seberapa besar

informasi dapat dipindahkan, dan akhirnya semua standar yang mereka tentukan

menjadi cikal bakal pembangunan protokol baru yang sekarang dikenal sebagai

Transmission Control Protocol/Internet Protocol (TCP/IP).

Tujuan awal dibangunnya proyek itu adalah untuk keperluan militer. Pada

saat itu Departemen Pertahanan Amerika Serikat (US Departement of Defense)

membuat sistem jaringan komputer yang tersebar dengan menghubungkan

komputer di daerah-daerah vital untuk mengatasi masalah bila terjadi serangan

nuklir dan untuk menghindari terjadinya informasi terpusat yang apabila terjadi

perang, maka dapat dengan mudah dihancurkan.

Pada mulanya ARPANET hanya menghubungkan 4 situs saja yaitu Stanford

Research Institute, University of California, Santa Barbara, University of Utah, di

mana mereka membentuk satu jaringan terpadu pada tahun 1969, dan secara

umum ARPANET diperkenalkan pada bulan Oktober 1972. Tidak lama kemudian

proyek ini berkembang pesat di seluruh daerah, dan semua universitas di negara

tersebut ingin bergabung, sehingga ARPANET kesulitan untuk mengaturnya, oleh

sebab itu ARPANET dipecah menjadi dua, yaitu “MILNET” untuk keperluan

militer dan “ARPANET” baru yang lebih kecil untuk keperluan non-militer

seperti, universitas-universitas. Gabungan kedua jaringan akhirnya dikenal dengan

nama DARPA Internet yang kemudian disederhanakan menjadi Internet.

29

3.6 Website

Website atau disingkat web, dapat diartikan sekumpulan halaman yang

terdiri dari beberapa laman yang berisi informasi dalam bentuk data digital baik

berupa text, gambar, video, audio, dan animasi lainnya yang disediakan melalui

jalur koneksi internet. Lebih jelasnya, website merupakan halaman-halaman yang

berisi informasi yang ditampilkan oleh browser seperti Mozilla Firefox, Google

Chrome atau yang lainnya (Abdullah, 2015).

3.7 Web Browser

Web browser digunakan untuk menampilkan hasil website yang telah

dibuat. Web browser yang paling sering digunakan diantaranya Mozilla Firefox,

Google Chrome, dan Safari. Disarankan untuk menggunakan lebih dari satu web

browser untuk memastikan desain website dapat tampil sempurna di berbagai web

browser (Abdullah, 2015).

3.8 API

Appication Programming Interface (API) adalah sekumpulan fungsi,

perintah dan protokol yang dapat digunakan untuk menghubungkan satu aplikasi

dengan aplikasi yang lain agar dapat berinteraksi. Seiring dengan perkembangan

internet, API dapat diimplementasikan pada sisi server dan dapat digunakan oleh

beberapa aplikasi yang dapat terhubung ke server dengan menggunakan protokol

tertentu. Pada protokol HTTP, Appication Programming Interface umumnya

disebut sebagai Web Appication Programming Interface Server atau Web Service

(Sena et al., 2013).

3.9 REST

Representational State Transfer yang disingkat REST merupakan salah satu

jenis arsitektur untuk penerapan web service yang menerapkan konsep

perpindahan antar state. State disini dapat digambarkan seperti peramban meminta

suatu halaman situs, di sisi server akan mengirimkan state halaman situs yang

sekarang ke peramban. Navigasi melalui URL yang disediakan sama halnya

30

dengan mengganti state dari halaman situs. Sama seperti REST bekerja, dengan

bernavigasi melalui link HTTP untuk melakukan aktivitas tertentu. Seakan-akan

terjadi perpindahan state antara satu dengan yang lain. Perintah HTTP yang bisa

digunakan dalam REST adalah fungsi GET, POST, PUT atau DELETE. Dalam

pengaplikasiannya, REST lebih banyak digunakan pada web service yang

berorientasi data sumber daya. Sebutan untuk web service yang menerapkan

arsitektur REST adalah RESTful web service (Rahman et al., 2013).

3.10 Web Service

Web Service adalah suatu sistem perangkat lunak yang dirancang untuk

mendukung interaction and interoperability antar sistem pada suatu jaringan.

Web service digunakan sebagai suatu fasilitas yang menyediakan layanan (dalam

bentuk informasi atau data) kepada sistem lain, sehingga dapat berinteraksi

dengan sistem tersebut melalui layanan-layanan yang disediakan. Web service

menyimpan data informasi dalam format JSON atau XML, sehingga data ini dapat

diakses oleh sistem lain walaupun berbeda platform, sistem operasi, dan bahasa

pemrograman (Rahman et al., 2013).

3.11 JSON

JSON (JavaScript Object Notation) adalah format pertukaran data yang

ringan, mudah dibaca, dan ditulis oleh manusia, serta mudah diterjemahkan dan

dibuat oleh komputer. Format ini dibuat berdasarkan bagian dari bahasa

pemrograman JavaScript. JSON merupakan format teks yang tidak bergantung

pada bahasa pemrograman apapun karena menggunakan gaya bahasa yang umum

seperti C, C++, C#, Java, JavaScript, Perl, dan Python. Oleh karena sifat-sifat

tersebut, menjadikan JSON ideal sebagai bahasa pertukaran data. JSON terbuat

dari dua struktur yaitu kumpulan pasangan nama atau nilai dan daftar nilai

terurutkan (an ordered list of values). Pada kebanyakan bahasa, hal ini dinyatakan

sebagai larik (array), vektor (vector), daftar (list), atau urutan (sequence)

(Rahman et al., 2013).

31

3.12 HTML

Menurut Abdullah (2015) HTML singkatan dari Hyper Text Markup

Language, yaitu skrip yang berupa tag-tag untuk membuat dan mengatur struktur

website. Beberapa tugas utama HTML dalam membangun website diantaranya

seperti menentukan layout website, memformat text dasar seperti pengaturan

paragraf, dan format font, menyisipkan gambar, video, dan audio, membuat list,

tabel, link, dan formulir.

3.13 CSS

CSS singkatan dari Cascading Style Sheets, yaitu skrip yang digunakan

untuk mengatur desain website. Walaupun HTML mempunyai kemampuan untuk

mengatur tampilan website, namun kemampuannya sangat terbatas. Fungsi CSS

adalah memberikan pengaturan yang lebih lengkap agar struktur website yang

digunakan dengan HTML terlihat lebih rapi dan indah (Abdullah, 2015).

3.14 Javascript

Berbeda dengan php yang diproses di sisi server, javascript diproses pada

komputer client. Pemrosesannya yang dilakukan di komputer client, membuat

javascript lebih interaktif dibanding php. Peran javascript dalam membuat website

adalah memberikan efek animasi yang menarik dan interaktifitas dalam

penanganan event yang dilakukan oleh pengguna website (Abdullah, 2015).

3.15 Wampserver

Mengapa Wampserver? Karena software simulasi server local ini bersifat

freesource dan sangat lengkap fiturnya. Aplikasi ini dapat didownload di

http://www.wampserver.com/en/ (Wiswakarma, 2010).

3.16 CodeIgniter

CodeIgniter adalah sebuah framework untuk web yang dibuat dalam format

PHP, yang bersifat open source digunakan untuk membangun aplikasi PHP

dinamis. Tujuan utama pengembangan CodeIgniter adalah untuk membantu

32

developer dalam membuat dan mengembangkan aplikasi berbasis web dengan

lebih cepat, karena tidak perlu memulainya dari nol dalam menulis program

(Wiswakarma, 2010).

CodeIgniter menyediakan berbagai macam fitur yang handal dalam

membuat aplikasi web kompleks, dalam pengembangan, CodeIgniter sendiri

dibangun dengan konsep MVC (Model, View, Controller) struktur kode yang

dihasilkan menjadi lebih terstruktur dan memiliki standar yang jelas, adapun

komponen-komponen MVC diantaranya (Wiswakarma, 2010).

Gambar 3.12 Skenario konsep MVC (rifanmfauzi.com, 2013)

Gambar 3.12 menunjukkan skenario dari konsep MVC disertai dengan dua

anak panah saling berlawanan menunjukkan jenis komunikasi dua arah. Model

merupakan struktur data, secara spesifikasi class model mengandung fungsi kode

yang akan membantu dalam segala proses yang berhubungan dengan database

seperti memasukkan, mengedit, mendapatkan dan menghapus data dalam

database. View merupakan informasi yang disampaikan ke pengguna, sebuah

View biasanya berupa halaman web, tetapi dalam CodeIgniter bisa berupa sebuah

fragment halaman seperti header dan footer, view bisa juga berupa RSS atau

sejenis halaman web lainnya. Controller bertindak sebagai perantara antara model

dan view dan semua sumber yang dibutuhkan, di dalam controller ini terdapat

class-class dan fungsi-fungsi yang memproses permintaan dari View ke dalam

struktur data di dalam Model. Controller juga tidak boleh berisi kode untuk

33

mengakses basis data, karena tugas mengakses basis data sudah menjadi tanggung

jawab Model, tugas Controller adalah menyediakan berbagai variabel yang akan

ditampilkan di View, memanggil model untuk melakukan akses ke basis data,

menyediakan penanganan kesalahan (error handling), mengerjakan proses logika

dari aplikasi serta melakukan validasi atau cek terhadap input (Wiswakarma,

2010).

3.17 Bootstrap

Bootstrap merupakan salah satu framework CSS yang sangat popular di

kalangan pecinta pemrograman website. Dengan bootstrap, proses desain website

tidak dibuat dari nol, sehingga proses desain website lebih cepat dan mudah.

Sejak bootstrap dilengkapi dengan fitur responsive pada tahun 2012,

bootstrap semakin banyak digemari dan semakin banyak ditemui website di

internet yang menggunakan bootstrap dalam desainnya. Dengan fitur responsive

yang disediakan bootstrap, maka website dapat dilihat dala berbagai ukuran layar

seperti smartphone atau tablet dengan desain tetap teratur dan mengikuti ukuran

layar (Abdullah, 2015).

3.18 Notepad++

Notepad++ adalah salau satu code editor gratis yang dapat didownload di

http://sourceforge.net/projects/notepad-plus/files/. Alasan menggunakan

Notepad++, karena interfacenya sangat sederhana dan ukuran dari softwarenya

juga kecil, sehingga ringan berjalan di sistem operasi Windows, selain itu juga

nyaman digunakan (Abdullah, 2015).

3.19 Google Service

Ekawati dan Suharjito (2016) menyatakan bahwa Google provides the

flexibility of API utilization that can be used from other software by using key

facilitated by API Google Developer Console.

Berdasarkan pernyataan tersebut diperoleh kesimpulan bahwa Google

menyediakan layanan yang dapat dimanfaatkan oleh perangkat lunak lainnya

34

dengan syarat menggunakan sebuah kunci yang telah difasiliasi oleh API Google

Developer Console.

3.19.1 Google Fusion Tables

Mogot dan Papilaya (2013) menyatakan bahwa Google Fusion Tables

adalah cloud based service system yang memberikan kemudahan dalam integrasi

dan pengaturan data. Proyek ini merupakan produk dari Google Inc yang

diluncurkan pada Juni 2009. Suatu data dalam organisasi tertentu akan mudah

untuk diolah dan diintegrasikan dengan service maupun fitur berbasis internet

lainnya. Google Fushion Tables memungkinkan user untuk mengunggah tabular

data files (Spreadsheets, CSV, KML) sampai 100MB. Sistemnya juga

menyediakan beberapa cara penyajian data, sebagai contoh charts, map, timelines

dan memiliki kemampuan untuk menyaring data serta melakukan fungsi agregat

data. Google Fusion Tables mampu melakukan integrasi data dari multiple

sources dengan melakukan join antar tabel. User dapat menjaga tingkat privasi

data dengan pilihan hak akses yang sudah disediakan.

Gambar 3.13 Arsitektur google fusion tables (Mogot dan Papilaya, 2013)

Gambar 3.13 merupakan desain arsitektur google fusion tables yang

menunjukkan bahwa request pertama kali dapat dikirimkan oleh berbagai sumber.

35

Sebagai contoh sistem web yang memanfaatkan Google Fusion Tables, stand

alone applications yang memanfaatkan API atau sistem yang melakukan

embedded visualisasi Google Fusion Tables. Kemudian sistem akan melakukan

generate peta digital sesuai dengan spatial queries yang dikirimkn oleh sistem.

Front end dispatcher mengubah request menjadi perintah untuk presentasi dan

menjadi query. Query inilah yang nantinya dijalankan untuk menampilkan data

sesuai request.

3.19.2 Google Apps Script

Google Apps Script is a coding and application development platform built

into Google Apps, enabling you to add functionality to spreadsheets, Gmail, Sites,

and other services from Google. For example, if your spreadsheet needs a menu

item in the toolbar for creating a pivot table, you can write a Google Apps Script

that adds it to the menu and performs the task. Google Apps Scripts can be

created as standalone files in Drive, inside a document or spreadsheet (these are

known as container-bound), or in a Google Site (Ferreira, 2014).

Berdasarkan pernyataan Ferreira (2014), maka dapat disimpulkan bahwa

Google Apps Script adalah sebuah platform untuk penulisan kode dan/atau

pengembangan aplikasi yang sudah menjadi bagian dari Google Apps,

memungkinkan programmer atau developer menambahkan fungsi ke spreadsheet,

Gmail, Sites, dan layanan Google lainnya. Misalnya jika spreadsheet Anda

memerlukan item khusus di menu toolbar, maka Anda dapat melakukannya

dengan menuliskan program yang disesuaikan atas class dan/atau fungsi yang

tersedia dalam dokumentasi Google Apps Script.

3.19.3 Google Spreadsheets

Google spreadsheet atau Rinfo Spreadsheet merupakan salah satu tools

yang sudah disediakan oleh Google secara gratis, dapat diakses dimana saja dan

kapan saja, melalui handphone, tablet atau komputer bahkan ketika tidak ada

koneksi internet sekalipun (Handayani et al., 2017).

36

3.20 Android

Menurut John (2017) Android adalah sistem operasi seluler berbasis linux

versi tertentu yang sudah dimodifikasi. Awalnya dikembangkan oleh startup

dengan nama yang sama yaitu Android, Inc. Pada tahun 2005, sebagai bagian dari

strategi untuk memasuki ruang mobile, Google membeli Android, Inc. dan

mengambil alih pekerjaan pengembangannya (serta merekrut tim pengembang

aslinya).

Google ingin OS Android dibuka dan gratis, sehingga sebagian besar kode

Android dirilis di bawah lisensi Apache open source. Itu berarti siapa pun yang

ingin menggunakan Android dapat melakukannya dengan mengunduh kode

sumber lengkap Android. Selain itu, vendor (biasanya produsen perangkat keras)

dapat menambahkan ekstensi kepemilikan mereka sendiri ke Android dan

menyesuaikan Android untuk membedakan produk mereka dari yang lain. Model

pengembangan ini menjadikan Android sangat menarik bagi vendor, terutama

perusahaan yang terpengaruh oleh fenomena iPhone Apple, yang merupakan

produk yang sangat sukses yang merevolusi industri ponsel cerdas. Ketika iPhone

diluncurkan, banyak produsen telepon pintar harus berebut mencari cara baru

untuk merevitalisasi produk mereka. Para pabrikan ini melihat Android sebagai

solusi, yang berarti mereka akan terus merancang perangkat keras mereka sendiri

dan menggunakan Android sebagai sistem operasi yang menguasainya. Beberapa

perusahaan yang telah memanfaatkan kebijakan open source Android diantaranya

Motorola dan Sony Ericsson, yang telah mengembangkan sistem operasi seluler

mereka sendiri selama bertahun-tahun.

Keuntungan utama mengadopsi Android adalah karena ia menawarkan

pendekatan terpadu untuk pengembang aplikasi. Pengembang hanya perlu

mengembangkan aplikasi untuk Android secara umum, aplikasi mereka harus

dapat berjalan di banyak perangkat mobile berbeda yang bersistem operasi

Android. Di dunia smartphone, aplikasi adalah bagian terpenting dari rantai

kesuksesan.

Menurut Meier (2010) Android code is written with Java syntax, and the

core Android libraries include most of the features from the core Java APIs.

37

Before they can be run, though, your projects must first be translated into Dalvik

byte code. As a result, you get the benefits of using Java while your applications

have the advantage of running on a virtual machine optimized for mobile devices.

Berdasarkan pernyataan Meier (2010), maka dapat disimpulkan bahwa kode

Android ditulis dengan sintaks Java, dan core Android libraries sudah mencakup

sebagian besar fitur dari core Java API'S. Namun, sebelum semua itu dapat

dijalankan, proyek terlebih dahulu diterjemahkan ke dalam Dalvik byte code.

Hasilnya berupa manfaat penggunaan Java, yaitu aplikasi dapat dijalankan pada

mesin virtual yang dioptimalkan untuk perangkat seluler.

3.20.1 Arsitektur Android

Menurut John (2017) memahami cara kerja Android perlu mengenal

berbagai lapisan yang membentuk sistem operasi Android (OS).

Gambar 3.14 Lapisan arsitektur android (John, 2017)

Gambar 3.14 menunjukkan bahwa OS Android secara kasar dibagi menjadi

lima bagian dalam empat lapisan utama, yaitu.

1. Linux kernel (kernel linux), lapisan ini berisi driver-driver komponen

perangkat keras Android.

2. Libraries (pustaka), lapisan ini berisi kode yang menyediakan fitur utama

dari OS Android. Sebagai contoh, pustaka SQLite menyediakan dukungan

38

basis data sehingga aplikasi dapat menggunakannya untuk penyimpanan

data. Pustaka WebKit menyediakan fungsionalitas untuk penjelajahan web.

3. Android runtime, satu lapisan dengan pustaka, hanya saja bagian ini

menyediakan sekumpulan pustaka inti yang memungkinkan pengembang

menulis kode aplikasi menggunakan bahasa pemrograman Java. Runtime

Android juga mencakup mesin virtual Dalvik, yang memungkinkan setiap

aplikasi Android berjalan dalam prosesnya sendiri (Aplikasi Android

dikompilasi menjadi executable Dalvik). Dalvik adalah mesin virtual yang

dirancang khusus untuk Android dan dioptimalkan untuk perangkat seluler

bertenaga baterai dengan memori dan daya CPU terbatas.

4. Application framework (kerangka kerja aplikasi), memperkenalkan kepada

pengembang aplikasi tentang kemampuan OS Android, sehingga mereka

tahu, kemampuan apa saja yang dapat diterapkan pada aplikasi yang sedang

mereka kembangkan.

5. Applications (aplikasi), lapisan ini tempat dimana produk aplikasi dipasang

seperti Telepon, Kontak, Browser, dan sebagainya.

3.20.2 Fitur Android

Menurut John (2017) Android bersifat open source dan tersedia secara

gratis baik untuk keperluan profit, non-profit, produsen untuk kustomisasi,

maupun hobi. Tidak ada ketetapan konfigurasi untuk perangkat keras ataupun

perangkat lunaknya. Namun, basis OS Android mendukung banyak fitur seperti.

1. Storage. SQLite, a lightweight relational database.

2. Connectivity. GSM/EDGE, IDEN, CDMA, EV-DO, UMTS, Bluetooth

(includes A2DP and AVRCP), Wi-Fi, LTE, and WiMAX.

3. Messaging. Both SMS and MMS.

4. Media support H.263, H.264 (in 3GP or MP4 container), MPEG-4 SP,

AMR, AMR-WB (in 3GP container), AAC, HE-AAC (in MP4 or 3GP

container), MP3, MIDI, Ogg Vorbis, WAV, JPEG, PNG, GIF, and BMP.

5. Hardware support. Accelerometer sensor, camera, digital compass,

proximity sensor, and GPS.

39

6. Multi-touch. Multi-touch screens.

7. Multi-tasking. Multi-tasking applications.

8. Tethering. Sharing of Internet connections as a wired/wireless hotspot.

3.20.3 Android Studio

Menurut John (2017) Android Studio contains myriad features to help

everyone from the greenest novices to the most senior superstar developers. By

the time you finish this chapter, you will be able to navi- gate through the features

of Android Studio with confidence, produce code that is easy to read and easy to

reuse with the help of refactoring, save and share your code to GitHub, and use

breakpoints to quickly find problems in your applications.

Android Studio is a powerful IDE that contains many tools. In this chapter

you learned how to navi- gate the different areas of the Android Studio IDE, such

as the Project window and the Editor tabs. You also learned how to set

breakpoints and navigate through paused code.

Berdasarkan pernyataan John (2017), maka dapat disimpulkan bahwa

Android Studio berisi berbagai fitur untuk membantu developer mulai dari kelas

pemula hingga senior. Memahami fitur-fitur yang disediakan Android Studio

dapat memudahkan developer menghasilkan baris kode yang mudah dibaca,

dipahami, dan digunakan kembali dengan bantuan refactoring. Selain itu membuat

percaya diri jika ingin mempublikasikan kodenya ke GitHub.

Android Studio adalah integrated development environment (IDE) yang

berisi berbagai tools seperti Navigasi untuk menuju ke bidang lain, Project

window dan Edior tabs.

3.21 Kamus Data

Kamus Data atau Data Dictionary atau Systems Data Dictionary adalah

katalog fakta tentang data dan kebutuhan-kebutuhan informasi dari suatu sistem

informasi. Dengan menggunakan kamus data, analis sistem dapat mendefinisikan

data yang mengalir di sistem dengan lengkap. Kamus data dibuat pada tahap

analisis sistem dan digunakan baik pada tahap analisis maupun pada tahap

40

perancangan sistem. Pada tahap analisis, kamus data dapat digunakan sebagai alat

komunikasi antara analis sistem dengan pemakai sistem tentang data yang

mengalir di sistem, yaitu tentang data yang masuk ke sistem dan tentang informasi

yang dibutuhkan oleh pemakai sistem. Pada tahap perancangan sistem, kamus

data digunakan untuk merancang input, merancang laporan-laporan dan database

(Nugroho et al., 2014).

3.22 UML

UML (Unified Modeling Language) adalah ‘bahasa’ pemodelan untuk

sistem atau perangkat lunak yang berparadigma ‘berorientasi objek’. Pemodelan

sesungguhnya digunakan untuk penyederhanaan permasalahan-permasalahan

kompleks yang sedemikian rupa sehingga menjadi lebih mudah dipelajari dan

dipahami (Nugroho A., 2010).

Menurut Sholiq (2006) UML menyediakan notasi yang cukup tangguh, untuk

membangun sistem dari tahap analisa sampai ke tahap perancangan. UML juga

sebagai notasi pemodelan standar industri untuk sistem berorientasi obyek, dan juga

sebagai platform untuk mempercepat proses pengembangan aplikasi. Selain itu, UML

juga menyediakan beberapa diagram visual yang menunjukan berbagai aspek dalam

sistem diantaranya.

1. Diagram use case (use case diagram).

2. Diagram aktivitas (activity diagram).

3. Diagram skuensial (squence diagram).

4. Diagram kolaborasi (collaboration diagram).

5. Diagram kelas (class diagram).

6. Diagram statechart (statechart diagram).

7. Diagram komponen (component diagram).

8. Diagram deployment (deployment diagram).

3.22.1 Notasi UML

Menurut Sholiq (2006) notasi UML dibuat sebagi kolaborasi dari Grady

Booch, DR. James Rumbough, Ivar Jacobson, Rebecca Wirfs-Brock, Peter Yourdon,

dan lainnya. Jacobson menulis tentang pendefinisian persyaratan-persyaratan sistem

41

yang disebut use case. Juga mengembangkan sebuah metode untuk perancangan

sistem yang disebut Object-Oriented Software Engineering (OOSE) yang berfokus

pada analisis. Booch, Rumbough dan Jacobson biasa disebut dengan tiga sekawan

(tree amigos). Semuanya bekerja di Rational Software Corporation dan berfokus pada

standarisasi dan perbaikan ulang UML. Simbol UML mirip dengan Booch, notasi

OMT, dn juga ada kemiripan dengan notasi lainnya.

Menurut Haviluddin (2011) UML memiliki seperangkat notasi yang

digunakan ke dalam struktur diagram, behaviour diagram dan interaction diagram.

Berikut beberapa notasi dalam UML.

Gambar 3.15 Notasi actor (Haviluddin, 2011)

Gambar 3.15 adalah notasi actor yang digunakan untuk menentukan peran

yang dimainkan oleh user atau sistem lain yang berinteraksi dengan subjek. Actor

adalah segala sesuatu yang berinteraksi langsung dengan sistem aplikasi

komputer, seperti orang, benda atau lainnya. Tugas actor adalah memberikan

informasi kepada sistem dan dapat memerintahkan sistem untuk melakukan

sesuatu tugas.

Gambar 3.16 Notasi class (Haviluddin, 2011)

Gambar 3.16 adalah notasi class diagram, disebut juga notasi utama dan

paling mendasar pada diagram UML adalah notasi untuk mempresentasikan suatu

class beserta dengan atribut dan operasinya. Class adalah pembentuk utama dari

sistem berorientasi objek.

42

Gambar 3.17 Notasi use case (Haviluddin, 2011)

Gambar 3.17 adalah notasi use case berguna untuk mendeskripsikan fungsi

dari sebuah sistem perspektif pengguna. Use case bekerja dengan cara

mendeskripsikan tipikal interaksi antara user (pengguna) sebuah sistem dengan

sistemnya sendiri melalui sebuah cerita bagaimana sebuah sistem dipakai. Urutan

langkah-langkah yang menerangkan antara pengguna dan sistem disebut skenario.

Use case merupakan awal yang sangat baik untuk setiap fase pengembangan

berbasis objek, design, testing, dan dokumentasi yang menggambarkan kebutuhan

sistem dari sudut pandang di luar sistem. Perlu diingat bahwa use case hanya

menetapkan apa yang seharusnya dikerjakan oleh sistem, yaitu kebutuhan

fungsional sistem dan tidak untuk menentukan kebutuhan non-fungsional,

misalnya sasaran kinerja, bahasa pemrograman dan lain sebagainya.

Gambar 3.18 Notasi realization (Haviluddin, 2011)

Gambar 3.18 adalah notasi realization, berupa anak panah tertutup dengan

garis patah-patah yang berguna untuk menunjukkan hubungan bahwa elemen

yang ada di bagian tanpa panah akan merealisasikan apa yang dinyatakan oleh

elemen yang ada di bagian dengan panah.

Gambar 3.19 Notasi interaction (Haviluddin, 2011)

Gambar 3.19 adalah notasi interaction, berupa anak panah terbuka dengan

garis solid yang beruna untuk menunjukkan aliran pesan atau informasi antar

obyek maupun hubungan antar obyek.

43

Gambar 3.20 Notasi dependency (Haviluddin, 2011)

Gambar 3.20 adalah notasi dependency, berupa anak panah terbuka dengan

garis patah-patah yang berguna untuk menunjukan bahwa perubahan pada salah

satu elemen memberi pengaruh pada elemen lain. Terdapat 2 stereotype dari

dependency, yaitu include dan extend. Include menunjukkan bahwa suatu bagian

dari elemen (yang ada digaris tanpa panah) memicu eksekusi bagian dari elemen

lain (yang ada di garis dengan panah). Extend menunjukkan bahwa suatu bagian

dari elemen di garis tanpa panah bisa disisipkan ke dalam elemen yang ada di

garis dengan panah.

Gambar 3.21 Notasi note (Haviluddin, 2011)

Gambar 3.21 adalah notasi note, digunakan untuk memberikan keterangan

atau komentar tambahan dari suatu elemen sehingga bisa langsung terlampir

dalam model. Note ini bisa disertakan ke semua elemen notasi yang lain.

Gambar 3.22 Notasi association (Haviluddin, 2011)

Gambar 3.22 adalah notasi association, berupa garis solid atau garis solid

dengan ujung jajargenjang, digunakan untuk menunjukkan navigasi antar class,

berapa banyak obyek lain yang bisa berhubungan dengan satu obyek (multiplicity

44

antar class) dan apakah suatu class menjadi bagian dari class lainnya

(aggregation).

Gambar 3.23 Notasi generalization (Haviluddin, 2011)

Gambar 3.23 adalah notasi generalization, berupa anak panah tertutup

dengan garis solid yang berguna untuk menunjukkan hubungan antara elemen

yang lebih umum ke elemen yang lebih spesifik.

Gambar 3.24 Notasi package (Haviluddin, 2011)

Gambar 3.24 adalah notasi package, berbentuk seperti folder yang berguna

untuk menandai pengelompokkan elemen-elemen model.

Gambar 3.25 Notasi interface (Haviluddin, 2011)

Gambar 3.25 adalah notasi interface, berupa garis solid dengan ujung

lingkaran yang merupakan kumpulan operasi berupa implementasi dari suatu

class. Atau dengan kata lain implementasi operasi dalam interface dijabarkan oleh

operasi di dalam class.

45

3.22.2 Diagram Use Case

Menurut Sholiq (2006) diagram use case menyajikan antara use case dengan

aktor. Dimana aktor dapat berupa orang, peralatan, atau sistem lain yang berinteraksi

dengan sistem yang sedang dibangun. Use case menggambarkan fungsionalitas

sistem atau persyaratan-persyaratan yang harus dipenuhi sistem dari pandangan

pemakai.

Gambar 3.26 Diagram use case sistem ATM (Sholiq, 2006)

Gambar 3.26 adalah contoh diagram use case sistem ATM menunjukan

interaksi antara use case dan aktor sistem ATM. Dimana, aktor pelanggan

menggunakan beberapa use case seperti menarik uang, mendepositkan dana,

mentransfer uang, mengecek saldo, membayar kredit, dan mengganti PIN. Petugas

bank dapat mengganti PIN pelanggan. Use case membayar kredit memberikan

arah panah ke aktor Sistem Kredit, dimana merupakan aktor berupa sistem lain

yang menerima informasi/data dari sistem ATM.

Tabel 3.1 Notasi use case include dan extend

Notasi

Nama

Keterangan

<<include>>

Relasi include

Digunakan jika satu use case

menggunakan fungsionalias yang

disediakan oleh use case lainnya.

<<extend>>

Relasi extend

Digunakan jika satu use case

menggunakan fungsionalias secara

opsional yang disediakan oleh use case

lainnya.

46

3.22.3 Diagram Aktivitas

Menurut Sholiq (2006) diagram aktivitas atau activity diagram

menggambarkan aliran fungsionalitas sistem. Pada tahap pemodelan bisnis, diagram

aktivitas dapat digunakan untuk menunjukan aliran kerja bisnis (business workflow).

Dapat juga digunakan untuk menunjukan aliran kejadian (flow of events).

Gambar 3.27 Contoh diagram aktivitas workflow (Sholiq, 2006)

Gambar 3.27 adalah contoh diagram aktivitas, dimana aktivitas

direpresentasikan dengan bentuk bujur sangkar bersudut tidak lancip, yang di

dalamnya berisi langkah-langkah apa saja yang terjadi dalam aliran kerja. Ada

sebuah keadaan mulai (start state) yang menunjukkan dimulainya aliran kerja, dan

sebuah keadaan selesai (end state) yang menunjukkan akhir diagram, titik

keputusan direpresentasikan dengan diamond. Diagram aktivitas tidak perlu

dibuat untuk setiap aliran kerja, tetapi diagram ini akan sangat berguna untuk

aliran kerja yang rumit dan melebar.

3.22.4 Diagram Sekuensial

Menurut Sholiq (2006) diagram sekuensial atau squence diagram digunakan

untuk menunjukkan aliran fungsionalitas dalam use case.

47

Gambar 3.28 Diagram sekuensial penarikan uang (Sholiq, 2006)

Gambar 3.28 adalah contoh diagram sekuensial penarikan uang, mempunyai

beberapa kemungkinan, seperti penarikan uang secara normal, percobaan

penarikan uang tanpa kecukuupan ketersediaan dana, penarikan dengan

penggunaan PIN yang salah, dan lainnya. Diagram sekuensial penarikan 1 juta

rupiah (tanpa adanya kesalahan nomor PIN atau penghitungan). Sekuensial

termasuk dalam tipe diagram interaksi yang menjelaskan pesan-pesan yang

dikirimkan antar obyek-obyek yang disusun berdasarkan urutan waktu. Secara

semantik ekuivalen dengan diagram kolaborasi.

3.22.5 Diagram Kelas

Menurut Sholiq (2006) diagram kelas atau class diagram menunjukkan

interaksi antar kelas dalam sistem.

48

Gambar 3.29 Diagram kelas penarikan uang (Sholiq, 2006)

Gambar 3.29 adalah contoh diagram kelas penarikan uang, nomor akun

milik Arvin adalah sebuah obyek dari kelas akun. Kelas mengandung informasi

dan tingkah laku (behavior) yang berkaitan dengan informasi tersebut. Kelas akun

mengandung nomor PIN pengguna dan tingkah laku untuk mengecek PIN.

Sebuah kelas pada diagram kelas dibuat untuk setiap tipe obyek pada diagram

sekuensial atau diagram kolaborasi.

3.22.6 Pengelompokan Diagram

Menurut Sholiq (2006) pengelompokan elemen-elemen diagram dirangkum

dalam Tabel 3.2 Pengelompokan diagram.

Tabel 3.2 Pengelompokan diagram (Sholiq, 2006)

Nama Diagram

Kategori

Keterangan

Use case

Perilaku

Menunjukkan kumpulan aktor-aktor, beberapa use

case dan hubungan antara mereka. Memodelkan

organisasi secara efektif dan pemodelan inti perilaku

sistem.

Aktivitas

Struktural

Memodelkan aliran aktivitas antar proses-proses.

Lebih banyak digunakan untuk merinci perilaku use

case. Tidak menjelaskan kolaborasi antar obyek.

Sekuensial

Perilaku

Tipe diagram interaksi yang menjelaskan pesan-

pesan yang dikirimkan antar obyek-obyek yang

disusun berdasarkan urutan waktu. Secara semantik

ekuivalen dengan diagram kolaborasi.

Kelas

Struktural

Mengilustrasikan kumpulan kelas-kelas, paket-paket,

dan relasinya, yang menjelaskan salah satu aspek

sistem. Diagram ini paling sering digunakan.

49

BAB IV

RANCANGAN PENELITIAN

4.1 Desain Arsitektur MySIGSAG

Gambar 4.1 Desain Arsitektur MySIGSAG

Gambar 4.1 adalah desain arsitektur MySIGSAG yang menunjukkan konsep

dasar dan cara kerja aplikasi sistem informasi geografis yang dibangun, dimana

melibatkan pengguna untuk melakukan input data atribut di lapangan, dibantu

dengan GPS dan Network Provider sehingga menjadi data spasial. Pengguna tidak

berhak mengakses langsung Google Service untuk melakukan olah data, karena

itu sama halnya menyerahkan otoritas kepada mereka. MySIGSAG berperan

sebagai perantara antara pengguna dengan layanan google untuk olah data

sehingga menghasilkan informasi yang direpresentasikan dalam bentuk chart dan

marker diatas peta.

Komunikasi antar aplikasi dilakukan oleh MySIGSAG dengan Google

Service. Google Apps Script adalah tempat menuliskan berbagai macam fungsi

dengan tujuan tertentu menggunakan Javascript, termasuk fungsi yang mewakili

operasi dasar CURD. Google Apps Script dideploy sebagai web application,

sehingga menjadi RESTful Web Service. Hal ini memungkinkan MySIGSAG

untuk melakukan request ke Base URL file Apps Script tersebut menggunakan

50

method GET dan POST melalui protokol HTTP. Fungsi-fungsi yang mewakili

operasi dasar CURD digunakan sebagai endpoint.

API beberapa layanan google perlu diaktifkan agar Google Apps Script

dapat berinteraksi dengan mereka. Google API Console merupakan control panel

bagi developer untuk mempersiapkan Kredensial yang diperlukan, termasuk

membuat API key, mengaktifkan / menonaktifkan API, dan melihat laporan

statistik jumlah permintaan (request), latency, atau error yang terjadi.

4.1.1 Setup Google API Console

Gambar 4.2 Membuat project google cloud console

Gambar 4.2 menunjukkan tentang persiapan Google API Console atau

Google Cloud Console dimulai dengan membuat project baru dengan nama

MySIGSAG dan SingleSignOn. Adapun caranya dengan membuka dashboard di

http://console.cloud.google.com dan nomer pada gambar ini menunjukkan urutan

langkah yang harus dilakukan. Project MySIGSAG didedikasikan untuk

kebutuhan kredensial olah data mewakili operasi CURD, sedangkan project

SingleSignOn didedikasikan untuk kebutuhan kredensial autentikasi.

51

Gambar 4.3 Mendapatkan nomor project google console

Gambar 4.3 menunjukkan bagaimana cara mendapatkan nomor project

google console, yang mana terdapat pada tabulasi IAM & admin, masuk menu

setelan, disitu disediakan nomor project sebagaimana Gambar 4.3 dengan

highlight SENSOR. Bagian ini bersifat sensitif atau rahasia atau privasi, oleh

sebab itu perlu dijaga keamanannya. Pada penelitian ini ID project MySIGSAG

diperlukan untuk mengasosiasikan dengan file apps script. Cara mengetahui ID

tersebut adalah dengan beralih ke navigasi IAM & admin → Setelan, copy-paste

nomor tersebut ke notepad, sebab nanti digunakan pada saat Setup Google Apps

Script.

4.1.2 Setup Google Spreadsheet

Gambar 4.4 Menu Sync spreadsheet to fusion table

52

Gambar 4.4 menunjukkan persiapan Google Spreadsheet, dimulai dengan

membuat file baru dan diberi nama MySIGSAG. Berikutnya menenukan nama

kolom sesuai kebutuhan. Pada penelitian ini kebutuhan kolom Google

Spreadsheet dijelaskan pada Tabel 4.1 Kamus data tabel utama dalam spreadsheet.

Tahap berikutnya mempersiapkan Google Apps Script dan menjalankan fungsi

setup() sehingga muncul menu baru Sync Spreadsheet To Fusion Table pada

menu bar Google Spreadsheet yang ditandai dengan lingkaran merah.

4.1.3 Setup Google Apps Script

Persiapan Google Apps Script dimulai dengan membuka file spreadsheet

MySIGSAG, kemudian klik Alat → Editor skrip, maka seketika lembar kerja baru

Apps Script terbuat, dan penelitian ini menggunakan nama file tersebut secara

default. Kode program Google Apps Script ini secara rinci dijelaskan pada

Lampiran 1 Source code google apps script.

Gambar 4.5 Kebutuhan tautan file spreadsheet

Gambar 4.5 menunjukkan fungsi yang memerlukan tautan berbagi file

google spreadsheet, ditandai dengan highlight SENSOR.

Gambar 4.6 Kebutuhan ID file fusion tables

Gambar 4.5 menunjukkan variabel yang memerlukan file ID google fusion

tables, ditandai dengan highlight SENSOR.

53

Gambar 4.7 Mengaktifkan layanan fusion tables API

Gambar 4.7 menunjukkan tentang cara mengaktifkan layanan fusion tables

API melalui panel Google App Script, jadi setelah tautan file google spreadsheet

dan file ID google fusion tables terpenuhi, selanjutnya mengaktifkan layanan

Fusion Tables API melalui menu Sumber Daya → Layanan lanjutan google →

scroll down hingga menemukan pengaturan Fusion Tables API, pilih v2

menerankan versi pada menu dropdown, dan Tombol on dengan highlight hijau

menandakan layanan API telah diaktifkan.

Gambar 4.8 Asosiasi file apps script dengan project google console

54

Gambar 4.8 menunjukkan cara mengasosiasikan file apps script dengan

project google cloud console dilakukan dengan cara beranjak ke Sumber Daya →

Cloud Platform project → copy-paste nomor project MySIGSAG ke field

penerapan project, sebagaimana diperjelas dengan nomor urut satu dan dua.

Sedangkan cara mendapatkan nomor project tersebut diperjelas pada Gambar 4.3

Mendapatkan nomor project google console.

Gambar 4.9 Menjalankan fungsi setup()

Gambar 4.9 menunjukkan langkah pengujian konfigurasi antara Google

Spreadsheet dengan Google Apps Script yang dilakukan dengan cara menjalankan

fungsi setup() yang telah dibuat di Google Apps Script melalui menu dropdown

Pilih fungsi → setup → klik tombol start ►, dan hasilnya sebagaimana

ditunjukkan pada Gambar 4.4 Menu Sync spreadsheet to fusion table.

4.1.4 Setup Google Fusion Tables

Persiapan Google Fusion Tables dimulai dengan membuat file baru dan

diberi nama MySIGSAG. Berikutnya buka file → About this table → copy-paste

ID tersebut ke fungsi variable TABLE_ID di Google Apps Script, sebagaimana

ditunjukkan pada Gambar 4.6 Kebutuhan ID file fusion tables.

55

Gambar 4.10 Tabulasi map dan chart googe fusion tables

Gambar 4.10 menunjukkan proses persiapan lembar kerja map dan chart.

Persiapan ini dilakukan dengan cara simulasi menginputkan beberapa data dummy

melalu spreadsheet, kemudian menekan tombol Sync spreadsheet to fusion table

sehingga terdapat sample data pada fusion table. Visualisasi data dilakukan

dengan cara menambahkan tabulasi Map dan Chart menggunakan tombol plus di

bilah paling kanan tabulasi.

Gambar 4.11 Konfigurasi tabulasi map google fusion tables

Gambar 4.11 menunjukkan proses konfigurasi Map yang disertai dengan

nomor urut, dimulai dari menentukan tipe kolom sebagai lokasi dengan cara pilih

tabulasi Rows → Edit → Change columns → Pilih salah satu uLongitude atau

uLatitude, selanjutnya sesuaikan sebagaimana ditunjukkan pada Gambar 4.7

Konfigurasi tabulasi map google fusion tables.

56

Gambar 4.12 Konfigurasi tabulasi chart google fusion tables

Gambar 4.12 menunjukkan proses konfigurasi Chart dilakukan dengan cara

memilih tabulasi Chart → Tools → Change chart → pilih Pie Chart. Kemudian

menentukan aStatus sebagai kategori kolom yang dibuat ringkasan (summarize).

Kalkulasi dilakukan pada kolom uMarking yang berkorelasi dengan aStatus,

kemudian slices (irisan) chart ditentukan 3 buah bercermin pada data aStatus yaitu

rusak, perbaikan, dan beres.

4.2 Kamus Data

Pada tahap perancangan sistem, kamus data digunakan untuk merancang

input, merancang laporan-laporan dan database. Berikut adalah kamus data tabel

MySIGSAG.

Kamus Data Tabel Utama

Nama Tabel : Sheet1

Kunci Utama : uId

Keterangan : Tabel inti dalam spreadsheet untuk menyimpan data

57

Tabel 4.1 Kamus data tabel utama dalam spreadsheet

No.

Nama Field

Tipe Data

Lebar

Keterangan

1

uId

otomatis

unknown

id unik

2

uTime

otomatis

unknown

waktu data terkirim

3

uEmail

otomatis

unknown

email pengguna

4

uName

otomatis

unknown

nama pengguna

5

uDeskripsi

otomatis

unknown

keterangan pengguna

6

uImage

otomatis

unknown

gambar laporan

7

uLongitude

otomatis

unknown

garis bujur

8

uLatitude

otomatis

unknown

garis lintang

9

uMarking

otomatis

unknown

nama marker titik

10

aStatus

otomatis

unknown

status titik

11

aFeedback

otomatis

unknown

keterangan admin

4.3 UML

Terdapat 2 tipe aktor dalam MySIGSAG. Dimana masyarakat dan

pemerintah kota Yogyakarta sebagai aktor tipe pengguna sistem, sedangkan

Google Service sebagai aktor tipe sistem eksternal. Secara rinci dijelaskan dalam

bentuk diagram-diagram UML.

58

4.3.1 Diagram Use Case MySIGSAG

Gambar 4.13 Diagram use case sistem MySIGSAG

Gambar 4.13 menunjukkan bahwa warga dan pemkot Jogja sebagai aktor

manusia sedangkan google service sebagai aktor system. Pada saat Warga dan

Pemkot Jogja menghendaki sebagai pengguna pasif, maka mereka cukup

mengakses laman MySIGSAG. Laman tersebut memungkinkan mereka

memantau isu laporan keluhan yang sedang berkembang saat ini. Selain itu

mereka dapat mengakses menu About, Contact dan Download tanpa perlu

autentikasi. Anak panah menunjukkan jenis relasi antar use case, dimana

<include> sebagai relasi mutlak yang harus dilalui aktor manusia, sedangkan

<extend> adalah relasi yang menyertai dan aktor manusia bebas memilih.

Pada saat Warga dan Pemkot Jogja menghendaki sebagai pengguna aktif,

maka mereka perlu autentikasi terlebih dahulu, dimana Pemkot Jogja dapat

mengakses dashboard admin melalu menu login di laman MySIGSAG, ketika

sukses, maka mereka dapat mengelola laporan seperti read, edit, delete, dan

download. Sementara itu Warga Jogja perlu download dan install terlebih dahulu

aplikasi mobile MySIGSAG melalui menu Download pada laman MySIGSAG,

59

ketika sukses, maka mereka dapat mengakses menu lapor, cek map, cek chart, dan

info. MySIGSAG adalah media yang menjembatani Warga dan Pemkot Jogja

dengan Google Service.

4.3.2 Diagram Aktivitas Workflow MySIGSAG

Gambar 4.14 Diagram aktivitas warga melaporkan keluhan

Gambar 4.14 menunjukkan aktivitas warga Jogja pada saat melaporkan

keluhan mereka menggunakan aplikasi MySIGSAG berbasis android ditunjukkan

pada Gambar 4.14 Diagram aktivitas warga melaporkan keluhan. Serangkaian alur

kerja perlu mereka lewati. Tahap ini mengasumsikan bahwa mereka telah

memasang aplikasi MySIGSAG diperangkat android mereka dan memiliki akun

60

google. Aktivitas dimulai dari membuka aplikasi MySIGSAG, dilanjutkan login

menggunakan akun google mereka. Jika autentikasi berhasil, maka mereka dapat

membuka menu Lapor dan seketika muncul dialog box yang mengarahkan mereka

ke pengaturan akses lokasi. Jika mereka membatalkan atau menonaktifkan akses

lokasi, maka form validation bekerja sehingga laporan mereka ditanggukan, dan

jika mereka mengaktifkan akses lokasi tapi tidak mendapatkan koordinat, maka

form validation bekerja sehingga laporan mereka ditanggukan. Pada saat semua

kondisi terpenuhi mulai dari akses lokasi diaktifkan, mendapat koordinat, dan

formulir terisi semua, maka laporan mereka dapat dikirim (submit).

Gambar 4.15 Diagram aktivitas petugas mengelola laporan keluhan

Gambar 4.15 menunjukkan aktivitas pemkot Jogja pada saat mengelola

laporan keluhan warga menggunakan aplikasi MySIGSAG berbasis web

ditunjukkan pada Gambar 4.15 Diagram aktivitas petugas mengelola laporan

61

keluhan. Serangkaian alur kerja perlu mereka lewati. Tahap ini mengasumsikan

bahwa mereka telah memiliki akun pada sistem tersebut. Aktivitas dimulai dari

mengunjungi laman MySIGSAG, dilanjutkan login menggunakan akun mereka.

Jika autentikasi berhasil, maka mereka dapat membaca laporan keluhan dengan

menekan tombol Read. Daftar keluhan ditampilkan dalam bentuk tabel, setiap

barisnya disediakan tombol eksekusi. Tombol ini memudahkan petugas untuk

memilih laporan yang perlu diproses pada saat melakkukan peninjauan. Proses

tersebut antara lain.

1. Update feedback.

2. Update status dari “rusak” ke “perbaikan” atau “beres”.

3. Update feedback dan status.

4. Delete laporan.

5. Download laporan.

4.3.3 Diagram Sekuensial MySIGSAG

Aliran fungsionalitas use case bagian pengguna MySIGSAG berbasis

android dalam hal ini adalah warga Jogja, ditunjukkan pada Gambar 4.16 Diagram

sekuensial pengguna MySIGSAG berbasis android, yang mana mempunyai

beberapa kemungkinan seperti membaca petunjuk manual melalui menu Info,

memantau isu keluhan warga melalui menu cek map, menganalisa progress

penanganan keluhan melalui menu cek chart, dan melaporkan keluhan melalui

menu Lapor.

62

Gambar 4.16 Diagram sekuensial pengguna MySIGSAG berbasis android

Gambar 4.16 memberikan gambaran bagaimana pengguna MySIGSAG

android perlu sign in terlebih dahulu menggunakan tombol yang tersedia di

tampilan pembuka splashscreen sebelum dapat mengakses menu utama

MySIGSAG berbasis android. Setelah sukses melakukan autentikasi, mereka

bebas memilih menu apa saja, akan tetapi bagi pengguna baru sangat disarankan

memulainya dengan menu Info terlebih dahulu, karena menu tersebut memuat

petunjuk praktis penggunaan aplikasi tersebut yang bertujuan agar fitur-fitur yang

63

disediakan dapat dimanfaatkan secara optimal. Informasi yang disajikan menu

info bersifat statis yang disertakan pada aplikasi, sedangkan informasi menu cek

map dan cek chart bersifat dinamis yang diminta dari server fusion tables.

Pengguna MySIGSAG dalam hal ini warga Jogja, dapat menggunakan

menu lapor jika beberapa syarat telah mereka penuhi, diantaranya.

1. Mengaktifkan akses lokasi, bisa GPS saja, NETWORK saja atau keduanya.

2. Mengisi formulir, mulai dari foto, nama, dan keterangan.

3. Mengirim laporan dengan menekan tombol submit.

Pada saat pengguna mengirim laporan, maka yang menerima dan

mengontrol adalah Google Apps Script, sedangkan yang menyimpan adalah

Google Spreadsheet dibantu Google Drive, dan yang memvisualisasikan data

adalah Google Fusion Tables.

Aliran fungsionalitas use case bagian pengguna MySIGSAG berbasis web

dalam hal ini adalah pengguna secara umum, ditunjukkan pada Gambar 4.17

Diagram sekuensial pengguna MySIGSAG berbasis web, yang mana mempunyai

beberapa kemungkinan seperti memantau isu keluhan warga melalui Home laman

MySIGSAG, membaca informasi tentang MySIGSAG melalui menu About,

mengirim kritik atau saran terkait pelayanan kepada publik melalui menu Contact,

dan mendownload aplikasi MySIGSAG berbasis android melalui menu

Download. Informasi yang disajikan di Home bersifat dinamis yang diminta dari

server fusion tables. Selain itu adalah informasi yang dihosting di web server

MySIGSAG.

64

Gambar 4.17 Diagram sekuensial pengguna MySIGSAG berbasis web

65

Gambar 4.17 memberikan gambaran bagaimana aliran fungsionalitas use

case bagian pengguna MySIGSAG berbasis web dalam hal ini adalah pemkot

Jogja, yang mana mempunyai beberapa kemungkinan seperti memantau isu

keluhan warga melalui Home laman MySIGSAG, membaca informasi tentang

MySIGSAG melalui menu About, mengirim kritik atau saran terkait pelayanan

kepada publik melalui menu Contact, mendownload aplikasi MySIGSAG berbasis

android melalui menu Download, dan mengelola laporan melalui menu Login.

Pengguna MySIGSAG dalam hal ini pemkot Jogja perlu login terlebih

dahulu menggunakan tombol yang tersedia di pojok kanan navigation bar

sebelum dapat mengakses dashboard admin. Setelah sukses melakukan

autentikasi, mereka bebas meninjau laporan dari mana saja dengan kemungkinan

sebagai berikut.

1. Read laporan.

2. Update feedback.

3. Update status dari “rusak” ke “perbaikan” atau “beres”.

4. Update feedback dan status.

5. Delete laporan.

6. Download laporan.

Pada saat petugas mengelola laporan dengan kemungkinan-kemungkinan

tersebut, maka yang merespon dan mengontrol adalah Google Apps Script,

sedangkan yang menyimpan adalah Google Spreadsheet dibantu Google Drive,

dan yang memvisualisasikan data adalah Google Fusion Tables.

66

Gambar 4.18 Diagram sekuensial reset password administrator

67

Gambar 4.18 memberikan gambaran bagaimana teknis pemulihan akun pada

saat petugas gagal melakukan autentikasi karena lupa password, maka dapat

menggunakan tombol Lupa password. Tersedia formulir yang harus diisi dengan

email valid, ketika formulir disubmit, maka referensi tautan untuk membuat

password baru dikirim ke email tersebut. Skema ini ditangani oleh library CI-

IonAuth yang menjadi komponen penting dalam MySIGSAG web. Nomor di

setiap fungsi menunjukkan urutan fungsi yang digunakan.

4.3.4 Diagram Kelas MySIGSAG Mobile

Gambar 4.19 Diagram kelas mengoperasikan MySIGSAG android

Gambar 4.19 menunjukkan interaksi antar kelas dalam sistem. Kelas

mengandung informasi dan tingkah laku (behavior) yang berkaitan dengan

informasi tersebut. Pada penelitian ini splashscreen adalah sebuah obyek dari

kelas MainActivity. Sementara itu menu Info merupakan obyek dari kelas

CekAbout sekaligus mewakili tingkah laku untuk membaca petunjuk manual.

68

Menu Cek Map merupakan obyek dari kelas CekMap sekaligus mewakili tingkah

laku untuk memantau isu laporan yang sedang berkembang diatas peta digital.

Menu Cek Chart merupakan obyek dari kelas CekChart sekaligus mewakili

tingkah laku untuk menganalisis progress laporan keluhan dalam prosentase yang

disajikan dalam grafik chart. Menu Lapor merupakan obyek dari kelas Kasus

sekaligus mewakili tingkah laku untuk melaporkan keluhan.

Kelas Global mewakili tingkah laku perantara yang mengambil data dari

kelas MainActivity untuk kemudian dikirimkan ke kelas Kasus. Data tersebut

adalah alamat email pengguna, sehingga pengguna tidak perlu menginputkan

secara manual alamat email mereka, karena sistem sudah secara otomatis

mengambil data tersebut pada saat pengguna berhasil sign in.

Kelas Configuration mewakili tingkah laku penyedia alamat, ibarat sebuah

“phonebook”. Jadi, laporan yang dibuat akan dikirim ke alamat tersebut.

Kelas kasusHttpAsyncTask mewakili tingkah laku meminta data dari server

Fusion Tables dengan ketentuan hanya data yang berlabel “x”, sedangkan kelas

goHttpAsyncTask mewakili tingkah laku meminta data dari server Fusion Tables

dengan ketentuan hanya data yang berlabel “go”, dan pauseHttpAsyncTask

mewakili tingkah laku meminta data dari server Fusion Tables dengan ketentuan

hanya data yang berlabel “pause”. Selengkapnya dijelaskan pada Gambar 4.19

Diagram kelas mengoperasikan MySIGSAG android.

4.4 Antarmuka

Perancangan antarmuka MySIGSAG meliputi struktur menu, panel admin

dan panel publik.

4.4.1 Panel Publik

Menu panel publik adalah antarmuka yang memungkinkan pengguna secara

umum melakukan aktivitas tertentu.

69

Gambar 4.20 Menu utama panel publik MySIGSAG web

Gambar 4.20 menunjukkan struktur menu pada halaman home MySIGSAG

web secara default menampilkan map disertai marker indikator lokasi kasus,

dalam proses perbaikan, maupun jalan yang telah selesai diperbaiki. Sisi atas

adalah navigasi dengan beberapa menu utama seperti.

1. About, menampilkan konten berkaitan seluk beluk MySIGSAG.

2. Chart, menampilkan visualisasi data prosentase dalam grafik.

3. Download, untuk mengarahkan pengguna ke official aplikasi MySIGSAG

berbasis android yang diunggah di google playstore.

4. Contact, untuk menampilkan formulir buku tamu, contact person, dan

alamat kantor.

Gambar 4.21 Menu utama panel publik mobile GIS

Gambar 4.21 menunjukkan struktur menu pada halaman splashscreen

MySIGSAG android secara default menampilkan animasi background dan tombol

google sign in. Saat pengguna berhasil sign in, maka ditampilkan beberapa menu

seperti.

1. Lapor, menyediakan formulir laporan keluhan.

2. Cek Map, menampilkan visualisasi data spasial dalam peta.

3. Cek Chart, menampilkan visualisasi data prosentase dalam grafik.

70

4. Info, menampilkan konten berkaitan seluk beluk MySIGSAG dan petunjuk

manual aplikasi.

5. Sign out, untuk mengakhiri aktivitas di aplikasi.

Gambar 4.22 Desain antarmuka home MySIGSAG web

Gambar 4.22 menunjukkan desain antarmuka home MySIGSAG web

bermaksud menampilkan informasi titik keluhan warga Jogja di atas peta digital

dan disertai dengan grafik pie chart di bilah kiri, untuk informasi progress

keluhan dalam prosenase. Navigasi bar dimaksudkan untuk menyajikan menu-

menu utama yang dimiliki MySIGSAG berbasis web seperti Logo untuk tata letak

logo, Home untuk menampilkan infor map dan chart, download untuk tautan

download aplikasi MySIGSAG berbasis android, Contact untuk menampilkan

formulir buku tamu, dan Login untuk autentikasi administrator. Sedangkan footer

dimaksudkan untuk menyajikan info credit dan sosial media.

71

Gambar 4.23 Desain antarmuka about MySIGSAG web

Gambar 4.23 menunjukkan desain antarmuka about MySIGSAG web

bermaksud menampilkan informasi pengenalan aplikasi MySIGSAG atau instansi

terkait, seperti Judul About menerangkan judul dari artikel, dan garis patah-patah

dimaksudkan untuk konten dari halaman About. Menu-menu pada Navigasi bar

dan footer sama sebagaimana dijelaskan pada Gambar 4.22 Desain antarmuka

home MySIGSAG web.

Gambar 4.24 Desain antarmuka kontak MySIGSAG web

Gambar 4.24 menunjukkan desain antarmuka kontak MySIGSAG web

bermaksud menyajikan formulir kontak untuk menerima kritik dan saran

pengguna. Formulir tersebut meliputi field Nama lengkap untuk isian nama

pengguna, Email untuk isian alamat email pengguna, Subject berupa menu pilihan

dropdown, Message untuk isian keterangan kritik dan saran, dan tombol Send

72

untuk mengirimkan formulir yang telah diisi. Halaman contact ini juga disertai

dengan Info address & contact untuk menuangkan informasi alamat dan kontak

instansi terkait dan Map untuk peta digital dengan marker tertentu yang

menerangkan lokasi gedung atau kantor instansi terkait.

Gambar 4.25 Desain antarmuka login MySIGSAG web

Gambar 4.25 menunjukkan desain antarmuka login MySIGSAG web

bermaksud menyajikan formulir autentikasi untuk mengamankan dashboard

administrator, disertai dengan logo aplikasi atau instansi terkait. Formulir

autentikasi ini meliputi field Email untuk isian alamat email petugas, field

Password untuk isian password petugas dan tombol Login untuk mengeksekusi

formulir.

Gambar 4.26 Desain antarmuka splashscreen MySIGSAG android

73

Gambar 4.26 menunjukkan desain antarmuka splashscreen MySIGSAG

android, bermaksud menyajikan tombol autentikasi untuk mengamankan menu

utama dari tindakan ilegal, disertai dengan logo aplikasi atau instansi terkait.

Gambar 4.27 Desain antarmuka utama MySIGSAG android

Gambar 4.27 menunjukkan desain antarmuka utama MySIGSAG android

bermaksud menyajikan menu-menu utama yang dimiliki MySIGSAG berbasis

android seperti lapor untuk pergi ke formulir lapor, cek map untuk mengetahui

informasi dengan visualisasi diatas peta, cek chart untuk mengetahui informasi

dengan visualisasi pie chart, dan info mengetahui petunjuk manual penggunaan

aplikasi. Halaman ini dilengkapi dengan identitas pengguna berupa foto, nama

dan email. Identitas tersebut diambil secara otomatis pada saat mereka berhasi

melakukan autentikasi. Tombol logout memfasiliasi pengguna apabila ingin

menghentikan aktifitas di dalam aplikasi MySIGSAG android, sehingga mereka

dikembalikan ke halaman splashscreen.

74

Gambar 4.28 Desain antarmuka lapor MySIGSAG android

Gambar 4.28 menunjukkan desain antarmuka lapor MySIGSAG android

bermaksud menyajikan formulir laporan keluhan. Formulir tersebut terdiri dari

Lapor sebagai judul halaman, kotak preview foto sebagai media menampilkan foto

hasil potret kamera perangkat smartphone pengguna, tombol foto untuk

mengarahkan pengguna ke aplikasi foto bawaan smartphone pengguna, tombol

kirim untuk mengirimkan formulir ke server google services, field nama untuk

isian nama pengguna, field keterangan untuk isian deskripsi keluhan pengguna,

Longitude untuk menampilkan informasi garis bujur yang dihasilkan device GPS,

Latitude untuk menampilkan informasi garis lintang yang dihasilkan device GPS,

icon satelit dan kotak dibawahnya sebagai indikator untuk menampilkan jumlah

satelit yang dapat diakses oleh device GPS perangkat smartphone pengguna.

Aplikasi ini membatasi isian hanya berupa foto, nama pengguna, dan

keterangan laporan mereka. Selain itu informasi longitude, latitude, address dan

jumlah satelit secara otomatis dilakukan oleh perangkat smartphone pengguna,

dalam hal ini tergantung spesifikasi smartphone mereka. Bagi pengguna dengan

smartphone kelas menengah dan tinggi, biasanya dilengkapi dengan device GPS

dan Network provider, sedangkan pengguna dengan smartphone kelas bawah

biasanya hanya dilengkapi Network provider untuk pengaturan akses lokasi

mereka.

75

Gambar 4.29 Desain antarmuka cek map MySIGSAG android

Gambar 4.29 menunjukkan desain antarmuka cek map MySIGSAG android

bermaksud menyajikan informasi titik keluhan diatas peta digital Yogyakarta. Cek

Map di navbar paling atas menunjukkan judul dari halaman ini.

Gambar 4.30 Desain antarmuka cek chart MySIGSAG android

Gambar 4.30 menunjukkan desain antarmuka cek chart MySIGSAG

android bermaksud menyajikan informasi kalkulasi keluhan dalam prosentase dan

disajikan dalam bentuk grafik pie chart. Terdapat tiga potongan dalam grafik ini

76

yang mewakili kategori status keluhan. Cek Chart di navbar paling atas

menunjukkan judul dari halaman ini. Grafik ini dapat digunakan untuk bahan

analisa progress pemerintah dalam menangani kasus keluhan.

Gambar 4.31 Desain antarmuka info MySIGSAG android

Gambar 4.31 menunjukkan desain antarmuka info MySIGSAG android

bermaksud menyajikan deskripsi singkat tentang aplikasi dan dan petunjuk

manual penggunaan aplikasi. Info di navbar paling atas menunjukkan judul dari

halaman ini, Judul About menunjukkan judul dari konten terkait, garis patah-patah

dimaksudkan untuk konten dalam paragraf.

77

4.4.2 Panel Admin

Gambar 4.32 Desain antarmuka panel admin

Gambar 4.32 menunjukkan desain panel admin sebagai antarmuka yang

memungkinkan administrator melakukan aktivitas olah data. Antarmuka ini terdiri

dari Logo aplikasi yang berada di pojok kiri atas, garis patah-patah dimaksudkan

untuk deskripsi tentang aplikasi, tombol Logout untuk keluar dari panel admin,

formulir olah data yang terdiri dari kotak kecil paling kiri untuk primary key data,

kotak sebelah kanannya disertai garis patah-patah menunjukkan menu dropdown

untuk pilihan status keluhan, kotak paling besar untuk isian keterangan atau

feedback dari petugas terhadap keluhan terkait, tombol Read untuk menampilkan

informasi keluhan dalam tabel, tombol Update untuk melakukan perubahan data

keluhan, tombol Delete untuk menghapus data keluhan, tabel menunjukkan total

data keluhan, DOWNLOAD sebagai link tautan untuk download laporan keluhan

dalam format file *.xlsx, dan footer untuk informasi credit.

78

BAB V

HASIL PENELITIAN DAN PEMBAHASAN

5.1 Panel Publik

Panel publik merupakan antarmuka pengguna yang berfungsi

menghubungkan antara pengguna dengan aplikasi MySIGSAG. Menyediakan

formulir untuk mengutarakan keluhan dan informasi terkait isu keluhan yang

sedang berkembang saat ini.

5.1.1 Home

Gambar 5.1 Antarmuka publik home MySIGSAG web

Gambar 5.1 menunjukkan antarmuka home, terdiri dari dari navigasi yang

meliputi Logo aplikasi di pojok kiri atas, menu Home yang menonjolkan

informasi titik-titik kerusakan, dipresentasikan dalam bentuk marker diatas peta

dan pie chart untuk ringkasan kalkulasi titik-titik lokasi dalam prosentase.

Indikator warna pada marker dan pie chart mencerminkan progress keluhan.

Merah menerangkan status rusak, kuning atau orange menerangkan status

perbaikan atau dalam pengerjaan, dan hijau menerangkan kasus telah “beres”

diperbaiki atau ditangani.

Navigasi bar di bagian atas menyediakan menu utama MySIGSAG mulai

dari logo, Home untuk informasi utama, About untuk deskripsi singkat aplikasi,

79

Download untuk mengunduh aplikasi MySIGSAG berbasis android, Contact

untuk formulir kritik dan saran seputar aplikasi dan pelayanan, dan login khusus

untuk petugas yang berhak mengelola konten.

Footer di bagian bawah terdiri dari info credit di sisi kiri dan tautan sosial

media di sisi kanan seperti facebook, twitter, instagram dan youtube.

Tombol (+) dan (-) di pojok kanan bawah digunakan untuk zoom in

(memperdekat) dan zoom out (memperjauh) tampilan peta.

Gambar 5.2 Info windows dan alert dialog MySIGSAG web

Gambar 5.2 menunjukkan Info window titik keluhan, yang dapat diketahui

pengguna dengan cara mengklik tiap marker yang dikehendaki. Sementara itu,

alert dialog akan muncul dalam selang waktu tertentu untuk menawarkan kepada

pengguna apakah ingin mendapatkan info terbaru dengan cara merefresh halaman

web. Sementara itu kode sumber panel publik Navigasi bar dapat dilihat pada

Lampiran 7 Kode sumber header panel publik MySIGSAG web dan kode sumber

panel publik home dapat dilihat pada Lampiran 8 Kode sumber home panel publik

MySIGSAG web. Navigasi bar di bagian atas menyediakan menu utama

MySIGSAG mulai dari logo, Home untuk informasi utama, About untuk deskripsi

singkat aplikasi, Download untuk mengunduh aplikasi MySIGSAG berbasis

android, Contact untuk formulir kritik dan saran seputar aplikasi dan pelayanan,

dan login khusus untuk petugas yang berhak mengelola konten. Footer di bagian

bawah terdiri dari info credit di sisi kiri dan tautan sosial media di sisi kanan

seperti facebook, twitter, instagram dan youtube. Tombol (+) dan (-) di pojok

80

kanan bawah digunakan untuk zoom in (memperdekat) dan zoom out

(memperjauh) tampilan peta.

5.1.2 About

Gambar 5.3 Antarmuka publik about MySIGSAG web

Gambar 5.3 menunjukkan antarmuka about yang menonjolkan deskripsi

singkat aplikasi MySIGSAG. Huruf dengan cetak tebal merupakan judul dari

konten paragraf dibawahnya. Kode sumber halaman ini dapat dilihat pada

Lampiran 11 Kode sumber about panel publik MySIGSAG web. Navigasi bar di

bagian atas menyediakan menu utama MySIGSAG mulai dari logo, Home untuk

informasi utama, About untuk deskripsi singkat aplikasi, Download untuk

mengunduh aplikasi MySIGSAG berbasis android, Contact untuk formulir kritik

dan saran seputar aplikasi dan pelayanan, dan login khusus untuk petugas yang

berhak mengelola konten. Footer di bagian bawah terdiri dari info credit di sisi

kiri dan tautan sosial media di sisi kanan seperti facebook, twitter, instagram dan

youtube.

81

5.1.3 Contact

Gambar 5.4 Antarmuka publik contact MySIGSAG web

Gambar 5.4 menunjukkan antarmuka contact menyediakan formulir bagi

visitor untuk mengirimkan pesan penting termasuk kritik dan saran. Formulir

tersebut meliputi field Nama lengkap untuk isian nama pengguna, Email untuk

isian alamat email pengguna, Subject berupa menu pilihan dropdown, Message

untuk isian keterangan kritik dan saran, dan tombol Send untuk mengirimkan

formulir yang telah diisi. Halaman contact ini juga disertai dengan Info address &

contact untuk menuangkan informasi alamat dan kontak instansi terkait dan Map

untuk peta digital dengan marker tertentu yang menerangkan lokasi gedung atau

kantor instansi terkait. Kode sumber halaman ini dapat dilihat pada Lampiran 12

Kode sumber contact panel publik MySIGSAG web. Navigasi bar di bagian atas

menyediakan menu utama MySIGSAG mulai dari logo, Home untuk informasi

utama, About untuk deskripsi singkat aplikasi, Download untuk mengunduh

aplikasi MySIGSAG berbasis android, Contact untuk formulir kritik dan saran

seputar aplikasi dan pelayanan, dan login khusus untuk petugas yang berhak

mengelola konten. Footer di bagian bawah terdiri dari info credit di sisi kiri dan

tautan sosial media di sisi kanan seperti facebook, twitter, instagram dan youtube.

82

5.1.4 Splash Screen

Gambar 5.5 Antarmuka splash screen MySIGSAG android

Gambar 5.5 menunjukkan antarmuka splash screen yaitu tampilan pertama

atau pembuka program yang muncul sebelum masuk ke menu utama. Antarmuka

ini terdiri dari tombol SSO (Single Sign On) google, artinya pengguna harus

memiliki akun google untuk dapat mengoperasikan aplikasi ini. Selain itu terdapat

animasi background seolah sedang “On the Way (OTW)” dan logo utama apliksi,

ini hanya untuk menambah nilai estetika dimata pengguna. Kode sumber bagian

ini dapat dilihat pada Lampiran 14 Kode sumber splash screen.

Sebelum dapat mengintegrasikan Google Sign-In di aplikasi MySIGSAG,

perlu terlebih dahulu mengonfigurasi proyek Google API Console dan

menyiapkan proyek Android Studio.

Agar dapat masuk dengan Google ke aplikasi MySIGSAG android perlu

persyaratan berikut.

1. Perangkat Android kompatibel menjalankan OS Android 4.0 atau yang lebih

baru dan menyertakan Google Play Store atau emulator dengan AVD yang

menjalankan platform Google API berbasis Android 4.2.2 atau yang lebih

baru dan memiliki layanan Google Play versi 15.0.0 atau yang lebih baru.

2. Android SDK versi terbaru, termasuk komponen pendukungnya. SDK ini

tersedia di Android SDK Manager dalam Android Studio.

83

3. Sebuah proyek dikonfigurasi minimal dengan kompilasi Android 4.0 (Ice

Cream Sandwich) atau yang lebih baru.

4. Google Play services SDK diperoleh dengan cara membuka Android Studio,

pilih Tools > Android > SDK Manager. Lalu scroll ke bawah hingga

mendapati Extras > Google Repository. Package tersebut akan terunduh

dan terpasang di SDK environment, tepatnya android-sdk-

folder/extras/google/google_play_services.

Gambar 5.6 Menyertakan google's maven repository

Gambar 5.6 menunjukkan cara memastikan file build.gradle level teratas

terdapat Google's Maven repository, ditandai dengan highlight kotak merah pada

baris 21. Repository ini menyediakan pustaka yang diperlukan untuk membangun

tombol SSO (Single Sign On).

Gambar 5.7 Menyertakan dependensi google play services auth

84

Gambar 5.7 menunjukkan cara memastikan file build.gradle level aplikasi

terdapat deklarasi repository google play services auth sebagai dependensi.

Alamat repository tersebut ditunjukkan dalam kotak merah. Repository ini juga

diperlukan untuk membangun tombol SSO (Single Sign On).

Gambar 5.8 Konfigurasi google sign-in for android

Gambar 5.8 menunjukkan dokumentasi untuk memulai langkah konfigurasi

project SingleSignOn pada google developer console dengan cara mengikuti

petunjuk dokumentasi google android single sign in yang ada di tautan berikut

https://developers.google.com/identity/sign-in/android/start-integrating.

Gambar 5.9 Konfigurasi OAuth client

85

Gambar 5.9 menunjukkan dialog konfigurasi Oauth client yang tampil

setelah meng-klik CONFIGURE A PROJECT pada Gambar 5.8, selanjutnya →

pilih nama project yang telah dibuat sebelumnya SingleSignOn sebagaimana

ditunjukkan pada Gambar 4.2 Membuat project google cloud console, NEXT →

ketik product name MySIGSAG → pilih Android, untuk cakupan penggunaan,

sebagaimana ditunjukkan pada Gambar 5.9 Konfigurasi OAuth client → copy-

paste nama package project android dan SHA-1 certificate, sebagaimana

ditunjukkan pada Gambar 5.10 Mendapatkan nama package project android dan

Gambar 5.11 Mendapatkan SHA1 certificate.

Gambar 5.10 Mendapatkan nama package project android

Gambar 5.10 menunjukkan bagaimana cara mendapatkan nama project

android studio yang ditandai dengan garis bawah merah, nama ini diperlukan

untuk memenuhi syarat isian pada dialog konfigurasi Oauth client sebagaimana

ditunjukkan pada Gambar 5.9.

86

Gambar 5.11 Mendapatkan SHA1 certificate

Gambar 5.11 menunjukkan bagaimana cara mendapatkan SHA1 certificate

project android studio yang ditandai dengan garis bawah merah. SENSOR pada

kode SHA1 certificate ini mengindikasikan bahwa bagian ini bersifat sensitif atau

rahasia atau privat. Nama ini diperlukan untuk memenuhi syarat isian pada dialog

konfigurasi Oauth client sebagaimana ditunjukkan pada Gambar 5.9.

Gambar 5.12 Download client configuration

87

Gambar 5.12 menunjukkan dialog untuk download file json konfigurasi

dengan cara menekan tombol DOWNLOAD CLIENT CONFIGURATION.

SENSOR pada gambar mengindikasikan bahwa Client ID dan Client Secret

bersifat sensitif atau rahasia atau privat.

Gambar 5.13 Memasang file credential.json ke project android studio

Gambar 5.13 menunjukkan lokasi direktori project android studio dimana

file credential.json harus diletakkan. Pada Gambar 5.13 terdapat keterangan

langkah berupa text dan angka yang menunjukkan urutan menelusuri hirarki

direktori. Singkatnya adalah copy-paste file credential.json ke folder app level

project, rename file json adalah kebebasan.

88

5.1.5 Halaman Utama

Gambar 5.14 Antarmuka halaman utama MySIGSAG android

Gambar 5.14 menunjukkan antarmuka halaman utama MySIGSAG android.

Halaman ini terdiri dari tombol LAPOR untuk pergi ke formulir lapor. Tombol

CEK MAP untuk mengetahui informasi dengan visualisasi diatas peta. Tombol

CEK CHART untuk mengetahui informasi dengan visualisasi pie chart. Tombol

INFO mengetahui petunjuk manual penggunaan aplikasi. Halaman ini dilengkapi

dengan identitas pengguna berupa foto, nama dan email. Identitas tersebut diambil

secara otomatis pada saat pengguna berhasil melakukan autentikasi. Tombol

LOGOUT memfasiliasi pengguna apabila ingin menghentikan aktifitas di dalam

aplikasi MySIGSAG android, sehingga mereka dikembalikan ke halaman

splashscreen seperti pada Gambar 5.5.

89

5.1.6 Halaman Lapor

Gambar 5.15 Antarmuka lapor MySIGSAG android

Gambar 5.15 menunjukkan antarmuka halaman Lapor Kasus, diawali

dengan dialog yang mengingatkan pengguna untuk mengaktifkan pengaturan

lokasi. Terdapat dua tombol pada dialog tersebut yaitu Cancel untuk membatalkan

pengaturan dan Location Settings untuk mengarahkan pengguna ke pengaturan

lokasi perangkat smartphone yang digunakan. Mengakses halaman lapor perlu

mengaktifkan terlebih dahulu pengaturan lokasi perangkat android pengguna

entah itu GPS, Network atau keduanya. Jika keduanya belum aktif maka akan

ditampilkan alert dialog yang mengarahkan pengguna ke pengaturan tersebut.

Jika pengguna membatalkan pengaturan lokasi, maka form validation berlaku.

Kode sumber bagian ini dapat dilihat pada Lampiran 17 Kode sumber menu lapor.

90

Gambar 5.16 Form validation lapor MySIGSAG android

Gambar 5.16 menunjukkan form validation lapor bekerja, ditandai dengan

peringatan berupa blink text “Belum ada foto !” yang artinya bidang foto harus

dipenuhi, dan tanda seru di lingkaran merah yang ketika diklik akan muncul

pop up keterangan agar mengisi field isian, baik Nama maupun Keterangan.

Sementara kotak merah mengindikasikan bahwa pengaturan lokasi belum

diaktifkan, secara otomatis info Longitude, Latitude dan Address juga kosong atau

berstatus loading. “Lapor Kasus” di navigasi bar bagian atas sebagai judul

halaman. Tombol dengan icon camera untuk mengarahkan pengguna ke aplikasi

foto bawaan smartphone pengguna. Tombol dengan icon segitiga untuk

mengirimkan formulir ke server google services. Field nama untuk isian nama

pengguna. Field keterangan untuk isian deskripsi keluhan pengguna. Longitude

untuk menampilkan informasi garis bujur yang dihasilkan device GPS. Latitude

untuk menampilkan informasi garis lintang yang dihasilkan device GPS. Icon

satelit dan kotak dibawahnya sebagai indikator untuk menampilkan jumlah satelit

yang dapat diakses oleh device GPS perangkat smartphone pengguna.

91

Gambar 5.17 GPS aktif di halaman lapor MySIGSAG android

Gambar 5.17 menunjukkan pengaturan lokasi telah diaktifkan ditandai

dengan indikator satelit berwarna hijau . Saat pengguna mengaktifkan GPS,

maka indikator berwarna hijau disertai dengan jumlah satelit dapat “ditangkap”

dan diakses oleh smartphone pengguna. Aturan main untuk mendapatkan posisi

fix dua dimensi adalah minimal 3 satelit, jika kurang dari 3 maka indikator satelit

berwarna merah sebagaimana ditunjukkan pada Gambar 5.16, dan jika terpenuhi

maka berwarna hijau. Hasilnya adalah berupa informasi alamat (Address) disertai

titik koordinat pada Longitude dan Latitude. “Lapor Kasus” di navigasi bar bagian

atas sebagai judul halaman. Tombol dengan icon camera untuk mengarahkan

pengguna ke aplikasi foto bawaan smartphone pengguna. Tombol dengan icon

segitiga untuk mengirimkan formulir ke server google services. Field nama untuk

isian nama pengguna. Field keterangan untuk isian deskripsi keluhan pengguna.

Longitude untuk menampilkan informasi garis bujur yang dihasilkan device GPS.

Latitude untuk menampilkan informasi garis lintang yang dihasilkan device GPS.

Icon satelit dan kotak dibawahnya sebagai indikator untuk menampilkan jumlah

satelit yang dapat diakses oleh device GPS perangkat smartphone pengguna.

92

Gambar 5.18 Network aktif di halaman lapor MySIGSAG android

Gambar 5.18 menunjukkan pengaturan lokasi telah diaktifkan ditandai

dengan indikator satelit berwarna jingga . Saat pengguna mengaktifkan

Network, maka indikator satelit berwarna jingga disertai dengan tulisan “NET”

yang menerangkan network. Tidak ada maksud lain dalam warna ini kecuali

hanya untuk membedakan dengan GPS provider. Hasilnya adalah berupa

informasi alamat (Address) disertai titik koordinat pada Longitude dan Latitude.

“Lapor Kasus” di navigasi bar bagian atas sebagai judul halaman. Tombol dengan

icon camera untuk mengarahkan pengguna ke aplikasi foto bawaan smartphone

pengguna. Tombol dengan icon segitiga untuk mengirimkan formulir ke server

google services. Field nama untuk isian nama pengguna. Field keterangan untuk

isian deskripsi keluhan pengguna. Longitude untuk menampilkan informasi garis

bujur yang dihasilkan device Network Provider. Latitude untuk menampilkan

informasi garis lintang yang dihasilkan device Network Provider. Icon satelit dan

kotak dibawahnya sebagai indikator untuk menampilkan status pengaturan lokasi

sebagai “NET” artinya Network Provider.

93

5.1.7 Halaman Cek Map

Gambar 5.19 Halaman map MySIGSAG android

Gambar 5.19 menunjukkan antarmuka halaman Pantau Kasus yang

menonjolkan informasi titik-titik kerusakan, dipresentasikan dalam bentuk marker

diatas peta digital. Info window titik tersebut dapat diketahui pengguna dengan

cara mengklik tiap marker yang dikehendaki. “Pantau Kasus” di navigasi bar

bagian atas sebagai judul halaman. Tombol Map dan Satellite di pojok kiri atas

digunakan untuk merubah mode tampilan peta digital, mode map peta untuk

tampilan vector atau mode satellite untuk tampilan citra satellite atau potret real

satellite. Marker berwarna merah menandakan bahwa kasus atau titik keluhan atau

titik kerusakan belum teratasi atau belum tersentuh oleh pemerintah kota Jogja.

Marker berwarna kuning menandakan bahwa kasus atau titik keluhan atau titik

kerusakan dalam proses perbaikan atau pengerjaan oleh pemerintah kota Jogja.

Marker berwarna hijau menandakan bahwa kasus atau titik keluhan atau titik

kerusakan sudah “beres” atau “tuntas” ditangani oleh pemerintah kota Jogja,

sehingga layak dioperasikan kembali. Tombol (+) dan (-) di pojok kanan bawah

digunakan untuk zoom in (memperdekat) dan zoom out (memperjauh) tampilan

peta. Kode sumber bagian ini dapat dilihat pada Lampiran 27 Kode sumber menu

cek map.

94

5.1.8 Halaman Cek Chart

Gambar 5.20 Halaman chart MySIGSAG android

Gambar 5.20 menunjukkan antarmuka halaman Analisa Kasus yang

menonjolkan informasi berupa pie chart untuk ringkasan kalkulasi titik lokasi

keluhan dalam prosentase. Indikator hijau di bawah title bar menandakan bahwa

aplikasi terhubung dengan jaringan internet, sehingga informasi dapat

ditampilkan. “Analisa Kasus” di navigasi bar bagian atas sebagai judul halaman.

Pie chart tersebut dapat tampil dengan cara menyentuh pusat lingkaran berkali-

kali hingga mendapat response. Hasilnya berupa pie chart dengan tiga potongan

dilengkapi dengan status dan nilai prosentasenya. Potongan berwarna merah

menandakan bahwa kasus atau titik keluhan atau titik kerusakan belum teratasi

atau belum tersentuh oleh pemerintah kota Jogja. Potongan berwarna kuning

menandakan bahwa kasus atau titik keluhan atau titik kerusakan dalam proses

perbaikan atau pengerjaan oleh pemerintah kota Jogja. Potongan berwarna hijau

menandakan bahwa kasus atau titik keluhan atau titik kerusakan sudah “beres”

atau “tuntas” ditangani oleh pemerintah kota Jogja. Description label paling

bawah menerangkan warna dengan statusnya. Kode sumber bagian ini dapat

dilihat pada Lampiran 28 Kode sumber menu cek chart.

95

5.1.9 Halaman Info

Gambar 5.21 Halaman info MySIGSAG android

Gambar 5.21 menunjukkan antarmuka Info, “Tentang Aku” di navigasi bar

bagian atas sebagai judul halaman. Antarmuka ini bersifat statis berupa file

tunggal html, menonjolkan informasi latar belakang aplikasi MySIGSAG dan

petunjuk praktis penggunaan aplikasi. Konten dengan huruf cetak tebal berukuran

besar menandakan judul dari paragraf-paragraf di bawahnya. Sementara itu, kode

sumber bagian ini dapat dilihat pada Lampiran 33 Kode sumber menu info.

5.2 Panel Admin

Gambar 5.22 Antarmuka login MySIGSAG web

96

Gambar 5.22 menunjukkan antarmuka panel admin, disediakan bagi

pengguna yang mempunyai otoritas untuk mengelola konten MySIGSAG.

Antarmuka ini terdiri dari logo aplikasi, formulir login, dan tautan lupa password.

Formulir login meliputi field Email address untuk isian alamat email akun

petugas, field Password untuk isian password akun petugas, Remember me untuk

menyimpan session autentikasi akun petugas di aplikasi browser yang sedang

digunakan. Tautan Forgot your password memfasilitasi petugas jika terjadi lupa

password. Tautan tersebut mengarahkan petugas ke formulir isian alamat email

aktif, guna mengirimkan tautan lanjutan yang mengarahkan petugas ke formulir

untuk membuat password baru. Sementara itu, kode sumber bagian ini dapat

dilihat pada Lampiran 34 Kode sumber login admin.

Gambar 5.23 Antarmuka dashboard admin MySIGSAG web

Gambar 5.23 menunjukkan antarmuka dashboard admin yang dapat diakses

jika petugas sukses melakukan autentikasi. Antarmuka ini terdiri dari Judul dan

deskripsi aplikasi di sebelah pojok kiri atas. Tombol Logout dibawahnya untuk

keluar dari antarmuka ini. Formulir olah data di pojok kanan atas terdiri dari kotak

kecil paling kiri untuk primary key data, kotak sebelah kanannya adalah menu

dropdown untuk pilihan status keluhan, kotak paling besar untuk isian keterangan

97

atau feedback dari petugas terhadap keluhan terkait, tombol Read untuk

menampilkan informasi keluhan dalam tabel, tombol Update untuk melakukan

perubahan data keluhan, tombol Delete untuk menghapus data keluhan. Tabel

menunjukkan seluruh data keluhan yang diterima. Pie chart ini sama dengan yang

ada di Gambar 5.1, termasuk penjelasannya. DOWNLOAD sebagai link tautan

untuk download laporan keluhan dalam format file *.xlsx, dan footer untuk

informasi credit.

Dashboard admin memungkinkan petugas melakukan aktivitas seperti

membaca laporan dengan tombol Read, meninjau laporan dengan tombol Update,

menghapus laporan dengan tombol Delete, mengunduh laporan dalam format

excel menggunakan tautan DOWNLOAD yang berada di footer. Tombol eksekusi

di kolom options memudahkan administrator menyeleksi id laporan, sehingga

tidak perlu secara manual menginputkan id ke formulir, disamping field id dibuat

read-only untuk meminimalisir human error. Dropdown menu di samping field id

merupakan upaya standarisasi input status kasus. Tombol Logout untuk keluar

dari panel admin. Kode sumber bagian ini dapat dilihat pada Lampiran 35 Kode

sumber dashboard admin.

98

BAB VI

PENUTUP

6.1 Kesimpulan

Berdasarkan studi kasus Unit Pelayanan Informasi dan Keluhan (UPIK)

kota Yogyakarta, maka kesimpulan yang dapat diambil dalam penelitian ini

adalah.

1. Tercapainya pembuatan prototype sistem informasi geografis berbasis web

dengan nama MySIGSAG yang dapat menyajikan informasi keluhan

masyarakat Jogja secara komprehensif, dan dapat diakses melalui laman

https://sig.bundet.com.

2. Tercapainya pembuatan prototype sistem informasi geografis berbasis

android dengan nama MySIGSAG yang dapat menyajikan informasi

keluhan masyarakat Jogja secara komprehensif, sekaligus memfasilitasi

masyarakat Jogja untuk mengutarakan keluhannya, dan dapat “diunduh”

melalui laman https://sig.bundet.com → menu Download.

6.2 Saran

Saran yang dapat diberikan peneliti untuk pengembangan prototype

MySIGSAG ke versi berikutnya adalah.

1. Menambahkan fitur penelusuran dari titik saat ini ke titik tujuan (tracking)

pada halaman cek map.

2. Menambahkan fitur push notifications saat terjadi perubahan informasi baik

berupa respon administrator atau laporan baru dari pengguna lain

menggunakan teknologi Firebase.

3. Membuat informasi map dan chart menjadi realtime.

4. Menambahkan fitur sosial media untuk diskusi intens seputar keluhan lalu

lintas dan angkutan jalan.

99

DAFTAR PUSTAKA

Abdullah, R., 2015. Web Programming is Easy, PT. Elex Media Komputindo,

Jakarta.

Ahmadi, C., and Hermawan, D., 2013. E-Business & E-Commerce, Andi,

Yogyakarta.

Ekawati, R. and Suharjito, 2016. API Fusion Tables and Google Maps Integration

for GIS Thematic Mapping Visualization. International Journal of Software

Engineering and its Applications, 10 (2), 77–92.

Ferreira, J., 2014. Google Apps Script. 2nd ed. Sebastopol: O’Reilly Media, Inc.

Hamidi, 2011. Aplikasi Sistem Informasi Geografis Berbasis Web Penyebaran

Dana Bantuan Operasional Sekolah. Jurnal Masyarakat Informatika, 2 (3),

1–14.

Handayani, I., Kusumahati, H., and Badriah, A. N., 2017. Pemanfaatan Google

Spreadsheet Sebagai Media Pembuatan Dashboard pada Official Site

iFacility di Perguruan Tinggi. Jurnal Ilmiah SISFOTENIKA, 7 (2), 177–186.

Haviluddin, 2011. Memahami Penggunaan UML (Unified Modelling Language).

Jurnal Informatika Mulawarman, 6 (1), 1–15.

John, W., 2017. Beginning Android Programming with Android Studio. 1st ed.

Indianapolis: John Wiley & Sons, Inc.

Lestari, P. and Iskandar, E., 2013. Sistem Informasi Geografis Berbasis Web

Untuk Pemetaan Pariwisata Kabupaten Kebumen. Jurnal Teknik Informatika,

STMIK EL RAHMA Yogyakarta, 11 (1), 45–57.

Meier, R., 2010. Professional Android 2

TM

Application Development.

Development. Indiana: Wiley Publishing, Inc.

Mogot, T. F. and Papilaya, F. S., 2013. Perancangan dan Implementasi Website

Sistem Informasi Geografis untuk Monitoring Persebaran Titik Api

Kebakaran Hutan di Kabupaten Kotawaringin Barat Berbasis Google Maps

API. Jurnal Teknik Informatika, Fakutas Teknologi Informasi, Universitas

Kristen Satya Wacana Salatiga, 6–23.

Novita and Kharisma, 2015. Sistem Informasi Geografis Pemetaan Puskesmas

Kabupaten Bantul Menggunakan Algoritma Semut. Jurnal Teknik

Informatika, STMIK EL RAHMA Yogyakarta, 1–16.

Nurfiatun, R. and Winantu, A., 2015. Rancang Bangun Sistem Informasi

Geografis Untuk Mencari Hotel Terdekat Berbasis Web Menggunakan

Metode Generate and Test dan Haversine Formula. Jurnal Teknik

Informatika, STMIK EL RAHMA Yogyakarta, 1–17.

Rahman, M. A., Kuswardayan, I., and Hariadi, R. R., 2013. Perancangan dan

Implementasi RESTful Web Service untuk Game Sosial Food Merchant

Saga pada Perangkat Android. Jurnal Teknik POMITS, 2 (1), 2–5.

Rizki, S. D., Van FC, L. L., and Lisnawita, 2016. Sistem Informasi Geografis

Pemetaan Kandang Perternakan Di Kabupaten Padang Pariaman Berbasis

Android. Jurnal Teknologi Informasi & Komunikasi Digital Zone, 7 (2),

100–107.

Sasmito, G. W., 2017. Penerapan Metode Waterfall Pada Desain Sistem Informasi

100

Geografis Industri Kabupaten Tegal. Jurnal Informatika:Jurnal

Pengembangan IT (JPIT), 2 (1), 6–12.

Satria, A. E. and Brahmana, K., 2005. Pemakaian Modul GPS IR9540 (NMEA)

Untuk Mendapatkan Data Waktu Universal Berbasis Mikrokontroller

ATMega8535. Jurnal Fisika Instrumentasi, FMIPA USU, 6 (1), 1–9.

Sena, S. A., Muttaqin, A., and Setyawan, A., 2013. Perancangan dan Pembuatan

Application Interface Server untuk Arduino. Jurnal Teknik Elektro, Fakultas

Teknik Universitas Brawijaya, 1 (4), 1–6.

Suryani, S., Sasongko, P. S., and Suharto, E., 2011. Sistem Informasi Geografis

Pemetaan Sekolah Tingkat Pendidikan Dasar Dan Menengah Di Kota

Serang. Jurnal Masyarakat Informatika, 2 (3), 39–50.

101

LAMPIRAN

102

Lampiran 1 Source code google apps script

/*

MY SIGSAG MOBILE HERE & Sync Fushion Tables

*/

function doGet(e){

var op = e.parameter.action;

var

ss=SpreadsheetApp.openByUrl("https://docs.google.com/spreadsheets/d/1MPwZdLhRlJNxmGaW_h8Sc

J6wMyZ8uGq8LdXEFfywLes/edit?usp=sharing");

var sheet = ss.getSheetByName("Sheet1");

//Make sure you are sending proper parameters

if(op=="read")

return read_value(e,ss);

if(op=="update")

return update_value(e,sheet);

if(op=="delete")

return delete_value(e,sheet);

//Kondisi Milik SIGSAG MOBILE

if(op=="insert")

return insert_value(e);

if(op=="readAll")

return read_all_value(e);

//Kondisi Milik SIGSAG MOBILE END

}

function doPost(e) {

var op = e.parameter.action;

if(op=="insert")

return insert_value(e);

if(op=="readAll")

return read_all_value(e);

}

var SCRIPT_PROP = PropertiesService.getScriptProperties();

// see: https://developers.google.com/apps-script/reference/properties/

/**

* select the sheet

*/

function setup() {

var doc = SpreadsheetApp.getActiveSpreadsheet();

SCRIPT_PROP.setProperty("key", doc.getId());

}

function insert_value(e) {

var doc = SpreadsheetApp.openById(SCRIPT_PROP.getProperty("key"));

var sheet = doc.getSheetByName('sheet1'); // select the responses sheet

var rowse = sheet.getDataRange().getNumRows();

var rowtme = new Date().getTime();

var uId = "'"+rowse+rowtme;

var uTime = Date();

var uEmail = e.parameter.uEmail;

var uNama= e.parameter.uNama;

var uDeskripsi= e.parameter.uDeskripsi;

var uImage = e.parameter.uImage;

var uLongitude= e.parameter.uLongitude;

var uLatitude= e.parameter.uLatitude;

var uMarking = '=IF(J:J = "rusak";"x";IF(J:J = "perbaikan";"pause";IF(J:J =

103

Lampiran 2 Lanjutan

"beres";"go";"")))';

var uStatus = 'rusak';

var dropbox = "USERS IMAGE";

var folder, folders = DriveApp.getFoldersByName(dropbox);

if (folders.hasNext()) {

folder = folders.next();

} else {

folder = DriveApp.createFolder(dropbox);

}

var fileName = uEmail+uNama+"profile_pic.jpg";

var contentType = "image/jpg",

bytes = Utilities.base64Decode(uImage),

blob = Utilities.newBlob(bytes, contentType,fileName);

var file = folder.createFile(blob);

file.setSharing(DriveApp.Access.ANYONE_WITH_LINK,DriveApp.Permission.VIEW);

var fileId=file.getId();

var fileUrl = "<img src='https://drive.google.com/uc?export=view&id="+fileId+"'/>";

sheet.appendRow([fileId,uTime,uEmail,uNama,uDeskripsi,fileUrl,uLongitude,uLatitude,uMarkin

g,uStatus,""]);

sync();

return

ContentService.createTextOutput("Success").setMimeType(ContentService.MimeType.JAVASCRIPT)

;

}

function read_all_value(request){

var ss =SpreadsheetApp.openById(SCRIPT_PROP.getProperty("key"));

var output = ContentService.createTextOutput(),

data = {};

//Note : here sheet is sheet name , don't get confuse with other operation

var sheet="sheet1";

data.records = readData_(ss, sheet);

var callback = request.parameters.callback;

if (callback === undefined) {

output.setContent(JSON.stringify(data));

} else {

output.setContent(callback + "(" + JSON.stringify(data) + ")");

}

output.setMimeType(ContentService.MimeType.JAVASCRIPT);

return output;

}

function readData_(ss, sheetname, properties) {

if (typeof properties == "undefined") {

properties = getHeaderRow_(ss, sheetname);

properties = properties.map(function(p) { return p.replace(/\s+/g, '_'); });

}

104

Lampiran 3 Lanjutan

var rows = getDataRows_(ss, sheetname),

data = [];

for (var r = 0, l = rows.length; r < l; r++) {

var row = rows[r],

record = {};

for (var p in properties) {

record[properties[p]] = row[p];

}

data.push(record);

}

return data;

}

function getDataRows_(ss, sheetname) {

var sh = ss.getSheetByName(sheetname);

return sh.getRange(2, 1, sh.getLastRow() - 1, sh.getLastColumn()).getValues();

}

function getHeaderRow_(ss, sheetname) {

var sh = ss.getSheetByName(sheetname);

return sh.getRange(1, 1, 1, sh.getLastColumn()).getValues()[0];

}

function onEdit() {

var s = SpreadsheetApp.getActiveSheet();

if( s.getName() == "Sheet1" ) { //checks that we're on the correct sheet

var r = s.getActiveCell();

if( r.getColumn() == 2 ) { //checks the column

var nextCell = r.offset(0, -1);

if( nextCell.getValue() === '' ) //is empty?

nextCell.setValue(new Date());

}

sync();

}

/**

* appsscript script to run in a google spreadsheet that synchronizes its

* contents with a fusion table by replacing all rows.

* based on instructions here:

* https://htmlpreview.github.io/?https://github.com/fusiontable-gallery/fusion-tables-

api-

samples/blob/master/FusionTablesSheetSync/docs/reference.html#enabling_advanced_services

*/

// replace with your fusion table's id (from File > About this table)

var TABLE_ID = '1JL8RSd1GYzqr8sd4ErEsIiPx0sbnNog7eNoeKqTv';

// first row that has data, as opposed to header information

var FIRST_DATA_ROW = 2;

// true means the spreadsheet and table must have the same column count

var REQUIRE_SAME_COLUMNS = false;

105

Lampiran 4 Lanjutan

/**

* replaces all rows in the fusion table identified by TABLE_ID with the

* current sheet's data, starting at FIRST_DATA_ROW.

*/

function sync() {

var tasks = FusionTables.Task.list(TABLE_ID);

// Only run if there are no outstanding deletions or schema changes.

if (tasks.totalItems === 0) {

var sheet = SpreadsheetApp.getActiveSheet();

var wholeSheet = sheet.getRange(1, 1, sheet.getLastRow(), sheet.getLastColumn());

var values = wholeSheet.getValues();

if (values.length > 1) {

var csvBlob = Utilities.newBlob(convertToCsv_(values), 'application/octet-

stream');

FusionTables.Table.replaceRows(TABLE_ID, csvBlob, { isStrict:

REQUIRE_SAME_COLUMNS, startLine: FIRST_DATA_ROW - 1 });

Browser.msgBox('Replaced ' + values.length + ' rows in your Fusion Table',

Browser.Buttons.OK);

}

} else {

Logger.log('Skipping row replacement because of ' + tasks.totalItems + ' active

background task(s)');

}

};

/**

* converts the spreadsheet values to a csv string.

* @param {array} data the spreadsheet values.

* @return {string} the csv string.

*/

function convertToCsv_(data) {

// See https://developers.google.com/apps-script/articles/docslist_tutorial#section3

var csv = '';

for (var row = 0; row < data.length; row++) {

for (var col = 0; col < data[row].length; col++) {

var value = data[row][col].toString();

if (value.indexOf(',') != -1 ||

value.indexOf('\n') != -1 ||

value.indexOf('"') != -1) {

// Double-quote values with commas, double quotes, or newlines

value = '"' + value.replace(/"/g, '""') + '"';

data[row][col] = value;

}

};

// Join each row's columns and add a carriage return to end of each row except the

last

if (row < data.length - 1) {

csv += data[row].join(',') + '\r\n';

} else {

csv += data[row];

};

return csv;

};

// create menu buttons

function onOpen() {

var ss = SpreadsheetApp.getActiveSpreadsheet();

var menuEntries = [{

name: "Update Fusion Table",

functionName: "sync"

}];

ss.addMenu("Sync Spreadsheet To Fusion Table", menuEntries);

};

//-- MY SIGSAG MOBILE END & Sync Fushion Tables

106

Lampiran 5 Lanjutan

/*

MY SIGSAG WEB

*/

//read all data

function read_value(request,ss){

var output = ContentService.createTextOutput(),

data = {};

//Note : here sheet is sheet name , don't get confuse with other operation

var sheet="sheet1";

data.records = readData_(ss, sheet);

var callback = request.parameters.callback;

if (callback === undefined) {

output.setContent(JSON.stringify(data));

} else {

output.setContent(callback + "(" + JSON.stringify(data) + ")");

}

output.setMimeType(ContentService.MimeType.JAVASCRIPT);

return output;

}

function readData_(ss, sheetname, properties) {

if (typeof properties == "undefined") {

properties = getHeaderRow_(ss, sheetname);

properties = properties.map(function(p) { return p.replace(/\s+/g, '_'); });

}

var rows = getDataRows_(ss, sheetname),

data = [];

for (var r = 0, l = rows.length; r < l; r++) {

var row = rows[r],

record = {};

for (var p in properties) {

record[properties[p]] = row[p];

}

data.push(record);

}

return data;

}

function getDataRows_(ss, sheetname) {

var sh = ss.getSheetByName(sheetname);

return sh.getRange(2, 1, sh.getLastRow() - 1, sh.getLastColumn()).getValues();

}

function getHeaderRow_(ss, sheetname) {

var sh = ss.getSheetByName(sheetname);

return sh.getRange(1, 1, 1, sh.getLastColumn()).getValues()[0];

}

107

Lampiran 6 Lanjutan

//update function

function update_value(request,sheet){

var output = ContentService.createTextOutput();

var uId = request.parameter.id;

var uStatus = request.parameter.status;

var uFeedback = request.parameter.feedback;

var flag=0;

var lr= sheet.getLastRow();

for(var i=1;i<=lr;i++){

var rid = sheet.getRange(i,1).getValue();

if(rid==uId){

sheet.getRange(i,10).setValue(uStatus);

sheet.getRange(i,11).setValue(uFeedback);

var result="value updated successfully";

flag=1;

}

if(flag==0)

var result="id not found";

result = JSON.stringify({

"result": result

});

sync();

return ContentService

.createTextOutput(request.parameter.callback + "(" + result + ")")

.setMimeType(ContentService.MimeType.JAVASCRIPT);

}

function delete_value(request,sheet){

var output = ContentService.createTextOutput();

var uId = request.parameter.id;

// var uStatus = request.parameter.status;

// var uFeedback = request.parameter.feedback;

var flag=0;

var lr= sheet.getLastRow();

for(var i=1;i<=lr;i++){

var rid = sheet.getRange(i,1).getValue();

if(rid==uId){

sheet.deleteRow(i);

// my method delete image here by wawan_beneran

DriveApp.getFileById(rid).setTrashed(true);

//end

var result="value deleted successfully";

flag=1;

}

if(flag==0)

var result="id not found";

result = JSON.stringify({

"result": result

});

sync();

return ContentService

.createTextOutput(request.parameter.callback + "(" + result + ")")

.setMimeType(ContentService.MimeType.JAVASCRIPT);

}

//-- MY SIGSAG WEB END

108

Lampiran 7 Kode sumber header panel publik MySIGSAG web

<!DOCTYPE html>

<head>

<!-- The above 3 meta tags *must* come first in the head; any other head content must

come *after* these tags -->

awesome.min.css" rel="stylesheet">

rel="stylesheet">

<script

src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

markdown.js"></script>

markdown/js/markdown.js"></script>

<script

src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<script

src="//rawgit.com/jeresig/jquery.hotkeys/master/jquery.hotkeys.js"></script>

</head>

<body>

<div class="container"> <!-- /.Membungkus navbar dengan Container agar tidak terlalu

mepet pinggir -->

<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-

target="#bs-example-navbar-collapse-1" aria-expanded="false">

</button>

<img alt="Brand" src="<?=base_url()?>assets/img/sigsagweb.png">

</a>

</div>

<li class="tentang"><a href="<?=base_url()?>Cmap/tentang">About</a></li>

<li><a

href="https://docs.google.com/uc?export=download&id=1mB1XEaPgnGJCyWYDmN7TBLAnbaWpHO7V">Dow

nload</a></li>

<li class="kontak"><a href="<?=base_url()?>Cmap/kontak">Contact</a></li>

</ul>

<li><a href="<?=base_url()?>auth/login">Are you an admin? <span

class="glyphicon glyphicon-hand-right"></span> Login</a></li>

</ul>

</div>

</div>

</nav>

109

Lampiran 8 Kode sumber home panel publik MySIGSAG web

<?php

$this->load->view('user/header');

br(4);

?>

<title>MySIGSAG Skripsi 2018</title>

<style>

/* Always set the map height explicitly to define the size of the div

* element that contains the map. */

#map {

height: 89%;

}

/* Optional: Makes the sample page fill the window. */

html, body {

height: 100%;

margin: 0;

padding: 0;

}

</style>

</head>

<body>

function initMap() {

var map = new google.maps.Map(document.getElementById('map'), {

center: {lat: -7.79972646820099, lng: 110.38506161308284},

zoom: 12

});

var layer = new google.maps.FusionTablesLayer({

query: {

select: 'col7',

from: '1JL8RSd1GYzqr8sd4ErEsIiPx0sbnNog7eNoeKqTv',

where:''

},

location: {

enabled: true

},

options: {

styleId: 2,

templateId: 3

}

});

layer.setMap(map);

}

google.maps.event.addDomListener(window, 'load', initMap);

</script>

<script async defer

src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBQpM2AB1uzOtgZZyWfQiBk9YIswi46xjE&c

allback=initMap">

</script>

<style>

body {

font-family: "Lato", sans-serif;

}

.sidenav {

height: 50%;

width: 0;

position: fixed;

z-index: 1;

top: 150px;

left: -35px;

background-color: #ffffff;

overflow-x: hidden;

transition: 0.5s;

}

110

Lampiran 9 Lanjutan

.sidenav a {

padding: 8px 8px 8px 32px;

text-decoration: none;

font-size: 25px;

color: black;

display: block;

transition: 0.3s;

}

.sidenav a:hover {

color: black;

}

.sidenav .closebtn {

position: absolute;

top: -5px;

right: 10px;

font-size: 36px;

margin-left: 50px;

}

@media screen and (max-height: 250px) {

.sidenav {padding-top: 15px;}

.sidenav a {font-size: 18px;}

}

.icon-bar {

position: fixed;

top: 50%;

-webkit-transform: translateY(-50%);

-ms-transform: translateY(-50%);

transform: translateY(-50%);

}

.icon-bar a {

display: block;

text-align: center;

padding: 7px;

transition: all 0.3s ease;

color: white;

font-size: 20px;

}

.icon-bar a:hover {

background-color: #000;

}

.youtube {

background: black;

color: white;

}

.content {

margin-left: 75px;

font-size: 30px;

}

111

Lampiran 10 Lanjutan

</style>

src="https://fusiontables.google.com/embedviz?containerId=googft-gviz-

canvas&q=select+col9%2C+count()+from+1JL8RSd1GYzqr8sd4ErEsIiPx0sbnNog7eNoeKqTv+group+b

y+col9+order+by+col9+asc+limit+3&viz=GVIZ&t=PIE&uiversion=2&gco_forceIFram

e=true&gco_hasLabelsColumn=true&gco_useFirstColumnAsDomain=true&gco_legacyScat

terChartLabels=true&gco_is3D=false&gco_pieHole=0.25&gco_booleanRole=certainty&

amp;gco_hAxis=%7B%22useFormatFromData%22%3Atrue%2C+%22viewWindow%22%3A%7B%22max%22%3Anull%

2C+%22min%22%3Anull%7D%2C+%22minValue%22%3Anull%2C+%22maxValue%22%3Anull%7D&gco_vAxes=

%5B%7B%22useFormatFromData%22%3Atrue%2C+%22viewWindow%22%3A%7B%22max%22%3Anull%2C+%22min%2

2%3Anull%7D%2C+%22minValue%22%3Anull%2C+%22maxValue%22%3Anull%7D%2C%7B%22useFormatFromData

%22%3Atrue%2C+%22viewWindow%22%3A%7B%22max%22%3Anull%2C+%22min%22%3Anull%7D%2C+%22minValue

%22%3Anull%2C+%22maxValue%22%3Anull%7D%5D&gco_slices=%7B%220%22%3A%7B%22color%22%3A%22

%2338761d%22%7D%2C+%221%22%3A%7B%22color%22%3A%22%23ff9900%22%7D%2C+%222%22%3A%7B%22color%

22%3A%22%23dc3912%22%7D%7D&gco_legend=bottom&gco_backgroundColor=%7B%22fill%22%3A%

22%23ffffff%22%7D&gco_pieSliceBorderColor=%23ffffff&width=300&height=300"></if

rame>

</div>

var refreshId = setInterval(function()

{

//var txt;

var r = confirm("Mau reload page untuk update content?");

if (r == true) {

location.reload(true);

// txt = "You pressed OK!";

} else {

alert("Ok makasih, Anda juga dapat zoom-in zoom-out untuk mengetahui

perubahannya");

}

//document.getElementById("demo").innerHTML = txt;

//initMap();

//$('#map').fadeOut("slow").load('#map').fadeIn("slow");

//$('#chart').fadeOut("slow").load('#mySidenav').fadeIn("slow");

}, 120000);

function openNav() {

document.getElementById("mySidenav").style.width = "280px";

}

function closeNav() {

document.getElementById("mySidenav").style.width = "0";

}

document.getElementById("mySidenav").style.width = "280px";

$(document).ready(function () {

$('.home').addClass('active');

});

</script>

</div>

<?php

$this->load->view('user/footer');

?>

112

Lampiran 11 Kode sumber about panel publik MySIGSAG web

<?php

$this->load->view('user/header');

br(4);

?>

<title>Tentang MySIGSAG</title>

<p>MySIGSAG adalah aplikasi dengan nama singkatan dari Sistem Informasi Geografis Salam

Aspal Gronjal terinspirasi oleh teman yang sekarang sudah resmi menjadi saudara yang

pernah kecelakaan akibat jalan berlubang dan grup FB paling gaduh sejagat maya yaitu ICJ

(Info Cegatan Jogja).</p>

<h1>Apa yang aku petakan?</h1>

<p>Saat ini, aplikasi ini masih fokus pada keluhan Lalu Lintas dan Angkutan Jalan untuk

area kota Yogyakarta dan sekitarnya sebagai strategi untuk melakukan pendekatan terhadap

relevansi, kebutuhan dan kelayakan sistem dengan mengacu pada ruang keadaan (state space),

perkembangan teknologi dan infrastruktur yang paling sering digunakan masyarakat.</p>

<br>

<p>Berdasarkan UU RI No.22 Tahun 2009 Bab 1 Pasal 1 Tentang Lalu Lintas dan Angkutan Jalan

menerangkan bahwa Lalu Lintas dan Angkutan Jalan adalah satu kesatuan sistem yang terdiri

atas Lalu Lintas, Angkutan Jalan, Jaringan Lalu Lintas dan Angkutan Jalan, Prasarana Lalu

Lintas dan Angkutan Jalan, Kendaraan, Pengemudi, Pengguna Jalan, serta pengelolaannya.</p>

</div>

$(document).ready(function () {

$('.tentang').addClass('active');

});

</script>

<?php

$this->load->view('user/footer');

?>

113

Lampiran 12 Kode sumber contact panel publik MySIGSAG web

<?php

$this->load->view('user/header');?>

<title>Kontak Kami</title>

input#counter,input#ncounter,input#ecounter {

border: none;

background-color: transparent;

margin-left: 3px;

}

h4{

margin-bottom: 7px;

}

.footer{

bottom:0px;

}

</style>

<?=$this->session->flashdata('pesan')?>

<form action="<?=base_url()?>cmap/sendmail" method="POST">

Name</label>

<input onkeyup="nameCounter(this,'ncounter',100);" name="nama"

type="text" class="form-control" id="name" placeholder="Enter name" required="required" />

</div>

Email Address</label>

<span class="input-group-addon"><span class="glyphicon

glyphicon-envelope"></span>

</span>

<input onkeyup="nameCounter(this,'ecounter',100);"

name="email" type="email" class="form-control" id="email" placeholder="Enter email"

required="required" /></div>

<input disabled maxlength="3"

size="3" value="100" id="ecounter">

</div>

Subject</label>

<select id="subject" name="subject" class="form-control"

required="required">

<option value="na" selected="">Choose One:</option>

<option value="Service">General Customer Service</option>

<option value="Suggestions">Suggestions</option>

<option value="Product">Product Support</option>

</select>

</div>

Message</label>

<textarea onkeyup="textCounter(this,'counter',500);"

name="message" id="message" class="form-control" rows="9" cols="25" required="required"

placeholder="Message"></textarea>

<input disabled maxlength="3"

size="3" value="500" id="counter"> </div> </div>

114

Lampiran 13 Lanjutan

<button type="submit" class="btn btn-primary pull-right" id="btnContactUs"> Send

Message</button> </div> </div> </form> </div> </div>

<iframe

src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3323.979356366026!2d110.3893936

4200229!3d-

7.800421552759382!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2e7a57635797a4df%3A0

x7218aa0670073b6b!2sJl.+Kenari+No.56%2C+Muja+Muju%2C+Umbulharjo%2C+Kota+Yogyakarta%2C+Daer

ah+Istimewa+Yogyakarta+55165!5e0!3m2!1sen!2sid!4v1527238242899" width="360" height="355"

frameborder="0" style="border:0" allowfullscreen></iframe>

</form>

</div>

<hr>

<?php

if(empty($array_emp)){

echo "Jl. Kenari 56 Yogyakarta 55165

Telp. +62 274 514448, 515865, 515866 Fax +62 274 520332";

}else{

foreach($array_emp as $d):

echo $d->isi;

endforeach;

}

?>

</center>

</div>

function textCounter(field,field2,maxlimit)

{

var countfield = document.getElementById(field2);

if ( field.value.length > maxlimit ) {

field.value = field.value.substring( 0, maxlimit );

return false;

} else {

countfield.value = maxlimit - field.value.length;

}

function nameCounter(field,field2,maxlimit)

{

var countfield = document.getElementById(field2);

if ( field.value.length > maxlimit ) {

field.value = field.value.substring( 0, maxlimit );

return false;

} else {

countfield.value = maxlimit - field.value.length;

}

function emailCounter(field,field2,maxlimit)

{

var countfield = document.getElementById(field2);

if ( field.value.length > maxlimit ) {

field.value = field.value.substring( 0, maxlimit );

return false;

} else {

countfield.value = maxlimit - field.value.length;

}

</script>

$(document).ready(function () {

$('.kontak').addClass('active');

});

</script>

<?php $this->load->view('user/footer'); ?>

115

Lampiran 14 Kode sumber splash screen

package com.gatewan.mysigsag;

import android.app.ProgressDialog;

import android.content.Intent;

import android.graphics.drawable.AnimationDrawable;

import android.os.Bundle;

import android.support.annotation.NonNull;

import android.support.constraint.ConstraintLayout;

import android.support.v7.app.AppCompatActivity;

import android.view.View;

import android.widget.Button;

import android.widget.ImageView;

import android.widget.LinearLayout;

import android.widget.TextView;

import com.bumptech.glide.Glide;

import com.google.android.gms.auth.api.Auth;

import com.google.android.gms.auth.api.signin.GoogleSignInAccount;

import com.google.android.gms.auth.api.signin.GoogleSignInOptions;

import com.google.android.gms.auth.api.signin.GoogleSignInResult;

import com.google.android.gms.common.ConnectionResult;

import com.google.android.gms.common.api.GoogleApiClient;

import com.google.android.gms.common.api.ResultCallback;

import com.google.android.gms.common.api.Status;

import com.shobhitpuri.custombuttons.GoogleSignInButton;

public class MainActivity extends AppCompatActivity implements View.OnClickListener,

GoogleApiClient.OnConnectionFailedListener{

private LinearLayout Prof_Section;

private Button SignOut, About, Lapor, CekMap, CekGraph;

private GoogleSignInButton SignIn;

private TextView Name,Email,Intro;

private ImageView Prof_Pic,Logo;

private GoogleApiClient googleApiClient;

private static final int REQ_CODE = 9001;

private ConstraintLayout constraintLayout;

private AnimationDrawable animationDrawable;

private ProgressDialog progress;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.main_activity);

progress = new ProgressDialog(this);

Prof_Section = findViewById(R.id.prof_section);

SignOut = findViewById(R.id.logout);

SignIn = findViewById(R.id.login);

Name = findViewById(R.id.name);

Email= findViewById(R.id.email);

Intro = findViewById(R.id.intro);

Logo = findViewById(R.id.logo);

Prof_Pic = findViewById(R.id.prof_photo);

Lapor = findViewById(R.id.lapor);

CekMap = findViewById(R.id.map);

CekGraph = findViewById(R.id.chart);

About = findViewById(R.id.info);

SignIn.setOnClickListener(this);

SignOut.setOnClickListener(this);

Prof_Section.setVisibility(View.GONE);

GoogleSignInOptions googleSignInOptions = new

GoogleSignInOptions.Builder(GoogleSignInOptions.DEFAULT_SIGN_IN).requestEmail().build();

googleApiClient = new

GoogleApiClient.Builder(this).enableAutoManage(this,this).addApi(Auth.GOOGLE_SIGN_IN_API,g

oogleSignInOptions).build();

116

Lampiran 15 Lanjutan

Lapor.setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View view) {

Intent intent = new Intent(getApplicationContext(),Kasus.class);

startActivity(intent);

}});

CekMap.setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View view) {

Intent intent = new Intent(getApplicationContext(),CekPeta.class);

startActivity(intent);

}

});

CekGraph.setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View view) {

Intent intent = new Intent(getApplicationContext(),CekChart.class);

startActivity(intent);

}

});

About.setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View view) {

Intent intent = new Intent(getApplicationContext(),CekAbout.class);

startActivity(intent);

}

});

getSupportActionBar().hide();

// init constraintLayout

constraintLayout = findViewById(R.id.constraintLayouteGan);

constraintLayout.setBackgroundResource(R.drawable.bg_sigsag);

// initializing animation drawable by getting background from constraint layout

animationDrawable = (AnimationDrawable) constraintLayout.getBackground();

animationDrawable.start();

}

@Override

public void onClick(View view) {

switch (view.getId())

{

case R.id.login:

//Toast.makeText(MainActivity.this, "Tandatangan...",

Toast.LENGTH_LONG).show();

progress.setTitle("Sign in");

progress.setMessage("Wait while process...");

progress.setCancelable(false); // disable dismiss by tapping outside of

the dialog

progress.show();

signin();

break;

case R.id.logout:

signout();

break;

}

@Override

public void onConnectionFailed(@NonNull ConnectionResult connectionResult) {

}

private void signin(){

Intent intent = Auth.GoogleSignInApi.getSignInIntent(googleApiClient);

startActivityForResult(intent,REQ_CODE);

}

117

Lampiran 16 Lanjutan

private void signout(){

Auth.GoogleSignInApi.signOut(googleApiClient).setResultCallback(new

ResultCallback<Status>() {

@Override

public void onResult(@NonNull Status status) {

updateUI(false);

}

});

}

private void handleResult(GoogleSignInResult result){

if(result.isSuccess()){

// To dismiss the dialog

progress.dismiss();

GoogleSignInAccount account = result.getSignInAccount();

String name = account.getDisplayName();

String email = account.getEmail();

String photo = account.getPhotoUrl().toString();

Name.setText("Hai "+name);

Email.setText(email);

//set global Email

((Global) this.getApplication()).setSomeVariable(email);

Glide.with(this).load(photo).into(Prof_Pic);

updateUI(true);

}

else {

updateUI(false);

}

private void updateUI(boolean isLogin){

if(isLogin){

Prof_Section.setVisibility(View.VISIBLE);

SignIn.setVisibility(View.GONE);

Logo.setVisibility(View.GONE);

Intro.setVisibility(View.GONE);

}

else {

Prof_Section.setVisibility(View.GONE);

SignIn.setVisibility(View.VISIBLE);

Logo.setVisibility(View.VISIBLE);

Intro.setVisibility(View.VISIBLE);

}

@Override

protected void onActivityResult(int requestCode, int resultCode, Intent data) {

super.onActivityResult(requestCode, resultCode, data);

if(requestCode == REQ_CODE){

GoogleSignInResult result =

Auth.GoogleSignInApi.getSignInResultFromIntent(data);

handleResult(result);

}

118

Lampiran 17 Kode sumber menu lapor

package com.gatewan.mysigsag;

import android.Manifest;

import android.app.AlertDialog;

import android.app.ProgressDialog;

import android.content.Context;

import android.content.DialogInterface;

import android.content.Intent;

import android.content.pm.PackageManager;

import android.graphics.Bitmap;

import android.graphics.BitmapFactory;

import android.graphics.drawable.Drawable;

import android.location.Address;

import android.location.Geocoder;

import android.location.GpsSatellite;

import android.location.GpsStatus;

import android.location.Location;

import android.location.LocationManager;

import android.net.Uri;

import android.os.Bundle;

import android.provider.MediaStore;

import android.provider.Settings;

import android.support.annotation.Nullable;

import android.support.v4.app.ActivityCompat;

import android.support.v7.app.AppCompatActivity;

import android.util.Base64;

import android.util.Log;

import android.view.View;

import android.view.animation.AnimationUtils;

import android.widget.EditText;

import android.widget.ImageButton;

import android.widget.ImageView;

import android.widget.TextView;

import android.widget.Toast;

import com.android.volley.DefaultRetryPolicy;

import com.android.volley.Request;

import com.android.volley.RequestQueue;

import com.android.volley.Response;

import com.android.volley.RetryPolicy;

import com.android.volley.VolleyError;

import com.android.volley.toolbox.StringRequest;

import com.android.volley.toolbox.Volley;

import com.google.android.gms.common.ConnectionResult;

import com.google.android.gms.common.api.GoogleApiClient;

import com.google.android.gms.location.LocationRequest;

import com.google.android.gms.location.LocationServices;

import java.io.ByteArrayOutputStream;

import java.io.File;

import java.io.IOException;

import java.util.HashMap;

import java.util.Iterator;

import java.util.List;

import java.util.Locale;

import java.util.Map;

import static com.gatewan.mysigsag.Configuration.ADD_USER_URL;

import static com.gatewan.mysigsag.Configuration.KEY_ACTION;

import static com.gatewan.mysigsag.Configuration.KEY_DESKRIPSI;

import static com.gatewan.mysigsag.Configuration.KEY_EMAIL;

import static com.gatewan.mysigsag.Configuration.KEY_IMAGE;

import static com.gatewan.mysigsag.Configuration.KEY_LATITUDE;

import static com.gatewan.mysigsag.Configuration.KEY_LONGITUDE;

import static com.gatewan.mysigsag.Configuration.KEY_NAMA;

119

Lampiran 18 Lanjutan

public class Kasus extends AppCompatActivity implements View.OnClickListener,

GoogleApiClient.ConnectionCallbacks, GoogleApiClient.OnConnectionFailedListener,

com.google.android.gms.location.LocationListener, GpsStatus.Listener {

private EditText editTextUserName;

private EditText editTextUserDeskripsi;

private ImageView imageViewUserImage, awalPhoto;

private ImageButton buttonAddUser, buttonAddImage, buttonAddPhoto;

private TextView akun, tvgps;

String userImage;

static final int CAM_REQUEST = 1;

private int PICK_IMAGE_REQUEST = 1;

Bitmap rbitmap;

// vriable for valiasi form

private String valName, valDesc, valloc, valsat;

private Drawable vaImage;

private TextView valTextImg;

// validasi delcarate end

/*

MyLocation Declarate Variable

*/

private static final String TAG = "Kasus";

private TextView mLatitudeTextView;

private TextView mLongitudeTextView;

private TextView tv_address;

private GoogleApiClient mGoogleApiClient;

private Location mLocation;

private LocationManager mLocationManager;

private LocationRequest mLocationRequest;

private long UPDATE_INTERVAL = 2 * 1000; /* 10 secs */

private long FASTEST_INTERVAL = 2000; /* 2 sec */

private LocationManager locationManager;

// Declarate end

@Override

protected void onCreate(@Nullable Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.user_main);

editTextUserName = findViewById(R.id.nama);

editTextUserDeskripsi = findViewById(R.id.deskripsi);

imageViewUserImage = findViewById(R.id.imgv);

buttonAddUser = findViewById(R.id.submit);

buttonAddImage = findViewById(R.id.galeri);

buttonAddPhoto = findViewById(R.id.jepret);

valTextImg = findViewById(R.id.valimage);

valTextImg.setVisibility(View.GONE);

awalPhoto = findViewById(R.id.initimg);

buttonAddImage.setOnClickListener(this);

buttonAddPhoto.setOnClickListener(this);

buttonAddUser.setOnClickListener(this);

akun = findViewById(R.id.email);

tvgps = findViewById(R.id.gpsinfo);

//get global email

final String e = ((Global) this.getApplication()).getSomeVariable();

akun.setText(e);

/*

CALL MyLocationService that run IN BACKGROUND

*/

mLongitudeTextView = findViewById(R.id.longit);

mLatitudeTextView = findViewById(R.id.latit);

120

Lampiran 19 Lanjutan

tv_address = findViewById(R.id.adrs);

mGoogleApiClient = new GoogleApiClient.Builder(this)

.addConnectionCallbacks(this)

.addOnConnectionFailedListener(this)

.addApi(LocationServices.API)

.build();

mLocationManager = (LocationManager)

this.getSystemService(Context.LOCATION_SERVICE);

checkLocation(); //check whether location service is enable or not in your phone

// MyLocationService end

}

//part of mylocation service

/*

BY HARDIK PARSANIA · PUBLISHED DECEMBER 30, 2016 · UPDATED APRIL 3, 2018 demonuts.com

*/

@Override

public void onConnected(Bundle bundle) {

if (ActivityCompat.checkSelfPermission(this,

Manifest.permission.ACCESS_FINE_LOCATION) != PackageManager.PERMISSION_GRANTED &&

ActivityCompat.checkSelfPermission(this, Manifest.permission.ACCESS_COARSE_LOCATION) !=

PackageManager.PERMISSION_GRANTED) {

// TODO: Consider calling

// ActivityCompat#requestPermissions

// here to request the missing permissions, and then overriding

// public void onRequestPermissionsResult(int requestCode, String[]

permissions,

// int[] grantResults)

// to handle the case where the user grants the permission. See the

documentation

// for ActivityCompat#requestPermissions for more details.

return;

}

mLocationManager.addGpsStatusListener(this);

startLocationUpdates();

mLocation = LocationServices.FusedLocationApi.getLastLocation(mGoogleApiClient);

if (mLocation == null) {

startLocationUpdates();

}

if (mLocation != null) {

mLatitudeTextView.setText(String.valueOf(mLocation.getLatitude()));

mLongitudeTextView.setText(String.valueOf(mLocation.getLongitude()));

// get location addresss here

Geocoder geocoder;

List<Address> addresses;

geocoder = new Geocoder(this, Locale.getDefault());

String address, city, state, country, postalCode, knownName;

try {

addresses = geocoder.getFromLocation(mLocation.getLatitude(),

mLocation.getLongitude(), 1); // Here 1 represent max location result to returned, by

documents it recommended 1 to 5

address = addresses.get(0).getAddressLine(0); // If any additional address

line present than only, check with max available address lines by getMaxAddressLineIndex()

city = addresses.get(0).getLocality();

//state = addresses.get(0).getAdminArea();

country = addresses.get(0).getCountryName();

postalCode = addresses.get(0).getPostalCode();

//knownName = addresses.get(0).getFeatureName(); // Only if available else

return NULL

tv_address.setText(address + ", " + city + ", " + country + ", " +

postalCode);

} catch (IOException e) {

e.printStackTrace();

}

121

Lampiran 20 Lanjutan

} else {

Toast.makeText(this, "Location not Detected", Toast.LENGTH_SHORT).show();

}

@Override

public void onConnectionSuspended(int i) {

Log.i(TAG, "Connection Suspended");

mGoogleApiClient.connect();

}

@Override

public void onConnectionFailed(ConnectionResult connectionResult) {

Log.i(TAG, "Connection failed. Error: " + connectionResult.getErrorCode());

}

@Override

protected void onStart() {

super.onStart();

if (mGoogleApiClient != null) {

mGoogleApiClient.connect();

}

@Override

protected void onStop() {

super.onStop();

if (mGoogleApiClient.isConnected()) {

mGoogleApiClient.disconnect();

}

protected void startLocationUpdates() {

// Create the location request

mLocationRequest = LocationRequest.create()

.setPriority(LocationRequest.PRIORITY_HIGH_ACCURACY)

.setInterval(UPDATE_INTERVAL)

.setFastestInterval(FASTEST_INTERVAL);

// Request location updates

if (ActivityCompat.checkSelfPermission(this,

Manifest.permission.ACCESS_FINE_LOCATION) != PackageManager.PERMISSION_GRANTED &&

ActivityCompat.checkSelfPermission(this, Manifest.permission.ACCESS_COARSE_LOCATION) !=

PackageManager.PERMISSION_GRANTED) {

// TODO: Consider calling

// ActivityCompat#requestPermissions

// here to request the missing permissions, and then overriding

// public void onRequestPermissionsResult(int requestCode, String[]

permissions,

// int[] grantResults)

// to handle the case where the user grants the permission. See the

documentation

// for ActivityCompat#requestPermissions for more details.

return;

}

LocationServices.FusedLocationApi.requestLocationUpdates(mGoogleApiClient,

mLocationRequest, this);

Log.d("reque", "--->>>>");

}

@Override

public void onLocationChanged(Location location) {

if (location != null) {

double lng = location.getLongitude();

122

Lampiran 21 Lanjutan

double lat = location.getLatitude();

mLongitudeTextView.setText("" + lng);

mLatitudeTextView.setText("" + lat);

/*

Toast.makeText(this,

"Location Changed : Lgt " + location.getLongitude() +

"lat: " + location.getLatitude(), Toast.LENGTH_SHORT).show();

*/

// get location addresss here

Geocoder geocoder;

List<Address> addresses;

geocoder = new Geocoder(this, Locale.getDefault());

String address, city, state, country, postalCode, knownName;

try {

addresses = geocoder.getFromLocation(lat, lng, 1); // Here 1 represent max

location result to returned, by documents it recommended 1 to 5

address = addresses.get(0).getAddressLine(0); // If any additional address

line present than only, check with max available address lines by getMaxAddressLineIndex()

city = addresses.get(0).getLocality();

//state = addresses.get(0).getAdminArea();

country = addresses.get(0).getCountryName();

postalCode = addresses.get(0).getPostalCode();

//knownName = addresses.get(0).getFeatureName(); // Only if available else

return NULL

tv_address.setText(address + ", " + city + ", " + country + ", " +

postalCode);

} catch (IOException e) {

e.printStackTrace();

}

} else {

location.reset();

}

private boolean checkLocation() {

if (!isLocationEnabled())

showAlert();

return isLocationEnabled();

}

private void showAlert() {

final AlertDialog.Builder dialog = new AlertDialog.Builder(this);

dialog.setTitle("Enable Location")

.setMessage("Your Locations Settings is set to 'Off'.\nPlease Enable

Location to " +

"use this app")

.setPositiveButton("Location Settings", new

DialogInterface.OnClickListener() {

@Override

public void onClick(DialogInterface paramDialogInterface, int

paramInt) {

Intent myIntent = new

Intent(Settings.ACTION_LOCATION_SOURCE_SETTINGS);

startActivity(myIntent);

}

})

.setNegativeButton("Cancel", new DialogInterface.OnClickListener() {

@Override

public void onClick(DialogInterface paramDialogInterface, int

paramInt) {

}

123

Lampiran 22 Lanjutan

});

dialog.show();

}

private boolean isLocationEnabled() {

locationManager = mLocationManager;

if(locationManager.isProviderEnabled(LocationManager.GPS_PROVIDER)){

tvgps.setText("GPS");

}

if(locationManager.isProviderEnabled(LocationManager.NETWORK_PROVIDER)){

tvgps.setText("NET");

tvgps.setBackgroundColor(getResources().getColor(R.color.perbaikan));

}

return locationManager.isProviderEnabled(LocationManager.GPS_PROVIDER) ||

locationManager.isProviderEnabled(LocationManager.NETWORK_PROVIDER);

}

//part end

public Bitmap getResizedBitmap(Bitmap image, int maxSize) {

int width = image.getWidth();

int height = image.getHeight();

float bitmapRatio = (float) width / (float) height;

if (bitmapRatio > 1) {

width = maxSize;

height = (int) (width / bitmapRatio);

} else {

height = maxSize;

width = (int) (height * bitmapRatio);

}

return Bitmap.createScaledBitmap(image, width, height, true);

}

public String getStringImage(Bitmap bmp) {

ByteArrayOutputStream baos = new ByteArrayOutputStream();

bmp.compress(Bitmap.CompressFormat.JPEG, 100, baos);

byte[] imageBytes = baos.toByteArray();

String encodedImage = Base64.encodeToString(imageBytes, Base64.DEFAULT);

return encodedImage;

}

private void showFileChooser() {

Intent intent = new Intent();

intent.setType("image/*");

intent.setAction(Intent.ACTION_GET_CONTENT);

startActivityForResult(Intent.createChooser(intent, "Select Picture"),

PICK_IMAGE_REQUEST);

}

/* FUNGSI AKSES KAMERA DAN MENYIMPAN FOTO */

private void showPhotoChooser() {

Intent camera_intent = new Intent(MediaStore.ACTION_IMAGE_CAPTURE);

File file = getFile();

camera_intent.putExtra(MediaStore.EXTRA_OUTPUT, Uri.fromFile(file));

startActivityForResult(camera_intent, CAM_REQUEST);

}

private File getFile() {

File folder = new File("sdcard/MySkripsi");

124

Lampiran 23 Lanjutan

if (!folder.exists()) {

folder.mkdir();

}

File image_file = new File(folder, "skripshit.jpg");

return image_file;

}

@Override

protected void onActivityResult(int requestCode, int resultCode, Intent data) {

super.onActivityResult(requestCode, resultCode, data);

if (requestCode == PICK_IMAGE_REQUEST && resultCode == RESULT_OK && data != null

&& data.getData() != null) {

Uri filePath = data.getData();

try {

//Getting the Bitmap from Gallery

Bitmap bitmap = MediaStore.Images.Media.getBitmap(getContentResolver(),

filePath);

rbitmap = getResizedBitmap(bitmap, 250);//Setting the Bitmap to ImageView

userImage = getStringImage(rbitmap);

imageViewUserImage.setImageBitmap(rbitmap);

valTextImg.setVisibility(View.GONE);

} catch (IOException e) {

e.printStackTrace();

}

} else if (requestCode == CAM_REQUEST && resultCode == RESULT_OK) {

//Getting the Bitmap from Folder MySkripsi

final BitmapFactory.Options options = new BitmapFactory.Options();

options.inSampleSize = 8; // solusinya disini

Bitmap bitmap = BitmapFactory.decodeFile("sdcard/MySkripsi/skripshit.jpg",

options); //errornya tuh di sini

rbitmap = getResizedBitmap(bitmap, 250);//Setting the Bitmap to ImageView

userImage = getStringImage(rbitmap);

imageViewUserImage.setImageBitmap(rbitmap);

valTextImg.setVisibility(View.GONE);

awalPhoto.setVisibility(View.GONE);

}

/* FUNGSI AKSES KAMERA DAN MENYIMPAN FOTO end */

/*

* ADD USER SEND TO SHEET

* */

private void addUser() {

final ProgressDialog loading = ProgressDialog.show(Kasus.this, "Mengirim...",

"Mohon tunggu...", false, false);

final String userName = editTextUserName.getText().toString().trim();

final String userDeskripsi = editTextUserDeskripsi.getText().toString().trim();

final String userLongitude = "'" + mLongitudeTextView.getText().toString().trim();

final String userLatitude = "'" + mLatitudeTextView.getText().toString().trim();

final String email = akun.getText().toString().trim();

//Bitmap rbitmap = getResizedBitmap(bitmap,500);

Log.e("null", "values" + userImage);

StringRequest stringRequest = new StringRequest(Request.Method.POST, ADD_USER_URL,

new Response.Listener<String>() {

@Override

public void onResponse(String response) {

loading.dismiss();

Toast.makeText(Kasus.this, response, Toast.LENGTH_LONG).show();

//tos.setGravity(Gravity.CENTER, 0, 0);

//tos.show();

}

125

Lampiran 24 Lanjutan

},

new Response.ErrorListener() {

@Override

public void onErrorResponse(VolleyError error) {

Toast.makeText(Kasus.this, error.toString(),

Toast.LENGTH_LONG).show();

//tos.setGravity(Gravity.CENTER,0,0);

//tos.show();

}

}) {

@Override

protected Map<String, String> getParams() {

Map<String, String> params = new HashMap<String, String>();

params.put(KEY_ACTION, "insert");

params.put(KEY_EMAIL, email);

params.put(KEY_NAMA, userName);

params.put(KEY_DESKRIPSI, userDeskripsi);

params.put(KEY_LONGITUDE, userLongitude);

params.put(KEY_LATITUDE, userLatitude);

params.put(KEY_IMAGE, userImage);

return params;

}

};

int socketTimeout = 10000; // 10 seconds. You can change it

RetryPolicy policy = new DefaultRetryPolicy(socketTimeout,

DefaultRetryPolicy.DEFAULT_MAX_RETRIES,

DefaultRetryPolicy.DEFAULT_BACKOFF_MULT);

stringRequest.setRetryPolicy(policy);

RequestQueue requestQueue = Volley.newRequestQueue(Kasus.this);

requestQueue.add(stringRequest);

}

//ADD END

@Override

public void onClick(View v) {

if (v == buttonAddUser) {

initialize();

if (!validate()) {

Toast.makeText(this, "T_T", Toast.LENGTH_SHORT).show();

} else {

addUser();

}

if (v == buttonAddImage) {

showFileChooser();

}

if (v == buttonAddPhoto) {

showPhotoChooser();

}

public void initialize() {

valName = editTextUserName.getText().toString().trim();

valDesc = editTextUserDeskripsi.getText().toString().trim();

valloc = tv_address.getText().toString().trim();

valsat = tvgps.getText().toString().trim();

vaImage = imageViewUserImage.getDrawable();

}

126

Lampiran 25 Lanjutan

public boolean validate() {

boolean valid = true;

if (valName.isEmpty()) {

editTextUserName.setError("Mohon inputkan nama!");

valid = false;

}

if (!valName.isEmpty()) {

editTextUserName.setError(null);

}

if (valDesc.isEmpty()) {

editTextUserDeskripsi.setError("Mohon inputkan keterangan!");

valid = false;

}

if (!valDesc.isEmpty()) {

editTextUserDeskripsi.setError(null);

}

if (valloc.isEmpty()) {

tv_address.setError("Tunggu sampai dapet lokasi!");

valid = false;

}

if (!valloc.isEmpty()) {

tv_address.setError(null);

}

if (valsat.isEmpty()) {

tvgps.setBackgroundColor(getResources().getColor(R.color.rusak));

tvgps.setError("Tunggu sampai dapet min 3 satelit!");

valid = false;

}

if (!valsat.isEmpty()) {

if(valsat.equals("1") || valsat.equals("2") || valsat.equals("GPS")){

tvgps.setBackgroundColor(getResources().getColor(R.color.rusak));

tvgps.setError("Tunggu sampai dapet min 3 satelit!");

valid = false;

}else {

tvgps.setError(null);

}

if (vaImage == null) {

//Image doesn´t exist.

awalPhoto.setVisibility(View.GONE);

valTextImg.setVisibility(View.VISIBLE);

valTextImg.startAnimation(AnimationUtils.loadAnimation(this, R.anim.blink));

valid = false;

}

if (vaImage != null) {

//Image doesn´t exist.

awalPhoto.setVisibility(View.GONE);

valTextImg.setVisibility(View.GONE);

}

return valid;

}

127

Lampiran 26 Lanjutan

@Override

public void onGpsStatusChanged(int i) {

String strGpsStats = "";

if (ActivityCompat.checkSelfPermission(this,

Manifest.permission.ACCESS_FINE_LOCATION) != PackageManager.PERMISSION_GRANTED) {

// TODO: Consider calling

// ActivityCompat#requestPermissions

// here to request the missing permissions, and then overriding

// public void onRequestPermissionsResult(int requestCode, String[]

permissions,

// int[] grantResults)

// to handle the case where the user grants the permission. See the

documentation

// for ActivityCompat#requestPermissions for more details.

return;

}

GpsStatus gpsStatus = locationManager.getGpsStatus(null);

if(gpsStatus != null) {

Iterable<GpsSatellite> satellites = gpsStatus.getSatellites();

Iterator<GpsSatellite> sat = satellites.iterator();

while (sat.hasNext()) {

GpsSatellite satellite = sat.next();

// strGpsStats += (i++) + ": " + satellite.getPrn() + "," +

satellite.usedInFix() + "," + satellite.getSnr() + "," + satellite.getAzimuth() + "," +

satellite.getElevation()+ "\n\n";

// strGpsStats += (i++) + " " + satellite.usedInFix(); -- baca satelit

yg digunakan mesin gps

if(satellite.usedInFix() == true){

strGpsStats += satellite.usedInFix();

Integer count = strGpsStats.length() / 4;

//Integer count = 2;

tvgps.setText(String.valueOf(count));

if(count < 3){

tvgps.setBackgroundColor(getResources().getColor(R.color.rusak));

}

if(count >= 3){

tvgps.setBackgroundColor(getResources().getColor(R.color.beres));

}

if(gpsStatus == null) {

//tvgps.setText("GPS disabled");

}

128

Lampiran 27 Kode sumber menu cek map

package com.gatewan.mysigsag;

import android.os.Bundle;

import android.support.annotation.Nullable;

import android.support.v7.app.AppCompatActivity;

import android.view.MotionEvent;

import android.view.View;

import android.webkit.WebSettings;

import android.webkit.WebView;

public class CekPeta extends AppCompatActivity implements View.OnTouchListener

{

WebView webView;

public String fileName = "fushionMap.html";

@Override

protected void onCreate(@Nullable Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

getSupportActionBar().show();

setContentView(R.layout.user_map);

// init webView

webView = findViewById(R.id.fushionMapView);

webView.setOnTouchListener(this);

// displaying content in WebView from html file that stored in assets folder

webView.getSettings().setJavaScriptEnabled(true);

webView.getSettings().setRenderPriority(WebSettings.RenderPriority.HIGH);

webView.getSettings().setCacheMode(WebSettings.LOAD_NO_CACHE);

webView.loadUrl("file:///android_asset/" + fileName);

}

@Override

public boolean onTouch(View view, MotionEvent motionEvent) {

return false;

}

129

Lampiran 28 Kode sumber menu cek chart

package com.gatewan.mysigsag;

import android.app.Activity;

import android.graphics.Color;

import android.net.ConnectivityManager;

import android.net.NetworkInfo;

import android.os.AsyncTask;

import android.os.Bundle;

import android.support.annotation.Nullable;

import android.support.v7.app.AppCompatActivity;

import android.util.Log;

import android.widget.TextView;

import com.github.mikephil.charting.charts.PieChart;

import com.github.mikephil.charting.data.PieData;

import com.github.mikephil.charting.data.PieDataSet;

import com.github.mikephil.charting.data.PieEntry;

import com.github.mikephil.charting.formatter.PercentFormatter;

import com.github.mikephil.charting.utils.ColorTemplate;

import org.apache.http.HttpResponse;

import org.apache.http.client.HttpClient;

import org.apache.http.client.methods.HttpGet;

import org.apache.http.impl.client.DefaultHttpClient;

import org.json.JSONArray;

import org.json.JSONException;

import org.json.JSONObject;

import java.io.BufferedReader;

import java.io.IOException;

import java.io.InputStream;

import java.io.InputStreamReader;

import java.util.ArrayList;

import java.util.Timer;

import java.util.TimerTask;

public class CekChart extends AppCompatActivity

{

PieChart pieChart;

TextView tvIsConnected,tvkasus,tvpause,tvgo;

@Override

protected void onCreate(@Nullable Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

getSupportActionBar().show();

setContentView(R.layout.user_chart);

// get reference to the views

tvIsConnected = findViewById(R.id.tvIsConnected);

tvkasus = findViewById(R.id.kasus);

tvpause = findViewById(R.id.pause);

tvgo = findViewById(R.id.go);

// check if you are connected or not

if(isConnected()){

tvIsConnected.setBackgroundColor(0xFF00CC00);

tvIsConnected.setText("connected - sentuh2x lingkaran!");

}

else{

tvIsConnected.setText("disconnected");

}

//UPDATE SETIAP MENIT

Timer myTimer = new Timer();

myTimer.schedule(new TimerTask() {

@Override

public void run() {

/*

REST API ACCESS

*/

130

Lampiran 29 Lanjutan

// call AsynTask to perform network operation on separate thread

new

kasusHttpAsyncTask().execute("https://www.googleapis.com/fusiontables/v2/query?sql=SELECT%

20count(uMarking)%20FROM%201JL8RSd1GYzqr8sd4ErEsIiPx0sbnNog7eNoeKqTv%20WHERE%20uMarking=%2

7x%27&key=AIzaSyBkfYrfi1cEovgKeacKQoL_VuuEZVAPXPM");

new

pauseHttpAsyncTask().execute("https://www.googleapis.com/fusiontables/v2/query?sql=SELECT%

20count(uMarking)%20FROM%201JL8RSd1GYzqr8sd4ErEsIiPx0sbnNog7eNoeKqTv%20WHERE%20uMarking=%2

7pause%27&key=AIzaSyBkfYrfi1cEovgKeacKQoL_VuuEZVAPXPM");

new

goHttpAsyncTask().execute("https://www.googleapis.com/fusiontables/v2/query?sql=SELECT%20c

ount(uMarking)%20FROM%201JL8RSd1GYzqr8sd4ErEsIiPx0sbnNog7eNoeKqTv%20WHERE%20uMarking=%27go

%27&key=AIzaSyBkfYrfi1cEovgKeacKQoL_VuuEZVAPXPM");

/*

REST API END

*/

/*

Chart PROGRAMMING HERE

*/

Float nK = Float.valueOf(tvkasus.getText().toString());

Float nP = Float.valueOf(tvpause.getText().toString());

Float nG = Float.valueOf(tvgo.getText().toString());

pieChart = findViewById(R.id.chart);

pieChart.setUsePercentValues(true);

pieChart.getDescription().setEnabled(true);

pieChart.setExtraOffsets(5, 10, 5, 5);

pieChart.setDragDecelerationFrictionCoef(0.95f);

pieChart.setDrawHoleEnabled(true);

pieChart.getDescription().setTextColor(Color.WHITE);

pieChart.getLegend().setTextColor(Color.WHITE);

pieChart.setHoleColor(Color.WHITE);

pieChart.setTransparentCircleRadius(61f);

ArrayList<PieEntry> yValue = new ArrayList<>();

yValue.add(new PieEntry(nG, "Beres"));

yValue.add(new PieEntry(nP, "Perbaikan"));

yValue.add(new PieEntry(nK, "Rusak"));

PieDataSet dataSet = new PieDataSet(yValue, " ");

dataSet.setSliceSpace(3f);

dataSet.setSelectionShift(5f);

dataSet.setColors(ColorTemplate.MATERIAL_COLORS);

PieData data = new PieData(dataSet);

data.setValueTextSize(10f);

data.setValueTextColor(Color.BLACK);

data.setValueFormatter(new PercentFormatter());

pieChart.setData(data);

//pieChart.invalidate();

/*

Chart END

*/

}

}, 0, 3939);

//UPDATE END

}

public static String GET(String url){

InputStream inputStream = null;

String result = "";

try {

// create HttpClient

HttpClient httpclient = new DefaultHttpClient();

131

Lampiran 30 Lanjutan

// call AsynTask to perform network operation on separate thread

new

kasusHttpAsyncTask().execute("https://www.googleapis.com/fusiontables/v2/query?sql=SELECT%

20count(uMarking)%20FROM%201JL8RSd1GYzqr8sd4ErEsIiPx0sbnNog7eNoeKqTv%20WHERE%20uMarking=%2

7x%27&key=AIzaSyBkfYrfi1cEovgKeacKQoL_VuuEZVAPXPM");

new

pauseHttpAsyncTask().execute("https://www.googleapis.com/fusiontables/v2/query?sql=SELECT%

20count(uMarking)%20FROM%201JL8RSd1GYzqr8sd4ErEsIiPx0sbnNog7eNoeKqTv%20WHERE%20uMarking=%2

7pause%27&key=AIzaSyBkfYrfi1cEovgKeacKQoL_VuuEZVAPXPM");

new

goHttpAsyncTask().execute("https://www.googleapis.com/fusiontables/v2/query?sql=SELECT%20c

ount(uMarking)%20FROM%201JL8RSd1GYzqr8sd4ErEsIiPx0sbnNog7eNoeKqTv%20WHERE%20uMarking=%27go

%27&key=AIzaSyBkfYrfi1cEovgKeacKQoL_VuuEZVAPXPM");

/*

REST API END

*/

/*

Chart PROGRAMMING HERE

*/

Float nK = Float.valueOf(tvkasus.getText().toString());

Float nP = Float.valueOf(tvpause.getText().toString());

Float nG = Float.valueOf(tvgo.getText().toString());

pieChart = findViewById(R.id.chart);

pieChart.setUsePercentValues(true);

pieChart.getDescription().setEnabled(true);

pieChart.setExtraOffsets(5, 10, 5, 5);

pieChart.setDragDecelerationFrictionCoef(0.95f);

pieChart.setDrawHoleEnabled(true);

pieChart.getDescription().setTextColor(Color.WHITE);

pieChart.getLegend().setTextColor(Color.WHITE);

pieChart.setHoleColor(Color.WHITE);

pieChart.setTransparentCircleRadius(61f);

ArrayList<PieEntry> yValue = new ArrayList<>();

yValue.add(new PieEntry(nG, "Beres"));

yValue.add(new PieEntry(nP, "Perbaikan"));

yValue.add(new PieEntry(nK, "Rusak"));

PieDataSet dataSet = new PieDataSet(yValue, " ");

dataSet.setSliceSpace(3f);

dataSet.setSelectionShift(5f);

dataSet.setColors(ColorTemplate.MATERIAL_COLORS);

PieData data = new PieData(dataSet);

data.setValueTextSize(10f);

data.setValueTextColor(Color.BLACK);

data.setValueFormatter(new PercentFormatter());

pieChart.setData(data);

//pieChart.invalidate();

/*

Chart END

*/

}

}, 0, 3939);

//UPDATE END

}

public static String GET(String url){

InputStream inputStream = null;

String result = "";

try {

// create HttpClient

HttpClient httpclient = new DefaultHttpClient();

132

Lampiran 31 Lanjutan

// make GET request to the given URL

HttpResponse httpResponse = httpclient.execute(new HttpGet(url));

// receive response as inputStream

inputStream = httpResponse.getEntity().getContent();

// convert inputstream to string

if(inputStream != null)

result = convertInputStreamToString(inputStream);

else

result = "Did not work!";

} catch (Exception e) {

Log.d("InputStream", e.getLocalizedMessage());

}

return result;

}

private static String convertInputStreamToString(InputStream inputStream) throws

IOException {

BufferedReader bufferedReader = new BufferedReader( new

InputStreamReader(inputStream));

String line = "";

String result = "";

while((line = bufferedReader.readLine()) != null)

result += line;

inputStream.close();

return result;

}

public boolean isConnected(){

ConnectivityManager connMgr = (ConnectivityManager)

getSystemService(Activity.CONNECTIVITY_SERVICE);

NetworkInfo networkInfo = connMgr.getActiveNetworkInfo();

if (networkInfo != null && networkInfo.isConnected())

return true;

else

return false;

}

private class kasusHttpAsyncTask extends AsyncTask<String, Void, String> {

@Override

protected String doInBackground(String... urls) {

return GET(urls[0]);

}

// onPostExecute displays the results of the AsyncTask.

@Override

protected void onPostExecute(String result) {

// Toast.makeText(getBaseContext(), "Received!", Toast.LENGTH_SHORT).show();

String datane;

try {

// Create the root JSONObject from the JSON string.

JSONObject jsonRootObject = new JSONObject(result);

//Get the instance of JSONArray that contains JSONObjects

JSONArray jsonArray = jsonRootObject.optJSONArray("rows");

if(jsonArray != null) {

datane = jsonArray.getJSONArray(0).get(0).toString();

//String kasus = Integer.parseInt(datane); //convert string to int

tvkasus.setText(datane);

} else {

tvkasus.setText("0");

}

} catch (JSONException e) {

e.printStackTrace();

}

133

Lampiran 32 Lanjutan

private class pauseHttpAsyncTask extends AsyncTask<String, Void, String> {

@Override

protected String doInBackground(String... urls) {

return GET(urls[0]);

}

// onPostExecute displays the results of the AsyncTask.

@Override

protected void onPostExecute(String result) {

// Toast.makeText(getBaseContext(), "Received!", Toast.LENGTH_SHORT).show();

String datane;

try {

// Create the root JSONObject from the JSON string.

JSONObject jsonRootObject = new JSONObject(result);

//Get the instance of JSONArray that contains JSONObjects

JSONArray jsonArray = jsonRootObject.optJSONArray("rows");

if(jsonArray != null) {

datane = jsonArray.getJSONArray(0).get(0).toString();

//String kasus = Integer.parseInt(datane); //convert string to int

tvpause.setText(datane);

} else {

tvpause.setText("0");

}

} catch (JSONException e) {

e.printStackTrace();

}

private class goHttpAsyncTask extends AsyncTask<String, Void, String> {

@Override

protected String doInBackground(String... urls) {

return GET(urls[0]);

}

// onPostExecute displays the results of the AsyncTask.

@Override

protected void onPostExecute(String result) {

//Toast.makeText(getBaseContext(), "Received!", Toast.LENGTH_SHORT).show();

String datane;

try {

// Create the root JSONObject from the JSON string.

JSONObject jsonRootObject = new JSONObject(result);

//Get the instance of JSONArray that contains JSONObjects

JSONArray jsonArray = jsonRootObject.optJSONArray("rows");

if(jsonArray != null) {

datane = jsonArray.getJSONArray(0).get(0).toString();

//String kasus = Integer.parseInt(datane); //convert string to int

tvgo.setText(datane);

} else {

tvgo.setText("0");

}

} catch (JSONException e) {

e.printStackTrace();

}

134

Lampiran 33 Kode sumber menu info

package com.gatewan.mysigsag;

import android.os.Bundle;

import android.support.annotation.Nullable;

import android.support.v7.app.AppCompatActivity;

import android.view.MotionEvent;

import android.view.View;

import android.webkit.WebView;

public class CekAbout extends AppCompatActivity implements View.OnTouchListener

{

WebView webView;

public String fileName = "aboutMySIGSAG.html";

@Override

protected void onCreate(@Nullable Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

getSupportActionBar().show();

setContentView(R.layout.user_about);

// init webView

webView = findViewById(R.id.aboutView);

webView.setOnTouchListener(this);

// displaying content in WebView from html file that stored in assets folder

webView.getSettings().setJavaScriptEnabled(true);

webView.getSettings().setGeolocationEnabled(true);

webView.loadUrl("file:///android_asset/" + fileName);

}

@Override

public boolean onTouch(View view, MotionEvent motionEvent) {

return false;

}

Lampiran 34 Kode sumber login admin

<?php $this->load->view('auth/auth_header');?>

<?php

$attributes = array('class' => 'form-signin', 'id' => 'myform');

echo form_open("auth/login",$attributes);?>

<p>

<?php echo form_input($identity);?>

</p>

<p>

<?php echo form_input($password);?>

</p>

<p>

<?php echo lang('login_remember_label', 'remember');?>

<?php echo form_checkbox('remember', '1', FALSE, 'id="remember"');?>

</p>

<p><?php echo form_submit('submit', lang('login_submit_btn'), 'class="btn btn-lg btn-

primary btn-block btn-signin"');?></p>

<?php echo form_close();?>

</div>

135

Lampiran 35 Kode sumber dashboard admin

<!DOCTYPE html>

<head>

<!-- The above 3 meta tags *must* come first in the head; any other head content must

come *after* these tags -->

<script

src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>

<style>

#loader {

border: 16px solid #f3f3f3;

border-radius: 50%;

border-top: 16px solid blue;

border-bottom: 16px solid blue;

width: 40px;

height: 40px;

-webkit-animation: spin 2s linear infinite;

animation: spin 2s linear infinite;

visibility:hidden;

}

@-webkit-keyframes spin {

0% { -webkit-transform: rotate(0deg); }

100% { -webkit-transform: rotate(360deg); }

}

@keyframes spin {

0% { transform: rotate(0deg); }

100% { transform: rotate(360deg); }

}

.jumbotron {

padding-top: 10px;

padding-bottom: 18px;

margin-bottom: 5px;

}

.jumbotron h1 {

font-size: 33px;

}

.jumbotron p {

margin-bottom: 15px;

font-size: 15px;

font-weight: 200;

}

.inputan {

margin: 10px 30px 10px 30px;

width: 600px;

}

.form-inline {

margin-bottom: 20px;

}

select#status {

width: 400px;

}

.containerCustom {

margin: 5px 30px 10px 30px;

width: 90%;

}

136

Lampiran 36 Lanjutan

input.btn.btn-primary {

margin-right: 5px;

width: 32%;

}

input.btn.btn-success {

margin-right: 5px;

width: 32%;

}

input.btn.btn-danger {

width: 32%;

}

div#showData {

margin-bottom: 50px;

overflow: auto;

width: 97%;

}

footer {

margin-top: -50px;

}

body {

width: 100%;

height: 100%;

}

.table {

cursor: pointer;

}

</style>

var script_url =

"https://script.google.com/macros/s/AKfycbz7Hc9Lrw6TaHZar87tTacZEFttdVvCbIK6ydZHYrkGsS5kpV

1x/exec";

// Make an AJAX call to Google Script

function update_value(){

$("#re").css("visibility","hidden");

document.getElementById("loader").style.visibility = "visible";

var uId= $("#id").val();

var uStatus= $("#status").val();

var uFeedback= $("#feedback").val();

var url =

script_url+"?callback=ctrlq&id="+uId+"&status="+uStatus+"&feedback="+uFeedback+"&action=up

date";

var request = jQuery.ajax({

crossDomain: true,

url: url ,

method: "GET",

dataType: "jsonp"

});

}

function delete_value(){

$("#re").css("visibility","hidden");

document.getElementById("loader").style.visibility = "visible";

$('#mySpinner').addClass('spinner');

var uId= $("#id").val();

var uStatus= $("#status").val();

var uFeedback= $("#feedback").val();

137

Lampiran 37 Lanjutan

var url =

script_url+"?callback=ctrlq&id="+uId+"&status="+uStatus+"&feedback="+uFeedback+"&action=de

lete";

var request = jQuery.ajax({

crossDomain: true,

url: url ,

method: "GET",

dataType: "jsonp"

});

}

// print the returned data

function ctrlq(e) {

$("#re").html(e.result);

$("#re").css("visibility","visible");

read_value();

}

function read_value() {

$("#re").css("visibility","hidden");

document.getElementById("loader").style.visibility = "visible";

var url = script_url+"?action=read";

$.getJSON(url, function (json) {

// Set the variables from the results array

// CREATE DYNAMIC TABLE.

var table = document.createElement("table");

table.setAttribute('class','table table-bordered');

var header = table.createTHead();

var row = header.insertRow(0);

// Modified by wawan_beneran HERE

var cell1 = row.insertCell(0);

var cell2 = row.insertCell(1);

var cell3 = row.insertCell(2);

var cell4 = row.insertCell(3);

var cell5 = row.insertCell(4);

var cell6 = row.insertCell(5);

var cell7 = row.insertCell(6);

var cell8 = row.insertCell(7);

var cell9 = row.insertCell(8);

var cell10 = row.insertCell(9);

var cell11 = row.insertCell(10);

var cell12 = row.insertCell(11);

cell1.innerHTML = "<b>Id</b>";

cell2.innerHTML = "<b>Time</b>";

cell3.innerHTML = "<b>Email</b>";

cell4.innerHTML = "<b>Name</b>";

cell5.innerHTML = "<b>Deskripsi</b>";

cell6.innerHTML = "<b>Image</b>";

cell7.innerHTML = "<b>Longitude</b>";

cell8.innerHTML = "<b>Latitude</b>";

cell9.innerHTML = "<b>Marking</b>";

cell10.innerHTML = "<b>Status</b>";

cell11.innerHTML = "<b>Feedback</b>";

cell12.innerHTML = "<b>Options</b>";

// ADD JSON DATA TO THE TABLE AS ROWS.

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

tr = table.insertRow(-1);

var tabCell = tr.insertCell(-1);

tabCell.innerHTML = json.records[i].uId;

tabCell = tr.insertCell(-1);

tabCell.innerHTML = json.records[i].uTime;

tabCell = tr.insertCell(-1);

tabCell.innerHTML = json.records[i].uEmail;

tabCell = tr.insertCell(-1);

tabCell.innerHTML = json.records[i].uName;

tabCell = tr.insertCell(-1);

138

Lampiran 38 Lanjutan

tabCell.innerHTML = json.records[i].uDeskripsi;

tabCell = tr.insertCell(-1);

tabCell.innerHTML = json.records[i].uImage;

tabCell = tr.insertCell(-1);

tabCell.innerHTML = json.records[i].uLongitude;

tabCell = tr.insertCell(-1);

tabCell.innerHTML = json.records[i].uLatitude;

tabCell = tr.insertCell(-1);

tabCell.innerHTML = json.records[i].uMarking;

tabCell = tr.insertCell(-1);

tabCell.innerHTML = json.records[i].aStatus;

tabCell = tr.insertCell(-1);

tabCell.innerHTML = json.records[i].aFeedback;

tabCell = tr.insertCell(-1);

tabCell.innerHTML = '<a href="#" id="1" class="btn"

onclick="reply_click(this)" data-kasus-id="'+json.records[i].uId+'">eksekusi</a>';

}

// FINALLY ADD THE NEWLY CREATED TABLE WITH JSON DATA TO A CONTAINER.

var divContainer = document.getElementById("showData");

divContainer.innerHTML = "";

divContainer.appendChild(table);

document.getElementById("loader").style.visibility = "hidden";

$("#re").css("visibility","visible");

});

}

</script>

</head>

<body>

<h1>My SIGSAG</h1>

<p>This is is an extension of Sistem Informasi Geografis Salam Aspal Gronjal designed

to capture, store, manipulate, analyze, manage, and present spatial data of broken road in

Jogja</p>

<a class="btn btn-default" href="<?=base_url()?>auth/logout">Logout</a>

</div>

<form>

<input class="form-control" type = "text" name ="id" id="id" value="id"

readonly="readonly" placeholder="ID"/>

<option>rusak</option>

<option>perbaikan</option>

<option>beres</option>

</select>

</div>

<textarea class="form-control" rows="3" name="feedback" id="feedback"

placeholder="Kunjungi https://goo.gl/ untuk persingkat tautan link :D"></textarea>

</div>

</form>

</div>

139

Lampiran 39 Lanjutan

// EXECUTE BUTTON BY WAWAN BENERAN

function reply_click(element)

{

document.getElementById('id').value = element.getAttribute('data-kasus-id');

}

</script>

</div>

</body>