BAB 5: KESIMPULAN DAN SARAN
3.5 Perancangan Antar Muka
Perancangan antarmuka (interface) merupakan tampilan program aplikasi yang digunakan oleh pemakai (user) untuk dapat berkomunikasi dengan komputer.
3.5.1 Rancangan Halaman Index
Pada saat website dibuka, maka pemakai akan dihadapkan pada tampilan halaman seperti berikut gambar 3.7 berikut :
Gambar 3.7 Rancangan Halaman Index
Keterangan :
1. Nomor 1 adalah label untuk judul program. 2. Nomor 2 adalah picture box untuk foto HP 3. Nomor 3 adalah text field untuk username 4. Nomor 4 adalah text field untuk password 5. Nomor 5 adalah button Login
6. Nomor 6 adalah drop list untuk tipe HP 7. Nomor 7 adalah button Lanjutkan
8. Nomor 8 adalah button About
Pada halaman Index ini, bila user menginput username dan password yang terdaftar pada database, maka akan muncul menu-menu tambahan sesuai otoritas
1 3 4 5 8 6 7 2
username tersebut. Untuk user umum yang hanya memerlukan akses ke sistem pakar, dapat langsung memilih tipe HP yang ada, dan menekan button "Lanjutkan".
3.5.2 Rancangan Halaman Process
Gambar 3.8 Rancangan Halaman Process
Keterangan :
1. Nomor 1 adalah label untuk judul program. 2. Nomor 2 adalah picture box untuk foto HP 3. Nomor 3 adalah text field untuk username 4. Nomor 4 adalah text field untuk password 5. Nomor 5 adalah button Login
6. Nomor 6 adalah text box yang menampilkan nama gejala 7. Nomor 7 adalah radio button tingkat kepercayaan gejala 8. Nomor 8 adalah button Next
9. Nomor 9 adalah button About
Pada halaman Process ini, user akan memilih "Ya", "Tidak Tahu", atau "Tidak" atas tingkat kepercayaangejala pada setiap baris yang ada. Setelah selesai memilih jawaban untuk setiap nama gejala yang ada, maka user dapat menekan button "Next" untuk mendapatkan hasil analisis dari sistem pakar Certainty Factor ini.
1 3 4 5 9 6 7 8 2
3.5.3 Rancangan Halaman Result
Gambar 3.9 Rancangan Halaman Result
Keterangan :
1. Nomor 1 adalah label untuk judul program. 2. Nomor 2 adalah picture box untuk foto HP 3. Nomor 3 adalah text field untuk username 4. Nomor 4 adalah text field untuk password 5. Nomor 5 adalah button Login
6. Nomor 6 adalah text box yang menampilkan nama masalah, nilai CF, definisi CF dan solusi
7. Nomor 7 adalah button Back 8. Nomor 8 adalah button About
Pada halaman result ini, user mendapatkan hasil analisis dari sistem pakar Certainty Factor. Bila user ingin melakukan analisis terhadap tipe hp yang lain, dapat menekan button "Back" untuk kembali ke index.
1 3 4 5 8 6 7 2
3.5.4 Rancangan Halaman About
Gambar 3.10 Rancangan Halaman About Keterangan :
1. Nomor 1 adalah label untuk judul program. 2. Nomor 2 adalah picture box untuk foto HP 3. Nomor 3 adalah button Log out
4. Nomor 4 adalah button List HP 5. Nomor 5 adalah button List Gejala 6. Nomor 6 adalah button List Member 7. Nomor 7 adalah button Index
8. Nomor 8 adalah text box yang menampilkan info pembuat program
Pada halaman ini info pembuat website dapat dilihat. Dan bila user memasukkan username maka tombol menu tambahan akan muncul seperti pada gambar 3.10. 1 3 4 5 8 6 7 2
3.5.5 Rancangan Halaman List HP
Gambar 3.11 Rancangan Halaman List HP
Keterangan :
1. Nomor 1 adalah label untuk judul program. 2. Nomor 2 adalah picture box untuk foto HP 3. Nomor 3 adalah button Log Out
4. Nomor 4 adalah button Index 5. Nomor 5 adalah button List Gejala 6. Nomor 6 adalah button List Member 7. Nomor 7 adalah button About
8. Nomor 8 adalah text box yang menampilkan no HP dan tipe HP 9. Nomor 9 adalah button List Aturan
10. Nomor 10 adalah button List Masalah 11. Nomor 11 adalah button Edit
12. Nomor 12 adalah button Delete 13. Nomor 13 adalah button Add
Pada halaman ini, user dapat melihat database tipe hp, dan dapat mengakses halaman list aturan hp, halaman list masalah, halaman edit tipe hp, halaman add tipe hp, dan menghapus tipe hp dalam database.
1 3 4 5 8 6 7 9 10 11 13 2 12
3.5.6. Rancangan Halaman List Aturan
Gambar 3.12 Rancangan Halaman List Aturan
Keterangan :
1. Nomor 1 adalah label untuk judul program. 2. Nomor 2 adalah picture box untuk foto HP 3. Nomor 3 adalah button Log Out
4. Nomor 4 adalah button List HP 5. Nomor 5 adalah button List Gejala 6. Nomor 6 adalah button Index
7. Nomor 7 adalah button List Member 8. Nomor 8 adalah button About
9. Nomor 9 adalah text box yang menampilan no aturan, nama masalah dan nama gejala
10. Nomor 10 adalah button Edit 11. Nomor 11 adalah button Delete 12. Nomor 12 adalah button Add
1 3 4 5 6 8 7 9 10 11 12 2
Pada halaman ini, user dapat melihat database list aturan, dan dapat mengakses halaman edit list aturan, halaman add list aturan, dan menghapus list aturan dalam database.
3.5.7 Rancangan Halaman Edit Aturan
Gambar 3.13 Rancangan Halaman Edit Aturan
Keterangan :
1. Nomor 1 adalah label untuk judul program. 2. Nomor 2 adalah picture box untuk foto HP 3. Nomor 3 adalah button Log Out
4. Nomor 4 adalah button List HP 5. Nomor 5 adalah button List Gejala 6. Nomor 6 adalah button List Member 7. Nomor 7 adalah button About 8. Nomor 8 adalah button Index 9. Nomor 9 adalah list nama masalah 10. Nomor 10 adalah list nama gejala 11. Nomor 11 adalah button Edit
1 3 4 5 6 8 7 9 10 11 2
Pada halaman ini, user dapat merubah data list aturan yang telah dipilih pada halaman list aturan. Setelah selesai mengisi datanya, ditekan button Edit untuk menyelesaikan proses perubahan dan kembali ke halaman list aturan.
3.5.8 Rancangan Halaman Add Aturan
Gambar 3.14 Rancangan Halaman Add Aturan
Keterangan :
1. Nomor 1 adalah label untuk judul program. 2. Nomor 2 adalah picture box untuk foto HP 3. Nomor 3 adalah button Log Out
4. Nomor 4 adalah button List HP 5. Nomor 5 adalah button Index
6. Nomor 6 adalah button List Member 7. Nomor 7 adalah button About
8. Nomor 8 adalah text field no aturan 9. Nomor 9 adalah list Nama Masalah 10. Nomor 10 adalah list Nama Gejala 11. Nomor 11 adalah button Add
1 3 4 5 6 7 8 9 10 11 2
Pada halaman ini, user dapat menambah data list aturan. Setelah selesai mengisi datanya, ditekan button Add untuk menyelesaikan proses penambahan dan kembali ke halaman list aturan.
3.5.9 Rancangan Halaman Edit HP
Gambar 3.15 Rancangan Halaman Edit HP
Keterangan :
1. Nomor 1 adalah label untuk judul program. 2. Nomor 2 adalah picture box untuk foto HP 3. Nomor 3 adalah button Log Out
4. Nomor 4 adalah button List HP 5. Nomor 5 adalah button List Gejala 6. Nomor 6 adalah button List Member 7. Nomor 7 adalah button About 8. Nomor 8 adalah text field tipe HP 9. Nomor 9 adalah button Edit
1 3 4 5 6 7 8 9 2
Pada halaman ini, user dapat merubah data tipe HP yang telah dipilih pada halaman list HP. Setelah selesai mengisi datanya, ditekan button Edit untuk menyelesaikan proses perubahan dan kembali ke halaman list HP.
3.5.10 Rancangan Halaman List Gejala
Gambar 3.16 Rancangan Halaman List Gejala
Keterangan :
1. Nomor 1 adalah label untuk judul program. 2. Nomor 2 adalah picture box untuk foto HP 3. Nomor 3 adalah button Log Out
4. Nomor 4 adalah button List HP dan No HP 5. Nomor 5 adalah Index
6. Nomor 6 adalah button List Member 7. Nomor 7 adalah button About
8. Nomor 8 adalah text box yang menampilkan no gejala, nama gejala 9. Nomor 9 adalah button Edit
10. Nomor 10 adalah button Delete 11. Nomor 11 adalah button Add
1 3 4 5 6 7 9 11 10 8 2
Pada halaman ini, user dapat melihat database list gejala, dan dapat mengakses halaman edit list gejala, halaman add list gejala, dan menghapus list gejala dalam database.
3.5.11 Rancangan Halaman Edit Gejala
Gambar 3.17 Rancangan Halaman Edit Gejala
Keterangan :
1. Nomor 1 adalah label untuk judul program. 2. Nomor 2 adalah picture box untuk foto HP 3. Nomor 3 adalah button Log Out
4. Nomor 4 adalah button List HP 5. Nomor 5 adalah button List Gejala 6. Nomor 6 adalah button List Member 7. Nomor 7 adalah button About
8. Nomor 8 adalah text field Nama Gejala 9. Nomor 9 adalah button Edit
Pada halaman ini, user dapat merubah data gejala yang telah dipilih pada halaman list gejala. Setelah selesai mengisi datanya, ditekan button Edit untuk menyelesaikan proses perubahan dan kembali ke halaman list gejala.
1 3 4 5 6 7 9 10 2
3.5.12 Rancangan Halaman Add Gejala
Gambar 3.18 Rancangan Halaman Add Gejala
Keterangan :
1. Nomor 1 adalah label untuk judul program. 2. Nomor 2 adalah picture box untuk foto HP 3. Nomor 3 adalah button Log Out
4. Nomor 4 adalah button List HP 5. Nomor 5 adalah button List Gejala 6. Nomor 6 adalah button List Member 7. Nomor 7 adalah button About 8. Nomor 8 adalah text field No Gejala 9. Nomor 9 adalah text field Nama Gejala 10. Nomor 10 adalah button Add
Pada halaman ini, user dapat menambah data list gejala. Setelah selesai mengisi datanya, ditekan button Add untuk menyelesaikan proses penambahan dan kembali ke halaman list gejala.
1 3 4 5 6 7 10 8 9 2
3.5.13 Rancangan Halaman List Masalah
Gambar 3.19 Rancangan Halaman List Masalah
Keterangan :
1. Nomor 1 adalah label untuk judul program. 2. Nomor 2 adalah picture box untuk foto HP 3. Nomor 3 adalah button Log Out
4. Nomor 4 adalah button List HP 5. Nomor 5 adalah button List Gejala 6. Nomor 6 adalah button Index
7. Nomor 7 adalah button List Member 8. Nomor 8 adalah button About
9. Nomor 9 adalah text box yang menampilkan no masalah, nama masalah, solusi dan CF Pakar
10. Nomor 10 adalah button Edit 11. Nomor 11 adalah button Delete 12. Nomor 12 adalah button Add
Pada halaman ini, user dapat melihat database list masalah, dan dapat mengakses halaman edit list masalah, halaman add list masalah, dan menghapus list masalah dalam database.
1 3 4 5 6 8 7 10 12 11 9 2
3.5.14 Rancangan Halaman Edit masalah
Gambar 3.20 Rancangan Halaman Edit masalah
Keterangan :
1. Nomor 1 adalah label untuk judul program. 2. Nomor 2 adalah picture box untuk foto HP 3. Nomor 3 adalah button Log Out
4. Nomor 4 adalah button List HP 5. Nomor 5 adalah button List Gejala 6. Nomor 6 adalah button List Aturan 7. Nomor 7 adalah button List Member 8. Nomor 8 adalah button About
9. Nomor 9 adalah text field Nama Masalah 10. Nomor 10 adalah text area Solusi
11. Nomor 11 adalah list kepercayaan CF Pakar 12. Nomor 12 adalah button Edit
Pada halaman ini, user dapat merubah data masalah yang telah dipilih pada halaman list masalah. Setelah selesai mengisi datanya, ditekan button Edit untuk menyelesaikan proses perubahan dan kembali ke halaman list masalah.
1 3 4 5 6 8 7 11 9 2 10 12
3.5.15 Rancangan Halaman Add Masalah
Gambar 3.21 Rancangan Halaman Add Masalah
Keterangan :
1. Nomor 1 adalah label untuk judul program. 2. Nomor 2 adalah picture box untuk foto HP 3. Nomor 3 adalah button Log Out
4. Nomor 4 adalah button List HP 5. Nomor 5 adalah button List Gejala 6. Nomor 6 adalah button List Member 7. Nomor 7 adalah button About 8. Nomor 8 adalah button Index
9. Nomor 9 adalah text field No Masalah 10. Nomor 10 adalah text area Nama Masalah 11. Nomor 11 adalah text area Solusi
12. Nomor 12 adalah list CF Pakar 13. Nomor 13 adalah button Add
1 3 4 5 6 8 7 12 9 10 2 11 13
Pada halaman ini, user dapat menambah data list masalah. Setelah selesai mengisi datanya, ditekan button Add untuk menyelesaikan proses penambahan dan kembali ke halaman list masalah.
3.5.16 Rancangan Halaman List Member
Gambar 3.22 Rancangan Halaman List Member
Keterangan :
1. Nomor 1 adalah label untuk judul program. 2. Nomor 2 adalah picture box untuk foto HP 3. Nomor 3 adalah button Log Out
4. Nomor 4 adalah button List HP 5. Nomor 5 adalah button List Gejala 6. Nomor 6 adalah button Index 7. Nomor 7 adalah button About
8. Nomor 8 adalah text box yang menampilkan ID, username dan type login 9. Nomor 9 adalah button Edit
10. Nomor 10 adalah button Delete 11. Nomor 11 adalah button Add
1 3 4 5 6 7 9 11 10 8 2
Pada halaman ini, user dapat melihat database list member, dan dapat mengakses halaman edit list member, halaman add list member, dan menghapus list member dalam database.
3.5.17 Rancangan Halaman Edit Member
Gambar 3.23 Rancangan Halaman Edit Member
Keterangan :
1. Nomor 1 adalah label untuk judul program. 2. Nomor 2 adalah picture box untuk foto HP 3. Nomor 3 adalah button Log Out
4. Nomor 4 adalah button List HP 5. Nomor 5 adalah button List Gejala 6. Nomor 6 adalah button List Member 7. Nomor 7 adalah button About
8. Nomor 8 adalah text field Username Baru 9. Nomor 9 adalah text field Password Baru 10. Nomor 10 adalah drop list Type
11. Nomor 11 adalah button Edit
Pada halaman ini, user dapat merubah data member yang telah dipilih pada halaman list member. Setelah selesai mengisi datanya, ditekan button Edit untuk menyelesaikan proses perubahan dan kembali ke halaman list member.
1 3 4 5 6 7 11 8 9 10 2
3.5.18 Rancangan Halaman Add Member
Gambar 3.24 Rancangan Halaman Add Member
Keterangan :
1. Nomor 1 adalah label untuk judul program. 2. Nomor 2 adalah picture box untuk foto HP 3. Nomor 3 adalah button Log Out
4. Nomor 4 adalah button List HP 5. Nomor 5 adalah button List Gejala 6. Nomor 6 adalah button List Member 7. Nomor 7 adalah button About
8. Nomor 8 adalah text field No Member 9. Nomor 9 adalah text field Username 10. Nomor 10 adalah text field Password 11. Nomor 11 adalah drop list Type login 12. Nomor 12 adalah button Add
Pada halaman ini, user dapat menambah data list member. Setelah selesai mengisi datanya, ditekan button Add untuk menyelesaikan proses penambahan dan kembali ke halaman list member.
1 3 4 5 6 7 12 8 9 2 10 11
BAB 4