Skripsi Rancang Bangun Aplikasi Pemesanan Dan Penjadwalan Lapangan Futsal Online Di Garuda Futsal

SKRIPSI
RANCANG BANGUN APLIKASI PEMESANAN DAN

PENJADWALAN LAPANGAN FUTSAL ONLINE
DI GARUDA MUDA FUTSAL CIBUBUR
JAKARTA TIMUR
Diajukan sebagai salah satu syarat menyelesaikan Sarjana Stata Satu di Institut
Teknologi Budi Utomo
Disusun Oleh:
FITRIYANTO DWI PRASETYO
NIM: 16271065061
PROGRAM STUDI TEKNIK INFORMATIKA

FAKULTAS TEKNOLOGI INDUSTRI
INSTITUT TEKNOLOGI BUDI UTOMO
JAKARTA
2021
LEMBAR PENGESAHAN JUDUL
Dengan ini menyatakan bahwa skripsi yang dibuat oleh:
Nama : Fitriyanto Dwi Prasetyo

Nomor Induk Mahasiswa : 16271065061
Program Studi : Teknik Informatika
Fakultas : Teknologi Industri
Judul Skripsi :

JAKARTA TIMUR
Telah dapat diterima sebagai salah satu syarat menyelesaikan Sarjana Teknik
Informatika di Institut Teknologi Budi Utomo.
Jakarta, 29 Agustus 2021
Mengetahui,
Dekan Ketua Program Studi
Fakultas Teknologi Industri Teknik Informatika
(Dr. Ir. H. Suryadi, S.T., M.T.) (Aji Nurrohman, S.Kom., M.M.S.I)
i
PROGRAM STUDI TEKNIK INFORMATIKA
FAKUTAS TEKNOLOGI INDUSTRI INSTITUT
TEKNOLOGI BUDI UTOMO
LEMBAR PERSETUJUAN MENGIKUTI SIDANG SKRIPSI
JUDUL SKRIPSI

JAKARTA TIMUR
Dibuat Oleh:

NIM: 16271065061
Telah memenuhi syarat untuk mengikuti Sidang Skripsi
Jakarta, 31 Juli 2021 Jakarta, 02 Agustus 2021

Menyetujui, Menyetujui,
(Dannie Febrianto, S.Kom., M.M.S.I) (Aji Nurrohman, S.Kom., M.M.S.I)

Pembimbing I Pembimbing II
ii
LEMBAR PERSETUJUAN GELAR
Kami yang bertandatangan dibawah ini menyatakan bahwa Skripsi yang dibuat
oleh:

NIM: 16271065061
Dengan Judul:

JAKARTA TIMUR
Dapat diterima sebagai salah satu syarat untuk mendapatkan gelar:
SARJANA TEKNIK
Dannie Febrianto, S.Kom., M.M.S.I ………………………

Pembimbing 1
Aji Nurrohman, S.Kom., M.M.S.I ………………………

Pembimbing 2
Dewan Sidang Penguji :
Wibisono, S.Kom., M.M ………………………

Ketua Sidang
Aji Nurrohman, S.Kom., M.M.S.I ………………………

Sekretaris
Dannie Febrianto, S.Kom., M.M.S.I ………………………

Anggota
iii
LEMBAR PERNYATAAN KEASLIAN
Yang bertanda tangan dibawah ini:

Dengan ini menyatakan bahwa Skripsi dengan judul:

PENJADWALAN LAPANGAN FUTSAL ONLINE DI GARUDA
MUDA FUTSAL CIBUBUR JAKARTA TIMUR
Adalah benar hasil karya sendiri, tidak mencontoh atau menduplikasi Skripsi/karya
tulis orang lain. Bilamana dikemudian hari terbukti skripsi saya hasil duplikasi dari
Skripsi/karya tulis orang lain, maka saya bersedia dibatalkan kelulusannya atau proses
pengadilan.
Demikian surat pernyataan ini saya buat tanpa paksaan dan digunakan sesuai
keperluan.

Yang menyatakan,
Materai 10.000
(Fitriyanto Dwi Prasetyo)
iv
PERNYATAAN PERSETUJUAN PUBLIKASI SKRIPSI UNTUK
KEPENTINGAN AKADEMIK
Sebagai sivitas akademika Institut Teknologi Budi Utomo, saya yang bertanda
tangan di bawah ini:
Jenis Karya : Skripsi
Demi mengembangkan ilmu pengetahuan, menyetujui untuk memberikan kepada
Institut Teknologi Budi Utomo Hak Bebas Royalti Nonekslusif atas Skripsi saya
yang berjudul:

PENJADWALAN LAPANGAN FUTSAL ONLINE DI GARUDA
MUDA FUTSAL CIBUBUR JAKARTA TIMUR
Beserta perangkat yang ada (jika ada). Dengan Hak Bebas Royalti Noneksklusif ini
Institut Teknologi Budi Utomo berhak menyimpan, mengalihmedia/format-kan,
mengelola dalam bentuk pangkalan data (database), merawat, dan
mempublikasikan skripsi saya.
Demikian pernyataan ini saya buat dengan sebenarnya.
Dibuat di : Jakarta
Pada tanggal : 29 Agustus 2021
Yang menyatakan,
Materai 10.000
(Fitriyanto Dwi Prasetyo)

v
LEMBAR ASISTENSI PEMBIMBING I
vi
LEMBAR ASISTENSI PEMBIMBING II
vii
MOTTO & PERSEMBAHAN
MOTTO
 Percaya bahwa Allah tidak menguji diluar batas kemampuan kita
 Berdoa, bertawakkal dan bersungguh-sungguh adalah kunci untuk sukses
 Dibalik kesulitan pasti ada kemudahan yang akan datang
 Yang bisa mengubah hidupmu adalah dirimu sendiri bukan orang
 Selalu berfikirlah positive apapun yang terjadi, karena pikiran mu
mempengaruhi masa depan mu.
 Berani akan tantangan karena orang yang takut tantangan bearti sudah menua
sejak dini.
PERSEMBAHAN
Karya yang sederhana ini ku persembahkan untuk:
Bapak/Ibu dan keluarga yang selalu mendoakan yang terbaik, serta teman-temanku
yang selalu memberi semangat dan motovasi untuk terus belajar dan berkarya.
viii
KATA PENGANTAR
Segala puji dan syukur penulis panjatkan kepada Allah SWT atas karunia -
Nya sehingga penulis dapat menyelesaikan laporan skripsi ini. Skripsi yang
berjudul “Rancang Bangun Aplikasi Pemesanan Dan Penjadwalan Lapangan Futsal
Online Di Garuda Muda Futsal Cibubur Jakarta Timur” ini disusun sebagai bukti
syarat akademis pelaksanaan mata kuliah Skripsi Program Studi Teknik
Informatika di Institut Teknologi Budi Utomo.
Pada kesempatan ini, penulis menyampaikan rasa terima kasih yang

sebesar-besarnya atas bantuan, bimbingan, serta dukungan dari berbagai pihak baik
yang telah membantu secara moril dan materil.
Pada kesempatan ini penulis juga menyampaikan ucapan terima kasih

kepada:
1. Bapak Dr. Ir. H. Martin Djamin, M.Sc. selaku Rektor Institut Teknologi
Budi Utomo.
2. Bapak Dr. Ir. H. Suryadi, S.T., M.T. selaku Dekan Fakultas Teknologi
Industri.
3. Bapak Aji Nurrohman, S.Kom., M.M.S.I selaku Ketua program studi
Teknik Informatika Institut Teknologi Budi Utomo yang telah banyak
memberikan ilmu, motivasi serta dukungan dalam penyusunan skripsi.
4. Bapak Dannie Febrianto, S.Kom., M.M.S.I selaku pembimbing I yang
telah membimbing, mendokan serta memberikan kepercayaan yang
sangat berarti bagi penulis.
5. Bapak Aji Nurrohman, S.Kom., M.M.S.I selaku pembimbing II yang
telah membimbing, mendokan serta memberikan kepercayaan yang
sangat berarti bagi penulis
6. Segenap dosen program studi Teknik Informatika yang dengan sukarela
membagi ilmu kepada penulis.
ix
7. Kedua Orang tua yang selalu memberikan dukungan, baik moril maupun
material dan telah menjadi sumber inspirasi dalam menyelesaikan kripsi
ini.
8. Teman-teman semua atas motivasi dan bantuan yang amat berarti bagi
penulis.
9. Semua pihak yang terlibat membantu penulis dalam penyusunan skripsi
ini.
Semoga Allah SWT memberikan balasan yang berlipat ganda kepada

semuanya. Penulis sadar bahwa penyusunan laporan ini masih jauh dari kata
sempurna, oleh karena itu kritik serta saran dapat disampaikan melalui e-mail
ke prass.chiamixz@gmail.com. Akhirnya, hanya kepada Allah SWT penulis
serahkan segalanya, semoga dapat bermanfaat khususnya bagi pembaca dan yang
membacanya, Aamiin.
Jakarta, 30 Juli 2021

Penulis
x
JAKARTA TIMUR
Oleh: Fitriyanto Dwi Prasetyo

Pembimbing 1: Dannie Febrianto, S.Kom., M.M.S.I
ABSTRAK
Perkembangan teknologi yang pesat menyebabkan penggunaan teknologi
informasi meningkat. Dan teknologi yang banyak dikenal masyarakat sekarang
adalah internet. Melihat penggunaan internet yang semakin luas menjadikan web
sebagai aplikasi yang mudah di akses oleh semua orang.
Garuda Muda Futsal Cibubur-Jakarta Timur merupakan tempat olahraga
futsal yang beralamat di Jl. Raya Pkp Gg. Kiwi, RT.2/RW.8, Klp. Dua Wetan, Kec.
Cibubur, Kota Jakarta Timur 13730. Dalam praktek transaksi pemesanan dan
penjadwalan masih menggunakan cara manual. Yaitu sistem transaksi pemesanan
masih datang secara langsung, belum ada sistem untuk mengetahui jadwal lapangan
yang sudah dipesan dan yang kosong secara update, serta pembuatan laporan belum
akurat karena sering terjadinya salah penghitungan yang akibatnya proses
pembuatan laporan jadi tidak tepat waktu, karena semua proses dilakukan secara
manual. Maka dari itu untuk membantu permasalahan itu semua perlu adanya
sebuah sistem komputer.
Rancang Bangun Aplikasi Pemesanan Dan Penjadwalan Lapangan Futsal,
akan membantu semua kebutuhan yang dikerjakan di Garuda Muda Futsal tersebut
yang akan berjalan lebih cepat, tepat dan akurat. Maka dirancanglah aplikasi
pemesanan dan penjadwalan secara online. Adapaun bahasa pemograman PHP,
Fremewrok Laravel dan databse MySQL. Dengan adanya sistem web secara online
ini nantinya akan memberikan laporan pemesanan dan penjadwalan secara akurat
untuk kepala pelanggan.
Kata kunci: PHP, MySQL, Framework Laravel, Online, Aplikasi Pemesanan dan
Penjadwalan
xi
DESIGN APPLICATIONS AND SCHEDULING ORDER
ONLINE FUTSAL FIELD IN GARUDA MUDA FUTSAL
CIBUBUR-JAKARTA TIMUR
By: Fitriyanto Dwi Prasetyo

1𝑠𝑡 Advisor: Dannie Febrianto, S.Kom., M.M.S.I
ABSTRACT
Rapid technological developments lead to increased use of information
technology. And the technology is widely known to the public today is the internet.
Seeing the increasingly widespread use of the internet makes the web as an
application that is easily accessed by everyone.
Garuda Muda Futsal Cibubur-Jakarta Timur hibiscus is a sports venue
located at Jl. Raya Pkp Gg. Kiwi, RT.2/RW.8, Klp. Dua Wetan, Kec. Cibubur, Kota
Jakarta Timur 13730. in practice the transaction ordering and scheduling still use
manual. The system of booking transactions still come directly, there is no system
to know the schedule of the field that has been ordered and empty in the update, as
well as making the report is not accurate because of the frequent occurrence of
wrong calculation and consequently the reporting process so it is not timely,
because all the process is done manual. Therefore to help the problems that all the
necessary existence of a computer system
Booking Application Design and Scheduling Futsal, will help all the
necessities are done in the Garuda Muda Futsal which will run faster, precise and
accurate. Then designed applications online booking and scheduling. As for the
programming language PHP, MYSQL Fremewrok laravel and databse. With the
system's online web will provide booking and scheduling report accurately to
customer's head.
Keywords: PHP, MySQL, Framework Laravel, Online, Ordering and Scheduling

Applications
xii
DAFTAR ISI
HALAMAN PENGESAHAN JUDUL ...........................................................i
HALAMAN PERSETUJUAN MENGIKUTI SIDANG ..................................ii
LEMBAR PERSETUJUAN GELAR..............................................................iii
SURAT PERNYATAAN KEASLIAN...........................................................iv
PERNYATAAN PERSETUJUAN PUBLIKASI ............................................v
LEMBAR ASISTENSI PEMBIMBING I.......................................................vi
LEMBAR ASISTENSI PEMBIMBING II .....................................................vii
MOTTO & PERSEMBAHAN .......................................................................viii
KATA PENGANTAR ...................................................................................ix
ABSTRAK....................................................................................................xi
ABSTRACT....................................................................................................xii
DAFTAR ISI.................................................................................................xiii
DAFTAR TABEL .........................................................................................xvii
DAFTAR GAMBAR .....................................................................................xviii
DAFTAR LAMPIRAN .................................................................................xxi
BAB I PENDAHULUAN .........................................................................1

1.1 Latar Belakang Masalah .................................................................1
1.2 Rumusan Masalah ..........................................................................2
1.3 Batasan Masalah ............................................................................2
1.4 Tujuan dan Manfaat Penelitian ........................................................2
1.5 Sistematika Penulisan .....................................................................3
BAB II TINJAUAN PUSTAKA.................................................................4

2.1 Tinjauan Terdahulu.........................................................................4
2.2 Definisi Sistem ...............................................................................12
2.2.1 Konsep Dasar Sistem ...............................................................13
2.2.2 Karakteristik Sistem.................................................................13
2.3.2 Klasifikasi Sistem ....................................................................15
xiii
2.3 Metode Waterfall ...........................................................................16
2.4 Aplikasi..........................................................................................18
2.5 Pemesanan Online ..........................................................................18
2.6 Penjadwalan ...................................................................................19
2.7 Futsal.............................................................................................19
2.8 Definisi Web Browser ....................................................................20
2.9 Definisi Website.............................................................................20
2.10 Definisi Bahasa Pemrograman Web ................................................20
2.11 HTML (Hyper Text Markup Language) .........................................21
2.12 CSS (Cascading Style Sheet) .........................................................22
2.13 PHP (PHP Hypertext Processor) ...................................................22
2.14 Definisi Framework........................................................................23
2.15 Definisi Laravel .............................................................................24
2.16 Definisi MYSQL............................................................................26
BAB III METODOLOGI PENELITIAN......................................................27

3.1 Requirement Analysis ....................................................................28
3.1.1 Metode Pengumpulan Data......................................................28
3.1.2 Ruang Lingkup Perencanaan ...................................................29
3.1.3 Sistem Yang Saat Ini Berjalan ..................................................30
3.1.4 Masalah Dari Sistem Yang Saat Ini Berjalan.............................30
3.1.5 Sistem Yang Diusulkan ............................................................31
3.2 Perancangan Sistem........................................................................32
3.2.1 Use Case Diagram ..................................................................32
3.2.2 Activity Diagram.....................................................................32
3.2.3 Sequence Diagram..................................................................32
3.3 Design...........................................................................................33
3.3.1 Design Database ....................................................................33
3.3.2 Design Interface .....................................................................33
3.4 Implementasi .................................................................................33
3.4.1 Coding ...................................................................................34
xiv
3.5 Testing ..........................................................................................34
3.36 Penulisan........................................................................................34
BAB IV ANALISA DAN PEMBAHASAN .................................................35

4.1 Analisa Kebutuhan Sistem ..............................................................35
4.1.1 Kebutuhan Fungsional..............................................................35
4.1.2 Kebutuhan Non Fungsional.......................................................36
4.2 Perancangan Perangkat Lunak ........................................................36
4.2.1 Use Case Diagram ..................................................................37
4.2.2 Activity Diagram.....................................................................37
4.2.3 Sequence Diagram..................................................................50
4.3 Design...........................................................................................57
4.3.1 Design Database ....................................................................57
4.3.2 Design Interface .....................................................................59
4.4 Implementasi .................................................................................64
4.4.1 Struktur Navigasi.....................................................................64
4.4.2 Front-End...............................................................................64
4.4.2.1 Menu Daftar Akun ............................................................65
4.4.2.2 Menu Login......................................................................65
4.4.2.3 Menu Home......................................................................66
4.4.2.4 Tampilan List Lapangan ....................................................66
4.4.2.5 Tampilan Jadwal Ketersediaan Lapangan...........................67
4.4.2.6 Tampilan Informasi Pemesan ............................................67
4.4.2.7 Tampilan Detail Pemesanan ..............................................68
4.4.2.8 Tampilan Konfirmasi Pembayaran.....................................68
4.4.2.9 Tampilan List Booking .....................................................69
4.4.2.10 Menu Tentang Kami .........................................................69
4.4.2.11 Menu Berita......................................................................70
4.4.2.12 Menu Kontak ....................................................................70
4.4.3 Back-End ...............................................................................71
4.4.3.1 Menu Login......................................................................71
xv
4.4.3.2 Menu Halaman Utama Admin............................................71
4.4.3.3 Menu User .......................................................................72
4.4.3.4 Menu Artikel.....................................................................73
4.4.3.5 Menu Setting Perusahaan ..................................................75
4.4.3.6 Menu Lapangan ................................................................76
4.4.3.7 Menu Booking .................................................................77
4.4.3.8 Menu Kas.........................................................................79
4.4.3.9 Menu Report ....................................................................81
4.5 Testing Program.............................................................................82
4.5.1 Remcana Pengujian..................................................................82
4.5.2 Kasus dan Hasil Pengujian .......................................................83
4.5.3 Kesimpulan Hasil Pengujian.....................................................89
BAB V PENUTUP ....................................................................................90

