T1__Full text Institutional Repository | Satya Wacana Christian University: Implementasi Live Chat, Web View dan Visualisasi Statistika Penjualan dengan Google Charts pada Framework Codeigniter dan Android: Studi Kasus PT. Jogja Organic T1 Full text
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
Salatiga
2017
1
2
3
4
5
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 Chart Live 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,
charts pada website berfungsi untuk memudahkan admin dalam membaca jumlah
barang terjual, pemasukan, pengeluaran sehingga pembukuan keuangan dapat tertata
dengan rapi.
6
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 (>, =, „‟,
3.
„hostname‟ => „localhost‟,
4.
„username‟ => „jogjaorg_root‟,
5.
„password‟ => „12345‟,
6.
„database‟ => „jogjaorg_jogjaorganic‟,
7.
„dbdriver‟ => „mysqli‟,
8.
„dbprefix‟ => „‟
9.
„pconnect‟ => FALSE,
10.
„db_debug‟ => FALSE,
11.
„cache_on‟ => FALSE,
12.
„cachedir‟ => „‟
13.
„char_set‟ => „utf8‟,
14.
„dbcollat‟ => „utf8_general_ci‟,
15.
„swap_pre‟ => „‟
16.
„encrypt‟ => FALSE,
17.
„compress‟ => FALSE,
18.
„stricton‟ => FALSE,
19.
„failover‟ => array(),
20.
„save_queries‟ => TRUE
21. );
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 dan nama database yang digunakan.
14
Kode Program 2 Integrasi Live Chat pada Web Client
1.
2.
3.
4.
5.
6.
7.
var script = document.createElement(“script”);
script.async = true;
script.type = “text/javascript”;
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
setTimeout(“script.src=src;document.getElementById(„livezilla_tracking‟).appen
dChild(script)”, 1);
8.
9.
10.
11.
12.
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.
15
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
1.
2.
3.
var data = new google.visualization.DataTable();
data.addColumn(„string‟, „Nama Barang‟);
data.addColumn(„number‟, „Jumlah Transaksi‟);
4.
5. data.addRows
6. ([
7.
16. ]);
Kode Program 3 merupakan fungsi Javascript untuk menampilkan data chart
dan konfigurasi tampilan chart. Baris sepuluh adalah fungsi untuk mengambil data
dari controller administrator.
16
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.
2.
3.
4.
5.
6.
7.
@Override
protected void OnCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mWebView = (WebView) findViewById(R.id.activity_main_webview);
textView = (TextView) findViewById(R.id.myTextView);
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
WebSettings webSettings = mWebView.getSettings();
webSettings.setJavaScriptEnabled(true);
MainActivity.this.getProgressBar().setProgress(0);
MainActivity.this.getProgressBar().setMax(100);
mWebView.setWebChromeClient(onProgressChanged(view, newProgress) ->
{
MainActivity.this.getProgressBar().setProgress(new Progress);
if(newProgress == 100)
{
MainActivity.this.getProgressBar().setVisibility(View.GONE);
}
);
21.
22.
23.
24.
25.
26.
27.
mWebView.loadUrl(http://www.jogjaorganik.com/);
mWebView.setWebViewClient(new MyAppWebClient()
{
@Override
public void onProgressStarted(WebView view, String url)
{
28.
29.
}
30.
});
31. }
17
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.
Gambar 13 Aplikasi Live Chat Jogja Organic
18
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 5 Settings cookies dan local storage enable
1.
2.
3.
4.
5.
6.
@Override
protected void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);
getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,
WindowManager.LayoutParams.FLAG_FULLSCREEN);
7.
8.
9.
setContentView(R.layout.activity_main);
CookieManager.getInstance().setAcceptCookie(true);
10.
11.
12.
13.
14.
mWebView = (WebView) findViewById(R.id.activity_main_webview);
WebSettings webSettings = mWebView.getSettings();
webSettings.setJavaScriptEnabled(true);
webSettings.setDomStorageEnabled(true);
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, button delete juga dapat berfungsi dengan baik pada
Sesuai
19
yang
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
Administrator
Charts
Sistem mengambil data dari database
divisualisasikan ke dalam bentuk charts
Sesuai
yang
diharapkan
8
kemudian
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).
Mioot.
2003.
How
live
support
software
for
website
works?.
http://www.mioot.com/how-live-support-software-works.php. Diakses pada 25 Maret
2017.
[2]
20
[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.
Albani, A. F., 2015. Rancang Bangun Aplikasi Pembelajaran Haji dan Umrah
Berbasis Multimedia pada Smartphone Bersistem Operasi Android.
Suwantoro,
H.,
2008.
LiveZilla
Support
Chat
Gratis.
http://blog.pusathosting.com/2008/12/28/livezilla-support-chat-gratis/. Diakses pada
26 Maret 2017.
[6]
[7]
[8]
[9]
https://developers.google.com/chart/interactive/docs/. Diakses pada 26 Maret
2017.
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.
[11]
Hasibuan, Zainal A., 2007. Metodologi Penelitian Pada Bidang Ilmu Komputer dan
Teknologi Informasi: Konsep, Teknik, dan Aplikasi. Jakarta: Ilmu Komputer
Univesitas Indonesia.
21
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
Salatiga
2017
1
2
3
4
5
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 Chart Live 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,
charts pada website berfungsi untuk memudahkan admin dalam membaca jumlah
barang terjual, pemasukan, pengeluaran sehingga pembukuan keuangan dapat tertata
dengan rapi.
6
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 (>, =, „‟,
3.
„hostname‟ => „localhost‟,
4.
„username‟ => „jogjaorg_root‟,
5.
„password‟ => „12345‟,
6.
„database‟ => „jogjaorg_jogjaorganic‟,
7.
„dbdriver‟ => „mysqli‟,
8.
„dbprefix‟ => „‟
9.
„pconnect‟ => FALSE,
10.
„db_debug‟ => FALSE,
11.
„cache_on‟ => FALSE,
12.
„cachedir‟ => „‟
13.
„char_set‟ => „utf8‟,
14.
„dbcollat‟ => „utf8_general_ci‟,
15.
„swap_pre‟ => „‟
16.
„encrypt‟ => FALSE,
17.
„compress‟ => FALSE,
18.
„stricton‟ => FALSE,
19.
„failover‟ => array(),
20.
„save_queries‟ => TRUE
21. );
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 dan nama database yang digunakan.
14
Kode Program 2 Integrasi Live Chat pada Web Client
1.
2.
3.
4.
5.
6.
7.
var script = document.createElement(“script”);
script.async = true;
script.type = “text/javascript”;
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
setTimeout(“script.src=src;document.getElementById(„livezilla_tracking‟).appen
dChild(script)”, 1);
8.
9.
10.
11.
12.
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.
15
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
1.
2.
3.
var data = new google.visualization.DataTable();
data.addColumn(„string‟, „Nama Barang‟);
data.addColumn(„number‟, „Jumlah Transaksi‟);
4.
5. data.addRows
6. ([
7.
16. ]);
Kode Program 3 merupakan fungsi Javascript untuk menampilkan data chart
dan konfigurasi tampilan chart. Baris sepuluh adalah fungsi untuk mengambil data
dari controller administrator.
16
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.
2.
3.
4.
5.
6.
7.
@Override
protected void OnCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mWebView = (WebView) findViewById(R.id.activity_main_webview);
textView = (TextView) findViewById(R.id.myTextView);
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
WebSettings webSettings = mWebView.getSettings();
webSettings.setJavaScriptEnabled(true);
MainActivity.this.getProgressBar().setProgress(0);
MainActivity.this.getProgressBar().setMax(100);
mWebView.setWebChromeClient(onProgressChanged(view, newProgress) ->
{
MainActivity.this.getProgressBar().setProgress(new Progress);
if(newProgress == 100)
{
MainActivity.this.getProgressBar().setVisibility(View.GONE);
}
);
21.
22.
23.
24.
25.
26.
27.
mWebView.loadUrl(http://www.jogjaorganik.com/);
mWebView.setWebViewClient(new MyAppWebClient()
{
@Override
public void onProgressStarted(WebView view, String url)
{
28.
29.
}
30.
});
31. }
17
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.
Gambar 13 Aplikasi Live Chat Jogja Organic
18
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 5 Settings cookies dan local storage enable
1.
2.
3.
4.
5.
6.
@Override
protected void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);
getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,
WindowManager.LayoutParams.FLAG_FULLSCREEN);
7.
8.
9.
setContentView(R.layout.activity_main);
CookieManager.getInstance().setAcceptCookie(true);
10.
11.
12.
13.
14.
mWebView = (WebView) findViewById(R.id.activity_main_webview);
WebSettings webSettings = mWebView.getSettings();
webSettings.setJavaScriptEnabled(true);
webSettings.setDomStorageEnabled(true);
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, button delete juga dapat berfungsi dengan baik pada
Sesuai
19
yang
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
Administrator
Charts
Sistem mengambil data dari database
divisualisasikan ke dalam bentuk charts
Sesuai
yang
diharapkan
8
kemudian
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).
Mioot.
2003.
How
live
support
software
for
website
works?.
http://www.mioot.com/how-live-support-software-works.php. Diakses pada 25 Maret
2017.
[2]
20
[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.
Albani, A. F., 2015. Rancang Bangun Aplikasi Pembelajaran Haji dan Umrah
Berbasis Multimedia pada Smartphone Bersistem Operasi Android.
Suwantoro,
H.,
2008.
LiveZilla
Support
Chat
Gratis.
http://blog.pusathosting.com/2008/12/28/livezilla-support-chat-gratis/. Diakses pada
26 Maret 2017.
[6]
[7]
[8]
[9]
https://developers.google.com/chart/interactive/docs/. Diakses pada 26 Maret
2017.
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.
[11]
Hasibuan, Zainal A., 2007. Metodologi Penelitian Pada Bidang Ilmu Komputer dan
Teknologi Informasi: Konsep, Teknik, dan Aplikasi. Jakarta: Ilmu Komputer
Univesitas Indonesia.
21