10 BAB III PERANCANGAN SISTEM
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.
3.1.1 Data Flow Diagram Level 0
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 Transaksi ID & Password Daftar belanja Bukti Transaksi Hak Akses Penuh
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 0Keterangan :
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
3.1.2 Data Flow Diagram level 1
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.
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 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.
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
Tambah Produk Baru
2.1 Tambah
KonfirmasiProduk
2.2
Memperbaharui ProdukMemperbaharui
Tb_productAdmin
Produk
Konfirmasi2.3 Menghapus
Menghapus Produk
Produk
KonfirmasiGambar 3.3 DFD Level 2 AdminKeterangan :
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.
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 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.
3.2 Flowchart Member
Start Lo gin d i To ko store m usic M e n gakse s o n line A n L W eb M em ilih Prod u k M e m iliki aku n o n lin e An L atau tid ak? sto re m u sic Y a tid ak Sign U p di T oko ke ran jan g b elan ja M en am bah ke d iri(Che cko ut) M en gisi Form D ata Ce tak Stru k Lo go u t En d
Gambar 3.5 Flowchart MemberKeterangan :
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.
3.2.1 Flowchart Admin
Start Login Admin Akses Web Database Tidak Edit Ya Edit Database Simpan Website Edit Tampilan Simpan Logout terbaharui End
Gambar 3.6 Flowchart AdminKeterangan :
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.
Lembar Kerja Tampilan (LKT)
3.3 Lembar Kerja Tampilan (LKT)
Perancangan antarmuka website E-Commerce Perancangan antarmuka digambarkan sebagai seperti berikut: digambarkan sebagai seperti berikut:
Desain Halaman Index
3.3.1 Desain Halaman Index Gambar 3.7 Rancangan Halaman Index Gambar 3.
Keterangan :
a. Pada textbox yang terdapat pada header yang berfungsi yang terdapat pada header yang berfungsi untuk menuliskan pencarian produk. untuk menuliskan pencarian produk.
b. Button search : berfungsi mengekseskusi perintah : berfungsi mengekseskusi perintah pencarian produk yang diinginkan. pencarian produk yang diinginkan.
c. Tombol berfungsi untuk memperlihatkan isi berfungsi untuk memperlihatkan isi keranjang belanja. keranjang belanja.
d. Login : berisi link untuk menuju ke halaman login user. : berisi link untuk menuju ke halaman login user.
e. SignUp : berisi link untuk menuju ke halaman daftar : berisi link untuk menuju ke halaman daftar user. f. Button addtochart : berfungsi mengeksekusi perintah menambahkan barang ke keranjang belanja.
3.3.2 Desain Halaman Register User
Gambar 3.8 Rancangan Halaman Register UserKeterangan :
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. 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 LoginKeterangan :
a. Email dan password harus sesuai di database.
b. User diwajibkan login ketika melakukan pembelian barang.
3.3.4 Desain Halaman Chart
Gambar 3.10 Rancangan Halaman ChartKeterangan : 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 produk, button checkout berfungsi untuk mengeksekusi menuju halaman form checkout.
3.3.5 Desain Halaman Checkout
Gambar 3.11 Rancangan Halaman CheckoutKeterangan :
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 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.
3.3.6 Desain Halaman Checkout Selesai
Gambar 3.12 Rancangan Halaman Checkout selesaiKeterangan : Pada halaman ini berfungsi untuk menampilkan informasi tentang pembeli beserta tujuan pengiriman produk.
3.3.7 Desain Halaman About
Gambar 3.13 Rancangan Halaman AboutKeterangan : Pada desain halaman about berfungsi untuk menampilkan profil tentang toko.
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 BrandNama Data Ukuran Keterangan Field Tipe Field
Brand_id Int 100 Id dari brand bersifat auto_increment
Brand_title Text 50 Nama brand atau judul brand
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 BelanjaNama Field Data Ukuran Keterangan Tipe Field
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
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 KategoriNama Data Ukuran Keterangan Field Tipe Field
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
Tabel 3.11 Login AdminNama Data Ukuran Keterangan Field Tipe Field
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
Tabel 3.12 ProdukNama Field Data Ukuran Keterangan Tipe Field
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
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 CheckoutNama Data Ukuran Keterangan Field Tipe Field
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
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
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 Data Ukuran Keterangan
Field Tipe FieldUser_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 provinsi dari user