Jurnal Riset Sistem Informasi Dan Teknik Informatika (JURASIK) Volume 9, Nomor 1, Februari 2024, pp 60-69 Terakreditasi Nomor 204/E/KPT/2022 | ISSN: 2527-5771/EISSN: 2549-7839 https://tunasbangsa.ac.id/ejurnal/index.php/jurasik

## Perancangan Surat Keterangan Kerja Berpengaman Berbasis Web Dengan Metode Prototype Pada PT. Hartono Istana Teknologi
Laurentius Ruiz Yakhrisma Dewanta 1* , Christ Rudianto 2 1,2 Program Studi Sistem Informasi, Fakultas Teknologi Informasi, Universitas Kristen Satya Wacana, Salatiga, Indonesia
Email: 682019112@student.uksw.edu 1 , chris . rudianto@uksw.edu 2

## Abstract
PT. Hartono has a problem with making a work certificate where the letter requires a signature from the leadership, and if the leader is not present there will be a delay. This research aims to design a website-based  information  system  to  assist  in  the  process  of  submitting,  producing  work  certificates required  by  employees,  and  validating  letter  by  company  leader.  This  research  uses  a  qualitative method that uses the figma application to make the design and with a prototype method  approach. With  this  design,  it  will  produce  a  web-based  information  system  that  can  assist  the  process  of submitting and making work certificates for employees at PT. Hartono
Keywords : Information System, Prototype Method, Figma, Website

## Abstrak
PT.  Hartono  memiliki  permasalahan  pada  pembuatan  surat  keterangan  kerja  yang  dimana surat tersebut membutuhkan tanda tangan dari pimpinan, dan apabila pimpinan sedang tidak hadir akan  terjadi  penundaan.  Penelitian  ini  memiliki  tujuan  untuk  merancang  sistem  informasi  berbasis website untuk membantu proses pengajuan, pembuatan surat keterangan kerja yang diperlukan oleh karyawan,  serta  validasi  surat  oleh  pimpinan  perusahaan.  Penelitian  ini  menggunakan  metode kualitatif  yang  menggunakan  aplikasi  figma  untuk  membuat  desain  dengan  pendekatan  metode prototype. Dengan adanya perancangan ini, akan menghasilkan sistem informasi berbasis web yang dapat  membantu  proses  pengajuan  dan  pembuatan  surat  keterangan  kerja  untuk  karyawan  di  PT. Hartono.
Kata kunci : Sistem Informasi, Metode Prototype, Figma, Website

## 1. PENDAHULUAN
Teknologi informasi berkembang begitu  pesat,  perkembangan yang sangat pesat ini memicu adanya inovasi – inovasi di bidang teknologi informasi maupun sistem informasi untuk  dapat membantu meringankan pekerjaan manusia. Sistem informasi  merupakan  salah  satu  faktor  berpengaruh  yang  dapat  membantu keberhasilan dari suatu organisasi untuk mencapai tujuannya. Penggunaan suatu teknologi  informasi  yang  tepat  dapat  membantu  meningkatkan  efektivitas  dan efisiensi  operasional  kerja  organisasi[1].  Akan  tetapi,  dengan  semakin berkembangnya  teknologi  informasi,  praktek  –  praktek  pemalsuan  dokumen  pun dengan sangat mudah juga dilakukan. Potensi terjadinya pemalsuan yang lain pun juga kemungkinan besar dapat terjadi[2].
QR  Code ( Quick  Response  Code )  merupakan  salah  satu  teknologi  yang  dapat digunakan  untuk  mengatasi  permasalahan  keamanan  diatas.  Dengan  dapat menampung data secara vertikal dan horizontal[3]. Digital Signature adalah tanda tangan  asli  yang  diletakkan  pada  informasi  digital  atau  secara  elektronik  seperti
Jurnal Riset Sistem Informasi Dan Teknik Informatika (JURASIK) Volume 9, Nomor 1, Februari 2024, pp 60-69 Terakreditasi Nomor 204/E/KPT/2022 | ISSN: 2527-5771/EISSN: 2549-7839 https://tunasbangsa.ac.id/ejurnal/index.php/jurasik
pada  e-mail  ataupun  dokumen  elektronik  yang  isinya  mengonfirmasi  bahwa informasi berasal dari penanda tangan dan belum ada perubahan[4].
Sistem  Informasi  ini  akan  dibuat  dengan  metode prototype.  Prototyping merupakan  metode  dalam  mengembangkan  perangkat  lunak  yang  berupa  model fisik kerja sistem dan berfungsi sebagai versi awal sistem. Dengan metode ini akan menghasilkan prototype sistem  sebagai  perantara  antara  pengembang  dan pengguna dalam proses pengembangan sistem informasi[5] . Dalam pembuatannya dibantu  dengan  aplikasi  Figma.  Figma  merupakan  sebuah  alat  yang  digunakan untuk membuat tampilan dari aplikasi – aplikasi untuk website, mobile, dan lain – lain.  Figma  memiliki  keunggulan  yaitu  dapat  digunakan  dalam  satu  proyek  yang sama oleh lebih dari satu orang secara bersamaan di tempat yang berbeda. Hal ini menyebabkan Figma banyak dipilih karena membuat efektif dan efisien[6]. Tujuan dari  penelitian  ini  adalah  untuk  melakukan  perancangan  sistem  informasi pengaman  untuk  surat  keterangan  kerja  di  PT.  Hartono  Istana  Teknologi  dengan menggunakan  teknologi QR  Code dan  Teknologi Digital  Signature yang  dapat membantu untuk meminimalisir terjadinya pemalsuan surat keterangan kerja.

