## History:
Received  : 25 Mei 2023 Revised  : 10 Juni 2023 Accepted : 23 Juli 2023 Published : 25 Agustus 2023
Publisher: LPPM Universitas Darma Agung Licensed: This work is licensed under Attribution-NonCommercial-No Derivatives 4.0 International (CC BY-NC-ND 4.0)

## Jurnal Darma Agung
Volume: 31, Nomor: 4, (2023), Agustus: 706 - 715 https://dx.doi.org.10.46930/ojsuda.v31i4.3217
P-ISSN:0852-7296 E-ISSN:2654-3915

## PERANCANGAN FRONT-END APLIKASI KEARSIPAN BERBASIS WEB (E-ARSIP) DI SMKN 6 BANDUNG
Vianty Julia Suryana Putri 1 , Feri Sulianta 2
Fakultas Teknik Universitas Widyatama, Bandung, Indonesia 1,2
Corresponding Author: putrivianty14@gmail.com 1, feri.sulianta@widyatama.ac.id 2

## Abstrak
Aplikasi  kearsipan  berbasis  web  (e-arsip)  adalah  suatu  aplikasi  yang  digunakan  oleh staff pada  suatu instansi  sebagai  alat  yang  berfungsi  dalam  memanajemen  hal-hal  yang  berhubungan  dengan  arsip. Implementasi  aplikasi  kearsipan  berbasis  web  ini  dimaksudkan  untuk  mengoptimalkan  penggunaan pengarsipan surat yang berupa surat masuk dan juga surat keluar. Pembuatan aplikasi ini dikembangkan sebagai sebuah solusi untuk SMKN 6 yang pengelolaan kearsipannya masih secara manual yaitu dengan cara  ditulis  pada  buku  catatan  lalu  dimasukan  ke  dalam  lemari  secara  berkelompok  sesuai  dengan jenisnya. Cara ini kurang efektif dan bisa dibilang kurang aman untuk menyimpan arsip suatu instansi yang terbilang penting. Selain itu juga, nomor surat dicatat menggunakan tulisan tangan ke dalam buku, hingga  dapat  terjadinya  pengulangan  nomor  surat.  Adapun  metode  yang  digunakan  penulis  untuk membuat  aplikasi  ini  yaitu  metode  waterfall,  untuk  pengumpulan  data  yang  dibutuhkan,  penulis melakukan  wawancara  kepada  pihak  terkait,  observasi,  dan  juga  kajian  pustaka.  Sedangkan  dalam perancangan  aplikasi  arsip  berbasis  web  ini,  penulis  menggunakan  bahasa  pemrograman  HTML,  CSS, JavaScript, dan framework Laravel.

## Kata Kunci: Aplikasi E-Arsip, Laravel, Waterfall

## Abstract
Web-based  archiving  application  (e-archive)  is  an  application  that  is  used  by  staff  at  an  agency  as  a  tool  that functions  in  managing  matters  related  to  archives.  The  implementation  of  this  web-based  filing  application  is intended to optimize the use of mail archiving in the form of incoming and outgoing mail. Making this application was developed as a solution for SMKN 6 where filing management is still done manually, namely by writing it in a notebook  and  then  putting  it  in  a  cupboard  in  groups  according  to  its  type.  This  method  is  less  effective  and arguably less secure for storing archives of an institution that  is fairly important. Apart from that, letter numbers are recorded by hand in a book, so that letter numbers can be repeated. The method used by the author to make this application  is  the  waterfall  method,  for  collecting  the  required  data,  the  author  conducts  interviews  with  related parties, observations, and also reviews the literature. Meanwhile, in designing this web-based archive application, the authors use the programming language HTML, CSS, JavaScript, and the Laravel framework.

## Keywords: E-Archive Application, Laravel, Waterfall

