Bab iv

39
BAB IV
PEMBAHASAN
A. Perancangan
Dengan adanya teknologi komputer, maka seharusnya Batik Nafa
mengadakan perubahan yang semula menggunakan sistem penjualan yang
sedang berjalan saat ini menjadi sistem penjualan berbasis web yang bisa
diakses secara menyeluruh ke berbagai daerah.
Sistem penjualan yang diharapkan untuk Batik Nafa baik transaksi order
maupun non-order yaitu sistem penjualan berbasis web yang dapat
mempermudah transaksi penjualan baik order maupun non-order pada Batik
Nafa yang sebagian pelanggannya berasal dari luar Pekalongan. Sistem
penjualan berbasis web merupakan sistem yang dapat diakses secara online
melalui internet sehingga dapat diakses seluruh dunia, hal tersebut sangat
menguntungkan bagi Batik Nafa untuk memperluas pemasaran yang selama
ini dibatasi waktu, jarak yang jauh, dan biaya yang lebih untuk menggaji
karyawan sebagai tim pemasaran. Selain itu, sistem dapat mempermudah
pelanggan dalam mencari informasi produk seperti tampilan, deskripsi, dan
harga pada Batik Nafa. Batik Nafa bisa menghemat waktu dalam transaksi
baik order maupun non-order karena perhitungannya yang otomastis.
Pada tahap analisis ini digunakan Unified Modelling Language (UML),
Lembar Kerja Tampilan (LKT), dan Jaring Semantik LKT sebagai alat bantu
rancangan sistem yang akan dibangun untuk sistem penjualan berbasis web
pada Batik Nafa dengan menggunakan Use Case Diagram, Activity Diagram,
Class Diagram, State Diagram dan Sequence Diagram.
B. DesainSistem
Pada tahap perancangan sistem ini bertujuan untuk mengetahui
kebutuhan – kebutuhan yang mendukung sistem yang akan di rancang.
1. Desain sistem secara umum
a. Unified Modelling Language (UML)

40
1) Diagram Use Case
i. Diagram Use Case Member (Transaksi Non-Order)
Gambar 4.1 Diagram use case alur transaksi Non-Order pada Member
ii. Diagram Use Case Admin (Transaksi Non-Order)
Gambar 4.2 Diagram use case alur transaksi Non-Order pada Admin
Memilih Produk
Login Member
<<include>>
Pengecekan Transaksi
<<include>>
Memilih Jasa
Pengiriman
<<include>>
Tersimpan ke Data Penjualan
<<include>>
pelanggan
Mobile Banking
Transfer Tunai
Pembayaran
<<include>>
e-banking
<<extend>>
<<extend>>
<<extend>>
Pengecekan Pembelian
Admin
Pengecekan Pembayaran
Pengecekan Stok Produk
<<include>>
<<extend>>

41
iii. Diagram Use Case Member (Transaksi Order)
Gambar 4.3 Diagram use case alur transaksi Order pada Member
iv. Diagram Use Case Admin (Transaksi Order)
Gambar 4.4 Diagram use case alur transaksi Order pada Admin
Login Member
Mengisi Form Pesanan
<<include>>
Mengirim Form Pesanan
<<include>>
Pengecekan Konfirmasi
Kesanggupan
<<include>>
Pelanggan
transfer tunai
e-banking
Pembayaran
<<extend>>
mobile banking
<<extend>>
<<extend>>
<<extend>>
Login Admin
Pengecekan Pesanan Member
<<include>>
Konfirmasi Kesanggupan
<<include>>
Pengecekan Pembayaran
<<extend>>
Admin

42
2) Diagram Activity
i. Diagram Activity Transaksi Non-Order
Gambar 4.5 Diagram activity alur transaksi Non-Order
pada Member
Alur di atas dimulai dengan memilih produk lalu ada simbol
desicion atau digunakan untuk memilih 2 pilihan dimana
jika belum menjadi member harus menuju ke halaman
daftar terlebih dahulu untuk mengisi form pendaftaran lalu
menuju ke halaman masuk atau sign in, jika sudah menjadi
member maka bisa langsung menuju ke halaman masuk.
Mulai
Selesai
Memilih Produk
Login Member
Memilih Jasa
Pengiriman
Pembayaran
Tutup
Transaksi
Daftar Member
jika member jika bukan member

