## JITET (Jurnal Informatika dan Teknik Elektro Terapan)

## RANCANG  APLIKASI  PENJUALAN  BERBASIS  WEB TOKO AR PERFUME
Vina Ishalatussilmi 1 , M Aghis Sufiantoro 2 , Ni Made Berliana Deswita Rini 3 , Muhammad Aldi Pratama 4 , Rayhan Favian 5 , Anindo Saka Fitri 6
1,2,3,4,5,6 Universitas Pembangunan Nasional “Veteran” Jawa Timur; Jl. Rungkut Madya No.1, Gn. Anyar, Kec. Gn. Anyar, Kota SBY, Jawa Timur 60294; Telepon : (0623) 18706369
Riwayat artikel: Received: 31 Desember 2022 Accepted:  8 April  2023 Published: 12 April  2023

## Keywords:
ICONIX Process, Sistem Informasi, Website
Corespondent Email: 21082010127@student.upnjatim.ac.id
Abstrak. Perkembangan  teknologi  internet  dalam  dunia perdagangan  atau  yang  sering  kita  dengar  dengan  istilah  e- commerce  kini  semakin  meningkat.  AR  Perfume  merupakan sebuah toko yang bergerak dibidang penjualan parfum. Toko AR Perfume  berlokasi  di Putat  Gede  Timur  III  No.56  Surabaya. Sistem  pembayaran  yang  dilakukan  pada  toko  ini  masih dilakukan  secara  manual  yaitu  adalah  dengan  cara  pembeli datang ke toko langsung. Dengan cara manual tentu saja banyak menimbulkan  kesulitan  bagi  pemilik  dalam  pengolahan  data maupun  pembuatan  laporan,  serta  menimbulkan  kesulitan  juga bagi  pembeli  karena  harus  datang  langsung  ke  toko  untuk mengantri.  Dengan  adanya  permasalahan  tersebut,  kami berencana untuk merancang sebuah aplikasi berbasis web yang bertujuan  agar  proses  transaksi  pembayaran  pada  Toko  AR Perfume  berjalan  lebih  cepat,  mudah,  dan  akurat  dengan memanfaatkan teknologi berbasis komputer. Metode pengumpulan  data  yang  digunakan  pada  penelitian  ini  adalah dengan  observasi  dan  wawancara  yang  dilakukan  secara langsung  ke  Toko  AR  Perfume.  Framework  yang  digunakan untuk  merancang  aplikasi  berbasis  pada  Toko  AR  Perfume adalah  UML  (Unified  Modelling  Language)  atau  yang  dikenal dengan  ICONIX  Process . Hasil  akhir  dari  penelitian  ini  yaitu berupa  desain  antarmuka  website  AR  Perfume  yang  nantinya akan dikembangkan pada tahapan implementasi.
Abstract. The development of internet technology in the world of  commerce  or  what  we  often  hear  as  e-commerce  is  now increasing. AR Perfume is a shop engaged in the sale of perfume. The AR Perfume store is located at Putat Gede Timur III No.56 Surabaya. The payment system that is made at this shop is still done manually, namely by the way the buyer comes to the store directly.  Manually,  of  course,  it  creates  a  lot  of  difficulties  for owners  in  data  processing  and  production  reports,  as  well  as
causing difficulties for buyers because they have to come directly to the store to queue. Given these problems, we plan to design a web-based application that aims to make the payment transaction process  at  the  AR  Perfume  Store  run  faster,  easier  and  more accurately  by  utilizing  computer-based  technology.  The  data collection  method  used  in  this  study  was  observation  and interviews  conducted  directly  at  the  AR  Perfume  Shop.  The framework used to design applications based on the AR Parfum Store is UML (Unified Modeling Language) or what is known as the ICONIX Process. The end result of this research is in the form of an AR Perfume  website interface design  which will later be developed at the implementation stage.

