Volume 6 Nomor 2, Desember 2023 e-ISSN : 2614-1574 p-ISSN : 2621-3249

## RANCANG BANGUN SISTEM INFORMASI BERBASIS WEB PADA BENGKEL K41_GARAGE

## DESIGN AND DEVELOPMENT OF A WEB BASED INFORMATION SYSTEM FOR K41_GARAGE WORKSHOP
Fakhri Zufar Abhirama 1 , Edy Supriyanto 2 , Hari Murti 3 , Rara Sri Artati Redjeki 4 1,2,3,4 Universitas Stikubank Semarang, Indonesia Fakhrizufarabhirama@mhs.unisbank.ac.id

## ABSTRACT
Motorcycle workshop is a place for repairing motorized vehicles, both minor and major damages. K41_Garage is  a  workshop  that  provides  spare  parts  and  offers  motorcycle  services.  Currently,  the  sales  process  relies  on customers physically visiting the workshop to search for spare parts or manually inquire about them. This creates challenges  for  the  admin  to  keep  track  of  available  inventory.  Additionally,  customers  face  difficulties  due  to limited time, distance, and the need to queue at the workshop. To address these issues, a web-based information system will be developed for K41_Garage. The system will be developed using PHP and MySQL programming languages,  following  the  Waterfall  development  methodology,  and  employing  UML  (Unified  Modelling Language) for system design. The implementation of this system is expected to facilitate the admin in inventory management and sales processes, while providing customers with a convenient way to purchase spare parts.

## Keywords: Motorcycle Workshop, Spare Parts Sales, UML(Unified Modelling Language)

## ABSTRAK
Bengkel motor adalah sebuah tempat yang untuk memperbaiki kendaraan bermotor baik kerusakan ringan maupun berat.  Bengkel  K41_Garage  adalah  sebuah  bengkel  yang  menyediakan  sparepart  dan  melakukan  jasa  service sepeda motor, dalam proses penjualannya masih mengandalkan konsumen yang datang ke bengkel untuk mencari sparepart atau manual. Hal ini menyebabkan admin kesulitan untuk melakukan cek barang, sedangkan konsumen kesulitan akan jarak dan waktu yang terbatas, serta adannya antri. Dengan adannya masalah tersebut, maka akan dibangun Sistem informasi berbasis web pada bengkel K41_Garage. Sistem ini akan menggunakan pemrograman PHP  Mysql, Metode pengembangan sistem Waterfall, dan metode perancangan sistemnya menggunakan UML (Unified  Modelling  Language).  Setelah  terciptanya  sistem  ini  diharapkan  dapat  mempermudah  admin  dalam melakukan cek barang serta proses penjualan,  dan memudahkan konsumen dalam melakukan transaksi pembelian sparepart.
Kata Kunci : Bengkel Motor, Penjualan Sparepart, UML(Unified Modelling Language)

## PENDAHULUAN
Saat ini, teknologi informasi memiliki  pengaruh  yang  signifikan  dalam gaya  hidup  masyarakat,  salah  satunya adalah  dalam  hal  penjualan.  Metode penjualan  secara  online  telah  menjadi sangat populer dan menawarkan kemudahan  dalam  proses  pemesanan  dan transaksi  pembelian.  Banyak  perusahaan besar  maupun  usaha  kecil  menggunakan aplikasi  web  untuk  melakukan  penjualan dan  distribusi  produk  mereka.  (Anggara, 2022) Bengkel K41_Garage adalah sebuah usaha  yang  menyediakan  sparepart  motor dan  layanan  servis.  Namun,  dalam melakukan transaksi penjualan, bengkel ini
menghadapi kendala karena masih mengandalkan  sistem  konvensional  atau manual.(Zulianti et al., 2020)
Bengkel  K41_Garage  menghadapi beberapa masalah terkait proses penjualan. Petugas bengkel mengalami kendala dalam pembuatan nota penjualan serta memberikan informasi mengenai ketersediaan stok barang kepada konsumen.  Sistem  penjualan  yang  belum optimal menjadi penyebab masalah tersebut.  Selain  itu,  konsumen  juga mengalami  kesulitan  saat  ingin  membeli sparepart di bengkel tersebut. Keterbatasan waktu  dan  jarak  perjalanan  ke  bengkel, antrian  yang  harus  diikuti,  dan  kesulitan
mencari sparepart yang diinginkan menjadi beberapa  faktor  yang  membuat  proses pembelian  menjadi  tidak  efisien  bagi konsumen.(Gultom & Oktarina, 2019)
Berdasarkan  uraian  tersebut,  telah dirancang sebuah sistem informasi berbasis web  dengan  tujuan  untuk  meningkatkan efisiensi  penjualan  sparepart  motor  di Bengkel  K41_Garage  Semarang.  Web  ini akan memberikan kemudahan bagi konsumen dengan menghilangkan kebutuhan  untuk  datang  langsung  ke bengkel dan mempercepat proses transaksi.

