Integrasi aplikasi Berbasis Web dan Barcode scanner – part 1

Cara integrasi aplikasi website dengan barcode berbasis php

Di kesempatan rutinitas pekerjaan saya sebagai software house programmer saya sendiri,saya akan bagikan mengenai hal yang saya ingat 2 tahun yang lalu, mengenai pembuatan aplikasi berbasis php yang di integrasi dengan barcode scanner.

APA ITU BARCODE SCANNER ?? barcode scanner sendiri hanyalah sebutan alat yang di gunakan untuk membaca sistemasi barcode.

Require tools (aplikasi yang di butuhkan):

  1.   xampp
  2.  Adobe Dreamweaver
  3.  browser Mozilla , Chrome dan lain lain.

 

Langkah Pengerjaan.

  1. Siapkan kopi + rokok
  2. Membuat layout aplikasi ( mock up) & Design database.
  3. Memastikan Aplikasi testing sudah dalam di install.
  4. Membuat print barcode.
  5. Mengenali barcode.
  6. Menyimpan dalam database.

 

Membuat Design layout (mock Up ).

Saya ingin membuat aplikasi seperti gambar di bawah ini, sehingga dalam implementasinya dapat di sambungkan secara langsung oleh user.

website php

website php

langsung saja , karena saya di sini tidak membahas mengenai coding yang saya buat, maka saya coba untuk share coding yang telah saya buat sendiri ,Untuk sources code dapat di lhat di bawah ini / dapat mengcopy paste

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Integrasi barcode scanner</title>
<style type="text/css">
body{
	background:#CCC;
	margin:0px;
	padding:none;
}
#main{
	width:960px;
	min-height:500px;
	margin:0px auto;
	background:#FFF;
}
#content{
	margin:0px 10%;
}
label{
	min-width:100px;
}
h2{
	margin-top:0%;
}
table#force{
	border:solid 1px #666;
	width:80%;
}
table#force th{
	border:solid 1px #666;
	background:#006;
	color:#FFF
}

</style>
</head>

<body>
	<div id="main">
    	<div id="content">
    		<h2 align="center">Integrasi barcode scanner</h2>
            
            <form action="index.php" method="post">
            <table >
            <tr><td></td><td><input type="hidden" name="idbarang" /></td></tr>
            	<tr><td><label>Nama Barang</label></td><td><input type="text" name="nama"  required placeholder="Nama Barang" /></td></tr>
                <tr><td><label>Jumlah Barang</label></td><td><input type="number"  name="jumlah" required  /><br/>
                <tr><td><label>kategori Barang</label></td><td><select name="kategori">
                					<option value="baju">baju</option>	
                                    <option value="sabun">sabun</option>
                				</select></td></tr>
                <tr><td><label>harga Barang</label></td><td><input type="number"  name="harga" required  /></td></tr>
                <tr><td></td><td><input type="submit"/></td></tr>
                </table>
              </form>
          </div>
         
          <table id="force" align="center">
          	<thead>
            	<tr>
                	<th style="border:solid 1px #666">No</th>
                    <th>Nama Barang</th>
                    <th>Jumlah</th>
                    <th>Kategori</th>
                    <th>Harga Satuan</th>
                    <th>Action</th>
                </th>
            </thead>

          	<tr   >
            	<td>1</td>
                <td>pepsodent</td>
                <td>500</td>
                <td>pasta</td>
                <td>8500</td>
                <td><a href="index.php?e=">Ubah</a> | <a href="index.php?h=">Hapus</a></td>
            </tr>
          
          </table>
    </div>
  
</body>
</html>

 

Membuat Design database.

Di sini saya menggunakan database mysql sebagai sumber media penyimpanan yang akan saya implementasian ke dalam hal tersebut, untuk pembuatan database dapat di tutorial saya sebelum ini, sehingga dapat lebih mengerti tentang operasi mengenai Operasi dasar CRUD pada MYSQL.

Membuat database pada mysql 

create database perusahaan;

 

lalu pilih database dan masukan perintah query di bawah ini. ( Create and Insert table )

