BAB IV RANCANGAN SISTEM DAN PROGRAM USULAN fileAdmin dapat melakukan pengolahan data master...

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 -


26

2. Use Case Diagram Penyewa


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 -


28

3. Use Case Diagram Admin


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 -


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 -


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


Post-Condition Admin berhasil menambah atau

hapus foto

Failed and Condition Admin tidak menambah atau hapus

foto

Primary Actor Admin


login untuk masuk

kehalaman utama

2. Admin dapat menambah atau

menghapus foto.

Invariant -


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


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 -


Table IV.7.

Deskripsi Use Case Diagram Master Pemeriksa

Use Case Name Master Pemeriksa

Requirements C5

Goal Admin dapat mengelola data master

pemeriksa


Post-Condition Admin dapat memverifikasi data

32

penyewaan lapangan

Failed and Condition Admin tidak memverifikasi data

penyewaan lapangan

Primary Actor Admin


login untuk masuk

kehalaman utama

2. Admin dapat melihat daftar

penyewaan dan konfirmasi

penyewaan lapangan futsal

Invariant -


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


Post-Condition Profil berhasil diupdate

Failed and Condition Profil tidak berhasil diupdate

Primary Actor Admin


login untuk masuk

kehalaman utama

2. Admin dapat mengelola data

profil.

Invariant -


33

4.1.3. Activity Diagram

1. Activity Diagram Admin


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


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

email

User

Update_at

Is_superuser

Pasword

Aktif

Is_penyewa

Is_pimpinan

Update_at

Created_at

Remember_token

bookingMelakukan

pemesanan

Tgl_sewa

email

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


Gambar IV.6.

Entity Relationship Diagram Kirana Park Avenue

36

2. LRS (Logical Relational Structure).

User

id

nama

alamat

no_hp

email

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

email

tgl_Sewa

jam_pesan

jam_selesai

kode_booking

file_bukti

file_pdf

status

created_at

update_at


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


b. Spesifikasi File Tabel User


Nama File : tb_user

Akronim : user.MYD

Fungsi : sebegai penyimpan data user

Tipe : File master


Akses File : Random


Panjang Record : 385Karakter

Kunci Field : id

38

Tabel IV.10.

Spesifikasi Tabel User


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 File : tb_banner

Akronim : banner.MYD

39

Fungsi : menyimpan data banner

Tipe : File master

Organisasi File : index squential

Akses File : Random



Kunci Field : id

Tabel IV.11.

Spesifikasi Tabel Banner



2 Gambar Gambar Varchar 100

3 Created at Created_at timestamp -

4 Update at Update_at timestamp -


d. Spesifikasi File Tabel Booking


Nama File : tb_booking

Akronim : booking.MYD

Fungsi : sebegai penyimpan data booking

Tipe : File master


40

Akses File : Random



Kunci Field : id

Tabel IV.12.

Spesifikasi Tabel Booking



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 File : tb_harga

Akronim : harga.MYD

Fungsi : sebegai penyimpan data harga

Tipe : File master


Akses File : Random



Kunci Field : id

Tabel IV.13.

Spesifikasi Tabel Harga



2 Id lapangan Id_lapangan Int 11

3 Harga Harga Varchar 100

4 Created at Created_at Timestamp -



42

f. Spesifikasi File Tabel Lapangan


Nama File : tb_lapangan

Akronim : lapangan.MYD

Fungsi : sebegai penyimpan data lapangan

Tipe : File master


Akses File : Random

Media File : Hardiks


Kunci Field : id

Tabel IV.14

Spesifikasi Tabel Lapangan



2 Nama

lapangan

Nama_lapangan Varchar 100




g. Spesifikasi File Tabel Text Banner


Nama File : tb_text_banner

43

Akronim : text banner.MYD

Fungsi : sebegai penyimpan data text banner

Tipe : File master


Akses File : Random



Kunci Field : id

Tabel IV.15.

Spesifikasi Tabel Text Banner



2 Text_banner Gambar Varchar 100

3 deskripsi Deskripsi Text -




44

H. Spesifikasi File Tabel Gallery


Nama File : tb_gallery

Akronim : gallery.MYD

Fungsi : sebegai menampilkan foto

Tipe : File master


Akses File : Random



Kunci Field : id

Tabel IV.16.

Spesifikasi Tabel Gallery



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.


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()



Lapangan

- id: INT(11)

+ nama_lapangan: VARCHAR(100)

+ created_at: TIMESTAMP

+ update_at: TIMESTAMP

- id(): int

+ id_lapangan()


Harga

- id(): int(11)

+ id_lapangan(): varchar(100)

+ harga(): varchar(100)



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



banner

- id(): int

+ gambar(): varchar(100)

+ ceated_at(): timestamp


lev el

+ id(): int

+ nama_level(): varchar(25)



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.


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


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.


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.


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


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.


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.


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.


Gambar IV.16. Component Diagram

53

4.2.3. User Interface

1. Tampilan User Interface Home Apel Kirana Park Avenue


Gambar IV.17.

