Perancangan Aplikasi Sistem Informasi Mobile Arsip

dengan menggunakan Framework Phonegap

berbasis Android dan Windows Phone

(Studi Kasus Perpustakaan dan Arsip Daerah Kota Salatiga)

Artikel Ilmiah

Diajukan kepada

Fakultas Teknologi Informasi

untuk Memperoleh Gelar Sarjana Komputer

Peneliti :

Rheza Winahyu Inggarto (672012060)

Yos Richard Beeh, S.T., M.Cs.

Program Studi Teknik Informatika

Fakultas Teknologi Informasi

Universitas Kristen Satya Wacana

Salatiga

Mei 2018

Perancangan Aplikasi Sistem Informasi Mobile Arsip

dengan menggunakan Framework Phonegap

berbasis Android dan Windows Phone

(Studi Kasus Perpustakaan dan Arsip Daerah Kota Salatiga)

1)Rheza Winahyu Inggarto, 2)Yos Richard Beeh

Fakultas Teknologi Informasi

Universitas Kristen Satya Wacana

Jl. Diponegoro 52-60, Salatiga 50711, Indonesia

Email : 1)6720120@student.uksw.edu, 2)yos.fti.uksw@gmail.com

Abstrak

Perpustakaan merupakan fasilitas atau tempat yang menyediakan berbagai macam informasi dalam bentuk cetak seperti buku dan foto maupun dalam bentuk digital seperti film dokumenter. Salah satu perpustakaan terbesar di Salatiga adalah Perpustakaan dan Arsip Daerah Kota Salatiga (Persipda). Kantor Persipda tidak hanya menyediakan informasi dalam bentuk buku saja, melainkan dalam bentuk foto, tekstual, serta film dokumenter. Sistem yang ada sekarang mengharuskan masyarakat yang ingin melihat koleksi arsip Persipda, harus datang langsung ke kantor Persipda. Hal ini menjadi kendala, karena tidak semua orang dapat datang langsung ke kantor Persipda. Solusi untuk mengatasi masalah ini adalah dengan membuat aplikasi koleksi arsip berbasis mobile, sehingga masyarakat luas dapat dengan mudah mengakses arsip dimana saja dan kapan saja mereka berada. Metode penelitian yang digunakan pada penelitian ini adalah metode penelitian R&D (Research and Development) karena metode penelitian ini cocok untuk penelitian yang menghasilkan suatu produk/aplikasi. Hasil pada penelitian ini adalah aplikasi koleksi arsip Perpustakaan dan Arsip Kota Salatiga berbasis android yang menampilkan arsip buku, arsip foto, arsip film, serta arsip tekstual. Setelah melakukan pengujian kuesioner terhadap pengguna, hasil yang didapat adalah sebanyak 73,44% pengguna setuju terhadap 10 kriteria aplikasi yang diujikan. Kata Kunci : perpustakaan, arsip, mobile, Research and Development

Abstract Library is a facility or place that provides various kinds of information in

print form such as books and photos as well as in digital form like documentary. One of the largest libraries in Salatiga is the Library and Archives of Salatiga (Persipda). Persipda Office not only provides information in the form of books only, but in the form of photos, textual, and documentary. The current system requires people who want to see the collection of Persipda archives, come directly to the Persipda office. This is a problem, because not everyone are able to come directly to Persipda office. The solution to solve this problem is to create a mobile archive collection application, so people can easily access archives anywhere and anytime. The research method used in this research is R & D research (Research and Development) method because this research method is suitable for research that produce a product / application. The result of this research is an application of Library and Archive of Salatiga based on android which delivers data archive of books, photos, films, and other texts. After testing the questionnaire to users, the results obtained 73.44% of users agree to the 10 application criteria tested. Keyword : library, archive, mobile, Research and Development 1) Mahasiswa Fakultas Teknologi Informasi Jurusan Teknik Informatika, Universitas Kristen

Satya Wacana Salatiga 2) Staff Pengajar Fakultas Teknologi Informasi, Universitas Kristen Satya Wacana Salatiga.

1. Pendahuluan

Perpustakaan merupakan salah satu media yang menyediakan berbagai

macam informasi baik dalam bentuk cetak maupun non cetak [1]. Dalam

perkembangannya, perpustakaan di Indonesia mengalami perkembangan yang

cukup pesat. Perkembangan perpustakaan yang terjadi saat ini tidak luput dari

perkembangan teknologi informasi. Dalam kehidupan yang serba modern dan

serba cepat ini, semua orang membutuhkan informasi sebagai hal yang hakiki.

Tanpa adanya informasi, masyarakat dapat menjadi tersisih dan terbelakang.

Dalam hal ini perpustakaan memegang peranan yang sangat besar dalam rangka

menyebarkan informasi.

Salah satu perpustakaan terbesar di Salatiga adalah Perpustakaan dan Arsip

Daerah Kota Salatiga (Persipda). Kantor Persipda tidak hanya menyediakan

informasi dalam bentuk buku saja, melainkan dalam bentuk arsip-arsip dan bentuk

informasi lainnya. Arsip-arsip tersebut terbagi menjadi empat jenis, yaitu foto

kuno, buku kuno, film dokumenter, serta arsip tekstual. Sistem yang ada sekarang

mengharuskan apabila masyarakat ingin melihat koleksi arsip Persipda,

masyarakat harus datang langsung ke kantor Persipda. Hal ini menjadi kendala,

karena tidak semua orang yang ingin melihat arsip dapat datang langsung ke

kantor Persipda. Selain itu, masih banyak masyarakat kota Salatiga yang belum

mengetahui bahwa Persipda Salatiga mempunyai koleksi arsip yang dapat dilihat

