Dokumen ini menjelaskan analisis dan perancangan sistem untuk toko alat musik Toko Tiga Nada di Lamongan, yang menghadapi kendala dalam sistem penjualan manual. Fokusnya adalah mengembangkan sistem e-commerce yang memenuhi kebutuhan fungsional dan non-fungsional, termasuk analisis kebutuhan perangkat keras dan perangkat lunak yang diperlukan. Desain sistem mencakup proses pengolahan data, transaksi, serta laporan yang dibutuhkan untuk meningkatkan efisiensi bisnis.

1. BAB III
ANALISA DAN PERANCANGAN SISTEM
3.1 Latar Belakang Toko
Toko Tiga Nada merupakan sebuah toko yang bergerak dibidang usaha
penjualan alat-alat musik. Toko Tiga Nada berkantor pusat di Surabaya,
sedangkan yang dijadikan tempat penelitian penulis merupakan cabang dari Toko
Tiga Nada yang berada di Ruko Jalan Panglima Sudirman Kav.20 Lamongan,
dengan no.telp (0322) 316 393.
Produk-produk yang dijual sebagian besar adalah alat musik seperti gitar
dan bass. Di toko ini juga menyediakan accesories alat musik seperti senar gitar,
sabuk gitar, stand keyboard, tas acoustic, dan lain-lain. Produk paket seperti Drum
Band juga tersedia di toko ini. Toko Tiga Nada merupakan toko yang memulai
aktivitas bisnisnya pada tahun 2004. Toko ini berusaha untuk meningkatkan
penjualannya. Tetapi yang menjadi kendala saat ini yaitu sistem penjualan dan
pemasarannya masih dilakukan secara manual atau dilakukan transaksi penjualan
dengan cara bertemu dan bertatapan langsung antara user dan pihak penjual.
3.2 Tahap Project Planning & Tahap Analisa
Menguraikan tentang analisis kebutuhan terhadap permasalahan terhadap
kasus yang sedang diteliti.
3.2.1 Analisis Kebutuhan Sistem
Tujuan dari analisis kebutuhan sistem adalah memahami kebutuhan
dari sistem baru dan mengembangkan sebuah sistem yang mewadahi
kebutuhan tersebut.
Analisis kebutuhan sistem digolongkan menjadi dua, yaitu
kebutuhan fungsional (functional requirement) dan kebutuhan
nonfungsional (nonfunctional requirement).
25

2. 26
a. Kebutuhan Fungsional
Kebutuhan fungsional merupakan jenis kebutuhan yang berisi proses-
proses apa saja yang nantinya dilakukan oleh sistem dan juga berisi
informasi apa saja yang harus ada dan dihasilkan oleh sistem. Dilihat
dari sisi penggunaan sistem, kebutuhan ini dibagi menjadi 2 yaitu :
1. Kebutuhan situs berbasis web
• Kategori produk, berisi daftar produk apa saja yang dijual.
Didalam terdapat penelusuran berdasarkan kategori tertentu.
• Pendaftaran untuk mendapatkan pelanggan secara gratis,
selanjutnya user dapat login dan user dapat berbelanja di
sistem.
• Login, merupakan cara masuk ke dalam sistem.
• Pemesanan barang, dilakukan oleh user yang telah login,
memilih barang, barang yang telah dipilih kemudian masuk ke
keranjang belanja, checkout, selanjutnya memilih jasa
pengiriman, pilih pembayaran, kemudian user mendapatkan
total harga, order dan mendapatkan token. Disini token
menggunakan 3 digit dari gabungan beberapa karakter.
2. Kebutuhan modul administrasi berbasis web
• Login, merupakan cara masuk ke sistem.
• Pengolahan sistem, merupakan pengolahan berbagai sistem,
data yang diolah yaitu data customers, kategori produk, produk
apa saja yang dijual, cara order, payment, shipping, testimoni,
tarif JNE, Auxpage, dan data Banner.
b. Kebutuhan Nonfungsional
Kebutuhan nonfungsional adalah kebutuhan yang berisi kelengkapan
yang dimiliki oleh sistem.
3.2.2 Kebutuhan Perangkat Keras

3. 27
Komputer terdiri perangkat keras dan perangkat lunak. Perangkat
lunak memberikan instruksi-instruksi kepada perangkat keras untuk
melakukan suatu tugas tertentu.
Perangkat keras komputer yang digunakan adalah perangkat keras
yang dapat mendukung perangkat lunak yang memiliki kemampuan atau
tampilan grafis yang cukup baik. Perangkat keras yang digunakan pada
pembuatan program aplikasi e-commerce sebagai media penjualan dengan
sistem online adalah :
• Acer Aspire 4736Z
• Intel Pentium processor T4300 (2,1 GHz, 800 MHz FSB)
• Intel GMA 4500M
• 14.0” HD LED LCD
• 1 GB Memory
• 250 GB HDD
• Modem
• Printer : Epson Stylus TX121x
3.2.3 Kebutuhan Perangkat Lunak
Pada tahap pembangunan dan implementasi aplikasi e-commerce
sebagai media penjualan dengan sistem online ini, dibutuhkan beberapa
perangkat lunak pendukung, diantaranya :
3.2.3.1 Sistem Operasi
Sistem Operasi yang digunakan dalam pembuatan aplikasi ini
adalah Windows 7. Windows 7 adalah rilis terkini Microsoft
Windows yang menggantikan Windows Vista. Windows 7 lebih fokus
pada pengembangan dasar Windows, dengan tujuan agar lebih kompatibel
dengan aplikasi-aplikasi dan perangkat keras komputer yang kompatibel
dengan Windows Vista.
3.2.3.2 Web Server
Web server adalah komputer yang digunakan untuk menyimpan
dokumendokumen web, komputer ini akan melayani permintaan dokumen

4. 28
web dari kliennya (Purbo, 2006). Browser web seperti explorer atau navigator
berkomunikasi melalui jaringan (termasuk jaringan internet) dengan web
server, menggunakan HTTP. Browser akan mengirimkan request kepada
server untuk meminta dokumen tertentu atau layanan lain yang disediakan
oleh server. Server memberikan dokumen atau layanan jika tersedia juga
dengan menggunakan protocol HTTP (Purbo, 2006).
3.2.3.3 Web Browser
Web browser adalah suatu program yang dirancang untuk
mengambil informasi dari suatu server komputer pada jaringan internet.
Informasi-informasi ini dikemas dalam page-page, dimana page-page bisa
memiliki beberapa link yang menghubungkan web page tersebut kesumber
informasi lainnya (Sampurna, 1998).
Web browser dapat ditinjau dari sisi hardware dan software. Dari
sisi hardware web browser mesin perangkat keras komputer yang terdiri
dari CPU, monitor, keyboard, harddisk, dan lain-lain. Sedangkan dari sisi
software web browser merupakan program yang digunakan seiring dengan
berkembangnya teknologi, perkembangan web browser yang ada
perbandingannya selalu maju dengan semakin bertambahnya fasilitas dari
waktu kewaktu.
3.2.3.4 HTML
HyperText Mark up Language merupakan suatu metode untuk
mengimplementasikan konsep hypertext dalam suatu naskah atau
dokumen. HTML sendiri bukan tergolong pada suatu bahasa pemrograman
karena sifatnya yang hanya memberikan tanda (marking up) pada suatu
naskah teks dan bukan sebagai program. (Roy Larry, 2012)
3.2.3.5 Macromedia Dreamweaver 8
Macromedia Dreamweaver adalah sebuah editor HTML
profesional untuk mendesain secara visual dan mengelola situs web
maupun halaman web. Macromedia Dreamweaver 8 adalah salah satu
produk dari vendor Macromedia Inc.