## PENDAHULUAN
Berkembangnya teknologi diera 4.0 saat ini membuat kita tidak terlepas dari segala hal  yang  berkaitan  dengan  teknologi  (Risdianto,  2019).  Saat  ini,  bisa  dikatakan teknologi telah menjadi kebutuhan pokok dalam berbagai aspek kehidupan sehari hari. Teknologi  digunakan  bukan  hanya  untuk  instansi  pemerintah  atau  non  pemerintah,
Vianty Julia Suryana Putri 1 , Feri Sulianta 2 , Perancangan Front-End Aplikasi Kearsipan Berbasis Web (E-Arsip) Di Smkn 6 Bandung
namun  hampir  semua  pekerjaan  saat  ini  dijalankan  tidak  lepas  dari  kebutuhan  sistem teknologi (Powa et al., 2021).
Setiap instansi pasti memiliki arsip berupa dokumen. Misalnya suatu sekolah, pasti memiliki  arsip  data  guru,  siswa,  pegawai,  surat  yang  masuk  dan  juga  surat  yang keluar. Pada arsip tersebut pasti berisikan dokumen yang sangat banyak juga penting, mengingat  dari  sumber  daya  manusia  di  dalam  sebuah  instansi  tidaklah  sedikit.  Oleh karena  itu  suatu  instansi  harus  memikirkan  bagaimana  caranya  mengelola  arsip,  agar arsip  tersebut  tersimpan  dengan  rapi  dan  aman,  agar  jika  suatu  saat  arsip  tersebut dibutuhkan, instansi dengan cepat bisa menemukannya.
Diketahui  masih  banyak  instansi  yang  belum  mengikuti  perkembangan  dalam pengelolaan  arsip.  Salah  satunya  adalah  SMKN  6  Bandung.  Pada  tahap  wawancara, ditemukan bahwa manajemen arsip pada surat masuk dan juga surat keluar di SMKN 6 Bandung masih menggunakan proses manual, yaitu masih memanfaatkan buku catatan untuk  mencatat  dokumen  surat  masuk  dan  juga  keluar,  kemudian  buku  tersebut disimpan  di  dalam  lemari  dan  dikelompokkan  sesuai  dengan  jenisnya.  Hal  ini mengakibatkan  proses  pengelolaan  arsip  yang  berupa  surat  masuk  dan  juga  surat keluar  menjadi  lebih  lambat.  Selain  itu  juga  penyimpanan  arsip  secara  manual  dapat mengakibatkan berbagai macam masalah, seperti pada tempat penyimpanannya, biaya pemeliharaan,  sumber  daya  manusia  (SDM)  yang  berupa  tenaga  pengelola,  fasilitas, dan factor lainnya yang dapat mengakibatkan hilangnya atau rusaknya arsip.
Oleh  karena  itu  penggunaan  teknologi  dalam  penyimpanan  arsip  SMKN  6  sangat dibutuhkan, karena adanya sarana elektronik misalnya komputer dan aplikasi aplikasi yang  berbasis  web  dapat  mempermudah  manajemen  arsip,  pencarian  arsip  yang dibutuhkan  lebih  cepat,  dan  juga  arsip  yang  tersimpan  lebih  aman.  Maka  dari  itu, dibuatlah  aplikasi  pengarsipan  elektronik  berbasis  web  untuk  menyimpan  dan mengelola arsip surat masuk dan keluar SMKN 6 Bandung.

## A. Pengertian Aplikasi
Aplikasi  ialah  suatu  perangkat  lunak  yang  dirancang  sebagai  pemenuh  kebutuhan beraneka  ragam  kegiatan  atau  pekerjaan,  contohnya  seperti  pada  kegiatan  perbankan, pelayanan kepada masyarakat, publisitas, dan juga berbagai macam kegiatan lain yang dikerjakan oleh manusia.
Aplikasi  diartikan  sebagai  penerapan  suatu  konsep  atau  suatu  program  pada komputer  yang  dibangun  dengan  tujuan  untuk  membantu  manusia  dalam mengerjakan tugas tertentu (Kadir,2003).

## B. Front-end
Front-end  yaitu  segala  sesuatu  yang  berfungsi  untuk  menghubungkan user dengan back-end. Front-end ialah user interface yang dapat secara langsung berinteraksi dengan
Vianty Julia Suryana Putri 1 , Feri Sulianta 2 , Perancangan Front-End Aplikasi Kearsipan Berbasis Web (E-Arsip) Di Smkn 6 Bandung
user .  Dirancang  menggunakan  HTML  dan  CSS  yang  didalamnya  terdapat  tampilan yang sederhana yang kemudian dapat digunakan dengan mudah oleh umum.