masyarakat. Solusi untuk mengatasi masalah ini adalah dengan membuat aplikasi

koleksi arsip berbasis mobile, sehingga masyarakat luas dapat dengan mudah

mengakses arsip dimana saja dan kapan saja mereka berada.

Berdasarkan latar belakang masalah yang ada, rumusan masalah pada

penelitian ini adalah bagaimana merancang aplikasi sistem informasi koleksi arsip

Persipda Salatiga berbasis mobile. Aplikasi berbasis mobile yang dirancang,

bertujuan untuk memuat koleksi arsip milik Persipda yang dapat dibuka melalui

perangkat mobile milik pribadi sehingga semua masyarakat dapat melihat arsip

koleksi Persipda Salatiga tanpa harus datang langsung ke kantor Persipda.

Aplikasi ini juga bertujuan untuk menjaga arsip-arsip tersebut tetap bertahan

karena tidak tersentuh tangan secara langsung dan diharapkan aplikasi ini dapat

meningkatkan minat baca masyarakat terhadap arsip karena masyarakat dapat

belajar sejarah dan mengetahui nilai atau pesan yang hendak disampaikan.

2. Tinjauan Pustaka

Penelitian Terdahulu

Penelitian yang telah dilakukan oleh Juli Mandala Putera yang berjudul

“Rancang Bangun Aplikasi berbasis Android dengan Penerapan Web Service

pada Sistem Informasi Arsip Perpustakaan” menghasilkan sebuah aplikasi sistem

informasi koleksi arsip Perpustakaan Daerah Kalimantan Barat berbasis android

[2]. Perbedaan penelitian yang dilakukan oleh Juli Mandala dengan penelitian ini

adalah aplikasi yang dibuat Juli Mandala merupakan aplikasi native sedangkan

pada penelitian ini dibuat aplikasi hybrid memanfaatkan framework phonegap.

Persamaan penelitian ini dengan penelitian Juli Mandala adalah sama-sama

membuat sistem informasi koleksi arsip perpustakaan berbasis android.

Penelitian yang telah dilakukan oleh Ikhwan Nurfuadi yang berjudul

“Rancang Bangun Media Pembelajaran Pengenalan Budaya Indonesia berbasis

Android menggunakan Phonegap” menghasilkan aplikasi media pembelajaran

pengenalan budaya Indonesia. Aplikasi ini berisi media pembelajaran, pakaian

adat, tarian adat, lagu adat daerah, rumah adat, alat musik, serta senjata tradisional

yang ada di Indonesia [3]. Perbedaan penelitian yang dilakukan oleh Ikhwan

Nurfuadi dengan penelitian ini adalah aplikasi yang dibuat Ikhwan Nurfuadi

merupakan aplikasi media pembelajaran sedangkan pada penelitian ini membuat

aplikasi koleksi arsip perpustakaan Salatiga. Persamaan penelitian ini dengan

penelitian Ikhwan Nurfuadi adalah sama-sama menggunakan framework

phonegap untuk membangun aplikasi hybrid berbasis android.

Penelitian yang telah dilakukan oleh Gusty yang berjudul “Pemanfaatan

JQuery Mobile untuk Merancang Sistem Informasi Wisata Kuliner (Studi

Kasus:Kota Pontianak)” menghasilkan aplikasi sistem informasi wisata kuliner

berbasis web mobile yang memungkinkan masyarakat bisa mendapatkan

informasi wisata kuliner dimana saja dan kapan saja dengan menggunakan

perangkat mobile [4]. Perbedaan penelitian yang dilakukan oleh Gusty dengan

penelitian ini adalah aplikasi yang dibuat Gusty merupakan aplikasi sistem

informasi kuliner berbasis web, sedangkan penelitian ini menghasilkan aplikasi

koleksi arsip perpustakaan salatiga berbasis android. Persamaan penelitian ini

dengan penelitian Gusty adalah sama-sama menggunakan framework jQuery

Mobile untuk membuat tampilan pada aplikasi.

Phonegap

Phonegap merupakan framework mobile yang dimiliki oleh Adobe System

[7]. Phonegap memungkinkan pengembang aplikasi membuat atau membangun

aplikasi mobile menggunakan JavaScript, HTML5, dan CSS3, sebagai ganti dari

aplikasi native dari berbagai macam mobile platform seperti yang digunakan di

Android, iOs, dan Windows Phone. Aplikasi yang dihasilkan berupa hybrid,

karena bagian dari aplikasi terutama user interface (tampilan), logika aplikasi dan

komunikasi data atau server didasarkan pada HTML / Javascript, sedangkan

bagian lain dari aplikasi yang bertugas untuk mengkomunikasikan dan

mengontrol fitur-fitur aplikasi (API) tetap berdasarkan pada bahasa native [8].

Aplikasi Phonegap bertindak sebagai client agar user bisa berinteraksi

dengannya. Phonegap Client berkomunikasi dengan server aplikasi untuk

menerima data. Server aplikasi biasanya adalah sebuah web server yang

mempunyai sebuah server side scripting language seperti ColdFusion, Java,

.NET, PHP, dan sebagainya. Phonegap dapat bekerja dengan banyak server

aplikasi menggunakan protocol web standar. Server aplikasi melakukan

perhitungan , dan menerima atau menahan data dari database. Aplikasi Phonegap

biasanya tidak langsung meminta langsung ke sebuah database, komunikasinya

adalah melalui sebuah aplikasi server. Komunikasi Client ke aplikasi server dapat

berdasarkan standar HTTP request untuk content HTML , REST – full XML

services, JSON services, atau SOAP. Arsiktektur client-side biasanya

menggunakan model single-page application, dimana semua data akan di

tampilkan dengan mengupdate HTML DOM (Document Object Model), data

