Perancangan Antarmuka Untuk User - Perancangan Antarmuka

III.4.7 Perancangan Antarmuka

1. Perancangan Antarmuka Untuk User

a. Perancangan Antar Muka Halaman Utama

HEADER GAMBAR

Home

Home Sistem PakarSistem Pakar Buku TamuBuku Tamu AboutAbout Login adminLogin admin

FOOTER

Username Username

Masuk

…::: Pendaftaran User Baru :::... …::: Pendaftaran User Baru :::... Password

Password Informasi Utama

Informasi Utama

Gambar III.7 Perancangan Tampilan Halaman Utama

Pada halaman utama terdapat menu login user yang dapat digunakan untuk login agar dapar mengakses aplikasi sistem pakar yang ada pada aplikasi ini. dimana user harus memiliki account yang sudah ada didalam database sehingga

user dapat memasukkan username dan password sehingga user bisa langsung

masuk ke menu utama user, apabila user belum memiliki account maka user tidak dapat menjalankan aplikasi sistem pakar, jika user belum memiliki account maka

user dapat melakukan pendaftaran data terlebih dahulu dengan mengklik link

pendaftaran user baru dibawah form login yang terdapat pada samping menu utama.

b. Perancangan Tampilan Halaman Registrasi

HEADER GAMBAR

Home

Home Sistem PakarSistem Pakar Buku TamuBuku Tamu AboutAbout Login adminLogin admin

FOOTER

Username Username

Masuk

…::: Pendaftaran User Baru :::... …::: Pendaftaran User Baru :::... Password

Password

Silahkan Isi Data Anda Dengan Lengkap Silahkan Isi Data Anda Dengan Lengkap

Nama Nama Email Email Kelamin Kelamin Username Username Password Password Confirm Password Confirm Password O Pria O Wanita O Pria O Wanita Simpan

Gambar III.8 Perancangan Tampilan Halaman Register

Pada halaman ini user yang belum memiliki account dan disarankan user harus mengisi nama, email, kelamin, username, password dan confirm password, jika salah satu kolom registrasi masih ada yang kosong belum di isi dengan lengkap dan confirm password berbeda dengan password maka proses registrasi akan batal, sehingga seorang user tidak dapat melakukan login, oleh sebab itu didalam proses pengisian data harus benar-benar lengkap dan confirm password harus sama dengan password agar proses registrasi berjalan sukses dan data akan tersimpan ke dalam database.

c. Perancangan Tampilan Menu Sistem Pakar

HEADER GAMBAR

Home

Home Sistem Pakar_{Sistem Pakar} Buku Tamu_{Buku Tamu} About_About Login admin_{Login admin}

FOOTER

Username Username

Masuk

…::: Pendaftaran User Baru :::... …::: Pendaftaran User Baru :::... Password

Password

Informasi penolakan dan saran pendaftaran

Gambar III.9 Perancangan Tampilan Menu Sistem Pakar

Pada halaman ini dimana user dapat melihat informasi yang menyatakan bahwa user belum bisa menggunakan aplikasi sistem pakar yang ada dikarenakan belum menjadi member ataupun belum login sebagai user namun user mulai dapat menggunakan Aplikasi Sistem Pakar Berbasis Web ini apabila telah melakukan proses login.

d. Perancangan Tampilan Menu Buku Tamu

HEADER GAMBAR

Home

Home Sistem PakarSistem Pakar Buku TamuBuku Tamu AboutAbout Login adminLogin admin

FOOTER

Username Username

Masuk

…::: Pendaftaran User Baru :::... …::: Pendaftaran User Baru :::... Password

Password

Pesan

Simpan

Isi Konsultasi anda

E-mail

Nama

Reset

Gambar III.10 Perancangan Tampilan Menu / Buku Tamu

Pada halaman ini dimana user dapat mengisi data sebagai tamu dan dapat menulis pesan ataupun isi konsultasi anda mengenai kerusakan mesin pendingin ruangan yang anda miliki kemudian tertuju ke database admin sehingga dapat dibaca oleh seorang admin .

e. Perancangan Tampilan Menu About

HEADER GAMBAR

Home

Home Sistem Pakar_{Sistem Pakar} Buku Tamu_{Buku Tamu} About_About Login admin_{Login admin}

FOOTER

Username Username

Masuk

…::: Pendaftaran User Baru :::... …::: Pendaftaran User Baru :::... Password Password Informasi Mengenai Administrator Informasi Mengenai Administrator

Gambar III.11 Perancangan Tampilan Menu About

Pada halaman ini terdapat keterangan tentang Administrator berupa nama, e-mail, nomor telp, dan keterangan yang berkaitan dengan Admin.

f. Perancangan Tampilan Menu Home Setelah User Login

HEADER GAMBAR

Home

Home Sistem PakarSistem Pakar Buku TamuBuku Tamu BantuanBantuan KeluarKeluar

FOOTER

Menu User

Data User

Kata Sambutan Bagi User

Kata Sambutan Bagi User Edit AkunEdit Akun

Informasi

Informasi Assalamu ‘alaikum wr wb

Assalamu ‘alaikum wr wb

Gambar III.12 Perancangan Tampilan Menu Home Setelah User Login

Pada halaman ini dimana user setelah login maka user dapat masuk ke halaman utama dan di halaman ini terdapat penjelasan tentang sistem pakar serta terdapat juga menu Bantuan untuk menampilkan halaman panduan yang memberi pengarahan bagi user baru yang belum mengerti tentang penggunaan aplikasi sistem pakar ini. Di halaman ini juga terdapat halaman menu buku tamu seperti yang ada pada halaman utama yang mempunyai fungsi yang sama.

g. Perancangan Tampilan Menu Sistem Pakar

HEADER GAMBAR

Home

Home Sistem PakarSistem Pakar Buku TamuBuku Tamu BantuanBantuan KeluarKeluar

FOOTER Menu User Data User Data User Edit Akun Edit Akun Informasi Informasi Pilih Jenis Kerusakan

Pilih Jenis Kerusakan

---Silahkan Pilih Jenis Kerusakan --- |V

Proses

Gambar III.13 Perancangan Tampilan Menu Sistem pakar

Pada tampilan menu sistem pakar pada halaman ini berbeda dengan halaman yang ada pada halaman utama ketika kita belum melakukan login user. Pada halaman ini user sudah bias menggunakan aplikasi sistem pakar yang ada untuk mendiagnosa keruskan pada mesin pendingin ruangan Toshiba yang anda miliki dengan cara memilih jenis kerusakan yang ada pada pilihan parameter yang tersedia pada kolom pilih jenis kerusakan, kemudian klik tombol proses untuk memulai diagnosis dan anda harus menjawab setiap pertanyaan yang akan diberikan seputar kerusakan yang di alami oleh user.

h. Perancangan Tampilan Menu Bantuan

HEADER GAMBAR

Home

Home Sistem PakarSistem Pakar Buku TamuBuku Tamu BantuanBantuan KeluarKeluar

FOOTER Menu User Data User Data User Edit Akun Edit Akun Informasi Informasi Panduan Panduan

Instruksi Untuk Panduan User

Gambar III.14 Perancangan Tampilan Menu Bantuan

Pada halaman ini dimana user dapat melihat panduan ataupun instruksi untuk fungsi menu yang terdapat pada aplikasi sistem pakar berbasis web ini agar

i. Perancangan Tampilan Menu Data User

HEADER GAMBAR

Home

Home Sistem PakarSistem Pakar Buku TamuBuku Tamu BantuanBantuan KeluarKeluar

FOOTER Menu User Data User Data User Edit Akun Edit Akun Informasi Informasi Daftar User Daftar User

Jumlah Pengunjung : 3 Orang

xxxxxxx xxxxxxx xxxxxxx xxxxxxx xxxxxxx

No Nama Email Jenis Kelamin Username

xxxxxxx xxxxxxx xxxxxxx xxxxxxx xxxxxxx

Gambar III.15 Perancangan Tampilan Menu Data User

Pada halaman data user ini para pengunjung aplikasi sistem pakar dapat melihat daftar para pengunjung ataupun daftar para user yang telah menggunakan aplikasi ini yang telah berhasil melakukan login untuk masuk ke halaman akses aplikasi sistem pakar ini untuk melakukan diagnosa ataupun untuk mengetahui seputar informasi tentang kerusakan pendingin ruangan.

j. Perancangan Tampilan Menu Edit Akun

HEADER GAMBAR

Home

Home Sistem PakarSistem Pakar Buku TamuBuku Tamu BantuanBantuan KeluarKeluar

FOOTER Menu User Data User Data User Edit Akun Edit Akun Informasi Informasi Akun Akun Nama Nama Email Email Kelamin Kelamin Username Username Password Password Confirm Password Confirm Password xxxxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxxx Simpan xxxxxxxxx |V

Gambar III.16 Perancangan Tampilan Menu Edit Akun

Pada halaman edit data user ini para pengunjung aplikasi sistem pakar dapat merubah biodata yang telah ada pada saat melakukan registrasi yang telah tersimpan didalam database, berupa nama, username, password, email dan jenis kelamin untuk alasan tertentu.

k. Perancangan Tampilan Menu Informasi

HEADER GAMBAR

Home

Home Sistem Pakar_{Sistem Pakar} Buku Tamu_{Buku Tamu} Bantuan_Bantuan Keluar_Keluar

FOOTER Menu User Data User Data User Edit Akun Edit Akun Informasi Informasi

Keterangan Informasi Seputar Mesin Pendingin Ruangan

Toshiba

Keterangan Informasi Seputar Mesin Pendingin Ruangan

Toshiba

Gambar III.17 Perancangan Tampilan Menu Informasi

Pada halaman Informasi ini terdapat keterangan tentang seputar kerusakan pendingin ruangan, berupa informasi perbaikan serta informasi tips untuk penanggulangan serta solusi untuk menangani kerusakan ataupun untuk penambah wawasan ilmu yang tidak didapat dari seorang Pakar tentang kerusakan pendingin ruangan.

l. Perancangan Tampilan Menu Keluar ( pop up )

Terima kasih atas kunjungan anda dan telah berkonsultasi di situs kami...

Tampilan menu pop up akan muncul setelah anda selesai menggunakan aplikasi sistem pakar ini apabila anda mengklik tombol Keluar, yang artinya anda telah keluar dari halaman sistem pakar dan anda akan kembali ke halaman utama.

Dalam dokumen BAB III ANALISIS MASALAH DAN RANCANGAN PROGRAM (Halaman 30-41)