Vol.30 No.1, Juni 2024 ISSN (p): 1693-590x, ISSN (e): 2686-4711
DOI: 10.36309/goi.v30i1.260  49
Received June 1 st , 2024; Revised June 9 th , 2024; Accepted June 19 th , 2024
Implementasi Bootstrap 5 pada Perancangan Aplikasi Arsip Surat Berbasis Web (Studi Kasus di Gereja Kristen Indonesia Nusukan Surakarta)
Abraham Aji 1* , Hartati Dyah Wahyuningsih 2 , BRM. Suryo Triono 3 1,2 Program Studi Informatika Universitas Dharma AUB Surakarta, Indonesia
3 Program Studi Manajemen Universitas Dharma AUB Surakarta, Indonesia E-mail : 1 abraham.aji@stmik-aub.ac.id , 2 hartati.dyah@stmik.aub.ac.id ,
3 brm.suryo@stie-aub.ac.id

## Abstrak
Pengarsipan surat yang masuk merupakan salah satu kegiatan yang penting dilakukan di  Gereja  Kristen  Indonesia  (GKI)  Nusukan  Surakarta.  Surat-surat  tersebut  diterima  dari berbagai kalangan dalam rangka kerjasama antara GKI Nusukan Surakarta dengan berbagai pihak,  misalkan  dengan  pihak  swasta,  pemerintah,  masyarakat  sekitar,  atau  dengan  gereja lainnya. Tetapi permasalahannya, surat-surat tersebut masih dikelola secara manual. Berkaitan dengan  hal  itu,  peneliti  melalui  penelitian  ini  bermaksud  mengembangkan  aplikasi  surat berbasis web agar surat-surat yang masuk tersebut bisa diintegrasikan di satu wadah dan bisa diakses kapan saja oleh para pemimpin gereja lewat perangkat yang mereka pakai.
Pada  penelitian  kali  ini  digunakan  bahasa  pemrograman  PHP  untuk  backend- programming-nya, dan MariaDB sebagai basis data. Sementara untuk front-end programming- nya  digunakan  framework  Bootstrap  versi  5.  Kemudian  untuk  menganalisis  sistem  lama  dan baru,  peneliti  menggunakan  metode  PIECES.  Rancangan  sistemnya  digambarkan  dengan diagram  UML  seperti  use-case  diagram  dan  diagram  alur  /  flowchart.  Melalui  penelitian  ini, berhasil  dikembangkan  sebuah  aplikasi  arsip  surat  berbasis  web  yang  punya  tiga  fitur penunjang, yaitu (1) fitur penyimpanan surat, (2) pencarian surat, dan (3) fitur penanda status surat (apakah sudah di-follow-up atau belum).
Kata kunci: arsip, surat, web

## Abstract
Achieving  incoming  mail  is  one  of  the  important  activities  in  Nusukan  Indonesian Christian  Church,  Surakarta.  All  those  mail  were  accepted  by  various  people  in  terms  of collaboration  between  GKI  Nusukan  Surakarta  and  the  other  parties,  for  example:  the government,  private  sector,  local  communities,  or  with  the  other  churches.  The  problem  was that those emails were still being managed manually.
Furthermore, researchers propose to develop a web-based mail application so that all the mail can be integrated into one place and accessed by church leaders via their own devices. In  this  research,  we  used  the  PHP  language  program  as  the  backend  programming  and MariaDB as the database,while using the Bootstrap framework for the front-end programming. To  analyze  the  old-new  system,  researchers  used  the  PIECES  method.  The  system  design  was conceived by UML diagrams such as use-case diagrams and flowchart diagrams. Through this research,  we  successfully  developed  a  web-based  mail  application  that  has  three  support features such as: (1). archive mail feature, (2) search feature, and (3) mail status feature (either has been followed up or not yet).
Keywords: archive, mail, web