## 2. METODOLOGI PENELITIAN

## 2.1 Metode Penelitian
Pada  penelitian  ini  untuk  pengambilan  datanya  dilakukan  dengan  beberapa tahapan yang akan dijelaskan pada Gambar 1. Penelitian ini menggunakan metode penelitian deskriptif kualitatif yaitu dengan melakukan observasi dan komunikasi dengan pihak yang bersangkutan untuk mendapatkan data – data yang diperlukan . Dengan  data  –  data  itu  diperoleh  metode  –  metode  yang  digunakan  untuk menghasilkan prototype sebagai  outputnya.  Beberapa  metode  yang  digunakan dalam penelitian ini seperti Unified Model Language dan pembuatan model desain UI.

## Gambar 1. Tahapan Penelitian
Gambar 1 merupakan Gambar yang menjelaskan tentang tahapan penelitian yang diterapkan pada penelitian ini. Penjelasan mengenai tahap – tahap penelitian adalah sebagai berikut :
Jurnal Riset Sistem Informasi Dan Teknik Informatika (JURASIK) Volume 9, Nomor 1, Februari 2024, pp 60-69 Terakreditasi Nomor 204/E/KPT/2022 | ISSN: 2527-5771/EISSN: 2549-7839 https://tunasbangsa.ac.id/ejurnal/index.php/jurasik
Tabel 1. Penjelasan Tahap Penelitian No Tahapan Penjelasan 1 Persiapan atau Mapping Penelitian pada tahap ini dilakukan observasi dengan pihak yang akan menggunakan sistem  untuk  mendapatkan  data  –  data  dan  informasi  yang  diperlukan dalam melakukan perancangan sistem ini. 2 Perancangan Sistem tahapan  ini  dilakukan  pembuatan  diagram  –  diagram  yaitu use  case diagram,  class  diagram,  dan  activity  diagram yang  sesuai  dengan  hasil pengumpulan data dan merancang tampilan yang akan digunakan dalam website. 3 Perancangan Prototype tahap ini dilakukan pembuatan prototype berdasarkan kebutuhan sistem dan  rancangan  yang  dibuat  menggunakan  figma  sebagai  alat  bantu pembuatan prototype
4 Laporan Penelitian pada  tahap  yang  terakhir  hasil  dari prototype yang  sudah  jadi  akan dilakukan evaluasi

