BAB III PEMBAHASAN. masih menggunakan sistem manual dan sering terjadi kesalahan human error, dalam

(1)

18 3.1 Analisa Kebutuhan

Dalam tahap analisa kebutuhan ini masalah yang terjadi adalah sistem penjualan sepatu anak – anak, sepatu remaja, serta sepatu untuk pria dan wanita yang masih menggunakan sistem manual dan sering terjadi kesalahan human error, dalam kegiatan pemasarannya masih menggunakan social media seperti facebook dan instagram. Serta dalam penyebaran informasinya masih dari mulut ke mulut. Oleh karena itu penjualan tidak dapat berjalan secara maksimal dengan jangkauan penjualan yang minim dan biaya yang besar. Untuk itu muncul sebuah gagasan untuk membuat sebuah rancangan website e-commerce agar dapat memperluas jaringan

informasi tentang penjualan sepatu, memperbaharui sistem penjualan,

memaksimalkan sasaran penjualan dan mengurangi biaya pemasaran.

3.2 Perancangan Perangkat Lunak

Dalam spesifikasi rancangan, penulis menggambarkan rancangan halaman, diantaranya rancangan halaman web, rancangan dokumen masukan dan keluaran, spesifikasi program dan spesifikasi file.

3.2.1 Rancangan Antar Muka

Dalam rancangan antar muka, penulis menggambarkan rancangan setiap halaman dalam web yang penulis buat.

(2)

1. Rancangan Antar Muka Halaman Home User ( Index User)

Halaman home disebut juga halaman index karena merupakan halaman yang tampil pertama kali saat website dijalankan. Halaman home berisikan menu-menu yang ada didalam website yang bisa diakses oleh user dan member. Pada halaman home user juga menampilkan daftar produk yang di jual. Berikut adalah gambar rancangan antar muka halaman home user :

HOUSE OF SHOES STORE Signup Login Kids Woman Men Contact Store Of Shoes House Sport Casual

Produk Produk Produk

CATEGORIES Men Woman Kids SHORT LINK Contact Us About Us Delivery Sitemap HOS’S Gambar III.5.

(3)

2. Rancangan Antar Muka Halaman Home Member ( Index Member )

Halaman home disebut juga halaman index karena merupakan halaman yang tampil pertama kali saat website dijalankan. Halaman home berisikan menu-menu yang ada didalam website yang bisa diakses oleh user dan member. Pada halaman home member juga menampilkan daftar produk yang di jual dan member dapat memilih produk yang ingin dibeli dihalaman home member tersebut. Berikut adalah gambar rancangan antar muka halaman home user :

HOUSE OF SHOES STORE Profil Logout Kids Woman Men Contact Store Of Shoes House Invoice Sport Casual

CATEGORIES Men Woman Kids SHORT LINK Contact Us About Us Delivery Sitemap HOS’S (0) Empty Cart Member Gambar III.6.

(4)

3. Rancangan Antar Muka Halaman Produk Member

Halaman produk adalah halaman yang menampilkan keseluruhan daftar produk yang dijual. Halaman produk juga berisikan menu-menu yang bisa diakses oleh user dan member. Pada halaman produk juga terdapat menu kategori yang menampilkan macam-macam kategori yang terdapat dalam website untuk mem-filter produk sesuai kategori yang dipilih dan member dapat memilih produk yang ingin dibeli dihalaman Produk member Berikut adalah gambar rancangan antar muka halaman produk :

House of Shoes Store

Contact Kids Men Woman Store Of Shoes House Invoice Logout

Categories Men Woman Kids Short Links Contact Us About Us Delivery Sitemap HOS’S Home/products _{- Categories} Men Woman Kids Produk Produk Produk Profil (0) Member Empty Cart Gambar III.7.

(5)

4. Rancangan Antar Muka Halaman Register

Halaman register adalah halaman yang menampilkan form pendafatran untuk user yang ingin menjadi member. Pada halaman register, user bisa mengisikan informasi pribadi sesuai dengan ketentuan yang harus diisikan. Berikut adalah gambar rancangan antar muka halaman register :

House of Shoes Store