5.1 Kesimpulan ....................................................................................90
5.2 Saran .............................................................................................91
DAFTAR PUSTAKA....................................................................................92
LAMPIRAN .................................................................................................A-1
xvi
DAFTAR TABEL
Tabel 2.1 Tinjauan Terdahulu.........................................................................5
Tabel 3.1 Jadwal Pelaksanaan Penelitian Skripsi .............................................29
Tabel 4.1 Kebutuhan Fungsional.....................................................................35
Tabel 4.2 Rencana Pengujian..........................................................................83
Tabel 4.3 Pengujian Login.............................................................................83
Tabel 4.4 Pengujian Data User ......................................................................84
Tabel 4.5 Pengujian Setting Perusahaan .........................................................86
Tabel 4.6 Pengujian Data Lapangan ...............................................................87
Tabel 4.7 Pengujian Data Kas........................................................................88
Tabel 4.8 Tabel Pengujian Logout .................................................................89
xvii
DAFTAR GAMBAR
Gambar 2.1 Karakteristik Suatu Sistem .......................................................15
Gambar 2.2 Model Waterfall......................................................................17
Gambar 2.3 Model-View-Controller...........................................................26
Gambar 3.1 Metodologi Penelitian ..............................................................27
Gambar 3.2 Pemesanan Lapangan (Booking) Yang Saat Ini Berjalan............30
Gambar 3.3 Pemesanan Lapangan (Booking) Yang Diusulkan......................31
Gambar 4.1 Use Case Diagram Pemesanan Futsal Online ...........................37
Gambar 4.2 Activity Diagram 01 Login Aplikasi..........................................38
Gambar 4.3 Activity Diagram 02 Kelola Akun User....................................39
Gambar 4.4 Activity Diagram 02-1 Tambah Data User ...............................39
Gambar 4.5 Activity Diagram 02-2 Ubah Data User....................................40
Gambar 4.6 Activity Diagram 02-3 Hapus Data User ..................................40
Gambar 4.7 Activity Diagram 03 Pemesanan Online ...................................41
Gambar 4.8 Activity Diagram 04 Registrasi Pelanggan ................................42
Gambar 4.9 Activity Diagram 05 Melihat Jadwal Lapangan .........................42
Gambar 4.10 Activity Diagram 09 Kelola Lapangan ......................................43
Gambar 4.11 Activity Diagram 09-1 Tambah Lapangan ................................43
Gambar 4.12 Activity Diagram 09-2 Ubah Lapangan.....................................44
Gambar 4.13 Activity Diagram 09-3 Hapus Lapangan ...................................44
Gambar 4.14 Activity Diagram 10 Kelola Data Transaksi Kas .......................45
Gambar 4.15 Activity Diagram 10-01 Tambah Transaksi Kas........................45
Gambar 4.16 Activity Diagram 10-02 Edit Transaksi Kas..............................46
Gambar 4.17 Activity Diagram 10-03 Hapus Transaksi Kas ..........................46
Gambar 4.18 Activity Diagram 11 Kelola Data Transaksi Booking................47
Gambar 4.19 Activity Diagram 11-01 Melihat Detail Transaksi Booking .......47
Gambar 4.20 Activity Diagram 11-02 Hapus Kelola Transaksi Booking ........48
Gambar 4.21 Activity Diagram 12 Melihat Laporan ......................................49
Gambar 4.22 Activity Diagram 13 Approvment Transfer ..............................49
Gambar 4.23 Sequence Diagram 01 Login Aplikasi .......................................50
xviii
Gambar 4.24 Sequence Diagram 02 Kelola Akun..........................................50
Gambar 4.25 Sequence Diagram 02-01 Tambah Akun ..................................51
Gambar 4.26 Sequence Diagram 02-02 Edit Akun ........................................51
Gambar 4.27 Sequence Diagram 02-03 Hapus Akun .....................................51
Gambar 4.28 Sequence Diagram 03 Pemesanan Lapangan ............................52
Gambar 4.29 Sequence Diagram 04 Registrasi Pelanggan .............................52
Gambar 4.30 Sequence Diagram 09 Kelola Lapangan ...................................52
Gambar 4.31 Sequence Diagram 09-01 Tambah Lapangan ............................53
Gambar 4.32 Sequence Diagram 09-02 Edit Lapangan ..................................53
Gambar 4.33 Sequence Diagram 09-03 Hapus Lapangan...............................54
Gambar 4.34 Sequence Diagram 10 Transaksi Kas .......................................54
Gambar 4.35 Sequence Diagram 10-01 Tambah Transaksi Kas .....................54
Gambar 4.36 Sequence Diagram 10-02 Edit Transaksi Kas ...........................55
Gambar 4.37 Sequence Diagram 10-03 Hapus Transaksi Kas........................55
Gambar 4.38 Sequence Diagram 11 Data Transaksi Booking ........................55
Gambar 4.39 Sequence Diagram 11-01 Detail Data Transaksi Booking.........56
Gambar 4.40 Sequence Diagram 11-02 Hapus Data Transaksi Booking ........56
Gambar 4.41 Sequence Diagram 13 Approvment Transfer............................56
Gambar 4.42 Design Database CDM (Conceptual Data Model) ...................57
Gambar 4.43 Design Database PDM (Physical Data Model) ........................58
Gambar 4.44 Database MySQL ...................................................................58
Gambar 4.45 Relasi Database MySQL .........................................................59
Gambar 4.46 Design Interfase Login............................................................59
Gambar 4.47 Design Interface Data User .....................................................60
Gambar 4.48 Design Interface Tambah User ................................................60
Gambar 4.49 Design Interface Data Lapangan ..............................................61
Gambar 4.50 Design Interface Tambah Lapangan .........................................61
Gambar 4.51 Design Interface Data Transaksi Kas .......................................62
Gambar 4.52 Design Interface Tambah Transaksi Kas ..................................62
Gambar 4.53 Design Interface Setting Perusahaan ........................................63
Gambar 4.54 Design Interface Data Transaksi Booking ................................63
xix
Gambar 4.55 Struktur Navigasi Web.............................................................64
Gambar 4.56 Front-End Daftar/Register Akun Baru Member ........................65
Gambar 4.57 Front-End Registrasi Login Member........................................65
Gambar 4.58 Front-End Menu Home ...........................................................66
Gambar 4.59 Front-End List Lapangan .........................................................66
Gambar 4.60 Front-End Jadwal Ketersediaan Lapangan dan Booking ...........67
Gambar 4.61 Front-End Informasi Pemesan .................................................67
Gambar 4.62 Front-End Detail Pemesanan ...................................................68
Gambar 4.63 Front-End Konfirmasi Pembayaran..........................................68
Gambar 4.64 Front-End List Booking .........................................................69
Gambar 4.65 Front-End Menu Tentang Kami ...............................................69
Gambar 4.66 Front-End Menu Berita ...........................................................70
Gambar 4.67 Front-End Menu Kontak..........................................................70
Gambar 4.68 Back-End Menu Login ............................................................71
Gambar 4.69 Back-End Halaman Utama Admin ............................................71
Gambar 4.70 Back-End Halaman Data User .................................................72
Gambar 4.71 Back-End Form Tambah User .................................................73
Gambar 4.72 Back-End Halaman Data Artikel...............................................74
Gambar 4.73 Back-End Form Tambah Artikel...............................................74
Gambar 4.74 Back-End Halaman Kategori Artikel.........................................75
Gambar 4.75 Back-End Form Setting Perusahaan .........................................76
Gambar 4.76 Back-End Halaman Data Lapangan ..........................................76
Gambar 4.77 Back-End Form Tambah Lapangan ..........................................77
Gambar 4.78 Back-End Halaman Transaksi Booking ....................................78
Gambar 4.79 Back-End Halaman Detail Booking .........................................79
Gambar 4.80 Back-End Halaman Validasi Pembayaran.................................79
Gambar 4.81 Back-End Halaman Data Kas...................................................80
Gambar 4.82 Back-End Form Tambah Transaksi Kas ...................................80
Gambar 4.83 Back-End Halaman Report Pembayaran ...................................81
Gambar 4.84 Back-End Halaman Report Laba Rugi ......................................82
xx
DAFTAR LAMPIRAN
LAMPIRAN A
Lampiran A-1 Surat Penelitian................................................................. A-1
Lampiran A-2 Surat Hasil Wawancara Awal ........................................... A-2
Lampiran A-3 Hasil Observasi - Kuitansi Manual.................................... A-3
Lampiran A-4 Hasil Observasi - Daftar Jadwal Manual............................ A-4
Lampiran A-5 Hasil Observasi - Pembukuan Kas Manual ........................ A-5
Lampiran A-6 Hasil Observasi - Lingkungan Lapangan Futsal................. A-6
LAMPIRAN B
Lampiran B-1 Form Wawancara Testing ................................................ B-1
Lampiran B-2 Form Bukti Pelaksanaan Testing ...................................... B-2
LAMPIRAN C
Lampiran C-1 Coding Form Login Back-End ......................................... C-1
Lampiran C-2 Coding Footer Back-End ................................................. C-2
Lampiran C-3 Coding Header Back-End ................................................ C-3
Lampiran C-4 Coding Sidebar Back-End................................................ C-4
Lampiran C-5 Coding Template Back-End ............................................. C-5
Lampiran C-6 Coding Topnav Back-End ................................................ C-6
Lampiran C-7 Coding Error 404 ............................................................ C-7
Lampiran C-8 Coding Error 503 ............................................................ C-8
Lampiran C-9 Coding About Front-End ................................................. C-9
Lampiran C-10 Coding Form Contact Front-End ..................................... C-10
Lampiran C-11 Coding Detail Front-End ................................................. C-11
Lampiran C-12 Coding Footer Front-End ................................................ C-12
Lampiran C-13 Coding Header Front-End ............................................... C-13
Lampiran C-14 Coding Form Home Front-End ........................................ C-14
Lampiran C-15 Coding Form Login Front-End ........................................ C-15
Lampiran C-16 Coding Form News Front-End ......................................... C-16
xxi
Lampiran C-17 Coding Form Order Front-End ........................................ C-17
Lampiran C-18 Coding Form Order_Detail Front-End ............................ C-18
Lampiran C-19 Coding Form Register Front-End..................................... C-19
Lampiran C-20 Coding Template Front-End ............................................ C-20
xxii
BAB I
PENDAHULUAN
1.1 Latar Belakang

Perkembangan teknologi yang pesat menyebabkan penggunaan teknologi
informasi meningkat, dan teknologi yang banyak dikenal masarakat sekarang
adalah internet. Hal tersebut dapat dilihat dari banyaknya penggunaan teknologi
internet dikalangan pengusaha mauapun masyarakat. Dengan internet memudahkan
seseorang dalam pencarian informasi yang akurat, cepat dan mudah. Internet dapat
diakses 24 jam oleh siapapun, dimanapun, dan kapan saja. Melihat penggunaan
internet yang semakin luas menjadikan web sebagai aplikasi yang mudah di akses
oleh semua orang.
Teknologi internet digunakan sebagai alat dalam pembuatan aplikasi sistem
penjadwalan dan pemesanan secara online yang biasa di akses di manapun dan
kapanpun. kendala yang dihadapi bagi penggemar futsal saat ini adalah tidak
mengetahuinya jadwal secara update, rincian harga perjam, dan masih melakukan
pertemuan langsung pada pengelola yang menyita waktu. Sistem ini diharapkan
dapat menggantikan proses bisnis di tempat sewa lapangan futsal pada umumnya
masih mengharuskan pelanggan untuk datang dalam melakukan penyewaan dan
mengatur jadwal penyewaan yang diinginkan. Serta dalam melakukan pencatatan
transaksi penyewaan, pengelolaan transaksi kas dan infomasi laba/rugi masih
belum terkomputerisasi. Hal ini juga dapat menimbulkan kesalahan dalam
pencatatan dan kurang efisien dalam mengetahui informasi laba/rugi perbulannya.
Untuk mengatasi masalah tersebut, maka perlu dibangun sebuah aplikasi
penyewaan lapangan futsal untuk membantu petugas dan penyewa dalam
melakukan penyewaan lapangan futsal dan pengelolaan transaksi. Oleh karena itu,
proyek akhir yang berjudul “Rancang Bangun Aplikasi Pemesanan Dan
Penjadwalan Lapangan Futsal Online Di Garuda Muda Futsal Cibubur
Jakarta Timur” ini diharapkan dapat membantu petugas dalam mengelola data
transaksi dan dapat membantu pelanggan dalam penyewaan lapangan futsal.
1
Aplikasi ini akan dikembangkan sebagai aplikasi website dengan menggunakan
bahasa pemrograman PHP, serta MySQL sebagai Database.
1.2 Rumusan Masalah

Berdasarkan latar belakang diatas yang menjadi permasalahan yang akan di
bahas pada skipsi ini adalah:
1. Mengapa dibangun sistem berbasis web untuk pemesanan dan jadwal online
di Garuda Muda Futsal?
2. Bagaimana mengelola rekap data transaksi secara terkomputerisasi?
3. Bagaimana membangun sistem dapat menampilkan laporan transaksi
keuangan secara cepat?
4. Bagaimana membangun sistem untuk pengelolaan data pelanggan/member
secara otomatis?
1.3 Batasan Masalah

Batasan masalah dalam skripsi ini adalah:
1. Sistem dibuat berbasis web yang menampilkan informasi pemesanan dan
penjadwalan online di Garuda Muda Futsal Cibubur-Jakarta Timur.
2. Sistem dirancang untuk mengelola informasi laporan transaksi, pembayaran
dan laba/rugi di Garuda Muda Futsal Cibubur-Jakarta Timur.
3. Sistem dirancang untuk mengelola data user, member dan non-member.
4. Sistem dibuat menggunakan bahasa pemograman PHP (Hypertext
Processor) dan database MySQL.
1.4 Tujuan dan Manfaat Penelitian

Adapun dari tujuan dan manfaat penulisan penelitian ini adalah:
1. Aplikasi berbasis web yang mempermudah dalam melayani pemesan online
dan informasi penjadwalan penggunaan lapangan futsal di Garuda Muda
Futsal.
2. Mempermudah pelanggan dalam mengetahui informasi jadwal dan
pemesanan secara online.
2
3. Mempermudah pengelola dalam memberikan analisa laporan keuangan
secara cepat dan akurat.
1.5 Sistematika Penulisan

Dalam penulisan ini penulis membuat suatu sistematika yang bertujuan
untuk menggambarkan secara ringkas bab-bab yang mencakup hal-hal sebagai
berikut:
BAB I PENDAHULUAN
Bab pendahuluan ini berisi latar belakang masalah, perumusan masalah,
batasan masalah, tujuan dan manfaat dari penulisan serta sistematika
penulisan.
BAB II TINJAUAN PUSTAKA

Bab ini menjelaskan tentang tinjauan terdahulu dan teori-teori. Tinjauan
terdahulu dan teori tersebut yang berkaitan dengan permasalahan dari judul
yang di angkat dalam penelitian ini.
BAB III METODOLOGI PENELITIAN

Bab ini menjelaskan tentang serangkaian tahapan/langkah yang logis dan
terstruktur untuk menyelesaikan penelitian dari awal hingga hasil yang di
dapatkan. Serangkaian tahapan/langkah tersebut juga akan di gambarkan
dalam bentuk chart untuk mempermudah proses penelitian.
BAB IV ANALISIS DAN PEMBAHASAN

Bab ini dilakukan pembahasan hasil analisa dari penelitian yang telah di
rancang pada bab sebelumnya sesuai kondisi lapangan.
BAB V KESIMPULAN DAN SARAN

Bab ini berisikan kesimpulan yang didapat, serta di tuangkan saran untuk
pengembangan sistem di masa depan.
3
BAB II
TINJAUAN PUSTAKA
Dalam pengerjaan penelitian ini, penulis menggunakan referensi dari

penelitian terdahulu serta dasar-dasar teori penunjang pembuatan rancang bangun
aplikasi pemesanan dan penjadwalan lapangan futsal online di Garuda Muda Futsal
Cibubur-Jakarta Timur
2.1 Tinjauan Terdahulu

Dalam melakukan penelitian ini, penulis menggunakan acuan pada
penelitian yang telah ada sebelumnya. Hal ini dimaksudkan untuk mengembangkan
sistem dan menyesuaikan dengan studi kasus yang akan dilakukan. Terdapat 10
penelitian sebelumnya yang telah dilakukan guna mencari perbandingan dan
referensi bagi peneliti. yang akan di jelaskan pada Tabel 2.1
4
Tabel 2.1 Tabel Tinjauan Terdahulu
No Judul Penelitian Kesimpulan Penelitian Metode Penelitian Perbedaan Penelitian
Dihasilkan suatu sistem web online

1 Darma, Mahasiswa Universitas dengan web responsif yang diharapkan Metode yang dipakai Perbedaan dari penelitian ini
Bina Darma. "Pemesanan Online dapat meningkatkan aktivitas pemesanan adalah SDLC (System adalah aplikasi yang
Jadwal Lapangan Futsal Pada jadwal lapangan, serta dukungan web
Orbit Futsal Soccer responsif yang mampu menampilkan Development Life dibangun menggunakan
Menggunakan Teknik Responsif tampilan layout web sesuai dengan Cycle). teknik responsife web
Web Design." besaran layar di masing-masing
perangkat, baik mobile, tablet, maupun desain.
desktop sehingga dapat meningkatkan
pelayanan keyamanan saat mengakses
web tersebut.
5
Tabel 2.1 Tinjauan Terdahulu

Aplikasi berbasis mobile yang dibangun
2 Qadhafi, Muammar, Anjik dengan menggunakan teknologi J2ME Metode yang dipakai Perbedaan dari
Sukmaaji, and Rangsang dapat memudahkan pelanggan dalam penelitian ini
Purnama. "Rancang Bangun melakukan pemesanan makanan secara sistem berorientasi adalah Aplikasi
Aplikasi Pemesanan Makanan online, serta dapat meminimalis ir yang dibangun
Online Pada Restoran Cepat Saji penggunaan pulsa telepon. objek menggunakan
Berbasis Mobile Application berbasis mobile
(Studi Kasus Chicken Mania
Cabang Rungkut)."Jurnal Sistem
Informasi dan Komputerisasi
Akuntansi (JSIKA) 1.2 (2012).
1. Penyewa dapat mengetahui informasi

3 Rahma, A. N. Aplikasi jadwal lapangan yang available tanpa Metode yang dipakai Perbedaan dari penelitian ini
Penyewaan Lapangan Futsal datang langsung ke tempat futsal dengan adalah Rekayasa adalah aplikasi yang
Berbasis WEB dan SMS fitur cari jadwal Perangkat Lunak dibangun menggunakan
Gateway (2012). 2. Penyewa dapat melakukan booking (Terstruktur Dan sistem pemesanan sms
jadwal karena di aplikasi ini terdapat fitur Berorientasi Objek) gateway
SMS Gateway untuk booking jadwal
lapangan futsal.
6

1. Sistem penyewaan yang dilakukan Metode yang dipakai
4 Syakur, M. L. (2013). Sistem saat ini masih dilakukan dengan adalah Analisis dan Perbedaan dari penelitian ini
Informasi Penyewaan Lapangan cara manual. Desain Sistem adalah aplikasi yang
Futsal Pada Grindulu Futsal 2. Aplikasi yang dibangun sangat Informasi Pendekatan dibangun menggunakan
Pacitan. IJNS-Indonesian membantu petugas untuk Terstruktur Teori dan sistem pemesanan offline
Journal on Networking and melakukan proses pelayanan Praktek Bisnis atau aplikasi desktop
Security,4(3). terhadap konsumen dengan efisien
Perangkat lunak Sistem Informasi

5. Irawan, Rio. "Sistem Informasi Penyewaan Lapangan Futsal telah Metode yang dipakai Perbedaan dari penelitian ini
Penyewaan Lapangan Futsal." berhasil dibangun. Perangkat lunak ini dalam adalah adalah aplikasi yang
(2011). dapat menjadi sebuah sistem yang dapat Pengembangan dibangun menggunakan
digunakan untuk mengelola tempat Perangkat Lunak dan sistem pemesanan offline
penyewaan lapangan futsal di Analisis PIECES atau aplikasi desktop
Genic Futsal.
Sistem yang dibuat dapat dipakai sebagai
6. Latif, Agustan. "Aplikasi media pendaftaran dan mendapatkan Metode yang dipakai Perbedaan dari penelitian ini
Penjadwalan Lapangan Futsal jadwal secara otomatis yang diatur sesuai dalam adalah studi adalah aplikasi yang
Menggunakan Algoritma Ant urutan masuk dengan penerapan literatur, observasi, dibangun menggunakan
Colony Berbasis Web." algoritma ant colony yang diajukan wawancara, waterfall sistem pemesanan offline
MUSTEK ANIM HA 4.1 (2015): dengan persetujuan admin dan para tim method menggunakan sms gateway
61-73. yang telah
7

mendaftar dapat menerima jadwal
lapangan melalui sms dari sistem, sistem
menggunakan sms gateway untuk
pengiriman pesan persetujuan jadwal
lapangan futsal.
1. Aplikasi dapat membantu pelanggan
7. Masuara, Rivaldi, Rizal Sengkey, untuk melakukan pembelian tiket bioskop Metode yang dipakai Perbedaan dari penelitian ini
and Virginia Tulenan. "Rancang Studio 21 Manado melalui berbagai adalah Metodologi adalah Aplikasi yang
Bangun e-Ticketing Bioskop macam platform secara online Agile Unified Process dibangun studi kasusnya
Studio 21 Manado Berbasis 2. Aplikasi ini dapat membantu pelanggan (AUP) pemesan tiket bioskop
Multiplatform." Jurnal Teknik untuk melihat informasi ketersediaan tiket
Elektro Dan Komputer Unsrat dan posisi tempat duduk yang tersedia
4.2 (2015): 41-55.
8. Mukti, Surya. "Rancang Bangun Sistem yang dibangun dapat digunakan Metode adalah Perbedaan dari penelitian ini
Aplikasi Rental Dan E-Ticketing masyarakat untuk membeli tiket atau Rekayasa Perangkat adalah aplikasi yang
Taksi Di Wilayah Kalimantan menyewa taksi tanpa harus pergi ke Lunak (Terstruktur dibangun studi kasusnya
Barat Berbasis Web." Jurnal tempat perusahaan taksi berada karena Dan Berorientasi pemesan tiket dan
Sistem dan Teknologi Informasi sistem yang buat sudah terkomputerisasi Objek) penyewaan taksi
(JustIN) 1.1 (2015).
8

Sistem yang berjalan selama ini masih
9. Rachmatullah, Robby. manual, belum menggunakan komputer Metode yang dipakai Perbedaan dari penelitian ini
"Perancangan Sistem Pemesanan dan internet sebagai bagian dari sarana adalah Metode adalah aplikasi yang
Tiket Bus Online Berbasis promosi dan pelayanan kepada PIECES, wawancara, dibangun studi kasusnya
Web." IJNS-Indonesian Journal pelanggannya. Dengan adanya sistem observasi, studi pemesan tiket dan
on Networking and Security 4.1 yang baru ini, diharapkan dapat literatur penyewaan bus
(2014). memudahkan perusahaan dalam hal
promosi dan memberikan pelayanan yang
lebih kepada pelanggan dalam hal
pemesanan tiket dan informasi yang
dibutuhkan seperti trayek, harga serta
fasilitas-fasilitas lain yang didapat oleh
pelanggan.
Aplikasi ini dapat memberi informasi
10. Sari, Deffi Rosdiana. secara detail dan akurat mengenai mobil- Metode yang dipakai Perbedaan dari penelitian ini
"Membangun Aplikasi Sistem mobil yang disewakan Rental Daras para adalah waterfall adalah aplikasi yang
Pemesanan Dan Pembayaran calon penyewa secara online, sehingga dibangun studi kasusnya
Sewa Mobil Online Berbasis perusahaan terbantu dalam pemesan tiket dan
Web (Studi Kasus Di Rental mempromosikan mobil dan memperluas penyewaan bus
Daras Corporation)." Bandung: jaringan dengan efektif dan efisien.
Universitas Komputer Indonesia
(2011).
0
9
Pada penelitian yang berjudul “Pemesanan Online Jadwal Lapangan Futsal
Pada Orbit Futsal Soccer Menggunakan Teknik Responsive Web Design“ (Darma,
Mahasiswa Universitas Bina, and Dosen Universitas Bina Darma) menjelaskan
bagaimana membangun aplikasi web online dengan web responsive membantu
dalam proses meningkatkan pelayanan kenyamanan saat mengakses web. Metode
yang dipakai peneliti tersebut menggunakan SDLC (System Development Life
Cycle). Persamaan dalam penelitian ini adalah membangun aplikasi web online.
Pada penelitian tahun (2012) yang berjudul "Rancang Bangun Aplikasi
Pemesanan Makanan Online Pada Restoran Cepat Saji Berbasis Mobile Application
(Studi Kasus Chicken Mania Cabang Rungkut)."(Qadhafi, Muammar, Anjik
Sukmaaji, and Rangsang Purnama) menjelaskan bagaimana membangun aplikasi
mobile yang dibangun menggunakan teknologi J2ME yang membantu dalam proses
pemesanan secara online melalui via telepon yang dapat meminimalisir penggunaan
pulsa telepon.
Pada penelitiaan yang dipaparkan pada tahun 2012 dari (Rahma, A. N,2012)
yang berjudul “Aplikasi Penyewaan Lapangan Futsal Berbasis WEB dan SMS
Gateway” pada penelitian tersebut bertujuan untuk memudahkan dalam penyewaan
booking online dan penjadwalan lapangan futsal. Persamaan dalam aplikasi ini
adalah aplikasi tersebut dapat diakses melalui web.
Selanjutnya Pada penelitiaan yang dipaparkan pada tahun 2013 dari
(Syakur, M. L,2013) yang berjudul “Aplikasi Penyewaan Lapangan Futsal Berbasis
WEB dan SMS Gateway” pada penelitian tersebut bertujuan untuk membantu
petugas melakukan proses pelayanan terhadap pelanggan secara efisien. Persamaan
dalam aplikasi ini adalah aplikasi tersebut dapat diakses melalui web. Metode yang
dipakai adalah Analisis dan Desain Sistem Informasi Pendekatan Terstruktur Teori
dan Praktek Bisnis.
Kemudian Pada penelitiaan yang dipaparkan oleh (Irawan, Rio ,2011) pada
tahun 2011 yang berjudul “Sistem Informasi Penyewaan Lapangan Futsal” pada
penelitian tersebut, peneliti membangun perangkat lunak sisten informasi
penyewaan lapangan futsal, yang digunakan untuk membantu petugas dalam
10
mengolah tempat penyewaan lapangan futsal. Metode yang dipakai adalah Metode
adalah Pengembangan Perangkat Lunak dan Analisis PIECES.
Pada penelitiaan yang dipaparkan pada tahun 2015 oleh (Latif,
Agustan,2011) yang berjudul “Aplikasi Penjadwalan Lapangan Futsal
Menggunakan Algoritma Ant Colony Berbasis Web” memaparkan bahawa sistem
yang dibuat dapat dipakai sebagai media pendaftaran tim dan tim mendapatkan
jadwal secara otomatis yang telah diatur sesuai urutan masuk dengan penerapan
algoritma ant colony. Studi Kasus penelitian di Lapangan Futsal Universitas
Musamus Merauke, sistem yang akan di terapkan adalah berbasis web. Metode
yang di gunakan adalah Waterfall Methode.
Pada penelitiaan yang dipaparkan pada tahun yang sama, tahun 2015 oleh
(Masuara, Rivaldi, Rizal Sengkey, and Virginia Tulenan,2015) yang berjudul
“Rancang Bangun e-Ticketing Bioskop Studio 21 Manado Berbasis Multiplatf orm”
memaparkan bahawa sistem yang dibuat dapat membantu pelanggan untuk
melakukan pembelian tiket bisokop studio 21 manado dari beerbagai macam
platform secara online dan Aplikasi ini dapat membantu pelanggan untuk melihat
informasi ketersediaan tiket dan posisi tempat duduk yang tersedia. Persamaan
dalam penelitian ini adalah pemesanan secara online dan berbasis web. Metode
yang dipakai adalah Metodologi Agile Unified Process (AUP)
Dalam perspektif yang berbeda, Mukti, Surya (2015) dalam merancang
aplikasi rental dan e-tiketing taksi berbasis web di wilayah kalimantan. Berdasarkan
hasil penelitian sistem yang dibangun dapat digunakan masarakat untuk membeli
tiket atau menyewa taksi tanpa harus pergi ke tempat perusahaan taksi berada
karena sistem yang buat sudah terkomputerisasi. Artinya, sistem yang dibuat adalah
secara online yang biasa di akses oleh masarakat luas. Metode yang dipakai adalah
Rekayasa Perangkat Lunak (Terstruktur Dan Berorientasi Objek).
11
Pada penelitiaan yang dipaparkan pada tahun 2014 oleh
(Rachmatullah,Robby,2014) yang berjudul “Perancangan Sistem Pemesanan Tiket
Bus Online Berbasis Web” memaparkan bahawa sistem yang dibuat dapat
membantu diharapkan dapat memudahkan perusahaan dalam hal promosi dan
memberikan pelayanan yang lebih kepada pelanggan dalam hal pemesanan tiket
dan informasi yang dibutuhkan seperti trayek, harga serta fasilitas-fasilitas lain
yang didapat oleh pelanggan. Persamaan dalam penelitian ini adalah pemesanan
secara online dan berbasis web. Metode yang dipakai adalah Metode PIECES,
wawancara, observasi, studi literature.
Selanjutnya Pada penelitiaan yang dipaparkan pada tahun 2011 oleh (Sari,
Deffi Rosdiana,2011) yang berjudul “Membangun Aplikasi Sistem Pemesanan Dan
Pembayaran Sewa Mobil Online Berbasis Web (Studi Kasus Di Rental Daras
Corporation)” memaparkan bahawa Aplikasi ini dapat memberi informasi secara
detail dan akurat mengenai mobil-mobil yang disewakan Rental Daras para calon
penyewa secara online, sehingga perusahaan terbantu dalam mempromosikan
mobil dan memperluas jaringan dengan efektif dan efisien. Persamaan dalam
penelitian ini adalah pemesanan secara online dan berbasis web. Metode yang
digunakan adalah Waterfall.
2.2 Definisi Sistem

