p-ISSN : 2460-3562 / e-ISSN : 2620-8989

## Sistem Penyewaan Lapangan Futsal Berbasis Web Kota Palembang Menggunakan Express JS dan React JS
Apriansyah a1 , Riski Ananda b2 , Zulhipni Reno Saputra Elsi a,b3
a,b,c Program Studi Teknologi Informasi, Universitas Muhammadiyah Palembang
1* apriansyah@um-palembang.ac.id
2 risskian1234@gmail.com
3 zulhipni_renosaputra@umpalembang.ac.id

## Abstrak
Futsal merupakan  salah  satu olahraga  yang  paling  banyak  digemari  oleh hampir semua  kalangan  usia  di  Kota Palembang. Pada saat ini proses pemesanan lapangan  futsal masih dilakukan dengan cara calon penyewa harus datang langsung datang ke tempat penyedia lapangan yang dapat memakan waktu dan mendapatkan info yang tidak valid terkait lapangan yang akan dipesan, sehingga perlu adanya sistem yang dapat memberikan informasi serta  mengelola  data  lapangan  futsal  untuk  mendapatkan  apa  yang  diharapkan.  Di  era  digitallisasi  seperti sekarang  ini  kemudahan  dalam  mendapatkan  informasi  sangat  mempengaruhi  kinerja  dalam  bidang  apapun oleh  karena  itu  dalam  penelitian  ini  penulis  membangun  sebuah sitem  yang dapat  mempermudah pemesanan dan Penyewaan Lapangan Futsal Berbasis Web di Kota Palembang Menggunakan Express JS dan React JS. Sistem ini  dikembangkan  dengan  menggunakan  metode  prototype,  prototype  merupakan  pendekatan  dalam pengembangan perangkat lunak atau sistem dengan beberapa langkah dalam metode ini yaitu mengidentifikasi kebutuhan  pengguna,  perancangan  prototype  berdasarkan  kebutuhan,  pembangunan  prototype,  evaluasi pengujian, refining dan iterasi, dan pengembangan produk final.
Kata kunci: Sistem, Penyewaan, Futsal, Prototype

## Palembang City Web-Based Futsal Field Rental System Using Express JS and React JS

## Abstract
Futsal is one of the most popular sports for almost all ages in the city of Palembang. At this time the process of ordering the futsal field is still being carried out through prospective tenants having to come directly to the field provider's place which can take time and get invalid information regarding the field to be ordered, so there is a need  for  a  system  that  can  provide  information  and  manage  futsal  field  data  to  get  what  is  expected.  In  the current era of digitalization, the ease of obtaining information greatly affects performance in any field, therefore in  this  study,  the  authors  built  a  system  that  can  facilitate  ordering  and  rental  of  Web-based  Futsal  Fields  in Palembang City using Express JS and React JS. This system was developed using the prototype method, prototype is  an  approach  in  developing  software  or  systems  with  several  steps  in  this  method,  namely  identifying  user needs,  designing  prototypes  based  on  needs,  building  prototypes,  evaluating  tests,  refining  and  iteration,  and developing final products.
Keywords: System, Rental, Futsal, Prototype