Contact Kids Men Woman Store Of Shoes House Sign Up Login Categories Men Woman Kids Short Links Contact Us About Us Delivery Sitemap HOS’S Register Now

Home/ Login/ Register

Name : Email : Alamat : Kota : Kode Pos : Register Now Telepon : Password : Gambar III.8.

(6)

5. Rancangan Antar Muka Halaman Login

Halaman login merupakan halaman yang menampilan form untuk user masuk sebagai member. Pada halaman login juga menampilkan tombol untuk membuat akun baru yang bisa digunakan untuk user yang tidak bisa melakukan login karena belum mendaftar sebagai member. Berikut adalah gambar rancangan antar muka halaman login :

House of Shoes Store

Contact Kids Men Woman Sign Up Login Store Of Shoes House Categories Men Woman Kids Short Links Contact Us About Us Delivery Sitemap HOS’S New Registration Home/ Login User Name : Password : Login Creat An Account Gambar III.9.

(7)

6. Rancangan Antar Muka Halaman Cart

Halaman cart atau disebut juga dengan halaman keranjang belanja adalah halaman yang menampilkan produk-produk yang sudah member pilih untuk dibeli. Pada halaman cart juga terdapat tombol untuk meng-update jumlah barang dan tombol untuk melanjutkan ke tahap pembelian selanjutnya. Berikut adalah gambar rangan antar muka halaman cart :

House of Shoes Store

Contact Kids Men Woman Store Of Shoes House Update Cart Check out

Profil Logout Produk Categories Men Woman Kids Short Links Contact Us About Us Delivery Sitemap HOS’S Home/products/cart Produk My Shopping Bag Invoice (0) Member Empty Cart

Nama Ukuran Harga Jumlah Subtotal Aksi

Rp. 0 Rp. 0 Hapus Hapus Rp. 0 Rp. 0 Total Transaksi : Rp. 0 Gambar III.10.

(8)

7. Rancangan Antar Muka Halaman Rincian Produk

Halaman rincian produk adalah halaman yang menampilkan keseluruhan informasi mengenai satu produk yang dipilih. Pada halaman ini member juga bisa memilih tombol untuk memasukkan produk kedalam keranjang dan tombol untuk keranjang belanja. Beritkut adalah gambar rancangan antar muka halaman rincian produk :

House of Shoes Store Contact Kids Men Woman Store Of Shoes House Description Highlights Categories Men Woman Kids Short Links Contact Us About Us Delivery Sitemap HOS’S Home/Men/Shop Harga Merk Products Size Chart Add To Chart Products Details Item Details Profil Logout Invoice (0) Member Empty Cart Gambar III.11.

(9)

8. Rancangan Antar Muka Halaman Checkout

Halaman Checkout di rancangan untuk menampilkan form yang berisikan informasi pengiriman barang yang sudah dibeli oleh member. Berikut adalah gambar rancangan antar muka halaman checkout :

House of Shoes Store

Contact Kids Men Woman Store Of Shoes House Print Profil Logout Invoice (0) Member Empty Cart Categories Men Woman Kids Short Links Contact Us About Us Delivery Sitemap HOS’S

Bukti Pembelian Barang Transaksi Anda Berhasil Dilakukan

KODE PESAN : TOTAL HARGA :

Silahkan melakukan pembayaran melalui transfer ke

HOS'Store BCA Depok No. Rekening :

LANGKAH SELANJUTNYA

1. Silahkan transfer sesuai dengan uang jumlah total transaksi

2. Konfirmasi lewat SMS, Telp dan WhatsApp ke Nomor 0857xxxxxx

Cek status pembayaran dan pengiriman barang di halaman invoice

Gambar III.12.

(10)

9. Rancangan Antar Muka Halaman Home Admin (Index)

Halaman home admin adalah halaman yang ditampilkan pertama kali pada halaman admin. Pada halaman home admin terdapat menu-menu yang bisa diakses oleh admin. Halaman home admin juga menampilkan keseluruhan data yang bersangkutan dengan penjualan barang. Berikut adalah gambar rancangan antar muka home admin (index).

House of Shoes Store Admin

Dashboard Barang Penjualan Barang Laporan Search.. Dashboard ·

Data Table Barang

Search : Record per page

