1) Member mengisi data member untuk membuat akun. diproses dan barang akan dikirim ke pembeli

(1)

C. Member

1) Member mengisi data member untuk membuat akun

2) Member lalu mengisi detail pengiriman untuk dapat melihat produk

serta memasukkan ke Cart lalu pilih Payment yang telah di beli

3) Member dapat mengisi konfirmasi pembayaran lalu transaksi dapat

diproses dan barang akan dikirim ke pembeli

3.1.2. Kebutuhan Sistem

Kebutuhan sistem untuk member yaitu menyediakan form pendaftaran bagi pengunjung yang ingin menjadi member, menyediakan layanan untuk comment, menyediakan layanan transaksi pembelian, memberikan informasi produk yang dijual.

3.2 Perancangan Perangkat Lunak

3.2.1. Rancangan Antar Muka

Menjelaskan rancangan antarmuka (interface) yang terdapat pada website

(2)

A. Rancangan Antarmuka Login Admin

.

Gambar III.1 Rancangan Login Admin

B. Rancangan Antarmuka Halaman Admin

Gambar III.2 Rancangan Halaman Admin

Login Admin

Username :

Password :

xxxxx xxxxxxxx login

KONTAK ADMIN

Home Profil Cara pembelian Ongko skirim Hubungi kami Kategori Produk Pesanan Ganti pass Logout

Content

(3)

C. Rancangan Antarmuka Pendaftaran Customers Daftar Customer Baru

Gambar III.3 Rancangan Pendaftaran Customer

D. Rancangan Antarmuka Login Customer

Gambar III.4 Rancangan Login Customer Nama Lengkap

Password Alamat

Alamat pengiriman harus diisi lengkap, termasuk kota/kabupaten dan kode posnya.

Telpon/HP Email Kota Tujuan

*Ongkos kirim dihitung berdasarkan kota tujuan

(Masukkan 6 kode diatas) -pilih kota-

Kode Barcode

Daftar

Silahkan Login Dahulu

Email Password

(4)

E. Rancangan Antarmuka Halaman Utama

Gambar III.5 Rancangan Halaman Utama

Header

Slider

Footer

Main Content

Side Bar

(5)

F. Rancangan Antarmuka Hubungi Kami

Gambar III.6 Rancangan Hubungi Kami

3.2.2. Rancangan Basis Data

Perancangan basis data menghasilkan pemetaan tabel-tabel yang digambarkan dengan Entity Relationship Diagram (ERD).

Hubungi Kami Nama Email Subjek

Pesan

(Masukkan 5 kode diatas)

(6)

A. Entity Relationship Diagram (ERD) 1 1 1 M 1 1 M 1 M 1 M Gambar III.7 Entity Relationship Diagram (ERD)

Berat Gambar Id_Orders Meme san Memiliki Katagori Nama_Katagori Id_Katagori Id_Orders Id_Customer Memuat Deskripsi Tgl_Masuk Stok Harga Id_Katagori Id_Produk Menginput OngkosKirim Id_Kota Ongkos_Kirim Id_customer Orders Produk Customer Password Nama_Lengkap Alamat Email Telepon Id_Kota Melak ukan Status_Order Tgl_Order Detail_Orders Jam_Order Jumlah Id_Produk Nama_Produk Diskon Dibeli Nama_kota

(7)

B. Logical Relational Structure (LRS) 1 1 M M 1 M M 1 1 1

Gambar III.8 Logical Relationship Structur (LRS)

Customer Id_Customer ** Password Nama_Lengkap Alamat Email Telepon Id_Kota * Orders Id_Orders ** Status_Orders Jam_Orders Id_Customer * Order_Details Id_Orders * Id_Produk * Jumlah Produk Id_Produk ** Id_Katagori * Nama_Produk Produk_Seo Deskripsi Harga Stok Berat Tgl_Masuk Gambar Dibeli Diskon Merk Katagori Id_Katagori ** Nama_Katagori Katagori_Seo Ongkos Kirim Id_Kota ** Nama_Kota Ongkos_Kirim

(8)

C. Spesifikasi File

Menjelaskan tentang file atau tabel yang terbentuk dari transformasi ERD.

File ini tersimpan pada database dengan ketentuan sebagai berikut:

1. Spesifikasi Tabel Admin

Nama File : Admin

Akronim : Admin

Fungsi : Untuk menyimpan semua pembelian

Tipe File : File Master

Organisasi File : Indexed Sequential

Aksi File : Random

Media : Hardisk

Panjang Record : 81 Karakter

Kunci Field : id_admin

Software : Mysql

Tabel III.1 Spesifikasi Tabel Admin

