• Tidak ada hasil yang ditemukan

Tampilan User

Dalam dokumen BAB IV PERANCANGAN SISTEM (Halaman 33-45)

SALLY SHOP ADMINISTRATOR

2. Tampilan User

a. Desain Tampilan Home User

Halaman home user merupakan tampilan awal pada saat user telah memasuki program.

Home Cara Belanja About Kontak Register Login

Logo

Slide Show

Produk Terbaru Nama Produk

Foto Produk

Harga Detail

Nama Produk Foto Produk

Harga Detail

Nama Produk Foto Produk

Harga Detail

Nama Produk Foto Produk

Harga Detail Nama Produk

Foto Produk

Harga Detail

Nama Produk Foto Produk

Harga Detail

Nama Produk Foto Produk

Harga Detail

Nama Produk Foto

Logo bank Logo Bank Logo Pengirim

Copyright @ BUTIK SALLY 2012

Gambar 4.22 Desain Tampilan Home User

b. Desain Tampilan Cara Belanja

Halaman cara belanja menampilkan keterangan mengenai cara berbelanja pada web Butik Sally.

Home Cara Belanja About Kontak Register Login

Logo

Cara Belanja Kategori

Foto Kategori

Foto Kategori

Foto Kategori

Logo bank Logo Bank Logo Pengirim

Logo bank

Logo Pengirim

Copyright @ BUTIK SALLY 2012

Gambar 4.23 Desain Tampilan Cara Belanja

c. Desain Tampilan Cara Pembayaran

Halaman cara pembayaran menampilkan cara pembayaran melalui nomor rekening bank yang digunakan oleh Butik Sally

Home Cara Belanja About Kontak Register Login

Logo

Produk Terbaru Kategori

Foto Kategori

Foto Kategori

Foto Kategori

Logo bank Logo Bank Logo Pengirim ID Pesanan

Tanggal Transfer Bang tujuan Bang Asal Pengirim No Rekening Pengirim Atas Nama No. Resi Jumlah Bayar (Rp.)

dd Bank

mm Year

Konfirmasi

Copyright @ BUTIK SALLY 2012

Gambar 4.24 Desain Tampilan Cara Pembayaran

d. Desain Tampilan Login Member

Halaman login member adalah halaman yang disediakan berupa tampilan form login untuk member apabila akan memasuki program

Home Cara Belanja About Kontak Register Login

Logo

Login Member Kategori

Foto Kategori

Foto Kategori

Foto Kategori

Logo bank Logo Bank Logo Pengirim

Username Password

Lupa Password

Login

Copyright @ BUTIK SALLY 2012

Gambar 4.25 Desain Tampilan Login Member

e. Desain Tampilan Registrasi User

Halaman registrasi user adalah tampilan yang berupa form saat user melakukan proses registrasi.

Home Cara Belanja About Kontak Register Login

Logo

Registrasi Kategori

Foto Kategori

Foto Kategori

Foto Kategori

Logo bank Logo Bank Logo Pengirim Email

Password Nama Jenis Kelamin

Alamat

Kode Pos

No Telp/Hp Kode Masukan Kode Kota

Register

Copyright @ BUTIK SALLY 2012

Gambar 4.26 Desain Tampilan Registrasi User

f. Desain Tampilan Detail Produk untuk Member

Halaman detail produk menampilkan detail produk yang tersedia pada Butik Sally.

Home Cara Belanja About Kontak Register Login

Logo

Detai Produk

Kategori

Foto Kategori

Foto Kategori

Foto Kategori

Logo bank Logo Bank Logo Pengirim Main User

Edit Profile Ganti Password Keranjang Belanja Pembayaran Nota

Track Pemesanan

Berat Harga Ukuran

Stok Warna

:

: : : :

Beli Gambar

Copyright @ BUTIK SALLY 2012

Gambar 4.27 Desain Tampilan Detail Produk

g. Desain Tampilan Keranjang Belanja untuk Member

Halaman keranjang belanja menampilkan form keranjang belanja untuk member.

Home Cara Belanja About Kontak Register Login

Logo

Keranjang Belanja

Kategori

Foto Kategori

Foto Kategori

Foto Kategori

Logo bank Logo Bank Logo Pengirim

Main User

Edit Profile Ganti Password Keranjang Belanja Pembayaran Nota

Track Pemesanan

Kode

Nama

produk Ukuran Warna Qty Harga Batal

Total Berat Total belanja

: : Belanja Lagi Lanjutkan

Copyright @ BUTIK SALLY 2012

Gambar 4.28 Desain Tampilan Keranjang Belanja

h. Desain Tampilan Check Out Step 1 untuk Member

Halaman ini berupa form yang berfungsi untuk memasukkan nama penerima dan alamat pengiriman apabila akan merubah penerima dan alamat yang akan dituju.

