Perancangan interface untuk aplikasi E-Commerce di Boutique Mja Collections adalah sebagai berikut :

3.4.3.1.1 3.4.3.1.1 PerancanganPerancanganPerancanganPerancangan AntarAntarAntarAntar MukaMukaMukaMuka MemberMemberMemberMember

1. Perancangan Antar Muka Halaman Beranda Member

T0 2

Kategori

Produk Terlaris Keranjang belanja

Yahoo Messanger Beranda Produk Keranjang Belanja Tentang Kami Kontak Cara Pembelian

Kete a ga :

• Klik e a da e uju T

• klik p oduk e uju T

• klik ke a ja g ela ja e uju T

• klik Te ta g ka i e uju T

• klik ko tak e uju T

• klik Ca a pe elia e uju T

• Klik fa e uju T

• Klik Desai se di i e uju T

• Klik P ofil saya e uju T

• klik histo y e uju T

• klik etu e uju T

• klik Log out e uju T

F a q Desain Sendiri Cari

LOGO

Produk Boutique Mja Collections

Footer

Gambar Gambar Gambar

Nama produk

harga ^{Nama produk}harga ^{Nama produk}harga

Gambar Gambar Gambar

Nama produk

harga ^{Nama produk}harga ^{Nama produk}harga

M e n u Produk Favorite Facebook Gambar Gambar Gambar

2. Perancangan Antar Muka Halaman Produk Member

T 0 3 Kategori Produk Terlaris Keranjang belanja Yahoo Messanger Beranda Produk Keranjang Belanja Tentang Kami Ko n ta k C ara Pembelian

Kete a g a : • Klik e a da e uju T • klik p oduk e uju T • klik ke a ja g ela ja

e uju T

• klik Te ta g ka i e uju T

• klik ko tak e uju T • klik Ca a pe elia

e uju T • Klik f a e uju T • Klik D esai se di i

e uju T • Klik P ofil saya e uju

• klik histo y e uju T • klik etu e uju T • klik Log out e uju T

F a q D esain Sendiri C ari

LOGO

Produk Boutique Mja C ollections

F ooter

Gambar Gambar Gambar

N ama produk

h a r g a ^{N ama produk}h a r g a ^{N ama produk}h a r g a

Gambar Gambar Gambar

N ama produk

h a r g a ^{N ama produk}h a r g a ^{N ama produk}h a r g a

M e n u Produk Favorite Facebook P R IA W A N IT A Gambar Gambar Gambar

Gambar 3.3.3.3. 42424242 AntarmukaAntarmukaAntarmukaAntarmuka ProdukProdukProdukProduk MemberMemberMemberMember

3. Perancangan Antar Muka Halaman Keranjang Belanja Member

T 0 4

Kategori

Produk Terlaris Keranjang belanja

Yahoo Messanger Beranda Produk Keranjang Belanja Tentang Kami Ko n ta k C ara Pembelian

Kete a g a : • Klik e a da e uju T • klik p oduk e uju T • klik ke a ja g ela ja

e uju T

• klik Te ta g ka i e uju T

• klik ko tak e uju T • klik Ca a pe elia

e uju T • Klik f a e uju T • Klik D esai se di i

e uju T • Klik P ofil saya e uju

• klik histo y e uju T • klik etu e uju T • klik Log out e uju T

F a q D esain Sendiri C ari

LOGO

Produk Boutique Mja C ollections

F ooter

M e n u

Produk Favorite

Facebook N o ^Gambar_Produk D etail Produk Ju m la h H a rg a Sub Total Aksi

H apus U pdate

Gambar

4. Perancangan Antar Muka Halaman Tentang Kami Member

T 0 5

Ka te g o ri

Pro d u k T e rla ris Ke ra n ja n g b e la n ja

Ya h o o M e ssa n g e r Be ra n d a Pro d u k Ke ra n ja n g Be la n ja T e n ta n g Ka m i Ko n ta k C a ra Pe m b e lia n

Ke te a g a : • Klik e a da e uju T • klik p oduk e uju T • klik ke a ja g e la ja e uju T • _{klik T e ta g ka i} _{e uju} T • klik ko ta k e uju T • klik C a a pe e lia e uju T • _{Klik f a} _{e uju T} • _{Klik D e sa i se di i} e uju T • Klik P ofil sa ya e uju

• klik histo y e uju T • _{klik e tu} _{e uju T} • klik Log out e uju T

F a q D e sa in Se n d iri C a ri

LO G O

P rofile P erusahaan M ja C ollections

F ooter M e n u Pro d u k F a vo rite F a ce b o o k L o g o Pe ru sa h a a n D e skrip si m e n g e n a i p ro file p e ru sa h a a n Gambar Gambar Gambar

