Perancangan Antarmuka Perancangan Arsitektur

Logout A04-10 Logo Perusahaan Baranda Data User Data master Backup Restore Ukuran Layar : 1000px X 1200px Font Ukuran 12 - klik Beranda menuju A02 - klik Data user menuju A03 - klik Data Master menuju A04 - klik Backup Restore menuju A05 -klik Logout menuju A01 Id Kab_kota Nama Kab_kota Ubah Ubah Hapus Hapus Nama Provinsi Cari Tambah Gambar 3. 45 Perancangan Antarmuka Data KabupatenKota LogOut Provinsi : Nama : A04-10-1 Logo Perusahaan Baranda Data User Data master Backup Restore Ukuran Layar : 1000px X 1200px Font Ukuran 12 - klik Beranda menuju A02 - klik Data user menuju A03 - klik Data Master menuju A04 - klik Backup Restore menuju A05 -klik Logout menuju A01 Submit Back Gambar 3. 46 Perancangan Antarmuka Tambah Data KabupatenKota Logout A04-6 Logo Perusahaan Baranda Data User Data master Backup Restore Ukuran Layar : 1000px X 1200px Font Ukuran 12 - klik Beranda menuju A02 - klik Data user menuju A03 - klik Data Master menuju A04 - klik Backup Restore menuju A05 -klik Logout menuju A01 Id_Jak et Nama_Ja ket Harg a Berat Model Bahan Kategori bahan Warna Detail Detail Gamba r Gamba r Ubah Ubah Hapus Hapus Cari Tambah Gambar 3. 47 Perancangan Antarmuka Data Jaket LogOut Nama : Model : Bahan : Kategori bahan : Warna : Harga : Berat : A04-6-1 Logo Perusahaan Baranda Data User Data master Backup Restore Ukuran Layar : 1000px X 1200px Font Ukuran 12 - klik Beranda menuju A02 - klik Data user menuju A03 - klik Data Master menuju A04 - klik Backup Restore menuju A05 -klik Logout menuju A01 Submit Back Gambar 3. 48 Perancangan Antarmuka Tambah Data Jaket Logout A05 Logo Perusahaan Baranda Data User Data master Backup Restore Ukuran Layar : 1000px X 1200px Font Ukuran 12 Restore Backup - klik Beranda menuju A02 - klik Data user menuju A03 - klik Data Master menuju A04 - klik Backup Restore menuju A05 -klik Logout menuju A01 Gambar 3. 49 Perancangan Antarmuka Data Backup Restore T01 Ukuran Layar : 1000px X 1200px Font Ukuran 12 Username Password Login Login Nama Perusahaan OP01 - klik Login Menuju OP02 Gambar 3. 50 Perancangan Antarmuka Halaman Login Operator Selamat Bekerja OP02 Logo Perusahaan Baranda Data Transaksi Laporan Ukuran Layar : 1000px X 1200px Font Ukuran 12 - klik Beranda menuju OP02 - klik Data Transaksi menuju OP03 - klik Laporan menuju OP4 -klik Logout menuju OP01 Logout Gambar 3. 51 Perancangan Antarmuka Halaman Beranda Operator Logout OP03 Logo Perusahaan Baranda Data Transaksi Laporan Ukuran Layar : 1000px X 1200px Font Ukuran 12 - klik Beranda menuju OP02 - klik Data Transaksi menuju OP03 - klik Data Laporan menuju OP04 - klik Logout menuju OP01 Cetak Pemesanan Cetak Pembayaran Cetak Pengiriman Cetak Retur Gambar 3. 52 Perancangan Antarmuka Halaman Transaksi Operator Logout OP03 Logo Perusahaan Baranda Data Transaksi Laporan Ukuran Layar : 1000px X 1200px Font Ukuran 12 - klik Beranda menuju OP02 - klik Data Transaksi menuju OP03 - klik Data Laporan menuju OP04 - klik Logout menuju OP01 ID Waktu Alamat Nama Status Cara Bayar Detail Gambar 3. 53 Perancangan Antarmuka Halaman Pemesanan Operator Logout OP03 Logo Perusahaan Baranda Data Transaksi Laporan Ukuran Layar : 1000px X 1200px Font Ukuran 12 - klik Beranda menuju OP02 - klik Data Transaksi menuju OP03 - klik Data Laporan menuju OP04 - klik Logout menuju OP01 ID Waktu Alamat Nama Status Cara Bayar Detail Gambar 3. 54 Perancangan Antarmuka Halaman Pembayaran Operator Logout OP03 Logo Perusahaan Baranda Data Transaksi Laporan Ukuran Layar : 1000px X 1200px Font Ukuran 12 - klik Beranda menuju OP02 - klik Data Transaksi menuju OP03 - klik Data Laporan menuju OP04 - klik Logout menuju OP01 ID Nama Alamat No Resi Tanggal Kirim Penerima Tanggal Terima Status Cetak Label Cetak Kirim Kirim Gambar 3. 55 Perancangan Antarmuka Halaman Pengiriman Operator Logout OP04 Logo Perusahaan Baranda Data Transaksi Laporan Ukuran Layar : 1000px X 1200px Font Ukuran 12 - klik Beranda menuju OP02 - klik Data Transaksi menuju OP03 - klik Data Laporan menuju OP04 - klik Logout menuju OP01 Pilih Tahun Pilih Bulan Pilih Laporan Cetak Cetak Gambar 3. 56 Perancangan Antarmuka Halaman Laporan Operator M01 - klik Beranda menuju ke M01 - klik Jaket menuju ke M02 - klik Transaksi menuju ke M03 - klik Informasi menuju ke M04 - klik Cart menuju ke M05 - klik Profil menuju ke M06 -klik Logout menuju ke M07 Ukuran Layar : 1000px X 1200px Font Ukuran 12 BANNER Beranda Jaket © RISTY COLLECTION 2013 Logo perusahaan Transaksi Informasi Cari Cart Profil Logout Logo Bank | Contact Support Gambar 3. 57 Perancangan Antarmuka Halaman Beranda Member M02 - klik Beranda menuju ke M01 - klik Jaket menuju ke M02 - klik Transaksi menuju ke M03 - klik Informasi menuju ke M04 - klik Cart menuju ke M05 - klik Profil menuju ke M06 -klik Logout menuju ke M07 Ukuran Layar : 1000px X 1200px Font Ukuran 12 Beranda Jaket © RISTY COLLECTION 2013 Logo perusahaan Transaksi Informasi Cari Cart Profil Logout Gambar 3. 58 Perancangan Antarmuka Halaman Jaket M02-1 - klik Beranda menuju ke M01 - klik Jaket menuju ke M02 - klik Transaksi menuju ke M03 - klik Informasi menuju ke M04 - klik Cart menuju ke M05 - klik Profil menuju ke M06 -klik Logout menuju ke M07 Ukuran Layar : 1000px X 1200px Font Ukuran 12 Beranda Jaket © RISTY COLLECTION 2013 Logo perusahaan Transaksi Informasi Cari Cart Profil Logout Bahan : Harga : Berat : Warna : Ukuran : Beli Gambar 3. 59 Perancangan Antarmuka Halaman Detail Jaket M04 - klik Beranda menuju ke M01 - klik Jaket menuju ke M02 - klik Transaksi menuju ke M03 - klik Informasi menuju ke M04 - klik Cart menuju ke M05 - klik Profil menuju ke M06 -klik Logout menuju ke M07 Ukuran Layar : 1000px X 1200px Font Ukuran 12 Beranda Jaket © RISTY COLLECTION 2013 Logo perusahaan Transaksi Informasi Cari Cart Profil Logout ID Jaket Ukuran Harga QTY Total Hapus Checkout Gambar 3. 60 Perancangan Antarmuka Halaman Cart M04-1 - klik Beranda menuju ke M01 - klik Jaket menuju ke M02 - klik Transaksi menuju ke M03 - klik Informasi menuju ke M04 - klik Cart menuju ke M05 - klik Profil menuju ke M06 -klik Logout menuju ke M07 Ukuran Layar : 1000px X 1200px Font Ukuran 12 Beranda Jaket © RISTY COLLECTION 2013 Logo perusahaan Transaksi Informasi Cari Cart Profil Logout Alamat Kirim Nama: Alamat: No.telp: Jasa: Paket: lanjutkan Gambar 3. 61 Perancangan Antarmuka Halaman Alamat Pengiriman M04-1-1 - klik Beranda menuju ke M01 - klik Jaket menuju ke M02 - klik Transaksi menuju ke M03 - klik Informasi menuju ke M04 - klik Cart menuju ke M05 - klik Profil menuju ke M06 -klik Logout menuju ke M07 Ukuran Layar : 1000px X 1200px Font Ukuran 12 Beranda Jaket © RISTY COLLECTION 2013 Logo perusahaan Transaksi Informasi Cari Cart Profil Logout Checkout ID Jaket Ukuran QTY Harga Total Subtotal : Ongkir :Rp. Total :Rp. Data Pengiriman Nama Penerima : No.Telp : Kota : Alamat : Jasa Pengiriman : Paket : Checkout Batal Gambar 3. 62 Perancangan Antarmuka Halaman Checkout M05 - klik Beranda menuju ke M01 - klik Jaket menuju ke M02 - klik Transaksi menuju ke M03 - klik Informasi menuju ke M04 - klik Cart menuju ke M05 - klik Profil menuju ke M06 -klik Logout menuju ke M07 Ukuran Layar : 1000px X 1200px Font Ukuran 12 Beranda Jaket Logo perusahaan Transaksi Informasi Cari Cart Profil Logout Informasi Kontak Perusahaan Cara Bayar Gambar 3. 63 Perancangan Antarmuka Halaman Informasi P01 - klik Beranda menuju ke P01 - klik Jaket menuju ke P02 - klik Informasi menuju ke P03 - klik Cart menuju ke P04 - klik Login menuju ke P05 - klik Register menuju ke P06 Ukuran Layar : 1000px X 1200px Font Ukuran 12 BANNER Beranda Jaket © RISTY COLLECTION 2013 Logo perusahaan Informasi Cari Cart Register Login Logo Bank | Contact Support Gambar 3. 64 Perancangan Antarmuka Halaman Beranda Pengunjung P02 - klik Beranda menuju ke P01 - klik Jaket menuju ke P02 - klik Informasi menuju ke P03 - klik Cart menuju ke P04 - klik Login menuju ke P05 - klik Register menuju ke P06 Ukuran Layar : 1000px X 1200px Font Ukuran 12 Beranda Jaket © RISTY COLLECTION 2013 Logo perusahaan Informasi Cari Cart Register Login Gambar 3. 65 Perancangan Antarmuka Halaman Jaket Pengunjung P02-1 - klik Beranda menuju ke P01 - klik Jaket menuju ke P02 - klik Informasi menuju ke P03 - klik Cart menuju ke P04 - klik Login menuju ke P05 - klik Register menuju ke P06 Ukuran Layar : 1000px X 1200px Font Ukuran 12 Beranda Jaket © RISTY COLLECTION 2013 Logo perusahaan Informasi Cari Cart Register Login Bahan : Harga : Berat : Warna : Ukuran : Beli Gambar 3. 66 Perancangan Antarmuka Halaman Detail Jaket Pengunjung P03 - klik Beranda menuju ke P01 - klik Jaket menuju ke P02 - klik Informasi menuju ke P03 - klik Cart menuju ke P04 - klik Login menuju ke P05 - klik Register menuju ke P06 Ukuran Layar : 1000px X 1200px Font Ukuran 12 Beranda Jaket © RISTY COLLECTION 2013 Logo perusahaan Informasi Cari Cart Register Login ID Jaket Ukuran Harga QTY Total Hapus Checkout Gambar 3. 67 Perancangan Antarmuka Halaman Cart Pengunjung P04 - klik Beranda menuju ke P01 - klik Jaket menuju ke P02 - klik Informasi menuju ke P03 - klik Cart menuju ke P04 - klik Login menuju ke P05 - klik Register menuju ke P06 Ukuran Layar : 1000px X 1200px Font Ukuran 12 Beranda Jaket Logo perusahaan Informasi Cari Cart Register Login Informasi Kontak Perusahaan Cara Bayar Gambar 3. 68 Perancangan Antarmuka Halaman Informasi Pengunjung P05 - klik Beranda menuju ke P01 - klik Jaket menuju ke P02 - klik Informasi menuju ke P03 - klik Cart menuju ke P04 - klik Login menuju ke P05 - klik Register menuju ke P06 Ukuran Layar : 1000px X 1200px Font Ukuran 12 Beranda Jaket © RISTY COLLECTION 2013 Logo perusahaan Informasi Cari Cart Register Login Registrasi Submit Username : Password : Password : Nama : Email : no_telp : kodepos : Alamat : Provinsi : KabupatenKota : Gambar 3. 69 Perancangan Antarmuka Halaman Registrasi Pengunjung P06 - klik Beranda menuju ke P01 - klik Jaket menuju ke P02 - klik Informasi menuju ke P03 - klik Cart menuju ke P04 - klik Login menuju ke P05 - klik Register menuju ke P06 Ukuran Layar : 1000px X 1200px Font Ukuran 12 Beranda Jaket © RISTY COLLECTION 2013 Logo perusahaan Informasi Cari Cart Register Login Login Submit Username : Password : Gambar 3. 70 Perancangan Antarmuka Halaman Login Pengunjung

