perancangan sistem informasi arsip salatiga berbasis web ......perancangan sistem informasi arsip...

Perancangan Sistem Informasi Arsip Salatiga Berbasis

Web dengan CodeIgniter dan Materialize

(Studi Kasus: Perpustakaan dan Arsip Daerah Kota

Salatiga)

Artikel Ilmiah

Peneliti :

Yosephin Dwi Tatalia (672012123)

Nina Setiyawati, S.Kom., M.Cs.

Program Studi Teknik Informatika

Fakultas Teknologi Informasi

Universitas Kristen Satya Wacana

Salatiga

Juli 2016




Salatiga)

Artikel Ilmiah

Diajukan kepada


untuk Memperoleh Gelar Sarjana Komputer

Peneliti :

Yosephin Dwi Tatalia (672012123)

Nina Setiyawati, S.Kom., M.Cs.

Program Studi Teknik Informatika



Salatiga

Juli 2016




Salatiga)

1) Yosephin Dwi Tatalia,

2) Nina Setiyawati



Jl. Diponegoro 52-60, Salatiga 50711, Indonesia

Email: 1)

[email protected], 2)

[email protected]

Abstract

The library and archive of Salatiga City Area provides information about the

collections of the archives about Salatiga City in the form of photo archives, textual

archives, book archives and documentary film archives. Storage of the information on the

Archive collection of Salatiga has not been centralized and are still separated so that the

process of management and the rediscovery of the archival experience difficulties as well

as information generated less rapidly and appropriately. Information archive of Salatiga

is only accessible in the scope of the library only cause limited access spaces for people

to get information about the archives of Salatiga. Based on those problems then made

design of web-based information system for archives of Salatiga. A method of designing

system using Prototype Model. The system is built using CodeIgniter framework with

architectural pattern MVC and Materialize CSS for building web responsive. The result

is a web-based information system that is able to manage archives and providing

information the collections of the archives of Salatiga to society.

Keyword : Archive, Information Systems, Web, CodeIgniter, Materialize.

Abstrak

Perpustakaan dan Arsip Daerah Kota Salatiga menyediakan informasi mengenai

koleksi arsip tentang Kota Salatiga dalam bentuk arsip foto, arsip tekstual, arsip buku dan

arsip film dokumenter. Penyimpanan informasi mengenai koleksi arsip Salatiga belum

terpusat dan masih terpisah sehingga proses pengelolaan dan penemuan kembali arsip

mengalami kesulitan serta informasi yang dihasilkan kurang cepat dan tepat. Informasi

arsip Salatiga hanya dapat diakses di ruang lingkup perpustakaan saja menyebabkan

terbatasnya ruang akses bagi masyarakat untuk mendapatkan informasi mengenai arsip

Salatiga. Berdasarkan masalah tersebut maka dilakukan perancangan sistem informasi

berbasis web untuk arsip Salatiga. Metode perancangan sistem menggunakan Prototype

Model. Sistem dibangun menggunakan framework CodeIgniter dengan pola arsiktektur

MVC serta Materialize CSS untuk membangun web responsive. Hasil yang diperoleh

adalah sebuah sistem informasi berbasis web yang mampu mengelola arsip dan

memberikan informasi mengenai koleksi arsip Salatiga kepada masyarakat.

Kata Kunci : Arsip, Sistem Informasi, Web, CodeIgniter, Materialize.

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

1. Pendahuluan

Perpustakaan dan Arsip Daerah Kota Salatiga merupakan tempat untuk

mencari ilmu dan mencari beberapa referensi buku untuk dibaca maupun

dipinjam. Perpustakaan dan Arsip Daerah Kota Salatiga juga menyediakan

informasi mengenai koleksi arsip tentang Kota Salatiga. Arsip adalah segala

kertas naskah, buku, foto, film, mikrofilm, rekaman suara, gambar peta, bagan,

atau dokumen-dokumen lain dalam segala macam bentuk dan sifatnya, aslinya

atau salinannya, serta dengan segala cara penciptaannya, dan yang dihasilkan atau

diterima oleh suatu badan, sebagai bukti atas tujuan, organisasi, fungsi-fungsi,

kebijaksanaan-kebijaksanaan, keputusan-keputusan, prosedur-prosedur,

pekerjaan-pekerjaan, atau kegiatan-kegiatan pemerintah yang lain, atau karena

pentingnya informasi yang terkandung di dalamnya [1]. Arsip Salatiga berisi

informasi mengenai makanan khas Salatiga, tradisi khas Salatiga, orang-orang

ternama yang berasal dari Salatiga serta Salatiga tempo dulu.

Koleksi arsip Salatiga yang ada meliputi arsip foto, arsip tekstual, arsip

buku dan arsip film dokumenter. Arsip buku dan arsip film dokumenter disimpan

dalam rak. Beberapa arsip foto dan arsip tekstual telah dialih media ke bentuk

arsip elektronik kemudian disimpan dalam harddisk. Penyimpanan arsip Salatiga

masih terpisah dan pendeskripsian arsip tersebut disimpan dalam buku atau

bentuk dokumen word atau excel. Hal tersebut menyebabkan proses pengelolaan

dan penemuan kembali arsip mengalami kesulitan serta informasi yang dihasilkan

kurang cepat dan tepat. Koleksi arsip mengenai Kota Salatiga tempo dulu yang

merupakan arsip kuno merupakan berkas yang dijaga kelestariannya karena

jumlahnya yang terbatas dan nilai sejarah yang terkandung didalamnya. Informasi

arsip Salatiga tersebut hanya dapat diakses di ruang lingkup perpustakaan saja.

Tidak semua arsip boleh dipinjamkan untuk dibawa ke luar wilayah perpustakaan

kecuali dengan surat izin, hanya beberapa arsip seperti arsip buku saja yang boleh

dipinjam. Hal tersebut menyebabkan terbatasnya ruang akses bagi masyarakat

