3.5.6 Perancangan Antarmuka Pengurus
A. Pengurus
1. Perancangan Antarmuka Login Pengurus Berikut dapat dilihat perancangan antarmuka login pengurus dari
pembangunan aplikasi e-commerce di toko dbeauty shop yang tercantum pada
gambar 3.58dibawah ini:
Login Pengurus H01
Klik Ke Halaman Website Menuju Ke F01
Klik Login Menuju Ke H02
Klik Lupa Password Menuju Ke H03
Email
Login Kata Sandi
Lupa Password ?
Gambar 3.58 Perancangan Antarmuka Login Pengurus
2. Perancangan Antarmuka Beranda Berikut dapat dilihat perancangan antarmuka Beranda dari pembangunan
aplikasi e-commerce di toko dbeauty shop yang tercantum pada gambar 3.59
dibawah ini:
H02 Operator
HALAMAN DEPAN Branda
PENGURUS DBEAUTY-SHOP.COM Management Data
Laporan Hallo: Pengurus| Logout
Kontak Ada 0 kontak yang belum dibaca
Member Ada 0 member yang aktif dan 0 member yang belum aktif
2011 Dbeauty-shop.com Klik Beranda Menuju Ke H02
Klik Operator Menuju Ke H03 Klik Management Data Menuju Ke H04
Klik Management Transaksi Menuju Ke H05
Klik Laporan Menuju Ke H06 Klik Logout menuju ke H01
Klik Produk Menuju H07 Klik Jasa Pengiriman Menuju H08
Klik Member Menuju H09 Klik Kota menuju ke H10
Klik Provinsi menuju ke H11 Klik Kontak menuju ke H12
Klik Kategori Barang Menuju H13 Klik Jenis Pengiriman Menuju Ke H14
Klik Ongkos Kirim Menuju Ke H15 Klik Invoice Menuju H16
Klik Laporan Penjualan Menuju H17 Klik Laporan Produk Menuju H18
Selamat Datang Anda telah login ke menu pengelolaan website penjualan online Dbeauty Shop Oriflame Swedish Cosmetic, silahkan
gunakan hak akses Anda dengan sebaik-baiknya. Silahkan pilih menu-menu yang ada di atas untuk melakukan pengolahan.
Jika Anda sudah selesai, jangan lupa untuk mengklik tombol Logout yang ada di kanan atas. Management Transaksi
Hari,tanggal-bulan-tahun
Gambar 3.59 Perancangan Antarmuka Beranda
3. Perancangan Antarmuka Pengurus Berikut dapat dilihat perancangan antarmuka pengurus dari pembangunan
aplikasi e-commerce di toko dbeauty shop yang tercantum pada gambar 3.60
dibawah ini:
H03 Pengurus
Branda PENGURUS DBEAUTY-SHOP.COM
Management Data Laporan
Hallo: Pengurus| Logout
2011 Dbeauty-shop.com Klik Beranda Menuju Ke H02
Klik Operator Menuju Ke H03 Klik Management Data Menuju Ke H04
Klik Management Transaksi Menuju Ke H05
Klik Laporan Menuju Ke H06 Klik Logout menuju ke H01
Klik Produk Menuju H07 Klik Jasa Pengiriman Menuju H08
Klik Member Menuju H09 Klik Kota menuju ke H10
Klik Provinsi menuju ke H11 Klik Kontak menuju ke H12
Klik Kategori Barang Menuju H13 Klik Jenis Pengiriman Menuju Ke H14
Klik Ongkos Kirim Menuju Ke H15 Klik Invoice Menuju H16
Klik Laporan Penjualan Menuju H17 Klik Laporan Produk Menuju H18
Management Transaksi Hari,tanggal-bulan-tahun
EDIT PROFIL PENGURUS Nama Lengkap :
Simpan Email :
YM : Password :
Konfirmasi Password :
Gambar 3.60 Perancangan Antarmuka Pengurus
4. Perancangan Antarmuka Management Data Berikut dapat dilihat perancangan antarmuka management data dari
pembangunan aplikasi e-commerce di toko dbeauty shop yang tercantum pada
gambar 3.61 dibawah ini:
H04 Pengurus
Branda PENGURUS DBEAUTY-SHOP.COM
Management Data Laporan
Hallo: Pengurus| Logout
2011 Dbeauty-shop.com Klik Beranda Menuju Ke H02
Klik Operator Menuju Ke H03 Klik Management Data Menuju Ke H04
Klik Management Transaksi Menuju Ke H05
Klik Laporan Menuju Ke H06 Klik Logout menuju ke H01
Klik Produk Menuju H07 Klik Jasa Pengiriman Menuju H08
Klik Member Menuju H09 Klik Kota menuju ke H10
Klik Provinsi menuju ke H11 Klik Kontak menuju ke H12
Klik Kategori Barang Menuju H13 Klik Jenis Pengiriman Menuju Ke H14
Klik Ongkos Kirim Menuju Ke H15 Klik Invoice Menuju H16
Klik Laporan Penjualan Menuju H17 Klik Laporan Produk Menuju H18
Management Transaksi Hari,tanggal-bulan-tahun
HALAMAN DEPAN
Kontak Member
Selamat Datang Anda telah login ke menu pengelolaan website penjualan online Dbeauty Shop Oriflame Swedish Cosmetic, silahkan
gunakan hak akses Anda dengan sebaik-baiknya. Silahkan pilih menu-menu yang ada di atas untuk melakukan pengolahan.
Jika Anda sudah selesai, jangan lupa untuk mengklik tombol Logout yang ada di kanan atas. Ada 0 kontak yang belum dibaca
Ada 0 member yang aktif dan 0 member yang belum aktif Produk
Jasa Pengiriman Member
Kota Provinsi
Kontak Jenis Pengiriman
Ongkos Kirim Kategori Produk
Gambar 3.61 Perancangan Antarmuka Management Data
5. Perancangan Antarmuka Management Data Berikut dapat dilihat perancangan antarmuka management data dari
pembangunan aplikasi e-commerce di toko dbeauty shop yang tercantum pada
gambar 3.62 dibawah ini:
H05 Pengurus
Branda PENGURUS DBEAUTY-SHOP.COM
Management Data Laporan
Hallo: Operator | Logout
2011 Dbeauty-shop.com Klik Beranda Menuju Ke H02
Klik Operator Menuju Ke H03 Klik Management Data Menuju Ke H04
Klik Management Transaksi Menuju Ke H05
Klik Laporan Menuju Ke H06 Klik Logout menuju ke H01
Klik Produk Menuju H07 Klik Jasa Pengiriman Menuju H08
Klik Member Menuju H09 Klik Kota menuju ke H10
Klik Provinsi menuju ke H11 Klik Kontak menuju ke H12
Klik Kategori Barang Menuju H13 Klik Jenis Pengiriman Menuju Ke H14
Klik Ongkos Kirim Menuju Ke H15 Klik Invoice Menuju H16
Klik Laporan Penjualan Menuju H17 Klik Laporan Produk Menuju H18
Management Transaksi Hari,tanggal-bulan-tahun
HALAMAN DEPAN
Kontak Member
Selamat Datang Anda telah login ke menu pengelolaan website penjualan online Dbeauty Shop Oriflame Swedish Cosmetic, silahkan
gunakan hak akses Anda dengan sebaik-baiknya. Silahkan pilih menu-menu yang ada di atas untuk melakukan pengolahan.
Jika Anda sudah selesai, jangan lupa untuk mengklik tombol Logout yang ada di kanan atas. Ada 0 kontak yang belum dibaca
Ada 0 member yang aktif dan 0 member yang belum aktif Invoice
Retur Retur Alasan
Gambar 3.62 Perancangan Antarmuka Management Data
6. Perancangan Antarmuka Laporan Berikut dapat dilihat perancangan antarmuka Laporan dari pembangunan
aplikasi e-commerce di toko dbeauty shop yang tercantum pada gambar 3.63
dibawah ini:
H06 Pengurus
Branda PENGURUS DBEAUTY-SHOP.COM
Management Data Laporan
Hallo: Pengurus| Logout
2011 Dbeauty-shop.com Klik Beranda Menuju Ke H02
Klik Operator Menuju Ke H03 Klik Management Data Menuju Ke H04
Klik Management Transaksi Menuju Ke H05
Klik Laporan Menuju Ke H06 Klik Logout menuju ke H01
Klik Produk Menuju H07 Klik Jasa Pengiriman Menuju H08
Klik Member Menuju H09 Klik Kota menuju ke H10
Klik Provinsi menuju ke H11 Klik Kontak menuju ke H12
Klik Kategori Barang Menuju H13 Klik Jenis Pengiriman Menuju Ke H14
Klik Ongkos Kirim Menuju Ke H15 Klik Invoice Menuju H16
Klik Laporan Penjualan Menuju H17 Klik Laporan Produk Menuju H18
Management Transaksi Hari,tanggal-bulan-tahun
HALAMAN DEPAN
Kontak Member
Selamat Datang Anda telah login ke menu pengelolaan website penjualan online Dbeauty Shop Oriflame Swedish Cosmetic, silahkan
gunakan hak akses Anda dengan sebaik-baiknya. Silahkan pilih menu-menu yang ada di atas untuk melakukan pengolahan.
Jika Anda sudah selesai, jangan lupa untuk mengklik tombol Logout yang ada di kanan atas. Ada 0 kontak yang belum dibaca
Ada 0 member yang aktif dan 0 member yang belum aktif Laporan Penjualan
Laporan Produk
Gambar 3.63 Perancangan Antarmuka Laporan
7. Perancangan Antarmuka Produk Berikut dapat dilihat perancangan antarmuka Produk dari pembangunan
aplikasi e-commerce di toko dbeauty shop yang tercantum pada gambar 3.64 dibawah ini:
H07 Pengurus
Branda PENGURUS DBEAUTY-SHOP.COM
Management Data Laporan
Hallo: Pengurus| Logout
2011 Dbeauty-shop.com Klik Beranda Menuju Ke H02
Klik Operator Menuju Ke H03 Klik Management Data Menuju Ke H04
Klik Management Transaksi Menuju Ke H05
Klik Laporan Menuju Ke H06 Klik Logout menuju ke H01
Management Transaksi Hari,tanggal-bulan-tahun
Produk Tambah Produk
Diskon Nama Produk
Harga Stok
Perintah Hapus
Kategori Detail
Edit
Gambar 3.64 Perancangan Antarmuka Produk
8. Perancangan Antarmuka Jasa Pengiriman Berikut dapat dilihat perancangan antarmuka edit profil dari pembangunan
aplikasi e-commerce di toko dbeauty shop yang tercantum pada gambar 3.65 dibawah ini:
H08 Pengurus
Branda PENGURUS DBEAUTY-SHOP.COM
Management Data Laporan
Hallo: Pengurus| Logout
2011 Dbeauty-shop.com Klik Beranda Menuju Ke H02
Klik Operator Menuju Ke H03 Klik Management Data Menuju Ke H04
Klik Management Transaksi Menuju Ke H05
Klik Laporan Menuju Ke H06 Klik Logout menuju ke H01
Management Transaksi Hari,tanggal-bulan-tahun
Jasa Pengiriman Tambah Jasa Pengiriman
Aksi Edit Hapus
Nama Jasa Pengiriman No
Gambar 3.65 Perancangan Antarmuka Jasa Pengiriman
9. Perancangan Antarmuka Member Berikut dapat dilihat perancangan antarmuka member dari pembangunan
aplikasi e-commerce di toko dbeauty shop yang tercantum pada gambar 3.66 dibawah ini:
H09 Pengurus
Branda PENGURUS DBEAUTY-SHOP.COM
Management Data Laporan
Hallo: Pengurus| Logout
2011 Dbeauty-shop.com Klik Beranda Menuju Ke H02
Klik Operator Menuju Ke H03 Klik Management Data Menuju Ke H04
Klik Management Transaksi Menuju Ke H05
Klik Laporan Menuju Ke H06 Klik Logout menuju ke H01
Management Transaksi Hari,tanggal-bulan-tahun
Member Email
No Status
Kota Aksi
Detail Hapus
Nama Member
Gambar 3.66 Perancangan Antarmuka Member
10. Perancangan Antarmuka Kota Berikut dapat dilihat perancangan antarmuka kota dari pembangunan aplikasi
e-commerce di toko dbeauty shop yang tercantum pada gambar 3.67 dibawah ini:
H10 Pengurus
Branda PENGURUS DBEAUTY-SHOP.COM
Management Data Laporan
Hallo: Pengurus | Logout
2011 Dbeauty-shop.com Klik Beranda Menuju Ke H02
Klik Operator Menuju Ke H03 Klik Management Data Menuju Ke H04
Klik Management Transaksi Menuju Ke H05
Klik Laporan Menuju Ke H06 Klik Logout menuju ke H01
Management Transaksi Hari,tanggal-bulan-tahun
Kota
Provinsi No
Aksi edit
Hapus Nama Kota
Tambah Kota
Gambar 3.67 Perancangan Antarmuka Kota
11. Perancangan Antarmuka Provinsi Berikut dapat dilihat perancangan antarmuka provinsi dari pembangunan
aplikasi e-commerce di toko dbeauty shop yang tercantum pada gambar 3.68 dibawah ini:
H11 Pengurus
Branda PENGURUS DBEAUTY-SHOP.COM
Management Data Laporan
Hallo: Pengurus| Logout
2011 Dbeauty-shop.com Klik Beranda Menuju Ke H02
Klik Operator Menuju Ke H03 Klik Management Data Menuju Ke H04
Klik Management Transaksi Menuju Ke H05
Klik Laporan Menuju Ke H06 Klik Logout menuju ke H01
Management Transaksi Hari,tanggal-bulan-tahun
Provinsi No
Aksi edit
Hapus Nama Provinsi
Tambah Provinsi
Gambar 3.68 Perancangan Antarmuka Provinsi
12. Perancangan Antarmuka Kontak Berikut dapat dilihat perancangan antarmuka kontak dari pembangunan
aplikasi e-commerce di toko dbeauty shop yang tercantum pada gambar 3.69 dibawah ini:
H12 Pengurus
Branda PENGURUS DBEAUTY-SHOP.COM
Management Data Laporan
Hallo: Pengurus| Logout
2011 Dbeauty-shop.com Klik Beranda Menuju Ke H02
Klik Operator Menuju Ke H03 Klik Management Data Menuju Ke H04
Klik Management Transaksi Menuju Ke H05
Klik Laporan Menuju Ke H06 Klik Logout menuju ke H01
Management Transaksi Hari,tanggal-bulan-tahun
Kontak No
Aksi hapus
Nama Kontak Email
Telepon Tanggal
Dibaca Baca
Gambar 3.69 Perancangan Antarmuka Kontak
13. Perancangan Antarmuka Kategori Produk Berikut dapat dilihat perancangan antarmuka Kategori Produk dari
pembangunan aplikasi e-commerce di toko dbeauty shop yang tercantum pada gambar 3.70 dibawah ini:
H13 Pengurus
Branda PENGURUS DBEAUTY-SHOP.COM
Management Data Laporan
Hallo: Pengurus| Logout
2011 Dbeauty-shop.com Klik Beranda Menuju Ke H02
Klik Operator Menuju Ke H03 Klik Management Data Menuju Ke H04
Klik Management Transaksi Menuju Ke H05
Klik Laporan Menuju Ke H06 Klik Logout menuju ke H01
Management Transaksi Hari,tanggal-bulan-tahun
No Aksi
Edit Hapus Nama Kategori
Kategori Produk Tambah Kategori Produk
Gambar 3.70 Perancangan Antarmuka Kategori Produk
14. Perancangan Antarmuka Jenis Pengiriman Berikut dapat dilihat perancangan antarmuka Jenis pengiriman dari
pembangunan aplikasi e-commerce di toko dbeauty shop yang tercantum pada gambar 3.71 dibawah ini:
H14 Pengurus
Branda PENGURUS DBEAUTY-SHOP.COM
Management Data Laporan
Hallo: Operator | Logout
2011 Dbeauty-shop.com Klik Beranda Menuju Ke H02
Klik Operator Menuju Ke H03 Klik Management Data Menuju Ke H04
Klik Management Transaksi Menuju Ke H05
Klik Laporan Menuju Ke H06 Klik Logout menuju ke H01
Management Transaksi Hari,tanggal-bulan-tahun
Jenis Pengiriman Tambah Jenis Pengiriman
No Aksi
Edit Hapus Nama Jenis Pengiriman
Gambar 3.71 Perancangan Antarmuka Produk Pengiriman
15. Perancangan Antarmuka Ongkos Kirim Berikut dapat dilihat perancangan antarmuka ongkos kirim dari pembangunan
aplikasi e-commerce di toko dbeauty shop yang tercantum pada gambar 3.72 dibawah ini:
H15 Pengurus
Branda PENGURUS DBEAUTY-SHOP.COM
Management Data Laporan
Hallo: Pengurus| Logout
2011 Dbeauty-shop.com Klik Beranda Menuju Ke H02
Klik Operator Menuju Ke H03 Klik Management Data Menuju Ke H04
Klik Management Transaksi Menuju Ke H05
Klik Laporan Menuju Ke H06 Klik Logout menuju ke H01
Management Transaksi Hari,tanggal-bulan-tahun
Ongkos Kirim Tambah Ongkos Kirim
No Aksi
Edit Hapus Jenis Pengiriman
Tujuan Harga
Gambar 3.72 Perancangan Antarmuka Ongkos Kirim
16. Perancangan Antarmuka Invoice Berikut dapat dilihat perancangan antarmuka invoice dari pembangunan
aplikasi e-commerce di toko dbeauty shop yang tercantum pada gambar 3.73 dibawah ini:
H16 Pengurus
Branda PENGURUS DBEAUTY-SHOP.COM
Management Data Laporan
Hallo: Pengurus| Logout
2011 Dbeauty-shop.com Klik Beranda Menuju Ke H02
Klik Operator Menuju Ke H03 Klik Management Data Menuju Ke H04
Klik Management Transaksi Menuju Ke H05
Klik Laporan Menuju Ke H06 Klik Logout menuju ke H01
Management Transaksi Hari,tanggal-bulan-tahun
No Aksi
Hapus Detail
Tanggal Invoice Status
Nama Pemesan Jumlah Barang
Jumlah Harga Invoice
No Invoice No Resi
Gambar 3.73 Perancangan Antarmuka Invoice
17. Perancangan Antarmuka Cetak Laporan Penjualan Berikut dapat dilihat perancangan antarmuka cetak laporan dari pembangunan
aplikasi e-commerce di toko dbeauty shop yang tercantum pada gambar 3.74 dibawah ini:
H17 Pengurus
Branda PENGURUS DBEAUTY-SHOP.COM
Management Data Laporan
Hallo: Operator | Logout
2011 Dbeauty-shop.com Klik Beranda Menuju Ke H02
Klik Operator Menuju Ke H03 Klik Management Data Menuju Ke H04
Klik Management Transaksi Menuju Ke H05
Klik Laporan Menuju Ke H06 Klik Logout menuju ke H01
Management Transaksi Hari,tanggal-bulan-tahun
Cetak Laporan
Cetak Laporan Harian
Laporan Bulanan Laporan Tahunan
LAPORAN HARIAN Dari Tanggal
Sampai Tanggal LAPORAN BULANAN
Bulan Tahun
Cetak LAPORAN TAHUNAN
Cetak Tahun
Gambar 3.74 Perancangan Antarmuka Cetak Laporan Penjualan
18. Perancangan Antarmuka Cetak Laporan Produk Berikut dapat dilihat perancangan antarmuka cetak laporan Produk dari
pembangunan aplikasi e-commerce di toko dbeauty shop yang tercantum pada gambar 3.75 dibawah ini:
H18 Pengurus
Branda PENGURUS DBEAUTY-SHOP.COM
Management Data Laporan
Hallo: Operator | Logout
2011 Dbeauty-shop.com Klik Beranda Menuju Ke H02
Klik Operator Menuju Ke H03 Klik Management Data Menuju Ke H04
Klik Management Transaksi Menuju Ke H05
Klik Laporan Menuju Ke H06 Klik Logout menuju ke H01
Management Transaksi Hari,tanggal-bulan-tahun
Cetak Laporan Produk Cetak
Laporan Semua Produk Laporan stok Produk minimum
Laporan Kategori Produk Laporan Semua Produk
Laporan Kategori Produk Cetak
Kategori Produk Pilih Kategori
Cetak Laporan stok Produkminimum
Gambar 3.75 Perancangan Antarmuka Cetak Laporan Produk
19. Perancangan Antarmuka Tambah Produk Berikut dapat dilihat perancangan antarmuka tambah Produk dari
pembangunan aplikasi e-commerce di toko dbeauty shop yang tercantum pada gambar 3.76 dibawah ini:
H19 Operator
Branda PENGURUS DBEAUTY-SHOP.COM
Management Data Laporan
Hallo: Pengurus| Logout
2011 Dbeauty-shop.com Klik Beranda Menuju Ke H02
Klik Operator Menuju Ke H03 Klik Management Data Menuju Ke H04
Klik Management Transaksi Menuju Ke H05
Klik Laporan Menuju Ke H06 Klik Logout menuju ke H01
Management Transaksi Hari,tanggal-bulan-tahun
Tambah Barang Kembali
Nama Produk
Keterangan Harga
Berat
Simpan Diskon
Kategori Produk Pilih Kategori Produk
Stok Gambar
Upload
Gambar 3.76 Perancangan Antarmuka Tambah Produk
20. Perancangan Antarmuka Edit Produk Berikut dapat dilihat perancangan antarmuka ubah Produk dari pembangunan
aplikasi e-commerce di toko dbeauty shop yang tercantum pada gambar 3.82 dibawah ini:
H20 Pengurus
Branda PENGURUS DBEAUTY-SHOP.COM
Management Data Laporan
Hallo: Operator | Logout
2011 Dbeauty-shop.com Klik Beranda Menuju Ke H02
Klik Operator Menuju Ke H03 Klik Management Data Menuju Ke H04
Klik Management Transaksi Menuju Ke H05
Klik Laporan Menuju Ke H06 Klik Logout menuju ke H01
Management Transaksi Hari,tanggal-bulan-tahun
Edit Produk Kembali
Nama Produk
Keterangan Harga
Berat
Simpan Diskon
Kategori Produk Pilih Kategori Produk
Stok Gambar
Upload Jika Gambar tidak diubah kosongkan saja
Jika Gambar tidak diubah kosongkan saja
Gambar 3.77 Perancangan Antarmuka Ubah Produk
21. Perancangan Antarmuka Tambah Jasa Pengiriman Berikut dapat dilihat perancangan antarmuka tambah jasa pengiriman dari
pembangunan aplikasi e-commerce di toko dbeauty shop yang tercantum pada gambar 3.78 dibawah ini:
V H21
Pengurus Branda
PENGURUS DBEAUTY-SHOP.COM Management Data
Laporan Hallo: Pengurus| Logout
2011 Dbeauty-shop.com Klik Beranda Menuju Ke H02
Klik Operator Menuju Ke H03 Klik Management Data Menuju Ke H04
Klik Management Transaksi Menuju Ke H05
Klik Laporan Menuju Ke H06 Klik Logout menuju ke H01
Management Transaksi Hari,tanggal-bulan-tahun
Kembali Tambah Jasa Pengiriman
Nama Jasa Pengiriman Simpan
Gambar 3.78 Perancangan Antarmuka Tambah Jasa Pengiriman
22. Perancangan Antarmuka Edit Jasa Pengiriman Berikut dapat dilihat perancangan antarmuka ubah jasa pengiriman dari
pembangunan aplikasi e-commerce di toko dbeauty shop yang tercantum pada gambar 3.79 dibawah ini:
V H22
Pengurus Branda
PENGURUS DBEAUTY-SHOP.COM Management Data
Laporan Hallo:
Operator | Logout
2011 Dbeauty-shop.com Klik Beranda Menuju Ke H02
Klik Operator Menuju Ke H03 Klik Management Data Menuju Ke H04
Klik Management Transaksi Menuju Ke H05
Klik Laporan Menuju Ke H06 Klik Logout menuju ke H01
Management Transaksi Hari,tanggal-bulan-tahun
Kembali Edit Jasa Pengiriman
Nama Jasa Pengiriman Simpan
Gambar 3.79 Perancangan Antarmuka Ubah Jasa Pengiriman
23. Perancangan Antarmuka Detail Member Berikut dapat dilihat perancangan antarmuka detail member dari
pembangunan aplikasi e-commerce di toko dbeauty shop yang tercantum pada gambar 3.80 dibawah ini:
V H23
Pengurus Branda
PENGURUS DBEAUTY-SHOP.COM Management Data
Laporan Hallo: Pengurus| Logout
2011 Dbeauty-shop.com Klik Beranda Menuju Ke H02
Klik Operator Menuju Ke H03 Klik Management Data Menuju Ke H04
Klik Management Transaksi Menuju Ke H05
Klik Laporan Menuju Ke H06 Klik Logout menuju ke H01
Management Transaksi Hari,tanggal-bulan-tahun
Kembali Detail Member
O Nama : Nama Member O Emai : Email Member
O Kota : Kota Member O Status : Status Memberl
Riwayat Pembelian No. Invoice
Tanggal Total Harga
Transaksi
Gambar 3.80 Perancangan Antarmuka Detail Member
24. Perancangan Antarmuka Tambah Kota Berikut dapat dilihat perancangan antarmuka tambah kota dari pembangunan
aplikasi e-commerce di toko dbeauty shop yang tercantum pada gambar 3.81 dibawah ini:
V H24
Pengurus Branda
PENGURUS DBEAUTY-SHOP.COM Management Data
Laporan Hallo: Pengurus| Logout
2011 Dbeauty-shop.com Klik Beranda Menuju Ke H02
Klik Operator Menuju Ke H03 Klik Management Data Menuju Ke H04
Klik Management Transaksi Menuju Ke H05
Klik Laporan Menuju Ke H06 Klik Logout menuju ke H01
Management Transaksi Hari,tanggal-bulan-tahun
Kembali Tambah Kota
Nama Kota : Simpan
Provinsi : Pilih Provinsi
Gambar 3.81 Perancangan Antarmuka Tambah Kota
25. Perancangan Antarmuka Edit Kota Berikut dapat dilihat perancangan antarmuka ubah kota dari pembangunan
aplikasi e-commerce di toko dbeauty shop yang tercantum pada gambar 3.82 dibawah ini:
V H25
Pengurus Branda
PENGURUS DBEAUTY-SHOP.COM Management Data
Laporan Hallo: Pengurus| Logout
2011 Dbeauty-shop.com Klik Beranda Menuju Ke H02
Klik Operator Menuju Ke H03 Klik Management Data Menuju Ke H04
Klik Management Transaksi Menuju Ke H05
Klik Laporan Menuju Ke H06 Klik Logout menuju ke H01
Management Transaksi Hari,tanggal-bulan-tahun
Kembali Edit Kota
Nama Kota :
Simpan Provinsi :
Harus diisi
Gambar 3.82 Perancangan Antarmuka Ubah Kota
26. Perancangan Antarmuka Tambah Provinsi Berikut dapat dilihat perancangan antarmuka tambah provinsi dari
pembangunan aplikasi e-commerce di toko dbeauty shop yang tercantum pada gambar 3.83 dibawah ini:
V H26
Pengurus Branda
PENGURUS DBEAUTY-SHOP.COM Management Data
Laporan Hallo: Pengurus| Logout
2011 Dbeauty-shop.com Klik Beranda Menuju Ke H02
Klik Operator Menuju Ke H03 Klik Management Data Menuju Ke H04
Klik Management Transaksi Menuju Ke H05
Klik Laporan Menuju Ke H06 Klik Logout menuju ke H01
Management Transaksi Hari,tanggal-bulan-tahun
Kembali Nama Provinsi :
Simpan Tambah Provinsi
Gambar 3.83 Perancangan Antarmuka Tambah Provinsi
27. Perancangan Antarmuka Edit Provinsi Berikut dapat dilihat perancangan antarmuka Ubah Provinsi dari
pembangunan aplikasi e-commerce di toko dbeauty shop yang tercantum pada gambar 3.84 dibawah ini:
V H27
Pengurus Branda
PENGURUS DBEAUTY-SHOP.COM Management Data
Laporan Hallo: Pengurus| Logout
2011 Dbeauty-shop.com Klik Beranda Menuju Ke H02
Klik Operator Menuju Ke H03 Klik Management Data Menuju Ke H04
Klik Management Transaksi Menuju Ke H05
Klik Laporan Menuju Ke H06 Klik Logout menuju ke H01
Management Transaksi Hari,tanggal-bulan-tahun
Kembali Edit Provinsi
Nama Provinsi : Simpan
Gambar 3.84 Perancangan Antarmuka Ubah Provinsi
28. Perancangan Antarmuka Baca Kontak Berikut dapat dilihat perancangan antarmuka baca kontak dari pembangunan
aplikasi e-commerce di toko dbeauty shop yang tercantum pada gambar 3.85 dibawah ini:
V H28
Operator Branda
OPERATOR DBEAUTY-SHOP.COM Management Data
Laporan Hallo: Operator | Logout
2011 Dbeauty-shop.com Klik Beranda Menuju Ke H02
Klik Operator Menuju Ke H03 Klik Management Data Menuju Ke H04
Klik Management Transaksi Menuju Ke H05
Klik Laporan Menuju Ke H06 Klik Logout menuju ke H01
Management Transaksi Hari,tanggal-bulan-tahun
Kembali Baca Kontak
O Nama : Nama Member O Emai : Email Member
O Telepon : Telepon Member O Pesan : Pesan dari member
Balas
Kirim
Gambar 3.85 Perancangan Antarmuka Baca Kontak
29. Perancangan Antarmuka Tambah Kategori Produk Berikut dapat dilihat perancangan antarmuka tambah Kategori Produk dari
pembangunan aplikasi e-commerce di toko dbeauty shop yang tercantum pada gambar 3.86 dibawah ini:
V H29
Operator Branda
OPERATOR DBEAUTY-SHOP.COM Management Data
Laporan Hallo: Operator | Logout
2011 Dbeauty-shop.com Klik Beranda Menuju Ke H02
Klik Operator Menuju Ke H03 Klik Management Data Menuju Ke H04
Klik Management Transaksi Menuju Ke H05
Klik Laporan Menuju Ke H06 Klik Logout menuju ke H01
Management Transaksi Hari,tanggal-bulan-tahun
Kembali Tambah Kategori Produk
Nama Kategori Produk Simpan
Gambar 3.86 Perancangan Antarmuka Tambah Nama Produk
30. Perancangan Antarmuka Edit Kategori Produk Berikut dapat dilihat perancangan antarmuka ubah Kategori Produk dari
pembangunan aplikasi e-commerce di toko dbeauty shop yang tercantum pada gambar 3.87 dibawah ini:
V H30
Operator Branda
OPERATOR DBEAUTY-SHOP.COM Management Data
Laporan Hallo: Operator | Logout
2011 Dbeauty-shop.com Klik Beranda Menuju Ke H02
Klik Operator Menuju Ke H03 Klik Management Data Menuju Ke H04
Klik Management Transaksi Menuju Ke H05
Klik Laporan Menuju Ke H06 Klik Logout menuju ke H01
Management Transaksi Hari,tanggal-bulan-tahun
Kembali Edit Kategori Produk
Nama Kategori Produk Simpan
Gambar 3.87 Perancangan Antarmuka Ubah Kategori Produk
31. Perancangan Antarmuka Tambah Jenis Pengiriman Berikut dapat dilihat perancangan antarmuka tambah Jenis pengiriman dari
pembangunan aplikasi e-commerce di toko dbeauty shop yang tercantum pada gambar 3.88 dibawah ini:
V H31
Operator Branda
OPERATOR DBEAUTY-SHOP.COM Management Data
Laporan Hallo: Operator | Logout
2011 Dbeauty-shop.com Klik Beranda Menuju Ke H02
Klik Operator Menuju Ke H03 Klik Management Data Menuju Ke H04
Klik Management Transaksi Menuju Ke H05
Klik Laporan Menuju Ke H06 Klik Logout menuju ke H01
Management Transaksi Hari,tanggal-bulan-tahun
Kembali Tambah Jenis Pengiriman
Nama Jenis Pengiriman: Simpan
Gambar 3.88 Perancangan Antarmuka Tambah Jenis Pengiriman
32. Perancangan Antarmuka Edit Jenis Pengiriman Berikut dapat dilihat perancangan antarmuka ubah Produk pengiriman dari
pembangunan aplikasi e-commerce di toko dbeauty shop yang tercantum pada gambar 3.89 dibawah ini:
V H32
Operator Branda
OPERATOR DBEAUTY-SHOP.COM Management Data
Laporan Hallo: Operator | Logout
2011 Dbeauty-shop.com Klik Beranda Menuju Ke H02
Klik Operator Menuju Ke H03 Klik Management Data Menuju Ke H04
Klik Management Transaksi Menuju Ke H05
Klik Laporan Menuju Ke H06 Klik Logout menuju ke H01
Management Transaksi Hari,tanggal-bulan-tahun
Kembali Edit Jenis Pengiriman
Nama Jenis Pengiriman: Simpan
Gambar 3.89 Perancangan Antarmuka Ubah Jenis Pengiriman
33. Perancangan Antarmuka Tambah Ongkos Kirim Berikut dapat dilihat perancangan antarmuka tambah ongkos kirim dari
pembangunan aplikasi e-commerce di toko dbeauty shop yang tercantum pada gambar 3.90 dibawah ini:
V H33
Operator Branda
OPERATOR DBEAUTY-SHOP.COM Management Data
Laporan Hallo: Operator | Logout
2011 Dbeauty-shop.com Klik Beranda Menuju Ke H02
Klik Operator Menuju Ke H03 Klik Management Data Menuju Ke H04
Klik Management Transaksi Menuju Ke H05
Klik Laporan Menuju Ke H06 Klik Logout menuju ke H01
Management Transaksi Hari,tanggal-bulan-tahun
Kembali Tambah Ongkos Kirim
Jenis Pengiriman:
Simpan Kota :
Harga :
Gambar 3.90 Perancangan Antarmuka Tambah Ongkos Kirim
34. Perancangan Antarmuka Edit Ongkos Kirim Berikut dapat dilihat perancangan antarmuka Edit ongkos kirim dari
pembangunan aplikasi e-commerce di toko dbeauty shop yang tercantum pada gambar 3.91 dibawah ini:
V H34
Operator Branda
OPERATOR DBEAUTY-SHOP.COM Management Data
Laporan Hallo: Operator | Logout
2011 Dbeauty-shop.com Klik Beranda Menuju Ke H02
Klik Operator Menuju Ke H03 Klik Management Data Menuju Ke H04
Klik Management Transaksi Menuju Ke H05
Klik Laporan Menuju Ke H06 Klik Logout menuju ke H01
Management Transaksi Hari,tanggal-bulan-tahun
Kembali Edit Ongkos Kirim
Jenis Pengiriman:
Simpan Kota :
Harga :
Gambar 3.91 Perancangan Antarmuka Edit Ongkos Kirim
35. Perancangan Antarmuka Detail Pemesanan Berikut dapat dilihat perancangan antarmuka detail pemesanan dari
pembangunan aplikasi e-commerce di toko dbeauty shop yang tercantum pada gambar 3.92 dibawah ini:
V H35
Operator Branda
OPERATOR DBEAUTY-SHOP.COM Management Data
Laporan Hallo: Operator | Logout
2011 Dbeauty-shop.com Klik Beranda Menuju Ke H02
Klik Operator Menuju Ke H03 Klik Management Data Menuju Ke H04
Klik Management Transaksi Menuju Ke H05
Klik Laporan Menuju Ke H06 Klik Logout menuju ke H01
Management Transaksi Hari,tanggal-bulan-tahun
Kembali Detail Pemesanan
Pemesan : Nama Pemesan
Produk Alamat Pengiriman
Nama Lengkap : Alamat:
Kota : Kode Pos:
Telepon: Detail Pesanan
Berat Harga
Diskon Jumlah
Jenis Pengiriman Yang Digunakan Jenis Pengiriman
Tujuan Total Berat
Biaya Pengiriman Total :
Total Belanja + Biaya Pengiriman : Rp. Stok
Stok
Gambar 3.92 Perancangan Antarmuka Detail Pemesanan
36. Perancangan Antarmuka Detail Produk Berikut dapat dilihat perancangan antarmuka detail pemesanan dari
pembangunan aplikasi e-commerce di toko dbeauty shop yang tercantum pada gambar 3.93 dibawah ini:
V H36
Operator Branda
OPERATOR DBEAUTY-SHOP.COM Management Data
Laporan Hallo: Operator | Logout
2011 Dbeauty-shop.com Klik Beranda Menuju Ke H02
Klik Operator Menuju Ke H03 Klik Management Data Menuju Ke H04
Klik Management Transaksi Menuju Ke H05
Klik Laporan Menuju Ke H06 Klik Logout menuju ke H01
Management Transaksi Hari,tanggal-bulan-tahun
Kembali Detail Produk
Detail Produk Nama Produk :
Kategori : Harga :
Diskon : Berat :
Keterangan Produk Stok :
Gambar :
Gambar 3.93 Perancangan Antarmuka Detail Produk
B. Administrator
1. Perancangan Antarmuka Login Administrator Berikut dapat dilihat perancangan antarmuka login administrator dari
pembangunan aplikasi e-commerce di toko dbeauty shop yang tercantum pada
gambar 3.94 dibawah ini:
Login Administrator J01
Klik Ke Halaman Website Menuju Ke F01
Klik Login Menuju Ke J02
Klik Lupa Password Menuju Ke J03
Email
Login Kata Sandi
Lupa Password ?
Gambar 3.94 Perancangan Antarmuka Login Administrator
2. Perancangan Antarmuka Beranda Berikut dapat dilihat perancangan antarmuka Beranda dari pembangunan
aplikasi e-commerce di toko dbeauty shop yang tercantum pada gambar 3.95
dibawah ini:
V J02
Data Pengurus Branda
ADMIN DBEAUTY-SHOP.COM Backup Database
Hallo: Administrator | Logout
2011 Dbeauty-shop.com Klik Beranda Menuju Ke J02
Klik Data Operator Menuju Ke J03 Klik Ganti Password Menuju Ke J04
Klik Tambah Operator Menuju Ke J05 Klik Backup Database Menuju Ke J05
Ganti Password Hari,tanggal-bulan-tahun
Selamat datang administrator Anda telah login ke menu administrator website penjualan online Dbeauty Shop Oriflame Swedish Cosmetic, silahkan gunakan
hak akses Anda dengan sebaik-baiknya. Silahkan pilih menu-menu yang ada diatas untuk melakukan pengolahan. Jika Anda sudah selesai, jangan lupa untuk mengklik tombol Logout yang ada di kanan atas.
Branda
Gambar 3.95 Perancangan Antarmuka Beranda
3. Perancangan Antarmuka Data Pengurus Berikut dapat dilihat perancangan antarmuka data pengurus dari
pembangunan aplikasi e-commerce di toko dbeauty shop yang tercantum pada
gambar 3.96 dibawah ini:
V J03
Data Pengurus Branda
ADMIN DBEAUTY-SHOP.COM Backup Database
Hallo: Administrator | Logout
2011 Dbeauty-shop.com Klik Beranda Menuju Ke J02
Klik Data Operator Menuju Ke J03 Klik Ganti Password Menuju Ke J04
Klik Tambah Operator Menuju Ke J05 Klik Backup Database Menuju Ke J05
Ganti Password Hari,tanggal-bulan-tahun
Email No
Status Aksi
Detail Hapus
Nama Operator Operator
Tambah Operator
Gambar 3.96 Perancangan Antarmuka Data Pengurus
4. Perancangan Antarmuka Ganti Password Berikut dapat dilihat perancangan antarmuka ganti Password dari
pembangunan aplikasi e-commerce di toko dbeauty shop yang tercantum pada
gambar 3.97 dibawah ini:
V J03
Data Pengurus Branda
ADMIN DBEAUTY-SHOP.COM Backup Database
Hallo: Administrator | Logout
2011 Dbeauty-shop.com Klik Beranda Menuju Ke J02
Klik Data Operator Menuju Ke J03 Klik Ganti Password Menuju Ke J04
Klik Tambah Operator Menuju Ke J05 Klik Backup Database Menuju Ke J05
Ganti Password Hari,tanggal-bulan-tahun
GANTI PASSWORD Password Lama :
●●●●●●●●●●●●
Simpan ●●●●●●●●●●●●
Password Baru : ●●●●●●●●●●●●
Konfirmasi Password Baru :
Gambar 3.97 Perancangan Antarmuka Ganti Password
5. Perancangan Tambah Pengurus Berikut dapat dilihat perancangan antarmuka tambah pengurus dari
pembangunan aplikasi e-commerce di toko dbeauty shop yang tercantum pada
gambar 3.98 dibawah ini:
V J05
Data Pengurus Branda
ADMIN DBEAUTY-SHOP.COM Backup Database
Hallo: Administrator | Logout
2011 Dbeauty-shop.com Klik Beranda Menuju Ke J02
Klik Data Operator Menuju Ke J03 Klik Ganti Password Menuju Ke J04
Klik Tambah Operator Menuju Ke J05 Klik Backup Database Menuju Ke J05
Ganti Password Hari,tanggal-bulan-tahun
TAMBAH OPERATOR Nama Lengkap :
Simpan Email :
YM ●●●●●●●●●●●●
Password : ●●●●●●●●●●●●
Konfirmasi Password :
Gambar 3.98 Perancangan Antarmuka Tambah Pengurus
6. Perancangan backup database Berikut dapat dilihat perancangan antarmuka backup database dari
pembangunan aplikasi e-commerce di toko dbeauty shop yang tercantum pada
gambar 3.99 dibawah ini:
V J06
Data Pengurus Branda
ADMIN DBEAUTY-SHOP.COM Backup Database
Hallo: Administrator | Logout
2011 Dbeauty-shop.com Klik Beranda Menuju Ke J02
Klik Data Operator Menuju Ke J03 Klik Ganti Password Menuju Ke J04
Klik Tambah Operator Menuju Ke J05 Klik Backup Database Menuju Ke J05
Ganti Password Hari,tanggal-bulan-tahun
BACKUP DATABASE Backup Database
Mulai Backup Restore Database
Upload Backup Database
Klik tombol Mulai Backup untuk melakukan proses backup database dbeauty-shop.com Restore Database
File Backup Database .sql Restore Database
Gambar 3.99 Perancangan Antarmuka Backup Database
3.6 Perancangan Pesan
Kategori