3.2.2.3 Perancangan Pesan

M01 Username atau password salah M02 Berhasil Ditambah M03 Anda yakin akan menghapus? M04 Berhasil Diubah M05 Tidak dapat menghapus user ini M06 Gambar berhasil diupload M07 Username atau password salah M08 Gambar berhasil diubah M09 upload file gambar gagal M10 Data tidak ditemukan Ya Tidak Gambar 3. 71 Perancangan Pesan

3.2.2.4 Jaringan Semantik

Jaringan Semantik digambarkan sebagai berikut: 1. Jaringan Semantik Admin A01 A03 A04 A05 A02 A03-1 A03-2 A04-3 A04-4 A04-8 A04-5 A04-6 A04-7 A04-9 A04-10 A04-11 A04-12 A04-13 A04-2 A04-1 Gambar 3. 72 Jaringan Semantik Admin 2. Jaringan Semantik Operator OP01 OP03 OP04 OP02 OP03-1 OP03-2 OP04-1 OP04-2 OP03-3 OP04-3 OP04-4 Gambar 3. 73 Jaringan Semantik Operator 3. Jaringan Semantik Member M01 M02 M02-1 M03 M03-2 M03-1 M05 M04 M04-1 Gambar 3. 74 Jaringan Semantik Member 4. Jaringan Semantik Pengunjung P01 P02 P02-2 P04 P03 P05 P06 Gambar 3. 75 Jaringan Semantik Pengunjung 3.2.2.5 Perancangan Prosedural Perancangan prosedural untuk pembangunan website e-commerce yang akan dibangun adalah sebagai berikut : 1. Prosedur Pendaftaran Prosedur Pendaftaran dapat dilihat pada Gambar 3.76 : Mulai Data Registrasi Data registrasi valid Selesai Data registrasi tidak valid Data registrasi valid Tidak Ya Cek data registrasi Simpan Data Registrasi Data Registrasi yang disimpan Gambar 3. 76 Prosedur Pendaftaran 2. Prosedur Login Prosedur Login dapat dilihat pada Gambar 3.77 : Menampilkan Pesan Gagal Login Mulai Username dan Password Verifikasi Username dan Password Ada? Selesai Ya Tidak Menampilkan Menu Sesuai Hak Akses Gambar 3. 77 Prosedur Login