Penerapan Responsive Web Design pada Sistem Informasi

Laporan Anggaran GKI Soka Salatiga

Artikel Ilmiah

Peneliti: Barnabas Josmon Parera (672011210)

Evangs Mailoa, S.Kom. M.Cs.

Program Studi Teknik Informatika

Fakultas Teknologi Informasi

Universitas Kristen Satya Wacana

Salatiga 2016

Penerapan Responsive Web Design pada Sistem Informasi

Laporan Anggaran GKI Soka Salatiga

Artikel Ilmiah

Diajukan kepada

Fakultas Teknologi Informasi

untuk memperoleh gelar Sarjana Komputer

Peneliti: Barnabas Josmon Parera (672011210)

Evangs Mailoa, S.Kom. M.Cs.

Program Studi Teknik Informatika

Fakultas Teknologi Informasi

Universitas Kristen Satya Wacana

Salatiga

2016

Penerapan Responsive Web Design pada Sistem Informasi

Laporan Anggaran GKI Soka Salatiga

1) Barnabas Josmon Parera,

2)Evangs Mailoa

Fakultas Teknologi Informasi

Universitas Kristen Satya Wacana

Jl. Diponegoro 52-60, Salatiga 50711, Indonesia

Email: 1)

672011210@student.uksw.edu,2)

evangs.mailoa@staff.uksw.edu

Abstract

Computer technology that has been developed can be utilized in various fields,

one of them in the management of financial data, namely the existence of a web-based

financial information systems. GKI Soka Salatiga currently has as many as 332 members

of the congregation, and the administration is done by one person administrative staff.

The number of members continues to grow, so that GKI Soka requires a way of managing

financial data, so it will keep the quality of service to the church. The process of

recording and reporting of financial information is in the form of physical files. So that

when needed, the administration must find archives of time to obtain the required data.

Media information like this can be troublesome part of the administrative work that

needed better storage media and is more sophisticated with the use of information

technology. In this study designed financial reporting information system developed with

the technology one of which is the bootstrap. Bootstrap provides convenience in

arranging the layout of the web, so it can be displayed on a variety of screen sizes

browser.

Keywords: Church Information System, Responsive Web, GKI Soka

Abstrak

Teknologi komputer yang telah maju dapat dimanfaatkan dalam berbagai bidang,

salah satunya dalam pengelolaan data keuangan, yaitu dengan adanya sistem informasi

keuangan berbasis web. Saat ini GKI Soka Salatiga memiliki anggota jemaat sebanyak

332 orang, dan secara administrasi dilayani oleh 1 orang tenaga administrasi. Jumlah

jemaat yang akan terus berkembang ini, membutuhkan cara pengelolaan data keuangan

yang baik, sehingga akan menjaga kualitas pelayanan terhadap jemaat. Proses pencatatan

informasi keuangan dan pelaporan masih dalam bentuk arsip fisik. Sehingga apabila

dibutuhkan, bagian administrasi harus mencari kembali arsip-arsip yang lama untuk

mendapatkan data yang dibutuhkan. Media informasi seperti ini dapat menyusahkan

bagian administrasi dalam bekerja. Diperlukan media penyimpanan yang lebih baik dan

lebih canggih dengan memanfaatkan teknologi informasi. Pada penelitian ini dirancang

sistem informasi laporan keuangan yang dikembangkan dengan teknologi, salah satunya

adalah bootstrap. Bootstrap memberikan kemudahan dalam hal mengatur layout web,

sehingga dapat ditampilkan pada berbagai ukuran layar browser.

Kata Kunci: Sistem Informasi Gereja, Responsive Web, GKI Soka

1)Mahasiswa Program Studi Teknik Informatika, Fakultas Teknologi Informasi, Universitas Kristen Satya

Wacana 2,3)Staf Pengajar Fakultas Teknologi Informasi, Universitas Kristen Satya Wacana.

1

1. Pendahuluan

Kemajuan teknologi dan informasi dewasa ini telah menimbulkan dampak

bagi kehidupan manusia, dimana kebutuhan akan informasi menjadi sangat tinggi.

Inilah yang menjadikan teknologi informasi menjadi sangat penting dan hampir

menjadi kebutuhan primer [1]. Saat ini manusia berusaha memperoleh dan

berpikir bagaimana menyajikan informasi yang akurat dan efisien. Perkembangan

teknologi komputer yang semakin pesat dapat memungkinkan manusia dalam

memperolehnya.

Gereja Kristen Indonesia Soka merupakan bagian dari sinode GKI Jawa

tengah yang terletak di kota salatiga yang telah berdiri pada 26 Desember 2000.

