Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/4829/1/BAB III.pdf · Gambar...

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.

20

BAB III

METODOLOGI DAN PERANCANGAN SISTEM

3.1 Metode Penelitian

Dalam penelitian ini, metode penelitian yang dilakukan adalah sebagai

berikut.

1. Studi Literatur

Pada tahap ini dipelajari berbagai teori dan literatur yang akan digunakan

sebagai dasar teori dalam pengembangan penelitian ini. Teori-teori tersebut

di antaranya adalah Decision Support System, Responsive Web, Gizi Balita,

Simple Additive Weighting, Skala Likert, DeLone dan McLean Information

System Success Model, dan Cronbach Alpha.

2. Perancangan Sistem

Perancangan sistem dijabarkan ke dalam beberapa tahapan berikut ini.

a. Pembuatan flowchart untuk menunjukkan alur kerja sistem serta Data Flow

Diagram (DFD) untuk menjelaskan alur data yang diproses oleh sistem.

b. Pengumpulan data dengan melakukan proses input data dari sumber data

yang berupa buku ke dalam format excel untuk nantinya akan dimasukkan

kedalam sistem pendukung keputusan.

c. Perancangan sistem basis data yang digunakan sebagai sumber pemrosesan

data yang digunakan. Proses ini penting untuk memastikan bahwa sistem

basis data yang dibangun mampu mengakomodasi segala kebutuhan dan

menghasilkan sebuah sistem yang efisien dan dapat diandalkan.

d. Perancangan antarmuka sistem

Rancang Bangun Sistem..., Hendrix, FTI, 2017

21

Pada tahap ini dilakukan perancangan antarmuka sistem atau Graphical

User Interface (GUI). Desain antarmuka yang akan dibangun harus

memperhatikan pula kesan yang nantinya akan timbul ketika sistem

digunakan oleh user (User Experience). Sehingga desain haruslah dapat

memudahkan dan tidak mempersulit dalam penggunaanya.

3. Implementasi

Pada tahap ini dilakukan implementasi seluruh perancangan dan desain

yang telah dibuat dengan menggunakan bahasa pemrograman PHP dan

menggunakan MySQL sebagai basis data sistem.

4. Pengujian

Proses pengujian akan dilakukan pada dua hal yaitu pengujian kepada ibu

yang menggunakan sistem tersebut langsung dan pengujian hasil yang

dikeluarkan oleh sistem kepada pakar atau ahli gizi.

Proses pengujian kepada ibu yang menggunakan sistem bertujuan untuk

mengukur tingkat kepuasan dalam sisi tampilan, fungsionalitas, serta

performa sistem. Proses pengujian dilakukan dengan menggunakan

kuesioner yang diisi setelah aplikasi dicoba langsung. Sementara proses

pengujian hasil output sistem kepada pakar dilakukan untuk memastikan

bahwa hasil dari pemrosesan yang dilakukan sistem sudah sesuai dan

memenuhi standar yang ditetapkan serta valid untuk diikuti.

5. Evaluasi

Evaluasi terhadap sistem dilakukan untuk dapat menghasilkan kesimpulan

dari penelitian ini. Kesimpulan didapatkan setelah melakukan perhitungan

hasil kuesioner yang didapat. Tingkat akurasi sistem dilakukan dengan


22

membandingkan jumlah sampel kasus yang berhasil dan sesuai berdasarkan

pada pakar atau ahli gizi dengan jumlah seluruh sampel kasus yang nantinya

akan dijabarkan dalam bentuk persentase.

3.2 Pengumpulan Data

Data yang diperlukan pada proses implementasi sistem ini berupa data

bahan makanan yang diperoleh dari buku Tabel Komposisi Pangan Indonesia tahun

2009. Jumlah data bahan makanan yang digunakan dari buku tersebut adalah 282

bahan makanan yang memiliki kandungan makronutrien berupa total kalori,

