BAB III ANALISIS DAN PERANCANGAN SISTEM

Transkripsi

1 BAB III ANALISIS DAN PERANCANGAN SISTEM 3.1 Analisis Sistem yang Berjalan Gambaran Umum PT. Tera Data Indonusa PT. Tera Data Indonusa adalah salah satu distributor processor Intel, yang kemudian mengembangkan sayapnya dengan mendirikan brand lokal notebook, tablet, serta smartphone dengan merk Axioo. PT. Tera Data Indonusa memiliki visi untuk menjadi brand lokal yang mendunia, sehingga brand tersebut didaftarkan di Singapura. Selain di Indonesia, Axioo juga mendirikan cabang di Singapura dan Vietnam. Saat ini, Axioo menjadi raja notebook lokal di Indonesia dan menjadi top 5 brand global Indonesia. Pada 2011, PT. Tera Data Indonusa mulai mengembangkan peralatan multimedia interface (tablet pc) dan smartphone. Gambar 3.1 Struktur Keorganisasian PT. Tera Data Indonusa 17

2 18 Pada gambar 3.1 dijelaskan struktur keorganisasian PT. Tera Data Indonusa dalam bentuk diagram Sistem yang Berjalan Penjualan dilakukan secara tradisional (dealer), serta ke pasar modern (carrefour, hypermart, dll), online(blibli.com, lazada.com). Berikut adalah Data Flow Diagram dari proses penjualan yang sedang diimplementasi. Gambar 3.2 Diagram Konteks Sistem Penjualan customer. Pada gambar 3.2 digambarkan sistem alur pemesanan yang terjadi oleh

3 19 Gambar 3.3 Data Flow Diagram Level 0 Sistem Penjualan Sesuai yang tertera pada gambar 3.3, sistem penjualan yang terjadi, serta cara penanganan order dari customer dijelaskan secara lebih rinci pada diagram level 0 tersebut. Customer yang dimaksud di sini bukanlah end-user, namun berupa toko besar/distributor. Pertama, customer melakukan pemesanan produk dalam jumlah tertentu. Setelah itu, akan dibuat invoice berupa keterangan order customer. Setelah order dikonfirmasi dan invoice dibuat, order akan ditangani oleh account manajer. Keterangan order yang berisi parts yang dibutuhkan akan diberikan ke supplier. Supplier kemudian mengirim part-part yang dibutuhkan kembali ke account manajer untuk ditangani. Setelah part-part yang dibutuhkan untuk melakukan perakitan diterima account manajer, Account manajer akan mengirim part-part beserta keterangan cara fabrikasi ke factory.setelah diterima factory, tugas factory hanyalah merakit produk sesuai instruksi dari account manajer menggunakan part-part yang telah diterima. Factory kemudian akan menerima keterangan data customer untuk melakukan pengiriman ke customer yang melakukan order product.

4 Permasalahan Permasalahan yang muncul tanpa adanya Online Shopping di antaranya keterbatasan penjualan, di mana setiap pembeli(dealer, pasar modern, dan toko online) memiliki permintaan masing-masing. Hal ini menyebabkan keterbatasan dalam penjualan produk. Dengan adanya Online Shopping tersendiri, penjualan dapat dilakukan secara lebih luas ke setiap customer tanpa adanya batasan-batasan produk yang ditawarkan. Pendistribusian produk Axioo telah mencakup sebagian besar kota-kota besar di Indonesia. Namun, Terkadang pendistribusian barang dapat terjadi secara tidak merata. Misalnya, pada Mall A di Jakarta Axioo hanya dijual pada 30% dari keseluruhan toko. Hal ini disebabkan karena jangkauan dari dealer ke toko yang terbatas. Ini akan menyebabkan end user yang tertarik untuk membeli produk Axioo mengalami kesulitan dalam menemukan toko yang menjual produk Axioo. Beberapa requirement(kebutuhan) yang didapat dari hasil wawancara dengan Bapak Rubi Sutanto secara ringkas meliputi: 1. Web berbentuk katalog, yaitu ditampilkan produk secara keseluruhan pada halaman home. Menurut beliau, hal ini akan menambah waktu kunjungan user. 2. Adanya fungsi search(pencarian). Fungsi ini bertujuan untuk mempermudah user yang memang memiliki tujuan mencari produk secara spesifik dalam pengunjungan web. 3. Validasi dalam fungsi pendaftaran user baru yang mudah/umum. 4. Sistem payment gateway dalam hal pembayaran. 5. Adanya panduan penggunaan yang diperuntukkan bagi user yang belum berpengalaman Usulan Pemecahan Masalah Usulan yang kami tawarkan kepada PT. Tera Indonusa berupa Online Shopping, yang dapat memanfaatkan popularitas internet sebagai fasilitas pemasaran produk dengan lebih efektif dan efisien. Dengan adanya Online Shopping, produk yang ditawarkan dapat lebih mendunia, serta popularitas dapat meningkat. Online Shopping ini akan dilengkapi sistem integrasi yang