Hingga sekarang, GKI Soka Salatiga memiliki anggota jemaat sebanyak 332

orang, jemaat sebanyak ini secara administrasi keuangan dilayani oleh 1 orang.

Media yang digunakan dalam penyampaian informasi laporan persembahan masih

dalam bentuk warta gereja yang hanya bisa didapatkan pada hari minggu saat

pelaksanaan ibadah mingguan. Laporan pengeluaran oleh setiap komisi pada akhir

periode kerja, yakni pada akhir tahun dibuat oleh bendahara majelis gereja.

Bendahara mengumpulkan nota-nota bukti pembayaran dari setiap kegiatan yang

komisi telah lakukan. Kemudian bendahara akan melakukan perincian dan

evaluasi terhadap program yang sudah dikerjakan. Semua proses ini dilakukan

secara manual dan hal ini tentunya akan menyusahkan bendahara gereja.

Permasalahan lain yang ditemukan adalah penyimpanan informasi-informasi

keuangan lainnya masih dalam bentuk hardcopy (arsip fisik atau dokumen

tercetak). Sehingga apabila dibutuhkan, bagian administrasi harus mencari

kembali arsip-arsip yang lama untuk mendapatkan data yang dibutuhkan. Media

informasi seperti ini dapat menyusahkan bagian administrasi dalam bekerja,

sehingga diperlukan media penyimpanan yang lebih baik yang sudah lebih

canggih dan memanfaatkan teknologi informasi.

Jumlah jemaat akan terus berkembang, dan kegiatan gereja juga akan

bertambah. Pelayanan terhadap jemaat perlu dipertahankan bahkan ditingkatkan,

sehingga diperlukan solusi untuk efisiensi pencatatan, pengolahan, dan pelaporan

data gereja, salah satunya adalah data keuangan.

Pencatatan transaksi yang tertunda, memberikan akibat pada proses

pelaporan yang terlambat. Pada pencatatan transaksi manual, bendahara

menunggu tiap komisi untuk mengumpulkan nota pembelian. Kemudian

bendahara memasukkan informasi transaksi tersebut ke dalam aplikasi

spreadsheet, contohnya Microsoft Excel. Jika nota transaksi hilang, dan pihak

yang melakukan transaksi pembelian lupa tentang nilai transaksi, maka akan

terjadi ketidakakuratan laporan keuangan.

Teknologi komputer yang telah maju dapat dimanfaatkan dalam berbagai

bidang, salah satunya dalam pengelolaan data keuangan, yaitu dengan adanya

sistem informasi keuangan berbasis web. Web memberikan keuntungan yaitu :

(1) dapat diakses melalui berbagai platform (Android, Windows, Mac OS,

Linux, dll), (2) lebih mudah diatur karena aplikasi terletak di satu tempat yaitu

server; (3) data yang lebih aman karena terdapat kunci keamanan di database

server, dan di halaman login web. Septyawan menambahkan bahwa dengan

2

menggunakan sistem informasi keuangan berbasis web, pendistribusian data atau

akses informasi dapat dilakukan menggunakan jaringan baik lokal maupun public

[2]. Selain itu untuk melakukan perubahan atau perbaikan, hanya dilakukan pada

server sehingga memberi kemudahan dalam maintenance.

Berdasarkan latar belakang masalah yang telah disebutkan, dan berdasarkan

keuntungan yang diberikan oleh sistem informasi berbasis web, maka dilakukan

penelitian yang merancang database untuk menyimpan data transaksi keuangan

GKI SOKA. Untuk mengakses database tersebut disediakan sistem informasi

berbasis web. Tiap pengguna web diberikan username dan password, sehingga

tidak sembarang orang dapat mengakses web tersebut. Perancangan dan

implementasi sistem informasi laporan anggaran GKI SOKA, diharapkan dapat

memudahkan bendahara mejelis gereja dan bagian administrasi gereja dalam

mengolah data-data dan arsip keuangan gereja, sekaligus dapat memantau

perkembangan informasi keuangan Gereja, sehingga dapat meningkatkan kualitas

pelayanan di GKI Soka.

2. Tinjauan Pustaka

Adapun penelitian terdahulu yang berkaitan dengan penelitian ini berjudul

“Perancangan Sistem Informasi Manajemen Gereja (Studi Kasus Di Gereja

Kristen Indonesia Salatiga)”. Pada penelitian ini yang dirancang adalah sistem

informasi manajemen jemaat GKI Salatiga menggunakan script php dan database

MySQL sebagai media penyimpanan data [3].Hasil dari perancangan sistem

informasi ini adalah sebuah situs website gereja yang berisi informasi tentang