karbohidrat, protein, dan lemak.

3.3 Perancangan Aplikasi

Perancangan aplikasi menghasilkan beberapa dokumen yang menjelaskan

perpindahan data pada aplikasi yang tersaji dalam bentuk Data Flow Diagram,

sitemap, alur kerja aplikasi dalam bentuk flowchart, hubungan antara satu tabel

dengan yang lainnya dalam bentuk database schema, struktur tabel, dan rancangan

antarmuka sistem.

3.3.1 Data Flow Diagram

Data Flow Diagram digunakan untuk mengetahui aliran data dari suatu

sistem yang dibuat. Pada Gambar 2.1 merupakan DFD Context Diagram pada

sistem. Pada sistem ini terdapat 4 entitas utama, yaitu admin, user, ahli gizi, dan

buku tabel bahan makanan. Entitas admin memiliki 14 data keluar dan 6 data

masuk. Entitas user memiliki 3 data keluar dan 6 data masuk. Entitas ahli gizi hanya


23

memiliki 1 aliran data keluar. Entitas buku tabel bahan makanan memiliki 2 data

keluar menuju proses.

Gambar 3.1 DFD Context Diagram Sistem Pendukung Keputusan Pemilihan

MPASI

Gambar 3.2 merupakan DFD level 1 yang menggambarkan aliran data yang

mendetail beserta proses-proses yang ada pada sistem. Terdapat 8 proses pada

sistem ini yaitu Proses login admin, Proses pengaturan bobot SAW, Proses

pengaturan data makanan, Proses pengaturan kategori, Proses penambahan admin,

Proses perubahan password admin, Proses pencarian bahan makanan, Proses

rekomendasi bahan makanan.

Masing-masing proses memiliki alur data dan penjabaran masing-masing.

Proses-proses tersebut akan dijabarkan dalam DFD level berikutnya.


24

Gambar 3.2 DFD Level 1 Sistem Pendukung Keputusan Pemilihan MPASI

24


25

Gambar 3.3 merupakan DFD Level 2 sub-proses pengaturan bobot SAW.

Entitas yang berada pada sistem ini adalah admin dan buku tabel bahan makanan.

Proses pengaturan bobot SAW memiliki beberapa proses-proses yang lebih

mendetail dan dijabarkan sebagai berikut.

1. Proses menampilkan data bobot SAW.

2. Proses pengaturan data bobot SAW.

Gambar 3.3 DFD Level 2 Sub-Proses Pengaturan bobot SAW

Gambar 3.4 merupakan DFD Level 2 sub-proses pengaturan data makanan.

Entitas yang berada pada sistem ini adalah admin dan buku tabel bahan makanan.

Terdapat 4 proses yang berada pada DFD level ini dan dijabarkan sebagai berikut.

1. Proses menampilkan data bahan makanan.

2. Proses penambahan data makanan baru.

3. Proses pembaruan data bahan makanan.

4. Proses penghapusan data bahan makanan.


26

Gambar 3.4 DFD Level 2 Sub-Proses Pengaturan Data Makanan

Gambar 3.5 merupakan DFD level 2 sub-proses pengaturan kategori. Pada

level ini memiliki dua entitas utama yaitu admin dan buku tabel bahan makanan.

Proses-proses lebih mendetail juga dijabarkan sebagai berikut.

1. Proses menampilkan data kategori

2. Proses menambah data kategori

3. Proses memperbarui data kategori

4. Proses menghapus data kategori.

Gambar 3.5 DFD Level 2 Sub-Proses Pengaturan Kategori


27

Gambar 3.6 merupakan DFD Level 2 sub-proses pencarian bahan makanan.

Terdapat dua proses utama pada level ini yaitu proses menampilkan data bahan

makanan dan proses pencarian data bahan makanan.

Gambar 3.6 DFD Level 2 Sub-Proses Pencarian Bahan Makanan