Id Nama Barang Kategori Warna Ukuran Stok Keterangan Harga

Previous Next

Gambar III.13.

(11)

10. Rancangan Antar Muka Halaman Kategori Barang Admin

Halaman kategori barang adalah halaman yang terdapat tabel yang berisikan keseluruhan data kategori barang. Berikut adalah gambar rancangan antar muka halaman kategori barang:

House of Shoes Store Admin

Dashboard Barang Penjualan Barang Laporan Search.. Data Kategori ·

Data Table Kategori

Id Kategori Kategori Name Options

Previous Next

New Kategori

Gambar III.14.

(12)

11. Rancangan Antar Muka Halaman Barang Admin

Halaman barang admin adalah halaman yang menampilkan tabel yang berisikan keseluruhan data barang yang sudah admin input sebelumnya. Berikut ini adalah rancangan antar muka halaman barang admin:

House of Shoes Store Admin

Dashboard Barang Penjualan Barang Laporan Search.. New Barang ·

Data Table Barang

Id Nama Barang Kategori Warna Ukuran Stok Keterangan Harga

Previous Next

Options

Gambar III.15.

(13)

12. Rancangan Antar Muka Halaman New Kategori Admin

Halaman new kategori admin adalah halaman yang menampilkan form untuk menginput data ketegori barang yang baru. Berikut ini adalah gambar rancangan antar muka halaman new kategori admin :

House of Shoes Store Admin

Form Data Kategori Id Kategori

Nama Kategori

Simpan Batal

Gambar III.16.

(14)

13. Rancangan Antar Muka Halaman New Barang Admin

Halaman new barang adalah halaman yang berisikan form input data barang yang baru. Berikut adalah gambar rancangan antar muka halaman new barang admin :

House of Shoes Store Admin

Form Data Kategori Id Barang Nama Barang Simpan Batal Kategori Ukuran Barang Warna Barang Stok Barang Keterangan Barang Input Gambar Chose File Gambar III.17.

Rancangan Antar Muka Halaman New Kategori Admin

(15)

3.2.2 Rancangan Basis Data

Dalam perancangan basis data menghasilkan pemetaan tabel – tabel yang ada didalam web e-commerce Toko Sepatu Store.

A. Entity Relationship Diagram (ERD)

Pelanggan Melakukan Transaksi Memiliki Barang Memiliki Detail Transaksi Memiliki Kategori Memiliki Ongkir 1 M 1 1 1 M 1 1 M Id_pelanggan nama_pelanggan email alamat telpon Password id_transaksi tanggal Id_pelanggan Transfer Total_bayar Id_barang Nama_barang warna harga keterangan gambar kategori Id_barang Jumlah_beli Id_detailtrans Id_transaksi Id_kategori kategori Id_ongkir tujuan Kode_pos Id_ongkir tglkirim 1 Stok Memiliki Id_stok Id_barang ukuran stok M 1 Gambar III.18.

(16)

B. Logical Relational Structure (LRS) barang id_barang * nama_barang kategori warna harga keterangan gambar kategori id_kategori * kategori pelanggan id_pelanggan * nama_pelanggan email alamat telpon password transaksi id_transaksi * tanggal id_pelanggan transfer total_bayar tglkirim detail_transaksi id_detailtrans id_transaksi id_barang jumlah_beli ongkir id_ongkir * tujuan Biaya 1 M 1 1 1 1 1 M 1 1 M Stok id_stok * id_barang ukuran stok M Gambar III.19.

(17)

C. Spesifikasi File

Perancangan sistem penjualan ini menggunakan satu database bernama sepatu dengan 8 tabel didalamnya. Adapun spesifikasi file – file tersebut antara lain, sebagai berikut :

1. Spesifikasi File Admin

Nama database : Sepatu

Nama Table : Admin

Mendia Penyimpanan : Hard disk

Tipe : File Master

Primary Key : id_admin

Organisasi Field : index sequential

Akses File : Random

Panjang Record : 80 bytes

Database Server : MySQL

Server : Apache

Tabel III.1. Tabel Admin

No. Elemen Data Akronim Tipe Panjang Keterangan

1. Identitas Admin Id_admin Integer 10 Primary_key

