T1 672006180 Full text
Pemetaan Pusat Kebugaran di Salatiga Menggunakan
Canvas pada HTML5 dan Shapefile
Artikel Ilmiah
Diajukan kepada
Fakultas Teknologi Informasi
untuk memperoleh Gelar Sarjana Komputer
Oleh :
Marciovaldi Maspaitella
NIM : 672006180
Program Studi Teknik Informatika
Fakultas Teknologi Informasi
Universitas Kristen Satya Wacana
Salatiga
2013
Pemetaan Pusat Kebugaran di Salatiga Menggunakan
Canvas pada HTML5 dan Shapefile
Marciovaldi Maspaitella1, Frederik Samuel Papilaya2, Sri Winarso M. E3
Fakultas Teknologi Informasi
Universitas Kristen Satya Wacana
Jl. Diponegoro 52-60, Salatiga 50711, Indonesia
Email: [email protected], [email protected],
[email protected]
Abstract
The existence of fitness center or gym in Salatiga shows people are highly
interested to live healthy and have an ideal body. But the lack of information about
fitness center in Salatiga becoming a problem for people to get which one is right to
them. Gym mapping system build using HTML5 canvas dan shapefile as the map
format. Mapping comes with complete information on each gym in Salatiga. With this
system, people can easily choose the best gym for them.
Keywords: Fitness center , Gym Mapping, HTML5 canvas, shapefile
Abstrak
Keberadaan pusat kebugaran atau gym di Salatiga menunjukkan minat
masyarakat untuk hidup sehat dan memiliki bentuk badan yang ideal semakin tinggi.
Namun kurangnya informasi mengenai pusat-pusat kebugaran di Salatiga menjadi
masalah bagi masyarakat untuk memilih mana yang cocok. Sistem pemetaan pusat
kebugaran dibangun menggunakan canvas pada HTML5 dan shapefile sebagai
format peta. Pemetaan dilengkapi dengan informasi lengkap mengenai masingmasing pusat kebugaran di Salatiga. Dengan sistem ini, masyarakat dapat lebih
mudah memilih pusat kebugaran yang terbaik bagi mereka.
Kata kunci: Pusat kebugaran, pemetaan pusat kebugaran, HTML5 canvas, shapefile
1
Mahasiswa Fakultas Teknologi Informasi Universitas Kristen Satya Wacana
Staff Pengajar Fakultas Teknologi Informasi Universitas Kristen Satya Wacana
3
Staff Pengajar Fakultas Teknologi Informasi Universitas Kristen Satya Wacana
2
1. Pendahuluan
HTML5 sudah menjadi standar pembangunan website di masa kini dan
masa depan karena kemudahan akses, penyimpanan data, interaksi dan
penanganan error yang lebih baik [1]. HTML5 menghadirkan fitur-fitur baru
antara lain canvas, geolocation dan elemen yang mendukung penggunaan
audio dan video. Canvas dimanfaatkan untuk menggambar grafik, tentunya
dengan bantuan javascript.
Kesehatan merupakan hal yang penting bagi kehidupan manusia.
Menjaga kesehatan dapat dilakukan dengan berbagai cara, diantaranya adalah
mengatur pola makan, istirahat yang cukup dan tentu saja berolahraga dengan
teratur. Olahraga dapat dilakukan di mana saja dan kapan saja. Karena dengan
berolahraga, selain menjadi sehat juga dapat meningkatkan stamina,
mengurangi stres, berat badan terjaga dan tubuh menjadi lebih ideal [2].
Menjaga berat badan dan membentuk tubuh, dapat dilakukan dengan
latihan beban dan kardio. Latihan beban yang baik memerlukan banyak alat
dan tidak semua orang yang ingin latihan beban, mau atau mampu membeli
alat-alat tersebut. Pusat kebugaran banyak dibangun di berbagai tempat,
termasuk di Salatiga untuk mengatasi hal tersebut. Selain tersedia alat-alat
untuk latihan beban, juga terdapat alat-alat untuk latihan kardio. Keinginan
untuk membentuk tubuh menjadi lebih mudah dengan adanya pusat
kebugaran. Namun lokasi keberadaan pusat kebugaran dengan standar yang
baik, menjadi masalah. Hal ini menjadi alasan diperlukannya suatu sistem
pemetaan untuk mencari tahu lokasi pusat-pusat kebugaran tersebut dengan
lebih mudah.
Berdasarkan survei (kuisioner) yang telah dilakukan di pusat-pusat
kebugaran , maka terdapat beberapa pusat kebugaran di Salatiga yang akan
dipetakan. Sistem ini akan berisi informasi mengenai masing-masing pusat
kebugaran dan informasi tambahan jika diperlukan. Informasi tersebut dapat
berupa tulisan maupun gambar. Sistem pemetaan akan dibangun berbasis web
sehingga bisa diakses dari mana saja dan kapan saja asal terhubung dengan
internet.
Canvas pada HTML5 telah banyak digunakan untuk membangun
sistem pemetaan berbasis web atau lebih dikenal dengan web GIS
(Geographic Information System). Pemetaan dapat dilakukan dengan beberapa
cara, salah satunya adalah menggunakan shapefile. Shapefile merupakan
format penyimpanan vektor digital untuk menyimpan lokasi dan informasi
geometris sebuah data [3]. Pemetaan menggunakan format vektor memberikan
keuntungan yaitu kapasitas penyimpanan yang kecil, ketelitian resolusi,
transformasi koordinat dan proyeksi yang mudah dilakukan [4]. Canvas
HTML5 dimanfaatkan untuk pemetaan karena kecepatan proses render dan
dapat menghasilkan pemetaan yang lebih interaktif [5].
Terdapat dua permasalahan dalam pembangunan sistem, yaitu
bagaimana merancang sistem pemetaan berbasis web menggunakan HTML5
dan bagaimana memetakan pusat-pusat kebugaran yang ada di Salatiga ke
dalam sistem berbasis web. Jurnal ini disusun dengan tujuan untuk
membangun suatu sistem pemetaan lokasi pusat kebugaran di daerah Salatiga
menggunakan teknologi HTML5. Diharapkan sistem ini dapat bermanfaat
dalam membantu pencarian lokasi pusat kebugaran dengan lebih mudah dan
sesuai dengan keinginan pengguna. Selain itu juga membantu pembelajaran
tentang pemetaan, pemanfaatan canvas dan shapefile pada HTML5.
2. Kajian Pustaka
Penelitian Terdahulu
Sistem pemetaan dapat dimanfaatkan untuk mecari tahu rute terpendek
dari suatu lokasi ke lokasi yang lain, seperti yang dilakukan Putu Wira Buana
[6]. Penelitian tersebut menggunakan model algoritma tracing, yaitu
penelusuran dengan menggunakan syarat tertentu. Rute terpendek didapat dari
hasil analisa perbandingan dengan menggunakan Network Analyst pada
ArcGIS. Penentuan rute optimal tersebut didasarkan pada waktu dan jarak.
ArcGIS digunakan sebagi tool untuk pemodelan peta dan tentu saja
shapefile digunakan sebagai format peta. Namun karena yang diteliti adalah
algoritma dan perhitungan rute terpendek, maka berdasarkan penelitian
tersebut yang dimanfaatkan demi penelitian ini adalah penggunaan shapefile.
Penelitian selanjutnya yaitu mengenai pemanfaatan shapefile untuk
melakukan pemetaan sarana-sarana umum di kota Surabaya oleh Hurama
Arifin [7]. Penelitian tersebut mengembangkan dua aplikasi yaitu map online
dan map editor . Map online ditujukan kepada user sedangkan map editor
untuk administrator . User dapat melakukan pencarian berdasarkan keyword
yang dimasukkan dan input tersebut diolah menjadi informasi dalam bentuk
peta yang di-zoom sesuai hasil pencarian.
Sistem yang dibuat menggunakan PHP dan MapScript sedangkan
format peta yang digunakan adalah shapefile. Sama halnya dengan penelitian
ini, format petanya juga shapefile, namun sistemnya menggunakan HTML5
dengan memanfaatkan canvas sebagai media pemetaan. Diharapkan sistem
yang akan dibangun juga mempunyai fitur untuk melakukan pencarian
berdasarkan keyword. Karena dengan hal ini, maka pencarian pusat kebugaran
dapat dengan lebih mudah ditemukan.
Sistem Informasi Geografis dan Shapefile
Sistem Informasi Geografis (SIG) adalah suatu sistem informasi
berbasis komputer yang digunakan untuk menyimpan dan memanipulasi
informasi geografis. SIG dirancang untuk mengumpulkan, menyimpan, dan
menganalisis obyek–obyek dan fenomena-fenomena dimana lokasi geografis
merupakan karakteristik yang penting atau kritis untuk dianalisis. Dengan
demikian SIG merupakan sistem komputer yang memiliki empat kemampuan
dalam menangani data yang bereferensi geografis: masukan, keluaran,
manajemen data (penyimpanan dan pemanggilan data), analisis dan
manipulasi data. Suatu sistem pemetaan berbasis web pada umumnya
memiliki fungsi minimal yaitu sistem dapat menampilkan peta suatu wilayah
dengan posisi geografi yang sesuai dengan keadaan sebenarnya, sistem dapat
menampilkan peta dengan beberapa skala tertentu dan sistem dapat
memberikan informasi dari setiap lokasi yang dipilih oleh pengguna [6].
Terdapat dua bentuk penyajian data peta dalam SIG yaitu format
vektor dan format raster. Format vektor bisa berupa shapefile, PostGIS, ESRI
SDE dan oracleSpatial, sedangkan data dalam raster bisa berupa file
berekstensi TIFF, PNG, JPEG, dan GIF. ESRI shapefile atau yang biasa
disebut shapefile adalah format penyimpanan vektor digital untuk menyimpan
geometris lokasi dan informasi yang terkait dengan sebuah atribut. Penelitian
ini menggunakan data dengan format shapefile karena shapefile hanya
menyimpan data primitif geomeris jenis poin, garis dan poligon sehingga lebih
mudah disimpan. Shapefile didefinisikan melalui tiga buah file yaitu .shp (file
utama yang menyimpan bentuk geometri), .shx (menyimpan index dari fiturfitur geometri) dan .dbf (file yang menyimpan atribut-atribut dari fitur-fitur
geometri) [8].
HTML5
HTML5 merupakan standar berikutnya dari revisi HTML versi
sebelumnya. HTML5 menyempurnakan elemen-elemen lama yang terdapat
pada standar sebelumnya, menambahkan elemen-elemen yang lebih semantik
dan menambahkan fitur-fitur baru untuk mendukung pembuatan aplikasi web
yang lebih kompleks. Fitur-fitur baru dalam HTML5 antara lain canvas untuk
menggambar, pemutaran video dan audio secara langsung, penyimpanan
secara offline, elemen konten yang lebih spesifik seperti , ,
, , dan kontrol baru untuk form seperti
kalender, tanggal, waktu, email, url, search. Proses menggambar pada canvas
harus dilakukan di dalam javascript.
Kode Program 1 Pembuatan elemen canvas
1
2
3
4
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
Pada kode program 1, dapat dilihat canvas dibuat dengan deklarasi
variabel dan menggunakan method createElement(). Kemudian melalui
method getContext(„2d‟) baru dapat dilakukan proses penggambaran objek
seperti kotak, lingkaran maupun menampilkan gambar utuh. Untuk dapat
render dan menampilkan shapefile pada canvas, tentunya file harus lengkap
(.shp, .shx dan . dbf) sehingga dapat diproses dengan baik. Pada suatu
shapefile, terdapat data berupa point, polygon dan polyline dan untuk
menghasilkan suatu peta, ketiga hal tersebut dibentuk berdasarkan koordinat
(longitude dan latitude). Point, polygon dan polyline pada shapefile harus
didefinisikan terlebih dahulu melalui javascript untuk proses render pada
canvas.
Kode Program 2 Load url shapefile
1 var shpURL = url+'.shp';
2 var dbfURL = url+'.dbf';
Selanjutnya hanya membutuhkan lokasi shapefile yang disimpan,
kemudian akan dimuat menggunakan javascript sehingga dapat terintegrasi.
Hal ini ditunjukkan pada kode program 2. Masalah tampilan point, polygon
dan polyline pada shapefile (warna, ukuran garis dan lain-lain) juga dapat
diatur dengan javascript.
3. Metode Penelitian
Tahapan Penelitian
Tahapan penelitian diawali dengan membuat hipotesa yang bersifat
kualitatif mengenai sumber data, siapa saja yang akan menjadi pengguna
sistem dan data apa saja yang dibutuhkan dan perlu dipelajari. Setelah itu,
yang dilakukan adalah mendiskusikan dan mengumpulkan data dari sisi
pengguna. Sumber data yang diperoleh dibagi menjadi data primer dan data
sekunder. Data primer diperoleh langsung dari sumbernya yaitu para
pemilik/pengelola pusat kebugaran di Salatiga. Data diperoleh melalui
kuisioner dan wawancara langsung. Untuk permasalahan keberadaan pusat
kebugaran, dilakukan survei (melakukan pencarian langsung di daerah kota
Salatiga) untuk mengetahui lokasinya. Data sekunder diperoleh secara tidak
langsung seperti internet dan buku. Selain itu, juga dilakukan pengumpulan
kebutuhan software dan hardware yang digunakan selama pembangunan
sistem.
Setelah data dikumpulkan, maka dapat dimulai proses perancangan
perangkat lunak. Metode yang digunakan dalam perancangan perangkat lunak
adalah Prototyping model. Prototyping model merupakan proses untuk
membangun sebuah model dari sistem berdasar pada kebutuhan user , dengan
kondisi user hanya memberikan beberapa kebutuhan umum sistem, tanpa
memberikan detail input, proses atau detail output [9].
Gambar 1 Prototyping Model [10]
Tahapan pertama dimulai dengan Listen To Customer . Sistem akan
dibangun berdasarkan kebutuhan dari user . User yang dimaksud adalah para
pemilik pusat kebugaran dan orang yang tertarik untuk mencari pusat
kebugaran. Pada tahap ini, kebutuhan user terhadap sistem hanya bersifat
umum.
Tahap kedua adalah Build/Revise Mock-up. Perangkat lunak sistem
(prototype) mulai dibangun. Sistem dirancang secara bertahap, mulai dari
proses pemetaan lokasi pusat kebugaran, tampilan sistem sampai atributatribut tambahan.
Tahapan selanjutnya adalah evaluasi prototype (pengujian). Evaluasi
dilakukan terhadap setiap prototype yang telah dibuat. Apakah ada perubahan
yang harus dilakukan berdasarkan kebutuhan awal pada perancangan. Jika
ada, maka prototype tetap dikembangkan berdasarkan kebutuhan pengguna.
Pembangunan sistem ini dilakukan sampai prototyping ketiga.
Prototyping yang pertama, sistem telah berhasil menampilkan peta lokasi
pusat-pusat kebugaran, nama jalan dan Point of Interest (fasilitas umum
seperti rumah sakit, gereja, ATM dan lain-lain) dalam format shapefile. Peta
belum dilengkapi fungsi apapun. Header web masih berupa tulisan biasa.
Prototyping kedua, dilakukan penambahan fungsi peta yaitu zoom-in, zoomout dan pan. Juga ditambahkan marker pada masing-masing pusat kebugaran
dan dapat menampilkan informasi. Untuk desain web, header web didesain 3D
dan ditambahkan gambar menjadi background pada body. Prototyping
terakhir yaitu penambahan fungsi search berdasarkan kata kunci, yaitu nama
pusat kebugaran dan alamat.
Perancangan Sistem
Perancangan sistem menggunakan DFD (Data Flow Diagram). DFD
merupakan suatu diagram alur yang menggambarkan model dari sistem yang
terdiri dari proses, alur proses dan external entity yang berhubungan dengan
data yang dihasilkan. Dengan menggunakan DFD, sistem dapat digambarkan
dari level yang paling tinggi (global) dan diturunkan ke level yang lebih
rendah (detail) [11].
Gambar 2 Diagram Konteks
Diagram konteks pada gambar 2 menunjukkan user berperan sebagai
external entity (entitas luar)
dan Sistem Pemetaan Pusat Kebugaran
merupakan proses. Terjadi proses timbal balik antara user dan sistem. User
akan request ke sistem dan pada sistem akan diproses menjadi informasi
sesuai kebutuhan user.
Gambar 3 DFD Level 1
Interaksi antara user dan sistem digambarkan lebih spesifik pada DFD
level 1. Terdapat tiga proses yaitu informasi pusat kebugaran, search dan
navigasi peta. Pada proses Informasi pusat kebugaran, sistem akan
menampilkan informasi mengenai pusat kebugaran sesuai pilihan user . Untuk
pengoperasian peta (zoom dan pan), terdapat pada proses Navigasi peta.
Sedangkan pada proses Search, user mengirimkan request pencarian dan
sistem akan menampilkan hasilnya.
Gambar 4 DFD Level 2 Proses 1
Proses navigasi peta ditunjukkan pada gambar 4. User dapat
melakukan zooming (memperbesar dan memperkecil peta) dan panning
(menggeser peta). Pencarian pusat kebugaran dapat dilakukan dengan proses
tersebut. Kemudian user dapat memilih pusat kebugaran yang diinginkan.
Gambar 5 DFD Level 2 Proses 2
Gambar 5 menunjukkan proses pencarian pusat kebugaran. User
memasukkan keyword dan akan dilakukan pengecekan pada layer pusat
kebugaran. Kemudian akan ditampilkan hasil pencarian berdasarkan keyword
yang telah dimasukkan.
Gambar 6 Flowchart Sistem
Gambar 6 menunjukkan flowchart sistem. Terdapat dua proses yang
pertama dikerjakan sistem yaitu navigasi peta dan search. Proses navigasi
mencakup zooming dan panning pada peta. Kemudian berlanjut ke pemilihan
pusat kebugaran dan akan berakhir jika semua informasi telah ditampilkan.
Pada proses search, sistem akan mengecek kondisi apakah keyword yang
dimasukkan benar. Jika benar, hasil pencarian akan keluar dan informasi akan
ditampilkan. Jika salah, dapat kembali melakukan pencarian.
Gambar 7 Arsitektur Sistem
Gambar 7 menunjukkan arsitektur sistem yang dimulai dari pembuatan
peta. GISCloud (http://www.giscloud.com) merupakan website yang
menyediakan tool untuk membuat peta. Peta ini kemudian disimpan menjadi
format shapefile. Shapefile tersebut kemudian dimuat (load) ke file HTML5
menggunakan library OpenLayers. OpenLayers adalah aplikasi client open
source berbasis javascript untuk menampilkan data peta pada web browser .
OpenLayers mengimplementasikan javascript API yang digunakan untuk
membangun aplikasi GIS berbasis web [12]. Setelah load, maka shapefile
dirubah menjadi format geoJSON. GeoJSON merupakan format untuk
menampilkan informasi data geografis. Shapefile kemudian melalui proses
render pada canvas untuk bisa ditampilkan pada web browser . Menampilkan
peta juga menggunakan library OpenLayers.
Gambar 8 Desain tampilan sistem
Gambar 8 menunjukkan desain tampilan antarmuka sistem. Sistem
ditampilkan dalam browser . Peta akan ditampilkan pada sebelah kiri layar.
Pada bagian kanan, terdapat fungsi untuk melakukan search, berupa textbox
dan button. Textbox untuk mengetik pencarian dan button berfungsi untuk
memproses pencarian. Terdapat sebuah kotak di bawah fungsi search yang
akan menampilkan informasi pusat kebugaran, baik melalui pilihan langsung
dari peta maupun melalui search.
4. Implementasi dan Pengujian Sistem
Kode Program 3 Pembuatan canvas dan deklarasi objek lainnya
1 var Canvas = document.createElement('canvas');
2 var ctx = Canvas.getContext('2d');
3
4 var renderer =
OpenLayers.Util.getParameters(window.location.href).renderer
;
5
renderer = (renderer) ? [renderer] :
OpenLayers.Layer.Vector.prototype.renderers;
6
7 var map = new OpenLayers.Map("map",{allOverlays: true,
maxResolution :"auto"}),
8
parser = new OpenLayers.Format.GeoJSON(),
9
vectorJalan = new
OpenLayers.Layer.Vector("Converted",
10
{
11
styleMap: new
OpenLayers.StyleMap({
12
label : '${label}',
13
labelAlign:"rc",
14
fontSize: "14px"
15
}),
16
renderers: ["Canvas",
"renderer"]
17
}),
18
vectorKecamatan = new
OpenLayers.Layer.Vector("Converted"),
19
vectorPoi = new
OpenLayers.Layer.Vector("Converted", {
20
styleMap: new
OpenLayers.StyleMap({
21
pointRadius: "2",
22
fillColor: "green",
23
strokeColor: "green",
24
label:'${NAMA}',
25
labelAlign:"rc",
26
fontSize:"8px"
27
28
}),
29
renderers: ["Canvas",
"renderer"]
30
}),
31
vectorGym = new
OpenLayers.Layer.Vector("Converted", {
32
styleMap: new
OpenLayers.StyleMap({
33
pointRadius: "2",
34
35
36
37
38
39
40
"renderer"]
41
fillColor: "#0000FF",
strokeColor : "#0000FF",
label:'${nama_gym}',
labelAlign:"lc",
fontSize:"14px"
}),
renderers: ["Canvas",
})
Kode program 3 menunjukkan pembuatan beberapa objek yaitu
canvas, renderer, map, parser dan layer. Canvas dan renderer merupakan objek
untuk render dan menampilkan map. Untuk dapat menampilkan suatu peta
berformat shapefile, peta tersebut harus dirubah (convert) dalam format
GeoJSON. Proses convert dan menampilkan peta dapat dilakukan dengan
javascript, menggunakan library OpenLayers. Parser merupakan objek untuk
merubah shapefile ke GeoJSON. Keempat objek berikutnya yaitu vectorJalan,
vectorKecamatan, vectorPoi dan vectorGym merupakan empat layer yang
akan membentuk peta. vectorJalan untuk layer jalan, vectorKecamatan untuk
layer kecamatan, vectorPoi untuk objek-objek pendukung (misalnya rumah
sakit, rumah makan, ATM dan lain-lain) dan vectorGym untuk layer pusat
kebugaran. vectorJalan berbentuk polyline, vectorKecamatan berbentuk
polygon sedangkan vectorPoi dan vectorGym berbentuk point. Keempat layer
tersebut dapat diatur untuk menampilkan label, ukuran titik dan garis maupun
warnanya menggunakan OpenLayers.StyleMap.
Kode Program 4 Load shapefile
1 new Shapefile({
2 shp: "data/salatiga_gym.shp",
3 dbf: "data/salatiga_gym.dbf"
4
}, function(data){
5
var features = parser.read(data.geojson);
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
vectorGym.addFeatures(features);
map.zoomToExtent(vectorGym.getDataExtent());
console.log(data);
new Shapefile({
shp: "data/salatiga_jalan_geographic.shp",
dbf: "data/salatiga_jalan_geographic.dbf"
}, function(data){
var features = parser.read(data.geojson);
vectorJalan.addFeatures(features);
map.zoomToExtent(vectorJalan.getDataExtent());
console.log(data);
new Shapefile({
shp: "data/salatiga_poi_geographic.shp",
dbf: "data/salatiga_poi_geographic.dbf"
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
}, function(data){
var features = parser.read(data.geojson);
vectorPoi.addFeatures(features);
map.zoomToExtent(vectorPoi.getDataExtent());
console.log(data);
new Shapefile({
shp: "data/salatiga_kecamatan_geographic.shp",
dbf: "data/salatiga_kecamatan_geographic.dbf"
}, function(data){
var features = parser.read(data.geojson);
vectorKecamatan.addFeatures(features);
map.zoomToExtent(vectorKecamatan.getDataExtent());
console.log(data);
});
});
});
});
Kode program 4 menjelaskan proses load shapefile. Proses load
shapefile membutuhkan lokasi shapefile yang disimpan. Load shapefile ini
hanya membutuhkan dua file, yaitu yang berekstensi .shp dan .dbf. Setelah
proses load maka shapefile dirubah menjadi format geoJSON menggunakan
variabel parser yang telah dideklarasi sebelumnya.
Kode Program 5 Menampilkan layer
1
var gymmarkers = new
OpenLayers.Layer.Text("Marker",{location :"markers.txt"});
2
map.addLayer(vectorKecamatan);
3
map.addLayer(vectorJalan);
4
map.addLayer(vectorPoi);
5
map.addLayer(vectorGym);
6
map.addLayer(gymmarkers);
Kode program 5 menunjukkan proses menampilkan empat layer
(vectorJalan, vectorKecamatan, vectorPoi dan vectorGym) ditambah satu
layer yaitu gymmarkers. Gymmarkers merupakan layer untuk menampilkan
marker pada masing-masing pusat kebugaran. File markers.txt merupakan
textfile yang berisi pengaturan marker yaitu lokasi (longitude & latitude), popup title dan deskripsinya serta icon dan ukuran marker . Pop-up akan muncul
ketika user melakukan click pada marker .
Sistem yang dibangun memiliki tiga fungsi utama yaitu menampilkan
peta pusat kebugaran di Salatiga, menampilkan info pusat kebugaran tersebut
dan fungsi search. Fungsi search dimaksudkan agar user dapat mencari pusat
kebugaran berdasarkan keyword yang dimasukkan.
Gambar 9 Tampilan sistem
Pada gambar 9, di sebelah kiri layar adalah peta Salatiga yang
menunjukkan letak pusat kebugaran (marker berwarna merah), point of
interest (titik hijau) seperti kantor, rumah sakit, ATM dan lain-lain.
Sedangkan garis hitam menunjukkan jalan. Informasi yang akan muncul
mengenai masing-masing pusat kebugaran ditunjukkan di sebelah kanan peta.
Paling kanan layar adalah iklan suplemen. Pada peta terdapat icon plus (+)
yang berfungsi untuk melakukan zoom in dan minus (-), berfungsi untuk zoom
out. Fungsi zoom juga dapat dilakukan dengan scroll-wheel. Sedangkan fungsi
panning dilakukan dengan mouse click dan drag.
Kode Program 6 Method untuk menampilkan informasi
1 function newstar(){
2
a.innerHTML = "Newtar GymAlamat : Jl.Kemiri
1 No.70A";
3
a.innerHTML += "No Telp : 085225137865";
4
a.innerHTML += "Suplemen :
TersediaInstruktur Fitness : Tersedia";
5
a.innerHTML += "Waktu Buka : Senin-Sabtu, 08:0020:00 WIB";
6
a.innerHTML += "Biaya Pendaftaran : Member baru
= 50rbbulan selanjutnya = 40rbharian = 7rb";
7
a.innerHTML += "Fasilitas : kamar mandi, ruang
ganti, air minum";
8
a.innerHTML += "Area Latihan : 15m x 6m (panjang
x lebar)";
9
a.innerHTML += "Gallery :";
10
a.innerHTML += " ";
11
a.innerHTML += " ";
12
a.innerHTML += " ";
13
a.innerHTML += " ";
14
a.innerHTML += " ";
15
a.innerHTML += " ";
16
a.innerHTML += " ";
17
a.innerHTML += " ";
18
a.innerHTML += " ";
19
a.innerHTML += " ";
20
a.innerHTML += " ";
21
a.innerHTML += " ";
22
a.innerHTML += " ";
23
a.innerHTML += " ";
24
}
Kode program 6 menunjukkan method yang berisi informasi pusat
kebugaran. Informasi diisi dengan sederhana menggunakan fungsi javascript
innerHTML. Method newstar() akan dipanggil ketiga user mengakses link
“Show more info” pada pop-up marker . Gambar yang ditampilkan, ketika
dipilih salah satu thumbnail gambar, maka gambar ukuran sebenarnya akan
ditampilkan di tab baru.
Gambar 10 Gym Info
Jika user melakukan click pada icon marker , maka akan keluar pop-up
berisi nama pusat kebugaran, alamat, nomor telepon dan link yang akan
menunjukkan informasi lengkap pusat kebugaran. Gambar 10 menunjukkan
informasi pusat kebugaran secara keseluruhan (ketersediaan suplemen dan
instruktur, waktu buka, biaya pendaftaran, fasilitas tambahan dan area
latihan), dilengkapi dengan gambar sehingga user juga bisa melihat kondisi
pusat kebugaran yang ada baik dari luar, maupun di dalam ruangan.
Kode Program 7 Fungsi search
1 function cari(){
2
var s = document.getElementById('search');
3
var i = document.getElementById('gym_info');
4
var featuresArray = new Array;
5
var re = new RegExp(s.value);
6
for(var f=0;f 0){
15
for(var ii = 0 ;ii < featuresArray.length;
ii++){
16
17
i.innerHTML
featuresArray[ii].data["nama_gym"];
18
19
}
20
} else {
21
invalid!");
22
23
24
}
=
alert("Input
i.innerHTML = "";
}
Kode program 7 menunjukkan method cari() yang digunakan untuk
fungsi search. Fungsi search dilakukan berdasarkan kata kunci. Kata kunci
yang dimaksud adalah atribut dari layer vectorGym yaitu nama_gym (nama
pusat kebugaran) dan alamat. Jika apa yang diketik pada search-box sama
dengan salah satu nama_gym atau alamat maka proses pencarian akan
menampilkan nama pusat kebugaran yang dimaksud. Untuk memudahkan
pencarian, digunakan fungsi regular expression dari javascript sehingga dapat
menghasilkan pencarian hanya dengan mencocokkan beberapa string.
Gambar 11 Search
Gambar 11 menunjukkan fungsi search. User memasukkan kata kunci
pada search box dan jika button “Go” ditekan, maka pencarian akan diproses.
Hasil pencarian akan muncul pada area “Info”. Jika kata kunci tidak sesuai,
akan muncul peringatan dan pencarian tidak akan diproses.
Pengujian Sistem
Untuk mengetahui tingkat keberhasilan sistem, maka diperlukan
pengujian pada sistem tersebut. Tujuannya adalah untuk menghindari
kesalahan-kesalahan yang terjadi pada sistem yang dibangun. Apabila dalam
proses pengujian ditemukan kesalahan pada sistem, maka sistem harus
diperbaiki hingga tidak terdapat kesalahan. Pengujian dilakukan menggunakan
metode black box testing. Black box testing merupakan metode pengujian
yang dilakukan berdasarkan sudut pandang dari end user . Metode pengujian
ini tidak membutuhkan pengetahuan mengenai kondisi internal dari suatu
sistem yang akan diuji. Jadi penguji hanya mengetahui nilai input yang
dimasukkan dan output yang diharapkan [13]. Pengujian dibagi dua yaitu
pengujian terhadap jalannya sistem dan pengujian user dalam menggunakan
sistem. Tabel 1 menunjukkan hasil pengujian jalannya sistem. Dari tabel
tersebut, dapat dilihat bahwa sistem yang dibangun dapat berjalan dengan baik
dan telah sesuai dengan output yang diharapkan.
Tabel 1 Hasil pengujian sistem
No.
Point Pengujian
Nilai Input
1.
2.
Pemetaan Gym
Fungsi-fungsi pada
peta
3.
Penyajian informasi
Load peta
Zoom-in
Zoom-out
Panning
Klik marker
Klik “Show more
info”
Klik gambar
4.
Search
Kata kunci benar
Kata kunci salah
Angka
Kosong
Output yang
Diharapkan
Peta tampil
Peta diperbesar
Peta diperkecil
Peta digeser
Pop-up informasi gym
Informasi lengkap gym
Hasil
Uji
Berhasil
Berhasil
Berhasil
Berhasil
Berhasil
Berhasil
Muncul gambar ukuran
besar
Input diproses
Tidak valid
Tidak valid
Tidak valid
Berhasil
Berhasil
Berhasil
Berhasil
Berhasil
Pengujian user bertujuan untuk mengetahui bagaimana tanggapan user
terhadap sistem yang telah dibangun. Pengujian dilakukan dengan membagi
kuisioner kepada user . User yang dimaksudkan adalah orang yang tertarik
untuk mencari pusat kebugaran. Terlebih dahulu ditanyakan kepada target
responden apakah mereka berminat untuk mencari pusat kebugaran atau ingin
mengetahui keberadaan beberapa pusat kebugaran yang ada di Salatiga. Jika
ya, maka sistem ditunjukkan untuk diuji dan kuisioner dapat diisi. Hasil
pengujian user dengan kuisioner dapat dilihat pada tabel 2.
Tabel 2 Hasil pengujian user
No.
Daftar Pertanyaan
1
Pilihan Jawaban
2
3
4
Interface sistem
Apakah tampilan desain sistem menarik ?
1.
2.
3.
Apakah pemilihan warna pada keseluruhan
sistem sudah bagus ?
Apakah tulisan pada sistem mudah dibaca ?
Kemudahan pemakaian
4.
Apakah peta dapat dimengerti dengan baik ?
1
Total
5
5
17
9
31
12
14
4
31
9
22
14
13
31
4
31
Apakah fungsi pembesaran dan penggeseran pada
peta dapat digunakan dengan baik ?
Apakah fungsi pencarian dapat bekerja dengan
6.
baik ?
Kebutuhan informasi
Apakah keterangan nama tempat pada peta sudah
7.
sesuai kebutuhan ?
Apakah informasi pusat kebugaran yang
8.
ditampilkan sudah cukup lengkap ?
Apakah foto-foto yang ditampilkan sudah cukup
9.
untuk mengetahui gambaran pusat kebugaran?
Manfaat sistem
Apakah sistem mempermudah pencarian pusat
10.
kebugaran ?
5.
Total
10
6
0
7
21
31
19
6
31
11
17
3
31
1
4
26
31
4
27
31
1
17
13
31
72
124
107
310
Jumlah responden adalah 31 yang terdiri dari pelajar, mahasiswa dan
orang yang sudah mempunyai pekerjaan.
Masing-masing jawaban dibandingkan dengan semua total jawaban,
maka akan diperoleh persentase dengan penjelasan sebagai berikut :
1) Jawaban 1 (Sangat Kurang) : 0 dari 310 (0/310*100%) = 0%
2) Jawaban 2 (Kurang) : 7 dari 310 (7/310*100%) = 2.25%
3) Jawaban 3 (Cukup) : 72 dari 310 (72/310*100%) = 23.22%
4) Jawaban 4 (Baik) : 124 dari 310 (124/310*100%) = 40%
5) Jawaban 5 (Sangat Baik) : 107 dari 310 (107/310*100%) = 34.51%
Melalui persentase tersebut maka dapat diketahui bahwa jawaban 4
(Baik) mempunyai persentase yang paling tinggi yaitu 40%. Selanjutnya
adalah jawaban 5(Sangat Baik) dengan persentase 34,51%, jawaban 3 (Cukup)
23.22%, jawaban 2 (Kurang) 2.25% dan jawaban 1 (Sangat Kurang) dengan
persentase 0%.
5. Simpulan
Kesimpulan dari hasil implementasi dan pengujian sistem adalah
shapefile yang dimasukkan menggunakan library OpenLayers dan telah
dirubah menjadi format geoJSON dapat dengan baik diintegrasikan dengan
canvas pada HTML5. Pemetaan berbasis web menggunakan HTML5 dengan
peta dalam format shapefile dapat menghasilkan sistem yang interaktif. Sistem
Pemetaan Pusat Kebugaran di Salatiga mampu menghasilkan peta dan
informasi mengenai pusat-pusat kebugaran yang ada di Salatiga. Karena
informasi ditampilkan sederhana menggunakan javascript, maka sistem dapat
dikembangkan menggunakan database sehingga lebih mudah untuk
memasukkan dan menampilkan informasi. Selain itu, fungsi search juga dapat
dikembangkan dengan menambah kata kunci pencarian.
6. Daftar Pustaka
[1]
[2]
[3]
[4]
[5]
[6]
[7]
[8]
[9]
[10]
[11]
[12]
[13]
HTML5, http://www.w3schools.com/. Diakses pada tanggal 11
Desember 2012.
Kazdin, Alan, 2010, Encyclopedia of Psychology, http://www.apa.org/,
Diakses pada tanggal 5 November 2013.
Mukhammad Wildan, 2010, Teknik Visualisasi 3D untuk Sistem
Informasi Geografis Studi Kasus Manajemen Replanting Pasca
Kebakaran Hutan di Pulau Kalimantan, http://digilib.its.ac.id/. Diakses
pada bulan Desember 2012.
Y, S, Muhammad, 2011, Aplikasi Web Penyedia Informasi, Lokasi dan
Rute di Kampus UPN Veteran Jawa Timur, http://eprints.upnjatim.ac.id,
Diakses pada tanggal 6 November 2013.
Magel N Kamel Boulos, Jeffrey Warren, Jianya Gong, Peng Yue, 2010,
Web GIS in Practice VIII: HTML5 and The Canvas Element for
Interactive Online Mapping, http://link.springer.com/article. Diakses
pada tanggal 6 November 2013.
Buana, Putu Wira, 2010, Penentuan Rute Terpendek pada Aplikasi
Berbasis Peta .
Arifin, Hurama, 2005, Perancangan dan Pembuatan Peta Fasilitas
Kota Surabaya Berbasis Web, Surabaya.
Prahasta, E, 2002, Sistem Informasi Geografis:Tutorial ArcView.
Hariyanto, Bambang, 2004, Rekayasa Sistem Berorientasi Objek,
Informatika.
Pressman, 2000, Software Enginer ing: A Practitioner’s Approach Fifth
Edition, America: Mc Graw Hill .
M. Irfan Ashshidiq, M. Andri Setiawan, Fathul Wahid, 2006, Aplikasi
Berbasis Web Pemetaan Informasi pada Gambar Bitmap, Media
Informatika, Vol. 4, No. 1, Juni 2006, 13-26, http://journal.uii.ac.id,
Diakses pada tanggal 3 Agustus 2013.
Budiawan, 2010, Aplikasi GIS Berbasis Web Menggunakan Geoserver
pada Sistem Informasi Trafo Gardu Induk di PLN Surabaya,
http://digilib.its.ac.id/. Diakses pada tanggal 6 November 2013.
Inge Evita Putri, 2005, Penerapan Item Response Theory yang
Dikombinasikan dengan Kingsbury and Zara Procedure pada Adaptive
Online
Test
System,
Universitas
Indonesia,
http://lontar.ui.ac.id/opac/ui/. Diakses pada tanggal 23 September 2013.
Canvas pada HTML5 dan Shapefile
Artikel Ilmiah
Diajukan kepada
Fakultas Teknologi Informasi
untuk memperoleh Gelar Sarjana Komputer
Oleh :
Marciovaldi Maspaitella
NIM : 672006180
Program Studi Teknik Informatika
Fakultas Teknologi Informasi
Universitas Kristen Satya Wacana
Salatiga
2013
Pemetaan Pusat Kebugaran di Salatiga Menggunakan
Canvas pada HTML5 dan Shapefile
Marciovaldi Maspaitella1, Frederik Samuel Papilaya2, Sri Winarso M. E3
Fakultas Teknologi Informasi
Universitas Kristen Satya Wacana
Jl. Diponegoro 52-60, Salatiga 50711, Indonesia
Email: [email protected], [email protected],
[email protected]
Abstract
The existence of fitness center or gym in Salatiga shows people are highly
interested to live healthy and have an ideal body. But the lack of information about
fitness center in Salatiga becoming a problem for people to get which one is right to
them. Gym mapping system build using HTML5 canvas dan shapefile as the map
format. Mapping comes with complete information on each gym in Salatiga. With this
system, people can easily choose the best gym for them.
Keywords: Fitness center , Gym Mapping, HTML5 canvas, shapefile
Abstrak
Keberadaan pusat kebugaran atau gym di Salatiga menunjukkan minat
masyarakat untuk hidup sehat dan memiliki bentuk badan yang ideal semakin tinggi.
Namun kurangnya informasi mengenai pusat-pusat kebugaran di Salatiga menjadi
masalah bagi masyarakat untuk memilih mana yang cocok. Sistem pemetaan pusat
kebugaran dibangun menggunakan canvas pada HTML5 dan shapefile sebagai
format peta. Pemetaan dilengkapi dengan informasi lengkap mengenai masingmasing pusat kebugaran di Salatiga. Dengan sistem ini, masyarakat dapat lebih
mudah memilih pusat kebugaran yang terbaik bagi mereka.
Kata kunci: Pusat kebugaran, pemetaan pusat kebugaran, HTML5 canvas, shapefile
1
Mahasiswa Fakultas Teknologi Informasi Universitas Kristen Satya Wacana
Staff Pengajar Fakultas Teknologi Informasi Universitas Kristen Satya Wacana
3
Staff Pengajar Fakultas Teknologi Informasi Universitas Kristen Satya Wacana
2
1. Pendahuluan
HTML5 sudah menjadi standar pembangunan website di masa kini dan
masa depan karena kemudahan akses, penyimpanan data, interaksi dan
penanganan error yang lebih baik [1]. HTML5 menghadirkan fitur-fitur baru
antara lain canvas, geolocation dan elemen yang mendukung penggunaan
audio dan video. Canvas dimanfaatkan untuk menggambar grafik, tentunya
dengan bantuan javascript.
Kesehatan merupakan hal yang penting bagi kehidupan manusia.
Menjaga kesehatan dapat dilakukan dengan berbagai cara, diantaranya adalah
mengatur pola makan, istirahat yang cukup dan tentu saja berolahraga dengan
teratur. Olahraga dapat dilakukan di mana saja dan kapan saja. Karena dengan
berolahraga, selain menjadi sehat juga dapat meningkatkan stamina,
mengurangi stres, berat badan terjaga dan tubuh menjadi lebih ideal [2].
Menjaga berat badan dan membentuk tubuh, dapat dilakukan dengan
latihan beban dan kardio. Latihan beban yang baik memerlukan banyak alat
dan tidak semua orang yang ingin latihan beban, mau atau mampu membeli
alat-alat tersebut. Pusat kebugaran banyak dibangun di berbagai tempat,
termasuk di Salatiga untuk mengatasi hal tersebut. Selain tersedia alat-alat
untuk latihan beban, juga terdapat alat-alat untuk latihan kardio. Keinginan
untuk membentuk tubuh menjadi lebih mudah dengan adanya pusat
kebugaran. Namun lokasi keberadaan pusat kebugaran dengan standar yang
baik, menjadi masalah. Hal ini menjadi alasan diperlukannya suatu sistem
pemetaan untuk mencari tahu lokasi pusat-pusat kebugaran tersebut dengan
lebih mudah.
Berdasarkan survei (kuisioner) yang telah dilakukan di pusat-pusat
kebugaran , maka terdapat beberapa pusat kebugaran di Salatiga yang akan
dipetakan. Sistem ini akan berisi informasi mengenai masing-masing pusat
kebugaran dan informasi tambahan jika diperlukan. Informasi tersebut dapat
berupa tulisan maupun gambar. Sistem pemetaan akan dibangun berbasis web
sehingga bisa diakses dari mana saja dan kapan saja asal terhubung dengan
internet.
Canvas pada HTML5 telah banyak digunakan untuk membangun
sistem pemetaan berbasis web atau lebih dikenal dengan web GIS
(Geographic Information System). Pemetaan dapat dilakukan dengan beberapa
cara, salah satunya adalah menggunakan shapefile. Shapefile merupakan
format penyimpanan vektor digital untuk menyimpan lokasi dan informasi
geometris sebuah data [3]. Pemetaan menggunakan format vektor memberikan
keuntungan yaitu kapasitas penyimpanan yang kecil, ketelitian resolusi,
transformasi koordinat dan proyeksi yang mudah dilakukan [4]. Canvas
HTML5 dimanfaatkan untuk pemetaan karena kecepatan proses render dan
dapat menghasilkan pemetaan yang lebih interaktif [5].
Terdapat dua permasalahan dalam pembangunan sistem, yaitu
bagaimana merancang sistem pemetaan berbasis web menggunakan HTML5
dan bagaimana memetakan pusat-pusat kebugaran yang ada di Salatiga ke
dalam sistem berbasis web. Jurnal ini disusun dengan tujuan untuk
membangun suatu sistem pemetaan lokasi pusat kebugaran di daerah Salatiga
menggunakan teknologi HTML5. Diharapkan sistem ini dapat bermanfaat
dalam membantu pencarian lokasi pusat kebugaran dengan lebih mudah dan
sesuai dengan keinginan pengguna. Selain itu juga membantu pembelajaran
tentang pemetaan, pemanfaatan canvas dan shapefile pada HTML5.
2. Kajian Pustaka
Penelitian Terdahulu
Sistem pemetaan dapat dimanfaatkan untuk mecari tahu rute terpendek
dari suatu lokasi ke lokasi yang lain, seperti yang dilakukan Putu Wira Buana
[6]. Penelitian tersebut menggunakan model algoritma tracing, yaitu
penelusuran dengan menggunakan syarat tertentu. Rute terpendek didapat dari
hasil analisa perbandingan dengan menggunakan Network Analyst pada
ArcGIS. Penentuan rute optimal tersebut didasarkan pada waktu dan jarak.
ArcGIS digunakan sebagi tool untuk pemodelan peta dan tentu saja
shapefile digunakan sebagai format peta. Namun karena yang diteliti adalah
algoritma dan perhitungan rute terpendek, maka berdasarkan penelitian
tersebut yang dimanfaatkan demi penelitian ini adalah penggunaan shapefile.
Penelitian selanjutnya yaitu mengenai pemanfaatan shapefile untuk
melakukan pemetaan sarana-sarana umum di kota Surabaya oleh Hurama
Arifin [7]. Penelitian tersebut mengembangkan dua aplikasi yaitu map online
dan map editor . Map online ditujukan kepada user sedangkan map editor
untuk administrator . User dapat melakukan pencarian berdasarkan keyword
yang dimasukkan dan input tersebut diolah menjadi informasi dalam bentuk
peta yang di-zoom sesuai hasil pencarian.
Sistem yang dibuat menggunakan PHP dan MapScript sedangkan
format peta yang digunakan adalah shapefile. Sama halnya dengan penelitian
ini, format petanya juga shapefile, namun sistemnya menggunakan HTML5
dengan memanfaatkan canvas sebagai media pemetaan. Diharapkan sistem
yang akan dibangun juga mempunyai fitur untuk melakukan pencarian
berdasarkan keyword. Karena dengan hal ini, maka pencarian pusat kebugaran
dapat dengan lebih mudah ditemukan.
Sistem Informasi Geografis dan Shapefile
Sistem Informasi Geografis (SIG) adalah suatu sistem informasi
berbasis komputer yang digunakan untuk menyimpan dan memanipulasi
informasi geografis. SIG dirancang untuk mengumpulkan, menyimpan, dan
menganalisis obyek–obyek dan fenomena-fenomena dimana lokasi geografis
merupakan karakteristik yang penting atau kritis untuk dianalisis. Dengan
demikian SIG merupakan sistem komputer yang memiliki empat kemampuan
dalam menangani data yang bereferensi geografis: masukan, keluaran,
manajemen data (penyimpanan dan pemanggilan data), analisis dan
manipulasi data. Suatu sistem pemetaan berbasis web pada umumnya
memiliki fungsi minimal yaitu sistem dapat menampilkan peta suatu wilayah
dengan posisi geografi yang sesuai dengan keadaan sebenarnya, sistem dapat
menampilkan peta dengan beberapa skala tertentu dan sistem dapat
memberikan informasi dari setiap lokasi yang dipilih oleh pengguna [6].
Terdapat dua bentuk penyajian data peta dalam SIG yaitu format
vektor dan format raster. Format vektor bisa berupa shapefile, PostGIS, ESRI
SDE dan oracleSpatial, sedangkan data dalam raster bisa berupa file
berekstensi TIFF, PNG, JPEG, dan GIF. ESRI shapefile atau yang biasa
disebut shapefile adalah format penyimpanan vektor digital untuk menyimpan
geometris lokasi dan informasi yang terkait dengan sebuah atribut. Penelitian
ini menggunakan data dengan format shapefile karena shapefile hanya
menyimpan data primitif geomeris jenis poin, garis dan poligon sehingga lebih
mudah disimpan. Shapefile didefinisikan melalui tiga buah file yaitu .shp (file
utama yang menyimpan bentuk geometri), .shx (menyimpan index dari fiturfitur geometri) dan .dbf (file yang menyimpan atribut-atribut dari fitur-fitur
geometri) [8].
HTML5
HTML5 merupakan standar berikutnya dari revisi HTML versi
sebelumnya. HTML5 menyempurnakan elemen-elemen lama yang terdapat
pada standar sebelumnya, menambahkan elemen-elemen yang lebih semantik
dan menambahkan fitur-fitur baru untuk mendukung pembuatan aplikasi web
yang lebih kompleks. Fitur-fitur baru dalam HTML5 antara lain canvas untuk
menggambar, pemutaran video dan audio secara langsung, penyimpanan
secara offline, elemen konten yang lebih spesifik seperti , ,
, , dan kontrol baru untuk form seperti
kalender, tanggal, waktu, email, url, search. Proses menggambar pada canvas
harus dilakukan di dalam javascript.
Kode Program 1 Pembuatan elemen canvas
1
2
3
4
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
Pada kode program 1, dapat dilihat canvas dibuat dengan deklarasi
variabel dan menggunakan method createElement(). Kemudian melalui
method getContext(„2d‟) baru dapat dilakukan proses penggambaran objek
seperti kotak, lingkaran maupun menampilkan gambar utuh. Untuk dapat
render dan menampilkan shapefile pada canvas, tentunya file harus lengkap
(.shp, .shx dan . dbf) sehingga dapat diproses dengan baik. Pada suatu
shapefile, terdapat data berupa point, polygon dan polyline dan untuk
menghasilkan suatu peta, ketiga hal tersebut dibentuk berdasarkan koordinat
(longitude dan latitude). Point, polygon dan polyline pada shapefile harus
didefinisikan terlebih dahulu melalui javascript untuk proses render pada
canvas.
Kode Program 2 Load url shapefile
1 var shpURL = url+'.shp';
2 var dbfURL = url+'.dbf';
Selanjutnya hanya membutuhkan lokasi shapefile yang disimpan,
kemudian akan dimuat menggunakan javascript sehingga dapat terintegrasi.
Hal ini ditunjukkan pada kode program 2. Masalah tampilan point, polygon
dan polyline pada shapefile (warna, ukuran garis dan lain-lain) juga dapat
diatur dengan javascript.
3. Metode Penelitian
Tahapan Penelitian
Tahapan penelitian diawali dengan membuat hipotesa yang bersifat
kualitatif mengenai sumber data, siapa saja yang akan menjadi pengguna
sistem dan data apa saja yang dibutuhkan dan perlu dipelajari. Setelah itu,
yang dilakukan adalah mendiskusikan dan mengumpulkan data dari sisi
pengguna. Sumber data yang diperoleh dibagi menjadi data primer dan data
sekunder. Data primer diperoleh langsung dari sumbernya yaitu para
pemilik/pengelola pusat kebugaran di Salatiga. Data diperoleh melalui
kuisioner dan wawancara langsung. Untuk permasalahan keberadaan pusat
kebugaran, dilakukan survei (melakukan pencarian langsung di daerah kota
Salatiga) untuk mengetahui lokasinya. Data sekunder diperoleh secara tidak
langsung seperti internet dan buku. Selain itu, juga dilakukan pengumpulan
kebutuhan software dan hardware yang digunakan selama pembangunan
sistem.
Setelah data dikumpulkan, maka dapat dimulai proses perancangan
perangkat lunak. Metode yang digunakan dalam perancangan perangkat lunak
adalah Prototyping model. Prototyping model merupakan proses untuk
membangun sebuah model dari sistem berdasar pada kebutuhan user , dengan
kondisi user hanya memberikan beberapa kebutuhan umum sistem, tanpa
memberikan detail input, proses atau detail output [9].
Gambar 1 Prototyping Model [10]
Tahapan pertama dimulai dengan Listen To Customer . Sistem akan
dibangun berdasarkan kebutuhan dari user . User yang dimaksud adalah para
pemilik pusat kebugaran dan orang yang tertarik untuk mencari pusat
kebugaran. Pada tahap ini, kebutuhan user terhadap sistem hanya bersifat
umum.
Tahap kedua adalah Build/Revise Mock-up. Perangkat lunak sistem
(prototype) mulai dibangun. Sistem dirancang secara bertahap, mulai dari
proses pemetaan lokasi pusat kebugaran, tampilan sistem sampai atributatribut tambahan.
Tahapan selanjutnya adalah evaluasi prototype (pengujian). Evaluasi
dilakukan terhadap setiap prototype yang telah dibuat. Apakah ada perubahan
yang harus dilakukan berdasarkan kebutuhan awal pada perancangan. Jika
ada, maka prototype tetap dikembangkan berdasarkan kebutuhan pengguna.
Pembangunan sistem ini dilakukan sampai prototyping ketiga.
Prototyping yang pertama, sistem telah berhasil menampilkan peta lokasi
pusat-pusat kebugaran, nama jalan dan Point of Interest (fasilitas umum
seperti rumah sakit, gereja, ATM dan lain-lain) dalam format shapefile. Peta
belum dilengkapi fungsi apapun. Header web masih berupa tulisan biasa.
Prototyping kedua, dilakukan penambahan fungsi peta yaitu zoom-in, zoomout dan pan. Juga ditambahkan marker pada masing-masing pusat kebugaran
dan dapat menampilkan informasi. Untuk desain web, header web didesain 3D
dan ditambahkan gambar menjadi background pada body. Prototyping
terakhir yaitu penambahan fungsi search berdasarkan kata kunci, yaitu nama
pusat kebugaran dan alamat.
Perancangan Sistem
Perancangan sistem menggunakan DFD (Data Flow Diagram). DFD
merupakan suatu diagram alur yang menggambarkan model dari sistem yang
terdiri dari proses, alur proses dan external entity yang berhubungan dengan
data yang dihasilkan. Dengan menggunakan DFD, sistem dapat digambarkan
dari level yang paling tinggi (global) dan diturunkan ke level yang lebih
rendah (detail) [11].
Gambar 2 Diagram Konteks
Diagram konteks pada gambar 2 menunjukkan user berperan sebagai
external entity (entitas luar)
dan Sistem Pemetaan Pusat Kebugaran
merupakan proses. Terjadi proses timbal balik antara user dan sistem. User
akan request ke sistem dan pada sistem akan diproses menjadi informasi
sesuai kebutuhan user.
Gambar 3 DFD Level 1
Interaksi antara user dan sistem digambarkan lebih spesifik pada DFD
level 1. Terdapat tiga proses yaitu informasi pusat kebugaran, search dan
navigasi peta. Pada proses Informasi pusat kebugaran, sistem akan
menampilkan informasi mengenai pusat kebugaran sesuai pilihan user . Untuk
pengoperasian peta (zoom dan pan), terdapat pada proses Navigasi peta.
Sedangkan pada proses Search, user mengirimkan request pencarian dan
sistem akan menampilkan hasilnya.
Gambar 4 DFD Level 2 Proses 1
Proses navigasi peta ditunjukkan pada gambar 4. User dapat
melakukan zooming (memperbesar dan memperkecil peta) dan panning
(menggeser peta). Pencarian pusat kebugaran dapat dilakukan dengan proses
tersebut. Kemudian user dapat memilih pusat kebugaran yang diinginkan.
Gambar 5 DFD Level 2 Proses 2
Gambar 5 menunjukkan proses pencarian pusat kebugaran. User
memasukkan keyword dan akan dilakukan pengecekan pada layer pusat
kebugaran. Kemudian akan ditampilkan hasil pencarian berdasarkan keyword
yang telah dimasukkan.
Gambar 6 Flowchart Sistem
Gambar 6 menunjukkan flowchart sistem. Terdapat dua proses yang
pertama dikerjakan sistem yaitu navigasi peta dan search. Proses navigasi
mencakup zooming dan panning pada peta. Kemudian berlanjut ke pemilihan
pusat kebugaran dan akan berakhir jika semua informasi telah ditampilkan.
Pada proses search, sistem akan mengecek kondisi apakah keyword yang
dimasukkan benar. Jika benar, hasil pencarian akan keluar dan informasi akan
ditampilkan. Jika salah, dapat kembali melakukan pencarian.
Gambar 7 Arsitektur Sistem
Gambar 7 menunjukkan arsitektur sistem yang dimulai dari pembuatan
peta. GISCloud (http://www.giscloud.com) merupakan website yang
menyediakan tool untuk membuat peta. Peta ini kemudian disimpan menjadi
format shapefile. Shapefile tersebut kemudian dimuat (load) ke file HTML5
menggunakan library OpenLayers. OpenLayers adalah aplikasi client open
source berbasis javascript untuk menampilkan data peta pada web browser .
OpenLayers mengimplementasikan javascript API yang digunakan untuk
membangun aplikasi GIS berbasis web [12]. Setelah load, maka shapefile
dirubah menjadi format geoJSON. GeoJSON merupakan format untuk
menampilkan informasi data geografis. Shapefile kemudian melalui proses
render pada canvas untuk bisa ditampilkan pada web browser . Menampilkan
peta juga menggunakan library OpenLayers.
Gambar 8 Desain tampilan sistem
Gambar 8 menunjukkan desain tampilan antarmuka sistem. Sistem
ditampilkan dalam browser . Peta akan ditampilkan pada sebelah kiri layar.
Pada bagian kanan, terdapat fungsi untuk melakukan search, berupa textbox
dan button. Textbox untuk mengetik pencarian dan button berfungsi untuk
memproses pencarian. Terdapat sebuah kotak di bawah fungsi search yang
akan menampilkan informasi pusat kebugaran, baik melalui pilihan langsung
dari peta maupun melalui search.
4. Implementasi dan Pengujian Sistem
Kode Program 3 Pembuatan canvas dan deklarasi objek lainnya
1 var Canvas = document.createElement('canvas');
2 var ctx = Canvas.getContext('2d');
3
4 var renderer =
OpenLayers.Util.getParameters(window.location.href).renderer
;
5
renderer = (renderer) ? [renderer] :
OpenLayers.Layer.Vector.prototype.renderers;
6
7 var map = new OpenLayers.Map("map",{allOverlays: true,
maxResolution :"auto"}),
8
parser = new OpenLayers.Format.GeoJSON(),
9
vectorJalan = new
OpenLayers.Layer.Vector("Converted",
10
{
11
styleMap: new
OpenLayers.StyleMap({
12
label : '${label}',
13
labelAlign:"rc",
14
fontSize: "14px"
15
}),
16
renderers: ["Canvas",
"renderer"]
17
}),
18
vectorKecamatan = new
OpenLayers.Layer.Vector("Converted"),
19
vectorPoi = new
OpenLayers.Layer.Vector("Converted", {
20
styleMap: new
OpenLayers.StyleMap({
21
pointRadius: "2",
22
fillColor: "green",
23
strokeColor: "green",
24
label:'${NAMA}',
25
labelAlign:"rc",
26
fontSize:"8px"
27
28
}),
29
renderers: ["Canvas",
"renderer"]
30
}),
31
vectorGym = new
OpenLayers.Layer.Vector("Converted", {
32
styleMap: new
OpenLayers.StyleMap({
33
pointRadius: "2",
34
35
36
37
38
39
40
"renderer"]
41
fillColor: "#0000FF",
strokeColor : "#0000FF",
label:'${nama_gym}',
labelAlign:"lc",
fontSize:"14px"
}),
renderers: ["Canvas",
})
Kode program 3 menunjukkan pembuatan beberapa objek yaitu
canvas, renderer, map, parser dan layer. Canvas dan renderer merupakan objek
untuk render dan menampilkan map. Untuk dapat menampilkan suatu peta
berformat shapefile, peta tersebut harus dirubah (convert) dalam format
GeoJSON. Proses convert dan menampilkan peta dapat dilakukan dengan
javascript, menggunakan library OpenLayers. Parser merupakan objek untuk
merubah shapefile ke GeoJSON. Keempat objek berikutnya yaitu vectorJalan,
vectorKecamatan, vectorPoi dan vectorGym merupakan empat layer yang
akan membentuk peta. vectorJalan untuk layer jalan, vectorKecamatan untuk
layer kecamatan, vectorPoi untuk objek-objek pendukung (misalnya rumah
sakit, rumah makan, ATM dan lain-lain) dan vectorGym untuk layer pusat
kebugaran. vectorJalan berbentuk polyline, vectorKecamatan berbentuk
polygon sedangkan vectorPoi dan vectorGym berbentuk point. Keempat layer
tersebut dapat diatur untuk menampilkan label, ukuran titik dan garis maupun
warnanya menggunakan OpenLayers.StyleMap.
Kode Program 4 Load shapefile
1 new Shapefile({
2 shp: "data/salatiga_gym.shp",
3 dbf: "data/salatiga_gym.dbf"
4
}, function(data){
5
var features = parser.read(data.geojson);
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
vectorGym.addFeatures(features);
map.zoomToExtent(vectorGym.getDataExtent());
console.log(data);
new Shapefile({
shp: "data/salatiga_jalan_geographic.shp",
dbf: "data/salatiga_jalan_geographic.dbf"
}, function(data){
var features = parser.read(data.geojson);
vectorJalan.addFeatures(features);
map.zoomToExtent(vectorJalan.getDataExtent());
console.log(data);
new Shapefile({
shp: "data/salatiga_poi_geographic.shp",
dbf: "data/salatiga_poi_geographic.dbf"
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
}, function(data){
var features = parser.read(data.geojson);
vectorPoi.addFeatures(features);
map.zoomToExtent(vectorPoi.getDataExtent());
console.log(data);
new Shapefile({
shp: "data/salatiga_kecamatan_geographic.shp",
dbf: "data/salatiga_kecamatan_geographic.dbf"
}, function(data){
var features = parser.read(data.geojson);
vectorKecamatan.addFeatures(features);
map.zoomToExtent(vectorKecamatan.getDataExtent());
console.log(data);
});
});
});
});
Kode program 4 menjelaskan proses load shapefile. Proses load
shapefile membutuhkan lokasi shapefile yang disimpan. Load shapefile ini
hanya membutuhkan dua file, yaitu yang berekstensi .shp dan .dbf. Setelah
proses load maka shapefile dirubah menjadi format geoJSON menggunakan
variabel parser yang telah dideklarasi sebelumnya.
Kode Program 5 Menampilkan layer
1
var gymmarkers = new
OpenLayers.Layer.Text("Marker",{location :"markers.txt"});
2
map.addLayer(vectorKecamatan);
3
map.addLayer(vectorJalan);
4
map.addLayer(vectorPoi);
5
map.addLayer(vectorGym);
6
map.addLayer(gymmarkers);
Kode program 5 menunjukkan proses menampilkan empat layer
(vectorJalan, vectorKecamatan, vectorPoi dan vectorGym) ditambah satu
layer yaitu gymmarkers. Gymmarkers merupakan layer untuk menampilkan
marker pada masing-masing pusat kebugaran. File markers.txt merupakan
textfile yang berisi pengaturan marker yaitu lokasi (longitude & latitude), popup title dan deskripsinya serta icon dan ukuran marker . Pop-up akan muncul
ketika user melakukan click pada marker .
Sistem yang dibangun memiliki tiga fungsi utama yaitu menampilkan
peta pusat kebugaran di Salatiga, menampilkan info pusat kebugaran tersebut
dan fungsi search. Fungsi search dimaksudkan agar user dapat mencari pusat
kebugaran berdasarkan keyword yang dimasukkan.
Gambar 9 Tampilan sistem
Pada gambar 9, di sebelah kiri layar adalah peta Salatiga yang
menunjukkan letak pusat kebugaran (marker berwarna merah), point of
interest (titik hijau) seperti kantor, rumah sakit, ATM dan lain-lain.
Sedangkan garis hitam menunjukkan jalan. Informasi yang akan muncul
mengenai masing-masing pusat kebugaran ditunjukkan di sebelah kanan peta.
Paling kanan layar adalah iklan suplemen. Pada peta terdapat icon plus (+)
yang berfungsi untuk melakukan zoom in dan minus (-), berfungsi untuk zoom
out. Fungsi zoom juga dapat dilakukan dengan scroll-wheel. Sedangkan fungsi
panning dilakukan dengan mouse click dan drag.
Kode Program 6 Method untuk menampilkan informasi
1 function newstar(){
2
a.innerHTML = "Newtar GymAlamat : Jl.Kemiri
1 No.70A";
3
a.innerHTML += "No Telp : 085225137865";
4
a.innerHTML += "Suplemen :
TersediaInstruktur Fitness : Tersedia";
5
a.innerHTML += "Waktu Buka : Senin-Sabtu, 08:0020:00 WIB";
6
a.innerHTML += "Biaya Pendaftaran : Member baru
= 50rbbulan selanjutnya = 40rbharian = 7rb";
7
a.innerHTML += "Fasilitas : kamar mandi, ruang
ganti, air minum";
8
a.innerHTML += "Area Latihan : 15m x 6m (panjang
x lebar)";
9
a.innerHTML += "Gallery :";
10
a.innerHTML += " ";
11
a.innerHTML += " ";
12
a.innerHTML += " ";
13
a.innerHTML += " ";
14
a.innerHTML += " ";
15
a.innerHTML += " ";
16
a.innerHTML += " ";
17
a.innerHTML += " ";
18
a.innerHTML += " ";
19
a.innerHTML += " ";
20
a.innerHTML += " ";
21
a.innerHTML += " ";
22
a.innerHTML += " ";
23
a.innerHTML += " ";
24
}
Kode program 6 menunjukkan method yang berisi informasi pusat
kebugaran. Informasi diisi dengan sederhana menggunakan fungsi javascript
innerHTML. Method newstar() akan dipanggil ketiga user mengakses link
“Show more info” pada pop-up marker . Gambar yang ditampilkan, ketika
dipilih salah satu thumbnail gambar, maka gambar ukuran sebenarnya akan
ditampilkan di tab baru.
Gambar 10 Gym Info
Jika user melakukan click pada icon marker , maka akan keluar pop-up
berisi nama pusat kebugaran, alamat, nomor telepon dan link yang akan
menunjukkan informasi lengkap pusat kebugaran. Gambar 10 menunjukkan
informasi pusat kebugaran secara keseluruhan (ketersediaan suplemen dan
instruktur, waktu buka, biaya pendaftaran, fasilitas tambahan dan area
latihan), dilengkapi dengan gambar sehingga user juga bisa melihat kondisi
pusat kebugaran yang ada baik dari luar, maupun di dalam ruangan.
Kode Program 7 Fungsi search
1 function cari(){
2
var s = document.getElementById('search');
3
var i = document.getElementById('gym_info');
4
var featuresArray = new Array;
5
var re = new RegExp(s.value);
6
for(var f=0;f 0){
15
for(var ii = 0 ;ii < featuresArray.length;
ii++){
16
17
i.innerHTML
featuresArray[ii].data["nama_gym"];
18
19
}
20
} else {
21
invalid!");
22
23
24
}
=
alert("Input
i.innerHTML = "";
}
Kode program 7 menunjukkan method cari() yang digunakan untuk
fungsi search. Fungsi search dilakukan berdasarkan kata kunci. Kata kunci
yang dimaksud adalah atribut dari layer vectorGym yaitu nama_gym (nama
pusat kebugaran) dan alamat. Jika apa yang diketik pada search-box sama
dengan salah satu nama_gym atau alamat maka proses pencarian akan
menampilkan nama pusat kebugaran yang dimaksud. Untuk memudahkan
pencarian, digunakan fungsi regular expression dari javascript sehingga dapat
menghasilkan pencarian hanya dengan mencocokkan beberapa string.
Gambar 11 Search
Gambar 11 menunjukkan fungsi search. User memasukkan kata kunci
pada search box dan jika button “Go” ditekan, maka pencarian akan diproses.
Hasil pencarian akan muncul pada area “Info”. Jika kata kunci tidak sesuai,
akan muncul peringatan dan pencarian tidak akan diproses.
Pengujian Sistem
Untuk mengetahui tingkat keberhasilan sistem, maka diperlukan
pengujian pada sistem tersebut. Tujuannya adalah untuk menghindari
kesalahan-kesalahan yang terjadi pada sistem yang dibangun. Apabila dalam
proses pengujian ditemukan kesalahan pada sistem, maka sistem harus
diperbaiki hingga tidak terdapat kesalahan. Pengujian dilakukan menggunakan
metode black box testing. Black box testing merupakan metode pengujian
yang dilakukan berdasarkan sudut pandang dari end user . Metode pengujian
ini tidak membutuhkan pengetahuan mengenai kondisi internal dari suatu
sistem yang akan diuji. Jadi penguji hanya mengetahui nilai input yang
dimasukkan dan output yang diharapkan [13]. Pengujian dibagi dua yaitu
pengujian terhadap jalannya sistem dan pengujian user dalam menggunakan
sistem. Tabel 1 menunjukkan hasil pengujian jalannya sistem. Dari tabel
tersebut, dapat dilihat bahwa sistem yang dibangun dapat berjalan dengan baik
dan telah sesuai dengan output yang diharapkan.
Tabel 1 Hasil pengujian sistem
No.
Point Pengujian
Nilai Input
1.
2.
Pemetaan Gym
Fungsi-fungsi pada
peta
3.
Penyajian informasi
Load peta
Zoom-in
Zoom-out
Panning
Klik marker
Klik “Show more
info”
Klik gambar
4.
Search
Kata kunci benar
Kata kunci salah
Angka
Kosong
Output yang
Diharapkan
Peta tampil
Peta diperbesar
Peta diperkecil
Peta digeser
Pop-up informasi gym
Informasi lengkap gym
Hasil
Uji
Berhasil
Berhasil
Berhasil
Berhasil
Berhasil
Berhasil
Muncul gambar ukuran
besar
Input diproses
Tidak valid
Tidak valid
Tidak valid
Berhasil
Berhasil
Berhasil
Berhasil
Berhasil
Pengujian user bertujuan untuk mengetahui bagaimana tanggapan user
terhadap sistem yang telah dibangun. Pengujian dilakukan dengan membagi
kuisioner kepada user . User yang dimaksudkan adalah orang yang tertarik
untuk mencari pusat kebugaran. Terlebih dahulu ditanyakan kepada target
responden apakah mereka berminat untuk mencari pusat kebugaran atau ingin
mengetahui keberadaan beberapa pusat kebugaran yang ada di Salatiga. Jika
ya, maka sistem ditunjukkan untuk diuji dan kuisioner dapat diisi. Hasil
pengujian user dengan kuisioner dapat dilihat pada tabel 2.
Tabel 2 Hasil pengujian user
No.
Daftar Pertanyaan
1
Pilihan Jawaban
2
3
4
Interface sistem
Apakah tampilan desain sistem menarik ?
1.
2.
3.
Apakah pemilihan warna pada keseluruhan
sistem sudah bagus ?
Apakah tulisan pada sistem mudah dibaca ?
Kemudahan pemakaian
4.
Apakah peta dapat dimengerti dengan baik ?
1
Total
5
5
17
9
31
12
14
4
31
9
22
14
13
31
4
31
Apakah fungsi pembesaran dan penggeseran pada
peta dapat digunakan dengan baik ?
Apakah fungsi pencarian dapat bekerja dengan
6.
baik ?
Kebutuhan informasi
Apakah keterangan nama tempat pada peta sudah
7.
sesuai kebutuhan ?
Apakah informasi pusat kebugaran yang
8.
ditampilkan sudah cukup lengkap ?
Apakah foto-foto yang ditampilkan sudah cukup
9.
untuk mengetahui gambaran pusat kebugaran?
Manfaat sistem
Apakah sistem mempermudah pencarian pusat
10.
kebugaran ?
5.
Total
10
6
0
7
21
31
19
6
31
11
17
3
31
1
4
26
31
4
27
31
1
17
13
31
72
124
107
310
Jumlah responden adalah 31 yang terdiri dari pelajar, mahasiswa dan
orang yang sudah mempunyai pekerjaan.
Masing-masing jawaban dibandingkan dengan semua total jawaban,
maka akan diperoleh persentase dengan penjelasan sebagai berikut :
1) Jawaban 1 (Sangat Kurang) : 0 dari 310 (0/310*100%) = 0%
2) Jawaban 2 (Kurang) : 7 dari 310 (7/310*100%) = 2.25%
3) Jawaban 3 (Cukup) : 72 dari 310 (72/310*100%) = 23.22%
4) Jawaban 4 (Baik) : 124 dari 310 (124/310*100%) = 40%
5) Jawaban 5 (Sangat Baik) : 107 dari 310 (107/310*100%) = 34.51%
Melalui persentase tersebut maka dapat diketahui bahwa jawaban 4
(Baik) mempunyai persentase yang paling tinggi yaitu 40%. Selanjutnya
adalah jawaban 5(Sangat Baik) dengan persentase 34,51%, jawaban 3 (Cukup)
23.22%, jawaban 2 (Kurang) 2.25% dan jawaban 1 (Sangat Kurang) dengan
persentase 0%.
5. Simpulan
Kesimpulan dari hasil implementasi dan pengujian sistem adalah
shapefile yang dimasukkan menggunakan library OpenLayers dan telah
dirubah menjadi format geoJSON dapat dengan baik diintegrasikan dengan
canvas pada HTML5. Pemetaan berbasis web menggunakan HTML5 dengan
peta dalam format shapefile dapat menghasilkan sistem yang interaktif. Sistem
Pemetaan Pusat Kebugaran di Salatiga mampu menghasilkan peta dan
informasi mengenai pusat-pusat kebugaran yang ada di Salatiga. Karena
informasi ditampilkan sederhana menggunakan javascript, maka sistem dapat
dikembangkan menggunakan database sehingga lebih mudah untuk
memasukkan dan menampilkan informasi. Selain itu, fungsi search juga dapat
dikembangkan dengan menambah kata kunci pencarian.
6. Daftar Pustaka
[1]
[2]
[3]
[4]
[5]
[6]
[7]
[8]
[9]
[10]
[11]
[12]
[13]
HTML5, http://www.w3schools.com/. Diakses pada tanggal 11
Desember 2012.
Kazdin, Alan, 2010, Encyclopedia of Psychology, http://www.apa.org/,
Diakses pada tanggal 5 November 2013.
Mukhammad Wildan, 2010, Teknik Visualisasi 3D untuk Sistem
Informasi Geografis Studi Kasus Manajemen Replanting Pasca
Kebakaran Hutan di Pulau Kalimantan, http://digilib.its.ac.id/. Diakses
pada bulan Desember 2012.
Y, S, Muhammad, 2011, Aplikasi Web Penyedia Informasi, Lokasi dan
Rute di Kampus UPN Veteran Jawa Timur, http://eprints.upnjatim.ac.id,
Diakses pada tanggal 6 November 2013.
Magel N Kamel Boulos, Jeffrey Warren, Jianya Gong, Peng Yue, 2010,
Web GIS in Practice VIII: HTML5 and The Canvas Element for
Interactive Online Mapping, http://link.springer.com/article. Diakses
pada tanggal 6 November 2013.
Buana, Putu Wira, 2010, Penentuan Rute Terpendek pada Aplikasi
Berbasis Peta .
Arifin, Hurama, 2005, Perancangan dan Pembuatan Peta Fasilitas
Kota Surabaya Berbasis Web, Surabaya.
Prahasta, E, 2002, Sistem Informasi Geografis:Tutorial ArcView.
Hariyanto, Bambang, 2004, Rekayasa Sistem Berorientasi Objek,
Informatika.
Pressman, 2000, Software Enginer ing: A Practitioner’s Approach Fifth
Edition, America: Mc Graw Hill .
M. Irfan Ashshidiq, M. Andri Setiawan, Fathul Wahid, 2006, Aplikasi
Berbasis Web Pemetaan Informasi pada Gambar Bitmap, Media
Informatika, Vol. 4, No. 1, Juni 2006, 13-26, http://journal.uii.ac.id,
Diakses pada tanggal 3 Agustus 2013.
Budiawan, 2010, Aplikasi GIS Berbasis Web Menggunakan Geoserver
pada Sistem Informasi Trafo Gardu Induk di PLN Surabaya,
http://digilib.its.ac.id/. Diakses pada tanggal 6 November 2013.
Inge Evita Putri, 2005, Penerapan Item Response Theory yang
Dikombinasikan dengan Kingsbury and Zara Procedure pada Adaptive
Online
Test
System,
Universitas
Indonesia,
http://lontar.ui.ac.id/opac/ui/. Diakses pada tanggal 23 September 2013.