Cara Membuat Barcode Dengan VueJS

Hallo sahabat Dumetschool, ada yang tahu barcode itu apa sih? jika sahabat belum tahu tentang barcode. Barcode adalah sebuah bentuk pola geometric yang pada umumnya seperti garis-garis tegak lurus atau vertikal. Untuk fungsi barcode sendiri sering kita lihat dipakai memindai sebuah produk yang ada pada label.Barcode saat ini memiliki 2 bentuk yaitu :

barcode 1 dimensi atau barcode batang adalah data yang terbentuk sesuai lebar garis serta spasi tiap garisnya
barcode 2 dimensi atau yang biasa disebut QR barcode adalah sejenis data matrik , saat ini hampir banyak digunakan karena sangat mudah dipakai atau cepat dalam membaca data yang tersimpan.

Baiklah dalam kasus ini kita akan membuat barcode batang atau barcode linear, bagaimana cara membuatnya yuuk simak langkah-langkah berikut ini:

Langkah pertama buat file HTML lalu ketikkan code berikut ini:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
	<script src="https://unpkg.com/tui-vue-barcode@0.0.4/dist/tui-vue-barcode.min.js"></script>
	<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
	
		
			<h1 class="text-center mt-3">Membuat Barcode Menggunakan VueJS</h1>
		<div class="container mt-3 p-3 bg-info rounded-pill" id="app">
			<div class="row text-center mt-4">
			  <div class="col-md-3 offset-2">
			    <label for="code" class="badge badge-warning p-2">Code</label>
			    <input type="text" placeholder="Entry code" v-model="code">
			  </div>
			  <div class="col-md-3 offset-2">
			    <label for="height" class="badge badge-warning p-2">Height</label>
			    <select v-model="height" >
			      <option value="25">25</option>
			      <option value="50">50</option>
			    </select>
			  </div>
			</div>
			<div class="row text-center mt-4">
				<div class="col-md-4 offset-4">
		  			<barcode v-model="code" :options="options"></barcode>
		  		</div>
		  	</div>
		</div>

Code diatas ada beberapa library yang disisipkan seperti VueJS, Bootstrap, dan plugin Vue-Barcode, pada form select digunakan untuk mengatur tinggi barcode.

Lalu jangan lupa tambahkan code dari javascript seperti dibawah ini:

	<script>
		Vue.component(tuiVueBarcode.name, tuiVueBarcode);

		const app = new Vue({
		  el:'#app',
		  data() {
		    return {
		      code: '',
		      height: 25
		    }
		  },
		  computed: {
		    options() {
		      return {
		        height: this.height
		      }
		    }
		  }
		})
	</script>

sekarang coba running pada browser masing-masing maka akan seperti tampilan dibawah ini

Demikian tutorial tentang cara membuat barcode dengan VueJS, semoga bermanfaat dan selamat mencoba

terima kasih

Kategori