jemaat dan semua kegiatan peribadatan. Berbeda dengan penelitian yang

dikerjakan adalah, pada penelitian ini sistem informasi hanya pada keuangan dan

cara melaporkannya.

Pada penelitian “Perancangan Dan Implementasi Aplikasi Sistem

Informasi Manajemen Gereja Berbasis Web Menggunakan MVC (Studi Kasus:

Gereja Kristen Alkitab Indonesia)” [4]. Aplikasi yang dikembangkan merupakan

aplikasi sistem informasi manajemen untuk gereja, menggunakan metode MVC

(Model View Controller) sebagai dasar pengembangannya, termasuk database

gereja. Beda dengan penelitian tersebut, pada penelitian ini, tidak menggunakan

metode MVC melainkan bootstrap sebagai salah satu framework yang dapat

membangun desain web yang responsif.

Penelitian sebelumnya yang membahas tentang penggunaan framework

bootstrap, berjudul “Prototype Web Responsive Design Pada UIN Syarif

Hidayatullah Jakarta Menggunakan Framework Bootstrap” [4]. Latar belakang

penggunaan bootstrap pada penelitian ini adalah meningkatnya akses website UIN

Syariaf Hidayatullah Jakarta dengan menggunakan perangkat mobile yang

memiliki resolusi layar berbeda dengan aplikasi desktop. Sehingga, diperlukan

bootstrap yang mampu beradaptasi dengan masalah pada web browser dan

perangkat keras yang menjalankannya untuk menciptakan respon terhadap

kebutuhan pengguna. Hal ini menjadi alasan mengapa pada penelitian di GKI

Soka Salatiga juga memanfaatkan bootstrap dalam rangka membangun sebuah

responsive website.

3

Pada penelitian Septyawan [2], dirancang sebuah sistem informasi

keuangan berbasis web pada Klinik Firdaus. Klinik Firdaus sebagai instansi

kesehatan tempat orang berobat dan memperoleh nasihat medis memiliki angka

kunjungan pasien rata-rata 50-60 orang setiap harinya. Klinik ini masih

menerapkan cara manual dalam pencatatan dan pelaporan keuangan harian. Cara

manual tersebut memerlukan waktu yang cenderung lebih lama dan ketelitian

yang lebih tinggi dalam pengelolaan datanya. Human error, serta resiko hilangnya

nota transaksi mengakibatkan informasi yang dihasilkan menjadi tidak akurat dan

memiliki akuntabilitas yang rendah. Karena itu perlu dibangun sebuah sistem

informasi keuangan untuk membantu pengelolaan keuangan klinik. Sistem

informasi keuangan ini dibangun berbasis web dengan framework laravel,

database MySQL dan perancangan proses menggunakan DAD. Sistem ini

menawarkan kemudahan dalam pencatatan transaksi dan pembuatan laporan

secara otomatis, sehingga pengguna tidak perlu menghitung data transaksi secara

manual. Hasil pengembangan sistem ini dapat digunakan untuk mencatat transaksi

keuangan klinik. Selain itu sistem ini juga dapat menghasilkan laporan dalam

bentuk tabel dan grafik yang dapat digunakan untuk mengetahui perkembangan

klinik.

Berdasarkan penelitian-penelitian yang telah dilakukan tentang sistem

informasi manajemen dan keuangan berbasis web pada gereja ,maka dilakukan

penelitian yang bertujuan untuk merancang dan mengimplementasikan sebuah

aplikasi sistem informasi laporan anggaran berbasis web yang akan diterapkan

pada Gereja Kristen Indonesia Soka Salatiga menggunakan teknologi responsive

web.

Dalam penelitian ini yang menjadi batasan masalah adalah sebagai berikut:

(1) Sistem informasi yang dikerjakan adalah informasi keuangan; (2) Sistem yang

dirancang disesuaikan dengan sistem yang sudah ada pada gereja, bukan

menggunakan format pembuatan laporan keuangan dari PSAK No 45 tentang

laporan keuangan organisasi nirlaba.

Sistem Informasi adalah suatu kombinasi teratur apapun dari people

(orang), hardware (perangkat keras), software (piranti lunak), computer networks

and data communications (jaringan komunikasi), dan database (basis data) yang

mengumpulkan, mengubah dan menyebarkan informasi di dalam suatu bentuk

organisasi [5]. Untuk lebih jelasnya dapat dilihat pada Gambar 1 tentang

komponen sistem informasi.

4

Gambar 1 Aktivitas dan komponen Sistem Informasi [5]

Semua sistem informasi menggunakan sumber daya – sumber daya yang

