Perancangan Antarmuka Administrator - Perancangan Antarmuka

Analisis Prosedur Laporan Penjualan Produk Pemimpin Perusahaan

23. DFD Level 4 Proses 3.3.5 Pengolahan Data Produk Opsi

3.5 Perancangan Antarmuka

3.5.3 Perancangan Antarmuka Administrator

1. [T29] Rancangan antar muka tampilan Login Admin Aplikasi e-commerce

penjualan produk jkcollection di CV R&R Sarana Persada (Gambar 3.59):

T29

footer

1. Header menggunakan font arial, ukuran 20px , warna #FFF,background #000 2. Menu login menggunakan font arial, ukuran 11px , warne #FFF , backgroud #CCC

ADMIN | JK COLLECTION ^{1. Klik Lupa Password menuju T30}

2. Klik tombol login menuju T31

Gambar 3. 59 Tampilan Login Admin

2. [T30] Rancangan antar muka tampilan lupa password admin Aplikasi

e-commerce penjualan produk jkcollection di CV R&R Sarana Persada

T30

footer

1. Header menggunakan font arial, ukuran 20px , warna #FFF,background #000 2. Menu login menggunakan font arial, ukuran 11px , warne #FFF , backgroud #CCC

ADMIN | JK COLLECTION

Lupa Password

Kirim email

Batal

1. Klik tombol kirim untuk mengirim password baru ke alamat email 2. Klik tombol batal menuju T29

Gambar 3. 60 Tampilan Lupa Password admin

3. [T31] Rancangan antar muka tampilan home admin Aplikasi e-commerce

penjualan produk jkcollection di CV R&R Sarana Persada (Gambar 3.61):

T31

footer

1. Header menggunakan font arial, ukuran 20px , warna #FFF,background #000 2. Menu header menggunakan font arial, ukuran 11px , warne #FFF , backgroud #CCC

ADMIN | JK COLLECTION 1. Klik home menuju T31 Home Pengolahan Orders Setting Backup & Restore Laporan Penjualan Logout

Kategori produk Kota Provinsi Produk Jenis Members Ongkos Kirim Orders Baru Orders Dibayar Orders Diterima Orders Dikirim Orders Lunas Produk Retur Ganti Password Profil Toko Syarat & Kondisi Cara Pembelian Hubungi Kami

Backup Database Restore Database

ORDERS TERAKHIR

2. Klik kategori produk menuju T32 3. Klik jenis menuju T33 4. Klik produk menuju T34 5. Klik provinsi menuju T35 6. Klik kota menuju T36

Keterangan

7. Klik ongkos kirim menuju T37 8. Klik members menuju T38 9. Klik orders baru menuju T39 10. Klik orders dibayar menuju T40 11. Klik orders lunas menuju T41 12. Klik orders dikirim menuju T42 13. Klik orders diterima menuju T43 14. Klik produk retur menuju T44 15. Klik ganti password menuju T45 16. Klik hubungi kami menuju T46 17. Klik cara pembelian menuju T47 18. Klik profil kami menuju T48 19. Klik syarat & kondisi menuju T49 20. Klik backup database menuju T50 21. Klik restore database menuju T51 22. Klik laporan penjualan menuju T52

23. Klik Logout menuju T53

4. [T32] Rancangan antar muka tampilan kategori produk admin Aplikasi

e-commerce penjualan produk jkcollection di CV R&R Sarana Persada

(Gambar 3.62):

T32

footer

1. Header menggunakan font arial, ukuran 20px , warna #FFF,background #000 2. Menu header menggunakan font arial, ukuran 11px , warne #FFF , backgroud #CCC

ADMIN | JK COLLECTION 1. Klik home menuju T31 Home Pengolahan Orders Setting Backup & Restore Laporan Penjualan Logout

Backup Database Restore Database

Kategori Produk

2. Klik kategori produk menuju T32 3. Klik Jenis menuju T33 4. Klik produk menuju T34 5. Klik provinsi menuju T35 6. Klik kota menuju T36

Keterangan

23. Klik Logout menuju T53 Tambah Kategori

No Nama Kategori Aksi

Edit Hapus

25. Klik edit menuju T55 26. Klik hapus untuk menghapus kategori

24. Klik Tambah kategori menuju T54 Cari

Cari Kategori

Gambar 3. 62 Tampilan Kategori Produk Admin

5. [T33] Rancangan antar muka tampilan jenis admin Aplikasi e-commerce

T33

footer

1. Header menggunakan font arial, ukuran 20px , warna #FFF,background #000 2. Menu header menggunakan font arial, ukuran 11px , warne #FFF , backgroud #CCC

