## Journal of Computer and Information Systems Ampera
Vol. 3, No. 3, September 2022 e-ISSN: 2775-2496
https://journal-computing.org/index.php/journal-cisa/index

## 156
This work is licensed under a Creative Commons Attribution 4.0 International License .

## Perancangan Aplikasi Arsip Surat Berbasis Web Menggunakan Metode Waterfall pada Bidang Akademik Universitas Kristen Indonesia Maluku
Wanda Latumahina 1 , Augie David Manuputty 2
1 , 2 Sistem Informasi, Fakultas Teknologi Informasi, Universitas Kristen Satya Wacana
Email: 1 682018203@student.uksw.edu, 2 augie_manuputty@uksw.edu

## Abstrak
Saat ini perkembangan teknologi yang pesat menyebabkan tiap aspek kehidupan menjadi ikut memanfaatkan perkembangan teknologi yang ada,  pekerjaan yang sebelumnya sulit dilakukan menjadi dapat dilakukan dengan mudah dan cepat. Pada perguruan tinggi teknologi informasi sangat diperlukan untuk menunjang proses yang berjalan agar menjadi lebih baik dan efektif. Pada Universitas Kristen Indonesia Maluku terdapat berbagai proses yang berjalan, salah satu contohnya adalah  kegiatan  surat  menyurat  di  Bidang  Akademik.  Namun  proses  yang dijalankan masih menggunakan cara manual yaitu dengan menggunakan kertas akibatnya terjadi penumpukan kertas yang jika tidak dikelola dengan baik akan mengakibatkan  kesulitan  dalam  pengarsipan,  proses  yang  berjalan  akan terhambat, sampai pada terjadi kesalahan dalam proses. Penelitian ini bertujuan untuk meranacang suatu  aplikasi sistem informasi Arsip Surat atau  Repository yang dapat membantu dalam pengarsipan surat masuk dan Surat Keluar di Bidang Akademik UKIM.
Kata Kunci : Teknologi Informasi, Arsip Surat, Website, Waterfall Methods.

## 1. PENDAHULUAN
Perkembangan teknologi saat ini sangat berpengaruh pada setiap proses, bahkan setiap kehidupan dan aktivitas yang kita berjalan tidak terlepas dari adanya teknologi informasi. Menurut M. G Simon [1] saat ini kita hidup ditengan  perkembangan  teknologi  informasi  yang  begitu  pesat,  dimana teknologi  informasi  berperan  dalam  setiap  aktivitas  berjalan  baik  pada sektor pendidikan, pemerintahan dan sektor lainnya, juga banyaknya data yang dihasilkan harus dikelola menggunakan sistem informasi yang baik. Pada perguruan tinggi khususnya pelayanan administrasi, memiliki sistem informasi yang dapat membantu  dalam jalannya proses bisnis yang ada

## Journal of Computer and Information Systems Ampera
Vol. 3, No. 3, September 2022 e-ISSN: 2775-2496
https://journal-computing.org/index.php/journal-cisa/index
Wanda Latumahina, Augie David Manuputty | 157
merupakan  suatu  kebutuhan,  agar  proses  bisnis  yang  berjalan  menjadi lebih efisien dan efektif.
Menurut  Nur  Zeina  Maya  Sari  [2]  penggunaan  sistem  informasi  pada administrasi perlu dipertimbangkan, karena dapat meningkatkan proses manajemen  administrasi  menjadi  lebih  efisien  serta  dapat  mendukung pencapaian  kinerja  universitas  yang  tinggi.  Namun,  terdapat  beberapa instansi  maupun  perguruan  tinggi  yang  dalam  proses  bisnis  nya  masih menggunakan cara manual atau belum menerapkan sistem informasi. Hal ini  dapat  berakibat  pada  jalannya  proses  bisnis  yang  terhambat  dan kurang  efisien  sehingga  diperlukan  sebuah  sistem  informasi  dalam membantu jalannya proses bisnis.
Terdapat penelitian lain yang dilakukan di UKIM yang dijadikan refrensi dari  penulisan  penelitian  ini  dengan  fokus  dan  permasalahan  yang berbeda. Penel itian tersebut adalah “Prototype Aplikasi Sistem Informasi Akademik  Berbasis  Web”  dengan  studi  kasus  Universitas  Kristen Indonesia  Maluku.  Universitas  Kristen  Indonesia  Maluku  atau  UKIM merupakan perguruan tinggi yang berdiri sejak tahun 1965 dengan nama STT GPM, dan diubah oleh Departemen Pendidikan dan Kebudayaan pada tahun 1988 menjadi Universita Kristen Indonesia Maluku atau disingkat UKIM. Penelitian ini bertujuan untuk merancang sebuah aplikasi sistem informasi yang dapat digunakan untuk mengkoordinir aktivitas maupun kegiatan  pelayanan  administrasi  di  akademik  yang  berjalan  baik  secara langsung maupun tidak langsung [3].
Penelitian kedua yang dijadikan refrensi dalam penyusunan penelitian ini adalah penelitian dengan judul “Penerapan Metode Waterfall Pada Sistem Informasi  Inventori  PT.  Pangan  Sehat  Sejahtera”.  Peneltian  ini  berfokus pada pengolahan data inventori barang yang, dimana permasalahan utama ada pada sistem pelaporan ke kantor pusat yang masih dilakukan melalui konversi  manual  data  ke  microsoft  excel  oleh  admin  gudang,  sehingga memungkinkan  terjadinya  kesalahan  antara  selisih  stok  pembelian  dan transaksi  penjualan  dan  kesalahan  penyajian  informasi.  Untuk  itu dibangun  Sistem  Inventori  barang  berbasis  web  yang  terintegrasi  dan dapat diakses baik oleh kantor pusat maupun kantor cabang [4].
Perbedaan  antara  penelitian  sebelumnya  dengan  penelitian  ini  adalah pada  penelitian  pertama  menggunakan  metode  prototype  dalam merancang aplikasi, sedangkan pada penelitian kedua dan penelitian ini