## METODE
Dalam  pembuatan  sistem  web  ini, metode  yang  akan  digunakan  dalam pengembangan  sistem  adalah  metode Waterfall.  Menurut  penulis,  metode  ini merupakan  pilihan  yang  tepat  untuk diterapkan  pada  pengembangan  perangkat lunak  yang  sistematis.  Metode  Waterfall melibatkan serangkaian tahapan pengembangan  yang  dilakukan  secara berurutan  untuk  meningkatkan  peluang keberhasilan  proyek  (Yanuar  &  Pratiwi, 2022).

## Metode Pengembangan sistem
Gambar 1. Metode Waterfall Sumber : Sommerville, ian, 2011
1. Requirements Analysis Dalam  tahap  ini,  pengembang  sistem perlu  melakukan  komunikasi  yang bertujuan  untuk  memahami  kebutuhan perangkat  lunak  yang  diharapkan  oleh pengguna  serta  batasan-batasan  yang ada  pada  perangkat  lunak  tersebut. Informasi ini biasanya diperoleh melalui wawancara  langsung,  diskusi,  atau survei yang dilakukan secara
langsung.(E.  B.  Pratama  &  Marjun, 2022)
2. Design Proses  ini  merupakan  serangkaian langkah  yang  difokuskan  pada  desain dan  pembuatan  program  perangkat lunak, termasuk dalam hal struktur data, arsitektur  perangkat  lunak,  representasi antarmuka,  dan  prosedur  pengodean.
(Achyani & Saumi, n.d.)
3. Development
Setelah melewati tahap analisis kebutuhan  sistem  dan  desain,  tahap selanjutnya adalah tahap pengkodean di mana  desain  yang  telah  dibuat  pada tahap  desain  perlu  diterjemahkan  ke dalam bentuk aplikasi sistem informasi.(Kurniawan et al., 2020)
4. Testing Pada  tahap  ini,  dilakukan  pengujian terhadap  sistem  informasi  penjualan yang telah dibangun. Jika sistem berhasil berjalan sesuai kebutuhan yang diharapkan, maka sistem dapat diimplementasikan. Dengan adanya sistem  ini,  diharapkan  dapat  membantu meningkatkan  penjualan  dan  promosi bengkel(Sudianto et al., 2020).
5. Maintence Tahap ini merupakan tahap akhir dalam
metode  waterfall.  Pada  tahap  ini, perangkat  lunak  yang  telah  selesai dikembangkan  akan  diimplementasikan dan dilakukan pemeliharaan. Pemeliharaan  ini  mencakup  perbaikan kesalahan atau bug yang mungkin tidak terdeteksi pada tahap-tahap sebelumnya(Aceng Abdul Wahid, 2020).

