a. dapat menambah, mengubah dan menghapus ongkos kirim. … · 22 a. dapat menambah, mengubah dan...

22

a. Dapat menambah, mengubah dan menghapus ongkos kirim.

b. Dapat melihat laporan penjualan.

c. Dapat melakukan logout.

2. Member

a. Dapat melihat website dan informasi produk.

b. Dapat memberikan umpan balik ke administrator.

c. Dapat melakukan transaksi pembelian.

3. Pengunjung

a. Dapat melihat website dan informasi produk di website.

b. Dapat memberikan umpan balik ke admin.

c. Dapat menjadi anggota (member).

B. Kebutuhan sistem

Kebutuhan sistem disini adalah kebutuhan akan elemen-elemen pendukung

jalannya sistem web e-commerce yang dibuat penulis dimana customer atau

pengguna harus terdaftar dan login terlebih dahulu untuk berbelanja, adanya form

login admin untuk mengakses back end, adanya form login customer untuk bisa

mengakses transaksi pembelian, mengirim testimoni serta pertanyaan yang ingin di

sampaikan mengenai pembelian dan menyediakan informasi detail mengenai

produk jam tangan yang dijual.

23

1. Perancangan Perangkat Lunak

Perancangan perangkat lunak adalah disiplin manajerial dan teknis yang

berkaitan dengan pembuatan dan pemeliharaan produk perangkat lunak secara

sistematis, termasuk pengembangan dan modifikasinya yang dilakukan dengan

tepat.

3.2. Rancangan Dokumen

A. Rancangan Dokumen Masukan (Input)

Rancangan dokumen masukan berfungsi untuk menjelaskan mengenai

semua dokumen input yang digunakan pada web penjualan pakaian

distro.Dokumen masukan yang digunakan adalah sebagai berikut:

1. Nama Dokumen : Data Barang

Fungsi : Untuk Menginput Data Barang

Sumber : Barang

Tujuan : Admin

Media : Kertas

Jumlah : Satu Lembar

Frekuensi : Setiap terjadi penambahan data baru

Bentuk : Lampiran A.1.

2. Nama Dokumen : Data Pesanan

Fungsi : Untuk melihat data order

Sumber : Pesanan

Tujuan : Admin

24

Media : Kertas

Jumlah : Satu lembar

Frekuensi : Setiap terjadi transaksi


3. Nama Dokumen : Data Ongkir

Fungsi : Untuk menginput data ongkir

Sumber : Barang

Tujuan : Admin

Media : Kertas


Frekuensi : Setiap menginput data ongkir


4. Nama Dokumen : Daftar pelanggan

Fungsi : Untuk menjadi pelanggan

Sumber : Pelanggan

Tujuan : Admin

Media : Kertas


Frekuensi : Setiap kali mendaftar


25

B. Rancangan Dokumen keluaran (ouput)

Rancangan dokumen keluaran berfungsi untuk menjelaskan mengenai

semua dokumen input yang digunakan pada web penjualan pakaian distro.

Dokumen masukan yang digunakan adalah sebagai berikut:

1. Nama Dokumen : Laporan barang

Fungsi : Sebagai bukti laporan barang

Sumber : User

Tujuan : Admin

Media : Kertas


Frekuensi : Setiap satu bulan sekali

Bentuk :Lampiran B.1.

2. Nama Dokumen : Laporan pelanggan

Fungsi : Sebagai bukti laporan pelanggan

Sumber : User

Tujuan : Admin

Media : Kertas



Bentuk : Lampiran B.2

26

3. Nama Dokumen : Laporan Pengiriman

Fungsi : Sebagai bukti laporan pengiriman

Sumber : User

Tujuan : Admin

Media : Kertas



Bentuk : Lampiran B.3.

3.3. Rancangan Basis Data

Basis data dapat didefinisikan sebagai himpunan kelompok data yang saling

berhubungan yang diorganisasikan sedemikian rupa agar kelak dapat dimanfaatkan

kembali dengan cepat dan mudah.

27

3.3.1,Entity Relationship Diagram (ERD)