## Journal of Computer and Information Systems Ampera
Vol. 3, No. 3, September 2022 e-ISSN: 2775-2496
https://journal-computing.org/index.php/journal-cisa/index
158 | Perancangan Aplikasi Arsip Surat Berbasis Web Menggunakan …
digunakan metode waterfall. Kemudian perbedaan lainnya ada pada studi kasus, dimana pada penelitian kedua studi kasus telah menggunakan suatu aplikasi dalam menunjang proses yang berjalan, namun pada studi kasus dalam penelitian ini belum menggunakan suatu aplikasi yang terintegrasi dalam menunjang proses yang berjalan.
Berdasarkan  observasi  yang  dilakukan  di  lapangan,  UKIM  terdiri  dari empat  bidang  yaitu  bidang  Akademik,  bidang  Administrasi  Umum  dan Keuangan, bidang Kemahasiswaan, bidang Perencanaan Kerja Sama dan Sistem  Informasi.  Bidang  Akademik  adalah  bidang  yang  bertugas mengurus kegiatan akademik. Salah satu aktivitas yang berjalan di bagian akademik adalah kegiatan surat menyurat. Permasalahan yang ada yaitu kegiatan  surat  menyurat  masih  dilakukan  secara  manual  menyebabkan terkendalanya bagian akademik dalam melakukan arsip surat yang masuk maupun keluar, sehingga terjadi penumpukan kertas dan kesulitan dalam melakukan pengarsipan. Sehingga dibutuhkan suatu perancangan aplikasi basis web dan sistem informasi arsip surat   yang dapat digunakan untuk membantu  pengarsipan  surat  untuk  menghindari  dampak  yang  telah dijelaskan  sebelumnya.  Penggunaan  aplikasi  ini  diharapkan  dapat memperkecil risiko yang mungkin dapat terjadi.
Metode waterfall merupakan metode yang paling sering digunakan untuk pengembangan  perangkat  lunak.  Metode  yang  sering  disebut  sebagai metode  konvensional  atau classic  life  cycle, bersifat  linear  dimulai  dari tahapan  analisis,  desain,  coding  dan  test  atau  pengujian  [5].  Pemilihan metode waterfall dalam penelitian ini karena metode waterfall memiliki tahapan pengembangan yang sistematis dan juga tahapan yang berurutan dalam membangun sebuah sistem. Tahapan berikutnya akan dikerjakan ketika  tahapan  sebelumnya  telah  selesai,  serta  metode  waterfall  juga sesuai dengan tujuan penelitian ini yaitu membangun sebuah sistem yang baru  dan  terintegrasi.  Tools  yang  digunakan  dalam  penelitian  ini  yaitu Mysql, Server Apache, dan Bahasa Pemograman yaitu PHP dan HTML.
Hasil  dari  penelitian  ini  berupa  rancangan  aplikasi  arsip  surat  berbasis web yang diharapkan dapat membantu dalam pengarsipan surat masuk- keluar  yang  dilakukan,  dalam mengurangi maupun  mengatasi  beberapa akibat yang mungkin terjadi. Mengingat saat ini aktivitas surat menyurat masih  dilakukan  secara  manual,  aplikasi  ini  juga  diharapkan  dapat mengurangi penggunaan media buku yang digunakan untuk pengarsipan surat masuk atau surat keluar. Terdapat beberapa tahapan penulisan pada