untuk mendapatkan informasi mengenai arsip Salatiga.

Berdasarkan latar belakang masalah yang ada, maka dirancanglah sebuah

sistem informasi kearsipan berbasis web untuk arsip Salatiga sehingga

mempermudah layanan penyajian arsip, pengelolaan arsip, pengelompokan arsip

dan pencetakan laporan, serta mempercepat proses pencarian dan penemuan

kembali arsip ketika dibutuhkan. Sistem informasi tersebut bisa diakses kapan saja

dan dimana saja melalui web sehingga memudahkan masyarakat untuk

memperoleh informasi mengenai koleksi arsip-arsip tersebut tanpa harus datang

langsung ke perpustakaan. Dengan adanya sistem informasi arsip Salatiga ruang

akses bagi masyarakat untuk mendapatkan informasi mengenai koleksi arsip

tersebut menjadi lebih luas sehingga fungsinya mampu menggantikan fisik arsip.

Hal tersebut dapat menghindari hilangnya arsip serta mengurangi tingkat

kerusakan arsip.

Sistem informasi arsip Salatiga dibangun menggunakan framework

CodeIgniter dengan pola arsiktektur model view controller (MVC). Dengan

CodeIgniter perancangan sistem dapat berjalan lebih cepat dan lebih terstruktur

serta efisien dalam mengelola data yang banyak. Sistem informasi arsip Salatiga

juga dibangun dengan menerapkan Responsive Web Design yang merupakan suatu

2

konsep perancangan tampilan web yang akan meyesuaikan layar browser untuk

menampilkan website [2]. Pembuatan antarmuka sistem menggunakan framework

Materialize CSS untuk membangun web responsive. Materialize menggunakan

sistem grid 12 fluid kolom, sehingga web memiliki kemampuan merespon ukuran

halaman sesuai dengan lebar layar device yang digunakan dan dapat

menyesuaikan tampilan dari berbagai device tanpa merusak tampilan web.

Materialize menyediakan beberapa class untuk kustomisasi tampilan serta

menyediakan JavaScript API.

2. Kajian Pustaka

Pada penelitian dengan judul “Sistem Informasi Kearsipan” bahwa sistem

dibangun menggunakan basisdata MySQL untuk menyimpan data arsip sehingga

dapat digunakan kapan saja dan dirancang agar dapat membeikan informasi

kearsipan dengan lengkap. Adanya Sistem Informasi Kearsipan memudahkan

dalam melakukan update (edit, hapus dan cari) data yang diperlukan dengan

cepat, khususnya untuk arsip masuk dan keluar [3].

Pada penelitian lain dengan judul “Pembuatan Sistem Informasi Berbasis

Website pada SD Masjid Syuhada Yogyakarta Menggunakan Framework

CodeIgniter dan Bootstrap” bahwa pengembangan sistem yang dibuat dengan

framework CodeIgniter akan lebih mudah terkait dengan penulisan kode yang

lebih terstruktur. Dengan menggunakan Bootstrap, sistem dapat tampil sesuai

dengan ukuran media perambahnya baik menggunakan PC desktop maupun

device baik dari smartphone, tablet, dan laptop [4].

Berdasarkan penelitian terdahulu tersebut, maka dilakukan penelitian yang

menghasilkan sebuah sistem informasi arsip Salatiga berbasis web yang dibangun

dengan CodeIgniter dan Materialize. Sistem tersebut diharapkan dapat

mempercepat proses penemuan kembali arsip serta memberikan kemudahan

dalam mengelola arsip dan mengakses informasi mengenai arsip Salatiga melalui

berbagai device.

Arsip adalah rekaman kegiatan atau peristiwa dalam berbagai bentuk dan

media sesuai dengan perkembangan teknologi informasi dan komunikasi yang

dibuat dan diterima oleh lembaga negara, pemerintahan daerah, lembaga

pendidikan, perusahaan, organisasi politik, organiasi kemasyarakatan, dan

perseorangan dalam pelaksanaan kehidupan bermasyarakat, berbangsa, dan

bernegara Undang–Undang Nomor 43 Tahun 2009 pasal 1 [5]. Arsip adalah suatu

kumpulan dokumen yang disimpan secara sistematis karena mempunyai suatu

kegunaan agar setiap kali diperlukan dapat secara cepat ditemukan kembali [6].

Sistem informasi adalah suatu sistem disuatu organisasi yang

mempertemukan kebutuhan pengolahan transaksi harian, mendukung operasi,

bersifat menejerial dan kegiatan strategi dari suatu organisasi dan menyediakan

pihak luar tertentu dengan laporan-laporan yang diperlukan [7].

Secara umum, Sistem Informasi Kearsipan adalah suatu sistem informasi

yang mengelola data yang menyangkut pengumpulan, pengelolaan, pemusnahan,

pencetakan laporan dan pencarian kembali arsip yang berbasis komputer sehingga

mampu mengelola arsip dengan lebih efektif dan efesien dan pada akhirnya dapat

memberi masukan informasi secara aktual dan akurat tentang perumusan

3

kebijakan, strategi dan program pembangunan [8]. Sistem Informasi Kearsipan

merupakan perangkat-perangkat yang saling berinteraksi dalam pengolahan data

kearsipan untuk mencapai tujuan dari fungsi kearsipan, yaitu penyimpanan,

penataan, pengelompokan, pengendalian dan pemeliharaan kearsipan [9].

CodeIgniter adalah aplikasi open source yang berupa framework dengan

model MVC untuk membangun website dinamis dengan PHP. CodeIgniter

tergolong framework dengan ukuran kecil dan cukup mudah untuk dikuasai.

CodeIgniter juga datang dengan manual tergolong lengkap. Proses data mengalir

pada sistem yang menggunakan CodeIgniter dapat diilustrasikan pada gambar

berikut [10] :