## C. E-Arsip
E-Arsip adalah suatu  data atau file arsip yang disimpan  dan juga dialihkan kedalam format  kode  desentralisasi  atau  biner  yang  dapat  dibuka,  dirubah  dan  juga  dihapus oleh  alat  komputer  yang  dapat  mengubah  dan  memanipulasi  data  tersebut  menjadi format biner, sehingga arsip tersebut kemudian dapat digunakan dan dimanfaatkan.

## D. Hypertext Markup Language (HTML)
Hypertext  Markup  Language yang    berasal    dari kata HTML dalam  ilmu  komputer, adalah  bahasa  teks  untuk  file  dalam  yang  dalam  jaringan  computer  dikenal  dengan World Wide Web .

## E. Cascading Style Sheets (CSS)
Cascading  Style  Sheets atau  yang  disingkat  dengan CSS berfungsi  untuk  mengatur tampilan  atau  halaman  sebuah  website  .  Selain  itu, CSS juga  berfungsi  untuk menstrukturkan komponen web yang beragam sesuai dengan keinginan.

## F. Javascript
Javascript  adalah  Bahasa  pemrogramman  web  yang  prosesnya  dilakukan  di  sisi client.  Karena  itu,  javascript  hanya  dapat  digunakan  di  dalam  browser.  Berbeda  dari PHP  yang  akan  dijalankan  pada  sisi  server,  untuk  menjalankan script javascript  tidak dibutuhkan perbaharuan pada browser .
Dalam situasi tertentu, Javascript akan digunakan pada situs web. Baik situasi yang terjadi oleh user ataupun saat adanya perubahan pada halaman website .

## G. Laravel
Pada  Perancangan  aplikasi  ini,  penulis  menggunakan  PHP  sebagai  bahasa pemrogramman  dan  framework  Laravel  sebagai  support  library.  Framework  Laravel ialah framework PHP yang di dalamnya menggunakan konsep MVC yaitu Model , View , dan Controller .  Laravel  mempunyai  berbagai  macam  fitur  modern  yang  dapat membantu  saat  proses  perancangan  web,  misalnya  artisan,  blade  template  engine, migrasi data, pagination, dan juga eloquent ORM ( Object Relation Mapping ).

## H. Waterfall
Metode yang digunakan pada perancangan aplikasi kearsipan berbasis web (e-arsip) ini  adalah  metode  waterfall.  Metode  Waterfall  merupakan  suatu  metode  yang  di menyediakan  fungsi  sebagai  pendekatan  alur  perancangan  aplikasi  secara  berurutan
Vianty Julia Suryana Putri 1 , Feri Sulianta 2 , Perancangan Front-End Aplikasi Kearsipan Berbasis Web (E-Arsip) Di Smkn 6 Bandung
dimulai  dari  tahap  analisa,  desain,  pengkodean,  pengujian,  dan  pendukung  ( support ) (Rosa dan Shalahuddin, 2013).

## METODE PENELITIAN

## A. Objek Penelitian
Penelitian ini dilakukan di SMKN 6  Bandung  yang berlokasi di JL. Soekarno-Hatta, Komplek Riung Bandung Kecamatan Gede Bage, Bandung.

## B. Metode Pengembangan Aplikasi
Metodologi  pengembangan  aplikasi  adalah  proses  membangun  dan  memodifikasi sistem  dan  model  serta  metode  yang  digunakan  untuk  mengembangkan  aplikasi (Prabowo,  2020).  Dalam  perancangan  aplikasi  pengarsipan  elektronik  ini,  metode pengembangan  yang  dipilih  oleh  penulis  untuk  memudahkan  perancangan  aplikasi adalah metode waterfall, yang di dalamnya mempunyai tahapan proses sebagai berikut :

## Gambar 1. Skema Metode
Waterfall

