PENGEMBANGAN ANTARMUKA DATA ENTRY KATALOG DI PERPUSTAKAAN IPB
WAHYUDI KURNIAWAN SAPUTRA G06400011
DEPARTEMEN ILMU KOMPUTER FAKULTAS MATEMATIKA DAN ILMU PENGETAHUAN ALAM INSTITUT PERTANIAN BOGOR 2007
PENGEMBANGAN ANTARMUKA DATA ENTRY KATALOG DI PERPUSTAKAAN IPB
Skripsi sebagai salah satu syarat untuk memperoleh gelar Sarjana Komputer pada Fakultas Matematika dan Ilmu Pengetahuan Alam Institut Pertanian Bogor
Oleh: WAHYUDI KURNIAWAN SAPUTRA G06400011
DEPARTEMEN ILMU KOMPUTER FAKULTAS MATEMATIKA DAN ILMU PENGETAHUAN ALAM INSTITUT PERTANIAN BOGOR 2007
ABSTRAK
WAHYUDI KURNIAWAN SAPUTRA. Pengembangan Antarmuka Data entry Katalog di Perpustakaan IPB. Dibimbing oleh KUDANG BORO SEMINAR dan HARI AGUNG ADRIANTO. Kekayaan intelektual yang dihasilkan oleh civitas akademik IPB terejawantahkan dalam karyakarya nyata di masyarakat ataupun tertuang dalam tulisan-tulisan berupa disertasi, tesis, dan artikel. Karya intelektual yang berupa disertasi, tesis, dan artikel akan disimpan sebagai koleksi pustaka di perpustakaan IPB. Karya-karya intelektual berformat digital disimpan ke dalam penyimpanan digital / repositori dan diakses melalui infrastruktur internet. Metadata dari karyaintelektual (disertasi, tesis, dan artikel) dimasukkan ke dalam basis data dengan mengikuti format INDOMARC. Metadata dimasukkan ke dalam basis data melalui sebuah antarmuka. Antarmuka yang dirancang agar mudah dipelajari dan mudah digunakan oleh pegawai perpustakaan dalam memasukkan metadata. Dalam membuat antarmuka pemasukan metadata (data entry), penulis mengikuti langkahlangkah perancangan antarmuka yang dijabarkan dalam Galitz (2002) antara lain: menganalisis profil pengguna, menganalisis tugas pengguna dan menentukan fungsi utama sistem, memahami prinsip perancangan antarmuka seperti penggunaan font, penerapan grouping, penggunaan tabel, membangun menu sistem dan alur navigasi, menentukan ukuran halaman web, memilih kontrol perangkat keras, memilih kontrol pada layar seperti command button, text box, static text field, menuliskan pesan dan teks yang jelas, menyediakan umpanbalik, menentukan ikon, menentukan warna, mengatur tata letak, pengujian. Aplikasi data entry katalog masih kalah dibandingkan dengan WINISIS dalam hal kemudahan penggunaan (user friendliness). Pengguna mengalami kesulitan ketika harus menambah text box baru. Selain itu scrolling yang terlalu panjang membuat pengguna memerlukan waktu yang lama untuk mencari dan memastikan text box yang benar untuk memasukkan metadata. Pengguna juga kesulitan ketika harus berpindah dari satu text box ke text box yang lain. Penggunaan perintah dari keyboard yang berbeda pada WINISIS dan aplikasi data entry katalog untuk berpindah dari satu text box ke text box lainnya menjadi penyebabnya. Kelebihan aplikasi data entry katalog terletak pada kemudahan keterbacaan teks. Hal tersebut dikarenakan pemilihan warna yang digunakan pada layar sudah tepat. Pemilihan warna juga menjadi daya tarik pengguna ketika menggunakan aplikasi data entry katalog. Selain itu keterbacaan teks pada layar juga dikarenakan pemilihan ukuran yang tetap untuk lebar layar yaitu 760 piksel. Kata Kunci: data entry, katalog, perancangan antarmuka.
Judul Skripsi
:
Nama NIM
: :
PENGEMBANGAN ANTARMUKA DATA ENTRY KATALOG DI PERPUSTAKAAN IPB Wahyudi Kurniawan Saputra G06400011
Menyetujui, Pembimbing I
Pembimbing II
Prof. Dr. Ir. Kudang B. Seminar, M.Sc.
Hari Agung A., S.Kom., M.Si.
NIP 131475575
NIP 132311918
Mengetahui, Dekan Fakultas Matematika Dan Ilmu Pengetahuan Alam Institut Pertanian Bogor
Prof. Dr. Ir. Yonny Koesmaryono, M.S. NIP 131473999
Tanggal Lulus:
RIWAYAT HIDUP Penulis dilahirkan di Magetan pada tanggal 23 Januari 1982 dari ayah Yohanes Sujud dan ibu Elizabeth Suparti. Penulis merupakan anak pertama dari tiga bersaudara. Tahun 2000 penulis lulus dari SMU Negeri 1 Magetan dan pada tahun yang sama lulus seleksi masuk IPB melalui jalur Undangan Seleksi Masuk IPB (USMI). Penulis diterima di Program Studi Ilmu Komputer, Departemen Ilmu Komputer, Fakultas Matematika dan Ilmu Pengetahuan Alam. Selama kuliah, penulis aktif mengikuti berbagai kegiatan di Persekutuan Mahasiswa Kristen (PMK) IPB. Pada tahun 2001 dan 2003, penulis menjadi asisten dosen untuk praktikum mata kuliah Agama Kristen. Pada Januari-Maret 2004 penulis menjalankan Praktik Lapangan (PL) di bagian sistem informasi Pusat Data dan Informasi Departemen Pertanian Republik Indonesia (PUSDATIN DEPTAN RI) selama 2 bulan dengan tugas mengerjakan prototipe sistem informasi dokumen usulan pengajuan angka kredit (DUPAK). Pada Bulan Maret 2005 sampai dengan September 2006 penulis bekerja di The British Institute Bogor sebagai student advisor yang bertugas mengelola administrasi siswa-siswi kursus bahasa inggris dengan pengajar native speaker.
KATA PENGANTAR
Puji syukur penulis panjatkan ke hadirat Tuhan Yang Maha Esa karena hanya dengan izin dan kehendak-Nya penulis dapat menyelesaikan skripsi yang berjudul Pengembangan Antarmuka Data entry katalog Perpustakaan Pusat IPB. Penulis menyadari bahwa selesainya tugas akhir ini tidak terlepas dari pihak-pihak yang telah banyak membantu. Oleh karena itu penulis ingin mengucapkan terima kasih kepada : 1.
Bapak Prof. Dr. Ir. Kudang Boro Seminar, M.Sc., Bapak Hari Agung Adrianto S.Kom., M.Si. sebagai dosen pembimbing yang telah memberikan bimbingan, motivasi dan saran dalam pengerjaan tugas akhir ini.
2.
Bapak, Ibu dan adik-adikku tercinta di Magetan yang terus mendukung dalam doa.
3.
Mas Jiwo yang telah membantu dukungan backend-nya, Tari untuk kasih sayang yang tulus, Tebe sahabat pendengar yang baik.
4.
Seluruh staf perpustakaan pusat IPB khususnya staf pengolahan item bahan pustaka dan Drs. B. Mustafa, M.Lib atas segala masukannya serta Pak Wahyu yang telah memercayakan kunci.
5.
Sobat-sobat eks asrama Ekalokasari (sadat, yusuf, nandar, adi, edwin, edo, toib, kang dimas), al-khairi, iwan39,zaki39, risa40, bagus38, sobat-sobat jauh (sigit, samuel, dame, cuyong, dhyana, ing-ing), sobat-sobat komsel (yoni ‘ase’, anthony, ani, echa, andi, billy, pri, febi, imel), sobat-sobat juang (yanti, dini, yuyun, adit, restu, darmawan, asep dan keluarga besar ilkomerz37), sobat-sobat diaspora (santi, royan, okta, dan keluarga besar diaspora-pmk-ipb), sobat-sobat staf dan eks-staff TBI Bogor (mbak popi, mbak dian, fera tan, tesya), sobat-sobat IMPATA (amalia, koekoen, syah, widi).
6.
Seluruh dosen dan staf Departemen Ilmu Komputer FMIPA IPB yang telah banyak membantu penulis pada masa perkuliahan dan penelitian.
Semoga tugas akhir ini dapat bermanfaat dan semoga Tuhan Yang Maha Esa membalas budi baik semua pihak yang telah membantu penulis. Amin.
Bogor, Oktober 2007
Wahyudi Kurniawan Saputra
DAFTAR ISI Halaman DAFTAR GAMBAR .....................................................................................................................viii DAFTAR LAMPIRAN ..................................................................................................................viii PENDAHULUAN Tujuan ........................................................................................................................................ 1 Ruang Lingkup........................................................................................................................... 1 Manfaat ...................................................................................................................................... 1 TINJAUAN PUSTAKA System Perception ...................................................................................................................... 2 Perancangan Antarmuka ............................................................................................................ 2 Halaman Web Statis dan Dinamis.............................................................................................. 2 Font dan Typeface...................................................................................................................... 2 Model Spiral............................................................................................................................... 2 Analisis Pengguna, Tugas, dan Lingkungan .............................................................................. 2 Antarmuka yang Baik ................................................................................................................ 3 METODE PENELITIAN Perancangan Antarmuka Pengguna............................................................................................ 3 Implementasi.............................................................................................................................. 3 Validasi Antarmuka ................................................................................................................... 3 HASIL DAN PEMBAHASAN Analisis Tugas Pengguna ........................................................................................................... 4 Analisis Isi Tampilan (content object) ....................................................................................... 4 Fungsi Utama ............................................................................................................................. 4 Rancangan Tampilan.................................................................................................................. 5 Font............................................................................................................................................ 6 Grouping .................................................................................................................................... 6 Tabel .......................................................................................................................................... 6 Iconic Menu ............................................................................................................................... 6 Alur Navigasi ............................................................................................................................. 6 Ukuran Halaman Web................................................................................................................ 7 Command Button ....................................................................................................................... 7 Text Box ..................................................................................................................................... 7 Static Text Field ........................................................................................................................ 7 Warna......................................................................................................................................... 7 Ikon ............................................................................................................................................ 7 Tata Letak Halaman ................................................................................................................... 8 Implementasi.............................................................................................................................. 8 Validasi Antarmuka oleh Pengembang ...................................................................................... 8 Validasi Antarmuka oleh Pengguna........................................................................................... 8 KESIMPULAN DAN SARAN Kesimpulan ................................................................................................................................ 9 Saran .......................................................................................................................................... 9 DAFTAR PUSTAKA ....................................................................................................................... 9
vii
DAFTAR GAMBAR Halaman 1 2 3 4 5 6 7 8
Model spiral yang digunakan dalam perancangan antarmuka (Pressman 2005)........................3 Rancangan format formulir masukan untuk sebuah atribut dan sub-atributnya.........................5 Rancangan format tampilan isi sebuah atribut dan sub-atributnya.............................................5 Grouping dan penggunaan font arial untuk menuliskan deskripsi atribut (Deskripsi Fisik 300) pada halaman add dan edit.........................................................................................................6 Penggunaan tabel pada halaman browse. ...................................................................................6 Command button yang diberi label teks dan simbol yang mengindikasikan aksi yang akan dilakukan oleh command button. ...............................................................................................7 Ikon berukuran 32 x 32 piksel pada menu utama yang digunakan untuk menuju ke halaman home...........................................................................................................................................7 Rancangan umum tata letak halaman-halaman web. .................................................................8
DAFTAR LAMPIRAN Halaman 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
Daftar kode atribut, deskripsi atribut dan kode sub-atribut katalog tesis dan disertasi ...........11 Alur navigasi ............................................................................................................................12 Rancangan tampilan layar pemilihan katalog ..........................................................................13 Rancangan tampilan layar ketika objek dengan id add di klik.................................................14 Rancangan tampilan layar ketika objek dengan id browse di klik ...........................................15 Rancangan tampilan layar ketika objek dengan id search di klik ............................................16 Rancangan tampilan layar hasil pencarian ...............................................................................17 Rancangan tampilan layar edit metadata..................................................................................18 Implementasi dari rancangan tampilan layar pemilihan katalog ..............................................19 Implementasi dari rancangan tampilan layar ketika objek dengan id add di klik ....................19 Implementasi dari rancangan tampilan layar ketika objek dengan id browse di klik...............20 Implementasi dari rancangan tampilan layar ketika objek dengan id search di klik................20 Implementasi dari rancangan tampilan layar hasil pencarian...................................................21 Implementasi dari rancangan tampilan layar edit metadata .....................................................21 Hasil pengujian black box tampilan layar pemilihan katalog...................................................22 Hasil pengujian black box tampilan layar ketika objek dengan id add diklik ..........................23 Hasil pengujian black box tampilan layar ketika objek dengan id browse diklik.....................24 Hasil pengujian black box tampilan layar ketika objek dengan id search di klik ....................24 Hasil pengujian black box tampilan layar hasil pencarian .......................................................25 Hasil pengujian black box tampilan layar edit metadata ..........................................................26
viii
PENDAHULUAN Latar Belakang Institut Pertanian Bogor (IPB) dalam upayanya menjadi salah satu institusi pendidikan tinggi berbasis riset yang bertaraf internasional terus berbenah diri. Salah satu pembenahan yang dilakukan adalah pembenahan manajemen kekayaan intelektual. Kekayaan intelektual yang dimiliki oleh IPB merupakan salah satu sumber daya untuk mendorong IPB ke arah institusi tinggi berbasis riset. Manajemen kekayaan intelektual mutlak diperlukan agar karyakarya dari hasil berpikir intelek dapat digunakan untuk menghasilkan karya lain yang bermanfaat bagi kesejahteraan umat manusia. Kekayaan intelektual yang dihasilkan oleh civitas akademik IPB terejawantahkan dalam karya-karya nyata di masyarakat ataupun tertuang dalam tulisan-tulisan berupa disertasi, tesis, dan artikel. Karya intelektual yang berupa disertasi, tesis, dan artikel akan disimpan sebagai koleksi pustaka di perpustakaan IPB. Karya-karya intelektual disimpan dalam lembaran-lembaran kertas tercetak yang terjilid dengan mengikuti format yang telah ditentukan. Penyimpanan dalam bentuk lembaran-lembaran kertas yang terjilid membutuhkan tempat penyimpanan yang luas, selain itu lembaran-lembaran kertas rentan terhadap kerusakan seperti tinta luntur, sobek dan gangguan serangga. Oleh karena itu perpustakaan IPB mulai menyimpan karyakarya intelektual ke dalam format digital. Agar karya-karya intelektual dapat diakses tanpa menyebabkan seseorang harus datang ke gedung perpustakaan, maka karya intelektual dalam format digital disimpan ke dalam penyimpanan digital / repositori dan diakses melalui infrastruktur internet. Metadata dari karya intelektual (disertasi, tesis, dan artikel) dimasukkan ke dalam basis data dengan mengikuti format INDOMARC. Tujuan Tujuan penelitian adalah mengembangkan antarmuka data entry katalog perpustakaan pusat IPB agar lebih user friendly dengan mengikuti langkah-langkah perancangan antarmuka seperti yang dijabarkan oleh Galitz (2002). Ruang Lingkup Lingkup penelitian ini adalah pengembangan antarmuka data entry katalog
yang meliputi: 1 Antarmuka pemilihan katalog, 2 Antarmuka pemasukan dan pengubahan item bahan pustaka, 3 Antarmuka penelusuran / browsing, 4 Antarmuka pencarian dan hasil pencarian. Manfaat Hasil pengembangan berupa terbentuknya antarmuka data entry katalog perpustakaan IPB yang lebih user friendly. Dengan antarmuka tersebut maka pegawai bagian pengolahan item bahan pustaka di perpustakaan IPB akan lebih nyaman dalam melakukan pemasukan, pengubahan, penelusuran, dan pencarian item bahan pustaka. Selain itu kesalahan dalam pemasukan data dan kebutuhan untuk melakukan training terhadap penggunaan antarmuka dapat diminimalisir.
TINJAUAN PUSTAKA Repositori Institusi Sebuah repositori institusi adalah sebuah wadah online untuk mengumpulkan, menyimpan dan menyebarkan hasil intelektual dari sebuah institusi dalam bentuk digital. Hasil intelektual dari sebuah institusi seperti universitas, dapat berupa artikel jurnal penelitian (artikel yang belum ditinjau maupun artikel yang sudah ditinjau), versi digital dari tesis dan disertasi, dan bisa juga aset digital yang tercipta lewat kehidupan akademik sehari-hari seperti dokumen administrasi dan catatan kuliah (WIKI 2007). Dua tujuan utama pembuatan sebuah repositori institusi adalah: 1 Menyediakan akses terbuka ke hasil-hasil penelitian institusi dengan memberkas hasil-hasil penelitian tersebut ke dalam bentuk digital, 2 Menyimpan dan merawat aset-aset digital lain dari sebuah institusi termasuk yang tidak dipublikasikan atau literatur-literatur yang cepat hilang/rusak seperti tesis atau laporan teknis agar tetap awet. Repositori institusi biasanya menjadi bagian dari sebuah perpustakaan digital. Sebuah perpustakaan digital mempunyai fungsi seperti mengumpulkan, menyimpan ke tempat penyimpan, mengelompokkan, mengkatalogkan, memelihara agar tetap awet, dan menyediakan akses ke koleksi buku-buku digital, seolah-olah kita melakukannya seperti dalam perpustakaan konvensional (WIKI 2007).
1
System Perception Model mental pengguna / system perception adalah gambaran sistem yang ada di benak pengguna (Pressman 2005). Gambaran sistem yang ada di benak pengembang dengan yang ada di benak pengguna tidak sama. Oleh karena itu pengembang harus mengetahui profil pengguna dengan baik. Profil pengguna bisa meliputi tingkat pengalaman berhubungan dengan sistem dan aplikasi, tingkat pengalaman dengan suatu tugas, jenis penggunaan sistem, dan pelatihan yang diikuti (Galitz 2002). Perancangan Antarmuka Perancangan antarmuka adalah kegiatan membuat sebuah media komunikasi yang efektif antara manusia dengan komputer (Pressman 2005). Kegiatan perancangan antarmuka dimulai dengan mengindentifikasi pengguna, tugas dan lingkungan pengguna. Hasil identifikasi tugas pengguna digunakan untuk membuat skenario pengguna. Kemudian skenario pengguna dianalisis. Hasil analisis dari skenario pengguna digunakan untuk mendefinisikan objek dan aksi di antarmuka. Objek dan aksi yang telah didefinisikan menjadi dasar dalam pembuatan tata letak antarmuka yang menggambarkan rancangan grafis dan penempatan ikon-ikon, definisi dari teks penjelas di layar, spesifikasi dan pemberian judul window, dan spesifikasi dari item – item menu. Halaman Web Statis dan Dinamis Halaman web statis akan membatasi ukuran lebar halaman web sesuai dengan yang dispesifikasikan oleh perancang. Berbeda dengan halaman web statis, lebar halaman web dinamis akan menyesuaikan dengan resolusi monitor, dimana halaman web ditampilkan. (Andrew 2004) Font dan Typeface Font adalah kumpulan lengkap dari karakter/huruf dalam satu bentuk desain, ukuran dan gaya (Purnama 2004). Contoh font yang lazim dikenal antara lain Times New Roman, Times, Arial, Helvetica, Kauffman, Webdings. Typeface/type adalah desain dari karakter berbentuk alphabet dan nomor yang memiliki kesatuan berdasarkan properti visual yang konsisten. Berdasarkan bentuknya, typeface dibagi menjadi 4 jenis yaitu serif, sans-serif, script dan dekoratif (Purnama 2004). Serif adalah jenis huruf yang memiliki kait
atau tangkai pada ujung-ujungnya, contoh font ber-typeface serif adalah Times New Roman dan Times. Serif memiliki tangkai atau kait yang berfungsi untuk membentuk garis tak tampak dan memandu pembaca untuk mengikuti baris teks. Oleh karena fungsi tersebut, pembaca akan memiliki ketahanan membaca lebih lama ketika membaca hurufhuruf kecil dengan tipe serif. Sans-serif adalah jenis huruf yang tidak memiliki kait, contoh font ber-typeface sans-serif adalah Arial, Helvetica. Tipe sans-serif lebih sering digunakan untuk menulis judul dari sebuah teks atau artikel. Script adalah jenis huruf yang bentuknya lebih mirip dengan tulisan tangan, biasanya seperti huruf bersambung, contoh font bertypeface scipt adalah Kauffman. Tipe script memiliki kesan anggun dan indah. Tipe script sering digunakan untuk melukiskan hal-hal yang berkaitan dengan perasaan cinta dan keindahan. Typeface dekoratif adalah jenis huruf yang lebih bebas dan yang tidak termasuk ke dalam 3 kategori sebelumnya, contoh font ber-typeface dekoratif adalah Webdings. Model Spiral Proses perancangan antarmuka bersifat iteratif. Terdapat empat aktivitas utama perancangan antarmuka dalam model spiral yaitu (lihat Gambar 1): 1 Analisis pengguna, tugas, dan lingkungan 2 Perancangan antarmuka 3 Implementasi 4 Validasi antarmuka Empat aktivitas tersebut akan dilaksanakan dalam tiap iterasi perancangan antarmuka. Analisis Pengguna, Tugas, dan Lingkungan Hal pertama yang harus dilakukan sebelum merancang antarmuka adalah dengan memahami profil pengguna antarmuka, kemudian tugas-tugas yang akan dilakukan pengguna untuk menyelesaikan pekerjaannya melalui antarmuka yang dibuat, lingkungan kerja pengguna. Beberapa metode untuk mengetahui profil pengguna, tugas dan lingkungan kerja pengguna antara lain (Galitz 2002) : 1 Mengunjungi tempat kerja pengguna dan berbincang-bincang dengan pengguna untuk mendapatkan pemahaman tentang tingkat pengalaman pengguna berhubungan dengan sistem dan aplikasi, tingkat pengalaman pengguna dengan suatu tugas, jenis penggunaan sistem, dan pelatihan yang diikuti
2
2 Mengumpulkan informasi melalui unitunit yang tiap hari membantu kesulitan pengguna (customer support, technical support dan help desk). 3 Mengumpulkan informasi melalui papan buletin eletronik (electronic bulletin board), milis (mailing list), dan dari surat elektronik (electronic mail) yang dikirim oleh pengguna. Antarmuka yang Baik Tata letak antarmuka mempengaruhi orang dalam berbagai cara. Jika orang menjadi bingung dan tidak efisien, orang akan mengalami lebih banyak kesulitan dalam mengerjakan pekerjaan dan akan membuat banyak kesalahan. Antarmuka yang kurang baik akan meningkatkan kadar stres bagi pengguna. Antarmuka yang baik adalah antarmuka yang membuat pengguna berkonsentrasi pada informasi dan tugas yang akan dilaksanakan, dan bukan berkonsentrasi pada mekanisme yang digunakan untuk menampilkan informasi dan melaksanakan tugas (Galitz 2002).
METODE PENELITIAN Proses pengembangan antarmuka data entry katalog pada penelitian ini mengacu pada model spiral (lihat Gambar 1).
Validasi antarmuka
Implementasi
Analisis pengguna, tugas dan lingkungan
Perancangan antarmuka pengguna
Gambar 1 Model spiral yang digunakan dalam perancangan antarmuka (Pressman 2005). Analisis Pengguna, Tugas Pengguna dan Lingkungan Kerja Pengguna Pada proses pengembangan antarmuka data entry katalog, profil calon pengguna dan tugas-tugas yang akan dilakukan pengguna
didapatkan dengan berkunjung ke lingkungan kerja pengguna dan melakukan wawancara dengan calon pengguna. Perancangan Antarmuka Pengguna Tahap perancangan antarmuka mengikuti prinsip-prinsip perancangan yang dijabarkan dalam Galitz (2002) yang termuat dalam 14 langkah perancangan antarmuka, yaitu: 1 menganalisis profil pengguna 2 menganalisis tugas pengguna dan menenutkan fungsi utama sistem. 3 memahami prinsip perancangan antarmuka seperti penggunaan font, penerapan grouping, penggunaan tabel. 4 Membangun menu sistem dan alur navigasi. 5 Menentukan ukuran halaman web. 6 Memilih kontrol perangkat keras 7 Memilih kontrol pada layar seperti command button, text box, static text field. 8 Menuliskan pesan dan teks yang jelas 9 Menyediakan umpanbalik 10 Menyediakan fitur internasionalisasi dan aksesabilitas. 11 Menentukan ikon 12 Menentukan warna 13 Mengatur tata letak 14 Pengujian Implementasi Poin nomor 1 dan poin 2 pada 14 langkah perancangan antarmuka yang dijabarkan Galitz (2002) dilakukan pada tahap analisis pengguna, tugas pengguna dan lingkungan kerja pengguna pada model spiral seperti yang dijabarkan oleh Pressman (2005). Khusus untuk poin nomor 10, tidak diimplementasikan pada aplikasi data entry katalog dikarenakan calon pengguna tidak memerlukan fitur seperti yang dijabarkan pada poin nomor 10 dari 14 langkah perancangan antarmuka. Aplikasi dikembangkan pada platform windows XP dengan menggunakan Apache 2.2.4 sebagai web server dan Postgresql 8.2.3 sebagai database server serta PHP 5.2.1 sebagai bahasa pemrograman web. Di sisi lain, CSS, Java Script dan Smarty template engine digunakan untuk merancang tampilan antarmuka. Validasi Antarmuka Validasi terhadap prototipe antarmuka dilakukan oleh pengembang dan pengguna. Validasi yang dilakukan oleh pengembang adalah validasi yang ditujukan untuk melakukan pengujian fungsi-fungsi sistem dan lebih bersifat teknis. Pengujian yang
3
dilakukan menggunakan metode black-box. Validasi prototipe antarmuka oleh pengguna dilakukan dengan mengujikan prototipe ke dua orang pegawai perpustakaan bagian pengolahan item bahan pustaka. Satu orang pegawai yang sering menggunakan WINISIS dan satu orang pegawai yang pernah menggunakan WINISIS. WINISIS adalah sistem yang biasanya dipakai sehari-hari untuk pemasukan metadata. Kedua pegawai diminta untuk menginputkan metadata dari satu item pustaka ke dalam WINISIS, setelah selesai kemudian kedua pegawai diminta untuk menginputkan metadata dari satu item pustaka ke dalam data entry katalog. Selama berlangsungnya kedua tugas tersebut, system perception dari pengguna diamati dan dianalisis.
HASIL DAN PEMBAHASAN Analisis Pengguna Antarmuka data entry katalog dirancang untuk digunakan oleh pegawai internal perpustakaan pusat IPB bagian pengolahan dan pembinaan item bahan pustaka. Pegawai di bagian pengolahan dan pembinaan item bahan pustaka sudah terbiasa bekerja dengan sistem sebelumnya yaitu WINISIS. Analisis Tugas Pengguna Pegawai bagian pengolahan dan pembinaan item bahan pustaka memerlukan antarmuka untuk memasukkan metadata baru[A.1] ke dalam repositori katalog dan melakukan pemeriksaan terhadap metadata yang telah dimasukkan[A.2]. Setelah dianalisis tugas untuk memasukkan metadata[A.1] menghasilkan dua buah subtugas meliputi memilih katalog yang akan diinput metadata baru[A.1.1], serta memasukkan metadata baru berdasarkan atribut dan sub-atribut[A.1.2]. Hasil analisis tugas untuk melakukan pemeriksaan terhadap metadata yang telah dimasukkan[A.2] menghasilkan dua buah subtugas yaitu memilih katalog yang akan diinput metadata baru[A.2.1], memeriksa item metadata satu per satu[A.2.2] dan memeriksa item metadata berdasarkan kata kunci[A.2.3]. Analisis Isi Tampilan (content object) Berdasarkan tugas-tugas pengguna dan hasil diskusi dengan calon pengguna, maka dilakukan analisis isi tampilan. Tugas pengguna memasukkan metadata[A.1], memerlukan antarmuka dengan isi tampilan antarmuka berupa formulir masukan (form
input) yang menampilkan atribut-atribut yang tersedia untuk katalog terpilih. Calon pengguna meminta supaya ketika pengguna memasukkan data, pengguna tidak perlu memasukkan lagi penanda ‘^kode_subatribut’ (tudung). Sebelumnya, penanda ‘^kode_subatribut’ perlu dimasukkan untuk suatu atribut yang mempunyai sub-atribut. Daftar atribut dan sub-atribut untuk tiap katalog dapat dilihat pada Lampiran 1. Tugas pengguna pemeriksaan metadata yang telah dimasukkan[A.2] memerlukan antarmuka dengan isi tampilan antarmuka berupa tampilan atribut-atribut metadata yang telah diinput ke dalam basis data. Atribut kosong tidak ditampilkan, dan hanya atribut yang mempunyai nilai yang ditampilkan. Format isi tampilan adalah nama atribut diikuti dengan isi atribut. Atribut yang mempunyai sub-atribut akan ditampilkan sebagai satu kesatuan data dengan menggunakan penanda ‘^kode_subatribut’ (tudung) untuk memisahkan antar sub-atribut. Fungsi Utama Hasil analisis tugas pengguna digunakan untuk menentukan fungsi utama. Tabel keterunutan fungsi aplikasi dari hasil analisis tugas pengguna dapat dilihat pada Tabel 1. Tabel 1 Keterunutan fungsi utama aplikasi TUGAS SUB TUGAS FUNGSI PENGGUNA UTAMA Memasu memilih katalog Home kkan [A.1.1] metadata memasukkan Add [A.1] metadata baru berdasarkan atribut dan subatribut [A.1.2] Pemeriks memilih katalog Home aan [A.2.1] metadata memeriksa item Browse yang metadata satu per telah satu[A.2.2] dimasuk kan memeriksa item Search [A.2] metadata berdasarkan kata kunci[A.2.3] Tugas pengguna memasukkan metadata[A.1] dan pemeriksaan metadata yang telah dimasukkan[A.2] mempunyai subtugas yang sama yaitu memilih katalog[A.1.1][A.2.1], maka halaman pemilihan katalog akan menjadi halaman awal aplikasi. Subtugas memilih katalog[A.1.1][A.2.1] akan menjadi salah satu
4
fungsi utama aplikasi pada tiap rancangan tampilan layar dengan id home. Rancangan tampilan layar pemilihan katalog ditunjukkan seperti pada Lampiran 3. Subtugas memasukkan metadata baru berdasarkan atribut dan sub-atribut[A.1.2] akan menjadi salah satu fungsi utama aplikasi pada tiap rancangan tampilan layar dengan id add. Subtugas memeriksa item metadata satu per satu[A.2.2] akan menjadi salah satu fungsi utama aplikasi pada tiap rancangan tampilan layar dengan id browse. Subtugas memeriksa item metadata berdasarkan kata kunci[A.2.3] akan menjadi salah satu fungsi utama aplikasi pada tiap rancangan tampilan layar dengan id search. Rancangan Tampilan Berdasarkan hasil analisis isi tampilan (display content), tampilan layar ketika objek dengan id add dikenakan aksi klik /di-klik akan berisi kotak-kotak masukan tiap atribut katalog. Tiap kotak masukan atribut katalog akan dinamai dengan objek berjenis label yang berisi deskripsi atribut disertai kode atribut. Isi dari kotak masukan atribut katalog berupa objek berjenis input box. Jika kotak masukan atribut katalog mempunyai subatribut, maka kotak masukan atribut katalog akan berisi objek berjenis input box untuk sub-atribut dan objek berjenis label yang berisi kode sub-atribut. Rancangan format formulir masukan untuk sebuah atribut dan sub-atributnya dapat dilihat pada Gambar 2. Rancangan tampilan layar ketika objek dengan id add di klik ditunjukkan seperti pada Lampiran 4. Deskripsi atribut
Kode atribut
Rancangan tampilan layar ketika id browse di klik ditunjukkan seperti pada Lampiran 5. Berdasarkan hasil analisis isi tampilan, maka content object yang ditampilkan ketika id browse di-klik berupa objek label deskripsi atribut yang nilainya tidak kosong dan objek label yang berisi nilai dari atribut. Objek label deskripsi atribut berisi deskripsi atribut, kode atribut, kode subatribut. Objek label yang berisi nilai dari atribut akan menampilkan nilai-nilai dari subatribut dengan tanda ‘^kode_subatribut’ sebagai pemisah antar sub-atribut. Atribut yang tidak mempunyai sub-atribut akan ditampilkan tanpa tanda ‘^kode_subatribut’. Rancangan format tampilan isi sebuah atribut dan sub-atributnya dapat dilihat pada Gambar 3. Layar akan berisi tombol-tombol perintah (command button) navigasi agar pengguna dapat memeriksa content object sebelumnya dan sesudahnya serta tombol perintah navigasi untuk menuju ke content object paling awal dan paling akhir. Content object yang ditemukan kesalahan (kesalahan penulisan/kurang lengkap) akan di-edit atau dihapus jika dinginkan, oleh karena itu layar akan berisi tombol perintah edit dan hapus. Deskripsi atribut
Kode atribut
Nomor panggil Setempat(99)[lab]=
^l T
^a 582.284
^b HASr
Nomor Panggil Setempat (99) Nilai sub-atribut
Kode sub-atribut
Gambar 3 Rancangan format tampilan isi sebuah atribut dan sub-atributnya.
^l
T
^a
582.284
^b
HASr
Kode Sub-atribut Nilai sub-atribut
Gambar 2 Rancangan format formulir masukan untuk sebuah atribut dan sub-atributnya.
Rancangan tampilan layar ketika id search di klik ditunjukkan seperti pada Lampiran 6. Layar akan menampilkan satu objek text box dan satu objek tombol perintah pencarian. Jika objek tombol perintah pencarian diklik, layar akan menampilkan hasil pencarian. Content object dari layar hasil pencarian akan menampilkan lima item teratas dari hasil pencarian. Jika hasil pencarian lebih dari lima item, layar akan menampilkan objek tombol
5
perintah yang berfungsi untuk menampilkan lima item hasil pencarian berikutnya. Rancangan tampilan layar hasil pencarian ditunjukkan seperti pada Lampiran 7. Font Dalam merancang antarmuka web, Galitz (2002) menyarankan untuk menggunakan tidak lebih dari 2 typeface dengan salah satu typeface mendominasi. Aplikasi menggunakan 2 jenis typeface yaitu serif (font times new roman) yang digunakan di halaman-halaman web yang mengandung informasi-informasi yang membutuhkan ketelitian dalam membaca seperti halaman browse, halaman hasil pencarian, halaman pemilihan katalog. Halaman add dan edit menggunakan typeface sans-serif (font arial) untuk menuliskan deskripsi tiap atribut. Grouping Halaman add dan edit menampilkan seluruh atribut yang dipunyai katalog terpilih. Katalog disertasi mempunyai 27 atribut dan katalog tesis mempunyai 25 atribut. Tiap atribut akan mempunyai data-field masingmasing. Beberapa atribut mempunyai subatribut, tiap sub-atribut juga akan mempunyai data-field masing-masing. Sebagai akibatnya, halaman add dan edit akan kelihatan penuh sesak. Untuk mengorganisir tampilan agar lebih mudah dibaca, maka tiap atribut dikelompokkan ke dalam fieldset-fieldset. Deskripsi atribut dan kode atribut diletakkan sebagai judul fieldset. Kode sub-atribut dan data-field diletakkan di dalam fieldset. Pengorganisasian tampilan seperti yang dijelaskan diatas mengikuti pengorganisasian tampilan berjenis field group (Galitz 2002). Untuk lebih jelasnya dapat dilihat pada Gambar 4.
Gambar 4 Grouping dan penggunaan font arial untuk menuliskan deskripsi atribut (Deskripsi Fisik 300) pada halaman add dan edit.
Tabel Tabel digunakan untuk menampilkan data/informasi berukuran besar. Beberapa panduan dari Galitz (2002) dalam menggunakan tabel untuk menampilkan data berukuran besar adalah sebagai berikut: 1 Tabel harus mempunyai heading. 2 Data yang berupa teks ditampilkan rata kiri 3 Memberikan warna latar belakang yang terang, agar memudahkan keterbacaan data/informasi 4 Data/informasi ditampilkan dalam susunan kronologis dan terurut 5 Data/informasi yang memiliki kemiripan ditampilkan bersama. Panduan tersebut di atas diterapkan pada halaman browse dan halaman hasil pencarian. Gambar 5 adalah penggunaan tabel pada halaman browse dengan menerapkan panduan seperti disebutkan di atas.
Gambar 5 Penggunaan tabel pada halaman browse. Iconic Menu Aplikasi menggunakan menu grafik berjenis iconic menu. Iconic menu berguna dalam membantu pengguna mengingat fungsi dan perintah aplikasi (Galitz 2002). Iconic menu diletakkan secara vertikal dalam satu kolom. Pencarian menu berupa kolom lebih cepat daripada horizontal menu (Galitz 2002). Menu menggunakan ikon berukuran 32 x 32 pixels yang merepresentasikan fungsi-fungsi yang diwakilinya antara lain menu home, menu add, menu browse dan menu search. Menu diletakkan di sebelah kiri layar, karena pengguna sudah terbiasa dengan tampilan menu di sebelah kiri layar pada sistem operasi (Windows XP) yang digunakan. Alur Navigasi Alur navigasi aplikasi dapat dilihat pada Lampiran 2.
6
Ukuran Halaman Web Berdasarkan pemantauan di tempat kerja pengguna, rata-rata resolusi monitor calon pengguna adalah 1024 x 768 piksel dan 800 x 600 piksel. Secara default, lebar halaman web akan berubah mengikuti resolusi monitor. Halaman web yang terlalu lebar akan menyulitkan pengguna dalam membaca teks yang panjang. Pengguna membutuhkan konsentrasi yang tinggi untuk membaca barisbaris kalimat yang memanjang. Akibatnya mata akan cepat lelah. Sering pula terjadi bahwa pengguna salah membaca ketika tulisan yang dibaca harus beralih ke baris berikutnya. Agar pengguna dengan kedua resolusi yang berbeda tersebut tetap nyaman dalam membaca teks halaman web, maka lebar halaman web harus dibatasi. Oleh karena itu lebar halaman web dibuat statis dengan ukuran sebesar 760 piksel. Command Button Command button adalah kontrol pada layar tampilan berbentuk empat persegi panjang dengan teks yang mengindikasikan aksi yang dilakukan ketika command button ditekan (Galitz 2002). Command button pada halaman web data entry digunakan pada halaman browse, untuk melakukan aksi navigasi item data, aksi edit item metadata, dan aksi hapus item metadata. Aksi navigasi item data terdiri dari 4 buah command button. Seperti yang ditunjukkan pada Gambar 6, tiap command button mempunyai label teks dan simbol yang mengindikasikan aksi yang akan dilakukan oleh command button tersebut.
Gambar 6 Command button yang diberi label teks dan simbol yang mengindikasikan aksi yang akan dilakukan oleh command button. Text Box Kegunaan text box sebagai kontrol pada layar adalah sebagai suatu tempat dimana teks diketikkan ke dalamnya, atau teks yang akan diedit ditampilkan di dalamnya (Galitz 2002). Text box terdiri dari 2 jenis yaitu single line dan multiple line. Kedua jenis text box tersebut digunakan pada halaman data entry yaitu halaman add. Multiple line text box digunakan untuk memasukkan, mengedit teks yang panjang, sedangkan single line text box digunakan untuk memasukkan, mengedit teks yang tidak terlalu panjang.
Static Text Field Static text field adalah kontrol pada layar yang digunakan untuk menampilkan informasi deskriptif dan untuk menampilkan informasi instruksional (Galitz 2002). Static text field pada aplikasi data entry katalog digunakan untuk menampilkan instruksi – instruksi, pesan-pesan kesalahan, dan heading. Warna Hal pertama yang dilakukan adalah menentukan warna mayoritas yang akan digunakan di halaman web. Untuk menentukan warna mayoritas, dapat mengacu ke warna logo yang akan dipasang di halaman web. Warna mayoritas bisa mengambil warna sama dengan warna logo atau padanan warna yang ada pada logo (Purnama, 2004). Halaman web memiliki logo IPB dengan logo berwarna mayoritas biru. Warna mayoritas halaman web yang diambil adalah padanan warna mayoritas logo IPB yaitu warna biru muda dan variasinya. Warna biru muda dan variasinya digunakan sebagai warna latar belakang tabel pada halaman browse, warna latar belakang tabel pada halaman hasil pencarian, warna border menu, warna border fieldset pada halaman add dan edit, warna latar belakang text box pada halaman halaman add dan edit, warna teks footer. Di lain pihak, warna biru digunakan sebagai warna latar belakang header. Ikon Ikon yang baik adalah ikon yang merepresentasikan dengan jelas sesuatu yang diwakilinya, ikon dapat dibedakan jelas dengan yang lain dan masih dapat dikenali fungsinya walaupun ukurannya kurang dari 16 piksel. Standar ukuran ikon adalah 16 x 16 piksel, 32 x 32 piksel, dan 48 x 48 piksel (Galitz, 2002). Halaman web data entry menggunakan ikon berukuran 32 x 32 piksel pada menu utama dan ukuran 48 x 48 piksel pada halaman pemilihan katalog. Gambar 7 menunjukkan ikon berukuran 32 x 32 piksel pada menu utama yang digunakan untuk menuju ke halaman home.
Gambar 7 Ikon berukuran 32 x 32 piksel pada menu utama yang digunakan untuk menuju ke halaman home.
7
Tata Letak Halaman Rancangan umum tata letak tiap layar dari aplikasi, seperti yang diilustrasikan pada Gambar 8, dibagi menjadi empat bagian utama: 1 Header Header diletakkan di halaman bagian paling atas. Header berisi Logo IPB dan nama aplikasi 2 Menu Menu diletakkan di halaman bagian kiri, di bawah header dan diatas footer. 3 Content Content diletakkan di halaman bagian kanan, bersebelahan dengan menu, di bawah header dan di atas footer. 4 Footer Footer diletakkan di halaman bagian paling bawah. Footer berisi keterangan hak cipta aplikasi /copyright. HEADER
MENU
CONTENT
FOOTER
Gambar 8 Rancangan umum tata halaman-halaman web.
letak
Implementasi Teknologi smarty digunakan untuk memisahkan tampilan dengan logika aplikasi. Tampilan data entry dirancang dengan menggunakan smarty, CSS, HTML dan JavaScript. Implementasi dari rancangan tampilan layar pemilihan katalog dapat dilihat pada Lampiran 9. Implementasi dari rancangan tampilan layar ketika objek dengan id add di klik dapat dilihat pada Lampiran 10. Implementasi dari rancangan tampilan layar ketika objek dengan id browse di klik dapat dilihat pada Lampiran 11. Implementasi dari rancangan tampilan layar ketika objek dengan id search diklik dapat dilihat pada Lampiran 12. Implementasi dari rancangan tampilan layar hasil pencarian dapat dilihat pada
Lampiran 13. Implementasi dari rancangan tampilan layar edit metadata dapat dilihat pada Lampiran 14. Validasi Antarmuka oleh Pengembang Pengembang memvalidasi antarmuka dengan melakukan pengujian fungsi sistem menggunakan metode black-box. Hasil pengujian black box tampilan layar pemilihan katalog dapat dilihat pada Lampiran 15. Hasil pengujian black box tampilan layar ketika objek dengan id add diklik dapat dilihat pada Lampiran 16. Hasil pengujian black box tampilan layar ketika objek dengan id browse diklik dapat dilihat pada Lampiran 17. Hasil pengujian black box tampilan layar ketika objek dengan id search di klik dapat dilihat pada Lampiran 18. Hasil pengujian black box tampilan layar hasil pencarian dapat dilihat pada Lampiran 19. Hasil pengujian black box tampilan layar edit metadata dapat dilihat pada Lampiran 20. Validasi Antarmuka oleh Pengguna Validasi antarmuka oleh pengguna dilakukan dengan mengujikannya kepada dua orang pegawai yang mempunyai tingkat penggunaan WINISIS berbeda. Pegawai yang sering menggunakan WINISIS mengalami kesulitan yang sama dengan pegawai yang jarang menggunakan WINISIS. Keduanya kesulitan menemukan elemen layar yang berfungsi untuk menambah text box baru untuk metadata tambahan. Pada layar tulisan “tambah data” text box diletakkan di atas text box yang ingin ditambah, berupa sebuah link dengan ukuran huruf yang lebih kecil. Dari pengamatan yang dilakukan ketika kedua orang pengawai diminta untuk memasukkan metadata ke dalam WINISIS dan aplikasi data entry katalog, diketahui bahwa scrolling yang terlalu panjang pada aplikasi data entry katalog menyebabkan mereka harus mencari-cari elemen pada layar mana yang harus dipilih. Hal tersebut berbeda dengan WINISIS. Pada WINISIS, form pemasukan metadata ditampilkan pada satu layar tanpa kebutuhan untuk melakukan scrolling. Pengawai juga sering menekan tombol enter untuk berpindah dari satu text box ke text box berikutnya. Pada WINISIS penekanan tombol enter berguna untuk berpindah dari satu text box ke text box berikutnya, sedangkan pada aplikasi data entry katalog memerlukan penekanan tombol tab. Kedua pegawai tidak mengalami kesulitan dalam hal keterbacaan tulisan pada layar. Hal
8
tersebut dikarenakan pemilihan warna yang tepat untuk teks pada layar. Kedua pegawai juga tidak kesulitan dalam membaca teks di layar monitor dengan resolusi 1024 x 768 piksel. Hal tersebut dikarenakan lebar layar dibuat tetap pada ukuran 760 piksel. Kombinasi pemilihan ikon dan pemilihan warna menjadi daya tarik ketika pegawai menggunakan aplikasi data entry.
KESIMPULAN DAN SARAN Kesimpulan Aplikasi data entry katalog masih kalah dibandingkan dengan WINISIS dalam hal kemudahan penggunaan (user friendliness). Pengguna mengalami kesulitan ketika harus menambah text box baru. Selain itu scrolling yang terlalu panjang membuat pengguna memerlukan waktu yang lama untuk mencari dan memastikan text box yang benar untuk memasukkan metadata. Pengguna juga kesulitan ketika harus berpindah dari satu text box ke text box yang lain. Penggunaan perintah dari keyboard yang berbeda pada WINISIS dan aplikasi data entry katalog untuk berpindah dari satu text box ke texbox lainnya menjadi penyebabnya. Kelebihan aplikasi data entry katalog terletak pada kemudahan keterbacaan teks. Hal tersebut dikarenakan pemilihan warna yang digunakan pada layar sudah tepat. Pemilihan warna juga menjadi daya tarik pengguna ketika menggunakan aplikasi data entry katalog. Selain itu keterbacaan teks pada layar juga dikarenakan pemilihan ukuran yang tetap untuk lebar layar yaitu 760 piksel.
DAFTAR PUSTAKA Andrew R. 2004. The CSS Anthology: 101 Essential Tips, Tricks & Hacks. Ed ke-1. USA: SitePoint Pty. Ltd. Galitz WO. 2002. The Essential Guide To User Inteface Design: An Introduction TO GUI Design Principles and Techniques. Ed ke-2. Canada: John Wiley & Sons, Inc. Pressman RS. 2005. Software Engineering: A Practitioner’s Approach. Ed ke-6. New York:McGraw-Hill Companies,Inc. Purnama PB. 2004. Kiat Praktis Menjadi Desainer Web Profesional. Jakarta: PT Elex Media Komputindo. [WIKI] Wikipedia contributors. Wikipedia, The Free Encyclopedia. 2007. Institutional repository. [terhubung berkala]. http://en.wikipedia.org/w/index.php?title=I nstitutional_repository&oldid=138539205. [19 jun 2007].
Saran Aplikasi data entry katalog perlu beberapa perbaikan. Perbaikan bisa dilakukan dengan merubah teks berupa link untuk menambah text box dengan tombol di sisi kanan text box. Perbaikan lain yaitu dengan membuat form pemasukan tidak membutuhkan scrolling. Hal tersebut dapat dicapai dengan menggantikan penggunaan elemen fieldset dengan elemen static text field sebagai caption text box. Diperlukan juga pemberian informasi yang jelas kepada pengguna agar menekan tombol tab jika ingin berpindah text box dan jangan menekan tombol enter. Pemberian informasi dapat ditaruh di atas form masukan dengan warna yang mencolok, sehingga langsung dapat perhatian ketika pengguna mengunjungi halaman tersebut.
9
LAMPIRAN
Lampiran 1 Daftar kode atribut, deskripsi atribut dan kode sub-atribut katalog tesis dan disertasi DISERTASI TESIS KODE ATRIBUT 35 41 80 99 100 245 248 260 300 500 502 504 520
DESKRIPSI ATRIBUT Nomor Kendali Setempat Kode Bahasa Nomor Panggil UDC Nomor Panggil Setempat Penulis Judul Judul Lain Penerbitan dan Distribusi Deskripsi Fisik Catatan Umum Catatan Karya[D/T/S] Catatan Bibliografi
KODE SUBATRIBUT a
KODE ATRIBUT
ISBN
-
35
a
80
Nomor Kendali Setempat Nomor UDC
a
lab
99
Nomor Panggil
lab
a abc abc
100 245 260 300
Penulis Utama Judul Impresum Deskripsi Fisik
a abc abc abce
abce ab
440 500 502
ab
a
504
-
520
-
525
axyz
550 650
Seri Catatan Umum Catatan Karya [D/T/S] Catatan Bibliografi Abstrak Bahasa Indonesia Abstrak Bahasa Inggris Teks Lengkap Subyek
axyz
a -
695 759
Kata Kunci Pembimbing
a a
abc
850
Badan Pemilik
ab
a ab
950 980
Nomor CD Tanggal Registrasi Jumlah Eksemplar Bahasa Jenis Karya Nomor Registrasi
-
759 850 950
Nomor CD
-
985
980 985 990
Tanggal Jumlah Eksemplar Bahasa
b -
990 998 999
998 999
Jenis Karya Nomor Registrasi
a a
550 650 695 700 710
KODE SUBATRIBUT -
20
Abstrak Bahasa Indonesia Abstrak Bahasa Inggris Teks Lengkap Entri Tambahan Subyek Kata Kunci Entri Tambahan Nama Orang Entri Tambahan Badan Korporasi Pembimbing Badan Pemilik
525
DESKRIPSI ATRIBUT
a
-
b a a
11
Lampiran 2 Alur navigasi Mulai
Tampil halaman pilih katalog
Pengguna memilih katalog
katalog terpilih
Tampil halaman add
Pengguna memilih menu pilih add
pilih search
pilih browse
Tampil halaman browse
Pengguna memasukkan metadata
Tampil halaman search klik tombol cari
cari metadata
tidak item terpilih
konfirm hapus
hapus ya
hapus metadata
Tampil halaman hasil cari
Edit/ hapus edit
Tampil halaman edit
item terpilih
edit metadata
Pengguna mengedit metadata
Simpan metadata
selesai
12
Lampiran 3 Rancangan tampilan layar pemilihan katalog LO GO
JUDUL
home daftKatalog add Keterangan browse
search
INFO
Spesifikasi Fungsi dan Objek pada tampilan layar pemilihan katalog NAMA ID JENIS KETERANGAN LAYAR OBJEK OBJEK Layar 2 home TextLink Jika diklik akan menuju ke layar 1 add TextLink Jika diklik akan menuju ke layar 2 browse TextLink Jika diklik akan menuju ke layar 3 search TextLink Jika diklik akan menuju ke layar 4 dafKatalog TextLink Menampilkan daftar katalog keterangan Label Menampilkan penjelasan aksi yang harus dilakukan pengguna dan menampilkan hasil dari aksi yang dilakukan oleh pengguna.
13
Lampiran 4 Rancangan tampilan layar ketika objek dengan id add di klik LO GO
home add
JUDUL
tambah_Atrib deskAtrib Sub
metadata
tambah_Atrib deskAtrib
browse
Sub
metadata
search
save
INFO
Spesifikasi Fungsi dan Objek pada tampilan layar ketika objek dengan id add di klik NAMA JENIS ID OBJEK KETERANGAN LAYAR OBJEK Layar 2 home TextLink Jika diklik akan menuju ke layar 1 add TextLink Jika diklik akan menuju ke layar 2 browse TextLink Jika diklik akan menuju ke layar 3 search TextLink Jika diklik akan menuju ke layar 4 deskAtrib Fieldset Deskripsi atribut beserta kode atribut. Jika atribut Legend mempunyai opsi mandatory maka teks MANDATORY akan tampil. Jika atribut tidak mempunyai opsi mandatory maka teks MANDATORY tidak akan tampil. Tambah_atrib TextLink Jika atribut mempunyai opsi multivalue, maka objek tambah_atrib akan tampil. Jika atribut tidak mempunyai opsi multivalue, maka objek tambah_atrib tidak akan tampil. sub Label Jika atribut mempunyai sub-atribut, maka objek sub akan tampil. Jika atribut tidak mempunyai sub-atribut , maka objek sub tidak akan tampil. metadata Input Box Tempat untuk memasukkan nilai atribut atau subatribut save Command Jika diklik, maka metadata baru akan disimpan. Button
14
Lampiran 5 Rancangan tampilan layar ketika objek dengan id browse di klik LO GO
JUDUL
first
previous
next
last
home add
browse
delete edit desk desk desk desk desk
metadata metadata metadata metadata metadata
search
INFO
Spesifikasi Fungsi dan Objek pada tampilan layar ketika objek dengan id browse di klik NAMA ID JENIS OBJEK KETERANGAN LAYAR OBJEK Layar 2 home TextLink Jika diklik akan menuju ke layar 1 add TextLink Jika diklik akan menuju ke layar 2 browse TextLink Jika diklik akan menuju ke layar 3 search TextLink Jika diklik akan menuju ke layar 4 first Command Jika diklik akan menuju item paling awal Button previous Command Jika diklik akan menuju item sebelumnya Button next Command Jika diklik akan menuju item sesudahnya Buttonl last Command Jika diklik akan menuju item paling akhir Button delete Command Jika diklik, akan menampilkan konfirmasi Button hapus edit Command Jika diklik, akan menampilkan proses edit Button desk Label Berisi deskripsi atribut, kode atribut dan kode sub-atribut. metadata Label Berisi nilai atribut.
15
Lampiran 6 Rancangan tampilan layar ketika objek dengan id search di klik LO GO IPB
JUDUL
teks_cari
cari
home add
browse
search
INFO
Spesifikasi Fungsi dan Objek pada tampilan layar ketika objek dengan id search di klik NAMA ID JENIS KETERANGAN LAYAR OBJEK OBJEK Layar 2 home TextLink Jika diklik akan menuju ke layar 1 add TextLink Jika diklik akan menuju ke layar 2 browse TextLink Jika diklik akan menuju ke layar 3 search TextLink Jika diklik akan menuju ke layar 4 teks_cari Text box Teks yang dicari cari Command Tombol pencarian. Jika diklik akan menuju ke Button layar 5 hasil_cari Frame Tempat untuk menampilkan hasil pencarian
16
Lampiran 7 Rancangan tampilan layar hasil pencarian
JUDUL
LO GO IPB
teks_cari
cari
home edit add
browse
desk desk desk desk desk
metadata metadata metadata metadata metadata
search
INFO
Spesifikasi Fungsi dan Objek pada tampilan layar hasil pencarian NAMA ID JENIS KETERANGAN LAYAR OBJEK OBJEK Layar 2 home TextLink Jika diklik akan menuju ke layar 1 add TextLink Jika diklik akan menuju ke layar 2 browse TextLink Jika diklik akan menuju ke layar 3 search TextLink Jika diklik akan menuju ke layar 4 teks_cari Text box Teks yang dicari cari Command Tombol pencarian. Jika diklik akan menuju ke Button layar 5 desk Label Berisi deskripsi atribut, kode atribut dan kode sub-atribut. metadata Label Berisi nilai atribut. edit
Command Button
Jika diklik, akan menampilkan proses edit.
17
Lampiran 8 Rancangan tampilan layar edit metadata LO GO
home add
JUDUL
tambah_Atrib deskAtrib Sub
metadata
tambah_Atrib deskAtrib
browse
Sub
metadata
search
save
reset
INFO
Spesifikasi Fungsi dan Objek pada tampilan layar edit metadata NAMA JENIS ID OBJEK KETERANGAN LAYAR OBJEK Layar 2 home TextLink Jika diklik akan menuju ke layar 1 add TextLink Jika diklik akan menuju ke layar 2 browse TextLink Jika diklik akan menuju ke layar 3 search TextLink Jika diklik akan menuju ke layar 4 deskAtrib Fieldset Deskripsi atribut beserta kode atribut. Jika atribut Legend mempunyai opsi mandatory maka teks MANDATORY akan tampil. Jika atribut tidak mempunyai opsi mandatory maka teks MANDATORY tidak akan tampil. Tambah_atrib TextLink Jika atribut mempunyai opsi multivalue, maka objek tambah_atrib akan tampil. Jika atribut tidak mempunyai opsi multivalue, maka objek tambah_atrib tidak akan tampil. sub Label Jika atribut mempunyai sub-atribut, maka objek sub akan tampil. Jika atribut tidak mempunyai sub-atribut , maka objek sub tidak akan tampil. metadata Input Box Jika atribut tidak mempunyai sub-atribut, maka objek metadata adalah nilai dari atribut. Jika aribut mempunyai sub-atribut maka objek metadata adalah nilai dari sub-atribut. save Command Jika diklik, maka metadata yang telah di-edit akan Button disimpan. reset Command Jika diklik, maka text box yang telah berisi metadata Button akan dihapus.
18
Lampiran 9 Implementasi dari rancangan tampilan layar pemilihan katalog
Lampiran 10 Implementasi dari rancangan tampilan layar ketika objek dengan id add di klik
19
Lampiran 11 Implementasi dari rancangan tampilan layar ketika objek dengan id browse di klik
Lampiran 12 Implementasi dari rancangan tampilan layar ketika objek dengan id search di klik
20
Lampiran 13 Implementasi dari rancangan tampilan layar hasil pencarian
Lampiran 14 Implementasi dari rancangan tampilan layar edit metadata
21
Lampiran 15 Hasil pengujian black box tampilan layar pemilihan katalog No. Deskripsi Kondisi Awal Skenario Uji Hasil yang diharapkan Uji 1 Menguji web browser Ketikkan Tampil Daftar katalog fungsi untuk baru dibuka alamat URL menampilkan data entry daftar katalog di Tampil penjelasan aksi yang katalog address bar harus dilakukan pengguna suatu web browser 2 Menguji Belum ada Klik salah satu Katalog yang terpilih akan respon aksi katalog yang katalog ditandai berbeda dari yang lain pemilihan dipilih katalog Tampil nama katalog terpilih
3
4
5
Menguji respon aksi pemilihan menu browse
Menguji respon aksi pemilihan menu search
Menguji respon aksi pemilihan menu add
Belum ada katalog yang dipilih Sudah ada katalog yang dipilih Belum ada katalog yang dipilih Sudah ada katalog yang dipilih Belum ada katalog yang dipilih Sudah ada katalog yang dipilih
Klik menu browse Klik menu browse Klik menu search Klik menu search Klik menu add
Klik menu add
Hasil Uji sukses
sukses
sukses
sukses
Tampil penjelasan aksi yang harus dilakukan pengguna
sukses
Tampil penjelasan bahwa katalog harus dipilih terlebih dahulu Tampil halaman browse katalog
sukses
Tampil penjelasan bahwa katalog harus dipilih terlebih dahulu Tampil halaman search katalog
sukses
Tampil penjelasan bahwa katalog harus dipilih terlebih dahulu Tampil halaman add katalog
sukses
sukses
sukses
sukses
22
Lampiran 16 Hasil pengujian black box tampilan layar ketika objek dengan id add diklik No. Deskripsi Uji Kondisi Awal Skenario Uji Hasil yang diharapkan 1
Menguji proses menampilkan seluruh atribut dan formulir masukan
2
Menguji proses tambah atribut
3
Menguji proses simpan metadata
Klik menu Add
Halaman add sudah ditampilkan seluruhnya Semua field masukan dalam keadaan belum terisi
atribut mempunyai opsi mandatory atribut tidak mempunyai opsi mandatory atribut mempunyai opsi multivalue atribut tidak mempunyai opsi multivalue atribut mempunyai sub-atribut atribut tidak mempunyai sub-atribut Klik link tambah data
Semua field masukan dalam keadaan belum terisi Field masukan dengan opsi mandatory tidak diisi Field masukan dengan opsi mandatory sudah diisi Field diisi dengan karakter ‘^’ (tudung)
teks MANDATORY akan tampil disamping kode atribut
Hasil Uji sukses
teks MANDATORY tidak akan tampil disamping kode atribut
sukses
Link tambah data akan tampil
sukses
Link tambah data tidak akan tampil.
sukses
Teks ^subatribut akan tampil.
sukses
Teks ^subatribut tidak akan tampil.
sukses
Fieldset baru dari atribut yang ditambahkan diletakkan dibawah fieldset sebelumnya Muncul pesan bahwa semua field dalam keadaan tidak terisi
sukses
sukses
Muncul pesan bahwa field dengan opsi mandatory belum terisi
sukses
Muncul pesan bahwa metadata sukses disimpan
sukses
Karakter ‘^’akan disimpan dan diganti dengan kata ‘ TUDUNG ’
sukses
23
Lampiran 17 Hasil pengujian black box tampilan layar ketika objek dengan id browse diklik No. Deskripsi Uji Kondisi Awal Skenario Hasil yang diharapkan Hasil Uji Uji 1 Menguji Halaman browse Klik tombol Item pertama akan sukses tombol-tombol telah ditampilkan First ditampilkan navigasi Klik tombol Item sebelumnya akan sukses Previous ditampilkan Klik tombol Item sesudahnya akan sukses Next ditampilkan Klik tombol Item terakhir akan sukses Last ditampilkan 2 Menguji fungsi Halaman browse Tombol Akan muncul konfirmasi sukses hapus item telah ditampilkan delete diklik penghapusan Tombol delete Item setuju Tampil halaman yang Sukses diklik dihapus menerangkan bahwa item berhasil dihapus Item batal Item yang batal dihapus sukses dihapus ditampilkan 3 Menguji fungsi Halaman browse Tombol edit Tampil halaman edit item sukses edit telah ditampilkan diklik Lampiran 18 Hasil pengujian black box tampilan layar ketika objek dengan id search di klik No. Deskripsi Kondisi Skenario Hasil yang diharapkan Hasil Uji Awal Uji Uji 1 Menguji Halaman Ketikkan Jika string yang dicari ditemukan, sukses tombol search string item metadata yang mengandung pencarian ditampilkan pencarian string pencarian ditampilkan dan akan tampil infromasi jumlah item metadata yang ditemukan untuk string yang dicari. Jika string yang dicari tidak Sukses ditemukan, tidak ada item metadata yang ditampilkan, dan tampil informasi bahwa string pencarian tidak ditemukan.
24
Lampiran 19 Hasil pengujian black box tampilan layar hasil pencarian No. Deskripsi Kondisi Awal Skenario Uji Hasil yang Uji diharapkan 1 Menguji Tombol pencarian jumlah item metadata Tombol navigasi kemunculan di-klik untuk yang ditemukan untuk next akan tombol mencari string suatu string pencarian ditamplkan navigasi pencarian yang lebih dari lima hasil diketikkan di jumlah item metadata Tombol navigasi pencarian kotak pencarian yang ditemukan untuk next tidak akan suatu string pencarian ditamplkan kurang dari atau sama dengan lima Klik tombol next untuk item metadata ke Jumlah item pertama kali 6 sampai dengan metadata yang ke 10 ditampilkan ditemukan 11 sampai dengan 15 Tombol prev dan tombol next ditampilkan item metadata Klik tombol next untuk ke11 sampai yang kedua kali dengan item metadata terakhir ditampilkan Tombol next tidak ditampilkan, tombol prev ditampilkan 2 Menguji Halaman hasil Klik tombol edit untuk Halaman edit item tombol edit pencarian suatu item metadata metadata akan ditampilkan yang ditemukan. ditampilkan
Hasil Uji sukses
sukses
sukses
sukses
sukses
sukses
sukses
25
Lampiran 20 Hasil pengujian black box tampilan layar edit metadata No. Deskripsi Uji Kondisi Skenario Uji Hasil yang diharapkan Awal 1 Menguji proses Klik menu atribut mempunyai teks MANDATORY akan menampilkan Add opsi mandatory tampil disamping kode seluruh atribut atribut dan formulir atribut tidak teks MANDATORY tidak masukan mempunyai opsi akan tampil disamping kode mandatory atribut atribut mempunyai Link tambah data akan opsi multivalue tampil
2
Menguji proses tambah atribut
3
Menguji proses simpan metadata
Halaman add sudah ditampilkan seluruhnya Data atribut yang diedit sudah diberikan nilai yang baru.
Hasil Uji sukses
sukses
sukses
atribut tidak mempunyai opsi multivalue atribut mempunyai sub-atribut
Link tambah data tidak akan tampil.
sukses
Teks ^subatribut akan tampil.
sukses
atribut tidak mempunyai subatribut Klik link tambah data
Teks ^subatribut tidak akan tampil.
sukses
Fieldset baru dari atribut yang ditambahkan diletakkan dibawah fieldset sebelumnya Muncul pesan bahwa field dengan opsi mandatory belum terisi
sukses
Muncul pesan bahwa metadata sukses disimpan
sukses
Karakter ‘^’akan disimpan dan diganti dengan kata ‘ TUDUNG ’
sukses
Field masukan dengan opsi mandatory tidak diisi Field masukan dengan opsi mandatory sudah diisi Field diisi dengan karakter ‘^’ (tudung)
sukses
26
