BAB III PEMBAHASAN. a. Admin dapat masuk ke halaman admin dengan mengisi username dan. d. Admin dapat menambahkan produk yang akan dijual.

(1)

39

PEMBAHASAN

3.1. Analisa Kebutuhan

3.1.1. Identifikasi Kebutuhan Pengguna 1. Skenario kebutuhan admin :

a. Admin dapat masuk ke halaman admin dengan mengisi username dan password.

b. Admin dapat mengelola data admin. c. Admin dapat melihat data admin.

d. Admin dapat menambahkan produk yang akan dijual. e. Admin dapat melihat data produk yang akan dijual. f. Admin dapat mengelola data produk yang akan dijual. g. Admin dapat menambahkan kategori produk.

h. Admin dapat melihat data kategori produk. i. Admin dapat melihat data pemesanan barang. j. Admin dapat mengelola data pemesanan barang.

k. Admin dapat mengelola data ongkos kirim untuk pengiriman barang. l. Admin dapat melakukan logout dari web pengelolaan admin (backAnd). 2. Skenarion kebutuhan pembeli :

a. Pembeli dapat melakukan transaksi pembelian produk dengan mendaftar sebagai member atau masuk jika sudah memiliki member.

(2)

b. Pembeli dapat membeli produk setelah masuk dan tampil form keranjang belanja dimana form keranjang dapat dihapus dan diperbaharui data pembeliannya.

c. Pembeli dapat mengisi form pengisian data pembeli dan memilih jasa pengiriman yang tersedia untuk memudahkan dalam proses pengiriman. d. Pembeli dapat mencetak faktur pembelian berupa struk setelah melakukan

proses pengisian data pengiriman.

e. Pembeli dapat melakukan proses konfirmasi pembayaran di ”form” konfirmasi pembayaran yang sudah tersedia.

f. Pelanggan dapat mengisi testimoni. 3. Skenario kebutuhan pengunjung :

a. Pengunjung tidak harus login untuk dapat melihat tampilan awal web.

b. Pengunjung dapat melihat barang tetapi tidak bisa melakukan transaksi pembelian.

c. Pengunjung dapat melihat testimoni. 3.1.2. Identifikasi Kebutuhan Sistem 1. Operasional

a. Perangkat Keras (Hardware)

Untuk merancang dan membuat media informasi berbasis web dibutuhkan perangkat keras agar program aplikasi yang dibuat dapat berjalan dengan baik. Spesifikasi perangkat keras yang digunakan yaitu menggunakan processor Intel core 2 duo 1.8 GHz, Memori 1 GB – 2 GB ,VGA Mobile Intel (R) Express Chipset Family 358 MB.

(3)

b. Perangkat Lunak (Software)

Software atau perangkat lunak yang digunakan untuk mendukung dan merancang pembuatan media informasi berbasis web harus sesuai dengan kebutuhan. Perangkat lunak yang digunakan yaitu menggunakan sistem operasi Microsoft Windows 7 Ultimate 32bit (x86), software untuk perancangan mengunakan Macromedia Dreamweaver 8 dan software untuk mendesain menggunakan Photoshop.

2. Security

a. Dilengkapi password untuk sistem informasi website nya maupun database nya.

b. Logout untuk menghindari suatu manipulasi data. 3. Informasi

a. Digunakan untuk memberitahu apabila suatu input data tidak sesuai yaitu berupa validasi.

b. Digunakan untuk menampilkan cara pembelian, dan cara pembayaran bagi user.

c. Digunakan untuk menampilkan laporan member, laporan barang dan laporan penjualan bagi admin.

3.2. Perancangan Perangkat Lunak

Perancangan sistem dan perangkat lunak dalam rancangan program perancangan sistem penjualan bahan batik online yaitu rancangan antar muka, rancangan basis data dan rancangan struktur navigasi antara lain:

(4)

3.2.1. Rancangan Antar Muka 1. Rancangan Antar Muka Admin

a. Rancangan Antar Muka Login Admin

Header FOOTER BATALKAN LOGIN xxxxxxxx xxxxxxx Username Password Gambar III.1.

Rancangan Antar Muka Login Admin

b. Rancangan Antar Muka Index Admin

Header Footer · Admin · Produk · Kategori · Kurir · Kota · Tarif · Transaksi · Konfirmasi Pembayaran · Hubungi Kami · Laporan · Logout

Selamat datang di Menu Admin KLIK menu kiri untuk mengelola

Gambar III.2.

(5)

c. Rancangan Antar Muka Menu Admin Header Footer · Admin · Produk · Kategori · Kurir · Kota · Tarif · Transaksi · Konfirmasi Pembayaran · Hubungi Kami · Laporan · Logout Menu Admin Username : Password : xxxxxxx xxxxxxx Data Admin Simpan Batal Gambar III.3.

Rancangan Antar Muka Menu Admin d. Rancangan Antar Muka Ganti Pasword Admin

Header Footer · Admin · Produk · Kategori · Kurir · Kota · Tarif · Transaksi · Konfirmasi Pembayaran · Hubungi Kami · Laporan · Logout Username : Password Lama : xxxxxxx xxxxxxx Ubah Password Baru : xxxxxxx Gambar III.4.

(6)

e. Rancangan Antar Muka Menu Produk Header Header · Admin · Produk · Kategori · Kurir · Kota · Tarif · Transaksi · Konfirmasi Pembayaran · Hubungi Kami · Laporan · Logout Simpan Batal Data Produk Telusuri Menu Produk Nama : Deskripsi : Warna : Kategori : Ukuran : Harga : Stock : Gambar : Gambar III.5.

Rancangan Antar Muka Menu Produk f. Rancangan Antar Muka Ubah Produk

Header Header · Admin · Produk · Kategori · Kurir · Kota · Tarif · Transaksi · Konfirmasi Pembayaran · Hubungi Kami · Laporan · Logout Ubah Telusuri Menu Produk Nama : Deskripsi : Warna : Kategori : Ukuran : Harga : Stock : Gambar : Gambar III.6.

(7)

