BAB III PEMBAHASAN. memudahkan proses penjualan pada sebuah toko, maka diperlukan suatu website

(1)

26 3.1. Analisa Kebutuhan

Analisa kebutuhan merupakan analisis terhadap semua kebutuhan yang

diperlukan didalam lingkup perangkat lunak yang akan dikembangkan. Untuk

memudahkan proses penjualan pada sebuah toko, maka diperlukan suatu website

penjualan yang dapat memberikan kemudahan dalam melakukan promosi,

memudahkan pelanggan dalam melakukan pencarian barang, seperti jenis barang,

spesifikasi barang dan harga barang.

3.1.1. Analisis Kebutuhan Pengguna

Pada aplikasi pengguna e-commerce terdapat pengguna yang saling

berinteraksi dalam lingkungan sistem, yaitu pengunjung, pelanggan, dan admin.

Setiap pengguna mempunyai kebutuhan informasi yang berbeda, yaitu:

1. Kebutuhan Pengunjung

a. Melihat Barang yang dijual dalam website

b. Mendaftar sebagai pelanggan

c. Melihat Kategori Barang

d. Melihat Panduan Belanja

2. Kebutuhan pelanggan

a. Melihat panduan belanja

b. Melihat barang yang dapat langsung dicari dengan kategori

c. Melakukan pemesanan

(2)

e. Melakukan konfirmasi belanja

f. Melihat transaksi terakhir

3. Kebutuhan Admin

a. Mengelola data Barang

b. Mengganti Password Admin

c. Mengelola data kategori

d. Mengelola data Pelanggan

e. Mengelola data transaksi

f. Mengelola data Konfirmasi

g. Mengelola profil website

h. Mengelola hasil laporan penjualan

3.1.2. Kebutuhan Sistem

1. Pengunjung harus daftar menjadi pelanggan terlebih dahulu untuk dapat

membeli barang.

2. Pelanggan harus login sebelum memilih barang yang diinginkan lalu

melakukan transaksi.

3. Admin harus login terlebih dahulu untuk dapat masuk ke halaman utama

menu admin.

4. Admin harus login supaya dapat mengelola website tersebut.

5. Sistem akan otomatis memasukkan data barang, data pelanggan, data

pemesanan masuk, dan data pemesanan masuk lunas ke dalam laporan.

6. Sistem akan otomatis menambah kategori dan barang ketika admin

(3)

3.2. Perancangan Perangkat Lunak

Tujuan perancangan perangkat lunak adalah menghasilkan suatu model

atau penggambaran dari suatu entity yang akan dibangun pada penulis dalam

membuat website.

3.2.1. Rancangan Antar Muka

Berikut ini adalah rancangan antar muka pada website e-commerce yang

telah penulis buat:

A. Rancangan antar muka Admin.

1. Rancangan antar muka login admin

Gambar III.1.

(4)

2. Rancangan antar muka home admin

Gambar III.2.

Rancangan antar muka home admin

3. Rancangan antar muka password admin

Gambar III.3.

Rancangan antar muka password admin

 Home Selamat datang...!

 Password Admin Anda login sebagai Administrator

 Data Provinsi  Data Kategori  Data Barang  Data Pelanggan  Pemesanan Barang  Konfirmasi Transfer  Laporan  Logout

Header

 Home  Password Admin  Data Provinsi  Data Kategori  Data Barang  Data Pelanggan  Pemesanan Barang  Konfirmasi Transfer  Laporan  Logout

Header

GANTI PASSWORD ADMIN

Username : admin Password Lama : Password Baru : xxxxxxxx xxxxxxxx SIMPAN

(5)

4. Rancangan antar mukadata provinsi

Gambar III.4.

Rancangan antar muka data provinsi

5. Rancangan antar muka ubah data provinsi

Gambar III.5.

Rancangan antar muka ubah data provinsi

Header

DATA PROVINSI

+ Add Data

No. Nama Provinsi Biaya Kirim (Rp) Tools

9 Xxxxxx 99999 9 Xxxxxx 99999 Edit Delete

Z

Edit Delete

Z

 Home  Password Admin  Data Provinsi  Data Kategori  Data Barang  Data Pelanggan  Pemesanan Barang  Konfirmasi Transfer  Laporan  Logout Header

