Sistem Penyewaan Lapangan Badminton

LAPORAN AKHIR
SISTEM PENYEWAAN LAPANGAN BADMINTON PADA

GOR HARMONI SEI ROTAN BERBASIS WEB
Diajukan Oleh:
FITRI INDRIANI
NIM. 2005102069
PROGRAM STUDI MANAJEMEN INFORMATIKA

JURUSAN TEKNIK KOMPUTER DAN INFORMATIKA
POLITEKNIK NEGERI MEDAN
MEDAN
2023
PERNYATAAN ORISINALITAS
Yang bertandatangan di bawah ini :

Nama : Fitri Indriani
NIM : 2005102069
Judul Laporan Akhir : Sistem Penyewaan Lapangan Badminton Pada Gor
Harmoni Sei Rotan Berbasis Web
Menyatakan dengan sebenarnya bahwa Laporan Akhir ini secara keseluruhan

merupakan karya orisinal saya sendiri, bukan plagiasi sebagian atau keseluruhan
dari karya tulis orang lain kecuali pada bagian-bagian yang dirujuk sebagai
sumber pustaka sesuai dengan aturan penulisan yang berlaku.
Demikian pernyataan ini dibuat tanpa adanya paksaan dari pihak manapun. Saya
siap menanggung resiko / sanksi yang dijatuhkan kepada saya apabila kemudian
ditemukan adanya pelanggaran terhadap kejujuran akademik atau etika keilmuan
dalam karya ini, atau ditemukan bukti yang menunjukkan ketidakaslian karya ini.
i
LEMBAR PENGESAHAN
ii
LEMBAR PERSEMBAHAN
“Allah tidak membebani seseorang melainkan sesuai dengan kesanggupannya“

(Q.S Al-Baqarah Ayat 286)
“Karena sesungguhnya sesudah kesulitan itu ada kemudahan“

(Q.S Al-Insyirah Ayat 5)
Jangan takut pada luka dan sakit

Apa yang terjadi, jangan gentar
Pergi untuk mencari impian milikmu
Meskipun ada yang menghalangi untuk sampai ke tujuan
~JKT48~
“Jangan protes sama proses!“

(Yessica Tamara)
Dengan segenap hati, laporan akhir ini dipersembahkan untuk

Orang tua saya yang telah memotivasi saya akan segala hal dalam hidup ini.
iii
ABSTRAK
Badminton merupakan salah satu olahraga yang paling diminati di Indonesia. Di
zaman modern ini masih banyak tempat badminton yang menggunakan cara
booking manual seperti pertemuan empat mata atau janji melalui telepon,
penulisan janji pada kertas, dan lain sebagainya. Untuk itu tujuan penelitian ini
adalah membangun sistem penyewaan lapangan badminton berbasis web pada
Gor Harmoni Sei Rotan untuk memudahkan pengguna melihat jadwal lapangan,
melakukan pemesanan, dan pembayaran lapangan secara online. Sistem ini dibuat
menggunakan metode waterfall dengan bahasa pemrogaman PHP dan HTML.
Pengujian sistem ini menggunakan pengujian Back box. Hasil dari penelitian ini
menghasilkan sistem penyewaan lapangan badminton berbasis web untuk
membantu pemilik lapangan memberikan informasi mengenai lapangan serta
membantu pengguna untuk melakukan penyewaan dan pembayaran melalui
sistem secara cepat dan mudah.
Kata Kunci : Badminton, Penyewaan Lapangan, Berbasis Web.
iv
ABSTRACT
Badminton is one of the most popular sports in Indonesia. In this modern era there
are still many badminton venues that use manual booking methods such as one-
on-one meetings or telephone appointments, writing appointments on paper, and
so on. For this reason, the purpose of this research is to build a web-based
badminton court rental system at Gor Harmoni Sei Rotan to make it easier for
users to view court schedules, make reservations, and pay for courts online. This
system was created using the waterfall method with the PHP and HTML
programming languages. Testing this system using Back box testing. The results
of this study resulted in a web-based badminton court rental system to help court
owners provide information about the court and help users to make rentals and
payments through the system quickly and easily.
Keywords: Badminton, Booking Field, Web Based.
v
KATA PENGANTAR
Puji syukur penulis ucapkan kepada Allah SWT karena berkat rahmat dan
anugerahnya penulis dapat menyusun dan menyelesaikan Laporan Tugas Akhir
yang berjudul “Sistem Penyewaan Lapangan Badminton Pada Gor Harmoni Sei
Rotan Berbasis Web” ini dengan baik dan tepat pada waktunya.
Adapun penyusunan Laporan Tugas Akhir ini diajukan untuk melengkapi
program perkuliahan Diploma III pada Jurusan Teknik Komputer dan Informatika
Program Studi Manajemen Informatika Politeknik Negeri Medan. Dalam proses
penyusunan Laporan Tugas Akhir ini penulis tentunya mengalami beberapa
kesulitan dan hambatan, namun berkat bantuan dan dukungan dari berbagai pihak,
akhirnya semua hambatan dan kesulitan tersebut dapat diselesaikan. Oleh karena
itu, penulis banyak mengucapkan terima kasih kepada pihak – pihak yang terlibat
secara langsung maupun tidak langsung di dalam menyelesaikan laporan tugas
akhir ini, yaitu :
1. Bapak Kadri Yusuf, S.T., M.Kom. selaku Ketua Jurusan Teknik Komputer
dan Informatika.
2. Bapak Arif Ridho Lubis, B.IT., M. Sc.IT. selaku Kepala Program Studi
Manajemen Politeknik Negeri Medan.
3. Ibu Wiwin Sry Adinda Banjarnahor, S.Kom.,M.Sc. selaku Dosen
Pembimbing yang telah banyak membantu dalam proses pembuatan Tugas
Akhir.
4. Seluruh staf dan dosen pengajar Jurusan Teknik Komputer dan Informatika
Politeknik Negeri Medan.
5. Pengelola Gor Harmoni Sei Rotan yang telah memberi ijin kepada penulis
untuk melakukan riset dan memberikan data yang penulis perlukan.
6. Teristimewa kepada kedua orang tua tercinta yaitu Ayah Khazali dan Umi Ida
Elfiani yang telah memberikan doa dan motivasi serta semangat kepada anak
bungsu mereka.
7. Kakak pertama Shilvina Afriani, abang satu-satu nya Yashir Denhas dan
kakak yang selalu menjadi teman berantem yaitu Nurul Apriliani yang telah
memberikan semangat dan nasihat kepada adik tersayang mereka.
vi
8. Seseorang yang selalu bertanya akan setiap proses tugas akhir saya, yang
hanya geleng kepala jika saya menunda segala hal, siapa lagi kalau bukan
Nurul Aini Perangin-angin, terima kasih sudah menjadi support system
terbaik.
9. Seseorang yang telah menemani saya selama setahun belakangan, yang
terkadang menunda jam tidur nya untuk menemani saya yang tidak sanggup
bergadang ini, terima kasih sudah bucin.
10. Terima kasih kepada diri sendiri yang telah sampai pada tahap ini.
11. Seluruh pihak yang tidak dapat disebutkan satu per satu. Terima Kasih atas
doa dan dukungannya. Semoga kita selalu dalam lindungan Tuhan Yang
Maha Esa.
Penulis menyadari bahwa dalam penulisan Laporan Tugas Akhir ini masih belum
sempurna, untuk itu penulis sangat mengharapkan kritik dan saran yang bersifat
membangun dari berbagai pihak sehingga laporan ini menjadi lebih baik lagi.
Penulis berharap semoga Tugas Akhir ini dapat bermanfaat untuk semua pihak
manapun yang membaca.
Medan, 14 Juli 2023

Penulis,
Fitri Indriani
NIM. 2005102069
vii
DAFTAR ISI
Halaman
PERNYATAAN ORISINALITAS.......................................................................................i
LEMBAR PENGESAHAN.................................................................................................ii
LEMBAR PERSEMBAHAN.............................................................................................iii
ABSTRAK..........................................................................................................................iv
ABSTRACT.........................................................................................................................v
KATA PENGANTAR........................................................................................................vi
DAFTAR ISI....................................................................................................................viii
DAFTAR TABEL................................................................................................................x
DAFTAR GAMBAR.........................................................................................................xii
DAFTAR LAMPIRAN.....................................................................................................xiv
BAB 1..................................................................................................................................1
PENDAHULUAN...............................................................................................................1
1.1 Latar Belakang.....................................................................................................1
1.2 Rumusan Masalah................................................................................................2
1.3 Batasan Masalah..................................................................................................2
1.4 Tujuan Tugas Akhir.............................................................................................3
1.5 Manfaat Tugas Akhir...........................................................................................3
1.6 Sistematika Penulisan..........................................................................................3
BAB 2 TINJAUAN PUSTAKA..........................................................................................5
2.1 Penelitian Terdahulu............................................................................................5
2.2 Landasan Teori.....................................................................................................7
2.2.1 Metode Waterfall.........................................................................................7
2.2.2 Framework Laravel......................................................................................8
2.2.3 Blackbox Testing.........................................................................................8
2.2.4 Unified Modelling Language (UML)...........................................................9
2.2.5 Use Case Diagram........................................................................................9
2.2.6 Activity Diagram........................................................................................10
2.2.7 Class Diagram............................................................................................11
BAB 3 METODE PENELITIAN......................................................................................13
3.1 Metode Pengembangan Sistem..........................................................................13
3.2 Alat dan Bahan...................................................................................................13
3.2.1 Alat.............................................................................................................13
viii
3.2.2 Bahan.........................................................................................................14
3.3 Metode Pengumpulan Data................................................................................14
3.4 Analisis Sistem...................................................................................................16
3.4.1 Analisis Sistem yang Berjalan...................................................................16
3.4.2 Evaluasi Sistem yang Berjalan...................................................................18
3.4.3 Analisis Pengguna......................................................................................18
3.5 Langkah Perancangan........................................................................................19
3.5.1 Perancangan Sistem...................................................................................19
3.5.2 Use Case Diagram......................................................................................19
3.5.3 Activity Diagram........................................................................................29
3.5.4 Class Diagram............................................................................................36
3.5.5 Perancangan Basis Data.............................................................................37
3.5.6 Perancangan Antar Muka Sistem...............................................................40
3.6 Pengujian Sistem................................................................................................47
3.6.1 Test Case Login.............................................................................................48
3.6.2 Test Case Mengelola Lapangan: Tambah Lapangan.....................................50
3.6.3 Test Case Pembayaran...................................................................................52
BAB 4 HASIL DAN PEMBAHASAN.............................................................................54
4.1 Hasil...................................................................................................................54
4.1.1 Tampilan Halaman Pada Users..................................................................54
4.1.2 Tampilan Halaman Pada Admin................................................................58
4.2 Evaluasi Sistem..................................................................................................62
4.3.1 Kelebihan Sistem.......................................................................................62
4.3.2 Kekurangan Sistem....................................................................................64
BAB 5 SIMPULAN DAN SARAN...................................................................................66
5.1 Simpulan............................................................................................................66
5.2 Saran...................................................................................................................66
DAFTAR PUSTAKA........................................................................................................67
LAMPIRAN.......................................................................................................................69
ix
DAFTAR TABEL
Halaman
Tabel 2. 1 Simbol Use Case Diagram..................................................................................9

Tabel 2. 2 Simbol Activity Diagram..................................................................................11
Tabel 2. 3 Simbol Class Diagram......................................................................................12
Tabel 3. 1 Perangkat Keras................................................................................................14
Tabel 3. 2 Perangkat Lunak...............................................................................................14
Tabel 3. 3 Use Case Skenario Registrasi...........................................................................20
Tabel 3. 4 Use Case Skenario Login..................................................................................21
Tabel 3. 5 Use Case Skenario Lihat Ketersediaan Lapangan............................................22
Tabel 3. 6 Use Case Skenario Memesan Lapangan...........................................................22
Tabel 3. 7 Use Case Skenario Pembayaran........................................................................23
Tabel 3. 8 Use Case Skenario Mengelola Lapangan.........................................................24
Tabel 3. 9 Use Case Skenario Lihat Pemesanan................................................................26
Tabel 3. 10 Use Case Skenario Konfirmasi Pemesanan....................................................26
Tabel 3. 11 Use Case Skenario Logout..............................................................................28
Tabel 3. 12 Deskripsi Activity Diagram Registrasi...........................................................30
Tabel 3. 13 Deskripsi Activity Diagram Login..................................................................31
Tabel 3. 14 Deskripsi Activity Diagram Mengelola Lapangan.........................................32
Tabel 3. 15 Deskripsi Activity Diagram Konfirmasi Pemesanan......................................33
Tabel 3. 16 Deskripsi Activity Diagram Memesan Lapangan...........................................34
Tabel 3. 17 Deskripsi Activity Diagram Pembayaran.......................................................35
Tabel 3. 18 Database Tabel Users......................................................................................37
Tabel 3. 19 Database Tabel fields......................................................................................37
Tabel 3. 20 Database Tabel rackets...................................................................................38
Tabel 3. 21 Database Tabel shuttlecocks...........................................................................38
Tabel 3. 22 Database Tabel sales.......................................................................................38
Tabel 3. 23 Database Tabel payments...............................................................................39
Tabel 3. 24 Identifikasi dan Rencana Pengujian................................................................47
Tabel 3. 25 Test Case Login Keadaan Normal..................................................................48
Tabel 3. 26 Test Case Login Keadaan Tidak Normal........................................................49
Tabel 3. 27 Test Case Login Keadaan Tidak Normal........................................................49
Tabel 3. 28 Test Case Mengelola Lapangan Keadaan Normal..........................................50
Tabel 3. 29 Test Case Mengelola Lapangan Keadaan Tidak Normal...............................51
Tabel 3. 30 Test Case Pembayaran Keadaan Normal........................................................52
x
Tabel 3. 31 Test Case Pembayaran Keadaan Tidak Normal..............................................53
xi
DAFTAR GAMBAR
Halaman
Gambar 2. 1 Metode Waterfall................................................................................7

Gambar 2. 2 Laravel.................................................................................................8
Gambar 3. 1 Observasi...........................................................................................15
Gambar 3. 2 Daftar Pertanyaan Wawancara Pemilik Lapangan............................16
Gambar 3. 3 Daftar Pertanyaan Wawancara Pemilik Lapangan............................16
Gambar 3. 4 Flowchart Proses Pemesanan Sistem Sedang Berjalan.....................17
Gambar 3. 5 Use Case Diagram.............................................................................20
Gambar 3. 6 Activity Diagram Registrasi..............................................................29
Gambar 3. 7 Activity Diagram Login....................................................................30
Gambar 3. 8 Activity Diagram Mengelola Lapangan............................................31
Gambar 3. 9 Activity Diagram Konfirmasi Pemesanan........................................32
Gambar 3. 10 Activity Diagram Memesan Lapangan...........................................33
Gambar 3. 11 Activity Diagram Pembayaran........................................................34
Gambar 3. 12 Class Diagram.................................................................................36
Gambar 3. 13 Rancangan Halaman Splash Screen................................................40
Gambar 3. 14 Rancangan Halaman Login.............................................................40
Gambar 3. 15 Rancangan Halaman Dashboard.....................................................41
Gambar 3. 16 Rancangan Halaman Detail Lapangan 1.........................................41
Gambar 3. 19 Rancangan Halaman Proses Pemesanan Lapangan........................43
Gambar 3. 20 Rancangan Halaman Berhasil Memesan.........................................43
Gambar 3. 21 Rancangan Halaman Login Admin.................................................44
Gambar 3. 22 Rancangan Halaman Dashboard Admin.........................................44
Gambar 3. 23 Rancangan Halaman Menu Lapangan............................................45
Gambar 3. 24 Rancangan Halaman Menu Raket...................................................45
Gambar 3. 25 Rancangan Halaman Menu Shuttlecock.........................................46
Gambar 4. 1 Tampilan Halaman Splash Screen....................................................54
Gambar 4. 2 Tampilan Halaman Login.................................................................55
xii
Gambar 4. 3 Tampilan Halaman Dahboard...........................................................55
Gambar 4. 4 Tampilan Halaman Detail Lapangan 1.............................................56
Gambar 4. 8 Tampilan Halaman Berhasil Memesan.............................................58
Gambar 4. 9 Tampilan Halaman Login Admin.....................................................58
Gambar 4. 10 Tampilan Halaman Dashboard Admin............................................59
Gambar 4. 11 Tampilan Halaman Menu Lapangan...............................................59
Gambar 4. 12 Tampilan Halaman Menu Lapangan...............................................60
Gambar 4. 13 Tampilan Halaman Menu Raket.....................................................60
Gambar 4. 14 Tampilan Halaman Menu Raket.....................................................61
Gambar 4. 15 Tampilan Halaman Menu Shuttlecock............................................61
Gambar 4. 16 Pengujian langsung ke Pengelola Gor Harmoni Sei Rotan.............62
Gambar 4. 17 Bukti wawancara kelebihan sistem.................................................62
Gambar 4. 18 Bukti wawancara kelebihan sistem.................................................62
Gambar 4. 19 Bukti wawancara kekurangan sistem..............................................64
Gambar 4. 20 Bukti wawancara kekurangan sistem..............................................64
xiii
DAFTAR LAMPIRAN
Lampiran 1 Surat Pengajuan Judul Tugas Akhir......................................................69