diterima dari server aplikasi menggunakan teknik AJAX, dan variabel disimpan

dimemori dengan JavaScript.

jQuery Mobile

jQuery Mobile merupakan framework mobile berbasis HTML5 yang

dirancang untuk membuat situs web responsif dan aplikasi yang dapat diakses di

semua perangkat smartphone, tablet dan desktop [10]. jQuery mobile

memungkinkan kita membuat tampilan pada aplikasi yang kita buat sama ketika

kita mengaksesnya lewat berbagai macam perangkat yang berbeda misalnya

smartphone, tablet, dan desktop. Ada beberapa keuntungan jika kita

memanfaatkan jQuery Mobile pada aplikasi yang akan kita bangun. Dengan

menggunakan jQuery Mobile, developer bisa memisahkan JavaScript dan HTML

tanpa menggunakan atribut-atribut HTML, cukup dengan memanggil fungsi

Javascript dalam penanganan event. Desain dan form yang responsif

memungkinkan jQuery Mobile akan me-render tampilan secara responsif berdasar

pada ukuran layar yang berbeda-beda. Build Once, Run Anywhere, cukup

mengembangkan satu aplikasi, dan aplikasi tersebut dapat berjalan di seluruh

perangkat pennguna.

Arsip

Arsip berasal dari kata arheion (bahasa Yunani) dan archivum (bahasa

Latin) artinya kantor pemerintah dan kertas yang disimpan di kantor tersebut,

yang semula diterapkan pada record atau rekaman pemerintah [5]. Kata arsip

meliputi 3 pengertian : 1) kumpulan naskah atau dokumen yang disimpan; 2)

gedung (ruang) penyimpanan kumpulan naskah atau dokumen 3) organisasi

atau lembaga yang mengelola dan menyimpan kumpulan naskah atau dokumen.

Kearsipan mempunyai peranan sebagai pusat ingatan, sumber informasi serta

alat pengawasan yang sangat diperlukan dalam setiap organisasi lembaga

negara, swasta dan perguruan tinggi. Arsip merupakan sesuatu yang penting,

oleh karena itu arsip wajib diperlihara. Pemeliharaan bahan arsip bertujuan

untuk melestarikan kandungan informasi arsip dengan alih bentuk

menggunakan media lain atau melestarikan bentuk aslinya selengkap

mungkin untuk dapat digunakan secara optimal. Langkah ini berguna agar

kondisi fisik arsip tetap terjaga secara utuh sehingga dapat digunakan

dalam jangka waktu lama. Pentingnya pemeliharaan arsip, karena arsip

merupakan suatu informasi yang dapat mempertahankan hak milik

seseorang, instansi maupun negara. Arsip statis sangat perlu dipelihara karena

mempunyai nilai historis dan informasi sejarah suatu daerah [6].

3. Metode Penelitian

Metode Penelitian yang dipakai adalah metode penelitian R&D (Research

and Development). Menurut Sugiyono metode penelitian R&D adalah metode

penelitian yang digunakan untuk menghasilkan produk tertentu, dan menguji

keefektifan produk tersebut [11]. Metode penelitian R & D dipakai pada

penelitian ini karena penelitian ini akan menghasilkan sebuah produk berupa

aplikasi sistem informasi mobile arsip. Langkah-langkah penelitian dan

pengembangan (R&D) ditujukkan pada Gambar 1.

Gambar 1 Langkah metode penelitian R&D [11]

Langkah pertama yaitu potensi dan masalah. Langkah ini merupakan

langkah untuk menentukan masalah dan cara untuk mengatasinya. Masalah pada

penelitian ini adalah sistem yang ada sekarang mengharuskan masyarakat yang

ingin melihat koleksi arsip kantor Persipda Salatiga harus datang langsung ke

kantor Persipda, ini menjadi kendala karena tidak semua orang yang ingin melihat

arsip dapat datang langsung ke kantor Persipda, oleh karena itu dibuatlah aplikasi

sistem informasi mobile arsip ini untuk mengatasi masalah tersebut. Langkah

kedua adalah pengumpulan data yaitu mengumpulkan data atau kebutuhan

pengguna (user requirements) untuk membuat aplikasi sistem informasi mobile

arsip ini. Wawancara dilakukan dengan bapak Ign. Bagus Indarto selaku Kasi

Arsip Daerah dan Rinaldi Anggoro Shakti selaku supervisor lapangan. Hasil dari

wawancara tersebut kemudian dapat didefinisikan beberapa kebutuhan yaitu

perlunya sistem informasi data buku kuno, data foto kuno, dan data film

dokumenter.

Langkah ketiga adalah Desain produk yaitu mendesain aplikasi yang akan

dibuat nantinya melalui diagram visual Unified Modelling Language (UML),

yaitu use case diagram, activity diagram, serta class diagram. Setelah melakukan

pengumpulan data, hasil dari pengumpulan data dibuat menjadi UML agar model

(blueprint) aplikasi yang akan dibuat dapat dipahami. Langkah keempat adalah

Validasi desain yaitu menyerahkan desain UML aplikasi yang telah dibuat kepada

bapak Ign. Bagus Indarto selaku Kasi Arsip Daerah dan Rinaldi Anggoro Shakti

selaku supervisor lapangan. Pada tahap ini, kebutuhan data untuk membangun

aplikasi ini ditambah data arsip tekstual. Langkah kelima adalah Perbaikan desain

yaitu memperbaiki desain UML apabila pada validasi desain masih terdapat

kekurangan. Pada langkah ini desain aplikasi ditambah, yang sebelumnya aplikasi

hanya memuat koleksi data buku kuno, data foto kuno, dan data film dokumenter,

setelah dilakukan validasi desain koleksi arsip ditambah data arsip tekstual.