terdapat didalam perusahaan untuk melakukan aktivitas input, pemrosesan, output,

penyimpanan, dan pengendalian yang mengubah sumber daya data menjadi

produk informasi.

Gambar 1 mengilustrasikan model sistem informasi yang menunjukan

kerangka kerak konsep dasar untuk berbagai komponen dan aktivitas sistem

informasi. Model sistem informasi ini memperlihatkan hubungan antarkomponen

dan aktivitas sistem informasi yang menekankan dan menggunakan pada lima

sumber daya yang terdapat didalam suatu perusahaan (in sourcing) [6].

Pengembangan sistem umumnya dilakukan dengan menggunakan SDLC

(Systems Development Life Cycle) atau daur hidup pengembangan sistem. Dengan

menggunakan SDLC ini, organisasi akan mengikuti 6 langkah penting, yang

mencakup berbagai tahapan berikut: 1) Perencanaan, yaitu membentuk rencana

pengembangan sistem informasi yang memenuhi rencana-rencana strategis dalam

organisasi; 2) Penentuan lingkup, yaitu menentukan lingkup sistem yang

diusulkan untuk dibangun; 3) Analisis, yaitu menentukan kebutuhan-kebutuhan

sistem yang diusulkan; 4) Desain, yaitu merancang sistem yang memenuhi

kebutuhan-kebutuhan yang diperoleh pada tahapan analisis; 5) Implementasi,

yaitu membuat sistem dan menyiapkan infrastruktur untuk sistem; 6)

Pemeliharaan, yaitu mendukung sistem yang telah berjalan [6].

Pada penelitian ini aplikasi yang dirancang adalah merupakan aplikasi

berbasis web. WWW atau world wide web atau web saja merupakan sebuah sistem

yang saling terkait dalam sebuah dokumen yang berformat hypertext yang berisi

beragam informasi, baik tulisan, gambar, suara, video, dan informasi multimedia

lainnya dan dapat diakses melalui sebuah perangkat yang disebut web browser.

Untuk menterjemahkan dokumen dalam bentuk hypertext ke dalam bentuk

dokumen yang bisa dipahami, maka web browser melalui web client akan

membaca halaman web yang tersimpan di sebuah web server melalui protokol

yang biasa disebut http atau Hypertext Transfer Protocol [7].

Beberapa keunggulan aplikasi berbasis web, antara lain:1) Dapat

dijalankan dimanapun kapanpun tanpa harus melakukan penginstalan; 2) Tidak

memerlukan lisensi ketika menggunakan aplikasi berbasis web, sebab lisensi telah

menjadi tanggung jawab dari web penyedia aplikasi; 3) Dapat dijalankan di sistem

5

operasi manapun; 4) Dapat diakses lewat banyak media seperti: komputer dan

handphone yang sudah sesuai dengan standard WAP; 5) Tidak perlu spesifikasi

komputer yang tinggi untuk menggunakan aplikasi berbasis web, sebab di

beberapa kasus, sebagian besar proses dilakukan di web server penyedia aplikasi

berbasis web ini [8].

Pustaka lain yang mendukung penelitian ini adalah mengenai framework.

Framework adalah kerangka kerja. Framework adalah sekumpulan fungsi, class

dan aturan. Berbeda dengan library yang sifatnya untuk tujuan tertentu saja,

framework bersifat menyeluruh mengatur bagaimana kita membangun aplikasi

[9]. Beberapa contoh framework yang biasa digunakan adalah framework

CakePHP, CodeIgniter (CI) Symphony, Zend, Yii, JQuery, dan Bootstrap.

Responsive design merupakan salah satu teknik yang dapat membuat

proses perancangan aplikasi dan situs web untuk berbagai jenis perangkat menjadi

lebih mudah. Hal ini dikarenakan bahwa dengan menggunakan responsive design,

perancang dimungkinkan untuk dapat menerapkan solusi bagi berbagai resolusi

layar, density, dan rasio aspek pada banyak jenis perangkat. Responsive design

memiliki kemampuan untuk mengelola aset media dengan efektif. Hal ini

memberikannya keunggulan untuk dapat diterapkan ke dalam perancangan situs

web sehingga situs dapat diakses melalui smartphone, tablet, desktop, ataupun

smart TV tanpa memperlihatkan perbedaan yang terlalu besar dalam hal

penggunaan. Dengan menggunakan konfigurasi responsive design, sebuah situs

web mampu memberikan respon secara otomatis terhadap ukuran layar, sehingga

situs dapat beradaptasi dengan optimal dalam perangkat apapun yang digunakan

pengguna untuk mengaksesnya Kemampuan adaptasi tersebut jelas merupakan

