IV

SISTEM CERDAS DIET SEHAT

A. Latar Belakang Dejaka

Dejaka dibentuk pada tanggal 09 November 2020. Dinamakan Dejaka
karena diambil dari setiap nama anggotanya. Dejaka berfilosofi “Dejaka
selalu berusaha agar kehidupannya bermanfaat bagi orang lain”. Dejaka
adalah suatu tim yang membuat sebuah produk berupa aplikasi yang
bernama “Sistem Diet Sehat” aplikasi ini untuk membantu orang yang
mempunyai kelebihan berat badan (obesitas) agar bisa mengetahui
bagaimana caranya diet secara sehat.

B. Latar Belakang Produk

Diet merupakan pengaturan pola makanan dengan tujuan untuk
memberikan makanan ke dalam tubuh sesuai dengan kebutuhan gizi
untuk mencegah dan mengurangi kerusakan jaringan di dalam tubuh.
Dengan melakukan diet, kita juga dapat mengurangi atau menambah berat
badan yang kita inginkan, sehingga mencapai berat badan yang ideal.
Adapun cara yang dilakukan yaitu dengan mengurangi atau menambah,
membatasi atau memilih makanan yang tepat dengan jumlah kalori
tertentu. Oleh karena itu, kita harus mengetahui bagaimana melakukan
diet yang benar.
Namun, untuk menjalankan diet yang benar masih sulit dirasakan oleh
masyarakat Indonesia khususnya dalam mengatur pola makan yang baik.
Hal tersebut dipicu oleh kurangnya kesadaran masyarakat Indonesia akan
pentingnya tubuh ideal. Kurangnya informasi mengenai makanan sehat
dan penyedia jasa makanan sehat sebagai penunjang diet menjadi salah
satu alasan masyarakat Indonesia sulit mengatur pola makan yang baik.
Berat badan seimbang dapat kita capai dengan pengaturan pola makan
yang sehat dan olahraga yang teratur. Berat badan yang seimbang dapat
menjauhkan kita dari ancaman penyakit degeneratif, antara lain obesitas.
Kegemukan atau obesitas dapat memengaruhi penampilan dan kinerja
tubuh. Orang yang gemuk biasanya beresiko besar mengidap penyakit
diabetes, hipertensi, penyakit jantung, dan stroke. Ketidaktahuan
masyarakat tentang berat badan yang seimbang (ideal) pun turut
memengaruhi pola makan. Karena ketidaktahuan tersebut, menjadikan
seseorang tidak tahu apakah mereka harus mengurangi makanan atau
justru menambah makanan yang dikonsumsi.
Untuk mengukur apakah seseorang memiliki berat badan yang
seimbang, kita dapat menggunakan Body Mass Index (BMI), yaitu indeks
sederhana dari berat badan dan tinggi, berat badan seseorang dalam
kilogram dibagi dengan tinggi badannya dalam meter (kg/m2). Rentang
BMI untuk orang dewasa dengan berat badan ideal adalah 18,5 sampai 23.
Berat badan yang tidak seimbang diakibatkan oleh jumlah kalori yang
diterima oleh tubuh tidak sesuai dengan kebutuhan kalori. Sudah menjadi
kodratnya apabila semua makhluk hidup memerlukan makanan. Apalagi
manusia sebagai makhluk yang paling sempurna tentunya membutuhkan
makanan untuk mendapatkan sumber tenaga. Tentunya untuk bisa
mewujudkan kegunaan makanan tersebut kita harus memerhatikan pola
makan yang baik, agar jumlah nutrisi yang diperoleh seimbang. Oleh
karena itu, kita harus mengetahui bagaimana pola makan sehat itu.
Diet merupakan salah satu cara menjaga pola makan yang sehat. Diet
adalah mengatur jumlah makanan yang dikonsumsi oleh seseorang. Diet
bukanlah semata-mata diet rendah lemak ataupun diet rendah
karbohidrat. Yang terpenting adalah pembagian proporsi yang seimbang
antara berbagai kandungan nutrien pada makanan yang dikonsumsi
dengan kebutuhan tubuh. Proporsi yang ideal yaitu karbohidrat sebanyak
50-60 persen, lemak 20-30 persen, dan protein 10-15 persen.
Perkembangan teknologi yang pesat saat ini memunculkan banyak
Aplikasi berbasis web. Hal ini tentu membuka peluang baru bagi
pengembang aplikasi web yang ingin menargetkan kepada pasar lokal.
Setelah membahas sekilas tentang pola makan, berat badan ideal, dan diet,
penulis tertarik untuk membuat data dalam pembangunam sebuah
aplikasi untuk membantu orang yang mempunyai kelebihan berat badan
(obesitas) agar bisa mengetahui bagaimana caranya diet secara sehat. Maka
penulis tertarik membuat sebuah aplikasi yang berjudul “Sistem Diet
Sehat”.
C. Komponen – Komponen Produk
1. XAMPP