Gambar 3.3.3.3. 44444444 AntarmukaAntarmukaAntarmuka TentangAntarmukaTentangTentangTentang KamiKamiKamiKami MemberMemberMemberMember

5. Perancangan Antar Muka Halaman Kontak Member

T 0 6

Kategori

Produk Terlaris Keranjang belanja

Yahoo Messanger Beranda Produk Keranjang Belanja Tentang Kami Ko n ta k C ara Pembelian

Kete a g a : • Klik e a da e uju T • klik p oduk e uju T • klik ke a ja g ela ja

e uju T

• klik Te ta g ka i e uju T

• klik ko tak e uju T • klik Ca a pe elia

e uju T • Klik f a e uju T • Klik D esai se di i

e uju T • Klik P ofil saya e uju

• klik histo y e uju T • klik etu e uju T • klik Log out e uju T

F a q D esain Sendiri C ari LOGO 1 H ubungi K ami F ooter M e n u Produk Favorite Facebook N a m a E mail S ubjek P esan K ir im Gambar Gambar Gambar

6. Perancangan Antar Muka Halaman Cara Pembelian Member

T0 7 Kategori Produk Terlaris Keranjang belanja Yahoo Messanger Beranda Produk Keranjang Belanja Tentang Kami Kontak Cara Pembelian

Kete a ga : • Klik e a da e uju T • klik p oduk e uju T • _{klik ke a ja g ela ja}

e uju T

• klik Te ta g ka i e uju T

• klik ko tak e uju T • klik Ca a pe elia

e uju T • Klik fa e uju T • Klik Desai se di i

e uju T • Klik P ofil saya e uju

• klik histo y e uju T • klik etu e uju T • klik Log out e uju T

F a q Desain Sendiri Cari LOGO 1 C ara Pembayaran Footer M e n u Produk Favorite Facebook Penjelasan Mengenai Cara Pembelian di website e -commerce mja collections

Gambar

GambarGambarGambar 3.3.3.3. 46464646 AntarmukaAntarmukaAntarmukaAntarmuka CaraCaraCaraCara PembelianPembelianPembelianPembelian MemberMemberMemberMember

7. Perancangan Antar Muka Halaman Faq Member

T 0 8

Kategori

Produk Terlaris Keranjang belanja

Yahoo Messanger Beranda Produk Keranjang Belanja Tentang Kami Ko n ta k C ara Pembelian

Kete a g a : • Klik e a da e uju T • klik p oduk e uju T • klik ke a ja g ela ja

e uju T

• klik Te ta g ka i e uju T

• klik ko tak e uju T • klik Ca a pe elia

e uju T • Klik f a e uju T • Klik D esai se di i

e uju T • Klik P ofil saya e uju

• klik histo y e uju T • klik etu e uju T • klik Log out e uju T

F a q D esain Sendiri C ari LOGO 1 F.A .Q F ooter M e n u Produk Favorite Facebook Penjelasan Mengenai FAQ ( Frekuensi Any Question ) di w ebsite e -commerce mja collections

Gambar

8. Perancangan Antar Muka Halaman Desain Sendiri Member

T 0 9 Kategori Produk Terlaris Keranjang belanja Yahoo Messanger Beranda Produk Keranjang Belanja Tentang Kami Ko n ta k C ara Pembelian

Kete a g a : • Klik e a da e uju T • klik p oduk e uju T • klik ke a ja g ela ja

e uju T

• klik Te ta g ka i e uju T

• klik ko tak e uju T • klik Ca a pe elia

e uju T • Klik f a e uju T • Klik D esai se di i

e uju T • Klik P ofil saya e uju

• klik histo y e uju T • klik etu e uju T • klik Log out e uju T

F a q D esain Sendiri C ari LOGO 1 D esain S endiri F ooter M e n u Produk Favorite Facebook Penjelasan Mengenai Syarat dan Ketentuan dari D esain Sendiri di w ebsite e - commerce mja collections

Gambar

GambarGambarGambar 3.3.3.3. 48484848 AntarmukaAntarmukaAntarmukaAntarmuka DesainDesainDesainDesain SendiriSendiriSendiriSendiri MemberMemberMemberMember

9. Perancangan Antar Muka Halaman Profil Saya Member

T 1 0

Kategori

Produk Terlaris Keranjang belanja

Yahoo Messanger Beranda Produk Keranjang Belanja Tentang Kami Ko n ta k C ara Pembelian

Kete a g a : • Klik e a da e uju T • klik p oduk e uju T • klik ke a ja g ela ja

e uju T

• klik Te ta g ka i e uju T

• klik ko tak e uju T • klik Ca a pe elia

e uju T • Klik f a e uju T • Klik D esai se di i

e uju T • Klik P ofil saya e uju

• klik histo y e uju T • klik etu e uju T • klik Log out e uju T

