2. Perancangan Struktur Menu Admin
3.4.2 Perancangan Antarmuka
3.4.2.1 Perancangan Antarmuka Pengunjung 1.Perancangan Antarmuka Home
Berikut dapat dilihat perancangan antarmuka menu utama (Home) dari pembangunan website Departemen Teknik Elekto dan Teknik Informatika di Pusat Pengembangan dan Pemberdayaan Pendidik dan Tenaga Kependidikan (PPPPTK) Bidang Mesin dan Teknik Industri pada Gambar 3.16 dibawah ini:
Gambar 3.16 Perancangan Antarmuka Home
Menu
Anda Pengunjung Ke-
Kalender
Klik Home menuju T01
Klik Profil menuju T02 Klik Diklat menuju
T03
Klik Buku Tamu menuju T04
Klik Vote menuju T05 Klik Profil menuju T06 Klik Visi dan Misi
menuju T07 Klik Kerjasama menuju T08 Klik Organisasi menuju T09 Klik Struktur Organisasi menuju T10 Klik Staff menuju T11 Klik Jadwal Diklat
menuju T12
Klik Katalog Diklat menuju T13 Header +Home + Profil + Diklat + Buku Tamu + Vote Angka Kalender Selamat Datang Isi Footer Nama layar : T01 Ukuran layar : 1150x900
Font : Times New Roman
Warna Backgoround : Putih T01
Menu
Anda Pengunjung Ke-
57 2. Perancangan Antarmuka Profil
Berikut dapat dilihat perancangan antarmuka Profil dari pembangunan website Departemen Teknik Elekto dan Teknik Informatika di Pusat Pengembangan dan Pemberdayaan Pendidik dan Tenaga Kependidikan (PPPPTK) Bidang Mesin dan Teknik Industri pada Gambar 3.17 dibawah ini:
Gambar 3.17 Perancangan Antarmuka Profil
Klik Home menuju T01
Klik Profil menuju T02 Klik Diklat menuju
T03
Klik Buku Tamu menuju T04
Klik Vote menuju T05 Klik Profil menuju T06 Klik Visi dan Misi
menuju T07 Klik Kerjasama menuju T08 Klik Organisasi menuju T09 Klik Struktur Organisasi menuju T10 Klik Staff menuju T11 Klik Jadwal Diklat
menuju T12
Klik Katalog Diklat menuju T13
Header
+Home
-Profil Profil
Visi dan Misi Kerjasama +Organisasi + Diklat + Buku Tamu + Vote Angka Kalender Profil Isi Footer Nama layar : T02 Ukuran layar : 1150x900
Font : Times New Roman
Warna Backgoround : Putih T02
Menu
Kalender Anda Pengunjung Ke-
58 3. Perancangan Antarmuka Diklat
Berikut dapat dilihat perancangan antarmuka Diklat dari pembangunan website Departemen Teknik Elekto dan Teknik Informatika di Pusat Pengembangan dan Pemberdayaan Pendidik dan Tenaga Kependidikan (PPPPTK) Bidang Mesin dan Teknik Industri pada Gambar 3.18 dibawah ini:
Gambar 3.18 Perancangan Antarmuka Diklat
Klik Home menuju T01
Klik Profil menuju T02 Klik Diklat menuju
T03
Klik Buku Tamu menuju T04
Klik Vote menuju T05 Klik Profil menuju T06 Klik Visi dan Misi
menuju T07 Klik Kerjasama menuju T08 Klik Organisasi menuju T09 Klik Struktur Organisasi menuju T10 Klik Staff menuju T11 Klik Jadwal Diklat
menuju T12
Klik Katalog Diklat menuju T13 Header +Home +Profil - Diklat Jadwal Diklat Katalog Diklat + Buku Tamu + Vote Angka Kalender Diklat Isi Footer Nama layar : T03 Ukuran layar : 1150x900
Font : Times New Roman
Warna Backgoround : Putih T03
Menu
Kalender Anda Pengunjung Ke-
59 4. Perancangan Antarmuka Buku Tamu
Berikut dapat dilihat perancangan antarmuka Buku Tamu dari pembangunan website Departemen Teknik Elekto dan Teknik Informatika di Pusat Pengembangan dan Pemberdayaan Pendidik dan Tenaga Kependidikan (PPPPTK) Bidang Mesin dan Teknik Industri pada Gambar 3.19 dibawah ini:
Gambar 3.19 Perancangan Antarmuka Buku Tamu
Klik Home menuju T01
Klik Profil menuju T02 Klik Diklat menuju
T03
Klik Buku Tamu menuju T04
Klik Vote menuju T05 Klik Profil menuju T06 Klik Visi dan Misi
menuju T07 Klik Kerjasama menuju T08 Klik Organisasi menuju T09 Klik Struktur Organisasi menuju T10 Klik Staff menuju T11 Klik Jadwal Diklat
menuju T12
Klik Katalog Diklat menuju T13 Header +Home +Profil + Diklat + Buku Tamu + Vote Angka Kalender Buku Tamu Nama Email Situs Pesan
Lihat buku tamu
Footer Nama layar : T04
Ukuran layar : 1150x900
Font : Times New Roman
Warna Backgoround : Putih T04
Menu
Kalender Anda Pengunjung Ke-
60 5. Perancangan Antarmuka Vote
Berikut dapat dilihat perancangan antarmuka Vote dari pembangunan website Departemen Teknik Elekto dan Teknik Informatika di Pusat Pengembangan dan Pemberdayaan Pendidik dan Tenaga Kependidikan (PPPPTK) Bidang Mesin dan Teknik Industri pada Gambar 3.20 dibawah ini:
Gambar 3.20 Perancangan Antarmuka Vote
Klik Home menuju T01
Klik Profil menuju T02 Klik Diklat menuju
T03
Klik Buku Tamu menuju T04
Klik Vote menuju T05 Klik Profil menuju T06 Klik Visi dan Misi
menuju T07 Klik Kerjasama menuju T08 Klik Organisasi menuju T09 Klik Struktur Organisasi menuju T10 Klik Staff menuju T11 Klik Jadwal Diklat
menuju T12
Klik Katalog Diklat menuju T13 Header +Home +Profil + Diklat + Buku Tamu + Vote Angka Kalender Vote Pertanyaan ? o Vote A o Vote B o Vote C o Vote D o Vote E
>> Lihat Hasil Voting
Footer Nama layar : T05
Ukuran layar : 1150x900
Font : Times New Roman
Warna Backgoround : Putih T05
Menu
Kalender Anda Pengunjung Ke-
61 6. Perancangan Antarmuka Profil
Berikut dapat dilihat perancangan antarmuka Profil dari pembangunan website Departemen Teknik Elekto dan Teknik Informatika di Pusat Pengembangan dan Pemberdayaan Pendidik dan Tenaga Kependidikan (PPPPTK) Bidang Mesin dan Teknik Industri pada Gambar 3.21 dibawah ini:
Gambar 3.21 Perancangan Antarmuka Profil
Klik Home menuju T01
Klik Profil menuju T02 Klik Diklat menuju
T03
Klik Buku Tamu menuju T04
Klik Vote menuju T05 Klik Profil menuju T06 Klik Visi dan Misi
menuju T07 Klik Kerjasama menuju T08 Klik Organisasi menuju T09 Klik Struktur Organisasi menuju T10 Klik Staff menuju T11 Klik Jadwal Diklat
menuju T12
Klik Katalog Diklat menuju T13
Header
+Home
-Profil Profil
Visi dan Misi Kerjasama +Organisasi + Diklat + Buku Tamu + Vote Angka Kalender Profil Isi Footer Nama layar : T06 Ukuran layar : 1150x900
Font : Times New Roman
Warna Backgoround : Putih T06
Menu
Kalender Anda Pengunjung Ke-
62 7. Perancangan Antarmuka Visi dan Misi
Berikut dapat dilihat perancangan antarmuka Visi dan Misi dari pembangunan website Departemen Teknik Elekto dan Teknik Informatika di Pusat Pengembangan dan Pemberdayaan Pendidik dan Tenaga Kependidikan (PPPPTK) Bidang Mesin dan Teknik Industri pada Gambar 3.22 dibawah ini:
Gambar 3.22 Perancangan Antarmuka Visi dan Misi
Klik Home menuju T01
Klik Profil menuju T02 Klik Diklat menuju
T03
Klik Buku Tamu menuju T04
Klik Vote menuju T05 Klik Profil menuju T06 Klik Visi dan Misi
menuju T07 Klik Kerjasama menuju T08 Klik Organisasi menuju T09 Klik Struktur Organisasi menuju T10 Klik Staff menuju T11 Klik Jadwal Diklat
menuju T12
Klik Katalog Diklat menuju T13
Header
+Home
-Profil Profil
Visi dan Misi Kerjasama +Organisasi + Diklat + Buku Tamu + Vote Angka Kalender
Visi dan Misi
Isi
Footer Nama layar : T07
Ukuran layar : 1150x900
Font : Times New Roman
Warna Backgoround : Putih T07
Menu
Kalender Anda Pengunjung Ke-
63 8. Perancangan Antarmuka Kerjasama
Berikut dapat dilihat perancangan antarmuka Kerjasama dari pembangunan website Departemen Teknik Elekto dan Teknik Informatika di Pusat Pengembangan dan Pemberdayaan Pendidik dan Tenaga Kependidikan (PPPPTK) Bidang Mesin dan Teknik Industri pada Gambar 3.23 dibawah ini:
Gambar 3.23 Perancangan Antarmuka Kerjasama
Klik Home menuju T01
Klik Profil menuju T02 Klik Diklat menuju
T03
Klik Buku Tamu menuju T04
Klik Vote menuju T05 Klik Profil menuju T06 Klik Visi dan Misi
menuju T07 Klik Kerjasama menuju T08 Klik Organisasi menuju T09 Klik Struktur Organisasi menuju T10 Klik Staff menuju T11 Klik Jadwal Diklat
menuju T12
Klik Katalog Diklat menuju T13
Header
+Home
-Profil Profil
Visi dan Misi Kerjasama +Organisasi + Diklat + Buku Tamu + Vote Angka Kalender Kerjasama Isi Footer Nama layar : T08 Ukuran layar : 1150x900
Font : Times New Roman
Warna Backgoround : Putih T08
Menu
Kalender Anda Pengunjung Ke-
64 9. Perancangan Antarmuka Organisasi
Berikut dapat dilihat perancangan antarmuka Organisasi dari pembangunan website Departemen Teknik Elekto dan Teknik Informatika di Pusat Pengembangan dan Pemberdayaan Pendidik dan Tenaga Kependidikan (PPPPTK) Bidang Mesin dan Teknik Industri pada Gambar 3.24 dibawah ini:
Gambar 3.24 Perancangan Antarmuka Organisasi
Klik Home menuju T01
Klik Profil menuju T02 Klik Diklat menuju
T03
Klik Buku Tamu menuju T04
Klik Vote menuju T05 Klik Profil menuju T06 Klik Visi dan Misi
menuju T07 Klik Kerjasama menuju T08 Klik Organisasi menuju T09 Klik Struktur Organisasi menuju T10 Klik Staff menuju T11 Klik Jadwal Diklat
menuju T12
Klik Katalog Diklat menuju T13
Header
+Home
-Profil Profil
Visi dan Misi Kerjasama -Organisasi Struktur Organisasi Staff + Diklat + Buku Tamu + Vote Angka Kalender Organisasi Isi Footer Nama layar : T09 Ukuran layar : 1150x900
Font : Times New Roman
Warna Backgoround : Putih T09
Menu
Kalender Anda Pengunjung Ke-
65
10. Perancangan Antarmuka Struktur Organisasi
Berikut dapat dilihat perancangan antarmuka Struktur Organisasi dari pembangunan website Departemen Teknik Elekto dan Teknik Informatika di Pusat Pengembangan dan Pemberdayaan Pendidik dan Tenaga Kependidikan (PPPPTK) Bidang Mesin dan Teknik Industri pada Gambar 3.25 dibawah ini:
Gambar 3.25 Perancangan Antarmuka Struktur Organisasi
Klik Home menuju T01
Klik Profil menuju T02 Klik Diklat menuju
T03
Klik Buku Tamu menuju T04
Klik Vote menuju T05 Klik Profil menuju T06 Klik Visi dan Misi
menuju T07 Klik Kerjasama menuju T08 Klik Organisasi menuju T09 Klik Struktur Organisasi menuju T10 Klik Staff menuju T11 Klik Jadwal Diklat
menuju T12
Klik Katalog Diklat menuju T13
Header
+Home
-Profil Profil
Visi dan Misi Kerjasama -Organisasi Struktur Organisasi Staff + Diklat + Buku Tamu + Vote Angka Kalender Struktur Organisasi Isi Footer Nama layar : T10 Ukuran layar : 1150x900
Font : Times New Roman
Warna Backgoround : Putih T10
Menu
Kalender Anda Pengunjung Ke-
66 11. Perancangan Antarmuka Staff
Berikut dapat dilihat perancangan antarmuka Staff dari pembangunan website Departemen Teknik Elekto dan Teknik Informatika di Pusat Pengembangan dan Pemberdayaan Pendidik dan Tenaga Kependidikan (PPPPTK) Bidang Mesin dan Teknik Industri pada Gambar 3.26 dibawah ini:
Gambar 3.26 Perancangan Antarmuka Staff
Klik Home menuju T01
Klik Profil menuju T02 Klik Diklat menuju
T03
Klik Buku Tamu menuju T04
Klik Vote menuju T05 Klik Profil menuju T06 Klik Visi dan Misi
menuju T07 Klik Kerjasama menuju T08 Klik Organisasi menuju T09 Klik Struktur Organisasi menuju T10 Klik Staff menuju T11 Klik Jadwal Diklat
menuju T12
Klik Katalog Diklat menuju T13
Header
+Home
-Profil Profil
Visi dan Misi Kerjasama -Organisasi Struktur Organisasi Staff + Diklat + Buku Tamu + Vote Angka Kalender Staff Isi Footer Nama layar : T11 Ukuran layar : 1150x900
Font : Times New Roman
Warna Backgoround : Putih T11
Menu
Kalender Anda Pengunjung Ke-
67 12. Perancangan Antarmuka Jadwal Diklat
Berikut dapat dilihat perancangan antarmuka Jadwal Diklat dari pembangunan website Departemen Teknik Elekto dan Teknik Informatika di Pusat Pengembangan dan Pemberdayaan Pendidik dan Tenaga Kependidikan (PPPPTK) Bidang Mesin dan Teknik Industri pada Gambar 3.27 dibawah ini:
Gambar 3.27 Perancangan Antarmuka Jadwal Diklat
Klik Home menuju T01
Klik Profil menuju T02 Klik Diklat menuju
T03
Klik Buku Tamu menuju T04
Klik Vote menuju T05 Klik Profil menuju T06 Klik Visi dan Misi
menuju T07 Klik Kerjasama menuju T08 Klik Organisasi menuju T09 Klik Struktur Organisasi menuju T10 Klik Staff menuju T11 Klik Jadwal Diklat
menuju T12
Klik Katalog Diklat menuju T13 Header +Home +Profil - Diklat Jadwal Diklat Katalog Diklat + Buku Tamu + Vote Angka Kalender Jadwal Diklat Isi Footer Nama layar : T12 Ukuran layar : 1150x900
Font : Times New Roman
Warna Backgoround : Putih T12
Menu
Kalender Anda Pengunjung Ke-
68 13. Perancangan Antarmuka Katalog Diklat
Berikut dapat dilihat perancangan antarmuka Katalog Diklat dari pembangunan website Departemen Teknik Elekto dan Teknik Informatika di Pusat Pengembangan dan Pemberdayaan Pendidik dan Tenaga Kependidikan (PPPPTK) Bidang Mesin dan Teknik Industri pada Gambar 3.28 dibawah ini:
Gambar 3.28 Perancangan Antarmuka Katalog Diklat
Klik Home menuju T01
Klik Profil menuju T02 Klik Diklat menuju
T03
Klik Buku Tamu menuju T04
Klik Vote menuju T05 Klik Profil menuju T06 Klik Visi dan Misi
menuju T07 Klik Kerjasama menuju T08 Klik Organisasi menuju T09 Klik Struktur Organisasi menuju T10 Klik Staff menuju T11 Klik Jadwal Diklat
menuju T12
Klik Katalog Diklat menuju T13 Header +Home +Profil - Diklat Jadwal Diklat Katalog Diklat + Buku Tamu + Vote Angka Kalender Katalog Diklat Isi Footer Nama layar : T13 Ukuran layar : 1150x900
Font : Times New Roman
Warna Backgoround : Putih T13
Menu
Kalender Anda Pengunjung Ke-
69
3.4.2.2 Perancangan Antarmuka Admin