XAMPP adalah web server open source yang berjalan pada sistem
operasi cross-platform (Windows, Linux, MacOS). Semua yang diperlukan
untuk mengelola website tersedia di XAMPP seperti Apache,
MySQL/MariaDB, PHP, dan Perl. Meski program di dalamnya lengkap,
XAMPP tetap merupakan web server yang sederhana dan ringan. XAMPP
dipakai untuk membuat web server lokal di komputer. Hal ini akan
memudahkan Anda dalam mengembangkan, mendesain, dan keperluan
testing website.
Fungsinya :
a. Setting Database phpMyAdmin : Dengan menggunakan XAMPP
Anda bisa mengakses halaman phpMyAdmin. Sama seperti saat
Anda menggunakan hosting atau VPS pasti Anda akan
membutuhkan phpMyAdmin untuk mengedit, menghapus,
menambah database, dan menambahkan user.
b. Install WordPress Offline : XAMPP berguna untuk menjalankan
Apache, MariaDB, dan PHP pada localhost atau komputer tanpa
harus ada koneksi internet. Dengan Adanya XAMPP akan
mempermudah pekerjaan frontend dan backend developer. Karena
mereka dapat melakukan testing pada program sebelum nantinya
akan diupload ke server online website.
c. Menjalankan Laravel Pada Komputer : Laravel adalah salah satu
framework php yang dipakai untuk mempermudah developer
 dalam mengembangkan website. Dengan menjalankan Laravel pada
localhost komputer Anda menggunakan XAMPP, Anda jadi lebih
mudah untuk memodifikasi script dan membuat fitur baru website
tanpa harus takut merusak kode inti website yang ada di server.

Fitur-Fitur di XAMPP :
Berikut ini adalah komponen yang ada di dalam XAMPP.
Component Deskripsi Version
Apache Sebagai aplikasi web server default 2.4.31
MariaDB Sebagai sistem manajemen database 10.4.11
PHP Sebagai server side scripting untuk 7.2.27, 7.3.14,
membuat aplikasi berbasis web 7.4.2
phpMyAdmin Sebagai tools untuk menggunakan MySQL 5.0.1
berbasis web
OpenSSL Sebagai protokol keamanan 1.1.1d
XAMPP Control Untuk mengatur komponen berbeda pada 3.2.4
Panel XAMPP
Webalizer Sebagai tools analytics untuk user log dan 2.23-04
penggunaan
Mercury Mail Sebagai email server 4.63
Transport System
FileZilla FTP Server Untuk melakukan transfer file 0.9.41
Tomcat Digunakan untuk melayani aplikasi Java 7.0.99
Strawberry Distribusi perl yang populer untuk 5.16.3.1
Windows

Komponen Penting Pada XAMPP :

a. Config
 Pada menu Config, Anda bisa melakukan beberapa konfigurasi dasar
untuk penggunaan XAMPP seperti mengganti :
Editor : yang akan digunakan untuk mengubah default text editor.
Browser : browser default yang akan digunakan untuk akses web
server.

b. Netstat
Netstat sering digunakan untuk memastikan apakah ada
program/aplikasi lain yang menggunakan port default XAMPP.

c. Shell
Menu shell pada XAMPP, digunakan untuk menampilkan command
prompt pada Windows. Fungsinya untuk melakukan konfigurasi web
server atau memperbaiki error pada web server.

d. Explorer
Explorer merupakan tombol shortcut untuk menuju ke lokasi instalasi
XAMPP. Ketika Anda klik icon Explorer maka akan diarahkan ke lokasi
file instalasi XAMPP.

2. Sublime Text
Sublime Text adalah aplikasi editor untuk kode dan teks yang dapat
berjalan diberbagai platform operating system dengan menggunakan
teknologi Phyton API. Terciptanya aplikasi ini terinspirasi dari aplikasi
Vim, Aplikasi ini sangatlah fleksibel dan powerfull. Fungsionalitas dari
aplikasi ini dapat dikembangkan dengan menggunakan sublime-
packages. Sublime Text bukanlah aplikasi opensource dan juga aplikasi
yang dapat digunakan dan didapatkan secara gratis, akan tetapi beberapa
fitur pengembangan fungsionalitas (packages) dari aplikasi ini
merupakan hasil dari temuan dan mendapat dukungan penuh dari
komunitas serta memiliki linsensi aplikasi gratis.
Sublime Text mendukung berbagai bahasa pemrograman dan
mampu menyajikan fitur syntax highlight hampir di semua bahasa
pemrogramman yang didukung ataupun dikembangkan oleh komunitas
seperti; C, C++, C#, CSS, D, Dylan, Erlang, HTML, Groovy, Haskell,
Java, JavaScript, LaTeX, Lisp, Lua, Markdown, MATLAB, OCaml, Perl,
PHP, Python, R, Ruby, SQL, TCL, Textile and XML. Biasanya bagi
bahasa pemrograman yang didukung ataupun belum terdukung secara
default dapat lebih dimaksimalkan atau didukung dengan
menggunakan add-ons yang bisa didownload sesuai kebutuhan user.

Gambar 4.1 Sublime Text

Berikut beberapa fitur yang diunggulkan dari aplikasi Sublime Text:

a. Goto Anything : Fitur yang sangat membantu dalam membuka file
ataupun menjelajahi isi dari file hanya dengan beberapa keystrokes.
b. Multiple Selections : Fitur ini memungkinkan user untuk mengubah
secara interaktif banyak baris sekaligus, mengubah nama variabel
dengan mudah, dan memanipulasi file lebih cepat dari
sebelumnya.
c. Command Pallete : Dengan hanya beberapa keystorkes, user dapat
dengan cepat mencari fungsi yang diinginkan, tanpa harus
menavigasi melalu menu.
d. Distraction Free Mode : Bila user memerlukan fokus penuh pada
aplikasi ini, fitur ini dapat membantu user dengan memberikan
 tampilan layar penuh.
