T1 672006180 Full text

(1)

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

(2)

(3)

(4)

(5)

(6)

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 masing-masing 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} 2

Staff Pengajar Fakultas Teknologi Informasi Universitas Kristen Satya Wacana

(7)

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].

(8)

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

(9)

1 <script>

2 var canvas = document.createElement('canvas'); 3 var ctx = canvas.getContext('2d');

4 </script>

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 fitur-fitur geometri) dan .dbf (file yang menyimpan atribut-atribut dari fitur-fitur-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 <article>, <footer>, <header>, <navigation>, <section> 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

(10)

1 var shpURL = url+'.shp'; 2 var dbfURL = url+'.dbf';

Kode Program 2 Load url shapefile

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].

(11)

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 atribut-atribut 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, zoom-out 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

(12)

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

(13)

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

(14)

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

(15)

1 var Canvas = document.createElement('canvas'); 2 var ctx = Canvas.getContext('2d');

3

7 var map = new OpenLayers.Map("map",{allOverlays: true, maxResolution :"auto"}),

16 renderers: ["Canvas",

"renderer"]

21 pointRadius: "2",

22 fillColor: "green",

akan menampilkan informasi pusat kebugaran, baik melalui pilihan langsung dari peta maupun melalui search.

4. Implementasi dan Pengujian Sistem

(16)

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);

15 vectorJalan.addFeatures(features); 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

34 fillColor: "#0000FF",

35 strokeColor : "#0000FF",

(17)

22 }, function(data){

24 vectorPoi.addFeatures(features);

33 vectorKecamatan.addFeatures(features); 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

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), pop-up 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.

(18)

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 Gym<br>Alamat : Jl.Kemiri 1 No.70A<br>";

3 a.innerHTML += "No Telp : 085225137865<br>";

4 a.innerHTML += "Suplemen :

Tersedia<br>Instruktur Fitness : Tersedia<br>";

5 a.innerHTML += "Waktu Buka : Senin-Sabtu,

08:00-20:00 WIB<br>";

6 a.innerHTML += "Biaya Pendaftaran : Member baru

= 50rb<br>bulan selanjutnya = 40rb<br>harian = 7rb<br>";

7 a.innerHTML += "Fasilitas : kamar mandi, ruang

ganti, air minum<br>";

8 a.innerHTML += "Area Latihan : 15m x 6m (panjang

x lebar)<br>";

(19)

(20)

“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<vectorGym.features.length;f++) {

7

8 if(vectorGym.features[f].data["nama_gym"].match(re)|| vectorGym.features[f].data["alamat"].match(re)) {

9 featuresArray[featuresArray.length] =

vectorGym.features[f];

10 break;

11 }

12 }

13

14 if(featuresArray.length > 0){

15 for(var ii = 0 ;ii < featuresArray.length;

(21)

17 i.innerHTML = featuresArray[ii].data["nama_gym"];

18

19 }

20 } else {

21 alert("Input

invalid!");

22 i.innerHTML = "";

23 }

24 }

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

(22)

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 Output yang

Diharapkan

Zoom-in Peta diperbesar Berhasil Zoom-out Peta diperkecil Berhasil Panning Peta digeser Berhasil 3. Penyajian informasi Klik marker Pop-up informasi gym Berhasil

Klik “Show more info”

Informasi lengkap gym Berhasil

Klik gambar Muncul gambar ukuran besar

Berhasil

4. Search Kata kunci benar Input diproses Berhasil Kata kunci salah Tidak valid Berhasil

Angka Tidak valid Berhasil

Kosong Tidak valid 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 Pilihan Jawaban Total

1 2 3 4 5

Interface sistem

1. Apakah tampilan desain sistem menarik ? 5 17 9 31

2. Apakah pemilihan warna pada keseluruhan

sistem sudah bagus ? 1 12 14 4 31

3. Apakah tulisan pada sistem mudah dibaca ? 9 22 31

Kemudahan pemakaian

(23)

5. Apakah fungsi pembesaran dan penggeseran pada

peta dapat digunakan dengan baik ? 10 21 31

6. Apakah fungsi pencarian dapat bekerja dengan

baik ? 6 19 6 31

Kebutuhan informasi

7. Apakah keterangan nama tempat pada peta sudah

sesuai kebutuhan ? 11 17 3 31

8. Apakah informasi pusat kebugaran yang

ditampilkan sudah cukup lengkap ? 1 4 26 31

9. Apakah foto-foto yang ditampilkan sudah cukup

untuk mengetahui gambaran pusat kebugaran? 4 27 31 Manfaat sistem

10. Apakah sistem mempermudah pencarian pusat

kebugaran ? 1 17 13 31

Total 0 7 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

(24)

6. Daftar Pustaka

[1] HTML5, http://www.w3schools.com/. Diakses pada tanggal 11 Desember 2012.

[2] Kazdin, Alan, 2010, Encyclopedia of Psychology, http://www.apa.org/,

Diakses pada tanggal 5 November 2013.

[3] 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.

[4] 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.

[5] 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.

[6] Buana, Putu Wira, 2010, Penentuan Rute Terpendek pada Aplikasi Berbasis Peta.

[7] Arifin, Hurama, 2005, Perancangan dan Pembuatan Peta Fasilitas Kota Surabaya Berbasis Web, Surabaya.

[8] Prahasta, E, 2002, Sistem Informasi Geografis:Tutorial ArcView.

[9] Hariyanto, Bambang, 2004, Rekayasa Sistem Berorientasi Objek, Informatika.

[10] Pressman, 2000, Software Enginering: A Practitioner’s Approach Fifth Edition, America: Mc Graw Hill .

[11] 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.

[12] 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.