Gambar 1 Alur Proses Data pada CodeIgniter [10]

Keterangan :

Index.php berfungsi sebagai pengendali awal, menginisialisasi sumber daya utama yang dibutuhkan CodeIgniter.

Router memeriksa paket HTTP request untuk menentukan aksi apa yang harus dilakukan oleh sistem.

Jika tersedia, maka halaman langsung dikirim ke browser, eksekusi sistem yang normal akan dilewati.

Security. Sebelum Application Controller dieksekusi, paket HTTP request dan semua data yang dikirimkan pengguna akan disaring terlebih dahulu

oleh Security Class.

Application Controller menginisialisasi model, library utama, helpers dan semua sumber daya yang dibutuhkan untuk setiap request.

Antarmuka aplikasi (view) yang sudah disiapkan dikirimkan ke browser. Jika caching diaktifkan, maka view akan disimpan sementara untuk request

yang sama berikutnya.

Materialize adalah sebuah responsive CSS framework yang dibangun

berdasarkan konsep material design, yaitu penggabungan prinsip-prinsip desain

klasik yang dipadukan dengan inovasi dan teknologi [11]. Materialize CSS telah

dibuat berbagai macam plugin yang dikemas menjadi suatu framework yang baik

secara tampilan dan fungsi. Framework responsive ini menggunakan system grid

12 fluid kolom dan menyediakan beberapa class untuk kustomisasi tampilan tabel,

button, pre-loaders dan lain-lain serta menyediakan JavaScript API untuk

menampilkan drop downs, modals, parallax dan tabbed navigation.

4

3. Metode dan Perancangan Sistem

Dalam merancang sistem informasi arsip Salatiga melalui tahapan penelitian

yang terbagi dalam empat tahapan, yaitu: 1) Identifikasi masalah, 2) Perancangan

sistem, 3) Implementasi sistem, dan 4) Pengujian sistem dan analisis hasil

pengujian.

Identifikasi Masalah

Perancangan Sistem

Implementasi Sistem

Pengujian Sistem dan Analisis Hasil Pengujian

Gambar 2 Tahapan Penelitian

Tahapan penelitian pada Gambar 2 dapat dijelaskan sebagai berikut: 1)

Tahap pertama: Identifikasi Masalah, pada tahap ini dilakukan identifikasi

terhadap permasalahan yang ada dengan melakukan wawancara, mendapatkan

data dan literatur yang terkait dengan sistem kearsipan, framework CodeIgniter

dan Materialize CSS serta mengamati proses bisnis terkait proses pengarsipan

arsip Salatiga. 2) Tahap kedua, Perancangan Sistem, tahap ini dilakukan

perancangan sistem yang meliputi perancangan proses menggunakan diagram

Unified Modelling Language (UML) dan perancangan database. Perancangan

proses menggunakan UML meliputi use case diagram, activity diagram, dan class

diagram. 3) Tahap ketiga: Implementasi Sistem, yaitu membuat sistem informasi

berbasis web menggunakan framework CodeIgniter dan Materialize CSS sesuai

perancangan proses pada tahap kedua. 4) Tahap keempat: Pengujian sistem dan

Analisis Hasil Pengujian, selanjutnya dari hasil implementasi akan dilakukan

pengujian untuk melihat apakah sistem yang telah dibuat sudah sesuai dengan

yang diharapkan atau tidak ada error, jika belum sesuai maka akan dilakukan

perbaikan.

Pada tahap pengidentifikasi masalah, wawancara dilakukan dengan cara

tanya jawab dengan Seksi Bina Perpustakaan dan Kearsipan di Perpustakaan dan

Arsip Daerah Kota Salatiga. Berdasarkan hasil wawancara permasalahan yang ada

didefinisikan sebagai berikut: 1) Dibutuhkannya sistem untuk mengelola arsip

Salatiga meliputi arsip foto, arsip tekstual, arsip buku dan arsip film dokumenter.

2) Dibutuhkannya sistem yang mempermudah layanan penyajian, pengelompokan

dan pencetakan laporan arsip Salatiga, serta mempercepat proses pencarian dan

penemuan kembali arsip ketika dibutuhkan. 3) Belum adanya sistem informasi

yang memudahkan masyarakat untuk memperoleh informasi mengenai koleksi

arsip-arsip Salatiga yang bisa diakses kapan saja dan dimana saja melalui web.

Selain itu dari hasil wawancara didapatkan proses bisnis terkait proses

pengarispan arsip Salatiga sebagai berikut:

5

Mulai

Arsiparis mengklasifikasi dan

mengidentifikasi arsip

Hasil dicatat dan disimpan dalam buku

atau dokumen office

Alih media

arsip?

Scanning arsip

Arsip disimpan dalam rak

atau filling cabinet

Arsip disimpan dalam

harddisk atau DVD

Selesai

Tidak

Ya

Gambar 3 Flowchart Proses Pengarsipan Arsip Salatiga

Pengarsipan dilakukan oleh arsiparis yaitu seseorang yang memiliki

kompetensi di bidang kearsipan yang mempunyai fungsi, tugas dan tanggung

jawab melaksanakan kegiatan kearsipan. Arsiparis melakukan pengklasifikasian

dan pengidentifikasian terhadap suatu arsip. Sebelum dibuat sistem informasi

kearsipan, hasil identifikasi mengenai arsip tersebut dicatat dalam buku atau

dalam dokumen office (word atau excel). Beberapa arsip terkait arsip Salatiga

tempo dulu seperti arsip foto dan arsip textual dialih mediakan dari arsip

konvesional menjadi arsip eletronik agar kerusakan terhadap arsip dapat

diminimalkan ketika digunakan kembali. Metode yang digunakan dalam mengalih

mediakan arsip tersebut dengan metode scanning. Alih media dengan scanning

atau memindai dokumen akan menghasilkan data gambar yang dapat disimpan di