konfirmasikonfirmasi

Melakukan Melakukan Pelanggan Pelanggan

Melakukan Melakukan

Memiliki Memiliki pemesananpemesanan Memiliki Memiliki Pemesanan_detailPemesanan_detail

Memiliki Memiliki

barangbarangMemiliki Memiliki

Kota Kota

No_pesanNo_pesan

jumbayjumbay

Tgl_bayar Tgl_bayar

Dari_bankDari_bank

gambargambar

Dari_rekDari_rek

No_pesanNo_pesan

kodekode

jumlahjumlah

Id_kotaId_kotaOngkos_kirimOngkos_kirim

Nm_kotaNm_kota

No_pesanNo_pesan

Tgl_pesanTgl_pesan

Jam_pesanJam_pesan

statusstatus

Id_kotaId_kota

usernameusername

Kode Kode

Nm_barangNm_barang

Deskripsi Deskripsi Harga Harga

stokstok

kategorikategori

Gambar Gambar

Nm_pelangganNm_pelanggan

Pass_pelangganPass_pelangganNama Nama

Alamat pelangganAlamat pelanggan

Tlp_pelangganTlp_pelanggan

Email_pelangganEmail_pelanggan

Nm_pelangganNm_pelanggan

1

1

1

1

1

1

1

1

M1

1

M

Gambar III.1.

Entity Relationship Diagram (ERD)

3.3.2.Logical Record Structure (LRS)

28

Pelanggan

Nm_pelanggan

Pass_pelanggan

Nama

Alamat_pelanggan

Tlp_pelanggan

Email_pelanggan

Pemesanan

No_pesan *

Tgl_pesan

Jam_pesan

Status

Username

Id_kota

Id_kota *

Nm_kota

Ongkos_kirim

kota

No_pesan *

Jumbay

Tgl_bayar

Dari_bank

Dari_rek

Gambar

Nm_pelanggan

konfirmasi

Barang

Kode *

Nm_barang

Deskripsi

Harga

Stok

Kategori

Gambar

No_pesan

Kode

Jumlah

Pemesanan_detail

1 1M

1 1

1

1

M

1

1

Gambar III.2. Logical Relationship Structure (LRS)

3.4. Spesifikasi File

1. Spesifikasi Tabel Admin

29

Nama File : Admin Akronim admin

Fungsi : Untuk menyimpan data admin

Tipe File : File Master

Organisasi File : Index Sequential

Akses File : Random

Media : Hardisk

Panjang Record: 30

Kunci Fieldid_admin

Software : Mysql

No Elemen Data Nama Field Type Size Keterangan

1 id_admin id_admin Int 2 Primary Key

2 Username id_kategori Varchar 20

3 pass_admin pass_admin Varchar 8

Tabel III.1. Spesifikasi File Admin

2. Spesifikasi Tabel Barang

Nama File : Barang

Akronim : barang

Fungsi : Untuk menyimpan data-data barang



Akses File : Random

Media : Hardisk

30

Panjang : Record177

Kunci ; Field kode

Software : Mysql


1 Kode Kode Varchar 5 Primary Key

2 nm_barang nm_barang Varchar 35

3 Deskripsi Deskripsi Text

4 Harga Harga Int 9

5 Stok Stok Varchar 8

6 Kategori Kategori Varchar 20

7 Gambar Gambar Varchar 100

Tabel III.2. Spesifikasi File Barang

3. Spesifikasi Tabel Kantong

Nama File : Kantong

Akronim : kantong

Fungsi : Untuk menyimpan order yang masuk



Akses File : Random

Media : Hardisk

31

Panjang Record : 52 Kunci Field id_kantong

Software : Mysql


1 id_kantong id_kantong Int 11

Primary

Key

2 Kode Kode Varchar 5

3 Jumlah Jumlah Int 11

4 tgl_kantong tgl_kantong Date

5 jam_kantong jam_kantong Time

6 Username Username Varchar 25

Tabel III.3. Spesifikasi File Kantong

4. Spesifikasi Tabel Konfirmasi

