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


>

< 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


>

< 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


>

< 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


>

< 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


>

< SLIDE GAMBAR

DAFTAR BARU

Nama Lengkap

Email

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


>

< SLIDE GAMBAR

Login

Email

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


<

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


> < 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

Email

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


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


Nama Toko


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



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


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


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


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


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


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


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



Akses File : Random

39

Media : Hard Disk


Kunci Field : id_produk

Software : MySQL

Tabel III.3.Spesifikasi File Produk


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



40

Akses File : Random

Media : Hard Disk


Kunci Field : id_pelanggan

Software : MySQL

Tabel III.4. Spesifikasi File Pelanggan


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


Akses File : Random

Media : Hard Disk


Kunci Field : notransaksi

Software : MySQL

Tabel III.5.Spesifikasi File Pesan


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



Akses File : Random

Media : Hard Disk



Software : MySQL

43

Tabel III.6. Spesifikasi File Pesan Isi


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



Akses File : Random

Media : Hard Disk



Software : MySQL

Tabel III.7.Spesifikasi File Transaksi Rinci


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


Akses File : Random

Media : Hard Disk


Kunci Field : id_konfirm

Software : MySQL

Tabel III.8. Spesifikasi File Konfirmasi


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



Akses File : Random

Media : Hard Disk


Kunci Field : id_testi

Software : MySQL

46

Tabel III.9. Spesifikasi File Komentar


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



Akses File : Random

Media : Hard Disk


Kunci Field : id_ongkir

Software : MySQL

47

Tabel III.10. Spesifikasi File Ongkir


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


24. Transaksi penjualan

Gambar III 56.Halaman Laporan Transaksi Penjualan

Gambar III.56. Merupakan halaman laporan Transaksi yang bisa di cetak oleh Admin


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



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



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



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




tombol simpan Nama Nasabah Harapan

Harus diisi

3. Nama Bank tidak Nama Bank: Sistem akan

75




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


tombol simpan Jumlah Harapan

Transfer Harus

diisi

BAB III PEMBAHASAN 3.1. A. · C. Analisa Kebutuhan Perangkat Keras ( Hardware) Perangkat keras yang...

Documents

Transcript of BAB III PEMBAHASAN 3.1. A. · C. Analisa Kebutuhan Perangkat Keras ( Hardware) Perangkat keras yang...