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

## PERANCANGAN APLIKASI POINT OF SALES BERBASIS WEB PADA KEDAI BOXKING RICEBOX

## WEB BASED POINT OF SALES APPLICATION DESIGN AT BOXKING RICEBOX
Abdurrahman Al Harits 1 , Ery Dewayani 2 1,2 Universitas Tarumanagara abdurrahman.825190102@stu.untar.ac.id

## ABSTRACT
The  development  and  application  of  technology  has  now  penetrated  into  various  sectors  of  life,  including  the business sector. The use of Point of Sale (POS) applications in business operations can help the sales transaction process in a business. Boxking Ricebox is a business engaged in the food sector. Currently, Boxking Ricebox still applies manual methods in the transaction process, causing the risk of recording transaction errors. This research aims to create a Point of Sale application that will make it easier for the owner to record transactions and manage stock items. The Waterfall method was chosen as the application design method in this study. As for the technology used in the development of this application is ReactJS for the frontend side, Express for the backend side, and MongoDB as the database.

## Keywords: Point of Sale, React JS, Waterfall

## ABSTRAK
Perkembangan  dan  penerapan  teknologi  kini  telah  merambah  ke  berbagai  sektor  kehidupan,  termasuk  sektor bisnis.  Penggunaan  aplikasi  Point  of  Sale  (POS)  dalam  operasional  bisnis  dapat  membantu  proses  transaksi penjualan dalam suatu bisnis. Boxking Ricebox merupakan sebuah bisnis yang bergerak dibidang makanan. Saat ini  Boxking  Ricebox  masih  menerapkan  cara  manual  dalam  proses  transaksinya  sehingga  menimbulkan  risiko kesalahan  pencatatan  transaksi.  Penelitian  ini  bertujuan  untuk  membuat  aplikasi  Point  of  Sale  yang  akan memudahkan pemiliknya dalam mencatat transaksi dan mengelola stok barang. Metode Waterfall dipilih sebagai metode  perancangan  aplikasi  pada  penelitian  ini.  Adapun  teknologi  yang  digunakan  dalam  pengembangan aplikasi ini adalah ReactJS untuk sisi frontend, Express untuk sisi backend, dan MongoDB sebagai databasenya.
Kata Kunci : Point of Sale, React JS, Waterfall

## PENDAHULUAN
Boxking  Ricebox  adalah  sebuah Usaha  Mikro  Kecil  dan  Menengah (UMKM)  yang  bergerak  di  bidang makanan  khususnya  makanan  cepat  saji. Menu utama yang ditawarkan oleh Boxking Ricebox  adalah  ricebox,  makanan  berisi nasi  dan  lauk  yang  dikemas  dalam  karton kotak  kecil  agar  mudah  dibawa  dan dikonsumsi dimana saja. Boxking Ricebox sendiri baru beroperasi selama kurang lebih 12  bulan.  Sebagai  bisnis  yang  terhitung baru  dalam  menjalani  usaha,  Boxking Ricebox  belum  sepenuhnya  menerapkan penggunaan  teknologi  dalam  operasional bisnis  mereka  sehingga  seringkali  ditemui kendala karena proses pencatatan transaksi dan produk masih dilakukan secara manual. Kendala  tersebut  biasanya  berupa  salah dalam  penulisah  harga,  tulisan  yang  sulit
terbaca, dan hilang atau rusaknya dokumen penting.  Penggunaan  teknologi  pada  suatu bisnis  dapat  memberikan  efektifitas  dan kemudahan.  Hal  itu  sejalan  dengan penelitian yang dilakukan oleh (Ashshidiqy & Ali, 2019) dan (Dede et al., 2021) dapat disimpulkan  bahwa  penggunaan  teknologi menjadi cara efektif bagi sebuah bisnis agar tetap  berjalan  dan  bisa  berkembang  serta memudahkan  dalam  melakukan  kontrol terhadap suatu bisnis.
Maka  dari  itu,  sebuah  program aplikasi point  of  sale yang  membantu proses pencatatan transaksi dan pengelolaan produk dapat sangat membantu  kegiatan  operasional  Boxking Ricebox  terutama  pada  bagian  pencatatan. Menurut (Bawa Wahyudi et al., 2018) dan (Sandi & Septiana, 2021), dapat disimpulkan  bahwa point  of  sale adalah
sebuah sistem yang memungkinkan dilakukan  suatu  layanan  transaksi  dan penggunaan
mesin kasir seperti perhitungan harga yang harus dibayar oleh pelanggan,  mencetak  faktur  pembelian untuk  pelanggan,  dan  memberikan  pilihan metode  pembayaran  bagi  pelanggan. Menurut  (Kurniawan  &  Karyanto,  2017), aplikasi point  of  sale terbilang  penting karena  mencatat  pembayaran  yang  masuk sehingga  menjadi  indikator  bagi  suatu bisnis untuk mengukur tingkat pendapatan.

