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. 10
11 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 Login Admin Menambah Data Produk Mengedit Data Produk Menghapus Data Produk Admin Sistem Penjualan Online Registrasi Login Memilih Produk Transaksi ID & Password Daftar belanja Bukti Transaksi Member Data Produk Berkurang Data Produk Terbaharui Data Produk Bertambah Hak Akses Penuh 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 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 Konfirmasi Login Konfirmasi Login 1.0 Registrasi atau login Login Admin Tambah Produk Baru Konfirmasi 2.0 Tambah Produk Tbl_product Menampilkan Data Member Mencari Produk Konfirmasi 3.0 Mengunjungi Web Mencari Produk Konfirmasi Pengunjung Memambah List Belanja Konfirmasi Menambah List Belanja 4.0 Memilih Produk Tbl_cart Konfirmasi Melakukan Pembayaran &Transaksi 5.0 Pembayaran dan Transaksi Tbl_checkout Konfirmasi 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 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 Konfirmasi 2.1 Tambah Produk Admin Memperbaharui Produk Konfirmasi 2.2 Memperbaharui Produk Tb_product Menghapus Produk 2.3 Menghapus Produk Konfirmasi 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 3.2 Flowchart Member Start M e n ga kse s W eb Lo gin d i To ko o n line A n L store music M e m ilik i ak u n atau tidak? tid a k Sign U p di T ok o o n lin e An L store music Y a Memilih Produk M en a m ba h k e keranjang belanja M en gisi Form D a ta d iri(c he ck o ut) Cetak Struk Logout End 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 Start Akses Web Login Admin Edit Database Ya Edit Database Simpan Tidak Edit Tampilan Simpan Website terbaharui Logout End 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.
19 3.3 Lembar Kerja Tampilan (LKT) Perancangann antarmuka website E-Commerce digambarkan sebagai seperti berikut: 3.3.1 Desain Halaman Index Keterangan : Gambar 3.7 Rancangan Halaman Index a. Pada textbox yang terdapat pada header yang berfungsi untuk menuliskann 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.
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 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
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 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
30 Tabel 3.11 Login Admin Nama 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
31 Tabel 3.12 Produk Nama 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
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 user dari