BAB III

PEMBAHASAN
3.1. Gambaran Umum Aplikasi
Aplikasi pemesanan futsal berbasis web dibuat untuk membantu pengelola
lapangan futsal dan user agar mudah untuk memesan lapangan. Dalam
pengaplikasiaannya user dapat mencari informasi yang tertera dalam halaman
utama yang difungsikan oleh pengelola untuk sarana promosi, selain itu user juga
dapat memesan lapangan sekaligus melakukan transaksi pembayaran. Dalam
proses pemesanan user terlebih dulu untuk mendaftar, apabila sudah terdaftar user
selanjutnya melakukan proses pengisian form pemesanan. Apabila user sudah
mengisi form pemesanan selanjutnya user melakukan proses transaksi melalui
bank yang tertera didalam form pembayaran kemudian meng-upload bukti
pengiriman pada halaman web.
Pada lapangan yang telah dipesan oleh user lain maka akan muncul
pemberitahuan bahwa lapangan tersebut tidak bisa di proses. Sedangkan apabila
pembayaran tidak dilakukan dalam waktu satu jam setelah proses pemesanan.
Maka akan terdapat pemberitahuan bahwa wakttu untuk melakukan pembayaran
telah habis atau user dapat melakukan pembatalan secara langsung dihalaman
pemesanan dengan memilih pilihan “batal”.
Kemudian untuk pihak pengelola lapangan futsal juga memiliki sistem
dimana admin diberi wewenang untuk mengelola data yaitu dapat menerima
pesanan untuk diinput kedalam database setelah user melakukan pembayaran
lapangan secara lunas, menghapus pesanan apabila user tidak melakukan proses
pembayaran, dan admin juga dapat melihat data user.
Untuk menangani pemesanan ganda pada web Futsal Arena, maka akan
muncul pemberitahuan di halaman pemesanan lapangan bahwa lapangan telah di
pesan pada tanggal atau jam yang sama oleh user lain.
3.2. Use Case Diagram
Use case diagram merupakan diagram yang menggambarkan hubungan
antara aktor dengan sistem. Use case diagram bisa mendeskripsikan sebuah
interaksi antara satu atau lebih aktor dengan sistem yang akan dibuat. Use case
diagram juga bisa digunakan untuk mengetahui fungsi apa saja yang ada di dalam
sebuah sistem dan bisa juga mempresentasikan sebuah interaksi aktor dengan
sistem. Komponen tersebut kemudian menjelaskan komunikasi antara
aktor, dengan sistem yang ada. Dengan demikian, use case dapat dipresentasikan
dengan urutan yang sederhana, dan akan mudah dipahami oleh para
konsumen. Manfaat dari use case sendiri adalah untuk memudahkan komunikasi
dengan menggunakan domain expert dan juga end user, memberikan kepastian
pemahaman tentang requirement atau juga kebutuhan sebuah sistem.
Use case diagram mempunyai 3 komponen ,yaitu :
1. Sistem
Menyatakan batasan sistem dalam relasi dengan aktor-aktor yang
menggunakannya (di luar sistem) dan fitur-fitur yang harus disediakan
(dalam sistem).
2. Aktor
Aktor adalah segala hal diluar sistem yang akan menggunakan sistem
tersebut untuk melakukan sesuatu. Bisa merupakan manusia, sistem, atau
device yang memiliki peranan dalam keberhasilan operasi dari sistem.
3. Use Case
Use Case sendiri adalah gambaran fungsional dari sebuah sistem.
Dengan demikian, antara komponen dan juga pengguna pada sistem
tersebut, akan mengerti atau paham mengenai fungsi sistem yang tengah
dibangun.
3.2.1 Use Case Diagram Admin
 Gamb
ar 3. 1 Use Case Diagram Admin
Pada gambar 3 1 use case diagram menjelaskan bahwa admin bisa
mengakses beberapa halaman seperti login, dashboard, user, booking,
pembayaran, lapangan, rekening.
3.2.2 Use Case Diagram User