5. 29
Dreamweaver 8 memiliki kemampuan untuk menyunting kode
dengan lebih baik, serta mampu menggabungkan layout site dengan
programming webnya. Kehebatan Dreamweaver ini menjadikan lebih
banyak digunakan oleh Web Desainer maupun Web Programmer guna
mengembangkan situs web. Ruang kerja, fasilitas dan kemampuan
Dreamweaver mampu meningkatkan produktivitas dan efektivitas dalam
desain maupun membangun situs web.
3.2.3.6 XAMPP 1.7.7
XAMPP merupakan tool yang menyediakan paket perangkat lunak
ke dalam satu buah paket. Dengan menginstall XAMPP maka tidak perlu
lagi melakukan instalasi dan konfigurasi web server Apache, PHP dan
MySQL secara manual. XAMPP akan menginstalasi dan
mengkonfigurasikannya secara otomatis untuk anda atau auto konfigurasi.
Versi XAMPP yang ada saat ini adalah Versi 1.7.7
3.2.3.7 PHP
PHP merupakan bahasa pemrograman skrip yang diletakkan dalam
server yang biasa digunakan untuk membuat aplikasi Web yang bersifat
dinamis. PHP mendukung berbagai database. Termasuk yang didukungnya
adalah MySQL. Dengan demikian, database yang Anda buat dengan
MySQL dapat diakses oleh PHP dan memungkinkan untuk menampilkan
isinya atau bahkan memanipulasi datanya melalui halaman Web. (Abdul
Kadir, 2008)
3.2.3.8 MySQL
MySQL (baca: mai-se-kyu-el) merupakan software yang tergolong
sebagai DBMS (Database Management System) yang bersifat Open
Source. Open Source menyatakan bahwa software ini dilengkapi dengan
source code (kode yang dipakai untuk membuat MySQL), selain tentu saja
bentuk executable-nya atau kode yang dapat dijalankan secara langsung
dalam sistem operasi, dan bisa diperoleh dengan cara mendownload
(mengunduh) di Internet secara gratis. (Abdul Kadir, 2008)
3.2.3.9 Mozilla Firefox

6. 30
Mozilla Firefox adalah sebuah aplikasi untuk browsing yang sangat
populer, dibuat oleh mozilla corporation, firefox adalah salah satu web
browser open source yang dibangun dengan Gecko layout engine. Tak
hanya handal firefox juga didukung oleh sejumlah Add-ons yang dapat
diinstall terpisah yang memungkinkan pengguna melakukan sesuai dengan
kegunaan Add-ons tersebut.
3.2.4 Kebutuhan Informasi
Kebutuhan informasi yang dibutuhkan Toko Tiga Nada antara lain
sebagai berikut :
1. Informasi customers dan supplier
2. Informasi kategori produk, produk, cara order, payment, shipping dan
tarif JNE.
3. Informasi pengeluaran dan pendapatan.
3.2.5 Kebutuhan Pengguna (user)
Pengguna komputer (user) di Toko Tiga Nada sebagai berikut :
Jumlah Admin dan Operator : 1 orang
Nama : Andik Biantoro
Bagian : Karyawan
Lama menggunakan komputer : 12 tahun
Sistem Operasi yang digunakan : Windows
3.2.6 Analisis Kelayakan Sistem
Analisis kelayakan sistem akan memberikan tekanan-tekanan
secara garis besar dalam menyusun suatu sistem baru untuk mencapai
sasaran yang sesuai dengan kebutuhan dan kondisi perusahaan, agar sistem
yang nantinya dibuat akan sesuai dan dapat dikembangkan dengan mudah
kedepannya.
3.2.7 Kelayakan Teknologi
Dalam pembuatan e-commerce ini perlu adanya sebuah analisis
tentang kelayakan baik pada teknologi untuk hardware maupun software.

7. 31
3.3 Tahap Desain (Perancangan Sistem)
Setelah tahap analisis sistem selesai dilakukan, maka analis sistem telah
mendapatkan gambaran dengan jelas apa yang harus dikerjakan. Tiba waktunya
sekarang bagi analis sistem untuk memikirkan bagaimana membentuk sistem
tersebut. Tahap ini disebut dengan perancangan sistem.
Tahap Desain (Perancangan Sistem) mempunyai 2 tujuan utama, yaitu :
1. Untuk memenuhi kebutuhan kepada pemakai sistem
2. Untuk memberikan gambaran yang jelas dan rancang bangun yang
lengkap kepada pemrogram komputer dan ahli-ahli teknik yang
terlibat (lebih condong pada desain sistem yang terinci)
3.3.1 Perancangan Proses
Tujuan dari perancangan proses adalah untuk menjaga agar proses
data lancar dan teratur sehingga menghasilkan informasi yang benar dan
untuk mengawasi proses dari sistem
Perancangan proses ini bisa digambarkan dengan :
3.3.1.1 Diagram Konteks
Gambar 3.1 Diagram Konteks
Keterangan :
1. Admin melakukan login kemudian memperoleh validasi, admin juga
dapat melakukan pengolahan data, berupa data pengurus, data
customer dan data product.
2. Admin dapat melihat informasi data pengurus, customer dan prduct.
3. Admin dapat mengelolah stok barang, admin dapat melihat informasi
stok barang.
4. Admin memberi kode token order konsumen.

8. 32
5. Admin mendapatkan data pesanan dari konsumen. Setelah konsumen
melakukan konfirmasi pembayaran selanjutnya admin mengubah
status pesanan.
6. Konsumen melakukan pendaftaran sebagai member agar dapat masuk
kedalam sistem.
7. Konsumen dapat melakukan login dan mendapat validasi login sukses.
8. Konsumen dapat melihat informasi data product, selanjutnya
melakukan pemesanan barang dan akan mendapatkan kode token
order konsumen.
9. Konsumen melakukan konfirmasi pembayaran setelah itu konsumen
mendapatkan konfirmasi pembayaran oleh pihak admin.
10. Dari seluruh informasi dan beberapa proses transaksi maka diperoleh
laporan-laporan yang meliputi laporan stok barang, laporan penjualan
dan laporan laba rugi yang akan disetorkan kepemilik toko.
3.3.1.2 DFD Level 0
Gambar 3.2 DFD Level 0
Keterangan :
1. Admin melakukan login untuk mendapatkan validasi login.
0.1
Login
0.2
Pengolahan
Data
0.3
Transaksi
0.4
Pengolahan
Stok Barang
0.5
Pembuatan
Laporan
Admin Konsumen
Login
Validasi Login
login
Validasi Login
Data Pengurus
Data Customer
Data Product
Informasi Data
Data Customer
Kode Token Order Konsumen
Informasi
Data Product
Pemesanan Barang
Konfirmasi Pembayaran
Kode Token Order Konsumen
Informasi Stok Barang
Pengolahan Stok Barang
Ubah Status Pesanan
Data Product
Data Order
Pemilik Toko
Laporan Stok Barang
Laporan Laba Rugi
Data Supplier
Data Category
Data Order
Konfirmasi Pembayaran
Data Payment
Data Shipping
Data Testimoni
Data Tarif JNE
Laporan Penjualan
Konfirmasi Pembayaran