5 21 memperbolehkan user/customer untuk melakukan browsing barang sesuai dengan kategorinya masing-masing. Selain itu, dengan adanya Online Shopping, end user yang tertarik untuk membeli produk Axioo akan memiliki akses secara langsung untuk melakukan pembelian tanpa harus kesulitan mencari toko yang menjual produk Axioo. 3.2 Rancangan Sistem yang Diusulkan Rancangan Umum Sistem Gambar 3.4 Use Case Rancangan Umum Sistem Pada Gambar 3.4 diuraikan fungsi-fungsi yang dapat dilakukan oleh user dalam pengoperasian sistem, serta fungsi-fungsi yang dapat dilakukan admin dalam menangani sistem. Tabel 3.1 sampai dengan 3.16 di bawah menjelaskan deskripsi fungsi yang terdapat pada sistem, yang telah diuraikan pada Gambar 3.4.

6 22 Tabel 3.1 Use Case Description Untuk Fungsi register Use-Case Name Priority Primary Business Actor Description register High User Sebelum melakukan pembelian, setiap customer harus melakukan register terlebih dahulu, agar data customer dapat tercatat dalam database, dan kemudian dapat melakukan interaksi dengan sistem berupa pembelian, pembayaran, dan lain-lain. Tabel 3.2 Use Case Description Untuk Fungsi login Use-Case Name Priority Primary Business Actor Description login High User Customer yang telah terdaftar kemudian harus melakukan login, sehingga session interaksi perbelanjaan lebih lanjut dapat terjadi.

7 23 Tabel 3.3 Use Case Description Untuk Fungsi editprofile Use-Case Name Priority Primary Business Actor Description editprofile Low User User yang telah login dapat mengubah data user sendiri. Tabel 3.4 Use Case Description Untuk Fungsi topup Use-Case Name Priority Primary Business Actor Description topup High User User yang telah terdaftar dalam database dapat melakukan topup untuk mengkonfirmasi hasil transfer ke rekening toko, dengan menginput data transfer, sehingga saldo user dapat bertambah.

8 24 Tabel 3.5 Use Case Description Untuk Fungsi viewproduct Use-Case Name Priority Primary Business Actor Description viewproduct High User Use Case ini memperbolehkan user untuk melihat list produk yang ditawarkan, dan memilih produk yang ingin dibeli. Use Case ini tidak memerlukan registrasi apabila pembelian tidak dilakukan. Tabel 3.6 Use Case Description Untuk Fungsi searchproduct Use-Case Name Priority Primary Business Actor Description searchproduct Low User User yang sedang berada dalam interface viewproduct dapat melakukan search untuk mencari produk spesifik yang diinginkan.

9 25 Tabel 3.7 Use Case Description Untuk Fungsi buyproduct Use-Case Name Priority Primary Business Actor Description buyproduct High User Menambahkan produk yang dipilih untuk ditambahkan ke daftar pembelian user. User harus berada dalam interface viewproduct sebelum melakukan pembelian. Use case ini memerlukan user yang telah terdaftar sebelumnya. Tabel 3.8 Use Case Description Untuk Fungsi viewcart Use-Case Name Priority Primary Business Actor Description viewcart High User Melihat daftar pembelian yang telah dilakukan user. Daftar produk yang telah terjadi pada buyproduct akan ditampilkan di sini, beserta harga total pembelian produk. Hanya user yang telah terdaftar yang dapat melihat interface viewcart.

