10 BAB III
PERANCANGAN SISTEM
Pada toko AnL store music akan dibuat sebuah aplikasi
Website E-Commerce bertujuan untuk memudahkan pembeli
atau customer serta masyarakat pada umumnya dalam mendapatkan informasi mengenai produk AnL store music, pembeli atau customer tidak harus jauh-jauh ketempat penjual cukup dengan cara membuka website, informasi tentang produk AnL store music dapat lihat dengan baik dan jelas.
3.1 Perancangan Sistem
Sistem Penjualan
3.1.1 Data Flow Diagram Level 0
Data Flow Diagram level 0 (DFD level 0) pada website
e-commerce ini ditunjukan pada Gambar 3.1 DFD Level 0
Gambar 3.1 DFD Level 0
Keterangan :
1. Calon member melakukan registrasi member baru, sistem penjualan online memberi id & password.
2. Member melakukan login ke sistem penjualan online. 3. Member memilih produk, sistem penjualan online
menambahkan ke daftar belanja.
4. Member melakukan transaksi, sistem penjualan online
memberi bukti transaksi.
5. Admin melakukan login, sistem penjualan online
memberi hak akses penuh.
6. Admin menambah data produk, sistem penjualan online
data produk bertambah
Member Admin
1.0 Registrasi atau
login Login
2.0 Tambah Produk
3.0 Mengunjungi Web
4.0 Memilih Produk
5.0 Pembayaran
Konfirmasi Mencari ProdukKonfirmasi
Memambah List Belanja
online terbaharui.
8. Admin menghapus data produk, data produk sistem penjualan online berkurang.
3.1.2 Data Flow Diagram level 1
Data Flow Diagram level 1 (DFD level 1) yang
merupakan pengembangan dari Data Flow Diagram level 0 ditunjukkan pada Gambar 3.2
Keterangan:
1. Pada poin 1.0 sistem penjualan online mencatat member baru yang melakukan registrasi kedalam database tabel
login, agar member atau admin yang melakukan
konfirmasi login dapat masuk kedalam sistem sesuai dengan konfirmasi data yang dimasukkan sebagai member atau admin.
2. Pada poin 2.0 admin melakukan penambahan data produk kedalam sistem penjualan online yang tercatat kedalam
database tabel produk, agar saat website dikunjungi atau
member melakukan pencarian produk maka produk yang ditampilkan adalah data produk yang terbaharui.
3. Pada poin 3.0 menjelaskan bahwa saat website dikunjungi oleh member atau pengunjung untuk mencari produk data yang ditampilkan adalah data yang diperbaharui oleh admin.
4. Pada poin 4.0 sistem mencatat produk yang dipilih oleh member kedalam cart yang tercatat kedalam tabel cart
pada database sistem penjualan online.
5. Pada poin 5.0 member melakukan transaksi jual beli, sistem penjualan online mencatat transaksi kedalam tabel
Admin
3.1.3 Data Flow Diagram level 2 Admin
Data Flow Diagram level 2 Admin (DFD level 2) yang
merupakan pengembangan dari Proses 2.0 Data Flow Diagram
level 1 pemrosesan admin ditunjukan pada Gambar 3.3
Gambar 3.3 DFD Level 2 Admin
Keterangan :
1. Pada poin 2.1 admin melakukan penambahan data produk kedalam sistem penjualan online yang tercatat kedalam
database tabel produk, agar saat website dikunjungi atau
2. Pada poin 2.2 admin melakukan perubahan data produk kedalam sistem penjualan online yang tercatat kedalam
database tabel produk, agar saat website dikunjungi atau
member melakukan pencarian produk maka produk yang ditampilkan adalah data produk yang terbaharui.
3. Pada poin 2.3 admin melakukan pengurangan data produk kedalam sistem penjualan online yang tercatat kedalam
database tabel produk.
3.1.4 Data Flow Diagram level 2 Member
Data Flow Diagram level 2 Member (DFD level 2)
yang merupakan pengembangan dari Proses 4.0 dan 5.0
Data Flow Diagram level 1 pemrosesan produk dan
transaksi ditunjukan pada Gambar 3.4
Keterangan :
1. Pada poin 4.1 menjelaskan member melakukan login
keadalam sistem
2. Pada poin 4.2 menjelaskan member memilih produk untuk ditambahkan kedalam keranjang belanja, sistem mencatat data produk yang dipilih kedalam tabel cart.
3. Pada poin 4.3 jika ada kesalahan dalam pemilihan produk member dapat menghapus daftar produk yang dipilih yang ada pada keranjang belanja, data pada tabel cart
berkurang.
Start
3.2Flowchart Member
Gambar 3.5 Flowchart Member
Keterangan :
Flowcart diatas menjelaskan kegiatan member dari
3.2.1 Flowchart Admin
Gambar 3.6 Flowchart Admin
Keterangan :
Flowcart diatas menjelaskan kegiatan admin dalam
pembaharuan sistem penjualan online, pembaharuan dibagi menjadi dua, pembaharuan database atau pembaharuan tampilan. Keduanya berefek pada website menjadi terbaharui.
Start
Akses Web
Login Admin
Edit
Database Ya Edit Database Simpan
Edit Tampilan terbaharuiWebsite Logout End Tidak
3.3Lembar Kerja Tampilan (LKT) Perancangan antarmuka digambarkan sebagai seperti berikut:
3.3.1 Desain Halaman Index
Gambar 3. Keterangan :
a. Pada textbox yang terdapat pada header yang berfungsi untuk menuliskan pencarian produk.
b. Button search : berfungsi mengekseskusi perintah
pencarian produk yang diinginkan.
c. Tombol berfungsi untuk memperlihatkan isi keranjang belanja.
d. Login : berisi link untuk menuju ke halaman login user.
e. SignUp : berisi link untuk menuju ke halaman daftar
user.
Lembar Kerja Tampilan (LKT)
Perancangan antarmuka website E-Commerce
digambarkan sebagai seperti berikut: Desain Halaman Index
Gambar 3.7 Rancangan Halaman Index
yang terdapat pada header yang berfungsi untuk menuliskan pencarian produk.
: berfungsi mengekseskusi perintah pencarian produk yang diinginkan.
berfungsi untuk memperlihatkan isi keranjang belanja.
f. Button addtochart : berfungsi mengeksekusi perintah menambahkan barang ke keranjang belanja.
3.3.2 Desain Halaman Register User
Gambar 3.8 Rancangan Halaman Register User
Keterangan :
a. Textbox nama depan berfungsi menuliskan nama
depan pengunjung.
b. Textbox nama belakang berfungsi menuliskan
nama belakang pengunjung.
c. Textbox email berfungsi menuliskan email
pengunjung
d. Textbox password berfungsi menuliskan
e. Textboxre-enter password berfungsi menuliskan ulang password yang sudah pengunjung buat.
f. Textbox no telephone berfungsi menuliskan no
telepon pengunjung.
g. Textbox kota berfungsi menuliskan kota
pengunjung.
h. Textbox provinsi berfungsi menuliskan provinsi
pengunjung.
3.3.3 Desain Halaman Login
Gambar 3.9 Rancangan Halaman Login Keterangan :
a. Email dan password harus sesuai di
database.
3.3.4 Desain Halaman Chart
Gambar 3.10 Rancangan Halaman Chart Keterangan :
Pada halaman ini menampilkan informasi keranjang belanja, seperti informasi produk yang telah dipilih beserta jumlah total harga. Terdapat
button hapus produk yang berfungsi untuk
produk, button checkout berfungsi untuk mengeksekusi menuju halaman form checkout.
3.3.5 Desain Halaman Checkout
Gambar 3.11 Rancangan Halaman Checkout Keterangan :
a. Textbox nama berfungsi menuliskan nama
pelanggan.
b. Textboxusername berfungsi menuliskan
username pelanggan.
c. Textboxpassword berfungsi menuliskan
password pelanggan.
d. Textbox email berfungsi menuliskan email
e. Textbox alamat menuliskan alamat pelanggan.
f. Textbox kode pos berfungsi menuliskan kode
pos pelanggan.
g. Textbox kota berfungsi menuliskan kota
pelanggan.
h. Textbox nomor telephone menuliskan nomor
telepon pelanggan.
i. Textbox no rekening berfungsi menuliskan no
rekening pelanggan.
j. Textbox nama rekening berfungsi menuliskan
nama rekening pelanggan.
k. Dropdown nama bank berfungsi memilih nama
3.3.6 Desain Halaman Checkout Selesai
Gambar 3.12 Rancangan Halaman Checkout selesai
Keterangan :
3.3.7 Desain Halaman About
Gambar 3.13 Rancangan Halaman About Keterangan :
3.4Struktur Database 1. Tabel Brand
Nama tabel : Brands
Primary key : brand_id
Keterangan : tabel ini berisi nama brand Ditunjukan pada Tabel 3.8 Brand
Tabel 3.8Brand
Nama
Field
Data Tipe
Ukuran
Field
Keterangan
Brand_id Int 100 Id dari brand bersifat
2. Tabel Keranjang Belanja Nama tabel : Cart
Primary key : id
Keterangan : tabel ini berisi daftar belanja Ditunjukan pada Tabel 3.9 Keranjang Belanja
Tabel 3.9 Keranjang Belanja Product _title Varchar 200 Judul produk Product_image Varchar 200 Gambar
3. Tabel Kategori
Nama tabel : Categories
Primary key : cart_id
Keterangan : tabel ini berisi kategori produk Ditunjukan pada Tabel 3.10 Kategori
Tabel 3.10 Kategori produk bersifat auto_increment
Keterangan :tabel ini berisikan data-data login Admin
Tabel 3.11 Login Admin admin bersifat auto_increment
Primary key : product_id
Keterangan : tabel ini berisikan data-data produk
Tabel 3.12 Produk
Product_title Varchar 255 Judul dari produk
Product_price Int 10 Harga dari produk
Product_desc Text - Diskripsi produk
Product_image Text - Gambar dari produk
6. Tabel Checkout
Nama tabel : user_checkout
Primary key : id_user
Keterangan : tabel ini berisi data transaksi Ditunjukan pada Tabel 3.13 Checkout
Tabel 3.13Checkout
pengaman user untuk
melakukan transaksi Email_usr Varchar 30 Email dari user Almt_usr Varchar 100 Alamat dari
user
Kp_user Varchar 20 Kode pos dari user
Tlp Varchar 20 Nomor telepon dari user Rek Varchar 20 Nomor rekenig
dari user Nmrek Varchar 20 Nama rekening
dari user Bank Varchar 30 Nama bank
7. Tabel Registrasi
Nama tabel : user_info
Primary key : user_id
Keterangan : tabel ini berisi data registrasi user Ditunjukan pada Tabel 3.14 Registrasi
Tabel 3.14 Registrasi
