Upload
others
View
3
Download
0
Embed Size (px)
Citation preview
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
Pesan MasukPesan Masuk
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
KonfirmasiKonfirmasi LogoutLogout
Pesan MasukPesan Masuk
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
KonfirmasiKonfirmasi KeluarKeluar
Pesan MasukPesan Masuk
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
KonfirmasiKonfirmasi KeluarKeluar
Pesan MasukPesan Masuk
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
KonfirmasiKonfirmasi KeluarKeluar
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
KonfirmasiKonfirmasi KeluarKeluar
Pesan MasukPesan Masuk
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
KonfirmasiKonfirmasi KeluarKeluar
Pesan MasukPesan Masuk
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
KonfirmasiKonfirmasi LogoutLogout
Pesan MasukPesan Masuk
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
Keranjang BelanjaKeranjang Belanja
Cari ProdukCari Produk
HomeHome ProfilProfil Cara PembelianCara Pembelian ProdukProduk Hubungi KamiHubungi Kami
GambarGambar
GambarGambar
GambarGambar
GambarGambar
GambarGambar
GambarGambar
Produk TerbaruProduk Terbaru
KonfirmasiKonfirmasi
Informasi KontakInformasi Kontak
Informasi RekeningInformasi Rekening
HeaderHeader
FooterFooter
KatergoriKatergori
Informasi KontakInformasi Kontak
Keranjang BelanjaKeranjang Belanja
Cari ProdukCari Produk
BerandaBeranda ProfilProfil Cara PembelianCara Pembelian Semua produk
Semua produk Hubungi KamiHubungi Kami
IsiIsi
ProfilProfil
Informasi RekeningInformasi Rekening
KonfirmasiKonfirmasi
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
Keranjang BelanjaKeranjang Belanja
Cari ProdukCari Produk
BerandaBeranda ProfilProfil Cara PembelianCara Pembelian ProdukProduk Hubungi KamiHubungi Kami
IsiIsi
Cara PembelianCara Pembelian
Info RekeningInfo Rekening
KonfirmasiKonfirmasi
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
Informasi KontakInformasi Kontak
Keranjang BelanjaKeranjang Belanja
Cari ProdukCari Produk
BerandaBeranda ProfilProfil Cara PembelianCara Pembelian ProdukProduk Hubungi KamiHubungi Kami
GambarGambar
GambarGambar
GambarGambar
GambarGambar
GambarGambar
GambarGambar
Semua ProdukSemua Produk
Informasi RekeningInformasi Rekening
KonfirmasiKonfirmasi
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
Informasi KontakInformasi Kontak
Keranjang BelanjaKeranjang Belanja
Cari ProdukCari Produk
BerandaBeranda ProfilProfil Cara PembelianCara Pembelian ProdukProduk Hubungi KamiHubungi Kami
Hubungi KamiHubungi Kami
KirimKirim
NamaNama
EmailEmail
SubjekSubjek
PesanPesan
CapthaCaptha
Informasi RekeningInformasi Rekening
KonfirmasiKonfirmasi
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
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.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
Informasi KontakInformasi Kontak
Keranjang BelanjaKeranjang Belanja
Cari ProdukCari Produk
BerandaBeranda ProfilProfil Cara PembelianCara Pembelian ProdukProduk Hubungi KamiHubungi Kami
Detail ProdukDetail Produk
Keranjang BelanjaKeranjang Belanja
Lanjutkan belanjaLanjutkan belanja Update BelanjaUpdate Belanja Selesai BelanjaSelesai Belanja
Informasi RekeningInformasi Rekening
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
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
Organisasi File : Indexed Sequential
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
Organisasi File : Indexed Sequential
Akses File : Random
Media : Hard Disk
Panjang Record : 25 karakter
Kunci Field : username
Software : MySQL
Tabel III.3
Spesifikasi File Kategori
No. Elemen Data Akronim Tipe Panjang Keterangan
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
Organisasi File : Indexed Sequential
Akses File : Random
Media : Hard Disk
Panjang Record : 91 karakter
Kunci Field : id_konfirmasi
Software : MySQL
Tabel III.4
Spesifikasi File Konfirmasi
No. Elemen Data Akronim Tipe Panjang Keterangan
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
Organisasi File : Indexed Sequential
Akses File : Random
Media : Hard Disk
Panjang Record : 28 karakter
Kunci Field : id_kota
Software : MySQL
Tabel III.5
Spesifikasi File Kota
No. Elemen Data Akronim Tipe Panjang Keterangan
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
Organisasi File : Indexed Sequential
Akses File : Random
Media : Hard Disk
Panjang Record : 90 karakter
Kunci Field : id_pelanggan
Software : MySQL
38
Tabel III.6
Spesifikasi File Pelanggan
No. Elemen Data Akronim Tipe Panjang Keterangan
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
Organisasi File : Indexed Sequential
Akses File : Random
Media : Hard Disk
Panjang Record : 325 karakter
Kunci Field : id_modul
Software : MySQL
Tabel III.7
Spesifikasi File Modul
No. Elemen Data Akronim Tipe Panjang Keterangan
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.
Tipe : File Transaksi
Organisasi File : Indexed Sequential
Akses File : Random
Media : Hard Disk
Panjang Record : 20 karakter
Kunci Field : id_orders
Software : MySQL
Tabel III.8
Spesifikasi File Orders
No. Elemen Data Akronim Tipe Panjang Keterangan
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.
Tipe : File Transaksi
Organisasi File : Indexed Sequential
Akses File : Random
Media : Hard Disk
Panjang Record : 15 karakter
Kunci Field : -
Software : MySQL
Tabel III.9
Spesifikasi File Orders Detail
No. Elemen Data Akronim Tipe Panjang Keterangan
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.
Tipe : File Transaksi
Organisasi File : Indexed Sequential
Akses File : Random
Media : Hard Disk
41
Panjang Record : 120 karakter
Kunci Field : id_orders_temp
Software : MySQL
Tabel III.10
Spesifikasi File Order Temp
No. Elemen Data Akronim Tipe Panjang Keterangan
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.
Tipe : File Transaksi
Organisasi File : Indexed Sequential
Akses File : Random
Media : Hard Disk
Panjang Record : 345,2 karakter
Kunci Field : id_produk
Software : MySQL
42
Tabel III.11
Spesifikasi File Produk
No. Elemen Data Akronim Tipe Panjang Keterangan
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
Pengujian Kesimpulan
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
Pengujian Kesimpulan
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
Pengujian Kesimpulan
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