-- Membuat Tabel  barang
CREATE TABLE IF NOT EXISTS `barang` (
  `id_barang` int(255) NOT NULL AUTO_INCREMENT,
  `nama_barang` text NOT NULL,
  `qty` int(255) NOT NULL,
  `kategori` varchar(255) NOT NULL,
  `harga` int(255) NOT NULL,
  PRIMARY KEY (`id_barang`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=3 ;
--  insert data ke dalam tabel
INSERT INTO `barang` (`id_barang`, `nama_barang`, `qty`, `kategori`, `harga`) VALUES
(1, 'rinso', 5, 'sabun', 10000),
(2, 'polo', 10, 'baju', 80000);

 

Membuat Koneksitas php Dan Mysql

buat file db.php copy paste script berikut ini dan simpan pada folder   c:\xampp\htdocs\barcode\ sehingga apabila di ketikan pada url localhost dapat di akses dengan localhost/barcode/db.php.

 

<?php
$server = "localhost";
$name = "root";
$pass = "";
$dbname = "perusahaan";
$conn = mysql_connect($server,$name,$pass)  or die("Connecting Problem"); 
if($conn){
	mysql_select_db($dbname) or die("Connecting Problem"); 
}

?>

lalu buat file index.php dan sisipkan file berikut ini, sehingga antar aplikasi dan database terjadi koneksitas yang bisa di akses dari aplikasi website ini:

include "db.php";

 

Menampilkan Database pada Aplikasi

untuk menampilkan database yang telah kita buat pada script di atas pada aplikasi yang telah kita buat maka dapat kita gunakan php sebagai medianya dengan meletakkan di dalam tags <body>, dengan menggunakan scrip di bawah ini.

    	<div id="content">
<?php
if($ide)
		   {
			    $ide = $_GET['e'];
			   $tampil = mysql_query("SELECT *FROM barang WHERE id_barang = '$ide'");
			   while($rowedit = mysql_fetch_array($tampil))
			   {
				   $idbar = $rowedit['id_barang'];
				   $nam = $rowedit['nama_barang'];
				   $jum = $rowedit['qty'];
				   $kat = $rowedit['kategori'];
				   $rego = $rowedit['harga'];
			   }
		   }else
		   {
			   $idbar="";
			   $nam ="";
			   $jum ="";
			   $kat ="";
			   $rego="";
		   }
   
   ?>
            <form action="index.php" method="post">
            <table >
            <tr><td></td><td><input type="hidden" name="idbarang" value="<?php echo $idbar ?>" /></td></tr>
            	<tr><td><label>Nama Barang</label></td><td><input type="text" name="nama" value="<?php echo $nam ?>" required placeholder="Nama Barang" /></td></tr>
                <tr><td><label>Jumlah Barang</label></td><td><input type="number" value="<?php echo $jum ?>" name="jumlah" required  /><br/>
                <tr><td><label>kategori Barang</label></td><td><select name="kategori">
                					<option value="<?php echo $kat?>"><?php echo $kat?></option>
                					<option value="baju">baju</option>	
                                    <option value="sabun">sabun</option>
                				</select></td></tr>
                <tr><td><label>harga Barang</label></td><td><input type="number" value="<?php echo $rego?>" name="harga" required  /></td></tr>
                <tr><td></td><td><input type="submit"/></td></tr>
                </table>
              </form>
          </div>
         
          <table id="force" align="center">
          	<thead>
            	<tr>
                	<th style="border:solid 1px #666">No</th>
                    <th>Nama Barang</th>
                    <th>Jumlah</th>
                    <th>Kategori</th>
                    <th>Harga Satuan</th>
                    <th>Action</th>
                </th>
            </thead>
            <?php
			$no=1;
			$data = mysql_query("SELECT *FROM barang");
			while($rows = mysql_fetch_array($data))
			{
				
			?>
          	<tr <?php if($no%2==0) echo "bgcolor='#CCCCCC'"?>  >
            	<td><?php echo $no; ?></td>
                <td><?php echo $rows['nama_barang']; ?></td>
                <td><?php echo $rows['qty']; ?></td>
                <td><?php echo $rows['kategori']; ?></td>
                <td><?php echo $rows['harga']; ?></td>
                <td><a href="index.php?e=<?php echo $rows['id_barang']?>">Ubah</a> | <a href="index.php?h=<?php echo $rows['id_barang']?>">Hapus</a></td>
            </tr>
            <?php $no++;
			}
			?>
          </table>
    </div>

 

Memasukan Data  dan mengubah

untuk menampilkan database yang telah kita buat pada script di atas pada aplikasi yang telah kita buat maka dapat kita gunakan php sebagai medianya dengan meletakkan di dalam tags <body>, dengan menggunakan scrip di bawah ini.

 $nama = isset($_POST['nama']);
		   if($nama)
		   {
			   $idbarang =$_POST['idbarang'];
			   $nama = $_POST['nama'];
			   $jumlah = $_POST['jumlah'];
			   $kategori = $_POST['kategori'];
			   $harga = $_POST['harga'];
			   if(!empty($idbarang))
			   {
				   	mysql_query("UPDATE barang SET nama_barang = '$nama' , qty = '$jumlah' , kategori ='$kategori' ,harga = '$harga' WHERE id_barang = '$idbarang'");
			   }
			   else
			   {
			   	mysql_query("INSERT INTO barang VALUES ('NULL','$nama','$jumlah','$kategori','$harga')");
			   }
		   }

Menghapus Data dalam tabel

Proses penghapusan sebuah data dari aplikasi website, dapat juga di akses dengan metode $_GET pada bahasa pemrograman php.sehingga tidak terjadi kerancuan.

 $idb = isset($_GET['h']);
		   if($idb)
		   {
			   $idb = $_GET['h'];
			   mysql_query("DELETE FROM barang WHERE id_barang = '$idb'");
		   }

untuk mengimplementasikan $_GET , kita sisipkan id_tables ke dalam link yang akan gunakan untuk media penghapusan. sehingga jika user mengklik tombol tersebut dapat terjadi proses hapus.

<td><a href="index.php?e=<?php echo $rows['id_barang']?>">Ubah</a> | <a href="index.php?h=<?php echo $rows['id_barang']?>">Hapus</a></td>

 

Ok, sekarang kita buka browser dan coba akses halaman localhost/barcode , indah bukan !!!??

website jadi

hasil pembuatan aplikasi

full sources code.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Integrasi barcode scanner</title>
<style type="text/css">
body{
	background:#CCC;
	margin:0px;
	padding:none;
}
#main{
	width:960px;
	min-height:500px;
	margin:0px auto;
	background:#FFF;
}
#content{
	margin:0px 10%;
}
label{
	min-width:100px;
}
h2{
	margin-top:0%;
}
table#force{
	border:solid 1px #666;
	width:80%;
}
table#force th{
	border:solid 1px #666;
	background:#006;
	color:#FFF
}