10 26 Tabel 3.9 Use Case Description Untuk Fungsi checkout Use-Case Name Priority Primary Business Actor Description checkout High User Use Case ini merupakan interaksi yang akan dilakukan user apabila produk yang ingin dibeli sudah ditetapkan, sehingga tahap selanjutnya mencakup pengurangan saldo user, dan produk yang berada di cart user akan dikirim ke user setelah konfirmasi kecukupan saldo dilakukan. Tabel 3.10 Use Case Description Untuk Fungsi viewnews Use-Case Name Priority Primary Business Actor Description viewnews Low User User dapat melihat update-update mengenai produk-produk serta acara-acara event yang berhubungan dengan perusahaan. Use case ini tidak memerlukan registrasi user.

11 27 Tabel 3.11 Use Case Description Untuk Fungsi viewcontact Use-Case Name Priority Primary Business Actor Description viewcontact Low User User dapat melihat kontak yang dapat dihubungi apabila ada pertanyaan status pengiriman dan update lainnya. Tabel 3.12 Use Case Description Untuk Fungsi viewmanual Use-Case Name Priority Primary Business Actor Description viewmanual Low User User dapat melihat Petunjuk atau bantuan untuk melakukan pembelian. Tabel 3.13 Use Case Description Untuk Fungsi updateproduct Use-Case Name Priority Primary Business Actor Description updateproduct High Admin Mengelola data produk yang dijual, berupa menambah produk baru dan lain-lain.

12 28 Tabel 3.14 Use Case Description Untuk Fungsi managemember Use-Case Name Priority Primary Business Actor Description managemember High Admin Mengelola member yang telah terdaftar, termasuk merubah data user serta menghapus user. Tabel 3.15 Use Case Description Untuk Fungsi verifytopup Use-Case Name Priority Primary Business Actor Description verifytopup High Admin Melakukan konfirmasi request top up dari user setelah dilakukan pengecekan hasil transaksi user.

13 29 Tabel 3.16 Use Case Description Untuk Fungsi accepttransaction Use-Case Name Priority Primary Business Actor Description accepttransaction High Admin Melakukan konfirmasi request transaksi dari user setelah dilakukan pengecekan kecukupan saldo user, untuk kemudian dilakukan pengiriman barang. Tabel 3.17 Use Case Description Untuk Fungsi updatenews Use-Case Name Priority Primary Business Actor Description updatenews Low Admin Melakukan perubahan pada news yang ditampilkan pada halaman interface viewnews.

14 Rancangan Database Class Diagram Gambar 3.5 Class Diagram dan Relasi Tabel Database Gambar 3.5 menggambarkan setiap tabel yang digunakan pada database sistem, tipe data, serta relasi antar tabel Spesifikasi Tabel Tabel 3.18 sampai dengan tabel 3.22 berisi keterangan database berupa nama field, tipe data, serta key yang digunakan.

15 31 Tabel 3.18 Tabel Database User Field Tipe Data Key Null userid int(10) PK tidak username varchar(20) tidak pass varchar(40) tidak firstname varchar(20) tidak lastname varchar(20) tidak varchar(50) tidak Address varchar(50) tidak gender varchar(6) tidak fund decimal(13,2) tidak status varchar(6) tidak phone varchar(20) tidak activation varchar(32) tidak vitability tinyint(1) tidak Tabel 3.19 Tabel Database Transaction Field Tipe Data Key Null TransID int(40) PK tidak userid int(10) FK tidak firstname varchar(20) tidak lastname varchar(20) tidak quantity_items int(40) tidak status varchar(6) tidak penanda varchar(25) tidak hari date tidak type_trans varchar(20) tidak type_topup varchar(20) tidak

16 32 Tabel 3.20 Tabel Database Topup Field Tipe Data Key Null topupid int(10) PK tidak userid int(10) FK tidak bank varchar(20) tidak fullname varchar(100) tidak transdate date tidak quantity int(10) tidak news_sending varchar(100) tidak how_transfer varchar(50) tidak status_topup varchar(50) tidak flag tinyint(1) tidak type varchar(20) tidak Tabel 3.21 Tabel Database Detail Field Tipe Data Key Null id int(40) PK, FK tidak TransID int(40) PK, FK tidak name varchar(20) tidak quantity_per_item int(40) tidak option_name varchar(30) tidak option_values varchar(30) tidak