## C. Teknik Pengumpulan Data
Metode  berikut  digunakan  oleh  penulis  untuk  mengumpulkan  data  yang diperlukan:
1. Wawancara ( Interview )
Salah satu metode yaitu dengan dilakukannya wawancara langsung kepada pihak yang  terkait  yaitu  wakil  kepala  bidang  kurikulum  dan  juga  bagian  tata  usaha selaku staff yang bertanggung jawab untuk arsip sekolah.
2. Tinjauan Pustaka ( Literature Review )
Penulis menggunakan metode ini untuk
referensi  cara  membuat  aplikasi  arsip  elektronik  berbasis  web.  Hal  ini  dilakukan dengan  melihat,  membaca  dan  mengembangkan  informasi  tentang  topik  yang dibahas untuk mendukung penelitian.
3. Dokumentasi
Mengumpulkan  beberapa  dokumentasi  yang  diperlukan  dan  berguna  untuk membantu penelitian.
Vianty Julia Suryana Putri 1 , Feri Sulianta 2 , Perancangan Front-End Aplikasi Kearsipan Berbasis Web (E-Arsip) Di Smkn 6 Bandung

## HASIL dan PEMBAHASAN
A. Rancangan Sistem

## 1. Use Case Diagram
Salah  satu  diagram  UML  yang  digunakan  untuk  mendukung  perancangan  sistem aplikasi  pengarsipan  berbasis  web  ini  adalah use  case diagram. Use  case diagram berfungsi  untuk  melakukan  pemodelan  kelakuan  ( behaviour )  aplikasi  yang  akan dirancang. Sebuah use case berisi fitur fitur yang ada dalam aplikasi dan siapa saja yang diperbolehkan untuk menggunakanya.
Gambar 2. Use Case Diagram

## 2. Activity Diagram
Activity diagram adalah gambaran proses dari  aktivitas yang terjadi di dalam suatu aplikasi  yang  akan  dirancang.  Dimulai  dari  awal  masing  masing  proses,  keputusan yang mungkin akan diambil, dan bagaimana proses tersebut akan berakhir. Biasanya di dalam activity diagram  tidak  akan  menjabarkan  setiap  detail  urutan  proses,  tetapi hanya menjelaskan secara global bagaimana urutan prosesnya. Berikut activity diagram pada menu surta masuk dan juga surat keluar
Gambar 3. Activity Diagram Surat Masuk
Gambar 4. Activity Diagram Surat Keluar
Vianty Julia Suryana Putri 1 , Feri Sulianta 2 , Perancangan Front-End Aplikasi Kearsipan Berbasis Web (E-Arsip) Di Smkn 6 Bandung

## 3. Class Diagram
Class Diagram  merupakan  salah  satu  diagram  UML    yang  berfungsi    untuk menampilkan kelas kelas dan juga relasi antar kelas yang ada pada perancangan front end aplikasi kearsipan berbasis web (e-arsip). Diagram ini mempunyai sifat statis, tidak mendeskripsikan apa yang akan terjadi jika kelas saling terkait, melainkan menjelaskan apa  yang  sedang  terjadi.  Berikut  merupakan class diagram  pada  perancangan  aplikasi ini :
Gambar 5. Class Diagram

## 4. Deployment Diagram
Deployment diagram  merupakan  gambaran  arsitektur  suatu  hubungan  antara perangkat keras dan perangkat lunak yang dilihat dari dalam sebuah aplikasi. Berikut merupakan deployment diagram dari aplikasi kearsipan berbasis web (e-arsip):
Gambar 6. Deployment Diagram

## B. Perancangan Struktur Menu
Struktur  menu  berisikan  gambaran  umum  dari  keseluruhan  program  yang  akan  di rancang.  Berikut  merupakan  struktur  menu  yang  dibuat  untuk  aplikasi  e-arsip  pada SMKN 6 Bandung:
Gambar 7. Struktur Menu

## C. Implementasi Hasil Rancangan Program
Implementasi  dilakukan  berdasar  pada  skema  metode waterfall. Dalam  membuat aplikasi kearsipan berbasis web (e-arsip) ini, dibutuhkan beberapa alat pengembangan
Vianty Julia Suryana Putri 1 , Feri Sulianta 2 , Perancangan Front-End Aplikasi Kearsipan Berbasis Web (E-Arsip) Di Smkn 6 Bandung
aplikasi antara lain vscode sebagai code editor application , xampp sebagai software untuk local server dan Laravel sebagai framework .
Berikut  hasil  pengimplementasi  perancangan Front-End pada  Aplikasi  E-Arsip Berbasis Web di SMKN 6 Bandung yaitu sebagai berikut :
a. Login