Gambar 3.7 merupakan DFD Level 2 sub-proses rekomendasi makanan.

Pada level ini digambarkan lebih mendetail proses serta aliran data yang ada.

Proses-proses yang ada dijabarkan sebagai berikut.

1. Proses menampilkan tampilan pilih makanan.

2. Proses perhitungan kebutuhan total kalori dan makronutrien.

3. Proses perhitungan nilai SAW bahan makanan.

4. Proses menampilkan rekomendasi data bahan makanan.


28

Gambar 3.7 DFD Level 2 Sub-Proses Rekomendasi Bahan Makanan

3.3.2 Sitemap

Gambar 3.8 menunjukkan sitemap dari website sistem pendukung

keputusan pemilihan bahan makanan pendamping ASI. Website ini terdiri dari 2

bagian utama yaitu halaman front-end dan halaman untuk admin. Pada bagian

front-end terdapat 5 halaman, yaitu halaman Home, Tentang Kami, Panduan, Pilih

Makanan, Cari Makanan. Halaman home menyediakan informasi tentang

pengetahuan umum mengenai kandungan dan nutrisi pada air susu ibu. Sedangkan

pada halaman Tentang Kami, informasi yang disediakan adalah tentang pembuat

sistem, serta curriculum vitae pembuat sistem, dan batasan-batasan yang terdapat

pada sistem yang dibuat.

Halaman Panduan berisi informasi tentang cara penggunaan sistem ini dan

bagaimana output pada sistem dihasilkan. Halaman Cari Makanan berisi data bahan

makanan yang digunakan pada sistem ini serta kandungan makronutriennya.


29

Halaman Pilih Makanan akan menampilkan informasi tentang rekomendasi bahan

makanan yang sesuai dengan kriteria umur dan berat badan bayi yang digunakan.

Pada bagian admin terdapat 6 bagian yaitu halaman Home, Bobot SAW,

Tambah Data Makanan, Category, Tambah Admin, Change Password. Halaman

Home berisi informasi umum pada halaman admin tersebut. Pada bagian Bobot

SAW terdapat halaman View Bobot SAW yang digunakan untuk memuat informasi

mengenai bobot kriteria yang digunakan pada sistem dan halaman Edit Bobot SAW

yang digunakan untuk mengubah data bobot tiap kriteria.

Halaman Tambah Data makanan terdapat 3 halaman yang berisi tentang

informasi dan proses untuk pengaturan data bahan makanan, yaitu View Data

Makanan yang digunakan untuk menampilkan seluruh data bahan makanan,

Tambah Data Bahan Makanan Baru untuk menambah data bahan makanan baru,

dan Edit data makanan untuk melakukan perubahan pada data bahan makanan.

Pada halaman Category memiliki 3 halaman yang berisi tentang informasi

dan proses untuk pengaturan kategori bahan makanan yang digunakan, yaitu View

Category untuk melihat seluruh data kategori makanan, Add Category untuk

menambahkan kategori bahan makanan baru, Edit Category untuk melakukan

perubahan pada data kategori yang sudah ada. Halaman Tambah Admin digunakan

untuk menambahkan admin baru pada sistem. Admin juga dapat melakukan

perubahan password pada halaman Change password.


30

Gambar 3.8 Sitemap Website Sistem Pendukung Keputusan Pemilihan Bahan

MPASI


31

3.3.3 Flowchart

Setelah merancang alur perpindahan data pada aplikasi beserta dengan

sitemap, maka tahap berikutnya adalah merancang alur berjalannya sistem

pendukung keputusan dalam bentuk flowchart. Flowchart akan terbagi menjadi dua

bagian besar yaitu proses front-end yang akan menjelaskan cara kerja sistem

pendukung keputusan menghasilkan rekomendasi makanan serta informasi umum

sistem dan proses back-end yang menjelaskan alur kerja sistem untuk pengelolaan

