## Implementasi Aplikasi Web Full Stack Pendataan Cloversy.id
Eric Prima Wijaya [1] , Sandy Kosasi [2] , David [3]
Teknik Informatika [1], [3] , Sistem Informasi [2]
STMIK Pontianak Pontianak, Indonesia ericprimaw@stmikpontianak.ac.id [1] , sandykosasi@stmikpontianak.ac.id [2] , david@stmikpontianak.ac.id [3]
Abstract — Data collection has a big impact on the growth and effectiveness  of  business  processes.  Data  collection  done  using manual methods can cause various obstacles, such as difficulty in accessing  information,  limited  access,  and  the  process of  tracing history  which  takes  a  lot  of  time.  Cloversy.id  is  an  online  shop operate  in  painting  service.  The  data  collection  system  that currently used by Cloversy.id has problems, where the Cloversy.id team  has  difficulty  to  serve  consumers  because  it  is  difficult  to access sales information. Information collection is done by taking notes  on  paper  and  using  Google  Sheets  so  that  the  data  has  an inconsistent format and is difficult to search through. The purpose of this research is to produce a data collection application that can be  used  by  Cloversy.id  to  manage  data  collection  including financial management, products, vendors, and jobs. The data used is factual data from Cloversy.id including financial data, products, vendors, and job listings. This research is case study research. The application development method uses the Extreme Programming approach  with  the  stages  of  planning,  designing,  implementing, and testing. The result of this research is a full stack data collection web application built with Node.js, Express, Ejs and MongoDB as the main technology. The Extreme Programming method applied is able to produce applications that run well and  have functions that  suit  their  needs.  With  this  data  collection  application,  the problems  experienced  by  Cloversy.id  are  resolved  because  the application  can  be  used  to  quickly  manage  and  collect  various types of data. Testing the application with a black box shows the application is functioning properly.
Keywords— Web Application, Full Stack, Extreme Programming, Unified Modeling Language
Abstrak — Pendataan  memiliki  pengaruh  yang  besar  dalam kelancaran  dan  keefektifan  proses  usaha.  Pendataan  yang dilakukan dengan  metode  manual dapat  menimbulkan berbagai kendala  seperti  sulitnya  akses  terhadap  informasi,  keterbatasan akses, dan proses penelusuran  histori yang  memerlukan banyak waktu.  Cloversy.id  merupakan  toko  online  yang  bergerak dibidang seni lukis. Sistem pendataan yang digunakan Cloversy.id memiliki  kendala,  dimana  tim  Cloversy.id  kesulitan  saat  ingin melayani konsumen dikarenakan sulit untuk mengakses informasi penjualan. Pendataan informasi dilakukan dengan cara mencatat pada kertas dan menggunakan Google Spreadsheet sehingga data memiliki format yang tidak konsisten dan sulit dicari. Tujuan dari penelitian ini adalah menghasilkan aplikasi pendataan yang dapat dipergunakan Cloversy.id untuk mengelola pendataan mencakup pengelolaan keuangan, produk, vendor, dan pekerjaan. Data yang digunakan  merupakan  data  faktual  dari  Cloversy.id  mencakup
data keuangan, produk, vendor, dan daftar pekerjaan. Penelitian ini  merupakan  penelitian  studi  kasus.  Metode  pengembangan aplikasi  menggunakan  pendekatan  Extreme  Programming dengan  tahapan  perencanaan,  perancangan,  implementasi,  dan pengujian. Hasil dari penelitian ini adalah aplikasi web pendataan full  stack  yang  dibangun  dengan  Node.js,  Express,  Ejs  dan MongoDB sebagai teknologi utama. Metode Extreme Programming  yang  diterapkan  mampu  menghasilkan  aplikasi yang  berjalan  dengan  baik  dan  memiliki  fungsi  yang  sesuai dengan kebutuhan. Dengan aplikasi pendataan ini, kendala yang dialami  Cloversy.id  teratasi  karena  aplikasi  dapat  digunakan untuk  mengelola  dan  mberbagai  jenis  pendataan  dengan  cepat. Pengujian  aplikasi  dengan  black  box  menunjukkan  aplikasi berfungsi dengan baik.
Kata Kunci— Aplikasi web, Full Stack, Extreme Programming, Unified Modeling Language

