สร้าง Barcode ด้วย JsBarcode

สวัสดีครับ ในบทความนี้ ทางผู้เขียนจะขอแนะนำ Library สำหรับสร้าง Barcode แบบง่าย ๆ กันครับ นั่นก็คือ JsBarcode ซึ่งเป็น Javascript ใช้งานได้ง่ายครับ ลองไปดูที่เว็บผู้พัฒนากันก่อนคร้ับ

https://lindell.me/JsBarcode/

สำหรับมือใหม่ที่ดูแล้วไม่รู้จะนำไปใช้งานยังไง สามารถทำตามบทความนี้ได้เลยครับ

เริ่มต้นใช้งาน
ก่อนอื่นเราต้องนำเข้า JsBarcode มาไว้ใน หน้าเว็บของเราก่อนครับ

<script src="https://cdn.jsdelivr.net/jsbarcode/3.6.0/JsBarcode.all.min.js"></script>

1	<script src="https://cdn.jsdelivr.net/jsbarcode/3.6.0/JsBarcode.all.min.js"></script>

จากนั้นสร้าง Tag img โดยกำหนด id มีค่าเท่ากับ barcode

<img id="barcode"/>

1	<img id="barcode"/>

เมื่อเรียบร้อยแล้วเราจะมาเรียกใช้ Jsbarcode กันต่อครับ

	<script>
		JsBarcode("#barcode1", "123456789");//เรียกใช้งาน JsBarcode 
	</script>

JsBarcode("#barcode1", "123456789");//เรียกใช้งาน JsBarcode

</script>

ตัวอย่างไฟล์ index.html ทั้งหมด

<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title>Js Barcode Demo</title>
	<!-- เรียกใช้งาน JsBarcode.all.js -->
	<script src="https://cdn.jsdelivr.net/jsbarcode/3.6.0/JsBarcode.all.min.js"></script>
	</head>
<body>
	<div>
		<img id="barcode1"/><!-- สร้าง Tag img เพื่อแสดงภาพ Barcode-->
		<img id="barcode"/><!-- สร้าง Tag img เพื่อแสดงภาพ Barcode-->
	</div>
	<script>
		JsBarcode("#barcode1", "123456789");//เรียกใช้งาน JsBarcode 
	</script>
</body>
</html>

<!DOCTYPE HTML>

<head>

<title>Js Barcode Demo</title>

</head>

<body>

<div>

</div>

JsBarcode("#barcode1", "123456789");//เรียกใช้งาน JsBarcode

</script>

</body>

</html>

ตัวอย่างการทำงาน หากไม่มีอะไรผิดพลาดจะแสดงผลดังภาพครับ

เราสามารถกำหนด Options ต่าง ๆของ Barocde ได้ เช่น ความกว้าง ความสูง หรือ สีของแถบ Barcode เป็นต้น

ตัวอย่างการปรับแต่ง Options

<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title></title>
	<!-- เรียกใช้งาน JsBarcode.all.js -->
	<script src="https://cdn.jsdelivr.net/jsbarcode/3.6.0/JsBarcode.all.min.js"></script>

	</head>
<body>
	<div>
		<img id="barcode"/><!-- สร้าง Tag img เพื่อแสดงภาพ Barcode-->
	</div>
	<script>
		JsBarcode("#barcode", "123456789", {
		  lineColor: "blue",//สีของแถบบาร์โค๊ต
		  width: 3,//ความกว้าง
		  height: 80,//ความสูง
		  displayValue: true//แสดงรหัสบาร์โค๊ต
		});
	</script>
</body>
</html>

<!DOCTYPE HTML>

<head>

</head>

<body>

<div>

</div>

JsBarcode("#barcode", "123456789", {

lineColor: "blue",//สีของแถบบาร์โค๊ต

width: 3,//ความกว้าง

height: 80,//ความสูง

displayValue: true//แสดงรหัสบาร์โค๊ต

});

</script>

</body>

</html>

ตัวอย่างการแสดงผล

การใช้งาน Barcode Js ร่วมกับ PHP/MySQL

ตัวอย่างต่อไปนี้จะเป็นการใช้งาน Barcode Js แสดงผลข้อมูลที่ได้จาก PHP/MySQL กันครับ

ก่อนอื่นเรามาสร้างฐานข้อมูลตัวอย่างกันก่อนครับ

