bab iii pembahasan - repository.bsi.ac.id · prosedur pada menu utama web, seperti melakukan...

BAB III

PEMBAHASAN

3.1. Analisis Kebutuhan

Sistem informasi penjualan rempah kering berbasis web ini (E-commerce)

terdiri dari dua pengguna yaitu, user (konsumen/pembeli) dan admin (bagian

penjualan), dimana dalam berjualan penjual (admin) dan konsumen/pembeli

(user) tidak bertatap muka untuk melakukan transaksi baik penjualan, pemesanan,

dan pembelian-jual beli, agar tujuan dan fungsi dari sistem yang dibuat dapat

berjalan sesuai harapan. Dalam sistem ini user/konsumen diminta mengikuti

prosedur pada menu utama web, seperti melakukan registrasi keanggotaan untuk

login pada halaman utama web penjualan rempah kering. Pada rancangan sistem

penjualan ini user /konsumen mendapatkan informasi seperti, macam-macam

rempah kering, cara pembelian, cara transaksi pembelian langsung, maka

diperlukan sebuah analisa kebutuhan dan berikut kebutuhan dari sistem yang

dibagi menjadi dua yaitu :

1. Pengguna sebagai admin

a. Admin dapat mengganti password admin

b. Admin dapat menambah, menghapus, dan mengedit data pada menu

c. Admin dapat membalas pesan yang masuk dari pelanggan

2. Pengguna sebagai pelanggan

a. Pelanggan dapat memperoleh informasi produk, dan kontak

b. Pelanggan dapat memesan produk

c. Pelanggan dapat melihat cara pembelian dan profil toko

22

d. Pelanggan dapat mengirim pesan kepada admin

e. Pelanggan dapat melakukan konfirmasi

3.2. Perancangan Perangkat Lunak

Dalam rancangan antar muka ini akan dijelaskan mengenai rancangan dari

Website yang akan dibuat

3.2.1. Rancangan Antar Muka

a. Halaman Admin / Penjual

1. Login admin

Untuk masuk kehalaman admin / penjual, anda harus login terlebih dahulu

menggunakan username dan password yang anda miliki.

UsernameUsername

PasswordPassword

LoginLogin

GambarGambar

Gambar III.1 Rancangan Antar Muka Log-in Admin/Penjual

2. Menu Beranda

Jika admin berhasil login, selanjutnya admin akan dialihkan ke beranda

halaman admin.

23

HeaderHeader

FooterFooter

BerandaBeranda Ubah PasswordUbah Password Profil TokoProfil Toko Cara pembelianCara pembelian KategoriKategori

Selamat DatangSelamat Datang

ProdukProduk Order MasukOrder Masuk KategoriKategori

KonfirmasiKonfirmasi KeluarKeluar

Pesan MasukPesan Masuk

LaporanLaporan

Gambar III.2 Rancangan Antar Muka BerandaAdmin

3. Menu Profil Toko

Didalam menu profil toko admin dapat menulis atau mengedit data dari profil

toko rempah kering.

HeaderHeader

FooterFooter

BerandaBeranda Ubah PasswordUbah Password Profil tokoProfil toko Cara PembelianCara Pembelian KategoriKategori ProdukProduk Order masukOrder masuk Ongkos kirimOngkos kirim

KonfirmasiKonfirmasi LogoutLogout


laporanlaporan

Profil TokoProfil Toko

Isi Profil TokoIsi Profil Toko

UpdateUpdate BatalBatal

Gambar III.3. Rancangan Antar Muka Profil Toko

24

4. Menu Cara Pembelian

Pada Menu Cara Pembelian, admin dapat mengubah prosedur/cara pembelian

pada website Toko Rempah kering.

HeaderHeader

FooterFooter

BerandaBeranda Ubah PasswordUbah Password Profil TokoProfil Toko Cara pembelianCara pembelian kategorikategori ProdukProduk Order MasukOrder Masuk Ongkos KirimOngkos Kirim



LaporanLaporan

Cara PembelianCara Pembelian

Isi Cara PembelianIsi Cara Pembelian

UpdateUpdate

Gambar III.4 Rancangan Antar Muka Cara Pembelian

5. Menu Kategori

Pada Menu Kategori terdapat kategori-kategori dari produk dan admin dapat

menambah, mengedit maupun menghapus data kategori dari menu ini.

HeaderHeader

FooterFooter

BerandaBeranda Ubah PasswordUbah Password Profil tokoProfil toko Cara PembelianCara Pembelian kategorikategori ProdukProduk Order MasukOrder Masuk Ongkos KirimOngkos Kirim



LaporanLaporan

NoNo

Tambah KategoriTambah Kategori

Kategori ProdukKategori Produk

Nama KategoriNama Kategori AksiAksi

xxxx xxxxxxxxxx Edit | HapusEdit | Hapus