Suatu sistem sangatlah dibutuhkan dalam suatu perusahaan atau instansi
pemerintahan, karena sistem sangatlah menunjang terhadap kinerja perusahaan atau
instansi pemerintah, baik yang berskala kecil maupun besar. Ada berbagai pendapat
yang mendefinisikan pengertian system adalah sebagai berikut:
Jogiyanto (2005:1) sistem adalah suatu jaringan kerja dari prosedur-
prosedur yang saling berhubungan, berkumpul bersama-sama untuk melakukan
suatu kegiatan atau untuk menyelesaikan suatu sasaran yang tertentu.
Andi Kristanto (2007:1) Suatu sistem adalah jaringan kerja dari prosedur-
prosedur yang saling berhubungan, berkumpul bersama-sama untuk melakukan
suatu kegiatan atau untuk menyelesaikan suatu sasaran tertentu.
12
Basis Data, Fathansyah (2002:9). Sistem adalah sebuah tatanan
(keterpaduan) yang terdiri atas sejumlah komponen fungsional (dengan satuan
fungsi/tugas khusus) yang saling berhubungan dan secara bersama-sama bertujuan
untuk memenuhi suatu proses/pekerjaan tertentu.
Andri Kristanto (2007:1). Sistem adalah kumpulan dari elemen-elemen
yang berinteraksi untuk mencapai suatu tujuan tertentu.
2.2.1 Konsep Dasar Sistem

Terdapat dua kelompok pendekatan dalam mendefinisikan sistem yaitu,
yang menekan pada prosedurnya dan yang menekankan pada komponen atau
elemennya.
Pendekatan sistem yang lebih menekankan pada prosedurnya
mendefinisikan sistem bahwa, “suatu sistem adalah suatu jaringan kerja dari
prosedur-prosedur yang saling berhubungan, berkumpul bersama-sama untuk
melakukan suatu kegiatan atau menyelesaikan suatu sasaran tertentu”. (Jerry Fitz
Gearld, Ardra F. Fitz Gearld, Warren D.Stalling,Jr,.:1981:5)
Pendekatan sistem yang lebih menekankan pada elemen atau komponennya
mendefinisikan sistem bahwa, “sistem adalah kumpulan elemen-elemen yang
berinteraksi untuk mencapai suatu tujuan tertentu”. (Jogiyanto,.2005:1)
2.2.2 Karakteristik Sistem

Sistem Menurut Jogiyanto (2005:1) sistem mempunyai karakteristik
sebagai berikut:
1. Komponen-komponen (components)
Suatu sistem tidak berada dalam lingkungan yang kosong, tetapi sebuah
sistem berada dan berfungsi di dalam lingkungan yang berisi sistem lainnya. Suatu
sistem terdiri dari sejumlah komponen yang saling berinteraksi, bekerja sama
membentuk satu kesatuan. Apabila suatu sistem merupakan salah satu dari
komponen sistem lain yang lebih besar, maka akan disebut dengan sub-sistem,
sedangkan sistem yang lebih besar tersebut adalah lingkungannya.
13
2. Batas System (boundary)
Batas sistem merupakan pembatas atau pemisah antara suatu sistem dengan
sistem yang lainnya atau dengan lingkungan luarnya.
3. Lingkungan Luar System (envirounments)
Lingkungan luar adalah apa pun di luar batas dari sistem yang dapat
mempengaruhi operasi sistem, baik pengaruh yang menguntungkan ataupun yang
merugikan. Pengaruh yang menguntungkan ini tentunya harus dijaga sehingga akan
mendukung kelangsungan operasi sebuah sistem. Sedangkan lingkungan yang
merugikan harus ditahan dan dikendalikan agar tidak mengganggu kelangsungan
sebuah sistem.
4. Penghubung (interface)
Penghubung (interface) merupakan media penghubung antara satu
subsistem dengan subsistem yang lainnya. Penghubung inilah yang akan menjadi
media yang digunakan data dari masukan (input) hingga keluaran (output). Dengan
adanya penghubung, suatu subsistem dapat berinteraksi dan berintegrasi dengan
subsistem yang lain membentuk satu kesatuan.
5. Masukan (input)
Masukan atau input merupakan energi yang dimasukan ke dalam sistem.
Masukan dapat berupa masukan perawatan (maintenance input), yaitu bahan yang
dimasukkan agar sistem tersebut dapat beroperasi dan masukan sinyal (signal
input), yaitu masukan yang diproses untuk mendapatkan keluaran.
6. Pengolahan (process)
Pengolahan (process) merupakan bagian yang melakukan perubahan dari
masukan untuk menjadi keluaran yang diinginkan.
7. Keluaran (output)
Keluaran (output) merupakan hasil dari pemrosesan. Keluaran dapat berupa
informasi sebagai masukan pada sistem lain atau hanya sebagai sisa pembuangan.
8. Sasaran (objectives)
Suatu sistem pasti memiliki sasaran (objective) atau tujuan (goal). Apabila
sistem tidak mempunyai sasaran, maka operasi sistem tidak akan ada gunanya.
14
9. Tujuan (goal).
Bertujuan untuk mengarahkan suatu sistem. Tanpa adanya tujuan, sistem
menjadi tidak terarah dan terkendali.
Gambar 2.1 Karakteristik Suatu Sistem
2.2.3 Klasifikasi Sistem

Menurut Agus Mulyanto (2009:8), “Sistem dapat di klasifikasikan berbagai
sudut pandang, diantaranya adalah sebagai berikut:
1. Sistem abstrak (abstract system) dan sistem fisik (physical system).

Sistem abstrak (abstract system) adalah sistem yang berupa pemikiran atau
gagasan yang tidak tampak secara fisik. Sedangkan sistem fisik
(physical system) adalah sistem yang ada secara fisik dan dapat dilihat dengan mata.
2. Sistem alamiah (natural system) dan sistem buatan manusia
(human made system).
Sistem alamiah adalah sistem yang keberadaannya terjadi karena proses
alam, bukan buatan manusia. Sedangkan, sistem buatan manusia (human made
systems) adalah sistem yang terjadi melalui rancangan atau campur tangan manusia.
3. Sistem tertentu (deterministic system) dan sistem tak tentu
(probabilistic system)
Sistem tertentu (deterministic systems) yaitu sistem yang operasinya dapat
diprediksi secara cepat dan interaksi diantara bagian-bagiannya dapat dideteksi
15
dengan pasti. Sedangkan, sistem tidak tentu (probabilistic systems) yaitu, sistem
yang hasilnya tidak dapat diprediksi karena mengandung unsur probabilitas.
4. Sistem tertutup (closed system) dan sistem terbuka (open system).
Sistem tertutup (closed systems) adalah sistem yang tidak berhubungan
dengan lingkungan di luar sistem. Sistem ini tidak berinteraksi dan tidak
dipengaruhi oleh lingkungan luar. Sistem ini juga bekerja secara otomatis tanpa
adanya campur tangan dari pihak luar. Dalam kenyataannya tidak ada sistem yang
benar-benar tertutup, melainkan sistem yang relatif tertutup (relative closed
system). Sistem relatif tertutup biasanya mempunyai masukan dan keluaran yang
tertentu serta tidak terpengaruh oleh keadaan di luar sistem. Sedangkan, sistem
terbuka (open system) adalah sistem yang berhubungan dengan lingkungan luar dan
dapat terpengaruh dengan keadaan lingkungan luar. Sistem terbuka menerima input
dari sub-sistem lain dan menghasilkan output untuk subsistem lain. Sistem ini
mampu beradaptasi dan memiliki sistem pengendalian yang baik karena lingkungan
luar yang bersifat merugikan dapat mengganggu jalannya proses di dalam sistem.
2.3 Metode Waterfall

Metodologi pengembangan sistem adalah metode-metode, prosedur-
prosedur, konsep-konsep pekerjaan, aturan-aturan yang akan digunakan untuk
mengembangkan suatu sistem informasi (Jogiyanto 2005, h59).
Menurut (Rosa 2011, h26) Metodologi yang penulis gunakan adalah
metodologi Waterfall, Metode air terjun atau Waterfall menyediakan pendekatan
alur hidup perangkat lunak secara skuensial atau terurut dimulai dari analisis,
desain, pengodean, pengujian, dan tahap pendukung (support). Berikut ini adalah
tahapan dari model Waterfall:
1. Survei Sistem
Pada tahap ini akan dilakukan beberapa kegiatan yang meliputi
pendefinisian dari permasalahan yang ada untuk menentukan ruang lingkup,
menentukan metodologi yang dipergunakan, serta membuat jadwal kegiatan
dengan menggunakan beberapa teknik pengumpulan data seperti wawancara dan
observasi.
16
2. Analisa Sistem
Pada tahap ini dilakukan analisis terhadap sistem yang telah ada dengan
mengidentifikasi permasalahan, penentuan tujuan dari perbaikan sebuah sistem dan
mengidentifikasi kebutuhan pengguna sistem.
3. Pembuatan Kode Program
Desain harus ditranslasikan ke dalam program perangkat lunak. Hasil dari
tahap ini adalah program komputer sesuai dengan desain yang telah dibuat pada
tahap desain.
4. Pengujian
Pengujian fokus pada perangkat lunak secara segi logika dan fungsional
dan memastikan bahwa semua bagian sudah diuji. Hal ini dilakukan untuk
meminimalisir kesalahan (error) dan memastikan keluaran yang dihasilkan sesuai
dengan yang diinginkan.
5. Pendukung (support) atau Pemeliharaan (maintenance)
Tidak menutup kemungkinan sebuah perangkat lunak mengalami
perubahan ketika sudah dikirimkan ke user. Perubahan bisa terjadi karena adanya
kesalahan yang muncul dan tidak terdeteksi saat pengujian atau perangkat lunak
harus beradaptasi dengan lingkungan baru. Tahap pendukung atau pemeliharaan
dapat mengulangi proses pengembangan mulai dari analisis spesifikasi untuk
perubahan perangkat lunak yang sudah ada, melainkan untuk tidak untuk membuat
perangkat lunak baru.
Tahapan-tahapan pada model Waterfall adalah dibawah ini:
Gambar 2.2 Model Waterfall
17
2.4 Aplikasi
Aplikasi berasal dari kata application yang artinya penerapan, lamaran,
penggunaan. Secara istilah aplikasi adalah program siap pakai yang dibuat untuk
melaksanakan suatu fungsi bagi pengguna atau aplikasi yang lain dan dapat
digunakan oleh sasaran yang dituju.
Pengertian aplikasi menurut para ahli adalah sebagai berikut:
Menurut Jogiyanto (1999:12) adalah penggunaan dalam suatu komputer,
instruksi (instruction) atau pernyataan (statement) yang disusun sedemikian rupa
sehingga komputer dapat memproses input menjadi output.
Menurut Kamus Kamus Besar Bahasa Indonesia (1998:52) adalah
penerapan dari rancang sistem untuk mengolah data yang menggunakan aturan atau
ketentuan bahasa pemrograman tertentu. Aplikasi adalah suatu program komputer
yang dibuat untuk mengerjakan dan melaksanakan tugas khusus dari pengguna.
Menurut Rachmad Hakim S, adalah perangkat lunak yang digunakan untuk
tujuan tertentu, seperti mengolah dokumen, mengatur windows, permainan (game),
dan lain sebagainya.
Menurut Harip Santoso, adalah suatu kelompok file (form, class, report)
yang bertujuan untuk melakukan aktivitas tertentu yang saling terkait, misalnya
aplikasi payroll, aplikasi fixed asset.
2.5 Pemesanan Online

Pemesanan dapat didefinisikan secara luas sebagai tindakan berbagai
perusahaan untuk merencanakan dan melaksanakan rancangan produk, penentuan
harga, distribusi, dan promosi (Jeff Madura, 2001).
Online adalah menggunakan fasilitas jaringan internet untuk melakukan
upaya penjualan atas produk kita (Dedik Kurniawan)
Menurut teori diatas dapat disimpulkan pemesanan online adalah suatu
proses transaksi dan penyediaan tempat menggunakan fasilitas jaringan internet
sekaligus sebagai proses transaksi penghemat waktu yang nyata.
18
2.6 Penjadwalan
Pengertian jadwal menurut kamus besar Bahasa Indonesia adalah
pembagian waktu berdasarkan rencana pengaturan urutan kerja, daftar atau tabel
kegiatan atau rencana kegiatan dengan pembagian waktu pelaksanaan yang
terperinci. Sedangakan, penjadwalan adalah cara serta proses pembuatan
menjadwalkan atau memasukan kedalam jadwal.
Menurut Chambers (1992:22) menyatakan, jadwal didefinisikan sebagai
sesuatu yang menjalaskan dimana dan kapan orang-orang dan sumber daya berada
pada suatu waktu. Berdasarkan kamus besar Bahasa Indonesia, jadwal merupakan
pembagian waktu berdasarkan rencana pengaturan urutan kerja. Jadwal juga
didefinisikan sebagai daftar atau tabel kegiatan atau rencana kegiatan dengan
pembagian waktu pelaksanaan yang terperinci.
2.7 Futsal
Sejarah olahraga futsal menurut FIFA, mulai pada tahun 1930 di
Montevideo, Uruguay. Futsal ini diperkenalkan oleh Juan Carlos Ceriani, Ia adalah
seorang pelatih sepak bola asal Argentina. Hujan yang sering mengguyur
Montevideo cukup membuatnya kesal, karena rencana yang telah Ia susun menjadi
berantakan karena lapangan yang tergenang air. Lalu, Juan Carlos Ceriani
memindahkan latihan ke dalam sebuah ruangan. Pertama, Ia tetap menggunakan 11
orang pemain, namun karena lapangan yang sempit, Ia memutuskan untuk
mengurangi jumlah menjadi 5 orang pemain tiap tim, itu termasuk penjaga gawang.
Futsal adalah permainan bola yang dimainkan oleh dua tim, yang setiap tim
beranggotakan lima orang. Tujuannya adalah memasukkan bola ke gawang lawan,
dengan memanipulasi bola dengan kaki. Selain lima pemain utama, setiap regu juga
diizinkan memiliki pemain cadangan. Tidak seperti permainan sepak bola dalam
ruangan lainnya, lapangan futsal dibatasi garis, bukan net atau papan. Ukuran
lapangan futsal berbentuk persegi panjang, dengan panjang 25 – 42 meter dan lebar
15 – 25 meter. Sedangkan, ukuran standar dari pertandingan futsal internasional
panjang: 38 – 42 meter dan lebar: 18 – 25 meter.
19
2.8 Definisi Web Browser
Web browser digunakan untuk menampilkan hasil website yang telah
dibuat. Web browser yang paling sering digunakan diantarnya adalah Mozilla
Firefox, Google Chrome dan Safari.
2.9 Definisi Website

Website adalah kumpulan halaman-halaman yang digunakan untuk
mempublikasikan informasi berupa teks, gambar dan program multimedia lainnya
berupa animasi (gambar gerak, tulisan gerak), suara dan atau gabungan dari
semuanya itu baik yang bersifat statis maupun dinamis yang membentuk satu
rangkaian bangunan yang saling terkait antara satu page dengan page yang lain
yang sering disebut sebagai hyperlink. Website biasanya terangkum dalam sebuah
domain atau subdomain yang tempatnya berada di dalam World Wide Web (www)
di internet. Sebuah Web Page adalah dokumen yang ditulis dalam format HTML
yang hampir selalu bisa diakses melalui HTTP, yaitu protocol yang bisa
menyampaikan informasi dari server website untuk ditampilkan kepada para
pemakai melalui web browser. Semua publikasi dari website-website tersebut dapat
membentuk sebuah jaringan informasi yang sangt besar.
Halaman-halaman dari website akan bisa diakses melaui sebuah URL yang
bisa disebut Homepage. URL ini mengatur halaman-halaman situs untuk menjadi
sebuah hirarki, meskipun hyperlink-hyperlink yang ada di halaman tersebut
mengatur para pembaca dan memberitahu mereka susunan keseluruhan dan
bagaimana arus informasi ini berjalan. Beberapa website membutuhkan subskripsi
(data masukan) agar para user bisa mengakses sebagian atau keseluruhan isi web
tersebut. Contohnya, pada beberapa situs-situs bisnis dan situs-situs email gratisan
yang membutuhkan sub-skripsi agar kita bisa mengakses situs tersebut.
2.10 Definisi Bahasa Pemograman Web

Bahasa pemograman merupakan bahasa yang dapat dipahami oleh
komputer. Ada banyak bahasa pemograman yang memiliki fungsi berbeda-beda,
diantaranya bahasa pemograman untuk membuat aplikasi desktop, membuat game,
20
membuat aplikasi web, membuat aplikasi handphone, dan lain sebagainya. Dalam
membangun website, ada banyak jenis bahasa pemograman yang dapat digunakan
diantaranya.
2.11 HTML (Hyper Text Markup Language)

HTML adalah bahasa yang digunakan untuk menulis halaman web.
Sekalipun banyak yang menyebutnya sebagai suatu bahasa pemograman, HTML
sebenarnya sama sekali bukan bahasa pemograman, HTML merupakan
pengembangan dari standar pemformatan dokumen teks, yaitu Standard
Generalized Markup Language (SGML). HTML sering juga disebut sebagai bahasa
penandaan (markup) terhadap sebuah dokumen teks. Tanda tersebut digunakan
untuk menentukan format atau style dari teks yang ditandai. Simbol markup yang
digunakan oleh HTML ditandai dengan lebih kecil () dan disebut tag. Sebuah file
HTML merupakan file teks biasa yang mengandung lebih dari satu tag HTML.
Karena merupakan file teks, maka HTML dapat dibuat dengan menggunakan teks
editor yang sederhana, misalnya NotePad. Tanda bahwa sebuah file teks merupakan
HTML terdapat pada eksistensi filenya, yaitu .htm atau .html. Untuk menandai
suatu file teks berupa HTML, terlebih dahulu harus terkandung struktur sebagai
berikut:
<HTML>
……………..
</HTML>
Tag tersebut harus diletakkan pada paling awal dan tag harus diletakkan
pada bagian akhir. Strukturnya sebagai berikut:
<html>
<head>
……..
</head>
<body>
………
</body> 21
</html>
Bagian head umumnya berisi informasi mengenai dokumen tersebut,
misalnya judul dokumen, sedangkan bagian body berisi layout atau desain halaman
web.
2.12 CSS (Cascading Style Sheet)

