Perancangan Database Perancangan User Interface

68

2. Perancangan Database

Perancangan basis data untuk sistem informasi praktik kerja industri berbasis website menunjukkan perancangan basis data yang digunakan untuk menyimpan data dan relasi antar tabel pada sistem basis data. Perancangan basis data ditunjukkan oleh gambar 23 dibawah ini : Gambar 23. Perancangan Database

3. Perancangan User Interface

Perancangan user interface antarmuka terdiri dari perancangan halaman- halaman yang terlihat oleh pengguna pengunjung. Perancangan user interface terdiri dari perancangan halaman depan, halaman admin, halaman guru pembimbing, dan halaman siswa. Perancangan user interface meliputi perancangan layout, navigasi, warna, dan typeface. Pada penelitian ini, jenis 69 layout yang digunakan adalah three-column layout untuk halaman depan dan left- column untuk halaman hak akses user. Navigasi menu yang digunakan yaitu horizontal bar dan vertical column. Menu horizontal navigasi atau top navigation digunakan untuk halaman depan website homepage dengan jumlah menu 5 dan menu vertikal navigasi atau sidebar menu untuk halaman dashboard atau halaman hak akses user dengan jumlah menu 7. Peletakan menu navigasi tersebut sesuai dengan pernyataan pressman tentang webapp design dimana navigasi horizontal digunakan untuk fungsi utama yang berjumlah 4-7 dan vertikal navigasi untuk fungsi utama lebih dari 7 Pressman, 2011:389-390. Warna dasar yang digunakan adalah ungu, abu-abu, dan biru. Sedangkan typeface yang digunakan adalah Sans Serif karena cocok untuk tampilan dilayar monitor. Perancangan user interface digambarkan sebagai berikut : a. Rancangan interface halaman awal front-end home Rancangan interface antarmuka halaman awal untuk sistem informasi praktik kerja industri digambarkan oleh gambar 24 berikut ini : Gambar 24. Rancangan Interface Halaman Awal 70 b. Rancangan interface halaman informasi front-end informasi Rancangan interface antarmuka halaman informasi untuk sistem informasi praktik kerja industri digambarkan oleh gambar 25 berikut ini : Gambar 25. Rancangan Interface Halaman Informasi c. Rancangan interface halaman industri front-end industri Rancangan interface antarmuka halaman industri untuk sistem informasi praktik kerja industri digambarkan oleh gambar 26 berikut ini : Gambar 26. Rancangan Interface Halaman Industr i 71 d. Rancangan interface halaman pedoman front-end pedoman Rancangan interface antarmuka halaman pedoman untuk sistem informasi praktik kerja industri digambarkan oleh gambar 27 berikut ini : Gambar 27. Rancangan Interface Halaman Pedoman e. Rancangan interface halaman login front-end login Rancangan interface antarmuka halaman login untuk sistem informasi praktik kerja industri digambarkan oleh gambar 28 berikut ini : Gambar 28. Rancangan Interface Halaman Login 72 f. Rancangan interface halaman admin back-end Rancangan interface antarmuka halaman administrator back-end untuk sistem informasi praktik kerja industri digambarkan oleh gambar 29 berikut ini : Gambar 29. Rancangan Interface Halaman Admin g. Rancangan interface halaman guru pembimbing back-end Rancangan interface antarmuka halaman guru pembimbing back-end untuk sistem informasi praktik kerja industri digambarkan oleh gambar 30 berikut ini : Gambar 30. Rancangan Interface Halaman Guru Pembimbing 73 h. Rancangan interface halaman siswa back-end Rancangan interface antarmuka halaman siswa back-end untuk sistem informasi praktik kerja industri digambarkan oleh gambar 31 berikut ini : Gambar 31. Rancangan Interface Halaman Siswa Perancangan interface antarmuka untuk halaman fungsi masing-masing aktor dapat dilihat pada halaman lampiran.

C. Implementasi Sistem