Gambar III.5 Rancangan Antar Muka Kategori

25

6. Menu Produk

Di dalam menu Produk ini, admin dapat melihat semua data produk rempah-

rempah kering yang ada pada toko, dan admin juga dapat menambah mengedit dan

menghapus data produk.

HeaderHeader

FooterFooter

BerandaBeranda Ubah PasswordUbah Password Profil TokoProfil Toko Cara PembelianCara Pembelian kategorikategori ProdukProduk Order MasukOrder Masuk Ongkos kirimOngkos kirim



LaporanLaporan

NoNo

Tambah ProdukTambah Produk

ProdukProduk

Nama ProdukNama Produk Berat(kg)Berat(kg)

xxxx xxxxxxxxxx xxxx

HargaHarga

xxxxxxxxxx

StokStok

xxxx

Tgl. MasukTgl. Masuk

xxxxxxxxxxxx

AksiAksi

Edit | HapusEdit | Hapus

Gambar III.6. Rancangan Antar Muka Produk

7. Menu Order Masuk

Pada menu ini admin dapat melihat detail order yang masuk, dan dapat

mengubah status order jika pelanggan telah mengkonfirmasi bahwa telah

melakukan pembayaran.

HeaderHeader

FooterFooter

BerandaBeranda Ubah PasswordUbah Password Profil TokoProfil Toko Cara PembelianCara Pembelian KategoriKategori ProdukProduk Order MasukOrder Masuk Ogkos KirimOgkos Kirim


Pesan masukPesan masuk

LaporanLaporan

NoNo

OrderOrder

Nama KustomerNama Kustomer Tgl. OrderTgl. Order

xxxx xxxxxx xxxx

JamJam

xxxx

StatusStatus

xxxx

AksiAksi

DetailDetail

Gambar III.7 Rancangan Antar Muka Order Masuk

26

8. Menu Ongkos Kirim

Menu Ongkos kirim admin dapat melihat, menambah, mengedit dan

menghapus data ongkos kirim.

HeaderHeader

FooterFooter

BerandaBeranda Ubah PasswordUbah Password Profil TokoProfil Toko Cara PembelianCara Pembelian KategoriKategori ProdukProduk Order masukOrder masuk Ongkos KirimOngkos Kirim



LaporanLaporan

NoNo

Ongkos KirimOngkos Kirim

Nama KotaNama Kota Ongkos kirimOngkos kirim

xxxx xxxxxx xxxx

AksiAksi

Edit | HapusEdit | Hapus

Tambah Ongkos KirimTambah Ongkos Kirim

Gambar III.8 Rancangan Antar Muka Ongkos Kirim

9. Menu Pesan Masuk

Pada Menu ini tedapat pesan dari para pelanggan, dan admin dapat membaca

dan membalas pesan yang masuk, dan juga dapat menghapus nya.

HeaderHeader

FooterFooter

BerandaBeranda Ubah PasswordUbah Password Profil TokoProfil Toko Cara PembelianCara Pembelian KategoriKategori ProdukProduk Order MasukOrder Masuk Ongkos KirimOngkos Kirim



LaporanLaporan

Hubungi KamiHubungi Kami

NoNo NamaNama EmailEmail SubjekSubjek TanggalTanggal AksiAksi

xxxx xxxxxxxx xxxxxxxxxxxx xxxx xxxx Baca | HapusBaca | Hapus

Gambar III.9 Rancangan Antar MukaPesan Masuk

27

10. Menu Konfirmasi

Dimenu konfiirmasi ini admin dapat melihat konfirmasi pembayaran dari

pelanggan dan juga dapat menghapusnya.

HeaderHeader

FooterFooter

KatergoriKatergori

Informasi KontakInformasi Kontak

Keranjang BelanjaKeranjang Belanja

Cari ProdukCari Produk

BerandaBeranda ProfilProfil Cara PembelianCara Pembelian ProdukProduk Hubungi KamiHubungi Kami

Konfirmasi PembayaranKonfirmasi Pembayaran

KirimKirim

Nomor OrderNomor Order

Nama PngirimNama Pngirim

Rekening AsalRekening Asal

Rekening TujuanRekening Tujuan

CapthaCaptha

Informasi RekeningInformasi Rekening

KonfirmasiKonfirmasi

JumlahJumlah

Gambar III.10 Rancangan Antar MukaKonfirmasi

11. Menu Laporan

Pada menu ini admin dapat melihat laporan dari transaksi yang terjadi pada

hari itu maupun per periode.

HeaderHeader

FooterFooter

BerandaBeranda Ubah PasswordUbah Password Profil TokoProfil Toko Cara PembelianCara Pembelian KategoriKategori ProdukProduk Order MasukOrder Masuk Ongkos KirimOngkos Kirim



LaporanLaporan