komputer. Arsip yang sudah diklasifikasikan dan diidentifikasi disimpan dalam

tempat penyimpanan seperti rak atau filling cabinet untuk arsip konvesional,

sedangkan untuk arsip elektronik disimpan dalam harddisk atau DVD.

Metode yang akan digunakan untuk perancangan Sistem Informasi Arsip

Salatiga berbasis web adalah Prototype Model dimana suatu prototype suatu

bentuk perkiraan awal dari suatu sistem dibangun, diuji, lalu dikerjakan ulang

sesuai kebutuhan hingga akhirnya tercapai suatu prototype yang dapat diterima.

Prototype Model adalah metode yang digunakan untuk mendefinisikan

serangkaian sasaran umum bagi perangkat lunak serta mengidentifikasi kebutuhan

input, pemrosesan, ataupun output detail [12].

6

Gambar 4 Prototype Model [12]

Tahap-tahap yang ada pada Gambar 4 adalah listen to customer. Pada tahap

ini dilakukan wawancara dengan Seksi Bina Perpustakaan dan Kearsipan di

Perpustakaan dan Arsip Daerah Kota Salatiga untuk mengumpulkan kebutuhan

yang diperlukan dalam pembuatan sistem yaitu kebutuhan input sistem berupa

atribut-atribut data tiap bentuk arsip. Berdasarkan data dan kebutuhan sistem yang

telah dikumpulkan lalu dilakukan tahap yang kedua yaitu build/revise mock-up.

Pada tahap ini dilakukan proses perancangan sistem sesuai dengan kebutuhan

pengguna. Perancangan sistem meliputi perancangan proses dan perancangan

database. Perancangan proses dalam sistem menggunakan diagram Unified

Modelling Language (UML). Kemudian dilakukan proses pembuatan prototype

sesuai dengan hasil perancangan yang telah dibuat. Pada tahap selanjutnya hasil

dari prototype kemudian dilakukan customer test-drives mock-up, yaitu sistem

akan diberikan kepada pihak yang bersangkutan untuk dilakukan pengujian

apakah sistem sudah sesuai dengan yang dibutuhkan. Hasil dari customer test-

drive mock-up akan digunakan untuk pengembangan prototype selanjutnya. Tiga

tahapan prototype dilakukan terus berulang sampai prototype yang dibangun

sudah sesuai dengan kebutuhan pengguna. Tahapan pada metode prototype

berakhir jika prototype yang dibangun sudah sesuai dengan kebutuhan pengguna

dan siap untuk diimplementasikan.

Dalam pembangunan sistem, proses ini dilakukan sampai prototype 3 yaitu:

1) Prototype 1 berupa sistem yang dapat mengelola arsip (insert, update dan

delete) serta melakukan pencarian arsip. Prototype 1 kemudian diserahkan kepada

pengguna untuk diuji. Atas permintaan pengguna dilakukan perbaikan pada

pengungahan file gambar dengan memberi watermark secara otomatis pada

gambar saat diunggah. 2) Pada prototype 2 dilakukan penambahan fitur publish

dimana arsip yang ada pada sistem dapat diakses oleh masyarakat atau tidak

melalui web. 3) Pada prototype 3 dilakukan penambahan fasilitas cetak report dan

statistik hit pembaca tiap bentuk arsip yang diakses masyarakat melalui web. Pada

prototype 3 sistem yang dibangun sudah sesuai dengan kebutuhan pengguna.

Perancangan proses menggunakan UML bertujuan untuk menggambarkan

secara jelas alur yang ada pada sistem yang akan dibangun. Perancangan

menggunakan UML meliputi use case diagram, activity diagram dan class

diagram. Use case diagram menampilkan aktor, use case, dan hubungan antara

use case. Perancangan use case diagram dibuat berdasarkan aktivitas yang

dilakukan oleh admin dan masyarakat.

7

Insert arsip foto

Delete arsip fotoUpdate arsip foto

Insert arsip fillm

Delete arsip filmUpdate arsip film

Insert arsip buku

Update arsip buku Delete arsip buku

Insert arsip tekstual

Update arsip tekstual Delete arsip tekstual

Mengelola arsip foto

Menambah admin

Mengelola arsip film

Mengelola arsip buku

Mengelola arsip tekstual

Mencetak laporan

Mengganti password

Melihat saran

Admin Melihat arsip film

Melihat arsip foto

Melihat arsip buku

Masyarakat

Melihat arsip tekstual

Gambar 5 Use Case Diagram Sistem

Gambar 5 menunjukkan use case diagram dari sistem informasi arsip

Salatiga. Use case diagram tersebut mempunyai dua aktor yaitu admin dan

masyarakat. Aktor admin dapat melakukan aktivitas ganti password, tambah

admin, melihat saran pengguna aplikasi Arsip Salatiga Mobile, mencetak laporan

serta dapat mengelola data seperti menambah, mengubah data, menghapus data

dan melihat data. Sedangkan aktor masyarakat hanya dapat melihat koleksi arsip

foto, arsip tekstual, arsip buku dan arsip film dokumenter yang ditampilkan dalam

sistem informasi arsip Salatiga.

Activity diagram merupakan teknik untuk menggambarkan logika prosedur,

proses bisnis, dan jalur kerja [13]. Pada tahap ini perancangan activity diagram

dibuat berdasarkan aktifitas yang dilakukan oleh masyarakat dan admin.

Gambar 7 Activity Diagram Masyarakat

8

Gambar 7 menunjukkan aktivitas-aktivitas yang dapat dilakukan masyarakat

pada sistem. Masyarakat mengakses halaman web kemudian sistem menampilkan

halaman utama yang berisi menu informasi koleksi arsip foto, arsip tekstual, arsip

buku dan arsip film. Masyarakat memilih informasi arsip yang ada kemudian

sistem menampilkan informasi yang diminta oleh masyarakat.