</style>
</head>

<body>
	<div id="main">
    	<div id="content">
    		<h2 align="center">Integrasi barcode scanner</h2>
             <?php
		  include"db.php";
		  
		   $nama = isset($_POST['nama']);
		   if($nama)
		   {
			   $idbarang =$_POST['idbarang'];
			   $nama = $_POST['nama'];
			   $jumlah = $_POST['jumlah'];
			   $kategori = $_POST['kategori'];
			   $harga = $_POST['harga'];
			   if(!empty($idbarang))
			   {
				   	mysql_query("UPDATE barang SET nama_barang = '$nama' , qty = '$jumlah' , kategori ='$kategori' ,harga = '$harga' WHERE id_barang = '$idbarang'");
			   }
			   else
			   {
			   	mysql_query("INSERT INTO barang VALUES ('NULL','$nama','$jumlah','$kategori','$harga')");
			   }
		   }
		   
		   //DELETE files
		   $idb = isset($_GET['h']);
		   if($idb)
		   {
			   $idb = $_GET['h'];
			   mysql_query("DELETE FROM barang WHERE id_barang = '$idb'");
		   }
		   
		   $ide = isset($_GET['e']);
		   if($ide)
		   {
			    $ide = $_GET['e'];
			   $tampil = mysql_query("SELECT *FROM barang WHERE id_barang = '$ide'");
			   while($rowedit = mysql_fetch_array($tampil))
			   {
				   $idbar = $rowedit['id_barang'];
				   $nam = $rowedit['nama_barang'];
				   $jum = $rowedit['qty'];
				   $kat = $rowedit['kategori'];
				   $rego = $rowedit['harga'];
			   }
		   }else
		   {
			   $idbar="";
			   $nam ="";
			   $jum ="";
			   $kat ="";
			   $rego="";
		   }
   
   ?>
            <form action="index.php" method="post">
            <table >
            <tr><td></td><td><input type="hidden" name="idbarang" value="<?php echo $idbar ?>" /></td></tr>
            	<tr><td><label>Nama Barang</label></td><td><input type="text" name="nama" value="<?php echo $nam ?>" required placeholder="Nama Barang" /></td></tr>
                <tr><td><label>Jumlah Barang</label></td><td><input type="number" value="<?php echo $jum ?>" name="jumlah" required  /><br/>
                <tr><td><label>kategori Barang</label></td><td><select name="kategori">
                					<option value="<?php echo $kat?>"><?php echo $kat?></option>
                					<option value="baju">baju</option>	
                                    <option value="sabun">sabun</option>
                				</select></td></tr>
                <tr><td><label>harga Barang</label></td><td><input type="number" value="<?php echo $rego?>" name="harga" required  /></td></tr>
                <tr><td></td><td><input type="submit"/></td></tr>
                </table>
              </form>
          </div>
         
          <table id="force" align="center">
          	<thead>
            	<tr>
                	<th style="border:solid 1px #666">No</th>
                    <th>Nama Barang</th>
                    <th>Jumlah</th>
                    <th>Kategori</th>
                    <th>Harga Satuan</th>
                    <th>Action</th>
                </th>
            </thead>
            <?php
			$no=1;
			$data = mysql_query("SELECT *FROM barang");
			while($rows = mysql_fetch_array($data))
			{
				
			?>
          	<tr <?php if($no%2==0) echo "bgcolor='#CCCCCC'"?>  >
            	<td><?php echo $no; ?></td>
                <td><?php echo $rows['nama_barang']; ?></td>
                <td><?php echo $rows['qty']; ?></td>
                <td><?php echo $rows['kategori']; ?></td>
                <td><?php echo $rows['harga']; ?></td>
                <td><a href="index.php?e=<?php echo $rows['id_barang']?>">Ubah</a> | <a href="index.php?h=<?php echo $rows['id_barang']?>">Hapus</a></td>
            </tr>
            <?php $no++;
			}
			?>
          </table>
    </div>
  
</body>
</html>

 

Demikian Tutorial yang sederhana ini saya buat dengan keadaan yang serba cepat dan mudah , semoga bermanfaat bagi dunia delopment dan programer website yang telah di tekuni / pelajari – cryme gembel

 

 

Tutorial offline dapat di Download TUTORIAL 

Source code dapat di Download SOURCES CODE

 

 

 

 

 

Leave a Reply

Your email address will not be published. Required fields are marked *