Pengembangan Antarmuka Data entry Katalog di Perpustakaan … · Kelebihan aplikasi data entry...

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 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 berformat 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. 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 langkah-langkah 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 : PENGEMBANGAN ANTARMUKA DATA ENTRY KATALOG DI PERPUSTAKAAN IPB

Nama : Wahyudi Kurniawan Saputra NIM : G06400011

Menyetujui,

Pembimbing I

Prof. Dr. Ir. Kudang B. Seminar, M.Sc.

NIP 131475575

Pembimbing II

Hari Agung A., S.Kom., M.Si.

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

vii

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

viii

DAFTAR GAMBAR

Halaman

1 Model spiral yang digunakan dalam perancangan antarmuka (Pressman 2005)........................3 2 Rancangan format formulir masukan untuk sebuah atribut dan sub-atributnya.........................5 3 Rancangan format tampilan isi sebuah atribut dan sub-atributnya.............................................5 4 Grouping dan penggunaan font arial untuk menuliskan deskripsi atribut (Deskripsi Fisik 300)

pada halaman add dan edit. ........................................................................................................6 5 Penggunaan tabel pada halaman browse....................................................................................6 6 Command button yang diberi label teks dan simbol yang mengindikasikan aksi yang akan

dilakukan oleh command button................................................................................................7 7 Ikon berukuran 32 x 32 piksel pada menu utama yang digunakan untuk menuju ke halaman

home...........................................................................................................................................7 8 Rancangan umum tata letak halaman-halaman web. .................................................................8

DAFTAR LAMPIRAN

Halaman

1 Daftar kode atribut, deskripsi atribut dan kode sub-atribut katalog tesis dan disertasi ...........11 2 Alur navigasi ............................................................................................................................12 3 Rancangan tampilan layar pemilihan katalog ..........................................................................13 4 Rancangan tampilan layar ketika objek dengan id add di klik.................................................14 5 Rancangan tampilan layar ketika objek dengan id browse di klik ...........................................15 6 Rancangan tampilan layar ketika objek dengan id search di klik ............................................16 7 Rancangan tampilan layar hasil pencarian ...............................................................................17 8 Rancangan tampilan layar edit metadata..................................................................................18 9 Implementasi dari rancangan tampilan layar pemilihan katalog..............................................19 10 Implementasi dari rancangan tampilan layar ketika objek dengan id add di klik ....................19 11 Implementasi dari rancangan tampilan layar ketika objek dengan id browse di klik...............20 12 Implementasi dari rancangan tampilan layar ketika objek dengan id search di klik................20 13 Implementasi dari rancangan tampilan layar hasil pencarian...................................................21 14 Implementasi dari rancangan tampilan layar edit metadata .....................................................21 15 Hasil pengujian black box tampilan layar pemilihan katalog...................................................22 16 Hasil pengujian black box tampilan layar ketika objek dengan id add diklik ..........................23 17 Hasil pengujian black box tampilan layar ketika objek dengan id browse diklik.....................24 18 Hasil pengujian black box tampilan layar ketika objek dengan id search di klik ....................24 19 Hasil pengujian black box tampilan layar hasil pencarian .......................................................25 20 Hasil pengujian black box tampilan layar edit metadata ..........................................................26

1

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 karya-karya 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 karya-karya 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).

2

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 huruf-huruf 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 ber-typeface 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

3

2 Mengumpulkan informasi melalui unit-unit 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).

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

Implementasi Perancangan antarmuka pengguna

Analisis pengguna, tugas dan lingkungan

Validasi antarmuka

4

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 PENGGUNA

FUNGSIUTAMA

memilih katalog [A.1.1]

Home Memasukkan metadata [A.1]

memasukkan metadata baru berdasarkan atribut dan sub-atribut [A.1.2]

Add

memilih katalog [A.2.1]

Home

memeriksa item metadata satu per satu[A.2.2]

Browse

Pemeriksaan metadata yang telah dimasukkan [A.2]

memeriksa item metadata berdasarkan kata kunci[A.2.3]

Search

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

5

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 sub-atribut, 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.

