Page 1
26
BAB III
PEMBAHASAN
3.1. Analisis Kebutuhan
Pada saat ini mengenal sistem informasi berbasis web atau e-commerce adalah
suatu peluang cara berpromosi yang sangat efektif dan efisien. Memasang dan
membangun aplikasi penjualan berbasis web mempunyai banyak keuntungan bagi
pelaku e-commerce tersebut yaitu menjadi suatu media untuk memberikan
berbagai macam informasi mengenai penjualan barang yang akan dijual dan
kemudahan dalam bertransaksi bagi pengguna sehingga bisa dikatakan
menguntungkan satu sama lain. Manfaat dari digunakannya sistem informasi
penualan ini dapat mempermudah proses penjualan dan promosi, menekan biaya
barang dan jasa serta dapat meningkatkan kepuasan konsumen yang menyangkut
kecepatan untuk mendapatkan barang yang dibutuhkan dengan standar kualitas
yang baik dan sesuai dengan harganya. Dalam perancangan ini penulis membuat
sistem informasi berupa e-commerce yang sederhana, penulis mengidentifikasikan
kebutuhan berdasarkan kebutuhan pengguna dan kebutuhan sistem yang akan
dibangun untuk mencapai tujuan.kebutuhan tersebut antara lain :
Page 2
27
A. Kebutuhan Pengguna
1. Admin
a. Admin mengelola seluruh data seperti menambah, edit, hapus,
update, dan pencarian
b. Admin dapat menghapus member
c. Admin dapat melihat konfirmasi pembayaran pembeli
d. Admin dapat melihat transaksi pemesanan pembeli
e. Admin melakukan konfirmasi status pembayaran pembeli
f. Admin dapat melihat data pemesanan barang
2. Member
a. Member dapat login
b. Member dapat melihat semua produk baju didalam website
c. Member dapat melakukan pembelian produk baju didalam website
d. Member dapat melihat histori transaksi
e. Member dapat melihat info pengiriman
f. Member melakukan konfirmasi pembayaran
3. Pengunjung
a. Pengunjung dapat mendaftar sebagai member
b. Pengunjung bisa melakukan pencarian
c. Pengunjung dapat melihat informasi produk, profil dan cara beli
Page 3
28
B. Kebutuhan Sistem
1. Security
a) Dilengkapi password login admin untuk menggunakan sistem
informasi website nya dan password login database untuk
menggunakan database nya.
b) Logout admin untuk menghindari suatu manipulasi data.
c) Dilengkapi password login member untuk melakukan pembelian
baju di website toko baju ini.
d) Logout member untuk menghindari suatu manipulasi data.
Page 4
29
3.2. Rancangan Antar Muka
Perancangan sistem dan perangkat lunak dalam rancangan website
penjualan Toko Baju ini menggunakan pemrograman terstruktur, rancangan
database menggunakan XAMPP, rancangan representasi antarmuka
menggunakan Macromedia Dreamweaver 8 dan rancangan struktur navigasi
website menggunakan struktur navigasi campuran.
1. Rancangan Antar Muka Login Admin
Gambar III.1.
Rancangan Antar Muka Login Admin
User :
Password :
Kode :
Kode
xxxxxxxxxxxxxxx
xxxxxxxxxxxxxxx
xxxxxxxxxxxxx
enter
HEADER
FOOTER
Page 5
30
2. Rancangan Antar Muka Index Admin
Gambar III.2.
Rancangan Antar Muka Index Admin
HEADER
Master Data Data admin + Tambah data Pencarian: Reset
No. User Nama
1. xxxxxxxx xxxxx edit del
2. xxxxxxxx xxxxxxxx edit del
Halaman
Admin
Customer
Kategori Baju
Merk Baju
Baju
Proses Transaksi
CARI
Page 6
31
3. Rancangan Antar Muka Data Customer
Gambar III.3.
Rancangan Antar Muka Data Customer
HEADER
Master Data Data Customer
Pencarian: Reset No. Email Nama Alamat telepon
1. [email protected] Xxxxxxxx Xxxxxxxxx Xxxxxx
2. [email protected] xxxxxxxxxx Xxxxxxxx xxxxx
Halaman
Admin
Customer
Kategori Baju
Merk Baju
Baju
Proses Transaksi
CARI
Page 7
32
4. Rancangan Antar Muka Tambah Data Kategori Baju
Gambar III.4.
Rancangan Antar Muka Tambah Data kategori Baju
HEADER
Cari
HEADER
Master Data DATA KATEGORI BAJU
Kategori Baju : Pencarian : Reset
No. Kategori Baju
1. xxxxxx Edit Del
2. xxxxxx Edit Del
Halaman
Admin
Customer
Kategori Baju
Merk Baju
Baju
Proses Transaksi
Simpan
Reset Kembali
Page 8
33
5. Rancangan Antar Muka Tambah Data Merk Baju
Gambar III.5.
Rancangan Antar Muka Tambah Data Merk Baju
HEADER
HEADER
Master Data DATA MERK BAJU
Merk Baju : Pencarian : Reset
No. Merk Baju
1. xxxxxx Edit Del
Halaman
Admin
Customer
Kategori Baju
Merk Baju
Baju
Proses Transaksi
Simpan Reset Kembali
Cari
Page 9
34
6. Rancangan Antar Muka Tambah Data Baju
DADDDD
Gambar III.6.
Rancangan Antar Muka Tambah Data Baju
HEADER
Cari
HEADER
Master Data
DATA BAJU
Nama Baju :
Kategori Baju :
Merk Baju :
Foto :
Warna :
Ukuran :
Harga : Rp.
Keterangan :
Stok :
Pencarian : Reset
Nama Baju Kategori Merk Stok
xxxx xxxx xxxx xx Edit Del
Halaman
Admin
Customer
Kategori Baju
Merk Baju
Baju
Proses Transaksi
No file chosen Choose File
Simpan Reset
Page 10
35
7. Rancangan Antar Muka Data Pemesanan
Gambar III.7.
Rancangan Antar Muka Data Pemesanan
HEADER HEADER
Master Data Data Customer
Pencarian: Reset No. Tanggal Email Nama Status
1. xxxxxx [email protected] xxxxx
Halaman
Admin
Customer
Kategori Baju
Merk Baju
Baju
Proses Transaksi
Page 11
36
8. Rancangan Antar Muka Log In Member
Gambar III.8.
Rancangan Antar Muka Log In Member
MEMBER
Email :
Password :
KATEGORI
Baju Dewasa
Baju Anak
SEARCH
CALENDAR
Juli 2017
M S S R K J S
1 2 3 4 5 6 7
8 9 10 11 12 13 14
Header
Beranda Tentang Kami Cara Pemesanan Kontak Kami
SELAMAT DATANG di DNCloth
Kami menyediakan baju untuk dewasa dan anak-anak
PENDAFTARAN MEMBER
Email :
Password :
Nama :
Gender : Laki-laki Perempuan
Alamat :
Telepon :
Foto : No File Chosen
xxxxxxxxx
xxxxxxxxx
Cari
FOOTER
Choose File
Daftar Clear
Page 12
37
9. Rancangan Antar Muka Profil Member
Gambar III.9.
Rancangan Antar Muka Profil Member
MEMBER
Selamat Sore, Suka
Keranjang Belanja
History Transaksi
Keluar
KATEGORI
Baju Dewasa
Baju Anak
SEARCH
CALENDAR
Juli 2017
M S S R K J S
1 2 3 4 5 6 7
8 9 10 11 12 13 14
Header
Beranda Tentang Kami Cara Pemesanan Kontak Kami
SELAMAT DATANG di DNCloth
Kami menyediakan baju untuk dewasa dan anak-anak
Profil Customer
Email :
Nama :
Gender :
Alamat :
Telephon/ Handphone :
PIC
FOOTER
PIC
Kata Kunci
Cari
Page 13
38
10. Rancangan Antar Muka Produk
Gambar. III.10.
Rancangan Antar Muka Produk
Header
MEMBER
Selamat Sore, Suka
Keranjang Belanja
History Transaksi
Keluar
KATEGORI
Baju Dewasa
Baju Anak
SEARCH
CALENDAR
Juli 2017
M S S R K J S
1 2 3 4 5 6 7
8 9 10 11 12 13 14
SELAMAT DATANG di DNCloth
Kami menyediakan baju untuk dewasa dan anak-anak
Produk Baru
Xxxxxx Xxxxxx
Kategori : xxxx Kategori : xxxx
Harga : xxxx Harga : xxxx
Detail | Beli Detail | Beli
Xxxxxx Xxxxxx
Kategori : xxxx Kategori : xxxx
Harga : xxxx Harga : xxxx
Detail | Beli Detail | Beli
FOOTER
PIC
Kata Kunci
Cari
PIC
PIC
PIC
PIC
Beranda Tentang Kami Cara Pemesanan Kontak Kami
Page 14
39
11. Rancangan Antar Muka Kategori
Gambar III.11.
Rancangan Antar Muka Kategori
Header
MEMBER
Selamat Sore, Suka
Keranjang Belanja
History Transaksi
Keluar
KATEGORI
Baju Dewasa
Baju Anak
SEARCH
CALENDAR
Juli 2017
M S S R K J S
1 2 3 4 5 6 7
8 9 10 11 12 13 14
SELAMAT DATANG di DNCloth
Kami menyediakan baju untuk dewasa dan anak-anak
Kaos
Xxxxxx Xxxxxx
Kategori : xxxx Kategori : xxxx
Harga : xxxx Harga : xxxx
Detail | Beli Detail | Beli
Halaman : 1
FOOTER
PIC
Kata Kunci
PIC
PIC
Cari
Beranda Tentang Kami Cara Pemesanan Kontak Kami
Page 15
40
12. Rancangan Antar Muka Hasil Pencarian
Gambar III.12.
Rancangan Antar Muka Hasil Pencarian
Header
MEMBER
Selamat Sore, Suka
Keranjang Belanja
History Transaksi
Keluar
KATEGORI
Baju Dewasa
Baju Anak
SEARCH
CALENDAR
Juli 2017
M S S R K J S
1 2 3 4 5 6 7
8 9 10 11 12 13 14
SELAMAT DATANG di DNCloth
Kami menyediakan baju untuk dewasa dan anak-anak
Hasil Pencarian
Xxxxxx Xxxxxx
Kategori : xxxx Kategori : xxxx
Harga : xxxx Harga : xxxx
Detail | Beli Detail | Beli
FOOTER
PIC
PIC
PIC
Cari
Beranda Tentang Kami Cara Pemesanan Kontak Kami
Page 16
41
13. Rancangan Antar Muka Detail Barang
Gambar III.13.
Rancangan Antar Muka Detail Barang
MEMBER
Selamat Sore, Suka
Keranjang Belanja
History Transaksi
Keluar
KATEGORI
Baju Dewasa
Baju Anak
SEARCH
CALENDAR
Juli 2017
M S S R K J S
1 2 3 4 5 6 7
8 9 10 11 12 13 14
SELAMAT DATANG di DNCloth
Kami menyediakan baju untuk dewasa dan anak-anak
Koko
Xxxxxx
Koko
Merk : xxxxxx
Kategori : xxxxxx
Stok : xxxxxx
Harga : xxxxxx
PIC
Beranda Tentang Kami Cara Pemesanan Kontak Kami
Header
FOOTER
PIC
Cari
Beli Kembali
Page 17
42
14. Rancangan Antar Muka Keranjang Belanja
Gambar III.14.
Rancangan Antar Muka Keranjang Belanja
Beranda Tentang Kami Cara Pemesanan Kontak Kami
Header
MEMBER
Selamat Sore, Suka
Keranjang Belanja
History Transaksi
Keluar
KATEGORI
Baju Dewasa
Baju Anak
SEARCH
CALENDAR
Juli 2017
M S S R K J S
1 2 3 4 5 6 7
8 9 10 11 12 13 14
SELAMAT DATANG di DNCloth
Kami menyediakan baju untuk dewasa dan anak-anak
Keranjang Belanja
FOOTER
PIC
Kata Kunci
NO Nama Baju Harga Jumlah Subtotal
1. xxxxxxx xxxxxxxx xxxxx
Grand Total xxx
1
Belanja Lagi Selesai Belanja
Cari
Page 18
43
15. Rancangan Antar Muka Konfirmasi Belanja
Gambar III.15
Rancangan Antar Muka Konfirmasi Belanja
Header
MEMBER
Selamat Sore, Suka
Keranjang Belanja
History Transaksi
Keluar
KATEGORI
Baju Dewasa
Baju Anak
SEARCH
CALENDAR
Juli 2017
M S S R K J S
1 2 3 4 5 6 7
8 9 10 11 12 13 14
SELAMAT DATANG di DNCloth
Kami menyediakan baju untuk dewasa dan anak-anak
Tujuan Pengiriman
Barang akan dikirim ke alamat berikut, harap di isi
dengan alamat yang benar dan valid.
Tujuan : Dalam Kota Luar Kota
Alamat :
PIC
Beranda Tentang Kami Cara Pemesanan Kontak Kami
FOOTER
Kata Kunci Kirim
Cari
Page 19
44
16. Rancangan Antar Muka Tampilan Transaksi
Gambar III.16.
Rancangan Antar Muka Tampilan Transaksi
Header
MEMBER
Selamat Sore, Suka
Keranjang Belanja
History Transaksi
Keluar
KATEGORI
Baju Dewasa
Baju Anak
SEARCH
CALENDAR
Juli 2017
M S S R K J S
1 2 3 4 5 6 7
8 9 10 11 12 13 14
SELAMAT DATANG di DNCloth
Kami menyediakan baju untuk dewasa dan anak-anak
Data Pemesanan Kode Pemesanan :
Hari, Tanggal :
Nama Customer :
Tujuan :
Alamat Pengirim :
Status :
No. Nama Baju Harga Jumlah Subtotal
1. Xxxxxx Rp. Xxxx x Rp. xxxxxx
Grand Total Rp. xxxxx
Biaya Pengiriman Dalam Kota Rp. xxxxx
Total Biaya Rp. xxxxx
1. Segera lakukan pembayaran ke rekening kami:
BCA 0331490252 an: Suwondo
MANDIRI 1440012113475 an: Suwondo
BNI 0050365393 an: Suwondo
BRI 32070101897533 an: Suwondo
2. Setelah melakukan pembayaran, segera lakukan
Konfirmasi di sini
3. Barang akan dikirim paling lambat 3 hari setelah
pembayaran.
4. Apabila anda tidak melakukan pembayaran dalam 3 hari,
maka data order anda akan kami hapus(transaksi batal)
FOOTER
PIC
Kata Kunci
Export PDF Print Cari
Beranda Tentang Kami Cara Pemesanan Kontak Kami
Page 20
45
17. Rancangan Antar Muka Konfirmasi Pembayaran
Gambar III.17.
Rancangan Antar Muka Konfirmasi Pembayaran
Header
MEMBER
Selamat Sore, Suka
Keranjang Belanja
History Transaksi
Keluar
KATEGORI
Baju Dewasa
Baju Anak
SEARCH
CALENDAR
Juli 2017
M S S R K J S
1 2 3 4 5 6 7
8 9 10 11 12 13 14
SELAMAT DATANG di DNCloth
Kami menyediakan baju untuk dewasa dan anak-anak
Tanggal Transfer :
Bank Rekening Asal :
Nama Pemilik Rekening Asal :
Jumlah Dana Dikirim :
FOOTER
PIC
Kata Kunci
Kirim
Cari
Beranda Tentang Kami Cara Pemesanan Kontak Kami
Page 21
46
18. Rancangan Antar Muka Cara Pemesanan
Gambar III.18.
Rancangan Antar Muka Cara Pemesanan
Header
MEMBER
Selamat Sore, Suka
Keranjang Belanja
History Transaksi
Keluar
KATEGORI
Baju Dewasa
Baju Anak
SEARCH
CALENDAR
Juli 2017
M S S R K J S
1 2 3 4 5 6 7
8 9 10 11 12 13 14
SELAMAT DATANG di DNCloth
Kami menyediakan baju untuk dewasa dan anak-anak
Cara Pemesanan
1. Langkah pertama yang harus anda lakukan adalah
Login dengan menggunakan nama pengguna dan
sandi yang telah anda daftarkan sebelumnya.
2. Klik pada tombol Beli pada produk yang ingin anda
pesan.
3. Produk yang anda pesan akan masuk kedalam
Keranjang Belanja. Anda dapat melakukan
perubahan jumlah produk yang diinginkan dengan
mengganti angka di kolom Jumlah, kemudian klik
tombol Update. Sedangkan untuk menghapus sebuah
produk dari Keranjang Belanja, klik tombol X yang
berada di kolom paling kanan.
4. Jika sudah selesai, klik tombol Selesai, maka akan
tampil form untuk pengisian data customer/pembeli.
5. Setelah data pembeli selesai diisikan, klik tombol
Proses, maka akan tampil data pembeli beserta
produk yang dipesan (jika diperlukan catat nomer
ordernya). Dan juga ada total pembayaranserta nomer
rekening pembayaran.
6. Lakukan pembayaran melalui transfer ke rekening
bank kami (tambahkan angka unik pada saat transfer,
misal : Rp. 2.000.000 menjadi Rp. 2.000.088 untuk
memudahkan pengecekan dalam rekening kami) :
BCA 0331490252 an: Suwondo
MANDIRI 1440012113475 an: Suwondo
BNI 0050365393 an: Suwondo
BRI 32070101897533 an: Suwondo
7. Apabila pembayaran telah terlaksana, kami akan
memproses pengiriman produk yang anda pesan.
FOOTER
PIC
Cari
Beranda Tentang Kami Cara Pemesanan Kontak Kami
Page 22
47
3.3. Rancangan Basis Data
A. Entity Relationship Diagram (ERD)
pemesanan
mendetailkan
Alamat_pengiriman
Tujuan_pengiri
man
email
tanggal
Id_pemesanan
Tanggal_pengiriman Bank_konfirmasi
Nama_konfirmasi
Jumlah_konfir
masi
status
Id_pemesanan
Id_baju
jumlah
subtotal
Melakukan
Id_pemesanan
email
pemesanan
Email
Password Nama
Gender
Foto
Alamat
Telpon
_bajuId_baju
Nama
Id_baju_kateg
ori
Id_baju_merk
Warna Ukuran Harga
Foto
Keterangan
Stok
Mempunyai
Id_baju Id_baju_merk
Memiliki
Id_baju Id_baju_kategori
_baju_merk
Id_baju_merk
Nama
_baju_kategori
Id_baju_kategori
Nama
Gambar III.19.
Entity Relationship Diagram
Page 23
48
B. Logical Record Structure (LRS)
_pemesanan
Id_pemesanan *
tanggal
email *
tujuan_pengiriman
alamat_pengiriman
tanggal_pengiriman
bank_konfirmasi
nama_konfirmasi
jumlah_koonfirmasi
status
_customer
email *
password
nama
gender
foto
alamat
telpon
_pemesanan_detail
id_pemesanan *
id_baju *
jumlah
subtotal
_baju_kategori
id_baju_kategori
nama
_baju
id_baju
nama
id_baju_kategori
id_baju_merk
warna
ukuran
harga
foto
keterangan
stok
tanggal
_baju_merk
id_baju_merk
nama
m
m
mm
I
I
I
I
I
Gambar III.20.
Logical Record Structure
Page 24
49
C. Spesifikasi File
Spesifikasi file merupakan penjelasan mengenai bentuk-bentuk file
database yang
digunakan untuk pengolahan proses dari suatu sistem. File-file ini tersimpan
pada database toko online dengan parameter-parameter sebagi berikut :
1. Spesifikasi File Admin
Nama File : _admin
Akronim : Untuk menyimpan data admin
Tipe : File master
Organisasi File : Index Sequential
Akses File : Random
Media : Hardisk
Panjang Record : 105
Kunci Field : -
Software : Mysql
No Elemen Data Nama Field Tipe Size Keterangan
1. Usernames Usernames Varchar 15
2. Password Password Varchar 50
3. Nama Nama Varchar 40
Tabel III.1. Spesifikasi File Admin
Page 25
50
2. Spesifikasi File Baju
Nama File : Baju
Akronim : Untuk menyimpan data baju
Tipe : File master
Organisasi File : Index Sequential
Akses File : Random
Media : Hardisk
Panjang Record : 249
Kunci Field : Id_baju
Software : Mysql
No Elemen Data Nama Field Tipe Size Keterangan
1. Id_baju Id_baju Varchar 20 Primary
Key
2. Nama Nama Varchar 40
3. Id_baju_kategori Id_baju_kategori Varchar 20
4. Id_baju_merk Id_baju_merk Varchar 20
5. Warna Warna Varchar 40
6. Ukuran Ukuran Varchar 5
7. Harga Harga Double
Page 26
51
8. Foto Foto Varchar 100
9. Keterangan Keterangan Text
10. Stok Stok Tinyint 4
11. Tanggal Tanggal Datetime
Tabel III.2. Spesifikasi File Baju
3. Spesifikasi File Kategori Baju
Nama File : _baju_kategori
Akronim : Untuk menyimpan data kategori baju
Tipe : File master
Organisasi File : Index Sequential
Akses File : Random
Media : Hardisk
Panjang Record : 60
Kunci Field : Id_baju_kategori
Software : Mysql
No Elemen Data Nama Field Tipe Size Keterangan
1. Id_baju_kategori Id_baju_kategori Varchar 20 Primary
Key
2. Nama Nama Varchar 40
Tabel III.3 Spesifikasi File Kategori Baju
Page 27
52
4. Spesifikasi File Merk Baju
Nama File : _baju_merk
Akronim : Untuk menyimpan data merk baju
Tipe : File master
Organisasi File : Index Sequential
Akses File : Random
Media : Hardisk
Panjang Record : 60
Kunci Field : Id_baju_merk
Software : Mysql
No Elemen Data Nama Field Tipe Size Keterangan
1. Id_baju_merk Id_baju_merk Varchar 20 Primary Key
2. Nama Nama Varchar 40
Tabel III.4. Spesifikasi File Merk Baju
Page 28
53
5. Spesifikasi File Customer
Nama File : _customer
Akronim : Untuk menyimpan data customer
Tipe : File master
Organisasi File : Index Sequential
Akses File : Random
Media : Hardisk
Panjang Record : 380
Kunci Field : -
Software : Mysql
No Elemen Data Nama Field Tipe Size Keterangan
1. Email Email Varchar 40
2. Password Password Varchar 50
3. Nama Nama Varchar 40
4. Gender Gender Enum 20
5. Foto Foto Varchar 100
6. Alamat Alamat Varchar 100
7. Telpon Telpon Double 30
Tabel III.5. Spesifikasi File Customer
Page 29
54
6. Spesifikasi File Pemesanan
Nama File : _pemesanan
Akronim : Untuk menyimpan data pemesanan
Tipe : File master
Organisasi File : Index Sequential
Akses File : Random
Media : Hardisk
Panjang Record : 460
Kunci Field : Id_pemesanan
Software : Mysql
No Elemen Data Nama Field Tipe Size Keterangan
1. Id_pemesanan Id_pemesanan Varchar 20 Primary
Key
2. Tanggal Tanggal Datetim
e
3. Email Email Varchar 40
4. Tujuan_pengirim
an
Tujuan_pengirim
an
Varchar 100
5. Alamat_pengirim
an
Alamat_pengirim
an
Varchar 100
Page 30
55
6. Tanggal_konfirm
asi
Tanggal_konfirm
asi
Datetim
e
7. Bank_konfirmasi Bank_konfirmasi Varchar 100
8. Nama_konfirmasi Nama_konfirmasi Varchar 100
9. Jumlah_konfirma
si
Jumlah_konfirma
si
Double
10. Status Status Enum
Tabel III.6. Spesifikasi File Pemesanan
Page 31
56
7. Spesifikasi File Detail Pemesanan
Nama File : _pemesanan_detail
Akronim : Untuk menyimpan data detail pemesanan
Tipe : File master
Organisasi File : Index Sequential
Akses File : Random
Media : Hardisk
Panjang Record : 45
Kunci Field : Id_pemesanan
Software : Mysql
No Elemen Data Nama Field Tipe Size Keterangan
1. Id_pemesanan Id_pemesanan Varchar 20 Primary Key
2. Id_baju Id_baju Varchar 20
3. Jumlah Jumlah Tinyint 4
4. Subtotal Subtotal Double
Tabel III.7. Spesifikasi Detail Pemesanan
Page 32
57
3.4. Rancangan Struktur Navigasi
Struktur navigasi yang digunakan adalah struktur navigasi campuran.
Struktur navigasi campuran merupakan gabungan dari ketiga struktur yaitu
linier, non linier dan hirarki. Struktur navigasi ini juga bisa disebut dengan
struktur navigasi bebas. Struktur navigasi ini juga dapat digunakan dalam
pembuatan website karena struktur ini dapat memberikan interaksi yang lebih
tinggi.
A. Struktur Navigasi Pengunjung
Index
Beranda Tentang Kami Cara Pemesanan Kontak Kami
Gambar III.21.
Struktur Navigasi Pengunjung
Page 33
58
B. Struktur Navigasi Member
Login
Beranda Tentang KamiCara
PemesananKontak Kami Keranjang Belanja History Transaksi Keluar
Gambar III.22.
Struktur Navigasi Member
C. Struktur Navigasi Admin
Login
Admin customer Kategori baju Merk baju Baju Pemesanan Keluar
Gambar III.23.
Struktur Navigasi Admin
Page 34
59
3.5. Implementasi dan Pengujian Unit
A. Implementasi Rancangan Antar Muka
Implementasi rancangan antar muka pada aplikasi website e-commerce
berdasarkan hasil dari rancangan antar muka.
1. Halaman Login Admin
Administror harus melakukan login terlebih dahulu agar bisa masuk ke
sistem admin dan mengelola sistem admin.
Gambar III.24.
Halaman Login Admin
Page 35
60
2. Halaman Home Admin
Setelah login administrator dibawa ke halaman menu utama admin.
Gambar III.25. Halaman Home Admin
3. Halaman Admin
Pada halaman ini admin dapat mengganti User Name, Password dan
Nama.
Gambar III.26. Halaman Admin
Page 36
61
4. Halaman Customer Admin
Pada halaman ini admin dapat melihat data customer, halaman ini
berfungsi untuk melihat profil customer.
Gambar III.27. Halaman Customer Admin
5. Halaman Kategori Baju Admin
Pada halaman ini admin dapat menambah data kategori baju.
Gambar III.28. Halaman Kategori Baju Admin
Page 37
62
6. Halaman Merk Baju Admin
Pada halaman ini admin dapat menambah data merk baju.
Gambar III.29.
Halaman Merk Baju Admin
Page 38
63
7. Halaman Baju Admin
Pada halaman ini admin dapat menambahkan data baju seperti nama baju,
kategori, merk, ukuran, warna, keterangan, stok dan harga.
Gambar III.30.
Halaman Baju Admin
Page 39
64
8. Halaman Pemesanan Admin
Pada halaman ini admin dapat melihat daftar pemesanan, halaman ini
berfungsi untuk mencari nama, melihat pembayaran, mengganti status
pemesanan dan menghapus pesanan.
Gambar III.31.
Halaman Pemesanan Admin
Page 40
65
9. Halaman Index / Home User
Pada halaman ini user dapat melihat index (tampilan awal website) user
juga dapat login dan daftar baru.
Gambar III.32. Halaman Index
Page 41
66
10. Halaman Index Tentang Kami
Pada halaman ini pengunjung dan member dapat melihat ulasan tentang
toko kami.
Gambar III.33.
Halaman Index Tentang Kami
Page 42
67
11. Halaman Index Cara Pemesanan
Pada halaman ini pengunjung dan member dapat melihat cara-cara untuk
melakukan pemesanan barang.
Gambar III.34.
Halaman Index Cara Pemesanan
Page 43
68
12. Halaman Index Kontak Kami
Pada halaman ini pengunjung dan member dapat melihat nama, alamat
dan nomor telpon pemilik.
Gambar III.35.
Halaman Index Kontak Kami
Page 44
69
B. Spesifikasi Sistem Komputer
Berikut ini adalah spesifikasi perangkat keras (Hardware) dan
perangkat lunak (Software) yang dibutuhkan untuk mengimplementasikan
aplikasi e-commerce.
1. Spesifikasi Perangkat Keras (Hardware)
a. Server
1) CPU
a) Processor Dual Core
b) RAM 2 GB
c) Hard Disk 214GB
2) Monitor Graphics 3150
3) Internet Connection 5 mbps
4) Mouse
5) Keyboard
b. Client
1) CPU
a) Processor Dual Core
b) Ram 2GB
c) Hard Disk 214GB
2) Monitor dengan resolusi layar 1024x768
3) Internet Connections 3 mbps
4) Mouse
5) Keyboard
2. Spesifikasi Perangkat Lunak (Software)
1. Server
a. Sistem Operasi : Microsoft Windows 7
b. Aplikasi Web Server : Apache
c. Aplikasi Web Browser : Mozilla Firefox, Google Chrome
2. Client
a. Sistem Operasi : Microsoft Windows 7
b. Aplikasi Web Browser : Mozilla Firefox, Google Chrome
Page 45
70
3.6. Pengujian Unit
Pengujian unit terhadap program yang dibuat menggunakan blackbox
testing untuk memperoleh proses masukan dan keluaran program.
A. Pengujian Terhadap Form Login Admin
No Skenario
Pengujian Test Case
Hasil yang
diharapkan
Hasil
Pengujian Kesimpulan
1 mengosongkan
username dan
password
kemudian klik
tombol enter
username:
(Kosong)
password:
(Kosong)
Sistem akan
menolak
lalu akan
kembali
seperti awal
dan berubah
kode
captcha“
Sesuai
harapan Valid
2 Mengisikan
username dan
password tidak
di isi kemudian
klik tombol enter
username:
(admin)
password:
(Kosong)
Sistem akan
menolak
lalu akan
kembali
seperti awal
dan
berubah
kode
captcha“
Sesuai
harapan Valid
3 username tidak
di isi dan
password di isi
kemudian klik
tombol enter
username:
(kosong )
password:
(admin)
Sistem akan
menolak
lalu akan
kembali
seperti awal
dan berubah
kode
captcha“
Sesuai
harapan Valid
4 Mengetikan
username dengan
benar dan
mengisi
password dengan
salah kemudian
klik tombol enter
Username:
(adm)
(benar )
Password:
adm
(salah)
Sistem akan
menolak
lalu akan
berubah
kode
captcha“
Sesuai
harapan Valid
Page 46
71
5 Mengetikan
username dan
password dengan
data yang benar
kemudian klik
tombol enter
Username:
admin
(benar )
Password:
admin
(benar)
Sistem
menerima
akses Login
dan masuk
ke form
menu utama
admin.
Sesuai
harapan Valid
TABEL III.8. Pengujian Terhadap Form Login Admin
B. Pengujian Terhadap Form Admin
No Skenario
Pengujian
Test Case Hasil yang
diharapkan
Hasil
Pengujian
Kesimpulan
1 Mengosongkan
semua field
kemudian klik
simpan
User:
(kosong)
Password:
(kosong)
Nama:
(kosong)
Akan
menampilka
n pesan
“User harus
diisi
Nama harus
diisi”
Sesuai
harapan
Valid
2 Mengisi semua
field kemudian
klik simpan
User:
(ada)
Password:
(ada)
Nama:
(ada)
Sistem akan
menerima
akses
kemudian
menampilka
n “Tambah
data
berhasil”
Sesuai
harapan
Valid
TABEL III.9. Pengujian Terhadap Form Admin
Page 47
72
C. Pengujian Terhadap Form Edit Customer
No Skenario
Pengujian
Test Case Hasil yang
diharapkan
Hasil
Pengujian
Kesimpulan
1 Memilih hapus
kemudian klik
Status:
Yakin
dihapus?
Akan
menampilka
n “Hapus
data
berhasil”
Sesuai
harapan
Valid
TABEL III.10. Pengujian Terhadap Form Edit Customer
D. Pengujian terhadap Form Edit Kategori Baju
No Skenario
Pengujian
Test Case Hasil yang
diharapkan
Hasil
Pengujian
Kesimpulan
1 Mengosongkan
semua field
kemudian klik
simpan
Kategori
Baju:
(kosong)
Akan
menampilka
n pesan “
Kategori
harus
dipilih”
Sesuai
harapan
Valid
2 Mengisi semua
field kemudian
klik simpan
Kategori
Baju:
(ada)
Sistem akan
menerima
akses
kemudian
menampilka
n “Tambah
data
berhasil”
Sesuai
harapan
Valid
TABEL III.11. Pengujian Terhadap Form Kategori Baju
Page 48
73
E. Pengujian Terhadap form Edit Merk Baju
No Skenario
Pengujian
Test Case Hasil yang
diharapkan
Hasil
Pengujian
Kesimpulan
1 Mengosongkan
semua field
kemudian klik
simpan
Merk
Baju:
(kosong)
Akan
menampilka
n pesan “
Merk harus
dipilih”
Sesuai
harapan
Valid
2 Mengisi semua
field kemudian
klik simpan
Merk
Baju:
(ada)
Sistem akan
menerima
akses
kemudian
menampilka
n “Tambah
data
berhasil”
Sesuai
harapan
Valid
TABEL III.12. Pengujian Terhadap form Edit Merk Baju
Page 49
74
F. Pengujian Terhadap form Edit Baju
No Skenario
Pengujian
Test Case Hasil yang
diharapkan
Hasil
Pengujian
Kesimpulan
1 Mengosongka
n semua field
kemudian
klik simpan
Nama barang:
(kosong)
Kategori
barang:
(kosong)
Merk Barang:
(kosong)
Foto:
(kosong)
Warna:
(kosong)
Ukuran:
(kosong)
Harga:
(kosong)
Keterangan:
(kosong)
Stok:
(kosong)
Akan
menampilkan
pesan “Nama
harus diisi
Kategori harus
diisi
Merk harus diisi
Warna harus
diisi
Ukuran harus
diisi
Harga harus
diisi
Stok harus
diisi”
Sesuai
harapan
Valid
2 Mengisi
semua field
kemudian
klik simpan
Nama barang:
(ada)
Spesifikasi
Sistem akan
menerima akses
kemudian
menampilkan
“data berhasil di
Sesuai
harapan
Valid
Page 50
75
barang:
(ada)
Harga:
(ada)
Stok:
(ada)
Gambar:
(ada)
simpan”
TABEL III.13. Pengujian Terhadap form Edit Baju
G. Pengujian Terhadap form Edit Pemesanan
No Skenario
Pengujian
Test Case Hasil yang
diharapkan
Hasil
Pengujian
Kesimpula
n
1 Memilih ganti
status
pemesanan
kemudian klik
Status
pemesana
n:
(Confirm/
Tutup)
Akan
menampilkan
update status
pemesanan
berubah
Sesuai
harapan
Valid
2 Memilih hapus
kemudian klik
Status:
delete
Akan
menampilkan
“Yakin
dihapus”
Sesuai
harapan
Valid
TABEL III.14. Pengujian Terhadap form Edit Pemesanan
Page 51
76
H. Pengujian Terhadap Form Login User
No Skenario
Pengujian
Test Case Hasil yang
diharapkan
Hasil
Pengujian
Kesimpulan
1 Mengosongkan
semua field
kemudian klik
login
Email:
(kosong)
Password:
(kosong)
Akan
menampilka
n pesan
“email atau
password
tidak valid”
Sesuai
harapan
Valid
2 Mengisi Email
kemudian klik
login
Email:
(ada)
Password:
(kosong)
Akan
menampilka
n pesan
“email atau
password
tidak valid”
Sesuai
harapan
Valid
3 Mengisi Email
dan password
kemudian klik
login
Email:
(ada)
Password:
(ada)
Sistem
menerima
akses Login
dan masuk
ke form
menu utama
user.
Sesuai
harapan
Valid
TABEL III.15. Pengujian Terhadap form Login User
Page 52
77
I. Pengujian Terhadap Form Member Baru
No Skenario
Pengujian
Test Case Hasil yang
diharapkan
Hasil
Pengujian
Kesimpulan
1 Mengosongkan
semua field
kemudian klik
simpan
Email:
(kosong)
Password:
(kosong)
Nama:
(kosong)
Alamat:
(kosong)
Telpon:
(kosong)
Akan
menampilka
n pesan
“ada
inputan yg
belum
valid”
Sesuai
harapan
Valid
2 Mengisi semua
field kemudian
klik simpan
Email:
(ada)
Password:
(ada)
Nama:
(ada)
Alamat:
(ada)
Telpon:
(ada)
Sistem akan
menerima
akses
kemudian
menampilka
n
“Terimakasi
h telah
melakukan
pendaftaran,
silahkan
masuk
sebagai
member
area dan
selamat
berbelanja.”
Sesuai
harapan
Valid
TABEL III.16. Pengujian Terhadap Form Member Baru