Diterima 21 Maret 2022 Direvisi 15 Mei 2022 Diterima untuk publikasi 30 Mei 2022

## Perancangan Sistem Informasi Plakat Wisuda Berbasis Web Menggunakan UML dan Model Waterfall
Apriade Voutama 1* , Elfina Novalia 2
1 Sistem Informasi, Universitas Singaperbangsa Karawang
2 Sistem Informasi, Universitas Buana Perjuangan Karawang Email: *apriade.voutama@staff.unsika.ac.id
Abstrak. Sistem informasi plakat wisuda berbasis website adalah sebagai wadah bagi  mahasiwa  calon  wisuda  untuk  mendapatkan  informasi  mengenai  plakat wisuda. Dengan perkembangan teknologi maka perlu adanya sebuah sistem yang mudah  diakses  salah  satunya  yaitu  membuat  sistem  berbasis  website. Perancangan  memanfaatkan  alat  bantu  peracangan  sistem  yaitu  UML (Unified Modelling  Language) dimulai  dengan  menentukan  aktor  yang  terlibat  dengan sistem  menggunakan  memanfaatkan Use  case  diagram ,  dan  menggunakan Actvity diagram untuk memperlihat aktifitas aktor dan dilakukan alir yang lebih rinci  yaitu  menggunakan Sequence  diagram ,  dan  gambaran  dari  basis  data terlihat pada Class diagram . Untuk meperjelas tampilan rancangan sistem maka diperlukan protopytpe dari interface design sebagai gambaran model sistem yang dibuat.  Penelitian  memanfaatkan  dispilin  ilmu  komputer  yaitu  SDLC  dengan menerapkan  model Waterfall . Waterfall adalah  model  yang  digunakan  sebagai panduan  metode  penelitian  agar  fokus  pada  setiap  urutan  tahapan.  Sistem  yang sudah  dibangun  mendapat  respon  yang  baik  dari  pengguna  sehingga  sistem informasi plakat ini dapat digunakan dengan baik.
Kata kunci: Sistem Informasi, Plakat, Website, UML, Waterfall

## 1 Pendahuluan
Teknologi yang berkembang begitu pesat dan semakin canggih sangat berguna dan  memiliki  manfaat  yang  luar  biasa  untuk  menunjang  segala  kegiatan diberbagai  bidang.  Komputer  dapat  membantu  mengelola  sistem  informasi hingga  mempermudah  suatu  lembaga  untuk  mengelola  data  informasinya  [1]. Teknologi  Informasi  mempengaruhi  berbagai  aspek  dalam  menjalankan aktivitas  sehari-hari.  Penggunaan  komputer  dan  internet  telah  jauh  mengalami kemajuan  dari  sekedar  teknologi  alat  hitung  hingga  pengambilan  keputusan[2] [3].  Salah  satu  perkembangan  teknologi  yaitu  pada  memanfaatan  Internet. Perkembangan  internet  yang  juga  sangat  luar  biasa  dengan  berbagai  macam website yang bisa diakses dengan mudah memberikan dampak yang positif bagi pengguna  untuk  mendapat  informasi  dan  keputusan  secara  cepat.  Salat  satu pada  dunia  pendidkan  yang  sudah  memanfaatkan  website  sebagai  sumber informasi  akademik  sehingga  informasi  tersebut  dapat  dilihat  hanya  dengan melakukan akses melalui internet [4].

