lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/1787/4/bab iii.pdf · gambar...

23
Team project ©2017 Dony Pratidana S. Hum | Bima Agus Setyawan S. IIP Hak cipta dan penggunaan kembali: Lisensi ini mengizinkan setiap orang untuk menggubah, memperbaiki, dan membuat ciptaan turunan bukan untuk kepentingan komersial, selama anda mencantumkan nama penulis dan melisensikan ciptaan turunan dengan syarat yang serupa dengan ciptaan asli. Copyright and reuse: This license lets you remix, tweak, and build upon work non-commercially, as long as you credit the origin creator and license it on your new creations under the identical terms.

Upload: lamphuc

Post on 27-May-2019

215 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/1787/4/BAB III.pdf · Gambar 3.2 adalah sistem flow untuk member yang menggambarkan proses yang terjadi saat member

Team project ©2017 Dony Pratidana S. Hum | Bima Agus Setyawan S. IIP 

 

 

 

 

 

Hak cipta dan penggunaan kembali:

Lisensi ini mengizinkan setiap orang untuk menggubah, memperbaiki, dan membuat ciptaan turunan bukan untuk kepentingan komersial, selama anda mencantumkan nama penulis dan melisensikan ciptaan turunan dengan syarat yang serupa dengan ciptaan asli.

Copyright and reuse:

This license lets you remix, tweak, and build upon work non-commercially, as long as you credit the origin creator and license it on your new creations under the identical terms.

Page 2: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/1787/4/BAB III.pdf · Gambar 3.2 adalah sistem flow untuk member yang menggambarkan proses yang terjadi saat member

31

BAB III

METODE DAN PERANCANGAN SISTEM

Pada bab ini dijelaskan mengenai metode penelitian yang dilakukan dan

langkah-langkah untuk mengembangkan sistem yang meliputi analisis sistem dan

perancangan sistem.

3.1 Metode Penelitian

Pada bab sebelumnya sudah dijelaskan mengenai teori- teori yang

digunakan sebagai dasar untuk membuat aplikasi ini. Metode yang digunakan

dalam penelitian tugas akhir ini adalah sebagai berikut.

1. Studi Literatur

Melakukan kajian pustaka terhadap hasil penelitian orang lain dan mencari

buku-buku yang relevan dan dapat menunjang pengembangan sistem pakar.

Berkomunikasi dengan pakar yang mempunyai pengetahuan mengenai hal

yang dibahas pada sistem pakar ini.

2. Analisis dan Perancangan Sistem

Melakukan analisis untuk menemukan batasan masalah dari sistem yang

dibuat serta merancang sistem untuk menyelesaikan masalah. Perancangan

sistem terdiri dari perancangan cara kerja aplikasi dan Graphical User

Interface (GUI).

3. Implementasi

Proses membangun sistem didasarkan pada analisis dan perancangan sistem

yang sudah dibuat sebelumnya. Sistem ini dijalankan pada mobile berbasis

Rancang Bangun ..., Titania Wijaya, FTI UMN, 2014

Page 3: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/1787/4/BAB III.pdf · Gambar 3.2 adalah sistem flow untuk member yang menggambarkan proses yang terjadi saat member

32

android. Coding dilakukan menggunakan aplikasi eclipse dengan bahasa

pemrograman Java.

4. Pengujian

Pengujian pada sistem pakar ini dilakukan untuk mengetahui apakah sistem

sudah berjalan sesuai dengan yang diharapkan.

5. Perbaikan

Apabila setelah dilakukan pengujian ditemukan masalah, maka perlu

dilakukan perbaikan terhadap sistem pakar ini agar menjadi lebih baik.

3.2 Diagram Sistem

Pada bagian diagram sistem ini terdapat beberapa diagram yang digunakan

untuk menjelaskan prosedur kerja sistem secara umum.

3.2.1 Sistem Flow Diagram