9. 33
2. Admin dapat mengelolah data, data yang diolah meliputi data
pengurus, data customer, data category, data product, data supplier,
data testimoni, dan data tarif JNE. Disini admin juga mendapatkan
informasi data yang ada diproses pengolahan data.
3. Konsumen melakukan login untuk bisa masuk ke sistem kemudian
mendapatkan validasi login dari proses login.
4. Konsumen memasukkan data customer kedalam proses pengolahan
data kemudian konsumen melakukan transaksi penjualan. Dimana
konsumen melihat informasi data product, dapat melakukan
pemesanan barang.
5. Admin mendapatkan data order, data payment, dan data shipping dari
proses transaksi.
6. Setelah transaksi selesai konsumen memperoleh kode token dari
admin setelah proses transaksi.
7. Pada saat konsumen melakukan konformasi pembayaran, secara
otomatis status di order akan berubah menjadi konfirmasi
(sebelumnya pending). Admin kemudian melakukan pengecekan,
apakah benar ada uang masuk di bank. kalo benar ada, admin
melakukan pengiriman barang, jika barang telah dikirim, admin harus
mengubah status order tersebut menjadi send. Saat diubah menjadi
send, otomatis stok barang akan dikurangi sesuai dengan jumlah
barang yang dikirim.
8. Admin mendapatkan informasi stok barang kemudian melakukan
pengolahan stok barang dan admin dapat mengubah status pesanan.
9. Setelah proses selesai admin membuat laporan. Laporan itu berupa
laporan stok barang, laporan penjualan dan laporan laba rugi yang
diperoleh dari data product dan data order.
3.3.1.3 DFD Level 1 Proses Login
Admin
1.1
Login
Konsumen
1.2
Registrasi
Member
Login
Validasi Login
penguruspengurus
customercustomer
Data Pengurus
Data Pengurus
Login
Validasi Login
Registrasi
Konfirmasi
Data Customer
Data Customer
Data Customer
Data Customer
Data Customer

10. 34
Gambar 3.3 DFD Level 1 Proses Login
Keterangan :
1. Admin melakukan login untuk bisa masuk ke sistem.
2. Admin mendapatkan validasi login apabila berhasil masuk ke sistem.
3. Data admin akan disimpan di tabel pengurus.
4. Konsumen harus registrasi sebagai member baru terlebih dahulu untuk
bisa login dan masuk ke dalam sistem.
5. Data konsumen akan disimpan di tabel customer. Setelah itu dari data
customer konsumen mendapatkan konfirmasi data customer. Data
customer dapat dilihat dan diolah oleh admin.
6. Setelah berhasil registrasi maka konsumen bisa untuk melakukan
login.
3.3.1.4 DFD Level 1 Proses Pengolahan Data
Admin
1.1
Pengolahan
Data
Pengurus
Konsumen
1.2
Pengolahan
Data
Konsumen
1.4
Pengolahan
Data Product
Update Data Pengurus
penguruspengurus
Data Pengurus
Data Pengurus
customercustomer
Data Customer
Data Customer
productproduct
Data Product
Data Product
1.5
Pengolahan
Data Supplier
1.3
Pengolahan
Data Category CategoryCategory
Data Category
Data Category
Data Customer
Update
Data Customer
Update
Data Category
Update
Data Product
suppliersupplier
Data Supplier
Data Supplier
Update
Data Supplier
1.6
Pengolahan
Data
Testimoni
Update
Data Testimoni testimonitestimoni
Data Testimoni
Data Testimoni
1.7
Pengolahan
Data Tarif JNE jnejne
Data JNE
Data JNE
Update
Data JNE

11. 35
Gambar 3.4 DFD Level 1 Proses Pengolahan Data
Keterangan :
1. Admin mengupdate data pengurus kedalam proses pengolahan data
pengurus yang kemudian di simpan pada tabel pengurus.
2. Konsumen memasukkan data customer di pengolahan data customer
dan data customer akan disimpan di tabel customer. Data customer
diupdate oleh admin, diupdate oleh admin disini admin hanya bisa
melihat dan menghapus data customer saja. Admin tidak bisa
menambah data customer.
3. Admin melakukan pengolahan data category yang kemudian datanya
disimpan di tabel category. Disini admin bisa menambah, mengedit
dan menghapus kategori.
4. Admin melakukan pengolahan data product yang kemudian datanya
disimpan di tabel product. Disini admin juga bisa menambah product
baru, mengedit dan menghapus data product.
5. Admin melakukan pengolahan data supplier yang kemudian datanya
disimpan di tabel supplier. Disini admin bisa menambah supplier,
mengedit dan menghapus supplier.
6. Admin melakukan pengolahan data testimoni yang kemudian datanya
disimpan di tabel testimoni. Disini admin bisa mengedit testimoni dan
menghapus testimoni. Pada edit data testimoni admin bisa
mengupdate status testimoni menjadi ditampilkan atau tidak
ditampilkan pada halaman testimoni nantinya.
7. Admin melakukan pengolahan data tarif JNE yang kemudian datanya
disimpan di tabel jne. Disini admin bisa menambah tarif JNE,
mengedit dan menghapus tarif JNE.

12. 36
3.3.1.5 DFD Level 1 Proses Transaksi
Gambar 3.5 DFD Level 1 Proses Transaksi
Keterangan :
1. Konsumen melihat barang yang ditampilkan oleh sistem.
2. Ketika konsumen menginginkan untuk melakukan transaksi,
konsumen terlebih dahulu harus registrasi. Pada form registrasi
member baru konsumen harus mengisi semua form yang disediakan.
1.1
Lihat Barang
1.2
Registrasi
Member
1.3
Pilih Barang
1.4
Keranjang
Belanja
1.6
Pilih Jasa
Pengiriman
1.7
Pilih Jasa
Pembayaran
1.9
Konfirmasi
Pembayaran
Admin
Konsumen
productproduct
Data Product
Data Product
Data Product
Data Product
Registrasi
Konfirmasi
Data Customer
customercustomer
Data Customer
Data Customer
Data Product Data Product
Pengolahan Data
Keranjang Belanja
Data
Keranjang Belanja
keranjang
belanja
keranjang
belanja
Data Product
Data Keranjang Belanja
Data Keranjang Belanja
bayarbayar
Data Bayar
Data Bayar
Memilih Pengiriman shippingshipping
Data Shipping
Data Kode Token
Order KonsumenData Kode Token Order Konsumen
1.8
Kode Token
Order
Konsumen
paymentpaymentMemilih Pembayaran
Data Payment
Data Shipping
Data Payment
Konfirmasi Pembayaran
1.5
Pemesanan
Melakukan
Pemesanan
pesanpesan
Data Pesan
Data Pesan
Konfirmasi Pembayaran

13. 37
3. Setelah konsumen menjadi member baru konsumen bisa memilih
barang yang diinginkan kemudian dimasukkan di kerangjang belanja.
Disini konsumen bisa menambah jumlah dan mengurangi jumlah
barang yang akan dibeli.
4. Konsumen melakukan proses pemesanan. Data pemesanan disimpan
pada tabel pesan.
5. Selanjutnya konsumen bisa memilih jasa pengiriman dan jasa
pembayaran.
6. Setelah proses selesai admin akan memberi kode token order kepada
konsumen.
7. Konsumen melakukan konfirmasi pembayaran. Pada saat konsumen
melakukan konformasi pembayaran, secara otomatis status di order
akan berubah menjadi konfirmasi (sebelumnya pending). Admin
kemudian melakukan pengecekan, apakah benar ada uang masuk di
bank. kalo benar ada, admin melakukan pengiriman barang, jika
barang telah dikirim, admin harus mengubah status order tersebut
menjadi send. Saat diubah menjadi send, otomatis stok barang akan
dikurangi sesuai dengan jumlah barang yang dikirim.
3.3.1.6 DFD Level 1 Proses Pengolahan Stok Barang
Gambar 3.6 DFD Level 1 Proses Pengolahan Stok Barang
Keterangan :
1. Admin melakukan cek barang untuk melihat apa saja barang yang
sudah dibeli.
Admin
1.1
Cek Barang
pesanpesan
productproduct
1.2
Update Status
Pemesanan
1.3
Update
Barang
Data Product
Informasi Data Barang
Data Order
Data Product
Data Product
Data Pesan
Data Pesan
Data Product
Data ProductPengolahan Stok Barag
Informasi Stok Barang

