Pengembangan Aplikasi Penjualan Menggunakan Intel XDK

Pengembangan Aplikasi Penjualan Menggunakan Intel XDK

Project Angkringan Pengembangan Aplikasi pada Perangkat Bergerak menggunakan Intel XDK yang akan dipelajari adalah membuat aplikasi untuk Warung Angkringan dengan fungsi pencatatan penjualan sehingga penjual akan dengan mudah mencatat dan melihat laporan penjualan yang dilakukan tiap harinya. Bagian yang akan dipelajari : 1. Membuat project menggunakan intel xdk. 2. Membuat halaman/page dengan rincian: a. page Penjualan, b. page Input Data Menu, c. page Laporan 3. Mengatur Interactivity/ Event Handler. 4. Kode program dan penyimpanan ke database webSQL sebagai basis datanya. 5. Build menjadi *.apk dan menyebarkannya.

Panduan Mengembangkan Aplikasi Mobile Cross Platform

1

Halaman Penjualan

Sidebar Menu

Halaman Input Daftar Menu

Sidebar Options

Halaman Laporan

A. Membuat Project Menggunakan Intel XDK Buat sebuah project baru menggunakan template blank dengan type HTML + Cordova project, pastikan opsi use App Designer sudah diaktifkan (centang).


2

1

3

2

4

B. Membuat Page Penjualan

1. Tambahkan Header dan Footer, beri title. 2. Tambahkan Tombol Menu menggunakan komponen Button pada sebelah kiri Header beri ID: btnShowMenu. 3. Tambahkan Tombol Opsi menggunakan komponen Button pada sebelah kanan Header beri ID: btnShowOpsi. 4. Tambahkan Row kemudian isi dengan: Badge and Label pada bagian atas halaman, berikutnya tambahkan Listview pada bagian tengah halaman, hapus item pada listnya dan sisakan satu saja kemudian beri ID: itemDetailJual atur properties nya seperti gambar diatas.


3

5. Bawah list tambahkan text beri ID: txtTotalJual dan tambahkan Style  Textnya. 6. Bawah text total tambahkan 2 tombol, gunakan button group dan hapus salah satu tombolnya beri nama tombolnya masing-masing btnSimpan dan btnClear. 7. Tambahkan text lagi pada bagian bawah dan isi dengan petunjuk cara penggunaan aplikasi ini.

C. Membuat Sidebar Menu

1. Berikutnya untuk memilih menu yang dijual tambahkan sebuah side menu pada bagian kiri halaman menggunakan komponen Animated Sidebar Left dan beri ID: menuSamping isi dengan row terlebih dahulu dan tambahkan : a. Input untuk pencarian beri ID: txtSearchMenu. b. Listview untuk daftar menu hapus item dan sisakan satu beri ID: itemMenu. c. Button untuk menutup side menu beri ID: btnCloseMenu.

D. Membuat Sidebar Opsi


4

1. Tambahkan lagi Animated Sidebar Right berfungsi untuk menempatkan menu Input Daftar menu yang dijual dan menu Laporan, beri ID: mnOpsi, dan gunakan Listview untuk di dalam menunya. a. Item Daftar Menu beri ID: mnDaftarMenu. b. Item Laporan beri ID: mnLaporan. c. Item Keluar beri ID: mnKeluar. d. Button untuk tutup menu opsi beri ID: btnCloseOpsi.

E. Membuat Popup Edit 1. Tambahkan komponen popup kedalam halaman jual ini, yang berfungsi untuk menampung pilihan menu: edit jumlah barang, edit harga dan hapus barang jika item jual di tap. Beri ID: popupEdit dan tambahkan tiga tombol dalam popup ini : a. Tombol Edit jumlah beri ID: btnEditJumlah. b. Tombol Edit Harga beri ID: btnEditHarga. c. Tombol Hapus dan beri ID: btnEditHapus.


5

F. Membuat Page Daftar Menu 1. Berikutnya buat Page baru lewat tombol New Page yang ada pada panel Pages beri nama menupage kemudian isi dengan control berikut ini. 2. Tambahkan Input Menu pada page ini dan beri ID: txtNamaMenu. 3. Tambahkan Input Harga dan beri ID: txtHargaMenu. 4. Tambahkan Tombol untuk simpan dan beri ID: btnSimpanMenu. 5. Tambahkan Listview untuk menampilkan data Menu yang sudah tersimpan, hapus itemnya dan tinggalkan satu beri ID: itemDataMenu. Atur item data menu dengan properties seperti berikut.