Gambar 3. 2 Use Case Diagram User

Pada Gambar 3. 2 use case diagram menjelaskan bahwa user bisa
mengakses beberapa halaman seperti home, login, tentang, cara
pemesanan, booking, book now.
3.3. Activity Diagram
Activity Diagram merupakan rancangan aliran aktivitas atau aliran kerja
dalam sebuah sistem yang akan dijalankan. Activity Diagram juga digunakan
untuk mendefinisikan atau mengelompokan aluran tampilan dari sistem tersebut.
Activity Diagram memiliki komponen dengan bentuk tertentu yang dihubungkan
dengan tanda panah. Panah tersebut mengarah ke-urutan aktivitas yang terjadi dari
awal hingga akhir.
3.3.1 Activity Diagram Admin

Gamb
ar 3.3.1
Pada gambar 3.3.1 activity diagram menggambarkan suatu alur
dari admin login sampai admin logout.

3.3.2 Activity Diagram User

 Ga
mbar 3.3.2 Activity Diagram User
Pada Gambar 3.3.2 activity diagram menggambarkan suatu alur
dari user login sampai user logout.
3.4. Struktur Navigasi
Dalam menciptakan sebuah website, hal pertama yang harus kita lakukan
adalah menentukan struktur navigasi. Struktur navigasi merupakan struktur atau
alur dari suatu program yang merupakan rancangan hubungan (rantai kerja) dari
beberapa area yang berbeda dan dapat membantu mengorganisasikan seluruh
elemen pembuatan website.
3.4.1 Strukutur Navigasi User

Gamb
ar 3. 5 Struktur Navigasi User
 Dalam Struktur Navigasi User menggambarkan tentang bagaimana
user menggunakan situs web ini. Dimana user dapat melihat home,
tentang, cara pemesanan, booking, book now, login, register, dan lost your
password.
3.4.2 Struktur Navigasi Admin

Gamb
ar 3. 6 Struktur Navigasi Admin
Dalam Struktur Navigasi Admin menggamabarkan tentang
bagaimana admin menggunakan situs web ini. Dimana admin dapat
melihat menu login, dashboard, user, booking, pembayaran, lapangan,
rekening.
3.5. Membuat Struktur Database
Untuk membuat struktur database harus mengetahuiu atribut-atribut apa
saja yang harus diperlukan dalam pembuatan tabel di dalam database. Setelah
mengetahui atribut-atribut apa saja yang diperlukan, juga menentukan jenis tipe
data apa saja yang di perlukan untuk atribut-atribut tersebut.
a. Tabel Admin
Tabel 3. 1 Struktur Tabel Admin
Tak Tautan Media
Kolom Jenis Bawaan Komentar
Ternilai ke type
id (Utama) bigint(20) Tidak
name varchar(255) Tidak
email varchar(255) Tidak
username varchar(255) Tidak
password varchar(255) Tidak
created_at timestamp Ya NULL
updated_at timestamp Ya NULL

deleted_at timestamp Ya NULL

Tabel 3. 1 berfungsi untuk menyimpan data admin seperti id,

name, email, username, password.
b. Tabel Lapangan

Tabel 3. 2 Struktur Tabel Lapangan

Tak Komenta Media
Kolom Jenis Bawaan Tautan ke
Ternilai r type
id (Utama) bigint(20) Tidak

lapangan_i
varchar(255) Tidak
d

nama varchar(255) Tidak

keterangan text Tidak

harga_sian
varchar(255) Tidak
g

harga_mal
varchar(255) Tidak
am

foto1 varchar(255) Tidak

foto2 varchar(255) Ya NULL

foto3 varchar(255) Ya NULL

created_at timestamp Ya NULL

updated_at timestamp Ya NULL