## Journal of Computer and Information Systems Ampera
Vol. 3, No. 3, September 2022 e-ISSN: 2775-2496
https://journal-computing.org/index.php/journal-cisa/index
Wanda Latumahina, Augie David Manuputty | 159
penelitian ini yaitu pendahuluan, tinjauan pustaka yang terbagi menjadi dua bagian yaitu penelitian sebelumnya dan dasar teori yang digunakan, metode penelitian, hasil dan pembahasan dan kesimpulan.

## 2. METODE
Metode penelitian yang digunakan dalam penulisan penelitian ini adalah metode kualitatif, dengan data yang didapatkan merupakan data primer yang dikumpulkan secara langsung dengan melakukan wawancara, serta data sekunder yaitu data yang didapatkan dari literasi beberapa penelitian yang  terdahulu  sebagai  refrensi  dalam  penelitian  ini.  Tahapan-tahapan dalam  melakukan  penelitian  dimulai  dari  tahapan  identifikasi permasalahan  serta  analisis  kebutuhan  dari  studi  kasus  maupun permasalahan  yang  ada  di  studi  kasus  diidentifikasi.  Kemudian dilanjutkan  dengan  studi  literatur,  dimana  dilakukan  studi  terhadap literatur  berupa  jurnal  penelitian  sebelumnya  mapun  dasar  teori  yang akan digunakan dalam penelitian.
Tahap selanjutnya yaitu tahap desain dimana akan dilakukan desain yaitu Use Case, Entitiy Relational Diagram (ERD) dan desain User Interface pada aplikasi  repository  serta  implementasi  hasil  desain  tampilan  aplikasi. Penelitian  ini  hanya  sampai  pada  tahap  desain  tampilan  aplikasi  dan implementasi  hasil  desain  aplikasi.  Penelitian  ini  menggunakan  metode pengembangan  perangkat  lunak  yaitu  metode  air  terjun  atau  Waterfall Methods, dengan tahapan yaitu analisis, desain, pengodean dan pengujian [6].
Gambar 1. Tahapan Metode Pengembangan Perangkat lunak Waterfall Methods Sukamto, R. A.Salahuddin [6].

## Journal of Computer and Information Systems Ampera
Vol. 3, No. 3, September 2022 e-ISSN: 2775-2496
https://journal-computing.org/index.php/journal-cisa/index

## 1. Analisis
Tahapan  analisis  merupakan  tahapan  awal  dalam  membangun  sebuah perangkat lunak. Tahap analisis perlu dilakukan agar dapat mengetahui kebutuhan dari pengguna akan perangkat lunak yang akan dibangun dan akan digunakan juga dalam tahapan desain. Terdapat dua kebutuhan yang akan dianalisis yaitu kebutuhan user atau pengguna dan kebuuhan sistem.
2. Desain Desain  perangkat  lunak  merupakan  proses  selanjutnya  dari  tahapan analisis,  berfokus  pada  desain  program  perangkat  lunak  yang  akan dibangun, baik desain tampilan aplikasi maupun desain database. Proses desain program akan dilakukan berdasarkan hasil analisis kebutuhan yang diperlukan  di  tahapan  sebelumnya.  Dalam  tahapan  ini,  akan  dilakukan desain tampilan atau desain User Interface dari aplikasi dan juga desain database yang akan dibuat dengan menggunakan diagram Use Case dan juga Entity Relational Diagram (ERD).

## 3. Pemograman
Tahapan pemograman merupakan tahapan dimana hasil desain tampilan maupun desain database diterapkan di dalam bahasa pemograman, yaitu PHP dan juga HTML dan CSS sebagai pemograman untuk tampilan user interface  dari  aplikasi.  Tahapan  pemograman  dijalankan  menggunakan kode editor.

## 4. Test
Tahapan  test  merupakan  tahapan  pengujian  aplikasi  apakah  sudah berjalan dengan baik atau tidak. Salah satu teknik pengujian yang sering digunakan  dalam  tahapan  pengujian  adalah  teknik  pengujian  Blackbox Testing.  Dengan  melakukan  pengujian,  diharapkan  dapat  mengurangi kesalahan pada sistem dan sistem dapat berjalan dengan baik [7].

