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
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.
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
1
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.
2
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.
3
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
4
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)
5
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.
6
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.
tambah
hapus
edit
hapus
tambah
edit
Bidang Pelayanan
Komisi
tambah
hapus
edit
Program Kerja
Bendahara
Komisi
Transaksi
tambah
hapus
edit
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
7
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
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).
8
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.
9
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.
10
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.
11
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.
12
Kode Program 2Perintah CSS untuk menyesuikan kondisi elemen berdasarkan lebar layar
1.
2.
3.
4.
5.
6.
Bidang Pelayanan
@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.
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
13
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.
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.
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
1
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.
2
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.
3
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
4
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)
5
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.
6
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.
tambah
hapus
edit
hapus
tambah
edit
Bidang Pelayanan
Komisi
tambah
hapus
edit
Program Kerja
Bendahara
Komisi
Transaksi
tambah
hapus
edit
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
7
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
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).
8
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.
9
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.
10
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.
11
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.
12
Kode Program 2Perintah CSS untuk menyesuikan kondisi elemen berdasarkan lebar layar
1.
2.
3.
4.
5.
6.
Bidang Pelayanan
@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.
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
13
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.