## Metode Pengumpulan data
Dalam melakukan penelitian diperlukan  data  data.  Dalam  proses mengumpulkan  data  penulis  melakuan beberapa metode yaitu:
A. Observasi
Pengumpulan  data  dilakukan  dengan metode  yang  sengaja  dipilih  dan dilakukan  secara  sistematis.  Penulis melakukan  observasi  langsung  di  Toko
Keramik Bintang Terang untuk mendapatkan  data  yang  diperlukan dalam  penulisan  Skripsi  ini.(Badrul, 2021)
B. Wawancara Wawancara merupakan metode pengumpulan  data  yang  dilakukan secara  langsung  dengan  melakukan interaksi tanya jawab. Dalam penelitian ini, wawancara digunakan untuk mengumpulkan data mengenai permasalahan dan tanggapan dari pemilik bengkel terkait program inventarisasi perbengkelan yang sedang berjalan.(Indriani et al., 2022)
C. Studi Pustaka
Untuk  melaksanakan  hal  tersebut, penulis  melakukan  pencarian  referensi terkait  perancangan  dan  pengembangan sistem informasi melalui sumber- sumber seperti jurnal, literatur, dan lain sebagainya(A. Pratama et al., 2022).

## Metode Perancangan Sistem
Metode  perancangan  sistem  yang digunakan  dalam  merancang  sistem  ini adalah Unified Modeling Language (UML) merupakan  sebuah  bahasa  standar  yang digunakan untuk menggambarkan perangkat  lunak  dalam  bentuk  diagram. UML digunakan untuk memvisualisasikan, mendefinisikan, membangun, dan mendokumentasikan sistem perangkat lunak(Audrilia & Budiman, 2020)

## HASIL DAN PEMBAHASAN
A. Kebutuhan Perangkat
Pada sistem ini minimum kebutuhan perangkat yang digunakan adalah:
Perangkat Hardware:
1. Processor Intel ® Core ™ i58250U
2. Memory Ram 4GB
3. Hardisk 1Tera
4. Keyboard dan Mouse
Perangkat Software
1. PHP Adalah penggunaan bahasa
pemrograman  yang  terintegrasi  dengan HTML untuk membuat halaman web yang dinamis.  Dalam  server-side  scripting,
sintaks  dan  perintah  yang  diberikan  akan dieksekusi sepenuhnya di sisi server.(Destriana et al., 2020)
2. Mysql Adalah  sebuah  perangkat  lunak  atau sistem manajemen basis data (SMBD) yang menggunakan bahasa SQL. MySQL dirancang sebagai DBMS (Database
Management  System)  multithread  dan multiuser. Sebenarnya, MySQL merupakan turunan dari salah satu konsep utama dalam database  yang  memungkinkan  pengolahan dan  pengelolaan  data  dengan  cara  yang mudah dan otomatis.(Suhartini et al., 2020)
3. Visual Studio Code Adalah sebuah perangkat lunak yang ringan  namun  kuat  sebagai  editor  kode sumber yang berjalan di desktop. Software ini  dilengkapi  dengan  dukungan  bawaan untuk JavaScript, TypeScript, dan Node.js, serta  memiliki  berbagai  ekstensi  yang tersedia untuk bahasa pemrograman lainnya.(Hartati, 2020)
4. Xampp Adalah  sebuah  perangkat  lunak  web server  Apache  yang  sudah  dilengkapi dengan  database  server  MySQL  dan mendukung  pemrograman  PHP.  XAMPP merupakan software yang mudah digunakan  dan  gratis,  serta  mendukung instalasi  baik  di  sistem  operasi  Linux maupun Windows.(Sari et al., 2022)

## B. Perancangan Sistem
1. Use Case Diagram Diagram kasus penggunaan (use case diagram)  adalah  sebuah  model  yang digunakan untuk menggambarkan interaksi antara  aktor  (user)  dengan  sistem  yang saling mempengaruhi satu sama lain dalam suatu  sistem  yang  terhubung.(Putri  & Mariana, 2023)

## Gambar 2. Use Case Diagram
Pada diagram use case diatas terdapat 2  aktor  yaitu  admin  dan  konsumen.  Aktor Konsumen dapat melakukan daftar, Login, melihat data sparepart, memesan sparepart, dan  memilih  pembelian  secara  online atau offline. Dan melakukan pembayaran. Aktor admin  dapat  melakukan  kelola  akun konsumen, data sparepart, data pemesanan, mengelola  pembayaran  serta  membuat laporan pembayaran.
3. Sequence Diagram
Sequence diagram adalah salah satu diagram dalam UML yang digunakan untuk menggambarkan  interaksi  antara  objek- objek di dalam dan sekitar sistem, termasuk pengguna, tampilan, dan lain-lain. Diagram ini menunjukkan pesan-pesan yang dikirimkan  antara  objek-objek  tersebut sepanjang waktu..(Syarif & Nugraha, 2020)

