BAB IV

PERANCANGAN SISTEM

4.1 Narasi Sistem Baru

Berikut adalah narasi alur sistem yang baru, antara lain :
1. Sistem informasi Komplek Rt Sukamaju ini dirancang dengan dua
tampilan yaitu halaman pengunjung dan admin sebagai administrator
2. Setelah masuk ke alamat Website pengunjung atau warga disuguhkan
dengan tampilan halaman beranda yang memuat Slide poto kegiatan
warga.
3. Pengunjung langsung dapat memilih jenis Informasi yang dicari dengan
kategori yang telah tercantum di menu bilah navigasi atau Navbar.
Jenis kategori yang pada menu Navbar antara lain:
1. Beranda
Laman yang memuat Slide gambar Komplek Sukamaju
2. Profil Komplek Sukamaju
Memuat tentang letak geografis Komplek
Sukamaju,jumlah penduduk dan segala sesuatu yang
berhubungan dengan profil Komplek Sukamaju itu sendiri.
3. Agenda Kegiatan
4. Merupakan laman yang berisikan jadwal kegiatan yang
baru akan dilaksanakan
5. Laporan
Pada menu laporan terdapat dua Sub menu yaitu
a) Laporan Kegiatan
b) Menu Laporan Kegiatan merupakan laman
yang memuat dokumentasi kegiatan, serta
laporan keseluruhan kegiatan itu sendiri
c) Iuran
d) Sub menu Iuran Keamanan merupakan
laman yang memuat daftar warga yang
 telah membayar Iuran maupun warga yang
belum membayar iuran keamanan.

4. Selanjutnya Pengunjung dapat meninggalkan pesan sebagai laporan

dengan memilih Menu Whatsapp atau Facebook dibagian Footer yang
akan mengarahkan anda ke Sosial media milik admin.
5. Sistem Informasi Komplek Sukamaju hanya dapat di update oleh
Admin.

4.2 Perancangan Sistem

4.2.1 Use case Diagram
Use case atau Diagram Use case adalah permodelan untuk kelakuan
(behavior) sistem informasi yang akan dibuat. Use case mendeskripsikan sebuah
interaksi antara satu atau lebih aktor dengan sistem informasi yang akan dibuat.
Tepatnya. use case berguna untuk mengetahui fungsi apa saja yang ada di dalam
sebuah sistem informasi dan siapa saja yang berhak menggunakan fungsi-fungsi
itu. Use case Diagram Sistem Sistem informasi Komplek Rt Sukamaju dapat
dilihat pada gambar berikut ini:

2
 Gambar 4.1 Use case Diagram Perancangan Sistem Reservasi

Pada use case diagram di atas terdapat dua actor yang terlibat dalam sistem
yaitu Pengunjung dan admin. Admin dapat mengakses perubahan menu pada link
yang dituju menu social media, Mengubah dan menambahkan isi konten,
mengganti dan mengubah profile website, serta dapat menyembunyikan konten
yang pernah di publikasi.
4.2.2 Skenario Diagram
Detail dari masing-masing use case di atas dapat dilihat pada uraian berikut:
1. Use case Admin
Adapun use case diagram khusus pada login admin dapat dijelaskan melalui
skenario antara admin dengan sistem yang berjalan seperti pada tabel 4.1
seperti berikut ini :

3
 Tabel 4.1 Use case Login Admin

Nama Use case Login Admin

Pelaku Sistem Utama Admin
Diskripsi Use case ini merupakan langkah untuk masuk ke
dalam form administrator
Prakondisi Admin belum login
Bidang khas event: Kegiatan Aktor Respon Sistem
Langkah 1 : Langkah 2 : Sistem
Admin memilih form merespon dengan
administrator menampilkan menu login
administrator

Langkah 3 : Langkah 4: Validasi

Admin menginputkan username dan Password
username dan password
Langkah 5 : Sistem yang
ditampilkan adalah menu
form administrator

Kesimpulan Untuk masuk ke dalam dashboard Admin diperlukan

login administrator untuk mengolah

Post Kondisi Perubahan data administrator dalam database

Skenario diagram antara admin dengan sistem dalam proses pengelolaan

data Slide pada laman beranda dapat dijelaskan seperti pada tabel berikut ini :

Tabel 4.2 Use case mengelola tampilan beranda Sistem informasi Komplek Rt
Sukamaju

Nama Use case Mengelola beranda

Pelaku Sistem Utama Admin
Deskripsi Use case ini merupakan proses untuk mengubah isi
Konten Slide gambar pada halaman beranda

Prakondisi Admin telah login

Bidang khas event: Kegiatan Aktor Respon Sistem

4
 Tabel 4.2 Use case mengelola tampilan beranda Sistem informasi Komplek Rt
Sukamaju(Sambungan)

Langkah 1 : Langkah 2 : Sistem

Admin memilih menu merespon dengan
Beranda menampilkan album gambar
yang telah di upload
Langkah 3 : Langkah 4 : sistem
Admin melakukan Memproses perubahan
perubahan data Gambar lalu
gambar, dengan menyimpannya dalam
menyembunyikan database
gambar lalu
mengupload poto baru
lalu tekan savr
Bidang Alternatif 1 Langkah 1.1: Langkah 1.2 : Sistem
Admin memilih aksi menghapus data Gambar
hapus gambar lama yang dipilih tersebut
atau
Kesimpulan Untuk merubah dan meghapus Gambar pada Slide
Gambar dimenu beranda hanya dapat dilakukan oleh
admin
Post Kondisi Perubahan data Gambar pada slide gambar didalam
database