17 33 Tabel 3.22 Tabel Database newsevent Field Tipe Data Key Null newsid varchar(10) PK tidak image varchar(50) tidak newsname varchar(40) tidak newsdescription varchar(100) tidak eventnewsdate date tidak newsstatus varchar(10) tidak Tabel 3.23 Tabel Database Product Field Tipe Data Key Null id int(40) PK tidak name varchar(50) tidak category varchar(40) tidak description varchar(255) tidak price decimal(13,2) tidak image varchar(50) tidak stok int(10) tidak option_name varchar(30) tidak option_values varchar(30) tidak

18 Rancangan Layar Rancangan Layar Sebelum Login Gambar 3.6 Tampilan Home Pada gambar 3.6 digambarkan tampilan home, yaitu halaman pertama yang diakses oleh user sebelum melakukan login. Pada halaman ini ditampilkan produk-produk terlaris. User dapat memilih kategori lain, seperti tablet, handphone, serta accessories.

19 35 Gambar 3.7 Tampilan News and Event Gambar 3.7 menggambarkan tampilan pada halaman News and Events. Pada halaman ini ditampilkan daftar berita dan acara yang sedang atau akan diadakan. User dapat memilih tampilan antara tapilan tabel atau kalender, serta memilih antara kategori news atau event.

20 36 Gambar 3.8 Tampilan Contact Us Gambar 3.8 menggambarkan tampilan pada halaman Contact Us. Pada halaman ini terdapat peta yang menunjukan lokasi kantor Axioo, serta form yang disediakan bagi user untuk mengajukan pertanyaan.

21 37 Gambar 3.9 Tampilan User Manual Gambar 3.9 menggambarkan tampilan pada halaman User Manual. Pada halaman ini ditampilkan petunjuk pembelian, berupa aksi yang harus dilakukan oleh user.

22 38 Gambar 3.10 Cart Gambar 3.10 menggambarkan tampilan pada halaman Cart. Pada halaman ini ditampilkan produk yang telah dimasukan user ke daftar belanja, beserta harga total perbelanjaan.

23 39 Gambar 3.11 Site Map Halaman Sebelum Login Gambar 3.11 menunjukkan navigasi yang dapat dilakukan sebelum adanya login baik melalui admin atau user. Halaman yang dapat diakses sebelum terjadi login sangat terbatas.

24 Rancangan Layar Setelah User Login diakses. Setelah user melakukan login, akan ada tambahan 2 page yang dapat Gambar 3.12 Top Up Gambar 3.12 menggambarkan halaman Top Up. Pada halaman ini user dapat mengisi form berisi data-data yang diperlukan untuk melakukan top up, serta user dapat melihat profil, dan mengubah profil masing-masing.

25 41 Gambar 3.13 Transaction Gambar 3.13 menggambarkan halaman Transaction. Halaman ini berisi tabel yang berisi daftar transaksi yang sedang berjalan, serta transaksi yang telah sukses ataupun gagal.

26 42 Gambar 3.14 Site Map User Login Gambar 3.14 menjelaskan navigasi yang dapat dilakukan oleh user setelah melakukan login. Setelah login, maka navigasi yang dapat dilakukan akan bertambah banyak. Halaman Top up dan lainnya kini dapat diakses oleh user.

27 Rancangan Layar Setelah Admin Login Gambar 3.15 Admin Home Gambar 3.15 Menggambarkan halaman yang akan diakses oleh admin setelah melakukan login

28 44 Gambar 3.16 Admin Transaction Gambar 3.16 menggambarkan halaman yang muncul saat admin melihat daftar transaksi dari user. Dari sini admin dapat mengatur request dari user, baik menerima request atau menolak.

29 45 Gambar 3.17 All Comment User Gambar 3.17 menggambarkan halaman yang muncul saat admin melihat daftar pertanyaan dari user. Pada halaman ini pertanyaan disajikan dalam bentuk tabel. Admin kemudian dapat menghapus komen apabila sudah selesai dibaca dan dijawab.