## 1. PENDAHULUAN
GKI Nusukan Surakarta adalah salah satu lembaga kerohanian yang berfungsi sebagai wadah bagi umat Nasrani khususnya di kota Surakarta untuk berkumpul dan mengekspresikan imannya. Apabila dilihat dari segi terminologinya, gereja adalah persekutuan orang-orang yang percaya  kepada  Isa  Almasih  sebagai  Juru  Selamatnya  (Tarumingi,  2020).  Menurut  bapak pendiri  gereja  Reformasi,  Yohanes  Calvin,  gereja  memiliki  beberapa  jabatan  yang  berfungsi memimpin  jemaat,  yang  ditetapkan  sendiri  oleh  Isa  Almasih,  di  antaranya  gembala  ( pasteur ), pengajar  ( docteur ),  penatua  ( ancient ),  dan  diaken  ( syamas )  (Tamaweol,  2020).  GKI  Nusukan Surakarta  mempunyai  struktur  kelembagaan  yang  sama,  hanya  saja  jabatan  penatua  ( ancient ) diberi  nama  “majelis”  dan  punya  ketua  majelis.  Keempat  jabatan  inilah  yang  bertugas  untuk mengelola  urusan  jemaat,  mulai  dari  persoalan  penyelenggaraan  peribadatan  di  gereja  hingga komunikasi dengan masyarakat di sekitar. Komunikasi dengan masyarakat luar ini salah satunya dilakukan  lewat  surat  ke  pihak  gereja.  Surat-surat  tersebut  diterima  dan  dikelola  oleh  seorang admin yang akan merekap surat masuk,lalu mengedarkannya pada para pemimpin gereja. Surat- surat  masuk  tersebut  dibahas  dalam  rapat  yang  diselenggarakan  setidaknya  satu  bulan  sekali dalam rapat pimpinan GKI Nusukan Surakarta. Pada saat rapat digelar, surat-surat itu juga akan di -fotocopy sebanyak jumlah  peserta  rapat.  Pengirimnya  bisa  berasal  dari  gereja  lain  atau  bisa pula  pihak  swasta,  pemerintah,  serta  masyarakat  sekitar.  Surat-surat  tersebut  dibendel  dalam sebuah binder ,  kemudian  data  surat-surat  masuk  itu  dicatat  dalam  berkas  khusus  berekstensi .doc dengan  program  Ms.  Word  di  dalam  sebuah  perangkat.  Cara  ini  menurut  peneliti  bisa dibuatkan  solusi  yang  lebih  praktis.  Untuk  itu,  peneliti  berinisiatif  membuat  aplikasi  surat berbasis web sehingga surat-surat yang ada bisa dikelompokkan secara digital dan mudah dicari. Hasil akhir penelitian ini menunjukkan bahwa aplikasi surat ini sudah berhasil dikembangkan, di mana sistem ini mempunyai tiga fitur, yaitu (1) fitur penyimpanan surat, (2) pencarian surat, dan (3) fitur penanda status surat (sudah di- follow-up atau belum).

## 2. METODE PENELITIAN

## 2.1 Metode Oberservasi
Salah satu metode yang digunakan dalam penelitian ini adalah metode observasi. Menurut Ekka (2021), metode obervasi memiliki beberapa keuntungan di antaranya: (a) bisa diterapkan di  berbagai  disiplin  ilmu,  (b)  mudah  dilakukan,  (c)  memungkinkan  peneliti  melihat  langsung apa  yang  dilakukan  orang  lain  daripada  hanya  bergantung  pada  keterangan  yang  mereka berikan, (d) mampu mengkoleksi data pada saat hal yang ingin diteliti sedang berlangsung, dan (e)  tidak  bergantung  pada  kemauan  orang  lain  untuk  menyediakan  informasi.  Pada  penelitian ini, yang diamati adalah surat-surat yang masuk, bagaimana cara menyimpannya dan bagaimana surat tersebut diedarkan.

## 2.2 Metode Wawancara
Wawancara dapat didefinisikan sebagai interaksi antara dua orang pada suatu kesempatan tertentu,  dimana  yang  satu  bertindak  sebagai  pewawancara  dan  yang  lain  sebagai  orang  yang diwawancarai.  Dengan  demikian,  wawancara  bisa  diartikan  sebagai  saling  memahami pandangan satu sama lain atau pertukaran pandangan antar dua orang yang membicarakan suatu tema  atau  topik  yang  menjadi  minat  bersama  (Ruslin,  2022).Wawancara  pada  penelitian  ini dilakukan  dengan  bertanya  jawab  dengan  admin  gereja  sebagai  penerima  dan  penata  surat masuk, serta dua orang majelis yang ikut membahas surat-surat masuk di dalam rapat bersama gembala (pendeta).