Langkah keenam adalah Uji coba produk. Setelah melakukan desain produk,

validasi desain dan perbaikan desain, maka akan dibuat sebuah produk dalam

bentuk prototype. Prototype inilah yang akan di uji coba. Uji coba dilakukan oleh

bapak Bagus Indarto dan Rinaldi Anggoro selaku Kasi Arsip Daerah dan

supervisor Persipda Salatiga. Langkah ketujuh adalah Revisi Produk 1 yaitu

merevisi prototype yang telah diuji coba. Apabila masih ditemukan kekurangan,

maka akan dilakukan revisi produk guna membuat aplikasi lebih sempurna dari

sebelumnya.

Langkah kedelapan adalah Ujicoba pemakaian yaitu menguji coba produk

hasil revisi produk 1 kepada 30 orang anggota Persipda untuk mengetahui jika

aplikasi masih terdapat kekurangan. Langkah kesembilan adalah Revisi Produk 2

yaitu merevisi kekurangan yang ada pada aplikasi hasil dari uji coba pemakaian

oleh seluruh pegawai perpustakaan agar aplikasi lebih sempurna. Langkah

kesepuluh adalah Pembuatan produk masal. Setelah dilakukan Revisi Produk 2,

maka produk yang telah diuji coba oleh pegawai perpustakaan dan direvisi produk

2 akan diproduksi secara masal. Aplikasi sistem informasi mobile arsip ini akan

dipublikasikan agar masyarakat dapat menggunakan aplikasi ini.

Metode Perancangan Sistem

Metode yang akan digunakan pada penelitian ini untuk perancangan sistem

adalah Prototype Model, yang merupakan metode perancangan dengan

melakukan pendekatan dari sisi kebutuhan pengguna sistem.

Gambar 2 Prototype Model [12]

Tahap-tahap yang ada pada Gambar 2 adalah listen to customer dimana

dilakukan wawancara dengan user untuk mengumpulkan kebutuhan-kebutuhan

yang diperlukan dalam pembuatan sistem. Wawancara dilakukan dengan bapak

Ign. Bagus Indarto selaku Kasi Arsip Daerah dan Rinaldi Anggoro Shakti selaku

supervisor lapangan. Hasil dari wawancara tersebut kemudian dapat didefinisikan

beberapa kebutuhan yaitu perlunya sistem untuk pengolahan data buku kuno, data

foto kuno, data arsip tekstual dan data film dokumenter. Berdasarkan data dan

kebutuhan sistem yang telah dikumpulkan lalu dilakukan desain untuk

mendapatkan prototype 1 pada tahap build/revise mock-up . Hasil dari prototype 1

kemudian dilakukan customer test-drives mock-up yaitu aplikasi akan diberikan

kepada pihak yang bersangkutan untuk dilakukan pengujian apakah sistem sudah

sesuai dengan yang dibutuhkan. Hasil dari customer test-drives mock-up akan

digunakan untuk pengembangan prototype selanjutnya.

Perancangan Sistem

Perancangan sistem merupakan tahapan yang menggambarkan rancang

bangun sistem yang dibuat. Perancangan sistem menggunakan beberapa diagram

visual Unified Modelling Language (UML), yaitu use case diagram, activity

diagram, class diagram, serta sequence diagram. Use Case Diagram

menggambarkan interaksi yang terjadi antara aktor dengan sistem. Use Case

Diagram yang akan dibangun dapat dilihat pada Gambar 3.

Gambar 3 Use Case Diagram Sistem

Pada Gambar 3 terlihat bahwa terdapat satu aktor yaitu Masyarakat dan

beberapa interaksi yang dapat dilakukan oleh aktor tersebut. Interaksi yang dapat

dilakukan oleh aktor tersebut adalah melihat arsip film, melihat arsip buku,

melihat arsip foto, melihat arsip tekstual, dan menambahkan saran.

Selain Use Case Diagram, terdapat juga Class Diagram. Class Diagram

merupakan diagram yang digunakan untuk menampilkan beberapa kelas serta

paket-paket yang ada dalam sistem/perangkat lunak yang sedang kita bangun.

Class Diagram memberi kita gambaran (diagram statis) tentang sistem/perangkat

lunak dan relasi-relasi yang ada didalamnya. Class Diagram untuk membangun

sistem ini dapat dilihat pada Gambar 4.

Gambar 4 Class Diagram Sistem

Class Diagram pada Gambar 4 menggambarkan class yang digunakan pada sistem ini serta hubungan antar satu class dengan class yang lainnya. Class Buku mempunyai relasi dengan class Penerbit dan Pengarang. Relasi antara class Penerbit dan Buku adalah satu ke banyak, karena satu Penerbit dapat menerbitkan lebih dari satu buku dan suatu buku pasti diterbitkan oleh satu penerbit. Relasi antara class Pengarang dan Buku adalah satu ke banyak, karena satu pengarang dapat mengarang lebih dari satu buku dan satu buku pasti dikarang oleh seorang pengarang.

Selain Use Case Diagram dan Class Diagram, terdapat juga Sequence Diagram. Sequence Diagram merupakan diagram yang digunakan untuk menggambarkan skenario atau rangkaian langkah – langkah yang dilakukan sebagai respon dari sebuah event untuk menghasilkan ouput tertentu, dan perubahan apa saja yang terjadi secara internal dan output apa yang dihasilkan. Sequence Diagram untuk membangun sistem ini dapat dilihat pada Gambar 5.

Melihat arsip film

Melihat arsip buku

Melihat arsip foto

Melihat arsip tekstual

Menambah Saran

Masyarakat

Gambar 5 Sequence Diagram untuk melihat data buku