Sistem flow yang dibuat adalah sistem flow untuk admin dan member.

Sistem flow untuk admin ini menggambarkan bagaimana alur sistem pada aplikasi

yang dilakukan oleh seorang admin. Admin harus login terlebih dahulu untuk

dapat menggunakan aplikasi ini. Sistem melakukan verifikasi apakah username

dan password yang dimasukkan sudah benar atau tidak. Admin dapat menambah

makanan, mengubah makanan, dan menambah admin. Untuk lebih jelasnya, dapat

dilihat pada Gambar 3.1.

Rancang Bangun ..., Titania Wijaya, FTI UMN, 2014

Page 4: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/1787/4/BAB III.pdf · Gambar 3.2 adalah sistem flow untuk member yang menggambarkan proses yang terjadi saat member

33

Gambar 3.1 System Flow untuk Admin

Gambar 3.2 adalah sistem flow untuk member yang menggambarkan

proses yang terjadi saat member menggunakan sistem ini. Seperti pada admin,

member harus login terlebih dahulu untuk menggunakan aplikasi ini. Member

dapat membuat menu, melihat menu yang dibuat, melihat semua menu makanan

yang ada, mengubah profil, dan melihat help. Sistem flow untuk member dapat

dilihat pada Gambar 3.2.

Rancang Bangun ..., Titania Wijaya, FTI UMN, 2014

Page 5: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/1787/4/BAB III.pdf · Gambar 3.2 adalah sistem flow untuk member yang menggambarkan proses yang terjadi saat member

34

Gambar 3.2 System Flow untuk Member

Gambar 3.3 merupakan sistem flow proses fuzzy pada sistem pendukung

keputusan. Proses menghitung derajat keanggotaan disebut juga proses

fuzzyfikasi. Dimana proses ini membutuhkan data lain, yaitu himpunan fuzzy

input yang disimpan dalam variabel input. Hasil dari proses ini akan digunakan

dalam proses inferensi.

Rancang Bangun ..., Titania Wijaya, FTI UMN, 2014

Page 6: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/1787/4/BAB III.pdf · Gambar 3.2 adalah sistem flow untuk member yang menggambarkan proses yang terjadi saat member

35

Pada proses mencari nilai minimal dari setiap rule yang disebut juga

inferensi fuzzy, data hasil fuzzyfikasi diolah dengan bantuan rule fuzzy dan

himpunan fuzzy output.

Proses selanjutnya adalah proses mencari nilai maksimal dari rule yang

mempunyai bahasa yang sama, tetapi miunya berbeda. Setelah semua proses

selesai, maka hasil yang berupa rangkuman dari keseluruhan proses fuzzy akan

ditampilkan.

Gambar 3.3 System Flow proses fuzzy

pada sistem pendukung keputusan

Rancang Bangun ..., Titania Wijaya, FTI UMN, 2014

Page 7: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/1787/4/BAB III.pdf · Gambar 3.2 adalah sistem flow untuk member yang menggambarkan proses yang terjadi saat member

36

3.2.2 Data Flow Diagram

Data Flow Diagram (DFD) adalah sebuah teknik grafis yang

menggambarkan aliran informasi dan transformasi yang diaplikasikan pada saat

data bergerak dari input menjadi output. DFD dapat digunakan untuk menyajikan

sebuah sistem atau perangkat lunak pada setiap tingkat abstraksi. DFD dapat

dibagi ke dalam tingkat-tingkat yang merepresentasikan aliran informasi yang

bertambah dan fungsi ideal. DFD memberikan suatu mekanisme bagi pemodelan

fungsional dan pemodelan aliran informasi. Gambar 3.3 merupakan Context

Diagram dari sistem yang dirancang.

Gambar 3.4 DFD Context Diagram

Pada Gambar 3.4, dapat dilihat bahwa sistem ini mempunyai dua entitas,

yaitu Admin dan Member, serta satu proses, yaitu Sistem Penentuan Menu