## Perancangan Sistem Informasi Plakat Wisuda Berbasis Web  37
Salah  yang  perlu  dikembangkan  yaitu  merancang  sebuah  sistem  informasi berbasis  website  Plakat  wisuda  bagi  mahasiswa  calon  wisuda.  Plakat merupakan  sebuha  kenang-kenangan  dalam  bentuk  karya  seni  yang  berkaitan dengan  kelulusan  mahasiswa.  Tidak  hanya  itu  pada  sistem  ini  juga  akan dijadikan  sebagai  proses  administrasi  mendaftaran  mendapatkan  Plakat  serta informasi  pengenai  jadwal  dan  proses  wisuda  dan  perlengkapan  wisuda.  Pada dasarnya kegiatan ini dilakukan secara namual denga mengunjungi kampus dan melakukan  pembayaran  masih  dilakukan  secara  manual.  Tujuan  dari perancangan ini yaitu mengganti proses kegiatan manual tersebut menjadi lebih digitalisasi yaitu dengan menciptakan sistem informasi pengenai plakat wisuda berbasis  sehingga  bagi  calon  wisuda  dapat  mengakses  dan  pendapatkan informasi  mengenai  hal  yang  dibutuhkan  melalui  website  tanpa  harus  datang langsung  dan  tidak  dilakukan  secara  manual  lagi.  Dalam  proses  pembuatan sistem informasi berbasis web ini memanfaatkan alat bantu perancangan  UML (Unified Modelling Language) dan beberapa tools bahasa pemrograman seperti bahasa pemrograman PHP dan Basis data MySql [5].
UML (Unifield  Modeling  Language) merupakan  alat  bantu  pemodelan  visual yang  digunakan  untuk  perancangan  dan  membangun  sebuah  software  atau perangkat  lunak  dengan  berorientasikan  pada  objek  [6].  UML  juga  sebuah standar  penulisan  atau  semacam  blue  print  yang  mana  didalamnya  memiliki bisnis  proses,  penulisan  kelas-kelas  dalam  sebuah  bahasa  yang  detail  [7]  [8]. Terdapat beberapa diagram dari UML yang sering dan umum digunakan, yaitu:
1) Use Case adalah gambaran dari fungsionalitas yang diharapkan dari sebuah sistem,  dan  lebih  merepresentasikan  sebuah  interaksi  antara  aktor  dan sistem  yang  terlibat.  Use  case  terdapat  aktor  yang  merupakan  sebuah gambaran  entitas  dari  manuasia  atau  sebuah  sistem  yang  melakukan pekerjaan di sistem.
2) Activity Diagram merupakan gambaran alir dari aktivitas-aktivitas didalam sistem yang berjalan terutama yang dilakukan dari aktor.
3) Sequence  Diagram:  Menggambarkan  interaksi  antar  objek  didalam  dan  di sekitar  sistem  yang  berupa  message  yang  digambarkan  terhadap  waktu dimana hal ini lebih rinci memperlihatkan gambaran alir aktifitas.
4) Class  diagram:  Merupakan  gambaran  struktur  dan  deskripsi  dari  class, package,  dan  objek  yang  saling  berhubungan  diantaranya  pewarisan, asosiasi dan lain sebagainya.
UML merupakan pemodelan yang paling banyak digunakan pengembang sistem untuk memvisualisasikan dan mendokumentasikan desain perangkat lunak dari sebuah  sistem  [9].  Secara  lengkap  diagram  UML  terdiri  dari  13  macam  yang dikelompokkan  dalam  3  bagian.  Pembagian  kategori  dan  macam-macam diagram tersebut dapat dilihat pada Gambar 1 [10].

## Apriade Voutama, Elfina Novalia
Gambar 1. Struktur Diagram UML
Model Waterfall atau disebut model air terjun adalah sebuah model siklus hidup klasik sistematis dalam mengembangkan sebuah software yang dilakukan secara berurutan  dari  setiap  tahap  [11].  Model waterfall digunakan  karena  tahapan pengembangan  sistem  yang  dilakukan  secara  berurutan  dimana  setiap  tahap harus  diselesaikan  terlebih  dahulu  untuk  menghindari  terjadinya  pengulangan dalam  tahapan,  sehingga  pengembangan  sistem  dapat  memperoleh  hasil  yang diinginkan  [12].  Metode  pengembangan  dengan  model  air  terju  ini  memiliki beberapa tahapan secara umum [13]. Tahapan metode pengembangan perangkat lunak model waterfall tersebut [14], yaitu:
1) Analisis
Tahap  awal  persyaratan  pengembangan  suatu  perangkat  lunak  /  software yaitu  pengumpulan kebutuhan dilakukan secara intensif dan khusus untuk memahami  jenis  perangkat  lunak  dibutuhkan  oleh  pengguna.  Spesifikasi kebutuhan perangkat lunak diperlukan untuk didokumentasikan.
2) Desain
Melakukan  desain  perangkat  lunak  adalah  multi-proses  langkah  terfokus pada  pembuatan  desain  program  perangkat  lunak  termasuk  struktur  data, arsitektur  perangkat  lunak,  representasi  antarmuka,  dan  prosedur pengkodean.  Dimulai  dari  menerjemahkan  persyaratan  perangkat  lunak dari  tahap  analisis  kebutuhan  hingga  representasi  desain  sehingga  dapat diimplementasikan menjadi program.
3) Kode Program

