23
BAB III
PEMBAHASAN
3.1. Analisa Kebutuhan
Hal pertama yang perlu dilakukan dalam analisa kebutuhan website adalah
menentukan dan mengungkapkan kebutuhan website. Kebutuhan website terbagi
menjadi 2 (dua) yaitu Kebutuhan Pengguna dan Kebutuhan Sistem, yang
diperlukan untuk mencapai tujuan yang ingin dicapai.
3.1.1. Kebutuhan Pengguna
Kebutuhan fungsional adalah kebutuhan-kebutuhan yang memiliki
keterkaitan langsung dengan website. Kebutuhan fungsional dari website ini
meliputi :
1. Kebutuhan Pengguna
Pada tahap pembuatan website ini, meliputi beberapa kebutuhan pengguna adalah
sebagai berikut :
a. Melihat tampilan halaman website
b. Mencari dan membeli produk yang diinginkan
c. Melihat keranjang belanja secara langsung
d. Mendapatkan informasi data transaksi
e. Mengisi pembayaran
24
2. Kebutuhan Administrator
Pada tahap pembuatan website ini, meliputi beberapa kebutuhan administrator
adalah sebagai berikut :
a. Melakukan login Admin ke dalam website
b. Mengelola data produk
c. Mengelola data pesan
d. Mengelola data order
e. Mengelola data member
f. Mengelola data laporan penjualan
g. Melakukan logout
3.1.2. Kebutuhan Sistem
Kebutuhan sistem adalah kebutuhan yang tidak secara langsung terkait
dengan fitur tertentu didalam website.
1. Kebutuhan Perangkat Keras
Perangkat keras yang digunakan dalam membangun website ini adalah sebagai
berikut:
a. Processor AMD A8-7410 QUADCORE X4 2.2-2.5GHz
b. RAM 4 GB
c. Harddisk 500 GB
d. Perangkat standar input dan output
2. Kebutuhan Perangkat Lunak
Adapun perangkat lunak yang digunakan dalam membangun website ini adalah
sebagai berikut :
a. Sistem Operasi Windows 10
b. Adobe Dreamweaver CS5
25
c. Web Browser Mozilla Firefox, Google Chrome, Internet Explorer, Uc
Browser.
d. MySQL dengan phpMyAdmin 3.1.3.1
26
3.2 Perancangan Perangkat Lunak
Dalam pembahasan rancangan perangkat lunak, maka dibuat rancangan
sebagai berikut :
3.2.1 Rancangan Antar Muka
A. Halaman Frontend
1. Rancangan Antar Muka Halaman Beranda
Rancangan Antar Muka Halaman Beranda
Merupakan halaman utama yang keluar saat pertama kali website
dikunjungi, yang berisi menu-menu berupa link yang menghubungkan
halaman ke halaman lain. Konsep dari halaman beranda seperti gambar
dibawah ini :
Gambar III.1
Rancangan Antar Muka Halaman (Index) Beranda
27
2. Rancangan Antar Muka Halaman Detail Produk
Merupakan halaman yang berisi detail Produk Costumer mengklik
menu produk Dalam halaman ini. Konsep dari halaman detail produk
adalah seperti gambar dibawah ini :
Gambar III.2
Rancangan Halaman Detail Produk
28
3. Rancangan Antar Muka Halaman Keranjang Belanja
Merupakan halaman yang berisi pesanan produk yang ingin di beli
oleh pelanggan. Konsep dari halaman keranjang belanja adalah seperti
gambar dibawah ini:
Gambar III.3
Rancangan Halaman Keranjang Belanja
29
4. Rancangan Antar Muka Halaman Pemesanan Produk
Merupakan halaman yang berisi data dari pelanggan yang
mempunyai pemesanan produk,order dan lain lain.
Konsep dari halaman lihat pesan seperti gambar dibawah ini:
Gambar III.4
Rancangan Halaman Pemesanan Produk
30
5. Rancangan Antar Muka Halaman Daftar Konfirmasi Pemesanan
Rancangan Antar Muka Halaman Konfirmasi Pemesanan
Merupakan halaman yang berisi form konfirmasi transfer pembayaran
dimana pelanggan selesai melakukan pemesanan produk harus melakukan
konfirmasi barang terdahulu
seperti gambar dibawah ini:
Gambar III.5
Rancangan Halaman Daftar Konfirmasi Pemesanan
31
6. Rancangan Antar Muka Halaman Konfirmasi pemesanan
Rancangan Antar Muka Halaman Konfirmasi Pemesanan
Merupakan halaman yang berisi form konfirmasi transfer pembayaran
dimana pelanggan selesai melakukan pemesanan produk harus melakukan
konfirmasi transfer. Konsep dari halaman konfirmasi transfer adalah
seperti gambar dibawah ini:
Gambar III.6
Rancangan Halaman Konfirmasi Pemesanan
32
7. Rancangan Antar Muka Halaman Kategori Produk
Merupakan halaman yang berisi produk-produk yang di tampilkan
di halaman semua produk untuk di jual. Konsep dari halaman produk
adalah seperti gambar dibawah ini :
Gambar III.7
Rancangan Halaman Kategori Produk
33
B. Halaman Backend
1. Rancangan Antar Muka Halaman Login
Merupakan halaman yang berisi form login admin. Konsep dari
halaman login admin adalah seperti gambar berikut:
Gambar III.8
Rancangan Halaman Login Admin
34
2. Rancangan Antar Muka Halaman Beranda
Merupakan halaman yang berisi menu-menu berupa link yang
menghubungkan halaman ke halaman lain. Konsep dari halaman beranda
seperti gambar dibawah ini:
Gambar III.9
Rancangan Halaman Beranda Backend
35
3. Rancangan Antar Muka Halaman Daftar Produk
Merupakan halaman yang berisi input produk-produk lihat data
produk, halaman ini bisa menambah data produk, mengubah data produk
ataupun menghapus data produk. Konsep dari halaman input produk
seperti gambar dibawah ini:
Gambar III.10
Rancangan Halaman Daftar Produk
36
3.2.2 Rancangan Basis Data
A. Entity Relationship Diagram (ERD)
Gambar III.11
Entity Relationship Diagram (ERD)
37
B. Logical Record Structure (LRS)
Gambar III.12
Logical Record Structure
38
C. Spesifikasi File
Spesifikasi file pada website yang penulis rancang membahas mengenai
keseluruhan tabel yang terdapat di dalam database. Di dalam database ini
terdapat beberapa tabel yang berisi field/kolom beserta kunci dari tiap
file/tabel yang ada, sehingga terbentuklah data yang saling berhubungan.
Berikut adalah penjelasan dari spesifikasi file tersebut :
1. Spesifikasi File Tabel Users
Nama File : users
Akronim : user
Fungsi : Sebagai tempat penyimpanan data user
Tipe File : File Master
Organisasi File : Indexed Sequential
Akses File : Random
Media : Harddisk
Panjang Record : 376 Karakter
Kunci Field : id
Software : Mysql
39
Tabel III.1
Spesifikasi File Tabel Users
No. Nama Field Type Size Ket
1 Id Int 11 Primary key
2 Full_name Varchar 30
3 Email varchar 30
4
5
Password
Join_date
Varchar
Date
255
6 Last_login Date
7 Permissions Varchar 50
2. Spesifikasi File Tabel product
Nama File : product
Akronim : Produk
Fungsi : Sebagai tempat penyimpanan data Produk
Tipe File : File Master
Organisasi File : Indexed Sequential
Akses File : Random
Media : Harddisk
Panjang Record : 269 Karakter
Kunci Field : id
Software : Mysql
40
Tabel III.2
Spesifikasi File Tabel Product
No. Nama Field Type Size Ket
1 Id Int 11 Primary key
2 Title varchar 100
3 Price Int 50
4 Last_price Int 50
5
6
7
Brand
Categories
Image
int
varchar
Text
11
50
-
8 Description Text -
9 Featured Tinyint 4
10 Size Text -
11 Deleted Tinyint 4
3. Spesifikasi File Tabel Transactions
Nama File : Transactions
Akronim : Transaksi
Fungsi : Sebagai tempat penyimpanan data Transaksi
Tipe File : File Master
Organisasi File : Indexed Sequential
Akses File : Random
Media : Harddisk
Panjang Record : 1242 Karakter
Kunci Field : id
Software : Mysql
41
Tabel III.3
Spesifikasi File Tabel Transactions
No. Nama Field Type Size Ket
1 Id Int 11 Primary key
2 Cart_id Cart 11 Foreign key
3 user_id Varchar 60
4 Full_name Varchar 50
5 Email Varchar 175
6 Street Varchar 30
7 Street2 Varchar 30
8 City Varchar 175
9 State Varchar 175
10 Zip_Code Varchar 50
11 Country Varchar 175
12 Sub_Total Int 100
13 Tax Int 100
14 Grand_Total Int 100
42
4. Spesifikasi File Tabel Cart
Nama File : Cart
Akronim : Keranjang
Fungsi : Sebagai tempat keranjang pembelian
Tipe File : File Master
Organisasi File : Indexed Sequential
Akses File : Random
Media : Harddisk
Panjang Record : 845 Karakter
Kunci Field : id
Software : Mysql
Tabel III.5
Spesifikasi File Tabel Cart
No. Nama Field Type Size Ket
1 Id Int 11 Primary key
2 Items Text -
3 Expire_date DateTime -
43
5. Spesifikasi File Tabel Brand
Nama File : Brand
Akronim : Merk
Fungsi : Sebagai tempat penyimpanan data merk barang
Tipe File : File Master
Organisasi File : Indexed Sequential
Akses File : Random
Media : Harddisk
Panjang Record : 111 Karakter
Kunci Field : id
Software : Mysql
Tabel III.5
Spesifikasi File Tabel Brand
No. Nama Field Type Size Ket
1 Id Int 11 Primary key
2 Brand Varchar 100
44
6. Spesifikasi File Tabel Categories
Nama File : Categories
Akronim : Katagori
Fungsi : Sebagai tempat penyimpanan data categories
Tipe File : File Master
Organisasi File : Indexed Sequential
Akses File : Random
Media : Harddisk
Panjang Record : 122 Karakter
Kunci Field : id
Software : Mysqli
Tabel III.6
Spesifikasi File Tabel Categories
No. Nama Field Type Size Ket
1 Id Int 11 Primary key
2 Categories Varchar 100
3 Parent Int 11
45
7. Spesifikasi File Tabel Konfimasi
Nama File : Konfirmasi
Akronim : Konfirmasi
Fungsi : Sebagai tempat penyimpanan data Konfirmasi
Tipe File : File Master
Organisasi File : Indexed Sequential
Akses File : Random
Media : Harddisk
Panjang Record : 35 Karakter
Kunci Field : id
Software : Mysqli
Tabel III.7
Spesifikasi File Tabel Konfirmasi
No. Nama Field Type Size Ket
1 Id Int 11 Primary key
2 Transaction_id Int 11
3 paid Int 1
4 shipped Int 1
46
3.2.3 Rancangan Struktur Navigasi
1. Struktur navigasi pada website penjualan peralatan outdoor ini berfungsi
untuk memperlihatkan keseluruhan dari isi website beserta hubungan antar isi.
Website penjualan Sneakers pada halaman frontend dan backend.
a. Struktur Navigasi Frontend
Gambar III.13
Struktur Navigasi Halaman Frontend
47
b. Struktur Navigasi Backend
Gambar III.14
Struktur Navigasi Halaman Backend
3.3 Implementasi dan Pengujian Unit
3.3.1 Implementasi
1. Implementasi Rancangan Antar Muka.
Rancangan Antar Muka pada Website penjualan ini terdiri dari:
a. Halaman Beranda .
Halaman utama ini menampilkan informasi mengenai website
penjualan sneakers dan sepatu. Yang terdiri dari menu utama, produk –
produk terbaru, brand ternama dan lain-lain.
48
Gambar III.15
Halaman Beranda
49
b. Halaman Detail Produk
Pada halaman detail produk menampilkan ulasan atau keterangan dari
produk yang terdiri dari nama produk, merk, harga dan keterangan
lainnya.
Gambar III.16
Halaman Detail Produk
50
c. Halaman Keranjang Belanja
halaman ini menampilkan daftar pemesanan produk sementara yang
bisa diperbaharui oleh pemesan. Pada keranjang belanja ini terdapat
gambar produk, nama produk, jumlah produk yang dipesan, harga
produk, dan total keseluruhan pesanan.
Gambar III.17
Halaman Keranjang Belanja
51
d. Halaman Pemesanan Produk
Pada halaman ini disediakan form untuk mengisi data pemesanan
secara detail.
Gambar III.18
Halaman Pemesanan Produk
e. Halaman Konfirmasi Pemesanan
Halaman ini menampilkan form konfirmasi yang harus diisi ketika
pembeli sudah melakukan pembayaran secara transfer.
52
Gambar III.19
Halaman Konfirmasi Pemesanan
53
f. Halaman Kategori Produk
Halaman ini berisi produk dari kategori produk yang dipilih
Gambar III.20
Halaman Kategori Produk
54
g. Halaman Form Login Admin
Halaman login merupakan syarat akses untuk menampilkan halaman
Admin. Pada halaman ini disediakan form untuk mengisi username
dan password yang benar sesuai database.
Gambar III.21
Halaman Login Admin
55
h. Halaman Beranda Admin
Pada halaman ini terdapat menu dashboard , toko online, statistik,
konfigurasi, dan user. Selain itu juga terdapat tampilan statistik
bulanan dan harian website.
Gambar III.22
Halaman Beranda Admin
56
i. Halaman Input dan Laporan Data Produk.
Halaman ini menampilkan data produk dan form input tambah produk.
Disini admin bisa menambah, menghapus, mengedit produk yang ada.
Gambar III.23
Halaman Input Produk
Gambar III.24
Halaman Laporan Data Produk
j. Halaman Data Pemesanan Produk
57
Halaman ini menampilkan data transaksi penjualan produk yang telah
tersimpan kedalam database.
Gambar III.25
Halaman Data Pemesanan Produk
k. Halaman Data Konfirmasi Pemesanan
Halaman ini menampilkan data konfirmasi pembeli yang sudah
melakukan pembayaran
Gambar III.26
Halaman Data Konfirmasi Pemesanan
58
3.3.2 Pengujian Unit
Pengujian terhadap program yang dibuat menggunakan black box Testing
yang fokus terhadap proses masukan dan keluaran program.
1. Pengujian Form Login
Tabel III.8
Pengujian 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 user
dan
menampilkan
“Username
dan Password
kosong
silakan diisi
Sesuai
Harapan
Valid
2 Mengetikkan
username dan
password tidak diisi
kemudian klik login
Username:
(Admin)
Password:
(kosong)
Sistem akan
menolak
akses user
dan
menampilkan
“silahkan isi
password”
Sesuai
Harapan
Valid
59
3 Username tidak
diisi dan password
diisi kemudian klik
login
Username:
(Kosong)
Passsword:
(admin)
Sistem akan
menolak
akses user
dan
menampilkan
“Kolom email
harus diisi”
Sesuai
Harapan
Valid
4 Mengetikkan salah
satu kondisi salah
pada username atau
password kemudian
klik login
Username:
Admin
(benar)
Password:
1234
(salah)
Sistem akan
menolak
akses user
dan
menampilkan
“Password
anda salah”
Sesuai
Harapan
Valid
5 Mengetikkan
Username dan
Password dengan
benar kemudian
klik login
Username:
(admin)
Password:
(admin)
Sistem
menerima
akses login
User, menuju
halaman
admin
Sesuai
harapan
Valid
60
2. Pengujian Transaksi Pemesanan Produk
Tabel III.9
Pengujian Form Pemesanan Produk
No
.
Skenario Pengujian Test Case Hasil yang
diharapkan
Hasil
pengujian
Kesimpulan
1 Semua kolom tidak
diisi kemudian klik
pesan sekarang
Nama:
(kosong)
Email:
(kosong)
Alamat:
(kosong)
Telepon:
(kosong)
Sistem akan
menampilkan
“field Tidak
boleh
kosong”
Sesuai
Harapan
Valid
2 Semua data diisi,
tapi ada satu kolom
yang tidak diisi,
misal kolom alamat
tidak diisi
kemudian klik
pesan sekarang
Nama:
Arif
(diisi)
Alamat:
(kosong)
Sistem akan
menampilkan
“ field”
Pada kolom
yang tidak
diisi
Sesuai
Harapan
Valid
3 Semua Kolom
Terisi dengan benar
kemudian klik
pesan sekarang
Nama:
(diisi)
Email:
(diisi)
Sistem
menerima
data dan akan
memunculka
Sesuai
Harapan
Valid
61
Alamat:
(diisi)
Dan kolom-
kolom
lainnya diisi
n halaman
invoice
tagihan
pembelian
62
3. Pengujian Input Data Produk
Tabel III.10
Pengujian Form Input Data Produk
No
.
Skenario Pengujian Test Case Hasil yang
diharapkan
Hasil
pengujian
Kesimpulan
1 Semua kolom tidak
diisi kemudian klik
tambah
Title:
(Kosong)
Brand
produk:
(Kosong)
Harga:
(kosong)
Deskripsi:
(kosong)
Sistem akan
menampilkan
“field Tidak
boleh
kosong” pada
setiap kolom
Sesuai
Harapan
Valid
2 Semua data diisi
tapi kolom judul
produk tidak diisi,
kemudain klik
tambah
Title:
(Kosong)
Brand
Produk:
(diisi)
Harga:
(diisi)
Deskripsi:
(diisi)
Sistem akan
menampilkan
“field Tidak
boleh
kosong” pada
kolom judul
produk
Sesuai
Harapan
Valid
3 Hanya kolom judul
yang diisi, selain
Title:
(diisi)
Sistem akan
menampilkan
Tidak
Sesuai
inValid
63
itu tidak diisi
kemudian klik
tambah
Brand
produk:
(kosong)
Harga:
(kosong)
Deskripsi:
(kosong)
“field Tidak
boleh
kosong” pada
semua kolom
yang tidak
diisi
Harapan
4 Semua kolom diisi
kemudian klik
tambah
Title:
(diisi)
Kode
produk:
(diisi)
Harga:
(diisi)
Deskripsi:
(diisi)
Gambar:
(diisi)
Sistem
menerima
dan
menampilkan
data produk
Sesuai
Harapan
Valid