Perancangan Sistem Perancangan Antar Muka Untuk Pengunjung

3.1.2.6 Skema Relasi

Relasi antar tabel merupakan gabungan antar file yang mempunyai kunci utama yang sama, sehingga file-file tersebut menjadi satu kesatuan yang dihubungkan oleh field kunci Primary Key. Pada proses ini elemen-elemen data dikelompokkan menjadi satu file database beserta entitas dan hubungannya. Skema relasi aplikasi Virtual Mal dapat dilihat pada gambar 3.15 Gambar 3.15 Skema Relasi Tabel

3.2 Perancangan Sistem

Perancangan sistem merupakan bagian dari metedologi penelitian dan pengembangan suatu perangkat lunak yang dilakukan setelah tahap analisis yang bertujuan untuk memberikan gambaran secara terperinci.

3.2.1 Perancangan Struktur Menu

Perancangan struktur menu berisikan menu dan submenu yang berfungsi memudahkan user didalam menggunakan sistem. Menu-menu tersebut dibagi berdasarkan hak akses masing-masing user. Berikut ini gambaran mengenai struktur menu Aplikasi Virtual Mal. MENU AWAL HOME SERVICES ABOUT CONTACT COMMENT TUTORIAL PRODUK Gambar 3.16 Struktur Menu Halaman Utama MENU ADMIN HOME SETTING MALL LOGOUT LOKASI SEWA KATEGORI PRODUK ACCOUNT ADMIN Gambar 3.17 Struktur Menu Halaman Admin MENU MEMBER HOME SERVICES MALL LOGOUT UPLOAD TRANSAKSI COMMENT UPLOAD TRANSAKSI COMMENT Gambar 3.18 Struktur Menu Halaman Member Gambar 3.19 Struktur Menu Halaman Pemilik Toko

3.2.2 Perancangan Antar Muka

Perancangan antar muka bertujuan untuk memberikan gambaran tentang aplikasi yang akan dibangun. Sehingga akan mempermudah dalam mengimplementasikan aplikasi. Dan juga akan memudahkan pembuatan aplikasi. Perancangan ini akan diimplementasikan menjadi sebuah program yang utuh dan dapat digunakan. Rancangan aplikasi online fashion market yang akan dibuat sebagai berikut:

3.2.2.1 Perancangan Antar Muka Program Aplikasi

Berikut ini adalah tampilan antar muka yang dirancang pada aplikasi virtual mal: MENU PEMILIK TOKO HOME SERVICES LOKASI SEWA LOGOUT UPLOAD TRANSAKSI COMMENT

a. Perancangan Antar Muka Untuk Pengunjung

