PEMBUATAN APLIKASI INTERNET TOKO ONLINE MENGGUNAKAN PLATFORM OPEN LASZLO

SISFO-Jurnal Sistem Informasi

PEMBUATAN APLIKASI INTERNET TOKO ONLINE MENGGUNAKAN PLATFORM OPEN LASZLO Mudjahidin1), Faisal Johan Atletiko2), Sukma Saivani Nabil3) Jurusan Sistem Informasi, Fakultas Teknologi Informasi, Institut Teknologi Sepuluh Nopember Sukolilo, 60111, Surabaya, Indonesia E-mail: [email protected]), [email protected]), [email protected]

Abstrak Komponen utama e-business adalah keberadaan internet dengan halaman webnya. Web telah menjadi platform untuk menjalankan bisnis dengan efektif dan efisien. Salah satu komponen penting dalam e-business dan e-commerce adalah keberadaan sistem toko online yang merupakan ujung tombak perusahaan untuk bertatap muka dengan pelanggannya. Saat ini teknologi HTML yang digunakan untuk membuat toko online semakin kehilangan kemampuannya untuk memenuhi kebutuhan kompleksitas yang semakin tinggi. Teknologi HTML memberikan antarmuka yang kurang baik sehingga memberikan pengalaman (user experience) yang kurang baik pula kepada pelanggan. Permasalahan ini berusaha dijawab dengan adanya kemunculan teknologi baru yaitu Rich Internet Application (RIA). RIA memberikan kemampuan sebuah aplikasi web dengan antarmuka dan kemampuan yang mendekati aplikasi desktop dengan memberikan semua kebaikan aplikasi web. Diantara beberapa platform RIA, terdapat OpenLaszlo yang merupakan platform open source dan telah cukup matang. Di dalam paper ini akan dibangun sebuah aplikasi internet toko online yang menggunakan openlaszlo sebaga platform utamanya. Aplikasi ini merupakan aplikasi yang memberikan fungsi dasar sebuah toko online dengan lebih luwes dan memberikan user experience yang lebih baik.Fungsi seperti katalog digital dan kereta belanja ditampilkan dengan antarmuka yang menarik dan mudah digunakan. Proses checkout dibuat lebih mudah dipahami dan tidak menyesatkan. Aplikasi yang dibangun berbasis RIA yang dibangun dengan platform openLaszlo berhasil memenuhi kebutuhan tersebut dan strategi yang diterapkan dapat mengantisipasi beberapa permasalahan yang mungkin timbul. Aplikasi juga mampu memenuhi kebutuhan akan sebuah proses transaksi pada toko online yang luwes dan memberikan user experience yang jauh lebih baik dari aplikasi HTML tradisional. Selain itu aplikasi dapat diimplementasikan dengan baik pada dua macam runtime yang ada yaitu flash dan dhtml. Kata kunci: e-commerce, Online Store, RIA, Open Laszlo. 1.

PENDAHULUAN

Perkembangan dunia bisnis merambah dunia maya dengan keberadaaan e-business dan e-commerce. Komponen utama e-commerce adalah keberadaan internet dengan halaman web. Web telah menjadi platform untuk menjalankan bisnis dengan efektif dan efisien. Salah satu komponen penting dalam ebusiness dan e-commerce adalah keberadaan sistem toko online atau storefront yang merupakan ujung tombak perusahaan untuk bertatap muka dengan pelanggannya. Untuk perusahaan yang memfokuskan diri pada perdagangan online, toko online merupakan representasi perusahaan di mata pelanggan. Ketika toko online tersebut menarik dan nyaman, maka pelanggan akan tertarik dan kemungkinan untuk kembali dan melakukan transaksi semakin meningkat.

Namun, toko online yang ada saat ini masih mengalami kesulitan untuk menjadikan pengunjung melakukan transaksi hingga selesai. Pengunjung seringkali membiarkan kereta belanjanya di toko online terisi namun tidak sampai melanjutkan memproses menjadi order. Alasan paling sering dikemukakan mengenai kenapa pengunjung meninggalkan kereta belanja mereka di toko online[8] antara lain biaya pengiriman tinggi, berubah pikiran, biaya total tinggi, proses checkout lama, navigasi yang buruk dan waktu unduh yang lama serta proses checkout yang membingungkan. Beberapa dari alasan tersebut merupakan masalah teknis yang ada pada halaman web toko online. Saat ini teknologi Hypertext Markup Language atau HTML yang digunakan untuk membuat toko online semakin kehilangan kemampuannya untuk memenuhi kebutuhan kompleksitas toko online