## 3. HASIL DAN PEMBAHASAN
A. Analisis Kebutuhan Analisis  Kebutuhan  merupakan  tahapan  awal  dalam  metode pengembangan  perangkat  lunak  waterfall.  Berdasarkan  data  hasil wawancara  dan  observasi,  terdapat  2  hasil  analisis  kebutuhan  yaitu Kebutuhan Pengguna dan Kebutuhan Sistem.

## Journal of Computer and Information Systems Ampera
Vol. 3, No. 3, September 2022 e-ISSN: 2775-2496
https://journal-computing.org/index.php/journal-cisa/index
Wanda Latumahina, Augie David Manuputty | 161
a) Kebutuhan Pengguna Berdasarkan  hasil  wawancara  dan  observasi,  terdapat  3  Kebutuhan Pengguna, yaitu;
1. Kepala Bagian Akademik (Bagian Pelaporan)
a. Dapat melihat dan mengedit data profile admin dan staf
b. Mengedit data Username dan Password staf dan Admin
c. Input data Disposisi Surat Masuk Khusus Surat dengan Kategori Rahasia dan       Penting
d. Melihat  dan  Mengedit  data  Pelaporan  Surat  Masuk  dan  Surat Keluar
e. Melihat data surat masuk dan surat keluar
2. Staf 1 dan Staf 2
a. Melakukan Input data Disposisi Surat Masuk Kategori Segera
b. Melakukan Input Data Surat Masuk dan Surat Keluar
c. Mengedit data pelaporan Surat Masuk dan Surat Keluar
d. Melihat profile
b) Kebutuhan Sistem
Hasil  kebutuhan  sistem  yang  didapat  berdasarkan  penelitian  yaitu dibutuhkan suatu sistem yang dapat memiliki fungsi sebagai berikut:
a. Dapat menginput Surat Masuk dan Surat Keluar
b. Menampilkan  surat  kategori  Rekomendasi  Ujian,  Permohonan Lanjut Studi, Keterangan Lulus, dan Surat Umum
c. Dapat Mengedit dan Menghapus Surat Masuk dan Surat Keluar
d. Dapat Menampilkan Surat berdasarkan data yang diminta
e. Dapat menampilkan disposisi dari Surat Masuk
f. Dapat melihat data pelaporan Surat Masuk dan Surat Keluar
g. Dapat menampilkan jumlah Surat Masuk dan Keluar serta jumlah keseluruhan surat
h. Melihat dan mengedit data Admin, User Staf 1 dan 2
i. Mengubah data Username dan Password admin dan staf
B. Desain Setelah  tahap  analisis  kebutuhan  dilakukan,  maka  dibuatkan  desain berdasarkan  kebutuhan  tersebut.  Hasil  desain  dalam  tahapan  ini dirancang  dua  desain  yaitu  desain  database  aplikasi  menggunakan diagram Use Case dan Entity Relational Diagram (ERD) dan desain antar muka

## Journal of Computer and Information Systems Ampera
Vol. 3, No. 3, September 2022 e-ISSN: 2775-2496
https://journal-computing.org/index.php/journal-cisa/index
a) Desain Database 1. UseCase Diagram
Gambar 2. Desain Use Case Diagram pada Sistem Arsip Surat
Diagram UseCase pada gambar 2 menggambarkan hubungan antara aktor dan  sistem  yang  dirancang  berdasarkan  hasil  analisis  kebutuhan  untuk aktor Admin Kabag Akademik dan aktor user staf 1 dan staf 2. Terdapat 2 aktvitas sistem yang dapat dilakukan oleh kedua aktor yaitu dapat melihat data  surat  masuk  maupun  keluar  dan  mengedit  serta  melihat  data pelaporan surat masuk dan surat keluar.
2. Entity Relational Diagram (ERD)