## 2.2. Metode Perancangan
Metode Prototype merupakan  salah  satu  metode  perancangan  sistem  dan merupakan  versi  awal  dari  tahapan  sebuah  sistem  perangkat  lunak.  Metode  ini digunakan  untuk  membuat  rancangan  dengan  cepat  dan  bertahap  yang  nantinya berguna  bagi  pengguna  untuk  dapat  segera  melakukan  evaluasi  dan mempermudah  komunikasi  antara  pengguna  dan  pengembang  dalam  proses pengembangan sistem informasi.
Gambar 2. Metode Prototype
Gambar  2  [7]  merupakan  Gambar  yang  menjelaskan  tentang  metode prototype yang  diterapkan  pada  penelitian  ini[8].  Penjelasan  mengenai  tahap  – tahap metode prototype adalah sebagai berikut :
Tabel 2. Penjelasan Metode Prototype No Tahapan Penjelasan 1 Komunikasi Pada  tahap  ini  dilakukan  untuk  melakukan  analisis  mengenai  kebutuhan  – kebutuhan yang diinginkan dan Gambaran – Gambaran yang dibutuhkan 2 Perencanaan secara cepat Pada  tahap  ini  dilakukan  untuk  melakukan  perencanaan  dengan  cepat  sesuai dengan kebutuhan dan Gambaran yang diperlukan 3 Pemodelan  dan Perancangan secara cepat Pada  tahap  ini  dilakukan  pemodelan  dari  tampilan  yang  nantinya  akan digunakan dalam sistem 4 Pembentukan Prototype Pada  tahap  ini  dilakukan  pembuatan prototype sesuai  dengan  perancangan yang merepresentasikan aspek perangkat lunak yang akan dibangun
Jurnal Riset Sistem Informasi Dan Teknik Informatika (JURASIK) Volume 9, Nomor 1, Februari 2024, pp 60-69 Terakreditasi Nomor 204/E/KPT/2022 | ISSN: 2527-5771/EISSN: 2549-7839 https://tunasbangsa.ac.id/ejurnal/index.php/jurasik
No Tahapan Penjelasan 5 Penyerahan Prototype dan Feedback Tahapan  akhir  yaitu  penyerahan prototype kepada  pengguna  yang  nantinya prototype tersebut  agar  dapat  dievaluasi  dan  dilakukan  penilaian  oleh pengguna

## 3. HASIL DAN PEMBAHASAN

## 3.1. Use Case Diagram
Use  Case  Diagram merupakan  diagram  yang  menyatakan  interaksi  antara aktor dan sistem informasinya[9]. Use Case berfungsi untuk mengetahui kegunaan dari sebuah sistem informasi dan orang – orang yang dapat menggunakan fungsi – fungsinya [10].
Gambar 3. Use Case Diagram

## 3.2. Activity Diagram
a) Activity Diagram Permohonan Surat Keterangan Kerja
Gambar 4. Activity Diagram Permohonan Surat Keterangan Kerja
Jurnal Riset Sistem Informasi Dan Teknik Informatika (JURASIK) Volume 9, Nomor 1, Februari 2024, pp 60-69 Terakreditasi Nomor 204/E/KPT/2022 | ISSN: 2527-5771/EISSN: 2549-7839 https://tunasbangsa.ac.id/ejurnal/index.php/jurasik

## b) Activity Diagram Laporan dan Permintaan Tanda Tangan
Gambar 5. Activity Diagram Laporan dan Permintaan Validasi

## c) Activity Diagram Pengiriman Surat
Gambar 6. Activity Diagram Pengiriman Surat
Jurnal Riset Sistem Informasi Dan Teknik Informatika (JURASIK) Volume 9, Nomor 1, Februari 2024, pp 60-69 Terakreditasi Nomor 204/E/KPT/2022 | ISSN: 2527-5771/EISSN: 2549-7839 https://tunasbangsa.ac.id/ejurnal/index.php/jurasik

## 3.3. Class Diagram
Gambar 7 . Class Diagram

## 3.4. Desain Prototype
Dalam proses pembuatan desain prototype ini, penulis menggunakan aplikasi Figma. Dengan aplikasi Figma dapat memudahkan pembuatan dengan lebih efektif. Selain itu, figma juga dapat diakses secara bersamaan sehingga dapat memberikan saran dan masukan secara langsung dan setiap perubahan akan tersimpan secara otomatis[11], [12]. Berikut adalah desain prototype nya:
a) Halaman Login
Jurnal Riset Sistem Informasi Dan Teknik Informatika (JURASIK) Volume 9, Nomor 1, Februari 2024, pp 60-69 Terakreditasi Nomor 204/E/KPT/2022 | ISSN: 2527-5771/EISSN: 2549-7839 https://tunasbangsa.ac.id/ejurnal/index.php/jurasik