## I. PENDAHULUAN
Pendataan  merupakan  faktor  penting  dalam  menjalankan suatu  usaha,  metode  pendataan  dapat  mempengaruhi kelancaran  akses  pemilik  usaha  terhadap  informasi.  Sulitnya akses  terhadap  informasi  dapat  menghambat  proses  usaha, seperti  kegiatan  penjualan  yang  umumnya  membutuhkan referensi  ke  histori  transaksi  yang  dikumpulkan  dari  proses pendataan.
Informasi adalah data yang telah diproses sedemikian rupa, informasi merupakan pengetahuan dan dapat menjadi manfaat bagi  suatu  usaha  serta  menjadi  bahan  pertimbangan pengambilan  keputusan  [1][2].  Cara  pengolahan  pendataan yang  tidak  efektif  akan  berdampak  pada  efektifitas  kerja menjadi  rendah  dan  membutuhkan  banyak  waktu  dan  tenaga [3].  Oleh  karena  itu,  usaha  membutuhkan  metode  pendataan dan  yang  baik  untuk  meningkatkan  efektifitas  dalam  proses usaha.
Cloversy.id  merupakan  sebuah  toko  berbasis  online  yang bergerak dibidang seni khususnya jasa lukis (custom painting) . Cloversy.id  menyediakan  solusi  untuk  masyarakat  yang  ingin tampil unik dan beda, atau sebatas ingin menuangkan inspirasi atau bahkan cerita kedalam  bentuk karya seni  lukisan dengan media  seperti  sepatu,  tas,  dompet,  atau  benda  lain  berbahan kanvas dan kulit.
Sistem  adalah  suatu  susunan  atau  jaringan  kerja  dengan prosedur  yang  jelas  dan  berhubungan  untuk  mencapai  suatu sasaran atau tujuan tertentu [4]. Suatu sistem digunakan untuk
membantu  dan  memudahkan  pekerjaan,  termasuk  sistem pendataan  yang  mendukung  dalam  melakukan  pendataan  dan pencarian kembali informasi.
Sistem  pendataan  yang  sedang  digunakan  di  Cloversy.id untuk pendataan informasi penjualan masih merupakan sistem pendataan manual dengan menggunakan kertas dibantu dengan dukungan  aplikasi  Google  Spreadsheet  dan  sistem  folder. Pendataan yang dilakukan diantaranya pendataan pengeluaran, pemasukan,  katalog  desain  dan  daftar  pekerjaan.  Dengan digunakannya  sistem  pendataan  manual,  kendala  yang  sering muncul  pada  waktu  melakukan  pengecekkan  histori  dan melakukan  pembukuan.  Kendala  yang  didapati  adalah  format pendataan tidak konsisten. Informasi sulit diakses karena harus mencari  secara  manual  disaat  menentukan  harga  berdasarkan histori,  katalog  design  yang  sulit  diakses  informasinya  baik detail harga maupun detail desain.
Sulitnya  akses  terhadap  informasi  sering  menghambat pemilik  toko  dalam  menjawab  pertanyaan  terkait  harga  dan desain dari customer. Selain itu, pemilik toko juga tidak dapat melakukan kustomisasi fungsi sesuai kebutuhan, mengintegrasikan  antara  pengeluaran  dan  pemasukan.  Sistem manual yang digunakan menjadi salah satu faktor keterlambatan  dalam  hal  pelayanan  transaksi  [5].  Kendala- kendala tersebut menyebabkan sistem pendataan menjadi tidak efektif dan mengakibatkan tim Cloversy.id harus bekerja ekstra untuk  menyelesaikan  pekerjaan  yang  sebenarnya  dapat diselesaikan dengan lebih cepat dan efektif.
Untuk  mengurangi  kendala  dan  meningkatkan efektivitas Cloversy.id dalam melakukan pendataan. Diperlukan  sebuah  aplikasi  dalam  mendukung  proses pendataan pemasukan, pengeluaran, katalog desain, dan daftar pekerjaan.
Aplikasi adalah program yang sudah dirancang sedemikian rupa dan siap dipakai untuk melaksanakan suatu fungsi untuk pengguna atau aplikasi yang lain [6]. Salah satu jenis aplikasi yang  sering  digunakan  adalah  aplikasi  web.  Aplikasi  web adalah  sebuah  sistem  informasi  yang  mendukung  interaksi pengguna  melalui  antarmuka  berbasis  web.  Aplikasi  web merupakan sebuah aplikasi yang dapat diakses melalui internet [7].  Aplikasi  web  banyak  digunakan  dikarenakan  memiliki ketangguhan dalam hal fleksibilitas akses, aplikasi web modern didesain  untuk  dapat  diakses  dari  berbagai  jenis  perangakat yang berbeda (baik desktop ataupun mobile ).
Aplikasi  web  dapat  digunakan  diberbagai  sistem  operasi secara  langsung  selama  terdapat  jaringan  internet tanpa  harus dilakukan instalasi terlebih dahulu [8]. Aplikasi web memiliki kompabilitas  yang  tinggi  dan  mudah  disesuaikan,  hal  ini dikarenakan  aplikasi  web  berjalan  dan  diproses  oleh  web browser [9].
Kriteria dan kelebihan yang dimiliki oleh aplikasi web cocok  dengan  kebutuhan  Cloversy.id  mengingat  sistem  kerja yang digunakan sangat bergantung pada divisi- divisi tim yang ada  dalam  Cloversy.id.  Tim-tim  tersebut  membutuhkan  akses terhadap  aplikasi  untuk  melakukan  pendataan  ataupun  untuk memulai  pekerjaan  dengan  melihat  detail  pekerjaan  secara mudah  menggunakan  smartphone  maupun desktop .    Sesuai dengan kebutuhan, aplikasi yang akan dirancang dan diterapkan
untuk  mengatasi  permasalahan  yang  ada  pada  Cloversy.id merupakan  suatu  aplikasi  web  dengan  harapan  dapat menyelesaikan  masalah  yang dialami dalam proses pendataan pada  saat  masih  menggunakan  sistem  lama.  Fungsi  yang terdapat pada aplikasi adalah pendataan penjualan, pembelian, katalog desain, dan manajemen daftar pekerjaan
Pada  penelitian-  penelitian  sebelumnya,  pengembangan aplikasi web pada kasus dan arsitektur sistem serupa cenderung menggunakan  bahasa  pemrograman  PHP  sebagai  bahasa pemrograman  utama  fondasi  aplikasi,  serta  penggunaan database sequel database MySQL [10][11][12]. Pada penelitian ini,  Javascript  merupakan  satu-  satunya  bahasa  pemrograman yang  akan  digunakan  baik  untuk front-end maupun back-end serta menggunakan database non sequel  MongoDB, ditambah aplikasi  yang  dibangun  memanfaatkan  penyimpanan  berbasis cloud baik  dari  segi  database  yang  menggunakan  MongoDB Atlas maupun penyimpanan media Cloudinary.