LaporanLaporan

Laporan Hari iniLaporan Hari ini

Laporan Per PeriodeLaporan Per Periode

TglTglDari TanggalDari Tanggal

s/d Tanggals/d Tanggal TglTgl

BulanBulan

BulanBulan

TahunTahun

TahunTahun

ProsesProses

Gambar III.11Rancangan Antar MukaLaporan

28

HeaderHeader

FooterFooter

KatergoriKatergori



HomeHome ProfilProfil Cara PembelianCara Pembelian ProdukProduk Hubungi KamiHubungi Kami

GambarGambar

GambarGambar

GambarGambar

GambarGambar

GambarGambar

GambarGambar

Produk TerbaruProduk Terbaru




HeaderHeader

FooterFooter

KatergoriKatergori




BerandaBeranda ProfilProfil Cara PembelianCara Pembelian Semua produk

Semua produk Hubungi KamiHubungi Kami

IsiIsi

ProfilProfil



B. Halaman Pelanggan / Pembeli

Berikut adalah rancangan antar muka website pada halaman pelanggan.

1. Halaman Beranda

Halaman Beranda, Merupakan halaman utama dan halaman yang pertama

dilihat dari website.

Gambar III.12 Rancangan Antar Muka Beranda Pelanggan

2. Halaman Profil

Menu Profil, halaman untuk menampilkan informasi profil dari Toko rempah

kering.

Gambar III.13 Rancangan Antar Muka Halaman Profil Toko

3. Halaman Cara Pembelian

Menu Cara Pembelian, untuk melihat informasi bagaimana prosedur

29

HeaderHeader

FooterFooter

KatergoriKatergori

Info KontakInfo Kontak




IsiIsi

Cara PembelianCara Pembelian

Info RekeningInfo Rekening


Pembelian Pada website toko rempah kering.

Gambar III.14 Rancangan Antar Muka Halaman Cara Pembelian

4. Halaman Semua produk

Halaman semua produk merupakan halaman untuk melihat semua produk

yang ada dalam website Toko rempah kering.

HeaderHeader

FooterFooter

KatergoriKatergori





GambarGambar

GambarGambar

GambarGambar

GambarGambar

GambarGambar

GambarGambar

Semua ProdukSemua Produk



Gambar III.15Rancangan Antar Muka Halaman Semua produk

30

5. Halaman Hubungi Kami

Halaman Hubungi kami, merupakan halaman yang dapat digunakan pelanggan

untuk mengirim pesan, misalnya tentang keluhan.

HeaderHeader

FooterFooter

KatergoriKatergori





Hubungi KamiHubungi Kami

KirimKirim

NamaNama

EmailEmail

SubjekSubjek

PesanPesan

CapthaCaptha



Gambar III.16Rancangan Antar Muka Halaman Hubungi Kami

6. Halaman Konfirmasi

Halaman Konfirmasi, merupakan halaman yang dapat digunakan oleh

pelanggan untuk mengkonfirmasi pembayaran agar order dapat diproses dan

segera dikirim ke alamat tujuan.

HeaderHeader

FooterFooter

KatergoriKatergori





Konfirmasi PembayaranKonfirmasi Pembayaran

KirimKirim

Nomor OrderNomor Order

Nama PngirimNama Pngirim

Rekening AsalRekening Asal

Rekening TujuanRekening Tujuan

CapthaCaptha



JumlahJumlah

Gambar III.17 Rancangan Antar Muka Halaman Konfirmasi

31

7. Halaman Keranjang Belanja

Halaman ini berisikan tentang daftar barang yang akan di order oleh

pelanggan, pada halaman ini pelanggan dapat mengubah jumlah barang yang ingin

dibeli.

HeaderHeader

FooterFooter

KatergoriKatergori





Detail ProdukDetail Produk


Lanjutkan belanjaLanjutkan belanja Update BelanjaUpdate Belanja Selesai BelanjaSelesai Belanja


Gambar III.18 Rancangan Antar Muka Halaman Keranjang Belanja

3.2.2. Rancangan Basis Data

Basis data bertujuan untuk menentukan rancangan website e-commerce.

Perancangan sistem dimulai dengan perancangan Entity Relationship Diagram

(ERD), Logical Relational Structure (LRS),Spesifikasi File. Perancangan dan

desain website dimulai dengan perancangan detail dari halaman yang akan

ditampilkan dalam website.

32

A. Entity Relationship Diagram (ERD)

melakukan memiliki

Kategori

mempunyai

memiliki

Mempunyai

Nama_kategori

Id_kategori

Order Detail

Id_orders

Id_produk

Jumlah

Produkharga

stok

berat

deskripsi

Nama_produk

Kota

Id_kota

nama_kota

Ongkos-kirim

Orders

id_orders

status_order

tgl_order

jam_order

id_kustomer

