Perancangan antarmuka Perancangan Arsitektur

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