Scenario diagram dalam pengelolaan laman Profil komplek Sukamaju,

penambahan halaman tentang kami, kontak kami dapat dijelaskan seperti tabel
berikut ini :

Tabel 4.3 Use case Mengelola Profil Komplek Sukamaju

Nama Use case Mengelola tampilan website

Pelaku Sistem Utama Admin
Deskripsi Use case ini merupakan proses untuk melakukan
menginput isi laman Profil Komplek Sukamaju
Prakondisi Admin telah login
Bidang khas event: Kegiatan Aktor Respon Sistem
Langkah 1 : Langkah 2 : Sistem
Admin memilih form merespon dengan
Profil Komplek menampilkan menu profil
Sukamaju Komplek Sukamaju dalam

5
 tampilan admin
Langkah 3 :
Admin dapat mengedit
data isi dan menghapus
data profil Komplek
Sukamaju

Tabel 4.4 Use case Mengelola Profil Komplek Sukamaju (sambungan)

Langkah 4 : Langkah 5 : Sistem

Simpan data menyimpan data
tersebut
Kesimpulan Untuk mengubah data isi profil Komplek Sukamaju
diperlukan login administrator

Post Kondisi Perubahan data profil dalam database

Tabel 4.5 Use case Mengelola Data Agenda Kegiatan

Nama Use case Mengelola Agenda Kegiatan

Pelaku Sistem Utama Admin
Diskripsi Use case ini merupakan proses menambahkan Daftar
Agenda Kegiatan dan menentukan kategori Kegiatan
luar komplek atau dalam komplek
Prakondisi Admin telah login
Bidang khas event: Kegiatan Aktor Respon Sistem
Langkah 1 : Langkah 2 : Sistem
Admin memilih form merespon dengan
Agenda menampilkan tabel daftar
Agenda Kegiatan
Langkah 3 : Langkah 4 : Admin dapat
Admin dapat memilih Status kegiatan
mengedit, menghapus,
atau menambahkan
kegiatan
Langkah 5 : Langkah 6 :
Simpan data Sistem menyimpan data
perubahan tersebut
Kesimpulan Daftar agenda kegiatan dapat di ubah , dihapus, dan
ditambahkan

Post Kondisi Perubahan data user dalam database

6
2. Skenario Diagram Laporan Kegiatan
Skenario diagram Laporan Kegiatan
Tabel 4.6 Skenario Diagram Laporan Kegiatan

Nama Use case Mengelola Laporan Kegiatan

Pelaku Sistem Utama Admin
Diskripsi Use case ini merupakan proses untuk
menambahkan,mengubah,mengupload file dalam
laman Laporan Kegiatan
Prakondisi Admin sudah Login
Bidang khas event: Kegiatan Aktor Respon Sistem
Langkah 1 : Langkah 2 : Sistem
Admin memilih form merespon dengan
laporan menampilkan Submenu
laporan kegiatan dan Iuran
keamanan

Langkah 3 : Langkah 4: Sistem merespon

Admin memilih form dengan menampilkan table
laporan Kegiatan Laporan Kegiatan
Langkah 5 : dari for Langkah 5 : Sistem akan
yang telah ditampilkan menyimpan perubahan di
system Admin dapat database
merubah,menghapus,dan
menambahkan laporan
kegiatan yang telah
terlaksana dan simpan
Kesimpulan Daftar Laporan Kegiatan berada dalam menu Laporan

Post Kondisi Perubahan Isi yang tampil pada laman Laporan

Kegiatan dalam database

Tabel 4.7 Use case Reservasi Iuran keamanan

Nama Use case mengelola data iuran Keamanan

Pelaku Sistem Utama Admin
Diskripsi Use case ini merupakan proses untuk mengelola iuran
keamanan

Prakondisi Admin telah login

7
Bidang khas event: Kegiatan Aktor Respon Sistem

Tabel 4.8 Use case Reservasi Iuran keamanan(sambungan)

Langkah 1 : Langkah 2 : Sistem

Admin memilih form merespon dengan
laporan menampilkan Submenu
Laporan kegiatan dan Iuran
Keamanan
Langkah 3 : Langkah 4 : sistem
Admin memilih Iuran menampilkan daftar nama
Keamanan Warga dan Status sudah
atau belum Iuran
Langkah 5 : Langkah 6 : simpan data
Menentukan status bar
Langkah 7 :
Sistem menyimpan data
dalam dalam data base
Bidang Alternatif 2 Langkah 1.1: Langkah 1.2 : Sistem
Admin dapat mengupdate data
menambahkan daftar
nama warga dan
merubah waktu Iuran
Kesimpulan Daftar nama Warga dapat diubah dan ditambahkan,
begitu juga dengan status yang dapat diubah

Post Kondisi Perubahan status terjadi dalam database

8
4.2.3 Activity Diagram
1. Activity Diagram Login AdminActivity Diagram Login Admin ini
menjelaskan tentang bagaimana Admin memiliki otoritas lebih untuk mengakses
penuh Sistem Informasi. Activity diagram login ini admin memasukkan
username dan password. Kemudian sistem melakukan validasi password yang
diinput oleh admin, apabila terjadi kesalahan maka sistem tidak dapat
meneruskan ke form yang diinginkan dan admin harus login kembali untuk dapat
mengakses form yang diinginkan.

Gambar 4.2 Activity Diagram Login Admin

9
2. Activity Diagram Mengelola Beranda
Activity Diagram Mengelola Beranda ini menjelaskan tentang bagaimana
Admin dapat mengubah tampilan slide gambar sesuai dengan keinginan admin
dengan cara menginput gambar.
Gambar 4.3 Activity Diagram Login Pengguna