UBAH DATA PROVINSI

Kode :

Nama Provinsi : Biaya Kirim (Rp) :

(6)

6. Rancangan antar muka data kategori

Gambar III.6.

Rancangan antar muka data kategori

7. Rancangan antar muka ubah data kategori

Gambar III.7.

Rancangan antar muka ubah data kategori

Header

DATA KATEGORI

+ Add Data

No. Nama Kategori Tools

9 Xxxxxx 9 Xxxxxx Edit Delete

Z

Edit Delete

Z

UBAH DATA KATEGORI

Kode :

Nama Kategori : SIMPAN

(7)

8. Rancangan antar muka data barang

Gambar III.8.

Rancangan antar muka data barang

9. Rancangan antar muka ubah data barang

Gambar III.9.

Rancangan antar muka ubah data barang

Header

DATA BARANG

+ Add Data

No. Kode Nama Barang Stok Harga (Rp) Tools 9 X999 xxxxxxxxx 999 999999 9 X999 xxxxxxxxx 999 999999 Edit Delete

Z

Edit Delete

Z

Jumlah Data : Halaman Ke :

UBAH DATA BARANG

Kode :

Nama Barang : Harga Modal (Rp) : Harga Jual (Rp) : Jumlah Stok :

File Gambar : No File Chosen Keterangan :

Kategori :

Choose File

(8)

10.Rancangan antar muka data pelanggan

Gambar III.10.

Rancangan antar muka data pelanggan

11.Rancangan antar muka pemesanan barang

Gambar III.11.

Rancangan antar muka pemesanan barang

Header

DATA PELANGGAN

+ Add Data

No. Kode Nama Pelanggan Kelamin No.Telepon Username Tools 9 X999 xxxxxx xxxxx 999999 xxxxx 9 X999 xxxxxx xxxxx 999999 xxxxx Edit Delete

Z

_Z

Edit Delete

Z

_Z

Z

 Home

 Password Admin

 Data Provinsi

 Data Kategori

 Data Barang Periode : s/d

 Data Pelanggan  Pemesanan Barang  Konfirmasi Transfer  Laporan  Logout Header

DAFTAR PEMESANAN

FILTER DATA 01-07-2017 31-07-2017 Tampilkan

No. No Pesan Tanggal Nama Pelanggan Total Transfer Status Set Bayar Tools 9 X999999 dd-mm-yyyy xxxxxxxxx 9999999 9 X999999 dd-mm-yyyy xxxxxxxxx 9999999 Pesan Pesan Bayar Bayar Lihat Lihat

Z

(9)

12.Rancangan antar muka konfirmasi transfer

Gambar III.12.

Rancangan antar muka konfirmasi transfer

13.Rancangan antar muka laporan

Gambar III.13.

Rancangan antar muka laporan  Home  Password Admin  Data Provinsi  Data Kategori  Data Barang  Data Pelanggan  Pemesanan Barang  Konfirmasi Transfer  Laporan  Logout Header

KONFIRMASI TRANSFER

No. Tanggal No.Pesan Nama Pelanggan Transfer (Rp) Keterangan Tools 9 dd-mm-yyyy X99999 xxxxxxxx 99999999 xxxxxxxx

9 dd-mm-yyyy X99999 xxxxxxxx 99999999 xxxxxxxx Delete Delete

Z Z

Z

Laporan Data Provinsi

Laporan Data Kategori

Laporan Data Barang

Laporan Data Pelanggan

Laporan Pemesanan Masuk - Periode

Laporan Pemesanan Lunas - Tanggal

(10)

14.Rancangan antar muka laporan data provinsi

Gambar III.14.

Rancangan antar muka laporan data provinsi

15.Rancangan antar muka laporan data kategori

Gambar III.15.

Rancangan antar muka laporan data kategori  Home  Password Admin  Data Provinsi  Data Kategori  Data Barang  Data Pelanggan  Pemesanan Barang  Konfirmasi Transfer  Laporan  Logout Header

No Nama Provinsi Biaya Kirim (Rp)

LAPORAN DATA PROVINSI

9

Z

9 XXXXX

Z

XXXXX 99.999

Z