Konfirmasi

rektuju

rekasal

namakirim

Id_orders

Id_konfirmasi

Kustomer

Id_kustomer

password

nama_lengkap

alamat

email

menunggu

telpon

Id_kota

Id_kategori

Tgl_masul

Id_produk

gambar

jumlah

tanggal

bankasal

Gambar III.19 Entity Relationship Diagram

33

B. Logical Relational Structure (LRS)

id_kotanama_kotaongkos_kirim

id_kotanama_kotaongkos_kirim

kotakota

id_produkid_kategorinama_produkdeskripsihargastokberattgl_masukgambar

id_produkid_kategorinama_produkdeskripsihargastokberattgl_masukgambar

produkproduk

id_ordersstatus_ordertgl_orderjam_orderid_kustomer

id_ordersstatus_ordertgl_orderjam_orderid_kustomer

ordersorders

Id_ordersId_produkjumlah

Id_ordersId_produkjumlah

orders_detailorders_detail

Id_kutomerPasswordNama_lengkapAlamatEmailTelpoId_kota

Id_kutomerPasswordNama_lengkapAlamatEmailTelpoId_kota

kustomerkustomer

id_kategorinama_kategori

id_kategorinama_kategori

kategorikategori

11 MM

MM

11

1111

MM

11

11 MM

id_konfirmasiid_ordersnamakirimbankasalrekasalrektujujumlahtanggal

id_konfirmasiid_ordersnamakirimbankasalrekasalrektujujumlahtanggal

konfirmasikonfirmasi

11

11

Gambar III.20 Logical Relational Structure

C. Spesifikasi File

1. Spesifikasi File Admin

Nama file : Admin

Akronim : admin

Fungsi : Sebagai tempat penyimpanan data admin.

Tipe : File Master

Organisasi File : Indexed Sequential

Akses File : Random

34

Media : Hard Disk

Panjang Record : 100 karakter

Kunci Field : username

Software : MySQL

Tabel III.1

Spesifikasi File Admin

No. Elemen Data Akronim Tipe Panjang Keterangan

1 Username username varchar (10) Primary Key

2 Password password varchar (10)

3 Nama

Lengkap nama_lengkap varchar (20)

4 Email Email varchar (25)

5 Telpon no_telp varchar (15)

6 Level Level varchar (10)

7 Blokir Blokir Enum „Y,N‟

2. Spesifikasi File Hubungi

Nama file : Hubungi

Akronim : hubungi

Fungsi : Sebagai tempat penyimpanan data pesan masuk.

Tipe : File Master


Akses File : Random

Media : Hard Disk

Panjang Record : 80karakter

Kunci Field : id_hubungi

Software : MySQL

35

Tabel III.2

Spesifikasi File Hubungi

No. Elemen Data Nama Field Tipe Panjang Keterangan

1 Id Hubungi id_hubungi int (5) Primary Key

2 Nama nama varchar (20)

3 Email email varchar (25)

4 Subjek subjek varchar (20)

5 Pesan pesan text

6 Tanggal tanggal date

3. Spesifikasi File Kategori

Nama file : Kategori

Akronim : kategori

Fungsi : Sebagai tempat penyimpanan data kategori.

Tipe : File Master


Akses File : Random

Media : Hard Disk


Kunci Field : username

Software : MySQL

Tabel III.3

Spesifikasi File Kategori


1 Id kategori id_kategori Int (5) Primary Key

2 Nama Kategori nama_kategori varchar (10)

3 Kategori Seo kategori_seo varchar (10)

36

4. Spesifikasi File Konfirmasi

Nama file : Konfirmasi

Akronim : konfirmasi

Fungsi : Sebagai tempat penyimpanan data Konfirmasi.

Tipe : File Master


Akses File : Random

Media : Hard Disk


Kunci Field : id_konfirmasi

Software : MySQL

Tabel III.4

Spesifikasi File Konfirmasi


1 Id Konfirmasi id_konfirmasi int (5) Primary Key

2 Nomor Order id_orders int (5)

3 Nama Pengirim namakirim varchar (20)

4 Bank asal Bankasal Varchar (10)

4 Nomor Rekening

asal rekasal varchar (15)

5 Rekening Tujuan rektuju varchar (15)

6 Jumlah jumlah int (11)

7 Tanggal tanggal date

5. Spesifikasi File Kota

Nama file : Kota

Akronim : id_kota

Fungsi : Sebagai tempat penyimpanan data kota pelanggan.

Tipe : File Master

37


Akses File : Random

Media : Hard Disk


Kunci Field : id_kota

Software : MySQL

Tabel III.5

Spesifikasi File Kota


1 Id Kota id_kota int (3) Primary Key

2 Nama Kota nama_kota varchar (15)

3 Ongkos Kirim ongkos_kirim int (10)

