BAB III ANALISIS DAN PERANCANGAN SISTEM. pada CV. Permata, maka didapatkan proses-proses yang terjadi dalam kegiatan

Transkripsi

1 BAB III ANALISIS DAN PERANCANGAN SISTEM Berdasarkan hasil survey, wawancara dan pengamatan yang dilakukan pada CV. Permata, maka didapatkan prses-prses yang terjadi dalam kegiatan penjualan. Diantaranya adalah prses registrasi pelanggan, transaksi penjualan dan knfirmasi pembayaran. 3.1 Identifikasi dan Analisis Sistem CV. Permata merupakan usaha tk perlengkapan anak dengan nama tk Nikita Baby Shp. Tk ini menjual pakaian anak, mainan, bneka dan perlengkapan bayi. Untuk meningkatkan penjualannya, CV. Permata harus memperluas. CV. Permata membutuhkan aplikasi yang bisa membantu penjualannya secara nline. Saat ini, aplikasi penjualan ffline yang ada hanya bisa mencetak lapran transaksi penjualan bulanan dan tahunan saja. Aplikasi ffline yang saat ini ada tidak bisa memberikan lapran mengenai barang terlaris, pelanggan yang sering berbelanja dan stk barang. 3.2 Perancangan Sistem Perancangan sistem adalah prses menyusun atau mengembangkan sistem atau aplikasi yang baru. Dalam tahap ini harus dapat dipastikan bahwa semua persyaratan untuk menghasilkan sistem atau aplikasi yang baru dapat dipenuhi. Hasil sistem atau aplikasi yang dirancang harus sesuai dengan kebutuhan pemakai untuk mendapatkan sebuah infrmasi yang diinginkan. 17

2 18 Dari hasil identifikasi dan analisis untuk membantu CV. Permata menyelesaikan permasalahan yang ada, maka perlu dibuatkan aplikasi dalam Rancang Bangun Aplikasi Penjualan Online Perlengkapan Anak pada CV. Permata yang dapat memberikan infrmasi penjualan dan mempermudah pelanggan untuk melakukan pembelian. Untuk membantu pembuatan sistem tersebut maka diperlukan langkah-langkah sebagai berikut: 1. Menganalisis Kebutuhan Sistem. 2. Mendesain Sistem (Blck Diagram, System Flw, Cntext Diagram, Jenjang Prses (HIPO), Data Flw Diagram (DFD), ERD, struktur tabel desain I/O (input-utput), desain Interface) Menganalisis Kebutuhan Sistem Sebelum mendesain sistem, langkah pertama kali yang akan dilakukan adalah menganalisis kebutuhan sistem. Dalam tahap ini analisis bersisikan prses identifikasi data transaksi penjualan pada CV. Permata. Dari data penjualan pada CV. Permata langkah berikutnya adalah mengidentifikasi data-data tersebut agar dapat dirumuskan slusi-slusi yang akan ditawarkan untuk mengatasi permasalahan yang ada pada CV. Permata. dari perumusan tersebut, kemudian menggambarkan utput yang akan dihasilkan dari slusi yang didapat. Setelah gambaran singkat slusi yang diberikan kepada pemilik perusahaan CV. Permata, maka langkah selanjutnya yaitu mendesain sistem dari System Flw, Cntext Diagram, Data Flw Diagram (DFD), ERD, Struktur Tabel Desain I/O (input-utput) dan Desain Interface.

3 Desain Sistem Pada perancangan aplikasi penjualan nline perlengkapan anak pada CV. Permata ini memiliki beberapa sub desain yaitu Blck Diagram, System Flw, Cntext Diagram, Data Flw Diagram (DFD), ERD, Struktur Tabel Desain I/O (input-utput), Desain Interface. 1. Blck Diagram Dalam merancang sistem infrmasi ini, penulis mengumpulkan infrmasi yang diperlukan. Data inputan diantaranya: data-data yang berkaitan dengan pengguna, data barang, nmr resi dan data penjualan. Kemudian data tersebut diprses menghasilkan data pelanggan, stk barang dan lapran. Blk diagram sistem penjualan nline dapat dilihat pada gambar 3.1. Blk Diagram Input Prses Output List Member Data Pelanggan Daftar Member Pin Member Data Barang Maintenance Prduk Stk barang Histri Member Lapran dan Grafik Barang Paling Laris Lapran Pelanggan paling sering belanja Lapran Penjualan Bulanan Transaksi Penjualan Data Penjualan Lapran Penjualan Tahun Invice Penjualan List Pembayaran N. Resi Pengiriman barang List Transaksi Barang Dikirim Phase Gambar 3.1 Blck Diagram

