Perancangan Antar Muka Admin - Perancangan Antar Muka

ANALISIS DAN PERANCANGAN SISTEM

6. Mozila Firefox sebagai browser

3.4 Perancangan Arsitektur

3.4.2 Perancangan Antar Muka

3.4.2.2 Perancangan Antar Muka Admin

1. Perancangan Antamuka Login Admin

Berikut dapat dilihat perancangan antar muka login admin dari pembangunan situs e-commerce pada toko wardah shop yang tercantum pada gambar 3.45 dibawah ini:

A01 ^{Klik Lupa Password}_{Menuju A02}

Klik Login Menuju A03

Email Password Remember me Lupa Password ? Login Login

Gambar 3.45 Perancangan Antarmuka Login Admin

2. Perancangan Antamuka Lupa Password

Berikut dapat dilihat perancangan antar muka lupa password dari pembangunan situs e-commerce pada toko wardah shop yang tercantum pada gambar 3.46 dibawah ini:

A02 Klik Kembali Menuju A01

<< Kembali _{Kirim Password} Login

3. Perancangan Antamuka Menu Admin

Berikut dapat dilihat perancangan antar muka menu admin dari pembangunan situs e-commerce pada toko wardah shop yang tercantum pada gambar 3.47 dibawah ini:

A03

Klik Control Panel Menuju A03 Klik Data Master - Klik Kategori menuju A04 - Klik Detail Barang menuju A05 - Klik Rekening menuju A06 - Klik Provinsi menuju A07 - Klik Kota menuju A08 - Klik Hubungi menuju A09 - Klik Testimonial menuju A10 - Klik Jasa Pengiriman menuju A11 - Klik Jenis Pengiriman menuju A12 - Klik Ukuran menuju A13 - Klik Warna menuju A14 - Klik Member menuju A15 - Klik Kurs menuju A16 - Klik Komplain menuju A17 - Klik Ongkos Kirim menuju A28 - Klik PengolahanDiskon menuju A29 Klik Data Transaksi menuju A18 Klik Data Retur menuju A19 Klik Laporan

- Klik Laporan Harian menuju A20 - Klik Laporan Bulanan menuju A21 - Klik Laporan Tahunan menuju A22 - Klik Laporan Barang menuju A23 - Klik Laporan Retur menuju A24 Klik Pengaturan

- Klik Ubah Profile menuju A25 - Klik Ubah Password menuju A26 Klik Logout menuju A27 Administrator

Control Panel Data Master Data Transaksi Data Retur Laporan Pengaturan Logout

Control Panel

gambar gambar gambar gambar

gambar gambar gambar gambar Konfigurasi Member Konfigurasi kontak Konfigurasi Testimoni Konfigurasi Barang Konfigurasi Rekening Konfigurasi Jasa Pengiriman Konfigurasi Komplain Konfigurasi Kategori Data

Transaksi ^{Data Retur} Konfigurasi

Profile ^Logout

4. Perancangan Antamuka Kategori

Berikut dapat dilihat perancangan antar muka kategori dari pembangunan situs e-commerce pada toko wardah shop yang tercantum pada gambar 3.48 dibawah ini:

A04

Klik Control Panel Menuju A03 Klik Data Master - Klik Kategori menuju A04 - Klik Barang menuju A28 - Klik Detail Barang menuju A05 - Klik Rekening menuju A06 - Klik Provinsi menuju A07 - Klik Kota menuju A08 - Klik Hubungi menuju A09 - Klik Testimonial menuju A10 - Klik Jasa Pengiriman menuju A11 - Klik Jenis Pengiriman menuju A12 - Klik Ukuran menuju A13 - Klik Warna menuju A14 - Klik Member menuju A15 - Klik Kurs menuju A16 - Klik Komplain menuju A17 - Klik Ongkos Kirim menuju A29 - Klik PengolahanDiskon menuju A30 Klik Data Transaksi menuju A18 Klik Data Retur menuju A19 Klik Laporan

- Klik Laporan Harian menuju A20 - Klik Laporan Bulanan menuju A21 - Klik Laporan Tahunan menuju A22 - Klik Laporan Barang menuju A23 - Klik Laporan Retur menuju A24 Klik Pengaturan - Klik Ubah Profile menuju A25 - Klik Ubah Password menuju A26 Klik Logout menuju A27 Administrator