## Gambar 8. Page Login
Pada  Gambar  8  menunjukan pagelogin yang  menampilkan  kolom username , password , dan tombol create an account untuk registrasi akun yang belum terdaftar.
b. Create Account
Gambar 9. Page Create Account
Pada  gambar  9  menampilkan page  create  account atau  menambahkan  akun  baru yang belum terdaftar pada database, didalamnya berisikan kolom username , email address , dan juga password .
c. Dashboard

## Gambar 10. Page Dashboard
Pada  gambar  10  menampilkan page  dashboard yang  berisikan  menu  pada  aplikasi e-arsip  yaitu  surat  masuk  dan  surat  keluar  keluar, report surat  masuk  dan  surat keluar.
d. Surat Masuk
Gambar 11. Page Surat Masuk
Vianty Julia Suryana Putri 1 , Feri Sulianta 2 , Perancangan Front-End Aplikasi Kearsipan Berbasis Web (E-Arsip) Di Smkn 6 Bandung
Gambar  11  menunjukan page surat  masuk  yang  di  dalamnya  menampilkan  surat masuk  yang  ada  di  SMKN  6  Bandung,  lalu  terdapat  menu search yang  akan memudahkan  mencari  surat  masuk,  dan  juga  menu  tambah  data  untuk menambahkan dokumen surat masuk.
e. Surat Keluar

## Gambar 12. Page Surat Keluar
Gambar  12  menampilkan page surat  keluar  yang  akan  menampilkan  surat  yang telah keluar atau dikirim dari SMKN 6 Bandung, lalu terdapat menu search yang akan  memudahkan  mencari  surat  keluar,  dan  juga  menu  tambah  data  untuk menambahkan dokumen surat keluar.
f. Report Surat Masuk
Gambar 13. Report Surat Masuk
Gambar  13  menunjukan report surat  masuk,  terdiri  dari  report  surat  masuk  yang ada  di  SMKN  6  Bandung.  Pada page  report surat  masuk  terdapat  tombol  cetak report untuk mencetak laporan surat masuk yang diinginkan.
g. Report Surat Keluar
Gambar 14. Report Surat Keluar
Gambar 13 menunjukan report surat keluar, terdiri dari laporan surat keluar yang ada  di  SMKN  6  Bandung.  Sama  seperti page surat  masuk,  di  dalam page  report
Vianty Julia Suryana Putri 1 , Feri Sulianta 2 , Perancangan Front-End Aplikasi Kearsipan Berbasis Web (E-Arsip) Di Smkn 6 Bandung
surat  keluar  terdapat button cetak report untuk  mencetak  laporan  surat  masuk yang diinginkan.
h. Profile
Gambar 15. Page Profile
Gambar  15  merupakan page  profile yang  menampilkan profile akun  kita.  Lalu terdapat  menu edit  profile jika  kita  ingin  mengubah profile kita,  misalnya  ingin menambahkan foto atau merubah username dan juga email .

## SIMPULAN
Dari  uraian  dan  rancangan  sistem  diatas,  dapat  disimpulkan  bahwa  penulis merancang  front  end  aplikasi  kearsipan  berbasis  web  (e-arsip)  di  SMKN  6  Bandung yang dibutuhkan dan sesuai dengan keinginan yang disampaikan oleh user . Aplikasi e- arsip ini terdiri dari fitur menu surat masuk dan keluar, serta report sehingga dokumen penting  yang  ada  tersebut  tidak  lagi  berupa  kertas  yang  berserakan  melainkan disimpan  di  database server yang  aman  dan  juga  rapih.  Dengan  dibuatnya  aplikasi  e- arsip  ini  diharapkan  dapat  membantu  sekolah  khususnya  bagian  arsip  dalam menyimpan dokumen surat masuk dan surat keluar yang ada di sekolah.