No Elemen Data Nama Field Tipe Size Ket

1 Nomor Id Admin id_admin Int 11 Primary Key

2 Username Username Varchar 20

3 Nama Admin Namalengkap Text

(9)

2. Spesifikasi Tabel Kategori

Nama File : Kategori

Akronim : Kategori Produk

Fungsi : Untuk menyimpan kategori produk

Aksi File : Random

Media : Hardisk

Kunci Field : id_kategori

Software : Mysql

Tabel III.2 Spesifikasi Tabel Kategori

1 Nomor Id id_kategori Int 5 Primary Key

2 Nama nama_kategori Varchar 25

3 Kategori kategori_seo Varchar 20

3. Spesifikasi Tabel Customer

Nama File : Customer

Akronim : Member

Fungsi : Untuk menyimpan data pembeli

(10)

Aksi File : Random

Media : Hardisk

Kunci Field : id_customer

Software : Mysql

Tabel III.3 Spesifikasi Tabel Customer

1 Nomor Id id_customer Int 5 Primary Key

2 Password Password Varchar 15

3 Nama nama_lengkap Text

4 Alamat Alamat Text

5 Email Email Varchar 25

6 No Telpon Telpon Varchar 12

7 No Kota id_kota Int 5

4. Spesifikasi Tabel Ongkos Kirim

Nama File : Ongkos Kirim

Akronim : Ongkos Kirim

Fungsi : Untuk menyimpan biaya pengiriman

(11)

Aksi File : Random

Media : Hardisk

Kunci Field : id_kota

Software : Mysql

Tabel III.4 Spesifikasi Tabel Ongkos Kirim

1 Nomor Id id_kota Int 3 Primary Key

2 Nama Kota nama_kota Varchar 10

3 Ongkos Kirim ongkos_kirim Int 10

5. Spesifikasi Tabel Orders

Nama File : Orders

Akronim : Pemesanan Produk

Fungsi : Untuk menyimpan data pemesanan produk

Tipe File : File Transaksi

Aksi File : Random

Media : Hardisk

(12)

Software : Mysql

Tabel III.5 Spesifikasi Tabel Orders

1 Nomor Id id_orders Int 5 Primary Key

2 Status status_order Text

3 Tanggal tgl_order Date

4 Jam jam_order Time

5 Nomor customer id_customer Int 5

6. Spesifikasi Tabel Orders Detail

Nama File : Orders Detail

Akronim : Orders Detail

Fungsi : Untuk menyimpan data barang yang dibeli

Tipe File : File Transaksi

Aksi File : Random

Media : Hardisk

Kunci Field : id_orders

(13)

Tabel III.6 Spesifikasi Tabel Orders Detail

1 Nomor Id id_orders Int 5 Primary Key

2 Nomor Produk id_produk Int 5

3 Jumlah Jumlah Int 5

7. Spesifikasi Tabel Produk

Nama File : Produk

Akronim : Produk

Fungsi : Untuk menyimpan data produk

Aksi File : Random

Media : Hardisk

Kunci Field : id_produk

Software : Mysql

Tabel III.7 Spesifikasi Tabel Produk

(14)

2 Nomor Kategori id_kategori Int 5

3 Nama Produk nama_produk Varchar 25

4 Produk produk_seo Varchar 50

5 Deskripsi Deskripsi Text

6 Harga Harga Int 20

7 Stok Stok Int 5

8 Berat Berat Decimal 10,0

9 Tanggal Masuk tgl_masuk Date

10 Gambar Gambar Varchar 50

11 Beli Dibeli Int 5

12 Diskon Diskon Int 5

3.2.3. Rancangan Struktur Navigasi

Struktur navigasi yang penulis gunakan dalam pembuatan website ini adalah struktur navigasi campuran. Melalui struktur navigasi ini akan terlihat isi beserta seluruh susunan yang ada dalam sebuah website.

(15)

A. Rancangan Struktur Navigasi Halaman Admin

Gambar III.9 Struktur Navigasi Admin Login

Menu Admin

Home Profil Cara Pembelian Ongkos Kirim Hubungi Kami

Kategori Produk Produk Pesanan Ganti Password

Logout

Laporan

Edit Hapus Hapus

(16)

B. Rancangan Struktur Navigasi Halaman Utama

Gambar III.10 Struktur Navigasi Halaman Utama

3.3 Implementasi dan Pengujian Unit

3.3.1. Implementasi

A. Implementasi Rancangan Antarmuka

1) Halaman Login Admin

Administrator harus melakukan login terlebih dahulu untuk dapat menggunakan modul-modul yang tersedia. Jika login berhasil, maka menu-menu yang sesuai dengan kategori user tersebut akan ditampilkan.