4 20 2. System Flw Perancangan desain sistem yang akan menjadi slusi dari permasalahan pada CV. Permata yang akan dibahas pada sub bab berikut ini: A. System Flw Registrasi Custmer Registrasi Custmer Sistem Admin Mulai Meng-input data diri custmer Mengecek Status Registrasi Member Apakah Member Berbayar? Ya 1 Tidak Menyimpan Data Custmer Tabel custmer Menyimpan Data Custmer Berhasil melakukan registrasi, link aktivasi dikirim via Mengirim link aktivasi member via Mengecek knfirmasi pembayaran Mengklik link aktivasi Prses aktivasi Apakah data valid? Member telah aktif Tidak Mengklik tmbl reject Ya Premium member belum disetujui, silakan melakukan pembayaran member premium Mengklik tmbl cnfirm Meng-input data knfirmasi pembayaran member premium Menyimpan data knfirmasi pembayaran member Selesai Tabel payment cnfirmatin Premium member ditlak Mengirim member premium ditlak Premium member aktif Mengirim member premium telah disetujui dan aktif Gambar 3.2 System Flw Registrasi Custmer

5 21 System flw registrasi pelanggan ini menggambarkan alur sistem baru yang telah dibuat. Custmer meng-input diri ke sistem dan kemudian sistem mengecek status pendaftaran custmer. Ada 2 macam jenis pendaftaran member custmer yaitu member gratis dan member prabayar, member prabayar ini akan memberikan pint disetiap pembelanjaan apabila pelanggan telah berbelanja dengan minimum nminal Rp Pint yang diberikan dapat ditukarkan sebagai vucher pembelanjaan. Custmer yang telah mendaftar akan mendapatkan pesan yang berisi link aktivasi dan mengklik link tersebut untuk mengaktifkan akun yang telah dibuat. Apabila status pendaftaran custmer adalah member prabayar, maka custmer harus melakukan pembayaran dan melakukan knfirmasi. Admin akan mengecek knfirmasi pembayaran member, apabila pembayaran valid, maka admin akan mengubah status member menjadi premium member dan mengirim pesan ke custmer yang berisi pendaftaran premium member telah berhasil. Apabila pembayaran tidak valid, maka admin mengirim pesan ke custmer yang berisi pendaftaran gagal dan ditlak sesuai alasan pengecekan yang dilakukan leh admin.

6 22 B. System Flw Lgin Registrasi Custmer Sistem Mulai Meng-input username & passwrd Mengecek username & passwrd Tabel user 1 Maaf, lgin gagal Menampilkan ntifikasi Tidak Apakah data valid? Ya Lgin berhasil Menampilkan ntifikasi Gambar 3.3 System Flw Lgin System flw lgin ini menggambarkan alur sistem custmer yang melakukan lgin. Custmer meng-input username dan passwrd, kemudian sistem akan mengecek inputan username dan passwrd tersebut. Apabila username dan passwrd tidak valid maka sistem akan memberikan ntifikasi kepada custmer bahwa lgin gagal dan apabila inputan username dan passwrd valid, maka sistem akan memberikan ntifikasi kepada custmer bahwa lgin berhasil.

7 23 C. System Flw Penjualan Transaksi Penjualan Custmer Sistem Raja Ongkir Mulai Meng-input data prduk Mencari prduk Tabel prduk 2 Selesai Tidak Apakah prduk yang dicari ada? Tabel prvinsi Tabel kta Barang tidak ditemukan Tabel kurir Data prduk Ya Mengklik gambar prduk Menambahkan ke keranjang belanja Menghitung biaya kirim Prduk ditambahkan ke keranjang Mengecek pin Tabel custmer Mengklik icn keranjang Menampilkan data keranjang belanja Apakah custmer memiliki pin? Ya Apakah ingin menggunakan pin? Infrmasi keranjang belanja Ya Meng-input data pembelian dan memilih lkasi Menampilkan paket harga kurir Tidak Data paket harga kurir Tidak Menghitung ptngan harga (Ttal harga belanja (pin*1000)) Memilih paket kurir Menghitung ttal harga 1 1 Mengecek status custmer Ttal harga belanja Mengklik tmbl checkut Apakah custmer sudah melakukan lgin? Ya Tidak Apakah pelanggan sudah mendaftar sebagai member? Ya 1 Ntifikasi data transaksi berhasil disimpan Menyimpan data transaksi penjualan Tabel rder Tidak 2 Tidak Apakah ingin mendaftar? Ya 2 Gambar 3.4 System Flw Penjualan