30 46 Gambar 3.18 Our Member Gambar 3.18 menggambarkan halaman saat admin akan melakukan penghapusan user. Dari sini setiap user yang terdaftar akan tertulis dalam bentuk tabel. Kemudian admin dapat melakukan penghapusan terhadap member.

31 47 Gambar 3.19 Admin News and Events Gambar 3.19 menggambarkan halaman saat admin akan melakukan edit news dan event. Dari sini setiap event memiliki gambar tersendiri, kemudian admin dapat mengedit maupun menghapus event yang diinginkan.

32 48 Gambar 3.20 Admin Top Up Gambar 3.20 menggambarkan halaman saat admin akan melihat daftar Top Up request dari user. Dari tabel pada halaman ini admin dapat melihat data top up user secara terperinci.

33 49 Gambar 3.21 Site Map Admin Login Gambar 3.21 Menjelaskan navigasi yang akan dilakukan oleh admin setelah melakukan login. Dari home, admin sudah dapat melakukan penambahan pada produk. Setiap halaman akan memiliki fungsi tambahan apabila dilakukan login sebagai admin.

34 Rancangan Program Gambar 3.22 Activity Diagram Penggunaan Program Alur penggunaan sistem dari awal pengaksesan hingga akhir penggunaan program dapat dilihat pada activity diagram gambar Dapat dilihat bahwa user tidak perlu melakukan login untuk memasukkan barang yang diinginkan ke cart.

35 51 Gambar 3.23 Activity Diagram Fungsi Login Pada gambar 3.23 ditunjukan activity diagram bagaimana proses user sewaktu melakukan login.

36 52 Gambar 3.24 Sequence Diagram Fungsi Login Sebelum melakukan pembelian, setiap user harus melakukan login terlebih dulu. Proses yang terjadi saat login digambarkan pada sequence diagram gambar 3.24.

37 53 Gambar 3.25 Activity Diagram Untuk Registrasi Pada gambar 3.25 ditunjukan activity diagram bagaimana proses registrasi user untuk menjadi member. Gambar 3.26 Sequence Diagram Untuk Registrasi

38 54 User yang tidak memiliki akun untuk melakukan login harus melakukan registrasi terlebih dahulu. Proses registrasi dapat dilihat pada gambar Gambar 3.27 Activity Diagram Untuk Edit Profile Pada gambar 3.27 ditunjukan activity diagram bagaimana proses user dapat melakukan pengeditan data pada akun user tersebut.

39 55 Gambar 3.28 Sequence Diagram Untuk Edit Profile Gambar 3.28 menunjukan seqeuence diagram bagaimana user dapat melakukan perubahan terhadap data yang tertera pada akun. Gambar 3.29 Activity Diagram Untuk Top Up Saldo

40 56 Gambar 3.29 menjelaskan bagaimana user melakukan penambahan/top up terhadap saldo mereka dalam bentuk activity diagram. Gambar 3.30 Sequence Diagram Untuk Top Up Saldo Gambar 3.30 menjelaskan sequence diagram dari fungsi top up sistem. Gambar 3.31 Activity Diagram Untuk pembelian produk

41 57 Gambar 3.31 login menggambarkan langkah-langkah yang harus dilewati user untuk melakukan pembelian product, mulai dari hingga checkout yang mengurangi saldo user sesuai total harga pembelian. Gambar 3.32 Sequence Diagram Untuk pembelian produk Interaksi yang dilakukan user dalam melakukan pembelian produk, serta dalam urutan tertentu dapat dilihat pada gambar 3.32

42 58 Gambar 3.33 Activity Diagram Untuk View Product Gambar 3.33 menjelaskan alur aktivitas yang dilakukan user untuk melihat produk, baik semua produk maupun kategori tertentu. Gambar 3.34 Sequence Diagram Untuk View Product Gambar 3.34 menjelaskan interaksi yang dilakukan user dalam melakukan proses lihat produk

43 59 Gambar 3.35 Activity Diagram Untuk Search Product Gambar 3.35 menjelaskan alur aktivitas yang dilakukan user untuk melakukan pencarian produk secara spesifik. Gambar 3.36 Sequence Diagram Untuk Search Product Gambar 3.36 Menunjukkan interaksi yang dilakukan user dalam melakukan pembelian produk