Gambar 6 Activity Diagram Admin

Gambar 6 menunjukkan aktivitas-aktivitas yang dapat dilakukan admin pada

sistem. Admin mulai masuk ke dalam sistem dengan memasukkan username dan

password kemudian diproses. Jika valid maka sistem akan menampilkan halaman

utama aplikasi, jika salah akan dikembalikan ke halaman login hingga valid.

Setelah masuk, aplikasi sistem akan menampilkan halaman menu admin. Admin

dapat melihat dan mengelola arsip meliputi tambah, ubah dan hapus data yang

kemudian disimpan dalam database. Admin juga dapat menambah admin,

mengganti password, melihat saran dari pengguna aplikasi Arsip Salatiga Mobile

serta mencetak laporan. Admin dapat melanjutkan aktifitas lagi atau keluar dari

sistem.

Class diagram merupakan diagram yang digunakan untuk menampilkan

kelas yang ada dalam suatu sistem serta menggambarkan relasi antar kelas

tersebut. Class diagram sistem yang terdapat pada rancangan sistem informasi

arsip Salatiga ditunjukkan pada Gambar 8.

9

Gambar 8 Class Diagram Sistem

Terdapat relasi yang terjadi antara kelas view terhubung ke kelas controller.

Sedangkan kelas controller dalam mengakses database harus melalui kelas model.

Relasi antar tabel yang terdapat di dalam database sistem yang dibuat

memiliki fungsi menyusun sebuah struktur database. Gambar 9 menunjukkan

relasi antar tabel untuk sistem informasi arsip Salatiga.

Gambar 9 Relasi Antar Tabel

Tabel yang digunakan pada sistem adalah tabel pengarang, tabel penerbit,

tabel film, tabel foto, tabel tekstual, tabel kategori, tabel admin dan tabel saran.

Tabel pengarang memiliki relasi dengan tabel buku dengan jenis relasi one to

many. Tabel penerbit memiliki relasi dengan tabel buku dengan jenis relasi one to

many. Tabel kategori memiliki relasi dengan tabel buku, tabel film, tabel foto dan

10

tabel tekstual dengan jenis relasi one to many. Tabel saran dan tabel admin tidak

memiliki relasi antar tabel.

4. Hasil dan Pembahasan

Hasil implementasi sistem berdasarkan perancangan yang telah dibuat

dijelaskan sebagai berikut. Terdapat dua pengguna sistem, yaitu admin dan

masyarakat. Admin terlebih dahulu harus melakukan login untuk masuk ke

halaman admin.

Gambar 10 Halaman Beranda Admin

Gambar 10 menunjukkan halaman beranda. Admin memiliki hak akses

penuh terhadap sistem yaitu melihat serta mengelola arsip (menambah, mengubah

dan menghapus). Informasi mengenai arsip Salatiga yang sebelumnya terpisah

menjadi terpusat karena disimpan dalam database server. Arsip disimpan dan

dikelompokkan berdasarkan bentuk dan kategori arsip. Admin juga dapat melihat

saran pengguna yang dikirim melalui aplikasi Arsip Salatiga Mobile, mencetak

laporan, melihat statistik hit pembaca mengubah password serta menambah

admin.

Gambar 11 Halaman Arsip Foto

11

Gambar 11 menunjukkan halaman arsip foto. Di dalam halaman tersebut

terdapat button untuk mengubah dan menghapus data. Admin dapat melihat

koleksi arsip per kategori. Selain itu admin juga dapat melakukan pencarian arsip

secara spesifik.

Gambar 13 Halaman Tambah Arsip Foto

Gambar 13 menunjukkan halaman untuk menambah arsip foto, admin akan

memasukkan judul foto, kategori, tahun foto, sumber foto, deskripsi foto, file foto

serta memberi perintah untuk menampilkan atau tidak menampilkan arsip kepada

masyarakat. Perintah yang digunakan untuk menambah arsip foto dapat dilihat

pada Kode Program 1.

Kode Program 1 Perintah untuk Menambah Arsip pada Controller C_Foto

01 function insert() {

02 if ($this->session->userdata('logged_in') == true) {

03 $this->load->library('upload');

04 $config['upload_path'] = './userfile/foto/';

05 $config['allowed_types'] = 'jpg|png|JPEG';

06 $config['file_name'] = url_title($this->input->post('gambar'));

07 $this->upload->initialize($config);

08 if (!$this->upload->do_upload('gambar')) {

09 echo "alert('" . $this->upload->display_errors() . "');

10 ";

11 redirect('admin/C_Foto/tambah');

12 } else {

13 $tp = $this->upload->data();

14 $ori = $tp['raw_name'] . $tp['file_ext'];

15 $tnd = $tp['raw_name'] . '_water' . $tp['file_ext'];

12

16 $mr = $tp['full_path'] . $tp['file_name'];

17 $tn = $tp['file_path'] . $tnd;

18 $ubah = $this->ubahUkuranFoto($tp['full_path']);

19 $mark = $this->watermarking($tn);

20 $imgOri = $ori;

21 $imgWater = $tnd;

22 $judul = addslashes($this->input->post('judul'));

23 $tahun = $this->input->post('tahun');

24 $kategori = $this->input->post('kategori');

25 $desk = nl2br($this->input->post('deskripsi'));

26 $deskripsi = addslashes($desk);

27 $sumber = addslashes($this->input->post('sumber'));

28 $visibility = $this->input->post('visibility');

29 $hasil = $this->M_Foto->insert($judul, $kategori, $tahun,

30 $deskripsi, $sumber, $imgOri, $imgWater, $visibility);

31 if ($hasil) {

32 echo "alert('Data berhasil ditambahkan!');

33 window.location.href = '". base_url().

34 "index.php/admin/C_Foto/viewAll'";

35 } else {

36 echo "alert('Data gagal ditambahkan!');

37 window.location.href = '". base_url().

38 "index.php/admin/C_Foto/tambah'";

39 }

40 }

41 } else {

42 redirect('C_Login/index', 'refresh');

43 }

44 }