Activity Diagram Mengelola Beranda

10
 Activity Diagram Mengelola Profil Komplek Sukamaju.

Gambar 4.4 Activity Diagram Profil Komplek Sukamaju

3. Activity Mengelola Data Agenda Kegiatan

Activity Diagram Mengelola Data Agenda Kegiatan

11
 Gambar 4.5 Activity Diagram Mengelola Data Agenda Kegiatan

4. Activity Diagram Laporan Kegiatan

Activity Diagram Diagram Laporan Kegiatan merupakan proses Publikasi
Laporan kegiatan yang tela.

12
 Gambar 4.6 Activity Diagram Mengelola Data Agenda Kegiatan

4.2.4 Activity Diagram Iuran keamanan

Gambar 4.7 Activity Diagram Mengelola Data Agenda Kegiatan

4.2.5 Activity Sequence diagram

13
 Pada setiap Sequence diagram terdapat aksi aktor yang pertama sekali
adalah terhadap interface . Sequence diagram digunakan untuk menggambarkan
interaksi antar objek dalam waktu yang berurutan. Tetapi pada dasarnya
Sequence diagram digunakan dalam lapisan abstraksi model objek. Kegunaannya
untuk menunjukkan rangkaian pesan yang dikirim antar objek, juga interaksi antar
objek, dan menunjukkan sesuatu yang terjadi pada titik tertentu dalam eksekusi
sistem. Komponen utama Squence diagram terdiri atas objek yang dituliskan
dengan kotak segi empat bernama, pesan diwakili oleh garis dengan tanda panah,
dan waktu yang ditunjukkan dengan proses vertikal. Berikut adalah Sequence
diagram
1. Sequence Diagram Login Admin

Gambar 4.7 Diagram Sequence Login Admin

Pada gambar di atas terdapat empat Class yang terlibat yaitu menu
login administrator, control proses data, tabel user dsan halaman utama user.
Skenario di atas yaitu admin membuka buka form login dan interface
merespon dengan tampilan layar login selanjutnya admin memasukan
username dan password dan sistem akan melakukan proses validasi dan
mengecek di dalam database, apabila sudah benar maka interface akan
menampilkan form halaman utama administrator.

14
2. Sequence Diagram Registrasi penambahan Admin
Gambar di bawah merupakan Sequence Diagram login admin Skenario
pada diagram Squence ini actor yang terlibat yaitu administrator. Skenario awal,
admin akan membuka website dan memilih laman khusus admin. Sistem
menampilkan form tambahkan admin dan selanjutnya admin akan mengisi form
admin baru. Setelah itu admin akan membuat password serta username calon
admin baru.admin akan menyelesaikan pembuatan akun admin baru. sistem akan
memproses pembuatan akun admin yang baru, lalu sistem akan menyimpan ke
dalam database. Selanjutnya interface menampilkan form login admin dan siap
untuk login dengan username dan password yang telah didaftarkan.

Gambar 4.8 Diagram Sequence Registrasi penambahan Admin

15
3. Sequence Diagram Login Admin

Gambar di bawah Adalah Sequence Login Administrator. Dimana pada

diagram Squence ini actor yang terlibat yaitu Administrator. Diagram Sequence
admin diatas menggambarkan peroses admin membuka form login dan interface
merespon dengan tampilan layar login Langkah berikutnya Admin menginput
username dan password lalu sistem akan merespon dengan memproses validasi
dan mengecek di dalam database, apabila sudah benar maka interface akan
menampilkan form Kerja bagi Admin

Gambar 4.9 Diagram Sequence Admin

16
4. Sequence Diagram pengunjung

Gambar di bawah merupakan Sequence Pengunjung Sistem Informasi .

Skenario pada diagram Sequence ini actor yang terlibat yaitu Pengunjung.
Pengunjung dapat memilih menu yang ada dibagian atas atau bagian navigation
bar
Untuk memilih sub menu yang berhubungan dengan Informasi apa yang
pengunjung cari. Dan setelah itu Program akan memproses apa yang pengunjung
lakukan. Dan interface akan menampilkan seluruh informasi yang telah disajikan
oleh seorang administrator.

Gambar 4.10 Diagram Sequence Diagram pengunjung

17
 Gambar 4.11 Diagram Class Proses Reservasi Lapangan

4.2.6 Class Diagram

Class diagram berfungsi untuk memperlancar pengembang dan
mendapatkan struktur sistem serta menghasilkan sebuah rancangan sistem yang
baik, berikut class diagram Pada sistem ini dapat diperhatikan pada gambar 4.11

4.2.6.1 Spesifikasi File

Spesifikasi file pada database yang digunakan dalam merancang website
yang digunakan di dalam program rancangan bangun ini terdiri dari file-file data.
Adapun penjelasan dari spesifikasi file sebagai berikut :
Tabel Admin
Nama table : Admin

18
 Primary : id_admin

Tabel 4.7 Spesifikasi File User

Nama field Tipe data Ukuran Keterangan

Id_admin Int 7 Primary Key
Username Varchar 50 -
Password Varchar 50 -
Nama Varchar 30 -
Tgl_lahir Date - -
Jenis_kelamin Enum - -
No_telepone Varchar 15 -
Alamat Varchar 50 -
jabatan Varchar 30 -
Pada table 4.7 Spesifikasi nama field admin dalam Sistem Informasi
Komplek Sukamaju, tipe data, ukuran dan keterangan yang ada pada table Admin
di dalam database Sistem Informasi Komplek Sukamaju yang akan dibangun
oleh penulis tugas akhir.