Sequence Diagram pada Gambar 5 menggambarkan bagaimana data dari

database dapat ditampilkan. User melihat data buku, lalu UI Data Buku meminta

data melalui bantuan webservice. Webservice meminta data buku ke database,

lalu database mengirimkan data yang diminta dan data buku ditampilkan pada UI

Data Buku.

Gambar 6 Sequence Diagram untuk menambah saran

Sequence Diagram pada Gambar 6 menggambarkan bagaimana user dapat

menambahkan saran untuk aplikasi ini. User memilih menu saran, lalu mengisi

data nama, email, dan saran untuk menambahkan saran. Data yang telah diisi tadi

akan dikirimkan ke database melalui webservice. Setelah terkirim ke database,

maka database akan mengirimkan konfirmasi dan pada UI Insert Saran akan

ditampilkan bahwa saran telah berhasil ditambahkan.

Selain Use Case Diagram, Class Diagram, dan Sequence Diagram,

terdapat juga Activity Diagram. Activity Diagram menggambarkan alur aktivitas

yang dapat dilakukan oleh aktor mulai dari awal hingga berakhirnya suatu use

case. Pada bagian ini, Activity Diagram akan membahas aktivitas berdasarkan Use

UserUserUI Data BukuUI Data Buku Web ServiceWeb Service Database BukuDatabase Buku

1. Melihat data buku

2. Memanggil Web Service

3. Meminta data buku pada database

4. Memberikan data buku

5. Menampilkan data buku

UserUserUI_Insert_SaranUI_Insert_Saran Web ServiceWeb Service Database SaranDatabase Saran

3. mengirimkan data nama, email,

1. Menambahkan Saran

2. memanggil web service

5. menampilkan pesan saran

4. memberikan konfirmasi

dan saran ke database

sudah ditambahkan

Case Diagram pada Gambar 7. Activity Diagram dari use case tersebut dapat

dilihat pada Gambar 7.

\

Gambar 7 Activity Diagram Sistem

Activity Diagram pada Gambar 7 menggambarkan bahwa ketika user

membuka aplikasi, maka aplikasi akan menampilkan halaman utama. User dapat

melihat arsip film, arsip buku, arsip foto, arsip tekstual, serta menambahkan saran.

Ketika user memilih untuk melihat arsip film, arsip buku, arsip foto, maupun asip

tekstual maka sistem akan menampilkan data sesuai menu yang dipilih user.

Ketika user ingin menambahkan saran, maka sistem akan menampilkan form

saran berupa field nama dan saran yang harus user isi semuanya agar saran dapat

diproses. Saran yang telah ditambahkan oleh user akan tersimpan dalam database

dan hanya admin yang dapat melihat saaran tersebut.

4. Hasil dan Pembahasan

Penelitian ini menghasilkan aplikasi yang dapat berjalan pada platform

Android. Hasil implementasi sistem berdasarkan perancangan yang telah dibuat

dijelaskan sebagai berikut.

Membuka Aplikasi

Memilih Menu

Arsip Buku

Arsip Foto

Arsip Film

Start

End

Arsip Tekstual

Menambah

Saran

backKeyPressed

Menampilkan

data buku

menampilkan

data film

menampilkan

data foto

menampilkan

data tekstual

Menampilkan halaman utama

Menampilkan form tambah

saran

System.exit()

Simpan

DatabaseSystemUser

(A) (B)

Gambar 8 (A) Menu utama aplikasi pada Android (B) Menu utama pada Emulator Windows

Phone

Pada Gambar 8 (A) menggambarkan menu utama aplikasi yang dijalankan

pada device Android dan Gambar 8 (B) menggambarkan menu utama aplikasi

yang dijalankan pada emulator Windows Phone. User interface pada dua platform

ini terlihat sama karena dengan memanfaatkan jQuery Mobile tampilan aplikasi

yang dibuat dengan HTML5 dapat membuat tampilan aplikasi menjadi responsif

pada berbagai macam platform yang mendukung HTML5. Terdapat 5 pilihan bagi

user yaitu, melihat arsip foto, buku, film, tekstual, serta menambahkan saran

mengenai aplikasi.

Kode Program 1 Webservice getAllFilm.php

01 <?php

02 include 'config.php';

03 $sql = "select * from tb_film_dokumenter";

04 try {

05 $dbh = new PDO("mysql:host=$dbhost;dbname=$dbname", $dbuser, $dbpass);

06 $dbh->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

07 $stmt = $dbh->query($sql);

08 $foto = $stmt->fetchAll(PDO::FETCH_OBJ);

09 $dbh = null;

11 echo '{"items":'. json_encode($film) .'}';

12 } catch(PDOException $e) {

13 echo '{"error":{"text":'. $e->getMessage() .'}}';

14 }

15 ?>

Kode Program 1 merupakan kode program webservice getAllFilm.php

untuk mengambil data dari database server. Baris 03 merupakan sql query untuk

menampilkan data film. Baris 05 dan 06 merupakan koneksi untuk

menghubungkan webservice dengan database. Baris 13 sampai 19 merupakan

perintah untuk mengeksekusi query sql dan mengambil data dari database dan

dikirimkan dalam format JSON.

(A) (B)

Gambar 9 (A) Tampilan menu film pada Android (B) ) Tampilan menu film pada Emulator

Windows Phone

Gambar 9 (A) merupakan tampilan data listview film yang ditampilkan pada

device Android dan Gambar 9 (B) merupakan tampilan data listview film yang

ditampilkan pada Emulator Windows Phone. Data diambil dari database film

yang ditampilkan ke dalam listview. Ketika user memilih salah satu data pada

listview, maka detail dari film tersebut akan ditampilkan. User juga dapat mencari

film melalui kolom pencarian yang ada.