## Journal of Computer and Information Systems Ampera
Vol. 3, No. 3, September 2022 e-ISSN: 2775-2496
https://journal-computing.org/index.php/journal-cisa/index
Wanda Latumahina, Augie David Manuputty | 163 Gambar 3. Desain Entity Relational Diagram
Pada gambar 3 dari desain Entity Relational Diagram, terdapat beberapa entitas  yaitu  Rekomendasi_masuk,  lanjut_studi_masuk,  ket_lulus_masuk dan surat_umum_masuk untuk jenis surat masuk, sedangkan untuk jenis surat keluar terdiri dari entitas rekomendasi_keluar, lanjut_studi_keluar, ket_lulus_keluar dan surat_umum_keluar. Untuk entitas surat masuk dan entitas surat keluar memiliki hubungan yaitu dengan entitas perihal_surat. Entitas  surat  masuk  memiliki  hubungan  dengan  entitas  disposisi_surat, dimana  entitas  disposisi_surat  memiliki  hubungan  dengan  entitas sifat_disposisi.

## Journal of Computer and Information Systems Ampera
Vol. 3, No. 3, September 2022 e-ISSN: 2775-2496
https://journal-computing.org/index.php/journal-cisa/index
b) Desain Antar Muka Aplikasi (UI/UX) 1. Desain Tampilan Aplikasi

## Gambar 4 . Desain Tampilan Aplikasi
Gambar 4 merupakan desain pembagian navbar, sidebar dan main content pada halaman web yang akan dibangun. Bagian navbar terdiri dari judul dari halaman web, serta panel notifikasi dan lainnya. Bagian sidebar akan terdiri dari halaman-halaman atau pages yang akan dimiliki oleh halaman web. Dan main content terdiri dari konten utama dari tiap-tiap halaman.
2. Desain tampilan form Tambah Data pada Surat Masuk
Gambar 5. Desain Tampilan Form Tambah Data Surat Masuk
Gambar  5 merupakan  desain  tampilan  form  tambah  data  pada  kategori surat masuk. Form tersebut berisi bagian-bagian form data surat masuk yang akan dimasukan ke dalam database. Terdiri dari header, form dan

## Journal of Computer and Information Systems Ampera
Vol. 3, No. 3, September 2022 e-ISSN: 2775-2496
https://journal-computing.org/index.php/journal-cisa/index
footer. Bagian header akan memuat judul dari form yang akan diisi, bagian form terdiri dari form data dan bagian footer terdiri dari tombol submit.
3. Desain tampilan Tambah Data pada Surat Keluar
Gambar 6. Desain tampilan form Tambah Data pada Surat Keluar
Gambar  6  atau  desain  form  tambah  data  pada  surat  keluar  memiliki kemiripan  dengan  form  tambah  data  surat  masuk  pada  gambar  5. Perbedaannya  ada  pada  form  tambah  data  surat  keluar  memiliki  form tanggal surat dibuat dan tujuan surat.
4. Desain tampilan Disposisi Surat Masuk

## Gambar 7 . Desain tampilan Disposisi Surat Masuk
Gambar 7 menampilkan desain tampilan bagian disposisi yang ada pada surat masuk. Nomor disposisi merupakan nomor dari disposisi surat, data surat  masuk  merupakan  data  dari  surat  masuk  yang  akan  dibuat disposisinya, dan tabel disposisi akan diisi oleh data disposisi yang dibuat.
5. Desain tampilan form input data Tabel Disposisi Surat Masuk

## Journal of Computer and Information Systems Ampera
Vol. 3, No. 3, September 2022 e-ISSN: 2775-2496
https://journal-computing.org/index.php/journal-cisa/index
166 | Perancangan Aplikasi Arsip Surat Berbasis Web Menggunakan …
Gambar 8 . Desain tampilan form input data Tabel Disposisi
Gambar  8  menggambarkan  tentang  desain  dari  tampilan  form  input disposisi  surat  masuk.  Nomor_disposisi  akan  diisi  oleh  nomor  disposisi yang telah diterbitkan, data surat masuk diisi oleh data surat masuk yang telah dimasukan sebelumnya, dan form disposisi yang akan diisi oleh data dari disposisi.
c) Implementasi Desain Tampilan Aplikasi
1. Tampilan Halaman Login Admin dan User Aplikasi
Gambar 9 . User Interface Halaman LogIn Aplikasi
Halaman login yang akan digunakan oleh admin maupunuser staf untuk masuk ke halaman utama atau dashboard.

