105

BAB 5

ANALISIS DAN PERANCANGAN SISTEM

5.1. Analisis Sistem

5.1.1. Model Sistem

FRONT END E-COMMERCE

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.

BACK OFFICE

Surat order

Surat jalan

Nota pembayaran

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 e-

commerce 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

Melihat pembelianpelanggan

Memesan

Personalisasi

Login

Melihat FAQ

Melihat produk

Registrasi

Admin

Member

Calon member

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

masing 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

Membuka page FAQ

Admin : <unspecified>

Menambah FAQ Mengupdate FAQ Menghapus FAQ

Member : <unspecified>

Membaca FAQ Mengubah 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

Menu Utama

Product gallery

About us

Sign in

Contact us

FAQ

Tips&trik

Web diaktifkan

Logout

MenuMember

Shopping

Product

Member

My Profile Change password History

Frame Matboard Linen Top Product New Product

Shopping chart Fast shopping

Register

Gambar 5.20 . Navigasi Customer

124

Gambar 5.21 . Navigasi Admin

125

5.7. Struktur Menu

MENU KONSUMEN

Product Sign in Register About Contact FAQ Tips &Trik

Gallery us 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