## Perancangan Sistem Informasi Plakat Wisuda Berbasis Web  39
Desain  harus  diterjemahkan  ke  dalam  sebuah  program  perangkat  lunak. Hasil  dari  tahap  ini  adalah  program  komputer  menurut  desain  yang  telah dibuat pada tahap desain.
4) Pengujian
Tahap  pengujian  fokus  pada  sistem  yang  sudah  dibuat  untuk  memastikan bahwa  semua  bagian  telah  diuji.  Masalah  ini  dilakukan  untuk meminimalkan kesalahan dan pastikan hasil yang sesuai keinginan.
5) Pemeliharaan
Tidak  menutup  kemungkinan  mengubah  dapat  terjadi  karena  kesalahan muncul  dan  tidak  terdeteksi  selama  pengujian  atau  perangkat  lunak  harus beradaptasi dengan lingkungan baru.

## 2 Matode Penelitian
Pada metode penelitian ini menggunakan disiplin ilmu komputer yang mengacu pada  pendekatan  SDLC  ( System  Development  Life  Cycle ).  Model  yang digunakan  untuk  tahapan  atau  fase  penelitian  yaitu  model Waterfall ,  dengan susunan tahapan sebagai berikut [15].
Gambar 2. Kerangka Penelitian
Berikut  ini  adalah  tahapan  penelitian  dengan  model waterfall berdasarkan gambar 2, sebagai berikut [16]:
1) Analisis
Tahap ini merupakan tahap awal yang dilakukan yaitu melakukan analisis kebutuhan  perangkat  lunak,  fungsi  dan  proses  dari  web  yang  akan dibangun,  dan  mengidentifikasi  kemungkinan  kendala  dalam  pembuatan web,  menganalisis  keandalan,  kelemahan,  dan  teknologi  yang  akan digunakan [17].

## Apriade Voutama, Elfina Novalia
2) Desain
Desain  perangkat  lunak  adalah  proses  beberapa  tahapan  langkah  pada rancangan  pembuatan  program  perangkat  lunak  meliputi  struktur  data, arsitektur perangkat lunak, representasi antarmuka dan prosedur pengodean dimana  pada  tahap  ini  akan  menggunakan  beberpa  model  UML  dan Interface  design .  Tahap  ini  mentranslasi  kebutuhan  perangkat  lunak  dari tahapan  analisis  kebutuhan  ke  representasi  rancangan  agar  dapat diimplementasikan menjadi sebuah program pada tahap selanjutnya.
3) Pengkodean
Hasil perancangan yang sudah dibuat langkah selanjutnya hasil rancangan tersebut ditranslasikan kedalam program perangkat lunak. Hasil dari tahap ini  adalah  program  komputer  sesuai  desain  yang  telah  dibuat  pada  tahap desain.  Atau  tahapan  penulis  membuat  program  yagn  digunakan  yaitu bahasa pemrograman PHP dan database MySql.
4) Pengujian
Pada  tahap  ini  pengujian  dilakuakn  terhadap  program  yang  telah  dibuat untuk  mengetahui  kekurangan  dari  program  tersebut.  Seperti  validasi halaman login, fungi setiap menu memastikan sudah berjalan dengan baik.
5) Pemeliharaan
Tahap  ini  merupakan  tahapan  pemeliharaan  jika  terjadi  kesalahan  atau penambahan  fungsi  maka  perlu  dilakukan  perbaikan  saat  sudah diimplementasikan.

## 3 Hasil dan Pembahasan
Penelitian  dimulai  dari  proses  rancangan  dengan  memanfaatkan  diagram- diagram UML, kemudian akan menampilkan beberapa tamilan interfase design. Hasil  rancanagn  tersebut  diterjemahkan  menjadi  sistem  informasi  berbasis website.