2. User name admin User_name Varchar 20 -

(18)

2. Spesifikasi File Barang

Nama Table : Barang

Primary Key : id_barang

Server : Apache

Tabel III.2. Tabel Barang

1. Id Barang Id_barang Integer 10 Primary_key

2. Nama Barang Nama_barang Varchar 50 -

3. Kategori Kategori Varchar 10 -

4. Warna Warna Varchar 20 -

5. Harga Harga Integer 15 -

7. Keterangan Keterangan Text - -

(19)

3. Spesifikasi Detail_Transaksi

Nama Table : detail_transaksi

Tipe : File Transaksi

Primary Key : id_detailtrans

Server : Apache

Tabel III.3. Tabel Detail_Transaksi

1. Id detail transaksi Id_detailtrans Integer 25 - 2. Identitas transaksi Id_transaksi Varchar 6 -

3. Id Barang Id_barang Varchar 25 -

4. Jumlah Beli Jumlah_beli Integer 15 -

4. Spesifikasi File Kategori

(20)

Primary Key : id_kategori

Server : Apache

Tabel III.4. Tabel Kategori

1. Id kategori Id_kategori Integer 15 Primary_key

2. Kategori Kategori Varchar 25 -

5. Spesifikasi File Stok

Nama Table : stok

Primary Key : id_stok

(21)

Server : Apache

Tabel III.5. Tabel Stok

1. Id stok Id_stok Integer 10 Primary_key

2. Id barang Id_barang Integer 10 -

3. ukuran Ukuran Integer 11 -

4. Stok Stok Varchar 10 -

6. Spesifikasi File Ongkir

Nama Table : Ongkir

Primary Key : id_ongkir

(22)

Tabel III.6. Tabel Ongkir

1. Id ongkir Id_ongkir Integer 15 Primary_key

2. Tujuan Tujuan Varchar 25 -

3. Biaya Biaya Integer 7 -

7. Spesifikasi File Pelanggan

Nama Table : Pelanggan

Primary Key : id_pelanggan

(23)

Tabel III.7. Tabel Pelanggan

1. Identitas

Pelanggan

Id_pelanggan Integer 10 Primary_key

2. Nama pelanggan Nama_pelanggan _{Varchar 25} _-

3. Email Email Varchar 50 -

4. Alamat Alamat Varchar 25 -

5. Telepon Telepon Varchar 15 -

6. Password Password Varchar 50 -

7. Kode pos Kode_pos Varchar 10 -

8. Id ongkir Id_ongkir Integer 15 -

8. Spesifikasi File Transaksi

Nama Table : Transaksi

Primary Key : id_transaksi

(24)

Tabel III.8. Tabel Transaksi

1. Id transaksi Id_transaksi Varchar 6 Primary_key

2. Id pelanggan Id_pelanggan Integer 15 -

3. Tanggal Tanggal Datetime - -

4. Transfer Transfer Tinyint 1 -

5. Total bayar Total_bayar Float - -

6. Tgl kirim Tglkirim Datetime - -

3.2.3 Rancangan Struktur Navigasi

1. Struktur Navigasi Halaman Pengunjung

Index

Men Women Kids Contact Sign Up Login

Sports Casual Sports Casual Casual Sports Gambar III.20.

(25)

2. Struktur Navigasi Halaman Member

Index

Men Women Kids Invoice Profil Logout

Sports Casual Sports Casual Casual Sports Login Cart Checkout Gambar III.21.

Struktur Navigasi Halaman Pelanggan atau Customer

3. Struktur Navigasi Halaman Admin

Login Index Dashboard Barang Kategori Barang Stok Penjualan

Barang Pelanggan Laporan

Laporan Transaksi Laporan Stok User Data Admin Logout Gambar III.22.

(26)

3.3 Implementasi dan Pengujian Unit 3.3.1. Implementasi

Didalam implementasi ini penulis menjelaskan secara rinci mengenai semua rancangan dokumen masukan, rancangan dokumen keluaran dan spesifikasi program.

1. Implementasi rancangan antar muka

A. Halaman Daftar Member