## II. METODE PENELITIAN
Penelitian ini merupakan penelitian studi kasus. Studi kasus adalah uraian dan penjelasan komprehensif mengenai berbagai aspek  seorang  individu,  suatu  kelompok,  organisasi,  suatu program,  atau  suatu  situasi social  [13] .  Data  dikumpulkan dengan  dilakukannya  wawancara  dengan  melakukan  tanya jawab  dengan  pengguna  yang  merupakan  bagian  dari  tim Cloversy.id.  Sumber  data  yang  akan  dipakai  dalam  proses pendataan  dan  yang  kemudian  akan  diolah  menggunakan aplikasi  didapatkan  secara  langsung  dari  Cloversy.id  yang merupakan data faktual yang digunakan dari tahun 2020 hingga 2021.  Data  mencakup  data  pemasukan,  pengeluaran,  katalog desain, daftar pekerjaan, vendor dan data konsumen.
Penelitian ini akan menghasilkan sebuah aplikasi web untuk keperluan pendataan Cloversy.id dengan fitur utama pendataan pengeluaran, pemasukan, katalog desain dan vendor. Aplikasi web  pendataan  tersebut  akan  dikembangkan  dengan pendekatan  extreme  programming.  Extreme  programing adalah salah satu turunan dari metode Agile development yang digunakan  untuk  melakukan  pengembangan  perangkat  lunak secara cepat dan terbuka dengan melibatkan pengguna dalam proses  pengembangan  [14]. Aplikasi  dikembangkan  dengan melibatkan pengguna dari aplikasi selama proses pengembangan  berlangsung,  pengembangan  aplikasi  akan berfokus  pada  kebutuhan  dan  fungsi  utama  aplikasi  sebagai sistem pendataan yang baru.
Gambar 1. Tahapan Extreme Programming
Tahapan dari e xtreme programming dibagi menjadi 4 yaitu [15]:
1) Planning (Perencanaan)
Tahapan  perencanaan  merupakan  langkah  pertama  sebelum membangun sistem. Dalam penelitian ini dilakukan perencanaan  terkait  aplikasi  web  yang  mau  dikembangkan, arsitektur yang akan digunakan, dan fitur yang dibutuhkan.
2) Design (Perancangan)
Pada  tahapan  perancangan  akan  dilakukan  pemodelan sistem  dan  pemodelan  arsitektur.  Pemodelan  dilakukan berdasarkan  hasil  analisis  spesifikasi  dan  user  stories. Pemodelan sistem menggunakan Unified Modelling Language (UML).
3) Coding (Pengkodean)
Tahapan  ini  merupakan  tahapan  penerapan  dan  realisasi. Model  dan  spesifikasi  yang  sudah  dibuat  digunakan  sebagai pedoman  untuk  dibuat  kedalam  bentuk  kode  sistem  untuk menghasilkan aplikasi web pendataan Clovesry.id.
4) Testing (Pengujian)
Merupakan  tahapan  terakhir  dari  siklus  utama extreme programming .  dimana  akan  dilakukan  pengujian  terhadap aplikasi  yang  sudah  dikembangkan.  Pengujian  menentukan apakah aplikasi dapat berfungsi dengan baik.
Pemodelan sistem  menggunakan UML (Unified  Modeling Language).  Aplikasi  web  pendataan  Cloversy.id  dibangun menggunakan  dari  bahasa  pemrograman  Javascript  dibantu dengan beberapa teknologi web full stack, yaitu:
A. Node.js
Merupakan  runtime  untuk  membangun  dan  menjalankan aplikasi  web  diluar  web  browser  dengan  menggunakan bahasa  pemrograman  Javascript  [16].  Node.js  juga menyediakan berbagai jenis modul dengan berbagai fungsi yang  dapat  digunakan  dalam  pengembangan  aplikasi [16][17].  Dalam  penelitian  ini,  terdapat  beberapa  modul Node.js  yang  akan  digunakan  seperti  Express.js, Passport, Mongoose, Multer, Helmet, dan lainnya.
B. Express
Framework dan modul yang disediakan oleh Node.js yang berfungsi untuk melakukan perancangan sistem dan logika back-end  pada  aplikasi  ini.  Express  memilik  banyak  fitur yang sangat membantu dalam melakukan request ke server [18].