4.3 Perancangan Layout Masukan

Perancangan layout masukan Sistem Informasi Komplek Sukamaju adalah
sebagai berikut :
i. Perancangan Halaman Awal Website Reservasi Lapangan Futsal
Rancangan Halaman Awal Website Reservasi Lapangan futsal ini adalah
rancangan yang digunakan oleh calon penyewa untuk melihat tampilan website
yang berisikan informasi mengenai jadwal Reservasi yang aktif tersewa, menu
tentang kami, dan menu hubungi kami yang berisi tentang alamat.

19
Gambar 4.12 Tampilan Awal Website Sistem Informasi Komplek Sukamaju

HOME LIHAT JADWAL RESERVASI TENTANG KAMI HUBUNGI KAMI AKUN

FUTSAL BAROKAH

WELCOME

20
4.3.2 Perancangan Halaman Login
Rancangan Halaman login ini adalah sekilas form login admin untuk
dapat melakukan akses pada website dan mengupdate seluruh isi konten dari
Website Sistem Informasi Komplek Sukamaju. Tampilan login ini hanya memuat
menu , input username dan password.

FUTSAL BAROKAH LIHAT JADWAL AKUN

Login

Username

XXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXX
Password

XXXXXXXXXXXXXXXXXXXXXXXXX

MASUK DAFTAR

Gambar 4.13 Rancangan Halaman Login Admin

21
4.3.3 Perancangan Halaman Tambah Data Klub
Rancangan halaman tambah data klub ini digunakan calon penyewa untuk
melihat no penyewa, nama klub , penanggung jawab yang harus di input oleh
penyewa.

Welcome, User

FUTSAL BAROKAH RESERVASI LAPANGAN RESERVASI LAPANGAN AKTIF

Data klub

NOMOR PENYEWA NAMA KLUB PENANGGUNG JAWAB

9999999999999 XXXXXXXXXXXXX XXXXXXXXXXXXXXXXXX

TAMBAH DATA KLUB

Gambar 4.14 Rancangan Halaman Tambah Data Klub

22
4.3.4 Perancangan Halaman Tambah Data Klub
Rancangan halaman tambah data klub ini digunakan user /calon penyewa
untuk membuat data klub sebelum melakukan Reservasi lapangan. Dalam
tampilan menu ini terdiri dari nomor penyewa, nama klub dan penanggung jawab.

FUTSAL BAROKAH RESERVASI LAPANGAN RESERVASI LAPANGAN AKTIF Welcome, User

Tambah Data klub

Nama klub

TAMBAH KLUB

Gambar 4.15 Rancangan Halaman Tambah Data Klub

23
4.3.5 Perancangan Halaman Status Reservasi Futsal
Rancangan halaman status reservasi futsal ini digunakan untuk calon
penyewa melakukan transaksi Reservasi lapangan Pada form ini user atau calon
penyewa dapat menghapus transaksi Reservasi dengan menekan tombol batal.

Welcome, User
FUTSAL HOME RESERVASI JADWAL RESERVASI LAPANGAN KONTAK KAMI TENTANG KAMI
BERMAIN FUTSAL
BAROKAH AKTIF

Data Reservasi Lapangan Futsal

KODE TRANSAKSI TANGGAL WAKTU HARGA SEWA NAMA PENYEWA STATUS AKSI

XXXXXXXXXXXXXX 99999999999 999999 9999999999 XXXXXXXXXXXXXX SELESAI, RESERVASI

BATAL
9999999999 XXXXXXXXXXXXXX BELUM

Gambar 4.16 Rancangan Halaman Status Reservasi Futsal

24
4.3.6 Perancangan Halaman Jadwal dan Reservasi Lapangan
Rancangan halaman jadwal dan reservasi lapangan digunakan untuk
user/calon penyewa yang telah membooking jadwal dan jam pesan pada waktu
yang telah ditentukan . Pada form ini user atau calon penyewa dapat memesan
jadwal.

FUTSAL RESERVASI LAPANGAN KONTAK TENTANG

HOME RESERVASI JADWAL
BAROKAH BERMAIN FUTSAL AKTIF KAMI KAMI Welcome, User

Jadwal klub

Lihat Tanggal

DD-MM-YY

SUBMIT

Pesan Pada Jam

999999

PESAN JADWAL

Gambar 4.17 Rancangan Halaman Jadwal dan Reservasi Lapangan

25
4.3.7 Perancangan Halaman Reservasi Lapangan Futsal Yang Tersedia
Rancangan halaman reservasi lapangan futsal yang tersedia ini gunakan
untuk user/calon penyewa menentukan tanggal melakukan reservasi dan dapat
melakukan pesa pada jam tertentu

FUTSAL RESERVASI JADWAL RESERVASI LAPANGAN KONTAK TENTANG

HOME AKTIF KAMI Welcome, User
BERMAIN FUTSAL KAMI
BAROKAH
Jadwal klub
Status Reservasi

08.00 WIB 10.00 WIB 12.00 WIB 14.00 WIB 16.00 WIB 18.00 WIB 20.00 WIB

9999 9999 9999 9999 9999 9999 9999

Tanggal

dd-mm-yyyy

Nama Pelanggan
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
X
Pesan Pada Jam

9999999999999999999999999999999999999999999999

PESAN JADWAL

Gambar 4.18 Rancangan Halaman Reservasi Lapangan Futsal yang tersedia