6. Spesifikasi File Pelanggan

Nama file : Pelanggan

Akronim : pelanggan

Fungsi : Sebagai tempat penyimpanan data pelanggan.

Tipe : File Transaksi


Akses File : Random

Media : Hard Disk


Kunci Field : id_pelanggan

Software : MySQL

38

Tabel III.6

Spesifikasi File Pelanggan


1 Id Pelanggan id_pelanggan int (5) Primary Key

2 Password Password varchar (10)

3 Nama Lengkap nama_lengkap varchar (20)

4 Alamat Alamat text

5 Email Email varchar (25)

6 Telpon Telpon varchar (15)

7 Id Kota id_kota int (5)

7. Spesifikasi File Modul

Nama file : Modul

Akronim : modul

Fungsi : Sebagai tempat penyimpanan data modul website.

Tipe : File Master


Akses File : Random

Media : Hard Disk


Kunci Field : id_modul

Software : MySQL

Tabel III.7

Spesifikasi File Modul


1 Id Modul Id_modul Int (5) Primary Key

2 Nama Modul nama_modul Varchar (20)

3 Link Link Varchar (20)

4 Statik Konten static_content Text

5 Gambar Gambar Varchar (100)

39

6 Status Status Enum („user,admin‟)

7 Aktif Aktif Enum „Y,N‟

8 Urutan Urutan Int (5)

9 Nama Toko nama_toko Varchar (20)

10 Meta Deskripsi meta_deskripsi Varchar (50)

11 Meta Keyword meta_keyword Varchar (50)

12 Email

Pengelola email_pengelola Varchar (25)

13 Nomor

Rekening nomor_rekening Varchar (15)

14 Nomor HP nomor_hp Varchar (15)

8. Spesifikasi File Penjualan

Nama file : Orders

Akronim : orders

Fungsi : Sebagai tempat penyimpanan data order produk.



Akses File : Random

Media : Hard Disk


Kunci Field : id_orders

Software : MySQL

Tabel III.8

Spesifikasi File Orders


1 Nomor Order id_orders Int (5) Primary Key

2 Status status_order varchar (10)

3 Tgl Order tgl_order Date

4 Jam jam_order Time

5 Id Pelanggan Id_pelanggan Int (5)

40

9. Spesifikasi FileOrder Detail

Nama file : Order Detail

Akronim : orders_detail

Fungsi : Sebagai tempat penyimpanan data detai transaksi.



Akses File : Random

Media : Hard Disk


Kunci Field : -

Software : MySQL

Tabel III.9

Spesifikasi File Orders Detail


1 Id Orders id_orders Int (5)

2 Id Produk id_produk Int (5)

3 Jumlah Jumlah Int (5)

10. Spesifikasi FileOrder Temp

Nama file : Order Detail

Akronim : orders_temp

Fungsi : Sebagai tempat penyimpanan data keranjang.



Akses File : Random

Media : Hard Disk

41


Kunci Field : id_orders_temp

Software : MySQL

Tabel III.10

Spesifikasi File Order Temp


1 Id Orders Temp id_orders_temp int (5) Primery Key

2 Id Produk id_produk int (5)

3 Id Session id_session varchar (100)

4 Jumlah Jumlah Int (5)

5 Tgl Order Temp tgl_order_temp Date

6 Jam Order

Temp jam_order_temp Time

7 Stok stok_temp int (5)

11. Spesifikasi FileProduk

Nama file : Produk

Akronim : produk

Fungsi : Sebagai tempat penyimpanan data produk toko.



Akses File : Random

Media : Hard Disk

Panjang Record : 345,2 karakter

Kunci Field : id_produk

Software : MySQL

42

Tabel III.11

Spesifikasi File Produk


1 Id Produk id_orders int (5) Primery Key

2 Id kategori id_produk int (5)

3 Nama Produk nama_produk varchar (100)

4 Produk Seo produk_seo varchar (100)

5 Deskripsi Deskripsi text

6 Harga Harga int (20)

7 Stok Stok int (5)

8 Berat Berat decimal (5,2)

9 Tgl Masuk Date

10 Gambar Gambar varchar (100)

11 Dibeli Dibeli int (5)

3.2.3 Rancangan Struktur Navigasi

Struktur navigasi digunakan untuk menggambarkan hubungan antara satu

halaman web dengan halaman web lain. Struktur navigasi yang digunakan dalam

website ini adalah struktur navigasi composite (campuran). Melalui struktur

navigasi, akan terlihat bagaimana isi dan susunan dari sebuah website rempah

kering ini secara menyeluruh.

1. Struktur Navigasi Pengunjung Admin

Beranda LaporanKonfirmasiGanti

PasswordProfil Toko

Cara Pembelian

Kategori ProdukOrder Masuk

Ongkos Kirim

Pesan Masuk

Login

