2. Perancangan Struktur Menu Admin
3.4.2 Perancangan Antarmuka
3.4.2.2 Perancangan Antarmuka Admin 1. Perancangan Antarmuka Login
Berikut dapat dilihat perancangan antarmuka Login admin dari pembangunan website Departemen Teknik Elekto dan Teknik Informatika di Pusat Pengembangan dan Pemberdayaan Pendidik dan Tenaga Kependidikan (PPPPTK) Bidang Mesin dan Teknik Industri yang tercantum pada gambar 3.29 dibawah ini:
Gambar 3.29 Perancangan Antarmuka Login
Klik Login menuju A01 Klik Home menuju A02 Klik Tambah Data Staff
menuju A03
Klik Cari Data Staff menuju A04
Klik Edit Data Staff menuju A05
Klik Tambah Jadwal Diklat menuju A06 Klik Cari Jadwal Diklat
menuju A07
Klik Edit Jadwal Diklat menuju A08
Klik Tambah Program Diklat menuju A09 Klik Cari Program Diklat
menuju A10
Klik Edit Program Diklat menuju A11
Klik Tambah Katalog Diklat menuju A12 Klik View Katalog Diklat
menuju A13
Klik View Buku Tamu menuju A14
Klik Logout menuju A01
Header
Username Password
SELAMAT DATANG ADMIN
Footer Nama layar : A01
Ukuran layar : 1150x900
Font : Times New Roman
Warna Backgoround : Putih Abu-Abu A01
Login Admin
70 2. Perancangan Antarmuka Home
Berikut dapat dilihat perancangan antarmuka Home dari pembangunan website Departemen Teknik Elekto dan Teknik Informatika, PPPPTK BMTI Bandung yang tercantum pada gambar 3.30 dibawah ini:
Gambar 3.30 Perancangan Antarmuka Home
Klik Login menuju A01 Klik Home menuju A02 Klik Tambah Data Staff
menuju A03
Klik Cari Data Staff menuju A04
Klik Edit Data Staff menuju A05
Klik Tambah Jadwal Diklat menuju A06 Klik Cari Jadwal Diklat
menuju A07
Klik Edit Jadwal Diklat menuju A08
Klik Tambah Program Diklat menuju A09 Klik Cari Program Diklat
menuju A10
Klik Edit Program Diklat menuju A11
Klik Tambah Katalog Diklat menuju A12 Klik View Katalog Diklat
menuju A13
Klik View Buku Tamu menuju A14
Klik Logout menuju A01
Header
Home
Tambah Data Staff Pencarian Data Staff
Edit Data Staff
Tambah Jadwal Diklat Pencarian Jadwal Diklat
Edit Jadwal Diklat
Tambah Program Diklat Pencarian Program Diklat
Edit Program Diklat
Tambah Katalog Diklat View Katalog Diklat
View Buku Tamu Logout
SELAMAT DATANG ADMIN
Footer Nama layar : A02
Ukuran layar : 1150x900
Font : Times New Roman
Warna Backgoround : Putih Abu-Abu A02 Menu Admin Data Staff Jadwal Diklat Program Diklat Katalog Diklat Buku Tamu
71 3. Perancangan Antarmuka Tambah Staff
Berikut dapat dilihat perancangan antarmuka Tambah Staff dari pembangunan website Departemen Teknik Elekto dan Teknik Informatika, PPPPTK BMTI Bandung yang tercantum pada gambar 3.31 dibawah ini:
Gambar 3.31 Perancangan Antarmuka Tambah Staff
Klik Login menuju A01 Klik Home menuju A02 Klik Tambah Data Staff
menuju A03
Klik Cari Data Staff menuju A04
Klik Edit Data Staff menuju A05
Klik Tambah Jadwal Diklat menuju A06 Klik Cari Jadwal Diklat
menuju A07
Klik Edit Jadwal Diklat menuju A08
Klik Tambah Program Diklat menuju A09 Klik Cari Program Diklat
menuju A10
Klik Edit Program Diklat menuju A11
Klik Tambah Katalog Diklat menuju A12 Klik View Katalog Diklat
menuju A13
Klik View Buku Tamu menuju A14
Klik Logout menuju A01
Header
Home
Tambah Data Staff Pencarian Data Staff
Edit Data Staff
Tambah Jadwal Diklat Pencarian Jadwal Diklat
Edit Jadwal Diklat
Tambah Program Diklat Pencarian Program Diklat
Edit Program Diklat
Tambah Katalog Diklat View Katalog Diklat
View Buku Tamu Logout
Penambahan Staff
Footer Nama layar : A03
Ukuran layar : 1150x900
Font : Times New Roman
Warna Backgoround : Putih Abu-Abu A03 Menu Admin Data Staff Jadwal Diklat Program Diklat Katalog Diklat Buku Tamu NIP Nama Golongan Tambah Staff Simpan Reset
72 4. Perancangan Antarmuka Cari Staff
Berikut dapat dilihat perancangan antarmuka Cari Staff dari pembangunan website Departemen Teknik Elekto dan Teknik Informatika, PPPPTK BMTI Bandung yang tercantum pada gambar 3.32 dibawah ini:
Gambar 3.32 Perancangan Antarmuka Cari Staff
Klik Login menuju A01 Klik Home menuju A02 Klik Tambah Data Staff
menuju A03
Klik Cari Data Staff menuju A04
Klik Edit Data Staff menuju A05
Klik Tambah Jadwal Diklat menuju A06 Klik Cari Jadwal Diklat
menuju A07
Klik Edit Jadwal Diklat menuju A08
Klik Tambah Program Diklat menuju A09 Klik Cari Program Diklat
menuju A10
Klik Edit Program Diklat menuju A11
Klik Tambah Katalog Diklat menuju A12 Klik View Katalog Diklat
menuju A13
Klik View Buku Tamu menuju A14
Klik Logout menuju A01
Header
Home
Tambah Data Staff Pencarian Data Staff
Edit Data Staff
Tambah Jadwal Diklat Pencarian Jadwal Diklat
Edit Jadwal Diklat
Tambah Program Diklat Pencarian Program Diklat
Edit Program Diklat
Tambah Katalog Diklat View Katalog Diklat
View Buku Tamu Logout
Data Staff
Pencarian
Footer Nama layar : A04
Ukuran layar : 1150x900
Font : Times New Roman
Warna Backgoround : Putih Abu-Abu A04 Menu Admin Data Staff Jadwal Diklat Program Diklat Katalog Diklat Buku Tamu CARI
NIP Nama Golongan
X X X X X X X X X X X X X X X
73 5. Perancangan Antarmuka Edit Staff
Berikut dapat dilihat perancangan antarmuka Edit Staff dari pembangunan website Departemen Teknik Elekto dan Teknik Informatika, PPPPTK BMTI Bandung yang tercantum pada gambar 3.33 dibawah ini:
Gambar 3.33 Perancangan Antarmuka Edit Staff
Klik Login menuju A01 Klik Home menuju A02 Klik Tambah Data Staff
menuju A03
Klik Cari Data Staff menuju A04
Klik Edit Data Staff menuju A05
Klik Tambah Jadwal Diklat menuju A06 Klik Cari Jadwal Diklat
menuju A07
Klik Edit Jadwal Diklat menuju A08
Klik Tambah Program Diklat menuju A09 Klik Cari Program Diklat
menuju A10
Klik Edit Program Diklat menuju A11
Klik Tambah Katalog Diklat menuju A12 Klik View Katalog Diklat
menuju A13
Klik View Buku Tamu menuju A14
Klik Logout menuju A01
Header
Home
Tambah Data Staff Pencarian Data Staff
Edit Data Staff
Tambah Jadwal Diklat Pencarian Jadwal Diklat
Edit Jadwal Diklat
Tambah Program Diklat Pencarian Program Diklat
Edit Program Diklat
Tambah Katalog Diklat View Katalog Diklat
View Buku Tamu Logout
Pengeditan Staff
NIP
Footer Nama layar : A05
Ukuran layar : 1150x900
Font : Times New Roman
Warna Backgoround : Putih Abu-Abu A05 Menu Admin Data Staff Jadwal Diklat Program Diklat Katalog Diklat Buku Tamu EDIT
74
6. Perancangan Antarmuka Tambah Jadwal Diklat
Berikut dapat dilihat perancangan antarmuka Tambah Jadwal Diklat dari pembangunan website Departemen Teknik Elekto dan Teknik Informatika, PPPPTK BMTI Bandung yang tercantum pada gambar 3.34 dibawah ini:
Gambar 3.34 Perancangan Antarmuka Tambah Jadwal Diklat
Klik Login menuju A01 Klik Home menuju A02 Klik Tambah Data Staff
menuju A03
Klik Cari Data Staff menuju A04
Klik Edit Data Staff menuju A05
Klik Tambah Jadwal Diklat menuju A06 Klik Cari Jadwal Diklat
menuju A07
Klik Edit Jadwal Diklat menuju A08
Klik Tambah Program Diklat menuju A09 Klik Cari Program Diklat
menuju A10
Klik Edit Program Diklat menuju A11
Klik Tambah Katalog Diklat menuju A12 Klik View Katalog Diklat
menuju A13
Klik View Buku Tamu menuju A14
Klik Logout menuju A01
Header
Home
Tambah Data Staff Pencarian Data Staff
Edit Data Staff
Tambah Jadwal Diklat Pencarian Jadwal Diklat
Edit Jadwal Diklat
Tambah Program Diklat Pencarian Program Diklat
Edit Program Diklat
Tambah Katalog Diklat View Katalog Diklat
View Buku Tamu Logout
Penambahan Jadwal Diklat
Footer Nama layar : A06
Ukuran layar : 1150x900
Font : Times New Roman
Warna Backgoround : Putih Abu-Abu A06 Menu Admin Data Staff Jadwal Diklat Program Diklat Katalog Diklat Buku Tamu Nama Pola Sasaran Tanggal
Tambah Jadwal Diklat
75
7. Perancangan Antarmuka Cari Jadwal Diklat
Berikut dapat dilihat perancangan antarmuka Cari Jadwal Diklat dari pembangunan website Departemen Teknik Elekto dan Teknik Informatika, PPPPTK BMTI Bandung yang tercantum pada gambar 3.35 dibawah ini:
Gambar 3.35 Perancangan Antarmuka Cari Jadwal Diklat
Klik Login menuju A01 Klik Home menuju A02 Klik Tambah Data Staff
menuju A03
Klik Cari Data Staff menuju A04
Klik Edit Data Staff menuju A05
Klik Tambah Jadwal Diklat menuju A06 Klik Cari Jadwal Diklat
menuju A07
Klik Edit Jadwal Diklat menuju A08
Klik Tambah Program Diklat menuju A09 Klik Cari Program Diklat
menuju A10
Klik Edit Program Diklat menuju A11
Klik Tambah Katalog Diklat menuju A12 Klik View Katalog Diklat
menuju A13
Klik View Buku Tamu menuju A14
Klik Logout menuju A01
Header
Home
Tambah Data Staff Pencarian Data Staff
Edit Data Staff
Tambah Jadwal Diklat Pencarian Jadwal Diklat
Edit Jadwal Diklat
Tambah Program Diklat Pencarian Program Diklat
Edit Program Diklat
Tambah Katalog Diklat View Katalog Diklat
View Buku Tamu Logout
Data Jadwal Diklat
Pencarian
Footer Nama layar : A07
Ukuran layar : 1150x900
Font : Times New Roman
Warna Backgoround : Putih Abu-Abu A07 Menu Admin Data Staff Jadwal Diklat Program Diklat Katalog Diklat Buku Tamu CARI No Nama Sasaran X X X X X X X X X X X X X X X Pola Tanggal
76
8. Perancangan Antarmuka Edit Jadwal Diklat
Berikut dapat dilihat perancangan antarmuka Edit Jadwal Diklat dari pembangunan website Departemen Teknik Elekto dan Teknik Informatika, PPPPTK BMTI Bandung yang tercantum pada gambar 3.36 dibawah ini:
Gambar 3.36 Perancangan Antarmuka Edit Jadwal Diklat
Klik Login menuju A01 Klik Home menuju A02 Klik Tambah Data Staff
menuju A03
Klik Cari Data Staff menuju A04
Klik Edit Data Staff menuju A05
Klik Tambah Jadwal Diklat menuju A06 Klik Cari Jadwal Diklat
menuju A07
Klik Edit Jadwal Diklat menuju A08
Klik Tambah Program Diklat menuju A09 Klik Cari Program Diklat
menuju A10
Klik Edit Program Diklat menuju A11
Klik Tambah Katalog Diklat menuju A12 Klik View Katalog Diklat
menuju A13
Klik View Buku Tamu menuju A14
Klik Logout menuju A01
Header
Home
Tambah Data Staff Pencarian Data Staff
Edit Data Staff
Tambah Jadwal Diklat Pencarian Jadwal Diklat
Edit Jadwal Diklat
Tambah Program Diklat Pencarian Program Diklat
Edit Program Diklat
Tambah Katalog Diklat View Katalog Diklat
View Buku Tamu Logout
Pengeditan Jadwal Diklat
Nama Jadwal Diklat
Footer Nama layar : A08
Ukuran layar : 1150x900
Font : Times New Roman
Warna Backgoround : Putih Abu-Abu A08 Menu Admin Data Staff Jadwal Diklat Program Diklat Katalog Diklat Buku Tamu EDIT
77
9. Perancangan Antarmuka Tambah Program Diklat
Berikut dapat dilihat perancangan antarmuka Tambah Program Diklat dari pembangunan website Departemen Teknik Elekto dan Teknik Informatika PPPPTK BMTI Bandung yang tercantum pada gambar 3.37 dibawah ini:
Gambar 3.37 Perancangan Antarmuka Tambah Program Diklat
Klik Login menuju A01 Klik Home menuju A02 Klik Tambah Data Staff
menuju A03
Klik Cari Data Staff menuju A04
Klik Edit Data Staff menuju A05
Klik Tambah Jadwal Diklat menuju A06 Klik Cari Jadwal Diklat
menuju A07
Klik Edit Jadwal Diklat menuju A08
Klik Tambah Program Diklat menuju A09 Klik Cari Program Diklat
menuju A10
Klik Edit Program Diklat menuju A11
Klik Tambah Katalog Diklat menuju A12 Klik View Katalog Diklat
menuju A13
Klik View Buku Tamu menuju A14
Klik Logout menuju A01
Header
Home
Tambah Data Staff Pencarian Data Staff
Edit Data Staff
Tambah Jadwal Diklat Pencarian Jadwal Diklat
Edit Jadwal Diklat
Tambah Program Diklat Pencarian Program Diklat
Edit Program Diklat
Tambah Katalog Diklat View Katalog Diklat
View Buku Tamu Logout
Penambahan Program Diklat
Footer Nama layar : A09
Ukuran layar : 1150x900
Font : Times New Roman
Warna Backgoround : Putih Abu-Abu A09 Menu Admin Data Staff Jadwal Diklat Program Diklat Katalog Diklat Buku Tamu Nama Kompetensi Level Strategi
Tambah Program Diklat
78
10. Perancangan Antarmuka Cari Program Diklat
Berikut dapat dilihat perancangan antarmuka Cari Program Diklat dari pembangunan website Departemen Teknik Elekto dan Teknik Informatika, PPPPTK BMTI Bandung yang tercantum pada gambar 3.38 dibawah ini:
Gambar 3.38 Perancangan Antarmuka Cari Program Diklat
Klik Login menuju A01 Klik Home menuju A02 Klik Tambah Data Staff
menuju A03
Klik Cari Data Staff menuju A04
Klik Edit Data Staff menuju A05
Klik Tambah Jadwal Diklat menuju A06 Klik Cari Jadwal Diklat
menuju A07
Klik Edit Jadwal Diklat menuju A08
Klik Tambah Program Diklat menuju A09 Klik Cari Program Diklat
menuju A10
Klik Edit Program Diklat menuju A11
Klik Tambah Katalog Diklat menuju A12 Klik View Katalog Diklat
menuju A13
Klik View Buku Tamu menuju A14
Klik Logout menuju A01
Header
Home
Tambah Data Staff Pencarian Data Staff
Edit Data Staff
Tambah Jadwal Diklat Pencarian Jadwal Diklat
Edit Jadwal Diklat
Tambah Program Diklat Pencarian Program Diklat
Edit Program Diklat
Tambah Katalog Diklat View Katalog Diklat
View Buku Tamu Logout
Data Program Diklat
Pencarian
Footer Nama layar : A10
Ukuran layar : 1150x900
Font : Times New Roman
Warna Backgoround : Putih Abu-Abu A10 Menu Admin Data Staff Jadwal Diklat Program Diklat Katalog Diklat Buku Tamu CARI No Nama Level X X X X X X X X X X X X X X X Kompetensi Strategi
79
11. Perancangan Antarmuka Edit Program Diklat
Berikut dapat dilihat perancangan antarmuka Edit Program Diklat dari pembangunan website Departemen Teknik Elekto dan Teknik Informatika, PPPPTK BMTI Bandung yang tercantum pada gambar 3.39 dibawah ini:
Gambar 3.39 Perancangan Antarmuka Edit Program Diklat
Klik Login menuju A01 Klik Home menuju A02 Klik Tambah Data Staff
menuju A03
Klik Cari Data Staff menuju A04
Klik Edit Data Staff menuju A05
Klik Tambah Jadwal Diklat menuju A06 Klik Cari Jadwal Diklat
menuju A07
Klik Edit Jadwal Diklat menuju A08
Klik Tambah Program Diklat menuju A09 Klik Cari Program Diklat
menuju A10
Klik Edit Program Diklat menuju A11
Klik Tambah Katalog Diklat menuju A12 Klik View Katalog Diklat
menuju A13
Klik View Buku Tamu menuju A14
Klik Logout menuju A01
Header
Home
Tambah Data Staff Pencarian Data Staff
Edit Data Staff
Tambah Jadwal Diklat Pencarian Jadwal Diklat
Edit Jadwal Diklat
Tambah Program Diklat Pencarian Program Diklat
Edit Program Diklat
Tambah Katalog Diklat View Katalog Diklat
View Buku Tamu Logout
Pengeditan Program Diklat
Nama Program Diklat
Footer Nama layar : A11
Ukuran layar : 1150x900
Font : Times New Roman
Warna Backgoround : Putih Abu-Abu A11 Menu Admin Data Staff Jadwal Diklat Program Diklat Katalog Diklat Buku Tamu EDIT
80
12. Perancangan Antarmuka Tambah Katalog Diklat
Berikut dapat dilihat perancangan antarmuka Tambah Katalog Diklat dari pembangunan website Departemen Teknik Elekto dan Teknik Informatika, PPPPTK BMTI Bandung yang tercantum pada gambar 3.40 dibawah ini:
Gambar 3.40 Perancangan Antarmuka Tambah Katalog Diklat
Klik Login menuju A01 Klik Home menuju A02 Klik Tambah Data Staff
menuju A03
Klik Cari Data Staff menuju A04
Klik Edit Data Staff menuju A05
Klik Tambah Jadwal Diklat menuju A06 Klik Cari Jadwal Diklat
menuju A07
Klik Edit Jadwal Diklat menuju A08
Klik Tambah Program Diklat menuju A09 Klik Cari Program Diklat
menuju A10
Klik Edit Program Diklat menuju A11
Klik Tambah Katalog Diklat menuju A12 Klik View Katalog Diklat
menuju A13
Klik View Buku Tamu menuju A14
Klik Logout menuju A01
Header
Home
Tambah Data Staff Pencarian Data Staff
Edit Data Staff
Tambah Jadwal Diklat Pencarian Jadwal Diklat
Edit Jadwal Diklat
Tambah Program Diklat Pencarian Program Diklat
Edit Program Diklat
Tambah Katalog Diklat View Katalog Diklat
View Buku Tamu Logout
Penambahan Katalog Diklat
Pilih File
Footer Nama layar : A12
Ukuran layar : 1150x900
Font : Times New Roman
Warna Backgoround : Putih Abu-Abu A12 Menu Admin Data Staff Jadwal Diklat Program Diklat Katalog Diklat Buku Tamu Simpan Reset
81
13. Perancangan Antarmuka View Katalog Diklat
Berikut dapat dilihat perancangan antarmuka View Katalog Diklat dari pembangunan website Departemen Teknik Elekto dan Teknik Informatika, PPPPTK BMTI Bandung yang tercantum pada gambar 3.41 dibawah ini:
Gambar 3.41 Perancangan Antarmuka View Katalog Diklat
Klik Login menuju A01 Klik Home menuju A02 Klik Tambah Data Staff
menuju A03
Klik Cari Data Staff menuju A04
Klik Edit Data Staff menuju A05
Klik Tambah Jadwal Diklat menuju A06 Klik Cari Jadwal Diklat
menuju A07
Klik Edit Jadwal Diklat menuju A08
Klik Tambah Program Diklat menuju A09 Klik Cari Program Diklat
menuju A10
Klik Edit Program Diklat menuju A11
Klik Tambah Katalog Diklat menuju A12 Klik View Katalog Diklat
menuju A13
Klik View Buku Tamu menuju A14
Klik Logout menuju A01
Header
Home
Tambah Data Staff Pencarian Data Staff
Edit Data Staff
Tambah Jadwal Diklat Pencarian Jadwal Diklat
Edit Jadwal Diklat
Tambah Program Diklat Pencarian Program Diklat
Edit Program Diklat
Tambah Katalog Diklat View Katalog Diklat
View Buku Tamu Logout
Data Katalog Diklat
Pencarian
Footer Nama layar : A13
Ukuran layar : 1150x900
Font : Times New Roman
Warna Backgoround : Putih Abu-Abu A13 Menu Admin Data Staff Jadwal Diklat Program Diklat Katalog Diklat Buku Tamu CARI Id Nama Size X X X X X X X X X X X X X X X Type
82
14. Perancangan Antarmuka View Buku Tamu
Berikut dapat dilihat perancangan antarmuka View Buku Tamu dari pembangunan website Departemen Teknik Elekto dan Teknik Informatika, PPPPTK BMTI Bandung yang tercantum pada gambar 3.42 dibawah ini:
Gambar 3.42 Perancangan Antarmuka View Buku Tamu
Klik Login menuju A01 Klik Home menuju A02 Klik Tambah Data Staff
menuju A03
Klik Cari Data Staff menuju A04
Klik Edit Data Staff menuju A05
Klik Tambah Jadwal Diklat menuju A06 Klik Cari Jadwal Diklat
menuju A07
Klik Edit Jadwal Diklat menuju A08
Klik Tambah Program Diklat menuju A09 Klik Cari Program Diklat
menuju A10
Klik Edit Program Diklat menuju A11
Klik Tambah Katalog Diklat menuju A12 Klik View Katalog Diklat
menuju A13
Klik View Buku Tamu menuju A14
Klik Logout menuju A01
Header
Home
Tambah Data Staff Pencarian Data Staff
Edit Data Staff
Tambah Jadwal Diklat Pencarian Jadwal Diklat
Edit Jadwal Diklat
Tambah Program Diklat Pencarian Program Diklat
Edit Program Diklat
Tambah Katalog Diklat View Katalog Diklat
View Buku Tamu Logout
Buku Tamu
Pencarian
Footer Nama layar : A14
Ukuran layar : 1150x900
Font : Times New Roman
Warna Backgoround : Putih Abu-Abu A14 Menu Admin Data Staff Jadwal Diklat Program Diklat Katalog Diklat Buku Tamu CARI Nama Pesan X X X X X X X X X X X X X X X Waktu
83