## Journal of Computer and Information Systems Ampera
Vol. 3, No. 3, September 2022 e-ISSN: 2775-2496
https://journal-computing.org/index.php/journal-cisa/index
Wanda Latumahina, Augie David Manuputty | 167
2. Tampilan halaman utama Dashboard untuk admin Kabag dan staf
Gambar 10 . User Interface Halaman dashboard Admin Kabag
Gambar 10 menampilkan tampilan dari halaman utama atau  dashboard Admin Kabag. Pada user staf 1 dan 2 memiliki tampilan yang mirip, namun pada user staf, tidak ditampilkan halaman Kelola Data Staf dan halaman Pengaturan Profile berubah menjadi Profile Saya.
3. Tampilan Form Input Data Surat Masuk
Gambar 11 . Tampilan Form Input Data Surat Masuk
Gambar 11 merupakan tampilan dari form Input data pada Surat Masuk, yang telah dirancanga sebelumnya pada tahapan desain tampilan. Terdiri dari beberapa form untuk memasukan data pada surat masuk ke dalam database.

## Journal of Computer and Information Systems Ampera
Vol. 3, No. 3, September 2022 e-ISSN: 2775-2496
https://journal-computing.org/index.php/journal-cisa/index
168 | Perancangan Aplikasi Arsip Surat Berbasis Web Menggunakan …
4. Tampilan Form tambah Data Surat Keluar
Gambar 12 . Tampilan Form tambah Data Surat Keluar
Form tambah data surat keluar merupakan form yang digunakan untuk menginput data surat keluar yang ada pada surat keluar. Untuk kategori surat  lainnya  seperti  lanjut  studi,  keterangan  lulus,  dan  surat  umum memiliki form yang sama.
5. Tampilan Disposisi Surat
Gambar 13 . Tampilan Disposisi Surat masuk
Merupakan tampilan utama dari bagian diposisi surat, diimplementasikan berdasarkan desain tampilan pada bagian disposisi surat masuk. Bagian footer terdapat tombol yang mengarah pada bgian form input disposisi.
6. Tampilan form Input Tabel Disposisi Surat

## Journal of Computer and Information Systems Ampera
Vol. 3, No. 3, September 2022 e-ISSN: 2775-2496
https://journal-computing.org/index.php/journal-cisa/index
Wanda Latumahina, Augie David Manuputty | 169
Gambar 14 . Tampilan form Input Tabel Disposisi Surat Masuk
Tampilan  form  input  pada  tabel  disposisi  yang muncul  ketika  menekan tombol buat disposisi pada gambar 13. Terdiri dari nomor agenda, data surat masuk serta form data disposisi yang akan diinput.
7. Tampilan dari halaman Surat Masuk
Gambar 15 . Halaman Surat Masuk pada halaman Rekomendasi ujian
Gambar 15 menunjukan tampilan utama pada halaman rekomendasi ujian. Terdiri dari tombol tambah data yang mengarah ke form input data surat masuk pada gambar 11 dan tabel data surat masuk yang telah diinput. Juga terdapat tindakan yang diantaranya adalah tombol detail untuk melihat detail  surat  masuk  yang  diinput,  tombol trash atau  sampah  untuk menghapus data yang telah diinput, dan tombol disposisi untuk melihat

## Journal of Computer and Information Systems Ampera
Vol. 3, No. 3, September 2022 e-ISSN: 2775-2496
https://journal-computing.org/index.php/journal-cisa/index
170 | Perancangan Aplikasi Arsip Surat Berbasis Web Menggunakan …
disposisi dari surat. Halaman surat masuk seperti permohonanan lanjut studi,  keterangan  lulus  dan  surat  umum  memiliki  tampilan  yang  mirip dengan  tampilan  pada gambar  15,  perbedaanya  terletak  pada  judl  yang ada pad tiap halaman surat masuk.
8. Tampilan Halaman Surat Keluar
Gambar 16 . Tampilan halaman Surat Keluar kategori Rekomendasi Ujian Gambar 16 menampilkan halaman pada surat keluar pada kategori surat rekomendasi  ujian.  Memiliki  kemiripan  pada  tampilan  dengan  halaman yang ada pada surat masuk, perbedaanya hanya ada pada tindakan pada surat  keluar  tidak  memiliki  disposisi  sehingga  tindakan  dsipsosisi dihilangkan. Tampilan halaman surat keluar pada rekomendasi masuk ini juga sama dengan tampilan pada halam surat keluar lainnya.
9. Tampilan halaman Kelola Data Surat
Gambar 17 . User Interface halaman Kelola Data Surat