99.999  Home  Password Admin  Data Provinsi  Data Kategori  Data Barang  Data Pelanggan  Pemesanan Barang  Konfirmasi Transfer  Laporan  Logout Header

No Kode Nama Kategori

LAPORAN DATA KATEGORI

9

Z

9 X999

Z

XXXX

Z

XXXX X999

(11)

16.Rancangan antar muka laporan data barang

Gambar III.16.

Rancangan antar muka laporan data barang

17.Rancangan antar muka laporan data pelanggan

Gambar III.17.

Rancangan antar muka laporan data pelanggan

No Kode Nama Kategori Stok H Modal(Rp) H Jual(Rp)

LAPORAN DATA BARANG

9

Z

9 X9999

Z

XXXX

Z

XXXX X9999 KATEGORI BARANG

Pilih Kategori Tampilkan

99

Z

99 99.999 99.999

Z

99.999

Z

99.999

Jumlah Data : Halaman Ke :

No No. Pelanggan Nama Pelanggan Kelamin No. Telepon E-Mail Username

LAPORAN DATA PELANGGAN

9

Z

9 X9999

Z

XXXX

Z

XXXX X9999 XXXX

Z

99999999

Z

Jumlah Data : Halaman Ke :

XXXX XXXX

Z

(12)

18.Rancangan antar muka laporan pemesanan masuk - periode

Gambar III.18.

Rancangan antar muka laporan pemesanan masuk – periode

19.Rancangan antar muka laporan pemesanan lunas – tanggal

Gambar III.19.

Rancangan antar muka laporan pemesanan lunas – tanggal

No Tanggal Kode Plg Nama Pelanggan Total Brang Total Bayar (Rp) Status Tools

LAPORAN PEMESANAN MASUK

9

Z

9 99-99-9999

Z

X99999

Z

X99999 99-99-9999 FILTER DATA Periode : 99-99-9999 9

Z

9 999.999 999.999

Z

XXX

Z

XXX 99-99-9999 s/d Tampilkan

Daftar transaksi periode tanggal pesan s/d

Lihat Lihat XXXXX XXXXX

Z

No Tanggal No. Pemesanan Kode Plg Nama Pelanggan Total Brg Total Belanja (Rp) Tools

LAPORAN PEMESANAN LUNAS PER TANGGAL

FILTER DATA

Tanggal Transaksi : 99-99-9999 Tampilkan

9 9

(13)

20.Rancangan antar muka laporan pemesanan lunas – periode

Gambar III.20.

Rancangan antar muka laporan pemesanan lunas - periode

LAPORAN DATA PEMESANAN LUNAS PER PERIODE

FILTER DATA

Periode Transaksi : 99-99-9999 99-99-9999

s/d Tampilkan

Daftar Transaksi Pemesanan dari tanggal 99-99-9999 s/d 99-99-9999

No Tanggal No. Pemesanan Kode Plg Nama Pelanggan Total Brg Total Belanja (Rp) Tools

9 9

(14)

B. Rancangan antar muka user

1. Rancangan antar muka home user

Gambar III.21.

Rancangan antar muka home user

HEADER

HOME PROFIL BARANG PANDUAN KONFIRMASI

Cari Barang Cari

LOGIN Username : Password : Login > Pendaftaran Baru KOLEKSI BARANG Gambar Beli KATEGORI > Aksesoris Party > Balon > Dekorasi Ruangan > Kartu Ucapan Birthday

Gambar Beli Gambar Beli > Lilin > Pita Bahan > Topi Ulang Tahun > Undangan Birthday

Gambar

Beli

FOOTER

Halaman: [1]

[ Status : Belum Login | User : Tamu ]

ISI KONTEN

(15)

2. Rancangan antar muka profil user

Gambar III.22.

Rancangan antar muka profil user

HEADER

Cari Barang Cari

LOGIN Username : Password : Login > Pendaftaran Baru KATEGORI > Aksesoris Party > Balon > Dekorasi Ruangan > Kartu Ucapan Birthday > Lilin

> Pita Bahan > Topi Ulang Tahun > Undangan Birthday

FOOTER

Icon

(16)

3. Rancangan antar muka barang user

Gambar III.23.

Rancangan antar muka barang user

HEADER

Cari Barang Cari