CSS singkatan dari Cascading Style Sheets, yaitu script yang digunakan
untuk mengatur desain website. Walaupun HTML mempunyai kemampuan untuk
mengatur tampilan website, namun kemampunnya sangat terbatas. Fungsi CSS
adalah memberikan pengaturan yang lebih lengkap agar struktur website yang
dibuat dengan HTML terlihat lebih rapih dan indah.
Penggunaan CSS ada dua cara yaitu dengan menyisipkan kode CSS
langsung dalam kode HTML atau simpan file tersendiri berekstensi *.css dengan
menyimpan sebagai file tersendiri akan lebih memudahkan untuk mengontrol
tampilan dalambanyak dokumen secara langsung. CSS mendefinisikan
karakteristik tampilan (warna, style, dan posisi) suatu elemen pada dokumen HTML
dalam bentuk properti elemen tersebut. Pemisahan isi dengan tampilan yang
dilakukan dengan penerapan CSS ini, memberikan kemungkinan penyusunan
struktur suatu halaman HTML dengan lebih fleksibel. CSS merupakan
bagian/subset dari yang sangat berperan dalam DHTML (H. Supriansyah dan
Kartoyo, 30 Menit Menjadi Web Master, 2006).
2.13 PHP (PHP Hypertext Processor)

PHP merupakan salah satu bahasa sering disebut script pemograman yang
sering digunakan pada sisi server sebuah web.
1. Tag Awal dan akhir penulisan script php.

Seperti bahasa web yang lainnya, baik disisi client maupun server, PHP juga
mempunyai tag awal (pembuka) dan tag akhir (penutup) untuk mengenali
bahwasanya script PHP telah ditulis pada suatu halaman web. Terdapat empat cara
untuk memulai menuliskan script PHP, seperti source code berikut:
22
 Source code tag awal dan akhir bentuk 1:
<?php
Echo “hello php model 1”;
?>

<?
Echo”hello php model 2”
?>

<script language=”php”>
</script>

<%
%>
2.14 Definisi Framework

Secara umum, framework menggunakan struktur MVC (Model View
Controller). “Framework adalah sekumpulan library yang diorganisasikan pada
sebuah rancangan arsitektur untuk memberikan kecepatan, ketepatan, kemudahan
dan konsistensi didalam pengembangan aplikasi dari definisi tersebut”
(Siena,2009). Fungsinya untuk mengembangkan perangkat lunak dengan
penyusunan kode secara terstruktur dan konsisten. Kode yang baik tentu saja
merupakan kode yang dapat dimengerti oleh mesin serta pengembang.
23
2.15 Definisi Laravel
Laravel adalah salah satu dari sekian banyak kerangka kerja siap pakai
berbasis PHP. Adapun fitur-fitur Laravel adalah sebagai berikut:
1. Bundles, merupakan ikatan menyediakan sistem kemasan modular. Dengan
fitur ini dapat mudah melakukan penambahan paket aplikasi ke dalam
project kita.
2. Eloquent ORM (Object Reletional Mapping), merupakan implemantion
PHP lanjutan dari active record yang menyediakan metode tersendiri dalam
mengataur relationship antar objek database. Laravel query builder adalah
satu fitur yang disupport Eloquent
3. Application logic, fitur pengembangan aplikasi secara umum, baik dengan
controller atau pendekatan route.
4. Reverse routing, fitur yang mampu mendefinisikan hubungan anatara link
dan route, atau tanpa pengubahaan di view.
5. Restfull controllers merupakan cara opsional untuk memisahkan logika
antara HTTP GET dan POST.
6. Class auto loading fitur untuk load PHP class tanpa perlu melakukan
include, on-demand loading hanya akan me-load class yang diperlukan.
7. View composer fitur kode logic yang di eksekusi ketika view di load.
8. IoC container memungkinkan objek baru yang akan dihasilkan sesuai
prinsip control, dengan instansi opsional dan referensi dari objek baru.
9. Migration menyatakan system control untuk skema database, sehingga
memungkinkan untuk menghubungkan antara perubahan kode aplikasi
dengan layout database, memudahkan deploy dan update aplikasi.
10. Unit testing menyediakan fitur testing untuk mendeteksi atau mencegah
kode ganda atau berulang (regresi), unit test ini dapat dijalankan melalui
perintah command line.
11. Automatic pagnation, fitur yang memungkinkan pembuatan
halaman/paging secara otomatis dengan metode yang sudah diintregasikan
ke Laravel.
24
Laravel menerapkan lingkungan pengembangan dengan metode MVC
(Model View Control). MVC memisahkan antara logika proses bisnis dengan
template atau halaman depan. Dengan MVC, kode program menjadi terstruktur,
terorganisir dan akan lebih mudah dikembangkan kembali oleh selain pengembang
awalnya.
Berikut penjelasan MVC
1. Model
Mempresentasikan struktur data dari website berupa basis data, dalam
bentuk text atau xml. Bagian model berhubungan dengan perintah-perintah query
SQL. Model ini bisa dibilang khusus digunakan untuk melakukan koneksi ke basis
data.
2. View
Berupa template html/xml atau php untuk menampilkan data pada
browser. View hanya dikususkan menampilkan data hasil model dan controller.
3. Controller
Merupakan penghubung antara model dan view. Didalam controller
terdapat class dan fungsi-fungsi yang memproses permintaan dari view kedalam
struktur data di dalam model. Tugas controller adalah menyediakan berbagai
variable yang akan ditampilkan di view, memanggil model untuk melakukan akses
ke basis data, menyediakan penanganan error, mengerjakan proses logika dari
aplikasi serta melakukan validasi atau cek terhadap input.
25
Ilustrasi alur Model View Controller:
Gambar 2.3 Model View Controller

Sumber: Hakim (2010:4) Membangun Web Berbasis PHP dengan Framework
Laravel
Gambar diatas menerangkan bahwa ketika datang sebuah user request,
maka akan ditangani oleh controller, kemudian controller akan memanggil model
jika memang diperlukan operasi database. Hasil dari query oleh model kemudian
akan dikembalikan ke controller. Selanjutnya, controller akan memanggil view
yang tepat dan mengkombinasikannya dengan hasil query model. Hasil akhir dari
operasi ini akan ditampilkan di browser.
2.16 Definisi MYSQL

Menurut Abdul Kadir dalam bukunya yang berjudul Membuat Aplikasi Web
dengan PHP + Database MySQL menjelaskan, bahwa “MySQL merupakan
software yang tergolong database server dan bersifat open source” (2009:15)
26
BAB III
METODOLOGI PENELITIAN
Dalam mempermudah pemahaman pelaksanaan penelitian ini akan dibuat

suatu urutan metodologi penelitian yang menjadi kerangka acuan dalam
pelaksanaan penelitian kerangka tersebut, yang berisikan tahapan-tahapan yang
akan dilakukan untuk menyelesaikan permasalahan dari penelitian ini.
Mulai
REQUIREMENT
1. Metode Pengumpulan Data
a. Observasi
b. Wawancara
2. Analisa Sistem Sedang Berjalan
PERANCANGAN
1. Use Case Diagram
2. Activity Diagram
3. Sequence Diagram
DESIGN
1. Design CDM & PDM
2. Design Interface
IMPLEMENTASI
1. Coding
2. Testing
Penyusunan Laporan
Selesai
Gambar 3.1 Metodologi Penelitian
27
3.1 Requirement Analysis
Perencanaan pelaksanaan penelitian ini sesuai dengan metodelogi yang
terstruktur sehingga dapat memudahkan dalam perancangannya. Tahap penelitian
yang pertama yaitu mempersiapkan semua keperluan yang akan dilakukan untuk
obeservasi lapangan, wawancara, dan studi literatur. Pada tahap ini, dilakukan
proses mengenali permasalahan yang ada, termasuk dalam hal pengumpulan data
dan mempelajari literatur-literatur yang berhubungan dengan masalah tersebut.
Tahap ini merupakan tahap penentuan hal-hal penting sebagai dasar permasalahan
yang akan dibahas, untuk mengkaji dan membatasi masalah yang akan
diimplementasikan pada sistem. Tujuannya adalah mengidentifikasi masalah yang
akan diidentifikasi untuk mendapatkan solusi dari tujuan yang ingin dicapai.
3.1.1 Metode Pengumpulan Data

Pengumpulan kebutuhan data dan aktifitas yang dilakukan untuk
menghasilkan informasi yang detail yang akan diterapkan dalam sistem dan
aplikasi yang akan dibangun. Metode yang dilakukan untuk memperoleh gambaran
mengenai data yang dibutuhkan dalam pembuatan penelitian ini metode yang
digunakan adalah sebagai berikut:
1. Observasi
Pada tahap ini peneliti akan melakukan observasi lingkungan, yaitu proses
pengumpulan data sehingga didapatkan referensi yang mendukung dalam
penelitian. Observasi ini dilakukan di Garuda Muda Futsal Cibubur-Jakarta Timur
yang berlokasi Jl. Raya Pkp Gg. Kiwi, RT.2/RW.8, Klp. Dua Wetan, Kec. Cibubur,
Kota Jakarta Timur 13730. Data yang diperoleh akan digunakan sebagai bahan
rujukan dalam menyelesaikan penelitian. Penulis melakukan observasi secara
langsung di tempat guna mengetahui lebih detail proses pemesanaan yang terjadi
di Garuda Muda Futsal.
2. Wawancara
Tahap selanjutnya, yaitu mempersiapkan form wawancara yang telah dibuat
untuk kemudian digunakan dalam wawancara kepada pemilik Garuda Muda Futsal.
28
Hasil wawancara ini digunakan untuk melengkapi perencanaan pembuatan sistem
aplikasi yang akan dibuat.
3. Studi Literatur
Studi literatur dilakukan untuk mencari referensi dari buku-buku, artikel,
jurnal, website, serta mempelajari literatur-literatur yang dibutuhkan sehingga dapat
referensi yang mendukung penelitian.
3.1.2 Ruang Lingkup Perencanaan

Dalam penelitian ini, penulis hanya membahas mengenai bagaimana
membangun aplikasi berbasis web untuk melayani pemesan online dan informasi
penjadwalan penggunaan lapangan futsal di Garuda Muda Futsal.
Lokasi Penelitian : Jl. Raya Pkp Gg. Kiwi, RT.2/RW.8, Klp. Dua Wetan, Kec.
Cibubur, Kota Jakarta Timur 13730
Waktu Penelitian : Maret 2021 s/d Agustus 2021
Estimasi dan aktual waktu pembuatan aplikasi ini dijadwalkan selesai pada
Agustus 2021. Untuk estimasi dan aktual waktu pada tahapan akan digambarkan
dalam tabel jadwal yaitu sebagai berikut:
Tabel 3.1 Jadwal Pelaksanaan Penelitian Skripsi
29
3.1.3 Sistem Yang Saat Ini Berjalan
Berdasarkan dari hasil wawancara dengan pemilik lapangan masih banyak
kendala baik dari pelanggan maupun pemilik di Garuda Muda Futsal. Alur
pemesanan lapangan yang saat ini berjalan tergambar dalam bentuk flowchart
diagram berikut ini:
Gambar 3.2 Pemesanan Lapangan (Booking) Yang Saat Ini Berjalan
3.1.4 Masalah Dari Sistem Yang Saat Ini Berjalan

Setelah mengetahui sistem yang berjalan di Garuda Muda Futsal, maka
penulis menyimpulkan bahwa permasalahan pada sistem tersebut adalah :
1. Proses penyewaan masih dilakukan secara datang langsung di tempat.
2. Proses penjadwalan masih menggunakan cara manual.
3. Mengetahui informasi penjadwalan lapangan masih dilakukan dengan
datang langsung di tempat.
4. Proses rekap data dan informasi laporan data masih manual sehingga
perhitungan rekap data dan informasi lainya memakan waktu yang terlalu
lama dan kurang efisien.
30
3.1.5 Sistem Yang Diusulkan
Dengan melihat sistem yang berjalan, maka diperlukan sebuah sistem yang
dapat memberikan informasi dengan cepat dan praktis dalam proses pemesanan dan
penjadwalan lapangan futsal di Garuda Muda Cibubur. Untuk itu sangat diperlukan
sistem aplikasi pemesanan booking dan laporan-laporan secara online yang bisa
diakses oleh pelanggan dan pemilik lapangan sehingga dapat memberikan solusi
yang digambar dalam bentuk flowchart diagram berikut ini:
Gambar 3.3 Pemesanan Lapangan (Booking) Yang Diusulkan
31
Pada sistem yang akan diusulkan terdapat pengguna sistem, adalah sebagai
berikut:
1. Pelanggan yang ingin melakukan melihat jadwal dan booking lapangan
dapat dilakukan melalui web browser dimana saja dan kapan saja.
2. Petugas pengelola/pemilik menerima pemesanan booking dari pelanggan
secara online, rekap data dan informasi laporan data dapat dilihat dengan
cepat dan akurat.
3.2 Perancangan Sistem

Tahapan selanjutnya adalah tahapan perancangan sistem, dimana pada
tahapan ini terdapat beberapa kebutuhan fungsional suatu perancangan sistem yang
terstruktur. Peneliti akan memulai merancang sistem aplikasi pemesanan dan
penjadwalan secara online tahapan-tahapan dalam perancangan sistem yang
dilakukan adalah sebagai berikut:
3.2.1 Use Case Diagram

Use case diagram merupakan rangkaian sekelompok yang saling terkait dan
membentuk system secara teratur yang dilakukan oleh sebuah actor. Pembuatan use
case diagram di buat untuk membentuk kegiatan-kegiatan user pada aktifitas di
Garuda Muda Futsal.
3.2.2 Activity Diagram

Activity diagram menggambarkan berbagai alur aktivitas dalam sistem yang
dirancang bagaimana masing-masing alur berawal, decision yang mungkin terjadi.
Pada tahap ini menjelaskan tentang aktivitas dari sebuah system yang dirancang di
Garuda Muda Futsal.
3.2.3 Sequence Diagram

Tahap ini merupakan lanjutan dari tahap sebelumnya yaitu pembuatan
activity diagram. Pada tahap ini menjelaskan bagaimana suatu operasi itu
32
dilakukan, pemesanan, kapan pelaksanaanya dan diagram diatur berdasarkan
waktu.
3.3 Design
Pada tahap design ini menjelaskan tentang design database dan design
interface.
3.3.1 Design Database

Tahap ini merupakan tahapan membuat representasi fisik dari database
yang akan dibuat dengan mempertimbangkan DBMS yang akan digunakan, serta
memperlihatkan struktur penyimpanan data yang benar pada basis data yang
digunakan sesungguhnya. Penerapannya dapat disamakan dengan skema
relasi yang fungsinya adalah memodelkan struktur fisik dari suatu basis data dan
merupakan gambaran secara detail suatu basis data dalam bentuk fisik. Adapun
database yang digunakan adalah sebagai berikut:
1. MySQL untuk server basis data
2. phpMyAdmin untuk mengelola database MySQL
3.3.2 Design Interface

Tahap ini merupakan lanjutan dari tahap sebelumnya. Pada tahap ini
menjelaskan tentang design interfase yang akan di rancang. Adapun software yang
akan digunakan dalam tahap design ini adalah sebagai berikut:
1. Enterprise Architect 9.1 untuk perancangan UML
2. Balsamiq Wireframes 4.2.3 untuk perancangan mockup
3.4 Implementasi
Pada tahap ini penulis mulai melakukan tahapan pembangunan sebuah
sistem yang sudah dibuat analisa dan desainnya dengan melakukan perencanaan
dan mengacu kepada aturan tertentu untuk mencapai tujuan kegiatan.
33
3.4.1 Coding
Pada tahap ini merupakan pembuatan sistem yang dibangun dan diuji coba
untuk memastikan setiap form sesuai dengan design yang sudah dibuat. Dalam
pembuatan program ini penulis menggunakan tools yang nantinya digunakan dalam
tahap implementasi. Adapun tools yang digunakan adalah sebagai berikut:
1. Editor Sublim Text 3 sebagai teks editor
2. XAMPP sebagai web server
3.5 Testing
Tahap testing ini dilakukan untuk menemukan kemungkinan error dan uji
coba aplikasi pada setiap form atau program yang dilakukan untuk meminimalkan
terjadinya error. Testing dilakukan menggunakan metode Black Box Testing,
sehingga menjadi tolak ukur dalam penyelesaian penelitian. Metode Black Box
Testing menguji apakah program dapat menangani kesalahan dari pengguna saat
melakukan prosesnya.
3.6 Penulisan
Tahap ini merupakan tahap terakhir dari keseluruhan proses penelitian yang
merupakan tahap penyusunan dokumentasi dalam bentuk penulisan skripsi.
Diharapkan penulisan penelitian skripsi ini dapat bermanfaat bagi pembaca yang
ingin mengembangkan penelitian lebih lanjut.
34
BAB IV
ANALISA DAN PEMBAHASAN
Pada bab ini akan dibahas mengenai analisa kebutuhan sistem serta
perancangan sistem sesuai dengan kebutuhan sistem yang telah diidentifikasi.
4.1 Analisa Kebutuhan Sistem

Aktivitas analisa sistem menjelaskan sejumlah kegiatan yang memuat
seperti menguraikan, membedakan, memilah sesuatu untuk digolongkan dan
dikelompokkan kembali berdasarkan kriteria tertentu kemudian dicari kaitannya
dan setelah itu ditafsirkan maknanya sehingga memperoleh informasi-informas i
yang dibutuhkan dalam konsep aplikasi yang akan dibuat.
4.1.1 Kebutuhan Fungsional

Kebutuhan fungsional terdiri dari penjelasan kebutuhan perangkat
lunak/software yang dimiliki oleh sistem. Kebutuhan fungsional dari aplikasi web
pemesanan dan penjadwalan lapangan futsal online di Garuda Muda adalah sebagai
berikut:
Tabel 4.1 Kebutuhan Fungsional

Nomor Nomor
Nomor
No Activity Squence Kebutuhan Fungsional
Use Case
Diagram Diagram
1. UC01 AD01 SD01 Login aplikasi
2. UC02 AD02 SD02 Kelola akun pengguna
3. UC03 AD03 SD03 Melakukan pemesanan lapangan
4. UC04 AD04 SD04 Registrasi member
5 UC05 AD05 SD05 Melihat jadwal lapangan
6. UC06 AD06 SD06 Lihat laporan pesanan
7. UC07 AD07 SD07 Melihat informasi jumlah kupon
35
8. UC08 AD08 SD08 Lihat data pelanggan
9. UC09 AD09 SD09 Kelola lapangan
10. UC10 AD10 SD10 Kelola transaksi keluaran kas
11. UC11 AD11 SD11 Kelola transaksi booking
12. UC12 AD12 SD12 Melihat laporan
13. UC13 AD13 SD13 Approvment transfer
14 UC14 AD14 SD14 Kelola tampilan front-end
15 UC15 AD15 SD15 Kelola akun
4.1.2 Kebutuhan Non Fungsional

Kebutuhan non fungsional merupakan analisa yang dibutuhkan untuk
menentukan spesifikasi kebutuhan sistem, baik kebutuhan perangkat lunak dan
perangkat keras. Kebutuhan non fungsional dari aplikasi web pemesanan dan
penjadwalan lapangan futsal online di Garuda Muda adalah sebagai berikut:
1. Perangkat Lunak (software)
a. Microsoft Windows (64-bit) sebagai sistem operasi
b. Mozilla Firefox, Internet Explorer, Google Chrome sebagai web
browser
2. Perangkat Keras (hardware)
a. Komputer/Laptop
b. Prosesor: Intel Core 2
c. RAM: 2Gb
d. Harddisk: 500Gb
4.2 Perancangan Perangkat Lunak

Pada tahapan ini penulis membuat rancangan yang mendeskripsikan tentang
sistem yang akan dibuat dengan proses pembuatan model diagram sebagai
berikut:
36
4.2.1 Use Case Diagram
Hasil tahap analisa digambarkan dalam bentuk Use Case Diagram. Use
Case Diagram menggambarkan fungsional yang diharapkan sebuah sistem. Sebuah
Use Case mempresentasikan hubungan antara aktor dan sistem.
uc Use Case Model
Sistem Informasi pemesanan dan Penjadawalan futsal online
01. Login &

Logout
Umum
02. Kelola Akun
Pengguna
03. Melakukan
Pemesanan
Lapangan
04. registrasi
Pelanggan Member
06. Melihat 05. Lihat Jadw al

Laporan j umlah Lapangan
pesan
07.Melihat
laporan j umlah
kupon
08. Lihat Data
Pelanggan
09. Kelola
Lapangan
10. Input
Admin Transaksi Keluar
Perbulan(KAS)
11. Kelola transaksi

booking.
12. melihat laporan

14. Kelola Posting
tampilan fornt end 13. Approv ment
Transfer
15. Kelola Akun
Pimpinan
Gambar 4.1 Use Case Diagram Rancang Bangun Pemesanan Futsal Online
4.2.2 Activity Diagram

Activity Diagram digunakan untuk menggambarkan alur dari aktifitas untuk
masing-masing use case yang sudah dibuat. Hasil activity diagram dapat dilihat
37
pada dokumen spesifikasi kebutuhan dan deskripsi aplikasi pemesanan dan
penjadwalan online lapangan futsal.
act Activ ity login
Admin Sistem
Mulai
Mengakses halaman w eb Menampilkan Halaman Login
Memasukan username dan Memv eriv ikasi kelengkapan data

passw ord
Tidak
Lengkap
Ya
Sistem akan memv eriv ikasi hak

akses
Ya
Menampilkan halaman Pemilik

Pemilik
Tidak
Ya
Menampilkan halaman Admin
Admin
Tidak
Tidak
Meampilkan Pesan salah
Pelanggan
Ya
Menampilkan halaman
Selesai
Gambar 4.2 Activity Diagram 01 Login Aplikasi
38
act Activ ity
Admin Sistem
M ul ai
M emilih menu kelola akun M enampilkan halaman utama

user
M enampilkan akun user yang telah

diinput
M enj alankan
M enj alankan M enj alankan
UC15-01 Form UC15-03 Form
UC15-02 Form
tambah akun
ubah akun hapus akun
Sel esai
Gambar 4.3 Activity Diagram 02 Kelola Akun User
act tambah user
Pemilik/admin sistem
Mul ai
Menekan tombol tambah data Menampilkan akun user yang telah diinput
Mengisi Form yang sudah Menampilkan form UC16-01 Form

disediakan Tambah data
Menekan tombol Simpan

Memproses data
Data Lengkap?
Ya T i dak
Menampilkan pesan Menampilkan