yang semakin tinggi. Teknologi HTML memberikan antar muka yang kurang baik sehingga memberikan pengalaman (user experience) yang kurang baik kepada pelanggan. Ketika toko online dibangun menggunakan teknologi HTML, untuk melakukan proses checkout secara umum dilakukan dalam beberapa tahap mulai dari melakukan klik pada tombol beli, mengakses kereta belanja, masuk ke halaman checkout dan mengisi data hingga konfirmasi order. Tahapan ini cukup banyak dan dapat membingungkan. Ditambah dengan sulitnya mengoreksi kembali isian yang sudah dilakukan dan tombol back yang semakin membuat bingung. Pengunjung menjadi tidak nyaman dan kemungkinan berkunjung kembali dan melakukan transaksi semakin kecil. Permasalahan ini berusaha dijawab oleh kehadiran sebuah teknologi baru yaitu Rich Internet Application (RIA). RIA memberikan kemampuan sebuah aplikasi web dengan antarmuka dan kemampuan yang mendekati aplikasi desktop. Perkembangan RIA ini masih dalam tahap adaptasi awal namun sudah ada beberapa platform atau framework yang mendukung. Salah satu platform tersebut adalah OpenLaszlo yang bersifat open source dan berbasis teknologi “flash” dan “DHTML”. Mengingat RIA yang kompleksitasnya cukup tinggi diperlukan pendekatan desain dan implementasi yang berbeda serta pengetahuan untuk mengelola dengan baik. Teknologi dan platform yang mendukung RIA sudah cukup banyak, beberapa diantaranya tergolong open source, termasuk OpenLaszlo, yang merupakan teknologi dengan platform baru namun saat ini telah banyak diimplementasikan. Penelitian di bidang platform ini belum terlalu banyak. Beberapa kajian lebih terfokus kepada konsep RIA sendiri atau pada platform yang komersial yang dilakukan oleh vendor pembuatnya. Penelitian ini difokuskan pada pengenalan dan eksplorasi mendalam terhadap kemampuan platform OpenLaszlo yang bersifat open source dalam memberikan kemampuan aplikasi bisnis yang lebih baik.

membangun aplikasi web dengan karakteristik antara fat rich client/server dan thin-poor webbased UI model. Adanya client-side engine tidak menghalangi aplikasi untuk mengimplementasikan model komunikasi sinkronus. Tetapi juga memungkinkan interaksi pengguna dengan aplikasi berjalan secara asinkronus-terlepas dari server. Pengembang bisa memanfaatkan kemungkinankemungkinan ini untuk membuat aplikasi mereka lebih responsif. Inti dari pengembangan RIA adalah memungkinkan aplikasi menjadi lebih responsif, memaksimalkan user experience, dan tetap menghasilkan target yang ingin dicapai. 2.2 Open Laszlo OpenLaszlo (selanjutnya disebut Laszlo) adalah platform RIA yang bebas dan “open source”. Tidak seperti platform atau framework RIA lainnya yang kebanyakan berbayar atau membutuhkan plugin khusus yang berbayar, untuk mengunduh dan menggunakan server Laszlo tidak dipungut biaya apapun. Laszlo terdiri dari compiler dan servlet presentasional pada sisi server, serta sekumpulan service dan class pada sisi client. Sisi client ini disebut LFC, Laszlo Foundation Classess. Secara umum arsitektur Laszlo ditunjukkan pada gambar 1 Aplikasi berbasis OpenLazslo yang ditulis dalam LZX

OpenLazslo compiler/server

S WF

DHTML

Flash

DHTML browser

Embedded Runtime (dalam pengembangan)

Mobile Phone

TV interaktif, peralatan lain