e. Split Editing : Dapatkan hasil yang maksimal dari monitor layar
lebar dengan dukungan editing perpecahan. Mengedit sisi file
dengan sisi, atau mengedit dua lokasi di satu file. Anda dapat
mengedit dengan banyak baris dan kolom yang user inginkan.
f. Instant Project Switch : Menangkap semua file yang dimasukkan
kedalam project pada aplikasi ini. Terintegrasi dengan fitur Goto
Anything untuk menjelajahi semua file yang ada ataupun untuk
beralih ke file dalam project lainnya dengan cepat.
g. Plugin API : Dilengkapi dengan plugin API berbasis Phyton
sehingga membuat aplikasi ini sangat tangguh.
h. Customize Anything : Aplikasi ini memberikan user fleksibilitas
dalam hal pengaturan fungsional dalam aplkasi ini.
i. Cross Platform : Aplikasi ini dapat berjalan hampir disemua
operating system modern seperti Windows, OS X, dan Linux based
operating system.

3. Framework Bootstrap
Bootstrap adalah sebuah library framework CSS yang dibuat khusus
untuk bagian pengembangan front-end website. Bootstrap juga merupakan
salah satu framework HTML, CSS dan javascript yang paling populer di
kalangan web developer yang digunakan untuk mengembangkan sebuah
website yang responsive. Sehingga halaman website nantinya dapat
menyesuaikan sesuai dengan ukuran monitor device (desktop, tablet,
ponsel ) yang digunakan pengguna disaat mengakses website website dari
browser. Pada mulanya bootstrap bernama "Twitter Blueprint" yang
dikembankan oleh Mark Otto dan Jacob Thornton di Twitter sebagai
kerangka kerja untuk mendorong konsistensi di alat internal.
 Dengan menggunakan Bootstrap seorang developer dapat dengan
mudah dan cepat dalam membuat front-end sebuah website. Anda hanya
perlu memanggil class-class yang diperlukan, misalnya membuat tombol,
grid, tabel, navigasi dan lainnya.
Bootsrap telah menyediakan kumpulan komponen class interface dasar
yang telah dirancang sedemikian rupa untuk menciptakan sebuah
tampilan yang menarik dan ringan. Selain komponen class interface,
bootsrap juga memiliki grid yang berfungsi untuk mengatur layout pada
halaman website. Selain itu developer juga dapat menambahkan class dan
CSS sendiri, sehingga memungkinkan untuk membuat desain yang lebih
variatif. Salah satu contoh website yang menggunakan framework
bootsrap yaitu twitter.
Berikut tiga file utama yang mengelola interface user dan fungsionalitas
website.
a. Bootstrap.css
Bootstrap.css adalah framework yang mengatur dan mengelola layout
website. HTML mengatur konten dan struktur halaman web, sedangkan
CSS berurusan dengan layout situs. Oleh karena itu, kedua struktur ini
harus bekerja bersama-sama untuk melakukan tindakan tertentu.
Dengan CSS, Anda bisa menghadirkan tampilan yang seragam di
banyak halaman website. Semua ini berkat keberadaan fungsinya. Anda
pun tak perlu lagi menghabiskan waktu berjam-jam lamanya hanya untuk
mengubah, misalnya, lebar desain. Jika menggunakan CSS, yang perlu
dilakukan adalah merujuk atau mengarahkan halaman web ke file CSS.
Nantinya semua perubahan dapat dilakukan di satu file saja.
 Fungsi CSS tidak terbatas hanya di gaya teks saja, tetapi juga dapat
digunakan untuk membuat aspek lainnya di halaman web, seperti
tampilan tabel dan gambar.

b. Bootstrap.js
File ini merupakan bagian inti dari Bootstrap. Di dalamnya terdapat file
JavaScript yang bertanggung jawab atas interaktivitas website.
Developer menggunakan jQuery untuk menghemat waktu karena tidak
perlu menulis sintaks JavaScript berulang kali. jQuery sendiri adalah open
source yang populer dan juga library JavaScript lintas platform yang
memperbolehkan usernya untuk menambah berbagai fungsionalitas ke
website.
Berikut contoh fungsi dan kegunaan jQuery:
1) Menjalankan permintaan Ajax, seperti mengurangi (subtract) data
dari lokasi lain secara dinamis.
2) Membuat widget menggunakan koleksi plugin JavaScript.
3) Membuat animasi menggunakan CSS property.
4) Membuat konten website terlihat lebih dinamis.

Walaupun Bootstrap dengan CSS property dan elemen HTML-nya bisa

berfungsi normal, tetap saja framework ini mebutuhkan jQuery untuk
membuat desain yang responsif. Jika tidak, Anda hanya bisa menikmati
CSS yang statis dan datar.

