5
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
6
aplikasi yang dapat memenuhi kebutuhan Klaster serta metode pengiriman barang menggunakan jasa PT Pos Indonesia.
Tahapan selanjutnya dalam metode prototyping yaitu buildrevise 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.
7
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. Mulai.
2. Input data registrasi pelanggan data login, data info profil.
3. Proses baca tampilkan Term of Service TOS.
4. Jika TOS diterima maka lakukan langkah 5, jika tidak diterima maka
dilakukan langkah 7. 5.
Proses generate kode chaptcha tampilkan kode chaptcha, masukkan kode chaptcha, jika kode chaptcha benar maka lakukan langkah 6, jika tidak
benar maka lakukan langkah 5. 6.
Simpan data pelanggan. 7.
Selesai.
Proses pembelian dijelaskan pada Algoritma 2, dalam melakukan proses pembelian seorang userpelanggan 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 loginregistrasi 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 pelangganalamat tujuan pengiriman, dengan
kata lain ditentukan dari wilayah antara klaster dengan wilayah alamat tujuan pengiriman. Selain hal tersebut, jumlahbobot 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 Klasterpemilik 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
8
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. Mulai.
2. Lihatview produk.
3. Beli produk.
4. Daftar total belanja.
5. Jika user bukan merupakan seorang member maka dilakukan langkah 6, jika
user adalah seorang member maka dilakukan langkah 7. 6.
Registrasi. 7.
Login. 8.
Option pengiriman barang. Jika produk diminta dikirim, maka dilakukan langkah 9. Namun jika produk tidak dikirim, maka dilakukan langkah 10.
9. 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.
10. Jumlah tagihan dihitung dari total belanja berdasarkan Klaster beserta
discount jika terdapat discount produk yang dibeli. 11.
Simpan data pembelian. 12.
Akan dikirimkan kode verifikasi pembelian ke alamat e-mail user. 13.
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. 14.
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. Mulai.
2. Login.
3. Jika langkah 2 benar dilakukan, maka dilakukan langkah 4. Jika langkah 2
tidak benar dilakukan maka langkah 2 akan diulang. 4.
Input data pembayaran no order, no rekening Klaster, jumlah pembayaran. 5.
Jika jumlah pembayaran sesuai dengan jumlah taihan maka dilakukan langkah 6.
6. Simpan data pembayaran.
7. Dikirim notifikasi pembayaran no order, jumlah transfer, no rekening, nama
bank ke Klaster. 8.
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.
9
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 e-
commerce 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.
10
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.
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