Kode Program 2 Menampilkan data film pada listview 01 var serviceURL = "http://arsip.salatigakota.go.id/android/film/";

02 function getFilmList() {

03 $.getJSON(serviceURL + 'getAllFilm.php', function(data) {

04 $('#filmList li').remove();

05 film = data.items;

06 $.each(film, function(index, filmm) {

07 $('#filmList').append('<li><a

08 href="filmdetails.html?id_film=' + filmm.id_film + '">' +

09 '<h4>' + filmm.judul_film + '</h4>' +

10 '<p>' + filmm.bentuk + '</p>' +

11 '<span class="ui-li-count">' +

12 filmm.tahun_film + '</span></a></li>');

13 });

14

15 $('#filmList').listview('refresh');

16 });

17 }

Kode Program 2 merupakan script javascript yang digunakan untuk

menampilkan data pada listview. Baris 01 merupakan url lokasi webservice

getAllFilm.php berada. Baris 02 sampai 16 merupakan fungsi untuk menampilkan

data ke dalam listview yang telah diambil oleh webservice getAllFilm.php. Pada

tiap list akan ditampilkan informasi mengenai judul film, bentuk film, dan tahun

film. Baris 07 dan 08 adalah link yang berbentuk listview. Ketika data pada

listview dipilih salah satu, maka akan ditampilkan detail film pada halaman

filmdetails.html dengan parameter id_film.

(A) (B)

Gambar 10 (A) Tampilan detail film pada Android (B) Tampilan detail film pada Emulator

Windows Phone

Gambar 10 (A) merupakan tampilan detail informasi film pada device

Android dan Gambar 10 (B) merupakan tampilan detail informasi film pada

Emulator Windows Phone. Detail film mengandung informasi tentang cover film,

judul film, bentuk film, tahun film, deskripsi film, dan video film. Detail

informasi film akan ditampilkan ketika user memilih salah satu data pada listview

film.

Kode Program 3 Menampung data detail infromasi film

01 $('#detailsPage').live('pageshow', function(event) {

02 $.getJSON(serviceURL + 'getFilm.php?id_film='+id_film, displayFilm);

03 });

04 function displayFilm(data) {

05 var film = data.item;

06 $('#judul').text(film.judul_film);

07 $('#tahun').text ('Tahun : ' + film.tahun_film);

08 $('#bentuk').text ('Bentuk : ' + film.bentuk);

09 $('#deskripsi').text(film.deskripsi_film);

10 $('#coverpic').attr('src', 'http://arsip.salatigakota.go.id/assets/cover/'

11 + film.url_coverfilm);

12 $('#video').attr('src', 'http://arsip.salatigakota.go.id/assets/video/' +

film.url_video);

13 $('#actionList').listview('refresh');

14 }

Kode Program 3 merupakan script javascript yang digunakan untuk

menampung data detail informasi film (cover film, judul film, bentuk film, tahun

film, deskripsi film, dan video film). Baris 01 sampai 03 merupakan perintah

untuk mengambil data dari database dengan parameter id_film dalam format

JSON. Baris 04 sampai 14 merupakan perintah menampung data yang telah

diambil oleh webservice getFilm.php dengan parameter id_film. Baris 06 sampai

09 merupakan variabel untuk menampung data JSON judul film, tahun film,

bentuk film, dan deskripsi film. Baris 10 dan 11 merupakan variabel untuk

menyimpan lokasi dan nama dari gambar cover yang akan ditampilkan pada detail

film. Baris 12 dan 13 merupakan variabel untuk menyimpan lokasi dan nama dari

video yang akan ditampilkan pada detail film.

(A) (B)

Gambar 11 (A) Tampilan gambar dan video detail film pada Android (B) Tampilan gambar dan

video detail film pada Emulator Windows Phone

Gambar 11 (A) merupakan tampilan detail informasi film berupa data teks (judul film, bentuk film, tahun film, deskripsi film), gambar dan video pada device Android dan Gambar 11 (B) merupakan tampilan detail informasi film berupa data teks (judul film, bentuk film, tahun film, deskripsi film), gambar, dan video pada Emulator Windows Phone. Kode Program 4 Menampilkan data film pada HTML5 01 <p style="text-align:center"><img id="coverpic" width="90%"/></p>

02 <div data-role="content" > 03 <div class="ui-corner-all custom-corners">

04 <div id="judul" class="ui-bar ui-bar-a" align="center"></div>

05 <div id="bentuk" class="ui-body ui-body-a"></div>

06 <div id="tahun" class="ui-body ui-body-a"></div>

07 <div data-role="collapsible" class="ui-body-bottom ui-body-a"

08 data-theme="a" data-mini="true" width="90%">

09 <h4>Deskripsi</h4>

10 <p align="justify" id="deskripsi"></p>

11 </div>

12 <div data-role="collapsible" class="ui-body-bottom ui-body-a"

13 data-theme="a" data-mini="true" width="90%">

14 <h4>Video</h4>

15 <p style="text-align:center">

16 <video controls width="100%" id="video"></video></p>

17 </div>

18 </div>

19 </div>

Kode Program 4 merupakan script HTML5 yang digunakan untuk

menampilkan detail informasi film berupa data teks (judul film, bentuk film,

tahun film, deskripsi film), gambar dan video. Nama masing-masing id yang

digunakan pada kode program 4 merupakan variabel pada javascript yang

menampung data dari webservice getFilm.php. Baris 01 merupakan script HTML5

yang digunakan untuk menampilkan gambar dengan tag <img>. Baris 04 sampai

06 merupakan script HTML5 untuk menampilkan data berupa teks (judul film,

bentuk film, dan tahun film) menggunakan tag <div> dengan masing – masing id

