## INFOTECH: JOURNAL OF TECHNOLOGY INFORMATION
DOI: https://doi.org/10.37365/jti.v7i2.118

## IMPLEMENTATION OF HIGH FIDELITY PROTOTYPING IN ONLINE FIELD PLACEMENT PROGRAM SYSTEM DESIGN
Goldie Gunadi 1 , Agus Budiyantara 2
1,2 Teknik Informatika,
1,2 Sekolah Tinggi Manajemen Informatika dan Komputer (STMIK) Widuri Jakarta, Indonesia Correspondence email : send2goldie@gmail.com
Article history: Submission date: November 16, 2021    Revised date: November 26, 2021     Accepted date: November 30, 2021

## ABSTRACT
Service activities carried out by the Academic and Student Administration Bureau (BAAK) STMIK Widuri for students who will carry out field placement program (KKP) are currently still carried out conventionally, this makes the process of making KKP cover letters and also assignments for supervisors takes time, which is quite long and less efficient. To overcome these problems, it is necessary to create a web-based application system that can simplify and speed up the activities of student KKP administration services. In this study, observations were made on the current system modeled using Business Process Modeling Notation (BPMN) and Data Flow Diagrams (DFD). The problem analysis process uses the Root Cause Analysis (RCA) method. The system design runs with UML diagrams, namely Use Case, Activity and Deployment Diagrams. Making a prototype with a high fidelity concept using the PHP programming language, HTML 5, CSS, jQuery, Bootstrap and DataTables frameworks and the Chart.js library. This research resulted in a prototype that describes the overall functionality of the Online MPA system, interactive and has an attractive interface.
Keywords: Prototype, High-Fidelity, KKP, Design, UML, BPMN, DFD.

## ABSTRAK
Kegiatan pelayanan yang dilakukan oleh Biro Administrasi Akademik dan Kemahasiswaan (BAAK) STMIK Widuri bagi  mahasiswa  yang  akan  melakukan  kegiatan  kuliah  kerja  praktek  (KKP)  saat  ini  masih  dilakukan  secara konvensional, hal ini membuat proses pembuatan surat pengantar KKP dan juga surat penugasan dosen pembimbing membutuhkan waktu yang cukup lama dan kurang efsien. Untuk mengatasi permasalahan tersebut perlu dibuat sebuah sistem  aplikasi  berbasis  web  yang  dapat  mempermudah  dan  mempercepat  kegiatan  pelayanan  administrasi  KKP mahasiswa. Pada penelitian ini dilakukan pengamatan terhadap sistem berjalan yang dimodelkan dengan menggunakan Business  Process  Modeling  Notation (BPMN)  dan Data  Flow  Diagram (DFD).  Proses  analisa  permasalahan menggunakan metode Root Cause Analysis (RCA). Perancangan sistem berjalan dengan diagram UML, yakni Diagram Use  Case , Activity dan Deployment .  Pembuatan  prototipe  dengan  konsep  high  fidelity  menggunakan  bahasa pemrograman  PHP,  HTML  5,  CSS,  jQuery, framework Bootstrap  dan Data  Tables serta  pustaka  Chart.js.  Dari penelitian  ini  dihasilkan  sebuah prototipe yang  menggambarkan  keseluruhan  fungsional  dari  sistem  KKP  Online, interaktif serta memiliki antarmuka yang menarik.
Kata Kunci: Prototipe , High-Fidelity , KKP, Perancangan, UML, BPMN, DFD.