Nama File : Konfirmasi

Akronim : konfirmasi

Fungsi : Untuk mengkonfirmasi data pemesanan produk

Tipe File : File transaski


Akses File : Random

Media : Hardisk

32

Panjang Record : 201

Kunci : Field Software Mysql


1 no_pesan no_pesan Varchar 20

2 Jumbay Jumbay Int 11

3 tgl_bayar tgl_bayar Date

4 dari_bank dari_bank varchar 25

5 dari_rek dari_rek varchar 30

6 Gambar Gambar varchar 100

7 nm_pelanggan nm_pelanggan varchar 15

Tabel III.4.Spesifikasi File Konfirmasi

5. Spesifikasi Tabel Kota

Nama File : Kota

33

Akronim : kota Fungsi Untuk menyimpan nama kota pengiriman

produk : Tipe File File Master


Akses File : Random

Media : Hardisk

Panjang Record 46Kunci Field: id_kotaSoftware Mysql


1 id_kota id_kota Int 5 primery key

2 nm_kota nm_kota Varchar 30

3 ongkos_kirim ongkos_kirim Int 11

Tabel III.5. Spesifikasi File Kota

6. Spesifikasi Tabel Pelanggan

Nama File Pelanggan Akronim : pelanggan

Fungsi: Untuk menyimpan data pelanggan



Akses File : Random

Media : Hardisk

Panjang Record “ : 170

Kunci Field -Software: Mysql

34


1 nm_pelanggan nm_pelanggan Varchar 50

2 Q pass_pelanggan Varchar 8

3 Nama Nama Varchar 30

4 alamat_pelanggan alamat_pelanggan Varchar 50

5 tlp_pelanggan tlp_pelanggan Varchar 12

6 email_pelanggan email_pelanggan Varchar 20

Tabel III 6.Spesifikasi Tabel Pemesanan

7. Nama File : Pemesanan

Akronim : Pemesanan

Fungsi : Untuk memesan barang



Akses File : Random

Media : Hardisk

Panjang Record : 85

Kunci Field : no_pesan


35

Tabel III.7. Spesifikasi File Pemesanan

1 no_pesan no_pesan Varchar 10 primery key

2 tgl_pesan tgl_pesan Date

3 jam_pesan jam_pesan Time

4 Status Status Varchar 20

5 Username Username Varchar 50

6 id_kota id_kota Int 5

36

8. pesifikasi Tabel Pemesanan_detail

Nama File : Pemesanan_detail

Akronim : pemesanan_detail

Fungsi : Untuk menyimpan detail pemesanan

Tipe File : File transaksi


Akses File : Random

Media : Hardisk

Panjang Record: 33

Kunci Field: -

Tabel III.8. Spesifikasi File Pemesanan_detail

9. Spesifkasi Tabel Pengiriman

Nama File : Pengiriman

Akronim : pengiriman

Fungsi : Untuk data pengiriman

No Elemen Data Nama Field Type Size

Keteranga

n

1 no_pesan no_pesan varchar 12

2 Kode Kode varchar 10

3 Jumlah Jumlah Int 11

37



Akses File : Random

Media : Hardisk

Panjang Record : 17

Kunci Field : id_kirim

Software : Mysql

Tabel III.9. Spesifikasi File Pengiriman

10. Spesifikasi Tabel Testimonialtbl

Nama File : Testiminialtbl

Akronim : testimonialtbl

Fungsi: Untuk memberi feedback


1 id_kirim id_kirim Int 11 primery key

2 jam_kirim jam_kirim Time

3 tgl_kirim tgl_kirim Date

4 no_pesan no_pesan varchar 6

38



Akses File : Random

Media : Hardisk

Panjang Record: 61

Kunci Field: id_testimonial dan testimonial

Software: Mysq

No Elemen Data Nama Field Type Size

Keteranga

n

1 id_testimonial id_testimonial Int 11

primery

key

2 Nama Nama varchar 30

3 Email Email varchar 20

4 Testimonial Testimonial Text

primery

key

Tabel III.10. Spesifikasi File Testimonialtbl