2. STUDI LITERATUR 2.1 Rich Internet Application (RIA) RIA adalah aplikasi web yang mempunyai fitur dan fungsionalitas seperti aplikasi desktop tradisional. RIA merupakan persilangan dari aplikasi web saat ini dengan aplikasi desktop, memindahkan beberapa proses ke sisi client dan tetap melakukan beberapa fungsi pada server. RIA memperkenalkan sebuah lapisan logika yang disebut dengan Client Side Engine, yang berada di antara pengguna dan server web. Dengan adanya lapisan ini memungkinkan pengembang

Gambar 1: Arsitektur Open Laszlo Program dalam Laszlo ditulis dalam bahasa khusus yaitu LZX, yang mana oleh server Laszlo akan dikompilasi untuk kemudian dikeluarkan ke browser dalam bentuk swf atau dhtml sesuai dengan kebutuhan. Tidak perlu menulis baris kode yang berbeda untuk bentuk keluaran yang berbeda. Cukup sekali sudah bisa dijalankan di mana saja. Server Laszlo adalah sebuah java servlet yang berjalan pada kontainer servlet Tomcat atau server aplikasi J2EE.


Baris program Laszlo ditulis dalam LZX. LZX adalah sebuah bahasa berbasis XML (eXtended Markup Language) yang merupakan campuran dari bahasa markup deklaratif dengan bahasa prosedural berorientasi objek, javascript. Bahasa markup deklaratif, berkebalikan dengan bahasa prosedural, mendefinisikan sesuatu, bukan prosedur untuk menciptakan sesuatu. Bahasa markup yang paling dikenal adalah HTML (HyperText Markup Language). Bahasa markup sangat cocok digunakan untuk mendefinisikan antar muka pengguna karena ringkas dan intuitif. Menggunakan tag – tag sebagai penanda. Untuk mendefinisikan sebuah elemen digunakan tag-tag XML dengan beberapa tag sudah tersedia untuk elemen-elemen dasar Laszlo. Sedangkan untuk prosedural atau algoritma pemrograman termasuk menentukan bagaimana perilaku elemen-elemen ini digunakan javascript yang sudah dikenal luas dan didukung oleh sebagian besar pengembang dan browser saat ini.

bisnis yang sama dengan storefront secara fisik. Beberapa layanan tersebut antara lain : − Katalog Produk − Proses pemesanan − Pembayaran − Pemenuhan pesanan Seperti disebutkan sebelumnya sebagian besar layanan ini berlangsung secara online. Tentu saja layanan seperti pemenuhan pesanan tetap dilakukan secara tradisional. 3. ARSITEKTUR APLIKASI Untuk membangun aplikasi toko online diperlukan beberapa komponen teknologi sebagai berikut. 1.

Front End/Client Pada sisi front end diperlukan teknologi berbasis Rich Internet Application untuk memenuhi kebutuhan antarmuka yang luwes. Pada aplikasi digunakan platform OpenLaszlo.

2.

Web Server Untuk membangun sebuah aplikasi web tentunya diperlukan sebuah web server yang dapat mengelola aplikasi web yang dibangun. Pada aplikasi ini digunakan web server Tomcat.

3.

Back End Pada back end dibutuhkan teknologi web yang dapat mengakses basis data yang digunakan dan dapat berinteraksi dengan front end dengan baik. Pada aplikasi yang dibangun digunakan Java Server Pages yang secara alami digunakan bersama server Tomcat.

4.

Basis Data Untuk menyimpan data pada back end diperlukan sebuah basis data yang dapat bekerja dengan baik untuk sebuah aplikasi web. Pada aplikasi ini digunakan basis data MySQL yang populer dan dikembangkan terutama untuk keperluan aplikasi web. MySQL memiliki fitur-fitur yang cukup untuk memenuhi kebutuhan sebuah toko online. Selain itu MySQL merupakan teknologi Open Source.

5.

Streaming Server Untuk memenuhi kemampuan video streaming diperlukan sebuah server yang menyediakan video tersebut dan memberikan koneksi streaming yang diperlukan. File streaming yang dipertukarkan sebisa mungkin yang tidak terlalu besar ukurannya sehingga dapat dengan mudah distreaming. Pada aplikasi ini digunakan format flv dan koneksi RTMP. Server yang digunakan adalah Red5 karena dapat menyediakan koneksi RTMP dan format flv.