F a q D esain Sendiri C ari LOGO 1 P rofile F ooter M e n u Produk Favorite Facebook U PD ATE U sername E mail N a m a N o .T l p A lamat P rovinsi K o ta /K abupaten K ode P os Gambar Gambar Gambar

10. Perancangan Antar Muka Halaman History Member

T 1 1 Kategori Produk Terlaris Keranjang belanja Yahoo Messanger Beranda Produk Keranjang Belanja Tentang Kami Ko n ta k C ara Pembelian

Kete a g a : • Klik e a da e uju T • klik p oduk e uju T • klik ke a ja g ela ja

e uju T

• klik Te ta g ka i e uju T

• klik ko tak e uju T • klik Ca a pe elia

e uju T • Klik f a e uju T • Klik D esai se di i

e uju T • Klik P ofil saya e uju

• klik histo y e uju T • klik etu e uju T • klik Log out e uju T

F a q D esain Sendiri C ari LOGO 1 H istory P esanan F ooter M e n u Produk Favorite Facebook C ari C ari P esanan

N o .Order T gl.Order T gl.e x p ire S tatus Order S tatus B ayar S tatus P engiriman A ksi

Gambar

GambarGambarGambar 3.3.3.3. 50505050 AntarmukaAntarmuka HistoryAntarmukaAntarmukaHistoryHistoryHistory OrderOrderOrderOrder MemberMemberMemberMember

11. Perancangan Antar Muka Halaman Retur Member

T 1 2

Kategori

Produk Terlaris Keranjang belanja

Yahoo Messanger Beranda Produk Keranjang Belanja Tentang Kami Ko n ta k C ara Pembelian

Kete a g a : • Klik e a da e uju T • klik p oduk e uju T • klik ke a ja g ela ja

e uju T

• klik Te ta g ka i e uju T

• klik ko tak e uju T • klik Ca a pe elia

e uju T • Klik f a e uju T • Klik D esai se di i

e uju T • Klik P ofil saya e uju

• klik histo y e uju T • klik etu e uju T • klik Log out e uju T

F a q D esain Sendiri C ari LOGO 1 H istory P esanan F ooter M e n u Produk Favorite Facebook C ari C ari P esanan

N o Id retur Id order N ama P roduk Jumlah T gl.R etur A ksi

Gambar

3.4.3.1.2 3.4.3.1.23.4.3.1.2 PerancanganPerancanganPerancanganPerancangan AntarAntarAntarAntar MukaMukaMukaMuka KasirKasirKasirKasir

1. Perancangan Antarmuka Halaman Login Kasir

A0 1

Kete a ga

• Klik logi u tuk e uju A

username password lo g in Lupa Password Gambar Gambar Gambar

Gambar 3.3.3.3. 52525252 AntarmukaAntarmukaAntarmukaAntarmuka LoginLoginLoginLogin KasirKasirKasirKasir

2. Perancangan Antarmuka Halaman Home Kasir

A0 2

Kete a ga :

• Klik ho e e uju A

• Klik Pe golaha kelua e u AA

• Klik o de kelua e u A B

• Klik Pe gatu a kelua e u AC

• Klik logout e uju A

10 order terakhir

No order Nama member Tanggal order Tgl.expire Status order Status bayar _pengiriman^Status aksi detail H om e Pengolahan Order Pengaturan logout Gambar

3. Perancangan Antarmuka Halaman Kategori Produk

A A 2

Kete a ga :

• Klik ho e e uju A

• Klik Pe golaha kelua e u AA

• Klik o de kelua e u A B

• Klik pe gatu a kelua e u AC

• Klik ta ah katego i e uju AA

• Klik edit e uju AA

• Klik Log Out kelua e u A H om e Pengolahan Order Pengaturan logout TAMBAH KATEGORI kategori

No Nama kategori aksi

edit hapus

Gambar Gambar Gambar

Gambar 3.3.3.3. 54545454 AntarmukaAntarmukaAntarmukaAntarmuka KategoriKategoriKategoriKategori ProdukProdukProdukProduk

4. Perancangan Antarmuka Halaman Produk

A A 3

Kete a ga :

• Klik ho e e uju A

• Klik pe golaha kelua e u AA

• Klik o de kelua e u A B

• Klik pe gatu a kelua e u AC

• Klik logout e uju A

• Klik ta ah p oduk e uju AA

• Klik edit e uju AA

• Klik ta ah ga a e uju AA • Klik ta ah uku a e uju AA Produk Tambah produk

n o gambar Nama produk berat harga diskon _{m asuk}^Tgl. aksi

edit Tambah gambaar Tambah ukuran ^hapu_s

H om e Pengolahan Order Pengaturan logout Gambar Gambar

5. Perancangan Antarmuka Halaman Ongkos Kirim