Menu Home

Home Profil Hubungi Kami Produk Cara Beli Login or Register Login Register Sign Up Form Account Order Logout

(17)

Gambar III.11 Halaman Login Admin

2) Halaman Beranda Admin

Dihalaman ini administrator dapat menggunakan modul-modul yang telah tersedia. Jika ingin keluar klik logout, maka akan langsung keluar menuju halaman utama.

(18)

3) Halaman Pendaftaran Customer

Untuk mendaftar akun, customer harus melakukan pengisian data terlebih dahulu secara lengkap. Jika berhasil maka customer bisa memakai akun yang sudah dibuat.

Gambar III.13 Halaman Dafta Customer

4) Halaman Login Customer

Customer harus melakukan login terlebih dahulu untuk melakukan pembelian. Jika berhasil maka Customer dapat beli produk yang diinginkannya.

(19)

5) Halaman Beranda Utama

Dihalaman ini Customer dapat melihat halama utama dari website tersebut.

Jika berminat Customer juga dapat membeli produk yang diinginkan.

Gambar III.15 Halaman Beranda Utama

6) Halaman Hubungi Kami

Dihalaman ini customer dapat melakukan comment dengan cara yang ada dihalaman tersebut. Setelah berhasil comment anda akan kami balas.

(20)

Gambar III.16 Halaman Hubungi Kami

B. Spesifikasi Sistem Komputer

Berikut ini adalah spesifikasi perangkat keras dan perangkat lunak minimum yang dibutuhkan untuk mengimplementasikan web e-commerce.

1. Spesifikasi Perangkat Keras

a) Server

1) CPU

(a) Processor Intel® Celeron® (b) RAM 2 GB

(c) Hard Disk 500 GB

2) Mouse 3) Keyboard

4) Monitor dengan resolusi layar minimum 1366x768 5) Koneksi internet dengan kecepatan 2 Mbps

(21)

b) Client

1) CPU

(a) Processor Intel® Pentium® Core 2 Duo (b) RAM 1 GB

(c) Hard Disk 20 GB 2) Mouse

3) Keyboard

4) Monitor dengan resolusi layar minimum 1366x768 5) Koneksi internet dengan kecepatan 1 Mbps

2. Spesifikasi Perangkat Lunak

a) Server

1) Sistem operasi yang umum digunakan seperti: Microsoft Windows 7 2) Aplikasi bundle web server seperti: phpMyAdmin

3) Aplikasi web browser seperti: Mozilla Firefox

b) Client

1) Sistem operasi yang umum digunakan seperti: Microsoft Windows 7 2) Aplikasi web browser seperti: Google Chrome

3.3.2. Pengujian Unit

Pengujian terhadap program yang menggunakan blackbox testing yang fokus terhadap proses masukan dan keluaran program.

(22)

A. Pengujian Terhadap Form Login Admin

Tabel III.8

Hasil Pengujian Black Box Testing Halaman Login Admin

No Skenario pengujian Test Case Hasil yang

diharapkan

Hasil Pengujian

Kesimpulan

1. Username dan

password tidak diisi kemudian klik tombol login Username: (kosong) Password: (kosong) Sistem akan menolak akses user dan menampilkan “Maaf Login Gagal masukan username dan password dengan benar” Sesuai harapan Valid 2. Mengetik username

dan password tidak diisi atau kosong kemudian klik tombol login Username: admin Password: (kosong) Sistem akan menolak akses user dan menampilkan “Maaf Login Gagal masukan username dan password dengan benar” Sesuai harapan Valid 3. Username tidak

diisi (kosong) dan password diisi kemudian klik tombol login Username: (kosong) Password: 12345 Sistem akan menolak akses user dan menampilkan “Maaf Login Gagal masukan username dan password dengan benar” Sesuai harapan Valid

4. Mengetik salah satu

kondisi salah pada username atau password kemudian klik tombol login

Username: admin (benar) Password: 123 (salah) Sistem akan menolak akses user dan menampilkan “Maaf Login Gagal masukan username dan Sesuai harapan Valid

(23)

password dengan benar” 5. Mengetik username dan password dengan benar kemudian klik tombol login Username: admin Password: 12345 Sistem menerima akses login dan kemudian langsung menampilkan menu utama Sesuai harapan Valid

B. Pengujian Terhadap Form Login Customer

Tabel III.9

Hasil Pengujian Black Box Testing Halaman Login Customer

No Skenario

pengujian

Test Case Hasil yang

