3.5.2 Perancangan antarmuka
Perancangan antarmuka bertujuan untuk menggambarkan aplikasi yang akan dibangun. Sehingga akan lebih mudah dalam mengimplementasikan aplikasi
serta mempermudah pembuatan perancangan antar muka yang digunakan oleh pengguna sistem. Perancangan ini diimplementasikan menjadi sebuah program
yang utuh untuk digunakan oleh pengguna sistem. Rancangan antarmuka model sistem e-commerce adalah sebagai berikut :
3.5.2.1 Perancangan antarmuka Admin
1. Perancangan antarmuka login Berikut dapat dilihat perancangan antarmuka untuk admin di halaman
login pada gambar III-29 dibawah ini :
B01 - Klik login ke halaman
administrastor B02
Username : Password :
Login
Login Nama Layar
: B01 Ukuran Layar
: 1024 x 640 Font
: Arial Warna
: Putih
Gambar III-28 Halaman Login Admin
2. Perancangan Antarmuka Home
Berikut dapat dilihat perancangan antarmuka home dari pembangunan aplikasi e-commerce pada gambar III-30 dibawah ini:
B02 Header
- Klik login ke halaman administrastor B02
- Klik Home menuju B02
Nama Layar : B02
Ukuran Layar : 1024 x 640
Font : Arial
Warna : Putih
Home | Produk | Kategori | Detail Produk | Pemesanan | Member | Pembayaran
Text
Footer Data Kota
Data Provinsi Data Ongkir
Laporan Penjualan Setting
Logout
Gambar III-29 Halaman Home Admin
3. Perancangan Antarmuka Pengolahan Data Produk Berikut ini adalah halaman pengolahan data produk untuk admin, dimana
admin mengklik salah satu navigasi menu produk yang ada di aplikasi e- commerce pada gambar III-31 dibawah ini :
B02 Header
Data Produk | Data Detail Produk | Data Kategori | B03
Header - Klik login ke halaman
administrastor B02 - Klik Home menuju B02
- Klik Produk ke halaman pengolahan data produk di
B03
Nama Layar : B03
Ukuran Layar : 1024 x 640
Font : Arial
Warna : Putih
.: Form Pengolahan Data Produk :. id_produk
: Nama
: Deskripsi
: id_kategori
: Data Produk
Footer Home | Produk | Kategori | Detail Produk | Pemesanan | Member | Pembayaran
Tambah Reset
Id_Produk Nama
Deskripsi Id_kategori
Keterangan Detail edit hapus
Data Kota Data Provinsi
Data Ongkir Laporan Penjualan
Setting Logout
Gambar III-30 Halaman Pengolahan Data Produk
4. Perancangan Antarmuka Pengolahan Data Kategori
Berikut ini adalah halaman perancangan antarmuka pengolahan data akategori untuk admin, saat admin mengklik kategori di navigasi menu
aplikasi e-commerce yang dapat dilihat di gambar III-32 dibawah ini :
B02 Header
Data Produk | Data Detail Produk | Data Kategori | B04
Header - Klik login ke halaman
administrastor B02 - Klik Home menuju B02
- Klik Produk ke halaman pengolahan data produk di
B03 - Klik kategori ke halaman
pengolahan data kategori B04
Nama Layar : B04
Ukuran Layar : 1024 x 640
Font : Arial
Warna : Putih
.: Form Pengolahan Data Kategori :. id_kategori
: Nama
: Keterangan
: Data Kategori
Footer Home | Produk | Kategori | Detail Produk | Pemesanan | Member | Pembayaran
Tambah Reset
Id_Kategori Nama
Keterangan Action
Detail Edit Hapus Data Kota
Data Provinsi DataOngkir
Laporan Penjualan Setting
Logout
Gambar III-31 Halaman Pengolahan Data Kategori
5. Perancangan Antarmuka Pengolahan Data Detail Produk Berikut ini adalah perancangan antarmuka pengolahan data detail produk
untuk admin, dimana admin mengklik detail produk di navigasi menu aplikasi e-commerce yang dapat dilihat di gambar III-33 dibawah ini :
B02 Header
Data Produk | Data Detail Produk | Data Kategori | B05
Header - Klik login ke halaman
administrastor B02 - Klik Home menuju B02
- Klik Produk ke halaman pengolahan data produk di
B03 - Klik kategori ke halaman
pengolahan data kategori B04
- Klik detail produk ke halaman pengolahan data
detail produk B05
Nama Layar : B05
Ukuran Layar : 1024 x 640
Font : Arial
Warna : Putih
.: Form Pengolahan Data Detail Produk :. id_detail_produk
: Warna
: Ukuran
: id_produk
: Harga
: Stok
: Berat
: Diskon
: Gambar
:
Footer Home | Produk | Kategori | Detail Produk | Pemesanan | Member | Pembayaran
Tambah Reset
Data Kota Data Provinsi
Data Ongkir Laporan Penjualan
Setting Logout
Pilih Berkas Pilih Berkas
Pilih Berkas Id detail produk Warna Ukuran Harga Stok Berat Diskon Gambar Action
Detail Edit Hapus
Gambar III-32 Halaman Pengolahan Data Detail Produk
6. Perancangan Antarmuka Pengolahan Data Pemesanan Berikut ini adalah perancangan antarmuka pengolahan data pemesanan
untuk admin, dimana admin mengklik pemesanan di navigasi menu aplikasi e-commerce yang dapat dilihat di gambar III-34 dibawah ini :
B02 Header
B06 Header
- Klik login ke halaman administrastor B02
- Klik Home menuju B02 - Klik Produk ke halaman
pengolahan data produk di B03
- Klik kategori ke halaman pengolahan data kategori
B04 - Klik detail produk ke
halaman pengolahan data detail produk B05
- Klik pemesanan menuju ke halaman pemesanan
B06
Nama Layar : B06
Ukuran Layar : 1024 x 640
Font : Arial
Warna : Putih
.: Form Pengolahan Data Pemesanan :.
Footer Home | Produk | Kategori | Detail Produk | Pemesanan | Member | Pembayaran
Data Kota Data Provinsi
Data Ongkir Laporan Penjualan
Setting Logout
Gambar III-33 Halaman Pengolahan Data Pemesanan
7. Perancangan Antarmuka Pengolahan Data Member Berikut ini adalah perancangan antarmuka pengolahan data member untuk
admin, dimana admin mengklik member di navigasi menu aplikasi e- commerce yang dapat dilihat di gambar III-35 dibawah ini :
B02 Header
B07 Header
- Klik login ke halaman administrastor B02
- Klik Home menuju B02 - Klik Produk ke halaman
pengolahan data produk di B03
- Klik kategori ke halaman pengolahan data kategori
B04 - Klik detail produk ke
halaman pengolahan data detail produk B05
- Klik pemesanan menuju ke halaman pemesanan
B06 -
Klik member
untuk menuju
ke halaman
pengolahan data member B07
Nama Layar : B07
Ukuran Layar : 1024 x 640
Font : Arial
Warna : Putih
.: Form Pengolahan Data Member :.
Footer Home | Produk | Kategori | Detail Produk | Pemesanan | Member | Pembayaran
Data Kota Data Provinsi
Data Ongkir Laporan Penjualan
Setting Logout
Id_member Action detail delete
Gambar III-34 Halaman Pengolahan Data Member
8. Perancangan Antarmuka Pengolahan Data Pembayaran Berikut ini adalah perancangan antarmuka pengolahan data pembayaran
untuk admin, dimana admin mengklik pembayaran di navigasi menu aplikasi e-commerce yang dapat dilihat di gambar III-36 dibawah ini :
B02 Header
B08 Header
- Klik login ke halaman administrastor B02
- Klik Home menuju B02 - Klik Produk ke halaman
pengolahan data produk di B03
- Klik kategori ke halaman pengolahan data kategori
B04 - Klik detail produk ke
halaman pengolahan data detail produk B05
- Klik pemesanan menuju ke halaman pemesanan
B06 -
Klik member
untuk menuju
ke halaman
pengolahan data member B07
- Klik pembayaran untuk menuju pengolahan data
pembayaran B08
Nama Layar : B08
Ukuran Layar : 1024 x 640
Font : Arial
Warna : Putih
.: Form Pengolahan Pembayaran:.
Footer Home | Produk | Kategori | Detail Produk | Pemesanan | Member | Pembayaran
Data Kota Data Provinsi
Data Ongkir Laporan Penjualan
Setting Logout
Anda mempunyai request pembayaran klik disini untuk menampilkan
Gambar III-35 Halaman Pengolahan Data Pembayaran
9. Perancangan Antarmuka Pengolahan Data Kota Berikut ini adalah perancangan antarmuka pengolahan data kota untuk
admin, dimana admin mengklik data kota di navigasi menu aplikasi e- commerce yang dapat dilihat di gambar III-37 dibawah ini :
B02 Header
Data Produk | Data Detail Produk | Data Kategori | B09
Header - Klik login ke halaman
administrastor B02 - Klik Home menuju B02
- Klik Produk ke halaman pengolahan data produk di
B03 - Klik kategori ke halaman
pengolahan data kategori B04
- Klik detail produk ke halaman pengolahan data
detail produk B05 - Klik pemesanan menuju
ke halaman pemesanan B06
-
Klik member
untuk menuju
ke halaman
pengolahan data member B07
- Klik pembayaran untuk menuju pengolahan data
pembayaran B08 - Klik data kota untuk
menuju halaman
pengolahan data kota B09
Nama Layar : B09
Ukuran Layar : 1024 x 640
Font : Arial
Warna : Putih
.: Form Pengolahan Data Kota :. id_kota
: Nama kota
: Id_Provinsi
: Data Kota
Footer Home | Produk | Kategori | Detail Produk | Pemesanan | Member | Pembayaran
Tambah Reset
Id_Kota Nama Kota
Id_Provinsi Action
Detail Edit Data Kota
Data Provinsi DataOngkir
Laporan Penjualan Setting
Logout
Gambar III-36 Halaman Pengolahan Data Kota
10. Perancangan Antarmuka Pengolahan Data Provinsi
Berikut ini adalah perancangan antarmuka pengolahan data provinsi untuk admin, dimana admin mengklik provinsi di navigasi menu aplikasi e-
commerce yang dapat dilihat di gambar III-38 dibawah ini :
B02 Header
Data Produk | Data Detail Produk | Data Kategori | B10
Header - Klik login ke halaman
administrastor B02 - Klik Home menuju B02
- Klik Produk ke halaman pengolahan data produk di
B03 - Klik kategori ke halaman
pengolahan data kategori B04
- Klik detail produk ke halaman pengolahan data
detail produk B05 - Klik pemesanan menuju
ke halaman pemesanan B06
-
Klik member
untuk menuju
ke halaman
pengolahan data member B07
- Klik pembayaran untuk menuju pengolahan data
pembayaran B08 - Klik data kota untuk
menuju halaman
pengolahan data kota B09 - Klik data kota untuk
menuju halaman
pengolahan data provinsi B10
Nama Layar : B10
Ukuran Layar : 1024 x 640
Font : Arial
Warna : Putih
.: Form Pengolahan Data Provinsi :. id_Provinsi
: Nama Provinsi
: Data Provinsi
Footer Home | Produk | Kategori | Detail Produk | Pemesanan | Member | Pembayaran
Tambah Reset
Id_Kota Nama Kota
Action Detail Edit
Data Kota Data Provinsi
DataOngkir Laporan Penjualan
Setting Logout
Gambar III-37 Halaman Pengolahan Data Provinsi
11. Perancangan Antarmuka Pengolahan Data Laporan Harian Berikut ini adalah perancangan antarmuka pengolahan data laporan harian
untuk admin, dimana admin mengklik Laporan Penjualan lalu mengklik harian di navigasi menu aplikasi e-commerce yang dapat dilihat di gambar
III-39 dibawah ini :
B02 Header
B11 Header
- Klik login ke halaman administrastor B02
- Klik Home menuju B02 - Klik Produk ke halaman
pengolahan data produk di B03
- Klik kategori ke halaman pengolahan data kategori
B04 - Klik detail produk ke
halaman pengolahan data detail produk B05
- Klik pemesanan menuju ke halaman pemesanan
B06 -
Klik member
untuk menuju
ke halaman
pengolahan data member B07
- Klik pembayaran untuk menuju pengolahan data
pembayaran B08 - Klik data kota untuk
menuju halaman
pengolahan data kota B09 - Klik data kota untuk
menuju halaman
pengolahan data provinsi B10
- Klik Laporan Penjualan maka akan muncul haria,
bulanan , tahunan, klik harian ke B11
Nama Layar : B11
Ukuran Layar : 1024 x 640
Font : Arial
Warna : Putih
.: Pengolahan Data Laporan Harian :.
Footer Home | Produk | Kategori | Detail Produk | Pemesanan | Member | Pembayaran
Tanggal Keterangan Produk
Qty Data Kota
Data Provinsi DataOngkir
Laporan Penjualan Harian
Bulanan Tahunan
Setting Logout
Tanggal : Cari
Jenis Pembayaran Total
No
Gambar III-38 Halaman Pengolahan Data Harian
12. Perancangan Antarmuka Pengolahan Data Laporan Bulanan Berikut ini adalah perancangan antarmuka pengolahan data laporan
bulanan untuk admin, dimana admin mengklik Laporan Penjualan lalu mengklik bulanan di navigasi menu aplikasi e-commerce yang dapat
dilihat di gambar III-40 dibawah ini :
B02 Header
B12 Header
- Klik login ke halaman administrastor B02
- Klik Home menuju B02 - Klik Produk ke halaman
pengolahan data produk di B03
- Klik kategori ke halaman pengolahan data kategori
B04 - Klik detail produk ke
halaman pengolahan data detail produk B05
- Klik pemesanan menuju ke halaman pemesanan
B06 -
Klik member
untuk menuju
ke halaman
pengolahan data member B07
- Klik pembayaran untuk menuju pengolahan data
pembayaran B08 - Klik data kota untuk
menuju halaman
pengolahan data kota B09 - Klik data kota untuk
menuju halaman
pengolahan data provinsi B10
- Klik Laporan Penjualan maka akan muncul haria,
bulanan , tahunan, klik harian ke B11
- Klik bulanan untuk menuju halaman B12
Nama Layar : B12
Ukuran Layar : 1024 x 640
Font : Arial
Warna : Putih
.: Pengolahan Data Laporan Bulanan :.
Footer Home | Produk | Kategori | Detail Produk | Pemesanan | Member | Pembayaran
Tanggal Keterangan Produk
Qty Data Kota
Data Provinsi DataOngkir
Laporan Penjualan Harian
Bulanan Tahunan
Setting Logout
Bulan : Cari
Jenis Pembayaran Total
No
Gambar III-39 Halaman Pengolahan Data Laporan Bulanan
13. Perancangan Antarmuka Pengolahan Data Laporan Tahunan Berikut ini adalah perancangan antarmuka pengolahan data laporan
tahunan untuk admin, dimana admin mengklik Laporan Penjualan lalu mengklik tahunan di navigasi menu aplikasi e-commerce yang dapat
dilihat di gambar III-41 dibawah ini :
B02 Header
B13 Header
- Klik login ke halaman administrastor B02
- Klik Home menuju B02 - Klik Produk ke halaman
pengolahan data produk di B03
- Klik kategori ke halaman pengolahan data kategori
B04 - Klik detail produk ke
halaman pengolahan data detail produk B05
- Klik pemesanan menuju ke halaman pemesanan
B06 -
Klik member
untuk menuju
ke halaman
pengolahan data member B07
- Klik pembayaran untuk menuju pengolahan data
pembayaran B08 - Klik data kota untuk
menuju halaman
pengolahan data kota B09 - Klik data kota untuk
menuju halaman
pengolahan data provinsi B10
- Klik Laporan Penjualan maka akan muncul haria,
bulanan , tahunan, klik harian ke B11
- Klik bulanan untuk menuju halaman B12
Nama Layar : B12
Ukuran Layar : 1024 x 640
Font : Arial
Warna : Putih
.: Pengolahan Data Laporan Bulanan :.
Footer Home | Produk | Kategori | Detail Produk | Pemesanan | Member | Pembayaran
Tanggal Keterangan Produk
Qty Data Kota
Data Provinsi DataOngkir
Laporan Penjualan Harian
Bulanan Tahunan
Setting Logout
Tahun Cari
Jenis Pembayaran Total
No
Gambar III-40 Halaman Pengolahan Data Laporan Tahunan
3.5.2.2 Perancangan Antarmuka Pengunjung dan Member
1. Perancangan Antarmuka Halaman Utama Home Berikut dapat dilihat perancang antarmuka pengunjung untuk toko
osmoes kaos muslimah dapat dilihat di gambar III-42 berikut :
Nama layar : A01
Ukuran : 1024 x 640
Backgorund : Abu-abu, putih
Font : Arial, verdana
- klik ikutan nyok menuju A02
- klik info menuju A05 - klik Registrasi menuju
A08 - klik login menuju A09
- klik gambar produk untuk menuju form 10
- klik checkout menuju form A11
- klik detail menuju form A19
A01
Slider Foto Logo
Belanja | Ikutan Nyok | Info | Registrasi | Login
Osmoes Kids | Osmoes Remaja Dewasa | Produk Lainnya
Footer Shopping Chart
Gambar produk
Gambar produk
Gambar produk
Gambar produk
Gambar produk
Gambar produk
Gambar produk
Gambar produk
Check out | Detail
Payment Gateway Payment Offline
Logo Jasa Pengiriman
Gambar III-41 Perancangan antamuka halaman utama
2. Perancangan Antarmuka Desain Kamu berikut adalah perancangan antarmuka untuk pengunjung ketika
pengunjung atau member mengklik navigasi menu pada aplikasi e- commerce dengan nama info, dengan gambar III-43 sebagai berikut :
Nama layar : A02
Ukuran : 1024 x 640
Backgorund : Abu-abu, putih
Font : Arial, verdana
- klik belanja menuju A01 - klik info menuju A05
- klik Registrasi menuju A08
- klik login menuju A09 - klik gambar produk
untuk menuju form 10 - klik checkout menuju
form A11 - klik photo kamu untuk
menuju form A03 - klik testimonial untuk
menuju form A04 A02
Slider Foto Logo
Belanja | Ikutan Nyok | Info | Registrasi | Login
Desain Kamu | Photo Kamu | Testimonial
Footer Shopping Chart
Desain Rating
Desain Rating
Desain Rating
Desain Rating
Desain Rating
Desain Rating
Desain Rating
Desain Rating
Check out | Detail
Gambar III-42 Perancangan antarmuka Ikutan Nyok
3. Perancangan Antarmuka Photo Kamu Halaman ini adalah haaman ketika pengunjung memilih salah satu menu di
navigasi menu aplikasi e-commerce, dan akan mucul tab yang berisi dari menu tersebut diantaranya menu seperti gambar III-44 berikut ini :
Nama layar : A03
Ukuran : 1024 x 640
Backgorund : Abu-abu, putih
Font : Arial, verdana
- klik belanja menuju A01 - klik info menuju A05
- klik Registrasi menuju A08
- klik login menuju A09 - klik gambar produk
untuk menuju form 10 - klik checkout menuju
form A11 - klik desain kamu untuk
menuju form A02 - klik testimonial untuk
menuju form A04 A03
Slider Foto Logo
Belanja | Ikutan Nyok | Info | Registrasi | Login
Desain Kamu | Photo Kamu | Testimonial
Footer Shopping Chart
Photo Member Photo Member
Photo Member Photo Member
Photo Member Photo Member
Photo Member Photo Member
Check out | Detail
Gambar III-43 Perancangan Antarmuka Photo Kamu
4. Perancangan Antarmuka Testimonial Halaman ini adalah haaman ketika pengunjung memilih salah satu menu di
navigasi menu aplikasi e-commerce, dan akan mucul tab yang berisi dari menu tersebut diantaranya menu testimonial seperti gambar III-45 berikut
ini :
Nama layar : A04
Ukuran : 1024 x 640
Backgorund : Abu-abu, putih
Font : Arial, verdana
- klik belanja menuju A01 - klik info menuju A05
- klik Registrasi menuju A08
- klik login menuju A09 - klik gambar produk
untuk menuju form 10 - klik checkout menuju
form A11 - klik desain kamu untuk
menuju form A02 - klik photo kamu untuk
menuju form A03 A04
Slider Foto Logo
Belanja | Ikutan Nyok | Info | Registrasi | Login
Desain Kamu | Photo Kamu | Testimonial
Footer Shopping Chart
Check out | Detail
Kolom Testimonial Text
Gambar III-44 Perancangan Antarmuka Testimonial
5. Perancangan Antarmuka Tentang Kami Halaman ini adalah haaman ketika pengunjung memilih salah satu menu di
navigasi menu aplikasi e-commerce, dan akan mucul tab yang berisi dari menu tersebut diantaranya menu tentang kami seperti gambar III-46
berikut ini :
Nama layar : A05
Ukuran : 1024 x 640
Backgorund : Abu-abu, putih
Font : Arial, verdana
- klik ikutan nyok menuju A02
- klik belanja menuju form A01
- klik Registrasi menuju A08
- klik login menuju A09 - klik gambar produk
untuk menuju form 10 - klik checkout menuju
form A11 - klik the founder menuju
form A06 -klik
cara pemesanan
menuju form A07 A05
TEXT Slider Foto
Logo Belanja | Ikutan Nyok | Info | Registrasi | Login
Tentang Kami | The Founder | Cara Pemesanan |
Footer Shopping Chart
Check out | Detail
Gambar III-45 Perancangan Antarmuka Tentang Kami
6. Perancangan Antarmuka The Founder Halaman ini adalah haaman ketika pengunjung memilih salah satu menu di
navigasi menu aplikasi e-commerce, dan akan mucul tab yang berisi dari menu the founder tersebut diantaranya menu seperti gambar III-47 berikut
ini :
Nama layar : A06
Ukuran : 1024 x 640
Backgorund : Abu-abu, putih
Font : Arial, verdana
- klik ikutan nyok menuju A02
- klik belanja menuju form A01
- klik Registrasi menuju A08
- klik login menuju A09 - klik gambar produk
untuk menuju form 10 - klik checkout menuju
form A11 -
klik tentang
kami menuju form A05
-klik cara
pemesanan menuju form A07
A06
TEXT Slider Foto
Logo Belanja | Ikutan Nyok | Info | Registrasi | Login
Tentang Kami | The Founder | Cara Pemesanan |
Footer Shopping Chart
Check out | Detail
Foto
Gambar III-46 Perancangan Antarmuka The Founder
7. Perancangan Antarmuka Cara Pemesanan Halaman ini adalah haaman ketika pengunjung memilih salah satu menu di
navigasi menu aplikasi e-commerce, dan akan mucul tab yang berisi dari menu tersebut diantaranya cara pemesanan seperti gambar III-48 berikut
ini :
Nama layar : A07
Ukuran : 1024 x 640
Backgorund : Abu-abu, putih
Font : Arial, verdana
- klik ikutan nyok menuju A02
- klik belanja menuju form A01
- klik Registrasi menuju A08
- klik login menuju A09 - klik gambar produk
untuk menuju form 10 - klik checkout menuju
form A11 - klik the founder menuju
form A06 -klik tentang kami menuju
form A05 A07
Keterangan Gambar Slider Foto
Logo Belanja | Ikutan Nyok | Info | Registrasi | Login
Tentang Kami | The Founder | Cara Pemesanan |
Footer Shopping Chart
Check out | Detail
Gambar CaraPemesanan
Gambar III-47 Perancangan Antarmuka Cara Pemesanana
8. Perancangan Antarmuka Registrasi Halaman ini adalah halaman ketika pengunjung memilih salah satu menu
di navigasi menu aplikasi e-commerce, dan akan mucul tab yang berisi antarmuka regstrasi seperti gambar III-49 berikut ini :
Nama layar : A07
Ukuran : 1024 x 640
Backgorund : Abu-abu, putih
Font : Arial, verdana
- klik ikutan nyok menuju A02
- klik belanja menuju form A01
- klik Registrasi menuju A08
- klik login menuju A09 - klik gambar produk
untuk menuju form 10 - klik checkout menuju
form A11 - klik the founder menuju
form A06 -klik
cara pemesanan
menuju form A07 A08
Slider Foto Logo
Belanja | Ikutan Nyok | Info | Registrasi | Login
Registrasi
Footer Shopping Chart
Check out | Detail
Form Registrasi
Gambar III-48 Perancangan Antarmuka Registrasi
9. Perancangan Antarmuka Login Halaman ini adalah halaman ketika pengunjung memilih salah satu menu
di navigasi menu aplikasi e-commerce, dan akan mucul tab yang berisi dari halaman antarmuka login pengunjung III-50 berikut ini :
Nama layar : A09
Ukuran : 1024 x 640
Backgorund : Abu-abu, putih
Font : Arial, verdana
- klik ikutan nyok menuju A02
- klik belanja menuju form A01
- klik Registrasi menuju A08
- klik login menuju A09 - klik gambar produk
untuk menuju form 10 - klik checkout menuju
form A11 - klik the founder menuju
form A06 -klik
cara pemesanan
menuju form A07 A09
Slider Foto Logo
Belanja | Ikutan Nyok | Info | Registrasi | Login
Login
Footer Shopping Chart
Check out | Detail
Form Login Sales onlineoffline
--------------------------- Promo Produk
--------------------------- Banner
Gambar III-49 Perancangan Antamuka Login
10. Perancangan Antarmuka Preview Produk Halaman ini adalah halaman ketika pengunjung memilih salah satu produk
di aplikasi e-commerce, dan akan mucul halaman preview produk seperti gambar III-51 berikut ini :
Nama layar : A10
Ukuran : 1024 x 640
Backgorund : Abu-abu, putih
Font : Arial, verdana
- klik ikutan nyok menuju A02
- klik belanja menuju form A01
- klik Registrasi menuju A08
- klik login menuju A09 - klik gambar produk
untuk menuju form 10 - klik checkout menuju
form A11 - klik the founder menuju
form A06 -klik
cara pemesanan
menuju form A07 A10
Slider Foto Logo
Belanja | Ikutan Nyok | Info | Registrasi | Login
Kategori Pilihan
Footer Shopping Chart
Check out | Detail
Gambar Produk
Gambar III-50 Perancangan Antarmuka Preview Produk
11. Perancangan Antarmuka Shopping Chart Halaman ini adalah halaman ketika pengunjung memilih salah satu menu
di navigasi menu aplikasi e-commerce, dan akan muncul halaman antarmuka untuk shopping chart pada gambar III-52 berikut ini :
Nama layar : A11
Ukuran : 1024 x 640
Backgorund : Abu-abu, putih
Font : Arial, verdana
- klik ikutan nyok menuju A02
- klik belanja menuju form A01
- klik Registrasi menuju A08
- klik login menuju A09 - klik gambar produk
untuk menuju form 10 - klik checkout menuju
form A11 - klik the founder menuju
form A06 -klik
cara pemesanan
menuju form A07 -
klik lanjut
belanja menuju form A01
- klik next menuju form A12
A11
text text
Slider Foto Logo
Belanja | Ikutan Nyok | Info | Registrasi | Login
Shopping Chart
Footer Shopping Chart
Check out | Detail Produk | Jumlah | Harga | Diskon | Subtotal
Total Bayar : Lanjut Belanja
Next Pilih Paket Pengiriman
Gambar III-51 Perancangan Antarmuka Shopping Chart
12. Perancangan Antarmuka Halaman Member Halaman ini adalah haaman ketika pengunjung melakukan login dan
berhasil , dan akan mucul halaman seperti gambar III-54 berikut ini :
Nama layar : A13
Ukuran : 1024 x 640
Backgorund : Abu-abu, putih
Font : Arial, verdana
- klik
belanja untuk
menuju A01 - klik ikutan nyok menuju
A02 - klik info menuju A05
- klik Registrasi menuju A08
- klik login menuju A09 - klik gambar produk
untuk menuju form 10 - klik checkout menuju
form A11 -klik akun kamu menuju
form A013 -klik
ubah password
menuju form A14 -
klik upload
desain menuju form A15
- klik upload foto mtnuju form A16
- klik history menuju form A17
A13
Informasi Akun Member Slider Foto
Logo Belanja | Ikutan Nyok | Info | Akun Kamu | Logout
Profile Kamu | Ubah Password | Upload Desain | Upload Foto | History
Footer Shopping Chart
Check out | Detail Foto Member
Gambar III-52 Perancangan Antarmuka Halaman Member
13. Perancangan Antarmuka Ubah Password Halaman ini adalah halaman ketika member memilih menu ubah password
di halaman member, dan halaman akan muncul seperti gambar III-55 berikut ini :
Nama layar : A14
Ukuran : 1024 x 640
Backgorund : Abu-abu, putih
Font : Arial, verdana
- klik
belanja untuk
menuju A01 - klik ikutan nyok menuju
A02 - klik info menuju A05
- klik Registrasi menuju A08
- klik login menuju A09 - klik gambar produk
untuk menuju form 10 - klik checkout menuju
form A11 -klik akun kamu menuju
form A013 -klik
ubah password
menuju form A14 -
klik upload
desain menuju form A15
- klik upload foto mtnuju form A16
- klik history menuju form A17
A14
Slider Foto Logo
Belanja | Ikutan Nyok | Info | Akun Kamu | Logout
Profile Kamu | Ubah Password | Upload Desain | Upload Foto | History
Footer Shopping Chart
Check out | Detail Password Lama
: Password Baru
: Konfirmasi Password Baru :
submit reset
Gambar III-53 Perancangan Antarmuka Ubah Password
14. Perancangan Antarmuka Upload Desain Halaman ini adalah halaman member saat member memilih tab upload
desain, dan akan muncul halaman upload desain seperti gambar III-56 berikut ini :
Nama layar : A15
Ukuran : 1024 x 640
Backgorund : Abu-abu, putih
Font : Arial, verdana
- klik
belanja untuk
menuju A01 - klik ikutan nyok menuju
A02 - klik info menuju A05
- klik Registrasi menuju A08
- klik login menuju A09 - klik gambar produk
untuk menuju form 10 - klik checkout menuju
form A11 -klik akun kamu menuju
form A013 -klik
ubah password
menuju form A14 -
klik upload
desain menuju form A15
- klik upload foto mtnuju form A16
- klik history menuju form A17
A15
Slider Foto Logo
Belanja | Ikutan Nyok | Info | Akun Kamu | Logout
Profile Kamu | Ubah Password | Upload Desain | Upload Foto | History
Footer Shopping Chart
Check out | Detail Upload Desain
: Keterangan
: submit
reset browse
Gambar III-54 Perancangan Antarmuka Upload Desain
15. Perancangan Antarmuka Upload Foto Halaman ini adalah halaman member saat member memilih tab upload
foto, dan akan muncul halaman upload foto seperti gambar III-57 berikut ini :
Nama layar : A16
Ukuran : 1024 x 640
Backgorund : Abu-abu, putih
Font : Arial, verdana
- klik
belanja untuk
menuju A01 - klik ikutan nyok menuju
A02 - klik info menuju A05
- klik Registrasi menuju A08
- klik login menuju A09 - klik gambar produk
untuk menuju form 10 - klik checkout menuju
form A11 -klik akun kamu menuju
form A013 -klik
ubah password
menuju form A14 -
klik upload
desain menuju form A15
- klik upload foto mtnuju form A16
- klik history menuju form A17
A16
Slider Foto Logo
Belanja | Ikutan Nyok | Info | Akun Kamu | Logout
Profile Kamu | Ubah Password | Upload Desain | Upload Foto | History
Footer Shopping Chart
Check out | Detail Upload Foto
: submit
browse
Gambar III-55 Perancangan Antarmuka Upload Foto
16. Perancangan Antarmuka History Halaman ini adalahhalaman member saat member memilih tab history, dan
akan mucul halaman history seperti gambar III-58 berikut ini :
Nama layar : A17
Ukuran : 1024 x 640
Backgorund : Abu-abu, putih
Font : Arial, verdana
- klik
belanja untuk
menuju A01 - klik ikutan nyok menuju
A02 - klik info menuju A05
- klik Registrasi menuju A08
- klik login menuju A09 - klik gambar produk
untuk menuju form 10 - klik checkout menuju
form A11 -klik akun kamu menuju
form A013 -klik
ubah password
menuju form A14 -
klik upload
desain menuju form A15
- klik upload foto mtnuju form A16
- klik history menuju form A17
A17
TEXT Slider Foto
Logo Belanja | Ikutan Nyok | Info | Akun Kamu | Logout
Profile Kamu | Ubah Password | Upload Desain | Upload Foto | History
Footer Shopping Chart
Check out | Detail
Kolom History Pemesanan Member
Gambar III-56 Perancangan Antarmuka History
17. Perancangan Antarmuka Konfirmasi Pembayaran Halaman ini adalah halaman member apabila melakukan pemesanan dan
harus melakukan pembayran, dan akan muncul halaman konfirmasi pembayaran seperti gambar III-59 berikut ini :
Nama layar : A18
Ukuran : 1024 x 640
Backgorund : Abu-abu, putih
Font : Arial, verdana
- klik
belanja untuk
menuju A01 - klik ikutan nyok menuju
A02 - klik info menuju A05
- klik Registrasi menuju A08
- klik login menuju A09 - klik gambar produk
untuk menuju form 10 - klik checkout menuju
form A11 -klik akun kamu menuju
form A013 -klik
ubah password
menuju form A14 -
klik upload
desain menuju form A15
- klik upload foto mtnuju form A16
- klik history menuju form A17
A18
Slider Foto Logo
Belanja | Ikutan Nyok | Info | Registrasi | Login
Konfirmasi Pembayaran
Footer Shopping Chart
Check out | Detail Id_pesanan
: Total Bayar
: submit
Gambar III-57 Perancangan Antarmuka Konfirmasi Pembayaran
18. Perancangan Antarmuka Detail Chart Halaman ini adalah halaman ketika pengunjung memilih salah satu menu
di navigasi menu aplikasi e-commerce, dan akan muncul halaman detail chart seperti gambar III-60 berikut ini :
Nama layar : A19
Ukuran : 1024 x 640
Backgorund : Abu-abu, putih
Font : Arial, verdana
- klik
belanja untuk
menuju A01 - klik ikutan nyok menuju
A02 - klik info menuju A05
- klik Registrasi menuju A08
- klik login menuju A09 - klik gambar produk
untuk menuju form 10 - klik checkout menuju
form A11 -klik akun kamu menuju
form A013 -klik
ubah password
menuju form A14 -
klik upload
desain menuju form A15
- klik upload foto mtnuju form A16
- klik history menuju form A17
A19
text Slider Foto
Logo Belanja | Ikutan Nyok | Info | Registrasi | Login
Detail Chart
Footer Shopping Chart
Check out | Detail Sales onlineoffline
--------------------------- Promo Produk
--------------------------- Banner
Produk | Jumlah | Harga | Diskon | Ongkir | Subtotal Total Bayar :
Gambar III-58 Perancangan Antarmuka Detail Chart
3.5.2.3 Perancangan Pesan
Pada gambar dibawah ini merupakan perancangan pesan yang terdapat pada aplikasi e-commerce di toko osmoes kaos muslimah. Adapun tampilan pesan yang
ada adalah sebagai berikut :
M01 Email Password tidak boleh kosong
M02 Email Password yang anda inputkan
salah M03
Penambahan Data Berhasil
M04 Data yang anda masukan salah
M05 Maaf email yang anda masukan telah
terdaftar M06
Field harus diisi, tidak boleh kosong
M07 Penambahan data gagal
M08 Terimakasih anda telah melakukan
registrasi, cek email anda untuk mengetahui konfirmasi selanjutnya
M09 Maaf account tidak ditemukan
M10 Data berhasil diubah
M11 Data berhasil dihapus
M12 Apakah anda yakin ?
Ya Tidak
M13 Verifikasi Password baru telah dikirim
ke email anda M14
Terimakasih sudah berbelanja di toko osmoes kaos muslimah, jangan lupa
untuk melakukan konfirmasi pembayaran
M15 Terimakasih telah menghubungi kami,
pesanan akan kami proses dalam waktu 1x24 jam
Gambar III-59 Perancangan Pesan
3.5.3 Jaringan Semantik