44 60 Gambar 3.37 Activity Diagram Untuk View Cart Gambar 3.37 menjelaskan alur aktivitas yang dilakukan user untuk melihat daftar belanja yang telah dipilih oleh user. Gambar 3.38 Sequence Diagram Untuk View Cart Gambar 3.38 menjelaskan alur aktivitas yang dilakukan user untuk melihat daftar keranjang belanja.

45 61 Gambar 3.39 Activity Diagram Untuk Checkout Gambar 3.39 menjelaskan alur aktivitas yang dilakukan user untuk melakukan checkout, yaitu mengkonfirmasi pembelian. Gambar 3.40 Sequence Diagram Untuk Checkout Gambar 3.40 Menunjukkan interaksi yang dilakukan user dalam melakukan pembelian proses check out.

46 62 Gambar 3.41 Activity Diagram Untuk View News Gambar 3.41 menjelaskan alur aktivitas yang dilakukan user untuk melihat News serta Event. Gambar 3.42 Sequence Diagram Untuk View News Gambar 3.42 menjelaskan interaksi serta urutan yang dilakukan user untuk melihat News serta Event.

47 63 Gambar 3.43 Activity Diagram Untuk View Contact Gambar 3.43 menjelaskan alur aktivitas yang dilakukan user untuk melihat Kontak yang dapat dihubungi user. Gambar 3.44 Sequence Diagram Untuk View Contact Gambar 3.44 Menjelaskan interaksi serta urutan yang dilakukan user untuk melihat Contac US.

48 64 Gambar 3.45 Activity Diagram Untuk Update Product Gambar 3.45 menjelaskan alur aktivitas yang dilakukan admin untuk melakukan update pada daftar produk. Baik menambah maupun mengedit.

49 65 Gambar 3.46 Sequence Diagram Untuk Update Product Gambar 3.46 Menjelaskan alur dan interaksi dalam proses update produk yang dilakukan admin. Gambar 3.47 Activity Diagram Penghapusan Member

50 66 Pada gambar 3.47 menjelaskan proses admin melakukan penghapusan member dalam bentuk activity diagram. Gambar 3.48 Sequence Diagram Penghapusan Member Admin yang akan melakukan penghapusan member akan melalui langkah-langkah yang digambarkan pada gambar 3.50.

51 67 Gambar 3.49 Activity Diagram Untuk Verifikasi Top Up Pada gambar 3.49 menunjukan proses admin dalam melakukan verifikasi top up atau registrasi pembayaran dari member dalam bentuk activity diagram.

52 68 Gambar 3.50 Sequence Diagram Untuk Verifikasi Top Up Pada gambar 3.50 menunjukan proses admin dalam melakukan verifikasi top up atau registrasi pembayaran dari member dalam bentuk sequence diagram. Gambar 3.51 Activity Diagram Untuk Penanganan Transaksi

53 69 Pada gambar 3.51 ditunjukan bagaimana admin menangani request transaksi user setelah user melakukan check out. Gambar 3.52 Sequence Diagram Untuk Penanganan Transaksi Setelah user melakukan checkout transaksi, request transaksi akan dikirim ke admin untuk kemudian ditangani. Penanganan request transaksi user oleh admin dapat dilihat pada gambar 3.52.

54 70 Gambar 3.53 Activity Diagram Untuk Update News Pada gambar 3.53 ditunjukan bagaimana admin melakukan insert/update/delete dari news/events yang telah ada. Gambar 3.54 Sequence Diagram Untuk Update News

55 71 Admin dapat melakukan update berita/news, yaitu dalam bentuk edit, delete, serta menambah berita baru. Pengoperasian update news admin terdapat pada gambar 3.53 dan Rancangan Arsitektur Sistem Gambar 3.55 Deployment Diagram Sistem Seperti yang tertera pada gambar 3.55 di atas, node DB Server merupakan hardware yang menampung semua data dan tabel-tabel pada database secara keseluruhan, dan menggunakan database MySQL. Data dalam database ini kemudian dapat diambil sesuai kebutuhan yang muncul dengan menggunakan web server, dan kemudian akan ditampilkan pada layar monitor user client menggunakan web browser, dengan tampilan berbasis HTML.