BAB III PEMBAHASAN - repository.bsi.ac.id · Gambar III.2 Spesifikasi Rancangan Login. 27 3....

24

BAB III

PEMBAHASAN

3.1. Analisa Kebutuhan

3.1.1. Tinjauan Kasus

Seiring perkembangan teknologi saat ini, bukan hal yang aneh apabila orang-

orang mendapatkan informasi, berita, pengetahuan dan teknologi dengan

menggunakan fasilitas internet. Dengan adanya internet kita bisa mendapatkan

informasi diseluruh dunia. Website penjualan jam tangan ini sebuah homepage

yang berisi semua informasi mengenai jam tangan. Dengan adanya website ini

pengunjung dapat melakukan pemesanan tanpa harus datang ke toko, melainkan

dapat dilakukan secara online. Maka dari itu, penulis mencoba membuat website

penjualan jam tangan dengan tujuan memudahkan masyarakat dalam

mendapatkan informasi mengenai jam tangan, kami tawarkan beserta harga yang

terjangkau dan dapat memiliki kepuasan bagi para pelanggan atau customer agar

tidak mengecewakan dan menjadi perbincangan yang positif.

3.2. Perancangan Perangkat Lunak

Rancangan tampilan website merupakan gambaran secara singkat namun

cukup menjelaskan bagaimana cara atau langkah-langkah dari perancangan

website. Dalam hal ini penulis akan menjelaskan letak-letak komposisi mengenai

rancangan website yang akan dibuat berikut ini.

25

3.2.1 Rancangan Antar Muka

Halaman ini dapat di akses oleh semua pengunjung, tetapi bagi pengunjung

yang ingin melakukan transaksi atau berbelanja harus mempunyai akun user.

Pada halaman ini akan dirancang dengan tampilan yang menarik.

1. Spesifikasi Rancangan Daftar

Halaman daftar merupakan halaman yang berupa form pengisian data

untuk pengunjung yang ingin mempunyai akun user yang nantinya akun user

tersebut dapat digunakan bertransaksi atau berbelanja. Rancangan tampilan

sebagai berikut :

Gambar III.1 Spesifikasi Rancangan Daftar

26

2. Spesifikasi Rancangan Login User dan Menu Transaksi

Login user ini berfungsi bagi setiap pengunjung yang sudah memiliki

akun user dan juga terdapat menu untuk pendaftaran baru. Selain itu, ada

menu Transaksi yang akan ditampilkan setelah user berhasil login, menu

tersebut adalah menu untuk mengakses halaman keranjang belanja dan menu

untuk menampilkan daftar transaksi yang sudah pernah dilakukan user.

Rancangan tampilan sebagai berikut :

Gambar III.2

Spesifikasi Rancangan Login

27

3. Spesifikasi Rancangan Halaman Home User

Halaman ini bisa disebut juga sebagai halaman utama karena pada saat

masuk, halaman inilah yang akan tampil sebelum halaman lainnya.

Rancangan tampilan sebagai berikut :

Gambar III.3

Spesifikasi Rancangan Halaman Home User

28

4. Spesifikasi Rancangan Website Halaman Admin

Halaman ini hanya dapat di akses oleh admin setalah admin berhasil login.

Pada halaman admin ini akan berfungsi untuk mengatur semua tampilan halaman

pada halaman user dan mengatur hasil transaksi pesanan user.

a. Spesifikasi Rancangan Login admin

Halaman ini sebagai halaman login untuk admin sebelum memasuki

halaman berikutnya atau halaman ruang kerja admin. Halaman login admin

dibuat terpisah dari halaman user. Rancangan tampilan sebagai berikut :

Gambar III.4

Spesifikasi Rancangan Login Admin

b. Spesifikasi Rancangan Home Admin

Halaman ini bisa disebut juga sebagai halaman awal pada halaman

admin karena pada saat admin berhasil login, halaman ini yang akan tampil

sebelum halaman yang lainnya. Rancangan tampilan sebagai berikut :

29

Gambar III.5

Spesifikasi Rancangan Home Admin

30

pelanggan

kd_pelanggan

nm_pelanggan

kelamin

email

no_telepon

username

password

tgl_daftar

pemesanan melakukan