ADMIN | JK COLLECTION 1. Klik home menuju T31 Home Pengolahan Orders Setting Backup & Restore Laporan Penjualan Logout

Backup Database Restore Database

Jenis

2. Klik kategori produk menuju T32 3. Klik jenis menuju T33 4. Klik produk menuju T34 5. Klik provinsi menuju T35 6. Klik kota menuju T36

Keterangan

23. Klik Logout menuju T53 Tambah Jenis

No Nama Merk Aksi

Edit Hapus

25. Klik edit menuju T57 26. Klik hapus untuk menghapus jenis

24. Klik Tambah jenis menuju T56 Cari

Cari Jenis

Gambar 3. 63 Tampilan Jenis

6. [T34] Rancangan antar muka produk Aplikasi e-commerce penjualan

produk jkcollection di CV R&R Sarana Persada (Gambar 3.64):

T34

footer

1. Header menggunakan font arial, ukuran 20px , warna #FFF,background #000 2. Menu header menggunakan font arial, ukuran 11px , warne #FFF , backgroud #CCC

ADMIN | JK COLLECTION 1. Klik home menuju T31 Home Pengolahan Orders Setting Backup & Restore Laporan Penjualan Logout

Backup Database Restore Database

Produk

2. Klik kategori produk menuju T32 3. Klik jenis menuju T33 4. Klik produk menuju T34 5. Klik provinsi menuju T35 6. Klik kota menuju T36

Keterangan

23. Klik Logout menuju T53 Tambah Produk

No Nama Produk Aksi

Edit Hapus

26. Klik edit menuju T59

26. Klik hapus untuk menghapus produk

24. Klik Tambah Produk menuju T58 Cetak Laporan Produk

Opsi Gambar

25. Klik cetak laporan produk untuk membuat laporan produk 27. Klik gambar menuju T60 28. Klik opsi menuju T61 Cari

Cari Produk

7. [T35] Rancangan antar muka Provinsi Aplikasi e-commerce penjualan produk jkcollection di CV R&R Sarana Persada (Gambar 3.65):

T35

footer

1. Header menggunakan font arial, ukuran 20px , warna #FFF,background #000 2. Menu header menggunakan font arial, ukuran 11px , warne #FFF , backgroud #CCC

ADMIN | JK COLLECTION 1. Klik home menuju T31 Home Pengolahan Orders Setting Backup & Restore Laporan Penjualan Logout

Backup Database Restore Database

Provinsi

2. Klik kategori produk menuju T32 3. Klik jenis menuju T33 4. Klik produk menuju T34 5. Klik provinsi menuju T35 6. Klik kota menuju T36

Keterangan

23. Klik Logout menuju T53 Tambah Provinsi

No Nama Provinsi Aksi

Edit Hapus

25. Klik edit menuju T63 26. Klik hapus untuk menghapus provinsi

24. Klik Tambah provinsi menuju T62 Cari

Cari Provinsi

27. Klik cari untuk mencari provinsi

Gambar 3. 65 Tampilan Provinsi

8. [T36] Rancangan antar muka tampilan Kota Aplikasi e-commerce penjualan

T36

footer

1. Header menggunakan font arial, ukuran 20px , warna #FFF,background #000 2. Menu header menggunakan font arial, ukuran 11px , warne #FFF , backgroud #CCC

ADMIN | JK COLLECTION 1. Klik home menuju T31 Home Pengolahan Orders Setting Backup & Restore Laporan Penjualan Logout

Backup Database Restore Database

Kota

2. Klik kategori produk menuju T32 3. Klik jenis menuju T33 4. Klik produk menuju T34 5. Klik provinsi menuju T35 6. Klik kota menuju T36

Keterangan

23. Klik Logout menuju T53 Tambah Kota

No Nama Kota Aksi

Edit Hapus

25. Klik edit menuju T65 26. Klik hapus untuk menghapus kota

24. Klik Tambah kota menuju T64 Cari

Cari Kota

27. Klik cari untuk mencari kota

Gambar 3. 66 Tampilan Kota

9. [T37] Rancangan antar muka tampilan ongkos kirim Aplikasi e-commerce

penjualan produk jkcollection di CV R&R Sarana Persada (Gambar 3.67):

T37

footer

1. Header menggunakan font arial, ukuran 20px , warna #FFF,background #000 2. Menu header menggunakan font arial, ukuran 11px , warne #FFF , backgroud #CCC

ADMIN | JK COLLECTION 1. Klik home menuju T31 Home Pengolahan Orders Setting Backup & Restore Laporan Penjualan Logout

Backup Database Restore Database

Ongkos Kirim

2. Klik kategori produk menuju T32 3. Klik jenis menuju T33 4. Klik produk menuju T34 5. Klik provinsi menuju T35 6. Klik kota menuju T36