2.3 E-commerce Storefront E-commerce adalah penggunaan media elektronik untuk pertukaran informasi antara perusahaan dan eksternal stakeholder. E-commerce melibatkan transaksi komersial yang dilakukan secara elektronik antara organisasi dan individu. Transaksi komersial elektronik termasuk semua yang dimediasi oleh teknologi digital atau dengan kata lain sebagian besar transaksi terjadi melalui internet dan web. Transaksi komersial mencakup pertukaran nilai (uang) antara organisasi dan batasan individu sebagai timbal balik untuk produk atau jasa. Ada banyak model bisnis untuk e-commerce yang sering dipakai saat ini. Beberapa model tersebut antara lain : a. Model Storefront b. Model Auction c. Model Portal d. dan lain-lain Model yang akan digunakan dan dibahas lebih lanjut dalam penelitian ini adalah model storefront. Model storefront atau sering juga disebut e-tailer karena merupakan model yang mengadopsi model bisnis retailer tradisional. Seorang pedagang dapat menawarkan barangnya kepada pelanggan melalui website yang berfungsi sebagai toko atau storefront. Perbedaannya dengan retail tradisional adalah bahwa seorang pelanggan harus terhubung dengan internet untuk melakukan transaksi. Beberapa e-tailer ada yang memiliki toko secara fisik dan juga website untuk penjualan mereka. Namun ada juga yang benar-benar hanya memiliki website sebagai storefront mereka. Secara umum website untuk storefront memberikan layanan


Arsitektur sistem secara garis besar dapat dilihat pada gambar 2

pengiriman, metode pembayaran dan lain-lain. Setelah memberikan data tersebut pelanggan dapat melakukan penempatan order. Metode pembayaran yang didukung adalah melalui bank, kartu kredit dan paypal. Khusus paypal, aplikasi dibatasi tidak sampai membuat fungsi pembayaran dengan masuk ke situs resmi paypal dan mengakomodasi proses pembayaran di situs tersebut. Aplikasi hanya akan menerima nomor paypal pelanggan untuk digunakan mengkonfirmasi bila ada pembayaran yang masuk.

Streaming Server (Red5) Database (MySQL)

Application Wrapper

Akses Data request response

Web Server Tomcat

Client (Laszlo)

Laszlo Presentation Server (LPS)

XML Over HTTP

XML Dataset

Data Binding

Laszlo Application

Gambar 2 : Arsitektur Sistem 4. PERANCANGAN APLIKASI Laudon C Kenneth (2007), mendeskripsikan beberapa aturan bisnis utama pada retailer yang diterjemahkan menjadi fungsi-fungsi pada sebuah toko online. Dari fungsi-fungsi ini akan diambil beberapa fungsi yang sesuai diterapkan pada sebuah front end toko online. Beberapa fungsi seperti pengelolaan persediaan dan site tracking dibatasi untuk tidak dimasukkan karena dianggap sudah termasuk lingkup aplikasi yang lebih luas seperti aplikasi Customer Relationship Management dan lebih pada sisi back end.

4.

Membandingkan Produk dan Melihat Video Iklan Kedua fungsi tersebut merupakan fungsi yang opsional pada sebuah toko online. Dengan menggunakan teknologi RIA, fungsi tersebut dapat lebih dikembangkan.

Pengunjung bisa membandingkan beberapa barang sekaligus dalam satu layar dari banyak barang yang ada dalam daftar produk. Daftar produk tidak mungkin menampilkan semua barang dalam satu layar sekaligus. Terutama mengenai detil informasi setiap barang. Pelanggan dapat memilih beberapa barang untuk dikumpulkan dan dibandingkan dalam satu layar. Desain aplikasi dapat dilihat pada gambar 3.

Fungsi-fungsi yang akan dibangun dalam aplikasi ini adalah : 1.

2.

3.

Katalog Produk Setiap toko online tentunya akan memperlihatkan barang yang dijualnya kepada pengunjung. Barang-barang yang dijual tersebut dapat dikelompokkan dalam beberapa kategori. Pengunjung dapat melihat-lihat dan mengetahui detil informasi setiap barang yang dijual. Daftar atau Kereta Belanja Untuk melakukan transaksi jual beli, proses yang sangat penting adalah mengisi daftar belanja. Pelanggan dapat memilih dari produk yang ditawarkan dan memasukkannya ke daftar belanja dengan mudah. Serta Merubah isi daftar belanja seperti jumlah atau menghapus suatu barang dari daftar dengan mudah pula. Checkout Proses menempatkan order merupakan proses vital dari keseluruhan transaksi jual beli. Setelah pelanggan mengisi daftar belanjanya, untuk melaksanakan pembelian, pelanggan harus menspesifikasikan tentang alamat

