• Tidak ada hasil yang ditemukan

Perancangan Antarmuka Admin

Dalam dokumen Pembangunan e-commerce pada MU Design Shop (Halaman 159-177)

BAB V KESIMPULAN DAN SARAN

3.1 Analisis Sistem

3.1.9 Perancangan Antarmuka

3.1.9.1 Perancangan Antarmuka Admin

1. Perancangan Antarmuka Login (C1)

Gambar 3.34Tampilan Login Admin

2. Perancangan Antarmuka BerandaC2)

MU DESIGN SHOP LOGIN Username Password LOGIN C1 MU DESIGN SHOP Navigasi :

1. Klik tombol Login untuk menuju C2

MENU

BERANDA DATA MASTER LAPORAN PROFIL DATABASE BACKUP FILE LOGOUT C2

MU DESIGN SHOP

Navigasi :

1.Klik beranda untuk menuju C2 2.Klik data master, pengolahan

pelanggan untuk menuju C3 3.Klik data master, pengolahan provinsi

untuk menuju C4

4.Klik data master, pengolahan kota untuk menuju C5

5.Klik data master, pengolahan perusahaan kirim untuk menuju C6 6.Klik data master, pengolahan kategori

untuk menuju C7

7.Klik data master, pengolahan produk untuk menuju C8

8.Klik data master, pengolahan pemesanan untuk menuju C9

9.Klik data master, pengolahan pengiriman untuk menuju C10

10.Klik Laporan untuk menuju C11 11.Klik profil untuk menuju C13 12.Klik logout untuk keluar

Gambar 3.35 Tampilan Beranda Admin

MENU

BERANDA DATA MASTER LAPORAN PROFIL DATABASE BACKUP FILE LOGOUT

ID Nama

ID Pelanggan Cari

Telepon E-mail

Jenis kelamin Alamat Kode Pos Status hapus -C3

MU DESIGN SHOP

Navigasi :

1. Klik beranda untuk menuju C2 2.Klik data master, pengolahan

pelanggan untuk menuju C3 3.Klik data master, pengolahan provinsi

untuk menuju C4

4.Klik data master, pengolahan kota untuk menuju C5

5.Klik data master, pengolahan perusahaan kirim untuk menuju C6 6.Klik data master, pengolahan kategori

untuk menuju C7

7.Klik data master, pengolahan produk untuk menuju C8

8.Klik data master, pengolahan pemesanan untuk menuju C9 9.Klik data master, pengolahan

pengiriman untuk menuju C10 10.Klik Laporan untuk menuju C11 11.Klik profil untuk menuju C13 12.Klik logout untuk keluar

Gambar 3.36 Tampilan Pengelohan Pelanggan

4. Perancangan Antarmuka Pengolahan Provinsi (C4)

MENU

Nama Provinsi

BERANDA DATA MASTER LAPORAN PROFIL DATABASE BACKUP FILE LOGOUT

TAMBAH PROVINSI BARU

Simpan Reset ID Provinsi Cari -Status hapus Nama ID Provinsi C4 MU DESIGN SHOP Navigasi :

1. Klik beranda untuk menuju C2 2.Klik data master, pengolahan

pelanggan untuk menuju C3 3.Klik data master, pengolahan provinsi

untuk menuju C4

4.Klik data master, pengolahan kota untuk menuju C5

5.Klik data master, pengolahan perusahaan kirim untuk menuju C6 6.Klik data master, pengolahan kategori

untuk menuju C7

7.Klik data master, pengolahan produk untuk menuju C8

8.Klik data master, pengolahan pemesanan untuk menuju C9 9.Klik data master, pengolahan

pengiriman untuk menuju C10 10.Klik Laporan untuk menuju C11

11.Klik profil untuk menuju C13 12.Klik logout untuk keluar

Gambar 3.37 Tampilan Pengolahan Provinsi

5. Perancangan Antarmuka Pengolahan Kota (C5)

MENU

Nama Kota