Library upload digunakan untuk mengunggah file foto ke direktori

./userfile/foto/ di server. Atribut-atribut data yang dikirim dari form dengan

method post kemudian disimpan ke dalam variabel-variabel. Kemudian variabel-

variabel tersebut dikirimkan sebagai parameter fungsi insert() di model M_Foto.

Kode Program 2 Perintah untuk Insert Foto pada Model M_Foto

01 function insert($jdl, $idKat, $thn, $desc, $smbr, $imgOri, $imgWater, $vis){

02 $query = $this->db->set('judul_foto', $jdl)

03 ->set('id_kategori', $idKat)

04 ->set('tahun_foto', $thn)

05 ->set('deskripsi_foto', $desc)

06 ->set('sumber_foto', $smbr)

07 ->set('url_foto', $imgOri)

08 ->set('url_watermark', $imgWater)

09 ->set('visibility', $vis)

10 ->set('input_date', 'NOW()', FALSE)

11 ->insert('tb_foto');

12 return $query;

13 }

Pada Kode Program 2 fungsi insert() berfungsi untuk melakukan insert data

ke dalam Tabel Foto. Setelah proses insert data selesai akan muncul peringatan

bahwa data berhasil disimpan atau gagal disimpan.

Sebelum data di-input ke database, file foto yang telah diunggah akan

diubah ukurannya terlebih dahulu. Perintah yang digunakan untuk mengubah

ukuran file foto dapat dilihat pada Kode Program 3.

Kode Program 3 Perintah untuk Mengubah Ukuran Foto pada Controller C_Foto

01 function ubahUkuranFoto($tp) {

02 $config ['image_library'] = 'gd2';

03 $config ['source_image'] = $tp;

04 $config ['create_thumb'] = TRUE;

13

05 $config['thumb_marker'] = '_water';

06 $config ['maintain_ratio'] = TRUE;

07 $config ['width'] = 1028;

08 $config ['height'] = 780;

09 $this->load->library('image_lib', $config);

10 return $this->image_lib->resize();

11 }

Pada Kode Program 3 fungsi ubahUkuranFoto() pada controller C_Foto

dipanggil di fungsi insert() dengan parameter file foto yang akan diubah ukuran.

Library image_lib akan memanggil fungsi resize() untuk mengubah ukuran file

foto tersebut.

Gambar 14 File Foto yang Diberi Watermark

Gambar 14 menunjukkan file foto yang diunggah ke direktori ./userfile/foto/

di server telah diberi watermark. Perintah yang digunakan untuk memberi

watermark pada file foto dapat dilihat pada Kode Program 4.

Kode Program 4 Perintah untuk Memberi Watermark pada Controller C_Foto

01 function watermarking($gb) {

02 $config['source_image'] = $gb;

03 $config['wm_type'] = 'overlay';

04 $config['wm_overlay_path'] = './assets/images/watermark.png';

05 $config['wm_font_color'] = '00000';

06 $config['wm_vrt_alignment'] = 'middle';

07 $config['wm_hor_alignment'] = 'center';

08 $config['wm_padding'] = 5;

09 $config['wm_x_transp'] = 0;

10 $config['wm_y_transp'] = 5;

11 $config['thumb_marker'] = '';

12 $config['wm_opacity'] = 25;

13 $this->image_lib->initialize($config);

14 $this->image_lib->watermark();

15 }

File foto yang yang diunggah diberi watermark berupa gambar dengan tipe

.png. Fungsi watermarking() pada controller C_Foto dipanggil di fungsi insert()

dengan parameter file foto yang akan diberi watermark. Library image_lib akan

memanggil fungsi watermark() untuk memberi watermark file tersebut.

14

Gambar 15 Grafik Hit Pembaca

Gambar 15 menunjukkan grafik hit pembaca tiap bentuk arsip. Dalam

membuat grafik hit pembaca digunakan plugin Highchart. Perintah yang

digunakan untuk menampilkan grafik hit pembaca dapat dilihat pada Kode

Program 5.

Kode Program 5 Perintah untuk Menampilkan Grafik Hit Pembaca

01

02 $(document).ready(function() {

03 $('#container').highcharts({

04 chart: { type: 'column',

06 options3d: { enabled: true, alpha: 15, beta: 15,

07 viewDistance: 25, depth: 40 } },

08 title: { text: 'Statistik Hit Pembaca Arsip Salatiga'},

09 xAxis: { categories: ['Koleksi Arsip'] },

10 yAxis: { allowDecimals: false, min: 0, 19

11 title: { text: 'Jumlah Hit' } },

12 tooltip: { headerFormat: '{point.key}
',

13 pointFormat: span style="color:{series.color}">\u25CF

14 {series.name}: {point.y} / {point.stackTotal}' },

15 plotOptions: { column: { stacking: 'normal', depth:20 } },

16 series: [{ name: 'Arsip Buku', data: [],

17 stack: 'Arsip Buku' },

18 { name: 'Arsip Foto', data: [],

19 stack: 'Arsip Foto' },

20 { name: 'Arsip Film Dokumenter', data: [],

21 stack: 'Arsip Film Dokumenter' },

22 { name: 'Arsip Tektual', data: [],

23 stack: 'Arsip Tektual' }, }]

24 });

25 });

26

Pada Kode Program 5 script javascript untuk menampilkan grafik pembaca

diletakkan di view chart.php. Untuk mendapatkan data series fungsi view() pada

controller C_Chart memanggil fungsi jmlHit() pada model M_Foto, M_Buku,

M_Film dan M_Teks sehingga didapatkan jumlah hit pembaca tiap bentuk arsip

yang kemudian ditampilkan pada halaman view.

15

Gambar 16 Tampilan Halaman Arsip Foto