## Gambar 3. Sequence diagram
Gambar  diatas  menjelaskan  User baik admin maupun konsumen ketika login. User Input Username dan Password ketika login pada halaman login. Setelah melakukan  klik  login  jika  berhasil  sistem akan melakukan login ke halaman dashboard jika gagal maka akan mendapatkan pemberitahuan gagal login.
2. Class Diagram Diagram kelas (class diagram)
merupakan  salah  satu  elemen  penting dalam pemodelan UML. Tujuannya adalah untuk  membuat  model  logis  dari  sebuah sistem, dengan menggambarkan hubungan antara  kelas-kelas  yang  ada  dalam  sistem tersebut.(Student et al., 2021).

## Gambar 4. Class Diagram

## 3. Implementasi Sistem
Dari  use  case  diagram,  Sequence diagram, dan class diagram diatas kemudian dapat di ubah ke sistem informasi berbasis web Bengkel K41_Garage:
1. Halaman Utama Pada  halaman  utama,  Menampilkan Informasi  mengenai  sparepart  yang tersedia.  Pada  halaman  Utama  juga menampilkan informasi mengenai Peta,
Akun instagram, Alamat lengkap bengkel,  dan  kontak  yang  dapat dihubungi.

## Gambar 5. Halaman Utama
2. Halaman Registrasi Pada  Halaman  Registrasi  digunakan untuk  membuat  akun  baru.  Untuk melakukan pendaftaran harus menginputkan beberapa informasi yaitu Username,  Password,  Nama  Lengkap, Email, No telp, dan Alamt Konsumen.

## Gambar 6. Halaman Registrasi
3. Halaman Login
Pada  Halaman  Login  digunakan  untuk masuk ke dashboard dengan menginputkan username dan password.

## Gambar 7. Halaman Login
4. Halaman Dashboard
Pada  halaman  dashboard  akan  muncul ucapan  selamat  datang  dan  notifikasi bahwa  login  sukses.  Pada  Halaman konsumen terdapat beberapa menu yang dapat  diakses  yaitu  data  sparepart,  data pembayaran, dan profile konsumen.

## Gambar 8. Halaman Dashboard
5. Halaman Data Sparepart
Pada halaman data sparepart menampilkan  sparepart  yang  sedang tersedia  di  bengkel.  Data  yang  dapat dilihat  yaitu  foto  sparepart,  Kode sparepart,  Nama  sparepart,  Unit  beli harga  sparepart,  harga  jual,  stok sparepart, dan aksi yang dapat dilakukan seperti  memilih  pemesanan  sparepart secara  online  dan  offline  (datang  ke bengkel).

## Gambar 9. Halaman Data Sparepart
6. Halaman Pesan Sparepart Online Pada  Halaman  Pesan  Sparepart  online ini  adalah  halaman  untuk  melakukan pemesanan  sparepart  secara  online.
Untuk  melakukan  pemesanan  harus menginputkan beberapa informasi seperti  Jumlah  Sparepart  yang  dipesan, Bukti  pembayaran  Tranfer,  Nama penerima barang, Nomor Telefon penerima barang, dan Alamat penerima barang.

## Gambar 10. Halaman Pemesanan Sparepart Online
7. Halaman Pesan Sparepart Offline
Pada  Halaman  pemesanan  sparepart offline  adalah  halaman  yang  digunakan untuk  melakukan  pemesanan  sparepart secara online. Untuk melakukan pemesanan  sparepart  secara  offline, informasi yang diinputkan ada kemiripan  dengan  pemesanan  secara online.  Hanya  saja  yang  membedakan adalah Nama pengambil barang, Nomor telefon  pengambil  barang,  dan  waktu pengambilan. Ketika selesai menginputkan  informasi  data  maka konsumen dapat mengambil sparepart di bengkel.
Gambar 11. Halaman pemesanan Sparepart Offline
8. Halaman Riwayat Pembayaran
Pada  halaman  riwayat  pembayaran, Menampilkan tentang riwayat pembelian dan pembayaran Sparepart. Gambar 12, Halaman riwayat pembayaran

