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
Perancangan Sistem Informasi Arsip Salatiga Berbasis
Web dengan CodeIgniter dan Materialize
(Studi Kasus: Perpustakaan dan Arsip Daerah Kota
Salatiga)

Artikel Ilmiah
Diajukan kepada
Fakultas Teknologi Informasi
untuk Memperoleh Gelar Sarjana Komputer

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
Perancangan Sistem Informasi Arsip Salatiga Berbasis
Web dengan CodeIgniter dan Materialize
(Studi Kasus: Perpustakaan dan Arsip Daerah Kota
Salatiga)
1)
Yosephin Dwi Tatalia, 2) Nina Setiyawati
Fakultas Teknologi Informasi
Universitas Kristen Satya Wacana
Jl. Diponegoro 52-60, Salatiga 50711, Indonesia
Email: 1) 672012123@student.uksw.edu, 2) nina.setiyawati@staff.uksw.edu

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

1
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

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

3
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:

4
 Mulai

Arsiparis mengklasifikasi dan

mengidentifikasi arsip

Hasil dicatat dan disimpan dalam buku

atau dokumen office

Alih media Arsip disimpan dalam rak

Tidak
arsip? atau filling cabinet

Ya

Scanning arsip

Arsip disimpan dalam

harddisk atau DVD

Selesai

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

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

6
 Update arsip foto Delete arsip foto

<<extend>> <<extend>>

<<extend>> <<extend>>

Insert arsip foto Mengelola arsip foto Melihat arsip foto

Melihat saran

Mencetak laporan
Insert arsip fillm

<<extend>>

<<extend>>
Mengganti password

Mengelola arsip film Melihat arsip film

Admin Masyarakat

<<extend>> <<extend>>

Menambah admin

Update arsip film Delete arsip film

<<extend>> <<extend>> <<extend>> <<extend>>

Insert arsip buku Mengelola arsip buku Melihat arsip buku Insert arsip tekstual Mengelola arsip tekstual Melihat arsip tekstual

<<extend>> <<extend>> <<extend>> <<extend>>

Update arsip buku Delete arsip buku Update arsip tekstual Delete 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

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

8
 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

9
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

10
 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 "<script>alert('" . $this->upload->display_errors() . "');
10 </script>";
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'];

11
 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 "<script>alert('Data berhasil ditambahkan!');
33 window.location.href = '". base_url().
34 "index.php/admin/C_Foto/viewAll'</script>";
35 } else {
36 echo "<script>alert('Data gagal ditambahkan!');
37 window.location.href = '". base_url().
38 "index.php/admin/C_Foto/tambah'</script>";
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;

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

13
 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 <script type="text/javascript">
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: '<b>{point.key}</b><br>',
13 pointFormat: span style="color:{series.color}">\u25CF</span>
14 {series.name}: {point.y} / {point.stackTotal}' },
15 plotOptions: { column: { stacking: 'normal', depth:20 } },
16 series: [{ name: 'Arsip Buku', data: [<?php echo $jBuku; ?>],
17 stack: 'Arsip Buku' },
18 { name: 'Arsip Foto', data: [<?php echo $jFoto; ?>],
19 stack: 'Arsip Foto' },
20 { name: 'Arsip Film Dokumenter', data: [<?php echo $jFilm; ?>],
21 stack: 'Arsip Film Dokumenter' },
22 { name: 'Arsip Tektual', data: [<?php echo $jTeks; ?>],
23 stack: 'Arsip Tektual' }, }]
24 });
25 });
26 </script>

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.

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

15
 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 Output dari Sistem Status

diharapkan Pengujian
Login admin Login berhasil Sistem akan memberikan Valid
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
Mengubah Password berhasil Jika input salah satu dari Valid
password diubah di dalam password lama, password baru
database atau konfirmasi password baru
salah, maka akan muncul pesan
update password gagal. Apabila
benar, maka update password
sukses

16
Menambah admin Admin berhasil Admin baru berhasil ditambahkan Valid
baru ditambahkan ke ke dalam database
dalam database
Melihat saran Saran berhasil Sistem berhasil menampilkan Valid
pengguna aplikasi ditampilkan saran pengguna aplikasi Arsip
Arsip Salatiga Salatiga Mobile
Mobile
Menambah koleksi Data berhasil Koleksi arsip berhasil Valid
arsip buku, arsip ditambahkan ke ditambahkan ke dalam database.
foto, arsip film dan dalam database
arsip tekstual
Mengubah koleksi Data berhasil diubah Koleksi arsip berhasil diubah ke Valid
arsip buku, arsip di dalam database dalam database
foto, arsip film dan
arsip tekstual
Menghapus koleksi Data berhasil Koleksi arsip berhasil dihapus di Valid
arsip buku, arsip dihapus di dalam dalam database
foto, arsip film dan database
arsip tekstual
Pencarian koleksi Data hasil pencarian Sistem berhasil menampilkan Valid
arsip (temu kembali berhasil ditampilkan koleksi arsip sesuai dengan kata
arsip) kunci pencarian

Pencetakan laporan Data ditampilkan Sistem berhasil menghasilkan Valid

pada laporan laporan koleksi arsip dalam
bentuk file .pdf
Melihat statistik hit Chart hit pembaca Sistem berhasil menampilkan Valid
pembaca berhasil ditampilkan chart hit pembaca. Chart berubah
apabila hit pembaca bertambah
User melihat Data berhasil Sistem berhasil menampilkan Valid
koleksi arsip buku, ditampilkan daftar koleksi arsip baik semua
arsip foto, arsip film maupun per kategori dan
dan arsip tekstual menampilkan informasi koleksi
arsip secara detail

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.

17
 Tabel 2. Hasil Pengisian Kuesioner untuk Pengujian Responden
No Pertanyaan Sangat Tidak Cukup Setuju Sangat
Tidak Setuju Setuju Setuju
Setuju
1. Sistem Informasi Arsip Salatiga 0 0 0 4 26
mudah digunakan
2. Sistem mampu memberikan 0 0 2 18 10
informasi mengenai koleksi Arsip
Salatiga
3. Pencarian koleksi arsip pada sistem 0 0 0 7 23
berjalan dengan baik
4. Sistem memberikan kemudahan 0 0 0 5 25
dalam akses informasi mengenai
Arsip Salatiga
5. Tampilan web Sistem Informasi 0 0 0 2 28
Arsip Salatiga menarik

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.
Hasil analisis pengujian untuk pertanyaan 2 menunjukkan sebanyak 6,67%
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.
Hasil analisis pengujian untuk pertanyaan 3 menunjukkan sebanyak 23,33%
responden menjawab setuju dan 76,67% responden menjawab sangat setuju. Jadi
disimpulkan bahwa fungsi pencarian koleksi arsip pada sistem berjalan dengan
baik.
Hasil analisis pengujian untuk pertanyaan 4 menunjukkan sebanyak 16,67%
responden menjawab setuju dan 83,33% responden menjawab sangat setuju. Jadi
disimpulkan bahwa sistem memberikan kemudahan dalam mengakses informasi
mengenai arsip Salatiga.
Hasil analisis pengujian untuk pertanyaan 5 menunjukkan sebanyak 6,67%
responden menjawab setuju dan 93,33% responden menjawab sangat setuju. Jadi
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.

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

19
[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.

20