6

G. Membuat Page Laporan

1. Berikutnya buat halaman ke tiga untuk laporan, dengan nama laporanpage dengan tampilan seperti diatas. 2. Gunakan komponen Collapsible dan beri id panelLap kemudian isikan List pada panel body-nya, hapus itemnya dan sisakan satu beri nama ID: itemLap. Panduan Mengembangkan Aplikasi Mobile Cross Platform

7

H. Mengatur Interactivity / Event Handler 1. Langkah berikutnya adalah mengatur Interactivity atau event ketika sebuah tombol atau menu di tap/click, misal ketika tombol btnShowMenu di click maka akan memunculkan side menu, maka langkahnya: a. cari kontrol btnShowMenu pada panel Interactivity (ada di kanan bawah) b. pilih menu dropdownnya kemudian pilih opsi menuSamping, sedangkan untuk menutup kembali side menu c. cari btnCloseMenu dan pilih juga opsi menuSamping pada Interactivity. 2. Lakukan juga untuk tombol btnShowOpsi pilih menuOpsi untuk memunculkan side Menu yang sebelah kanan. 3. Sedangkan untuk mengakses halaman lain tinggal cari mnDaftarMenu set action ke menupage, dan mnLaporan ke laporanpage.

4. Tahap ini harusnya sudah bisa mencoba aplikasi lewat emulator a. ketika diklik tombol Menu akan keluar sidebar menu di sebelah kiri.


8

b. ketika diklik tombol Opsi akan keluar sidebar menu di sebelah kanan yang isinya tombol daftar menu, laporan dan keluar c. ketika diklik tombol Daftar Menu akan berpindah ke halaman Daftar Menu, d. jika diklik tombol Laporan akan diarahkan ke halaman Laporan. 5. Pada halaman Daftar Menu (menupage) tambahkan tombol Back pada header dan set actionnya ke mainpage agar kembali ke halaman utama. Sedangkan tombol Simpan akan memakai custom script saja sehingga nanti kodenya dituliskan secara manual.

I. Kode program dan penyimpanan ke database webSQL sebagai basis datanya 1. Buka file index_user_script.js yang ada di dalam folder js kemudian tambahkan kode berikut pada bagian atas sendiri yang berfungsi untuk membuat database, struktur tabel dan mengisi tabel menu dengan daftar menu default, var db = null; function OpenDB(){ try{ db = openDatabase("waroeng.db","1.0","waroeng db",2*1024*1024); } catch(e){ alert(e); } if(localStorage.getItem("createTable")==null){ db.transaction(function(tx){ tx.executeSql("CREATE TABLE IF NOT EXISTS menu (nama TEXT PRIMARY KEY,harga INTEGER)"); tx.executeSql("INSERT tx.executeSql("INSERT tx.executeSql("INSERT Bakso',8000)"); tx.executeSql("INSERT

INTO menu VALUES('Mie Ayam',5000)"); INTO menu VALUES('Bakso',5000)"); INTO menu VALUES('Mie Ayam INTO menu VALUES('Es Teh',2000)");

tx.executeSql("CREATE TABLE IF NOT EXISTS jual (nota INTEGER PRIMARY KEY AUTOINCREMENT, tanggal TEXT, total INTEGER)"); tx.executeSql("CREATE TABLE IF NOT EXISTS detail (nota INTEGER, nama TEXT, harga INTEGER, jumlah INTEGER)"); localStorage.setItem("createTable","OK"); }); } }; // end opendb


9

2. kemudian buat function dibawahnya untuk meload data menu pada page daftar menu function loadDataMenu(){ var listDataMenu = $("#listDataMenu"); var itemDataMenu = listDataMenu.data("templatesItem"); listDataMenu.html(""); db.transaction(function(tx){ tx.executeSql('SELECT * FROM menu',[], function(tx,result){ for(i=0;i0){ $(item).fadeOut(); loadMenu(); } }, function(tx,err){ console.log("ERROR DELETE MENU"); console.log(err); }); }); }); }, function(tx,err){ console.log(err); }); }); }; //end loadDataMenu