Lampiran 2 Surat Kesediaan Dosen Pembimbing....................................................70
Lampiran 3 Kartu Bimbingan Mahasiswa................................................................71
Lampiran 4 Surat Permohonan Pengambilan Data...................................................72
Lampiran 5 Form Bebas Revisi Penguji I................................................................73
Lampiran 6 Form Bebas Revisi Penguji II...............................................................74
Lampiran 7 Listing Program....................................................................................75
Lampiran 8 Biodata Penulis...................................................................................103
xiv
BAB 1
PENDAHULUAN
1.1 Latar Belakang
Badminton adalah cabang olahraga yang termasuk ke dalam kelompok
olahraga permainan, dapat dimainkan di dalam maupun di luar ruangan
(Depdikbud 1978/1979: 129). Zaman modern seperti sekarang ini jenis
olahraga yang dapat dimainkan di dalam ruangan menjadi olahraga yang
banyak diminati oleh berbagai kalangan (E. Chairuddin, 2017). Saat ini
badminton merupakan salah satu olahraga yang paling diminati di
Indonesia, semua kalangan dari berbagai umur pun gemar dengan olahraga
badminton (Yuli Annggreyani, 2021). Olahraga ini bisa dimainkan kapan
saja, sehingga semua orang dapat menyempatkan waktunya di sela-sela
kesibukannya untuk bermain olahraga badminton. Badminton merupakan
jenis olahraga yang dimainkan oleh dua tim, setiap tim beranggotakan 1
sampai 2 orang. Ramainya penggemar olahraga badminton menjadikan
olahraga ini sebagai peluang bisnis yang sangat menjanjikan. Tidak heran
apabila saat ini banyak dijumpai tempat penyewaan lapangan badminton
dimana-mana seperti pada Gor Harmoni Sei Rotan.
Gor Harmoni Sei Rotan adalah salah satu usaha yang bergerak di bidang
penyewaan lapangan badminton yang berlokasi di Jl. Raharjo Gg.
Sambudi, Sumber Rejo Tim., Kec. Percut Sei Tuan, Kabupaten Deli
Serdang, Sumatera Utara (Idfirms.com, 2021). Pemesanan lapangan di Gor
Harmoni Sei Rotan masih menggunakan cara manual, dimana pelanggan
harus mendatangi tempat tersebut atau menelepon pemilik untuk memesan
lapangan. Informasi mengenai penyewaan lapangan badminton kurang
mudah didapatkan oleh konsumen dikarenakan untuk mengetahui
informasi penyewaan lapangan badminton pengguna harus mendatangi
langsung tempat penyewaan lapangan badminton atau menghubungi lewat
telepon untuk melakukan pengecekan terhadap lapangan yang kosong.
Penyewaan melalui telepon ini memiliki kendala karena pemilik harus
selalu di samping telepon padahal pada kenyataannya hal itu sulit
dilakukan. Sistem penyewaan lapangan badminton secara manual ini
15
cukup merepotkan bagi pihak pengguna lapangan dan menjadi kurang
efisien dalam hal waktu, tenaga, dan biaya karena pengguna harus
mendatangi langsung lapangan badminton untuk melakukan pengecekan
jadwal dan penyewaan lapangan.
Oleh karena itu dengan adanya teknologi yang semakin canggih penulis
memanfaatkan sistem komputerisasi sebagai alat bantu untuk
pengorganisasian waktu, salah satu contoh nya adalah sistem penjadwalan
dan pemesanan secara online yang dapat diakses dimana pun dan kapan
pun. Untuk itu dalam tugas akhir ini penulis akan membuat sistem berbasis
web yang berjudul “Sistem Penyewaan Lapangan Badminton Pada Gor
Harmoni Sei Rotan Berbasis Web” dengan harapan adanya sistem ini
maka informasi tentang gor harmoni akan lebih mudah didapatkan
sehingga gor lebih di kenal lagi oleh masyarakat.
1.2 Rumusan Masalah

Adapun rumusan masalah yang diangkat pada tugas akhir ini adalah
bagaimana cara menyediakan informasi lapangan badminton sehingga
memudahkan konsumen dalam pemesanan lapangan badminton pada Gor
Harmoni Sei Rotan.
1.3 Batasan Masalah
Adapun batasan masalah dari tugas akhir ini yaitu :
1. Sistem berbasis web untuk penyewaan lapangan badminton di Gor
Harmoni Sei Rotan menggunakan bahasa Pemrograman PHP,
Framework Laravel dan dengan database MySQL.
2. Sistem penyewaan ini hanya bisa dilakukan pada Gor Harmoni Sei
Rotan.
3. Sistem penyewaan yang dibuat mengakomodasi proses pemesanan
lapangan, ketersediaan lapangan, dan pembayaran (upload bukti
bayar).
16
1.4 Tujuan Tugas Akhir
Adapun tujuan yang ingin dicapai dalam laporan tugas akhir ini adalah
merancang dan mengimplementasikan sebuah sistem pemesanan lapangan
badminton pada Gor Harmoni Sei Rotan agar mempermudah konsumen
dalam memesan lapangan badminton tanpa harus datang ke lokasi.
1.5 Manfaat Tugas Akhir

Adapun manfaat penulisan laporan tugas akhir ini antara lain :
1. Sebagai sistem yang dapat memudahkan konsumen dalam memesan
lapangan badminton.
2. Sistem yang dibuat dapat memberikan manfaat bagi pengelola
lapangan dalam meningkatkan dan memperluas pemasaran gor secara
online.
1.6 Sistematika Penulisan

Sistematika penulisan Tugas Akhir ini dibagi menjadi lima bab, yaitu :
BAB 1 : PENDAHULUAN
Bab ini menguraikan latar belakang, rumusan masalah, batasan masalah,
tujuan dan manfaat, dan sistematika tugas akhir.
BAB 2 : TINJAUAN PUSTAKA

Bagian ini membahas teori-teori yang mendukung topik permasalahan
yang dibahas dan juga yang digunakan untuk kepentingan analisis dan
perancangan sistem.
BAB 3 : METODE
Bab III berisi uraian mengenai rancang bangun, dilengkapi dengan
diagram alur, rancangan awal, hingga metode pengujiannya.
17
BAB 4 : HASIL DAN PEMBAHASAN
Bab ini membahas tampilan web, hasil dan pembahasan sistem yang sudah
dirancang dan kelebihan serta kekurangan dari sistem yang telah dirancang
dan dibuat.
BAB 5 : PENUTUP
Bab ini menguraikan tentang kesimpulan dan saran yang berisi masukan
untuk mengembangkan dan melengkapi sistem informasi yang sudah
dibangun di masa yang mendatang.
18
BAB 2
TINJAUAN PUSTAKA
2.1 Penelitian Terdahulu

Beberapa penelitian sebelumnya yang diambil oleh peneliti sebagai bahan
pertimbangan dan sumber referensi yang berhubungan dengan judul
penelitian ini diantaranya sebagai berikut.
No Peneliti, Judul, Pembahasan Persamaan dan

Tahun Perbedaan
1 Nandang iriadi, Membuat aplikasi Persamaan penelitian
Priatno, Ahmad penyewaan lapangan ini dengan topik yang
Ishaq, Winda futsal berbasis web penulis angkat adalah
Yulianti, “Sistem yang menggunakan keduanya membahas
Informasi bahasa pemrograman tentang sistem
Penyewaan PHP. Aplikasi ini penyewaan lapangan
Lapangan Futsal dapat digunakan berbasis web dengan
Berbasis Web oleh 3 pengguna, bahasa pemrograman
Pada Futsal yairu admin, petugas PHP.
Station Bekasi”, dan penyewa.
2020 Perbedannya terletak
pada lapangan futsal
dengan 3 user,
sedangkan topik yang
penulis angkat adalah
lapangan badminton
dengan 2 user.
2 Bobi Agustian, Membuat sistem Persamaan penelitian
Dodi Susanto, informasi booking ini dengan topik yang
“Analisa dan dan penjadwalan penulis angkat adalah
Perancangan berbasis web yang keduanya membahas
Sistem Booking bisa melihat jadwal tentang penyewaan
dan Penjadwalan dan serta lapangan badminton
pada Gor
19
Saratoga Hall memakainya. berbasis website.
Berbasis Web”,
2019 Perbedannya pada
penelitian sebelumnya
menyewakan beberapa
lapangan khusus
member setiap bulan,
sedangkan yang penulis
angkat semua lapangan
bisa dipesan oleh siapa
saja.
3 Yuli Membangun aplikasi Persamaan penelitian
Anggreyani, penyewaan lapangan ini dengan topik yang
Slamet Wiyono, badminton berbasis diangkat penulis adalah
Hepatika Zidny web di Kota Tegal keduanya membahas
Ilmadina, untuk memudahkan tentang penyewaan
“Aplikasi pengguna melihat lapangan badminton.
Penyewaan jadwal lapangan,
Lapangan melakukan Perbedaannya adalah
Badminton pemesanan dan pada penelitian
Berbasis pembayaran secara sebelumnya sistem bisa
Website (Studi online. melihat jadwal
Kasus : Kota lapangan di semua
Tegal)”, 2021 lapangan badminton
yang ada di kota Tegal.
Sedangkan yang
penulis angkat hanya
pada Gor Harmoni Sei
Rotan.
20
2.2 Landasan Teori
2.2.1 Metode Waterfall
Menurut Novitasari (2018) metode waterfall adalah hal yang
menggambarkan pendekatan secara sistematis dan juga berurutan pada
sebuah pengembangan perangkat lunak. Tahapan dengan spesifikasi
kebutuhan pengguna lalu berlanjut melalui tahapan-tahapan perencanaan
yaitu planning, permodelan, konstruksi, sebuah system dan penyerahan
sistem kepara pengguna, dukungan pada perangkat lunak lengkap yang
dihasilkan. Waterfall merupakan model klasik yang memiliki sifat
berurut dalam merancang software (Sholikhah, et al., 2017).
Gambar 2. 1 Metode Waterfall

1) Analisis
Tahap ini adalah tahap pengumpulan kebutuhan termasuk dokumen dan
interface untuk menganalisis/menspesifikasikan kebutuhan perangkat
lunak sehingga dapat dipahami kebutuhan user guna menentukan solusi
software yg akan digunakan sebagai proses komputerisasi sistem.
2) Desain
Desain pembuatan program perangkat lunak termasuk struktur data,
arsitektur perangkat lunak, representasi antar muka dan prosedur
pengkodean.
3) Kode Program
Desain harus ditranslasikan kedalam program prangkat lunak. Hasil dari
tahap ini adalah program aplikasi sesuai dengan desain yang telah
dibuat pada tahap desain.
21
4) Pengujian
Pengujian fokus pada perangkat lunak dari segi logik dan fungsional
serta memastikan bahwa semua bagian sudah diuji sehingga keluaran
yg dihasilkan sesuai dengan yg diinginkan.
5) Evaluasi
Mengevaluasi apakah sistem yang dibuat sudah menyelesaikan masalah
yang ada
2.2.2 Framework Laravel
Gambar 2. 2 Laravel
Menurut Naista (2017) mengemukakan bahwa framework adalah suatu
struktur konseptual dasar digunakan untuk memecahkan atau menangani
suatu masalah yang bersifat kompleks. Singkatnya, framework
merupakan suatu kerangka kerja dari sebuah website yang akan
dibangun. Dengan menggunakan kerangka tersebut, waktu yang
perlukan dalam membangun sebuah website menjadi lebih singkat dan
memudahkan dalam proses perbaikan. Naista juga mengatakan bahwa
Laravel merupakan salah satu framework berbasis PHP bersifat open
source (terbuka), dan menggunakan konsep MVC (model – view –
controller). Laravel berada di bawah lisesni MIT License dengan
menggunakan Github sebagai tempat berbagi code menjalankannya.
2.2.3 Blackbox Testing

Blackbox testing adalah tahap yang digunakan untuk menguji kelancaran
program yang telah dibuat. Pengujian ini penting dilakukan agar tidak
terjadi kesalahan alur program yang telah dibuat. Menurut Rosa dan
Salahuddin (2015) Blackbox testing yaitu menguji perangkat lunak dari
segi spesifikasi fungsional tanpa menguji desain dan kode program.
Menurut Rizky (2011) Blackbox testing adalah tipe testing yang
22
memperlakukan perangkat lunak yang tidak diketahui kinerja
internalnya.
2.2.4 Unified Modelling Language (UML)

Menurut Shalahuddin (2014) mengatakan bahwa UML merupakan
bahasa visual digunakan untuk pemodelan dan komunikasi mengenai
sebuah sistem dengan menggunakan diagram dan teks-teks pendukung.
Pada perkembangan teknologi perangkat lunak, diperlukan adanya
bahasa yang digunakan untuk memodelkan sebuah perangkat lunak yang
akan dibangun dan diperlukan adanya standarisasi agar orang di
berbagai negara dapat mengerti pemodelan perangkat lunak tersebut.
UML muncul karena adanya kebutuhan pemodelan visual untuk
menspesifikasikan, menggambarkan, membangun, dan dokumentasi dari
sistem perangkat lunak.
2.2.5 Use Case Diagram

Menurut Rosa dan Shalahuddin (2018) mengatakan bahwa use case
diagram digunakan untuk memodelkan kelakukan (behavior) dari sistem
informasi yang akan dibuat. Use case akan mendeskripsikan sebuah
interaksi yang terjadi antara satu atau lebih aktor dengan sistem
informasi yang akan dibuat. Atau dapat dikatakan bahwa use case
digunakan untuk mengetahui fungsi – fungsi yang terdapat di dalam
sistem dan siapa saja yang berhak menggunakan fungsi-fungsi tersebut.
Tabel 2. 1 Simbol Use Case Diagram
Simbol Nama Keterangan

Actor Mewakili peran orang, sistem
yang lain, atau alat ketika
berkomunikasi dengan use
case.
Use Case Abstraksi dan interaksi antara
sistem dan aktor
Association Abstraksi dari penghubung
antara aktor dengan use case
23
Generalisasi Menunjukkan spesialisasi
aktor untuk dapat
berpartisipasi dengan use case
Include Menunjukkan bahwa suatu use
case seluruhnya merupakan
fungsionalitas dari use case
lainnya
Extend Menunjukkan bahwa suatu use
case merupakan tambahan
fungsional dari use case
lainnya jika suatu kondisi
terpenuhi
Sumber : Rosa dan Shalahuddin (2018)
2.2.6 Activity Diagram

Menurut Rosa dan Shalahuddin (2018:161) mengatakan bahwa activity
diagram menggambarkan aktivitas dari sebuah sistem atau proses bisnis
yang ada pada perangkat lunak. Berikut adalah simbol-simbol yang ada
pada diagram aktivitas.
24
Tabel 2. 2 Simbol Activity Diagram
2.2.7 Class Diagram

Menurut Rosa dan Shalahuddin (2018:141) mengemukakan bahwa
diagram kelas atau class diagram menggambarkan struktur sistem dari
pendefinisian kelas kelas yang akan digunakan untuk membangun
sebuah sistem sistem. Setiap kelas memiliki atribut dan method. Atribut
merupakan variable-variabel yang dimiliki oleh suatu kelas. Sedangkan
operasi atau method merupakan fungsi-fungsi yang dimiliki oleh suatu
kelas.
25
Tabel 2. 3 Simbol Class Diagram
Sumber : Rosa dan Shalahuddin (2018:155)
26
BAB 3
METODE PENELITIAN
3.1 Metode Pengembangan Sistem

Metode pengembangan sistem yang digunakan oleh penulis adalah metode
waterfall. Tahap pertama yang dilakukan adalah analisis, penulis
melakukan riset dengan cara mengumpulkan data dan informasi dari klien
menggunakan metode wawancara dan observasi untuk mengidentifikasi
apa saja kebutuhan pengguna dari sistem yang dibuat. Setelah hasil
wawancara diterima penulis melakukan studi pustaka. Hal ini dapat
menjadi acuan dalam menentukan fitur apa saja yang perlu dikembangkan.
Tahap selanjutnya penulis melakukan tahap perancangan, pada tahap