"data berhasil
pesan 'Data gagal
disimpan" disimpan'
Kembali kehalaman
data akun
Sel sai
Gambar 4.4 Activity Diagram 02-1 Tambah Data User
39
act Activ ity
Pemilik/admin Sistem
M ul ai
M emilih data yang akan diubah M enampilkan data yang telah diinput
M enekan tombol ubah M enampilkan form ubah data
T i dak
M elakukan ubah data

Lengkap
Ya
M enekan tombol simpan
M enyimpan data
M enampilkan pesan 'data

M enekan tombol OK
berhasil disimpan'
kembali ke halaman data akun
Sel esai
Gambar 4.5 Activity Diagram 02-2 Ubah Data User
act Activ ity
Admin Sistem
Mul ai
Memilih data yang akan dihapus Menampilkan form pengeluran

perbulan
Menekan tombol hapus Menampilkan pesan 'anda yakin akan

menghapus data ini'
T i dak
Menekan tombol ya
Hapus
Ya
Menghapus data
Kembali ke haaman
data akun
Sel esai
Gambar 4.6 Activity Diagram 02-3 Hapus Data User
40
act pemesanan Model
pelanggan sistem admin
start
membuka halaman menampilkan

w ebsite halaman w eb site
melakukan pemesanan
lapangan
salah
Form registrasi
pelangakan sudah
registrasi
menampilkan daftar
ketersediaan lapangan
menampilkan harga
no yes
melakukan v alidasi
registrasi pelanggan memasukan pemesanan
username dan
passw ord v alidasi pembayaran
benar
booked
masukan tanggal pilih j am main
main
pilih lapangan
perbaharui daftar
list penyew aan
konfirmasi pemesanan lapangan
main
end
Gambar 4.7 Activity Diagram 03 Pemesanan Online
41
act Activ ity
Pelanggan System
M ul ai
M engakses w eb yang sudah M enampilkan halaman w eb

ditentukan
M emilih tombol registrasi pelanggan M enampilkan form 04.1 Form Registrasi
T i dak
Input data sesuai yang di sediakan M enampilkan pesan "Data

Cek kel engkapan
yang anda masukan tidak
data
v alid"
Ya
Data tersimpan ke database
Kembali ke halaman user
Sel esai
Gambar 4.8 Activity Diagram 04 Registrasi Pelanggan
act Activ ity
Pelanggan Sistem
Mul ai
Memilih tombol Menampilkan daftar

"Jadw al Lapangan" ketersediaan j adw al
Memilih Tanggal
bel um
Menampilkan j adw al
sesuai yang dipilih/
periode yang dimasukan
Memilih j adw al kosong
Menampilkan form penyew aan

lapangan dengan membaw a
sudah
j adw al yang dipilih
regi strasi
Sel esai
Gambar 4.9 Activity Diagram 05 Melihat Jadwal Lapangan
42
act Activ ity
Admin Sistem
Mul ai
Memilih Menu Kelola Harga Menampilkan Halaman Utama

Lapangan
Menampilkan List Harga Lapangan

Yang talah di inputkan
Menj alankan Menj alankan Menj alankan

UC08.1 Form UC08.2 Form UC08.3 Form
Tambah Harga Ubah Data Hapus Data
Sel esai
Gambar 4.10 Activity Diagram 09 Kelola Lapangan
act Activ ity
Admin Sistem
Mulai
Memilih tombol "Tambah Harga Lapangan" Menampilkan Harga Lapangan
Menampilkan Form Tambah Lapangan
Mengisi data sesuai form yang

ditentukan
Cek Kelengkapan data
Menampilkan pesan Menampilkan pesan

"Data berhasil "Data gagal disimpan"
Disimpan"
Kembali ke halaman aw al
Selesai
Gambar 4.11 Activity Diagram 09-1 Tambah Lapangan
43
act Activ ity
Admin Sistem
M ul ai
M emilh harga lapangan yang akan M enampilkan data yang telah diinput
diubah
M enekan Tombol Ubah M enampilkan form ubah data
M elakukan Ubah Data
T i dak
M enekan tombol Simpan

Lengkap?
M enyimpan Data
M enekan Tombol OK M enampilkan " Data berhasil

disimpan"
Kembali ke halam list harga
Sel esai
Gambar 4.12 Activity Diagram 09-2 Ubah Lapangan
act Activ ity
Admin Sistem
M ul ai
M emilih data yang akan dihapus M enampilkan halaman harga

Lapangan
M enampilkan pesan 'Anda yakin

M enekan tombol hapus
ingin menghapusb data ini'
T i dak
Ya
M enekan tombol ya hapus
M enghapus data
Kembali ke halaman list harga lapangan
Sel esai
Gambar 4.13 Activity Diagram 09-3 Hapus Lapangan
44
act Activ ity
admin sistem
start
memilih data transaksi

menampilkan halaman
utama
menampilkan list data

transaksi
menj alankan menj alankan 13.3

menj alankan 13.1
form tambah 13.2 form edit menampilkan form
transaksi transaksi hapus transaksi
end
Gambar 4.14 Activity Diagram 10 Kelola Data Transaksi Kas
act Activ ity
Admin Sistem
M ul ai
pilih tombol "input pengeluran M enampikanhalaman utama

perbulan"
M engisi form yang sudah menampilkan form input pengeluran

disediakan perbulan
T i dak
M enekan tombol Simpan

Cek kel engkapan
Ya
Data tersimpan di
database
Kembali ke halaman
pengeluaran
Sel esai
Gambar 4.15 Activity Diagram 10-01 Tambah Transaksi Kas
45
act Activ ity
admin sistem
start
memilih data transaksi menampilkan form data

yang dipilih transaksi
menkan tombol menampilkan form edit

"edit"transaksi data
ti dak l engkap
melakukan edit data
l engkap
menakan tombol submit
menyimpan data
menampilkan data
berhasil di simpan
kembali ke daftar data

transaksi
end
Gambar 4.16 Activity Diagram 10-02 Edit Transaksi Kas
act Activ ity
Admin Sistem
M ul ai
M emilih data yang akan dihapus M enampilkan form transaksi kas
M enekan tombol hapus M enampilkan pesan 'anda yakin akan

menghapus data ini'
T i dak
M enekan tombol ya
Hapus
Ya
M enghapus data
Kembali ke haaman
data akun
Sel esai
Gambar 4.17 Activity Diagram 10-03 Hapus Transaksi Kas
46
act Activ ity
admin sistem
start
klik tombol booking
menampilkan halaman
utama
klik tombol data transaksi

booking
menampilkan data
transaksi booking
menj alan kan UC menj alanka UC

10.01detail transaksi 10.02 Form
boking hapus transaksi
booking
end
Gambar 4.18 Activity Diagram 11 Kelola Data Transaksi Booking
act Activ ity
admin sistem
start
menampilkan form data

memilih tombol detail transaksi booking
transaksi booking
menampilkan detail
transaksi booking
end
Gambar 4.19 Activity Diagram 11-01 Melihat Detail Data Transaksi Booking
47
act Activ ity
admin sistem
start
memilih data yang akan menampilkan halaman

dihapus data transaksi bboking
menampilkan tombol menampilkan pesan

hapus "yakin anda ingin
menghapus?"
hapus
menekan tomblol OK
menghapus data
kembali ke data transaksi

booking
end
Gambar 4.20 Activity Diagram 11-02 Hapus Kelola Data Transaksi Booking
48
act Activ ity
admin sistem
start
mengklik tombol report sistem menampilkan

halaman utama
menampilkan semua
laporan
memilih laporan yang

dilihat
menampilkan data laporan
end
Gambar 4.21 Activity Diagram 12 Melihat Laporan
act Activ ity
Admin Sistem
Mulai
Menerima konformasi Menampilkan Form

pembayaran v aliadasi
Memilih menu v alidasi

T idak
Cek Kelengkapan
Klik v alidasi data

Ya
Meyimpan ke databes
Selesai
Gambar 4.22 Activity Diagram 13 Approvment Transfer
49
4.2.3 Sequence Diagram
Sequence Diagram yang didefinisikan dibawah ini merupakan skenario
jalanya sistem. Hasil sequence diagram dapat dilihat pada dokumen spesifikasi
kebutuhan dan deskripsi perangkat lunak sistem informasi pemesanan dan
penjadwalan futsal online.
sd returndatalogin
admin
login_v ew control_login login_model halaman admin
klikButtonlogin()
validasi()
returndatalogin()
menampilkan()
Gambar 4.23 Sequence Diagram 01 Login Aplikasi
sd Interaction
umum
Halaman Utama Control_akun Akun_model List_akun
Klik_UserMenu()
Tampilkan()
Get_dataAKun()
return_data()
Tampilkan()
Gambar 4.24 Sequence Diagram 02 Kelola Akun
50
sd Interaction
umum
Halaman_akun Akun Akun_model
T Ambah_dataKlik()
btn_simpanKlik()
T ambahAkun()
tambah_data()
return_data()
tampilkan()
Gambar 4.25 Sequence Diagram 02-01 Tambah Akun
sd Interaction
um um
Halaman_dataAkun Akun M odel
btnKl i k_ubah()
Ubah_data()
Get_data()
return_data()
tam pi l kan()
btn_si m panKl i k()
Si m pan_data()
Ubah_data()
return_data()
tam pi l kan()
Gambar 4.26 Sequence Diagram 02-02 Edit Akun
sd Interaction
umum
Halaman_dataAkun Akun Akun_model
Btn_hapusKl i k()
Hapus_data()
get-dataAkun()
return_data()
hapus-data()
return_data()
T ampi l kan()
Gambar 4.27 Sequence Diagram 02-03 Hapus Akun
51
sd seaquencePemesanan Model
pel anggan
halaman_Lapangan control lapangan_model registrasi_Pemesan
l i hatStatusl apangan()
cek_l apangan()
val i dasi _l apangan()
return_val i dasi ()
pesanLapangan()
val i dasi _i nputan()
kl i kBtoon_OK()
si mpan_db()
return_db()
Gambar 4.28 Sequence Diagram 03 Pemesanan Lapangan
sd Interaction
Pelanggan
Halaman FormRegistrasi_v iew Pelanggan Pelanggan_model
RegistrasiPelanggan
button_KlikRegister()
SimpanKlik()
Tambah_data()
Tambah_dataPelanggan()
Return_tambahData()
Tampilkan_halamanUser()
Gambar 4.29 Sequence Diagram 04 Registrasi Pelanggan
sd Interaction
Admin
Halaman _utama data_Lapangan dataLapangan_model List_daftar_lapangan
Klik_dataLapngan()
Tampilkan_data_lapangan()
get_dataLapangan()
return_dataLapangan()
tampilkan()
Gambar 4.30 Sequence Diagram 09 Kelola Lapangan
52
sd Interaction
Admin
FormHargaLapangan_v iew HargaLapangan Hargalapangan_model
TambahData_Klik()
SimpanData()
Tambah_harga()
Tambah_hargaLapangan()
return_tambahData()
Tampilkan()
Gambar 4.31 Sequence Diagram 09-01 Tambah Lapangan
sd Interaction
Admin
Halaman_ubah_lapangan_View ubah-data_lapangan Lapangan_model
btn_klikUbah()
Ubah_data()
Get_data()
return_data()
Tampilkan()
BtnSimpan_klik()
Simpan_data()
Ubah_data()
return_data()
Tampilkan()
Gambar 4.32 Sequence Diagram 09-02 Edit Lapangan
53
sd Interaction
Admi n
Halaman_listdaftar_Lpgn list_lapangan list_lapanganModel
button_hapusKl i k()
Hapus_data()
cek_data()
return_data()
Hapus_data()
return_hapus()
tampi l kan()
Gambar 4.33 Sequence Diagram 09-03 Hapus Lapangan
sd Interaction
admin
halaman utama data transaksi daftar transaksi list daftar
keluaran (kas) keluaran (kas) transaksi
pengeluaran (kas)
klik data transaksi()
tampilan_data_transaksi()
get_data_transaksi()
Gambar 4.34 Sequence Diagram 10 Transaksi Kas
sd Interaction
Admin
Halaman_datatransaksiKas datatransaksi_v iew tambahdatatransaksikastransaksipengeluaran_Model
btnKlik_datatransaksiKas()
btn_kliktambah()
btn_submit()
Simpan_data()
Tambah_data()
return_data()
Tampilkan()
Gambar 4.35 Sequence Diagram 10-01 Tambah Transaksi Kas

54
sd Interaction
adm i n
halaman_edit_v ew editdata edit_transaksikas_model
Kl i k_edi t()
edi t_data()
get_data()
return_data()
tam pi l kan()
btn_si m pan_kl i k()
si m pan_data()
ubah_data()
return_data()
tam pi l kan()
Gambar 4.36 Sequence Diagram 10-02 Edit Transaksi Kas
sd Interaction
admi n
halaman_hapus_transaksi_kas daftar_transaksiKAS daftar_transaksikas_model
btn_hapus_kl i k()
hapus_data()
cek_data()
return()
hapus_data()
return()
tampi l kan()
Gambar 4.37 Sequence Diagram 10-03 Hapus Transaksi Kas
sd Interaction
Admin
Halaman _utama data_boking_Lapangan dataLtrasnaksibooking_model daftar_transaksi_booking
Klik_dataLtrasnaksi_booking()
Tampilkan_data_transaksi_booking()
get_dataLtransaksi()
return_dataLtransaksi()
tampilkan()
Gambar 4.38 Sequence Diagram 11 Data Transaksi Booking

55
sd Interaction
Admin
data_transaksiBoking_v iew data_detail_transaksibooking detail_model
detail_Klik()
transaksibooking()
detailtransaksi_booking()
return_detaildata()
T ampilkan()
Gambar 4.39 Sequence Diagram 11-01 Detail Data Transaksi Booking
sd Interaction
Admi n
hapus_transaksi_booking list_transaksi_booking list_transaksi_booking
button_hapusKl i k()
Hapus_data()
cek_data()
return_data()
Hapus_data()
return_hapus()
tampi l kan()
Gambar 4.40 Sequence Diagram 11-02 Hapus Data Transaksi Booking
sd Interaction
Admin
Formv alidasi_View v alidasi_pembayaran v alidasi_model
buttonKlik_validasi()
T ambah_data()
T ambah_databooking()
Return_tambah()
tampil()
Gambar 4.41 Sequence Diagram 13 Approvment Transfer
56
4.3 Design
Design sistem ini untuk mewujudkan hasil analisa yang telah dilakukan
sebelumnya. Diharapkan hasil design sistem ini akan benar-benar mengambarkan
kebutuhan semua pengguna. Design ini nantinya akan diwujudkan dalam suatu
program.
4.3.1 Design Database

Pertama membuat design database yaitu Conceptual Data Model (CDM).
CDM yang dalam penerapannya dapat disamakan dengan ERD yang fungsinya
memang sama yaitu memodelkan struktur logik dari basis data. CDM dipakai untuk
menggambarkan secara detail struktur basis data dalam bentuk logik. Setelah itu,
membuat Physical Data Model (PDM). PDM merupakan representasi fisik dari
database yang akan dibuat dengan mempertimbangkan DBMS yang akan
digunakan. Design database pada pemesanan futsal di Garuda Muda adalah sebagai
berikut:
articel
# id Integer
Relationship_3 articel_catagory
o title Variable characters (50)
o conten Text (100) # id_category Integer
user o user_id Integer o name Variable characters (50)
# id_user Integer o isaactive Number (50) o discription Text (100)
o fullname Variable characters (50) o created_at Timestamp o user_id Integer
o username Variable characters (50) o update_at Timestamp o crate_at Timestamp
o phone Number (20) o update_at Timestamp
o email Variable characters (50)
o password Variable characters (50)
o isactive Number (20) Relationship_2 Relationship_1
Relationship_10
o isdefault Number (20)
password_reset
o remember_token Variable characters (100)
o creat_at Timestamp o e-mail Variable characters (50)
o update_at Timestamp o token Variable characters (50)
o create_at Timestamp
migration
role
# id_mig Integer
premission
# id_role Integer o migration Variable characters (50)
Relationship_6 o name Variable characters (50) Relationship_13# id_premission Integer
o batch Integer
o display_name Variable characters (50) o name Variable characters (50)
Relationship_12
o description Text (100) o display_name Variable characters (50) setting
o create_at Timestamp o description Text (100) o code Variable characters (60)
o update_at Timestamp o create_at Timestamp o value Text (50)
o update_at Timestamp
cash
# id_cash Integer coupon
o date Date Relationship_11 # id_cupon Integer
o description Text (100)
o user_id Integer
booking detail
o update_at Timestamp Relationship_4 # booking_id Integer
o date Date pitch_price
o price Decimal (25)
# time_number Short integer
o coupon_id Integer
o price Decimal (25)
booking
# id_booking Integer
Relationship_5 o notrans Variable characters (50)
o pitch_id Integer pitch
o user_id Integer # id_pitch
Relationship_7 Integer
Relationship_8
o name Variable characters (50) o name Variable characters (50)
o phone Number (20) o description Text (100)
o create_at Timestamp o image Text (10)
o update_at Timestamp o isactive Number (20)
o update_at Timestamp
Gambar 4.42 Design Database CDM (Conceptual Data Model)
57
user
id_user int <pk>
id_cupon int <fk> articel
fullname varchar(50)
id_articel int <pk>
username varchar(50) articel_catagory
id_category int <fk2>
email varchar(50)
id_user int <fk1> id_category int <pk>
password varchar(50)
title varchar(50) id_user int <fk>
isdefault numeric(20,0)
conten text discription text
remember_token varchar(100)
isaactive numeric(50,0) crate_at timestamp
creat_atx datetime
created_art timestamp update_categori_art timestamp
update_user timestamp
update_art timestamp name-articel varchar(50)
tlp_user numeric(30,0)
isactiveuser numeric(20,0)
role
password_reset
id_role int <pk>
update_role timestamp e-mail varchar(50)
display_namerole varchar(50) token varchar(50)
nama_roel varchar(40)
Relationship_12
migration
premission
id_user int <pk,fk1>
id_mig int <pk>
id_role int <pk,fk2> id_premission int <pk>
migration varchar(50)
display_name varchar(50)
batch int
UPDATE_premision timestamp
nama-permision varchar(30) setting
Relationship_13
code varchar(60)
id_role int <pk,fk1> value text
id_premission int <pk,fk2>
cash
coupon
id_cash int <pk>
id_user int <fk> id_cupon int <pk>
user_id int id_booking int <fk>
booking detail
update_cash timestamp
tgl_boking date booking_id int <pk>
id_booking int <fk> pitch_price
coupon_id int
time_number smallint <pk>
datebooking1 date
id_pitch int <fk>
hraga_booking decimal(50)
booking haraga-pesanpitch decimal(50)
id_booking int <pk>
id_pitch int <fk2>
id_user int <fk1>
notrans varchar(50) pitch
pitch_id int id_pitch int <pk>
update_booking timestamp image text
nama-booking varchar(50) update_pitch timestamp
tlp numeric(20,0) namapitch varchar(40)
isactivepitch numeric(50,0)
Gambar 4.43 Design Database PDM (Physical Data Model)
Gambar 4.44 Database MySQL
58
Gambar 4.45 Relasi Database MySQL
4.3.2 Design Interface

Design interface atau desain antarmuka adalah desain tampilan program
yang didesain. Hasil desain interface dapat dilihat pada gambar di bawah ini:
Gambar 4.46 Design Interfase Login
59
Gambar 4.47 Design Interface Data User
Gambar 4.48 Design Interface Tambah User
60
Gambar 4.49 Design Interface Data Lapangan
Gambar 4.50 Design Interface Tambah Lapangan
61
Gambar 4.51 Design Interface Data Transaksi Kas
Gambar 4.52 Design Interface Tambah Transaksi Kas
62
Gambar 4.53 Design Interface Setting Perusahaan
Gambar 4.54 Design Interface Data Transaksi Booking
63
4.4 Implementasi
Proses pemantapan akan kinerja program atau sistem sebagai mana yang
diharapkan:
4.4.1 Struktur Navigasi

Struktur navigasi adalah struktur atau alur dari aplikasi program yang
dibuat. Berikut ini navigasi web pemesanan dan penjadwalan lapangan futsal di
Garuda Muda:
Gambar 4.55 Struktur Navigasi Web Pemesanan Lapangan Futsal Garuda Muda
4.4.2 Front-End
Front-end dari sebuah website adalah bagian yang langsung dilihat
oleh user. Berikut ini adalah tampilan front-end aplikasi pemesanan dan
penjadwalan lapangan futsal di Garuda Muda:
64
4.4.2.1 Menu Daftar Akun
Gambar 4.56 Tampilan Front-End Daftar/Register Akun Baru Member
4.4.2.2 Menu Login
Gambar 4.57 Tampilan Front-End Registrasi Login Member
65
4.4.2.3 Menu Home
Gambar 4.58 Tampilan Front-End Menu Home
4.4.2.4 Tampilan List Lapangan
Gambar 4.59 Tampilan Front-End List Lapangan
66
4.4.2.5 Tampilan Jadwal Ketersediaan Lapangan
Gambar 4.60 Tampilan Front-End Jadwal Ketersediaan Lapangan dan Booking
4.4.2.6 Tampilan Informasi Pemesan
Gambar 4.61 Tampilan Front-End Informasi Pemesan
67
4.4.2.7 Tampilan Detail Pemesanan
Gambar 4.62 Tampilan Front-End Detail Pemesanan
4.4.2.8 Tampilan Konfirmasi Pembayaran
Gambar 4.63 Tampilan Front-End Konfirmasi Pembayaran
68
4.4.2.9 Tampilan List Booking
Gambar 4.64 Tampilan Front-End List Booking
4.4.2.10 Menu Tentang Kami
Gambar 4.65 Tampilan Front-End Menu Tentang Kami
69
4.4.2.11 Menu Berita
Gambar 4.66 Tampilan Front-End Menu Berita
4.4.2.12 Menu Kontak
Gambar 4.67 Tampilan Front-End Menu Kontak
70
4.4.3 Back-End
Back-end adalah bagian belakang layar dari sebuah website. Berikut ini
adalah halaman menu front-end aplikasi pemesanan dan penjadwalan lapangan
futsal di Garuda Muda:
4.4.3.1 Menu Login

Menu login digunakan untuk mengakses tugas administrasi, pemilik,
member dan non-member dengan memasukan username dan password.
Gambar 4.68 Tampilan Back-End Menu Login
4.4.3.2 Menu Halaman Utama Admin