3. Tambahkan juga fungsi untuk meload data menu yang akan diletakkan pada sidemenu function loadMenu(){ var listMenu = $("#listMenu"); var itemMenu = listMenu.data("templatesItem"); listMenu.html(""); db.transaction(function(tx){ Panduan Mengembangkan Aplikasi Mobile Cross Platform

10

tx.executeSql('SELECT * FROM menu',[], function(tx,result){ for(i=0;i0){ //sudah ada tx.executeSql("UPDATE detail SET jumlah=jumlah+1 WHERE nota=? AND nama=?",[nota,nama], function(tx,result){ $("#listDetailJual>a").each(function() { var detNama = $(this).find("h4").html(); if(detNama===nama){ var jumlahLama = $(this).data("jumlah"); jumlahLama++; $(this).data("jumlah",jumlahLa ma); $(this).find("p").html(jumlahL ama + " x " + $(this).data("harga")); var totalBaru = jumlahLama * $(this).data("harga"); $(this).find(".badge").html("R p " + totalBaru); hitungTotal(); } }); }, function(tx,error){ console.log(error); }); }else{ //blom ada tx.executeSql("INSERT INTO detail VALUES (?,?,?,1)",[nota,nama,harga], function(tx,result){ var listDetailJual = $("#listDetailJual"); var itemDetailJual = listDetailJual.data("templatesItem"); var newDetail = Panduan Mengembangkan Aplikasi Mobile Cross Platform

11

itemDetailJual.clone().appendTo(listDetailJual); newDetail.find("h4").html(nama); newDetail.find("p").html("1 x Rp " + harga); newDetail.find(".badge").html("Rp " + harga); newDetail.data("jumlah",1); newDetail.data("harga",harga); newDetail.slideDown(); hitungTotal(); }, function(tx,error){ console.log(error); }); } }, function(tx,error){ console.log(error); }); }); }); }, function(tx,err){ console.log(err); }); }); }; //end loadMenu

4. Berikutnya tambahkan menu untuk buat transaksi baru/ meload transaksi lama beserta detailnya untuk ditampilkan dalam halaman Utama (mainpage)

function loadTransaksi(){ if(localStorage.getItem("curnota")==null){ newTransaksi(); }else{ loadDataTransaksi(); } }; //end loadTransaksi function newTransaksi(){ //transaksi baru db.transaction(function(tx){ tx.executeSql("INSERT INTO jual (tanggal) VALUES (?)",[new Date().toISOString().substr(0,10)], function(tx,result){ if(result.rowsAffected==1){ localStorage.setItem("curnota", result.insertId); loadDataTransaksi(); } }, function(tx,error){ console.log(error); }); }); }; //end transaksi baru Panduan Mengembangkan Aplikasi Mobile Cross Platform

12

