pengembangan website warta gereja yang responsive pada...
TRANSCRIPT
i
Pengembangan Website Warta Gereja yang Responsive
pada Gereja Kristen Indonesia Soka Salatiga.
Artikel Ilmiah
Peneliti :
Aldrin Mainassy (672007279)
Suprihadi, S.Si., M.Kom.
Program Studi Teknik Informatika
Fakultas Teknologi Informasi
Universitas Kristen Satya Wacana
Salatiga
Januari 2015
ii
Pengembangan Website Warta Gereja yang Responsive
pada Gereja Kristen Indonesia Soka Salatiga.
Artikel Ilmiah
Diajukan kepada
Fakultas Teknologi Informasi
untuk memperoleh Gelar Sarjana Komputer
Peneliti :
Aldrin Mainassy (672007279)
Suprihadi, S.Si., M.Kom.
Program Studi Teknik Informatika
Fakultas Teknologi Informasi
Universitas Kristen Satya Wacana
Salatiga
Januari 2015
iii
iv
v
vi
vii
viii
1
Pengembangan WebsiteWarta Gereja yang Responsive
Pada Gereja Kristen Indonesia Soka Salatiga.
1Aldrin Mainassy,
2Suprihadi.
Fakultas Teknologi Informasi
Universitas Kristen Satya Wacana
Jl. Diponegoro 52-60, Salatiga 50771, Indonesia
Email:1)
Abstract
Soka Indonesia Christian Church (GKI) in Salatiga has 205 members with a need for
information. At this time, the church is striving to provide an information service by
using a blog. Based on the need for information, the Indonesia Christian Church
(GKI) requires a web-based system that can provide information as well as an
interactive media between the church and its congregation. The planning and
implementation of a web-based system can be developed by using a prototype
approach as well as MVC (Model View Controller) architecture with HTML 5, php,
sql, and CSS3 programming language. From the survey results obtained about users,
it has been found that 35% of the respondents strongly agree, 64.8% of the
respondents agree, and 0.2% of the respondents do not know about the planning and
implementation of the Soka GKI congregation web-based information system.
Keywords: Soka GKI, information system, MVC, Model View Controller
Abstrak
Gereja Kristen Indonesia (GKI) Soka Salatiga memiliki 205 anggota yang memiliki
kebutuhan akan informasi, saaat ini sebagai upaya gereja dalam menyediakan
layanan informasi adalah dengan menggunakan blog. Berdasarkan kebutuhan akan
informasi maka Gereja Krisrten Indonesia (GKI) memerlukan suatu sistem berbasis
web yang dapat memberikan informasi serta media interaktif antara jemaat dan gereja.
Perancangan dan implementasi sistem web dikembangkan dengan mengggunakan
pendekatanprototype serta menggunakan arsitektur MVC (Model View Controller)
dengan bahasa pemrograman HTML 5, php, sql dan CSS3.Berdasarkan hasil survey
yang dilakukan terhadap pengguna diketahui bahwa 35% reponden menyatakan
sangat setuju, 64,8% menyatakan setuju, dan 0,2% menyatakan tidak tahu tentang
perancangan dan implementasi sistem informasi berbasis web jemaat GKI SOKA
Salatiga.
Kata Kunci :GKI SOKA, Sistem Informasi, MVC, Model View Controller
1 Mahasiswa Program Studi Tekni Informatika, Fakultas Teknologi Informasi, Universitas Kristen SatyaWacana. 2 Staf Pengajar Fakultas Teknologi Informasi Informasi, Universitas Kristen Satya Wacana
1
1. Pendahuluan
Perkembangan teknologi informasi saat ini semakin maju, sehingga
informasi dapat diperoleh dengan mudah dan cepat. Perkembangan ini telah
merubah cara pandang setiap orang dalam melakukan berbagai kegiatan, salah
satunya adalah pada kegiatan penyelenggaraan pelayanan pada Gereja. Saat ini,
tidak sedikit umat gereja yang telah menggunakan bahkan familiar dengan sarana
teknologi informasi didalam setiap kegiatannya, yaitu di kantor, di tempat
persewaan, bahkan di sekolah. Berdasarkan kondisi tersebut, maka gereja semakin
dituntut untuk melakukan perubahan dalam pelayanannya, karena gereja tidak
dapat membatasi mobilitas dan gerak umat.
Kesadaran akan hal tersebut telah disadari oleh gereja, salah satunya
adalah Gereja Kristen Indonesia (GKI) Soka Salatiga. Upaya gereja dalam
penggunaan teknologi informasi dalam pelayanannya adalah untuk dapat
memberikan informasi terkait warta gereja, dimana warta gereja yang ada masih
berupa cetakan sejenis brosur atau leaflet sehingga tidak dapat diakses secara
online. Berdasarkan hasil wawancara dengan 10 (sepuluh) orang jemaat dewasa
dan 6 (enam) orang pengurus wilayah gereja, maka terdapat kebutuhan, yaitu
sistem informasi gereja harus dapat diakses dengan berbagai gadget, artinya
adalah setiap warga dengan berbagai gadget yang dimiliki dapat mengakses
informasi gereja selama memiliki koneksi internet. Hal ini dipertegas oleh hasil
wawancara dengan 6 (enam) Majelis GKI Soka, yaitu selain warta gereja, sistem
informasi gereja dapat menyajikan renungan harian dan dapat diakses oleh warga
atau jemaat dengan mudah.
GKI Soka Salatiga saat ini memiliki sejumlah sekitar 205 warga aktif yang
terbagi dalam kategori warga dewasa, remaja, dan anak-anak. GKI Soka saat ini
hanya memiliki Blog sebagai media informasi secara online, sehingga
berdasarkanhasil wawancara dengan beberapa Penatua dalam kepengurusan
Majelis gereja, yaitu Boetje Ruagadi selaku ketua dan Pdt. Sony Kristiantoro
selaku wakil ketua, menyatakan bahwa web blog masih sangat kurang memadai
dalam memberikan layanan kebutuhan informasi gereja bagi warga.
Sistem informasi adalah suatu sistem di dalam suatu organisasi yang
mempertemukan kebutuhan pengolahan transaksi harian, guna mendukung
operasi yang bersifat manajerial dan kegiatan strategi dari suatu organisasi dan
menyediakan pihak tertentu dengan laporan-laporan yang diperlukan [1], yang
berfungsi untuk membantu perencanaan, pengendalian, dan pengambilan
keputusan dengan menyediakan rangkuman rutin dan laporan tertentu. Selain dari
pada itu, Sistem informasi adalah kombinasi antara prosedur kerja, informasi,
orang dan teknologi informasi yang diorganisasikan untuk mencapai tujuan dalam
organisasi [2].
Manfaat yang ingin dicapai dari penelitian ini adalah menyediakan pusat
informasi gereja sehingga dapat memberikan informasi warta gereja dan
menyediakan renungan harian gereja secara online, manfaat lain dari penelitian ini
untuk akademik adalah sebagai sarana pembelajaran terkait framework
codeigniter, HTML 5 dan CSS3, serta dapat dipergunakan untuk penelitian lebih
lanjut.
2
2. Tinjauan Pustaka
Penelitian sebelumnya terkait sistem informasi gereja dan berbasis web
adalah penelitian yang telah dilakukan oleh Safwat, dkk., [2013],berjudul Aplikasi
Sistem Informasi Umat Berbasis Web. Penelitian tersebut menghasilkan sebuah
aplikasi web yang dapat memberikan suatu laporan sistem informasi mengenai
umat yang ada di Gereja Gembala Yang Baik (GYB) Surabaya [3]. Aplikasi
tersebut juga dipergunakan untuk landasan dalam mengambil keputusan pihak
gereja, karena dapat melakukan pencatatan yang ada di GYB Surabaya yaitu
pencatatan sakramen umat, pencatatan mutasi umat, pencatatan kegiatan umat,
dan pencatatan kematian umat. Selain itu, laporan umat tersebut disajikan dalam
bentuk grafik umat, grafik sakramen umat, grafik kegiatan umat, grafik
pemekaran umat, grafik perkembangan umat, laporan kriteria, laporan mutasi, dan
laporan kematian.
Penelitian terkait lainnya adalah penelitian yang dilakukan oleh Tambunan
[2013] dengan judul penelitian Perancangan dan Implementasi Sistem Informasi
Manajemen Anggota Gereja Berbasis Web Menggunakan Teknologi HMVC.
Aplikasi web yang dibangun untuk melakukan kegiatan manajemen gereja
meliputi data jemaat, kegiatan gereja, surat baptis/sidi dengan manggunakan
microsoft word serta menggunakan microsoft access sebagai program database
[4]. Berdasarkan penelitian sebelumnya terkait sistem informasi jemaat atau umat
dan penggunaan teknologi MVC, maka dilakukan penelitian yang membahas
tentang perancangan dan implementasi sistem informasi jemaat gereja berbasis
web pada Gereja Kristen Indonesia Soka Salatiga, penelitian yang dilakukan
menggunakan teknologi MVC dengan bahasa pemrograman HTML 5, PHP, dan
MySql.
Gambar 1 menjelaskan bahwa suatu sistem di dalam suatu organisasi yang
mempertemukan kebutuhan pengolahan transaksi, mendukung operasi, bersifat
manajerial, dan kegiatan strategi dari suatu organisasi dan menyediakan pihak luar
tertentu dengan laporan-laporan yang diperlukan. Sistem Informasi dapat
dibedakan menjadi dua yaitu sistem informasi manual dan sistem informasi
berbasis komputer.
Gambar 1 Sistem Informasi Berbasis Komputer [2]
3
HTML (Hypertext Markup Language) adalah bahasa yang digunakan
untuk menulis halaman web. HTML merupakan pengembangan dari standar
pemformatan dokumen teks yaitu Standard Generalized Markup Language
(SGML). HTML sebenarnya adalah dokumen ASCII atau teks biasa, yang
dirancang untuk tidak tergantung pada suatu sistem operasi tertentu. HTML
dibuat oleh Tim Berners-Lee ketika masih bekerja untuk CERN dan dipopulerkan
pertama kali oleh browser Mosaic. Selama awal tahun 1990 HTML mengalami
perkembangan yang sangat pesat. Setiap pengembangan HTML pasti akan
menambahkan kemampuan dan fasilitas yang lebih baik dari versi sebelumnya.
Namun perkembangan resmi dikeluarkan pada bulan November 1995 oleh
IETF(Internet Engineering Task Force). HTML 2.0 ini merupakan
penyempurnaan dari HTML+ (1993). HTML 3.0 (1995) memberikan kemampuan
lebih daripada versi sebelumnya. Sebuah usaha dari World Wide Web
Consortium’s(W3C)HTML Working Group pada tahun 1996 menghasilkan
HTML 3.2. HTML versi ini secara resmi diterbitkan pada bulan Januari 1997.
HTML 4.01 yang dikeluarkan secara resmi oleh W3C pada tanggal 24 April 1998.
HTML versi terbaru adalah HTML 5.0 yang dikeluarkan oleh AOL, Apple,
Google, IBM, Microsoft, Mozilla, Nokia, Opera dan ratusan vendor lainnya yang
diperkenalkan pada tanggal 19 Oktober 2010, namun belum mendapatkan
rekomendasi dari W3C. Kelebihan HTML 5 adalah dapat menampilkan video,
audio, dan flash movie lebih mudah. HTML 5 yang saat ini sudah mulai
diimplementasikan oleh beberapa browsergrade A akan membawa lebih dari
sekedar fitur untuk layout dan format halaman. Beberapa kelebihan HTML 5
antara lain, Canvas sebagai media yang dapat digunakan untuk membuat gambar
secara langsung dengan menambahkan tag<canvas>, video dan audio yang dapat
ditambahkansecara langsung dengan menggunakan tag<audio> dan <video>
tanpa perlu menggunakan plugin seperti flash, selain itu HTML 5 memiliki
storage untuk browser yang dapat menyimpan data dalam jumlah yang lebih
besar dari biasanya tanpa harus mengimplementasikan trik dengan cookie dan
flash. Sehingga dapat meningkatkan performa aplikasi dengan menggunakan
storage sebagai local cahce, HTML 5 juga memiliki Web Workers yang sempat
dinikmati pengguna browser lewat Google Gears. Jika javascript biasanya
yangdinikmati di web kadangkala menyebabkan komputer melambat maka web
worker akan dapat jadi solusi. Salah satu fitur web workers adalah threading. Kini
javascript dapat digunakan untuk melakukan beberapa proses sekaligus tanpa
harus menghambat proses terkait UI [5].
Pembuatanweb ini juga menggunakan CSS yang adalah suatu bahasa style
sheet yang digunakan untuk mengatur tampilan suatu dokumen yang ditulis dalam
bahasa markup. Pengunaan yang paling umum dari CSS adalah untuk mem-
format halaman web yang ditulis dengan HTML dan XHTML. Walaupun
demikian, bahasanya sendiri dapat dipergunakan untuk semua jenis dokumen
XML termasuk SVG dan XUL. Spesifikasi CSS diatur oleh World Wide Web
Consurtium (W3C). CSS digunakan untuk menentukan warna, jenis huruf, tata
letak, dan aspek tampilan dokumen. CSS digunakan terutama untuk memisahkan
antara isi dokumen (yang ditulis dengan HTML atau bahasa markup lainnya)
dengan presentasi dokumen (yang ditulis dengan CSS). Pemisahan ini dapat
4
meningkatkan aksesibilitas isi, memberikan lebih banyak keleluasaan dan kontrol
terhadap tampilan, dan mengurangi kompleksitas serta pengulangan struktur
isi[6].
Pada perkembangannya, CSS sudah masuk level 3 untuk sekarang, dimana
dimulai CSS level 1 atau yang sering disebut CSS saja, kemudian level 2 yang
merupakan penyempurnaan dari CSS level sebelumnya, yaitu CSS level 1. CSS
merupakan alternatif bahasa pemrograman web masa yang akan datang, dimana
mempunyai banyak keuntungan, antara lain memiliki ukuran file lebih kecil,
loadfile lebih cepat, dapat berkolaborasi dengan JavaScript, pasangan setia
XHTML, menghemat pekerjaan tentunya, dimana hanya membuat 1 (satu)
halaman CSS, mudah mengganti-ganti tampilan dengan hanya merubah file CSS-
nya saja.
CSS3 merupakan generasi ke-3 dari perkembangan CSS sebelumnya. Jadi,
pada dasarnya, pengertian CSS3 sama saja dengan pengertian CSS generasi paling
awal. Hanya saja, beberapa standar baru untuk CSS3 menggantikan CSS2 dan
mungkin akan membuat pengguna dapat bereksplorasi lebih dalam lagi untuk
membuat tampilan situs lebih menarik dan mulai meninggalkan situs yang
membuat menunggu dengan loading yang lama. Beberapa kelebihan yang ada
pada CSS3 antara lain:
1. CSS3 dapat lebih detail untuk mendeklarasikan objek yang akan diberikan
style. Contohnya di dalam objek ëblockquoteí dapat membuat (quote) di awal
dan akhirnya menggunakan font lebih besar dari konten blockquote itu sendiri.
2. CSS3 kaya akan fitur untuk animasi dan efek untuk text atau objek, yang
sebelumnya tidak dapat dilakukan oleh CSS2/CSS2.1, dan dapat
menggantikan peran gambar. Standar web 2.0 atau situs interaktif dan efisien
berdasar dari penggunaan CSS.
3. Dengan CSS3 situs akan dapat lebih berkembang dan lebih interaktif lagi
dengan pengunjung.
4. CSS3 dapat mengurangi ukuran file yang di-load dan lebih ringan, secara
otomatis mengurangi bandwidthinbound/outbound situs.
CSS3 memiliki fasilitas untuk shadow dari suatu div layout, fitur
transparansi, gradien warna pada border, warna pada teks yang diseleksi, fitur
skala memperkecil atau memperbesar layout, kolom pada teks, dan fitur gradient
pada background.
CodeIgniter merupakan salah satu dari sekian banyak framework PHP
yang ada. CodeIgniter dikembangkan oleh Rick Ellis. Tujuan dari pembuatan
framework CodeIgnitermenurut panduan penggunaan adalah untuk menghasilkan
framework yang dapat digunakan untuk pengembangan proyek pembuatan situs
web dengan cara penggunaan Kode Program secara manual, dengan menyediakan
banyak sekali pustaka yang dibutuhkan dalam pembuatan situs web, dengan
antarmuka yang sederhana dan struktur logika untuk mengakses pustaka yang
dibutuhkan. CodeIgniter membiarkan user untuk memfokuskan diri pada
pembuatan situs web dengan meminimalkan pembuatan kode untuk berbagai
tujuan pembuatan situs web[7].
5
MVC (Model View Controller) merupakan arsitektur yang sangat berguna
dalam melakukan pengembangan sebuah sistem. Arsitektur metode MVC
dipisahkan dalam layer model, view, dan controller, dapat dilihat pada Gambar 2.
Gambar 2ArsitekturModel, View, Controller[7]
Pada Gambar 2 tersebut ditunjukkan tiga komponen yang terdapat dalam
pola MVC dan interaksi yang terjadi. Penjelasan komponen dalam Model, View,
Controller akan dijabarkan sebagai berikut:
a. Model
Bertugas untuk mengelola berbagai model yang diperlukan oleh
aplikasi.Menampung berbagai class-object-component yang berjalan di
bagian belakang dari sistem dan umumnya tidak dapat dilihat prosesnya oleh
user. Bagian model ini banyak berisikan bagian-bagian yang mengelola data
dengan sistem query database, mengambil dan menyimpan data, menghapus
data, mengurutkan data, mencari data dan proses lainnya yang berhubungan
dengan pengelolaan data. Bagian ini juga berisikan model yang menampung
berbagai metode pemodelan data, metode control, metode pengolahan citra,
dan metode-metode lainnya.
b. View
Bertugas mengelola tampilan aplikasi, sesuai dengan namanya, merupakan
bagian yang dapat dilihat dan dikelola oleh user. Bagian ini umumnya terdiri
dari tombol-tombol, tabs, check list, combo box, teks, audio, button, list,
table, dan lain-lain.
c. Controller
Bertugas untuk menghubungkan antara bagian model dan bagian view.
Bagian ini umumnya menangani request yang disampaikan saat user melalui
bagian view untuk mencari padanan model yang sesuai dengan request
tersebut.Controller juga bertugas untuk menyampaikan hasil request kembali
kepada user melalui bagian view, misalnya dalam bentuk list, teks, table, atau
grafik .
3. Metode dan Perancangan Sistem
6
Metode pengembangan sistem yang digunakan pada pembuatan aplikasi
ini adalah model prototype. Model prototype merupakan suatu teknik untuk
mengumpulkan informasi tertentu mengenai kebutuhan-kebutuhan informasi
pengguna secara cepat. Pada metode prototype ini, memberi kesempatan
pengembang dan pihak GKI Soka dapat saling berinteraksi selama proses
pembuatan aplikasi.
Gambar 3Prototype Model[8]
Gambar 3 merupakan gambaran tahapan umum dari prototypemodel.Pada
tahapan listen to customer, yaitu tentang kebutuhan aplikasi yang akan dibangun.
Pada tahap ini dilakukan wawancara dengan seorang administrasi gereja atau
administrator sistem informasi gereja dan 5 (lima) orang majelis gereja yang
bertugas sebagai satu Ketua, satu Sekretaris, 3 anggota Majelis, serta seorang
Pendeta. Pada tahap wawancara diperoleh informasi yaitu GKI Soka memiliki
jumlah warga aktif sekitar 205 yang terbagi dalambeberapa kategori warga jemaat
yang dalam uji responden terdapa 64,8% warga jemaat menyatakan setuju dengan
adanya sistem informasi yang dibangun, selain itu sistem informasi gereja
diharapkan mampu memberikan informasi terkait kegiatan gereja GKI Soka
Salatiga, serta dapat memberikan bahan renungan harian bagi warga maupun
masyarakat umum. Dengan demikian, keberadaan GKI Soka Salatiga dapat lebih
dekat dengan warganya melalui sistem informasi yang dibangun.
Tahapan selanjutnya dalam metode prototype yaitu build/revise mock-up
atau membangun aplikasi secara cepat. Pada tahap ini dilakukan pembuatan
aplikasi secara cepat, lebih memfokuskan pada input output aplikasi sesuai
dengan kebutuhan umum yang diketahui pada tahap pertama.Tahap ini
menghasilkan 3 (tiga) prototipe. Prototipe I dibangun dengan menggunakan
bahasa pemrograman PHP, basis data MySQL dan HTML 5. Hasil uji
fungsionalitas prototipe tidak layak karena tampilan aplikasi tidak responsive jika
dijalankan pada device mobile.
Prototipe II dijalankan pada spesifikasi komputer yang sama dengan
prototipe I, dimana uji fungsionalitas prototipe sudah sesuai yang diharapkan
pihak gereja karena dapat dijalankan di device mobile dan tablet.Prototipe II
belum dipergunakan oleh pihak gereja karena admin gereja menginginkan untuk
mampu mengelola icon atau gambar pada tiap tema konten sistem informasi
gereja tersebut, antara lain icon Kontak, icon Profil dan Sejarah Gereja, warta
7
gereja, dan icon tiap tema renungan harian yang ditampilkan sehingga Pada uji
performa prototipe III, yaitu prototipe sudah dapat diterima oleh pihak gereja,
karena pada saat evaluasi dan uji coba oleh admin dan warga gereja, aplikasi
sudah dapat diterima dan dipergunakan sebagai sistem informasi gereja GKI Soka
Salatiga.
Pada tahap customer test-drives mock-up dilakukan uji dan evaluasi
prototype oleh user yaitu pengguna seperti tahap wawancara. Uji dan evaluasi
prototype digunakan untuk mendapatkan umpan balik apakah aplikasi sudah
sesuai dengan kebutuhan user. Tahap ini dilakukan oleh satu admin gereja dan 10
(sepuluh) warga gereja.
Pengujian menggunakan cara uji fungsionalitas sistem, yaitu admin dapat
mengelola warta gereja, renungan harian, galeri, agenda gereja dan melakukan
perubahan password. Sedangkan warga gereja melakukan uji performa aplikasi
dengan cara mengakses sistem dengan berbagai jenis device, antara lain komputer
desktop, laptop, mobile dan tablet, serta menggunakan berbagai platform, yaitu
android dan smartphone.
Evaluasi dilakukan dengan cara wawancara. Jika evaluasi prototype belum
sesuai dengan kebutuhan user, maka dilakukan proses perbaikan dimulai kembali
ke tahap awal dan dilanjutkan ke tahap berikutnya.
Use casediagram sistem merupakan proses autentikasi actor yang dikenal
oleh aplikasi berdasarkan data yang tersimpan pada database server sistem
informasi gereja di web server. Proses Login membutuhkan masukan berupa
username dan passwordAdmin yang ditunjuk oleh GKI Soka Salatiga.
Gambar 4Use Case DiagramSistem
8
Activity diagram menggambarkan aliran aktivitas dalam sistem yang
sedang dirancang, bagaimana masing-masing alir berawal, decision yang mungkin
terjadi, dan bagaimana mereka berakhir. Pada sistem informasi gereja ini
mempunyai 2 (dua) activity diagram, yaitu activity diagramGuest, dan activity
diagramAdmin.
Gambar 5Activity Diagram Admin
Gambar 5 memperlihatkanactivity diagramAdmin, yang merupakan
aktivitas yang dilakukan oleh Admin sistem informasi gereja. Pada penelitian ini,
Admin diberikan kepada pihak sekretariat gereja. Aktivitas-aktivitas tersebut
diantaranya adalah: melakukan proses login untuk proses autentikasi; input dan
Selesai
Mulai
Input Username
dan Password
Login
Benar?
Tidak
Beranda Admin
Ya
Profil Gereja
Kontak
Struktur
Sejarah
Kelola Foto
Kelola Video
Kelola Warta
Kelola Agenda
Kelola
Renungan
Setting
Password
Logout
Ganti Background
Data
Sistem Informasi GerejaSistem Informasi Gereja
9
update profil gereja; updating background sistem; kelola galeri foto dan video;
kelola warta; kelola agenda; setting password; serta melakukan proses logout
keluar dari sistem.
Class diagram menggambarkan interaksi antar class serta atribut-atribut
yang melekat pada class tersebut.Gambar 6 merupakan class diagram sistem yang
dibangun menggunakan framework CodeIgniter denganarsitektur Model-View-
Controller.
Gambar 6Class DiagramSistem
Sistem Informasi Gereja GKI Soka Salatiga, dirancang memiliki 5 (lima)
class yang saling berhubungan, yaitu class control_depan yang memiliki
hubungan one—to-many dengan class mod_gereja, sehingga memungkinkanclass
control_depan dapat mengakses berulangkali setiap operasi dalam mod_gereja.
Class administrator juga memiliki hubungan one-to-many dengan mod_gereja,
sehingga memungkinkanclass administrator dapat mengakses berulangkali setiap
operasi dalam mod_gereja. Selain itu class administrator juga memiliki hubungan
one-to-many dengan mod_login, sehingga memungkinkan class administrator
mengakses mod_login berulang kali atau melakukan login berulang kali.
4. Hasil dan Pembahasan
Metode pengembangan sistem dipergunakan pada penelitian ini adalah
metode prototype. Oleh karena itu, dalam proses implementasi aplikasi Sistem
Informasi Gereja menghasilkan 3 (tiga) prototipe, yang berdasarkan hasil
pengujian merupakan prototype yang sudah sesuai dengan kebutuhan pada Gereja
Kristen Indonesia Soka Salatiga. Untuk lebih memperjelas proses pengembangan
sistem dapat dilihat dalam Tabel 1.
10
Tabel 1Dokumentasi Prototype
No Spesifikasi Deskripsi Testing dan
Validasi
Keterangan
1 Beranda
GuestResolusi
>= 768 px
Tampilan Web dan
mampu menampilkan
informasi Profil, Galeri,
Warta, Agenda,
Renungan, Kontak, Map
Lokasi Gereja, dan
Komentar
Berhasil
ditampilkan
OK
2 Beranda Guest
Resolusi < 768
px
Tampilan Mobile dan
puldownmenu untuk
menampilkan informasi
Profil, Galeri, Warta,
Agenda, Renungan,
Kontak, Map Lokasi
Gereja, dan Komentar
Berhasil
ditampilkan
OK
3 Button submenu Menampilkan detil
informasi Profil, Galeri,
Warta, Agenda,
Renungan, Kontak
Berhasil
ditampilkan.
OK
4 Login Admin Login untuk Admin Belum ada -
5 Kelola Gambar
Header dan icon
submenu
Fasilitas Admin untuk
dapat mengelola gambar
header pada beranda dan
icon submenu
- Permintaan
Sistem Informasi Gereja GKI Soka Salatiga diimplementasikan
menggunakan bahasa pemrograman PHP dengan framework CodeIgniter dan
basis data MySql. Untuk tampilan menggunakan HTML 5 dan CSS3, sehingga
jika aplikasi dijalankan pada device dengan resolusi 1366 x 768 px dapat dilihat
pada Gambar 7, dan jika aplikasi dijalankan pada device dengan resolusi 360 x
640 px dapat dilihat pada Gambar 7.
Gambar 7Tampilan Beranda Resolusi 1366 x 768 px
11
Selanjutnya pada bagaian ini akan menjelaskan penerapan teknologi
HTML 5 kedalam aplikasi. Hal ini disebabkan karena style CSS3 hanya dapat
berfungsi jika browser yang digunakan memiliki teknologi HTML 5, antara lain
GoogleChrome, Mozzila Firefox versi 12, dan sebagainya. Untuk dapat lebih
jelas, pada Kode Program 1 dituliskan beberapa baris program yang menyatakan
penggunaan HTML 5.
Kode Program 1merupakan perintah untuk memanggil HTML 5.Perintah
pada baris ke-1 sampai baris ke-2 merupakan tag pembuka HTML 5. Perintah
pada baris ke-3 merupakan pembuka tag head dari header. Perintah pada baris
baris ke-4 merupakan judul dari halaman yang akan dimuat. Perintah pada baris
ke-5 sampai baris ke-6, merupakan script untuk halaman supaya dapat
menyesuaikan dengan resolusi browser yang memuat.
Aplikasi Sistem Informasi Gereja pada GKI Soka Salatiga, berdasarkan
rancangan pada bab 3 harus memiliki kemampuan responsive terhadap ukuran
layar atau resolusi dari device yang dipergunakan. Oleh karena itu, pada kode
program pada gambar 9 sebagai salah satu contoh halaman pada program view
aplikasi dalam menerapkan CSS3, supaya responsive terhadap layar device yang
digunakan.
Kode Program 2 merupakan perintah penerapan style CSS3 yang
dipergunakan untuk setting layout background pada program tampilan atau class
view Sistem Informasi Gereja. Perintah pada baris ke-1 adalah statement untuk
menentukan maksimal lebar dari content. Perintah pada baris ke-2 merupakan id
yang akan diberi style didalamnya. Perintah pada baris ke-3 adalah bagian untuk
1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2. <html xmlns="http://www.w3.org/1999/xhtml">
3. <head>
4. <title><?php echo strtoupper($profil[0]->nama)?></title>
5. <meta charset="UTF-8">
6. <meta name="viewport" content="width=device-width, initial-
scale=1.0">
1. @media (max-width: 1024px) {
2. #templatemo-carousel {
3. background: url('../images/templatemo_carousel_bg_s.jpg') no-
repeat center center;
4. -webkit-background-size: cover;
5. -moz-background-size: cover;
6. -o-background-size: cover;
7. background-size: cover;
8. overflow-x: hidden;
9. margin-bottom:0;
10. height: 500px;}}
Kode Program 1 Perintah Untuk Proses Memanggil HTML 5
Kode Program 2Perintah Untuk Setting Logout
12
menentukan image yang digunakan sebagai background. Perintah pada baris ke-4
sampai ke baris 7 merupakan settingbrowser yang mengakses untuk menentukan
ukuran background. Pada statement inilah hanya dimiliki oleh style CSS3.
Perintah pada baris ke-8 merupakan statement untuk menutup kelebihan tinggi
dari image. Perintah pada baris ke-9 menentukan margin bawah yang ditentukan
pada baris 2. Perintah pada baris ke-10, untuk menentukan tinggi dari halaman
yang ditentukan oleh perintah pada baris ke-2.
Aplikasi Sistem Informasi GerejaGKI Soka Salatiga juga diuji kepada
seorang admingereja dan 10 warga gereja. Pada tahap uji terhadap responden juga
dilakukan simulasi kelola warta gereja. Tabel 3 merupakan hasil uji sistem kepada
responden sebanyak 11 orang responden,yang terdiri dari seorang admin gereja
dan 10 warga gereja.
Tabel 2Hasil Uji Sistem Terhadap Responden
No Jenis Pernyataan Pernyataan Responden (%)
STS TS TT S SS
Proses Login
1. Proses Login mudah
dilakukan.
- - - 40 60
2. Aplikasi sudah user
Friendly
- - - 55 45
3. Pesan Error dalam aplikasi - - 4 46 50
4. Tampilan sistem
menyesuaikan resolusi layar
tablet
- - - 85 15
5. Tampilan sistem
menyesuaikan resolusi layar
mobile
- - - 25 75
6. Sistem informasi yang
dibangun sudah dapat
memberikan informasi
lengkap sebagai pusat
informasi gereja
- - - 78 22
Rata-rata persentase 0.2 64,8 35
Berdasarkan hasil uji sistem terhadap 11 orang responden pada Tabel 3,
35% responden menyatakan sangat setuju, bahwa Sistem Informasi Gerejasudah
sesuai dengan kebutuhan, 64.8% responden menyatakan setuju, bahwa Sistem
Informasi Gerejasudah sesuai dengan kebutuhan, dan 0.2% responden
menyatakan tidak tahu, bahwa Sistem Informasi Gerejasudah sesuai dengan
kebutuhan.
Berdasarkan hasil pengujian responden dapat disimpulkan bahwa, aplikasi
Sistem Informasi GerejaGKI Soka Salatiga sudah dapat dipergunakan dan sudah
sesuai dengan kebutuhan sebagai pusat informasi gereja.
13
5. Simpulan
Berdasarkan hasil penelitian, pembahasan dan pengujian yang
dilakukan dapat disimpulkan bahwa : Sistem Informasi Gereja berbasis
web pada Jemaat GKI SOKA menyediakan berbagai informasi terkait
geraja seperti renungan, warta jemaat, sejarah gereja, informasi kegiatan,
laporan foto dan video dapat diakses secara online, sistem Informasi
Gereja berbasis web mempermudah Jemaat GKI SOKA untuk mengetahui
berbagai informasi mengenai gereja.
Selain itu Berdasarkan kebutuhan akan informasi maka Gereja
Krisrten Indonesia (GKI) memerlukan suatu sistem berbasis web yang
dapat memberikan informasi serta media interaktif antara jemaat dan
gereja. Perancangan dan implementasi sistem web dikembangkan dengan
mengggunakan pendekatan prototype serta menggunakan arsitektur MVC
(Model View Controller) dengan bahasa pemrograman HTML 5, php, sql
dan CSS3. Berdasarkan hasil survey yang dilakukan terhadap pengguna
diketahui bahwa 35% reponden menyatakan sangat setuju, 64,8%
menyatakan setuju, dan 0,2% menyatakan tidak tahu tentang perancangan
dan implementasi sistem informasi berbasis web jemaat GKI SOKA
Salatiga.
14
6. Daftar Pustaka
[1] Jogiyanto,H.M., 2005. Analisis dan Desain Sistem Informasi,
ANDI,Yogyakarta.
[2] Kadir, A., 2002.Pengenalan Sistem Informasi, Yogyakarta, Penerbit Andi.
[3] Safwat, S.R dkk, 2013, Rancang Bangun Sistem Informasi Umat Gereja Katolik Gembala Yang Baik Surabaya Berbasis Web, http://download.portalgaruda.org/article.php?article=120176&val=5494, Diakses pada tanggal 2 September 2014
[4] Tambunan, G.D.& Somya, R., 2013, Perancangan Informasi
Manajemen Anggota Gereja BerbasisWeb Menggunakan Teknologi
HMVC. Skripsi, FTI,Universitas Kristen Satya Wacana.
[5] Utomo, E. (2013). MOBILE WEB PROGRAMMING HTML5, CSS3, jQuery Mobile. Yogyakarta: ANDI.
[6] Abdullah, 2003. Tip & Trik Desain Web Dinamis dengan CSS dan
JavaScript.Jakarta: Elex Media Komputindo.
[7] eNode Inc, 2002, ArsitekturModel, View, Controller. Yogyakarta : Skripta Media.
[8] Pressman, R. S., 2001. Rekayasa Perangkat Lunak. Edisi ke-2. LN
Harnaningrum. Penerjemah:Yogyakarta:Andi .