c. Glyphicons
Ikon berperan penting pada front-end website. Bahkan terkadang ikon
dikaitkan dengan tindakan tertentu serta data yang ada di dalam interface
user. Untuk task ini, Bootstrap menggunaan Glyphicons.
Bootstrap menawarkan Glyphicons Halflings yang bisa dipakai secara
gratis. Versi gratisnya punya tampilan yang standard tapi sudah lebih dari
cukup dengan adanya fungsi-fungsi yang penting. Jika menginginkan ikon
yang lebih stylish, Glyphicons menyediakan berbagai set premium yang
akan membuat website terlihat lebih menarik dan juga sesuai dengan
niche. Masing-masing ikon serta ikon yang dikhususkan untuk suatu tema
dapat diunduh secara gratis di sejumlah website, seperti Flaticon,
GlyphSearch, dan Icons8. Tampilan sebagian ikon dapat dimodifikasi
dengan CSS, sedang sebagian lainnya sudah default. Pilih dan gunakan
ikon yang sesuai dengan konsep dan tema website.
4. Chrome
Google Chrome adalah sebuah web browser yang berguna untuk
menjelajah dunia maya. Karena pembuat dan pengembang Google Chrome
adalah perusahaan Google, maka dipastikan mempunyai kualitas yang
sangat baik.
Google Chrome dapat mengakses sebuah situs dengan sangat cepat
baik diperangkat PC maupun Smartphone. Selain itu, banyak sistem
operasi yang dapat digunakan Google Chrome seperti, Windows, MacOS,
Linux, iOS, Android dan Chrome OS.

Gambar 4.2 Google Chrome

Berikut ini kelebihan Google Chrome:

a. Mempunyai nilai pengguna tertinggi: Kecepatan dan desain
antarmuka yang user-friendly menjadikan web browser ini banyak
diminati. Selain itu Fitur bawaan dari Google Chrome cukup
banyak dan sangat mendukung kita dalam mencari, mengelola dan
menyimpan informasi.
b. Fitur bawaan menarik: Setiap web browser pasti mempunyai fitur-
fitur yang berbeda didalamnya. Contohnya pada Google Chrome
mempunyai fitur menarik seperti adanya Task Manager, Omnibox,
Mode Incognito dll.
c. Bisa ditambahkan fitur baru: Ekstensi adalah fitur-fitur yang dapat
kita install pada web browser Google Chrome. Dengan
menambahkan ekstensi, maka Google Chrome akan mendapatkan
sebuah fitur baru yang sangat membantu kita.
 d. Terhubung langsung dengan Google Search Engine: Dengan
menggunakan search engine Google, kita dapat memuat banyak
informasi didalamnya. Search engine dari Google ini adalah yang
paling sering digunakan dibanding yang lainnya seperti Bing dan
Yandex.
e. Lebih hemat ram dan kecilnya ukuran memori: Karena Google
Chrome mempunyai ukuran memori yang kecil menjadikan dapat
digunakan pada perangkat dengan speksifikasi rendah sekalipun.
Selain itu, Google Chrome dapat melakukan proses awal lebih cepat
dibanding yang lainnya.

Fitur-Fitur Pada Google Chrome

Fitur-fitur pada web browser sangat berpengaruh kepada pengguna
yang memakainya. Setiap web browser juga mempunyai fitur-fitur
berbeda agar mempunyai ciri khas didalamnya. Berikut ini adalah Fitur-
fitur pada Google Chrome :
a. Menyimpan riwayat situs yang telah kita kunjungi.
b. Menyimpan riwayat data yang telah kita download.
c. Dapat mengelola Bookmark untuk menyimpan situs yang kita sukai
dengan baik.
d. Mempunyai mode Incognito atau penelusuran situs tanpa
meninggalkan jejak.
e. Adanya Bandwidth Saving yang dapat menghemat data.
f. Adanya Task Manager untuk mengelola program, seperti
memeriksa memori dan menghentikan pemasangan installasi
didalamnya.
g. Adanya Omnibox atau pencarian memori.
h. Terjemahan pada Google Chrome mendukung lebih dari 50 bahasa.
i. Multi Profil jika kita mempunyai beberapa akun Google.
j. Adanya pin tab untuk menandai beberapa tab yang ingin kita
utamakan dan akan bergeser ke paling kiri.
k. Berfungsi penuh untuk jaringan, baik itu internet dan intranet.

5. Php versi 7
PHP 7 adalah rilis utama dari bahasa pemrograman PHP dan ini
disebut-sebut sebagai sebuah revolusi dalam cara aplikasi web dapat
dikembangkan dan dikirim untuk mobile untuk enterprises and the cloud.
Rilis ini dianggap menjadi perubahan yang paling penting untuk PHP
setelah pelepasan PHP 5 pada tahun 2004.
Pengertian PHP Sendiri adalah bahasa skrip yang dapat ditanamkan
atau disisipkan ke dalam HTML. PHP banyak dipakai untuk memrogram
situs web dinamis. PHP dapat digunakan untuk membangun sebuah CMS.

Gambar 4.3 Php7

Fitur - Fitur pada PHP 7 :