## 3.1 Rancangan UML
Tahap  awal  rancangan  yaitu  menggunakan  Use  case  diagram  untuk memeprlihatkan aktifitas secara keseluruhan dari sistem dan aktor yang terlibat pada sistem yang akan dibangun. Aktor yang ada pada Use case ini yaitu User dan  Admin.  Admin  sebagai  pengelola  semua  aktifitas  pada  sistem  dan  user sebagai pengguna yang akan menggunkan sistem ini.
Perancangan Sistem Informasi Plakat Wisuda Berbasis Web  41
Gambar 3. Rancangan Usecase
Tabel 1. Aktor Use case No Aktor Fungsi / Aktivitas 1 Admin Bertindak  sebagai  pengelola  keseluruhan dari sistem diman admin dapat mengelolah manajamane  user,  data  dan  aktifitas  dari user,  dan  beberapa  manajamen  seperti update data Home, Info,  Pemesanan, dll. 2 User Bertindak  sebagi  pengguna  dari  sistem dimana user dalam leihat semua informasi yang  ada  dan  dapat  melakukan  regisrasi akun,  untuk  melakukan  administrasi  dan informasi yang berkaitan dengan wisuda.
Selanjutnya Activity diagram  memperlihat  aliran  aktifitas  setiap  aktor  pada sistem  gambaran  tersebut  memperlihatkan  apa  saja  yang  dapat  dilakukan  baik dari user maupun admin.

## Apriade Voutama, Elfina Novalia
Gambar 4. Activity diagram User
Gambar 5. Activity diagram Admin
Pada  tampilan  Gambar  4  merupakan  rancangan  dasar  dari  aktifitas  yang  dapat dilakukan oleh user dan Gambar 5 adalah rancangan dari activity admin.
Selanjutnya  yaitu  merancang Sequence diagram  dengan  menunjukkan bagaimana  detail  operasi  dilakukan  dari  setiap  aktifitas.  Aktifitas  admin  dan user  dapat  terlihat  lebih  detail  kegiatan  dan  urutan  yang  dilakukan.  Seperti terlihat pada gambar berikut.

## Perancangan Sistem Informasi Plakat Wisuda Berbasis Web  43
Gambar 6. Sequence user melihat info
Gambar 7. Sequence user register
Gambar 8. Sequence user login
Gambar 9. Sequence user melakukan pemesanan

## Apriade Voutama, Elfina Novalia
Beberapa  gambar  diatas  sebelumnya  merupakan  rancangan sequence diagram dari  aktifitas  yang  dilakukan User .  Kemudian  berikut  adalah  beberapa rancangan sequence diagram aktifitas dari Admin.
Gambar 10. Sequence Admin Manajemen Info
Gambar 11. Sequence Admin Manajemen User
Gambar 12. Sequence Admin Manajemen Pemesana
Perancangan dari Class diagram menggambarkan formulasi gambaran dari basis data  pada  sistem  sehingga    terlihat  berdasarkan  rancangan  sebelumnya  ada beberapa  class  yang  terbentuk  dengan  relasinya.  kelas  yang  terbentuk  yaitu kelas  admin,  kelas  user,  kelas  info,  dan  kelas  pemesanan.  Setiap  kelas  meiliki atirbut  masing  masing  sehingga  membentuk  relasi  kepada  kelas  lain  yang

## Perancangan Sistem Informasi Plakat Wisuda Berbasis Web  45
mencerminkan  normalisasi  gambaran  basis  data.  Berikut  rancangan  class diagram pada gambar 13.
Gambar 13. Rancangan Class Diagram

## 3.2 Rancangan Interface Design
Rancangan interface  design yaitu  membuat  rancangan  dasar  yang  digunakan sebagai  gambaran  seperti  apa  program  yang  akan  dibuat.  Dengan  adanya interface  design  dapat  meminimalisir  tampilan  yang  tidak  sesuai  dan  dapat menyesuaikan  tampilan  yang  ingin  diharapkan.  Berikut  beberapa  rancangan tampilan secara keseluruhan.
Gambar 14. Rancangan Interface Halaman Utama dan Form Register user
Apriade Voutama, Elfina Novalia
Gambar 15. Rancangan Interface Login dan Pemesanan
Berikut  adalah  rancangan  dari  interface  pada  admin  yang  mana  sistem  tetap sama  yang  digunakan  hanya  saja  saat  admin  login  maka  menu  yang  muncul hanya panel pengelolahan admin, seperti gamabar berikut.
Gambar 16. Rancangan Interface Panel Admin