## 2.3 Metode Analisis Sistem
Untuk  membuat  sistem  yang  lebih  baik  maka  harus  dibandingkan  dengan  sistem  yang lama.  Maka  untuk  mencapai  tujuan  tersebut,  pada  penelitian  ini  digunakan  analisis  PIECES. Menurut Fatoni, dkk. (2020), analisis PIECES merupakan kerangka kerja yang digunakan untuk
mengklasifikasikan  suatu  masalah  serta  peluang  dalam  perancangan  sistem,  sehingga  dapat dihasilkan  hal-hal  baru  yang  dapat  menjadi  pertimbangan  dalam  pengembangan  sistem.  Pada metode,  PIECES  terdapat  enam  variabel  yang  dipakai  untuk  menganalisis  sistem  informasi, yakni  :(a)  performa,  (b)  informasi  dan  data,  (c)  keekonomian,  (d)  kendali  dan  keamanan,  (e) pelayanan, serta (f) pelayanan.

## 2.4 Metode Kepustakaan
Metode kepustakaan atau tinjauan literatur adalah evaluasi atas karya-karya penelitian yang sudah  ada  tentang  tema  akademik  tertentu  atau  topik  atau  subjek  yang  sedang  diselidiki  oleh seorang peneliti. Dalam metode ini, dilakukan proses penyelidikan atas kumpulan tulisan yang sudah terbit untuk mencapai tujuan penelitian selain yang telah dicapai oleh karya yang sedang diselidiki tersebut (Chigbu, 2023). Peneliti dalam hal ini melakukan tinjauan literatur atas karya- karya  yang  berhubungan  dengan  pengembangan  sistem  informasi,  yakni  bahasa  pemrograman PHP, analisis dan perancangan sistem informasi, basis data, dan framework Bootstrap .

## 2.5 Software dan Bahasa Pemrograman yang Digunakan

## 2.5.1 Bahasa Pemrograman PHP
Penelitian ini  bertumpu  pada  bahasa  pemrograman  PHP.  PHP  itu  sendiri  menurut  Kumar (2022)  adalah bahasa  yang  sederhana  namun powerful yang dirancang  untuk membuat  konten HTML.  PHP  adalah  bahasa  di  sisi server,  dan  merupakan sarana yang ampuh  untuk membuat halaman web yang dinamis dan interaktif. PHP adalah alternatif yang banyak digunakan, gratis, dan  efisien  dibandingkan  pesaingnya  seperti ASP  Microsoft .  Bahasa  ini  juga  bisa  diterapkan untuk pemrograman berorientasi objek yang akan dieksekusi di sisi server.

## 2.5.2  Bootstrap
Bootstrap dikembangkan oleh M. Otto dan Jacob Thornton di Twitter dan dirilis sebagai produk gratis pada Agustus 2011 di GitHub. Bootrstrap adalah kerangka kerja untuk membuat HTML,  CSS,  dan  JavaScript  yang  digunakan  untuk  mengembangkan  web  responsif  yang mengutamakan  tampilan  pada  ponsel.Bootstrap  memiliki  sintaks  yang  sudah  ditentukan sebelumnya,  sehingga  kita  bisa  memakai  kode-kode  tersebut  untuk  merancang  tampilan  web alih-alih  menulis  kodenya  dari  nol.Kita  tinggal  memakai class-class yang  ada  di  Bootstrap untuk membangun halaman front-end (Uzayr, 2023). Bootstrap memiliki beberapa versi. Versi yang digunakan dalam penelitian ini adalah versi 5.

## 2.5.3  MariaDB
Untuk mengelola data pada penelitian ini, peneliti menggunakan sistem basis data Maria DB.  Basis  data  itu  sendiri  adalah  koleksi  data  yang  saling  berhubungan  dan  satu  set  program untuk mengakses data tersebut. Tujuan penggunaan basis data ini adalah supaya pengelola bisa membaca data, menambah data, menghapus data serta mengambil data (Jamaludin, 2022).