26
4.3.8 Perancangan Halaman Konfirmasi Reservasi
Rancangan halaman konfirmasi reservasi lapangan futsal ini digunakan
untuk user/ calon penyewa melakukan konfirmasi pemesanan yang terdiri dari id
transaksi, kode transaksi, nama pemesan, tanggal , jam main, harga sewa. Pada
form ini user/calon penyewa dapat melakukan pesan dengan cara mengklik
tombol pesan

FUTSAL RESERVASI JADWAL RESERVASI LAPANGAN KONTAK TENTANG

HOME BERMAIN FUTSAL AKTIF KAMI KAMI Welcome, User
BAROKAH

Konfirmasi Pemesanan

Kode Transaksi

XXXXXXXX

Nama Pemesan

XXXXXXX

Tanggal

dd-mm-yyyy

Jam Main

9999999

Harga Sewa
9999999

PESAN

Gambar 4.19 Rancangan Halaman Konfirmasi Reservasi

27
b. Perancangan Layout Keluaran
Perancangan layout keluaran untuk Sistem Informasi Reservasi Lapangan
Futsal Barokah adalah sebagai berikut :
4.4.0 Perancangan Halaman Bukti Transfer
Rancangan Halaman Bukti Transfer ini digunakan user/ calon penyewa
untuk mengupload bukti transfer yang telah dibayar ke nomor rekening admin.
Dan melakukan simpan data dengan cara klik tombol simpan.

FUTSAL RESERVASI JADWAL RESERVASI LAPANGAN KONTAK TENTANG

HOME AKTIF KAMI Welcome, User
BAROKAH BERMAIN FUTSAL KAMI

Upload Bukti Transfer

Harga Sewa / Jam

9999999
9
No. Rekening Admin
9999999
99
Jumlah DP.Panjar

9999999999

Upload Bukti Transfer

Choose File

SIMPAN

Gambar 4.20 Rancangan Halaman Bukti Transfer

28
4.4.1 Perancangan Halaman Login Admin
Rancangan halaman login admin ini adalah form login admin atau calon
penyewa lapangan futsal untuk dapat melakukan akses pada website dan
melakukan proses Reservasi lapangan futsal. Tampilan login ini hanya memuat
menu lihat jadwal, input username dan password.

RESERVASI LAPANGAN FUTSAL LOGIN

Login Admin

Username

X (50)

Password

X (50)

MASUK

Gambar 4.21 Rancangan Login Admin

29
4.4.2 Perancangan Halaman Login Admin
Rancang halaman login admin merupakan rancangan tampilan panel
admin futsal barokah. Pada form ini user/calon penyewa dapat melihat jadwal
Reservasi,blok user dan profile website .

FUTSAL BAROKAH JADWAL BLOK PROFILE ADMIN

RESERVASI USER WEBSITE

Selamat datang Admin

PANEL ADMIN FUTSAL BAROKAH

Gambar 4.22 Rancangan Tampilan Halaman Panel Admin

30
4.4.3 Perancangan Halaman Status Reservasi
Rancangan halaman status Reservasi oleh admin. Pada form ini admin
dapat menghapus dan mengubah status Reservasi jika terjadi kesalahan.

FUTSAL BAROKAH JADWAL BLOK PROFILE ADMIN

RESERVASI USER WEBSITE

STATUS RESERVASI XXXXX SET

KODE TRANSAKSI TANGGAL WAKTU USERNAME STATUS

XXXXXXXX 99999 99999 XXXXXX XXXXXXX

XXXXX
XXXXXX HAPUS
XX

Gambar 4.23 Rancangan Halaman Status Reservasi oleh Admin

31
4.4.4 Perancangan Halaman Konfirmasi Reservasi Lapangan Futsal

Rancangan halaman konfirmasi reservasi lapangan futsal ini adalah

tampilan status Reservasi oleh admin. Pada form ini admin dapat menghapus dan
mengubah status Reservasi jika terjadi kesalahan.

FUTSAL BAROKAH JADWAL BLOK ADMIN

RESERVASI USER

KONFIRMASI RESRVASI LAPANGAN FUTSAL

Kode Transaksi
xxxxxxxxxxxx

Status Reservasi
xxxxxxxxxxxxxx

UBAH KEMBALI

Gambar 4.24 Rancangan Halaman Konfirmasi Reservasi Lapangan Futsal

32
4.4.5 Perancangan Halaman Block User Oleh Admin

Rancangan form block user/calon penyewa oleh admin ini adalah tampilan
blok user/ calon penyewa dalam memesan lapangan futsal. Pada form ini admin
dapat memblok user/ calon penyewa yang main main dalam memesan jadwal
lapangan futsal.

FUTSAL BAROKAH JADWAL BLOK ADMIN

RESERVASI USER

Block User
Masukan CARI
username

USERNAMENAMABLOCK? Block User SET

XXXXXXXX XXXXXXXX XXXXXX

XXXXXXXX XXXXXXX BLOCK

Gambar 4.25 Rancangan Halaman Block User oleh Admin

33
4.4.6 Perancangan Rancangan Halaman Ubah Profile Website

Rancangan form ubah profile website ini adalah tampilan profile dan harga
lapangan futsa barokah. Pada form ini admin dapat mengubah data data pada form
jika terjadi perubahan harga, dan jam bermain pada lapangan futsal yang telah
ditentukan.

FUTSAL BAROKAH UBAH PROFILE ADMIN

JADWAL BLOK
RESERVASI WEB USER

Profile

Nama XXXXXXXXXXXXXXXXXXXXXX
XX

No Handphone 9999999999999

Alamat : XXXXXXXXXXXXXXXXXXXXXX
XXXXXXX

Kode Pos XXXXXXX

Simpan

Harga