BERANDA DATA MASTER LAPORAN PROFIL DATABASE BACKUP FILE LOGOUT

TAMBAH KOTA BARU

Simpan Reset ID Provinsi Cari Status hapus Provinsi Kota ID -C5 MU DESIGN SHOP Navigasi :

1.Klik beranda untuk menuju C2 2.Klik data master, pengolahan pelanggan

untuk menuju C3

3.Klik data master, pengolahan provinsi untuk menuju C4

4.Klik data master, pengolahan kota untuk menuju C5

5.Klik data master, pengolahan perusahaan kirim untuk menuju C6 6.Klik data master, pengolahan kategori

untuk menuju C7

7.Klik data master, pengolahan produk untuk menuju C8

8.Klik data master, pengolahan pemesanan untuk menuju C9

9.Klik data master, pengolahan pengiriman untuk menuju C10

10.Klik Laporan untuk menuju C11 11.Klik profil untuk menuju C13 12.Klik logout untuk keluar

Gambar 3.38 Tampilan PengolahanKota

MENU

Nama Provinsi

BERANDA DATA MASTER LAPORAN PROFIL DATABASE BACKUP FILE LOGOUT

TAMBAH PROVINSI BARU

Simpan Reset

Nama perusahaan kirim Cari

Status hapus Website Nama perusahaan ID -C6 MU DESIGN SHOP Navigasi :

1.Klik beranda untuk menuju C2 2.Klik data master, pengolahan pelanggan

untuk menuju C3

3.Klik data master, pengolahan provinsi untuk menuju C4

4.Klik data master, pengolahan kota untuk menuju C5

5.Klik data master, pengolahan perusahaan kirim untuk menuju C6 6.Klik data master, pengolahan kategori

untuk menuju C7

7.Klik data master, pengolahan produk untuk menuju C8

8.Klik data master, pengolahan pemesanan untuk menuju C9

9.Klik data master, pengolahan pengiriman untuk menuju C10

10.Klik Laporan untuk menuju C11 11.Klik profil untuk menuju C13 12.Klik logout untuk keluar

Gambar 3.39 Tampilan PengolahanPerusahaan Kirim

MENU

Nama Provinsi

BERANDA DATA MASTER LAPORAN PROFIL DATABASE BACKUP FILE LOGOUT

TAMBAH PROVINSI BARU

Simpan Reset ID Kategori Cari Status hapus Nama ID Kategori -C7 MU DESIGN SHOP Navigasi :

1. Klik beranda untuk menuju C2 2.Klik data master, pengolahan pelanggan

untuk menuju C3

3.Klik data master, pengolahan provinsi untuk menuju C4

4.Klik data master, pengolahan kota untuk menuju C5

5.Klik data master, pengolahan perusahaan kirim untuk menuju C6 6.Klik data master, pengolahan kategori

untuk menuju C7

7.Klik data master, pengolahan produk untuk menuju C8

8.Klik data master, pengolahan pemesanan untuk menuju C9

9.Klik data master, pengolahan pengiriman untuk menuju C10

10.Klik Laporan untuk menuju C11 11.Klik profil untuk menuju C13 12.Klik logout untuk keluar

Gambar 3.40 Tampilan PengolahanKategori

MENU

Nama Provinsi

BERANDA DATA MASTER LAPORAN PROFIL DATABASE BACKUP FILE LOGOUT

TAMBAH PROVINSI BARU

Simpan Reset

Kode produk Cari

Nama Gambar

Kode kategori deskripi Status hapus -C8

MU DESIGN SHOP

Navigasi :

1. Klik beranda untuk menuju C2 2.Klik data master, pengolahan

pelanggan untuk menuju C3 3.Klik data master, pengolahan provinsi

untuk menuju C4

4.Klik data master, pengolahan kota untuk menuju C5

5.Klik data master, pengolahan perusahaan kirim untuk menuju C6 6.Klik data master, pengolahan kategori

untuk menuju C7

7.Klik data master, pengolahan produk untuk menuju C8