LOGO PROFILE KOMENTAR FOOTER LOGI N PASSWORD CREATE ACCOUNT M001 USERNAME UKURAN LAYAR UTAMA DEFAULT 1024 X 768 FONT UKURAN 12 HOME ABOUT SERVICE CONTACT TUTORIAL COMMENT PRODUK - Klik home maka akan tampil ke menu home M001 - Klik about maka akan tampil ke menu about M002 - Klik service tutorial maka akan tampil ke menu service-tutorial M003 - Klik service comment maka akan tampil ke menu service- comment M004 - Klik service produk maka akan tampil ke menu service-produk M005 - Klik home maka akan tampil ke menu contact M006 -Klik Create Acoount akan tampil menu create account M007 -KLIK LOGIN jika data valid sebagai member akan tampil menu M008,jika data valid sebagai pemilik toko akan tampil menu M009, jika gagal kembali ke M001 Gambar 3.20 Tampilan Menu Utama index ABOUT KOMENTAR FOOTER LOGI N PASSWORD CREATE ACCOUNT HOME M002 ABOUT SERVICE CONTACT UKURAN LAYAR UTAMA DEFAULT 1024 X 768 FONT UKURAN 12 TUTORIAL COMMENT PRODUK - Klik home maka akan tampil ke menu home M001 - Klik about maka akan tampil ke menu about M002 - Klik service tutorial maka akan tampil ke menu service-tutorial M003 - Klik service comment maka akan tampil ke menu service- comment M004 - Klik service produk maka akan tampil ke menu service-produk M005 - Klik home maka akan tampil ke menu contact M006 -Klik Create Acoount akan tampil menu create account M007 -KLIK LOGIN jika data valid sebagai member akan tampil menu M008,jika data valid sebagai pemilik toko akan tampil menu M009, jika gagal kembali ke M001 Gambar 3.21 Tampilan Menu About TEXT GAMBAR GAMBAR FOOTER LOGI N PASSWORD CREATE ACCOUNT M003 USERNAME UKURAN LAYAR UTAMA DEFAULT 1024 X 768 FONT UKURAN 12 HOME ABOUT SERVICE CONTACT TUTORIAL COMMENT PRODUK - Klik home maka akan tampil ke menu home M001 - Klik about maka akan tampil ke menu about M002 - Klik service tutorial maka akan tampil ke menu service-tutorial M003 - Klik service comment maka akan tampil ke menu service- comment M004 - Klik service produk maka akan tampil ke menu service-produk M005 - Klik home maka akan tampil ke menu contact M006 -Klik Create Acoount akan tampil menu create account M007 -KLIK LOGIN jika data valid sebagai member akan tampil menu M008,jika data valid sebagai pemilik toko akan tampil menu M009, jika gagal kembali ke M001 Gambar 3.22 Tampilan Menu Tutorial FOOTER LOGI N PASSWORD CREATE ACCOUNT M004 USERNAME UKURAN LAYAR UTAMA DEFAULT 1024 X 768 FONT UKURAN 12 HOME ABOUT SERVICE CONTACT TUTORIAL COMMENT PRODUK KOLOM KOMENTAR KOMENTAR - Klik home maka akan tampil ke menu home M001 - Klik about maka akan tampil ke menu about M002 - Klik service tutorial maka akan tampil ke menu service-tutorial M003 - Klik service comment maka akan tampil ke menu service- comment M004 - Klik service produk maka akan tampil ke menu service-produk M005 - Klik home maka akan tampil ke menu contact M006 -Klik Create Acoount akan tampil menu create account M007 -KLIK LOGIN jika data valid sebagai member akan tampil menu M008,jika data valid sebagai pemilik toko akan tampil menu M009, jika gagal kembali ke M001 Gambar 3.23 Tampilan Menu Comment FOOTER LOGI N PASSWORD CREATE ACCOUNT HOME M005 ABOUT SERVICE CONTACT UKURAN LAYAR UTAMA DEFAULT 1024 X 768 FONT UKURAN 12 TUTORIAL COMMENT PRODUK GAMBAR PRODUK - Klik home maka akan tampil ke menu home M001 - Klik about maka akan tampil ke menu about M002 - Klik service tutorial maka akan tampil ke menu service-tutorial M003 - Klik service comment maka akan tampil ke menu service- comment M004 - Klik service produk maka akan tampil ke menu service-produk M005 - Klik home maka akan tampil ke menu contact M006 -Klik Create Acoount akan tampil menu create account M007 -KLIK LOGIN jika data valid akan tampil menu M008, jika gagal kembali ke M001 DATA PRODUK Gambar 3.24 Tampilan Menu Produk FOOTER LOGI N PASSWORD CREATE ACCOUNT HOME M006 ABOUT SERVICE CONTACT UKURAN LAYAR UTAMA DEFAULT 1024 X 768 FONT UKURAN 12 TUTORIAL COMMENT PRODUK CONTACT - Klik home maka akan tampil ke menu home M001 - Klik about maka akan tampil ke menu about M002 - Klik service tutorial maka akan tampil ke menu service-tutorial M003 - Klik service comment maka akan tampil ke menu service- comment M004 - Klik service produk maka akan tampil ke menu service-produk M005 - Klik home maka akan tampil ke menu contact M006 -Klik Create Acoount akan tampil menu create account M007 -KLIK LOGIN jika data valid sebagai member akan tampil menu M008,jika data valid sebagai pemilik toko akan tampil menu M009, jika gagal kembali ke M001 Gambar 3.25 Tampilan Menu Contact FOOTER CREATE ACCOUNT SEBAGAI MEMBER SEBAGAIPEMILIK TOKO M007 UKURAN LAYAR UTAMA DEFAULT 1024 X 768 FONT UKURAN 12 HOME ABOUT SERVICE CONTACT TUTORIAL COMMENT PRODUK GAMBAR - Klik home maka akan tampil ke menu home M001 - Klik about maka akan tampil ke menu about M002 - Klik service tutorial maka akan tampil ke menu service-tutorial M003 - Klik service comment maka akan tampil ke menu service- comment M004 - Klik service produk maka akan tampil ke menu service-produk M005 - Klik home maka akan tampil ke menu contact M006 -Klik Create Acoount akan tampil menu create account M007 - Klik sebagai member akan muncul menu create memberM010 - Klik sebagai pemilik toko akan muncul menu create pemilik toko M011 Gambar 3.26 Tampilan Menu Create Account FOOTER M010 UKURAN LAYAR UTAMA DEFAULT 1024 X 768 FONT UKURAN 12 HOME ABOUT SERVICE CONTACT TUTORIAL COMMENT PRODUK - Klik home maka akan tampil ke menu home M001 - Klik about maka akan tampil ke menu about M002 - Klik service tutorial maka akan tampil ke menu service-tutorial M003 - Klik service comment maka akan tampil ke menu service- comment M004 - Klik service produk maka akan tampil ke menu service-produk M005 - Klik home maka akan tampil ke menu contact M006 -Klik Submit jika data valid maka akan tampil menu Home M001 -Klik Cancel jika data valid maka akan tampil menu Create Account M007 USERNAME PASSWORD NAMA ALAMAT PROVINSI CONTACT EMAIL UPLOAD FOTO CREATE ACCOUNT MEMBER CHOOSE FILE SUBMIT CANCEL Gambar 3.27 Tampilan Menu Create Member FOOTER HOME M011 ABOUT SERVICE CONTACT UKURAN LAYAR UTAMA DEFAULT 1024 X 768 FONT UKURAN 12 TUTORIAL COMMENT PRODUK USERNAME PASSWORD NAMA PERUSAHAAN ALAMAT PROVINSI CONTACT EMAIL UPLOAD FOTO NOMER REKENING CREATE ACCOUNT PEMILIK TOKO CHOOSE FILE SUBMIT CANCEL - Klik home maka akan tampil ke menu home M001 - Klik about maka akan tampil ke menu about M002 - Klik service tutorial maka akan tampil ke menu service-tutorial M003 - Klik service comment maka akan tampil ke menu service- comment M004 - Klik service produk maka akan tampil ke menu service-produk M005 - Klik home maka akan tampil ke menu contact M006 -Klik Submit jika data valid maka akan tampil menu Home M001 -Klik Cancel jika data valid maka akan tampil menu Create Account M007 Gambar 3.28 Tampilan Menu Create Pemilik Toko

b. Perancangan Antar Muka Untuk Member