## 3.3 Hasil Program
Berdasarkan  rancangan  yang  sudah  dibuet  dengan  memanfaatkan  beberapa diagram  UML  dan interface  design maka  selanjutnya  adalah  pengkodingan program  dari  hasil  rancangan  kedalam  bentuk  program  aplikasi  berbasis weibsite.  Untuk  mengoperasikan  sistem  ini  dibutuhkan  perangkat  keras  dan perangkat lunak  yang memadai.  Beriut beberpa  tampilan  dari  sistem informasi palakat wisdua berbasis website.
Perancangan Sistem Informasi Plakat Wisuda Berbasis Web  47
Gambar 17. Tampilan Utama
Tampilan utama web memperlihatkan bagian dari menu, konten, dan informasi pada sisi kiri. User dapat mengkases sistem berbasis website ini.
Apriade Voutama, Elfina Novalia

## Gambar 17. Tampilan Utama
Pada gambar 17 merupakan tampilan diman user telah melakukan login setelah menlakukan  registrasi.  Pada  saat  user  login  user  dapat  melihat  informasi  dan melakukan  pendaftaran  wisuda  dan  melakukan  pemesanan  plakat  dan  atribut atribut  wisuda.  Semua  layanan  mengenai  kegiatan  wisuda  user  cukup mengakses melalui sistem informasi ini  sehingga  dapat menghemat  waktu  dan tempat.

## 4 Kesimpulan
Pada  penelitian  dengan  penerapan  pemodelan  digaram  UML  dan interface design dapat  menghasil  sebuah  sistem  informasi  plakat  wisuda  berbasis  web yang  sesuai  dengan  tujuan  berdasarkan  rancangan.  Rancangan  UML  dapat menggambarkan  sistem  sperti  apa  yang  akan  dibuat  sehingga  dengan  adanya rancangan  dapat  mempermudah  develop  dalam  mengembangakan  sistem tersebut.  Kerengaka  penelitian  dengan  menggunakan  model Waterfall juga sangat  efektif  pada  penelitian  ini,  model watefall memberikan  panduan  agar dapat  menyelesaikan  setiap  tahap  secara  sistematik  atau  berurutan  sehingga dapat  fokus  pada  setiap  tahapnya.  Hasil  sistem  ayng  sudah  dibangun  ini dilakukan  pengujian  menggunakan  metode blackbox  testing dengan  hasil pengujian  dari  sisi luar fungsi  setiap  program  dan menghasil  hasil  yang sesuai dengan  tujuan.  Dengan  adanya  sistem  informasi  ini  dapat  memberikan kemudahan  bagi  mahasiswa  calon  wisuda  untuk  mendapatkn  informasi  lebih cepat  dan  melakukan  transaksi  dapat  melalui  sistem  ini  sehingga  dapat  lebih efektif dan efesien.

## 5 Referensi
[1] F.  Liantoni and A. Yusincha, “Pemodelan UML Pada  Sistem Pengajuan Dana Anggaran Untuk Peningkatan Produktivitas Perusahaaan,” Digit. Zo. J. Teknol.
Inf. dan Komun. , vol. 9, no. 2, pp. 94–105, 2018, doi: 10.31849/digitalzone.v9i2.1763.
[2] A.  Voutama,  I.  Maulana,  and  N.  Ade,  “Interactive  M-Learning  Design Innovation  using  Android-Based  Adobe  Flash  at  WFH  (Work  From  Home),” Sci. J. Informatics , vol. 8, no. 1, pp. 127–136, 2021, doi: 10.15294/sji.v8i1.27880.
[3] Suendri,  “Implementasi  Diagram  UML  (Unified  Modelling  Language)  Pada Perancangan  Sistem  Informasi  Remunerasi  Dosen  Dengan  Database  Oracle (Studi Kasus: UIN Sumatera Utara Medan),” J. Ilmu Komput. dan Inform. , vol. 3, no. 1, pp. 1–9, 2018.
[4] A.  Voutama  and  E.  Novalia,  “Perancangan  Aplikasi  M-Magazine  Berbasis Android Sebagai  Sarana  Mading Sekolah Menengah Atas,” J.  Tekno  Kompak , vol. 15, no. 1, p. 104, 2021, doi: 10.33365/jtk.v15i1.920.