Ada puluhan fitur yang ditambahkan ke PHP 7, yang paling signifikan
yang disebutkan di bawah :
a. Improved Performance − PHPNG memiliki kode bergabung di
PHP7, sudah dua kali secepat PHP 5.
b. Lower Memory Consumption - Pemakaian memori rendah
dioptimalkan PHP 7 memanfaatkan sumber daya yang lebih
rendah.
c. Scalar type declarations / Tipe skalar Deklarasi − sekarang
parameter dan kembali jenis dapat dilaksanakan.
d. Consistent 64-bit support / Konsisten pada dukungan 64-bit −
dukungan konsisten untuk 64-bit arsitektur mesin.
e. Improved Exception hierarchy / Peningkatan pengecualian hirarki
– pengecualian hirarki ditingkatkan.
f. Banyak kesalahan fatal yang menjadi pengecualian − macam
pengecualian meningkat meliputi banyak kesalahan fatal dikonversi
sebagai pengecualian.
 g. Secure random number generator - generator nomor acak aman
penambahan baru aman API generator nomor acak.
h. Deprecated SAPIs and extensions removed − berbagai lama dan
tidak didukung SAPIs dan ekstensi akan dihapus dari versi terbaru.
i. Null coalescing operator (?) − null coalescing operator baru
ditambahkan.
j. Return and Scalar Type Declarations / Kembali dan deklarasi tipe
skalar − ditambahkan dukungan untuk kembali tipe danjenis
parameter.
k. Anonymous Classes / Anonim kelas − dukungan untuk anonim
ditambahkan.
l. Zero cost asserts / Biaya nol menegaskan − dukungan untuk
menyatakan biaya nol ditambahkan.

D. Tahap Pembuatan Database

Cara membuat Database Diet Sehat akan kita buat dengan
menggunakan aplikasi phpMyAdmin. Sofware ini merupakan aplikasi
khusus untuk mengelolah database mysql. Ada banyak sekali manfaat dan
keunggulan memakai aplikasi ini, salah satunya adalah kemudahan
dengan tampilan antarmuka berbasis GUI membuat kita dengan cepat
melakukan perintah-perintah SQL seperti pada cmd yang sudah kita
praktekan sebelumya.
Pastikan sudah menginstal aplikasi xampp karena didalam aplikasi
tersebut sudah tersedia module mysql dan apache sebagai web server
(localhost) ketika kita menjalankan tools phpMyAdmin.
1. Langkah pertama buka aplikasi xampp lalu aktifkan mysql dan apache
dengan menekan tombol start
 Indikator module apache dan mysql akan berwarna hijau artinya
keduanya berhasil dijalankan.

2. Selanjutnya klik tombol admin pada mysql untuk masuk ke

phpMyAdmin

Jendela browser akan dibuka dan akan diarahkan pada URL seperti
berikut ini http://localhost/phpmyadmin Gambarnya sebagai berikut :
3. Selanjutnya pada bagian kiri (sildebar) terdapat link ‘New’ untuk
membuat database baru, silahkan klik link ‘New’ tersebut
4. Pada bagian konten akan muncul field untuk membuat basis data baru.
Masukan nama db ‘Diet_sehat’ lalu klik buat (Create).

5. Sekarang mari kita buat tabelnya, ada 7 tabel yang harus dibuat, tabel
pertama yang kita buat adalah tabel user, masukan nama tabel dan
jumlah kolom kemudian klik kirim.

Selanjutnya akan muncul formulir yang harus kita input sesuai

dengan deskripsi pada masing-masing tabel. Seperti berikut ini :
 Setelah mengklik tombol Go sistem akan memproses dan jika
berhasil tabel user akan muncul di database perpustakaan pada bagian
silebar, dengan menampilkan sruktur tabel yang telah dibuat.

Lanjut kita buat insert pada tabel user, contohnya sebagai berikut :
 Buat 3 tabel, isi sesuai dengan tabel yang sudah ditentukan, setelah
itu tekan tombol save/go. Setelah selesai kita lihat di tabel Browse,
hasilnya sebagai berikut :

6. Selanjutnya kita buat tabel kelompok kriteria, ada 3 tabel yang harus
dibuat, kemudian klik kirim/go

Selanjutnya akan muncul formulir yang harus kita input sesuai

dengan deskripsi pada masing-masing tabel. Seperti berikut ini :
 Buat Insert nya terlebih dahulu, setelah dibuat hasilnya dilihat di
Browse sebagai berikut :

7. Selanjutnya kita buat tabel kriteria, pengerjaannya sama seperti pada

diatas. Dan akan muncul formulir yang harus kita input sesuai dengan
deskripsi pada masing-masing tabel. Lalu hasil di strukturnya sebagai
berikut :
 Setelah di isi lalu tekan tombol save/go.

Buat Insert nya terlebih dahulu, setelah dibuat hasilnya dilihat di

Browse sebagai berikut :

8. Selanjutnya kita buat tabel Solusi, pengerjaannya sama seperti pada

diatas. Dan akan muncul formulir yang harus kita input sesuai dengan
deskripsi pada masing-masing tabel. Seperti berikut ini :
Setelah di isi lalu tekan tombol save/go.

Setelah mengklik tombol Go sistem akan memproses dan jika

berhasil tabel user akan muncul di database perpustakaan pada bagian
silebar, dengan menampilkan sruktur tabel yang telah dibuat.