function loadDataTransaksi(){ var listDetailJual = $("#listDetailJual"); var itemDetailJual = listDetailJual.data("templatesItem"); listDetailJual.html(""); db.transaction(function(tx){ tx.executeSql("SELECT * FROM detail WHERE nota=?",[localStorage.getItem("curnota")], function(tx,result){ for(i=0;i
5. Tambahkan pula function untuk menghitung total penjualan pada halaman utama function hitungTotal(){ var totalBayar = 0; $("#listDetailJual > a").each(function(index){ totalBayar += $(this).data("jumlah") * $(this).data("harga"); }); $("#txtTotalJual").find("p").html("Total : Rp " + totalBayar); $("#txtTotalJual").data("total",totalBayar); }; // end hitungtotal

6. Tambahkan function untuk menampilkan data laporan function loadLaporan(){ db.transaction(function(tx){ tx.executeSql("SELECT tanggal,SUM(total) AS gtotal FROM jual Panduan Mengembangkan Aplikasi Mobile Cross Platform

13

GROUP BY tanggal ORDER BY tanggal DESC",[], function(tx,result){ var containerLap = $("#containerLap"); var panelLap = containerLap.data("panelLap"); containerLap.html(""); for(var i=0;i a").html(tanggal); newLap.find(".panel-lap-total").html("Rp " + gtotal); newLap.find(".panel-collapse").attr("id","lap-" + tanggal); newLap.find(".accordion-toggle").attr("href","#lap-" + tanggal); if(i==result.rows.length-1){ newLap.addClass("has-footer"); } var itemLap = newLap.find("#itemLap"); var listLap = itemLap.parent().attr("id","listLap" + tanggal).data("templatesItem",itemLap); listLap.html(""); tx.executeSql("SELECT * FROM jual WHERE tanggal=? AND total NOT NULL",[tanggal], function(tx,resultDetail){ for(var j=0;j
7. setelah itu tambahkan function untuk setting apa aja yang akan dipanggil ketika aplikasi dijalankan / on load:


14

function loadAwal(){ //buka database OpenDB(); //sembunyikan temp menu var itemMenu = $("#itemMenu"); var listMenu = itemMenu.parent().attr("id","listMenu"); listMenu.data("templatesItem",itemMenu); loadMenu(); //sembunyikan temp detail jual var itemJual = $("#itemDetailJual"); var listJual = itemJual.parent().attr("id","listDetailJual"); listJual.data("templatesItem",itemJual); listJual.html(""); $("#txtTotalJual").find("p").html("Total : Rp 0"); $("#txtTotalJual").data("total",0); loadTransaksi(); //sembunyikan temp data menu di halaman daftar menu var itemDataMenu = $("#itemDataMenu"); var listDataMenu = itemDataMenu.parent().attr("id","listDataMenu"); listDataMenu.data("templatesItem",itemDataMenu); loadDataMenu(); //sembunyikan temp laporan var panelLap = $("#panelLap"); var containerLap = panelLap.parent().attr("id","containerLap"); containerLap.data("panelLap",panelLap); containerLap.html(""); loadLaporan(); } //end load awal

8. Setelah function load awal dibuat panggil function tersebut pada saat app.ready / sebelum event handler sehingga isi function event handler seperti ini (function(){ "use strict"; function register_event_handlers(){ loadAwal(); $(document).on("change","#txtSearchMenu",function(){ var cari = $("#txtSearchMenu").val().toUpperCase(); $("#listMenu>a").each(function(){ if($(this).find("h4").html().toUpperCase().indexOf(cari)>= 0){ $(this).show(); }else{ $(this).hide(); } }); }); Panduan Mengembangkan Aplikasi Mobile Cross Platform

15

/* listitem 3 x Rp 5.000 */ $(document).on("click", ".uib_w_6", function(evt){ $("#popupEdit").modal("toggle"); var var var var

item = $(this); nama = $(this).find("h4").html(); jumlah = $(this).data("jumlah"); harga = $(this).data("harga");

$("#btnEditJumlah").unbind().click(function(){ $("#popupEdit").modal("hide"); jumlah = prompt("Masukkan jumlah jual...!",jumlah); db.transaction(function(tx){ tx.executeSql("UPDATE detail SET jumlah=? WHERE nota=? AND nama=?",[jumlah,localStorage.getItem("curnota"),nama], function(tx,result){ if(result.rowsAffected>0){ item.data("jumlah", jumlah); item.find("p").html(jumlah + " x Rp " + harga); var total = jumlah * harga; item.find(".badge").html("Rp " + total); hitungTotal(); } }, function(tx,error){ console.log(error); }); }); }); $("#btnEditHarga").unbind().click(function(){ $("#popupEdit").modal("hide"); harga = prompt("Masukkan harga jual...!",harga); db.transaction(function(tx){ tx.executeSql("UPDATE detail SET harga=? WHERE nota=? AND nama=?",[harga,localStorage.getItem("curnota"),nama], function(tx,result){ if(result.rowsAffected>0){ item.data("harga",harga); item.find("p").html(jumlah + " x Rp " + harga); var total = jumlah * harga; item.find(".badge").html("Rp " + total); hitungTotal(); } }, function(tx,error){ console.log(error); }); }); }); $("#btnEditHapus").unbind().click(function(){ db.transaction(function(tx){ tx.executeSql("DELETE FROM detail WHERE nota=? AND nama=?",[localStorage.getItem("curnota"),nama], function(tx,result){ Panduan Mengembangkan Aplikasi Mobile Cross Platform

16

if(result.rowsAffected > 0){ $("#popupEdit").modal("hide"); item.remove(); hitungTotal(); } },function(tx,error){ console.log(error); }); }); }); }); /* button #btnCloseMenu */ $(document).on("click", "#btnCloseMenu", function(evt){ uib_sb.toggle_sidebar($("#menuSamping")); }); /* button #btnShowMenu */ $(document).on("click", "#btnShowMenu", function(evt){ uib_sb.toggle_sidebar($("#menuSamping")); }); /* button #btnShowOpsi */ $(document).on("click", "#btnShowOpsi", function(evt){ uib_sb.toggle_sidebar($("#mnOpsi")); }); /* button #btnCloseOpsi */ $(document).on("click", "#btnCloseOpsi", function(evt){ uib_sb.toggle_sidebar($("#mnOpsi")); }); /* listitem #mnDaftarMenu */ $(document).on("click", "#mnDaftarMenu", function(evt){ activate_page("#menupage"); uib_sb.toggle_sidebar($("#mnOpsi")); }); /* button #btnBack */ $(document).on("click", "#btnBack", function(evt){ activate_page("#mainpage"); }); /* button #btnSimpanMenu */ $(document).on("click", "#btnSimpanMenu", function(evt){ var nama = $("#txtNamaMenu").val(); var harga = $("#txtHargaMenu").val(); if(nama!="" && harga!=""){ db.transaction(function(tx){ tx.executeSql("INSERT INTO menu VALUES(?,?)",[nama,harga], function(tx,result){ if(result.rowsAffected==1){ $("#txtNamaMenu").val(""); $("#txtHargaMenu").val(""); loadDataMenu(); loadMenu(); } }, function(tx,error){ Panduan Mengembangkan Aplikasi Mobile Cross Platform

17

console.log(error); }); }); }else{ alert("Isikan nama menu dan harga...!"); } }); /* button #btnSimpan */ $(document).on("click", "#btnSimpan", function(evt){ db.transaction(function(tx){ tx.executeSql("UPDATE jual SET tanggal=?,total=? WHERE nota=?",[new Date().toISOString().substr(0,10), $("#txtTotalJual").data("total"),localStorage.getItem("curnota")], function(tx,result){ if(result.rowsAffected>0){ newTransaksi(); } }, function(tx,error){ console.log(error); }); }); if(window.admob){ window.admob.showFullScreenAd(); } }); /* button #btnClear */ $(document).on("click", "#btnClear", function(evt){ db.transaction(function(tx){ tx.executeSql("DELETE FROM detail WHERE nota=?",[localStorage.getItem("curnota")], function(tx,result){ loadDataTransaksi(); }, function(tx,error){ console.log(error); }); }); }); /* listitem #mnKeluar */ $(document).on("click", "#mnKeluar", function(evt) { navigator.app.exitApp(); }); /* listitem #mnLaporan */ $(document).on("click", "#mnLaporan", function(evt) { activate_page("#laporanpage"); loadLaporan(); uib_sb.toggle_sidebar($("#mnOpsi")); }); /* button #btnBackFromLaporan */ $(document).on("click", "#btnBackFromLaporan", function(evt) { Panduan Mengembangkan Aplikasi Mobile Cross Platform

18

activate_page("#mainpage"); }); } document.addEventListener("app.Ready", register_event_handlers, false); })();

9. Perhatikan pada bagian atas function event handler ada pemanggilan loadAwal(); dan sesuaikan isi function untuk tombol simpan dan tombol batalnya seperti contoh script yang ada di atas. J. Build Menjadi APK dan Menyebarkannya. Bagian terakhir jika sudah berjalan dengan baik silahkan masuk tab build dan pilih mau dijadikan aplikasi berdasarkan suatu platfor, jika ingin dijadikan aplikasi android silahkan pilih android, proses ini membutuhkan koneksi internet karena project akan di upload ke server intel xdk dan di build disana setelah itu akan dikirim hasil apk nya lewat email.

Terimakasih.


19

Pengembangan Aplikasi Penjualan Menggunakan Intel XDK

Recommend Documents