Barcode Generator Code in PHP

The Barcode Generator in PHP is a final year project for BSCS BSIT and MCS studensts. For this project,

Generate a barcode dynamically
Generate a barcode in code of your choice.
Generate a barcode in desired type of card.

Functional requirements of Barcode Generator in PHP

- We can generate a bar code with our given code, type and label.
- The Barcode Generator in PHP supports printing and generating the barcode.
- The Barcode Generator in PHP supports downloading the generated barcode to an image (png).

barcode.php

<?php

require 'vendor/autoload.php';
extract($_POST);

$generator = new Picqer\Barcode\BarcodeGeneratorPNG();
$code2 ='';
foreach(str_split($code) as $key => $c){
	$code2 .=$c;
	if(count(str_split($code)) != $key)
	$code2 .=' ';

}
?>

<div id="field">
<center><large><b><?php echo $label ?></b></large></center>
<img src="data:image/png;base64,<?php echo base64_encode($generator->getBarcode($code, $type)) ?>">
<div id="code"><?php echo $code2 ?></div>
</div>

<?php

require 'vendor/autoload.php';

extract($_POST);

$generator = new Picqer\Barcode\BarcodeGeneratorPNG();

$code2 ='';

foreach(str_split($code) as $key => $c){

$code2 .=$c;

if(count(str_split($code)) != $key)

$code2 .=' ';

}

<img src="data:image/png;base64,<?php echo base64_encode($generator->getBarcode($code, $type)) ?>">

</div>

index.php

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Barcode Generator</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="bootstrap.min.css">
  <script src="jquery.min.js"></script>
  <script src="bootstrap.min.js"></script>
  <script src="html2canvas.js"></script>
</head>
<style>
  @media screen{

  body{
    height: calc(100%);
    width: calc(100%);
  }
  }
  .container-fluid{
    height: calc(100%);

  }
  div#display {
    display: flex;
    height: 100%;
    width: 100%;
    align-items: center;
}
@media print{
  div#display {
    display: flex;
    height: auto;
    width: 100%;
    align-items: center;
}
}
#display #field,#display center {
    margin: auto;
}
#field img{
    height: 9vh;
    max-width: 100%
}
div#code {
    font-weight: 700;
    font-size: 17px;
    text-align: justify;
    text-align-last: justify;
}
</style>
<body class="alert-info text-dark">

<div class="container-fluid">
  <div class="col-md-12">
    <div class="row">
      <div class="card col-md-4 offset-md-4 mt-5">
        <div class="card-body text-center">
        <h4>Simple Barcode Generator</h4>
          
        </div>
      </div>
    </div>
    <div class="row">
      <div class="card col-md-6 mt-5 mr-5">
        <div class="card-body">
          <div class="form-group">
            <label for="" class="control-label ">Code</label>
            <input type="text" id="code" class="form-control">
          </div>
           <div class="form-group">
            <label for="" class="control-label">Label</label>
            <input type="text" id="label" class="form-control">
          </div>
          <div class="form-group">
            <label for="" class="control-label">Barcode Type</label>
            <select class="browser-default custom-select" id="type">
              <option value="C128">Code 128</option>
              <option value="C128A">Code 128 A</option>
              <option value="C128B">Code 128 B</option>
              <option value="C39">Code 39</option>
              <option value="C39E">Code 39 E</option>
              <option value="C93">Code 93</option>
              <option value="EAN8">EAN 8</option>
              <option value="EAN13">EAN 13</option>
            </select>
          </div>
          <button type="button" class="col-md-2 btn-block float-right btn btn-primary btn-sm" id="generate">Generate</button>
        </div>
      </div>
      <div class=" card col-md-5 ml-5 mt-5" id='bcode-card'>
            <div class="card-body">
              <div id="display">
                <center>Barcode</center>
              </div>
               
            </div>
            <div class="card-footer" style="display:none">
              <center>
                <button type="button" class=" btn-block btn btn-success btn-sm" id="print">Print</button>
              <button type="button" class=" btn-block btn btn-primary btn-sm" id="save">Download</button>  
              </center>
              
            </div>
      </div>

    </div>
  </div>
  