diharapkan Hasil pengujian Kesimpulan 1. Email dan password tidak diisi kemudian klik tombol login Email: (kosong) Password: (kosong) Sistem akan menolak akses user dan menampilkan” Anda belum mengisikan email” Sesuai harapan Valid 2. Mengetik email dan password tidak diisi atau kosong kemudian klik tombol login Email: Helvien2204@gmail.com Password: (kosong) Sistem akan menolak akses user dan menampilkan” Anda belum mengisikan password” Sesuai harapan Valid

3. Email tidak diisi

(kosong) dan password diisi kemudian klik tombol login Email: (kosong) Password: 1234 Sistem akan menolak akses user dan menampilkan” Anda belum mengisikan email” Sesuai harapan Valid

(24)

satu kondisi salah pada email atau password kemudian klik tombol login Helvien2204@gmail.com (benar) Password: 123 (salah) menolak akses user dan menampilkan” Maaf login gagal, password dan email Anda tidak benar” harapan 5. Mengetik email dan password dengan benar kemudian klik tombol login Email: Helvien2204@gmail.com (benar) Password: 1234 (benar) Sistem menerima akses login dan kemudian langsung menampilkan menu utama Sesuai harapan Valid

C. Pengujian Terhadap Form Tambah Produk

Tabel III.10

Hasil Pengujian Black Box Testing Halaman Tambah Produk

No Skenario pengujian Test Case Hasil yang

diharapkan Hasil penguji Kesimpulan 1. Nama produk, Kategori, Berat, Harga, Stok, Deskripsi, Gambar tidak diisi kemudian klik tombol simpan Nama produk: (kosong) Kategori: (kosong) Berat: (kosong) Harga: (kosong) Stok: (kosong) Deskripsi: (kosong) Gambar: (kosong) Sistem akan kembali ke produk dan data tidak tersimpan Sesuai harapan Valid

2. Nama produk diisi

dan Kategori, Berat, Harga, Stok, Deskripsi, Gambar tidak diisi kemudian klik tombol simpan Nama produk: (terisi) Kategori: (kosong) Berat: (kosong) Harga: (kosong) Stok: (kosong) Deskripsi: (kosong) Gambar: (kosong) Sistem akan kembali ke produk dan data tidak tersimpan Sesuai harapan Valid

(25)

3. Nama produk, Kategori diisi dan Berat, Harga, Stok, Deskripsi, Gambar tidak diisi kemudian klik tombol simpan Nama produk: (terisi) Kategori: (terisi) Berat: (kosong) Harga: (kosong) Stok: (kosong) Deskripsi: (kosong) Gambar: (kosong) Sistem akan kembali ke produk dan data tidak tersimpan Sesuai harapan Valid 4. Nama produk Kategori, Berat diisi dan Harga, Stok, Deskripsi, Gambar tidak diisi kemudian klik tombol simpan Nama produk: (terisi) Kategori: (terisi) Berat: (terisi) Harga: (kosong) Stok: (kosong) Deskripsi: (kosong) Gambar: (kosong) Sistem akan kembali ke produk dan data tidak tersimpan Sesuai harapan Valid 5. Nama produk, Kategori, Berat, Harga diisi dan Stok, Deskripsi, Gambar tidak diisi kemudian klik tombol simpan Nama produk: (terisi) Kategori: (terisi) Berat: (terisi) Harga: (terisi) Stok: (kosong) Deskripsi: (kosong) Gambar: (kosong) Sistem akan kembali ke produk dan data tidak tersimpan Sesuai harapan Valid 6. Nama produk, Kategori, Berat, Harga, Stok diisi dan Deskripsi, Gambar tidak diisi kemudian klik tombol simpan Nama produk: (terisi) Kategori: (terisi) Berat: (terisi) Harga: (terisi) Stok: (terisi) Deskripsi: (kosong) Gambar: (kosong) Sistem akan kembali ke produk dan data tidak tersimpan Sesuai harapan Valid 7. Nama produk, Kategori, Berat, Harga, Stok, Deskripsi diisi dan Gambar tidak diisi kemudian klik tombol simpan Nama produk: (terisi) Kategori: (terisi) Berat: (terisi) Harga: (terisi) Stok: (terisi) Deskripsi: (terisi) Gambar: (kosong) Sistem akan kembali ke produk dan data tidak tersimpan Sesuai harapan Valid 8. Nama produk, Kategori, Berat, Harga, Stok, Deskripsi, Gambar Nama produk: (terisi) Kategori: (terisi) Berat: (terisi) Sistem akan menyimpan data dan data yang tersimpan

Sesuai harapan

(26)

diisi kemudian klik tombol simpan Harga: (terisi) Stok: (terisi) Deskripsi: (terisi) Gambar: (terisi) akan muncul di produk