BAB III PEMBAHASAN 3.1. A. · C. Analisa Kebutuhan Perangkat Keras ( Hardware) Perangkat keras yang...
Transcript of BAB III PEMBAHASAN 3.1. A. · C. Analisa Kebutuhan Perangkat Keras ( Hardware) Perangkat keras yang...
BAB III
PEMBAHASAN
3.1. Analisa kebutuhan
Pada tahap analisa kebutuhan, penulis mencoba menganalisa empat kebutuhan
yaitu kebutuhan pengguna, kebutuhan sistem, kebutuhan perangkat keras (Hardware )
dan kebutuhan perangkat lunak ( Software).
A. Analisa Kebutuhan Pengguna
1. Admin
Admin memiliki hak akses untuk mengelola data, menambah, mengubah,
menghapus dan memperbaharui data kategori, produk, dan user.
2. User
User dapat melihat halaman beranda, kontak, kategori, testimonial dan cara
pesan pada web tersebut tanpa melakukan login. Selain itu user dapat
melakukan pemesanan produk dan transaksi setelah melakukan login.
3. Visitor
Visitor dapat melihat halaman beranda, kontak, kategori, testimonial dan cara
pesan tanpa melakukan registrasi terlebih dahulu. Visitor juga dapat
melakukan registrasi user pada website.
B. Analisa Kebutuhan Sistem
a. Sistem memiliki menu beranda, kategori, kontak, cara pesan, testimonial
daftar User, Login user, Login admin dan laporan transaksi penjualan.
20
21
1. Sistem menyediakan form pendaftaran, form login, form pemesanan, form
konfirmasi pembayaran, detail informasi dan cara pemesanan produk
2. Sistem menyediakan form produk, form kategori, form pelanggan dan form
user serta laporan transaksi Tas.
C. Analisa Kebutuhan Perangkat Keras ( Hardware)
Perangkat keras yang dibutuhkan dalam pembuatan website E-Commerce
adalah Laptop/PC, Printer dan koneksi internet.
D. Analisa Kebutuhan Perangkat Lunak ( Software)
Perangkat lunak yang dibutuhkan dalam pembuatan website E-Commerce adalah
Sistem Operasi ( Windosws 8), Web Server (Apache), Editor Web (Adobe
Dreamweaver CC 2015), Pengolahan Database (MySql), Web Browser (Mozila Firefox
dan Google Chrome) .
22
3.2. Rancangan Antar Muka
1. Rancangan Antar Muka Halaman Beranda
Login Daftar Baru
Nama Toko
Beranda Kategori Kontak Cara Pesan Testimonial
< SLIDE GAMBAR >
PRODUK TER - PRODUK TER - PRODUK TER - PRODUK TER - UPDATE UPDATE UPDATE UPDATE
PRODUK TER - PRODUK TER - PRODUK TER - PRODUK TER -
UPDATE UPDATE UPDATE UPDATE
FOOTER
Gambar III.1. Rancangan Antar Muka Halaman Beranda
2. Rancangan Antar Muka Halaman Kategori Tas Sekolah Anak
Login Daftar Baru
Nama Toko Beranda Kategori Kontak Cara Pesan Testimonial
Tas Sekolah Anak
BackPack
HandBag
< Tas Laptop SLIDE GAMBAR >
Semua Kategori
Stok Stok Stok Stok
Gambar Produk
Gambar Produk
Gambar Produk
Gambar Produk
Nama Produk Nama Produk Nama Produk Nama Produk
Harga Harga Harga Harga
Beli Beli Beli Beli
FOOTER
Gambar III.2. Rancangan Antar Muka Halaman Kategori Tas Sekolah
23
3. Rancangan Antar Muka Halaman Detail Tas Sekolah
Login Daftar Baru
Nama Toko
Beranda Kategori Kontak Cara Pesan Testimonial
>
< SLIDE GAMBAR
Nama Produk
Harga
Deskripsi
GAMBAR PRODUK
Berat
Stok
Beli
FOOTER
Gambar III.3. Rancangan Antar Muka Halaman Detail Tas Sekolah
4. Rancangan Antar Muka Halaman Kontak
Login Daftar Baru
Nama Toko Beranda Kategori Kontak Cara Pesan Testimonial
>
< SLIDE GAMBAR
Kontak
Address Phone Email
FOOTER
24
Gambar III.4. Rancangan Antar Muka Halaman Kontak
5. Rancangan Antar Muka Halaman Cara Pesan
Login Daftar Baru
Nama Toko
Beranda Kategori Kontak Cara Pesan Testimonial
>
< SLIDE GAMBAR
Cara Order
FOOTER
Gambar III.5. Rancangan Antar Muka Halaman Cara Pesan
6. Rancangan Antar Muka Halaman Testimonial
Login Daftar Baru
Nama Toko
Beranda Kategori Kontak Cara Pesan Testimonial
>
< SLIDE GAMBAR
Testimonial
Page
FOOTER
25
Gambar III.6. Rancangan Antar Muka Halaman Testimoni
7. Rancangan Antar Muka Halaman Daftar Register User
Login Daftar Baru
Nama Toko
Beranda Kategori Kontak Cara Pesan Testimonial
>
< SLIDE GAMBAR
DAFTAR BARU
Nama Lengkap
HP
Password
Re Password
Daftar
FOOTER
Gambar III.7. Rancangan Antar Muka Halaman Daftar Register User
8. Rancangan Antar Muka Halaman Login User
Login Daftar Baru
Nama Toko
Beranda Kategori Kontak Cara Pesan Testimonial
>
< SLIDE GAMBAR
Login
Kata Sandi
Login
FOOTER
26
Gambar III.8. Rancangan Antar Muka Halaman Login User
9. Rancangan Antar Muka Halaman Beranda User
Keluar Akun Keranjang Belanja Daftar Pesanan Nama Akun
Nama Toko
Beranda Kategori Kontak Cara Pesan Testimonial
<
SLIDE GAMBAR
>
Produk Terbaru Produk Terbaru Produk Terbaru Produk Terbaru
Produk Terbaru Produk Terbaru Produk Terbaru Produk Terbaru
FOOTER
Gambar III.9. Rancangan Antar Muka Halaman Beranda User
27
10. Rancangan Antar Muka Halaman Ubah Akun
Keluar Akun Keranjang Belanja Daftar Pesanan Nama Akun
Nama Toko
Beranda Kategori Kontak Cara Pesan Testimonial
> < SLIDE GAMBAR
Ubah Akun
Kode Pelanggan
Nama Lengkap
Alamat
RT/RW
Kelurahan
Kecamatan
Kabupaten
Propinsi
Kode Pos
Nomor Telepon *Tidak wajib untuk diisi
Nomor HP
Password
Konfirmasi Password
Perbaharui
FOOTER
Gambar III.10. Rancangan Antar Muka Halaman Ubah Akun
28
11. Rancangan Antar Muka Halaman Keranjang Belanja dan Data Pengiriman
Keluar Akun Keranjang Belanja Daftar Pesanan NAMA AKUN
Nama Toko
Beranda Kategori Kontak Cara Pesan Testimonial
SLIDE GAMBAR
Keranjang Belanja No. Gambar Barang Nama Barang Berat Jumlah Harga Subtotal
1
XXXXXX
XXX [X]
XXX XXXX
Total Harga 999
Berat Bersih 1000
Berat Per/ KG 1
Jumlah Item 1
Data Pengiriman
Alamat :
Area Pengiriman
---Pilih Area Pengiriman---
Pesan
FOOTER
Gambar III.11. Rancangan Antar Muka Halaman Keranjang Belanja dan Data
Pengiriman
12. Rancangan Antar Muka Daftar Pesanan
Keluar Akun Keranjang Belanja Daftar Pesanan NAMA AKUN
Nama Toko
Beranda Kategori Kontak Cara Pesan Testimonial
SLIDE GAMBAR
Daftar Pesan
No. Transaksi Tanggal Pesan Total Status Aksi
XXXXXXXXXXX
XXXXXX
Rp.XXXXX
Konfirmasi
[ Lihat ] I [ CETAK ]
FOOTER
Gambar III.12. Rancangan Antar Muka Halaman Daftar Pesanan
29
13. Rancangan Antar Muka Halaman Konfirmasi Pembayaram
Keluar Akun Keranjang Belanja Daftar Pesanan NAMA AKUN
Nama Toko Beranda Kategori Kontak Cara Pesan Testimonial
SLIDE GAMBAR
Form Konfirmasi Pembayaran No. Formulir
Nama
No. Rekening
Atas Nama No. Rek
Nama Bank
Tanggal Pembayaran
Jumlah Transfer
Batal Simpan
FOOTER
Gambar III.13. Rancangan Antar Muka Halaman Konfirmasi Pembayaran
14. Rancangan Antar Muka Halaman Login Admin
Administrator
Untuk masuk Gunakan Nama Pengguna dan Kata Sandi
Nama Pengguna
Kata Sandi
Gambar III.14. Rancangan Antar Muka Halaman Login Admin
30
15. Rancangan Antar Muka Halaman Beranda Admin
Nama Toko Ganti Tampilan Nama Akun
Main Selamat Datang
Beranda Nama Admin
User
Pelanggan
Kategori
Ongkos Kirim
Produk
Stok
Testimonial
Pesan
Laporan
Gambar III.15. Rancangan Antar Muka Halaman Beranda Admin
16. Rancangan Antar Muka Halaman Tambah User
Nama Toko Ganti Tampilan Nama Akun
Main
Beranda Data User
User Tambah
Pelanggan No Kode Admin Nama
Email Hp
Aksi
Kategori
Ongkos Kirim
Produk 1
XXXX XXXX
XXXX@XXX 889999
Hapus
Stok
Ubah
Testimonial
Pesan
Laporan
Gambar III.16. Rancangan Antar Muka Halaman Tambah User
17. Rancangan Antar Muka Halaman Data Pelanggan
Nama Toko Ganti Tampilan Nama Akun
Main
Beranda Data Pelanggan
User
Pelanggan Cari
Kategori
Ongkos Kirim
Produk No ID Pelanggan Nama Email Hp Aksi
Stok
Testimonial
Pesan 1 XX XXXXXX XXXXXX Ubah Hapus
Laporan
Gambar III.17. Rancangan Antar Muka Halaman Data Pelanggan
31
18. Rancangan Antar Muka Halaman Data Kategori
Nama Toko Ganti Tampilan Nama Akun
Main
Beranda Data Kategori
User
Pelanggan Tambah
Kategori No Nama Kategori
Aksi
Ongkos Kirim
Produk
Stok 1 XX
Ubah Hapus
Testimonial
Pesan
Laporan
Gambar III.18. Rancangan Antar Muka Halaman Data Kategori
19. Rancangan Antar Muka Halaman Data Ongkos Kirim Nama Toko
Ganti Tampilan Nama Akun
Main
Beranda Data Ongkir
User
Pelanggan Tambah
Kategori No Kota Kurir Layanan Estimasi Harga Aksi
Ongkos Kirim
Produk
Stok 1 XXX XX XX XX XXX Ubah Hapus
Testimonial
Pesan
Laporan
Gambar III.19. Rancangan Antar Muka Halaman Data Ongkos Kirim
20. Rancangan Antar Muka Halaman Data Produk
Nama Toko Ganti Tampilan Nama Akun
Main
Beranda Data Produk
User
Pelanggan Tambah
Kategori Barcode Kategori Nama Harga Stok
Ongkos Kirim
No
Produk
Stok 1 XXXXX XX XXX XXXXXX XX Ubah Hapus
Testimonial
Pesan
Laporan
Gambar III.20. Rancangan Antar Muka Halaman Data Produk
32
21. Rancangan Antar Muka Halaman Data Stok
Nama Toko Ganti Tampilan Nama Akun
Main
Beranda Input Barang Masuk
User
Pelanggan
Kategori No Kode Kategori Nama Tanggal
Stok Perbaharui
Aksi
Ongkos Kirim
Produk Stok X XXXXX XX XXX XXXXXX XX Kurang Stok Edit Stok
Testimonial
Pesan
Laporan
Gambar III.21. Rancangan Antar Muka Halaman Data Stok
22. Rancangan Antar Muka Halaman Testimonial
Nama Toko
Main Beranda User Pelanggan Kategori Ongkos Kirim Produk Stok Testimonial Pesan Laporan
Ganti Tampilan Nama Akun
Data Pelanggan
No Tangga ID Nama Email Status Admin Aksi
X XXXXX XX XXX XXXXXX
XX XXX
Edit Hapus
Gambar III.22. Rancangan Antar Muka Halaman Testimonial
33
23. Rancangan Antar Muka Halaman Laporan Produk
HEADER
Laporan Data Produk
No Kode Kategori Nama Produk Harga Stok
9 XXXX XXXXX XXXXXXXX Rp.9999 9
Gambar III.23. Rancangan Antar Muka Halaman Laporan Stok
24. Rancangan Antar Muka Halaman Laporan Data Pelanggan
HEADER
Laporan Data Pelanggan
No Nama Alamat Hp
9 XXXX XXXXXXXX XXXXX
Gambar III.24. Rancangan Antar Muka Halaman Laporan Data Pelanggan
34
25. Rancangan Antar Muka Halaman Laporan Transaksi
HEADER
Laporan Data Transaksi
No No Transaksi Tanggal Pesan ID Admin Email Pelanggan Total
9 XXXX XXXXXXXX XXXXX XXXXXXX XXXXX
Gambar III.25. Rancangan Antar Muka Halaman Laporan Transaksi
35
3.3. Entity Relationship Diagram
Berikut ini struktur Entity Relationship Diagram dan Logical Record Structure
pada website ini:
A. Entity Relationship Diagram ( ERD)
Berikut ini adalah struktur Entity Relationship Diagram (ERD) pada website ini:
emailpelanggan
pswd pelanggan nm_pelanggan
hp_pelanggan tlp_pelanggan
kd_pelanggan
rt/rw almt
alamat_almt pelanggan kel_almt
kdpos_almt kec_almt
kota ongkir pro_almt kab_almt
lay_ongkir
id_ongkir ket pesan harga ongkir melakukan no transaksi
kurir_ongkir est ongkir
tglpesan
ongkir memilh pesan diproses
jam pesan tgl kirim jml_tf id konfir
id_pelanggan harga_kg nama_bank
id_admin alamt kirim
tot_harga an norek konfirmasi
status mempunyai no rek
tgl byr
bratkg ongkir id produk
id_ongkir no resi pesan_isi mempunyai produk
gamb ar
jumlah
no transaksi stok
harga
harga id_produk
notransksi
id_admin
stts_byar
berat
pswd adm
nama_adm
id_adm email_adm
hp_adm
admin foto_adm
id_kategori
nama_kategori
kategori
kd produk
id_kategori
mempunyai
nama_produk
deskripsi
Gambar III.26. Entity Relationship Diagram
36
B. Logical Record Structure (LRS)
Berikut ini adalah struktur Logical Record Structure (LRS) pada website ini :
1
admin
kd_admin
nama_admin
pswd_admin
email_admin
hp_admin
foto_admin M pesan_isi no transaksi
id_produk
1 pesan M hrg_jual notransaksi jumlah
tanggal_pesan
subtotal
1 jam_pesan
kd_pelanggan 1 kd_admin
ket_pesan kategori
pelanggan 1 status 1 kd_kategori kd_pelanggan kd_kota nama_kategori
nama_pelanggan
alamat_kirim 1
email_pelanggan id_ongkir produk 1
tlp_pelanggan
ongkir
id_produk
hp_pelanggan harga_kg 1 ongkir kd_produk 1
pswd_pelanggan
berat_kg
id_ongkir
id_kategori
alamat_alamat total_harga kota_ongkir nama_produk
rt/rw_alamat
no_resi
kurir_ongkir
deskripsi
kel_alamat
tanggal_kirim
layanan_ongkir
berat
kec_alamat estimasi_ongkir harga
kab_alamat
harga_ongkir
stok
pro_alamat
gambar
kdpos_alamat
konfirmasi
id_konfirmasi
1 status_byr
notransaksi 1
kd_admin
tgl_bayar
no_rek
an_norek
nama_bank
jmlh_tf
Gambar III.27. Logical Record Structure
37
3.4. Spesifikasi File
Dalam pembuatan website ini menggunakan satu database yaitu dbsiti.sql
dengan 10 tabel dengan`1 tabel temporary yaitu tabel Transaksi Rinci.
1. Spesifikasi File Admin
Nama File : Tabel Admin
Akronim : admin
Fungsi : Untuk menyimpan data Admin
Tipe File : File Master
Organisasi File : Index Sequential
Akses File : Random
Media : Hard Disk
Panjang Record : 137 Byte
Kunci Field : id_admin
Software : MySQL
Tabel III.1.Spesifikasi File Admin
No Elemen Data Akronim Tipe Panjang Keterangan
1. Kode Admin kd_admin Varchar 6 Primary Key
2. Nama nama_admin Varchar 30
3. Password pswd_admin Varchar 8
4. Email email_admin Varchar 30
5. No HP hp_admin Varchar 13
6. Foto foto_admin Varchar 50
38
2. Spesifikasi File Kategori
Nama File : Tabel Kategori
Akronim : kategori
Fungsi
: Untuk menyimpan data Kategori
Tipe File
Organisasi File
Akses File
Media
Panjang Record
: File Master
: Index Sequential
: Random
: Hard Disk
: 20 Byte
Kunci Field
Software
: id_kategori
: MySQL
Tabel III.2. Spesifikasi File Kategori
No Elemen Data Akronim Tipe Panjang Keterangan
1. Identitas Kategori id_kategori Int 5 Primary Key
2. Nama nama_kategori Varchar 15
3. Spesifikasi File Produk
Nama File : Tabel Produk
Akronim : produk
Fungsi : Untuk menyimpan data Produk
Tipe File : File Master
Organisasi File : Index Sequential
Akses File : Random
39
Media : Hard Disk
Panjang Record : 141 Byte
Kunci Field : id_produk
Software : MySQL
Tabel III.3.Spesifikasi File Produk
No Elemen Data Akronim Tipe Panjang Keterangan
1. Identitas produk id_produk Int 5 Primary Key
2. Barcode produk barcode_produk Varchar 16
3. Identitas Kategori id_kategori Int 5
4. Tanggal Stok tgl_stok Datetime
5. Nama nama_produk Varchar 40
6. Deskripsi deskripsi Text
7. Berat berat Int 6
8. Harga harga Int 11
9. Jumlah masuk Jml_masuk Int 3
10. Stok stok Int 5
11. Gambar gambar Varchar 50
4. Spesifikasi File Pelanggan
Nama File : Tabel Pelanggan
Akronim : pelanggan
Fungsi : Untuk menyimpan data Pelanggan
Tipe File : File Master
Organisasi File : Index Sequential
40
Akses File : Random
Media : Hard Disk
Panjang Record : 271 Byte
Kunci Field : id_pelanggan
Software : MySQL
Tabel III.4. Spesifikasi File Pelanggan
No Elemen Data Akronim Tipe Panjang Keterangan
1. Kode Pelanggan kd_pelanggan Varchar 11 Primary Key
2. Nama nama_pelanggan Varchar 30
3. Email email_pelanggan Varchar 30
4. Telepon tlp_pelanggan Varchar 13
5. No HP hp_pelanggan Varchar 13
6. Password pswd_pelanggan Varchar 12
7. Alamat alamat_almt Varchar 50
8. RT/RW rtrw_almt Varchar 5
9. Kelurahan kel_almt Varchar 25
10. Kecamatan kec_almt Varchar 25
11. Kabupaten kab_almt Varchar 25
12. Provinsi pro_almt Varchar 25
13. Kode POS kdpos_almt Varchar 7
41
5. Spesifikasi File Pesan
Nama File : Tabel pesan
Akronim : pesan
Fungsi : Untuk menyimpan data pesanan
Tipe File : File transaksi
Organisasi File : Index Sequential
Akses File : Random
Media : Hard Disk
Panjang Record : 279 Byte
Kunci Field : notransaksi
Software : MySQL
Tabel III.5.Spesifikasi File Pesan
No Elemen Data Akronim Tipe Panjang Keterangan
1. Nomor Transaksi notransaksi Varchar 12 Primary Key
2. Status status Varchar 11
3. Keterangan Pesan ket_pesan text
4. Kode Pelanggan kd_pelanggan Varchar 11
5. Kode admin kd_admin Varchar 10
6. Total total_harga Double
7. Jam pesan jam_pesan Time
8. Tanggal tanggal_pesan Date
42
9. ID ongkir id_ongkir Int 5
10. Berat beratkg Int 5
11. Ongkos kirim Ongkoskirim Float
12. Harga hargakg Float
13. Alamat Alamat_kirim Varchar 200
14. No resi noresi Varchar 25
15. Tanggal kirim Tanggal_kirim date
6. Spesifikasi File Pesan Isi
Nama File : Tabel pesan isi
Akronim : pesan_isi
Fungsi : Untuk menyimpan isi pesanan
Tipe File : File transaksi
Organisasi File : Index Sequential
Akses File : Random
Media : Hard Disk
Panjang Record : 31 Byte
Kunci Field : notransaksi
Software : MySQL
43
Tabel III.6. Spesifikasi File Pesan Isi
No Elemen Data Akronim Tipe Panjang Keterangan
1. Nomor transaksi Notransaksi Varchar 12
2. Identitas Produk id_produk int 5 Foreign Key
3. Harga hrg_jual int 11
4. Jumlah Jumlah int 3
7. Spesifikasi File Transaksi Rinci
Nama File : Tabel Transaksi Rinci
Akronim : transaksirinci
Fungsi : Untuk menyimpan rincian transaksi
Tipe File : File transaksi
Organisasi File : Index Sequential
Akses File : Random
Media : Hard Disk
Panjang Record : 104 Byte
Kunci Field : notransaksi
Software : MySQL
Tabel III.7.Spesifikasi File Transaksi Rinci
No Elemen Data Akronim Tipe Panjang Keterangan
1. No Transaksi notransaksi Int 12
2. Kode Pelanggan kd_pelanggan Varchar 11
3. Identitas Produk id_produk Int 5
44
4. Nama nama_produk varchar 50
5. Harga Harga Int 11
6. Jumlah Jumlah Int 4
7. Sub Total Subtotal Int 11
8. Spesifikasi File Konfirmasi
Nama File : Tabel konfirmasi
Akronim : konfirmasi
Fungsi : Untuk menyimpan data konfirmasi Pembayaran
Tipe File : File Transaksi
Organisasi File : Index Sequential
Akses File : Random
Media : Hard Disk
Panjang Record : 131 Byte
Kunci Field : id_konfirm
Software : MySQL
Tabel III.8. Spesifikasi File Konfirmasi
No Elemen Data Akronim Tipe Panjang Keterangan
1. Id konfirmasi id_konfirm Int 5 Primary Key
2. Status status_byr varchar 10
45
3. No Transaksi notransaksi varchar 12
4. Id Admin id_admin varchar 8
5. Tanggal tgl_bayar date
6. No Rekening no_rek varchar 20
7. Atas Nama an_norek varchar 50
8. Nama Bank nama_bank char 15
9. Jumlah jml_tf int 11
9. Spesifikasi File Testimoni
Nama File : Tabel testimonial
Akronim : testimonial
Fungsi : Untuk menyimpan data testimonial
Tipe File : File Master
Organisasi File : Index Sequential
Akses File : Random
Media : Hard Disk
Panjang Record : 35 Byte
Kunci Field : id_testi
Software : MySQL
46
Tabel III.9. Spesifikasi File Komentar
No Elemen Data Akronim Tipe Panjang Keterangan
1. Identitas testimonial id_testi Int 5 Primary Key
2. Kode pelanggan kd_pelanggan Varchar 11
3. Kode Admin kd_admin Varchar 10
4. Status testimoni Status_testi Varchar 9
5. Tanggal tanggal Date
6. testimonial testimonial Text
10. Spesifikasi File Ongkir
Nama File : Tabel Ongkir
Akronim : ongkir
Fungsi : Untuk menyimpan data ongkir
Tipe File : File Master
Organisasi File : Index Sequential
Akses File : Random
Media : Hard Disk
Panjang Record : 110 Byte
Kunci Field : id_ongkir
Software : MySQL
47
Tabel III.10. Spesifikasi File Ongkir
No Elemen Data Akronim Tipe Panjang Keterangan
1 Identitas Ongkir id_ongkir Int 5 Primary Key
2 Kota kota_ongkir Varchar 50
3 Kurir kurir_ongkir Varchar 15
4 Layanan layanan_ongkir Varchar 15
5 Estimasi estimasi_ongkir Varchar 15
6 Harga harga_ongkir int 10
48
3.5. Pengkodean
Pengkodean pada website ini meliputi pengkodean Kode Produk dan Kode
Transaksi yang masing-masing mempunyai arti sebagai berikut:
A. Kode Produk
Berikut ini adalah Kode Produk pada Website Toko Tas:
T HB 0 0 1
Jenis Kategori No. Urut
Gambar III.28. Kode Produk
Keterangan:
T = Jenis Produk
B= Kategori
B. Kode Transaksi
Berikut ini adalah Kode Transaksi pada Website Toko Tas:
T 9999 99 9 1
Transaksi Tahun Bulan Tanggal No.Urut
Gambar III.29. Kode Transaksi
Keterangan:
T = Transaksi 9999 = Tahun 99= Bulan 9= Tanggal 1= Nomor Urut
49
3.6. Spesifikasi Program
Spesifikasi program meliputi struktur navigasi. Digunakan untuk mempermudah
pengunjung ataupun user dalam hal perpindahan halaman web. Terdapat tiga bagian
struktur navigasi yaitu pada halaman pengunjung, user dan admin.
A. Struktur Navigasi Index
Berikut adalah struktur navigasi untuk pengunjung pada program Toko Tas .
Gambar III.30. Struktur Navigasi Index
B. Struktur Navigasi User
Berikut adalah struktur navigasi untuk User pada program Toko Tas
Gambar III.31. Struktur Navigasi User
50
C. Struktur Navigasi Admin
Berikut adalah struktur navigasi untuk Admin pada program Toko Tas
Gambar III.32. Struktur Navigasi Admin
3.7. Spesifikasi Sistem Komputer
Berikut ini adalah spesifikasi perangkat keras dan perangkat lunak minimum
yang dibutuhkan untuk mengimplementasikan aplikasi website untuk pemesanan Tas
dan Dompet.
A. Spesifikasi Komputer Client
Untuk menjalankan website ini sebagai client membutuhkan komputer dengan
spesifikasi minimum baik hardware maupun software sebagai berikut:
1. Spesifikasi Hardware
a. Processor 2,0 Ghz
b. Memori dengan RAM 2 GB
c. Hard disk 500 GB
d. VGA on Board
e. Monitor super VGA (1024x768) dengan minimum 256 warna
51
f. Keyboard dan Mouse
g. Koneksi internet 1 Mbps
2. Spesifikasi Software
a. Operating System : Windows 8 32 bit
b. Web Browser : Mozilla Firefox versi 12.0, Google Chrome
52
3.8. Implementasi
Berikut ini merupakan implementasi dari website Toko Tas yang akan dijelaskan
sebagai berikut:
1. Tampilan Beranda Visitor
Gambar III 33. Halaman Beranda Visitor
Gambar III.33. Merupakan implementasi dari halaman beranda pengunjung web ini.
Terdapat menu Beranda untuk kembali ke Beranda, Kategori, Kontak, Cara Pesan,
Testimonial dan Akun member yang terdiri dari Login dan Daftar Akun.
53
2. Tampilan Kategori
Gambar III 34. Halaman Kategori
Gambar III.34. Merupakan implementasi dari halaman kategori. Kategori yang
terdiri dari Tas Sekolah Anak, BackPack, HandBag, Tas Laptop dan Semua kategori
3. Tampilan Kontak
Gambar III 35. Halaman Kontak
54
Gambar III.35. Merupakan implementasi dari halaman kontak. Kontak yang terdiri dari
Address, Phone, Email.
4. Tampilan Cara Pesan
Gambar III 36. Halaman Cara Pesan
Gambar III.36. Merupakan implementasi dari halaman cara pesan. Berisi tentang
cara cara pemesanan barang di dalam Toko.
5. Tampilan Testimonial
Gambar III 37. Halaman Testimonial
55
Gambar III.37. Merupakan implementasi dari halaman testimonial. Terdapat testimoni
dari customer.
6. Tampilan Login User
Gambar III 38. Halaman Login User
Gambar III.38. Merupakan implementasi dari halaman login yang dapat dilihat dengan
menekan tombol login yang tersedia. Login dapat dilakukan dengan mengisi email dan
password yang telah terdaftar kemudian pilih tombol login.
7. Tampilan Daftar User
Gambar III 39. Halaman Daftar User
56
Gambar III.39. Merupakan implementasi dari halaman Registrasi yang dapat dilihat pada
Akun saya sebelah tombol login. Untuk melakukan Daftar user, maka harus mengisi
data seperti nama, nomor hp, email, alamat dan password.
8. Tampilan Beranda User
Gambar III 40. Halaman Beranda User
Gambar III.40. Merupakan implementasi dari halaman Beranda user yang dapat dilihat
setelah berhasil melakukan login user. Dalam beranda user, terdapat menu keluar, akun,
keranjang belanja, daftar pesanan dan nama akun.
57
9. Tampilan Ubah Akun
Gambar III 41.Halaman Ubah Akun
Gambar III.41. merupakan implementasi dari halaman ubah akun yang dapat dilihat
pada dropdown nama akun saya. Ubah akun dilengkapi dengan data yang ingin diubah
dengan tombol perbarui dibawahnya.
10. Tampilan Keranjang Belanja
Gambar III 42.Halaman Keranjang Belanja
58
Gambar III.42. Merupakan implementasi dari halaman keranjang belanja yang bisa
dilihat pada menu keranjang belanja yang telah tersedia. Terdapat rincian produk yang
dipesan.
11. Tampilan Form Pemesanan dan Pengiriman
Gambar III 43.Halaman Pemesanan dan Pengiriman
Gambar III.39. merupakan implementasi dari halaman form pemesanan dan pengiriman
yang dapat dilihat setelah menekan tombol berikut pada halaman keranjang. Terdapat
form data pengiriman yang harus diisi dengan lengkap dan jelas. Untuk menyelesaikan
pemesanan dapat menekan tombol pesan.
59
12. Tampilan Konfirmasi Pembayaran
Gambar III 44.Halaman Konfirmasi Pembayaran
Gambar III.44. Merupakan halaman Konfirmasi Pembayaran yang bisa dilihat setelah
melengkapi data pengiriman yang berisi tentang rincian nama bank, nomor rekening dan
juga jumlah transfer dengan tombol simpan untuk melanjutkan proses selanjutnya.
13. Tampilan Form daftar Pesanan
Gambar III 45.Halaman Daftar Pesanan
60
Gambar III.45. merupakan implementasi dari halaman form rincian daftar pesanan yang
dapat dilihat setelah menekan tombol pesan pada form pemesanan/pengiriman. Halaman
ini menampilkan detail pesanan yang sudah dipesan. Terdapat rincian yang telah dipesan
dengan status dan juga aksi lihat dan juga bisa cetak untuk menyimpan bukti daftar
pesanan.
14. Tampilan Login Admin
Gambar III 46.Halaman Login Admin
Gambar III.46. merupakan implementasi dari halaman login admin. Untuk masuk dalam
halaman administrator harus mengisi nama pengguna admin dan password kemudian
tekan tombol masuk
61
15. Tampilan Beranda Admin
Gambar III 47.Halaman Beranda Admin
Gambar III.47. Merupakan implementasi dari halaman Beranda admin yang dapat
dilihat setelah berhasil login admin. Terdapat Nama admin yang berhasil masuk.
16. Tampilan Kategori
Gambar III 48.Halaman Kategori
62
Gambar III.48. Merupakan implementasi dari halaman data kategori yang muncul
apabila menekan tombol kategori. Terdapat tombol tambah untuk menambah kategori
serta dilengkapi tombol aksi ubah untuk mengubah kategori dan hapus untuk menghapus
kategori yang telah dipilih.
17. Tampilan data user
Gambar III 49.Halaman Data User
Gambar III.49. Merupakan implementasi dari halaman data User admin yang muncul
apabila menekan tombol user. Terdapat tombol tambah untuk menambah admin serta
dilengkapi tombol aksi ubah untuk mengubah data admin dan hapus untuk menghapus
admin yang telah dipilih.
63
18. Tampilan data pelanggan
Gambar III 50.Halaman Data Pelanggan
Gambar III.50. Merupakan implementasi dari halaman data pelanggan yang muncul
apabila menekan tombol pelanggan. Terdapat tombol aksi lihat untuk melihat data
pelanggan dan tombol aksi hapus untuk menghapus pelanggan yang dipilih.
19. Tampilan data produk
Gambar III 51.Halaman Data Produk
64
Gambar III.51. merupakan implementasi dari halaman data produk yang muncul apabila
menekan tombol produk. Terdapat tombol tambah untuk menambah produk serta
dilengkapi tombol aksi ubah untuk mengubah data produk dan hapus untuk menghapus
produk yang telah dipilih.
20. Tampilan data stok
Gambar III 52.Halaman Data Stok
Gambar III.52. merupakan halaman Data stok yang muncul apabila menekan tombol
stok. Terdapat kolom untuk mengisi stok barang yang masuk dan aksi untuk menambah
stok dan edit stok stok.
65
21. Data transaksi selesai
Gambar III 53.Halaman Data Transaksi Selesai
Gambar III.53. Merupakan Halaman Data transaksi Selesai. Halaman ini berisi data
transaksi yang selesai dengan tombol aksi detail dan hapus
22. Laporan Data Produk
Gambar III 54.Halaman Laporan Produk
Gambar III.54. merupakan halaman laporan produk yang bisa di cetak oleh Admin
dalam pembuatan laporan.
66
23. Laporan Data Pelanggan
Gambar III 55.Halaman Laporan Pelanggan
Gambar III.55. Merupakan halaman laporan pelanggan yang bisa di cetak oleh Admin
dalam pembuatan laporan.
24. Transaksi penjualan
Gambar III 56.Halaman Laporan Transaksi Penjualan
Gambar III.56. Merupakan halaman laporan Transaksi yang bisa di cetak oleh Admin
dalam pembuatan laporan.
67
25. Data ongkir
Gambar III 57.Halaman Laporan Data Ongkir
Gambar III.57. Merupakan halaman laporan Ongkos Kirim yang bisa di cetak oleh
Admin dalam pembuatan laporan.
68
3.9. Pengujian Unit
Pengujian terhadap program yang dibuat menggunakan pengujian Black Box
sebagai berikut:
A. Pengujian Terhadap Form Login User
Tabel III.11. Hasil Pengujian Form Login User
No Skenario Test Case Hasil yang Hasil
Pengujian diharapkan Pengujian Kesimpulan
1. Email dan Email: Sistem akan
Password kosong menolak akses dan
tidak diisi Password: menampilkan
kemudian klik kosong “Username dan
tombol Masuk
password yang
Sesuai Valid
anda input belum
Harapan
benar”
2. Email diisi Email: Sistem akan
dan Password indri@gmail. menolak akses
tidak diisi com serta akan
kemudian klik Password: menampilkan
tombol Masuk Kosong pesan”Silahkan Isi
Sesuai Valid
Password dengan
Harapan
benar”
69
3. Email tidak email: Sistem akan
diisi dan Kosong menolak akses
Password Password: serta akan
diisi 1234 menampilkan
kemudian klik pesan”Silahkan Isi Sesuai Valid
tombol Masuk Username dengan Harapan
benar”
4. Email dan email: Sistem akan
Password [email protected] menolak akses dan
diisi dengan m menampilkan
data yang Password: “Username dan Sesuai Valid
salah 1111 password yang Harapan
kemudian klik anda masukkan
tombol Masuk belum benar”
5. Email dan email: Sistem menerima
Password indri@gmail. akses login dan
diisi dengan com masuk ke halaman Sesuai Valid
lengkap dan Password: beranda user Harapan
benar 1234
kemudian klik
tombol Masuk
70
B. Pengujian Terhadap Form Registrasi
Tabel III.12. Hasil Pengujian Form Registrasi
No Skenario Test Case Hasil yang Hasil
Pengujian diharapkan Pengujian Kesimpulan
1. Nama lengkap tidak Nama Sistem akan
diisi dan data yang lengkap: menolak akses
lain diisi kemudian Kosong serta akan
klik tombol Daftar menampilkan Sesuai Valid
pesan”Nama Harapan
harus diisi
tidak boleh
Kosong”
2. Email tidak diisi Email: Sistem akan
dan data yang lain Kosong menolak akses
diisi kemudian klik serta akan Sesuai Valid
tombol Daftar menampilkan Harapan
pesan”Email
harus diisi
tidak boleh
Kosong”
3. Email diisi dengan Email: Sistem akan
format salah (tidak indrigmail.c menolak akses
71
menggunakan om serta akan
tombol @) menampilkan Sesuai Valid
pesan”Masuka Harapan
n alamat
surel”
4. HP tidak diisi dan HP:Kosong Sistem akan
data yang lain diisi menolak akses
kemudian klik serta akan
tombol Daftar menampilkan
pesan”HP Sesuai Valid
harus diisi Harapan
tidak boleh
Kosong”
5. Nomor HP diisi HP:08JK7 Sistem akan
dengan format salah menolak akses Sesuai Valid
(menggunakan serta tidak Harapan
huruf) akan
menampilkan
huruf
6. Password tidak diisi Password: Sistem akan
dan data yang lain Kosong menolak akses
diisi kemudian klik serta akan
72
tombol Daftar menampilkan Sesuai Valid
pesan”Passwor Harapan
d harus diisi
tidak boleh
Kosong”
7. Semua data diisi Nama: siti Sistem akan
dengan lengkap dan Email:siti@ menerima
benar gmail.com akses dan
Hp: menampilkan
0897776 pesan”Daftar Sesuai Valid
Password: berhasil, Harapan
1234 silahkan
Re melakukan
Password: login”
1234
73
C. Pengujian Terhadap Tombol Beli
Tabel III.13. Hasil Pengujian Tombol Beli
No Skenario Test Case Hasil yang Hasil
Pengujian diharapkan Pengujian Kesimpulan
1. Pengunjung Pengunjung Sistem akan
melakukan : menekan menolak akses
pemesanan tetapi tombol beli dan akan
tidak melakukan pada produk menampilkan Sesuai Valid
login user terlebih tetapi belum pop up “Anda Harapan
dahulu mendaftar harus login”
sebagai user
2. Pengunjung sudah Pengunjung Sistem akan
melakukan : menekan menolak akses
registrasi menjadi tombol beli dan akan
user tetapi tidak pada produk menampilkan
melakukan login tetapi sudah pop up “Anda Sesuai Valid
user terlebih mendaftar harus login” Harapan
dahulu sebagai user
3. Pengunjung telah Pengunjung Sistem akan
melakukan login : login menerima
user dengan benar terlebih akses dan
dahulu kemudian Sesuai Valid
74
kemudian menampilkan Harapan
menekan halaman
tombol beli keranjang
pada produk belanja
D. Pengujian Terhadap Form Konfirmasi Pembayaran
Tabel III.14. Hasil Pengujian Form Konfirmasi
No Skenario Test Case Hasil yang Hasil
Pengujian diharapkan Pengujian Kesimpulan
1. No rekening tidak No.Rekening: Sistem akan
diisi dan data Kosong menolak akses
lainnya diisi dan akan
kemudian klik menampilkan Sesuai Valid
tombol simpan No.Rekening Harapan
Harus diisi
2. Atas nama tidak Atas nama: Sistem akan
diisi dan data Kosong menolak akses
lainnya diisi dan akan
kemudian klik menampilkan Sesuai Valid
tombol simpan Nama Nasabah Harapan
Harus diisi
3. Nama Bank tidak Nama Bank: Sistem akan
75
diisi dan data Kosong menolak akses
lainnya diisi dan akan
kemudian klik menampilkan Sesuai Valid
tombol simpan Nama Bank Harapan
Harus diisi
4. Tanggal Tanggal Sistem akan
pembayaran tidak Pembayaran: menolak akses
diisi dan data Kosong dan akan
lainnya diisi menampilkan Sesuai Valid
kemudian klik Tanggal Harapan
tombol simpan Pembayaran
Harus diisi
5. Jumlah transfer Jumlah Sistem akan
tidak diisi dan Transfer : menolak akses
data lainnya diisi Kosong dan akan
kemudian klik menampilkan Sesuai Valid
tombol simpan Jumlah Harapan
Transfer Harus
diisi