BAB IV PERANCANGAN SISTEM

BAB IV PERANCANGAN SISTEM 4.1 Perancangan Basis Data Basis data merupakan tempat penyimpanan paling optimal, oleh sebab itu diperlukan perancangan basis data untuk menentukan susunan data. Tujuannnya untuk mengoptimalisasi pengambilan dan penyimpanan data. Tabel 4.1 Data Admin No Nama Field Tipe Data Size Keterangan 1 id_admin Int 6 Identitas tabel (Primary Key) 2 nama Varchar 30 Nama lengkap admin 3 user Varchar 20 Username admin 4 pass Varchar 8 Password admin 5 no_telp Varchar 12 No telepon admin 6 email Varchar 30 Email admin 7 status Varchar 8 Jabatan Tabel 4.2 Data Produk No Nama Field Tipe Data Size Keterangan 1 kd_kue Int 4 Identitas tabel (Primary Key) 2 nama_kue Varchar 15 Nama kue 3 harga Int 5 Harga kue 4 kategori Varchar 15 Kategori kue 5 stok Int 2 Jumlah kue yang tersedia 6 ket Text - Deskripsi kue 7 gambar Text - Gambar kue 53

54 Tabel 4.3 Data Pelanggan (Customer) No Nama Field Tipe Data Size Keterangan 1 id_pelanggan Int 4 Identitas tabel (Primary Key) 2 nama_pelanggan Varchar 30 Nama pelanggan 3 alamat Text - Alamat pelanggan 4 no_telp Varchar 12 No telepon pelanggan 5 jenis_kelamin Varchar 10 Jenis kelamin pelanggan 6 user Varchar 20 Username pelanggan 7 pass Varchar 8 Password pelanggan Tabel 4.4 Data Pesanan (Order) No Nama Field Tipe Data Size Keterangan 1 no_order Int 6 Identitas tabel (Primary Key) 2 id_pelanggan Int 4 Id Pelanggan 3 nama_kue Varchar 15 Nama kue 4 harga Int 5 Harga kue 5 banyaknya Int 3 Banyaknya kue yang dipesan 6 total_harga Int 6 Total yang harus dibayar 7 tgl_pemesanan Date - Tanggal pemesanan Tabel 4.5 Data Keranjang Belanja (Shopping Cart) No Nama Field Tipe Data Size Keterangan 1 no_order Int 6 Identitas tabel (Primary Key) 2 kd_kue Int 4 Kode kue 3 stok_keranjang Int 3 Jumlah pesanan yang masuk keranjang belanja 4 gambar Text - Gambar kue 5 ket Text - Keterangan

55 Tabel 4.6 Data Konfirmasi Pembayaran No Nama Field Tipe Data Size Keterangan 1 no_order Int 6 Identitas tabel (Primary Key) 2 tgl_pembayaran Date - Tanggal pembayaran 3 total_pembayaran Int 6 Total yang sudah dibayar pelanggan 4 bank_asal Varchar 10 Pelanggan transfer dari bank 5 bank_tujuan Varchar 10 Pelanggan transfer ke bank 6 akun_bank Varchar 20 Nama rekening bank pelanggan 7 ket Text - Keterangan Tabel 4.7 Data Verifikasi Pembayaran No Nama Field Tipe Data Size Keterangan 1 no_order Int 6 Identitas tabel (Primary Key) 2 data_transaksi Text - Data pembayaran dari pelanggan

56 4.2 Perancangan Struktur Tampilan Berikut ini merupakan rancangan struktur tampilan dari analisa dan perancangan sistem informasi penjualan dan pemesanan kue berbasis android pada Toko Kue Mama Sila yang dibahas pada tugas akhir ini : Gambar 4.1 Struktur Tampilan

57 4.3 User Interface 4.3.1 User Interface Web Untuk Admin Halaman login digunakan admin untuk masuk ke dalam web. LOGIN USERNAME : PASSWORD : LOGIN Gambar 4.2 Rancangan Antar Muka Menu Login Setelah login akan tampil halaman home yang akan digunakan admin untuk mengelola penjualannya melalui web. HOME HOME ADMIN PRODUK CUSTOMER ORDER PAYMENT LOGOUT LOGO Gambar 4.3 Rancangan Antar Muka Menu Home