Gambar 2 Rancangan format formulir

masukan untuk sebuah atribut dan sub-atributnya.

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 sub-atribut. Objek label yang berisi nilai dari atribut akan menampilkan nilai-nilai dari sub-atribut 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.

Gambar 3 Rancangan format tampilan isi

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

Deskripsi atribut Kode atribut

Kode sub-atribut Nilai sub-atribut

Nomor panggil Setempat(99)[lab]=

^l T ^a 582.284 ^b HASr

Nomor Panggil Setempat (99)

Kode Sub-atribut

^l

^a

^b

T

582.284

HASr

Nilai sub-atribut

Deskripsi atribut Kode atribut

6

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 masing-masing. Beberapa atribut mempunyai sub-atribut, 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.

7

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 baris-baris 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.

8

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.

Gambar 8 Rancangan umum tata letak

halaman-halaman web.

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

HEADER

MENU CONTENT

FOOTER

9

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.

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.

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=Institutional_repository&oldid=138539205. [19 jun 2007].

LAMPIRAN

11

Lampiran 1 Daftar kode atribut, deskripsi atribut dan kode sub-atribut katalog tesis dan disertasi

DISERTASI TESIS

KODE ATRIBUT

DESKRIPSI ATRIBUT

KODE SUB-

ATRIBUT

KODE ATRIBUT

DESKRIPSI ATRIBUT

KODE SUB-

ATRIBUT 35 Nomor Kendali

Setempat a 20 ISBN -

41 Kode Bahasa - 35 Nomor Kendali Setempat

a

80 Nomor Panggil UDC

a 80 Nomor UDC a

99 Nomor Panggil Setempat

lab 99 Nomor Panggil lab

100 Penulis a 100 Penulis Utama a 245 Judul abc 245 Judul abc 248 Judul Lain - 260 Impresum abc 260 Penerbitan dan

Distribusi abc 300 Deskripsi Fisik abce

300 Deskripsi Fisik abce 440 Seri - 500 Catatan Umum - 500 Catatan Umum - 502 Catatan

Karya[D/T/S] ab 502 Catatan Karya

[D/T/S] ab

504 Catatan Bibliografi a 504 Catatan Bibliografi

-

520 Abstrak Bahasa Indonesia

- 520 Abstrak Bahasa Indonesia

-

525 Abstrak Bahasa Inggris

- 525 Abstrak Bahasa Inggris

-

550 Teks Lengkap - 550 Teks Lengkap - 650 Entri Tambahan

Subyek axyz 650 Subyek axyz

695 Kata Kunci a 695 Kata Kunci a 700 Entri Tambahan

Nama Orang - 759 Pembimbing a

710 Entri Tambahan Badan Korporasi

abc 850 Badan Pemilik ab

759 Pembimbing a 950 Nomor CD - 850 Badan Pemilik ab 980 Tanggal

Registrasi -

950 Nomor CD - 985 Jumlah Eksemplar

b

980 Tanggal - 990 Bahasa - 985 Jumlah Eksemplar b 998 Jenis Karya a 990 Bahasa - 999 Nomor

Registrasi a

998 Jenis Karya a 999 Nomor Registrasi a

12

Lampiran 2 Alur navigasi

Mulai

Pengguna memilih katalog

Tampil halaman pilih katalog

selesai

Edit/ hapus

item terpilih

Tampil halaman

edit

edit

hapus

katalog terpilih

Pengguna memilih menu

Tampil halaman browse

pilih browse

pilih search

Tampil halaman search

Pengguna mengedit metadata

konfirm hapus

ya

tidak

klik tombol

cari

Tampil halaman hasil cari

Simpan metadata

hapus metadata

Tampil halaman

add

Pengguna memasukkan

metadata

pilih add

cari metadata

item terpilih

edit metadata

13

Lampiran 3 Rancangan tampilan layar pemilihan katalog Spesifikasi Fungsi dan Objek pada tampilan layar pemilihan katalog

NAMA LAYAR

ID OBJEK

JENIS OBJEK KETERANGAN

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

Layar 2

dafKatalog TextLink Menampilkan daftar katalog