สร้างฐานข้อมูลชื่อ stock จากนั้นสร้างตาราง demo ตามตัวอย่างต่อไปนี้

CREATE TABLE `demo` (
  `id` int(11) NOT NULL,
  `barcode` varchar(100) DEFAULT NULL,
  `name` varchar(255) NOT NULL,
  `price` double NOT NULL,
  `units` varchar(50) NOT NULL
) ENGINE=MyISAM DEFAULT CHARSET=utf8;

INSERT INTO `demo` (`id`, `barcode`, `name`, `price`, `units`) VALUES
(2, '00000002', 'กาแฟ (ซอง 2 กรัม)', 322, 'ถุง'),
(4, '00000004', 'ชาลิปตัน', 224.29, 'ถุง'),
(5, '00000005', 'คอฟฟี่เมท (ซอง)', 135.69, 'ซอง'),
(6, '00000006', 'น้ำตาล (ซอง)', 130, 'ถุง'),
(7, '00000007', 'กาแฟ (สำหรับเครื่อง)', 137.23, 'ถุง'),
(8, '00000008', 'คอฟฟี่เมท (สำหรับเครื่อง)', 95.06, 'ถุง'),
(9, '00000009', 'ช็อคโกแลต (สำหรับเครื่อง)', 132.08, 'ถุง'),
(10, '00000010', 'กรวยกระดาษ', 39.2, 'แพค'),
(11, '00000011', 'แก้วกาแฟ', 70, 'แพค'),
(12, '00000012', 'ก้านคนกาแฟ', 70, 'แพค'),
(13, '00000013', 'กระดาษชำระแกนใหญ่', 74.75, 'ม้วน'),
(14, '00000014', 'กระดาษเช็ดมือ', 27.46, 'แพค'),
(15, '00000015', 'ทิชชู่ม้วนเล็ก', 4.16, 'ม้วน'),
(16, '00000016', 'ทิชชู่กล่อง KLEENEX', 22.58, 'กล่อง'),
(17, '00000017', 'น้ำยาล้างจานชุดมีฟองน้ำ', 16, 'ชุด');

CREATE TABLE `demo` (

`id` int(11) NOT NULL,

`barcode` varchar(100) DEFAULT NULL,

`name` varchar(255) NOT NULL,

`price` double NOT NULL,

`units` varchar(50) NOT NULL

) ENGINE=MyISAM DEFAULT CHARSET=utf8;

INSERT INTO `demo` (`id`, `barcode`, `name`, `price`, `units`) VALUES

(2, '00000002', 'กาแฟ (ซอง 2 กรัม)', 322, 'ถุง'),

(4, '00000004', 'ชาลิปตัน', 224.29, 'ถุง'),

(5, '00000005', 'คอฟฟี่เมท (ซอง)', 135.69, 'ซอง'),

(6, '00000006', 'น้ำตาล (ซอง)', 130, 'ถุง'),

(7, '00000007', 'กาแฟ (สำหรับเครื่อง)', 137.23, 'ถุง'),

(8, '00000008', 'คอฟฟี่เมท (สำหรับเครื่อง)', 95.06, 'ถุง'),

(9, '00000009', 'ช็อคโกแลต (สำหรับเครื่อง)', 132.08, 'ถุง'),

(10, '00000010', 'กรวยกระดาษ', 39.2, 'แพค'),

(11, '00000011', 'แก้วกาแฟ', 70, 'แพค'),

(12, '00000012', 'ก้านคนกาแฟ', 70, 'แพค'),

(13, '00000013', 'กระดาษชำระแกนใหญ่', 74.75, 'ม้วน'),

(14, '00000014', 'กระดาษเช็ดมือ', 27.46, 'แพค'),

(15, '00000015', 'ทิชชู่ม้วนเล็ก', 4.16, 'ม้วน'),

(16, '00000016', 'ทิชชู่กล่อง KLEENEX', 22.58, 'กล่อง'),

(17, '00000017', 'น้ำยาล้างจานชุดมีฟองน้ำ', 16, 'ชุด');

สร้างไฟล์ demo.php

<?php
$servername = "localhost";
$username = "root";
$password = "";
$db_name = "stock";

// สร้างการเชื่อมต่อฐานข้อมูล
$conn = mysqli_connect($servername, $username, $password,$db_name);