poin penting dalam proses perancangan situs. Sebab, untuk dapat menciptakan

sebuah desain situs yang baik, maka proses perancangan perlu berfokus pada

penyediaan layanan dan mobilisasi yang baik bagi pengguna [11].

Responsive web pada penelitian ini berfungsi untuk membuat tampilan

web dapat menyesuikan sesuai ukuran layar browser. Sehingga tidak hanya dapat

diakses melalui komputer, namun juga dapat diakses melalui browser pada

perangkat mobile seperti handphone atau tablet. Hal ini diperlukan oleh tiap

komisi untuk mencatat transaksi pembelian secara realtime.

Untuk membuat web yang responsif (responsive web), dapat digunakan

teknologi bootstrap. Bootstrap adalah front-end framework yang mengedepankan

tampilan untuk mobile device (handphone, smartphone dll.) guna mempercepat

dan mempermudah pengembangan website. Bootstrap adalah template responsif

yang bisa menyesuaikan lebar tampilan secara otomatis sesuai gadget yang

dipakainya. Bootstrap menyediakan HTML, CSS dan Javascript siap pakai dan

mudah untuk dikembangkan. Kelebihan yang dimiliki bootstrap adalah template

yang menggunakan bootstrap lebih ringan [10].

3. Metode dan Perancangan Sistem

Penelitian yang dilakukan, diselesaikan melalui tahapan penelitian yang

terbagi dalam lima tahapan, yaitu: (1) Identifikasi masalah dan studi literatur, (2)

6

Perancangan sistem, (3) Implementasi sistem, (4) Pengujian sistem dan analisis

hasil pengujian, (5) Penulisan laporan.

Identifikasi Masalah dan Studi Literatur

Perancangan Sistem

Implementasi Sistem

Pengujian Sistem dan Analisis Hasil Pengujian

Penulisan Laporan

Gambar 2 Tahapan Penelitian

Tahapan penelitian pada Gambar 2, dapat dijelaskan sebagai berikut.

Tahap pertama: identifikasi masalah, yaitu masih manualnya sistem yang terdapat

di GKI Soka terutama sistem input dan output keuangan yang menyusahkan bagi

bendahara dan bagian administrasi gereja, dan diperlukan sebuah sistem informasi

keuangan yang mengandalkan teknologi komputer yang dapat memudahkan

pekerjaan tersebut; Tahap kedua: perancangan sistem yang meliputi perancangan

proses pemasukan dan proses pengeluaran keuangan, Tahap ketiga: perancangan

prototype sistem, yaitu membuat aplikasi sesuai perancangan proses pada tahap

kedua; Tahap keempat: pengujian sistem dan analisis hasil pengujian, yaitu

dilakukan pengujian terhadap proses yang telah dirancang, dan melihat kesesuaian

solusi terhadap masalah yang telah teridentifikasi sebelumnya; dan Tahap kelima:

melakukan penulisan laporan penelitian.

Metode perancangan sistem dilakukan dengan menggunakan metodologi

pengembangan perangkat lunak prototype model [12]. Pada proses implementasi

dihasilkan beberapa prototype yang dapat dijelaskan sebagai berikut. Tahap

pertama: mendengarkan atau wawancara customer atau user; Tahap kedua;

merancang program kemudian membuat perbaikan terhadap hasil yang diperoleh;

Tahap ketiga: melakukan evaluasi ke customer atau user dimana pada tahap ini

proses akan kembali lagi ketahap pertama. Diagram prototype model ditunjukkan

pada Gambar 3.

7

Gambar 3 Prototype Model [12]

Perancangan sistem dan perancangan user interface terhadap solusi dari

permasalahan yang ada dilakukan dengan menggunakan perangkat pemodelan

Unified Modeling Language (UML). Diagram yang akan dibuat adalah Use Case

Diagram dan Activity Diagram. Use Case Diagram menampilkan interaksi antara

user dengan sistem. Use Case Diagram dapat dilihat pada Gambar 4.

Bendahara Komisi

Bidang Pelayanan Komisi

Program Kerja

Transaksi

tambahhapus

edit

<<extend>><<extend>>

<<extend>>

tambah hapus edit

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

tambahhapus

edit

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

tambahhapus

edit

<<extend>><<extend>>

<<extend>>

Gambar 4 Usecase Diagram

Sistem terdiri dari dua pengguna (actor), yaitu Bendahara dan Komisi.

Komisi berperan untuk mengatur data Program Kerja dan Transaksi per Komisi,

Bendahara berperan untuk mengatur data Bidang Pelayanan, data Program Kerja,