g. Rancangan Antar Muka Menu Kategori Header Footer · Admin · Produk · Kategori · Kurir · Kota · Tarif · Transaksi · Konfirmasi Pembayaran · Hubungi Kami · Laporan · Logout Menu Kategori Kategori : xxxxxxx Data Kategori Simpan Batal Gambar III.7.

Rancangan Antar Muka Menu Kategori

h. Rancangan Antar Muka Ubah Kategori

Header Footer · Admin · Produk · Kategori · Kurir · Kota · Tarif · Transaksi · Konfirmasi Pembayaran · Hubungi Kami · Laporan · Logout Menu Kategori Kategori : xxxxxxx Simpan Batal ID : xxxxxxx Gambar III.8.

(8)

i. Rancangan Antar Muka Menu Transaksi Header Footer · Admin · Produk · Kategori · Kurir · Kota · Tarif · Transaksi · Konfirmasi Pembayaran · Hubungi Kami · Laporan · Logout Data Transaksi Data Transaksi Gambar III.9.

Rancangan Antar Muka Menu Transaksi j. Rancangan Antar Muka Detail Transaksi

Header

Footer No. Transaksi : Tanggal & Jam Order :

· Admin · Produk · Kategori · Kurir · Kota · Tarif · Transaksi · Konfirmasi Pembayaran · Hubungi Kami · Laporan · Logout Detail Transaksi Status Transaksi : 99 YY:MM:DD Ubah Status 99

Belum Lunas = Baru

Member Nama Produk Jumlah Harga Satuan Subtotal

xxxx xxxx 99 9999999 9999999 9999999 Total Rp. 99999 Ongkil Rp. 9999999 Grand Total Rp. Gambar III.10.

(9)

k. Rancangan Antar Muka Kurir Header Footer · Admin · Produk · Kategori · Kurir · Kota · Tarif · Transaksi · Konfirmasi Pembayaran · Hubungi Kami · Laporan · Logout Menu Kurir Nama Kurir xxxxxxx Data Kurir Simpan Batal Gambar III.11.

Rancangan Antar Muka Menu Kurir

l. Rancangan Antar Muka Kota

Header Footer · Admin · Produk · Kategori · Kurir · Kota · Tarif · Transaksi · Konfirmasi Pembayaran · Hubungi Kami · Laporan · Logout Menu kota Nama Kota : xxxxxxx Data Kota Simpan Batal Gambar III.12.

(10)

m. Rancangan Antar Muka Tarif Header Footer · Admin · Produk · Kategori · Kurir · Kota · Tarif · Transaksi · Konfirmasi Pembayaran · Hubungi Kami · Laporan · Logout Menu Tarif Pilih Kurir : xxxxxxx Data Tarif Simpan Batal Tarif Kirim : Pilih Kota : _xxxxxxx xxxxxxx Gambar III.13.

Rancangan Antar Muka Menu Tarif

n. Rancangan Antar Muka Konfirmasi Pembayaran

Header Footer · Admin · Produk · Kategori · Kurir · Kota · Tarif · Transaksi · Konfirmasi Pembayaran · Hubungi Kami · Laporan · Logout

Data Konfirmasi Pembayaran

No.

Transaksi Tanggal Nama Bank Jumlah Telepon Ket Status Aksi

99 Yy-mm-dd xxx Xxx 9999 9999 xxx xxx Detail

99 Yy-mm-dd xxx xxx 9999 9999 xxx xxx Deatil

Gambar III.14.

(11)

o. Rancangan Antar Muka Hubungi Kami Header Footer Balas Email Data Penghubung Kepada : Subjek : xxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxx Pesan : Kirim Batal · Admin · Produk · Kategori · Kurir · Kota · Tarif · Transaksi · Konfirmasi Pembayaran · Hubungi Kami · Laporan · Logout Gambar III.15.

Rancangan Antar Muka Hubungi Kami 2. Rancangan Antar Muka User

a. Rancangan Antar Muka Index Website

Header

Login

Daftar member baru User :

Password :

KATEGORI

Beranda Produk Cara Pembelian Konfirmasi Pembayaran Hubungi Kami

TESTIMONIAL · xxxxx · xxxxx · xxxxx · xxxxx · xxxxx

Selamat Datang dan Selamat Berbelanja

Produk

Gambar Gambar

Footer

gambar Keranjang Belanja (9)

Gambar BEST SELLER Gambar 99 Nama Produk PEMBAYARAN Gambar Gambar Gambar

Selamat datang di toko_batik.com, selamat berbelanja... Search

Profil

Gambar III.16.

(12)

b. Rancangan Antar Muka Daftar Member

Header

KATEGORI

TESTIMONIAL · xxxxx · xxxxx · xxxxx · xxxxx · xxxxx Footer

Selamat datang di toko_batik.com, selamat berbelanja... Search Daftar Member Nama : Alamat : Telepon : Email : User : Password : Re Password : Daftar

*Isi data dengan benar. Terima kasih

xxxxx xxxxxxxxxxxxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx Profil Gambar III.17.

Rancangan Antar Muka Daftar Member Baru c. Rancangan Antar Muka Home

Header

KATEGORI

TESTIMONIAL · xxxxx · xxxxx · xxxxx · xxxxx · xxxxx

Selamat Datang dan Selamat Berbelanja

Produk

Gambar Gambar

Footer

Profil

Gambar III.18.

(13)

d. Rancangan Antar Muka Profil

Header

KATEGORI

PROFIL

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx Profil

Gambar III.19. Rancangan Antar Muka Profil e. Rancangan Antar Muka Produk

Header

KATEGORI

Selamat datang di toko_batik.com, selamat berbelanja... Search Produk Katalog Gambar Gambar Gambar [9] Gambar Profil Gambar III.20.

(14)

f. Rancangan Antar Muka Cara Pembelian

Header

KATEGORI

gambar Keranjang Belanja (9) Gambar BEST SELLER Gambar 99 Nama Produk PEMBAYARAN Gambar Gambar Gambar Selamat datang di toko_batik.com, selamat berbelanja... Search