Tambah Kategori

EditUpdate BatalUpdat

eBatal

Hapus

Tambah produk

EditHapu

s

Tambah ongkos kirim

Edit Hapus

Kirim

Hapus

Batal

Simpan BatalSimpan

BatalSimpan Batal

HapusDetail

Ubah Status

Proses Batal

Keluar

Index Home

BacaLaporan hari

iniProses

Gambar III.21 Struktur NavigasiAdmin

43

2. Struktur Navigasi Pelanggan

Index home

Beranda Profil Cara Pembelian Semua Produk Hubungi kami KonfirmasiKeranjang Belanja

Lanjutkan belanja

Update keranjang

Selesai belanja

Masuk

Gambar III.22 Struktur Navigasi Pelanggan

3.3. Implementasi dan Pengujian Unit

3.3.1. Implementasi

Implementasi yang dilakukan ini merupakan cara bagaimana mewujudkan

hasil dari perancangan sistem yang sudah dilakukan sehingga menghasilkan suatu

aplikasi yang dapat bekerja sebagimana mestinya. Implementasi dimaksudkan

sebagai usaha untuk mewujudkan hasil dari perancangan perangkat lunak.

A. Implementasi Rancangan Antar Muka Admin

Implementasi rancangan antar muka halaman admin utama pada website

toko rempah kering berdasarkan hasil rancangan antar muka sebagi berikut:

1. Halaman Login Admin

Administrator harus melakukan login terlebih dahulu untuk dapat

mengakses halaman admin dan memanajemen data sesuai keperluan. Jika berhasil

login, maka akan dialihkan ke beranda admin.

44

Gambar III.23 Halaman Login Admin

2. Halaman Beranda Admin

Administrator akan memasuki halaman admin dan sudah siap untuk

memanajemen data sesuai kebutuhan admin. Di halaman beranda admin ini

administrator dapat melihat menu-menu untuk mengelola web tersebut, admin

dapat menambahkan data, menghapus data, mengubah data, melihat data dan

melakukan pencarian data

Gambar III.24 Halaman Beranda Admin

45

3. Halaman Cara pembelian Admin

Halaman cara pembelian adalah halaman untuk menambahkan dan

mengubah prosedur cara pembelian. Berikut adalah tampilannya:

Gambar III.25 Halaman Cara pembelian Admin

4. Halaman Kategori Admin

Pada halaman ini admin dapat menambahkan kategori pada produk agar

produk tersusun pada kategori yang sudah ditentukan. Berikut adalah

tampilannya:

46

Gambar III.26 Halaman Kategori Admin

5. Halaman Produk Admin

Admin dapat menambahkan data produk yang akan di jual pada website

melalui halaman produk. Berikut adalah tampilannya:

Gambar III.27 Halaman Produk Admin

47

6. Halaman penjualan Admin

Pada halaman ini admin dapat melihat transaksi yang terjadi pada setiap

harinya. Berikut adalah tampilannya:

Gambar III.28 Halaman Order Admin

7. Halaman Hubungi Kami Admin

Pada halaman ini admin dapat melihat dan membalas pesan dari pengunjung

biasa maupun member pada setiap harinya.Berikut adalah tampilannya:

Gambar III.29 Halaman Hubungi Kami Admin

48

8. Halaman Ongkos Kirim Admin

Pada halaman ini admin dapat menambah, mengubah, maupun menghapus

data ongkos kirim. Berikut tampilannya:

Gambar III.30 Halaman Ongkos Kirim Admin

9. Halaman Ganti Password

Pada halaman ini admin dapat mengganti , menambah, dan menghapus data

admin. Berikut adalah tampilannya:

Gambar III.31 Halaman Ganti Password

49

10. Halaman Profil Toko Admin

Pada halaman ini admin dapat mengubah profil dari website toko rempah

kering. Berikut adalah tampilannya:

Gambar III.32 Halaman Profil Toko Admin

11. Halaman Konfirmasi

Pada halaman ini admin dapat mengelola data service dari website toko

rempah kering. Berikut adalah tampilannya:

Gambar III.33 Halaman Konfirmasi Pembayaran Admin

12. Halaman Laporan Admin

50

Pada halaman ini admin dapat mengelola laporan transaksi pada website

toko rempah kering. Berikut adalah tampilannya:

Gambar III.34 Halaman Laporan Admin

B. Implementasi Rancangan Antar Muka Pelanggan

Implementasi rancangan antar muka halaman Pelanggan pada website Toko

Rempah Kering berdasarkan hasil rancangan antar muka sebagai berikut:

1. Halaman beranda

Halaman Beranda adalah Halaman yang pertama akan dilihat oleh

pelanggan, halaman ini menampilkan produk-produk terbaru dari toko rempah

kering, berikut adalah tampilannya :

51

