Perancangan Interface
c. Perancangan Interface
Untuk membuat web ini agar terlihat sederhana, menarik, dan mudah dimengerti oleh pengguna diperlukan desain antarmuka ( interface ). Desain antarmuka harus dilakukan karena merupakan bagian yang berhubungan langsung dengan pengguna, yaitu segala sesuatu yang dilihat oleh pengguna. Untuk rancangan antarmuka antara lain :
1) Rancangan Tata Letak Rancangan tata letak merupakan langkah awal dalam menentukan letak isi dari pada halaman applikasi. letak isi halaman dibagi menjadi 4 bagian yaitu: Header, Menu, Content dan Footer.
Gambar 3.9 Desain Tata Letak.
Keterangan :
a. Pada header berisi informasi singkat tentang aplikasi logo aplikasi, nama aplikasi.
b. Pada menu berisi link-link pilihan pengguna untuk mengubah tampilan content.
c. content berisi tampilan dari menu yang dipilih.
d. footer berisi informasi pemilik dari aplikasi.
2) Rancangan Halaman Utama Pada bagian halaman utama dimana pengguna akan di perlihatkan tampilan awal ketika mengakses applikasi.pada bagian halaman utama terdapat menu yang menghubungkan ke halaman yang dituju. Adapaun keterangannya sebagai berikut :
1. Unit : untuk menampilkan daftar unit.
2. Material : Untuk menampilkan daftar material.
3. Kriteria : Untuk menampilakan daftar kriteria.
4. Alternatif : untuk Menampilkan daftar Alternatif.
5. Nilai : Untuk menampilkan daftar nilai.
DSS Using SAW algorithm
#Menu Unit Material Kriteria Alternatif Nilai
Selamat Datang
Copy@Spk_SAW.com
Gambar 3.10 Desain Antarmuka Halaman Utama.
3) Rancangan Halaman Satuan Rancangan halaman satuan dipergunakan untuk proses menampilkan, merubah, menamambah dan menghapus data satuan.
DSS Using SAW algorithm
#Menu
Tambah Data
Unit Material
ID Title
Action
Kriteria
X-100-x
X-100-x
Edit | Delete
Alternatif Nilai Laporan
Copy@Spk_SAW.com
Gambar 3.11 Desain Antarmuka Halaman Satuan
4) Rancangan Halaman Material Rancangan halaman material dipergunakan untuk proses menampilkan, merubah, menamambah dan menghapus data Material.
#Menu
Tambah Data
Unit
Material Action
ID Title
Kriteria Edit |Delete Alternatif
X-100-X
X-100-X
X-100-X
X-100-X
X-100-X
Nilai Laporan
Copy@Spk_SAW.com
Gambar 3.12 Desain Antarmuka Halaman Material.
5) Rancangan Halaman Kriteria Rancangan halaman kriteria dipergunakan untuk proses menampilkan, merubah, menamambah dan menghapus data kriteria.
DSS Using SAW algorithm
#Menu
Tambah Data
Unit Material
ID Title
X-10-X
X-100-X
<option>
Edit | Delete
Alternatif Nilai Laporan
Jumlah Bobot
<Display>
Copy@Spk_SAW.com
Gambar 3.13 Desain Antarmuka Halaman Kriteria.
6) Rancangan Halaman Alternatif Rancangan halaman alternatif dipergunakan untuk proses menampilkan, merubah, menamambah dan menghapus data alternatif.
DSS Using SAW algorithm
#Menu
Tambah Data
Unit Material
ID Title
X-10-X
X-100-X
X-100-X
Edit | delete
Alternatif Nilai Laporan
Copy@Spk_SAW.com
Gambar 3.14 Desain Antarmuka Halaman Supplier / Alternatif.
7) Rancangan Halaman Ranking Alternatif
Rancangan halaman alternatif dipergunakan untuk proses menampilkan ranking dari semua alternatif.
DSS Using SAW algorithm
#Menu
Unit Tampilkan Details Material <Display>
#JOB
Ubah Data
Alternatif Nilai Laporan
Copy@Spk_SAW.com
Gambar 3.15 Desain Antarmuka Ranking Supplier / Alternatif.
8) Rancangan Halaman Input / Edit Nilai
Rancangan halaman alternatif dipergunakan untuk proses merubah dan menambah nilai-nilai alternatif.
DSS USING S.A.W Algrthm
Menu # [+] Edit Data [+] view Detail Unit
Form Supllier 01
Criteria
Mat 1 Criteria 01 :
Score list _
Form Supllier 02 Mat 1 Criteria 01 :
Gambar 3.16 Desain Antarmuka Input / Edit nilai.
9) Rancangan Halaman Nilai Rancangan halaman nilai dipergunakan untuk menampilkan detail nilai-nilai setiap kriteria.
DSS USING S.A.W Algrthm
Menu # Job 1 [+] Edit Data [+] view Detail
Unit Mat
A\C
Criteria 01 Criteria 02
<Display> <Display> Criteria
Material