VISUALISASI DATA SPATIO-TEMPORAL MELALUI

WEBGIS
(Studi Kasus Rumah Bantuan Kota Banda Aceh)

TUGAS AKHIR

Diajukan untuk melengkapi tugas-tugas dan

memenuhi syarat-syarat guna memperoleh
gelar Sarjana Komputer

Oleh:

FAJARUL AKBAR
1008107020045

JURUSAN INFORMATIKA
FAKULTAS MATEMATIKA DAN ILMU PENGETAHUAN ALAM
UNIVERSITAS SYIAH KUALA
DARUSSALAM, BANDA ACEH
JULI, 2015
ii
 KATA PENGANTAR

Syukur Alhamdulillah penulis panjatkan kepada Allah SWT, yang telah

melimpahkan rahmat-Nya, sehingga penulis dapat menyelesaikan Tugas Akhir
yang berjudul “Visualisasi Data Spatio-Temporal melalui WebGIS (Studi Kasus
Rumah Bantuan di Kota Banda Aceh”. Shalawat dan salam disanjungkan kepada
Rasulullah SAW. Penelitian ini menghasilkan sebuah webGIS data spatio temporal
yang dapat digunakan untuk penelitian-penelitian lainnya.
Tugas Akhir ini merupakan salah satu syarat yang harus dipenuhi untuk
memperoleh gelar Sarjana Komputer di Jurusan Informatika, Fakultas Matematika
dan Ilmu Pengetahuan Alam, Universitas Syiah Kuala. Penulis menyadari bahwa
penulisan Proposal Tugas Akhir ini tidak terlepas dari bantuan dan dorongan dari
berbagai pihak, baik secara moril maupun materil. Pada kesempatan ini penulis
ingin mengucapkan terima kasih kepada:

1. Ayahanda dan Ibunda yang senantiasa selalu mendoakan dan memberi

dukungan penuh dalam penulis Tugas Akhir ini sampai selesai.
2. Ibu Dr. Ir. Marlina, M. Si, selaku Dekan Fakultas MIPA.
3. Bapak Dr. Muhammad Subianto, M. Si, selaku Ketua Jurusan Informatika.
4. Bapak Dr.Nizamuddin, M.Info,Sc. selaku Pembimbing I dan Bapak
Ardiansyah, BSEE, M.Sc selaku Pembimbing II juga telah dengan sabar,
tekun, tulus dan ikhlas meluangkan waktu, tenaga dan pikiran dalam
membimbing dan memberikan arahan selama menyelesaikan Tugas Akhir
ini.
5. Bapak Zahnur, M. InfoTech sebagai dosen wali atau pembimbing akademik
yang telah memberi saran dan nasihat kepada penulis.
6. Seluruh dosen FMIPA UNSYIAH, terutama untuk dosen dan staf jurusan
Informatika, semoga ilmu yang penulis terima kelak bermanfaat untuk
penulis.
7. Para dosen penguji Tugas Akhir Bapak Dr. Muzailin Affan, M. Sc, Bapak
Muslim, M. InfoTec, dan Bapak Nur Fadli, S.Pi. M. Sc, yang telah menguji
Tugas Akhir penulis dan memberikan masukkan untuk perbaikan laporan.

iii
 8. Kepada Nyak Wa, Kak Fitri, Bang Adi, Bang Rizal, Kak Ra, Kak Yuni dan
Kak Sari yang telah memberi semangat dan dukungan baik dalam materi
maupun dalam bentuk doa.
9. Dosen Laboratorium GIS dan Data Spasial UNSYIAH serta kepada staf-
stafnya yang telah membantu memberi pengalaman dan membantu dalam
proses pengerjaan Tugas Akhir ini.
10. Teman-teman seangkatan dan seperjuangan Informatika 2010. Terutama
Amir Mahazir, Ahmad Zuhri R, Mujiburrahman, Teuku Akmaliansyah,
Yaumil Hanita, Istia Mentari, Ferial Willy, dan Ghassan Mochammad,
terima kasih atas inspirasi, semangat, bantuan, kerja sama dan
kebersamaannya.
11. Adik-adik di jurusan Informatika yang telah ikut membantu menyelesaikan
tugas akhir ini.

Dengan segala kerendahan hati penulis mengharapkan semoga tulisan ini

dapat bermanfaat bagi penulis dan bagi para pembaca dalam perkembangan ilmu
pengetahuan.

Banda Aceh, Juli 2015

(Fajarul Akbar)

iv
 ABSTRAK
Data spatio-temporal mengandung informasi tentang obyek atau fenomena spasial
yang berubah dari waktu ke waktu. Oleh karena itu visualisasi data jenis ini dalam
SIG perlu memperhitungkan komponen spasial (ruang) dan waktu. Penelitian ini
bertujuan untuk memvisualisasikan data spatio-temporal melalui webGIS. Data
spatio-temporal yang digunakan adalah data rumah bantuan yang dibangun di 26
desa di kota Banda Aceh oleh lembaga-lembaga dan organisasi dari dalam negeri
maupun luar negeri saat masa rehabilitasi dan rekonstruksi dari tahun 2005 sampai
dengan 2009 pasca Gempa dan Tsunami pada 26 Desember 2004. Data spasial
rumah bantuan ini belum pernah dipublikasikan dan divisualisasikan ke Sistem
Informasi Geografis (SIG) berbasis web yang dapat menampilkan tahun
pembangunan, nama donatur, lokasi dan jumlah rumah yang dibangun. Sistem ini
mengintegrasikan Application Programming Interface (API), OpenLayers,
Timemap Google, Highcharts, GeoServer, dan bahasa pemrograman PHP,
Javascript, GeoJSON dan OpenStreetMap. Tahap penelitian yang digunakan
adalah mengidentifikasi masalah, studi literatur, mengumpulkan data, merancang
aplikasi, membuat aplikasi, dan melakukan pengujian terhadap aplikasi. Pengujian
dengan memberikan kuesioner terhadap 30 responden menggunakan metode
System Usability Scale (SUS) untuk menguji kelayakan aplikasi tersebut. Dari
pengujian yang menggunakan SUS, dapat disimpulkan bahwa aplikasi layak
digunakan dengan nilai usability 79% atau kategori ‘BAIK’.

Kata Kunci :Spatio-Temporal, Visualisasi Data, WebGIS, System Usability Scale,

Geoserver, Rehabilitasi dan Rekonstruksi

v
 ABSTRACT

Spatio-temporal data contain information about spatial objects or phenomena which

vary from time to time. Therefore, visualization of this type of data in Geographic
Information Systems (GIS) needs to consider both spatial and temporal component.
The purpose of this study was to visualize spatio-temporal data by means of
webGIS. The spatio-temporal data used were data of relief houses which were built
in 26 villages in Banda Aceh by domestic and overseas institutions or organizations
during the period of rehabilitation and reconstruction from 2005 until 2009 after
earthquake and tsunami on December 26th, 2004. These spatial data of relief houses
have not previously been published and visualized into Geographic Information
System web-based that can display the time of construction, the name of the donor,
the location and the total number of houses. This system integrates an Application
Programming Interface (API), OpenLayers, Google Timemap, Highcharts,
GeoServer, and programming languages PHP, Javascript, GeoJSON and Open
Street Map. The steps involved in this study were problem identification, literature
reviews, data collection, design, implementation and testing. The test was
conducted to see the feasibility of the application by giving questionnaires to 30
respondents according to the System Usability Scale (SUS) method. Based on the
SUS test results, it can be concluded that the application is feasible to use with the
usability value of 79% or within the ‘GOOD’ category.

Keywords: Spatio Temporal, Data Visualization, WebGIS, the System Usability

Scale, GeoServer, Rehabilitation and Reconstruction

vi
 DAFTAR ISI
Halaman
Halaman Judul ................................................................................................... i
Halaman Pengesahan ........................................................................................ ii
Kata Pengantar .................................................................................................. iii
Abstrak .............................................................................................................. iv
Daftar Isi ............................................................................................................ v
Daftar Tabel ...................................................................................................... vii
Daftar Gambar ................................................................................................... viii
Daftar Lampiran ................................................................................................. ix

BAB I. PENDAHULUAN
1.1. Latar Belakang ........................................................................... 1
1.2. Rumusan Masalah ...................................................................... 2
1.3. Maksud dan Tujuan ................................................................... 3
1.4. Manfaat Penelitian ...................................................................... 3

BAB II. TINJAUAN KEPUSTAKAAN

2.1. Sistem Informasi Geografis ........................................................ 4
2.1.1. Definisi Sistem Informasi Geografis ................................ 4
2.1.2. Model Data Sistem Informasi Geografis.......................... 6
2.1.2.1. Model Data Spasial .............................................. 6
2.1.2.2. Model Data Non-Spasial ...................................... 6
2.1.3. SIG Berbasis Web (WebGIS) ........................................... 6
2.2. Spatio Temporal ......................................................................... 8
2.2.1.Visualisasi Data................................................................. 9
2.3. Application Programming Interface(API).................................. 10
2.3.1. OpenLayers API ............................................................... 10
2.3.2. Timemap Google ............................................................. 11
2.3.3. Highcharts API ................................................................ 11
2.4. Geoserver.................................................................................... 12
2.5. Database Manajement System (DBMS) ..................................... 13
2.6. JavaScript Object Notation (JSON) ........................................... 14
2.7. OpenStreetMap ........................................................................... 16
2.8. Rehabilitasi dan Rekonstruksi .................................................... 17
2.9.System Usability Scale (SUS) ...................................................... 18

BAB III. METODE PENELITIAN

3.1. Tempat dan Waktu Penelitian..................................................... 21
3.2. Alat dan Data .............................................................................. 22
3.3.1. Alat ................................................................................... 21
3.3.2. Data ................................................................................. 22
3.3. Metode Penelitian ....................................................................... 24

BAB IV. HASIL DAN PEMBAHASAN

4.1. Implementasi Sistem................................................................... 27

vii
 4.2. Pengumpulan Data ...................................................................... 27
4.2.1. Data Spasial...................................................................... 27
4.2.2. Data Non-Spasial ............................................................. 29

4.3. Pengolahan Data ......................................................................... 29

4.3.1. Membersihkan Data ......................................................... 30
4.3.2. Konversi Data................................................................... 31
4.3.3. Memasukkan Titik Koordinat .......................................... 32
4.3.4. Memasukkan Data ke Database....................................... 34
4.3.5. Menghubungkan Database dengan Server ...................... 35

4.4. Perancangan WebGIS Data Spatio-Temporal............................. 36

4.4.1. Menampilkan Data ........................................................... 37
4.4.1.1. Koneksi Data Server ............................................ 37
4.4.1.2. Halaman Utama.................................................... 38
4.4.1.3. Timeline ................................................................ 39
4.4.1.4. Map ...................................................................... 39
4.4.1.5. Menu Interface ..................................................... 41
4.4.1.6. Halaman Help....................................................... 46

4.5.Pengujian Sistem ......................................................................... 48

BAB V. KESIMPULAN DAN SARAN

5.1. Kesimpulan ................................................................................ 52
5.2. Saran .......................................................................................... 52

DAFTAR KEPUSTAKAAN .......................................................................... 53

LAMPIRAN ..................................................................................................... 56

viii
 DAFTAR TABEL

Halaman
Tabel 2.1. Percentile rank pada metode SUS .................................................. 19
Tabel 3.1. Nama-nama kecamatan dan desa yang digunakan untuk penelitian
(webGIS) ............................................................................................ 22
Tabel 4.1. Hasil perhitungan kuesioner WebGis Data Spatio-Temporal .......... 49
Tabel 4.2. Hasil perhitungan percentile rank pengujian sistem WebGIS ......... 50

ix
 DAFTAR GAMBAR

Halaman
Gambar 2.1. WebGIS Kota Banda Aceh.............................................................. 7
Gambar 2.2. WebGIS visualisasi data temporal Arkeologi. ................................. 9
Gambar 2.3. Tampilan produk dari highcharts .................................................... 12
Gambar 2.4. Halaman interface dari server Geoserver ....................................... 13
Gambar 2.5. Tampilan dari OpenStreetMap ........................................................ 16
Gambar 2.6. Kriteria perhitungan hasil skor Metode SUS ................................... 20
Gambar 3.1. Peta desa dan titik lokasi rumah bantuan ......................................... 23
Gambar 3.2. Cara Kerja ...................................................................................... 24
Gambar 4.1. Arsitektur webGIS .......................................................................... 27
Gambar 4.2. Batas Admitrasi Kota Banda Aceh .................................................. 28
Gambar 4.3. Lokasi rumah bantuan 26 desadari 5 Kecamatan ............................. 28
Gambar 4.4. Data Atribut Informasi rumah bantuan ............................................ 29
Gambar 4.5. Data yang belum dilakukan proses cleaning.................................... 30
Gambar 4.6. Data hasil dari proses cleaning ....................................................... 30
Gambar 4.7. Data masih bentuk polygon ............................................................. 31
Gambar 4.8. Proses konversi polygon kepoint .................................................... 32
Gambar 4.9. Hasil konversi polygon kepoint ...................................................... 32
Gambar 4.10. Memasukkan titik koordinat ......................................................... 33
Gambar 4.11. Hasil input titikkoordinat .............................................................. 33
Gambar 4.12. Import data ke database menggunakan PostGIS ............................ 34
Gambar 4.13. Data yang telah dimasukkan ke database ...................................... 34
Gambar 4.14. Proses menghubungkan server dengan database ........................... 35
Gambar 4.15. Tampilan data dalam geoserver data dari database ........................ 35
Gambar 4.16. Halaman utama user interface web .............................................. 36
Gambar 4.17. Tampilan output dari server (geoserver)........................................ 37
Gambar 4.18. Fungsi layanan memanggil data dari server ................................... 38
Gambar 4.19. Fungsi menampung data dari server .............................................. 38
Gambar 4.20. Fungsi menampung titik koordinat ................................................ 38
Gambar 4.21. Fungsi untuk mengubah format data ............................................. 39
Gambar 4.22. Tampilan Timeline ........................................................................ 39
Gambar 4.23. Tampilan Map digital dari OpenstreetMap .................................... 39
Gambar 4.24. Kode menampung OpenStreetMap ............................................... 40
Gambar 4.25. Kode geosjon batas desa ............................................................... 40
Gambar 4.26. Fungsi untuk menampung batas desa kota Banda Aceh ................. 40
Gambar 4.27. Tampilan menu-menu ................................................................... 41
Gambar 4.28. Tampilan nama donatur pada tombol menu provider ..................... 41
Gambar 4.29. Tampilan ikon markers provider ................................................... 42
Gambar 4.30. Fungsi untuk menampung memuncul data providerweb ............... 43
Gambar 4.31. Tampilan hasil dari menu dropdown Lokasi.................................. 44
Gambar 4.32. Tampilan Grafik jumlah rumah bantuan ........................................ 44
Gambar 4.33. Tampilan nama-nama provider pada bar-chart .............................. 45
Gambar 4.34. Fungsi koneksi data dari database untuk bar-chart ........................ 45
Gambar 4.35. Fungsi untuk menampilkan bar-chart pada index.php .................... 46
Gambar 4.36. Tampilan tabel jumlah rumah yang dibangun ................................ 47
Gambar 4.37. Halaman Help............................................................................... 48
Gambar 4.38. Kurva SUS berdasarkan percentile rank........................................ 51

x
 DAFTAR LAMPIRAN

Halaman
Lampiran 1. Script PHP halaman Utama WebGIS........................................... 56
Lampiran 2. Script PHP halaman Bar-Chart ................................................... 61
Lampiran 3. Script PHP Data Bar-Chart ......................................................... 63
Lampiran 4. Soal kuesioner.............................................................................. 66
Lampiran 5. Hasil Jawaban kuesioner dari responden ..................................... 67

xi
 BAB I
PENDAHULUAN

1.1. Latar Belakang

Perkembangan teknologi informasi yang semakin berkembang saat ini

dengan berbagai penemuan dan inovasi baru dalam membawa perubahan menjadi
sebuah informasi. Salah satu teknologi yang berkembang yaitu sistem informasi
geografis dalam menampilkan atau menganalisis sesuatu objek yang menjadi
sebuah informasi di bidangnya. SIG atau GIS (Geographic Information System)
merupakan suatu alat yang dapat digunakan untuk mengelola (input, manajemen,
proses dan output) data spasial atau data yang bereferensi keruangan. Setiap data
yang merujuk lokasi di permukaan bumi dapat disebut sebagai data spasial
bereferensi keruangan. Misalnya data kepadatan penduduk suatu daerah, data jalan-
jalan di kota besar, serta data wilayah yang sering terkena bencana banjir, data
vegetasi dan sebagainya (Nuckols, et al., 2004).

Semakin banyaknya manfaat yang dapat dilakukan dengan penggunaan SIG

ini, maka sistem informasi ini pun yang terus berkembang. Aplikasi SIG yang
sedang berkembang saat ini salah satunya adalah aplikasi SIG berbasis web atau
webGIS. WebGIS merupakan aplikasi pemetaan berbasis web dengan
menggunakan jaringan internet. Perkembangan webGIS ini pun dapat diaplikasikan
dalam berbagai sektor, seperti menampilkan atau mempublikasikan informasi
lokasi pariwisata, bencana alam, perubahan lahan, informasi suatu luasnya wilayah,
perbatasan antar wilayah bahkan antar sebuah negara, penunjuk lokasi, fasilitas,
sumber daya alam, bencana alam dan beberapa informasi terkait lainnya. Informasi
tersebut diperlukan pengguna untuk berbagai keperluan seperti penelitian,
pengembangan dan perencanaan tata ruang wilayah, serta manajemen sumber daya
alam tentang iklim atau cuaca (Sari, 2007).

Walaupun webGIS telah berkembang pesat, namun pemanfaatan webGIS

untuk memvisualisasi data spatio-temporal masih sangat terbatas. Spatio-temporal
dalam SIG biasa digunakan untuk menyimpan informasi tentang posisi objek
spasial dari waktu ke waktu (Wu-jun, et al., 2005). Dalam tugas akhir ini akan

1
dibahas pemanfaatan webGIS untuk visualisasi data spatio-temporal. Data-data
yang akan divisualisasikan ke webGIS berupa tahun pembangunan rumah bantuan,
nama donatur, serta jumlah rumah yang dibangun dari tahun 2005 sampai dengan
2008, pasca bencana Gempa dan Tsunami pada tanggal 24 Desember 2004. Data
geospasial tersebut ditampilkan dalam map markers yang berbeda secara temporal.

Rumah bantuan tersebut adalah rumah yang dibangun pasca gempa dan
tsunami merupakan saat rehabilitasi dan rekonstruksi di Provinsi Aceh dan
Kepulauan Nias dilaksanakan dengan berbagai sumber pendanaan yaitu APBN,
negara-negara atau lembaga-lembaga donor (multilateral dan bilateral), Palang
Merah Internasional dan Indonesia, lembaga swadaya masyrakat (internasional dan
lokal), serta dunia usaha dalam negeri maupun luar negeri (private sector)
(Kuntoro, 2011).

Dalam menyelesaikan tugas akhir ini, perangkat lunak SIG yang digunakan
yaitu GeoServer, Application Programming Interface (API) seperti Openlayers,
Highchart, Timemap Google dan bahasa pemrograman JavaScript, PHP, serta
menggunakan layanan web service untuk menampilkan visualisasi data spatio-
temporal rumah bantuan. Setelah perancangan dan pembuatan webGIS ini juga
dianalisis dengan menggunakan skala kegunaan sistem dari sisi penggunaannya.

1.2. Rumusan Masalah

Berdasarkan dari latar belakang dari penjelasan sebelumnya, maka dalam

masalah ingin dikaji dalam penelitian ini adalah :

1. Masih sangat sedikit webGIS yang menampilkan visualisasi data spatio-

temporal.
2. Rumah bantuan masa rehabilitasi dan rekonstruksi pasca gempa dan tsunami
pada 24 Desember 2004 yang dibangun dengan biaya besar dan datanya spasial
masih tersimpan belum dipublikasikan, sehingga data tersebut dapat dijadikan
sebagai informasi.

2
1.3. Maksud dan Tujuan Penelitian
Maksud dari penelitian ini untuk menampilkan data spatio-temporal melalui
aplikasi SIG berbasis web (webGIS). Tujuan dari penelitian ini adalah sebagai
berikut:
1. Merancang dan membangun webGIS dengan memanfaatkan data spasial
dan non-spasial rumah bantuan yang dibangun pasca bencana Gempa dan
Tsunami pada 26 Desember 2004 yaitu menampilkan lokasi, jumlah, dan
nama donatur secara temporal.
2. Membuat visualisasi data spatio-temporal menggunakan webGIS yang
atraktif sisi dari user interface.

1.4. Manfaat Penelitian

Secara umum hasil dari penelitian ini diharapkan dapat memberi manfaat
terutama bagi penulis dalam memperdalam ilmu SIG dan webGIS. Kemudian,
untuk akademisi dalam bidang webGIS penelitian ini dapat menjadi referensi dalam
mengembangkan SIG berbasis web yang aktraktif dengan menggunkan data spatio-
temporal memanfaatkan framework atau Application Programming Interface
(API). Manfaat lain dari penelitian ini adalah dapat memberikan kepada publik
informasi perkembangan pembangunan rumah bantuan di kota Banda Aceh saat
masa rehabilitasi dan rekonstruksi. Selain itu, webGIS ini juga dapat memberikan
informasi tentang jumlah, lokasi dari masing-masing donatur.

3
 BAB II
TINJAUAN PUSTAKA

2.1. Sistem Informasi Geografis (SIG)

2.1.1. Definisi

Perkembangan teknologi dalam bidang komputer mendorong

perkembangan pembuatan peta dengan format digital (data digital) yang dikenal
dengan SIG. Melalui pengguna digital, pembuatan peta menjadi lebih cepat dan
lebih efisien, sehingga mampu memenuhi kebutuhan informasi yang semakin
meningkat (Mulyadi dan Uli, 2006). SIG terdiri dari tiga kata yaitu sistem,
informasi dan geografis. Menurut Mulyadi dan Uli (2006) adapun pengertian dari
masing-masing konsep tersebut adalah sebagai berikut :

1. Sistem adalah sekumpulan objek, ide, yang saling berhubungan untuk

mencapai tujuan atau sasaran bersama. Untuk mencapai tujuan tersebut
sistem terdiri atas sejumlah subsistem yang saling terkait.
2. Informasi adalah analisis dan sintesis terhadap data. Informasi juga dapat
di katakan sebagai data yang telah diorganisasikan ke dalam bentuk yang
sesuai dengan kebutuhan.
3. Sistem informasi yaitu suatu jaringan kegiatan mulai dari pengumpulan
data, manipulasi, pengolahan dan analisis serta penjabaran data menjadi
informasi.
4. Geografis yaitu persoalan mengenai bumi, yaitu mengenai ilmu yang
mempelajari tentang permukaan bumi, iklim, flora, fauna dan hasil yang
diperoleh dari bumi.
5. Informasi geografis adalah informasi mengenai tempat-tempat yang ada
di muka bumi, pengetahuan mengenai letak suatu objek dimuka bumi,
dan informasi mengenai keterangan yang terdapat dimuka bumi yang
posisinya diberikan atau diketahui.

4
 Sistem informasi merupakan kumpulan dari perangkat keras, perangkat
lunak serta manusia yang akan mengolah data menggunakan perangkat keras dan
perangkat lunak tersebut. Perangkat keras terdiri dari atas mesin dan media.
Perangkat lunak terdiri atas sistem operasi, program dan prosedur. Geografis adalah
informasi mengenai permukaan bumi dan semua objek yang berada di atasnya,
yang menjadi kerangka bagi peraturan dan pengorganisasian bagi semua tindakan
selanjutnya (Pujiono dan Aziz, 2006).

Menurut Pujiono dan Aziz (2006) SIG adalah sebuah teknologi yang
digunakan untuk melihat dan menganalisa data-data yang direpresentasikan dalam
bentuk geografis dan alat untuk mengolah pemetaan lahan dan menganalisa segala
kejadian dipermukaan bumi secara terkomputerisasi, kemuduian
mengintergrasikanya kedalam basis data dan analisis statistik serta
memandukannya dengan analisis geografis secara unik melalui pemetaan atau
menggunakan peta. Teknlogi ini adalah sebagian kecil dari rangkain pengaturan
sebuah sistem informasi secara kesulurahan

SIG merupakan sebuah sistem komputer yang mampu menangkap,

mengelola, mengintegrasikan, memanipulasi, menganalisis, dan menampilkan
informasi geografis. Informasi geografis yang ditampilkan seperti sebuah data
geospasial, letak lokasi, serta luasnya sebuah wilayah, perbatasan dengan bantuan
citra dan sistem koordinat sebagai basis referensi. SIG terintegrasikan dengan lima
komponen utama yaitu perangkat keras, perangkat lunak, data, sumber daya
manusia, dan metode (Bassam, Balqies, 2005). Data SIG tersimpan dengan
beberapa layer untuk mengatasi beberapa masalah teknis yang disebabkan oleh
jumlah informasi data yang begitu besar. SIG memiliki empat fungsional subsistem
utama : (a) input data; (b) penyimpanan data dan pengambilan data (manajemen
dat) ; (c) manipulasi dan analisa; (d) menampilkan (output) (Saleh dan Sadoun,
2005).
Aronoff (1989) menjelaskan bahwa SIG merupakan suatu sistem berbasis
komputer yang memiliki kemampuan dalam menangani data bereferensi geografi
yaitu pemasukan (input) data, manajemen data (penyimpanan dan pemanggilan
kembali), manipulasi dan analisis data, serta keluaran sebagai hasil akhir (output).

5
Hasil akhir (output) dapat dijadikan acuan dalam pengambilan keputusan pada
masalah yang berhubungan dengan geografi.

2.1.2. Model Data SIG

2.1.2.1. Model Data Spasial

Data spasial (informasi lokasi) merupakan sebuah data yang berorientasi
geografis, memiliki sistem koordinat tertentu sebagai dasar referensinya. Data
spasial berkaitan dengan suatu koordinat baik koordinat geografi (lintang dan bujur)
maupun koordinat Cartesian XYZ (absis, koordinat dan ketinggian), termasuk
diantaranya referensi permukaan dan sistem proyeksi (Barkey, 2009). Dalam SIG,
data spasial terbagi dalam dua format, yaitu:
a. Data vektor merupakan bentuk bumi yang direpresentasikan ke dalam
kumpulan garis, area (daerah yang dibatasi oleh garis yang berawal dan
berakhir pada titik yang sama), titik dan nodes (merupakan titik
perpotongan antara dua buah garis)
b. Data raster (atau disebut juga dengan sel grid) yaitu untuk menampilkan,
menempatkan, dan menyimpan konten data spasial dengan
menggunakan struktur matriks atau susunan piksel-piksel yang
membentuk suatu grid. Entitas-entitas spasial model raster juga dapat
disimpan dalam sejumlah layer yang secara fungsionalitas direlasikan
dengan unsur-unsur petanya. Sebagai ilustrasi, beberapa sumber entitas
spasial raster adalah citra satelit (Prahasta, 2002).

2.1.2.2. Model Data Non Spasial

Data non spasial atau data atribut memberikan gambaran atau menjelaskan
informasi berkaitan dengan fitur peta atau coverage SIG. Data atribut dapat
disimpan dalam format angka (numbers) maupun karakter (characters) (Barkey,
2009).

2.1.3. SIG Berbasis Web (webGIS)

6
 Perkembangan ilmu komputer, teknologi jaringan dan teknologi database,
penerapan teknologi webGIS diberbagai bidang telah mencapai perkembangan
yang begitu besar dalam membawa informasi geografis. WebGIS adalah sebuah
teknologi yang menggunakan website teknologi untuk memperluas dan
meningkatkan SIG. Hal ini memungkinkan pengguna aplikasi internet untuk
mencari informasi data spasial, dan sumber daya alam yang berkaitan dengan ilmu
SIG dalam melakukan penelitian. Teknologi webGIS merupakan hasil
pengembangan dari aplikasi dari SIG, yang memungkinkan pengguna SIG untuk
mengakses data spasial SIG secara online (Wang & Ji, 2012)

Menurut Liu (2013) webGIS merupakan kombinasi SIG dan internet yang
mengelola serta menampilkan proses infomasi geografis dan data spasial. Dengan
bantuan komputer, internet, dan aplikasi yang berhubungan dengan SIG, teknologi
webGIS yang terus berkembang salah satunya adalah sebagai dukungan dalam
melakukan penelitian dalam menampilkan informasi data spasial. webGIS
merupakan sebuah web pemetaan atau mapping dengan menggunakan internet,
webGIS tidak berarti hanya menampilkan peta yang berupa gambar statis tetapi juga
memiliki kemampuan dalam menampilkan informasi data atribut (Tanaamah &
Wardoyo, 2008). Gambar 2.1 merupakan salah satu contoh webGIS yang ada di
kota Banda Aceh :

7
 Gambar 2.1. WebGIS Kota Banda Aceh
Sumber: webGIS BAPPEDA Kota Banda Aceh (2015)

webGIS memiliki dua layanan menampilkan informasi geospasial yaitu

Web Map Service (WMS) dan Web Feature Service (WFS). WMS adalah standar
dari Open Geospastial Consortium (OGC) yang digunakan untuk pengiriman dan
penerimaan data gambar geospasial melalui protokol HTTP. Gambar ini dapat
bersumber dari data vektor dan data raster. WMS menyediakan sebuah standar
interface untuk pemanggilan gambar geospasial. Manfaat utama dari WMS adalah
bahwa klien dapat meminta gambar dari beberapa server, dan kemudian
menggabungkannya dalam satu tampilan. WMS menjamin bahwa gambar ini
semua bisa ditumpuk satu sama lain agar dapat menggambarkan keadaan lapangan
yang sebenarnya. Banyak server dan klien yang mendukung WMS.

WFS merupakan layanan publikasi data geospasial pada tingkat fitur data
spasial melalui media web. WFS menggunakan XML (Hyper Markup Language),
GeoJSON, GeoRSS dan GML (Geography Markup Language) serta protokol HTTP
(Hyper Text Transfer Protocol) sebagai media penyampaian (Budiawan, 2010).

2.2. Spatio-Temporal

Spatio-temporal atau ruang waktu merupakan ekspresi waktu yang

digunakan bukan sebagai tujuan informasi melainkan sebagai metode untuk
mendapat informasi. Spatio-temporal SIG biasa digunakan untuk menyimpan
informasi tentang posisi objek spasial dari waktu ke waktu atau objek geografis
mengalami perubahan dalam berbagai pandangan (Wu-jun, et al, 2005). Dalam
SIG data spatio-temporal dibagi menjadi dua jenis informasi yaitu statis dan
dinamis. Informasi statis merupakan informasi tentang fenomena yang terjadi di
alam, sehingga istilah ini digunakan untuk seperti peta kartografi, jalan, penggunaa
fasilitas, perubahan lahan, garis pantai dan sebagainya, yang mungkin tidak berubah
dalam waktu singkat. Kemudian, informasi dinamis yaitu mengacu pada informasi
yang berubah dalam waktu yang singkat, perubahan ini merupakan perubahan
geometri dari waktu ke waktu secara cepat (Hogeweg, 2000).

8
 Menurut Hogeweg (2000) data spatio-temporal dapat divisualisasikan dan
representasikan dalam pengolahan informasi. Beberapa yang didapat lakukan
dengan untuk penyajian informasi spatio-temporal dalam SIG seperti animasi,
representasi 3 dimensi, dan representasi multimedia.

2.2.1. Visualisasi Data

Menurut Olivera (2003) visualisasi data merupakan menyajikan data secara
visual yang berinteraksi langsung dengan pengguna untuk melakukan eksplorasi
dan memperoleh informasi yang terdapat dalam data. Kemudian menurut Mihaly
(2008), visualisasi data adalah sebuah metode untuk mengkomunikasikan sebuah
informasi dengan berbagai cara baik itu dalam bentuk gambar, diagram atau
animasi dan visualisasi digunakan untuk menampilkan data dalam jumlah yang
besar kemudian dipresentasikan dengan berbagai model.
Tujuan dari visualisasi data adalah untuk menghitung atau menyampaikan
informasi baik itu dalam bentuk 1 dimensi (dokumen teks), 2 dimensi (data bidang,
peta geografis atau data peta), 3 dimensi (objek nyata seperti bentuk bangunan,
dsb) dan temporal data yaitu untuk menampilkan data dalam periode tertentu (Sri
Mulyana dan Edi Winarko, 2011). Namun pada penelitin ini informasi yang
disampaikan yaitu dalam bentuk (animasi) data temporal seperti pada gambar 2.2
yang memvisualisasi data temporal tentang sejarah situs arkeologi dari dunia
Mediaterania di Universitas Texas, Austin, Amerika Serikat melalui webGIS
(webGIS GEODIA).

9
 Gambar 2.2 webGIS visualisasi data temporal Arkeologi.
Sumber : geodia.googlecode.com (2015)

Penelitian visualisasi data temporal 3 dimensi dengan SIG pernah dilakukan

oleh Murao et al. (2007) yang berjudul Recovery Curves and Digital City of Chi-
Chi as Urban Recovery Digital Archives yaitu visualisasi data proses pemulihan
pasca gempa di kota Chi-Chi, Taiwan, pada tahun 1999. Data temporal tersebut
yaitu dari tahun 1999 hingga 2006 dengan segala infrastruktur dari sebelum gempa
terjadi hingga saat masa pemulihan rekonstruksi tersebut selesai. Penelitian tersebut
digunakan beberapa metode untuk mendapat informasi yang ditampilkan hingga
divisualisasi dengan menggunakan perangkat lunak Google Sketchup dan Google
Earth. Data yang ditampilkan pada Google Earth berupa infrastruktur setelah masa
rekonstruksi hasil desain dari perangkat lunak Google Sketchup. Namun, penelitian
yang dilakukan oleh Murao et al. (2007) tersebut tidak ditampilkan dalam Sistem
Informasi Geografis berbasis web (webGIS). Akan tetapi proyek penelitian tersebut
dilakukan dengan sangat lengkap menjadikan suatu informasi dan sebagai referensi.

2.3 Application Programming Interface (API)

Application Programming Interface (API) atau antarmuka pemrograman

aplikasi adalah sekumpulan perintah, fungsi, dan protokol yang dapat digunakan
oleh programmer saat membangun perangkat lunak untuk sistem tertentu. API
memungkinkan pengembang untuk memakai fungsi yang sudah ada dari aplikasi

10
lain sehingga tidak perlu membuat ulang dari awal. Pada konteks web, API
merupakan pemanggilan fungsi lewat Hyper Text Transfer Protocol (HTTP) dan
mendapatkan respon berupa Extensible Markup Language (XML) atau JavaScript
Object Notation (JSON). Pemanggilan fungsi ke suatu situs tertentu akan
menghasilkan respon yang berbeda. Format pemanggilan fungsi ini diatur pada
masing-masing penyedia API (Ichwan dan Hakiky, 2011).

2.3.1 OpenLayers API

OpenLayers merupakan perangkat lunak Library JavaScript, Application

Programming Interface (API) untuk menampilkan atau mengedit data spasial,
openlayers yang dikembangkan untuk penggunaan informasi geografi berbasis web
melalui desktop. Openlayers hampir sama dengan Google Maps, Bing Maps,
OpenStreetMap, dan ArcGIS Server, aplikasi ini yang membangun interface yang
fleksibel di browser dengan menggunakan pemrograman JavaScript (.js) (OSGeo,
2014).

2.3.2 TimeMap Google Versi 2.0.1

Timemap adalah library JavaScript atau modul untuk membantu

menggunakan peta digital, seperti Google Map , OpenLayers (OpenStreetMap) ,
dan Bing , dengan widget Simile Timeline. Perpustakaan ini memungkinkan untuk
menambah satu atau lebih data di JSON, KML (Keyhole Markup Language) atau
GeoRSS yang ditampilkan pada timeline. Timemap ditulis dalam bahasa
pemrograman JavaScript dan salah satu modul open source dibawah lisensi MIT
yang dikembang oleh Google developers pada tahun 2010 (Timemap, 2015)

Timemap digunakan untuk memvisualisasikan data temporal dalam bentuk

animasi timeline. Salah satu webGIS yang menggunakan modul ini adalah webGIS
GEODIA yaitu menampilkan tentang sejarah situs arkeologi dari dunia
Mediaterania.

2.3.3. Highcharts API

11
 Highcharts merupakan Bar-chart opensource dari library JavaScript untuk
membuat Bar-chart interaktif untuk web. Produk ini dirilis pada akhir tahun 2009
dan dikembangkan oleh perusahaan Norwegia disebut Highsoft Solutions AS,
dibuat dan didirikan oleh Torstein Honsi. Highchart menyediakan beberapa model
Bar-chart seperti garis, bar, kolom, , pie, kotak plot, dan coloumrange. Highchart
telah dibuat dengan responsive yaitu bisa diakses dalam bentuk mobile, desktop
serta mendukung semua aplikasi browser seperti Internet Explorer (Highcharts,
2015).

Gambar 2.3. Tampilan produk dari Highcharts

Sumber : Highcharts.com (2015)

2.4. GeoServer

GeoServer adalah perangkat lunak server berbasis java yang

memungkinkan pengguna untuk melihat dan mengedit data geospasial. Aplikasi
GeoServer untuk menampilkan informasi spasial, perangkat lunak ini fleksibel
dalam mengolah data dalam membuat peta (map). GeoServer dibangun dengan
GeoTools. GeoTools merupakan Java Toolkit dalam mengembangkan aplikasi java
berdasarkan standar dari OpenGis, dimana GeoServer adalah perangkat lunak open
source. GeoServer dapat diintegrasikan dengan beberapa format database dalam

12
mempublikasikan peta dan data seperti PostGis/PostgeSQL Oracle Spatial, DB2
Spatial, ESRI ArcSDE, Microsoft SQL Server Spatial, dan MySQL Spatial
(GeoServer, 2014).

GeoServer dilengkapi layanan WMS dan WFS serta dapat membuat maps
dengan format yang berbeda, dan GeoServer dapat menampilkan data dengan
aplikasi pemetaan modern seperti Google Maps atau Google Earth , Yahoo Maps,
dan sebagainya (Kommana, 2013). GeoServer dapat membaca berbagai format
data, seperti database, gambar, dan berikut merupakan format data yang didukung
oleh GeoServer:

1. Data vektor yaitu format Shapfile, Java Properties, GML, VPF,

Pregenelized, Features.
2. Data raster yaitu GeoTIFF, ArcGrid, ECW, GTOPO30, ImageMosaic,
JPEG2000, MrSid, NIFT, WorldImage, dll
3. Database (DBMS) yaitu Aplikasi PostGIS, Microsoft SQL Server, DB2,
dll.

Selain GeoServer ada beberapa server lain untuk merancang atau

membangun webGIS baik itu yang opensource maupun komersil salah satunya
adalah MapServer. MapServer merupakan aplikasi Open Source memungkinkan
sebuah peta diakses melalui web. Dalam menampilkan informasi data spasial
MapServer menggunakan bahasa pemrograman PHP (Hypertext Preprocessor),
Pyton, dan java. Mapserver dapat membaca beberapa format vektor dan raster
seperti GeoServer. GeoServer yang digunakan untuk penelitian ini merupakan versi
2.5.

13
 Gambar 2.4. Halaman interface dari server GeoServer
Sumber : geoserver.org (2015)

2.5. Database Manajement System (DBMS)

Database Manajement System (DBMS) adalah sistem perangkat lunak yang

memungkinkan pengguna untuk mendefinisikan, membuat, memelihara dan
mengontrol, mengelola ,dan menyimpan akses ke database (Connolly et al., 2002).
Dalam penelitian ini DBMS yang digunakan adalah PostgreSQL dan Postgis
sebagai ekstensinya.

PostgreSQL merupakan sebuah Object-Relasional Data Base Management

System (ORDBMS) yang dikembangkan oleh Berkeley Computer Science.
Department pada tahun 1977. PostgreSQL adalah sebuah database opensource,
yang mendukung beberapa bahasa pemrograman dalam menyimpan data, baik itu
pemrograman berbasis komputer maupun pemrogram berbasis web, seperti C, C++,
Java, Perl, Python, PHP, dan sebagainya. PostgreSQL memiliki kemampuan
seperti menggabungkan model relasional dengan DBMS lainnya dan mendukung
perintah-perintah standar SQL bahasa query dalam memanipulasi data, seperti
insert, update, ataupun delete (Matthew and Stones, 2005)
PostGIS adalah sebuah ekstensi database spasial untuk PostgreSQL yang
bersifat opensource sebuah fitur sederhana untuk database Structured Query
Language (SQL). PostGIS merupakan Relational Database Management System
(RDBMS ) spasial dari Open Geospastial Consortium (OGC). PostGIS mendukung

14
fitur OGC seperti, titik, garis, polygon, multipoint, multiline, dan geometry
gollection bahkan dalam format geodata (XML) (David, 2012).

Menurut Budiawan (2010) PostGIS merupakan ekstensi dari PostgreSQL

Database Management System. Dengan menambahkan PostGIS pada Postgre SQL,
maka basis data ini akan memiliki kemampuan dalam menyimpan data spasial
seperti data jarak, besar wilayah sebuah negara, persimpangan dan khususnya tipe
data geometri ke dalam basis data sebagai data letak suatu objek pada peta. Secara
fungsionalitas, PosGIS mirip dengan beberapa basis data lain yang mendukung
spasial database yaitu SQL Server 2008 yang sudah mendukung data spasial, ESRI
ArcSDE, Oracle Spatial, dan DB2 spatial extender.

2.6. JavaScript Object Notation (JSON)

JavaScript Object Notation (JSON) adalah format pertukaran data yang

ringan, mudah dibaca dan ditulis oleh manusia, serta mudah diterjemahkan dan
dibuat (generate) oleh komputer. Format ini dibuat berdasarkan bagian dari bahasa
pemrograman JavaScript, standar ECMA-262 edisi ke tiga Desember 1999. JSON
merupakan format teks yang tidak bergantung pada bahasa pemprograman apapun
karena menggunakan gaya bahasa yang umum digunakan oleh programmer
termasuk keluarga C, C++, C#, Java, JavaScript, Perl, Python, dll. Oleh karena
itu sifat-sifat tersebut, menjadikan JSON ideal sebagai bahasa pertukaran-data
(JSON, 2014).

Menurut Hanson ( 2014) JSON memiliki beberapa tipe untuk menyimpan

berbagai jenis data dalam membangun webGIS atau web mapping. Berikut
merupakan tipe dari JSON :

1. GeoJSON, tipe ini digunakan untuk menyimpan data geospasial seperti

poin, titik koordinat seperti garis bujur atau lintang, line, polygon dan
beberapa fitur spasial lainnya.
2. TopoJSON, tipe JSON ini untuk meningkat atas GeoJSON dengan
mengolah data SIG dengan topologi geospasial.

15
 3. ESRI JSON, dan tipe yang terakhir ini menggunakan sintak ESRI yang
mirip dengan GeoJSON, tetapi untuk geometri yang berbeda. Tipe ESRI
JSON biasa digunakan untuk web mapping berbasis ArcGIS Server.

JSON dapat merepresentasikan data dalan terstruktur seperti XML, tetapi

jauh lebih komplek. JSON memiliki tipe data yaitu GeoJSON, tipe data tersebut
merupakan tipe data baru untuk menampilkan informasi data spasial dan non-
spasial (Poorazizi and Alesheikh, 2011).

Peneletian tentang pertukaran format data JSON pernah dilakukan oleh

Dunlu, et al., (2011) berjudul Using JSON for Data Exchanging in Web Service
Applications, yaitu membanding antara JSON dan XML dengan menggunakan
layanan web service dan data yang digunakan merupakan untuk pemetaan. Hasil
dari penelitian tersebut disebutkan bahwa menggunakan format data JSON lebih
cepat dalam menampilkan data dan pertukaran data dapat di proses secara efisien.

2.7 OpenStreetMap

OpenStreetMap adalah suatu layanan web (Web Map Service) yang

menyediakan akses langsung ke server basis data geospasial openstreetmap,
tujuannya adalah hanya untuk mengakses basis data secara langsung. OSM pertama
kali ditemukan di Inggris dan OSM lahir dari sebuah gagasan untuk menciptakan
dan menyajikan data geografis, peta jalan raya secara gratis. OSM berada dibawah
naungan OpenStreetMap Foundation yang dibentuk untuk mendukung
pertumbuhan, perkembangan, dan distribusi data geospasial secara gratis dan
menyajikan data geospasial kepada siapapun untuk digunakan dan berbagi (Barron
et al., 2013)

Data dari OSM adalah data yang bersifat bebas dan terbuka sehingga data
tersebut dapat diunduh dan diakses oleh siapapun secara gratis dan OSM memiliki

16
lisensi General Public License (GPL) sehingga banyak orang dapat
menggunakannya secara bebas. OSM hampir sama dengan Google Map yaitu
dengan menampilkan jaringan atau nama jalan, nama suatu daerah atau
menampilkan permukaan bumi (Barron et al., 2013). Gambar 2.5 dibawah
merupakan tampilan dari OSM.

Gambar 2.5 Tampilan dari OpenStreetMap

Sumber: OpenStreetMap.org (2015)

2.8. Rehabilitasi dan Rekonstruksi

Pasca Gempa dan Tsunami pada 26 Desember 2004 di Aceh dan Nias,
Rekonstruksi dan rehabilitasi menjadi prioritas utama dari sejumlah lembaga besar
internasional dan organisasi di Indonesia. Dalam enam minggu pertama setelah
kejadian bencana gempa dan Tsunami, lembaga donor secara bersama melakukan
penilaian terhadap kerusakan yang terjadi dari investasi Badan Perencanaan
Pembangunan Nasional (BAPPENAS) dan lembaga donor internasional.
Diasumsikan bahwa sekitar 101.000 unit rumah perlu dibangun kembali, 88.000
rumah di Aceh, 13.000 di Nias, dan 95.000 unit rumah perlu direhabilitasi kembali
,71.000 unit rumah di Aceh serta 24.000 unit rumah di Nias Pertengahan tahun 2006
menunjukkan sekitar 40.000 unit rumah sebagian telah selesai, dan sekitar 40.000
masih dalam tahap pengerjaan (Steingber, 2007).

17
 Rehabilitasi dan rekonstruksi merupakan lembaga yang menangani akibat
kerusakan pasca bencana untuk membangun kembali baik dari segi infrastruktur
sarana maupun prasarana. Lembaga ini memiliki tujuan seperti yang tertera di
dalam buku Rencana Induk Rehabilitasi dan Rekonstruksi yaitu membangun
kesepahaman dan komitmen antara pemerintah pusat dengan pemerintah provinsi,
kabupaten/kota, masyarakat, perguruan tinggi atau kalangan akademis, Lembaga
Swadaya Masyarakat (LSM), lembaga donor dan masyarakat internasional dalam
membangun kembali Aceh dan Nias (Adityo, 2005).

Setahun setelah bencana gempa dan tsunami terjadi yaitu pada tahun 2005
Presiden Susilo Bambang Yudhono membentuk sebuah Badan Rehabilitas dan
Rekontruksi (BRR) untuk wilayah provinsi Aceh dan Nias, badan ini memiliki
masa kerja kurun waktu selama lima tahun yaitu 2004-2009 (BRR, 2005). Tugas
dari BRR adalah melaksanakan rehabilitasi dan rekonstruksi di wilayah pasca
bencana di Aceh dan Nias. Tugas rehabilitasi ini antara lain perbaikan dan
pemulihan prasarana dan sarana umum serta pelayanan publik, prasana dan sarana
ekonomi perbankan, keuangan dan dunia usaha khususnya Usaha Kecil dan
Menengah (UKM), kesehatan, psikososial, kehidupan keagamaan, adat istiadat,
pendidikan dan kebudayaan, hak-hak atas tanah dan bangunan, tempat tinggal
sementara yang memadai dan manusiawi, serta rehabilitasi terhadap prasarana dan
sarana yang terkait langsung dengan normalisasi kegiatan pemerintahan dan
kehidupan masyarakat. Sementara itu, tugas dari rekonstruksi yang dilakukan
adalah rekonstruksi penataan ruang, lingkungan hidup dan sumber daya alam,
pembangunan prasarana dan sarana perumahan serta pemukiman, dll (Adityo,
2005).

Selama badan ini melaksanakan tugas untuk merehabilitaasi atau

membangun kembali pembangunan bersama lembaga donor dan Non-
Governmental Organization (NGO), BRR telah membangun 134.000 unit rumah
sudah dibangun, 3.600 km jalan baru, 12 lapangan terbang, 20 pelabuhan laut, dan
hampir 1.500 unit sekolah terbangun, termasuk 39.000 guru mengikuti pelatihan.
Juga 1.000 fasilitas kesehatan, 987 bangunan pemerintah, 195.000 UKM telah
dibantu dan 70.000 hektar lahan pertanian kembali berproduksi (Galih, 2009).

18
2.9. System Usability Scale (SUS)

System Usability Scale (SUS) adalah salah satu metode yang sangat handal
digunakan untuk mengukur kegunaan suatu aplikasi atau sistem berdasarkan
penilaian pengguna. Metode ini pertama sekali dikenalkan oleh John Brooke pada
tahun 1986, yang memungkinkan digunakan untuk mengevaluasi berbagai macam
produk dan jasa, termasuk perangkat keras, perangkat lunak, perangkat mobile,
situs web dan aplikasi. Adapaun beberapa manfaat dari penggunaan metode SUS
diantaranya adalah metode ini sangat mudah digunakan oleh penggunanya, dapat
digunakan pada ukuran sampel yang kecil dengan hasil yang memuaskan, dan
secara efektif dapat membedakan antara sistem yang memiliki penilaian bagus oleh
pennguna atau tidak (Usability.gov, 2014).

Sauro (2011), dalam tulisannya yang berjudul Measuring Usability with the
System Usability Scale (SUS) menjelaskan bahwa metode SUS terdiri dari 10
pertanyaan yang memiliki skala 5 poin berkisar dari sangat tidak setuju sampai
dengan sangat setuju. Terdapat 5 pertanyaan yang bernilai positif dan 5 pertanyaan
yang bernilai negatif. Perhitungan hasil dari metode SUS ini sendiri memiliki
ketentuan sebagai berikut.

1. Untuk setiap pertanyaan yang bernilai positif dan terdapat pada nomor-
nomor ganjil, nilai yang dipilih responden dikurangi 1.
2. Untuk setiap pertanyaan yang bernilai negatif dan terdapat pada nomor-
nomor genap, angka 5 dikurangi dengan nilai yang dipilih responden.
3. Tiap soal akan diperoleh nilai rentang 0 ~ 4 (nilai 4 merupakan respon yang
paling baik).
4. Hasil dari setiap soal dijumlahkan, maka akan menghasilkan nilai skala 0 ~
40.
5. Untuk mengubah nilai skala ke rentang 0 ~ 100, total nilai dikalikan 2,5.
6. Nilai dari setiap soal dijumlahkan dan dibagi dengan jumlah responden,
sehingga dihasilkan nilai rata-rata yang digunakan untuk menentukan grade.
7. Hasil tersebut diinterpretasi menggunakan interpreting SUS score dengan
menggunakan tabel berikut.

19
 Tabel 2.1. Percentile rank pada metode SUS
SUS Score Grade Percentile
Rank Rank (%)

84,1 – 100 A+ 96 – 100

80,8 – 84 A 90 – 95

78,9 – 80,7 A- 85 – 89

77,2 – 78,8 B+ 80 - 84

74,1 – 77,1 B 70 – 79

72,6 – 74 B- 65 – 69

71,1 – 72,5 C+ 60 – 64

65 – 71 C 41 – 59

62,7 – 64,9 C- 35 – 40

51,7 – 62,6 D 15 – 34

0 – 51,7 F 0 – 34

Skor SUS yang dihasilkan akan memberikan gambaran tentang kelayakan

suatu sistem atau aplikasi. Skor SUS berkisar dari nilai 0-100 dengan ketentuan
skor 0-50 digambarkan sebagai nilai not acceptable yang berarti sistem atau
aplikasi tidak layak digunakan, skor 50-70 digambarkan sebagai nilai marginal
yang berarti suatu sistem atau aplikasi sedikit layak digunakan, dan terakhir skor
dengan nilai 70-100 digambarkan sebagai nilai acceptable yang berarti suatu sistem
atau aplikasi sudah cukup layak digunakan oleh pengguna. Berikut adalah gambar
yang menjelaskan tentang kelayakan suatu sistem atau aplikasi menggunakan
metode SUS.

20
 Gambar 2.6. Kriteria perhitungan hasil skor
menggunakan metode SUS
Sumber : Sauro (2011)
Rumus yang digunakan untuk mendapatkan nilai percentile range pada metode
SUS adalah sebagai berikut.

(𝐵𝑎𝑡𝑎𝑠 𝑎𝑡𝑎𝑠 𝑃𝑒𝑟𝑐𝑒𝑛𝑡𝑖𝑒𝑙 𝑅𝑎𝑛𝑘 − 𝐵𝑎𝑡𝑎𝑠 𝑏𝑎𝑤𝑎ℎ 𝑝𝑒𝑟𝑐𝑒𝑛𝑡𝑖𝑙𝑒 𝑅𝑎𝑛𝑘)

𝑃𝑒𝑟𝑐𝑒𝑛𝑡𝑖𝑙𝑒 𝑅𝑎𝑛𝑘 = ( )
(𝐵𝑎𝑡𝑎𝑠 𝑎𝑡𝑎𝑠 𝑆𝑈𝑆 𝑠𝑐𝑜𝑟𝑒 𝑟𝑎𝑛𝑘 − 𝐵𝑎𝑡𝑎𝑠 𝑏𝑎𝑤𝑎ℎ 𝑆𝑈𝑆 𝑠𝑐𝑜𝑟𝑒 𝑅𝑎𝑛𝑘)

∗ 𝐵𝑎𝑡𝑎𝑠 𝑎𝑡𝑎𝑠 𝑝𝑒𝑟𝑐𝑒𝑛𝑡𝑖𝑙𝑒 𝑟𝑎𝑛𝑘(𝑆𝑈𝑆 𝑠𝑐𝑜𝑟𝑒 𝑦𝑎𝑛𝑔 𝑑𝑖𝑑𝑎𝑝𝑎𝑡 − 𝐵𝑎𝑡𝑎𝑠 𝑏𝑎𝑤𝑎ℎ 𝑆𝑈𝑆 𝑠𝑐𝑜𝑟𝑒 𝑟𝑎𝑛𝑘)
+ 𝐵𝑎𝑡𝑎𝑠 𝑎𝑡𝑎𝑠 𝑝𝑒𝑟𝑐𝑒𝑛𝑡𝑖𝑙𝑒 𝑟𝑎𝑛𝑘

BAB III

21
 METODELOGI PENELITIAN

3.1. Tempat dan Waktu Penelitian

Pelaksanaan tugas akhir, penulis melakukan penelitian di kota Banda Aceh.

Jangka waktu penelitian antara Desember 2014 hingga Juni 2015.

3.2. Alat dan Data

3.2.1. Alat

Penelitian ini dilakukan dengan menggunakan sebuah laptop merk Acer

dengan prosesor intel Core i5 sebagai dukungan untuk menyelesaikan penelitian ini
dalam membangun sistem informasi berbasis web (webGIS). Beberapa perangkat
lunak yang dibutuhkan antara lain :

1. Sistem Operasi
- Windows 8
2. Perangkat lunak
- GeoServer 2.6
- ArcGIS 10.1 (trial)
- OpenStreetMap
- Notepad ++
- PostgreSQL 1.20 dan Postgis
- XAMPP
3. Framework
- Boststrap css
- OpenLayers API
4. Bahasa pemrograman
- PHP
- JavaScript
- HTML
- CSS
- GeoJSON (.json)

22
3.2.2. Data

Data-data yang digunakan untuk penelitian ini merupakan data yang

diperoleh dari Laboratorium SIG dan Data Spasial jurusan Informatika FMIPA,
Universitas Syiah Kuala. Data yang digunakan untuk penelitian (webGIS) ini
berjumlah 25 desa dari 5 kecamatan di kota Banda Aceh. Tabel 3.2 berikut adalah
nama data desa dan kecamatan yang ditampilkan pada webGIS.

Tabel 3.1. Nama-nama kecamatan dan desa yang digunakan

untuk penelitian (webGIS)
No. Nama Kecamatan Nama Desa

a. Lamjame
b. Lampoh Daya
1. Jaya Baru c. Lamteumen Barat
d. Lamteumen Timur
e. Punge Blang Cut

a. Lambaro Skep
b. Lamdingin
2. Kuta Alam
c. Lampulo
d. Gampong Mulya

a. Gampong Jawa
3. Kuta Raja b. Merduati
c. Peulanggahan

a. Alue Deah Teungoh

b. Asoe Nanggroe
c. Deah Baro
d. Deah Glumpang
f. Gampong Baro
4. Meuraksa e. Lambung
f. Lamjabat
g. Lampaseh Aceh
h. Punge Jurong
i Punge Ujong
j. Ulee Lheue

a. Jeulingke
5. Syiah Kuala b. Rukoh
c. Tibang

23
1. Data Spasial

 Batas administrasi kecamatan dan desa kota Kota Banda

 Shapefile (hasil digitasi rumah bantuan)

2. Data Non Spasial

 Tahun pembangunan rumah bantuan dari donatur yaitu mulai 2005

sampai dengan 2008, dengan jumlah 28 donatur.
 Data lokasi rumah bantuan kecamatan dan desa.

Gambar 3.1 Peta desa dan titik lokasi rumah bantuan

24
3.3. Metode Penelitian

Metode yang digunakan dalam penelitin ini ditampilkan dalam gambar 3.2
berikut :

Mulai

Perumusan Masalah

Studi Literatur

Pengumpulan Data

Data Spasial Data Non-Spasial

1. Batas Administrasi kota Banda Aceh 1. keterangan tahun, dan nama donatur

2. Titik Lokasi Rumah Bantuan 2. Nama lokasi atau desa rumah bantuan

Perancangan Sistem

Pembuatan Sistem

Pengujian dan Analisis

Sistem

Hasil

Selesai

Gambar 3.2 Cara Kerja

1. Perumusan masalah
Tahap awal dalam menyelesaikan penelitian yaitu dengan
mengatahui apa saja masalah, dan tujuan penelitian yang akan
dilakukan. Hal ini merupakan untuk mengetahui ruang lingkup

25
 penelitian akan dikaji. Perumusan masalah adalah bagian untuk
menjabarkan tentang permasalahan, tujuan, serta manfaat dalam
penelitian yang dilakukan. Pada tahap ini, membuat batasan masalah
dianggap penting agar penelitian yang dilakukan tidak terlalu luas.

2. Studi Literatur
Pada tahap ini dilakukan pendalaman atau pengetahuan dasar
tentang SIG dalam merancang webGIS dengan mencari jurnal, skripsi,
tesis, bahkan buku sebagai referensi yang berkaitan, serta mencari
informasi tentang rumah bantuan yang dibangun pasca gempa dan
tsunami tahun 2004 dan pendonor rumah bantuan dari lembaga
internasional, maupun pendonor dari nasional. Studi literatur dilakukan
untuk mendapatkan konsep-konsep teoritis yang berhubungan dalam
metode penelitian yang dapat membantu pemecahan masalah.

3. Pengumpulan Data
Data yang dikumpulkan merupakan data hasil survey penelitian
Aftermath of Aid (AoA) dari Laboratorium SIG dan Data Spasial
Universitas Syiah Kuala berupa batas wilayah kota Banda Aceh, serta
data spasial dan non-spasial yang berhubungan dengan penelitian.

4. Perancangan Sistem dan Pembuatan Sistem

Tahap perancangan sistem dalam penelitian ini merupakan dari
hasil pengumpulan data spasial yang akan diolah dan perancangan basis
data (database) mengggunakan PostgreSQL dan GeoServer, serta
perancangan sistem, dan perancangan interface. Dalam perancangan
berhubungan dengan data spasial dan non-spasial, menampilkan
beberapa menu tools di-user interface untuk menampilkan data spasial
dan non-spasial secara temporal.
Pembuatan sistem yaitu tahapan untuk merealisasikan proses
perancangan, dengan instalasi perangkat lunak. Dalam pembuatan ini
akan didesain menu dan tools untuk kemudahan user dalam mengakses

26
 webGIS tentang informasi dari hasil akhir. Dimana dalam webGIS
memvisualisasikan data spatio-temporal.

5. Pengujian Sistem dan Analisis Sistem

Pada tahap ini bertujuan untuk memastikan bahwa semua fungsi
dan fitur yang diimplementasikan ke sistem webGIS dalam penelitian
telaberjalan dengan baik sesuai kebutuhan dan memberi kemudahan
kepada pengguna dalam mengaskses informasi didalamnya. Proses
pengujian akan menghasilkan output berupa kelebihan dan kekurangan
dari webGIS yang telah dirancang tersebut.
Analisis dan perbandingan dalam penelitian ini dilakukan untuk
melihat fungsi nyata dari sistem aplikasi yang dibangun. Penelitian ini
menganalisis skala dengan kegunaan sistem System Usability Scale
(SUS).

27
 BAB IV
HASIL DAN PEMBAHASAN

4.1. Implementasi Sistem

Berdasarkan dari rancangan sistem webGIS yang telah dijelaskan pada Bab
III, implementasi webGIS visualisasi data spatio-temporal rumah bantuan dimulai
dari instalasi sistem, input data ke database, konfigurasi database dengan server,
input data dari database ke server, kemudian server akan mengirim layanan web
service WFS dari GeoServer. Arsitektur webGIS untuk sistem yang dibangun ini
dapat dilihat pada gambar 4.1. di bawah ini. Penjelasan lebih lanjut dapat dilihat
pada uraian berikut ini.

Gambar 4.1. Arsitektur webGIS

4.2. Pengumpulan Data

4.2.1. Data Spasial

Data spasial terdiri dari atas dua format yaitu data vektor (point, polyline,
polygon, circle, dan ellipse) dan data raster (JPEG, PNG, TIFF, dll). Data raster
merupakan data yang menampilkan permukaan bumi hasil dari foto citra satelit.

28
Data vektor yang digunakan dalam penelitian ini adalah batas administrasi wilayah
kecamatan kota Banda Aceh, dan rumah bantuan Kota Banda Aceh. Batas
administrasi Kota Banda Aceh merupakan batas tahun 2012 diperoleh dari
Laboratorium SIG dan Data Spasial, Universitas Syiah Kuala. Data spasial rumah
bantuan kota Banda Aceh sebanyak 26 desa dari 5 kecamatan.

Gambar 4.2. Batas Administrasi Kota Banda Aceh

Gambar 4.3. Lokasi Rumah Bantuan 26 desa dari 5 Kecamatan

29
 Data-data rumah bantuan kota Banda Aceh gambar 4.3 merupakan hasil
survey peneltian Aftermath of Aid (AoA) yang diperoleh dari Laboratorium SIG
dan Data Spasial, Universitas Syiah Kuala.

4.2.2. Data Non – Spasial

Data non-spasial dalam penelitian ini terdiri dari informasi rumah bantuan
berupa nama kabupaten, kecamatan, nama desa, identitas desa, provider atau
donatur, dan tahun pembangunan rumah bantuan tersebut.

Gambar 4.4. Data Atribut Informasi rumah bantuan

4.3. Pengolahan Data

Data-data rumah bantuan yang diperoleh masih dalam format shapfile

(.shp), sebelum data tersebut ditampilkan ke webGIS maka diperlukan beberapa
proses yang dilakukan terhadap data seperti membersihkan (cleaning), konversi,
dan memasukkan nilai koordinat (latitude, longitude). Perangkat lunak yang
digunakan dalam pengolahan data untuk penelitian ini adalah ArcGIS Desktop 10.1
trial. Berikut dijelaskan langkah-langkah proses pengolahan data shapefile hingga
menjadi data yang dapat digunakan untuk penelitian ini pembuatan webGIS data
spatio-temporal kota rumah bantuan kota Banda Aceh.

30
4.3.1. Membersihkan data

Pada tahap ini, data yang telah dikumpulkan sebelumnya dibersihkan

(cleaning). Proses pembersihan dilakukan karena beberapa atribut tidak dibutuhkan
untuk penelitian ini, seperti atribut rumah pribadi, nomor rumah, ruko, perkantoran
hingga nama tempat ibadah seperti mesjid.

Gambar 4.5. Data yang belum dilakukan proses cleaning

Hasil dari proses cleaning hanya tinggal beberapa atribut seperti nama
kabupaten atau kota, nama kecamatan, nama desa, identitas desa, provider atau
donatur rumah bantuan, dan tahun pembangunan rumah bantuan.

Gambar 4.6. Data hasil dari proses cleaning

31
4.3.2. Konversi Data

Setelah tahap proses cleaning dilakukan data-data spasial rumah bantuan

masih dalam bentuk polygon, maka dikonversi ke dalam bentuk point, hal ini
dilakukan agar lebih mudah menentukan titik koordinat.

Gambar 4.7. Data masih bentuk polygon

Pada gambar 4.6 diatas merupakan salah data yang masih asli atau original
yaitu desa Lamjame Kecamatan Jaya Baru yang belum dilakukan proses konversi
dari polygon ke point. Kemudian konversi data dari polygon ke point dilakukan
dengan menggunakan tools yang telah disediakan perangkat lunak ArcMap yaitu
ArcToolbox. Dalam ArcToolbox terdapat tools Data Management Tools, dalam
tools ini terdapat fitur konversi yaitu Feature to Point.

32
 Gambar 4.8. Proses konversi polygon ke point

Gambar 4.9. Hasil konversi polygon ke point

4.3.3. Memasukkan Titik Koordinat

Pada tahap ini merupakan proses tahap terakhir yang dilakukan

menggunakan perangkat lunak ArcGis atau ArcMap dengan memasukkan titik
koordinat ke seluruh data yang digunakan yaitu data rumah bantuan. Pada Proses

33
ini masih menggunakan tools Data Management Tools yang ada pada ArcToolbox.
Fitur yang digunakan untuk memasukkan titik koordinat adalah Add XY
Coordinates.

Gambar 4.10. Memasukkan titik koordinat

Gambar 4.11. Hasil input titik koordinat

Gambar 4.11 merupakan hasil dari memasukkan titik koordinat

menggunakan fitur dari ArcMap 10.1. Data-data tersebut yang digunakan untuk
mengimplementasi atau pembuatan webgis dan dimasukkan ke database. Langkah-

34
langkah diatas dilakukan untuk semua data yaitu 26 desa dari 5 kecamatan di kota
Banda Aceh.

4.3.4. Memasukkan Data ke Database

Pada tahap ini merupakan tahap awal setelah pengolahan data dalam
merancang atau membuat webGIS dalam memasukkan data ke database. Data yang
dimasukkan ke database berupa data-data shapfile.

Gambar 4.12. Impor data ke database menggunakan PostGIS

Gambar 4.13. Data yang telah dimasukkan ke database

Gambar 4.12 adalah proses memasukkan data dengan menggunakan

PostGIS. Sebelum data diimpor ke database maka dilakukan koneksi untuk
menghubungkan antara database PostgreSQL dengan Postgis. Sedangkan pada

35
gambar 4.13 merupakan data-data yang telah dimasukkan ke database yaitu 26
desa.

4.3.5. Menghubungkan Database dengan Server

Tahap ini merupakan proses dimana data yang didalam database akan di
masukkan atau akan dihubungkan dengan server. Hal ini dilakukan karena
pembuatan webGIS dengan menggunakan format json (.json) yaitu geojson.

Gambar 4.14. Proses menghubungkan server dengan database

Gambar 4.15. Tampilan data dalam GeoServer data yang telah diimpor dari
database

36
4.4. Perancangan WebGIS Data Spatio-Temporal

Perancangan webGIS data spatio-temporal rumah bantuan kota banda aceh

ini dibangun dengan menggunakan Rhythm template Wordpress opensource
sebagai basis halaman utama user interface serta meggunakan library Openlayers
API untuk membangun aplikasi pemetaan, layer dan fitur SIG seperti
OpenStreetMap. Selain menggunakan Openlayers pada basis halaman utama juga
menggunakan modul timemap, widget Timeline Simile sebagai visualisasi data
temporal. API terakhir yang digunakan untuk menampilkan bar-char dalam
pembuatan webgis ini adalah Higchart API.

Secara umum, sistem aplikasi webGIS ini menerapkan fungsi JavaScript,

PHP, Jquery, CSS serta html5 dan Boostrap css untuk tampilan interface. Html5
dan Bootstrap merupakan framework untuk membangun desain web secara
responsif dan menarik. Artinya, tampilan web yang dibuat oleh bootstrap
menyesuaikan ukuran layar dari browser yang digunakan baik di komputer, tablet
ataupun telepon seluler yang mendukung html5.

Perancangan webGIS dilakukan dengan mengkombinasikan data spasial

dan data atribut. Kemudian hasil yang diperoleh dari shapefile (.shp), pengolahan
data spasial, database dan server dijadikan satu perancangan webGIS data spatio-
temporal sebagai informasi rumah bantuan. Gambar 4.16 adalah interface webGIS
spatio-temproal.

37
 Gambar 4.16. Halaman utama user interface

4.4.1. Menampilkan Data

4.4.1.1. Koneksi Data Server

Koneksi ke data server yang digunakan dalam penelitian ini menggunakan

script php sebagai sebuah layanan perantara untuk memperoleh data dari server dan
menampilkan ke halaman utama. Data yang diterima oleh halaman utama
merupakan sebuah link url (uniform resource locator) berformat json dari service
WFS (Web Feature Service) server.

Gambar 4.17. Tampilan output dari server (GeoServer)

38
Berikut adalah script php yang digunakan sebagai layanan memperoleh data dari
server GeoServer dengan nama proxy.php :
<?php
$nama_desa = $_GET['desa'];
$str_url="http://localhost:8080/GeoServer/bandaaceh/
ows?service=WFS&version=1.0.0&request=GetFeature&typ
eName=bandaaceh:".$nama_desa."&outputFormat=applicat
ion/json";
$url=file_get_contents($str_url);
echo ($url);
?>
Gambar 4.18. Fungsi layanan memanggil data dari server

4.4.1.2. Halaman Utama (index.php)

Halaman utama sebagai halaman main page untuk penelitian ini. Halaman
ini berisi script bahasa pemrograman yang digunakan untuk menampung data,
query data, query format, dan menampilkan peta, teks maupun fungsi-fungsi pada
halaman user interface webGIS. Berikut adalah fungsi untuk menampung data
server dengan memanggil link url:

var desa=window.location.href;
desa=desa.substring(desa.indexOf('=')+1,desa.lastIndexOf('&'));
var alamat="examples/php/proxy.php?desa="+desa;

if(desa=="http://localhost/webgis/index.php"){alamat=""}

Gambar 4.19. Fungsi menampung data dari server

Data-data yang tampung oleh index.php berupa dalam bentuk point yaitu
dengan format json output dari server. Berikut adalah fungsi titik koordinat yang
akan menampung data tersebut :

"point": {
"lat" : data.properties.point_y,
"lon" : data.properties.point_x
}
Gambar 4.20. Fungsi menampung titik koordinat

39
 loader.transform = function(data) {
if(data.properties.provider=='BRR'){col="green"}
else if(data.properties.provider=='P2KP'){col="red"}
else if(data.properties.provider=='YBI'){col="blue"}
elseif(data.properties.provider=='UNDP'){col="olive"}
elseif(data.properties.provider=='CRS'){col="salmon"}
elseif(data.properties.provider=='PMI'){col="violet"}
elseif(data.properties.provider=='Diakonie'){col="cyan"}

Gambar 4.21. Fungsi untuk mengubah format data, nama provider yang
akan muncul dari server

4.4.1.3. Timeline

Timeline yang digunakan pada webGIS merupakan sebagai temporal untuk

melihat tahun pembangunan rumah bantuan. Timeline yang digunakan disini adalah
dari modul Timemap yang menghubungkan antara peta digital OpenSreetMap dan
data yang ditampilkan adaalah data dari server. Gambar 4.22 Berikut merupakan
tampilan timeline untuk yang menampilkan tahun pembangunan rumah bantuan. .

Gambar 4.22. Tampilan Timeline

4.3.1.4 .Map

Map atau peta digital yang digunakan disini adalah OpenStreetMap (OSM).
Map digital merupakan ditampilkan secara online yang ditampung oleh library
Openlayers hasil dari konfigurasi antara modul Timemap. Gambar 4.23 adalah
tampilan map dari OSM.

Gambar 4.23. Tampilan Map digital dari OSM

40
 OpenLayers.Layer.OSM = OpenLayers.Class(OpenLayers.Layer.XYZ, {
name: "OpenStreetMap",
url:["http://a.tile.openstreetmap.org/${z}/${x}/${y}.png",
"http://b.tile.openstreetmap.org/${z}/${x}/${y}.png"

Gambar 4.24. Kode menampung OSM oleh library OpenLayers

Layer batas kota banda aceh yang berwarna biru dalam map pada gambar
gambar 4.22 yang dibuat dalam bentuk polygon dengan geojson (.json) ouput dari
server, kemudian dimasukkan ke halaman utama (index.php). Gambar 4.25
dibawah adalah kode geojson untuk batas desa yang ditampilkan pada map, dan
gambar 4.26 merupakan fungsi kode pemrograman yang menampung batas desa
pada yang ditampilkan gambar 4.23.

title: "syiah kuala",

id: "syiah kuala",

theme: "blue",

type: "basic",

options: {

items: [

"polygon" :[

{"lon":95.32668178400007," lat":5.58702299600003},

{"lon":95.32665105800004, "lat":5.587025244000074},

],

],

"title" : "alue naga"

},{

"polygon" : [

{"lon":95.36977864600004,"lat":5.6088825300000735},

41
 {"lon":95.37034971700007,"lat":5.608704070000044},],

"title" : " deah raya"

},{"

],

Gambar.4.25. Kode geosjon batas desa kota banda aceh

include "batas/batas_wilayah.json";
Gambar4.26. Fungsi untuk menampung batas desa kota banda aceh

4.3.1.5 Menu user Interface

Pada webGIS ini, terdapat beberapa panel menu interface sebagai
kemudahan pengguna mengakses isi konten, seperti menu “Home”, “Provider”,
“Location”, “Bar-Chart”, “Table” dan “Help”. Fungsi menu Home sebagai kembali
ke beranda atau kembali ke awal semula (default). Dan menu terakhir adalah menu
Help, menu help ini berfungsi sebagai keterangan atau informasi lain dari isi
webGIS. Menu-menu tersebut dapat dilihat pada gambar 4.27

Gambar 4.27. Tampilan menu bar

Saat pengguna menekan tombol menu “Provider” maka muncul nama

lembaga donatur yang membangun rumah bantuan baik itu dari dalam negeri
maupun dari luar negeri yaitu dengan jumlah donatur 28 lembaga. Jika pengguna
memilih salah satu nama dari donatur maka akan ditampilkan seluruh nama donatur
tersebut disetiap desa yang dibangun berdasarkan tahun pembangunan. Pada
gambar 4.27 merupakan tampilan dari menu tombol Provider.

42
 Gambar 4.28. Tampilan nama donatur pada tombol menu provider

Gambar 4.29. Tampilan ikon markers dan gambar tipe rumah dari donatur

Gambar 4.28 adalah salah tampilan nama donatur yang dipilih pada menu
provider yaitu donatur International Organization for Migration (IOM). Ikon
markers yang bentuk rumah yang memiliki warna antara putih sebagai tanda bahwa
rumah tersebut adalah rumah yang dibangun oleh IOM di desa Lamjame kecamatan
Jaya Baru. Setiap donatur akan muncul dengan ikon markers dan gambar tipe
rumah yang berbeda. Untuk melihat tahun pembangunan dapat dilihat menu

43
timeline yang bergaris warna biru. Gambar 4.29 merupakan kode atau fungsi yang
memanggil data danatur yang akan muncul pada map.

tm = TimeMap.init({

mapId: "map",

timelineId: "timeline",

datasets: [

<?php

if(isset($_GET['desa']) && $_GET['desa']!=""){

echo "

title: \"set 1\",

type: \"custom\",

options: {

url: alamat,

},";

}else{

$all = ["asoe_nanggroe","alue_deah_teungoh",

"deah_glumpang",

"gampong_baro","gampong_jawa","gampong_mulya",

"jeulingke","lambaro_skep","lambung",

"lamdingin","lamjabat","lamjame","lampaseh_aceh",

"lampoh_daya","lampulo","lamteumen_barat",

"lamteumen_timur","merduati"," peulanggahan",

"punge_blang_cut","punge_jurong","punge_ujong",

"rukoh","tibang","ulee_lheue"];

foreach($all as $alamat){

echo "

44
 {

title: \"set 1\",

type: \"custom\",

options: {

url: \"examples/php/proxy.php?desa=$alamat\",

},";

Gambar 4.30. Fungsi untuk menampung memuncul data provider

Sedangkan pada menu “Location” yaitu berisi nama-nama wilayah

kecamatan dan desa letak atau lokasi rumah bantuan. Jika pengguna memilih dari
salah nama kecamatan dari menu “Location” maka akan muncul tampilan nama-
nama desa. Pada map akan muncul ikon-ikon markers dan gambar tipe rumah dari
donatur. Gambar 4.30 adalah tampilan dari menu Lokasi.

45
 Gambar 4.31. Tampilan hasil dari menu dropdown Location di desa
Lamteumen Timur

Kemudian pada menu “Bar-Chart” adalah menampilkan jumlah

pembangunan rumah bantuan yang dibangun oleh donatur atau provider. Apabila
pengguna memilih dari salah satu nama desa pada bar-chart tersebut maka mucul
nama donatur dan jumlah rumah yang dibangun. Bar-chart di dalam webGIS ini
menggunakan Highchart API, dan data yang ditampilkan merupakan dari database.
Bar-chart tersebut dapat dilihar pada 4.31.

Gambar 4.32. Tampilan Bar-chart jumlah rumah bantuan

46
 Gambar 4.33. Tampilan nama-nama provider pada bar-chart

Gambar 4.33 adalah tampilan nama provider dan jumlah yang di bangun
hasil dari salah satu nama desa yang dipilih pada gambar 4.31 adalah fungsi untuk
menampilkan data tersebut dari database:
<?php
$dbcon= pg_connect("host='localhost' user='postgres' password='postgres'
dbname='web-gis'");
$series = <<<HEREDOC
series: [{
name: 'Jumlah',
colorByPoint: true,
data: [
HEREDOC;
$drilldown = <<<HEREDOC
]}],
drilldown: {
series: [
HEREDOC;
?>
$query = "SELECT provider FROM alue_deah_teungoh ";

$result = pg_query($dbcon, $query) or die("Error in query:

$query. " . pg_last_error($dbcon));

$rows = pg_num_rows($result);

$adt ;

$adt[0]=0;

$adt[1]=0;

$adt[2]=0;

47
$adt[3]=0;

if ($rows != 0)

while ($row = pg_fetch_row($result))

//echo $row[4];

if ($row[0]=="BRR" ) {

$adt[0]++;

if ($row[0]=="CARITAS" ) {

$adt[1]++;

if ($row[0]=="YBI" ) {

$adt[2]++;

if ($row[0]=="OXFAM" ) {

$adt[3]++;

$x = $adt[0]+$adt[1]+$adt[2]+$adt[3];

$series = <<<HEREDOC

$series {

name: 'Alue Deah Teungoh',

y: $x,

drilldown: 'alue deah teungoh'

},

HEREDOC;

$drilldown = <<<HEREDOC

48
 $drilldown {

id: 'alue deah teungoh',

data: [

['BRR', $adt[0]],

['CARITAS', $adt[1]],

['YBI', $adt[2]],

['OXFAM', $adt[3]]

},

HEREDOC;

pg_free_result($result);

Gambar 4.34. Fungsi koneksi data dari database untuk bar-chart atau Bar-chart

<?php include 'indexbarchart.php'; ?>

Gambar 4.35. Fungsi untuk menampilkan bar-chart pada index.php

Tulisan merah pada gambar 4.34 diatas adalah untuk melakukan koneksi ke
database yang ditampilkan pada barchart, sedangkan pada warna biru adalah
sebagai menampilkan data awal perdesa, dan terakhir pada warna hitam adalah
fungsi untuk melihat nama donatur dan jumlah rumah dibangun. Kemudian pada
gambar 4.34 adalah fungsi untuk menampilkan data bar-chart pada halaman utama
(index.php).

Menu “Table” berfungsi untuk menampilkan tabel jumlah pembangunan

rumah yang dibangun oleh donator dengan pertahun dari 2005 hingga 2008, dan
donatur berjumlah 28 lembaga donatur. Gambar 4.35 merupakan tampilan tabel
jumlah rumah yang dibangun.

49
 Gambar 4.36. Tampilan tabel jumlah rumah yang dibangun

4.4.1.6. Halaman Help

Halaman help ini dibuat untuk dapat memberikan bantuan informasi tentang
aplikasi webGIS atau informasi maksud dari fitur dan objek yang ada didalam
webGIS. Halaman help ini menjelaskan kepanjangan dari lembaga, gambar ikon,
dan link website untuk informasi donatur. Halaman help dilihat pada gambar 4.37.

50
 Gambar 4.37. Halaman Help

4.5. Pengujian Sistem

Pengujian dilakukan untuk mengetahui nilai dari webGIS yang telah

dirancang atau dibuat berdasarkan penilain dari pengguna. Hal ini merupakan salah
satu tujuan perancangan webGIS data spatio-temporal rumah bantuan kota Banda
Aceh sebagai sarana informasi untuk melihat tahun, jumlah, desa atau kecamatan,
dan donatur yang membangun rumah tersebut. Pengujian sistem atau metode yang
dilakukan dengan melibatkan pengguna dari mahasiswa, pegawai kantor
BAPPEDA Provinsi Aceh dan staf peneliti rumah bantuan Aftermath of Aid (AoA)
di kota Banda Aceh.

Metode analisis pengujian yang digunakan yaitu dengan SUS. Metod ini
berfungsi untuk melihat persentase penilaian pengguna atau kegunaan dari sistem
yang telah dibuat. Metode SUS terdiri dari 10 pertanyaan yang memiliki skala 5
poin berkisar dari “sangat tidak setuju”, “tidak setuju”, “netral”, “setuju” dan
“sangat setuju”. Dari 10 pertanyaan tersebut terdapat 5 pertanyaan yang bernilai
positif dan 5 pertanyaan yang bernilai negatif. Nilai hasil dari kuesioner dari
responden dapat dilihat pada tabel 4.1.

51
 Tabel. 4.1. Hasil perhitungan kuesioner webGIS Data spatio-temporal
PERTANYAAN SUS
Responden
No. No. No. No. No. No. No. No. No. No. Score
1 2 3 4 5 6 7 8 9 10

1 5 2 5 1 3 2 4 1 5 1 35.0
2 4 2 4 2 4 3 4 2 4 2 29.0
3 4 2 4 3 4 2 4 2 4 5 26.0
4 5 2 4 3 4 2 4 2 4 4 28.0
5 5 3 4 5 5 2 4 2 3 4 25.0
6 5 2 4 1 4 2 4 1 3 1 33.0
7 3 2 5 2 4 2 4 2 4 2 30.0
8 3 2 4 2 4 2 4 2 4 3 28.0
9 4 2 4 1 4 2 3 2 4 2 30.0
10 3 2 4 3 4 2 4 2 4 3 27.0
11 4 2 4 2 4 3 4 1 4 2 30.0
12 5 2 5 2 4 2 4 2 5 2 33.0
13 4 2 5 2 4 1 4 2 3 2 31.0
14 3 2 4 2 4 1 5 2 3 2 30.0
15 4 2 4 2 4 2 4 1 4 2 31.0
16 4 2 4 2 4 2 4 2 4 3 29.0
17 3 2 4 1 4 2 4 2 3 1 30.0
18 4 2 4 2 4 1 3 2 3 2 29.0
19 4 2 4 2 4 2 3 2 4 1 30.0
20 4 2 4 2 5 2 4 1 5 2 33.0
21 4 3 4 3 4 2 4 2 4 2 28.0
22 4 3 4 1 4 1 4 2 4 1 32.0
12 3 2 4 2 4 2 4 2 4 2 29.0
24 3 2 5 2 4 2 4 1 4 1 32.0
23 4 3 4 2 3 3 4 1 3 3 26.0
26 4 2 5 2 4 2 4 2 4 2 31.0
27 4 3 4 3 5 2 4 3 3 3 26.0
28 3 2 4 2 4 1 4 2 4 3 29.0
29 3 3 4 2 4 3 4 2 4 2 27.0
30 4 1 4 2 4 2 5 1 3 2 32.0

Total SUS Score 74.1

Berdasarkan dari tabel 4.1 diatas, maka nilai hasil tiap-tiap kuesioner
dengan menggunakan ketentuan dari metode SUS menghasilkan skor perhitungan
adalah sebesar 74.1. Kemudian hasil skor tersebuit dilakukan perhitungan dengan

52
percentile rank untuk pengujian sistem webGIS data spatio-temporal yang
menghasilkan skor akhir berdasarkan interprenting SUS dapat dilihat pada tabel
4.2.

Tabel 4.2 Hasil perhitungan percentile rank pengujian

sistem webGIS Data spatio-temporal
SUS Score Rank Grade Percentile Rank (%)

84,1 – 100 A+ 96 – 100

80,8 – 84 A 90 – 95

78,9 – 80,7 A- 85 – 89

77,2 – 78,8 B+ 80 - 84

74,1 – 77,1 B 70 – 79

72,6 – 74 B- 65 – 69

71,1 – 72,5 C+ 60 – 64

65 – 71 C 41 – 59

62,7 – 64,9 C- 35 – 40

51,7 – 62,6 D 15 – 34

0 – 51,7 F 0 – 34

Pada Tabel 4.2 diatas, terlihat bahwa nilai 74.1 merupakan perhitungan dari
pengujian sistem pad penelitian webGIS ini memiliki niali SUS score rank antara
70-79 dengan kategori B. Untuk mendapat nilai percentile rank tersebut, perlu
dilakukan perhitungan dengan menggunakan rumus berikut.

(𝐵𝑎𝑡𝑎𝑠 𝑎𝑡𝑎𝑠 𝑃𝑒𝑟𝑐𝑒𝑛𝑡𝑖𝑒𝑙 𝑅𝑎𝑛𝑘 − 𝐵𝑎𝑡𝑎𝑠 𝑏𝑎𝑤𝑎ℎ 𝑝𝑒𝑟𝑐𝑒𝑛𝑡𝑖𝑙𝑒 𝑅𝑎𝑛𝑘)

Percentile Rank = ( )
(𝐵𝑎𝑡𝑎𝑠 𝑎𝑡𝑎𝑠 𝑆𝑈𝑆 𝑠𝑐𝑜𝑟𝑒 𝑟𝑎𝑛𝑘 − 𝐵𝑎𝑡𝑎𝑠 𝑏𝑎𝑤𝑎ℎ 𝑆𝑈𝑆 𝑠𝑐𝑜𝑟𝑒 𝑅𝑎𝑛𝑘)

∗ 𝐵𝑎𝑡𝑎𝑠 𝑎𝑡𝑎𝑠 𝑝𝑒𝑟𝑐𝑒𝑛𝑡𝑖𝑙𝑒 𝑟𝑎𝑛𝑘(𝑆𝑈𝑆 𝑠𝑐𝑜𝑟𝑒 𝑦𝑎𝑛𝑔 𝑑𝑖𝑑𝑎𝑝𝑎𝑡 − 𝐵𝑎𝑡𝑎𝑠 𝑏𝑎𝑤𝑎ℎ 𝑆𝑈𝑆 𝑠𝑐𝑜𝑟𝑒 𝑟𝑎𝑛𝑘)
+ 𝐵𝑎𝑡𝑎𝑠 𝑎𝑡𝑎𝑠 𝑝𝑒𝑟𝑐𝑒𝑛𝑡𝑖𝑙𝑒 𝑟𝑎𝑛𝑘

53
 79 − 70
𝑃𝑒𝑟𝑐𝑒𝑛𝑡𝑖𝑙𝑒 𝑅𝑎𝑛𝑘 (%) = ( ) ∗ (74.1 − 74.1) + 79
77,1 − 74,1

= 3 𝑥 0 + 79 = 79%

Gambar 4.38. Kurva SUS berdasarkan percentile rank pengujian sistem

Berdasarkan nilai percentile rank yang dihasilkan dengan menggunakan

rumus diatas, nilai percentile rank yang didapatkan adalah 79% dengan grade B+.
Bisa disimpulkan bahwa dengan menggunakan metode System Usability Scale
(SUS) sistem webGIS Data spatio-temporal rumah bantuan kota Banda Aceh dapat
dikatakan cukup baik secara fungsionalnya. Namun, webGIS ini masih memiliki
kekurangan, dimana ada beberapa responden yang memberikan saran, yaitu dari
segi desain, dan pengembangan informasi berkaitan dengan data rumah bantuan.

54
 BAB V
KESIMPULAN DAN SARAN

5.1 Kesimpulan

Berdasarkan hasil, analisis, pengujian yang telah dilakukan pada penelitian

dapat disimpulkan beberapa hal sebagai berikut:

1. Data spatio-temporal dapat divisualisasikan melalui aplikasi webGIS

dengan menggunakan layanan WFS (Web Features Service) yang
dipublikasi oleh GeoServer dalam format GeoJSON serta memanfaatkan
Openlayers API dan modul Timemap Google.
2. WebGIS Data Spatio-Temporal Rumah Bantuan Kota Banda Aceh yang
dirancang ataupun dibuat mendapat respon positif dengan memperoleh nilai
cukup baik yaitu 79% grade B dengan metode pengujian System Usability
Scale (SUS).
3. Dari hasil nilai percentile rank bahwa sistem webGIS ini dapat digunakan
sebagai referensi bagi pengguna (mahasiswa) atau peneliti dalam
mengetahui nama donatur atau lembaga, tahun pembangunan dan jumlah
rumah yang dibangun setiap desa oleh donatur dari 26 desa kota banda aceh.

5.2 Saran

Saran yang dapat penulis berikan berdasarkan dari penelitian yang telah
dilakukan diantaranya sebagi berikut:

55
 1. WebGIS Data Spatio-Temporal Rumah Bantuan Kota Banda Aceh dapat
dikembangkan dengan memvisualisasi seluruh rumah bantuan kota Banda
Aceh.
2. Tampilan webGIS dapat dikembangkan lagi dengan menambah beberapa
fitur dan warna agar kelihatan lebih menarik serta kecepatan akses data
dipercepat saat loading.
3. Untuk mewakili gambar rumah, WebGIS ini hanya menampilkan 11 tipe
rumah yang dibangun oleh lembaga donatur. Di harapkan kedepannya untuk
melakukan survey agar gambar seluruh rumah terkumpulkan.

DAFTAR KEPUSTAKAAN

Adityo, D. 2005. Presiden Bentuk Badan Rehabilitasi dan Rekonstruksi Aceh dan
Nias. http://www.tempo.co/read/news/2005/04/18/05559806/Presiden-
Bentuk-Badan-Rehabilitasi-dan-Rekonstruksi-Aceh-dan-Nias. Tanggal
akses 20 September 2014.

Aronoff, S. 1989. Geographic Information Sistem A Management Perspective.

Ontario: W.DL Publication.

Barron, C., Arsanjani, J., Bakillah, M., and Helbich, M. 2013. Assessing the Quality
of OpenStreetMap Contributors together with their Contributions. AGILE.
112(7): 14-17.

Barkey, R.A., Achmad,A., Rizal, S., Soma, A.S., dan Talebe, A.B. 2009. Sistem
Informasi Geografis. Universitas Hasanuddin, Makassar.

Budiawan, Husni, M. 2009. Aplikasi GIS Berbasis Web Menggunakan GeoServer

Pada Sistem Informasi Trafo Gardu Induk Di PLN Surabaya. Institut
Teknologi Sepuluh Nopember Surabaya. Surabaya.

Connolly, Thomas M., and Carolyn E. Begg. 2002. Database Systems : A Practical
Approach to Design, Implementation, and Management 5th ed. Addison-
Wesley, Massachusetts

David, M. Danko. 2012. PostGIS - an Open-Source Spasial Database. 958. Springer

Handbook of Geographic Information (ed: Kresse W and David M. Danko).
Springer, London.

Dunlu, P., Lidong, C., and Wenjie, X. 2011. Using JSON for Data Exchanging in
Web Service Applications. Journal of Computational Information Systems.
7: (16) 5883-5890.

56
Galih, B. 2009. BRR Aceh-Nias Masih Meninggalkan Masalah.,
http://nasional.kompas.com/read/2009/04/02/19452822/brr.aceh-
nias.masih.meninggalkan.masalah?utm_campaign=related_left&utm_medi
um=bp&utm_source=news. Tanggal akses 20 Desember 2014.

GeoServer. 2014. What is GeoServer. http://GeoServer.org/about/. Tanggal akses

21 November 2014.

Hanson, B. 2014. Web Mapping: Getting started with JSON data.

http://www.extension.iastate.edu/communities/sites/www.extension.iastate
.edu/files/communities/PM2082-14f.pdf. Tanggal akses 17 Desember 2014.

Highchart. 2014. What is Highcharts. http://www.highcharts.com/products/highcharts .

Tanggal akses 10 Juni 2015

Howegeg, M. 2000. Spatio-temporal visualisation and analysis. Tesis. University

Of Salford, Manchester.

JSON. 2014. Pengenalan JSON. http://www.json.org/json-id.html. Tanggal akses

24 Desember 2014.

Kommana. 2013. Implementation of A GeoServer Application for GIS Data

Distribution and Manipulation. Tesis. Stockholm University, Stockholm.

Kuntoro, M. 2011. Analisis Dinamika Kolaborasi antara Badan Rehabilitasi dan

Rekonstruksi Aceh dan Nias (BRR) dengan Lembaga Donor Pasca Tsunami
2004 menggunakan Drama Theory. Vol 10.

Liu, R. Y. 2013. WebGIS Architecture Research and Design for. The 8th
International Conference on Computer Science & Education (ICCSE). 978-
1-4673-4463-0/13/. Colombo: IEEE.

Matthew, N., and Stones, R. 2005. Beginning Databases with PostgreSQL 2nd .
Apress. Springer-Verlag, New York.

Mulyadi, A., dan Uli, Marah, H. 2006. Geografi. Erlangga. Jakarta.

Mihaly, B, A. 2008. Visualization Techniques for Networking data. Tesis.

University of Auckland, New Zealand.

Mulyana, S., dan Winarko, E. 2009. Teknik Visualisasi dalam Data Mining.
semnasIF. 100(9): 1979-238.

Murao, O., Mitsuda, Y., Miyamoto, A., Sasaki, T., Nakazaoto, H., and Hayashi, T.
2007. Recovery Curves and Digital City of Chi-Chi as Urban Recovery

57
 Digital Archives. Proc. 2nd International Conference on Urban Disaster
Reduction. Taipei, Taiwan.

Nuckols, J. R., Ward, M. H., and Jarup, L. 2004. Using Geographic Information
System for Exposure Assessment in Environmental Epidemiolgy Studies.
Envirol Health Perpectives. 112(9): 1007-10015.

OSGeo. OpenLayers Info Sheet. OSGeo. http://www.osgeo.org/openlayers.

Tanggal Akses 15 September 2014.

Oliveira, M, C, F. 2003. From Visual Data Exploration to Visual Data Mining : A

Survey. IEEE. Transactions on Visualization and Computer Graphics. Sao
Carlos. Brazil, Vol. 9: 378 - 394

Poorazizi, M, E. and Alesheikh, A, A. 2011. Monitoring Real-Time Environmental

Information Using Web 2.0 and GIS services Technology. International
Journal of Civil Engineering. 9 (1): 3331-33342

Pujiono, S., dan Aziz, Muh. 2006. Sistem Informasi Geografis Berbasis Dekstop
dan Web. Gava Media. Yogyakarta.
Saleh, B., and Sadoun, B. 2005. Design and implementation of a GIS system for
planning. International Journal on Digital Libraries. 6(2): 210–218.

Sari, Dewi,. 2007. Perang Sistem Informasi Geografis Berbasis Web Menggunakan
Mapserver. Skripsi. Universitas Sumatra Utara, Medan.

Sauro, J. 2011. Measuring Usability with the System Usability Scale (SUS).
http://www.measuringu.com/sus.php. Tanggal akses 12 Februari 2015).

Steingber, F., 2007. Housing reconstruction and rehabilitation in Aceh and Nias,
Indonesia—Rebuilding lives. 150-166

Tanaamah, A., dan Wardoyo, R. 2008. Perancangan Dan Implementasi WebGIS

Parawisata Kabupaten Sumba Timur.
http://puslit2.petra.ac.id/gudangpaper/files/1169.pdf. 10 September 2014.

Timemap. 2015. Timemap. https://code.google.com/p/timemap/. Tanggal akses 10

Juni 2015

Usability.gov. 2014. System Usability Scale (SUS). http://www.usability.gov/how-

to-and-tools/methods/system-usabilityscale.html. Tanggal akses 20 Mei
2015.

Wang, Y., and Ji, Z. (2012). A Design of WebGIS-Based Information, 49-54 (Eds:
Z. Qian et al.). Recent Advance in CSIE. Berlin. Springerlink.com.

58
Wu-jun, Gao., Ji-xian, Zhang., Qin, Yan, Lei., and Lei, Pang. 2005. Study on Spatio-
Temporal Data Model and Visualization Technique. Chinese Academy of
Surveying and Mapping, China.

LAMPIRAN

Lampiran 1. Script PHP halaman utama WebGIS

<?xml version="1.0"encoding="iso-8859-1"?> <!DOCTYPEhtml PUBLIC "-

//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml
1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>WebGIS</title><linkrel="shortcuticon"href="http://localhost/webgis
/images/icon.png">

<!-- JAVASCRIPTS -->

<script type="text/JavaScript" src="examples/js/OpenLayers.js"></script>

<script type="text/JavaScript" src="lib/jquery-1.6.2.min.js"></script>

<scripttype="text/JavaScript"src="lib/mxn/mxn.js?(openlayers)"></script>
<script type="text/JavaScript" src="lib/timeline-2.3.0.js"></script>
<script src="src/timemap.js" type="text/JavaScript"></script>
<meta name="description" content="">
<meta name="keywords" content="">
<meta charset="utf-8">
<meta name="author" content="Roman Kirichik">
<meta name="viewport" content="width=device-width, initial-scale=1.0,
maximum-scale=1.0" />
<!-- CSS -->
<link rel="stylesheet" href="www/css/bootstrap.min.css">
<link rel="stylesheet" href="www/css/style.css">
<link rel="stylesheet" href="www/css/style-responsive.css">
<link rel="stylesheet" href="www/css/animate.min.css">
<link rel="stylesheet" href="www/css/vertical-rhythm.min.css">
<link rel="stylesheet" href="www/css/owl.carousel.css">
<link rel="stylesheet" href="www/css/magnific-popup.css">

<script type="text/JavaScript">

59
/* request data dari server*/
var desa=window.location.href;
desa=desa.substring(desa.indexOf('=')+1,desa.lastIndexOf('&'));
var alamat="examples/php/proxy.php?desa="+desa;
if(desa=="http://localhost/webgis/index.php"){alamat=""}

//fungsi timemap
var tm;
$(function() {
TimeMap.loaders.custom = function(options) {
var loader = new TimeMap.loaders.remote(options);
loader.parse = JSON.parse;
loader.preload = function(data) {
return data["features"] //data json
}
//fungsi untuk mengubah format data, dan memanggil provider berdasarkan
//icon dari timemap.js,
loader.transform = function(data) {
if(data.properties.provider=='BRR'){col="green"}
else if(data.properties.provider=='Aceh-Relief'){col="pokelek"}
else if(data.properties.provider=='P2KP'){col="red"}
else if(data.properties.provider=='YBI'){col="blue"}
else if(data.properties.provider=='CARITAS'){col="yellow"}
else if(data.properties.provider=='OXFAM'){col="purple"}
else if(data.properties.provider=='UP-LINK'){col="up"}
else if(data.properties.provider=='WORLDVISION'){col="yellowgreen"}
else if(data.properties.provider=='UN-HABITAT'){col="chocolate"}
else if(data.properties.provider=='LCIF'){col="aquamarine"}
else if(data.properties.provider=='IOM'){col="bisque"}
else if(data.properties.provider=='MUSLIM-AID'){col="black"}
else if(data.properties.provider=='Kata-Hati'){col="kt"}
else if(data.properties.provider=='RE-KOMPAK'){col="chart"}
else if(data.properties.provider=='MUSLIMMAGELANG'){col="darkcyan"}
else if(data.properties.provider=='CARE'){col="navy"}
else if(data.properties.provider=='MDF'){col="dodgerblue"}
else if(data.properties.provider=='ADB'){col="grey"}
else if(data.properties.provider=='TURKEY-RC'){col="darkslategrey"}
else if(data.properties.provider=='UEA'){col="indianred"}
else if(data.properties.provider=='ELSAKA'){col="indigo"}
else if(data.properties.provider=='PB-HAM'){col="maroon"}
else if(data.properties.provider=='GERMANRC'{col="mediumslateblue"}
else if(data.properties.provider=='PKPU'){col="pokelek2"}
else if(data.properties.provider=='UNDP'){col="olive"}
else if(data.properties.provider=='CSR'){col="pokelek3"}
else if(data.properties.provider=='PMI'){col="violet"}
else if(data.properties.provider=='Diakonie'){col="cyan"}

var prov = window.location.href;

prov = prov.substring(prov.lastIndexOf('=')+1);
if(data.properties.provider==prov){
return {
"title" :
"<fontcolor=\""+col+"\">&#8658;"+data.properties.provider+"</font>",
"start" : data.properties.tahun,
//"end" : data.properties.tahun+1,
"options" : {
//"description" : "<img
src=\"http://localhost/webgis/images/home.png\"><br>id_desa:
"+data.properties.id_desa+"<br>Desa:
"+data.properties.nama_desa+"<br>Kecamatan:"+data.properties.nama_
kec,
"description" : "Informasi:"+
"<table><tr bgcolor=\"#ADD8E6\">"+

60
 "<td>Provider</td><td>"+data.properties.provider+"</td>"+
"</tr><tr bgcolor=\"#E1E1E1\">"+
"<td>Id_desa</td><td>"+data.properties.id_desa+"</td>"+
"</tr><tr bgcolor=\"#ADD8E6\">"+
"<td>Nama Desa</td><td>"+data.properties.nama_desa+"</td>"+
"</tr><tr bgcolor=\"#E1E1E1\">"+

"<td>Kecamatan</td><td>"+data.properties.nama_kec+"</td>"+
"</tr></table>",
"theme": col },
"point": {
"lat" : data.properties.point_y,
"lon" : data.properties.point_x
}
};
}else if(prov==""){
return {"title" : "<font
color=\""+col+"\">&#8658;"+data.properties.provider+"</font>",
" start" : data.properties.tahun,
//"end" : data.properties.tahun+1,
"options" : {

//tabel pop up
"description" :
"<center>Informasi:</center>"+
"<table><tr bgcolor=\"#ADD8E6\">"+

"<td>Provider</td><td>"+data.properties.provider+"</td>"+
"</tr><tr bgcolor=\"#E1E1E1\">"+

"<td>Id_desa</td><td>"+data.properties.id_desa+"</td>"+
"</tr><tr bgcolor=\"#ADD8E6\">"+
"<td>Nama
Desa</td><td>"+data.properties.nama_desa+"</td>"+
"</tr><tr bgcolor=\"#E1E1E1\">"+

"<td>Kecamatan</td><td>"+data.properties.nama_kec+"</td>"+
"</tr></table>",
"theme": col
},
"point": {
"lat" : data.properties.point_y,
"lon" : data.properties.point_x
}
};
};
};
return loader;
};

// dataset tampung data dari server

tm = TimeMap.init({
mapId: "map", // Id of map div element (required)
timelineId: "timeline", // Id of timeline div element
(required)
datasets: [
<?php
if(isset($_GET['desa']) && $_GET['desa']!=""){
echo "
{
title: \"set 1\",
type: \"custom\",
options: {
url: alamat,

61
 }
},";
}else{
$all =
["asoe_nanggroe","alue_deah_teungoh","deah_glumpang","gampong_baro","gamp
ong_jawa","gampong_mulya",
"jeulingke","lambaro_skep","lambung",

"lamdingin","lamjabat","lamjame","lampaseh_aceh","lampoh_daya","lampulo",

"lamteumen_barat","lamteumen_timur","merduati","peulanggahan","punge_blan
g_cut","punge_jurong",
"punge_ujong","rukoh","tibang","ulee_lheue"];
foreach($all as $alamat){
echo "
{
title: \"set 1\",
type: \"custom\",
options: {
url: \"examples/php/proxy.php?desa=$alamat\",
}
},";

}
include "batas/batas_wilayah.json";
?>

],

/*
options: {
centerOnItems: false,
mapZoom: 12,
mapCenter: new mxn.LatLonPoint(5.5517474198032675,95.32939910888672)
},
*/

bandIntervals: [
Timeline.DateTime.MONTH,
Timeline.DateTime.YEAR

});
});

</script>

<!-- Footer Text -->

<div class="footer-text">

<!-- Copyright -->

<div class="footer-copy font-alt">
<a target="_blank">Copyright &copy; 2015
Fajarul Akbar</a>.
</div>
<!-- End Copyright -->

<div class="footer-made">
<li><i class="fa fa-envelope-o"></i>
fajarul.akbar@gmail.com</li>
<li> <i class="fa fa-map-marker"></i> GIS, RS
and Spatial Data Laboratory, Syiah Kuala University, Banda Aceh.</li>

62
 </div>

</div>
<!-- End Footer Text -->

</div>

<!-- Top Link -->

<div class="local-scroll">
<a href="#top" class="link-to-top"><i class="fa fa-
caret-up"></i></a>
</div>
<!-- End Top Link -->

</footer>

</div>
<!-- JS
<script type="text/JavaScript" src="www/js/jquery-
1.11.1.min.js"></script>-->
<script type="text/JavaScript"
src="www/js/jquery.easing.1.3.js"></script>
<script type="text/JavaScript"
src="www/js/bootstrap.min.js"></script>
<script type="text/JavaScript"
src="www/js/SmoothScroll.js"></script>
<script type="text/JavaScript"
src="www/js/jquery.scrollTo.min.js"></script>
<script type="text/JavaScript"
src="www/js/jquery.localScroll.min.js"></script>
<script type="text/JavaScript"
src="www/js/jquery.viewport.mini.js"></script>
<script type="text/JavaScript"
src="www/js/jquery.countTo.js"></script>
<script type="text/JavaScript"
src="www/js/jquery.appear.js"></script>
<script type="text/JavaScript"
src="www/js/jquery.sticky.js"></script>
<script type="text/JavaScript" src="www/js/jquery.parallax-
1.1.3.js"></script>
<script type="text/JavaScript"
src="www/js/jquery.fitvids.js"></script>
<script type="text/JavaScript"
src="www/js/owl.carousel.min.js"></script>
<script type="text/JavaScript"
src="www/js/isotope.pkgd.min.js"></script>
<script type="text/JavaScript"
src="www/js/imagesloaded.pkgd.min.js"></script>
<script type="text/JavaScript" src="www/js/jquery.magnific-
popup.min.js"></script>
<script type="text/JavaScript" src="www/js/wow.min.js"></script>
<script type="text/JavaScript"
src="www/js/masonry.pkgd.min.js"></script>
<script type="text/JavaScript" src="www/js/jquery.simple-text-
rotator.min.js"></script>
<script type="text/JavaScript" src="www/js/all.js"></script>

<script type="text/JavaScript"
src="www/js/jquery.ajaxchimp.min.js"></script>
<!--[if lt IE 10]><script type="text/JavaScript"
src="js/placeholder.js"></script><![endif]-->

</body>

63
</html>

Lampiran 2. Script PHP halaman Bar-Chart

<!DOCTYPE HTML>
<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>Highcharts Example</title>

<script type="text/JavaScript"
src="bar/js/modules/jquery.min.js"></script>
<style type="text/css">
${demo.css}
</style>
<script type="text/JavaScript">
$(function () {

// Create the chart

$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Rumah Bantuan di Kota Banda Aceh'
},
subtitle: {
text: 'Grafik Jumlah Rumah Bantuan dibangun masa
Rehabilitas dan Rekonstruksi 2005 - 2008'
},
xAxis: {
type: 'category'
},
yAxis: {
title: {

64
 text: 'Jumlah Rumah '
}
},

legend: {
enabled: false
},

plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true
}
}
},

<?php
include 'databarchart.php';
echo $return;
?>

});
});

</script>
</head>
<body>
<script src="bar/js/highcharts.js"></script>
<script src="bar/js/modules/data.js"></script>
<script src="bar/js/modules/exporting.js"></script>
<script src="bar/js/modules/drilldown.js"></script>
<script src="bar/js/themes/sand-signika.js"></script>
<div id="container"></div>

<!-- Data from www.netmarketshare.com. Select Browsers => Desktop share

by version. Download as tsv. -->

</body>
</html>

65
Lampiran 3. Script PHP Data Bar-Chart

<?php
$dbcon = pg_connect("host='localhost' user='postgres'
password='postgres' dbname='web-gis'");

$series = <<<HEREDOC
series: [{
name: 'Jumlah',
colorByPoint: true,
data: [
HEREDOC;
$drilldown = <<<HEREDOC
]}],
drilldown: {
series: [
HEREDOC;

//1.alue_deah_teungoh
$query = "SELECT provider FROM alue_deah_teungoh ";
$result = pg_query($dbcon, $query) or die("Error in query: $query.
" . pg_last_error($dbcon));
$rows = pg_num_rows($result);
$adt ;
$adt[0]=0;

66
$adt[1]=0;
$adt[2]=0;
$adt[3]=0;
if ($rows != 0)
{
while ($row = pg_fetch_row($result))
{
//echo $row[4];
if ($row[0]=="BRR" ) {
$adt[0]++;
}
if ($row[0]=="CARITAS" ) {
$adt[1]++;
}
if ($row[0]=="YBI" ) {
$adt[2]++;
}
if ($row[0]=="OXFAM" ) {
$adt[3]++;
}
}
}
$x = $adt[0]+$adt[1]+$adt[2]+$adt[3];
$series = <<<HEREDOC
$series {
name: 'Alue Deah Teungoh',
y: $x,
drilldown: 'alue deah teungoh'
},
HEREDOC;
$drilldown = <<<HEREDOC
$drilldown {
id: 'alue deah teungoh',
data: [
['BRR', $adt[0]],
['CARITAS', $adt[1]],
['YBI', $adt[2]],
['OXFAM', $adt[3]]
]
},
HEREDOC;
pg_free_result($result);

// 2. asoe_nanggroe
$query = "SELECT provider FROM asoe_nanggroe";
$result = pg_query($dbcon, $query) or die("Error in query: $query.
" . pg_last_error($dbcon));
$rows = pg_num_rows($result);
$asn ;
$asn[0]=0;
$asn[1]=0;

if ($rows != 0)
{
while ($row = pg_fetch_row($result))
{
//echo $row[4];
if ($row[0]=="BRR" ) {

67
 $asn[0]++;
}
if ($row[0]=="UP-LINK" ) {
$asn[1]++;
}

}
}
$x = $asn[0]+$asn[1];
$series = <<<HEREDOC
$series {
name: 'Asoe Nanggroe',
y: $x,
drilldown: 'asoe nanggroe'
},
HEREDOC;
$drilldown = <<<HEREDOC
$drilldown {
id: 'asoe nanggroe',
data: [
['BRR', $asn[0]],
['UP-LINK', $asn[1]]

]
},
HEREDOC;

pg_free_result($result);

//3. deah_baro
$query = "SELECT provider FROM deah_baro ";
$result = pg_query($dbcon, $query) or die("Error in query: $query.
" . pg_last_error($dbcon));
$rows = pg_num_rows($result);
$dbr ;
$dbr[0]=0;
$dbr[1]=0;
$dbr[2]=0;
$dbr[3]=0;
if ($rows != 0)
{
while ($row = pg_fetch_row($result))
{
//echo $row[4];
if ($row[0]=="BRR" ) {
$dbr[0]++;
}
if ($row[0]=="CARITAS" ) {
$dbr[1]++;
}
if ($row[0]=="YBI" ) {
$dbr[2]++;
}
if ($row[0]=="OXFAM" ) {
$dbr[3]++;
}
}
}

68
$x = $dbr[0]+$dbr[1]+$dbr[2]+$dbr[3];
$series = <<<HEREDOC
$series {

name: 'Deah Baro',

y: $x,
drilldown: 'deah baro'
},
HEREDOC;
$drilldown = <<<HEREDOC
$drilldown {

id: 'deah baro',

data: [
['BRR', $dbr[0]],
['CARITAS', $dbr[1]],
['YBI', $dbr[2]],
['OXFAM', $dbr[3]]
]
},
HEREDOC;

// free result
pg_free_result($result);

69
Lampiran 4. Soal Kuesioner

70
Lampiran 5. Hasil jawaban kuesioner dari responden

PERTANYAAN

SUS
Responden
Score
No.1 No.2 No.3 No.4 No.5 No.6 No.7 No.8 No.9 No.10

1 5 2 5 1 3 2 4 1 5 1 35.0

2 4 2 4 2 4 3 4 2 4 2 29.0

3 4 2 4 3 4 2 4 2 4 5 26.0

4 5 2 4 3 4 2 4 2 4 4 28.0

5 5 3 4 5 5 2 4 2 3 4 25.0

6 5 2 4 1 4 2 4 1 3 1 33.0

7 3 2 5 2 4 2 4 2 4 2 30.0

8 3 2 4 2 4 2 4 2 4 3 28.0

9 4 2 4 1 4 2 3 2 4 2 30.0

10 3 2 4 3 4 2 4 2 4 3 27.0

11 4 2 4 2 4 3 4 1 4 2 30.0

12 5 2 5 2 4 2 4 2 5 2 33.0

13 4 2 5 2 4 1 4 2 3 2 31.0

14 3 2 4 2 4 1 5 2 3 2 30.0

15 4 2 4 2 4 2 4 1 4 2 31.0

16 4 2 4 2 4 2 4 2 4 3 29.0

17 3 2 4 1 4 2 4 2 3 1 30.0

18 4 2 4 2 4 1 3 2 3 2 29.0

19 4 2 4 2 4 2 3 2 4 1 30.0

20 4 2 4 2 5 2 4 1 5 2 33.0

21 4 3 4 3 4 2 4 2 4 2 28.0

22 4 3 4 1 4 1 4 2 4 1 32.0

71
23 3 2 4 2 4 2 4 2 4 2 29.0

24 3 2 5 2 4 2 4 1 4 1 32.0

25 4 3 4 2 3 3 4 1 3 3 26.0

26 4 2 5 2 4 2 4 2 4 2 31.0

27 4 3 4 3 5 2 4 3 3 3 26.0

28 3 2 4 2 4 1 4 2 4 3 29.0

29 3 3 4 2 4 3 4 2 4 2 27.0

30 4 1 4 2 4 2 5 1 3 2 32.0

Total SUS Score 74.1

72