Makanan Sehat Berdasarkan Golongan Darah.

Rancang Bangun ..., Titania Wijaya, FTI UMN, 2014

Page 8: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/1787/4/BAB III.pdf · Gambar 3.2 adalah sistem flow untuk member yang menggambarkan proses yang terjadi saat member

37

Gambar 3.5 DFD Level 1

Rancang Bangun ..., Titania Wijaya, FTI UMN, 2014

Page 9: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/1787/4/BAB III.pdf · Gambar 3.2 adalah sistem flow untuk member yang menggambarkan proses yang terjadi saat member

38

Gambar 3.5 adalah gambar DFD level 1 untuk sistem ini. Terdapat 8 proses yang

memiliki tugas yang berbeda-beda, yaitu Log User, Tambah Admin Baru, Tambah

Makanan, Edit Makanan, Tampil Semua Makanan, Tampil Menu Makanan

Dibuat, Edit Member, dan Membuat Menu.

Gambar 3.6 DFD Level 2.1

Gambar 3.6 adalah DFD level 2.1 dari proses Membuat Menu. Member

memasukkan tinggi badan dan berat badan, lalu data tersebut digunakan untuk

menghitung kebutuhan kalori yang dibutuhkan oleh tubuh. Setelah mengetahui

jumlah kalori yang dibutuhkan, sistem akan menyusun menu makanan.

3.2.3 Entity Relationship Diagram

Entity Relationship Diagram (ERD) adalah merupakan salah satu model

yang digunakan untuk mendesain database dengan tujuan menggambarkan data

yang berelasi pada sebuah database. Umumnya setelah perancangan ERD selesai

berikutnya adalah mendesain database secara fisik yaitu pembuatan tabel, index

Rancang Bangun ..., Titania Wijaya, FTI UMN, 2014

Page 10: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/1787/4/BAB III.pdf · Gambar 3.2 adalah sistem flow untuk member yang menggambarkan proses yang terjadi saat member

39

dengan tetap mempertimbangkan performance. Berikut merupakan ERD dari

sistem yang dirancang.

Gambar 3.7 Entity Relationship Diagram

3.3 Struktur Tabel

1. Tabel User

Fungsi : menyimpan semua data user.

Primary Key : username

Foreign Key : -

Tabel 3.1 Struktur Tabel User

Nama field Type Deskripsi

username varchar(15) Identifier unik dari tabel user

fullname varchar(50) Nama user

password varchar(15) Password akun user

dob Date Tanggal lahir user

gender char(2) Jenis kelamin user

bloodtype varchar(3) Golongan darah user

usertype varchar(10) Jenis user

email varchar(30) Email user

Rancang Bangun ..., Titania Wijaya, FTI UMN, 2014

Page 11: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/1787/4/BAB III.pdf · Gambar 3.2 adalah sistem flow untuk member yang menggambarkan proses yang terjadi saat member

40

2. Tabel Foods

Fungsi : menyimpan semua data makanan.

Primary Key : foodname

Foreign Key : -

Tabel 3.2 Struktur Tabel Foods

Nama field Type Deskripsi

foodname varchar(50) Identifier unik dari tabel foods

food_calories int(11) Kalori makanan

food_fat Float Lemak yang terkandung dalam makanan

food_carbo Float Karbohidrat dalam makanan

food_protein Float Protein dalam makanan

food_size varchar(20) Porsi dari makanan

food_blood varchar(10) Golongan darah sesuai dengan makanan

3. Tabel Menu

Fungsi : menyimpan semua data makanan.

Primary Key : -

Foreign Key : username (tabel User)

foodname (tabel Foods)

Tabel 3.3 Struktur Tabel Menu

Nama field Type Deskripsi

username varchar(15) Identifier unik dari tabel user

food_name varchar(50) Identifier unik dari tabel foods

food_type char(2) Waktu makan ( B, L, D)