master data sistem dan bobot kriteria SAW sebagai algoritma yang digunakan.

Gambar 3.9 merupakan flowchart untuk bagian front-end sistem. Proses

akan menampilkan terlebih dahulu tampilan awal sistem. Setelah itu user dapat

memilih menu yang ingin dilihat. Terdapat 5 proses utama yang terdapat pada

bagian front-end, yaitu proses untuk menu Home untuk menampilkan tampilan

utama sistem, Tentang Kami untuk menampilkan informasi mengenai pembuat

sistem, Panduan untuk menampilkan informasi cara menggunakan sistem dan

pemberian makanan pendamping ASI yang benar, Pilih Makanan untuk melihat

rekomendasi bahan makanan pendamping sesuai dengan kriteria bayi, dan Cari

Makanan untuk mencari dan melihat keseluruhan data bahan makanan yang

digunakan.


32

Gambar 3.9 Flowchart Bagian Front-End Sistem


33

Gambar 3.10 menunjukkan flowchart dari halaman pilih makanan. Pada

halaman ini, sistem akan membutuhkan data umur dan berat badan bayi dari user

yang kemudian akan dicek terlebih dahulu apakah umur bayi yang dimasukkan

sesuai dengan syarat dasar sistem pendukung keputusan yaitu berusia antara 6

sampai 24 bulan. Setelah kondisi terpenuhi, maka proses perhitungan rekomendasi

bahan makanan akan dilakukan.

Gambar 3.10 Flowchart Halaman Pilih Makanan


34

Gambar 3.11 menunjukkan flowchart dari proses perhitungan rekomendasi

bahan makanan dengan menggunakan algoritma Simple Additive Weighting. Pada

proses ini akan dilakukan perhitungan untuk kebutuhan kalori serta makronutrien

yang terdiri dari karbohidrat, protein, dan lemak sesuai dengan data umur dan berat

badan bayi. Setelah itu sistem akan mengambil data yang dibutuhkan dari database

yaitu data bahan makanan dan data bobot kriteria yang digunakan. Setelah itu akan

dilakukan proses normalisasi dengan membagi nilai kandungan dari setiap baris

data dengan nilai maksimal kandungan secara keseluruhan. Setelah proses

normalisasi dilakukan, maka nilai kandungan kriteria setiap baris data bahan

makanan akan dikali dengan bobot setiap kriteria. Setelah itu akan dijumlahkan

nilai setiap kriteria untuk data bahan makanan tersebut. proses akan diulang sampai

seluruh data bahan makanan telah dilakukan proses perhitungan.

Setelah proses perhitungan kriteria selesai. Maka data akan diurutkan

berdasarkan nilai total penjumlahan setiap kriteria yang telah dihitung sebelumnya

dari nilai terbesar ke terkecil. Setelah seluruh proses selesai, maka sistem akan

menampilkan data bahan makanan yang direkomendasikan.


35

Gambar 3.11 Flowchart Perhitungan Algoritma SAW

Gambar 3.12 merupakan flowchart untuk halaman Cari Makanan. Pada

halaman ini, saat halaman dimuat, data yang diperlukan akan diambil dari database,

kemudian ditampilkan pada halaman web.


36

Gambar 3.12 Flowchart Halaman Cari Makanan

Gambar 3.13 merupakan flowchart keseluruhan untuk bagian back-end

sistem yang digunakan untuk mengelola seluruh data dan bobot kriteria yang

diugnakan pada sistem pendukung keputusan. Pada bagian ini terdapat 6 proses

utama, yaitu proses login untuk admin sistem, proses pada halaman menu Bobot

SAW untuk mengatur bobot kriteria yang digunakan dalam perhitungan

rekomendasi bahan makanan, menu Tambah Data Makanan untuk mengatur

seluruh data bahan makanan yang terdapat pada sistem, menu Category untuk

mengelola data kategori bahan makanan, menu Tambah Admin untuk