perancangan ini penulis membuat use case diagram untuk menggambarkan
cara kerja sistem yang akan dibuat. Penulis juga membuat desain user
interface untuk lebih mempermudah proses pengerjaan dan mendapatkan
gambaran detail terkait tampilan sebuah sistem.
Kemudian penulis mengubah desain yang telah dibuat menjadi baris baris
kode atau yang disebut tahap coding dengan menggunakan PHP dan
Framework Laravel. Setelah itu masuk ke tahap pengujian, penulis
menggunakan metodologi black box yang akan dijabarkan pada
pembahasan. Setelah semua tahapan tersebut selesai, penulis melakukan
evaluasi untuk melihat apakah sistem yang dikembangkan sudah
menyelesaikan permasalahan yang ada.
3.2 Alat dan Bahan

Dalam pembuatan sebuah sistem berbasis web ini terdapat beberapa alat dan
bahan yang diperlukan sebagai pendukung jalannya perancangan dan
pembuatan sistem website tersebut.
3.2.1 Alat
Dalam perancangan serta pembuatan aplikasi peningkatan strategi
pemasaran pada gor harmoni sei rotan dibutuhkan beberapa alat – alat
27
untuk mendukung berjalannya perancangan dan implementasi website,
antara lain :
Tabel 3. 1 Perangkat Keras
No Perangkat Keras Spesifikasi

1 CPU AMD Ryzen 5 3500U, up to 2.10 GHz
2 RAM 8 GB
4 SSD 256 GB
Tabel 3. 2 Perangkat Lunak
No Perangkat Lunakk Spesifikasi

1 Sublime Text 3 Versi 3.2.2
2 Xampp Versi 3.3.0
3 Browser Internet Google Chrome
4 Canva Versi 1.67.0
3.2.2 Bahan
Bahan yang digunakan dalam pembuatan perancangan ini adalah hasil data
riset yang dilakukan pada gor harmoni sei rotan. Data yang saya peroleh
dari hasil wawancara dan observasi yang dilakukan berupa informasi
tentang sistem yang sedang berjalan seperti daftar lapangan, harga
lapangan, jam operasional lapangan, dan cara memesan lapangan.
3.3 Metode Pengumpulan Data
1) Observasi
Pada metode ini data diperoleh dengan melakukan peninjauan

kelapangan guna mendapat fakta pendukung dalam penelitian. Penulis
melakukan pengamatan dengan mendatangi Gor Harmoni Sei Rotan
kemudian mencatat hasil pengamatan tersebut dan didokumentasikan
sebagai hasil observasi. Dari observasi tersebut penulis mendapatkan
beberapa data dan informasi guna membantu dalam proses penulisan ini.
Berikut gambar ketika penulis melakukan observasi ke Gor Harmoni Sei
Rotan.
28
Gambar 3. 1 Observasi
2) Studi Literatur
Studi literatur merupakan proses pencarian dan penelusuran berupa

bahan bacaan seperti buku referensi, katalog, jurnal penelitian, dan lain
sebagainya. Tujuan dari studi literatur adalah untuk mengidentifikasi dan
menyajikan berbagai teori yang relevan dan penting terkait dengan
permasalahan yang sedang dihadapi atau diteliti mengenai sistem
penyewaan pada gor harmoni sei rotan. Penulis meneliti jurnal-jurnal
terdahulu sebagai bahan perbandingan terhadap rancangan yang akan
penulis kerjakan, yaitu dari jurnal yang berjudul Sistem Informasi
Penyewaan Lapangan Futsal Berbasis Web Pada Futsal Station Bekasi
yang dilakukan oleh (Nandang Iriadi, et al., 2020). Jurnal berjudul
Analisa dan Perancangan Sistem Booking dan Penjadwalan pada Gor
Saratoga Hall Berbasis Web yang dilakukan oleh (Bobi Agustian dan
Dodi Susanto, 2019). Dari jurnal tersebut penulis mengetahui data dan
informasi yang akan disesuaikan dengan kebutuhan penelitian penulis.
3) Wawancara
Pada tahap ini penulis melakukan wawancara terhadap pemilik lapangan

dan penggemar olahraga badminton. Wawancara terhadap pemilik
lapangan dilakukan untuk mengetahui permasalahan yang dimiliki
selama ini, dan mencari tau kebutuhan dari pemilik lapangan ketika
mengelola lapangan yang dimilikinya. Wawancara terhadap penggemar
olahraga badminton dilakukan untuk mencari tahu kebutuhan dan
permasalahan ketika ingin melakukan pemesanan lapangan badminton.
29
Berikut daftar pertanyaan yang diberikan dalam wawancara terhadap
pemilik lapangan :
Gambar 3. 2 Daftar Pertanyaan Wawancara Pemilik Lapangan
Berikut daftar pertanyaan yang diberikan dalam wawancara terhadap

penggemar olahraga badminton:
Gambar 3. 3 Daftar Pertanyaan Wawancara Pemilik Lapangan
3.4 Analisis Sistem

Analisis sistem dilakukan untuk mengidentifikasikan dan mengevaluasi
permasalahan – permasalahan, kesempatan – kesempatan, hambatan –
hambatan yang terjadi dan hal – hal yang dibutuhkan sehingga dapat
diusulkan suatu perbaikan.
3.4.1 Analisis Sistem yang Berjalan

a) Analisa Input
Sistem yang pertama kali kita analisis merupakan informasi atau data
input yang ada pada gor harmoni sei rotan. Berdasarkan pengamatan
dan observasi yang dilakukan penulis terhadap gor harmoni sei
rotan, penulis memperoleh proses input yaitu pengelola lapangan
memberitahu lapangan yang tersedia dan menyebutkan berapa tarif
sewa per jam.
30
b) Analisa Proses
Penulis mengamati proses kegiatan penyewaan lapangan badminton

yang masih dilakukan secara manual ini yaitu jika ingin memesan
lapangan konsumen mendatangi lapangan lalu pengelola lapangan
menentukan lapangan mana yang tersedia. Setelah itu, pembeli
melakukan pembayaran.
Gambar 3. 4 Flowmap Proses Pemesanan Sistem Sedang Berjalan
Berikut tahapan laksana sistem yang sedang berjalan secara manual

saat ini :
1) Konsumen mendatangi lokasi gor harmoni sei rotan.

2) Konsumen bertanya kepada pengelola lapangan apakah ada
lapangan yang tersedia.
31
3) Jika ada lapangan yang tersedia, konsumen akan melakukan
penyewaan dengan langsung melakukan pembayaran kepada
pengelola lapangan.
4) Jika lapangan sedang full, penjaga akan memberitahu kepada
konsumen kapan jadwal lapangan akan kosong.
c) Analisa Output
Pada analisa output yang dihasilkan dari penyewaan lapangan
badminton pada gor harmoni sei rotan, penulis tidak menemukan
hasil output seperti bukti pembayaran ataupun laporan penjualan
pada lapangan. Karena ketika pengelola lapangan mengizinkan
konsumen untuk menyewa lapangan, konsumen langsung membayar
saat itu juga tanpa ada nota pembayaran dan pihak pengelola juga
tidak ada melakukan pencatatan laporan penjualan.
3.4.2 Evaluasi Sistem yang Berjalan

Meninjau dari sistem yang masih berjalan secara manual, penulis
menemukan beberapa kelemahan, yaitu :
1) Sistem penyewaan masih manual dan belum terkomputerisasi.
2) Informasi tentang gor badminton masih terbatas.
3) Sistem penyewaan yang tidak dapat dilakukan dimana saja dan

masih terbatas oleh waktu.
Melihat kelemahan yang terjadi diatas, untuk itu penulis membuat solusi
untuk mengatasi permasalahan tersebut, antara lain :
1) Membuat sistem informasi penyewaan lapangan badminton berbasis

web.
2) Sistem yang dibangun diharapkan dapat membuat informasi tentang
gor bisa lebih mudah didapatkan.
3) Sistem ini dapat membuat sistem penyewaan lapangan badminton
yang dapat dilakukan dimana saja dan kapan saja.
32
3.4.3 Analisis Pengguna
Analisis pengguna menjelaskan siapa saja pengguna yang terlibat dalam
aplikasi yang dibuat dan apa yang dapat dilakukan pada aplikasi yang
dibuat. Berikut pengguna dari aplikasi ini adalah :
1) Admin
Admin adalah pengguna yang bertugas mengelola data penjualan
pada aplikasi.
2) Konsumen
Konsumen adalah pengguna yang ingin melakukan penyewaan pada
lapangan badminton.
3.5 Langkah Perancangan

Langkah – langkah dalam perancangan sistem penyewaan lapangan
badminton pada gor harmoni sei rotan berbasis web adalah sebagai
berikut :
3.5.1 Perancangan Sistem

Tahapan ini yaitu dengan merancang kerangka sistem yang sesuai
dengan kebutuhan. Pada tahap ini peneliti menggunakan perangkat
UML diagram dalam perancangan sistem, untuk memberikan
kemudahan pada saat melakukan perancangan sistem yang nantinya
akan dijadikan sebagai bahan acuan dalam membangun aplikasi
peningkatan strategi pemasaran pada gor harmoni sei rotan. Adapun
UML diagram yang akan penulis gunakan dalam proses perancangan
antara lain use case diagram, activity diagram, class diagram
3.5.2 Use Case Diagram

Pada tahap perancangan use case diagram ini penulis menetapkan aktor
yang dapat mengakses aplikasi ini dan menentukan fitur – fitur apa saja
yang digunakan oleh aktor tersebut. Berikut tabel untuk perancangan
use case diagram :
33
Gambar 3. 5 Use Case Diagram
Berikut merupakan deskripsi pendefinisian use case scenario :
Tabel 3. 3 Use Case Skenario Registrasi
Use Case ID UC – C01

Use Case Name Registrasi
Deskripsi Use User yang ingin melakukan transaksi
Case penyewaan diharuskan registrasi terlebih
dahulu agar memiliki akun untuk dapat login
ke dalam sistem.
Aktor Konsumen
Kondisi Awal User berada pada tampilan awal aplikasi
34
Skenario User Skenario Sistem
1. User memilih menu 2. Sisem akan menampilkan
halaman register
“Register” pada navbar
3. User menginput Nama
Lengkap
4. User menginput Email
5. User menginput Password
6. User mengklik button 7. Sistem akan menampilkan
halaman login
“Daftar”
Kondisi Akhir User berada di halaman login
Tabel 3. 4 Use Case Skenario Login

Use Case Name Login
Deskripsi Use User yang ingin melakukan transaksi
Case penyewaan diharuskan login agar bisa
mengakses sistem.
Aktor Konsumen, Admin
Kondisi Awal User berada pada tampilan awal aplikasi

1. User memilih menu
2. Sistem akan menampilkan
“Login” pada navbar
halaman login
3. User menginput Email
4. User menginput password
5. User mengklik button
“Login”
halaman dashboard
Kondisi Akhir User berada di halaman dashboard
Tabel 3. 5 Use Case Skenario Lihat Ketersediaan Lapangan
35
Use Case Name Lihat Ketersediaan Lapangan
Deskripsi Use User dapat melihat ketersediaan lapangan,
Case jika lapangan tersedia maka user dapat
memesan lapangan.
Aktor Konsumen
Kondisi Awal User berada pada halaman dashboard

1. User memilih menu lihat
lapangan
halaman detail lapangan
Kondisi Akhir User berada di halaman detail lapangan
Tabel 3. 6 Use Case Skenario Memesan Lapangan

Use Case Name Memesan Lapangan
Deskripsi Use User melakukan pemesanan lapangan
Case
Aktor Konsumen

1. User memilih menu lihat
lapangan
detail halaman pemesanan
lapangan
3. User memilih durasi
pemesanan
4. Jika ingin menyewa raket
user mengklik button “ya”
5. User memilih jenis raket
6. User memilih jumlah raket
pop up bertuliskan
“Berhasil memesan
36
“Pesan”
lapangan!”
9. Sistem akan menamplikan
halaman pembayaran
Kondisi Akhir User berada di halaman Riwayat Pemesanan
Tabel 3. 7 Use Case Skenario Pembayaran

Use Case Name Pembayaran
Deskripsi Use User melakukan pembayaran setelah
Case melakukan proses pemesanan lapangan.

Kondisi Awal Konsumen berada pada halaman dashboard

“Riwayat Pemesanan”
halaman Riwayat
pemesanan
“Pembayaran” pada Aksi
pemesanan.
4. User memilih metode
pembayaran 5. Sistem akan menampilkan
6. User menginput bukti pilihan metode pembayaran
pembayaran pada field

“Choose File”
“Kirim”
pop up bertuliskan
“Pembayaran Berhasil”
Kondisi Akhir User berada di halaman Riwayat Pemesanan
Tabel 3. 8 Use Case Skenario Mengelola Lapangan
37
Use Case Name Mengelola Lapangan
Deskripsi Use User dapat menambahkan lapangan, mengedit
Case lapangan, melihat lapangan, dan menghapus
lapangan.
Aktor Admin
Menambah Lapangan

lapangan
halaman lapangan
Tambah Lapangan
form penambahan lapangan
5. User menginput Nama
Lapangan
6. User menginput Detail
Lapangan
7. User menginput Harga
Lapangan
8. User menginput Gambar
Lapangan
“Simpan”
lapangan yang telah
ditambahkan
Kondisi Akhir User berhasil menambah lapangan
Mengedit Lapangan

38
lapangan
halaman lapangan
“Edit”
form pengeditan lapangan
5. User mengedit Nama
Lapangan
6. User mengedit Detail
Lapangan
7. User mengedit Harga
Lapangan
8. User mengedit Gambar
Lapangan
“Simpan”
lapangan yang telah diedit
Kondisi Akhir User berhasil mengubah lapangan
Menghapus Lapangan

lapangan
halaman lapangan

4. Sistem akan membuang
Hapus
lapangan yang dihapus
admin
Kondisi Akhir User berhasil menghapus lapangan
39
Tabel 3. 9 Use Case Skenario Lihat Pemesanan

Use Case Name Lihat Pemesanan
Deskripsi Use User dapat melihat data pemesanan
Case
Aktor Admin

lapangan
halaman lapangan
3. User melihat ke daftar
pemesanan
daftar pemesanan lapangan
Kondisi Akhir User berada di halaman pemesanan lapangan
Tabel 3. 10 Use Case Skenario Konfirmasi Pemesanan
Use Case ID UC – A04

Use Case Name Konfirmasi Pemesanan
Deskripsi Use User melakukan konfirmasi pemesanan
Case dengan mengecek bukti pembayaran. User
akan melakukan tindakan untuk menyetujui
pesanan atau membatalkan pesanan melalui
bukti pembayaran yang dikirim konsumen
Aktor Admin
Kondisi Awal User berada pada halaman home
Setuju

lapangan
halaman lapangan
40
pemesanan

4. User mengklik button edit halaman konfirmasi
status pemesanan pemesanan
6. User memilih status status pemesanan menjadi
menjadi Lunas lunas
Kondisi Akhir User berada di halaman daftar pemesanan

yang telah berubah status menjadi lunas
Tidak Setuju

lapangan
halaman lapangan
pemesanan
4. User mengklik button edit
status pemesanan
halaman konfirmasi
pemesanan
6. User memilih status
menjadi Belum Lunas
status pemesanan menjadi
lunas
Kondisi Akhir User berada di halaman daftar pemesanan

yang status nya belum lunas
Tabel 3. 11 Use Case Skenario Logout
41
Use Case ID UC – A06
Use Case Name Logout
Deskripsi Use User keluar dari sistem
Case
Kondisi Awal User berada pada halaman home

1. User memilih menu logout
halaman tampilan awal
aplikasi
Kondisi Akhir User berada pada halaman tampilan awal

aplikasi
42
3.5.3 Activity Diagram
Activity Diagram menggambarkan workflow (aliran kerja) yang
merupakan sebuah diagram yang dapat memodelkan berbagai proses
yang tejadi pada sistem. Berikut activity diagram dibawah ini.
1) Activity Diagram Registrasi
Gambar 3. 6 Activity Diagram Registrasi

Berikut adalah tabel keterangan atau deskripsi dari diagram activity
registrasi :
43
Tabel 3. 12 Deskripsi Activity Diagram Registrasi
Nama Aktor Deskripsi

Activity Diagram Konsumen Konsumen mengunjungi
Registrasi website, kemudian klik menu
Konsumen registrasi, lalu sistem
menampilkan form registrasi.
Konsumen mengisi data berupa
nama lengkap, email dan
password. Kemudian klik
tombol daftar. Selanjutnya
sistem akan melakukan cek
data, jika data benar maka
sistem akan menampilkan ke
halaman konsumen yaitu daftar
pemesanan namun jika data
salah maka akan tetap berada
di form register.
2) Activity Diagram Login
Gambar 3. 7 Activity Diagram Login
44
login :
Tabel 3. 13 Deskripsi Activity Diagram Login