## PENDAHULUAN
Kegiatan  KKP  ini  sesuai  namanya  yang  terdiri atas kuliah dan kerja lapangan, berbentuk praktek untuk menerapkan  pengetahuan  dan  teori  yang  telah didapatkan  oleh  mahasiswa  selama  perkuliahan. Kegiatan  KKP  ini  bertujuan  untuk  mendukung kompetensi mahasiswa sehingga nantinya mampu untuk menganalisis,  mengatasi  serta  mencari  solusi  suatu permasalahan yang terjadi di masyarakat.
Sebagai salah satu lembaga pendidikan tinggi di Jakarta,  STMIK  Widuri  melalui  Biro  Administrasi
Akademik  dan  Kemahasiswaan  (BAAK)  memberikan pelayanan kepada para mahasiswa yang akan melakukan KKP  dengan  menyediakan  surat  pengantar  yang ditujukan  kepada  instansi  tempat  dimana  mahasiswa akan  melakukan  KKP  serta  menentukan  dosen pembimbing  KKP  yang  sesuai  dengan  tema  dari kegiatan KKP yang akan dilakukan.
Hingga  saat  ini  proses  administrasi  pelayanan KKP masih dilakukan secara manual yang mengakibatkan  proses  pelayanan  menjadi  lambat  dan kurang  efisien.  Terlebih  lagi  ditengah  situasi  pandemi COVID-19  beberapa  tahun  belakangan  ini  yang
VOL. 7 No. 2 November 2021
P-ISSN : 2460-2108 E-ISSN : 2620-5181
mengakibatkan  pembatasan  kegiatan  di  area  kampus. Sevagian besar karyawan diwajibkan untuk bekerja dari rumah  ( Work  From  Home ).  Disamping  itu  hingga  saat ini kegiatan perkuliahan masih dilakukan dengan metode daring.  Hal  ini  tentu  saja  mengakibatkan  komunikasi antara mahasiswa yang akan mengajukan KKP, petugas administrasi BAAK, Kepala BAAK, Pembantu Ketua I dan  dosen,  sebagai  pihak-pihak  yang  terlibat  dalam sistem pelayanan KKP menjadi terhambat
Untuk  mengatasi  permasalahan-permasalahan tersebut  diperlukan  adanya  sebuah  sistem  informasi KKP  Online  yang  dapat  diakses  melalui  internet. Aplikasi  KKP  Online  juga  harus  dapat  diakses menggunakan  berbagai  jenis  perangkat  termasuk PC/desktop, laptop/notebook, telepon genggam ( smartphone ) dan juga tablet dengan berbagai platform yang berbeda-beda.
Pada penelitian ini akan dibuat sebuah prototipe (Syarif,  2020)  dari  aplikasi  KKP  Online  menggunakan konsep High  Fidelity.  Prototipe yang  dibuat  sudah menyerupai  bentuk  aplikasi  jadi,  memiliki  fungsi  yang lengkap dan secara keseluruhan interaktif (Muraqabatullah,  2018)  untuk  memberikan  gambaran serta  pemahaman  yang  lebih  baik  kepada  pengguna terhadap  sistem  yang  akan  dibuat  dan  pengembang sistem dapat mengimplementasikan desain prototipe ini sehingga  akan  mempercepat  proses  pengembangan sistem

## METODE PENELITIAN

## A. Metode Pengumpulan Data
Metode pengumpulan data yang dilakukan dalam penelitan ini terdiri dari:
1. Pengamatan/Observasi, dilakukan dengan melakukan  pengamatan  terdadap  sistem  yang berjalan  saat  ini,  meliputi  dokumen  masukan  dan keluaran, proses yang terjadi serta para pelaku yang terlibat.
2. Wawancara,  dilakukan  kepada  pelaku  sistem  untuk mendapatkan  data  dan  informasi  yang  diperlukan dalam  proses  analisa  permasalahan  sistem  berjalan serta  analisa  kebutuhan  pengguna  terhadap  sistem yang baru (Muryono et al., 2020).
3. Studi  literatur,  digunakan  untuk  memperoleh berbagai  referensi  dan  informasi  yang  diperlukan dalam kegiatan penelitian. Literatur yang digunakan berupa buku referensi, dokumen-dokumen organisasi,  jurnal  dan  hasil  penelitian  sebelumnya serta berbagai artikel yang terdapat pada media cetak maupun situs web.

## B. Metode Analisa Sistem
Metode  kualitatif  digunakan  untuk  menganalisa data.  Metode root-cause  analysis digunakan  untuk menganalisa  permasalahan  pada  sistem  berjalan (Kristanto Wibowo, Sugiyarto Sugiyarto, 2021).

## C. Metode Pemodelan
Teknik pemodelan yang digunakan dalam analisa dan perancangan sistem terdiri dari:
1. Business  Process  Modeling  Notation (BPMN) digunakan untuk menggambarkan proses bisnis pada sistem  yang  berjalan  (Ismanto,  Firman  Hidayah, 2020).
2. Data  Flow  Diagram (DFD),  digunakan  untuk menggambarkan hubungan antara entitas, proses dan data  pada  sistem  yang  berjalan  (Sanjaya  Pinem, 2019).
3. Entity  Relationship  Diagram (ERD)  digunakan untuk pemodelan basis data.
4. Unified  Modeling  Language (UML),  digunakan dalam  perancangan  sistem  baru  sesuai  dengan kebutuhan  pengguna.  Diagram-diagram  UML  yang digunakan  meliputi: Use  Case  Diagram (Tyas Agustini,  2020). Activity  Diagram (Yudi  Mulyanto, Fahri  Handani,  2020)  dan Deployment  Diagram (Fitriani Dwi Ratna Sari, 2019).

## HASIL DAN PEMBAHASAN