food_size varchar(20) Porsi makan

food_calories int(11) Kalori makanan

date date Tanggal menu dibuat

Rancang Bangun ..., Titania Wijaya, FTI UMN, 2014

Page 12: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/1787/4/BAB III.pdf · Gambar 3.2 adalah sistem flow untuk member yang menggambarkan proses yang terjadi saat member

41

3.4 Model Fuzzy

Secara teori sudah ada standar klasifikasi untuk menentukan status gizi

berdasarkan Indeks Massa Tubuh (IMT) atau lebih dikenal dengan Body Mass

Index (BMI). Namun, standar penentuan status gizi tersebut menggunakan

himpunan tegas. Penggunaan himpunan tegas dalam penentuan status gizi sangat

kaku karena dengan adanya perubahan kecil saja terhadap nilai mengakibatkan

perbedaan kategori.

3.4.1 Himpunan Fuzzy

Dalam menentukan status gizi dibutuhkan 2 variabel, yaitu variabel berat

dan tinggi badan. Penentuan variabel yang digunakan dalam penelitian dapat

dilihat pada Tabel 3.4.

Tabel 3.4 Semesta pembicaraan untuk setiap variabel fuzzy

Fungsi Nama variabel Semesta Pembicaraan

Input Berat Badan [30 , 80]

Tinggi Badan [130 , 190]

Dari variabel yang dimunculkan, disusun dominan himpunan fuzzy.

Setelah menentukan dominan himpunan fuzzy, selanjutnya ditentukan fungsi

keanggotaan dari masing-masing variabel seperti yang terlihat pada Tabel 3.5.

Tabel 3.5 Tabel Himpunan Fuzzy

Variabel Himpunan Dominan Fungsi

Keanggotaan Parameter

Tinggi

(cm)

Pendek [130 , 160] Bahu kiri (130 ; 150 ; 160)

Normal [150 , 170 ] Segitiga (150 ; 160 ; 170)

Tinggi [160 , 190] Bahu kanan (160 ; 170 ; 190)

Rancang Bangun ..., Titania Wijaya, FTI UMN, 2014

Page 13: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/1787/4/BAB III.pdf · Gambar 3.2 adalah sistem flow untuk member yang menggambarkan proses yang terjadi saat member

42

Tabel 3.5 Tabel Himpunan Fuzzy (lanjutan)

Variabel Himpunan Dominan Fungsi

Keanggotaan Parameter

Berat

(kg)

Ringan [30 , 55] Bahu kiri (30 ; 40 ; 55)

Normal [45 , 65] Segitiga (45 ; 55 ; 65)

Berat [55 , 80] Bahu kanan (55 ; 70 ; 80)

Himpunan fuzzy dari variabel berat badan dan tinggi badan adalah sebagai

berikut :

a. Himpunan fuzzy variabel berat

Pada variabel berat badan, terdapat 3 himpunan fuzzy, yaitu RINGAN,

NORMAL, dan BERAT. Gambar himpunan fuzzy untuk variabel berat dapat

dilihat pada Gambar 3.8.

Gambar 3.8 Himpunan Fuzzy Berat Badan

Seseorang dianggap ringan bila berat badannya antara 30 kg sampai 55 kg,

dianggap normal bila berat badannya antara 45 kg sampai 65 kg, dianggap

berat bila berat badannya antara 55 kg sampai 80 kg, dianggap ringan

Rancang Bangun ..., Titania Wijaya, FTI UMN, 2014

Page 14: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/1787/4/BAB III.pdf · Gambar 3.2 adalah sistem flow untuk member yang menggambarkan proses yang terjadi saat member

43

sekaligus normal bila berat badannya antara 45 kg sampai 55 kg, dan dianggap

normal sekaligus berat bila berat badannya antara 55 kg sampai 65 kg.

b. Himpunan fuzzy variabel tinggi