Gambar 16 menunjukkan tampilan halaman arsip foto pada sisi masyarakat.

Masyarakat dapat mengakses koleksi arsip melalui halaman tersebut. Masyarakat

hanya bisa mengakses koleksi arsip tertentu saja karena admin memiliki

wewenang untuk menampilkan atau menyembunyikan arsip. Masyarakat juga

dapat melihat detail informasi tiap arsip.

Gambar 17 Hasil Pencarian Arsip

Gambar 17 menunjukkan hasil pencarian arsip. Sistem dilengkapi dengan

fasilitas pencarian arsip. Sistem akan menampilkan hasil pencarian sesuai dengan

kata kunci yang di-input oleh pengguna. Dengan adanya fasilitas pencarian

mempermudah proses temu kembali arsip. Informasi yang dihasilkan lebih cepat,

tepat dan lengkap tanpa harus melakukan pencarian langsung pada tempat

penyimpanan fisik arsip.

16

Gambar 18 Tampilan Sistem pada Smartphone

Gambar 18 menunjukkan tampilan sistem bila diakses pada smartphone.

Pembuatan antarmuka sistem menggunakan Materialize CSS untuk membangun

web responsive sehingga web dapat menyesuaikan tampilan dari berbagai device

sesuai dengan lebar layar device yang digunakan tanpa merusak tampilan web.

Materialize menggunakan sistem grid 12 kolom. Pada lebar kurang dari sama

dengan 992px yaitu pada lebar layar smartphone/tablet, kolom akan otomatis

menjadi fluid yang mengisi seluruh lebar viewport dan kolom akan tersusun

menumpuk secara vertikal.

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 [14]. Hasil dari pengujian blackbox

ditampilkan pada Tabel 1.

Tabel 1 Hasil Pengujian Blackbox

Fungsi yang diuji Output yang

diharapkan

Output dari Sistem Status

Pengujian

Login admin

Login berhasil

Sistem akan memberikan

peringatan apabila tidak mengisi

username atau password. Apabila

username dan password salah,

maka gagal login. Apabila benar,

maka sukses login dan dapat

mengakses halaman utama

Valid

Mengubah

password

Password berhasil

diubah di dalam

database

Jika input salah satu dari

password lama, password baru

atau konfirmasi password baru

salah, maka akan muncul pesan

update password gagal. Apabila

benar, maka update password

sukses

Valid

17

Menambah admin

baru

Admin berhasil

ditambahkan ke

dalam database

Admin baru berhasil ditambahkan

ke dalam database

Valid

Melihat saran

pengguna aplikasi

Arsip Salatiga

Mobile

Saran berhasil

ditampilkan

Sistem berhasil menampilkan

saran pengguna aplikasi Arsip

Salatiga Mobile

Valid

Menambah koleksi

arsip buku, arsip

foto, arsip film dan

arsip tekstual

Data berhasil

ditambahkan ke

dalam database

Koleksi arsip berhasil

ditambahkan ke dalam database.

Valid

Mengubah koleksi

arsip buku, arsip


arsip tekstual

Data berhasil diubah

di dalam database

Koleksi arsip berhasil diubah ke

dalam database

Valid

Menghapus koleksi

arsip buku, arsip


arsip tekstual

Data berhasil

dihapus di dalam

database

Koleksi arsip berhasil dihapus di

dalam database

Valid

Pencarian koleksi

arsip (temu kembali

arsip)

Data hasil pencarian

berhasil ditampilkan


koleksi arsip sesuai dengan kata

kunci pencarian

Valid

Pencetakan laporan Data ditampilkan

pada laporan

Sistem berhasil menghasilkan

laporan koleksi arsip dalam

bentuk file .pdf

Valid

Melihat statistik hit

pembaca

Chart hit pembaca

berhasil ditampilkan


chart hit pembaca. Chart berubah

apabila hit pembaca bertambah

Valid

User melihat

koleksi arsip buku,

arsip foto, arsip film

dan arsip tekstual

Data berhasil

ditampilkan


daftar koleksi arsip baik semua

maupun per kategori dan

menampilkan informasi koleksi

arsip secara detail

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. Pengujian dilakukan

dengan mengajukan kuesioner yang berisi 5 pertanyaan kepada 30 responden

yang menggunakan web Sistem Informasi Arsip Salatiga pada sisi masyarakat.

Responden berada pada usia 15 tahun sampai 31 tahun. Responden terdiri dari

pelajar SMP, SMA, mahasiswa dan umum. Hal yang diuji dan hasil pengisian

kuesioner dapat dilihat pada Tabel 2.

18

Tabel 2. Hasil Pengisian Kuesioner untuk Pengujian Responden

No Pertanyaan Sangat

Tidak

Setuju

Tidak

Setuju

Cukup

Setuju

Setuju Sangat

Setuju

1. Sistem Informasi Arsip Salatiga

mudah digunakan

0 0 0 4 26

2. Sistem mampu memberikan

informasi mengenai koleksi Arsip

Salatiga

0 0 2 18 10

3. Pencarian koleksi arsip pada sistem

berjalan dengan baik

0 0 0 7 23

4. Sistem memberikan kemudahan

dalam akses informasi mengenai

Arsip Salatiga

0 0 0 5 25

5. Tampilan web Sistem Informasi

Arsip Salatiga menarik

0 0 0 2 28

Hasil analisis pengujian untuk pertanyaan 1 menunjukkan sebanyak 13,33%

responden menjawab setuju dan 86,67% responden menjawab sangat setuju. Jadi

disimpulkan bahwa sistem mudah untuk digunakan.


responden menjawab cukup setuju, 60,00% responden menjawab setuju dan

33,33% menjawab sangat setuju. Jadi disimpulkan bahwa sistem mampu

memberikan informasi mengenai koleksi Arsip Salatiga.



disimpulkan bahwa fungsi pencarian koleksi arsip pada sistem berjalan dengan