## 2.5.4  Text editor
Menurut  Sari  dan  Suhendi  (2020), text  editor memiliki  fungsi  yang  sama  dengan web authoring yaitu  untuk  mengetikkan  skrip  program,  hanyasaja  tidak  bersifat  WYSIWYG. Sehingga untuk menampilkanhasilnya memerlukan web browser . Tetapi karena lebihringan dan bersifat open  source banyakjugayanglebih  memilih  memakai text  editor dibandingkan  aplikasi sekelas Adobe Dreamweaver . Penelitian ini memanfaatkan text editor Notepad++.

## 2.6 Desain Sistem
Aplikasi  yang  dibangun  pada  penelitian  ini  memiliki  desain  sistem  yang  digambarkan dengan use-case  diagran dan flowchart  diagram .    Nasution  dan  Harahap  (2022)  mengatakan bahwa use-case  diagram menyajikan  interaksi  antara use  case dan  aktor. Use  case menggambarkan sistem yang sedang berfungsi atau persyaratan yang harus dipenuhi sistem dari
52
sudut  pandang  para  penggunanya.  Sedangkan  menurut  Yulianeu  dan  Oktamala  (2022), flowchart adalah  bagan  yang  menunjukkan  alur  suatu  program  atau  prosedur  sistem  secara logis. Flowchart (diagram alur) adalah sebuah ilustrasi yang berupa diagram alir dari algoritma- algoritma dalam suatu program yang menyatakan seperti apakah arah aliran dari program yang sudah dibuat. Tahap desain ini dilakukan sebelum mulai membuat skrip program.

## 3. HASIL DAN PEMBAHASAN
Inilah use-case diagram dari aplikasi yang telah dikembangkan
Gambar 1. Use-case diagram aplikasi surat berbasis web
Dari bagan di atas terlihat bahwa ada dua aktor, yakni gembala dan majelis.
Gembala Majelis Tabel 1. Diagram flowchart aplikasi arsip surat berbasis web
Sedangkan  dari flowchart  diagram di  atas  terlihat  bahwa  gembala  dapat  melakukan login dan fungsi CRUD ( create , read , update , delete ),tapi majelis hanya bisa melakukan login dan fungsi R ( read ).

## 3.1 Tampilan Halaman Login
Gambar 2. Halaman Login
Membaca data Selesai Mulai Mulai Melakukan login Melakukan login
UPDATE INSERT DELETE Masukkan data baru Update data lama Hapus data lama Simpan Simpan Simpan Database Database Database Pesan “Data berhasil dimasukkan” Pesan “Data berhasil di- update ” Pesan “Data berhasil dihapus” Selesai
Ini  merupakan  halaman  awal  yang  akan  doitemuioleh  pengunjung.  Jikalau  pengunjung memasukkan username dan password dengan  benar,  maka  pengunjung  diarahkan  ke  halaman beranda.Tetapi  bila  ada  pengunjung  yang  memaksa  masuk  ke  halaman  awal  tanpa  melewati halaman login , maka di bawah jendela URL akan muncul notifikasi seperti di bawah ini:
Gambar 3. Notifikasi belum login
Bila tombol “OK” di-klik, halaman login akan dimunculkan kembali.

## 3.2 Tampilan Halaman Beranda
Gambar 4. Halaman Beranda
Di  sini  pengunjung  mendapat  informasi  singkat  tentang  aplikasi  arsip  surat.  Di  bagian bawah  terdapat  tombol logout .  Apabila  di-klik,  pengunjung  akan  diarahkan  lagi  ke  halaman login .

## 3.3  Tampilan Halaman Data Departemen
Gambar 5. Halaman Data Departemen untuk Gembala
Halaman “Data Departemen” menampung master data dari departemen yang ada di GKI Nusukan Surakarta. Gereja ini mempunyai lima departemen, yakni (a) Kebaktian & Persekutuan yang  membawahi  4  komisi,  (b)  Kesaksian  &  Pelayanan  yang  membawahi  6  komisi,  (c) Pembinaan  yang  membawahi  7 komisi, (c)  Penatalayanan  yang membawahi  4 komisi, dan (e) Litbang yang membawahi 5 komisi.
Gembala  dapat  menambah  data  baru,  meng- edit ,  dan  menghapus  data.  Tetapi  untuk majelis/penatua hanya bisa membaca data. Seperti berikut ini:
Gambar 6. Halaman Data Departemen untuk Majelis/Penatua