14. 38
2. Setelah semua proses transaksi sudah lengkap, maka admin akan
merubah status pemesanan, dari status pemesan baru menjadi dikirim
atau telah lunas.
3. Apabila stok barang telah habis admin dapat mengelolah stok barang
ke dalam tabel product.
3.3.1.7 DFD Level 1 Proses Pembuatan Laporan
Gambar 3.7 DFD Level 1 Proses Pembuatan laporan
Keterangan :
Dari data yang diperoleh pada tabel product dan data order nantinya akan
diproses menjadi laporan stok barang, laporan penjualan dan laporan laba
rugi yang kemudian disetorkan kepada pemilik toko.
3.3.1.8 System Flowchart
a. Flowchart System Administrator
Start
Proses Login
Berhasil ?
T
Y
Logout
T
End
Y
Mengelolah
Data ?
Y
T
Halaman
Admin
Pengolahan Data
Pengolahan
Stok Barang ?
T
Cek BarangY
Update Status
Pemesanan
Update Barang
Kode Token Order
konsumen
1.1
Laporan
Admin Pemilik Toko
productproduct
orderorder
Data Order
Data Product
Data Order
Laporan Stok Barang
Laporan Laba Rugi
Data Product
Data Product
Data Order
Laporan Penjualan

15. 39
Gambar 3.8 Flowchart System Administrator
Keterangan :
1. Admin melalukan login terlebih dahulu.
2. Jika proses login berhasil maka alur dilanjutkan ke halaman
admin, proses error alur akan kembali ke proses login.
3. Pada halaman admin, admin bisa mengolah data, jika ingin
mengolah data maka admin melakukan pengolahan data. Data
yang diolah meliputi data pengurus, data customer, data
category, data product, data supplier, data testimoni, dan data
tarif JNE.
4. Sedangkan jika tidak untuk mengolah data maka admin bisa
melanjutkan untuk mengolah stok barang.
5. Jika ingin mengolah stok barang maka admin melanjutkan
untuk cek barang, mengupdate status pemesanan dan update
barang. Setelah proses selesai, admin bisa untuk logout.
6. Pada proses pengecekan, disini admin melakukan pengecekan,
apakah benar ada uang masuk di bank. kalo benar ada, admin
melakukan pengiriman barang, jika barang telah dikirim,
admin harus mengubah status order tersebut menjadi send.
Saat diubah menjadi send, otomatis stok barang akan dikurangi
sesuai dengan jumlah barang yang dikirim. Setelah proses
pengecekan maka admin memberikan kode token order untuk
konsumen.
7. Pada pengolahan stok barang jika tidak ingin untuk
melanjutkan ke proses selanjutnya maka alur akan ke logout.
8. Untuk mengakhiri proses, admin bisa lagsung logout.
Sedangkan jika tidak ingin logout maka alur akan
dikembalikan ke halaman admin.

16. 40
b. Flowchart System User
Gambar 3.9 Flowchart System User
Keterangan :
1. Pada halaman home, user bisa melihat kategori barang, jika user ingin
melakukan transaksi pembelian, user harus registrasi member terlebih
dahulu agar dapat melakukan proses selanjutnya untuk membeli
barang yang diinginkan.
2. Jika belum melakukan registrasi maka user tidak bisa melakukan
transaksi dan user hanya bisa melihat barang saja.
3. Apabila sudah melakukan registrasi dan berhasil maka user dapat
memilih katagori barang, melanjutkan memilih barang, barang yang
Start
Lihat Kategori
Barang
Pilih Kategori Barang
Lihat
Pemesanan
T
Order sekarang ?
Logout ?
T
End
Y
Total
Pesanan
dan Harga
Y
Belanja Lagi ?
Pilih Barang YY
T
T
Y
Halaman
Home
Kode Token
Order
Konsumen
Y
Pesan disimpan
T
T
Registrasi
Member
Berhasil ?
Y
T
Keranjang Belanja
Pilih Jasa
Pengiriman
Pilih Jasa
Pembayaran
Konfirmasi
Pembayaran

17. 41
sudah dipilih akan dimasukkan di keranjang belanja selanjutnya bisa
memilih jasa pengiriman, jasa pembayaran dan bisa langsung order.
4. Setelah proses selesai maka pesan akan disimpan.kemudian user
mendapatkan kode token order konsumen.
5. User melakukan konfirmasi pembayaran. Pada saat konsumen
melakukan konformasi pembayaran, secara otomatis status di order
akan berubah menjadi konfirmasi (sebelumnya pending). Admin
kemudian melakukan pengecekan, apakah benar ada uang masuk di
bank. kalo benar ada, admin melakukan pengiriman barang, jika
barang telah dikirim, admin harus mengubah status order tersebut
menjadi send. Saat diubah menjadi send, otomatis stok barang akan
dikurangi sesuai dengan jumlah barang yang dikirim.
6. Uaer bisa melanjutkan untuk belanja lagi atau tidak, jika ingin belanja
lagi maka alur akan kembali ke lihat kategori barang dan proses akan
kembali seperti awal sedangkan jika tidak belanja lagi maka user bisa
logout.
7. Dalam proses logout user dihadapkan dengan keputusan iya atau tidak
untuk logout. Jika iya maka proses selesai, apabila tidak maka alur
akan kembali ke halaman home.
8. Pada keputusan pilih kategori barang jika user tidak ingin melanjutkan
untuk memilih barang maka user bisa melanjutkan untuk melihat
pemesanan dan bisa logout atau tidak.
9. Pada keputusan pilih barang jika user tidak ingin melanjutkan untuk
order sekarang, maka user bisa untuk melihat pemesanan.dan bisa
logout atau tidak.
10. Pada keputusan order sekarang jika user tidak ingin melanjutkan
untuk proses penyimpanan, maka user bisa untuk melihat
pemesanan.dan bisa logout atau tidak.
11. Pada keputusan lihat pemesanan jika user tidak ingin melanjutkan
untuk cek barang, maka user bisa logout atau tidak. Sedangkan jika