keterangan Label Menampilkan penjelasan aksi yang harus dilakukan pengguna dan menampilkan hasil dari aksi yang dilakukan oleh pengguna.

INFO

JUDUL LO GO

daftKatalog

Keterangan

search

home

add

browse

14

Lampiran 4 Rancangan tampilan layar ketika objek dengan id add di klik Spesifikasi Fungsi dan Objek pada tampilan layar ketika objek dengan id add di klik

NAMA LAYAR

ID OBJEK JENIS

OBJEK KETERANGAN





deskAtrib Fieldset Legend

Deskripsi atribut beserta kode atribut. Jika atribut 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

Layar 2

save Command Button

Jika diklik, maka metadata baru akan disimpan.

JUDUL LO GO

search

home

add

browse Sub metadata

tambah_Atrib deskAtrib

Sub metadata


INFO

save

15

Lampiran 5 Rancangan tampilan layar ketika objek dengan id browse di klik Spesifikasi Fungsi dan Objek pada tampilan layar ketika objek dengan id browse di klik

NAMA LAYAR

ID OBJEK






first Command Button

Jika diklik akan menuju item paling awal

previous Command Button

Jika diklik akan menuju item sebelumnya

next Command Buttonl

Jika diklik akan menuju item sesudahnya

last Command Button

Jika diklik akan menuju item paling akhir

delete Command Button

Jika diklik, akan menampilkan konfirmasi hapus

edit Command Button

Jika diklik, akan menampilkan proses edit

desk Label Berisi deskripsi atribut, kode atribut dan kode sub-atribut.

Layar 2

metadata Label Berisi nilai atribut.

JUDUL LO GO

search

home

add

browse

first previous next last

INFO

edit delete

desk metadata desk metadata desk metadata desk metadata desk metadata

16

Lampiran 6 Rancangan tampilan layar ketika objek dengan id search di klik Spesifikasi Fungsi dan Objek pada tampilan layar ketika objek dengan id search di klik

NAMA LAYAR

ID OBJEK

JENIS OBJEK

KETERANGAN





teks_cari Text box Teks yang dicari

cari Command Button

Tombol pencarian. Jika diklik akan menuju ke layar 5

Layar 2

hasil_cari Frame Tempat untuk menampilkan hasil pencarian

INFO

JUDUL LO GO IPB

search

home

add

browse

teks_cari cari

17

Lampiran 7 Rancangan tampilan layar hasil pencarian Spesifikasi Fungsi dan Objek pada tampilan layar hasil pencarian

NAMA LAYAR

ID OBJEK






teks_cari Text box Teks yang dicari

cari Command Button

Tombol pencarian. Jika diklik akan menuju ke layar 5

desk Label Berisi deskripsi atribut, kode atribut dan kode sub-atribut.

metadata Label Berisi nilai atribut.

Layar 2

edit Command Button

Jika diklik, akan menampilkan proses edit.

INFO

JUDUL LO GO IPB

search

home

add

browse

teks_cari cari

edit

desk metadata desk metadata desk metadata desk metadata desk metadata

18

Lampiran 8 Rancangan tampilan layar edit metadata Spesifikasi Fungsi dan Objek pada tampilan layar edit metadata

NAMA LAYAR

ID OBJEK JENIS

OBJEK KETERANGAN





deskAtrib Fieldset Legend

Deskripsi atribut beserta kode atribut. Jika atribut 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 Button

Jika diklik, maka metadata yang telah di-edit akan disimpan.

Layar 2

reset Command Button

Jika diklik, maka text box yang telah berisi metadata akan dihapus.

INFO

JUDUL LO GO

search

home

add

browse Sub metadata


Sub metadata


save reset

19

Lampiran 9 Implementasi dari rancangan tampilan layar pemilihan katalog

Lampiran 10 Implementasi dari rancangan tampilan layar ketika objek dengan id add di klik

20

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

21

Lampiran 13 Implementasi dari rancangan tampilan layar hasil pencarian

Lampiran 14 Implementasi dari rancangan tampilan layar edit metadata

22