no_pemesanan

kd_pelanggan

tgl_pemesanan

menentukan

provinsi

kd_provinsi

nm_provinsi

biaya_kirim

nama_penerima

alamat_lengkap

kd_provinsi

kota

kode_pos

no_telepon

Status_bayar memiliki

berisi

id

no_pemesanan

kd_barang

harga

jumlah

barang kd_barang

nm_barang

Harga_modal

kategori memiliki

kd_kategori nm_kategori

Harga_jual

stok

keterangan

file_gambar

kd_kategori

3.2.2. Rancangan Basis Data

A. Entity Relationship Diagram (ERD)

Gambar III.6

Entity Relationship Diagram

31

B. Logical Relational Structure (LRS)

Gambar III.7

Logical Relational Structure

pelanggan

provinsi

pemesanan

pemesanan_item barang

kd_pelanggan nm_pelanggan kelamin email no_telepon username password tgl_daftar

kd_provinsi nm_provinsi biaya_kirim

no_pemesanan kd_pelanggan tgl_pemesanan nama_penerima alamat_lengkap kd_provinsi kota kode_pos no_telepon status_bayar

id no_pemesanan kd_barang harga jumlah

kd_barang nm_barang harga_modal harga_jual stok keterangan file_gambar kd_kategori

kategori

kd_kategori nm_kategori

1

M 1 M

1

M

1

1 1

M

32

C. Spesifikasi File

Spesifikasi file menjelaskan tentang file-file yang akan digunakan dalam

rancangan website yang diajukan dan sebagai media penyimpanan data dari proses

yang terjadi pada rancangan website. Adapun spesifikasi file-file sebagai berikut :

1. Spesifikasi File Admin

Nama Tabel : admin

Akronim : Admin

Fungsi : Penyimpanan data admin

Tipe File : File Master

Organisasi File : Index Sequential

Akses File : Random

Media : Harddisk

Panjang Record : 231 karakter

Kunci Field : id

Software : MySQL

Table III.1

Spesifikasi File Admin

No. Elemen Data Nama Field Type Size Keterangan

1. Id Admin Id int 2 Auto_increment

Primary key

2. Username Username varchar 30

3. Password Password varchar 200

33

2. Spesifikasi File Pelanggan

Nama Tabel : pelanggan

Akronim : Pelanggan

Fungsi : Penyimpanan data pelanggan



Akses File : Random

Media : Harddisk


Kunci Field : kd_pelanggan

Software : MySQL

Table III.2

Spesifikasi File Pelanggan

No. Elemen Data Nama Field Tipe Size Keterangan

1. Kode Pelanggan kd_pelanggan char 6 Primary key

2. Nama Pelanggan nm_pelanggan varchar 100

3. Kelamin Kelamin enum (‘Laki-

laki’,’Perempu

an’)

4. Email Email varchar 100

5. No. Telepon no_telepon varchar 20

6. Username Username varchar 20

7. Password Password varchar 100

34

8. Tanggal Daftar tgl_daftar date

3. Spesifikasi File Barang

Nama Tabel : barang

Akronim : Barang

Fungsi : Penyimpanan data barang



Akses File : Random

Media : Harddisk


Kunci Field : kd_barang

Software : MySQL

Table III.3

Spesifikasi File Barang


1. Kode Barang kd_barang char 5 Primary key

2. Nama Barang nm_barang varchar 100

3. Harga Modal harga_modal int 12

4. Harga Jual harga_jual int 12

5. Stok Stok int 4

6. Keterangan keterangan text Indeks

7. File Gambar file_gambar varchar 100

35

8. Kode Kategori kd_kategori char 4

4. Spesifikasi File Kategori

Nama Tabel : kategori

Akronim : Kategori

Fungsi : Penyimpanan data kategori



Akses File : Random

Media : Harddisk


Kunci Field : kd_kategori

Software : MySQL

Table III.4

Spesifikasi File Kategori


1. Kode Kategori kd_kategori char 4 Primary key

2. Nama Kategori nm_kategori varchar 100

5. Spesifikasi File Provinsi

Nama Tabel : provinsi

Akronim : Provinsi

36

Fungsi : Penyimpanan data provinsi



Akses File : Random

