Pemetaan Pusat Kebugaran di Salatiga Menggunakan Canvas pada HTML5 dan Shapefile

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 <article>,
,
, , <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 1 2 3 4

<script> 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 Gym
Alamat : Jl.Kemiri 1 No.70A
"; 3 a.innerHTML += "No Telp : 085225137865
"; 4 a.innerHTML += "Suplemen : Tersedia
Instruktur Fitness : Tersedia
"; 5 a.innerHTML += "Waktu Buka : Senin-Sabtu, 08:0020:00 WIB
"; 6 a.innerHTML += "Biaya Pendaftaran : Member baru = 50rb
bulan selanjutnya = 40rb
harian = 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 += "
src='images/Newstar/_MG_1705.jpg' width='70px' height='100px'> "; 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 Enginering: 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.

Pemetaan Pusat Kebugaran di Salatiga Menggunakan Canvas pada HTML5 dan Shapefile

Recommend Documents