8 24 System flw transaksi penjualan ini menggambarkan kegiatan custmer saat mulai dari melakukan pencarian barang, menambahkan ke keranjang belanja, melakukan pembayaran. Custmer dapat melakukan 2 cara untuk mencari prduk, cara pertama custmer dapat memanfaatkan search untuk mencari prduk dan kedua custmer dapat mengunjungi menu prduk untuk melihat katalg prduk yang tersedia. Custmer memilih prduk dan menekan tmbl add t cart untuk menambahkan prduk ke keranjang belanja. Untuk melakukan prses selanjutnya, custmer menekan tmbl icn keranjang belanja untuk melihat daftar belanja custmer. Setelah masuk ke halaman keranjang belanja, custmer mengisi data pengiriman dan memilih lkasi tujuan, kemudian kurir akan memberikan infrmasi harga kirim sesuai tujuan. Custmer memilih paket pengiriman yang tersedia, kemudian sistem menghitung ttal belanja yang harus dibayar. Sebelum melakukan prses checkut, sistem akan mengecek status member custmer. Untuk status member prabayar, custmer dapat menggunakan pin sebagai ptngan harga dan custmer juga mendapatkan pin di setiap pembelanjaan minimal Rp Di setiap pin yang digunakan memiliki nilai Rp. 1000, maka ttal harga akan dikurangi dengan ttal ptngan harga yang diperleh dari perhitungan pin tersebut. Custmer menekan tmbl checkut untuk menyimpan rder ke tabel rder dan sistem akan memberikan ntifikasi pada halaman website serta mengirimkan invice ke custmer.

9 25 D. System Flw Knfirmasi Pembayaran Knfirmasi Pembayaran Custmer Sistem Admin Mulai Meng-input nmr invice Mengecek nmr invice Tabel rder 1 Maaf, data tidak valid Tidak Apakah n invice valid? Ya Menyimpan data knfirmasi pembayaran belanja Mengecek data knfirmasi pembayaran Tabel payment cnfirmatin Selesai Tidak Apakah ingin mencba lagi? Ya 1 Apakah data valid? Tidak Status rder rejected Mengubah status pembayaran Mengklik tmbl Reject Ya Tabel rder Status rder paid Mengubah status pembayaran Mengklik tmbl Cnfirm Gambar 3.5 System Flw Knfirmasi Pembayaran System flw knfirmasi pembayaran ini menggambarkan alur Custmer yang melakukan knfirmasi pembayaran. Custmer meng-input nmr invice, kemudian sistem akan mengecek status inputan nmr invice. Apabila nmr

10 26 tidak valid, maka sistem akan memberikan ntifikasi gagal kepada custmer dan jika inputan berhasil, maka sistem akan menyimpan data knfirmasi ke tabel payment cnfirmatin. Admin akan mengecek data knfirmasi. Apabila data tidak valid, maka admin menekan tmbl reject dan sistem akan mengubah status rder menjadi rejected dan apabila valid, maka admin menekan tmbl cnfirm dan sistem akan mengubah status rder menjadi paid. 3. Cntext Diagram Cntext Diagram merupakan langkah pertama yang menggambarkan asal data dalam menunjukkan aliran data tersebut yang terdiri dari 2 external entity, yaitu custmer dan admin. Cntext diagram ditunjukkan pada gambar 3.6. Data Pencarian Prduk Data Order Prduk Data Username dan Passwrd Custmer Data Knfirmasi Pembayaran Data Diri Custmer 0 Inf Order Data Prduk Terbaru Data Prduk Terlaris Rancang Bangun Aplikasi Penjualan Online Perlengkapan Anak pada CV Permata Inf Stk Prduk Lapran Pembeli Terbanyak Lapran Prduk Terlaris Lapran Penjualan Inf Member Hasil Pencarian Prduk + Data Prduk Data Persetujuan Member Admin Gambar 3.6 Cntext Diagram

11 27 4. DFD Level 0 Pada DFD level 0 dibawah ini merupakan penjabaran dari cntext diagram. Pada level 0 ini terdapat 4 prses yaitu registrasi member, analisa penjualan, penglahan data dan pelapran. 1 [Data Diri Custmer] Custmer [Data Order Prduk] [Inf Member] Registrasi [Data Persetujuan Member] Admin [Data Pencarian Prduk] + Update Data Custmer Lihat Data Custmer Lihat Data Custmer 1 Tabel Custmers Lihat Prduk Terbaru 2 Tabel Prduk Lihat Prduk 2 [Inf Stk Prduk] Penglahan Data [Data Prduk] 3 Update Data Prduk [Data Username dan Passwrd] Lihat Prduk Terlaris 4 Tabel Order Detail Lihat Prduk Terlaris [Data Prduk Terbaru] [Data Prduk Terlaris] Lihat Prduk [Data Knfirmasi Pembayaran] Penjualan Lihat Data Penjualan 3 Tabel Order [Lapran Penjualan] [Inf Order] [Hasil Pencarian Prduk] Simpan Data Penjualan + Simpan Data Knfirmasi Pembayaran 4 Lihat Data Penjualan [Lapran Prduk Terlaris] 5 Tabel Payment Cnfirmatin Pembuatan Lapran [Lapran Pembeli Terbanyak] Lihat Pembeli Terbanyak Gambar 3.7 DFD Level 0 +

