69
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
Login
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
NIP Nama
Golongan
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
Simpan Reset
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
No Nama
Sasaran Pola
Tanggal
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
Simpan Reset
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
No Nama
Level Kompetensi
Strategi
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
3.4.2.3 Perancangan Pesan
Kategori