LOGIN Username : Password : Login > Pendaftaran Baru KOLEKSI BARANG Gambar Beli KATEGORI > Aksesoris Party > Balon > Dekorasi Ruangan > Kartu Ucapan Birthday

Gambar Beli Gambar Beli > Lilin > Pita Bahan > Topi Ulang Tahun > Undangan Birthday

Gambar

Beli

FOOTER

Halaman: [1]

ISI KONTEN

(17)

4. Rancangan antar muka panduan user

Gambar III.24.

Rancangan antar muka panduan user

HEADER

Cari Barang Cari

LOGIN Username : Password : Login > Pendaftaran Baru KATEGORI > Aksesoris Party > Balon > Dekorasi Ruangan > Kartu Ucapan Birthday > Lilin

FOOTER

PANDUAN BELANJA

(18)

5. Rancangan antar muka konfirmasi user

Gambar III.25.

Rancangan antar muka konfirmasi user

6. Rancangan antar muka login user

Gambar III.26.

Rancangan antar muka login user

HEADER

Cari Barang Cari

LOGIN Username : Password : Login > Pendaftaran Baru KONFIRMASI PEMBAYARAN KATEGORI > Aksesoris Party > Balon > Dekorasi Ruangan > Kartu Ucapan Birthday > Lilin

FOOTER

No. Pemesanan Nama Pelanggan Jumlah Transfer (Rp.) : : : Keterangan : Kirim Username : Password : Login > Pendaftaran Baru

(19)

7. Rancangan antar muka keranjang belanja user

Gambar III.27.

Rancangan antar muka keranjang belanja user

HEADER

HOME PROFIL BARANG PANDUAN KONFIRMASI Cari Barang Cari TRANSAKSI > Keranjang Belanja > Tampil Transaksi Keranjang Belanja KATEGORI > Aksesoris Party > Balon > Dekorasi Ruangan > Kartu Ucapan Birthday > Lilin

FOOTER

[ Status : Login | ID User : P00010 ] [ Logout ]

> Logout

Gambar xxxxxxxx Rp.99,999 Gambar Nama Barang Harga (Rp) Jumlah

9 Total (Rp) Rp.99,999 X GRAND TOTAL : Rp.99,999 Ubah Data Keterangan Tombol Simpan Lanjutkan Lanjutkan

(20)

8. Rancangan antar muka tampil transaksi user

Gambar III.28.

Rancangan antar muka tampil transaksi user

HEADER

Cari Barang Cari

TRANSAKSI > Keranjang Belanja > Tampil Transaksi KATEGORI > Aksesoris Party > Balon > Dekorasi Ruangan > Kartu Ucapan Birthday > Lilin

FOOTER

[ Status : Login | ID User : P00010 ] [ Logout ]

> Logout

DAFTAR PEMESANAN

No. No. Pesan Tanggal Nama Penerima

9 XX999999 99-99-9999 xxxxxxxx Total (Rp) Rp.999.999 Biaya Kirim (Rp) Rp.99.999 Status xxxxx Tools xxxxx

(21)

PELANGGAN MELAKUKAN PEMESANAN MEMILIKI PEMESANAN_ITEM Kd_pelanggan Nm_pelanggan Kelamin Email Password No_telepon Username Tgl_daftar Kd_pelanggan No_pemesanan No_pemesanan Status_bayar MELAKUKAN MEMILIKI PROVINSI KONFIRMASI MEMILIKI MEMILIKI BARANG Nm_pelanggan Idkonf Jumlah_transfer Keterangan Tanggal No_pemesanan Idkonf No_pemesanan No_telepon Tgl_pemesanan Nama_penerim a Kode_pos Kd_provinsi Kota Kd_pelanggan Alamat_lengkap Id No_pemesanan Kd_barang Harga Jumlah No_pemesanan Id Id Kd_barang Kd_barang Kd_kategori Kd_provinsi No_pemesanan KATEGORI Kd_kategori Nm_kategori Kd_barang Keterangan Stok Harga_j ual Nm_barang Harga_modal Kd_kategori File_gambar Kd_provinsi Nm_provinsi Biaya_kirim 1 1 1 1 1 1 1 1 M M M M 3.2.2. Basis Data

A. Entity Relationship Diagram (ERD)