Media : Harddisk


Kunci Field : kd_provinsi

Software : MySQL

Table III.5

Spesifikasi File Provinsi


1. Kode Provinsi kd_provinsi char 3 Primary key

2. Nama Provinsi nm_provinsi varchar 100

3. Biaya Kirim biaya_kirim int 12

6. Spesifikasi File Pemesanan

Nama Tabel : pemesanan

Akronim : Pemesanan

Fungsi : Penyimpanan data pemesanan

Tipe File : File Pemesanan


Akses File : Random

37

Media : Harddisk


Kunci Field : no_pemesanan

Software : MySQL

Table III.6

Spesifikasi File Pemesanan


1. Nomor pemesanan no_pemesanan char 8 Primary key

2. Kode pelanggan kd_pelanggan char 6

3. Tanggal pemesanan tgl_pemesanan date

4. Nama penerima nama_penerima varchar 60

5. Alamat lengkap alamat_lengkap varchar 200

6. Kode provinsi kd_provinsi char 3

7. Kota Kota varchar 100

8. Kode pos kode_pos varchar 6

9. No. telepon no_telepon varchar 20

10. Status bayar status_bayar Enum

(‘Pesan’,’

Lunas’,’B

atal’)

7. Spesifikasi File Pemsanan Item

Nama Tabel : pemesanan item

Akronim : Pemesanan Detail

38

Fungsi : Penyimpan data pemesanan

Tipe File : File Pemesanan


Akses File : Random

Media : Harddisk


Kunci Field : id

Software : MySQL

Table III.7

Spesifikasi File Pemesanan Item


1. Id Id int 4 Auto_increment

Primary key

2. No. pemesanan no_pemesanan char 8

3. Kode barang kd_barang char 5

4. Harga Harga int 12

5. Jumlah Jumlah int 3

8. Spesifikasi File konfirmasi

Nama Tabel : konfirmasi

Akronim : konfirmasi pemesanan

Fungsi : Penyimpanan data konfirmasi

Tipe File : File Transaksi

39


Akses File : Random

Media : Harddisk


Kunci Field : id (auto_increment)

Software : MySQL

Table III.8

Spesifikasi File Konfirmasi


1. Id Id int 4 Auto_increment

2. Nomor

pemesanan

no_pemesanan varchar 8

3. Nama pelanggan nm_pelanggan varchar 100

4. Jumlah transfer jumlah_transfer int 12

5. Keterangan Keterangan text

6. Tanggal Tanggal date

9. Spesifikasi File Keranjang

Nama Tabel : keranjang

Akronim : keranjang belanja

Fungsi : Penyimpanan data keranjang

Tipe File : File Transaksi


40

Akses File : Random

Media : Harddisk


Kunci Field : id (auto_increment)

Software : MySQL

Table III.9

Spesifikasi File Keranjang


1 Id id int 5 Auto_increment

2 Kode Barang kd_barang char 5

3 Harga harga int 12

4 Jumlah jumlah int 3

5 Tanggal tanggal date

6 Kode Pelanggan kd_pelanggan char 6

3.2.3. Rancangan Struktur Navigasi

Jenis struktur navigasi yang digunakan adalah struktur navigasi campuran.

Struktur navigasi yang terdapat pada aplikasi e-commerce ini di bagi menjadi dua

yaitu struktur navigasi user dan struktur navigasi admin.

1. Struktur Navigasi User

41

Gambar III.8

Struktur Navigasi User

Index

Login Home Product category

Product Cari How to Buy Confirmation Contact Us

Akun

Daftar

Logout Tampil transaksi

keranjang

Hal Daftar

Daftar belanja

Tambah produk

Selasai belanja

Hal konfirmasi

Hal contact us

Hal home

Semua produk

Hasil cari

Hal cara belanja

Hal by merk

Detail produk

42

2. Struktur Navigasi Admin

Gambar III.9

Struktur Navigasi Admin

3.3. Implementasi dan Pengujian Unit

3.3.1. Implementasi

A. Implementasi Rancangan Antar Muka

Implementasi rancangan antar muka pada website berdasarkan hasil

rancangan antar muka.

Login

Beranda Password Admin

Data Merk

Data Barang

Data Provinsi