## METODE

## Metode Pengembangan Sistem
Metode pengembangan program yang  digunakan  pada  penelitian  ini  adalah metode waterfall . Menurut (Irwanto, 2021), metode waterfall adalah cara pengembangan  yang  berpengaruh  secara berurutan  lewat  tahap  kebutuhan,  desain, pembuatan  kode,  pengujian  program,  dan bagian  pendukung  lainnya.  Tahap  –  tahap dalam  metode waterfall adalah  sebagai berikut :
Gambar 1. Metode Waterfall Sumber : https://jurnal .uts.ac.id/public/journals/12/sub mission_2008_1863_coverImage_en_US.png
1. Analisis Kebutuhan Pada  tahap  ini,  seluruh  informasi mengenai  kebutuhan  yang  diinginkan oleh pengguna
dikumpulkan.
Pengumpulan informasi dilakukan
dengan  cara  wawancara,  survey,  atau diskusi  kepada  objek  penelitian,  dalam hal  ini  adalah  pemilik  dari  Boxking Ricebox.
2. Desain Sistem Tahap design bertujuan untuk memberikan gambaran lengkap mengenai  tentang  apa  yang  harus dikerjakan  dan  bagaimana  sebuah
Aplikasi yang diinginkan. Pada tahap ini dirancang pemodelan Unified Modelling Language (UML).
3. Pembuatan Kode Tahapan ini dilakukan dengan melakukan penulisan baris – baris kode program  dengan  menggunakan  Bahasa pemrograman  yang  sudah  ditentukan, yaitu  Javascript  dan  didukung  oleh framework ReactJs dan Express.
4. Pengujian Pada  tahap  ini  dilakukan  instalasi  dan pengujian  oleh  pihak  Boxking  Ricebox apakah  aplikasi  yang  dibuat  sudah memenuhi  kriteria  atau  belum.  Jika terdapat  kekurangan  akan  diperbaiki sebelum masuk ke tahap berikutnya.
5. Operasi dan Pemeliharaan Tahap operasi dan pemeliharaan dimulai ketika  aplikasi  sudah  diserahkan  ke pihak  Boxking  Ricebox  dan  mulai dioperasikan. Ketika pada tahap operasi masih terdapat error pada program maka akan dilakukan perbaikan dan pemeliharaan kode program tersebut.

## Metode Pengumpulan Data
Dalam  proses  penelitian  ini,  tahap pengumpulan data diambil melalui beberapa metode, antara lain :
1. Observasi Pengumpulan  data  dengan  metode observasi  dilakukan  dengan  mengamati langsung proses bisnis yang terjadi pada Kedai Boxking Ricebox.
2. Wawancara Metode  wawancara  dilakukan  dengan proses tanya jawab dengan pemilik dan karyawan  dari  Kedai  Boxking  Ricebox untuk mendapatkan data yang diinginkan.
3. Studi Pustaka Pada  metode  studi  pustaka,  penulis mengumpulkan referensi terkait melalui sumber  –  sumber  ilmiah  seperti  jurnal, literatur, dan sumber lainnya

## HASIL DAN PEMBAHASAN
Kebutuhan Perangkat
Kebutuhan perangkat minimum yang harus  dipenuhi  agar  aplikasi  ini  bisa berjalan adalah sebagai berikut:
A. Perangkat Keras
1. Processor dual core
2. Memory RAM 8GB
3. Storage 128GB
4. Jaringan Internet
5. Layar monitor
6. Keyboard
7. Mouse atau touchpad
B. Perangkat Lunak
1. Sistem operasi 64 bit
Sistem  operasi  berperan  sebagai suatu perangkat lunak yang menghubungkan  pengguna,  aplikasi perangkat  komputer,  dan  perangkat keras (Yulianto & Maulani, 2018).
2. Node JS Node  JS  adalah  sebuah  platform perangkat  lunak  berbasis  javascript dengan  tingkat  skalabilitas  yang tinggi  dan  dapat  menjalankan  kode javascript diluar web browser (Nurhayati & Agussalim, 2023).
3. Web browser Web  browser  atau  peramban  web adalah  sebuah  perangkat  lunak  yang dipakai  untuk  menjelajahi  internet (Abdiati et al., 2021).

