3.5. Perancangan Antarmuka
Perancangan antarmuka interface merupakan tampilan program aplikasi yang digunakan oleh pemakai user untuk dapat berkomunikasi dengan komputer. Adapun
yang menjadi rancangan antarmuka dalam perancangan ini adalah rancangan menu utama program.
Untuk lebih memudahkan pembuatan suatu sistem, perlu dilakukan terlebih dahulu perancangan struktur menu program dari sistem yang akan dibangun, hal ini
akan membantu kita dalam merancang bagian – bagian dari sistem yang sebenarnya dan untuk mengetahui bagian mana yang terlebih dahulu nantiny akan diakses setelah
program tersebut selesai.
3.5.1. Rancangan Halaman Utama
Halaman ini merupakan halaman yang akan muncul pertama kali saat program dijalankan. Halaman utama ini terdiri dari menu Beranda, Interaksi, Info, dan
Bantuan. Menu bantuan terdiri dari sub menu Manual dan Admin. Isi dari menu Beranda merupakan tampilan dari halaman utama. Rancangan halaman utama dapat
dilihat pada gambar 3.5 di bawah ini.
Gambar 3.5 Rancangan Halaman Utama
HEADER
BERAN INTERA
INFO BANTUA
ADMIN PROFIL
ISI
FOOTER
ARTIKEL
PENYA
OBAT
PENYA OBAT
Universitas Sumatera Utara
3.5.2. Rancangan Halaman Interaksi
Halaman menu interaksi merupakan halaman yang digunakan oleh user untuk mengetahui interaksi obat berdasarkan nama obat yang diinputkan ke dalam sistem.
Rancangan halaman interaksi obat dapat dilihat pada gambar di bawah ini.
Gambar 3.6 Rancangan Halaman Menu Interaksi
Pada menu interaksi, user diminta untuk mengisi nama obat yang akan diinteraksikan dengan memilih nama obat dari pilihan obat yang tersedia di basis data.
Setiap nama obat yang dipilih akan masuk ke dalam tabel daftar nama obat yang akan diinteraksikan. Kemudian setelah nama obat yang akan diinteraksikan dipilih, user
harus mengklik button “SELANJUTNYA” pada bagian kanan bawah halaman. Apabila telah diklik, maka akan ditampilkan halaman yang memuat daftar pertanyaan
yang harus dijawab oleh user. Rancangan halaman pertanyaan konsultasi dapat dilihat pada gambar di bawah ini
meloksikam
selanjutnya
Silahkan pilih masukkan obat Pilih obat
OBAT Nama obat
1. Meloksikam
2. Captopril
HEADER
FOOTER
BERAND INTERAKS
ARTIKEL INFO
BANTUAN ADMIN
PROFIL
PENYAKI OBAT
PENYAK OBAT
OBAT Tambah obat
selanjutnya
Universitas Sumatera Utara
Gambar 3.7 Rancangan Halaman Pertanyaan Konsultasi
Rancangan berikutnya adalah tampilan hasil interaksi obat yang dapat dilihat pada gambar dibawah ini.
Gambar 3.8 Rancangan Halaman Hasil Interaksi Obat
CEK
Silahkan menjawab seluruh pertanyaan yang tersedia 1. Apakah anda mengalami nyeri di daerah persendian?
Ya TIdak
2. Apakah anda menderita penyakit jantung? Ya
TIdak 3. Apakah anda mengalami kesulitan dalam bernafas?
Ya TIdak
FOOTER
HEADER
BERAND INTERAKS
ARTIKEL INFO
BANTUAN ADMIN
PROFIL
PENYAKI OBAT
PENYAK OBAT
Cek interaksi
HEADER
BERANDA INTERAKS
I ARTIKEL
INFO
ADMIN
BANTUA
Hasil Interaksi Obat
Hasil interaksi obat yang anda inputkan adalah obat tersebut dapat anda konsumsi bersamaantidak dapat anda konsumsi bersamaan.
KETERANGAN INTERAKSI Meloksikam Captopril
keterangan dan informasi interaksi obat - obatan tersebut
FOOTER
PROFIL PENYA
OBAT PENYAK
OBAT
Universitas Sumatera Utara
3.5.3. Rancangan Halaman Artikel Halaman menu artikel, adalah halaman dimana terdapat tampilan artikel – artikel
tentang penyakit dan obat meloksikam, captopril, warfarin, aspirin, cimetidine, dan digoxin. Rancangan halaman ini dapat dilihat pada gambar di bawah ini.
Gambar 3.9 Gambar Rancangan Halaman Artikel
3.5.4. Rancangan Halaman Info Halaman menu Info, adalah halaman dimana terdapat tampilan informasi seputar
penyakit dan obat meloksikam, captopril, warfarin, aspirin, cimetidine, dan digoxin. Rancangan halaman ini dapat dilihat pada gambar di bawah ini.
HEADER
BERANDA INTERAK
ARTIKEL INFO
ADMIN
BANTUA
ARTIKEL PENYAKIT
Artikel1 isi
keterangan…………………………………………………………………………………… ….
Artikel 2 isi
keterangan…………………………………………………………………………………… ….
OBAT Artikel 1
isi
FOOTER
PROFIL PENYA
OBAT PENYA
OBAT
Universitas Sumatera Utara
Gambar 3.8 Rancangan Halaman Info
Gambar 3.10 Gambar Rancangan Halaman Info
3.5.5. Rancangan Halaman Bantuan Pada halaman menu Bantuan terdapat sub menu manual dan admin. Sub menu manual
berisi bantuan dan keterangan penggunaan aplikasi sistem pakar interaksi obat ini. Sehingga dapat membantu user yang belum pernah menggunakan aplikasi sistem
pakar ini sebelumnya.
Rancangan menu admin ini digunakan untuk otentifikasi username dan password yang diinputkan oleh administrator sebelum masuk ke halaman
administrator. Rancangan menu manual dan admin dapat dilihat pada gambar di bawah ini.
HEADER
BERANDA INTERAKS
I ARTIKEL
INFO
ADMIN
BANTUA N
INFO PENYAKIT
Penyakit 1 isi
keterangan………………………………………………………………………………………. Penyakit 2
isi keterangan……………………………………………………………………………………….
OBAT Obat 1
isi keterangan
FOOTER
PROFIL PENYA
OBAT PENYA
OBAT
Universitas Sumatera Utara
Gambar 3.11 Gambar Rancangan Halaman Bantuan
3.5.6. Rancangan Halaman Admin Pada halaman ini akan terdapat kolom yang berisikan username dan password yang
hanya dapat diisi oleh admin. Dapat dilihat pada gambar di bawah ini.
Gambar 3.12a Gambar Rancangan Halaman Administrator
HEADER
BERANDA INTERAKS
I ARTIKEL
INFO
ADMIN
BANTUA
BANTUAN KETERANGAN USER MANUAL
……………………………………………………………………………………………… ……………………………………
……………………………………………………………………………………………… ……………………………………
……………………………………………………………………………………………… …………………………………...
FOOTER
PROFIL PENYA
OBAT PENYAK
OBAT
HEADER
BERANDA INTERAKS
I ARTIKEL
INFO
ADMIN
BANTUA
FOOTER
PROFIL PENYA
OBAT PENYAK
OBAT
Silahkan masukkan username dan password Username
:
Password
:
LOGI
Universitas Sumatera Utara
Setelah admin memasukkan username dan password, maka akan muncul halaman administrator. Halaman admistrator ini akan terdiri dari menu Artikel, menu Data
Interaksi, menu Data Obat, menu Data Penyakit,menu Data Gejala menu Pertanyaan dan menu Log Out. Dimana di masing- masing menu terdapat tambah, hapus, dan
ubah.
Gambar 3.12b Gambar Rancangan Halaman Administrator
HEADER
ARTIKE L
DATA INTERAKSI
DATA OBAT
DATA GEJALA
DATA PENYAKIT
FOOTER
PERTANYAA N
WELCOME ADMIN
LOGOU
Universitas Sumatera Utara
BAB 4
IMPLEMENTASI DAN PENGUJIAN
Pada bab ini akan dijelaskan tentang implementasi dan pengujian dari aplikasi yang telah dirancang pada bab 3. Implementasi dilakukan untuk mengetahui hasil dari
Kategori