T1 672011210 Full text

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

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

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)

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

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

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

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

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

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

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

tambah hapus edit

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

tambah hapus edit

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

tambah hapus edit

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

tambah hapus edit

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

Gambar 4 Usecase Diagram

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

tahun seluruh 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

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

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

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

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

13

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

@media (max-width: 979px) and (min-width: 768px) .hidden-tablet {

“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

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

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

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

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