Perancangan Sistem ANALISIS DAN PERANCANGAN

3.6. Perancangan Sistem

3.6.1. Flowchart Sistem Proses user merupakan sebuah alur atau tahapan yang akan dilakukan oleh user untuk menggunakan aplikasi penjadwalan menu makanan bagi pendertia diabetes mellitus. Adapun flowchart tahapan yang dilakukan oleh user pada sistem dapat dilihat pada Gambar 3.11. start Isi data diri Hasil perhitungan kalori Hasil penentuan jenis diet Hasil penjadwalan menu makanan Isi pilihan individu awal dan generasi awal Simpan data? YA stop Simpan data dan jadwal menu makanan ke data pasien TIDAK Cetak grafik dan proses GA Gambar 3.11. Flowchart Sistem Universitas Sumatera Utara Adapun penjelasan dari Gambar 3.11 adalah sebagai berikut :  Pertama sekali user akan masuk ke halaman pengisian data diri seperti nama, usia, jenis kelamin, berat badan, tinggi badan, tingkat aktivitas, dan alergi.  Setelah itu akan ditampilkan informasi berupa kalori yang dibutuhkan penderita diabetes mellitus dan jenis diet yang akan digunakan.  Untuk melakukan proses penjadwalan menu makanan, user harus memilih berapa jumlah individu awal dan generasi awal terlebih dahulu.  Setelah itu user akan menekan tombol next agar system dapat melakukan penyusunan jadwal makanan.  Sistem akan menampilkan output yaitu berupa hasil penjadwalan menu makanan untuk makan pagi, siang, dan malam dalam 7 tujuh hari.  User juga dapat melihat grafik hubungan generasi dengan nilai fitness serta melihat bagaimana proses algoritma berjalan.  User juga dapat memilih untuk menyimpan data jadwal menu makanan dengan menekan tombol finish atau tidak. Jika user memilih untuk simpa n data, maka data jadwal makanan akan disimpan pada data pasien. 3.6.2. Perancangan Database Perancangan database pada sistem ini digunakan untuk menyimpan data dan informasi yang berhubungan dengan proses penjadwalan menu makanan bagi penderita diabetes mellitus. Penjelasan mengenai table-tabel yang terdapat pada database yang dirancang adalah sebagai berikut : 1. Tabel table_makanan, berfungsi sebagai tempat penyimpanan data-data yang berhubungan dengan menu makanan dan juga kandungan nutrisi dari setiap menu makanan. Adapun contoh data pada tabel tabel_makanan dapat dilihat pada Gambar 3.12. Universitas Sumatera Utara Gambar 3.12. Data pada Tabel Menu Makanan 2. Tabel jenis_diet, berfungsi sebagai tempat penyimpan data-data yang berhubungan dengan jenis diet penderita diabetes mellitus dan jumlah kalori serta kandungan nutrisi yang diperlukan untuk setiap jenis diet. Data pada tabel ini akan digunakan pada saat proses penentuan jenis diet setelah berdasarkan perhitungan total kalori penderita diabetes mellitus. Adalpun contoh data jenis diet pada database dapat dilihat pada Gambar 3.13. Gambar 3.13. Data pada Tabel Jenis Diet Universitas Sumatera Utara 3. Tabel menu, berfungsi sebagai tempat penyimpanan daftar jadwal menu makanan dari hasil proses penjadwalan beserta informasi seperti kalori dan berat makanan yang dikonsumsi penderita diabetes mellitus. Adapun contoh dari tabel menu dapat dilihat pada Gambar 3.14. Gambar 3.14. Data pada Tabel Jadwal Makanan 4. Tabel pasien, berfungsi sebagai tempat penyimpanan data diri penderita diabetes mellitus. Adapun contoh dari tabel pasien dapat dilihat pada Gambar 3.15. Gambar 3.15. Data pada Tabel Pasien Universitas Sumatera Utara 3.6.3. Racangan Tampilan Antarmuka Tampilan antarmuka merupakan sebuah desain awal dari antarmuka sistem yang akan dibangun pada penelitian ini. Rancangan Halaman Utama Gambar 3.16. Rancangan Tampilan Halaman Utama Keterangan : a. Menu “Apa itu DM?” merupakan menu untuk masuk ke halaman yang berisi penjelasan tentang penyakit diabetes mellitus. b. Menu “Galeri” merupakan menu untuk masuk ke halaman galeri yang berisi foto-foto singkat tentang diabetes mellitus. c. Menu “Buat Jadwal” merupakan menu untuk masuk ke halaman pengisian data diri pasien untuk menjadwalkan menu makanan pasien. d. Tombol “Find Out More” merupakan tombol yang juga dapat mengakses halaman yang berisi penjelasan tentang penyakit diabetes mellitus. Buat Jadwal Galeri Apa itu DM? DIABETES MELLITUS DIET DM diet FIND OUT MORE a b c d Universitas Sumatera Utara Rancangan Halaman Info Diabetes Mellitus Gambar 3.17. Rancangan Tampilan Halaman Info Diabetes Mellitus Keterangan : a. Menu “Apa itu DM?” merupakan menu untuk masuk ke halaman yang berisi penjelasan tentang penyakit diabetes mellitus. b. Menu “Galeri” merupakan menu untuk masuk ke halaman galeri yang berisi foto-foto singkat tentang diabetes mellitus. c. Menu “Buat Jadwal” merupakan menu untuk masuk ke halaman pengisian data diri pasien untuk menjadwalkan menu makanan pasien. d. Tombol “Find More” merupakan tombol untuk mengakses internet yaitu masuk ke halaman www.wikipedia.com untuk mengetahui lebih detail mengenai penyakit diabetes mellitus. Buat Jadwal Galeri Apa itu DM? DM diet Apa itu Diabetes Mellitus? DM atau disebut Diabetes Mellitus ……………………………………….. FIND MORE a b c d Universitas Sumatera Utara Rancangan Halaman Galeri Gambar 3.18. Rancangan Tampilan Halaman Galeri Keterangan : a. Menu “Apa itu DM?” merupakan menu untuk masuk ke halaman yang berisi penjelasan tentang penyakit diabetes mellitus. b. Menu “Galeri” merupakan menu untuk masuk ke halaman galeri yang berisi foto-foto singkat tentang diabetes mellitus. c. Menu “Buat Jadwal” merupakan menu untuk masuk ke halaman pengisian data diri pasien untuk menjadwalkan menu makanan pasien. d. Form untuk menampilkan foto- foto seputar penyakit diabetes mellitus. Buat Jadwal Galeri Apa itu DM? DM diet a b c Photo 1 Photo 2 Photo 3 Photo 4 Photo 5 Photo 6 d Universitas Sumatera Utara Rancangan Halaman Buat Jadwal Gambar 3.19. Rancangan Tampilan Halaman Buat Jadwal Keterangan : a. Menu “Beranda” merupakan menu untuk masuk kembali ke halaman utama atau beranda. b. Menu “Buat Jadwal” merupakan menu untuk masuk ke halaman buat jadwal untuk mengisi data-data pasien. c. Menu “Data Pasien” merupakan menu untuk masuk ke halaman penyimpanan data-data pasien dan menu makanan pasien yang telah terjadwal. d. Menu “Apa itu DM?” merupakan menu untuk masuk kembali ke halaman yang berisikan info lebih detail mengenai penyakit diabetes mellitus. DM DIet Apa itu DM? Data Pasien Buat Jadwal Beranda Penjadwalan Menu Makanan 1 2 3 Da ta Pasien Da ta Diet Pasien Jadwal Menu Ma kanan Data pribadi penderita diabetes mellitus Nama Jenis Kelamin Usia Berat Badan Tinggi Badan tahun kg cm Tingkat Aktivitas Alergi PREVIOUS NEXT Footer a b c d e f g Universitas Sumatera Utara e. Form data pasien yang memungkinkan user untuk mengisikan data-data pasien diabetes mellitus untuk diproses ke tahap selanjutnya. f. Tombol “Previous” merupakan tombol untuk kembali ke halaman sebelumnya. g. Tombol “Next” merupakan tombol untuk masuk ke proses dimana hasilnya akan ditampilkan pada halaman data diet pasien yang berisi info berat badam dan kalori yang dibutuhkan pasien dalam satu hari. Universitas Sumatera Utara Halaman Tampilan Data Diet Pasien Gambar 3.20. Rancangan Tampilan Halaman Data Diet Pasien Data Pasien Energi Nama Jenis Kelamin Usia Berat Badan Tinggi Badan Alergi Data Pasien Berat Badan dan Kebutuhan Kalori Berat Badan Ideal Kalori Basal Koreksi Faktor Aktivitas Koreksi Faktor Usia Total Kebutuhan Kalori Jenis Diet Protein Lemak Ka rbo Koles t erol Sera t Sukros a Na triu m II x x x x x x x x PREVIOUS NEXT a b c d e g h f DM DIet Apa itu DM? Data Pasien Buat Jadwal Beranda Penjadwalan Menu Makanan 1 2 3 Da ta Pasien Data Diet Pasien Jadwal Menu Ma kanan Footer Jumlah Individu Awal Jumlah Generasi PREVIOUS NEXT Nama Jenis Kelamin Usia Berat Badan Tinggi Badan Alergi Data Pasien Berat Badan dan Kebutuhan Kalori Berat Badan Ideal Kalori Basal Koreksi Faktor Aktivitas Koreksi Faktor Usia Total Kebutuhan Kalori Jenis Diet Protein Lemak Ka rbo Koles t erol Sera t Sukros a Na triu m II x x x x x x x x Energi a b c d e g h j i f Universitas Sumatera Utara Keterangan : a. Menu “Beranda” merupakan menu untuk masuk kembali ke halaman utama atau beranda. b. Menu “Buat Jadwal” merupakan menu untuk masuk ke halaman buat jadwal untuk mengisi data-data pasien. c. Menu “Data Pasien” merupakan menu untuk masuk ke halaman penyimpanan data-data pasien dan menu makanan pasien yang telah terjadwal. d. Menu “Apa itu DM?” merupakan menu untuk masuk kembali ke halaman yang berisikan info lebih detail mengenai penyakit diabetes mellitus. e. Form data diet pasien yang memungkinkan user untuk melihat data diri, berat badan ideal, kalori basal, koreksi faktor aktivitas, koreksi faktor usia, dan total kebutuhan kalori pasien diabetes mellitus dalam satu hari. f. Tabel daftar diet pasien memungkinkan user untuk melihat dan mengetahui jenis diet yang akan dikonsumsi pasien dan juga menampilkan berapa kandungan nutrisi yang boleh dikonsumsi pasien dalam satu hari berdasarkan jenis diet pasien. g. Field jumlah individu awal merupakan field untuk memberikan nilai individu awal untuk masuk ke tahap algoritma genetika. h. Field jumlah generasi merupakan field untuk memberikan nilai generasi untuk masuk ke tahap algoritma genetika. i. Tombol “Previous” merupakan tombol untuk kembali ke halaman sebelumnya. j. Tombol “Next” merupakan tombol untuk masuk ke proses dimana hasilnya akan ditampilkan pada halaman output yang merupakan halaman untuk menampilkan menu makanan pasien Universitas Sumatera Utara Halaman Tampilan Output v Gambar 3.21. Rancangan Tampilan Halaman Output Keterangan : a. Menu “Beranda” merupakan menu untuk masuk kembali ke halaman utama atau beranda. b. Menu “Buat Jadwal” merupakan menu untuk masuk ke halaman buat jadwal untuk mengisi data-data pasien. c. Menu “Data Pasien” merupakan menu untuk masuk ke halaman penyimpanan data-data pasien dan menu makanan pasien yang telah terjadwal. d. Menu “Apa itu DM?” merupakan menu untuk masuk kembali ke halaman yang berisikan info lebih detail mengenai penyakit diabetes mellitus. a DM DIet Apa itu DM? Data Pasien Buat Jadwal Beranda Penjadwalan Menu Makanan 1 2 3 Da ta Pasien Da ta Diet Pasien Jadwal Menu Ma kanan Hari Sarapan Makan Siang Makan Malam PREVIOUS FINISH a b c d e f g Universitas Sumatera Utara e. Form penjadwalan menu pasien yang memungkinakn user untu melihat daftar menu seperi makanan pokok, lauk pauk, sayuran, buah-buahan, dan pelengkap untuk makan pagi, siang, dan malam yang dapat dikonsumsi pasien. f. Tombol “Previous” merupakan tombol untuk kembali ke halaman sebelumnya. g. Tombol “Finish” merupakan tombol untuk menyimpan informasi pasien yang telah diproses ke halaman data pasien. Halaman Tampilan Log Proses Algoritma Genetika Gambar 3.22. Rancangan Tampilan Log Proses Algortima Genetika Keterangan : a. Menu “Beranda” merupakan menu untuk masuk kembali ke halaman utama atau beranda. b. Menu “Buat Jadwal” merupakan menu untuk masuk ke halaman buat jadwal untuk mengisi data-data pasien. a DM DIet Apa itu DM? Data Pasien Buat Jadwal Beranda a b c d Proses Algoritma Genetika Tampilan Daftar Proses Algoritma Genetika e Universitas Sumatera Utara c. Menu “Data Pasien” merupakan menu untuk masuk ke halaman penyimpanan data-data pasien dan menu makanan pasien yang telah terjadwal. d. Menu “Apa itu DM?” merupakan menu untuk masuk kembali ke halaman yang berisikan info lebih detail mengenai penyakit diabetes mellitus. e. Tampilan daftar log algoritma genetika yang memungkinkan user untuk melihat proses algoritma genetika berjalan mulai dari inisialisasi individu, crossover, dan mutasi. Halaman Tampilan Grafik Gambar 3.23. Rancangan Tampilan Halaman Grafik Keteragan : a. Menu “Beranda” merupakan menu untuk masuk kembali ke halaman utama atau beranda. b. Menu “Buat Jadwal” merupakan menu untuk masuk ke halaman buat jadwal untuk mengisi data-data pasien. a DM DIet Apa itu DM? Data Pasien Buat Jadwal Beranda a b c d Grafik Grafik Hubungan Fitness dengan Generasi Universitas Sumatera Utara c. Menu “Data Pasien” merupakan menu untuk masuk ke halaman penyimpanan data-data pasien dan menu makanan pasien yang telah terjadwal. d. Menu “Apa itu DM?” merupakan menu untuk masuk kembali ke halaman yang berisikan info lebih detail mengenai penyakit diabetes mellitus. e. Tampilan grafik hubungan generasi dengan fitness yang memungkinkan user untuk melihat bagaiamana perbandingan antara nilai fitness dengan generasi. Rancangan Tampilan Data Pasien Gambar 3.24. Rancangan Tampilan Data Pasien Keteragan : a. Menu “Beranda” merupakan menu untuk masuk kembali ke halaman utama atau beranda. a DM DIet Apa itu DM? Data Pasien Buat Jadwal Beranda a b c d Data Pasien Tabel Data Pasien Universitas Sumatera Utara b. Menu “Buat Jadwal” merupakan menu untuk masuk ke halaman buat jadwal untuk mengisi data-data pasien. c. Menu “Data Pasien” merupakan menu untuk masuk ke halaman penyimpanan data-data pasien dan menu makanan pasien yang telah terjadwal. d. Menu “Apa itu DM?” merupakan menu untuk masuk kembali ke halaman yang berisikan info lebih detail mengenai penyakit diabetes mellitus. e. Tabel daftar data pasien yang memungkinkan user untuk melihat kembali jadwal menu makanan yang telah disimpan. Selain itu user juga dapat melakukan proses hapus data. Universitas Sumatera Utara

BAB 4 IMPLEMENTASI DAN PENGUJIAN