## Perancangan Sistem Informasi Plakat Wisuda Berbasis Web  49
[5] E. Novalia et al. , “Website Implementation with the Monte Carlo Method as a Media for Predicting Sales of Cashier Applications,” vol. 2, no. 3, pp. 118–131,
2020.
[6] F.  Ciccozzi,  I.  Malavolta,  and  B.  Selic,  “Execution  of  UML  models:  a systematic review of research and practice,” Softw. Syst. Model. , vol. 18, no. 3, pp. 2313–2360, 2019, doi: 10.1007/s10270-018-0675-4.
[7] M  Teguh  Prihandoyo,  “Unified  Modeling  Language  (UML)  Model  Untuk Pengembangan  Sistem  Informasi  Akademik  Berbasis  Web,” J.  Inform.  J. Pengemb. IT , vol. 3, no. 1, pp. 126–129, 2018.
[8] A.  Voutama,  “Perancangan  Aplikasi  M-Discussion  Berbasis  Android  Sebagai Wadah Diskusi Sekolah,” Syntax J. Inform. , vol. 7, no. 2, pp. 116–124, 2018.
[9] F.-  Sonata,  “Pemanfaatan  UML  (Unified  Modeling  Language)  Dalam Perancangan  Sistem  Informasi  E-Commerce  Jenis  Customer-To-Customer,” J. Komunika    J.  Komunikasi,  Media  dan  Inform. ,  vol.  8,  no.  1,  p.  22,  2019,  doi: 10.31504/komunika.v8i1.1832.
[10] A.  Voutama,  “Sistem  Antrian  Cucian  Mobil  Berbasis  Website  Menggunakan Konsep CRM dan Penerapan UML,” Komputika  J. Sist. Komput. , vol. 11, no.
1, pp. 102–111, 2022, doi: 10.34010/komputika.v11i1.4677.
[11] M.  Ridwan,  I.  Fitri,  and  B.  Benrahman,  “Rancang  Bangun  Marketplace Berbasis  Website  menggunakan  Metodologi  Systems  Development  Life  Cycle (SDLC)  dengan  Model  Waterfall,” J.  JTIK  (Jurnal  Teknol.  Inf.  dan Komunikasi) , vol. 5, no. 2, p. 173, 2021, doi: 10.35870/jtik.v5i2.209.
[12] C.  M.  Cahyadi  and  G.  Susanto,  “KONSELING  DI  SMK  TAMANSISWA MOJOKERTO BERBASIS,” vol. 2, no. 1, pp. 61–70, 2020.
[13] A. Christian, S. Hesinto, and A. Agustina, “Rancang Bangun Website Sekolah Dengan  Menggunakan  Framework  Bootstrap  (  Studi  Kasus  SMP  Negeri  6 Prabumulih ),” J. Sisfokom (Sistem Inf. dan Komputer) , vol. 7, no. 1, pp. 22–27, 2018, doi: 10.32736/sisfokom.v7i1.278.
[14] A.  Christian  and  F.  Ariani,  “Rancang  Bangun  Sistem  Informasi  Peminjaman Perangkat Demo Video Conference Berbasis Web Dengan Metode Waterfall,”
Maret , vol. 14, no. 1, p. 131, 2018.
[15] M. D. Kartika and Y. Priyadi, “Pengembangan Sistem Penjualan Menggunakan UML dan Proses Bisnis E-Commerce Pada TB.Purnama Banjarnegara,” JATISI (Jurnal Tek. Inform. dan Sist. Informasi) , vol. 7, no. 3, pp. 480–497, 2020, doi: 10.35957/jatisi.v7i3.416.
[16] Y. Handrianto and B. 2020 Sanjaya, “Jatiwaringin Raya No. 18 Jakarta Timur,” no. 021, p. 8462039, 2021.
[17] S.  Ain  El  Hayat,  F.  Toufik,  and  M.  Bahaj,  “UML/OCL  based  design  and  the transition towards temporal object relational database with bitemporal data,” J. King  Saud  Univ.  -  Comput.  Inf.  Sci. ,  vol.  32,  no.  4,  pp.  398–407,  2020,  doi: 10.1016/j.jksuci.2019.08.012.