Lampiran 15 Hasil pengujian black box tampilan layar pemilihan katalog No. Deskripsi

Uji Kondisi Awal Skenario Uji Hasil yang diharapkan Hasil

Uji Tampil Daftar katalog

sukses 1 Menguji fungsi untuk menampilkan daftar katalog

web browser baru dibuka

Ketikkan alamat URL data entry katalog di address bar suatu web browser

Tampil penjelasan aksi yang harus dilakukan pengguna

sukses

Katalog yang terpilih akan ditandai berbeda dari yang lain

sukses

Tampil nama katalog terpilih sukses

2 Menguji respon aksi pemilihan katalog

Belum ada katalog yang dipilih

Klik salah satu katalog

Tampil penjelasan aksi yang harus dilakukan pengguna

sukses


Klik menu browse

Tampil penjelasan bahwa katalog harus dipilih terlebih dahulu

sukses 3 Menguji respon aksi pemilihan menu browse Sudah ada

katalog yang dipilih

Klik menu browse

Tampil halaman browse katalog

sukses


Klik menu search

Tampil penjelasan bahwa katalog harus dipilih terlebih dahulu

sukses 4 Menguji respon aksi pemilihan menu search Sudah ada


Klik menu search

Tampil halaman search katalog

sukses


Klik menu add Tampil penjelasan bahwa katalog harus dipilih terlebih dahulu

sukses 5 Menguji respon aksi pemilihan menu add Sudah ada


Klik menu add Tampil halaman add katalog sukses

23

Lampiran 16 Hasil pengujian black box tampilan layar ketika objek dengan id add diklik No. Deskripsi Uji Kondisi Awal Skenario Uji Hasil yang diharapkan Hasil

Uji atribut mempunyai opsi mandatory

teks MANDATORY akan tampil disamping kode atribut

sukses

atribut tidak mempunyai opsi mandatory

teks MANDATORY tidak akan tampil disamping kode atribut

sukses

atribut mempunyai opsi multivalue

Link tambah data akan tampil

sukses

atribut tidak mempunyai opsi multivalue

Link tambah data tidak akan tampil.

sukses

atribut mempunyai sub-atribut

Teks ̂ subatribut akan tampil.

sukses

1 Menguji proses menampilkan seluruh atribut dan formulir masukan

Klik menu Add

atribut tidak mempunyai sub-atribut

Teks ^subatribut tidak akan tampil.

sukses

2 Menguji proses tambah atribut

Halaman add sudah ditampilkan seluruhnya

Klik link tambah data

Fieldset baru dari atribut yang ditambahkan diletakkan dibawah fieldset sebelumnya

sukses

Semua field masukan dalam keadaan belum terisi

Muncul pesan bahwa semua field dalam keadaan tidak terisi

sukses

Field masukan dengan opsi mandatory tidak diisi

Muncul pesan bahwa field dengan opsi mandatory belum terisi

sukses

Field masukan dengan opsi mandatory sudah diisi

Muncul pesan bahwa metadata sukses disimpan

sukses

3 Menguji proses simpan metadata

Semua field masukan dalam keadaan belum terisi

Field diisi dengan karakter ‘^’ (tudung)

Karakter ‘^’akan disimpan dan diganti dengan kata ‘ TUDUNG ’

sukses

24

Lampiran 17 Hasil pengujian black box tampilan layar ketika objek dengan id browse diklik No. Deskripsi Uji Kondisi Awal Skenario

Uji Hasil yang diharapkan Hasil

Uji Klik tombol First

Item pertama akan ditampilkan

sukses

Klik tombol Previous

Item sebelumnya akan ditampilkan

sukses

Klik tombol Next

Item sesudahnya akan ditampilkan

sukses

1 Menguji tombol-tombol navigasi

Halaman browse telah ditampilkan

Klik tombol Last

Item terakhir akan ditampilkan

sukses


Tombol delete diklik

Akan muncul konfirmasi penghapusan

sukses

Item setuju dihapus

Tampil halaman yang menerangkan bahwa item berhasil dihapus

Sukses

2 Menguji fungsi hapus item