18. 42
user ingin melanjutkan maka user bisa melihat total pesanan dan harga
dan bisa dilanjutkan untuk belanja lagi atau tidak.
3.3.2 Perancangan Basis Data
Pada tahap ini dilakukan transformasi dari data manual ke dalam
bentuk basis data yang terbagi dalam beberapa tabel, didalamnya terdapat
bagian yang dinamakan field.
3.3.2.1 CDM (Conceptual Data Model)
• Model yang dibuat berdasarkan anggapan bahwa dunia nyata terdiri
dari koleksi obyek-obyek dasar yang dinamakan entitas (entity) serta
hubungan (relationship) antara entitas-entitas itu.
• Biasanya direpresentasikan dalam bentuk Entity Relationship
Diagram.
Manfaat Penggunaan CDM dalam perancangan database :
• Memberikan gambaran yang lengkap dari struktur basis data yaitu arti,
hubungan, dan batasan-batasan
• Alat komunikasi antar pemakai basis data, designer, dan analis.
memilih
mempunyai
memesan
memasukkan
baner
simpan
mengelolah
membuat
terdapat
mengisi
mengupdate
mengedit
melihat
config
menggunakan
punya
masuk
kirim
bayar
melakukan
dapat
olah
product
productID
nama
deskripsi
foto
keyword
description
title
slug
kategori
tanggal
jam
hari
harga
product_code
stok
spesifikasi
status
kondisi
hpp
<pi> Integer
Variable characters (255)
Text
Variable characters (150)
Variable characters (255)
Variable characters (255)
Variable characters (225)
Variable characters (255)
Integer
Variable characters (20)
Variable characters (10)
Variable characters (10)
Integer
Variable characters (15)
Integer
Text
Variable characters (20)
Variable characters (20)
Integer
category
id_category
category
parent
pic
slug
...
<pi> Integer
Variable characters (30)
Variable characters (20)
Variable characters (100)
Variable characters (255)
shipping
shippingID
shipping_method
...
<pi> Integer
Variable characters (10)
payment
paymentID
bank
rekening
<pi> Integer
Variable characters (10)
Variable characters (20)
customer
customerID
nama
alamat
kelurahan
kecamatan
kabupaten
propinsi
email
hp
password
aktivasi
...
<pi> Integer
Variable characters (255)
Variable characters (100)
Variable characters (50)
Variable characters (50)
Variable characters (50)
Variable characters (50)
Variable characters (100)
Variable characters (100)
Characters (255)
Integer
pesan
orderID
hari
tanggal
jam
total
status
token
...
<pi> Integer
Variable characters (10)
Variable characters (20)
Variable characters (10)
Integer
Variable characters (20)
Variable characters (10)
keranjang belanja
itemID
ip
tanggal
harga
jumlah
...
<pi> Integer
Variable characters (25)
Variable characters (20)
Integer
Integer
bayar
confirmationID
no_nota
...
<pi> Integer
Variable characters (50)
auxpage
auxpageID
judul
isi
...
<pi> Integer
Variable characters (30)
Text
baner
kode_baner
judul
gambar
status
link
keterangan
posisi
urut
...
<pi> Integer
Variable characters (30)
Variable characters (100)
Variable characters (20)
Variable characters (255)
Variable characters (255)
Variable characters (20)
Integer
pengurus
kode_urus
username
password
level
akses
...
<pi> Integer
Characters (20)
Characters (255)
Integer
Variable characters (30)
testimoni
testimoniID
nama
email
kota
testimoni
status
tanggal
hari
jam
...
<pi> Integer
Variable characters (255)
Variable characters (100)
Variable characters (50)
Text
Variable characters (20)
Variable characters (20)
Variable characters (10)
Variable characters (10)
menu
id_menu
urut
menu
file
parent
...
<pi> Integer
Integer
Variable characters (30)
Variable characters (50)
Variable characters (20)
jne
jneID
kota
paket
biaya
...
<pi> Integer
Variable characters (50)
Variable characters (20)
Integer
konfigurasi
id_konfigurasi
title
value
id
...
<pi> Integer
Variable characters (225)
Variable characters (255)
Variable characters (50)
supplier
supplierID
nama
alamat
kota
propinsi
email
hp
<pi> Integer
Variable characters (255)
Variable characters (100)
Variable characters (50)
Variable characters (50)
Variable characters (100)
Variable characters (100)
Identifier_1
...
<pi>

19. 43
Gambar 3.10 CDM (Conceptual Data Model)
3.3.2.2 PDM (Phsical Data Model)
Merupakan model yang menggunakan sejumlah tabel untuk
menggambarkan data serta hubungan antara data-data tersebut. Setiap
tabel mempunyai sejumlah kolom di mana setiap kolom memiliki nama
yang unik.
Gambar 3.11 PDM (Phsical Data Model)
3.3.2.3 Kamus Data
Kamus data adalah tempat menyimpan informasi yang menyimpan
struktur logikal basis data.
Tabel 3.1 Tabel Kamus Data
Tipe Entitas Atribut
Auxpage auxpageID, judul, isi.
Baner kode_baner, judul, gambar, status,
link, keterangan, posisi, urut.
Bayar confirmationID, no_nota,
customerID, orderID, jumlah,
tanggal.
product
productID
orderID
kode_urus
nama
deskripsi
foto
keyword
description
title
slug
kategori
tanggal
jam
hari
harga
product_code
stok
spesifikasi
status
kondisi
hpp
...
integer
integer
integer
varchar(255)
long varchar
varchar(150)
varchar(255)
varchar(255)
varchar(225)
varchar(255)
integer
varchar(20)
varchar(10)
varchar(10)
integer
varchar(15)
integer
long varchar
varchar(20)
varchar(20)
integer
<pk>
<fk1>
<fk2>
category
id_category
customerID
productID
kode_urus
category
parent
pic
slug
...
integer
integer
integer
integer
varchar(30)
varchar(20)
varchar(100)
varchar(255)
<pk>
<fk1>
<fk2>
<fk3>
shipping
shippingID
shipping_method
integer
varchar(10)
<pk>payment
paymentID
bank
rekening
...
integer
varchar(10)
varchar(20)
<pk>
customer
customerID
kode_urus
jneID
nama
alamat
kelurahan
kecamatan
kabupaten
propinsi
email
hp
password
aktivasi
...
integer
integer
integer
varchar(255)
varchar(100)
varchar(50)
varchar(50)
varchar(50)
varchar(50)
varchar(100)
varchar(100)
char(255)
integer
<pk>
<fk1>
<fk2>
pesan
orderID
paymentID
customerID
kode_urus
shippingID
hari
tanggal
jam
total
status
token
...
integer
integer
integer
integer
integer
varchar(10)
varchar(20)
varchar(10)
integer
varchar(20)
varchar(10)
<pk>
<fk4>
<fk2>
<fk1>
<fk3>
keranjang belanja
itemID
productID
orderID
ip
tanggal
harga
jumlah
...
integer
integer
integer
varchar(25)
varchar(20)
integer
integer
<pk>
<fk2>
<fk1>
bayar
confirmationID
orderID
customerID
no_nota
jumlah
tanggal
...
integer
integer
integer
varchar(50)
integer
varchar(20)
<pk>
<fk2>
<fk1>
auxpage
auxpageID
judul
isi
...
integer
varchar(30)
long varchar
<pk>
baner
kode_baner
judul
gambar
status
link
keterangan
posisi
urut
...
integer
varchar(30)
varchar(100)
varchar(20)
varchar(255)
varchar(255)
varchar(20)
integer
<pk>
pengurus
kode_urus
auxpageID
kode_baner
username
password
level
akses
integer
integer
integer
char(20)
char(255)
integer
varchar(30)
<pk>
<fk2>
<fk1>
testimoni
testimoniID
customerID
kode_urus
nama
email
kota
testimoni
status
tanggal
hari
jam
...
integer
integer
integer
varchar(255)
varchar(100)
varchar(50)
long varchar
varchar(20)
varchar(20)
varchar(10)
varchar(10)
<pk>
<fk1>
<fk2>
menu
id_menu
id_category
urut
menu
file
parent
integer
integer
integer
varchar(30)
varchar(50)
varchar(20)
<pk>
<fk>
jne
jneID
kota
paket
biaya
...
integer
varchar(50)
varchar(20)
integer
<pk>
konfigurasi
id_konfigurasi
kode_urus
title
value
id
...
integer
integer
varchar(225)
varchar(255)
varchar(50)
<pk>
<fk>
supplier
supplierID
kode_urus
nama
alamat
kota
propinsi
email
hp
...
integer
integer
varchar(255)
varchar(100)
varchar(50)
varchar(50)
varchar(100)
varchar(100)
<pk>
<fk>