## A. Analisa Sistem Berjalan
Biro Administrasi
Akademik dan Kemahasiswaan  (BAAK)  adalah  bagian  dari  struktur organisasi  STMIK  Widuri  yang  salah  satu  fungsinya adalah  menangani  pengajuan  kegiatan  kuliah  kerja praktek (KKP) mahasiswa (Budiyantara et al., 2020).
Prosedur  pengajuan  permohonan  kegiatan  KKP mahasiswa terdiri dari:
1. Prosedur Pengajuan KKP Mahasiswa
Mahasiswa  menyerahkan  form  pengajuan  kuliah kerja  praktek  (KKP)  yang  telah  diisi  ke  Biro Administrasi Akademik dan Kemahasiswaan (BAAK)  untuk  di  proses  (Muraqabatullah,  2018). BAAK akan memeriksa persyaratan pengajuan KKP mahasiswa.  Apabila  persyaratan  pengajuan  KKP tidak terpenuhi maka berkas pengajuan akan ditolak, dan  jika  persyaratan  terpenuhi  maka  berkas  akan diproses  lebih  lanjut  dan  data  pengajuan  KKP mahasiswa  akan  dicatat  pada  dokumen Microsoft Excel .

## INFOTECH: JOURNAL OF TECHNOLOGY INFORMATION
DOI: https://doi.org/10.37365/jti.v7i2.118
2.   Prosedur Pembuatan Surat Pengantar KKP BAAK  akan membuat  “Surat  Permohonan  KKP  ke Instansi  Tujuan”  sesuai  dengan  data  pada  form pengajuan  KKP.  Surat  permohonan  tersebut kemudian  akan  diserahkan  ke  Kepala  Bagian Akademik BAAK dan Pembantu Ketua I (PUKET I) untuk  ditandatangani.  Selanjutnya  BAAK  akan mencatat  informasi  surat  permohonan  KKP  pada dokumen  Microsoft  Excel  dan  menyerahkan  surat permohonan tersebut ke mahasiswa.
3.  Prosedur  Pembuatan  Surat  Penugasan  Dosen Pembimbing
Mahasiswa menyerahkan surat balasan dari instansi KKP  yang  telah diberi  cap dan  ditandatangani  oleh pejabat instansi terkait ke BAAK. Setelah itu BAAK akan  meminta  mahasiswa  untuk  memilih  dosen pembimbing  KKP  sesuai  dengan  daftar  yang diberikan oleh BAAK.
4.   Prosedur Pembuatan Laporan KKP Mahasiswa BAAK mencata data-data kegiatan KKP mahasiswa dalam bentuk dokumen Excel yang akan digunakan dalam  prmbuatan  laporan  untuk  Kepala  BAAK, berupa Laporan Data  KKP Mahasiswa dan Laporan Data Dosen Pembimbing KKP Mahasiswa.
Untuk menggambarkan proses bisnis dari sistem yang  berjalan  saat  ini  digunakan  diagram Business Process Modeling Notation (BPMN).
Sumber : (Goldie Gunadi, 2021) Gambar 1. Diagram BPMN Sistem Berjalan
Pembuatan  model  dari  sistem  yang  berjalan menggunakan  Data  Flow  Diagram  (DFD),  yang  terdiri dari :
1. Diagram  Level  0  Sistem  Informasi  Pelayanan Pengajuan KKP Mahasiswa
Sumber : (Goldie Gunadi, 2021)
Gambar 2. Diagram Level 0 Sistem Berjalan
2. Diagram  level  1,  sub  proses  Penerimaan  Form Pengajuan KKP
Sumber : (Goldie Gunadi, 2021) Gambar 3. Diagram level 1 Sub Proses Penerimaan Form Pengajuan KKP
VOL. 7 No. 2 November 2021
P-ISSN : 2460-2108 E-ISSN : 2620-5181
DOI: https://doi.org/10.37365/jti.v7i2.118
3. Diagram  level  1,  sub  proses  Pembuatan  Surat Pengantar KKP
Sumber : (Goldie Gunadi, 2021) Gambar 4. Diagram level 1 Sub Proses Pembuatan Surat Pengantar KKP
4. Diagram  level  1,  sub  proses  Pembuatan  Surat Penugasan Dosen Pembimbing
Sumber : (Goldie Gunadi, 2021) Gambar 5. Diagram level 1 Sub Proses Pembuatan Surat Penugasan Dosen Pembimbing
5. Diagram  Level  1,  sub  proses  Pembuatan  Laporan KKP Mahasiswa
Sumber : (Goldie Gunadi, 2021)
Gambar 6. Diagram Level 1 Sub Proses Pembuatan Laporan KKP Mahasiswa
Analisa  permasalahan  sistem  yang  berjalan  saat ini dapat dilihat pada tabel berikut:
Tabel 1. Analisa Permasalahan Sistem Berjalan No Permasalahan Penyebab Solusi yang diusulkan 1 Mahasiswa merasa kesulitan dalam proses pengajuan KKP. Form pengajuan KKP masih berupa kertas, mahasiswa harus datang ke kampus mengisi form dan menyerahkann ya ke BAAK. Adanya sebuah sistem indormasi yang menyediakan form pengajuan KKP dalam bentuk digital dan dapat diakses melalui internet. 2 Pihak BAAK masih menemukan kesulitan- kesulitan pada saat membaca input form pengajuan KKP. Pengisian form pengajuan KKP menggunakan tulisan tangan sehingga seringkali sulit atau tidak terbaca. Adanya sebuah sistem indormasi yang menyediakan form pengajuan KKP dalam bentuk digital agar dapat diinput menggunakan papan ketik. 3 Proses pembuatan surat pengantar KKP membutuhkan waktu yang lama Surat pengantar dibuat secara manual dengan menggunakan aplikasi Microsoft Word berdasarkan informasi yang terdapat pada form pengajuan KKP. Surat pengantar kemudian harus ditandatangani secara manual oleh Kepala BAAK dan Pembantu Ketua I, hal ini akan terhambat apabila pejabat yang bersangkutan sedang tidak berada di tempat. Adanya sebuah sistem informasi yang dapat membuat surat pengantar KKP secara otomatis. Penandatangan an surat pengantar dapat dilakukan secara digital melalui sistem yang dapat diakses melalui internet.