## I. P ENDAHULUAN
Olahraga adalah ssuatu kegiatan jasmani untuk melatih ketahanan  dan  kesehatan  fisik,  olahraga  merupakan cabang  ilmu  fisiologi  yang  mempelajari  prubahan fisiologis di tubuh pada saat seseorang sedang berolahraga. Dengan berolahraga seseorang bias medapatkan perubahan  bentuk  tubuh  yang  optimal  seuai  dengan  yang diharapkan[1].  Salah  satu  olahraga  yang  banyak digandrungi  adalah  futsal,  dengan  semakin  banyaknya peminat  olaraga  futsal  maka  meningkat  juga  terhadap pemesanan lapangan futsal.
Penggunaan  teknologi  informasi  dinilai  penting  untuk meningkatkan efesiensi dan efektivitas dalam mendapatkan informasi  yang valid serta pengelolaan data yang tepat  dapat menguntungkan bagi organisasi maupun individu[2].  Dengan  memanfaatkan  teknologi  untuk memaksimalkan  dalam  mendapatkan  keuntungan  dari sebuah  usaha  contohnya  penyewaan  lapangan  futsal, pemesanan lapangan futsal pada umumnya mengharuskan pelanggan  datang  langsung  ke  tempat  penyedia  lapangan futsal  untuk  melakukan  reservasi  dan  mengatur  jam bermain yang diinginkan[3].
Sistem  pemesanan  lapangan  futsal  dengan  cara langsung datang kelokasi ini cukup merepotkan bagi pihak
penyewa  dan  menjadi  kurang  efesien  waktu,  tenaga  dan biaya  karena  penyewa  harus  mendatangi  langsung  ke lokasi  tempat  futsal  untuk  melakukan  pengecekan lapangan  dan  pemesanan  lapangan,  belum  lagi  kendala lapangan yang tersedia penyewa tidak mengetahui apakah ada lapangan tersedia atau tidak jika pemesanan dilakukan secara  langsung  datang  kelokasi  penyedia  penyewaan lapangan  futsal.  Hal  ini  membuat  kerugian  untuk  para calon  penyewa  karna  keterbatasan  informasi  tentang lapangan  yang tersedia.
Untuk  mengatasi  masalah  tersebut  dibangunlah  sebuah sistem  yang  dapat  mengelola  data  lapangan  sehingga memberikan  kemudahan  bagi  penyewa  dan  pengelola dalam  mengelola  data  sewa  lapangan  menggunakan website, karena website merupakan  media  informasi yang didalamnya  terdapat  database  yang  bias  menampung banyak  data  termasuk  data  sewa,  data  lapangan, dan  data pemasukan.

## II. METODOLOGI PENELITIAN
Penelitain  yang  dilakukan  berfukus  pada  analisi terhadap  tingkat  ke  efektifan  data  dan  keakuratan  dalam mendapatkan  informasi  pada  penyediaan  lapangan  futsal kota  palembang.  Analisis  layanan  TI  yang  dilakukan mencakup  dua hal, yaitu layanan digital ( software, tackle dan  Sumber  Daya  Manusia ),  dan  analisis  layanan informasi (website)[4].
Penelitian  dilakukan  dengan  menggunakan  metode penelitain  kualitatif,  metode  kualitatif  adalah  pendekatan penelitian  yang  digunakan  untuk  memahami  fenomena sosial  mendalam,  kompleks,  dan  holistik.  Metode  ini bertujuan untuk mendapatkan wawasan terhadap bagaimana cara orang memahami dan memberikan makna terhadap lingkung di sekitar mereka[5] .

## A. Kerangka Penelitian
Kerangka Penelitian Kerangka penelitian adalah konsep pada  penelitian  yang  saling  berhubungan,  dimana penggambaran  variable  satu  dengan  lainnya  agar  bisa terkoneksi secara detail dan sistematis.

## B. Identifikasi Masalah
Indentifikasi    masalah  dilakukan  dengan  melakukan observasi  secara  langsung  ke  setiap  penyedia  lapangan futsal  kota Palembang  untuk  mengetahui  kekurangan  dan ketidak  efektipan  data  yang  diterima  oleh  para  pemesan lapangan.  Selain  itu  juga  dilakukan  wawancara  kepada pemesan lapangan futsal dengan tujuan untuk mengumpulkan informasi dan data-data.

## C. Analisa Kebutuhan Sistem
Berdasarkan indetifikasi masalah yang ada diatas maka dibuatlah  sebuah  system  yang  dapat  memenuuhi kebutuhan  pemesan  dan  penyedia  lapangan  yang dijelaskan pada table dibawah ini:

## TABEL 1 ANALISA KEBUTUHAN SISTEM
No Kebutuhan Sistem
1 Tampilan  user  interface  yang  menarik  dan  mudah  untuk dipahami
2 Dapat  memanajemen  semua  lapangan  para  penyedia penyewaan lapangan futsal
3 Menampilkan informasi terkait lapangan yang tersedia
4 Penyedia  lapangan  futsal  dapat  dengan  memudahkan memasarkan lapangan
5 Penyedia  lapangan  futsal  dapat  memantau  pendapatan  atau banyaknya lapangan yang dipesan
6 Memudahkan pelanggan dalam pemesanan lapangan
7 Memudahkan  pelanggan  dalam  mendapatkan  informasi tentang lapangan
8 Jadwal pemesanan lapangan yang fleksible 9 Pelanggan dapat melihat detail lapangan yang akan dipesan
10 Pemilik lapangan dapat melakukan edit dan tambah lapangan
11 Admin  mendapatkan  keuntungan  dari  setiap  lapangan  yang dipesan

## D. Menentukan Framework Express JS dan React JS
Dalam pengembangn system backend peneliti menggunakan  framework  express  js.  Express  js  adalah framework    dengan  cara  kerja  efesien  serta  dibekali dengan  berbagai  keunggulan,  seperti  integrasi  dengan arsitektur  lain.  Hal  ini  membuat  express  js  lebih  banyak digunakan karna dapat mempermudah dalam pengembangan sistem dengan menggunakan konsep MVC (Model,  View,  dan  Controller)  yang  berguna  untuk mempercepat pengembangan system[6] .
Sedangkan  untuk  pengembangan  client  side  atau frontend  peneliti  menggunakan  framework  react  js  untuk mempermudah  dalam  pembangunan  user  interface.  React js  merupakan  kerangka  kerja  open  source  yang menggunakan  library  javascript  unutk  membuat  user interface yang interaktif dan mudah unutk dikembangkan[7]. E. Metode Penelitian Metode penelitian yang digunakan dalam pengembangan  system  penyewaan  lapangan  futsal  ini, peneliti menggunakan metode prototype unutk mempermudah proses pengembangan system dan mendapatkan  hasil  yang  di  inginkan.  sebuah  prototypr
adalah  versi  awal  dari  sebuha  pengembangn  system perangkat lunak yang akan digunakan untuk mendemonstrasikan konsep-konsep, rancangan dan menemukan masalah serta mencari solusi yang memungkinkan[8] .
Gambar 2. Prototyping Model oleh Khosrow-Pour [9].

## F. Metode Pengumpulan Data
Metode pengumpulan data adalah proses atau cara yang digunakan  untuk  mengumpulkan  informasi  atau  data  dari berbagai  sumber,  dalam  pengembangn  system  ini  penulis menggunakan  dua  metode  pengumpulan  data  dijelaskan dibawah ini.
1. Observasi, melakukan
pengeamatan
bagaimana  cara  pemesanan  lapangan  futsal yanga  ada,  serta  memahami  bagaimana  cara mempermudah  pemesanan  lapangan  futsal dengan memanfaatkan teknologi unutk mendapatkan  informasi  yang  valid  dan pengaturan jadwal yang fleksible.
2. Wawancara, berinteraksi dengan para pemesan lapangan  futsal  tentang  kurangnya  informasi yang di dapat dan kefektifan data pemesan.

## G. Pengembangan System
Setelah  melakukan  pengumpulan  data  langkah selanjutnya  melakukan  pemodelan  use  case. Tahapan  ini dilakukan  untuk  memvisualisasikan  semua  kebutuhan yang  dimiliki  oleh  sistem. .  Dalam  sistem      penyewaan lapangan  futsal  terdapat  3aktor,  yaitu  user,  admin,  dan super  admin.  Kebutuhan  dibuat  berdasarkan  data  yang didapat  melalui  beberapa  metode  yang  sudah  dilakukan diatas yang dijelaskan pada table dibawah ini.
TABEL 2