## Desain Database
Berikut  ini  adalah  desain  database berupa entity  relationship  diagram yang dibuat dengan pendekatan entity relationship modelling . Entity relationship diagram adalah  sebuah  model  konseptual kelas  tinggi  yang  memuat  informasi mengenai  entitas,  atribut,  relasi,  dan Batasan (Rufus et al., 2019). Entitas adalah data  yang  memiliki  nama  dan  digunakan sebagai identifikasi dari data, atribut adalah jenis  informasi  dari  sebuah  entitas,  dan relasi  adalah  sesuatu  yang  menyatukan antar entitas  (Dewayani & Wasino, 2021). Entity relationship modelling sendiri adalah suatu  pendekatan  untuk  mendesain  basis data  yang  dimulai  dengan  melakukan identifikasi  terhadap  data  penting  yang disebut  entitas,  lalu  menggambarkan
hubungan antara satu entitas dengan entitas lainnya (Anisah, 2019). Entity relationship diagram ditunjukkan pada gambar berikut :

## Gambar 2. Entity Relationship Diagram
Terdapat  9  entitas  yaitu user, customer,  product,  category,  subcategory, order, order detail, payment, dan payment method . Adanya desain database pada suatu sistem akan mempermudah proses pengembangan
sehingga dapat memecahkan  permasalahan  yang  ada (Anisah & Mayasari, 2016).

## Desain Sistem
Berikut  ini  adalah  rancangan  desain system  menggunakan use  case  diagram .
Use  case  diagram adalah  diagram  yang digunakan  untuk  mengidentifikasi  fungsi- fungsi  yang  ada  dan  aktor-aktor  yang berhak  menggunakannya  dalam  suatu informasi.  Setiap use  case menjelaskan peran  aktor  dan  respon  terhadap  interaksi yang  dilakukan  oleh  aktor  menggunakan deskripsi use  case .  Deskripsi use  case adalah  deskripsi  yang  menangkap  detail pemrosesan  suatu use  case (Pradika  et  al., 2022). Use case diagram ditunjukkan pada Gambar 3.
Terdapat 2 aktor pada diagram diatas, yaitu owner dan user . Owner adalah pemilik  dari  Kedai  Boxking  Ricebox  dan dapat  mengakses  menu  laporan  penjualan dan data pelanggan.  Sedangkan aktor user adalah karyawan dan bisa mengekses menu transaksi dan pengelolaan produk, kategori, subkategori, serta metode bayar.

## Implementasi Antarmuka
1. Halaman Login Halaman Login adalah halaman pertama yang  dapat  diakses  untuk  memasukkan username dan password .  Terdapat validasi form jika data yang dimasukkan tidak sesuai.

## Gambar 4. Halaman Login
2. Halaman Register
User yang belum terdaftar pada database bisa  mendaftar  pada  halaman  register dengan  memasukkan username , email , password , dan posisi user .
Gambar 5. Halaman Register 3. Halaman Beranda Halaman  beranda  adalah  halaman  yang muncul  setelah  login  bagi  aktor user .
Pada  halaman  ini  user  bisa  melakukan input order dengan memasukkan produk ke keranjang belanja.
Gambar 6. Halaman Beranda 4. Halaman Kelola Produk
Kegiatan Kelola produk seperti tambah, edit,  dan  hapus  dapat  dilakukan  pada halaman  ini,  serta  terdapat  list  produk yang  sudah  terdaftar.  Halaman  kelola produk hanya dapat diakses aktor user .
Gambar 7. Halaman Kelola Produk 5. Halaman Kelola Kategori dan Subkategori Kegiatan Kelola Kategori dan Subkategori  seperti  tambah,  edit,  dan hapus dapat dilakukan pada halaman ini,
serta terdapat list katetgori dan subkategori yang sudah terdaftar. Halaman kelola kategori dan subkategori  hanya  dapat  diakses  aktor user .
Gambar 8. Halaman Kelola Kategori dan Subkategori
6. Halaman Kelola Metode Bayar Kegiatan  Kelola  metode  pembayaran seperti  tambah,  edit,  dan  hapus  dapat dilakukan  pada  halaman  ini.  Halaman kelola metode pembayaran hanya dapat diakses aktor user .

## Gambar 9. Halaman Kelola Metode
Bayar
7. Halaman Laporan Penjualan
Pada  Halaman  Laporan  Penjualan terdapat  1221tatistic  penjualan  seperti jumlah order, jumlah pelanggan, jumlah pemasukan, dan produk terlaris.
Terdapat  pula  data  penjualan.  Halaman ini hanya bisa diakses oleh aktor owner .
Gambar 10. Halaman Laporan Penjualan
8. Halaman Data Pelanggan Halaman  ini  menampilkan  data  –  data pelanggan yang sudah pernah melakukan  pembelian.  Halaman  Data
Pelanggan hanya bisa diakses oleh aktor owner .