Gambar III.29.

(22)

B. Logical Record Structured (LRS) BARANG Kd_barang * Nm_barang Harga_modal Harga_jual Stok Keterangan File_gambar Kd_kategori ** KATEGORI Kd_kategori * Nm_kategori PEMESANAN ITEM Id * No_pemesanan** Kd_barang ** Harga Jumlah PEMESANAN No_pemesanan * Kd_pelanggan ** Tgl_pemesanan Nama_penerima Alamat_lengkap Kd_provinsi ** Kota Kode_pos No_telepon Status_bayar PELANGGAN Kd_pelanggan * Nm_pelanggan Kelamin Email No_telepon Username Password Tgl_daftar PROVINSI Kd_provinsi * Nm_provinsi Biaya_kirim KONFIRMASI Idkonf * No_pemesanan** Nm_pelanggan Jumlah_transfer Keterangan Tanggal M 1 M M 1 M 1 1 1 1 1 1 Gambar III.30.

(23)

C. Spesifikasi File

1. Spesifikasi File Tabel Admin

Nama File : Tabel Admin

Akronim : Admin

Fungsi : Untuk menyimpan data Admin

Tipe File : File Master

Organisasi File : Index Sequential

Akses File : Random

Media File : Harddisk

Panjang Record : 232 Karakter

Kunci Field : id

Software : Xampp

Tabel III.1. Spesifikasi file Admin

2. Spesifikasi File Tabel Barang

Nama File : Tabel Barang

Akronim : Barang

Fungsi : Untuk menyimpan data Barang

No. Elemen Data Akronim Tipe Panjang Keterangan

1. Id Admin Id Int 2 PK

2. Username Username Varchar 30

(24)

Akses File : Random

Kunci Field : kd_barang

Software : Xampp

Tabel III.2. Spesifikasi file Barang

1. Kode Barang Kd_barang Char 5 PK

2. Nama Barang Nm_barang Varchar 100

3. Harga Modal Harga_modal Int 12

4. Harga Jual Harga_jual Int 12

5. Stok Stok Int 4

6. Keterangan Keterangan Text

7. File Gambar File_gambar Varchar 100

(25)

3. Spesifikasi File Tabel Kategori

Nama File : Tabel Kategori

Akronim : Kategori

Fungsi : Untuk menyimpan data Kategori

Akses File : Random

Kunci Field : kd_kategori

Software : Xampp

Tabel III.3. Spesifikasi file Kategori

4. Spesifikasi File Tabel Konfirmasi

Nama File : Tabel Konfirmasi

Akronim : Konfirmasi

Fungsi : Untuk menyimpan data Konfirmasi

Tipe File : File Transaksi

1. Kode Kategori Kd_kategori Char 4 PK

(26)

Akses File : Random

Kunci Field : idkonf

Software : Xampp

Tabel III.4.

Spesifikasi file Konfirmasi

5. Spesifikasi File Tabel Pelanggan

Nama File : Tabel Pelanggan

Akronim : Pelanggan

Fungsi : Untuk menyimpan data Pelanggan

1. Id Konfirmasi Idkonf Int 4 PK

2. No Pemesanan No_pemesanan Varchar 8

3. Nama Pelanggan Nm_pelanggan Varchar 100

4. Jumlah Transfer Jumlah_transfer Int 12

5. Keterangan Keterangan Text

(27)

Akses File : Random

Kunci Field : kd_pelanggan

Software : Xampp

Tabel III.5. Spesifikasi file Pelanggan

6. Spesifikasi File Tabel Pemesanan

Nama File : Tabel Pemesanan

Akronim : Pemesanan

Fungsi : Untuk menyimpan data Pemesanan

No. Elemen Data Akronim Tipe Panjang Keterangan

1. Kode Pelanggan Kd_pelanggan Char 6 PK

2. Nama Pelanggan Nm_pelanggan Varchar 100

3. Kelamin Kelamin

Enum(‘Laki-Laki’,’Pere mpuan’)

4. Email Email Varchar 100

5. No Telepon No_telepon Varchar 20

6. Username Username Varchar 20

7. Password Password Varchar 100

(28)

Akses File : Random

Kunci Field : no_pemesanan

Software : Xampp