## Journal of Computer and Information Systems Ampera
Vol. 3, No. 3, September 2022 e-ISSN: 2775-2496
https://journal-computing.org/index.php/journal-cisa/index
Wanda Latumahina, Augie David Manuputty | 171
Gambar  17  menampilkan  halaman  dari  kelola  data  surat.  Halaman  ini digunakan untuk mengelola data dari surat masuk dan surat keluar, yang diubah menjadi dalam bentuk suatu laporan baik mengenai surat masuk maupun  surat  keluar.  Disertai  dengan filter yang  berfungsi  sebagai penyaring data apa saja, dari jangka waktu apa saja dan jenis surat apa saja yang akan disaring dan masuk ke dalam laporan.
10. Tampilan Halaman Pengaturan Profile
Gambar 18 . User Interface halaman Pengaturan Profile Admin
Gambar 18 merupakan tampilan dari halaman profile untuk Admin Kabag. Admin kabag memiliki kendali untuk mengubah profile yaitu pada update profile dan jua mengubah username dan password admin.
Gambar 19 . User Interface halaman Profile User Staf 1 dan 2

## Journal of Computer and Information Systems Ampera
Vol. 3, No. 3, September 2022 e-ISSN: 2775-2496
https://journal-computing.org/index.php/journal-cisa/index
172 | Perancangan Aplikasi Arsip Surat Berbasis Web Menggunakan …
Dan  pada  gambar  19  menampilkan  halama  profile  saya  pada  user  staf, namun  untuk  staf  sendiri  tidak  memiliki  Kendali  untuk  mengupdate maupun  mengubah  username  atau  password  user.  Baik  user  staf  1  dan userb staf 2 memiliki tampilan yang mirip, hanya berbeda pada foto dari profile, username dan rol dari user staf 2.
11. Tampilan Halaman Kelola Data Staf 1 dan Staf 2
Gambar 20 . User Interface halaman Kelola Data Staf
Tampilan halaman kelola data staf pada gambar 20 digunakan oleh admin kabag  untuk  mengatur  dan  mengelola  data  dari  staf.  Admin  dapat mengubah profile yang ada pada staf dan juga mengubah username dan password dari staf. Halaman ini tidak ditampilan pada halaman user staf, karena hanya Admin yang memiliki kendali untuk mengelola halaman ini.

## C. TEST
Test  atau  pengujian  merupakan  tahapan  untuk  melakukan  pengujian terhadap aplikasi, untuk mencegah terjadinya error atau kesalahan sistem pada  aplikasi.  Teknik  Pengujian  yang  akan  digunakan  untuk  menguji aplikasi adalah teknik Blackbox Testing.

## Journal of Computer and Information Systems Ampera
Vol. 3, No. 3, September 2022 e-ISSN: 2775-2496
https://journal-computing.org/index.php/journal-cisa/index
Wanda Latumahina, Augie David Manuputty | 173
Tabel 1. Pengujian Aplikasi menggunakan teknik pengujian Blackbox
Testing No. Pengujian Test case Hasil yang Diharapkan Hasil Pengujian Kesimpulan 1. Saat klik menu Rekomendasi Ujian Klik Menu Rekomendasi Ujian Masuk pada halaman Rekomendasi Ujian Sesuai Harapan Valid 2. Saat ingin Menambahkan Data Surat Masuk pada Menu Rekomendasi Ujian Klik tambah data pada halaman Rekomendasi Ujian Muncul form tambah data untuk mengiput data surat masuk Sesuai Harapan Valid 3. Saat ingin melihat detail data surat masuk pada halaman Rekomendasi Ujian Klik di bagian tindakan button detail pada tabel surat masuk Muncul modal detail informasi data surat masuk Sesuai Harapan Valid 4. Saat ingin menambahkan disposisi surat masuk Klik button disposisi, dan klik button disposisi baru Muncul form untuk menginput data disposisi baru Sesuai Harapan Valid 5. Saat ingin mengelola data surat masuk dan surat keluar Klik menu kelola data surat Muncul halaman kelola data surat Seusai Harapa Valid 6. Saat ingin mengubah username dan password admin Klik halaman pengaturan profile, dan klik button username dan password Muncul form ubah username dan password yang akan diubah Sesuai Harapan Valid 7. Ingin mengubah username dan Klik menu kelola data staf, klik button Muncul form ubah username dan Sesuai Harapan Valid

## Journal of Computer and Information Systems Ampera
Vol. 3, No. 3, September 2022 e-ISSN: 2775-2496
https://journal-computing.org/index.php/journal-cisa/index
password user staf username dan password password yang akan diubah 8. Aplikasi dapat dijalankan pada web browser dijalankan di web browser Google Chrome versi 103.0.5060.114 Aplikasi dapat dibuka dan dijalankan dengan baik pada google chrome Sesuai Harapan Valid