58 Halaman admin ini digunakan untuk memasukkan data diri, karna admin dari Toko Kue Mama Sila terdiri lebih dari satu orang, yaitu admin (si pemilik toko) dan karyawan yang sudah dipercaya. ADMIN New Admin Id Admin : Nama : Username : Password : Telepon : Email : Status : HOME LOGOUT EDIT Gambar 4.4 Rancangan Antar Muka Menu Admin Halaman produk ini digunakan admin untuk mengupload produknya yang berisikan gambar serta keterangan secara lengkap dari jenis kue yang tersedia. PRODUK New Produk Kode Kue : Nama Kue : Harga : Kategori : Stok : Keterangan : Gambar : HOME LOGOUT Lihat Data EDIT Gambar 4.5 Rancangan Antar Muka Menu Produk

59 Pada halaman customer inilah admin dapat mengetahui berapa banyak pelanggannya, admin pun dapat mengubah, bahkan menghapus. CUSTOMER Id Pelanggan : Nama Pelanggan : Alamat : Telepon : Jenis Kelamin : Username : Password : HOME LOGOUT Lihat Data Customer EDIT DELETE Gambar 4.6 Rancangan Antar Muka Menu Customer Halaman order digunakan admin untuk mengetahui berapa banyak pesanan dari pelanggan, admin akan memproses pesanan tersebut apabila si pelanggan sudah melakukan transaksi pembayaran. ORDER Data Pesanan HOME LOGOUT EDIT DELETE Gambar 4.7 Rancangan Antar Muka Menu Order

60 Halaman verifikasi pembayaran ini menampilkan bukti pembayaran dari pelanggan. PAYMENT No Order : Data Transaksi HOME LOGOUT Lihat Data Gambar 4.8 Rancangan Antar Muka Menu Verifikasi Pembayaran 4.3.2 User Interface Untuk Pelanggan Halaman login digunakan untuk masuk ke dalam aplikasi. Jika ingin melakukan transaksi, maka diwajibkan untuk melakukan login terlebih dahulu dan untuk pengunjung yang belum mempunyai akses login dapat melakukan pendaftaran dengan memilih button sign up. LOGIN LOGO USERNAME : PASSWORD : SIGN UP LOGIN Gambar 4.9 Rancangan Antar Muka Login

61 Halaman pendaftaran ini disediakan untuk pelanggan baru yang belum mempunyai akun di aplikasi tersebut. Pelanggan harus mengisi data data yang dibutuhkan termasuk username dan password yang selanjutnya digunakan untuk melakukan login. SIGN UP Nama : Alamat : Provinsi : Kota : Kode Pos : Telepon : Username : Password : CANCEL Gambar 4.10 Rancangan Antar Muka Menu Pendaftaran (Sign Up) Halaman home ini menjadi halaman pertama yang muncul saat aplikasi dijalankan dan berhasil login. Pada bagian kanan atas terdapat icon user yang nantinya berisi pilihan menu logout dan menu profil dimana pelanggan dapat mengubah biodatanya bila diperlukan. HOME LOGO PRODUK ORDER PAYMENT INFORMATION Gambar 4.11 Rancangan Antar Muka Menu Home

62 Halaman produk menampilkan berbagai macam atau jenis kue apa saja yang dijual pada Toko Kue Mama Sila. PRODUK SEARCH KATEGORI JENIS KUE 1 JENIS KUE 2 JENIS KUE 3 JENIS KUE 4 JENIS KUE 5 Gambar 4.12 Rancangan Antar Muka Menu Produk Selanjutnya produk yang di pilih pelanggan akan di tampung ke halaman keranjang belanja. SHOPPING CART Gambar 1-1 + Gambar 2-1 + Gambar 3-1 + SELECT ALL DELETE CHECK OUT Gambar 4.13 Rancangan Antar Muka Menu Keranjang Belanja (Shopping Cart)

