## Analisis Dan Perancangan Sistem Penjualan Pada Toko XYZ Berbasis
Web Dan Mobile Menggunakan UML
Imannudin Akbar 1 , Budiman 2 , Zatin Niqotaini 3 , Ari Rizki Fauzi 4
1,2 Universitas Infomatika dan Bisnis Indonesia, 3 Universitas Pembangunan Nasional Veteran Jakarta
1,2 Fakultas Teknologi dan Informatika, 3,4 Fakultas Ilmu Komputer
1,2,3,4 Sistem Informasi E-mail: * 1 myshowbiz@gmail.com, 2 budiman@gmail.com, 3 zatinniqotaini@gmail.com,
4 aririzkifauzi@gmail.com

## Abstrak
Perkembangan teknologi sangat berpengaruh terhadap sebuah bisnis, terutama penjualan. Toko XYZ masih menggunakan proses bisnis secara manual, hal ini membuat sistem penjualan menjadi tidak  terkomputerisasi  dan  tidak  terintegrasi.  Maka  dari  itu dibutuhkan sebuah  inovasi  dalam model bisnis yang baru, yaitu dengan menggunakan sistem berbasis web dan mobile. Penelitian ini  menggunakan  metode  penelitian  Prototype  milik  Rosa  A.S,  dimana  peneliti  membuat rancangan  sistem  penjualan  ini  menggunakan  UML  yang  dituangkan  dalam  bentuk  notasi diagram. Perancangan sistem penjualan ini menghasilkan 3 user yaitu Customer untuk platform mobile, petugas toko dan pemilik toko menggunakan platform website. Hasil dari penelitian ini yaitu  dengan  memberikan  hasil  dari  analisis  dan  memberikan  perancangan  sistem  informasi penjualan berbasis web dan mobile (mock up) Toko XYZ dengan harapan perancangan sistem ini mempunyai tampilan yang mudah dipahami penjual sehingga pengolahan transaksi penjualan akan menjadi lebih mudah dan memudahkan pelanggan serta  pembeli dalam melakukan proses transaksi dan mengakses informasi produk darimana saja.
Kata Kunci : e-commerce , UML Mobile, Web

## Abstract
Technological advancements have a significant impact on businesses, particularly in the realm of sales. XYZ store currently relies on manual business processes, leading to a non-computerized and  uncoordinated  sales  system. Consequently, there  is  a  need  for  an  innovative  new  business model that utilizes web and mobile-based systems. In this study, Rosa A.S.'s Prototype research method is employed to design the sales system using UML notation in the form of diagrams. The designed sales system caters to three user categories: customers accessing the mobile platform, store clerks, and store owners accessing the website platform. The study's outcomes consist of an analysis report and the design of a web- and mobile-based sales information system (mock-up) for XYZ store. The aim is to create a user-friendly interface that facilitates understanding for the sellers,  making  sales  transactions  more  efficient.  Moreover,  the  system  aims  to  enhance convenience for customers and buyers, enabling them to conduct transactions and access product information from any location.
Keywords : e-commerce, UML, Mobile, Web.
Diajukan: 06 June 2023 Disetujui: 2 June 2023 Dipublikasi: 11 July 2023