Jam Siang 9999999

Jam Malam
9999999

No Rekening 99999999999999

Simpan

Gambar 4.26 Rancangan Halaman Ubah Profile Website

34
c. Tampilan Layout Masukan

Tampilan layout masukan untuk Sistem Informasi Reservasi Lapangan

Futsal Barokah adalah sebagai berikut :
4.4.7 Tampilan Halaman Ubah Profile Website

Tampilan ini menjelaskan cara melakukan reservasi yang cukup mudah

yang bisa dilakukan oleh user / calon penyewa.

Gambar 4.27 Tampilan Awal Website Futsal Barokah

35
4.4.9 Tampilan Halaman Login

Pada halaman tampilan log in ini befungsi untuk masuk ke dalam Sistem
Informasi Reservasi Lapangan Futsal Barokah yang terdapat input username,
password, dan tekan tombol masuk dan daftar. Berikut tampilan halaman login
seperti ini gambar 4.29 dibawah ini :

Gambar 4.28 Form Login Pengguna

36
4.5.0 Tampilan Halaman Daftar

Tampilan ini menjelaskan tentang menu daftar pada Website Reservasi

Lapangan Futsal Barokah . Halaman daftar ini berfungsi untuk calon penyewa
yang belum mempunyai akun dan ingin mendaftar. Halaman ini terdapat inputan
berupa username, password, nama lengkap ,tanggal lahir , jenis kelamin, no
telepon, dan alamat. Berikut Tampilan halaman daftar seperti gambar 4.30
dibawah ini :

Gambar 4.29 Tampilan Form Daftar Akun

37
4.5.1 Tampilan Halaman Data Klub

Tampilan ini menjelaskan tentang menu tambah data klub pada Website
Reservasi Lapangan Futsal Barokah . Halaman daftar ini berfungsi untuk calon
penyewa yang ingin menambah data klub. Halaman ini terdapat inputan berupa
nomor pelanggan, nama klub, dan penanggung jawab. Berikut Tampilan halaman
data klub seperti gambar 4.31 dibawah ini :

Gambar 4.30 Form Data Klub

38
4.5.2 Tampilan Halaman Data Klub

Tampilan ini menjelaskan tentang menu tambah data klub pada Website
Reservasi Lapangan Futsal Barokah . Halaman daftar ini berfungsi untuk calon
penyewa yang ingin menambah data klub. Halaman ini terdapat inputan berupa
nama klub. Berikut Tampilan halaman tambah data klub seperti gambar 4.32
dibawah ini :

Gambar 4.31 Form Tambah Data Klub

39
4.5.3 Tampilan Halaman Jadwal Klub

Tampilan ini menjelaskan tentang menu jadwal klub pada Website

Reservasi Lapangan Futsal Barokah . Halaman jadwal klub ini berfungsi untuk
calon penyewa yang ingin input jadwal klub. Halaman ini terdapat inputan berupa
tanggal , dan jam pesan pada waktu yang telah ditentukan. Berikut Tampilan
halaman jadwal klub seperti gambar 4.33 dibawah ini :

Gambar 4.32 Form Jadwal Klub

40
4.5.4 Tampilan Halaman Reservasi Lapangan Futsal

Tampilan ini menjelaskan tentang menu reservasi lapangan futsal pada

Website Reservasi Lapangan Futsal Barokah . Halaman Reservasi Lapangan
Futsal ini digunakan untuk user/calon penyewa melihat harga sewa dan status
reservasi kosong atau penuh. Halaman ini terdapat inputan berupa tanggal , nama
pelanggan dan jam pesan pada waktu yang telah ditentukan

Gambar 4.33 Form Reservasi Lapangan Futsal

41
4.5.5 Tampilan Halaman Reservasi Lapangan Futsal

Tampilan ini menjelaskan tentang menu reservasi lapangan futsal barokah

pada Website Reservasi Lapangan Futsal Barokah. Halaman reservasi ini
digunakan untuk user/ calon penyewa memesan lapangan. User / calon penyewa
juga bisa membatalkan reservasi jika waktu yang dipesan bertabrakan dengan
waktu penyewa lain.

Gambar 4.34 Form Reservasi Lapangan Futsal

42
4.5.6 Tampilan Halaman Konfirmasi Pemesanan
Tampilan ini menjelaskan tentang menu konfirmasi pemesanan pada
Website Reservasi Lapangan Futsal Barokah. Halaman Konfirmasi pemesanan
ini digunakan user / calon penyewa untuk memesanan jam bermain futsal.

Gambar 4.35 Form Konfirmasi Pemesanan

43
1.10 Tampilan Halaman Upload Bukti DP Reservasi
Tampilan ini menjelaskan tentang upload bukti dp reservasi pada Website
Reservasi Lapangan Futsal Barokah. Halaman upload bukti dp reservasi ini
digunakan user/calon penyewa dalam mengisi data kode transaksi, harga sewa,
no rekening admin, jumlah dp/ panjar dan upload bukti transfer lalu klik tombon
simpan.

Gambar 4.36 Form Upload Bukti DP Reservasi

44
1.11 Tampilan Halaman Kontak Kami
Tampilan ini menjelaskan tentang halaman kontak kami pada Website
Reservasi Lapangan Futsal Barokah. Halaman kontak kami digunakan user/
calon penyewa dalam melihat informasi tentang no telepon dan lokasi pada
futsal barokah.

Gambar 4.38 Form Kontak Kami

45
1.12 Tampilan Halaman Tentang Kami
Tampilan ini menjelaskan tentang halaman tentang kami pada Website
Reservasi Lapangan Futsal Barokah. Halaman tentang kami digunakan user/
calon penyewa dalam melihat kapan sejarah berdirinya Futsal Barokah lokasi