39

3.5. Rancangan Struktur Navigasi

Struktur navigasi website digunakan untuk menggambarkan secara garis besar

isi dari seluruh situs web dan menggambarkan bagaimana hubungan antara

konten– konten yang ada pada sistem tersebut. Strutur navigasi website Penjualan

Jam Tangan Berbasis Web ini adalah struktur navigasi campuran. Melalui struktur

navigasi website ini, terlihat bagaimana isi dan susunan dari sebuah website secara

menyeluruh. Pembuatan struktur navigasi website ini akan sangat membantu

nantinya ketika akan membantu rancangan seluruh halaman web. Struktur

navigasi website yang baik adalah yang mampu memberitahukan kepada

pengunjung tentang lokasi mereka sekarang, lokasi-lokasi yang bisa di kunjungi

dari lokasi sekarang.

1. Struktur navigasi halaman admin

Struktur navigasi yang digunakan pada halaman admin ini adalah Struktur

Navigasi Campuran (Compisite) yang mana merupakan gabungan dari

struktur linier, non-linier, serta hirarki. Alasan penggunaan struktur navigasi

campuran ini disebabkan karena sifat dari struktur navigasi ini yang sangat

interaktif, dimana akan menghasilkan aplikasi yang membuat pemakainya

dapat dengan leluasa menelusuri program aplikasi ini.

40

Home Admin

Data Barang Data Pesanan Data Admin Data Konfirmasi Data Ongkir

Login Admin

Logout Data Testimonial

Tambah

Barang

Simpan Batal

Tambah

Produk

Detail HapusEdit Hapus

Hapus

Tambah

Data Ongkir

Simpan Batal

Data Pelanggan Laporan

Tabel

Barang

Edit Hapus

Tabel Data

Ongkir

Edit Delete

HapusHapusLaporan Barang

Laporan Pelanggan

Laporan Pengiriman

Download

Download

Download

Gambar III.3.Struktur Navigasi Halaman Admin

2. Struktur navigasi halaman pengunjung

BerandaBeranda

KatalogKatalogBrandaBranda Cara PesanCara Pesan Hubungi KamiHubungi Kami

Konten Konten

41

Gambar III.4. Struktur Navigasi Halaman Pengunjung

3. Struktur navigasi halaman pelanggan

BerandaBeranda

BrandaBranda KatalogKatalog Cara PesanCara Pesan Hubungi KamiHubungi Kami

Detail BarangDetail Barang

BeliBeli

Lanjut BelanjaLanjut Belanja

Konfirmasi Pembayraan Konfirmasi Pembayraan

LoginLogin

LogoutLogout

Keranjang BelanjaKeranjang Belanja

Daftar TransaksiDaftar Transaksi

Konfirmasi PembayraanKonfirmasi Pembayraan

Selesai BelanjaSelesai BelanjaTestimoniTestimoni

InformasiInformasi

Cara BayarCara Bayar Syarat & KetentuanSyarat & Ketentuan

Gambar III.5. Struktur Navigasi Halaman Member

3.6 Impelementasi

A. Implementasi Rancangan Antar Muka

1. Halaman utama

Halaman utama adalah tampilan utama pada saat pelanggan mengunjungi

web inserta halaman tampilan produk.

42

Gambar III.6. Tampilan Halaman Utama

2. Halaman Login admin

Administrator harus login terlebih dahulu untuk bisa menggunakan

konten-konten yang terdapat di halaman admin, jika berhasil akan masuk

ke halaman beranda admin.

43

Gambar III.7. Tampilan Halaman Login Admin

3. Halaman admin

Halaman admin ini digunakan untuk mengelola web. Admin memliki hak

akses penuh dalam menghapus, mengupdate, menambahkan serta

mengubah produk dan data-data yang ada di dalam web ini.

Gambar III.8. Tampilan Halaman Admin

4. Halaman produk

Halaman produk adalah halaman tampilan produk-produk yang ada pada

website penjualan jam tangan, pada halaman ini customer dapat memilih

produk yang diinginkan.

44