## b) Beranda Karyawan dan Admin
Gambar 9. Halaman Beranda
c) Pengajuan Surat Karyawan
Pada Gambar 10 merupakan formulir untuk melakukan pengajuan surat.
Gambar 10. Halaman Pengajuan Surat
d) Status Pengajuan
Pada  Gambar  11,  merupakan  status  dari  pengajuan  apakah  sudah  diproses atau belum.
Gambar 11. Halaman Status Pengajuan
e) Data Karyawan dan Detail Karyawan
Pada Gambar 12 menampilkan data – data dari karyawan dan menampilkan detail karyawan dan juga QR Code yang dimasukkan dalam Surat Keterangan Kerja.
Jurnal Riset Sistem Informasi Dan Teknik Informatika (JURASIK) Volume 9, Nomor 1, Februari 2024, pp 60-69 Terakreditasi Nomor 204/E/KPT/2022 | ISSN: 2527-5771/EISSN: 2549-7839 https://tunasbangsa.ac.id/ejurnal/index.php/jurasik
Gambar 12. Halaman Data Karyawan dan Detail Karyawan
f) Data Pengajuan Surat dan Proses Surat
Pada  Gambar  13,  merupakan  data  karyawan  yang  melakukan  pengajuan surat dan Proses Surat.
Gambar 13. Halaman Pengajuan Surat dan Proses Surat
g) Validasi dan Upload ke Pimpinan
Gambar 14. Halaman Validasi  dan Upload ke Pimpinan

## 3.5. Penyerahan Desain Prototype
Setelah  desain  prototype  sudah  jadi,  selanjutnya  desain  tersebut  akan diserahkan kepada pengguna untuk mendapat evaluasi dan masukan. Dan terdapat beberapa masukan yang diberikan:
Jurnal Riset Sistem Informasi Dan Teknik Informatika (JURASIK) Volume 9, Nomor 1, Februari 2024, pp 60-69 Terakreditasi Nomor 204/E/KPT/2022 | ISSN: 2527-5771/EISSN: 2549-7839 https://tunasbangsa.ac.id/ejurnal/index.php/jurasik
1. Perubahan pada tampilan halaman login disarankan diberi kolom email dan password untuk masuk.
2. Pengubahan  warna  menjadi  lebih  gelap  pada  warna  merah  di  setiap halaman.
3. Penambahan Gambar profil di bagian kanan atas.
4. Pengubahan pada warna tabel.

## 3.6. Desain Akhir
Setelah  dilakukan  evaluasi  dan  diberikan  masukan  oleh  pengguna,  maka dilakukan  perbaikan  –  perbaikan  pada  desain prototype sesuai  dengan  masukan yang  diberikan.  Pada  desain  akhir  ini  dilakukan  perubahan  –  perubahan  dengan bantuan  aplikasi  figma.  Beberapa  perubahan  yang  ada  yaitu  mengubah  tampilan halaman  login  menjadi  terdapat  kolom  untuk  memasukkan  email  dan  password. Kemudian  mengubah  warna  pada  tiap  tampilan  halaman  dari  warna  #FE594E menjadi  warna  #DD0000.  Kemudian    memberikan  penambahan  Gambar  profil pada  bagian  kanan  atas.  Dan  mengubah  warna  tabel  yang  semula  putih  menjadi abu – abu (#D9D9D9).

## 4. SIMPULAN
Setelah  melakukan  perancangan  sistem  pembuatan  surat  keterangan  kerja, dengan  adanya  rancangan  sistem  yang  dibuat  dengan  menggunakan  aplikasi Figma, diharapkan bahwa hasil rancangan sistem informasi ini dapat dipergunakan untuk dasar  pembangunan  aplikasi yang   dapat memenuhi  kebutuhan pengguna. Penggunaan  metode prototype dengan  dibantu  aplikasi  Figma  dalam  membuat desain prototype memiliki  kelebihan  untuk  mempermudah  pengguna  dalam memberikan  masukan  atas prototype yang  diberikan  karena  bisa  diakses  secara bersama secara realtime , serta memudahkan dalam penyesuaian karena  terdapat banyak bentuk desain. Aplikasi ini juga tidak perlu berlangganan. Kekurangan yang bersifat  relatif  dari  aplikasi  Figma  adalah  membutuhkan  koneksi  internet  untuk mengakses  aplikasi  Figma  karena  aplikasi  ini  berjalan  di cloud ,  waktu  untuk perancangan  yang  cukup  singkat  maka  fokus  pada prototype menjadi  terbatas, selain itu jika pengguna terus memberikan masukan maka waktu yang dibutuhkan untuk menyelesaikan prototype ini juga akan lama.