## PENENTUAN AKTOR
Aktor Keterangan User User  merupakan  actor  yang  menggunakan system  untuk  melakukan  pemesananlapangan dan melihat data lapangan yang tersedia
Admin  Admin  adalah  actor  yang  dapat  mengisikan data  lapangan,  edit,  dan  delet  lapangan  serta melihat data lapangan yang sudah di pesan
Supe Admin
Super admin adalah actor yang memiliki akses penuh untuk mengelola data lapangan dan data pemesanan lapangan
Langkah  berikutnya  setelah  menentukan  actor  atau siapa  saja  yang  dapat  berinteraksi  dengan  system selanjutnya  melakukan  pembuatan  alur  kerja  dan  desain system  UML  (Unified  Modeling  Language)  digunakan untuk memeberikan gambaran atau visualisasi pada model sistem  perangkat  lunak  yang  akan  dikembangkan,  UML juga  dapat  membantu  dalam  pengembangan  perangkat lunak  berkualitas  tinggi  dalam  jangka  waktu  yang rasional[10].
Use  case  diagram  adalah  diagram  yang  digunakan untuk  menggambarkan  secara  ringkas  actor-actor  yang berinteraksi dengan system untuk mempermudah pengembangan system[11].
Class diagram merupakan diaram berisi hubungan antar kelas dan penjelasan detail mengenai setiap kelas didalam model desain  suatu  sistem. Class diagram  juga menunjuk atribut-atribut  yang  saling  terhubung  dengan  objek  yang dikoneksikan[12].
Gambar 4. Class Diagram
Flowchart  adalah  bagaian  penggambaran  secara  grafik dari  langkah-langkah  atau  arus  logika  dari  data  yang nantinya akan diproses dari suatu program mulai dari awal sampai akhir[13].
Sequence  diagram  adalah  suatu  diagram  yang menggambarkan  bagaimana  objek-objek  berinteraksi didalam  sebuah  sistem.  Objek  yang  berinteraksi  adalah kelas  atau  komponen  program[14].  Sequence  berfukus pada  urutan-urutan  waktu  pengiriman  pesan.  Pada sequence diagram ini ditekankan apa saja yang terjadi dari tahap satu, kedua, dan seterusnya mewakili waktu secarag grafis[15].
Gambar 6. Sequence Diagram
III. HASIL DAN PEMBAHASAN
A. Tampilan Landingpage Halaman ini digunakan untuk melihat semua lapangan baik  yang  tersedia  maupun  tidak  tersedia,  halaman  ini juga  menampilkan  halaman  detail  dari  lapangan  yang akan di lihat.
Gambar 7. Tampilan Landing Page
Pada  setiap  data  lapangan  terdapat  halaman  detail, berikut ini adalah tampilan halaman detail.
B. Halaman Login Halaman  ini  digunakan  untuk  masuk  ke  menu  utama agar  dapat  mengelola  data  contohnya  informasi  tentang lapangan  yang  akan  disewakan.  Halaman  ini  terdiri  dari form  admin  dan  form  login  untuk  mengakses  aplikasi tersebut.
Gambar 9. Tampilan Login
C. Halaman Registrasi Berisi Form Register untuk user melakukan pendaftara n untk login ke Halaman Dashboard.
Gambar 10. Tampilan Registraasi
D. Halaman Dashboard (User) Halaman  ini  berfungsi  untuk  melihat  semua  data pesanan yang sudah dilakukan user.
Gambar 11. Tampilan Dashboard (User)
E. Halaman Data Order (User) Halaman  ini  berfungsi  untuk  user  bias  melihat  semua data  pemesanan  lapangan  yang  sudah  dilakuakn, berserta keterangan lunas atau belum lunas.
Gambar 12. Halaman Data Order (User)

## F. Halaman Dashboard (Admin)
Halaman  ini  untuk  terdiri  dari  menginput  data lapangan,  edit  data  lapangan,  delet  data  lapangan  dan  list data  lapangan,  halaman  ini  juga  dapat  melihat  list  data pesanan dan edit data pesanan.
Gambar 13. Tampilan Dashboard (Admin)
G. Halaman Product (Admin)
Halaman ini berisi  berbagai  macam  fitur diantaranya edit  data  lapangan,  input  data  lapangan  dan  delete  data lapangan.
Gambar 14. Tampilan Product (Admin)
H. Halaman Add Product (Admin) Halaman ini berfungsi untuk melakukan menambah d ata lapangan baru yang akan disewakan.
Gambar 15. Tampilan Add Product (Admin)

