72
3. Sequence Diagram Pembayaran Berikut ini merupakan sequence diagram untuk proses pembayaran :
: Pelanggan Form pembayaran
Database
1 : Buka form validasi pembayaran
2 : Tampil form pembayaran 3 : Input form data pembayaran
4 : Periksa kelengkapan Inputan pembayaran
5 : Simpan data pembayaran
Gambar 4.12 Sequence Diagram Pembayaran yang Diusulkan
73
4. Sequence Diagram Konfirmasi Pembayaran Berikut ini merupakan sequence diagram untuk proses konfirmasi
pembayaran :
: Pegawai Form Data pembayaran
Form data order Database
1 : Buka form data pembayaran 2 : Form data pembayaran tampil
3 : Cek konfirmasi 4 : Buka form data order
5 : Form data order tampil 6 : Simpan data penjualan
Gambar 4.13 Sequence Diagram Konfirmasi Pembayaran yang Diusulkan
4.2.4.2 Class Diagram
Diagram kelas atau class diagram menggambarkan struktur sistem dari segi pendefinisian kelas-kelas yang akan dibuat untuk membangun sistem. Kelas
memiliki apa yang disebut atribut dan metode atau operasi. Rosa A.S- M.Shalahuddin 2011:122.Berikut adalah diagram kelas dari Sistem Informasi e-
Commerce pada Arindo Shoes:
74
member
+id +username
+nama +alamat
+idkota +kodepos
+email +telp
+hari +tgldaftar
+login +input
+save +logout
user
+iduser +username
+password +nama
+level +blokir
+id_seasion
+login +update
+save +logout
login
+pilihakses +username
+password +validasi login
produk
+id +idsubkategori
+merk +berat
+bahan +deskripsi
+harga +counter
+gambar +hari
+tgl +jam
+jual
+input +update
+save
buktibayar
+idbukti +idpemesanan
+pemilikrek +namabank
+jumlahbayar +banktujuan
+tgltransfer +noresi
+tglkirim +konfirmasi
+update +save
pemesanan
+id_order +idjasa
+idmember +nama
+alamat +kota
+kodepos +telp
+email +status_order
+hari +tgl
+jam +kadaluarsa
+buktibayar +resikirim
+ket
+input +save
1 1..
1.. 1
1.. 1
1 1..
1 1
1.. 1..
1.. 1..
1.. 1..
Gambar 4.14 Class Diagram yang Diusulkan
4.2.4.3 Component Diagram
Diagram komponen atau component diagram dibuat untuk menunjukkan organisasi dan ketergantungan di antara kumpulan komponen dalam sebuah
sistem. Diagram komponen fokus pada komponen sistem yang dibutuhkan dan ada di dalam sistem. Rosa A.S
– M.Shalahuddin 2011:125. Berikut adalah diagram komponen dari Sistem Informasi e-Commerce
pada Arindo Shoes :
75
Sistem informasi e-Commer pada Arindo Shoes
home.php
produk.php
Pemesanan.php
buktibayar.php member.php
user.php login.php
Gambar 4.15 Component Diagram yang Diusulkan
4.2.4.3 Deployment Diagram
Diagram deployment atau deployment diagram menunjukkan konfigurasi komponen dalam proses eksekusi aplikasi. Rossa A.S
– M.Shalahuddin 2011:129.
Berikut adalah diagram komponen dari Sistem Informasi e-Commerce pada Arindo Shoes:
76
Clent BrowserMozila Firefox Web Server XMPP
Database Server MySQL
Permintaan form
Permintaan koneksi database
Gambar 4.16 Deployment Diagram yang Diusulkan
4.2.5 Perancangan Antar Muka
Sub bab ini membahas mengenai struktur menu, perancangan input output, yang akan digunakan pada Sistem Informasi e-Commerce pada Arindo Shoes.
4.2.5.1 Struktur Menu
Struktur menu adalah bentuk umum dari suatu rancangan program untuk memudahkan pemakai dalam menjalankan program komputer sehingga pada saat
menjalankan program komputer, agar user tidak mengalami kesulitan dalam memilih menu-menu yang diinginkan.
1. Struktur Menu Pelanggan Berikut adalah rancangan struktur menu pelanggan :
Beranda Profil
Pembayaran Kontak
Belanja
Website Arindo Shoes
Kategori Member Area
Jasa Pengiriman
Gambar 4.17 Struktur Menu Pelanggan yang Diusulkan
77
2. Struktur Menu Administrator Berikut adalah rancangan struktur menu Administrator :
Website Arindo Shoes
Beranda Data Barang
Data Master Data Member
Data Pembayaran Data Order
Data User Data Penjualan
Cetak Laporan
Gambar 4.18 Struktur Menu Administrator yang Diusulkan 4.2.5.2 Perancangan
Input
Rancangan tampilan ini dipergunakan bagi pengguna yang berkepentingan untuk menggunakan program aplikasi. Bagi yang berkepentingan menggunakan
program aplikasi ini maka terlebih dahulu harus memasukkan username dan password.
a. Login Perancangan form ini sebagai tahap selanjutnya dari pengguna yang telah
menjadi pelanggan untuk dapat melanjutkan ke tahap selanjutnya dengan melakukan login terlebih dahulu dengan mengisikan Username dan Password.
Username Password
: Batal
Login
Daftar Baru | Lupa Password ?
Member Area
Gambar 4.19 Rancangan Tampilan Login Pelanggan
78
b. Pendaftaran Pelanggan Berikut merupakan perancangan dari formulir pendaftaran pengguna
sebagai pelanggan yang nantinya akan digunakan untuk memudahkan proses selanjutnya.
Username :
Nama Lengkap :
Password :
Alamat :
Propinsi :
Kota :
Kode Pos :
TelephonHP :
Emai :
……... ……………...Pilih Kota…………………..
V
……………...Pilih Propinsi……………..
V
Reset Simpan
ISI SESUAI DATA ANDA YANG VALID
Form Pendaftaran Member Baru
Gambar 4.20 Rancangan Tampilan Pendaftaran Pelanggan
c. Form Pembayaran Pada form ini, pemesan yang sudah melakukan pembayaran dapat
langsung mengkonfirmasinya di form ini.
Konfirmasi Pembayaran
No Order Nama Pemilik Rekening
Nama Bank Jumlah Transfer
Nama Bank Tujuan Tgl Transfer
No Resi Pembayaran Rp.
Mandiri
V
Mandiri
V
2013
V
05
V
20
V
Gambar 4.21 Rancangan tampilan Konfirmasi Pembayaran