Menampilkan halaman utama admin pada sistem pemesanan online futsal.
Gambar 4.69 Tampilan Back-End Halaman Utama Admin
71
Keterangan :
1. Modul User : Digunakan untuk mengatur login pengguna/user.
2. Artikel : Digunakan untuk menambahkan berita informasi.
3. Setting Perusahaan : Digunakan untuk mengatur tampilan web perusahaan.
4. Lapangan : Digunakan untuk menampilkan dan mengatur data
lapangan.
5. Booking : Digunakan untuk menampilkan dan mengatur form
booking.
6. Kas : Digunakan untuk menampilkan dan mengatur form kas.
7. Report : Digunakan untuk menampilkan laporan transaksi
pemesanan futsal dan transaksi laba rugi.
4.4.3.3 Menu User

Menampilkan halaman user pada sistem informasi pemesanan online futsal.
1. Halaman Data User

Menampilkan data user yang berhasil diinputkan.
Gambar 4.70 Tampilan Back-End Halaman Data User
72
Keterangan :
1. Tombol Tambah User : Digunakan untuk menambah data.
2. Kolom Search : Digunakan untuk mencari data.
3. Tombol Merah : Digunakan untuk hapus data.
4. Tombol Biru : Digunakan untuk edit data.
2. Form Tambah Data User

Form tambah baru user digunakan untuk menambah dan mengedit user
yang akan ditampilkan di form data user.
Gambar 4.71 Tampilan Back-End Form Tambah User
Setelah memasukan atau mengubah data user lalu klik tombol submit.
1. Menu Artikel
Menampilkan halaman artikel pada sistem informasi pemesanan online
futsal.
1. Halaman Data Artikel

Menampilkan semua artikel yang berhasil di-submit/ditambahkan.
73
Gambar 4.72 Tampilan Back-End Halaman Data Artikel
2. Form Tambah Artikel

Form tambah artikel digunakan untuk menambah dan meng-edit berita
yang akan ditampilkan diberita informasi front-end.
Gambar 4.73 Tampilan Back-End Form Tambah Artikel
Keterangan :
1. Judul : Digunakan untuk digunakan menambah judul berita.
2. Kolom Teks : Digunakan untuk mengisi konten berita.
74
3. Pilih Kategori : Digunakan untuk memilih berita futsal atau umum.
4. Status : Digunakan untuk edit berita dalam status aktif atau non-
aktif.
Setelah menambah artikel berita baru klik tombol submit.
3. Halaman Kategori Artikel

Menampilkan semua kategori artikel yang berhasil di-submit/ditambahkan.
Gambar 4.74 Tampilan Back-End Halaman Kategori Artikel
Keterangan :
1. Tombol Merah : Digunakan untuk hapus kategori artikel.
2. Tombol Biru : Digunakan untuk edit kategori artikel.
2. Menu Setting Perusahaan

Halaman setting perusahaan digunakan untuk men-setting tampilan
perusahaan yang akan ditampilkan difront-end.
75
Gambar 4.75 Tampilan Back-End Form Setting Perusahaan
Setelah men-setting atau mengubah data lalu klik tombol simpan perubahan.
3. Menu Lapangan
Menampilkan halaman lapangan pada sistem informasi pemesanan online
futsal.
1. Halaman Data Lapangan

Menampilkan hasil data lapangan yang berhasil diinput.
Gambar 4.76 Tampilan Back-End Halaman Data Lapangan
76
Keterangan :
1. Tombol Tambah Lapangan : Digunakan untuk menambah data lapangan.
2. Kolom Search : Digunakan untuk mencari data lapangan.
3. Tombol Merah : Digunakan untuk hapus data lapangan.
4. Tombol Biru : Digunakan untuk edit data lapangan.
2. Form Tambah Lapangan

Form tambah lapangan digunakan untuk menambah dan edit data lapangan
yang akan ditampilkan didata form lapangan.
Gambar 4.77 Tampilan Back-End Form Tambah Lapangan
4. Menu Booking
Menampilkan halaman booking pada sistem informasi pemesanan online
futsal.
1. Halaman Transaksi Booking

Menampilkan semua transaksi booking lapangan.
77
Gambar 4.78 Tampilan Back-End Halaman Transaksi Booking
Keterangan :
1. Data Transaksi Booking : Digunakan untuk menampilkan hasil transaksi
booking lapangan.
2. Kolom Search : Digunakan untuk mencari data lapangan.
3. Tombol Merah : Digunakan untuk hapus data lapangan.
4. Tombol Biru : Digunakan untuk detail transaksi booking.
2. Halaman Detail Booking

Menampilkan detail transaksi booking lapangan.
78
Gambar 4.79 Tampilan Back-End Halaman Detail Booking
3. Halaman Validasi Pembayaran

Menampilkan semua transaksi booking lapangan yang harus divalidasi.
Gambar 4.80 Tampilan Back-End Halaman Validasi Pembayaran
5. Menu Kas
Menampilkan halaman kas pada sistem informasi pemesanan online futsal.
1. Halaman Data Kas

Menampilkan semua transaksi kas masuk/kas keluar dilapangan.
79
Gambar 4.81 Tampilan Back-End Halaman Data Kas
Keterangan :
1. Data Kas : Digunakan untuk menampilkan transaksi kas.
2. Kolom Search : Digunakan untuk mencari data transaksi kas.
3. Tombol Merah : Digunakan untuk hapus data transaksi kas.
4. Tombol Biru : Digunakan untuk edit data transaksi kas.
2. Form Tambah Transaksi Kas Baru

Form tambah transaksi kas digunakan untuk menambah dan edit data
transaksi kas baru yang akan ditampilkan diform data transaksi.
Gambar 4.82 Tampilan Back-End Form Tambah Transaksi Kas
80
6. Menu Report
Menampilkan halaman report pada sistem informasi pemesanan online
futsal.
1. Halaman Report Pembayaran

Menampilkan semua report pembayaran per periode tertentu realisasi
booking dilapangan.
Gambar 4.83 Tampilan Back-End Halaman Report Pembayaran
2. Halaman Report Laba Rugi

Halaman report laba rugi digunakan untuk menampilkan report akumulasi
laba per periode tertentu dari transaksi data kas.
81
Gambar 4.84 Tampilan Back-End Halaman Report Laba Rugi
4.5 Testing Program

Pengujian merupakan tahap penting dalam tahap pengembangan aplikasi
yang dibuat. Tujuan dilakukannya testing adalah untuk mengetahui adanya
kelemahan atau error dari aplikasi yang dibuat. Pengujian ini menggunakan dua
metode black box dan pengujian wawancara aplikasi secara langsung. Pengujian
black box ini yang diuji adalah masukan dan keluarnya tanpa mengetahui apa yang
sesungguhnya terjadi dalam sistem. Dari berbagai masukan yang diberikan apakah
sistem memberikan keluaran yang diharapkan. Pengujian wawancara aplikasi
secara langung yang diuji apakah aplikasi ini sudah sesuai dan sejauh mana aplikasi
ini membantu proses bisnis yang berlangsung pada perusahaan tersebut.
4.5.3 Rencana Pengujian

Pengujian rancang bangun aplikasi pemesanan futsal dan penjadwalan
online berupa data dan masukan dari user.
82
Tabel 4.2 Rencana Pengujian
Requerment Yang Jenis
No Butir Uji
Diuji Pengujian
Pengecekan pengguna yang telah
1 Login pengguna Black Box
terdaftar
Pengisian data user Black Box
Pengujian pengisian Pengisian data setting perusahaan Black Box
2
data Pengisian data lapangan Black Box
Pengisian data kas Black Box
3 Pengujian logout Pengecekan logout pengguna Black Box
4.5.4 Kasus dan Hasil Pengujian

1. Pengujian Login
Pengujian login dilakukan hanya untuk yang sudah terdaftar.
Tabel 4.3 Pengujian Login

Kasus Dan Pengujian Data Normal
Data Masukan Yang Diharapkan Pengamatan Kesimpulan
Menginputkan Tercantum pada Dapat mengisi Diterima
password dan user combo box pengguna login sesusai
name yang terdaftar dan textbox password yang diharapkan
Klik login/tekan Menampilkan halaman Tombol login Diterima
enter utama pengguna dapat berfungi
sesuai yang
diharapkan
Kasus Dan Pengujian Data Yang Salah
Menginputkan Tidak biasa login dan Pengguna tidak Diterima
Pengguna tidak menampilkan pesan biasa login dan
terdaftar peringatan tampil pesan
gagal login
83
Klik login tanpa Tidak biasa login dan Pengguna tidak Diterima
menginputkan menampilkan pesan biasa login dan
password dan user peringatan tampil pesan
name gagal login
2. Pengujian Data User

Berikut adalah tabel pengujian data user.
Tabel 4.4 Tabel Pengujian Data User

Data Masukan Yang Diharapkan Pengamatan Kesimpulan
Klik Button Menampilkan form Button data user Diterima
“Data User” daftar user yang berfungi sesai
sudah di inputkan yang diharapkan
Klik button Menampilkan form Button tambah Diterima
“tambah user” tambah user user berfungsi
sesuai yang
diharapkan
Mengisi textbox Data tersimpan di Button submit Diterima
setiap field klik form data user berfungsi sesuai
“Submit” yang diharapkan
Klik button Pengisian data Button cancel Diterima
“Cancel” dibatalkan berfungsi sesuai
yang diharapkan
Klik button Data terbaharui Button edit Diterima
“edit” berfungsi sesuai
yang diharapkan
Klik button Data akan terhapus Button hapus Diterima
“Hapus” berfungsi sesuai
yang diharapkan
84
Pengisian Muncul pesan Textbox Diterima
textbox user username minimal 4 berfungsi
name dengan karakter dengan baik
kurang dari 4
karakter
Pengisian Muncul pesan Textbox Diterima
textbox kurang password minimal 6 berfungsi
dari 6 karakter karakter dengan baik
Pengisian Muncul pesan harus Textbox Diterima
textbox e-mail memasukan e-mail berfungsi
tidak sesuai dengan benar dengan baik
standart
Pengisian Muncul pesan data Textbox dan Diterima
Textbox dengan harus dimasukan submit
data kosong berfungsi
“submit” dengan baik
85
3. Pengujian Data Setting Perusahaan
Berikut tabel pengujian data setting perusahaan.
Tabel 4.5 Tabel Pengujian Setting Perusahaan

Data Masukan Data Masukan Data Masukan Data Masukan
Klik Button Muncul form Button settting Diterima
“Setting setting perusahaan
Perusahaan” perusahaan berjalan dengan
baik
Mengisi textbox Data tersimpan di Button simpan Diterima
setiap field klik dan terbaharui berfungsi sesuai
“simpan” yang di harapkan
Pengisian textbox muncul pesan Textbox berfungsi Diterima
e- mail tidak harus memasukan dengan baik
sesuai standart e-mail dengan
benar
Pengisian Textbox Muncul pesan Textbox dan Diterima
dengan data data harus submit berfungsi
kosong “submit” dimasukan dengan baik
86
4. Pengujian Data Lapangan
Berikut tabel pengujian data lapangan.
Tabel 4.6 Tabel Pengujian Data Lapangan

Klik Button Menampilkan Button data Diterima
“Data Lapangan” form data lapangan berjalan
lapangan dengan baik
Klik Button Menampilkan Button tambah Diterima
“Tambah form tambah lapangan berjalan
Lapangan” lapangan dengan baik
Mengisi textbox Data tersimpan di Button simpan Diterima
“submit” yang di harapkan
Klik button Pengisian data Button Cancel Diterima
yang diharapkan
Klik button “edit” Data terbaharui Button edit Diterima
berfungsi sesuai
yang diharapkan
Klik button Data akan Button delete Diterima
“Hapus” terhapus berfungsi sesuai
yang diharapkan

Pengisian textbox Muncul pesan Textbox berfungsi Diterima
harga lapangan data harus dengan baik
dengan huruf dimasukan angka
87
dengan data data harus submit berfungsi
kosong “submit” dimasukan dengan baik
5. Pengujian Data Kas

Berikut tabel pengujian data kas.
Tabel 4.7 Tabel Pengujian Data Kas

Klik Button Menampilkan Button data Diterima
“Data Transaksi” form Data transaksi berjalan
transaksi dengan baik
Klik Button Menampilkan Button tambah Diterima
“Tambah form tambah transaksi berjalan
Transaksi” transaksi dengan baik
Mengisi textbox Data tersimpan Button submit Diterima
“Submit” yang diharapkan
Klik button Pengisian data Button cancel Diterima
yang diharapkan
Klik button Data terbaharui Button edit Diterima
“Edit” berfungsi sesuai
yang di harapkan
Klik button Data akan Button hapus Diterima
“Hapus” terhapus berfungsi sesuai
yang di harapkan
88
Pengisian textbox Muncul pesan Textbox berfungsi Diterima
nominal dengan data harus dengan baik
huruf dimasukan angka
dengan data data harus di submit berfungsi
kosong “Submit” masukan dengan baik
6. Pengujian Logout
Berikut tabel pengujian logout.
Tabel 4.8 Tabel Pengujian Logout

Klik Button Menampilkan Button Logout Diterima
“Logout” form Login berjalan dengan
baik
Logout data user Tampil Berfungsi dengan Diterima
konfirmasi error baik
4.5.5 Kesimpulan Hasil Pengujian

Berdasarkan hasil pengujian dengan kasus uji sample, aplikasi secara
fungsional mengeluarkan hasil yang sesuai dengan yang diharapkan.
89
BAB V
PENUTUP
5.1 Kesimpulan
Dari hasil uraian pembahasan pada bab-bab sebelumnya, penulis
menyimpulkan beberapa hal sebagai berikut:
1. Proses pemesanan penyewanan lapangan dan pengelolaan futsal dalam
memberikan informasi jadwal lapangan kepada pelanggan masih
menggunakan cara manual, sehingga pemesanan dan pengelolaan kurang
efektif dan efisien. Maka penulis membuat aplikasi yang mempermudah
pelanggan dalam melihat jadwal lapangan dan pemesanan secara web
online.
2. Pihak pengelola futsal dalam mencatat pembukuan data transaksi masih
menggunakan cara manual. Maka penulis membangunkan aplikasi secara
otomatis dibuat untuk mempermudah pengelola dalam mencatat data
transaksi secara terkomputerisasi dalam web online.
3. Proses rekap transaksi keuangan juga masih menggunakan cara manual
sehingga memakan waktu yang lama dalam melaporkannya. Maka penulis
membuat aplikasi ini untuk mempermudah pemilik/admin dalam
pengelolaan rekap data transaksi dan melihat laporan keuangan secara
otomatis, cepat, dan akurat.
4. Pihak pengelola futsal dalam mengelola pelanggan/member masih secara
manual. Maka penulis membuat aplikasi web online ini untuk
mempermudah pengelola lapangan dalam meregistrasi pelanggan/member
secara otomatis.
90
5.2 Saran
Adapun saran dari hasil penelitian ini diantara lain adalah:
1. Diharapkan pihak pengelola memperdulikan dan memperhatikan
pengembangan aplikasi baru yang sesuai dengan kemajuan teknologi
informasi.
2. Diharapkan kedepannya aplikasi ini dapat dikembangkan diperangkat
mobile (smartphone) sehingga pelanggan dapat mudah memesan dan
melihat jadwal secara cepat.
91
DAFTAR PUSTAKA
Rosa dalam Irmayani & Susyatih. (2017). Pengertian Use case dan activity
diagram
Wahana penerbit C.V Andi Offset. (2018) paling dicari:PHP source code.
Yogyakarta :Andi Offset.
Dharwiyanti,Sri. 2016. Pengantar Unified Modeling Language (UML). Diakses 30
Maret 2020, dari ilmukomputer.com.
HM.Jogiyanto. 2016. Analisa dan Disain sistem informasi pendekatan terstruktur
teori dan praktek aplikasi bisnis. Yogjakarta: Andi Offset.
Irawan, Rio dalam Ijns.Org. "Sistem Informasi Penyewaan Lapangan Futsal."
(2019).
Mulyono, M. Asriady. 2017. Buku Pintar Futsal. Jakarta:Anugrah.Komputindo.
Murya, Yosef. 2017. 41 Script PHP. Jasakom
Pradhitya Titis, Galih Prasetyo Putri Divi dan Priadana Adri. 2017. Sistem
Pemesanan Lapangan Futsal Dengan Fitur Top Up. ISSN: 2527 5836. Vol.2, No.
1 Mei 2017: 53-61. Diambil dari : http://ejournal.uin-
suka.ac.id/saintek/JISKA/article/download/1158/1066
Rahma, Nur Alfian. 2016. Aplikasi Penyewaan Lapangan Futsal Berbasis Web dan
Sms
92
DAFTAR LAMPIRAN
LAMPIRAN A
Lampiran A-1: Surat Penelitian
A-1
Lampiran A-2: Surat Hasil Wawancara Awal
A-2
Lampiran A-3: Hasil Observasi - Surat Kuitansi Manual
A-3
Lampiran A-4: Hasil Observasi - Daftar Jadwal Manual
A-4
Lampiran A-5: Hasil Observasi - Pembukuan Kas Manual
A-5
Lampiran A-6: Hasil Observasi - Lingkungan Lapangan
A-6
LAMPIRAN B
Lampiran B-1: Form Testing - Wawancara Aplikasi
B-1
Lampiran B-2: Form Testing - Bukti Pelaksanaan
B-2
LAMPIRAN C
Lampiran C-1: Coding Form Login Back-End

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=UTF-8">

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport" content="width=device-width,
initial-scale=1">
<title>Login Administrator | Futsal Management

System</title>


<link href="{{
asset("/assets/backend/vendors/bootstrap/dist/css/boots
trap.min.css") }}" rel="stylesheet">

<link href="{{ asset("/assets/backend/vendors/font-
awesome/css/font-awesome.min.css") }}"
rel="stylesheet">

<link
href="https://colorlib.com/polygon/gentelella/css/anima
te.min.css" rel="stylesheet">


<link href="{{
asset("/assets/backend/build/css/custom.min.css") }}"
rel="stylesheet">
</head>
<body class="login">
<div>
<div class="login_wrapper">
<div class="animate form login_form">
<section class="login_content">
C-1
{{ Form::open(array('route' =>
array('user.login'), 'method' => 'post', 'autocomplete'
=> 'false')) }}
<h1>GARUDA MUDA FUTSAL</h1><br><br>
<h2>Administrator Login</h2>
@if(session()->has('response_status'))
<div class="alert
@if(session('response_status') == '1') alert-success
@else alert-danger @endif alert-dismissible fade in"
role="alert">
<button type="button" class="close"
data-dismiss="alert" aria-label="Close"><span aria-
hidden="true">×</span>
</button>
{{ session('response_message') }}
</div>
@endif
<div>
<input type="text" name="username"
class="form-control" placeholder="Username" required=""
/>
</div>
<div>
<input type="password" name="password"
class="form-control" placeholder="Password" required=""
/>
</div>
<div class="form-group">
<button type="submit" class="btn btn-
success" style="width: 100%;" />Login</button>
</div>
{{ Form::close() }}
</section>
</div>
</div>
</div>
</body>
</html>
C-1
Lampiran C-2: Coding Footer Back-End

<footer>
<div class="pull-right">
Copyright by <a
href="https://www.instagram.com/explore/locations/55619
3643/indonesia/ciracas-jawa-barat-indonesia/garuda-
muda-futsal-jlraya-pkp-no38-kelapa-dua-wetan-jak-
tim/?hl=id">Garuda Muda Futsal</a>
</div>
<div class="clearfix"></div>
</footer>

C-2
Lampiran C-3: Coding Header Back-End
<!DOCTYPE html>
<html lang="en">
<head>
charset=UTF-8">
content="IE=edge">
initial-scale=1">
<title>Administrator | Futsal Management

System</title>


<link href="{{
asset("/assets/vendors/bootstrap/dist/css/bootstrap.min
.css") }}" rel="stylesheet">
<link href="{{ asset("/assets/vendors/font-
rel="stylesheet">

<link href="{{
asset("/assets/build/css/custom.min.css") }}"
rel="stylesheet">
</head>
<body class="nav-md">
<div class="container body">
<div class="main_container">
<div class="col-md-3 left_col">
<div class="left_col scroll-view">
<div class="navbar nav_title"
style="border: 0;">
<a href="index.html"
class="site_title"><i class="fa fa-paw"></i>
<span>Gentellela Alela!</span></a>
</div>


C-3
<div class="profile">
<div class="profile_pic">
<img src="{{
asset("assets/images/img.jpg") }}" alt="..."
class="img-circle profile_img">
</div>
<div class="profile_info">
<span>Administrator</span>
<h2>Garuda Muda Futsal</h2>
</div>
</div>

<br />

@include('sidebar')


<div class="sidebar-footer hidden-small">
<a data-toggle="tooltip" data-
placement="top" title="Settings">
<span class="glyphicon glyphicon-cog"
aria-hidden="true"></span>
</a>
placement="top" title="FullScreen">
<span class="glyphicon glyphicon-
fullscreen" aria-hidden="true"></span>
</a>
placement="top" title="Lock">
<span class="glyphicon glyphicon-eye-
close" aria-hidden="true"></span>
</a>
placement="top" title="Logout">
<span class="glyphicon glyphicon-off"
</a>
</div>
</div>
</div>
C-3

@include('topnav')


<div class="right_col" role="main">
<div class="">
<div class="page-title">
<div class="title_left">
<h3>Plain Page</h3>
</div>
</div>
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-
12">
<div class="x_panel">
<div class="x_title">
<h2>Plain Page</h2>
<ul class="nav navbar-right
panel_toolbox">
<li><a class="collapse-link"><i
class="fa fa-chevron-up"></i></a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-
toggle" data-toggle="dropdown" role="button" aria-
expanded="false"><i class="fa fa-wrench"></i></a>
<ul class="dropdown-menu"
role="menu">
<li><a href="#">Settings
1</a>
</li>
<li><a href="#">Settings
2</a>
</li>
</ul>
</li>
<li><a class="close-link"><i
class="fa fa-close"></i></a>
</li>
</ul>
C-3
</div>
<div class="x_content">
Add content to the page ...
</div>
</div>
</div>
</div>
</div>
</div>

@include('footer')
</div>
</div>


<script src="{{
asset("/assets/vendors/jquery/dist/jquery.min.js")
}}"></script>

