1 Perancangan Sistem Informasi Gereja Berbasis Web menggunakan Framework CodeIgniter (Studi Kasus : Gereja Utusan Pantekosta Kartasura) Artikel Ilmiah...
Perancangan Sistem Informasi Gereja Berbasis Web menggunakan Framework CodeIgniter (Studi Kasus : Gereja Utusan Pantekosta Kartasura)
Artikel Ilmiah
Diajukan kepada Fakultas Teknologi Informasi untuk memperoleh Gelar Sarjana Komputer
Peneliti: Michael Urbanus Pah (672011191) Ramos Somya, S.Kom., M.Cs.
Program Studi Teknik Informatika Fakultas Teknologi Informasi Universitas Kristen Satya Wacana Salatiga 2016
1
2
3
4
5
1.
Pendahuluan Pengembangan sistem berbasis teknologi web merupakan salah satu bidang teknologi informasi yang perkembangannya begitu pesat. Teknologi web yang sudah memasuki generasi ketiga dan lebih dikenal dengan nama web 3.0 telah memberikan dampak perubahan yang baik pada pembuatan dan pengembangan web. Hal ini terlihat jelas pada kemunculan sejumlah pengembang aplikasi berbasis web yang menyediakan kemampuan mengintegrasikan data yang handal. Bahkan sekarang kian banyak manusia yang belomba-lomba untuk menguasai IPTEK tersebut, sehingga muncul sebuah statement bahwa “Barang siapa yang menguasai IPTEK maka Ia telah menguasai dunia”. Gereja Utusan Pantekosta Kartasura yang telah berdiri sejak lama tentu memiliki arus lalu-lintas data dan informasi yang tinggi. Microsoff Excel masih digunakan sebagai pengelolaan datanya. Hal ini membuat petugas kurang optimal dalam mengelola data. Misalnya hasil data gereja masih berupa print out di kertas, di mana kertas-kertas tersebut tersimpan dalam lemari penyimpanan. Cara kerja petugas saat memerlukan data yang akan dicari adalah membuka lemari penyimpanan dan mencari data yang akan dicari, sehingga petugas memerlukan waktu 2 jam untuk mencari suatu data. Seiring berjalannya waktu kertas-kertas tersebut bisa saja rusak karena dimakan rayap atau dimakan usia. Pada saat petugas ingin menambah data, menghapus atau memperbaharui data, petugas harus pergi ke lemari penyimpanan mencari data, kemudian menggantinya dengan Microsoft Excel, setelah semua terganti di print ulang dan disimpan lagi dalam lemari penyimpanan. Proses tersebut bisa memakan waktu selama 1minggu. Hal tersebut mendorong untuk membuat sebuah aplikasi dengan memanfaatkan framework CodeIgniter. Pemilihan penggunaan framework CodeIgniner adalah karena framework tersebut tergolong ringan sehingga tidak memberatkan kerja server. Selain itu framework CodeIgniter juga mendukung Model View Controller (MVC), sehingga pengembangan aplikasi akan menjadi lebih terorganisir dengan baik. Framework CodeIgniter juga menyediakan library yang dapat membantu dalam pengembangan aplikasi, seperti library session dan library MVC yang akan digunakan dalam penelitian ini. Penggunaan library Bootstrap membantu dalam membuat sistem informasi ini menjadi responsive, sehingga dapat diakses dari berbagai ukuran layar device. Rumusan masalah Berdasarkan latar belakang penulisan, maka perumusan masalahnya adalah bagaimana merancang sisitem informasi gereja berbasis web dengan menggunakan Framework CodeIgniter yang dapat mengelola data informasi gereja, bagaimana penerapan Framework CodeIgniter untuk membuat sebuah aplikasi perancangan sistem informasi gereja berbasis web. Adapun maksud tujuan pengembangan sistem ini adalah memberikan pemecahan masalah, dengan menggunakan sistem informasi berbasis web dengan menggunakan framework codeIgniter. Sedangkan manfaat yang didapatkan, dapat memberikan sistem untuk penyimpanan pusat data, memanajemen sistem informasi dan data sehingga lebih mudah dalam mengorganisirnya. Batasan masalah dalam penelitian ini adalah perancangan dilakukan dengan membuat ulang sistem informasi, karena sistem yang lama masih menggunakan Microsoft Excel dan juga data berupa print out dikertas dan disimpan di dalam lemari
6
penyimpanan, basis data diganti dengan skema baru yang lebih ringkas, sedangkan perancagan sistem ini digunakan hanya untuk mengelola data informasi gereja yang sudah dinyakatakan layak untuk dilakukan publikasi. 2.
Tinjuan Pustaka
Penelitian terdahulu mengenai pengembangan sistem informasi pendataan jemaat di Gereja Masehi Advent Hari Ketujuh. Hasil dari pengembangan sistem informasi pencatatan data gereja, pencatatan perpindahan jemaat, dan pencatatan kematian dan melakukan pengiriman pesan antara admin gereja dan konferens, dan dapat mengahasilkan laporan yang nantinya dapat digunakan sebagai landasan untuk mengambil keputusan oleh pihak konferens sebagai kantor pusat [1]. Penelitian lain tentang sistem informasi keuangan gereja berbasis web. Hasil dari sistem keuangaan ini pengelolaan data keuangan gereja yang terkomputerisasi akan lebihm memudahkan pekerjaan dan dapat meningkatan kelancaran proses input data keuangan. Mempercepat pengolaan data dan pembuatan laporan, serta informasi yang dihasilkan lebih akurat, cepat lengkap, sehingga terjadinya kesalahan dapat diperkecil [2]. Jika dibandingkan dengan penelitian sebelumnya, penelitian ini berfokus pada hasil perancangan sistem informasi yang pembahasannya mengenai bagaimana permasalahan dalam pengelolaan data gereja berbasis web dan juga menggunakan framework codeIgniter yang tingkat kecepatan yang cepat dalam pemrosesan data. Fokus dari penelitian ini untuk menyelesaikan permasalahan yang terjadi di bagian pengelolaan data yang kurang optimal dan yang prosesnya bisa memakan waktu 1 minggu. Hasil dari penelitian ini diharapkan mampu meningkatkan kinerja pengelola data di Gereja Utusan Pantekosta sehingga lebih optimal. Sistem informasi adalah suatu sistem dalam suatu organisasi yang mempertemukan kebutuhan pengolahan transaksi harian yang mendukung fungsi operasi organisasi yang bersifat manajerial dengan kegiatan strategi dari suatu organisasi untuk dapat menyediakan kepada pihak luar tertentu dengan informasi yang diperlukan untuk pengambilan keputusan. Sistem informasi dalam suatu organisasi dapat dikatakan sebagai suatu sistem yang menyediakan informasi bagi semua tingkatan dalam organisasi tersebut kapan saja diperlukan. Sistem ini menyimpan, mengambil, mengubah, mengolah dan mengkomunikasikan informasi yang diterima dengan menggunakan sistem informasi atau peralatan sistem lainnya [3]. Web adalah suatu metode untuk menampilan informasi di internet, baik berupa teks, gambar, suara maupun video yang interaktif dan mempunyai kelebihan untuk menghubungkan (link) satu dokumen dengan dokumen lainnya (hypertext) yang dapat diakses melalui sebuah browser. Secara umum situs web mempunyai beberapa fungsi, yaitu fungsi komunikasi, fungsi informasi, fungsi hiburan dan fungsi transaksi [4]. Pada konteks penelitian ini, framework dapat diartikan sebagai alat yang digunakan untuk membantu dan memudahkan dalam pembuatan situs web. Framework juga dapat didefinisikan sebagai kumpulan script (terutama class dan function) yang dapat membantu developer dalam menangani berbagai masalah dalam pemrograman seperti koneksi ke basis data, pemanggilan variable dan fungsi-fungsi 7
lainnya sehingga developer dapat lebih fokus dan lebih cepat membangun aplikasi [5]. Sebuah framework umumnya telah menyertakan perintah-perintah siap pakai yang dibutuhkan dalam membuat suatu aplikasi, namun pihak developer tetap harus menulis kode sendiri dan harus menyesuaikan dengan lingkungan framework yang digunakan. CodeIgniter (CI) adalah salah satu framework PHP yang tangguh dan popular. CodeIgniter tergolong framework dengan ukuran kecil dan cukup mudah dikuasai. CI juga datang dengan manual yang tergolong lengkap. CodeIgniter merupakan aplikasi sumber terbuka yang berupa framework PHP dengan model MVC (Model, View, Controller) untuk membangun website dinamis dengan menggunakan PHP. CodeIgniter memudahkan developer untuk membuat aplikasi web dengan cepat mudah dibandingkan dengan membuatnya dari awal. CodeIgniter dirilis pertama kali pada 28 Februari 2006. Versi stabil terakhir adalah versi 3.0.4 [6]. Istilah Responsive Web Design sendiri pertama kali diperkenalkan oleh Ethan Marcotte dalam bukunya yang berjudul “Responsive Web Design”. Dibahas mengenai 3 teknik yang digunakan dalam membangun sebuah Responsive Web Design, yaitu: flexible grid layout, flexible images dan media queries. Flexible grid yaitu sebuah konsep ukuran elemen halaman dengan pilihan satuan persen daripada satuan absolut seperti pixel atau point, flexible images yaitu sebuah teknik mencegah agar media gambar, video, object, tidak melewati batas dari elemen container, media queries merupakan modul CSS3 memungkinkan render konten untuk beradaptasi dengan kondisi seperti resolusi. Sebuah media queries terdiri dari jenis media dan 1 atau lebih ekspresi. Hasil dari media queries dinyatakan benar, jika perangkat dalam media queries sesuai maka, stylesheet yang sesuai akan diterapkan [7]. Bootstrap sendiri merupakan framework yang biasa digunakan untuk membuat aplikasi web ataupun situs web responsive secara cepat, mudah dan gratis. Twitter Bootstrap ini terdiri dari CSS dan HTML untuk menghasilkan Grid, Layout, Typography, Table, Form, Navigation dan lain-lain. Selain itu, di dalam Bootstrap juga sudah terdapat jQuery plugins untuk menghasilkan komponen User Interface yang bagus seperti Transitions, Modal, Dropdown, Scrollspy, Tooltip, Tab, Alert dan lain-lain [8]. 3.
Metode dan Perancangan Sistem
Pada penelitian ini, akan dilakukan beberapa tahapan penelitian yang secara garis besar terbagi ke dalam lima tahapan, yaitu : 1) Analisis kebutuhan dan pengumpulan data yang diperlukan. 2) Perancangan Sistem. 3) Perancangan aplikasi/program. 4) Implementasi dan pengujian sistem, serta analisis hasil pengujian. 5) Penulisan laporan hasil penelitian [9]. Tahapan-tahapan yang dilakukan dalam penelitian ini dapat dilihat pada Gambar 1.
8
Gambar 1 Tahapan Penelitian
Berdasarkan bagan pada Gambar 1 dapat dijelaskan bahwa tahapan penelitian yang dilakukan adalah sebagai berikut : 1) Tahap pertama : analisis dan pengumpulan data, di mana pihak developer mencari tahu kebutuhan client dalam pembuatan aplikasi. Tahap ini dilakukan dengan melakukan wawancara dengan pengurus teknisi di Gereja Utusan Pantekosa Kartasura yaitu bapak Hendy. Berdasarkan wawancara didapatkan informasi jika selama ini belum ada fasilitas front-end untuk pengelolaan data gereja, sehingga harus dilakukan secara manual. Tahap kedua, ketiga dan keempat dilakukan perancangan data gereja menggunakan metode pengembangan sistem Prototype. Sedangkan tahap kelima dilakukan penulisan laporan penelitian dan artikel ilmiah. Metode pengembangan sistem yang digunakan pada penelitian ini adalah adalah metode prototyping, karena dalam pembuatan sistem ini dilakukan komunikasi yang intensif dengan pengguna aplikasi. Metode ini digunakan untuk membantu pengembangan perangkat lunak dalam membentuk model dari perangkat lunak yang harus dibuat. Metode ini dilakukan secara bertahap, yaitu dengan mengembangkan suatu prototype yang sederhana terlebih dahulu baru kemudian dikembangkan dari waktu ke waktu sampai perangkat lunak selesai dikembangkan. Prototype merupakan bentuk dasar atau model awal dari suatu sistem atau subsistem [10]. Tahap-tahap dalam metode Prototyping ditunjukkan pada Gambar 2.
Gambar 2 Metode Prototyping [10]
9
Tahap pengumpulan kebutuhan dilakukan untuk mengetahui dan menerjemahkan semua permasalahan serta kebutuhan perangkat lunak dan kebutuhan sistem yang dibangun. Analisis kebutuhan dilakukan dengan melakukan pencarian data-data serta informasi-informasi yang dibutuhkan oleh sistem. Ada empat analisis kebutuhan dalam perancangan sistem yaitu analisis kebutuhan sistem, analisis kebutuhan data, analisis kebutuhan perangkat keras dan analisis kebutuhan perangkat lunak. Supaya aplikasi yang dibuat dapat memenuhi kebutuhan pengguna, maka diperlukan suatu analisis kebutuhan sistem. Analisis kebutuhan sistem ini dilakukan dengan melakukan wawancara dengan pengurus teknisi di Gereja Utusan Pantekosa Kartasura. Berdasarkan wawancara didapatkan bahwa dibutuhkan sistem yang dapat memenuhi kebutuhan berikut ini: a) kebutuhan administrator mencakup: dapat mengelola data jemaat, dapat mengelola data susunan organisasi, dapat mengelola data pengelola (user) dan dapat mengelola data berita atau pengumuman. b) sedangkan kebutuhan pengakses mencakup: dapat melihat data jemaat, dapat mengetahui semua informasi yang di publik oleh administrator. Analisis kebutuhan perangkat keras dan spesifikasi perangkat lunak yang digunakan dalam membangun jurnal elektronik ini yaitu: analisis perangkat keras yang akan digunakan adalah Prosesor Intel Core i3, 2.40 GHz, RAM 2 GB dan Hardisk 320 GB. Sedangkan perangkat lunak yang digunakan adalah sistem operasi Windows 7 Ultimate, Sublime Text, Wamp Server (Apache dan MySQL), Web browser (dalam penelitian ini digunakan Mozilla Firefox) dan Star UML untuk membuat UML sistem. Perancangan sistem dalam penelitian ini dibuat dalam bentuk diagram UML. Diagram UML meliputi diagram use case, diagram activity, diagram sequence dan diagram class. Berikut ini akan dijelaskan masing-masing diagram yang telah dibuat.
Gambar 3 Use Case Diagram Sistem
Gambar 3 merupakan diagram use case dari aplikasi yang dibuat. Terdapat 2 (dua) aktor dalam aplikasi, yaitu aktor pengelola dan jemaat. Aktor pengelola
10
merupakan pemilik hak akses tertinggi, di mana bisa melakukan pengelolaan data. Sedangkan aktor jemaat memiliki use case melihat data informasi.
Gambar 4 Activity Diagram Tambah Jemaat
Gambar 4 merupakan diagram activity untuk proses menambah data. Aktivitas dimulai dengan pengelola data melakukan login. Pengelola data kemudian memilih button tambah data jemaat setelah itu mengisi form tambah jemaat yang terdiri dari informasi pribadi jemaat tersebut. Data jemaat kemudian akan tersimpan dalam database setelah itu data jemaat akan ditampilkan di website gereja.
Gambar 5 Diagram Activity Hapus Jemaat
Gambar 5 merupakan diagram activity untuk proses menghapus data jemaat yang dilakukan oleh pengelola data. Pengelola data pertama kali melakukan login setelah itu memilih di navigasi data jemaat, kemudian mengambil data dari database
11
kemudian memiih data mana yang akan dihapus. Setelah itu data ditampilkan kembali dalam website gereja.
Gambar 6 Diagram Activity Jemaat
Gambar 6 merupakan diagram activity untuk proses view data yang dilakukan oleh jemaat. Jemaat masuk dalam website gereja setelah itu data akan di load didalam database dan kemudian data tersebut ditampilkan kembali dalam website gereja.
Gambar 7 Sequence Diagram Proses Tambah Jemaat
Gambar 7 merupakan diagram sequence untuk proses menambah data jemaat yang dilakukan oleh pengelola data. Pengelola data mengisikan data jemaat yang terdiri dari informasi pribadi jemaat. Setelah tombol save ditekan, fungsi insert yang berada di file controller jemaat akan dipanggil. Pada fungsi insert ini dilakukan pemanggilan model jemaat untuk memerintahkan menyimpan data jemaat yang telah dimasukkan tadi ke dalam database.
12
Gambar 8 Class Diagram Aplikasi
Gambar 8 merupakan diagram class diagram database gereja, dengan nama db_gereja yang berisi atribut-atribut setiap tabel yang ada dan terdapat juga relasi antar tabel dengan foreign key. Proses evaluasi prototyping dilakukan dengan mendemokan aplikasi kepada pengguna aplikasi (admin dan pengelola data). Penjelasan setiap tahap evaluasi prototyping adalah pada evaluasi ini dilakukan penambahan fasilitas untuk memberikan berita atau pengumuman kepada jemaat. Hal ini berguna untuk memberikan informasi gereja dan pengumuman penting lainnya. 4.
Hasil Implementasi dan Pembahasan
Implementasi dari perancangann sistem informasi gereja ini dilakukan dengan framework CodeIgniter. Terdapat beberapa pengaturan yang harus dilakukan pertama kali saat pembuatan, yaitu pengaturan koneksi ke basis data MySQL dan pengaturan route file. Pengaturan koneksi basis data dilakukan pada file database yang terletak pada folder config. Pengaturan ini ditunjukkan pada Kode Program 1. Kode Program 1 Koneksi Framework CodeIgniter dengan Basis Data 1. $db['default'] = array( 2. 'dsn' => '', 3. 'hostname' => 'localhost', 4. 'username' => 'root', 5. 'password' => '', 6. 'database' => 'db_gereja', 7. 'dbdriver' => 'mysql', 8. 'dbprefix' => '', 9. 'pconnect' => FALSE, 10. 'db_debug' => FALSE,
13
Kode Program 1 merupakan perintah untuk melakukan pengaturan koneksi dari framework CodeIgniter ke basis data MySQL. Koneksi penting untuk menyambungkan dari database ke framework yang digunakan. Pada pengaturan ini dilakukan pengisian untuk hostname, username, password dan nama dari basis data yang digunakan. Sedangkan pengaturan untuk route ditunjukkan pada Kode Program 2. Kode Program 2 Pengaturan File Route CodeIgniter 1. $route['default_controller'] = home; 2. $route['404_override'] = ''; 3. $route['translate_uri_dashes'] = FALSE;
Kode Program 2 bertugas untuk menentukan controller apa yang akan dijalankan pertama kali ketika web diakses dari browser. Controller harus melakukan kegiatan mengolah data menjadi informasi yang bermanfaat. Pengaturan ini dilakukan pada baris ke 1, yaitu dengan mengisikan nama controller pada default_controller. Controller yang pertama kali dipanggil adalah beranda. Controller ini berada pada folder controller.
Gambar 9 Halaman Home Aplikasi
Gambar 9 merupakan halaman depan dari sistem informasi Gereja Utusan Pantekosta Kartasura. Halaman ini akan menampilkan data gereja yang sudah dimasukkan dalam basis data. Sistem informasi ini juga menjadi lebih responsive dalam sisi tampilan. Halaman home ini terdapat pilhan menu yang pada saat di click akan terdapat sub menu lainnya, sehingga jemaat yang akan mengakses web gereja ini tidak akan kebingungan, karena menu-menu tersebut sudah terlihat jelas dan font yang digunakan dapat terbaca dengan jelas. Jemaat akan dimudahkan dalam mencari informasi di halaman web tersebut.
14
Gambar 10 Halaman Home Aplikasi pada Tablet
Gambar 10 merupakan tampilan sistem informasi ketika dibuka melalui browser tablet. Halaman web akan terlihat menyesuaikan dengan layar device di mana web tersebut diakses. Proses ini dilakukan dengan memanggil CSS yang terdapat pada library Bootstrap. Kode Program 3 Pemanggilan CSS Bootstrap 1. 2.
Kode Program 3 merupakan perintah dalam pemanggilan CSS Bootstrap dan responsive yang merupakan bagian dari library Bootstrap. File ini diletakkan di dalam folder assets, sedangkan pemanggilannya dilakukan di file header yang diletakkan pada folder layout di bagian view.
Gambar 11 Halaman Daftar Jemaat
15
Untuk menampilkan daftar jemaat pada Gambar 11, digunakan dengan prinsip Model View Controller (MVC). Pada proses ini, pertama kali akan dipanggil fungsi input_datajemaat yang terdapat pada jemaatController. Fungsi input_datajemaat ini akan melakukan pemanggilan fungsi insert_jemaat yang terdapat di bagian jemaat_model. Kode Program 4 Fungsi input_datajemaat pada JemaatController 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. 20. 21. 22.
Pada kode program baris ke-2 berfungsi untuk meng-check login nya benar apa tidak. Kemudian pada program baris ke-4 digunakan untuk memanggil model. Pada baris ke-5 untuk men-setting jam dan tanggal sesuai dengan komputer. Pada baris ke-6 membuat variable baru. Baris ke-7 sampai ke-16 berfungsi meng-input kan data yang di input pada tampilan yang nantinya akan di masukan ke database. Baris ke-17 untuk memanggil model dengan nama jemaatmodel dengan fungsi yang bernama insertjemaat setelah selesai pada baris ke-18 akan mengundang halaman index. Kode Program 5 Fungsi insert_jemat pada Jemaat_Model 1. 2. 3. 4.
function insert_jemat ($data = array()){ $this->db->insert('db_gereja',$data); return; }
Pada kode program 5 baris ke-2 berfungsi untuk insert data ke database dengan nama database db_gereja. Kode Program 6 Perintah pada Bagian View form.php 1.