ANALISIS DAN PERANCANGAN
3.4 Perancangan Antarmuka Sistem
Perancangan antarmuka merupakan suatu hal mendasar yang harus disorot dengan berfokus pada interaksi serta pengalaman pengguna. Berikut merupakan rancangan antarmuka sistem penentuan prioritas investasi pada UKM.
3.4.1 Beranda
Gambar 3. 9 Beranda Keterangan gambar:
1. Title, berisi judul halaman.
2. Sidebar, berisi beberapa menu navigasi untuk menghubungkan pengguna dengan halaman lainnya yang ada di sistem.
3. Container, berisi uraian singkat mengenai latar belakang dibuatnya sistem, metode yang digunakan dan juga petunjuk penggunaan sistem.
3.4.2 Halaman Kriteria
Gambar 3. 10 Halaman Kriteria Keterangan gambar:
1. Title, berisi judul halaman.
2. Sidebar, berisi beberapa menu navigasi untuk menghubungkan pengguna dengan halaman lainnya yang ada di sistem.
3. Container, memuat tabel data kriteria yang nantinya dipakai dalam sistem.
3.4.3 Halaman Alternatif
Gambar 3. 11 Halaman Alternatif Keterangan gambar:
1. Title, berisi judul halaman.
2. Sidebar, berisi beberapa menu navigasi untuk menghubungkan pengguna dengan halaman lainnya yang ada di sistem.
3. Container, berisi tabel data alternatif UKM yang tersedia.
4. Button, berfungsi agar pengguna dapat menambahkan data alternatif baru.
5. Search, berfungsi agar pengguna dapat mencari data alternatif berdasarkan kata kunci tertentu.
6. Button, berfungsi agar data alternatif yang ada dapat diubah oleh pengguna.
7. Pagination, berfungsi agar jumlah data alternatif yang ditampilkan dapat dibatasi oleh pengguna.
Gambar 3. 12 Form Tambah Alternatif Keterangan gambar:
1. Title, berisi judul modal.
2. Button, berfungsi agar pengguna dapat menutup modal.
3. Input, berfungsi agar pengguna dapat memasukkan nama usaha.
4. Input, berfungsi agar pengguna dapat memasukkan nama pemilik usaha.
5. Input, berfungsi agar pengguna dapat memasukkan alamat usaha.
6. Input, berfungsi agar pengguna dapat memasukkan nomor HP pemilik usaha.
7. Input, berfungsi agar pengguna dapat memasukkan jenis ataupun kegiatan utama usaha.
8. Button, berfungsi agar pengguna dapat kembali ke halaman menu 3.
9. Button, berfungsi agar pengguna dapat mengirimkan data yang telah dimasukkan ke dalam database.
Gambar 3. 13 Form Edit Alternatif Keterangan gambar:
1. Title, berisi judul modal.
2. Button, berfungsi agar pengguna dapat menutup modal.
3. Input, berfungsi agar pengguna dapat mengubah nama usaha.
4. Input, berfungsi agar pengguna dapat mengubah nama pemilik usaha.
5. Input, berfungsi agar pengguna dapat mengubah alamat usaha.
6. Input, berfungsi agar pengguna dapat mengubah nomor HP pemilik usaha.
7. Input, berfungsi agar pengguna dapat mengubah jenis ataupun kegiatan utama usaha.
8. Button, berfungsi agar pengguna dapat kembali ke halaman menu 3.
9. Button, berfungsi agar pengguna dapat mengirimkan data yang telah diubah ke dalam database.
3.4.4 Halaman Metode AHP
Gambar 3. 14 Halaman Perbandingan Kriteria Keterangan gambar:
1. Title, berisi judul halaman.
2. Sidebar, berisi beberapa menu navigasi untuk menghubungkan pengguna dengan halaman lainnya yang ada di sistem.
3. Container, berisi form perbandingan berdasarkan kriteria yang ada.
4. Modal, berisi petunjuk penggunaan sistem.
5. Radios, berfungsi agar pengguna dapat memilih kriteria tertentu.
6. FormControls, bertujuan agar pengguna dapat memasukkan bobot perbandingan kriteria.
7. Button, berfungsi agar sistem dapat memproses bobot perbandingan kriteria menggunakan metode AHP.
Gambar 3. 15 Halaman Perhitungan Metode AHP Keterangan gambar:
1. Title, berisi judul halaman.
2. Sidebar, berisi beberapa menu navigasi untuk menghubungkan pengguna dengan halaman lainnya yang ada di sistem.
3. Container, berisi tabel hasil perhitungan metode AHP berdasarkan bobot nilai perbandingan kriteria sebelumnya.
4. Modal, berisi petunjuk penggunaan sistem.
5. Button, berfungsi agar pengguna dapat menuju proses selanjutnya.
3.4.5 Halaman Metode TOPSIS
Gambar 3. 16 Halaman Nilai Alternatif Keterangan gambar:
1. Title, berisi judul halaman.
2. Sidebar, berisi beberapa menu navigasi untuk menghubungkan pengguna dengan halaman lainnya yang ada di sistem.
3. Container, berisi tabel data nilai alternatif UKM.
4. Modal, berisi petunjuk penggunaan sistem.
5. Button, berfungsi agar pengguna dapat menambahkan data nilai alternatif baru.
6. Search, berfungsi agar pengguna dapat mencari data nilai alternatif berdasarkan kata kunci tertentu.
7. Pagination, berfungsi agar jumlah data alternatif yang ditampilkan dapat dibatasi oleh pengguna.
8. Button, berfungsi agar pengguna dapat memproses data nilai alternatif dengan menggunakan metode TOPSIS.
Gambar 3. 17 Form Tambah Nilai Alternatif Keterangan gambar:
1. Title, berisi judul modal.
2. Button, berfungsi agar pengguna dapat menutup modal.
3. Option, berfungsi agar pengguna dapat memilih alternatif usaha yang tersedia.
4. Option, berfungsi agar pengguna dapat memilih nilai alternatif kriteria 1.
5. Option, berfungsi agar pengguna dapat memilih nilai alternatif kriteria 2.
6. Option, berfungsi agar pengguna dapat memilih nilai alternatif kriteria 3.
7. Option, berfungsi agar pengguna dapat memilih nilai alternatif kriteria 4.
8. Button, berfungsi agar pengguna dapat kembali ke halaman menu 5.
9. Button, berfungsi agar pengguna dapat mengirimkan data yang telah dimasukkan ke dalam database.
Gambar 3. 18 Halaman Perhitungan Metode TOPSIS Keterangan gambar:
1. Title, berisi judul halaman.
2. Sidebar, berisi beberapa menu navigasi untuk menghubungkan pengguna dengan halaman lainnya yang ada di sistem.
3. Container, berisi tabel hasil perhitungan metode TOPSIS berdasarkan data nilai alternatif yang ada.
4. Modal, berisi petunjuk penggunaan sistem.
5. Search, berfungsi agar pengguna dapat mencari data nilai alternatif berdasarkan kata kunci tertentu.
6. Pagination, berfungsi agar jumlah data alternatif yang ditampilkan dapat dibatasi oleh pengguna.
3.4.6 Halaman Perangkingan Alternatif
Gambar 3. 19 Halaman Perangkingan Alternatif Keterangan gambar:
1. Title, berisi judul halaman.
2. Sidebar, berisi beberapa menu navigasi untuk menghubungkan pengguna dengan halaman lainnya yang ada di sistem.
3. Container, berisi tabel hasil perangkingan berdasarkan nilai preferesi dari alternatif yang tersedia.
4. Search, berfungsi agar pengguna dapat mencari alternatif berdasarkan kata kunci tertentu.
5. Pagination, berfungsi agar jumlah data alternatif yang ditampilkan dapat dibatasi oleh pengguna.
3.4.7 Tampilan Menu Bantuan
Gambar 3. 20 Tampilan Menu Bantuan Keterangan gambar:
1. Modal, berisi petunjuk penggunaan sistem.
2. Title, berisi judul modal.
3. Content, berisi petunjuk penggunaan sistem pada halaman menu 5.