-->

Membuat Barcode Generator (BaGen) Version 2 QR Code dengan PHP, MySQL dan Bootstrap 4

Pada artikel sebelumnnya saya sudah membuat barcode generator 1D atau juga disebut barcode batang, pada kesempatan kali ini saya akan memberikan tutorial singkat untuk membuat barcode generator dengan PHP, MySQL dan Boostrap 4 Version 2 yaitu barcode 2D atau juga sering di sebut QR Code.

Kenapa harus QR Code.? karena QR Code lebih reponse di bandingkan dengan barcode 1D, untuk membuat QR Code generator tentunya anda harus mendownload library nya terlebih dahulu, tapi tenang  karena saya sudah menyiapkan source code dan library QR Code di akhir tutorial ini.

  • Langkah pertama adalah mendownload CSS framework bootstrap di https://www.getbootstrap.com
  • Buat sebuah folder dengan nama qrcode di direktori C:/XAMPP/htdocs/qrcode  simpan file bootstrap kedalam folder tersebut.
  • kemudian langkah selanjutnya, silahkan anda copy dan pastekan code di bawah ini kemudian simpan dengan nama index.php ke direktori C:/XAMPP/htdocs/qrcode 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="BaGen (Barcode Generator) QR Code Version">
    <meta name="author" content="Hakko Bio Richard">
    <link rel="icon" href="">

    <title>BaGen (Barcode Generator) QR Code Version</title>

    <!-- Bootstrap core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="signin.css" rel="stylesheet">
  </head>
<?php include "phpqrcode/qrlib.php"; ?>
  <body>

    <div class="container">

      <form method="GET" action="hasil.php" class="form-signin">
        <h2 class="form-signin-heading">QR Code Generator</h2>
        <label for="inputData" class="sr-only">InputData</label>
        <input type="text" id="kode" name="kode" class="form-control" placeholder="Masukkan Data" required autofocus>
        <br />
        <button class="btn btn-lg btn-primary btn-block" type="submit">Generate QR</button>
      </form>

    </div> <!-- /container -->


    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <script src="assets/js/ie10-viewport-bug-workaround.js"></script>
  </body>
</html>



  • Selanjutnya silahkan copy dan pastekan code di bawah ini dan simpan dengan nama hasil.php ke direktori C:/XAMPP/htdocs/qrcode 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="BaGen (Barcode Generator) QR Code Version">
    <meta name="author" content="Hakko Bio Richard">
    <link rel="icon" href="">

    <title>BaGen (Barcode Generator) QR Code Version</title>

    <!-- Bootstrap core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="signin.css" rel="stylesheet">
  </head>
<?php include "phpqrcode/qrlib.php"; ?>
  <body>

    <div class="container">

      <form class="form-signin">
        <h2 class="form-signin-heading">QR Code Generator</h2>
        <label for="inputData" class="sr-only">InputData</label>
        <center><?php QRcode::png("$_GET[kode]", "png/$_GET[kode].png", "L", 6, 6); ?><?php echo "<img src='png/$_GET[kode].png' /><br/>" ?></center>
        <br />
        <center><h4><?php echo "$_GET[kode]"; ?></h4></center>
        <?php $a = "png/$_GET[kode].png"; ?>
        <a class="btn btn-lg btn-primary btn-block" href="<?php echo "$a" ?>" >Download PNG</a>
      </form>

    </div> <!-- /container -->


    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <script src="assets/js/ie10-viewport-bug-workaround.js"></script>
  </body>
</html>


kemudian akses via browser dengan mengetikkan url localhost/qrcode, bila berhasil anda akan mendapatkan tampilan seperti di bawah ini :


Ketika anda mengetikkan karater di textbox kemudian di generate maka akan muncul QR Code nya, misal saya akan generate www.niqoweb.com maka hasilnya akan seperti gambar di bawah ini :



Bagaimana, mudah bukan.? atau masih bingung.? tenang seperti janji saya di awal, saya akan memberikan source code juga demo dari generator barcode QR Code beserta demonya, untuk demo dan link download source code nya anda bisa mendapatkannya di link berikut ini :

DEMO

DOWNLOAD

Link demo dan link download sudah saya berikan, tinggal niat dari anda untuk tetap belajar dengan semangat, semoga tutorial singkat ini bisa bermanfaat untuk anda yang membutuhkan, selamat mencoba dan selamat belajar.

Happy Coding & Programming

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel