43
3.4 Perancangan Antarmuka Interface
3.6.1 Daftar
Gambar 3.7 Halaman Daftar
Keterangan : 1. Canvas yang memuat logo dari aplikasi dengan link - link halaman
2. Canvas yang memuat menu dari aplikasi. 3. Username
: Data harus diisi dengan tipe data varchar 4. Password
: Data diisi dengan password sesuai keinginan user. 5. Jenis Kelamin : Data yang diisi berupa tipe integer dengan menu combo box.
6. Berat : Data harus diisi dengan tipe data integer
7. Tinggi : Data harus diisi dengan tipe data integer
8. Umur : Data yang diisi berupa tipe integer dengan menu combo box
9. Kadar Purin : Data yang diisi berupa tipe integer dengan menu combo box
10. Tombol button Daftar untuk memproses inputan.
3.6.2 Data Lengkap
Jika user sudah mendaftar, maka akan muncul halaman Data lengkap yang berisi biodata user, kebutuhan nutrisi, dan makanan yang harus dipantang.
Link 1 | Link 2 | Link 3 | Link 4
Logo title
Menu Username
Jenis Kelamin Berat
Tinggi Umur
Kadar Purin Daftar
1
3 4
5 6
7 8
10 2
Password
9
Universitas Sumatera Utara
44
Gambar 3.8 Halaman Data Lengkap
Keterangan : 1.
yang memuat judul dari halaman aplikasi. 2.
yang memuat data lengkap dari
r. 3.
yang memuat kebutuhan nutrisi dari
r. 4.
yang memuat makanan yang dipantang oleh
r. 5.
Tombol
to n
untuk melanjutkan tahap berikutnya. Untuk Memilih makanan yang diinginkan sesuai dengan golongan asam urat ,maka
r dapat memilih tombol Selanjutnya .
3.6.3 Edit Data
Halaman ini berupa pengubahan data, jika user ingin mengedit data yang telah diinput sebelumnya.
title
Username Jenis Kelamin
Berat Tinggi
Umur Kadar Purin
Data Lengkap Anda Kebutuhan Nutrisi Anda
Kalori perhari Sarapan
Siang Malam
Cemilan Protein
Makanan yang dipantang Untuk Memilih makanan yang diinginkan
sesuai dengan Golongan asam urat klik Selanjutnya
1 2
3
4
5
Universitas Sumatera Utara
45
Gambar 3.9 Halaman Edit Data
Keterangan : 1.
yang memuat judul dari halaman aplikasi. 2. Username
: Data harus diisi dengan tipe data varchar
3. Password :
Data diisi dengan password sesuai keinginan user. 4. Jenis Kelamin :
Data yang diisi berupa tipe integer dengan menu combo box. 5. Berat
: Data harus diisi dengan tipe data integer
6. Tinggi :
Data harus diisi dengan tipe data integer 7. Umur
: Data yang diisi berupa tipe integer dengan menu combo box
8. Kadar Purin :
Data yang diisi berupa tipe integer dengan menu combo box 9. Tombol button Update untuk memproses.
3.6.4 Pemilihan Menu Makanan
Halaman ini berupa pemilihan bahan makanan yang boleh dipilh user dan juga waktu makan yang diinginkan.
title Username
Jenis Kelamin Berat
Tinggi Umur
Kadar Purin Update
2
4 5
6 7
8 9
Password
3 1
Universitas Sumatera Utara
46
Gambar 3.10 Halaman Pemilihan Menu Makanan
Keterangan : 1.
yang memuat judul dari halaman aplikasi. 2. Label waktu makan yang diisi berupa tipe integer dengan menu
o m
. 3. Pemilihan makanan yang terdiri dari daftar makanan dengan menu
k
o x
4. Tombol button untuk melanjutkan tahap berikutnya.
3.6.5 Hasil Pemilihan
Setelah memilih menu makanan, maka akan ditampilkan hasil perhitungan kalori.
Gambar 3.11 Halaman Hasil Pemilihan Menu Makanan
title
Pilih waktu makan yang diinginkan Data Lengkap Anda
Pemilihan Makanan
Jangan lupa untuk memilih waktu makan, untuk melanjutkan klik
Selanjutnya 1
2 3
4
Makanan yang Anda Pilih
Untuk Melanjutkan, klik Proses Proses
Kalori yang dibutuhkan :
Nama Makanan Jumlah Kalori
Jumlah Protein 1
3 2
Universitas Sumatera Utara
47
Keterangan : 1. Label yang memuat kalori yang dibutuhkan.
2. Daftar makanan yang telah dipilih
r. 3. Tombol
¡
to n
untuk melanjutkan memproses.
3.6.6 Daftar Menu Makanan
Gambar 3.12 Halaman Daftar Menu Makanan
Keterangan : 1. Canvas yang memuat judul dari halaman aplikasi.
2. Label yang memuat kalori yang dibutuhkan. 3. Daftar makanan yang telah diproses oleh perhitungan branch and bound.
4. Tombol button untuk melanjutkan kembali memilih makanan.
title
Daftar Menu Makanan
Untuk kembali memilih makanan, klik Pilih Menu
Kalori yang dibutuhkan :
Nama Makanan Ukuran
Jumlah Protein Jumlah Kalori
1 2
3
4 1
Universitas Sumatera Utara
BAB 4
IMPLEMENTASI PROGRAM
I
¢£¤¥ ¢ ¥ ¦§ ¨© ª
«¨¬ª ©
ª ©
§ ¥ ¢
¢ ¥¬ £
¨®¨¦ §
¨ ¯ ¨ £
¨® ¯ª¬ «¨
¬ ª £
¬° © ¥©
£ ¥ ¦±
¥¢² ¨ ¦± ¨ ¦
£ ¥¬
¨ ¦± ®¨
§ ¤
¦ ¨®
© ¥ §¥¤¨ ¯
¢ ¥ ¤ ¨ ¤
ª §¨
¯ ¨£
¨ ¦ £
¥ ¬ ¨ ¦
³ ¨ ¦±
¨¦ ¯
¨ ¤ ¨
¢¨¦ ´
D
¨ ¤¨¢ ² ¨²
ª¦ª ¨
® ¨ ¦
« ª µ
¥ ¤ ¨© ®¨¦
²¨ ±¨ ª ¢
¨ ¦ ¨
³ ¨ ¬¨
¢ ¥ ¦
µ ¨¤¨
¦ ®¨ ¦
¨ £¤ª®¨© ª £
¥ ¦ ¶
© ¦ ¢¥ ¦
¢¨
®¨ ¦ ¨ ¦
ª¦ª ´
A
«¨ £
¦ £
¬ °± ¬¨¢
¶ ¨
¦± « ª ¢
¨®© « §
¥¬ « ª¬ ª
« ¨ ¬ ª §¨¢ £ª¤¨ ¦
¯ ¨¤¨ ¢
¨ ¦ § ¨ ¢¨
²¥© ¥¬ §¨
§¨¢ £ª¤¨ ¦ ¢
¥ ¦ ·
¢ ¥ ¦
¶
¨ ¦± ¤
¨ ª¦¦ ¶ ¨
´
4.1 Spesifikasi Perangkat