Gambar III.9. Tampilan Halaman Produk

5. Halaman keranjang belanja

Halaman ini adalah halaman keranjang belanja (shopping cart), dimana

customer dapat memasukan daftar produk jam tangan yang akan dibeli.

Gambar III.10. Tampilan Halaman Keranjang Belanja

45

6. Halaman konfirmasi data pengiriman

Setelah pelanggan yakin akan barang yang dibeli, selanjutnya akan muncul

form data pengiriman untuk melanjutkan proses pembelian.

Gambar III.11. Tampilan Halaman Konfirmasi Data Pengiriman

7. Halaman detail pembelian

Halaman ini akan muncul setelah customer mengkonfirmasi data

pembeliannya dengan benar, untuk di proses selanjutnya dan menuju

halaman pembayaran.

46

Gambar III.12. Tampilan Halaman Detail Pembelian

8. Halaman konfirmasi pembayaran

Setelah customer mencatat nomor id order, customer diwajibkan mengisi

form konfirmasi pembayaran agar produk yang dibeli segera dikirim.

47

Gambar III.13. Tampilan Halaman Konfirmasi Pembayaran

B. Spesifikasi Sistem Komputer

Dalam pembuatan dan penyusunan website penjualan jam tangan ini

diperlukan 2 bentuk sarana yang penting yaitu:

1. Spesifikasi perangkat keras (Hardware)

a. Server

1. CPU

a. Processor : Intel® Core™ 2Duo/ Core™ 2 Quad

b. Memory : DDR2 667 / 800 SDRAM (4 GB)

c. Hard Disk : 2 GB

2. Mouse.

3. Keyboard.

48

4. Monitor dengan resolusi layar maksimum VESA 1360x768@60Hz.

5. Koneksi internet dengan kecepatan 100Mbps

b. Client

1. CPU

a. Processor : Intel® Core™ i3

b. Memory : RAM 2 GB

c. Hard Disk : 500 GB

2. Mouse.

3. Keyboard.

4. Monitor 14.0” HD LED LCD

5. Koneksi internet dengan kecepatan 2 Mbps

2. Spesifikasi perangkat lunak (Software)

a. Server

1. Sistem operasi : Microsoft Windows 7 Ultimate

2. Aplikasi bundle web server : XAMPP versi 1.8

3. Aplikasi web browser : Mozilla Firefox, Google Chrome

49

No. Skenario pengujian Test case Hasil yang diharapkan Hasil pengujian Kesimpulan

1 Username dan password tidak Username: Sistem akan menolak Sesuai harapan Valid

diisi kemudian klik tombol (kosong) akses pengguna yang

login. Password: akan login dan menampilkan

(kosong) pesan Please fill out this field

2 Mengetikan username dan Username: admin Sistem akan menolak Sesuai harapan Valid

password tidak diisi atau (benar) akses pengguna yang

kosong kemudian klik tombol Password: akan login dan menampilkan

login. (kosong) pesan Please fill out this field

3 Username tidak diisi dan Username: Sistem akan menolak Sesuai harapan Valid

password diisi dengan benar (kosong) akses pengguna yang

kemudian klik tombol login. Password: member akan login dan menampilkan

(benar) pesan Please fill out this field

4 Mengetikan salah satu kondisiUsername: admin Sistem akan menolak Sesuai harapan Valid

salah pada username atau (benar) akses pengguna yang

password kemudian klik Password: 12345 akan login dan me-

tombol login. (salah) nampilkan pesan password

anda salah, kemudian klik

tombol ok untuk kembali ke

form login.

5 Mengetikan username dan Username: admin Sistem menerima Sesuai harapan Valid

password dengan data yang (benar) akses login, kemudian

benar kemudian klik tombol Password: admin menampilkan halaman

login. (benar) utama admin.

b. Client

1. Sistem operasi : Windows 7

2. Aplikasi bundle web server : XAMPP

3. Aplikasi web browser : Mozilla Firefox, Google Chrome

3.7 Pengujian Unit

Pengujian terhadap program yang dibuat menggunakan black box testing