deleted_at timestamp Ya NULL

 Tabel 3. 2 berfungsi untuk menyimpan data lapangan seperti id,
lapangan_id, nama, keterangan, harga_siang, harga_malam, foto1, foto2,
foto3.
c. Tabel Rekening

Tabel 3. 3 Struktur Tabel Rekening

Media
Tak Tautan
Kolom Jenis Bawaan Komentar
Ternilai ke type

id (Utama) bigint(20) Tidak

nomer_rekening varchar(255) Tidak

nama_rekening varchar(255) Tidak

created_at timestamp Ya NULL

updated_at timestamp Ya NULL

Tabel 3. 3 berfungsi untuk menyimpan data rekening seperti id,
nomer_rekening, nama_rekening.
d. Tabel User

Tabel 3. 4 Strtuktur Tabe Users

Tak
Tautan Medi
Kolom Jenis Ternila Bawaan Komentar
ke a type
i
id (Utama) bigint(20) Tidak
user_id varchar(255) Tidak
name varchar(255) Tidak
no_hp varchar(255) Tidak
jk varchar(255) Tidak
username varchar(255) Tidak
email varchar(255) Tidak
email_verified_at timestamp Ya NULL
alamat varchar(255) Tidak
password varchar(255) Tidak
two_factor_secret text Ya NULL
two_factor_recovery_codes text Ya NULL
remember_token varchar(100) Ya NULL
created_at timestamp Ya NULL
updated_at timestamp Ya NULL
deleted_at timestamp Ya NULL
Tabel 3. 4 berfungsi untuk menyimpan data users seperti id,
user_id, name, no_hp, jk, username, email, email_verivied_at, alamat,
password.
e. Tabel User Bayar

Tabel 3. 5 Struktur Tabel Bayar

Tak Media
Kolom Jenis Bawaan Tautan ke Komentar
Ternilai type
id (Utama) bigint(20) Tidak
user__bookings -
booking_id varchar(255) Tidak
> booking_id
user_id varchar(255) Tidak users -> user_id
tanggal varchar(255) Tidak
bukti_tf varchar(255) Tidak
tanggal_upload varchar(255) Tidak
status varchar(255) Tidak
created_at timestamp Ya NULL
updated_at timestamp Ya NULL
deleted_at timestamp Ya NULL
Tabel 3. 5 berfungsi untuk menyimpan data user bayar seperti id,
booking_id, user_id, tanggal, bukti_tf, tanggal_upload, status.
f. Tabel Reset Password

Tabel 3. 6 Tabel Reset Password

Tak Tautan Media
Kolom Jenis Bawaan Komentar
Ternilai ke type
email varchar(255) Tidak
token varchar(255) Tidak
created_at timestamp Ya NULL
Tabel 3. 6 berfungsi untuk user mereset password
g. Tabel User Booking

Tabel 3. 7 Struktur Tabel Booking

Tak Media
Kolom Jenis Bawaan Tautan ke Komentar
Ternilai type
id (Utama) bigint(20) Tidak
booking_id varchar(255) Tidak
users ->
user_id varchar(255) Tidak
user_id
lapangans ->
lapangan_id varchar(255) Tidak
lapangan_id
tanggal varchar(255) Tidak
lama_mulai varchar(255) Tidak
jam_mulai varchar(255) Tidak
jam_habis varchar(255) Tidak
jenis varchar(255) Tidak
harga_lapangan varchar(255) Tidak
total varchar(255) Tidak
status varchar(255) Tidak
created_at timestamp Ya NULL
updated_at timestamp Ya NULL
deleted_at timestamp Ya NULL
Tabel 3. 7 berfungsi untuk menyimpan data user booking seperti
id, booking_id, user_id, lapangan_id, tanggal, lama_mulai, jam_mulai,
jam_habis, jenis, harga_lapangan, total, status.
h. Relasi
 Gambar 3. 7 Relasi
