BAB IV RANCANGAN SISTEM USULAN 4. Analisa Perancangan Web 4.1. Spesifikasi Rancangan Web Spesifikasi Rancangan program yang penulis gunakan dalam perancangan program pada tugas akhir ini terdiri: 1. Rancangan Bentuk Tampilan Masukan Bentuk dokumen masukan merupakan dokumen atau data yang dibuat sebagai acuan dalam pengaturan data pada aplikasi perancangan program web ini. 2. Bentuk Keluaran Bentuk tampilan keluaran adalah segala bentuk dokumen hasil pencatatan laporan dari proses masukan 3. Rancangan Struktur Navigasi Struktur navigasi berfungsi untuk menggambarkan dengan jelas hubungan dan rantai kerja seluruh elemen yang akan digunakan dalam aplikasi. a. Spesifikasi Halaman Login Gambar 4.1 Spesifikasi Halaman Login 60
61 : Login : Login.php : Untuk masuk kedalam halaman 4.1.1 Struktur Navigasi Admin Pusat Login HOME PROFILE INPUT GAJI REPORT LOGOUT ABSENSI GAJI CUTI Gambar 4.2 Struktur Navigasi Admin Pusat a. Spesifikasi Halaman Admin Pusat Home Gambar 4.3 Spesifikasi Halaman Admin Pusat Home
62 : Home admin pusat : home_pusat.php : Menampilkan Halaman Admin Pusat b. Spesifikasi Halaman Admin Pusat Profile Gambar 4.4 Spesifikasi Halaman Admin Pusat Profile : Profile admin pusat : profile_pusat.php : Menampilkan Halaman profile Admin Pusat
63 c. Spesifikasi Halaman Admin Pusat Report Absensi Gambar 4.5 Spesifikasi Halaman Admin Pusat Report Absensi : Report Absensi : report_absensi.php : untuk melihat absensi yang di input oleh admin cadang setiap bulannya.
64 d. Spesifikasi Halaman Admin Pusat Input Gaji Gambar 4.6 Spesifikasi Halaman Admin Pusat Input Gaji : Input Gaji : input_gaji.php : untuk menginput data gaji spg setiap bulannya yang akan di tampilkan di halaman slip gaji spg.
65 e. Spesifikasi Halaman Admin Pusat Report Gaji Gambar 4.7 Spesifikasi Halaman Admin Pusat Report Gaji : Report Gaji : report_gaji.php : untuk melihat hasil absensi yang telah di export
66 f. Spesifikasi Halaman Admin Pusat Report Cuti Gambar 4.8 Spesifikasi Halaman Admin Pusat Report Cuti : Report Cuti : report_cuti.php : untuk melihat pengajuan cuti spg
67 4.1.2 Struktur Navigasi Admin Cabang Login HOME PROFILE INPUT LOGOUT Gambar 4.9 Struktur Navigasi Admin Cabang a. Spesifikasi Halaman Admin Cabang Home Gambar 4.10 Spesifikasi Halaman Admin Cabang Home : Home admin Cabang : home_cabang.php : Menampilkan Halaman Admin Cabang
68 b. Spesifikasi Halaman Admin Cabang Profile Gambar 4.11 Spesifikasi Halaman Admin Cabang Profile : Profile admin cabang : profile_cabang.php : Menampilkan Halaman profile Admin Cabang
69 c. Spesifikasi Halaman Admin Cabang Input Data Absensi Gambar 4.12 Spesifikasi Halaman Admin Cabang Input Data Absensi : Input Data Absensi : input_absensi.php : untuk mengupload data absensi spg
70 4.1.3 Struktur Navigasi SPG (Sales Promotion Girl) Login HOME PROFILE CUTI GAJI LOGOUT Gambar 4.13 Struktur Navigasi SPG a. Spesifikasi Halaman SPG Home Gambar 4.14 Spesifikasi Halaman SPG Home : Home SPG : home_spg.php : Menampilkan Halaman SPG
71 b. Spesifikasi Halaman SPG Profile Gambar 4.15 Spesifikasi Halaman SPG Profile : Profile SPG : profile_spg.php : Menampilkan Halaman profile Admin Cabang
72 c. Spesifikasi Halaman Input Form Pengajuan Cuti Spg Gambar 4.16 Spesifikasi Halaman Input Form Pengajuan Cuti Spg : Input Form Cuti : input_cuti.php : untuk mengajukan cuti
73 d. Spesifikasi Halaman Report Cuti Spg Gambar 4.17 Spesifikasi Halaman Report Cuti Spg : Report Cuti : cuti.php : Menampilkan hasil dari cuti yang sudah diajukan.
74 e. Spesifikasi Halaman Slip Gaji SPG Gambar 4.18 Spesifikasi Halaman Slip Gaji SPG : Slip Gaji : slip_gaji.php : Menampilkan perincian dan total gaji setiap bulan.
75 4.1.4 Rancangan Keluaran a. Rancangan keluaran Slip Gaji Gambar 4.19 Rancangan Keluaran Slip Gaji b. Rancangan Keluaran Laporan Gaji Gambar 4.20 Rancangan Keluaran Laporan Gaji