Perancangan Antarmuka Interface Implementasi Algoritma Branch And Bound Pada Penentuan Menu Makanan Penderita Asam Urat

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