Gambar 3: Desain Aplikas 5. UJI COBA Uji coba dilakukan menggunakan perangkat dengan spesifikasi sebagai berikut tipe : PC prosesor : Intel Pentium 4 2.8 GHz sistem operasi : Windows SP2 RAM : 512 MB. Uji coba dilakukan secara lokal diimplementasikan online sepenuhnya.

tanpa

Ada tiga macam uji coba yang dilakukan yaitu uji coba fungsionalitas, uji coba browser dan perbandingan proses. 5.1 Uji Coba Fungsionalitas Uji coba ini dilakukan dengan menguji setiap proses yang ada pada aplikasi apakah dapat berjalan atau tidak sesuai dengan skenario yang ada. Hasil uji coba ditunjukkan pada tabel 1.


Seluruh uji coba telah dilalui dengan berhasil. Setiap fungsi yang diuji dapat berjalan sesuai dengan yang diinginkan. Setiap fungsi juga memberikan respon yang baik. Tabel 1: Uji Coba Fungsionalitas Fungsi yang diuji Hasil uji coba Login Berhasil Register Berhasil Lihat Daftar Produk Berhasil Lihat Detail Produk Telusuri Kategori Cari Produk Bandingkan Produk

Berhasil Berhasil Berhasil Berhasil

Lihat Video Iklan Isi Daftar Belanja Order Barang Lihat Informasi Order


Batalkan Order Ganti Password Edit Profil Pelanggan Lihat Daftar User


Hapus User Lihat Daftar Order Konfirmasi Order

Berhasil Berhasil Berhasil

Platform RIA diperuntukkan untuk dijalankan pada web browser. Setiap browser memiliki kemampuan yang berbeda-beda dalam menampilkan halaman yang dibacanya. Oleh karena itu diperlukan pengetahuan tentang performa aplikasi pada browser yang berbeda. Ujicoba ini akan dilakukan pada browser-browser utama dan populer yaitu Mozilla Firefox, Internet Explorer, Opera dan Safari. Hasil uji coba dapat dilihat pada tabel 2. Tabel 2: Uji Coba Browser

Mozilla Firefox Internet Explorer Opera Safari

SWF

Untuk melakukan perbandingan ini akan digunakan sebuah CMS (Content Management System) untuk e-commerce bernama osCommerce. OsCommerce ini adalah salah satu CMS paling populer untuk membangun sebuah toko online tanpa bersusah payah membuat dari nol. Telah banyak toko online yang memanfaatkan osCommerce ini sebagai basis dari toko onlinenya. Selain fiturnya yang cukup baik, osCommerce memiliki dukungan dengan banyaknya program tambahan dan ekstensi yang dapat diinstall di dalamnya, seperti gambar 4. OsCommerce tergolong CMS yang mudah digunakan dan dapat dikustomisasi baik tampilan maupun fiturnya.

Gambar 4: Tampilan osCommerce Hasil perbandingan dengan osCommerce dapat dilihat pada tabel 3.

5.2 Uji Coba Browser

Browser

5.3 Perbandingan Proses

DHTML

Fungsi Dan Timbul Sedikit Tampilan baik Masalah Tidak Fungsi Dan Sepenuhnya Tampilan baik Muncul Fungsi Dan Timbul Sedikit Tampilan baik Masalah Fungsi Dan Timbul Sedikit Tampilan baik Masalah

Dari perbandingan yang dilakukan terlihat bahwa aplikasi Laszlo lebih superior dalam hal memberikan proses yang tidak terlalu rumit kepada penggunanya. Hal ini terlihat sekali pada proses checkout. Pada osCommerce proses ini benar-benar membingungkan jika tidak terbiasa. Setiap kali ada perubahan maka akan pindah ke halaman yang lain dan kadang jauh dari halaman sebelumnya dalam urutan proses. Jika tidak benar mengikuti urutan proses pada checkout, pelanggan harus mengulangi proses ini dari awal. Hal ini semakin bertambah rumit dengan adanya tombol back pada browser yang dapat membuat pengguna merasa tersesat.