Pada gambar 3.7 merupakan sebuah relasi yang saling
berhubungan antara data users, data users_booking, data users_bayar, dan
data lapangan.

3.6. Langkah Pembuatan Web

Pada tahapan pembuatan website ini dibuat dengan software Visual Studio
Code dan untuk databasenya sendiri menggunakan MySQL. Berikut merupakan
source code pembuatan website.
3.6.1 Source Code Admin
Pada tampilan admin mempunyai tujuh sub menu source code yang
terdiri dari login, dashboard, data user, data lapangan, data pembayaran,
data booking, dan data rekening.

a. Source Code Login Admin

 Gambar
3. 8 Source Code Login Admin

b. Souce Code Dashboard Admin

Gambar
3. 9 Source Code Dashboard Admin

c. Source Code Data User

 Gamb
ar 3. 10 Source Code Data User Admin

d. Source Code Data Lapangan

Gamba
r 3. 11 Source Code Data Lapangan
e. Source Code Konfirmasi Pembayaran
 Gamb
ar 3. 12 Source Code Konfirmasi Pembayaran
f. Source Code Data Booking Admin

Gamb
ar 3. 13 Source Code Data Booking Admin
g. Source Code Rekening
 Gam
bar 3. 14 Source Code Rekening Admin
3.6.2 Source Code User
Pada tampilan admin mempunyai sembilan sub menu source code
yang terdiri dari daftar, masuk, home, tentang, cara pemesanan, booking,
dashboard, jadwal, dan lupa password
a. Source Code Daftar

Gamb
ar 3. 15 Source Code Daftar
b. Source Code Masuk
 Gamb
ar 3. 16 Source Code Masuk
c. Souce Code Home

Gamb
ar 3. 17 Source Code Home
d. Source Code Tentang

Gambar 3. 18 Source Code Tentang

e. Source Code Cara Pemesanan

Gambar 3. 19 Source Code Cara Pemesanan

f. Source Code Dashboard User

Gamb
ar 3. 20 Source Code Dashboard User
g. Source Code Booking User
 Gambar
3. 21 Source Code Booking User
h. Source Code Jadwal

Gam
bar 3. 22 Source Code Jadwal
 i. Source Code Lupa Password

Gambar 3. 23 Source Code Lupa Password

3.7 Uji Coba Aplikasi
Pada tahap uji coba aplikasi web, yaitu melakukan uji coba terhadap
perangkat computer untuk mengakses situs website pemesanan lapangan Futsal
Arena pada sisi pengguna dan sisi admin.
3.7.1 Uji Coba Tampilan Web
1. Home
 Gam
bar 3. 24 Tampilan Home
Pada Gambar 3. 24 dapat dilihat terdapat tampilan “Home”.
Tampilan Home merupakan halaman utama yang ditampilkan di awal.
Halaman home berisikan beberapa menu yang akan memudahkan
pengguna untuk melakukan pemesanan.
2. Tentang

Gamb
ar 3. 25 Tampilan Tentang
Pada Gambar 3. 25 dapat dilihat terdapat tampilan “Tentang”.
Tampilan tentang merupakan tampilan yang menampilkan informasi
tentang sejarah futsal didunia.
3. Cara Pemesanan
 Gamb
ar 3. 26 Tampillan Cara Pemesanan
Pada Gambar 3. 26 dapat dilihat terdapat tampilan “Cara
Pemesanan”. Tampilan cara pemesanan merupakan halaman yang
menampilan langkah-langkah cara pemesanan di Futsal Arena.
4. Daftar

Gambar 3. 27 Tampilan Daftar

Pada Gambar 3. 27 dapat dilihat terdapat tampilan “Daftar”.
Tampilan daftar berguna untuk pengguna membuat account. Pada halaman
ini juga pengguna harus mengisi data informasi pengguna setelah mengisi
semua data informasi yang telah diminta, pengguna dapat langsung
mendaftar.
5. Login