## C. EJS
Merupakan bahasa templating untuk menghasilkan markup HTML  dengan  Javascript.  Penggunaan  EJS  membantu dalam  melakukan  pembuatan markup dengan  data  yang dinamis.

## D. MongoDB
NoSQL  Database  berbasis document-oriented .  MongoDB dapat  digunakan  untuk  menyimpan  berbagai  data  dalam bentuk menyerupai JSON dengan sangat fleksibel [19].

## III. HASIL DAN PEMBAHASAN
1) Planning (Perencanaan)
Perencanaan  aplikasi  web  pendataan  Cloversy.id  dengan menggunakan User  Stories berdasarkan  hasil  wawancara kepada  tim  Cloversy.id  sehingga  terlihat  hak  akses  dan kebutuhan  sistem  pada  setiap  tingkat  user,  dapat  dilihat  pada Tabel 1.
TABEL I. U SER S TORIES User Kebutuhan Sistem Admin Admin  adalah  pemilik  hak  akses  tertinggi  yang menambahkan user baru, mengontrol data pemasukan, pengeluaran dan kas, mengontrol data katalog  desain,  mengontrol  data  vendor,  dan mengontrol data daftar pekerjaan.
Non-Admin Non-Admin  adalah user yang  mengakses  data katalog desain (terbatas) dan mengakses data daftar pekerjaan. Dalam penggunaannya, user non-admin memiliki  role  yang  disebut  sebagai  Painter, Designer, dan Seller.
Arsitektur  sistem menggambarkan  bagaimana  proses  kerja aplikasi  yan  dirancang  bekerja  secara  keseluruhan,  Arsitektur perancangan  aplikasi  web  pendataan  Cloversy.id  ditunjukkan pada Gambar 1.

## Gambar 2. Arsitektur Sistem
Pada arsitektur tersebut, client atau user mengakses front- end landing  page  dan  melakukan  request  login  untuk  dapat mengakses  fitur-  fitur  yang  ada.  Request  akan  dikirimkan  ke server  dan  diproses  terintegrasi  dengan  database.  Pada  saat response  dikembalikan  page  akan  diarahkan  ke  bagian dashboard untuk kemudian client dapat melakukan akses sesuai batasan hak akses akun.
Penggunaan  database  pada  aplikasi  ini  menggunakan MongoDB  Atlas  yang  merupakan cloud  based Database Management  System  (DBMS)  yang  menggunakan  konsep NoSQL terfokus dengan data yang tidak terstruktur [19]. Setiap fitur  dioperasikan,  akan  mengirim  kembali  request  untuk mendapatkan  atau  mengirimkan  data  dari  backend  agar  dapat ditampilkan, dimodifikasi, dihapus atau membuat data baru.
2) Design (Perancangan)
Alur  penggunaan  aplikasi  dijelaskan  dalam  diagram  use case.  Fungsi  admin  dalam  penggunaan  aplikasi  adalah  saat berhasil  melakukan  autentikasi  dan  login,  admin  dapat melakukan berbagai aktivitas seperti mengelola pemasukan dan pengeluaran  dengan  menambahkan,  mengubah,  mengakses, atau menghapus data. Admin dapat mengelola katalog produk dengan  detail  foto,  harga,  dan  deskripsi  produk,  mengelola daftar pekerjaan, serta mengelola data vendor yang dimiliki.