## 1. PENDAHULUAN
Pada  era  digitalisasi  saat  sekarang  ini, teknologi  berkembang  dengan  pesat  dan memiliki peranan penting dalam mempermudah hampir setiap kegiatan manusia termasuk dalam kegiatan berbisnis[1]. Sebagian besar dari masyarakat dunia ini sudah tidak ingin ketinggalan teknologi dan informasi. Sama halnya dengan cara masyarakat  melakukan  pembayaran  sebuah produk pada toko. Pemanfaatan perkembangan teknologi  internet  dalam  dunia  perdagangan atau  yang  lebih  dikenal  dengan  istilah e- commerce merupakan  suatu  langkah  besar yang  sangat  bermanfaat. E-commerce tidak hanya menyederhanakan proses sistem informasi penjualan dari yang manual menjadi terkomputerisasi, tetapi juga mengubah hubungan atau interaksi memesan, membayar, dan melihat produk bahkan dapat  mengetahui history  transaksi  kapanpun  dan  dimanapun. Parfum  merupakan  wewangian  dalam  bentuk bahan-bahan kimia olahan, dengan wewangian yang  dapat  membuat orang  menjadi  tertarik atau    merespon    di  sekitar  kita  dengan  cepat, dengan  parfum  ini  akan  membuat  situasi menjadi lebih menarik[2].
AR  Perfume  merupakan  suatu  badan usaha  yang  bergerak  di  bidang  penjualan parfum  (minyak  wangi).  Jumlah  parfum  di toko AR Perfume memiliki lebih dari 50 varian parfum  dengan  merek  yang  berbeda-beda. Harga  yang  ditawarkan  pun  juga  bervariasi
tergantung  merek  dan  jenisnya.  Untuk meningkatkan daya tahan aroma parfum (long lasting)  dilakukan  dengan  meningkatkan persentase  bibit  parfum  dalam  formulasi parfum  [3].  Adapun      dampak      dari      hal tersebut   yaitu banyaknya  waktu  dan  biaya transportasi  setiap harinya yang terpakai saat melakukan perekapan pengeluaran dan pemasukan[4].  Transaksi  yang  dilakukan setiap harinya dengan rata-rata dapat mencapai 20  pembeli  perhari  dengan  pendapatan  yang berbeda-beda.  Selama  ini,  sistem  informasi pada  Toko  AR  Perfume  masih  menggunakan sistem manual. Pengolahan data dan pembuatan laporan penjualan parfum tersebut masih  ditulis  manual  dengan  kertas  sehingga hal ini dirasakan kurang efektif karena pemilik seringkali mendapat hambatan dalam pencatatan transaksi penjualan hingga pembuatan  laporan[5].  Oleh  karena  itu  perlu dilakukan perubahan sehingga dapat mempermudah pengelolaan dan penyajian data transaksi  sehari-hari  yang  terjadi  di  AR Perfume.  Akan  tetapi,  saat  ini  pengertian tersebut  berkembang  menjadi  wangi-wangian yang berupa cairan atau minyak wangi [6].
Dalam  perancangannya,  website  pada Toko  AR  Perfume  menggunakan  metode ICONIX Process yang menggambarkan model perancangan  yang  telah  dibuat  menggunakan UML ( Unified Modeling Language. ICONIX Process merupakan proses yang dipicu oleh use case (use case driven). Pada ICONIX, use case
yang  ditentukan  sejak  awal  pengembangan menjadi  dasar  dalam  menentukan  model  dan perilaku  dari  sistem  yang  dibangun.  UML (Unified  Modeling  Language)  adalah  bahasa pemodelan untuk sistem atau perangkat lunak yang berparadigma ‘berorientasi objek” [7].
Berdasarkan  penjelasan  latar  belakang tersebut,  kami  membuat  jurnal  yang  berjudul “Analisis  dan  Desain  Aplikasi  Penjualan Berbasis  Web  AR  Perfume”  menggunakan metode yang sama dengan penelitian sebelumnya.  Tujuannya  untuk  memberikan gambaran  dalam  mengembangkan  website menggunakan UML untuk mendokumentasikan  proses-prosesnya  seperti domain  model,  use  case  diagram,  robustness diagram, sequence diagram dan class diagram dengan  hasil  akhir  berupa  desain  antarmuka website AR  PARFUME untuk  dikembangkan lebih  lanjut  pada  tahap  implementasi.  Untuk memperjelas  cakupan  permasalahan  dalam penelitian  ini  maka  penulis  memberikan batasan  masalah  bahwa  penelitian  ini    hanya terbatas    tidak    adanya    retur    produk,  untuk merancang  dan      membangun  aplikasi  yang dibutuhkan  oleh  client  dalam  hal  ini  pemilik AR PARFUME dengan berdasarkan requirement aplikasi yang diberikan[8].

## 2. TINJAUAN PUSTAKA

## 2.1.  Studi Literatur
Studi  literatur  adalah  serangkaian kegiatan  yang  berkenaan  dengan  metode pengumpulan  data  pustaka,  membaca  dan mencatat, serta mengelola bahan penelitian . Studi literatur menurut Roth (1986) adalah upaya peneliti mengumpulkan bahan-bahan dan informasi yang relevan untuk dilakukan pengkajian, dibaca, dicatat atau dimanfaatkan.
2.2.   Unified Modeling Language
UML (Unified Modelling Language) adalah  suatu  metode  dalam  pemodelan secara  visual  yang  digunakan  sebagai
sarana  perancangan  sistem  berorientasi objek.

## 2.3.   ICONIX Process
ICONIX  process  merupakan  metode perancangan  atau  pengembangan  yang mengacu  pada  use  case.  Use  case ditentukan  pada  awal  pengembangan  yang mana  menjadi  dasar  dalam  penentuan model dan perilaku dari sistem yang sedang dibangun (Rosernberg & Stephens, 2007).

## 3. METODE PENELITIAN
Metode  penelitian  pada  penelitian ini adalah menggunakan pendekatan ICONIX Process.  Metode ini menekankan pada  penggunaan  ikon  dan  simbol  untuk menyajikan informasi dan fitur-fitur dalam website secara visual yang mudah dipahami oleh pengguna. Perancangan sistem penjualan pada Toko AR Perfume dilakukan menggunakan metode penelitian seperti dibawah ini

## 3.1.   Studi Literatur
Metode  ini  dilakukan  dengan mengumpulkan  banyak  literatur  maupun referensi  seperti paper dari  terbitan  jurnal nasional  dan  referensi  dari  buku,  artikel, blog,  atau  video  tutorial  yang  dapat mendukung penelitian ini.

## 3.2.      Pengumpulan Data
Pada pengumpulan data yang dibutuhkan,  tentunya  kita  membutuhkan wawancara  dan  observasi  langsung  pada pemilik  toko,  sehingga  kita  dapat  menggali permasalahan  dari  sistem  yang  selama  ini sedang dilakukan.

## 3.3.      Analisis Kebutuhan
Analisis  kebutuhan  dilakukan  dengan mengidentifikasi  proses  bisnis  sesudah  dan sebelum diterapkannya sistem  informasi  yang juga diimplementasikan pada flowchart diagram.  Kemudian,  dilakukannya  analisis
dengan  menentukan  kebutuhan  fungsional. Hasil  dari  analisis  kebutuhan  fungsi  akan menjadi  referensi      pada      saat      merancang struktur, navigasi dan antarmuka [9].

## 3.4. Perancangan Sistem
Pada
perancangan
sistem, dilakukannya  juga  salah  satu  langkah  yaitu Analysis/Preliminary  Design yang  nantinya
akan menghasilkan diagram seperti Robustness  Diagram,  Sequence Diagram,  dan Class Diagram. Selain itu, akan menghasilkan juga  analisis  seperti  GUI,  Domain  Modeling, dan juga Use Case. Setelah melalui rancangan sistem,  maka  tahapan  selanjutnya  yaitu  fase implementasi.
4. HASIL DAN PEMBAHASAN
Pada tahapan ini hasil dan pembahasan  menjelaskan  bagaimana  dari hasil  perancangan  UML  [10]  dengan menggunakan  pendekatan  Iconix  Process yang terdiri dari beberapa tahapan yaitu use case, robustness diagram, sequence diagram dan class diagram.

## 4.1.    Flowchart
Pada tahap ini, Flowchart digunakan sebagai  perbandingan  antara  alur  proses bisnis lama dan baru.  Perbandingan sistem lama dan baru berada pada sistem aplikasi, pada sistem lama pelanggan harus membeli parfum secara langsung datang ke toko hal ini membuat pelanggan kadang malas untuk membeli.  Sistem  pembayaran  pada  sistem lama memungkinksn antrean yang panjang karena  pemilik  harus  mencarikan  uang kembalian  jika  uang  pelanggan  besar. Sedangkan  pada  sistem  baru  terdapat aplikasi  dimana  pembeli  dapat  membeli parfum melalui aplikasi ar parfum membuat waktu  pelanggan  dan  pemilik  toko  lebih mudah  melayani.  Sistem  pembayaran online lebih cepat dan terjamin keamanannya  karena  melewati  m-banking atau e-wallet.
Gambar 1. Flowchart Sistem Lama

## Gambar 2. Flowchart Sistem Baru

## 4.2.     GUI
Gambar  3  merupakan  tampilan  dari beranda  atau  home.  Pada  tampilan  Home terdapat  4  fitur  yaitu  Fitur  Profile  Account, About  Us,  Contact  Us  dan  Shop  Now.  Pada pojok kiri terdapat logo dari Toko AR Parfume. Sedangkan  pada  pojok  kanan  atas,  terdapat button keranjang belanja. Pada tampilan Home ini,  terdapat  tampilan  bertuliskan  “New Arrivals Just For You” serta terdapat tampilan penawaran diskon. Kemudian pengguna dapat menekan  tombol  kiri  maupun  kanan  pada bawah  tampilan  foto,  untuk  melihat  tampilan
produk  yang  dijual  oleh  Toko  AR  Parfume. Sedangkan  pada  Gambar  4  merupakan tampilan  dari  halaman  pembayaran.  Pada halaman  ini,  pelanggan  melakukan  proses checkout,  kemudian  pelanggan  diberikan beberapa metode pembayaran dan selanjutnya dapat mengisikan nama, alamat tujuan barang dan  no  telepon.Setelah  itu  pelanggan  meng- klik  button  “Bayar”.  Kemudian  pada  bagian kanan  terdapat  Order  Summary  yang  berisi pesanan  apa  saja  yang  telah  dipilih  oleh pelanggan.  Pada  Order  Summary  berisi  nama produk  yang  akan  dibeli,  jumlah  produk beserta harganya dan  metode apa yang dipilih oleh  pelanggan  dan  total  harga  keseluruhan dari produk yang dibeli.

## Gambar 3. Tampilan Home AR Parfume
Gambar 4. Tampilan Halaman Pembayaran
4.3.    Domain Model Domain model digunakan untuk menggambarkan  alur  kerja  objek  secara  riil dari  satu  item  ke  item  lainnya  menggunakan relasi  agregasi  atau  generalisasi.  Oleh  karena itu,  domain  model  sangat  dibutuhkan  dalam
perancangan sebuah aplikasi untuk menjelaskan alur kerja program kepada klien, sehingga  bahasa  yang  digunakan  dalam domain  model  merupakan  bahasa  sederhana tanpa  unsur  bahasa  pemrograman.  Tujuannya adalah agar dapat mudah dipahami oleh klien. Gambar  5  menunjukkan  domain  model  dari AR  Perfume  yang  digambar  menggunakan StarUML yang terdiri dari beberapa objek yang terdiri  dari  akun  pelanggan,  login,  laporan pembelian, laporan pengiriman barang, update barang,  update  stok,  master  data  barang, pemesanan  barang,  kategori  barang,  hasil pencarian produk, hapus barang, ubah barang, keranjang  belanja,  pemesanan  barang,  daftar account, transaksi, pembayaran, e-wallet, cod, transfer  bank,  laporan  transaksi  pembelian, laporan  pembelian,  data  pemesanan  barang, barang  pesanan,  laporan  pengiriman  barang, pengiriman  barang,  nama  pelanggan,  alamat pengiriman.  Pada  entitas  transaksi  memiliki relasi has a yang artinya memiliki atribut dan komponen berupa pembayaran, laporan transaksi.

## Gambar 5. Alur Domain Model AR Perfume

## 4.4.    Use Case Diagram
Use Case Diagram yang kami rancang memiliki  3 actor yang  meliputi  Admin, Pemilik  dan  Pelanggan.  Setiap actor tersebut bisa  melakukan  Login.  Pertama  -  tama  akan kami  jelaskan action apa  saja  yang  dapat dilakukan oleh Admin. Admin dapat melakukan action Konfirmasi  yang  meliputi action Konfirmasi  Pesanan  dan action Konfirmasi Pembayaran. Jadi sebelum pesanan dan  pembayaran  berhasil,  diperlukan  adanya konfirmasi dari Admin.
Kedua  yaitu actor Pemilik.  Pemilik dapat  melakukan action Mengubah  Stok  dan dapat melihat Laporan Transaksi. Actor ketiga yaitu  Pelanggan.  Pelanggan  dapat  melakukan action Memilih  Barang,  Melihat  Pesanan  dan Pembayaran.  Antara action Memilih  Barang dan action Melihat Pesanan saling ter- include . Kemudian, antara action Melihat Pesanan dan action Pembayaran  saling  ter- extend .  Ketiga action tersebut  terdapat include dan extend karena  saling  berkaitan  satu  sama  lain.  Lalu action Login juga include dengan ketiga action tersebut  (Memilih  Barang,  Melihat  Pesanan dan Pembayaran).

## Gambar 6. Use Case dari AR Perfume

## 4.5.    Robustness Diagram
Pada halaman produk, pelanggan akan klik  produk  dan  klik  checkout  untuk melakukan pembelian, setelah itu akan masuk ke  homepage  pemesanan  yang  terdapat  data pelanggan  dan  data  pesanan.  Terdapat alternate  flow apabila  pelanggan  yang  tidak membeli  akan  keluar  dari  halaman  produk menuju homepage utama.
Gambar 7.  Robustness Diagram dari
AR Perfume

## 4.6.    Sequence Diagram
Sequence Diagram diambil dari Robustness Diagram yang telah dibuat di fase sebelumnya. Sequence  Diagram berbentuk class  objek  yang  nantinya  akan  diterapkan ketika  pemrograman  dijalankan.  Dengan adanya Sequence  Diagram akan  tergambar secara detail bagaimana use case diimplementasikan  dan  bagaimana  perilaku setiap class dialokasikan. Gambar 8 menampilkan Sequence  Diagram pemesanan ( order  product ).  Pertama  Pelanggan  akan diarahkan pada Halaman Pembayaran. Kemudian  muncul  total  harga  yang  harus dibayar  oleh  Pelanggan.  Pelanggan  bisa Memilih Metode Pembayaran, bisa menggunakan E-Wallet,  QR  Code dll.  Lalu tahap  selanjutnya  adalah  Memasukkan  Pin. Data  transaksi  pembayaran  nantinya  akan Dikirim  ke  dalam  sistem,  kemudian  di Verifikasi  terlebih  dahulu.  Apabila  sudah sesuai,  maka  Pembayaran  Berhasil  dan Pelanggan akan diberi Tampilan Nota Pesanan ( Invoice ).

## Gambar 8. Sequence Diagram dari AR Perfume
4.1.    Class Diagram
Class  diagram  pada  AR  Perfume terdapat  12  kelas  yang  terdiri  dari  kelas customer  account,  akun  google,  akun facebook,  transaksi,  pembayaran,  laporan pengiriman  produk,  riwayat  transaksi, keranjang belanja, produk, list produk, stok produk  dan  admin.  Setiap  kelas  terdapat
atribut  dan  operasi  tetapi  ada  yang  tidak menggunakan  atribut  dan  operasi  seperti pada Gambar 9.

## Gambar 9. Class Diagram dari AR Perfume

## 5. KESIMPULAN
Berdasarkan  pembahasan  dan  uraian pada bab - bab sebelumnya kami menyimpulkan  bahwa  dengan  website  ini maka dapat membantu proses bisnis AR Store lebih  cepat  dan  efisien  dalam  melakukan transaksi  penjualan  yang  dapat  dilakukan dengan  lebih  cepat  dan  dapat  membantu  toko dalam  mengolah  data  penjualan  secara  online dengan  sistem  informasi.  Selain  itu,  dengan adanya  website  penjualan  AR  Store,  website ini  dapat  mengurangi  biaya  operasional  dan memberikan  kemudahan  bagi  AR  Store  dan pembeli,  dimana  proses  penjualan  dan  rekap laporan  lebih  cepat  dan  efisien  karena  telah terkomputerisasi  serta  sisa  stok  akan  terlihat secara  realtime  dan  pembeli  tanpa  harus melakukan  pembelian  secara  langsung  dan mengantri dalam proses pemesanan.

## UCAPAN TERIMA KASIH
Penulis  mengucapkan  terima  kasih kepada  dosen  dan  teman-teman  dari Fakultas Ilmu Komputer khususnya pemilik dari  Toko  AR  Perfume  atas  bantuannya untuk melakukan penelitian tentang “Rancang Aplikasi Penjualan Berbasis Web
Toko  AR  Perfume  Dengan  Metode ICONIX Process”.

## DAFTAR PUSTAKA
[1]   Riyan, Meidia Putra (2018) Perancangan  Aplikasi  Transaksi  dan Pembayaran  Parfum  Berbasis  Web dengan  Fitur  Mobile  Menggunakan Teknologi  QR  Code  (Studi  Kasus Azwa  Parfum  Padang).  Diploma thesis, Universitas Andalas. [2]   Andika,  Alfanda,  dan  Febsri  Susanti. “Pengaruh  Marketing  Mix  Terhadap Parfum Lubeg Padang Alfanda
Andika, Febsri Susanti.” : 1–13.
[3]   Parekhan  M,  Aljaff,  Emad  M,  Banaz O, & Rasheed. 2013. Identification of synthetic  perfume  by  infrared  and optical  properties.  J  Pure  App  Chem Sci 1(1): 19 – 30
[4]   Rozy, F., Amalia, F., & Wihandika, R. Pengembangan Sistem Informasi
Manajemen  dan  Prediksi  Permintaan
Pemesanan  Bibit  Parfum  Pada  Toko Blossom  Perfume  Berbasis  Web.
Jurnal Pengembangan Teknologi Informasi dan  Ilmu Komputer, vol.  5, no. 6, p. 2090-2097, mei 2021.
[5]   Hasanah, U. (2013). Sistem  Informasi Penjualan On_Line Pada Toko Kreatif Suncom  Pacitan.  IJNS  Indonesian Journal  on  Networking  and  Security, 4(3).
[6]   Ulfiana, “Satuan Ekspresi Pengungkap Aroma pada Parfum,” Tesis, Program Studi Linguistik, Fakultas Ilmu Budaya,  Universitas  Gadjah  Mada, 2015.
[7]  A.  Nugroho,  Rekayasa  Perangkat Lunak Menggunakan UML dan JAVA. Yogyakarta: Andi, 2009.
[8]  D. Jailani and H. Patrie, “Analisa Dan
Rancangan Sistem Informasi Penjualan Parfum Berbasis E-
Commerce Pada Toko Seruni Parfum”,
Idealis, vol. 2, no. 5, pp. 98-105, Sep. 2019.
[9]  Yaddarabullah,  Y.,  Agusalim,  L.,  & Karim,  M.  (2018).  Pengembangan
Aplikasi Web Pemetaan Perkembangan  Koperasi  di  Indonesia Berbasis  Web  Modeling  Language.
Jurnal KomtekInfo, 5(2), 1–10
[10] RosenBerg, Dooug. and Kendall Scott, Applying  Use  case  Driven  Object Modelling  with  UML:  An  Annotated E-Commerce Example, Addison Wesley, 2001.