Tombol delete diklik

Item batal dihapus

Item yang batal dihapus ditampilkan

sukses

3 Menguji fungsi edit


Tombol edit diklik

Tampil halaman edit item sukses

Lampiran 18 Hasil pengujian black box tampilan layar ketika objek dengan id search di klik No. Deskripsi

Uji Kondisi

Awal Skenario

Uji Hasil yang diharapkan Hasil

Uji Jika string yang dicari ditemukan, item metadata yang mengandung string pencarian ditampilkan dan akan tampil infromasi jumlah item metadata yang ditemukan untuk string yang dicari.

sukses 1 Menguji tombol pencarian

Halaman search ditampilkan

Ketikkan string pencarian

Jika string yang dicari tidak ditemukan, tidak ada item metadata yang ditampilkan, dan tampil informasi bahwa string pencarian tidak ditemukan.

Sukses

25

Lampiran 19 Hasil pengujian black box tampilan layar hasil pencarian No. Deskripsi

Uji Kondisi Awal Skenario Uji Hasil yang

diharapkan Hasil Uji

jumlah item metadata yang ditemukan untuk suatu string pencarian lebih dari lima

Tombol navigasi next akan ditamplkan

sukses Tombol pencarian di-klik untuk mencari string pencarian yang diketikkan di kotak pencarian

jumlah item metadata yang ditemukan untuk suatu string pencarian kurang dari atau sama dengan lima

Tombol navigasi next tidak akan ditamplkan

sukses

item metadata ke 6 sampai dengan ke 10 ditampilkan

sukses Klik tombol next untuk pertama kali

Tombol prev dan tombol next ditampilkan

sukses

item metadata ke11 sampai dengan item metadata terakhir ditampilkan

sukses

1 Menguji kemunculan tombol navigasi hasil pencarian

Jumlah item metadata yang ditemukan 11 sampai dengan 15

Klik tombol next untuk yang kedua kali

Tombol next tidak ditampilkan, tombol prev ditampilkan

sukses

2 Menguji tombol edit

Halaman hasil pencarian ditampilkan

Klik tombol edit untuk suatu item metadata yang ditemukan.

Halaman edit item metadata akan ditampilkan

sukses

26

Lampiran 20 Hasil pengujian black box tampilan layar edit metadata No. Deskripsi Uji Kondisi

Awal Skenario Uji Hasil yang diharapkan Hasil

Uji atribut mempunyai opsi mandatory

teks MANDATORY akan tampil disamping kode atribut

sukses

atribut tidak mempunyai opsi mandatory

teks MANDATORY tidak akan tampil disamping kode atribut

sukses

atribut mempunyai opsi multivalue

Link tambah data akan tampil

sukses

atribut tidak mempunyai opsi multivalue

Link tambah data tidak akan tampil.

sukses

atribut mempunyai sub-atribut

Teks ̂ subatribut akan tampil.

sukses

1 Menguji proses menampilkan seluruh atribut dan formulir masukan

Klik menu Add

atribut tidak mempunyai sub-atribut

Teks ^subatribut tidak akan tampil.

sukses

2 Menguji proses tambah atribut

Halaman add sudah ditampilkan seluruhnya

Klik link tambah data

Fieldset baru dari atribut yang ditambahkan diletakkan dibawah fieldset sebelumnya

sukses

Field masukan dengan opsi mandatory tidak diisi

Muncul pesan bahwa field dengan opsi mandatory belum terisi

sukses

Field masukan dengan opsi mandatory sudah diisi

Muncul pesan bahwa metadata sukses disimpan

sukses

3 Menguji proses simpan metadata

Data atribut yang di-edit sudah diberikan nilai yang baru.

Field diisi dengan karakter ‘^’ (tudung)

Karakter ‘^’akan disimpan dan diganti dengan kata ‘ TUDUNG ’

sukses

Pengembangan Antarmuka Data entry Katalog di Perpustakaan … · Kelebihan aplikasi data entry...

Documents

Transcript of Pengembangan Antarmuka Data entry Katalog di Perpustakaan … · Kelebihan aplikasi data entry...