87
4.2.5.2. Perancangan Input
Perancangan masukan input yaitu desain yang dirancang untuk menerima masukan dari pengguna sistem, rancangan input ini harus dapat
memberikan kejelasan dari pemakai baik dari bentuk maupun masukan-masukan
yang harus diisi. Perancangan input masukan pada sistem ini dirancang dengan
maksud untuk memenuhi kebutuhan pemakai sesuai dengan jumlah banyaknya data yang di input kedalam sistem. Adapun perancangan input pada sistem e-
commerce adalah sebagai berikut :
1. Perancangan Input Pengunjung
Berikut adalah perancangan halaman pendaftaran yang akan diisi oleh pengunjung untuk menjadi anggota pada sistem penjualan online.
Nama Lengkap Provinsi
xxx Kota
xxx xxx
Alamat
Kode pos Telepon
Username Password
Ulangi password Pertanyaan
Jawaban Batal
xxx xxx
xxx
xxx xxx
xxx xxx
Daftar
Pedaftaran Akun Anggota
xxx
Gambar 4.15. Perancangan Halaman Pendaftaran Akun Anggota
88
2. Perancangan Input Anggota
Pada perancangan input anggota ini, ada beberapa halaman yang harus diisi oleh anggota diantaranya adalah :
1 Perancangan halaman Login Anggota Form Login diisi ketika user telah melakukan pendaftaran sebagai anggota.
Data yang harus dimasukan yaitu data username dan password.
Username Password
xxx
Daftar Masuk
Login Akun Anggota
xxx
Gambar 4.16. Perancangan Halaman Login Akun Anggota
2 Perancangan Halaman Pemesanan Produk Halaman ini dirancang untuk anggota dalam melakukan pesanan produk
yang telah dipilih sebelumnya.
Pemesanan Produk
Foto Faktur
Kode
xxx Nama
xxx xxx
Ukuran Warna
Jumlah Keterangan
xxx
xxx xxx
Harga Ukuran
Warna Stock
gambar
xxx xxx
xxx xxx
xxx
gambar
Gambar 4.17. Perancangan Halaman Pemesanan Produk
89
Selain dapat memesan produk yang hanya ada di display, anggota juga dapat memesan produk dengan desain sendiri. Maka dibuatlah rancangan halaman
pemesanan produk desain sendiri.
Foto Faktur
Kode xxx
Nama xxx
xxx Ukuran
Warna Jumlah
Keterangan xxx
xxx xxx
Pemesanan Produk
xxx
gambar
xxx Browser
Gambar 4.18. Perancangan Halaman Pemesanan Produk
3 Perancangan Halaman Tujuan Pengiriman Halaman ini dirancang untuk mengisi tujuan pengiriman produk atas
pembeliaan yang telah dilakukan oleh anggota.
Nama Anggota Nama Tujuan
xxx Provinsi Tujuan
xxx xxx
Kota Tujuan Alamat Tujuan
Kode Pos Tujuan Telepon Tujuan
xxx xxx
xxx
Tujuan Pengiriman
xxx
Setuju Nama Produk
Jumlah Ukuran
Warna Harga
xxx xxx
xxx xxx
total xxx
Gambar 4.19. Perancangan Halaman Tujuan Pengiriman
90
4 Perancangan Halaman Konfirmasi Pembayaran Halaman ini diisi oleh anggota ketika anggota telah melakukan
pembayaran dengan cara mentransfer sejumlah uang yang telah ditentukan.
Konfirmasi Pembayaran Pesanan
Nama Anggota No. Pesanan
Nama Bank Tujuan Nama Bank Pengirim
Kantor Cabang Waktu
Tanggal Pembayaran Jam
Format 24 Jam Kode Transfer
No. Record Atas Nama
Jumlah Pembayaran ,-
xxx xxx
xxx xxx
xxx xxx
xxx xxx
xxx Menit
xxx xxx
xxx xxx
xxx Rp.
Konfirmasi Batal
Gambar 4.20. Perancangan Halaman Konfirmasi Pembayaran Pesanan 3.
Perancangan Input Petugas
Pada perancangan input anggota ini, ada beberapa halaman yang harus diisi oleh anggota diantaranya adalah :
1 Perancangan Halaman Login Petugas From login ini hanya bisa diisi oleh petugas yang ada di perusahaan saja.
Username Password
xxx
Masuk
Login Akun Petugas
xxx Batal
Gambar 4.21. Perancangan Halaman Login petugas
91
2 Perancangan Halaman Tambah Kategori Halaman tambah kategori hanya bisa diisi oleh petuagas, penambahan
kategori ini dimaksudkan agar petugas dapat menambahkan kategori produk.
Kode Kategori Nama Kategori
xxx
Batal Simpan
Tambah Kategori
xxx
Gambar 4.22. Perancangan Halaman Tambah Kategori
3 Perancangan Halaman Tambah Produk Rancangan halaman tambah produk dibuat untuk petugas agar petugas
dapat menambahkan produk yang baru ke display.
Ukuran Kategori
Kode Produk Nama Produk
Harga Warna
xxx xxx
Tambah Produk
Simpan xxx
Browse set
xxx xxx
xxx Rp.
,-
Foto xxx
Gambar 4.23. Perancangan Halaman Tambah Produk
Pada detail di produk, petugas dapat menambahkan data produk yang baru dengan kategori, kode dan nama produk yang sama.
92
Detail Produk
|tambah produk| Kategori Produk
Kode Produk xxx
xxx Nama Produk
xxx Foto
Ukuran Warna
Harga Stock
Aksi ubah hapus
Gambar xxx
xxx xxx
xxx
Tambah Produk
xxx
Ukuran Warna
Stock Harga
Foto Browse
xxx xxx
xxx xxx
xxx Rp.
,- set set
Simpan Batal
Gambar 4.24. Perancangan Halaman Tambah Produk
4 Perancangan Halaman Tambah Kota Halaman tambah kota diisi dengan nama-nama kota sesuai dengan
provinsi tujuan pengiriman barang dimana petugas juga bisa menentukan ongkos kirim produk yang dipesan.
Provinsi Kota
xxx
Batal Simpan
Tambah Kota
xxx Kode Area
Harga Rp.
,- xxx
xxx
Gambar 4.25. Perancangan Halaman Tambah Kota
93
4.2.5.3. Perancangan Output
Perancangan output yaitu informasi yang di hasilkan oleh sistem yang berupa hasil proses masukan yang diterima oleh sistem informasi. Informasi yang
dihasilkan oleh sistem e-commerce ini adalah sebagai berikut :
1. Perancangan Output Pengunjung
Berikut adalah perancangan halaman output yang ada di pengunjung.
Produk
Pilih Kategori : xxx
Cari Gambar
Gambar Gambar
xxx xxx
xxx xxx
xxx xxx
Desain Sendiri Desain Sendiri
Desain Sendiri xxx
Gambar 4.26. Perancangan Halaman Produk 2.
Perancangan Output Anggota
1 Perancangan Halaman Menampilkan barangProduk yang dijual Perancangan form ini yaitu untuk menampilkan produk yang akan di
display di halaman web. Halaman produk yang ada di anggota sama dengan
halaman yang ada di pengunjung yaitu pada Gambar 4.26.
2 Perancangan Halaman Pesanan Produk Setelah member memilih produk yang akan dibeli maka sistem akan
menampilkan output berupa halaman pesanan produk. Berikut adalah rancangan halaman pemesanan produk untuk anggota.
94
Pesanan Produk
Kategori Aksi
Nama Produk Harga
Jumlah xxx
xxx xxx
ubah xxx
batal Tanggal Pesan
No. Pesan Nama Pemesan
Gambar xxx
xxx xxx
xxx xxx
Gambar
Gambar 4.27. Perancangan Halaman Pesanan Produk
3 Perancangan Halaman Validasi Pesanan Setelah member melakukan pemesanan produk, selanjutnya anggota harus
meng-klik tombol Lanjut, dimana sistem akan menampilkan halaman validasi pesanan produk. Pada halaman validasi pesanan anggota dihadapkan pada dua
pilihan apakah akan menyetujui pemesanan atau apakah akan membatalkan pemesanan. Berikut adalah perancangan halaman pada validasi pesanan :
Validasi Pesanan
Nama Produk
Total Pembayaran Jumlah
Ukuran Warna
Harga xxx
xxx xxx
xxx Total
xxx xxx
xxx Setuju
Batal Subtotal
xxx Ongkos kirim nama kota
xxx
Gambar 4.28. Perancangan Halaman Validasi Pesanan
95
4 Perancangan Halaman Pesanan Produk Apabila anggota menyetujui pemesanan, maka pada keranjang pemesaan
akan ditampilkan halaman daftar pesanan produk. Berikut peracangan halaman pesanan menu keranjang :
Pesanan Produk
Nama Pesanan Total
Penerima Provinsi Tujuan
Kota Tujuan xxx
xxx xxx
xxx Aksi
xxx xxx
xxx
Gambar 4.29. Perancangan Halaman Pesanan Produk
5 Perancangan Halaman Detail Pesanan Produk Perancangan halaman detail pesanan produk dimaksudkan untuk
memberitahukan kepada petugas tentang transaksi yang dilakukan berikut dengan tanggal pengiriman dari perusahaan dan tanggal penerimaan barang yang dipesan
oleh anggota.
96
Tanggal Dikirim
Detail Pesanan Produk
Nama Produk
Total Pembayaran Jumlah
Ukuran Warna
Harga xxx
xxx xxx
xxx Total
xxx xxx
xxx Subtotal
xxx
Ongkos kirim nama kota
| kembali | No Pesanan
Nama Anggota Nama Tujuan
Status Pengiriman Tanggal Diterima
xxx xxx
xxx xxx
xxx xxx
xxx
Gambar 4.30. Perancangan Halaman Detail Pesanan Produk 2. Perancangan Output Petugas
1 Perancangan Halaman Produk Perancangan halaman produk ini dibuat untuk menampilkan produk-
produk yang telah diinputkan oleh petugas.
Produk
Kategori Kode Produk
Nama Produk Aksi
xxx xxx
detail xxx
| Kota | | Tambah Produk |
| Cetak Laporan |
xxx | Kategori produk |
Gambar 4.31. Perancangan Halaman Produk
97
2 Perancangan Halaman Detail Produk Halaman detail produk dirancang untuk mengetahui spesifikasi produk
yang telah diinputkan :
Foto Stock
Ukuran Warna
Harga xxx
xxx xxx
xxx Aksi
ubah
Detail Produk
| tambah produk | Kategori Produk
Kode Produk Nama Produk
hapus Gambar
xxx xxx
xxx xxx
Gambar 4.32. Perancangan Halaman Detail Produk.
3 Perancangan Halaman Kota Perancangan output halaman tambah kota dibuat untuk menmpilkan
provinsi, kota, kode area dan harga kirim.
Kota
Provinsi Kota
Kode Area Aksi
xxx xxx
ubah xxx
| Produk | + Tambah Kota +
xxx | Kategori produk |
Harga hapus
xxx
Gambar 4.33. Perancangan Halaman Kota
98
4 Perancangan Halaman Kategori Perancangan halaman tambah kategori ini dibuat untuk menampilkan
kategori produk yang telah diinputkan oleh petugas.
Kategori Produk
Kode Kategori Nama Kategori
Aksi xxx
ubah xxx
| Produk | | Tambah kategori |
xxx | Kota |
hapus
Gambar 4.34. Perancangan Halaman Kategori Produk
5 Perancangan Halaman Konfirmasi Pembayaran Berikut adalah perancangan halaman konfirmasi pembayaran yang
terdapat pada menu transaksi di petugas :
Konfirmasi Pembayaran
|Penjualan| |Pemesanan| No.Pesanan
No.Transfer Nama Anggota
Nama Penerima Nama Pengirim
Status Aksi
xxx xxx
xxx xxx
xxx xxx
ubah hapus
xxx
Gambar 4.35. Perancangan Halaman Konfirmasi Pembayaran
99
6 Perancangan Halaman ACC Konfirmasi Pemesanan Perancangan form ini dibuat untuk memudahkan petugas dalam
melakukan ACC terhadap pesanan. Peng-ACC-an dibuat setelah petugas meginputkan tanggal kirim dan tanggal terima.
ACC konfirmasi Pembayaran Pesanan
Nama Bank Tujuan Nama Bank Pengirim
Kantor Cabang Waktu Transfer
Tanggal Transfer xxx
Kode Transfer
Alamat Tujuan Kode Pos Tujuan
Telepon Tujuan Kode Produk
Ukuran No. Pesanan
Tanggal Konfirmasi Pembayaran No. Record
Nama Tujuan Nama Pengirm
Provinsi Tujuan Kota Tujuan
xxx
xxx xxx
xxx
xxx xxx
xxx xxx
xxx xxx
xxx xxx
xxx
xxx xxx
Nama Produk Warna
Harga Jumlah
Total xxx
xxx xxx
xxx xxx
xxx xxx
Sub Total Ongkos Kirim nama kota
xxx xxx
Total Pembayaran xxx
Tangal Kirim Tangal Terima
xxx xxx
xxx xxx
xxx xxx
ACC Batal
Gambar 4.36. Perancangan Halaman ACC Pesanan
100
7 Perancangan Halaman Penjualan Produk Setelah petugas melakukan peng ACC-an terhadap sebuah pembelian
maka data akan ditampilkan sebagai laporan penjualan. Berikut adalah rancangan halaman penjualan produk.
Penjualan Produk
|Konfirmasi| |Pemesanan|
No.Pesanan Kode Produk
Nama Produk Ukuran
Warna Jumlah
Kota Tujuan xxx
xxx xxx
xxx xxx
xxx xxx
xxx Tanggal Akhir
Tanggal Awal xxx
xxx xxx
xxx xxx
xxx Cetak
Gamabar 4.37. Perancangan Halaman Penjualan Produk
8 Perancangan Halaman Pemesanan Produk Pada halaman ini, petugas dapat mencetak laporan pemesanan hanya
dengan menginputkan tanggal awal pemesanan dan tangga akhir pemesanan.
Pemesanan Produk
|Konfirmasi| |Penjualan|
No.Pesanan Kode Produk
Nama Produk Ukuran
Warna Jumlah
Status xxx
xxx xxx
xxx xxx
xxx xxx
xxx Tanggal Akhir
Tanggal Awal xxx
xxx xxx
xxx xxx
xxx Cetak
Gamabar 4.38. Perancangan Halaman Pemesanan Produk
101
4.2.6. Perancangan Arsitektur Jaringan
Network adalah jaringan dari sistem komunikasi data yang melibatkan sebuah atau lebih sistem komputer yang dihubungkan dengan jalur tranmisi dan
alat komunikasi membentuk suatu sistem. Dengan adanya jaringan, komputer yang satu dapat memberikan berita ke komputer lain walaupun dalam area yang
berbeda. Pada sistem E-Commerce ini sangat dibutuhkan sebuah jaringan agar penjualan yang dilakukan PT. Rawa Jaya dapat di dapat oleh para konsumen.
Berikut ini merupakan perancangan arsitektur jaringan pada sistem e-commerce pada PT. Rawa Jaya :
Internet
Server Bag.Marketing User
User User
Modem Modem
Modem
Gambar 4.38 Perancangan Arsitektur Jaringan
Kategori