Beranda
»
Artikel
»
Menggunakan Barcode Scanner Pada Halaman HTML

Menggunakan Barcode Scanner Pada Halaman HTML

Alat Barcode Scanner bekerja hampir sama seperti keyboard. Barcode Scanner akan membaca kode barcode dalam bentuk kode bar (gambar) dan menampilkannya dalam bentuk output berupa kode barcode (text). Barcode Scanner sangat membantu mempercepat pencarian data suatu barang dalam database dan menampilkannya dalam bentuk informasi lengkap tentang data barang tersebut.

Aplikasi yang menggunakan media barcode scanner banyak digunakan pada aplikasi kasir, aplikasi inventori maupun aplikasi perpustakaan. Aplikasi tersebut kebanyakan menggunakan program dalam lingkungan VB Net maupun Java. Namun aplikasi barcode juga dapat diterapkan pada lingkungan berbasis web development dengan program PHP sebagai eksekutornya.

Cara Kerja Barcode Scanner

Produk Barcode Scanner banyak tersedia di pasaran dengan harga mulai dari 300 ribuan sampai 1 jutaan tergantung dari type dan jenis mesin barcode. Sama halnya seperti keyboard, barcode scanner juga merupakan media input pada komputer yang berfungsi sebagai masukkan data teks pada komputer.

Cara kerja mesin Barcode Scanner adalah dengan membaca kode bar dalam bentuk gambar, kemudian menampilkannya dalam bentuk teks. Hal yang perlu digaris bawahi adalah cara dalam menampilkan hasil pembacaan scanner. Alat tersebut akan mengetikkan satu persatu karakter dari kode yang sudah dibaca tersebut dan diakhiri dengan tombol enter. Jika anda menduga cara kerjanya sama seperti cara kerja pada proses copy dan paste untuk sekumpulan teks, hal tersebut adalah tidak benar.

Pada HTML, Barcode Scanner sebagai media input data hanya dapat berfungsi dengan baik jika elemen yang sedang aktif tersebut adalah dalam bentuk elemen tag <input> type text dan juga <textarea>.

Menggunakan Barcode Scanner Pada Elemen HTML Input Type Text

Seperti yang sudah dijelaskan diatas, bahwa alat Barcode Scanner akan menghasilkan Carriage Return atau karakter enter pada setiap akhir inputan data. Jika diterapkan mentah-mentah pada <input> type text tanpa rekayasa Javascript, maka form akan disubmit dan menuju halaman pemroses.

Fungsi Javascript yang dapat digunakan untuk menghindari hal di atas adalah dengan memakai fungsi on keyup(), on keydown() ataupun on keypress(). Kemudian mengambil data input yang dimasukkan oleh Scanner, dan jika Carriage Return (Code 13) ditemukan, maka data akan ditampilkan pada bilah input tersebut (baris ke-33 s.d 35).

HTML

<!DOCTYPE html>
<html>
<head>
<title>How To Use Barcode Scanner</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<style type="text/css">
body{ 
   padding: 20px;
}
.content{
   padding: 40px 20px;
   background: lightblue; 
   border-radius: 10px; 
}
#input_scan{
   height:33px;width:440px;font-size:22px;padding:7px;
}
</style>
</head>
<body>
   <h1>How To Use Barcode Scanner In HTML Page</h1>
   <div class="content">
     <p>Enter Your Barcode : <input type='text' id="input_scan"></p>
     <p><button type="button" id="btn_clear_text" class="btn btn-success" style="margin-left:132px;"><span class="glyphicon glyphicon-remove"></span>  Clear Text</button></p>
   </div>
<script>
$(document).ready(function(){
   $('#input_scan').val("").focus();
   $('#input_scan').keyup(function(e){
     var tex = $(this).val();
     console.log(tex);
     if(tex !=="" && e.keyCode===13){
     var result = confirm("Your Barcode is : " + tex);
     if(result)$('#input_scan').focus();
     }
     e.preventDefault();
   });
   $('#btn_clear_text').click(function(){
     $('#input_scan').val("").focus();
   });
});
</script>
</body>
</html>

Jika diakses pada browser akan menghasilkan tampilan :

Elemen HTML <input> type text tersebut digunakan untuk menampilkan hasil scan mesin barcode. Jika mesin barcode berhasil membaca kode barnya, maka hasilnya akan muncul pada bilah input tersebut. Berikut video hasil proses scanning barcode beberapa produk yang digunakan sebagai contoh :

Pada contoh di atas, halaman tidak menggunakan elemen HTML tag <form> yang akan melakukan redirect langsung menuju halaman tertentu. Hal ini untuk menghindari proses tersubmit-nya form. Dan metode ini cocok jika pengiriman data menggunakan AJAX dengan proses di balik layar. Jika menggunakan elemen HTML tag <form> dapat melakukan pemblokiran proses melalui Script Javascript maupun Jquery agar formulir tidak tersubmit secara otomatis.

KODE SCRIPT