## Gambar 3. Use Case Diagram
Untuk  menggambarkan  berbagai  alur  aktivitas  dalam sistem,  proses  bagaimana  suatu  aktivitas  didalam  sistem dilakukan, cara kerja sistem diuraikan dalam diagram activity. Pengelolaan  data  pengeluaran  yang  dilakukan  admin  diawali dengan  pemilihan  fitur  keuangan,  yaitu  terdapat  pilihan pemasukan  atau  pengeluaran.  Setelah  menentukan  pilihan pengeluaran, daftar pengeluaran akan muncul lengkap dengan data yang diambil dari database.
Pada  daftar  tersebut,  admin  dapat  menambahkan  data pengeluaran  baru  atau  mengakses  detail  setiap  item.  Apabila admin ingin menambahkan data baru maka form data baru akan ditampilkan.  Admin  mengisikan  data  sesuai  dengan  form. Setelah  data  terisi  dengan  lengkap,  maka  admin  mengklik tombol  simpan  dan  proses  penambahan  data  baru  selesai. Apabila admin  ingin  mengakses detail data dari daftar, admin mengklik  nama  dari  daftar.  Setelah  nama  item  diklik,  sistem akan menampilkan detail dari item yang diklik. Pada halaman detail  item  pengeluaran  atau  pemasukan,  admin  dapat menghapus, mengubah data detail.
Jika  admin  ingin  mengubah  data,  form  edit  akan ditampilkan dengan data yang sudah ada, admin  mengisi data yang baru, dan mengklik tombol simpan, data yang lama akan diperbaharui dengan data yang baru dan proses mengubah data selesai. Apabila admin ingin menghapus data, admin mengklik tombol  hapus  pada  detail  item,  dan  melakukan  konfirmasi penghapusan  data,  setelah  disetujui,  data  akan  dihapus  dan admin akan dikembalikan ke halaman daftar pengeluaran.

## Gambar 4. Activity Diagram Pengelolaan Data Pengeluaran
Untuk  pengelolaan  data  pemasukan,  memiliki  alur  yang sama  dengan  pengelolaan  data  pengeluaran.  Diawali  dengan admin  mengakses  daftar  pemasukan,  terdapat  pilihan  untuk menambahkan  data  pemasukan  baru,  dan  melihat  detail  item pemasukan.
Untuk  menambahkan  data  pemasukan  baru,  sistem  akan mengarahkan ke form input pemasukan, apabila simpan maka data  pemasukan  akan  diteruskan  ke  sistem  dan  akan dimasukkan  kedalam  daftar  pemasukan.  Untuk  menampilkan detail  item pemasukan, sistem  akan  mengarahkan ke halaman detail dengan data yang sudah dicocokkan dari database, admin dapat  mengubah,  menghapus  atau  kembali  ke  daftar pemasukan.
Pengelolaan  katalog  produk  dilakukan  oleh  admin  dengan mengakses  menu  katalog  produk,  daftar  produk  akan ditampilkan dengan foto masing-masing produk. Admin dapat menambahkan  produk  baru  dengan  mengklik  tombol  tambah produk,  mengisi  form  produk  baru  dan  menyimpan  produk baru.
Admin  dapat  melihat  detail  produk  dengan  mengklik tombol  detail  produk,  didalam  detail  produk,  admin  dapat mengubah  detail  produk  dan  akan  diarahkan  ke  form  edit produk,  produk  diubah.  Admin  menghapus  produk,  sistem memberikan  konfirmasi  penghapusan,  produk  dihapus. User biasa dapat mengakses produk dengan detail yang terbatas dan tidak dapat mengubah, menambahkan, menghapus data produk.
Gambar 5. Activity Diagram Pengelolaan Katalog Produk
Untuk  pengelolaan  data  vendor  dilakukan  oleh  admin, admin  memilih  menu  vendor,  dan  daftar  vendor  akan ditampilkan.  Admin  dapat  menambahkan  data  vendor  baru dengan  mengklik  tombol  tambah  vendor,  form  input  vendor baru  akan  ditampilkan,  data  dimasukkan,  data  vendor  baru disimpan.
Admin  dapat  melihat  detail  data  vendor  dengan  mengklik kartu vendor, detail vendor akan tampil. Admin merubah data vendor  dengan  mengklik  tombol  edit,  form  edit  ditampilkan, data  vendor  diubah.  Admin  dapat  menghapus  data  vendor, konfirmasi  menghapus,  data  vendor  dihapus  dan  admin  akan dikembalikan ke halaman daftar vendor.