Buat 8 tabel pada insert, isi sesuai dengan tabel yang sudah
ditentukan, setelah itu tekan tombol save/go. Setelah selesai kita lihat
di tabel Browse, hasilnya sebagai berikut :
E. Tahap Pembuatan Aplikasi
Dalam tahap pembuatan aplikasi ini kita harus ke github untuk
mendownload folder project yang akan kita gunakan dalam pembuatan
aplikasi sistem cerdas diet sehat.
1. Download Folder Project
Langkah pertama kita harus mengunjungi github terlebih dahulu,
silahkan klik link ini untuk melanjutkan download folder projek
https://github.com/didin65/sistem_cerdas. Setelah itu akan muncul
seperti ini :

Selanjutnya kita klik button yang berwarna hijau untuk mendownload

folder project sepeerti ini :
 1

Jika sudah mendowloadnya, silahkan kita pindahkan folder project ke

penyimpanan htdocs pada folder xampp, folder xampp saya ada di local
disk c, silhkan sesuaikan dengan komputer anda dimana menyimpan
folder xamppnya.

Contoh : C:\xampp\htdocs\sistem_cerdas
2. Penjelasan Struktur Folder Project

a. Folder Admin : berisi tentang program untuk mengelola di mulai

dari data pegawai, pasien, data gejala serta solusi.
b. Folder Assets : berisi tentang framework bootsrrap dan gambar
c. Folder Pegawai : berisi tentang program untuk mengelola di mulai
dari data pasien, data hasil prediksi pasien.
d. Folder User (Pasien) : berisi tentang program melihat informasi dan
konultasi serta hasil konsultasi.
e. File Login : Program untuk membuat login pada aplikasi.
f. File Logout : Program untuk membuat logout pada aplikasi.
g. File Lupa Password : Program untuk mengecek password apabila
seseorang lupa password pada aplikasi.
h. File m_login : Program untuk mengecek / mengeksekusi data yang
dimasukan pada database sesuai atau tidak. Jika sesuai maka login
berhasil.
i. File m_regis : Program untuk memasuka data pada database
j. File otp : Program untuk mengecek seseorang apakah benar human
atau robot.
k. Fiel Regsitrasi : Program antarmuka form registrasi pada apikasi.

3. Membuat Koneksi ke Database

a. Asumsikan bahwa kita sudah menginstal sublime text 3.
b. Buka sublime text 3 nya, setelah terbuka pilih folder nama
 sistem_cerdas -> koneksi -> koneksi.php seperti gambar di bawah
ini :

c. Selanjutnya kita masukan script php nya di file koneski.php untuk

menghubungkan database pada aplikasi kali ini. Seperti gambar di
bawah ini :

d. Pilih file pada sublime text 3 -> pilih Save. Setelah di save
mengecek aplikasi sudah terhubung atau tidak, asumsikan sudah
menginstall xampp, buka aplikasi xampp -> klik start pada apache
-> klik start pada mysql. Seperti gambar di bawah ini :
 e. Buka browser, dalam project kali ini menggunakan google chrome
dan tuliskan seperti ini untuk memanggil file koneksi.php di folder
xammp di alam browser :
localhost/sistem_cerdas/koneksi/koneksi.php. Seperti gambar di
bawah ini :

Pada gambar di atas ada tulisan hasil outpunya DB Terhubung,

artinya aplikasi sudah terhubumg ke database.

4. Membuat Registrasi Pada Aplikasi

a. Buka file registrasi.php di dalam foler sistem_cerdas dan tuliskan
script HTML untuk membuat form registrasi seperi gambar di bawah
ini :
b. Pilih file pada sublime text 3 -> pilih save. Selanjutnya buka file
m_regis.php tuliskan script PHP dan jangan lupa save. Seperti gambar
di bawah ini :

c. Mengecek program regitrasi apakah sudah berjalan atau tidak pada

aplikasi. Panggil file registrasi.php, caranya tuliskan di alamat browser
localhost/sistem_cerdas/registrasi.php. Seperti gambar di bawah ini :
 Pada gambar di atas program regitrasi sudah berhasil serta berhasil
memasukan data ke database.

5. Membuat Login Multi User

a. Buka file login.php, caranya buka folder sistem_cerdas -> pilih file
login.php, setelah itu tambahkan script HTML dan PHP seperti gambar
 di bawah ini :

b. Buka file m_login.php di folder sistem_cerdas dan tambahkan script

PHP seperti gamabr di bawah ini :
c. Save project pilih File pada sublime text 3 -> pilih Save All.

6. Membuat Logout
a. Buka file logout.php tambahkan script PHP seperti gambar di bawah
ini :

b. Save Project pilih File pada sublime text 3 -> Pilih Save All.

7. Membuat OTP
a. Buka file otp.php tambahkan script PHP dan HTML seperti gambar di
bawah ini :
b. Save project pilih File -> Pilih Save All.

8. Membuat Halaman Pasien

Halaman Pasien adalah halaman yang di gunakan pasien untuk
melihat informasi seputar tentang diet sehat dan di halaman ini juga pasien
bisa konsultasi terkait diet. Cara pembuatan :
a. Buka File index.php di dalam folder user tambahkan script PHP seperti
gambar di bawah ini :
b. Save Project pilih File -> Pilih Save All.
c. Buka file Dashboard.php di dalam folder user tambahkan Script HTML
seperti gambar di bawah ini :
d. Save project Pilih File -> Save All.
e. Buka file prediksi.php di dalam folder prediksi-pasien tambahkan
script HTML dan PHP seperti gambar di bawah ini :