43
ii. Diagram Activity Transaksi Order
Gambar 4.6 Diagram activity alur transaksi order pada Member
iii. Diagram Activity Login Member
Gambar 4.7 Diagram activity alur Login Member
Mulai
Masuk
Halaman Login
Menginputkan
Username & Password
Selesai
Validasi Username
& Password
Masuk Halaman
Transaksi
Jika Benar
Jika Salah
Sistem/ProsesPelanggan
Mulai
Masuk Halaman
Pemesanan
Pengecekan
Konfirmasi
Pembayaran
Menginput Form
Pemesanan
Login Member
jika member
Daftar Member
Konfirmasi
dikirim
Mengirim Data
Pesanan
Pengecekan
Pembayaran
Konfirmasi
Pengecekan
Pesanan
Tutup Order
Selesai
jika sanggup
jika tidak sanggup
AdminSistemPelanggan

44
iv. Diagram Activity Login Admin
Gambar 4.8 Diagram activity alur Login Admin
v. Diagram Pendaftaran
Gambar 4.9 Diagram activity alur Pendaftaran Member
Mulai
Masuk Halaman
Login Admin
Menginput Username &
Password
Selesai
Validasi Username
& Password
Masuk Halaman
Admin
Jika Salah
Jika Benar
Sistem/ProsesAdmin
Mulai
Masuk Halaman
Daftar
Menginput Data
pada Form
Klik Daftar Menyimpan data
Member Baru
Masuk ke data
member
Selesai
Sistem/ProsesPelanggan

45
vi. Diagram Activity Pembayaran e-banking
Gambar 4.10 Diagram activity alur Pembayaran
vii. Diagram Activity Pembayaran Mobile Banking
Gambar 4.11 Diagram activity alur Pembayaran Mobile
Banking
Mulai
Memilih Pembayaran
e-banking
Menginput Data
Transfer
Mengirim Data Pembayaran
Pelanggan
Uang Terkirim
ke Tujuan
Pengecekan data
Pembayaran dari Bank
Selesai
Login ke e-
banking
Mulai
Memilih Pembayaran
Mobile Banking
Kirim Pesan
Transfer melalui HP
Ketik Pesan
Transfer melalui HP
Uang Terkirim
Mengirim data
pembayaran Pelanggan
Selesai
Mengecek Pembayaran
Pelanggan
AdminSistem/prosesPelanggan

46
viii. Diagram Activity Pembayaran Mobile Banking untuk
Android
Gambar 4.12 Diagram activity alur Pembayaran Mobile
Banking berbasis Android
Salah satu alur pembayaran yang digunakan adalah Mobile
Banking. Mobile banking ada 2 yaitu mobile banking biasa
atau biasa disebut SMS Banking dan mobile banking
berbasis android yang berbentuk aplikasi yang sudah
disediakan. Aplikasi tersebut harus didownload terlebih
dahulu sebelum membukanya.
Mulai
Membuka Aplikasi
Mobile Banking
Memilih Pembayaran
Mobile Banking
Input Data
Transfer
Memilih Mobile
Banking
Memilih
Transfer
Uang Terkirim
ke Tujuan
Mengirim Data Pembayaran
Pelanggan
Selesai
Pengecekan Data
Pembayaran dari Bank

47
3) Diagram Class
Gambar 4.13 Diagram Class
Keterangan
Relasi dependency atau kebergantungan :
Relasi asosiasi biasa :
Relasi gen-spek :
Pada relasi asosiasi terdapat bentuk hubungan 1  n
artinya one to many, misal pada relasi antara admin dengan
produk artinya 1 admin bisa mengisi banyak data produk
tapi tidak sebaliknya.