dan data Transaksi. Bendahara berhak untuk mengatur data Program Kerja, dan

8

Transaksi per Komisi, namun dalam prakteknya, proses ini dilakukan oleh

Komisi.

Komisi Bendahara

menyusun program kerja

melakukan pencatatan

transaksi untuk tiap program

kerja

melihat laporan per bulan/per

tahun

melihat laporan per bulan/per

tahunseluruh komisi

Gambar 5 Activity Diagram Pencatatan dan Pelaporan Transaksi Keuangan

Transaksi dapat dicatat setelah program kerja selesai dimasukkan. Tiap

transaksi berhubungan dengan satu program kerja. Satu program kerja dapat

memiliki banyak transaksi. Laporan keuangan per bulan atau per tahun dapat

dibuat ketika ada data transaksi.

Gambar 6 Class Diagram Sistem

Gambar 5 menunjukkan hubungan antara class-class yang digunakan di

dalam sistem. Class program_kerja merupakan penghubung antara transaksi

dengan komisi. Hal ini berarti bahwa tiap komisi dalam proses mencatat data

transaksi, harus ada hubungannya dengan program kerja yang dimiliki oleh

komisi tersebut. Tiap komisi berada dalam satu bidang pelayanan (diwakili oleh

class bidang).

9

Gambar 7 Rancangan Tabel di Database

Class diagram pada Gambar 6 kemudian digunakan untuk merancang

tabel-tabel yang digunakan oleh sistem. Gambar 7 menunjukkan 5 tabel yang

masing-masing berfungsi menyimpan informasi sesuai dengan namanya. Tabel

Bidang berfungsi untuk menyimpan bidang-bidang pelayanan yang dimiliki oleh

GKI Soka. Setiap bidang memiliki satu atau lebih Komisi. Data Komisi disimpan

pada tabel Komisi. Tiap Komisi memiliki data user login, yang disimpan di tabel

Akses. Tiap Komisi memiliki satu atau lebih data Program Kerja, disimpan di

tabel Program_Kerja. Tiap transaksi yang dilakukan oleh Komisi, selalu

berhubungan dengan Program_Kerja, disimpan di tabel Transaksi.

4. Hasil dan Pembahasan

Aplikasi dikembangkan dalam bentuk web. Teknologi yang digunakan

adalah PHP, MySQL Database server dan Apache web server.

10

Gambar 8 Halaman Pengaturan Program kerja

Halaman pengaturan program kerja menampilkan detail program kerja tiap

komisi. Pengguna dapat menghapus, mengubah, dan menambahkan data program

kerja baru.

Gambar 9 Halaman Input Transaksi Keuangan

Halaman input Transaksi Keuangan digunakan untuk mencatat pemasukan

maupun pengeluaran tiap komisi. Tiap transaksi harus dihubungkan dengan satu

Program Kerja.

11

Output dari sistem ini adalah laporan keuangan per bulan, per tahun, dan

laporan realisasi, sesuai dengan kebutuhan pengguna. Bentuk laporan ditunjukkan

pada Gambar 10 dan Gambar 11.

Gambar 10 Laporan Per Tahun

Gambar 11 Laporan Realisasi

Laporan Realisasi merupakan bentuk perbandingan antara rencana pengeluaran

anggaran diawal tahun, dengan realisasi yang terjadi dilapangan guna untuk

mengukur kinerja pelayanan setiap komisi.

Kode Program 1 Perintah penggunaan bootstrap untuk responsive web

1.

2.

3.

4.

5.

6.

7.

8.

<head>

<link id="bootstrap-style"

href="css/bootstrap.min.css"

rel="stylesheet">

<link

href="css/bootstrap-responsive.min.css"

rel="stylesheet">

</head>

12

Kode Program 1 merupakan baris perintah yang terdapat di bagian atas

dokumen html, tepatnya di dalam taghead. Baris perintah tersebut berfungsi untuk

mendeklarasikan penggunaan file css dari bootstrap.

Gambar 12 Tampilan menu pada layar browser

dengan lebar > 979px

Gambar 13 Tampilan menu pada layar

browser dengan lebar antara 768px sampai

dengan 979px

Gambar 14 Tampilan menu pada layar browser dengan lebar < 768px

Salah satu kegunaan bootstrap adalah dalam hal menangani perubahan

ukuran layar browser (responsive web design). Pada Gambar 12, menu pada web

diakses dengan browser dengan ukuran lebar lebih dari 979px. Gambar 13 diakses

dengan browser dengan lebar antara 768px sampai dengan 979px. Gambar 14

diakses oleh browser dengan ukuran dibawah 768px, sebagai contoh adalah

