Perancangan Form 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 Gambar3.32 Halaman data kontrak sewa 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 Gambar 3.34 Halaman perangkat komputer 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 mencetakprint Data Kontrak sewa Detail Kontrak Perangkat Komputer BALP Report Logout Report Cetak Nomor Kontrak Nama Perangkat Gambar 3.36 Halaman cetak report 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 Gambar 3.38 Halaman tambah detail kontrak 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 Gambar 3.40 Halaman tambah data BALP 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 mencetakprint Data Kontrak sewa Detail Kontrak Perangkat Komputer BALP Report Logout Cetak BALP Cetak Nomor Kontrak TanggalBulanTahun 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 Gambar 3.42 Halaman Login Admin 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 Gambar 3.44 Halaman data user 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

3.6.2.2 Jaringan simantik