## 3.4  Tampilan Halaman Data Pengirim Surat
Gambar 7. Halaman Data Pengirim Surat untuk Gembala
Halaman  di  atas  menampung master  data pengirim  surat.  Sama  seperti  sebelumnya, gembala dapat melakukan edit , tambah, dan hapus data. Tapi majelis hanya bisa membaca data saja.

## 3.5  Tampilan Halaman Data Arsip Surat
Gambar 9. Halaman Data Arsip Surat untuk Gembala
Data  pada  halaman  ini  menampung  data  arsip  surat.  Jika  pengguna  meng-klik  tombol “Tambah”, akan diarahkan ke halaman “Tambah Data”.
Gambar 10. Halaman Tambah Data untuk Gembala
Gambar 11. Pilihan Data Departemen untuk Tambah Data bagi Gembala
Pilihan data Departemen diambil dari master data “Departemen”. Di bawahnya terdapat pilihan untuk menampung berkas surat. Berkas yang bisa disimpan hanya yang berekstensi .jpg, .jpeg, .png, dan .pdf. Di luar itu, maka sistem akan menolak menyimpan file .
Gambar 12. Berkas gagal diunggah
Kemudian untuk pilihan Pengirim Surat diambil dari master data “Pengirim Surat”.
Gambar 13. Pilihan Data Pengirim Surat untuk Tambah Data bagi Gembala
Kembali  ke  halaman  Arsip  Surat,  apabila  pengguna  ingin  mencari  surat  yang  masih pending , pengguna tinggal mengetik “pending” pada kolom pencarian.
Gambar 14. Kolom Pencarian
Kemudian  bila  ingin  mencari  surat  berdasar  departemen  tertentu,  tinggal  ditulis  nama departemennya saja. Misalkan: Pembinaan.
Gambar 15. Kolom Pencarian
Berkas  bisa  dilihat  dengan  menekan  tombol  “Lihat  file”.  Maka  berkas  tampil  di tab browser baru.
Gambar 16. Tampilan Berkas
Khusus  untuk  majelis  hanya  dapat  membaca  data,  tanpa  bisa  melakukan  fungsi  CUD  ( create , update , delete ).
Gambar 17. Halaman Arsip Surat untuk Majelis

## 3.6 Hasil Analisis Sistem Baru Dibanding Sistem Lama
Tabel 2. Analisis Sistem Baru Tolok Ukur (PIECES) Sistem Lama Sistem Baru Performance Sistem  yang  lama  menggunakan cara  serba  manual  untuk  mencari, menyimpan, dan menayangkan surat. Sistem  yang  baru  disimpan  di dalam sebuah sistem informasi sehingga  lebih  memudahkan dalam pencarian, penyimpanan, dan pemanggilan data. Information Untuk  membedakan  surat  yang sudah  di- follow-up dan  belum  agak sulit  karena  tidak  ada  penanda khusus.  Selain  itu  untuk  mencari surat yang ditujukan ke departemen tertentu harus dilihat satu per satu. Sistem  baru  memiliki  fitur penanda  status  surat  dan pencarian. Sehingga bisa dengan  mudah  membedakan surat  yang  ingin  dicari  atau sebaliknya yang bisa diabaikan. Economy Dengan  sistem  yang  lama,  gereja harus  menyimpan  tumpukan  kertas sehingga memakan tempat. Kemudian  pada  setiap  rapat,  surat yang  dibahas  harus  di -fotocopy berulang  kali.  Hal  ini  memakan lebih banyak biaya. Pengguna  tinggal  membuka melalui  perangkat  laptop/PC sehingga  biaya  pengaksesan surat bisa ditekan. Control Data  yang  disimpan  rentan  hilang dan bisa diakses siapa saja. Data  pada  sistem  baru  sudah terkomputerisasi dan diamankan dengan sistem login sehingga  hanya  bisa dilihat oleh orang-orang tertentu saja. Efficiency Untuk  menyimpan,  memelihara, dan mendistribusikan surat membutuhkan usaha lebih. Dengan adanya aplikasi berbasis web ini, maka penyimpanan,  pemeliharaan, dan pendistribusian surat menjadi lebih praktis. Service Sistem  lama  menyulitkan  untuk mengecek serta menyimpan seluruh surat masuk khususnya yang berhubungan dengan tiap departemen masing-masing pimpinan gereja. Pengguna  dapat  mengakses data  kapan  saja,  di  mana  saja. Dan datanya sendiri tersimpan secara utuh di dalam sistem.