baik.



disimpulkan bahwa sistem memberikan kemudahan dalam mengakses informasi

mengenai arsip Salatiga.



disimpulkan bahwa sistem memiliki tampilan yang menarik.

Selain melakukan pengujian black box dan pengujian responden, juga

dilakukan pengujian sistem melalui wawancara dengan arsiparis di Perpustakaan

dan Arsip Daerah Kota Salatiga. Adapun hasil atas pengujian berdasarkan

wawancara yang dilakukan didapatkan bahwa sistem memberi kemudahaan dalam

pengelolaan arsip Salatiga. Sistem dapat digunakan sebagai media untuk

penyimpanan data arsip Salatiga yang sebelumnya masih terpisah. Proses

pencarian arsip menjadi lebih cepat dan tepat dari sebelum dibuat sistem.

Kerusakan arsip terlebih untuk arsip yang bersifat kuno dapat berkurang karena

arsip dapat dilihat dan diakses melalui web dalam waktu yang bersamaan.

19

5. Simpulan

Berdasarkan uraian di atas, dapat ditarik kesimpulan bahwa Sistem

Informasi Arsip Salatiga berbasis web dibangun menggunakan framework

CodeIgniter dengan menerapkan pola arsiktektur model view controller (MVC)

sehingga sistem yang dibangun lebih terstruktur dan mudah dalam melakukan

proses pengkodean. Antarmuka sistem dibangun menggunakan framework

Materialize CSS sehingga menghasilkan tampilan web yang responsive (dapat

menyesuaikan tampilan berdasarkan ukuran browser). Sistem mampu

memberikan kemudahan dalam proses pengelolaan arsip (insert, update dan

delete). Penyimpanan informasi mengenai koleksi arsip lebih terpusat dan tidak

terpisah karena karena tersimpan dalam satu database. Adanya fasilitas pencarian

arsip membuat proses temu kembali arsip lebih cepat dan tepat. Sistem yang telah

dibangun juga dapat memberikan kemudahan dalam mengakses informasi

mengenai koleksi arsip Salatiga yang ada di Perpustakaan dan Arsip Daerah Kota

Salatiga. Akses informasi mengenai Arsip Salatiga dapat dilakukan oleh lebih dari

satu pengguna dalam waktu yang bersamaan. Saran untuk pengembangan sistem

selanjutnya adalah adanya sistem backup secara berkala dan secara otomatis yang

dilakukan oleh sistem serta perlindungan terhadap segala bentuk penghapusan

data dengan cara membuat sebuah tempat penampungan arsip yang sudah

dihapus.

6. Pustaka

[1] Ageng, Fanny Rochmad. 2009. Prosedur Pelaksanaan Penyimpanan Arsip

Pada PT. Bank Panin Tbk Kantor Cabang Pembantu Solo. Surakarta:

Fakultas Ilmu Sosial Dan Ilmu Politik, Universitas Sebelas Maret.

[2] Pranata, Rudy, & Wahyono, Teguh. 2013. Penerapan Responsive Web Design

pada Sistem Informasi Penilaian Akademik Siswa (Studi Kasus: SMP Kristen

Satya Wacana). Salatiga: Fakultas Teknologi Informasi, Universitas Kristen

Satya Wacana.

[3] Irmawati, Dessy, & Indrihapsari, Yuniar. 2012. Sistem Informasi Kearsipan.

Fakultas Teknik, Universitas Negeri Yogyakarta.

[4] Utomo, Sigit Prasetyo Karisma. 2014. Pembuatan Sistem Informasi Berbasis

Website pada SD Masjid Syuhada Yogyakarta Menggunakan Framework

CodeIgniter dan Bootstrap. Yogyakarta: Jurusan Teknik Informatika, STMIK

AMIKOM.

[5] Undang-undang Republik Indonesia Nomor 43 Tahun 2009 Tentang

Kearsipan.

[6] Gie, The Liang. 2000. Administrasi Perkantoran Modern. Yogyakarta:

Liberty.

[7] Jogiyanto, H. M. 2005. Analisis dan Desain Sistem Informasi. Yogyakarta:

Andi.

[8] Nurulita, Annisa. 2015. Sistem Pengelolaan Arsip Dinamis Pada

Administrasi Perkantoran Di Biro Umum Sekretariat Jenderal Kementerian

Pekerjaan Umum Republik Indonesia. Jakarta: Fakultas Adab Dan

Humaniora, Universitas Islam Negeri Syarif Hidayatullah.

20

[9] Wardana, Tartib. 2013. Analisis Dan Perancangan Sistem Informasi

Kearsipan SMA N 11 Purworejo. Yogyakarta: STMIK AMIKOM.

[10] CodeIgniter. 2014. Application Flow Chart.

http://www.codeigniter.com/user_guide/overview/appflow.html diakses pada

1 Maret 2016

[11] Materialize CSS. 2014. Material Design.

http://materializecss.com/about.html diakses pada 1 Maret 2016

[12] Pressman, Roger, 2001. Software Engineering a Practitioner’s Approach.

New York : McGraw-Hill Higher Education.

[13] Patty, Menly, Pakereng, M. A. Ineke, Bezaleel, Michael. 2013. Perancangan

dan Implementasi Sistem Informasi Kebudayaan Maluku Berbasis Web.

Salatiga: Fakultas Teknologi Informasi, Universitas Kristen Satya Wacana.

[14] Nandiwardhana, Indrayasa, Yulianto J. P., Sri, Prestiliano, Jasson. 2011.

Pengembangan Physics Game “FIX and FIT” Berbasis Android Smartphone

Menggunakan ActionScript 3.0 dan QuickBox2D. AITI: FTI Jurnal Teknologi

Informasi. 8(2) 117-132.

perancangan sistem informasi arsip salatiga berbasis web ......perancangan sistem informasi arsip...

Documents