3. DESAIN SISTEM
Dalam bab ini dijelaskan mengenai desain sistem dari aplikasi Foodgram.
Analisis Program
Aplikasi ini dirancang berdasarkan fitur dan keunggulan aplikasi-aplikasi sejenis lainnya.
Aplikasi Pembanding Fitur dari aplikasi pembanding :
a. Aplikasi portal informasi kuliner di Surabaya berbasis website (2012,Florencia,Jesicca)
o Berbasis Website
o Report Spam pada setiap informasi restoran, artikel dan kolom komentar dengan tujuan menjaga keakuratan informasi pada website o Chatbox
o Newsletter
o Review perbandingan beberapa restoran berdasarkan inputan user o Peringkat pada setiap restoran dan menu pada website
o Terhubung dengan social network (Facebook)
o Peta dengan menggunakan Google Maps API, yang berfungsi untuk:
o Menampilkan lokasi restoran yang ada pada database
o Petunjuk jalan berdasarkan inputan lokasi user menuju restoran yang sedang dilihat.
o Recommended, menampilkan restoran sejenis yang sedang dicari oleh user berdasarkan total jumlah klik restoran maupun peringkat restoran.
o Reservasi, merupakan fasilitas yang bersifat optional bagi sebuah restoran. User yang akan menggunakan fasilitas ini dapat mengisi data (tanggal reservasi dan keterangan reservasi) pada form reservasi. Selanjutnya, pihak restoran dapat mengirim email / menghubungi pelanggan via telepon sebagai feedback.
o Terdapat dua tipe pencarian terhadap informasi yang disajikan:
Search, user memasukan kata kunci tertentu dan hasilnya adalah data yang mengandung kata inputan user pada kolom pencarian.
Advance search, user dapat melakukan pencarian berdasarkan kriteria:
1. Jenis Masakan (Contoh: Western, Indonesian) 2. Jenis Menu (Contoh: Ayam, Bebek, Bubur, Steak) 3. Harga (Contoh: < 50rb, 50rb – 100rb, >100rb) 4. Lokasi (Contoh: Surabaya Barat, Surabaya Timur) 5. Jam Buka restoran
6. Tipe Restoran (Contoh: Warung, Café, Kantin, Depot) 7. Fasilitas
o Terdapat 4 tipe hak akses, yaitu: admin, pengunjung, culinary expert dan member
b. Instagram
Gambar 3.1. Screenshoot Instagram
Aplikasi untuk mengambil foto dan berbagi momen pada dunia di Android. Dapat membagikan foto dan video dengan salah satu dari beberapa efek filter cantik. Berbagi foto dan video dengan teman-teman dan followers di feeds foto, atau mengirim posting langsung ke teman Anda. Menurut review dari users,Aplikasi ini memiliki kekurangan diantaranya: bug pada play video, Aplikasi sering crash. Screenshoot aplikasi dapat dilihat pada Gambar 3.1.
Fitur:
o Share Photo / Video di Instagram maupun social media lainnya o Editing Photo dengan berbagai effect/filter
o Fitur Follower : mengikuti akun Instagram seseorang ataupun akun Instagram Anda yang diikuti seseorang.
o Fitur like sebuah foto / video o Direct Mesagge
o Fitur Arroba untuk poke akun lain o Photo Tagging
o Fitur Geotagging o Fitur Report c. Toresto
Gambar 3.2. Screenshoot Toresto
Sebuah aplikasi yang memudahkan kamu untuk menemukan tempat makan, kapan saja dan di mana pun kamu berada. Toresto merupakan petunjuk kuliner yang wajib kamu miliki. Menurut review dari users,Aplikasi ini memiliki kekurangan diantaranya: tidak ada fitur bookmark, tidak ada fitur search secara detail untuk menu dan harga. Screenshoot aplikasi toresto dapat dilihat pada Gambar 3.2.
Fitur:
o Membutuhkan GPS untuk memulai aplikasi o Fitur Register melalui Facebook
o Fitur Near Me
o Dapat mengetahui jarak dari lokasi user mulai dari terdekat sampai terjauh, deskripsi tempat, nomor telepon, price range, Website tenant, dan fasilitas yang disediakan (wifi, vip room, parkir, smoking area, meeting room, power plug, musholla, live music, 24 hours)
o Dapat memberikan komentar dengan kalimat beserta foto setelah memiliki Akun
o Fitur Check in dan Share ke media sosial lainnya (Facebook, Twitter, Instagram)
o Fitur Report Spam
o Fitur Update feeds beserta tempat yang di review o Filter Photo
d. Food Panda
Gambar 3.3. Screenshoot Foodpanda
Aplikasi gratis untuk pemesanan makanan restoran favorit user di berbagai tempat. Menurut review dari users,Aplikasi ini memiliki kekurangan diantaranya: Keterbatasan menu pada suatu tempat, bug untuk penerimaan konfirmasi pada pemilik usaha
Fitur:
o Fitur Filter by relevance, rating, alphabet, deliver, delivery fee, minimal order
o Filter Free Delivery dan Berdasarkan jenis makanan (Indonesian, Indian, Italian, dan lain-lain)
o Fitur dapat melihat dan memesan menu dari sebuah restoran, menu berdasarkan jenis makanan(appetizer, noodles, dan lain-lain) o Dapat mengetahui harga dan dapat mengetahui total pembayaran
beserta estimasi pengiriman makanan
o Dapat mengetahui tarif ongkos kirim yang ditentukan oleh restaurant
o Fitur Deals untuk melihat promo terbaru
o Fitur database order activity
e. Aplikasi layanan pencarian rumah makan berbasis lokasi pada ponsel android (2008,Sudarto,Jonathan)
o Mengambil posisi pengguna menggunakan GPS dan A-GPS pada ponsel, menentukan tempat makan terdekat dengan pengguna o Data tempat makan yang disimpan foto, rating, alamat, telepon,
review, range harga menu, posisi
o Pengguna bisa menambahkan tempat makan baru, maupun memberikan komentar pada tempat makan yang ada
o Dapat mengetahui posisi tempat makan yang dituju menggunakan Google Map
o Pertukaran data pengguna dan server menggunakan JSON dan PHP
Berdasarkan tinjauan aplikasi sejenis, beberapa keunggulan yang akan diimplementasikan penulis dalam penelitian ini adalah
o Dapat melakukan Share Photo secara langsung menggunakan kamera o Fitur GPS dengan Google Maps
o Dapat melakukan call dan message kepada pemilik usaha kuliner secara langsung
o Aplikasi dikhususkan untuk pengguna kuliner o Dapat membeli produk yang dijual dari aplikasi ini o Dapat memudahkan pemilik usaha menjual produknya
o Dapat mengetahui rating terbaik untuk produk kuliner saat ini.
o Photo makanan dan Resto lebih banyak dan beragam o Kemudahan komunikasi antar user
o Dapat mengetahui map suatu tempat kuliner
o Terdapat fitur Share Photo makanan/minuman dalam bentuk foto maupun video
o Dapat melakukan update feeds untuk mengetahui foto-foto apa saja yang di share
Analisis Desain
Aplikasi ini didesain menggunakan beberapa referensi aplikasi-aplikasi sejenis yang banyak dipakai oleh banyak orang saat ini.
Struktur Halaman
Struktur halaman pada aplikasi ini didesain berdasarkan aplikasi berbagi foto yang sedang digemari banyak orang saat ini, yaitu Instagram. Struktur halaman dibuat menyerupai Aplikasi instagram
Gambar 3.4. Screenshoot Instagram Like dan Unlike
Pada halaman home, aplikasi ini memiliki tombol like dan unlike. Fungsi adanya tombol like dan unlike pada aplikasi ini adalah untuk dapat lebih menilai secara tepat sebuah foto/video. Fitur tersebut diambil dari aplikasi youtube.
Gambar 3.5. Screenshoot youtube.com Gambaran Sistem Secara Garis Besar
Gambar 3.1. Arsitektur sistem aplikasi foodgram
Aplikasi foodgram membutuhkan koneksi internet untuk melakukan download dan upload data dari server. Koneksi internet dapat melalui operator selular maupun WiFi. Sedangankan untuk memperoleh data lokasi, aplikasi mendapatkan data lokasi dari satelit GPS yang ada pada perangkat handphone yang digunakan. Data yang didapatkan berisi data longitude dan latitude dalam format angka yang dapat dikonversikan menjadi lokasi dengan menggunakan google maps.
Data pada server disimpan dalam database menggunakan MySQL. Database yang dibuat menyimpan tabel-tabel yang mendukung data aplikasi foodgram.
Server juga menyimpan data JSON yang dipanggil menggunakan AJAX. Gambar dapat dilihat pada Gambar 3.1.
Desain Sistem
Aplikasi ini memiliki 6 menu utama, yaitu search, nearme, upload, notification, profil, kategori. Setiap menu memiliki fungsi-fungsi lain di dalamnya.
Gambar dapat dilihat pada Gambar 3.2
Gambar 3.2. Desain Sistem Hak Akses
Pengguna aplikasi dibagi menjadi 3, yaitu member, resto owner, dan admin.
Setiap user memiliki hak akses yang berbeda-beda. Khusus pada admin, perubahan data dilakukan via Website.
Tabel 3.1 Hak akses user Fitur Penjua
lan
Pembel ian
Mengganti Status transaksi
Menambah, Mengedit, Menghapus database
Edit Featu red Post
Pencaria n data
Upload
Member - - - -
Resto Owner
- - -
Admin (Websit e)
- - -
Untuk Fitur lainnya selain fitur diatas, dapat dilakukan semua oleh member dan Resto owner
Desain Database
Dalam Desain database digunakan desain ERD untuk membantu merancang desain sistem yang ada pada program Foodgram.
Gambar 3.3. Conceptual Data Model Diagram
User Post Post Komentar Komentar Post
Lokasi Post
Bahan Dasar Post
Tipe Tempat Post Pembelian Isi Transaksi
Posting yang bisa diorder
punya
Direport
tanda diberi
Follow Memberi Like
Spam Norek
Posting Id_Post Nama_Makanan Caption Image Posting_Date Harga Status_Menu Jenis_Masakan Featured
<pi>Integer Long characters Variable characters (100) Text Date & Time Money Variable characters (40) Variable binary Integer Identifier_1<pi>
User Username Password Nama_Lengkap Alamat_Lengkap Kota No_Handphone Status Pangkat Profile_Picture Ongkir Block
<pi>Variable characters (20) Long variable characters Long characters Text Variable characters (50) Long integer Long characters Text Variable characters (100) Float (50) Number Identifier_1 ...<pi> Transaksi Id_Transaksi Pembeli Penjual No_Rek Nama_Bank Status_Pembayaran Transaksi_Date Komentar Total Nama Alamat Telepon Identifier_1 ...<pi>
Item JumlahShort integer Komentar Id_Komentar Komentar Komentar_Date
<pi>Integer Text Date & Time
<M> Identifier_1 ...<pi>
Bahan_Dasar Id_Bahan_Dasar Nama_Bahan_Dasar<pi> Identifier_1 ...<pi>
Tipe_Tempat Id_Tipe_Tempat Nama_Tipe_Tempat<pi> Identifier_1 ...<pi>
Lokasi Id_Lokasi Nama_Lokasi Jam_Buka Jam_Tutup Longitude Latitude
<pi>Float Text Integer Integer Float Float
<M> Identifier_1<pi> Following Id_Following User_Following<pi>Integer Variable characters (50) Identifier_1 ...<pi>
Spam_Posting Id_Spam Spam_Dari<pi>Integer Variable characters (50) Identifier_1<pi>
Notif Id_Notif Text Link Tipe
<pi>Integer Variable characters (30) Variable characters (50) Variable characters (1024)
<M> Identifier_1 ...<pi> Like Id_Like Like_Unlike<pi>Integer Integer<M> Identifier_1 ...<pi>
Norek Id_Norek No_Rek Nama_Bank
<pi>Short integer Long integer Text
<M> Identifier_1 ...<pi>
Gambar 3.4. Physical Data Model Diagram
PostingId_PostUsername
Nama_MakananCaptionImagePosting_DateHarga
Status_MenuJenis_MasakanFeatured integervarchar(20)
varcharvarchar(100)long varchartimestampnumeric(8,2)
varchar(40)VBINinteger User
UsernamePassword
Nama_LengkapAlamat_LengkapKotaNo_HandphoneStatus
PangkatProfile_PictureOngkirBlock varchar(20)long varchar
varcharlong varcharvarchar(50)integervarcharlong varcharvarchar(100)float(50)numeric <pk>
TransaksiId_Transaksi
UsernamePembeliPenjualNo_RekNama_Bank
Status_Pembayaran... long varchar
varchar(20)varchar(40)varchar(40)integerlong varcharlong varcharlong varchar <pk>
<fk>
ItemId_PostJumlah integersmallint <fk> KomentarId_KomentarId_Post
UsernameKomentarKomentar_Date... integerinteger
varchar(20)long varchartimestamp <pk><fk2>
<fk1> Bahan_DasarId_Bahan_Dasar
Nama_Bahan_Dasar integerlong varchar <pk> Tipe_TempatId_Tipe_TempatId_LokasiNama_Tipe_Tempat integerfloatvarchar <pk>
LokasiId_Lokasi
Nama_LokasiJam_BukaJam_TutupLongitude
Latitude floatlong varcharintegerintegerfloatfloat <pk>
FollowingId_FollowingUsernameUse_Username
User_Following integervarchar(20)varchar(20)
varchar(50) <pk><fk1><fk2> Spam_PostingId_SpamId_PostUsernameSpam_Dari integerintegervarchar(20)varchar(50) <pk><fk1><fk2> NotifId_NotifUsernameText LinkTipe... integervarchar(20)varchar(30)
varchar(50)varchar(1024) <pk><fk>
LikeId_LikeUsernameId_Post
Like_Unlike... integervarchar(20)integerinteger <pk><fk2><fk1> NorekId_NorekUsernameNo_RekNama_Bank
... smallintvarchar(20)integerlong varchar <pk><fk> Lokasi PostId_PostId_Lokasi integerfloat <pk,fk1>
<pk,fk2> Bahan Dasar PostId_PostId_Bahan_Dasar integerinteger <pk,fk1><pk,fk2>
Isi TransaksiId_Transaksilong varchar<pk,fk2>
Database aplikasi ini terdiri dari 10 Entity yaitu Posting, Kategori, Lokasi, Bahan Dasar, Tipe Tempat, User, Transaksi, Menu, Order, Komentar. Kesepuluh gambar ini saling berelasi satu sama lain seperti pada Gambar 3.3.
Entity Posting memiliki atribut Id_Post, Caption, Image, Rating, Posting_Date. Id_Post menyimpan key dalam format angka unik sebagai identifikator tiap posting yang ada dalam database. Atribut Caption menyimpan caption pada setiap posting dalam format string. Atribut Image menyimpan source gambar dalam format text. Atribut rating menyimpan rating posting dalam format number. Atribut Posting_Date menyimpan kapan posting tersebut di-upload dalam format Date & Time. Atribut Harga menyimpan harga makanan yang ada dalam posting yang dapat dijadikan menu dalam format number. Atribut Status_Menu menyimpan status posting apakah posting tersebut adalah sebuah menu atau bukan dalam format number.
Entity Lokasi digunakan untuk menyimpan lokasi pada gambar yang di- upload sehingga berelasi dengan Entity Posting. Id_Lokasi menyimpan key dalam format angka unik sebagai identifikator tiap lokasi yang ada. Atribut Nama_Lokasi menyimpan nama lokasi pada posting dalam format string. Atribut Jam_Buka untuk menyimpan jam buka setiap resto yang ada pada posting yang di-upload dalam format number. Atribut Jam_Tutup untuk menyimpan jam tutup setiap resto yang ada pada posting yang di-upload dalam format number. Atribut Longitude dan Latitude untuk mencatat lokasi agar dapat dibaca oleh google maps dalam format number.
Entity Bahan Dasar digunakan ketika user mencari posting dengan filtering bahan dasar. Id_Bahan_Dasar menyimpan key dalam format angka unik sebagai identifikator Bahan Dasar yang ada. Atribut Nama_Bahan_Dasar menyimpan nama bahan dasar dari sebuat posting dalam format string.
Entity Tipe tempat berelasi dengan Entity Lokasi digunakan untuk mengetahui tipe tempat tersebut dalam sebuah posting. Id_Tipe_Tempat menyimpan key dengan format angka unik sebagai identifikator tiap tipe tempat yang ada.
Entity User digunakan sebagai database untuk menyimpan biodata pemakai aplikasi. Username menyimpan key dalam format angka unik sebagai
identifikator tiap Username. Atribut Password digunakan untuk menyimpan password dalam format string. Entity Nama_Lengkap digunakan untuk menyimpan Nama Lengkap user dalam format string. Entity Alamat_Lengkap digunakan untuk menyimpan alamat tempat tinggal user dalam format string. Entity No_Handphone digunakan untuk menyimpan nomor telepon user dalam format number. Entity Status digunakan untuk menyimpan status dari user apakah user biasa atau resto owner dalam format String. Entity pangkat digunakan untuk menyimpan data pangkat dari setiap user (Newbie, Novice, Dll).
Entity Transaksi digunakan untuk setiap user yang melakukan pembelian.
Id_Transaksi menyimpan key dalam format angka unik sebagai identifikator tiap Transaksi. Atribut No_Rek untuk mencatat setiap no rekening user yang melakukan pembelian dalam format number. Atribut Nama_Bank digunakan untuk menyimpan nama bank yang terdaftar pada no rekening user dalam format string.
Atribut Status_Pembayaran untuk menyimpan status pembayaran yang ada pada no transaksi dalam format string. Atribut Transaksi_Date untuk menyimpan tanggal transaksi dalam format date. Atribut Komentar untuk menyimpan pesan yang ditulis oleh user dalam format string.
Entity Order digunakan untuk menyimpan setiap data pesanan yang dipesan.
Id_Order menyimpan key dalam format angka unik sebagai identifikator tiap Order dalam format number. Atribut Jumlah digunakan untuk menyimpan jumlah makanan yang dipesan dari setiap jenis makanan dalam format number. Atribut Subtotal untuk menyimpan subtotal sebelum ongkos kirim dan lain-lain dalam format number.
Entity Komentar digunakan untuk menyimpan data komentar pada setiap posting. Id_Komentar menyimpan key dalam format angka unik sebagai identifikator tiap komentar dalam format number. Atribut Komentar digunakan untuk menyimpan komentar yang dibuat dalam format string. Atribut Komentar_Date digunakan untuk menyimpan tanggal komentar dibuat dalam format date.
Entity Following memiliki User_Following. User_Following menyimpan
Entity Spam_Posting memiliki Spam_Dari. Spam_Dari menyimpan data user yang mereport akun tersebut dalam format string.
Tabel pada database
Berikut adalah tabel-tabel yang dibuat pada database server. Data ini dibuat berdasarkan rancangan ERD yang ada.
Tabel 3.2 Tabel user
No. Field Tipe Data Keterangan
1 Username varchar(20) Primary Key
2 Password varchar(34) Password dienkripsi menggunakan MD5
3 Nama_Lengkap varchar(100) Nama lengkap dari user 4 Alamat_Lengkap varchar(100) Alamat lengkap dari user
5 Kota varchar(40) Kota user
6 No_Handphone varchar(30) No Handphone user
7 Status varchar(30) Berisi Member/ Resto Owner
8 Pangkat varchar(30) Pangkat dari user berdasarkan rating 9 Profile_Picture varchar(30) Gambar yang digunakan pada profil
sendiri
10 Ongkir Float Ongkos kirim yang dapat diedit
khusus oleh Resto Owner
11 Block int(11) Berisi Integer 0/1 yang digunakan Admin untuk block user
Tabel 3.3 Tabel transaksi
No. Field Tipe Data Keterangan
1 Id_Transaksi int(11) Primary key, Auto Increment
2 Pembeli varchar(20)
3 Penjual varchar(20)
4 No_Rek varchar(50) No Rekening Penjual 5 Nama_Bank varchar(30) Nama Bank Penjual
6 Status_Pembayaran varchar(50) Status Pembayaran yang dapat diedit oleh Resto Owner
7 Transaksi_Date timestamp
8 Komentar varchar(200) Catatan yang diberikan pembeli
9 Total int(11) Total uang yang harus dibayar
10 Nama varchar(30) Nama pembeli
11 Alamat varchar(100) Alamat pembeli 12 Telepon varchar(30) Telepon pembeli
Tabel 3.4 Tabel tipe_tempat
No. Field Tipe Data Keterangan
1 Id_Tipe_Tempat int(11) Primary key, Auto Increment 2 Nama_Tipe_Tempat varchar(30) Nama tipe tempat (restaurant,
warung, dan lain-lain) 3 Id_Post int(11) Relasi dari tabel posting
Tabel 3.5 Tabel spam_posting
No. Field Tipe Data Keterangan
1 Id_Spam int(11) Primary key, Auto Increment 2 Id_Post int(11) Relasi dari tabel posting
3 Spam_Dari varchar(20) Username yang memberikan report spam
Tabel 3.6 Tabel posting
No. Field Tipe Data Keterangan
1 Id_Post int(11) Primary key, Auto increment 2 Username varchar(50) Relasi dari tabel posting 3 Nama_Makanan varchar(100)
4 Caption varchar(100)
5 Image varchar(50) Source image
6 Posting_Date timestamp
7 Harga double
8 Status_Menu int(11) Status
9 Jenis_Masakan varchar(20) Jenis makanan (Western, Italian, Indonesian, dan lain-lain)
10 Featured int(11) Berisi Integer 0/1 yang digunakan Admin untuk mengatur featured post
Tabel 3.7 Tabel notif
No. Field Tipe Data Keterangan
1 id_notif int(11) Primary key, Auto increment 2 username varchar(50) Relasi dari tabel user
3 text varchar(100) Isi notifikasi
4 tipe varchar(100) Tipe (follow, like, dan lain-lain) 5 link varchar(50) Link untuk mengarahkan user
Tabel 3.8 Tabel norek
No. Field Tipe Data Keterangan
1 Id_Norek int(11) Primary key, Auto increment
Tabel 3.9 Tabel lokasi
No. Field Tipe Data Keterangan
1 Id_Posting int(11) Relasi dari tabel posting 2 Id_Lokasi int(11) Primary key, Auto increment 3 Nama_Lokasi varchar(50) Nama tempat
4 Jam_Buka time
5 Jam_Tutup time
6 Longitude double
7 Latitude double
8 Kota varchar(50)
Tabel 3.10 Tabel komentar
No. Field Tipe Data Keterangan
1 Id_Komentar int(11) Primary key, Auto increment
2 Id_Post int(11)
3 Username varchar(50) Relasi dari tabel user
4 Komentar varchar(100)
5 Komentar_Date datetime
Tabel 3.11 Tabel item
No. Field Tipe Data Keterangan
1 Id_Item int(11) Primary key, Auto increment
2 Jumlah int(20) Jumlah item
3 Id_Post int(11) Relasi dari tabel posting
Tabel 3.12 Tabel isi_transaksi
No. Field Tipe Data Keterangan
1 Id_Transaksi int(11) Realasi dari tabel transaksi 2 Id_Item int(11) Relasi dari tabel item
3 Id_Isi_Transaksi int(11) Primary key, Auto increment
Tabel 3.13 Tabel inclike
No. Field Tipe Data Keterangan
1 Id_post int(11)
2 username varchar(50) Relasi dari tabel username 3 id_like int(11) Primary key, Auto increment
4 like_unlike int(20) Berisi angka 0/1, menentukan apakah like unlike
Tabel 3.14 Tabel following
No. Field Tipe Data Keterangan
1 Username varchar(20) Relasi dari tabel username 2 User_Following varchar(20) Relasi dari tabel username 3 Id_Following int(11) Primary key, Auto increment
Tabel 3.15 Tabel bahan_dasar
No. Field Tipe Data Keterangan
1 Id_Bahan_Dasar varchar(20) Primary key, Auto increment 2 Nama_Bahan_Dasar varchar(20) Nama Bahan Dasar (ayam, sapi,
babi, dan lain-lain)
Tabel 3.16 Tabel bahandasarposting
No. Field Tipe Data Keterangan
1 Id_Post int(11) Relasi dari tabel posting 2 Id_Bahan_Dasar int(11) relasi dari tabel bahan dasar 3 Id_Bahan_Dasar_Posting int(11) Primary key, Auto increment
Desain Flowchart Program
Desain flowchart program ini dibuat untuk mengetahui alur jalan program untuk menjalankan fitur-fitur yang ada dari setiap halaman.
Melakukan Login
Login digunakan untuk membatasi hak akses dari setiap user, sehingga setiap user hanya dapat menggunakan usernya sendiri. Login juga menentukan siapa user tersebut sehingga user tersebut dapat melakukan action sesuai apa yang jadi kapasitasnya. Flowchart dapat dilihat pada Gambar 3.5.
Start
Mengisi username dan password
Mencocokan dengan data
server Menekan tombol
login
berhasil Notifikasi gagal
Masuk Halaman Feed
End Yes
No
Gambar 3.5. Flowchart login Melakukan Signup
Signup digunakan untuk mendaftarkan biodatanya untuk menjadi user dari aplikasi ini, sehingga username dapat mendapatkan username dan password yang dapat dipakai ketika user login dan ingin memakai aplikasi. Flowchart dapat dilihat pada Gambar 3.6
Start
Menekan tombol signup
Mengisi data pada form signup
Valid
Simpan pada database
Kembali pada halaman login
End
Notifkasi No
Yes Kembali ke
halaman utama End
Menekan tombol
Melakukan pengecekan data kembar Yes
No
Gambar 3.6. Flowchart Signup Melakukan Pembelian
Pembelian dapat dilakukan jika user ingin membeli makanan dan resto memiliki sistem delivery order sendiri, jadi aplikasi ini memudahkan resto dan pembeli dalam proses transaksi sampai barang diterima. Flowchart dapat dilihat pada Gambar 3.7.
Start
Tekan menu
Pilih menu
Tekan checkout pada keranjang
Pindah halaman checkout
Isi form pembelian
Submit
Pengiriman dana
Cek dana Status pembelian diganti
Resto menerima pesanan
End No Yes
Gambar 3.7. Flowchart Pembelian
Desain Antarmuka Halaman Login
Gambar 3.8. Gambar Desain Login
Pada Gambar 3.8 berikut adalah gambar desain dari halaman login. A merupakan form yang digunakan untuk mengisi data username. B merupakan tombol untuk masuk ke halaman awal setelah username dan password valid. C merupakan tombol untuk melakukan register bagi pengguna yang belum memiliki id.
Halaman Register
Gambar 3.9. Gambar desain register
Pada Gambar 3.9 merupakan desain dari halaman register. A merupakan form untuk mengisi username. B merupakan option untuk memilih status dari pengguna. C merupakan tombol submit untuk mendaftarkan diri setelah semua form terisi.
Halaman Utama
Gambar 3.10. Desain Halaman Utama
Seperti terlihat pada gambar 3.10, A merupakan tombol untuk melakukan advanced search, B merupakan tombol untuk melakukan pencarian makanan yang terdekat dengan lokasi user. C merupakan tombol untuk meng-upload gambar baru melalui galery maupun camera. D merupakan tombol untuk melihat notifikasi. E merupakan tombol untuk melihat profil user dan posting yang telah diuplaod. F merupakan tombol untuk option. G merupakan tombol untuk follow user yang meng-upload posting. H merupakan tombol untuk memberikan rating positif pada sebuah posting.. I merupakan tombol untuk memberikan rating negatif pada sebuah posting.
Halaman Nearme
Gambar 3.11. Desain halaman nearme
Seperti terlihat pada gambar 3.11 , A merupakan tombol untuk kembali ke halaman utama, B merupakan tombol untuk melakukan advanced search, C merupakan tombol untuk melakukan pencarian makanan yang terdekat dengan lokasi user. D merupakan tombol untuk meng-upload gambar baru melalui galery maupun camera. E merupakan tombol untuk melihat notifikasi. F merupakan tombol untuk melihat profil user dan posting yang telah di-upload. G merupakan tombol untuk option. H merupakan tombol untuk membuka posting yang memiliki lokasi terdekat dengan lokasi user.
Halaman Notifikasi
Gambar 3.12. Desain Halaman Notifikasi
Seperti terlihat pada Gambar 3.12, A merupakan tombol untuk kembali ke halaman utama, B merupakan tombol untuk melakukan advanced search, C merupakan tombol untuk melakukan pencarian makanan yang terdekat dengan lokasi user. D merupakan tombol untuk meng-upload gambar baru melalui gallery maupun camera. E merupakan tombol untuk melihat notifikasi. F merupakan tombol untuk melihat profil user dan posting yang telah di-upload. G merupakan tombol untuk option. H merupakan tombol untuk membuka halaman yang dituju sesuai notifikasi yang ditekan.
Halaman Profil
Gambar 3.13. Desain halaman profil
Seperti terlihat pada gambar 3.13, A merupakan tombol untuk kembali ke halaman utama, B merupakan tombol untuk melakukan advanced search, C merupakan tombol untuk melakukan pencarian makanan yang terdekat dengan lokasi user. D merupakan tombol untuk meng-upload gambar baru melalui galery maupun camera. E merupakan tombol untuk melihat notifikasi. F merupakan tombol untuk melihat isi keranjang belanja dan posting yang telah di-upload. G
Pada halaman profil, terdapat nilai rate yang digunakan sebagai tolak ukur pangkat dari setiap user. Ketika user memiliki rating diatas 4,5 user tersebut memiliki pangkat Intermediate, jika user memiliki rating antara 3,5 sampai 4,5 pangkatnya adalah beginner, jika user memiliki rating antar 2,5 sampai 3,5 maka pangkatnya adalah novice, jika user memiliki rating dibawah 2,5 maka pangkatnya adalah newbie.
Halaman Admin
Gambar 3.14. Desain view user
Pada gambar 3.14, Berikut adalah tampilan dari admin ketika melihat data user, A merupakan tombol untuk menambah user baru, B merupakan tombol untuk mengatur jumlah list user yang ingin ditampilkan pada sebuah halaman, C merupakan kolom untuk melakukan pencarian. D merupakan tombol untuk sorting ascending maupun descending. E merupakan tombol untuk melakukan edit pada user. F merupakan tombol untuk menghapus user. G merupakan tombol untuk melakukan pemblokiran pada user yang melakukan pelanggaran. H merupakan tombol untuk melihat halaman sebelumnya pada tabel. I merupakan tombol untuk mengganti halaman list user pada tabel. J merupakan tombol untuk melihat halaman selanjutnya pada tabel.
Gambar 3.15. Gambar Desain edit user
Pada gambar 3.15, Merupakan tampilan administrator ketika melakukan edit pada user. A merupakan kolom untuk menggganti data user. B merupakan tombol untuk keluar dari form edit. C merupakan tombol untuk menyimpan data.
Halaman Kategori
Gambar 3.16. Gambar desain kategori
Pada gambar 3.16 merupakan tampilan dari menu kategori yang dapat dipilih sesuai keinginan. A merupakan tombol untuk keluar dari menu kategori. B
pengguna. C merupakan tombol untuk melihat posting yang terpilih oleh admin. D merupakan tombol untuk melihat posting yang memiliki best rating.
Halaman advanced search
Gambar 3.17. Desain advanced search
Pada Gambar 3.17 merupakan hasil desain dari tampilan advanced search yang digunakan untuk melakukan pencarian menggunakan filter yang ada. A merupakan form untuk pengisian keyword pencarian. B merupakan option untuk melakukan pemilihan jenis makanan. C merupakan checkbox untuk melakukan pencarian bahan dasar. D merupakan form untuk mengisi nama kota yang dicari. E merupakan option untuk memilih tipe tempat. F merupakan tombol selesai setelah mengisi pencarian yang diinginkan.
Desain Ikon dan Logo
Nama Foodgram terinspirasi dengan aplikasi Instagram yang fokus untuk posting foto dan video dalam media sosial, begitu juga dengan foodgram yang mendukung para penggemar culinary untuk saling berbagi dokumentasi dalam aplikasi foodgram sehingga memudahkan penggemar culinary untuk mengetahui info-info terbaru tentang kuliner di Indonesia. Border yang melingkar digambarkan
gambar ikan di tengah menggambarkan sebagai objek makanan yang difoto oleh kamera. Desain aplikasi dapat dilihat pada Gambar 3.18
Gambar 3.18. Logo Aplikasi Foodgram