</div>

</body>
</html>

<script>
  $('#generate').on('click',function(){
    if($('#code').val() != ''){
      $.ajax({
        url:'barcode.php',
        method:"POST",
        data:{code:$('#code').val(),type:$('#type').val(),label:$('#label').val()},
        error:err=>{
          console.log(err)
        },
        success:function(resp){
          $('#display').html(resp)
          $('#bcode-card .card-footer').show('slideUp')
        }
      })
    }
  })

    $('#save').click(function(){
    html2canvas($('#field'), {
    onrendered: function(canvas) {                    
      var img = canvas.toDataURL("image/png");
      
      var uri = img.replace(/^data:image\/[^;]/, 'data:application/octet-stream');
      
      var link = document.createElement('a');
          if (typeof link.download === 'string') {
              document.body.appendChild(link); 
              link.download = 'barcode_'+$('#code').val()+'.png';
              link.href = uri;
              link.click();
              document.body.removeChild(link);
          } else {
              location.replace(uri);
          }
      
    }
  }); 
  })
    $('#print').click(function(){
      var openWindow = window.open("", "", "_blank");
      openWindow.document.write($('#display').parent().html());
      openWindow.document.write('<style>'+$('style').html()+'</style>');
      openWindow.document.close();
      openWindow.focus();
      openWindow.print();
      // openWindow.close();
      setTimeout(function(){
      openWindow.close();
      },1000)
    })
</script>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

<!DOCTYPE html>

<head>

<title>Barcode Generator</title>

</head>

<style>

@media screen{

body{

height: calc(100%);

width: calc(100%);

}

.container-fluid{

height: calc(100%);

}

div#display {

display: flex;

height: 100%;

width: 100%;

align-items: center;

}

@media print{

div#display {

display: flex;

height: auto;

width: 100%;

align-items: center;

}

#display #field,#display center {

margin: auto;

}

#field img{

height: 9vh;

max-width: 100%

}

div#code {

font-weight: 700;

font-size: 17px;

text-align: justify;

text-align-last: justify;

}

</style>

<h4>Simple Barcode Generator</h4>

</div>

</div>

<label for="" class="control-label">Label</label>

</div>

<label for="" class="control-label">Barcode Type</label>

</select>

</div>

<button type="button" class="col-md-2 btn-block float-right btn btn-primary btn-sm" id="generate">Generate</button>

</div>

<center>Barcode</center>

</div>

<button type="button" class=" btn-block btn btn-success btn-sm" id="print">Print</button>

<button type="button" class=" btn-block btn btn-primary btn-sm" id="save">Download</button>

</center>

</div>

</body>

</html>