48
4) Diagram State
i. Diagram State Transaksi Non-Order (Member)
Gambar 4.14 Diagram state alur transaksi Non-Order Member
ii. Diagram State Transaski Non-Order (Admin)
Gambar 4.15 Diagram state alur transaksi Non-Order pada Admin
iii. Diagram State Transaski Order (Member)
Gambar 4.16 Diagram state alur transaksi Order Member
Mulai
Selesai
Halaman
List Produk
Login
Member
Halaman
Transaksi
Selesai
Transaksi
selesai belanja, pilih bayar
jika user dan pass benar
jika salah username & password
Pembayaran
uang terkirim
Memilih Pembayaran
Mulai
Selesai
Login
Member
Halaman
Pemesanan
Halaman Konfirmasi
Pesanan
Selesai
Pembayaran
jika pass & user benar pilih menu status konfirmasi
jika salah username & password
Pembayaran
uang terkirim
jika menyanggupi lalu
Memilih Pembayaran
jika tidak sanggup
Mulai
Selesai
Login
Admin
Halaman
Admin
Halaman Pengecekan
Pembelian
Halaman Pengecekan
Pembayaran
jika pass & username benar
pilih button cek pembelian
pilih button cek pembayaran
jika pass & username salah

49
iv. Diagram State Transaski Order (Admin)
Gambar 4.17 Diagram state alur transaksi Order pada Admin
5) Diagram Sequence
i. Diagram Sequence Transaksi Non-Order (Member)
Gambar 4.18 Diagram sequence alur transaksi Non-Order
pada Member
Mulai
Selesai
Login
Admin
Halaman
Admin
Halaman Pengecekan
Pembelian
Halaman Pengecekan
Pembayaran
jika pass & username salah
jika pass & username benar
pilih button cek pembelian
Konfirmasi
Pesanan
jika pilih button konfirmasi pesanan
jika iya
jika tidak
Halaman List
Produk
Halaman Login
Member
Halaman
Transaksi
PembayaranT.Jasa
Pengiriman
T.Transaksi
Non-Order
T. MemberT.Produk
mengambil data
selesai pilih produk & pilih bayar
input pass & user
jika pass & user benar
jika pass & userl salah
input data transaksi
menampilkan data produk
input data pengiriman
Memilih Pembayaran

50
ii. Diagram Sequence Transaksi Non-Order (Admin)
Gambar 4.19 Diagram sequence alur transaksi Non-Order pada
Admin
iii. Diagram Sequence Transaksi Order (Member)
Gambar 4.20 Diagram sequence alur transaksi Order pada Member
T.MemberHalaman Login
Admin
Halaman Admin Halaman
Pembayaran
T.Jasa
Pengiriman
T.ProdukT.Transaksi
NonOrder
T. Admin
input pass & email
jika pass & email benar
jika pass & email salah
display data transaksi
displaydata member
displaydata produk
pilih button cek pembayaran
displaydata jasa kirim
Halaman Login
Member
Halaman
Pemesanan
PembayaranT Jasa
Pengiriman
T.Transaksi
Order
T. Member
input data transaksi
input pass & email
input jasa pengiriman
Memilih Pembayaran

51
iv. Diagram Sequence Transaksi Order (Admin)
Gambar 4.21 Diagram sequence alur transaksi Order pada Admin
2. LKT (Lembar Kerja Tampilan)
a. Lembar kerja tampilan halaman Utama / Produk
Gambar 4.22 LKT Halaman Utama
No. 1
Navigasi :
1. Pilih Menu
“Produk”masuk
ke hal utama
2. Pilih Menu
“Pesan” masuk
ke hal pesan
3. Pilih Menu
“Daftar”masuk
ke hal
pendaftaran
4. Pilih Menu
“Masuk”akan
menuju ke hal
masuk
5. Pilih Menu
“Profil” akan
meuju hal Profil
6. Pilih “Beli” akan
masuk ke
keranjang
belanja
Keterangan
Font : cambria, 12 pt, hitam
Background : putih
Sliding : gambar – gambar dari beberapa produk Batik Nafa
Sliding Gambar
List produk
Produk Pesan Daftar Masuk Profil
Keranjang
Belanja
Beli
Halaman Login
Admin
Halaman Admin Halaman
Pembayaran
T.Jasa
Pengiriman
Halaman Konfirmasi
Pesanan
T.MemberT.Transaksi
Order
T. Admin
displaydata member
display data transaksi
input pass & email
pilih button konfirmasi
pilih cek pembayaran
jika tidak dan logout
displaydata jasa pengiriman