## Gambar 6. Activity Diagram Pengelolaan Vendor
Berikut  merupakan  diagram  class  untuk  menguraikan beberapa  class  serta  komponen-  komponen  yang  ada  didalam sistem aplikasi pendataan  Cloversy.id serta relasi- relasi  yang ada  antara  komponen  satu  dengan  lainnya.  Diagram  class berikut  menunjukkan  property  dan  method  dari  tiap-tiap komponen yang terdapat dalam sistem (Gambar 8).
Gambar 7. Class Diagram
Kemudian  dalam  konteks  rancangan  halaman-  halaman yang  ada  pada  aplikasi  pendataan  Cloversy.id.  Terdapat halaman  pengelolaan  keuangan  dengan  fungsi  untuk menampilkan  data  transaksi.  Sistem  aplikasi  pendatatan Cloversy.id  dapat  memastikan  bahwa user yang  dapat menggunakan aplikasi dan mengelola data hanyalah user yang sudah diberikan izin.
Sistem melakukan pengelolaan cookie dan session agar user dapat  login  tanpa  harus  selalu  memasukkan  hak  akses, penyimpanan  status  autentikasi  untuk  menampilkan  konten dinamis  didalam  penggunaan  aplikasi.  Session  menjalankan peran penting dalam memberi akses dan memastikan pengguna benar-  benar  terautentikasi  dengan  menyimpan  kombinasi kredensial hak akses pada server (session collections) dan pada browser pengguna (cookies) [20].
3) Coding (Pengkodean)
Gambar 8. Halaman Transaksi Aplikasi Pendataan Cloversy.id
Halaman  dashboard  merupakan  halaman  awal  setelah proses login dan autentikasi berhasil dilakukan. Pada halaman dashboard  ini,  semua  menu  akan  tampil  pada  bagian  navbar (untuk  admin)  dan  untuk user non-admin  menu  akan  tampil namun lebih terbatas.
Dashboard merupakan komponen yang penting dari aplikasi pendataan  Cloversy.id,  karena  pada  bagian  dashboard,  admin atau  pengguna  dapat  melakukan  akses  ke  berbagai  fitur, memantau secara keseluruhan baik dari saldo kas, produk, dan lainnya. Pada bagian dashboard, admin juga dapat melihat data penting seperti kas saat ini, jumlah produk atau desain, jumlah produk terjual.
Pada halaman daftar pekerjaan, admin dapat menambahkan pekerjaan baru, mencari, atau mengakses detail pekerjaan dan mengubah  dan  menghapus  data  pekerjaan. User non-admin hanya dapat mengakses detail pekerjaan. User non-admin tidak dapat mengubah atau menghapus data pekerjaan.
Data  pekerjaan  ditampilkan  dengan  kartu  dengan  nama pekerjaan,  gambar,  tanggal  pekerjaan  ditambahkan,  jenis pekerjaan  dan  status  pekerjaan  sebagai  kontennya.  Dengan daftar tersebut, tim  Cloversy.id  dapat  melakukan  pemantauan terkait  pekerjaan  yang  sedang  berlangsung  dan  detail  dari pekerjaan yang ada.
Gambar 10. Halaman Daftar Pekerjaan
Pada halaman katalog produk, digunakan untuk menyimpan berbagai  produk  Cloversy.id,  baik  admin  maupun user dapat mengakses  katalog  produk  ini.  Foto  produk  disimpan  melalui penggunaan cloud storage yang disediakan oleh Cloudinary,
Cloudinary  adalah  platform  yang  menyediakan  layanan cloud  untuk  image,  download,  dan  CDN  (Content  Delivery Network)  [21].  Penggunaan  cloud  storage  untuk  menyimpan berbagai gambar dan  asset website dapat  memudahkan dalam memperoleh  gambar  dan  menghemat  tempat  penyimpanan pada server hosting. Halaman daftar produk ditampilkan pada Gambar 12.
Gambar 11. Halaman Katalog Produk
4) Testing (Pengujian)
Pengujian  aplikasi  pendataan  Cloversy.id  dilakukan menggunakan pengujian Black Box dengan cara  menjalankan aplikasi  dengan  tujuan  untuk  menemukan  kesalahan  serta
memeriksa  apakah  sistem  dapat  berjalan  dengan  baik  sesuai dengan kebutuhan [22]. Skema pengujian yang dilakukan pada penelitian  ini  adalah  pengujian  proses  pengelolaan  keuangan, pengelolaan  produk.  Pengujian  Black  Box  yang  dilakukan diantaranya menggunakan teknik:

## a)  Equivalence Partitioning
Pengujian  masukan  pada  setiap  form  pada  pengelolaan pemasukan,  pengeluaran,  katalog  produk,  vendor,  dan  daftar pekerjaan. Pengujian dilakukan dengan masukan data valid dan data  yang  tidak  valid,  hasil  pengujian  form  dapat  berfungsi dengan baik dan data tidak valid dapat dideteksi oleh validasi form.

## b)  Feature Test
Pengujian  fitur  dilakukan  secara  menyeluruh  mencakup fitur login, logout, kelola keuangan, produk, vendor, dan daftar pekerjaan.  Fitur  berfungsi  dengan  baik  dan  aplikasi  dapat menampilkan dan menyimpan informasi dengan tepat.
Pengujian  dari  segi  keamanan  juga  dilakukan  terkait  fitur login  dan  logout,  pengujian  keamanan  dilakukan  dengan percobaan  melakukan cross  site  scripting  (xss) dan noSQL Injection . Cross  site  scripting adalah  salah  satu  kejahatan terhadap  keamanan  aplikasi  melalui  masukan  pada  browser yang  dilakukan  dengan  tujuan  mengambil  alih  kendali  dari browser  pengguna,  mengambil  kerahasiaan  data,  penyisipan file [23]. Pengujian dilakukan langsung menggunakan aplikasi pendataan Cloversy.id dari sisi client-side serta menggunakan aplikasi Postman untuk mengakses routing tanpa melalui client- side .
Dari  semua  hasil  pengujian  Black  Box  tersebut,  terlihat bahwa  semua  pengujian  telah  sesuai  dengan  hasil  yang diharapkan. Keterbatasan dari penelitian ini adalah tidak dapat mencakup seluruh aspek dalam pengembangan aplikasi seperti kurangnya  mekanisme  dalam  konteks  keamanan  (sistem keamanan ada diterapkan, tapi tidak benar- benar ditonjolkan).