## DAFTAR PUSTAKA
[1] E. Pudjiarti, ; Dini  Nurlaela, ; Wina Sulistyani, U. Bina, And S. Informatika, “Sistem Informasi  Penjualan  Beras  Berbasis  Website,” Ijse-Indonesian  Journal  On  Software
Engineering , Vol. 5, No. 1, Pp. 62–74, 2019.
[2] N.  A.  Musthofa,  Mutrofin  Siti,  And  Murtadho  Ma,  “Implementasi  Quick  Response (Qr)  Code  Pada  Aplikasi  Validasi  Dokumen  Menggunakan  Perancangan  Unified Modelling Language (Uml)”.
[3] M.  Prima  And  P.  Silitonga,  “Implementasi  Kode  Qr  Pengiriman  Kartu  Hasil  Studi Mahasiswa 1,” 2018.
[4] M.  Taufiqurrahman Et  Al. ,  “Perancangan  Sistem  Tanda  Tangan  Digital  (Digital Signature),” 2020.
Jurnal Riset Sistem Informasi Dan Teknik Informatika (JURASIK) Volume 9, Nomor 1, Februari 2024, pp 60-69 Terakreditasi Nomor 204/E/KPT/2022 | ISSN: 2527-5771/EISSN: 2549-7839 https://tunasbangsa.ac.id/ejurnal/index.php/jurasik
[5] Y.  Kusuma,  R.  Hidayat,  And  Y.  Budiarti,  “Sistem  Informasi Inventory Menggunakan Qr  Code  Dengan  Metode  Prototype,” Riset  Dan  E-Jurnal  Manajemen  Informatika Komputer , Vol. 5, No. 1, 2020, Doi: 10.33395/Remik.V4i1.10724.
[6] M. Agus Muhyidin, M. A. Sulhan, And A. Sevtiana, “Perancangan Ui/Ux Aplikasi My Cic  Layanan Informasi  Akademik  Mahasiswa  Menggunakan  Aplikasi  Figma,”  2020. [Online]. Available: Https://My.Cic.Ac.Id/.
[7] S.  Saifulloh,  R.  Pamungkas,  T.  D.  Saputro,  And  F.  R.  Al-Ayyubi,  “Perancangan Prototype Pengelolaan Arsip Surat Di Dinas Lingkungan Hidup Kota Madiun,” Jurnal Altifani Penelitian Dan Pengabdian Kepada Masyarakat , Vol. 1, No. 1, Pp. 35–42, Jan. 2021, Doi: 10.25008/Altifani.V1i1.119.
[8] R. Aditya, V. Handrianus Pranatawijaya, P. Bagus Adidyana Anugrah Putra, J. Hendrik Timang,  K.  Palangkaraya,  And  K.  Tengah,  “Rancang  Bangun  Aplikasi  Monitoring Kegiatan Menggunakan Metode Prototype,” 2021.
[9] T.  A.  Kurniawan,  “Pemodelan  Use  Case  (Uml):  Evaluasi  Terhadap  Beberapa Kesalahan Dalam Praktik,” Jurnal Teknologi Informasi Dan Ilmu Komputer , Vol. 5, No. 1, P. 77, Mar. 2018, Doi: 10.25126/Jtiik.201851610.
[10]  Pitrawati  And  Sanjaya  Arif,  “Rekayasa  Perangkat  Lunak  Perhitungan  Harga  Pokok Produksi Metode Full Costing Pada Umkm Mitra Cake Di Bandar Lampung,” Jurnal Informasi Dan Komputer , Vol. 9, 2021.
[11]  R.  Pramudita,  R.  W.  Arifin,  A.  Nurul  Alfian,  And  N.  Safitri,  “Penggunaan  Aplikasi Figma  Dalam  Membangun  Ui/Ux  Yang  Interaktif  Pada  Program  Studi  Teknik Informatika Stmik Tasikmalaya,” Shilka Dina Anwariya , Vol. 3, No. 1, 2021, [Online]. Available: Www.Youtube.Com,
[12]  B.  Kurniawan  And  M.  Romzi,  “Perancangan  Ui/Ux  Aplikasi  Manajemen  Penelitian Dan  Pengabdian  Kepada  Masyarakat  Menggunakan  Aplikasi  Figma,” Jsim:  Jurnal Sistem Informasi Mahakarya , Vol. 05, 2022.