IntelXDK Tutorial

Project Waroeng XDK

Tutorial Cross Platform Mobile Application menggunakan Intel XDK yang akan kita pelajari berikut adalah membuat aplikasi untuk warung kecil dengan fungsi pencatatan penjualan sehingga penjual akan dengan mudah mencatat dan melihat laporan penjualan yang dilakukan tiap harinya.

Halaman Jual

Pilih Menu

menu Options

Halaman Input Daftar Menu

Halaman Laporan

hal yang akan kita pelajari :

Membuat project menggunakan intel xdk
Membuat page dengan rincian page Penjualan, page Input Data Menu dan page Laporan
Mengatur Interactivity / Event Handler
Coding Logic dan penyimpanan ke database websql sebagai basis datanya
Build menjadi apk dan menyebarkannya.

1. Membuat Project Menggunakan Intel XDK

buat dulu sebuah project baru menggunakan template blank dengan type HTML + Cordova project, pastikan opsi use App Designer sudah anda aktifkan (centang)

2. Membuat Page Penjualan

Tambahkan Header dan Footer, beri title sesuai keinginan Anda
Tambahkan Tombol Menu menggunakan komponen Button pada sebelah kiri Header beri Id btnShowMenu
tambahkan Tombol Opsi menggunakan komponen Button pada sebelah kanan Header beri Id btnShowOpsi
Tambahkan row dan isi dengan list pada bagian tengah halaman, hapus item pada listnya dan sisakan satu saja dan beri id itemDetailJual atur properties nya seperti gambar berikut

Bawah list tambahkan text beri id txtTotalJual atur style textnya sesuai keinginan
Bawah text total tambahkan 2 tombol, gunakan button group dan hapus salah satu tombolnya beri nama tombolnya masing-masing btnSimpan dan btnClear
Tambahkan text lagi pada bagian bawah dan isi dengan petunjuk cara penggunaan aplikasi ini
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 :

input untuk pencarian beri id txtSearchMenu
list untuk daftar menu hapus item dan sisakan satu beri id itemMenu
button untuk menutup side menu beri id btnCloseMenu

Tambahkan lagi Animated Sidebar tapi yang Right berfungsi untuk menempatkan menu Input Daftar menu yang dijual dan menu Laporan, gunakan list untuk menunya

item Daftar Menu beri id mnDaftarMenu
item Laporan beri id mnLaporan
item Keluar beri id mnKeluar
tombol untuk tutup menu opsi beri id btnCloseOpsi

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 :

Tombol Edit jumlah beri id btnEditJumlah
Tombol Edit Harga beri id btnEditHarga
Tombol Hapus dan beri id btnEditHapus

Berikutnya buat Page baru lewat tombol New Page yang ada pada panel Pages beri nama menupage kemudian isi dengan control seperti berikut

Tambahkan Input Menu pada page ini dan beri id txtNamaMenu
Tambahkan Input Harga dan beri id txtHargaMenu
Tambahkan Tombol untuk simpan dan beri id btnSimpanMenu
Tambahkan List untuk menampilkan data Menu yang sudah tersimpan, hapus itemnya dan tinggalkan satu beri id itemDataMenu
Atur item data menu dengan properties seperti berikut

Berikutnya buat halaman ke tiga untuk laporan, dengan nama laporanpage dengan tampilan seperti berikut

Gunakan komponen Collapsible dan beri id panelLap kemudian isikan List pada panel body nya, hapus itemnya dan sisakan satu beri nama itemLap

3. Mengatur Interactivity / Event Handler

Langkah berikutnya adalah mengatur Interactivity atau event ketika sebuah tombol atau menu di tap/click dia mau ngapain, misal ketika tombol btnShowMenu di click maka akan memunculkan side menu, maka langkahnya cari kontrol btnShowMenu pada panel Interactivity (biasanya ada di kanan bawah) pilih menu dropdownnya kemudian pilih opsi menuSamping, sedangkan untuk menutup kembali side menu cari btnCloseMenu dan pilih juga opsi menuSamping.

Lakukan juga untuk tombol btnShowOpsi pilih menuOpsi untuk memunculkan side Menu yang sebelah kanan. Sedangkan untuk mengakses halaman lain tinggal cari mnDaftarMenu set actien ke menupage dan mnLaporan ke laporanpage

