INNOVATIVE: Journal Of Social Science Research Volume 4 Nomor 3 Tahun 2024 Page 17918-17928 E-ISSN 2807-4238 and P-ISSN 2807-4246
Website: https://j-innovative.org/index.php/Innovative

## Penerapan React.Js dalam Perancangan Sistem Coffee Shop Berbasis Web
Malisa Huzaifa 1 ✉ , Rizki Elisa Nalawati 2 , Noorlela Marcheta 3 , Muhammad Fadhilah 4
Politeknik Negeri Jakarta
Email : Malisa.huzaifa@tik.pnj.ac.id 1 ✉
Abstrak
Perkembangan  teknologi  yang  sangat  pesat  telah  memberikan  dampak  positif  pada  aspek  kehidupan. Banyak teknologi informasi yang digunakan sebagai alat bantu dalam memenuhi kebutuhan. Salah satu yang memanfaatkan teknologi ini adalah coffee shop. X Coffee Co merupakan sebuah coffee shop yang masih mengalami kendalan dalam pencatatan data pemasukan dan sistem pemesanan. Coffee shope ini masih  menggunakan  sistem  manual  dalam  proses  pendataan  pemasukan  toko.  Selain  itu  untuk pemesanan  masih  dilakukan  manual  ke  kasir  sehingga  ketika  jam-jam  sibuk  akan  memperlambat performa dari coffee shop ini. Pada penelitian ini akan membuat sebuah sistem yang berbasis web untuk mengelola  data  pemasukan  dan  pemesan  pelanggan  dengan  memanfaatkan  React.JS.  Pada pengembangan  sistem  penelitian  ini  akan  menggunakan  metode waterfall    dan  Unified  Modeling Language  (UML)  untuk  mendesain  alur  sistem.  Hasil  yang  diperoleh  dari  pengujian  black-box  testing diperoleh  100%  sistem  bisa  berjalan  dengan  baik  dan  82.47%  dari  pengujian User  Acceptance  Testing (UAT).
Kata Kunci: React.js, coffee shop, website, waterfall

## Abstract
The  rapid  development  of  technology  has  had  a  positive  impact  on  aspects  of  life.  Many  information technologies are used as tools to fulfill needs. One that utilizes this technology is a coffee shop. X Coffee Co is a coffee shop that is still experiencing obstacles in recording income data and ordering systems. This coffee shop still uses a manual system in the process of recording shop income. In addition, ordering is still done manually to the cashier so that during peak hours it will slow down the performance of this coffee shop. In this research, we will create a web-based system to manage revenue data and customer orders by utilizing React.JS. In the development of this research system will use the waterfall method and Unified Modeling Language (UML) to design the system flow. The results obtained from black-box testing obtained 100% of the system can run well and 82.47% from User Acceptance Testing (UAT) testing.
Keyword: React.js, coffee shop, website, waterfall

