Some text some message..
Some text some message..
Some text some message..
Some text some message..

Menggunakan Barcode Scanner Pada Halaman HTML

previous Previous Page

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<!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 :

barcode scanner html

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

1
2
3
4
5
6
7
<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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<!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 :

barcode scanner html

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

   0   2.473

Kategori : tag iconhtml - tag iconjavascript - tag iconsupport - tag iconbarcode - tag iconqrcode

facebooktwitterwhatapplinkedinpinterest

previous Previous Page

Tinggalkan Balasan

Nama Pengguna* :

Email* :

 

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.
close

News Letters

Silahkan masukkan email Anda untuk berlangganan informasi kami

Polling

1. Apakah website ini menambah pengetahuan Anda?
 Ya
 Tidak
 Tidak Tahu
2. Seberapa sering Anda mengunjungi website ini?
 Sering
 Jarang
 Tidak Pernah
3. Apakah penilaian Anda terhadap website ini, jika melihat dari segi konten/isi?
 Sangat Bagus
 Bagus
 Cukup Bagus
 Kurang Bagus
4. Apakah penilaian Anda terhadap website ini, jika melihat dari segi tampilan?
 Sangat Bagus
 Bagus
 Cukup Bagus
 Kurang Bagus
5. Untuk meningkatkan kualitas website ini, Apakah saran Anda?

 


Visitor Live Chat

Silahkan anda memberikan masukkan chat (obrolan) pada fasilitas chat ini. Konten bebas, sopan dan menghargai pendapat orang lain..

 _Dicky (06 Mar 2021 at 03:24 pm)

Said : Oops, It's nice content

 rizky yuda (07 Mar 2021 at 12:30 pm)

Said : Konten cukup menambah wawasan...

 suryadi (13 Mar 2021 at 06:46 pm)

Said : Boleh request artikel cara koneksi database msyql ke php..

 Nettie Rutherfo (08 Apr 2021 at 12:30 pm)

Said : Auto

 Tedy (29 Mei 2021 at 12:09 pm)

Said : nice blog and articles..

 Ms. Doyle Mann (02 Jun 2021 at 09:56 pm)

Said : card

 flowrie_skylee (12 Jun 2021 at 01:24 pm)

Said : nice content

 Nelson Schaefer (12 Jul 2021 at 04:01 pm)

Said : JSON

 ooppp (18 Jul 2021 at 11:44 pm)

Said : 000popooppi

 Mrs. Jeff Boehm (01 Agt 2021 at 11:01 am)

Said : fuchsia

 dharma (07 Sept 2021 at 05:16 pm)

Said : ini support PHP 8?

 admin (12 Sept 2021 at 12:50 pm)

Said : #dharma masih dalam ruang lingkup PHP versi 7.
Namun untuk ke depannya akan dipertimbangkan agar support PHP 8, jika perubahan dari PHP 7 ke PHP 8 memang dirasa sangat signifikan.

 sadas (13 Jan 2022 at 09:48 am)

Said : Hello

 sutiyono (15 Jan 2022 at 09:36 am)

Said : konten cukup menarik.

 Fuad (08 Mar 2022 at 05:00 pm)

Said : Maksih bang kontennya, sangat membantu.

 admin (10 Mar 2022 at 12:18 pm)

Said : #Fuad Sama sama bang.. terima kasih sudah mampir di blog ini..

 Ferdian (09 Mei 2022 at 11:31 pm)

Said : bang bisa tolong buatkan contoh tamplate kirim email verifikasi gak?

 admin (10 Mei 2022 at 09:44 pm)

Said : Bang #Ferdian, artikelnya belum dibuat. Tapi ada kesamaan konsep yang dapat ditemukan pada halaman : Membuat Form Newsletters Interaktif Dengan Kode Verifikasi Dikirim Via Email,
Silahkan download source code dan file penunjangnya di sana. dan coba kembangkan untuk mengirimkan verifikasi via email untuk penggunaan yang lainnya.

 Abror (11 Jun 2022 at 09:08 am)

Said : Hallo min mau tanya kenapa script yang di konten teknik grabbing tidak bisa dibuka di laptop saya?

 admin (12 Jun 2022 at 12:11 am)

Said : #Abror stuck-nya dibagian mana bang? kalau localhost bisa aktifkan curl pada file php.ini dengan cara menghilangkan semicolon pada ;extension=php_curl.dll. Jika hosting online, dapat langsung dijalankan. cUrl dapat mengambil konten dan menampilkannya secara langsung pada halaman web.

 admin (12 Jun 2022 at 10:29 am)

Said : #Abror Silahkan akses artikel Menyalin konten suatu website teknik grabbing dengan native PHP, jika mengalami kesulitan dengan aktivasi cURL.. Terima kasih.

 SYAHRUL (23 Jun 2022 at 09:40 pm)

Said : oknull

 bang (26 Jun 2022 at 07:55 pm)

Said : bang caranya biar upload file dengan ekstensi tertentu di php gimana bang?

 admin (02 Jul 2022 at 11:34 am)

Said : #bang ??# Silahkan akses halaman Membatasi Upload File Dengan Format Tertentu Melalui Atribut HTML, Javascript Dan PHP. Pembatasan dapat dilakukan via HTML dengan menambahkan atribut accept, via javascipt dan juga via PHP script di sisi server.. have a nice day 😍😍 🤩..

 modas (04 Jul 2022 at 03:47 pm)

Said : halo

 Geoww (15 Agt 2022 at 11:45 pm)

Said : Tolong buat tutorial auto insert mysql, saat discaner kak, dan ditampilkan total yg m***k ke databasenya.

 Dita Sihombing (13 Sept 2022 at 02:12 pm)

Said : Dalam implementasi Digital Signature pada sistem untuk dapat signing and verify gimana caranya kak, tolong buat tutorial nya dong kak

Visitor Name
Email

 I'm not a robot