Jika pengunjung ingin dapat berbelanja dan bertransaksi maka harus menjadi member terlebih dahulu, jika ingin menjadi member maka harus melakukan

pendaftaran melalui form register.

Gambar III.23. Halaman Daftar Member

(27)

B. Halaman Login Member

Jika Pengunjung sudah mendaftar menjadi member, maka pengunjung dapat melakukan login untuk dapat membeli produk yang di inginkan.

Gambar III.24. Halaman Login Member

C. Halaman Produk

Pada Halaman Produk member dapat memilih produk yang di inginkan sesuai dengan selera, berikut adalah tampilan halaman produk.

(28)

Gambar III.25. Halaman Produk

D. Halaman Contact (Catch Us)

Halaman Contact (Catch Us) adalah tempat untuk menghubungi admin, berikut adalah tampilan halaman Contact (Catch Us).

Gambar III.26.

(29)

E. Halaman Cart

Halaman Cart adalah tempat untuk menyimpan produk yang telah dipilih pembeli, jika pembeli ingin membayar langsung dapat memilih Place Order untuk langsung melakukan transaksi pembayaran dan jika pembeli ingin melanjutkan memilih produk lain untuk dibeli maka pembeli bisa memilih Continue to basket untuk memilih produk lain yang ingin dibeli. Berikut adalah tampilan Halaman Cart.

Gambar III.27. Halaman Cart

F. Halaman Rincian Produk

Halaman Rincian Produk berisikan tentang rincian produk yang di inginkan. Beriku adalah tampilannya.

(30)

Gambar III.28. Halaman Rincian Produk

G. Halaman Checkout

Halaman Checkout berisikan form data pembeli untuk mengkorfirmasi pembelian produk. Berikut adalah tampilan Halaman Checkout.

Gambar III.29. Halaman Checkout

(31)

H. Halaman Login Admin

Admin harus melakukan login terlebih dahulu untuk dapat menambah bagian – bagian lain di dalam website, berikut adalah tampilah login admin.

Gambar III.30. Halaman Login Admin

I. Halaman Home Admin (Index)

Halaman Home admin berisikan tabel data barang dan tabel data kategori. Berikut adalah tampilan halaman home admin.

Gambar III.31. Halaman Home Admin

(32)

J. Halaman Barang Admin

Halaman barang admin berisikan data tabel barang. Berikut adalah tampilan halaman barang admin.

Gambar III.32. Halaman Barang Admin

K. Halaman Kategori Admin

Halaman Kategori admin berisikan data tabel kategori. Berikut adalah tampilan halaman kategori admin.

Gambar III.33. Halaman Kategori Admin

(33)

L. Halaman New Kategori Admin

Pada Halaman New Kategori Admin menampilkan form untuk meng-input data baru kategori. Berikut adalah tampilan halaman new kategori admin.

Gambar III.34.

Halaman New Kategori Admin

M. Halaman New Barang Admin

Pada Halaman New Barang Admin menampilkan form untuk meng-input data baru barang. Berikut adalah tampilan halaman New Barang admin.

Gambar III.35.

(34)

N. Halaman Laporan Data Transaksi

Pada Halaman Form Laporan Transaksi berisikan tabel data hasil transaksi. Berikut adalah tampilan Form Laporan Transaksi.

Gambar III.36.

Halaman Laporan Data Transaksi

O. Halaman Laporan Data Stok Barang

Pada Halaman Form Laporan Data Stok Barang berisikan tabel data jumlah stok yang tersedia. Berikut adalah tampilan Halaman Laporan Data Stok Barang.

Gambar III.37.

(35)

2. Spesifikasi Sistem Komputer

Perangkat keras (Hardware) dan Perangkat lunak (Software) yang dibutuhkan untuk penerapan suatu perancangan web harus sesuai dengan kecepatan dan kapasitas memori komputer, karena bila komputer yang digunakan memiliki kapasitas memori dengan kecepatan rendah maka akan mempengaruhi jalannya performa sistem yang digunakan.

A. Spesifikasi Perangkat keras (Hardware)

Spesifikasi Perangkat keras (Hardware) komputer yang digunakan dalam sitem penjualan sepatu berbasis web adalah :

1. Processor : Intel® Dual Core B800 1.56Hz

