1 Pengembangan Transaksi Pemesanan Online Berbasis Iklaster Menggunakan Model View Controller Artikel Ilmiah Diajukan kepada Program Studi Teknik Info...
Pengembangan Transaksi Pemesanan Online Berbasis Iklaster Menggunakan Model View Controller
Artikel Ilmiah
Diajukan kepada Program Studi Teknik Informatika, Fakultas Teknologi Informasi guna memenuhi sebagian dari persyaratan untuk mencapai gelar Sarjana Komputer.
Peneliti: Leo Chandra Hutama (672004119) Suprihadi, S.Si., M.Kom
Program Studi Teknik Informatika Fakultas Teknologi Informasi Universitas Kristen Satya Wacana Salatiga Mei 2013
2
3
4
Pengembangan Transaksi Pemesanan Online Berbasis Iklaster Menggunakan Model View Controller 1)
Leo Chandra Hutama, 2)Suprihadi
Fakultas Teknologi Informasi Universitas Kristen Satya Wacana Jl. Diponegoro 52-60, Salatiga 50711, Indonesia Email : 1)[email protected], 2)[email protected] Abstract Currently, there is no e-commerce application which can fulfill the needs of clusters in Indonesia. Moreover, the conditions of the existing clusters are independently unable to conduct their own e-commerce. Iklaster as existing Cluster Network Systems does not currently have an e-commerce facilities for its members. In this study designed an e-commerce application which is the development of the Iklaster. This application is designed based on client-server model with a three-tier Model View Controller design where the view part is used for client layer, model and controller are business logic placed in the middle layer, and the layer server as the central data transaction systems. Model View Controller design is implemented using the CodeIgnitier framework with PHP programming language and MySQL database. Thus, client-server application that is created can provide an e-commerce application for the clusters as member of Cluster Network System. Keywords: Cluster, E-Commerce, Model View Controller
Abstrak Pada saat ini belum terdapat e-commerce yang dapat memenuhi kebutuhan Klaster di Indonesia. Terlebih lagi kondisi Klaster yang ada belum mampu mengadakan e-commerce secara mandiri. Iklaster sebagai Sistem Jejaring Klaster yang ada saat ini belum memiliki fasilitas e-commerce bagi para anggotanya. Pada penelitian ini dirancang suatu aplikasi e-commerce yang merupakan pengembangan dari Iklaster. E-commerce yang dirancang berbasis client-server menggunakan model three-tier dengan arsitektur Model View Controller, dimana bagian view dipergunakan untuk client layer, model dan controller merupakan business logic ditempatkan pada middle layer, sedangkan server layer sebagai pusat data-data transaksi sistem. Arsitektur Model View Controller diimplementasikan menggunakan framework CodeIgnitier dengan bahasa pemrograman PHP dan basis data MySQL. Dengan demikian, aplikasi client-server yang dihasilkan mampu menyediakan aplikasi e-commerce bagi para Klaster sebagai anggota Sistem Jejaring Klaster. Kata Kunci: Klaster, E-Commerce, Model View Controller
1 2
Mahasiswa Fakultas Teknologi Informasi Universitas Kristen Satya Wacana Staf Pengajar Fakultas Teknologi Informasi Universitas Kristen Satya Wacana
1
1.
Pendahuluan Transaksi perdagangan online atau e-commerce di Indonesia sudah sangat besar, dari riset yang telah dilakukan oleh DailySocial nilai transaksi online Indonesia tahun 2012 mencapai 0,9 miliar Dollar Amerika Serikat (AS) atau sekitar 8,5 triliun Rupiah. Diprediksi pada tahun 2015, nilai e-commerce akan melonjak ke angka 10 miliar Dolar AS atau 95 triliun Rupiah. Namun sayang, potensi yang luar biasa besar ini belum bisa ditangkap sepenuhnya oleh pasar dalam negeri, transaksi online tersebut masih dikuasai oleh pasar luar negeri. Kanal tersebut harus dijadikan platform untuk melakukan kontak langsung dengan konsumen, sehingga akan tercipta word of mouth yang berfungsi mempromosikan produk secara cuma-cuma. Beberapa Klaster yang ada belum sepenuhnya memanfaatkan teknologi informasi dalam proses bisnis atau pengembangan bisnis mereka. Hal ini terbukti bahwa Klaster-Klaster tersebut belum memiliki situs sebagai sarana sistem informasi maupun sarana promosi produk hasil usaha anggota Klaster. Beberapa Klaster yang memiliki anggota berkemampuan teknologi informasi, telah memanfaatkan Blog sebagai sarana media promosi bisnis Klaster mereka Potensi ini dimanfaatkan oleh pemerintah dalam meningkatkan perekonomian lokal, salah satunya pada penguatan kelembagaan Klaster dengan menyediakan media promosi berupa situs seperti sidaklaster.com atau klasterjateng.com, namun media tersebut dinilai kurang karena tidak memenuhi kebutuhan Klaster dalam hal e-commerce dan sebagai media promosi. Dengan kata lain, belum terdapat ecommerce yang bisa memenuhi kebutuhan Klaster di Indonesia karena ecommerce tersebut bukan merupakan suatu e-commerce multi website, sehingga pengelolaannya dibawah kewenangan administrator saja. Hal ini mengakibatkan produk-produk tidak dikelola para anggota Klaster, namun dikelola oleh administrator, sehingga anggota Klaster tidak memiliki kewenangan penuh dalam mengelola produk-produknya. Terlebih lagi kondisi Klaster yang ada belum mampu mengadakan e-commerce secara mandiri. Pada Sistem Jejaring Klaster Iklaster, portal koperasi dan Usaha Mikro Kecil dan Menengah (UMKM) yang menggunakan teknologi web dengan pendekatan marketplace concentrator berbasis social network dan multi website dirasa masih kurang lengkap tanpa adanya suatu sistem e-commerce. Sistem penjualan yang ada pada saat ini dirasa masih kurang efektif dan efisien karena masih berupa sistem konvensional serta belum terdapat media transaksi, hal ini dibutuhkan supaya transaksi dagang dapat tercatat, pembeli juga harus jelas dan dapat dipertanggung-jawabkan, serta pembeli yang telah melakukan pembayaran juga tedapat dokumentasinya. Pada penelitian ini dirancang suatu aplikasi e-commerce yang merupakan pengembangan dari Sistem Jejaring Klaster Iklaster. Aplikasi e-commerce diimplementasikan dengan Model View Controller (MVC), berbasis client-server menggunakan bahasa pemrograman PHP dan basis data MySQL. Dengan demikian aplikasi e-commerce pada Sistem Jejaring Klaster Iklaster mampu memberikan kewenangan transaksi bisnis kepada para Klaster. Sebagai hasilnya, sistem ini mampu menyediakan layanan bagi anggota Klaster untuk dapat menginformasikan produk hasil usaha dan jejaring bisnisnya dengan anggota
2
Klaster yang lain serta perluasan jangkauan pemasaran karena selama ini jangkauan pemasarannya bersifat lokal/regional.
2.
Kajian Pustaka Berdasarkan penelitian sebelumnya dengan judul Perancangan dan Implementasi Sistem Jejaring Klaster Berbasis Web Menggunakan Metode Model View Controller[2] dan Studi Kasus Model Strategi Pemasaran Terintegrasi Berbasis Teknologi Informasi Di Nusa Tenggara Barat[3], maka penelitian ini mendapatkan masukkan tentang penerapan e-commerce dapat menjadi suatu media yang digunakan untuk meningkatkan transaksi yang efektif dan efisien pada Sistem Jejaring Klaster Iklaster sehingga memperpendek jarak perluasan pasar, perluasan jaringan mitra bisnis, dengan kata lain mempercepat pelayanan kepada pelangan, dan pelayanan lebih responsif, serta mengurangi biaya-biaya yang berhubungan dengan kertas, seperti biaya pos surat, percetakan, report, dan sebagainya sehingga dapat meningkatkan pendapatan. Disamping itu dapat memudahkan dalam pengelolaan dan membina hubungan antar Klaster maupun anggota Klaster. E-Commerce merupakan satu set dinamis teknologi, aplikasi, dan proses bisnis yang menghubungkan perusahaan, konsumen, dan komunitas tertentu melalui transaksi elektronik dan perdagangan barang, pelayanan, dan informasi yang dilakukan secara elektronik[4]. E-commerce dapat ditinjau dalam empat perspektif[5]: 1) Perspektif komunikasi: e-commerce adalah pengiriman barang, layanan informasi, atau melalui peralatan elektronik lainnya. 2) Perspektif proses bisnis: e-commerce adalah aplikasi dari teknologi yang menuju otomatisasi dari transaksi bisnis dan aliran kerja. 3) Perspektif online: e-commerce menyediakan kemampuan untuk membeli dan menjual barang ataupun informasi melalui internet dan sarana online. 4) Perspektif layanan: e-commerce merupakan suatu alat yang memenuhi keinginan perusahaan, konsumen, dan manajemen untuk memangkas biaya layanan ketika meningkatkan kualitas barang dan meningkatkan layanan pengiriman. Arsitektur client server adalah arsitektur yang memisahkan client dengan server. Masing-masing client dapat meminta data atau informasi dari server[6]. Pada arsitektur client-server terdapat model two-tier dan model three-tier/multitier. Model two-tier merupakan lingkungan client/server secara tradisional. Pada model ini suatu aplikasi dibagi menjadi dua entitas, yaitu aplikasi client dan aplikasi server. Dalam konfigurasi yang tipikal, pembagian ini juga meliputi pembagian perangkat lunak dan perangkat keras. Aplikasi client umumnya diletakkan pada workstation yang digunakan oleh user, sedangkan server merupakan suatu komputer yang diletakkan di bagian lain pada jaringan[7]. Model arsitektur dari two-tier terdiri dari dua bagian, yaitu : - Layanan Presentasi (Client Tier) Layanan presentasi atau logika antarmuka pengguna ditempatkan pada mesin client. Lapisan ini berfungsi untuk menangani interaksi user dengan aplikasi. - Layanan Data (Data Source Tier)
3
Layanan data merupakan sebuah database server atau DBMS (Database Management Systems) yang menyediakan data bagi lapisan layanan client atau presentasi. Skema model two tier dapat dilihat pada gambar 1.
Gambar 1 Model Two Tier Client Server[7]
Sedangkan model three-tier atau disebut juga multi-tier merupakan langkah pengembangan dari two-tier client/server. Hal ini berarti, setiap aplikasi three-tier adalah client/server, namun tidak semua aplikasi client/server adalah three-tier. Model three-tier menambahkan komponen ketiga diantara aplikasi client dengan aplikasi server yang disebut middle tier atau layanan bisnis. Oleh karena itu, dalam model ini pemrosesan disebarkan di antara tiga lapisan atau lebih yaitu Layanan Presentasi (Client Tier); Layanan Bisnis (Business Tier) yaitu layanan bisnis atau disebut dengan middle tier merupakan sebuah aplikasi yang memberlakukan aturan-aturan bisnis, memproses data, dan mengelola transaksi. Logika yang semula ditempatkan pada client dipindahkan ke dalam komponen lapisan bisnis ini; Layanan Data (Data Source Tier)[7]. Skema model three tier dapat dilihat pada gambar 2.
Gambar 2 Model Three Tier Client Server[7]
Klaster dapat didefinisikan sebagai sebagai grup perusahaan yang berkumpul pada satu lokasi dan bekerja pada sektor yang sama. Dalam hal ini semua yang berhubungan dengan suatu Klaster adalah merupakan hubungan yang berfokus pada aktivitas Klaster itu sendiri, mulai dari pengelolaan produk serta aktivitas lainnya yang mana kesemuanya akan terhubung dalam satu jaringan yang saling terintegrasi dan data dikelola oleh database sebagai media penyimpanan data terpusat[8]. Sedangkan Iklaster merupakan sebuah Sistem Jejaring Klaster, yaitu aplikasi web yang memanfaatkan satu alamat domain yaitu iklaster.com dengan menggunakan pendekatan e-commerce model marketplace concentrator dan konsep social network yang dikembangkan dengan metode prototyping model supaya aplikasi yang dihasilkan sesuai dengan kebutuhan Klaster sebagai sarana promosi dan pemasaran produk bagi anggota Klaster. Konsep social network dipergunakan pada aplikasi ini sebagai sarana berjejaring dan berkomunikasi bisnis antar anggota Klaster[2].
4
Arsitektur Model View Controller merupakan arsitektur yang sangat berguna dalam melakukan pengembangan sebuah sistem. Arsitektur metode Model View Controller dipisahkan dalam layer model, view, dan controller[9].
Gambar 3 Arsitektur model, view, controller[9]
Untuk dapat menerapkan arsitektur Model View Controller digunakan teknologi framework pada bahasa pemrograman. Framework dapat diartikan sebagai alat yang digunakan untuk membantu dan memudahkan pembuatan situs web. Framework dapat diartikan sebagai kumpulan perintah atau fungsi dasar yang dapat membantu menyelesaikan proses-proses yang kompleks, namun pihak developer tetap harus menulis kode sendiri dan harus menyesuaikan dengan lingkungan framework yang digunakan[10]. Tujuan dari pembuatan framework CodeIgniter ini menurut panduan penggunaan adalah untuk menghasilkan framework yang akan dapat digunakan untuk pengembangan proyek pembuatan situs web dengan cara penggunaan kode program secara manual. 3.
Perancangan Sistem Metode pengembangan sistem yang digunakan pada pembuatan aplikasi ini adalah model prototype. Model prototype merupakan suatu teknik untuk mengumpulkan informasi tertentu mengenai kebutuhan-kebutuhan informasi pengguna secara cepat. Dengan metode prototyping ini pengembang dan pelanggan dapat saling berinteraksi selama proses pembuatan sistem. Secara lengkap, alur model prototype akan digambarkan seperti pada gambar 4.
Gambar 4 Prototype Model[11]
Pada tahap listen to customer dilakukan information gathering tentang kebutuhan aplikasi yang akan dibangun. Tahap ini dilakukan wawancara dengan Klaster dan PT Pos Indonesia. Setelah mengetahui kebutuhan umum aplikasi yang akan dibangun maka dilakukan studi pustaka tentang bagaimana membuat suatu
5
aplikasi yang dapat memenuhi kebutuhan Klaster serta metode pengiriman barang menggunakan jasa PT Pos Indonesia. Tahapan selanjutnya dalam metode prototyping yaitu build/revise mock-up atau membangun aplikasi secara cepat. Pada tahap ini dilakukan pembuatan aplikasi secara cepat, lebih memfokuskan pada input output aplikasi sesuai dengan kebutuhan umum yang diketahui pada tahap pertama. Tahap ini menghasilkan prototype 1. Pada tahap Customer Test-Drives Mock-Up ini dilakukan uji dan evaluasi prototype oleh user yaitu Klaster. Evaluasi prototype digunakan untuk mendapatkan umpan balik apakah aplikasi sudah sesuai dengan kebutuhan user. Tahap ini dilakukan oleh tim riset dan Klaster Tani Mahardika di Kab. Demak, serta melakukan uji sistem bersama dengan 35 (tiga puluh lima) UKM (Usaha Kecil dan Menengah) dan Klaster di Jawa Tengah yang dilakukan di Kota Semarang dalam kegiatan Pelatihan Teknis Pemasaran dan Teknologi Informasi. Evaluasi dilakukan dengan cara wawancara dan mengisi kuesioner. Jika hasil uji dan evaluasi prototype belum sesuai dengan kebutuhan user, maka dilakukan proses perbaikan dimulai kembali ke tahap awal dan dilanjutkan ke tahap berikutnya.
Gambar 5 Arsitektur Client-Server Aplikasi E-Commerce Iklaster
Pada Gambar 5 dijelaskan bahwa arsitektur pada aplikasi e-commerce Iklaster menggunakan tiga layer, yaitu client layer, middle layer, server layer. 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 manajemen data dan bussines logic yang merupakan server application serta memiliki aplikasi webservice yang berupa Android Push Message dan Application Programmable Interface (API) tarif PT Pos. Aplikasi mobile client dikelola oleh Android Push Message yang dipergunakan untuk keperluan notifikasi transaksi bisnis yang ada pada e-commerce Iklaster. Proses notifikasi bisnis berbasis android mobile tidak dibahas pada penelitian ini. API dipergunakan untuk berhubungan dengan pihak luar, salah satunya dengan PT Pos untuk mendapatkan data tarif pengiriman. Sedangkan pada server layer berisi sumber-sumber data dan tempat penyimpanan data yang terdapat pada database server.
6
Aplikasi client-server sangat tepat jika dipadukan dengan arsitektur MVC, dimana aplikasi view diletakkan pada client layer, model dan controller diletakkan pada middle layer, sedangkan data pada server layer. Dengan menggunakan arsitektur MVC diharapkan mempermudah dalam proses pengembangan aplikasi karena hanya merubah struktur class yang terkait dengan pengembangan aplikasi. Proses registrasi pelanggan ke dalam e-commerce Iklaster dijelaskan pada Algoritma 1, dimulai dari beranda atau halaman utama, user masuk ke dalam menu registrasi untuk melakukan proses pendaftaran sebagai pelanggan dengan mengisi berbagai form pendaftaran yang tersedia serta menyetujui peraturan yang ada dan melakukan verifikasi keamanan dengan meng-input kode captcha. Jika proses registrasi telah selesai maka data user tersebut akan disimpan ke dalam database pelanggan. Algoritma 1 Proses Registrasi Pelanggan 1. 2. 3. 4. 5.
6. 7.
Mulai. Input data registrasi pelanggan (data login, Proses baca tampilkan Term of Service (TOS). Jika TOS diterima maka lakukan langkah dilakukan langkah 7. Proses generate kode chaptcha (tampilkan chaptcha), jika kode chaptcha benar maka benar maka lakukan langkah 5. Simpan data pelanggan. Selesai.
data info profil). 5,
jika
tidak
diterima
maka
kode chaptcha, masukkan kode lakukan langkah 6, jika tidak
Proses pembelian dijelaskan pada Algoritma 2, dalam melakukan proses pembelian seorang user/pelanggan dapat melihat produk yang dijual dan membeli produk hingga produk tesebut masuk ke dalam daftar belanja beserta total harga belanja dari produk yang dibeli. Jika belanja telah selesai, untuk melanjutkan proses pembelian dapat dilakukan login/registrasi ke portal Iklaster. Setelah user melakukan login, dalam halaman konfirmasi pembelian terdapat pilihan pengiriman produk, apakah produk yang dibeli akan dikirimkan atau tidak. Jika produk yang dibeli tidak dikirim, maka perhitungan jumlah tagihan dihitung dari total belanja berdasarkan Klaster beserta discount jika terdapat potongan harga pada produk yang dibeli. Namun jika produk yang dibeli akan dikirim, maka perhitungan jumlah tagihan dihitung dari total belanja berdasarkan Klaster ditambah dengan biaya pengiriman. Dalam hal ini, perhitungan biaya pengiriman dihitung berdasarkan beberapa indikator. Diantaranya kode pos anggota Klaster sebagai pemlik produk dan kode pos pelanggan/alamat tujuan pengiriman, dengan kata lain ditentukan dari wilayah antara klaster dengan wilayah alamat tujuan pengiriman. Selain hal tersebut, jumlah/bobot produk beserta kemasannya yang akan dikirim ke alamat tujuan juga termasuk dalam indikator perhitungan biaya pengiriman. Dari total pembelian maupun total biaya pengiriman maka didapatkan jumlah tagihan yang harus dibayar, nomor order, dan nomor rekening Klaster/pemilik produk. Jika proses ini telah sampai disini maka sistem akan mengirimkan kode verifikasi ke alamat e-mail pelanggan yang harus dilakukan guna keamanan data transaksi pembelian. Jika kode verifikasi telah di-input, maka order pembelian akan tersimpan ke dalam database pembelian dan status pembeliannya mendapat predikat order. Untuk menunjang pelayanan yang lebih
7
baik diberikan notifikasi pembelian berupa data order pembelian dan dikirimkan kepada pelanggan, pengurus Klaster, dan anggota Klaster sebagai pemilik produk. Algoritma 2 Proses Pembelian 1. 2. 3. 4. 5. 6. 7. 8. 9.
10. 11. 12. 13.
14.
Mulai. Lihat/view produk. Beli produk. Daftar total belanja. Jika user bukan merupakan seorang member maka dilakukan langkah 6, jika user adalah seorang member maka dilakukan langkah 7. Registrasi. Login. Option pengiriman barang. Jika produk diminta dikirim, maka dilakukan langkah 9. Namun jika produk tidak dikirim, maka dilakukan langkah 10. Jumlah tagihan dihitung dari total belanja berdasarkan Klaster beserta discount jika terdapat discount produk yang dibeli ditambah dengan biaya pengiriman. Biaya pengiriman dihitung dari jarak wilayah dengan kode pos sebagai indikatornya, dikalikan dengan jumlah bobot barang beserta bobot kemasan. Jumlah tagihan dihitung dari total belanja berdasarkan Klaster beserta discount jika terdapat discount produk yang dibeli. Simpan data pembelian. Akan dikirimkan kode verifikasi pembelian ke alamat e-mail user. Jika telah dilakukan verifikasi pembelian, maka order pembelian telah tersimpan dan akan dikirimkan notifikasi pembelian (no order, data produk, jumlah qty, jumlah tagihan) kepada Klaster, anggota Klaster, dan pelanggan. Selesai.
Proses konfirmasi pembayaran yang dilakukan oleh pelanggan dijelaskan pada Algoritma 3. Pada proses konfirmasi pembelian, berawal dari login seorang pelanggan, jika login berhasil maka dilakukan input data pembayaran yang terdiri dari nomor order, nomor rekening Klaster, dan jumlah pembayaran yang dilakukan. Jika jumlah pembayaran sama dengan jumlah tagihan yang harus dibayar, maka data pembayaran tersebut akan tersimpan ke dalam database pembayaran dan memilik status pembayaran telah dikonfirmasi. Notifikasi pembayaran akan dikirim kepada pengurus Klaster. Algoritma 3 Proses Konfirmasi Pembayaran Oleh Pelanggan 1. 2. 3. 4. 5. 6. 7. 8.
Mulai. Login. Jika langkah 2 benar dilakukan, maka dilakukan langkah 4. Jika langkah 2 tidak benar dilakukan maka langkah 2 akan diulang. Input data pembayaran (no order, no rekening Klaster, jumlah pembayaran). Jika jumlah pembayaran sesuai dengan jumlah taihan maka dilakukan langkah 6. Simpan data pembayaran. Dikirim notifikasi pembayaran (no order, jumlah transfer, no rekening, nama bank) ke Klaster. Selesai.
Aplikasi e-commerce pada Iklaster ini dirancang menggunakan Unified Modelling Language (UML) sebagai pemodelan sistem. UML menyediakan beberapa diagram dalam proses perancangan sistem. Dalam sistem yang akan dibuat akan digunakan beberapa diagram, yaitu: use case diagram, activity diagram, sequence diagram dan class diagram.
8
Gambar 6 Use Case Diagram aplikasi e-commerce Iklaster
Use case Diagram merepresentasikan keseluruhan kerja sistem secara garis besar dan juga merepresentasikan interaksi antara actor dengan sistem yang dibangun serta menggambarkan fungsionalitas yang dapat diberikan sistem kepada user. Use case diagram menggambarkan interaksi antara actor dengan proses atau sistem yang dibuat. Use case diagram mempunyai beberapa bagian penting seperti: actor, use case,dan relasi. Actor merupakan bagian dari use case yang bertindak sebagai subyek (pelaku) dalam suatu proses. Use case adalah proses proses yang terjadi dalam suatu software. Use Case juga menggambarkan apa yang sedang dilakukan oleh seorang actor. Relasi menggambarkan hubungan antara actor dan use case. Gambar 6 merupakan use case diagram aplikasi ecommerce Iklaster. Dijelaskan bahwa dari aplikasi e-commerce Iklaster terdapat actor Pelanggan yang memiliki hak akses untuk melihat daftar produk, melihat info lengkap produk, melihat profil Klaster, melihat pengumuman dari Klaster, melihat agenda dari Klaster, melakukan pemesanan produk, input komentar, melihat jejaring, mengelola akun profil, mengganti password, melihat keranjang belanja, melihat daftar beli, menghapus item yang dibeli, melakukan checkout, melihat daftar pemesanan, melakukan konfirmasi pembayaran, melihat daftar riwayat transaksi, melihat info portal, galeri info portal, even, dan pengumuman portal.
9
Gambar 7 Activity Diagram Pelanggan
Activity diagram menggambarkan tiap proses yang terjadi dari suatu aktivitas dimulai sampai berhenti, bagaimana masing-masing alir berawal, decision yang mungkin terjadi, dan bagaimana mereka berakhir. Pada gambar 7 merupakan aktivitas yang bisa dilakukan oleh pelanggan. Aktivitas-aktivitas tersebut diantaranya adalah: melakukan proses login; search produk; melihat info lengkap produk; melakukan pemesanan; melihat jejaring produk; input komentar; melihat daftar belanja; melihat daftar pemesanan; melakukan konfirmasi pembayaran; melihat tagihan; melihat daftar Klaster, profil Klaster, melihat agenda Klaster, melihat anggota kelompok Klaster, melihat galeri portal, melihat pengumuman portal dan Klaster, melihat even portal, melakukan live chat, mengelola akun, diantaranya: mengubah info profil, mengubah password, melihat riwayat transaksi, melihat daftar konfirmasi dan melihat resi, serta melakukan proses logout. Sequence diagram menggambarkan interaksi antar obyek di dalam dan di sekitar sistem (termasuk pengguna, display, dan sebagainya) berupa message yang digambarkan terhadap waktu. Sequence diagram terdiri antar dimensi vertikal (waktu) dan dimensi horizontal (objek-objek yang terkait). Pada Gambar 8 merupakan sequence diagram untuk proses pemesanan. Tahap awal proses pemesanan dimulai dengan proses login sebagai pelangan pada beranda portal dengan memasukkan username dan password, jika login berhasil akan masuk ke beranda portal pelanggan, jika login tidak berhasil akan kembali ke beranda portal. Dari beranda portal pelanggan, dapat memilih serta melihat info lengkap produk. Jika pelanggan hendak melakukan pemesanan dapat dilakukan dengan cara klik button pemesanan sehingga produk yang dipesan masuk ke dalam keranjang belanja dan melakukan checkout.
10
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
11
Iklaster yang diimplementasikan menggunakan bahasa pemrograman PHP dan basis data MySQL. Pada tahap implementasi dihasilkan sebuah aplikasi ecommerce 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 pelanggan/member 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 pilih/klik 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,
12
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 ecommerce. 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 ecommerce 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
13
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 kekurangan/kesalahan 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 pengurus/admin 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 lunas/dikonfimasi/siap kirim/telah 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. - Gambar/foto 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.
14
- 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 ecommrce 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
15
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. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16.
login->check_session_pelanggan()) : ?> ...
...
Barang sudah dipesan, silahkan cek keranjang belanja Anda
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. 2. 3. 4. 5. 6. 7. 8. 9.
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
17
suatu fungsi atau modul apakah berjalan sesuai dengan yang diharapkan atau tidak. Pengujian ini fokus pada persyaratan fungsional perangkat lunak, khususnya dilakukan pada menu-menu/layanan 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. No 1.
Aktivitas dan Event Registrasi pelanggan
Tabel 1 Uji Sistem Black Box Input Output Input form registrasi dengan lengkap Input form registrasi dengan tidak lengkap
Link verifikasi registrasi terkirim pada e-mail pelanggan Jika masih terdapat field yang belum diisi dengan lengkap, maka akan muncul alert: field tersebut harus diisi Produk yang dipesan akan masuk ke keranjang belanja
Status Pengujian Valid
Valid
2.
Pemesanan
Dilakukan pesan produk
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 Tagihan pemesanan tampil dalam halaman tagihan dan tampil link konfirmasi pembayaran Tagihan terunduh dalam format PDF Tampil pesan: Pembayaran tidak boleh kurang dari total harga
Valid
Input jumlah pembayaran lebih besar atau sama dengan total tagihan Dilakukan klik order
Konfirmasi diterima dan tampil pada halaman konfirmasi pembayaran Tampil daftar order
Valid
Lihat dokumen order
Dokumen order terunduh dalam format PDF Link konfirmasi tidak tampil lagi pada daftar order
Dilakukan klik link verifikasi pemesanan pada e-mail
Download tagihan 4.
5.
Konfirmasi Pembayaran oleh Pelanggan
Konfirmasi Pembayaran oleh Admin Klaster
Input jumlah pembayaran kurang dari total tagihan
Terima konfirmasi pembayaran
18
Valid
Valid
Valid Valid
Valid
Valid
Valid
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. No
Tabel 2 Hasil Uji sistem Terhadap Responden Jenis Pernyataan Pernyataan Responden (%) STS TS TT S SS
Registrasi Pelanggan 1. Regitrasi sebagai pelanggan mudah diproses. 2. Proses Login mudah dilakukan. Pemesanan Produk 3. Proses pesan produk mudah dilakukan. 4. Detil produk mudah dipahami. Konfirmasi Pembayaran 5. Langkah-langkah konfirmasi pembayaran mudah dilakukan. 6. Informasi tagihan dan pembayaran sudah benar. Petunjuk Pemakaian dan Pesan Kesalahan 7. Pesan kesalahan mudah dipahami. 8. Petunjuk pemakaian aplikasi mudah dimengerti. Rata-rata persentase
6.
-
-
-
75 25
25 75
-
-
-
35 20
65 80
-
-
2,5
47,5
50
-
-
-
80
20
-
-
0.3
90 60 54.1
10 40 45.6
Simpulan Berdasarkan hasil dari perancangan dan pengujian sistem pada aplikasi ecommerce Iklaster, maka dapat disimpulkan bahwa aplikasi e-commerce berbasis client-server menggunakan model three-tier, diterapkan menggunakan arsitektur MVC (Model View Controller), dimana bagian view dipergunakan untuk client layer, model dan controller merupakan business logic ditempatkan pada middle layer, sedangkan server layer sebagai pusat data-data transaksi sistem. Arsitektur MVC diimplementasikan menggunakan framework CodeIgnitier dengan bahasa pemrograman PHP dan basis data MySQL. Dengan demikian, aplikasi clientserver yang dihasilkan mampu menyediakan aplikasi e-commerce bagi para Klaster sebagai anggota Iklaster. Saran pengembangan dari hasil penelitian ini adalah membangun fasilitas report analisis dari transaksi e-commerce Klaster yang dipergunakan sebagai parameter keberhasilan dan manfaat e-commerce bagi para anggota Iklaster.
19
7. [1]
[2]
[3]
[4] [5] [6]
[7]
[8] [9] [10] [11] [12]
Daftar Pustaka Jaka Perdana, Transaksi Online Indonesia 2015 Diprediksi Rp95 triliun Waktunya Brand Besar Geluti E-Commerce, http://themarketeers.com/archives/transaksi-online-indonesia-2015-diprediksi-rp95triliun-waktunya-brand-besar-geluti-e-commerce.html. Diakses tanggal 12 Desember 2012. Suprihadi, Rini Kartika Hudiono, Lina Sinatra, 2012, Rancang Bangun Sistem JeJaring Klaster Berbasis Web Dengan Pedekatan Model ECommerce Marketplace, Salatiga: UKSW Muhammad Tajuddin, Abdul Manan, Ahmat Adil, 2011, Studi Kasus Model Strategi Pemasaran Terintegrasi Berbasis Teknologi Informasi Di Nusa Tenggara Barat, http://kursor.trunojoyo.ac.id/wpcontent/uploads/2012/05/0602_p1.pdf. Diakses tanggal 12 Desember 2012. Purbo, Onno W. & Wahyudi A . Aang, 2001, Mengenai Ecommerce, Jakarta: Elex Media Komputindo. Suyanto, M., 2003, Strategi Periklanan pada E-commerce Perusahaan Top Dunia, Yogyakarta: Penerbit ANDI. Zuliardi Agus, Rusdi Faris, Permana Wim, Yudha W, Joshua R.T., Anwar Gunadi, 2006, Jaringan Client Server, http://www.wimpermana.web.ugm.ac.id/budi_s/wpcontent/client_server.pdf. Diakses tanggal 19 Maret 2013. Pujiyono Wahyu, Timur M.I.A, Savitri, 2004, Perbandingan Model TwoTier dengan Three-Tier dalam Asritektur Client/Server untuk Mengolah Perintah Query pada Aplikasi Database. http://journal.uii.ac.id/index.php/Snati/article/viewFile/1810/1589. Diakses tanggal 12 Desember 2012. Porter, M.E., 1998, On Competition. Boston: Havard Business School Publishing. eNode Inc, 2002, Arsitektur model, view, controller. Yogyakarta : Skripta Media. User_guide, http://codeigniter.com. diakses tanggal 12 Desember 2012. Pressman, 2001, Software Enginering: A Practicioner’s Approach 5th Edition, America: Mc. Graw Hill. Suprihadi, Radius Tanone, 2013, Perancangan E-Commerce Berbasis Web Dan Sistem Notifikasi Transaksi Bisnis Berbasis Mobile pada Sistem Jejaring Klaster, Salatiga: UKSW