## 4. KESIMPULAN
Perkembangan teknologi yang yang terus berkembang pesat mendorong tiap  aktivitas  yang  dijalankan  untuk  turut  menggunakan  teknologi informasi.  Khususnya  pada  perguruan  tinggi,  diperlukan  teknologi informasi  yang  terintegrasi,  untuk  berjalannya  proses  dan  dapat mengelola  data  atau  informasi  yang  ada  pada  perguruan  tinggi. Permasalahan utama yang ada pada studi kasus adalah kesulitan dalam pengarsipan  surat  yang  masuk  dan  surat  keluar,  karena  proses  masih dilakukan secara manual, sehingga mempengaruhi proses yang berjalan. Aplikasi berbasis web dirancang untuk mengatasi permasalahan tersebut dengan  sistem  utuk  pengarsipan  surat  masuk  dan  surat  keluar menggunakan metode waterfall. Hasil dari penelitian ini adalah aplikasi berbasis web, dengan beberapa fitur yang telah didesain berdasarkan hasil analisis kebutuhan seperti halaman dashboard, halaman form input surat masuk dan surat keluar, halaman untuk melihat data surat masuk maupun surat keluar beserta tindakan yang ada, halaman kelola data surat untuk mengelola data surat masuk dan keluar menjadi suatu laporan, pengaturan profile  baik  profile  admin  maupun  tampilan  profile  staf  dan  halaman kelola data staf dimana admin dapat mengelola dan mengubah data staf. Hasil pengujian aplikasi adalah aplikasi dapat berjalan dengan baik sesuai dengan  pengujuan  dan  test  case  yang  diuji,  dan  dengan  bantuan  server apche aplikasi dapat berjalan dengan baik pada salah satu web browser yang digunakan yaitu google chrome versi .

## DAFTAR PUSTAKA
[1] M.  G. Simon, “COLLEGE INFORMATION SYSTEM : CIS UNIVERSITY
OF JUBA A Thesis Submitted to the College of Computer Science and

## Journal of Computer and Information Systems Ampera
Vol. 3, No. 3, September 2022 e-ISSN: 2775-2496
https://journal-computing.org/index.php/journal-cisa/index
Wanda Latumahina, Augie David Manuputty | 175
Information Technology , University of Juba , in Partial Fulfilment of the Requirement Leading to the Award of the Degree of Bachelor of Science ,” no. September, 2017.
[2] N. Zeina and M. Sari, “The Effect Of Eficiency Information Technology
And  Communications  Before  And  After  Wearing  Information Accountant  Manajemen  System  (  Siam  )  Case  Study  Pts  X  In
Indonesia,” Int. J. Sci. Technol. Res. , vol. 5, no. 03, 2016.
[3] F.  Amin,  “Prototype  Aplikasi  Sistem  Informasi  Akademik  Berbasis Web  (Studi  Kasus :  Universitas  Kristen  Indonesia  Maluku),”  no. 682012025, p. 15, 2016.
[4]  Muhamad  Tabrani  an d  E.  Pudjiarti,  “PENERAPAN  METODE WATERFALL  PADA  SISTEM  INFORMASI  INVENTORI  PT.  PANGAN
SEHAT SEJAHTERA,” J. Inkofar , vol. 1, no. 2, pp. 30 – 40, 2017.
[5] R.  Susanto  and  A.  D.  Adriana,  “PERBANDINGAN  MODEL
WATERFALL  DAN  PROTOTYPING  UNTUK  PENGEMBANGAN SISTEM I NFORMASI,” Maj. Ilm. UNIKOM , vol. 14, pp. 41 – 46, 2016.
[6] R. A. Sukamto and M. Salahuddin, “‘Activity Diagram,’ in Rekayasa Perangkat Lunak Terstruktur dan Berorientasi Objek,” J. Pilar Nusa
Mandiri , 2015.
[7] Agus  Prayitno  and  Y.  Safitri,  “Volume  1  No  1  – 2015 Lppm3.bsi.ac.id/jurnal  IJSE – Indonesian  Journal  on  Software Engineering,” Pemanfaat.  Sist.  Inf.  Perpust.  Digit.  Berbas.  Website Untuk Para Penulis , vol. 1, no. 1, pp. 1 – 10, 2015, [Online]. Available: https://ejournal.bsi.ac.id/ejurnal/index.php/ijse/article/download /592/483.