Data Pelanggan

Pemesanan Barang

Konfirmasi Transfer

Laporan

Hal Beranda

Ganti password

Tampil Data Merk

Tampil Data

Barang

Tampil Data

Provinsi

Tampil Data

Pelanggan

Tampil Pemesanan

Barang

Tampil Konfirmasi

Transfer

Tampil Laporan

Edit Data Merk

Hapus Data Merk

Tambah Data

Barang

Edit Data

Barang

Hapus Data

Barang

Tambah Data Merk

Tambah Data

Provinsi

Edit Data

Provinsi

Hapus Data

Provinsi

Hapus Data

Pelanggan

Detail Pemesanan

Barang

Hapus Konfirmasi

Transfer

Detail Laporan

Logout

43

1. Halaman Login Admin

Admin harus login terlebih dahulu untuk dapat mengelola data-data

yang tersedia.

Gambar III.10

Halaman Login Admin

44

2. Halaman Home Admin

Setelah admin melakukan login dan berhasil maka akan muncul

tampilan menu utama yang memiliki beberapa menu untuk menginput atau

mengupdate data.

Gambar III.11

Halaman Home Admin

45

3. Halaman Menu Password Admin

Admin dapat mengganti password admin melalui menu ini. Selain itu

admin dapat melakukan secara manual dari phpMyAdmin, yaitu dari fasilitas

change lalu tinggal ubah password-nya dengan memilih tipe data MD5.

Gambar III.12

Halaman Password Admin

46

4. Halaman Menu Data Merk

Admin dapat menginput, mengupdate dan menghapus data merk

melalui menu ini. Data merk dipakai untuk pengelompokkan data barang

sehingga pencarian barang bagi pelanggan akan semakin mudah.

Gambar III.13

Halaman Data Merk

47

5. Halaman Tambah Data Merk

Halaman ini berfungsi untuk menambah data merk.

Gambar III.14

Halaman Tambah Data Merk

48

6. Halaman Edit Data Merk

Halaman ini berfungsi untuk mengubah data merk.

Gambar III.15

Halaman Edit Data Merk

49

7. Halaman Menu Data Barang

Admin dapat menginput, mengupdate dan menghapus data barang

melalui menu ini. Menu data barang ini dipakai untuk menyimpan data

produk yang dijual pada toko online, semua data barang akan disimpan

berdasarkan nama merk yang dimilikinya, sehingga memudahkan para

pelanggan untuk mendapatkan produk yang dijual di toko online.

Gambar III.16

Halaman Menu Data Barang

50

8. Halaman Tambah Data Barang

Halaman ini berfungsi untuk menambah data barang.

Gambar III.17

Halaman Tambah Data Barang

51

9. Halaman Edit Data Barang

Halaman ini berfungsi untuk mengubah data barang.

Gambar III.18

Halaman Edit Data Barang

52

10. Halaman Menu Data Provinsi

Admin dapat menginput, mengupdate dan menghapus data provinsi

melalui menu ini. Menu data provinsi ini dipakai untuk membedakan

besarnya biaya kirim barang dari lokasi toko online berada menuju nama

provinsi tujuan yang dimiliki oleh pelanggan saat ada transaksi pemesanan.

Gambar III.19

Halaman Menu Data Provinsi

53

11. Halaman Tambah Data Provinsi

Halaman ini berfungsi untuk menambah data provinsi.

Gambar III.20

Halaman Tambah Data Provinsi

54

12. Halaman Edit Data Provinsi

Halaman ini berfungsi untuk mengubah data provinsi.

Gambar III.21

Halaman Edit Data Provinsi

55

13. Halaman Menu Data Pelanggan

Halaman ini berfungsi untuk mendata pelanggan.

Gambar III.22

Halaman Menu Data Pelanggan

56

14. Halaman Menu Pemesanan Barang

Halaman ini berfungsi untuk memanage pemesanan barang.

Gambar III.23

Halaman Menu Pemasanan Barang

57

15. Halaman Detail Pemesanan Barang

Gambar III.24

Halaman Detail Pemesanan Barang

58

16. Halaman Menu Konfirmasi Transfer

Gambar III.25

Halaman Menu Konfirmasi Transfer

59