menambahkan admin baru sistem, dan menu Change Password untuk mengganti

data password admin.


37

Gambar 3.13 Flowchart Bagian Back-End Sistem


38

Gambar 3.14 merupakan flowchart dari proses login yang dilakukan oleh

admin. Admin akan memasukkan id dan password yang dimiliki. Setelah itu sistem

akan melakukan pengecekan data ke database. Jika data yang dimasukkan benar,

maka admin akan diberi hak akses menuju sistem back-end.

Gambar 3.14 Flowchart Proses Login Admin

Gambar 3.15 merupakan flowchart dari halaman Bobot SAW. Pada

halaman ini, sistem akan mengambil data yang dibutuhkan dari database saat

halaman dimuat.

Gambar 3.15 Flowchart Halaman View Bobot SAW


39

Gambar 3.16 merupakan flowchart dari halaman Edit Bobot SAW. Pada


halaman dimuat.

Gambar 3.16 Flowchart Halaman Edit Bobot SAW

Gambar 3.17 merupakan flowchart dari halaman View Data Makanan. Pada


halaman dimuat. Sistem akan menampilkan data-data bahan makanan yang

digunakan pada sistem pendukung keputusan. Data bahan makanan tersebut berupa

nama, total kalori, total karbohidrat, protein, dan lemak yang digunakan, gambar

bahan makanan tersebut, dan deskripsinya.


40

Gambar 3.17 Flowchart Halaman View Data Makanan

Gambar 3.18 merupakan Flowchart dari halaman Add Data Makanan. Pada

halaman ini, sistem akan menampilkan halaman yang berisi form yang perlu diisi

untuk menambahkan data bahan makanan baru. Setelah semua data yang diperlukan

telah diisi, sistem akan melakukan proses penambahan data kategori baru ke

database.


41

Gambar 3.18 Flowchart Add Data Makanan

Gambar 3.19 merupakan flowchart dari halaman Edit Data Makanan. Pada

halaman ini, sistem akan menampilkan sebuah form yang berisi data bahan

makanan lama yang diambil dari database. User perlu mengisi data-data baru yang

diperlukan. Setelah proses mengisi data baru telah dilakukan, maka sistem akan

melakukan proses penambahan data baru ke database.


42

Gambar 3.19 Flowchart Halaman Edit Data Makanan

Gambar 3.20 merupakan Flowchart dari halaman View Kategori. Pada


halaman dimuat. Pada halaman ini, sistem akan menampilkan data-data kategori

bahan makanan yang digunakan oleh sistem pendukung keputusan. Data-data

tersebut akan ditampilkan dalam bentuk tabel dan dapat dilakukan proses

menambahkan, mengubah, dan menghapus data kategori bahan makanan yang

dibutuhkan.


43

Gambar 3.20 Flowchart Halaman Kategori

Gambar 3.21 merupakan Flowchart dari halaman Add Category. Pada


untuk menambahkan kategori baru. Setelah semua data yang diperlukan telah diisi,

sistem akan melakukan proses penambahan data kategori baru ke database.


44

Gambar 3.21 Flowchart Halaman Add Category

Gambar 3.22 merupakan flowchart dari halaman Edit Category. Pada

halaman ini, sistem akan menampilkan sebuah form yang berisi data bahan kategori

bahan makanan lama yang diambil dari database. User perlu mengisi data-data baru

yang diperlukan. Setelah proses mengisi data baru telah dilakukan, maka sistem

akan melakukan proses penambahan data baru ke database.

Gambar 3.22 Flowchart Halaman Edit Category


45

Gambar 3.23 merupakan Flowchart dari halaman Tambah Admin. Pada


untuk menambahkan admin. Setelah semua data yang diperlukan telah diisi, sistem

akan melakukan proses pengecekan terhadap data yang dimasukkan apakah data

yang dimasukkan sudah sesuai atau tidak. Setelah proses tersebut, maka data admin

