BAB 3 ANALISIS DAN PERANCANGAN SISTEM
3.1 Analisis Sistem
3.2.4 Perancangan Antarmuka
3.2.4.3 Perancangan Antarmuka Kepala Cabang
a. Perancangan Halaman Beranda
Berikut merupakan perancangan antarmuka halaman beranda terlihat pada gambar 3.78.
Klik Data Master untuk menuju KC04 Klik Profil untuk menuju KC05 Klik Data Pelayanan untuk menuju KC06 Klik Billing Sytem untuk menuju KC07 Klik Saran untuk menuju KC08 Klik Pengumuman untuk menuju KC09 Klik Logout untuk menuju KC01
Ukuran : 1024x786 Warna Background : Biru Font : Arial KC03 Header Footer Beranda Data Master Profil Data Pelayanan Billing System Saran Pengumuman Logout Beranda
Gambar 3.78 Perancangan Halaman Beranda Kepala Cabang
b. Perancangan Halaman Menu Data Master
Berikut merupakan perancangan antarmuka pilihan menu data master terlihat pada gambar 3.79.
Data Golongan
Data Petugas Data Kategori
Klik Data Golongan untuk menuju KC04.1 Klik Data Kategori untuk menuju KC04.2 Klik Data Petugas untuk menuju KC03.3 Klik Data Bagian untuk menuju KC03.4 Klik Data Cabang untuk menuju KC03.5
Ukuran : 1024x786 Warna Background : Biru
Font : Arial
KC04
Data Bagian Data Cabang
c. Perancangan Halaman Data Golongan
Berikut merupakan perancangan antarmuka halaman data golongan terlihat pada gambar 3.80.
Klik Data Master untuk menuju KC04 Klik Profil untuk menuju KC05 Klik Data Pelayanan untuk menuju KC06 Klik Billing Sytem untuk menuju KC07 Klik Saran untuk menuju KC08 Klik Pengumuman untuk menuju KC09 Klik Logout untuk menuju KC01 Klik refresh untuk memperbaharui data golongan
Ukuran : 1024x786 Warna Background : Biru Font : Arial KC04.1 Header Footer Beranda Data Master Profil Data Pelayanan Billing System Saran Pengumuman Logout Data Golongan Tabel golongan refresh
Gambar 3.80 Perancangan Halaman Data Golongan
d. Perancangan Halaman Data Kategori
Berikut merupakan perancangan antarmuka halaman data kategori terlihat pada gambar 3.81.
Klik Beranda untuk menuju KC03 Klik Data Master untuk menuju KC04 Klik Profil untuk menuju KC05 Klik Data Pelayanan untuk menuju KC06 Klik Billing Sytem untuk menuju KC07 Klik Saran untuk menuju KC08 Klik Pengumuman untuk menuju KC09 Klik Logout untuk menuju KC01 Klik tambah untukmenuju KC04.2.1 Klik edit untuk menuju KC04.2.2
Ukuran : 1024x786 Warna Background : Biru Font : Arial KC04.2 Header Footer Beranda Data Master Profil Data Pelayanan Billing System Saran Pengumuman Logout Data Kategori Tabel kategori tambah edit
e. Perancangan Halaman Tambah Data Kategori
Berikut merupakan perancangan antarmuka halaman tambah data kategori terlihat pada gambar 3.82.
Klik Beranda untuk menuju KC03 Klik Data Master untuk menuju KC04 Klik Profil untuk menuju KC05 Klik Data Pelayanan untuk menuju KC06 Klik Billing Sytem untuk menuju KC07 Klik Saran untuk menuju KC08 Klik Pengumuman untuk menuju KC09 Klik Logout untuk menuju KC01 Klik tambah akan menampilkan M21 jika berhasil atau M22 jika tidak berhasil
Ukuran 1024x786 warna sesuai dengan setting Widows Font 12 arial warna hitam
KC04.2.1 Header Footer Beranda Data Master Profil Data Pelayanan Billing System Saran Pengumuman Logout Data Kategori Kode kategori Nama kategori Batal Tambah
Gambar 3.82 Perancangan Halaman Tambah Data Kategori
f. Perancangan Halaman Ubah Data Kategori
Berikut merupakan perancangan antarmuka halaman ubah data kategori terlihat pada gambar 3.83.
Klik Beranda untuk menuju KC03 Klik Data Master untuk menuju KC04 Klik Profil untuk menuju KC05 Klik Data Pelayanan untuk menuju KC06 Klik Billing Sytem untuk menuju KC07 Klik Saran untuk menuju KC08 Klik Pengumuman untuk menuju KC09 Klik Logout untuk menuju KC01 Klik ubah akan menampilkan M23 jika berhasil atau M24 jika tidak berhasil
Ukuran : 1024x786 Warna Background : Biru Font : Arial KC04.2.2 Header Footer Beranda Data Master Profil Data Pelayanan Billing System Saran Pengumuman Logout Data Kategori Kode kategori Nama kategori Ubah Batal
g. Perancangan Halaman Data Petugas
Berikut merupakan perancangan antarmuka halaman data petugas terlihat pada gambar 3.84. Header Footer Beranda Data Master Profil Data Pelayanan Billing System Saran Pengumuman Logout Data Petugas Tabel petugas tambah edit hapus
Klik Beranda untuk menuju KC03 Klik Data Master untuk menuju KC04 Klik Profil untuk menuju KC05 Klik Data Pelayanan untuk menuju KC06 Klik Billing Sytem untuk menuju KC07 Klik Saran untuk menuju KC08 Klik Pengumuman untuk menuju KC09 Klik Logout untuk menuju KC01 Klik tambah untukmenuju KC04.3.1 Klik edit untuk menuju KC04.3.2 Klik hapus untuk menuju KC04.3.3 KC04.3
Ukuran : 1024x786 Warna Background : Biru Font : Arial
Gambar 3.84 Perancangan Halaman Data Petugas
h. Perancangan Halaman Tambah Data Petugas
Berikut merupakan perancangan antarmuka halaman data golongan terlihat pada gambar 3.85.
Klik Beranda untuk menuju KC03 Klik Data Master untuk menuju KC04 Klik Profil untuk menuju KC05 Klik Data Pelayanan untuk menuju KC06 Klik Billing Sytem untuk menuju KC07 Klik Saran untuk menuju KC08 Klik Pengumuman untuk menuju KC09 Klik Logout untuk menuju KC01 Klik tambah akan menampilkan M25 jika berhasil atau M26 jika tidak berhasil
Ukuran : 1024x786 Warna Background : Biru Font : Arial KC04.3.1 Header Footer Beranda Data Master Profil Data Pelayanan Billing System Saran Pengumuman Logout Data Petugas Data Petugas NIPP Level Batal Bagian Cabang Telepon Email Tambah
i. Perancangan Halaman Ubah Data Petugas
Berikut merupakan perancangan antarmuka halaman ubah data petugas terlihat pada gambar 3.86.
Klik Beranda untuk menuju KC03 Klik Data Master untuk menuju KC04 Klik Profil untuk menuju KC05 Klik Data Pelayanan untuk menuju KC06 Klik Billing Sytem untuk menuju KC07 Klik Saran untuk menuju KC08 Klik Pengumuman untuk menuju KC09 Klik Logout untuk menuju KC01 Klik Tambah akan menampilkan M27 jikaberhasil atau M28 jika tidak berhasil
Ukuran : 1024x786 Warna Background : Biru Font : Arial KC04.3.2 Header Footer Beranda Data Master Profil Data Pelayanan Billing System Saran Pengumuman Logout Data Petugas Data Petugas NIPP Level Batal Bagian Cabang Ubah
Gambar 3.86 Perancangan Halaman Ubah Data Petugas
j. Perancangan Halaman Hapus Data Petugas
Berikut merupakan perancangan antarmuka halaman hapus data petugas terlihat pada gambar 3.87.
Klik Beranda untuk menuju KC03 Klik Data Master untuk menuju KC04 Klik Profil untuk menuju KC05 Klik Data Pelayanan untuk menuju KC06 Klik Billing Sytem untuk menuju KC07 Klik Saran untuk menuju KC08 Klik Pengumuman untuk menuju KC09 Klik Logout untuk menuju KC01 Klik Hapus akan menampilkan M29 jika berhasil atau M30 jika tidak berhasil
Ukuran : 1024x786 Warna Background : Biru Font : Arial KC04.3.3 Header Footer Beranda Data Master Profil Data Pelayanan Billing System Saran Pengumuman Logout Data Petugas Data Petugas NIPP Bagian Hapus Batal
k. Perancangan Halaman Data Bagian
Berikut merupakan perancangan antarmuka halaman data bagian terlihat pada gambar 3.88.
Klik Beranda untuk menuju KC03 Klik Data Master untuk menuju KC04 Klik Profil untuk menuju KC05 Klik Data Pelayanan untuk menuju KC06 Klik Billing Sytem untuk menuju KC07 Klik Saran untuk menuju KC08 Klik Pengumuman untuk menuju KC09 Klik Logout untuk menuju KC01 Klik tambah untuk menuju KC04.4.1 Klik edit untuk menuju KC04.4.2
Ukuran : 1024x786 Warna Background : Biru Font : Arial KC04.4 Header Footer Beranda Data Master Profil Data Pelayanan Billing System Saran Pengumuman Logout Data Bagian Tabel bagian tambah edit
Gambar 3.88 Perancangan Halaman Data Bagian
l. Perancangan Halaman Tambah Data Bagian
Berikut merupakan perancangan antarmuka halaman tambah data bagian terlihat pada gambar 3.89.
Klik Beranda untuk menuju KC03 Klik Data Master untuk menuju KC04 Klik Profil untuk menuju KC05 Klik Data Pelayanan untuk menuju KC06 Klik Billing Sytem untuk menuju KC07 Klik Saran untuk menuju KC08 Klik Pengumuman untuk menuju KC09 Klik Logout untuk menuju KC01 Klik tambah akan menampilkan M31 jika berhasil atau M32 jika tidak berhasil
Ukuran : 1024x786 Warna Background : Biru Font : Arial KC04.4.1 Header Footer Beranda Data Master Profil Data Pelayanan Billing System Saran Pengumuman Logout Data Bagian Kode bagian Nama bagian Batal Tambah
m. Perancangan Halaman Ubah Data Bagian
Berikut merupakan perancangan antarmuka halaman ubah data bagian terlihat pada gambar 3.90.
Klik Beranda untuk menuju KC03 Klik Data Master untuk menuju KC04 Klik Profil untuk menuju KC05 Klik Data Pelayanan untuk menuju KC06 Klik Billing Sytem untuk menuju KC07 Klik Saran untuk menuju KC08 Klik Pengumuman untuk menuju KC09 Klik Logout untuk menuju KC01 Klik Ubah akan menampilkan M33 jika berhasil atau M34 jika tidak berhasil
Ukuran : 1024x786 Warna Background : Biru Font : Arial KC04.4.2 Header Footer Beranda Data Master Profil Data Pelayanan Billing System Saran Pengumuman Logout Data Bagian Kode bagian Nama bagian Ubah Batal
Gambar 3.90 Perancangan Halaman Ubah Data Bagian
n. Perancangan Halaman Data Cabang
Berikut merupakan perancangan antarmuka halaman data cabang terlihat pada gambar 3.91.
Klik Beranda untuk menuju KC03 Klik Data Master untuk menuju KC04 Klik Profil untuk menuju KC05 Klik Data Pelayanan untuk menuju KC06 Klik Billing Sytem untuk menuju KC07 Klik Saran untuk menuju KC08 Klik Pengumuman untuk menuju KC09 Klik Logout untuk menuju KC01 Klik refresh untuk memperbaharui data cabang
Ukuran : 1024x786 Warna Background : Biru Font : Arial KC04.5 Header Footer Beranda Data Master Profil Data Pelayanan Billing System Saran Pengumuman Logout Data Cabang Tabel golongan refresh
o. Perancangan Halaman Menu Profil
Berikut merupakan perancangan antarmuka pilihan menu profil terlihat pada gambar 3.92.
Ubah Profil Ubah Password
Klik Ubah Profil untuk menuju KC05.1 Klik Ubah Password untuk menuju KC05.2
Ukuran : 1024x786 Warna Background : Biru
Font : Arial
KC05
Gambar 3.92 Perancangan Halaman Menu Profil Kepala Cabang
p. Perancangan Halaman Ubah Profil
Berikut merupakan perancangan antarmuka halaman ubah profil terlihat pada gambar 3.93.
Klik Beranda untuk menuju KC03 Klik Data Master untuk menuju KC04 Klik Profil untuk menuju KC05 Klik Data Pelayanan untuk menuju KC06 Klik Billing Sytem untuk menuju KC07 Klik Saran untuk menuju KC08 Klik Pengumuman untuk menuju KC09 Klik Logout untuk menuju KC01 Klik ubah akan muncul M03 jika berhasil, atau M04 jika tidak berhasil
Ukuran : 1024x786 Warna Background : Biru
Font : Arial KC05.1 Header Footer Profil NIPP Nama Cabang Bagian Telepon Email Batal Ubah Beranda Data Master Profil Data Pelayanan Billing System Saran Pengumuman Logout
q. Perancangan Halaman Ubah Password
Berikut merupakan perancangan antarmuka halaman ubah password terlihat pada gambar 3.94.
Klik Beranda untuk menuju KC03 Klik Data Master untuk menuju KC04 Klik Profil untuk menuju KC05 Klik Data Pelayanan untuk menuju KC06 Klik Billing Sytem untuk menuju KC07 Klik Saran untuk menuju KC08 Klik Pengumuman untuk menuju KC09 Klik Logout untuk menuju KC01 Klik ubah akan muncul M05 jika berhasil, atau M06 jika tidak berhasil
Ukuran : 1024x786 Warna Background : Biru
Font : Arial KC05.2 Header Footer Beranda Data Master Profil Data Pelayanan Billing System Saran Pengumuman Logout Profil Password Lama Password Baru Password Ulangi password Batal Ubah
Gambar 3.94 Perancangan Halaman Ubah Password Kepala Cabang
r. Perancangan Halaman Menu Data Pelayanan
Berikut merupakan perancangan antarmuka menu data pelayanan terlihat pada gambar 3.95.
Data Keluhan
Data Reduksi Data Pemeriksaan
Klik Data Keluhan untuk menuju KC06.1 Klik Data Pemeriksaan untuk menuju KC06.2 Klik Data Reduksi untuk menuju KC06.3
Ukuran : 1024x786
Warna Background : Biru
Font : Arial
KC06
s. Perancangan Halaman Data Keluhan
Berikut merupakan perancangan antarmuka halaman data keluhan terlihat pada gambar 3.96.
Klik Beranda untuk menuju KC03 Klik Data Master untuk menuju KC04 Klik Profil untuk menuju KC05 Klik Data Pelayanan untuk menuju KC06 Klik Billing Sytem untuk menuju KC07 Klik Saran untuk menuju KC08 Klik Pengumuman untuk menuju KC09 Klik Logout untuk menuju KC01
Ukuran : 1024x786 Warna Background : Biru Font : Arial KC06.1 Header Footer Beranda Data Master Profil Data Pelayanan Billing System Saran Pengumuman Logout Data Keluhan Tabel keluhan
Gambar 3.96 Perancangan Halaman Data Keluhan
t. Perancangan Halaman Data Pemeriksaan
Berikut merupakan perancangan antarmuka halaman data pemeriksaan terlihat pada gambar 3.97.
Klik Beranda untuk menuju KC03 Klik Data Master untuk menuju KC04 Klik Profil untuk menuju KC05 Klik Data Pelayanan untuk menuju KC06 Klik Billing Sytem untuk menuju KC07 Klik Saran untuk menuju KC08 Klik Pengumuman untuk menuju KC09 Klik Logout untuk menuju KC01
Ukuran : 1024x786 Warna Background : Biru Font : Arial KC06.2 Header Footer Beranda Data Master Profil Data Pelayanan Billing System Saran Pengumuman Logout Data Pemeriksaan Tabel bap
u. Perancangan Halaman Data Reduksi
Berikut merupakan perancangan antarmuka halaman data reduksi terlihat pada gambar 3.98.
Klik Beranda untuk menuju KC03 Klik Data Master untuk menuju KC04 Klik Profil untuk menuju KC05 Klik Data Pelayanan untuk menuju KC06 Klik Billing Sytem untuk menuju KC07 Klik Saran untuk menuju KC08 Klik Pengumuman untuk menuju KC09 Klik Logout untuk menuju KC01
Ukuran : 1024x786 Warna Background : Biru Font : Arial KC06.3 Header Footer Beranda Data Master Profil Data Pelayanan Billing System Saran Pengumuman Logout Data Reduksi Tabel reduksi
Gambar 3.98 Perancangan Halaman Data Reduksi
v. Perancangan Halaman Saran
Berikut merupakan perancangan antarmuka halaman data saran terlihat pada gambar 3.99.
Klik Beranda untuk menuju KC03 Klik Data Master untuk menuju KC04 Klik Profil untuk menuju KC05 Klik Data Pelayanan untuk menuju KC06 Klik Billing Sytem untuk menuju KC07 Klik Pengumuman untuk menuju KC09 Klik Logout untuk menuju KC01
Ukuran : 1024x786 Warna Background : Biru Font : Arial KC08 Header Footer Beranda Data Master Profil Data Pelayanan Billing System Saran Pengumuman Logout Data Saran Tabel saran Gambar 3.99 Perancangan Halaman Saran
w. Perancangan Halaman Pengumuman
Berikut merupakan perancangan antarmuka halaman pengumuman terlihat pada gambar 3.100.
Klik Beranda untuk menuju KC03 Klik Data Master untuk menuju KC04 Klik Profil untuk menuju KC05 Klik Data Pelayanan untuk menuju KC06 Klik Billing Sytem untuk menuju KC07 Klik Saran untuk menuju KC08 Klik Logout untuk menuju KC01
Ukuran : 1024x786 Warna Background : Biru Font : Arial KC09 Header Footer Beranda Data Master Profil Data Pelayanan Billing System Saran Pengumuman Logout Data pengumuman Tabel umum
Gambar 3.100 Perancangan Halaman Pengumuman