Sistem Reservasi Lapangan Futsal Berbasis Single Page
Application
Artikel Ilmiah
Peneliti:
Daniel Sallao (672011157) Christine Dewi, S.Kom., M.Cs.
Program Studi Teknik Informatika
Fakultas Teknologi Informasi
Universitas Kristen Satya Wacana
1
1. Pendahuluan
Bumi Tamalanrea Permai Futsal atau disingkat BTP Futsal merupakan salah satu tempat yang menyediakan jasa booking lapangan futsal yang ada di makassar. Berikut sedikit informasi tentang BTP futsal. BTP futsal buka setiap hari untuk umum mulai dari jam 9 sampai jam 23. Harga sewa disesuaikan dengan jam atau hari. Untuk hari senin sampai dengan jumat dari jam 9 sampai jam 17 harga sewa perjamnya adalah Rp.90,000 dan untuk jam 18 sampai jam 23 harga perjamnya naik menjadi Rp.100,000. Pada hari sabtu dan minggu harga sewanya naik menjadi Rp.100,000-120,000 perjam. BTP futsal memiliki 4 lapangan yang selalu ramai dibooking setiap harinya. Untuk jumlah pegawai BTP futsal memiliki 8 orang pegawai, yang terdiri dari 2 orang petugas atau juru parkir, 4 orang Pegawai kasir, dan 2 orang Pengawas lapangan. Rata-rata pelanggan menyewa lapangan antara 3 sampai 5 jam perbooking dan dengan rata-rata pendapatan perhari dikisaran Rp.3,600,000 tergantung dari banyaknya jumlah pelanggan.
Proses bisnis pada di tempat sewa lapangan futsal pada umumnya masih mengharuskan pelanggan untuk datang dalam melakukan booking dan mengatur jadwal booking yang diinginkan. Sehingga pelanggan tidak mengetahui jadwal yang masih kosong secara langsung. Setiap hari petugas melakukan pencatatan booking dari pelanggan ke buku pesanan. Pada hari penyewaan, pelanggan melakukan pembayaran penyewaan. Selain kurang praktis, hal ini juga dapat menimbulkan kesalahan dalam pencatatan. Selain kurang praktis, hal ini juga dapat menimbulkan kesalahan dalam pencatatan. berbeda dari tempat futsal pada umumnya BTP Futsal ingin memberikan pelayanan terbaik untuk para pelanggannya.
Dalam rangka meningkatkan pelayanan terhadap pelanggan, maka BTP futsal akan membuat sebuah sistem. Sistem yang dirancang dapat memudahkan pelanggan dalam melakukan reservasi lapangan futsal. Sistem yang dibangun akan berbasis web agar dapat diakses dimana saja. Pelanggan nantinya dapat melihat lapangan yang masih belum dibooking oleh orang lain.
Sistem web memang sangat memudahkan pengguna karena bisa diakses dimana saja asalkan pengguna memiliki browser dan internet. Tantangan utama dalam membangun sistem web adalah menjamin kecepatan akses dan jumlah bandwith yang digunakan. Kecepatan akses dari sistem harus dijamin agar pengguna merasa nyaman saat menggunakannya. Jumlah penggunaan bandwith juga berpengaruh pada kecepatan akses, semakin banyak data dan konten yang dimuat saat proses request dan response ke server akan membuat sistem lambat diakses. Melihat dua kendala utama dalam sistem web, maka sistem BTP futsal akan dibangun menggunakan konsep Single Page Application atau sering disebut SPA.
2
melakukan aksi (lihat, tambah, edit atau hapus), sistem tidak akan memuat ulang semua konten pada halaman, tetapi yang dimuat hanya data terbaru saja dari server. Hal ini sangat berbeda dengan cara kerja web tradisional pada umumnya dimana setiap aksi akan memuat ulang semua konten pada halaman yang bersangkutan. Kelebihan SPA dibanding web tradisional terletak pada efisiensi penggunaan data, respon yang lebih cepat dan juga tampilan yang lebih interaktif digunakan oleh pengguna.
Rumusan masalah yang dapat ditarik dari penelitian ini yaitu, bagaimana merancang sistem reservasi lapangan BTP Futsal menggunakan konsep Single Page Application. Adapun tujuan dari penelitian ini yaitu merancang sistem yang efisien dalam hal penggunaan bandwith dan kecepatan akses menggunakan konsep Single Page Application. Manfaat dari penelitian ini diharapkan dapat meningkatkan kualitas pelayanan BTP Futsal pada pelanggannya.
2. Kajian Pustaka
Penelitian yang berjudul “Implementasi Customer Relationship Management (CRM) pada Sistem Reservasi Hotel berbasis Website dan Desktop” permasalahan yang terjadi yaitu 1) bagaimana membuat aplikasi dekstop untuk mempermudah melakukan pemeasanan kamar, check in-check-out, 2) Bagaimana membuat website hotel sebagai media informasi dan pengunjung website dapat melakukan pemesanan kamar dengan mudah, 3) Bagaimana pihak hotel dapat melakukan relasi dengan customer melalui aplikasi desktop dan website. penelitian ini menggunakan Microsoft Visual Basic/VB.NET dan SMS Gateway. Hasil Penelitian menyimpulkan bahwa Aplikasi desktop yang dibuat memudahkan pihak hotel untuk dapat mengelola data master yang terdiri dari data tamu, data kamar, data fasilitas, dan data makanan. serta teknologi SMS Gateway yang berfungsi mengirim pesan singkat kepada tamu [1].
Penelitian yang berjudul “Rancang Bangun Sistem Informasi Reservasi Sewa Kamar Hotel Berbasis Web (Studi Kasus Hotel Gren Mandarin
3
Belakangan ini telah dikembangkan teknik antarmuka yang disebut Single Page Application (SPA). Istilah SPA merujuk pada aplikasi berbasis web yang hanya menampilkan satu halaman saja. Artinya, meskipun pengguna beralih ke menu lain, URL tidak menunjukkan perubahan. Semua komponen utama pada SPA, seperti CSS, skrip dan sumber daya lain yang diperlukan diambil pada satu waktu di halaman utama. Komponen atau konten yang sesuai diambil secara dinamis tergantung pada kebutuhan interaksi atau permintaan pengguna[3]
Representational State Transfer yang disingkat REST merupakan salah satu jenis arsitektur untuk penerapan web service yang menerapkan konsep perpindahan antar state [4]. Pada arsitektur REST, setiap service atau layanan dipandang sebagai sebuah Resources yang diidentifikasikan melalui URL. Web service REST memiliki karakteristik sebagai berikut : 1) Menggunakan method HTTP secara eksplisit; 2) Memiliki struktur direktori URI; 3) Pesan yang ditransfer dalam format XML, JSON atau keduanya.
JSON (Java Script Object Notation) adalah format pertukaran data yang ringan, mudah dibaca dan ditulis oleh manusia, serta mudah diterjemahkan dan dibuat (generate) oleh komputer. Format ini dibuat berdasarkan bagian dari bahasa pemrograman javascript. JSON terdiri dari dua struktur, yaitu : 1) Pasangan nama dengan nilai. Pada beberapa bahasa hal ini dinyatakan sebagai object, record, struct, dictionary, hashtable, keyedlist atau associative array; 2) Daftar nilai terurutkan (anorderedlist of values). Pada kebanyakan bahasa, hal ini dinyatakan sebagai array, vector, list atau sequence[5]
PHP adalah singkatan dari Hypertext PreProcessors, PHP saat ini adalah bahasa pemrograman interpreter yang paling banyak digunakan saat ini dikarenakan bersifat open source dan juga paling banyak didukung oleh banyak web server. PHP dapat digunakan oleh banyak sistem operasi dari Windows, Linux maupun BSD. PHP umumnya diintegrasikan dengan aplikasi database yang juga open source seperti MySQL maupun PostgreSql, tapi bisa juga diintegrasikan dengan Microsoft SQL, Access maupun Oracle [6].
JavaScript adalah bahasa scripting kecil, ringan, berorientasi objek yang ditempelkan pada kode HTML dan di proses di sisi client. JavaScript digunakan dalam pembuatan website agar lebih interaktif dengan memberikan kemampuan tambahan terhadap HTML melalui eksekusi perintah di sisi browser. JavaScript dapat merespon perintah user dengan cepat dan menjadikan halaman web menjadi responsif. JavaScript memiliki struktur sederhana, kodenya dapat disisipkan pada dokumen HTML atau berdiri sebagai satu kesatuan aplikasi.[7]
3. Metode Penelitian dan Perancangan Sistem
4
Gambar 1. Tahapan Penelitian
Tahapan penelitian pada Gambar 1 dapat dijelaskan sebagai berikut : Tahap pertama adalah studi literatur. Dalam tahap ini dilakukan kajian pustaka terkait teknologi SPA yang akan digunakan dan melakukan review dari penelitian-penelitian yang terkait. Tahap kedua adalah perancangan dan implementasi. Dalam tahap ini dilakukan perancangan konsep SPA yang nantinya akan diimplementasikan pada sistem BTP Futsal. Teknologi SPA yang digunakan yaitu AJAX pada sisi client dan REST API pada sisi server. Model pengembangan perangkat lunak yang digunakan adalah Model Prototipe. Tahap ketiga adalah analisis pengujian sistem. Dalam tahap ini dilakukan analisis untuk mengukur tingkat efektifitas dan efisiensi penggunaan data dan lama waktu loading setiap proses dari sistem BTP futsal yang sudah berbentuk SPA. Tahap keempat adalah penulisan laporan hasil penelitian. Dalam tahap ini dilakukan dokumentasi proses dari tahap awal sampai tahap akhir dalam bentuk tulisan.
Perancangan sistem dibutuhkan untuk membantu proses pengembangan dan untuk dokumentasi perangkat lunak sistem. Pada tahap ini, perancangan desain sistem dibangun dengan menggunakan Unified Modelling Language (UML) merupakan bahasa untuk visualisasi, spesifikasi, konstruksi, serta dokumentasi. Use case diagram menggambarkan fungsionalitas yang diharapkan dari suatu sistem. Use case diagram merepresentasikan sebuah interaksi antara aktor dengan sistem, seperti yang digambarkan dalam Gambar 2.
Studi Literatur
Perancangan dan Implementasi
Analisis Pengujian Sistem
5
Gambar 2. Use Case Sistem BTP futsal
6
Gambar 3. Class Diagram Sistem BTP futsal
Class diagram mendeskripsikan jenis-jenis obyek yang terlibat dalam suatu sistem. Class diagram memberikan gambaran yang lebih mendetail untuk suatu objek dengan menggambarkan dimana suatu informasi tersimpan dan fungsi apa saja yang dimiliki oleh masing–masing objek. Pada Gambar 3 merupakan desain class diagram sistem BTP futsal. Terdapat 5 entitas yang masing-masing memiliki fungsi create, read, update, dan delete.
Gambar 4. Activity Digram Sistem BTP futsal
7
menyimpan datanya ke database, kemudian status dari request dikirim ke client. Client kemudian menangkap status dari request tersebut agar dapat mengetahui apakah prosesnya berhasil atau gagal.
Gambar 5. Component Diagram Sistem BTP futsal
Gambar 5 menunjukkan arsitektur sistem pada sistem booking BTP futsal. bisa dilhat pada gambar terdapat web server Apache dan 2 client yaitu pelanggan dan petugas atau admin. dalam prosesnya pelanggan menggunakan PC pelanggan untuk memasukkan data kemudian mengirimkannya ke komponen server, untuk permintaan layanan tertentu yang dimiliki server. kemudian komponen server menerima permintaan layanan tersebut dan menyimpannya ke database MySQL kemudian memprosesnya. serta mengembalikan mengembalikan hasil pemrosesan kepada client. client pun menerima hasil pemrosesan data tadi dan menampilkannya ke PC pelanggan ataupun PC petugas yang bertugas untuk memonitor data yang diinput oleh pelanggan.
4. Hasil dan Pembahasan
8
Gambar 6. Desain halamanSistem Pendaftaran(Registrasi)BTP futsal
Gambar 6 menunjukkan proses Pendaftaran(registrasi) pada sistem yang telah menggunakan konsep SPA. dapat dilihat pada halaman web tersebut bahwa semua proses registrasi tersebut dilakukan pada 1 halaman web, begitupun pada saat akan log in (bagi yang sudah mendaftar sebagai member)Halaman web tidak melakukan reload halaman saat memproses sesuatu dan akan melakukan semua proses pada 1 halaman web dengan mengisi kolom/dialog yang tersedia.
Gambar 7. Desain halaman proses Booking BTP futsal
9
yang lain. Pada halaman ini juga tersedia fungsi untuk membatalkan booking lapangan, sehingga sangat praktis bagi para pelanggan.
Gambar 8. Desain halaman proses Pembayaran BTP futsal
Gambar 8 menunjukkan proses pembayaran yang diakses oleh petugas jaga, pada prosesnya petugas bisa mengecek booking lapangan dengan menginput nomor booking dari pelanggan. dengan sistem yang menggunakan konsep SPA Halaman web tidak melakukan reload halaman jika ada data baru diinput atau diupdate atau dihapus. dengan ini baik petugas dan pelanggan semakin dimudahkan dalam melakukan proses pembayaran.
Gambar 9. Data Booking lapangan BTP Futsal
10
booking, kode lapangan yang digunakan, harga sewa lapangan, dan pelunasan. Fitur laporan ini sangat memudahkan karyawan saat ingin merekap data booking per tanggal tertentu.
Semua fitur yang berbasis SPA akan menggunakan fungsi AJAX dari javascript untuk memproses data ke server. Kode program 1 menunjukkan fungsi AJAX pada sisi client yang digunakan untuk melakukan request penyimpanan data ke server. Kode program tersebut spesifik pada proses penyimpanan data saat registrasi member. Baris ketiga, menunjukkan alamat dari API yang dituju. Saat server telah menerima dan selesai memproses request tersebut, maka server akan mengembalikan response ke client. Pada baris 7 sampai 15, client akan mengecek response tersebut untuk mengetahui prosesnya berhasil atau gagal dilakukan oleh server. Semua proses yang terjadi dilakukan dibelakang layar oleh javascript, sehingga web tidak perlu melakukan reload halaman lagi.
Kode Program 1. Fungsi AJAX untuk menyimpan data ke server
1. function simpanData(){
2. $('#formData').form('submit',{
3. url: ‘api/member.php?action=save’,
4. onSubmit: function(){
5. return $(this).form('validate');
6. },
7. success: function(result){
8. var result = eval('('+result+')');
9. if (result.errorMsg){
10. $.messager.alert('Error',result.errorMsg,'warning');
11. } else {
12. $.messager.alert('Info','Data disimpan','info');
13. $('#dialogData').dialog('close');
14. }
15. }
16. });
17. }
11
Gambar 10. Google Chrome Developer Tools
Tabel 1 merupakan daftar fungsi yang menggunakan konsep SPA pada sistem BTP futsal. Pada tabel tersebut berisi nilai rata-rata size of page dan loading time setiap fungsi saat halamannya pertama kali diakses atau dibuka. Nilai size of page dihitung dalam satuan kilobytes dan nilai loading time dihitung dalam satuan milisecond. Nilai-nilai ini sudah mencakup semua konten halaman seperti html, css, javascript, dan lain-lain. Salah satu fitur yang dianalisis yaitu fitur Registrasi, terlihat bahwa saat halaman ini dibuka pertama kali, rata-rata berat konten yang didownload sekitar 13.5 kilobytes dengan loading time 698 milisecond. Jika dibandingkan dengan web tradisional, web tradisional umumnya akan selalu melakukan reload halaman saat memproses suatu fungsi sehingga nilai size of page dan loading time pada semua fungsi akan selalu sama seperti tabel 1.
Tabel 1. Daftar fungsi yang telah menggunakan konsep SPA
12 Data User
Data user 794 kb 772 ms
Tabel 2 merupakan daftar fungsi SPA beserta nilai penggunaan data saat client menerima data dari server, lebih teknisnya saat AJAX menerima response dari server. Nilai penggunaan data ini dihitung dalam satuan bytes. Tidak semua fungsi memiliki nilai untuk proses CRUD (create, read, update dan delete), contoh fungsi registrasi yang hanya memiliki proses create. Jika dianalisa, jumlah nilai-nilai tersebut sangat berbeda jauh dengan nilai pada tabel 1. Ini dikarenakan proses request AJAX hanya menerima response data dalam bentuk JSON dan tidak harus melakukan load ulang terhadap semua konten pada halaman. Sebagai contoh, fitur Registrasi yang sebelumnya pada tabel 1 membutuhkan setidaknya 13.5 kilobytes, pada tabel 2 hanya membutuhkan sekitar 256 bytes. Khusus untuk proses read, nilainya bergantung pada jumlah baris data yang telah diinput pada tabelnya.
Tabel 2. Penggunaan Data proses request dan response
Fungsi
Penggunaan Data (bytes)
Create (tambah) Read
(lihat)
Update (edit) Delete (hapus)
Pelanggan
* nilai tergantung pada jumlah data yang telah diinput dalam tabel
13
Tabel 3. Lama Waktu Loading proses request dan response
Fungsi
Penggunaan Data (bytes)
Create (tambah) Read
(lihat)
Update (edit) Delete (hapus)
Pelanggan
* nilai tergantung pada jumlah data yang telah diinput dalam tabel
Berdasarkan hasil analisa pada tabel diatas, saat pertama kali mengakses atau membuka suatu fungsi, proses loading semua konten halaman (html, css, javascript, dll.) cukup tinggi dan lama (tabel 1). Tetapi proses ini hanya dilakukan sekali tiap fungsi, setelah itu untuk proses CRUD akan ditangani oleh AJAX. Berdasarkan hasil analisa yang dilakukan, proses AJAX hanya membutuhkan sedikit data saat melakukan request maupun saat menerima response. Nilainya sangat berbeda jauh jika dibandingkan saat pertama kali mengaksesnya seperti pada tabel 1.
5. Simpulan
14 6. Daftar Pustaka
[1] Adelia, Jimmy, 2011, Implementasi Customer Relationship Management pada Sistem Reservasi Hotel Berbasis Website dan Dekstop, Jurnal Sistem Informasi Universitas Kristen Maranatha 6:2.
[2] W. Beni, 2014, Rancang Bangun Sistem Informasi Reservasi Sewa Kamar Hotel berbasis Web (Studi Kasus Hotel Gren Mandarin Pekalongan), http://eprints.unisbank.ac.id/2062/1/Skripsi%20komplet.pdf, Diakses Tanggal 11 Mei 2017.
[3] Ristyabudi, Aryani, Thamrin, Husni, 2016, “Penerapan Single Page Application Pada Proses Pengisian Online Data Rencana Studi Mahasiswa,” Jurnal Illmu Komputer dan Informatika, vol. 2:1-9. [4] R. M. Aminudin, K. Iman, and H. R. Rahman, 2013 “Perancangan dan
Implementasi RESTful Web Service untuk Game Sosial Food Merchant Saga pada Perangkat Android,” J. Tek. Pomits, 2:1.
[5] W. B. Aziz Abdul, Wiharto, 2013, “Pemanfaatan Web Service Moodle Berbasis REST-JSON,” Universitas Sebelas Maret.
[6] M. A. Budi, 2010, “Pengembangan Sistem Informasi Lapas Narkoba Untuk Menunjang Pengungkapan Kasus Narkoba di Lembaga Permasyarakatan Pada Puslitbang dan Info Badan Narkotika Nasional,” Universitas Gunadarma.
[7] Yatini, Indra, 2014, “Aplikasi Pengolahan Citra Berbasis Web