## INFOTECH: JOURNAL OF TECHNOLOGY INFORMATION
DOI: https://doi.org/10.37365/jti.v7i2.118
No Permasalahan Penyebab Solusi yang diusulkan 4 Proses pembuatan surat penugasan dosen pembimbing membutuhkan waktu yang cukup lama Surat penugasan dosen pembimbing dibuat secara manual dengan menggunakan aplikasi Microsoft Word berdasarkan informasi yang terdapat pada form pemilihan dosen pembimbing KKP dan surat pengantar KKP yang telah di ACC. Surat penugasan kemudian harus ditandatangani secara manual oleh Pembantu Ketua I, hal ini akan terhambat apabila pejabat yang bersangkutan sedang tidak berada di tempat. Adanya sebuah sistem informasi yang dapat membuat surat penugasan dosen pembimbing secara otomatis. Penandatangan an surat penugasan dapat dilakukan secara digital melalui sistem yang dapat diakses melalui internet. 5 BAAK mengalami kesulitan dalam proses pembuatan laporan sehingga membutuhkan waktu yang cukup lama Proses pembuatan laporan masih dilakukan secara manual menggunakan aplikasi Microsoft Excel yang datanya bersumber dari berkas form pengajuan dan surat pengantar KKP serta form penugasan dosen pembimbing KKP. Adanya sistem informasi yang dapat menyediakan fasilitas pembuatan laporan- laporan yang dibutuhkan dimana data yang digunakan bersumber pada basis data. No Permasalahan Penyebab Solusi yang diusulkan 6 Kebutuhan lokasi untuk menyimpan berkas/arsip Form pengajuan KKP, surat pengantar KKP dan surat penugasan dosen pembimbing masuh dalam bentuk kertas, sehingga membutuhkan media penyimpanan fisik yang memakan tempat. Adanya sebuah sistem informasi yang menyimpan seluruh data dalam bentuk digital di dalam basis data atau dalam bentuk file digital. 7 Proses pencarian dokumen membutuhkan waktu yang cukup lama Form pengajuan KKP, surat pengantar KKP dan surat penugasan dosen pembimbing masuh dalam bentuk kertas, semakin banyak dokumen akan semakin butuh waktu dalam proses pencarian, Adanya sebuah sistem informasi dimana seluruh data disimpan dalam basis data, sehingga proses pencarian dapat dilakukan menggunakan query dalam waktu yang singkat.

## Sumber : (Goldie Gunadi, 2021)
Berdasarkan hasil analisa  permasalahan tersebut dapat disimpulkan bahwa solusi yang dibutuhkan adalah adanya sebuah sistem informasi berbasis web yang dapat diakses melalui jaringan internet dengan fitur-fitur yang sesuai dengan kebutuhan pengguna.