8.Klik data master, pengolahan pemesanan untuk menuju C9 9.Klik data master, pengolahan

pengiriman untuk menuju C10 10.Klik Laporan untuk menuju C11 11.Klik profil untuk menuju C13 12.Klik logout untuk keluar

Gambar 3.41 Tampilan PengolahanProduk

MENU

BERANDA DATA MASTER LAPORAN PROFIL DATABASE BACKUP FILE LOGOUT

ID Pelanggan Nama Pelanggan

Status pemesanan Cari

Total bayar

Tanggal Pesan Status hapus

-C9

MU DESIGN SHOP

Navigasi :

1.Klik beranda untuk menuju C2 2.Klik data master, pengolahan

pelanggan untuk menuju C3 3.Klik data master, pengolahan

provinsi untuk menuju C4 4.Klik data master, pengolahan kota

untuk menuju C5

5.Klik data master, pengolahan perusahaan kirim untuk menuju C6 6.Klik data master, pengolahan

kategori untuk menuju C7 7.Klik data master, pengolahan

produk untuk menuju C8

8.Klik data master, pengolahan pemesanan untuk menuju C9 9.Klik data master, pengolahan

pengiriman untuk menuju C10 10.Klik Laporan untuk menuju C11 11.Klik profil untuk menuju C13 12.Klik logout untuk keluar

Gambar 3.42 Tampilan PengolahanPemesanan

MENU BERANDA DATA MASTER LAPORAN PROFIL DATABASE BACKUP FILE LOGOUT

ID Nama penerima

Status pengiriman Cari

Perusahaan pengiriman Tanggal kirim Tanggal terima No Resi Pengiriman Status hapus -C10

MU DESIGN SHOP

Navigasi :

1. Klik beranda untuk menuju C2

2.Klik data master, pengolahan pelanggan untuk menuju C3 3.Klik data master, pengolahan

provinsi untuk menuju C4 4.Klik data master, pengolahan

kota untuk menuju C5 5.Klik data master, pengolahan

perusahaan kirim untuk menuju C6

6.Klik data master, pengolahan kategori untuk menuju C7 7.Klik data master, pengolahan

produk untuk menuju C8 8.Klik data master, pengolahan

pemesanan untuk menuju C9 9.Klik data master, pengolahan

pengiriman untuk menuju C10 10.Klik Laporan untuk menuju

C11

11.Klik profil untuk menuju C13 12.Klik logout untuk keluar

Gambar 3.43 Tampilan Pengelolaan Pengiriman

MENU

Jenis laporan Periode

BERANDA DATA MASTER LAPORAN PROFIL DATABASE BACKUP FILE LOGOUT

Tampil Laporan C11

MU DESIGN SHOP

Navigasi :

1. Klik beranda untuk menuju C2

2.Klik data master, pengolahan pelanggan untuk menuju C3

3.Klik data master, pengolahan provinsi untuk menuju C4

4.Klik data master, pengolahan kota untuk menuju C5

5.Klik data master, pengolahan perusahaan kirim untuk menuju C6

6.Klik data master, pengolahan kategori untuk menuju C7

7.Klik data master, pengolahan produk untuk menuju C8

8.Klik data master, pengolahan pemesanan untuk menuju C9

9.Klik data master, pengolahan pengiriman untuk menuju C10

10.Klik Laporan untuk menuju C11 11.Klik profil untuk menuju C13 12.Klik logout untuk keluar

Gambar 3.44 Tampilan Pengolahan Laporan

MENU

BERANDA DATA MASTER LAPORAN PROFIL DATABASE BACKUP FILE LOGOUT

ID

Pemesanan Tanggal bayar

Status bayar Cari

Bank

Tipe bayar No.Rekening Kode transaksi Status hapus -C12

MU DESIGN SHOP

Navigasi :

1. Klik beranda untuk menuju C2 2.Klik data master, pengolahan

pelanggan untuk menuju C3 3.Klik data master, pengolahan provinsi

