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
Rancang Bangun Sistem..., Hendrix, FTI, 2017
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
Rancang Bangun Sistem..., Hendrix, FTI, 2017
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.
Rancang Bangun Sistem..., Hendrix, FTI, 2017
24
Gambar 3.2 DFD Level 1 Sistem Pendukung Keputusan Pemilihan MPASI
24
Rancang Bangun Sistem..., Hendrix, FTI, 2017
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.
Rancang Bangun Sistem..., Hendrix, FTI, 2017
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
Rancang Bangun Sistem..., Hendrix, FTI, 2017
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.
Rancang Bangun Sistem..., Hendrix, FTI, 2017
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.
Rancang Bangun Sistem..., Hendrix, FTI, 2017
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.
Rancang Bangun Sistem..., Hendrix, FTI, 2017
30
Gambar 3.8 Sitemap Website Sistem Pendukung Keputusan Pemilihan Bahan
MPASI
Rancang Bangun Sistem..., Hendrix, FTI, 2017
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.
Rancang Bangun Sistem..., Hendrix, FTI, 2017
32
Gambar 3.9 Flowchart Bagian Front-End Sistem
Rancang Bangun Sistem..., Hendrix, FTI, 2017
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
Rancang Bangun Sistem..., Hendrix, FTI, 2017
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.
Rancang Bangun Sistem..., Hendrix, FTI, 2017
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.
Rancang Bangun Sistem..., Hendrix, FTI, 2017
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.
Rancang Bangun Sistem..., Hendrix, FTI, 2017
37
Gambar 3.13 Flowchart Bagian Back-End Sistem
Rancang Bangun Sistem..., Hendrix, FTI, 2017
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
Rancang Bangun Sistem..., Hendrix, FTI, 2017
39
Gambar 3.16 merupakan flowchart dari halaman Edit Bobot SAW. Pada
halaman ini, sistem akan mengambil data yang dibutuhkan dari database saat
halaman dimuat.
Gambar 3.16 Flowchart Halaman Edit Bobot SAW
Gambar 3.17 merupakan flowchart dari halaman View Data Makanan. Pada
halaman ini, sistem akan mengambil data yang dibutuhkan dari database saat
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.
Rancang Bangun Sistem..., Hendrix, FTI, 2017
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.
Rancang Bangun Sistem..., Hendrix, FTI, 2017
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.
Rancang Bangun Sistem..., Hendrix, FTI, 2017
42
Gambar 3.19 Flowchart Halaman Edit Data Makanan
Gambar 3.20 merupakan Flowchart dari halaman View Kategori. Pada
halaman ini, sistem akan mengambil data yang dibutuhkan dari database saat
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.
Rancang Bangun Sistem..., Hendrix, FTI, 2017
43
Gambar 3.20 Flowchart Halaman Kategori
Gambar 3.21 merupakan Flowchart dari halaman Add Category. Pada
halaman ini, sistem akan menampilkan halaman yang berisi form yang perlu diisi
untuk menambahkan kategori baru. Setelah semua data yang diperlukan telah diisi,
sistem akan melakukan proses penambahan data kategori baru ke database.
Rancang Bangun Sistem..., Hendrix, FTI, 2017
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
Rancang Bangun Sistem..., Hendrix, FTI, 2017
45
Gambar 3.23 merupakan Flowchart dari halaman Tambah Admin. Pada
halaman ini, sistem akan menampilkan halaman yang berisi form yang perlu diisi
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
Rancang Bangun Sistem..., Hendrix, FTI, 2017
46
Gambar 3.24 merupakan Flowchart dari halaman Change Password. Pada
halaman ini, sistem akan menampilkan halaman yang berisi form yang perlu diisi
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
Rancang Bangun Sistem..., Hendrix, FTI, 2017
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
Rancang Bangun Sistem..., Hendrix, FTI, 2017
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
Rancang Bangun Sistem..., Hendrix, FTI, 2017
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.
Rancang Bangun Sistem..., Hendrix, FTI, 2017
50
Gambar 3.27 Tampilan Halaman Keseluruhan Front-End Sistem
Gambar 3.28 Tampilan Halaman Home Front-End Sistem
Rancang Bangun Sistem..., Hendrix, FTI, 2017
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
Rancang Bangun Sistem..., Hendrix, FTI, 2017
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.
Rancang Bangun Sistem..., Hendrix, FTI, 2017
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.
Rancang Bangun Sistem..., Hendrix, FTI, 2017
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.
Rancang Bangun Sistem..., Hendrix, FTI, 2017
55
Gambar 3.33 Tampilan Halaman Rekomendasi Bahan MPASI
Gambar 3.34 Tampilan Modal Detail Bahan Makanan
Rancang Bangun Sistem..., Hendrix, FTI, 2017
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.
Rancang Bangun Sistem..., Hendrix, FTI, 2017
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
Rancang Bangun Sistem..., Hendrix, FTI, 2017
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.
Rancang Bangun Sistem..., Hendrix, FTI, 2017
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
Rancang Bangun Sistem..., Hendrix, FTI, 2017
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.
Rancang Bangun Sistem..., Hendrix, FTI, 2017
61
Gambar 3.42 Tampilan Halaman Tambah Admin
Rancang Bangun Sistem..., Hendrix, FTI, 2017