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 dipasaran 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) dijumpai, maka data bisa ditampilkan pada bilah input tersebut (baris ke-34 s.d 42).

HTML

1.  <!DOCTYPE html>
2.  <html>
3.  <head>
4.  <meta name="viewport" content="width=device-width, initial-scale=1">
5.  <meta charset="utf-8">
6.  <meta http-equiv="X-UA-Compatible" content="IE=edge">
7.  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
8.  <title>How To Use Barcode Scanner</title>
9.  <style type="text/css">
10. body{
11.    padding: 20px
12. }
13. .content{
14.    padding: 40px 20px;
15.    background: lightblue;
16.    border-radius: 10px;
17. }
18. #input_scan{
19.    height:33px;width:440px;font-size:22px;padding:7px;
20. }
21. </style>
22. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
23. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
24. </head>
25. <body>
26. <h1>How To Use Barcode Scanner In HTML Page</h1>
27. <div class="content">
28. 
29. <p>Enter Your Barcode : <input type='text' id="input_scan"></p>
30. <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>
31. <script>
32. $(document).ready(function(){
33.    $('#input_scan').val("").focus();
34.    $('#input_scan').keyup(function(e){
35.      var tex = $(this).val();
36.      console.log(tex);
37.      if(tex !="" && e.keyCode===13){
38.         var result = confirm("Your Barcode is : " + tex);
39.         if(result)$('#input_scan').val("").focus();
40.      }
41.      e.preventDefault();
42.    });
43.    $('#btn_clear_text').click(function(){
44.      $('#input_scan').val("").focus();
45.    });
46. });
47. </script>
48. </div>
49. </body>
50. </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 :

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 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 40).

HTML

1.  <!DOCTYPE html>
2.  <html>
3.  <head>
4.  <meta name="viewport" content="width=device-width, initial-scale=1">
5.  <meta charset="utf-8">
6.  <meta http-equiv="X-UA-Compatible" content="IE=edge">
7.  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
8.  <title>How To Use Barcode Scanner</title>
9.  <style type="text/css">
10. body{
11.    padding: 20px
12. }
13. .content{
14.    padding: 40px 20px;
15.    background: lightblue;
16.    border-radius: 10px;
17. }
18. #input_scan{
19.    height:220px;width:440px;font-size:22px;padding:7px;
20. }
21. </style>
22. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
23. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
24. </head>
25. <body>
26. <h1>How To Use Barcode Scanner In HTML Page</h1>
27. <div class="content">
28. <p>Enter Your Barcode : <br><textarea id="input_scan"></textarea></p>
29. <p><button type="button" id="btn_clear_text" class="btn btn-success"><span class="glyphicon glyphicon-remove"></span>  Clear Text</button></p>
30. <script>
31. $(document).ready(function(){
32.    $('#input_scan').val("").focus();
33.    $('#input_scan').keyup(function(e){
34.      var tex = $(this).val();
35.      console.log(tex);
36.      if(tex !="" && e.keyCode===13){
37.         var result = confirm("Your Barcode is : " + tex);
38.         if(result)$('#input_scan').val("").focus();
39.      }
40.      e.preventDefault();
41.    });
42.    $('#btn_clear_text').click(function(){
43.      $('#input_scan').val("").focus();
44.    });
45. });
46. </script>
47. </div>
48. </body>
49. </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   1.136

Kategori : tag iconhtml - tag iconbarcode

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.

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

 admin(04 Mar 2021 at 10:52 am)

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

 billy_123 (06 Mar 2021 at 03:26 pm)

Said : Anyone, can you explain about HTMl.. what is it???

 _Dicky (06 Mar 2021 at 03:27 pm)

Said : HTML is abbreviation ..

 _Dicky (06 Mar 2021 at 03:28 pm)

Said : It's Stand for Hyper text mark up language..

 billy_123 (06 Mar 2021 at 03:28 pm)

Said : It's so clear right now..

 billy_123 (06 Mar 2021 at 03:29 pm)

Said : and what about CSS

 _Dicky (06 Mar 2021 at 03:29 pm)

Said : css for styling sheet guys..

 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.

Visitor Name
Email

 I'm not a robot