baru akan ditambahkan ke database.

Gambar 3.23 Flowchart Halaman Tambah Admin


46

Gambar 3.24 merupakan Flowchart dari halaman Change Password. Pada


untuk melakukan proses perubahan password. Setelah semua data yang diperlukan

telah diisi, sistem akan melakukan proses perubahan data password admin pada

database.

Gambar 3.24 Flowchart Halaman Change Password

3.3.4 Entity Relationship Diagram

Gambar 3.25 merupakan Entity Relationship Diagram dari sistem

pendukung keputusan pemilihan bahan makanan pendamping ASI. Terdapat dua

tabel yang memiliki relasi antar entitas yang ada yaitu entitas makanan dan kategori.

Entitas makanan memiliki 7 atribut dengan id sebagai primary key sedangkan


47

entitas kategori memiliki 3 atribut dengan id_category sebagai primary key. Satu

makanan dapat memiliki hanya 1 kategori, sedangkan satu kategori dapat dimiliki

banyak makanan. Sehingga, jenis hubungan yang dimiliki adalah one to many

(N:1). Atribut id_category pada tabel kategori akan menjadi foreign key pada tabel

makanan.

Gambar 3.25 Entity Relationship Diagram

3.3.5 Database Schema

Gambar 3.26 merupakan skema database dari website sistem pendukung

keputusan pemilihan bahan makanan pendamping ASI. Pada sistem ini, hanya

terdapat 2 tabel yang saling berhubungan, sedangkan tabel lainnya tidak memiliki

relasi antar tabel.

Gambar 3.26 Database Schema


48

3.3.6 Struktur Tabel

Stuktur Tabel yang digunakan pada database sistem pendukung keputusan

pemilihan bahan makanan pendamping ASI adalah sebagai berikut.

1. tbl_admin

Fungsi tabel: menyimpan informasi mengenai admin pada bagian back-end sistem.

Primary Key: id_admin

Tabel 3.1 Struktur Tabel tbl_admin # Nama Kolom Tipe Panjang Keterangan 1 id_admin varchar 40 Identifier admin 2 password varchar 300 Password untuk admin

2. tbl_bobot

Fungsi tabel: menyediakan informasi mengenai data bobot dan kriteria yang

digunakan untuk perhitungan rekomendasi bahan makanan.

Primary Key: id

Tabel 3.2 Struktur Tabel tbl_bobot # Nama Kolom Tipe Panjang Keterangan 1 id int 11 Identifier admin 2 nama_criteria varchar 300 Password untuk admin 3 bobot float - Data nilai bobot kriteria

3. tbl_food

Fungsi tabel: menyediakan informasi mengenai data bahan makanan yang

digunakan oleh sistem.

Primary Key: id

Tabel 3.3 Struktur Tabel tbl_food # Nama Kolom Tipe Panjang Keterangan 1 id int 11 Identifier bahan makanan 2 name varchar 100 Nama bahan makanan 3 image varchar 100 Gambar bahan makanan 4 amount_energy float - Kandungan energi bahan

makanan


49

Tabel 3.3 Struktur Tabel tbl_food(Lanjutan) 5 amount_carbs float - Kandungan karbohidrat bahan

makanan 6 amount_protein float - Kandungan protein bahan

makanan 7 amount_fat float - Kandungan lemak bahan

makanan 8 id_category int 11 Foreign Key dari tabel Kategori

4. tbl_food_category

Fungsi tabel: menyimpan informasi mengenai kategori bahan makanan

Primary Key: id

Tabel 3.4 Struktur Tabel tbl_food_category # Nama Kolom Tipe Panjang Keterangan 1 id int 11 Identifier kategori 2 category varchar 50 Nama kategori 3 remark varchar 2 Identifier kategori aktif atau tidak

3.3.7 Rancangan Tampilan Antarmuka