52
Halaman utama merupakan halaman awal atau halaman pertama
yang akan ditampilkan saat pertama kali mengakses website Batik
Nafa. Halaman utama digunakan sebagia halaman produk karena
langsung menampilkan produk – produk terbaru dari Batik Nafa.
Pada halaman ini terdapat 5 menu, yaitu menu produk menampilkan
produk – produk, menu pesan digunakan untuk para member atau
pelanggan yang ingin memesan produk yang diinginkan, menu daftar
digunakan untuk mendaftar menjadi member dari website Batik Nafa
sehingga bisa melakukan jual-beli secara online, menu masuk
digunakan untuk masuk atau sign in sebagai member tapi hanya bisa
dilakukan setelah mendaftar sebagai member, dan menu profil berisi
profil Batik Nafa yaitu visi misi, bidang usaha secara umum dan
lokasi serta contact person.
b. Lembar kerja tampilan halaman Pendaftaran
c.
d.
e.
f.
g.
h.
i.
j.
k.
Gambar 4.23 LKT Halaman Pendaftaran
No. 2
Navigasi :
1. Pilih Menu
“Produk”masuk ke
hal utama
2. Pilih Menu “Pesan”
masuk ke hal pesan
3. Pilih Menu “Daftar”
masuk ke hal
pendaftaran
4. Pilih Menu
“Masuk”akan
menuju ke hal
masuk
5. Pilih Menu “Profil”
akan meuju hal
Profil
6. Pilih “browse”akan
muncul kotak
dialog untuk
mengambil file foto
7. Pilih “Daftar”akan
masuk hal Member
Keterangan
Background : putih
Daftar Member
Nama Lengkap :
Alamat :
No Telp :
Scan ktp : browse
|
|
|
|
dst
Keranjang
belanja
daftar

53
Halaman daftar mewajibkan pelanggan yang ingin menjadi member
mengisi identitas dari pelanggan tsb baik data diri untuk
menumbuhkan rasa kepercayaan satu sama lain, maupun data bank
yang akan digunakan untuk melakukan pembayaran atau transaksi
melalui e-banking. Scan ktp diisi dengan melakukan upload foto ktp
asli. Keranjang belanja digunakan untuk melihat barang apa saja
yang dibeli dengan mengklik beli pada tombol yang ada di produk.
Jika pilih menu daftar maka menu tersebut akan membesar sehingga
mudah diketahui halaman yang sedang diakses.
c. Lembar kerja tampilan halaman Login Member
d.
e.
f.
g.
h.
i.
j.
k.
l.
m.
Gambar 4.24 LKT Halaman Login Member
Halaman Masuk digunakan sebagai halaman login member, untuk
bisa masuk maka harus mengisi form email dan password yang
dimasukkan atau diisi saat mengisi form pendaftaran.
No. 3
Navigasi :
1. Mengisi form
sesuai dengan
username dan
password lalu
pilih “Masuk”
lalu akan menuju
ke hal Member.
Jika usernamel
atau password
salaha maka akan
tetap berada di
hal Login
Member.
2. Pilih “Masuk”
akan masuk hal
Member
3. Pilih “Daftar”
akan masuk ke
hal Daftar
Keterangan
Background : putih
Username :
Password :
jika Anda belum menjasi member silakkan daftar
terlebih dahulu
Keranjang
Belanja
masuk
daftar