Pada variabel tinggi badan, terdapat 3 himpunan fuzzy, yaitu PENDEK,

NORMAL, dan TINGGI. Gambar himpunan fuzzy untuk variabel tinggi dapat

dilihat pada Gambar 3.9.

Gambar 3.9 Himpunan Fuzzy Tinggi Badan

Seseorang dianggap rendah bila tinggi badannya antara 130 cm sampai 160

cm, dianggap normal bila tinggi badannya antara 150 cm sampai 170 cm,

dianggap tinggi bila tinggi badannya antara 160 cm sampai 190 cm, dianggap

rendah sekaligus normal bila tingginya antara 150 cm sampai 160 cm,

dianggap normal sekaligus tinggi bila tingginya antara 160 cm sampai 170 cm.

3.4.2 Aplikasi Fungsi Implikasi

Setelah pembentukan himpunan Fuzzy, maka dilakukan pembentukan

aturan Fuzzy. Aturan-aturan dibentuk untuk menyatakan relasi antara input dan

Rancang Bangun ..., Titania Wijaya, FTI UMN, 2014

Page 15: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/1787/4/BAB III.pdf · Gambar 3.2 adalah sistem flow untuk member yang menggambarkan proses yang terjadi saat member

44

output. Adapun aturan-aturan dasar fuzzy yang digunakan oleh sistem ditunjukkan

pada Tabel 3.6.

Tabel 3.6 Rules Evaluasi Status Gizi

Berat

Ringan Normal Berat

Tinggi

Rendah Normal Gemuk Gemuk

Normal Kurus Normal Gemuk

Tinggi Kurus Kurus Normal

[R1]: Jika berat badan adalah ringan dan tinggi badan adalah rendah maka status

gizinya adalah normal.

[R2]: Jika berat badan adalah ringan dan tinggi badan adalah normal maka status

gizinya adalah kurus.

[R3]: Jika berat badan adalah ringan dan tinggi badan adalah tinggi maka status

gizinya adalah kurus.

[R4]: Jika berat badan adalah normal dan tinggi badan adalah rendah maka status

gizinya adalah gemuk.

[R5]: Jika berat badan adalah normal dan tinggi badan adalah normal maka status

gizinya adalah normal.

[R6]: Jika berat badan adalah normal dan tinggi badan adalah tinggi maka status

gizinya adalah kurus.

[R7]: Jika berat badan adalah berat dan tinggi badan adalah rendah maka status

gizinya adalah gemuk.

[R8]: Jika berat badan adalah berat dan tinggi badan adalah normal maka status

gizinya adalah gemuk tingkat ringan.

[R9]: Jika berat badan adalah berat dan tinggi badan adalah tinggi maka status

gizinya adalah normal.

Rancang Bangun ..., Titania Wijaya, FTI UMN, 2014

Page 16: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/1787/4/BAB III.pdf · Gambar 3.2 adalah sistem flow untuk member yang menggambarkan proses yang terjadi saat member

45

3.4.3 Evaluasi Uji Perhitungan Sistem

Himpunan fuzzy digunakan untuk menentukan status gizi seseorang.

Metode fuzzy yang digunakan adalah Metode Mamdani. Pada Metode Mamdani,

fungsi implikasi yang digunakan adalah Min. Untuk inferensi sistem fuzzy,

digunakan Metode Max (Rumus 2.6). Himpunan fuzzy tersebut meliputi variabel

berat badan dan tinggi badan. Berikut adalah contoh penerapan logika fuzzy dalam

menentukan status gizi seseorang.

Contoh 1 : Seseorang dengan berat badan 52 kg dan tinggi badan 162 cm.

1. Untuk berat 52 kg :

Perhitungan fungsi keanggotaan menggunakan rumus pada Gambar 2.6

dan rumus pada Gambar 2.7.

Untuk µ1 (ringan) = (55 – 52) / (55 – 40)

= 3 / 15 = 0.2