Activity Diagram Konsumen, User mengunjungi website,
Login Admin kemudian klik menu login, lalu
sistem menampilkan form
login. User mengisi data
berupa email dan password.
Kemudian klik tombol login.
Selanjutnya sistem akan
melakukan cek data, jika data
benar maka sistem akan
menampilkan ke halaman
dashboard namun jika data
salah maka akan tetap berada
di form login.
3) Activity Diagram Mengelola Lapangan
Gambar 3. 8 Activity Diagram Mengelola Lapangan
45
Mengelola Lapangan :
Tabel 3. 14 Deskripsi Activity Diagram Mengelola Lapangan

Activity Diagram Admin Admin memilih data lapangan,
Mengelola lalu sistem akan menampilkan
Lapangan halaman data lapangan. Pada
halaman ini admin memiliki
akses untuk mengelola
lapangan yaitu dengan
menambah, mengubah, dan
menghapus data lapangan.
Setelah memilih action yang
dijalankan, maka sistem akan
menampilkan masing-masing
form sesuai perintah. Lalu
admin akan mengisi,
mengubah, ataupun menghapus
data lapangan yang dipilih.
4) Activity Diagram Konfirmasi Pemesanan
Gambar 3. 9 Activity Diagram Konfirmasi Pemesanan
46
Konfirmasi Pemesanan :
Tabel 3. 15 Deskripsi Activity Diagram Konfirmasi Pemesanan

Activity Diagram Admin Admin memilih data lapangan,
Konfirmasi lalu sistem akan menampilkan
Pemesanan halaman data lapangan. Admin
memilih data mana yang akan
dikonfirmasi dengan mengklik
button edit status, kemudian
sistem akan menampilkan
halaman konfirmasi
pemesanan. Admin memilih
status pemesanan apakah lunas
dan belum lunas, kemudian
mengupdate nya. Maka Sistem
akan menyimpan data dan
memberitahu jika data berhasil
di update.
5) Activity Diagram Memesan Lapangan
Gambar 3. 10 Activity Diagram Memesan Lapangan
47
Memesan Lapangan :
Tabel 3. 16 Deskripsi Activity Diagram Memesan Lapangan

Activity Diagram Konsumen Admin memilih data lapangan,
Memesan lalu sistem akan menampilkan
Lapangan halaman data lapangan. Pada
halaman ini admin memiliki
akses untuk mengelola
lapangan yaitu dengan
menambah, mengubah, dan
menghapus data lapangan.
Setelah memilih action yang
dijalankan, maka sistem akan
menampilkan masing-masing
form sesuai perintah. Lalu
admin akan mengisi,
mengubah, ataupun menghapus
data lapangan yang dipilih.
6) Activity Diagram Pembayaran
Gambar 3. 11 Activity Diagram Pembayaran
48
Pembayaran :
Tabel 3. 17 Deskripsi Activity Diagram Pembayaran

Activity Diagram Konsumen User memilih menu Riwayat
Pembayaran pemesanan, sistem akan
menampilkan halaman
Riwayat pemesanan, kemudian
user memilih pemesanan mana
yang ingin dibayarkan dengan
mengklik button pembayaran.
Lalu sistem akan menampilkan
form pembayaran dan user bisa
mengisi form tersebut. Jika
sudah user bisa mengklik
button kirim. Dan sistem akan
menampilkan pop up yang
memberitahu jika pemesanan
berhasil dibayarkan.
49
3.5.4 Class Diagram
Class diagram menunjukkan aliran struktur dan deskripsi class serta
hubungannya antar class. Berikut adalah tampilan class diagram pada
perancangan penyewaan lapangan badminton pada gor harmoni sei
rotan.
Gambar 3. 12 Class Diagram
50
3.5.5 Perancangan Basis Data
Perancangan basis data bertujuan untuk mengetahui kebutuhan informasi

dari sistem yang akan dibangun dimana struktur informasi jadi lebih
mudah di pahami dalam mendukung proses pengolahan data.
Nama database : penyewaan_badminton
Daftar tabel :
1. Users
2. Fields
3. Rackets
4. Shuttlecocks
5. Sales
6. Payments
Tabel 3. 18 Database Tabel Users
No Nama Tipe Data Keterangan
1 id Bigint(20 Primary key

2 name Varchar(50)
3 email Varchar(60) Foreign key

4 password Varchar(8)
5 role Varchar(10)
6 created_at timestamp
7 updated_at timestamp
Tabel 3. 19 Database Tabel fields

2 name Varchar(60)
3 image Varchar(100)
4 description Text
5 price Double(8,2)
51
Tabel 3. 20 Database Tabel rackets

2 name Varchar(60)
3 picture Varchar(100)
4 price Double(8,2)
5 stock Int(11)
Tabel 3. 21 Database Tabel shuttlecocks

2 name Varchar(60)
3 picture Varchar(100)
4 price Double(8,2)
5 stock Int(11)
Tabel 3. 22 Database Tabel sales

1 id Bigint(20) Primary key
2 racket_id Bigint(20) Foreign Key
3 shuttlecock_id Bigint(20) Foreign Key
4 field_id Bigint(20) Foreign Key
5 user_id Bigint(20) Foreign Key
6 payment_id Bigint(20) Foreign Key
7 image Varchar(100)
52
8 type Varchar(20)
9 price Double(8,2)
10 duration Varchar(100)
11 qty Int(11)
12 status Varchar(20)
13 start_at timestamp
14 end_at timestamp
Tabel 3. 23 Database Tabel payments

2 name Varchar(60)
3 Created_at timestamp
4 Updated_at timestamp
53
3.5.6 Perancangan Antar Muka Sistem
Perancangan antar muka sistem adalah perancangan tampilan atau

desain antar muka admin dengan sistem dan antara user dengan sistem.
Perancangan antar muka sistem berguna untuk mengaplikasikan setiap
rancangan ke dalam program atau source code.
1) Perancangan Antar Muka Pada User

Berikut ini adalah perancangan antar muka pada user :
a) Rancangan Halaman Splash Screen
Rancangan halaman splash screen merupakan tampilan awal
ketika aplikasi dibuka oleh user.
Gambar 3. 13 Rancangan Halaman Splash Screen

b) Rancangan Halaman Login
Rancangan halaman login merupakan sebuah tampilan ketika
user akan masuk ke dalam sistem. Pada halaman ini berisi form
input email dan password.
Gambar 3. 14 Rancangan Halaman Login
54
c) Rancangan Halaman Dashboard
Rancangan halaman utama merupakan sebuah tampilan awal
yang akan dikunjungi ketika user berhasil melakukan login.
Halaman ini berisikan informasi yang berkaitan dengan sistem,
yang dimana user bisa langsung memilih lapangan yang akan
dibooking pada halaman ini.
Gambar 3. 15 Rancangan Halaman Dashboard

d) Rancangan Halaman Detail Lapangan 1
Rancangan halaman detail lapangan 1 merupakan sebuah
tampilan untuk melihat apakah lapangan yang ingin dibooking
tersedia. Jika tersedia user bisa melanjutkan dengan memlihi
durasi dan juga jika ingin menyewa raket user bisa memilih
button yes dan memilih raket yang ingin dibooking juga. Ketika
semuanya sudah selesai user bisa memilih button pesan untuk
melanjutkan pesanan.
Gambar 3. 16 Rancangan Halaman Detail Lapangan 1

e) Rancangan Halaman Detail Lapangan 2
55

f) Rancangan Halaman Detail Lapangan 3
56
g) Rancangan Halaman Proses Pemesanan Lapangan
Rancangan halaman proses pemesanan lapangan merupakan
sebuah tampilan untuk melanjutkan pemesanan yang telah
dilakukan user pada halaman detail lapangan. Di halaman
proses pemesanan ini user akan melakukan pembayaran melalui
metode pembayaran yang tersedia. Setelah melakukan
pembayaran user harus menginputkan bukti pembayaran agara
proses pemesanan segera ditangani oleh Admin.
Gambar 3. 19 Rancangan Halaman Proses Pemesanan

Lapangan
h) Rancangan Halaman Berhasil Memesan
Rancangan halaman berhasil memesan ini merupakan sebuah
tampilan pop up yang memberitahu user apakah proses
pemesanan berhasil dan tidak.
Gambar 3. 20 Rancangan Halaman Berhasil

Memesan
2) Perancangan Antar Muka Pada Admin
57
Berikut ini adalah perancangan antar muka pada admin :
a) Rancangan Halaman Login Admin
Rancangan halaman login admin merupakan sebuah tampilan
ketika admin akan masuk ke dalam sistem. Pada halaman ini
berisi form input email dan password.
Gambar 3. 21 Rancangan Halaman Login Admin

b) Rancangan Halaman Dashboard Admin
Rancangan halaman dashboard admin merupakan sebuah
tampilan halaman awal jika admn sudah berhasil login. Pada
halaman ini admin bisa melihat statistik pemesanan lapangan.
Pada halaman dashboard admin juga terdapat beberapa menu
seperti menu lapangan, raket, dan shuttlecock
Gambar 3. 22 Rancangan Halaman Dashboard Admin

c) Rancangan Halaman Menu Lapangan
Rancangan halaman menu lapangan merupakan tampilan yang
berisi rekapitulasi atau data transaksi penyewaan lapangan.
58
Pada halaman ini admin akan mengatur proses transaksi dalam
pemesanan lapangan melalui button ubah status.
Gambar 3. 23 Rancangan Halaman Menu Lapangan

d) Rancangan Halaman Menu Raket
Rancangan halaman menu raket merupakan tampilan yang
berisi rekapitulasi atau data transaksi penyewaan raket. Pada
halaman ini admin akan mengatur proses transaksi dalam
pemesanan raket melalui button ubah status. Admin juga bisa
menambahkan data raket pada halaman ini.
Gambar 3. 24 Rancangan Halaman Menu Raket

e) Rancangan Halaman Menu Shuttlecock
Rancangan halaman menu shuttlecock merupakan tampilan
yang berisi rekapitulasi atau data transaksi penyewaan
shuttlecock. Pada halaman ini admin akan mengatur proses
transaksi dalam pemesanan shuttlecock melalui button ubah
status.
59
Gambar 3. 25 Rancangan Halaman Menu Shuttlecock
60
3.6 Pengujian Sistem
Proses pengujian dilakukan oleh pemilik gor harmoni sei rotan. Pengujian
ini menggunakan metode black box. Black box testing adalah tahap yang
digunakan untuk memastikan setiap proses dari antarmuka aplikasi yang
sedang berjalan. Berikut adalah hasil dari pengujian yang dilakukan :
Tabel 3. 24 Identifikasi dan Rencana Pengujian
Kode Uji Butir Uji Tingkat Jenis Jadwal

(Use Case) Pengujian Pengujian
Registrasi Keadaan Normal Pengujian Black Box 14 Juli
Keadaan Tidak Unit 2023
Normal
Login Keadaan Normal Pengujian Black Box 14 Juli
Normal
Lihat Keadaan Normal Pengujian Black Box 14 Juli
Ketersediaan Keadaan Tidak Unit 2023
Lapangan Normal
Memesan Keadaan Normal Pengujian Black Box 14 Juli
Lapangan Keadaan Tidak Unit 2023
Normal
Pembayaran Keadaan Normal Pengujian Black Box 14 Juli
Normal
Mengelola Keadaan Normal Pengujian Black Box 14 Juli
Lapangan Keadaan Tidak Unit 2023
Normal
Lihat Keadaan Normal Pengujian Black Box 14 Juli
Pemesanan Keadaan Tidak Unit 2023
Normal
Konfirmasi Keadaan Normal Pengujian Black Box 14 Juli
Pemesanan Keadaan Tidak Unit 2023
Normal
Logout Keadaan Normal Pengujian Black Box 14 Juli
Normal
61
Berdasarkan rencana pengujian diatas, dibuat test case untuk menjelaskan
maksud dari butir uji keadaan normal dan keadaan tidak normal. Test case
dapat dilihat pada bagian berikut ini :
3.6.1 Test Case Login

1) Test Case Keadaan Normal (Seluruh field data diisi dengan data
yang benar)
Tabel 3. 25 Test Case Login Keadaan Normal
Identifikasi UC – C02
Nama Kasus Uji Login
Deskripsi Mengisi seluruh field dengan data yang
benar.
Kondisi Awal User membuka tampilan awal sistem
Tanggal Pengujian 14 Juli 2023
Penguji Riduan Pohan
Skenario
1. User membuka menu “Login” pada tampilan awal sistem.
2. User mengisi field username dan password sesuai dengan akun
yang sudah ada (terdaftar).
3. User menekan tombol “Login”
Hasil
Yang Diharapkan Pengamatan Kesimpulan
a. Sistem dapat Sama seperti yang Dari pengujian
melakukan proses diharapkan yang dilakukan
login. dapat disimpulkan
b. Sistem bahwa sistem
menampilkan dapat melakukan
halaman dashboard proses login
ketika email dan
password diisi
dengan data yang
benar, dan
kemudian sistem
akan
menampilkan
halaman
dashboard.
62
2) Test Case Keadaan Tidak Normal (Input dengan beberapa field data
kosong)
Tabel 3. 26 Test Case Login Keadaan Tidak Normal
Deskripsi Input dengan beberapa field yang kosong
Skenario
2. User mengisi field username dan password tidak sesuai dengan
akun yang sudah ada (terdaftar).
Hasil
a. Sistem tidak dapat Sama seperti yang Dari pengujian
b. Sistem bahwa sistem
menampilkan tidak dapat
tulisan “email wajib melakukan proses
diisi” jika field login dan ketika
email belum adanya field yang
diinput. kosong sistem
menampilkan
tulisan pada field
email (“Email
wajib diisi”).
3) Test Case Keadaan Tidak Normal (Input field data dengan data yang
tidak benar)
Tabel 3. 27 Test Case Login Keadaan Tidak Normal
Deskripsi Input field data dengan data yang tidak
benar
Skenario
63
2. User mengisi field username dan password tidak sesuai dengan
akun yang sudah ada (terdaftar).
Hasil
a. Sistem tidak dapat Sama seperti yang Dari pengujian
b. Sistem akan bahwa sistem
menampilkan tidak dapat
tulisan “Identitas melakukan proses
tersebut tidak cocok login dan ketika
dengan data kami.” field email atau
jika ada field yang passwotd yang
diisi dengan data diisi tidak benar
tidak benar. sistem akan
menampilkan
tulisan “Identitas
tersebut tidak
cocok dengan data
kami.
3.6.2 Test Case Mengelola Lapangan: Tambah Lapangan

yang benar)
Tabel 3. 28 Test Case Mengelola Lapangan Keadaan Normal
Nama Kasus Uji Mengelola Lapangan: Tambah Lapangan
Deskripsi Menambahkan lapangan dengan mengisi
seluruh field input data dan mengupload
foto dengan benar.
Kondisi Awal - User membuka tampilan awal sistem
- User sudah melakukan login
- User berada pada halaman dashboard
Skenario
1. Pilih menu “Lapangan” pada navigasi sidebar.
2. User mengklik tombol “Tambah” pada halaman menu lapangan.
3. Sistem beralih ke halaman form pengisian data lapangan.
4. User mengisi seluruh field input data dengan data yang benar dan
mengupload foto dengan benar.
Hasil
64
melakukan diharapkan yang dilakukan
penambahan data dapat disimpulkan
lapangan baru. bahwa sistem
b. Sistem beralih ke dapat melakukan
halaman lapangan penambahan data
dan menampilkan ketika seluruh
alert berwarna hijau field input dengan
“Berhasil data yang benar
Menambah dan mengupload
Lapangan”. foto dengan benar
dan sistem akan
beralih ke
halaman lapangan
dan menampilkan
alert berwarna
hijau “Berhasil
Menambah
Lapangan”.
2) Test Case Keadaan Tidak Normal (Input dengan beberapa field data
kosong)
Tabel 3. 29 Test Case Mengelola Lapangan Keadaan Tidak Normal
Nama Kasus Uji Mengelola Lapangan: Tambah Lapangan
Tanggal Pengujian
Penguji
Skenario
1. Pilih menu “Lapangan” pada navigasi sidebar.
2. User mengklik tombol “Tambah” pada halaman menu lapangan.
3. Sistem beralih ke halaman form pengisian data lapangan.
Hasil
a. Sistem tidak Sama seperti yang Dari pengujian
melakukan diharapkan yang dilakukan
penambahan data dapat disimpulkan
lapangan baru. bahwa sistem
b. Sistem beralih ke tidak dapat
halaman lapangan melakukan
dan tidak ada penambahan data
65
penambahan data ketika field data
baru ada yang kosong.
3.6.3 Test Case Pembayaran