Cara Pembelian xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx Profil

Gambar III.21.

Rancangan Antar Muka Cara Pembelian g. Rancangan Antar Muka Cara Pembayaran

Header

KATEGORI

Cara Pembayaran xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx Profil

Gambar III.22.

(15)

h. Rancangan Antar Muka Konfirmasi Pembayaran

Header

KATEGORI

Konfirmasi Pembayaran Profil

Apabila anda sudah melakukan pembayaran,konfirmasikan pembayaran anda dengan mengisi form di bawah ini:

No. Faktur : Tanggal Transfer :

Bank :

Transfer Atas Nama :

Telepon : Jumlah Transfer : Keterangan Tambahan: Gambar : Browse INPUT Gambar III.23.

Rancangan Antar Muka Konfirmasi Pembayaran i. Rancangan Antar Muka Hubungi Kami

Header

KATEGORI

gambar Keranjang Belanja (9) Gambar BEST SELLER Gambar 99 Nama Produk PEMBAYARAN Gambar Gambar Gambar Selamat datang di toko_batik.com, selamat berbelanja... Search Hubungi Kami Profil Nama : Email : Subjek : Pesan : Kirim Batal Gambar III.24.

(16)

j. Rancangan Antar Muka Menu Kategori

Header

KATEGORI

TESTIMONIAL · xxxxx · xxxxx · xxxxx · xxxxx · xxxxx Selamat Datang Produk Gambar Gambar Footer

[Kategori 1] Profil

Gambar III.25.

Rancangan Antar Muka Kategori k. Rancangan Antar Muka Isi Testimoni

Header

KATEGORI

TESTIMONIAL · xxxxx · xxxxx · xxxxx · xxxxx · xxxxx ISI TESTIMONIAL Footer

gambar Keranjang Belanja (9) Gambar BEST SELLER Gambar 99 Nama Produk PEMBAYARAN Gambar Gambar Gambar Selamat datang di toko_batik.com, selamat berbelanja... Search Email : Testimonial : Nama : Simpan xxxxx xxxxx xxxxxxxxxx xxx Profil Gambar III.26.

(17)

l. Rancangan Antar Muka Lihat Testimoni

Header

KATEGORI

gambar Keranjang Belanja (9) Gambar BEST SELLER Gambar 99 Nama Produk PEMBAYARAN Gambar Gambar Gambar Selamat datang di toko_batik.com, selamat berbelanja... Search DATA TESTIMONIAL xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx [9] Profil Gambar III.27.

Rancangan Antar Muka Lihat Testimoni m. Rancangan Antar Muka Hasil Pencarian

Header

KATEGORI

gambar Keranjang Belanja (9) Gambar BEST SELLER Gambar 99 Nama Produk PEMBAYARAN Gambar Gambar Gambar Selamat datang di toko_batik.com, selamat berbelanja... Search Hasil Pencarian Gambar Gambar Profil Gambar III.28.

(18)

n. Rancangan Antar Muka Produk Detail

Header

KATEGORI

Selamat datang di toko_batik.com, selamat berbelanja... Search PRODUK DETAIL Gambar Beli Profil Gambar III.29.

Rancangan Antar Muka Produk Detail

o. Rancangan Antar Muka Keranjang Belanja

Header

KATEGORI

Gambar BEST SELLER Gambar 99 Nama Produk PEMBAYARAN Gambar Gambar Gambar Selamat datang di toko_batik.com, selamat berbelanja... Search

Keranjang Belanja

Produk Nama Harga Hapus Qty Total (Rp) Grand Total (Rp): Gambar xxxxx 99999 99 99999 Pengiriman Alamat Jalan Pilih Kota Pilih Kurir

Lanjutkan Belanja Selesai Belanja Profil

Total harga diatas belum termasuk ongkos kirim yang akan di hitung saat Selesai Belanja.

Gambar III.30.

(19)

p. Rancangan Antar Muka Transaksi Selesai

Header

KATEGORI

Profil

Data pemesan beserta ordernya adalah sebagai berikut Faktur 99 Total Rp. 999999 Ongkos Kirim Rp. Grand Total 999999 999999 Pesanan akan kami cancel apabila dalam 2x24 jam belum kami

terima pembayarannya

Gambar III.31.

(20)

3.2.2. Rancangan Basis Data

1. Entity Relationship Diagram (ERD)

pelanggan melakukan transaksi

memilih barang memiliki kategori memiliki detail_transaksi notransaksi id_barang jumlah subtotal kurir_id username status id_pelanggan nama_pelanggan alamat email kategori id_kategori password telepon username harga_barang gambar nama_barang id_barang id_kategori stok deskripsi ongkir mempunyai tarif kurir_id id_tarif kota_id harga 1 m 1 m 1 1 1 1 Konfirmasi melakukan keterangan telepon jumlah nama bank gambar tanggal memiliki mempunyai mempunyai kota kurir id_kota nama_kota id_kurir nama_kurir m 1 m 1 1 1 1 1 1 1 mempunyai 1 1 kota_id alamat notransaksi grandtotal tanngal jam id_konfirmasi warna ukuran Gambar III.32.

(21)

2. Logical Relation Structure (LRS) pelanggan id_pelanggan* nama_pelanggan alamat email telepon username password barang id_barang* nama_barang deskripsi id_kategori harga_barang stok gambar kategori id_kategori* kategori transaksi notransaksi* username kurir_id kota_id ongkir alamat status grandtotal tanggal jam tarif id_tarif* kota_id kurir_id harga konfirmasi iId_konfirmasi* tanggal nama jumlah telepon keterangan bank gambar detail_transaksi notransaksi id_barang jumlah subtotal 1 M 1 M 1 1 1 1 1 1 1 M kota id_kota* nama_kota 1 1 kurir id_kurir* nama_kurir 1 1 1 M 1 1 Gambar III.33.

(22)

3. Spesifikasi File

Spesifikasi file merupakan penjelasan mengenai bentuk-bentuk filedatabase yang digunakan untuk pengolahan proses dari suatu sistem. File-file ini tersimpan pada database tokobatik dengan parameter-parameter sebagai berikut :