54
d. Lembar kerja tampilan halaman Data Diri
Gambar 4.25 LKT Halaman Data Diri
e. Lembar kerja tampilan halaman Transaksi
Halaman ini berisi tampilan transaksi yang sudah dilakukan
oleh member. Walaupun sudah masuk ke halaman transaksi,
Gambar 4.26 LKT Halaman Transaksi
No. 4
Navigasi :
1. Jika pilih
“simpan” maka
data diri yang
diubah akan
2. Jika pilih
“batal” akan
membatalkan
data yang ubah
menjadi data
awal
3. Jika pilih
“logout” maka
akan masuk ke
halaman utama
dari website
Keterangan
Background : putih
Logout
Ubah Data
Diri
Transaksi
Pesanan
Data Diri
Nama :
Alamat :
No Telp:
|
|
|
dst
simpan batal
No. 5
Navigasi :
1. Jika pilih
“bayar” maka
akan masuk ke
hal login bank
2. Jika pilih
“batal” akan
membatalkan
data transaksi
3. Jika pilih
mobile atau
transfer maka
akan tetap
berada di
halaman
transaksi dan
tombol e-
banking tidak
berfungsi
Keterangan
Background : putih
Logout
Ubah Data
Diri
Transaksi
Pesanan
Transaksi
e-banking bataltransfer mobile

55
Pada halaman ini member masih bisa berbelanja kembali atau
bisa juga menghapus produk yang sudah masuk ke keranjang
belanja. Pembayaran dilakukan dengan memilih button bayar
yang sudah disesuaikan dengan data bank yang sudah diisikan
saat mendaftar. Jika maka editing kanjang belanja yang ada
akan tetap dan tidak berubah. Halaman ini akan muncul jika
menu transaksi yang ada di sebelah kiri dimana tampilan
berbeda dengan tampilan awal dimana menu terletak di
dibawah sliding gambar. Hal ini dilakukan agar bisa
membedakan halaman member dengan halaman sebelum masuk
sebagai member.
f. Lembar kerja tampilan halaman Pesanan
Gambar 4.27 LKT Halaman Pesanan
No. 6
Navigasi :
1. Jika pilih “bayar”
maka akan masuk
ke hal login bank
2. Jika status “tolak”
maka button bayar
tidak bisa
digunakan atau
tidak ada
Keterangan
Background : putih
Logout
Data Diri
Transaksi
Pesanan
Pesanan
Motif : browse
Warna : browse
status
terima
bayar

56
Halaman Pesanan digunakan untuk transaksi order dimana bisa
menginput pesanan dengan mengupload foto atau gambar motif
dan warna dengan file berformat image.
g. Lembar kerja tampilan halaman Login e-banking
Gambar 4.28 LKT Halaman Login e-banking
Halaman Login untuk masuk ke halaman transfer uang melalui e-
banking. Sebelum bisa mengakses e-banking harus mendaftar dan
registrasi terlebih dahulu. Tampilan halaman ini berbeda setiap
bank. E-banking yang digunakan sebagai contoh lkt adalah e-
banking pada bank BRI melalui alamat bri.co.id. pada halaman ini
juga bisa melakukan pilihan bahasa yaitu bahasa Indonesia dan
bahasa Inggris, sehingga bagi nasabah bank yang biasa
menggunakan bahasa Inggris merasa mudah dalam melakukan
pengaksesan e-banking begitu juga bagi nasabah yang biasa
menggunakan bahasa Indonesia.
No. 7
Navigasi :
1. Jika user, password
sesuai dengan saat
pertama registrasi
e-banking dan
validation sesuai
apa yang
ditampilkan, lalu
pilih “Enter” maka
akan masuk ke hal
utama e-banking
Keterangan
Background : putih
User :
Password :
Validation :
Indonesia English
Enter