yang benar)
Tabel 3. 30 Test Case Pembayaran Keadaan Normal
Nama Kasus Uji Pembayaran
Deskripsi Mengisi seluruh field input data dengan
benar.
- User melakukan pemesanan lapangan
Skenario
1. User memilih menu “Riwayat Pemesanan”
2. User mengklik button “Pembayaran” di kolom aksi pada tabel
riwayat pemesanan
4. User mengklik button “Kirim”
Hasil
pembayaran dapat disimpulkan
b. Sistem beralih ke bahwa sistem
halaman Riwayat dapat melakukan
pemesanan dan proses
akan muncul pop up pembayaran yang
yang berisi telah dilakukan
“Pembayaran ketika sudah
berhasil” menginputkan
semua field
dengan benar dan
mengupload foto
dengan benar dan
sistem akan
beralih ke
halaman Riwayat
pemesanan dan
66
menampilkan pop
up yang berisi
“Pembayaran
Berhasil”.
2) Test Case Keadaan Tidak Normal (Input dengan beberapa field input
data kosong)
Tabel 3. 31 Test Case Pembayaran Keadaan Tidak Normal
Nama Kasus Uji Pembayaran
- User melakukan pemesanan lapangan
Skenario
1. User memilih menu “Riwayat Pemesanan”
2. User mengklik button “Pembayaran” di kolom aksi pada tabel
riwayat pemesanan
4. User mengklik button “Kirim”
Hasil
Yang Diharapkan Pengamatan Yang Diharapkan
a. Sistem tidak Sama seperti yang Dari pengujian yang
melakukan proses diharapkan dilakukan dapat
pembayaran disimpulkan bahwa
b. Sistem sistem tidak dapat
menampilkan melakukan proses
tulisan “Foto Bukti pembayaran yang
Pembayaran Wajib telah dilakukan ketika
diisi” jika tidak tidak menginputkan
menginputkan bukti bukti pembayaran
pembayaran dan sistem akan
menampilkan tulisan
berwarna merah
“Foto Bukti
Pembayaran Wajib
diisi”
67
BAB 4
HASIL DAN PEMBAHASAN
4.1 Hasil
Adapun hasil perancangan dan pembangunan aplikasi peningkatan strategi
pemasaran pada gor harmoni sei rotan menghasilkan aplikasi dengan fitur
pemesanan lapangan, raket dan juga shuttlecock.
4.1.1 Tampilan Halaman Pada Users

Berikut ini adalah hasil perancangan dan cara kerja untuk tampilan
halaman user :
1) Tampilan Halaman Splash Screen User

Tampilan halaman splash screen adalah tampilan awal ketika
aplikasi dibuka oleh user.
Gambar 4. 1 Tampilan Halaman Splash Screen
68
2) Tampilan Halaman Login
Tampilan halaman login merupakan sebuah tampilan ketika user
akan masuk ke dalam sistem. Pada halaman ini berisi form input
email dan password.
Gambar 4. 2 Tampilan Halaman Login

3) Tampilan Halaman Dashboard
Tampilan halaman utama merupakan sebuah tampilan awal yang
akan dikunjungi ketika user berhasil melakukan login. Halaman ini
berisikan informasi yang berkaitan dengan sistem, yang dimana user
bisa langsung memilih lapangan yang akan dibooking pada halaman
ini.
Gambar 4. 3 Tampilan Halaman Dahboard
69
4) Tampilan Halaman Detail Lapangan 1
Tampilan halaman detail lapangan 1 merupakan sebuah tampilan
untuk melihat apakah lapangan yang ingin dibooking tersedia. Jika
tersedia user bisa melanjutkan dengan memlihi durasi dan juga jika
ingin menyewa raket user bisa memilih button yes dan memilih raket
yang ingin dibooking juga. Ketika semuanya sudah selesai user bisa
memilih button pesan untuk melanjutkan pesanan.
Gambar 4. 4 Tampilan Halaman Detail Lapangan 1

70

7) Tampilan Halaman Prosses Pemesanan Lapangan
Tampillan halaman proses pemesanan lapangan merupakan sebuah
tampilan untuk melanjutkan pemesanan yang telah dilakukan user
pada halaman detail lapangan. Di halaman proses pemesanan ini user
akan melakukan pembayaran melalui metode pembayaran yang
tersedia. Setelah melakukan pembayaran user harus menginputkan
bukti pembayaran agara proses pemesanan segera ditangani oleh
Admin.
71
8) Tampilan Halaman Berhasil Memesan
Tampilan halaman berhasil memesan ini merupakan sebuah tampilan
pop up yang memberitahu user apakah proses pemesanan berhasil
dan tidak.
Gambar 4. 8 Tampilan Halaman Berhasil Memesan

4.1.2 Tampilan Halaman Pada Admin
Berikut ini adalah hasil perancangan dan cara kerja untuk tampilan
halaman admin :
1) Tampilan Halaman Login Admin

Tampilan halaman login admin merupakan sebuah tampilan ketika
admin akan masuk ke dalam sistem. Pada halaman ini berisi form
input email dan password.
Gambar 4. 9 Tampilan Halaman Login Admin

2) Tampilan Dashboard
Halaman dashboard admin merupakan sebuah tampilan halaman
awal jika admn sudah berhasil login. Pada halaman ini admin bisa
melihat statistik pemesanan lapangan. Pada halaman dashboard
72
admin juga terdapat beberapa menu seperti menu lapangan, raket,
dan shuttlecock.
Gambar 4. 10 Tampilan Halaman Dashboard Admin

3) Tampilan Menu Lapangan
Tampilan halaman menu lapangan merupakan tampilan yang berisi
rekapitulasi atau data transaksi penyewaan lapangan. Pada halaman
ini admin akan mengatur proses transaksi dalam pemesanan
lapangan melalui button ubah status.
Gambar 4. 11 Tampilan Halaman Menu Lapangan
73
Gambar 4. 12 Tampilan Halaman Menu Lapangan
4) Tampilan Halaman Menu Raket
Halaman menu raket merupakan tampilan yang berisi rekapitulasi
atau data transaksi penyewaan raket. Pada halaman ini admin akan
mengatur proses transaksi dalam pemesanan raket melalui button
ubah status. Admin juga bisa menambahkan data raket pada halaman
ini.
Gambar 4. 13 Tampilan Halaman Menu Raket
74
Gambar 4. 14 Tampilan Halaman Menu Raket
5) Tampilan Halaman Menu Shuttlecock
Halaman menu shuttlecock merupakan tampilan yang berisi
rekapitulasi atau data transaksi penyewaan shuttlecock. Pada
halaman ini admin akan mengatur proses transaksi dalam pemesanan
shuttlecock melalui button ubah status.
Gambar 4. 15 Tampilan Halaman Menu Shuttlecock
75
4.2 Evaluasi Sistem
Sistem yang telah selesai dibuat oleh penulis ini selanjutnya akan
melakukan pengujian sistem langsung kepada pengelola Gor Harmoni Sei
Rotan.
Gambar 4. 16 Pengujian langsung ke Pengelola Gor Harmoni Sei Rotan

Berdasarkan pengujian black box yang telah penulis lakukan, berikut ini
ditemukan kelebihan dan kekurangan sistem dari hasil evaluasi sitem yang
ada pada gor harmoni sei rotan.
4.3.1 Kelebihan Sistem
Gambar 4. 17 Bukti wawancara kelebihan sistem
Gambar 4. 18 Bukti wawancara kelebihan sistem
76
1) Konsumen dapat dengan mudah memesan lapangan sesuai dengan
jam yang diinginkan dan bisa mengetahui jika jam yang dipilih
sedang tidak tersedia tanpa harus mendatangi langsung ke lokasi
lapangan badminton.
Pada saat ini, apabila ada konsumen yang ingin bermain

badminton, mereka terlebih dahulu harus mencari lapangan-
lapangan badminton yang ada disekitar mereka dengan cara
mendatangi langsung lapangan badminton tersebut atau dengan
cara menghubungi penyedia lapangan badminton untuk
menanyakan hari dan jam yang mereka inginkan untuk bermain
badminton kepada pengelola lapangan badminton.
Apabila lapangan yang mereka inginkan kosong atau belum ada

yang melakukan pemesanan lapangan maka mereka dapat
melakukan pemesanan lapangan tersebut dengan datang ke
lapangan untuk memastikan bahwa mereka pasti bermain
badminton. Apabila tidak ada jam kosong atau jam yang mereka
inginkan penuh, maka mereka harus mencari tempat penyewaan
laapngan badminton yang lainnya, hal ini tentu akan memakan
waktu dan kurangnya jam bermain bagi konsumen tersebut.
Dengan adanya sistem ini, pengguna dapat dengan mudah

memesan lapangan sesuai dengan jam yang diinginkan dan bisa
mengetahui jika jam yang dipilih sedang tidak tersedia tanpa harus
mendatangi langsung ke lokasi lapangan badminton.
2) Terdapat pemberitahuan melalui fitur notification pada admin

ketika konsumen sudah melakukan pembayaran. Dan terdapat
pemberitahuan melalui notification pada konsumen ketika admin
sudah mengkonfirmasi pemesanan.
Pada saat ini, dalam mengkonfirmasi pemesanan lapangan

badminton antara konsumen dan pihak pengelola lapangan,
konsumen sudah melakukan kesepakatan terlebih dahulu dengan
77
pengelola lapangan kapan fix nya konsumen bisa bermain. Setelah
fix, maka konsumen akan langsung membayar ke pengelola
lapangan badminton pada saat itu juga.
Dengan adanya sistem ini, ketika konsumen telah memesan

lapangan dan melakukan pembayaran, konsumen tidak perlu
menghubungi pihak pengelola lapangan untuk memastikan jika
mereka sudah melakukan pembayaran. Karena pada sistem ini
sudah ada notifikasi pada akun admin jika konsumen telah
melakukan pembayaran. Maka ketika admin mendapatkan
notifikasi tersebut, admin akan memeriksa pembayaran yang telah
dilakukan untuk mengkonfirmasi apakah pesanan sudah sesuai atau
tidak.
Begitu juga pada akun konsumen, mereka juga akan mendapatkan

notifikasi jika admin sudah menyetujui pesanan yang telah
dilakukan.
4.3.2 Kekurangan Sistem
Gambar 4. 19 Bukti wawancara kekurangan sistem
Gambar 4. 20 Bukti wawancara kekurangan sistem
1) Konsumen harus melakukan dua kali pembayaran jika sekaligus

menyewa raket ketika memesan lapangan.
Penyewaan raket juga disediakan pada sistem ini, karena akan

membantu beberapa konsumen yang ingin bermain namun alat
yang mereka miliki tidak memadai. Dengan adanya fitur
78
penyewaan raket, maka mereka yang tidak memiliki raket bisa
bermain di lapangan ini dengan menyewa raket yang diperlukan.
Namun jika ingin menyewa raket dalam pemesanan lapangan

badminton ini, pembayaran tidak bisa sekaligus dilakukan. Yang
dimana pembayaran penyewaan lapangan dan raket akan terpisah
pada halaman pembayaran. Jadi konsumen harus melakukan
pembayaran satu per satu antara lapangan dan raket.
2) Tidak dapat melakukan pemesanan untuk memilih lebih dari satu

lapangan dalam sekali pemesanan.
Mungkin ada beberapa konsumen yang ingin memesan lapangan

secara rombongan atau yang sejenisnya. Seperti pada pemesanan-
pemesanan barang online, konsumen bisa melakukan checkout
lebih dari 1 barang dalam sekali pemesanan saja. Tetapi pada
sistem ini, konsumen tidak bisa memesan lebih dari 1 lapangan jika
dalam sekali pemesanan, karena sistem ini hanya menyediakan
pemesanan 1 lapangan saja.
Maka jika ingin memesan lebih dari 1 lapangan konsumen bisa

memesan secara bertahap, yaitu dengan memesan 1 lapangan
terlebih dahulu. Kemudian jika ingin memesan lapangan lagi
silahkan lakukan pemesanan seperti yang sebelumnya.
79
BAB 5
SIMPULAN DAN SARAN
5.1 Simpulan
Berdasarkan hasil perancangan dan pengujian yang telah dilakukan, dapat
diambil kesimpulan bahwa :
1) Penelitian Tugas Akhir ini menghasilkan sebuah sistem penyewaan

lapangan badminton yang berjudul perancangan sistem penyewaan
lapangan badminton pada Gor Harmoni Sei Rotan berbasis web.
2) Dengan adanya sistem pemesanan lapangan badminton, memudahkan
pengguna untuk melihat ketersediaan lapangan dan dapat memesan
secara online.
3) Dengan adanya sistem pemesanan lapangan badminton ini bisa
memudahkan pengguna dalam transaksi secara online.
4) Dengan adanya sistem ini informasi mengenai lapangan badminton
lebih mudah didapatkan oleh konsumen tanpa harus datang ke lokasi.
5.2 Saran
Berikut ini adalah beberapa saran yang dapat ditambahkan guna untuk
pengembangan sistem berikutnya :
1) Perlu adanya sistem otomatis untuk pembatalan pesanan pada admin

jika customer belum melakukan pembayaran dalam rentang waktu
yang telah ditentukan.
2) Untuk pengembangan selanjutnya disarankan untuk membuat fitur
informasi tentang jadwal lapangan yang telah dipesan. Agar
konsumen tidak berulang dalam menginputkan jadwal pemesanan.
80
DAFTAR PUSTAKA
Agustian, Bobi, Susanto, Dodi. 2019. Analisa dan Perancangan Sistem Booking dan
Penjadawalan Pada GOR Saratoga Hall Berbasis Web. Universtias
Pamulang.
Iriadi, Nandang, Priatno, Ishaq, Ahmad, Yulianti, Winda. 2020. Sistem Informasi
Penyewaan Lapangan Futsal Berbasis Web Pada Futsal Station Bekasi.
Jurnal Networking and Security. 8(4).
Rahmat Jaya, Irpan Kusyadi. 2022. Perancangan Sistem Informasi Penyewaan

Lapangan Futsal di Wilayah Cipondoh Berbasis Web. Jurnal Ilmu
Komputer dan Science. 1(10)
Anggreyani, Yuli. 2022. Aplikasi Penyewaan Lapangan Badminton Berbasis

Website (Studi Kasus : Kota Tegal). Tugas Akhir. Politeknik Harapan Bersama.
Rini Malfiany, Rahmat Gunawan, Rusli Helmi. 2021. Perancangan Sistem

Penyewaan Lapangan Badminton Pada Gor Dewi Sport Hall Berbasis
Web. Jurnal Interkom. 6(2).
Kurniawan, Hamid, Apriliah, Widya, Kurniawan, Ilham, Firmansyah, Dede. 2020.

Penerapan Metode Waterfall Dalam Perancangan Sistem Informasi
Penggajian Pada SMK Bina Karya Karawang. Jurnal Interkom, 14(4),
161.
Mediana, Delia, Nurhidayat, Andi. 2018. Rancang bangun aplikasi helpdesk (a-desk)
berbasis web menggunakan framework laravel (studi kasus di pdam surya
sembada kota surabaya). Jurnal Manajemen Informatika, 8(2), 76.
Ikhsan, M. 2021. Analisis Dan Perancangan Pada Website Himpunan Mahasiswa

Program Studi Sistem Informasi (HMPSSI) STMIK Palangkaraya Berbasis
Web. Proposal Tugas Akhir. STMIK Palangkaraya.
Kusnandar, Acep, Syafarani, R. Fenny. 2019. Perancangan Sistem Informasi

Penyewaan Lapangan Futsal dan Berbasis Web di Bakjer Arena Bandung.
Universitas Komputer Indonesia
81
A.S., Rosa dan Shalahuddin, M. 2018. Rekayasa Perangkat Lunak Terstruktur dan
Berorientasi Objek. Bandung: Informatika Bandung.
82
LAMPIRAN
Lampiran 1 Surat Pengajuan Judul Tugas Akhir
83
Lampiran 2 Surat Kesediaan Dosen Pembimbing
84
Lampiran 3 Kartu Bimbingan Mahasiswa
85
Lampiran 4 Surat Permohonan Pengambilan Data
86
Lampiran 5 Form Bebas Revisi Penguji I
87
Lampiran 6 Form Bebas Revisi Penguji II
88
Lampiran 7 Listing Program
1. login.blade.php
@extends('layouts.guest')
@section('content')
<div class="p-5">
<div class="text-center">
<h1 class="h4 text-gray-900 mb-4">Selamat Datang</h1>
</div>
<form class="user" method="POST"
action="{{ route('login') }}">
@csrf
<div class="form-group">
<input type="email" name="email" class="form-control
form-control-user" id="exampleInputEmail"
aria-describedby="emailHelp" placeholder="Enter Email
Address...">
<x-input-error :messages="$errors->get('email')" class="mt-
2" />
</div>
<input type="password" name="password" class="form-
control form-control-user" id="exampleInputPassword"
placeholder="Password">
</div>
<div class="custom-control custom-checkbox small">
<input type="checkbox" class="custom-control-input"
id="customCheck" name="remember">
<label class="custom-control-label"
for="customCheck">Remember
Me</label>
</div>
</div>
<button class="btn btn-primary btn-user btn-block"
type="submit">
Login
</button>
<hr>
</form>
<hr>
{{-- <div class="text-center">
<a class="small" href="forgot-password.html">Forgot
Password?</a>
</div> --}}
<div class="text-center">
<a class="small" href="{{ route('register') }}">Create an
Account!</a>
89
</div>
</div>
@endsection
2. index.blade.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-
scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>Gor Harmoni</title>