12 28 5. DFD Level 1 Registrasi Pada DFD level 1 registrasi terdapat 2 prses yaitu mengecek status registrasi member dan mengknfirmasi member, prses di bawah ini adalah hasil penjabaran dari DFD level 0 dari prses registrasi. 1.1 Custmer [Data Diri Custmer] Mengecek Status Registrasi Member [Lihat Data Custmer] 1 Tabel Custmers 1.2 [Inf Member] Mengknfirmasi Member Admin [Data Persetujuan Member] [Update Data Custmer] Gambar 3.8 DFD Level 1 Registrasi 6. DFD Level 1 Penjualan Pada DFD level 1 penjualan terdapat 6 prses yaitu menampilkan prduk terbaru, menampilkan prduk terlaris, mencari prduk, melakukan lgin, menambahkan ke keranjang belanja dan mengknfirmasi penjualan, prses di bawah ini adalah hasil penjabaran dari DFD level 0 dari prses penjualan.

13 [Data Prduk Terbaru] Menampilkan Prduk Terbaru [Lihat Prduk Terbaru] 2 Tabel Prduk 3.2 [Data Prduk Terlaris] Menampilkan Prduk Terlaris [Lihat Prduk Terlaris] 3.3 [Data Pencarian Prduk] Mencari Prduk [Lihat Prduk] [Hasil Pencarian Prduk] 3.4 Custmer [Data Username dan Passwrd] Melakukan Lgin [Lihat Data Custmer] 1 Tabel Custmers 3.5 [Data Order Prduk] Prses Transaksi Penjualan [Simpan Data Penjualan] 3 Tabel Order 3.6 [Data Knfirmasi Pembayaran] [Inf Order] Mengknfirmasi Penjualan [Simpan Data Knfirmasi Pembayaran] [Lihat Data Penjualan] 5 Tabel Payment Cnfirmatin Gambar 3.9 DFD Level 1 Penjualan 7. DFD Level 1 Pembuatan Lapran Pada DFD level 1 penglahan data hanya terdapat 3 prses yaitu pembuatan lapran penjualan, pembuatan lapran barang terlaris dan pembuatan lapran pembeli terbanyak, prses di bawah ini adalah hasil penjabaran dari DFD level 0 dari prses penglahan data.

14 Admin [Lapran Penjualan] Pembuatan Lapran Penjualan [Lihat Data Penjualan] 3 Tabel Order 4.2 [Lapran Prduk Terlaris] Pembuatan Lapran Barang Terlaris [Lihat Prduk Terlaris] 4 Tabel Order Detail 4.3 [Lapran Pembeli Terbanyak] Pembuatan Lapran Pembeli Terbanyak [Lihat Pembeli Terbanyak] Gambar 3.10 DFD Level 1 Pembuatan Lapran 8. Entity Relatinship Diagram (ERD) Entity Relatinship Diagram (ERD) adalah suatu desain sistem yang digunakan untuk menentukan kebutuhan-kebutuhan sistem pemrsesan database. Pada gambar berikut akan dijelaskan relasi-relasi atau hubungan antar tabel rancang bangun aplikasi penjualan nline perlengkapan anak pada CV. Permata dalam bentuk cnceptual data mdel (CDM) dan physical data mdel (PDM).