<script src="{{
asset("/assets/vendors/bootstrap/dist/js/bootstrap.min.
js") }}"></script>

<script src="{{
asset("/assets/vendors/fastclick/lib/fastclick.js")
}}"></script>

<script src="{{
asset("/assets/vendors/nprogress/nprogress.js")
}}"></script>


<script src="{{
asset("/assets/build/js/custom.min.js") }}"></script>
</body>
</html>
C-3
Lampiran C-4: Coding Sidebar Back-End

<div id="sidebar-menu" class="main_menu_side hidden-
print main_menu">
<div class="menu_section">
<h3>Administrator</h3>
<ul class="nav side-menu">
<li><a href="{{ route('dashboard') }}"><i
class="fa fa-laptop"></i>Dashboard</a></li>
@permission('user-*')
<li><a><i class="fa fa-user"></i>User<span
class="fa fa-chevron-down"></span></a>
<ul class="nav child_menu">
<li><a href="{{ route('user.index') }}">Data
User</a></li>
@permission('user-create')
<li><a href="{{ route('user.create')
}}">Tambah User</a></li>
@endpermission
</ul>
</li>
@endpermission
@permission('article-*','category-*')
<li><a><i class="fa fa-file-o"></i> Artikel <span
@permission('article-*')
<li><a href="{{ route('article.index')
}}">Data Artikel</a></li>
@endpermission
@permission('article-create')
<li><a href="{{ route('article.create')
}}">Tambah Artikel</a></li>
@endpermission
@permission('category-*')
<li><a href="{{
route('article_category.index') }}">Kategori
Artikel</a></li>
@endpermission
</ul>
</li>
@endpermission
@permission('setting-edit')
<li><a href="{{ route('setting.index') }}"><i
class="fa fa-cog"></i> Setting Perusahaan </a></li>
@endpermission
C-4
</ul>
</div>
<div class="menu_section">
<h3>Futsal Management</h3>
<ul class="nav side-menu">
<li><a><i class="fa fa-soccer-ball-o"></i>
Lapangan <span class="fa fa-chevron-down"></span></a>
<li><a href="{{ route('pitch.index') }}">Data
Lapangan</a></li>
<li><a href="{{ route('pitch.create')
}}">Tambah Lapangan</a></li>
</ul>
</li>
<li><a><i class="fa fa-sticky-note-
o"></i>Booking<span class="fa fa-chevron-
down"></span></a>
<li><a href="{{ route('booking.index')
}}">Data Transaksi Booking</a></li>
<li><a href="{{ route('payment.index')
}}">Validasi Pembayaran</a></li>
</ul>
</li>
<li><a><i class="fa fa-money"></i>Kas<span
<li><a href="{{ route('cash.index') }}">Data
Transaksi</a></li>
<li><a href="{{ route('cash.create')
}}">Tambah Transaksi</a></li>
</ul>
</li>
<li><a><i class="fa fa-file"></i>Report<span
<li><a href="{{ route('report.payment')
}}">Report Pembayaran</a></li>
<li><a href="{{ route('report.laba')
}}">Report Laba Rugi</a></li>
</ul>
</div>
</div>
C-4
Lampiran C-5: Coding Template Back -End
<!DOCTYPE html>
<html lang="en">
<head>
charset=UTF-8">
content="IE=edge">
initial-scale=1">
<title>{{ $title }} | Futsal Management

System</title>


<link href="{{
asset("/assets/backend/vendors/bootstrap/dist/css/boots
trap.min.css") }}" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-
awesome/4.7.0/css/font-awesome.min.css"
rel="stylesheet">
<link href="{{
asset("/assets/backend/vendors/datatables.net-
fixedheader-bs/css/fixedHeader.bootstrap.min.css") }}"
rel="stylesheet">
<link href="{{
responsive-bs/css/responsive.bootstrap.min.css") }}"
rel="stylesheet">
<link href="{{
asset("/assets/backend/vendors/datatables.net-scroller-
bs/css/scroller.bootstrap.min.css") }}"
rel="stylesheet">
@yield('css')

<link href="{{
asset("/assets/backend/build/css/custom.min.css") }}"
rel="stylesheet">
</head>
C-5
<div class="col-md-3 left_col">
<div class="left_col scroll-view">
<div class="navbar nav_title"
style="border: 0;">
<a href="index.html"
class="site_title"><span><img style="width: 90%;"
src="{{ asset("/assets/front/img/logo-gunungmas.jpg")
}}" alt=""></span></a>
</div>


<div class="profile">
<div class="profile_pic">
<i class="fa fa-user-circle-o fa-4x"
style="margin-left: 15px;margin-top: 25px;"></i>
</div>
<div class="profile_info" style="margin-
bottom: 25px;">
<span>Hello,</span>
<h2>{{ Auth::user()->fullname }}</h2>
</div>
</div>

<br />


@include('backend.sidebar')

<div class="sidebar-footer hidden-small">

</div>
</div>
</div>


<div class="top_nav">
<div class="nav_menu">
<nav class="" role="navigation">
<div class="nav toggle">
<a id="menu_toggle"><i class="fa fa-
bars"></i></a>
</div>
<ul class="nav navbar-nav navbar-right">

<li class="">
<a href="javascript:;" class="user-
profile dropdown-toggle" data-toggle="dropdown" aria-
expanded="false">
<i class="fa fa-user-circle-o fa-
3x"></i> {{ Auth::user()->fullname }}
<span class=" fa fa-angle-
down"></span>
</a>
<ul class="dropdown-menu dropdown-
usermenu pull-right">
<li><a href="javascript:;"><i
class="fa fa-user pull-left"></i> Profile</a></li>
<li><a href="{{
route('user.edit_pass') }}"><i class="fa fa-key pull-
left"></i> Ubah Password</a></li>
<li><a href="{{
route('user.logout') }}"><i class="fa fa-sign-out pull-
left"></i> Log Out</a></li>
</ul>
</li>
C-5
<li role="presentation"
class="dropdown">
<a href="javascript:;"
class="dropdown-toggle info-number" data-
toggle="dropdown" aria-expanded="false">
<i class="fa fa-envelope-o"></i>
<span class="badge bg-
green">5</span>
</a>
<ul id="menu1" class="dropdown-menu
list-unstyled msg_list" role="menu">
<li>
<a>
<span class="image"><img
src="{{ asset("/assets/images/garudamuda.jpg") }}"
alt="Profile Image" /></span>
<span>
<span>Super Admin</span>
<span class="time">1 mins
ago</span>
</span>
<span class="message">
Konfirmasi booking baru...
</span>
</a>
</li>
<li>
<a>
<span>
ago</span>
</span>
Update transaksi kas
sekarang...
</span>
</a>
</li>
<li>
<a>
C-5
<span>
ago</span>
</span>
Perbaharui artikel berita
futsal sekarang...
</span>
</a>
</li>
<li>
<a>
<span>
ago</span>
</span>
Cek akumulasi pembayaran
sekarang...
</span>
</a>
</li>
<li>
<div class="text-center">
<a>
<strong>Lihat Semua
Pemberitahuan</strong>
<i class="fa fa-angle-
right"></i>
</a>
</div>
</li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
C-5


<div class="right_col" role="main">
@yield('content')
</div>

<footer>
<div class="pull-right">
Copyright by <a
href="https://www.instagram.com/explore/locations/55619
3643/indonesia/ciracas-jawa-barat-indonesia/garuda-
muda-futsal-jlraya-pkp-no38-kelapa-dua-wetan-jak-
tim/?hl=id">Garuda Muda Futsal</a>
</div>
</footer>

</div>
</div>

<script src="{{
asset("/assets/backend/vendors/jquery/dist/jquery.min.j
s") }}"></script>

<script src="{{
asset("/assets/backend/vendors/bootstrap/dist/js/bootst
rap.min.js") }}"></script>
<script src="{{
asset("/assets/backend/build/js/custom.min.js")
}}"></script>
<script src="{{
asset("/assets/backend/build/js/routes.js")
}}"></script>
@yield('javascript')
</body>
</html>
C-5
Lampiran C-6: Coding Topnav Back-End
<div class="top_nav">
<div class="nav_menu">
<nav class=""
role="navigation">
<div class="nav
toggle">
<a
id="menu_toggle"><i class="fa fa-bars"></i></a>
</div>
<ul class="nav
navbar-nav navbar-right">
<li class="">
<a
href="javascript:;" class="user-profile dropdown-
toggle" data-toggle="dropdown" aria-expanded="false">
<img
alt="">Super Admin
<span
class=" fa fa-angle-down"></span>
</a>
<ul
class="dropdown-menu dropdown-usermenu pull-right">
<li><a
href="javascript:;"> Profile</a></li>
<li>
<a
href="javascript:;">
<span
class="badge bg-red pull-right">50%</span>
<span>Settings</spa
n>
</a>
</li>
<li><a
href="javascript:;">Help</a></li>
<li><a
href="login.html"><i class="fa fa-sign-out pull-
right"></i>Log Out</a></li>
</ul>
</li>
C-6
<li
role="presentation" class="dropdown">
<a
href="javascript:;" class="dropdown-toggle info-number"
data-toggle="dropdown" aria-expanded="false">
<i
class="fa fa-envelope-o"></i>
<span
class="badge bg-green">5</span>
</a>
<ul
id="menu1" class="dropdown-menu list-unstyled msg_list"
role="menu">
<li>
<a>
<span
class="image"><img src="{{
asset("/assets/images/garudamuda.jpg") }}" alt="Profile
Image" /></span>
<span>
<span class="time">1 mins ago</span>
</span>
<span
class="message">
Konfirmasi booking baru...
</span>
</a>
</li>
<li>
<a>
<span
Image" /></span>
<span>
C-6
</span>
<span
class="message">
Update transaksi kas sekarang...
</span>
</a>
</li>
<li>
<a>
<span
Image" /></span>
<span>
</span>
<span
class="message">
Perbaharui artikel berita futsal sekarang...
</span>
</a>
</li>
<li>
<a>
<span
Image" /></span>
<span>
C-6
</span>
<span
class="message">
Cek
akumulasi pembayaran sekarang...
</span>
</a>
</li>
<li>
<div
class="text-center">
<a>
<strong>Lihat Semua Pemberitahuan/strong>

<i
class="fa fa-angle-right"></i>
</a>
</div>
</li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
C-6
Lampiran C-7: Coding Error 404
<!DOCTYPE html>
<html lang="en">
<head>
charset=UTF-8">
content="IE=edge">
initial-scale=1">
<title>Halaman Tidak Ditemukan</title>


<link href="{{
asset("/assets/vendors/bootstrap/dist/css/bootstrap.min
.css") }}" rel="stylesheet">
<link href="{{ asset("/assets/vendors/font-
rel="stylesheet">

<link href="{{
asset("/assets/build/css/custom.min.css") }}"
rel="stylesheet">
</head>
<div class="col-md-12">
<div class="col-middle">
<div class="text-center text-center">
<h1 class="error-number">404</h1>
<h2>Maaf kami tidak dapat menemukan
halaman ini</h2>
<p>Halaman yang anda cari ini tidak ada
<a href="#">Laporkan ini?</a>
</p>
<div class="mid_center">
<h3>Cari</h3>
C-7
<form>
<div class="col-xs-12 form-group
pull-right top_search">
<div class="input-group">
<input type="text" class="form-
control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-
default" type="button">Lanjutkan!</button>
</span>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>


<script src="{{
asset("/assets/vendors/jquery/dist/jquery.min.js")
}}"></script>

<script src="{{
asset("/assets/vendors/bootstrap/dist/js/bootstrap.min.
js") }}"></script>

<script src="{{
asset("/assets/vendors/fastclick/lib/fastclick.js")
}}"></script>

<script src="{{
asset("/assets/vendors/nprogress/nprogress.js")
}}"></script>

<script src="{{
asset("/assets/build/js/custom.min.js") }}"></script>
</body>
</html>
C-7
Lampiran C-8: Coding Error 503
<!DOCTYPE html>
<html>
<head>
<title>Segera kembali.</title>
<link
href="https://fonts.googleapis.com/css?family=Lato:100"
rel="stylesheet" type="text/css">
<style>
html, body {
height: 100%;
}
body {
margin: 0;
padding: 0;
width: 100%;
color: #B0BEC5;
display: table;
font-weight: 100;
font-family: 'Lato';
}
.container {
text-align: center;
display: table-cell;
vertical-align: middle;
}
.content {
text-align: center;
display: inline-block;
}
.title {
font-size: 72px;
margin-bottom: 40px;
}
</style>
</head>
<body>
<div class="container">
<div class="content">
<div class="title">Segera
kembali.</div>
</div>
</div>
</body>
</html>
C-8
Lampiran C-9: Coding About Front-End
@extends('frontend.template')
@section('css')
@endsection
@section('content')
<div id="heading-breadcrumbs">
<div class="row">
<h1>Tentang Kami</h1>
</div>
<ul class="breadcrumb">
<li><a href="index.html">Home</a>
</li>
<li>Tentang</li>
</ul>
</div>
</div>
</div>
</div>
<div id="content">
<section>
<div class="row">
<div class="heading">
<h2>Tentang @if(count($name) >
0) {{ $name->value }} @endif</h2>
</div>
@if(count($page_about) > 0) {!!
$page_about->value !!} @endif
</div>
</div>
</section>
</div>

</div>

@endsection
@section('javascript')
@endsection
C-9
Lampiran C-10: Coding Form Contact Front-End
@section('css')
@endsection
@section('content')
<div class="row">
<h1>Hubungi Kami</h1>
</div>
</li>
<li>Hubungi Kami</li>
</ul>
</div>
</div>
</div>
</div>
<div id="content">
<div class="container" id="contact">
<section>
<div class="row">
<section>
<h2>Kami di sini siap untuk
membantu Anda</h2>
</div>
<p class="lead">Hubungi petugas
kasir kami yang siap melayani anda selama 24 jam</p>
</section>
</div>
</div>
</section>
<section>
<div class="row">
<div class="box-simple">
<div class="icon">
<i class="fa fa-map-
marker"></i>
C-10
</div>
<h3>Alamat</h3>
<p>@if(count($address) > 0) {{
$address->value }} @endif
<br>@if(count($city) > 0)
{{ $city->value }} @endif @if(count($zipcode) > 0) {{
$zipcode->value }} @endif
<br><strong>@if(count($state) > 0) {{ $state->value }}
@endif</strong>
</p>
</div>

</div>
<div class="icon">
<i class="fa fa-phone"></i>
</div>
<h3>Pusat Panggilan</h3>
<strong>@if(count($phone) > 0)
{{ $phone->value }} @endif</strong>
</div>
</div>
<div class="icon">
<i class="fa fa-
envelope"></i>
</div>
<h3>Dukungan Elektronik</h3>
<p class="text-muted">Kirimkan
pesan ke email kami</p>
<ul class="list-style-none">
<li><strong><a
href="mailto:">@if(count($email) > 0) {{ $email->value
}} @endif</a></strong>
</li>
</ul>
</div>
</div>
C-10
</div>
</section>
<section>
<div class="row text-center">
<h2>Formulir Kontak</h2>
</div>
</div>
<div class="col-md-8 col-md-offset-2">

<form>
<div class="row">
<div class="col-sm-6">
<div class="form-
group">
<label
for="firstname">Nama Depan</label>
<input type="text"
class="form-control" id="firstname">
</div>
</div>
<div class="form-
group">
<label
for="lastname">Nama Belakang</label>
<input type="text"
class="form-control" id="lastname">
</div>
</div>
<div class="form-
group">
<label
for="email">Email</label>
<input type="text"
class="form-control" id="email">
</div>
</div>
C-10
<div class="form-
group">
<label
for="subject">Perihal</label>
<input type="text"
class="form-control" id="subject">
</div>
</div>
<div class="form-
group">
<label
for="message">Pesan</label>
<textarea
id="message" class="form-control"></textarea>
</div>
</div>
<div class="col-sm-12 text-

center">
<button type="submit"
class="btn btn-template-main"><i class="fa fa-envelope-
o"></i>Kirim Pesan</button>
</div>
</div>

</form>
</div>
</div>

</section>
</div>

</div>

<div id="map">
</div>
@endsection
@endsection
C-10
Lampiran C-11: Coding Detail Front-End
@section('css')
<link href="{{
asset("/assets/front/css/owl.carousel.css") }}"
rel="stylesheet">
<link href="{{ asset("/assets/front/css/owl.theme.css")
}}" rel="stylesheet">
<link href="{{
asset("/assets/backend/vendors/bootstrap-
datetimepicker/css/bootstrap-datetimepicker.min.css")
}}" rel="stylesheet">
@endsection
@section('content')
<div class="row">
<h1>{{ $pitch->name }}</h1>
</div>
<li><a href="{{ route('front.home')
}}">Home</a>
</li>
<li><a href="portfolio-
2.html">Lapangan</a>
</li>
<li>{{ $pitch->name }}</li>
</ul>
</div>
</div>
</div>
</div>
<div id="content">
<section>
<div class="project owl-carousel">
<div class="item">
C-11
<img src="{{
asset("/assets/front/img/main-slider1.jpg") }}" alt=""
class="img-responsive">
</div>
</div>

</section>
<section>
<div class="row portfolio-project">
<h3>Deskripsi Lapangan</h3>
</div>
{!! $pitch->description !!}
</div>
</div>
</section>
{{ Form::open(array('route' =>
array('front.checkout'), 'method' => 'post', 'id' =>
'formcheckout', 'autocomplete' => 'false')) }}
<section>
<h3>Jadwal Ketersediaan</h3>
</div>
<div class="row">
<div class="col-xs-6 col-sm-6
col-md-6 col-lg-6">
<div class="row"
align="center" style="margin-bottom:15px;">
<div class="input-
group" style="width:200px;">
<input type="text"
id="date" class="form-control" value="{{ date("d-m-Y")
}}">
<div class="input-
group-addon"><i class="fa fa-calendar"></i></div>
</div>
</div>
<table class="table table-
stripped table-bordered" id="table-timesheet">
C-11
<thead>
<tr>
<th
class="text-center">Waktu</th>
<th
class="text-center">Harga</th>
<th
class="text-center"></th>
</tr>
</thead>
</table>
</div>
col-md-6 col-lg-6">
<div class="row"
align="center" style="margin-bottom:15px;">
<h5>List Booking</h5>
</div>
<table class="table table-
stripped table-bordered" id="table-checkout">
<thead>
<tr>
<th
class="text-center" style="width:150px">Tanggal</th>
<th
class="text-center">Waktu</th>
<th
class="text-center">Harga</th>
<th
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</div>
</div>
</div>
</section>
<section>
<h3>Informasi Pemesan</h3>
C-11
</div>
<div class="row">
col-md-7 col-lg-7">
<input type="hidden"
name="pitch_id" value="{{ $pitch->id }}"/>
<span class="control-
label">Nama Lengkap</span>
<input type="text"
name="name" placeholder="Nama Lengkap" class="form-
control" required/>
</div>
<span class="control-
label">No Telepon/HP</span>
<input type="text"
name="phone" placeholder="No Telepon / HP" class="form-
control" required/>
</div>
<button type="submit"
class="btn btn-template-main"><i class="fa fa-
cart"></i> Konfirmasi Booking</button>
</div>
</div>
col-md-5 col-lg-5">
<div class="table-
responsive">
<table class="table">
<tbody>
<tr
class="total">
<td
style="font-size:20px;">Total</td>
<th
style="font-size:20px;">Rp <span class="input-money"
id="label-grand-total">0</span></th>
</tr>
</tbody>
</table>
</div>
</div>
</div>
C-11
</div>
</div>
</section>
{{ Form::close() }}
</div>

</div>

@endsection
<script src="{{
asset("/assets/front/js/owl.carousel.min.js")
}}"></script>
<script src="{{
asset("/assets/backend/vendors/datatables.net/js/jquery
.dataTables.min.js") }}"></script>
<script src="{{
bs/js/dataTables.bootstrap.min.js") }}"></script>
<script src="{{
asset("/assets/backend/vendors/moment/moment.min.js")}}
"></script>
<script src="{{
asset("/assets/backend/vendors/moment/moment.min.js")}}
"></script>
<script src="{{
datetimepicker/js/bootstrap-datetimepicker.min.js")
}}"></script>
<script src="{{
asset("/assets/backend/build/js/autoNumeric.min.js")}}"
></script>
<script src="{{
asset("/assets/backend/build/js/autoNumeric.min.js")}}"
></script>
<script src="{{
asset("/assets/backend/vendors/parsleyjs/dist/parsley.m
in.js")}}"></script>
<script type="text/javascript">
var datatable = $('#table-timesheet').DataTable();
function loadData(datenow){
datatable = $('#table-timesheet').DataTable({
processing: true,
C-11
serverSide: true,
searching: false,
bPaginate: false,
bLengthChange: false,
bInfo: false,
bDestroy: true,
ajax: {
url: "/webfutsal/pitch/timesheet/{{
$pitch->id }}/date/"+datenow,
data: function (d) {
/*d.time_number = [];
$('#table-
checkout').find('tbody').find('tr').each(function(index
, el) {
if($(this).find('td').eq(0).text() ==
$('#date').val()){
d.time_number.push($(this).find('td').eq(1).text());
}
});*/
}
},
columns: [
{data: 'time_number', name:
'time_number', className: 'text-center'},
{
data: 'price',
name: 'price',
className: 'text-center',
render: function ( data, type, row
) {
var html = "Rp <span
class=''>"+row.price+"</span>";
return html;
}
},
{
data: 'user_id',
name: 'action',
orderable: false,
searchable: false,
className: 'text-center',
render: function ( data, type, row
) {
var ketemu = false;
C-11
$('#table-
checkout').find('tbody').find('tr').each(function(index
, el) {
//console.log($(this).find('td').eq(0).text()+" -
"+$('#date').val()+" -
"+$(this).find('td').eq(1).text()+" -
"+row.time_number);
if($(this).find('td').eq(0).text() == $('#date').val()
&& $(this).find('td').eq(1).text() == row.time_number){
ketemu = true;
}
});
var html = row.user_id;
if(ketemu){
html = "<button class='btn
btn-success btn-xs btn-add' disabled='disabled'><i
class='fa fa-plus-circle'></i> Pesan</button>";
}
return html;
}
}
],
initComplete: function( settings, json ) {
}
});
}
$(function(){
//$('#formcheckout').parsley();
loadData($('#date').val());
$('.input-money').autoNumeric('init', { mDec:
'0', unSetOnSubmit: true});
$('#date').datetimepicker({ format : 'DD-MM-
YYYY', minDate: "{{ date('Y-m-d') }}" });
$("#date").on("dp.change", function (e) {
datenow = $('#date').val();
});
$('#table-checkout').DataTable({
searching: false,
bPaginate: false,
bInfo: false
});
C-11
$('#table-timesheet').on('click','.btn-add',
function(e){
e.preventDefault();
$('#table-checkout').DataTable().destroy();
var content = "<tr>"+
"<td class='text-
center'><input type='hidden' name='date[]'
value='"+$('#date').val()+"'/>"+$('#date').val()+"</td>
"+
"<td class='text-
center'><input type='hidden' name='time_number[]'
value='"+$(this).closest('tr').find('td').eq(0).text()+
"'/>"+$(this).closest('tr').find('td').eq(0).text()+"</
td>"+
"<td class='text-center'>Rp
<span class='input-
money'>"+$(this).closest('tr').find('td').eq(1).find('s
pan').text().replace(',','')+"</span></td>"+
"<td class='text-
center'><button class='btn btn-xs btn-danger btn-
delete'><i class='fa fa-times-circle'></i>
Hapus</button></td>"+
"</tr>";
$('#table-
checkout').find('tbody').append(content);
$('#table-
checkout').find('tbody').find('tr').last().find('.input
-money').autoNumeric('init', { mDec: '0',
unSetOnSubmit: true});
searching: false,
bPaginate: false,
bInfo: false
});
calculate();
});
$('#table-checkout').on('click','.btn-
delete',function(e){
e.preventDefault();
$('#table-checkout').DataTable().destroy();
$(this).closest('tr').remove();
searching: false,
bPaginate: false,
C-11
bInfo: false
});
calculate();
});
});
function calculate(){
var total = 0;
$('#table-
checkout').find('tbody').find('.input-
money').each(function(index, el) {
total = parseFloat(total) +
parseFloat($(this).autoNumeric('get'));
});
$('#label-grand-
total').autoNumeric('set',total);
}
</script>
@endsection
C-11
Lampiran C-12: Coding Footer Front-End
<footer id="footer">
<div class="col-md-3 col-sm-6">
<h4>Tentang Kami</h4>
<p>Kami Melayani Penyewaan Lapangan

