BAB III PEMBAHASAN - repository.bsi.ac.id · 4) Komputer, laptop, atau notebook 5) Mouse dan...
Transcript of BAB III PEMBAHASAN - repository.bsi.ac.id · 4) Komputer, laptop, atau notebook 5) Mouse dan...
26
BAB III
PEMBAHASAN
3.1 Analis Kebutuhan
Kebutuhan dalam pembuatan website ini meliputi dua macam yaitu
kebutuhan pengguna dan kebutuhan sistem:
1. Kebutuhan Pengguna
Dalam website yang penulis rancang terdapat tiga pengguna yang dapat saling
berinteraksi dalam lingkungan sistem, yaitu: Pengunjung, member dan admin.
Ketiga pengguna tersebut memiliki kebutuhan sistem yang berbeda-beda serta
memiliki hak akses yang berbeda beda, seperti berikut:
a. Kebutuhan Pengunjung
1) Pengunjung dapat melihat beranda, semua produk, cara order, dan
kontak kami. Beranda terdapat produk yang terbaru, selanjutnya menu
semua produk menampilkan semua produk yang dijual, akan tetapi
pengunjung tidak bisa melakukan transaksi pemesanan. Menu cara
order, pengunjung dapat melihat prosedur pemesanan dan menu kontak
kami tanpa harus login terlebih dahulu.
2) Pengunjung bisa mengisi form member jika ingin membeli barang.
3) Pengunjung dapat menjadi member dengan cara mengisi form member.
4) Pengunjung dapat melihat detail produk.
5) Pengunjung dapat mengklik produk best seller.
6) Pengunjung dapat melihat testimonial.
27
b. Kebutuhan member
1) Member dapat melihat semua produk dan detail produk tanpa harus
login terlebih dahulu.
2) Member dapat melihat cara pembelian dan kontak kami tanpa login
terlebih dahulu.
3) Member dapat melakukan order barang setelah form melakukan login
dengan email dan user yang telah terdaftar.
4) Setelah melakukan pembayaran, member dapat mengisi form konfirmasi
pembayaran.
5) Member dapat mengisi testimonial.
c. Kebutuhan Admin
1) Admin dapat mengubah, menambah, menghapus data admin.
2) Admin dapat melihat data transaksi jual produk.
3) Admin dapat melihat data user atau konfirmasi dari member.
4) Admin dapat mengubah, menambah, dan menghapus nama kategori.
5) Admin dapat menambah, mengubah, dan menghapus produk.
6) Admin dapat menambah, mengubah, dan menghapus biaya ongkos
kirim
7) Admin dapat mengatur testimonial.
28
2. Kebutuhan Sistem
Kebutuhan sistem merupakan kebutuhan dalam pembuatan website, serta
menjelaskan perangkat yang digunakan untuk mebuat sebuah sistem website,
analis kebutuhan dari website penjualan aksesoris komputer yaitu: kebutuhan
perangkat keras (hardware) dan kebutuhan perangkat lunak (software).
a. Kebutuhan Perangkat Keras (hardware)
Kebutuhan perangkat keras (hardware) yang penulis gunakan untuk
membuat, mendukung dan mengoperasikan website penjualan aksesoris
komputer adalah:
1) Processor AMD Dual Core
2) Memori 1024MB RAM
3) Monitor layar resolusi 1366 x 786 (64 bit) (60 Hz)
4) Komputer, laptop, atau notebook
5) Mouse dan Keyboard
6) Koneksi internet dengan kecepatan 2Mbps.
b. Kebutuhan Perangkat Lunak (software)
Kebutuhan perangkat lunak (software) yang penulis gunakan untuk membuat,
mendukung dan mengoperasikan website penjualan aksesoris komputer
adalah:
1) Sistem Operasi Windows 7 Ultimate
2) XAMPP v 3.2.1
3) Web Browser Mozilla Firefox
4) Adobe Dreamweaver CS6
29
3.2 Perancangan Perangkat Lunak
3.2.1. Rancangan Antar Muka
1. Rancangan Antar Muka Halaman Index (Beranda)
Halaman index atau Beranda adalah tampilan awal website. Halaman ini di
lihat pertama kalinya oleh pengunjung. Selain itu pengunjung dapat melihat setiap
isi dari website. Tampilan dari halaman index atau Beranda adalah sebagai
berikut:
Gambar III.1. Rancangan Antar Muka Halaman Index (pengunjung)
30
2. Rancangan Antar Muka Halaman Semua Produk
Halaman semua produk merupakan tampilan semua produk yang di jual di
website. Pengunjung dapat melihat detail produk yang berisi nama barang, jumlah
stok, harga, dan deskripsi barang. Tampilan dari halaman semua produk adalah
sebagai berikut:
Gambar III.2. Rancangan Antar Muka Halaman Semua Produk
31
3. Rancangan Antar Muka Halaman Cara Pesan
Halaman cara pesan adalah halaman yang menjelaskan prosedur untuk
melakukan transaksi pembelian. Dari mulai login hingga membeli barang.
Tampilan dari halaman cara order adalah sebagai berikut:
Gambar III.3. Rancangan Antar Muka Halaman Cara Pesan
32
4. Rancangan Antar Muka Halaman Kontak Kami
Berikutnya halaman kontak kami, yang berisi tentang penjelasan alamat
maupun contact dari pemilik website penjualan aksesoris ini. Tampilan dari
halaman kontak kami adalah sebagai berikut:
Gambar III.4. Rancangan Antar Muka Halaman Kontak Kami
33
5. Rancangan Antar Muka Halaman Login Member
Halaman Login member adalah halaman untuk memulai transaksi bagi
pelanggan yang telah menjadi member, dengan memasukkan email dan password.
Tampilan dari halam login member adalah sebagai berikut:
Gambar III.5. Rancangan Antar Muka Halaman Login Member
34
6. Rancangan Antar Muka Halaman Daftar Member
Halaman daftar memberi berisi form yang harus di isi calon member dan
kemudian akan menjadi member tetap. Berikut tampilan halaman daftar member:
Gambar III.6. Rancangan Antar Muka Halaman Daftar Member
35
7. Rancangan Antar Muka Halaman Index Member
Halaman index (Beranda) member merupakan halaman utama member,
dengan tampilan sama dengan index pengunjung hanya saja pada halaman ini
pelanggan mulai bertransaksi. Berikut tampilan halaman index member:
Gambar III.7. Rancangan Antar Muka Halaman Index Member
36
8. Rancangan Antar Muka Halaman Ubah Akun
Halaman Ubah akun merupakan halaman untuk mengubah data member
seperti halnya email dan password yang digunakan untuk masuk login. Berikut
tampilan dari halaman Ubah akun:
Gambar III.8. Rancangan Antar Muka Halaman Ubah Akun
37
9. Rancangan Antar Muka Halaman Daftar Pesan
Halaman daftar pesan berisi tentang daftar produk yang telah di pesan,
berikut tampilan dari halaman daftar pesan:
Gambar III.9. Rancangan Antar Muka Halaman Daftar Pesan
38
10. Rancangan Antar Muka Halaman Detail Produk
Halaman detail produk memaparkan penjelasan dari produk yang dijual
seperti nama barang, deskripsi, berat barang, dan jumlah stok, dan harga produk.
Tampilan detail produk adalah sebagai berikut:
Gambar III.10. Rancangan Antar Muka Halaman Detail Produk
39
11. Rancangan Antar Muka Halaman Keranjang Belanja
Halaman keranjang belanja berisi tentang transaksi yang dilakukan
member yang mana member bisa mengubah jumlah pemesanan. Berikut tampilan
dari halaman keranjang belanja:
Gambar III.11. Rancangan Antar Muka Halaman Keranjang Belanja
40
12. Rancangan Antar Muka Halaman Data Pengiriman
Halaman data pengiriman menjelaskan data untuk pengiriman barang ya di
pesan dan member mengisikan alamat. Berikut tampilan dari halaman data
pengiriman:
Gambar III.12. Rancangan Antar Muka Halaman Data Pengiriman
41
13. Rancangan Antar Muka Halaman Konfirmasi Pembayaran
Halaman konfirmasi pembayaran dirancang untuk member agar dapat
memberikan konfirmasi pembayaran yang telah dilakukan agar pemesanan dapt
diproses oleh admin. Rancangan antar muka halaman konfirmasi pembayaran
adalah sebagai berikut:
Gambar III.13. Rancangan Antar Muka Halaman Konfirmasi Pembayaran
42
14. Rancangan Antar Muka Halaman Detail Pesanan
Halaman detail pesanan adalah halaman yang menampilkan detail dari
pesanan yang telah dilakukan. Rancangan antar muka halaman detail pesanan
adalah sebagai berikut:
Gambar III.14. Rancangan Antar Muka Halaman Detail Pesanan
43
15. Rancangan Antar Muka Halaman Cetak Bukti Transaksi
Halaman cetak bukti transaksi ini berfungsi agar member dapat mencetak
bukti transaksi yang telah dilakukan. Rancangan antar muka halaman cetak bukti
transaksi adalah sebagai berikut:
Gambar III.15. Rancangan Antar Muka Halaman Cetak Bukti Transaksi
16. Rancangan Antar Muka Halaman Isi Testimonial
Halaman isi testimonial adalah halaman yang dirancang khusus untuk
member agar dapat menyampaikan kesan dan pesan setelah melakukan login dan
melakukan transaksi pembelian. Rancangan antar muka halaman isi testimonial
adalah sebagai berikut :
44
Gambar III.16. Rancangan Antar Muka Halaman Isi Testimonial
17. Rancangan Antar Muka Halaman Login Admin
Halaman login admin digunakan untuk admin dalam mengolah data user
dan member begitu juga admin itu sendiri. Admin dapat masuk dengan username
dan password yang telah di tsimpan sebelumnya. Berikut tampilan rancangan
halaman login admin:
Gambar III.17. Rancangan Antar Muka Halaman Login Admin
45
18. Rancangan Antar Muka Halaman Beranda Admin
Halaman beranda Admin adalah awal halaman setelah melakukan login
yang kemudian admin. Berikut rancangan tapilan halaman beranda admin:
Gambar III.18. Rancangan Antar Muka Halaman Beranda Admin
46
19. Rancangan Antar Muka Halaman Data Admin
Halaman data admin di gunakan untuk mengolah data admin, seperti
menyimpan, menampilkan, dan menghapus admin. Berikut rancangan tampilan
dari halaman data admin:
Gambar III.19. Rancangan Antar Muka Halaman Data Admin
47
20. Rancangan Antar Muka Halaman Data Kategori
Halaman data admin di gunakan untuk mengolah data kategori, seperti
menyimpan, menampilkan, dan menghapus data kategori. Berikut rancangan
tampilan dari halaman data kategori:
Gambar III.20. Rancangan Antar Muka Halaman Data Kategori
48
21. Rancangan Antar Muka Halaman Data Ongkos Kirim
Halaman data admin di gunakan untuk mengolah data ongkos kirim,
seperti menyimpan, menampilkan, dan menghapus data admin. Berikut
rancangan tampilan dari halaman data ongkos kirim:
Gambar III.21. Rancangan Antar Muka Halaman Data Ongkos Kirim
49
22. Rancangan Antar Muka Halaman Data Produk
Rancangan halaman data admin di gunakan untuk mengolah data produk,
seperti menyimpan, menampilkan, dan menghapus data produk. Berikut
rancangan tampilan dari halaman data produk:
Gambar III.22. Rancangan Antar Muka Halaman Data Produk
50
23. Rancangan Antar Muka Halaman Data Pesan Baru
Rancangan halaman data pesan baru adalah halaman yang dibuat untuk
admin melihat apakah ada atau tidak daftar pesan produk baru dari member,
kemudian dapat menghapusnya. Rancangan antar muka halaman data pesan baru
adalah sebagai berikut:
Gambar III.23. Rancangan Antar Muka Halaman Data Pesan Baru
51
24. Rancangan Antar Muka Halaman Data Pesan Konfirmasi
Rancangan antar muka halaman data pesan konfirmasi adalah halaman
yang dirancang agar admin dapat melihat seluruh data konfirmasi pembayaran
dari member kemudian dapat melihat detailnya dan menghapus. Rancangan
antar muka halaman data konfirmasi adalah sebagai berikut:
Gambar III.24. Rancangan Antar Muka Halaman Data Pesan Konfirmasi
52
25. Rancangan Antar Muka Halaman Data Pesan Proses
Halaman data pesan proses adalah halaman yang dirancang untuk admin
dapat melihat seluruh data pesan yang masih berstatus proses. Rancangan antar
muka halaman data pesan proses adalah sebagai berikut:
Gambar III.25. Rancangan Antar Muka Halaman Data Pesan Proses
53
26. Rancangan Antar Muka Halaman Data Pesan Terkirim
Halaman data terkirim adalah halaman yang dirancang untuk admin dapat
melihat seluruh data produk yang terkirim dan melihat detail serta
menghapusnya. Ranacangan antar muka halaman data terkirim adalah sebagai
berikut:
Gambar III.26. Rancangan Antar Muka Halaman Data Pesan Terkirim
54
27. Rancangan Antar Muka Halaman Laporan Pelanggan
Halaman laporan pelanggan berisi data pelanggan, yaotu pelanggan yang
telah menjadi member. Berikut tampilan halaman laporan pelanggan:
Gambar III.27. Rancangan Antar Muka Halaman Laporan Pelanggan
28. Rancangan Antar Muka Halaman Laporan Produk
Halaman laporan produk berisi keseluruhan produk dengan format PDF
yang di jual. Berikut rancangan tampilan halaman laporan produk:
Gambar III.28. Rancangan Antar Muka Halaman Laporan Produk
55
29. Rancangan Antar Muka Halaman Laporan Ongkos Kirim
Halaman laporan produk berisi keseluruhan data ongkos kirim dengan
format PDF. Berikut rancangan tampilan halaman laporan ongkos kirim:
Gambar III.29. Rancangan Antar Muka Halaman Laporan Ongkos Kirim
30. Rancangan Antar Muka Halaman Laporan Transaksi
Halaman laporan transaksi adalah halaman yang dirancang untuk admin
dapat dapat melihat laporan transaksi dengan format PDF dan mencetaknya.
Rancangan antar muka laporan transaksi adalah sebagai berikut:
Gambar III.30. Rancangan Antar Muka Halaman Laporan Trnsaksi
56
31. Rancangan Antar Muka Halaman Laporan Transaksi Periode
Halaman antar muka perperiode adalah halaman yang dibuat untuk admin
untuk melihat laporan secara peroide dan mencetaknya. Rancangan antar muka
halaman perperiode adalah sebagai berikut:
Gambar III.31. Rancangan Antar Muka Halaman Transaksi Periode
32. Rancangan Antar Muka Halaman Testimonial
Halaman testimonial adalah halaman yang dirancang untuk admin daapat
melihat data testimonial yang dikirim member. Rancangan antar muka halamn
testimonial adalah sebagai berikut:
57
Gambar III.32. Rancangan Antar Muka Halaman Testimonial
33. Rancangan Antar Muka Halaman Ubah Testimonial
Halaman testimonial adalah halaman yang dirancang untuk admin dapat
memberikan status kepada testimonial yang dikirim member. Rancangan antar
muka halaman edit testimonial adalah sebagai berikut:
58
Gambar III.33 Rancangan Antar Muka Halaman Ubah Testimonial
3.2.2. Rancangan Basis Data
1. Entity Relationship Diagram (ERD)
Dalam perancangan basis data dilakukan dengan pemetaan pemetaan tabel-
tabel yang digambarkan dengan Entity Relationship Diagram (ERD). Berikut
adalah E-R Diagram untuk database website penjualan aksesoris komputer:
59
Gambar III.34 Entity Relationship Diagram (ERD)
2. Logical Record Structure (LRS)
Rancangan basis data setelah membuat Entity Relationship Diagram (ERD),
selanjutnya membuat Logical Record Structure (LRS) untuk memudahkan
mendefinisikan spesifikasi file. Adapun Logical Record Structure (LRS) website
penjualan aksesoris komputer, sebagai berikut:
60
Gambar III.35 Logical Record Struktur (LRS)
3.2.3. Spesifikasi File
Menjelaskan tentang file atau tabel yang terdapat pada database seperti field
yang dibuat dan menjelaskan type, size, dari masing-masig field tersebut. Berikut
penjelasannya:
1. Spesifikasi File Admin
Nama Database : dbaksesoriskom.sql
Nama File : File Admin
61
Akronim : admin
Fungsi : Untuk menyimpan dan menampilkan data admin
Tipe File : File master
Organisasi file : sequential
Media : Hard disk
Panjang Record : 125 karakter
Kunci Filed : id_admin
Software : MySQL
Tabel III.1
Spesifikasi File Admin
No Elemen data Nama field Tipe Size keterangan
1 ID Admin id_admin varchar 5 Primary key
2 Nama Lengkap nama_admin varchar 35
3 Passwoard Admin pass_admin varchar 50
4 Email email_admin varchar 35
5 No HP hp_admin varchar 13
2. Spesifikasi File Kategori
Nama Database : dbaksesoriskom.sql
Nama File : File Kategori
Akronim : kategori
Fungsi : Untuk menyimpan dan menampilkan data kategori
Tipe File : File master
Organisasi file : sequential
62
Media : Hard disk
Panjang Record : 25 karakter
Kunci Filed : id_kategori
Software : MySQL
Tabel III.2
Spesifikasi File Kategori
No Elemen data Nama field Tipe Size keterangan
1 ID Kategori id_kategori int 5 Primary key
2 Nama Kategori nama_kategori varchar 20
3. Spesifikasi File Konfirmasi
Nama Database : dbaksesoriskom.sql
Nama File : File Konfirmasi
Akronim : konfirmasi
Fungsi : menyimpan dan menampilkan data konfirmasi
Tipe File : File Transaksi
Organisasi file : sequential
Media : Hard disk
Panjang Record : 77 karakter
Kunci Filed : id_konfirm
Software : MySQL
63
Tabel III.3
Spesifikasi File Konfirmsi
No Elemen data Nama field Tipe Size keterangan
1 ID Konfirmasi id_konfirm Int 5 Primary key
2 Nomor Transaksi no_transaksi varchar 12
3 Tanggal Bayar tgl_byr date
4 No Rekening no_rek varchar 20
5 Nasabah nasabah varchar 30
6 Nama Bank nama_bank char 10
4. Spesifikasi File Kota
Nama Database : dbaksesoriskom.sql
Nama File : File Kota
Akronim : kota
Fungsi : menyimpan dan menampilkan data kota
Tipe File : File master
Organisasi file : sequential
Media : Hard disk
Panjang Record : 40 karakter
Kunci Filed : id_kota
Software : MySQL
64
Tabel III.4
Spesifikasi File Kota
No Elemen data Nama field Tipe Size keterangan
1 ID Kota id_kota int 5 Primary key
2 Nama Kota Nama_kota varchar 25
3 Ongkos Kirim Int int 10
5. Spesifikasi File Pelanggan
Nama Database : dbaksesoriskom.sql
Nama File : File Pelanggan
Akronim : pelanggan
Fungsi : menyimpan dan menampilkan data pelanggan
Tipe File : File master
Organisasi file : sequential
Media : Hard disk
Panjang Record : 138 karakter
Kunci Filed : id_pelanggan
Software : MySQL
Tabel III.5
Spesifikasi File Pelanggan
No Elemen data Nama field Tipe Size keterangan
1 ID Pelanggan id_pelanggan int 6 Primary key
2 Nama Lengkap Nama varchar 35
65
3 Alamat Alamat text
4 Telepon Telepon varchar 12
5 Email Email varchar 35
6 Password password varchar 50
6. Spesifikasi File Pesan
Nama Database : dbaksesoriskom.sql
Nama File : File Pesan
Akronim : pesan
Fungsi : menyimpan dan menampilkan data pesan
Tipe File : File Transaksi
Organisasi file : sequential
Media : Hard disk
Panjang Record : 250 karakter
Kunci Filed : notransaksi
Software : MySQL
Tabel III.6
Spesifikasi File Pesan
No Elemen data Nama field Tipe Size keterangan
1 No Transaksi notransaksi varchar 12 Primary key
2 Status Pesan status_pesan varchar 20
3 ID Pelanggan id_pelanggan int 6
4 ID Admin id_admin varchar 10
5 Total Harga total_harga double
66
6 Jam Pesan jam_pesan time
7 Tanggal Pesan tanggal_pesan date
8 ID Kota id_kota int 2
9 Alamat Kirim alamat_kirim varchar 200
7. Spesifikasi File Pesan Isi
Nama Database : dbaksesoriskom.sql
Nama File : File Isi Pesan
Akronim : pesan_isi
Fungsi : menyimpan dan menampilkan data isi pesanan
Tipe File : File Transaksi
Organisasi file : sequential
Media : Hard disk
Panjang Record : 29 karakter
Software : MySQL
Tabel III.7
Spesifikasi File Isi Pesan
No Elemen data Nama field Tipe Size keterangan
1 No Transaksi notransaksi varchar 12
2 ID Produk id_produk int 3
3 Harga Jual Hrg_jual int 11
4 Jumlah Jumlah int 3
8. Spesifikasi File Produk
67
Nama Database : dbaksesoriskom.sql
Nama File : File Produk
Akronim : produk
Fungsi : menyimpan dan menampilkan data isi produk
Tipe File : File master
Organisasi file : sequential
Media : Hard disk
Panjang Record : 114 karakter
Software : MySQL
Tabel III.8
Spesifikasi File Produk
No Elemen data Nama field Tipe Size keterangan
1 ID Produk id_produk int 3 Primary key
2 ID Kategori id_kategori int 5
3 Nama Produk nama_produk varchar 40
4 Deskripsi Deskripsi text
5 Berat Berat int 6
6 Harga Harga int 20
7 Stok Stok int 5
8 Gambar gambar varchar 35
9. Spesifikasi File Testimonial
Nama Database : dbaksesoriskom.sql
Nama File : File Testimonial
68
Akronim : testimonial
Fungsi : menyimpan dan menampilkan data isi Testimonial
Tipe File : File master
Organisasi file : sequential
Media : Hard disk
Panjang Record : 29 karakter
Software : MySQL
Tabel III.9
Spesifikasi File Testimonial
No Elemen data Nama field Tipe Size keterangan
1 ID Testimonial id_testi Int 6 Primary key
2 ID Pelanggan id_pelanggan varchar 6
3 ID Admin id_admin varchar 8
4 Status Testimonial status_testi varchar 9
5 Tanggal Tanggal date
6 Testimonial testimonial text
10. Spesifikasi File Transaksi Rinci
Nama Database : dbaksesoriskom.sql
Nama File : File Transaksi Rinci
Akronim : transaksirinci
Fungsi : menampilkan data isi detail transaksi
Tipe File : File Transaksi
Organisasi file : sequential
69
Media : Hard disk
Panjang Record : 82 karakter
Software : MySQL
Tabel III.10
Spesifikasi File Transaksi Rinci
No Elemen data Nama field Tipe Size keterangan
1 No Transaksi notransaksi int 12
2 ID Pelanggan id_pelanggan int 6
3 ID Produk id_produk int 3
4 Nama Produk nama_produk varchar 35
5 Harga Harga int 11
6 Jumlah Jumlah int 4
7 Subtotal subtotal int 11
3.2.4. Rancangan Struktur Navigasi
Struktur navigasi merupakan salah satu perancangan sistem informasi
dimana user bisa mengakses halaman website penjualan aksesoris komputer baik
daftar member, memesan. Komponen navigasi biasanya berupa fasilitas untuk
berpindah dari satu halamn website ke halaman website lainnya.
70
Adapun jenis struktur navigasi yang penulis gunakan adalah bentuk
navigasi linear dan navigasi non-linear, seperti yang digambarkan sebagai berikut:
1. Struktur Navigasi Halaman Web Pengunjung
Gambar III.36. Struktur Navigasi Halaman Index Pengunjung
2. Struktur Navigasi Halaman Web Member
Gambar III.37 Struktur Navigasi Halaman Index Member
71
3. Struktur Navigasi Halaman Web Admin
Gambar III.38. Struktur Navigasi Halaman Index Admin
3.3. Implementasi dan Pengujian Unit
3.3.1. Implementasi
Tahap implementasi sistem merupakan proses yang dilakukan setelah tahap
perencanaan sistem selesai dilaksanakan. Tujuan yang dicapai pada tahap ini
dapat dioperasikannya hasil perancangan sistem yang telah dibuat. Berkut
tampilan implementasi dari Website Penjualan Aksesoris Komputer:
1. Tampilan Halaman Index Pengunjung
Merupakan halaman Beranda pengunjung yang menampilkan produk yang
dijual, pada halaman ini pengunjung hanya dapat melihat produk, cara pesan,
kontak kami. Pada sidebar kiri terdapat navigasi cari, login member kategori,
dan informasi best seller, dan testimonial. Tombol Pesan berfungsi untuk
72
mulai pesan , tombol detail utnuk melihat deskripsi produk yang selanjtnya
akan ada tombl pesan juga pada halaman index pengunjung.
Gambar III.39. Tampilan Halaman Index Pengunjung
2. Tampilan Halaman Semua Produk
Merupakan halaman dimana semua produk yang di jual ditampilkan, dengan
masing-masing memiliki harga dan kualitas masing-masing, tetapi disini
pelanggan belum bisa melakukan transaksi, karena harus mendaftar sebgai
member.
73
Gambar III.40. Tampilan Halaman Semua Produk
3. Tampilan Halaman Cara Pesan
merupakan halaman yang menjelaskan prosedur transaksi pembelian dari
mulia mendaftar member, sampaibarang sampai ke tempat pembeli.
74
.
Gambar III.41. Tampilan Halaman Cara Pesan
4. Tampilan Halaman Kontak Kami
merupakan halaman yang menampilkan alamat serta kontak yang bisa di
hubungi. Dan terdapat map untuk menunjukkan lok
Gambar III.42. Tampilan Halaman Kontak Kami
5. Tampilan Halaman Login Member
merupakan halaman yang digunakan untuk login member dan selanjutnya
member dapat mulai melakukan transaksi.
75
Gambar III.43. Tampilan Halaman Login Member
6. Tampilan Halaman Daftar Member
merupakan halaman yang di gunakan untuk mendaftar member agar dapat
agar melakukan transaksi, dimana pelanggan akan mengisiskan nama,
alamat, telepon, email, passsword dan Re passwor. Dan pelanggan bisa
masuk ke halaman memeber dengan email dan password yang telah di isi.
Gambar III.44. Tampilan Halaman Daftar Member
76
7. Tampilan Halaman Ubah Akun
merupakan halaman yang di gunakan untuk mengubah data member
dimana data yang d ubah berupa alamat, telepon, email, dan ganti
password. Yang kemudian bisa masuk ke halaan member.
Gambar III.45. Tampilan Halaman Ubah Akun
8. Tampilan Halaman Detail Produk
Halaman Tampilan Detail Produk adalah untuk menampilkan deskripsi
produk yang di jual, yang menampilkan nama, deskripsi, jumlah stok
harga dari produk, dan terdapat tombol untuk mulai memesan.
77
Gambar III.46. Tampilan Halaman Detail Produk
9. Tampilan Halaman Keranjang Belanja
Tampilan Keranjang Belanja di gunakan untuk memulai transaksi ketika
klik tombol pesan akan muncul halaman keranjang belanja seperti nama,
gambar, harga, harga produk, serta Ubah jumlah dari pembelian produk
ketika jumlah akan di ubah, user tekan enter maka akan muncul validasi.
Gambar III.47. Tampilan Halaman Keranjang Belanja
78
10. Tampilan Halaman Data Pengiriman
Tampilan Data pengiriman merupakan langkah berikutnya setelah
keranjang belanja, member dapat mengisi alamat yang dituju. Lalu klik
pesan untuk memulai pembelian.
Gambar III.48. Tampilan Halaman Data Pengiriman
11. Tampilan Halaman Konfirmasi Pembayaran
Tampilan konfirmasi pembayaran berisi form yang akan di isi oleh
pelanggan untuk pembayaran seperti no transaksi, no rekening, nama
Nasabah, nama bank, dan tanggal pembayaran. Yang kemudian
selanjutnya, konfirmasi stelah itu status pemesanan menjadi konfirmasi.
79
Gambar III.49. Tampilan Halaman Konfirmasi Pembayaran
12. Tampilan Halaman Daftar Pesan
Tampilan daftar pesan untuk menampilkan produk yang telah di pesan
oleh pelanggan. Terdapat dua aksi yaitu lihat dan cetak, pada saat klik aksi
lihat member dapat melihat Rincian Pesanan dan saat klik cetak maka akan
keluar tampilan cetak bukti transaksi dan memeber dapat menyimpan
bukti.
80
Gambar III.50. Tampilan Halaman Daftar Pesan
13. Tampilan Halaman Detail Pesanan
Tampilan detail pesan untuk menampilkan produk yang telah di pesan oleh
pelanggan. Terdapat dua aksi yaitu lihat dan cetak, pada saat klik aksi lihat
member dapat melihat Rincian Pesanan serta ada tombol konfirmasi untuk
memulai transaksi.
81
Gambar III.51. Tampilan Halaman Detail Pesana
14. Tampilan Halaman Cetak Bukti Transaksi
Tampilan cetak bukti transaksi menampilkan detail transaksi pemesanan.
Yang berisi no transaksi, tanggal, nama pelanggan dan tujuan. Dan
keterangan produk yang telah di pesan, kemudian pelangggan bisa
menyimpan bukti transaksi pemesanan tersebut.
82
Gambar III.52. Tampilan Halaman Cetak Bukti Transaksi
15. Tampilan Halaman Isi Testimonial
Halaman ini member dapat mengsi testimonial yang berisi kesan dan pesan
terhadap produk yang telah di beli. Setelah mengisi testimonial klik kirim
dan secara otomatis member dapat menyimpan testimonial. Dan kemudian
memeber dapat melihat testimonial yang telah disimpan.
Gambar III.53. Tampilan Halaman Isi Testimonial
83
16. Tampilan Halaman Login Admin
Tampilan login admin untuk masuk ke halaman admin, dan admin dapat
mengolah data master, transaksi, dan laporan. Pertama admin memasukkan
username dan password yang telah ditambahkan sebelumnya pada
database., selanjutnya klik login. Maka halamana admin akan muncul.
Gambar III.54. Tampilan Halaman Login Admin
17. Tampilan Halaman Beranda Admin
Tampilan beranda admin yaitu halaman yang pertama kali muncul setelah
melakukan login. Terdapat nama admin setelah login.
84
Gambar III.55. Tampilan Halaman Beranda Admin
18. Tampilan Halaman Data Admin
Tampilan data admin memiliki dua aksi yaitu hapus dan ubah serta tombol
tambah untuk menambahkan admin. Ketika pilih hapus maka admin akan
terhapus di database. Ketika pilih aksi ubah, admin dapat mengubah data
yang bersangkutan seperti nama, email, no hp, dan password. Kemudian
pilih update untuk memperbarui data.
Gambar III.56. Tampilan Halaman Data Admin
85
19. Tampilan Halaman Data Kategori
Tampilan halaman admin data kategori berisi kategori produk yang di jual,
pada halaman ini admin dapat menghapus, mengubah, menambah, dan
menampilkan ke halaman kategori maupun pada database.
Gambar III.57. Tampilan Halaman Data Kategori
20. Tampilan Halaman Data Ongkos Kirim
Tampilan halaman admin data ongkos kirim menampilkan kota serta tarif
ongkir masing-masing kota, pada halaman ini admin dapat menghapus,
mengubah, menambah, dan menampilkan ke halaman ongkos kirim
maupun pada database.
86
Gambar III.58. Tampilan Halaman Data Ongkos Kirim
21. Tampilan Halaman Data Produk
menambah berarti menamabah data produk baru yang mana akan di
tampilkan di menu beranda dan semua produk. Ketika klik icon hapus
maka data akan secara otomatis terhapus, dan ketika klik icon ubah, maka
akan muncul form produk.
Gambar III.59. Tampilan Halaman Data Produk
87
22. Tampilan Halaman Data Pesan Baru
Data pesan baru merupakan data admin yang digunakan untuk proses
transaksi, pada data pesan baru di dapat ketika member membeli lalau
masuk kedalam daftar pesan, yang kemudian admin mengolah menjadi
data pesan baru, pada data pesan baru terdapat dua aksi yaitu lihat dan
hapus.ketika pilih lihat maka akan muncul detail pesan, jika hapus maka
hilang atau terhapus
Gambar III.60. Tampilan Halaman Data Pesan Baru
23. Tampilan Halaman Data Pesan Konfirmasi
Data konfirmasi merupakan data pesan yang stuttus pemesanannya
konfirmasi, dimana member mulai mengisis form konfirmasi untuk
memulai transaksi.
88
Gambar III.61. Tampilan Halaman Data Konfirmasi
24. Tampilan Halaman Data Pesan Proses
Data pesan proses merupakan data pesan yang stuttus pemesanannya
Proses, dimana admin klik proses maka status pesan menjadi proses, hal
ini di lakukan setelah adanya pengecekan dari admin apakah memeber
sudah bayar. Jika sudah maka admin klik proses.
Gambar III.62. Tampilan Halaman Data Proses
89
25. Tampilan Halaman Data Pesan Terkirim
Setelah data proses maka selanjtnya data di kirim maka ststus pemesanan
pada data pesan terkirim adalah terkirim.
Gambar III.63. Tampilan Halaman Data Terkirim
26. Tampilan Halaman Laporan Pelanggan
menampilkan seluruh member yang sudah menjadi pelanggan tetap.
Gambar III.64. Tampilan Halaman Laporan Pelanggan
90
27. Tampilan Halaman Laporan Produk
menampilkan seluruh produk yang telah di tambahkan sebelumnya
Gambar III.65. Tampilan Halaman Laporan Produk
28. Tampilan Halaman Laporan Ongkos Kirim
menampilkan seluruh data ongkos kirim. Laporan ini berbetuk pdf maka
bisa di save oleh member.
Gambar III.66. Tampilan Halaman Laporan Ongkos Kirim
91
29. Tampilan Halaman Laporan Transaksi
menampilkan seluruh data transaksi pemesanan. Laporan ini berbetuk pdf
maka bisa di save oleh member.
Gambar III.67. Tampilan Halaman Laporan Transaksi
30. Tampilan Transaksi Laporan Transaksi Periode
menampilkan seluruh data transaksi pemesanan secara periode yaitu
melihat laporan berdasarkan tanggal sepertihalnya mutasi pada suatu
rekening. Laporan ini berbetuk pdf maka bisa di save oleh member.
Gambar III.68. Tampilan Halaman Laporan Transaksi Periode
92
3.3.2. Pengujian Unit
Pengujian terhadap program yang disusun oleh penulis menggunakan
blackbox testing yang bertujuan untuk mengetahui kondisi Error yang berada
pada program yang telah dibuat.
1. Pengujian Terhadap Form Login Member
Tabel III.11
Form Login Member
No Skenario
Pengujian
Test case Hasil yang
diharapkan
Hasil
pengujian
Kesimpulan
1 Username dan
password tidak
diisi kemudian
klik login
Username:
kosong
Password :
Kosong
Sistem akan
menolak akses
dan menampilkan
“Login Salah"
Sesuai
harapan
Valid
2 Username diisi
dan password
tidak diisi,
kemudian klik
login
Username:
via@gmai
l.com
Password :
Kosong
Sistem akan
menolak akses
dan menampilkan
“Maaf Login
salah , password
silahkan isi dg
benar ”
Sesuai
harapan
Valid
3 Username
tidak diisi dan
password diisi,
kemudian klik
login
Username:
kosong
Password :
mega
Sistem akan
menolak akses
dan menampilkan
“Maaf Login
salah, Isi
username
dengan benar”
Sesuai
harapan
Valid
4 Username diisi
dan password,
kemudian klik
login
Username:
via@gmai
l.com
Password:
1234
Sistem menerima
akses login dan
masuk kehalaman
beranda member
Sesuai
harapan
Valid
93
2. Pengujian Terhadap Form Daftar Member
Tabel III.12
Form Daftar Member
No Skenario
Pengujian
Test case Hasil yang
diharapkan
Hasil
pengujian
Kesimpulan
1 Nama tidak
diisi dan data
lain diisi,
kemudian klik
Daftar
Nama :
(kosong)
Sistem akan
menolak akses
dan akan
menampilkan “1.
Nama Harus
Diisi!! ”
Sesuai
Harapan
Valid
2. Alamat tidak
diisi dan data
lain diisi
kemudian klik
Daftar
Alamat :
(kosong)
Sistem akan
menolak akses
dan akan
menampilkan
“Alamat Harus
Diisi !!”
Sesuai
Harapan
Valid
3. Telepon tidak
diisi dan data
lain diisi,
kemudian klik
Daftar
Telepon :
(kosong)
Sistem akan
menolak akses
dan akan
menampilkan “No
Telepon Harus
Diisi !!”
Sesuai
Harapan
Valid
4 Telepon diisi
dengan huruf,
dan data lain
diisi.
Kemudian klik
Daftar
Telepon :
abcd
Sistem akan
menolak akses,
dan menampilkan
“Nomor telp
harus terdiri dari
angka. Terdapat
huruf pada nomor
telp”
Sistem
akan
menolak
akses
Valid
5 Email tidak
diisi dan data
lain diisi
kemudian klik
Login
Email :
(kosong)
Sistem akan
menolak akses
dan akan
menampilkan
“Email Harus
Diisi”
Sesuai
harapan
Valid
6 Email diisi
dengan format
salah (tidak
Email :
via@gmai
l.com
Sistem akan
menolak akses
dan kotak kan
Sesuai
harapan
Valid
94
ada keterangan
@)
diberi garis
merah, serta
muncul “Please
enter an email
addres”.
7 Password tidak
diisi dan data
lain diisi
kemudian klik
Daftar
Password :
(kosong)
Sistem akan
menolak akses
dan akan
menampilkan
“Password Harus
Diisi Tidak Boleh
Kosong”
Sesuai
harapan
8 Password diisi
tapi tidak sama
dengan Re
Password dan
data yang lain
diisi.
Kemudian klik
Daftar
Password :
123
Re
Password :
321
Sistem akan
menolak akses
dan akan
menampilkan
“Password tidak
sama”
Sesuai
Harapan
Valid
9 Re Password
tidak diisi dan
data lain diisi
kemudian klik
Daftar
Re
Password :
kosong
Sistem akan
menolak dan akan
muncul
“Password tidak
sama dengan
sebelumnya !!”
Sesuai
harapan
Valid
10 Re Password
diisi tapi tidak
sama dengan
Password
Password :
123
Re
Password :
321
Sistem akan
menolak dan
muncul
“Password tidak
sama dengan
sebelumnya !!”
Sesuai
harapan
Valid
11 Semua data
diisi dengan
benar dan
lengkap
Nama : via
Alamat :
saimbang
Telepon :
08777114
5146
Email :
via@gmail.
com
Sistem akan
menerima akases
dan akan
menampilkan
“Daftar member
anda berhasil”
Sesuai
harapan
Valid
95
Password :
1234
Re
Password :
1234
3. Pengujian Terhadap Tombol Beli
Tabel III.13
Tabel Form Tombol Pembelian
No Skenario
Pengujian
Test case Hasil yang
diharapkan
Hasil
pengujian
Kesimpulan
1 Pengunjung
melakukan
pembelian tapi
tidak
melakukan
login terlebih
dahulu
Pengunjung
menekan
tombol beli
tetapi belum
mendaftar
Sistem akan
menolak akses
dan
menampilkan
“Anda harus
login”
Sesuai
harapan
Valid
2 Pengunjung
sudah
melakukan
daftar menjadi
member tetapi
tidak
melakukan
login terlebih
dahulu
Pengunjung
: menekan
tombol beli
dan sudah
melakukan
daftar
member
Sistem akan
menolak akses
dan akan
menampilkan
“Anda harus
login”
Sesuai
harapan
Valid
3 Pengunjung
telah
melakukan
login dengan
benar
kemudian
menekan
tombol beli
Pengunjung
: Login
terlebih
dahulu dan
menekan
tombol beli
Sistem
menerima akses
kemudian
menampilkan
halaman
keranjang
belanja
Sesuai
harapan
Valid
96
4. Pengujian Terhadap Form Konfirmasi
Tabel III.14
Tabel Form Konfirmasi
No Skenario
Pengujian
Test case Hasil yang
diharapkan
Hasil
pengujian
Kesimpulan
1 No Rekening
tidak diisi,
data lain
diisi.
Kemudian
klik
Konfirmasi
No Rekening
: (Kosong)
Sistem akan
menolak akses
dan
menampilkan
“Gagal
Konfirmasi.
Harap Lengkapi
Form”
Sesuai
harapan
Valid
2 No Rekening
diisi dengan
huruf, data
lain diisi
dengan benar
kemudian
klik
Konfirmasi
No Rekening
: abcdefgh
Sistem akan
menolak akses
dan
menampilkan
“Gagal
Konfirmasi.
Silahkan Isi
Dengan Benar”
Sesuai
harapan
Valid
3 Nama
Nasabah
tidak diisi,
data lain
diisi.
Kemudian
klik
Konfirmasi
Nama
Nasabah :
(kosong)
Sistem akan
menolak akses
dan
menampilkan
“Gagal
Konfirmasi.
Harap Lengkapi
Form”
Sesuai
harapan
Valid
3 Bank tidak
dipilih, data
yang lain
diisi
kemudian
klik
Konfirmasi
Bank :
(Kosong)
Sistem akan
menolak akses
dan
menampilkan
“Gagal
Konfirmasi.
Harap Lengkapi
Form”
Sesuai
harapan
Valid
4 Tanggal Tanggal Sistem akan Sesuai Valid
97
Pembayaran
tidak diisi,
data yang
lain diisi
kemudian
klik
Konfirmasi
Pembayaran :
(kosong)
menolak akses
dan
menampilkan
“Gagal
Konfirmasi.
Harap Lengkapi
Form”
harapan
5 Tanggal
pembayaran
diisi dengan
format salah,
data yang
lain diisi
dengan benar
kemudian
klik
Konfirmasi
Tanggal
Pembayaran :
12-11-2017
Sistem akan
menolak akses
dan
menampilkan
“Gagal
Konfirmasi.
Silahkan Isi
Dengan Benar”
Sesuai
harapan
Valid
6 Semua data
diisi dengan
lengkap dan
benar
kemudian
klik
Konfirmasi
No. Rekening
: 1234567
Nama
Nasabah :
Mega Utami
Bank : BNI
Tanggal
Pembayaran :
2017-02-02
`Sistem
menerima akses
dan akan
menampilkan
“Terima Kasih
Atas
Konfirmasinya”
Sesuai
harapan
Valid
98
5. Pengujian Terhadap Form Login Admin
Tabel III.15
Tabel Form Login Admin
No Skenario
Pengujian
Test case Hasil yang
diharapkan
Hasil
pengujian
Kesimpulan
1 Username
dan
password
tidak diisi
kemudian
klik login
Username:
(Kosong)
Password :
(kosong)
Sistem akan
menolak akses
dan menampilkan
“LOGIN
GAGAL !
ULANGI LAGI”
Sesuai
harapan
Valid
2 Username
diisi dan
password
tidak diisi,
kemudian
klik login
Username:
teti
Password :
(kosong)
Sistem akan
menolak akses
dan menampilkan
“LOGIN
GAGAL !
ULANGI LAGI”
Sesuai
harapan
Valid
3 Username
tidak diisi
dan
password
diisi,
kemudian
klik login
Username:
kosong
Password :
teti
Sistem akan
menolak akses
dan menampilkan
“LOGIN
GAGAL !
ULANGI LAGI”
Sesuai
harapan
Valid
4 Username
diisi dan
password,
kemudian
klik login
Username
: teti
Password :
teti
Sistem menerima
akses login dan
masuk kehalaman
beranda admin
Sesuai
harapan
Valid