Tabel III.6.

Spesifikasi file Pemesanan

1. No Pemesanan No_pemesanan Char 8 PK

2. Kode Pelanggan Kd_pelanggan Char 6

3. Tanggal

Pemesanan

Tgl_pemesanan Date

4. Nama Penerima Nama_penerima Varchar 60

5. Alamat Lengkap Alamat_lengkap Varchar 200

6. Kode Provinsi Kd_provinsi Char 3

7. Kota Kota Varchar 100

8. Kode Pos Kode_pos Varchar 6

9. No Telepon No_telepon Varchar 20

10. Status Bayar Status_bayar Enum(‘Pesa

n’,’Lunas’,’ Batal’)

(29)

7. Spesifikasi File Tabel Pemesanan Item

Nama File : Tabel Pemesanan Item

Akronim : Pemesanan_item

Fungsi : Untuk menyimpan data Pemesanan Item

Akses File : Random

Kunci Field : id

Software : Xampp

Tabel III.7.

Spesifikasi file Pemesanan Item

8. Spesifikasi File Tabel Provinsi

Nama File : Tabel Provinsi

Akronim : Provinsi

1. Id Pemesanan Id Int 4 PK

2. No Pemesanan No_pemesanan Char 8

3. Kode barang Kd_barang Char 5

4. Harga Harga Int 12

(30)

Fungsi : Untuk menyimpan data Provinsi

Akses File : Random

Kunci Field : kd_provinsi

Software : Xampp

Tabel III.8. Spesifikasi file Provinsi

9. Spesifikasi File Tabel Keranjang

Nama File : Tabel Keranjang

Akronim : Tmp_keranjang

Fungsi : Untuk menyimpan data Keranjang Belanja

Akses File : Random

1. Kode Provinsi Kd_provinsi Char 3 PK

2. Nama Provinsi Nm_provinsi Varchar 100

(31)

Kunci Field : id

Software : Xampp

Tabel III.9.

Spesifikasi file Keranjang

3.2.3 Struktur Navigasi

Struktur navigasi pada perlengkapan ulang tahun ini adalah struktur navigasi

campuran (composite). Melalui struktur navigasi ini, terlihat bagaimana isi dan

susunan dari sebuah website secara menyeluruh. Pembuatan struktur navigasi

website ini akan sangat membantu nantinya ketika akan membuat rancangan

seluruh halaman website.

1. Navigasi Halaman Admin

Menu navigasi pada sisi admin adalah sebagai berikut:

1. Id Pelanggan Id Int 5 PK

2. Kode Barang Kd_barang Char 5

3. Harga Harga Int 12

4. Jumlah Jumlah Int 3

5. Tanggal Tanggal Date

(32)

Gambar III.31. Struktur Navigasi Admin

Penjelasan untuk masing-masing halaman admin adalah sebagai berikut:

a. Login admin

Halaman ini yang pertama kali di akses saat seorang admin login untuk

dapat menggunakan modul-modul yang tersedia jika login berhasil.

b. Home

Halaman ini menampilkan tampilan home admin.

c. Password Admin

Halaman ini untuk meng-edit password admin.

d. Data Provinsi

Halaman ini untuk menambahkan data provinsi, meng-edit dan menghapus

(33)

e. Data Kategori

Halaman ini admin dapat melihat daftar kategori untuk semua produk yang

ada. Sebelum menambahkan produk baru, harus dilakukan

pengelompokan produk terlebih dahulu menurut kategori atau jenis produk

tertentu, sehingga nantinya akan mempermudah dalam pencarian atau

pemilihan produk berikutnya. Dalam proses ini, admin perlu memasukkan

kategori-kategori baru jika terdapat beberapa produk yang tidak

memungkinkan untuk dimasukkan kedalam kategori yang sudah ada.

Admin juga bisa meng-edit ataupun menghapus kategori yang sudah ada.

f. Data Barang

Halaman ini admin dapat melihat produk-produk yang telah ada di dalam

database. Admin juga bisa menambah produk baru, meng-edit dan juga menghapus daftar produk yang sudah ada.

g. Data Pelanggan

Halaman ini admin dapat melihat data pelanggan yang sudah terdaftar.

Admin dapat mencari nama pelanggan yang sudah terdaftar dan dapat