## PENDAHULUAN
Perkembangan  teknologi  yang  sangat  pesat  telah  memberikan  dampak  positif pada  aspek  kehidupan  (Dwi  Wahyu  &  Yasin  Irsyadi,  2021).  Perkembangan  teknologi informasi  ini  dapat  ditemukan  pada  bermacam  bidang  seperti  manajemen,  kesehatan, pendidikan, cafe, geografis, restoran dan sebagainya (Fachriyan Yoga et al., 2021). Banyak teknologi  informasi  yang  berkembang  saat  ini  digunakan  sebagai  alat  bantu  dalam memenuhi  kebutuhan  (Firmansyah  &  Udi,  2018).  Salah  satu  yang  memanfaatkan teknologi  sebagai  alat  bantu  adalah coffee  shop.  X  Coffee  Co  merupakan  salah  satu contoh coffee  shop  yang  telah  berkembang  sejak  tahun  2016.  Coffee  shop  ini  telah memiliki dua cabang yang berlokasikan di Jakarta Barat dan Jakarta Utara.
X Coffee Co terkenal dengan kualitas kopi yang khas dan pelayanan mereka yang ramah namun masih memiliki beberapa permasalahan terkait dengan sistem  penjualan mereka. Kemajuan teknologi yang ada pada saat ini masih belum diterapkan secara baik oleh coffe  shop.  Pencatatan  pemasukan  pada  coffee  shope  masih  dilakukan  secara manual  sehingga  akan  ada  kemungkinan  terjadinya  kesalahan  dalam  pencatatan  dan juga  membutuhkan  waktu  lama  dalam  pengerjaannya.  Selain  itu coffee  shop  masih menerapkan  sistem  pemesanan  dengan  langsung  datang  ke  kasir  sehingga menyebabkan  antrian  panjang  pada  jam-jam  sibuk.  Hal  ini  akan  membuat  kurangnya pelayanan choffee shop dibagian kepuasan pelanggan mereka.
Pada penelitian ini akan membuat sebuah sistem coffee shope berbasis web untuk membantu  X  Coffee  Co  terkait  permasalahan  yang  mereka  miliki.  Sistem  ini  akan menerapkan React.JS yang digunakan untuk membuat antarmuka pada rancangan web. React.JS  membantu  pengembang  dalam  pembuatan User  Interface  (UI)  yang  lebih interaktif  dan reusable  (Panjaitan  &  Pakpahan,  2021).  Pada  sistem  web  ini  juga menyediakan  layanan payment  gateway  untuk  proses  pembayaran  pesanan  secara elektronik. Payment gateway yang digunakan pada penelitian ini adalah Midtrans dimana sistem  ini  bisa  mengontrol  transaksi  secara online  dengan  keamanan  data  yang  lebih baik  (Puspitasari  &  Maulina,  2019).  Penelitian  ini  menggunakan  metode waterfall  untuk pengembangan sistem.

## METODE PENELITIAN
Penelitian ini menggunakan metode waterfall untuk proses pengembangan sistem yang  akan  dibangun.  Metode  ini  merupakan  salah  satu  model  yang  ada  pada System Development Live Cycle (SDLC) yang merupakan metode umum dalam pengembangan
sistem informasi (Wahid, 2020)(Dwanoko, 2016). Metode ini sangat efektif jika digunakan untuk  pengembangan  sistem  (Kirman  &  Saputra,  2022).  Metode  waterfall  merupakan metode yang bersifat skuensial dan terdiri dari lima tahapan yang saling terhubung (Fian et  al.,  2020)(Dermawan  &  Hartini,  2017).  Tahapan  yang  ada  pada  metode waterfall dimulai dari requirements, design, implementation, verification dan maintenance.
Gambar 1. Metode Waterfall (Fian et al., 2020)(Sommerville, 2016)
Berikut  ini  adalah  tahapan  pengembangan  perangkat  lunak  penelitian  yang menggunakan metode waterfall :
1. Analisis Kebutuhan Sistem ( requirements)
Pada  tahapan  ini  menganalisis  terkait  kebutuhan  dari  pengguna  dengan  cara melakukan  wawancara  pada  pihak  terkait.  Hasil  dari  tahapan  ini  akan  menjelaskan apa saja kebutuhan yang diperlukan oleh pengguna dan terdefinisi dengan baik.
2. Perancangan ( design)
Pada  penelitian  ini  proses  desain  sistem  dilakukan  dengan  cara  menentukan  alur sistem  dengan  menggunakan Unified  Modeling  Language  (UML).  UML  berperan sebagai media bantu untuk merancang sistem (Yoga Ananda Putra et al., 2019).
3. Implementasi ( implementation)
Tahapan  ini  mengimplementasikan  sistem  yang  telah  dirancang  dengan  UML kedalam  bentuk  kode-kode  program  yang  nantinya  akan  menghasilkan  suatu program utuh. Pada tahapan ini akan memanfaatkan React.JS untuk pembuatan User Interface sistem.
4. Pengujian ( verification)
Hasil  program  yang  telah  dibuat  akan  dilakukan  testing  untuk  pengujian  apakah sudah berjalan sesuai dengan kebutuhan. Pada penelitian pengujian yang dilakukan dalam bentuk black-box testing dan user acceptance testing (UAT)
5. Perawatan (maintenance)
Setelah  pengujian  pada  tahapan  ini  melakukan  pemeliharaan  sistem  dengan  cara pemasangan sistem yang telah dibuat serta perbaikan sistem ketika ditemukan bug.

