105
BAB 5 ANALISIS DAN PERANCANGAN SISTEM 5.1. Analisis Sistem 5.1.1. Model Sistem FRONT END
E-COMMERCE
BACK OFFICE
Surat order
Surat jalan
Nota pembayaran
Gambar 5.1. Model sistem E – commerce berperan sebagai front end yang digunakan untuk penyampaian informasi terbaru dan penerimaan pesanan dari distributor. Setelah pesanan diterima, bagian admin membuat surat order untuk bagian produksi. Setelah bagian produksi selesai membuat pesanan lalu surat jalan akan dikeluarkan kepada bagian pengiriman. Setelah barang diterima, distributor membayar dan akan menerima nota pembayaran. E – commerce menggantikan peran sales yang melayani distributor via tatap muka, telepon ataupun fax. E – commerce dirancang untuk melengkapi sistem penjualan bukan untuk menggantikannya.
106
5.1.1. Tujuan Sistem Untuk
mengimplementasikan
strategi
bisnis
yang
telah
diformulasikan, yakni pemanfaatan teknologi informasi secara optimal untuk
memberikan
kemudahan
bertransaksi
bagi
konsumen
dan
memberikan perusahaan nilai tambah dalam persaingan. maka diperlukan model sistem informasi yang handal dan relatif aman. Sistem informasi yang dibutuhkan oleh PT.KSB adalah e-commerce dimana sistem ini akan mendukung penjualan dan pemasaran produk frame kepada konsumennya. Pengembangan web e-commerce dapat menjadi strategi yang handal karena perusahaan telah memiliki sejumlah distributor tetap yang rutin melakukan transaksi dengan perusahaan. Maka untuk analisis dan perancangan sistem ini akan difokuskan pada pengembangan ecommerce B2B.
5.1.2. Definisi Sistem Untuk meningkatkan pelayanan dan loyalitas konsumen, maka PT. KSB ingin membina hubungan yang lebih erat dengan konsumen dengan memberikan kesempatan kepada konsumen untuk bertransaksi dengan perusahaan melalui situs web. Yang dimaksud konsumen disini adalah para distributor. Sistem ini juga memudahkan admin untuk mengelola isi situs sehingga informasi didalamnya selalu up to date.
107
Setiap distributor cukup online untuk mendapatkan informasi terbaru dari perusahaan. Bagi yang telah mendaftar menjadi member dalam situs web dapat melakukan transaksi kapan dan dimana saja. Selain itu member dapat mengubah profil dan melihat histori pembelanjaan yang telah dilakukan. Distributor dapat memilih produk yang tersedia pada situs web hanya dengan mengklik pada gambar produk (frame, matboard dan linen) dan memasukkan ukuran foto atau gambar yang ingin dibingkai. Sistem akan menghitung harga sesuai dengan jenis dan kuantitas frame yang dipilih berdasarkan ukuran yang dimasukkan. Menu fast shopping juga disediakan untuk mempermudah transaksi bagi member yang sudah hafal dengan kode frame, mat atau linen yang ingin dipesan. Pemesanan dianggap valid apabila distributor masuk ke shopping chart dan mengisi data yang tersedia yaitu tanggal pengiriman yang dikehendaki, tanggal pembayaran (maksimal 2 minggu dari penerimaan barang), dan cara pembayaran. Bagi admin yang mengelola situs akan diberikan user id dan password untuk masuk kebagian admin untuk melihat pembelian konsumen. Selain itu admin dapat menambah, mengubah, dan menghapus informasi pada situs.
108
5.2. Diagram Use Case Web Sistem Transaksi Online
Registrasi
Melihat produk
Calon member
Melihat FAQ
Login
Personalisasi
Member
Memesan
Melihat pembelian pelanggan
Admin
Gambar 5.2. Diagram Use Case
Diagram Use Case diatas menunjukkan hubungan antara aktor dan use case yang dihubungkan dengan sebuah garis yang disebut participation. Pada diagram diatas terdapat 3 aktor yaitu non member, member dan admin. Terdapat 7 use case yang dihubungkan dengan aktor-aktor.
5.3. Diagram Class Web
Gambar 5.3. Diagram Class
Diagram Class diatas menggambarkan 9 class dan hubungan antar class tersebut. Hubungan tersebut berupa asosiasi, generalisasi dan agregasi. Masingmasing class mempunyai atribut dan event yang dapat dilihat pada gambar tersebut.
5.3. Diagram Sequence Web 5.3.1. Sequence Konsumen (member dan nonmember)
Gambar 5.4. Sequence Registrasi
Calon member masuk ke menu register dan mengisi user id dan password lalu dilakukan pengecekan keberadaaan user id dari kelas konsumen. Apabila id sudah ada maka calon member harus mengganti dengan id yang baru. Bila id diterima maka calon member harus mengisi dengan lengkap detil data perusahaan dan data diri contact person. Setelah registrasi diterima, maka member akan dikirimi email dari perusahaan.
Gambar 5.5. Sequence Konsumen Login
Member masuk ke menu sign in lalu mengisi user id dan password untuk login. Validasi password akan dilakukan dari kelas konsumen. Bila pengisian salah maka member perlu memperbaikinya. Bila sesuai maka member dapat masuk ke page member.
Gambar 5.6. Sequence Konsumen Melihat Produk
Konsumen baik member maupun nonmember dapat masuk ke menu produk dan melihat produk-produk yang ditawarkan. Detil produk akan dikirimkan dari kelas produk kepada konsumen.
Gambar 5.7. Sequence Memesan
Member mengisi form pemesanan dengan lengkap lalu dilanjutkan dengan mengisi data pada shopping chart yaitu tanggal pengiriman, tanggal pembayaran dan cara pembayaran. Data member dan data produk yang dipesan akan masuk ke kelas pembelian untuk diproses.
Admin masuk menu login dan harus mengisi user id dan password yang sesuai untuk dapat akses ke page admin. Bila password salah maka admin perlu memperbaikinya agar login sukses.
Gambar 5.11. Sequence Melihat Pemesanan
Admin membuka page status of sold lalu melihat data penjualan konsumen. Detil data berupa data pelanggan dan produk yang dipesan pada database penjualan akan dikirim ke admin. Admin dapat mengubah status barang yang sudah dikirim yaitu status pembayaran, status pengiriman
Gambar 5.9. Sequence Konsumen Melihat FAQ
Konsumen baik member dan nonmember dapat masuk ke menu FAQ dan melihat isi FAQ ( Frequently Ask Question ). Detil data FAQ akan dikirim dari kelas FAQ kepada konsumen
5.3.1. Sequence Admin
Gambar 5.10. Sequence Admin Login
Gambar 5.12. Sequence Admin Personalisasi
Admin dapat masuk ke page admin untuk melihat profil diri dan mengubahnya. Selain itu admin juga dapat mengubah password.
Gambar 5.13. Sequence Admin Melihat Produk
Admin dapat membuka page produk dan mengubah data produk. Admin dapat menambah, update dan menghapus produk.
5.3. Diagram Activity Web
Gambar 5.14. Activity Registrasi
Keterangan: Aktifitas Registrasi dimulai dari
calon member yang mengisi user id dan
password. Sistem akan mengecek validasi user id tersebut, setelah itu calon member dapat mengisi data diri yang lengkap. Bila data yang diisi lengkap maka data akan tersimpan dan calon tersebut akan menerima email dari perusahaan atas keberhasilan registrasi tersebut.
Gambar 5.15. Activity Login
Keterangan: Aktifitas login dapat dilakukan member dan admin yang mengisi user id dan password. Member akan masuk ke page member sedang admin akan masuk ke page admin. Sistem akan mengecek apakah user id sesuai dengan password. Bila valid maka member ataupun dapat langsung masuk kehalaman masing – masing. Apabila member lupa dengan password, member dapat mengklik pada menu forget your password lalu perusahaan akan mengirim email ke member mengenai informasi password tersebut.
119
Member :
Admin :
Membuka page FAQ
Membaca FAQ
Mengubah FAQ
Menambah FAQ
Mengupdate FAQ
Menghapus FAQ
Gambar 5.16. Activity Melihat FAQ
Keterangan: Aktifitas melihat FAQ dapat dilakukan member dan admin. Perbedaannya adalah member hanya dapat membaca isi FAQ sedangkan admin mempunyai hak untuk mengubah isi FAQ baik menambah, update maupun menghapus.
Gambar 5.17. Activity Transaksi
Keterangan: Aktifitas transaksi hanya dapat dilakukan oleh member yaitu konsumen yang telah melakukan registrasi. Member dapat melakukan search produk yang diinginkan ataupun langsung masuk ke page fast shopping untuk memasukkan kode barang yang diinginkan lalu menambahkan pada shopping chart. Pada shopping chart member harus mengisi jumlah produk yang ingin dibeli beserta jenis dan tanggal pembayaran, dan tanggal pengiriman. Admin akan membaca pesanan pada tabel pembelian lalu akan mengubah status barang tersebut bila sudah terkirim.
Gambar 5.18. Activity Personalisasi
Keterangan: Aktifitas personalisasi dapat dilakukan oleh admin dan member yaitu mengubah profil dan mengubah password. Tetapi member melakukan satu aktifitas tambahan yaitu melihat daftar histori pembelanjaan yang telah dilakukan sebelumnya.
Gambar 5.19. Activity Melihat Data Produk
Keterangan: Admin membuka page produk lalu admin dapat melakukan 3 hal yaitu menambah, update dan menghapus daftar produk pada situs.
123
5.6. Diagram Navigasi
Contact us About us
Product gallery
FAQ
Web diaktifkan Menu Utama
Register
Tips&trik
Sign in
MenuMember Logout Member
Shopping
Shopping chart My Profile
Change password
History
Product
Frame
Matboard
Linen
Top Product
New Product
Gambar 5.20 . Navigasi Customer
Fast shopping
124
Gambar 5.21 . Navigasi Admin
125
5.7. Struktur Menu
MENU KONSUMEN
Product
Sign in
Register
Gallery
About
Contact
us
FAQ
Tips &Trik
us
My profile
Member
Change passsword
History
Main Member
Frame Linen Product
Matboard Top Product New Product All
Shopping
Shopping Chart Fast shopping
Logout
Gambar 5.22. Struktur Menu Customer
126
MENU ADMIN
Information
Edit
Add
Employee
Frame
Frame
Member
Linen
Linen
Matboard
Matboard
Status of Sold
FAQ
FAQ
Add employee
Change password
Gambar 5.23. Struktur Menu Admin
5.8. Rancangan Layar 5.8.1. Layar Non Member Ada 7 menu yang dapat dipilih yaitu 1. Product gallery (lihat gambar 5.25) 2. Sign in (lihat gambar 5.27) 3. Register (lihat gambar 5.28) 4. About us (lihat gambar 5.29) 5. Contact us (lihat gambar 5.30) 6. FAQ (lihat gambar 5.31) 7. Tips & trik (lihat gambar 5.32)
127
Gambar 5.24. Layar Home
Gambar 5.25. Layar Product Gallery
Product gallery menampilkan produk frame yang dijual. Ada 3 submenu yaitu: a. Top product Menampilkan frame-frame yang terlaris
128
b. New Product Menampilkan frame yang terbaru c. All product Menampilkan seluruh frame yang dijual
Ada 3 search untuk membantu pengunjung situs web dalam pencarian yaitu: a) Style Frame dikategorikan 4 style yaitu: modern, minimalis,classic, dan Baroque (kembang sudut). b) Color Frame dikelompokkan menjadi 4 warna : gold, silver, natural, antique c) Code frame Dengan memasukkan kode frame maka informasi tentang frame tersebut dapat ditampilkan secara lengkap
Tampilan pop up disamping akan muncul bila salah satu gambar frame diklik. Dengan pop up ini gambar frame diperbesar dan diperjelas. Gambar 5.26. Layar Pop Up Frame
129
Gambar 5.27. Layar Sign in Menu Sign in digunakan member untuk masuk ke page member untuk melakukan transaksi dan melihat informasi lebih. Member perlu mengisi user id dan password yang sama sewaktu mereka melakukan register.
Gambar 5.28. Layar Register
130
Menu register digunakan bagi distributor yang ingin menjadi member dan melakukan transaksi. Ada 3 informasi yang diisi yaitu: o
User id dan password yang digunakan untuk sign in
o
Personal information Data orang yang dapat dihubungi pada perusahaan distributor
o
Company information Informasi mengenai perusahaan distributor
Setelah register member akan mendapatkan email sebagai informasi bahwa perusahaannya telah menjadi member pada situs web Brownlis.
Gambar 5.29. Layar About Us Menu about us menampilkan sekilas info tentang perusahaan beserta visi misinya
131
Gambar 5.30. Layar Contact Us Menu ini diperlukan untuk menghubungi perusahaan
Gambar 5.31. Layar FAQ Menu ini berisi tentang tanya jawab seputar frame seperti bagaimana Memilih, merawat frame dll
132
Gambar 5.32. Layar Tips & Trik
Menu ini berisi tentang tips dan trik seperti cara merakit frame sendiri, dll. Submenu tips trik ini dapat diklik untuk melihat isinya.
5.8.2. Layar Member
Gambar 5.33. Layar Member
