BAB 4 PERANCANGAN E-COMMERCE 4.1. Planning 4.1.1. Estimation / Scheduling - Register domain Dalam pembuatan website ini adalah tahap pertama yang dilakukan agar website yang nantinya dibuat dapat diakses dengan nama domain sesuai yang didaftarkan. - Menganalisa proses bisnis baru Dengan dibuatnya system e-commerce maka proses bisnis yang ada akan berbeda dengan proses bisnis yang lama atau traditional commerce - Membeli hosting untuk menjalankan website Ini bertujuan agar netizen dapat mengakses ke domain - Design o Mendesign halaman web o Membuat database o Menfungsikan halaman web - Testing - Mempromosikan website e-commerce o Membuat social media seperti facebook, twitter, dan instagram o Memberi tahu para customer melalui BBM - Scheduling 59
60 Gambar 4.1. Scheduling Control - Membuat milestone / time management untuk programmer agar pembuatan website berjalan dengan lancar Pembuatan milestone untuk programmer dapat mengetahui tugas yang dia perlu lakukan apa saja dan terdapat estimasi waktu agar programmer dapat mengejar waktu tersebut.
61 Milestone untuk Programmer: o Header o Footer o Content Index o Form Registrasi o Member o Checkout o Produk o Detail produk Resources - Programmer o Coding - Designer o Menganalisa proses bisnis baru o Membuat flowchart, class diagram, ERD, dan use case 4.2. Analysis and Design 4.2.1. Use Case
62 Gambar 4.2. Use case front end
63 SISTEM INFORMASI PT. ALLSTARINDO WAHANATAMA Tracking Mengubah Status Pembayaran View Pesanan Admin Input, Update, Delete produk Hapus Pelanggan View Produk Mengirim Resi Pengiriman Gambar 4.3. Use case back end
64 4.2.2. Flow Proccess Mendaftar Gambar 4.4. Mendaftar Mencari Produk Gambar 4.5. Mencari Produk
65 Check Out engakse UStore Check Out Input Quantity Terdaftar Ya Step 2 : Delivery Detail Tidak Step 1 : Register tep 4 : ayment ethod Memilih Jasa Pengirima n Step 3 : Delivery Method Menggunak an alamat lama Ya Menentu kan alamat Tidak milih ara bayanr an Tidak Paypal atau Transfer Direct Paypal Masukkan Alamat Baru Transfer Menampilkan Informasi bank yang di tuju Step 5 : Confirm Order Direct Paypol Gambar 4.6 Check Out
66 Melakukan login Gambar 4.7 Melakukan Login Melihat produk Gambar 4.8 Melihat Produk Bertanya pada CS Gambar 4.9 Bertanya pada CS
67 Melihat lokasi toko Gambar 4.10 Melihat Lokasi Toko Melihat produk baru Gambar 4.11 Melihat Produk Baru
68 Membagikan halaman web Gambar 4.12 Membagikan Hal Web MELIHAT HOME PAGE MEMBER Gambar 4.13 Melihat Homepage Member
69 EDIT ACCOUNT Gambar 4.14 Edit Account CHANGE PASSWORD Gambar 4.15 Change Password MODIFY ADDRESS Gambar 4.16 Modify Address
70 MODIFY WISH LIST Gambar 4.17 Modify Wish List VIEW ORDER HISTORY Gambar 4.18 View Order History MELIHAT POPULAR PRODUK Gambar 4.19 Melihat Popular Produk
71 MENAMBAHKAN PRODUK KE CART Gambar 4.20 Menambahkan Produk Ke Chart MENGKONFIRMASI PEMBAYARAN Gambar 4.21 Mengkonfirmasi Pembayaran TRACKING Gambar 4.22 Tracking
72 MENGUBAH STATUS PEMBAYARAN Gambar 4.23 Mengubah Status Pembayaran VIEW PESANAN Gambar 4.24 View Pesanan
73 INPUT, UPDATE, DELETE PRODUK Gambar 4.25 Input, Update, Delete Produk HAPUS PELANGGAN Gambar 4.26 Hapus Pelanggan
74 VIEW PRODUK Gambar 4.27 View Produk MENGIRIM RESI PENGIRIMAN Gambar 4.28 Mengirim Resi Pengiriman
75 4.3. Use case scenario Mendaftar Gambar 4.29 Use Case Scenario Mendaftar
76 Mencari Produk Gambar 4.30 Use Case Scenario Mencari Produk Check Out
77 Melakukan Login Gambar 4.31 Use Case Scenario Check Out Gambar 4.32 Use Case Scenario Melakukan Login
78 Melihat Produk Gambar 4.33 Use Case Scenario Melihat Produk Bertanya Pada CS
79 Gambar 4.34 Use Case Scenario Bertanya Pada CS Melihat Lokasi Toko Gambar 4.35 Use Case Scenario Melihat Lokasi Toko Melihat Produk Baru Gambar 4.36 Use Case Scenario Melihat Produk Baru Membagikan Hal Web
80 Gambar 4.37 Use Case Scenario Membagikan Hal Web Melihat Home Page Member Gambar 4.38 Use Case Scenario Melihat Home Page Member
81 Edit Account Change Password Gambar 4.39 Use Case Scenario Edit Account
82 Gambar 4.40 Use Case Scenario Change Password Modify Address Modify Wish List Gambar 4.41 Use Case Scenario Modify Address
83 Gambar 4.42 Use Case Scenario Modify Wish List View Order History Gambar 4.43 Use Case Scenario View Order History Melihat Popular Product
84 Gambar 4.44 Use Case Scenario Melihat Popular Product Menambahkan Produk Ke Cart Gambar 4.45 Use Case Scenario Menambahkan Product Ke Cart Mengkonfirmasi Pembayaran
85 Gambar 4.46 Use Case Scenario Mengkonfirmasi Pembayaran Tracking Gambar 4.47 Use Case Scenario Tracking
86 Mengubah Status Pembayaran Gambar 4.48 Use Case Scenario Mengubah Status Pembayaran View Pesanan Gambar 4.49 Use Case Scenario View Pesanan Input, Update, Delete Produk
87 Gambar 4.50 Use Case Scenario Input, Update Produk, Delete Hapus Pelanggan Gambar 4.51 Use Case Scenario Hapus Pelanggan
88 View produk Gambar 4.52 Use Case Scenario View Produk Mengirimkan Resi Pengiriman Gambar 4.53 Use Case Scenario Mengirimkan Resi Pengiriman
89 4.4. Primary Scenario Mendaftar Gambar 4.54 Primary Scenario Mendaftar Mencari / Search Produk Gambar 4.55 Primary Scenario Mencari / Search Produk
90 Checkout Gambar 4.56 Primary Scenario Checkout
91 Login Gambar 4.57 Primary Scenario Login Melihat produk Gambar 4.58 Primary Scenario Melihat Produk
92 Bertanya kepada cs Gambar 4.59 Primary Scenario Bertanya Kepada CS Melihat lokasi toko Gambar 4.60 Primary Scenario Melihat Lokasi Toko
93 Melihat produk baru Gambar 4.61 Primary Scenario Melihat Produk Baru Membagikan halaman web Gambar 4.62 Primary Scenario Membagikan Halaman Web
94 Melihat profile member Gambar 4.63 Primary Scenario Melihat Profile Member Edit Account Gambar 4.64 Primary Scenario Edit Account
95 Change Password Gambar 4.65 Primary Scenario Change Password Modify Address Gambar 4.66 Primary Scenario Modify Address
96 Modify Wish List Gambar 4.67 Primary Scenario Modify Wish List Menampilkan Order history Gambar 4.68 Primary Scenario Menampilkan Order History
97 Melihat Popular Produk Gambar 4.69 Primary Scenario Melihat Popular Produk Menambahkan produk ke cart Gambar 4.70 Primary Scenario Menambahkan Produk ke Cart
98 Konfirmasi pembayaran Gambar 4.71 Primary Scenario Konfirmasi Pembayaran Tracking Gambar 4.72 Primary Scenario Tracking
99 Mengganti / Mengubah status pembayaran Gambar 4.73 Primary Scenario Mengganti Status Pembayaran View Pesanan Gambar 4.74 Primary Scenario View Pesanan
100 Insert, update, delete product Gambar 4.75 Primary Scenario Insert, Update, Delete Product
101 Hapus Pelanggan Gambar 4.76 Primary Scenario Hapus Pelanggan Mengirimkan resi pengiriman Gambar 4.77 Primary Scenario Mengirimkan Resi Pengiriman
102 4.5. ER Diagram Gambar 4.78 ER Diagram
103 4.6. Blueprint Pada blueprint ini mendeskripsikan tentang website yang akan dibuat nanti. Terdapat halaman home yang nantinya member (sebutan bagi customer yang telah membuat ID) maka mereka dapat melihat home page mereka yang berisikan bio data mereka masingmasing sesuai dengan data diri yang mereka isi pada form registrasi. Lalu, fitur site search juga diberikan sehingga customer dapat dengan mudah mencari barang yang mereka inginkan hanya dengan mengetik keyword pada bagian search. M&U Store menjual pakaian-pakaian wanita, yang dibagi menjadi 2 tipe yaitu blouse dan dress, yang ada di bagian produk. Setelah produk dipilih, dan tipe baju telah dipilih maka customer akan melihat produk-produk apa saja yang dipasarkan dalam product listing dan nantinya ketika produk tersebut dipilih maka detil dari produk akan di deskripsikan secara lengkap dari bahan kain tersebut, gambar, warna, ukuran pinggang, ukuran dada, ukuran bahu sehingga customer dapat mengurangi terjadinya kesalahan ukuran dalam pembelian. Fitur add to cart diberikan agar setelah customer melihat produk tersebut dan memutuskan membeli produk tersebut, maka produk tersebut akan dimasukkan ke dalam cart dan customer dapat melanjutkan belanja tanpa harus menghafalkan produk apa yang telah mereka pesan sebelumnya dengan menekan tombol add to cart maka sistem akan memasukkan produk tersebut ke dalam cart mereka yang dapat mereka lihat lagi nanti ketika checkout. Selain itu, sistem juga memberikan informasi tentang dimana letak M&U Store berada dan yang ingin tahu contact person dari M&U Store. Customer juga dapat chat via messenger untuk bertanya-tanya tentang produk-produk M&U Store.
104 Gambar 4.79 Blueprint
105 4.7. Wireframe Berikut adalam wireframe dari rencangan website M&U Store Gambar 4.80 Tampilan Home
106 Gambar 4.81 Tampilan Halaman Product detail
Gambar 4.82 Tampilan Checkout 107
108 Gambar 4.83 Tampilan Payment Confirmation
Gambar 4.84 Tampilan Contact Us 109
110 Gambar 4.85 Tampilan Change Password
Gambar 4.86 Tampilan Edit Account 111
112 Gambar 4.87 Tampilan Simple cart
Gambar 4.88 Tampilan Address Book 113
114 Gambar 4.89 Tampilan My Account
Gambar 4.90 Tampilan Order History 115
116 Gambar 4.91 Tampilan Register Account
Gambar 4.92 Tampilan Search Produk 117
118 Gambar 4.93 Tampilan Cart Details
119 Wireframe admin / back end Gambar 4.94 Tampilan Order
120 Gambar 4.95 Tampilan Products Gambar 4.96 Tampilan Confirmation
Gambar 4.97 Tampilan Sales Reports 121