Gam
bar 3. 28 Tampilan Login
Pada Gambar 3. 28 dapat dilihatterdapat tampilan “Login”.
Tampilan login merupakan halaman tampilan yang ditunjukkan untuk
pengguna yang sudah melakukan pendaftaran.
6. Pilihan Lapangan

Gam
bar 3. 29 Tampilan Pilihan Lapangan
 Pada Gambar 3. 29 dapat dilihat terdapat tampilan “Pilihan
Lapangan”. Tampilan pilihan lapangan merupakan tampilan yang
menampilkan pilihan lapangan yang terdapat di Futsal Arena.
7. Booking

Gambar 3. 30 Tampilan Booking

Pada Gambar 3. 30 dapat dilihat terdapat tampilan “Booking”.
Tampilan booking merupakan halaman yang menampilkan form
pemesanan lapangan. Di form pemesanan pengguna harus mengisi data
yang ada di form pemesanan.
8. Dashboard
 Gamba
r 3. 31 Tampilan Dashboard
Pada Gambar 3. 31 dapat dilihat terdapat tampilan “Dashboard”.
Tampilan dashboard merupakan halaman yang menampilkan list booking,
dimana di halaman tersebut terdapat menu batal dan menu bayar.
9. Pembayaran

Gamb
ar 3. 32 Tampilan Pembayaran
Pada Gambar 3. 32 dapat dilihat terdapat form “Pembayaran”.
Pada form ini user melakukan proses pembayaran pesanan.
10. Tampilan Invoice
 Gamb
ar 3. 33 Tampilan Invoice
Pada Gambar 3. 33 dapat dilihat terdapat form “Bukti”. Pada form
ini user melakukan screenshot sebagai bukti sudah membooking.
11. Lupa Paswword

Gamb
ar 3. 34 Tampilan Lupa Password
 Pada Gambar 3. 34 dapat dilihat terdapat form “ Lupa Password”.
Pada form ini user harus memasukan terlebih dulu email, jika sudah cek
ke email, lalu klik “Reset Password”.
12. Tampilan Login Admin

Gamb
ar 3. 35 Login Admin
Pada Gambar 3. 35 dapat dillihat terdapat form “ Login”. Pada
form ini admin memasukan username dan password admin.
13. Tampilan Dashboard Admin

Gamba
r 3. 36 Dashboard Admin
 Pada Gambar 3. 36 dapat dilihat terdapat tampilan “Dashboard”.
Yang berisikan total user, total booking, dan request pending.
14. Tampilan Data User

Gamba
r 3. 37 Tampilan Data User
Pada Gambar 3. 37 dapat dilihat terdapat tampilan “User” yang
berisikan data-data user yang terdaftar.
15. Tampilan Data Booking

Gamb
ar 3. 38 Tampilan Data Booking
Pada Gambar 3. 38 dapat dilihat terdapat tampilan “Booking” yang
berisikan data user yang sudah membooking.
 16. Tampilan Konfirmasi Pembayaran

Gamb
ar 3. 39 Tampilan Konfirmasi Pembayaran
Pada Gambar 3. 39 dapat dilihat terdapat tampilan “Pembayaran”
yang berisikan data pesanan dan bukti transfer.

17. Tampilan Data Lapangan

Gamba
r 3. 40 Tampilan Data Lapangan
Pada Gambar 3. 40 dapat dilihat terdapat tampilan “Lapangan”
yang berisikan data-data lapangan.
 18. Tampilan Data Rekening

Gamb
ar 3. 41 Tampilan Data Rekening
Pada Gambar 3. 41 dapat dilihat terdapat tampilan “Rekening”
yang berisikan data-data rekening.

19. Logout

Gamb
ar 3. 42 Tampilan Logout
 Pada Gambar 3. 42 dapat dilihat terdapat tampilan “Logout”.
Tampilan logout berfungsi untuk admin keluar dari web Futsal Arena.