Setelah proses perancangan sistem pendukung keputusan pemilihan bahan

makanan pendamping ASI dilakukan, dibuat pula rancangan tampilan antarmuka

sistem yang akan diimplementasikan. Tampilan sistem dirancang dan dibuat

sedemikian rupa sehingga dapat memudahkan user dalam penggunaan sistem.

Rancangan tampilan antarmuka sendiri terbagi menjadi dua bagian besar yaitu

tampilan untuk halaman front-end dan back-end sistem. Gambar 3.27 merupakan

rancangan tampilan halaman keseluruhan bagian front-end sistem.

Gambar 3.28 merupakan tampilan halaman home pada bagian front-end.

Halaman menampilkan informasi tentang pengetahuan umum mengenai kandungan

dan nutrisi pada air susu ibu. Terdapat slider yang berisi gambar dan fakta-fakta

yang berkaitan dengan air susu ibu. Selain slider, juga terdapat gambar dan

informasi mengenai kandungan makronutrien yang penting bagi anak.


50

Gambar 3.27 Tampilan Halaman Keseluruhan Front-End Sistem

Gambar 3.28 Tampilan Halaman Home Front-End Sistem


51

Gambar 3.29 merupakan tampilan halaman Tentang Kami. Halaman

menampilkan informasi tentang informasi pembuat sistem dan curriculum

vitaenya. Selain itu, ditampilkan pula informasi mengenai batasan-batasan dan

gambaran umum mengenai sistem.

Gambar 3.30 merupakan tampilan halaman Tentang Kami. Halaman ini

menampilkan informasi detail mengenai cara kerja sistem dan hal-hal yang perlu

diperhatikan dalam menggunakan sistem ini. Informasi juga mencakup bagaimana

cara menggunakan sistem dan cara membaca rekomendasi bahan makanan yang

dihasilkan.

Gambar 3.29 Tampilan Halaman Tentang Kami


52

Gambar 3.30 Tampilan Halaman Panduan

Gambar 3.31 merupakan tampilan halaman Cari Makanan. Halaman akan

menampilkan informasi tentang data bahan makanan yang digunakan pada sistem

ini. Data bahan makanan akan ditampilkan dalam bentuk tabel yang memiliki

kolom sesuai dengan informasi yang dimiliki bahan makanan tersebut. Informasi

yang ditampilkan pada tabel adalah nama bahan makanan, jenis bahan makanan,

jumlah kalori, jumlah karbohidrat, protein, dan lemak.


53

Gambar 3.31 Tampilan Halaman Cari Makanan

Gambar 3.32 merupakan tampilan halaman Pilih Makanan. Halaman akan

menampilkan sebuah form yang memiliki field yang perlu dimasukkan oleh user

untuk mendapatkan rekomendasi bahan makanan pendamping ASI sesuai dengan

kriteria umur dan berat badan bayi. Terdapat tombol Calculate yang digunakan

untuk menghitung dan menampilkan bahan makanan yang disarankan oleh sistem.


54

Gambar 3.32 Tampilan Halaman Pilih Makanan

Gambar 3.33 merupakan tampilan halaman Rekomendasi Bahan MPASI.

Pada halaman ini akan ditampilkan seluruh informasi yang berkaitan dengan

pemberian bahan makanan pendamping ASI seperti total kebutuhan karbohidrat,

protein, dan lemak anak, total kalori setiap hari yang perlu dipenuhi diluar kalori

yang telah dipenuhi ASI, serta bahan-bahan makanan yang direkomendasikan

untuk setiap kategori bahan makanan yang ada. Informasi lebih spesifik juga

ditampilkan pada halaman ini ketika bahan makanan diklik oleh user. Tampilan

akan muncul dalam bentuk modal seperti pada Gambar 3.34.


55

Gambar 3.33 Tampilan Halaman Rekomendasi Bahan MPASI

Gambar 3.34 Tampilan Modal Detail Bahan Makanan