A A 4

Kete a ga :

• Klik ho e e uju A

• Klik pe golaha kelua e u AA

• Klik o de kelua e u A B

• Klik pe gatu a kelua e u AC

• Klik logout e uju A

• Klik ta ah e uju A A

• Klik edit e uju AA

Ongkos Kirim Tambah ongkos

k ir im

N o Nama Kota Ongkos Kirim aksi edit hapus H om e Pengolahan Order Pengaturan logout Gambar

GambarGambar 3.Gambar3.3.3. 56565656 AntarmukaAntarmuka OngkosAntarmukaAntarmukaOngkosOngkosOngkos KirimKirimKirimKirim

6. Perancangan Antarmuka Halaman Provinsi

A A 5

Kete a ga :

• Klik ho e e uju A

• Klik pe golaha kelua e u AA

• Klik o de kelua e u A B

• Klik pe gatu a kelua e u AC

• Klik logout e uju A

• Klik ta ah p o i si e uju AA

• Klik edit e uju AA

• Klik hapus u tuk e ghapus p o i si H om e Pengolahan Order Pengaturan logout Provinsi

N o Nama provinsi aksi

edit hapus

C ari

provinsi ^cari ^Tambahprovinsi

Gambar Gambar Gambar

Gambar 3.3.3.3. 57575757 AntarmukaAntarmukaAntarmukaAntarmuka ProvinsiProvinsiProvinsiProvinsi

A A 6

Kete a ga :

• Klik ho e e uju A

• Klik pe golaha kelua e u AA

• Klik o de kelua e u A B

• Klik pe gatu a kelua e u AC

• Klik logout e uju A

• Klik ta ah kota e uju A A

• Klik edit e uju AA

• Klik hapus u tuk e ghapus kota H om e Pengolahan Order Pengaturan logout ko ta

N o Nama kota aksi

edit hapus

C ari kota cari _{Tambah kota}

provinsi

Gambar

GambarGambarGambar 3.3.3.3. 58585858 AntarmukaAntarmukaAntarmukaAntarmuka KotaKotaKotaKota

8. Perancangan Antarmuka Halaman Cara Pembelian

A A 7

Kete a ga :

• Klik ho e e uju A

• Klik pe golaha kelua e u AA

• Klik o de kelua e u A B

• Klik pe gatu a kelua e u AC

• Klik logout e uju A

• Klik update u tuk e gupdate a a pe elia H om e Pengolahan Order Pengaturan logout Cara pembelian update b a ck Gambar

GambarGambarGambar 3.3.3.3. 59595959 AntarmukaAntarmukaAntarmukaAntarmuka CaraCaraCaraCara PembelianPembelianPembelianPembelian

A A 8

Kete a ga :

• Klik ho e e uju A

• Klik pe golaha kelua e u AA

• Klik o de kelua e u A B

• Klik pe gatu a kelua e u AC

• Klik logout e uju A

• Klik update u tuk e gupdate sya at da ko disi H om e Pengolahan Order Pengaturan logout Syarat dan kondisi

update b a ck

Gambar

GambarGambarGambar 3.3.3.3. 60606060 AntarmukaAntarmuka SyaratAntarmukaAntarmukaSyaratSyaratSyarat dandandandan KondisiKondisiKondisiKondisi

10. Perancangan Antarmuka Halaman Tambah kategori Admin

A A 2 1

Kete a ga :

• Klik ho e e uju A

• Klik pe golaha kelua e u AA

• Klik o de kelua e u A B

• Klik pe gatu a kelua e u AC

• Klik logout e uju A

• Klik si pa u tuk e yi pa katego i a u

• Klik atal u tuk e atalka H om e Pengolahan Order Pengaturan logout kategori Nama kategori sim pan batal

Gambar Gambar Gambar

Gambar 3.3.3.3. 61616161 AntarmukaAntarmukaAntarmukaAntarmuka TambahTambahTambahTambah KategoriKategoriKategoriKategori

11. Perancangan Antarmuka Halaman Edit Kategori Produk

A A 2 2

Kete a ga :

• Klik ho e e uju A

• Klik pe golaha kelua e u AA

• Klik o de kelua e u A B

• Klik pe gatu a kelua e u AC

• Klik logout e uju A

• Klik update u tuk e gupdate katego i

• Klik atal u tuk e atalka kategori Nama kategori update batal H om e Pengolahan Order Pengaturan logout Gambar

GambarGambarGambar 3.3.3.3. 62626262 AntarmukaAntarmukaAntarmukaAntarmuka EditEditEditEdit KategoriKategoriKategoriKategori ProdukProdukProdukProduk

Dalam dokumen Membangun Aplikasi E-Commerce Penjualan Barang Di Boutique MJA Collections (Halaman 190-200)