Home Cara Belanja About Kontak Register Login

Logo

Check Out Step 1

Kategori

Foto Kategori

Foto Kategori

Foto Kategori

Logo bank Logo Bank Logo Pengirim Main User

Edit Profile Ganti Password Keranjang Belanja Pembayaran Nota

Track Pemesanan

Nama Penerima Alamat pengiriman

Kota Kode Pos No Telp/Hp

Kembali Lanjutkan

Copyright @ BUTIK SALLY 2012

Gambar 4.29 Desain Tampilan Check Out Step 1

i. Desain Tampilan Check Out Step 2 untuk Member

Halaman ini berfungsi untuk menunjukkan kepada member mengenai produk yang telah dipesan dan alamat pengiriman yang akan dituju.

Home Cara Belanja About Kontak Register Login

Logo

Check Out Step 2

Kategori

Logo bank Logo Bank Logo Pengirim

Main User

Edit Profile Ganti Password Keranjang Belanja Pembayaran Nota

Track Pemesanan

Nama Penerima Alamat pengiriman Kota

Kode Pos No Telp/Hp

: : : : :

ID Nama Harga

(Rp.)

Subtotal (Rp.) Qty Berat

Total berat Ongkos Kirim Total Total belanja

: :

: : Kembali Lanjutkan

Copyright @ BUTIK SALLY 2012

Gambar 4.30 Desain Tampilan Check Out Step 2

j. Desain Tampilan Tracking Pembelanjaan

Halaman ini berfungsi untuk menunjukkan kepada member mengenai status transaksi.

Home Cara Belanja About Kontak Register Login

Logo

Tracking Pembelanjaan

Kategori

Foto Kategori

Foto Kategori

Foto Kategori

Logo bank Logo Bank Logo Pengirim

Main User

Edit Profile Ganti Password Keranjang Belanja Pembayaran Nota

Track Pemesanan

Nama Penerima Alamat pengiriman Kota

Kode Pos No Telp/Hp

: : : : : ID

Pesan Tgl Pesan Jml

bayar(Rp.) No.Resi Status

Copyright @ BUTIK SALLY 2012

Gambar 4.31 Desain Tampilan Tracking Pembelanjaan

k. Desain Tampilan History Transaksi untuk Member

Halaman ini berfungsi untuk menampilkan data barang yang telah dipesan sekaligus mencetak invoice.

Home Cara Belanja About Kontak Register Login

Logo

History Transaksi

Kategori

Foto Kategori

Foto Kategori

Foto Kategori

Logo bank Logo Bank Logo Pengirim

Main User

Edit Profile Ganti Password Keranjang Belanja Pembayaran Nota

Track Pemesanan

Nama Penerima Alamat pengiriman Kota

Kode Pos No Telp/Hp

: : : : :

No ID

Pemesanan Waktu

Pemesanan Total # Bayar

Copyright @ BUTIK SALLY 2012

Gambar 4.32 Desain Tampilan History Transaksi untuk Member

l. Desain Tampilan Konfirmasi Pembayaran untuk Member

Halaman ini berfungsi untuk member yang akan melakukan konfirmasi pembayaran.

Home Cara Belanja About Kontak Register Login

Logo

Produk Terbaru Kategori

Logo bank Logo Bank Logo Pengirim ID Pesanan

Tanggal Transfer Bang tujuan Bang Asal Pengirim No Rekening Pengirim Atas Nama No. Resi Jumlah Bayar (Rp.)

dd Bank

mm Year

Konfirmasi

Copyright @ BUTIK SALLY 2012

Gambar 4.33 Desain Tampilan Konfirmasi Pembayaran untuk Member

4.2.6 Perancangan Arsitektur Jaringan

Arsitekrur jaringan merupakan sebuah sistem dimana sistem tersebut terdiri atas komputer (dapat berupa PC, laptop, handphone), software (sistem operasi, aplikasi) dan perangkat jaringan lainnya yang bekerja bersama-sama untuk mencapai suatu tujuan yang sama. Suatu jaringan ini akan saling berhubungan untuk menghasilkan informasi yang dibutuhkan oleh user.

Arsitektur jaringan yang digunakan yaitu jaringan internet, dimana jaringan internet ini merupakan jaringan komputer yang bisa dikategorikan sebagai WAN, menghubungkan berjuta komputer diseluruh dunia, tanpa batas negara, dimana setiap orang yang memiliki komputer dapat bergabung ke dalam jaringan ini hanya dengan melakukan koneksi ke penyedia layanan internet (Internet Service Provider/ISP). Berikut ini perancangan arsitektur jaringan yang digunakan pada aplikasi Butik Sally:

Gambar 4.34 Perancangan Arsitektur Jaringan

Dalam dokumen BAB IV PERANCANGAN SISTEM (Halaman 33-45)

Dokumen terkait