## HASIL DAN PEMBAHASAN
Penelitian  ini  memiliki  dua  analisis  kebutuhan  yaitu  analisis  fungsional  dan  analisi non-fungsional.  Pada  bagian  analisis  fungsional  terdapat  empat  poin  penting  dimana pada poin pertama adalah bagian menu yang bisa diakses oleh admin untuk mengelola menu  kopi  dan  makanan  serta  menentukan  ketersediaan,  deskripsi  dan  harga  menu tersebut.  Poin  kedua  menajemen  stok  yang  mana  poin  ini  masih  bagian  admin  yang berfungsi untuk mengelola ketersediaan stok barang. Poin ketiga adalah laporan dimana admin dapat melihat data penjualan dan pendapatan pada coffee shope. Terakhir bagian orde  dan  pembayaran  dimana bagian  ini  bisa diakses  oleh pengguna. Pada bagian  ini pengguna bisa melihat menu, melakukan pemesanan, dan melakukan pembayaran dari pesanan.
Analisis  kebutuhan  non-fungsional  terdiri  dari usebility  dimana  sistem  yang dibangun diharapkan dapat mudah untuk digunakan dengan cara memberikan penduan atau  petunjuk  yang  jalas  bagi  pengguna.  Performa  yang  bertujuan  agar  web  yang dibangun harus responsif. Analisis non-fungsional juga berfokus kepada keamanan yang berkaitan dengan data pengguna. Terakhir kompatibilitas, dimana web yang dirancang diharapkan kompatible dengan berbagai jenis perangkat dan browser.
Pada  tahapan  perancangan  penelitian  ini  menggunakan Unified  Modeling Language (UML) yang mana diwakili oleh Use Case Diagram. Pada diagram ini terdapat tiga aktor yaitu customer, admin dan admin master. Customer bisa melakukan registrasi, memesan menu dan melakukan pembayaran pada sistem. Admin dapat menambahkan menu,  stok  barang  dan  melihat  data  penjualan.  Admin  master  dapat  mengelola  data admin,  melihat  data  penjualan  pada  semua  cabang cofee  shop  dan  menambah  data cabang baru. Gambaran secara keseluruhan bisa dilihat pada gambar 2.
Gambar 2. Use Case Diagram Sistem
Selanjutnya adalah bagian implementasi dimana pada bagian ini mengubah bentuk desain  UML  kedalam  bentuk  web  yang  bisa  digunakan  oleh  pengguna. User  Interface pada  sistem  dibuat  dengan  menggunakan  React.JS  agar  tampilan  sistem  bisa  lebih interaktif dan user friendly. Bagian awal web akan menampilkan halaman untuk customer yang mana terdapat dua button untuk login atau registrasi. Bagi customer yang belum memilki akun maka bisa mengarah ke bagian register yang dapat dilihat pada gambar 3. Jika sudah memiliki akun maka customer bisa langsung login pada sistem.
Gambar 3. Halaman Registrasi Customer
Setelah customer berhasil login maka akan diarahkan ke dasboard menu (gambar 4), dimana pada halaman ini akan menampilkan menu yang tersedia pada coffee shop (gambar 5) . Pada bagian ini customer juga bisa melakukan pemesanan menu makanan yang diinginkan dan akan bertambah secara otomatis pada Cart yang telah disediakan.
Gambar 4. Halaman Dasboard Menu
Gambar 5. Halaman List Menu
Setelah proses pemesanan customer bisa melakukan pembayaran dengan layanan yang  sudah  disediakan  sistem.  Pada  proses  ini customer  diminta  untuk  menentukan metode pembayaran (gambar 6) dan mengisikan nomer card. Jika proses berhasil akan muncul notifikasi terkait pembayaran yang telah dilakukan.
Gambar 6. Halaman Pembayaran
Pada bagian admin juga mewajibkan untuk login terlebih dahulu sebelum masuk ke bagian dasboard admin. Admin bisa melihat data transaksi yang ada pada coffee shop cabang yang dia kelola. Admin juga bisa mengelola data menu dan stok produk pada toko.  Jika  terdapat  menu  baru  dan  belum  terdata  pada  sistem  maka  admin  dapat menginputkan menu tersebut beserta deskrispi dan gambarnya.
Gambar 7. Halaman Input menu pada Admin
Pada Master Admin bisa melihat data transaksi disemua cabang yang ada. Selain itu master admin juga bisa melihat informasi admin dan customer yang terdaftar pada sistem. Master admin dapat akses semua fitur yang ada dengan login kedalam sistem.
Gambar 8. Halaman data pengguna seluruh cabang
Setelah sistem dibuat maka masuk pada tahap pengujian, dimana pada penelitian ini  kita  menggunakan  pengujian black-box  testing  dan  user  acceptance  testing  (UAT). Pada black-box  testing  berfokus  pada  fungsionalitas  sistem  yang  dirancang  yang bertujuan untuk memastikan sistem bisa berjalan sesuai dengan harapan pengguna.
Tabel 1. Pengujian Black-box Testing Aspek Uji Butir Uji Hasil CUSTOMER Autentikasi Regitrasi dan Login sistem Berhasil Logout sistem Dasboard Dapat masuk ke dasboard dan melihat menu Berhasil Dapat mengisi data complaint Order Bisa menambah dan mengurangi data pesanan Berhasil Pembayaran Bisa melakukan pembayaran pesanan dengan payment gateway Berhasil ADMIN Autentikasi Regitrasi dan Login sistem Berhasil Logout sistem Dasboard Bisa melihat tabel transaksi cabang yang dikelola Berhasil Sorting Data Bisa melihat tabel transaksi terbaru atau terlama Berhasil Kelola Menu Bisa melakukan penambahan menu Berhasil Kelola Stok Bisa menambahkan stok pada menu yang ada Berhasil ADMIN MASTER Autentikasi Regitrasi dan Login sistem Berhasil Logout sistem
Dasboard Bisa melihat transaksi semua cabang yang ada Berhasil
Sorting Data Bisa melihat tabel transaksi terbaru atau terlama semua cabang Berhasil Penambahan Admin Bisa menambahkan data admin yang baru Berhasil
User  Acceptance  Testing  (UAT)  dilakukan  untuk  memvalidasi  apakah  sistem  telah berfungsi  dengan  baik  dalam  lingkungan  produksi  sebelum  digunakan  secara  global. Pada penlitian ini UAT dilakukan dengan memberikan pertanya kepada pengguna sistem. Berikut hasil dari dari User Acceptance Testing (UAT) yang telah dilakukan dapat dilihat pada tabel 2.
Tabel 2. Hasil User Acceptance Testing (UAT) No Pertanyaan Bobot Nilai Dalam Persentase 1 Seberapa  mudah  anda  melakukan  proses  login pada sistem ini ? 85.6 % 2 Seberapa  jelas  dan  mudah  anda  dalam menemukan  menu-menu  yang  tersedia  pada sistem? 82.8 % 3 Seberapa  mudah  anda  melakukan  pemesanan melalui dasboard pada sistem? 74.2% 4 Seberapa  nyaman  anda  dalam  melakukan pembayaran pada sistem? 80% 5 Seberapa jelas informasi pemesanan anda? 74.2% 6 Seberapa mudah anda menambahkan stok produk yang dijual pada sistem? 85.6% 7 Sebarapa  mudah  anda  menambahkan  menu  baru pada sistem ? 82.8% 8 Seberapa nyaman anda dalam melihat UI sistem? 85.6% 9 Seberapa  mudah  anda  dalam  menggunakan  fitur pada sistem ? 82.8% 10 Seberapa  puas  anda  dengan  penggunaan  sistem secara keseluruhan? 91.4%