menghapus data pelanggan.

h. Pemesanan Barang

Halaman ini admin dapat melihat tampilan pemesanan barang sesuai

tanggal yang ingin ditampilkan dan bisa melihat data pelanggan secara

detail, admin juga dapat meng-update data pemesanan barang apabila

(34)

i. Konfirmasi Transfer

Halaman ini admin dapat menampilkan dan melihat data pelanggan yang

sudah melunasi pembayaran, dan dapat menghapus data pelanggan yang

sudah membayar lunas.

j. Laporan

Halaman ini berfungsi untuk admin melihat semua laporan mulai dari

laporan data provinsi, data kategori, data barang, data pelanggan,

pemesanan masuk dan pemesanan lunas.

2. Navigasi Halaman Customer

Menu navigasi dari sisi pelanggan termasuk navigasi hirarki sebagai berikut:

Gambar III.32. Struktur Navigasi Customer

(35)

Penjelasan untuk masing-masing halaman customer adalah sebagai berikut: a. Index atau Home

Pada halaman home, tampil navigasi keseluruhan dari website. Pelanggan

bisa mendaftar sebagai member, pelanggan bisa login apabila sudah

mendaftar menjadi member, pelanggan bisa melihat kategori dan memilih

menu-menu utama yang ada pada menu bar.

b. Profil

Halaman ini berisi tentang informasi contact yang dapat dihubungi atau

profil perlengkapan ulang tahun.

c. Barang

Menu ini menampilkan semua produk dan detail produk dari semua

kategori yang ada, saat menu barang di klik.

d. Panduan

Halaman ini berisi informasi cara berbelanja dan pembayaran barang yang

akan dibeli.

e. Konfirmasi

Halaman ini berisi tentang konfirmasi pelanggan yang sudah membayar

lunas dan menjelaskan secara detail di kolom keterangan produk apa yang

(36)

3.3. Implementasi dan Pengujian Unit 3.3.1. Implementasi

A. Implementasi rancangan antar muka admin

Implementasi rancangan antar muka pada aplikasi e-commerce berdasarkan

hasil rancangan antar muka.

1. Halaman login admin

Admin harus melakukan login dahulu untuk dapat menggunakan

modul-modul yang tersedia jika login berhasil, maka menu-menu yang sesuai dengan

kategori user tersebut akan ditampilkan.

(37)

3. Halaman password admin

Admin bisa mengganti password admin.

4. Halaman data provinsi

(38)

5. Halaman ubah data provinsi

Admin bisa meng-edit nama provinsi dan biaya kirim.

6. Halaman data kategori

(39)

7. Halaman ubah data kategori

Admin bisa meng-edit nama kategori.

8. Halaman data barang

(40)

9. Halaman ubah data barang

Admin bisa meng-edit nama barang, harga modal, harga jual, jumlah stok,

meng-ganti gambar, meng-ganti deskripsi produk di keterangan dan meng-ganti

kategori.

10.Halaman data pelanggan

(41)

11.Halaman pemesanan barang

Admin bisa melihat daftar pemesanan pelanggan mulai dari tanggal

pemesanan pelanggan, nama pelanggan, total transfer dan melihat status

pelanggan masih dalam waktu pemesanan atau sudah lunas pembayaran.

12.Halaman konfirmasi transfer

Admin bisa melihat daftar konfirmasi transfer pelanggan, bisa melihat

(42)

13.Halaman laporan

Admin bisa melihat semua laporan mulai dari laporan data provinsi sampai

laporan pemesanan lunas.

14.Halaman laporan data provinsi

(43)

15.Halaman laporan data kategori

Admin bisa melihat data kategori secara detail.

16.Halaman laporan data barang

Admin bisa melihat stok, harga modal dan harga jual barang sesuai kategori

(44)

17.Halaman laporan data pelanggan

Admin bisa melihat data pelanggan secara detail.

18.Halaman laporan pemesanan masuk – periode

(45)

19.Halaman pemesanan lunas – tanggal

Admin bisa melihat pemesanan lunas pelanggan per-tanggal.

20.Halaman pemesanan lunas – periode

(46)

B. Implementasi rancangan antar muka user

Implementasi rancangan antar muka pada aplikasi e-commerce berdasarkan