Control Panel Data Master Data Transaksi Data Retur Laporan Pengaturan Logout

Pengaturan Kategori

Data Kategori Tambah Hapus

No Nama Keterangan Ubah

Ubah

Page of 1

Gambar 3.48 Perancangan Antarmuka Kategori

Berikut dapat dilihat perancangan antar muka tambah kategori dari pembangunan situs e-commerce pada toko wardah shop yang tercantum pada gambar 3.49 dibawah ini:

A04

Control Panel Data Master Data Transaksi Data Retur Laporan Pengaturan Logout

Pengaturan Kategori

Tambah Kategori

Nama :

Keterangan : Tambah Cancel

5. Perancangan Antamuka Barang

Berikut dapat dilihat perancangan antar muka barang dari pembangunan situs e-commerce pada toko wardah shop yang tercantum pada gambar 3.50 dibawah ini:

A28

Administrator

Control Panel Data Master Data Transaksi Data Retur Laporan Pengaturan Logout

Pengaturan Barang Data Barang Tambah Hapus No Kategori SEO Ubah Page of 1

Nama Barang Deskripsi Rating Voter Total Viewed

Gambar 3.50 Perancangan Antarmuka Barang

Berikut dapat dilihat perancangan antar muka tambah barang dari pembangunan situs e-commerce pada toko wardah shop yang tercantum pada gambar 3.51 dibawah ini:

A28

Control Panel Data Master Data Transaksi Data Retur Laporan Pengaturan Logout

Pengaturan Barang Tambah Barang Nama Kategori : SEO : Nama Barang : Deskripsi : Upload : Save Cancel Browse

6. Perancangan Antamuka Detail Barang

Berikut dapat dilihat perancangan antar muka detail barang dari pembangunan situs e-commerce pada toko wardah shop yang tercantum pada gambar 3.52 dibawah ini:

A05

Administrator

Control Panel Data Master Data Transaksi Data Retur Laporan Pengaturan Logout

Pengaturan Detail Barang

Data Detail Barang Tambah Hapus

No Nama Barang Warna

Ubah

Page of 1

Ukuran Harga Diskon Stok Berat

Gambar 3.52 Perancangan Antarmuka Detail Barang

Berikut dapat dilihat perancangan antar muka tambah detail barang dari pembangunan situs e-commerce pada toko wardah shop yang tercantum pada gambar 3.53 dibawah ini:

A05

Control Panel Data Master Data Transaksi Data Retur Laporan Pengaturan Logout

Pengaturan Detail Barang

Tambah Detail Barang Barang : Warna : Ukuran : Harga : Diskon : Stok : Berat : Promo : Tambah Cancel Tidak Ya

7. Perancangan Antamuka Rekening

Berikut dapat dilihat perancangan antar muka Rekening dari pembangunan situs e-commerce pada toko wardah shop yang tercantum pada gambar 3.54 dibawah ini:

A06

Administrator

Control Panel Data Master Data Transaksi Data Retur Laporan Pengaturan Logout

Pengaturan Rekening Data Rekening Tambah Hapus No Nama Bank Ubah Page of 1

Cabang No. Rekening Ubah

Gambar 3.54 Perancangan Antarmuka Rekening

Berikut dapat dilihat perancangan antar muka tambah rekening dari pembangunan situs e-commerce pada toko wardah shop yang tercantum pada gambar 3.55 dibawah ini:

A06

Control Panel Data Master Data Transaksi Data Retur Laporan Pengaturan Logout

Pengaturan Rekening Tambah Rekening Nama : Bank : Cabang : No. Rekening : Gambar : Tambah Cancel Browse

8. Perancangan Antamuka Provinsi

Berikut dapat dilihat perancangan antar muka Provinsi dari pembangunan situs e-commerce pada toko wardah shop yang tercantum pada gambar 3.56 dibawah ini:

A07

Administrator

Control Panel Data Master Data Transaksi Data Retur Laporan Pengaturan Logout

Pengaturan Provinsi Data Provinsi Tambah Hapus No Nama Ubah Ubah Page of 1

Gambar 3.56 Perancangan Antarmuka Provinsi