lapangan futsal barokah.

Gambar 4.39 Form Tentang Kami

46
1.13 Tampilan Halaman Form Profil Akun
Tampilan ini menjelaskan tentang halaman profil akun pada Website
Reservasi Lapangan Futsal Barokah. Halaman ini digunakan calon penyewa
untuk mengisi biodata yang terdiri dari username, password, nama lengkap ,
tanggal lahir , jenis kelamin, nomor telepon dan alamat.

Gambar 4.40 Form Profil Akun

47
1.14 Tampilan Halaman Login Admin
Tampilan ini menjelaskan tentang halaman login admin pada Website
Reservasi Lapangan Futsal Barokah. Halaman ini digunakan admin untuk
masuk ke dalam sistem informasi reservasi lapangan futsal dengan cara
menginput username dan password .

Gambar 4.37 Form Login Admin

48
1.15 Tampilan Halaman Login Admin

Gambar 4.38 Tampilan Awal Halaman Admin

49
1.16 Tampilan Halaman Konfirmasi Reservasi Lapangan
Tampilan ini menjelaskan tentang halaman konfirmasi reservasi lapangan
futsal pada Website Reservasi Lapangan Futsal Barokah. Halaman ini digunakan
admin untuk mengecek status reservasi dan megubah status reservasi .

Gambar 4.39 Konfirmasi Reservasi Lapangan

50
1.17 Tampilan Halaman Laporan Reservasi Futsal
Tampilan ini menjelaskan tentang halaman laporan reservasi lapangan
futsal pada Website Reservasi Lapangan Futsal Barokah. Halaman ini
digunakan untuk menampilkan laporan data reservasi futsal.

Gambar 4.40 Laporan Reservasi Futsal

51
 DAFTAR PUSTAKA

Afiffudin, M., Harfizar, & Yuliana, K. (2017). Perancangan Sistem Informasi

Pendataan Karyawan pada Perusahaan Jasa Berbasis Web. Perancangan Sistem
Informasi Pendataan Karyawan Pada Perusahaan Jasa Berbasis We, 3(2), 190–
207.

Aprillia, C., Astuti, E., & Dewantara, R. (2017). ANALISIS SISTEM

INFORMASI RESERVASI HOTEL (Studi Pada Sistem Informasi Reservasi
Dewarna Hotel Letjen Sutoyo Malang). Jurnal Administrasi Bisnis S1 Universitas
Brawijaya, 44(1), 111–117.

Aslah, T. Y., Wowor, H. F., & Tulenan, V. (2017). Perancangan Animasi 3D

Objek Wisata Museum Budaya Watu Pinawetengan. Jurnal Teknik Informatika,
11(1). https://doi.org/10.35793/jti.11.1.2017.16922

Ayu, F., & Permatasari, N. (2018). perancangan sistem informasi pengolahan data
PKL pada divisi humas PT pegadaian. Jurnal Infra Tech, 2(2), 12–26. Retrieved
from http://journal.amikmahaputra.ac.id/index.php/JIT/article/download/33/25

Bulla, C., Bakanetti, S., Bhosale, J., Patil, K., & Gujanal, P. (2017). My Campus
Android Application. International Journal of Engineering Science and
Computing, 7(6), 12631–12632.

Dea Yuzistin, dkk. (2016). Sistem Informasi Administrasi Siswa Berbasis

Website pada SMA Islam Putradarma Bekasi. Bina Insani ICT Journal, 3(1),
234–352.

Febrida, N. (2017). Sistem informasi kursus komputer pada LPK budiman

semarang. Jurnal Universitas Dian Nuswantoro Semarang.

Firman, A., Wowor, H. F., & Najoan, X. (2016). Sistem Informasi Perpustakaan
Online Berbasis Web. E-Journal Teknik Elektro Dan Komputer, 5(2), 29–36.

Fitriana, S., Widiyanto, A., & Ishmah, D. D. (2020). Sistem Informasi

Penjadwalan Kursus Berbasis Website Pada LPK Perwira Purbalingga, 9(5), 1–8.

Hardiyanti, S., Albar, F. M., & Ramadhona, K. R. A. (2017). Inventarisasi

Manajemen Aset Berbasis Online Pada PD. BPR Kerta Raharja Cabang Balaraja.
Jurnal SENSI, 3(2), 252–262.

Hermawan, R., Hidayat, A., & Utomo, V. G. (2016). Sistem Informasi

Penjadwalan Kegiatan Belajar Mengajar Berbasis Web (Studi Kasus : Yayasan
Ganesha Operation Semarang). Indonesian Journal on Software Engineering
Audit, 2(1), 31–38.

Hidayati, D. F., & Suyono. (2018). Analisis Perancangan Sistem Informasi E-

52
Goverment pada Pekon Bulukarto. STMIK Pringsewu, (09), 237–243.

Jubilee. (2018). HTML, PHP, dan MySQL untuk Pemula. Jakarta: PT. Elexmedia
Komputindo.

Khaidir, K., & Maulina, N. (2018). Gambaran Tingkat Stres Pada Lansia Di Panti
Jompo Kota Lhokseumawe Tahun 2017. AVERROUS: Jurnal Kedokteran Dan
Kesehatan Malikussaleh, 4(1), 17. https://doi.org/10.29103/averrous.v4i1.801

Kristanto, A. (2018). Perancangan Sistem Informasi dan Aplikasinya (Edisi

Revi). Yogyakarta: Penerbit Gava Media.