## IV.  KESIMPULAN
Aplikasi  pendataan  Cloversy.id  dapat  berjalan  sesuai dengan  fungsinya  untuk  melakukan  pengelolaan  keuangan, produk,  vendor,  dan  daftar  pekerjaan.  Dengan  dibuatnya aplikasi ini, tim Cloversy.id dapat melakukan pendataan secara online  dari  berbagai  perangkat.  Aplikasi  ini  membantu  tim Cloversy.id dalam melakukan pendataan terhadap arus kas dari pemasukan  dan  pengeluaran  sehingga  mempermudah  dalam melakukan akses histori keuangan. Aplikasi ini memungkinkan katalog  produk  Cloversy.id  yang  sebelumnya  disusun  hanya menggunakan  sistem  folder,  sekarang  dapat  disimpan  dan diakses  secara  lengkap  terkait  foto,  harga,  detail  produk  baik oleh tim Cloversy.id atau reseller. Fitur pengelolaan pekerjaan juga  memudahkan  bagi  tim  Cloversy.id  untuk  melakukan monitoring  terhadap  detail  pekerjaan,  deadline  dan  bantuan visual  berupa  foto  untuk  memperjelas  desain.  Dengan  semua fitur  yang  ada  didalam  aplikasi  ini,  tim  Cloversy.id  memiliki sistem  pendataan  yang  baik  dan  dapat  melayani  konsumen dengan lebih cepat dan efisien.

## V. SARAN
Untuk  penelitian  selanjutya  dapat  diperluas  dengan menambahkan  proses  yang  melibatkan  konsumen  secara langsung,  memberikan  tempat  bagi  konsumen  untuk  dapat melakukan  tracking  secara  online  terhadap  proses  pengerjaan sehingga  dapat  menjamin  dan  meningkatkan  kepuasan konsumen.  Pengembangan  aplikasi  ini  dapat  dilanjutkan kedalam tahap optimalisasi seperti penerapan pagination untuk mencegah tampilan sistem terlalu padat karena data yang terlalu banyak. Selain itu, dapat dikembangkan fitur tambahan seperti push notification agar interaksi dapat lebih dinamis.