## DAFTAR PUSTAKA
Abdulloh, R. (2020). Menguasai React JS Untuk Pemula: Panduan belajar JavaScript dari dasar hingga membuat aplikasi web modern (Vol. 1). Rohi Abdulloh.
Bunda,  I.  P.,  &  Nopriani,  F.  (2022,  September).  Perancangan  Sistem  Informasi  Arsip Surat Pada Kantor BPJS Ketenagakerjaan Kanwil Sumbagsel. In Prosiding Seminar Nasional Sains dan Teknologi Terapan (Vol. 5, pp. 302-307).
Dewi,  L.  P.,  Indahyanti,  U.,  &  Hari,  Y.  (2012). Pemodelan  proses  bisnis  menggunakan activity  diagram  uml  dan  bpmn  (studi  kasus  frs  online) (Doctoral  dissertation,  Petra Christian University).
Efdiningsih,  E.,  Saputri,  G.  J.,  &  Yudertha,  A.  (2023).  Perancangan  Sistem  Informasi Arsip  Kontrak  Vendor  Berbasis  Web  Menggunakan  Boostrap  di  PT  Perkebunan Nusantara VI. Journal on Education, 5(4), 11397-11405.
Khoiriyah, K., Sari, J., & Triaji, A. (2022). PERANCANGAN APLIKASI PENGOLAHAN DATA  (E-ARSIP)  DOKUMEN  BERITA  ACARA  PENGIRIMAN  BARANG BERBASIS WEB. JRIS: Jurnal Rekayasa Informasi Swadharma, 2(2), 61-69.
Limbong, T. (2021). Pemrograman Web Dasar.
Powa,  A.  A.,  Kaawoan,  J.  E.,  &  Pangemanan,  F.  N.  (2021).  Pemanfaatan  teknologi  dan
Vianty Julia Suryana Putri 1 , Feri Sulianta 2 , Perancangan Front-End Aplikasi Kearsipan Berbasis Web (E-Arsip) Di Smkn 6 Bandung
informasi  di  Dinas  Komunikasi  dan  Informatika  Statistik  dan  Persandian  di Kabupaten Minahasa Tenggara. GOVERNANCE , 1 (2).
Prabowo,  M.  (2020). Metodologi  Pengembangan  Sistem  Informasi .  LP2M  Press  IAIN Salatiga.
Putra,  A.  H.,  Pramana,  D.,  &  Srinadi,  N.  L.  P.  (2019).  Sistem  Manajemen  Arsip Menggunakan  Framework  Laravel  dan  Vue.  Js  (Studi  Kasus:  BPKAD  Provinsi Bali). Jurnal Sistem Dan Informatika (JSI), 13(2), 97-104.
Risdianto, E. (2019). Analisis pendidikan indonesia di era revolusi industri 4.0. April, 0 – 16. Diakses Pada , 22 .
Suratman,  W.,  Fauziah,  F.,  &  Sari,  R.  T.  K.  (2021).  Aplikasi  Elektronik  Arsip  (E-Arsip) Surat  Berbasis  Web  Menggunakan  Metode  First  In  First  Out  (FIFO).  Paradigma, 23(2).
Suryadi, A., & Zulaikhah, Y. S. (2019). Rancang Bangun Sistem Pengelolaan Arsip Surat Berbasis  Web  Menggunakan  Metode  Waterfall.  Jurnal  Khatulistiwa  Informatika, 7(1).
Suryadi, A., & Zulaikhah, Y. S. (2019). Rancang Bangun Sistem Pengelolaan Arsip Surat Berbasis  Web  Menggunakan  Metode  Waterfall.  Jurnal  Khatulistiwa  Informatika, 7(1).
Wildan,  B.,  Sari,  A.  P.,  &  Nasution,  R.  (2021).  Sistem  Informasi  Manejemen  Surat Berbasis Web Pada Pt. Clipan Finance Indonesia, Tbk. Hexagon Jurnal Teknik dan Sains, 2(1), 85-90.
Yuliana,  D.  (2022).  RANCANG  BANGUN  USER  INTERFACE  (UI)  DAN  USER EXPERIENCE  (UX)  PADA  SISTEM  INFORMASI  PENGARSIPAN  DOKUMEN BERBASIS  WEBSITE  DI  KABUPATEN  TEGAL.  LEDGER:  Journal  Informatic  and Information Technology, 1(2), 50-59.