yang fokus terhadap proses pemasukan dan pengeluaran program.

A.Pengujian terhadap halaman login admin

50


1 Username dan password tidak Username: Sistem akan menolak Sesuai harapan Valid

diisi kemudian klik tombol (kosong) akses pengguna yang

login. Password: akan login dan menampilkan

(kosong) pesan Please fill out this field

2 Mengetikan username dan Username: agus Sistem akan menolak Sesuai harapan Valid

password tidak diisi atau [email protected] akses pengguna yang

kosong kemudian klik tombol (benar) akan login dan menampilkan

login. Password: pesan Please fill out this field

(kosong)

3 Username tidak diisi dan Username: Sistem akan menolak Sesuai harapan Valid

password diisi dengan benar (kosong) akses pengguna yang

kemudian klik tombol login. Password: member akan login dan menampilkan

(benar) pesan Please fill out this field

4 Mengetikan salah satu kondisi Username: agus Sistem akan menolak Sesuai harapan Valid

salah pada username atau [email protected] akses pengguna yang

password kemudian klik (benar) akan login dan me-

tombol login. Password: 12345 nampilkan pesan password

(salah) anda salah, kemudian klik

tombol ok untuk kembali ke

form login.

5 Mengetikan username dan Username: agus Sistem menerima Sesuai harapan Valid

password dengan data yang [email protected]

benar kemudian klik tombol (benar) akses login, kemudian

login. Password: agus menampilkan halaman

(benar) utama member.

B. Pengujian terhadap halaman login member.

Tabel III.11Hasil Pengujian Black Box Testing Halaman Login Membe

C. Pengujian terhadap halaman daftar member.

Tabel III.12.

51


1 Tidak mengisi salah satu data Nama : (kosong) Sistem akan menolak Sesuai harapan Valid

yang ingin dimasukkan akses pengguna dan

kemudian klik tombol daftar. menampilkan pesan

Please fill out this field

2 Mengisi semua data yang ingin Data terisi dengan Sistem menerima akses Sesuai harapan Valid

dimasukkan kemudian klik benar. kemudian menyimpan

tombol daftar. data member.


1 Tidak mengisi kategori yang Input kategori : Sistem akan menolak Sesuai harapan Valid

ingin dimasukkan, kemudian (kosong) akses pengguna dan

klik simpan. menampilkan pesan

Please fill out this field.

2 Mengisi kategori yang ingin Input kategori dengan Sistem menerima akses Sesuai harapan Valid

dimasukkan kemudian klik benar. kemudian menyimpan

simpan. kategori baru.


1 Tidak mengisi salah satu data Nama : Sistem akan menolak Sesuai harapan Valid

yang ada di form konfirmasi (kosong). akses pengguna dan

pembayaran. menampilkan pesan


2 Mengisi dengan lengkap data Data terisi dengan Sistem menerima akses Sesuai harapan Valid

yang ada di form konfirmasi lengkap dan benar. kemudian menampilkan

pembayaran. pesan terimakasih telah

mengkonfirmasi pembayaran

anda.

Hasil Pengujian Black Box Testing Halaman Daftar Member

D. Pengujian terhadap form kategori.

Tabel III.13.Hasil Pengujian Black Box Testing Tambah Kategori

E.Pengujian terhadap konfirmasi pembayaran.

Tabel III.14. Hasil Pengujian Black Box Testing Konfirmasi Pembayaran

52


1 Tidak mengisi salah satu data Nama produk: Sistem akan menolak Sesuai harapan Valid

di form produk. (kosong). akses pengguna dan

menampilkan pesan


2 Mengisi dengan lengkap data Data terisi dengan Sistem menerima akses Sesuai harapan Valid

yang ada di form tambah lengkap dan benar. kemudian menampilkan

produk. pesan data berhasil di simpan.

F. Pengujian terhadap tambah produk.

Tabel III.15. Hasil Pengujian Black Box Testing Tambah Produk

a. dapat menambah, mengubah dan menghapus ongkos kirim. … · 22 a. dapat menambah, mengubah dan...

Documents