11
Gambar 8 Sequence Diagram Proses Pemesanan
Class diagram pada Gambar 9 merupakan perancangan class yang akan dibuat pada aplikasi e-commerce Iklaster, meliputi: class registrasi_pelanggan,
class mod_pelanggan, class order_pelanggan, class mod_login, class mod_produk, class mod_klaster, class mod_order, class keranjang, class
produk_anggota, class order_klaster.
Gambar 9 Class Diagram Aplikasi
4. Hasil dan Pembahasan
Setelah melakukan tahap perancangan, langkah selanjutnya adalah mengimplementasikan. Gambar 10 merupakan halaman beranda portal pelanggan
12
Iklaster yang diimplementasikan menggunakan bahasa pemrograman PHP dan basis data MySQL. Pada tahap implementasi dihasilkan sebuah aplikasi e-
commerce Iklaster berbasis web dan telah di-hosting dengan nama domain iklaster.com.
Gambar 10 Tampilan Beranda Portal Pelanggan E-Commerce Iklaster
Pada Gambar 11 ditunjukkan desain proses pembelian produk secara keseluruhan dari pemesanan produk hingga konfirmasi pembayaran pada portal
Iklaster. Diawali dari halaman beranda portal seorang user dapat melakukan registrasi untuk menjadi pelangganmember dari iklaster.com dengan mengisi data
login dan data profil secara lengkap dalam form registrasi yang telah tersedia. Setelah menjadi member dan memiliki akun, user tersebut dapat melakukan
pemesanan produk yang ada pada portal iklaster.com dan mendapatkan beberapa fitur pemesanan, diantaranya adalah keranjang belanja, daftar tagihan, daftar
konfirmasi, serta daftar riwayat pembelian. Dalam proses pemesanan produk dapat dilakukan dengan cara pilihklik pada suatu produk, selanjutnya user akan
dibawa ke dalam halaman Klaster pemilik produk tersebut dan mengisi form pemesanan. Setelah melakkan pemesanan dan mengisi form pemesanan, maka
daftar pemesanan akan muncul pada keranjang belanja pelanggan. Pada keranjang belanja perlu dilakukan proses checkout untuk memastikan proses pemesanan
yang dilakukan. Sebuah e-mail verifikasi akan dikirimkan ke e-mail pelanggan sebagai proses validasi pemesanan. Pada tahap ini pelanggan diminta untuk
melakukan proses verifikasi dengan cara klik link verifikasi yang telah dikirimkan oleh iklaster.com. Jika proses verifikasi dilakukan, maka pelanggan perlu
melakukan proses konfirmasi pembayaran yang dapat dilihat pada daftar konfirmasi pembayaran dengan cara mengisi form konfirmasi pembayaran dengan
benar. Jika proses pembayaran telah dilakukan dan dikonfirmasi oleh pelanggan, maka proses pemesanan telah berhasil dilakukan. Selanjutnya pelanggan hanya
menunggu konfirmasi dari admin Klaster untuk proses pemesanan produknya,
13
proses konfirmasi oleh admin ataupun proses pengiriman dapat dilihat pada status pembelian dalam daftar riwayat pembelian.
Gambar 11 Desain Proses Pembelian Produk Pada Iklaster
E-commerce Iklaster pada dibangun melalui beberapa tahap prototype, tahap perancangan prototype terdiri dari:
Prototype I: Listen to Customer: 16-18 Desember 2012 di Desa Mlatiharjo Kab. Demak.
Pada tahap ini dilakukan information gathering tentang aplikasi yang akan dibangun, melalui metode interview dengan Klaster Tani Mahardika.
Build Revise Mock-Up: Januari-Februari 2013 perancangan aplikasi tahap ke-1. Pada tahap ini dilakukan perancangan sistem dan web design untuk aplikasi e-
commerce. Tahap ini menghasilkan prototype I berupa design portal Iklaster yang diperbaharui dengan aplikasi e-commerce.
Customer Test-Drives Mock-Up: Pertama tanggal 18 Maret 2013 dilakukan oleh tim riset.
Kedua tanggal 20 Maret 2013 dilakukan oleh PT Pos Jawa Tengah. Pada tahap ini, prototype I di uji coba oleh tim riset menghasilkan beberapa
evaluasi, antara lain:
a. Pada aplikasi sebelumnya terdapat 21 tabel, jumlah tabel termasuk e-
commerce menjadi 26 tabel dengan tambahan sebagai berikut: tbl_ pelanggan,
tbl_order, tbl_item_order,
tbl_notif, tbl_konfirmasi_pembayaran.
b. Dari aplikasi yang belum memiliki e-commerce menjadi suatu aplikasi
yang memiliki e-commerce dengan fitur tambahan pada beranda portal
14
berupa registrasi pelanggan dan login pelanggan, pada halaman pelanggan juga ditambahkan profil pelanggan, transaksi pemesanan, keranjang
belanja, proses checkout, dan konfirmasi pembelian. c.
Masih terdapat kekurangankesalahan pada logic prototype1, diantaranya adalah: order pemesanan pelanggan harus di validasi oleh admin Klaster
untuk dapat masuk ke dalam daftar pemesanan pelanggan, nomor rekening yang dicantumkan didalam tagihan masih berupa nomor rekening anggota
Klaster dimana seharusnya adalah nomor rekening milik pengurusadmin Klaster.
d. Selain itu juga terdapat layanan e-commerce yang dirasa kurang lengkap,
antara lain: -
Perlu ditambahkan proses autentifikasi pelanggan dan pilihan metode pengiriman pada proses checkout.
- Belum terdapat fungsi reset password untuk permasalahan lupa akan
password. -
Pada menu pelanggan perlu ditambahkan beberapa layanan, seperti: tagihan untuk order yang belum dikonfirmasi, daftar konfirmasi
pembayaran yang belum dikonfirmasi, riwayat transaksi yang berisi data order yang telah lunasdikonfimasisiap kirimtelah dikirim, menu
untuk mengganti password, dan menambah tabel kode pos pelanggan.
- Pada menu anggota Klaster juga perlu ditambahkan fitur discount jika
ada discount produk yang ditampilkan saat pelanggan memilih produk baik untuk semua pelanggan atau per pelanggan.
- Gambarfoto perlu diberi frame sebagai batas tepi gambar.
- Kode order diganti nomor tagihan dengan format ddmmyy-nomor urut,
contoh: 230413000001. -
Pada menu admin portal, tampilan daftar Klaster perlu diubah dengan struktur field sebagai berikut:
nama klaster | kota | username | Prototype II:
Build Revise Mock-Up: 21 Maret-15 April 2013 perancangan aplikasi tahap ke-2. Pada tahap ini dihasilkan prototype II e-commerce Iklaster.
Customer Test-Drives Mock-Up: 23 April 2013 uji coba prototype II oleh Klaster Tani Mahardika dan Badan Penanaman Modal Daerah Prov. Jawa Tengah di Desa
Mlatiharjo Kab. Demak menghasilkan beberapa evaluasi, antara lain:
a. Reset password untuk semua aktor pada beranda portal telah tersedia.
b. Pada Menu Pembeli sudah terdapat adanya daftar tagihan, daftar
konfirmasi, dan riwayat transaksi. c.
Pada transaksi pembelian, validasi pemesanan oleh admin Klaster telah dihapus dan sudah terdapat adanya fitur pengiriman barang serta proses
autentifikasi pembelian telah tersedia. d.
Selain itu juga terdapat kekurangan pada prototype II, antara lain: -
Belum terdapat adanya kode pos pelanggan. -
Proses perhitungan tarif pengiriman barang menggunakan jasa PT Pos Indonesia belum tersedia.
- Pada admin portal, tampilan daftar Klaster belum ada perubahan.
15
- Pada berkas Tagihan, Konfirmasi Pembayaran dan Resi Pembayaran
belum terdapat Logo Iklaster.com dan Cap serta Tanda Tangan Admin Klaster atau Pengurus Klaster.
Prototype III: Build Revise Mock-Up: 24-26 April 2013 perancangan dan implementasi aplikasi
tahap ke-3. Pada tahap ini dilakukan untuk menyempurnakan kekurangan prototype II dan menyelesaikan web design yang baru.
Customer Test-Drives Mock-Up: 1-4 Mei 2013 uji coba prototype III oleh Klaster Tani Mahardika, serta 35 tiga puluh lima UKM dan Klaster se-Jawa Tengah. Uji
coba prototype III dilakukan di dua lokasi yaitu di Desa Mlatiharjo Kab. Demak dan di Kota Semarang Jawa Tengah dalam kegiatan Pelatihan Teknis Pemasaran
dan Teknologi Informasi yang diselenggarakan oleh Badan Penanaman Modal Daerah Provinsi Jawa Tengah di Kota Semarang[12].
Gambar 12 Arsitektur MVC pada Aplikasi Client-Server
Gambar 12 merupakan arsitektur MVC pada aplikasi client-server pada e- commrce Iklaster. Pada client layer digunakan untuk kebutuhan interface, pada
layer ini memiliki aplikasi web dan mobile bagi pelanggan, anggota Klaster, dan admin Klaster. Pada middle layer berisi bussines logic dan manajemen data, pada
middle layer memiliki aplikasi webserver, android push message, Aplication Programmable Interface API. Aplikasi android push message yang
dipergunakan untuk keperluan notifikasi transaksi bisnis yang ada pada mobile client e-commerce Iklaster dan API dipergunakan untuk berhubungan dengan
pihak luar. Sedangkan pada server layer berisi sumber-sumber data yang terdapat pada database server.
Mekanisme kinerja MVC pada aplikasi yang dibuat terlilhat pada gambar 12, ketika suatu alamat URL dibuka maka akan mengakses controller yang ada
dalam folder controllers untuk menjalankan fungsi. Sebagai contoh, skema arsitektur MVC pada aplikasi adalah saat proses registrasi, yaitu user masuk ke
halaman registrasi yang berada pada halaman depan situs portal Iklaster. Saat melakukan klik pada registrasi akan dipanggil controller registrasi.php dan
controller registrasi.php memanggil view registrasi.php. Setelah user mengisi data dan melakukan klik submit selanjutnya controller melakukan pengecekan
16
username dan nama website apakah sudah pernah digunakan oleh user yang lain atau belum, jika belum maka controller akan masuk ke bagian model. Pada bagian
model data registrasi yang di-input akan disimpan di database, setelah terimpan kembali lagi ke controller. Controller akan mengirim email, setelah mengirim
email lalu controller akan melakukan load view yang berisi silahkan cek email Anda. Jika user membuka email, akan diberikan link untuk masuk ke bagian
controller, pada bagian controller akan diambil username dan dicocokan validasinya dalam bagian model, jika cocok maka controller akan melakukan load
halaman view yang berisi bahwa registrasi Anda berhasil, selanjutnya menunggu validasi dari administrator.
Aplikasi yang dibangun berbasis web dan dibuat menggunakan Framework Codeigniter. Framework Codeigniter adalah framework yang berbasis
Model View Conttroller yang memisahkan aplikasi logika dengan presentasi pada halaman web. Oleh sebab itu diperlukan perancangan untuk masing-masing
model, view dan controller.
Model banyak berisikian bagian-bagian yang mengelola data dengan sistem query database, mengambil dan menyimpan data, menghapus data,
mengurutkan data, mencari data dan proses lainnya yang berhubungan dengan pengelolaan data. Bertugas untuk mengelola berbagai model yang diperlukan oleh
aplikasi.
View bertugas mengelola tampilan aplikasi. Sesuai dengan namanya, view merupakan bagian yang dapat dilihat dan dikelola oleh user. Bagian ini umumnya
terdiri dari tombol-tombol, tabs, check list, combo box, teks, audio, button, list, table, dan lain-lain. Perancangan yang dilakukan pada bagian View
dikelompokkan dalam package-package untuk lebih memudahkan dalam pengembangan.
Controller bertugas untuk menghubungkan antara bagian model dan bagian view. Bagian ini umumnya menangani request yang disampaikan saat user
melalui bagian view untuk mencari padanan model yang sesuai dengan request tersebut. Controller juga bertugas untuk menyampaikan hasil request kembali
kepada user melalui bagian view, misalnya dalam bentuk list, text, table, atau grafik.
Proses pemesanan produk pada e-commerce Iklaster dilakukan oleh seorang pelanggan. Proses pemesanan diatur dalam tampilan request.php pada
folder views dan kode program tersebut dapat dilihat pada kode program 1.
Kode Program 1 Proses Pemesanan Pada request.php
1. ?php ifthis-login-check_session_pelanggan : ?
2. ...
3. tdinput type=submit id=tambah value=Beli Produktd
4. ...
5. pBarang sudah dipesan, silahkan cek keranjang belanja Andap
6. ?php else : ?
7. pSilahkan Login untuk membeli barangp
8. ?php endif; ?
9. tambah.button.clickfunctione{
10. ...
11. ifbtn.val = Barang sudah dipesan {
12. .ajax{
13. url: kirim_request.attraction,
14. type: post,
15. dataType: json,
16. data: kirim_request.serialize,
17
17. beforeSend: function {
18. btn.valSilahkan tunggu...;
19. },
20. success: functiondata {
21. ifdata.error == undefined {
22. div class=keranjang-item + data.item + div.appendTojml-
keranjang; 23.
.keranjang-item.eq0.animate{margin-top:-18}, 500; 24.
.keranjang-item.eq0.queuefunction { 25.
this.remove; 26.
this.dequeue; 27.
}; 28.
btn.valBarang sudah dipesan; 29.
jumlah.attrdisabled, disabled; 30.
Recaptcha.destroy; 31.
}};}}
Penjelasan Kode Program 1 sebagai berikut: Baris 1, pelanggan session checking.
Baris 3, button untuk pemesanan produk. Baris 5, keterangan jika produk sudah dipesan.
Baris 6-8, jika pelanggan belum melakukan proses login. Baris 9, tampilan untuk baris ke-3.
Baris 11-31, menambahkan item produk ke dalam keranjang belanja.
Proses pemesanan produk pada e-commerce Iklaster juga diatur dalam class lihat.php pada folder controllers. Kode program tersebut ditunjukkan pada
kode program 2.
Kode Program 2 Proses Pemesanan Pada Controller lihat.php
1. public function pesanvalue={
2. ifempty_SERVER[HTTP_X_REQUESTED_WITH]
strtolower_SERVER[HTTP_X_REQUESTED_WITH] == xmlhttprequest { 3.
id_produk = this-input-postproduk; 4.
jumlah = this-input-postjumlah; 5.
item_before = this-session-userdatapesanan_klaster ? this- session-userdatapesanan_klaster : array;
6. item_after = item_before + arrayid_produk=jumlah;
7. this-session-set_userdatapesanan_klaster,item_after;
8. response[item] = countitem_after;
9. echo json_encoderesponse;
Penjelasan Kode Program 2 sebagai berikut: Baris 1, merupakan nama fungsi.
Baris 2, mengecek input yang berasal dari ajax. Baris 3, mengambil id produk yang dipesan.
Baris 4, mengambil jumlah produk yang dipesan. Baris 5, mengambil daftar produk yang dipesan sebelumnya.
Baris 6, penggabungan baris ke-5 dengan item yang dipesan saat ini. Baris 7, melakukan update session pesanan klaster dengan baris ke-6.
Baris 8, menghitung jumlah item produk. Baris 9, mengembalikan nilai baris 8 menggunakan format json.
5.
Uji Sistem Uji sistem dilakukan untuk memastikan komponen-komponen dari sistem
telah berfungsi sesuai dengan yang diharapkan. Dipergunakan metode black box untuk melakukan uji sistem, dimana dilakukan pengujian spesifikasi terhadap
18
suatu fungsi atau modul apakah berjalan sesuai dengan yang diharapkan atau tidak. Pengujian ini fokus pada persyaratan fungsional perangkat lunak,
khususnya dilakukan pada menu-menulayanan yang dapat diakses oleh pelanggan pada e-commerce Iklaster. Rincian uji sistem ditunjukkan pada Tabel 1.
Berdasarkan pengujian yang telah dilakukan, diperoleh hasil bahwa aplikasi ini sudah berjalan secara fungsional sesuai dengan yang diharapkan dan tidak
terdapat kesalahan. Dengan demikian, aplikasi e-commerce dapat dipergunakan sebagai hasil pengembangan Iklaster.
Tabel 1 Uji Sistem Black Box No
Aktivitas dan Event
Input Output
Status Pengujian
1. Registrasi
pelanggan Input form registrasi
dengan lengkap Link verifikasi registrasi
terkirim pada e-mail pelanggan
Valid Input form registrasi
dengan tidak lengkap Jika masih terdapat field
yang belum diisi dengan lengkap, maka akan muncul
alert: field tersebut harus diisi
Valid
2. Pemesanan
Dilakukan pesan produk Produk yang dipesan akan
masuk ke keranjang belanja Valid
3. Checkout
Hapus item produk yang telah dipesan
Item produk yang telah dipesan akan terhapus dari
keranjang belanja Valid
Dilakukan klik checkout button
Link verifikasi pemesanan terkirim pada e-mail
pelanggan Valid
Dilakukan klik link verifikasi pemesanan pada
e-mail Tagihan pemesanan tampil
dalam halaman tagihan dan tampil link konfirmasi
pembayaran Valid
Download tagihan Tagihan terunduh dalam
format PDF Valid
4. Konfirmasi
Pembayaran oleh
Pelanggan Input jumlah pembayaran
kurang dari total tagihan Tampil pesan: Pembayaran
tidak boleh kurang dari total harga
Valid
Input jumlah pembayaran lebih besar atau sama
dengan total tagihan Konfirmasi diterima dan
tampil pada halaman konfirmasi pembayaran
Valid 5.
Konfirmasi Pembayaran
oleh Admin Klaster
Dilakukan klik order Tampil daftar order
Valid
Lihat dokumen order Dokumen order terunduh
dalam format PDF Valid
Terima konfirmasi pembayaran
Link konfirmasi tidak tampil lagi pada daftar order
Valid
19
Aplikasi e-commerce pada Iklaster juga diuji kepada 35 tigapuluh lima pengurus dan anggota Klaster se-Jawa Tengah berjumlah 40 orang dalam kegiatan
Pelatihan Teknis Pemasaran dan Teknologi Informasi yang diselenggarakan oleh Badan Penanaman Modal Daerah Provinsi Jawa Tengah di Kota Semarang. Pada
tahap uji terhadap responden dilakukan simulasi pembelian oleh pelanggan. Tabel 2 merupakan hasil dari uji sistem terhadap 40 responden. Pernyataan responden
dikategorikan pada indikator, yaitu: sangat setuju SS, setuju S, tidak tahu TT, tidak setuju TS, sangat tidak setuju STS, dan dihitung dalam prosentase.
Berdasarkan Tabel 2 hasil uji sistem terhadap 40 orang responden diperoleh hasil yaitu sebanyak 45.6 responden menyatakan sangat setuju, 54.1 responden
menyatakan setuju, dan sisanya sebesar 0.3 responden menyatakan tidak tahu. Dengan demikian, aplikasi e-commerce menurut responden sudah dapat
dipergunakan dan sudah sesuai dengan kebutuhan usaha Klaster bersama para anggotanya.
Tabel 2 Hasil Uji sistem Terhadap Responden No
Jenis Pernyataan Pernyataan Responden
STS TS
TT S
SS Registrasi Pelanggan
1. Regitrasi sebagai pelanggan mudah diproses.
- -
- 75
25 2.
Proses Login mudah dilakukan. -
- -
25 75
Pemesanan Produk 3.
Proses pesan produk mudah dilakukan. -
- -
35 65
4. Detil produk mudah dipahami.
- -
- 20
80 Konfirmasi Pembayaran
5. Langkah-langkah konfirmasi pembayaran mudah
dilakukan. -
- 2,5
47,5 50
6. Informasi tagihan dan pembayaran sudah benar.
- -
- 80
20 Petunjuk Pemakaian dan Pesan Kesalahan
7. Pesan kesalahan mudah dipahami.
- -
- 90
10 8.
Petunjuk pemakaian aplikasi mudah dimengerti. -
- -
60 40
Rata-rata persentase 0.3
54.1 45.6
6. Simpulan