untuk menuju C4

4.Klik data master, pengolahan kota untuk menuju C5

5.Klik data master, pengolahan perusahaan kirim untuk menuju C6 6.Klik data master, pengolahan kategori

untuk menuju C7

7.Klik data master, pengolahan produk untuk menuju C8

8.Klik data master, pengolahan pemesanan untuk menuju C9 9.Klik data master, pengolahan

pengiriman untuk menuju C10 10.Klik Laporan untuk menuju C11 11.Klik profil untuk menuju C13 12.Klik logout untuk keluar

Gambar 3.45 Tampilan Status Bayar

MENU

Input password baru Input password lama Input lagi Password baru

BERANDA DATA MASTER LAPORAN PROFIL DATABASE BACKUP FILE LOGOUT

UPDATE

PROFIL ADMIN

C13

MU DESIGN SHOP

Navigasi :

1.Klik beranda untuk menuju C2 2.Klik data master, pengolahan

pelanggan untuk menuju C3 3.Klik data master, pengolahan provinsi

untuk menuju C4

4.Klik data master, pengolahan kota untuk menuju C5

5.Klik data master, pengolahan perusahaan kirim untuk menuju C6 6.Klik data master, pengolahan kategori

untuk menuju C7

7.Klik data master, pengolahan produk untuk menuju C8

8.Klik data master, pengolahan pemesanan untuk menuju C9 9.Klik data master, pengolahan

pengiriman untuk menuju C10 10.Klik Laporan untuk menuju C11 11.Klik profil untuk menuju C13 12.Klik logout untuk keluar

Gambar 3.46 Tampilan Profile Admin 3.1.9.2 Perancangan Antarmuka Pelanggan

1. Perancangan Antarmuka Beranda (B1)

BERANDA

KERANJANG

KATEGORI

LAYANAN PELANGGAN

KATEGORI BUDGET

GAMBAR GAMBAR GAMBAR

GAMBAR GAMBAR GAMBAR

CARI JERSEY TAS JAKET LOGOUT HUBUNGI KAMI PETUNJUK PEMBAYARAN PEMESANAN PROFIL B1 MU DESIGN SHOP Navigasi :

1. Klik beranda untuk menuju B1 2. Klik profil untuk menuju B2 3. Klik pemesanan untuk menuju

B3

4. Klik checkout untuk menuju B6 5. Klik pembayaran untuk menuju

B7

Gambar 3.47 Tampilan Beranda

BERANDA KERANJANG KATEGORI LAYANAN PELANGGAN JERSEY TAS JAKET LOGOUT HUBUNGI KAMI PETUNJUK PEMBAYARAN PEMESANAN PROFIL GANTI PASSWORD PROFIL PELANGGAN B2 Navigasi :

1. Klik beranda untuk menuju B1 2. Klik profil untuk menuju B2 3. Klik pemesanan untuk menuju

B3

4. Pilih pesanan untuk menuju B4 5. Klik checkout untuk menuju B6 6. Klik pembayaran untuk menuju

B7

Gambar 3.48 Profil Pelanggan

3. Perancangan Antarmuka Pemesanan(B3)

BERANDA PROFIL PEMESANAN PEMBAYARAN PETUNJUK HUBUNGI KAMI LOGOUT

PEMESANAN -STATUS TOTAL BAYAR BIAYA KIRIM TOTAL HARGA TANGGAL PEMESANAN ID B3 Navigasi :

1. Klik beranda untuk menuju B1 2. Klik profil untuk menuju B2 3. Tampilan pesanan untuk menuju

B5

4. Klik checkout untuk menuju B6 5. Klik pembayaran untuk menuju

B7

4. Perancangan Antarmuka Keranjang Pemesanan (B4)

Kode Produk Tanggal Update Deskripsi Ukuran Tersedia

BERANDA PROFIL PEMESANAN PEMBAYARAN PETUNJUK HUBUNGI KAMI LOGOUT

