Perancangan Antarmuka Pengunjung Perancangan Antarmuka

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