f. Buka file hasil_prediksi.php di dalam folder prediksi-pasien

tambahkan script HTML dan PHP seperti gambar di bawah ini :
g. Buka file informasi.php di dalam foler prediksi-pasien tambahkan
script HTML sepeerti gambar di bawah ini :
h. Setelah selesai membuat halaman pasien save project Pilih File -> Pilih
Save All.
i. Buka halam pasien dengan mengetikan di web browser
http://localhost/sistem_cerdas/index.php hasilnya akan seperti pada
gambar di bawah ini :
9. Membuat Halaman Pegawai
Halaman Pegawai adalah halaman yang berisi data pasien dan
konsultasi pasien serta pegawai merupakan yang mengelola data pasien di
mulai dari edit, tambah, hapus pasien. Cara pembuatan :
1) Buka File dashboard.php di dalam folder pegawai -> data-pasien
masukan script seperti gambar di bawah ini :
2) Buka file index.php di dalam folder pegawai -> data-pasien masukan
script seperti gambar di bawah ini :
3) Buka file pasien.php di dalam folder pegawai -> data-pasien masukan
script seperti gambar di bawah ini :
4) Buka file tambah.php untuk membuat form tambah data pasien
tambahkan script seperti gambar di bawah ini :
5) Buka File simpan_data_pasien.php utuk proses menambah data pasien
pada sistem dengan script PHP seperti gambar di bawah ini :
6) Buka file edit_pasien.php untuk membuat form ubah data pasien
seperti gambar di bawah ini :
7) Buka file upadate_pasien.php tambahkan script PHP untuk mengambil
data berdasarkan id yang di pilih di halaman data pasien seperti
gambar di baawah ini :

8) Buka file simpanEdit_data_pasien.php tambahkan script php untuk

membuat proses ubah data pasien seperti gambar di bawah ini :
9) Buka file print_pasien.php tambahkan script untuk membuat proses
mencetak data pasien seperti gambar di bawah ini :

10) Buka file hapus_pasien.php di dalam folder data-pasien tambahkan

script PHP untuk menghapus data seperti gambar di bawah ini :
11) Pilih File pada sublime text 3 -> Pilih Save All.
12) Buka file prediksi.php di dalam folder prediksi-pasien tambahkan
script HTML dan PHP seperti gambar di bawah ini :

13) Buka file hasil_prediksi.php di dalam folder prediksi-pasien

tambahkan script HTML dan PHP seperti gambar di bawah ini :
14) Pilih File -> Save All pada sublime text 3.
15) Untuk melihat hasilnya asumsikan sudah mengaktivkan apache dan
mysql pada xampp.

16) Ketikan localhost/sistem_cerdas/login.php masukan username dan

password sebagai pegawai seperti biasa. Maka hasilnya akan seperti
gambar di bawah ini :
10. Membuat Halaman Admin

Halaman Admin adalah halaman yang mengelola semua data seperti

Tambah, Edit dan Hapus yang ada pada aplikasi di mulai dari data
pegawai, pasien, kriteria, kelompok kriteria dan solusi. Untuk cara
pembuatan halaman admin ikuti langkah – langkah berikut ini :
1) Buka file yang bernama index.php di dalam folder admin untuk
membuat halaman penghubung untuk setiap menu halaman yang ada
pada halaman admin tambahkan script seperti gambar di bawah ini :
2) Pilih Fille dashboard.php di dalam folder admin untuk membuat
halaman utama pada halaman admin tambahkan script seperi gambar
di bawah ini :
3) Buka folder data – solusi -> pilih file solusi.php untuk memnampilkan
semua data solusi tambahkan script seperti gambar di bawah ini :
4) Pilih file tambah_solusi.php untuk membuat form tambah data solusi
tambahkan script seperti gambar di bawah ini :
5) Pilih file simpan_data_solusi.php untuk membuat proses penambahan
data solusi sepeerti gambar di bawah ini :
6) Buka file upadate_solusi.php untuk mengambil data per id yang
nantinya akan di tampilkan di value form ubah data solusi tambahkan
script seperti gambar di bawah ini :

7) Buka file edit_solusi.php untuk membuat form ubah data solusi

tambahkan script seperti gambar di bawah ini :

8) Buka file simpanEdit_data_solusi.php untuk membuat form ubah data

solusi tambahkan script seperti gambar di bawah ini :
9) Buka file hapus_solusi.php untuk menghapus data solusi tambahkan
script seperti gambar di bawah ini :

10) Buka folder admin -> data – kriteria -> buka file kriteria.php untuk
mengambil semua data kriteria tambahkan script seperti gambar di
bawah ini :
11) Buka folder admin -> data – kriteria -> buka file kriteriaTambah.php
untuk menambahkan data kriteria tambahkan script seperti gambar di
bawah ini :
12) Buka folder admin -> data – kriteria -> buka file
simpan_data_kriteria.php untuk proses menambahkan data kriteria
tambahkan script seperti gambar di bawah ini :

13) Buka folder admin -> data – kriteria -> buka file upadate_kriteria.php
untuk proses mengambil data kriteria pada value form ubah data
tambahkan script seperti gambar di bawah ini :
14) Buka folder admin -> data – kriteria -> buka file edit_kriteria.php
untuk membuat form ubah data tambahkan script seperti gambar di
bawah ini :