17. Halaman Menu Laporan

Halaman ini berfungsi untuk melihat laporan data provinsi, laporan

data merk, laporan data barang dan lengkap dengan laporan data pemesanan

barang.

Gambar III.26

Halaman Menu Laporan

60

18. Halaman Detail Laporan Data Provinsi

Gambar III.27

Halaman Detail Laporan Data Provinsi

61

19. Halaman Detail Laporan Data Merk

Gambar III.28

Halaman Detail Laporan Data Merk

62

20. Halaman Detail Laporan Data Barang

Gambar III.29

Halaman Detail Laporan Data Barang

63

21. Halaman Detail Laporan Data Pelanggan

Gambar III.30

Halaman Detail Laporan Data Pelanggan

64

22. Halaman Detail Laporan Data Masuk – Periode

Gambar III.31

Halaman Detail Laporan Data Masuk – Periode

65

23. Halaman Detail Laporan Data Lunas – Tanggal

Gambar III.32

Halaman Detail Laporan Data Lunas – Tanggal

66

24. Halaman Detail Laporan Data Lunas – Periode

Gambar III.33

Halaman Detail Laporan Data Lunas - Periode

25. Halaman Awal User

Pada halaman ini user bisa melakukan login atau mendaftar menjadi

pelanggan baru untuk bisa melakukan pemesanan barang.

67

Gambar III.34

Halaman Awal User

68

26. Halaman Pendaftaran Pelanggan

Pada halaman ini pelanggan bisa memiliki akun login yang dapat

dipakai untuk bertransaksi atau memesan barang yang dijual di website.

Gambar III.35

Halaman Pendaftaran Pelanggan

69

27. Halaman Keranjang Belanja

Halaman ini berfunsi untuk menampung data barang secara sementara

selama proses transaksi yang dilakukan oleh pelanggan masih belum

diselesaikan.

Gambar III.36

Halaman Keranjang Belanja

70

28. Halaman Konfirmasi Belanja

Halaman ini berfungsi untuk menampilkan daftar barang yang sudah

dipilih untuk dikoreksi oleh pelanggan, kemudian pelanggan bisa melengkapi

proses pemesanan barang dengan mengisi data alamat pengiriman.

Gambar III.37

Halaman Konfirmasi Belanja

71

29. Halaman Tampil Transaksi

Halaman ini berfungsi untuk mencetak detil transaksi.

Gambar III.38

Halaman Tampil Transaksi

72

30. Halaman Konfirmasi Pembayaran

Setelah pelanggan melakukan transfer pembayaran, pelanggan harus

melakukan konfirmasi pembayaran dengan cara mengisi form konfirmasi

pembayaran.

Gambar III.39 Halaman Konfirmasi Pembayaran

73

B. Spesifikasi Sistem Komputer

Berikut ini adalah spesifikasi perangkat keras dan perangkat lunak minimum

yang dibutuhkan untuk mengimplementasikan website penjualan jam tangan.

1. Spesifikasi Perangkat Keras

a. Admin

1) Laptop / CPU

a) Minimum processor Pentium IV 2.00 Ghz.

b) Minimum RAM 1 GB.

c) Minimum Harddisk 40 GB.

2) Monitor dengan resolusi layar minimum 1024x768

3) Mouse

4) Keyboard

b. Pelanggan

1) Laptop / CPU

a) Minimum processor Pentium IV 1.80 Ghz.

b) Minimum RAM 512 MB.

c) Minimum Harddisk 20 GB.

2) Mouse

3) Keyboard

4) Monitor dengan resolusi layar minimum 1024x768

2. Spesifikasi Perangkat Lunak

a. Admin

74

1) Sistem operasi yang umum digunakan seperti : windows,

machintos, dll.

2) Aplikasi web editor menggunakan Adobe Dreamweaver CS6.

3) Aplikasi web server Xampp yang terdiri dari beberapa

komponen, diantaranya:

a) Aplikasi Apache server v2

b) Aplikasi PHP server v5

c) Aplikasi MySQL server v5

d) Aplikasi phpMyAdmin v3

4) Aplikasi web browser seperti Mozila firefox, Google chrome,

Internet explorer, dll.

b. Pelanggan