57
h. Lembar kerja tampilan halaman Transfer
Gambar 4.29 LKT Halaman Transfer
Halaman Transfer dana berisi form yang harus diisi pemilik akun
e-banking untuk mentransfer uang ke rekening Batik Nafa.
Setelah selesai mengisi diharuskan pilih button kirim untuk
mengirim uang tsb, jika pilih hapus maka data yang sudah
diinputkan ke form akan hilang. Jika pilih batal maka akan
masuk ke halaman awal saat pertama kali sudah login e-banking.
Setelah terkirim maka status transfer akan menjadi berhasil
seperti tampak pada LKT di bawah ini.
No. 8
Navigasi :
1. Jika pilih Menu
“Mutasi
Rekening” maka
akan masuk ke hal
Transfer
2. Jika pilih “Hapus”
maka semua form
akan kosong
3. Jika pilih “Batal”
akan kembali ke
hal utama e-
banking
4. Jika pilih “kirim”
artinyabank
mengirimkan
uang tranfser
Keterangan
Background : putih
Saldo
Mutasi
Rekening
Menu
Data Transfer Dana
No Rekening :
Untuk membayar
Nama Tagihan :
Klik disini untuk menyimpan no
telpon/selular ke daftar anda
Hapus Batal Kirim

58
i. Lembar kerja tampilan halaman Konfirmasi Transfer
Gambar 4.30 LKT Halaman Konfirmasi Transfer
j. Lembar kerja tampilan halaman Login Admin
Gambar 4.31 LKT Halaman Login Admin
No. 9
Navigasi :
1. Jika transaksi
berhasil maka
status pada status
transfer adalah
“berhasil”
Keterangan
Background : putih
Menu
Statusterakhir
berhasil
P. Tagihan
Pembelian
T. Terjadwal
D. Pembayaran
No. 10
Navigasi :
1. Mengisi form sesuai
dengan data Admin
lalu pilih “Masuk”
lalu akan menuju ke
hal Admin. Jika
username atau
password salaha
maka akan tetap
berada di hal Login
Admin.
2. Untuk bisa masuk ke
hal harus
mengetahui letak
filenya karena hal ini
bersifat rahasia
hanya diketahui oleh
pihak Batik Nafa
Keterangan
Background : putih
Username :
Password :
Masuk

59
Halaman ini digunakan untuk login admin dimana halaman ini
tidak bisa diakses sembarang orang karena tidak ada link untuk
bisa menemukan halaman ini. Halaman ini hanya diakses dengan
mengetikkan nama file login admin. Hal ini dimaksudkan agar
tidak ada yang mengakses kecuali pihak Batik Nafa.
k. Lembar kerja tampilan halaman Admin
Gambar 4.32 LKT Halaman Admin
Halaman ini berisi tabel - tabel produk, transaksi, pesanan,
member, didalamnya terdapat pilihan edit, hapus , dan input
data. Edit digunakan untuk mengedit atau mengubah data
produk terutama karena beberapa data tidak bisa diedit seperti
data member yang hanya bisa diubah oleh member tsb.
No. 11
Navigasi :
1. Jika pilih “Logout”
akan masuk ke hal
utama
2. Jika plih edit maka
akan masuk ke hal
edit yang juga
masuk ke hal input
data, tetapipada
edit terdapat form
yang sudh diisi
data
3. Jika pilih “Hapus”
maka tetap berada
di hal ini tapidata
akan langsung
terhapus
Keterangan
Background : putih
Data Produk
Ket
Edit ||hapus
Input Data
Member
Produk
Pesanan
Transaksi
Pengiriman
Cek Bayar
logout

60
l. Lembar kerja tampilan halaman Input Data Produk
Gambar 4.28 LKT Halaman Input Data Produk
Pada halaman ini, edit dan tambah sebenarnya punya konsep
yang sama tetapi pada halaman edit form sudah terisi sedangkan
menu tambah form masih kosong dan proses penyimpanannya
juga berbeda, dimana menu tambah akan menuju ke simpan
tetapi edit akan masuk ke edit. Jika logout maka akan menuju
halaman utama atau halaman produk. Jika pilih batal maka akan
mereset form – form yang sudah diisi atau form – form tersebut
akan kosong.
No. 12
Navigasi :
1. Jika pilih
“Simpan” mak
data tersebut kan
tersimpan baik
karena data baru
tetapijuga data
yang baru
diinputkan
maka semua form
akan kosong
3. Tampilan pada
halaman input
sama dengan
halaman edit tetapi
form sudah diisi
data yang akan
diubah
Keterangan
Font : cambria, 12 pt pt, hitam
Background : putih
Input Data Produk
Nama Produk :
.
.
.
dst
BatalSimpan
logoutMember
Produk
Pesanan
Transaksi
Pengiriman
Cek Bayar

