Perancangan Antarmuka Sistem Interface

Tabel 3.75. Struktur Tabel_Irk

3.7. Perancangan Antarmuka Sistem Interface

3.7.1 Halaman Login Halaman Login merupakan halaman yang pertama kali muncul pada saat sistem dijalankan. Halaman login ini menerima masukan username dan password. Kemudian akan dicek oleh sistem valid atau tidak nya masukan tersebut. Jika username dan password sudah valid, maka user dapat menggunakan aplikasi ini, jika tidak, maka tidak bisa terbuka aplikasi selanjutnya. Tampilan rancangan halaman login dapat dilihat pada Gambar 3.8. Gambar 3.8. Rancangan Halaman Login No Nama Field Tipe Data Field Keterangan 1 Int id_irk 5 Nomor urut tabel irk 2 jum_irk Varchar 10 Jumlah matriks n x n 2 nilai_irk Int 10 Nilai dari tabel irk Judul Username Password Login Fasilkom-TI USU Universitas Sumatera Utara 3.7.2 Halaman Menu Utama Setelah Login, masuk ke halaman utama, dimana halaman utama ini terdiri dari beberapa menu bar, yaitu menu Home, Input Data, Ahp Algorithm, PROMETHEEAlgorithm dan Logout . Tampilan rancangan halaman Menu Utama dapat dilihat pada Gambar 3.9. Gambar 3.9. Rancangan Halaman Utama Keterangan: Tabel 3.76. Keterangan Bagian-Bagian Rancangan Antarmuka Aplikasi No Objek Jenis Objek Keterangan 1 Judul Menu Judul Aplikasi yang akan dirancang. 2 Menu Home Berisi Gambar Kantor Camat 3 Menu Input Data Berisi sub menu input kriteria dan input alternatif 5 Menu AHP Menu untuk mengisi nilai matriks kriteria dan subkriteria sampai perhitungan global AHP 6 Menu Promethee Menu untuk melakukan proses perhitungan Promethee Tahap 1 dan Tahap 2 7 Button Exit Sub menu Exit , yang berfungsi untuk keluar dari aplikasi Judul Hom e Fasilkom-TI USU Metode AHP Metode Promethee Logout Gambar Kantor Camat Kel. Hinai Kiri Kec. Secanggang Kab. Langkat Input Data Universitas Sumatera Utara 3.7.3. Halaman Input Data Kriteria Sebelum masuk ke perhitungan metode AHP, maka user terlebih dahulu menginput data kriteria. Proses penginputan data kriteria dapat dilihat pada gambar 3.10. Gambar 3.10. Rancangan Halaman Input Kriteria Keterangan: Tabel 3.77. Keterangan Bagian-Bagian Rancangan Antarmuka Aplikasi No Objek Jenis Objek Keterangan 1 Judul Menu Judul Aplikasi yang akan dirancang. 2 Menu Home Berisi Gambar Kantor Camat 3 Menu Input Kriteria Berisi input Matriks Kriteria dan Sub Kriteria 5 Menu AHP Menu untuk mengisi nilai matriks kriteria dan subkriteria sampai perhitungan global AHP 6 Menu Promethee Menu untuk melakukan proses perhitungan Promethee Tahap 1 dan Tahap 2 7 Button Exit Sub menu Exit , yang berfungsi untuk keluar dari aplikasi 8 Menu Add n Clear Untuk menambah dan mengahapus kriteria 9 Menu Edit, Delete dan Detail Untuk mengedit, menghapus dan melihat detail data kriteria yang telah di input Nama Kriteria Input Kriteria Judul Hom e Metode AHP Metode Promethee Logout Input Data Add Clear Nama Kriteria Kondisi Rumah Edit Delete Detail No 1 X Universitas Sumatera Utara 3.7.4. Halaman Input Data Alternatif Setelah menginput data kriteria, maka user harus menginput data alternatif agar proses perhitungan AHP berjalan sesuai ketentuan perhitungan yang ada. Proses input alternatif dapat di lihat pada gambar 3.11. Gambar 3.11. Rancangan Halaman Input Alternatif Keterangan : Tabel 3.78. Keterangan Bagian-Bagian Rancangan Antarmuka Aplikasi No Objek Jenis Objek Keterangan 1 Judul Menu Judul Aplikasi yang akan dirancang. 2 Menu Home Berisi Gambar Kantor Camat 3 Menu Input Alternatif Berisi input Matriks Alternatif 5 Menu AHP Menu untuk mengisi nilai matriks kriteria dan subkriteria sampai perhitungan global AHP 6 Menu Promethee Menu untuk melakukan proses perhitungan Promethee Tahap 1 dan Tahap 2 8 Menu Add Untuk menambahkan data alternatif di aplikasi dan database 9 Menu Clear Untuk mengahapus data untuk satu namaalternatif Judul Hom e Metode AHP Metode Promethee Logout Input Data Nama Kriteria dan sub Kriteria Input Alternatif Kondisi Rumah Lantai Dinding MCK Add Clear No Nama Nilai1 Nilai2 Nilai3 Nilai4 Nilai15 Edit Delete Fasilkom-TI USU Universitas Sumatera Utara 3.7.5. Halaman Proses Metode AHP Setelah menginput data kriteria dan alternatif, maka user dapat menginput nilai matriks pada proses AHP. Tampilan rancangan menu AHP dapat dilihat pada gambar 3.12. dibawah ini. Gambar 3.12. Rancangan Halaman Metode Ahp Keterangan: Tabel 3.79. Keterangan Bagian-Bagian Rancangan Antarmuka Aplikasi No Objek Jenis Objek Keterangan 1 Judul Menu Judul Aplikasi yang akan dirancang. 2 Menu Home Berisi Gambar Kantor Camat 3 Menu Input Data Berisi sub menu input kriteria dan alternatif 5 Menu AHP Menu untuk mengisi nilai matriks kriteria dan subkriteria sampai perhitungan global AHP 6 Menu Promethee Menu untuk melakukan proses perhitungan Promethee Tahap 1 dan Tahap 2 7 Button Exit Sub menu Exit , yang berfungsi untuk keluar dari aplikasi 8 Menu Proses Untuk melakukan proses perhitungan matriks kondisi rumah Judul Hom e Metode AHP Metode Promethee Logout Input Data Input Matriks Kriteria Kondisi Rumah Umum Aset Pribadi Proses Fasilkom-TI USU Kondisi Rumah Umum Aset Pribadi Universitas Sumatera Utara 3.7.6. Halaman Proses Metode Promethee Setelah melakukan perhitugan dengan metode AHP, user dapat melihat proses dari perhitungan metode Promethee dengan cara menginput terlebih dahulu nilai matriks.. Tampilan rancangan menu Promethee dapat dilihat pada gambar 3.13. dibawah ini. Gambar 3.13. Rancangan Halaman Metode Promethee Judul Hom e Metode AHP Metode Promethee Logout Input Data Input Matriks SubAlternatif Lantai Dinding MCK Proses Fasilkom-TI USU S Listrik Kepemilikan Rumah Penghasilan Pekerjaan Jumlah Tanggungan Kebun Ternak Kendaraan Elektronika P A P S S H R E R T M Universitas Sumatera Utara Keterangan: Tabel 3.80. Keterangan Bagian-Bagian Rancangan Antarmuka Aplikasi No Objek Jenis Objek Keterangan 1 Judul Menu Judul Aplikasi yang akan dirancang. 2 Menu Home Berisi Gambar Kantor Camat 3 Menu Input Data Berisi sub menu input kriteria dan alternatif 5 Menu AHP Menu untuk mengisi nilai matriks kriteria dan subkriteria sampai perhitungan global AHP 6 Menu Promethee Menu untuk melakukan proses perhitungan Promethee Tahap 1 dan Tahap 2 7 Button Exit Sub menu Exit , yang berfungsi untuk keluar dari aplikasi 8 Menu Proses Untuk melakukan proses perhitungan matriks kondisi rumah Universitas Sumatera Utara BAB 4 IMPLEMENTASI DAN PENGUJIAN SISTEM 4.1.Implementasi Sistem Implementasi dari aplikasi dirancang dengan menggunakan bahasa pemrograman PHP. Penggunaan bahasa pemrograman PHP bertujuan untuk memberikan kemudahan kepada penulis dalam pembuatan source code dan tampilan aplikasi. Proses implementasi sistem yang terjadi di dalam aplikasi yang dirancang dibagi menjadi dua, yaitu: 1. Implementasi sistem pendukung keputusan dengan Metode AHP untuk penentuan siapa saja yang paling berhak menerima bantuan beras miskin Raskin 2. Implementasi sistem pendukung keputusan dengan Metode Promethee penentuan siapa saja yang paling berhak menerima bantuan beras miskin Raskin 4.1.1. Form Login Form Login merupakan tampilan awal sistem yang muncul pada saat sistem pertama kali dijalankan. Pada form ini user harus memasukkan username dan password yang tertera agar bisa masuk ke halaman utama. Gambar 4.1. Form Login Universitas Sumatera Utara 4.1.2. Form Menu Utama Form Menu Utama merupakan tampilan awal sistem yang muncul pada saat user telah melakukan proses login. Pada halaman ini terdapat 5 menu bar, yaitu menu Home, menu Input Data, Proses AHP , Proses Promethee dan Log Out. Pada menu Home terdapat gambar dari Kantor Camat Kec. Secanggang Kab. Langkat. Kantor camat tersebut adalah sebuah instansi pemerintah tempat penulis mengambil data yang di proses untuk mendapatkan sebuah keputusan dalam penentuan siapa yang paling berhak menerima bantuan beras miskin Rakin. Berikut tampilan pada menu Home. Gambar 4.2. Form Menu Home 4.1.3. Form Menu Input Data Form Menu Input Datamerupakan tampilan kedua sistem. Pada halaman ini tedapat 2 menu bar , yaitu menuInput Kriteria dan Input Alternatif. Gambar 4.3. Form Menu Input Data Input Kriteria Universitas Sumatera Utara 4.1.4. Form Sub Menu Input Data Input Alternatif Form Sub MenuInputAlternatif merupakan tampilan yang ada pada sub menu Input Data. Form ini menginput semua alternatif yang dijadikan contoh dalam proses perhitungan kedepannya. Gambar 4.4. Form Menu Input Data Input Alternatif 4.1.5. Form Menu Proses AHP Form Menu Proses AHPmerupakan menubar yang berisi implementasi Metode AHP. Sebelum masuk ke proses AHP, user harus menginput nama kriteria dan sub kriteria pada menu input data input kriteria. User juga menginput data alternatif dari sub menu input alternatif. setelah selesai, user masuk ke proses AHP. Berikut tampilan dari proses AHP. Gambar 4.5. Form Matriks Kriteria proses AHP Universitas Sumatera Utara 4.1.6. Form Menu Proses Promethee Form Menu Proses Prometheemerupakan menubar yang berisi implementasi Metode Promethee. Gambar 4.6. Form Matriks Kriteria proses Promethee

4.2. Pengujian Sistem