pada tahap ini harusnya anda sudah bisa mencoba aplikasi anda lewat emulator dan ketika anda klik tombol menu akan keluar side daftar menu dan ketika anda klik tombol opsi akan keluar side menu disebelah kanan yang isinya tombol daftar menu, laporan dan keluar. ketika di klik tombol daftar menu akan berpindah ke halaman daftar menu, begitu pula kalau di klik menu laporan akan diarahkan ke halaman laporan.

Pada halaman daftar menu tambahkan tombol back pada header dan set actionnya ke mainpage agar kembali ke halaman utama. sedangkan tombol yang lain seperti tombol simpan dan batal pakai custom script saja sehingga nanti kita bisa menuliskan codenya sendiri secara manual.

4. Coding Logic dan penyimpanan ke database websql sebagai basis datanya
Buka file index_user_script.js yang ada di dalam folder js kemudian tambahkan code 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){
            //buat tabel menu
            tx.executeSql("CREATE TABLE IF NOT EXISTS menu (nama TEXT PRIMARY KEY,harga INTEGER)");
            //isi menu awal
            tx.executeSql("INSERT INTO menu VALUES('Mie Ayam',5000)");
            tx.executeSql("INSERT INTO menu VALUES('Bakso',5000)");
            tx.executeSql("INSERT INTO menu VALUES('Mie Ayam Bakso',8000)");
            tx.executeSql("INSERT INTO menu VALUES('Es Teh',2000)");
            //buat tabel jual dan detail
            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

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;i<result.rows.length;i++){
                var nama = result.rows.item(i).nama;
                var harga = result.rows.item(i).harga;
                //tambah item data
                var newItem = itemDataMenu.clone().appendTo(listDataMenu);
                newItem.find("h4").html(nama)
                newItem.find("p").html(harga);
            }

            //bind event
            listDataMenu.find("a").unbind().click(function(){
                var item = $(this);
                var nama = item.find("h4").html();
                //hapus menu item
                db.transaction(function(tx){
                    tx.executeSql("DELETE FROM menu WHERE nama=?",[nama],
                    function(tx,result){
                        if(result.rowsAffected>0){
                            $(item).fadeOut();
                            loadMenu();
                        }
                    },
                    function(tx,err){
                        console.log("ERROR DELETE MENU");
                        console.log(err);
                    });
                });
            });
        },
        function(tx,err){
            console.log(err);
        });
    });
}; //end loadDataMenu

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){
        tx.executeSql('SELECT * FROM menu',[],
        function(tx,result){
            for(i=0;i<result.rows.length;i++){
                var nama = result.rows.item(i).nama;
                var harga = result.rows.item(i).harga;
                //tambah item menu
                var newItem = itemMenu.clone().appendTo(listMenu);
                newItem.find("h4").html(nama);
                newItem.find("p").html(harga);
            }

            //bind event
            listMenu.find("a").unbind().click(function(){
                var nama = $(this).find("h4").html();
                var harga = $(this).find("p").html();
                var nota = localStorage.getItem("curnota");
                db.transaction(function(tx){
                    tx.executeSql("SELECT * FROM detail WHERE nota=? AND nama=?",[nota,nama],
                    function(tx,result){
                        if(result.rows.length>0){
                            //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",jumlahLama);
                                        $(this).find("p").html(jumlahLama + " x " + $(this).data("harga"));
                                        var totalBaru = jumlahLama * $(this).data("harga");
                                        $(this).find(".badge").html("Rp " + 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 = 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

Berikutnya tambahkan menu untuk buat transaksi baru / meload transaksi lama beserta detailnya untuk ditampilkan dalam halaman utama

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

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<result.rows.length;i++){
                var nama = result.rows.item(i).nama;
                var harga = result.rows.item(i).harga;
                var jumlah = result.rows.item(i).jumlah;

                var newDetail = itemDetailJual.clone().appendTo(listDetailJual);
                newDetail.find("h4").html(nama);
                newDetail.find("p").html(jumlah + " x Rp " + harga);
                var total = jumlah * harga;
                newDetail.find(".badge").html("Rp " + total);
                newDetail.data("jumlah",jumlah);
                newDetail.data("harga",harga);
                newDetail.show();
            }

            hitungTotal();

        },
        function(tx,error){
            console.log(error);
        });
    });

} //end loadDataTransaksi

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

Tambahkan function untuk menampilkan data laporan

function loadLaporan(){
    db.transaction(function(tx){
        tx.executeSql("SELECT tanggal,SUM(total) AS gtotal FROM jual 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<result.rows.length;i++){
                var tanggal = result.rows.item(i).tanggal;
                var gtotal = result.rows.item(i).gtotal;
                var newLap = panelLap.clone().appendTo(containerLap).attr("data-date",tanggal);
                newLap.find(".panel-title > 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<resultDetail.rows.length;j++){
                        var listLap = $("#listLap" + resultDetail.rows.item(j).tanggal);
                        var itemLap = listLap.data("templatesItem");
                        var newItem = itemLap.clone().appendTo(listLap);
                        newItem.find("p").html("Nota : " + resultDetail.rows.item(j).nota);
                        newItem.find(".badge").html("Rp " + resultDetail.rows.item(j).total);
                    }
                },
                function(tx,error){
                    console.log(error);
                });

            }
        },
        function(tx,error){
            console.log(error);
        });
    });
}; //end loadLaporan

setelah itu tambahkan function untuk setting apa aja yang akan dipanggil ketika aplikasi dijalankan / on load

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 itemLap = $("#itemLap");
    var listLap = itemLap.parent().attr("id","listLap");
    listLap.data("templatesItem",itemLap);
    listLap.html("");*/
    var panelLap = $("#panelLap");
    var containerLap = panelLap.parent().attr("id","containerLap");
    containerLap.data("panelLap",panelLap);
    containerLap.html("");
    loadLaporan();

} //end load awal

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";
/*
   hook up event handlers
*/
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();
            }
        });
    });


     /* listitem 3 x Rp 5.000 */
    $(document).on("click", ".uib_w_6", function(evt)
    {
         /* Other options: .modal("show") .modal("hide") .modal("toggle")
         See full API here: http://getbootstrap.com/javascript/#modals
            */

         $("#popupEdit").modal("toggle");

        var item = $(this);
        var nama = $(this).find("h4").html();
        var jumlah = $(this).data("jumlah");
        var 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){
                    if(result.rowsAffected > 0){
                        $("#popupEdit").modal("hide");
                        item.remove();
                        hitungTotal();
                    }
                },function(tx,error){
                    console.log(error);
                });
            });
        });

    });

        /* button #btnCloseMenu */
    $(document).on("click", "#btnCloseMenu", function(evt)
    {
         /* Other possible functions are:
           uib_sb.open_sidebar($sb)
           uib_sb.close_sidebar($sb)
           uib_sb.toggle_sidebar($sb)
            uib_sb.close_all_sidebars()
          See js/sidebar.js for the full sidebar API */

         uib_sb.toggle_sidebar($("#menuSamping"));

    });

        /* button #btnShowMenu */
    $(document).on("click", "#btnShowMenu", function(evt)
    {
         /* Other possible functions are:
           uib_sb.open_sidebar($sb)
           uib_sb.close_sidebar($sb)
           uib_sb.toggle_sidebar($sb)
            uib_sb.close_all_sidebars()
          See js/sidebar.js for the full sidebar API */

         uib_sb.toggle_sidebar($("#menuSamping"));
    });

        /* button #btnShowOpsi */
    $(document).on("click", "#btnShowOpsi", function(evt)
    {
         /* Other possible functions are:
           uib_sb.open_sidebar($sb)
           uib_sb.close_sidebar($sb)
           uib_sb.toggle_sidebar($sb)
            uib_sb.close_all_sidebars()
          See js/sidebar.js for the full sidebar API */

         uib_sb.toggle_sidebar($("#mnOpsi"));
    });

        /* button #btnCloseOpsi */
    $(document).on("click", "#btnCloseOpsi", function(evt)
    {
         /* Other possible functions are:
           uib_sb.open_sidebar($sb)
           uib_sb.close_sidebar($sb)
           uib_sb.toggle_sidebar($sb)
            uib_sb.close_all_sidebars()
          See js/sidebar.js for the full sidebar API */

         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){
                    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)
    {
         activate_page("#mainpage");
    });

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

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.

5. Build menjadi apk dan menyebarkannya.

Bagian terakhir jika sudah berjalan dengan baik silahkan masuk tab build dan pilih mau dijadikan aplikasi apa project ini, 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 kita akan dikirim hasil apk nya lewat email.