Gambar III.35 Halaman Beranda Pelanggan

2. Halaman Profil

Halaman profil ini berisi tentang informasi seputar toko rempah kering.

Berikut adalah tampilannya:

Gambar III.36 Halaman Profil Toko

52

3. Halaman Cara Pembelian

Halaman cara pembelian pelanggan halaman sangat berguna untuk calon

pelanggan yang baru pertama kali mengunjungi website toko rempah kering, di

sini akan di jelaskan secara detail bagaimana langkah awal sampai proses akhir

hingga barang diterima oleh pelanggan. Tampilannya adalah sebagai berikut:

Gambar III.37 Halaman Cara Pembelian Member

4. Halaman Semua Produk

Pada halaman ini pelanggan dapat melihat semua produk yang tersedia pada

toko rempah kering, berikut tampilannya:

Gambar III.38 Halaman Semua Produk

53

5. Halaman Hubungi Kami

Pada Halaman ini pelanggan dapat mengirim pesan kepada admin. Berikut

adalah tampilannya :

Gambar III.39 Halaman Hubungi Kami

6. Halaman Konfirmasi Pembayaran

Halaman Pelanggan ini menyediakan fasilitas untuk para pelanggan

mengkonfirmasi pembayarannya agar produk yang dipesan bisa segera diproses

untuk dikirim ke alamat tujuan. Berikut adalah tampilannya:

Gambar III.40 Halaman Konfirmasi Pembayaran

54

7. Halaman Keranjang Belanja Member

Pada Halaman Keranjang belanja ini pelanggan dapat melihat barang apa

saja yang telah dipilih untuk dibeli/dipesan dan pada menu ini juga pelanggan

dapat menentukan berapa jumlah perbarang nya, pelanggan juga dapat menghapus

barang yang telah masuk keranjang. Berikut adalah tampilannya:

Gambar III.41 Halaman Keranjang Belanja Pelanggan

8. Halaman Login Pelanggan

Pada halaman login pelanggan ini, Pelanggan lama dapat langsung

memasukkan email dan password yang pernah di daftarkan, dan jika anda

pelanggan baru maka anda harus mengisi form pelanggan baru. Berikut adalah

tampilannya:

55

Gambar III.42 Halaman Login / Register Pelanggan

D. Spesifikasi Sistem Komputer

Berikut ini adalah spesifikasi perangkat keras dan perangkat lunak minimum

yang dibutuhkan untuk mengimplementasikan website ecommerce penjualan Toko

Rempah Kering.

1. Spesifikasi Perangkat Keras

a. Server

1) CPU

a) Intel®Celeron® Processor N2830 @ 2.16GHz

b) RAM DDR3 2 GB

c) Hard Disk 500 GB

2) Mouse optical usb

3) Keyboard 108 keys usb

4) Koneksi internet dengan kecepatan 2 Mbps.

56

2. Spesifikasi Perangkat Lunak

Sistem Operasi: Microsoft Windows 8.1 © 2013

1) Program Design : Macromedia Dreamweaver 8

2) Bahasa script : PHP

3) WebServer : Apache

4) Browser : Mozilla Firefox dan Google Chrome

5) Database : MySQL

3.3.2. Pengujian Unit

A. Pengujian Terhadap Form Login Admin

Tabel III.12

Hasil pengujian black box testing Halaman Login Admin

No. Skenario

Pengujian Test Case

Hasil Yang

Diharapkan

Hasil

Pengujian Kesimpulan

1

Username dan

password

dikosongkan

dan kemudian

login

Username:

(kosong)

Password:

(kosong)

Sistem akan

menolak dan

akan memberi

notifikasi

“username atau

password

salah”

Sesuai

Harapan Valid

2

Mengetik

Username

denganbenardan

password

dikosongkan,

kemudian login

Username:

admin

(benar)

Password:

(kosong)

Sistem akan

menolak dan

akan memberi

notifikasi

“username atau

password

salah”

Sesuai

Harapan Valid

3

Username

dikosongkan

dan Mengetik

passworddengan

benar, kemudian

login

Username:

(kosong)

Password:

admin

Sistem akan

menolak dan

akan memberi

notifikasi

“username atau

password

salah”

Sesuai

Harapan Valid

57

4

Mengetik salah

satu dengan

kondisi salah

pada Username

dan password,

kemudian login

Username:

admin

(benar)

Password:

mimin

(salah)

Sistem akan

menolak dan

akan memberi

notifikasi

“username atau

password

salah”

Sesuai

Harapan Valid

5

Mengetik

username dan

password

dengan benar,

kemudian login

Username:

admin(benar)

Password:

benar(benar)

Sistem akan

menerima dan

segera

mengalihkan

ke halaman

admin

Sesuai

Harapan Valid

B. Pengujian unit terhadap login/register

Tabel III.13