a. Spesifikasi File Pelanggan Nama File : Filepelanggan Akronim : pelanggan

Fungsi : Untuk menyimpan data pelanggan Tipe : File Master

Organisasi File : Index Sequential Akses File : Random

Media : Hard Disk Panjang Record : 91 Karakter Kunci Field : id_pelanggan Software : Mysql

Tabel III.1.

Spesifikasi File Pelanggan

No. Elemen Data Nama Field Tipe Size Ket.

1. Id Pelanggan id_pelanggan Int 11 Primary Key

2. Nama Pelanggan nama_pelanggan Varchar 35

3. Alamat Pelanggan Alamat Text -

4. Email Pembeli Email Text -

5. Telepon Pelanggan Telepon Varchar 25

(23)

7. Password Pelanggan Password Text -

b. Spesifikasi File Kategori Nama File : File kategori Akronim : kategori

Fungsi : Untuk menyimpan data kategori Tipe : File Master

Media : Hard Disk Panjang Record : 46 Karakter Kunci Field : id_kategori Software : Mysql

Tabel III.2. Spesifikasi File Kategori

No. Elemen Data Nama Field Tipe Size Ket.

1. Id Kategori id_ kategori Int 11 Primary Key

2. Nama Kategori Kategori Varchar 35

c. Spesifikasi File Barang

Nama File : File barang Akronim : barang

(24)

Tipe : File Master Organisasi File : Index Sequential Akses File : Random

Media : Hard Disk Panjang Record : 193 Karakter Kunci Field : id_barang Software : Mysql

Tabel III.3. Spesifikasi File Barang

1. Id Barang id_barang Int 11 Primary Key

2. Nama Barang nama_barang Varchar 35

3. Deskripsi Deskripsi Text -

4 Warna Warna Varchar 25

Ukuran Ukuran Varchar 15

4. Id Kategori id_kategori Int 11 Foreign Key

5. Harga harga_barang Int 11

6. Stok Stok Int 11

7. Gambar Gambar Varchar 50

d. Spesifikasi File Transaksi Nama File : File transaksi Akronim : transaksi

(25)

Tipe : File Transaksi Organisasi File : Index Sequential Akses File : Random

Media : Hard Disk Panjang Record : 214 Karakter Kunci Field : notransaksi Software : Mysql

Tabel III.4.

Spesifikasi File Transaksi

1. No Transaksi Notransaksi Int 11 Primary Key

2. Username Pelanggan Username Varchar 20

3. Status Status Varchar 50

4. Id Kurir kurir_id Int 11

5. Id Kota kota_id Int 11

6. Ongkos Pengiriman Ongkir Double -

7. Alamat Alamat Varchar 100

8. Grand Total Grandtotal Int 11

9. Tanggal Tanggal Date -

10. Jam Jam Time -

e. Spesifikasi File Detail Transaksi Nama File : File detail_transaksi Akronim : detail_transaksi

(26)

Tipe : File Transaksi Organisasi File : Sequential Akses File : Random Media : Hard Disk Panjang Record : 58 Karakter Kunci Field : -

Software : Mysql

Tabel III.5.

Spesifikasi File detail_transaksi

1. No Transaksi Notransaksi Int 25 Foreign key

2. Id Barang id_barang Int 11 Foreign key

3. Jumlah Jumlah Int 11

4. Subtotal Subtotal Int 11

f. Spesifikasi File Kota Nama File : Filekota Akronim : kota

Fungsi : Untuk menyimpan data kota area pengiriman Tipe : File Master

(27)

Panjang record : 41 Karakter Kunci Field : id_kota Software : Mysql

Tabel III.6. Spesifikasi File Kota

1. Id Kota id_kota Int 11 Primary Key

2. Nama Kota nama_kota Varchar 30

g. Spesifikasi File Kurir Nama File : File kurir Akronim : kurir

Fungsi : Untuk menyimpan data kurir pengiriman Tipe : File Master

Media : Hard Disk Panjang record : 41 Karakter Kunci Field : id_kurir Software : Mysql

(28)

Tabel III.7. Spesifikasi File Kurir

1. Id Kurir id_kurir Int 11 Primary Key

2. Nama Kurir nama_kurir Varchar 30

h. Spesifikasi File Tarif Nama File : File tarif Akronim : tarif

Fungsi : Untuk menyimpan data tarif pengiriman Tipe : File transaksi

Media : Hard Disk Panjang record : 33 Karakter Kunci Field : id_tarif Software : Mysql

Tabel III.8. Spesifikasi File Tarif

1. Id Tarif id_tarif Int 11 Primary Key

2. Id Kirir id_kurir Int 11 Foreign Key

(29)

4. _Harga _Harga _Double _-

i. Spesifikasi File Konfirmasi Nama File : File konfirmasi Akronim : konfirmasi

Fungsi : Untuk menyimpan data konfirmasi pembayaran Tipe : File master

Media : Hard Disk Panjang record : 125 Karakter Kunci Field : id

Software : Mysql

Tabel III.9.

Spesifikasi File Konfirmasi

1. Id konfirmasi Id Int 11 Primay Key

2. Tanggal transfer Tanggal Date -

3. Nama penyetor Nama Varchar 30

4. Jumlah transfer Jumlah Int 11

5. Telepon Telepon Varchar 13

6. Keterangan Keterangan Varchar

(30)

8 Gambar Gambar Varchar 50

3.2.3. Rancangan Struktur Navigasi

Struktur navigasi yang digunakan pada webini adalah struktur navigasi campuran.Struktur navigasi campuran merupakan gabungan dari ketiga struktur yaitu linier, non-linier dan hirarki.Struktur navigasi ini juga biasa disebut dengan struktur navigasi bebas.Struktur navigasi ini banyak digunakan dalam pembuatan website karena struktur ini dapat memberikan interaksi yang lebih tinggi.

1. Struktur Navigasi User (front-end)

Index