<link href="/template/vendor/fontawesome-free/css/all.min.css"
rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?
family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,80
0i,900,900i"
rel="stylesheet">

<link href="/template/css/sb-admin-2.min.css" rel="stylesheet">
{{-- Tailwind --}}
<script src="https://cdn.tailwindcss.com"></script>
<style>
.overlay,
.lapangan {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.lapangan {
border-radius: 5px
}
.overlay:hover,
.lapangan:hover {
background-color: none;
}
a:hover {
text-decoration: none;
}
.mySlides {
display: none
90
}
img {
vertical-align: middle;
}
.slideshow-container {
position: relative;
margin: auto;
}
/* Next & previous buttons */
.prev,
.next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-
through */
.prev:hover,
.next:hover {
background-color: rgba(0, 0, 0, 0.8);
}
/* Caption text */
.text {
color: #ffffff;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
/* Number text (1/3 etc) */
91
.numbertext {
color: #ffffff;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* The dots/bullets/indicators */
.dot {
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #999999;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active,
.dot:hover {
background-color: #111111;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 5s;
}
@-webkit-keyframes fade {
from {
opacity: .4
}
to {
opacity: 1
}
}
@keyframes fade {
from {
opacity: .4
}
to {
opacity: 1
}
}
/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
92
.prev,
.next,
.text {
font-size: 11px
}
}
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Nunito', sans-serif;
}
::selection {
background: rgba(23, 162, 184, 0.3);
}
.wrapper {
max-width: 1200px;
margin: auto;
padding: 0 20px;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
}
.wrapper .box {
background: #fff;
width: calc(33% - 10px);
padding: 25px;
border-radius: 3px;
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.15);
}
.wrapper .box i.quote {
font-size: 20px;
color: #17a2b8;
}
.wrapper .box .content {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
padding-top: 10px;
}
.box .info .name {
font-weight: 600;
font-size: 17px;
93
}
.box .info .job {

font-size: 16px;
font-weight: 500;
color: #17a2b8;
}
.box .info .stars {
margin-top: 2px;
}
.box .info .stars i {
color: #17a2b8;
}
.box .content .image {
height: 75px;
width: 75px;
padding: 3px;
background: #17a2b8;
border-radius: 50%;
}
.content .image img {
height: 100%;
width: 100%;
object-fit: cover;
border-radius: 50%;
border: 2px solid #fff;
}
.box:hover .content .image img {
border-color: #fff;
}
@media (max-width: 1045px) {
.wrapper .box {
width: calc(50% - 10px);
margin: 10px 0;
}
}
@media (max-width: 702px) {
.wrapper .box {
width: 100%;
}
}
</style>
</head>
<body>
<div>
@include('components.homepage-topbar')

94

<div class="slideshow-container">
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img src="{{ asset('images/lapangan-1.jpg') }}"
class="object-cover w-full max-h-[70vh]">
<div class="absolute inset-0 flex flex-col items-center
justify-center">
<div class="text-white text-center">
<h5 class="md:text-4xl font-bold mb-4">Gor Harmoni
<br> Sei Rotan</h5>
<p class="text-xs md:text-lg font-bold">Temukan
beragam pengalaman bermain Badminton dengan Aman
dan
Nyaman</p>
</div>
</div>
</div>
<img src="{{ asset('images/slide2.jpg') }}" class="object-
cover w-full max-h-[70vh]">
<div class="absolute inset-0 flex flex-col items-center
justify-center">
<p class="text-xs md:text-lg font-bold">Keep your eye
on the shuttlecock, stay focused, and
strike the next shot.</p>
</div>
</div>
</div>
<img src="{{ asset('images/slide3.jpg') }}" class="object-
cover w-full max-h-[70vh]">
<div class="text font-bold">Keep calm and smash
hard</div>
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<br>
<div style="text-align:center">
<span class="dot" onclick="currentSlide(0)"></span>
</div>
95

{{-- List Field Start --}}

<div class="max-w-4xl py-4 mx-auto">
<div class="flex justify-center items-center text-center my-2
text-2xl font-bold text-slate-950">
<svg width="24" height="24" viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M12 5V19M9 12C9 12.7956 9.31607 13.5587
9.87868 14.1213C10.4413 14.6839 11.2044 15 12 15C12.7956 15
13.5587 14.6839 14.1213 14.1213C14.6839 13.5587 15 12.7956 15
12C15 11.2044 14.6839 10.4413 14.1213 9.87868C13.5587 9.31607
12.7956 9 12 9C11.2044 9 10.4413 9.31607 9.87868
9.87868C9.31607 10.4413 9 11.2044 9 12ZM3 9H6V15H3V9ZM18
9H21V15H18V9ZM3 7C3 6.46957 3.21071 5.96086 3.58579
5.58579C3.96086 5.21071 4.46957 5 5 5H19C19.5304 5 20.0391
5.21071 20.4142 5.58579C20.7893 5.96086 21 6.46957 21 7V17C21
17.5304 20.7893 18.0391 20.4142 18.4142C20.0391 18.7893 19.5304
19 19 19H5C4.46957 19 3.96086 18.7893 3.58579 18.4142C3.21071
18.0391 3 17.5304 3 17V7Z"
stroke="#1F2937" stroke-width="2" stroke-
linecap="round" stroke-linejoin="round" />
</svg>
<h4 class="mx-2">List Lapangan</h4>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-10 p-4">
@foreach ($fields as $field)
<div class="flex items-center justify-center">
<div class="relative">
<img src="/storage/{{ $field->image }}"
alt="Lapangan-1" class="rounded-md">
<div class="lapangan"></div>
<div class="absolute inset-0 flex items-center

justify-center">
<h5 class="text-lg font-bold">{{ $field-
>name }}</h5>
<div class="mx-auto mt-3">
<a href="{{ route('homepage.field-details',
$field->id) }}"
class="bg-yellow-700 hover:bg-blue-800
rounded-md text-white px-3 py-1">Lihat
Lapangan</a>
</div>
96
</div>
</div>
</div>
</div>
@endforeach
</div>
</div>
{{-- List Field End --}}
{{-- Shuttlecock Start --}}

<div class="max-w-4xl mx-auto">
<div class="flex justify-center items-center text-center my-2
text-2xl font-bold text-slate-950">
fill="none"
<path
d="M10.25 1.66666C9.44167 1.69166 8.81667
2.36666 8.84167 3.16666C8.85 3.36666 8.89167 3.55833 8.975
3.74999L9.21667 4.28333C9.25 4.39166 9.19167 4.50833 9.075
4.54166C9 4.58333 8.91667 4.54166 8.85833 4.47499L8.50833
4.01666C8.23333 3.66666 7.81667 3.45 7.375 3.44166C6.56667
3.425 5.9 4.06666 5.88333 4.86666C5.875 5.21666 5.99167 5.54999
6.20833 5.83333L6.55833 6.24999H6.56667C6.63333 6.35833
6.60833 6.49166 6.51667 6.55833C6.44167 6.61666 6.34167 6.61666
6.275 6.55833L5.83333 6.20833C5.55 5.99166 5.20833 5.87499
4.86667 5.88333C4.06667 5.89999 3.425 6.56666 3.44167
7.375C3.45 7.81666 3.66667 8.23333 4.01667 8.50833L4.49167
8.875C4.58333 8.95833 4.58333 9.09166 4.48333 9.16666C4.45591
9.19508 4.42038 9.21434 4.3816 9.2218C4.34282 9.22926 4.30268
9.22455 4.26667 9.20833H4.25833L3.75 8.975C3.55833 8.9 3.36667
8.85 3.16667 8.84166C2.36667 8.81666 1.69167 9.45 1.66667
10.2583C1.66667 10.8583 2 11.4083 2.55 11.6417L12.0417
15.8667L15.8667 12.0417L11.6417 2.54999C11.4083 1.99166
10.8333 1.64166 10.25 1.66666ZM10.9417 5.08333C11.2917
5.07499 11.6083 5.27499 11.7417 5.59166L14.2833
11.2917L10.9917 8.00833L10.2167 6.24999C9.96667 5.72499 10.35
5.09999 10.9417 5.08333ZM8.20833 7.375C8.43333 7.375 8.64167
7.45833 8.8 7.62499L12.8083 11.6333C13.1417 11.95 13.15 12.475
12.8333 12.8083C12.5 13.1417 11.9833 13.15 11.6333
12.8083L7.625 8.8C7.54574 8.72453 7.48234 8.634 7.43852
8.53372C7.39469 8.43344 7.37132 8.32543 7.36976 8.216C7.36821
8.10657 7.38851 7.99793 7.42948 7.89645C7.47044 7.79497 7.53125
7.70268 7.60833 7.62499C7.76667 7.45833 7.98333 7.375 8.20833
7.375ZM5.94167 10.1417C6.05 10.1417 6.16667 10.175 6.25
10.2167L8.025 11L11.3083 14.2833L5.59167 11.7417C4.74167
11.375 5.025 10.1167 5.94167 10.1417ZM16.9 13.3667L13.3667
16.9L14.075 17.6083C14.7083 18.2333 15.625 18.475 16.4833
97
18.25C16.906 18.1345 17.2912 17.9108 17.601 17.601C17.9108
17.2912 18.1345 16.906 18.25 16.4833C18.475 15.625 18.2333
14.7083 17.6083 14.075L16.9 13.3667Z"
fill="#1F2937" />
</svg>
<h4 class="mx-2">Shuttlecock</h4>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">

<div class="px-4 py-10 drop-shadow-xl rounded-xl">
<img src="{{ asset('images/shuttlecock.jpg') }}"
alt="Shuttlecock" class="rounded-md">
</div>
<form method="POST"
action="{{ route('shuttlecock.order') }}" class="flex items-center
justify-start">
@csrf
<input type="hidden" name="price"
value="{{ $shuttlecock->price }}">
<div class="px-4 md:py-4">
<p class="text-slate-950">
Harga : Rp <span class="text-slate-700 font-bold">
{{ number_format($shuttlecock->price, 0, '.',
'.') }}
</span>
</p>
<p class="text-slate-950 my-2">Status Shuttlecock :
<b>{{ $shuttlecock->stock > 0 ? 'Tersedia' :
'Habis' }}</b>
</p>
@if ($shuttlecock->stock > 0)
<div class="qty text-slate-950 my-2">
<label for="qty">Kuantitas : </label>
<select id="qty" name="qty"
class="border border-black rounded-md text-sm
px-1.5 py-0.5">
@for ($i = 1; $i <= ($shuttlecock->stock >
100 ? 100 : $shuttlecock->stock); $i++)
<option value="{{ $i }}">{{ $i }}</option>
@endfor
</select>
</div>
<div class="py-2">
<button class="bg-neutral-700 hover:bg-neutral-
800 rounded-md text-white px-3 py-2"
type="submit">Pesan</button>
</div>
98
@endif
</div>
</form>
</div>
</div>
{{-- Shuttlecock End --}}
</div>
<script
src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
@if (session()->get('message'))
<script>
Swal.fire(
'Berhasil',
`{{ session()->get('message') }}`,
'success'
)
</script>
@endif
<div class="flex justify-center items-center text-center my-2 text-
2xl font-bold text-slate-950">
fill="none"
</svg>
<h4 class="mx-2">Mengapa Memakai Gor Harmoni?</h4>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-10 p-4">
<img src="{{ asset('images/mudah.png') }}" alt=""
class="rounded-md mx-auto">
<div class="items-center justify-center">
<div class="text-black text-center mt-4">
<h5 class="text-lg font-bold">Mudah &
Praktis</h5>
<a class="text-grey ">Cari dan booking lapangan
badminton, cukup dari ponsel pintar
anda kapanpun, dimanapun.</a>
</div>
</div>
</div>
</div>
</div>
99
<img src="{{ asset('images/trans.png') }}" alt=""
<h5 class="text-lg font-bold">Transaksi
Online</h5>
<a class="text-grey ">Transaksi Onlie anti
ribet.</a>
</div>
</div>
</div>
</div>
</div>

<img src="{{ asset('images/detail.png') }}" alt=""
<h5 class="text-lg font-bold">Cek Detail Lapangan
Tanpa ke Lokasi</h5>
<div class="mx-2 mt-3">
<a class="text-grey ">Bingung pilih lapangan
yang mana? kamu bisa cek detail tiap
lapangan tanpa harus bolak balik ke lokasi.</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="flex justify-center items-center text-center my-2 text-
2xl font-bold text-slate-950 mt-5">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none"
</svg>
<h4 class="mx-2 pt-40">Kata Kata Legenda Badminton
Indonesia</h4>
</div>
<div class="wrapper mt-5">
<div class="box">
<i class="fas fa-quote-left quote"></i>
<p>Jika Anda tidak memperjuangkan apa yang Anda inginkan,
jangan tangisi saat Anda kehilangan. Paksa dirimu!
100
Karena tidak ada orang lain yang akan melakukannya untuk
Anda. Mintalah pertolongan pada Tuhan, dan
tentu orang terdekat serta keluarga juga pasti akan
membantu. Tak ada tujuan yang dicapai tanpa
keringat.</p>
<div class="content">
<div class="info">
<div class="name">Jonatan Christie</div>
<div class="job">PB. Tangkas Specs | Jakarta</div>
</div>
<div class="image">
<img src="{{ asset('images/profile1.jpg') }}" alt="">
</div>
</div>
</div>
<div class="box">
<p>Tak perlu merasa heran ketika kita tersandung di tengah
jalan, karena itu adalah dinamika dlm sebuah
kehidupan. Jika segala sesuatu berjalan sesuai rencana,
maka mungkin kita tidak akan mengerti arti dari
sebuah perjuangan. Perjuangan untuk menghadapi
keterpurukan, perjuangan untuk bangkit dan menjadi lebih
baik lagi.</p>
<div class="info">
<div class="name">Muhammad Rian Ardianto</div>
<div class="job">PB. Jaya Raya | Jakarta</div>
</div>
<div class="image">
<img src="images/profile2.jpg" alt="">
</div>
</div>
</div>
<div class="box">
<p>Hal yang perlu kamu pelajari adalah tetap tegakkan kepala,
jika kegagalan membuat kamu merasa down, kamu
mungkin tidak bisa melihat keberkahan yang telah
ditempatkan dalam hidupmu. Perubahan dalam hidup kita
tidak datang untuk siapa yang menunggu, tetapi kamu harus
bekerja keras untuk itu.</p>
<div class="info">
<div class="name">Kevin Sanjaya Sukamuljo</div>
<div class="job">PB. Djarum Kudus | Jawa
Tengah</div>
</div>
101
<div class="image">
<img src="images/profile3.jpg" alt="">
</div>
</div>
</div>
</div>
<br>
<br>

<script src="/template/vendor/jquery/jquery.min.js"></script>
<script
src="/template/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>

<script
src="/template/vendor/jquery-easing/jquery.easing.min.js"></script>
<script

<script src="/template/js/sb-admin-2.min.js"></script>
<script>
let slideIndex = 0;
let timeoutId = null;
const slides = document.getElementsByClassName("mySlides");
const dots = document.getElementsByClassName("dot");
showSlides();
function currentSlide(index) {
slideIndex = index;
showSlides();
}
function plusSlides(step) {
if (step < 0) {
slideIndex -= 2;
if (slideIndex < 0) {
slideIndex = slides.length - 1;
}
}
showSlides();
}
function showSlides() {
for (let i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
dots[i].classList.remove('active');
}
slideIndex++;
if (slideIndex > slides.length) {
slideIndex = 1
}
slides[slideIndex - 1].style.display = "block";
102
dots[slideIndex - 1].classList.add('active');
if (timeoutId) {
clearTimeout(timeoutId);
}
timeoutId = setTimeout(showSlides, 5000); // Change image
every 5 seconds
}
</script>
</body>
</html>
3. field-details.blade.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial
scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Gor Harmoni - Detail Lapangan</title>
<link href="https://fonts.googleapis.com/css?
0i,900,900i"
rel="stylesheet">
{{-- Tailwind --}}

