Kumpulan Tutorial Kito: Script barcode

Script: Barcode Reader Menggunakan AJAX dan PHP

Saya akan mencoba mengungkapkan salah satu kegunaan AHAH. Saya yakin semua mengetahui barcode reader. Alat ini sangat lazim digunakan di usaha perdagangan ataupun perkantoran untuk membaca barcode yang biasanya berupa kombinasi angka mewakili nama barang atau produk tertentu di database.

Apabila anda di depan kasir sebuah minimarket, barcode reader akan sangat bermanfaat untuk mempercepat proses penghitungan total belanja. Dan jarang sekali atau hampir tidak pernah di layar kasir terlihat aplikasi yang berbasis web untuk menangani masalah ini.

Di sini ajax bisa membantu saya menciptakan script kecil untuk membaca barcode. Yang perlu dicatat, barcode reader berperan sebagai pengganti keyboard dengan tambahan karakter enter. Kalau anda sudah terbiasa dengan fungsi onkeypress, maka event enter keyboard dapat dengan mudah didapatkan.

Yang perlu disiapkan adalah:
1. form dengan inputan tipe text sebagai fokus utama dan tag div untuk menampung hasil request, dapat dilihat di file index.php
2. javascript untuk mengirimkan proses request ajax, dapat dilihat di file utilities.js
3. file php yang mengolah data barcode, dapat dilihat di file readCell.php

Penjelasan index.php

.....

<script language="javascript" src="utilities.js"></script>
<script language="javascript">
function onEnter(e){// => Digunakan untuk membaca karakter enter
    var key=e.keyCode || e.which;
    if(key==13){// => Karakter enter dikenali sebagai angka 13
        showCell();
    }
}

function showCell(){// => Apabila mendapati karakter enter maka akan dilakukan proses Request AJAX
    iObj=document.getElementById("indexCell");
    index=iObj.value.trim();
    newIndex=eval(index)+1;

    rObj=document.getElementById("readBarcode");
    valBarcode=rObj.value.trim();

    rObj.value="";rObj.focus(); iObj.value=newIndex;
    doRequested('viewResult'+index,'readCell.php?val='+valBarcode+'&index='+newIndex,false);// => Request AJAX ke file readCell.php
}
</script>

.....

<body onload="document.getElementById('readBarcode').focus();">
<table width="100%">
    <tr>
       <td style="width:180px">NAMA BARANG</td>
        <td style="width:180px">JUMLAH</td>
        <td style="width:180px">HARGA</td>
        <td style="width:180px">TOTAL</td>
    </tr>
</table>
<div id="viewResult0">
</div>
<input type="text" id="readBarcode" name="readBarcode" onkeypress="onEnter(event)" />
<input type="text" id="indexCell" name="indexCell" value="0" style="display:none" />
</body>

Pada script diatas, yang dilakukan adalah ajax akan mengirimkan request ke file readCell.php untuk mencari barang atau item apa yang dihasilkan barcode. Hasilnya nanti akan muncul item inputan di div viewResult0, yang mengandung div baru yaitu viewResult1, yang akan digunakan untuk menampung request ajax berikutnya.

Penjelasan readCell.php

<?
$index=$_REQUEST["index"];
$val=$_REQUEST["val"]; //Hasil dari Barcode Reader

$forexample=rand(5000,20000); //=> Di sini anda dapat memodifikasi script menjadi koneksi ke database, lalu cari data yang sesuai (mudah bukan)?>

<table width="100%">
    <tr>
        <td style="width:180px">ITEM-<?=$val?></td>
        <td style="width:180px"><input type="text" value="1" /></td>
        <td style="width:180px"><input type="text" value="<?=$forexample?>" /></td>
        <td style="width:180px"><?=$forexample*1;?></td>
    </tr>
</table>
<div id="viewResult<?=$index?>"> </div>

Dari script diatas, terlihat bahwa sebenarnya penulis hanya memodifikasi div dengan menambahkan indeks sehingga dapat menampung request berikutnya.

Sebagai tambahan, penulis pernah menggunakan barcode reader Motorola LS2200, dan scipt ini sukses digunakan. Script dapat di-download di sini.

Kumpulan Tutorial Kito

Selasa, 22 November 2016

Script barcode

Script: Barcode Reader Menggunakan AJAX dan PHP

Tidak ada komentar:

Posting Komentar