56
3.4.2 Perancangan Antarmuka
Spesifikasi antarmuka merupakan suatu bentuk tampilan dari program yang akan dibuat untuk kebutuhan interface dengan user. Spesifikasi antarmuka terdiri dari Perancangan
tampilan menu, tampilan form, tampilan pesan, keluaran dan jaringan semantik.
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-
Kalender
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-
Submit Batal
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-
Vote
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