61
m. Lembar kerja tampilan halaman Input Data Pesanan
Gambar 4.34 LKT Halaman Input Data Pesanan
Halaman ini khusus untuk melakukan konfirmasi pesanan dari
Batik Nafa kepada member atau pelanggan. Konfirmasi
dilakukan dengan memilih terima yang berarti transaksi akan
dilanjutkan atau tolak yang berarti pesanan tidak terjadi hanya
berhenti sampai disitu saja. Setelah itu Batik Nafa akan
mengkonfirmasi pembayarannya jika konfirmasi diterima.
Konfirmasi kesanggupan dapat dilihat oleh member dengan
login member terlebih dahulu lalu masuk ke menu pesanan. Jika
pesanan diterima oleh Batik Nafa maka akan mengarah ke
pembayaran.
No. 13
Navigasi :
1. Jika pilih “Terima”
maka data status
pesanan padadata
pesanan adalah terima
2. Jika pilih “Tolak”
maka status padadata
pesanan adalah
“tolak”
Keterangan
Background : putih
Konfirmasi Pesanan
Ket
Terima || Tolak
Member
Produk
Pesanan
Transaksi
Pengiriman
Cek Bayar

62
n. Lembar kerja tampilan halaman Profil
o.
Gambar 4.35 LKT Halaman Profil
Halaman Profil hanya berisi profil perusahaan di mana terdapat
gambaran umum, bidang usaha, lokasi secara fisik baik toko –
toko Batik Nafa maupun rumah pemiliki Batik Nafa, visi, dan
misi yan ingin dicapai Batik Nafa ke depan. Halaman ini
bertujuan untuk menumbuhkan rasa percaya satu sama lain
karena alamat Batik Nafa bisa ditelusuri. Selain itu, bisa
mengetahui informasi mengenai Batik Nafa secara detail
termasuk contact person yang bisa dihubungi yaitu nomor telp,
pin BB, FB, twitter, dll.
No. 14
Navigasi :
4. Jika pilih
“Simpan” mak
data tersebut kan
tersimpan baik
karena data baru
tetapijuga data
yang baru
diinputkan
maka semua
form akan
kosong
Keterangan
Background : putih
Profil Batik Nafa Keranjang
Belanja

63
o. Lembar kerja tampilan halaman Keranjang Belanja
Gambar 4.36 LKT Halaman Keranjang Belanja
p. Lembar kerja tampilan Mobile Banking berbasis Android
Gambar 4.37 LKT Mobile Banking berbasis Android
No. 15
Navigasi :
1. Jika pilih
“bayar” maka
akan masuk ke
login member
2. Jika pilih
“batal” akan
membatalkan
data transaksi
dan
mengkosongka
n semua
keranjang
belanja
Keterangan
Background : putih
Keranjang belanja
Batal Bayar
No. 16
Navigasi :
1. Jika klik
“Login” maka
akan masuk ke
tampilan login
ke bank
Keterangan
Background : putih
Mobile Banking
LOGIN

64
q. Lembar kerja tampilan Login Mobile Banking
berbasisAndroid
Gambar 4.38 LKT Login Mobile Banking
r. Lembar kerja tampilan Menu Mobile Banking
Gambar 4.39 LKT Menu Mobile Banking
No. 17
Navigasi :
1. Jika pilih
“Ok” maka
akan masuk
ke tampilan
awal mobile
banking
2. Jika pilih
“cancel” akan
kembali ke
tampilan
awal untuk
login
Keterangan
Background : putih
LOGIN
Password
OkCancel
No. 18
Navigasi :
1. Jika pilih
“logout”
maka akan
kembali ke
login
2. Jika pilih
“fund
transfer”
akan masuk
ke halaman
transfer
Keterangan
Background : putih
favoritku
Account information
Fund transfer
purchase
payment
admin
logout