15 31 A. Cnceptual Data Mdel (CDM) Relatinship_19 custmers # CUSTOMER_ID Variable characters (25) CUSTOMER_FIRST_NAME Variable characters (50) CUSTOMER_LAST_NAME Variable characters (50) CUSTOMER_ Variable characters (50) CUSTOMER_GENDER Variable characters (50) CUSTOMER_BIRTHDATE Date CUSTOMER_ADDRESS Variable characters (300) CUSTOMER_PHONE Variable characters (25) CUSTOMER_MEMBER_STATUS Variable characters (20) CUSTOMER_POINT Integer CUSTOMER_CREATED Date & Time CUSTOMER_MODIFIED Date & Time Relatinship_2 custmer_histry HISTORY_STATUS Variable characters (50) HISTORY_POINT Integer HISTORY_CREATED Date & Time Relatinship_12 Relatinship_1 thumbnails FILE_NAME Variable characters (300) users # USER_ID Variable characters (25) USER_NAME Variable characters (50) USER_PASSWORD Variable characters (50) USER_GROUP Shrt integer USER_CONFIRM_STATUS Shrt integer Relatinship_5 Relatinship_3 Relatinship_4 categries # CATEGORY_ID Variable characters (25) CATEGORY_NAME Variable characters (50) CATEGORY_SLUG Variable characters (100) CATEGORY_PARENT Variable characters (100) CATEGORY_STATUS Variable characters (25) city # CITY_ID Variable characters (25) CITY_NAME Variable characters (50) Relatinship_21 wishlist # WISHLIST_ID Variable characters (25) # Relatinship_11 prducts PRODUCT_ID PRODUCT_NAME PRODUCT_DESCRIPTION PRODUCT_GENDER PRODUCT_PRICE PRODUCT_CREATED PRODUCT_MODIFIED Variable characters (25) Variable characters (100) Text Variable characters (25) Integer Date & Time Date & Time Relatinship_9 prvince # PROVINCE_ID Variable characters (25) PROVINCE_NAME Variable characters (100) Relatinship_7 Relatinship_6 Relatinship_18 Relatinship_14 Relatinship_17 prduct_details PRODUCT_QTY Integer PRODUCT_WEIGHT Integer # PRODUCT_SKU Variable characters (25) Relatinship_16 size # PRODUCT_SIZE Variable characters (10) Relatinship_13 Relatinship_15 Relatinship_20 # ORDER_ID rders ORDER_ADDRESS_DESTINATION ORDER_RECEIVER ORDER_NOTE ORDER_COURIER ORDER_TOTAL_PRICE ORDER_CREATED ORDER_STATUS Variable characters (25) Variable characters (300) Variable characters (100) Text Variable characters (50) Integer Date Variable characters (10) Relatinship_10 payment_cnfirmatin PAYMENT_METHOD PAYMENT_BANK PAYMENT_ACCOUNT PAYMENT_ACCOUNT_NAME PAYMENT_TRANSFER_DATE PAYMENT_TRANSFER_COST PAYMENT_NOTE Variable characters (50) Variable characters (25) Variable characters (25) Variable characters (100) Date Integer Text Relatinship_8 rder_details ORDER_DETAIL_PRICE ORDER_DETAIL_QTY ORDER_SUBTOTAL ORDER_SHIPPING_COST Integer Integer Integer Integer Gambar 3.11 Cnceptual Data Mdel

16 32 B. Physical Data Mdel (PDM) custmers CUSTOMER_ID CITY_ID CUSTOMER_FIRST_NAME CUSTOMER_LAST_NAME CUSTOMER_ CUSTOMER_GENDER CUSTOMER_BIRTHDATE CUSTOMER_ADDRESS CUSTOMER_PHONE CUSTOMER_MEMBER_STATUS CUSTOMER_POINT CUSTOMER_CREATED CUSTOMER_MODIFIED varchar(50) varchar(50) varchar(50) varchar(50) date varchar(300) varchar(20) int datetime datetime <pk> <fk> users USER_ID CUSTOMER_ID USER_NAME USER_PASSWORD USER_GROUP USER_CONFIRM_STATUS varchar(50) varchar(50) smallint smallint <pk> <fk> custmer_histry CUSTOMER_ID ORDER_ID HISTORY_STATUS HISTORY_POINT HISTORY_CREATED varchar(50) int datetime <fk1> <fk2> prducts PRODUCT_ID CATEGORY_ID USER_ID PRODUCT_NAME PRODUCT_DESCRIPTION PRODUCT_GENDER PRODUCT_PRICE PRODUCT_CREATED PRODUCT_MODIFIED varchar(100) text int datetime datetime <pk> <fk2> <fk1> categries CATEGORY_ID CATEGORY_NAME CATEGORY_SLUG CATEGORY_PARENT CATEGORY_STATUS varchar(50) varchar(100) varchar(100) <pk> thumbnails PRODUCT_ID FILE_NAME varchar(300) <fk> prduct_details PRODUCT_QTY PRODUCT_WEIGHT PRODUCT_SKU PRODUCT_ID PRODUCT_SIZE int int varchar(10) <pk> <fk1> <fk2> rders ORDER_ID CUSTOMER_ID CITY_ID ORDER_ADDRESS_DESTINATION ORDER_RECEIVER ORDER_NOTE ORDER_COURIER ORDER_TOTAL_PRICE ORDER_CREATED ORDER_STATUS varchar(300) varchar(100) text varchar(50) int date varchar(10) <pk> <fk1> <fk2> rder_details PRODUCT_SKU PRODUCT_ID ORDER_ID PRODUCT_SIZE ORDER_DETAIL_PRICE ORDER_DETAIL_QTY ORDER_SUBTOTAL ORDER_SHIPPING_COST varchar(10) int int int int <fk4> <fk2> <fk1> <fk3> payment_cnfirmatin ORDER_ID PAYMENT_METHOD PAYMENT_BANK PAYMENT_ACCOUNT PAYMENT_ACCOUNT_NAME PAYMENT_TRANSFER_DATE PAYMENT_TRANSFER_COST PAYMENT_NOTE varchar(50) varchar(100) date int text <fk> wishlist WISHLIST_ID CUSTOMER_ID PRODUCT_SKU PRODUCT_SIZE PRODUCT_ID varchar(10) <pk> <fk2> <fk4> <fk3> <fk1> size PRODUCT_SIZE varchar(10) <pk> city CITY_ID PROVINCE_ID CITY_NAME varchar(50) <pk> <fk> prvince PROVINCE_ID PROVINCE_NAME varchar(100) <pk> Gambar 3.12 Physical Data Mdel