<style>
a:hover {
text-decoration: none;
}
</style>
</head>
<body>
<div>

{{-- Detail Lapangan --}}
<div class="max-w-4xl mx-auto mb-2">
<div class="grid grid-cols-1 md:grid-cols-2 gap-2 md:gap-4">
103
<div class=" px-4 py-2">
<div class="mt-2 mb-3">
<div class="my-4">
<a href="{{ route('homepage.index') }}"
class="flex items-center text-center text-
semibold font-bold text-slate-950">
<svg width="17" height="17" viewBox="0 0 41
41" fill="none"
<path d="M28.176 18.121H16.7937L19.3075 15.4866C19.6755
15.0999 19.8748 14.5829 19.8616 14.0492C19.8484 13.5156 19.6238
13.009 19.2371 12.641C18.8504 12.273 18.3334 12.0737 17.7997
12.0869C17.2661 12.1001 16.7595 12.3247 16.3915
12.7114L10.6401 18.7444C10.5729 18.8266 10.5124 18.914 10.4591
19.0058C10.3663 19.1211 10.2916 19.25 10.2379 19.3879C10.1672
19.5678 10.1264 19.758 10.1172 19.951L10.077 20.132C10.0802
20.3948 10.1348 20.6544 10.2379 20.8962C10.3359 21.1359 10.4793
21.3544 10.6602 21.5397L16.6932 27.5727C16.8801 27.7612
17.1026 27.9108 17.3476 28.0129C17.5927 28.115 17.8555 28.1675
18.121 28.1675C18.3865 28.1675 18.6493 28.115 18.8944
28.0129C19.1394 27.9108 19.3619 27.7612 19.5488
27.5727C19.7373 27.3857 19.8869 27.1633 19.989 26.9183C20.0911
26.6732 20.1437 26.4103 20.1437 26.1449C20.1437 25.8794 20.0911
25.6165 19.989 25.3715C19.8869 25.1264 19.7373 24.904 19.5488
24.7171L16.9345 22.143H28.176C28.7093 22.143 29.2209 21.9311
29.598 21.554C29.9751 21.1768 30.187 20.6653 30.187
20.132C30.187 19.5986 29.9751 19.0871 29.598 18.71C29.2209
18.3329 28.7093 18.121 28.176 18.121Z" fill="blue" />
<path d="M20.132 0.0220032C16.1546 0.0220032 12.2666 1.20143
8.9595 3.41115C5.65242 5.62087 3.07487 8.76162 1.55279
12.4362C0.0307165 16.1109 -0.367529 20.1543 0.40842
24.0553C1.18437 27.9562 3.09966 31.5395 5.9121 34.3519C8.72453
37.1644 12.3078 39.0797 16.2087 39.8556C20.1097 40.6315 24.1532
40.2333 27.8278 38.7112C31.5024 37.1891 34.6432 34.6116 36.8529
31.3045C39.0626 27.9974 40.242 24.1094 40.242 20.132C40.242
17.4911 39.7219 14.8761 38.7112 12.4362C37.7006 9.99638 36.2193
7.77947 34.3519 5.91209C32.4845 4.0447 30.2676 2.56341 27.8278
1.55279C25.3879 0.542164 22.7729 0.0220032 20.132
0.0220032ZM20.132 36.22C16.9501 36.22 13.8397 35.2765 11.194
33.5087C8.54834 31.7409 6.4863 29.2283 5.26864 26.2886C4.05098
23.3489 3.73238 20.1142 4.35314 16.9934C4.9739 13.8726 6.50613
11.006 8.75608 8.75607C11.006 6.50612 13.8726 4.97389 16.9934
4.35313C20.1142 3.73237 23.3489 4.05097 26.2886
5.26863C29.2283 6.48629 31.7409 8.54833 33.5087 11.194C35.2765
13.8396 36.22 16.9501 36.22 20.132C36.22 24.3988 34.525 28.4909
31.5079 31.5079C28.4909 34.525 24.3988 36.22 20.132 36.22Z"
fill="blue" />
104
</svg> <span class="mx-2 text-blue-
700">Kembali</span>
</a>
</div>
<div class="flex items-center text-center text-
semibold font-bold text-slate-950">
24" fill="none"
<path
d="M12 5V19M9 12C9 12.7956 9.31607
13.5587 9.87868 14.1213C10.4413 14.6839 11.2044 15 12
15C12.7956 15 13.5587 14.6839 14.1213 14.1213C14.6839 13.5587
15 12.7956 15 12C15 11.2044 14.6839 10.4413 14.1213
9.87868C13.5587 9.31607 12.7956 9 12 9C11.2044 9 10.4413
9.31607 9.87868 9.87868C9.31607 10.4413 9 11.2044 9 12ZM3
9H6V15H3V9ZM18 9H21V15H18V9ZM3 7C3 6.46957 3.21071
5.96086 3.58579 5.58579C3.96086 5.21071 4.46957 5 5
5H19C19.5304 5 20.0391 5.21071 20.4142 5.58579C20.7893 5.96086
21 6.46957 21 7V17C21 17.5304 20.7893 18.0391 20.4142
18.4142C20.0391 18.7893 19.5304 19 19 19H5C4.46957 19 3.96086
18.7893 3.58579 18.4142C3.21071 18.0391 3 17.5304 3 17V7Z"
stroke="#1F2937" stroke-width="2" stroke-
linecap="round"
stroke-linejoin="round" />
</svg>
<h4 class="mx-2">DETAIL LAPANGAN</h4>
</div>
</div>
<img src="/storage/{{ $field->image }}"
alt="Lapangan-A" class="rounded-md">
<div class="flex my-2">
<h4 class="mx-1 text-bold text-lg text-slate-950">{{
$field->name }}</h4>
</div>
<p class="mx-1 text-slate-700">{{ $field-
>description }}</p>
</div>
</div>
<form
class="flex md:justify-start {{ $is_available ? 'items-start'
: 'items-center' }} mx-4 pb-4 md:pt-12"
method="POST" action="{{ route('field.order',
$field) }}">
@csrf
<div class="my-2 w-full">
<div class="flex items-center">
105
fill="none"
<path
d="M6.75 10.5C6.75 11.7427 8.7645 12.75 11.25 12.75C13.7355
12.75 15.75 11.7427 15.75 10.5M6.75 10.5C6.75 9.25725 8.7645 8.25
11.25 8.25C13.7355 8.25 15.75 9.25725 15.75 10.5M6.75
10.5V13.5C6.75 14.742 8.7645 15.75 11.25 15.75C13.7355 15.75
15.75 14.742 15.75 13.5V10.5M2.25 4.5C2.25 5.304 3.108 6.0465 4.5
6.4485C5.892 6.8505 7.608 6.8505 9 6.4485C10.392 6.0465 11.25
5.304 11.25 4.5C11.25 3.696 10.392 2.9535 9 2.5515C7.608 2.1495
5.892 2.1495 4.5 2.5515C3.108 2.9535 2.25 3.696 2.25 4.5ZM2.25
4.5V12C2.25 12.666 2.829 13.0875 3.75 13.5M2.25 8.25C2.25 8.916
2.829 9.3375 3.75 9.75"
stroke="#4B5563" stroke-linecap="round"
</svg>
<p class="mx-2 text-slate-950">Harga : Rp <span
class="text-slate-700 font-
bold">{{ number_format($field->price, 0, '.', '.') }}</span>
/ Jam
</p>
</div>
<div class="flex items-center my-2">
fill="none"
<path
d="M9 3.75V14.25M6.75 9C6.75 9.59674
6.98705 10.169 7.40901 10.591C7.83097 11.0129 8.40326 11.25 9
11.25C9.59674 11.25 10.169 11.0129 10.591 10.591C11.0129 10.169
11.25 9.59674 11.25 9C11.25 8.40326 11.0129 7.83097 10.591
7.40901C10.169 6.98705 9.59674 6.75 9 6.75C8.40326 6.75 7.83097
6.98705 7.40901 7.40901C6.98705 7.83097 6.75 8.40326 6.75
9ZM2.25 6.75H4.5V11.25H2.25V6.75ZM13.5
6.75H15.75V11.25H13.5V6.75ZM2.25 5.25C2.25 4.85218 2.40804
4.47064 2.68934 4.18934C2.97064 3.90804 3.35218 3.75 3.75
3.75H14.25C14.6478 3.75 15.0294 3.90804 15.3107 4.18934C15.592
4.47064 15.75 4.85218 15.75 5.25V12.75C15.75 13.1478 15.592
13.5294 15.3107 13.8107C15.0294 14.092 14.6478 14.25 14.25
14.25H3.75C3.35218 14.25 2.97064 14.092 2.68934
13.8107C2.40804 13.5294 2.25 13.1478 2.25 12.75V5.25Z"
stroke="#4B5563" stroke-linecap="round" stroke-linejoin="round" />
</svg>
<p class="mx-2 text-slate-950">Status Lapangan :
<b>{{ $is_available ? 'Tersedia' : 'Tidak
Tersedia' }}</b>
</p>
106
</div>
<div class="flex items-center my-2 text-slate-950">
<svg xmlns="http://www.w3.org/2000/svg"
width="20" height="20" viewBox="0 0 24 24"
stroke="#4B5563"
fill="none" stroke-linecap="round" stroke-
linejoin="round">
<path stroke="none" d="M0 0h24v24H0z"
fill="none"></path>
<path d="M11.795 21h-6.795a2 2 0 0 1 -2 -2v-
12a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v4">
</path>
<path d="M18 18m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8
0"></path>
<path d="M15 3v4"></path>
<path d="M7 3v4"></path>
<path d="M3 11h16"></path>
<path d="M18 16.496v1.504l1 1"></path>
</svg>
<div class="mx-2">
<input type="datetime-local"
value="{{ old("start_at") }}" name="start_at" class="form-control
text-sm" required>
</div>
</div>
<div class="flex items-center my-2 text-slate-950">
fill="none"
<path
d="M11.25 10.5L9 9V5.25M2.25 9C2.25
9.88642 2.42459 10.7642 2.76381 11.5831C3.10303 12.4021 3.60023
13.1462 4.22703 13.773C4.85382 14.3998 5.59794 14.897 6.41689
15.2362C7.23583 15.5754 8.11358 15.75 9 15.75C9.88642 15.75
10.7642 15.5754 11.5831 15.2362C12.4021 14.897 13.1462 14.3998
13.773 13.773C14.3998 13.1462 14.897 12.4021 15.2362
11.5831C15.5754 10.7642 15.75 9.88642 15.75 9C15.75 8.11358
15.5754 7.23583 15.2362 6.41689C14.897 5.59794 14.3998 4.85382
13.773 4.22703C13.1462 3.60023 12.4021 3.10303 11.5831
2.76381C10.7642 2.42459 9.88642 2.25 9 2.25C8.11358 2.25 7.23583
2.42459 6.41689 2.76381C5.59794 3.10303 4.85382 3.60023 4.22703
4.22703C3.60023 4.85382 3.10303 5.59794 2.76381
6.41689C2.42459 7.23583 2.25 8.11358 2.25 9Z"
</svg>
<div class="mx-2">
107
<label for="duration" class="m-0">Durasi :
</label>
<select id="duration" name="duration"
class="border border-black rounded-md text-sm
px-1.5 py-0.5">
<option value="1">1 Jam</option>
</select>
</div>
</div>
@if ($is_available)
<p class="text-slate-950">Ingin sewa raket?</p>
<div class="flex mt-2">
<div id="button-ya"
class="bg-neutral-700 hover:bg-neutral-800
text-white rounded-md px-2.5 m-0 text-sm py-1 cursor-pointer">
Ya
</div>
</div>
<div class="raket-input hidden my-3">
<div class="flex items-center mb-2 text-slate-
950">
class="text-gray-800" width="20"
height="20" viewBox="0 0 24 24" stroke-
width="1.5" stroke="currentColor"
linejoin="round">
fill="none"></path>
<path d="M12.718 20.713a7.64 7.64 0 0 1 -7.48 -12.755l.72
-.72a7.643 7.643 0 0 1 9.105 -1.283l2.387 -2.345a2.08 2.08 0 0 1
3.057 2.815l-.116 .126l-2.346 2.387a7.644 7.644 0 0 1 -1.052 8.864">
</path>
<path d="M14 18m-3 0a3 3 0 1 0 6 0a3 3 0 1
0 -6 0"></path>
<path d="M9.3 5.3l9.4 9.4"></path>
</svg>
<div class="mx-2">
<label for="racket" class="m-0">Raket :
</label>
<select id="racket" name="racket"
class="border border-black rounded-md
text-sm px-1.5 py-0.5">
108
<option value="0" selected disabled>Pilih
Raket</option>
@forelse ($rackets as $racket)
<option
value="{{ $racket }}">{{ $racket->name }}</option>
@empty
<option disabled selected>Raket tidak
tersedia saat ini</option>
@endforelse
</select>
</div>
</div>
<div class="flex items-center mb-2 text-slate-
950">
linejoin="round">
fill="none"></path>
<path
d="M4 3m0 2a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v14a2 2 0 0 1 -2 2h-
12a2 2 0 0 1 -2 -2z">
</path>
<path
d="M8 7m0 1a1 1 0 0 1 1 -1h6a1 1 0 0 1 1 1v1a1 1 0 0 1 -1 1h-6a1 1
0 0 1 -1 -1z">
</path>
<path d="M8 14l0 .01"></path>
<path d="M12 14l0 .01"></path>
<path d="M16 14l0 .01"></path>
<path d="M8 17l0 .01"></path>
<path d="M12 17l0 .01"></path>
<path d="M16 17l0 .01"></path>
</svg>
<div class="mx-2">
<label for="racket_qty" class="m-
0">Kuantitas : </label>
<select id="racket_qty" name="racket_qty"
class="border border-black rounded-md
text-sm px-1.5 py-0.5">
<option value="0" selected
disabled>Jumlah raket</option>
<option value="1">1 raket</option>
109
</select>
</div>
</div>
<div id="racket-price" class="flex items-center hidden">
<svg width="20" height="20" viewBox="0 0 18 18" fill="none"
<path d="M6.75 10.5C6.75 11.7427 8.7645 12.75 11.25
12.75C13.7355 12.75 15.75 11.7427 15.75 10.5M6.75 10.5C6.75
9.25725 8.7645 8.25 11.25 8.25C13.7355 8.25 15.75 9.25725 15.75
10.5M6.75 10.5V13.5C6.75 14.742 8.7645 15.75 11.25
15.75C13.7355 15.75 15.75 14.742 15.75 13.5V10.5M2.25 4.5C2.25
5.304 3.108 6.0465 4.5 6.4485C5.892 6.8505 7.608 6.8505 9
6.4485C10.392 6.0465 11.25 5.304 11.25 4.5C11.25 3.696 10.392
2.9535 9 2.5515C7.608 2.1495 5.892 2.1495 4.5 2.5515C3.108 2.9535
2.25 3.696 2.25 4.5ZM2.25 4.5V12C2.25 12.666 2.829 13.0875 3.75
13.5M2.25 8.25C2.25 8.916 2.829 9.3375 3.75 9.75"
stroke="#4B5563" stroke-linecap="round" stroke-linejoin="round"
/></svg>
<p class="mx-2 text-slate-950">Harga : Rp <span class="price text-
slate-700 font-bold"></span> / Jam</p>
<input type="hidden" name="racket_price" value=""></div>
</div>
<div class="flex justify-center md:justify-start mt-10">
<button class="bg-neutral-700 hover:bg-neutral-800 rounded-md text-
white px-3 py-2" type="submit" id="pesan">Pesan</button>
</div>
@endif
</div>
</form>
</div>
</div>
</div>
<script
@if (session()->get('status'))
<script>
Swal.fire(
`{{ session()->get('title') }}`,
`{{ session()->get('status') }}`
)
</script>
@endif
<script type="text/javascript">
const racketPriceEl = document.querySelector('#racket-price');
const priceEl = document.querySelector('#racket-price .price');
110
const racket_price =
document.querySelector('input[name=racket_price]');
const racketQtyEl = document.querySelector('#racket_qty');
const racketLists = document.querySelector('#racket');
let raket;
let racketQty;
racketLists.addEventListener("change", (e) => {
racketPriceEl.classList.remove("hidden")
racket = JSON.parse(e.target.value)
priceEl.innerHTML = racketQty ? racket.price * racketQty :
racket.price
})
racketQtyEl.addEventListener("change", (e) => {
racketQty = e.target.value
priceEl.innerHTML = racket ? racket.price * racketQty : ""
racket_price.value = racket ? racket.price * racketQty : ""
})
const hiddenButton = document.querySelector('#button-ya');
const raketInput = document.querySelector('.raket-input');
// Ketika Button ya Diklik
hiddenButton.addEventListener("click", (e) => {
raketInput.classList.toggle("hidden")
hiddenButton.innerHTML =
raketInput.classList.contains("hidden") ? "Ya" : "Batal"
if (raketInput.classList.contains("hidden")) {
raket = null
racketLists.value = null
}
})
</script>
</body>
</html>
4. order.blade.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Order Shuttlecock</title>
<link
href="https://fonts.googleapis.com/css?
0i,900,900i"
111
rel="stylesheet">
{{-- Tailwind --}}
</head>
<body>

{{-- Pemesanan Shuttlecock Start --}}
<div class="my-4 pl-4">
<a href="{{ route('homepage.index') }}"
class="flex items-center text-center text-semibold font-bold
text-slate-950">
fill="none"
<path d="M28.176 18.121H16.7937L19.3075
15.4866C19.6755 15.0999 19.8748 14.5829 19.8616
14.0492C19.8484 13.5156 19.6238 13.009 19.2371 12.641C18.8504
12.273 18.3334 12.0737 17.7997 12.0869C17.2661 12.1001 16.7595
12.3247 16.3915 12.7114L10.6401 18.7444C10.5729 18.8266
10.5124 18.914 10.4591 19.0058C10.3663 19.1211 10.2916 19.25
10.2379 19.3879C10.1672 19.5678 10.1264 19.758 10.1172
19.951L10.077 20.132C10.0802 20.3948 10.1348 20.6544 10.2379
20.8962C10.3359 21.1359 10.4793 21.3544 10.6602
21.5397L16.6932 27.5727C16.8801 27.7612 17.1026 27.9108
17.3476 28.0129C17.5927 28.115 17.8555 28.1675 18.121
28.1675C18.3865 28.1675 18.6493 28.115 18.8944 28.0129C19.1394
27.9108 19.3619 27.7612 19.5488 27.5727C19.7373 27.3857 19.8869
27.1633 19.989 26.9183C20.0911 26.6732 20.1437 26.4103 20.1437
26.1449C20.1437 25.8794 20.0911 25.6165 19.989 25.3715C19.8869
25.1264 19.7373 24.904 19.5488 24.7171L16.9345
22.143H28.176C28.7093 22.143 29.2209 21.9311 29.598
21.554C29.9751 21.1768 30.187 20.6653 30.187 20.132C30.187
19.5986 29.9751 19.0871 29.598 18.71C29.2209 18.3329 28.7093
18.121 28.176 18.121Z"
fill="blue" />
<path
d="M20.132 0.0220032C16.1546 0.0220032 12.2666
1.20143 8.9595 3.41115C5.65242 5.62087 3.07487 8.76162 1.55279
12.4362C0.0307165 16.1109 -0.367529 20.1543 0.40842
24.0553C1.18437 27.9562 3.09966 31.5395 5.9121 34.3519C8.72453
37.1644 12.3078 39.0797 16.2087 39.8556C20.1097 40.6315 24.1532
40.2333 27.8278 38.7112C31.5024 37.1891 34.6432 34.6116 36.8529
31.3045C39.0626 27.9974 40.242 24.1094 40.242 20.132C40.242
112
17.4911 39.7219 14.8761 38.7112 12.4362C37.7006 9.99638 36.2193
7.77947 34.3519 5.91209C32.4845 4.0447 30.2676 2.56341 27.8278
1.55279C25.3879 0.542164 22.7729 0.0220032 20.132
0.0220032ZM20.132 36.22C16.9501 36.22 13.8397 35.2765 11.194
33.5087C8.54834 31.7409 6.4863 29.2283 5.26864 26.2886C4.05098
23.3489 3.73238 20.1142 4.35314 16.9934C4.9739 13.8726 6.50613
11.006 8.75608 8.75607C11.006 6.50612 13.8726 4.97389 16.9934
4.35313C20.1142 3.73237 23.3489 4.05097 26.2886
5.26863C29.2283 6.48629 31.7409 8.54833 33.5087 11.194C35.2765
13.8396 36.22 16.9501 36.22 20.132C36.22 24.3988 34.525 28.4909
31.5079 31.5079C28.4909 34.525 24.3988 36.22 20.132 36.22Z"
fill="blue" />
</svg> <span class="mx-2 text-blue-700">Kembali</span>
</a>
</div>
<form class="max-w-sm mx-auto " method="POST"
action="{{ route('payment.store') }}"
enctype="multipart/form-data">
@csrf
<input type="hidden" name="sale_id" value="{{ $sale-
>id }}">
<div class=" px-4 py-2">
<div class="my-2">
<div class="flex items-center text-center text-semibold
font-bold text-slate-950">
<h4 class="mx-2 mb-3">UPLOAD BUKTI
PEMBAYARAN</h4>
</div>
<div class="flex my-2">
<div class="mx-2">
@if ($sale->duration)
<div class="flex items-center mb-2">
<svg width="20" height="20" viewBox="0 0
18 18" fill="none"
<path d="M11.25 10.5L9 9V5.25M2.25 9C2.25 9.88642 2.42459
10.7642 2.76381 11.5831C3.10303 12.4021 3.60023 13.1462 4.22703
13.773C4.85382 14.3998 5.59794 14.897 6.41689 15.2362C7.23583
15.5754 8.11358 15.75 9 15.75C9.88642 15.75 10.7642 15.5754
11.5831 15.2362C12.4021 14.897 13.1462 14.3998 13.773
13.773C14.3998 13.1462 14.897 12.4021 15.2362 11.5831C15.5754
10.7642 15.75 9.88642 15.75 9C15.75 8.11358 15.5754 7.23583
15.2362 6.41689C14.897 5.59794 14.3998 4.85382 13.773
4.22703C13.1462 3.60023 12.4021 3.10303 11.5831
2.76381C10.7642 2.42459 9.88642 2.25 9 2.25C8.11358 2.25 7.23583
2.42459 6.41689 2.76381C5.59794 3.10303 4.85382 3.60023 4.22703
113
4.22703C3.60023 4.85382 3.10303 5.59794 2.76381
6.41689C2.42459 7.23583 2.25 8.11358 2.25 9Z"
</svg>
<p class="mx-2 text-slate-950">Durasi : <span class="text-slate-700
font-bold">{{ $sale->duration }} Jam</span>
</p>
</div>
@endif
@if ($sale->qty)
linejoin="round">
fill="none"></path>
<path
d="M4 3m0 2a2 2 0 0 1 2 -2h12a2 2 0 0
1 2 2v14a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2z">
</path>
<path
d="M8 7m0 1a1 1 0 0 1 1 -1h6a1 1 0 0
1 1 1v1a1 1 0 0 1 -1 1h-6a1 1 0 0 1 -1 -1z">
</path>
<path d="M8 14l0 .01"></path>
<path d="M12 14l0 .01"></path>
<path d="M16 14l0 .01"></path>
<path d="M8 17l0 .01"></path>
<path d="M12 17l0 .01"></path>
<path d="M16 17l0 .01"></path>
</svg>
<p class="mx-2 text-slate-950">Kuantitas :
<span
bold">{{ $sale->qty }}</span>
</p>
</div>
@endif
18" fill="none"
<path
d="M6.75 10.5C6.75 11.7427 8.7645
12.75 11.25 12.75C13.7355 12.75 15.75 11.7427 15.75 10.5M6.75
114
10.5C6.75 9.25725 8.7645 8.25 11.25 8.25C13.7355 8.25 15.75
9.25725 15.75 10.5M6.75 10.5V13.5C6.75 14.742 8.7645 15.75 11.25
15.75C13.7355 15.75 15.75 14.742 15.75 13.5V10.5M2.25 4.5C2.25
5.304 3.108 6.0465 4.5 6.4485C5.892 6.8505 7.608 6.8505 9
6.4485C10.392 6.0465 11.25 5.304 11.25 4.5C11.25 3.696 10.392
2.9535 9 2.5515C7.608 2.1495 5.892 2.1495 4.5 2.5515C3.108 2.9535
2.25 3.696 2.25 4.5ZM2.25 4.5V12C2.25 12.666 2.829 13.0875 3.75
13.5M2.25 8.25C2.25 8.916 2.829 9.3375 3.75 9.75"
</svg>
<p class="mx-2 text-slate-950">Harga : Rp
<span
bold">{{ number_format($sale->price, 0, '.', '.') }}</span>
</p>
</div>
18" fill="none"
<path
d="M6.75 10.5C6.75 11.7427 8.7645
12.75 11.25 12.75C13.7355 12.75 15.75 11.7427 15.75 10.5M6.75
10.5C6.75 9.25725 8.7645 8.25 11.25 8.25C13.7355 8.25 15.75
9.25725 15.75 10.5M6.75 10.5V13.5C6.75 14.742 8.7645 15.75 11.25
15.75C13.7355 15.75 15.75 14.742 15.75 13.5V10.5M2.25 4.5C2.25
5.304 3.108 6.0465 4.5 6.4485C5.892 6.8505 7.608 6.8505 9
6.4485C10.392 6.0465 11.25 5.304 11.25 4.5C11.25 3.696 10.392
2.9535 9 2.5515C7.608 2.1495 5.892 2.1495 4.5 2.5515C3.108 2.9535
2.25 3.696 2.25 4.5ZM2.25 4.5V12C2.25 12.666 2.829 13.0875 3.75
13.5M2.25 8.25C2.25 8.916 2.829 9.3375 3.75 9.75"
</svg>
<p class="mx-2 text-slate-950">Total Bayar :
Rp <span class="text-slate-700 font-
bold">{{ number_format($price_total, 0, '.', '.') }}</span>
</p>
</div>
<div class="my-4">
<label for="payment_id" class="m-0 text-slate-
950">Transfer Pembayaran Ke :</label>
950">Gopay & OVO : 082360385820</label>
950">BRI : 527401003537505</label>
</div>
115
<div class="my-4">
950">Pilih Metode Pembayaran :
</label>
<select id="payment_id" name="payment_id"
class="border border-black rounded-md text-
slate-950 text-sm px-1.5 py-0.5">
@foreach ($payments as $payment)
<option value="{{ $payment-
>id }}">{{ $payment->name }}</option>
@endforeach
</select>
</div>
<div class="my-2">
<p class="text-slate-950">Foto/Screenshot
Bukti Pembayaran</p>
<label class="block my-3">
<span class="sr-only">Pilih file</span>
<input type="file" name="image"
class="block w-full text-sm text-slate-500
file:mr-4 file:py-2 file:px-4
file:rounded-full file:border-0
file:text-sm file:font-semibold
file:bg-violet-50 file:text-violet-700
hover:file:bg-violet-100
" />
</label>
<x-input-error :messages="$errors-
>get('image')" class="mt-2" />
</div>
</div>
</div>
</div>
</div>
</div>
<div class="flex justify-center md:justify-end">
<button class="bg-blue-700 hover:bg-blue-800 rounded-md
text-white px-3 py-2" type="submit"
id="pesan">Kirim</button>
</div>
</form>
</div>
{{-- Pemesanan Shuttlecock End --}}
<script
@if (session()->get('message'))
<script>
Swal.fire(
116
'Berhasil',
'success'
)
</script>
@endif
</body>
</html>
117
Lampiran 8 Biodata Penulis
BIODATA PENULIS
LAPORAN AKHIR
1. Identitas Diri
Nama Lengkap : Fitri Indriani
Jenis Kelamin : Perempuan
Tempat dan Tanggal Lahir
: Medan, 21 Desember 2001
Jurusan / Program Studi
: Teknik Komputer dan Informatika/
Manajemen Informatika
NIM : 2005102069
Alamat Rumah : Jl Sidomulyo Dusun V Gg. Mabana
No Telepon / HP : 082360385820
Alamat E-mail : fitriindriani@students.polmed.ac.id
Judul Laporan Akhir : Sistem Penyewaan Lapangan Badminton
Pada Gor Harmoni Sei Rotan
Nama Dosen Pembimbing : Wiwin Sry Adinda Banjarnahor, S.Kom.,M.Sc.
2. Riwayat Pendidikan
No Jenjang Nama Sekolah Tempat Tahun
Pendidikan Ijazah
1 SD SD Negeri Jl. Pendidikan II, Sei Rotan 2014
105288
2 SMP SMP Negeri 27 Jl. Pancing Psr IV No 2 2017
Medan
3 SMA SMK Swasta Jl. Letjen Jamin Ginting 2020
Telkom Shandy KM. 11,1 No. 9C
Putra Medan
3. Kegiatan Kemahasiswaan yang Pernah Diikuti