//กำหนด charset ให้เป็น utf8 เพื่อรองรับภาษาไทย
mysqli_set_charset($conn,"utf8");
// ตรวจสอบการเชื่อมต่อฐานข้อมูล
if (!$conn) {
	//กรณีเชื่อมต่อไม่ได้
	die("Connection failed: " . mysqli_connect_error());
}
?>
<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title>JsBarcode Demo</title>
	<!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
</head>
<body>
	<div>
	<?php
		$sql = "SELECT * FROM demo";

		$result = mysqli_query($conn, $sql);

		if (mysqli_num_rows($result) > 0) {
			
			echo "<table id='item-all' class='table'>";
				
				echo "<tr>";
					echo "<th width='20%'>Barcode</th>";
					echo "<th width='10%'>Item Code</th>";
					echo "<th width='60%'>Item Name</th>";
					echo "<th width='20%'>Item Price</th>";
				echo "</tr>";
				
				while ($r = mysqli_fetch_assoc($result)) {
					
					echo "<tr>";
						echo "<td>";
						echo "<span data-id='".$r['id']."' data-barcode='".$r['barcode']."'></span>";
						echo "<img id='barcode_".$r['id']."'>";
						echo "</td>";
						echo "<td>".$r['barcode']."</td>";
						echo "<td>".$r['name']."</td>";
						echo "<td>".$r['price']."</td>";
					echo "</tr>";
				}
				
			echo "</table>";
		}

		mysqli_close($conn);
	?>
	</div>
	
	<!-- เรียกใช้งาน JsBarcode.all.js -->
	<script src="dist/JsBarcode.all.js"></script>
	<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    
	<script>
		let IDs = [];
		let Barcode = [];

		$('#item-all').find('span').each(function(){ 

			let id = $(this).data('id');
			let bar = $(this).data('barcode');

			if(id !== '' && bar !== ''){
				IDs.push(id); 
				Barcode.push(bar);
			}
		});		
		
		for(let i = 1;i<=IDs.length;i++){

			let ID = IDs[(i -1)];
			let BARCODE = Barcode[(i -1)];

			JsBarcode('#barcode_' + ID, BARCODE);
		}		
	</script>
</body>
</html>

<?php

$servername = "localhost";

$username = "root";

$password = "";

$db_name = "stock";

// สร้างการเชื่อมต่อฐานข้อมูล

$conn = mysqli_connect($servername, $username, $password,$db_name);

//กำหนด charset ให้เป็น utf8 เพื่อรองรับภาษาไทย

mysqli_set_charset($conn,"utf8");

// ตรวจสอบการเชื่อมต่อฐานข้อมูล

if (!$conn) {

//กรณีเชื่อมต่อไม่ได้

die("Connection failed: " . mysqli_connect_error());

}

<!DOCTYPE HTML>

<head>

<title>JsBarcode Demo</title>

</head>

<body>

<div>

<?php

$sql = "SELECT * FROM demo";

$result = mysqli_query($conn, $sql);

if (mysqli_num_rows($result) > 0) {

echo "<table id='item-all' class='table'>";

echo "<tr>";

echo "<th width='20%'>Barcode</th>";

echo "<th width='10%'>Item Code</th>";

echo "<th width='60%'>Item Name</th>";

echo "<th width='20%'>Item Price</th>";

echo "</tr>";

while ($r = mysqli_fetch_assoc($result)) {

echo "<tr>";

echo "<td>";

echo "<span data-id='".$r['id']."' data-barcode='".$r['barcode']."'></span>";

echo "<img id='barcode_".$r['id']."'>";

echo "</td>";

echo "<td>".$r['barcode']."</td>";

echo "<td>".$r['name']."</td>";

echo "<td>".$r['price']."</td>";

echo "</tr>";

}

echo "</table>";

}

mysqli_close($conn);

</div>

let IDs = [];

let Barcode = [];

$('#item-all').find('span').each(function(){

let id = $(this).data('id');

let bar = $(this).data('barcode');

if(id !== '' && bar !== ''){

IDs.push(id);

Barcode.push(bar);

}

});

for(let i = 1;i<=IDs.length;i++){

let ID = IDs[(i -1)];

let BARCODE = Barcode[(i -1)];

JsBarcode('#barcode_' + ID, BARCODE);

}

</script>

</body>

</html>

ตัวอย่างการทำงาน

Example Source Code

ขอขอบคุณข้อมูลจาก / Credit By
https://lindell.me/JsBarcode/

การใช้งาน Barcode Js ร่วมกับ PHP/MySQL

Popular Posts