bab iv rancangan sistem dan program usulan fileadmin dapat melakukan pengolahan data master...
Post on 31-May-2019
219 Views
Preview:
TRANSCRIPT
22
BAB IV
RANCANGAN SISTEM DAN PROGRAM USULAN
4.1. Analisa Kebutuhan Software
Analisa pada kebutuhan software merupakan langkah awal dalam menentukan
gambaran perangkat yang akan dihasilkan.
4.1.1. Tahapan Analisa
Sistem Informasi Penyewaan Lapangan Futsal Berbasis Web yang dimana
petugas berperan sebagai admin dan user untuk melakukan pengolahan data
penyewaan seperti pengolahan data penyewa, penyewaan lapangan, dan transaksi
penyewaan. Berikuit ini merupakan analisa kebutuhan dari sistem informasi
penyewaan lapangan futsal berbasis web diusulkan sebagai berikut:
1. Halaman User Pengunjung :
A.1. Pengunjung melihat halaman pengunjung pada sistem aplikasi
penyewaan lapangan futsal.
A.2. Pengunjung melihat tentang futsal.
A.3. Pengunjung melihat lokasi futsal berada.
A.4. Pengunjung dapat login jika sudah melakukan registrasi.
2. Halaman User Penyewa :
B.1. Penyewa dapat melakukan login.
B.2. Penyewa dapat melakukan pengolahan profil penyewa.
23
B.3. Penyewa dapat melakukan pemesanan lapangan.
B.4. Penyewa dapat melihat riwayat pemesanan lapangan.
B.5. Penyewa dapat melakukan pengiriman bukti pemesanan dan upload bukti
transfer pembayaran.
3. Halaman Administrator :
C.1. Admin dapat melihat halaman Utama, bahwa login berhasil.
C.2. Admin dapat melakukan pengolahan banner.
C.3. Admin dapat melakukan penambahan atau penghapusan foto.
C.4. Admin dapat melakukan pengolahan data tipe lapangan.
C.5. Admin dapat melakukan pengolahan data master pemeriksa.
C.6.Admin dapat melakukan pengolahan profil admin .
24
4.1.2. Use Case Diagram
Use case diagram digunakan untuk menggambarkan secara ringkas siapa
yang telah menggunakan sistem dan apa saja yang bisa dilakukannya.
1. Use Case Diagram Halaman Pengunjung
Sumber: (Hasil Penelitian, 2018)
Gambar IV.1.
Use Case Diagram Pengunjung
Table IV.1
Deskripsi Use Case Diagram Halaman Pengunjung
Use Case Name Halaman pengunjung
Requirements A1-A4
Goal pengunjung dapat melihat menu yang
berada didalam website
Pre-Condition pengunjung menggunakan browser
untuk melihat halaman pengunjung
pada sistem penyewaan online.
25
Post-Condition pengunjung akan melakukan
penyewaan lapangan futsal secara
online dengan melakukan registrasi
terlebuh dahulu, maka pengunjung
dapat login dan dapat melakukan
penyewaan.
Failed and Condition pengunjung tidak dapat melihat menu
yang berada didalam website.
Primary Actor Pengunjung
Main Flow 1. Pengunjung dapat melihat
halaman web.
2. Pengunjung dapat melihat
tentang kami
3. Pengunjung dapatb melihat
hubungi kami
4. Pengunjung dapat registrasi
dan melakukan login untuk
masuk ke halaman penyewa.
Invariant -
Sumber: (Hasil Penelitian, 2018)
26
2. Use Case Diagram Penyewa
Sumber: (Hasil Penelitian, 2018)
Gambar IV.2.
Use Case Diagram Penyewa
Table IV.2.
Deskripsi Use Case Diagram Halaman Penyewa
Use Case Name Halaman penyewa
Requirements B1-B4
Goal Penyewa akan melakukan penyewaan
dengan cara online melalui website
dengan melakukan login.
Pre-Condition pengunjung menggunakan browser
untuk melihat halaman sistem
penyewaan online.
Post-Condition pengunjung akan melakukan
penyewaan lapangan futsal secara
27
online
Failed and Condition pengunjung membatalkan sewa secara
online.
Primary Actor Penyewa
Main Flow 1. Penyewaa melihat halaman
web.
2. Penyewa melakukan login
untuk masuk ke halaman
utama.
3. Penyewa mengisi form profil.
4. Penyewa melakukan pengisian
form penyewaan.
5. Penyewa dapat melihat serta
mencetak riwayat penyewaan.
6. Penyewa mengunggah bukti
transfer dan memasukan kode
sewa..
Invariant -
Sumber: (Hasil Penelitian, 2018)
28
3. Use Case Diagram Admin
Sumber: (Hasil Penelitian, 2018)
Gambar IV.3.
Use Case Diagram Halaman Admin
uc use case diagram sistem informasi penyewaan lapangan
Use Case Diagram Admin
Login
Is_superuser
halaman
utama
Mengelola
Banner
Mengelola Tex
Banner
Mengelola
Tipe Lapangan
Mengelola
Profil
Mengelola
Master
Pemeriksa
User
Logout
«include»
«include»
«include»
«include»
«include»
«include»
29
Table IV.3.
Deskripsi Use Case Diagram Admin Melakukan Login
Use Case Name Login
Requirements C1
Goal Admin dapat masuk kehalaman utama atau halaman
admin
Pre-Condition Email dan password sesuai
Post-Condition Admin masuk kehalaman utama
Failed and Condition Email dan password tidak sesuai
Primary Actor Admin
Main Flow 1. Admin dapat melakukan login untuk masuk
kehalaman utama
2. Admin dapat mengelola semua data.
Invariant -
Sumber: (Hasil Penelitian, 2018)
Tabel IV.4.
Deskripsi Use Case Diagram Admin Mengelola Banner
Use Case Name Mengelola Banner
Requirements C2
Goal Admin dapat mengelola banner di
halaman website
Pre-Condition Admin sudah login
Post-Condition Banner dikelola admin
Failed and Condition Banner gagal dikelola
Primary Actor Admin
Main Flow 1. Admin dapat melakukan
login untuk masuk
30
kehalaman utama
2. Admin dapat mengelola
banner.
Invariant -
Sumber: (Hasil Penelitian, 2018)
Tabel IV.5.
Deskripsi Use Case Diagram Admin Mengelola Gallery
Use Case Name Mengelola gallery
Requirements C2
Goal Admin dapat mengelola data gallery
di halaman website
Pre-Condition Admin sudah login
Post-Condition Admin berhasil menambah atau
hapus foto
Failed and Condition Admin tidak menambah atau hapus
foto
Primary Actor Admin
Main Flow 1. Admin dapat melakukan
login untuk masuk
kehalaman utama
2. Admin dapat menambah atau
menghapus foto.
Invariant -
Sumber: (Hasil Penelitian, 2018)
31
Tabel IV.6.
Deskripsi Use Case Diagram Admin Mengelola Tipe Lapangan
Use Case Name Mengelola Tipe Lapangan
Requirements C3
Goal Admin dapat mengelola tipe
lapangan
Pre-Condition Admin sudah login
Post-Condition Data tipe lapangan teredit atau hapus
Failed and Condition Admin tidak mengedit atau
menghapus data tipe lapangan
Primary Actor Admin
Main Flow 1. Admin melakukan login
untuk masuk kehalaman
utama
2. Admin dapat mengedit dan
menghapus data tipe
lapangan
Invariant -
Sumber: (Hasil Penelitian, 2018)
Table IV.7.
Deskripsi Use Case Diagram Master Pemeriksa
Use Case Name Master Pemeriksa
Requirements C5
Goal Admin dapat mengelola data master
pemeriksa
Pre-Condition Admin sudah login
Post-Condition Admin dapat memverifikasi data
32
penyewaan lapangan
Failed and Condition Admin tidak memverifikasi data
penyewaan lapangan
Primary Actor Admin
Main Flow 1. Admin dapat melakukan
login untuk masuk
kehalaman utama
2. Admin dapat melihat daftar
penyewaan dan konfirmasi
penyewaan lapangan futsal
Invariant -
Sumber: (Hasil Penelitian, 2018)
Tabel IV.8
Deskripsi Use Case Diagram Admin Mengelola Profil
Use Case Name Mengelola Profil
Requirements C6
Goal Admin dapat mengelola data profil
di halaman website
Pre-Condition Admin sudah login
Post-Condition Profil berhasil diupdate
Failed and Condition Profil tidak berhasil diupdate
Primary Actor Admin
Main Flow 1. Admin dapat melakukan
login untuk masuk
kehalaman utama
2. Admin dapat mengelola data
profil.
Invariant -
Sumber: (Hasil Penelitian, 2018)
33
4.1.3. Activity Diagram
1. Activity Diagram Admin
Sumber: (Hasil Penelitian, 2018)
Gambar IV.4. Activity Diagram Admin
act activ ity diagram
webAdmin
Membuka Browser Tampil Halaman Utama
Pilih Login
Input Email dan
Password adminVerifikasi Data
Login Gagal
Ruang Admin
menginput data banner, text
banner, foto kirana park av enue,
mengelola tipe lapangan, melihat
data sewa lapangan,
mengkonfirmasi penyewaan
lapangan, update, edit dan delet.
Menyimpan DataProses Menyimpan Data
Tampilan Data
Logout
Benar
Salah
34
2. Activity Diagram Penyewa
Sumber: (Hasil Penelitian, 2018)
Gambar VI.5. Activity Diagram Penyewa
act use case
webPenyewa
Membuka Browser Tampil Halaman Utama
Pilih Login
Input Email dan
Password penyewaVerifikasi Data
Login Gagal
Ruang Penyewa
menginput data profil penyewa,
menginput data sewa lapangan,
mengunggah bukti transfer atau
pembayaran, dan melihat riwayat
penyewaan
Menyimpan DataProses Menyimpan Data
Tampilan Data
Logout
Benar
Salah
35
4.2. Desain
Pada tahap ini penulis membahas desain yang terdapat dari database desain,
software architecture dan desain interface.
4.2.1. Database
1. Entity Relationship Diagram
Id
Nama
alamat
No_hp
User
Update_at
Is_superuser
Pasword
Aktif
Is_penyewa
Is_pimpinan
Update_at
Created_at
Remember_token
bookingMelakukan
pemesanan
Tgl_sewa
Created_at
Jam_pesan
Jam_Selesai
Kode_booking
File_pdf
File_bukti
status
Id_lapangan
harga
nama
alamat
No_hp
id
LapanganMempunyai
harga
menyewakan
Update_at
Created_at
Id_lapangan
id
Nama_lapangan
Updated_at
Created_at
id
Memiliki
1M
M
M
11
1
1
Sumber: (Hasil Penelitian, 2018)
Gambar IV.6.
Entity Relationship Diagram Kirana Park Avenue
36
2. LRS (Logical Relational Structure).
User
id
nama
alamat
no_hp
password
remember_token
created_at
updated_at
is_superuser
is_penyewa
is_pimpinan
aktif
Harga
id
id_lapangan
harga
created_at
update_at
Lapangan
id
nama_lapangan
created_at
updated_at
Booking
id
id_lapangan
harga
nama
alamat
no_hp
tgl_Sewa
jam_pesan
jam_selesai
kode_booking
file_bukti
file_pdf
status
created_at
update_at
Sumber: (Hasil Penelitian, 2018)
Gambar IV.7.
Logical Record Structur Kirana Park Avenue
3. Sepesifikasi File
a. Spesifikasi File Tabel Level
Nama Database : db_aplikasifutsal1
Nama File : tb_level
Akronim : level.MYD
Fungsi : sebegai menentukan level
Tipe : File master
Organisasi File : Index Sequntial
Akses File : Random
Media File : Hardisk
Panjang Record : 35 Karakter
Kunci Field : id
37
Tabel IV.9.
Spesifikasi Tabel Level
No Elemen Data Nama Field Type Size Keterangan
1 Id Id Int 10 Primary Key
2 Nama level Nama_level Varchar 25
3 Created at Created_at Timestamp
4 Update at Update_at Timestamp
Sumber: (Hasil Penelitian, 2018)
b. Spesifikasi File Tabel User
Nama Database : db_aplikasifutsal1
Nama File : tb_user
Akronim : user.MYD
Fungsi : sebegai penyimpan data user
Tipe : File master
Organisasi File : Index Sequntial
Akses File : Random
Media File : Hardisk
Panjang Record : 385Karakter
Kunci Field : id
38
Tabel IV.10.
Spesifikasi Tabel User
No Elemen Data Nama Field Type Size Keterangan
1 Id Id Int 10 Primary key
2 Nama Nama Varchar 100
3 Alamat Alamat Text -
4 No_hp No hp Varchar 15
5 Email Email Varchar 50
6 Password Password Varchar 100
7 Remember_to
ken
Remember_tok
en
Varchar 100
8 Created_at Created_at Timestamp -
9 Updated _at Updated_at Timestamp -
10 Is_superuser Is_superuser Tinyint 1
11 Is_penyewa Is_penyewa Tinyint 4
12 Is_pemimpin Is_pemimpin Tinyint 4
13 Aktif Aktif Tinyint 1
Sumber: ( Hasil Penelitian, 2018)
c. Spesifikasi File Tabel Banner
Nama Database : db_aplikasifutsal1
Nama File : tb_banner
Akronim : banner.MYD
39
Fungsi : menyimpan data banner
Tipe : File master
Organisasi File : index squential
Akses File : Random
Media File : Hardisk
Panjang Record : 110Karakter
Kunci Field : id
Tabel IV.11.
Spesifikasi Tabel Banner
No Elemen Data Nama Field Type Size Keterangan
1 Id Id Int 10 Primary Key
2 Gambar Gambar Varchar 100
3 Created at Created_at timestamp -
4 Update at Update_at timestamp -
Sumber: (Hasil Penelitian, 2018)
d. Spesifikasi File Tabel Booking
Nama Database : db_aplikasifutsal1
Nama File : tb_booking
Akronim : booking.MYD
Fungsi : sebegai penyimpan data booking
Tipe : File master
Organisasi File : Index Sequntial
40
Akses File : Random
Media File : Hardisk
Panjang Record : 954Karakter
Kunci Field : id
Tabel IV.12.
Spesifikasi Tabel Booking
No Elemen Data Nama Field Type Size Keterangan
1 Id Id Int 11 Primary key
2 Id lapangan Id_lapangan Int 11
3 Harga Harga Varchar 100
4 Nama Nama Varchar 100
5 Alamat Alamat Varchar 100
6 No hp No_hp Varchar 15
7 Email Email Varchar 100
8 Tgl sewa Tgl_sewa Date -
9 Jam pesan Jam_pesan Time -
10 Jam selesai Jam_selesai Time -
11 Kode booking Kode_booking int 11
12 File bukti File_bukti Varchar 255
13 File PDF File_PDF Varchar 255
14 Status Status Int 11
41
15 Created at Created_at Timestamp -
16 Update at Update_at Timestamp -
Sumber: Hasil Penelitian, 2018
e. Spesifikasi File Tabel Harga
Nama Database : db_aplikasifutsal1
Nama File : tb_harga
Akronim : harga.MYD
Fungsi : sebegai penyimpan data harga
Tipe : File master
Organisasi File : Index Sequntial
Akses File : Random
Media File : Hardisk
Panjang Record : 122Karakter
Kunci Field : id
Tabel IV.13.
Spesifikasi Tabel Harga
No Elemen Data Nama Field Type Size Keterangan
1 Id Id Int 11 Primary Key
2 Id lapangan Id_lapangan Int 11
3 Harga Harga Varchar 100
4 Created at Created_at Timestamp -
5 Update at Update_at timestamp -
Sumber: Hasil Penelitian, 2018
42
f. Spesifikasi File Tabel Lapangan
Nama Database : db_aplikasifutsal1
Nama File : tb_lapangan
Akronim : lapangan.MYD
Fungsi : sebegai penyimpan data lapangan
Tipe : File master
Organisasi File : Index Sequntial
Akses File : Random
Media File : Hardiks
Panjang Record : 110Karakter
Kunci Field : id
Tabel IV.14
Spesifikasi Tabel Lapangan
No Elemen Data Nama Field Type Size Keterangan
1 Id Id Int 11 Primary Key
2 Nama
lapangan
Nama_lapangan Varchar 100
3 Created at Created_at timestamp -
4 Update at Update_at timestamp -
Sumber: (Hasil Penelitian, 2018)
g. Spesifikasi File Tabel Text Banner
Nama Database : db_aplikasifutsal1
Nama File : tb_text_banner
43
Akronim : text banner.MYD
Fungsi : sebegai penyimpan data text banner
Tipe : File master
Organisasi File : Index Sequntial
Akses File : Random
Media File : Hardisk
Panjang Record : 110 Karakter
Kunci Field : id
Tabel IV.15.
Spesifikasi Tabel Text Banner
No Elemen Data Nama Field Type Size Keterangan
1 Id Id Int 10 Primary Key
2 Text_banner Gambar Varchar 100
3 deskripsi Deskripsi Text -
4 Created at Created_at timestamp -
5 Update at Update_at timestamp -
Sumber: (Hasil Penelitian, 2018)
44
H. Spesifikasi File Tabel Gallery
Nama Database : db_aplikasifutsal1
Nama File : tb_gallery
Akronim : gallery.MYD
Fungsi : sebegai menampilkan foto
Tipe : File master
Organisasi File : Index Sequntial
Akses File : Random
Media File : Hardisk
Panjang Record : 611 Karakter
Kunci Field : id
Tabel IV.16.
Spesifikasi Tabel Gallery
No Elemen Data Nama Field Type Size Keterangan
1 Id Id Int 11 Primary key
2 Foto satu Foto_satu Varchar 255
3 Foto dua Foto_dua Varchar 255
4 Foto tiga Foto_tiga Varchar 255
5 Foto empat Foto_empat Varchar 255
6 Foto lima Foto_lima Varchar 255
7 Foto enam Foto_enam Varchar 255
45
8 Foto tujuh Foto_tujuh Varchar 255
9 Foto delapan Foto_delapan Varchar 255
10 Foto Sembilan Foto_sembilan Varchar 255
11 Created_at Created_at Timestamp -
12 Updated _at Updated_at Timestamp -
Sumber: ( Hasil Penelitian, 2018)
46
4.2.2. Software Architectur
Pada tahap ini penulis membahas mengenai deployment diagram dan component
diagram sesuai dengan program yang penulis telah buat.
1. Class Diagram
Class diagram merupakan diagram yang digunakan untuk menampilkan
kelas-kelas maupun paket-paket yang sudah ada pada sistem yang digunakan.
Sumber: (Hasil Penelitian, 2018)
Gambar.IV.8. Class Diagram
class Class Model
User
- id: int(10)
+ nama: varchar(100)
+ alamat: text
+ no_hp: varchar(15)
- email: varchar(50)
+ password: varchar(100)
+ remember_token: varchar(100)
+ created_at: timestamp
+ update_at: timestamp
+ is_superuser: tinyint(1)
+ is_penyewa: tinyint(4)
+ is_pimpinan: tinyint(4)
+ aktif: tinyint(1)
- id(): int
+ created_at(): timestamp
+ updated_at(): timestamp
Booking
- id: int(11)
+ id_lapangan: int(11)
+ harga: VARCHAR(100)
+ nama: VARCHAR(75)
+ alamat: VARCHAR(100)
+ no_hp: VARCHAR(50)
+ email: VARCHAR(100)
+ tgl_sewa: DATE
+ jam_pesan: TIME
+ jam_selesai: TIME
+ kode_booking: INT (11)
+ fi le_bukti: VARCHAR(255)
+ fi le_pdf: VARCHAR(255)
+ status: INT(11)
+ created_at: TIMESTAMP
+ updated_at: TIMESTAMP
- id(): int
+ id_lapangan()
+ harga()
+ created_at(): timestamp
+ updated_at(): timestamp
Lapangan
- id: INT(11)
+ nama_lapangan: VARCHAR(100)
+ created_at: TIMESTAMP
+ update_at: TIMESTAMP
- id(): int
+ id_lapangan()
+ updated_at(): timestamp
Harga
- id(): int(11)
+ id_lapangan(): varchar(100)
+ harga(): varchar(100)
+ created_at(): timestamp
+ updated_at(): timestamp
gallery
- Id(): int
+ foto_satu(): varchar(255)
+ foto_dua(): varchar(255)
+ foto_tiga(): varchar(255)
+ foto_empat(): varchar(255)
+ foto_lima(): varchar(255)
+ foto_enam(): varchar(255)
+ foto_tujuh(): varchar(255)
+ foto_delapan(): varchar(255)
+ foto_sembilan(): varchar(255)
+ created_at(): int
+ updated_at(): int
text banner
- id(): int
+ text_banner(): varchar
+ deskripsi(): text
+ created_at(): timestamp
+ updated_at(): timestamp
banner
- id(): int
+ gambar(): varchar(100)
+ ceated_at(): timestamp
+ updated_at(): timestamp
lev el
+ id(): int
+ nama_level(): varchar(25)
+ created_at(): timestamp
+ updated_at(): timestamp
47
2. Squence Diagram
Sequence diagram merupakan diagram yang menggambarkan interaksi antar
objek yang ada di dalam sistem yang berupa pesan berdasarkan urutan waktu.
a. Sequence diagram register
Pada gambar.IV.9. merupakan sequence diagram register pengunjung.
Dimana pengunjung mendaftarkan diri ke sistem untuk bisa masuk ke halaman utama
peyewa.
Sumber: (Hasil Penelitian, 2018)
Gambar.IV.9. Sequence Diagram Register Pengunjung
b. Sequence diagram login
Pada gambar.IV.10. sequence diagram login jika penyewa menginput email,
password dan captcha sesuai, maka penyewa akan berhasil masuk kehalaman
penyewa. Apabila terjadi kesalahan dalam menginput email dan password pada saat
melakukan login, maka admin harus melakukan login kembali dengan menginput
email dan password yang sesuai.
48
Sumber: (Hasil Penelitian, 2018)
Gambar.IV.10. Sequence Diagram Login
c. Sequence Diagram form profil
Pada gambar.IV.11. merupakan sequence diagram pengelolaan profil
penyewa. Dimana penyewa hanya dapat memperbarui data profil miliknya.
Sumber: (Hasil Penelitian, 2018)
Gambar.IV.11. Sequence Diagram Form Profil
49
d. Sequence Diagram form sewa lapangan
Pada gambar.IV.12. merupakan sequence diagram sewa lapangan.
Dimana penyewa telah berhasil masuk ke halaman utama penyewa, memilih sewa
lapangan dan mengiput data sewa lapangan.
Sumber: (Hasil Penelitian, 2018)
Gambar.IV.12. Sequence Diagram Form Sewa Lapangan
e. Sequence Diagram Unggah Bukti
Pada gambar.IV.13. merupakan sequence diagram unggah bukti. Dimana
penyewa telah berhasil masuk ke halaman utama penyewa, memilih unggah bukti
bahwa penyewa sudah melakukan transaksi pembayaran sewa lapangan.
50
Sumber: (Hasil Penelitian, 2018)
Gambar.IV.13. Sequence Diagram Unggah Bukti
f. Sequence Diagram form login
Pada gambar.IV.14. merupakan sequence diagram login admin. Dimana admin
telah berhasil masuk ke halaman utama admin. Apabila terjadi kesalahan dalam
menginput email dan password pada saat melakukan login, maka admin harus
melakukan login kembali dengan menginput email dan password yang sesuai.
Sumber: (Hasil Penelitian, 2018)
Gambar.IV.14. Sequence Diagram Form Login Admin
51
g. Deployment Diagram
Deployment diagram menunjukan tata letak sebuah sistem secara fisik yang
berupa bagian-bagian software yang berjalan pada bagian-bagian hardware.
Sumber: (Hasil Penelitian, 2018)
Gambar IV.15. Deployment Diagram
52
h. Component Diagram
Component diagram menggambarkan struktur komponen dan hubungan antar
komponen piranti lunak, termasuk yang ketergantungan diantaranya. Component
diagram dapat juga berupa interface yang berupa kumpulan layanan yang sudah
disediakan oleh komponen untuk komponen lainnya.
Sumber: (Hasil Penelitian, 2018)
Gambar IV.16. Component Diagram
53
4.2.3. User Interface
1. Tampilan User Interface Home Apel Kirana Park Avenue
Sumber: (Hasil Penelitian, 2018)
Gambar IV.17.
Tampilan User Interface Home Apel Kirana Park Avenue
2.Tampilan User Interface Registrasi untuk Pengunjung
Sumber: (Hasil Penelitian, 2018)
Gambar IV.18.
Tampilan Use Interface Registrasi untuk pengunjung
Kirana Park
Avenue
Aplikasi Penyewaan Lapangan Futsal
Tentang kami Hubungi Kami Masuk Beranda
Registrasi Sistem Aplikasi
Masukan nama
Masukan email
Masukan Password
Daftar
Beranda
54
3. Tampilan Use Interface Login Penyewa
Sumber: (Hasil Penelitian, 2018)
Gambar IV.19.
Tampilan Use Interface Login Penyewa
4.Tampilan Use Interface Halaman Utama Penyewa
Sumber: (Hasil Penelitian, 2018)
Gambar IV.20.
Tampilan Use Interface Halaman Utama Penyewa
Login Penyewa
Masukan kode keamanan
Refresh
Masukan email
Masukan password
9676
Masuk
Beranda
Registrasi
Kirana Park Avenue Puri wulandari
ppwdr223@gmail.com
Profil
Halaman utama
Sewa lapangan
Riwayat penyewaan
Logout
Profil
Selamat Datang Di
Sistem Aplikasi Penyewaan Lapangan Futsal
55
5. Tampilan Use Interface form profil penyewa
Sumber: (Hasil Penelitian, 2018)
Gambar IV.21.
Tampilan Use Interface Form Profil Penyewa
6. Tampilan Use Interface form sewa lapangan
Sumber: (Hasil Penelitian, 2018)
Gambar IV.22.
Kirana Park Avenue Puri Wulandari
Password Baru
Masukkan password
Konfirmasi Password Baru
Masukkan konfirmasi pass
Informasi
Perubahan yang telah dilakukan akan merubah identitas anda
Nama
Puri wulandari
Alamat
Jl.muara bahari,gang ayam no27A, Sunter Agung
Kirana Park Avenue Puri Wulandari
Lapangan Harga
Tanggal Sewa Jam Mulai Jam Selesai
Note: untuk jam mulai tidak
boleh melebihi 30 menit.
Contoh: 08.00,09.00,dll.
--Pilih Lapangan-- Harga Lapangan
Masukkan Jam Mulai Masukkan Tanggal Sewa
refresh
Masukkan Jam Selesai
Pesan
simpan
56
Tampilan Use Interface Form Sewa Lapangan
7. Tampilan Use Interface Upload Bukti Transfer
Sumber: (Hasil Penelitian, 2018)
Gambar IV.23.
Tampilan Use Interface Form Bukti Transfer
Kirana Park Avenue Puri Wulandari
Kode Booking
Masukkan Kode Booking Anda
Drag and drop a file here or click
Upload
57
8. Tampilan Use Interface Riwayat Penyewaan
Sumber: (Hasil Penelitian, 2018)
Gambar IV.24.
Tampilan Use Interface Riwayat Penyewaaa
Kirana Park Avenue Puri Wulandari
Showing 1 to 3 of 3 enteris
No Tanggal Nama Lapangan Harga Jam Pesan Jam Selesai Kode Sewa
1 21 juli2018 Lapangan Rp.320.000 09.30 10.30 987280
Sintetis 1
Status
X Belum
diverifikasi
Previous 1 next
58
9. Tampilan Use Interface Login Admin
Sumber: (Hasil Penelitian, 2018)
Gambar IV.25.
Tampilan Use Interface Login Admin
10. Tampilan Use Interface Home Admin
Sumber: (Hasil Penelitian, 2018)
Gambar IV.26.
Tampilan Use Interface Home Admin
Login Sistem Aplikasi
Masukan email
Masukkan password
Masukkan kode keamanan
refresh
9777
Registrasi
Kirana Park Avenue Admin
Halaman Utama
Banner
Gallery
Teks Banner
Master Pemeriksa
Profil
Logout
Login
Beranda
Selamat Datang Di
Sistem Aplikasi Penyewaan Lapangan
59
4.2.4. Implementasi
Implementasi merupakan tahap penerapan dari tampilan desain user interface
pada Kirana Park Avenue. Berikut ini tampilan menu-menu sistem informasi
penyewaan lapangan futsal ditunjukkan pada Gambar.IV.27 sampai denga
Gambar.IV.36 :
1. Tampilan Halaman Utama Apel Futsal Kirana Park Avenue
Halaman ini merupakan halaman awal sistem informasi penyewaan lapangan
futsal. Pengunjung dapat melakukan mengklik tentang kami, hubungi kami, dan
pengunjung dapat melakukan registrasi terlebuh dahulu sebelum melakukan login
sebagai penyewa.
Sumber: (Hasil Penelitian, 2018)
Gambar IV.27.
Tampilan Halaman Utama Apel Futsal Kirana Park Avenue
60
2. Tampilan Register untuk Pengunjung
Halaman ini digunakan untuk registrasi. ketika pengunjung ingin melakukan login
ke halaman utama sistem informasi penyewaan lapangan futsal Kirana Park Avenue.
Sumber: (Hasil Penelitian, 2018)
Gambar IV.28.
Tampilan Register Pengunjung
61
11. Tampilan Login Penyewa
Halaman ini digunakan untuk melakukan login untuk masuk ke halaman utama
sistem informasi penyewaan lapangan futsal Kirana Park Avenue.
Sumber: (Hasil Penelitian, 2018)
Gambar IV.29
Tampilan Login Pengunjung
62
12. Tampilan Halaman Utama Penyewa
Halaman ini merupakan halaman utama sistem informasi penyewaan lapangan
futsal Kirana Park Avenue, setelah penyewa melakukan login.
Sumber: (Hasil Penelitian, 2018)
Gambar IV.30.
Tampilan Halaman Utama Penyewa
63
13. Tampilan Form Profil Penyewa
Sebelum penyewa melakukan sewa atau menyewaa lapangan futsal, penyewa
harus melakukan pengisian data profil penyewa.
Sumber: (Hasil Penelitian, 2018)
Gambar IV.31.
Tampilan Form Profil Penyewa
64
14. Tampilan Sewa Lapangan
Halaman ini akan muncul ketika penyewa mengklik sewa lapangan, dan
penyewa harus mengisi data seperti lapangan, tanggal sewa , dan jam mulai untuk
melakukan sewa lapangan.
Sumber: (Hasil Penelitian, 2018)
Gambar IV.32.
Tampilan Sewa Lapangan
65
15. Tampilan Upload Bukti Transfer
Halaman ini untuk melakukan upload bukti transfer bahwa penyewa sudah
melakukan pembayaran sewa lapangan.
Sumber: (Hasil Penelitian, 2018)
Gambar IV.33.
Tampilan Upload Bukti Transfer
66
16. Tampilan Riwayat Penyewaan
Halaman ini digunakan penyewa untuk melihat riwayat pemesanan yang telah
dilakukan.
Sumber: (Hasil Penelitian, 2018)
Gambar IV.34.
Tampilan Riwayat Penyewaan
67
17. Tampilan Login Admin
Halaman ini admin melakukan login unruk mendapatkan hak akses agar dapat
mengelola data banner, foto kirana park avenue, teks banner, tipe lapangan dan
verifikasi penyewa dengan cara menginput email dan password yang sudah admin
miliki.
Sumber: (Hasil Penelitian, 2018)
Gambar IV.35.
Tampilan Login admin
68
18. Tampilan Home Admin
Setelah melakukan login, maka admin dapat mengakses dimana terdapat beberapa
menu seperti banner, foto kirana park avenue, teks banner, tipe lapangan dan
master pemeriksa.
Sumber: (Hasil Penelitian, 2018)
Gambar IV.36.
Tampilan Home Admin
69
4.3. Code Generation
A. Form Sewa Lapangan
@extends('admin.master')
@section('title', 'Menu Pemesanan')
@section('content')
<link href="{{asset('public/css/jquery.timepicker.css')}}" rel="stylesheet">
<link href="{{asset('public/css/bootstrap-datepicker.css')}}" rel="stylesheet">
<style type="text/css">
.error{
color: red;
}
</style>
<script>
var BASE_URL_VERIFIKASI_PEMERIKSA = "{{url('/admin/master-
penyewa')}}";
</script>
<div class="container-fluid">
<div class="row bg-title">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<h4 class="page-title text-info"><i class="fa fa-file fa-
fw"></i> Sewa Lapangan </h4> </div>
<!-- /.col-lg-12 -->
</div>
<div class="row">
<div class="col-md-12">
70
<div class="white-box">
<div class=" text-right">
<a href="{{ url('admin/master-penyewa') }}" class="btn btn-
success btn-sm btn-plus"><i class="fa fa-refresh fa-spin"></i> Refresh </a>
</div>
<div style="margin-bottom:10px;"></div>
<hr>
<div class="table-responsive animated bounceInUp">
{{ Form::open(['url' => '/add', 'method' =>
'post','class'=>' col-md-12','id'=>'form_register', 'enctype'=>'multipart/form-data']) }}
{{ Form::token() }}
<div class="col-sm-12">
<div class="row">
<div class="col-sm-6 form-group">
<label>Lapangan</label>
{{ Form::select('nama_lapangan', @$nama_lapangan,null,
['class'=>'form-control input-sm', 'id'=>'nama_lapangan', 'required']) }}
</div>
<div class="col-sm-6 form-group">
<label>Harga</label>
{{ Form::text('harga', '', [ 'class'=>'form-control input-sm',
'placeholder'=>'Harga Lapangan...', 'required', 'id'=>'harga', 'readonly']) }}
</div>
</div>
<div class="row">
<div class="col-sm-4 form-group">
<label>Tanggal Sewa</label>
{{ Form::text('tgl_sewa', null, [ 'class'=>'form-control', 'id'=>'tgl_sewa',
'placeholder'=>'Masukkan Tanggal Sewa...', 'required']) }}
71
</div>
<div class="col-sm-4 form-group">
<label>Jam Mulai</label>
{{ Form::text('jam_pesan', null, [ 'class'=>'form-control time start',
'id'=>'jam_pesan', 'placeholder'=>'Masukkan Jam Mulai...', 'required']) }}
<small style="color:red;">Note: Untuk jam mulai tidak boleh melebihi
<strong>30 Menit</strong>.<br />Contoh: <strong>08:00, 09:00,
dll.</strong>.</small>
</div>
<div class="col-sm-4 form-group">
<label>Jam Selesai</label>
{{ Form::text('jam_selesai', null, [ 'class'=>'form-control time end',
'id'=>'jam_selesai', 'placeholder'=>'Masukkan Jam Selesai...', 'required','readonly'])
}}
</div>
</div>
<div class="row">
<button type="submit" class="btn btn-lg btn-info" style="width: 100%;
margin-top: 20px;">Pesan <i class="fa fa-send"></i></button>
</div>
</div>
{{ Form::close() }}
</div>
</div>
</div>
</div>
</div>
<script src="{{asset('public/lib/jquery/jquery.min.js')}}"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="{{asset('public/lib/jquery/jquery-migrate.min.js')}}"></script>
72
<script src="{{asset('public/lib/bootstrap/js/bootstrap.bundle.min.js')}}"></script>
<script src="{{asset('public/lib/easing/easing.min.js')}}"></script>
<script src="{{asset('public/lib/wow/wow.min.js')}}"></script>
<script src="{{asset('public/lib/superfish/hoverIntent.js')}}"></script>
<script src="{{asset('public/lib/superfish/superfish.min.js')}}"></script>
<script src="{{asset('public/lib/magnific-popup/magnific-
popup.min.js')}}"></script>
<!-- Contact Form JavaScript File -->
<script src="{{asset('public/contactform/contactform.js')}}"></script>
<!-- Template Main Javascript File -->
<script src="{{asset('public/js/main.js')}}"></script>
<script src="{{asset('public/js/dropify.min.js')}}"></script>
<script src="{{asset('public/js/jquery.timepicker.js')}}"
type="text/javascript"></script>
<script src="{{asset('public/js/datepair.js')}}" type="text/javascript"></script>
<script src="{{asset('public/js/bootstrap-datepicker.js')}}"
type="text/javascript"></script>
<script src="{{asset('/public/js/apps.js')}}"></script>
<script src="{{asset('/public/js/apps-additional.js')}}"></script>
<script>
$().ready(function() {
$("#form_register").validate({
rules: {
nama_lapangan: {
required: true,
},
setuju: {
required: true,
},
73
jam_pesan: {
required: true,
},
jam_selesai: {
required: true,
},
harga: {
required: true,
},
tgl_sewa: {
required: true,
remote: {
url: BASE_URL+"/cekdaftar",
type: "GET",
data: {
tgl_sewa: function() {
return $( "#tgl_sewa" ).val();
},
jam_pesan: function() {
return $( "#jam_pesan" ).val();
},
jam_selesai: function() {
return $( "#jam_selesai" ).val();
},
nama_lapangan: function() {
return $( "#nama_lapangan" ).val();
},
},
74
},
},
},
errorElement: "span",
messages: {
nama_lapangan: {
required: "harus diisi...",
},
setuju: {
required: "harus diisi...",
},
jam_pesan: {
required: "harus diisi...",
},
jam_selesai: {
required: "harus diisi...",
},
tgl_sewa: {
required: "harus diisi...",
remote:"Jadwal telah terisi. Silahkan pilih lapangan lain, jam berbeda, atau ganti
tanggal main.",
},
harga: {
required: "harus diisi...",
},
},
submitHandler: function(form) {
form.submit();
}
75
});
});
</script>
<script>
$(document).ready(function() {
// Basic
$('.dropify').dropify();
// Translated
$('.dropify-fr').dropify({
messages: {
default: 'Glissez-déposez un fichier ici ou cliquez',
replace: 'Glissez-déposez un fichier ou cliquez pour remplacer',
remove: 'Supprimer',
error: 'Désolé, le fichier trop volumineux'
}
});
// Used events
var drEvent = $('#input-file-events').dropify();
drEvent.on('dropify.beforeClear', function(event, element) {
return confirm("Do you really want to delete \"" + element.file.name + "\" ?");
});
drEvent.on('dropify.afterClear', function(event, element) {
alert('File deleted');
});
drEvent.on('dropify.errors', function(event, element) {
console.log('Has Errors');
});
var drDestroy = $('#input-file-to-destroy').dropify();
76
drDestroy = drDestroy.data('dropify')
$('#toggleDropify').on('click', function(e) {
e.preventDefault();
if (drDestroy.isDropified()) {
drDestroy.destroy();
} else {
drDestroy.init();
}
})
});
</script>
<script>
// initialize input widgets first
$('#form_register .time').timepicker({
'showDuration': true,
'minTime': '8:00am',
'timeFormat': 'H:i'
});
// $('#form_register .date').datepicker({
// 'format': 'm/d/yyyy',
// 'autoclose': true
// });
// initialize datepair
var form_registerEl = document.getElementById('form_register');
var datepair = new Datepair(form_registerEl);
77
</script>
<script>
$( function() {
$( "#tgl_sewa" ).datepicker(
{
todayHighlight: true,
format: 'yyyy/mm/dd',
startDate: "dateToday"
});
} );
</script>
<script type="text/javascript">
$(document).ready(function() {
$('select[name="nama_lapangan"]').on('change', function() {
var nama_lapangan = $(this).val();
if(nama_lapangan) {
$.ajax({
url: "{{ url('/getdatadropdownlapangan') }}/"+nama_lapangan,
type: "GET",
dataType: "json",
success:function(data) {
$('input[name="harga"]').val(data.harga);
// $('input[name="email"]').empty();
// $.each(data, function(key, value) {
// $('input[name="email"]');
// });
78
}
});
}else{
$('input[name="harga"]').empty();
}
});
});
</script>
@stop
B. Form Login
<!doctype html>
<html lang="{{ app()->getLocale() }}">
<head>
<meta charset="utf-8">
<meta name="author" content="Syamsudar | Tri Cipta Internasional">
<meta name="robots" content="index follow">
<meta name="googlebot" content="index follow">
<meta http-equiv="X-UA-Compatible"
content="IE=edge,chrome=1">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>Sistem Aplikasi | Login</title>
<meta name="keywords" content="kirana park avenue">
79
<meta name="description" content="futsal merupakan olahraga bola didalam
suatu ruangan ">
<meta name="viewport" content="width=device-width, initial-
scale=1">
<!-- START @FAVICONS -->
<link rel="apple-touch-icon" sizes="57x57"
href="{{asset('/public/resource/img/favicon.ico')}}">
<link rel="apple-touch-icon" sizes="60x60"
href="{{asset('/public/resource/img/favicon.ico')}}">
<link rel="apple-touch-icon" sizes="72x72"
href="{{asset('/public/resource/img/favicon.ico')}}">
<link rel="apple-touch-icon" sizes="76x76"
href="{{asset('/public/resource/img/favicon.ico')}}">
<link rel="apple-touch-icon" sizes="114x114"
href="{{asset('/public/resource/img/favicon.ico')}}">
<link rel="apple-touch-icon" sizes="120x120"
href="{{asset('/public/resource/img/favicon.ico')}}">
<link rel="apple-touch-icon" sizes="144x144"
href="{{asset('/public/resource/img/favicon.ico')}}">
<link rel="apple-touch-icon" sizes="152x152"
href="{{asset('/public/resource/img/favicon.ico')}}">
80
<link rel="apple-touch-icon" sizes="180x180"
href="{{asset('/public/resource/img/favicon.ico')}}">
<link rel="icon" type="image/png" sizes="192x192"
href="{{asset('/public/resource/img/favicon.ico')}}">
<link rel="icon" type="image/png" sizes="32x32"
href="{{asset('/public/resource/img/favicon.ico')}}">
<link rel="icon" type="image/png" sizes="96x96"
href="{{asset('/public/resource/img/favicon.ico')}}">
<link rel="icon" type="image/png" sizes="16x16"
href="{{asset('/public/resource/img/favicon.ico')}}">
<link href="{{asset('/public/resource/img/favicon.ico')}}" rel="shortcut icon">
<!--/ END FAVICONS -->
<!-- STYLES -->
<link
href="{{asset('/public/resource/bootstrap/dist/css/bootstrap.min.css')}}"
rel="stylesheet">
<!-- animation CSS -->
<link href="{{asset('/public/resource/css/animate.min.css')}}" rel="stylesheet">
<link href="{{asset('/public/resource/css/style.css')}}" rel="stylesheet">
<link href="{{asset('/public/resource/plugins/animasi-fa/font-awesome-
animation.css')}}" rel="stylesheet">
<!-- Custom CSS -->
<link href="{{asset('//public/resource/css/style_login.css')}}" rel="stylesheet">
81
<link href="{{asset('//public/resource/colors/default.css')}}" rel="stylesheet">
<link
href='http://fonts.googleapis.com/css?family=Arimo|Playball|Montserrat:400,800,700
,600' rel='stylesheet' type='text/css'>
<script type="text/javascript">
var BASE_URL = "{{url('/')}}";
</script>
<!-- Styles -->
<style>
body {
font-family: 'Arimo', sans-serif !important;
font-size: 14px !important;
}
@media (max-width: 767px) {
.login-register {
position: fixed !important;
}
}
@media (max-width: 480px) {
.login-register {
position: relative !important;height: auto !important;
}
}
82
.profile-img-card {
width: 96px;
height: 96px;
// border: 4px solid #efefef;
margin: 0 auto 10px;
display: block;
}
.login-input {
position: relative;
}
.login-input .error {
position: absolute;
top: 9px;
right: 20px;
font-size: 12px;
color: red;
font-weight: 700;
}
.form-control.error {
position: relative;
right: 0;
top: 0;
font-weight: normal;
83
font-size: 14px;
}
.error{
color: red;
}
</style>
</head>
<body>
<!-- BEGIN: SITE-WRAPPER -->
<div class="preloader">
<svg class="circular" viewBox="25 25 50 50">
<circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="2"
stroke-miterlimit="10"/>
</svg>
</div>
<section id="wrapper" class="login-register wow bounceInUp"
style="background:url({{ asset('public/img/kiranapark.jpg') }}) center center/cover
no-repeat !important">
<div class="login-box">
<div class="white-box">
<h3 class="text-center">LOGIN SISTEM APLIKASI</h3>
{{ Form::open(['url'=>'/login', 'class'=>'form-horizontal form-material form-login
animated bounceIn','id'=>'form']) }}
84
{{ Form::token() }}
<div class="form-group">
<div class="col-xs-12">
{{ Form::text('email', old('email'), [ 'class'=>'form-control', 'id'=>'email',
'placeholder'=>'Masukkan Email...', 'required']) }}
</div>
</div>
<div class="form-group">
<div class="col-xs-12">
{{ Form::password('password', [ 'class'=>'form-control', 'id'=>'password',
'placeholder'=>'Masukkan Password...', 'required', ' autocomplete'=>'off']) }}
</div>
</div>
<div class="form-group">
<div class="col-xs-12">
{{ Form::number('captcha', '', [ 'class'=>'form-control', 'id'=>'captcha',
'placeholder'=>'Masukkan Kode Keamanan...', 'required']) }}
</div>
</div>
<div class="form-group text-center">
<div class="col-xs-12 login-input">
<p id="captcha">{!! captcha_img() !!}</p>
85
<p><a href="#" id="refreshcaptcha"><span class="fa fa-refresh fa-spin"></span>
Refresh</a></p>
</div>
</div>
<div class="form-group text-center m-t-20">
<div class="col-xs-12">
<button class="btn btn-sm btn-primary btn-block btn-signin" type="submit">Masuk
<span class="fa fa-fw fa-sign-in"></span></button>
<a class="btn btn-info btn-block btn-sm" href="{{ route('register-form') }}">Register
<span class="fa fa-fw fa-home"></span></a>
<a class="btn btn-warning btn-block btn-sm" href="{{ url('/') }}">Beranda <span
class="fa fa-fw fa-home"></span></a>
</div>
</div>
{!! Form::close() !!}
</div>
</div>
</section>
<!-- END: SITE-WRAPPER -->
<!-- Load Scripts -->
<script
src="{{asset('/public/resource/plugins/bower_components/jquery/dist/jquery.min.js')}
}"></script>
86
<!-- Bootstrap Core JavaScript -->
<script src="{{asset('/public/resource/js/apps.js')}}"></script>
<script src="{{asset('public/lib/wow/wow.min.js')}}"></script>
<!-- Menu Plugin JavaScript -->
<!--Toast Alert JavaScript -->
<script
src="{{asset('/public/resource/bootstrap/dist/js/bootstrap.min.js')}}"></script>
<!--slimscroll JavaScript -->
<script
src="{{asset('/public/resource/plugins/bower_components/sidebar-nav/dist/sidebar-
nav.min.js')}}"></script>
<!--Wave Effects -->
<script
src="{{asset('/public/resource/js/jquery.slimscroll.js')}}"></script>
<!-- Custom Theme JavaScript -->
<script type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/pace/1.0.2/pace.min.js"></script>
<script src="{{asset('/public/resource/js/waves.js')}}"></script>
<script src="{{asset('/public/resource/js/custom.min.js')}}"></script>
<script
src="{{asset('/public/resource/plugins/bower_components/styleswitcher/jQuery.style.
switcher.js')}}"></script>
87
<script>
$('#refreshcaptcha').click(function() {
var token = '{!! csrf_token() !!}';
var request = 1;
$.post('{{ url("/reloadcaptcha") }}', {_token:token, request:request}, function(e) {
$('#captcha').fadeIn('slow').html(e);
});
});
</script>
<script>
$().ready(function() {
$("#form").validate({
rules: {
email: {
required: true,
minlength: 5,
maxlength: 50,
},
password: {
required: true,
},
captcha: {
required: true,
88
number: true,
minlength: 4,
maxlength: 4,
},
},
errorElement: "span",
messages: {
email: {
required: "harus diisi...",
minlength: "minimal 5 karakter...",
maxlength: "maksimal 5 karakter...",
},
password: {
required: "harus diisi...",
},
captcha: {
required: "harus diisi...",
number: "hanya angka...",
minlength: "kode keamanann hanya 4 angka...",
maxlength: "kode keamanann hanya 4 angka...",
},
},
submitHandler: function(form) {
89
form.submit(); } });
});
</script>
@if(Session::has('success'))
<script type="text/javascript">
$(window).load(function(){
$('#myModalSuccess').modal('show');
});</script>
@endif
@if(Session::has('error'))
<script type="text/javascript">
$(window).load(function(){
$('#myModalError').modal('show');
});
</script>
@endif
@if(Session::has('success'))
<div class="modal fade" id="myModalSuccess" tabindex="-1" role="dialog" aria-
labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
90
<h4 class="modal-title" id="myModalLabel"><span style="font-weight:
700;">Sukses.</span></h4>
</div>
<div class="modal-body">
{{ Session::get('success') }}
</div>
<div class="modal-footer">
<button type="button" class="btn btn-info" data-dismiss="modal">Keluar</button>
</div>
</div>
</div>
</div>
@endif
@if(Session::has('error'))
<div class="modal fade" id="myModalError" tabindex="-1" role="dialog" aria-
labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title" id="myModalLabel"><span style="font-weight:
700;">Error.</span></h4>
</div>
91
<div class="modal-body">
{{ Session::get('error') }}
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-
dismiss="modal">Keluar</button>
</div>
</div>
</div>
</div>
@endif
@if ($errors->any())
<div class="modal fade" id="myModalErrorAll" tabindex="-1" role="dialog" aria-
labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title" id="myModalLabel"><span style="font-weight:
700;">Error.</span></h4>
</div>
<div class="modal-body">
@foreach ($errors->all() as $error)
92
{{ $error }}
@endforeach
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-
dismiss="modal">Keluar</button>
</div>
</div>
</div>
</div>
@endif
@if ($errors->any())
<script type="text/javascript">
$(window).load(function(){
$('#myModalErrorAll').modal('show');
});
</script>
@endif
</body>
</html>
93
C. Form Unggah Bukti Penyewaan
@extends('admin.master')
@section('title', 'Upload Bukti Pemesanan')
@section('content')
<script>
var BASE_URL_VERIFIKASI_PEMERIKSA = "{{url('/admin/master-bukti')}}";
</script>
<div class="container-fluid">
<div class="row bg-title">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<h4 class="page-title text-info"><i class="fa fa-file fa-fw"></i> Unggah Bukti
Penyewaan</h4> </div>
<!-- /.col-lg-12 -->
</div>
<div class="row">
<div class="col-md-12">
<div class="white-box">
<div class=" text-right">
94
<a href="{{ url('admin/master-bukti') }}" class="btn btn-success btn-sm btn-plus"><i
class="fa fa-refresh fa-spin"></i> Refresh </a>
</div>
<div style="margin-bottom:10px;"></div>
<hr>
<div class="table-responsive animated bounceInUp">
{{ Form::open(['url' => '/confirmation', 'method' => 'post','class'=>'form-horizontal
col-md-12','id'=>'form_confirmation', 'enctype'=>'multipart/form-data']) }}
{{ Form::token() }}
<div class="col-sm-12">
<div class="row">
<div class="col-sm-12 form-group">
<label>Kode Booking </label>
{{ Form::text('kode_booking', null, [ 'class'=>'form-control', 'id'=>'kode_booking',
'placeholder'=>'Masukkan Kode Booking Anda...', 'required']) }}
</div>
</div>
<div class="form-group">
<label>Upload Bukti Transfer</label>
<input type="file" id="input-file-now" class="dropify" name="file_bukti"
accept="image/x-png,image/gif,image/jpeg"/>
</div>
<div class="row">
95
<button type="submit" class="btn btn-lg btn-info" style="width: 100%; margin-top:
20px;"><i class="fa fa-cloud-upload fa-fw"></i> Upload</button>
</div>
</div>
{{ Form::close() }}
</div>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function() {
// Basic
$('.dropify').dropify();
// Translated
$('.dropify-fr').dropify({
messages: {
default: 'Glissez-déposez un fichier ici ou cliquez',
replace: 'Glissez-déposez un fichier ou cliquez pour remplacer',
remove: 'Supprimer',
error: 'Désolé, le fichier trop volumineux'
}
});
96
// Used events
var drEvent = $('#input-file-events').dropify();
drEvent.on('dropify.beforeClear', function(event, element) {
return confirm("Do you really want to delete \"" + element.file.name + "\" ?");
});
drEvent.on('dropify.afterClear', function(event, element) {
alert('File deleted');
});
drEvent.on('dropify.errors', function(event, element) {
console.log('Has Errors');
});
var drDestroy = $('#input-file-to-destroy').dropify();
drDestroy = drDestroy.data('dropify')
$('#toggleDropify').on('click', function(e) {
e.preventDefault();
if (drDestroy.isDropified()) {
drDestroy.destroy();
} else {
drDestroy.init();
}
})
});
</script>
97
<script> // initialize input widgets first
$('#form_register .time').timepicker({
'showDuration': true,
'minTime': '8:00am',
'timeFormat': 'H:i'
});
// $('#form_register .date').datepicker({
// 'format': 'm/d/yyyy',
// 'autoclose': true
// });
// initialize datepair
var form_registerEl = document.getElementById('form_register');
var datepair = new Datepair(form_registerEl);
</script>
<script>
$( function() {
$( "#tgl_sewa" ).datepicker(
{
todayHighlight: true,
format: 'yyyy/mm/dd',
startDate: "dateToday"
});
} );
98
</script>
<script type="text/javascript">
$(document).ready(function() {
$('select[name="nama_lapangan"]').on('change', function() {
var nama_lapangan = $(this).val();
if(nama_lapangan) {
$.ajax({
url: "{{ url('/getdatadropdownlapangan') }}/"+nama_lapangan,
type: "GET",
dataType: "json",
success:function(data) {
$('input[name="harga"]').val(data.harga);
// $('input[name="email"]').empty();
// $.each(data, function(key, value) {
// $('input[name="email"]');
// });
}
});
}else{
$('input[name="harga"]').empty();
}
});
});
99
</script>
@stop
4.4. Testing
Untuk pengujian pada website ini dengan menggunakan teknik black-box
testing. Adapun pengujiannya dilakukan pada form sewa lapangan, form login, dan
form unggah bukti sebagai berikut:
Tabel IV.17.
Hasil Pengujian Black Box Testing Form Sewa Lapangan
No Scenario Pengujian Test Case Hasil yang
diharapkan
Hasil
pengujian
Kesimpulan
1 Mengosongkan
salah satu data
sewa lapangan dan
langsung meng-klik
tombol pesan
Data
pengunjung
otomatis
terisi jika
login
sebagai
penyewa
Sistem akan
menolak dan
memberikan
notifikasi
sesuai
dengan data
yang belum
terisi
Sesuai
harapan
Valid
2 Mengiput semua
data sewa lapangan
dan langsung
meng-klik tombol
pesan
Data
pengunjung
otomatis
terisi jika
login
sebagai
penyewa
Sistem akan
menampilkan
notifikasi
“Pemesanan
berhasil
dilakukan.
Silahkan cek
email Anda.”
Sesuai
harapan
Valid
Sumber: (Hasil Penelitian, 2018)
100
Tabel IV.18.
Hasil Pengujian Black Box Testing Form Login
No Scenario
Pengujian
Test Case Hasil yang
diharapkan
Hasil
pengujian
Kesimpulan
1 Mengosongkan
semua input
email,
password dan
captcha pada
form login lalu
klik tombol
“Login”
Email:(kosong)
Password :
(kosong)
Captcha :
(kosong)
Sistem akan
menolak dan
memberikan
notifikasi
“harus diisi”
Sesuai
harapan
Valid
2 Menginput
semua field
Email,password
dan captcha
tetapi
password yang
diinput
tidak sesuai
lalu klik
tombol “Login”
Email: (user)
Password:
salah
Captcha:
(benar)
Sistem akan
menolak dan
memeberikan
notifikasi
“Error. User
tidak
terdaftar
pada sistem
ini. Silahkan
coba lagi”
Sesuai
harapan
Valid
3 Menginput
semua field
Email,password
dan captcha
dengan sesuai
lalu klik
tombol “Login”
Email: (user)
Password:
(sesuai)
Captcha:
(sesuai)
Sistem akan
menampilkan
notifikasi
bahwa user
telah
memasuki
halaman
utama
Sesuai
harapan
Valid
Sumber: Hasil Penelitian, 2018
101
Tabel IV.19.
Hasil Pengujian Black Box Testing Form Unggah Bukti
No Scenario
Pengujian
Test Case Hasil yang
diharapkan
Hasil
pengujian
Kesimpulan
1 Mengosongkan
input kode
booking dan
tidak
memasukan
data Unggah
bukti transfer
dan langsung
meng-klik
tombol pesan
Data
pengunjung
otomatis
terisi jika
login
sebagai
penyewa
Sistem akan
menolak dan
memberikan
notifikasi “
please fill out
the field”
Sesuai
harapan
Valid
2 Mengosongkan
salah satu data
Unggah bukti
transfer dan
langsung
meng-klik
tombol pesan
Data
pengunjung
otomatis
terisi jika
login
sebagai
penyewa
Sistem akan
menolak dan
memberikan
notifikasi
“please fill out
the field”
Sesuai
harapan
Valid
3 Mengiput
semua data
Unggah bukti
transfer dan
langsung
meng-klik
tombol pesan
Data
pengunjung
otomatis
terisi jika
login
sebagai
penyewa
Sistem akan
menampilkan
notifikasi
“Sukses..
Upload bukti
pembayaran
berhasil
dilakukan.
Mohon
menunggu
konfirmasi
Sesuai
harapan
Valid
102
dari
Administrator”
Sumber: (Hasil Penelitian, 2018)
4.5. Support
Support menjelaskan tentang publikasi web serta spesifikasi hardware dan
software yang ada di Kirana Park Avenue.
4.6. Publikasi web
Setelah website yang dibuat telah selesai, tahap selanjutnya adalah
mendapatkan hosting dan domain secara online pada tempat-tempat yang
menyediakan jasa tersebut. Dalam publikasi web ini yang akan dibahas tentang
tentang penyewaan hosting dan domain berserta analisa biayanya sebagai berikut:
a. Membeli hosting dan domain di alamat www.dapurhosting.com
b.Spesifikasi paket pembelian alamat hosting dan domain yaitu space 500Mb
c. Alamat domain yang dipilih untuk aplikasi ini adalah www.avenuefutsal.com
d. Biaya yang dipakai untuk hosting dan alamat domain tersebut adalah Rp.325.000.
103
4.6.2. Spesifikasi Hardware dan Software
Menjelaskan kebutuhan hardware dan software standart yang akan
digunakan untuk menjalankan sistem usulan tersebut.
Table VI.20.
Spesifikasi hardware dan software
Kebutuhan Keterangan
Sistem Operasi Windows 7
Prosesor Core i3-2310m CPU 2.10GHz
RAM 2GB
Hardiks 500GB
Printer 87 key
Mouse Standart
104
Browser Mozila dan Google Chrome
Software XAMPP
Sumber:( Hasil Penelitian, 2018)
4.7. Spesifikasi Dokumen Sistem Usulan
Spesifikasi dokumen sistem usulan rangkaian dari sebuah proses yang terjadi
pada sistem usulan yang membutuhkan dokumen masukan untuk mendukung
jalannya suatu proses dokumen keluaran. Adapun spesifikasi dokumen sistem usulan
di Kirana Park Avenue sebagai berikut:
4.7.4. Spesifikasi Dokumen Masukan Sistem Usulan
a. Nama Dokumen : Form Registrasi Pengunjung
Fungsi : Sebagai data pendaftaran penyewa
Sumber : Pengunjung
Tujuan : Admin
Media : Tampilan
Frekuensi : Setiap terjadinya transaksi pendaftaran penyewa
Format : Lampiran B-1
b. Nama Dokumen : Form sewa lapangan
Fungsi : Sebagai data sewa lapangan
105
Sumber : Penyewa
Tujuan : Admin
Media : Tampilan
Frekuensi : Setiap terjadinya transaksi sewa lapangan
Format : Lampiran B-2
4.7.1. Spesifikasi dokumen keluaran usulan sistem
a. Nama Dokumen : Data sewa lapangan
Fungsi : sebagai bukti sewa lapangan dan memasuki lapangan
Sumber : Sistem
Tujuan : Admin
Media : Print Out
Frekuensi : Setiap terjadi memasuki lapangan
Format : Lampiran B-3
top related