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 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

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

Konfirmasi

Produk

  

2.2

Memperbaharui Produk

Memperbaharui

Tb_product

  Admin

Produk

Konfirmasi

2.3 Menghapus

  Menghapus Produk

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.

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

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

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

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 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 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 selesai

  Keterangan : Pada halaman ini berfungsi untuk menampilkan informasi tentang pembeli beserta tujuan pengiriman produk.

3.3.7 Desain Halaman About

Gambar 3.13 Rancangan Halaman About

  Keterangan : 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 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

  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 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 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

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

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

  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 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 Field

  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 provinsi dari user

Dokumen yang terkait

BAB III METODE PENELITIAN - Institutional Repository | Satya Wacana Christian University: Penerapan Pembelajaran Kooperatif Tipe Take and Give untuk Meningkatkan Proses dan Hasil Belajar IPA pada Siswa Kelas V SDN Sidoharjo Kecamatan Pati Kabupaten Pati S

0 0 32

BAB IV HASIL PENELITIAN PEMBAHASAN 4.1. Hasil Penelitian 4.1.1. Kondisi awal sebelum pelaksanaan penelitian tindakan kelas (PTK) - Institutional Repository | Satya Wacana Christian University: Upaya Meningkatkan Kemampuan Motorik Kasar Anak Melalui Lompat

0 0 26

BAB 2 MAKALAH Makalah Pertama - Institutional Repository | Satya Wacana Christian University: Penentuan Luas Lahan Datar Menggunakan Metode Pendekatan Lingkaran dan Metode Pendekatan Segitiga Sferik (Teorema Girard) dengan Memanfaatkan Google Maps Dan Goo

0 0 22

BAB II MAKALAH - Institutional Repository | Satya Wacana Christian University: Penentuan Luas Lahan Berkontur dengan Bantuan Google Earth = Determination of the Contoured Land Area on the Earth by Using Google Earth

0 0 42

BAB 2 MAKALAH Judul :Penerapan Model APARCH Untuk Volatilitas Returns Kurs Beli EUR dan JPY Terhadap IDR Periode 2009-2014 Dipresentasikan pada :Seminar Nasional Pendidikan Matematika UAD 2016 yang diselenggarakan oleh Fakultas Keguruan dan Ilmu Pendidika

0 1 11

BAB II DASAR TEORI - Institutional Repository | Satya Wacana Christian University: Implementasi Internet Protocol Security Menggunakan Openswan untuk Mata Kuliah Keamanan Jaringan Komputer

0 0 24

BAB III PEDOMAN PRAKTIKUM - Institutional Repository | Satya Wacana Christian University: Implementasi Internet Protocol Security Menggunakan Openswan untuk Mata Kuliah Keamanan Jaringan Komputer

0 0 9

BAB IV PENGUJIAN DAN ANALISIS - Institutional Repository | Satya Wacana Christian University: Implementasi Internet Protocol Security Menggunakan Openswan untuk Mata Kuliah Keamanan Jaringan Komputer

0 0 24

BAB III PERANCANGAN SISTEM 3.1. Ruang Lingkup Website - Institutional Repository | Satya Wacana Christian University: Pembuatan Sistem Informasi File Repository Hasil Proyek, Kerja Praktek dan Tugas Akhir D3 Teknik Informatika Berbasis Web dan PHP

0 1 39

BAB III PERANCANGAN SISTEM - Institutional Repository | Satya Wacana Christian University: Perancangan dan Implementasi Game Pungut Sampah Organik dan Anorganik Berbasis Action Script 3.0

0 0 16