pemetaan pusat kebugaran di salatiga menggunakan canvas...

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


Universitas Kristen Satya Wacana

Salatiga

2013

Pemetaan Pusat Kebugaran di Salatiga Menggunakan

Canvas pada HTML5 dan Shapefile

Marciovaldi Maspaitella1, Frederik Samuel Papilaya

2, Sri Winarso M. E

3


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

3 Staff Pengajar Fakultas Teknologi Informasi Universitas Kristen Satya Wacana

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

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

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

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.

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

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

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

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


21 pointRadius: "2",

22 fillColor: "green",

23 strokeColor: "green",

24 label:'${NAMA}',

25 labelAlign:"rc",

26 fontSize:"8px"

27

28 }),


"renderer"]

30 }),

31 vectorGym = new

OpenLayers.Layer.Vector("Converted", {

32 styleMap: new


33 pointRadius: "2",

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

7 map.zoomToExtent(vectorGym.getDataExtent());

8 console.log(data);

9

10 new Shapefile({

11 shp: "data/salatiga_jalan_geographic.shp",

12 dbf: "data/salatiga_jalan_geographic.dbf"



15 vectorJalan.addFeatures(features);

16 map.zoomToExtent(vectorJalan.getDataExtent());


18

19 new Shapefile({

20 shp: "data/salatiga_poi_geographic.shp",

21 dbf: "data/salatiga_poi_geographic.dbf"

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

34 fillColor: "#0000FF",

35 strokeColor : "#0000FF",

36 label:'${nama_gym}',

37 labelAlign:"lc",

38 fontSize:"14px"

39 }),


"renderer"]

41 })



24 vectorPoi.addFeatures(features);

25 map.zoomToExtent(vectorPoi.getDataExtent());


27

28 new Shapefile({

29 shp: "data/salatiga_kecamatan_geographic.shp",

30 dbf: "data/salatiga_kecamatan_geographic.dbf"



33 vectorKecamatan.addFeatures(features);

34 map.zoomToExtent(vectorKecamatan.getDataExtent());


36

37 });

38 });

39 });

40 });

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

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.

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

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

9 a.innerHTML += "Gallery :<br>";

10 a.innerHTML += "<a

href='images/Newstar/_MG_1704.jpg' target='_blank'><img

src='images/Newstar/_MG_1704.jpg' width='70px'

height='100px'></href> ";































src='images/Newstar/_MG_1713.jpg' width='70px' height='100px'></href> ";





















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

ii++){

16

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

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

Diharapkan

Hasil

Uji

1. Pemetaan Gym Load peta Peta tampil Berhasil

2. Fungsi-fungsi pada

peta

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

4. Apakah peta dapat dimengerti dengan baik ? 14 13 4 31

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

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

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

pemetaan pusat kebugaran di salatiga menggunakan canvas...

Documents