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
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
http://www.cagarbudayasalatiga.com/?bid=39
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
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.
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 <p><b>Deskripsi</b></p>
<p>'.$data->deskripsi.'</p> <p><b>Deskripsi</b></p>
<p>'.$data->deskripsi.'</p> // beberapa baris untuk tampilan tidak dicantumkan ');
endwhile; endif;
endif; }
70
Kode Program 4.3 Fungsi Deteksi Perangkat
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.
function check_agent(){ $useragent = strtolower($_SERVER['HTTP_USER_AGENT']); if(preg_match('/j2me|midp|opera mini|iphone|android|blackberry|blazer|palm|handspring|nokia|kyocera|samsung|motorola|smartphone|windows ce|blackberry|wap|sonyericsson|playstation portable|lg|mmp|opwv|symbian|epoc/i', $useragent)) { return 'mobile'; } else { return 'desktop'; }
}
71
Kode Program 4.4 Fungsi Cek Session
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
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.
function cekSession(){ if(!isset($_SESSION['CGMEMBERLOGIN'])) :
return FALSE; else: return ($_SESSION['CGMEMBERLOGIN']); endif; }
http://www.cagarbudayasalatiga.com/index.php?go=benda&do=detail&id=83
72
Kode Program 4.6 Fungsi Detail Benda Tanpa Scan QR Code
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
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;
function generateQRCode($URL){ return ('<img src="https://chart.googleapis.com/chart?chs=150x150&cht=qr&chl='.$URL.'&choe=UTF-8" />');
}
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
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.
http://www.cagarbudayasalatiga.com/index.php?go=benda&do=komentar&id=39
75
Kode Program 4.9 Fungsi Beri Komentar
Gambar 4.11 merupakan tampilan form komentar dalam format
desktop.
Gambar 4.11 Form Komentar Format Desktop
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;
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
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
http://www.cagarbudayasalatiga.com/index.php?go=benda&do=rating&id=39
77
Gambar 4.12 merupakan tampilan fungsi beri rating yang diakses melalui mobile web. Kode Program 4.11 Fungsi Beri Rating
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
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;
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
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.
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; }
}
79
Kode Program 4.13 Fungsi Daftar Member
Gambar 4.14 merupakan tampilan form pendaftaran member baru.
Gambar 4.14 Form Pendaftaran Member Format Desktop
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;
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
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.
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; }
}
81
Kode Program 4.15 Fungsi Tambah Benda
Untuk fungsi simpan data benda baru ditunjukkan oleh Kode
Program 4.16. Kode Program 4.16 Fungsi Simpan Benda
function tambahBenda(){ $session=cekSession(); if($session==FALSE): echo ‘anda belum login’; else: $newNoInventaris=getNewNoI(); echo generateFormAdd($newNoInventaris); endif;
}
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=’.$ID; 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 dan jawaban yang terdapat pada
kuesioner :
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
Sangat Buruk
Buruk Cukup Baik Sangat Baik
Pertanyaan 1 0% (0R)
0% (0R)
12.5% (1R)
50% (4R)
37.5% (3R)
Pertanyaan 2 0% (0R)
0% (0R)
25% (2R)
62.5% (5R)
12.5% (1R)
Pertanyaan 3 0% (0R)
0% (0R)
12.5% (1R)
62.5% (5R)
25% (2R)
Pertanyaan 4 0% (0R)
0% (0R)
25% (2R)
0% (0R)
75% (6R)
Pertanyaan 5 0% (0R)
0% (0R)
50% (4R)
37.5% (3R)
12.5% (1R)
Pertanyaan 6 0% 0% 12.5% (1R)
50% (4R)
37.5% (3R)
Catatan : R adalah Responden
4. Untuk pertanyaan nomor 4 yang berkaitan 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.