3.6 Perancangan Sistem
3.6.2 Perancangan Antarmuka
3.6.2.1 Perancangan Form
Perancangan form bertujuan untuk memberikan gambaran pada setiap halaman sistem. Perancangan yang akan diimplementasikan, yaitu:
1. Halaman awal aplikasi sewa perangkat komputer pertamina dapat dilihat pada gambar 3.30. Header Halaman Awal Logo H0 Login Username Password Nama Layer : H0 Ukuran Layar : 1024 x 768 Font : arial Warna Background : Putih
· Klik Login untuk masuk H1
Gambar 3.30 Halaman awal aplikasi kontrak sewa pertamina
2. Halaman utama aplikasi sewa perangkat komputer pertamina dapat dilihat pada gambar 3.31.
Header Halaman H1 Logo H1 Nama Layer : H1 Ukuran Layar : 1024 x 768 Font : arial Warna Background : Putih
· Klik Data kontrak sewa untuk masuk H2
· Klik detaik kontrak untuk masuk H3
· Klik perangkat komputer untuk masuk H4
· Klik BALP untuk masuk H5
· Klik Report untuk masuk H6
· Klik logout untuk halaman H0
Data Kontrak sewa Detail Kontrak Perangkat Komputer
BALP Report Logout
Gambar 3.31 Halaman utama kontrak sewa pertamina 3. Halaman data kontrak sewa dapat dilihat pada gambar 3.32.
Header Logo H2 Nama Layer : H2 Ukuran Layar : 1024 x 768 Font : arial Warna Background : Putih
· Klik Data kontrak sewa untuk masuk H2
· Klik detaik kontrak untuk masuk H3
· Klik perangkat komputer untuk masuk H4
· Klik BALP untuk masuk H5
· Klik Report untuk masuk H6
· Klik logout untuk masuk H0
· Klik tambah data unuk masuk H7
Data Kontrak sewa Detail Kontrak Perangkat Komputer BALP Report Logout Data Kontrak
Data Kontrak sewa Tambah Data
Tabel data Kontrak
4. Halaman Detail Kontrak sewa pada aplikasi sewa perangkat komputer pertamina dapat dilihat pada gambar 3.33.
Header Logo H3 Nama Layer : H3 Ukuran Layar : 1024 x 768 Font : arial Warna Background : Putih
· Klik Data kontrak sewa untuk masuk H2
· Klik detaik kontrak untuk masuk H3
· Klik perangkat komputer untuk masuk H4
· Klik BALP untuk masuk H5
· Klik Report untuk masuk H6
· Klik logout untuk masuk H0
· Klik tambah detail untuk masuk halaman H8
Data Kontrak sewa Detail Kontrak Perangkat Komputer
BALP Report Logout
Detail Kontrak Sewa
Tabel Detail Kontrak Sewa
Tambah Detail
Gambar 3.33 Halaman detail kontrak sewa
5. Halaman perangkat komputer aplikasi sewa perangkat komputer pertamina dapat dilihat pada gamabar 3.34.
Header Logo H4 Nama Layer : H4 Ukuran Layar : 1024 x 768 Font : arial Warna Background : Putih
· Klik Data kontrak sewa untuk masuk H2
· Klik detaik kontrak untuk masuk H3
· Klik perangkat komputer untuk masuk H4
· Klik BALP untuk masuk H5
· Klik Report untuk masuk H6
· Klik logout untuk masuk H0
· Klik tambah perangkat untuk masuk H9
Data Kontrak sewa Detail Kontrak Perangkat Komputer
BALP Report Logout
Data Perangkat Komputer
Tabel Data Perangkat Komputer
Tambah perangkat
6. Halaman BALP aplikasi sewa perangakat komputer pertamina dapat dilihat pada gambar 3.35. Header Logo H5 Nama Layer : H5 Ukuran Layar : 1024 x 768 Font : arial Warna Background : Putih
· Klik Data kontrak sewa untuk masuk H2
· Klik detaik kontrak untuk masuk H3
· Klik perangkat komputer untuk masuk H4
· Klik BALP untuk masuk H5
· Klik Report untuk masuk H6
· Klik logout untuk masuk H0
· Klik tambah untuk masuk H10
· Klik Cetak untuk masuk H11
Data Kontrak sewa Detail Kontrak Perangkat Komputer BALP Report Logout Data BALP
Tabel Data BALP
Tambah Cetak
Gambar 3.35 Halaman BALP
7. Halaman cetak report aplikasi sewa perangkat komputer pertamina dapat dilihat pada gambar 3.36.
Header Logo H6 Nama Layer : H6 Ukuran Layar : 1024 x 768 Font : arial Warna Background : Putih
· Klik Data kontrak sewa untuk masuk H2
· Klik detaik kontrak untuk masuk H3
· Klik perangkat komputer untuk masuk H4
· Klik BALP untuk masuk H5
· Klik Report untuk masuk H6
· Klik logout untuk masuk H0
· Klik cetak untuk mencetak/print
Data Kontrak sewa Detail Kontrak Perangkat Komputer BALP Report Logout Report Cetak Nomor Kontrak * Nama Perangkat
8. Halaman tambah data kontrak sewa aplikasi sewa perangkat komputer pertamina dapat dilihat pada gambar 3.37.
Header Logo H7 Nama Layer : H7 Ukuran Layar : 1024 x 768 Font : arial Warna Background : Putih
· Klik Data kontrak sewa untuk masuk H2
· Klik detaik kontrak untuk masuk H3
· Klik perangkat komputer untuk masuk H4
· Klik BALP untuk masuk H5
· Klik Report untuk masuk H6
· Klik logout untuk masuk H0
· Klik tambah data unuk masuk H7
Data Kontrak sewa Detail Kontrak Perangkat Komputer BALP Report Logout Data Kontrak
Data Kontrak sewa Tambah Data
Simpan Nomor Kontrak * Nama Vendor * Periode Kontrak *
Gambar 3.37 Halaman tambah data kontrak
9. Halaman tambah detail kontrak aplikasi sewa perangkat komputer pertamina dapat dilihat pada gambar 3.38.
Header Logo H8 Nama Layer : H8 Ukuran Layar : 1024 x 768 Font : arial Warna Background : Putih
· Klik Data kontrak sewa untuk masuk H2
· Klik detaik kontrak untuk masuk H3
· Klik perangkat komputer untuk masuk H4
· Klik BALP untuk masuk H5
· Klik Report untuk masuk H6
· Klik logout untuk masuk H0
Data Kontrak sewa Detail Kontrak Perangkat Komputer
BALP Report Logout
Tambah Detail Kontrak
Simpan Nomor Kontrak * Nama Pegawai * Nama Perangkat* SN1 * SN2 * SN3 * Pilih Keterangan * Baik Rusak
10. Halaman tambah data perangkat komputer aplikasi sewa perangkat pertamina dapat dilihat pada gambar 3.39.
Header Logo H9 Nama Layer : H9 Ukuran Layar : 1024 x 768 Font : arial Warna Background : Putih
· Klik Data kontrak sewa untuk masuk H2
· Klik detaik kontrak untuk masuk H3
· Klik perangkat komputer untuk masuk H4
· Klik BALP untuk masuk H5
· Klik Report untuk masuk H6
· Klik logout untuk masuk H0
Data Kontrak sewa Detail Kontrak Perangkat Komputer
BALP Report Logout
Tambah Data perangkat Komputer
Simpan Nama Perangkat * Jenis Perangkat *
Gambar 3.39 Halaman tambah data perangkat komputer
11. Halaman tambah data BALP aplikasi sewa perangkat komputer pertamina dapat dilihat pada gambar 3.40.
Header Logo H10 Nama Layer : H10 Ukuran Layar : 1024 x 768 Font : arial Warna Background : Putih
· Klik Data kontrak sewa untuk masuk H2
· Klik detaik kontrak untuk masuk H3
· Klik perangkat komputer untuk masuk H4
· Klik BALP untuk masuk H5
· Klik Report untuk masuk H6
· Klik logout untuk masuk H0
Data Kontrak sewa Detail Kontrak Perangkat Komputer BALP Report Logout Tambah BALP Simpan Tanggal Nomor Kontrak * Nama Perusahaan *
12. Halaman Cetak BALP aplikasi sewa perangkat komputer pertamina dapat dilihat pada gambar 3.41.
Header Logo H11 Nama Layer : H11 Ukuran Layar : 1024 x 768 Font : arial Warna Background : Putih
· Klik Data kontrak sewa untuk masuk H2
· Klik detaik kontrak untuk masuk H3
· Klik perangkat komputer untuk masuk H4
· Klik BALP untuk masuk H5
· Klik Report untuk masuk H6
· Klik logout untuk masuk H0
· Klik cetak untuk mencetak/print
Data Kontrak sewa Detail Kontrak Perangkat Komputer BALP Report Logout Cetak BALP Cetak Nomor Kontrak * Tanggal/Bulan/Tahun *
Gambar 3.41 Halaman cetak BALP
13. Halaman Login admin aplikasi sewa perangkat komputer pertamina dapat dilihat pada gambar 3.42
Header Halaman Awal Logo A0 Login Username Password Nama Layer : A0 Ukuran Layar : 1024 x 768 Font : arial Warna Background : Putih
· Klik Login untuk masuk A1
14. Halaman admin aplikasi sewa perangkat komputer pertamina dapat dilihat pada gambar 3.43. Header Halaman A1 Logo A1 Nama Layer : A1 Ukuran Layar : 1024 x 768 Font : arial Warna Background : Putih
· Klik user untuk masuk A2
User Logout
Gambar 3.43 Halaman admin
15. Halaman data user aplikasi sewa perangkat komputer pertamina dapat dilihat pada gambar 3.44.
Header Logo A2 Nama Layer : A2 Ukuran Layar : 1024 x 768 Font : arial Warna Background : Putih
· Klik tambah untuk masuk A3
· Klik logout untuk masuk halaman A0
User
Logout User
Tabel data user
Tambah
16. Halaman tambah data user aplikasi sewa perangkat komputer pertamina dapat dilihat pada gambar 3.45.
Header Logo A3 Nama Layer : A3 Ukuran Layar : 1024 x 768 Font : arial Warna Background : Putih
· Klik simpan untuk menyimpan data user baru
· Klik logout utuk masuk A0 User Logout User Simpan username Email Password Confirm Password
Gambar 3.45 Halaman tambah data user