browser smartphone.

13

Kode Program 2Perintah CSS untuk menyesuikan kondisi elemen berdasarkan lebar layar 1.

2.

3.

4.

5.

6.

<span class="hidden-tablet"> Bidang Pelayanan</span>

@media (max-width: 979px) and (min-width: 768px)

.hidden-tablet {

display: none!important;

}

Kode Program 2 ditunjukan baris elemen span yang merupakan elemen

untuk menampilkan menu pada web. Elemen span diatur untuk menggunakan

class css “hidden-tablet”. Pada file bootstrap.min.css, diatur bahwa untuk class

“hidden-tablet”, pada layar dengan lebar 768px sampai dengan 979px, kondisinya

tidak ditampilkan “display: none”.

Gambar 15 Tampilan control “select” yang dimodifikasi oleh bootstrap

Bootstrap juga memodifikasi beberapa kontrol html, sehingga menjadi

lebih fungsional. Salah satunya adalah kontrol “select”, seperti ditunjukkan pada

Gambar 15. Control select tidak hanya menampilkan beberapa item pilihan,

namun juga dapat melakukan pencarian terhadap item yang ada didalamnya. Fitur

ini sangat berguna ketika isi dari kontrol “select” tersebut cukup banyak.

Kode Program 3Perintah bootstrap untuk memodifikasi control select

1.

2.

3.

4.

<select data-placeholder="Pilih Program Kerja"

data-rel="chosen"

name="kode_program_kerja" >

</select>

Kode Program 3, ditunjukkan dua atribut yang tidak terdapat pada HTML,

yaitu data-placeholder dan data-rel. Atribut data-placeholder berfungsi

untuk menampilkan informasi sementara pada kontrol, ketika user belum memilih

apapun pada kontrol “select” tersebut. Atribut data-rel berfungsi untuk

memberi tanda agar kontrol “select” ini diubah oleh bootstrap.

Gambar 16 Control “button” tanpa

bootstrap

Gambar 17 Control “button” dengan

bootstrap

14

Bootstrap menyediakan class css untuk mempercantik tampilan kontrol.

Pada Gambar 16 dan Gambar 17 ditunjukkan perubahan kontrol “button”, dengan

menggunakan class “btn btn-info”.

Kode Program 4Perintah bootstrap untuk memodifikasi control button

1.

2.

3.

4.

<button

class="btn btn-info"

<i class="halflings-icon white white print"></i>Cetak

</button>

Kode Program 4, ditunjukkan nilai atribut class yaitu “btn btn-info”.

Terdapat dua class yaitu btn, yang berfungsi untuk mengubah kontrol <button>

menjadi lebih menarik (Gambar 17). Sedangkan class “btn-info”, berfungsi

untuk memberi warna biru pada button. Untuk menampilkan icon printer

digunakan baris perintah <i class="halflings-icon white white

print"></i>. Usability Testing dilakukan untuk mengetahui apakah sistem telah

memenuhi kebutuhan pengguna, mempermudah kinerja pengguna dan mudah

digunakan oleh pengguna. Pengujian dilakukan dengan memberikan kuesioner

kepada 13 responden, yang terdiri dari 12 responden selaku komisi, dan 1

responden bendahara. Hasil usability testing ditampilkan pada Tabel 1.

Tabel 1 Hasil Pengujian Usability Testing

No. Pertanyaan

Jumlah Jawaban

“Sangat

Tidak

Setuju”

"Tidak

Setuju" “Netral” “Setuju”

“Sangat

Setuju”

1 Sistem dapat membantu kerja

Bendahara dan Komisi - - - 1 12

2 Sistem dapat membantu kerja

menjadi lebih cepat - - 1 4 8

3 Sistem dapat membantu

mengurangi kesalahan input

data, sehingga data menjadi

lebih tepat

- - - 3 10

4 Pengguna merasa lebih

nyaman menggunakan sistem

ini untuk mencatat transaksi

keuangan daripada

menggunakan cara manual

- - - 2 11

5 Sistem dapat menampilkan

data dalam jumlah besar (<=

100 data) dengan cepat.

- - - 3 10

Berdasarkan hasil usability testing pada Tabel 1 disimpulkan bahwa rata-

rata paling banyak menjawab “Sangat Setuju” yang berarti sistem dapat

15

memenuhi kebutuhan seperti yang telah dilakukan pada Tahap pertama (analisis

kebutuhan dan pengumpulan data).

5. Simpulan

Dalam penelitian ini dirancang sebuah aplikasi sistem informasi keuangan

gereja berbasis web yang memanfaatkan teknologi responsive web untuk desain