hasil rancangan antar muka.

1. Halaman home user

Pada halaman home, tampil navigasi keseluruhan dari website. Pelanggan bisa

daftar menjadi member dan memilih menu-menu utama yang ada pada menu bar.

2. Halaman profil user

(47)

3. Halaman barang user

Menu ini menampilkan semua produk dan detail produk, saat menu barang di

klik.

4. Halaman panduan user

(48)

5. Halaman konfirmasi user

Menu ini menampilkan konfirmasi pelanggan yang harus di isi apabila sudah

melakukan pembayaran.

6. Halaman login user

(49)

7. Halaman keranjang belanja user

Halaman ini berisi deskripsi barang yang dibeli oleh pelanggan.

8. Halaman tampil transaksi user

(50)

3.3.2 Pengujian Unit

Pengujian terhadap program yang dibuat menggunakan blackbox testing

yang fokus terhadap proses masukan dan keluaran program.

A. Pengujian terhadap form login admin

Tabel III.10

Hasil pengujian blackbox testing halaman login admin

No. Skenario

Pengujian

Test Case Hasil yang

diharapkan Hasil pengujian Kesimpulan 1. Username dan Password dikosongkan kemudian klik tombol login Username: (kosong) Password: (kosong) Sistem akan menolak akses admin dan menampilkan “1. Data Username tidak boleh kosong ! 2. Data Password tidak boleh kosong !” Sesuai harapan Valid 2. Mengetikan Username dan Password tidak di isi kemudian klik tombol Username: admin Password: (kosong) Sistem akan menolak akses admin dan menampilkan “1. Data Sesuai harapan Valid

(51)

login Password tidak boleh kosong !” 3. Username

tidak di isi dan

Password di isi kemudian klik tombol login Username: (kosong) Password: admin Sistem akan menolak akses admin dan menampilkan “1. Data Username tidak boleh kosong !” Sesuai harapan valid 4. Mengetikan salah satu kondisi salah pada Username atau Password kemudian klik tombol login Username: Admin (benar) Password: Qwerty (salah) Sistem akan menolak akses admin Sesuai harapan Valid 5. Mengetikan Username dan Password dengan data yang benar kemudian klik tombol login Username: Admin (benar) Password: admin (benar) Sistem akan menerima akses login dan kemudian langsung menampilkan halaman menu Sesuai harapan valid

(52)

utama admin

B. Pengujian terhadap formloginuser

Table III.11

Hasil pengujian blackbox testing halaman login user

No. Skenario

Pengujian

Test Case Hasil yang

diharapkan Hasil pengujian Kesimpulan 1. Username dan Password dikosongkan kemudian klik tombol login Username: (kosong) Password: (kosong) Sistem akan menolak akses admin dan menampilkan “LOGIN ANDA SALAH…Kesalahan input : 1. Data Username kosong, silahkan isi

dengan benar 2. Data Password kosong, silahkan isi

dengan benar 3. Data Username dan Password yang

Anda masukan belum benar”

Sesuai harapan

Valid

(53)

Username dan Password tidak di isi kemudian klik tombol login naila Password: (kosong) menolak akses admin dan menampilkan “LOGIN ANDA SALAH…Kesalahan input : 1. Data Password kosong, silahkan isi

Anda masukan belum benar” harapan 3. Username tidak di isi dan Password di isi kemudian klik tombol login Username: (kosong) Password: naila Sistem akan menolak akses admin dan menampilkan “LOGIN ANDA SALAH…Kesalahan input : 1. Data Username kosong, silahkan isi

Anda masukan

silaSesuai harapan

(54)

belum benar” 4. Mengetikan salah satu kondisi salah pada Username atau Password kemudian klik tombol login Username: naila (benar) Password: qwerty (salah) Sistem akan menolak akses admin dan menampilkan “LOGIN ANDA SALAH…Kesalahan input : 1. Data Username dan Password yang

Anda masukan belum benar” Sesuai harapan Valid 5. Mengetikan Username dan Password dengan data yang benar kemudian klik tombol login Username: naila (benar) Password: naila (benar) Sistem akan menerima akses login dan kemudian

langsung menampilkan halaman menu utama user Sesuai harapan valid