## 1. PENDAHULUAN
Perkembangan  Teknologi  Informasi  dan Internet  yang  sangat  pesat  sudah  banyak membantu  manusia  dalam  melakukan pekerjaannya. Selain  internet, dengan adanya smartphone yang dapat
mengakomodasi  internet  sesuai  dengan kebutuhan  manusia,  karena  dengan internet setiap  orang  dapat  memperoleh  dan menyampaikan  berbagai  informasi  yang dibutuhkan kapan saja dan dimana saja dan semakin banyak kegiatan bisnis yang sudah menerapkan  teknologi  informs  dan  internet untuk  menjalankan  bisnisnya.  Kehadiran internet telah memperkokoh keyakinan akan pentingnya peranan teknologi dalam pencapaian  tujuan  finansial  perusahaan melalui  modifikasi  dan  efesiensi  proses bisnis,  yaitu  dengan  memanfaatkan  e- commerce[1]. Teknologi e-commerce merupakan  suatu  mekanisme  bisnis  yang bekerja secara elektronik dengan memfokuskan kepada transaksi bisnis secara online  [2].  Teknologi  ini  memungkinkan terjalinnya hubungan yang lebih manusiawi dan memiliki personalisasi dengan
pelanggan  tanpa  bergantung  kepada  ruang dan  waktu  [3].  Perkembangan  ilmu  dan teknologi  saat  ini  juga telah mempengaruhi aktivitas  perusahaan  dalam  mengolah  data menjadi  informasi  [4]. Cara  pengolahan sistem  informasi  menentukan  hasil  dari data informasi yang diolah [5]
Toko  XYZ  pada  dasarnya  merupakan suatu usaha yang bergerak dalam penjualan sembako  dan  makanan  siap  saji  dan menggunakan Whatsapp dalam mempromosikan dan memasarkan produknya.  Kendala  yang  dihadapai  adalah belum adanya media promosi yang menggunakan  teknologi  informasi  yang bersifat  luas,  sehingga  konsumen  kurang mendapatkan  informasi  tentang  barang  apa saja  yang  ada  di  toko.  Penjualan  di  Toko XYZ  tergantung  kepada  promosi  di Whatsapp dan  penjualan  dari  mitra  bisnis dari Toko XYZ.
Perancangan  aplikasi  berbasis  object oriented  bisa  menggunakan  salah  satu  tool yang  sering  dipergunakan  oleh  banyak orang,  yaitu  UML  ( Unified  Modeling Language ). Sejumlah penelitian
membuktikan  bahwa  UML  adalah  bahasa permodelan populer yang memiliki visualisasi  system  dan  kinerja  dokumentasi yang baik [6].
Penelitan  pertama  dilakukan  oleh  Fifin Sonata  dan  Vina  Winda  Sari.  Peneliti memanfaatkan  UML  untuk  memodelkan cara  kerja  atau  kerangka  kerja  e-commerce tipe Customer to Customer .
Puput  Irfansyah  dan  Sugeng  Haryono melakukan  penelitian  menggunakan  UML untuk merancang model e-commerce produk daur  ulang  bank  sampah.  Teknik  purposive sampling  digunakan  untuk  pengambilan sampelnya.  Peneliti  mengambil  sampel responden  yang  memiliki  ciri-ciri  spesifik yang dibutuhkan oleh peneliti.
Penelitian  ketiga  dilakukan  oleh  Darsiti dan Darin Haerofifah. Peneliti menggunakan  UML  dalam  perancangan aplikasi  pemesanan makanan  berbasis  web. Dalam pembuatannya, peneliti menggunakan  metode  prototyping  yang secara tepat dalam pembuatan sebuah sistem eksperimental dimana pengelola bisa mendapatkan gambaran dan gagasan mengenai persyaratan perancangan aplikasinya. Penelitian keempat dilakukan oleh Muhammad Syukri dan Vera Irma Delianti. Peneliti menggunakan UML dalam melakukan perancangan Sistem Informasi e- commerce berbasis web untuk
mempermudah  pelanggan  dari  dalam  dan luar  kota  Payakumbuh  dalam  mendapatkan informasi, promosi dan melakukan transaksi pembelian secara online
Berdasarkan  permasalahan  Toko  XYZ diatas  dan  penelitian-penelitian  terdahulu maka  penulis  membuat  penelitian  untuk mengangkat  permasalahan  tersebutdengan menggunakan  UML  untuk  merancang sebuah  sistem  penjualan  pada  toko  XYZ yang  berbasis  web  yang  dapat memberikan informasi  produk  yang  tersedia  dan memperluas  pemasaran.  Penelitian  ini menggunakan  metode  penelitian  Prototype milik  Rosa  A.S,  dimana  peneliti  membuat rancangan sistem
penjualan ini menggunakan UML yang dituangkan dalam bentuk notasi diagram
2. METODE PENELITIAN
Pendekatan  kualitatif  digunakan  sebagai metode  penelitian  yang  digunakan    dengan menganalisis proses bisnis yang terjadi pada Toko  XYZ  yang  dilanjutkan  dengan membuat  sebuah  perancangan  system penjualan dengan menggunakan UML.
Penelitian  ini  menggunakan  metode waterwall  dengan  notasi  UML  Rational Rose  sebagai  analisis  dan  perancangan sistemnya yang  meliputi  use case  diagram, activity  diagram,  class  diagram,  sequence diagram, object diagram, component diagram,  composite  structure  diagram, package  diagram,  deployment  diagram, state  machine  diagram,  communication diagram,  timing  diagram  dan  interaction overview diagram.
Gambar 2.1 Tahapan Penelitian a. Identifikasi Masalah Langkah pertama adalah proses observasi dan wawancara untuk mengumpulkan informasi mengenai teknis  sistem  yang  berjalan  pada  Toko XYZ. Selanjutnya dilakukan identifikasi masalah  yang  ditemukan  pada  Toko XYZ  khususnya  mengenai  sistem  yang sedang berjalan
b. Pengumpulan Data Untuk mengumpulkan data yang dibutuhkan dalam membuat suatu sistem bisa  dilakukan  dengan  3  cara,  yaitu observasi, studi literatur, dan wawancara.
c. Analisis Sistem Tahapan selanjutnya yaitu analisis sistem
yang terdiri dari 3 subsistem utama yaitu Requirements Planing, Analisis Data dan Analisis Sistem . Namun, pada penelitian ini  hanya  akan  dibahas  hingga  Analisis Sistem yang  menghasilkan sebuah blueprint sistem d. Perancangan Sistem Perancangan sistem terdiri dari perancangan  UML,  perancangan  basis data,  perancangan  struktur  table,  dan perancangan user interface . 3. HASIL DAN PEMBAHASAN
3.1 Usecase Diagram Diagram  use  case  digunakan  untuk menggambarkan  interaksi  antara  aktor  dan sistem  didalam  sebuah  sistem  informasi untuk mencapai tujuan tertentu.
Gambar 3.1 Use Case Diagram