## DAFTAR PUSTAKA
[1] Rahmawati,  “Sistem  Informasi  Inventory  Stock  Barang  Pada  CV. Artha,” J. Chem. Inf. Model. , vol. 21, no. 2, 2017.
[2] T.  Sutabri, Analisis  Sistem  Informasi .  Jakarta:  Penerbit  Andi Yogyakarta.
[3] T. T. Loveri, “SISTEM INFORMASI APLIKASI PENGELOLAAN TRANSAKSI  KEUANGAN  DAN  PENDATAAN  KONSUMEN PADA CV. PUPLAS,” J. Sains dan Inform. , vol. 4, no. 2, 2018, doi: 10.22216/jsi.v4i2.3584.
[4] D.  W.  Kuncoro,  “Analisis  Dan  Perancangan  Sistem  Kasir  Dan Pendataan Stok Barang Pada Tata Distro Pacitan,” J. Speed - Sentra Penelit. Eng. dan Edukasi , vol. 7, no. 1, 2015.
[5] P.  Noviandhiny,  H.  Nasution,  and  E.  Esyudha  Pratama,  “Rancang Bangun  Aplikasi  Penjualan  dan  Pembelian  Berbasis  Web  Pada Apotek Neofarma Sanggau,” J. Sist. dan Teknol. Inf. ,  vol. 6,  no. 3, 2018, doi: 10.26418/justin.v6i3.25770.
[6] F.  R.  Arfianto  and  F.  Nugrahanti,  “Rancang  Bangun  Aplikasi Penjualan  Perumahan  Berbasis  Web  Pada  Cv.  Grand  Permata Residence Magetan,” Semin.  Nas.  Teknol.  Inf.  dan  Komun. ,  vol.  1, no. 2017, 2018.
[7] S. Susanti, E. Junianto, and R. Rachman, “Implementasi Framework Laravel Pada Aplikasi Pengolah Nilai Akademik Berbasis Web,” J. Inform. UBSI , 2017, doi: 10.31311/JI.V4I1.1562.
[8] O.  I.  -  AMIK  BSI  Bekasi  and  G.  B.  A.  L.  -  AMIK  BSI  Bekasi, “Metode Rapid Application Development (RAD) pada Perancangan Website  Inventory  PT.  SARANA  ABADI  MAKMUR  BERSAMA (S.A.M.B) JAKARTA,” Evolusi  J. Sains dan Manaj. , vol. 6, no. 2, 2018, doi: 10.31294/evolusi.v6i2.4414.
[9] M.  Noor  and  R.  Sari,  “SISTEM  INFORMASI  KARTU
INVENTARIS BARANG BERBASIS WEB DI PERTAMBANGAN  DAN  ENERGI  KABUPATEN  TANAH
LAUT,” J. sains dan Inform. , 2017.
[10] N.  Fikri,  “APLIKASI  BERBASIS  WEB  UNTUK  PENDATAAN MASUK DAN KELUAR BARANG DAGANGAN PADA UMKM STUDI  KASUS:  CV.  TIARA  CELL  (COUNTER  GADGET  DAN AKSESORIS),” J. Ilmu Tek. dan Komput. , vol. 3, no. 2, 2019, doi: 10.22441/jitkom.2020.v3.i2.003.
[11] M.  Y.  Simargolang  and  N.  Nasution,  “Aplikasi  Pelayanan  Jasa Laundry Berbasis WEB (Studi Kasus : Pelangi Laundry Kisaran),” J. Teknol. Inf. , vol. 2, no. 1, 2018, doi: 10.36294/jurti.v2i1.402.
[12] F. Marisa and T. G. Yuarita, “PERANCANGAN APLIKASI POINT OF SALES (POS) BERBASIS WEB MENGGUNAKAN METODE SIKLUS  HIDUP  PENGEMBANGAN  SISTEM,” J.  Teknol.  dan Manaj. Inform. , vol. 3, no. 2, 2017, doi: 10.26905/jtmi.v3i2.1514.
[13] D.  Prasanti,  D.  Sri,  and  S.  Indriani,  “Pengembangan  Teknologi Informasi Dan Komunikasi Dalam Sistem E-Health Alodokter.Com the Use of Information and Communication Technology in E-Health System Alodokter.Com,” J. Sosioteknologi , vol. 17, no. 1, 2018.
[14]
F.  Fatoni  and  D.  Irawan,  “Implementasi  Metode  Extreme Programming  dalam  Pengembangan  Sistem  Informasi  Izin  Produk Makanan,” J.  Sisfokom  (Sistem  Inf.  dan  Komputer) ,  vol.  8,  no.  2, 2019, doi: 10.32736/sisfokom.v8i2.679.
[15] R.  S.  Pressman  and  B.  R.  Maxim, Software  Engineering :  A Practitioner’s Approach, Eighth Edition , vol. 66. 2015.
[16] A.  Rohman,  I.  Yatini,  J.  R.  Janti,  and  K.  J.  Yogyakarta,  “Aplikasi Asisten  Praktikum  Menggunakan  Node.js  dan  Database  MongoDB (Studi Kasus Lab STMIK AKAKOM),” 2016.
[17] S. Hoque, Full-Stack React Projects , Second Edi. Birmingham: Packt Publishing Ltd, 2020.
[18] V. Subramanian, Pro MERN Stack, Full Stack Web App Development with Mongo, Express, React, and Node . 2019.
[19] C.  Arief,  “Studi  Fitur  dan  Implementasi  Cloud  Based  DBMS MongoDB Atlas,” Universitas Katolik Parahyangan, 2019.
[20] I. Gita Anugrah and M. Aldi Rifai Imam Fakhruddin, “Development Authentication  and  Authorization  Systems  of  Multi  Information Systems Based REst API and Auth Token,” Innov. Res. J. , vol. 1, no. 2, 2020.
[21] A.  Ayuningtyas  and  A.  R.  Pramudi,  “UNDANGAN  PAPERLESS BERBASIS CLOUD COMPUTING DENGAN MEMANFAATKAN  CLOUDINARY,” Compiler ,  vol.  6,  no.  1, 2017, doi: 10.28989/compiler.v6i1.195.
[22] T.  Hidayat  and  M.  Muttaqin,  “Pengujian  Sistem  Informasi Pendaftaran  dan  Pembayaran  Wisuda  Online  menggunakan  Black Box Testing dengan Metode Equivalence Partitioning dan Boundary Value Analysis,” J. Tek. Inform. UNIS JUTIS , vol. 6, no. 1, 2018.
[23] Y.  Yulianingsih,  “Melindungi  Aplikasi  dari  Serangan  Cross  Site Scripting dengan Metode Metacharacter,” J.  Nas.  Teknol.  dan  Sist. Inf. , vol. 3, no. 1, 2017, doi: 10.25077/teknosi.v3i1.2017.83-88.