Tampilan User Interface Home Apel Kirana Park Avenue

2.Tampilan User Interface Registrasi untuk Pengunjung


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


Gambar IV.19.

Tampilan Use Interface Login Penyewa

4.Tampilan Use Interface Halaman Utama Penyewa


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

[email protected]

Profil

Halaman utama

Sewa lapangan

Riwayat penyewaan

Logout

Profil

Selamat Datang Di

Sistem Aplikasi Penyewaan Lapangan Futsal

mailto:[email protected]

55

5. Tampilan Use Interface form profil penyewa


Gambar IV.21.

Tampilan Use Interface Form Profil Penyewa

6. Tampilan Use Interface form sewa lapangan


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


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


Gambar IV.23.

Tampilan Use Interface Form Bukti Transfer


Kode Booking

Masukkan Kode Booking Anda

Drag and drop a file here or click

Upload

57

8. Tampilan Use Interface Riwayat Penyewaan


Gambar IV.24.

Tampilan Use Interface Riwayat Penyewaaa


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


Gambar IV.25.

Tampilan Use Interface Login Admin

10. Tampilan Use Interface Home Admin


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.


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.


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.


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.


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.


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.


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.


Gambar IV.33.

Tampilan Upload Bukti Transfer

66

16. Tampilan Riwayat Penyewaan

Halaman ini digunakan penyewa untuk melihat riwayat pemesanan yang telah

dilakukan.


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.


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.


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>



</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>


<label>Harga</label>

{{ Form::text('harga', '', [ 'class'=>'form-control input-sm',

'placeholder'=>'Harga Lapangan...', 'required', 'id'=>'harga', 'readonly']) }}

</div>

</div>

<div class="row">


<label>Tanggal Sewa</label>

{{ Form::text('tgl_sewa', null, [ 'class'=>'form-control', 'id'=>'tgl_sewa',

'placeholder'=>'Masukkan Tanggal Sewa...', 'required']) }}

71

</div>


<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>


<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>



<script src="{{asset('public/contactform/contactform.js')}}"></script>



<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: {


},

jam_pesan: {


},

jam_selesai: {


},

tgl_sewa: {


remote:"Jadwal telah terisi. Silahkan pilih lapangan lain, jam berbeda, atau ganti

tanggal main.",

},

harga: {


},

},

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">


$('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">



<link rel="apple-touch-icon" sizes="57x57"

href="{{asset('/public/resource/img/favicon.ico')}}">

80



<link rel="icon" type="image/png" sizes="192x192"








<link href="{{asset('/public/resource/img/favicon.ico')}}" rel="shortcut icon">





<link

href="{{asset('/public/resource/bootstrap/dist/css/bootstrap.min.css')}}"

rel="stylesheet">



<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">



<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'>


var BASE_URL = "{{url('/')}}";

</script>



<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>



<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">


<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>



{{ Form::password('password', [ 'class'=>'form-control', 'id'=>'password',

'placeholder'=>'Masukkan Password...', 'required', ' autocomplete'=>'off']) }}

</div>

</div>



{{ 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">


<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>





<script

src="{{asset('/public/resource/plugins/bower_components/jquery/dist/jquery.min.js')}

}"></script>

86



<script src="{{asset('/public/resource/js/apps.js')}}"></script>

<script src="{{asset('public/lib/wow/wow.min.js')}}"></script>





<script

src="{{asset('/public/resource/bootstrap/dist/js/bootstrap.min.js')}}"></script>



<script

src="{{asset('/public/resource/plugins/bower_components/sidebar-nav/dist/sidebar-

nav.min.js')}}"></script>



<script

src="{{asset('/public/resource/js/jquery.slimscroll.js')}}"></script>



<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: {


minlength: "minimal 5 karakter...",

maxlength: "maksimal 5 karakter...",

},

password: {


},

captcha: {


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'))


$(window).load(function(){

$('#myModalSuccess').modal('show');

});</script>

@endif

@if(Session::has('error'))



$('#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-







700;">Error.</span></h4>

</div>

91


{{ Session::get('error') }}

</div>


<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-







700;">Error.</span></h4>

</div>


@foreach ($errors->all() as $error)

92

{{ $error }}

@endforeach

</div>


<button type="button" class="btn btn-danger" data-

dismiss="modal">Keluar</button>

</div>

</div>

</div>

</div>

@endif

@if ($errors->any())



$('#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>



</div>

<div class="row">

<div class="col-md-12">


<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">


<label>Kode Booking </label>

{{ Form::text('kode_booking', null, [ 'class'=>'form-control', 'id'=>'kode_booking',

'placeholder'=>'Masukkan Kode Booking Anda...', 'required']) }}

</div>

</div>


<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>


// 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>



$('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


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


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”


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.

http://www.avenuefutsal.com/

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


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


BAB IV RANCANGAN SISTEM DAN PROGRAM USULAN fileAdmin dapat melakukan pengolahan data master...

Documents

Transcript of BAB IV RANCANGAN SISTEM DAN PROGRAM USULAN fileAdmin dapat melakukan pengolahan data master...