20. 44
Category id_category, category, parent, pic,
slug.
Customer customerID, nama, alamat,
kelurahan, kecamatan, kabupaten,
propinsi, email, hp, password,
aktivasi.
Jne jneID, kota, paket, biaya.
Keranjangbelanja itemID, ip, tanggal, productID,
harga, jumlah, orderID.
Konfigurasi id_konfigurasi, title, value, id.
Tabel 3.1 Tabel Kamus Data (lanjutan)
Menu id_menu, urut, menu, file, parent.
Payment paymentID, bank, rekening.
Pengurus kode_urus, username, password,
level, akses.
Pesan orderID, customerID, hari, tanggal,
jam, customerIP, shippingID,
paymentID, total, status, token.
Product productID, nama, deskripsi, foto,
keyword, description, title, slug,
kategori, tanggal, jam, hari, harga,
product_kode, stok, spesifikasi,
status, kondisi, hpp
Shipping shippingID, shipping_method.
Supplier supplierID, nama, alamat, kota,
propinsi, email, hp.
Testimoni tetimoniID, nama, email, kota,
testimoni, status, tanggal, hari, jam.
3.3.2.4 Perancangan Struktur Tabel
a. Tabel Auxpage
Primary key : auxpageID
Foreigen key : -
Tabel 3.2 Tabel Auxpage
Nama Field Tipe Data Lebar Data Keterangan
auxpageID integer Nomor urut auxpage,
auto increment
judul varchar 30 Judul auxpage
isi text Isi auxpage
b. Tabel Baner

21. 45
Primary key : kode_baner
Foreigen key : -
Tabel 3.3 Tabel Baner
Nama Field Tipe Data Lebar Data Keterangan
kode_baner integer Nomor urut baner, auto
increment
judul varchar 30 Judul baner
gambar varchar 100 Gambar baner
Tabel 3.3 Tabel Baner (lanjutan)
status varchar 20 Status baner
link varchar 255 Link baner
keterangan varchar 255 Keterangan baner
posisi varchar 20 Posisi baner
urut integer Urutan tampil baner
c. Tabel Bayar
Primary key : confirmationID
Foreigen key : customerID, orderID
Tabel 3.4 Tabel Bayar
Nama Field Tipe Data Lebar Data Keterangan
confirmationID integer Nomor urut konfirmasi,
auto increment
orderID integer Nomor urut nama
pelanggan, auto
increment
customerID integer Nomor urut nama
pelanggan, auto
increment
no_nota varchar 50 No nota pembayaran
jumlah integer Jumlah yang harus
dibayar
tanggal varchar 20 Tanggal pembayaran
d. Tabel Category
Primary key : id_category
Foreigen key : customerID, productID, kode_urus
Tabel 3.5 Tabel Category
Nama Field Tipe Data Lebar Data Keterangan
id_category integer Nomor urut category,

22. 46
auto increment
customerID integer Nomor urut nama
pelanggan, auto
increment
productID integer Nomor urut barang, auto
increment
kode_urus integer Nomor urut pengurus,
auto increment
category varchar 30 Kategory barang
Tabel 3.5 Tabel Category (lanjutan)
parent varchar 20 Parent category
pic varchar 100 Pic category
slug varchar 255 Slug category
e. Tabel Customer
Primary key : customerID
Foreigen key : kode_urus, jne
Tabel 3.6 Tabel Customer
Nama Field Tipe Data Lebar Data Keterangan
customerID integer Nomor urut nama
pelanggan, auto
increment
orderID integer Nomor urut nama
pelanggan, auto
increment
kode_urus integer Nomor urut pengurus,
auto increment
confirmID integer No urut konformasi
pembayaran, auto
increment
nama varchar 255 Nama pelanggan
alamat varchar 100 Alamat pelanggan
kelurahan varchar 50 Kelurahan pelanggan
kecamatan varchar 50 Kecamatan pelanggan
kabupaten varchar 50 Kabupaten Pelanggan
propinsi varchar 50 Propinsi pelanggan
email varchar 100 Email pelanggan,
sekaligus digunakan
untuk login
hp varchar 100 Nomor handphone
pelanggan
password varchar 255 Password pelanggan
aktivasi integer Aktivasi pelanggan

23. 47
f. Tabel JNE
Primary key : id_konfigurasi
Foreigen key : -
Tabel 3.7 Tabel JNE
Nama Field Tipe Data Lebar Data Keterangan
jneID integer Nomor urut jasa
pengiriman, auto
increment
Kota varchar 50 Kota yang dituju
Paket varchar 20 Paket JNE
Biaya integer Biaya pengiriman
g. Tabel Keranjang Belanja
Primary key : itemID
Foreigen key : orderID, productID
Tabel 3.8 Tabel Keranjang Belanja
Nama Field Tipe Data Lebar Data Keterangan
itemID integer Nomor urut item barang
yang disorder, auto
increment
productID integer Nomor urut barang, auto
increment
orderID integer Nomor urut nama
pelanggan, auto
increment
Ip varchar 25 IP keranjang belanja
Tanggal Varchar 20 Tanggal pesan
Harga integer Harga barang pesanan
Jumlah integer Jumlah barang pesanan
h. Tabel konfigurasi

24. 48
Primary key : id_konfigurasi
Foreigen key : kode_urus
Tabel 3.9 Tabel Konfigurasi
Nama Field Tipe Data Lebar Data Keterangan
id_konfigurasi integer Nomor urut konfigurasi,
auto increment
kode_urus integer Nomor urut pengurus,
Tabel 3.9 Tabel Konfigurasi (lanjutan)
auto increment
Title varchar 255 Judul konfigurasi
Value varchar 255 Nilai konfigurasi
Id varchar 50 Id konfigurasi
i. Tabel Menu
Primary key : id_menu
Foreigen key : id_category
Tabel 3.10 Tabel Menu
Nama Field Tipe Data Lebar Data Keterangan
id_menu integer 5 Nomor urut menu, auto
increment
id_category integer Nomor urut category,
auto increment
Urut integer 5 Urut menu
Menu varchar 30 Menu
File varchar 50 File menu
Parent varchar 20 Parent menu
j. Tabel Pembayaran (Payment)
Primary key : paymentID
Foreigen key : -
Tabel 3.11 Tabel Pembayaran (Payment)
Nama Field Tipe Data Lebar Data Keterangan
paymentID integer Nomor urut nama Bank,
auto increment
Bank varchar 10 Nama bank
Rekening varchar 20 No rekening bank
k. Tabel Pengurus

25. 49
Primary key : kode_urus
Foreigen key : kode_baner, auxpageID
Tabel 3.12 Tabel Pengurus
Nama Field Tipe Data Lebar Data Keterangan
kode_urus integer 5 Nomor urut pengurus,
auto increment
Tabel 3.12 Tabel Pengurus (lanjutan)
auxpageID integer Nomor urut auxpage,
auto increment
kode_baner integer Nomor urut baner, auto
increment
Username char 20 Username pengurus
Password char 255 Password pengurus
Level integer Tingkatan pengurus
Akses varchar 30 Akses pengurus
l. Tabel Pesan
Primary key : orderID
Foreigen key : kode_urus, customerID, shippingID, paymentID
Tabel 3.13 Tabel Pesan
Nama Field Tipe Data Lebar Data Keterangan
orderID integer Nomor urut nama
pelanggan, auto
increment
paymentID integer Nomor urut nama Bank,
auto increment
customerID integer Nomor urut nama
pelanggan, auto
increment
kode_urus integer Nomor urut pengurus,
auto increment
shippingID integer Nomor urut metode
pengiriman barang, auto
increment
hari varchar 10 Hari pelanggan order
barang
tanggal varchar 20 Tanggal pelanggan order
barang
jam varchar 10 Jam pelanggan order
barang
total integer Total harga pesanan

