BAB IV IMPLEMENTASI DAN UJI COBA
4.2 Implementasi
4.2.1 Tampilan Halaman
Gambar 4.1 Implementasi Tampilan Halaman Home
Gambar 4.1 merupakan implementasi tampilan halaman Home. Pada halaman ini, terdapat form rekomendasi yang dapat diisi oleh user untuk mendapatkan rekomendasi resep masakan. Selain itu, panduan mengenai cara
menggunakan form rekomendasi juga ditampilkan di halaman ini untuk membantu
user yang ingin mendapatkan rekomendasi resep masakan.
Gambar 4.2 merupakan implementasi tampilan halaman Semua Resep. Halaman ini menampilkan daftar resep yang tersimpan pada database. Pada halaman ini, user dapat mengakses halaman Detail Resep dengan menekan tombol lihat detail dan mengubah status favorit suatu resep dengan menekan tombol favoritkan.
Gambar 4.3 Implementasi Tampilan Halaman Tentang
Gambar 4.3 merupakan implementasi halaman Tentang. Pada halaman ini, terdapat informasi mengenai sistem yang dibangun dan penjelasan singkat mengenai kriteria-kriteria yang digunakan untuk menentukan rekomendasi.
Gambar 4.4 Implementasi Tampilan Halaman Credits
Gambar 4.4 merupakan implementasi halaman Credits. Pada halaman ini, terdapat informasi mengenai library-library yang digunakan dalam sistem yang dibangun.
Gambar 4.5 merupakan implementasi tampilan halaman Rekomendasi. Halaman ini menampilkan 5 resep terbaik yang direkomendasikan kepada user. Pada halaman ini, user dapat melihat detail suatu resep dengan menekan tombol lihat detail.
Gambar 4.6 Implementasi Tampilan Halaman Detail Resep
Gambar 4.6 merupakan implementasi tampilan halaman Detail Resep. Halaman ini menampilkan informasi detail dari suatu resep. Pada halaman ini, user
Gambar 4.7 Implementasi Tampilan Modal Login
Gambar 4.7 merupakan implementasi tampilan modal Login. Melalui modal ini, user dapat melakukan login dengan cara memasukkan data berupa email dan
password.
Gambar 4.8 Implementasi Tampilan Modal Sign Up
Gambar 4.8 merupakan implementasi tampilan modal Sign Up. Melalui modal ini, user dapat mendaftarkan akun baru dengan cara memasukkan data berupa nama, email, password, dan konfirmasi password.
Gambar 4.9 Implementasi Tampilan Halaman Favorit
Gambar 4.9 merupakan implementasi tampilan halaman Favorit. Halaman ini menampilkan daftar resep favorit dari user yang sedang login. Pada halaman ini,
user dapat mengakses halaman Detail Resep dengan menekan tombol lihat detail
Gambar 4.10 Implementasi Tampilan Halaman Change Password
Gambar 4.10 merupakan implementasi tampilan halaman Change Password. Pada bagian halaman ini, user dapat mengubah password miliknya dengan mengisi form yang tersedia dan menekan tombol reset password.
Gambar 4.11 Implementasi Tampilan Halaman Login Admin
Gambar 4.11 merupakan implementasi tampilan halaman Login Admin. Melalui halaman ini, admin dapat melakukan login dengan cara memasukkan data berupa email dan password.
Gambar 4.12 Implementasi Tampilan Halaman Sign Up Admin
Gambar 4.12 merupakan implementasi tampilan halaman Sign Up Admin. Melalui halaman ini, admin dapat mendaftarkan akun baru dengan cara memasukkan data berupa nama, email, password, dan konfirmasi password.
Gambar 4.13 Implementasi Tampilan Halaman View Resep
Gambar 4.13 merupakan implementasi tampilan halaman View Resep. Halaman ini menampilkan data resep dalam bentuk tabel. Pada halaman ini, admin dapat menambah data bahan dengan menekan tombol add new yang terletak di bagian judul tabel. Selain itu, admin juga dapat melihat detail resep dengan menekan tombol detail, mengubah data resep dengan menekan tombol edit, dan menghapus data resep dengan menekan tombol delete yang berada pada kolom
Gambar 4.14 Implementasi Tampilan Halaman Add Resep
Gambar 4.14 merupakan implementasi tampilan halaman Add Resep. Pada halaman ini, admin dapat menambahkan data resep baru dengan mengisi form yang tersedia dan menekan tombol submit.
Gambar 4.15 Implementasi Tampilan Halaman Edit Resep
Gambar 4.15 implementasi tampilan halaman Edit Resep. Pada halaman ini,
admin dapat mengubah data yang sudah ada dengan mengisi form yang tersedia dan
Gambar 4.16 Implementasi Tampilan Halaman View Detail Resep
Gambar 4.16 merupakan implementasi tampilan halaman View Detail Resep. Halaman ini menampilkan data detail suatu resep dalam bentuk tabel. Pada halaman ini, admin dapat menambah data detail resep dengan menekan tombol add
new yang terletak di bagian judul tabel. Selain itu, admin juga dapat mengelola data
detail resep dengan menekan tombol edit dan tombol delete yang berada pada kolom action.
Gambar 4.17 Implementasi Tampilan Halaman Add Detail Resep
Gambar 4.17 merupakan implementasi tampilan halaman Add Detail Resep. Pada halaman ini, admin dapat menambahkan data detail resep baru dengan mengisi
form yang tersedia dan menekan tombol submit.
Gambar 4.18 Implementasi Tampilan Halaman Edit Detail Resep
Gambar 4.18 merupakan implementasi halaman Edit Detail Resep. Pada halaman ini, admin dapat mengubah data detail resep yang sudah ada dengan mengisi form yang tersedia dan menekan tombol submit.
Gambar 4.19 Implementasi Tampilan Halaman View Bahan
Gambar 4.19 merupakan implementasi tampilan halaman View Bahan. Halaman ini menampilkan data bahan dalam bentuk tabel. Pada halaman ini, admin dapat menambah data bahan dengan menekan tombol add new yang terletak di bagian judul tabel. Selain itu, admin juga dapat mengelola data bahan dengan menekan tombol edit dan tombol delete yang berada pada kolom action.
Gambar 4.20 Implementasi Tampilan Halaman Add Bahan
Gambar 4.20 merupakan implementasi tampilan halaman Add Bahan. Pada halaman ini, admin dapat menambahkan data bahan baru dengan mengisi form yang tersedia dan menekan tombol submit.
Gambar 4.21 Implementasi Tampilan Halaman Edit Bahan
Gambar 4.21 merupakan implementasi tampilan halaman Edit Bahan. Pada halaman ini, admin dapat mengubah data bahan yang sudah ada dengan mengisi
Gambar 4.22 Implementasi Tampilan Halaman View Kriteria
Gambar 4.22 merupakan implementasi tampilan halaman View Kriteria. Halaman ini menampilkan data nilai perbandingan berpasangan dan data bobot kriteria dalam bentuk tabel yang terpisah. Pada halaman ini, admin dapat mengubah data nilai perbandingan berpasangan dengan menekan tombol edit yang terletak di bagian judul tabel nilai perbandingan berpasangan.
Gambar 4.23 Implementasi Tampilan Halaman Edit Kriteria
Gambar 4.23 merupakan implementasi tampilan halaman Edit Kriteria. Pada halaman ini, admin dapat mengubah data nilai perbandingan berpasangan yang sudah ada dengan mengisi form yang tersedia dan menekan tombol submit.
Gambar 4.24 Implementasi Tampilan Halaman View User
Gambar 4.24 merupakan implementasi tampilan halaman View Users. Halaman ini menampilkan data user dalam bentuk tabel.
Gambar 4.25 Implementasi Tampilan Halaman Change Password Admin Gambar 4.25 merupakan implementasi tampilan halaman Change Password Admin. Pada halaman ini, admin dapat mengubah password miliknya dengan mengisi form yang tersedia dan menekan tombol submit.
4.2.2 Implementasi Algoritma