## B. Analisa Kebutuhan
Kebutuhan fungsional sistem meliputi:
1. Fasilitas login pengguna.
2. Terdapat  fasilitas  untuk  menginput  form  pengajuan KKP.
3. Dapat  melihat  daftar  antrian  form  pengajuan  KKP dan  mengedit  serta  menghapus  dorm  pengajuan KKP.
4. Terdapat  fasilitas  untuk  menyetujui  atau  menolak form pengajuan KKP.
5. Sistem  dapat  membuat  surat  pengantar  KKP  secara otomatis.
6. Terdapat fasilitas untuk menampilkan dan mencetak surat pengantar KKP.
VOL. 7 No. 2 November 2021
P-ISSN : 2460-2108 E-ISSN : 2620-5181
7. Terdapat  fasilitas  untuk  melakukan upload surat persetujuan dari instansi KKP.
8. Terdapat fasilitas untuk memilih dosen pembimbing KKP.
9. Sistem  dapat  membuat  surat  penugasan  dosen pembimbing KKP secara otomatis.
10. Terdapat  fasilitas  untuk  melakukan  ACC  surat penugasan dosen pembimbing KKP.
11. Terdapat fasilitas untuk menampilkan dan mencetak surat penugasan dosen pembimbing KKP.
12. Terdapat  fasilitas  untuk  membuat  laporan  data mahasiswa KKP.
13. Terdapat fasilitas untuk membuat laporan data dosen pembimbing KKP.
14. Terdapat  fasilitas  untuk  mengirimkan  notifikasi dalam  bentuk  surel  kepada  mahasiswa,  Kepala BAAK dan Pembantu Ketua I.
15. Terdapat  fasilitas  untuk  mengisi  dan  merubah  data profil mahasiswa.
16. Terdapat  fasilitas  untuk  mengelola  data  dosen pembimbing.
17. Terdapat fasilitas untuk menginput dan merubah data Kepala BAAK dan Pembantu Ketua I.
18. Terdapat  fasilitas  untuk  mengelola  data  petugas BAAK.
19. Terdapat  fasilitas  untuk  menampilkan  daftar mahasiswa bimbingan KKP.
Kebutuhan non fungsional terdiri dari:
1. Penggunaan sistem basis data yang handal.
2. Merupakan aplikasi berbasis web dan dapat diakses melalui internet.
3. Terdapat  batasan  akses  user  terhadap  modul-modul yang terdapat pada sistem.
4. Antarmuka yang baik dan mudah digunakan.
5. Kecepatan akses data.
6. Aplikasi memiliki tampilan yang responsif terhadap berbagai ukuran layar perangkat yang digunakan.
7. Aplikasi dapat dijalan pada berbagai perangkat, baik PC,  laptop/notebook  dan  juga  telepon  pintar ( smartphone ).
8. Aplikasi  dapat  dijalankan  dengan  menggunakan aplikasi  browser  Google  Chrome,  Mozilla  Firefox dan Microsoft Edge.

## C. Perancangan Sistem
Rancangan Sistem Informasi Pelayanan
Pengajuan  KKP  Mahasiswa  dapat  digambarkan  dalam bentuk Diagram Use Case .
Sumber : (Goldie Gunadi, 2021) Gambar 7. Diagram Use Case Aplikasi KKP Online Rancangan  sistem  basis  data  yang  akan digunakan  dapat  digambarkan  dalam  bentuk Entity Relationship Diagram (ERD).
Sumber : (Goldie Gunadi, 2021) Gambar 8. Diagram E-R Aplikasi KKP Online

## INFOTECH: JOURNAL OF TECHNOLOGY INFORMATION
DOI: https://doi.org/10.37365/jti.v7i2.118
Berikut  ini  rancangan Activity  Diagram dari sistem KKP online yang akan dibuat.
Diagram Activity Pengajuan KKP
Sumber : (Goldie Gunadi, 2021) Gambar 9. Diagram Activity Pengajuan KKP
Diagram Activity Verifikasi Pengajuan KKP Oleh BAAK
Sumber : (Goldie Gunadi, 2021)
Gambar 10. Diagram Activity Verifikasi Pengajuan KKP Oleh BAAK
Diagram Activity Verifikasi Pengajuan KKP Oleh Kepala BAAK
Sumber : (Goldie Gunadi, 2021) Gambar 11. Diagram Activity Verifikasi Pengajuan KKP Oleh Kepala BAAK
Diagram Activity Verifikasi Pengajuan KKP Oleh Pembantu Ketua (PUKET 1).
Sumber : (Goldie Gunadi, 2021) Gambar 12. Diagram Activity Verifikasi Pengajuan KKP Oleh PUKET I
VOL. 7 No. 2 November 2021
P-ISSN : 2460-2108 E-ISSN : 2620-5181
Diagram Activity Verifikasi  Surat  Penugasan Dosen Pembimbing Oleh Pembantu Ketua (PUKET) I
Sumber : (Goldie Gunadi, 2021) Gambar 13. Diagram Activity Verifikasi Surat Penugasan Dosen Pembimbing Oleh PUKET I
Rancangan deployment diagram dari sistem KKP Online dapat dilihat pada gambar berikut:
Sumber : (Goldie Gunadi, 2021) Gambar 14. Diagram Deployment
D. Pembuatan Prototipe
Perangkat keras yang digunakan dalam pembuatan prototype sistem berupa 1 (satu) unit laptop dengan  spesifikasi  :  Intel  Core  i3  10110U Processor , RAM  8GB  DDR4,  512GB  SSD,  Layar  14.0″,  Sistem Operasi Windows 10 Home. Sedangkan perangkat lunak yang  digunakan  adalah:  PHP  versi  8.0.4RC1  dan Notepad++  v7.9.4.  Framework  dan  pustaka  tambahan yang  digunakan  untuk  pembuatan  prototipe  adalah: jQuery, Bootstrap, dan Data Tables .
Untuk  membangun  antarmuka  pengguna  yang menarik dan responsive digunakan framework Bootstrap, jQuery dan DataTables.

