Perancangan Antarmuka Perancangan Sistem

72 BEC Online System Tablet Smartphone Komputer Laptop New Product Product Discount Product Promo Daftar Toko Enter Text Enter Text Enter Text Login Registrasi Toko Contact About Us Contact Privacy Customer Support Banner Promosi Banner Promosi Banner Promosi Product Product Product Product Product Product Product Product Product Product Product Product toko toko toko Product Product Product Product Brand Brand Brand Brand toko Gambar 4.30 Halaman Utama 2 Perancangan Antarmuka Detail Produk 73 BEC Online System Tablet Smartphone Komputer Laptop Enter Text Enter Text Enter Text Product detail Description Login Registrasi Toko Contact About Us Contact Privacy Customer Support Gambar Produk Produk suggestion Product Description Product Product Product Product Brand Brand Brand Brand Produk suggestion Product Information Gambar 4.31 Detail Produk 3 Perancangan Antarmuka Daftar Pencarian Produk – Grid BEC Online System Tablet Smartphone Komputer Laptop Product Search Enter Text Enter Text Enter Text Login Registrasi Toko Contact About Us Contact Privacy Customer Support Product Product Product Product Product Product Product Product Product Product Product Product Product Product Product Product Brand Brand Brand Brand Gambar 4.32 Pencarian Produk – Grid 74 4 Perancangan Antarmuka Daftar Pencarian Produk – List BEC Online System Tablet Smartphone Komputer Laptop Product Search Enter Text Enter Text Enter Text Login Registrasi Toko Contact About Us Contact Privacy Customer Support Product Product Product Product Product Brand Brand Brand Brand Product Product Product Product Product Information Product Information Product Information Product Information Product Information Gambar 4.33 Pencarian Produk – List 5 Perancangan Antarmuka Login BEC Online System Tablet Smartphone Komputer Laptop New Store Login Link Login Registrasi Toko Contact About Us Contact Privacy Customer Support User name Password Login Gambar 4.34 Login 6 Perancangan Antarmuka Registrasi 75 BEC Online System Tablet Smartphone Komputer Laptop Registrasi toko Menu Login Registrasi Toko Contact About Us Contact Privacy Customer Support Name Email Register address phone Fax 2nd Address City Username Password Gambar 4.35 Registrasi Owner 7 Perancangan Antarmuka Dashboard pada Administrator Super Admin Navigation Diskspace Mengolah Kategori Mengolah Admin Mengolah Data Owner Brand Produk Kota Disk Space Usage Dashboard Message logout Admin icon icon Icon New User Inactive User All message Gambar 4.36 Dashboard Administrator 8 Perancangan Antarmuka Daftar Owner 76 Super Admin Navigation Diskspace Name Email Address City Active Mengolah Kategori Mengolah Admin Mengolah Data Owner Brand Produk Kota Disk Space Usage Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Dashboard Message logout Admin icon icon Icon Owner Data table Gambar 4.37 Daftar Owner 9 Perancangan Antarmuka Edit Owner Super Admin Navigation Diskspace Mengolah Kategori Mengolah Admin Mengolah Data Owner Brand Produk Kota Disk Space Usage Dashboard Message logout Admin icon icon Icon Edit Owner Username name save email phone Fax Npwp no. valid address city Enable cancel Gambar 4.38 Form Edit Owner 10 Perancangan Antarmuka Daftar Admin 77 Super Admin Navigation Diskspace Name Email Address City Active Mengolah Kategori Mengolah Admin Mengolah Data Owner Brand Produk Kota Disk Space Usage Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Dashboard Message logout Admin icon icon Icon Admin Data table Gambar 4.39 Daftar Admin 11 Perancangan Antarmuka Tambah Admin Super Admin Navigation Diskspace Mengolah Kategori Mengolah Admin Mengolah Data Owner Brand Produk Kota Disk Space Usage Dashboard Message logout Admin icon icon Icon Tambah Admin name username Save email password Re-password address phone mobile city Pastal code Cancel Gambar 4.40 Form Tambah Admin 12 Perancangan Antarmuka Edit Admin 78 Super Admin Navigation Diskspace Mengolah Kategori Mengolah Admin Mengolah Data Owner Brand Produk Kota Disk Space Usage Dashboard Message logout Admin icon icon Icon Edit Admin name username Save email password Re-password address phone mobile city Pastal code Cancel Gambar 4.41 Form Edit Admin 13 Perancangan Antarmuka Daftar Kategori Super Admin Navigation Diskspace Kode Name Action Mengolah Kategori Mengolah Admin Mengolah Data Owner Brand Produk Kota Disk Space Usage Text Text Text Text Text Text Text Text Text Dashboard Message logout Admin Text Text Text icon icon Icon Kategori Data table Gambar 4.42 Daftar Kategori 14 Perancangan Antarmuka Tambah Kategori 79 Super Admin Navigation Diskspace Mengolah Kategori Mengolah Admin Mengolah Data Owner Brand Produk Kota Disk Space Usage Dashboard Message logout Admin icon icon Icon Tambah Kategori Code name save Note cancel Gambar 4.43 Form Tambah Kategori 15 Perancangan Antarmuka Edit Kategori Super Admin Navigation Diskspace Mengolah Kategori Mengolah Admin Mengolah Data Owner Brand Produk Kota Disk Space Usage Dashboard Message logout Admin icon icon Icon Edit Kategori Code name save Note cancel Gambar 4.44 Form Edit Kategori 16 Perancangan Antarmuka Daftar Detail Kategori 80 Super Admin Navigation Diskspace Kode Name Kategori Action Mengolah Kategori Mengolah Admin Mengolah Data Owner Brand Produk Kota Disk Space Usage Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Dashboard Message logout Admin icon icon Icon Detail Kategori Data table Gambar 4.45 Daftar Detail Kategori 17 Perancangan Antarmuka Tambah Detail Kategori Super Admin Navigation Diskspace Mengolah Kategori Mengolah Admin Mengolah Data Owner Brand Produk Kota Disk Space Usage Dashboard Message logout Admin icon icon Icon Edit Detail Kategori Code name save Note cancel kategori Gambar 4.46 Form Tambah Detail Kategori 18 Perancangan Antarmuka Edit Detail Kategori 81 Super Admin Navigation Diskspace Mengolah Kategori Mengolah Admin Mengolah Data Owner Brand Produk Kota Disk Space Usage Dashboard Message logout Admin icon icon Icon Edit Detail Kategori Code name save Note cancel kategori Gambar 4.47 Edit Detail Kategori 19 Perancangan Antarmuka Dashbord Owner Super Owner Navigation Diskspace Keyword Kategori barang Mengolah Promosi Mengolah Produk Disk Space Usage Dashboard logout Admin Text Text Text Text Text Text Text Text Text icon icon Icon Data Pencarian Gambar 4.48 Dashboard Owner 20 Perancangan Antarmuka Tambah Produk 82 Super Owner Navigation Diskspace Mengolah Kategori Mengolah Admin Mengolah Data Owner Brand Produk Kota Disk Space Usage Product Picture Product Specification Dashboard Message logout Admin icon icon Icon Tambah Produk code name Save thumbnail desc quantity price discount category brand Cancel Gambar 4.49 Form Tambah Produk 21 Perancangan Antarmuka Edit Produk 83 Super Owner Navigation Diskspace Mengolah Kategori Mengolah Admin Mengolah Data Owner Brand Produk Kota Disk Space Usage Product Picture Product Specification Dashboard Message logout Admin icon icon Icon Edit Produk code name Save changes thumbnail desc quantity price discount category brand Cancel Gambar 4.50 Form Edit Produk

4.2.5. Perancangan Arsitektur Jaringan

N-tier Arsitektur menyediakan model dimana pengembang dapat membuat aplikasi yang fleksibel dan dapat digunakan kembali. Dengan memisahkan aplikasi menjadi beberapa tingkatan, pengembang mendapatkan memilih untuk memodifikasi atau menambahkan lapisan tertentu tanpa harus mengerjakan ulang seluruh aplikasi. Arsitektur three-tier terdiri dari presentasi tier, bisnis atau akses data tier, dan data tier. 84 Gambar 4.51 Arsitektur Jaringan 1 Client: Mengontrol interaksi antara aplikasi dengan user. Dimana client dapat menggunakan browser, java client, applet atau mobile.