Perancangan Antar Muka Frontend Application

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 :