Downloaded 86 times
![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
Font : cambria, 12 pt, hitam
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
Font : cambria, 12 pt, hitam
Background : putih
Transfer antar rekening BRI
Ketik TRANSFER [spasi] BRI [Nomor Rekening Tujuan]
[spasi] [Nominal] [spasi] [PIN SMS BRI]
kirim ke 3300](https://image.slidesharecdn.com/babiv-150515020000-lva1-app6892/85/Bab-iv-27-320.jpg)
More Related Content
![CV1[3]](https://cdn.slidesharecdn.com/ss_thumbnails/a8c3be6f-1e2a-43f5-80cd-59a399c31fc2-150513163811-lva1-app6891-thumbnail.jpg?width=640&height=640&fit=bounds)
![Pemesanan_kue_berbasis_web[1].pptx](https://cdn.slidesharecdn.com/ss_thumbnails/pemesanankueberbasisweb1-230729013609-09c99e48-thumbnail.jpg?width=640&height=640&fit=bounds)
Bab iv
- 1. 39 BAB IV PEMBAHASAN A. Perancangan Denganadanya 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)
- 2. 40 1) Diagram UseCase 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>>
- 3. 41 iii. Diagram UseCase 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
- 4. 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
- 5. 43 ii. Diagram ActivityTransaksi 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
- 6. 44 iv. Diagram ActivityLogin 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
- 7. 45 vi. Diagram ActivityPembayaran 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 AdminSistemPelanggan 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
- 8. 46 viii. Diagram ActivityPembayaran 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 AdminSistemPelanggan
- 9. 47 3) Diagram Class Gambar4.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.
- 10. 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
- 11. 49 iv. Diagram StateTransaski 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
- 12. 50 ii. Diagram SequenceTransaksi 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 jika pass & email benar jika pass & email salah input jasa pengiriman Memilih Pembayaran
- 13. 51 iv. Diagram SequenceTransaksi 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 jika pass & email benar jika pass & email salah pilih button konfirmasi pilih cek pembayaran jika tidak dan logout displaydata jasa pengiriman
- 14. 52 Halaman utama merupakanhalaman 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 Font : cambria, 12 pt, hitam Background : putih Daftar Member Nama Lengkap : Alamat : No Telp : Scan ktp : browse | | | | dst Keranjang belanja daftar Produk Pesan Daftar Masuk Profil
- 15. 53 Halaman daftar mewajibkanpelanggan 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 Font : cambria, 12 pt, hitam Background : putih Username : Password : jika Anda belum menjasi member silakkan daftar terlebih dahulu Keranjang Belanja masuk daftar Produk Pesan Daftar Masuk Profil
- 16. 54 d. Lembar kerjatampilan 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 Font : cambria, 12 pt, hitam 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 Font : cambria, 12 pt, hitam Background : putih Logout Ubah Data Diri Transaksi Pesanan Transaksi e-banking bataltransfer mobile
- 17. 55 Pada halaman inimember 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 Font : cambria, 12 pt, hitam Background : putih Logout Data Diri Transaksi Pesanan Pesanan Motif : browse Warna : browse status terima bayar
- 18. 56 Halaman Pesanan digunakanuntuk 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 Font : cambria, 12 pt, hitam Background : putih User : Password : Validation : Indonesia English Enter
- 19. 57 h. Lembar kerjatampilan 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 Font : cambria, 12 pt, hitam 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
- 20. 58 i. Lembar kerjatampilan 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 Font : cambria, 12 pt, hitam 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 Font : cambria, 12 pt, hitam Background : putih Username : Password : Masuk
- 21. 59 Halaman ini digunakanuntuk 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 Font : cambria, 12 pt, hitam Background : putih Data Produk Ket Edit ||hapus Input Data Member Produk Pesanan Transaksi Pengiriman Cek Bayar logout
- 22. 60 l. Lembar kerjatampilan 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 2. Jika pilih “Batal” 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
- 23. 61 m. Lembar kerjatampilan 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 Font : cambria, 12 pt, hitam Background : putih Konfirmasi Pesanan Ket Terima || Tolak Member Produk Pesanan Transaksi Pengiriman Cek Bayar
- 24. 62 n. Lembar kerjatampilan 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 5. Jika pilih “Batal” maka semua form akan kosong Keterangan Font : cambria, 12 pt, hitam Background : putih Profil Batik Nafa Keranjang Belanja Produk Pesan Daftar Masuk Profil
- 25. 63 o. Lembar kerjatampilan 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 Font : cambria, 12 pt, hitam Background : putih Keranjang belanja Batal Bayar Produk Pesan Daftar Masuk Profil No. 16 Navigasi : 1. Jika klik “Login” maka akan masuk ke tampilan login ke bank Keterangan Font : cambria, 12 pt, hitam Background : putih Mobile Banking LOGIN
- 26. 64 q. Lembar kerjatampilan 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 Font : cambria, 12 pt, hitam 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 Font : cambria, 12 pt, hitam Background : putih favoritku Account information Fund transfer purchase payment admin logout
- 27. 65 s. Lembar kerjatampilan 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 Font : cambria, 12 pt, hitam 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 Font : cambria, 12 pt, hitam Background : putih Transfer antar rekening BRI Ketik TRANSFER [spasi] BRI [Nomor Rekening Tujuan] [spasi] [Nominal] [spasi] [PIN SMS BRI] kirim ke 3300
- 28. 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
- 29. 67 harga int 11 stokint 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
- 30. 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)
- 31. 69 4. Jaring Semantik Gambar4.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
- 32. 70 13 = tampilanhalaman 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
- 33.