26. 50
status varchar 20 Status pengiriman
barang : pending,
terkirim, batal
token varchar 10 Kode khusus yang
diberikan pengurus
kepada konsumen
m. Tabel Product
Primary key : productID
Foreigen key : orderID, kode_urus
Tabel 3.14 Tabel Product
Nama Field Tipe Data Lebar Data Keterangan
productID integer Nomor urut barang, auto
increment
orderID integer Nomor urut nama
pelanggan, auto
increment
kode_urus integer Nomor urut pengurus,
auto increment
nama varchar 255 Nama produk
deskripsi text Deskripsi barang
foto varchar 150 Foto barang
keyword varchar 255 Kata kunci untuk
mencari produk
description varchar 255 Deskripsi produk
title varchar 255 Judul barang
slug varchar 255 Slug barang
kategori integer Sama dengan categoryID
pada table
kategori_barang
tanggal varchar 20 Tanggal barang di entry
jam varchar 10 Jam barang di entry
hari varchar 10 Hari barang di entry
harga integer Harga barang
product_code varchar 15 Digit 1, huruf pertama
kategori barang
Digit 2 dan 3, nomor
urut kategori barang
Digit 4 – 8, nomor urut
barang
Misalnya D0100001
stok integer Jumlah stok barang
spesifikasi long Spesifikasi barang

27. 51
varchar
status varchar 20 Status barang Ready ato
PO
kondisi varchar 20 Kondisi baru atau bekas
hpp integer Harga pokok penjualan
n. Tabel Pengiriman (Shipping)
Primary key : shippingID
Foreigen key : -
Tabel 3.15 Tabel Pengiriman (Shipping)
Nama Field Tipe Data Lebar Data Keterangan
shippingID integer Nomor urut metode
pengiriman barang, auto
increment
shipping_meth
od
varchar 10 Metode pengiriman
barang
o. Tabel Supplier
Primary key : supplierID
Foreigen key : kode_urus
Tabel 3.16 Tabel Supplier
Nama Field Tipe Data Lebar Data Keterangan
supplierID integer Nomor urut supplier,
auto increment
kode_urus integer Nomor urut pengurus,
auto increment
nama varchar 255 Nama supplier
alamat varchar 100 Alamat supplier
kota varchar 50 Kota tinggal supplier
propinsi varchar 50 Propinsi tinggal supplier
email varchar 100 Email supplier
hp varchar 100 Nomer handphone
supplier
p. Tabel Testimoni
Primary key : testimoniID
Foreigen key : customerID, kode_urus

28. 52
Tabel 3.17 Tabel Testimoni
Nama Field Tipe Data Lebar Data Keterangan
testimoniID integer Nomor urut testimoni,
auto increment
customerID integer Nomor urut nama
pelanggan, auto
increment
Tabel 3.17 Tabel Testimoni (lanjutan)
kode_urus integer Nomor urut pengurus,
auto increment
nama varchar 255 Nama pengirim
testimoni
email varchar 100 Email pengirim
testimoni
kota varchar 50 Kota penulis testimoni
testimoni long
varchar
Isi testimoni
status varchar 20 Status testimoni
tanggal varchar 20 Tanggal testimoni ditulis
hari varchar 10 Hari testimoni ditulis
jam varchar 10 Waktu testimoni ditulis
3.3.3 Perancangan Antarmuka / Interface
Satu hal lagi yang harus diperhatikan dalam pembuatan perangkat
lunak bahwa perangkat lunak ini digunakan oleh banyak sekali pengguna
dan dari beragam latar belakang.
Karena tidak semua pengguna adalah seseorang yang ahli dalam
pengoperasian komputer. Karena itu dalam perancangan antarmuka
perangkat lunak haruslah ramah pengguna (user friendly). Adapun
antarmuka pemakai perangkat lunak yang akan dirancang ditampilkan
sebagai berikut :
3.3.3.1 Perancangan Halaman User
• Perancangan Halaman Menu Utama

29. 53
Gambar 3.12 Perancangan Halaman Menu Utama
• Perancangan Halaman Registrasi
Form yang sudah disediakan harus diisi dengan lengkap.
Gambar 3.13 Perancangan Halaman Registrasi
• Perancangan Halaman Registrasi
Klik LINK untuk mengaktivasi member. (Lihat gambar)
Gambar 3.14 Perancangan Halaman Registrasi
• Perancangan Halaman Registrasi Berikutnya
Gambar 3.15 Perancangan Halaman Registrasi Berikutnya
• Perancangan Login User

30. 54
Gambar 3.16 Perancangan Login User
• Perancangan Halaman Member
Secara otomatis menu REGISTER akan berubah menjadi
MEMBER karena sudah teraktivasi.
Gambar 3.17 Perancangan Halaman Member
• Perancangan Halaman Transaksi
Konsumen bisa menentukan jumlah barang yang ingin dibeli.
Gambar 3.18 Perancangan Halaman Transaksi
• Perancangan Halaman Keranjang Belanja
Di halaman keranjang belanja konsumen bisa mengurangi dan
menambah barang yang ingin dibeli. Setelah itu konsumen bisa
menghitung berapa total harga yang harus dibayar. Klik
checkout untuk melanjutkan proses transaksi.
Gambar 3.19 Perancangan Halaman Keranjang Belanja

31. 55
• Perancangan Halaman Pengiriman
Pada halaman pengiriman disini konsumen memilih metode
pengiriman. Klik tanda panah untuk melanjutkan proses.
Gambar 3.20 Perancangan Halaman Pengiriman
• Perancangan Halaman Pembayaran
Pada halaman pembayaran konsumen memilih cara
pembayaran. Klik tanda panah untuk melanjutkan proses.
Gambar 3.21 Perancangan Halaman Pembayaran
• Perancangan Halaman Pesan Sekarang
Pada halaman pesan sekarang konsumen dilihatkan detail
order. Mulai dari Alamat Pengiriman, Data Pesanan, Metode
Pengiriman Barang dan Metode Pembayaran. Klik order now
jika ingin pesan sekarang.

32. 56
Gambar 3.22 Perancangan Halaman Pesan Sekarang
• Perancangan Halaman Terima Kasih
Di halaman ini konsumen mendapatkan kode token order
konsumnen dan ucapan terima kasih telah melakukan trasaksi.
Gambar 3.23 Perancangan Halaman Terima Kasih
• Perancangan Halaman Konfirmasi Pembayaran
Untuk melakukan konfirmasi pembayaran konsumen masuk ke
halaman member terlebih dahulu kemudian akan ditampilkan
halaman member yang sudah terisi order. Pada halaman ini
konsumen mengklik link konfirmasi pembayaran (lihat gambar
3.24). Kemudian akan muncul halaman konfirmasi
pembayaran disini konsumen mengisi jumlah total pembelian
(lihat gambar 3.25). Jika salah memasukkan angka maka
konsumen tidak mendapatkan nomor nota. Sedangkan jika
berhasil akan mendapatkan nomor nota (lihat gambar 3.26).
Gambar 3.24 Perancangan Halaman Konfirmasi Pembayaran