yang berbeda.. Baris 10 merupakan script HTML5 untuk menampilkan data

deskripsi film ke dalam paragraf menggunakan tag <p>. Baris 16 merupakan

script HTML5 untuk menampilkan video menggunakan tag <video>.

(A) (B)

Gambar 12 (A) Tampilan tambah saran pada Android (B) Tampilan tambah saran pada

Emulator Windows Phone

Gambar 12 (A) merupakan tampilan tambah saran pada device Android dan

Gambar 12 (B) merupakan tampilan tambah saran pada Emulator Windows

Phone. Apabila user ingin memberikan masukan tentang aplikasi sistem informasi

ini, user dapat menambahkan saran dengan mengisi form tambah saran. Untuk

menambahkan saran, user harus mengisi nama, email, dan saran untuk aplikasi.

Kode Program 5 Menambah saran 01 $(document).ready(function() {

02 $("#insert").click(function() {

03 var nama = $("#nama").val(); 04 var email = $("#email").val();

05 var saran = $("#saran").val();

06 var dataString = "nama=" + nama + "&email=" + email + "&saran=" + saran + "&insert=";

07 if ($.trim(nama).length > 0 & $.trim(email).length > 0 & $.trim(saran).length > 0) {

08 $.ajax({

09 type: "POST", 10 url: "http://arsip.salatigakota.go.id/android/tekstual/insert.php",

11 data: dataString, 12 crossDomain: true,

13 cache: false,

14 beforeSend: function() { 15 $("#insert").val('Connecting...');

16 },

17 success: function(data) { 18 if (data == "success") {

19 alert("Saran Berhasil Ditambahkan");

20 $("#insert").val('submit'); 21 } else if (data == "error") {

22 alert("error");

23 }

24 } 25 });

26 }

27 return false; 28 });

29 });

Kode Program 5 merupakan kode program untuk menambahkan saran.

Baris 03 sampai 05 merupakan script javascript untuk mengambil data dari

inputan user. Baris 10 merupakan url lokasi webservice berada. Baris 07 sampai

28 merupakan script javascript untuk menambahkan data pada database dengan

menggunakan method POST. Ketika data berhasil ditambahkan maka akan

webservice akan megirimkan konfirmasi “success” dan akan muncul alert “Saran

Berhasil Ditambahkan”.

Pengujian sistem dilakukan untuk menguji fungsi-fungsi sistem hasil

implementasi. Pengujian yang dilakukan terdiri dari pengujian blackbox dan

pengujian responden. Pengujian blackbox yaitu pengujian validasi sistem tanpa

memperhatikan struktur logika internal perangkat lunak untuk mengetahui apakah

perangkat lunak berfungsi dengan benar. Hasil dari pengujian blackbox

ditampilkan pada Tabel 1.

Tabel 1 Hasil Pengujian Blackbox

Fungsi yang diuji Output yang diharapkan Output dari Sistem Status

Pengujian

Menampilkan data

koleksi arsip buku, arsip

foto, arsip film dan arsip

tekstual.

Data berhasil ditampilkan Sistem berhasil menampilkan daftar

koleksi arsip dan menampilkan informasi

koleksi arsip secara detail

Valid

Pencarian koleksi arsip Data hasil pencarian

berhasil ditampilkan

Sistem berhasil menampilkan arsip sesuai

dengan kata kunci pencarian

Valid

Menampilkan gambar

pada koleksi arsip

Data gambar berhasil

ditampilkan.

Sistem berhasil menampilkan data berupa

gambar yang ada pada detail arsip buku,

foto, film, dan tekstual.

Valid

Menampilkan video pada

koleksi arsip film

Data video berhasil

ditampilkan dan

dimainkan.

Sistem berhasil menampilkan dan

memainkan video pada detail arsip film.

Valid

Menambah saran untuk

aplikasi

Data berhasil ditambahkan

ke dalam database

Saran berhasil ditambahkan ke dalam

database.

Valid

Berdasarkan hasil pengujian blackbox pada Tabel 1, disimpulkan bahwa fungsi-fungsi pada sistem yang diakses merespon dengan baik dan menghasilkan output yang sesuai harapan. Hasil tersebut memperlihatkan bahwa antara proses perancangan sistem dengan implementasi sistem tidak terdapat perbedaan dan sesuai dengan harapan.

Pengujian berikutnya adalah pengujian responden. Penentuan sampel menggunakan purposive sampling, yaitu menentukan sampel dengan pertimbangan tertentu, dalam penelitian ini adalah pertimbangan usia. Pengujian dilakukan kepada masyarakat Salatiga yang berusia 15 tahun ke atas. Menurut Badan Pusat Statistik Provinsi Jawa Tengah, populasi penduduk Salatiga yang berusia15-64 tahun berjumlah 127.216 jiwa (data terakhir 31 Oktober 2017). Dari

data tersebut digunakan rumus Slovin (1960) dengan tingkat kesalahan 10% untuk menghitung jumlah sampel.

n = sampel, N = populasi, d = nilai presisi 90%, sig = 0,1.

Setelah menggunakan rumus Slovin dengan tingkat kesalahan 10%, maka didapatkan hasil 100 responden untuk pengujian yang mewakili 127.216 orang yang berusia 15-64 tahun di Salatiga. Pengujian dilakukan menggunakan kuesioner kepada 100 responden dengan 10 pernyataan yang diajukan. Teknik pengambilan sampel menggunakan teknik insidental sampling, yaitu teknik penentuan sampel berdasarkan kebetulan, yaitu siapa saja yang kebetulan bertemu dengan peneliti dapat digunakan sebagai sampel apabila memenuhi pertimbangan tertentu (dalam penelitian ini pertimbangan usia). Dengan menggunakan skala likert, data hasil pengujian dapat dilihat pada Tabel 2.