## 3.2 Class Diagram

## Gambar 3.2 Class Diagram
3.3 Object Diagram
Gambar 3.3 Object Diagram
3.4 Activity Diagram Gambar 3.4 Activity Diagram Login
Gambar  3.5 Activity Diagram Pesan Produk
Gambar 3.6 Activity Diagram Checkout
Gambar 3.7 Activity Diagram Pesanan diterima
Gambar 3.8 Activity Diagram Terima Pesanan
Gambar 3.9 Actvity Diagram Kelola Produk
Gambar 3.10 Activity Diagram Laporan Penjualan (Pemilik Toko)
Gambar 3.11 Activity Diagram Laporan Penjualan (Penjaga Toko)

## 3.5 Sequence Diagram
Gambar 3.12 Sequence Diagram Login
3.13 Sequence Diagram Pesan Produk
Gambar 3.14 Sequence Diagram Checkout
Gambar 3.15 Sequence Diagram Pesanan Diterima
Gambar 3.16 Sequence Diagram Terima Pesanan
Gambar 3.17 Sequence Diagram Kelola
Produk 3.18 Sequence Diagram Laporan Penjualan

## 3.6 State Machine Diagram
Gambar 3.19 State Diagram Login
Gambar 3.20 State Diaram Pesan Produk
Gambar 3.21 State Diagram Checkout
Gambar 3.22 State Diagram Pesanan
Diterima
Gambar 3.23 Diagram Terima Pesanan
Gambar  3.24 State Diagram Kelola
Produk
3.6.7 State Diagram Laporan Penjualan

## 3.7 Component Diagram
Gambar 3.26 Component Diagram
3.8 Deployment Diagram
Gambar 3.27 Deployment Diagram

## 3.8 Perancangan Database
Gambar 3.28 Conceptual Data Model
Gambar 3.29 Physical Data Model
3.9 Perancangan User Interface
Gambar 3.30 Struktur Menu Mobile (Customer)
Gambar 3.31 Strutkur Menu Web
Gambar 3.32 Menu Home Screen Menu  homescreen  atau  menu  utama merupakan  menu  yang  pertama  muncul
setelah  customer  melakukan  login,  pada menu  ini  terdapat  beberapa  fitur.  Seperti fitur  lokasi  anda  sesuai  dengan  GPS,  fitur cari  produk,  beberapa  kategori  dari  produk seperti  penawaran  terbaik  minggu  ini  dan lainnya
Gambar 3.33 Menu Checkout
Menu  checkout  berisi  dari  produk  yang sudah  customer  pilih,  yaitu  terdapat informasi pemesanan seperti lokasi
pengiriman,  metode  pembayaran,  ongkos kirim hingga jumlah tagihan atau total harga yang perlu dibayarkan.
Gambar 3.34 Menu Pesanan Diterima
Menu  pesanan  diterima  digunakan  apabila pesanan atau produk sudah sampai ke tangan customer,  maka  customer  dapat  memilih tombol  pesanan  diterima  agar  petugas  toko telah  mengetahui  status  dari  pengiriman. Status  pemesanan  berubah  secara  otomatis tergantung dengan posisi pesanan
Halaman  login  menampilkan  form  login yang terdiri dari textbox input username dan password.  Petugas  Toko  dan  Pemilik  Toko dapat  masuk  ke  sistem  penjualan  melalui halaman  login  ini.  Setelah  user  meng- inputkan data username dan password, maka akan  terjadi  proses  validasi  oleh  sistem  ke database  server.  Jika  login  berhasil  maka halaman utama atau dashboard akan tampil, namun apabila login gagal maka sistem akan mengembalikan ke halaman login
Gambar 3.36. Halaman Kelola Produk
Halaman  Kelola  produk  dapat  digunakan oleh petugas toko untuk mengelola produk, seperti menambahkan produk baru, mengubah  data  produk  yang  sudah  ada ataupun  menghapus  produk.  Data  produk terdiri  dari  beberapa  diantaranya  nama produk, jenis produk, kategori produk, harga produk,  kuantitas  produk,  supplier,  tanggal masuk dan deskripsi
Gambar 3.37 Halaman Laporan Penjualan
Halaman  laporan  penjualan  dapat  diakses oleh  petugas  toko  dan  pemilik  toko  untuk mengetahui  laporan  penjualan  dari  toko. Laporan tersebut ditampilkan melalui dashboard .  Jadi  user  yaitu  petugas  dan
pemilik toko dapat mengetahui keuntungan/pendapatan,  pengeluaran  dan penjualan pada took