33. 57
Gambar 3.25 Perancangan Halaman Isi Jumlah Pembayaran
Gambar 3.26 Perancangan Halaman Saat Mendapatkan Nomor Nota
• Perancangan Halaman Testimoni
Testimoni akan ditampilkan jika admin sudah mengubah status
dari tidak ditampilkan menjadi ditampilkan.
Gambar 3.27 Perancangan Halaman Testimoni
• Perancangan Halaman Lihat Semua Testimoni
Semua isi testimoni akan ditampilkan dihalaman ini.
Gambar 3.28 Perancangan Halaman Lihat Semua Testimoni
• Perancangan Halaman Kirim Testimoni
Konsumen bisa mengisi testimoni di halaman ini.

34. 58
Gambar 3.29 Perancangan Halaman Kirim Testimoni
• Perancangan Halaman Daftar Harga
Konsumen bisa melihat semua daftar harga di halaman daftar
harga.
Gambar 3.30 Perancangan Halaman Daftar Harga
• Perancangan Halaman Cara Order
Konsumen bisa melihat cara order di halaman ini.
Gambar 3.31 Perancangan Halaman Cara Order
• Perancangan Halaman Tentang Kami
Halaman tentang kami ini berguna agar konsumen bisa lebih
mengenal dan bisa lebih tahu tentang perusahaan atau toko
yang menggunakan jasa website sebagai media penjualan
secara online.

35. 59
Gambar 3.32 Perancangan Halaman Tentang Kami
• Perancangan Halaman Kontak Kami
Disini menyediakan form untuk mengirim email ke perusahaan
dan juga menyediakan link untuk menghubungi semisal twitter
dan facebook.
Gambar 3.33 Perancangan Halaman Kontak Kami
3.3.3.2 Perancangan Halaman Administrator
• Perancangan Halaman Login Admin
Gambar 3.34 Perancangan Halaman Login Admin
• Perancangan Halaman Konfigurasi General
Halaman ini untuk memasukkan detail perusahaan atau toko.
Gambar 3.35 Perancangan Halaman Konfigurasi General

36. 60
• Perancangan Halaman Konfigurasi Header
Halaman ini untuk mengedit header yang akan ditampilkan.
Gambar 3.36 Perancangan Halaman Konfigurasi Header
• Perancangan Halaman Customers
Admin disini tidak bisa mengedit data customer. Admin hanya
bisa menghapus. Background warna biru artinya customer
belum melakukan aktivasi
Gambar 3.37 Perancangan Halaman Customers
• Perancangan Halaman Kategori
Admin disini tidak bisa menambah, edit dan hapus kategori.
Gambar 3.38 Perancangan Halaman Kategori

37. 61
• Perancangan Halaman Produk Pada Administrator
Jika nama kategori dan nama produk sudah diisi data maka
bisa diklik untuk menambah, edit atau hapus data produk.
Gambar 3.39 Perancangan Halaman Produk
• Perancangan Halaman Produk Selanjutnya
Pada Halaman ini bisa tampil jika salah satu nama categori
atau nama produk diklik.
Gambar 3.40 Perancangan Halaman Produk Selanjutnya
• Perancangan Halaman Add New Product
Admin bisa menambahkan produk dihalaman ini.

38. 62
Gambar 3.41 Perancangan Halaman Add New Product
• Perancangan Halaman Order
Admin bisa melihat pesanan dan mengedit status pemesanan.
Background warna merah artinya status order pending,
background warna biru artinya status order konfirmasi
(customer sudah melakukan pembayaran.
Gambar 3.42 Perancangan Halaman Order
• Perancangan Halaman Edit Order
Admin mengedit status pemesanan di halam ini. Status
disediakan send, pending dan konfirmasi.
Gambar 3.43 Perancangan Halaman Edit Order
• Perancangan Halaman Konfirmasi Pembayaran
Admin hanya bisa melihat dan menghapus saja.
Gambar 3.44 Perancangan Halaman Konfirmasi Pembayaran
• Perancangan Halaman Payment
Admin bisa mengedit, menambah, menghapus dan menyimpan
payment.

39. 63
Gambar 3.45 Perancangan Halaman Payment
• Perancangan Halaman Shipping
Admin bisa mengedit, menambah, menghapus dan menyimpan
shipping.
Gambar 3.46 Perancangan Halaman Shipping
• Perancangan Halaman Supplier
Admin bisa mengedit, menambah dan menghapus data
supplier.
Gambar 3.47 Perancangan Halaman Supplier
• Perancangan Halaman Tambah Supplier
Admin mengisi form yang disediakan untuk melengkapi data
supplier.
Gambar 3.48 Perancangan Halaman Tambah Supplier
• Perancangan Halaman Testimoni
Admin bisa mengedit dan menghapus data.

40. 64
Gambar 3.49 Perancangan Halaman Testimoni
• Perancangan Halaman Edit Testimoni
Admin bisa menentukan status testimoni ditampilkan atau
tidak ditampilkan.
Gambar 3.50 Perancangan Halaman Edit Testimoni
• Perancangan Halaman Tarif JNE
Admin bisa mengedit, menambah dan menghapus tarif JNE.
Gambar 3.51 Perancangan Halaman Tarif JNE
• Perancangan Halaman Tambah Tarif JNE
Admin mengisi form yang disediakan kemudian klik OK untuk
menyimpan.
Gambar 3.52 Perancangan Halaman Tambah Tarif JNE
• Perancangan Halaman Edit Tarif JNE

41. 65
Admin mengedit pada form yang berisi data yang telah ada
kemudian klik OK untuk menyimpan.
Gambar 3.53 Perancangan Halaman Edit Tarif JNE
• Perancangan Halaman Report
Dalam menu report terdapat beberapa sub menu diantaranya
laporan stok barang, daftar penjualan bulanan, laporan laba
rugi dan laporan detail laba rugi
Gambar 3.54 Perancangan Halaman Report
• Perancangan Halaman Auxpage
Halaman auxpage disini berfungsi untuk menyimpan data-data,
semisal : about us, cara order dan lain-lain.
Gambar 3.55 Perancangan Halaman Auxpage
• Perancangan Halaman Edit Auxpage
Admin bisa mengedit auxpage di halaman edit auxpage.

42. 66
Gambar 3.56 Perancangan Halaman Edit Auxpage
• Perancangan Halaman Add Auxpage
Admin bisa menambah auxpage di halaman add auxpage.
Gambar 3.57 Perancangan Halaman Add Auxpage
• Perancangan Halaman Baner
Admin bisa menambah, edit dan hapus baner di halaman
banner.
Gambar 3.58 Perancangan Halaman Baner
• Perancangan Halaman Edit Baner
Admin bisa mngedit baner di halaman edit banner.
Gambar 3.59 Perancangan Halaman Edit Baner
• Perancangan Halaman Tambah Baner
Pada halaman ini admin bisa menambah baner.

43. 67
Gambar 3.60 Perancangan Halaman Tambah Baner
• Perancangan Halaman Change Password
Admin bisa mengubah username dan password di halaman
ubah username dan password.
Gambar 3.61 Perancangan Halaman Change Password
3.3.4 Perancangan Laporan / Report
Berdasarkan bukti transaksi yang ada, maka pada akhir bulan
bagian penjualan akan membuat laporan penjualan, stok barang dan
laporan laba rugi yang ditujukan kepada pemilik.
• Perancangan Laporan Penjualan
Gambar 3.62 Perancangan Laporan Penjualan
• Perancangan Laporan Stok Barang
Gambar 3.63 Perancangan Laporan Stok Barang
• Perancangan Laporan Laba Rugi

44. 68
Gambar 3.64 Perancangan Laporan Laba Rugi
• Perancangan Laporan Detail Laba Rugi
Gambar 3.65 Perancangan Laporan Detail Laba Rugi