Beranda Produk Profil Cara Pembelian _PembayaranKonfirmasi Hubungi Kami

Login Belum Daftar?

Batik Sarimbit Batik Tulis Batik Cetak Produk Detail Mengisi Formulir Pengiriman Konfirmasi Pembayaran Keranjang Belanja Transaksi Selesai Logout Lihat cara pembelian Lihat Konfirmasi Pembayaran Lihat Hubungi Kami Lihat Profil Lihat Produk Kategori Gambar III.34.

(31)

2. Struktur Navigasi Admin (back-and)

Home Login

Admin Produk Kategori Tarif Kurir Kota Laporan Logout

Laporan Penjualan Laporan Member Laporan Produk Hapus Ubah Tambah Hapus Ubah Tambah Hapus Ubah Tambah Hapus Ubah Tambah Hapus Ubah Tambah Hapus Ubah Tambah Hapus Ubah Tambah Hapus Ubah Tambah Hapus Ubah Tambah Hapus Ubah Tambah Hapus Ubah Tambah Konfirmasi pembayaran TambahHapus Hubungi Kami Hapus Balas Transaksi Lihat Edit Gambar III.35.

Struktur Navigasi Admin (back-end)

3.3. Implementasi dan Pengujian Unit 3.3.1. Implementasi

1. Implementasi Admin

a. Rancangan Antar MukaLogin Admin

Gambar III.36.

(32)

b. Rancangan Antar Muka Login Salah

Gambar III.37.

Rancangan Antar Muka Login Salah

c. Rancangan Antar Muka Index Admin

Gambar III.38.

(33)

d. Rancangan Antar Muka Menu Admin

Gambar III.39.

Rancangan Antar MukaMenuAdmin

e. Rancangan Antar Muka Ganti Password Admin

Gambar III.40.

(34)

f. Rancangan Antar Muka Menu Produk

Gambar III.41.

Rancangan Antar Muka Menu Produk g. Rancangan Antar Muka Ubah Produk

Gambar III.42.

(35)

h. Rancangan Antar Muka Menu Kategori

Gambar III.43.

Rancangan Antar Muka Menu Kategori

i. Rancangan Antar Muka Ubah Kategori

Gambar III.44.

(36)

j. Rancangan Antar Muka Menu Transaksi

Gambar III.45.

Rancangan Antar Muka Menu Transaksi k. Rancangan Antar Muka Detail Transaksi

Gambar III.46.

(37)

l. Rancangan Antar Muka Menu Tarif

Gambar III.47.

Rancangan Antar Muka MenuTarif m. Rancangan Antar Muka Menu Kota

Gambar III.48.

(38)

n. Rancangan Antar Muka Menu Kurir

Gambar III.49.

Rancangan Antar Muka MenuKurir

o. Rancangan Antar Muka Konfirmasi Pembayaran

Gambar III.50.

(39)

p. Rancangan Antar Muka Hubungi Kami

Gambar III.51.

Rancangan Antar Muka Hubungi Kami

q. Rancangan Antar Muka Balas Email

Gambar III.52.

(40)

r. Rancangan Antar Muka Menu Laporan

Gambar III.53.

(41)

2. Implementasi User

a. Rancangan Antar Muka Index Website

Gambar III.54. Rancangan Antar Muka Index

(42)

b. Rancangan Antar Muka Daftar Member

Gambar III.55.

(43)

c. Rancangan Antar Muka Home

Gambar III.56. Rancangan Antar Muka Home

(44)

d. Rancangan Antar Muka Profil

Gambar III.57. Rancangan Antar Muka Profil

(45)

e. Rancangan Antar Muka Produk

Gambar III.58.

(46)

f. Rancangan Antar Muka Cara Pembelian

Gambar III.59.

(47)

g. Rancangan Antar Muka Konfirmasi Pembayaran

Gambar III.60.

(48)

h. Rancangan Antar Muka Hubungi Kami

Gambar III.61.

(49)

i. Rancangan Antar Muka Kategori

Gambar III.62.

(50)

j. Rancangan Antar Muka Isi Testimoni

Gambar III.63.

(51)

k. Rancangan Antar Muka Lihat Testimoni

Gambar III.64.

(52)

l. Rancangan Antar Muka Hasil Pencarian

Gambar III.65.

(53)

m. Rancangan Antar Muka Detail Produk

Gambar III.66.

(54)

n. Rancangan Antar Muka Keranjang Belanja

Gambar III.67.

(55)

o. Rancangan Antar Muka Transaksi Selesai

Gambar III.68.

Rancangan Antar Muka Transaksi Selesai

3.3.2. Spesifikasi Sistem Komputer

Berikut ini adalah spesifikasi perangkat keras (hardware) dan perangkat lunak (software) lunak minimum yang di butuhkan untuk mengimplementasikan program sistem informasi penjualan e-commerce.

(56)

1. Spesifikasi Perangkat Keras (Hardware)

Adapun spesifikasi perangkat keras hardware yang dibutuhkan oleh pengguna, yaitu:

A. Server 1. CPU

a. Processor intel dual core 2.3 Ghz b. RAM 2 GB

c. Hard Disk 320 GB

d. VGA Mobile Intel (R) 965 Express Chipet Family 358MB 2. Mouse

3. Keyboard

4. Monitor dengan resolusi layar minimum 1024x768 5. Koneksi internet dengan kecapatan 2 Mbps

B. Client 1. CPU

a. Processor intel dual core 2.3 Ghz b. RAM 1-2 GB

c. Hard Disk 320 GB d. VGA intel HD 2. Mouse

3. Keyboard

4. Monitor dengan resolusi layar minimum 1024x768 5. Koneksi internet dengan kecapatan 2 Mbps

(57)

2. Spesifikasi Perangkat Lunak

Adapun spesifikasi perangkat lunak softaware yang dibutuhkan oleh pengguna,yaitu:

1. Server

a. Sistem operasi Microsoft windows 7 Ultimate 32bit (x86)

b. Aplikasi bundle webserver adalah Xampp v3.1.03.1.10 yang terdiri dari beberapa komponen diantaranya :