Tabel 3: Perbandingan Proses Laszlo Online Store System

osCommerce

Melihat dan menelusuri Katalog

Satu klik pada kategori yang diinginkan

Satu klik pada kategori yang diinginkan

Isi Daftar Belanja

1. Klik tombol beli 2. Drag dan Drop produk

tombol buy now Klik

Edit jumlah barang dipesan

Edit jumlah pada form

Edit jumlah pada form dan satu klik pada tombol update

Hapus barang dari daftar belanja

1. Satu klik tombol hapus 2. Edit jumlah pada form

− Centang pada form dan satu klik pada tombol update − Edit jumlah pada form dan satu klik pada tombol update

Akses checkout

Satu klik tombol checkout

Satu klik tombol checkout

• Checkout tampil • Jika ada perubahan lakukan pengisian form • Klik konfirmasi order

1. Halaman checkout 2. Halaman Delivery Information 3. Halaman Payment Information 4. Halaman Confirm Order 5. Edit sesuatu akan pindah ke halaman lain 6. Edit cart, pindah ke halaman shopping cart. Jika sudah akan mengulangi proses checkout dari awal lagi.

Proses Checkout

Lihat informasi order

Klik tombol akun dan lihat tab lihat order

Klik My Account

6. KESIMPULAN Berdasarkan hasil uji coba yang telah dilakukan, terdapat beberapa kesimpulan yang dapat diambil, yaitu: 1) Aplikasi yang dibangun sudah mampu memenuhi kebutuhan sebagai aplikasi toko online yang memberikan fungsi-fungsi dasar dari proses bisnis toko online. Aplikasi sudah mampu menampilkan katalog digital dengan navigasi yang baik dan mampu menelusuri katalog berdasarkan kategori. Aplikasi mampu memberikan sebuah fungsi kereta atau daftar belanja digital yang bisa diisi dengan mudah. Aplikasi juga mampu menangani proses checkout dan konfirmasi order oleh pelanggan. Serta memiliki fitur membandingkan produk dan menampilkan video iklan secara streaming.

2) Aplikasi berbasis RIA yang dibangun mampu memenuhi kebutuhan akan sebuah proses transaksi pada toko online yang luwes dan memberikan user experience yang jauh lebih baik dari aplikasi HTML tradisional. Proses yang ada tidak membuat pengguna menjadi tersesat dan bingung hingga memutuskan tidak meneruskan transaksi. 3) Aplikasi berbasis RIA yang dibangun dengan platform openLaszlo dapat diimplementasikan dengan baik pada dua macam runtime yang ada yaitu flash dan dhtml. Beberapa permasalahan yang muncul dalam aplikasi RIA juga dapat diantisipasi dengan baik. 7. DAFTAR PUSTAKA [1] IMSCart. June 2008. Recent Surveys Gives Online Merchant Fifteen Reasons for Shopping Cart Abandonment. www.imscart.com/ ecommerce_software_article_1.htm. [2] Klein, N., Carlson M., MacEwen, G, 2008. Laszlo in Action, Manning Publications. [3] Laszlo Systems, Inc., 2006. OpenLaszlo An Open Architecture Framework for Advanced Ajax Applications, Laszlo Systems. [4] Laudon, K.C., Traver, C.G., 2007. E-commerce: business, technology, society, Pearson Prentice Hall. [5] Loosley, C., 2006. Rich Internet Application: Design, Measurement, and Management Challenges. Keynote Systems. [6] Mullet, K. 2003. The Essence of Effective Rich Internet Application, Macromedia. [7] Wutka, M., Moffet, A., Mittal, K. 2004. Teach Yourself JavaServer Pages 2.0 with Apache Tomcat in 24 Hours. Sams Publishing. [8] "Shopping Cart Abandonment." Internet Merchandising System. 2008 .

PEMBUATAN APLIKASI INTERNET TOKO ONLINE MENGGUNAKAN PLATFORM OPEN LASZLO

Recommend Documents