4.3.1.3 Perancangan Antar Muka Informasi Kuliner frontend
Gambar. 4.20 Perancangan Antar Muka Informasi Kuliner frontend
4.3.1.4 Perancangan Antar Muka Help frontend
Gambar. 4.21 Perancangan Antar Muka Help frontend
- Ukuran layar menyesuaikan
- Font Times New Roman
- Warna merah, hitam
- Klik tombol 1 maka akan muncul tampilan T06.
- Klik tombol 2 maka akan muncul tampilan
T06. - Klik tombol 3 maka akan
muncul tampilan T10. - Klik tombol 4 maka akan
muncul tampilan T07. - Klik tombol 5 maka akan
muncul tampilan T11
T03
Tombol 1 Tombol 2
Tombol 5 Tombol 3
Tombol 4
- Ukuran layar menyesuaikan
- Font Times New Roman
- Warna hitam
- Text 1 merupakan isi atau penjelasan dari tampilan T04
T04
Text 1
4.3.1.5 Perancangan Antar Muka About frontend
Gambar. 4.22 Perancangan Antar Muka About frontend
4.3.1.6 Perancangan Antar Muka Pencarian Tempat Kuliner frontend
Gambar. 4.23 Perancangan Antar Muka Pencarian Tempat Kuliner frontend
- Ukuran layar menyesuaikan
- Font Times New Roman
- Warna hitam
- Text 1 merupakan isi atau penjelasan dari tampilan T05.
T05
Text 1
T06
- Ukuran layar menyesuaikan
- Font Times New Roman
- Warna merah, hitam
- Pilih salah satu dari tiga kategori pencarian yang
terdapat pada List Item 1, kemudian pilih salah satu dari
lima kategori jenis makananan atau masakan yang tersedia ,
masukan keyword pencarian pada Text 2 dan klik Tombol
1 maka akan muncul tamplilan T07.
List Item 1
Text 2 Tombol
List Item 2
4.3.1.7 Perancangan Antar Muka List View atau Content frontend
Gambar. 4.24 Perancangan Antar Muka List View atau Content frontend
4.3.1.8 Perancangan Antar Muka Detail List View atau Content frontend
Gambar. 4.25 Perancangan Antar Muka Detail List View atau Content frontend
- Ukuran layar menyesuaikan
- Font Times New Roman
- Warna merah, merah,hitam
- Klik area Gambar 1 Text 1 atau Gambar 2 Text 2 atau
Gambar 3 Text 3 sampai Gambar Text n maka akan
muncul tampilan T08.
T07
Gambar 1
Gambar 2
Gambar 3 Text 1
Text 2
Text 3
- Ukuran layar menyesuaikan
- Font Times New Roman
- Warna,hitam
- Klik Tombol 1 maka akan muncul tampilan T09.
- Klik Tombol 2 maka akan muncul tampilan pesan toast
tambah rating.
T08
Gambar 1 Text 1
Text 2 Text 3
Text 3 Tombol 1
Tombol 2
4.3.1.9 Perancangan Antar Muka Lihat Peta frontend
Gambar. 4.26 Desain Antar Muka Lihat Peta frontend
4.3.1.10 Perancangan Antar Muka List Kategori frontend
Gambar. 4.27 Desain Antar Muka List Kategori frontend
- Klik Tombol 1 maka akan memperbesar tampilan peta.
- Klik Tombol 2 maka akan memperkecil tampilan peta.
T09
- Ukuran layar menyesuaikan
- Font Times New Roman
- Warna,hitam, putih, biru
Map
Tombol 1 Tombol 2
- Ukuran layar menyesuaikan
- Font Times New Roman
- Warna,hitam
- Klik Gambar 1 Text 1 atau Gambar 2 Text 2 atau
Gambar 3 Text 3 atau Gambar 4 Text 4 atau
Gambar 5 Text 5 maka akan muncul tampilan T07
T10
Gambar 1 Text 1
Text 2 Text 3
Text 4 Gambar 2
Gambar 3 Gambar 4
Gambar 5 Text 5
4.3.1.11 Perancangan Antar Muka Pesan Toast Lihat Posisi frontend
Gambar. 4.28 Desain Antar Muka Pesan Toast Lihat Posisi frontend
4.3.2 Perancangan Antar Muka Backend Application
Berbeda dengan frontend application yang memiliki rancangan yang begitu kompleks, backend application hanya meliputi rancanagan antar
muka saja yaitu terdiri dari halaman login, menu administrator dan halaman tambah, edit, delete data kuliner.
- Ukuran layar menyesuaikan
- Font Times New Roman
- Warna,hitam
- Text 1 merupakan Toast yang menjelaskan keberadaan atau
posisi pengguna.
T11
Text 1
4.3.2.1 Perancangan Halaman Login Menu Admin
Gambar. 4.29 Perancangan Halaman Login Admin backend
4.3.2.2 Perancangan Halaman Utama Web Admin
Gambar. 4.30 Perancangan Halaman Utama Web Admin backend
- Ukuran layar menyesuaikan
- Font Times New Roman
- Warna,hitam
- Isi Text 1 dan Text 2 lalu tekan Tombol 1 maka akan muncul
tampilan T02
T01
Text 1 Username :
Text 2 Password :
Tombol 1
- Ukuran layar menyesuaikan
- Font Times New Roman
- Warna,hitam
- Klik hyperlink “Pengolahan Data
Tempat Kuliner” maka akan muncul tampilan T03.
- Klik hyperlink “Pengolahan Data
Ketegori Jenis Masakan” maka akan muncul tampilan T06.
- Klik hyperlink “Pengolahan Data
Jajanan” maka akan muncul tampilan T05.
- Klik hyperlink “Pengolahan Data
Menu” maka akan muncul tampilan T013
- Klik hyperlink “Tabel Rating”
maka akan muncul tampilan T015
T02 MENU ADMINISTRATOR
Pengolahan Data Tempat Kuliner Pengolahan Data Jajanan
Pengolahan Data Kategori Jenis Masakan Pengolahan Data Menu
LOGOUT Tabel Rating
4.3.2.3 Perancangan Halaman Pengolahan Data Tempat Kuliner
Gambar. 4.31 Perancangan Halaman Pengolahan Data Tempat Kuliner backend
4.3.2.4 Perancangan Halaman Pengisian Data Tempat Kuliner
Gambar. 4.32 Perancangan Halaman Pengisisan Data Tempat Kuliner backend
- Ukuran layar menyesuaikan
- Font Times New Roman
- Warna,hitam
- Klik hyperlink “Edit” maka
akan muncul tampilan T04. -
Klik hyperlink “Hapus” maka akan menghapus data yang
aktif di tabel. - Pilih Gambar 1 maka akan
muncul tampilan T02. - Pilih Gambar 2 maka akan
muncul tampilan T04. - Pilih Gambar 3 maka akan
muncul tampilan T05
T03
EditHapus EditHapus
EditHapus
TABEL TEMPAT KULINER
Gambar 1 Gambar 3
Gambar 2
- Ukuran layar menyesuaikan
- Font Times New Roman
- Warna,hitam
- Isi seluruh text field yang tersedia lalu pilih Tombol 1
maka akan akan muncul pesan penyimpanan berhasil.
- Pilih Tombol 2 maka proses penyimpanan gagal dilakukan
atau dibatalkan. - Pilih Tombol 3 maka akan
muncul tampilan T03.
T04
TABEL PENGISIAN DATA TEMPAT KULINER
Tombol 1 Tombol 3
Tombol 2
ID Tempat Kuliner : ID Jenis Masakan :
Nama Tempat Kuliner : Alamat :
No Telpon : Fasilitas :
Longitude : Latitude :
ID Menu :