## Tampilan Halaman Login
Menampilkan  halaman  awal  aplikasi  KKP Online.  Pada  halaman  ini  terdapat  form  untuk  login pengguna  dan  fasilitas  untuk  registrasi  mahasiswa sebelum dapat login ke dalam sistem.
Sumber : (Goldie Gunadi, 2021) Gambar 15. Tampilan Halaman Login

## Tampilan Form Registrasi Mahasiswa
Form  ini  ditampilkan  pada  saat  mahasiswa mengklik  menu  Registrasi  Mahasiswa  dan  digunakan untuk  mengisi  data  mahasiswa  yang  akan  melakukan KKP.
Sumber : (Goldie Gunadi, 2021)

## Gambar 16. Tampilan Form Registrasi

## Tampilan  Halaman  Status  Permohonan  KKP Mahasiswa
Tampilan ini merupakan tampilan awal pada saat mahasiswa  login  ke  dalam  sistem.  Menampilkan informasi form pengajuan KKP yang telah dibuat beserta riwayat status form tersebut.
Sumber : (Goldie Gunadi, 2021) Gambar 17. Halaman Status Pengajuan KKP Mahasiswa

## INFOTECH: JOURNAL OF TECHNOLOGY INFORMATION
DOI: https://doi.org/10.37365/jti.v7i2.118

## Tampilan Form Pengajuan KKP
Tampilan  ini  digunakan  oleh  mahasiswa  untuk melakukan pendaftaran kegiatan KKP.
Sumber : (Goldie Gunadi, 2021) Gambar 18. Halaman Status Pengajuan KKP Mahasiswa
Tampilan Master Topik KKP
Tampilan  ini  digunakan  oleh  pengguna  admin untuk mengelola data topik KKP.
Sumber : (Goldie Gunadi, 2021) Gambar 19. Halaman Status Permohonan KKP

## Mahasiswa

## Tampilan Master Pengguna
Tampilan  ini  digunakan  oleh  pengguna  admin untuk mengelola data pengguna sistem.
Sumber : (Goldie Gunadi, 2021) Gambar 20. Halaman Master Pengguna

## Tampilan Master Dosen Pembimbing
Tampilan  ini  digunakan  oleh  pengguna  admin untuk mengelola data dosen pembimbing KKP.
Sumber : (Goldie Gunadi, 2021) Gambar 21. Halaman Status Permohonan KKP Mahasiswa
Tampilan Master Mahasiswa
Tampilan  ini  digunakan  oleh  pengguna  admin untuk mengelola data mahasiswa yang melakukan KKP.
Sumber : (Goldie Gunadi, 2021) Gambar 22. Halaman Status Permohonan KKP Mahasiswa

## Tampilan Antrian  Pengajuan KKP
Menampilkan  antrian  data  pengajuan  KKP mahasiswa untuk disetujui (ACC) oleh pihak BAAK.
Sumber : (Goldie Gunadi, 2021) Gambar 23. Halaman Status Permohonan KKP Mahasiswa
Tampilan Antrian  Pengajuan KKP ACC Ka. BAAK
Menampilkan  antrian  data  pengajuan  KKP mahasiswa untuk disetujui (ACC) oleh Kepala BAAK.
Sumber : (Goldie Gunadi, 2021) Gambar 24. Halaman Status Permohonan KKP Mahasiswa
VOL. 7 No. 2 November 2021
P-ISSN : 2460-2108 E-ISSN : 2620-5181

## Tampilan Antrian  Pengajuan KKP ACC PUKET
Menampilkan  antrian  data  pengajuan  KKP mahasiswa untuk disetujui (ACC) oleh PUKET I.
Sumber : (Goldie Gunadi, 2021) Gambar 25. Halaman Status Permohonan KKP