1. Aplikasi PHP 2. Aplikasi MySQL 3. Aplikasi phpMyAdmin

c. Aplikasi webbrowser seperti Google Chrome, Mozilla Firefox. 2. Client

a. Sistemoperasi Microsoft windows 7 32 bit (x86)

b. Aplikasi web browser seperti mozilla firefox, Geoogle Chrome 3.3.3. Pengujian Unit

Pengujian terhadap program yang dibuat menggunakan blackboxtesting yang fokus terhadap proses masukan dan keluaran program.

A. Pengujian Terhadap Form Login Admin Tabel III.10.

Pengujian Form Login Admin No Skenario

Pengujian Test Case

Hasil yang di harapkan

Hasil

Pengujian Kesimpulan

(58)

dan password di kosongkan kemudian klik tombol login (kosong) Password:(ko song) menolak akses user dan akan menampilkan “You missed 2 fields. They have been highlighted.” harapan 2 Mengetikkan username dan password tidak di isi kemudian klik tombol login Username: (admin) Password: (kosong) Sistem akan menolak akses user dan akan menampilkan “You missed 1 field. it has been highlighted.” Sesuai harapan Valid 3 Username tidak di isi dan password di isi kemudian klik tombol login Username: (kosong ) Password: (admin) Sistem akan menolak aksesuser dan akan menampilkan “You missed 1 field. it has been highlighted.” Sesuai harapan Valid 4 Mengetikan salah satu kondisi salah pada username atau password kemudian klik tombol login Username: (admin ) Password: (user) Sistem akan menolak aksesuser dan akan menampilkan “LOGIN GAGAL. Username atau password anda tidak sesuai. Atau akun anda sedang diblokir.” Sesuai harapan Valid 5 Mengetikan username dan Username: admin(benar ) Sistem menerima akses Sesuai harapan Valid

(59)

password dengan data yang benar kemudian klik tombol login Password: admin(benar) Login. Dan masuk ke form menu utama admin.

B. Pengujian Terhadap Form Tambah Admin

Tabel III.11.

Pengujian Form Tambah Admin

No Skenario

Pengujian Test Case

Hasil yang di harapkan Hasil Pengujian Kesimpulan 1 Mengosongk-an field Username. Username: (kosong) Password: (admin) Akan menampilkan Pesan Validasi “Anda belum mengisikan username” Sesuai harapan Valid 2 Mengosongk-an Field Password Username: (admin) Password: (Kosong) Akan menampilkan Pesan Validasi “Anda belum mengisikan password” Sesuai harapan Valid 3 Mengosongk-an field Username dan field Password Username: (Kosong) Password (Kosong) Akan menampilkan Pesan Validasi dimasing masing kotak. Sesuai harapan Valid 4 Mengetikkan username dan password dengan benar Username: (admin) Password (admin) Akan menampilkan Pesan” Data Admin baru berhasil disimpan. Sesuai harapan Valid

(60)

C. Pengujian Terhadap Form Ganti Password Admin Tabel III.12.

Pengujian Form Ganti Password Admin No Skenario

Pengujian Test Case

Hasil yang di harapkan Hasil Pengujian Kesimpulan 1 Mengosongk-an Field Password Lama. Username: (admin) Password Lama (kosong) Password Baru (******) Akan menampilkan Pesan Validasi dibawah fieldpassword lama“Anda belum mengisikan password” Sesuai harapan Valid 2 Password Lama di isi tidak sesuai atau salah Username (admin) Password Lama (tidak sesuai) Password Baru(ada) Sistem akan menolak akses ubah password admin dan akan menampilkan “Password lama salah, input dengan benar password lama Anda!.” Sesuai harapan Valid 3 Mengosongk-an field Password Baru Username: (admin) Password Lama (******) Password Baru (kosong) Akan menampilkan Pesan Validasi di bawah field password Baru “Anda belum memasukan password baru” Sesuai harapan Valid 4 Mengosongk-an 2 field password Lama dan Username: (admin) Password Lama Menampilkan Pesan Validasi disamping masing masing Sesuai Harapan Valid

(61)

field password Baru (kosong) Password Baru (kosong) field password Lama dan field password Baru. 5 Mengetikan Password Lama dan Password baru dengan data yang benar kemudian klik tombol Ubah Username: (admin) Password Lama (benar) Password Baru (benar) Sistem menerima akses Ubah admin dan kemudian langsung menampilkan pesan “Data Sudah Berubah.” . Sesuai Harapan Valid

D. Pengujian Terhadap Form Tambah Produk

Tabel III.13.

Pengujian Form Tambah Produk No Skenario

Pengujian Test Case

Hasil yang di harapkan Hasil Pengujian Kesimpulan 1 Mengosong kan field Nama Nama: (kosong) Deskripsi: (Menggunaka n bahan katun halus, nyaman dipakai) Warna: (merah) Ukuran: (2m x 1,15m) kategori: (Batik Cetak) Harga: (150000) Stock: (4) Akan menampilkan Pesan Validasi dibawah kolom nama “Anda belum mengisikan nama produk” Sesuai harapan Valid

(62)

kan field Deskripsi (kosong) Deskripsi: (Menggunaka n bahan katun halus, nyaman dipakai) Warna: (merah) Ukuran: (2m x 1,15m) kategori: (Batik Cetak) Harga: (150000) Stock: (4) menampilkan Pesan Validasi dibawah kolom deskripsi “Anda belum mengisikan deskripsi ” harapan 3 Mengosong kan field Harga Nama: (kosong) Deskripsi: (Menggunaka n bahan katun halus, nyaman dipakai) Warna: (merah) Ukuran: (2m x 1,15m) kategori: (Batik Cetak) Harga: (150000) Stock: (4) Akan menampilkan Pesan Validasi dibawah kolom harga “Anda belum mengisikan harga”. Sesuai harapan Valid 4 Mengosong kan field stock