## 4. KESIMPULAN
1. Peneliti  menemukan  permasalahan  pada Toko  XYZ  dimana  saat  dilakukan analisis  menghasilkan  informasi  bahwa proses bisnis yang sedang berjalan tidak efektif  dikarenakan  aliran  uang  masuk dan keluar berjalan di satu kasir. 2. Pihak  Toko  XYZ  dapat  mempermudah proses bisnis menggunakan perancangan sistem  penjualan  ini.  Sistem  penjualan dibuat  menjadi  dua  platform  dimana untuk  Customer  menggunakan  platform online  mobile,  sedangkan  untuk  pihak Toko  seperti  petugas  toko  dan  pemilik toko menggunakan platform website. Hal ini dapat mempermudah dan mempercepat setiap transaksi yang ada.

## 5. SARAN
1. Perancangan  ini  dapat  dijadikan  bahan pertimbangan  untuk  mengembangkan Sistem  Penjualan  ini  dan  sebaiknya menggunakan  data  penjualan  yang real dilapangan  sehingga  kondisi  nyata  dari kinerja sistem dapat  tergambarkan dengan nyata. 2. Pembuatan secara menyeluruh pembuatan  dashboard  pada  tiap  unit dengan hubungan dan integrasi antar unit bisnis yang tetap diperhatikan. DAFTAR PUSTAKA [1]  Durotul  Ummah,  L.  2018.  Rancang Bangun e-commerce Pada Toko Kerudung  Nuri  Collection  Berbasis Customer  Relationship  Management. Jurnal Nuansa Informatika. Vol 12 No 2. Juli 2018. [2] Sonata, T, and Winda Sari, V. Juni 2019.
Pemanfaatan  UML  (Unified  Modeling Language)  Dalam  Perancangan  Sistem Informasi  e-commerce  Jenis  Customer- To-Customer.  Jurnal  Komunika,  Vol.8
No 1. Juni 2019.
[3] Sandy Kosasi. 2015. Perancangan Sistem e-commerce  Untuk  Memperluas  Pasar
Produk  Oleh-Oleh  Khas  Pontianak. Snastia.2015 (Oktober), 110-119.
[4]  Hikmawati,  E.  2019.  Rancang  Bangun Sistem  Informasi  Penjualan  Apartment Jatinangor  City  Park.  Jurnal  Nuansa Informatika. Vol 3 No 1. Januari 2019.
[5] Abdullah, F and Hulu, S. 2022. Rancang Bangun Sistem Informasi Teller Menggunakan Java Netbeans (Studi KSP Nasari Bandung). Jurnal Nuansa Informatika. Vol 16 No 1. Januari 2022.
[6]  Nistrina,  K  and  Sahidah,  L.  Juni  2022. Unified  Modeling  Language  (UML) Untuk  Perancangan  Sistem  Informasi Penerimaan  Siswa  Baru  di  SMK  Marga Insan Kamil. Jurnal Sistem Informasi, J-
SIKA, Vol 4 No 1, Juni 2022.
[7]  Irfansyah,  P  and  Haryono,  S.  2017. Model  e-commerce  Produk  Daur  Ulang Bank  Sampah  Menggunakan  UML. Jurnal  Edukasi  dan  Penelitian  (JEPIN),
Vol.3, No 2, 2017.
[8]Darsiti and Haerofifah, D. 2022. Perancangan Aplikasi Pemesanan Makanan  Berbasis  Web  (Studi  Kasus  : New  Normal  Eatery).  Jurnal  Nuansa Informatika,  Vol  16,  Nomor  1.  Januari
2022.
[9]  Syukri,  M  and  Irma  Delianti,  V.  2020.
Perancangan Sistem Informasi e- commerce  UKM  Dua  Putra  Berbasis Web. Jurnal Vocational Teknik Elektronika  dan  Informatika,  Vol  8,  No 1. Maret 2020.