## Mahasiswa
Tampilan Data Pengajuan KKP
Menampilkan  data  pengajuan  KKP  mahasiswa. Data yang ditampilkan kemudian dapat disimpan dalam bentuk dokumen Excel, CSV dan PDF.
Sumber : (Goldie Gunadi, 2021) Gambar 26. Halaman Status Permohonan KKP

## Mahasiswa

## Tampilan Laporan KKP Mahasiswa
Menampilkan  laporan  KKP  mahasiswa  yang telah disetujui (ACC). Data yang ditampilkan kemudian dapat disimpan dalam bentuk dokumen Excel, CSV dan PDF.
Sumber : (Goldie Gunadi, 2021)

## Gambar 27. Halaman Status Permohonan KKP Mahasiswa

## Tampilan  Rekap  Data  Dosen  Pembimbing  KKP Mahasiswa
Menampilkan  rekap  data  KKP  mahasiswa berdasarkan  dosen  pembimbing.  Hasil  rekapitulasi dalam bentuk grafik pie dan tabel data.
Sumber : (Goldie Gunadi, 2021) Gambar 28. Halaman Status Permohonan KKP Mahasiswa

## Tampilan Rekap Data Topik KKP Mahasiswa
Menampilkan  rekap  data  KKP  mahasiswa berdasarkan  topik.  Hasil  rekapitulasi  dalam  bentuk grafik pie dan tabel data.
Sumber : (Goldie Gunadi, 2021)

## Gambar 29. Halaman Status Permohonan KKP Mahasiswa

## Tampilan  Rekap  Data  Program  Studi  KKP Mahasiswa
Menampilkan  rekap  data  KKP  mahasiswa berdasarkan  program  studi.  Hasil  rekapitulasi  dalam bentuk grafik pie dan tabel data.
Sumber : (Goldie Gunadi, 2021) Gambar 30. Halaman Status Permohonan KKP Mahasiswa

## E. Evaluasi Prototipe
Evaluasi  dilakukan  bersama  dengan  sejumlah pengguna  yang  bertujuan  utnuk  memastikan prototipe yang dibuat seudah sesuai dengan kebutuhan pengguna.

## INFOTECH: JOURNAL OF TECHNOLOGY INFORMATION
DOI: https://doi.org/10.37365/jti.v7i2.118
P-ISSN : 2460-2108 E-ISSN : 2620-5181
Tabel 2. Hasil Evaluasi Prototipe Variabel Evaluasi Jumlah Responden STS TS C S SS Prototipe menggambarkan fungsional sistem 0 0 0 3 2 Memiliki Desain tampilan yang menarik 0 0 0 3 2 Antarmuka mudah dipahami dan dimengerti 0 0 0 4 1 Prototipe dapat ditampilkan pada berbagai jenis perangkat berbeda 0 0 0 0 5 Prototipe dapat berjalan pada berbagai jenis aplikasi browser 0 0 0 0 5
Sumber : (Goldie Gunadi, 2021)
Hasil  jawaban  responden  diolah  dengan menghitung  nilai  bobot  jawaban  menggunakan  skala Likert.
Tabel 3. Perhitungan Nilai Evaluasi Prototipe Variabel Evaluasi Bobot Total Rata- rata Hasil Prototipe menggambarkan fungsional sistem 22 4,4 Sesuai harapan Memiliki  Desain  tampilan yang menarik 22 4,4 Sesuai harapan Antarmuka  mudah  dipahami dan dimengerti 21 4,2 Sesuai harapan Prototipe  dapat  ditampilkan pada berbagai jenis perangkat berbeda 25 5 Sesuai harapan Prototipe dapat berjalan pada berbagai jenis aplikasi browser 25 5 Sesuai harapan Total bobot keseluruhan 115 Rata-rata bobot keseluruhan 115/5 = 23 4,6
Sumber : (Goldie Gunadi, 2021)
Dari hasil pengujian prototipe dapat dilihat bahwa nilai rata-rata dari setiap variabel pengujian lebih besar dari  4,  sesuai  dengan  harapan.  Dengan  rata-rata  nilai secara  keseluruhan  adalah  4,6  yang  artinya  prototipe sudah sangat baik. Dengan demikian prototipe ini dapat digunakan  dalam  proses  pengembangan  sistem  KKP Online agar  dapat  menyelesaikan  permasalahan  yang ada.