## 4. KESIMPULAN
Melalui penelitian yang sudah dilakukan, maka dapat disimpulkan beberapa hal sebagai berikut:
1. Penelitian  ini  berhasil  mengembangkan  sistem  informasi  arsip  surat  berbasis  web  dengan bahasa pemrograman PHP, basis data MariaDB, dan framework Bootstrap versi 5.
2. Peneliti menggunakan analisis PIECES untuk membandingkan antara performa sistem baru dan lama.
3. Gambaran desain sistem ditampilkan dengan diagram alur dan use-casediagram .

## 5. SARAN
Ada  beberapa  hal  yang  masih  bisa  dikembangkan  dari  aplikasi  arsip  surat  berbasis  web  yang sudah dikembangkan, di antaranya:
1. Peneliti  berikutnya  bisa  membuat  supaya  saat  surat  baru  di- input ke  dalam  sistem,  maka pimpinan  yang  berwenang  bisa  langsung  menerima  pemberitahuan  surat  baru  lewat inbox SMS atau email .
2. Peneliti  berikutnya  bisa  membuat  fitur  untuk  mencegah master  data (“Departemen”  dan “Pengirim Surat”) dihapus jikalau data tersebut masih dipergunakan di halaman lain.
3. Sistem ini belum dilengkapi regex . Oleh karena itu, peneliti berikutnya bisa melengkapinya untuk memastikan bahwa data yang dimasukkan ke dalam sistem, valid.

## DAFTAR PUSTAKA
[1] Chigbu, dkk. 2023. The Science of Literature Reviews: Searching, Identifying, Selecting, and Synthesising .
[2] Ekka,  P.,  M.  2021. A  Review  Of  Observation  Method  In  Data  Collection  Process . International Journal for Research Trends and Innovation, Volume 6, Issue 12, pp. 17-18.
[3] Fatoni, dkk. 2020. PIECES Framework and Importance Performance Analysis Method to Evaluate  the  Implementation  of  Information  Systems .    E3S  Web  of  Conferences  202, 15007 (2020).
[4] Jamaludin,  dkk.  2022. Sistem  Basis  Data .  Padang:  Penerbit  PT  Global  Eksekutif Teknologi
[5] Kumar,  Pawan.  2022. Web  Development  Using  PHP .  Phagwara:  Lovely  Professional University
[6] Nasution,  R.,  dan  Harahap,  A.,  M.  2022. Web-Based  Inventory  Data  Processing Information  System  At  The  Regional  Development  Planning  Agency  (Bappeda)  North Sumatra Province . Journal of Information System, vol. 1, no. 1, pp. 32-41, 2022.
[7] Ruslin,  dkk..  2022. Semi-structured  Interview:  A  Methodological  Reflection  On  The Development of A Qualitative Research Instrument In Educational Studies . IOSR Journal of Research & Method in Education, Volume 12, Issue 1, pp. 22-29.
[8] Sari,  A.,  P.,  dan  Suhendi.  2020. Rancang  Bangun  Sistem  Informasi  Pengelolaan  Talent Film Berbasis Aplikasi Web . Jurnal Informatika Terpadu Vol. 6 No. 1 2020, 29-37.
[9] Tarumingi,  D.,  A.  2020. Gereja  dalam  Pandangan  Paulus . Jurnal  Titian  Emas. 2020,  1 (1), 13-23.
[10] Tamaweol,  R.,  D.  2020. Jabatan  Gerejawi  Menurut  Calvin  Dan  Implikasinya  Bagi OrganisasiDan Tata Gereja Di Masa Kini . 2020. Jurnal Educatio Christi. 2020 1 (1), 17- 24.
[11] Uzayr,  Sufyan,  bin.  2023. Mastering  Bootstrap:  A  Beginner’s  Guide .  London:  CRC Press.
[12] Yulianeu,  A.,  dan  Oktamala,  R.  2022. Sistem  Informasi  Geografis  Trayek  Angkutan Umum  Di  Kota  Tasikmalaya  Berbasis  Web .  Jurnal  Teknik  Informatika,  vol.  10,  no.  2, 2022.