Tabel 2. Hasil Pengisian Kuesioner untuk Pengujian Responden

No Pernyataan

Sangat

Tidak

Setuju

Tidak

Setuju

Rag

u –

ragu

Setuju Sangat

Setuju

Jumla

h skor

Persen

tase

hasil

1. Sistem mampu memberikan

informasi mengenai koleksi Arsip

Salatiga

0 0 0 50 50 450 90%

2. Sistem memberikan data yang sesuai

pada tiap koleksi arsip.

0 0 33 35 32 399 79,8%

3. Pencarian koleksi arsip pada sistem berjalan dengan baik

0 0 38 29 33 395 79%

4. Aplikasi dapat menampilkan data

berupa teks pada tiap koleksi arsip

(buku, film, foto, tekstual).

0 26 25 21 28 351 70,2%

5. Aplikasi dapat menampilkan data

berupa gambar pada tiap koleksi

arsip (buku, film, foto, tekstual).

0 18 23 26 33 374 74,8%

6. Aplikasi dapat menampilkan data berupa video pada koleksi arsip film.

0 25 29 16 30 351 70,2%

7. Dengan adanya aplikasi, pengguna

dapat mengakses informasi arsip

Persipda dimana saja dan kapan saja.

0 26 28 23 23 343 68,6%

8. Dengan adanya aplikasi, pengguna

dapat menghemat waktu tanpa datang

langsung ke kantor Persipda.

0 21 35 20 24 347 69,4%

9. Koleksi arsip menjadi lebih aman karena tidak tersentuh tangan secara

langsung.

0 30 26 25 19 333 66,6%

10. Aplikasi menarik bagi pengguna. 0 29 27 30 14 329 65,8%

Jumlah skor hasil pengumpulan data 3672

Jumlah skor kriterium (bila setiap butir mendapat skor tertinggi) = 5 x 10 x

100 = 5000. Untuk ini skor tertinggi tiap butir 5, jumlah butir 10, dan jumlah

responden 100. Jumlah skor hasil pengumpulan data = 3672. Dengan demikian

kualitas aplikasi mobile arsip Persipda Salatiga menurut persepsi 100 orang

responden adalah 3672 : 5000 = 73,44% dari kriteria yang ditetapkan. Hal ini

secara kontinum dapat dibuat kategori sebagai berikut.

Nilai 3672 termasuk dalam kategori interval “Setuju”. Sehingga dapat

disimpulkan bahwa responden setuju terhadap 10 kriteria pernyataan yang

diujikan mengenai aplikasi sistem informasi mobile arsip Persipda.

5. Simpulan

Penelitian ini menghasilkan sebuah aplikasi yang berisi koleksi arsip

Perpustakaan Daerah Kota Salatiga berbasis android. Aplikasi mobile arsip

dikembangkan dengan memanfaatkan web service yang berfungsi untuk

meminta data dari database server. Data yang diberikan database berformat

JSON. Dengan memanfaatkan jQuery Mobile, data JSON yang telah

diperoleh ditampilkan oleh aplikasi menggunakan HTML5. Aplikasi mobile

arsip yang telah dibangun dapat memberikan informasi mengenai koleksi

arsip foto, arsip buku, arsip film, serta arsip tekstual. Setelah aplikasi selesai

dibuat, dilakukan pengujian aplikasi terhadap 100 pengguna melalui

kuesioner. Hasil yang didapatkan setelah melakukan pengujian kuesioner

terhadap pengguna adalah sebanyak 73,44% pengguna setuju terhadap 10

kriteria aplikasi yang diujikan melalui kuesioner.

6. Pustaka

[1] Suharti. 2017. Pengembangan Koleksi Untuk Memenuhi Kebutuhan

Informasi Di Direktorat Perpustakaan Universitas Islam Indonesia.

Yogyakarta : Universitas Islam Indonesia Yogyakarta.

[2] Mandala, Juli. 2013. Rancang Bangun Aplikasi Berbasis Android

Dengan Penerapan Web Service Pada Sistem Informasi Perpustakaan

(Studi Kasus : Perpustakaan Daerah Kalimantan Barat). Pontianak :

Universitas Tanjungpura Pontianak.

[3] Nurfuafi, Ikhwan. 2017, Rancang Bangun Media Pembelajaran

Pengenalan Budaya Indonesia Berbasis Android Menggunakan

Phonega., Makassar : UIN Alauddin Makassar.

[4] STMIK Pontianak. 2015. Pemanfaatan JQuery Mobile Untuk Merancang

Sistem Informasi Wisata Kuliner (Studi Kasus:Kota Pontianak). Pontianak

: STMIK Pontianak.

[5] Sulistyo, Basuki. 1996. Pengantar Kearsipan. Jakarta : Universitas

Terbuka.

[6] Sedarmayanti. 2008. Tata Kearsipan dengan Memanfaatkan Teknologi

Modern. Bandung : Mandar Maju.

[7] Adobe Phonegap. 2016. About Phonegap. http://phonegap.com/about/,

diakses tanggal 27 Mei 2016.

[8] M. Wargo, John. 2012. PhoneGap Essentials. New Jersey : Pearson

Education, Inc.

[9] Lee, William dan Xinran Wu, 2015, Cross-Platform Mobile Malware:

Write Once, Run Everywhere, Australia : Sophos.

[10] Broulik, Brad. 2011. Pro jQuery Mobile, New York : Apress.

[11] Sugiyono. 2009. Metode Penelitian Bisnis. Bandung: Alfabeta.

[12] Pressman, Roger S. 2014. Software engineering: a practitioner's

approach. New York : McGraw-Hill Education.