## KESIMPULAN
Hasil analisa permasalahan pada sistem pengajuan  kuliah  kerja  praktek  (KKP)  mahasiswa  di STMIK  Widuri  dapat  disimpulkan  adanya  kebutuhan sebuah sistem informasi berbasis web yang dapat diakses melalui jaringan internet. Perancangan sistem KKP yang diusulkan  menggunakan  pemodelan  UML  yang  terdiri dari Use  Case , Activity dan Deployment  Diagram , sedangkan  pemodelan  data  menggunakan Entity
Relationship  Diagram (ERD).  Pembuatan prototipe menggunakan  Bahasa  pemrograman  PHP,  jQuery, HTML  5  dan  CSS  serta  framework  Bootstrap  yang menghasilkan mockup dari sistem yang akan dibangun. Hasil dari evaluasi prototipe menghasilkan nilai rata-rata keseluruhan  sebesar  4,6  yang  artinya  sangat  baik. Prototipe layak digunakan dalam proses berikutnya dari tahapan pengembangan sitem KKP Online .

## DAFTAR PUSTAKA
Budiyantara, A., Irwansyah, I., Prengki, E., Pratama, P. A.,  &  Wiliani,  N.  (2020).  Komparasi  Algoritma Decision  Tree,  Naive  Bayes  Dan  K-Nearest Neighbor  Untuk  Memprediksi  Mahasiswa  Lulus Tepat Waktu. JITK (Jurnal Ilmu Pengetahuan Dan
Teknologi Komputer) , 5 (2), 265–270. https://doi.org/10.33480/jitk.v5i2.1214
Fitriani  Dwi  Ratna  Sari,  A.  S.  (2019).  Perancangan Sistem Informasi Infentaris Sparepart Handphone Berbasis Php Dan Mysql Di Planet Phone. Jurnal E-Komtek , 3 (1), 49–61. https://doi.org/ https://doi.org/10.37339/e-komtek.v3i1.130 Goldie  Gunadi,  A.  B.  (2021). Implementation  Of  High Fidelity  Prototyping  In  Online  Field  Placement Program System Design .
Ismanto, Firman Hidayah, K. (2020). Pemodelan Proses
Bisnis Menggunakan Business Process Modelling Notation  (BPMN)  (Studi  Kasus  Unit  Penelitian dan  Pengabdian  Kepada  Masyarakat  (P2KM) Akademi  Komunitas  Negeri  Putra  Sang  Fajar Blitar). Briliant:  Jurnal  Riset  Dan  Konseptual , 5 (1), 69–76. https://doi.org/http://dx.doi.org/ 10.28926/briliant.v5i1.430
Kristanto  Wibowo,  Sugiyarto  Sugiyarto,  S.  S.  (2021). Analisa dan Evaluasi : Akar Penyebab dan Biaya Sisa  Material  Konstruksi  Proyek  Pembangunan Kantor  Kelurahan  di  Kota  Solo,  Sekolah,  dan Pasar Menggunakan Root Cause Analysis (RCA) dan  Fault  Tree  Analysis  (FTA). Matriks  Teknik Sipil , 9 (2), 303–310. https://doi.org/https:// doi.org/10.20961/mateksi.v6i2.36572
Muraqabatullah,  M.  (2018). Komparasi  Perangkat Lunak  High  -  Fidelity  Prototyping :  Marvel  Dan Uxpin  Pada  Pengembangan  Aplikasi  Web Learning Management System (Lms) . Universitas Islam Indonesia.
Muryono, T. T., Irwansyah, I., & Budiyantara, A. (2020). Penentuan  Penerimaan  Pegawai  Menggunakan Metode Perbandingan  Eksponensial (Mpe). Infotech: Journal of Technology Information , 6 (2), 57–62. https://doi.org/10.37365/jti.v6i2.98 Sanjaya  Pinem,  V.  M.  P.  (2019).  Sistem  Informasi Perpustakaan  Pada  Perpustakaan  Universitas
VOL. 7 No. 2 November 2021
P-ISSN : 2460-2108 E-ISSN : 2620-5181
DOI: https://doi.org/10.37365/jti.v7i2.118
Efarina  Berbasis  Web. Jurnal  Informasi  STMIK Logika , 2 (1), 49–56.
Syarif, A. (2020).  Prototipe Sistem Informasi Penilaian Prestasi  Mahasiswa  Program  Studi  Sekretari Berbasis  Web. Jurnal  Sekretari  &  Administrasi (Serasi) , 18 (2), 46–55.
Tyas Agustini, A. W. (2020). Aplikasi Penghubung Guru dan  Orang  Tua:  e-Counseling. ULTIMA  InfoSys , 11 (2), 97–106. https://doi.org/https://doi.org/ 10.31937/si.v11i2.1739
Yudi  Mulyanto,  Fahri  Handani,  H.  (2020).  Rancang Bangun  Sistem  Informasi  Penjualan  Pada  Toko Omg  Berbasis  Web  Di  Kecamatan  Empang Kabupaten Sumbawa. Jurnal Informatika, Teknologi  Dan  Sains  (JINTEKS) , 2 (1),  69–77. https://doi.org/https://doi.org/10.51401/jinteks.v2i 1.560