2. RAM : 2 GB

3. Harddisk : 320 GB

4. Disk Drive : DVD RW 52x

5. Keyboard : 105 Key

6. Monitor : Generic PnP Monitor

B. Spesifikasi Perangkat Lunak (Software)

Spesifikasi Perangkat Lunak (Software) komputer yang digunakan dalam sitem penjualan sepatu berbasis web adalah :

1. Sistem Operasi : Windows 7 Ultimate 64-bit

2. Program Aplikasi : Adobe Dreamweaver CS5, Photoshop Cs3 Portable

(36)

4. Web Server : Apache

5. Browser : Google Chrome

3.3.2. Pengujian Unit

Dalam Pengujian Perangkat lunak ini, penulis menggunakan suatu metode yang berfokus pada persyaratan fungsional perangkat lunak yang dibuat. Metode yang diambil adalah metode Black Box. Pengujian Black Box adalah pengujian yang sistemnya tanpa memperhatikan struktur logika internal perangkat lunak. Metode ini digunakan untuk mengetahui apakah perangkat lunak berfungsi dengan benar. Berikut ini adalah hasil pengujian unit :

1. Pengujian Login ( Admin )

Tabel III.9.

Pengujian Login ( Admin )

2. Pengujian Login ( Member )

Tabel III.10.

Pengujian Login ( Member )

Kasus Dan Hasil Uji ( Data Normal )

Data Masukan Yang Diharapkan Pengamatan Kesimpulan

Email dan Menampilkan Tampil halaman [X] Diterima

Username dan Password Menampilkan Halaman Admin Tampilan Admin berhasil [X] Diterima [ ] Ditolak Kasus Dan Hasil Uji ( Data Salah )

Username dan Password kosong

atau tidak ada dalam database Username dan Password Salah Menampilkan Pesan kesalahan Login [X] Diterima [ ] Ditolak

(37)

Password halaman index member

index berhasil [ ] Ditolak

Kasus Dan Hasil Uji ( Data Salah )

Email dan Password salah atau kosong Email dan Password salah Pesan Kesalahan Login [X] Diterima [ ] Ditolak

3. Pengujian Data Pendaftar Member

Tabel III.11.

Pengujian Data Pendaftar Member

Data Masukan Yang

Diharapkan

Pengamatan Kesimpulan

Mengisi semua data yang ada

pada form pendaftaran Pengisian data berhasil tersimpan dalam database Data berhasil disimpan dan muncul pesan : Data Anda berhasil tersimpan [X] Diterima [ ] Ditolak

Diharapkan

Mengosongkan salah satu isian yang wajib di isi

pada form

Pesan : bahwa harap mengisi kolom yang tidak

terisi data

Pesan : bahwa harap megisi setiap kolom yang

tidak terisi data

[X] Diterima [ ] Ditolak

4. Pengujian Tambah Produk

Tabel III.12.

Pengujian Tambah Produk

Diharapkan

Mengisi semua data yang ada pada form produk

baru Pengisian data berhasil tersimpan dalam database dan menampilkan halaman admin daftar produk Data berhasil disimpan dalam database dan muncul pesan : Data anda berhasil

tersimpan dan

(38)

menampilkan halaman admin

daftar produk Kasus Dan Hasil Uji ( Data Salah )

Diharapkan

Pesan : Bahwa harap mengisi kolom yang tidak

terisi

terisi data

5. Pengujian Tambah Kategori

Tabel III.13.

Pengujian Tambah Kategori

Diharapkan

Mengisi semua data yang ada pada form produk

baru Pengisian data berhasil tersimpan dalam database dan menampilkan halaman admin daftar produk Data berhasil disimpan dalam database dan muncul pesan : Data anda berhasil

tersimpan dan menampilkan halaman admin daftar produk [X] Diterima [ ] Ditolak

Diharapkan

terisi

terisi data

(39)

a. Kesimpulan Hasil Pengujian

Berdasarkan hasil pengujian dengan kasus sample uji diatas, dapat disimpulkan bahwa perangkat lunak website House of Shoes Store dapat berjalan dengan baik dan secara fungsional sistem dapat menghasilkan output yang diharapkan.