17 33 9. Struktur Tabel Rancang bangun aplikasi penjualan nline perlengkapan anak pada CV. Permata memiliki struktur tabel yang saling terintegrasi dan memberikan infrmasi yang cukup lengkap bagi pengguna sistem. Tabel-tabel yang digunakan pada sistem yang telah dibuat ini sebagaimana terdapat pada Physical Data Mdel. Berikut penjelasan struktur dari tiap tabel: A. Tabel Master Custmers Primary Key : CUSTOMER_ID, CUSTOMER_ Freign Key : CITY_ID Fungsi : Menyimpan dan melihat data custmer Tabel 3.1 Tabel Master Custmers Field Type Data Length Cnstraint CUSTOMER_ID Varchar 25 Primary Key CUSTOMER_FIRST_NAME Varchar 50 - CUSTOMER_LAST_NAME Varchar 50 - CUSTOMER_ Varchar 50 - CITY_ID Varchar 25 Freign Key CUSTOMER_GENDER Varchar 50 - CUSTOMER_BIRTHDATE Date - - CUSTOMER_ADDRESS Varchar 300 -

18 34 Field Type Data Length Cnstraint CUSTOMER_MEMBER_STATUS Varchar 20 - CUSTOMER_POINT Int - - CUSTOMER_CREATED Datetime - - CUSTOMER_MODIFIED Datetime - - B. Tabel Master Categries Primary Key : CATEGORY_ID Freign Key : - Fungsi : Menyimpan dan melihat data categry Tabel 3.2 Tabel Master Custmers Field Type Data Length Cnstraint CATEGORY_ID Varchar 25 Primary Key CATEGORY _NAME Varchar 50 - CATEGORY_SLUG Varchar CATEGORY_PARENT Varchar CATEGORY_STATUS Varchar 25 -

19 35 C. Tabel Master Prducts Primary Key : PRODUCT_ID Freign Key : CATEGORY_ID, USER_ID Fungsi : Menyimpan dan melihat data prduct Tabel 3.3 Tabel Master Prducts Field Type Data Length Cnstraint PRODUCT_ID Varchar 25 Primary Key CATEGORY _ID Varchar 25 Freign Key USER_ID Varchar 25 Freign Key PRODUCT_NAME Varchar PRODUCT_DESCRIPTION Text - - PRODUCT_GENDER Varchar 25 - PRODUCT_PRICE Int - - PRODUCT_CREATED Datetime - - PRODUCT_MODIFIED Datetime - - D. Tabel Master City Primary Key : CITY_ID Freign Key : PROVINCE_ID Fungsi : Menyimpan dan melihat data city

20 36 Tabel 3.4 Tabel Master City Field Type Data Length Cnstraint CITY_ID Varchar 25 Primary Key PROVINCE _ID Varchar 25 Freign Key CITY_NAME Varchar 25 - E. Tabel Master Size Primary Key : PRODUCT_SIZE Freign Key : - Fungsi : Menyimpan dan melihat data size Tabel 3.5 Tabel Master Size Field Type Data Length Cnstraint PRODUCT_SIZE Varchar 10 Primary Key F. Tabel Master Prvince Primary Key : PROVINCE_ID Freign Key : - Fungsi : Menyimpan dan melihat data prvince Tabel 3.6 Tabel Master Prvince Field Type Data Length Cnstraint PROVINCE_ID Varchar 25 Primary Key PROVINCE _NAME Varchar 25 -

21 37 G. Tabel Users Primary Key : USER_ID Freign Key : CUSTOMER_ID, CUSTOMER_ Fungsi : Menyimpan dan melihat data user Tabel 3.7 Tabel Users Field Type Data Length Cnstraint USER_ID Varchar 25 Primary Key CUSTOMER _ID Varchar 25 Freign Key CUSTOMER_ Varchar 25 Freign Key USER_NAME Varchar 50 - USER_PASSWORD Varchar 50 - USER_GROUP Smallint - - USER_CONFIRM_STATUS Smallint - - H. Tabel Prduct Detail Primary Key : PRODUCT_SKU Freign Key : PRODUCT_ID Fungsi : Menyimpan dan melihat data prduct detail

22 38 Tabel 3.8 Tabel Prduct Detail Field Type Data Length Cnstraint PRODUCT_SKU Varchar 25 Primary Key PRODUCT_ID Varchar 25 Freign Key PRODUCT_SIZE Varchar 10 Freign Key PRODUCT_QTY Varchar Int - PRODUCT_WEIGHT Varchar Int - I. Tabel Thumbnails Primary Key : - Freign Key : PRODUCT_ID Fungsi : Menyimpan dan melihat data thumbnails Tabel 3.9 Tabel Thumbnails Field Type Data Length Cnstraint PRODUCT_ID Varchar 25 Freign Key FILE_NAME Varchar J. Tabel Orders Primary Key : ORDER_ID Freign Key : CUSTOMER_ID, CITY_ID Fungsi : Menyimpan dan melihat data rders

