BAB 4 PERANCANGAN E-COMMERCE

Transkripsi

1 BAB 4 PERANCANGAN E-COMMERCE 4.1. Planning 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

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

3 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 Use Case

4 62 Gambar 4.2. Use case front end

5 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

6 Flow Proccess Mendaftar Gambar 4.4. Mendaftar Mencari Produk Gambar 4.5. Mencari Produk

7 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

8 66 Melakukan login Gambar 4.7 Melakukan Login Melihat produk Gambar 4.8 Melihat Produk Bertanya pada CS Gambar 4.9 Bertanya pada CS

9 67 Melihat lokasi toko Gambar 4.10 Melihat Lokasi Toko Melihat produk baru Gambar 4.11 Melihat Produk Baru

10 68 Membagikan halaman web Gambar 4.12 Membagikan Hal Web MELIHAT HOME PAGE MEMBER Gambar 4.13 Melihat Homepage Member

11 69 EDIT ACCOUNT Gambar 4.14 Edit Account CHANGE PASSWORD Gambar 4.15 Change Password MODIFY ADDRESS Gambar 4.16 Modify Address

12 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

13 71 MENAMBAHKAN PRODUK KE CART Gambar 4.20 Menambahkan Produk Ke Chart MENGKONFIRMASI PEMBAYARAN Gambar 4.21 Mengkonfirmasi Pembayaran TRACKING Gambar 4.22 Tracking

14 72 MENGUBAH STATUS PEMBAYARAN Gambar 4.23 Mengubah Status Pembayaran VIEW PESANAN Gambar 4.24 View Pesanan

15 73 INPUT, UPDATE, DELETE PRODUK Gambar 4.25 Input, Update, Delete Produk HAPUS PELANGGAN Gambar 4.26 Hapus Pelanggan

16 74 VIEW PRODUK Gambar 4.27 View Produk MENGIRIM RESI PENGIRIMAN Gambar 4.28 Mengirim Resi Pengiriman

17 Use case scenario Mendaftar Gambar 4.29 Use Case Scenario Mendaftar

18 76 Mencari Produk Gambar 4.30 Use Case Scenario Mencari Produk Check Out

19 77 Melakukan Login Gambar 4.31 Use Case Scenario Check Out Gambar 4.32 Use Case Scenario Melakukan Login

20 78 Melihat Produk Gambar 4.33 Use Case Scenario Melihat Produk Bertanya Pada CS

21 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

22 80 Gambar 4.37 Use Case Scenario Membagikan Hal Web Melihat Home Page Member Gambar 4.38 Use Case Scenario Melihat Home Page Member

23 81 Edit Account Change Password Gambar 4.39 Use Case Scenario Edit Account

24 82 Gambar 4.40 Use Case Scenario Change Password Modify Address Modify Wish List Gambar 4.41 Use Case Scenario Modify Address

25 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

26 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

27 85 Gambar 4.46 Use Case Scenario Mengkonfirmasi Pembayaran Tracking Gambar 4.47 Use Case Scenario Tracking

28 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

29 87 Gambar 4.50 Use Case Scenario Input, Update Produk, Delete Hapus Pelanggan Gambar 4.51 Use Case Scenario Hapus Pelanggan

30 88 View produk Gambar 4.52 Use Case Scenario View Produk Mengirimkan Resi Pengiriman Gambar 4.53 Use Case Scenario Mengirimkan Resi Pengiriman

31 Primary Scenario Mendaftar Gambar 4.54 Primary Scenario Mendaftar Mencari / Search Produk Gambar 4.55 Primary Scenario Mencari / Search Produk

32 90 Checkout Gambar 4.56 Primary Scenario Checkout

33 91 Login Gambar 4.57 Primary Scenario Login Melihat produk Gambar 4.58 Primary Scenario Melihat Produk

34 92 Bertanya kepada cs Gambar 4.59 Primary Scenario Bertanya Kepada CS Melihat lokasi toko Gambar 4.60 Primary Scenario Melihat Lokasi Toko

35 93 Melihat produk baru Gambar 4.61 Primary Scenario Melihat Produk Baru Membagikan halaman web Gambar 4.62 Primary Scenario Membagikan Halaman Web

36 94 Melihat profile member Gambar 4.63 Primary Scenario Melihat Profile Member Edit Account Gambar 4.64 Primary Scenario Edit Account

37 95 Change Password Gambar 4.65 Primary Scenario Change Password Modify Address Gambar 4.66 Primary Scenario Modify Address

38 96 Modify Wish List Gambar 4.67 Primary Scenario Modify Wish List Menampilkan Order history Gambar 4.68 Primary Scenario Menampilkan Order History

39 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

40 98 Konfirmasi pembayaran Gambar 4.71 Primary Scenario Konfirmasi Pembayaran Tracking Gambar 4.72 Primary Scenario Tracking

41 99 Mengganti / Mengubah status pembayaran Gambar 4.73 Primary Scenario Mengganti Status Pembayaran View Pesanan Gambar 4.74 Primary Scenario View Pesanan

42 100 Insert, update, delete product Gambar 4.75 Primary Scenario Insert, Update, Delete Product

43 101 Hapus Pelanggan Gambar 4.76 Primary Scenario Hapus Pelanggan Mengirimkan resi pengiriman Gambar 4.77 Primary Scenario Mengirimkan Resi Pengiriman

44 ER Diagram Gambar 4.78 ER Diagram

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

46 104 Gambar 4.79 Blueprint

47 Wireframe Berikut adalam wireframe dari rencangan website M&U Store Gambar 4.80 Tampilan Home

48 106 Gambar 4.81 Tampilan Halaman Product detail

49 Gambar 4.82 Tampilan Checkout 107

50 108 Gambar 4.83 Tampilan Payment Confirmation

51 Gambar 4.84 Tampilan Contact Us 109

52 110 Gambar 4.85 Tampilan Change Password

53 Gambar 4.86 Tampilan Edit Account 111

54 112 Gambar 4.87 Tampilan Simple cart

55 Gambar 4.88 Tampilan Address Book 113

56 114 Gambar 4.89 Tampilan My Account

57 Gambar 4.90 Tampilan Order History 115

58 116 Gambar 4.91 Tampilan Register Account

59 Gambar 4.92 Tampilan Search Produk 117

60 118 Gambar 4.93 Tampilan Cart Details

61 119 Wireframe admin / back end Gambar 4.94 Tampilan Order

62 120 Gambar 4.95 Tampilan Products Gambar 4.96 Tampilan Confirmation

63 Gambar 4.97 Tampilan Sales Reports 121