65
s. Lembar kerja tampilan Transfer Mobile Banking
Gambar 4.40 LKT Transfer Mobile Banking
t. Lembar kerja tampilan Transfer SMS Banking
Gambar 5.41 LKT Transfer SMS Banking
Gambar 4.40 LKT Transfer SMS Banking
No. 19
Navigasi :
1. Jika pilih
“send” akan
mengirim
uang ke
rekening
penerima
Keterangan
Background : putih
Pilih daftar bank :
Nama bank penerima :
No Rekening :
Send
No. 20
Navigasi :
1. Ketikkan
tulisan
dengan
format tebal
(bold) pada
handphone
sebagaisms
banking
Keterangan
Background : putih
Transfer antar rekening BRI
Ketik TRANSFER [spasi] BRI [Nomor Rekening Tujuan]
[spasi] [Nominal] [spasi] [PIN SMS BRI]
kirim ke 3300

66
3. Desain Database
a. Database
Nama database yang digunakan untuk membuat website Batik Nafa
adalah db_BatikNafa, sedangkan tabel yang digunakan adalah
sebagai berikut :
i. Tabel Member
Tabel 4.1 Member
Field Type Length
id_member int 11 (primary key,
auto increment)
nama_member varchar 30
alamat text
no_telp/hp varchar 15
jenis_kelamin varchar 15
password varchar 500 (md5)
kota varchar 30
kode_pos varchar 10
scan_gambar_ktp varchar 500
nama_bank varchar 30
kode_bank varchar 10
lokasi_bank text
no_rekening varchar 20
nama_pemilik varchar 30
ii. Tabel produk
Tabel 4.2 Produk
Field Type Length
id_produk int 11 (primary key,
auto increment)
nama_produk varchar 30

67
harga int 11
stok int 11
gambar varchar 500
warna varchar 30
ukuran varchar 5
jenis_kain varchar 20
berat int 11
kategori varchar 20
iii. Tabel transaksi _sementara
Tabel 4.3 Transaksis Sementara
Field Type Length
no_transaksi int 11 (primary key,
auto increment)
jumlah int 11
subtotal int 11
iv. Tabel transaksi_non_order
Tabel 4.4 Transaksi Non-Order
Field Type Length
no_transaksi int 11 (primary key)
tgl_transaksi date
jumlah int 11
subtotal int 11
total_bayar int 11
v. Tabel transaksi_order
Tabel 4.5 Transaksi Order
Field Type Length

68
no_order int 11 (primary key,
auto increment)
tgl_order date
jumlah int 11
total_bayar int 11
scan_gambar_order varchar 500
scan_gambar_warna varchar 500
lebar varchar 5
panjang varchar 5
jenis_kain varchar 20
status varchar 10
vi. Tabel jasa_kirim
Tabel 4.6 Jasa Pengiriman
Field Type Length
id_jasa int 11 (primary key,
auto increment)
nama_jasa varchar 30
jenis_jasa varchar 30
tujuan varchar 30
ongkos int 11
vii. Tabel admin
Tabel 4.7 Admin
Field Type Length
id_admin int 11 (primary key)
nama_admin varchar 30
password varchar 500 (md5)

69
4. Jaring Semantik
Gambar 4.42 Jaring Semantik LKT
Keterangan gambar jaring semantik LKT :
1 = tampilan halaman awal
2 = tampilan halaman daftar member
3 = tampilan halaman login member
4 = tampilan halaman data diri
5 = tampilan halaman transaksi
6 = tampilan halaman pesanan
7 = tampilan halaman login ke bank
8 = tampilan halaman transfer dana
9 = tampilan halaman konfirmasi transfer
10 = tampilan halaman login admin
11 = tampilan halaman data produk
12 = tampilan halaman input data produk

70
13 = tampilan halaman konfirmasi pesanan
14 = tampilan halaman profil
15 = tampilan halaman keranjang belanja
16 = tampilan mobile banking berbasis android
17 = tampilan login mobile banking
18 = tampilan menu mobile banking
19 = tampilan transfer mobile banking
20 = tampilan SMS banking

Bab iv

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (20)

Similar to Bab iv

Similar to Bab iv (20)

Bab iv