Untuk µ2 (normal) = (52 – 45) / (55 – 45)

= 7 / 10 = 0.7

2. Untuk tinggi 162 cm :

Perhitungan fungsi keanggotaan menggunakan rumus pada Gambar 2.5

dan rumus pada Gambar 2.7.

Untuk µ1 (normal) = (170 – 162) / (170 – 160)

= 8 / 10 = 0.8

Untuk µ2 (tinggi) = (162 – 160) / (170 – 160)

= 2 / 10 = 0.2

Rancang Bangun ..., Titania Wijaya, FTI UMN, 2014

Page 17: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/1787/4/BAB III.pdf · Gambar 3.2 adalah sistem flow untuk member yang menggambarkan proses yang terjadi saat member

46

Adapun pembentukan bahasa keputusan dengan berdasarkan Tabel 3.6,

diperoleh aturan sebagai berikut :

IF Berat Badan = Normal (0.7) AND Tinggi Badan = Normal (0.8)

THEN Bahasa Keputusan = Normal (0.7)

IF Berat Badan = Normal (0.7) AND Tinggi Badan = Tinggi (0.2)

THEN Bahasa Keputusan = Kurus (0.2)

IF Berat Badan = Ringan (0.2) AND Tinggi Badan = Normal (0.8)

THEN Bahasa Keputusan = Kurus (0.2)

IF Berat Badan = Ringan (0.2) AND Tinggi Badan = Tinggi (0.2)

THEN Bahasa Keputusan = Kurus (0.2)

Setelah melalui proses fuzzyfikasi dengan berdasarkan aturan fuzzy (rule),

dimana penggunaan logika AND dalam sistem ini, maka nilai yang digunakan

adalah nilai µ terkecil. Proses selanjutnya adalah penggunaan logika OR

dimana bahasa keputusan yang diambil adalah nilai µ yang terbesar, yaitu

Normal (0.7).

Contoh 2 : Seseorang dengan berat badan 48 kg dan tinggi badan 166 cm.

1. Untuk berat 48 kg :

Perhitungan fungsi keanggotaan menggunakan rumus pada Gambar 2.6

dan rumus pada Gambar 2.7.

Untuk µ1 (normal) = (48 – 45) / (55 – 45)

= 3 / 10 = 0.3

Untuk µ2 (ringan) = (55 – 48) / (55 – 40)

= 7 / 15 = 0.47

Rancang Bangun ..., Titania Wijaya, FTI UMN, 2014

Page 18: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/1787/4/BAB III.pdf · Gambar 3.2 adalah sistem flow untuk member yang menggambarkan proses yang terjadi saat member

47

2. Untuk tinggi 166 cm :

Perhitungan fungsi keanggotaan menggunakan rumus pada Gambar 2.5

dan rumus pada Gambar 2.7.

Untuk µ1 (normal) = (170 – 166) / (170 – 160)

= 4 / 10 = 0.4

Untuk µ2 (tinggi) = (166 – 160) / (170 – 160)

= 6 / 10 = 0.6

Adapun pembentukan bahasa keputusan dengan berdasarkan Tabel 3.6,

diperoleh aturan sebagai berikut :

IF Berat Badan = Normal (0.3) AND Tinggi Badan = Normal (0.4)

THEN Bahasa Keputusan = Normal (0.3)

IF Berat Badan = Normal (0.3) AND Tinggi Badan = Tinggi (0.6)

THEN Bahasa Keputusan = Kurus (0.3)

IF Berat Badan = Ringan (0.47) AND Tinggi Badan = Normal (0.4)

THEN Bahasa Keputusan = Kurus (0.4)

IF Berat Badan = Ringan (0.47) AND Tinggi Badan = Tinggi (0.6)

THEN Bahasa Keputusan = Kurus (0.47)

Setelah melalui proses fuzzyfikasi dengan berdasarkan aturan fuzzy (rule),