<form action="" onkeydown="return event.key!= 'Enter';"></form>
// atau 
<script>
$(document).on("keydown", "form", function(e){
   return e.key != "Enter";
}
</script>

Menggunakan Barcode Scanner Pada Elemen HTML Textarea

Penggunaan Barcode Scanner pada elemen HTML berupa <textarea> merupakan alternatif kedua yang bisa digunakan selain elemen tag <input>. Jika penggunaan scanner pada <input> type text menghasilkan form yang akan disubmit untuk menuju halaman pemroses, lain halnya jika diterapkan pada <textarea>. Penerapan Barcode Scanner pada <textarea> akan mendapatkan hasil scan dalam bentuk teks dengan disertai karakter Carriage Return (enter). Dan ini artinya teks hasil scan diposisikan pada baris pertama dan baris kedua diisi oleh pointer yang berkedip di dalam <textarea> tersebut.

Jika hal tersebut digunakan untuk membandingkan data, tentu saja bukan hal yang baik. Karena yang diperlukan adalah hasil scan untuk satu produk saja, tidak dalam bentuk multi produk. Untuk itu, perlu dilakukan rekayasa script pada javascript. Caranya dengan menggunakan fungsi javascript on keyup(), on keydown(), ataupun on keypress() pada elemen <textarea> tersebut. Kemudian jika ditemukan karakter Carriage Return (Code 13), maka data yang ada di dalamnya ditampilkan (baris ke-33 s.d 35).

HTML

<!DOCTYPE html>
<html>
<head>
<title>How To Use Barcode Scanner</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<style type="text/css">
   body{ 
     padding: 20px;
   }
   .content{
     padding: 40px 20px;
     background: lightblue; 
     border-radius: 10px; 
   }
   #input_scan{
     height:220px;width:440px;font-size:22px;padding:7px;
   }
</style>
</head>
<body>
   <h1>How To Use Barcode Scanner In HTML Page</h1>
   <div class="content">
     <p>Enter Your Barcode : <br><textarea id="input_scan"></textarea></p>
     <p><button type="button" id="btn_clear_text" class="btn btn-success"><span class="glyphicon glyphicon-remove"></span>  Clear Text</button></p>
   </div>
<script>
$(document).ready(function(){
   $('#input_scan').val("").focus();
   $('#input_scan').keyup(function(e){
     var tex = $(this).val();
     console.log(tex);
     if(tex !=="" && e.keyCode===13){
     var result = confirm("Your Barcode is : " + tex);
     if(result)$('#input_scan').focus();
     }
     e.preventDefault();
   });
   $('#btn_clear_text').click(function(){
     $('#input_scan').val("").focus();
   });
});
</script>
</body>
</html>

Berikut tampilan jika halaman tersebut diakses pada browser :

Berikut video lengkap proses input data dengan barcode scanner pada elemen HTML berupa text area :

18 Sept 2022 0 6.657

Kategori : html - javascript - support - barcode - qrcode

facebook twitter whatapp linkedin pinterest

Halaman Terkait

	Mengoptimalkan Barcode Scanner Pada Aplikasi Perpustakaan artikel
	Membuat Aplikasi Web Absensi Harian Karyawan Dengan Barcode Scanner artikel
	Menggunakan Barcode Scanner Pada Aplikasi Berbasis Web artikel
	Merubah Tampilan Barcode Dengan Warna Custom Pada PHP artikel
	Membuat Inventory Dilengkapi Barcode Generator Dengan PHP dan Mysql artikel

Tinggalkan Balasan

Formulir ini hanya bagi member yang sudah terdaftar. Silahkan disini.

Belum terdaftar? silahkan queue Daftar disini.

Mengirim Komentar

Setiap pengunjung situs ini dapat memposting komentar disini, namun tidak semua komentar dapat ditampilkan. Gunakan kalimat baku bahasa Indonesia yang mudah dimengerti. Dilarang memposting kalimat yang berisi ujaran kebencian, SARA, pornografi, perjudian dan spam. Komentar harus sesuai dengan topik. Untuk bahasan lainnya yang lebih mendalam dapat menggunakan sarana forum. Anda dapat mengirimkan suatu pertanyaan dan member lainnya akan menjawab pertanyaan Anda.

Peringatan!

Apakah ingin menghapus komentar ini?

	Membuat Database Dan Tabel Melalui CMD Pada Xampp Server 54.547
	Daftar Kode ASCII 45.782
	Membuat Menu Navigasi Horisontal dan Vertikal Pada HTML 42.746
	Mendownload File Dengan Menggunakan PHP 27.285
	Validasi Form Menggunakan Plugin Validation Jquery 25.679
	Menggunakan Barcode Scanner Pada Aplikasi Berbasis Web 17.875
	Membuat Barcode Generator Dengan PHP 14.481
	Cara Mudah Membuat QR Code Generator Dengan PHP 13.678
	Merubah Warna Latar Text Editor Notepad++ 12.608
	Perbedaan Antara fungsi rand() dan mt_rand() Pada PHP 11.104

Visitor Name
Email