63 Di halaman order berisikan pesanan pelanggan secara detail. Rincian Pesanan ORDER Gambar Keterangan Id Pelanggan : No Order : Total Harga : Tgl Pemesanan : CANCEL Gambar 4.14 Rancangan Antar Muka Menu Pesanan (Order) Halaman ini berisikan informasi rekening untuk melakukan pembayaran setelah pelanggan membeli kue, dan berbagai informasi yang ada pada Toko Kue Mama Sila. INFORMATION Info Gambar 4.15 Rancangan Antar Muka Menu Informasi

64 Halaman payment ini digunakan oleh pelanggan untuk melakukan konfirmasi pembayaran setelah melakukan transfer bank atau bayaran atas pembelian kue di Toko Kue Mama Sila. PAYMENT Nama : No Order : Tgl Pembayaran : Total Pembayaran : Transfer dari Bank : Transfer ke Bank : Nama Akun Bank : Keterangan : (ex:yyyy/mm/dd) CALL ADMIN SEND Gambar 4.16 Rancangan Antar Muka Menu Konfirmasi Pembayaran

65 4.4 Mock Up 4.4.1 Mock Up Web Username : Password : Masukkan Username Masukkan Password LOGIN Gambar 4.17 Mock Up Menu Login Gambar 4.18 Mock Up Menu Home

66 New Admin Id Admin : Nama : Username : Password : Telepon : Email : Status : EDIT Gambar 4.19 Mock Up Menu Admin New Produk Kode Kue : Nama Kue : Harga : Kategori : Stok : Keterangan : Gambar : Lihat Data EDIT Gambar 4.20 Mock Up Menu Produk

67 Id Pelanggan : Nama Pelanggan : Alamat : Telepon : Jenis Kelamin : Username : Password : Lihat Data Customer EDIT DELETE Gambar 4.21 Mock Up Menu Customer EDIT DELETE Gambar 4.22 Mock Up Menu Order

68 No Order : Lihat Data Gambar 4.23 Mock Up Menu Verifikasi Pembayaran 4.4.2 Mock Up Android LOGIN Username : Masukkan Username Password : Masukkan Password SIGN UP LOGIN Gambar 4.24 Mock Up Login

69 SIGN UP Nama : Alamat : Provinsi : Kota : Kode Pos : Telepon : Username : Password : CANCEL Gambar 4.25 Mock Up Menu Pendaftaran Sign Up HOME PRODUK ORDER PAYMENT INFORMATION Gambar 4.26 Mock Up Menu Home

70 PRODUK SEARCH KATEGORI Kue Ulang Tahun Kue Kering Cookies dan Bolu Brownies Puding Gambar 4.27 Mock Up Menu Produk SHOPPING CART B013 Brownies manis dengan topping ceres dan keju - 6 + BC04 Kue ulang tahun dengan tema frozen - 1 + SELECT ALL DELETE CHECK OUT Gambar 4.28 Mock Up Menu Keranjang Belanja (Shopping Cart)

71 ORDER RINCIAN PESANAN BC04 Kue ulang tahun dengan tema frozen 1 Id Pelanggan : CS135 No Order : Total Harga : TMS2831 250.000,- Tgl Pemesanan : 22 Juli 2016 CANCEL Gambar 4.29 Mock Up Menu Pesanan (Order) INFORMATION PAYMENT Nama : Sulistiani 0270 349 858 a/n Isti Rahayu 578 508 2106 a/n Isti Rahayu 8853 0800 239 53 a/n Isti Rahayu Gambar 4.30 Mock Up Menu Informasi

72 PAYMENT Nama : No. Order : Tgl Pembayaran : Total Pembayaran : Transfer dari Bank : Transfer ke Bank : Nama Akun Bank : Keterangan : Sulistiani TMS2831 20 Juli 2016 250.000,- BNI BCA BNI Hadi Sulistiani - CALL ADMIN SEND Gambar 4.31 Mock Up Konfirmasi Pembayaran