dimana penggunaan logika AND dalam sistem ini, maka nilai yang digunakan

adalah nilai µ terkecil. Proses selanjutnya adalah penggunaan logika OR

dimana bahasa keputusan yang diambil adalah nilai µ yang terbesar, yaitu

Kurus (0.47).

Rancang Bangun ..., Titania Wijaya, FTI UMN, 2014

Page 19: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/1787/4/BAB III.pdf · Gambar 3.2 adalah sistem flow untuk member yang menggambarkan proses yang terjadi saat member

48

3.5 Sketsa Antarmuka / Graphical User Interface

Desain antarmuka merupakan salah satu bagian penting dalam

membangun suatu aplikasi. Tujuan dari desain antarmuka adalah untuk membuat

interaksi pengguna sesederhana dan seefisien mungkin. Berikut adalah tampilan

dari desain antarmuka yang digunakan untuk membangun aplikasi ini.

1. Halaman Login

Pengguna aplikasi harus memasukkan username dan password yang dimiliki

pada halaman Login. Gambar 3.10 merupakan desain antarmuka untuk

halaman login.

Gambar 3.10 Halaman Login

2. Halaman Register

Jika pengguna aplikasi belum mempunyai username, maka harus mendaftar

terlebih dahulu. Gambar 3.11 merupakan halaman register untuk

mendaftarkan diri agar dapat menggunakan aplikasi.

Rancang Bangun ..., Titania Wijaya, FTI UMN, 2014

Page 20: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/1787/4/BAB III.pdf · Gambar 3.2 adalah sistem flow untuk member yang menggambarkan proses yang terjadi saat member

49

Gambar 3.11 Halaman Register

3. Menu Utama

Menu utama merupakan halaman utama yang berisi button-button yang

mempunyai fungsi yang berbeda-beda. Gambar 3.12 merupakan desain

antarmuka untuk menu utama.

Gambar 3.12 Menu Utama

Rancang Bangun ..., Titania Wijaya, FTI UMN, 2014

Page 21: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/1787/4/BAB III.pdf · Gambar 3.2 adalah sistem flow untuk member yang menggambarkan proses yang terjadi saat member

50

4. Halaman Hitung BMR

Halaman ini untuk menghitung BMR dan kebutuhan kalori harian yang

dibutuhkan oleh tubuh. Gambar 3.13 merupakan desain antarmuka dari

halaman ini.

Gambar 3.13 Halaman Hitung BMR

5. Halaman Buat Menu

Gambar 3.14 merupakan desain antarmuka untuk halaman buat menu. Pada

halaman ini, dibuat menu makanan sehat yang terdiri dari makan pagi, makana

siang, dan makan malam. Menu tersebut dibuat sesuai dengan golongan darah

dan kalori.

Rancang Bangun ..., Titania Wijaya, FTI UMN, 2014

Page 22: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/1787/4/BAB III.pdf · Gambar 3.2 adalah sistem flow untuk member yang menggambarkan proses yang terjadi saat member

51

.

Gambar 3.14 Halaman Buat Menu

6. Halaman Tampil Menu

Pada halaman ini, menu yang sudah dibuat sebelumnya ditampilkan.

Pengguna aplikasi dapat melihat dan menghapus menu tersebut. Gambar 3.15

merupakan desain antarmuka dari halaman ini.

Gambar 3.15 Halaman Tampil Menu

Rancang Bangun ..., Titania Wijaya, FTI UMN, 2014

Page 23: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/1787/4/BAB III.pdf · Gambar 3.2 adalah sistem flow untuk member yang menggambarkan proses yang terjadi saat member

52

7. Halaman Help

Gambar 3.16 merupakan desain antarmuka untuk Help. Halaman ini

membantu user yang tidak mengerti agar dapat menggunakan aplikasi.

Gambar 3.16 Halaman Help

Rancang Bangun ..., Titania Wijaya, FTI UMN, 2014