## I. Halaman Edit Product (Admin)
Halaman ini digunakan untuk mengedit atau merubah data  lapangan  yang  diinputkan  admin,  jika  terjadi kesalahan  atau  perubahan  saat  menambahkan  data lapangan baru.
Gambar 16. Tampilan Edit Product (Admin)
J. Halaman Riwayat (Admin)
Halaman  ini  untuk  melihat  data  lapangan  mana  saja yang  sudah  di  pesan  dan  halaman  ini  juga  memungkin admin untuk melihat nama penyewa lapangan.
Gambar 17. Tampilan Riwayat (Admin)
K. Halaman Edit Riwayat (Admin)
Halaman  ini  berfungsi  untuk  memperbaharui  data Pemesan lapangan, setelah melakukan pembayaran secara langsung di lokasi lapangan futsal.
Gambar 18. Tampilan Edit Riwayat (Admin)
L. Halaman Dashboard (Super Admin)
Halaman  ini  berfungsi  untuk  pemilik  website atau  sistem  untuk  melihat  dan  memantau,  semua kegiatan yang dilakukan oleh user dan admin.
Gambar 19. Tampilan Dashboard (Super Admin)
M. Halaman Product (Super Admin)
Halaman  ini  berfungsi  untuk  memantau  atau monitoring  semua  data  lapangan  yang  diinputkan  oleh admin.
Gambar 20. Tampilan Product (Super Admin)
N. Halaman Edit Product (Super Admin)
Halaman ini memungkinkan Super Admin Mengrubah  atau  menambahkan  pembaruan  pada lapangan yang diinputkan oleh admin.
Gambar 21. Tampilan Edit Product (Super Admin)

## O. Halaman Riwayat (Super Admin)
Halaman  ini  menampilkan  riwayat  penyewaan lapangan  dan  data  pemasukan  super  admin  dari  setiap pemesanan lapangan.
Gambar 22. Tampilan Riwayat (Super Admin)
P. Halaman Edit Riwayat (Super Admin) Halaman ini memingkin admin untuk  memperbaharui riwayat  penyewaan  lapangan  dan  status  dari  setiap pemesanan lapangan
Gambar 23. Tampilan Edit Riwayat (Super Admin)

## IV  KESIMPULAN
A. Kesimpulan
Setelah  menganalisis  sistem  penyewaan  lapangan futsal  berbasis  web  kita  dapat  membantu  pengelola  agar tidak  lagi  menggunakan  cara  lama  dalam  melakukan penyewaan lapangan futsal:
1. Dengan  adanya  pembuatan  website  ini  akan meningkatan  terjadinya  keuntungan  dari penyedia lapangan futsal.
2. Penyewa  lapangan  futsal  mengimplentaskan dirancang menggunakan JavaScript, Node JS, Express Js dan MYSQL..
B. Saran
Pengembangan  Sistem  yang  peneliti  lakukan mungkin  masih  banyak  kekurangan  dan  kelemahan dalam menangani permasalahan yang ada, dan penulis memberikan saran kepada peneliti selajutnya.
1. Disarankan  pada  peneliti  selanjutnya supaya  sistem  ini  dapat  dikembangkan dengan  berbasis  mobile  sesuai  dengan perkembangan teknologi smartphone 2. Diharapkan  kepada  penyedia  lapangan futsal agar melakukan pelatihan terhadap  penggunaan  sistem  ini  supaya penggunaannya lebih baik dan efisien

## UCAPAN TERIMA KASIH
PENELITIAN INI TIDAK AKAN BERJALAN TANPA DUKUNGAN DARI UNIVERSITAS PENELITI, UNIVERSITAS MUHAMMADYAH PALEMBANG, DOSEN PEMBIMBING DAN DOSEN PENGUJI. TERIMA KASIH.