$('#generate').on('click',function(){

if($('#code').val() != ''){

$.ajax({

url:'barcode.php',

method:"POST",

data:{code:$('#code').val(),type:$('#type').val(),label:$('#label').val()},

error:err=>{

console.log(err)

success:function(resp){

$('#display').html(resp)

$('#bcode-card .card-footer').show('slideUp')

}

})

}

})

$('#save').click(function(){

html2canvas($('#field'), {

onrendered: function(canvas) {

var img = canvas.toDataURL("image/png");

var uri = img.replace(/^data:image\/[^;]/, 'data:application/octet-stream');

var link = document.createElement('a');

if (typeof link.download === 'string') {

document.body.appendChild(link);

link.download = 'barcode_'+$('#code').val()+'.png';

link.href = uri;

link.click();

document.body.removeChild(link);

} else {

location.replace(uri);

}

});

})

$('#print').click(function(){

var openWindow = window.open("", "", "_blank");

openWindow.document.write($('#display').parent().html());

openWindow.document.write('<style>'+$('style').html()+'</style>');

openWindow.document.close();

openWindow.focus();

openWindow.print();

// openWindow.close();

setTimeout(function(){

openWindow.close();

},1000)

})

</script>

test.php

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<style>
table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
}

td, th {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
}

tr:nth-child(even) {
    background-color: #dddddd;
}
</style>

</head>
<body>

<table id="preview-table">
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td>Ernst Handel</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>Helen Bennett</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Yoshi Tannamuri</td>
    <td>Canada</td>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
  </tr>
</table>


<button id="export">Table Export</button>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="tableExport.js"></script>
<script type="text/javascript" src="html2canvas.js"></script>

<script type="text/javascript">

$('#export').on('click', function() {
	console.log('exporting');
	//$('#preview-table').tableExport({type:'png',escape:'false'});

	html2canvas($('#preview-table'), {
		onrendered: function(canvas) {										
			var img = canvas.toDataURL("image/png");
			//var img = canvas.toDataURL("application/octet-stream");
			
			function saveAs(uri, filename) {
			    var link = document.createElement('a');
			    if (typeof link.download === 'string') {
			        document.body.appendChild(link); // Firefox requires the link to be in the body
			        link.download = filename;
			        link.href = uri;
			        link.click();
			        document.body.removeChild(link); // remove the link when done
			    } else {
			        location.replace(uri);
			    }
			}
			
			var uri = img.replace(/^data:image\/[^;]/, 'data:application/octet-stream');
			//window.open(url);
			saveAs(uri, 'tableExport.png');
			
			
		}
	});	
});


</script>


</body>
</html>

100

101

102

103

104

105

106

107

108

109

110

111

<!DOCTYPE html>

<html>

<head>

<title>Insert title here</title>

<style>

table {

font-family: arial, sans-serif;

border-collapse: collapse;

width: 100%;

}

td, th {

border: 1px solid #dddddd;

text-align: left;

padding: 8px;

}

tr:nth-child(even) {

background-color: #dddddd;

}

</style>

</head>

<body>

<tr>

<th>Company</th>

<th>Contact</th>

<th>Country</th>

</tr>

<tr>

<td>Alfreds Futterkiste</td>

<td>Maria Anders</td>

<td>Germany</td>

</tr>

<tr>

<td>Centro comercial Moctezuma</td>

<td>Francisco Chang</td>

<td>Mexico</td>

</tr>

<tr>

<td>Ernst Handel</td>

<td>Roland Mendel</td>

<td>Austria</td>

</tr>

<tr>

<td>Island Trading</td>

<td>Helen Bennett</td>

</tr>

<tr>

<td>Laughing Bacchus Winecellars</td>

<td>Yoshi Tannamuri</td>

<td>Canada</td>

</tr>

<tr>

<td>Magazzini Alimentari Riuniti</td>

<td>Giovanni Rovelli</td>

<td>Italy</td>

</tr>

</table>

<button id="export">Table Export</button>

$('#export').on('click', function() {

console.log('exporting');

//$('#preview-table').tableExport({type:'png',escape:'false'});

html2canvas($('#preview-table'), {

onrendered: function(canvas) {

var img = canvas.toDataURL("image/png");

//var img = canvas.toDataURL("application/octet-stream");

function saveAs(uri, filename) {

var link = document.createElement('a');

if (typeof link.download === 'string') {

document.body.appendChild(link); // Firefox requires the link to be in the body

link.download = filename;

link.href = uri;

link.click();

document.body.removeChild(link); // remove the link when done

} else {

location.replace(uri);

}

var uri = img.replace(/^data:image\/[^;]/, 'data:application/octet-stream');

//window.open(url);

saveAs(uri, 'tableExport.png');

}

});

</script>

</body>

</html>

Note: The UPC code is a barcode symbology that is used all over the world for tracking trade items in stores. You can also buy UPC codes from upcs.com.

Barcode Generator Code in PHP

Barcode Generator Code in PHP

Functional requirements of Barcode Generator in PHP

Download code of Barcode Generator Code in PHP

Related Posts:

Leave a Comment Cancel Reply