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

Perancangan sistem bertujuan untuk menentukan

rancangan website ecommerce. Perancangan sistem dimulai

dengan perancangan Data Flow Diagram (DFD), Flowchart,

struktur database. Perancangan dan desain website dimulai

dengan perancangan detail dari halaman yang akan

ditampilkan dalam website.

11

Sistem Penjualan Online

Admin Member

Login Admin

Menambah Data Produk

Mengedit Data Produk

Data Produk Berkurang

Data Produk Terbaharui

Registrasi

Menghapus Data Produk

Data Produk Bertambah

Login

Memilih Produk

TransaksiID & PasswordDaftar belanja

Bukti Transaksi

Hak Akses Penuh

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

7. Admin mengedit data produk, data sistem penjualan

12

Member

Admin

1.0 Registrasi atau login

Login

2.0 Tambah Produk

3.0 Mengunjungi Web

4.0 Memilih Produk

5.0 Pembayaran dan Transaksi

Tbl_product

Pengunjung

Tbl_cart

Tbl_checkout

Login

Konfirmasi

Tambah Produk Baru

Konfirmasi

Menampilkan Data

Mencari Produk

Konfirmasi Mencari Produk

Konfirmasi

Memambah List Belanja

Menambah List Belanja

Konfirmasi

Melakukan Pembayaran &Transaksi

Konfirmasi

Konfirmasi

Konfirmasi

Login

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

Gambar 3.2 DFD Level 1

13

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

checkout pada database sistem penjualan online.

14

Admin

2.1 Tambah Produk

2.2 Memperbaharui

Produk

2.3 Menghapus Produk

Tb_product

Konfirmasi

Tambah Produk Baru

Memperbaharui Produk

Konfirmasi

Menghapus Produk

Konfirmasi

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

member melakukan pencarian produk maka produk yang

ditampilkan adalah data produk yang terbaharui.

15

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

Gambar 3.4 DFD Level 2 Member

16

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.

4. Pada poin 5.1 untuk melakukan transaksi member harus

melakukan pengisian formulir transaksi yang akan dicatat

oleh sistem kedalam tabel checkout untuk mencetak

struk checkout pada kegiatan 5.2.

17

Start

M e n ga kse s W eb

Lo gin d i To ko o n line A n L

store m usic

M e m ilik i ak u n a ta u tid a k ?

S ign U p d i T ok o o n lin e An L

sto re m u sictid a k

M em ilih Prod u k

Y a

M en a m ba h k e ke ra n jan g b elan ja

M en gisi Form D a ta

d iri(C he ck o ut)C e ta k S tru k Lo go u t En d

3.2 Flowchart Member

Gambar 3.5 Flowchart Member

Keterangan :

Flowcart diatas menjelaskan kegiatan member dari

sebagai pengunjung, lalu mendaftar sebagai member jika

belum memilki member agar bisa login, setelah login member

memilih produk dengan menambahkan ke keranjang belanja

dan melakukan transaksi serta mencetak struk sebagai bukti

transaksi.

18

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

Edit Database Ya Simpan

Edit TampilanWebsite

terbaharuiLogout End

Tidak

Simpan

3.3 Lembar 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.

19

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.

: berisi link untuk menuju ke halaman login user.

: berisi link untuk menuju ke halaman daftar

20

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

password yang diinginkan pengunjung.

21

e. Textbox re-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.

b. User diwajibkan login ketika melakukan

pembelian barang.

22

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

menghapus produk, button kofirmasi pesan

produk yang berfungsi untuk konfirmasi pesan

produk, textbox qty berfungsi untuk menuliskan

jumlah barang yang akan dibeli, textbox harga

produk berfungsi untuk mengetahui harga

23

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. Textbox username berfungsi menuliskan

username pelanggan.

c. Textbox password berfungsi menuliskan

password pelanggan.

d. Textbox email berfungsi menuliskan email

pelanggan.

24

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

bank pelanggan.

25

3.3.6 Desain Halaman Checkout Selesai

Gambar 3.12 Rancangan Halaman Checkout selesai

Keterangan :

Pada halaman ini berfungsi untuk menampilkan

informasi tentang pembeli beserta tujuan

pengiriman produk.

26

3.3.7 Desain Halaman About

Gambar 3.13 Rancangan Halaman About

Keterangan :

Pada desain halaman about berfungsi

untuk menampilkan profil tentang toko.

27

3.4 Struktur 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.8 Brand

Nama

Field

Data

Tipe

Ukuran

Field

Keterangan

Brand_id Int 100 Id dari brand

bersifat

auto_increment

Brand_title Text 50 Nama brand

atau judul

brand

28

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

Nama Field Data

Tipe

Ukuran

Field

Keterangan

Id Int 10 Id bersifat

auto_increment

P_id Int 10 Id dari produk

User_id Int 10 Id dari user

Product _title Varchar 200 Judul produk

Product_image Varchar 200 Gambar

produk

Qty Int 10 Jumlah barang

yang dibeli

Price Int 10 Harga produk

Total_amt Int 10 Total jumlah

harga produk

29

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

Nama

Field

Data

Tipe

Ukuran

Field

Keterangan

Cat_id Int 100 Id dari kategori

produk bersifat

auto_increment

Cat_title Text - Nama kategori

produk

4. Tabel Login Admin

Nama tabel :Login

Primary key : id

Keterangan :tabel ini berisikan data-data login

Admin

Ditunjukan pada Tabel 3.11 Login Admin

30

Tabel 3.11 Login Admin

Nama

Field

Data

Tipe

Ukuran

Field

Keterangan

Id Int 10 Id dari login

admin bersifat

auto_increment

User Varchar 50 Id dari user

Pass Varchar 50 Pengaman

masuknya

admin ke web

administrator

Email Varchar 50 Email dari

admin

5. Tabel Produk

Nama tabel : products

Primary key : product_id

Keterangan : tabel ini berisikan data-data

produk

Ditunjukan pada Tabel 3.12 Produk

31

Tabel 3.12 Produk

Nama Field Data

Tipe

Ukuran

Field

Keterangan

Product_id Int 100 Id dari produk

bersifat

auto_increment

Product_cat Int 100 Kategori dari

produk

Product_brand Int 100 Brand dari

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

Product_keywords Text - Kata kuci dari

produk

32

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.13 Checkout

Nama

Field

Data

Tipe

Ukuran

Field

Keterangan

Id_user Int 50 Id dari user

bersifat

auto_increment

Nm_usr Varchar 100 Nama dari user

Log_usr Varchar 50 Username dari

user

Pas_usr Varchar 20 Sandi

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

Kota_usr Varchar 20 Kota dari user

33

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

dari user

34

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

Nama

Field

Data

Tipe

Ukuran

Field

Keterangan

User_id Int 10 Id dari user

bersifat

auto_increment

First_name Varchar 100 Nama depan

dari user

Last_name Varchar 100 Nama

belakang dari

user

Email Varchar 300 Email dari user

Password Varchar 300 Sandi

pengaman

untuk user

Mobile Varchar 10 Nomor telepon

dari user

Address1 Varchar 300 Alamat kota

dari user

Address2 Varchar 11 Alamat

35

provinsi dari

user