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


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


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 File : File Kategori

Akronim : kategori

Fungsi : Untuk menyimpan dan menampilkan data kategori



62

Media : Hard disk


Kunci Filed : id_kategori

Software : MySQL

Tabel III.2

Spesifikasi File Kategori


1 ID Kategori id_kategori int 5 Primary key

2 Nama Kategori nama_kategori varchar 20

3. Spesifikasi File Konfirmasi


Nama File : File Konfirmasi

Akronim : konfirmasi

Fungsi : menyimpan dan menampilkan data konfirmasi

Tipe File : File Transaksi


Media : Hard disk


Kunci Filed : id_konfirm

Software : MySQL

63

Tabel III.3

Spesifikasi File Konfirmsi


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 File : File Kota

Akronim : kota

Fungsi : menyimpan dan menampilkan data kota



Media : Hard disk


Kunci Filed : id_kota

Software : MySQL

64

Tabel III.4

Spesifikasi File Kota


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 File : File Pelanggan

Akronim : pelanggan

Fungsi : menyimpan dan menampilkan data pelanggan



Media : Hard disk


Kunci Filed : id_pelanggan

Software : MySQL

Tabel III.5

Spesifikasi File Pelanggan


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 File : File Pesan

Akronim : pesan

Fungsi : menyimpan dan menampilkan data pesan



Media : Hard disk


Kunci Filed : notransaksi

Software : MySQL

Tabel III.6

Spesifikasi File Pesan


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 File : File Isi Pesan

Akronim : pesan_isi

Fungsi : menyimpan dan menampilkan data isi pesanan



Media : Hard disk


Software : MySQL

Tabel III.7

Spesifikasi File Isi Pesan


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 File : File Produk

Akronim : produk

Fungsi : menyimpan dan menampilkan data isi produk



Media : Hard disk


Software : MySQL

Tabel III.8

Spesifikasi File Produk


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 File : File Testimonial

68

Akronim : testimonial

Fungsi : menyimpan dan menampilkan data isi Testimonial



Media : Hard disk


Software : MySQL

Tabel III.9

Spesifikasi File Testimonial


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 File : File Transaksi Rinci

Akronim : transaksirinci

Fungsi : menampilkan data isi detail transaksi



69

Media : Hard disk


Software : MySQL

Tabel III.10

Spesifikasi File Transaksi Rinci


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


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

mailto:[email protected]

mailto:[email protected]

95

Password :

1234

Re

Password :

1234

3. Pengujian Terhadap Tombol Beli

Tabel III.13

Tabel Form Tombol Pembelian

No Skenario

Pengujian


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


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


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

bab iii pembahasan - repository.bsi.ac.id · 4) komputer, laptop, atau notebook 5) mouse dan...

Documents