Bab 4 Hasil dan Pembahasan 4.1 Prototype Website Cagar Budaya Salatiga Hasil dari implementasi perancangan sistem adalah prototype website Cagar Budaya Salatiga. 4.1.1 Prototype Satu Website Cagar Budaya
Gambar 4.1 Prototype Satu Format Mobile
Gambar 4.1 merupakan tampilan website ketika diakses melalui telepon seluler dengan internet browser Opera Mini di sistem operasi Android. Tampilan ini belum disetujui dan mendapat revisi dari pengguna. Revisi yang diberikan antara lain: -
Revisi pada layout atau tata letak, tata letak yang yang ada
terlalu panjang kebawah sehingga terkesan terlalu banyak data pada awal akses website. Pengguna menginginkan tampilan yang lebih sederhana lagi, hanya menampilkan link menu-menu utama saja. -
Penambahan tanggal hari ini.
-
Penambahan halaman kontak.
-
Fasilitas lupa password untuk pengguna.
63
64
Gambar 4.2 Prototype Satu Format Desktop
Untuk tampilan prototype yang diakses melalui komputer (dekstop) dapat dilihat pada gambar 4.2. Revisi yang diberikan oleh pengguna antara lain -
Penambahan tampilan tanggal hari ini di kolom kiri (panel
kiri). -
Penambahan halaman kontak.
-
Perubahan warna background pada tabel yang berwarna hijau
(kepala tabel) menjadi warna coklat gradasi. -
Penambahan fasilitas lupa password.
-
Penambahan navigasi halaman (breadcrumb).
-
Penambahan icon pada tab halaman di browser.
65
Breadcrumb adalah navigasi halaman yang menampilkan struktur halaman yang diakses untuk memudahkan pengguna untuk kembali atau menuju ke halaman tertentu.
Gambar 4.3 Contoh Tampilan Breadcrumb
Gambar 4.3 merupakan contoh dari tampilan navigasi halaman breadcrumb. Prototype halaman administrator diawali dengan halaman login (jika pengguna belum melakukan login) seperti diperlihatkan pada gambar 4.4. Pengguna administrator harus memasukkan username dan password pada form (gambar 4.4) agar dapat menggunakan fasilitas-fasilitas di halaman administrator.
Gambar 4.4 Tampilan Halaman Login Administrator
Jika administrator memasukkan username dan password dengan benar maka akan tampil halaman awal halaman administrator seperti terlihat pada gambar 4.5.
66
Gambar 4.5 Tampilan Depan Halaman Administrator Setelah Login
Halaman administrator terdapat dua bagian yaitu kolom menu (sebelah kiri) dan kolom konten (sebelah kanan). Pada prototype satu halaman administrator ini tidak terdapat revisi dari pengguna, dalam hal ini berarti pengguna sudah merasa puas dengan tampilan maupun fungsi yang terdapat di halaman tersebut. 4.1.2 Tampilan Prototype Dua Website Cagar Budaya
Gambar 4.6 Tampilan Beranda dalam Format Mobile
Gambar 4.6 dan Gambar 4.7 merupakan tampilan format mobile dan format desktop dari prototype dua.
67
Gambar 4.7 Tampilan Beranda dalam Format Desktop
68
4.1.3 Detail Benda Cagar Budaya Dengan Scan QR Code Agar dapat mengakses detail informasi benda, pengguna terlebih dahulu memindai QR Code menggunakan Scanlife Barcode Scanner yang telah terpasang pada telepon seluler. Aplikasi tersebut kemudian melakukan decoding terhadap QR Code yang ditangkap dan hasilnya adalah sebuah link URL seperti ditunjukkan pada Kode Program 4.1. Kode Program 4.1 Contoh Link URL Untuk Benda Dengan ID Bernilai 39 http://www.cagarbudayasalatiga.com/?bid=39
Link Kode Program 4.1 dibuka melalui mobile web browser hal ini berarti pengguna telah melakukan request ke server dengan mengirimkan data ID Benda dengan nama variabel ‘bid’ dengan nilai 39.
Gambar 4.8 Tampilan Detail Benda
Hal ini berarti pengguna meminta untuk menjalankan fungsi detail benda dengan data variabel ‘bid’. Kode program untuk fungsi tersebut dapat ditunjukkan oleh Kode Program 4.2. Pada kode tersebut variabel ‘bid’ dijadikan parameter untuk melakukan
69
pencarian data benda berdasarkan id_benda dengan mysql_query function dengan query “SELECT * FROM cg_benda WHERE id_benda=”. Kode Program 4.2 Fungsi Detail Benda function getDetailBendaMobile($bid){ if($bid==''): return 'Data tidak ditemukan'; else: $query=mysql_query(" SELECT * FROM cg_benda WHERE id_benda='".$bid."' "); if(mysql_num_rows($query)==0): return 'Data tidak ditemukan'; else: while($data=mysql_fetch_object($query)): return(' // beberapa baris untuk tampilan tidak dicantumkan
Deskripsi
'.$data->deskripsi.'
Deskripsi
'.$data->deskripsi.'
// beberapa baris untuk tampilan tidak dicantumkan '); endwhile; endif; endif; }
Tampilan hasil dari fungsi detail benda tersebut dapat ditunjukkan oleh Gambar 4.8. 4.1.4 Fungsi Deteksi Perangkat Karena website cagar budaya dapat diakses melalui dua format berdasarkan perangkat akses (access device) maka diperlukan sebuah fungsi untuk mendeteksi jenis perangkat yaitu fungsi deteksi perangkat seperti ditunjukkan oleh Kode Program 4.3.
70
Kode Program 4.3 Fungsi Deteksi Perangkat function check_agent(){ $useragent = strtolower($_SERVER['HTTP_USER_AGENT']); if(preg_match('/j2me|midp|opera mini|iphone|android|blackberry|blazer|palm|handspring|no kia|kyocera|samsung|motorola|smartphone|windows ce|blackberry|wap|sonyericsson|playstation portable|lg|mmp|opwv|symbian|epoc/i', $useragent)) { return 'mobile'; } else { return 'desktop'; } }
Di dalam program, fungsi deteksi perangkat diberi nama check_agent(). Untuk mengetahui jenis perangkat yang dipakai oleh pengguna digunakan fungsi preg_match yaitu reserved function dari PHP untuk mengecek keberadaan nilai yang telah ditentukan terhadap suatu variabel tertentu dalam hal ini yaitu variabel $_SERVER[‘HTTP_USER_AGENT’]. Variabel tersebut dikirimkan oleh web browser ketika melakukan request ke server. Pada fungsi tersebut jika variabel mengandung string ‘j2me’ atau ‘midp’ dan seterusnya maka akan dikembalikan nilai string ‘mobile’ yang berarti bahwa pengguna mengakses melalui telepon seluler dan jika sebaliknya maka fungsi akan mengembalikan nilai string ‘desktop’. 4.1.5 Fungsi Cek Session Publik Fungsi Cek Session digunakan saat pengguna diwajibkan untuk login terlebih dahulu untuk menjalankan fungsi tertentu, dalam penelitian ini yaitu untuk memberikan komentar dan rating. Fungsi tersebut dapat ditunjukkan oleh Kode Program 4.4. Pada kode program tersebut fungsi cek session diberi nama ‘cekSession’ dimana
fungsi
tersebut
akan
mengecek
nilai
dari
$_SESSION[‘CGMEMBERLOGIN’] yang merupakan variabel session.
71
Kode Program 4.4 Fungsi Cek Session function cekSession(){ if(!isset($_SESSION['CGMEMBERLOGIN'])) : return FALSE; else: return ($_SESSION['CGMEMBERLOGIN']); endif; }
Jika variabel tersebut belum diset maka akan dikembalikan nilai FALSE sedangkan sebaliknya akan mengembalikan nilai yang ada. 4.1.6 Fungsi Detail Benda Tanpa Scan QR Code Kode Program 4.5 Contoh Link URL Akses Detail Benda Dengan ID Bernilai 83 http://www.cagarbudayasalatiga.com/index.php?go=benda&do=d etail&id=83
Selain menggunakan cara memindai QR Code, pengguna dapat pula mengakses secara langsung dengan mengetikkan alamat URL di web browser. Sebagai contoh dapat ditunjukkan oleh Kode Program 4.5. Pada contoh link tersebut dapat dijelaskan bahwa pengguna melakukan request untuk menampilkan detail benda dengan mengirimkan variabel ‘go’ yang bernilai ‘benda’, variabel ‘do’ yang bernilai ‘detail’ dan variabel ‘id’ dengan nilai ‘83’. Hal tersebut dapat diartikan pengguna memanggil file benda dan menjalankan fungsi detail benda dengan parameter id benda bernilai 83 seperti ditunjukkan oleh Kode Program 4.6. Dari Kode Program 4.6 terlihat fungsi deteksi perangkat dijalankan untuk menampilkan detail benda sesuai dengan jenis perangkat aksesnya.
72
Kode Program 4.6 Fungsi Detail Benda Tanpa Scan QR Code if(isset($_GET[‘go’])): if($_GET[‘go’]==’benda’): include(‘benda.php’); $agent=check_agent(); if($_GET[‘do’]==’detail’): if($agent==’mobile’): echo getDetailBendaMobile($_GET[‘id’]); else: echo getDetailBendaDesktop($_GET[‘id’]); endif; endif; endif; endif;
Untuk hasil tampilan dalam format desktop dapat ditunjukkan oleh Gambar 4.9. 4.1.7 Fungsi Generate QR Code Fungsi Generate QR Code seperti yang ditunjukkan oleh Kode Program 4.7 digunakan dalam penampilan detail data benda pada halaman publik dan cetak QR Code di halaman administrator. Fungsi tersebut akan melakukan request ke server Google melalui Google API Chart. Data yang dikirimkan adalah alamat URL dari benda tertentu, misalkan URL pada Kode Program 4.1. Hasil balik dari Google API berupa image file QR Code seperti yang ditunjukkan oleh Gambar 4.10. Kode Program 4.7 Fungsi Generate QR Code function generateQRCode($URL){ return ('
'); }
73
Gambar 4.9 Tampilan Detail Benda Dalam Format Desktop
74
Gambar 4.10 merupakan tampilan QR Code yang dihasilkan oleh fungsi generateQRCode.
Gambar 4.10 QR Code Benda
4.1.8 Fungsi Beri Komentar Fungsi beri komentar dapat ditunjukkan oleh Kode Program 4.9 yang sebelumnya pengguna telah melakukan request dengan mengirimkan variabel melalui link URL seperti yang ditunjukkan oleh Kode Program 4.8. Kode Program 4.8 Contoh Link URL Beri Komentar ID Benda Bernilai 39 http://www.cagarbudayasalatiga.com/index.php?go=benda&do=k omentar&id=39
Dari Kode Program 4.9 terlihat bahwa pengguna mengirimkan tiga variabel yaitu variabel go dengan nilai ‘benda’, variabel do dengan nilai ‘komentar’ dan variabel id dengan nilai ‘39’. Dari kode program
tersebut
dapat
dijelaskan
bahwa
pengguna
ingin
memberikan komentar untuk benda dengan id yang bernilai 39. Fungsi beri komentar dapat dilihat pada Kode Program 4.9. Pada Kode Program tersebut terdapat fungsi cek session, artinya pengguna harus login terlebih dahulu untuk dapat memberikan komentar.
75
Kode Program 4.9 Fungsi Beri Komentar if(isset($_GET[‘go’])): if($_GET[‘go’]==’benda’): include(‘benda.php’); $agent=check_agent(); $ID=$_GET[‘id’]); if($_GET[‘do’]==’komentar’): $session=cekSession(); echo namaBenda(); if($session==FALSE): echo infoLogin(); else: if($agent==’mobile’): echo getFormKomentarMobile($ID) else: echo getFormKomentarDesktop($ID); endif; endif; echo daftarKomentar($ID); endif; endif; endif;
Gambar 4.11 merupakan tampilan form komentar dalam format desktop.
Gambar 4.11 Form Komentar Format Desktop
76
4.1.9 Fungsi Beri Rating Fungsi beri rating dapat ditunjukkan oleh Kode Program 4.11 yang sebelumnya pengguna telah melakukan request dengan mengirimkan variabel melalui link URL seperti yang ditunjukkan oleh Kode Program 4.10. Kode Program 4.10 Contoh Link URL Beri Rating ID Benda Bernilai 39 http://www.cagarbudayasalatiga.com/index.php?go=benda&do=r ating&id=39
Dari Kode Program 4.10 terlihat bahwa pengguna mengirimkan tiga variabel yaitu variabel go dengan nilai ‘benda’, variabel do dengan nilai ‘rating’ dan variabel id dengan nilai ‘39’. Dari kode program tersebut dapat dijelaskan bahwa pengguna ingin memberikan rating untuk benda dengan id yang bernilai 39. Fungsi beri rating dapat dilihat pada Kode Program 4.11. Pada Kode Program tersebut terdapat fungsi cek session, artinya pengguna harus login terlebih dahulu untuk dapat memberikan rating.
Gambar 4.12 Tampilan Fungsi Rating dalam Format Mobile
77
Gambar 4.12 merupakan tampilan fungsi beri rating yang diakses melalui mobile web. Kode Program 4.11 Fungsi Beri Rating if(isset($_GET[‘go’])): if($_GET[‘go’]==’benda’): include(‘benda.php’); $agent=check_agent(); $ID=$_GET[‘id’]); if($_GET[‘do’]==’rating’): $session=cekSession(); echo namaBenda(); if($session==FALSE): echo infoLogin(); else: if($agent==’mobile’): echo getFormRatingMobile($ID) else: echo getFormRatingDesktop($ID); endif; endif; echo nilaiRataRating($ID); endif; endif; endif;
4.1.10 Fungsi Login Member Agar dapat memberikan komentar maupun rating pengguna harus melakukan login sebagai member terlebih dahulu seperti yang ditunjukkan pada Gambar 4.13.
Gambar 4.13 Tampilan Login Member
78
Gambar 4.13 merupakan tampilan form login member pada halaman publik sedangkan fungsi login member dapat ditunjukkan oleh Kode Program 4.12. Kode Program 4.12 Fungsi Login Member function prosesLogin($username,$password){ $salah=0; if(empty($username)): echo ’Username harus diisi’; $salah++; endif; if(empty($password)): echo ’Password harus diisi’; $salah++; endif; if($salah==0): $query=mysql_query(“SELECT id_member FROM cg_member WHERE username=’”.$username.”’ and password=’”.md5($password).”’”); if(mysql_num_rows($query)==0): echo ‘Username atau password salah, silakan masukkan data yang benar’; else: $data=mysql_fetch_object($query); $_SESSION['CGMEMBERLOGIN']=TRUE; $_SESSION['IDMEMBER']=$data->id_member; $_SESSION['NAMAMEMBER']=$data->nama_lengkap; echo '<meta http-equiv="refresh" content="1;URL=index.php" />login berhasil, tunggu...'; endif; endif; }
4.1.11 Fungsi Daftar Member Jika pengguna belum menjadi member website cagar budaya maka pengguna dapat melakukan pendaftaran sebagai member baru. } Untuk fungsi pendaftaran dapat ditunjukkan oleh Kode Program 4.13.
79
Kode Program 4.13 Fungsi Daftar Member if(isset($_GET[‘go’])): if($_GET[‘go’]==’member’): include(‘member.php’); $agent=check_agent(); if($_GET[‘do’]==’rating’): if($agent==’mobile’): echo getFormRegisterMobile(); else: echo getFormRegisterDesktop(); endif; endif; endif; endif;
Gambar 4.14 merupakan tampilan form pendaftaran member baru.
Gambar 4.14 Form Pendaftaran Member Format Desktop
80
4.1.12 Login Administrator Agar dapat mengelola website benda cagar budaya, pengguna administrator harus melakukan login terlebih dahulu. Fungsi proses login administrator dapat ditunjukkan oleh Kode Program 4.14. Kode Program 4.14 Fungsi Login Member function prosesLogin($username,$password){ $salah=0; if(empty($username)): echo ’Username harus diisi’; $salah++; endif; if(empty($password)): echo ’Password harus diisi’; $salah++; endif; if($salah==0): $query=mysql_query(“SELECT id_member FROM cg_member WHERE username=’”.$username.”’ and password=’”.md5($password).”’”); if(mysql_num_rows($query)==0): echo ‘Username atau password salah, silakan masukkan data yang benar’; else: $data=mysql_fetch_object($query); $_SESSION['CGMEMBERLOGIN']=TRUE; $_SESSION['IDMEMBER']=$data->id_member; $_SESSION['NAMAMEMBER']=$data->nama_lengkap; echo '<meta http-equiv="refresh" content="1;URL=index.php" />login berhasil, tunggu...'; endif; endif; }
4.1.13 Fungsi Tambah Data Benda Pengguna administrator dapat menambahkan data benda baru melalui halaman administrator yang sebelumnya diharuskan untuk } login sebagai administrator. Fungsi tambah data benda dapat ditunjukkan oleh Kode Program 4.15. Pada fungsi tambah data ini, nomor inventaris akan secara otomatis dibuatkan oleh sistem berdasarkan nomor inventaris terakhir yang tersimpan di database.
81
Kode Program 4.15 Fungsi Tambah Benda function tambahBenda(){ $session=cekSession(); if($session==FALSE): echo ‘anda belum login’; else: $newNoInventaris=getNewNoI(); echo generateFormAdd($newNoInventaris); endif; }
Untuk fungsi simpan data benda baru ditunjukkan oleh Kode Program 4.16. Kode Program 4.16 Fungsi Simpan Benda function simpanBenda($arrayField){ $session=cekSession(); if($session==FALSE): echo ‘anda belum login’; else: $no_inventaris=$arrayField[‘no_inventaris’]; $nama=$arrayField[‘nama’]; /* dan field-field lainnya */ $salah=0; if(empty($nama)): $salah++; echo ‘nama benda belum diisi’; endif; /* dan validasi field lainnya */ if($salah==0): mysql_query(“INSERT INTO cg_benda (no_inventaris,nama, /*dan seterusnya */) VALUES (‘$no_inventaris’,’$nama’, /*dan seterusnya*/ ”); echo “Benda sudah tersimpan”; endif; endif; }
82
Gambar 4.15 Tampilan Form Tambah Data Benda Baru
4.1.14 Fungsi Cetak QR Code Benda Untuk mendapatkan gambar QR Code dari masing-masing benda, pengguna administrator dapat menggunakan fungsi cetak QR Code Benda yang terdapat di halaman administrator. Fungsi Cetak QR Code dapat ditunjukkan oleh Kode Program 4.17. Kode Program 4.17 Fungsi Cetak QR Code function cetakQRCode($ID){ $session=cekSession(); if($session==FALSE): echo ‘anda belum login’; else: $query=mysql_query(“SELECT id_benda,kode_bantu,nama FROM cg_benda WHERE id_benda=’”.$ID.”’”); if(mysql_num_rows($query)==0): echo ‘Benda tidak ditemukan’; else: $data=mysql_fetch_object($query); $URL=’http://www.cagarbudayasalatiga.com/?bid=’.$I D; echo generateQRCode($URL); echo $data->kode_bantu; echi $data->nama; endif; endif; }
83
Hasil dari fungsi cetak QR Code dapat ditunjukkan oleh Gambar 4.16.
Gambar 4.16 Hasil Fungsi Cetak QR Code Benda
4.2 Hasil Pengujian Pengujian program telah dilakukan dengan 8 responden yang terdiri
dari
pegawai
Dishubkombudpar.
Setelah
aplikasi
diujicobakan di hadapan para responden, maka para responden mengisi kuesioner yang terdiri dari 6 pertanyaan. Kuesioner ini bertujuan
untuk
mengetahui
penilaian
responden
terhadap
kemudahan menjalankan aplikasi, kecepatan memperoleh informasi, efektifitas
aplikasi,
dan
kemanfaatan
aplikasi
bagi
Dishubkombudpar dalam proses sosialisasi benda cagar budaya. Berikut adalah pertanyaan kuesioner :
dan jawaban yang terdapat pada
84
Pertanyaan 1
: Bagaimanakah
kemudahan
dalam
mengoperasikan aplikasi ini? Pertanyaan 2
: Bagaimanakah kecepatan dalam memperoleh
informasi pada aplikasi ini? Pertanyaan 3
: Bagaimanakah efektifitas aplikasi ini?
Pertanyaan 4
: Bagaimanakah kemanfaatan aplikasi ini dalam
kinerja pengelolaan data benda cagar budaya? Pertanyaan 5
: Bagaimanakah tampilan aplikasi ini?
Pertanyaan 6
: Bagaimanakah efektifitas QR Code untuk
sosialisasi benda cagar budaya? Tabel 4.1 adalah tabel hasil pengujian yang telah dilakukan terhadap responden. Dari tabel tersebut dapat dilihat bahwa : 1.
Untuk pertanyaan nomor 1 yang berkaitan dengan kemudahan
dalam mengoperasikan aplikasi ini sebanyak 12.5% responden menyatakan cukup, 50% menyatakan baik, dan 37.5% menyatakan sangat baik. Dari jawaban tersebut dapat disimpulkan bahwa mudah untuk mengoperasikan aplikasi ini. 2.
Untuk pertanyaan nomor 2 yang berkaitan dengan kecepatan
memperoleh informasi, sebanyak 25% responden menyatakan cukup, 62.5%
menyatakan baik, dan 12.5% menyatakan sangat
baik. Dari jawaban tersebut dapat disimpulkan bahwa dengan menggunakan aplikasi ini informasi lebih cepat diperoleh. 3.
Untuk pertanyaan nomor 3 yang berkaitan dengan efektifitas
aplikasi, sebanyak 12,5% responden menyatakan cukup, 62.5% menyatakan baik, dan 25% menyatakan sangat baik. Dari jawaban tersebut dapat disimpulkan bahwa aplikasi ini efektif.
85
Tabel 4.1 Tabel Hasil Pengujian Terhadap Responden
Pertanyaan 1 Pertanyaan 2 Pertanyaan 3 Pertanyaan 4 Pertanyaan 5 Pertanyaan 6
Sangat Buruk 0% (0R) 0% (0R) 0% (0R) 0% (0R) 0% (0R) 0%
Buruk
Cukup
Baik
0% (0R) 0% (0R) 0% (0R) 0% (0R) 0% (0R) 0%
12.5% (1R) 25% (2R) 12.5% (1R) 25% (2R) 50% (4R) 12.5% (1R)
50% (4R) 62.5% (5R) 62.5% (5R) 0% (0R) 37.5% (3R) 50% (4R)
nomor
4
berkaitan
Sangat Baik 37.5% (3R) 12.5% (1R) 25% (2R) 75% (6R) 12.5% (1R) 37.5% (3R)
Catatan : R adalah Responden
4.
Untuk
pertanyaan
yang
dengan
kemanfaatan aplikasi dalam kinerja pengelolaan data benda cagar budaya, sebanyak 25% responden menyatakan cukup, dan 75% menyatakan sangat baik. Dari jawaban tersebut dapat disimpulkan bahwa aplikasi ini sangat bermanfaat dalam kinerja pengelolaan data yang ada di Dishubkombudpar. 5.
Untuk pertanyaan nomor 5 yang berkaitan dengan tampilan
aplikasi, sebanyak 50% responden menyatakan cukup, 37.5% menyatakan baik, dan 12.5% menyatakan sangat baik. Dari jawaban tersebut dapat disimpulkan bahwa tampilan aplikasi ini sudah cukup baik. 6.
Untuk pertanyaan nomor 6 yang berkaitan dengan efektifitas
QR Code untuk sosialisasi benda cagar budaya, sebanyak 12.5% responden menyatakan cukup, 50% menyatakan baik, dan 37.5%
86
menyatakan sangat baik. Dari jawaban tersebut dapat disimpulkan bahwa QR Code efektif untuk sosialisasi benda cagar budaya.
