BAB III

ANALISA DAN PERANCANGAN SISTEM

3.1. Deskripsi Sistem

Desain antarmuka pengguna beruppa antarmuka web yang ditampilkan
didalam web browser. Ukuran tampilan aplikasi didalam web browser adalah
sesuai dengan ukuran browser (memenuhi semua layar browser). Layout yang
digunakan dalam membuat design antarmuka dibagi menjadi 5 bagian, yaitu
bagian kiri, kanan, bawah, atas, dan tengah.

Menu-menu ditampilakan dalam web browser di bagian sebelah tengah.

bagian atas digunakan untuk menampilkan header atau banner dari aplikasi,
biasanya berupa gambar. Bagian kiri diisi dengan tampilan utama dari aplikasi
sesuai dengan menu yang di akses oleh pengguna. Bagian bawah dapat diisi
dengan copyright atau isi lain yag dianggap perlu. Untuk bagian kanan, digunakan
untuk menampilkan menu tambahan seperti kalender dan tambahan menu lain.
Pengguna layout ini tidaklah terbatas seperti yang dijelaskan, tetapi dapat
disesuaikan dengan kebutuhan pengembangan aplikasi selanjutnya.

3.2. Spesifikasi Sistem

Pada system ini, untuk halaman pada aplikasi yang dapat di akses oleh
pengguna dibatasi sesuai dengan hak akses dari pengguna yang bersangkutan.
Pengguna untuk aplikasi ini sendiri dibagi menjadi 2 hak akses, yaitu:

1. Admin
Admin merupakan user internal yang mempunyai hak akses super dalam
aplikasi ini. User ini bertanggung jawab pada keberlangsungan sistem dan
keamanan data.
2. User
User merupakan pemesan yang akan melakukan pembookingan lapangan
futsal.

3.3. Analisa sistem

Pada bab ini akan membahas flolwchart dan rancangan user interface yang
terdapat dalam project. Dimana yang semuanya ini merupakan proses jalannya
program yang digunakan dalam pembuatan project.

3.1.1. Flowchart
Berikut ini adalah flowchart Aplikasi Booking Lapangan Futsal Berbasis
Web. Flowchart ini menjelaskan bahwa pengguna diminta memasukan nama dan
juga pengguna diminta untuk memilih lapangan serta memasukan jam main dan
jam selesai untuk menampilkan total bayar.

Start

Pilih Lapangan

Input Nama

Input No. Hp

Input E-Mail

Pilih Tanggal Main

1 2
 1 2

Pilih Jam Mulai

Pilih Jam Selesai

Booking

Lengkap?

WM = Jam Selesai
Jam Mulai

TB = Harga Lapangan
* WM

Tampilkan TB

End

Gambar 3.1 Flowchart

3.4. Perancangan Sistem

Pada bagian ini adalah rancangan interface sebelum program ini benar-
benar diimplementasikan kedalam bahasa pemrograman.
3.4.1. Rancangan Interface (AntarMuka)
Padabagian rancangan interface akan di bahas rancangan-rancangan
halaman web yang akan diimplementasikan ke dalam Aplikasi Pembookingan
Lapangan Futsal Berbasis Web. Rancangan webnya adalah sebagai berikut :

3.4.2. Rancangan Beranda

Pada halaman ini, saat pemesan atau admin mebuka web ini maka halaman
awal yang akan muncul adalah seperti Gambar 3.2.

XYZ FUTSAL

| Beranda | Tentang Kami | Cara Booking | Booking | Login |

SAMPLE PICTURE

Blablabla blablabla blablabla blablabla blablabla blablabla blablabla

blablabla blablabla blablabla blablabla blablabla blablabla.
blablabla blablabla blablabla blablabla blablabla blablabla blablabla
blablabla blablabla blablabla blablabla blablabla blablabla blablabla
blablabla blablabla.

(021)7818181 | xyz_futsal@yahoo.com | @xyz_f

Gambar 3.2 Halaman Beranda

3.4.3 Rancangan Tentang Kami

Pada halaman Tentang Kami ini, berisi tentang sejarah, fasilitas, dan
keadaan yang ada di XYZ-futsal. Berikut seperti gambar 3.3.
 XYZ FUTSAL

| Beranda | Tentang Kami | Cara Booking | Booking | Login |

Blablabla.

Blablabla blablabla blablabla blablabla blablabla blablabla blablabla

blablabla blablabla blablabla blablabla blablabla.
Blablabla: blablabla blablabla
Blablabla blablabla

Sample Sample Sample Sample

Pict Pict Pict Pict

(021)7818181 | xyz_futsal@yahoo.com | @xyz_f

Gambar 3.3 Halaman Tentang Kami

3.4.4. Rancangan Cara Booking

Pada Halaman ini, menjelaskan langkah-langkah untuk membooking
lapangan futsal yang ada di XYZ-futsal seperti pada gambar 3.4.

XYZ FUTSAL

| Beranda | Tentang Kami | Cara Booking | Booking | Login |

Cara Booking:
1. blablabla blablabla blablabla blablabla blablabla blablabla
2. blablabla blablabla blablabla blablabla blablabla
3. blablabla blablabla blablabla blablabla
4. blablabla blablabla
5. blablabla blablabla blablabla
6. blablabla blablabla blablabla blablabla
7. blablabla

(021)7818181 | xyz_futsal@yahoo.com | @xyz_f

Gambar 3.4 Halaman Cara Booking

3.4.5. Rancangan Booking
Di halaman inilah tujuan dari pembuatan web XYZ-futsal. Karena pada
halaman inilah digunakan untuk membooking lapangan futsal yang ada di XYZ-
futsal. Berikut rancangannya pada gambar 3.5.

XYZ FUTSAL

| Beranda | Tentang Kami | Cara Booking | Booking | Login |

Pilih Lapangan
Sample Sample
Pict Pict

Nama :
No.Hp :
E-Mail :
Waktu : s/d
kembali
Booking

(021)7818181 | xyz_futsal@yahoo.com | @xyz_f

Gambar 3.5 Halaman Booking

3.4.6. Halaman Login

Ini adalah halaman login untuk admin yang berguna untuk mengupdate
atau menghapus data pemesan. Halamannya seperti gambar 3.6.
 XYZ FUTSAL

| Beranda | Tentang Kami | Cara Booking | Booking | Login |

Halaman Login Admin

Id :

Password :

MASUK

(021)7818181 | xyz_futsal@yahoo.com | @xyz_f

Gambar 3.6 Halaman Login

3.4.7. Rancangan Tabel

Pada bagian rancangan tabel akan dibahas rancangan-rancangan tabel yang
akan diimplementasikan kedalam program Aplikasi Booking Lapangan Futsal
Berbasis Web. Rancangan tabelnya adalah sebagai berikut :

3.4.7.1 Rancangan Tabel 1

Berikut ini adalah rancangan tabel 1, tabel ini berisikan id dan
password yang berguna untuk melakukan proses login pada admin.

Field Type Value

Id Varchar 15 key
Password Varchar 15
Tabel 3.1 Admin

3.4.7.2 Rancangan Tabel 2

Berikut ini adalah rancangan tabel 2, tabel ini berisikan data-data
user, dan tabel ini berguna untuk menyimpan data-data user
 Field Type Value
Lapangan Varchar 10
Nama Varchar 30
No. Hp Varchar 15
E-mail Varchar 20
Tanggal Varchar 12
Jam Mulai Varchar 10
Jam Selesai Varchar 10
Tabel 3.2 Data User