23 39 Tabel 3.10 Tabel Orders Field Type Data Length Cnstraint ORDER_ID Varchar 25 Primary Key CUSTOMER_ID Varchar 25 Freign Key CITY_ID Varchar 25 Freign Key ORDER_ADDRESS_DESTINATION Varchar ORDER_RECEIVER Varchar ORDER_NOTE Text - - ORDER_COURIER Varchar 50 - ORDER_TOTAL_PRICE Int - - ORDER_CREATED Date - - ORDER_STATUS Varchar 10 - K. Tabel Order Detail Primary Key : - Freign Key : PRODUCT_ID, PRODUCT_SKU, ORDER_ID, PRODUCT_SIZE Fungsi : Menyimpan dan melihat data rder detail

24 40 Tabel 3.11 Tabel Order Details Field Type Data Length Cnstraint PRODUCT_SKU Varchar 25 Freign Key PRODUCT_ID Varchar 25 Freign Key ORDER_ID Varchar 25 Freign Key PRODUCT_SIZE Varchar 10 Freign Key ORDER_DETAIL_PRICE Int - - ORDER_DETAIL_QTY Int - - ORDER_SUBTOTAL Int - - ORDER_SHIPPING_COST Int - - L. Tabel Payment Cnfirmatin Primary Key : - Freign Key : ORDER_ID Fungsi : Menyimpan data payment cnfirmatin, melihat status pembelian dan knfirmasi pembayaran Tabel 3.12 Tabel Payment Cnfirmatin Field Type Data Length Cnstraint ORDER_ID Varchar 25 Freign Key PAYMENT_METHOD Varchar 50 -

25 41 Field Type Data Length Cnstraint PAYMENT_ACCOUNT Varchar 25 - PAYMENT_ACCOUNT_NAME Varchar PAYMENT_TRANSFER_DATE Date - - PAYMENT_TRANSFER_COST Int - - PAYMENT_NOTE Text - - M. Tabel Wishlist Primary Key : WISHLIST_ID Freign Key : CUSTOMER_ID, PRODUCT_SKU, PRODUCT_ID, PRODUCT_SIZE Fungsi : Menyimpan dan melihat data wishlist Tabel 3.13 Tabel Wishlist Field Type Data Length Cnstraint WISHLIST_ID Varchar 25 Primary Key CUSTOMER_ID Varchar 25 Freign Key PRODUCT_ID Varchar 25 Freign Key PRODUCT_SKU Varchar 25 Freign Key PRODUCT_SIZE Varchar 10 Freign Key

26 42 N. Tabel Custmer Histry Primary Key : WISHLIST_ID Freign Key : CUSTOMER_ID, ORDER_ID Fungsi : Melihat data custmer histry Tabel 3.14 Tabel Custmer Histry Field Type Data Length Cnstraint ORDER_ID Varchar 25 Freign Key CUSTOMER_ID Varchar 25 Freign Key HISTORY_STATUS Varchar 50 - HISTORY_POINT Int - - HISTORY_CREATED Datetime Desain I/O Pembuatan desain I/O merupakan desain input dan utput gambaran aplikasi yang akan dibuat. Desain I/O dibuat semudah mungkin agar tidak mempersulit pengguna. A. Desain I/O Tampilan Registratin Rancang desain I/O berikut ini merupakan tampilan registrasi. Frm ini digunakan untuk pendaftaran data diri custmer. Desain I/O registrasi dapat dilihat pada gambar 3.13.

27 43 Gambar 3.13 Desain I/O Registratin Berikut ini adalah tampilan desain I/O setelah berhasil melakukan pendaftaran sebagi member. Desain I/O halaman saat berhasil melakukan registrasi dapat dilihat pada gambar Gambar 3.14 Desain I/O Success Page Registratin

28 44 B. Desain I/O Tampilan Lgin Rancang desain I/O berikut ini merupakan tampilan lgin. Pada frm ini terdapat input text username dan passwrd yang harus diisi pengguna. Desain I/O lgin dapat dilihat pada gambar Gambar 3.15 Desain I/O Lgin

29 45 C. Desain I/O Tampilan Hme Rancang desain I/O berikut ini merupakan tampilan hme. Pada halaman ini, custmer yang mengunjungi web akan mendapatkan infrmasi mengenai prduk terbaru dan terlaris. Desain I/O hme dapat dilihat pada gambar Gambar 3.16 Desain I/O Hme