Nama: (kosong) Deskripsi: (Menggunaka n bahan katun halus, nyaman dipakai) Warna: (merah) Ukuran: (2m Akan menampilkan Pesan Validasi dibawah kolom stok “Anda belum mengisikan stock produk” Sesuai harapan Valid

(63)

x 1,15m) kategori: (Batik Cetak) Harga: (150000) Stock: (4) 5 Mengosong kan field gambar Nama: (kosong) Deskripsi: (Menggunaka n bahan katun halus, nyaman dipakai) Warna: (merah) Ukuran: (2m x 1,15m) kategori: (Batik Cetak) Harga: (150000) Stock: (4) Akan menampilkan Pesan Validasi disamping kolom gambar “No file chosen” Sesuai harapan Valid 6 Mengisi semua field lalu klik tombol simpan Nama: (kosong) Deskripsi: (Menggunaka n bahan katun halus, nyaman dipakai) Warna: (merah) Ukuran: (2m x 1,15m) kategori: (Batik Cetak) Harga: (150000) Stock: (4) Sistem menerima akses Tambah produk kemudian menampilkan pesan “Produk Berhasil disimpan”. Sesuai harapan Valid

(64)

Tabel III.14.

Pengujian Form Tambah Kategori No Skenario

Pengujian Test Case

Hasil yang di harapkan Hasil Pengujian Kesimpulan 1 Mengosong kan field kategori Kategori: (kosong) Akan menampilkanPe san Validasi dibawah kolom kategori “Anda belum mengisikan kategori” Sesuai harapan Valid 3 Mengetikkan atau mengisi field kategori lalu klik tombol simpan Kategori: (Batik Cetak) Sistem menerima akses Tambah Kategori dan kemudian langsung menampilkan pesan “Data berhasil di simpan.” Sesuai harapan Valid

(65)

F. Pengujian Terhadap Form Login User

Tabel III.15. Pengujian Form login User

No Skenario

Pengujian Test Case

Hasil yang di harapkan Hasil Pengujian Kesimpulan 1 Mengosongk-an field Username. Username: (kosong) Password: (user) Akan menampilkan Pesan Validasi “Username atau Password anda tidak sesuai” Sesuai harapan Valid 2 Mengosongk-an Field Password kosong Username: (user) Password: (Kosong) Akan menampilkan Pesan Validasi “Username atau Password anda tidak sesuai” Sesuai harapan Valid 3 Mengosongk-an field Username dan field Password Username: (Kosong) Password (Kosong) Akan menampilkan Pesan Validasi “Username atau Password anda tidak sesuai” Sesuai harapan Valid 4 Mengetikkan Username salah dan Password benar Username: (salah) Password: (User) Sistem menolak akses

Login Userdan kemudian langsung menampilkan pesan “Username atau Password anda tidak sesuai” Sesuai harapan Valid 5 Mengetikkan username dan Username: (User) Sistem menerima akses Sesuai harapan Valid

(66)

password dengan benar

Password: (User)

Login Userdan kemudian langsung menampilkan pesan “Hallo!!Selamat Belanja”

G. Pengujian Terhadap Form Daftar Member Baru User Tabel III.16.

Pengujian Form Member Baru User

No Skenario

Pengujian Test Case

Hasil yang di harapkan Hasil Pengujian Kesimpulan 1 Mengosongk-an field nama kosong. Nama: (kosong) Akan menampilkan pesan validasi ”Anda belum mengisikan Nama” Sesuai harapan Valid 2 Mengosongk-an Field alamat kosong Alamat: (Kosong) Akan menampilkan pesan validasi”Anda belum mengisikan Alamat” Sesuai harapan Valid 3 Mengosongk-an Field Telepon Telepon: (Kosong) Akan menampilkan pesan validasi”Anda belum mengisikan telepon” Sesuai harapan Valid 4 Mengosongk-an Field email Email: (kosong) Akan menampilkan pesan Sesuai harapan Valid

(67)

validasi”Anda belum mengisikan email” 5 Mengosongk-an field user member User: (kosong) Akan menampilkan pesan validasi”Anda belum mengisikan “username” Sesuai harapan Valid 6 Mengosongk-an field password member Password: (Kosong) Akan menampilkan pesan validasi”Anda belum mengisikan “Password” Sesuai harapan Valid 7 Mengosongk-an field re-password member Re-Password: (Kosong) Akan menampilkan pesan validasi”Anda belum mengisikan re- password Sesuai harapan Valid 8 Mengetikkan Semua field dengan benar diantaranya format email dengan benar dan nomor telepon dengan huruf Sistem menerima akses daftar member baru dan menampilkan pesan “Selamat datang, anda telah menjadi member, silahkan login”

(68)

H. Pengujian Terhadap Form Hubungi Kami

Tabel III.17.

Pengujian Form Hubungi Kami

No Skenario

Pengujian Test Case

Hasil yang di harapkan Hasil Pengujian Kesimpulan 1 Mengosongk-an field Nama. Nama: (kosong) Email: (azizahputry @gmail.com) Subjek: (Minta Informasi) Pesan: (apakah ada katalog?) Akan menampilkan Pesan Validasi disamping field Nama “Anda belum Mengisikan Nama Anda” Sesuai harapan Valid 2 Mengosongk-an Field email. Nama: (Putri) Email: (kosong) Subjek: (Minta Informasi) Pesan: (apakah ada katalog?) Akan menampilkan Pesan Validasi disamping field email “email is required” Sesuai harapan Valid 3 Mengetikkan format email salah Nama: (Putri) Email: ( madsukriatgm aildotcon) Subjek: (Minta Informasi) Pesan: Akan menampilkan Pesan Validasi disamping field email “Format email belum benar” Sesuai harapan Valid

(69)