## Gambar 11. Halaman Data Pelanggan

## Pengujian Sistem
Berikut  ini  adalah  hasil  pengujian terhadap system yang sudah dibuat. Metode pengujian yang digunakan adalah black box testing . Black  box  testing disebut  juga functional testing karena tidak memerlukan akses  ke  kode  program  (Wasino  et  al., 2022). Terdapat 15 skenario pada pengujian ini. Hasil pengujian dapat dilihat pada tabel berikut :
Tabel 1. Hasil Pengujian Scenari o Steps Expected Result Status Login Mengisi username dan password Menampilka n halaman utama sesuai role Pass
Register Mengisi username, email, password, dan posisi Data tersimpan dan menampilka n halaman login Pass Input Order Memilih produk, input customer dan pilih metode bayar Data tersimpan dan menampilka n struk belanja Pass Input Produk Mengisi nama, harga, deskripsi, kategori, subkategori dan gambar produk Data tersimpan dan tabel produk terupdate Pass Edit Produk Mengganti data produk yang ingin di update Data terbarui dan tabel produk terupdate Pass Hapus Produk Memilih produk dan klik tombol Hapus Data terhapus dan tabel produk terupdate Pass Input Sub kategori Mengisi nama, deskripsi, dan kategori, dari subkategori Data tersimpan dan tabel sub kategori terupdate Pass Edit Sub kategori Mengganti data subkategori yang ingin diupdate Data terbarui dan tabel sub kategori terupdate Pass Hapus Sub kategori Memilih Subkategori dan klik tombol Hapus Data terhapus dan tabel sub kategori terupdate Pass Input Kategori Mengisi nama dan deskripsi dari kategori Data tersimpan dan tabel kategori terupdate Pass Edit Kategori Mengganti data kategori yang ingin diupdate Data terbarui dan tabel kategori terupdate Pass Hapus Kategori Memilih kategori dan klik tombol Hapus Data terhapus dan tabel kategori terupdate Pass
Input Metode Bayar Mengisi nama dan deskripsi dari metode bayar Data tersimpan dan tabel metoda bayar terupdate Pass Edit Metode Bayar Mengganti data metode bayar yang ingin diupdate Data terbarui dan tabel metode bayar terupdate Pass Hapus Metode Bayar Memilih metode bayar dan klik tombol Hapus Data terhapus dan tabel metode bayar terupdate Pass Tampilk an Laporan Klik menu laporan Menampilka n data dan statistik penjualan Pass Tampilk an Data Custom er Klik menu customer Menampilka n data customer Pass

## SIMPULAN
Berdasarkan pembahasan diatas, dapat diuraikan kesimpulan dari pengembangan  aplikasi point  of  sale berbasis web adalah sebagai berikut:
1. Saat  ini  fitur  –  fitur  yang  tersedia  baru berupa fitur dasar, kedepannya mungkin akan  ditambahkan  fitur  baru  sesuai dengan kebutuhan yang ada.
2. Tampilan  aplikasi  masih  terbilang sederhana, kedepannya bisa dipercantik dengan tampilan baru tanpa mengurangi fungsi yang ada.
3. Validasi saat input form dilakukan disisi client , akan lebih aman jika dilakukan di sisi server.
4. Aplikasi  ini  berjalan  di web  browser , bisa  dikembangan  menjadi  aplikasi mobile jika memang diperlukan.
5. Dengan  adanya  sistem point  of  sale ,
mempermudah  proses  pencatatan  dan pengelolaan  stok  barang  pada  Boxking Ricebox. Serta meminimalisir kesalahan –  kesalahan  yang  terjadi  pada  proses pencatatan manual.