30 46 D. Desain I/O Tampilan Prduct Rancang desain I/O berikut ini merupakan tampilan prduct. Pada halaman ini, custmer dapat melihat prduk yang dijual. Desain I/O prduct dapat dilihat pada gambar Gambar 3.17 Desain I/O Prduct

31 47 E. Desain I/O Tampilan Prduct Detail Rancang desain I/O berikut ini merupakan tampilan prduct detail. Pada halaman ini, custmer dapat melihat detil prduk termasuk penjelasan tentang spesifikasi prduk. Desain I/O prduct detail dapat dilihat pada gambar Gambar 3.18 Desain I/O Prduct Detail

32 48 F. Desain I/O Tampilan Cart Rancang desain I/O berikut ini merupakan tampilan cart. Pada halaman ini, custmer dapat melihat prduk yang akan dibeli dan jumlah ttal harga yang harus dibayar. Desain I/O cart dapat dilihat pada gambar Gambar 3.19 Desain I/O Cart Berikut ini adalah tampilan desain I/O setelah berhasil melakukan pembelanjaan. Desain I/O halaman saat berhasil melakukan pembelanjaan dapat dilihat pada gambar 3.20.

33 49 Gambar 3.20 Desain I/O Success Page Order G. Desain I/O Tampilan Payment Cnfirmatin Rancang desain I/O berikut ini merupakan tampilan payment cnfirmatin. Frm ini digunakan untuk melakukan knfirmasi pembayaran. Desain I/O payment cnfirmatin dapat dilihat pada gambar Gambar 3.21 Desain I/O Payment Cnfirmatin

34 50 H. Desain I/O Tampilan Histry Rancang desain I/O berikut ini merupakan tampilan histry. Pada halaman ini, custmer dapat melihat histri transaksi pembelian prduk. Desain I/O histry dapat dilihat pada gambar Gambar 3.22 Desain I/O Histry

35 51 I. Desain I/O Tampilan Wishlist Rancang desain I/O berikut ini merupakan tampilan wishlist. Pada halaman ini, custmer dapat melihat prduk yang telah disimpan pada tabel wishlist. Desain I/O wishlist dapat dilihat pada gambar Gambar 3.23 Desain I/O Wishlist

36 52 J. Desain I/O Tampilan Admin Prduct List Rancang desain I/O berikut ini merupakan tampilan prduct list. Pada halaman ini, admin dapat melihat daftar prduk dan mencari prduk yang akan diubah. Desain I/O prduct list dapat dilihat pada gambar Gambar 3.24 Desain I/O Prduct List

37 53 K. Desain I/O Tampilan Admin Prduct Create Rancang desain I/O berikut ini merupakan tampilan prduct create. Frm ini digunakan untuk mengisi data prduk. Desain I/O prduct create dapat dilihat pada gambar Gambar 3.25 Desain I/O Prduct Create

38 54 L. Desain I/O Tampilan Admin Categry List Rancang desain I/O berikut ini merupakan tampilan categry list. Pada halaman ini, admin dapat melihat daftar prduk dan mencari prduk yang akan diubah. Desain I/O categry list dapat dilihat pada gambar Gambar 3.26 Desain I/O Categry List M. Desain I/O Tampilan Admin Categry Create Rancang desain I/O berikut ini merupakan tampilan categry create. Frm ini digunakan untuk mengisi data kategri. Desain I/O categry create dapat dilihat pada gambar Gambar 3.27 Desain I/O Categry Create

39 55 N. Desain I/O Tampilan Admin Order List Rancang desain I/O berikut ini merupakan tampilan rder list. Pada halaman ini, admin dapat melihat daftar rder dan menyetujui atau menlak kfnrimasi rder. Desain I/O rder list dapat dilihat pada gambar Gambar 3.28 Desain I/O Order List O. Desain I/O Tampilan Admin Lapran Penjualan Rancang desain I/O berikut ini merupakan tampilan lapran penjualan. Pada halaman ini, admin dapat melihat lapran penjualan berdasarkan jarak tanggal yang diisikan. Desain I/O lapran penjualan dapat dilihat pada gambar 3.29.

40 56 Gambar 3.29 Desain I/O Lapran Penjualan P. Desain I/O Tampilan Admin Lapran Prduk Rancang desain I/O berikut ini merupakan tampilan lapran prduk. Pada halaman ini, admin dapat melihat lapran prduk berdasarkan jarak tanggal yang diisikan. Desain I/O lapran prduk dapat dilihat pada gambar Gambar 3.30 Desain I/O Lapran Prduk

41 57 Q. Desain I/O Tampilan Admin Lapran Custmer Rancang desain I/O berikut ini merupakan tampilan lapran custmer. Pada halaman ini, admin dapat melihat lapran custmer berdasarkan jarak tanggal yang diisikan. Desain I/O lapran custmer dapat dilihat pada gambar Gambar 3.31 Desain I/O Lapran Custmer