user interface, dan menggunakan metode prototype dalam pengerjaannya. Pada

sistem yang dirancang ada dua bagian umum yang terdapat untuk melengkapi

informasi keuangan, dua bagian itu nantinya akan menjadi acuan dalam menyusun

laporan anggaran gereja baik laporan bulanan dan laporan tahunan.

Penggunaan framework bootstrap cukup membantu dalam mengatur

tampilan web, sehingga website menjadi lebih responsive. Bootstrap menyediakan

class-class pada css untuk mengubah tampilan kontrol HTML menjadi lebih

menarik dan lebih berfungsi. Hal ini memberikan kemudahan dan kecepatan bagi

programmer web. Bootstrap juga memberikan keuntungan bagi sisi pemakai,

karena tampilan website menjadi lebih menarik, dan responsif terhadap perubahan

ukuran layar browser, sehingga dapat diakses baik melalui browser komputer

maupun browser perangkat mobile.

Berdasarkan hasil pengujian kepada pengguna terlihat bahwa aplikasi sistem

informasi berbasis web ini memudahkan user dalam mengolah data laporan

keuangan gereja. Adanya database yang menyimpan proses transaksi dapat

membantu bendahara majelis jemaat untuk membuat sebuah laporan keuangan

bulanan dan tahunan. Dari sistem informasi laporan anggaran yang dirancang juga

memudahkan bagian administrasi gereja untuk mencari bukti nota transaksi jika

sewaktu-waktu diperlukan.

Saran yang dapat diberikan untuk penelitian lebih lanjut adalah dapat

ditambahkan sistem keamanan yang lebih baik, mengingat informasi yang

ditampilkan adalah informasi keuangan. Pada laporan transaksi dan anggaran,

dapat dibuat lebih informatif, misalnya menambahkan gambar nota transaksi yang

telah difoto sebagai bukti transaksi. Pengembangan yang dapat dilakukan adalah

menggabungkan bootstrap dengan pustaka-pustaka javascript untuk menampilkan

chart, sehingga informasi keuangan dapat dipresentasikan lebih menarik.

6. Daftar Pustaka

[1]. DbNet Solutions 2007. Benefits of Web Based Application.

http://www.dbnetsolutions.co.uk/Articles/BenefitsOfWebBasedApplication

s.aspx. Diakses pada 10 Februari 2015.

[2]. Septyawan, Y. & Suryarasmi, A. 2014. Sistem Informasi Keuangan Klinik

Firdaus.

[3]. Tompira, M. 2010. Perancangan Sistem Informasi Manajemen Gereja

(Studi Kasus di Gereja Kristen Indonesia Salatiga). Fakultas Teknologi

Informasi Universitas Kristen Satya Wacana

[4]. Fedora, D. 2011. Perancangan dan Implementasi Aplikasi Sistem Informasi

Manajemen Gereja Berbasis Web Menggunakan MVC (Studi Kasus :

16

Gereja Kristen Alkitab Indonesia). Fakultas Teknologi Informasi

Universitas Kristen Satya Wacana

[5]. O’Brient, J. A. 2005. Pengantar Sistem Informasi: Perspektif Bisnis dan

Manajerial, Edisi Keenam; Salemba Empat, Jakarta J. Glenn Brookshear;

2003. Computer Science

[6]. Chaerunnisa, D. 2014. Pengembangan Sistem Informasi Dengan

Menggunakan Pendekatan Insourcing Atau Outsourcing Pada Perusahaan.

Institut Pertanian Bogor

[7]. Erinawati, H. D. 2013. Pembangunan Sistem Informasi Pembayaran

Sekolah Pada Sekolah Menegah Atas (SMA) Negeri 1 Rembang Berbasis

Web. Speed-Sentra Penelitian Engineering dan Edukasi 10.

[8]. Putra., A. W. 2014. Pengertian Aplikasi Berbasis Web dan Desktop.

http://www.aldo-expert.com/writers/pengertian-aplikasi-berbasis-web-dan-

desktop.html. Diakses pada 18 Desember 2015.

[9]. Tsani, S. S. 2013. Perancangan dan Pembuatan Content Management

System (CMS) Barca CMS Menggunakan Framework CodeIgniter.

[10]. Mark Otto, J. T. 2015. Getting started with Bootstrap.

http://getbootstrap.com/getting-started/. Diakses pada 18 Desember 2015.

[11]. Syachbana & Akib, Z. 2014. Perancangan Website Menggunakan

Responsive Web Design. Jurnal Sigmata LPPM AMIK Sigma

[12]. Pressman, R. S. & Jawadekar, W. S. 1987. Software engineering. New

York 1992