## DAFTAR PUSTAKA
Abdiati,  A.  D.,  Setiawan,  S.,  &  Supendar, H.  (2021).  Pemilihan  Web  Browser Pada  Mobile  Menggunakan  Metode Analytical  Hierachy  Process. Jurnal Infortech , 3 (1), 26–32. https://doi.org/10.31294/infortech.v3
i1.10298
Anisah, A. (2019). Desain Sistem Informasi Administrasi  Bimbingan  Konseling Pada  SMA  Negeri  1  Tempilang Dedngan  Model  FAST. Jurnal
Sisfokom  (Sistem  Informasi  Dan
Komputer) , 8 (1), 92–97. https://doi.org/10.32736/sisfokom.v8
i1.613
Anisah,  A.,  &  Mayasari,  M.  S.  (2016). Desain  Database  Sistem  Informasi Penerimaan Peserta Didik Baru Pada Selective  English  Course. Simetris :
Jurnal  Teknik  Mesin,  Elektro  Dan Ilmu Komputer , 7 (1), 183. https://doi.org/10.24176/simet.v7i1.5 03 Ashshidiqy,  N.,  &  Ali,  H.  (2019). Penyelarasan  Teknologi  Informasi dengan Strategi Bisnis. Jurnal Ekonomi Manajemen Sistem Informasi , 1 (1), 51–59. https://doi.org/10.31933/jemsi.v1i1.4
6
Bawa Wahyudi, I. K. A., Widana Putra, I. G.  N.  A.,  &  Datya,  A.  I.  (2018). Aplikasi  Penjualan  Point  Of  Sale (POS)  Menggunakan  Barcode  Pada Koperasi  Bina  Kasih  Sejahtera Berbasis  Desktop  Dengan  Metode First  In  First  Out  (FIFO). Jurnal Teknologi  Informasi  Dan  Komputer ,
3 (2), 150–158.
https://doi.org/10.36002/jutik.v3i2.2 92
Dede, T., Andrian, M. A. W., & Hikmah, R. (2021).  Rancang  Bangun  Sistem Point  Of  Sales  (POS)  Berbasis  Web Pada  CV  Ego  Motorsport. Semnas Ristek , 5 (1), 1052–1056. Dewayani,  E.,  &  Wasino,  W.  (2021). Pemodelan  Data  Dalam  Pelestarian Warisan Budaya Takbenda.

## Computatio :  Journal  of  Computer
Science  and  Information  Systems , 4 (2),
136.
https://doi.org/10.24912/computatio. v4i2.10702
Irwanto,  I.  (2021).  Perancangan  Sistem Informasi  Sekolah  Kejuruan  dengan Menggunakan Metode Waterfall (Studi  Kasus  SMK  PGRI  1  Kota
Serang-Banten). Lectura :  Jurnal Pendidikan , 12 (1), 86–107.
https://doi.org/10.31849/lectura.v12i
1.6093
Kurniawan, A., & Karyanto, N. W. (2017). Sistem Informasi Point Of Sale (POS) Pada  Rumah  Makan  Berkah  Illahi.
Melek IT , 3 (2), 27–34.
Nurhayati,  E.,  &  Agussalim,  A.  (2023).
Rancang Bangun Back-end API pada
Aplikasi Mobile AyamHub Menggunakan  Framework  Node  JS Express. Jurnal Sistem Dan Teknologi  Informasi  (JustIN) , 11 (3), 524. https://doi.org/10.26418/justin.v11i3. 66823 Pradika,  D.  I.,  Hutabarat,  D.  W.  H.,  &
Irwansyah,  Z.  (2022).  Rancangan Aplikasi Layanan Aspirasi Masyarakat  Berbasis  Web  di  Dinas Komunikasi dan Informatika Provinsi
Sumatera Utara. Journal of Computer Science and Informatics Engineering
(CoSIE) , 1 (1), 1–9. https://doi.org/10.55537/cosie.v1i1.1 4
Rufus,  T.,  Wasino,  W.,  Dewayani,  E.,  &
Pragantha, J. (2019). Sistem
Informasi  Eksekutif  Penyimpanan Dokumen  Online  Untuk  Sistem Penjaminan  Mutu  Internal  Studi Kasus  Fakultas  Teknologi  Informasi Universitas Tarumanagara.
Computatio :  Journal  of  Computer
Science  and  Information  Systems , 3 (2),
153.
https://doi.org/10.24912/computatio. v3i2.6046 Sandi,  F.  A.,  &  Septiana,  L.  (2021). Perancangan  Sistem  Informasi  Point
Of  Sales  Berbasis  Web  Pada
Perusahaan
Sablon. Computer Science  (CO-SCIENCE) , 1 (2),  123– 130. https://doi.org/10.31294/coscience.v
1i2.267 Wasino,  Herwindiati,  D.  E.,  &  Maupa,  H. (2022). The Effects of Tourism Web Development on Prospective Travelers by Considering Persuasive and  Liking  Principles. International Journal  of  Social  Science  and Business , 6 (4), 574–584. https://doi.org/10.23887/ijssb.v6i4.4 9498 Yulianto,  E.,  &  Maulani,  G.  A.  F.  (2018). Simulasi  Pembelajaran  Concurrency Pada  Mata  Kuliah  Sistem  Operasi Berbasis Multimedia. JURNAL PETIK , 4 (2), 149–151. https://doi.org/10.31980/jpetik.v4i2. 377