Minarsih, D., & Oktavia, D. (2018). Perancangan Sistem Informasi Booking Buku
Berbasis, 4(1), 20–34.

Mulyani, S. (2016). Metode dan Analisis Perancangan Sistem. Bandung: Abdi

Sistematika.

Mulyati, Tarmizi, R., & Panugali, A. (2018). Sistem Informasi Absensi Berbasis
Web Pada Badan, 4(2), 117–127.

Mulyono, A. (2017). Buku Pintar Futsal. Jakarta: Anugrah.

Nurmalasari, Anna, & Arissusandi, R. (2019). Rancang Bangun Sistem Informasi

Akuntansi Laporan Laba Rugi Berbasis Web. Jurnal Sains Dan Manajemen, 7(2),
6–14.

Prihandoyo, T. (2018). Unified Modeling Language (UML) Model Untuk

Pengembangan Sistem Informasi Akademik Berbasis Web. Jurnal Informatika:
Jurnal Pengembangan IT, 3(1), 126–129.

Rinduanita, F. Y. (2017). Rancang Bangun Sistem Informasi Kursus Mengemudi

Berbasis Web pada Lembaga Kursus Mengemudi Berlian. Jurnal Manajemen
Informatika, 7(2), 73–82.

Rosa, A. S., & Shalahuddin, M. (2015). Rekayasa Perangkat Lunak Terstruktur

dan Berorientasi Objek. Bandung: Informatika Bandung.

Rusmana, A. (2016). Pengantar Pengolahan Data dan Informasi. Analisis Sistem

Informasi, 1–26.

Santi, I. H. (2020). Analisa Perancangan Sistem. Jawa Tengah: PT. Natasya

Expanding Management.

Saputra, A. (2012). Sistem Informasi Nilai Akademik untuk Panduan Skripsi.

Jakarta: PT. Elexmedia Komputindo.

Sarjan, -, Erniwati, S., & Sriasih, -. (2017). Sistem Informasi Pengolahan Barang

53
Masuk dan Barang Keluar Berbasis Web Pada Bank BRI Unit Pemenang.
Explore, 7(2), 25. https://doi.org/10.35200/explore.v7i2.102

Sasmito, G. W. (2017). Penerapan Metode Waterfall Pada Desain Sistem

Informasi Geografis Industri Kabupaten Tegal. Jurnal Informatika:Jurnal
Pengembangan IT (JPIT), 2(1), 6–12.

Sidik, F., & Rahmawati, M. (2018). Perancangan Sistem Informasi Pendaftaran

Siswa Baru Berbasis Web Pada SMK Bina Putra Jakarta. Paradigma, 20(2), 1.

Subagia, A. (2018). Membangun Aplikasi Web dengan Metode OOP. Jakarta:

Penerbit PT. Elex Media Komputindo.

Sugiarti, E. (2018). Pengaruh Stres Kerja Terhadap Kinerja Karyawan Pada PT.
PLN (Persero) Area Bintaro Tangsel. JURNAL SeMaRaK, 1(2).
https://doi.org/10.32493/smk.v1i2.1808

Wijaya, M. A., Faqih, & Setiawidayat, S. (2017). Perancangan Dan Pembuatan

Portal Reservasi Rumah Sakit Berbasis Web di Kota Malang. Prosiding SENTIA
2017 – Politeknik Negeri Malang, 9, 113–118.

Winardi , Farida & Dicky, H. (2017). Rancang Bangun Sistem Informasi

Manajemen Bengkel (Studi Kasus : CV . Anugrah Bogor). IJSE – Indonesian
Journal on Software Engineering, 3(2), 8–14. Retrieved from
https://ejournal.bsi.ac.id/ejurnal/index.php/ijse/article/view/2813

Yani, S. A., Vivian, Rachmansyah, & Rivan, M. E. Al. (2018). Question

answering sistem menggunakan metode rule based dengan dataset sejarah
kerajaan sriwijaya, (x), 1–10.

Zufria dan Azhari. (2017). Web-Based Applications in Calculation of Family

Heritage ( Science of Faroidh ) QUERY : Jurnal Sistem Informasi. Jurnal Sistem
Informasi, 5341(April), 50–60.

54
 DAFTAR RIWAYAT HIDUP

DATA PRIBADI

NPM : 2018220018

Nama : Lina Khoirunisa

Tempat/Tgl. Lahir : Palembang, 02 Februari 2001

Agama : Islam

Alamat : Jalan Harapan Sukawinatan Lorong Kelapa , RT.36,

RW.10 Kec.Sukarami, Kab.Palembang.

Telepon/HP : 089502152040

RIWAYAT PENDIDIKAN

SD Negeri 146 Palembang

SMP Negeri 26 Palembang

SMA Muhammadiyah 1 Palembang

DATA KELUARGA

Nama Ayah : Sahidin

Tempat/Tgl. Lahir : Ulak Segara, 17 Januari 1968

Agama : Islam

Alamat : Jalan Harapan Sukawinatan Lorong Kelapa , RT.36,

RW.10 Kec.Sukarami, Kab.Palembang.

Pekerjaan : Guru

Nama Ibu : Khoiriah

Tempat/Tgl. Lahir : Palembang, 27 Mei 1972

55
Agama : Islam

Alamat : Jalan Harapan Sukawinatan Lorong Kelapa , RT.36,

RW.10 Kec.Sukarami, Kab.Palembang.

Pekerjaan : Guru

56
SURAT BALASAN SURVEY

57
KARTU BIMBINGAN

58
59
SURAT TIDAK PLAGIAT

60