4.1 Spesifikasi Pengguna
Aplikasi peta kota solo ini ditujukan untuk digunakan oleh semua pihak yang ingin mencari dan mengetahui lokasi letak daerah di kota solo dan memberi informasi wisata dan tempat sebagai sarana pendukung lainya seperti informasi penginapan, informasi rumah sakit dan lain-lain.
4.2 Tampilan Program
Tampilan dari Progran ini hanya terdiri dari satu platform, yaitu dari client tampilan menggunakan browser yang terkoneksi dalam internet.Berikut ini beberapa gambar tampilan Program.
4.2.1 Tampilan Halaman Awal
Tampilan halaman awal adalah tampilan awal pada saat pengguna mengakses program. Tampilan awal program dapat dilihat pada gambar berikut :
Gambar 4.1 halaman awal
Desain tampilan halaman awal di dominasi warna biru. Header
commit to user
28
header terdapat menu untuk mengakses halaman selanjutnya, menu pada header akan ada pada setiap halaman. Konten di dominasi oleh warna putih, isi konten adalah pilihan kategori “galeri, peta kota solo,info wisata dan video. Desain untuk pilihan kategori berupa sebuah folder yang berisi konten kategori tersebut. Isi pada footer adalah menu musik dan panduan pengoperasian program.
4.2.2 Tampilan Halaman Galeri
Halaman galeri adalah halaman yang berisi galeri foto kota solo yang dilengkapi dengan judul dan keterangan dari foto tersebut. Berikut adalah tampilan dari halaman galeri kota solo.
Gambar 4.2 halaman galeri
Untuk menampilkan halaman galeri kota solo digunakan pemrograman
Javascript J-queryguna mempercantik tampilan. sengaja dipilih
pemrograman dengan j-query agar ukuran file berukuran kecil.
commit to user
29
Halaman peta kota solo adalah halaman utama dari program yang berisi konten peta kota solo. Berikut tampilan peta kota solo
Gambar 4.3 peta kota solo
Peta kota solo berisi konten peta dari kota solo yang berisi informasi nama tempat, jalan, dan nama lokasi yang dibutuhkan secara umum selayaknya sebuah peta. Peta kota solo adalah sebuah file . didalam peta kota solo terdapat beberapa fitur seperti :
Fitur Search : fitur untuk mencari nama lokasi
Fitur info tempat : fitur keterangan yang berguna bagi pengguna untuk menunjukan nama tempat, informasi tempat dilengkapi gambar dan video agar lebih menarik
Fitur legenda : fitur yang berisi keterangan dari simbol-simbol didalam peta
commit to user
30
Halaman video mode adalah halaman yang menampilkan peta kota solo dalam mode video, halaman video mode dapat dilhat pada gambar 4.5
Gambar 4.4 halaman video mode
4.2.5 Tampilan halaman admin
Halaman admin berisi form input untuk input data galeri yang berguna bagi admin untuk menambahkan dan mengedit data pada halaman galeri. Berikut adalah tampilan halaman awal admin
Gambar 4.5 halaman awal admin
4.3 Script program
Berikut adalah script program dari peta kota solo berbasis flash dan xml
commit to user
31
a. Script program zooming tool muncul dan hilang
root.kamera.koor._visible = true; _root.kamera.garis._visible = true;
_root.kamera.oksrc._visible= false;//menyembunyikan fungsi "search"
_root.kamera.navmenu._alpha = 25;// mengatur alpha navmenu
//kode inti untuk menyembunyikan button
Mouse.hide();
kamera.onMouseMove = function() {
//if(_root.zoomin | | _root.zoomout | | _root.dragme) { this.toolzoom._x = this._xmouse;
this.toolzoom._y = this._ymouse; updateAfterEvent();
//} };
b. Script program untuk membuatzooming tool
var klik = 0;
_root.zoomin = false; _root.zoomout = false; _root.dragme = false;
function zoom(mc, faktor, waktu) {
type = mx.transitions.easing.Strong.easeOut;
besarx = new mx.transitions.Tween(mc, "_xscale", type, mc._xscale, mc._xscale * faktor, wa ktu, true);
besary = new mx.transitions.Tween(mc, "_yscale", type, mc._yscale, mc._yscale * faktor, wa ktu, true);
geserx = new mx.transitions.Tween(mc, "_x", type, mc._x, _root._xmouse, waktu, true);
gesery = new mx.transitions.Tween(mc, "_y", type, mc._y, _root._ymouse, waktu, true);
}
map.indo.onRelease = function() {
if (!dragme) {
commit to user
32
if (_root.zoomin && klik < 5) {
zoom(kamera,0.5,1); klik+ + ;
}
if (_root.zoomout && klik > 0) { zoom(kamera,2,1); klik--; } } this.stopDrag(); }; map.indo.onPress = function() { if (dragme) { map.startDrag(); } };
kode pada layer "zoom button":
for (i = 1; i < = 3; i + = 1) {
buttonmenu = _root.kamera.navmenu["b" + i]; buttonmenu.id = i;
buttonmenu.onRelease = function() {
_root.kamera.papan._visible = false;// menhilangkan papan keterangan
_root.kamera.papan.gotoAndStop("fungsi");// mengfungsikan kembali button
_root.cursorMovieClip = true;
_root.kamera.oksrc._visible = false;// menghilangkan form search _root.kamera.bsearch0._visible = true;// Memunculkan button search _root.map["tanda" + i]._visible = false;//menghilangkan marker if (this.id = = 1) { _root.kamera.toolzoom.gotoAndStop(2); _root.zoomin = true; _root.zoomout = false; _root.dragme = false;
commit to user 33 } if (this.id = = 2) { _root.kamera.toolzoom.gotoAndStop(3); _root.zoomout = true; _root.zoomin = false; _root.dragme = false; } if (this.id = = 3) { _root.kamera.toolzoom.gotoAndStop(4); _root.dragme = true; _root.zoomin = false; _root.zoomout = false; } updateAfterEvent(); }; buttonmenu.onRollOver = function() { _root.kamera.toolzoom.gotoAndStop(1);
_root.kamera.navmenu._alpha = 100;// zoom transparant 100% _root.cursorMovieClip = true;
};
buttonmenu.onRollOut = function() {
_root.kamera.navmenu._alpha = 25;// zoom transparant 25% tugelmode(); }; } function tugelmode() { if (_root.zoomin) { _root.kamera.toolzoom.gotoAndStop(2); } else if (_root.zoomout) { _root.kamera.toolzoom.gotoAndStop(3); } else if (_root.dragme) { _root.kamera.toolzoom.gotoAndStop(4); }
commit to user 34 else if (_root.cursorMovieClip) { _root.kamera.toolzoom.gotoAndStop(1); } }
c. Script untuk Load dan kontrol fungsi xml
posisix= []; posisiy= []; areamap= [];
var myXML:XML = new XML(); myXML.ignoreWhite= true; myXML.load("dataku.xml");
myXML.onLoad = function(success) { if (success) {
var mydata = myXML.firstChild.childNodes; for(i= 0; i< mydata.length; i+ = 1){
showInfo(mydata[i]); posisix[i]= mydata[i].attributes.mapx; posisiy[i]= mydata[i].attributes.mapy; areamap[i]= mydata[i].attributes.judul; } } else { pesan.text= "gagal"; } }; _root.kamera.papan._visible= false; function showInfo(dataxml) { var judul= dataxml.attributes.judul; var isi= dataxml.firstChild.nodeValue; var gambar= dataxml.attributes.gambar; var posx= dataxml.attributes.posx; var posy= dataxml.attributes.posy; var no= i;
commit to user
35
map.attachMovie("tanda", "tanda"+ no, 500+ i); var marker= _root.map["tanda"+ no];
marker._x= posx; marker._y= posy; marker.infopt.text= judul; marker._visible= false; area.onPress= function(){ trace(this); _root.kamera.papan.gotoAndStop("tkfungsi"); _root.kamera.papan.infot.text= judul; _root.kamera.papan.infot2.text= isi; _root.kamera.papan.gbr.loadMovie(gambar); _root.kamera.papan._visible= true; _root.zoomin= false; _root.zoomout= false; _root.dragme= false; _root.kamera.toolzoom.gotoAndStop(1); _root.map["tanda"+ i]._visible= false; }
// roll over button balik semula area.onRollOver= function() {
_root.kamera.toolzoom.gotoAndStop(1); _root.kamera.papanpt.nmpt.text= judul; }
area.onRollOut= function() {
_root.kamera.papanpt.nmpt.text= ""; // teks kosong tugelmode(); } //end for }; _root.kamera.papan.clos.onRelease= function() { _root.kamera.toolzoom.gotoAndStop(1); _root.kamera.papan._visible= false; _root.kamera.papan.gotoAndStop("fungsi"); }
d. Script untuk menunjukan hasil pencarian ( search )
function zoom2(mc, waktu) {
commit to user
36
type = mx.transitions.easing.Elastic.easeOut;
besarx = new mx.transitions.Tween(mc, "_xscale", type, mc._xscale, 100, wa ktu, true);
besary = new mx.transitions.Tween(mc, "_yscale", type, mc._yscale, 100, wa ktu, true);
geserx = new mx.transitions.Tween(mc, "_x", type, mc._x, 275, wa ktu, true);
gesery = new mx.transitions.Tween(mc, "_y", type, mc._y, 200, wa ktu, true);
gesermapx = new mx.transitions.Tween(_root.map, "_x", type, _root.map._x, 271.85, wa ktu, true);
gesermapy = new mx.transitions.Tween(_root.map, "_y", type, _root.map._y, 126.7, wa ktu, true);
}
e. Script untuk menu pencarian (search )
kamera.oksrc._visible= false;//menyembunyikan mc search
kamera.bsea rch0.onRelease = function() {
kamera.oksrc._visible= true;/memunculkan mc sea crh
kamera.oksrc.warn._visible= true;//teks petunjuk
kamera.bsea rch0._visible= false; _root.zoomin= false;
_root.zoomout= false; _root.dragme= false;
zoom2(kamera, 1);//kembalikan ke skala dan klik awa l
klik= 0;
_root.kamera.toolzoom.gotoAndStop(1); }
kamera.bsea rch0.onRollOver= function() { _root.kamera.toolzoom.gotoAndStop(1); }
kamera.bsea rch0.onRollOut= function() { tugelmode();
}
function cari() {
_root.kamera.toolzoom.gotoAndStop(1);
_root.map["tanda"+ i]._visible= false;//menyembunyikan marker
untuk pencarian berikutnya
_root.kamera.oksrc.wa rn._visible= false; if (kamera.oksrc.input_txt.text != "") { for (i= 0; i< areamap.length; i+ + ) {
commit to user
37
if (areamap[i] = = kamera.oksrc.input_txt.text.toLowerCa se()) { kamera.myinfo.text = "Found "+ kamera.oksrc.input_txt.text; _root.map["tanda"+ i]._visible= true;
gesermap(map, 1);
kamera.oksrc.input_txt.text= ""; _root.kamera.garis._visible = false; break;
} else {
kamera.myinfo.text = "No data"; }
} //end for } else {
kamera.myinfo.text = "masukan nama tempat yang dicari"; } //end if else result
} //end cari
4.4 Hasil Uji Coba Program
Hasil ujicoba Aplikasi ini dilakukan 2 tahap, yaitu ujicoba pada web
browser dan uji coba pada responden.
Berikut adalah hasil ujicoba pada web browser:
Ujicoba proses Searching terhadap lokasi yang dituju (proses
input text lokasi tujuan )
Gambar 4.8 hasil ujicoba 1 (proses input data text)
commit to user
38
Gambar 4.9 hasil ujicoba 2 ( hasil proses searching )
Ujicoba menu pada peta
Gambar 4.10 hasil ujicoba 3 ( ujicoba pada peta kota solo) Berikut adalah hasil ujicoba kepada responden dengan pertanyaan sebagai berikut :
5. Bagaimana tampilan dari Aplikasi “Peta kota solo berbasis Flash dan
XML volume II
commit to user
39
6. Apakah informasi yang disajikan pada peta anda rasa sudah cukup memenuhi kebutuhan akan informasi
Sangat cukup cukup belum cukup sangat kurang 7. Media apa yang menurut anda perlu ditambahkan dalam aplikasi ini
tuliskan
8. Apakah menurut Anda Program aplikasi ini layak digunakan untuk masyarakat:
Sangat layak layak cukup layak tidak layak
Didapat hasil sebagai berikut :
Pertanyaan Pilihan jawaban
1. Bagaimana tampilan dari Aplikasi “Peta kota solo berbasis Flash dan
XML volume II Baik sekali 0 Biasa 3 Cukup 4 Kurang 0
2. Apakah informasi yang disajikan pada peta anda rasa sudah cukup memenuhi kebutuhan akan informasi Sangat 0 Cukup 3 Belum 3 Kurang 1
3. Apakah menurut Anda Program aplikasi ini layak digunakan untuk masyarakat: Sangat 0 Layak 3 Cukup 4 Tidak 0
commit to user
40
Tabel 4.1 tabel hasil pertanyaan
4.5 Analisa
Aplikasi ini memiliki fungsi utama sebagai Peta penunjuk lokasi digital yang dapat diakses melalui media elektronik yang terkoneksi jaringan internet. Pembuatan aplikasi ini menggunakan kode pemrograman php,xml,javascript, dan adope flash dengan bahasa pemrograman actionscript yang berbasis web sehingga pada implementasinya akan bias digunakan serta diakses dimanapun siapapun, dan kapanpun
Untuk menggunakan aplikasi ini dibutuhkan media elektronik berupa komputer / laptop yang mempunyai terhubung dengan internet dan didalamnya sudah terinstal adope flash player.Aplikasi ini juga dilengkapi fasilitas untuk melihat informasi tentang daerah tujuan wisata dikota solo dan berbagai tempat pendukung pariwisata di kota solo. Kekurangan dari aplikasi ini yaitu hanya dapat digunakan pada media online yang harus terkoneksi pada internetserta belum dapat dilakukan proses editing data pada peta sehingga peta bersifat lebih statis.
commit to user
41
BAB V PENUTUP
5.1 Kesimpulan
Aplikasi Peta kota solo berbasis flash dan xml volume II ini telah berhasil dibuat dan dapat dijadikan media promosi sekaligus pedoman bagi wisatawan baik dalam dan luar, aplikasi ini menggunakan media
online dan dapat dijalankan dengan komputer atau laptop yang didalamnya
sudah terinstal adope flash player.
Aplikasi Peta kota solo berbasis flash dan xml volume II dapat menyempurnakan Aplikasi yang sebelumnya telah dibuat dengan penambahan beberapa fitur baru seperti sea rch dan video.
5.2 Saran
Aplikasi Peta kota solo berbasis flash dan xml volume II sebaiknya adalah sebuah aplikasi yang suport dengan sma rtphone yang memiliki sistem operasi seperti Android.
Perlunya informasi yang lebih lengkap seperti informasi transportasi sehingga konten dari peta dapat memenuhi kebutuhan untuk masyarakat pada umumnya dan wisatawan pada khususnya.