15) Buka folder admin -> data – kriteria -> buka file
simpanEdit_data_kriteria.php untuk membuat proses ubah data
tambahkan script seperti gambar di bawah ini :
16) Buka folder admin -> data – kriteria -> buka file hapus_kriteria.php
untuk membuat proses hapus data tambahkan script seperti gambar di
bawah ini

17) Buka folder admin -> data – kelompokKriteria -> buka file
data_kelompok_kriteria.php untuk mengambil semua data tambahkan
script seperti gambar di bawah ini :
18) Buka folder admin -> data – kelompokKriteria -> buka file
tambah_kriteria.php untuk membuat form tambah data tambahkan
script seperti gambar berikut ini :
19) Buka folder admin -> data – kelompokKriteria -> buka file
simpan_data_kriteria.php untuk proses memasukan data tambahkan
script seperti gambar di bawah ini :

20) Buka folder admin -> data – kelompokKriteria -> buka file
update_kriteria.php untuk proses mengambil data tambahkan script
seperti gambar di bawah ini :
21) Buka folder admin -> data – kelompokKriteria -> buka file
edit_kriteria.php untuk form ubah data tambahkan script seperti
gambar di bawah ini :

22) Buka folder admin -> data – kelompokKriteria -> buka file
simpanEdit_data_kekriteria.php untuk proses mengubah data
tambahkan script seperti gambar di bawah ini :

23) Buka folder admin -> data – kelompokKriteria -> buka file
 hapus_kelompok.php untuk proses menghapus data tambahkan script
seperti gambar di bawah ini :

24) Buka file pasien.php di dalam folder admin -> data-pasien masukan
script seperti gambar di bawah ini :
25) Buka file tambah.php untuk membuat form tambah data pasien
tambahkan script seperti gambar di bawah ini :
26) Buka File simpan_data_pasien.php utuk proses menambah data pasien
pada sistem dengan script PHP seperti gambar di bawah ini :

27) Buka file edit_pasien.php untuk membuat form ubah data pasien
seperti gambar di bawah ini :
28) Buka file upadate_pasien.php tambahkan script PHP untuk mengambil
data berdasarkan id yang di pilih di halaman data pasien seperti
gambar di bawah ini :
29) Buka file simpanEdit_data_pasien.php tambahkan script php untuk
membuat proses ubah data pasien seperti gambar di bawah ini :

30) Buka file print_pasien.php tambahkan script untuk membuat proses

mencetaka data pasien seperti gambar di bawah ini :
31) Buka file hapus_pasien.php di dalam folder data-pasien tambahkan
script PHP untuk menghapus data seperti gambar di bawah ini :
32) Buka file data_pegawai.php di dalam folder data-pegawai tambahkan
script PHP untuk mengambil semua data seperti gambar di bawah ini :
33) Buka file tambah_pegawai.php di dalam folder data-pegawai
tambahkan script PHP untuk membuat form menambahkan data
seperti gambar di bawah ini :
34) Buka file simpan_data_pegawai.php di dalam folder data-pegawai
tambahkan script PHP untuk membuat proses menambahkan data
seperti gambar di bawah ini :

35) Buka file update_pegawai.php di dalam folder data-pegawai

tambahkan script PHP untuk mengambil data yang akan di tampilkan
pada fom ubah seperti gambar di bawah ini :

36) Buka file edit_pegawai.php di dalam folder data-pegawai tambahkan

script PHP untuk membuat fom ubah data seperti gambar di bawah ini
:
37) Buka file simpanEdit_data_pegawai.php di dalam folder data-pegawai
tambahkan script PHP untuk proses mengubah ubah data seperti
gambar di bawah ini :
38) Buka file hapus_pegawai.php di dalam folder data-pegawai
tambahkan script PHP untuk proses menghapus data seperti gambar di
bawah ini :

39) Buka file print_pegawai.php di dalam folder data-pegawai tambahkan

script PHP untuk proses mencetak data seperti gambar di bawah ini :
40) Setelah itu save program dengan cara pilih File -> Save All. Maka
hasilnya akan seperti ini :
F. Penggunaan Aplikasi
Berikut petunjuk penggunaan aplikasi Sistem Cedas Diet Sehat. Pada
bagian ini akan dijelaskan mengenai tata cara memasukkan data sebagai
data sumber melalui alamat situs yang telah disediakan serta konsultasi
pasien.
1. Buka aplikasi XAMPP aktivkan apache dan mysql seperti gambar di
bawah ini :

2. Buka aplikasi project Sistem Cerdas Diet Sehat dengan cara buka web
browser ketikan http://localhost/sistem_cerdas/login.php. Masukan
username dan password yang berole pasien sesuai isi data di database
contohnya saya disini username : Mita Karmila dan password : 123456
seperti gambar di bawah ini :
3. Jika login berhasil makan akan masuk ke halaman OTP seperti gambar
di bawah ini :

4. Jika kode OTP anda benar maka akan masuk ke halaman dashboard
pasien seperti gambar di bawah ini :

5. Pilih menu konsultasi, lalu pilih gejala / kriteria seperti gambar di

bawah ini :
6. Maka hasilnya akan sesuai dengan gejala / kriteria yang di pilih seperti
gambar di bawah ini :