JAKET KATEGORI RATING KERANJANGAN B4 GAMBAR Navigasi :

1. Klik beranda untuk menuju B1 2. Klik profil untuk menuju B2 3. Klik pemesanan untuk menuju

B3

4. Pilih pesanan untuk menuju B4 5. Klik checkout untuk menuju B6 6. Klik pembayaran untuk menuju

B7

Gambar 3.50 Tampilan Keranjang Pemesanan

5. Perancangan Antarmuka Deskripsi Pesanan (B5)

BERANDA PROFIL PEMESANAN PEMBAYARAN PETUNJUK HUBUNGI KAMI LOGOUT

PEMESANAN AKSI DISKON SUB TOTAL BERAT QTY HARGA NAMA PRODUK B5 Navigasi :

1. Klik beranda untuk menuju B1 2. Klik profil untuk menuju B2 3. Klik pemesanan untuk menuju

B3

4. Tampilan pesanan untuk menuju B5

5. Klik checkout untuk menuju B6 6. Klik pembayaran untuk menuju

B7

6. Perancangan Antarmuka Checkout (B6)

BERANDA PROFIL PEMESANAN PEMBAYARAN PETUNJUK HUBUNGI KAMI LOGOUT

PEMESANAN -STATTUS TOTAL BAYAR BIAYA KIRIM TOTAL HARGA TANGGAL PEMESANAN ID B6 Navigasi :

1. Klik beranda untuk menuju B1 2. Klik profil untuk menuju B2 3. Klik pemesanan untuk menuju

B3

4. Pilih pesanan untuk menuju B4 5. Tampilan pesanan untuk menuju

B5

6. Klik checkout untuk menuju B6 7. Klik pembayaran untuk menuju

B7

Gambar 3.52 Tampilan Checkout

7. Perancangan Antarmuka Pembayaran (B7)

BERANDA PROFIL PEMESANAN PEMBAYARAN PETUNJUK HUBUNGI KAMI LOGOUT

PEMBAYARAN B7

Navigasi :

1. Klik beranda untuk menuju B1 2. Klik profil untuk menuju B2 3. Klik pemesanan untuk menuju

B3

4. Klik checkout untuk menuju B6 5. Klik pembayaran untuk menuju

B7

Gambar 3.53 Tampilan Pembayaran 3.1.9.3 Perancangan Antarmuka Pengunjung

Email Password

BERANDA PENDAFTARAN PETUNJUK HUBUNGI KAMI

LOGIN

KATEGORI

LAYANAN PELANGGAN

KATEGORI BUDGET

GAMBAR GAMBAR GAMBAR

GAMBAR GAMBAR GAMBAR CARI JERSEY TAS JAKET LOGIN A1 Navigasi :

1. Klik Beranda untuk menuju A1 2. Klik pendaftaran untuk menuju A2 3. Klik Petunjuk untuk menuju A3 4. Klik hubungi kami untuk menuju

A4

Gambar 3.54 Tampilan Beranda

2. Perancangan Antarmuka Pendaftaran (A2)

Email Password

BERANDA PENDAFTARAN PETUNJUK HUBUNGI KAMI

LOGIN KATEGORI LAYANAN PELANGGAN JERSEY TAS JAKET PENDAFTARAN KETENTUAN LAYANAN LOGIN A2 Navigasi :

1.Klik Beranda untuk menuju A1 2.Klik pendaftaran untuk menuju A2 3.Klik Petunjuk untuk menuju A3 4Klik hubungi kami untuk menuju

A4

4. Perancangan Antarmuka Petunjuk (A3)

Email

Password

BERANDA PENDAFTARAN PETUNJUK HUBUNGI KAMI

LOGIN KATEGORI LAYANAN PELANGGAN JERSEY TAS JAKET

CARA MELAKUKAN PESANAN

KETENTUAN LAYANAN LOGIN

A3

Navigasi :

1. Klik Beranda untuk menuju A1 2. Klik pendaftaran untuk menuju

