1
Implementasi
Live Chat
,
Web View
dan Visualisasi Statistika
Penjualan
dengan
Google Charts
Pada
Framework
Codeigniter
dan
Android
(Studi Kasus: PT. Jogja Organic)
Artikel Ilmiah
Diajukan kepada Fakultas Teknologi Informasi
untuk memperoleh Gelar Sarjana Komputer
Peneliti:
Lukas Herdian Winarto (672014094)
Hindriyanto Dwi Purnomo, ST., MIT., Ph.D.
Ramos Somya, S.Kom., M.Cs.
Program Studi Teknik Informatika
Fakultas Teknologi Informasi
Universitas Kristen Satya Wacana
6 1. Pendahuluan
Persaingan dalam bidang teknologi merupakan persaingan yang sangat ketat, salah satunya adalah Electronic Commerce (e-commerce). Pada jaman sekarang hampir setiap bisnis memiliki website. Perkembangan ini terasa semakin cepat karena dipacu oleh adanya kemudahan pada penyebarluasan informasi baik melalui media cetak maupun melalui jaringan komputer atau internet. Perkembangan teknologi informasi dapat meningkatkan kinerja dan memungkinkan berbagai kegiatan dapat dilaksanakan dengan cepat, tepat dan akurat, sehingga akhirnya akan meningkatkan produktivitas [1].
Jogja Organic merupakan bidang usaha yang memiliki perhatian khusus terhadap pola hidup dan konsumsi makanan sehat termasuk penjualan sayuran organik. Akan tetapi penjualan secara offline tidak dapat menjangkau seluruh pelanggan dan kepuasaan pelanggan. Dengan adanya website dan aplikasi Android
diharapkan penyebarluasan informasi produk dapat menyeluruh ke kota besar serta meningkatkan kepuasaan pelanggan.
Live chat berguna untuk memberikan feedback positif kepada customer yang ingin mengetahui lebih lanjut informasi produk maupun informasi terkait mengenai Jogja Organic. Penerapan live chat di dalam website sudah banyak dipakai untuk berkomunikasi antara admin dengan customer. Alur dari penerapan live chat dapat dilihat pada Gambar 1.
Gambar 1 Diagram Flow ChartLive Chat [2]
Tidak hanya kebutuhan dari segi customer saja yang harus diperhatikan, kebutuhan dari segi admin juga perlu diperhatikan. Pengelolaan website admin yang baik dapat menunjang efektifitas dari web itu sendiri. Salah satunya adalah charts,
7
Penelitian ini mengimplementasikan sebuah live chat berbasis Livezilla yang diintegrasikan dengan website, pembuatan visualisasi statitika penjualan berbasis
Google Charts, serta penerapan Android web view pada web client maupun web
admin. Penerapan web view ini akan memudahkan customer dan admin masuk ke halaman web tanpa harus membuka browser.
2. Tinjauan Pustaka
Penelitian sebelumnya yang pertama adalah ”Pembangunan Aplikasi Text Chatting dan Video Chatting Berbasis Web”, membahas tentang pembuatan aplikasi chatting yang memiliki banyak fitur, salah satunya adalah video call. Untuk membuat suatu aplikasi chatting berbasis web yang memiliki fitur video call adalah dengan menggunakan bantuan dari API yang dimiliki oleh ToxBox. API tersebut memungkinkan user untuk tidak menginstal suatu software apapun pada perangkat yang mereka gunakan [3].
Penelitian kedua dengan judul “Program Aplikasi Perpustakaan Sekolah Berbasis Google Cloud dengan Google App Engine”, menjelaskan tentang aplikasi perpustakaan yang dikembangkan memanfaatkan beberapa API yang disediakan oleh GAE seperti users phyton API, fulltext search, image phyton API, mail phyton API dan eksternal API yaitu google charts tools. Berbagai API yang disediakan pada GAE dapat membantu mempercepat proses pengembangan aplikasi. Pembatasan waktu respon 30 detik terhadap setiap request, ketidaksediaan fungsi aggregate
(count, sum, average, min, max) dan filter data yang membatasi hanya satu ekspresi ketidaksamaan (>, <, >=, <=, <>) pada google query language (GQL), keterbatasan 5 entitas pada transaksi cross-group (XG) transaction, membutuhkan berbagai penyesuaian didalam perancangan struktur data dan program [4].
Penelitian ketiga berjudul “Perancangan Data Warehouse dan Design Dashboard Distributor Barang pada PT. Unilever Cabang Lahat”, dalam penelitian ini membahas tentang perancangan data warehouse dam design dashboard untuk mempermudah pimpinan perusahaan untuk melihat laporan transaksi seperti kategori produk yang paling laku terjual. Metode perancangan data warehouse yang digunakan adalah nine-step methodology serta skema yang tepat adalah schema snow flake yang terdiri dari tabel fakta penjualan dan tabel dimensi (produk, pelanggan, kategori, dan waktu). Desain dashboard menggunakan aplikasi SQL Server Reporting Service (SSRS), yang digunakan untuk membuat report atau laporan dalam bentuk visual [5].
Penelitian keempat berjudul “Rancang Bangun Aplikasi Pembelajaran Haji dan Umrah Berbasis Multimedia pada Smartphone Bersistem Operasi Android”,
8
mobile, maka aplikasi ini dapat dipakai dimana saja dan kapan saja melalui
smartphone berbasis Android [6].
Berdasarkan penelitian-penelitian yang ada terkait implementasi live chat
maupun visualisasi statistika penjualan, maka dilakukan penelitian yang membahas tentang “Implementasi Live Chat, Web View dan Visualisasi Statistika Penjualan dengan Google Charts Pada Framework Codeigniter dan Android (Studi Kasus: PT. Jogja Organic)”. Penelitian yang dilakukan ini membahas tentang Implementasi Live Chat, Web View dan Visualisasi Statistika Penjualan dengan Google Charts Pada
Framework Codeigniter dan Android (Studi Kasus: PT. Jogja Organic), dimana live chat akan diintegrasikan pada website menggunakan software Livezilla yang merupakan pengiriman pesan berbasis client - server secara real time. Enkripsi pada
plaintext dan ciphertext menggunakan pola papan dart sebagai pengacakan. Perbedaan Livezilla dengan system support chat yang lain seperti Mioot adalah
Livezilla memberikan fitur yang lengkap dan tidak berbayar, sedangkan Mioot hanya memberikan free trial selama 10 hari. Livezilla adalah software chat yang memungkinkan kita berinteraksi dengan pengunjung situs [7].
Selanjutnya akan dibahas teknologi yang digunakan sebagai pembuatan visualisasi statistika penjualan. Google Charts adalah sebuah tools yang membantu menyediakan cara untuk memvisualisasi data pada website, mulai dari grafik sederhana sampai dengan yang paling kompleks yaitu hierarchial tree maps. Cara paling mudah untuk menggunakan Google Charts ini adalah dengan menggunakan
javascript sederhana yang diintegrasikan pada website. Javascript yang telah diintegrasikan akan memanggil beberapa library Google Charts [8].
Pada statistik penjualan, setiap tahunnya jumlah data yang terbentuk meningkat pesat. Ketersediaan data dalam jumlah besar ini menuntut dunia bisnis untuk dapat melakukan keputusan. Namun, semua data yang terbentuk tersebut tidak dapat memberikan informasi yang berharga bagi para eksekutif ataupun pengambilan keputusan. Data tersebut harus diorganisir dan dianalisis terlebih dahulu untuk mendapatkan informasi yang dibutuhkan.
Teknik dan tools visualisasi data menawarkan para skateholder untuk dapat memahami informasi yang tersembunyi dalam data yang dimiliki dengan cepat. Berikut ini empat manfaat yang diperoleh perusahaan dan para pengambil keputusan dengan memvisualisasikan data yang mereka miliki : 1) Penggalian Informasi dapat dilakukan dengan cepat; 2) Menemukan hubungan dalam pola antara bisnis dan aktivitas operasional; 3) Mengidentifikasi tren dengan lebih cepat; 4) Berinteraksi langsung dengan data [9].
Codeigniter adalah powerful open source PHP framework yang mudah dikuasai, dibangun untuk PHP programmers yang membutuhkan toolkit sederhana dan baik untuk membuat full featured web applications. Codeigniter adalah MVC
9 3. Metode dan Perancangan Sistem
Pada penelitian ini, akan dilakukan beberapa tahapan penelitian yang secara garis besar terbagi ke dalam lima tahapan, yaitu : 1) Analisis kebutuhan dan pengumpulan data yang diperlukan; 2) Perancangan Sistem; 3) Perancangan Aplikasi; 4) Implementasi dan Pengujian Sistem, serta analisis hasil pengujian; dan 5) Penulisan Laporan Hasil Penelitian [11]. Tahapan yang dilakukan dalam penelitian ini dapat dilihat pada Gambar 2.
Gambar 2 Tahapan Penelitian
Tahap penelitian pada Gambar 2, dapat dijelaskan sebagai berikut: Tahap pertama: Analisis kebutuhan dan pengumpulan data yaitu mencari teknologi apa yang akan diterapkan dalam proses implementasi live chat dan visualisasi statistika penjualan, data rekap penjualan serta mengumpulkan referensi yang mendukung. Tahap kedua: Perancangan sistem meliputi perancangan proses menggunakan Unified Modelling Language (UML), meliputi perancangan use case diagram, sequence diagram, class diagram, serta perancangan arsitektur aplikasi.
Rumusan masalah yang dibahas dalam Implementasi Live Chat, Web View dan Visualisasi Statistika Penjualan dengan Google Charts Pada Framework Codeigniter
dan Android (Studi Kasus: PT. Jogja Organic), yaitu: 1) Live chat hanya bisa digunakan ketika admin online; 2) Visualisasi statistika penjualan dengan data yang banyak; 3) Teknologi yang diterapkan adalah Livezilla dan Google Charts; Tahap ketiga : Perancangan aplikasi : 1) Mengimplementasikan live chat kedalam website
dengan menggunakan Livezilla; 2) Membuat rancangan data statistik yang divisualisasikan dalam bentuk grafik menggunakan Google Charts; Tahap keempat : Pengujian aplikasi dilakukan secara manual dengan mencoba admin dan client online, serta pengecekan data grafik yang ada di web dengan data yang ada di database;
Tahap kelima : Menulis laporan dari hasil penelitian yang sudah dilakukan dari tahap awal hingga tahap akhir. Batasan masalah dalam penelitian ini yaitu : 1) Live chat
akan efektif apabila admin online; 2) Visualisasi statistika penjualan hanya dari tabel
10
transaksi; 3) Data yang ditampilkan hanya data yang diberikan oleh Jogja Organic dari Januari 2017.
Analisis kebutuhan perangkat keras dan spesifikasi perangkat lunak yang digunakan dalam membangun aplikasi ini yaitu: Processor Intel Core i7 4.60 GHz, RAM 16 GB 3000 Mhz, Hardisk 1 TB, SSD 480 GB. Sedangkan perangkat lunak yang digunakan adalah sistem operasi Windows 10 Pro, Cpanel, MySQL, Android Studio, Web browser (dalam penelitian ini digunakan Google Chrome) dan StarUML
untuk membuat UML(Unified Model Language) sistem.
Selanjutnya pada tahap ini dilakukan perancangan sistem serta perancangan
user interface dari model yang akan dibangun. Adapun diagram yang dibuat yaitu
Use Case Diagram. Use Case Diagram dari model yang akan dibangun dapat dilihat pada Gambar 3.
Gambar 3Use Case Diagram Sistem
Gambar 3 merupakan use case diagram sistem yang dibuat. Terdapat 2 (dua) aktor dalam aplikasi yaitu admin dan super admin. Hak akses admin mempunyai 5 (lima) use case yaitu product, faq, customer, charts, dan transaksi. Sedangkan aktor
11
Gambar 4Activity DiagramCharts
Gambar 4 merupakan proses dari tahap awal saat website admin dijalankan, admin melakukan login mulai dari proses memasukkan username dan password
sampai dengan menampilkan grafik visualisasi statistika penjualan. Grafik tersebut diambil dari data transaksi di dalam database.
Gambar 5Activity Diagram Mulai Live Chat
12
Gambar 6Class Diagram Sistem
Gambar 6 merupakan class diagram Jogja Organic yang menggambarkan proses pelayanan admin terhadap customer dan proses transaksi. Terdapat 7 class, dimana admin dan customer harus login terlebih dahulu untuk melakukan suatu proses. Proses transaksi terjadi apabila customer sudah memasukkan produk ke cart
13
Gambar 7Sequence Diagram Sistem
Gambar 7 merupakan squence diagram Jogja Organic yang menggambarkan proses transaksi mulai dari registrasi customer. Setelah customer terdaftar baru dapat membeli, customer memilih produk yang diinginkan kemudian produk tadi akan dicari di dalam database menggunakan fungsi search, apabila stock kosong maka
customer tidak dapat membeli. Namun apabila stock tersedia maka akan ditampilkan
display, kemudian customer dapat membeli dengan menekan tombol checkout dan segera melakukan pembayaran. Setelah proses pembayaran berhasil maka produk yang dibeli akan dikirim.
14
Gambar 8 merupakan desain arsitektur sistem dimana sistem dibuat dalam 2 (dua) bentuk yaitu mobile dan website. Pada aplikasi mobile akan dibuat menjadi 3 (tiga) APK yang terdiri dari 1 APK client, 2 APK admin. Sedangkan pada aplikasi web hanya ada 1 aplikasi yang melakukan fungsi yang sama seperti aplikasi mobile, namun yang membedakan admin dan client adalah alamat web tersebut. Dapat dilihat juga bahwa charts akan ditampilkan berdasarkan data yang disimpan di-database, serta fungsi live chat yang akan memudahkan customer Jogja Organic.
4. Hasil Implementasi dan Pembahasan
Berikut implementasi live chat, web view, dan visualisasi statistika penjualan dengan Google Charts pada framework Codeigniter dan Android (Studi Kasus: PT. Jogja Organic). Terdapat beberapa pengaturan yang harus dilakukan pertama kali saat pembuatan, yaitu pengaturan koneksi ke database. Pengaturan koneksi basis data dilakukan pada fileenv. Pengaturan ini ditunjukkan pada Kode Program 1.
Kode Program 1 Koneksi FrameworkCodeigniter dengan Basis Data
Kode Program 1 merupakan konfigurasi untuk koneksi dengan database MySql pada cpanel. Konfigurasi ini terdapat pada folder
public_html/application/config/database.php. Pada konfigurasi ini dilakukan pengisian untuk hostname, username, password dannama database yang digunakan.
1. $db[„default‟] = array( 2. „dsn‟ => „‟,
3. „hostname‟ => „localhost‟, 4. „username‟ => „jogjaorg_root‟, 5. „password‟ => „12345‟,
6. „database‟ => „jogjaorg_jogjaorganic‟, 7. „dbdriver‟ => „mysqli‟,
15 Kode Program 2 Integrasi Live Chat pada Web Client
Kode Program 2 merupakan contoh code integrasi live chat pada web client. Teknologi live chat yang digunakan menggunakan Livezilla Server, pengembang cukup menuliskan script pada bagian body dari semua tampilan web client yang akan dibuat.
Gambar 9 Tampilan Live Chat pada Saat Admin Online
Gambar 9 merupakan tampilan live chat pada saat admin Jogja Organic. Pada saat admin online maka client dapat mengirimkan pesan secara real time.
1. <div id=”livezilla_tracking” style=”display:none”></div> 2. <script type=”text/javascript”>
3. var script = document.createElement(“script”); 4. script.async = true;
5. script.type = “text/javascript”; 6. var src =
“http://www.jogjaorganik.com/livezilla/server.php?a=2d894&rsqt=track&output=jc rpt&ovlc=IzczYmUyOA__&eca=MQ__&ecsp=MQ__&nse=” + Math.random
7.
setTimeout(“script.src=src;document.getElementById(„livezilla_tracking‟).appen dChild(script)”, 1);
8. </script> 9. <noscript> 10. <img
src=”http://127.0.0.1/jogjaorganic/chat/server.php?a=2d894&rqst=track& output=nojcrpt” width=”0” style=”visibility:hidden;” alt=””>
16
Gambar 10 Diagram Total Transaksi per Barang
Gambar 10 merupakan halaman admin charts yang menampilkan diagram data jumlah transaksi penjualan. Untuk menampilan chart menggunakan plugin Google Charts.
Kode Program 3 Fungsi Menampilkan Data Chart
Kode Program 3 merupakan fungsi Javascript untuk menampilkan data chart
dan konfigurasi tampilan chart. Baris sepuluh adalah fungsi untuk mengambil data dari controlleradministrator.
1. var data = new google.visualization.DataTable(); 2. data.addColumn(„string‟, „Nama Barang‟);
3. data.addColumn(„number‟, „Jumlah Transaksi‟); 4.
5. data.addRows 6. ([
7. <?php
8. $coba = “”, 9. $petik = “”,
10. foreach ($dataPie as $row) 11. {
12. $coba = $coba.”[„$row->nama‟, $row->total],”; 13. }
14. echo substr($coba,0,strlen($coba)-1); 15. ?>
17
Gambar 11 Aplikasi Jogja Organic Client
Gambar 11 adalah aplikasi client Jogja Organic. Pada aplikasi ini, customer
dapat melakukan semua proses yang ada di web seperti live chat, login customer, serta proses transaksi.
Kode Program 4 Implementasi Web View pada Android Studio
1. @Override
2. protected void OnCreate(Bundle savedInstanceState) 3. {
4. super.onCreate(savedInstanceState); 5. setContentView(R.layout.activity_main);
6. mWebView = (WebView) findViewById(R.id.activity_main_webview); 7. textView = (TextView) findViewById(R.id.myTextView);
8.
9. WebSettings webSettings = mWebView.getSettings(); 10. webSettings.setJavaScriptEnabled(true);
11. MainActivity.this.getProgressBar().setProgress(0); 12. MainActivity.this.getProgressBar().setMax(100);
13. mWebView.setWebChromeClient(onProgressChanged(view, newProgress) -> 14. {
15. MainActivity.this.getProgressBar().setProgress(new Progress); 16. if(newProgress == 100)
17. {
18. MainActivity.this.getProgressBar().setVisibility(View.GONE); 19. }
26. public void onProgressStarted(WebView view, String url) 27. {
18
Kode Program 4 merupakan implementasi web view pada Android Studio
untuk membuat apk pada mobile berbasis android. Pada Baris duapuluh dua adalah fungsi untuk me-load alamat url agar dapat ditampilkan di mobile.
Gambar 12 Aplikasi Jogja Organic Admin
Gambar 12 adalah aplikasi admin Jogja Organic. Halaman ini dapat melakukan semua fungsi yang ada pada halaman web admin mulai dari insert,
update, delete produk, menampilkan charts, serta memproses pesanan.
19
Gambar 13 adalah aplikasi live chat Jogja Organic. Pada aplikasi ini, admin dapat membalas pesan yang masuk dari client melalui mobile. Admin perlu mengisikan username dan password dari admin live chat untuk dapat masuk ke dalam aplikasi.
Kode Program 5Settings cookies dan local storage enable
Kode Program 5 merupakan hal yang harus diperhatikan dalam pembuatan
live chat apk. Live chat apk membutuhkan cookies dan penyimpanan lokal yang harus menyala. Pada baris sembilan adalah fungsi untuk menyalakan cookies, sedangkan pada baris empatbelas adalah fungsi untuk mengaktifkan penyimpanan lokal pada
mobile.
Pengujian aplikasi dilakukan dengan menggunakan metode blackbox yaitu menjalankan fungsi-fungsi yang ada pada program dan membandingkan hasil yang diharapkan dengan hasil yang diberikan program. Hasil pengujian yang dilakukan ditunjukkan pada Tabel 1.
Table 1 Hasil Pengujian Blackbox
No Poin Pengujian Hasil yang Diharapkan Hasil Uji
1 Halaman Utama Sistem hanya menampilkan utama, fungsi dari favicon berjalan dengan baik, serta fitur livechat juga dapat digunakan pada aplikasi web dan mobile.
Sesuai yang diharapkan
2 Halaman Register Terdapat proteksi apabila username sudah digunakan. Sesuai yang diharapkan
3 Halaman Login Sistem dapat mengecek username dengan password yang cocok.
Sesuai yang diharapkan
4 Halaman Products Sistem mengambil data dari database berdasarkan kode dan menampilkannya dalam bentuk gambar. Fungsi add to cart juga berjalan dengan lancar pada aplikasi web dan mobile
Sesuai yang diharapkan
5 Menu Shopping Sistem menjalankan proses penjumlahan data barang yang dipilih, buttondelete juga dapat berfungsi dengan baik pada
Sesuai yang
11. mWebView = (WebView) findViewById(R.id.activity_main_webview); 12. WebSettings webSettings = mWebView.getSettings();
20
Cart aplikasi web dan mobile. diharapkan
6 Menu Check out Sistem dapat menyimpan data penerima ke database Sesuai yang diharapkan
7 Administrator
Login
Sistem hanya mengijinkan login untuk admin yang terdapat pada database dengan mengisikan username dan password yang benar.
Sesuai yang diharapkan
8 Administrator Charts
Sistem mengambil data dari database kemudian divisualisasikan ke dalam bentuk charts
Sesuai yang diharapkan
Berdasarkan pengujian yang dilakukan pada aplikasi web dan mobile dapat dilihat hasil pengujian dari setiap fungsi sesuai yang diharapkan, maka disimpulkan bahwa aplikasi ini berjalan dengan baik dan sesuai yang diharapkan serta aplikasi ini berpotensi untuk membantu Jogja Organic dalam menganalisa data penjualan. Pengujian manfaat juga dilakukan dengan wawancara kepada pemilik Jogja Organic. Berdasarkan wawancara dengan pemilik Jogja Organic, dengan adanya aplikasi
website dan mobile memudahkan customer dalam melakukan proses transaksi. Selain itu admin Jogja Organic juga dimudahkan dengan fitur charts.
5. Simpulan
Berdasarkan penelitian yang telah dilakukan, maka dapat disimpulkan bahwa Implementasi Live Chat, Web View, dan Visualisasi Statistika Penjualan dengan
Google Charts Pada Framework Codeigniter dan Android (Studi Kasus : PT. Jogja Organic) dapat mempermudah customer dalam melakukan pembelian dan mempermudah admin untuk melihat pengeluaran dan pemasukan serta berkomunikasi dengan customer. Aplikasi ini dapat membantu customer dalam menanyakan stock
karena adanya fitur live chat sehingga admin dapat langsung membalas pesan yang masuk, serta implementasi Web View yang membuat aplikasi dapat dibuka melalui
smartphone.
Saran pengembangan yaitu aplikasi ini diharapkan dapat berjalan di platform iOS untuk menjangkau konsumen yang menggunakan smartphone yang berbasis iOS. Pengembangan website dengan memperhatikan UI/UX akan memberikan tampilan yang menarik.
6. Daftar Pustaka
[1] Wardiana, W., 2002. Perkembangan Teknologi Informasi di Indonesia. Seminar dan Pameran Teknologi Informasi 2002. Teknik Informatika Bandung: Universitas Komputer Indonesia (UNIKOM).
21
[3] Sutanto, T. W. C., 2011. Pembangunan Aplikasi Text Chatting Dan Video Chatting Berbasis Web. Yoygyakarta: Universitas Atma Jaya Yogyakarta.
[4] Suwarno, H., & Jimmy., 2013. Program Aplikasi Perpustakaan Sekolah berbasis Google Cloud dengan Google App Engine.
[5] Setiawan, W., & Rahman, A., 2015. Perancangan Data Warehouse dan Design Dashboard Distributor Barang pada PT. Unilever Cabang Lahat.
[6] Albani, A. F., 2015. Rancang Bangun Aplikasi Pembelajaran Haji dan Umrah Berbasis Multimedia pada Smartphone Bersistem Operasi Android.
[7] Suwantoro, H., 2008. LiveZilla Support Chat Gratis. http://blog.pusathosting.com/2008/12/28/livezilla-support-chat-gratis/. Diakses pada 26 Maret 2017.
[8] https://developers.google.com/chart/interactive/docs/. Diakses pada 26 Maret 2017.
[9] Aryasa, K. B., 2015. 4 Manfaat Bisnis dari Visualisasi Data http://komangaryasa.com/2015/04/4-manfaat-bisnis-dari-visualisasi-data/. Diakses pada 27 Maret 2017.
[10] Blanco, Jose A., & Upton D., 2009. Improve your PHP coding productivity with the free compact open source MVC Codeigniter framework. Birmingham: Packt Publishing Ltd.