56

. Gambar 3.35 merupakan rancangan tampilan halaman keseluruhan secara

umum bagian back-end sistem. Tampilan sendiri terdiri dari 3 bagian utama, yaitu

bagian menu yang berada di sisi kiri halaman, konten dari halaman yang berada di

sisi kanan, dan header yang berada di sebelah atas halaman.

Gambar 3.35 Tampilan Halaman Keseluruhan Back-End Sistem

Gambar 3.36 merupakan tampilan halaman menu Bobot SAW. Pada

halaman ini ditampilkan data bobot kriteria yang digunakan untuk proses

perhitungan dalam bentuk tabel. User dapat melakukan perubahan pada data

dengan menekan tombol edit.


57

Gambar 3.36 Tampilan Halaman Bobot SAW

Gambar 3.37 merupakan tampilan halaman Edit Bobot SAW ketika user

menekan tombol edit. Pada halaman ini ditampilkan form yang berisi field yang

perlu diisi untuk melakukan pengaturan data bobot SAW. Halaman memiliki

tombol Edit untuk melakukan proses perubahan data dan tombol Reset untuk

mengosongkan kembali field pada form tersebut.

Gambar 3.37 Tampilan Edit Bobot SAW


58

Gambar 3.38 merupakan tampilan halaman menu Data Makanan. Pada

halaman ini ditampilkan data bahan makanan yang digunakan oleh sistem

pendukung keputusan ini. User dapat menambahkan data bahan makanan baru

dengan menekan tombol Add, melakukan perubahan data bahan makanan dengan

menakan tombol Edit, dan menghapus data bahan makanan dengan menekan

tombol Delete.

Gambar 3.38 Tampilan Halaman Data Makanan

Gambar 3.39 merupakan tampilan halaman Add Bahan Makanan ketika

user menekan tombol Add. Pada halaman ini ditampilkan form yang berisi field

yang perlu diisi untuk melakukan pengaturan data bahan makanan baru. Halaman

memiliki tombol Submit untuk melakukan proses penambahan data ke database

dan tombol Reset untuk mengosongkan kembali field pada form tersebut. Tampilan

ini juga digunakan untuk halaman Edit Bahan Makanan.


59

Gambar 3.39 Tampilan Halaman Add Bahan Makanan

Gambar 3.40 merupakan tampilan halaman menu Category. Pada halaman

ini ditampilkan data kategori bahan makanan yang digunakan pada sistem

pendukung keputusan. User dapat menambahkan data kategori bahan makanan

baru dengan menekan tombol Add, melakukan perubahan data dengan menakan

tombol Edit, dan menghapus data dari database dengan menekan tombol Delete.

Gambar 3.40 Tampilan Halaman Menu Category


60

Gambar 3.41 merupakan tampilan halaman Add Category ketika user

menekan tombol Add. Pada halaman ini ditampilkan form yang berisi field yang

perlu diisi untuk melakukan pengaturan data kategori baru. Halaman memiliki

tombol Submit untuk melakukan proses penambahan data ke database dan tombol

Reset untuk mengosongkan kategori. Tampilan ini juga digunakan untuk halaman

Edit Kategory.

Gambar 3.41 Tampilan Halaman Add Category

Gambar 3.42 merupakan tampilan untuk halaman Tambah Admin ketika

user memilih menu Tambah Admin. Pada halaman ini ditampilkan form yang berisi

field yang perlu diisi untuk melakukan penambahan admin baru. Halaman memiliki

tombol Submit untuk melakukan proses penambahan data ke database dan tombol

Reset untuk mengosongkan field pada form tersebut. Tampilan ini juga digunakan

untuk halaman Change Password.


61

Gambar 3.42 Tampilan Halaman Tambah Admin


Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/4829/1/BAB III.pdf · Gambar...

Documents

Transcript of Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/4829/1/BAB III.pdf · Gambar...