## SIMPULAN
Pembuatan sistem coffee shop bebasis web dengan menggunakan React.Js dapat memeberikan  kemudahan  bagi  pengguna  baik  dalam  pengelolaan  data  pemasukan maupun proses pemesanan yang dilakukan oleh pelanggan. Hal ini didasarkan pada hasil pengujian Black-box Testing dan User Acceptance Testing (UAT). Pada Black-box Testing diperoleh  hasil  testing  100%  dan  untuk  pengujian User  Acceptance  Testing  (UAT) diperoleh 82.47% dari seluruh responden dan nilai UAT ini dimasukkan kedalam kategori baik.  Sistem  ini  diharapkan  dapat  mempermudah  pengguna  baik  dalam  proses pemesanan  produk  maupun  pengelolan  data  pesanan  yang  ada  pada coffee  shop  X Coffee  Co.  Penggunaan  React.Js  pada  sistem  ini  dapat  menciptakan  pengalaman berinteraksi  yang  responsif  dan  nyaman  serta  dapat  meningkatkan  kepuasan  bagi pelanggan maupun karyawan pada coffee shop.

## DAFTAR PUSTAKA
Dermawan,  J.,  &  Hartini,  S.  (2017).  IMPLEMENTASI  MODEL  WATERFALL  PADA
PENGEMBANGAN  SISTEM  INFORMASI  PERHITUNGAN  NILAI  MATA  PELAJARAN BERBASIS  WEB  PADA  SEKOLAH  DASAR  AL-AZHAR  SYIFA  BUDI  JATIBENING. PARADIGMA, 19(2).
Dwanoko,  Y.  S.  (2016).  IMPLEMENTASI  SOFTWARE  DEVELOPMENT  LIFE  CYCLE  (SDLC) DALAM  PENERAPAN  PEMBANGUNAN  APLIKASI  PERANGKAT  LUNAK. Jurnal Teknologi Informasi, 7(2).
Dwi  Wahyu,  K.,  &  Yasin  Irsyadi,  F.  (2021).  Perancangan  dan  Pembuatan  Aplikasi Manajemen  Peminjaman  Kendaraan  Berbasis  Web  Dengan  Framework  Codeigniter. Emitor: Jurnal Teknik Elektro, 21.
Fachriyan  Yoga,  W.,  Wijiyanto,  &  Muhtarom,  M.  (2021).  Aplikasi  Coffee  Shop  Berbasis Website (Studi Kasus : Coffee Shop di Surakarta). DUTA.Com.
Fian,  A.,  Sokibi,  P.,  &  Magdalena,  L.  (2020).  Penerapan  Payment  Gateway  pada  Aplikasi Marketplace  Waroeng  Mahasiswa  Menggunakan  Midtrans. Jurnal  Informatika Universitas Pamulang, 5(3), 387. https://doi.org/10.32493/informatika.v5i3.6719
Firmansyah, Y., & Udi. (2018). Penerapan Metode SDLC Waterfall Dalam Pembuatan Sistem Informasi  AkademikBerbasis  Web  Studi  Kasus  Pondok  Pesantren  Al-Habi  Sholeh Kabupaten Kubu RayaKalimantan Barat. Jurnal Teknologi & Manajemen Informatika.
Kirman,  &  Saputra,  E.  E.  (2022).  Metode  SDLC  Waterfall  Pada  Rancang  Bangun  Sistem Informasi Sekolah SMP Negeri 10 Kaur. JUSIBI, 4.
Panjaitan,  J.,  &  Pakpahan,  A.  F.  (2021).  Perancangan  Sistem  E-Reporting  Menggunakan ReactJS  dan  Firebase. Jurnal  Teknik  Informatika  Dan  Sistem  Informasi,  7(1). https://doi.org/10.28932/jutisi.v7i1.3098
Puspitasari, T. M. M., & Maulina, D. (2019). Implementasi Payment Gateway Menggunakan Midtrans  Pada  Marketplace  Travnesia.Com. Mobile  and  Forensics,  1(1),  22. https://doi.org/10.12928/mf.v1i1.997
Sommerville, I. (2016). Software engineering. In Pearson (Tenth Edition).
Wahid, A.  A. (2020). Analisis metode waterfall untuk pengembangan sistem informasi. J. Ilmu-Ilmu Inform. Dan Manaj. STMIK.
Yoga  Ananda  Putra,  Sumijan,  &  Mardison.  (2019). PERANCANGAN  SISTEM  INFORMASI AKADEMIK  MENGGUNAKAN BAHASA PEMOGRAMAN PHP DAN DATABASE MYSQL (STUDI KASUS PAUD TERPADU BISSMILLAH KOTA BUKITTINGGI). 9(1). https://jitekin- upiyptk.org/ojs/index.php/Teknologi/article/view/5