Futsal, Yang Terpercaya Dan Nyaman Tempatnya</p>
<hr>

</form>
<hr class="hidden-md hidden-lg

hidden-sm">
</div>

<h4>Berita</h4>
<div class="blog-entries">
@foreach($last_articles as
$article)
<div class="item same-height-
row clearfix">
<div class="name same-
height-always">
<h5><a href="#">{{
$article->title }}</a></h5>
</div>
C-12
</div>
@endforeach
</div>
<hr class="hidden-md hidden-lg">
</div>

<h4>Hubungi Kami</h4>
<p><strong>@if(count($name) > 0) {{
$name->value }} @endif</strong>
<br>@if(count($address) > 0) {{
$address->value }} @endif
<br>@if(count($city) > 0) {{
$city->value }} @endif @if(count($zipcode) > 0) {{
$zipcode->value }} @endif
<strong>@if(count($state) > 0)
{{ $state->value }} @endif</strong>
</p>
<a href="{{ route('front.contact')

}}" class="btn btn-small btn-template-main">Ke Halaman
Kontak</a>
<hr class="hidden-md hidden-lg

hidden-sm">
</div>

<h4>Member Baru</h4>
</div>

</div>
</footer>
<div id="copyright">
<p class="pull-left">© {{
date("Y") }}. @if(count($name) > 0) {{ $name->value }}
@endif</p>
</div>
</div>
</div>
C-12
Lampiran C-13: Coding Header Front-End
<div id="top">
<div class="row">
<div class="col-xs-5 contact">
<p class="hidden-sm hidden-
xs">Hubungi kami di: @if(count($phone) > 0) {{ $phone-
>value }} @endif @if(count($hp) > 0) atau {{ $email-
>value }} @endif</p>
<p class="hidden-md hidden-
lg"><a href="#" data-animate-hover="pulse"><i class="fa
fa-phone"></i></a> <a href="#" data-animate-
hover="pulse"><i class="fa fa-envelope"></i></a>
</p>
</div>
<div class="col-xs-7">
<div class="social">
<a
href="@if(count($facebook) > 0) {{ $facebook->value }}
@endif" class="external facebook" data-animate-
hover="pulse"><i class="fa fa-facebook"></i></a>
<a
href="@if(count($instagram) > 0) {{ $instagram->value
}} @endif" class="external instagram" data-animate-
hover="pulse"><i class="fa fa-instagram"></i></a>
<a
href="@if(count($twitter) > 0) {{ $twitter->value }}
@endif" class="external twitter" data-animate-
hover="pulse"><i class="fa fa-twitter"></i></a>
<a
href="@if(count($email) > 0) {{ $email->value }}
@endif" class="email" data-animate-hover="pulse"><i
class="fa fa-envelope"></i></a>
</div>
<div class="login">
@if(!Auth::check() or
Auth::user()->role != 'member')
<a href="{{
route('front.login') }}"><i class="fa fa-sign-in"></i>
<span class="hidden-xs text-uppercase">Login</span></a>
<a href="{{
route('front.register') }}"><i class="fa fa-user"></i>
<span class="hidden-xs text-
uppercase">Daftar</span></a>
@endif
C-13
@if(Auth::check() and
Auth::user()->role == 'member')
<a href="{{
route('front.order') }}"><i class="fa fa-user"></i>
<span class="hidden-xs text-uppercase">{{ Auth::user()-
>username }}</span></a>
<a href="{{
route('front.logout') }}"><i class="fa fa-sign-in"></i>
<span class="hidden-xs text-
uppercase">Logout</span></a>
@endif
</div>
</div>
</div>
</div>
</div>
C-13
Lampiran C-14: Coding Form Home Front-End
@section('css')
@endsection
@section('content')
<section>
<div class="home-carousel">
<div class="dark-mask"></div>
<div class="homepage owl-carousel">
<div class="item">
<div class="row">
<img class="img-responsive"
src="{{ asset("/assets/front/img/template-easy-
code.png") }}" alt="">
</div>
<h1>Lapangan
Berkualitas</h1>
<ul class="list-style-
none">
<li>Rumput
sintetis</li>
<li>Nyaman untuk
bermain</li>
</ul>
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-sm-5 right">
<h1>Booking Mudah</h1>
<ul class="list-style-
none">
<li>Kapan pun dan
Dimana pun</li>
<li>Anda bisa booking
lapangan</li>
</ul>
</div>
C-14
src="{{ asset("/assets/front/img/template-easy-
customize.png") }}" alt="">
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-sm-5 right">
<p>
<imgsrc="{{
asset("/assets/front/img/logo.png") }}" alt="">
</p>
<h1>Garuda Muda Futsal</h1>
<p>kepuasan anda adalah
kebanggan kami
<br
/>www.garudamudafutsal.com</p>
</div>
src="{{ asset("/assets/front/img/template-
homepage.png")}}" alt="">
</div>
</div>
</div>
</div>

</div>
</div>


</section>
<section class="bar background-white no-mb">

<div class="heading text-center">
<h2>Lapangan Kami</h2>
</div>
<div class="row">
@foreach($pitches as $pitch)
<div class="box-image-text blog">
C-14
<div class="top">
<div class="image">
<img src="{{
asset("/assets/front/img/portfolio-1.jpg")}}" alt=""
class="img-responsive">
</div>
</div>
<div class="content">
<h4><a href="blog-
post.html">{{ $pitch->name }}</a></h4>
<h4>Rp {{
number_format(floatval($pitch->price), 2) }}/jam</h4>
<p class="read-more"><a
href="{{ route('front.detail',$pitch->id) }}"
class="btn btn-template-main">Lihat Jadwal</a>
</p>
</div>
</div>

</div>
@endforeach
</div>
</div>
</div>
</section>

<section class="bar background-gray no-mb">

<div class="row">
<ul class="owl-carousel customers">
<li class="item">
<img src="{{
asset("/assets/front/img/1.JPG")}}" alt="" class="img-
responsive">
</li>
<li class="item">
<img src="{{
responsive">
</li>
C-14
<li class="item">
<img src="{{
responsive">
</li>
<li class="item">
<img src="{{
responsive">
</li>
<li class="item">
<img src="{{
responsive">
</li>
<li class="item">
<img src="{{
responsive">
</li>
</ul>

</div>
</div>
</div>
</section>
@endsection
script src="{{
asset("/assets/front/js/owl.carousel.min.js")
}}"></script>
@endsection
C-14
Lampiran C-15: Coding Form Login Front-End
@section('css')
@endsection
@section('content')
<div class="row">
<h1>Login Member</h1>
</div>
<li><a
href="index.html">Home</a>
</li>
<li>Login</li>
</ul>
</div>
</div>
</div>
</div>
<div id="content">
<div class="row">
<div class="box">
<h2 class="text-
uppercase">Login</h2>
<p class="lead">Sudah
terdaftar sebagai member?</p>
<p class="text-
muted">Silahkan login halaman member terlebih dahulu
untuk bisa melakukan proses booking</p>
<hr>
{{ Form::open(array('route'
=> array('front.login_post'), 'method' => 'post', 'id'
C-15
=> 'formuser', 'class' => '', 'autocomplete' =>
'false')) }}
<div class="form-
group">
<label
for="username">Username</label>
<input type="text"
class="form-control" name="username">
</div>
<div class="form-
group">
<label
for="password">Password</label>
<input
type="password" class="form-control" name="password">
</div>
<div class="text-
center">
<button
type="submit" class="btn btn-template-main"><i
class="fa fa-sign-in"></i> Log in</button>
</div>
{{ Form::close() }}
</div>
</div>
</div>

</div>
</div>

@endsection
@endsection
C-15
Lampiran C-16: Coding Form News Front-End
@section('css')
@endsection
@section('content')
<div class="row">
<h1>Berita</h1>
</div>
</li>
<li>Berita</li>
</ul>
</div>
</div>
</div>
</div>
<div id="content">
<div class="row">

</div>
</div>

@endsection
@endsection
C-16
Lampiran C-17: Coding Form Order Front-End
@section('css')
@endsection
@section('content')
<div class="row">
<h1>{{ $title }}</h1>
</div>
<li><a href="#">Home</a>
</li>
<li>{{ $title }}</li>
</ul>
</div>
</div>
</div>
</div>
<div id="content">
<div class="row">
<div class="col-md-12"
id="customer-orders">
<div class="box">
<div class="table-
responsive">
<table class="table
table-hover">
<thead>
<tr>
C-17
<th
class="text-center">No. Booking</th>
<th
class="text-center">Nama</th>
<th
class="text-center">Telp</th>
<th
class="text-center">Total Jam</th>
<th
class="text-center">Total Harga</th>
<th
class="text-center">Tgl Booking</th>
<th
class="text-center">Status</th>
<th
</tr>
</thead>
<tbody>
@foreach($bookings as $booking)
<tr>
<td
class="text-center">{{ $booking->notrans }}</td>
<td
class="text-center">{{ $booking->name }}</td>
<td
class="text-center">{{ $booking->phone }}</td>
<td
class="text-center">{{ $booking->time_count }} jam</td>
<td
class="text-right">Rp {{ number_format($booking->price)
}}</td>
<td
class="text-center">{{ date("d F
H:i",strtotime($booking->created_at)) }}</td>
<td
class="text-center">@if($booking->total_payment >=
$booking->price) <span class="label label-
success">Lunas</span> @else <span class="label label-
warning">Belum Lunas</span> @endif</td>
<td
class="text-center"><a href="{{
route('front.detail_order',$booking->id) }}" class="btn
btn-template-main"><i class="fa fa-info"></i>
Detail</a></td>
C-17
</tr>
@endforeach
</tbody>
</table>
{{ $bookings->links()
}}
</div>

</div>

</div>
</div>
</div>
</div>

@endsection
@endsection
C-17
Lampiran C-18: Coding Form Order_Detail Front-End
@section('css')
<link href="{{
datepicker/css/bootstrap-datepicker.min.css") }}"
rel="stylesheet">
@endsection
@section('content')

<div class="row">
<h1>Order: {{ $booking->notrans
}}</h1>
</div>
<li><a href="{{
route('front.home') }}">Home</a>
</li>
<li><a href="customer-
orders.html">Booking Saya</a>
</li>
<li>Detail</li>
</ul>
</div>
</div>
</div>
</div>
<div id="content">
<div class="row">
C-18
<div class="col-md-6 clearfix"
id="customer-order">
<div class="box">
<div class="row addresses">
<h3 class="text-
uppercase">Informasi Booking</h3>
<p>{{ $booking-
>name }}
<br><i
class="fa fa-phone"></i> {{ $booking->phone }}</p>
</div>
</div>
<div class="table-
responsive">
<thead>
<tr>
<th>Tanggal</th>
<th>Waktu</th>
<th>Harga</th>
</tr>
</thead>
<tbody>
@foreach($booking_detail as $detail)
<tr>
<td>{{
date("d F Y",strtotime($detail->date)) }}</td>
<td>@if($detail->time_number<10)0{{ $detail-
>time_number }}@else{{ $detail->time_number
}}@endif:00</td>
<td>Rp
{{ number_format($detail->price) }}</td>
</tr>
@endforeach
</tbody>
<tfoot>
<tr>
C-18
<th
colspan="2" class="text-right">Total</th>
<th>Rp {{
number_format($booking_total) }}</th>
</tr>
</tfoot>
</table>
</div>

<a class="btn btn-template-
main" href="{{ route('front.order') }}">Kembali Ke List
Booking</a>
</div>

</div>


<div class="col-md-1 clearfix"

id="customer-order">
</div>

</div>

</div>

</div>
</div>

@endsection
C-18
Lampiran C-19: Coding Form Register Front-End
@section('css')
@endsection
@section('content')
<div class="row">
<h1>Register Member</h1>
</div>
<li><a
href="index.html">Home</a>
</li>
<li>Register</li>
</ul>
</div>
</div>
</div>
</div>
<div id="content">
<div class="row">
<div class="box">
<h2 class="text-
uppercase">Akun baru</h2>
<p class="lead">Belum
terdaftar sebagai member?</p>
<p>Dengan mendaftar sebagai
member, anda akan mendapatkan banyak keuntungan ketika
melakukan booking lapangan futsal </p>
<hr>
{{ Form::open(array('route'
=> array('front.register_post'), 'method' => 'post',
'id' => 'formuser', 'class' => '', 'autocomplete' =>
'false')) }}
C-19
<div class="form-
group">
<label for="name-
login">Nama Lengkap</label>
<input type="text"
name="fullname" class="form-control" required>
</div>
<div class="form-
group">
<label for="name-
login">Username</label>
<input type="text"
name="username" class="form-control" required>
</div>
<div class="form-
group">
<label for="email-
login">Email</label>
<input type="email"
name="email" class="form-control" required>
</div>
<div class="form-
group">
<label
for="password-login">Password</label>
<input
type="password" name="password" class="form-control">
</div>
<div class="form-
group">
<label
for="password-login">Konfirmasi Password</label>
<input
type="password" name="conpassword" class="form-control"
>
</div>
<div class="text-
center">
<button
type="submit" class="btn btn-template-main"><i
class="fa fa-user-md"></i> Register</button>
</div>
{{ Form::close() }}
</div>
</div>
C-19
</div>

</div>
</div>

@endsection
@endsection
C-19
Lampiran C-20: Coding Template Front-End
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="robots" content="all,follow">
<meta name="googlebot"
content="index,follow,snippet,archive">
initial-scale=1">
<title>{{ $title }} | @if(count($name) > 0) {{

$name->value }} @endif</title>
<meta name="keywords" content="">

<link
href='http://fonts.googleapis.com/css?family=Roboto:400
,100,100italic,300,300italic,500,700,800'
rel='stylesheet' type='text/css'>


<link rel="stylesheet"
href="http://maxcdn.bootstrapcdn.com/font-
awesome/4.3.0/css/font-awesome.min.css">
<link rel="stylesheet"
href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/cs
s/bootstrap.min.css">


<link href="{{
asset("/assets/front/css/animate.css") }}"
rel="stylesheet">

<link href="{{
asset("/assets/front/css/style.default.css") }}"
rel="stylesheet" id="theme-stylesheet">


<link href="{{
asset("/assets/front/css/custom.css") }}"
rel="stylesheet">


C-20



<link rel="shortcut icon" href="{{
asset("/assets/front/img/favicon.ico")}}"
type="image/x-icon" />
<link rel="apple-touch-icon" href="{{
asset("/assets/front/img/apple-touch-icon.png") }}" />
<link rel="apple-touch-icon" sizes="57x57" href="{{
asset("/assets/front/img/apple-touch-icon-57x57.png")
}}" />
}}" />
}}" />
<link rel="apple-touch-icon" sizes="114x114"
href="{{ asset("/assets/front/img/apple-touch-icon-
114x114.png") }}" />
120x120.png") }}" />
144x144.png") }}" />
152x152.png") }}" />

<link href="{{
asset("/assets/front/css/owl.carousel.css")}}"
rel="stylesheet">
<link href="{{
asset("/assets/front/css/owl.theme.css")}}"
rel="stylesheet">
@yield('css')
C-20
</head>
<body>
<div id="all">
@include('frontend.header')
@yield('content')
@include('frontend.footer')
</div>

<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0
/jquery.min.js"></script>
<script>
window.jQuery || document.write('<script
src="js/jquery-1.11.0.min.js"><\/script>')
</script>
<script
src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/
bootstrap.min.js"></script>
<script src="{{
asset("/assets/front/js/jquery.cookie.js")
}}"></script>
<script src="{{
asset("/assets/front/js/waypoints.min.js")
}}"></script>
<script src="{{
asset("/assets/front/js/jquery.counterup.min.js")
}}"></script>
<script src="{{
asset("/assets/front/js/jquery.parallax-1.1.3.js")
}}"></script>
<script src="{{ asset("/assets/front/js/front.js")
}}"></script>
@yield('javascript')
</body>
</html>
C-20

Skripsi Rancang Bangun Aplikasi Pemesanan Dan Penjadwalan Lapangan Futsal Online Di Garuda Futsal

Diunggah oleh

Informasi Dokumen

Judul Asli

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

Skripsi Rancang Bangun Aplikasi Pemesanan Dan Penjadwalan Lapangan Futsal Online Di Garuda Futsal

Diunggah oleh

Hak Cipta:

Format Tersedia

SKRIPSI

RANCANG BANGUN APLIKASI PEMESANAN DAN

PROGRAM STUDI TEKNIK INFORMATIKA

Nama : Fitriyanto Dwi Prasetyo

RANCANG BANGUN APLIKASI PEMESANAN DAN

Jakarta, 29 Agustus 2021

(Dr. Ir. H. Suryadi, S.T., M.T.) (Aji Nurrohman, S.Kom., M.M.S.I)

LEMBAR PERSETUJUAN MENGIKUTI SIDANG SKRIPSI

RANCANG BANGUN APLIKASI PEMESANAN DAN

FITRIYANTO DWI PRASETYO

Telah memenuhi syarat untuk mengikuti Sidang Skripsi

Jakarta, 31 Juli 2021 Jakarta, 02 Agustus 2021

(Dannie Febrianto, S.Kom., M.M.S.I) (Aji Nurrohman, S.Kom., M.M.S.I)

FITRIYANTO DWI PRASETYO

RANCANG BANGUN APLIKASI PEMESANAN DAN

Dapat diterima sebagai salah satu syarat untuk mendapatkan gelar:

Dannie Febrianto, S.Kom., M.M.S.I ………………………

Aji Nurrohman, S.Kom., M.M.S.I ………………………

Dewan Sidang Penguji :

Wibisono, S.Kom., M.M ………………………

Aji Nurrohman, S.Kom., M.M.S.I ………………………

Dannie Febrianto, S.Kom., M.M.S.I ………………………

Yang bertanda tangan dibawah ini:

Nama : Fitriyanto Dwi Prasetyo

Dengan ini menyatakan bahwa Skripsi dengan judul:

RANCANG BANGUN APLIKASI PEMESANAN DAN

Jakarta, 29 Agustus 2021

(Fitriyanto Dwi Prasetyo)

RANCANG BANGUN APLIKASI PEMESANAN DAN

Demikian pernyataan ini saya buat dengan sebenarnya.

(Fitriyanto Dwi Prasetyo)

Pada kesempatan ini, penulis menyampaikan rasa terima kasih yang

Pada kesempatan ini penulis juga menyampaikan ucapan terima kasih

Semoga Allah SWT memberikan balasan yang berlipat ganda kepada

Jakarta, 30 Juli 2021

Oleh: Fitriyanto Dwi Prasetyo

By: Fitriyanto Dwi Prasetyo

Keywords: PHP, MySQL, Framework Laravel, Online, Ordering and Scheduling

BAB I PENDAHULUAN .........................................................................1

BAB II TINJAUAN PUSTAKA.................................................................4

BAB III METODOLOGI PENELITIAN......................................................27

BAB IV ANALISA DAN PEMBAHASAN .................................................35

BAB V PENUTUP ....................................................................................90

1.1 Latar Belakang

1.2 Rumusan Masalah

1.3 Batasan Masalah

1.4 Tujuan dan Manfaat Penelitian

1.5 Sistematika Penulisan

BAB II TINJAUAN PUSTAKA

BAB III METODOLOGI PENELITIAN

BAB IV ANALISIS DAN PEMBAHASAN

BAB V KESIMPULAN DAN SARAN

Dalam pengerjaan penelitian ini, penulis menggunakan referensi dari

2.1 Tinjauan Terdahulu

No Judul Penelitian Kesimpulan Penelitian Metode Penelitian Perbedaan Penelitian

Dihasilkan suatu sistem web online

No Judul Penelitian Kesimpulan Penelitian Metode Penelitian Perbedaan Penelitian

1. Penyewa dapat mengetahui informasi

No Judul Penelitian Kesimpulan Penelitian Metode Penelitian Perbedaan Penelitian

Perangkat lunak Sistem Informasi

No Judul Penelitian Kesimpulan Penelitian Metode Penelitian Perbedaan Penelitian

No Judul Penelitian Kesimpulan Penelitian Metode Penelitian Perbedaan Penelitian

2.2 Definisi Sistem