Berikut dapat dilihat perancangan antar muka tambah provinsi dari pembangunan situs e-commerce pada toko wardah shop yang tercantum pada gambar 3.57 dibawah ini:

A07

Control Panel Data Master Data Transaksi Data Retur Laporan Pengaturan Logout

Pengaturan Provinsi

Tambah Provinsi

Nama :

Tambah Cancel

9. Perancangan Antamuka Kota

Berikut dapat dilihat perancangan antar muka Kota dari pembangunan situs e-commerce pada toko wardah shop yang tercantum pada gambar 3.58 dibawah ini:

A08

Administrator

Control Panel Data Master Data Transaksi Data Retur Laporan Pengaturan Logout

Pengaturan Kota

Data Kota Tambah Hapus

NoNama Provinsi Nama Kota

Ubah

Page of 1

Kabupaten / Kota Ubah

Gambar 3.58 Perancangan Antarmuka Kota

Berikut dapat dilihat perancangan antar muka tambah kota dari pembangunan situs e-commerce pada toko wardah shop yang tercantum pada gambar 3.59 dibawah ini:

A08

Control Panel Data Master Data Transaksi Data Retur Laporan Pengaturan Logout

Pengaturan Kota Tambah Kota Nama Provinsi : Nama Kota : Kabupaten / Kota : Tambah Cancel

10.Perancangan Antamuka Hubungi

Berikut dapat dilihat perancangan antar muka Hubungi dari pembangunan situs e-commerce pada toko wardah shop yang tercantum pada gambar 3.60 dibawah ini:

A09

Administrator

Control Panel Data Master Data Transaksi Data Retur Laporan Pengaturan Logout

Pengaturan Hubungi

Data Hubungi Hapus Lihat

No Status Tanggal

Page of 1

Nama Email Telepon Isi

Gambar 3.60 Perancangan Antarmuka Kota

11.Perancangan Antamuka Testimonial

Berikut dapat dilihat perancangan antar muka Testimonial dari pembangunan situs e-commerce pada toko wardah shop yang tercantum pada gambar 3.61dibawah ini:

A10

Control Panel Data Master Data Transaksi Data Retur Laporan Pengaturan Logout

Pengaturan Testimonial

Data Testimonial Hapus Lihat

No Status Tanggal

Page of 1

Nama Email Telepon Isi

12.Perancangan Antamuka Jasa Pengiriman

Berikut dapat dilihat perancangan antar muka Jasa Pengiriman dari pembangunan situs e-commerce pada toko wardah shop yang tercantum pada gambar 3.62 dibawah ini:

A11

Administrator

Control Panel Data Master Data Transaksi Data Retur Laporan Pengaturan Logout

Pengaturan Jasa Pengiriman

Data Jasa Pengiriman Tambah Hapus

No Nama Deskripsi

Ubah

Page of 1

Ubah

Gambar 3.62 Perancangan Antarmuka Jasa Pengiriman

Berikut dapat dilihat perancangan antar muka tambah Jasa Pengiriman dari pembangunan situs e-commerce pada toko wardah shop yang tercantum pada gambar 3.63 dibawah ini:

A11

Control Panel Data Master Data Transaksi Data Retur Laporan Pengaturan Logout

Pengaturan Jasa Pengiriman

Tambah Jasa Pengiriman Nama : Deskripsi :

Tambah Cancel

13.Perancangan Antamuka Jenis Pengiriman

Berikut dapat dilihat perancangan antar muka Jenis Pengiriman dari pembangunan situs e-commerce pada toko wardah shop yang tercantum pada gambar 3.64 dibawah ini:

A12

Administrator

Control Panel Data Master Data Transaksi Data Retur Laporan Pengaturan Logout

Pengaturan Jenis Pengiriman

Data Jenis Pengiriman Tambah Hapus

NoNama Provinsi Nama Jenis Pengiriman

Ubah

Page of 1

Ubah Deskripsi

Gambar 3.64 Perancangan Antarmuka Jenis Pengiriman

Berikut dapat dilihat perancangan antar muka tambah Jenis Pengiriman dari pembangunan situs e-commerce pada toko wardah shop yang tercantum

Dalam dokumen Pembangunan Aplikasi E-Commerce Wardah-Shop (Halaman 177-199)