Hasil pengujian black box testing FormLogin/Register

No. Skenario Pengujian Test Case Hasil Yang

Diharapkan

Hasil


1

email dan password

dikosongkan dan

kemudian login

email:

(kosong)

Password:

(kosong)

Sistem akan

menolak dan akan

memberi notifikasi

“anda belum

mengisi email”

Sesuai

Harapan Valid

2

Mengetik nilai salah

pada salah satu email

atau password dan

kemudian login

email:

admin@

gmail.com

(benar)

Password:

Mimin123(sal

ah)

Sistem akan

menolak dan akan

memberi notifikasi

“username atau

password salah”

Sesuai

Harapan Valid

3

Mengetikkan email

dan password dengan

benar kemudian login

email:

admin@

gmail.com(be

nar)

Password:

admin123

Sistem akan

menerima dan akan

langsung dialihkan

pada halaman detail

transaksi

Sesuai

Harapan Valid

4

Melakukan registrasi

untuk menjadi

member, Mengisi

semua kecuali nama

lengkap dan

kemudian daftar

Nama

Lengkap:

(kosong)

Password:

admin123

(benar)

Email :

admin@

gmail.com

(benar)

Sistem akan

menolak dan akan

memberi notifikasi

“nama lengkap

belum diisi”

Sesuai

Harapan Valid

58

5

Mengisi semua

dengan benar kecuali

kode dengan nilai

yang slaah dan

kemudian daftar

Nama

Lengkap:

admin(benar)

Password:

Admin123(be

nar)

kode : Er23Jg

(salah)

Sistem akan

menolak dan akan

memberi notifikasi

“kode yang anda

masukkan tidak

cocok”

Sesuai

Harapan Valid

6

Mengisi Semua

dengan benar

dan kemudian

daftar

Nama

Lengkap :

admin

(benar)

Password :

admin123

(benar)

Email :

admin@

gmail.com

(benar)

Sistem akan

menerima dan

telah terdaftar

sebagai

member,

kemudian

sistem akan

mengalihkan

kehalaman

detail transaksi

Sesuai

Harapan Valid

C. Pengujian Terhadap Form Kategori Admin

Tabel III.14

Hasil pengujian black box testing Ganti Password Admin

No. Skenario

Pengujian Test Case

Hasil Yang

Diharapkan

Hasil


1

Mengisi

password lama

dengan benar,

mengisi

password baru

dan password

baru lagi dengan

nilai yang

berbeda

Password

lama:

admin(benar)

Password

baru:

admin1(benar)

Password

baru lagi:

admin111

(salah)

Sistem akan

menolak dan

akan memberi

notifikasi

“Password

baru yang

Anda

masukkan

sebanyak dua

kali belum

cocok”

Sesuai

Harapan Valid

59

2

Mengetik

password lama

dengan nilai

salah, dan

password baru

dengan password

baru lagi dengan

nilai yang benar

Password

lama:

admin321

(salah)

Password

baru:

admin111

(benar)

Password

baru lagi:

admin111

(benar)

Sistem akan

menolak dan

akan memberi

notifikasi “Anda

salah

memasukkan

Password

Lama Anda”

Sesuai

Harapan Valid

3

Mengetik semua

isian dengan

benar

Password

lama: admin

(benar)

Password

baru:

admin111

(benar)

Password

baru lagi:

admin111

(benar)

Sistem akan

menerima dan

password baru

sudah bisa

digunakan

Sesuai

Harapan Valid

D. Pengujian Terhadap Keranjang Belanja

Tabel III.15

Hasil pengujian black box testing Keranjang Belanja

No. Skenario

Pengujian Test Case

Hasil Yang

Diharapkan

Hasil


1

Pada Qty barang

di isi dengan

angka 0

kemudian tekan

update keranjang

Qty : 0

Akan muncul

Peringatan “Anda

Tidak boleh

menginputkan

angka 0 atau

mengosongkannya”

Sesuai

Harapan Valid

2

Mengubah Qty

dengan nilai

melebihi stok

barang kemudian

tekan update

keranjang

Qty : 1000

Akan mencul

Peringatan“Jumlah

yang dibeli

melebihi Stok yang

ada”

Sesuai

Harapan Valid

60

3

Mengubah Qty

dengan nilai yang

tidak melebihi

stok lalu tekan

update

Qty akan

berubah

sesuai

inputan

Harga Barang

otomatis dikalikan

dengan Qty yang di

masukkan

Sesuai

Harapan Valid

4

Menghapus

barang yang tidak

jadi dibeli dari

keranjang belanja

Menekan

tombol

hapus

yang telah

tersedia

Barang ada

dikeranjang belanja

akan terhapus

Sesuai

Harapan Valid

bab iii pembahasan - repository.bsi.ac.id · prosedur pada menu utama web, seperti melakukan...

Documents