(apakah ada katalog?) 4 Mengosongka n kan field subjek Nama: (Putri) Email: (Azizahputry9 @gmail.com) Subjek: (Kosong) Pesan: (apakah ada katalog?) Akan menampilkan Pesan Validasi disamping field“Anda belum mengisikan subjek pesan” Sesuai harapan Valid 5 Mengosongk-an Field pesan Nama: (Putri) Email: (Azizahputry9 @gmail.com) Subjek: (Minta informasi) Pesan: (Kosong) Akan menampilkan Pesan Validasi disampingfield pesan “Anda belum mengisikan pesan”. Sesuai harapan Valid 6 Mengetikkan Semua field dengan benar diantaranya format email dengan benar Nama: (Putri) Email: (Azizahputry9 @gmail.com) Subjek: (Minta informasi) Pesan: (apakah ada katalog?) Sistem menerima pesan dan kemudian langsung menampilkan pesan “Terimakasih telah menghubungi kami akan segera meresponnya.” Sesuai harapan Valid

(70)

I. Pengujian Terhadap Form Isi Testimonial

Tabel III.18.

Pengujian Form Isi Testimonial No Skenario

Pengujian Test Case

Hasil yang di harapkan Hasil Pengujian Kesimpulan 1 Mengosongk-an field Nama. Nama: (kosong) Email: (Azizahputry9 @gmail.com) Testimonial: (website ini keren) Akan menampilkan Pesan Validasi disamping field Nama “Please fill out this field” Sesuai harapan Valid 2 Mengosongk-an Field email. Nama: (Putri) Email: (Kosong) Testimonial: (website ini keren) Akan menampilkan Pesan Validasi disamping field email “Please fill out this field” Sesuai harapan Valid 3 Mengetikkan format email salah Nama: (Putri) Email: (putri) Testimonial: (website ini keren) Akan menampilkan Pesan Validasi disamping field email “Please include an ‘@’ in the email address.putri is missing an ‘@’ ” Sesuai harapan Valid 4 Mengosongka n kan field Testimonial Nama: (kosong) Email: (azizahputry9 @gmail.com) Testimonial: (kosong) Akan menampilkan Pesan Validasi disamping field “Please fill out the field” Sesuai harapan Valid 6 Mengetikkan Semua field dengan benar diantaranya Nama: (Putri) Email: (azizahputry9 Sistem menerima testimonial dan menampilkan Sesuai harapan Valid

(71)

format email dengan benar @gmail.com) Testimonial: (website ini keren) pesan “Terimakasih.”

J. Pengujian Terhadap Form Pembelian

Tabel III.19.

Pengujian Form Pembelian No Skenario

Pengujian Test Case

Hasil yang di harapkan Hasil Pengujian Kesimpulan Apabila Pembelian melebihi Stok barang yang ada. Stok 1 pembelian 4 Akan tampil Pesan “Maaf stok habis” Sesuai Harapan Valid

K. Pengujian Terhadap Form Konfirmasi

Tabel III.20.

Pengujian Form Konfirmasi No Skenario

Pengujian Test Case

Hasil yang di harapkan Hasil Pengujian Kesimpulan 1 Mengosong kan field No transaksi No transaksi: (kosong) Tanggal transfer: (2016/07/02) Transfer atas nama: (Putri) Bank: (BCA) Jumlah Transfer: (400000) Telephon: (08787535222 8) Akan menampilkanPe san Validasi dibawah kolom nama “Please fill out this field”

Sesuai harapan

(72)

Gambar: (aa,jpeg) Keterangan: (barang belum terkirim) 2 Mengosong kan field Tanggal No transaksi: (10) Tanggal transfer: (kosong) Transfer atas nama: (Putri) Bank: (BCA) Jumlah Transfer: (400000) Telephon: (08787535222 8) Gambar: (aa,jpeg) Keterangan: (Sudah Di transfer) Akan menampilkan Pesan Validasi dibawah kolom deskripsi “Please fill out this field” Sesuai harapan Valid 3 Mengosong kan field transfer atas nama No transaksi: (10) Tanggal transfer: (2016/07/02) Transfer atas nama: (Kosong) Bank: (BCA) Jumlah Transfer: (400000) Akan menampilkan Pesan Validasi dibawah kolom nama “Please fill out this field”

Sesuai harapan

(73)

Telephon: (08787535222 8) Gambar: (aa,jpeg) Keterangan: (sudah transfer) 4 Mengosong

kan field Bank

No transaksi: (10) Tanggal transfer: (2016/07/02) Transfer atas nama: (Putri) Bank: (kosong) Jumlah Transfer: (400000) Telephon: (08787535222 8) Gambar: (aa,jpeg) Keterangan: (sudah transfer) Akan menampilkan Pesan Validasi dibawah kolom kategori “Please select an item in the list” Sesuai harapan Valid 5 Mengosong kan Jumlah transfer No transaksi: (10) Tanggal transfer: (2016/07/02) Transfer atas nama: (Putri) Bank: (BCA) Jumlah Akan menampilkan Pesan Validasi dibawah kolom stok “Please fill out this field””.

Sesuai harapan

(74)

Transfer: (Kosong) Telephon: (08787535222 8) Gambar: (aa,jpeg) Keterangan: (sudah transfer) 6 Mengosong kan field gambar No transaksi: (10) Tanggal transfer: (2016/07/02) Transfer atas transfer atas nama: (Putri) Bank: (BCA) Jumlah Transfer: (400000) Telephon: (08787535222 8) Gambar: (kosong) Keterangan: (sudah transfer) Akan menampilkan Pesan Validasi disamping kolom gambar “Please select a file” Sesuai harapan Valid 7 Mengosong kan field keterangan No transaksi: (10) Tanggal transfer: (2016/07/02) Transfer atas nama: (Putri) Bank: (BCA) Akan menampilkan Pesan Validasi dibawah kolom stok “Please fill out this field””.

Sesuai harapan

(75)

Jumlah Transfer: (400000) Telephon: (08787535222 8) Gambar: (batik.png) Keterangan: (kosong) 8 Mengisi semua field lalu klik tombol input No transaksi: (10) Tanggal transfer: (2016/07/02) Transfer atas nama: (Reza) Bank: (BCA) Jumlah Transfer: (400000) Telephon: (08787535222 8) Gambar: (batik.png) Keterangan: (sudah di transfer) Sistem menerima akses Tambah produk kemudian menampilkan pesan “Data sudah terkirim” Sesuai harapan Valid