ANALISIS DAN PERANCANGAN SISTEM
3.1 Analisis Sistem yang Berjalan
3.1.1 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.
Pada gambar 3.1 dijelaskan struktur keorganisasian PT. Tera Data Indonusa dalam bentuk diagram.
3.1.2 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
Pada gambar 3.2 digambarkan sistem alur pemesanan yang terjadi oleh customer.
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.
3.1.3 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.
3.1.4 Usulan Pemecahan Masalah
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 3.2.1 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.
Tabel 3.1 Use Case Description Untuk Fungsi “register”
Use-Case Name register
Priority High
Primary Business Actor
User
Description 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 login Priority High Primary Business Actor User
Description Customer yang telah terdaftar kemudian harus melakukan login, sehingga session interaksi perbelanjaan lebih lanjut dapat
Tabel 3.3 Use Case Description Untuk Fungsi “editProfile” Use-Case Name editProfile Priority Low Primary Business Actor User
Description User yang telah login dapat mengubah data user sendiri.
Tabel 3.4 Use Case Description Untuk Fungsi “topUp” Use-Case Name topUp Priority High Primary Business Actor User
Description 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.
Tabel 3.5 Use Case Description Untuk Fungsi “viewProduct” Use-Case Name viewProduct Priority High Primary Business Actor User
Description 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 searchProduct Priority Low Primary Business Actor User
Description User yang sedang berada dalam interface viewProduct dapat melakukan search untuk
Tabel 3.7 Use Case Description Untuk Fungsi “buyProduct” Use-Case Name buyProduct Priority High Primary Business Actor User
Description 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 viewCart Priority High Primary Business Actor User
Description 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
Tabel 3.9 Use Case Description Untuk Fungsi “checkout” Use-Case Name checkout Priority High Primary Business Actor User
Description 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 viewNews Priority Low Primary Business Actor User
Description User dapat melihat update-update mengenai produk-produk serta acara-acara event yang berhubungan dengan perusahaan. Use case
Tabel 3.11 Use Case Description Untuk Fungsi “viewContact” Use-Case Name viewContact Priority Low Primary Business Actor User
Description 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 viewManual Priority Low Primary Business Actor User
Description User dapat melihat Petunjuk atau bantuan untuk melakukan pembelian.
Tabel 3.13 Use Case Description Untuk Fungsi “updateProduct” Use-Case Name updateProduct Priority High Primary Business Actor Admin
Description Mengelola data produk yang dijual, berupa menambah produk baru dan lain-lain.
Tabel 3.14 Use Case Description Untuk Fungsi “manageMember” Use-Case Name manageMember Priority High Primary Business Actor Admin
Description Mengelola member yang telah terdaftar, termasuk merubah data user serta
menghapus user.
Tabel 3.15 Use Case Description Untuk Fungsi “verifyTopup” Use-Case Name verifyTopup Priority High Primary Business Actor Admin
Description Melakukan konfirmasi request top up dari user setelah dilakukan pengecekan hasil
Tabel 3.16 Use Case Description Untuk Fungsi “acceptTransaction Use-Case Name acceptTransaction Priority High Primary Business Actor Admin
Description 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 updateNews Priority Low Primary Business Actor Admin
Description Melakukan perubahan pada news yang ditampilkan pada halaman interface
3.2.2 Rancangan Database 3.2.2.1Class 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.
3.2.2.2Spesifikasi Tabel
Tabel 3.18 sampai dengan tabel 3.22 berisi keterangan database berupa nama field, tipe data, serta key yang digunakan.
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
Email 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
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
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
3.2.3 Rancangan Layar
3.2.3.1Rancangan 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.
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.
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.
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.
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.
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.
3.2.3.2Rancangan Layar Setelah User Login
Setelah user melakukan login, akan ada tambahan 2 page yang dapat diakses.
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.
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.
3.2.3.3Rancangan Layar Setelah Admin Login
Gambar 3.15 Admin Home
Gambar 3.15 Menggambarkan halaman yang akan diakses oleh admin setelah melakukan login
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.
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.
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.
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.
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.
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.
3.2.4 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 3.22. Dapat dilihat bahwa user tidak perlu melakukan login untuk memasukkan barang yang diinginkan ke cart.
Gambar 3.23 Activity Diagram Fungsi Login
Pada gambar 3.23 ditunjukan activity diagram bagaimana proses user sewaktu melakukan login.
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.
Gambar 3.25 Activity Diagram Untuk Registrasi
Pada gambar 3.25 ditunjukan activity diagram bagaimana proses registrasi user untuk menjadi member.
User yang tidak memiliki akun untuk melakukan login harus melakukan registrasi terlebih dahulu. Proses registrasi dapat dilihat pada gambar 3.26.
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.
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 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.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
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.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
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.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.
Gambar 3.41 Activity Diagram Untuk View News
Gambar 3.41 menjelaskan alur aktivitas yang dilakukan user untuk melihat News serta Event.
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.
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.
Gambar 3.46 Sequence Diagram Untuk Update Product
Gambar 3.46 Menjelaskan alur dan interaksi dalam proses update produk yang dilakukan admin.
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.
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.
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.
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
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.
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 3.54.
3.2.5 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.