A2

3. Klik Petunjuk untuk menuju A3 4. Klik hubungi kami untuk menuju

A4

Gambar 3.56 Tampilan Petunjuk

Email

Password

BERANDA PENDAFTARAN PETUNJUK HUBUNGI KAMI

LOGIN KATEGORI LAYANAN PELANGGAN JERSEY TAS JAKET HUBUNGI KAMI KIRIM PESAN LOGIN A4 Navigasi :

1. Klik Beranda untuk menuju A1 2. Klik pendaftaran untuk menuju

A2

3. Klik Petunjuk untuk menuju A3 4. Klik hubungi kami untuk menuju

A4

Gambar 3.57 Tampilan Hubungi Kami 3.1.10 Perancangan Pesan

Perancangan pesan yang terdapat pada sistem ini dapat dilihat pada gambar berikut :

Provinsi maluku sudah pernah disimpan D4

Anda yakin hapus produk ini? D9

Kategori sudah ada D7

Nama Kota harus diisi D6

Tidak boleh angka D5

Produk sudah ada D8

Stok barang kurang D10

Kecematan harus dipilih D15

Kota harus dipilih D14

Provinsi dan kota harus dipilih D13 Username yang anda

masukan tidak terdaftar. Silahkan ulangi proses

loginnya. D12

Password yang anda masukan salah. Silahkan ulangi proses

loginnya. D11

Kode Pos Harus Diisi D17

Alamat Harus Diisi D16

Kode Pos Harus Berisi 5 Angka D18

Email Harus Diisi D19

E-Mail tidak valid D20

Jumlah yang diinput harus berupa karakter

angka D27

Password yang anda masukan salah D25

Jawaban Harus Diisi D3

Password tidak sesuai D22

Password Harus Diisi D21

E-Mail yang anda masukan tidak terdaftar

D24

Jumlah pemesanan tidak boleh kurang dari

0 D29

Jumlah pemesanan tidak boleh lebih dari stok yang tersedia D28

Jumlah pemesanan tidak boleh 0 D26

Tanggal Harus di isi D34 Pembayaran tidak sesuai D33 Pembayaran harus di sis D32

No. rekening harus di isi D31

Jawaban keaman harus di isi D30

No Resi Harus Diisi D39

Apakah anda yakin akan menyimpan data

pengiriman ini? D38

Apakah anda yakin akan mengubah status

pembayaran ini? D37

Status Pemesanan Telah Disetujui D36

Apakah anda yakin akan menyetujui pemesanan ini? D35 Nama Provinsi tidak

boleh kosong D2

Apakah anda yakin akan menghapus data

provinsi Maluku D1

Provinsi Harus Dipilih D3

Kota Harus Dipilih D40

Nama Kecamatan tidak boleh kosong D41

Nama Kategori tidak boleh kosong D48

Jenis Pengiriman Harus Dipilih D46

Nama Jenis Pengiriman harus diisi D44 Website perusahaan harus diisi D43 Nama Perusahaan tidak boleh kosong D42

Apakah anda yakin akan menghapus jenis

pengiriman Reguler? D45

Kategori Harus Dipilih D50

Apakah anda yakin akan menghapus data

kategori Jersey? D49

Lama Pengiriman tidak boleh kosong D47

Gambar harus dipilih D55

Apakah anda yakin akan menghapus data

produk Jersey Aon ? D54

Deskripsi harus diisi D53

Nama produk harus diisi D52

Kode produk harus diisi D51

Ukuran tidak boleh kosong D56

Berat tidak boleh kosong D57

Stok harus berupa angka D65

Diskon harus berupa angka D63

Harga harus berupa angka D60

Harga tidak boleh kosong D59

Berat harus berupa angka D58

Diskon tidak boleh kosong D62

Stok tidak boleh kosong D64

Gambar 3.58 Perancangan pesan

Dalam dokumen Pembangunan e-commerce pada MU Design Shop (Halaman 159-177)

Dokumen terkait