Keterangan

23. Klik Logout menuju T53 Tambah Ongkos Kirim

No Nama Kota Aksi

Edit Hapus

25. Klik edit menuju T67 26. Klik hapus untuk menghapus ongkos kirim

24. Klik Tambah ongkos kirim menuju T66

Ongkos Kirim Cari

Cari Ongkos Kirim

10. [T38] Rancangan antar muka tampilan members Aplikasi e-commerce penjualan produk jkcollection di CV R&R Sarana Persada (Gambar 3.68):

T38

footer

1. Header menggunakan font arial, ukuran 20px , warna #FFF,background #000 2. Menu header menggunakan font arial, ukuran 11px , warne #FFF , backgroud #CCC

ADMIN | JK COLLECTION 1. Klik home menuju T31 Home Pengolahan Orders Setting Backup & Restore Laporan Penjualan Logout

Backup Database Restore Database

Members

2. Klik kategori produk menuju T32 3. Klik jenis menuju T33 4. Klik produk menuju T34 5. Klik provinsi menuju T35 6. Klik kota menuju T36

Keterangan

23. Klik Logout menuju T53

No Username Nama User Email No Telp Blokir Aksi

Cari

Cari Members

Gambar 3. 68 Tampilan Member

11. [T39] Rancangan antar muka tampilan order baru Aplikasi e-commerce

T39

footer

1. Header menggunakan font arial, ukuran 20px , warna #FFF,background #000 2. Menu header menggunakan font arial, ukuran 11px , warne #FFF , backgroud #CCC

ADMIN | JK COLLECTION 1. Klik home menuju T31 Home Pengolahan Orders Setting Backup & Restore Laporan Penjualan Logout

Backup Database Restore Database

Orders Baru

2. Klik kategori produk menuju T32 3. Klik jenis menuju T33 4. Klik produk menuju T34 5. Klik provinsi menuju T35 6. Klik kota menuju T36

Keterangan

23. Klik Logout menuju T53 Cari

No.Orders Nama Konsumen Tgl.Orders Jam Status Aksi Detail Cari Berdasarkan No Pesanan

24. Klik Detail menuju T68 25. Klik Cari untuk mencari pesanan

Gambar 3. 69 Tampilan Orders Baru

12. [T40] Rancangan antar muka tampilan order dibayar Aplikasi e-commerce

penjualan produk jkcollection di CV R&R Sarana Persada (Gambar 3.70):

T40

footer

1. Header menggunakan font arial, ukuran 20px , warna #FFF,background #000 2. Menu header menggunakan font arial, ukuran 11px , warne #FFF , backgroud #CCC

ADMIN | JK COLLECTION 1. Klik home menuju T31 Home Pengolahan Orders Setting Backup & Restore Laporan Penjualan Logout

Backup Database Restore Database

Orders Dibayar

2. Klik kategori produk menuju T32 3. Klik jenis menuju T33 4. Klik produk menuju T34 5. Klik provinsi menuju T35 6. Klik kota menuju T36

Keterangan

23. Klik Logout menuju T53 Cari

No.Orders Nama Konsumen Tgl.Orders Jam Status Aksi Detail Cari Berdasarkan No Pesanan

24. Klik Detail menuju T68 25. Klik Cari untuk mencari pesanan

13. [T41] Rancangan antar muka tampilan order lunas Aplikasi e-commerce penjualan produk jkcollection di CV R&R Sarana Persada (Gambar 3.71):

T41

footer

1. Header menggunakan font arial, ukuran 20px , warna #FFF,background #000 2. Menu header menggunakan font arial, ukuran 11px , warne #FFF , backgroud #CCC

ADMIN | JK COLLECTION 1. Klik home menuju T31 Home Pengolahan Orders Setting Backup & Restore Laporan Penjualan Logout

Backup Database Restore Database

Orders Lunas

2. Klik kategori produk menuju T32 3. Klik jenis menuju T33 4. Klik produk menuju T34 5. Klik provinsi menuju T35 6. Klik kota menuju T36

Keterangan

23. Klik Logout menuju T53 Cari

No.Orders Nama Konsumen Tgl.Orders Jam Status Aksi

Detail

Cari Berdasarkan No Pesanan

24. Klik Detail menuju T68 25. Klik Cari untuk mencari pesanan

Gambar 3. 71 Tampilan Orders Lunas

14. [T42] Rancangan antar muka tampilan order dikirim Aplikasi e-commerce

Dalam dokumen Perancangan Dan Pembangunan Aplikasi E-Commerce Penjualan Produk JK Collection (Studi Kasus Di CV R&R Sarana Persada) (Halaman 192-200)