No Jenis Kegiatan Status Dalam Waktu dan Tempat
Kegiatan
4. Penghargaan / Prestasi yang Pernah Diterima

No Jenis Penghargaan Pihak Pemberi Tahun
Penghargaan
Medan, 28 Juli 2023
118
(Fitri Indriani)
119

Sistem Penyewaan Lapangan Badminton

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Sistem Penyewaan Lapangan Badminton

Diunggah oleh

Hak Cipta:

Format Tersedia

LAPORAN AKHIR

SISTEM PENYEWAAN LAPANGAN BADMINTON PADA

PROGRAM STUDI MANAJEMEN INFORMATIKA

Yang bertandatangan di bawah ini :

Menyatakan dengan sebenarnya bahwa Laporan Akhir ini secara keseluruhan

“Allah tidak membebani seseorang melainkan sesuai dengan kesanggupannya“

“Karena sesungguhnya sesudah kesulitan itu ada kemudahan“

Jangan takut pada luka dan sakit

“Jangan protes sama proses!“

Dengan segenap hati, laporan akhir ini dipersembahkan untuk

Kata Kunci : Badminton, Penyewaan Lapangan, Berbasis Web.

Keywords: Badminton, Booking Field, Web Based.

Medan, 14 Juli 2023

Tabel 2. 1 Simbol Use Case Diagram..................................................................................9

Gambar 2. 1 Metode Waterfall................................................................................7

Lampiran 1 Surat Pengajuan Judul Tugas Akhir......................................................69

1.2 Rumusan Masalah

1.5 Manfaat Tugas Akhir

1.6 Sistematika Penulisan

BAB 2 : TINJAUAN PUSTAKA

2.1 Penelitian Terdahulu

No Peneliti, Judul, Pembahasan Persamaan dan

Gambar 2. 1 Metode Waterfall

2.2.2 Framework Laravel

2.2.3 Blackbox Testing

2.2.4 Unified Modelling Language (UML)

2.2.5 Use Case Diagram

Tabel 2. 1 Simbol Use Case Diagram

Simbol Nama Keterangan

Sumber : Rosa dan Shalahuddin (2018)

2.2.6 Activity Diagram

2.2.7 Class Diagram

Sumber : Rosa dan Shalahuddin (2018:155)

3.1 Metode Pengembangan Sistem

Tahap selanjutnya penulis melakukan tahap perancangan, pada tahap

3.2 Alat dan Bahan

Tabel 3. 1 Perangkat Keras

No Perangkat Keras Spesifikasi

Tabel 3. 2 Perangkat Lunak

No Perangkat Lunakk Spesifikasi

3.3 Metode Pengumpulan Data

Pada metode ini data diperoleh dengan melakukan peninjauan

Studi literatur merupakan proses pencarian dan penelusuran berupa

Pada tahap ini penulis melakukan wawancara terhadap pemilik lapangan

Gambar 3. 2 Daftar Pertanyaan Wawancara Pemilik Lapangan

Berikut daftar pertanyaan yang diberikan dalam wawancara terhadap

Gambar 3. 3 Daftar Pertanyaan Wawancara Pemilik Lapangan

3.4 Analisis Sistem

3.4.1 Analisis Sistem yang Berjalan

Penulis mengamati proses kegiatan penyewaan lapangan badminton

Gambar 3. 4 Flowmap Proses Pemesanan Sistem Sedang Berjalan

Berikut tahapan laksana sistem yang sedang berjalan secara manual

1) Konsumen mendatangi lokasi gor harmoni sei rotan.

3.4.2 Evaluasi Sistem yang Berjalan

1) Sistem penyewaan masih manual dan belum terkomputerisasi.

2) Informasi tentang gor badminton masih terbatas.

3) Sistem penyewaan yang tidak dapat dilakukan dimana saja dan

1) Membuat sistem informasi penyewaan lapangan badminton berbasis

3.5 Langkah Perancangan

3.5.1 Perancangan Sistem

3.5.2 Use Case Diagram

Berikut merupakan deskripsi pendefinisian use case scenario :

Tabel 3. 3 Use Case Skenario Registrasi

Use Case ID UC – C01