## DAFTAR PUSTAKA
[1] N. Anggriawan, “Peran Fisiologi Olahraga Dalam Menunjang Prestasi,” vol. 11, pp. 8–18, 2015.
[2] A. N. Rahma, “Aplikasi Penyewaan Lapangan Futsal Berbasis Web,” Edumatic J. Pendidik. Inform. , vol. 4, no. 2, pp. 30–39, 2020, doi: 10.29408/edumatic.v4i2.2412.
[3] A.  Merdekawati,  L.  .  Rahayu,  and  W.  Yulianti,  “Sistem
Informasi  Penyewaan  Lapangan  Futsal  Berbasis  Web  Pada Futsal  Stadion  Bekasi,” J.  Inform.  dan  Rekayasa  Perangkat Lunak , vol. 3, no. 2, p. 100, 2021, doi: 10.36499/jinrpl.v3i2.4499.
[4] A. ALEKSI and M. Afrina, “Pengukuran Tingkat Kematangan Layanan  Ti  Pada  Upt  Perpustakaan  Universitas  Sriwijaya Menggunakan  Framework  Cobit  2019,”  vol.  11,  no.  3,  2022, doi: 10.26418/justin.v11i3.58520.
[5] Sugiyono. Metode Penelitian Kuantitatif, Kualitatif dan R&D. Bandung: PT Alfabet, 2016 [6] A. Amarulloh, Kurniasih, and Muchlis, “Analisis Perbandingan  Performa  Web  Service  Rest  Menggunakan Framework  Laravel,  Django,  dan  Node  JS  pada  Aplikasi Berbasis Website,” J. Tek. Inform. Stmik Antar Bangsa , vol. 9, no. 1, pp. 12–17, 2023.
[7] Khuat  and  Tung,  “Developing  a  frontend  application  using
ReactJS  and  Redux,” Laurea  Univ.  Appl.  Sci. ,  p.  61,  2018, [Online]. Available: https://www.theseus.fi/bitstream/handle/10024/150837/Tung_ Khuat_1301747_Thesis.pdf [8] Sommerville Ian, Software engineering, 9TH EDITIO. Boston: Addison-wesley, 2007. [9] M.  Khosrow-Pour,  Encyclopedia  of  Information  Science  and Technology. IGI Global, 2005.
[10] J.  Zheng,  Y.  Feng,  and  Y.  Zhao,  “A  unified  modeling language-based  design  and  application  for  a  library management  information  system,” Cybern.  Inf.  Technol. ,  vol. 14,  no.  SpecialIssue,  pp.  129–144,  2014,  doi:  10.2478/cait- 2014-0050.
[11] M.  R.  Manalu,  “Implementasi  Sistem  Informasi  Penyewaan Mobil Pada Cv. Btn Padang Bulan Dengan Metode Waterfall,” Manaj. dan Inform. Komput. Pelita Nusant. , vol. 18, no. 2, pp. 34–43, 2015, [Online]. Available: endymanalu18@yahoo.co.id [12] A.  Hendini,  “Pemodelan  UML  SIstem  Informasi  Monitoring Penjualan  dan  Stok  Barang  (Studi  Kasus:  Distro  Zhezha Pontianak),” Commun.  ACM ,  vol.  25,  no.  1,  pp.  27–47,  1982, doi: 10.1145/358315.358387.
[13] D.  Pratama  and  N.  Sariana,  “Rancang  Bangun  Sistem Informasi  Penyewaan  Kendaraan  Berbasis  Web,” J.  Sist.  Inf. dan  Sains  Teknol. ,  vol.  1,  no.  1,  pp.  1–10,  2019,  doi: 10.31326/sistek.v1i1.321.
[14] T. Poranen, E. Makinen, and J. Nummenmaa, “How to Draw a
Sequence  Diagram,”  no.  Project  51528,  2023,  [Online]. Available:  https://www.lucidchart.com/pages/how-to-draw-a- sequence-diagram-in-UML [15] I.  Y.  Song,  “Developing  sequence  diagrams  in  UML,” Lect. Notes Comput. Sci. (including Subser. Lect. Notes Artif. Intell. Lect. Notes Bioinformatics) , vol. 2224, pp. 368–382, 2001, doi: 10.1007/3-540-45581-7_28.