## 9. Halaman Profile
Pada halaman profile menampilkan data admin atau konsumen. Pada halaman ini memiliki akses untuk data user.

## Gambar 13. Halaman Profile

## SIMPULAN
Berdasarkan  output  yang  dihasilkan dari  Rancang  Bangun  Sistem  Informasi Berbasis Web Pada Bengkel K41_Garage, ada beberapa kesimpulan yaitu:
1. Proses  penjualan  sparepart  diharapkan lebih  mudah  dilakukan  dengan  adanya sistem ini.
2. Diharapkan  antrian  yang  terjadi  di bengkel  berkurang  setelah  sistem  ini dibangun
3. Admin dapat lebih mudah mengatur data sparepart yang ada pada bengkel
4. Website  sudah  dapat  berjalan,  akan tetapi  terbatas  hanya  pada  akses  local host.

## DAFTAR PUSTAKA
Aceng  Abdul  Wahid.  (2020).  Analisis
Metode Waterfall Untuk Pengembangan  Sistem  Informasi. Jurnal  Ilmu-Ilmu  Informatika  Dan
Manajemen STMIK , November , 1–5. Achyani,  Y.  E.,  &  Saumi,  S.  (n.d.).
Penerapan  Metode  Waterfall  Pada Sistem  Informasi  Manajemen  Buku Perpustakaan.
Anggara,  W.  M.  (2022). Rancang Bangun
Sistem  Informasi  Inventori  Barang Berbasis  Web  Pada  Cv  Imarah Printing . 4 (1), 30–39. http://rama.mdp.ac.id:84/id/eprint/16 9 Audrilia,  M.,  &  Budiman,  A.  (2020). Perancangan Sistem Informasi
Manajemen  Bengkel  Berbasis  Web (Studi  Kasus :  Bengkel  Anugrah). Jurnal  Madani :  Ilmu  Pengetahuan, Teknologi, Dan Humaniora , 3 (1), 1–
12.
https://doi.org/10.33753/madani.v3i1
.78 Badrul,  M.  (2021).  Penerapan  Metode waterfall  untuk  Perancangan  Sistem Informasi  Inventory  Pada  Toko Keramik Bintang Terang. PROSISKO:  Jurnal  Pengembangan Riset Dan Observasi Sistem Komputer , 8 (2), 57–52. https://doi.org/10.30656/prosisko.v8i
2.3852
Destriana, R., Taufiq, R., & Suryana, B. E. (2020).  Rancang  Bangun  Sistem Informasi  Document  Managemen System pada LKP ITC-PCB Berbasis WEB Menggunakan UML dan PHP. Jurnal Inovasi Informatika , 5 (1), 64–
71.
https://doi.org/10.51170/jii.v5i1.35 Gultom,  E.  E.,  &  Oktarina,  D.  (2019). Rancang  Bangun  Sistem  Informasi Pemesanan  Antrian  Service  Mobil Berbasis Android. Jurnal Mahasiswa Aplikasi  Teknologi  Komputer  Dan Informasi , 1 (Thn), 58–64. http://www.ejournal.pelitaindonesia. ac.id/JMApTeKsi/index.php/JOM/ar ticle/view/393
Hartati,  S.  (2020).  Perancangan  Sistem Informasi  Inventaris  Barang  Pada Kantor  Notaris  Dan  Ppat  Ra  Lia Kholila,  Sh  Menggunakan  Visual Studio  Code. Jurnal  Siskomti , 3 (2),
37–48.
https://www.ejournal.lembahdempo. ac.id/index.php/STMIK- SISKOMTI/article/view/123 Indriani, V. A., Sidik, A., & Nurmaesah, N. (2022).  Sistem  Informasi  Inventory Berbasis  Web  Studi  Kasus  Di
Bengkel Chinot. Jurnal Topik
Global , 1 (1), 1–5.
Kurniawan,  H.,  Apriliah,  W.,  Kurniawan, I.,  Firmansyah,  D.,  Informasi,  S.,  & Pinjam, S. (2020). Penerapan Metode Waterfall Dalam Perancangan Sistem Informasi Penggajian Pada Smk Bina
Karya Karawang. 14 , 159–169.
Pratama, A., Malabay, M., Dwi Putra, S., & Setyawati,  P.  (2022).  Perancangan Sistem  Informasi  Pada  Bengkel Cahaya Motor Berbasis Web. Ikraith- Informatika , 7 (1), 126–135.
https://doi.org/10.37817/ikraith-
informatika.v7i1.2244
Pratama,  E.  B.,  &  Marjun,  L.  A.  (2022).
Analisis  Pemodelan  Diagram  Uml
Pada Rancang Bangun Sistem Informasi Kepegawaian Yang Dikembangkan Dengan Model
Waterfall. Jurnal Teknik Informatika Kaputama (JTIK) , 6 (2), 725–736. Putri, F. K., & Mariana, N. (2023). Sistem Pelayanan  Berbasis  Web  Pada Wedding Organizer Putri Hanastari .
4 (1), 32–39.
Sari,  I.  P.,  Jannah,  A.,  Meuraxa,  A.  M., Syahfitri,  A.,  &  Omar,  R.  (2022). Perancangan Sistem Informasi Penginputan  Database  Mahasiswa Berbasis  Web. Hello  World  Jurnal Ilmu  Komputer , 1 (2),  106–110. https://doi.org/10.56211/helloworld. v1i2.57
Student, M. T., Kumar, R. R., Omments, R. E.  C.,  Prajapati,  A.,  Blockchain,  T.- A.,  Ml,  A.  I.,  Randive,  P.  S.  N., Chaudhari, S., Barde, S., Devices, E., Mittal, S., Schmidt, M. W. M., Id, S. N.  A.,  PREISER,  W.  F.  E., OSTROFF,  E.,  Choudhary,  R.,  Bit- cell, M., In, S. S., Fullfillment, P., …
Fellowship, W. (2021). No 主観的健康感 を中心とした在宅高齢者におけ
る 健康関連指標に関する共分散 構造分析 Title. Frontiers in Neuroscience , 14 (1), 1–13.
Sudianto, A., Ahmadi, H., & Alimuddin, A.
(2020).  Rancang  Bangun  Sistem
Informasi Penjualan Sparepart Motor Pada Bengkel Vinensi Motor Berbasis Web Sebagai Guna Meningkatkan Penjualan dan
Promosi  Produk. Infotek :  Jurnal Informatika  Dan  Teknologi , 3 (2),
115–122.
https://doi.org/10.29408/jit.v3i2.228 9
Suhartini, S., Sadali, M., & Kuspandi Putra, Y. (2020). Sistem Informasi Berbasis Web Sma Al- Mukhtariyah Mamben Lauk  Berbasis  Php  Dan  Mysql Dengan  Framework  Codeigniter. Infotek :  Jurnal  Informatika  Dan Teknologi , 3 (1), 79–83. https://doi.org/10.29408/jit.v3i1.179
3
Syarif,  M.,  &  Nugraha,  W.  (2020). Pemodelan  Diagram  UML  Sistem Pembayaran Tunai Pada Transaksi E- Commerce. Jurnal Teknik Informatika  Kaputama  (JTIK) , 4 (1),
70 halaman. http://jurnal.kaputama.ac.id/index.ph p/JTIK/article/view/240
Yanuar,  I., &  Pratiwi,  R.  (2022).  Rancang Bangun Sistem Informasi Persediaan Suku  Cadang  di  Bengkel  “Bangkit Jaya  Motor”  Berbasis  Web. Jurnal Teknik  Industri,  Sistem  Informasi Dan Teknik Informatika , 1 (1), 29–38. https://ejournal.ubibanyuwangi.ac.id/ index.php/jurnal_tinsika
Zulianti,  E.,  Nabyla,  F.,  &  Syauqi,  A. (2020).  Rancang  Bangun  Sistem Informasi  Pada  Bengkel  Motor Savana Berbasis Web Menggunakan Metode Xp (Extreme Programming).
Jurnal Sistem Informasi Dan Teknologi Peradaban , 1 (1), 12–17.