Perancangan Sistem Informasi
Gereja Berbasis Responsive Web
(Studi Kasus : Gereja Kristen Jawa Salatiga Utara)
Artikel Ilmiah
Peneliti:
Julius Chrisostomus Aponno (672014022)
Suprihadi, S.Si., M.Kom.
Program Studi Teknik Informatika
Fakultas Teknologi Informasi
Universitas Kristen Satya Wacana
Salatiga
Maret 2019
ii
Perancangan Sistem Informasi
Gereja Berbasis Responsive Web
(Studi Kasus : Gereja Kristen Jawa Salatiga Utara)
Artikel Ilmiah
Diajukan Kepada
Fakultas Teknologi Informasi
Untuk Memperoleh Gelar Sarjana Komputer
Peneliti:
Julius Chrisostomus Aponno (672014022)
Suprihadi, S.Si., M.Kom.
Program Studi Teknik Informatika
Fakultas Teknologi Informasi
Universitas Kristen Satya Wacana
Salatiga
Maret 2019
vi
Perancangan Sistem Informasi
Gereja Berbasis Responsive Web
(Studi Kasus : Gereja Kristen Jawa Salatiga Utara)
Julius Chrisostomus Aponno1, Suprihadi, S.Si., M.Kom2 Fakultas Teknologi Informasi
Universitas Kristen Satya Wacana Jl. Diponegoro 52-60, Salatiga 50711, Indonesia E-mail: christoaponno@gmail.com1, suprihadi@uksw.edu2
Abstract
Gereja Kristen Jawa Salatiga Utara has information on worship schedules, news, agendas and announcements. The Information System in the Gereja Kristen Jawa Sataiga Utara is currently still manual. To overcome this problem, the website of the Gereja Kristen Jawa Salatiga Utara to improve the efficiency of the information that will be given to the congregation. The technology used to support the process of designing and implementing websites Gereja Kristen Jawa Salatiga Utara among them is PHP and WAMP, bootstrap framework as a supporter in building responsive web design. The results of this study are the Design of Responsive Web-Based Church Information Systems.
Keywords: Church website, PHP, WAMP, and Bootstrap Framework Abstrak
Gereja Kristen Jawa Salatiga Utara memiliki Informasi jadwal ibadah, warta, agenda dan penggumuman. Sistem Informasi di Gereja Kristen Jawa Salatiga Utara saat ini masih manual.Untuk mengatasi hal tersebut maka dibuatlah website Gereja Kristen Jawa Salatiga Utara guna meningkatkan efisiensi informasi yang akan di berikan kepada warga jemaat. Teknologi yang digunakan untuk mendukung proses perancangan dan implementasi website Gereja Kristen Jawa Salatiga Utara di antaranya adalah PHP dan WAMP, framework bootstrap sebagai pendukung dalam membangun desain web secara responsif. Hasil dari penelitian ini adalah Perancangan Sistem Informasi Gereja Berbasis Responsive Web.
Kata Kunci : Website gereja, PHP, WAMP, dan Framework bootstrap
1 Mahasiswa Program Studi Teknik Informatika, Fakultas Teknologi Informasi, Universitas Kristen
Satya Wacana Salatiga
7
1. Pendahuluan
Gereja merupakan sarana dan wahana yang sangat baik dalam pembinaan sumber daya manusia. Oleh karena itu gereja perlu mendapat perhatian yang lebih serius baik itu oleh pemerintah, sinode dan semua warga gereja . Dengan perkembangan teknologi yang semakin pesat, sarana dan prasarana gereja pun harus mengikuti perkembangan teknologi, salah satunya dengan media komputerisasi yaitu internet. Dengan internet dimana pihak gereja maupun warga gereja dapat mengakses informasi kapan saja dan dimana saja. Banyak sekali manfaat dari internet. Salah satunya adalah pembuatan sistem informasi berbasis web, sistem ini akan menampilkan informasi mengenai hal-hal sesuai dengan apa yang dikehendaki oleh pembuat dan di setujui oleh pihak gereja. Sebuah sistem informasi yang baik tentunya mampu menjalankan semua hal yang berkaitan dengan gereja dan hal-hal spesifik. Semua komponen akan dipermudah dengan adanya sistem ini. Untuk membuat sebuah program yang baik, merupakan kunci utama untuk mencapai kesempurnaan.
Namun diketahui masih terdapat hambatan dalam memudahkan warga untuk memperoleh informasi gereja yang cepat dan akurat. Pemberian informasi di gereja Kristen jawa salatiga utara saat ini masih manual yaitu, proses pemberitahuan informasi dilakukan dengan cara informasi yang akan di berikan kepada warga gereja di tempelkan pada papan pengumuman yang berada di gereja salatiga utara dan di wartakan dalam ibadah minggu. Informasi gereja Kristen jawa salatiga utara masih berupa File Microsoft
Word untuk dilampirkan pada papan pengumuman.
World Wide Web (WWW) adalah sebagian besar situs web dibangun dan dikelola oleh departemen TI. Situs web pertama milik perusahaan besar, organisasi ilmiah dan pemerintah. Saat ini, siapa pun yang memiliki keterampilan komputer dasar dapat melakukannya membangun situs web mereka sendiri. Dengan bantuan platform online, setiap pengguna dengan cepat mendapatkan ruang web. Langkah demi langkah menggunakan CMS, mudah untuk membuat blog dan bahkan toko online.
Saat ini, desain situs web telah menjadi industri yang berkembang. Web yang bagus desain telah membuat beberapa bisnis tumbuh dan berkembang. Sisi berlawanan dari yang buruk situs web yang dibangun menyebabkan kegagalan. Ada beberapa tips yang disarankan untuk mendesain web situs: tata letak konten yang baik, navigasi situs sederhana, skema warna yang sesuai, desain yang ramah p engguna kompatibel dengan perangkat apapun dan dapat dilihat oleh resolusi layar apa pun.
Framework Bootstrap, awalnya bernama Twitter Blueprint, dikembangkan oleh Mark Otto dan Jacob Thorton di Twitter (2010) sebagai kerangka kerja untuk mendorong konsistensi di alat internal. Dan terus berkembang sampai saat ini dan Framework Bootstrap telah menjadi salah satu front-end framework yang paling popular dan merupakan projek open source di dunia. Framework Bootstrap merupakan Framework HTML & CSS, yang berfungsi untuk situs web dan aplikasi web. Framework Bootstrap berisi HTML & CSS desain berbasis template untuk tipografi, bentuk, tombol, navigasi dan komponen antarmuka lainnya, serta opsional JavaScript ekstensi. Hal ini bertujuan untuk memudahkan 3 pengembangan dari web dinamis dan aplikasi web. Framework Bootstrap kompatibel dengan versi terbaru dari Google Chrome, Firefox , Internet Explorer , Opera, dan Safari browser, meskipun beberapa browser tersebut tidak didukung pada semua platform. Saat ini Framework bootstrap sudah berkembang sampai versi 4.0 alpha release yaitu dengan adanya penambahan Sass dan Flexbox [1].
Dengan pengolahan data yang baik maka kita dapat dengan mudah mengaskes data yang dibutuhkan. Selama ini di Gereja Kristen Jawa Salatiga Utara informasi belum mengoptimalkan system basis data berbasis responsive web ini dengan baik. Gereja
8
memerlukan teknologi informasi dalam rangka menjalankan perannya untuk melayani jemaat. Pemanfaatan Information, Communication, and Technology (ICT) oleh Gereja yang terkonsentrasi dalam pelayanan jemaat disebut e-government [2]. E-government adalah pemanfaatan teknologi informasi dan komunikasi (TIK) guna pelaksanaan pemerintahan yang efisien dan murah, dengan meningkatkan pelayanan masyarakat dengan cara menyediakan sarana publik sehingga masyarakat mudah mendapatkan informasi, dan menciptakan pemerintahan.
Dengan adanya internet, informasi yang ada dapat dengan mudah kita dapatkan dengan cepat. Saat ini kita dapat mengakses internet dari berbagai macam perangkat mulai dari desktop, tablet, dan juga mobile selular. Media tersebut memiliki layar dengan ukuran yang berbeda. Sehingga dengan adanya responsive web maka kita akan lebih mudah membuka halaman web tersebut dari berbagai ukuran layar yang berbeda. Dengan responsive web , tampilan pada web akan menyesuaikan dengan besar kecilnya layar yang kita gunakan.
Berdasarkan latar belakang masalah dari penelitian ini yaitu, proses pemberian informasi yang masih manual maka diperlukan suatu sistem yang berkapabilitas untuk memudahkan pemberian informasi kepada warga gereja. Adanya penelitian ini bermanfaat guna merancang dan mengimplementasikan system berbasis web untuk memudahkan warga jemaat dalam menerima informasi gereja dengan cepat dan akurat. Penelitian ini menjelaskan bagaimana merancang dan mengimplementasikan sistem
website berbasis responsive web pada gereja Kristen jawa salatiga utara. Dimana informasi
dapat mengakses mengunakan mobile phone dan komputer yang terkoneksi internet.
2. Tinjauan Pustaka
World Wide Web (WWW) Situs web pertama adalah halaman berbasis teks sederhana dengan teks blok rata rata kiri dan tautan biru putih latar belakang (gambar 1).
Gambar 1 Evolusi Infografis Desain Web
Michael Urbanus Pah dkk, Gereja Utusan Pantekosa Kartasura belum memiliki sistem informasi yang dapat diakses secara online. Sistem ini semaksimal mungkin memberikan informasi data gereja kepada user, jemaat, pengurus atau admin. Hal ini menyebabkan pihak pengelola data gereja kesulitan dalam menambah data gereja. Pada
9
penelitian ini dilakukan perancangan sistem informasi gereja tersebut dengan framework CodeIgniter dan library Bootstrap. Sistem dikembangkan menggunakan metode prototyping di mana terdapat proses evaluasi. Hasil pengujian menunjukkan bahwa pengembangan sistem infromasi gereja ini membantu pengelola data dalam mengelola data gereja dan dapat menampilkan data gereja dalam halaman web yang responsive. [3]
Framework CSS Materialize, framework ini merupakan sekumpulan class CSS yang sudah disediakan guna mempermudah pengembangan web. Hasil dengan teknologi yang digunakan adalah terciptanya sistem web simpan pinjam yang responsive untuk memudahkan karyawan dan anggota untuk mendapatkan informasi tentang data simpan pinjam yang dimiliki dan membantu manager dan admin dalam memantau kegiatan transaksi koperasi. [4]
Responsive Web Design merupakan suatu teknik desain yang membuat website dapat tampil dengan baik di berbagai browser dengan ukuran layar yang berbeda seperti yang terlihat pada Gambar 2. Sebuah halaman web yang dirancang dengan RWD mampu menyesuaikan dengan ukuran layar yang digunakan.
Gambar 2 Ilustrasi Responsive Web Design pada Layar Mobile, Tablet dan Desktop
Google merekomendasikan responsive web design bagi pengembang website untuk dapat melayani kebutuhan para pengguna agar optimal pada setiap jenis perangkat desktop maupun mobile. Responsive web design memiliki satu aspek dimana hanya diperlukan satu website untuk berbagai perangkat dan tetap memberikan user experience yang baik [5]. Web responsive design pertama kali diperkenalkan oleh Ethan Marcotte pada artikelnya yang sangat inspiratif Web Responsive Design. Responsive Web Design (RWD) memiliki tiga komponen penting, yaitu The The Fluid Grid, Media Queries, Flexible Image. Fluid Grid, atau grid yang fleksibel, mengacu pada penggunaan ukuran relatif dengan basis persentase atau ems dibandingkan jenis ukuran absolut seperti pixel atau point. Media Queries melihat kemampuan dari perangkat yang sedang digunakan dalam website, dimana halaman web bisa menggunakan CSS style yang berbeda sesuai dengan karakteristik dari perangkat atau device yang digunakan user, dan pada umumnya media queries mendeteksi ukuran jendela browser. Flexible Image memungkinkan mereka untuk memuat gambar dengan size berbeda pada perangkat yang berbeda. Dengan kata lain ukuran image pada halaman web juga dapat menyesuaikan mengikuti lebar layar pada perangkatnya [6].
10
3. Metode Penelitian
Secara umum penelitian terbagi ke dalam 4 (empat) tahap, yaitu: (1) Analisis kebutuhan dan pengumpulan data, (2) Perancangan Sistem Informasi Gereja meliputi Perancangan desain (UML), Perancangan Database., (3) implementasi dan pengujian sistem. (4) penulisan laporan hasil penelitian.
Gambar 3 Tahapan Penelitian
Gambar 3 menunjukkan tahapan penelitian yang dijelaskan sebagai berikut. Tahap pertama dalam tahapan penelitian adalah Pengumpulan Data, informasi kebutuhan diperoleh dengan melakukan wawancara dengan administrator. Dari hasil wawancara didapatkan : (a)Diperlukan suatu aplikasi yang bisa digunakan untuk memperoleh data akurat secara
online. (b) Sistem memuat segala informasi yang berkaitan dengan Gereja Kristen Jawa
Salatiga (c) Semua dokumen gereja dapat diupload disistem. Tahap kedua merupakan perancangan dan selanjutnya akan dimasukan kedalam sebuah metode. Metode yang digunakan dalam melakukan perancangan sistem website berbasis web pada Gereja Kristen Jawa Salatiga Utara.Tahap ketiga implementasi dan pengujian sistem yaitu mengimplementasikan sistem yang sudah dirancang kedalam server Gereja Kristen Jawa Salatiga Utara secara online kemudian dilakukan pengujian. Pengujian aplikasi akan dilakuakn oleh Gereja Kristen Jawa Salatiga Utara. Analisis hasil pengujian dilakukan untuk mengetahui apakah aplikasi telah sesuai dengan yang diharapkan. Tahap keempat yaitu penulisan laporan hasil penelitian. Tahap ini digunakan untuk dokumentasi proses dari tahap awal hingga tahap akhir dalam bentuk tulisan. Perancangan sistem ini akan menggunakan
Unified Modelling Language (UML). UML bersifat scalability, yaitu objek lebih mudah
dipakai untuk menggambarkan sistem yang besar dan komplek. UML juga bersifat dynamic
modelling, yaitu model dapat digunakan untuk pemodelan sistem dinamis dan real time.
Analisis Kebutuhan dan Pengumpulan Data
Perancangan Sistem
Menggunakan css dan menggunakan database untuk menjimpan datajemaat
Implementasi dan Pengujian Sistem
11
Gambar 4 Model Prototype (Pressman, 2001)
Gambar 4 merupakan tahap - tahap pada metode prototype yaitu pengumpulan kebutuhan, perancangan, dan evaluasi prototype. pengumpulan kebutuhan yaitu dengan meneliti langsung kebutuhan apa yang sedang di butuhkan pada Gereja Kristen Jawa Salatiga Utara. Dari tahap pengumpulan kebutuhan ini dapat ditentukan tujuan umum, kebutuhan yang diperlukan dan gambaran bagian-bagian yang akan dibangun berikutnya pada website. Tahapan selanjutnya pada metode prototype yaitu perancangan. Perancangan sistem nantinya akan meliputi alur program dengan menggunakan UML.
Gambar 5 Use Case Diagram
Gambar 5 menunjukkan use case diagram yang akan digunakan pada website Gereja Kristen Jawa Salatiga Utara. Dalam use case terdapat 1 user yaitu admin. Admin disini merupakan petugas dari Gereja Kristen Jawa Salatiga Utara yang memiliki akses penuh dalam menginputkan dan mengelola data.
12
Gambar 6 Class Diagram Sistem
Gambar 6 merupakan class diagram yang akan digunakan dalam pembuatan aplikasi. Gambar tersebut menunjukkan relasi antar class yang terdapat controller di setiap class nya. Relasi dari setiap class di atas akan digunakan untuk pembuatan relasi antar tabel di database.
4. Hasil dan Pembahasan
Hasil dari penelitian ini adalah website Gereja Kristen Jawa Salatiga Utara yang dapat mempermudah jemaat dalam memperoleh informasi tentang Gereja Kristen Jawa Salatiga Utara yang sebelumnya masihmenggunakan cara konvensional yaitu dengan menggunkan kertas dan dengan proses yang memakan waktu relative lama.dengan adanya website ini proses penerimaan informasi dari gereja untuk jemaat relative lebih cepat sehingga menjadi lebih efektif dan efisien. Hal ini dibuktikan dalam system mulai dari login, modul berita, modul video, modul album, modul web, modul interaksi, manajemen dan modul interaksi dilakukan secara realtime.
13
Gambar 7 Halaman login Website GKJ Salut
Gambar 7 merupakan halaman login yang memiliki 2 dua inputan text field yaitu from username dan password. User harus mengisis berdasarkan username dan password yang telah di isikan di database. Kode program dapat di lihat di kode program 1
Kode program 1 menu login
Kode program 1 merupakan function untuk login ke dalam system. Apabila username dan password cocok maka akan di alihkan menuju halaman dashboard admin seperti gambar kode program 1.
14
Gambar 8 halaman utama dashboard admin
Gambar 8 merupakan halaman awal pada aplikasi yang langsung mengarahkan ke dashboard. Halaman utama memberikan informasi kepada admin. Selain itu pada halaman ini admin juga dapat mengolah berbagai menu seperti modul berita, modul video, modul album, modul web, modul interaksi, manajemen dan modul interaksi.
Kode program 2 tambah berita
15
Gambar 9 halaman tambah berita
Pada gambar 9 merupakan tampilan halaman tambah berita. Pada halaman ini admin dapat mengolah berita yang akan di tampilkan pada halaman utama website GKJ Salatiga Utara
Gambar 10 Contoh tampilan background pada website GKJ Salatiga Utara
Pada gambar diatas merupakan Desain Responsive web yang dapat diakses dengan perangkat (PC/HP/Tablet) tampilannya berbeda karena menyesuaikan dengan layar.
16 .
Gambar 11 Contoh tampilan menu berita pada website GKJ Salatiga Utara.
17
Pada sistem yang dikembangkan, dilakukan dua jenis pengujian. Pengujian alpha, dan pengujian beta. Pengujian alpha berfungsi untuk mengetahui apakah sistem sudah menyimpan, mengolah, dan menampilkan data dengan baik dan benar. Pengujian alpha dilakukan oleh pengembang sistem, untuk memastikan bahwa sistem bekerja semestinya. Jika pada pengujian alpha sistem berhasil lolos maka dapat diujikan kepada calon pengguna.
Tabel 1 Hasil Pengujian alpha
Modul Pengujian Ekspektasi Hasil Sistem Kesimpulan
Login Login dengan username dan password yang tepat Login dengan username ATAU password yang salah Muncul form menu dashboard Muncul pesan kesalahan login. Muncul form menu dashboard Muncul pesan kesalahan login. Lolos Pengujian Lolos Pengujian Dashboard Modul Berita Modul Video Modul Album Modul Web Modul Interaksi Manajemen Modul Informasi Muncul form menu modul berita Muncul form menu modul video Muncul form menu modul album Muncul form menu modul web Muncul form menu modul interaksi Muncul form menu manajemen Muncul form menu modul informasi Muncul form menu modul berita Muncul form menu modul video Muncul form menu modul album Muncul form menu modul web Muncul form menu modul interaksi Muncul form menu manajemen Muncul form menu modul informasi Lolos Pengujian Lolos Pengujian Lolos Pengujian Lolos Pengujian Lolos Pengujian Lolos Pengujian Lolos Pengujian
18
Berdasarkan hasil pengujian alpha, disimpulkan bahwa sistem dapat menyimpan dan mengolah data dengan baik. Jika terdapat kekurangan input maka sistem dapat memberikan peringatan, sehingga dapat mengurangi kesalahan yang terjadi pada website.
Tabel 2 Hasil Pengujian Kuesioner (15 Responden)
No Pertanyaan SS S C TS STS
1 Sistem memudahkan dalam memperoleh informasi gereja
13 2
2 Sistem mudah untuk digunakan 15
3 Sistem memberikan pesan kesalahan yang jelas, ketika terjadi kesalahan proses pengimputan data
15 4
Desain tulisan dan icon menarik dan dipahami
15 5 Sistem memberikan informasi yang lengkap 13 2 6 Sistem dapat mempercepat proses memperoleh
informasi gereja
15
Dari pengujian tersebut didapatkan hasil bahwa pengguna dapat menggunakan aplikasi dengan mudah serta aplikasi dapat memudahkan proses dalam memperoleh informasi gereja
5. Simpulan
Dalam penelitian ini dirancang sebuah aplikasi sistem website yang memanfaatkan teknologi responsive web untuk desain tampilan website Gereja menggunakan metode
prototype dalam pengerjaannya. Berdasarkan hasil perancangan system informasi gereja
berbasis responsive web disimpulakan bahwa website gereja ini dapat memudahkan admin dalam proses input data warta, agenda serta pengumuman minggu Gereja Kristen Jawa Salatiga Utara. Adanya database yang menyimpan prosesnyan dengan dapat membantu
admin untuk membuat sebuah laporan informasi Gereja berupa jadwal ibadah minggu, warta,
agenda dan penggumuman. Adanya website ini membatu jemaat Gereja Kristen Jawa Salatiga Utara dalam melihat informasi gereja.
19
6. Daftar Pustaka
[1] Anonim. 2016. Pengertian Bootstrap dan
Fungsinya.http://www.pintarkomputer.org/2016/05/pengertian-bootstrap-dan- fungsinya.html (diakses tanggal 21 November 2016).
[2] Nurhadryani Y. 2009. Memahami konsep Governance serta hubungannya dengan e-Government dan e-Demokrasi. Di dalam : Seminar Nasional. Informatika 2009; 2009 Mei 23; Yogyakarta, Indonesia.Yogyakarta(ID) : ISSN. hlm 111-117.
[3] Perancangan Sistem Infromasi Gereja Berbasis Web menggunakan Framework CodeIgniter (studi kasus : Gereja Utusan Pantekosta Kartasura).
[4] Perancangan Aplikasi Sistem Simpan Pinjam Berbasis Responsive Web Design dengan Framework CSS Materialize (Studi Kasus : Koperasi Nusantara).
[5] Reza Fadlan, 2014, Prototype Web Responsive Design pada UIN Syarif Hidayatullah Jakarta Menggunakan Framework Bootstrap, Jakarta: UIN Syarif Hidayatullah