1) Sistem operasi yang umum digunakan seperti: Microsoft

Windows atau Linux (Ubuntu,fedora, dll).

2) Aplikasi web browser seperti Mozila firefox, Google chrome,

Internet explorer, dll.

3.3.2. Pengujian Unit

A. Pengujian Terhadap Form Login Admin

Table III.10

Hasil Pengujian Black Box Testing Halaman Login Admin

75

No. Skenario

Pengujian

Test Case Hasil yang

diharapkan

Hasil

pengjian

Kesimpulan

1. Username dan password tidak diisi, kemudian klik tombol login.

Username : (kosong) Password: (kosong)

Sistem akan menolak akses user dan menampilkan: “ Error “ 1. Data Username tidak boleh kosong ! 2. Data Password tidak boleh kosong !

Sesuai harapan

Valid

2. Mengetikan username dan password tidak diisi atau kosong kemudian klik tombol login.

Username: (xxxx) Password: (kosong)

Sistem akan menolak akses user dan menampilkan: “ Error “ 1. Data password tidak boleh kosong !

Sesuai

harapan

Valid

3. username tidak diisi atau kosong dan password diisi kemudian klik tombol login.

Username: (kosong) Password: (xxxx)

Sistem akan menolak akses user dan menampilkan: “ Error “ 1. Data username tidak boleh kosong !

Sesuai

harapan

Valid

4. Mengetikan salah satu kondisi yang salah pada username atau password, kemudian klik tombol login.

Username: (xxxx) Password: (1234) salah

Sistem akan menolak akses dan kembali ke menu login

Sesuai

harapan

Valid

5. Mengetikan username dan password dengan data yang benar kemudian klik tombol login.

Username: (xxxx) Password: (xxxx)

Sistem menerima akses login dan kemudian akan menampilkan menu utama admin.

Sesuai

harapan

Valid

76

B. Pengujian Terhadap Form Login User

Tabel III.11

Hasil Pengujian Black Box Testing Halaman Login User

No. Skenario

Pengujian

Test Case Hasil yang

diharapkan

Hasil

pengjian

Kesimpulan

1. Username dan password tidak diisi, kemudian klik tombol login.

Username : (kosong) Password: (kosong)

Sistem akan menolak akses user dan menampilkan: “ LOGIN ANDA SALAH “ Kesalahan input: 1. Data Username kosong, silahkan isi dengan benar 2. Data Password kosong, silahkan isi dengan benar 3. Data username dan password yang anda masukkan belum benar.

Sesuai harapan

Valid

2. Mengetikan username dan password tidak diisi atau kosong kemudian klik tombol login.

Username: (xxxx) Password: (kosong)

Sistem akan menolak akses user dan menampilkan: “ LOGIN ANDA SALAH“ Kesalahan input: 1. Data password kosong, silahkan isi dengan benar. 2. Data username dan password yang anda masukkan belum benar.

Sesuai

harapan

Valid

3. username tidak diisi atau kosong dan password diisi kemudian klik

Username: (kosong) Password: (xxxx)

Sistem akan menolak akses user dan menampilkan: “

Sesuai

harapan

Valid

77

tombol login. LOGIN ANDA SALAH “ Kesalahan input: 1. Data username kosong, silahkan isi dengan benar. 2. data username dan password yang anda masukkan belum benar.

4. Mengetikkan salah satu kondisi yang salah pada username atau password, kemudian klik tombol login.

Username: (xxxx) Password: (xxxx) salah

Sistem akan menolak akses user dan menampilkan: “ LOGIN ANDA SALAH “ Kesalahan input: 1. Data username dan password yang anda masukkan belum benar.

Sesuai

harapan

Valid

5. Mengetikan username dan password dengan data yang benar kemudian klik tombol login.

Username: (xxxx) Password: (xxxx)

Sistem menerima akses login dan kemudian akan masuk pada menu produk..

Sesuai

harapan

Valid

BAB III PEMBAHASAN - repository.bsi.ac.id · Gambar III.2 Spesifikasi Rancangan Login. 27 3....

Documents

Transcript of BAB III PEMBAHASAN - repository.bsi.ac.id · Gambar III.2 Spesifikasi Rancangan Login. 27 3....